:root{
  --bg:#f5f8f6;--surface:#fff;--surface-2:#f8fbf9;--text:#18332a;--muted:#6f817a;
  --line:#e2ebe6;--primary:#0f7a55;--primary-dark:#095f42;--primary-soft:#e8f5ef;
  --accent:#b28a44;--danger:#c94747;--warning:#c68120;--shadow:0 16px 45px rgba(28,73,57,.10);
  --sidebar:268px;--radius:18px;--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--font);color:var(--text);background:var(--bg)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.login-view{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);background:#fff}
.login-visual{position:relative;min-height:100vh;overflow:hidden;background:#0a4937}
.login-visual>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.login-visual-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,42,29,.12),rgba(3,42,29,.78))}
.login-visual-copy{position:absolute;left:clamp(34px,6vw,86px);right:clamp(34px,7vw,100px);bottom:clamp(42px,8vh,88px);color:#fff;z-index:2}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(255,255,255,.10);backdrop-filter:blur(8px)}
.login-visual-copy h1{font-size:clamp(34px,4vw,58px);line-height:1.08;max-width:770px;margin:20px 0 18px;letter-spacing:-.035em}.login-visual-copy p{font-size:18px;line-height:1.7;max-width:650px;margin:0;color:rgba(255,255,255,.86)}
.login-panel{display:flex;align-items:center;justify-content:center;padding:38px;background:linear-gradient(145deg,#fff 0%,#fbfdfc 100%)}
.login-card{width:min(100%,520px)}.login-brand{display:flex;align-items:center;gap:16px;margin-bottom:42px}.login-brand img{width:88px;height:auto;object-fit:contain}.login-brand strong{display:block;font-size:16px;letter-spacing:.08em}.login-brand span{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.login-heading h2{font-size:34px;letter-spacing:-.03em;margin:0 0 8px}.login-heading p{margin:0 0 26px;color:var(--muted);line-height:1.6}
.unit-picker{border:0;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.unit-picker legend{font-size:13px;font-weight:800;margin-bottom:10px}.unit-option{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.2s}.unit-option:hover,.unit-option.selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,122,85,.08)}.unit-option input{position:absolute;opacity:0;pointer-events:none}.unit-option .unit-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:900;flex:0 0 auto}.unit-option strong,.unit-option small{display:block}.unit-option strong{font-size:13px}.unit-option small{font-size:10px;color:var(--muted);margin-top:3px}.director-option{grid-column:1/-1}.director-option .unit-mark{background:#f4efe4;color:#8b672f}
.field{display:block;margin-bottom:17px}.field>span:first-child{display:block;font-size:13px;font-weight:800;margin-bottom:8px}.field input,.field select,.field textarea,.filter-field input,.filter-field select{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 13px;color:var(--text);outline:none;transition:.18s}.field textarea{min-height:92px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.filter-field input:focus,.filter-field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,122,85,.10)}
.password-wrap{position:relative;display:block}.password-wrap input{padding-right:68px}.password-wrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:800;padding:7px 10px;border-radius:8px}.form-error{min-height:20px;color:var(--danger);font-size:13px;margin:0 0 10px}.login-footnote{font-size:11px;color:#8a9993;text-align:center;margin-top:22px}
.btn{border:1px solid transparent;border-radius:11px;padding:10px 15px;font-weight:800;transition:.18s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(15,122,85,.20)}.btn-primary:hover{background:var(--primary-dark)}.btn-soft{background:#fff;border-color:var(--line);color:var(--text)}.btn-danger{background:#fff2f2;color:var(--danger);border-color:#f4d1d1}.btn-block{width:100%;padding:13px}
.app-view{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) 1fr;transition:grid-template-columns .24s ease}.app-view.sidebar-collapsed{grid-template-columns:78px 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:30;overflow:hidden;transition:.24s ease}.sidebar-brand{height:78px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line);position:relative}.brand-symbol{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,var(--primary),#0b5d44);display:grid;place-items:center;color:#fff;font-size:22px;font-weight:900;flex:0 0 auto}.brand-copy{min-width:0;white-space:nowrap}.brand-copy strong,.brand-copy span{display:block}.brand-copy strong{font-size:13px;letter-spacing:.08em}.brand-copy span{font-size:10px;color:var(--muted);margin-top:4px}.collapse-btn{margin-left:auto;flex:0 0 auto}.icon-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);display:grid;place-items:center;font-weight:900;font-size:18px}.icon-btn:hover{background:var(--surface-2)}
.active-unit-card{margin:14px 14px 8px;padding:13px;border-radius:14px;background:var(--primary-soft);overflow:hidden;white-space:nowrap}.active-unit-card strong{display:block;font-size:12px}.active-unit-card span{display:block;font-size:10px;color:var(--muted);margin-top:4px}.sidebar-nav{padding:8px 10px;overflow:auto;flex:1}.nav-label{font-size:9px;font-weight:900;color:#9aa8a2;text-transform:uppercase;letter-spacing:.16em;padding:12px 10px 7px}.nav-item{width:100%;border:0;background:transparent;color:#566861;border-radius:12px;display:flex;align-items:center;gap:12px;padding:11px 12px;margin:3px 0;text-align:left;font-weight:750;font-size:13px;white-space:nowrap}.nav-item:hover{background:var(--surface-2);color:var(--text)}.nav-item.active{background:var(--primary-soft);color:var(--primary)}.nav-icon{width:23px;text-align:center;font-size:17px;flex:0 0 auto}.nav-text{overflow:hidden;text-overflow:ellipsis}.sidebar-footer{min-height:74px;border-top:1px solid var(--line);display:flex;align-items:center;padding:12px 14px;gap:10px}.user-mini{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.avatar{width:38px;height:38px;border-radius:12px;background:#edf2ef;color:var(--primary);display:grid;place-items:center;font-weight:900;flex:0 0 auto}.user-mini-copy{min-width:0;white-space:nowrap}.user-mini-copy strong,.user-mini-copy small{display:block;overflow:hidden;text-overflow:ellipsis}.user-mini-copy strong{font-size:11px}.user-mini-copy small{font-size:10px;color:var(--muted);margin-top:3px}.logout-btn{width:34px;height:34px;border:0;background:#fff2f2;color:var(--danger);border-radius:10px;font-size:18px;flex:0 0 auto}
.sidebar-collapsed .brand-copy,.sidebar-collapsed .active-unit-card strong,.sidebar-collapsed .active-unit-card span,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-text,.sidebar-collapsed .user-mini-copy{display:none}.sidebar-collapsed .sidebar-brand{padding:0 18px}.sidebar-collapsed .collapse-btn{position:absolute;right:8px;bottom:-17px;width:28px;height:28px;font-size:14px;transform:rotate(180deg);box-shadow:0 4px 14px rgba(0,0,0,.08)}.sidebar-collapsed .active-unit-card{margin:22px 12px 8px;height:46px;padding:0;display:grid;place-items:center}.sidebar-collapsed .active-unit-card:before{content:"SQ";font-size:11px;font-weight:900;color:var(--primary)}.sidebar-collapsed .nav-item{justify-content:center;padding:11px}.sidebar-collapsed .sidebar-footer{padding:12px;justify-content:center}.sidebar-collapsed .logout-btn{display:none}
.app-main{min-width:0}.topbar{height:78px;position:sticky;top:0;z-index:20;background:rgba(245,248,246,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(226,235,230,.8);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:18px}.topbar-left{display:flex;align-items:center;gap:13px}.topbar h1{font-size:21px;margin:0;letter-spacing:-.02em}.topbar p{font-size:11px;color:var(--muted);margin:4px 0 0}.topbar-actions{display:flex;align-items:center;gap:10px}.today-chip{font-size:11px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 12px}.unit-switch{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-weight:800}.unit-switch select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;max-width:230px}.mobile-menu{display:none}.page-host{padding:26px;max-width:1640px;margin:0 auto;outline:none}
.page-header{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px}.page-header h2{font-size:24px;margin:0 0 5px;letter-spacing:-.025em}.page-header p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.page-actions{display:flex;gap:9px;flex-wrap:wrap}
.hero-card{background:linear-gradient(135deg,#0d7753,#0a5f45);color:#fff;border-radius:22px;padding:25px;display:flex;justify-content:space-between;align-items:center;gap:20px;box-shadow:0 18px 40px rgba(10,95,69,.16);margin-bottom:18px;overflow:hidden;position:relative}.hero-card:after{content:"ق";position:absolute;right:28px;top:-36px;font-size:180px;color:rgba(255,255,255,.07);font-weight:900}.hero-card h2{margin:5px 0 9px;font-size:29px;letter-spacing:-.03em}.hero-card p{margin:0;color:rgba(255,255,255,.78);max-width:720px;line-height:1.6;font-size:13px}.hero-card .eyebrow{font-size:10px;padding:6px 9px}.hero-score{position:relative;z-index:2;width:110px;height:110px;border:10px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}.hero-score strong{font-size:27px}.hero-score span{font-size:9px;display:block;text-align:center;color:rgba(255,255,255,.72)}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px;min-width:0}.stat-top{display:flex;justify-content:space-between;align-items:center}.stat-icon{width:36px;height:36px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.stat-card .label{font-size:11px;color:var(--muted);font-weight:750}.stat-card .value{font-size:27px;font-weight:900;letter-spacing:-.03em;margin:10px 0 3px}.stat-card .meta{font-size:10px;color:#91a099}
.grid-2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr);gap:16px;margin-bottom:18px}.grid-equal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;min-width:0}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:15px}.card h3{font-size:15px;margin:0}.card-sub{font-size:10px;color:var(--muted);margin-top:5px}.chart-box{height:270px;position:relative}.chart-box.sm{height:220px}.chart-box canvas{width:100%;height:100%;display:block}.empty-state{min-height:180px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:12px;padding:30px}.empty-state strong{display:block;color:var(--text);font-size:14px;margin-bottom:5px}
.progress-list{display:grid;gap:13px}.progress-row{display:grid;grid-template-columns:minmax(120px,1fr) 2fr 48px;gap:12px;align-items:center}.progress-row strong{font-size:11px}.progress-track{height:8px;background:#edf2ef;border-radius:99px;overflow:hidden}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#2fa677);border-radius:99px}.progress-row em{font-size:11px;font-style:normal;font-weight:900;text-align:right}
.filter-bar{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:16px}.filter-field label{display:block;font-size:9px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.filter-field input,.filter-field select{padding:9px 10px;font-size:11px;border-radius:9px}.filter-actions{display:flex;align-items:flex-end;gap:7px}.filter-actions .btn{padding:9px 11px;font-size:11px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}.data-table{width:100%;border-collapse:collapse;min-width:760px;background:#fff}.data-table th{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#84958e;background:#f8faf9;padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}.data-table td{font-size:11px;padding:12px;border-bottom:1px solid #edf2ef;vertical-align:middle}.data-table tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:#fbfdfc}.name-cell strong,.name-cell span{display:block}.name-cell span{color:var(--muted);font-size:9px;margin-top:3px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:900;background:var(--primary-soft);color:var(--primary);white-space:nowrap}.badge.warn{background:#fff5e7;color:#a86512}.badge.danger{background:#fff0f0;color:var(--danger)}.badge.neutral{background:#eef2f0;color:#65766f}.action-row{display:flex;gap:6px}.mini-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 8px;font-size:9px;font-weight:800}.mini-btn:hover{border-color:var(--primary);color:var(--primary)}.mini-btn.danger{color:var(--danger)}
.kbm-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.6fr);gap:16px}.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field.full{grid-column:1/-1}.form-card .field{margin:0}.form-card .field>span:first-child{font-size:10px}.form-note{font-size:10px;color:var(--muted);line-height:1.6;background:var(--surface-2);border-radius:11px;padding:11px;margin:12px 0}.form-actions{display:flex;justify-content:flex-end;margin-top:17px}
.activity-list{display:grid;gap:0}.activity-item{display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid #edf2ef}.activity-item:last-child{border-bottom:0}.activity-icon{width:36px;height:36px;border-radius:11px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary);font-weight:900}.activity-copy strong,.activity-copy span{display:block}.activity-copy strong{font-size:11px}.activity-copy span{font-size:9px;color:var(--muted);margin-top:4px}.activity-item time{font-size:9px;color:var(--muted)}
.resume-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.resume-section{border:1px solid var(--line);border-radius:15px;padding:16px;background:#fff}.resume-section h3{margin:0 0 10px;font-size:14px}.resume-section p,.resume-section li{font-size:11px;line-height:1.7;color:#5f716a}.resume-section ul{padding-left:18px;margin:0}.ranking-list{counter-reset:rank;display:grid;gap:8px}.ranking-item{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:9px;background:var(--surface-2);border-radius:10px}.ranking-item:before{counter-increment:rank;content:counter(rank);width:24px;height:24px;border-radius:8px;background:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}.ranking-item strong{font-size:10px}.ranking-item span{font-size:10px;color:var(--primary);font-weight:900}
.parent-student{display:flex;align-items:center;gap:15px}.student-avatar{width:64px;height:64px;border-radius:18px;background:linear-gradient(145deg,var(--primary-soft),#d6eee3);color:var(--primary);display:grid;place-items:center;font-size:24px;font-weight:900}.parent-student h3{font-size:19px;margin:0 0 5px}.parent-student p{margin:0;color:var(--muted);font-size:11px}.monthly-box{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.month-stat{background:var(--surface-2);border-radius:12px;padding:12px}.month-stat strong,.month-stat span{display:block}.month-stat strong{font-size:20px}.month-stat span{font-size:9px;color:var(--muted);margin-top:4px}
.unit-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-bottom:18px}.unit-summary{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;position:relative;overflow:hidden}.unit-summary:after{content:"ق";position:absolute;right:10px;bottom:-34px;font-size:110px;color:#eef5f1}.unit-summary h3{margin:0 0 5px}.unit-summary p{font-size:10px;color:var(--muted);margin:0}.unit-summary .big-score{font-size:40px;font-weight:900;margin:21px 0 5px;letter-spacing:-.04em;color:var(--primary)}.unit-summary .metrics{display:flex;gap:16px;font-size:10px;color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(12,35,27,.38);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:20px}.modal{width:min(720px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.18)}.modal>header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}.modal h2{font-size:18px;margin:0}.modal header p{font-size:10px;color:var(--muted);margin:4px 0 0}.modal-body{padding:20px}.modal .form-grid{gap:13px}
.toast{position:fixed;right:24px;bottom:24px;z-index:200;background:#15372b;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);font-size:11px;font-weight:750;transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s}.toast.show{transform:translateY(0);opacity:1}.toast.error{background:#8d3030}
.mobile-scrim{display:none}
@media(max-width:1150px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2,.kbm-layout{grid-template-columns:1fr}.filter-bar{grid-template-columns:repeat(3,minmax(120px,1fr))}}
@media(max-width:860px){.login-view{grid-template-columns:1fr}.login-visual{min-height:310px}.login-panel{padding:28px 20px}.login-brand{margin-bottom:28px}.app-view,.app-view.sidebar-collapsed{display:block}.sidebar{position:fixed;left:0;top:0;width:270px;transform:translateX(-102%);box-shadow:var(--shadow)}.app-view.mobile-nav-open .sidebar{transform:translateX(0)}.app-view.mobile-nav-open .mobile-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:25}.sidebar-collapsed .brand-copy,.sidebar-collapsed .active-unit-card strong,.sidebar-collapsed .active-unit-card span,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-text,.sidebar-collapsed .user-mini-copy{display:block}.sidebar-collapsed .sidebar-brand{padding:0 16px}.sidebar-collapsed .collapse-btn{position:static;width:36px;height:36px;transform:none;box-shadow:none}.sidebar-collapsed .active-unit-card{margin:14px 14px 8px;height:auto;padding:13px;display:block}.sidebar-collapsed .active-unit-card:before{display:none}.sidebar-collapsed .nav-item{justify-content:flex-start;padding:11px 12px}.sidebar-collapsed .sidebar-footer{padding:12px 14px;justify-content:flex-start}.sidebar-collapsed .logout-btn{display:block}.mobile-menu{display:grid}.collapse-btn{display:none}.topbar{padding:0 16px}.topbar-actions .today-chip,.topbar-actions>.btn{display:none}.page-host{padding:18px}.grid-equal,.grid-3,.resume-grid,.unit-comparison{grid-template-columns:1fr}.unit-switch span{display:none}.unit-switch select{max-width:150px}}
@media(max-width:600px){.login-visual{min-height:250px}.login-visual-copy{left:24px;right:24px;bottom:25px}.login-visual-copy h1{font-size:27px;margin:14px 0 8px}.login-visual-copy p{font-size:13px}.login-card{width:100%}.unit-picker{grid-template-columns:1fr}.director-option{grid-column:auto}.stat-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:14px}.stat-card .value{font-size:23px}.topbar h1{font-size:17px}.topbar p{display:none}.page-header{align-items:flex-start;flex-direction:column}.filter-bar{grid-template-columns:1fr 1fr}.filter-actions{grid-column:1/-1}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.hero-card{align-items:flex-start}.hero-score{width:82px;height:82px;border-width:7px}.hero-score strong{font-size:20px}.monthly-box{grid-template-columns:1fr 1fr}.page-host{padding:14px}.card{padding:15px}}
@media print{.sidebar,.topbar,.page-actions,.btn,.filter-bar{display:none!important}.app-view{display:block}.page-host{padding:0}.card,.resume-section{break-inside:avoid;box-shadow:none}.page-host{max-width:none}}

/* Pembaruan interaktif, impor data, dan form KBM */
.chart-box.tall{height:330px}.chart-box canvas{cursor:crosshair}.chart-tooltip{position:absolute;z-index:5;max-width:240px;padding:8px 10px;border-radius:9px;background:rgba(20,45,36,.94);color:#fff;font-size:10px;font-weight:750;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.18);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}.chart-tooltip.show{opacity:1;transform:translateY(0)}
.field-section{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:14px}.field-section.full{grid-column:1/-1}.section-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.section-title strong{font-size:12px}.section-title span{font-size:10px;color:var(--muted);text-align:right;line-height:1.45}.form-grid.triple{grid-template-columns:1.4fr .7fr .7fr}.no-margin{margin:0!important}.import-note{margin:-5px 0 16px;padding:11px 14px;border:1px solid #d7e9df;border-radius:12px;background:var(--primary-soft);color:#557168;font-size:10px;line-height:1.55}.import-note strong{color:var(--primary)}.page-actions a.btn{text-decoration:none}.unit-best{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:10px}.unit-best strong{color:var(--muted)}.unit-best span{color:var(--primary);font-weight:900;text-align:right}.ranking-item span{text-align:right}.data-table td{vertical-align:top}
@media(max-width:760px){.form-grid.triple{grid-template-columns:1fr}.section-title{display:block}.section-title span{display:block;text-align:left;margin-top:4px}.chart-box.tall{height:290px}}


/* Release visibility and cache-fix confirmation */
.release-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;margin-bottom:10px;padding:6px 10px;border-radius:999px;background:#e8f7ef;color:#0f7a55;border:1px solid #bfe8d2;font-size:10px;font-weight:900;letter-spacing:.08em}
.update-confirmation{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding:13px 16px;border:1px solid #bfe8d2;border-radius:14px;background:linear-gradient(90deg,#f0fbf5,#ffffff);box-shadow:0 6px 18px rgba(15,122,85,.06)}
.update-confirmation div{display:flex;flex-direction:column;gap:3px}.update-confirmation strong{font-size:13px;color:#0f7a55}.update-confirmation span{font-size:11px;color:#61746c;line-height:1.45}.update-confirmation small{white-space:nowrap;font-size:10px;font-weight:800;color:#789087}
@media(max-width:700px){.update-confirmation{align-items:flex-start;flex-direction:column}.update-confirmation small{white-space:normal}}

/* Versi 1.3.0 - akun login otomatis */
.auto-login-note{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;border:1px solid #cde8d9;border-radius:13px;background:#f0faf5}
.auto-login-note:before{content:"✓";width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:var(--primary);color:#fff;font-size:11px;font-weight:900}
.auto-login-note strong,.auto-login-note span{display:block}.auto-login-note strong{font-size:11px;color:var(--primary)}.auto-login-note span{font-size:10px;color:var(--muted);line-height:1.5;margin-top:3px}
.login-code,.credential-table code{display:inline-block;padding:5px 8px;border-radius:8px;background:#f0f5f2;color:#0b6949;font:700 10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}
.password-code{background:#fff4d9!important;color:#8a5a00!important;border:1px solid #f0d99d}
.muted-text{font-size:10px;color:var(--muted)}
.credential-alert{display:flex;flex-direction:column;gap:4px;margin-bottom:15px;padding:13px 15px;border:1px solid #bfe8d2;border-radius:14px;background:linear-gradient(90deg,#effbf5,#fff)}
.credential-alert strong{font-size:13px;color:var(--primary)}.credential-alert span{font-size:10px;line-height:1.55;color:var(--muted)}
.credential-table-wrap{max-height:430px;overflow:auto;border:1px solid var(--line);border-radius:13px}.credential-table{min-width:650px}.credential-table th{position:sticky;top:0;z-index:1;background:#f7faf8}.credential-actions{gap:10px;flex-wrap:wrap}
@media(max-width:600px){.credential-actions .btn{width:100%}.auto-login-note{align-items:flex-start}}

/* Versi 1.4.0 - Data User & Password khusus Admin */
.security-note{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding:14px 16px;border:1px solid #f0d99d;border-radius:14px;background:#fffaf0}
.security-note:before{content:"🔒";display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:10px;background:#fff1c9;font-size:14px}
.security-note strong,.security-note span{display:block}.security-note strong{font-size:12px;color:#755000}.security-note span{margin-top:3px;color:#7d735d;font-size:10px;line-height:1.55}
.account-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.account-summary-item{padding:15px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
.account-summary-item strong,.account-summary-item span{display:block}.account-summary-item strong{font-size:22px;color:var(--primary)}.account-summary-item span{margin-top:4px;font-size:10px;font-weight:800;color:var(--muted)}
.user-toolbar{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(170px,.8fr) auto;align-items:end;gap:12px;margin-bottom:16px}
.user-toolbar .field{margin:0}.user-result-count{padding:0 2px 11px;font-size:10px;font-weight:800;color:var(--muted);white-space:nowrap}
.password-secure{display:inline-flex;flex-direction:column;gap:2px}.password-secure strong{font:800 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;color:#30493f}.password-secure small{font-size:9px;color:var(--muted)}
.mini-btn.primary{border-color:#bfe8d2;background:#effaf4;color:var(--primary)}.mini-btn.primary:hover{background:#dff4e9}
.loading-state{padding:36px;text-align:center;color:var(--muted);font-size:11px}
.user-table{min-width:900px}
.field small{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.45}
@media(max-width:800px){.user-toolbar{grid-template-columns:1fr}.user-result-count{padding:0}.account-summary{grid-template-columns:repeat(2,1fr)}}