:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --text:#132238;
  --muted:#69778d;
  --line:#e3e8f0;
  --line-strong:#d3dae6;
  --primary:#173f73;
  --primary-strong:#0f2e58;
  --primary-soft:#eaf1fb;
  --accent:#c59a4a;
  --success:#16734b;
  --success-soft:#e8f7ef;
  --warning:#9a5c08;
  --warning-soft:#fff5df;
  --danger:#b02d25;
  --danger-soft:#fff0ee;
  --shadow-sm:0 1px 2px rgba(18,35,58,.04),0 8px 24px rgba(18,35,58,.05);
  --shadow-md:0 18px 45px rgba(18,35,58,.10);
  --radius:18px;
  --radius-sm:12px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:none;color:var(--primary-strong)}
input,select,textarea,button{font:inherit}
input,select,textarea{
  width:100%;min-height:44px;border:1px solid var(--line-strong);border-radius:11px;padding:10px 12px;
  background:#fff;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s,background .2s
}
input:hover,select:hover,textarea:hover{border-color:#b9c5d5}
input:focus,select:focus,textarea:focus{border-color:#6f8fb8;box-shadow:0 0 0 4px rgba(31,79,132,.10)}
input[type=checkbox]{min-height:0;accent-color:var(--primary)}
textarea{resize:vertical}
label{display:flex;flex-direction:column;gap:7px;font-size:.86rem;font-weight:700;color:#34445a}
small,.small{font-size:.8rem;color:var(--muted)}
.topbar{
  height:68px;background:rgba(15,40,76,.96);color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:0 30px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:30;
  backdrop-filter:blur(14px)
}
.topbar>div{display:flex;align-items:center;gap:12px}
.topbar strong{font-size:.98rem;letter-spacing:.01em}
.topbar .muted{color:#becbe0;font-size:.9rem;padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}
.topbar nav{display:flex;align-items:center;gap:6px}
.topbar nav a{color:#e7eef8;padding:8px 11px;border-radius:9px;font-size:.88rem}
.topbar nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.container{width:min(1580px,calc(100% - 40px));margin:28px auto 56px}
.container.narrow{width:min(880px,calc(100% - 28px))}
.full-main{width:100%;height:100vh}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow-sm)
}
.panel h2{margin:0 0 14px;font-size:1.06rem}
.alert{padding:13px 16px;border-radius:12px;margin-bottom:18px;border:1px solid;font-weight:650;box-shadow:var(--shadow-sm)}
.alert.success{background:var(--success-soft);border-color:#b9e0ca;color:#135b3c}
.alert.error{background:var(--danger-soft);border-color:#efc3be;color:#8f241d}
.notice{background:#edf4fe;border:1px solid #c9daf0;padding:14px 16px;border-radius:12px;margin-bottom:18px;color:#274667}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid transparent;
  border-radius:11px;padding:9px 14px;cursor:pointer;font-weight:750;font-size:.87rem;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s;color:inherit
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(23,63,115,.16)}
.btn.primary:hover{background:var(--primary-strong);color:#fff}
.btn.secondary{background:#eef2f7;color:#2c405b;border-color:#e0e6ee}
.btn.outline{background:#fff;color:var(--primary);border-color:#cbd7e6}
.btn.outline:hover{background:var(--primary-soft);border-color:#aebfd5}
.btn.success-btn{background:var(--success-soft);color:#125d3d;border-color:#c4e6d2}
.btn.warning-btn{background:var(--warning-soft);color:#855209;border-color:#f2dba9}
.btn.danger-btn{background:var(--danger-soft);color:#972b23;border-color:#efcbc7}
.icon-btn span{font-size:1.08rem;line-height:1}
.full-btn{width:100%}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.form-grid>.btn{align-self:end}
.check{flex-direction:row;align-items:center;gap:9px;min-height:44px}
.check input{width:auto}
.max-700{max-width:700px}
.login-wrap{min-height:calc(100vh - 140px);display:grid;place-items:center}
.login-panel{width:min(900px,100%)}
.login-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.login-columns form{padding:8px}
.login-columns label,.login-panel>form label{margin-bottom:14px}
.admin-shell{display:grid;grid-template-columns:248px minmax(0,1fr);gap:24px;align-items:start}
.sidebar{
  position:sticky;top:92px;background:linear-gradient(180deg,#12325f 0%,#102a50 100%);border-radius:20px;
  padding:16px 12px;color:#fff;box-shadow:0 18px 40px rgba(16,42,80,.16);max-height:calc(100vh - 112px);overflow:auto
}
.sidebar h3{padding:7px 12px 15px;margin:0;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:#aebfda}
.sidebar a{display:block;color:#dce6f4;padding:10px 12px;border-radius:11px;margin:3px 0;font-size:.89rem;font-weight:600;transition:background .18s,color .18s,transform .18s}
.sidebar a.active{background:#fff;color:#173f73;box-shadow:0 7px 18px rgba(0,0,0,.12)}
.sidebar a:hover:not(.active){background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}
.admin-content{min-width:0}
.admin-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:16px}
.admin-page-head h1{margin:2px 0 5px;font-size:clamp(1.55rem,2.4vw,2.12rem);line-height:1.16;letter-spacing:-.025em;color:#10243d}
.admin-page-head p{margin:0;color:var(--muted);max-width:760px;font-size:.91rem}
.eyebrow{display:block;color:var(--accent);text-transform:uppercase;letter-spacing:.13em;font-weight:800;font-size:.7rem}
.bulk-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;min-width:420px}
.bulk-upload-form{display:flex;align-items:center;gap:9px}
.file-picker{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:42px;padding:0 13px;border:1px dashed #aebdd0;border-radius:11px;background:#fff;cursor:pointer;color:#44566d;font-weight:700;font-size:.84rem;transition:background .16s,border-color .16s}
.file-picker:hover{background:#f6f9fd;border-color:#7892b3}
.file-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:100px}
.file-picker.has-file{border-style:solid;border-color:#89a6c8;background:#eef4fb;color:#173f73}
.template-guide{margin:0 0 18px;padding:11px 14px;border:1px solid #d8e2ef;border-radius:12px;background:#f8fbff;color:#53657b;font-size:.82rem}
.template-guide strong{color:#2c405a}
.two-col{display:grid;grid-template-columns:minmax(350px,460px) minmax(0,1fr);gap:20px;align-items:start}
.table-wrap{overflow:auto;padding:0}
.table-wrap table{min-width:640px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem}
th,td{text-align:left;border-bottom:1px solid var(--line);padding:13px 15px;vertical-align:top}
th{background:#f7f9fc;color:#526078;font-size:.74rem;text-transform:uppercase;letter-spacing:.055em;font-weight:800;position:sticky;top:0;z-index:2}
th:first-child{border-top-left-radius:var(--radius)}
th:last-child{border-top-right-radius:var(--radius)}
tbody tr{transition:background .15s}
tbody tr:hover{background:#fafcff}
tr:last-child td{border-bottom:0}
td a{font-weight:750}
.inline{display:inline}
.link-btn{border:0;background:transparent;color:var(--primary);cursor:pointer;padding:0 5px;font-weight:750}
.danger-text{color:var(--danger)}
details pre{white-space:pre-wrap;max-width:430px;font-size:.74rem;background:#f7f9fc;padding:10px;border-radius:8px;border:1px solid var(--line)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;right:-18px;top:-18px;width:72px;height:72px;border-radius:50%;background:var(--primary-soft)}
.stat-card strong{font-size:2rem;color:var(--primary);letter-spacing:-.04em;z-index:1}
.stat-card span{color:var(--muted);font-weight:650;z-index:1}
.page-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}
.page-head h1{margin:0}
.page-head p{margin:5px 0 0;color:var(--muted)}
.date-filter{width:210px}
.agenda-list{display:flex;flex-direction:column;gap:13px}
.agenda-card{display:grid;grid-template-columns:150px minmax(260px,1fr) minmax(270px,430px);background:#fff;border:1px solid var(--line);border-radius:16px;overflow:visible;box-shadow:var(--shadow-sm)}
.agenda-card.break{background:#eef6ff}
.agenda-time{padding:18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.agenda-time span{font-size:.84rem;color:var(--muted)}
.agenda-main{padding:16px 18px}
.agenda-main h2{margin:0 0 5px;font-size:1.05rem}
.agenda-main p{margin:4px 0}
.status-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:9px;font-size:.85rem}
.status-pill{padding:5px 9px;border-radius:999px;background:#edf0f4;font-weight:800}
.status-pill.present{background:#dff4e8;color:#125d38}
.status-pill.late{background:#ffead2;color:#8a4c00}
.status-pill.not_arrived{background:#fff2c9;color:#7d5700}
.status-pill.absent{background:#ffe0dd;color:#9c241b}
.status-pill.special{background:#e8e3ff;color:#4c3491}
.agenda-actions{padding:12px;border-left:1px solid var(--line);display:flex;gap:7px;flex-wrap:wrap;align-items:flex-start}
.agenda-actions details{position:relative}
.agenda-actions summary{list-style:none}
.agenda-actions summary::-webkit-details-marker{display:none}
.mini-form{position:absolute;z-index:8;right:0;top:46px;width:270px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:10px}
.action-box{margin:0}
.agenda-locked{display:grid;place-items:center;color:var(--muted);border-left:1px solid var(--line);font-size:.88rem}
.empty{text-align:center;color:var(--muted);padding:32px}
.compact-body{overflow:hidden;background:#0b1730}
.principal-screen{--principal-cols:6;--principal-rows:6;height:100vh;display:grid;grid-template-rows:auto 1fr 22px;gap:6px;padding:6px 10px 4px;color:#fff;background:#0b1730}
.principal-head{display:grid;grid-template-columns:minmax(180px,1fr) auto auto 60px;align-items:center;gap:10px}
.principal-head h1{font-size:1rem;margin:0;line-height:1.1}
.principal-head p{margin:2px 0 0;color:#aebbd0;font-size:.72rem}
.principal-history{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.principal-history select,.principal-realtime{height:32px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.10);color:#fff;padding:0 10px;font:inherit;font-size:.70rem;font-weight:700;outline:none}
.principal-history select{min-width:178px;max-width:320px;cursor:pointer}.principal-history select:disabled{opacity:.48;cursor:not-allowed}.principal-history select option{color:#172033;background:#fff}.principal-realtime{cursor:pointer;white-space:nowrap}.principal-realtime:hover{background:rgba(255,255,255,.18)}
.principal-clock{text-align:right;display:flex;flex-direction:column;gap:2px}
.principal-clock strong{font-size:.95rem;line-height:1.05}
.principal-clock span{color:#b9c5d8;font-size:.72rem;line-height:1.05}
.logout-small{color:#fff;text-align:right;font-size:.74rem}
.principal-grid{min-height:0;height:100%;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.98fr) minmax(0,.98fr);gap:10px;align-items:stretch;overflow:hidden}
.principal-section{min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:30px 1fr;gap:6px;padding:7px;border:3px solid rgba(255,255,255,.20);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.16);overflow:hidden}
.principal-section-x{border-color:rgba(96,165,250,.68);background:linear-gradient(180deg,rgba(37,99,235,.18),rgba(8,29,58,.72));padding:6px}
.principal-section-xi{border-color:rgba(45,212,191,.62);background:linear-gradient(180deg,rgba(13,148,136,.18),rgba(6,40,55,.74))}
.principal-section-xii{border-color:rgba(167,139,250,.64);background:linear-gradient(180deg,rgba(109,40,217,.18),rgba(34,22,68,.76))}
.principal-section-head{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:30px;padding:0 10px;border-radius:10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.10);color:#f4f8ff;text-transform:uppercase}
.principal-section-x .principal-section-head{background:linear-gradient(135deg,rgba(59,130,246,.32),rgba(37,99,235,.14));border-color:rgba(147,197,253,.20)}
.principal-section-xi .principal-section-head{background:linear-gradient(135deg,rgba(20,184,166,.30),rgba(13,148,136,.14));border-color:rgba(153,246,228,.18)}
.principal-section-xii .principal-section-head{background:linear-gradient(135deg,rgba(139,92,246,.30),rgba(109,40,217,.14));border-color:rgba(196,181,253,.18)}
.principal-section-head strong{font-size:.78rem;font-weight:950;letter-spacing:.08em;white-space:nowrap}
.principal-section-head small{font-size:.56rem;font-weight:800;color:rgba(255,255,255,.70);letter-spacing:.02em;white-space:nowrap}
.principal-section-grid{min-height:0;height:100%;display:grid;grid-template-columns:repeat(var(--section-cols),minmax(0,1fr));grid-template-rows:repeat(var(--section-rows),minmax(0,1fr));gap:5px;align-content:stretch;overflow:hidden}
.principal-card{min-width:0;min-height:0;border-radius:11px;padding:5px 6px;background:#26344d;border:1px solid rgba(255,255,255,.12);display:grid;grid-template-rows:auto 1fr auto auto;align-items:center;gap:3px;overflow:hidden}
.pc-class{display:flex;align-items:center;justify-content:center;min-width:0;text-align:center}
.pc-class strong{font-size:.96rem;line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:.01em}
.pc-codes{display:flex;align-items:center;justify-content:center;gap:4px;font-weight:900;font-size:.82rem;line-height:1;min-width:0}
.pc-codes span{background:rgba(255,255,255,.13);padding:3px 5px;border-radius:6px;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.principal-section-x .principal-section-grid{gap:4px}
.principal-section-x .pc-codes{width:100%;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.principal-section-x .pc-codes span{width:92%;max-width:92%;padding:4px 7px}
.principal-section-x .pc-teacher{font-size:.88rem}
.principal-section-x .pc-subject{font-size:.78rem}
.pc-status{text-align:center;font-weight:900;line-height:1.05;text-transform:uppercase;display:flex;align-items:center;justify-content:center;min-width:0;width:100%}
.pc-status strong{font-size:.61rem;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}
.pc-task{appearance:none;justify-self:center;width:max-content;max-width:100%;border:0;background:rgba(255,255,255,.13);border-radius:6px;padding:2px 6px;text-align:center;font:inherit;font-size:.48rem;color:rgba(255,255,255,.96);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:900;letter-spacing:.03em;text-transform:uppercase;cursor:pointer}.pc-task:hover,.pc-task:focus-visible{background:rgba(255,255,255,.22);outline:2px solid rgba(255,255,255,.42);outline-offset:1px}
.section-rows-4 .principal-card{padding:6px 7px;gap:4px}.section-rows-4 .pc-class strong{font-size:1.02rem}.section-rows-4 .pc-codes{font-size:.88rem}.section-rows-4 .pc-status strong{font-size:.64rem}
.section-rows-5 .principal-card{padding:5px 6px}.section-rows-5 .pc-class strong{font-size:.98rem}.section-rows-5 .pc-codes{font-size:.84rem}
.section-rows-6 .principal-card,.section-rows-7 .principal-card{padding:4px 5px;gap:2px}.section-rows-6 .pc-class strong,.section-rows-7 .pc-class strong{font-size:.90rem}.section-rows-6 .pc-codes,.section-rows-7 .pc-codes{font-size:.77rem;gap:3px}.section-rows-6 .pc-codes span,.section-rows-7 .pc-codes span{padding:3px 4px}.section-rows-6 .pc-status strong,.section-rows-7 .pc-status strong{font-size:.56rem}.section-rows-6 .pc-task,.section-rows-7 .pc-task{font-size:.45rem;padding:2px 5px}
.state-present{background:#11603b}.state-late{background:#9a5704}.state-not_arrived{background:#84630b}.state-absent{background:#8c251e}.state-unconfirmed{background:#3c4658}.state-break{background:#155582}.state-special{background:#513b88}.state-finished{background:#26344d}
.principal-footer{display:flex;justify-content:space-between;align-items:end;color:#9eacc2;font-size:.63rem}
.principal-footer .ok{color:#80d6a5}.principal-footer .bad{color:#ff9d95}
.principal-task-tooltip{position:fixed;z-index:9999;min-width:220px;max-height:min(46vh,340px);overflow:auto;padding:10px 12px;border:1px solid rgba(128,214,165,.58);border-radius:10px;background:rgba(7,18,38,.98);box-shadow:0 14px 36px rgba(0,0,0,.38);color:#fff;font-size:.76rem;font-weight:650;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:auto;user-select:text;-webkit-user-select:text;cursor:text}.principal-task-tooltip[hidden]{display:none!important}
@media(max-width:1240px){
  .admin-page-head{flex-direction:column}.bulk-actions{min-width:0;justify-content:flex-start}
  .two-col{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}
  .compact-body{overflow:auto}.principal-screen{height:auto;min-height:100vh}
  .principal-head{grid-template-columns:minmax(160px,1fr) auto auto 58px}.principal-history select{min-width:152px;max-width:240px}
  .principal-grid{gap:7px}.principal-section{padding:6px;gap:5px}.principal-section-grid{gap:4px}
}
@media(max-width:880px){
  .principal-screen{grid-template-rows:auto 1fr 22px}.principal-head{grid-template-columns:1fr auto;gap:8px}.principal-history{grid-column:1/-1;grid-row:2;justify-content:flex-start}.principal-clock{grid-column:2;grid-row:1}.logout-small{grid-column:2;grid-row:2;align-self:center}.principal-history select{flex:1;min-width:0;max-width:none}
  .principal-grid{grid-template-columns:1fr;grid-template-rows:auto;overflow:auto;height:auto}.principal-section{height:auto}.principal-section-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:auto;overflow:visible}.principal-card{min-height:88px}
  .container{width:min(100% - 22px,1580px);margin-top:16px}.topbar{padding:0 14px}.topbar .muted{display:none}
  .admin-shell{grid-template-columns:1fr}.sidebar{position:static;display:flex;overflow:auto;gap:4px;max-height:none;border-radius:15px;padding:8px}.sidebar h3{display:none}.sidebar a{white-space:nowrap;margin:0}
  .bulk-actions,.bulk-upload-form{width:100%}.bulk-upload-form{flex-wrap:wrap}.file-picker{flex:1}.bulk-upload-form .btn{flex:1}
  .form-grid,.login-columns{grid-template-columns:1fr}.form-grid .full{grid-column:auto}
  .agenda-card{grid-template-columns:120px 1fr}.agenda-actions,.agenda-locked{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:620px){
  body{font-size:14px}.topbar{height:auto;min-height:62px;gap:10px;padding-top:10px;padding-bottom:10px}.topbar nav{gap:2px}.topbar nav a{padding:7px 8px}
  .admin-page-head h1{font-size:1.55rem}.panel{padding:17px}.stat-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:16px}
  .bulk-actions{display:grid;grid-template-columns:1fr}.bulk-upload-form{display:grid;grid-template-columns:1fr}.btn.outline{width:100%}
  .agenda-card{grid-template-columns:1fr}.agenda-time{border-right:0;border-bottom:1px solid var(--line)}.page-head{align-items:start;gap:12px}.date-filter{width:155px}.mini-form{position:fixed;left:12px;right:12px;top:20%;width:auto}
}

/* Patch v1.1.9: pemilihan multi kelas dan blok waktu pada Kalender Khusus */
.overrides-layout{grid-template-columns:minmax(520px,680px) minmax(0,1fr)}
.override-bulk-form{align-items:start}
.compact-notice{margin:0;padding:11px 13px;font-size:.82rem}
.choice-group{grid-column:1/-1;margin:0;min-width:0;border:1px solid var(--line-strong);border-radius:14px;padding:0;background:#fbfcfe}
.choice-group legend{padding:0 8px;font-size:.86rem;font-weight:800;color:#34445a}
.choice-group-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line);background:#f7f9fc;border-radius:13px 13px 0 0}
.choice-special{flex-direction:row;align-items:center;gap:10px;cursor:pointer}
.choice-special input,.choice-item input{width:17px;height:17px;min-height:0;flex:0 0 auto}
.choice-special span{display:flex;flex-direction:column;gap:1px}
.choice-special strong{font-size:.88rem;color:#1c3555}
.choice-special small{font-size:.72rem;font-weight:500;color:var(--muted)}
.choice-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.mini-link{border:0;background:transparent;padding:3px 0;color:var(--primary);font-size:.75rem;font-weight:750;cursor:pointer}
.mini-link:hover{text-decoration:underline}
.choice-count{min-width:72px;text-align:right;font-size:.72rem;color:var(--muted);font-weight:700}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px;max-height:260px;overflow:auto}
.choice-item{display:flex;flex-direction:row;align-items:flex-start;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:.8rem;font-weight:650;transition:border-color .15s,background .15s,opacity .15s}
.choice-item:hover{border-color:#aebfd5;background:#f8fbff}
.choice-item span{display:flex;min-width:0;flex-direction:column;gap:2px}
.choice-item strong{font-size:.76rem;line-height:1.25;color:#203852}
.choice-item small{font-size:.68rem;line-height:1.35;color:var(--muted);font-weight:500}
.choice-item.is-selected{border-color:#7f9fc5;background:#edf4fc;box-shadow:0 0 0 2px rgba(23,63,115,.06)}
.choice-item.is-disabled{opacity:.46;cursor:not-allowed;background:#f5f6f8}
.choice-item[hidden]{display:none!important}
.class-choice-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:230px}
.slot-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:330px}
.choice-help{margin:0;padding:0 13px 12px;color:var(--muted);font-size:.72rem}
@media(max-width:1240px){.overrides-layout{grid-template-columns:1fr}.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.slot-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.choice-group-head{align-items:flex-start;flex-direction:column}.choice-toolbar{justify-content:flex-start}.choice-count{text-align:left}.choice-grid,.class-choice-grid,.slot-choice-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.choice-grid,.class-choice-grid,.slot-choice-grid{grid-template-columns:1fr}}

/* Patch v1.1.10: status kosong dan visibilitas blok waktu Kalender Khusus */
.choice-empty{margin:12px;padding:14px 15px;border:1px dashed #c2cede;border-radius:11px;background:#f8fafc;color:#40536b;display:flex;flex-direction:column;gap:3px}
.choice-empty[hidden]{display:none!important}
.choice-empty strong{font-size:.82rem;color:#203852}
.choice-empty span{font-size:.72rem;color:var(--muted)}

/* Backup sistem v1.1.13 */
.backup-status{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;margin-bottom:20px;background:linear-gradient(135deg,#ffffff 0%,#f5f8fc 100%)}
.backup-status h2{margin:.25rem 0 .4rem}
.backup-status p{margin:0;color:var(--muted);max-width:680px}
.backup-status-list{display:grid;grid-template-columns:repeat(2,minmax(155px,1fr));gap:10px;min-width:min(100%,390px)}
.backup-status-list span{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--muted);font-size:.83rem}
.backup-status-list strong{color:var(--navy);font-size:.72rem;text-transform:uppercase;letter-spacing:.055em}
.backup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:20px}
.backup-card{display:flex;flex-direction:column;gap:18px;min-height:100%;position:relative;overflow:hidden}
.backup-card::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;right:-70px;top:-70px;background:rgba(31,78,132,.055);pointer-events:none}
.backup-card-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#edf3fb;color:var(--navy);font-size:1.15rem;font-weight:800}
.backup-card h2{margin:.2rem 0 .45rem;font-size:1.18rem}
.backup-card p{margin:0;color:var(--muted);line-height:1.58}
.backup-kicker{display:inline-block;color:#ad7819;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.backup-list{margin:14px 0 0;padding-left:20px;color:#53627a;line-height:1.55;font-size:.88rem}
.backup-card form{margin-top:auto}
.backup-button{width:100%}
.backup-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.backup-warning{margin-bottom:20px;border-left:4px solid #c18a24;background:#fff9ec}
.restore-guide h2{margin-top:0}
.restore-guide ol{margin-bottom:0;color:#53627a;line-height:1.7}
.restore-guide code{padding:2px 6px;border-radius:6px;background:#eef3f9;color:#16365f;font-size:.9em}
@media(max-width:1100px){.backup-grid{grid-template-columns:1fr}.backup-status{flex-direction:column}.backup-status-list{width:100%}}
@media(max-width:640px){.backup-status-list{grid-template-columns:1fr}.backup-card{padding:20px}}

/* Patch v1.1.17: agenda kelas pada setiap jam pelajaran */
.lesson-agenda-box{margin:13px 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}
.lesson-agenda-box.is-filled{border-color:#c8d8eb;background:#f1f6fc}
.lesson-agenda-box.is-empty{border-style:dashed;color:var(--muted)}
.lesson-agenda-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.lesson-agenda-head strong{color:#1a365d;font-size:.82rem;text-transform:uppercase;letter-spacing:.045em}
.lesson-agenda-head span{font-size:.72rem;color:var(--muted)}
.lesson-agenda-text{margin:0!important;color:#34445a;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
.btn.agenda-btn{background:#fff8e9;color:#805818;border-color:#e8d3a7}
.btn.agenda-btn:hover{background:#fff2d6;color:#6e490c}
.agenda-topic-form{width:370px}
.agenda-topic-form textarea{min-height:128px;line-height:1.5}
.form-hint{display:block;margin-top:-2px;color:var(--muted);font-size:.72rem;line-height:1.45}
@media(max-width:620px){.lesson-agenda-head{align-items:flex-start;flex-direction:column;gap:2px}.agenda-topic-form{width:auto}}

/* v1.1.21: isian agenda langsung tampil pada setiap JP */
.lesson-agenda-inline-form{margin:0 0 13px;padding:13px 14px;border:1px solid #cbd9e8;border-radius:12px;background:#f8fbff}
.lesson-agenda-inline-form>label{display:block;margin-bottom:7px;color:#17365d;font-size:.82rem;font-weight:800;letter-spacing:.025em}
.lesson-agenda-inline-form textarea{display:block;width:100%;min-height:96px;padding:11px 12px;border:1px solid #bdcde0;border-radius:10px;background:#fff;color:var(--text);font:inherit;line-height:1.5;resize:vertical}
.lesson-agenda-inline-form textarea:focus{outline:3px solid rgba(38,93,162,.14);border-color:#2f65a7}
.lesson-agenda-inline-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.lesson-agenda-inline-footer .form-hint{margin:0;flex:1}
.lesson-agenda-inline-footer .btn{flex:0 0 auto}
@media(max-width:720px){.lesson-agenda-inline-footer{align-items:stretch;flex-direction:column}.lesson-agenda-inline-footer .btn{width:100%}}

/* Patch v1.1.22: halaman login modern dengan tiga cardbox per peran */
.auth-page{
  position:relative;isolation:isolate;min-height:calc(100vh - 124px);display:grid;place-items:center;
  padding:42px 0 56px;overflow:hidden
}
.auth-page::before{
  content:"";position:absolute;inset:-90px -12vw;z-index:-3;
  background:
    radial-gradient(circle at 12% 18%,rgba(88,101,242,.20),transparent 28%),
    radial-gradient(circle at 88% 12%,rgba(14,165,164,.18),transparent 26%),
    radial-gradient(circle at 80% 88%,rgba(245,158,11,.15),transparent 27%),
    linear-gradient(145deg,#f7f9ff 0%,#eef5ff 48%,#f8fbff 100%)
}
.auth-page::after{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.36;pointer-events:none;
  background-image:linear-gradient(rgba(30,64,175,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(30,64,175,.055) 1px,transparent 1px);
  background-size:38px 38px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 88%)
}
.auth-orb{position:absolute;z-index:-1;border-radius:999px;filter:blur(2px);opacity:.7;pointer-events:none}
.auth-orb-one{width:260px;height:260px;left:-105px;top:8%;background:linear-gradient(135deg,rgba(99,102,241,.26),rgba(59,130,246,.08));animation:authFloat 10s ease-in-out infinite}
.auth-orb-two{width:320px;height:320px;right:-145px;bottom:0;background:linear-gradient(135deg,rgba(20,184,166,.17),rgba(245,158,11,.14));animation:authFloat 12s ease-in-out infinite reverse}
@keyframes authFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-16px,0)}}
.auth-shell{width:min(1220px,100%);position:relative}
.auth-hero{text-align:center;max-width:760px;margin:0 auto 28px}
.auth-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(58,88,145,.13);border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 8px 28px rgba(34,64,115,.07);color:#45628e;font-size:.7rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase;backdrop-filter:blur(10px)}
.auth-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#14b8a6);box-shadow:0 0 0 5px rgba(99,102,241,.09)}
.auth-hero h1{margin:14px 0 8px;font-size:clamp(2rem,4vw,3.15rem);line-height:1.04;letter-spacing:-.045em;color:#0e2648}
.auth-hero p{margin:0 auto;color:#65758d;font-size:clamp(.92rem,1.6vw,1.03rem);line-height:1.7;max-width:690px}
.auth-alert{max-width:760px;margin:0 auto 18px}
.auth-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.auth-card{
  --card-accent:#4f46e5;--card-accent-2:#2563eb;position:relative;overflow:hidden;display:flex;flex-direction:column;
  min-height:100%;padding:25px;border:1px solid rgba(166,181,207,.42);border-radius:24px;background:rgba(255,255,255,.88);
  box-shadow:0 22px 60px rgba(31,55,97,.12),inset 0 1px 0 rgba(255,255,255,.88);backdrop-filter:blur(18px);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.auth-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--card-accent),var(--card-accent-2))}
.auth-card:hover{transform:translateY(-5px);box-shadow:0 30px 74px rgba(31,55,97,.17);border-color:rgba(120,145,185,.48)}
.auth-card-admin{--card-accent:#6d5dfc;--card-accent-2:#3b82f6}
.auth-card-principal{--card-accent:#0891b2;--card-accent-2:#14b8a6}
.auth-card-class{--card-accent:#f59e0b;--card-accent-2:#ef6c57}
.auth-card-glow{position:absolute;right:-56px;top:-64px;width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,var(--card-accent),var(--card-accent-2));opacity:.10;filter:blur(2px);pointer-events:none}
.auth-card-head{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.auth-icon{display:grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:17px;color:#fff;background:linear-gradient(135deg,var(--card-accent),var(--card-accent-2));box-shadow:0 12px 26px color-mix(in srgb,var(--card-accent) 26%,transparent)}
.auth-icon svg{width:27px;height:27px;fill:currentColor}
.auth-role-label{display:block;color:#75839a;font-size:.67rem;font-weight:850;letter-spacing:.105em;text-transform:uppercase}
.auth-card h2{margin:2px 0 0;color:#102746;font-size:1.3rem;letter-spacing:-.025em}
.auth-card-copy{min-height:68px;margin:18px 0;color:#68788f;font-size:.86rem;line-height:1.62}
.auth-form{display:flex;flex-direction:column;gap:13px;margin-top:auto}
.auth-form label{gap:6px;color:#334962;font-size:.79rem}
.auth-form input{min-height:47px;border-radius:13px;background:rgba(248,250,253,.9);border-color:#d9e1ed}
.auth-form input:focus{background:#fff;border-color:color-mix(in srgb,var(--card-accent) 60%,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--card-accent) 11%,transparent)}
.auth-submit{width:100%;min-height:48px;margin-top:3px;border:0;border-radius:13px;color:#fff;box-shadow:0 12px 24px rgba(27,57,102,.14)}
.auth-submit:hover{color:#fff;box-shadow:0 16px 30px rgba(27,57,102,.20)}
.auth-submit-admin{background:linear-gradient(135deg,#6657eb,#3979e8)}
.auth-submit-principal{background:linear-gradient(135deg,#078cae,#11a994)}
.auth-submit-class{background:linear-gradient(135deg,#ed9a0b,#ea6756)}
.auth-pin-wrap{display:grid;place-items:center}
.auth-card-pin{width:min(510px,100%);min-height:auto}
.auth-card-pin .auth-card-copy{min-height:0}
.auth-back{display:inline-flex;justify-content:center;margin-top:16px;color:#667991;font-size:.81rem;font-weight:750}
.auth-back:hover{color:#193d6e}
.auth-footer{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:22px;color:#7a899e;font-size:.74rem}
.auth-footer span+span{position:relative;padding-left:18px}
.auth-footer span+span::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;background:#aab6c7;transform:translateY(-50%)}
@media(max-width:1050px){.auth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-card-class{grid-column:1/-1;width:min(570px,100%);justify-self:center}.auth-card-copy{min-height:auto}}
@media(max-width:720px){.auth-page{padding:26px 0 38px}.auth-grid{grid-template-columns:1fr}.auth-card-class{grid-column:auto;width:auto}.auth-card{padding:21px;border-radius:20px}.auth-hero{margin-bottom:21px}.auth-hero h1{font-size:2rem}.auth-card-copy{margin:14px 0 17px}.auth-footer span+span{padding-left:0}.auth-footer span+span::before{display:none}}
@media(prefers-reduced-motion:reduce){.auth-orb{animation:none}.auth-card{transition:none}}

/* v1.2.0: tema modern, aksesibilitas, laporan, pemulihan, dan semester */
:root{
  --brand-indigo:#4f46e5;--brand-blue:#2563eb;--brand-cyan:#0891b2;--brand-teal:#0f9f8f;
  --brand-violet:#7c3aed;--brand-amber:#d97706;--brand-rose:#e11d48;
}
body:not(.compact-body){
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 8%,rgba(79,70,229,.10),transparent 26%),
    radial-gradient(circle at 92% 14%,rgba(8,145,178,.09),transparent 24%),
    radial-gradient(circle at 75% 92%,rgba(15,159,143,.07),transparent 25%),
    linear-gradient(145deg,#f7f9ff 0%,#f3f7fc 46%,#f8fbff 100%);
  background-attachment:fixed
}
.skip-link{position:fixed;left:16px;top:-80px;z-index:9999;padding:11px 16px;border-radius:12px;background:#fff;color:#102b52;font-weight:850;box-shadow:0 14px 38px rgba(15,35,70,.25)}
.skip-link:focus{top:14px}
:focus-visible{outline:3px solid #f59e0b!important;outline-offset:3px!important}
button,a,input,select,textarea,summary{scroll-margin-top:92px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

.topbar{
  background:linear-gradient(110deg,rgba(15,42,80,.97),rgba(29,65,119,.96) 52%,rgba(27,78,112,.96));
  box-shadow:0 10px 32px rgba(15,42,80,.14)
}
.topbar nav a{min-height:40px;display:inline-flex;align-items:center}
.panel,.stat-card,.agenda-card{
  border-color:rgba(172,188,211,.42);
  box-shadow:0 14px 38px rgba(31,55,97,.075),inset 0 1px 0 rgba(255,255,255,.84)
}
.panel{background:rgba(255,255,255,.91);backdrop-filter:blur(14px)}
.admin-shell{grid-template-columns:260px minmax(0,1fr)}
.sidebar{
  background:
    radial-gradient(circle at 15% 0,rgba(94,130,255,.30),transparent 27%),
    linear-gradient(165deg,#122f5c 0%,#173f73 52%,#123554 100%);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 24px 55px rgba(14,40,79,.22)
}
.sidebar a{min-height:43px;display:flex;align-items:center}
.sidebar a.active{background:linear-gradient(135deg,#fff,#eef5ff);box-shadow:0 12px 28px rgba(0,0,0,.16)}
.admin-page-head{padding:4px 2px}
.admin-page-head h1{font-size:clamp(1.75rem,2.6vw,2.45rem);background:linear-gradient(110deg,#102746,#234f89 65%,#0c7283);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:#ad7616}
.btn{min-height:44px}
.btn.primary{background:linear-gradient(135deg,#234f8b,#2c68ae);box-shadow:0 10px 24px rgba(35,79,139,.20)}
.btn.primary:hover{background:linear-gradient(135deg,#183e73,#245b9b)}
.btn.danger-btn{background:linear-gradient(135deg,#b52d3d,#d44b47);border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(181,45,61,.18)}
.btn.danger-btn:hover{color:#fff;background:linear-gradient(135deg,#992536,#bf3937)}
input,select,textarea{background:rgba(255,255,255,.94)}

.dashboard-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(239,246,255,.92))}
.dashboard-toolbar h2,.dashboard-toolbar p{margin:0}.dashboard-toolbar p{color:var(--muted);margin-top:4px}
.inline-filter{display:flex;align-items:end;gap:10px}.inline-filter label{min-width:190px}
.completion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.completion-card{position:relative;overflow:hidden;min-height:132px;padding:20px;border-radius:19px;color:#fff;display:flex;flex-direction:column;justify-content:center;box-shadow:0 18px 38px rgba(35,63,105,.15)}
.completion-card::after{content:"";position:absolute;width:120px;height:120px;border:24px solid rgba(255,255,255,.10);border-radius:50%;right:-45px;top:-45px}
.completion-card span{font-weight:750;opacity:.9}.completion-card strong{font-size:2.25rem;line-height:1.05;letter-spacing:-.045em}.completion-card small{color:rgba(255,255,255,.80)}
.tone-blue{background:linear-gradient(135deg,#315ea8,#4386ce)}.tone-violet{background:linear-gradient(135deg,#6750c9,#8b63de)}.tone-amber{background:linear-gradient(135deg,#bd7011,#e4a12a)}.tone-rose{background:linear-gradient(135deg,#c5425c,#e86976)}.tone-teal{background:linear-gradient(135deg,#087f80,#18a99d)}.tone-slate{background:linear-gradient(135deg,#42546f,#61738e)}
.status-dot{display:inline-flex;align-items:center;gap:6px;font-weight:750}.status-dot::before{content:"";width:8px;height:8px;border-radius:50%}.status-dot.ok::before{background:#19a46b;box-shadow:0 0 0 4px rgba(25,164,107,.12)}.status-dot.warn::before{background:#e19620;box-shadow:0 0 0 4px rgba(225,150,32,.13)}
.onboarding-panel{margin-top:20px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(237,247,252,.92))}.onboarding-panel p{color:var(--muted)}.quick-links{display:flex;gap:10px;flex-wrap:wrap}

.report-filter-grid,.audit-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.filter-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;align-items:center}
.compact-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.compact-stats .stat-card{padding:15px}.compact-stats .stat-card strong{font-size:1.55rem}
.report-table .agenda-cell{min-width:280px;max-width:440px;white-space:normal}.result-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:850}.result-created{background:#e4f7ec;color:#12603e}.result-updated{background:#fff1d8;color:#815309}

.preview-page{max-width:1500px;margin:0 auto}.preview-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px;background:linear-gradient(135deg,#fff,#edf5ff)}.preview-hero h1{margin:2px 0 5px}.preview-hero p{margin:0;color:var(--muted)}
.preview-stats{grid-template-columns:repeat(3,1fr)}.preview-confirm{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.preview-confirm h2,.preview-confirm p{margin:0}.preview-confirm p{color:var(--muted);margin-top:4px}.preview-actions{display:flex;gap:10px}
.compact-data{display:grid;gap:5px;margin:0}.compact-data div{display:grid;grid-template-columns:150px 1fr;gap:8px}.compact-data dt{color:var(--muted);font-size:.72rem}.compact-data dd{margin:0;font-weight:650;overflow-wrap:anywhere}.change-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}.change-grid pre{max-height:300px;overflow:auto}.preview-table td:nth-child(3){min-width:380px}

.semester-grid,.restore-grid,.restore-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:20px}.semester-card,.restore-upload-card,.restore-safety-card{position:relative;overflow:hidden}.semester-card::after,.restore-upload-card::after{content:"";position:absolute;right:-75px;top:-80px;width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,rgba(79,70,229,.10),rgba(8,145,178,.06));pointer-events:none}.danger-surface{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,241,242,.92));border-color:#f2cbd2}.semester-card>p,.restore-upload-card>p,.restore-safety-card>p{color:var(--muted)}
.restore-upload-form{display:flex;flex-direction:column;gap:14px}.restore-confirm-form{max-width:820px;margin:20px auto;display:grid;gap:15px}.detail-list{display:grid;gap:0;margin:0}.detail-list div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.detail-list dt{color:var(--muted)}.detail-list dd{margin:0;font-weight:700}.tag-cloud{display:flex;gap:8px;flex-wrap:wrap}.tag-cloud span{padding:7px 10px;border-radius:999px;background:#edf3fb;color:#244d80;font-weight:750;font-size:.78rem}.danger-notice{background:#fff1f2;border-color:#f2c4ca;color:#8f2633}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.break-anywhere{overflow-wrap:anywhere}
.audit-summary{display:flex;align-items:baseline;gap:9px;margin-bottom:16px}.audit-summary strong{font-size:2rem;color:var(--primary)}.audit-summary small{margin-left:auto}.pagination{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px}

/* Pengurus kelas */
.role-class_officer .page-head{padding:20px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(235,245,255,.91));box-shadow:0 16px 38px rgba(31,55,97,.08);border:1px solid rgba(180,196,218,.45)}
.role-class_officer .notice{background:linear-gradient(135deg,#eff6ff,#f0fdfa)}
.agenda-card{border-radius:20px;background:rgba(255,255,255,.93);transition:transform .18s,box-shadow .18s,border-color .18s}
.agenda-card:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(31,55,97,.12);border-color:#c2d2e5}
.agenda-time{background:linear-gradient(180deg,#f8fbff,#f0f5fc);border-radius:20px 0 0 20px}
.lesson-agenda-inline-form{background:linear-gradient(135deg,#f8fbff,#f4faf9);border-color:#c8d9e9}
.agenda-actions{background:linear-gradient(180deg,rgba(250,252,255,.94),rgba(245,248,252,.94));border-radius:0 20px 20px 0}

/* Kepala sekolah */
.compact-body{background:#07152f}.principal-screen{padding:10px 14px;background:radial-gradient(circle at 8% 5%,rgba(59,130,246,.22),transparent 22%),radial-gradient(circle at 92% 8%,rgba(20,184,166,.16),transparent 24%),linear-gradient(145deg,#07152f,#0b2245 52%,#082840)}
.principal-head{padding:4px 4px 8px}.principal-card{border-radius:14px;background:linear-gradient(145deg,rgba(70,85,110,.96),rgba(49,62,83,.96));box-shadow:0 10px 24px rgba(0,0,0,.16);transition:transform .18s,filter .18s}.principal-card:hover{transform:translateY(-2px);filter:brightness(1.06)}
.pc-codes span{border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.state-present{background:linear-gradient(145deg,#0d7650,#0b5f42)}.state-late{background:linear-gradient(145deg,#b86b0c,#915006)}.state-not_arrived{background:linear-gradient(145deg,#9b7612,#74570b)}.state-absent{background:linear-gradient(145deg,#a93631,#7f2725)}.state-break{background:linear-gradient(145deg,#17699d,#154f7a)}.state-special{background:linear-gradient(145deg,#6547a6,#4b347e)}

@media(max-width:1100px){.completion-grid{grid-template-columns:repeat(2,1fr)}.report-filter-grid,.audit-filter-grid{grid-template-columns:repeat(2,1fr)}.compact-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.dashboard-toolbar,.preview-hero,.preview-confirm{align-items:stretch;flex-direction:column}.inline-filter{align-items:stretch;flex-direction:column}.inline-filter label{min-width:0}.completion-grid,.semester-grid,.restore-grid,.restore-preview-grid{grid-template-columns:1fr}.report-filter-grid,.audit-filter-grid{grid-template-columns:1fr}.compact-stats,.preview-stats{grid-template-columns:1fr 1fr}.filter-actions,.preview-actions{flex-direction:column}.filter-actions .btn,.preview-actions form,.preview-actions .btn{width:100%}.change-grid{grid-template-columns:1fr}.compact-data div{grid-template-columns:1fr}.agenda-time{border-radius:20px 20px 0 0}.agenda-actions{border-radius:0 0 20px 20px}}
@media(max-width:480px){.completion-grid,.compact-stats,.preview-stats{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr}.topbar>div{min-width:0}.topbar strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.principal-screen{padding:7px}}

/* v1.2.1: penyempurnaan kartu JP pengurus kelas */
.role-class_officer .agenda-card{
  grid-template-columns:180px minmax(340px,1fr) minmax(300px,430px);
}
.role-class_officer .agenda-time{
  justify-content:flex-start;
  gap:10px;
  padding:20px 18px;
}
.role-class_officer .agenda-time strong{
  color:#102b50;
  font-size:1.18rem;
  font-weight:900;
  line-height:1.25;
  letter-spacing:-.015em;
}
.role-class_officer .agenda-time span{
  color:#17365d;
  font-size:1.18rem;
  font-weight:850;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  letter-spacing:.015em;
}
.role-class_officer .attendance-summary{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid #d7e2ef;
  border-radius:14px;
  background:linear-gradient(135deg,#f8fbff 0%,#f4f8fc 55%,#f8fbf8 100%);
}
.role-class_officer .attendance-summary-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.role-class_officer .attendance-reason,
.role-class_officer .attendance-task{
  color:#34445a;
  font-size:.9rem;
  font-weight:650;
}
.role-class_officer .attendance-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:9px;
  color:#64748b;
  font-size:.84rem;
}
.role-class_officer .attendance-meta strong{
  color:#17365d;
  font-size:.92rem;
  font-weight:850;
}
.role-class_officer .agenda-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:18px;
}
.role-class_officer .attendance-action-buttons{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:8px;
}
.role-class_officer .attendance-correction-row{
  display:flex;
  align-items:flex-start;
  width:100%;
  padding-top:12px;
  border-top:1px solid #dbe5f0;
}
.role-class_officer .attendance-correction-row .btn{
  min-width:132px;
}
@media(max-width:980px){
  .role-class_officer .agenda-card{grid-template-columns:145px 1fr}
  .role-class_officer .agenda-actions{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:620px){
  .role-class_officer .agenda-card{grid-template-columns:1fr}
  .role-class_officer .agenda-time{border-right:0;border-bottom:1px solid var(--line)}
  .role-class_officer .agenda-time strong{font-size:1.12rem}
  .role-class_officer .agenda-time span{font-size:1.2rem}
  .role-class_officer .attendance-meta{align-items:flex-start;flex-direction:column;gap:3px}
}


/* v1.2.2: status kehadiran dipindahkan ke panel aksi kanan */
.role-class_officer .agenda-actions .action-attendance-summary{
  width:100%;
  margin-top:0;
  padding:14px 15px;
  border-color:#d5e1ee;
  background:linear-gradient(135deg,#f8fbff 0%,#f3f8fc 55%,#f7fbf8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.role-class_officer .agenda-actions .action-attendance-summary .attendance-summary-line{
  align-items:flex-start;
}
.role-class_officer .agenda-actions .action-attendance-summary .attendance-meta{
  align-items:flex-start;
  flex-direction:column;
  gap:4px;
  margin-top:10px;
}
.role-class_officer .agenda-actions .action-attendance-summary .attendance-meta strong{
  font-size:.95rem;
}
.role-class_officer .agenda-actions .action-attendance-summary .attendance-meta span{
  line-height:1.35;
}
@media(max-width:980px){
  .role-class_officer .agenda-actions .action-attendance-summary .attendance-meta{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 12px;
  }
}
@media(max-width:620px){
  .role-class_officer .agenda-actions .action-attendance-summary .attendance-meta{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
}

/* v1.2.3: login tiga cardbox muat dalam satu layar laptop */
body.role-guest .container{
  width:100%;
  max-width:none;
  margin:0;
}
.auth-page{
  min-height:calc(100dvh - 68px);
  padding:14px 20px 16px;
}
.auth-shell{
  width:min(1480px,100%);
}
.auth-hero{
  max-width:880px;
  margin:0 auto 14px;
}
.auth-school-name{
  margin:0;
  color:#0c2850;
  font-size:clamp(1.45rem,2.3vw,2rem);
  font-weight:900;
  line-height:1.05;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.auth-hero h1{
  margin:6px 0 0;
  font-size:clamp(1.85rem,3vw,2.65rem);
  line-height:1.02;
}
.auth-grid{
  gap:18px;
}
.auth-card{
  padding:20px 22px;
  border-radius:21px;
}
.auth-icon{
  width:46px;
  height:46px;
  border-radius:15px;
}
.auth-icon svg{
  width:24px;
  height:24px;
}
.auth-card h2{
  font-size:1.18rem;
}
.auth-card-copy{
  min-height:50px;
  margin:12px 0 14px;
  font-size:.81rem;
  line-height:1.48;
}
.auth-form{
  gap:9px;
}
.auth-form label{
  gap:4px;
  font-size:.75rem;
}
.auth-form input{
  min-height:43px;
  padding:8px 11px;
}
.auth-submit{
  min-height:44px;
  margin-top:2px;
}
.auth-footer{
  margin-top:10px;
  font-size:.69rem;
}
.auth-alert{
  margin-bottom:10px;
}

/* Pada laptop standar, kunci halaman login tepat satu viewport. */
@media (min-width:1051px) and (min-height:700px){
  body.role-guest{
    overflow:hidden;
  }
  body.role-guest .container{
    height:calc(100dvh - 68px);
  }
  .auth-page{
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .auth-shell{
    max-height:100%;
  }
}

/* Pada layar lebih pendek, tetap izinkan gulir agar formulir tidak terpotong. */
@media (max-height:699px){
  body.role-guest{
    overflow:auto;
  }
  .auth-page{
    min-height:calc(100dvh - 68px);
    height:auto;
    overflow:visible;
  }
}

/* Tablet dan ponsel tetap menggunakan alur vertikal yang dapat digulir. */
@media (max-width:1050px){
  body.role-guest{
    overflow:auto;
  }
  body.role-guest .container{
    height:auto;
  }
  .auth-page{
    min-height:calc(100dvh - 68px);
    height:auto;
    padding:24px 18px 34px;
    overflow:visible;
  }
  .auth-hero{
    margin-bottom:18px;
  }
  .auth-footer{
    margin-top:18px;
  }
}

/* v1.2.4: nama sekolah sebagai judul utama */
.auth-hero{
  margin:-14px auto 12px;
  transform:translateY(-4px);
}
.auth-school-name{
  margin:0;
  color:#0a2852;
  font-size:clamp(2.4rem,4.4vw,4rem);
  font-weight:950;
  line-height:.96;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-wrap:balance;
  text-shadow:0 10px 28px rgba(34,77,139,.12);
}
.auth-system-name{
  margin:8px 0 0;
  color:#14345f;
  font-size:clamp(1.45rem,2.5vw,2.2rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.025em;
}
@media (max-width:1050px){
  .auth-hero{
    margin:0 auto 18px;
    transform:none;
  }
  .auth-school-name{
    font-size:clamp(2rem,8vw,3.15rem);
    line-height:1;
  }
  .auth-system-name{
    margin-top:7px;
    font-size:clamp(1.25rem,5vw,1.8rem);
  }
}

/* v1.2.5: halaman login dua panel dengan logo sekolah besar dan pemilih peran */
body.role-guest{
  overflow:hidden;
  background:#eef3fb;
}
body.role-guest .container{
  width:100%;
  max-width:none;
  height:calc(100dvh - 68px);
  margin:0;
}
.role-guest .topbar{
  background:linear-gradient(100deg,#182b5c 0%,#33258a 62%,#5030a8 100%);
  box-shadow:0 8px 28px rgba(24,38,91,.2);
}
.topbar-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.topbar-school-logo{
  width:38px;
  height:42px;
  object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
.portal-login-page{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(218,213,255,.68) 0%,rgba(242,238,255,.72) 47%,rgba(255,248,236,.72) 100%);
}
.portal-login-grid{
  position:absolute;
  inset:0 46% 0 0;
  opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.72) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.72) 1px,transparent 1px);
  background-size:72px 72px;
  pointer-events:none;
}
.portal-login-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(4px);
  pointer-events:none;
}
.portal-login-glow-left{
  width:420px;
  height:420px;
  left:-150px;
  top:55px;
  background:radial-gradient(circle,rgba(108,88,236,.26),rgba(108,88,236,0) 68%);
}
.portal-login-glow-right{
  width:470px;
  height:470px;
  right:-135px;
  bottom:-185px;
  background:radial-gradient(circle,rgba(255,193,80,.28),rgba(255,193,80,0) 70%);
}
.portal-login-shell{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(390px,.75fr);
  grid-template-rows:1fr auto;
  width:min(1530px,100%);
  height:100%;
  margin:0 auto;
  padding:36px 54px 18px;
}
.portal-brand-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.portal-brand-composition{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:54px;
  width:100%;
  transform:translateY(-12px);
}
.portal-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(340px,34vw);
  height:min(430px,54vh);
}
.portal-school-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 20px rgba(41,39,83,.22));
}
.portal-title-wrap{
  min-width:280px;
}
.portal-school-caption{
  display:block;
  margin-bottom:17px;
  color:#33425e;
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.portal-title-wrap h1{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
  color:#17213a;
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:clamp(3.7rem,5.5vw,6.2rem);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.055em;
  text-transform:uppercase;
  text-shadow:0 8px 26px rgba(32,43,79,.08);
}
.portal-access-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding-left:30px;
}
.portal-access-card{
  width:min(500px,100%);
  padding:38px 40px 42px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,249,244,.77));
  box-shadow:
    0 26px 56px rgba(63,52,112,.16),
    inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
}
.portal-panel-eyebrow{
  display:block;
  margin-bottom:8px;
  color:#6d7182;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.portal-access-card h2{
  margin:0 0 25px;
  color:#18213a;
  font-size:clamp(1.7rem,2.4vw,2.25rem);
  line-height:1.05;
}
.portal-role-list{
  display:grid;
  gap:14px;
}
.portal-role-button{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:72px;
  padding:15px 22px;
  border:1px solid rgba(50,47,86,.1);
  border-radius:18px;
  color:#171b2b;
  background:rgba(255,255,255,.72);
  box-shadow:0 9px 24px rgba(37,43,73,.08);
  font:inherit;
  font-size:clamp(1.15rem,1.55vw,1.42rem);
  font-weight:800;
  letter-spacing:.025em;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.portal-role-button::after{
  content:"›";
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-52%);
  color:#72768a;
  font-size:2rem;
  font-weight:400;
}
.portal-role-button:hover,
.portal-role-button:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(71,63,167,.34);
  background:#fff;
  box-shadow:0 16px 32px rgba(49,48,91,.14);
}
.portal-role-admin{border-left:5px solid #6464f4}
.portal-role-principal{border-left:5px solid #17a6a2}
.portal-role-class{border-left:5px solid #ef8c24}
.portal-alert{
  width:min(500px,100%);
  margin:0 0 14px;
}
.portal-login-footer{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  min-height:28px;
  color:#6c758a;
  font-size:.7rem;
}
.portal-login-footer span+span::before{
  content:"•";
  margin-right:17px;
  color:#a0a8ba;
}
.portal-pin-card p,
.portal-dialog-card p{
  margin:0 0 22px;
  color:#68738a;
  line-height:1.55;
}
.portal-back-link{
  display:inline-block;
  margin-top:18px;
  color:#344d7b;
  font-size:.84rem;
  font-weight:700;
}
.portal-dialog{
  width:min(480px,calc(100% - 32px));
  max-width:480px;
  padding:0;
  border:0;
  border-radius:28px;
  background:transparent;
  box-shadow:none;
}
.portal-dialog::backdrop{
  background:rgba(14,22,48,.55);
  backdrop-filter:blur(5px);
}
.portal-dialog-card{
  position:relative;
  padding:34px 34px 30px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:27px;
  background:linear-gradient(145deg,#fff,#f8f8ff 58%,#fff9f1);
  box-shadow:0 30px 70px rgba(13,22,52,.3);
}
.portal-dialog-card h2{
  margin:0 0 10px;
  color:#17213a;
  font-size:2rem;
}
.portal-dialog-close{
  position:absolute;
  top:14px;
  right:16px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  color:#556078;
  background:#eef2f8;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}
.portal-modal-form{
  display:grid;
  gap:14px;
}
.portal-modal-form label{
  display:grid;
  gap:7px;
  color:#243654;
  font-size:.82rem;
  font-weight:800;
}
.portal-modal-form input{
  width:100%;
  min-height:50px;
  padding:11px 14px;
  border:1px solid #ced9ea;
  border-radius:14px;
  color:#17213a;
  background:#fff;
  font:inherit;
}
.portal-modal-form input:focus{
  outline:3px solid rgba(82,94,230,.18);
  border-color:#666ce5;
}
.portal-submit{
  min-height:50px;
  margin-top:5px;
  border-radius:14px;
  font-weight:800;
}
.portal-submit-admin{background:linear-gradient(100deg,#6155ef,#397cea)}
.portal-submit-principal{background:linear-gradient(100deg,#1197aa,#15aa8b)}
.portal-submit-class{background:linear-gradient(100deg,#ef9415,#ee684c)}

@media(max-width:1120px){
  body.role-guest{overflow:auto}
  body.role-guest .container{height:auto;min-height:calc(100dvh - 68px)}
  .portal-login-page{min-height:calc(100dvh - 68px);height:auto;overflow:visible}
  .portal-login-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    gap:22px;
    padding:34px 24px 24px;
  }
  .portal-brand-composition{
    gap:30px;
    transform:none;
  }
  .portal-logo-wrap{
    width:min(240px,35vw);
    height:280px;
  }
  .portal-title-wrap h1{
    font-size:clamp(2.8rem,7vw,4.6rem);
  }
  .portal-access-panel{
    padding-left:0;
  }
  .portal-access-card{
    width:min(660px,100%);
  }
  .portal-login-footer{
    padding-bottom:10px;
  }
}
@media(max-width:660px){
  .role-guest .topbar{
    min-height:62px;
  }
  .topbar-school-logo{
    width:31px;
    height:35px;
  }
  .portal-login-shell{
    padding:24px 16px 26px;
  }
  .portal-brand-composition{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }
  .portal-logo-wrap{
    width:180px;
    height:205px;
  }
  .portal-title-wrap{
    min-width:0;
  }
  .portal-school-caption{
    margin-bottom:10px;
  }
  .portal-title-wrap h1{
    display:block;
    font-size:2.35rem;
    line-height:1;
  }
  .portal-title-wrap h1 span+span::before{
    content:" ";
  }
  .portal-access-card{
    padding:27px 20px 29px;
    border-radius:24px;
  }
  .portal-role-button{
    min-height:62px;
    padding:13px 18px;
    font-size:1.05rem;
  }
  .portal-dialog-card{
    padding:30px 21px 24px;
  }
}
@media(prefers-reduced-motion:reduce){
  .portal-role-button{transition:none}
}

/* v1.2.6: keseimbangan logo dan blok judul halaman login */
@media (min-width:1121px){
  .portal-brand-composition{
    align-items:center;
    gap:48px;
  }

  .portal-logo-wrap,
  .portal-title-wrap{
    height:min(430px,54vh);
  }

  .portal-title-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:390px;
    max-width:500px;
    text-align:center;
  }

  .portal-school-caption{
    display:block;
    width:100%;
    margin:0 0 clamp(30px,3.2vh,46px);
    color:#17213a;
    font-size:clamp(2.15rem,2.7vw,3rem);
    font-weight:900;
    line-height:1.04;
    letter-spacing:.035em;
    text-align:center;
    text-transform:uppercase;
    text-wrap:balance;
  }

  .portal-title-wrap h1{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(6px,.85vh,11px);
    width:100%;
    margin:0;
    color:#17213a;
    font-size:clamp(2rem,2.45vw,2.7rem);
    font-weight:850;
    line-height:1.02;
    letter-spacing:.015em;
    text-align:center;
    text-transform:uppercase;
    text-shadow:0 8px 24px rgba(32,43,79,.08);
  }

  .portal-title-wrap h1 span{
    display:block;
    width:100%;
    text-align:center;
  }
}

@media (min-width:1121px) and (max-height:800px){
  .portal-logo-wrap,
  .portal-title-wrap{
    height:min(370px,50vh);
  }

  .portal-school-caption{
    margin-bottom:26px;
    font-size:clamp(1.95rem,2.45vw,2.65rem);
  }

  .portal-title-wrap h1{
    font-size:clamp(1.85rem,2.25vw,2.45rem);
    gap:5px;
  }
}

@media (max-width:1120px) and (min-width:661px){
  .portal-title-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .portal-school-caption{
    margin:0 0 22px;
    font-size:clamp(1.8rem,4vw,2.4rem);
    line-height:1.05;
    text-align:center;
  }

  .portal-title-wrap h1{
    align-items:center;
    text-align:center;
    font-size:clamp(1.65rem,3.6vw,2.2rem);
    gap:4px;
    line-height:1.04;
  }

  .portal-title-wrap h1 span{
    width:100%;
    text-align:center;
  }
}

/* v1.2.7: dua cardbox utama dan komposisi identitas sekolah vertikal */
@media (min-width:1121px){
  .portal-login-shell{
    grid-template-columns:minmax(520px,610px) minmax(430px,500px);
    justify-content:center;
    column-gap:34px;
    width:min(1240px,100%);
    padding-left:34px;
    padding-right:34px;
  }

  .portal-brand-panel{
    align-self:center;
    justify-self:end;
    width:100%;
    min-height:560px;
    padding:30px 34px 32px;
    border:1px solid rgba(255,255,255,.86);
    border-radius:30px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.82),rgba(244,242,255,.72));
    box-shadow:
      0 26px 56px rgba(63,52,112,.14),
      inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter:blur(18px);
  }

  .portal-brand-composition{
    display:grid;
    grid-template-areas:
      "school"
      "logo"
      "system";
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(300px,1fr) auto;
    align-items:center;
    justify-items:center;
    gap:18px;
    width:100%;
    height:100%;
    min-height:500px;
    transform:none;
  }

  .portal-logo-wrap{
    grid-area:logo;
    width:min(310px,26vw);
    height:min(330px,41vh);
    margin:0;
  }

  .portal-title-wrap{
    display:contents;
  }

  .portal-school-caption{
    grid-area:school;
    display:block;
    width:100%;
    margin:0;
    color:#17213a;
    font-size:clamp(2rem,2.55vw,2.85rem);
    font-weight:950;
    line-height:1.02;
    letter-spacing:.04em;
    text-align:center;
    text-transform:uppercase;
    text-wrap:balance;
  }

  .portal-title-wrap h1{
    grid-area:system;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:.28em;
    width:100%;
    margin:0;
    color:#17213a;
    font-size:clamp(1.75rem,2.1vw,2.25rem);
    font-weight:900;
    line-height:1.08;
    letter-spacing:.025em;
    text-align:center;
    text-transform:uppercase;
  }

  .portal-title-wrap h1 span{
    display:inline;
    width:auto;
    text-align:center;
  }

  .portal-access-panel{
    align-self:center;
    justify-self:start;
    width:100%;
    padding-left:0;
  }

  .portal-access-card{
    width:100%;
    min-height:560px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:40px 42px;
  }

  .portal-role-list{
    gap:15px;
  }

  .portal-role-button{
    min-height:78px;
  }
}

@media (min-width:1121px) and (max-height:820px){
  .portal-login-shell{
    grid-template-columns:minmax(490px,570px) minmax(410px,470px);
    column-gap:28px;
    padding-top:24px;
    padding-bottom:14px;
  }

  .portal-brand-panel,
  .portal-access-card{
    min-height:500px;
  }

  .portal-brand-panel{
    padding:24px 30px 26px;
  }

  .portal-brand-composition{
    min-height:445px;
    grid-template-rows:auto minmax(250px,1fr) auto;
    gap:14px;
  }

  .portal-logo-wrap{
    width:min(270px,24vw);
    height:min(280px,36vh);
  }

  .portal-school-caption{
    font-size:clamp(1.8rem,2.3vw,2.5rem);
  }

  .portal-title-wrap h1{
    font-size:clamp(1.55rem,1.9vw,2rem);
  }

  .portal-access-card{
    padding:32px 36px;
  }

  .portal-role-button{
    min-height:68px;
  }
}

@media (max-width:1120px){
  .portal-login-shell{
    width:min(760px,100%);
    justify-content:center;
  }

  .portal-brand-panel{
    width:100%;
    padding:28px 24px 30px;
    border:1px solid rgba(255,255,255,.86);
    border-radius:28px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.82),rgba(244,242,255,.72));
    box-shadow:
      0 22px 48px rgba(63,52,112,.13),
      inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter:blur(18px);
  }

  .portal-brand-composition{
    display:grid;
    grid-template-areas:
      "school"
      "logo"
      "system";
    grid-template-columns:1fr;
    align-items:center;
    justify-items:center;
    gap:17px;
    transform:none;
  }

  .portal-logo-wrap{
    grid-area:logo;
    width:min(220px,42vw);
    height:245px;
  }

  .portal-title-wrap{
    display:contents;
  }

  .portal-school-caption{
    grid-area:school;
    width:100%;
    margin:0;
    font-size:clamp(1.75rem,5vw,2.35rem);
    line-height:1.04;
    text-align:center;
  }

  .portal-title-wrap h1{
    grid-area:system;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:.28em;
    width:100%;
    margin:0;
    font-size:clamp(1.45rem,4.2vw,1.95rem);
    line-height:1.08;
    text-align:center;
  }

  .portal-title-wrap h1 span{
    display:inline;
    width:auto;
  }

  .portal-access-card{
    width:100%;
  }
}

@media (max-width:660px){
  .portal-login-shell{
    gap:18px;
  }

  .portal-brand-panel{
    padding:23px 18px 25px;
    border-radius:23px;
  }

  .portal-logo-wrap{
    width:165px;
    height:188px;
  }

  .portal-school-caption{
    font-size:1.65rem;
  }

  .portal-title-wrap h1{
    display:block;
    font-size:1.38rem;
  }
}

/* v1.2.8: login dua cardbox marmer dengan aksen ungu */
body.role-guest{
  overflow:hidden;
  background:#3a1d74;
}

body.role-guest .container{
  width:100%;
  max-width:none;
  height:calc(100dvh - 68px);
  margin:0;
}

.role-guest .topbar{
  min-height:68px;
  background:
    linear-gradient(100deg,#26225e 0%,#3b2080 58%,#5d2aac 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(26,14,71,.24);
}

.role-guest .topbar .muted{
  color:rgba(255,255,255,.72);
}

.portal-login-page{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 22%,rgba(255,246,223,.88),rgba(255,246,223,0) 35%),
    linear-gradient(90deg,#5b2a9d 0%,#7240b6 44%,#f4e8dc 100%);
}

.portal-login-page::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:60px 60px;
  opacity:.55;
  pointer-events:none;
}

.portal-login-page::after{
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  right:-110px;
  bottom:-135px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,212,127,.46),rgba(255,212,127,0) 70%);
  filter:blur(8px);
  pointer-events:none;
}

.portal-login-grid,
.portal-login-glow{
  display:none;
}

.portal-login-shell{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(420px,520px) minmax(360px,430px);
  grid-template-rows:1fr auto;
  justify-content:center;
  align-items:center;
  column-gap:30px;
  width:min(1040px,100%);
  height:100%;
  margin:0 auto;
  padding:28px 22px 16px;
}

.portal-brand-panel,
.portal-access-card{
  position:relative;
  min-height:510px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:28px;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.98),rgba(255,255,255,0) 35%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,242,248,.88));
  box-shadow:
    0 24px 42px rgba(31,20,61,.28),
    0 10px 22px rgba(59,28,103,.18),
    inset 0 1px 0 rgba(255,255,255,.96);
  overflow:visible;
  backdrop-filter:blur(14px);
}

.portal-brand-panel::before,
.portal-brand-panel::after,
.portal-access-card::before,
.portal-access-card::after{
  content:"";
  position:absolute;
  left:5%;
  width:90%;
  height:24px;
  border-radius:0 0 22px 22px;
  background:rgba(241,238,249,.84);
  border:1px solid rgba(255,255,255,.58);
  z-index:-1;
  box-shadow:0 9px 18px rgba(41,24,71,.16);
}

.portal-brand-panel::before,
.portal-access-card::before{
  bottom:-13px;
}

.portal-brand-panel::after,
.portal-access-card::after{
  bottom:-24px;
  width:84%;
  left:8%;
  opacity:.72;
}

.portal-brand-panel{
  align-self:center;
  justify-self:end;
  width:100%;
  padding:28px 34px 30px;
}

.portal-brand-panel::after{
  background:
    linear-gradient(135deg,rgba(243,239,250,.88),rgba(224,216,239,.76));
}

.portal-brand-composition{
  display:grid;
  grid-template-areas:
    "school"
    "logo"
    "system";
  grid-template-columns:1fr;
  grid-template-rows:auto 1fr auto;
  align-items:center;
  justify-items:center;
  gap:18px;
  width:100%;
  height:100%;
  min-height:448px;
  transform:none;
}

.portal-title-wrap{
  display:contents;
}

.portal-school-caption{
  grid-area:school;
  display:block;
  width:100%;
  margin:0;
  color:#241d4d;
  font-size:clamp(2rem,2.45vw,2.55rem);
  font-weight:950;
  line-height:1.04;
  letter-spacing:.02em;
  text-align:center;
  text-transform:uppercase;
  text-wrap:balance;
}

.portal-logo-wrap{
  grid-area:logo;
  position:relative;
  width:min(245px,22vw);
  height:min(270px,34vh);
  margin:0;
  padding:18px;
  border-radius:44% 44% 38% 38% / 36% 36% 44% 44%;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.95),rgba(250,248,255,.76) 58%,rgba(219,210,242,.68));
  box-shadow:
    0 16px 32px rgba(80,44,145,.28),
    0 0 0 8px rgba(255,255,255,.44),
    0 0 26px rgba(138,90,224,.45);
}

.portal-school-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 16px rgba(38,27,71,.2));
}

.portal-title-wrap h1{
  grid-area:system;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  gap:.28em;
  width:100%;
  margin:0;
  color:#241d4d;
  font-size:clamp(1.65rem,1.95vw,2rem);
  font-weight:900;
  line-height:1.08;
  letter-spacing:.02em;
  text-align:center;
  text-transform:uppercase;
}

.portal-title-wrap h1 span{
  display:inline;
  width:auto;
}

.portal-access-panel{
  align-self:center;
  justify-self:start;
  width:100%;
  padding-left:0;
}

.portal-access-card{
  width:100%;
  padding:38px 32px 40px;
}

.portal-access-card::before,
.portal-access-card::after{
  background:
    linear-gradient(135deg,rgba(244,241,249,.88),rgba(232,225,240,.8));
}

.portal-panel-eyebrow{
  margin-bottom:5px;
  color:#747083;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.15em;
}

.portal-access-card h2{
  margin:0 0 22px;
  color:#211b43;
  font-size:clamp(1.85rem,2.3vw,2.25rem);
  font-weight:900;
}

.portal-role-list{
  gap:14px;
}

.portal-role-button{
  min-height:68px;
  padding:14px 22px;
  border:1px solid rgba(89,69,126,.15);
  border-radius:22px;
  color:#241d43;
  background:
    linear-gradient(90deg,rgba(255,255,255,.95),rgba(237,227,255,.92));
  box-shadow:
    0 10px 22px rgba(66,38,116,.13),
    inset 0 1px 0 rgba(255,255,255,.98);
  font-size:clamp(1.05rem,1.35vw,1.25rem);
  font-weight:850;
}

.portal-role-button::after{
  right:18px;
  color:#625b77;
  font-size:1.8rem;
}

.portal-role-admin{
  border-left:4px solid #6d52f1;
  box-shadow:
    -9px 0 18px rgba(105,80,241,.45),
    0 10px 22px rgba(66,38,116,.12);
}

.portal-role-principal{
  border-left:4px solid #24b9cf;
  box-shadow:
    -9px 0 18px rgba(36,185,207,.4),
    0 10px 22px rgba(66,38,116,.12);
}

.portal-role-class{
  border-left:4px solid #f59b38;
  box-shadow:
    -9px 0 18px rgba(245,155,56,.4),
    0 10px 22px rgba(66,38,116,.12);
}

.portal-role-button:hover,
.portal-role-button:focus-visible{
  transform:translateY(-2px) scale(1.01);
  background:#fff;
  border-color:rgba(97,74,160,.28);
  box-shadow:
    -8px 0 22px rgba(105,80,241,.28),
    0 16px 28px rgba(66,38,116,.16);
}

.portal-login-footer{
  grid-column:1/-1;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:34px;
  margin-top:6px;
  color:rgba(55,43,78,.72);
  font-size:.67rem;
}

.portal-login-footer::before,
.portal-login-footer::after{
  content:"";
  width:110px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#9f61ff);
  box-shadow:0 0 12px rgba(151,77,255,.8);
}

.portal-login-footer::after{
  background:linear-gradient(90deg,#9f61ff,transparent);
}

.portal-login-footer span+span::before{
  content:"•";
  margin-right:14px;
  color:#8f82a7;
}

.portal-dialog-card{
  background:
    radial-gradient(circle at 25% 12%,rgba(255,255,255,.98),rgba(255,255,255,0) 38%),
    linear-gradient(145deg,#fff,#f3effb 58%,#fff7ef);
}

@media (min-width:1121px) and (max-height:800px){
  .portal-login-shell{
    grid-template-columns:minmax(390px,470px) minmax(340px,400px);
    column-gap:26px;
    padding-top:20px;
  }

  .portal-brand-panel,
  .portal-access-card{
    min-height:455px;
  }

  .portal-brand-composition{
    min-height:400px;
    gap:12px;
  }

  .portal-logo-wrap{
    width:min(210px,19vw);
    height:min(225px,29vh);
  }

  .portal-school-caption{
    font-size:clamp(1.65rem,2.2vw,2.15rem);
  }

  .portal-title-wrap h1{
    font-size:clamp(1.4rem,1.75vw,1.7rem);
  }

  .portal-role-button{
    min-height:60px;
  }
}

@media (max-width:1120px){
  body.role-guest{
    overflow:auto;
  }

  body.role-guest .container{
    height:auto;
    min-height:calc(100dvh - 68px);
  }

  .portal-login-page{
    height:auto;
    min-height:calc(100dvh - 68px);
    overflow:visible;
  }

  .portal-login-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    width:min(720px,100%);
    gap:28px;
    padding:30px 22px 26px;
  }

  .portal-brand-panel,
  .portal-access-card{
    width:100%;
    min-height:0;
  }

  .portal-brand-panel{
    padding:26px 24px 28px;
  }

  .portal-brand-composition{
    min-height:0;
    gap:16px;
  }

  .portal-logo-wrap{
    width:min(205px,38vw);
    height:225px;
  }

  .portal-school-caption{
    font-size:clamp(1.7rem,5vw,2.25rem);
  }

  .portal-title-wrap h1{
    font-size:clamp(1.35rem,4vw,1.7rem);
  }

  .portal-access-panel{
    padding-left:0;
  }
}

@media (max-width:660px){
  .portal-login-shell{
    padding:22px 14px 24px;
  }

  .portal-brand-panel,
  .portal-access-card{
    border-radius:23px;
  }

  .portal-logo-wrap{
    width:160px;
    height:178px;
    padding:13px;
  }

  .portal-school-caption{
    font-size:1.48rem;
  }

  .portal-title-wrap h1{
    display:block;
    font-size:1.23rem;
  }

  .portal-role-button{
    min-height:58px;
    border-radius:18px;
    font-size:1rem;
  }

  .portal-login-footer::before,
  .portal-login-footer::after{
    width:48px;
  }
}

/* v1.2.9: cardbox tunggal dan logo tanpa lingkaran */
.portal-brand-panel::before,
.portal-brand-panel::after,
.portal-access-card::before,
.portal-access-card::after{
  display:none !important;
  content:none !important;
}

.portal-brand-panel,
.portal-access-card{
  box-shadow:
    0 24px 46px rgba(31,20,61,.25),
    0 8px 18px rgba(59,28,103,.12),
    inset 0 1px 0 rgba(255,255,255,.96);
}

.portal-logo-wrap{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.portal-school-logo{
  filter:
    drop-shadow(0 16px 18px rgba(38,27,71,.24))
    drop-shadow(0 4px 6px rgba(38,27,71,.12));
}

@media (max-width:660px){
  .portal-logo-wrap{
    padding:0 !important;
    border-radius:0 !important;
  }
}

/* v1.2.10: penyempurnaan visual modern dan elegan */
:root{
  --portal-ink:#171a2f;
  --portal-muted:#6d7183;
  --portal-border:rgba(94,76,139,.14);
  --portal-surface:rgba(255,255,255,.88);
  --portal-shadow:0 26px 58px rgba(31,21,67,.20);
}

.role-guest .topbar{
  background:
    linear-gradient(105deg,#252058 0%,#342477 52%,#5630a4 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(30,18,71,.18);
}

.portal-login-page{
  background:
    radial-gradient(circle at 74% 24%,rgba(255,248,232,.90),rgba(255,248,232,0) 32%),
    radial-gradient(circle at 34% 64%,rgba(129,89,220,.18),rgba(129,89,220,0) 42%),
    linear-gradient(105deg,#5d2ca2 0%,#7141b1 44%,#f4e9df 100%);
}

.portal-login-page::before{
  background-image:
    linear-gradient(rgba(255,255,255,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.085) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.42;
}

.portal-brand-panel,
.portal-access-card{
  border:1px solid rgba(255,255,255,.80);
  background:
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(248,246,252,.88));
  box-shadow:
    0 28px 60px rgba(30,19,66,.22),
    0 10px 22px rgba(61,31,111,.10),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.portal-brand-panel{
  position:relative;
  isolation:isolate;
}

.portal-brand-panel::marker{
  display:none;
}

.portal-brand-panel::after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(105,84,155,.08);
  border-radius:22px;
  pointer-events:none;
}

.portal-school-caption{
  color:var(--portal-ink);
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;
  font-weight:900;
  letter-spacing:.015em;
}

.portal-title-wrap h1{
  color:var(--portal-ink);
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;
  font-weight:850;
  letter-spacing:.025em;
}

.portal-school-logo{
  filter:
    drop-shadow(0 18px 22px rgba(31,24,65,.22))
    drop-shadow(0 4px 8px rgba(31,24,65,.10));
  transition:transform .25s ease,filter .25s ease;
}

.portal-brand-panel:hover .portal-school-logo{
  transform:translateY(-2px);
  filter:
    drop-shadow(0 22px 26px rgba(31,24,65,.24))
    drop-shadow(0 5px 10px rgba(31,24,65,.12));
}

.portal-panel-eyebrow{
  color:#777286;
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;
  font-size:.7rem;
  font-weight:850;
  letter-spacing:.17em;
}

.portal-access-card h2{
  color:var(--portal-ink);
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;
  font-weight:900;
  letter-spacing:-.02em;
}

.portal-role-list{
  gap:15px;
}

.portal-role-button{
  min-height:70px;
  padding:15px 22px;
  border:1px solid var(--portal-border);
  border-radius:18px;
  color:var(--portal-ink);
  background:
    linear-gradient(100deg,rgba(255,255,255,.98),rgba(244,238,255,.93));
  box-shadow:
    0 10px 24px rgba(61,35,107,.10),
    inset 0 1px 0 rgba(255,255,255,.98);
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;
  font-weight:800;
  letter-spacing:.01em;
}

.portal-role-button::after{
  color:#777184;
  font-size:1.65rem;
  transition:transform .18s ease,color .18s ease;
}

.portal-role-button:hover,
.portal-role-button:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(93,70,156,.24);
  background:#fff;
  box-shadow:
    0 16px 32px rgba(61,35,107,.15),
    inset 0 1px 0 rgba(255,255,255,1);
}

.portal-role-button:hover::after,
.portal-role-button:focus-visible::after{
  transform:translateY(-52%) translateX(3px);
  color:#4d4760;
}

.portal-role-admin{
  border-left:5px solid #7157ec;
  box-shadow:
    -7px 0 18px rgba(113,87,236,.24),
    0 10px 24px rgba(61,35,107,.10);
}

.portal-role-principal{
  border-left:5px solid #20b5c5;
  box-shadow:
    -7px 0 18px rgba(32,181,197,.22),
    0 10px 24px rgba(61,35,107,.10);
}

.portal-role-class{
  border-left:5px solid #f09a34;
  box-shadow:
    -7px 0 18px rgba(240,154,52,.22),
    0 10px 24px rgba(61,35,107,.10);
}

.portal-login-footer{
  color:rgba(54,42,78,.68);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.01em;
}

.portal-login-footer::before,
.portal-login-footer::after{
  height:1px;
  opacity:.72;
  box-shadow:0 0 10px rgba(145,91,224,.55);
}

.portal-dialog::backdrop{
  background:rgba(17,14,42,.60);
  backdrop-filter:blur(8px);
}

.portal-dialog-card{
  border:1px solid rgba(255,255,255,.92);
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,244,252,.97));
  box-shadow:0 32px 76px rgba(20,14,52,.32);
}

.portal-dialog-card h2{
  color:var(--portal-ink);
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;
  font-weight:900;
}

.portal-dialog-close{
  color:#5d6070;
  background:#f0f2f7;
  transition:background .18s ease,transform .18s ease;
}

.portal-dialog-close:hover,
.portal-dialog-close:focus-visible{
  background:#e5e8f0;
  transform:rotate(3deg);
}

.portal-modal-form input{
  border:1px solid #ccd6e6;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(29,35,56,.03);
}

.portal-modal-form input:focus{
  outline:3px solid rgba(107,87,224,.16);
  border-color:#7469d8;
}

.portal-submit{
  box-shadow:0 10px 22px rgba(55,40,110,.17);
}

@media (prefers-reduced-motion:reduce){
  .portal-school-logo,
  .portal-role-button,
  .portal-role-button::after,
  .portal-dialog-close{
    transition:none !important;
  }
}

/* v1.2.11: redesign visual yang lebih tegas, modern, dan elegan */
body.role-guest{
  background:#1d163f !important;
}

.role-guest .topbar{
  min-height:64px !important;
  background:
    linear-gradient(100deg,#17183f 0%,#29205f 50%,#503098 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 10px 30px rgba(20,14,55,.28) !important;
}

.portal-login-page{
  background:
    radial-gradient(circle at 76% 23%,rgba(255,244,224,.92),rgba(255,244,224,0) 34%),
    radial-gradient(circle at 18% 74%,rgba(131,91,226,.33),rgba(131,91,226,0) 42%),
    linear-gradient(112deg,#38206f 0%,#6840aa 46%,#efe5e0 100%) !important;
}

.portal-login-page::before{
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) !important;
  background-size:72px 72px !important;
  opacity:.46 !important;
}

.portal-login-shell{
  grid-template-columns:minmax(420px,500px) minmax(360px,420px) !important;
  column-gap:42px !important;
  width:min(1040px,100%) !important;
}

.portal-brand-panel,
.portal-access-card{
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:34px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,242,250,.90)) !important;
  box-shadow:
    0 34px 74px rgba(18,13,47,.30),
    0 12px 26px rgba(57,34,101,.14),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.portal-brand-panel{
  padding:34px 38px 34px !important;
}

.portal-brand-panel::after{
  inset:20px !important;
  border:1px solid rgba(92,73,139,.07) !important;
  border-radius:26px !important;
}

.portal-school-caption{
  color:#171a31 !important;
  font-size:clamp(2.05rem,2.55vw,2.65rem) !important;
  font-weight:950 !important;
  letter-spacing:.025em !important;
}

.portal-logo-wrap{
  width:min(270px,23vw) !important;
  height:min(290px,36vh) !important;
}

.portal-school-logo{
  filter:
    drop-shadow(0 22px 28px rgba(25,18,61,.24))
    drop-shadow(0 5px 10px rgba(25,18,61,.12)) !important;
}

.portal-title-wrap h1{
  color:#171a31 !important;
  font-size:clamp(1.7rem,2vw,2.08rem) !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
}

.portal-access-card{
  padding:44px 38px !important;
}

.portal-panel-eyebrow{
  color:#7a7488 !important;
  font-size:.72rem !important;
  letter-spacing:.19em !important;
}

.portal-access-card h2{
  margin-bottom:28px !important;
  color:#171a31 !important;
  font-size:clamp(2rem,2.6vw,2.45rem) !important;
  font-weight:950 !important;
}

.portal-role-list{
  gap:17px !important;
}

.portal-role-button{
  min-height:74px !important;
  padding:16px 24px !important;
  border:1px solid rgba(88,70,132,.12) !important;
  border-radius:20px !important;
  color:#171a31 !important;
  background:
    linear-gradient(100deg,rgba(255,255,255,.99),rgba(244,238,255,.92)) !important;
  box-shadow:
    0 13px 26px rgba(47,30,91,.12),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  font-size:clamp(1.08rem,1.4vw,1.28rem) !important;
  font-weight:850 !important;
}

.portal-role-button::after{
  width:34px !important;
  height:34px !important;
  right:17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  color:#5d5870 !important;
  background:rgba(90,75,130,.07) !important;
  font-size:1.4rem !important;
}

.portal-role-admin{
  border-left:6px solid #7457ef !important;
  box-shadow:
    -8px 0 20px rgba(116,87,239,.25),
    0 13px 26px rgba(47,30,91,.12) !important;
}

.portal-role-principal{
  border-left:6px solid #1fb4c8 !important;
  box-shadow:
    -8px 0 20px rgba(31,180,200,.23),
    0 13px 26px rgba(47,30,91,.12) !important;
}

.portal-role-class{
  border-left:6px solid #ef9a35 !important;
  box-shadow:
    -8px 0 20px rgba(239,154,53,.23),
    0 13px 26px rgba(47,30,91,.12) !important;
}

.portal-role-button:hover,
.portal-role-button:focus-visible{
  transform:translateY(-3px) scale(1.012) !important;
  border-color:rgba(91,71,150,.24) !important;
  background:#fff !important;
  box-shadow:
    0 20px 36px rgba(46,29,91,.18),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.portal-login-footer{
  color:rgba(48,38,70,.72) !important;
  font-weight:700 !important;
}

.portal-login-footer::before,
.portal-login-footer::after{
  width:132px !important;
  background:linear-gradient(90deg,transparent,#8f63ec) !important;
}

.portal-login-footer::after{
  background:linear-gradient(90deg,#8f63ec,transparent) !important;
}

.portal-dialog-card{
  border-radius:30px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(245,242,251,.98)) !important;
  box-shadow:0 36px 86px rgba(18,12,50,.36) !important;
}

.portal-modal-form input{
  min-height:53px !important;
  border-radius:15px !important;
}

.portal-submit{
  min-height:52px !important;
  border-radius:15px !important;
}

@media (max-width:1120px){
  .portal-login-shell{
    grid-template-columns:1fr !important;
    width:min(720px,100%) !important;
    gap:30px !important;
  }

  .portal-brand-panel,
  .portal-access-card{
    border-radius:28px !important;
  }
}

@media (max-width:660px){
  .portal-brand-panel,
  .portal-access-card{
    border-radius:24px !important;
  }

  .portal-role-button{
    min-height:62px !important;
  }
}

/* v1.2.12: gaya Gen Z, aurora glass, dan bento role cards */
:root{
  --gz-ink:#16162b;
  --gz-muted:#66677a;
  --gz-white:rgba(255,255,255,.88);
  --gz-purple:#7c5cff;
  --gz-blue:#4aa8ff;
  --gz-cyan:#21d4c2;
  --gz-pink:#ff6fae;
  --gz-orange:#ff9b42;
}

body.role-guest{
  background:#20163f !important;
}

.role-guest .topbar{
  min-height:64px !important;
  background:
    linear-gradient(100deg,#17152f 0%,#2b205e 45%,#5e32b6 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 12px 32px rgba(24,15,59,.28) !important;
}

.role-guest .topbar-brand strong{
  letter-spacing:.01em;
}

.portal-login-page{
  isolation:isolate;
  background:
    radial-gradient(circle at 13% 20%,rgba(80,178,255,.42),rgba(80,178,255,0) 29%),
    radial-gradient(circle at 80% 18%,rgba(255,114,177,.34),rgba(255,114,177,0) 32%),
    radial-gradient(circle at 74% 86%,rgba(255,190,91,.42),rgba(255,190,91,0) 31%),
    linear-gradient(118deg,#39217d 0%,#7150d9 45%,#f4d9e7 100%) !important;
}

.portal-login-page::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px) !important;
  background-size:76px 76px !important;
  opacity:.38 !important;
  pointer-events:none !important;
}

.portal-login-page::after{
  content:"" !important;
  position:absolute !important;
  inset:auto auto -180px -130px !important;
  width:470px !important;
  height:470px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle,rgba(98,73,255,.34),rgba(98,73,255,0) 67%) !important;
  filter:blur(8px) !important;
  pointer-events:none !important;
}

.portal-login-shell{
  grid-template-columns:minmax(420px,510px) minmax(360px,430px) !important;
  column-gap:38px !important;
  width:min(1080px,100%) !important;
}

.portal-brand-panel,
.portal-access-card{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.58) !important;
  border-radius:32px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.65)) !important;
  box-shadow:
    0 32px 74px rgba(29,18,72,.28),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter:blur(22px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(135%) !important;
}

.portal-brand-panel::before,
.portal-access-card::before{
  content:"" !important;
  position:absolute !important;
  width:180px !important;
  height:180px !important;
  border-radius:50% !important;
  filter:blur(2px) !important;
  opacity:.55 !important;
  pointer-events:none !important;
}

.portal-brand-panel::before{
  left:-70px !important;
  top:-70px !important;
  background:
    radial-gradient(circle,rgba(112,92,255,.42),rgba(112,92,255,0) 70%) !important;
}

.portal-access-card::before{
  right:-55px !important;
  bottom:-70px !important;
  background:
    radial-gradient(circle,rgba(255,121,183,.36),rgba(255,121,183,0) 70%) !important;
}

.portal-brand-panel::after{
  content:none !important;
  position:absolute !important;
  top:20px !important;
  left:22px !important;
  inset:auto auto auto auto !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:30px !important;
  padding:6px 12px !important;
  border:1px solid rgba(124,92,255,.18) !important;
  border-radius:999px !important;
  color:#5c46c8 !important;
  background:rgba(255,255,255,.62) !important;
  box-shadow:0 8px 20px rgba(66,45,141,.10) !important;
  font-size:.66rem !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
  z-index:3 !important;
}

.portal-brand-composition{
  gap:17px !important;
}

.portal-school-caption{
  color:var(--gz-ink) !important;
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif !important;
  font-size:clamp(2rem,2.55vw,2.7rem) !important;
  font-weight:950 !important;
  letter-spacing:.015em !important;
}

.portal-logo-wrap{
  width:min(270px,23vw) !important;
  height:min(290px,36vh) !important;
  transform:translateZ(0);
}

.portal-school-logo{
  filter:
    drop-shadow(0 24px 28px rgba(30,19,75,.28))
    drop-shadow(0 0 20px rgba(124,92,255,.16)) !important;
  animation:gzLogoFloat 5.4s ease-in-out infinite !important;
}

.portal-title-wrap h1{
  color:var(--gz-ink) !important;
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif !important;
  font-size:clamp(1.65rem,1.95vw,2.05rem) !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
}

.portal-panel-eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  min-height:28px !important;
  margin-bottom:10px !important;
  padding:5px 10px !important;
  border:1px solid rgba(124,92,255,.15) !important;
  border-radius:999px !important;
  color:#6654c5 !important;
  background:rgba(255,255,255,.62) !important;
  font-size:.67rem !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
}

.portal-access-card h2{
  margin-bottom:26px !important;
  color:var(--gz-ink) !important;
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif !important;
  font-size:clamp(2rem,2.5vw,2.45rem) !important;
  font-weight:950 !important;
  letter-spacing:-.025em !important;
}

.portal-role-list{
  gap:14px !important;
}

.portal-role-button{
  position:relative !important;
  min-height:76px !important;
  padding:15px 66px 15px 76px !important;
  border:1px solid rgba(255,255,255,.68) !important;
  border-radius:22px !important;
  color:var(--gz-ink) !important;
  background:
    linear-gradient(100deg,rgba(255,255,255,.94),rgba(248,244,255,.78)) !important;
  box-shadow:
    0 14px 28px rgba(55,34,111,.13),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif !important;
  font-size:clamp(1.06rem,1.35vw,1.25rem) !important;
  font-weight:850 !important;
  letter-spacing:.005em !important;
}

.portal-role-button::before{
  position:absolute !important;
  left:16px !important;
  top:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  height:44px !important;
  transform:translateY(-50%) !important;
  border-radius:14px !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(42,27,94,.20) !important;
  font-size:.78rem !important;
  font-weight:950 !important;
  letter-spacing:.02em !important;
}

.portal-role-admin::before{
  content:"A" !important;
  background:linear-gradient(145deg,#835fff,#5c49e5) !important;
}

.portal-role-principal::before{
  content:"KS" !important;
  background:linear-gradient(145deg,#26d3c2,#16aeb9) !important;
}

.portal-role-class::before{
  content:"AK" !important;
  background:linear-gradient(145deg,#ffb147,#f58255) !important;
}

.portal-role-button::after{
  width:36px !important;
  height:36px !important;
  right:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  color:#5c5870 !important;
  background:rgba(108,87,178,.08) !important;
  font-size:1.35rem !important;
}

.portal-role-admin,
.portal-role-principal,
.portal-role-class{
  border-left:1px solid rgba(255,255,255,.68) !important;
}

.portal-role-admin{
  box-shadow:
    0 14px 28px rgba(95,70,226,.16),
    inset 4px 0 0 #795cff !important;
}

.portal-role-principal{
  box-shadow:
    0 14px 28px rgba(25,185,190,.15),
    inset 4px 0 0 #1fc6c4 !important;
}

.portal-role-class{
  box-shadow:
    0 14px 28px rgba(239,142,70,.15),
    inset 4px 0 0 #ff9b42 !important;
}

.portal-role-button:hover,
.portal-role-button:focus-visible{
  transform:translateY(-4px) scale(1.012) !important;
  border-color:rgba(255,255,255,.96) !important;
  background:#fff !important;
  box-shadow:
    0 22px 38px rgba(44,27,96,.19),
    inset 4px 0 0 var(--gz-purple) !important;
}

.portal-role-principal:hover,
.portal-role-principal:focus-visible{
  box-shadow:
    0 22px 38px rgba(44,27,96,.19),
    inset 4px 0 0 var(--gz-cyan) !important;
}

.portal-role-class:hover,
.portal-role-class:focus-visible{
  box-shadow:
    0 22px 38px rgba(44,27,96,.19),
    inset 4px 0 0 var(--gz-orange) !important;
}

.portal-role-button:hover::before,
.portal-role-button:focus-visible::before{
  transform:translateY(-50%) rotate(-4deg) scale(1.06) !important;
}

.portal-login-footer{
  color:rgba(47,38,68,.72) !important;
  font-weight:700 !important;
}

.portal-login-footer::before,
.portal-login-footer::after{
  width:125px !important;
  height:2px !important;
  background:linear-gradient(90deg,transparent,#9b73ff) !important;
  box-shadow:0 0 14px rgba(124,92,255,.66) !important;
}

.portal-login-footer::after{
  background:linear-gradient(90deg,#ff8db8,transparent) !important;
  box-shadow:0 0 14px rgba(255,111,174,.55) !important;
}

.portal-dialog::backdrop{
  background:
    linear-gradient(135deg,rgba(22,16,52,.72),rgba(62,38,114,.62)) !important;
  backdrop-filter:blur(10px) !important;
}

.portal-dialog-card{
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:30px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,244,255,.90)) !important;
  box-shadow:0 38px 90px rgba(16,11,44,.38) !important;
  backdrop-filter:blur(22px) !important;
}

.portal-modal-form input{
  min-height:54px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.90) !important;
}

.portal-submit{
  min-height:53px !important;
  border-radius:16px !important;
}

@keyframes gzLogoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@media (max-width:1120px){
  .portal-login-shell{
    grid-template-columns:1fr !important;
    width:min(720px,100%) !important;
    gap:30px !important;
  }

  .portal-brand-panel,
  .portal-access-card{
    border-radius:28px !important;
  }
}

@media (max-width:660px){
  .portal-role-button{
    min-height:66px !important;
    padding-left:68px !important;
  }

  .portal-role-button::before{
    width:40px !important;
    height:40px !important;
    left:14px !important;
  }

  .portal-brand-panel::after{
    top:14px !important;
    left:14px !important;
    font-size:.58rem !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .portal-school-logo{
    animation:none !important;
  }
}

/* v1.2.13: hapus label SMART SCHOOL PORTAL */
.portal-brand-panel::after{
  display:none !important;
  content:none !important;
}

/* v1.2.14: penghapusan final label pada cardbox identitas */
html body.role-guest .portal-login-page .portal-login-shell .portal-brand-panel::after{
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:none !important;
  pointer-events:none !important;
}



/* v1.2.15: kehadiran guru tanpa agenda, input bersyarat, dan koreksi sampai 23.59 */
.attendance-only-list .agenda-card{align-items:stretch}
.attendance-only-list .agenda-main{display:flex;flex-direction:column;justify-content:center}
.attendance-only-list button:disabled,
.attendance-only-list .btn[disabled]{opacity:.42;cursor:not-allowed;filter:grayscale(.35);transform:none!important;box-shadow:none!important}
.attendance-confirmed-note{padding:10px 12px;border:1px solid rgba(52,76,112,.14);border-radius:12px;background:rgba(234,240,248,.72);color:#4b596c;font-size:.83rem;line-height:1.45}
.correction-details{width:100%}
.correction-details>summary{width:100%;text-align:center}
.correction-form{min-width:min(340px,82vw)}
.correction-form label[hidden],.mini-form label[hidden]{display:none!important}
.task-text-field textarea,.correction-late-field textarea{min-height:92px}
.attendance-summary-line{align-items:flex-start;flex-wrap:wrap}
.attendance-reason,.attendance-task{white-space:normal;line-height:1.45}
.attendance-task{max-width:100%;overflow-wrap:anywhere}
@media(max-width:720px){.attendance-only-list .attendance-action-buttons{grid-template-columns:1fr}.attendance-only-list .attendance-action-buttons>*{width:100%}.attendance-only-list .attendance-action-buttons .btn{width:100%}}

/* v1.2.16: panel input kehadiran mengikuti alur kartu dan tidak tumpang tindih */
.attendance-only-list .agenda-actions details{
  position:static !important;
  max-width:100%;
}

.attendance-only-list .agenda-actions details[open]{
  width:100%;
}

.attendance-only-list .agenda-actions details[open] > summary{
  width:100%;
  box-sizing:border-box;
}

.attendance-only-list .agenda-actions .mini-form{
  position:static !important;
  inset:auto !important;
  right:auto !important;
  top:auto !important;
  z-index:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin-top:10px;
  box-sizing:border-box;
  box-shadow:0 12px 28px rgba(31,54,88,.12);
}

.attendance-only-list .attendance-action-buttons details[open]{
  flex:1 0 100%;
}

.attendance-only-list .attendance-action-buttons details[open] > summary{
  display:block;
}

.attendance-only-list .attendance-correction-row{
  display:block;
  align-items:stretch;
}

.attendance-only-list .correction-details,
.attendance-only-list .correction-details[open]{
  width:100%;
}

.attendance-only-list .correction-form{
  min-width:0 !important;
}

.attendance-only-list .agenda-card{
  isolation:isolate;
}

@media(max-width:980px){
  .attendance-only-list .agenda-actions .mini-form{
    width:100% !important;
  }
}

/* v1.2.17: input jam koreksi menggunakan format 24 jam HH:MM */
.time-24-input{
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

.time-24-input::placeholder{
  color:#8a96a8;
  letter-spacing:.02em;
}

/* v1.2.18: klasifikasi jam koreksi dan indikator pembaruan */
.correction-time-note{
  display:block;
  margin-top:7px;
  color:#5a6980;
  font-size:.82rem;
  line-height:1.4;
}
.attendance-inline-success{
  grid-column:1 / -1;
  margin:12px 14px 0;
  padding:10px 14px;
  border:1px solid #b8dfca;
  border-radius:12px;
  color:#17633b;
  background:#eefaf3;
  font-weight:700;
}

/* v1.2.20: halaman Reset Data Uji Coba */
.reset-safety-banner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 24px;
  align-items:center;
  margin-bottom:20px;
  padding:22px 24px;
  border:1px solid #f2c3c3;
  border-radius:20px;
  background:linear-gradient(135deg,#fff8f8,#fff);
  box-shadow:0 14px 32px rgba(114,35,35,.08);
}

.reset-safety-banner h2{
  margin:4px 0 8px;
}

.reset-safety-banner p{
  margin:0;
  color:#5d6675;
}

.reset-safety-banner > strong{
  grid-row:1 / 3;
  grid-column:2;
  color:#a52222;
  font-size:2.35rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.reset-safety-banner > span:last-child{
  grid-column:2;
  color:#7d4a4a;
  font-size:.78rem;
  text-align:center;
}

.reset-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);
  gap:20px;
  align-items:start;
}

.reset-test-form{
  padding:24px;
}

.reset-form-head h2,
.reset-preserved h2{
  margin:5px 0 8px;
}

.reset-form-head p{
  margin:0 0 18px;
  color:#687284;
}

.reset-select-all,
.reset-understand{
  display:flex;
  gap:11px;
  align-items:flex-start;
}

.reset-select-all{
  margin-bottom:12px;
  padding:12px 14px;
  border-radius:14px;
  background:#f3f6fa;
  font-weight:800;
}

.reset-target-list{
  display:grid;
  gap:12px;
}

.reset-target-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:16px;
  border:1px solid #d8e1ec;
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.reset-target-card:hover{
  transform:translateY(-1px);
  border-color:#d09a9a;
  box-shadow:0 10px 24px rgba(82,41,41,.08);
}

.reset-target-card:has(input:checked){
  border-color:#d86666;
  background:#fff8f8;
  box-shadow:0 0 0 3px rgba(216,102,102,.10);
}

.reset-target-copy{
  display:grid;
  gap:4px;
}

.reset-target-copy strong{
  color:#172b4b;
}

.reset-target-copy small{
  color:#687487;
  line-height:1.45;
}

.reset-target-count{
  min-width:48px;
  padding:8px 10px;
  border-radius:999px;
  color:#8b2525;
  background:#fdeaea;
  text-align:center;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.reset-confirmation-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:20px;
}

.reset-understand{
  margin-top:16px;
  padding:14px;
  border:1px solid #f0d3a8;
  border-radius:14px;
  color:#694714;
  background:#fff9ec;
}

.reset-submit{
  width:100%;
  margin-top:16px;
  min-height:50px;
}

.reset-preserved{
  display:grid;
  gap:20px;
}

.reset-preserved-list{
  margin:14px 0 0;
  padding-left:20px;
}

.reset-preserved-list li{
  margin:8px 0;
  color:#4f5d70;
  line-height:1.45;
}

.reset-backup-card{
  border-color:#bddac9;
  background:linear-gradient(145deg,#f2fbf6,#fff);
}

.reset-backup-card p{
  color:#4f6458;
  line-height:1.55;
}

.reset-backup-card small{
  color:#67756c;
}

@media(max-width:980px){
  .reset-layout{
    grid-template-columns:1fr;
  }

  .reset-safety-banner{
    grid-template-columns:1fr;
  }

  .reset-safety-banner > strong,
  .reset-safety-banner > span:last-child{
    grid-column:auto;
    grid-row:auto;
    text-align:left;
  }
}

@media(max-width:640px){
  .reset-confirmation-grid{
    grid-template-columns:1fr;
  }

  .reset-target-card{
    grid-template-columns:auto minmax(0,1fr);
  }

  .reset-target-count{
    grid-column:2;
    width:max-content;
  }
}

/* v1.2.21: checkbox Tampilkan untuk kata sandi dan PIN */
.password-field-control{
  display:grid;
  width:100%;
  min-width:0;
  gap:7px;
}

.password-field-control > input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.password-visibility-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:max-content;
  max-width:100%;
  gap:8px;
  color:#546278;
  font-size:.82rem;
  font-weight:700;
  line-height:1.25;
  cursor:pointer;
  user-select:none;
}

.password-visibility-toggle:hover{
  color:#263a5b;
}

.password-visibility-checkbox{
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  display:inline-block !important;
  flex:0 0 auto;
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  min-height:17px !important;
  margin:0 !important;
  padding:0 !important;
  border:initial !important;
  border-radius:3px !important;
  box-shadow:none !important;
  accent-color:#5f54d8;
  cursor:pointer;
}

.password-visibility-checkbox:focus-visible{
  outline:3px solid rgba(95,84,216,.24);
  outline-offset:2px;
}

.password-visibility-text{
  white-space:nowrap;
}

.portal-modal-form .password-visibility-toggle,
.portal-pin-form .password-visibility-toggle{
  color:#605b70;
}

.reset-test-form .password-visibility-toggle,
.danger-surface .password-visibility-toggle{
  color:#765757;
}

@media(max-width:520px){
  .password-visibility-toggle{
    min-height:30px;
  }
}


/* Patch v1.2.34: Analisis Data Admin */
.analysis-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;align-items:end}
.analysis-filter-grid label{margin:0}
.analysis-compare{grid-column:1/2;align-self:center;min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f7f9fc}
.analysis-filter-actions{grid-column:2/-1;display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.analysis-pdf-btn{background:#b73a34;color:#fff;border-color:#9f302b}.analysis-pdf-btn:hover{background:#9f302b;color:#fff}
.analysis-quick-ranges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-5px 0 14px;padding:0 3px;font-size:.78rem;color:var(--muted)}
.analysis-quick-ranges span{font-weight:750;color:#44566d}.analysis-quick-ranges a{display:inline-flex;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--primary);font-weight:750}.analysis-quick-ranges a:hover{background:#edf4fc;text-decoration:none}
.analysis-tabs{position:sticky;top:6px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;padding:7px;border:1px solid rgba(23,63,115,.14);border-radius:13px;background:rgba(255,255,255,.94);box-shadow:0 7px 20px rgba(24,46,76,.08);backdrop-filter:blur(8px)}
.analysis-tabs a{padding:7px 11px;border-radius:8px;color:#28435f;font-size:.78rem;font-weight:800}.analysis-tabs a:hover{background:#eaf2fb;text-decoration:none}
.analysis-section-anchor{scroll-margin-top:75px}
.analysis-period-note,.analysis-method-note{margin-bottom:14px;padding:11px 13px;border:1px solid #cdd9e7;border-radius:11px;background:#f7faff;color:#3d5067;font-size:.82rem;line-height:1.5}
.analysis-method-note{margin-top:16px;background:#fff8e7;border-color:#ead8a9}
.analysis-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.analysis-summary-card{min-height:108px;padding:17px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:center;gap:3px}
.analysis-summary-card span{font-size:.76rem;font-weight:800;color:#516176;text-transform:uppercase;letter-spacing:.025em}.analysis-summary-card strong{font-size:1.72rem;line-height:1.15;color:#1c3555}.analysis-summary-card small{color:#68798d;font-size:.76rem}
.analysis-summary-card.tone-blue{background:linear-gradient(145deg,#f1f7ff,#e7f1fd);border-color:#bfd4ee}.analysis-summary-card.tone-green{background:linear-gradient(145deg,#eefaf3,#e1f5e9);border-color:#b7dfc7}.analysis-summary-card.tone-teal{background:linear-gradient(145deg,#eefafa,#e2f4f3);border-color:#b6dddc}.analysis-summary-card.tone-amber{background:linear-gradient(145deg,#fff9eb,#fff0cd);border-color:#ecd59d}.analysis-summary-card.tone-rose{background:linear-gradient(145deg,#fff2f0,#fbe3df);border-color:#e9bbb5}.analysis-summary-card.tone-slate{background:linear-gradient(145deg,#f5f7fa,#e9edf3);border-color:#ced7e3}
.analysis-comparison-panel{margin-bottom:18px}
.analysis-comparison-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.analysis-change{padding:12px;border:1px solid var(--line);border-radius:11px;background:#f7f9fc;display:flex;flex-direction:column;gap:2px}.analysis-change span{font-size:.72rem;font-weight:800;color:#5c6c7f}.analysis-change strong{font-size:1.18rem;color:#263d58}.analysis-change small{font-size:.65rem;color:#7a8796}.analysis-change.good{background:#edf9f2;border-color:#b8dec7}.analysis-change.good strong{color:#247348}.analysis-change.bad{background:#fff0ee;border-color:#e7bbb6}.analysis-change.bad strong{color:#a23832}
.analysis-section-title{display:flex;align-items:baseline;gap:10px;margin:21px 0 10px;padding-bottom:8px;border-bottom:2px solid #d9e3ef}.analysis-section-title span{font-size:1.12rem;font-weight:900;color:#1d3e66}.analysis-section-title small{font-size:.75rem;color:var(--muted)}
.analysis-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.analysis-panel{padding:15px;min-width:0}
.analysis-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:11px}.analysis-panel-head h2{margin:0;font-size:1rem;color:#203b5b}.analysis-panel-head p{margin:3px 0 0;color:var(--muted);font-size:.72rem;line-height:1.4}
/* Patch v1.2.35: tabel Analisis Data lebih rapi, terpusat, dan mudah dipindai */
.analysis-panel .table-wrap{border:1px solid #d7e2ee;border-radius:12px;background:#fff;box-shadow:0 5px 14px rgba(31,58,91,.055);overflow:auto}
.analysis-table{font-size:.76rem;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.analysis-table th,.analysis-table td{text-align:center;vertical-align:middle;padding:10px 9px;border-bottom:1px solid #e3eaf2;border-right:1px solid #edf1f6}
.analysis-table th{font-size:.68rem;white-space:nowrap;background:linear-gradient(180deg,#edf4fc,#e4edf8);color:#38516e;letter-spacing:.045em;border-bottom:1px solid #cbd9e8}
.analysis-table th:first-child{border-top-left-radius:11px}.analysis-table th:last-child{border-top-right-radius:11px;border-right:0}
.analysis-table td:last-child{border-right:0}
.analysis-table tbody tr:nth-child(even){background:#f8fbfe}
.analysis-table tbody tr:hover{background:#edf5fd}
.analysis-table tbody tr:last-child td{border-bottom:0}
.analysis-table th:first-child,.analysis-table td:first-child{text-align:left}
.analysis-table td:first-child{min-width:128px}
.analysis-table td strong{color:#263e5c;font-weight:850}
.analysis-table small{font-size:.68rem;color:var(--muted)}
.analysis-table .empty{text-align:center!important;padding:24px 12px;color:#718096;background:#fbfcfe}
.analysis-first-center th:first-child,.analysis-first-center td:first-child,.analysis-all-center th,.analysis-all-center td{text-align:center}
.analysis-first-center td:first-child{min-width:112px}
.analysis-detail-table th,.analysis-detail-table td{text-align:center}
.analysis-detail-table th:nth-child(2),.analysis-detail-table td:nth-child(2),.analysis-detail-table th:nth-child(3),.analysis-detail-table td:nth-child(3),.analysis-detail-table th:nth-child(5),.analysis-detail-table td:nth-child(5){text-align:left}
.analysis-detail-table td:nth-child(2),.analysis-detail-table td:nth-child(3){min-width:155px}
.analysis-detail-link{justify-content:center;min-width:62px}

.analysis-detail-link{display:inline-flex;padding:4px 7px;border:1px solid #bdd0e6;border-radius:7px;background:#f2f7fd;color:#174a80;font-size:.67rem;font-weight:800;white-space:nowrap}.analysis-detail-link:hover{background:#e2eefb;text-decoration:none}
.analysis-reason-list{display:flex;flex-direction:column;gap:12px}.analysis-reason-row>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px}.analysis-reason-row strong{font-size:.78rem;color:#2d425c}.analysis-reason-row span{font-size:.69rem;color:var(--muted);white-space:nowrap}
.analysis-bar{height:7px;border-radius:999px;background:#e1e8f0;overflow:hidden}.analysis-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2d75bb,#35a78e)}
.analysis-trend-panel{margin-top:14px}.analysis-rate-cell{min-width:105px}.analysis-rate-cell>span{display:block;margin-bottom:4px;font-size:.69rem;font-weight:800}
.analysis-detail-panel{margin-top:18px;border:2px solid #8daaca;scroll-margin-top:76px}.analysis-detail-table td:nth-child(5){max-width:260px;white-space:normal;line-height:1.4}
@media(max-width:1200px){.analysis-filter-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}.analysis-filter-actions{grid-column:1/-1;justify-content:flex-start}.analysis-summary-grid,.analysis-comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-panel-grid{grid-template-columns:1fr}}
@media(max-width:700px){.analysis-filter-grid{grid-template-columns:1fr}.analysis-compare,.analysis-filter-actions{grid-column:auto}.analysis-filter-actions{display:grid;grid-template-columns:1fr}.analysis-filter-actions .btn{width:100%}.analysis-summary-grid,.analysis-comparison-grid{grid-template-columns:1fr}.analysis-tabs{position:static}.analysis-section-title{display:block}.analysis-section-title small{display:block;margin-top:3px}.analysis-panel{padding:11px}.analysis-panel-head{flex-direction:column}.analysis-table{font-size:.72rem}}

/* Patch v1.2.39: unduh rekap dan analisis PDF per guru */
.analysis-teacher-export{margin-bottom:16px;padding:18px;border:1px solid #b9cee4;background:linear-gradient(145deg,#f8fbff,#eef5fc);box-shadow:0 8px 24px rgba(31,67,108,.08)}
.analysis-teacher-export-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:15px}
.analysis-teacher-export-head h2{margin:2px 0 4px;color:#173e6b;font-size:1.22rem}
.analysis-teacher-export-head p{margin:0;max-width:760px;color:#5a6e84;font-size:.82rem;line-height:1.5}
.analysis-teacher-export-badge{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:7px 10px;border:1px solid #b8d2ed;border-radius:999px;background:#e5f1fd;color:#245780;font-size:.72rem;font-weight:850;white-space:nowrap}
.analysis-teacher-export-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:12px}
.analysis-teacher-single-form,.analysis-teacher-zip-form{min-width:0;padding:14px;border:1px solid #cfdeed;border-radius:13px;background:#fff}
.analysis-teacher-single-form{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:end}
.analysis-teacher-single-form label{margin:0}.analysis-teacher-single-form select{background:#fbfdff}
.analysis-teacher-zip-form{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(145deg,#f0faf6,#e5f5ed);border-color:#b9deca}
.analysis-teacher-zip-form>div{display:flex;min-width:0;flex-direction:column;gap:3px}.analysis-teacher-zip-form strong{color:#215b40;font-size:.88rem}.analysis-teacher-zip-form small{color:#5c7668;font-size:.7rem;line-height:1.4}
.analysis-zip-btn{flex:0 0 auto;background:#26764e;color:#fff;border-color:#1f6541}.analysis-zip-btn:hover{background:#1f6541;color:#fff}
.analysis-teacher-export-note{margin-top:11px;padding:9px 11px;border-left:3px solid #6d94bc;border-radius:7px;background:rgba(255,255,255,.74);color:#53677c;font-size:.73rem;line-height:1.5}
@media(max-width:1050px){.analysis-teacher-export-grid{grid-template-columns:1fr}.analysis-teacher-zip-form{align-items:flex-start}}
@media(max-width:700px){.analysis-teacher-export{padding:13px}.analysis-teacher-export-head{flex-direction:column}.analysis-teacher-single-form{grid-template-columns:1fr}.analysis-teacher-single-form .btn,.analysis-teacher-zip-form .btn{width:100%}.analysis-teacher-zip-form{flex-direction:column}.analysis-teacher-export-badge{align-self:flex-start}}