/* Tema utama aplikasi: warna, kedalaman, animasi, dan penyesuaian tema gelap. */
:root{--green:#087f65;--green2:#10a37f;--ink:#14251f;--muted:#687a71;--line:#dfebe4;--paper:#f3f7f4;--white:#fff;--shadow:0 18px 55px rgba(17,62,43,.09);--surface:#fff;--surface-soft:#f2f8f4;--accent-soft:#e4f5eb;--border:var(--line);color-scheme:light}
html{scroll-behavior:smooth}body{background:radial-gradient(ellipse at 5% 0%,rgba(17,163,127,.08),transparent 34rem),radial-gradient(ellipse at 95% 15%,rgba(216,181,92,.08),transparent 25rem),var(--paper);transition:background .25s,color .25s}.top{position:sticky;top:0;z-index:20;min-height:72px;background:rgba(255,255,255,.83);backdrop-filter:blur(16px);box-shadow:0 3px 18px rgba(20,50,35,.04);padding-left:max(20px,calc((100% - 1160px)/2));padding-right:max(20px,calc((100% - 1160px)/2))}.brand{letter-spacing:-.02em}.seal{width:42px;height:42px;background:linear-gradient(145deg,#e5f7ec,#cfece0);box-shadow:inset 0 0 0 1px #cae6d7;font-size:21px}.nav{gap:5px}.nav a,.nav button{transition:background .18s,color .18s,transform .18s}.nav a:hover,.nav button:hover{background:#eaf4ee;color:#087f65}.nav .primary{box-shadow:0 6px 15px #087f6533}.nav .primary:hover{background:#05664f;color:#fff;transform:translateY(-1px)}.theme-toggle{border:1px solid var(--line);background:var(--surface);color:var(--ink);width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;cursor:pointer;transition:.2s}.theme-toggle:hover{border-color:var(--green2);transform:rotate(-10deg)}
main{max-width:1160px;padding-top:42px}.hero{isolation:isolate;min-height:270px;padding:48px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(115deg,#073f36 0%,#08745b 58%,#0a8a68 100%);box-shadow:0 24px 60px rgba(5,74,53,.2)}.hero:before{content:"";position:absolute;z-index:-1;width:400px;height:400px;right:8%;top:-57%;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.12),rgba(255,255,255,.015) 66%,transparent 67%);border:1px solid #ffffff20;animation:drift 18s ease-in-out infinite alternate}.hero:after{right:-110px;top:-190px}.hero h1{font-size:clamp(36px,5.3vw,58px);letter-spacing:-.035em}.hero p{font-size:15px}.hero-year{right:50px;bottom:22px;font-size:64px}.eyebrow{color:#eed49c}.grid{gap:18px}.card{background:var(--surface);border-color:var(--border);border-radius:20px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s}.card:hover{border-color:#c5e3d3;box-shadow:0 22px 58px rgba(17,62,43,.12)}.card h2{letter-spacing:-.025em}.sub,.help{color:var(--muted)}.timebox{background:linear-gradient(145deg,#f0f8f3,#e8f4ec);border:1px solid #e5f0e8;transition:transform .2s}.timebox:hover{transform:translateY(-3px)}.timebox strong{font-variant-numeric:tabular-nums;color:#087f65}.count-label{font-size:10px;letter-spacing:.13em}.btn{background:linear-gradient(135deg,#0a8064,#07684f);box-shadow:0 6px 16px rgba(8,127,101,.18);transition:transform .16s,box-shadow .16s,filter .16s}.btn:hover{background:linear-gradient(135deg,#08745b,#055843);transform:translateY(-1px);box-shadow:0 9px 22px rgba(8,127,101,.25)}.btn:active{transform:translateY(0) scale(.98)}.btn.secondary{background:#eaf4ed;box-shadow:none}.input{background:var(--surface);border-color:#d7e3dc;border-radius:11px;transition:border-color .16s,box-shadow .16s,background .2s}.input:focus{border-color:#0b9874;box-shadow:0 0 0 4px rgba(16,163,127,.13)}.alert{border:1px solid transparent;border-radius:13px;animation:rise .3s ease}.alert.success{background:#e7f7ec;border-color:#c8ebd4;color:#185b35}.alert.error{background:#fff1ef;border-color:#f3d2cd;color:#87352e}.note{background:var(--surface-soft);border:1px solid var(--border);border-radius:13px}.steps li{padding:7px 0}.panel-head h1{letter-spacing:-.035em}.table-wrap{border-radius:15px;border-color:var(--border)}th{background:var(--surface-soft);color:var(--muted)}td{border-color:var(--border)}tbody tr{transition:background .15s}tbody tr:hover{background:rgba(12,142,103,.045)}.small-input{background:var(--surface);color:var(--ink);border-color:var(--border)}.status{background:var(--accent-soft);color:#176545}.private-result{background:var(--surface-soft);border:1px solid var(--border);border-radius:15px}.footer{border-color:var(--border)}.field-progress{height:5px;background:#e8f1eb;border-radius:99px;overflow:hidden;margin:-7px 0 17px}.field-progress span{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#087f65,#e0bd69);transition:width .25s}.photo-preview-wrap{display:none;align-items:center;gap:12px;margin-top:10px;padding:10px;background:var(--surface-soft);border:1px dashed var(--border);border-radius:12px}.photo-preview-wrap.is-visible{display:flex}.photo-preview{width:56px;height:68px;border-radius:9px;object-fit:cover;background:#eaf0ec}.photo-preview-caption{font-size:12px;color:var(--muted)}.password-wrap{display:flex;position:relative}.password-wrap .input{padding-right:48px}.password-eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);padding:7px;cursor:pointer;border-radius:8px}.password-eye:hover{background:var(--surface-soft);color:var(--green)}.table-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 13px}.table-tools .input{max-width:360px}.table-tools .filter-select{max-width:220px}.table-count{margin-left:auto;color:var(--muted);font-size:12px;font-weight:700}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 17px}.stat-card{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}.stat-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--green);font-size:17px}.stat-card strong{display:block;font-size:21px;line-height:1.1;font-variant-numeric:tabular-nums}.stat-card span{font-size:11px;color:var(--muted)}.no-results{display:none;text-align:center;padding:25px;color:var(--muted)}.no-results.is-visible{display:table-row}.nav form button{font:inherit}.form-progress-label{font-size:11px;color:var(--muted);margin:-11px 0 13px}.form-progress-label b{color:var(--green)}
.card,.hero{animation:rise .45s both}.grid .card:nth-child(2){animation-delay:.08s}@keyframes rise{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-16px,19px) scale(1.05)}}
.setup-shell{position:relative}.setup-shell .theme-toggle{position:absolute;right:14px;top:14px}.setup-shell input{background:var(--surface);color:var(--ink);border-color:var(--border);border-radius:11px}.setup-shell .btn{background:linear-gradient(135deg,#0a8064,#07684f)}.setup-shell .ok{background:#e7f7ec;color:#185b35;border:1px solid #c8ebd4}.setup-shell .msg{background:#fff1ef;color:#87352e;border:1px solid #f3d2cd}
.nav button.theme-toggle{border:1px solid var(--border);background:var(--surface);color:var(--ink);width:38px;height:38px;padding:0}.setup-shell{background:var(--surface);color:var(--ink);border-color:var(--border)}.setup-shell .muted{color:var(--muted)}.setup-shell a{color:var(--green2)}html[data-theme="dark"] .setup-shell .ok{background:#173a29;color:#b6e6c7;border-color:#285b3e}html[data-theme="dark"] .setup-shell .msg{background:#402522;color:#ffc1b8;border-color:#68403a}
html[data-theme="dark"]{color-scheme:dark;--ink:#e8f1ec;--muted:#a7b8af;--line:#2a4037;--border:#2a4037;--paper:#0d1713;--white:#14211b;--surface:#14211b;--surface-soft:#1a2b23;--accent-soft:#17392b;--shadow:0 18px 50px rgba(0,0,0,.2)}html[data-theme="dark"] body{background:radial-gradient(ellipse at 5% 0%,rgba(16,163,127,.12),transparent 34rem),radial-gradient(ellipse at 95% 15%,rgba(216,181,92,.06),transparent 25rem),var(--paper)}html[data-theme="dark"] .top{background:rgba(15,27,21,.88);border-color:var(--border)}html[data-theme="dark"] .nav a,html[data-theme="dark"] .nav button{color:#c9d8d0}html[data-theme="dark"] .nav a:hover,html[data-theme="dark"] .nav button:hover{background:#20352a;color:#85d4b2}html[data-theme="dark"] .nav .primary{color:#fff}html[data-theme="dark"] .theme-toggle{background:var(--surface);border-color:var(--border);color:#f0d691}html[data-theme="dark"] .card{background:var(--surface);border-color:var(--border)}html[data-theme="dark"] .card:hover{border-color:#315747}html[data-theme="dark"] .input,html[data-theme="dark"] .small-input{background:#101c16;color:var(--ink);border-color:#344a3e}html[data-theme="dark"] .input::placeholder,html[data-theme="dark"] .small-input::placeholder{color:#83958b}html[data-theme="dark"] .timebox{background:linear-gradient(145deg,#1c3025,#17281f);border-color:#2c4335}html[data-theme="dark"] .timebox strong{color:#78d5ac}html[data-theme="dark"] .btn.secondary{background:#20372b;color:#a7e4c4}html[data-theme="dark"] .note,html[data-theme="dark"] .private-result{background:var(--surface-soft);border-color:var(--border);color:#c8d9ce}html[data-theme="dark"] .alert.success{background:#173a29;border-color:#285b3e;color:#b6e6c7}html[data-theme="dark"] .alert.error{background:#402522;border-color:#68403a;color:#ffc1b8}html[data-theme="dark"] th{background:#1a2b23;color:#c3d2c9}html[data-theme="dark"] tbody tr:hover{background:#1a3025}html[data-theme="dark"] .status{background:#1d4632;color:#b6e5c6}html[data-theme="dark"] .stat-icon{background:#1d4632;color:#9fe0bc}html[data-theme="dark"] .field-progress{background:#273b30}html[data-theme="dark"] .photo-preview-wrap{background:var(--surface-soft);border-color:var(--border)}
@media(max-width:760px){.top{padding:9px 14px;align-items:center}.nav{justify-content:flex-end;gap:2px}.nav a,.nav button{font-size:11px;padding:8px}.theme-toggle{width:34px;height:34px}.hero{padding:32px 23px;min-height:245px}.hero h1{font-size:clamp(34px,8vw,46px)}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.table-tools .input{max-width:none;flex:1 1 100%}.table-tools .filter-select{max-width:none;flex:1}.table-count{margin-left:0}}
@media(max-width:410px){.top{align-items:flex-start}.nav{justify-content:flex-start}.stats-grid{gap:8px}.stat-card{padding:12px 10px}.stat-icon{width:34px;height:34px}.stat-card strong{font-size:18px}.hero-year{font-size:38px}.table-tools .filter-select{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.hero{animation:none!important}*,*:before,*:after{transition:none!important;animation-duration:.01ms!important}}
.brand-logo{width:46px;height:46px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 5px #153b2720)}.nav button.theme-toggle{border:1px solid var(--border);background:var(--surface);color:var(--ink);width:38px;height:38px;padding:0}.setup-shell{background:var(--surface);color:var(--ink);border-color:var(--border)}.setup-shell .muted{color:var(--muted)}.setup-shell input{background:var(--surface);color:var(--ink);border-color:var(--border);border-radius:11px}.setup-shell .btn{background:linear-gradient(135deg,#0a8064,#07684f)}.setup-shell .theme-toggle{position:absolute;right:14px;top:14px}.setup-shell a{color:var(--green2)}.setup-logo{display:block;width:112px;height:126px;object-fit:contain;margin:0 auto 15px}.setup-shell .ok{background:#e7f7ec;color:#185b35;border:1px solid #c8ebd4}.setup-shell .msg{background:#fff1ef;color:#87352e;border:1px solid #f3d2cd}html[data-theme="dark"] .setup-shell .ok{background:#173a29;color:#b6e6c7;border-color:#285b3e}html[data-theme="dark"] .setup-shell .msg{background:#402522;color:#ffc1b8;border-color:#68403a}
.brand-logo{width:36px;height:38px}

/* Kartu formulir dashboard dibuka hanya saat tombolnya dipilih. */
.dashboard-form-card { margin-bottom: 17px; overflow: hidden; }
.dashboard-form-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; padding: 4px 2px; }
.dashboard-form-summary::-webkit-details-marker { display: none; }
.dashboard-form-summary strong { display: block; color: var(--ink, #17332c); font-size: 18px; }
.dashboard-form-summary small { display: block; margin-top: 6px; color: var(--muted, #687a73); font-size: 13px; line-height: 1.6; }
.dashboard-form-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 10px; background: #0d6654; color: #fff; font-weight: 700; font-size: 13px; }
.dashboard-form-action span { font-size: 18px; line-height: 1; }
.dashboard-form-card[open] .dashboard-form-action span { transform: rotate(45deg); }
.dashboard-form-content { border-top: 1px solid rgba(100,130,118,.18); margin-top: 17px; padding-top: 18px; }
.dashboard-form-content form { margin: 0; }
@media (max-width: 560px) { .dashboard-form-summary { align-items: flex-start; flex-direction: column; gap: 13px; } .dashboard-form-action { width: 100%; justify-content: center; box-sizing: border-box; } }
/* Kontrol paginasi menjaga tabel murid tetap ringkas. */
.page-size-control { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.page-size-control .input { width: auto; min-width: 76px; padding: 9px 30px 9px 11px; }
.student-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding-top: 15px; color: var(--muted); font-size: 12px; }
.student-pagination[hidden] { display: none; }
.student-pagination .btn { padding: 9px 13px; font-size: 12px; }
.student-pagination .btn:disabled { opacity: .48; cursor: not-allowed; transform: none; }
@media (max-width: 560px) { .page-size-control { flex: 1 1 100%; justify-content: space-between; } .student-pagination { gap: 8px; } .student-pagination span { order: -1; flex: 1 1 100%; text-align: center; } }