* { scrollbar-width: thin; scrollbar-color: #b7c7bc transparent; }
body { min-height: 100vh; }
.app-background { background-color:#eef6ef; background-image:radial-gradient(circle at 12% 12%,rgba(110,231,183,.32),transparent 28%),radial-gradient(circle at 88% 32%,rgba(147,197,253,.25),transparent 27%),linear-gradient(135deg,#f5faf6 0%,#edf6f0 48%,#f6f3e9 100%); background-attachment:fixed; }
.dark .app-background { background-color:#07120d; background-image:radial-gradient(circle at 12% 12%,rgba(16,185,129,.14),transparent 28%),radial-gradient(circle at 88% 32%,rgba(59,130,246,.11),transparent 27%),linear-gradient(135deg,#07120d,#0b1721 55%,#10130d); }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(24,166,106,.28); outline-offset: 2px; }
.nav-link { display:flex; align-items:center; gap:.75rem; border-radius:.85rem; padding:.75rem .875rem; color:rgb(209 250 229/.78); font-size:.875rem; font-weight:500; transition:.2s ease; }
.nav-link svg { width:1.15rem; height:1.15rem; }
.nav-link:hover, .nav-link.active { background:rgba(255,255,255,.11); color:#fff; transform:translateX(2px); }
.nav-link.active { box-shadow:inset 3px 0 #6ee7b7; }
.hero-pattern { background-image:radial-gradient(circle at 85% 20%,rgba(52,211,153,.18),transparent 27%),linear-gradient(135deg,#123c2d,#0f6b47); }
.panel { border:1px solid rgba(255,255,255,.78); border-radius:1.5rem; background:rgba(255,255,255,.76); box-shadow:0 12px 40px rgba(22,45,34,.07); backdrop-filter:blur(18px); }
.dark .panel { border-color:rgba(71,85,105,.48); background:rgba(15,23,42,.72); box-shadow:none; }
.stat-card { position:relative; display:flex; align-items:center; gap:1rem; min-height:118px; overflow:hidden; border:1px solid rgba(255,255,255,.78); border-radius:1.5rem; background:rgba(255,255,255,.7); padding:1.25rem; box-shadow:0 10px 30px rgba(22,45,34,.05); backdrop-filter:blur(16px); transition:.2s ease; }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(22,45,34,.1); }
.dark .stat-card { border-color:rgba(71,85,105,.48); background:rgba(15,23,42,.68); }
.stat-icon { display:grid; width:3rem; height:3rem; flex:none; place-items:center; border-radius:1rem; }
.stat-icon svg { width:1.35rem; }
.stat-label { font-size:.75rem; color:#64748b; }
.stat-number { margin-top:.1rem; font-size:1.6rem; line-height:1.9rem; font-weight:800; letter-spacing:-.04em; }
.stat-badge { position:absolute; right:1rem; top:1rem; border-radius:999px; background:#f1f5f9; padding:.25rem .5rem; font-size:.625rem; font-weight:700; color:#64748b; }
.dark .stat-badge { background:#1e293b; }
.stat-badge.positive { background:#ecfdf5; color:#059669; }
.section-kicker { margin-bottom:.25rem; font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#118756; }
.dark .section-kicker { color:#6ee7b7; }
.section-title { font-size:1.2rem; line-height:1.6rem; font-weight:800; letter-spacing:-.025em; }
.input-control { height:2.65rem; border:1px solid #e2e8f0; border-radius:.75rem; background:white; padding:.5rem .8rem; color:#334155; font-size:.8rem; transition:.2s; }
.input-control:focus { border-color:#18a66a; outline:none; box-shadow:0 0 0 3px rgba(24,166,106,.12); }
.dark .input-control { border-color:#334155; background:#0f172a; color:#e2e8f0; }
thead { background:rgba(248,250,252,.68); color:#64748b; font-size:.67rem; letter-spacing:.06em; text-transform:uppercase; }
.dark thead { background:rgba(17,28,47,.68); color:#94a3b8; }
th { padding:.85rem 1.5rem; font-weight:700; }
td { border-top:1px solid #f1f5f9; padding:.9rem 1.5rem; font-size:.8rem; }
.dark td { border-color:#1e293b; }
.student-row { cursor:pointer; transition:.16s ease; }
.student-row:hover { background:#f0fdf6; }
.dark .student-row:hover { background:rgba(18,60,45,.38); }
.avatar { display:grid; width:2.5rem; height:2.5rem; flex:none; place-items:center; border-radius:.8rem; font-size:.7rem; font-weight:800; }
.score-pill { display:inline-flex; min-width:2.5rem; justify-content:center; border-radius:.55rem; padding:.3rem .5rem; font-weight:800; }
.trend { display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:600; }
.trend svg { width:.9rem; height:.9rem; }
.agenda { display:flex; align-items:center; gap:1rem; border:1px solid #f1f5f9; border-radius:1rem; padding:.85rem; transition:.2s; }
.agenda:hover { border-color:#a7f3d0; background:#f0fdf6; transform:translateX(2px); }
.dark .agenda { border-color:#1e293b; }
.dark .agenda:hover { background:#123c2d; }
.agenda>span { display:grid; width:3rem; flex:none; place-items:center; border-radius:.75rem; background:#effcf6; padding:.4rem; color:#0f6b47; }
.dark .agenda>span { background:#123c2d; color:#a7f3d0; }
.agenda>span b { font-size:1rem; line-height:1.1rem; }
.agenda>span small { font-size:.55rem; font-weight:800; letter-spacing:.1em; }
.agenda div b { font-size:.8rem; }
.agenda div p { margin-top:.15rem; font-size:.68rem; color:#64748b; }
.subject-bar-track { height:.45rem; overflow:hidden; border-radius:999px; background:#e9f0ec; }
.dark .subject-bar-track { background:#243247; }
.subject-bar { height:100%; border-radius:inherit; background:linear-gradient(90deg,#18a66a,#46cf92); transition:width .7s ease; }
.profile-chip { display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; background:rgba(255,255,255,.1); padding:.4rem .7rem; font-size:.7rem; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.profile-chip svg { width:.8rem; height:.8rem; }
.period-tab { border-radius:.55rem; padding:.5rem .7rem; color:#64748b; font-size:.68rem; font-weight:700; transition:.2s; white-space:nowrap; }
.period-tab.active { background:#fff; color:#0f6b47; box-shadow:0 2px 8px rgba(15,23,42,.08); }
.dark .period-tab.active { background:#334155; color:#a7f3d0; }
.mini-stat { position:relative; min-height:7.5rem; border:1px solid #f1f5f9; border-radius:1rem; padding:1rem; }
.dark .mini-stat { border-color:#243247; }
.mini-stat svg { width:1.15rem; height:1.15rem; }
.mini-stat span { display:block; margin-top:.7rem; font-size:.62rem; color:#64748b; }
.mini-stat b { display:block; margin-top:.1rem; font-size:1.25rem; }
.score-item-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.45rem; font-size:.75rem; }
.score-item-head b:last-child { font-size:.85rem; }
.note-card { display:flex; gap:.9rem; border:1px solid #f1f5f9; border-radius:1rem; padding:1rem; }
.dark .note-card { border-color:#243247; }
.note-card time { display:block; margin-top:.3rem; font-size:.62rem; color:#94a3b8; }
.note-dot { margin-top:.25rem; width:.55rem; height:.55rem; flex:none; border-radius:999px; }
.student-nav { display:flex; align-items:center; gap:.3rem; font-weight:600; transition:.2s; }
.student-nav:hover { color:#118756; }
.student-nav svg { width:1rem; }
.empty-state { padding:3.5rem 1rem !important; text-align:center; color:#94a3b8; }
@media (max-width:640px){th,td{padding-left:1rem;padding-right:1rem}.profile-header{text-align:center}.profile-header>div{align-items:center}.profile-header .sm\:ml-auto{text-align:center}.period-tab{padding:.45rem .55rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Tampilan sederhana halaman utama */
.simple-page { min-height:100vh; display:flex; flex-direction:column; background:#f3f5f7; font-family:Inter,Arial,sans-serif; }
.simple-page>main { width:100%; flex:1 0 auto; }
.simple-page>footer { margin-top:auto!important; }
.simple-header { background:#18897f; color:#fff; }
.header-title-line{display:flex;align-items:center;justify-content:center;gap:.75rem}.header-brand-icon{display:grid;width:2.7rem;height:2.7rem;flex:none;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:.55rem;background:rgba(255,255,255,.12)}.header-brand-icon svg{width:1.45rem;height:1.45rem;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-theme-toggle { position:absolute; right:1rem; top:50%; display:flex; align-items:center; gap:.4rem; transform:translateY(-50%); border:1px solid rgba(255,255,255,.38); border-radius:.4rem; background:rgba(255,255,255,.1); padding:.45rem .65rem; color:#fff; font-size:.68rem; font-weight:600; }
.home-theme-toggle:hover { background:rgba(255,255,255,.18); }
.top-nav { position:sticky; top:0; z-index:20; border-top:4px solid #0b4f4a; background:#105d57; color:#fff; box-shadow:0 2px 5px rgba(15,23,42,.18); }
.top-nav>div { flex-wrap:nowrap!important; }
.top-nav a { min-width:0; flex:1 1 0; padding:.85rem .35rem; text-align:center; white-space:nowrap; font-size:.78rem; font-weight:500; transition:background .15s; }
.top-nav a:hover { background:rgba(255,255,255,.1); }
.top-nav a.active { background:rgba(255,255,255,.14); box-shadow:inset 0 -3px #8dd9d1; }
.nav-dropdown{position:relative;display:flex;min-width:0;flex:1 1 0}.nav-dropdown>button{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:.35rem;padding:.85rem .35rem;text-align:center;white-space:nowrap;font-size:.78rem;font-weight:500}.dropdown-chevron{width:.8rem;height:.8rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}.nav-dropdown.open .dropdown-chevron{transform:rotate(180deg)}.nav-dropdown.active>button{background:rgba(255,255,255,.14);box-shadow:inset 0 -3px #8dd9d1}.nav-dropdown-menu{position:absolute;right:0;top:calc(100% + 1px);display:none;width:210px;overflow:hidden;border:1px solid #d5dfdd;border-radius:0 0 .45rem .45rem;background:#fff;color:#263b39;box-shadow:0 10px 24px rgba(15,23,42,.16)}.nav-dropdown.open .nav-dropdown-menu{display:block}.nav-dropdown-menu a{display:block;width:100%;padding:.72rem .85rem;text-align:left;font-size:.73rem}.nav-dropdown-menu a:hover,.nav-dropdown-menu a.current{background:#edf6f4;color:#12675f}@media(hover:hover){.nav-dropdown:hover .nav-dropdown-menu{display:block}}
.admin-top-nav{position:sticky;top:0;z-index:20;background:#263b39;color:#fff;box-shadow:0 1px 3px rgba(15,23,42,.16)}.admin-top-nav>div{min-height:46px}.admin-top-nav b{margin-right:auto;font-size:.8rem}.admin-top-nav a,.admin-top-nav button{padding:.65rem .75rem;border-radius:.3rem;font-size:.7rem;font-weight:600}.admin-top-nav a:hover,.admin-top-nav button:hover{background:rgba(255,255,255,.1)}
.content-card { border:1px solid #e3e7eb; border-radius:.7rem; background:#fff; padding:1.25rem; box-shadow:0 2px 5px rgba(15,23,42,.05); }
.content-card h2 { font-size:1.15rem; line-height:1.6rem; font-weight:700; color:#17211b; }
.summary-item { border-left:3px solid #238b80; background:#f7f9f9; padding:1rem; }
.summary-item span { display:block; font-size:.72rem; color:#64748b; }
.summary-item b { display:block; margin:.15rem 0; font-size:1.4rem; color:#17211b; }
.summary-item small { display:block; font-size:.67rem; color:#94a3b8; }
.info-note { margin-top:1.25rem; border-radius:.4rem; background:#eef7f6; padding:.8rem 1rem; font-size:.76rem; line-height:1.3rem; color:#41625f; }
.simple-input { height:2.45rem; min-width:140px; border:1px solid #cfd7df; border-radius:.4rem; background:#fff; padding:.45rem .7rem; font-size:.78rem; color:#334155; }
.simple-input:focus { border-color:#177f76; outline:none; box-shadow:0 0 0 2px rgba(23,127,118,.12); }
.simple-table-wrap { overflow-x:auto; border:1px solid #dbe1e6; }
.simple-table { width:100%; min-width:650px; border-collapse:collapse; text-align:left; }
.simple-table thead { background:#177f76; color:#fff; }
.simple-table th { padding:.7rem .75rem; font-size:.72rem; font-weight:600; letter-spacing:0; text-transform:none; }
.simple-table td { border-top:1px solid #dfe4e8; padding:.68rem .75rem; font-size:.78rem; }
.simple-table tbody tr:first-child td { border-top:0; }
.simple-table tbody tr:hover { background:#f2f8f7; }
.student-name { font-weight:500; color:#263b39; }
.student-name:hover { color:#177f76; text-decoration:underline; }
.plain-score { font-weight:600; color:#334155; }
.detail-button { display:inline-block; border:1px solid #aac9c5; border-radius:.35rem; padding:.3rem .55rem; color:#166b64; font-size:.7rem; font-weight:600; }
.detail-button:hover { background:#eaf5f3; }
.table-footer { display:flex; justify-content:space-between; gap:1rem; padding-top:.75rem; font-size:.68rem; color:#7c8998; }
.empty-row { padding:2.5rem!important; text-align:center; color:#94a3b8; }
.student-cards { display:none; }
.student-mobile-card { display:flex; align-items:center; gap:.75rem; border:1px solid #dfe4e8; border-bottom:0; padding:.75rem; color:#263b39; }
.student-mobile-card:first-child { border-radius:.45rem .45rem 0 0; }
.student-mobile-card:last-child { border-bottom:1px solid #dfe4e8; border-radius:0 0 .45rem .45rem; }
.mobile-number { display:grid; width:2rem; height:2rem; flex:none; place-items:center; border-radius:50%; background:#e9f4f2; color:#166b64; font-size:.68rem; font-weight:700; }
.mobile-student-info { min-width:0; flex:1; }
.mobile-student-info b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.76rem; }
.mobile-student-info small { display:block; margin-top:.15rem; white-space:nowrap; font-size:.63rem; color:#7c8998; }
.mobile-arrow { flex:none; font-size:1.3rem; color:#7caaa5; }
.subject-list { margin-top:1rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem 2rem; }
.subject-list li { position:relative; padding-left:1rem; font-size:.8rem; color:#334155; }
.subject-list li::before { content:'•'; position:absolute; left:0; color:#177f76; }
.section-copy { margin-top:.55rem; font-size:.8rem; line-height:1.4rem; color:#475569; }
.simple-primary-link { display:inline-block; margin-top:1rem; border-radius:.4rem; background:#177f76; padding:.6rem .9rem; color:#fff; font-size:.75rem; font-weight:600; }
.simple-primary-link:hover { background:#146e66; }
.simple-secondary-link { display:inline-block; margin:1rem 0 0 .35rem; border:1px solid #b8c5cc; border-radius:.4rem; padding:.55rem .85rem; color:#475569; font-size:.75rem; font-weight:600; }
.admin-primary,.admin-secondary { border-radius:.4rem; padding:.6rem .9rem; font-size:.75rem; font-weight:600; }
.admin-primary { background:#177f76; color:#fff; }.admin-primary:hover{background:#146e66}.admin-secondary{border:1px solid #cbd5e1;background:#fff;color:#475569}
.admin-close { font-size:1.6rem; line-height:1; color:#94a3b8; }.admin-label{display:block;font-size:.72rem;font-weight:600;color:#475569}.admin-input{display:block;width:100%;height:2.5rem;margin-top:.35rem;border:1px solid #cbd5e1;border-radius:.4rem;padding:.45rem .65rem;background:#fff;font-size:.78rem;font-weight:400}.admin-input:focus{border-color:#177f76;outline:0;box-shadow:0 0 0 2px rgba(23,127,118,.12)}
.admin-photo { width:8rem;height:8rem;border:1px solid #dbe1e6;border-radius:.55rem;background:#f1f5f9;object-fit:cover}.admin-upload{display:block;width:8rem;margin-top:.55rem;border-radius:.35rem;background:#177f76;padding:.5rem;text-align:center;color:#fff;font-size:.7rem;font-weight:600;cursor:pointer}.admin-remove-photo{width:8rem;margin-top:.35rem;font-size:.65rem;color:#dc2626}.admin-divider{margin:1.5rem 0 1rem;border-top:1px solid #e2e8f0;padding-top:1.25rem}.admin-divider h3{font-size:.9rem;font-weight:700}.admin-divider p{margin-top:.2rem;font-size:.7rem;color:#94a3b8}.admin-score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.admin-name-cell{display:flex;align-items:center;gap:.6rem}.admin-name-cell img{width:2rem;height:2rem;border-radius:.35rem;object-fit:cover}.admin-name-cell b{font-size:.75rem}.admin-actions{display:flex;justify-content:center;gap:.4rem}.admin-actions a,.admin-actions button{border:1px solid #b8c5cc;border-radius:.3rem;padding:.3rem .45rem;color:#166b64;font-size:.65rem}.admin-actions .danger{border-color:#fecaca;color:#dc2626}.admin-cards{display:none}.admin-toast{position:fixed;right:1rem;bottom:1rem;z-index:50;transform:translateY(5rem);border-radius:.4rem;background:#145a55;padding:.7rem 1rem;color:#fff;font-size:.75rem;opacity:0;transition:.2s}.admin-toast.show{transform:translateY(0);opacity:1}
.admin-textarea{display:block;width:100%;margin-top:.35rem;resize:vertical;border:1px solid #cbd5e1;border-radius:.4rem;padding:.65rem;background:#fff;font-size:.75rem;font-weight:400;line-height:1.25rem}.admin-textarea:focus{border-color:#177f76;outline:0;box-shadow:0 0 0 2px rgba(23,127,118,.12)}
.record-input-row{display:grid;grid-template-columns:160px 1fr auto;align-items:end;gap:.65rem}.record-input-row .admin-input{margin:0}.record-editor-list{display:grid;gap:.45rem;margin-top:.75rem}.record-editor-item{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:.75rem;border:1px solid #e2e8f0;border-radius:.4rem;padding:.6rem .75rem}.record-editor-item time{font-size:.68rem;font-weight:700;color:#177f76}.record-editor-item span{font-size:.73rem}.record-editor-item button{font-size:.65rem;color:#dc2626}.record-editor-empty{border:1px dashed #d5dde3;border-radius:.4rem;padding:.75rem;text-align:center;font-size:.68rem;color:#94a3b8}
.hafalan-input-row{grid-template-columns:160px 130px 1fr auto}.record-score{display:inline-block;margin-right:.25rem;border-radius:.25rem;background:#e8f4f2;padding:.15rem .35rem;color:#166b64;font-size:.65rem;font-weight:700}
.weekly-score-editor{overflow:hidden;border:1px solid #dbe1e6;border-radius:.45rem}.weekly-score-row{display:grid;grid-template-columns:minmax(160px,1.5fr) repeat(4,minmax(80px,1fr));align-items:center;gap:.65rem;border-top:1px solid #e5e9ec;padding:.65rem}.weekly-score-row:first-child{border-top:0}.weekly-score-row>b{font-size:.7rem}.weekly-score-row label span{display:none}.weekly-score-row .admin-input{margin:0;text-align:center}.weekly-score-head{background:#f2f6f5;color:#52615f;text-align:center}.weekly-score-head b:first-child{text-align:left}
.weekly-values{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}.weekly-value{border-radius:.3rem;background:#f1f5f4;padding:.25rem .4rem;font-size:.62rem;color:#52615f}.weekly-value b{color:#177f76}
.public-record-list{margin-top:1.25rem;display:grid;gap:.75rem}.public-record{border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem}.public-record h3{font-size:.82rem;font-weight:700;color:#263b39}.public-record ul{margin-top:.55rem;display:grid;gap:.35rem}.public-record li{position:relative;padding-left:1rem;font-size:.76rem;line-height:1.25rem;color:#52615f}.public-record li::before{content:'•';position:absolute;left:0;color:#177f76}
.empty-simple { margin-top:1rem; border:1px dashed #cbd5e1; border-radius:.45rem; padding:1rem; text-align:center; font-size:.75rem; color:#94a3b8; }

/* Mode gelap halaman utama */
.dark .simple-page { background:#101716; color:#dbe5e3; }
.dark .simple-header { background:#105f59; }
.dark .top-nav { background:#0c4541; }
.dark .nav-dropdown-menu{border-color:#40524f;background:#182321;color:#eef5f4}.dark .nav-dropdown-menu a:hover,.dark .nav-dropdown-menu a.current{background:#263633;color:#a7e2da}
.dark .admin-top-nav{background:#091b19}
.dark .content-card { border-color:#2b3b39; background:#182321; box-shadow:none; }
.dark .content-card h2,.dark .summary-item b { color:#edf5f3; }
.dark .summary-item { border-left-color:#4ba99f; background:#202d2b; }
.dark .summary-item span,.dark .section-copy { color:#a9bab7; }
.dark .info-note { background:#20322f; color:#b9ceca; }
.dark .simple-input,.dark .admin-input { border-color:#3b4d4a; background:#131d1b; color:#e2e8f0; }
.dark .simple-table-wrap { border-color:#344441; }
.dark .simple-table td { border-color:#344441; }
.dark .simple-table tbody tr:hover { background:#20302d; }
.dark .student-name,.dark .plain-score,.dark .subject-list li { color:#dbe5e3; }
.dark .student-mobile-card { border-color:#344441; color:#dbe5e3; }
.dark .public-record,.dark .record-editor-item{border-color:#344441;background:#182321}.dark .public-record h3,.dark .public-record li,.dark .record-editor-item span{color:#dbe5e3}.dark .weekly-value{background:#263633;color:#b9ceca}.dark .record-score{background:#29413d;color:#9ad9d1}.dark .weekly-score-head{background:#20302d;color:#b9ceca}.dark .weekly-score-row,.dark .weekly-score-editor{border-color:#344441}
.dark .mobile-number { background:#29413d; color:#9ad9d1; }
.dark .empty-simple { border-color:#465754; color:#879995; }
.dark footer { border-color:#2b3b39!important; background:#151f1d!important; color:#879995!important; }

/* Kontras teks yang konsisten untuk tema */
html:not(.dark) body{color:#111827}html:not(.dark) .content-card,html:not(.dark) .panel{color:#17211b}html:not(.dark) .text-slate-500{color:#64748b!important}html:not(.dark) .text-slate-400{color:#94a3b8!important}
.dark body{color:#f8fafc!important}.dark .panel,.dark .content-card,.dark .stat-card{color:#f8fafc}.dark .section-title,.dark .content-card h1,.dark .content-card h2,.dark .content-card h3,.dark .panel h1,.dark .panel h2,.dark .panel h3,.dark .panel b,.dark .stat-number,.dark dd{color:#f8fafc!important}.dark .text-slate-800,.dark .text-slate-700,.dark .text-slate-600{color:#e2e8f0!important}.dark .text-slate-500{color:#cbd5e1!important}.dark .text-slate-400{color:#aebdca!important}.dark .stat-label,.dark dt,.dark small,.dark .section-copy,.dark .table-footer{color:#b7c5c2!important}.dark .simple-table td,.dark .simple-table th{color:#eef5f4}.dark .simple-table tbody tr:hover{background:#22312f}.dark .simple-input,.dark .admin-input,.dark .admin-textarea,.dark select{border-color:#425451!important;background:#111c1a!important;color:#f8fafc!important}.dark select option{background:#111c1a;color:#f8fafc}.dark .subject-bar-track{background:#30413e}.dark .score-item-head{color:#f8fafc}.dark .profile-chip{color:#fff}.dark header a.bg-white,.dark header button.bg-white{border-color:#3c4d58!important;background:#172332!important;color:#fff!important}.dark .note-card{border-color:#344441;color:#f8fafc}.dark .empty-simple,.dark .record-editor-empty{border-color:#50615e;color:#b7c5c2}.dark .detail-button{border-color:#52706c;color:#a7e2da}.dark .mobile-student-info b{color:#f8fafc}

/* Halaman detail dibuat lebih tenang dan konsisten */
.app-background { background:#f3f5f7; background-image:none; }
.panel { border:1px solid #e3e7eb; border-radius:.75rem; background:#fff; box-shadow:0 2px 5px rgba(15,23,42,.05); backdrop-filter:none; }
.profile-header { border-radius:.75rem!important; background:#177f76!important; }
.stat-card { border-radius:.75rem; box-shadow:0 2px 5px rgba(15,23,42,.05); }
@media(max-width:640px){.home-theme-toggle{right:.65rem;top:.55rem;transform:none;padding:.35rem .5rem}.simple-header h1{padding-top:0;font-size:1.25rem}.header-title-line{padding-top:.75rem;padding-right:1.75rem;gap:.5rem}.header-brand-icon{width:2.25rem;height:2.25rem}.top-nav>div{padding-left:0!important;padding-right:0!important;gap:0!important}.top-nav a,.nav-dropdown>button{padding:.72rem .12rem;font-size:.7rem;letter-spacing:0}.nav-dropdown-menu{right:.35rem;width:min(210px,calc(100vw - .7rem));border-radius:0 0 .45rem .45rem}.summary-grid{gap:.6rem}.summary-item{min-width:0;padding:.75rem}.summary-item span{font-size:.62rem}.summary-item b{font-size:1.15rem}.summary-item small{font-size:.56rem;line-height:.85rem}.simple-table-wrap{display:none}.student-cards{display:block}.student-mobile-card{gap:.5rem;padding:.7rem .6rem}.mobile-number{width:1.65rem;height:1.65rem;font-size:.6rem}.mobile-student-info b{font-size:.7rem}.mobile-arrow{display:none}.subject-list{grid-template-columns:repeat(2,minmax(0,1fr))}.table-footer{flex-direction:column}.content-card{padding:1rem}.admin-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.weekly-score-head{display:none}.weekly-score-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;padding:.75rem .5rem}.weekly-score-row>b{grid-column:1/-1;font-size:.72rem}.weekly-score-row label span{display:block;margin-bottom:.25rem;text-align:center;font-size:.52rem;color:#7c8998}.weekly-score-row .admin-input{padding:.3rem;font-size:.7rem}.record-input-row{grid-template-columns:1fr}.record-editor-item{grid-template-columns:1fr auto;gap:.3rem}.record-editor-item time{grid-column:1/-1}.admin-table{display:none}.admin-cards{display:block}.admin-mobile-card{display:grid;grid-template-columns:2.6rem 1fr;gap:.65rem;border-bottom:1px solid #e2e8f0;padding:.8rem 0}.admin-mobile-card img{width:2.6rem;height:2.6rem;border-radius:.4rem;object-fit:cover}.admin-mobile-card b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.72rem}.admin-mobile-card small{display:block;margin-top:.2rem;font-size:.62rem;color:#7c8998}.admin-mobile-card .admin-actions{grid-column:2;justify-content:flex-start}}