html:root:root .reports-launch-button{border-color:rgba(244, 215, 131, .46);box-shadow:0 28px 74px rgba(15, 109, 102, .18);} html:root:root .reports-launch-icon{color:#0f6d66;background:linear-gradient(135deg, #fff, #c9f0e8);} html:root:root .reports-hero{color:#fff;background:linear-gradient(125deg, #5b061f, #8f294b 52%, #0f6d66);box-shadow:0 28px 72px rgba(109, 8, 38, .2);} html:root:root .reports-hero::after{background:linear-gradient(90deg, #f4d783, #72d7c6, #d8a94d);} html:root:root .reports-hero-icon{color:#6d0826;background:linear-gradient(135deg, #fff, #f4d783);box-shadow:0 16px 38px rgba(0, 0, 0, .2);} html:root:root .reports-hero-icon svg,html:root:root .reports-back-link svg,html:root:root .reports-select-shell svg,html:root:root .reports-summary-icon svg,html:root:root .reports-tabs svg,html:root:root .student-report-pdf svg,html:root:root .report-contact-actions svg{fill:none;stroke:currentColor;} html:root:root .reports-hero h2{color:#fff;} html:root:root .reports-hero p{color:rgba(255, 255, 255, .8);} html:root:root .reports-hero-badge{color:#fff5c8;background:rgba(244, 215, 131, .15);} html:root:root .reports-back-link{color:#fff;background:rgba(255, 255, 255, .1);} html:root:root .reports-toolbar{background:var(--surface);box-shadow:0 14px 34px rgba(109, 8, 38, .07);} html:root:root .reports-filter-form > label{color:var(--navy);} html:root:root .reports-select-shell svg{color:var(--brand);} html:root:root .reports-qr-export-button{border-color:color-mix(in srgb, #0f6d66 36%, var(--line));color:#0f6d66;background:color-mix(in srgb, #0f6d66 9%, var(--surface-strong));} html:root:root .reports-qr-export-button:hover{color:#fff;background:linear-gradient(135deg, #0f6d66, #6d0826);} html:root:root .reports-summary-card{background:var(--surface);box-shadow:0 14px 32px rgba(109, 8, 38, .07);} html:root:root .reports-summary-card strong{color:var(--navy);} html:root:root .reports-summary-card > span:last-child{color:var(--muted);} html:root:root .reports-summary-icon{color:var(--brand);background:var(--soft-bg);} html:root:root .reports-summary-present .reports-summary-icon,html:root:root .reports-summary-pages .reports-summary-icon{color:#0f6d66;background:rgba(15, 109, 102, .11);} html:root:root .reports-summary-absent .reports-summary-icon{color:var(--danger);background:rgba(200, 64, 93, .11);} html:root:root .reports-summary-late .reports-summary-icon{color:var(--warning);background:rgba(182, 123, 39, .12);} html:root:root .reports-tabs{background:var(--soft-bg);} html:root:root .reports-tabs button{color:var(--navy);background:var(--surface);} html:root:root .reports-tabs button.is-active{color:#fff;border-color:rgba(244, 215, 131, .35);background:linear-gradient(120deg, #6d0826, #8f294b 60%, #0f6d66);box-shadow:0 14px 30px rgba(109, 8, 38, .18);} html:root:root .reports-panel-heading h2{color:var(--navy);} html:root:root .reports-result-count{color:#0f6d66;background:rgba(15, 109, 102, .1);} html:root:root .student-report-card{background:var(--surface);box-shadow:0 18px 42px rgba(109, 8, 38, .08);} html:root:root .student-report-card::before{background:linear-gradient(90deg, #d8a94d, #0f6d66, #8f294b);} html:root:root .student-report-avatar{color:#fff;background:linear-gradient(135deg, #6d0826, #0f6d66);} html:root:root .student-report-identity strong{color:var(--navy);} html:root:root .student-report-identity small{color:var(--muted);} html:root:root .student-report-pdf{color:var(--danger);background:rgba(200, 64, 93, .09);} html:root:root .student-report-metrics span{background:var(--soft-bg);} html:root:root .student-report-metrics b{color:var(--navy);} html:root:root .student-report-metrics small{color:var(--muted);} html:root:root .student-report-facts dt{color:var(--muted);} html:root:root .student-report-facts dd{color:var(--ink);} html:root:root .report-contact-row{background:var(--surface-strong);} html:root:root .report-contact-copy small{color:var(--muted);} html:root:root .report-contact-copy b{color:var(--ink);} html:root:root .report-contact-actions a{color:#0f6d66;background:rgba(15, 109, 102, .1);} html:root:root .report-contact-actions a:last-child{color:#168a69;} html:root:root .student-report-account{color:#fff;background:linear-gradient(120deg, #5b061f, #8f294b 70%, #0f6d66);} html:root:root .student-report-account small{color:rgba(255, 255, 255, .7);} html:root:root .student-report-account b{color:#fff;} html:root:root .student-report-status small{color:var(--muted);} html:root:root .student-report-status p{color:var(--ink);} html:root:root .halaqa-report-card{background:var(--surface);box-shadow:0 16px 36px rgba(109, 8, 38, .07);} html:root:root .halaqa-report-card header strong{color:var(--navy);} html:root:root .halaqa-report-card header small{color:var(--muted);} html:root:root .halaqa-report-card header > b{color:#0f6d66;background:rgba(15, 109, 102, .1);} html:root:root .halaqa-report-card > div span{background:var(--soft-bg);} html:root:root .halaqa-report-card > div b{color:var(--navy);} html:root:root .halaqa-report-card > div small{color:var(--muted);} html:root:root .report-data-grid article{background:var(--surface);} html:root:root .report-data-grid article > div strong{color:var(--navy);} html:root:root .report-data-grid article > div small{color:var(--muted);} html:root:root .report-data-grid article > span{background:var(--soft-bg);} html:root:root .report-data-grid article > span b{color:var(--navy);} html:root:root .report-data-grid article > span small{color:var(--muted);} html:root:root .report-data-grid article > span.success b{color:var(--success);} html:root:root .report-data-grid article > span.warning b{color:var(--warning);} html:root:root .report-data-grid article > span.danger b{color:var(--danger);} html:root:root .reports-empty{color:var(--muted);background:var(--soft-bg);} @media (prefers-reduced-motion: no-preference){ html:root:root .reports-launch-button:hover,html:root:root .reports-summary-card:hover,html:root:root .student-report-card:hover,html:root:root .halaqa-report-card:hover{box-shadow:0 24px 54px rgba(109, 8, 38, .14);} } html:root:root .site-settings-launch-button{border-color:rgba(244, 215, 131, .52);background:linear-gradient(125deg, #5b061f, #8f294b 48%, #0f6d66);box-shadow:0 30px 78px rgba(109, 8, 38, .22);} html:root:root .site-settings-launch-icon{color:#6d0826;background:linear-gradient(135deg, #fffdf7, #f4d783);} html:root:root .site-admin-details[open]::before{background:rgba(24, 6, 13, .42);} html:root:root .site-admin-details-trigger,html:root:root .account-force-logout{color:#fff;background:linear-gradient(135deg, #6d0826, #9b244b);box-shadow:0 10px 24px rgba(109, 8, 38, .2);} html:root:root .site-admin-details-trigger:hover,html:root:root .site-admin-details[open] .site-admin-details-trigger,html:root:root .account-force-logout:hover{border-color:#f4d783;box-shadow:0 14px 30px rgba(109, 8, 38, .3);} html:root:root .site-admin-details-trigger svg,html:root:root .account-force-logout svg,html:root:root .site-admin-logout svg{fill:none;stroke:currentColor;} html:root:root .site-admin-details-card{color:var(--ink);background:var(--panel);box-shadow:0 24px 60px rgba(35, 8, 18, .26);} html:root:root .site-admin-details-close{color:var(--muted);background:color-mix(in srgb, var(--panel) 92%, var(--gold));} html:root:root .site-admin-details-close:hover{color:#fff;border-color:#8f294b;background:#8f294b;} html:root:root .site-admin-details-close svg{fill:none;stroke:currentColor;} html:root:root .site-admin-details-head small,html:root:root .site-admin-credentials small{color:var(--muted);} html:root:root .site-admin-details-head strong,html:root:root .site-admin-credentials b{color:var(--navy);} html:root:root .site-admin-details-avatar{color:#6d0826;background:linear-gradient(135deg, #fffdf7, #f4d783);} html:root:root .site-admin-credentials > span{background:color-mix(in srgb, var(--panel) 88%, var(--gold));} html:root:root .account-force-logout{border-color:rgba(184, 45, 73, .35);color:#b82d49;background:color-mix(in srgb, var(--panel) 88%, #b82d49);box-shadow:none;} html:root:root .site-settings-panel{border-color:color-mix(in srgb, var(--line) 70%, var(--gold));} html:root:root .site-settings-panel::before{background:linear-gradient(90deg, #6d0826, #d8a94d, #0f6d66);} html:root:root .site-settings-panel-icon{color:#fff;background:linear-gradient(135deg, #6d0826, #0f6d66);box-shadow:0 14px 30px rgba(109, 8, 38, .18);} html:root:root .site-settings-panel-icon svg,html:root:root .student-phone-actions svg,html:root:root .student-report-download svg,html:root:root .teacher-report-download svg{fill:none;stroke:currentColor;} html:root:root .student-phone-actions a{color:var(--brand);background:color-mix(in srgb, var(--brand) 7%, var(--surface-strong));} html:root:root .student-phone-actions a.is-whatsapp{color:#127760;border-color:color-mix(in srgb, #127760 28%, var(--line));background:color-mix(in srgb, #127760 8%, var(--surface-strong));} html:root:root .student-phone-actions a:hover{color:#fff;background:var(--brand);} html:root:root .student-phone-actions a.is-whatsapp:hover{background:#127760;} html:root:root .student-login-qr-card{background:radial-gradient(circle at 10% 0, color-mix(in srgb, var(--gold) 22%, transparent), transparent 10rem), linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 88%, var(--gold)), var(--surface));box-shadow:0 18px 46px rgba(109, 8, 38, .08);} html:root:root .student-login-qr-card::before{background:linear-gradient(90deg, var(--gold), #0f6d66, var(--navy));} html:root:root .student-login-qr-copy h3{color:var(--navy);} html:root:root .student-login-qr-copy p{color:var(--muted);} html:root:root .student-login-qr-frame{background:#fffdf7;box-shadow:inset 0 0 0 4px rgba(244, 215, 131, .16), 0 14px 30px rgba(42, 19, 27, .1);} html:root:root .student-login-qr-download{border-color:color-mix(in srgb, #0f6d66 36%, var(--line));color:#0f6d66;background:color-mix(in srgb, #0f6d66 9%, var(--surface-strong));} html:root:root .student-login-qr-download:hover{color:#fff;background:linear-gradient(135deg, #0f6d66, #6d0826);} html:root:root .student-login-qr-reset{border-color:color-mix(in srgb, var(--gold) 42%, var(--line));color:var(--navy);background:color-mix(in srgb, var(--gold) 10%, var(--surface-strong));} html:root:root .student-login-qr-download svg,html:root:root .student-login-qr-reset svg{fill:none;stroke:currentColor;} html:root:root .avatar-required-notice{background:linear-gradient(135deg, color-mix(in srgb, var(--warning) 12%, var(--surface)), var(--surface));box-shadow:0 16px 36px rgba(199, 123, 22, .08);} html:root:root .avatar-required-icon{color:var(--warning);background:color-mix(in srgb, var(--warning) 14%, transparent);} html:root:root .avatar-required-icon svg,html:root:root .student-profile-editor summary svg{fill:none;stroke:currentColor;} html:root:root .avatar-required-copy h2{color:var(--navy);} html:root:root .avatar-required-copy p,html:root:root .avatar-required-file{color:var(--muted);} html:root:root .avatar-cropper-card{background:var(--panel-bg, #fff);} html:root:root .avatar-cropper-header p{color:var(--muted-text, #64748b);} html:root:root .avatar-cropper-header .icon-btn{background:transparent;color:var(--muted-text, #64748b);} html:root:root .avatar-cropper-stage{background:linear-gradient(45deg, rgba(255, 255, 255, .08) 25%, transparent 25%) 0 0 / 22px 22px, linear-gradient(-45deg, rgba(255, 255, 255, .08) 25%, transparent 25%) 0 0 / 22px 22px, #111827;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .16);} html:root:root .avatar-cropper-zoom{color:var(--muted-text, #64748b);} html:root:root .avatar-cropper-zoom input{accent-color:var(--accent, #0f766e);} html:root:root .avatar-cropper-status{color:var(--success-text, #15803d);} html:root:root .course-current-card{color:#fff;background:linear-gradient(135deg, rgba(73, 36, 62, .96), rgba(112, 66, 100, .86) 58%, rgba(187, 132, 147, .78)), var(--primary-gradient);box-shadow:0 28px 76px rgba(73, 36, 62, .24);} html:root:root .course-current-card h2{color:#fff;} html:root:root .course-current-card p,html:root:root .course-progress-shell small,html:root:root .course-progress-shell .meta{color:rgba(255, 255, 255, .78);} html:root:root .course-icon-orbit{color:#49243E;background:linear-gradient(135deg, #fff, var(--cyan-2));box-shadow:0 18px 44px rgba(0, 0, 0, .22);} html:root:root .course-icon-orbit svg,html:root:root .course-student-option svg{fill:none;stroke:currentColor;} html:root:root .course-progress-ring{background:radial-gradient(circle, rgba(73, 36, 62, .96) 56%, transparent 57%), conic-gradient(var(--cyan) var(--progress, 0%), rgba(255, 255, 255, .2) 0);box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .16), 0 18px 42px rgba(0, 0, 0, .18);} html:root:root .course-progress-ring strong{color:#fff;} html:root:root .course-progress-shell b{color:#fff;} html:root:root .toggle-line{background:var(--soft-bg);color:var(--navy);} html:root:root .course-student-picker{background:var(--soft-bg);} html:root:root .course-student-option{background:var(--surface);} html:root:root .course-student-avatar{color:#fff;background:var(--brand-gradient);} html:root:root .course-student-label small{color:var(--muted);} html:root:root .course-select-all-line{background:var(--soft-bg);} html:root:root .course-archive-card{background:var(--soft-bg);} html:root:root .course-archive-card strong{color:var(--navy);} html:root:root .course-archive-card > a small,html:root:root .course-archive-card > a span:not(.badge){color:var(--muted);} html:root:root .table-course-summary th a{color:var(--navy);} html:root:root .table-course-summary{background:transparent;} html:root:root .course-archive-metrics b{color:var(--navy);background:rgba(219, 175, 160, .12);} @media (prefers-reduced-motion: no-preference){ html:root:root .course-student-option:hover,html:root:root .course-archive-card:hover{box-shadow:0 16px 34px rgba(101, 18, 38, .1);} } @media (prefers-reduced-motion: no-preference){ html:root:root .finance-balance-card:hover,html:root:root .finance-action-panel:hover{border-color:color-mix(in srgb, currentColor 32%, var(--line));box-shadow:0 30px 68px rgba(101, 18, 38, .16);} } html:root:root body{color:var(--ink);background:var(--body-bg);} html:root:root a{color:inherit;} html:root:root .site-header{background:var(--header-bg);box-shadow:var(--shadow);} html:root:root .action-icon{color:var(--navy);background:color-mix(in srgb, var(--soft-bg) 76%, transparent);} html:root:root .action-icon:hover{border-color:color-mix(in srgb, var(--blue) 46%, var(--line));background:color-mix(in srgb, var(--soft-bg) 88%, var(--blue));} html:root:root .action-icon svg{fill:none;stroke:currentColor;} html:root:root .action-icon-delete{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 44%, var(--line));background:color-mix(in srgb, var(--danger) 11%, transparent);} html:root:root .action-icon-delete:hover{color:#fff;border-color:var(--danger);background:var(--danger);} html:root:root .action-icon-save{color:var(--success);border-color:color-mix(in srgb, var(--success) 38%, var(--line));background:color-mix(in srgb, var(--success) 10%, transparent);} html:root:root .action-icon-save:hover{color:#fff;border-color:var(--success);background:var(--success);} html:root:root .action-icon-approve{color:var(--success);border-color:color-mix(in srgb, var(--success) 44%, var(--line));background:color-mix(in srgb, var(--success) 12%, transparent);} html:root:root .action-icon-approve:hover:not(:disabled){color:#fff;border-color:var(--success);background:var(--success);} html:root:root .action-icon-undo{color:var(--warning);border-color:color-mix(in srgb, var(--warning) 44%, var(--line));background:color-mix(in srgb, var(--warning) 11%, transparent);} html:root:root .action-icon-undo:hover{color:#fff;border-color:var(--warning);background:var(--warning);} html:root:root .action-icon-restore{color:var(--success);border-color:color-mix(in srgb, var(--success) 42%, var(--line));background:color-mix(in srgb, var(--success) 12%, transparent);} html:root:root .action-icon-restore:hover{color:#fff;border-color:var(--success);background:var(--success);} html:root:root .action-icon-muted{color:var(--muted);background:color-mix(in srgb, var(--soft-bg) 62%, transparent);} html:root:root .brand-mark{color:#fff;background:var(--brand-gradient);box-shadow:0 0 0 6px rgba(187, 132, 147, .14), 0 16px 32px rgba(73, 36, 62, .22);} html:root:root .main-nav svg,html:root:root .dashboard-nav svg,html:root:root .btn svg{fill:none;stroke:currentColor;} html:root:root .brand small,html:root:root .mobile-brand small{color:var(--muted);} html:root:root .main-nav a,html:root:root .dashboard-nav a,html:root:root .filter-tabs a{color:var(--navy-2);} html:root:root .main-nav a:hover,html:root:root .dashboard-nav a:hover,html:root:root .filter-tabs a:hover,html:root:root .filter-tabs .is-active{background:var(--soft-bg);color:var(--blue);} html:root:root .main-nav a.is-active,html:root:root .filter-tabs .is-active{color:var(--on-primary);background:var(--primary-gradient);box-shadow:0 12px 26px rgba(112, 66, 100, .22);} html:root:root .dashboard-nav a.is-active{color:#fff7f4;background:rgba(219, 175, 160, .24);box-shadow:inset 0 0 0 1px rgba(219, 175, 160, .22), 0 10px 24px rgba(0, 0, 0, .16);} html:root:root .dashboard-nav{background:linear-gradient(135deg, rgba(38, 19, 35, .96), rgba(31, 17, 29, .96));color:#fff7f4;box-shadow:var(--shadow);} html:root:root .dashboard-nav a{color:#fff7f4;} html:root:root .nav-notification-count{color:#fff;background:var(--danger);box-shadow:0 10px 24px rgba(217, 71, 99, .28);} html:root:root .dashboard-nav a:hover{background:rgba(219, 175, 160, .18);color:#fff;} html:root:root .user-chip{color:var(--navy);background:var(--soft-bg);} html:root:root .user-chip-avatar{color:#fff;background:var(--brand-gradient);} @media (prefers-reduced-motion: no-preference){ html:root:root .hero-feature-card:hover{box-shadow:0 22px 48px rgba(73, 36, 62, .16);} html:root:root .table-wrap tbody tr:hover{background:rgba(219, 175, 160, .07);} } html:root:root .btn-primary{color:var(--on-primary);background:var(--primary-gradient);box-shadow:0 16px 34px rgba(112, 66, 100, .25);} html:root:root .btn-cyan{color:var(--navy);background:linear-gradient(135deg, var(--cyan), var(--cyan-2));} html:root:root[data-theme="dark"] .btn-cyan{color:#49243E;} html:root:root .btn-ghost{color:var(--navy);background:var(--soft-bg);} html:root:root .theme-toggle{color:var(--navy);background:var(--soft-bg);} html:root:root .theme-icon{fill:none;stroke:currentColor;} html:root:root .logout-button svg{color:var(--danger);} html:root:root .btn-danger{color:#fff;background:var(--danger);} html:root:root .eyebrow{background:rgba(219, 175, 160, .18);color:var(--blue);} html:root:root .hero h1,html:root:root .page-title h1{color:var(--navy);} html:root:root .hero p,html:root:root .page-title p{color:var(--muted);} html:root:root .hero-feature-card{background:linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(219, 175, 160, .12));box-shadow:0 18px 40px rgba(101, 18, 38, .1);} html:root:root[data-theme="dark"] .hero-feature-card{background:linear-gradient(145deg, rgba(31, 17, 29, .82), rgba(187, 132, 147, .09));} html:root:root .hero-feature-card::after{background:rgba(187, 132, 147, .12);} html:root:root .hero-feature-icon{color:var(--on-primary);background:var(--primary-gradient);box-shadow:0 14px 28px rgba(112, 66, 100, .2);} html:root:root .hero-feature-icon svg{fill:none;stroke:currentColor;} html:root:root .hero-feature-card strong{color:var(--navy);} html:root:root .hero-feature-card small{color:var(--muted);} html:root:root .about-hero::before{background:radial-gradient(circle, rgba(219, 175, 160, .32), transparent 68%);} html:root:root .about-hero-copy h1{color:var(--navy);} html:root:root .about-hero-copy p,html:root:root .about-story p{color:var(--muted);} html:root:root .about-visual{background:radial-gradient(circle at 28% 22%, rgba(219, 175, 160, .34), transparent 18rem), var(--hero-gradient);box-shadow:0 34px 90px rgba(73, 36, 62, .24);} html:root:root .about-visual-mark{background:rgba(255, 247, 244, .1);box-shadow:inset 0 1px 0 rgba(255, 255, 255, .18), 0 28px 80px rgba(0, 0, 0, .24);} html:root:root .about-visual-card{color:#fff7f4;background:rgba(38, 19, 35, .74);box-shadow:0 18px 48px rgba(0, 0, 0, .24);} html:root:root .about-visual-card span{color:rgba(255, 247, 244, .72);} html:root:root .about-stat-card{background:var(--card-bg);box-shadow:var(--shadow);} html:root:root .about-stat-card::after{background:rgba(187, 132, 147, .14);} html:root:root .about-stat-card strong{color:var(--navy);} html:root:root .about-stat-card span{color:var(--muted);} html:root:root .about-story h2{color:var(--navy);} html:root:root .about-story-grid article,html:root:root .about-feature-band article{background:var(--card-bg);box-shadow:var(--shadow);} html:root:root .about-story-grid article span{color:var(--on-primary);background:var(--primary-gradient);} html:root:root .about-story-grid article strong{color:var(--navy);} html:root:root .about-feature-band svg{color:var(--blue);fill:none;stroke:currentColor;} html:root:root .about-feature-band strong{color:var(--navy);} html:root:root .about-feature-band span{color:var(--muted);} html:root:root .hero-visual{background:var(--hero-gradient);box-shadow:0 34px 80px rgba(73, 36, 62, .2);} html:root:root .slide-placeholder,html:root:root .media-placeholder,html:root:root .cover-placeholder,html:root:root .avatar-fallback{color:#fff;background:var(--placeholder-gradient);} html:root:root .hero-stat{color:#fff;background:rgba(255, 255, 255, .14);} html:root:root .section-head h2,html:root:root .panel h2,html:root:root .panel h3{color:var(--navy);} html:root:root .section-head p{color:var(--muted);} html:root:root .lesson-series-filter{background:var(--surface);} html:root:root .lesson-series-filter .filter-control label{color:var(--navy);} html:root:root .panel,html:root:root .album-card,html:root:root .student-card,html:root:root .stat-card,html:root:root .lesson-preview{background:var(--surface);box-shadow:var(--shadow);} html:root:root .album-cover,html:root:root .media-tile{background:var(--soft-bg);} html:root:root .media-open{background:transparent;color:inherit;} html:root:root .video-cover{color:#fff;background:var(--placeholder-gradient);} html:root:root .play-mark{color:#fff;background:rgba(38, 19, 35, .78);box-shadow:0 0 0 8px rgba(187, 132, 147, .16), 0 18px 40px rgba(73, 36, 62, .24);} html:root:root .gallery-locked-icon{color:var(--on-primary);background:var(--primary-gradient);box-shadow:0 20px 42px rgba(112, 66, 100, .24);} html:root:root .gallery-locked-icon svg{fill:none;stroke:currentColor;} html:root:root .gallery-locked-panel h2{color:var(--navy);} html:root:root .gallery-locked-panel p{color:var(--muted);} html:root:root .meta{color:var(--muted);} html:root:root .student-mini-avatar{color:#fff;background:var(--brand-gradient);} html:root:root .star-card{background:var(--surface);box-shadow:var(--shadow);} html:root:root .rank-badge{color:var(--on-primary);background:var(--primary-gradient);} html:root:root .star-avatar{background:var(--soft-bg);box-shadow:0 18px 38px rgba(73, 36, 62, .18);} html:root:root .star-card h3{color:var(--navy);} html:root:root .home-section-title h2{color:var(--navy);} html:root:root .home-section-title p{color:var(--muted);} html:root:root .identity-mask-logo{background:currentColor;} html:root:root .home-lesson-card h3{color:var(--navy);} html:root:root .home-lesson-card p{color:var(--muted);} html:root:root .lesson-meta-row span{color:var(--blue);background:rgba(219, 175, 160, .14);} html:root:root .stat-card strong{color:var(--navy);} html:root:root .quran-progress{background:var(--soft-bg);box-shadow:inset 0 1px 4px rgba(73, 36, 62, .12);} html:root:root .quran-progress span{background:linear-gradient(90deg, var(--blue), var(--cyan));box-shadow:0 0 24px rgba(219, 175, 160, .32);} html:root:root .quran-juz-card{background:color-mix(in srgb, var(--panel-bg) 84%, var(--soft-bg));box-shadow:0 16px 34px rgba(73, 36, 62, .08);} html:root:root .quran-juz-arrow{color:#fff;background:linear-gradient(135deg, var(--blue), var(--cyan));} html:root:root .quran-juz-arrow svg{fill:none;stroke:currentColor;} html:root:root .quran-juz-title strong{color:var(--navy);} html:root:root .quran-juz-title small{color:var(--muted);} html:root:root .quran-juz-bar{background:color-mix(in srgb, var(--soft-bg) 72%, transparent);box-shadow:inset 0 1px 4px rgba(73, 36, 62, .16);} html:root:root .quran-juz-bar span{background:linear-gradient(90deg, var(--blue), var(--cyan));box-shadow:0 0 18px rgba(219, 175, 160, .34);} html:root:root .quran-juz-action{color:var(--navy);background:color-mix(in srgb, var(--soft-bg) 72%, transparent);} html:root:root .quran-juz-action:hover{border-color:color-mix(in srgb, var(--blue) 48%, var(--line));background:color-mix(in srgb, var(--soft-bg) 88%, var(--blue));} html:root:root .quran-juz-action svg{fill:none;stroke:currentColor;} html:root:root .quran-juz-action-delete{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 42%, var(--line));background:color-mix(in srgb, var(--danger) 11%, transparent);} html:root:root .quran-juz-action-delete:hover{color:#fff;border-color:var(--danger);background:var(--danger);} html:root:root .finance-balance-card,html:root:root .finance-action-panel{border-color:color-mix(in srgb, var(--blue) 20%, var(--line));box-shadow:0 24px 54px rgba(101, 18, 38, .12);} html:root:root .finance-balance-card::before,html:root:root .finance-action-panel::before{background:radial-gradient(circle at 18% 12%, rgba(219, 175, 160, .18), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, .06), transparent 42%);} html:root:root .finance-balance-card{color:var(--blue);} html:root:root .finance-balance-card small,html:root:root .finance-balance-card span{color:var(--muted);} html:root:root .finance-balance-icon,html:root:root .finance-action-icon{color:var(--on-primary);background:var(--primary-gradient);box-shadow:0 18px 36px rgba(112, 66, 100, .24);} html:root:root .finance-balance-icon svg,html:root:root .finance-action-icon svg{fill:none;stroke:currentColor;} html:root:root .finance-action-panel.is-deposit{color:var(--success);} html:root:root .finance-action-panel.is-withdraw{color:var(--danger);} html:root:root .finance-action-panel.is-deposit .finance-action-icon{background:linear-gradient(135deg, #0f946d, #BB8493);} html:root:root .finance-action-panel.is-withdraw .finance-action-icon{background:linear-gradient(135deg, #d94763, #ff7b9a);} html:root:root .finance-action-head p{color:var(--muted);} html:root:root .finance-action-panel input,html:root:root .finance-action-panel select{border-color:color-mix(in srgb, currentColor 18%, var(--line));} html:root:root .finance-action-panel input:focus,html:root:root .finance-action-panel select:focus{border-color:color-mix(in srgb, currentColor 48%, var(--line));box-shadow:0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);} html:root:root .finance-archive-card{background:color-mix(in srgb, var(--card-bg) 86%, transparent);box-shadow:0 16px 36px rgba(101, 18, 38, .08);} html:root:root .finance-archive-card::after{background:currentColor;} html:root:root .finance-archive-icon{color:var(--on-primary);background:var(--primary-gradient);box-shadow:0 12px 28px rgba(112, 66, 100, .22);} html:root:root .finance-archive-icon svg{fill:none;stroke:currentColor;} html:root:root .finance-archive-card small{color:var(--muted);} html:root:root .finance-archive-card strong{color:var(--navy);} html:root:root .finance-archive-card.is-withdraw{color:var(--danger);} html:root:root .finance-archive-card.is-withdraw .finance-archive-icon{background:linear-gradient(135deg, #d94763, #ff7b9a);} html:root:root .finance-archive-card.is-deposit{color:var(--success);} html:root:root .finance-archive-card.is-deposit .finance-archive-icon{background:linear-gradient(135deg, #0f946d, #BB8493);} html:root:root .quran-exam-panel::after{background:rgba(219, 175, 160, .09);} html:root:root .quran-exam-panel-head p{color:var(--muted);} html:root:root .quran-exam-type-option,html:root:root .quran-exam-filter-button{background:var(--card-bg);color:var(--ink);} html:root:root .quran-exam-type-option{box-shadow:0 14px 34px rgba(101, 18, 38, .07);} html:root:root .quran-exam-type-option.is-active{color:var(--on-primary);border-color:transparent;background:var(--primary-gradient);box-shadow:0 18px 36px rgba(112, 66, 100, .22);} html:root:root .quran-exam-type-icon,html:root:root .quran-exam-rule-icon{background:color-mix(in srgb, var(--cyan) 13%, transparent);color:var(--blue);} html:root:root .quran-exam-type-option.is-active .quran-exam-type-icon{color:#fff;background:rgba(255, 255, 255, .18);} html:root:root .quran-exam-type-icon svg,html:root:root .quran-exam-field-icon svg,html:root:root .quran-exam-rule-icon svg{fill:none;stroke:currentColor;} html:root:root .quran-exam-type-copy small,html:root:root .quran-exam-live-summary p,html:root:root .quran-exam-rule-card p,html:root:root .quran-exam-filter-summary .meta{color:var(--muted);} html:root:root .quran-exam-type-option.is-active .quran-exam-type-copy small{color:rgba(255, 255, 255, .82);} html:root:root .quran-exam-live-summary{background:linear-gradient(135deg, rgba(187, 132, 147, .13), rgba(73, 36, 62, .06));} html:root:root .quran-exam-live-summary strong,html:root:root .quran-exam-rule-card strong{color:var(--navy);} html:root:root .quran-exam-field-card{background:var(--soft-bg);} html:root:root .quran-exam-field-icon{color:var(--blue);background:color-mix(in srgb, var(--cyan) 13%, transparent);} html:root:root .quran-exam-rule-card{background:var(--card-bg);box-shadow:0 14px 34px rgba(101, 18, 38, .07);} html:root:root .quran-exam-rule-card b{color:var(--success);} html:root:root .quran-exam-filter-button.is-active{color:var(--on-primary);border-color:transparent;background:var(--primary-gradient);box-shadow:0 16px 32px rgba(112, 66, 100, .2);} html:root:root .rank-metric-card{box-shadow:none;} html:root:root .setting-checkbox-card{background:var(--soft-bg);} html:root:root .upload-mode-tabs{background:var(--soft-bg);} html:root:root .upload-mode-tabs button{color:var(--navy);background:transparent;} html:root:root .upload-mode-tabs button.is-active{color:var(--on-primary);background:var(--primary-gradient);box-shadow:0 12px 26px rgba(112, 66, 100, .22);} html:root:root label{color:var(--navy);} html:root:root label.is-required::after{color:var(--danger);} html:root:root input,html:root:root textarea,html:root:root select,html:root:root .rich-editor{background:var(--input-bg);color:var(--ink);} html:root:root input:focus,html:root:root textarea:focus,html:root:root select:focus,html:root:root .rich-editor:focus{border-color:rgba(219, 175, 160, .88);box-shadow:0 0 0 4px rgba(219, 175, 160, .15);} html:root:root .icon-btn{color:var(--navy);background:var(--soft-bg);} html:root:root .table-wrap{background:var(--table-bg);} html:root:root table{background:var(--table-bg);} html:root:root th{color:var(--navy);background:var(--table-head);} html:root:root .badge{background:color-mix(in srgb, var(--cyan) 13%, transparent);color:var(--blue);} html:root:root .badge.success{color:var(--success);} html:root:root .badge.danger{color:var(--danger);background:rgba(217, 71, 99, .12);} html:root:root .badge.warning{color:var(--warning);background:rgba(199, 123, 22, .13);} html:root:root .logs-stats .stat-card::after{background:rgba(219, 175, 160, .13);} html:root:root .stat-icon{color:var(--blue);background:color-mix(in srgb, var(--cyan) 13%, transparent);} html:root:root .stat-icon svg,html:root:root .log-mark svg{fill:none;stroke:currentColor;} html:root:root .stat-icon.success,html:root:root .log-mark.success{color:var(--success);} html:root:root .stat-icon.danger,html:root:root .log-mark.danger{color:var(--danger);background:rgba(217, 71, 99, .12);} html:root:root .stat-icon.warning,html:root:root .log-mark.warning{color:var(--warning);background:rgba(199, 123, 22, .13);} html:root:root .logs-filter{background:var(--soft-bg);} html:root:root .log-mark{color:var(--blue);background:color-mix(in srgb, var(--cyan) 13%, transparent);} html:root:root .table-auth-logs td small,html:root:root .table-activity-logs td small{color:var(--muted);} html:root:root .log-reversal-state{color:var(--warning);background:rgba(199, 123, 22, .12);} html:root:root .table-activity-logs tr.is-reversed-log{background:color-mix(in srgb, var(--warning) 8%, transparent);} html:root:root .presence-launch-button{color:#fff;background:radial-gradient(circle at 14% 24%, rgba(219, 175, 160, .34), transparent 18rem), linear-gradient(135deg, #261323, #49243E 54%, #BB8493);box-shadow:0 28px 74px rgba(73, 36, 62, .2);} html:root:root .presence-launch-button::before{background:linear-gradient(100deg, transparent 0 28%, rgba(255, 255, 255, .24) 45%, transparent 62% 100%);} html:root:root .presence-launch-icon{color:#49243E;background:linear-gradient(135deg, #fff, #DBAFA0);box-shadow:0 18px 42px rgba(0, 0, 0, .2);} html:root:root .presence-launch-icon svg,html:root:root .presence-launch-arrow svg,html:root:root .presence-hero-icon svg,html:root:root .presence-stat-icon svg{fill:none;stroke:currentColor;} html:root:root .presence-launch-copy small{color:rgba(255, 255, 255, .78);} html:root:root .presence-launch-arrow{background:rgba(255, 255, 255, .13);} html:root:root .presence-hero{color:#fff;border-color:rgba(219, 175, 160, .26);background:radial-gradient(circle at 12% 20%, rgba(219, 175, 160, .28), transparent 20rem), linear-gradient(135deg, rgba(38, 19, 35, .98), rgba(112, 66, 100, .82) 58%, rgba(187, 132, 147, .68));} html:root:root .presence-hero-icon{color:#49243E;background:linear-gradient(135deg, #fff, #BB8493);box-shadow:0 18px 44px rgba(0, 0, 0, .22);} html:root:root .presence-hero h2{color:#fff;} html:root:root .presence-hero p{color:rgba(255, 255, 255, .78);} html:root:root .presence-live-badge{color:#6fffd8;} html:root:root .presence-live-badge i{background:currentColor;} html:root:root .presence-updated{background:rgba(255, 255, 255, .1);} html:root:root .presence-updated span{color:rgba(255, 255, 255, .72);} html:root:root .presence-updated strong{color:#fff;} html:root:root .presence-stat-card{background:var(--surface);box-shadow:0 18px 44px rgba(101, 18, 38, .08);} html:root:root .presence-stat-card::after{background:rgba(219, 175, 160, .12);} html:root:root .presence-stat-icon{color:var(--blue);background:color-mix(in srgb, var(--cyan) 13%, transparent);} html:root:root .presence-stat-icon.online{color:var(--success);} html:root:root .presence-stat-icon.student{color:var(--cyan);background:rgba(219, 175, 160, .12);} html:root:root .presence-stat-icon.admin{color:var(--warning);background:rgba(199, 123, 22, .13);} html:root:root .presence-stat-icon.teacher{color:var(--blue);background:color-mix(in srgb, var(--blue) 13%, transparent);} html:root:root .presence-stat-card > span:not(.presence-stat-icon){color:var(--muted);} html:root:root .presence-stat-card strong{color:var(--navy);} html:root:root .presence-count-caption{color:var(--muted);} html:root:root .presence-filter-bar{background:var(--soft-bg);} html:root:root .presence-filter-pill{color:var(--navy);background:var(--surface);} html:root:root .presence-filter-pill b{color:var(--blue);background:color-mix(in srgb, var(--cyan) 13%, transparent);} html:root:root .presence-filter-pill.is-active{color:#fff;border-color:rgba(219, 175, 160, .34);background:var(--brand-gradient);box-shadow:0 18px 38px rgba(73, 36, 62, .2);} html:root:root .presence-filter-pill.is-active b{color:#49243E;background:rgba(255, 255, 255, .82);} html:root:root .presence-avatar{color:#fff;background:var(--brand-gradient);} html:root:root .presence-avatar-fallback{box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .18);} html:root:root .presence-person small,html:root:root .table-presence td:nth-child(4) small{color:var(--muted);} html:root:root .presence-state > span{background:currentColor;} html:root:root .presence-state.is-online{color:var(--success);} html:root:root .presence-state.is-offline{color:var(--muted);background:var(--soft-bg);} html:root:root .presence-count{color:var(--blue);background:color-mix(in srgb, var(--cyan) 13%, transparent);} html:root:root .presence-count.success{color:var(--success);} html:root:root .presence-count.danger{color:var(--danger);background:rgba(217, 71, 99, .12);} html:root:root .presence-count.warning{color:var(--warning);background:rgba(199, 123, 22, .13);} html:root:root .table-presence tr.is-online{background:color-mix(in srgb, var(--success) 8%, transparent);} html:root:root .presence-command.is-refreshing .presence-table-panel{box-shadow:0 0 0 1px rgba(219, 175, 160, .2), 0 24px 70px rgba(101, 18, 38, .12);} @media (prefers-reduced-motion: no-preference){ html:root:root .presence-launch-button:hover,html:root:root .presence-stat-card:hover,html:root:root .presence-filter-pill:hover{box-shadow:0 26px 58px rgba(101, 18, 38, .16);} } html:root:root code{color:var(--navy);background:var(--soft-bg);} html:root:root .plain-name{color:var(--ink);} html:root:root .plain-name + .plain-name::before{color:var(--muted);} html:root:root .alert-success{color:var(--success);} html:root:root .alert-danger{color:var(--danger);background:rgba(217, 71, 99, .12);} html:root:root .alert-info{color:var(--navy-2);background:rgba(219, 175, 160, .14);} html:root:root .notification-trigger{color:#4b1025;background:linear-gradient(135deg, #fff2b3, #d9a532);box-shadow:0 16px 34px rgba(217, 165, 50, .28);} html:root:root .notification-trigger svg{fill:none;stroke:currentColor;} html:root:root .notification-trigger b{color:#fff;background:var(--danger);} html:root:root .notification-popover{background:color-mix(in srgb, var(--surface) 94%, transparent);box-shadow:0 26px 70px rgba(0, 0, 0, .22);} html:root:root .notification-headsup{color:var(--cream);background:linear-gradient(145deg, rgba(92, 6, 34, .96), rgba(28, 12, 12, .98)), var(--brand);box-shadow:0 24px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 235, 165, .24);} html:root:root .notification-headsup-media{background:linear-gradient(135deg, #f8dc80, #c99026);box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .18);} html:root:root .notification-headsup-content strong{color:#fff;} html:root:root .notification-headsup-content span{color:color-mix(in srgb, var(--cream) 88%, #fff);} html:root:root .notification-headsup-content small{color:color-mix(in srgb, var(--gold) 85%, #fff);} html:root:root .notification-headsup-close{color:#fff;background:rgba(255, 255, 255, .12);} html:root:root .notification-headsup-close svg{fill:none;stroke:currentColor;} html:root:root .notification-popover-head strong{color:var(--navy);} html:root:root .notification-popover-head a{color:var(--brand);} html:root:root .notification-mini-card,html:root:root .notification-history-card,html:root:root .notification-inbox-card{background:var(--card-bg);} html:root:root .notification-mini-card.is-unread,html:root:root .notification-inbox-card.is-unread{border-color:color-mix(in srgb, var(--gold) 52%, var(--line));box-shadow:inset 4px 0 0 color-mix(in srgb, var(--gold) 80%, var(--brand));} html:root:root .notification-mini-card strong,html:root:root .notification-history-card strong,html:root:root .notification-inbox-card strong{color:var(--navy);} html:root:root .notification-mini-card span,html:root:root .notification-history-card p,html:root:root .notification-inbox-card p{color:var(--muted);} html:root:root .notification-mini-card small,html:root:root .notification-history-card small,html:root:root .notification-inbox-card small{color:var(--muted);} html:root:root .push-permission-prompt{background:radial-gradient(circle at 8% 0, color-mix(in srgb, var(--gold) 22%, transparent), transparent 14rem), color-mix(in srgb, var(--surface) 94%, transparent);box-shadow:0 28px 78px rgba(0, 0, 0, .28);} html:root:root .push-permission-prompt strong{color:var(--navy);} html:root:root .push-permission-prompt span{color:var(--muted);} html:root:root .notification-page-title::after{background:color-mix(in srgb, var(--gold) 20%, transparent);} html:root:root .notification-message-panel,html:root:root .notification-audience-panel,html:root:root .notification-history-panel{background:radial-gradient(circle at 10% 0, color-mix(in srgb, var(--gold) 13%, transparent), transparent 18rem), var(--surface);box-shadow:var(--shadow);} html:root:root .notification-panel-head h2{color:var(--navy);} html:root:root .notification-spark{color:#4b1025;background:linear-gradient(135deg, #fff1af, #d69f27);box-shadow:0 16px 34px rgba(217, 165, 50, .22);} html:root:root .notification-spark.is-soft{color:var(--brand);background:color-mix(in srgb, var(--gold) 16%, var(--surface));box-shadow:none;} html:root:root .notification-spark svg{fill:none;stroke:currentColor;} html:root:root .notification-phone-preview{background:color-mix(in srgb, var(--surface) 76%, transparent);box-shadow:inset 0 1px 0 rgba(255, 255, 255, .12);} html:root:root .notification-phone-dot{background:var(--gold);box-shadow:0 0 0 7px color-mix(in srgb, var(--gold) 16%, transparent);} html:root:root .notification-phone-preview small,html:root:root .notification-phone-preview p{color:var(--muted);} html:root:root .notification-phone-preview strong{color:var(--navy);} html:root:root .audience-card{background:var(--card-bg);} html:root:root .audience-card:has(input:checked){border-color:color-mix(in srgb, var(--gold) 62%, var(--line));box-shadow:0 18px 42px rgba(217, 165, 50, .16);} html:root:root .audience-icon{color:var(--brand);background:color-mix(in srgb, var(--gold) 15%, var(--surface));} html:root:root .audience-icon svg{fill:none;stroke:currentColor;} html:root:root .audience-card b{color:var(--navy);} html:root:root .audience-card small{color:var(--muted);} html:root:root .audience-extra{background:color-mix(in srgb, var(--gold) 8%, transparent);} html:root:root .user-pick-card{background:var(--surface);} html:root:root .user-pick-card small{color:var(--muted);} html:root:root .icon-action{color:var(--brand);background:var(--soft-bg);} html:root:root .icon-action:hover{border-color:color-mix(in srgb, var(--gold) 55%, var(--line));} html:root:root .icon-action svg{fill:none;stroke:currentColor;} html:root:root .icon-action.is-danger{color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, var(--surface));} html:root:root .notification-delivery-stats span,html:root:root .notification-delivery-card{background:var(--soft-bg);} html:root:root .notification-delivery-stats b,html:root:root .notification-delivery-card b{color:var(--navy);} html:root:root .notification-delivery-stats small,html:root:root .notification-delivery-card small{color:var(--muted);} html:root:root .notification-edit-modal{background:rgba(0, 0, 0, .46);} html:root:root .notification-edit-card{background:var(--surface);box-shadow:0 30px 90px rgba(0, 0, 0, .34);} html:root:root .checkbox-line{color:var(--muted);} html:root:root .gallery-approval-panel{border-color:rgba(219, 175, 160, .28);background:radial-gradient(circle at 8% 0, rgba(219, 175, 160, .12), transparent 22rem), var(--surface);} html:root:root .approval-album-card{border-color:color-mix(in srgb, var(--warning) 28%, var(--line));} html:root:root .gallery-rejected-link{box-shadow:0 16px 34px color-mix(in srgb, var(--danger) 18%, transparent);} html:root:root .gallery-rejected-link b{color:var(--danger);background:#fff;} html:root:root .gallery-rejected-panel{border-color:color-mix(in srgb, var(--danger) 24%, var(--line));background:radial-gradient(circle at 92% 0, color-mix(in srgb, var(--danger) 10%, transparent), transparent 18rem), var(--surface);} html:root:root .rejected-gallery-card{border-color:color-mix(in srgb, var(--danger) 28%, var(--line));} html:root:root .album-pending-pill{color:#fff;background:color-mix(in srgb, var(--warning) 86%, #4b1025);box-shadow:0 12px 28px rgba(0, 0, 0, .22);} html:root:root .compact-section-head h3{color:var(--navy);} html:root:root .media-approval-body strong{color:var(--navy);} html:root:root .media-approval-body small{color:var(--muted);} html:root:root .qr-login-divider{color:var(--muted);} html:root:root .qr-login-divider::before,html:root:root .qr-login-divider::after{background:var(--line);} html:root:root .qr-login-divider span{color:var(--navy);background:var(--soft-bg);} html:root:root .qr-login-open{border-color:color-mix(in srgb, var(--gold) 42%, var(--line));color:var(--navy);background:linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 84%, var(--gold)), var(--surface));} html:root:root .qr-login-open svg,html:root:root .qr-login-option svg,html:root:root .qr-login-icon svg,html:root:root .qr-login-close svg{fill:none;stroke:currentColor;} html:root:root .qr-login-backdrop{background:rgba(42, 19, 27, .62);} html:root:root .qr-login-box{background:radial-gradient(circle at 12% 0, color-mix(in srgb, var(--gold) 20%, transparent), transparent 13rem), var(--surface-strong);box-shadow:0 32px 90px rgba(42, 19, 27, .34);} html:root:root .qr-login-close{color:var(--navy);background:var(--surface);} html:root:root .qr-login-head h2{color:var(--navy);} html:root:root .qr-login-icon{color:#fff;background:linear-gradient(135deg, var(--navy), #0f6d66);box-shadow:0 16px 36px rgba(109, 8, 38, .2);} html:root:root .qr-login-option{color:var(--navy);background:var(--surface);} html:root:root .qr-login-option:hover{border-color:color-mix(in srgb, var(--gold) 55%, var(--line));box-shadow:0 16px 34px rgba(109, 8, 38, .12);} html:root:root .qr-login-option svg{color:#0f6d66;} html:root:root .qr-camera-stage{background:#11050a;} html:root:root .qr-scan-line{background:linear-gradient(90deg, transparent, #f4d783, transparent);box-shadow:0 0 20px rgba(244, 215, 131, .75);} html:root:root .qr-login-status{color:var(--muted);} html:root:root .qr-login-status.is-error{color:var(--danger);} html:root:root .drop-zone{background:var(--soft-bg);} html:root:root .drop-zone.has-preview{border-color:color-mix(in srgb, var(--cyan) 55%, var(--line));background:radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--cyan-2) 20%, transparent), transparent 15rem), var(--soft-bg);} html:root:root .drop-zone.is-dragging{border-color:var(--cyan);background:rgba(219, 175, 160, .18);} html:root:root .drop-zone-previews::-webkit-scrollbar-track{background:color-mix(in srgb, var(--surface) 76%, transparent);} html:root:root .drop-zone-previews::-webkit-scrollbar-thumb{background:linear-gradient(90deg, var(--brand), var(--cyan));} html:root:root .drop-zone-preview{background:color-mix(in srgb, var(--surface) 82%, transparent);box-shadow:0 14px 34px rgba(0, 0, 0, .12);} html:root:root .drop-zone-preview img,html:root:root .drop-zone-video-thumb,html:root:root .drop-zone-file-thumb{background:var(--brand-gradient);} html:root:root .drop-zone-remove{color:#fff;background:color-mix(in srgb, var(--danger) 88%, #2a0612);box-shadow:0 8px 18px rgba(0, 0, 0, .24);} html:root:root .drop-zone-remove:hover,html:root:root .drop-zone-remove:focus-visible{box-shadow:0 12px 24px rgba(0, 0, 0, .3);} html:root:root .drop-zone-video-thumb,html:root:root .drop-zone-file-thumb{color:var(--on-brand);} html:root:root .drop-zone-video-thumb svg,html:root:root .drop-zone-file-thumb svg{fill:none;stroke:currentColor;} html:root:root .drop-zone-preview b{color:var(--navy);} html:root:root .drop-zone-preview small{color:var(--muted);} html:root:root .upload-progress{background:linear-gradient(135deg, color-mix(in srgb, var(--cyan-2) 16%, transparent), transparent 58%), color-mix(in srgb, var(--surface) 88%, transparent);box-shadow:0 18px 42px rgba(101, 18, 38, .1), inset 0 1px 0 rgba(255, 255, 255, .38);} html:root:root .upload-progress-head strong{color:var(--navy);} html:root:root .upload-progress-head b{color:#fff;background:var(--brand-gradient);box-shadow:0 10px 24px rgba(101, 18, 38, .16);} html:root:root .upload-progress-track{background:color-mix(in srgb, var(--line) 72%, transparent);box-shadow:inset 0 2px 8px rgba(0, 0, 0, .12);} html:root:root .upload-progress-bar,html:root:root .upload-progress > span{background:linear-gradient(90deg, var(--brand), var(--cyan), var(--cyan-2));box-shadow:0 0 22px color-mix(in srgb, var(--cyan) 42%, transparent);} html:root:root .upload-progress-bar::after,html:root:root .upload-progress > span::after{background:linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);} html:root:root .upload-progress-stats{color:var(--muted);} html:root:root .upload-progress-stats span{background:color-mix(in srgb, var(--soft-bg) 82%, transparent);} html:root:root .upload-progress.is-complete{border-color:color-mix(in srgb, var(--success) 34%, var(--line));} html:root:root .upload-progress.has-error{border-color:color-mix(in srgb, var(--danger) 45%, var(--line));background:linear-gradient(135deg, color-mix(in srgb, var(--danger) 10%, transparent), transparent 58%), color-mix(in srgb, var(--surface) 88%, transparent);} html:root:root .upload-progress.has-error .upload-progress-head strong{color:var(--danger);} html:root:root .attendance-options label{background:var(--soft-bg);} html:root:root .attendance-options input[value="present"]{accent-color:var(--success);} html:root:root .attendance-options input[value="late"]{accent-color:var(--warning);} html:root:root .attendance-options input[value="absent"]{accent-color:var(--danger);} html:root:root .archive-day{background:var(--card-bg);} html:root:root .assignment-card{background:var(--card-bg);} html:root:root .assignment-card strong{color:var(--navy);} html:root:root .quran-page-card{background:var(--card-bg);} html:root:root .series-row{background:var(--card-bg);} html:root:root .profile-id small,html:root:root .account-card small{color:var(--muted);} html:root:root .profile-id strong{color:var(--navy);} html:root:root .account-command-card{color:var(--ink);border-color:rgba(109, 8, 38, .16);background:linear-gradient(145deg, rgba(255, 253, 247, .98), rgba(249, 232, 203, .96) 58%, rgba(244, 215, 131, .8));box-shadow:0 24px 70px rgba(109, 8, 38, .14);} html:root:root .account-command-card .eyebrow{color:var(--navy);background:rgba(109, 8, 38, .08);} html:root:root .account-command-card h2{color:#5b061f;} html:root:root .account-command-card p{color:#6b4752;} html:root:root .account-command-metrics span{color:#6b4752;background:rgba(255, 255, 255, .58);} html:root:root .account-command-metrics b{color:var(--navy);} html:root:root[data-theme="dark"] .account-command-card{color:#fff7f4;border-color:rgba(244, 215, 131, .16);background:linear-gradient(145deg, rgba(7, 3, 5, .98), rgba(58, 5, 20, .9) 58%, rgba(143, 41, 75, .78));box-shadow:0 24px 78px rgba(0, 0, 0, .58);} html:root:root[data-theme="dark"] .account-command-card .eyebrow{color:#fff7f4;background:rgba(255, 255, 255, .12);} html:root:root[data-theme="dark"] .account-command-card h2{color:#fff7f4;} html:root:root[data-theme="dark"] .account-command-card p{color:rgba(255, 247, 244, .74);} html:root:root[data-theme="dark"] .account-command-metrics span{color:rgba(255, 247, 244, .78);border-color:rgba(255, 255, 255, .08);background:rgba(255, 255, 255, .1);} html:root:root[data-theme="dark"] .account-command-metrics b{color:#fff7f4;} html:root:root .account-type-card{color:var(--ink);background:var(--card-bg);} html:root:root .account-type-card:hover{border-color:color-mix(in srgb, var(--cyan) 46%, var(--line));} html:root:root .account-type-card:has(input:checked){color:#fff7f4;border-color:transparent;background:var(--primary-gradient);box-shadow:0 18px 44px rgba(73, 36, 62, .24);} html:root:root .account-type-card small{color:var(--muted);} html:root:root .account-type-card:has(input:checked) small{color:rgba(255, 247, 244, .76);} html:root:root .account-type-icon{color:var(--blue);background:var(--soft-bg);} html:root:root .account-type-card:has(input:checked) .account-type-icon{color:#49243E;background:rgba(255, 247, 244, .86);} html:root:root .account-type-icon svg,html:root:root .account-card svg,html:root:root .about-hero-actions svg{fill:none;stroke:currentColor;} html:root:root .account-main-fields,html:root:root .permission-board,html:root:root .account-card,html:root:root .account-empty-card{background:color-mix(in srgb, var(--card-bg) 90%, var(--soft-bg));} html:root:root .account-auto-note{color:var(--navy);background:var(--soft-bg);} html:root:root .account-auto-note span{color:var(--muted);} html:root:root .permission-board-head p{color:var(--muted);} html:root:root .permission-row{background:var(--table-bg);} html:root:root .permission-row strong,html:root:root .visitor-permission-card strong{color:var(--navy);} html:root:root .permission-row small{color:var(--muted);} html:root:root .visitor-permission-card{background:var(--table-bg);} html:root:root .segmented-choice{background:var(--soft-bg);} html:root:root .segmented-choice label{color:var(--muted);} html:root:root .segmented-choice label:has(input:checked){color:var(--on-primary);background:var(--primary-gradient);} html:root:root .account-card{box-shadow:var(--shadow);} html:root:root .account-card::after{background:rgba(187, 132, 147, .12);} html:root:root .credential-grid span{background:var(--soft-bg);} html:root:root .credential-grid b{color:var(--navy);} html:root:root .account-permission-chips span{color:var(--blue);background:color-mix(in srgb, var(--cyan) 13%, transparent);} html:root:root .account-empty-card{color:var(--muted);box-shadow:none;} html:root:root .media-actions{background:color-mix(in srgb, var(--surface) 84%, transparent);} html:root:root .lesson-modal-card{color:var(--ink);background:var(--surface);box-shadow:0 28px 90px rgba(0, 0, 0, .34);} html:root:root .lesson-modal-card h2{color:var(--navy);} html:root:root .lesson-modal-card p{color:var(--ink);} html:root:root .lesson-modal-close{color:var(--navy);background:var(--soft-bg);} html:root:root .lightbox-stage img,html:root:root .lightbox-stage video,html:root:root .lightbox-stage iframe{background:#000;box-shadow:0 28px 90px rgba(0, 0, 0, .38);} html:root:root .lightbox-thumbs{box-shadow:0 18px 50px rgba(0, 0, 0, .28);} html:root:root .lightbox-thumb{color:#fff;background:rgba(255, 255, 255, .12);} html:root:root .lightbox-thumb span{background:var(--placeholder-gradient);} html:root:root .lightbox-thumb.is-active{border-color:var(--cyan);} html:root:root .lightbox-close,html:root:root .lightbox-arrow{color:#fff;background:rgba(255, 255, 255, .14);} html:root:root .lesson-modal-card .lesson-modal-close{color:var(--navy);background:var(--soft-bg);} html:root:root .pager-link{color:var(--navy);background:var(--soft-bg);} html:root:root .pager-link.is-active{color:var(--on-primary);background:var(--primary-gradient);box-shadow:0 12px 26px rgba(112, 66, 100, .22);} html:root:root .pager-link.is-disabled{color:var(--muted);} html:root:root .site-footer{color:#fff7f4;background:var(--footer-gradient);} html:root:root .site-footer span{color:rgba(232, 248, 255, .82);} @media (max-width: 720px){ html:root:root .mobile-hero-links a{color:var(--navy);background:var(--surface);box-shadow:0 10px 24px rgba(101, 18, 38, .08);} html:root:root .mobile-hero-links svg{fill:none;stroke:currentColor;} html:root:root .hero-visual{background:transparent;box-shadow:none;} html:root:root .hero-slider-frame{background:var(--hero-gradient);box-shadow:0 22px 48px rgba(73, 36, 62, .18);} html:root:root .hero-stat{color:var(--ink);background:var(--surface);border-color:var(--surface-border);box-shadow:0 10px 24px rgba(101, 18, 38, .08);} html:root:root .hero-stat strong{color:var(--navy);} html:root:root table.responsive-table{background:transparent;} html:root:root table.responsive-table tr{background:var(--card-bg);box-shadow:0 12px 32px rgba(101, 18, 38, .08);} html:root:root table.responsive-table td::before{color:var(--navy);} } @media (max-width: 720px){ html:root:root .mobile-topbar{background:var(--header-bg);box-shadow:var(--shadow);} html:root:root .mobile-bottom-tabs{color:#DBAFA0;background:linear-gradient(135deg, rgba(31, 17, 29, .96), rgba(38, 19, 35, .94));box-shadow:0 20px 46px rgba(0, 0, 0, .34);} html:root:root .mobile-tab{color:inherit;} html:root:root .mobile-tab svg{fill:none;stroke:currentColor;} html:root:root .mobile-tab.is-active{color:#fff;background:rgba(187, 132, 147, .24);box-shadow:inset 0 0 0 1px rgba(219, 175, 160, .22);} html:root:root .mobile-brand strong{color:var(--navy);} html:root:root .mobile-menu-toggle{background:var(--primary-gradient);box-shadow:0 14px 34px rgba(112, 66, 100, .24);} html:root:root .mobile-menu-toggle span{background:var(--on-primary);} html:root:root .site-header{border-color:transparent;} html:root:root body.mobile-menu-open .site-header{border-color:var(--surface-border);} } @media (max-width: 720px){ html:root:root table.responsive-table.table-presence td{background:var(--soft-bg);} html:root:root table.responsive-table.table-presence td::before{color:var(--muted);} html:root:root table.responsive-table.table-presence td:first-child{background:transparent;} } @media (max-width: 720px){ html:root:root .presence-mobile-card{background:linear-gradient(135deg, color-mix(in srgb, var(--soft-bg) 88%, transparent), transparent), var(--card-bg);box-shadow:0 12px 26px rgba(101, 18, 38, .08);} html:root:root .presence-mobile-card::after{background:color-mix(in srgb, var(--cyan) 14%, transparent);} html:root:root .presence-mobile-card.is-online{border-color:color-mix(in srgb, var(--success) 32%, var(--line));background:linear-gradient(135deg, color-mix(in srgb, var(--success) 11%, transparent), transparent 52%), var(--card-bg);} html:root:root .presence-mobile-avatar{color:#fff;background:var(--brand-gradient);} html:root:root .presence-mobile-name strong{color:var(--navy);} html:root:root .presence-mobile-name small{color:var(--muted);} html:root:root .presence-mobile-state{color:var(--muted);background:var(--soft-bg);} html:root:root .presence-mobile-state i{background:currentColor;} html:root:root .presence-mobile-card.is-online .presence-mobile-state{color:var(--success);background:color-mix(in srgb, var(--success) 13%, transparent);} html:root:root .presence-mobile-meta{color:var(--muted);} html:root:root .presence-mobile-meta span:first-child{color:var(--blue);background:color-mix(in srgb, var(--cyan) 12%, transparent);} html:root:root .presence-mobile-metrics span{background:color-mix(in srgb, var(--blue) 13%, transparent);} html:root:root .presence-mobile-metrics b{color:var(--blue);} html:root:root .presence-mobile-metrics small{color:var(--navy);} html:root:root .presence-mobile-metrics span:nth-child(1) b{color:var(--success);} html:root:root .presence-mobile-metrics span:nth-child(2) b{color:var(--danger);} html:root:root .presence-mobile-metrics span:nth-child(3) b{color:var(--warning);} html:root:root .presence-mobile-empty{color:var(--muted);background:var(--soft-bg);} } html:root:root .student-dashboard-hero,html:root:root .students-command-hero{color:#fff;background:radial-gradient(circle at 16% 18%, rgba(219, 175, 160, .24), transparent 18rem), linear-gradient(135deg, rgba(38, 19, 35, .98), rgba(112, 66, 100, .78) 58%, rgba(187, 132, 147, .56));box-shadow:0 30px 84px rgba(73, 36, 62, .22);} html:root:root .student-hero-avatar{color:#fff;background:var(--brand-gradient);box-shadow:0 24px 58px rgba(0, 0, 0, .28);} html:root:root .student-hero-badge{color:#DBAFA0;background:rgba(255, 255, 255, .12);} html:root:root .student-hero-copy h1,html:root:root .students-command-hero h1{color:#fff;} html:root:root .student-hero-copy p,html:root:root .students-command-hero p{color:rgba(255, 255, 255, .78);} html:root:root .student-hero-chips span{color:rgba(255, 255, 255, .86);background:rgba(255, 255, 255, .12);} html:root:root .student-hero-chips b{color:#fff;} html:root:root .student-hero-orbit,html:root:root .students-command-orbit{color:#49243E;background:linear-gradient(135deg, #fff, #DBAFA0);box-shadow:0 24px 58px rgba(0, 0, 0, .24);} html:root:root .student-hero-orbit svg,html:root:root .students-command-orbit svg,html:root:root .student-kpi-icon svg,html:root:root .students-mobile-open svg{fill:none;stroke:currentColor;} html:root:root .student-scope-panel{background:linear-gradient(135deg, color-mix(in srgb, var(--soft-bg) 78%, transparent), transparent), var(--surface);} html:root:root .student-kpi-card::after{background:color-mix(in srgb, var(--cyan) 13%, transparent);} html:root:root .student-kpi-icon{color:var(--blue);background:color-mix(in srgb, var(--cyan) 13%, transparent);} html:root:root .student-kpi-icon.success{color:var(--success);} html:root:root .student-kpi-icon.warning{color:var(--warning);background:rgba(199, 123, 22, .13);} html:root:root .student-kpi-icon.danger{color:var(--danger);background:rgba(217, 71, 99, .12);} html:root:root .student-rank-panel{background:radial-gradient(circle at 10% 18%, rgba(219, 175, 160, .12), transparent 18rem), var(--surface);} html:root:root .student-rank-panel .rank-metric-card{background:var(--soft-bg);} html:root:root .students-command-panel::after{background:color-mix(in srgb, var(--cyan) 10%, transparent);} html:root:root .students-mobile-card{background:var(--card-bg);box-shadow:0 12px 28px rgba(101, 18, 38, .08);} html:root:root .students-mobile-card::after{background:color-mix(in srgb, var(--cyan) 13%, transparent);} html:root:root .students-mobile-avatar{color:#fff;background:var(--brand-gradient);} html:root:root .students-mobile-main strong{color:var(--navy);} html:root:root .students-mobile-main small{color:var(--muted);} html:root:root .students-mobile-open{color:var(--on-primary);background:var(--primary-gradient);} html:root:root .students-mobile-metrics span{background:var(--soft-bg);} html:root:root .students-mobile-metrics b{color:var(--blue);} html:root:root .students-mobile-metrics small{color:var(--muted);} html:root:root .students-mobile-metrics span:nth-child(2) b,html:root:root .students-mobile-metrics span:nth-child(3) b,html:root:root .students-mobile-metrics span:nth-child(6) b,html:root:root .students-mobile-metrics span:nth-child(8) b{color:var(--success);} html:root:root .students-mobile-metrics span:nth-child(4) b{color:var(--warning);} html:root:root .students-mobile-metrics span:nth-child(5) b{color:var(--danger);} html:root:root .students-mobile-empty{color:var(--muted);background:var(--soft-bg);} html:root:root .points-archive-mobile-details > div{background:var(--soft-bg);} html:root:root .points-archive-mobile-details dt{color:var(--muted);} html:root:root .points-archive-mobile-details dd{color:var(--navy);} html:root:root .student-login-qr-download svg,html:root:root .student-login-qr-reset svg{fill:none;stroke:currentColor;} html:root:root .dashboard-nav{border-color:transparent} html:root:root :is(.btn-ghost,.site-footer){box-shadow:none}