:root {
    --bg: #eef2f7;
    --bg-grad: linear-gradient(135deg, #eef2f7 0%, #e6ecf5 100%);
    --surface: #ffffff;
    --border: #e4e9f2;
    --text: #1c2536;
    --muted: #6b7385;
    --primary: #635bff;
    --primary-hover: #4f46e5;
    --primary-soft: #eef0ff;
    --success: #12b76a;
    --warning: #f79009;
    --danger: #f04438;
    --info: #06aed4;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
    --shadow-md: 0 4px 16px rgba(16,24,40,.07);
    --shadow-lg: 0 16px 40px rgba(16,24,40,.10);
    --shadow-pop: 0 24px 56px rgba(99,91,255,.15);
}

* { box-sizing: border-box; }

html, body {
    background: var(--bg-grad);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--primary-hover); }

main[role="main"] { min-height: calc(100vh - 68px); padding-bottom: 2rem; }

.navbar {
    background: rgba(15, 23, 42, .96) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.15);
    padding: .7rem 0;
    border: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navbar-brand {
    font-size: 1.05rem;
    font-weight: 800;
    padding: .4rem .85rem;
    border-radius: var(--radius-xs);
    background: linear-gradient(135deg, rgba(99,91,255,.35), rgba(6,174,212,.25));
    color: #fff !important;
    transition: transform .2s ease, box-shadow .2s ease;
    letter-spacing: .2px;
}
.navbar-brand:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99,91,255,.4);
    color: #fff !important;
}
.navbar .nav-link {
    padding: .5rem .9rem !important;
    border-radius: var(--radius-xs);
    transition: background .15s ease, color .15s ease, transform .15s ease;
    font-weight: 500;
    color: rgba(255,255,255,.65) !important;
}
.navbar .nav-link:hover {
    background: rgba(255,255,255,.08);
    color: #fff !important;
    transform: translateY(-1px);
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.page-title {
    font-weight: 800;
    margin: 0 0 .2rem 0;
    font-size: 1.45rem;
    color: var(--text);
    letter-spacing: -.3px;
}
.page-sub {
    color: var(--muted);
    font-size: .85rem;
}

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.modern-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--surface);
    transition: box-shadow .25s ease;
}
.modern-card:hover { box-shadow: var(--shadow-lg); }

.card-header {
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.35rem;
    font-weight: 700;
    letter-spacing: .1px;
}
.card-body { padding: 1.35rem; }

.card-hover {
    transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .22s ease;
    border: 1px solid var(--border);
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-pop);
    border-color: rgba(99,91,255,.25);
}

.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    padding: .55rem 1.1rem;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    border-width: 1px;
    letter-spacing: .15px;
    position: relative;
    overflow: hidden;
}
.btn-sm { padding: .4rem .85rem; font-size: .82rem; border-radius: var(--radius-xs); }

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,91,255,.3);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, #4338ca 100%);
    border-color: var(--primary-hover);
    box-shadow: 0 8px 20px rgba(99,91,255,.4);
    transform: translateY(-2px);
    color: #fff;
}

.btn-success {
    background: linear-gradient(135deg, var(--success), #0d9d70);
    border-color: var(--success);
    color: #fff;
    box-shadow: 0 2px 8px rgba(18,183,106,.25);
}
.btn-success:hover {
    box-shadow: 0 8px 20px rgba(18,183,106,.35);
    transform: translateY(-2px);
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #d92d20);
    border-color: var(--danger);
    box-shadow: 0 2px 8px rgba(240,68,56,.25);
}
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(240,68,56,.35); }

.btn-warning {
    background: linear-gradient(135deg, var(--warning), #dc6803);
    border-color: var(--warning);
    color: #fff;
}

.btn-outline-primary { color: var(--primary); border-color: rgba(99,91,255,.4); }
.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99,91,255,.3);
}
.btn-outline-secondary { color: var(--muted); border-color: var(--border); }
.btn-outline-secondary:hover {
    background: #f3f5fb;
    color: var(--text);
    border-color: #ccd4e0;
    transform: translateY(-1px);
}
.btn-outline-info { color: var(--info); border-color: rgba(6,174,212,.4); }
.btn-outline-info:hover { background: var(--info); color: #fff; border-color: var(--info); }
.btn-outline-success { color: var(--success); border-color: rgba(18,183,106,.4); }
.btn-outline-success:hover { background: var(--success); color: #fff; }
.btn-outline-danger { color: var(--danger); border-color: rgba(240,68,56,.4); }
.btn-outline-danger:hover { background: var(--danger); color: #fff; }

.btn:active { transform: translateY(0); }

.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: .6rem .9rem;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    background: #fff;
    color: var(--text);
}
.form-control::placeholder { color: #a4acbd; }
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99,91,255,.12);
    background: #fff;
}
.form-control-sm, .form-select-sm { padding: .4rem .7rem; font-size: .82rem; border-radius: var(--radius-xs); }

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: .3em;
    border: 1.5px solid #cbd5e1;
    transition: all .18s ease;
}
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(99,91,255,.3);
}
.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99,91,255,.12);
}
.form-check-label { font-weight: 500; }

.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table td, .table th { vertical-align: middle; padding: .95rem 1rem; }
.modern-table thead th {
    background: #f8fafc;
    color: var(--muted);
    font-weight: 700;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
}
.modern-table tbody tr {
    border-bottom: 1px solid #f1f4fa;
    transition: background .15s ease;
}
.modern-table tbody tr:hover { background: #fafbff; }
.modern-table tbody tr:last-child { border-bottom: 0; }
.divider-row td { padding: 0 !important; background: #fafbfd; }
.divider-row + tr td { border-top: 2px solid #eef1f8; }

.badge {
    font-size: 11px;
    padding: .4em .8em;
    border-radius: var(--radius-xs);
    font-weight: 700;
    letter-spacing: .2px;
}
.rounded-pill { border-radius: 999px !important; }

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #eef0ff, #dbe1ff);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(99,91,255,.15);
}

.alert {
    border: 0;
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    border-inline-start: 4px solid transparent;
}
.alert-danger { background: #fef3f2; color: #b42318; border-inline-start-color: var(--danger); }
.alert-success { background: #ecfdf3; color: #027a48; border-inline-start-color: var(--success); }
.alert-warning { background: #fffaeb; color: #b54708; border-inline-start-color: var(--warning); }
.alert-info { background: #eff8ff; color: #175cd3; border-inline-start-color: var(--info); }

.table-search { max-width: 300px; border-radius: var(--radius-sm); }
.text-truncate-cell {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#copyFlash {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15,23,42,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 9999;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.progress-wrap {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}
.progress {
    height: 24px;
    border-radius: 12px;
    background: #eef1f8;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(16,24,40,.06);
}
.progress-bar {
    transition: width .45s cubic-bezier(.4,0,.2,1);
    font-weight: 700;
    font-size: 11px;
    background: linear-gradient(90deg, var(--success), #34d399);
}

.pending-card {
    border: 1px solid #fcd34d;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #fffdf6, #fffbf0);
    padding: 1rem 1.15rem;
    margin-bottom: .75rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
}
.pending-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pending-card .meta { font-size: 11px; color: var(--muted); }

.channel-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .22s ease;
    overflow: hidden;
    background: var(--surface);
}
.channel-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-pop);
    border-color: rgba(99,91,255,.25);
}
.channel-card .status-badge {
    font-size: 11px;
    padding: .4em .85em;
    border-radius: 999px;
    font-weight: 700;
}
.channel-card .status-has-pending { background: #fef3c7; color: #92400e; }
.channel-card .status-all-sent { background: #d1fae5; color: #065f46; }
.channel-card .status-has-failed { background: #fee2e2; color: #991b1b; }

.post-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
    margin-bottom: .75rem;
    background: var(--surface);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.post-item:hover {
    border-color: rgba(99,91,255,.25);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.post-item .post-status {
    font-size: 11px;
    padding: .35em .8em;
    border-radius: 999px;
    font-weight: 700;
}
.post-item .post-status.pending { background: #fef3c7; color: #92400e; }
.post-item .post-status.sent { background: #d1fae5; color: #065f46; }
.post-item .post-status.failed { background: #fee2e2; color: #991b1b; }

.bot-card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.small-muted { font-size: 11px; color: var(--muted); }

.paste-zone {
    border: 2px dashed #cbd5e1 !important;
    border-radius: var(--radius-sm);
    min-height: 76px;
    cursor: pointer;
    background: linear-gradient(180deg, #fafbff, #f5f8ff);
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-weight: 500;
}
.paste-zone:hover {
    border-color: var(--primary) !important;
    background: var(--primary-soft);
    transform: translateY(-1px);
}
.paste-zone.bg-light {
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
    transform: scale(1.01);
}

.thumb-200 { max-height: 200px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.thumb-60 { max-height: 60px; max-width: 60px; object-fit: cover; border-radius: var(--radius-xs); }
.img-thumbnail { border-radius: var(--radius-sm); border-color: var(--border); padding: .25rem; }

.tag-badge {
    display: inline-block;
    font-size: 11px;
    padding: .35em .85em;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .15px;
}
.tag-badge.tag-vip { background: #dbeafe; color: #1e40af; }
.tag-badge.tag-problem { background: #fef3c7; color: #92400e; }
.tag-badge.tag-blocked { background: #fee2e2; color: #991b1b; }
.tag-badge.tag-none { background: transparent; color: transparent; }

.navbar-search {
    width: 200px;
    margin-inline-start: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    border-radius: var(--radius-xs);
    padding: .4rem .8rem;
    transition: all .18s ease;
}
.navbar-search::placeholder { color: rgba(255,255,255,.5); }
.navbar-search:focus {
    background: rgba(255,255,255,.15);
    border-color: rgba(99,91,255,.6);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(99,91,255,.25);
    outline: none;
}

.modal-content {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 1.1rem 1.4rem;
    background: linear-gradient(180deg, #fafbff, #fff);
}
.modal-footer { border-top: 1px solid var(--border); padding: 1rem 1.4rem; background: #fafbff; }
.modal-backdrop.show { opacity: .55; backdrop-filter: blur(2px); }

.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: .4rem;
    min-width: 180px;
}
.dropdown-item {
    border-radius: var(--radius-xs);
    padding: .55rem .8rem;
    transition: background .12s ease;
    font-weight: 500;
}
.dropdown-item:hover { background: #f3f5fb; }

.list-group-item {
    border-color: var(--border);
    padding: 1rem 1.15rem;
    transition: background .12s ease;
}
.list-group-item:hover { background: #fafbff; }

.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child {
    border-start-start-radius: var(--radius-xs);
    border-end-start-radius: var(--radius-xs);
}
.btn-group .btn:last-child {
    border-start-end-radius: var(--radius-xs);
    border-end-end-radius: var(--radius-xs);
}

.rounded-3 { border-radius: var(--radius) !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }

.fade-in {
    animation: fadeIn .35s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .table-search { max-width: 100%; }
    .text-truncate-cell { max-width: 160px; }
    .navbar-search { width: 130px; }
    .page-title { font-size: 1.2rem; }
    .card-body { padding: 1rem; }
    .avatar-circle { width: 34px; height: 34px; font-size: 12px; }
}
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 4px;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fafbff;
}
.emoji-btn {
    border: 0;
    background: #fff;
    font-size: 22px;
    line-height: 1;
    padding: 6px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}
.emoji-btn:hover {
    background: var(--primary-soft);
    transform: scale(1.15);
}
.file-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.file-preview-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 96px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.file-preview-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.file-preview-card img,
.file-preview-card video {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    background: #eef2f7;
}
.file-preview-card i {
    color: var(--primary);
    padding: 22px 0;
}
.file-preview-name {
    font-size: 10px;
    color: var(--muted);
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pending-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pending-preview-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #eef2f7;
}
.pending-preview-file {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}
.pending-preview-item {
    position: relative;
    display: inline-block;
}
.pending-preview-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: 2px solid #fff;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    transition: transform .15s ease, background .15s ease;
    font-weight: 700;
}
.pending-preview-remove:hover {
    transform: scale(1.15);
    background: #dc2626;
}
.sig-thumb {
    max-height: 120px;
    object-fit: contain;
}
.small-muted-xs {
    font-size: 11px;
    color: var(--muted);
}
.auth-wrapper {
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--bg-grad);
    background-attachment: fixed;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2.25rem 2rem 1.75rem;
    animation: fadeIn .35s ease;
}

.auth-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-logo {
    width: 68px;
    height: 68px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--info) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 10px 24px rgba(99, 91, 255, .35);
}

.auth-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 .35rem;
    letter-spacing: -.2px;
}

.auth-sub {
    font-size: .85rem;
    color: var(--muted);
    margin: 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.auth-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .1rem;
}

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-icon {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--muted);
    font-size: 14px;
    pointer-events: none;
    transition: color .2s ease;
}

.auth-input {
    width: 100%;
    padding: .7rem 2.6rem .7rem 2.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: var(--text);
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
    font-family: inherit;
}

.auth-input::placeholder {
    color: #a4acbd;
}

.auth-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 91, 255, .12);
}

.auth-input:focus ~ .auth-icon,
.auth-input-wrap:focus-within .auth-icon {
    color: var(--primary);
}

.auth-toggle-pass {
    position: absolute;
    inset-inline-end: 8px;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
    transition: color .15s ease;
}

.auth-toggle-pass:hover {
    color: var(--primary);
}

.auth-error {
    font-size: .78rem;
    color: var(--danger);
    margin: 0;
}

.auth-alert {
    background: #fef3f2;
    color: #b42318;
    border-inline-start: 4px solid var(--danger);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    font-size: .82rem;
    list-style: none;
    margin: 0;
}

.auth-alert ul {
    margin: 0;
    padding-inline-start: 1.1rem;
}

.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -.25rem;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

.auth-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
    cursor: pointer;
}

.auth-submit {
    width: 100%;
    padding: .75rem 1rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 4px 12px rgba(99, 91, 255, .3);
    margin-top: .5rem;
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(99, 91, 255, .4);
}

.auth-submit:active {
    transform: translateY(0);
}

.auth-footer {
    text-align: center;
    font-size: .83rem;
    color: var(--muted);
    margin-top: .5rem;
}

.auth-footer a {
    color: var(--primary);
    font-weight: 700;
    margin-inline-start: .25rem;
}

.auth-note {
    font-size: .78rem;
    color: var(--muted);
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem;
    margin-top: .5rem;
    line-height: 1.6;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 1.75rem 1.35rem 1.35rem;
        border-radius: var(--radius-sm);
    }
    .auth-logo {
        width: 58px;
        height: 58px;
        font-size: 24px;
    }
    .auth-title {
        font-size: 1.15rem;
    }
}
.auth-wrapper {
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--bg-grad);
    background-attachment: fixed;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2.25rem 2rem 1.75rem;
}

.auth-header { text-align: center; margin-bottom: 1.75rem; }

.auth-logo {
    width: 68px;
    height: 68px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--info) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 10px 24px rgba(99, 91, 255, .35);
}

.auth-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 .35rem;
}

.auth-sub { font-size: .85rem; color: var(--muted); margin: 0; }

.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-field { display: flex; flex-direction: column; gap: .35rem; }

.auth-label { font-size: .82rem; font-weight: 600; color: var(--text); }

.auth-input-wrap { position: relative; display: flex; align-items: center; }

.auth-icon {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--muted);
    font-size: 14px;
    pointer-events: none;
}

.auth-input {
    width: 100%;
    padding: .7rem 2.6rem .7rem 2.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: var(--text);
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
    font-family: inherit;
}

.auth-input::placeholder { color: #a4acbd; }

.auth-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 91, 255, .12);
}

.auth-toggle-pass {
    position: absolute;
    inset-inline-end: 8px;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
}

.auth-toggle-pass:hover { color: var(--primary); }

.auth-error { font-size: .78rem; color: var(--danger); margin: 0; }

.auth-alert {
    background: #fef3f2;
    color: #b42318;
    border-inline-start: 4px solid var(--danger);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    font-size: .82rem;
    list-style: none;
    margin: 0;
}

.auth-alert ul { margin: 0; padding-inline-start: 1.1rem; }

.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--muted);
    cursor: pointer;
}

.auth-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
    cursor: pointer;
}

.auth-submit {
    width: 100%;
    padding: .75rem 1rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 4px 12px rgba(99, 91, 255, .3);
}

.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(99, 91, 255, .4); }
.auth-submit:active { transform: translateY(0); }

.auth-footer { text-align: center; font-size: .83rem; color: var(--muted); }
.auth-footer a { color: var(--primary); font-weight: 700; margin-inline-start: .25rem; }

.auth-note {
    font-size: .78rem;
    color: var(--muted);
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem;
    line-height: 1.6;
}

.live-event { background: #fff; transition: background .15s ease; }
.live-event:hover { background: #fafbff; }

@media (max-width: 480px) {
    .auth-card { padding: 1.75rem 1.35rem 1.35rem; }
    .auth-logo { width: 58px; height: 58px; font-size: 24px; }
    .auth-title { font-size: 1.15rem; }
}
.live-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #12b76a;
    box-shadow: 0 0 0 0 rgba(18, 183, 106, .7);
    animation: livePulse 1.6s infinite;
    vertical-align: middle;
}

.live-dot.paused {
    background: #6b7385;
    box-shadow: none;
    animation: none;
}

@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .7); }
    70% { box-shadow: 0 0 0 10px rgba(18, 183, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); }
}

.live-event {
    background: #fff;
    transition: background .15s ease, transform .15s ease;
}

.live-event:hover {
    background: #fafbff;
    transform: translateX(-2px);
}

.small-muted-xs {
    font-size: 11px;
    color: var(--muted);
}
.live-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #12b76a;
    box-shadow: 0 0 0 0 rgba(18, 183, 106, .7);
    animation: livePulse 1.6s infinite;
    vertical-align: middle;
}
.live-dot.paused {
    background: #6b7385;
    box-shadow: none;
    animation: none;
}
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .7); }
    70% { box-shadow: 0 0 0 10px rgba(18, 183, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); }
}
.live-event {
    background: #fff;
    transition: background .15s ease, transform .15s ease;
}
.live-event:hover {
    background: #fafbff;
    transform: translateX(-2px);
}
.small-muted-xs {
    font-size: 11px;
    color: var(--muted);
}
.app-shell{display:flex;min-height:100vh;background:var(--bg-grad);background-attachment:fixed}
.app-sidebar{width:250px;background:linear-gradient(180deg,#0f172a,#1e293b);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:1050;transition:width .25s ease,transform .25s ease;overflow-y:auto;box-shadow:-2px 0 24px rgba(0,0,0,.15)}
.app-sidebar::-webkit-scrollbar{width:6px}
.app-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.sidebar-brand{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand a{display:flex;align-items:center;gap:.55rem;font-size:1.1rem;font-weight:800;color:#fff;text-decoration:none}
.sidebar-brand a i{color:#635bff;font-size:1.3rem}
.sidebar-collapse-btn{background:transparent;border:0;color:rgba(255,255,255,.5);font-size:1rem;cursor:pointer;padding:.25rem .4rem;border-radius:6px;transition:all .15s}
.sidebar-collapse-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-nav{flex:1;padding:.75rem .5rem;display:flex;flex-direction:column;gap:.15rem}
.sidebar-link,.sidebar-toggle{display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem;color:rgba(255,255,255,.72);text-decoration:none;border-radius:8px;font-size:.88rem;font-weight:500;transition:all .15s ease;border:0;background:transparent;width:100%;cursor:pointer;text-align:right;font-family:inherit}
.sidebar-link:hover,.sidebar-toggle:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-link.active{background:linear-gradient(90deg,rgba(99,91,255,.3),rgba(99,91,255,.08));color:#fff;font-weight:700;border-right:3px solid #635bff}
.sidebar-toggle span{flex:1}
.sidebar-toggle i:first-child{width:20px;text-align:center}
.sidebar-arrow{font-size:.7rem;transition:transform .25s ease;opacity:.55}
.sidebar-accordion.open > .sidebar-toggle .sidebar-arrow{transform:rotate(180deg)}
.sidebar-sub{max-height:0;overflow:hidden;transition:max-height .3s ease;padding-right:1.5rem}
.sidebar-accordion.open > .sidebar-sub{max-height:1200px}
.sidebar-sub a{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;color:rgba(255,255,255,.6);text-decoration:none;border-radius:6px;font-size:.82rem;transition:all .12s ease;margin-top:.15rem}
.sidebar-sub a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar-sub a.active{background:rgba(99,91,255,.22);color:#fff;font-weight:700}
.sidebar-sub a i{font-size:.75rem;width:16px;text-align:center;opacity:.75}
.sidebar-footer{padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.08);text-align:center}
.app-content{flex:1;margin-right:250px;display:flex;flex-direction:column;min-height:100vh;transition:margin-right .25s ease}
.app-topbar{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);padding:.6rem 1.25rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:1000}
.topbar-toggle{background:transparent;border:0;font-size:1.2rem;color:var(--text);cursor:pointer;padding:.4rem;border-radius:6px}
.topbar-toggle:hover{background:#f3f5fb}
.topbar-search{position:relative;flex:1;max-width:400px}
.topbar-search i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.85rem}
.topbar-search input{width:100%;padding:.5rem .75rem .5rem 2.4rem;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:.85rem;font-family:inherit}
.topbar-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,91,255,.12)}
.topbar-actions{margin-right:auto;display:flex;gap:.5rem;align-items:center}
.topbar-icon{position:relative;width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--text);background:#f8fafc;border:1px solid var(--border);transition:all .15s;text-decoration:none}
.topbar-icon:hover{background:var(--primary-soft);color:var(--primary);border-color:rgba(99,91,255,.3)}
.topbar-badge{position:absolute;top:-4px;left:-4px;background:#f04438;color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:10px;border:2px solid #fff}
.app-main{flex:1;padding:1.25rem}
.sidebar-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:1040;backdrop-filter:blur(2px)}
.sidebar-overlay.show{opacity:1;pointer-events:auto}
.app-shell.sidebar-collapsed .app-sidebar{width:70px}
.app-shell.sidebar-collapsed .app-content{margin-right:70px}
.app-shell.sidebar-collapsed .sidebar-brand a span{display:none}
.app-shell.sidebar-collapsed .sidebar-link span,.app-shell.sidebar-collapsed .sidebar-toggle span,.app-shell.sidebar-collapsed .sidebar-toggle .sidebar-arrow{display:none}
.app-shell.sidebar-collapsed .sidebar-link,.app-shell.sidebar-collapsed .sidebar-toggle{justify-content:center}
.app-shell.sidebar-collapsed .sidebar-sub{display:none}
@media (max-width:991.98px){
.app-sidebar{transform:translateX(100%);width:250px}
.app-sidebar.mobile-open{transform:translateX(0)}
.app-content{margin-right:0 !important}
.app-shell.sidebar-collapsed .app-sidebar{width:250px}
.app-shell.sidebar-collapsed .sidebar-brand a span{display:inline}
.app-shell.sidebar-collapsed .sidebar-link span,.app-shell.sidebar-collapsed .sidebar-toggle span{display:inline}
.app-shell.sidebar-collapsed .sidebar-sub{display:block}
}