.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:4px 0 18px}.page-heading h1{font-size:28px;margin:3px 0 5px}.page-heading p{color:var(--muted);margin:0;line-height:1.45}.eyebrow{font-size:11px;letter-spacing:.12em;color:#8ba4ff;font-weight:850}.compact-primary{min-height:44px;border:0;border-radius:12px;padding:0 14px;background:var(--blue);color:#fff;font-weight:800;white-space:nowrap}.summary-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:15px}.summary-strip>div{padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px}.summary-strip b{font-size:24px;display:block}.summary-strip span{font-size:12px;color:var(--muted)}.admin-list{display:grid;gap:9px;margin:14px 0}.admin-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:15px}.admin-row-main{min-width:0;display:grid;gap:3px}.admin-row-main>b,.admin-row-main>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-row-main small{color:var(--muted)}.meta-line{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}.role-badge{padding:4px 7px;border-radius:999px;font-weight:800}.role-badge.admin{background:#3b2533;color:#f0a6c3}.role-badge.guru_piket{background:#18372f;color:#83d4ab}.role-badge.wali_kelas{background:#1d2e50;color:#9db2ff}.row-action{border:1px solid var(--border);background:transparent;color:#fff;border-radius:999px;min-height:36px;padding:0 10px;font-size:11px;font-weight:750}.class-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.class-card{min-height:142px;padding:15px;border:1px solid var(--border);background:var(--surface);border-radius:17px;display:grid;grid-template-columns:auto 1fr;gap:11px;align-content:start}.class-card h3{margin:4px 0}.class-card p{margin:0;color:var(--muted);font-size:12px}.class-icon{width:42px;height:42px;border-radius:12px;background:var(--soft);display:grid;place-items:center;color:#9db2ff;font-weight:900}.class-stats{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--border);padding-top:11px;margin-top:3px}.class-stats b{font-size:23px}.class-stats span{color:var(--muted);font-size:12px}.admin-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.admin-action-card{min-height:112px;border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:15px;color:#fff;text-decoration:none;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.admin-action-card>span{width:34px;height:34px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:#9db2ff;margin-bottom:9px}.admin-action-card small{color:var(--muted);margin-top:3px}.search-field{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:0 12px;margin:13px 0}.search-field input{border:0;background:transparent;padding:0}.modal-backdrop{position:fixed;z-index:50;inset:0;background:#020710b8;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)}.modal-card{width:min(100%,430px);max-height:90dvh;overflow-y:auto;background:#182235;border:1px solid var(--border);border-radius:25px 25px 0 0;padding:10px 20px 28px;box-shadow:0 -20px 60px #0007}.modal-handle{width:42px;height:5px;border-radius:999px;background:#526079;margin:0 auto 17px}.modal-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.modal-heading h2{margin:0 0 4px}.modal-heading p{color:var(--muted);margin:0;line-height:1.4}.icon-button{width:40px;height:40px;border:1px solid var(--border);border-radius:50%;background:transparent;color:#fff;font-size:23px}.admin-form{margin-top:16px}.admin-form label{margin:11px 0}.form-note{padding:11px 12px;border-radius:12px;background:var(--soft);color:#bdcafa;font-size:12px;line-height:1.45}.empty-state{grid-column:1/-1;text-align:center;padding:35px 20px;border:1px dashed #40506d;border-radius:17px;color:var(--muted)}.empty-state>span{display:block;font-size:27px}.empty-state>b{display:block;color:#fff;margin:8px 0 4px}.empty-state p{margin:0;font-size:13px}.upload-dropzone{min-height:180px;border:1.5px dashed #53698e;border-radius:17px;background:#131f35;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:18px 0}.upload-dropzone>span{font-size:27px}.upload-dropzone small{color:var(--muted)}.link-button{display:grid;place-items:center;text-decoration:none}.selected-person{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--border);border-radius:14px;margin-top:16px}.selected-person>div:last-child{display:grid}.selected-person small{color:var(--muted)}@media(min-width:760px){.modal-backdrop{align-items:center}.modal-card{border-radius:25px;max-height:calc(100dvh - 80px)}}@media(max-width:370px){.stacked-mobile{display:grid}.page-heading .compact-primary{width:100%}.class-grid{grid-template-columns:1fr}.admin-row{grid-template-columns:auto 1fr}.admin-row .row-action{grid-column:1/-1;width:100%}}.admin-quick-grid{display:grid;gap:9px;margin:14px 0}.admin-quick-grid button{min-height:82px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;text-align:left;padding:13px;border:1px solid var(--border);border-radius:15px;background:var(--surface);color:#fff}.admin-quick-grid button>span{grid-row:1/3;width:42px;height:42px;border-radius:12px;background:var(--soft);display:grid;place-items:center;color:#9db2ff;font-size:20px}.admin-quick-grid button>b{align-self:end}.admin-quick-grid button>small{align-self:start;color:var(--muted);margin-top:2px}:root{font-family:Inter,system-ui,sans-serif;color:#f5f7fb;background:#0f1726;color-scheme:dark;--surface: #182235;--border: #2b3850;--muted: #aab2c2;--blue: #4665c7;--soft: #1d2e50}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 95% 5%,#3b2533,transparent 32%),#0f1726}button,input,select{font:inherit}.app,.auth{width:min(100%,430px);min-height:100dvh;margin:auto;background:#0f1726}.auth{padding:28px 20px;display:flex;flex-direction:column;justify-content:center}.auth-art{height:180px;border-radius:24px;background:linear-gradient(145deg,#3756b3,#29428f);display:grid;place-items:center;margin-bottom:24px;overflow:hidden}.mark{width:48px;height:48px;border-radius:14px;background:#3756b3;color:#fff;display:grid;place-items:center;font-weight:900}.auth-art .mark{background:#fff;color:#3756b3;width:72px;height:72px;border-radius:22px;font-size:26px}.auth h1,.title h1{margin:0 0 6px}.auth p,.title p{color:var(--muted);margin:0 0 20px}label{display:grid;gap:7px;font-size:13px;font-weight:700;margin:12px 0}input,select{width:100%;min-height:48px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:#fff;padding:0 13px}.primary,.secondary,.action{min-height:48px;border-radius:12px;padding:0 16px;font-weight:800}.primary{border:0;background:var(--blue);color:#fff;width:100%;margin:10px 0}.secondary{border:1px solid var(--border);background:var(--surface);color:#fff;width:100%;margin:6px 0}.error,.notice{padding:12px;border-radius:12px;margin:10px 0;background:#3c2528;color:#ffb8b1}.notice{background:var(--soft);color:#cdd8ff}header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;position:sticky;top:0;background:#0f1726f0;backdrop-filter:blur(12px);z-index:5}.brand{display:flex;gap:10px;align-items:center}.brand div:last-child{display:grid}.brand small{color:var(--muted);text-transform:capitalize}.avatar{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#3b2533;color:#fff}.content{padding:4px 18px 100px}.hero{background:#3756b3;border-radius:22px;padding:22px;overflow:hidden}.hero h1{font-size:27px;margin:7px 0}.hero p{color:#dbe3ff}.hero-actions{display:flex;gap:8px}.hero-actions button{min-height:44px;border:0;border-radius:12px;padding:0 14px;font-weight:800}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.stat{min-height:112px;border-radius:18px;padding:16px;border:1px solid var(--border);background:var(--surface)}.stat b{font-size:30px;display:block;margin-top:18px}.stat span{color:var(--muted)}.stat.green{background:#18372f}.stat.orange{background:#3d2c24}.stat.blue{background:#1d2e50}.stat.pink{background:#3b2533}nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:min(100%,430px);height:76px;background:#182235;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,1fr);z-index:10}nav button{border:0;background:transparent;color:#8d98ab;display:grid;place-items:center;font-size:11px;padding:8px}nav button span{font-size:20px}nav button.active{color:#8ba4ff}.title{margin:5px 0 16px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.action{display:grid;place-items:center;text-decoration:none;background:var(--surface);color:#fff;border:1px solid var(--border)}.list{display:grid;gap:9px;margin:14px 0}.student{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px;background:var(--surface);border:1px solid var(--border);border-radius:14px}.student>div:nth-child(2),.student>div:only-child{display:grid}.student small{color:var(--muted)}.student button{border:1px solid var(--border);background:transparent;color:#fff;border-radius:999px;padding:8px 12px}.initial{width:42px;height:42px;border-radius:12px;background:var(--soft);display:grid!important;place-items:center;color:#8ba4ff;font-weight:900}.chip{padding:7px 10px;border-radius:999px;background:var(--soft);font-size:12px}.camera{width:100%;height:360px;object-fit:cover;border-radius:20px;background:#080d16;border:1px solid var(--border)}.denied{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px 20px;margin-top:20px}.denied>div{font-size:34px}.back{align-self:flex-start;border:0;background:transparent;color:#9eb2ff;margin-bottom:12px}@media(min-width:760px){body{padding:30px}.app,.auth{border-radius:30px;overflow:hidden;min-height:calc(100dvh - 60px);box-shadow:0 30px 70px #0008}nav{bottom:30px;border-radius:0 0 30px 30px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}