:root{--bg:#f3f7fd;--panel:#fff;--text:#0d1b38;--muted:#6c7893;--line:#dfe7f2;--primary:#1769f6;--primary2:#114fd0;--cyan:#19b7d0;--danger:#e73f4f;--warning:#eda41b;--success:#1caf68;--purple:#7c3aed;--navy:#061d4c;--navy2:#082d72;--shadow:0 14px 38px rgba(22,61,125,.10);--radius:18px}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg)}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:300px;background:linear-gradient(180deg,#06183d 0%,#072b68 58%,#061b49 100%);color:#fff;padding:20px 16px 14px;display:flex;flex-direction:column;z-index:50;box-shadow:10px 0 34px rgba(4,24,61,.22);overflow:hidden}.sidebar-pattern{position:absolute;inset:auto -80px 18px -40px;height:330px;opacity:.13;pointer-events:none;background:radial-gradient(ellipse at center,transparent 28%,#8fb7ff 30%,transparent 33%) 0 0/64px 42px,radial-gradient(ellipse at center,transparent 28%,#8fb7ff 30%,transparent 33%) 32px 21px/64px 42px;transform:rotate(-8deg)}.brand{position:relative;z-index:1;display:flex;gap:13px;align-items:center;padding:4px 8px 22px;border-bottom:1px solid rgba(255,255,255,.12)}.brand strong{display:block;color:#fff;font-size:25px;letter-spacing:.3px;font-weight:800}.brand small{display:block;font-size:13px;color:#c4d4f1;margin-top:4px}.brand-mark{width:50px;height:50px;border-radius:15px;background:linear-gradient(135deg,#2c63f4,#29bee0);display:grid;place-items:center;color:#fff;font-weight:900;font-size:18px;box-shadow:0 10px 24px rgba(41,190,224,.28)}
.sidebar nav{position:relative;z-index:1;padding-top:10px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;flex:1}.nav-item,.nav-group-toggle{width:100%;min-height:48px;border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;margin:2px 0;font-size:16px;line-height:1.2;font-weight:500;text-align:left;cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.nav-item:hover,.nav-group-toggle:hover{background:rgba(37,92,191,.38)}.nav-item.active,.nav-group:has(.nav-submenu a.active)>.nav-group-toggle{background:linear-gradient(90deg,#2368ee,#2e55d7);box-shadow:0 7px 16px rgba(0,0,0,.14)}.nav-item:hover,.nav-group-toggle:hover{transform:translateX(1px)}.nav-icon{width:23px;min-width:23px;text-align:center;font-size:17px;line-height:1}.chevron{margin-left:auto;font-size:15px;transition:.2s;opacity:.92}.nav-group.open .chevron{transform:rotate(180deg)}.nav-submenu{display:none;margin:1px 0 5px 31px;padding:2px 0 2px 12px;border-left:1.5px solid rgba(80,151,255,.68)}.nav-group.open .nav-submenu{display:block}.nav-submenu a{display:flex;align-items:center;min-height:38px;color:#dbe8ff;padding:7px 9px 7px 14px;border-radius:8px;font-size:13.5px;line-height:1.2;font-weight:700;position:relative;margin:1px 0;transition:background .16s ease,color .16s ease,padding-left .16s ease}.nav-submenu a:before{content:"";position:absolute;left:-17px;top:50%;transform:translateY(-50%);width:7px;height:7px;background:#4d8dff;border-radius:50%;box-shadow:0 0 0 3px rgba(77,141,255,.10)}.nav-submenu a:hover{background:rgba(48,107,235,.20);color:#fff;padding-left:16px}.nav-submenu a.active{background:linear-gradient(90deg,rgba(46,102,226,.38),rgba(46,102,226,.18));color:#fff;box-shadow:inset 3px 0 0 #6ca5ff}.nav-submenu a.active:before{background:#80adff;box-shadow:0 0 0 4px rgba(92,151,255,.15)}.sidebar-footer{position:relative;z-index:1;margin-top:7px;padding:11px 4px 0;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:8px}.user-avatar{width:36px;height:36px;border-radius:50%;background:#7aa2ff;display:grid;place-items:center;font-weight:800}.user-mini{flex:1;min-width:0}.user-mini strong,.user-mini small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-mini strong{color:#fff;font-size:12.5px}.user-mini small{color:#b8c8e8;font-size:10.5px}.logout{color:#ffb9c0;font-size:11.5px;font-weight:700}
.main{margin-left:300px;min-height:100vh}.topbar{height:92px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 30px;position:sticky;top:0;z-index:30}.topbar h1{font-size:25px;margin:0 0 5px;font-weight:850}.topbar p{font-size:13px;color:var(--muted);margin:0}.top-user{margin-left:auto;display:flex;align-items:center;gap:11px}.top-user-avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#eaf1ff,#dbe8ff);color:#1558c8;display:grid;place-items:center;font-size:14px;font-weight:800;border:1px solid #d5e1f4}.top-user-info{display:flex;flex-direction:column;justify-content:center;min-width:120px;line-height:1.15}.top-user-info strong{font-size:13.5px;color:#152a4d;font-weight:700;white-space:nowrap}.top-user-info small{font-size:11px;color:#7a879d;margin-top:4px}.top-logout{height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border-radius:10px;background:#e83f50;color:#fff;font-size:12px;font-weight:700;box-shadow:0 7px 16px rgba(232,63,80,.18);transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.top-logout:hover{background:#d93445;transform:translateY(-1px);box-shadow:0 9px 19px rgba(232,63,80,.24)}.top-logout-icon{font-size:16px;line-height:1}.icon-btn{border:0;background:#eef4ff;color:#063979;border-radius:11px;padding:9px 12px;cursor:pointer;font-size:20px}.content{padding:28px;max-width:1700px;margin:auto}.footer{padding:10px 26px 28px;color:#8b97ad;font-size:12px;text-align:center}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:22px}.panel.soft{box-shadow:none;background:#fbfdff}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.panel-head.wrap{flex-wrap:wrap}.panel h3,.panel h4{margin:0 0 5px}.panel h3{font-size:20px}.panel p{margin:0;color:var(--muted);font-size:13px}.actions{display:flex;gap:9px;flex-wrap:wrap}.btn{border:1px solid transparent;background:#eaf0fb;color:#18345f;border-radius:9px;padding:10px 14px;cursor:pointer;font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 5px 12px rgba(16,51,101,.08)}.btn:hover{filter:brightness(.97);transform:translateY(-1px)}.btn.primary{background:#1769f6;color:#fff}.btn.info{background:#0aa5d8;color:#fff}.btn.success{background:#17ad66;color:#fff}.btn.purple{background:#7c3aed;color:#fff}.btn.dark{background:#17345f;color:#fff}.btn.danger{background:#fff0f2;color:var(--danger);border-color:#ffd2d7}.btn.danger.solid{background:var(--danger);color:#fff;border-color:var(--danger)}.btn.warning{background:#fff2d9;color:#9d6100}.btn.warning.solid{background:#f3a51d;color:#fff}.btn.sm{padding:7px 10px;font-size:12px}.btn.full{width:100%}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.alert{padding:13px 15px;border-radius:12px;margin-bottom:18px;font-size:13px;transition:.4s}.alert.success{background:#e9f9f2;color:#0d6f49;border:1px solid #bcebd8}.alert.error{background:#fff0f2;color:#a92738;border:1px solid #ffd0d6}.alert.fade{opacity:.15}
.welcome{background:linear-gradient(120deg,#1748c9,#2479df 58%,#17abc0);color:#fff;padding:27px;border-radius:0 0 28px 28px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 18px 42px rgba(52,84,209,.22);margin:-28px 0 30px}.welcome h2{margin:6px 0;font-size:28px}.welcome p{margin:0;color:#e9f1ff}.eyebrow{font-size:11px;letter-spacing:1.4px;opacity:.85}.role-pill{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);padding:10px 14px;border-radius:999px;font-size:12px;font-weight:800}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}.stat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:18px;min-height:145px}.stat-icon{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:28px;font-weight:800;box-shadow:0 10px 20px rgba(20,70,150,.20)}.stat-blue .stat-icon{background:linear-gradient(135deg,#3b8cff,#1761ef)}.stat-green .stat-icon{background:linear-gradient(135deg,#38d47d,#0aaa58)}.stat-purple .stat-icon{background:linear-gradient(135deg,#a552ff,#7223df)}.stat-orange .stat-icon{background:linear-gradient(135deg,#ffad20,#ff8200)}.stat span,.stat small{display:block;color:var(--muted)}.stat span{font-size:14px}.stat strong{display:block;font-size:31px;margin:5px 0;color:#071a3d}.stat small{font-size:12px}.workflow-panel{padding:24px}.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.flow>div{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;padding:18px;background:#fbfdff;border:1px solid #dae4f1;border-radius:15px}.flow b{width:32px;height:32px;border-radius:50%;background:#1769f6;color:#fff;display:grid;place-items:center}.flow i{font-style:normal;font-size:25px;color:#2574ee}.flow span{font-size:12px;font-weight:800}.cards.schedule-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.mini-card{border:1px solid var(--line);border-radius:14px;padding:15px;background:#fff}.mini-card h4{margin:8px 0 4px}.mini-card p{font-size:12px}
.data-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0}.search-form{display:flex;align-items:center;gap:9px;flex:1;min-width:0}.show-control{display:flex;align-items:center;gap:8px;font-weight:700;color:#4d5f7d;font-size:13px}.show-control select,.search-box input{border:1px solid #cfdbea;background:#fff}.show-control select{border-radius:9px;padding:10px}.search-box{height:42px;display:flex;align-items:center;gap:8px;border:2px solid #3c7df2;border-radius:9px;padding:0 12px;background:#fff;flex:1;max-width:720px;min-width:280px}.search-box span{font-size:20px;color:#6d7890}.search-box input{border:0!important;outline:0;width:100%;padding:0;background:transparent}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;min-width:760px}th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;vertical-align:middle}th{background:#eef5ff;color:#123467;font-size:11px;text-transform:uppercase;letter-spacing:.35px;position:sticky;top:0;font-weight:850}tbody tr:hover{background:#f8fbff}.nowrap{white-space:nowrap}.inline{display:inline}.pagination{display:flex;justify-content:flex-end;gap:7px;margin-top:18px;flex-wrap:wrap}.pagination a{padding:9px 12px;border:1px solid #d5dfec;border-radius:8px;background:#fff;font-size:12px;font-weight:750}.pagination a.active{background:var(--primary);color:#fff;border-color:var(--primary)}.pagination a.disabled{pointer-events:none;opacity:.4}
.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:12px;font-weight:800;color:#3e5273}.field small{color:var(--muted);font-size:11px}.field input,.field select,.field textarea{width:100%;border:1px solid #d3deeb;border-radius:9px;padding:11px;background:#fff;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #e7f0ff}.field textarea{min-height:90px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.span-2{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.form-panel{max-width:900px}.check-field{justify-content:end}.import-box{background:#eef6ff;padding:14px;border:1px solid #d4e4fa;border-radius:12px;margin-bottom:14px}.import-box form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.hidden{display:none}.badge{display:inline-block;padding:6px 9px;border-radius:999px;background:#edf1f8;color:#59647b;font-size:10px;font-weight:850;text-transform:uppercase}.badge.ok{background:#e6f8ef;color:#0f7a4f}.badge.warn{background:#fff2dc;color:#a46400}.badge.muted{background:#eef0f4;color:#7f889b}.notice{padding:13px;border-radius:10px;background:#fff4e6;color:#936000;font-size:12px;margin-bottom:15px}.status-line{font-size:12px;margin-bottom:15px}.empty{text-align:center!important;color:var(--muted);padding:24px!important}.empty.compact{padding:14px!important}.muted{color:var(--muted)}
.schedule-filter{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:20px;margin-bottom:20px;padding:16px;background:#f6f9fe;border:1px solid #e0e8f4;border-radius:14px}.day-tabs{display:flex;gap:7px;flex-wrap:wrap}.day-tab{border:0;background:#dfe9f7;color:#244269;border-radius:9px;padding:10px 14px;font-weight:800;cursor:pointer}.day-tab.active{background:#1769f6;color:#fff;box-shadow:0 7px 14px rgba(23,105,246,.22)}.schedule-check-layout{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}.assignment-panel,.slot-panel{border:1px solid #dde7f3;border-radius:16px;background:#fbfdff;padding:18px}.assignment-panel{position:sticky;top:112px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.section-title h4{font-size:15px;margin:0 0 4px}.section-title p{font-size:11px}.assignment-cards{display:flex;flex-direction:column;gap:9px;max-height:610px;overflow:auto;padding-right:4px}.assignment-card{position:relative;display:flex;gap:10px;align-items:center;padding:12px;border:1px solid #d8e3f1;border-radius:12px;background:#fff;cursor:pointer}.assignment-card:hover,.assignment-card.selected{border-color:#2b74ed;background:#eef5ff;box-shadow:0 6px 14px rgba(42,100,190,.09)}.assignment-card input{position:absolute;opacity:0}.radio-dot{width:18px;height:18px;border:2px solid #9bb0cd;border-radius:50%;flex:0 0 auto}.assignment-card input:checked+.radio-dot{border:5px solid #1769f6}.assignment-text b,.assignment-text small{display:block}.assignment-text b{font-size:13px}.assignment-text small{font-size:11px;color:#71809b;margin-top:4px}.slot-title{margin-bottom:15px}.selected-counter{background:#e8f1ff;color:#195bbf;padding:8px 11px;border-radius:9px;font-size:11px;font-weight:800}.selected-counter b{font-size:15px}.slot-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:10px}.slot-check{position:relative;display:grid;grid-template-columns:auto 90px 1fr auto;align-items:center;gap:10px;border:1px solid #d8e3f0;border-radius:12px;padding:12px;background:#fff;min-height:72px;cursor:pointer}.slot-check:hover:not(.occupied):not(.special){border-color:#5a91ec;background:#f5f9ff}.slot-check input{position:absolute;opacity:0}.check-box{width:22px;height:22px;border:2px solid #a9b9cf;border-radius:6px;display:grid;place-items:center}.slot-check input:checked+.check-box{background:#1769f6;border-color:#1769f6}.slot-check input:checked+.check-box:after{content:"✓";color:#fff;font-weight:900;font-size:13px}.slot-time b,.slot-time small,.occupied-info b,.occupied-info small{display:block}.slot-time b{font-size:12px;color:#173765}.slot-time small,.occupied-info small{font-size:10px;color:#76859c;margin-top:3px}.occupied-info b{font-size:12px}.slot-free{font-size:11px;color:#3b8a61;font-weight:800}.slot-check.occupied{background:#f1f4f8;cursor:default}.slot-check.special{display:flex;justify-content:space-between;background:#edf2f7;color:#53637c;cursor:default;grid-column:1/-1}.slot-delete{border:0;background:#e73f4f;color:#fff;width:27px;height:27px;border-radius:8px;cursor:pointer;font-size:18px;line-height:1}.schedule-bottom-bar{display:flex;align-items:end;gap:12px;margin-top:16px;padding-top:15px;border-top:1px solid #dce6f3}.room-field{flex:1}.schedule-save{min-width:250px;height:42px}.schedule-empty{display:flex;flex-direction:column;gap:6px;border:1px dashed #b9c9df;border-radius:14px;background:#f8fbff}.schedule-empty b{color:#173965}
.print-choice-grid,.maintenance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.maintenance-grid{grid-template-columns:1fr 1fr}.maint-icon{font-size:30px;margin-bottom:10px}.danger-zone{border-color:#ffd3d8}.reset-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.reset-list label{padding:10px;border:1px solid var(--line);border-radius:10px;font-size:12px}.success-card{padding:22px;border-radius:14px;background:#eaf9f2;color:#0d7650;font-weight:700}
.login-body{min-height:100vh;background:radial-gradient(circle at 15% 20%,#284cd1 0,#14233f 40%,#0b1325 100%);display:grid;place-items:center;padding:24px}.login-wrap{width:min(1040px,100%);display:grid;grid-template-columns:1.15fr .85fr;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.35)}.login-hero{padding:60px;background:linear-gradient(150deg,#2747bc,#236dca 65%,#1598aa);color:#fff;display:flex;flex-direction:column;justify-content:center}.hero-badge{align-self:flex-start;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:11px;letter-spacing:1px}.login-hero h1{font-size:48px;margin:35px 0 8px}.login-hero h3{font-size:21px;margin:0 0 36px}.login-hero p{font-size:14px;line-height:1.7}.login-feature{border:1px solid rgba(255,255,255,.2);padding:13px;border-radius:14px;margin-top:20px;font-size:12px}.login-card{padding:55px;display:flex;flex-direction:column;justify-content:center}.login-card h2{font-size:27px;margin:0 0 7px}.login-card>p{color:var(--muted);font-size:13px;margin:0 0 24px}.login-card form{display:flex;flex-direction:column;gap:14px}.login-foot{text-align:center;margin-top:18px;color:var(--muted);font-size:11px}.login-alert{margin-bottom:14px}
@media(max-width:1150px){.stat-grid{grid-template-columns:repeat(2,1fr)}.flow{grid-template-columns:1fr 1fr}.schedule-check-layout{grid-template-columns:1fr}.assignment-panel{position:static}.slot-checkbox-grid{grid-template-columns:1fr}}
@media(max-width:850px){.sidebar{transform:translateX(-102%);transition:.25s}.sidebar-open .sidebar{transform:none}.main{margin-left:0}.topbar{padding:0 15px}.top-user-info{display:none}.top-logout span:last-child{display:none}.top-logout{width:38px;padding:0;justify-content:center}.content{padding:18px}.welcome{margin:-18px 0 20px}.form-grid,.filter-grid,.maintenance-grid,.print-choice-grid,.schedule-filter{grid-template-columns:1fr}.data-toolbar,.search-form,.schedule-bottom-bar{align-items:stretch;flex-direction:column}.search-box{max-width:none;min-width:0}.login-wrap{grid-template-columns:1fr}.login-hero{display:none}.login-card{padding:34px}.stat-grid{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.slot-checkbox-grid{grid-template-columns:1fr}.schedule-save{min-width:0;width:100%}}
@media print{.sidebar,.topbar,.footer,.no-print{display:none!important}.main{margin:0}.content{padding:0}.panel{box-shadow:none;border:0}.print-area{display:block}body{background:#fff}@page{size:A4 landscape;margin:10mm}}

/* === Jam Pelajaran per Tab & Request Guru === */
.academic-day-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 18px;padding-bottom:2px}.academic-day-tab{border:1px solid #d7e2f0;background:#f3f7fc;color:#28466f;border-radius:10px;padding:10px 17px;font-size:13px;font-weight:600;cursor:pointer;transition:.18s}.academic-day-tab:hover{border-color:#83aef1;background:#edf4ff}.academic-day-tab.active{background:#1769f6;border-color:#1769f6;color:#fff;box-shadow:0 6px 14px rgba(23,105,246,.18)}.academic-day-tab.has-lock:not(.active){border-color:#f2a654;color:#a85d05;background:#fff8ef}.academic-day-panel{display:none}.academic-day-panel.active{display:block}.day-panel-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 11px}.day-panel-title div{display:flex;align-items:center;gap:10px}.day-panel-title b{font-size:16px;color:#17345f}.day-panel-title span{font-size:11px;color:#74839a;background:#eef3f9;padding:6px 9px;border-radius:999px}
.teacher-request-panel{margin-top:20px}.teacher-picker-form{max-width:620px;margin:10px 0 15px}.teacher-picker-field select{min-height:44px}.availability-help{border:1px solid #dce7f5;background:#f6f9fe;color:#455d7e;padding:13px 15px;border-radius:11px;font-size:12px;line-height:1.65;margin-bottom:15px}.availability-tabs{margin-top:0}.availability-day-panel{border:1px solid #dbe6f3;border-radius:14px;background:#fbfdff;padding:16px}.availability-day-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.lock-switch{display:flex;align-items:center;gap:11px;cursor:pointer}.lock-switch>input{position:absolute;opacity:0}.switch-ui{width:42px;height:23px;border-radius:999px;background:#cbd7e6;position:relative;transition:.2s;flex:0 0 auto}.switch-ui:after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:.2s}.lock-switch input:checked+.switch-ui{background:#1769f6}.lock-switch input:checked+.switch-ui:after{transform:translateX(19px)}.lock-switch span:last-child b,.lock-switch span:last-child small{display:block}.lock-switch span:last-child b{font-size:13px;color:#17345e}.lock-switch span:last-child small{font-size:10px;color:#75839a;margin-top:2px}.availability-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px;transition:.2s}.availability-grid.disabled{opacity:.5}.availability-slot{display:flex;align-items:center;gap:9px;border:1px solid #d7e2ef;background:#fff;border-radius:11px;padding:11px;cursor:pointer;min-height:58px}.availability-slot:hover{border-color:#78a6ef}.availability-slot input{position:absolute;opacity:0}.availability-check{width:22px;height:22px;border:2px solid #aabbd1;border-radius:6px;color:transparent;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto}.availability-slot.checked{border-color:#2e79ee;background:#eff6ff}.availability-slot.checked .availability-check{background:#1769f6;border-color:#1769f6;color:#fff}.availability-slot b,.availability-slot small{display:block}.availability-slot b{font-size:12px;color:#17355f}.availability-slot small{font-size:10px;color:#74829a;margin-top:3px}.teacher-request-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:15px;padding-top:14px;border-top:1px solid #dce6f3}.teacher-request-actions .muted{font-size:11px;max-width:680px}.slot-check.teacher-blocked{background:#fff7ee;border-color:#f1c38d;opacity:.72}.slot-check.teacher-blocked .slot-free{color:#b66b11}.assignment-text small{line-height:1.35}
@media(max-width:850px){.availability-day-head,.teacher-request-actions{align-items:stretch;flex-direction:column}.availability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* =========================================================
   SIJAR - Konsistensi Tombol Aksi (patch)
   Semua tombol solid, kontras, dan tidak terlalu tebal.
   ========================================================= */
.btn{
    font-weight:600;
    background:#e3ebf7;
    color:#17365f;
    border:1px solid #cfdbeb;
    box-shadow:0 4px 10px rgba(16,51,101,.08);
}
.btn.primary{background:#1769f6;color:#fff;border-color:#1769f6}
.btn.info{background:#0b92c5;color:#fff;border-color:#0b92c5}
.btn.success{background:#15975b;color:#fff;border-color:#15975b}
.btn.purple{background:#6d3acb;color:#fff;border-color:#6d3acb}
.btn.dark{background:#18385f;color:#fff;border-color:#18385f}
.btn.edit{background:#246bd9;color:#fff;border-color:#246bd9}
.btn.danger,.btn.danger.solid{background:#d94352;color:#fff;border-color:#d94352}
.btn.warning{background:#f2a724;color:#fff;border-color:#f2a724}
.btn.warning.solid{background:#e99a14;color:#fff;border-color:#e99a14}
.btn:hover{filter:brightness(.95);box-shadow:0 6px 14px rgba(16,51,101,.12)}
.btn.sm{font-weight:600}
.panel-head .actions .btn{white-space:nowrap}
@media(max-width:1100px){.panel-head .actions{width:100%}.panel-head .actions .btn{flex:0 1 auto}}


/* SIJAR - final consistency pass: button weight, spacing, and compact master toolbar */
.btn,
.btn.sm,
.day-tab,
.academic-day-tab,
.slot-delete,
.icon-btn,
.top-logout,
.pagination a,
button[type="submit"],
button[type="button"]{
    font-weight:500 !important;
}

/* Keep action buttons clearly separated in every table. */
td.nowrap > .btn + .inline,
td.nowrap > .inline + .btn,
td.action-cell > .btn + .inline{
    margin-left:8px;
}

/* Master actions stay compact and aligned; page heading already explains context. */
.data-panel .panel-head .actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.data-panel .panel-head .actions .btn{
    min-width:112px;
    padding-left:16px;
    padding-right:16px;
}
.data-panel .data-toolbar{
    align-items:center;
}

/* Do not let compact action labels distort table position. */
.data-panel .table-wrap{
    margin-top:2px;
}

/* =========================================================
   SIJAR 2026 - Dashboard & Login Professional
   ========================================================= */

/* Sidebar: teks lebih besar namun tetap ramping (bukan bold). */
.sidebar .nav-item,
.sidebar .nav-group-toggle{
    font-size:18px;
    font-weight:500 !important;
    letter-spacing:.05px;
}
.sidebar .nav-submenu a{
    font-size:15.5px;
    font-weight:500 !important;
    line-height:1.3;
}
.sidebar .nav-icon{font-size:18px}

/* Seluruh tombol aplikasi menggunakan bobot medium agar tidak menyilaukan. */
.btn,
.btn.sm,
.icon-btn,
.top-logout,
.pagination a,
button,
input[type="submit"],
input[type="button"]{
    font-weight:500 !important;
}

/* Dashboard welcome horizontal */
.dashboard-welcome-card{
    min-height:118px;
    margin-bottom:22px;
    padding:22px 26px;
    border-radius:20px;
    background:linear-gradient(112deg,#0d376f 0%,#145fc9 62%,#1599b6 100%);
    color:#fff;
    display:flex;
    align-items:center;
    gap:18px;
    box-shadow:0 15px 32px rgba(18,78,158,.20);
    position:relative;
    overflow:hidden;
}
.dashboard-welcome-card:after{
    content:"";
    position:absolute;
    width:260px;height:260px;
    right:-80px;top:-140px;
    border-radius:50%;
    border:38px solid rgba(255,255,255,.06);
}
.dashboard-welcome-icon{
    width:62px;height:62px;min-width:62px;
    border-radius:17px;
    display:grid;place-items:center;
    font-size:29px;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.dashboard-welcome-copy{flex:1;position:relative;z-index:1}
.dashboard-welcome-copy>span{font-size:11px;letter-spacing:1.5px;color:#dceaff}
.dashboard-welcome-copy h2{font-size:25px;margin:5px 0 4px;font-weight:650}
.dashboard-welcome-copy p{margin:0;font-size:13px;color:#e4efff;line-height:1.55}
.dashboard-welcome-role{
    position:relative;z-index:1;
    min-width:135px;
    padding:12px 16px;
    border-radius:14px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.2);
    text-align:right;
}
.dashboard-welcome-role small,.dashboard-welcome-role b{display:block}
.dashboard-welcome-role small{font-size:10px;color:#d9e8ff;margin-bottom:3px}
.dashboard-welcome-role b{font-size:14px;font-weight:600}

/* Card dashboard berwarna solid. */
.solid-stats .stat{
    border:0;
    color:#fff;
    min-height:142px;
    box-shadow:0 14px 26px rgba(17,52,105,.15);
    transition:transform .18s ease,box-shadow .18s ease;
}
.solid-stats .stat:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(17,52,105,.19)}
.solid-stats .stat-blue{background:#1769e8}
.solid-stats .stat-green{background:#15935f}
.solid-stats .stat-purple{background:#6e47cf}
.solid-stats .stat-orange{background:#e88716}
.solid-stats .stat-icon{
    width:60px;height:60px;
    background:rgba(255,255,255,.16) !important;
    border:1px solid rgba(255,255,255,.22);
    box-shadow:none;
    font-size:27px;
}
.solid-stats .stat span,
.solid-stats .stat small,
.solid-stats .stat strong{color:#fff}
.solid-stats .stat span{font-size:14px;opacity:.92}
.solid-stats .stat strong{font-size:31px;font-weight:650}
.solid-stats .stat small{opacity:.78}

/* =================== Login Professional =================== */
.login-pro{
    min-height:100vh;
    padding:28px;
    background:
        radial-gradient(circle at 14% 14%,color-mix(in srgb,var(--login-primary) 45%,transparent) 0,transparent 30%),
        linear-gradient(135deg,#07162f 0%,#0b2147 50%,#071327 100%);
    display:grid;
    place-items:center;
}
.login-shell{
    width:min(1180px,100%);
    min-height:690px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 32px 80px rgba(0,0,0,.34);
}
.login-brand-panel{
    position:relative;
    overflow:hidden;
    padding:54px 58px;
    color:#fff;
    background:linear-gradient(145deg,var(--login-primary) 0%,color-mix(in srgb,var(--login-primary) 74%,#102f6d) 52%,var(--login-secondary) 100%);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.login-brand-panel:before{
    content:"";position:absolute;inset:0;opacity:.11;pointer-events:none;
    background:
        radial-gradient(ellipse at center,transparent 28%,#fff 30%,transparent 33%) 0 0/84px 54px,
        radial-gradient(ellipse at center,transparent 28%,#fff 30%,transparent 33%) 42px 27px/84px 54px;
    transform:rotate(-8deg) scale(1.1);
}
.login-school-badge{
    align-self:flex-start;
    position:relative;z-index:2;
    padding:8px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.16);
    font-size:11px;
    letter-spacing:1.15px;
    margin-bottom:30px;
}
.login-brand-main{display:flex;align-items:center;gap:22px;position:relative;z-index:2}
.login-school-logo-wrap{
    width:92px;height:92px;min-width:92px;
    border-radius:22px;
    background:#fff;
    display:grid;place-items:center;
    padding:8px;
    box-shadow:0 14px 32px rgba(0,0,0,.18);
}
.login-school-logo{width:100%;height:100%;object-fit:contain;border-radius:14px}
.login-brand-main h1{font-size:50px;line-height:1;margin:0 0 9px;font-weight:720;letter-spacing:.5px}
.login-brand-main h2{font-size:21px;line-height:1.35;margin:0;font-weight:520;color:#f3f8ff}
.login-school-name{position:relative;z-index:2;font-size:15px;line-height:1.7;margin:27px 0 22px;max-width:520px;color:#edf5ff}
.login-feature-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;max-width:500px}
.login-feature-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:11px;background:rgba(7,28,68,.14);border:1px solid rgba(255,255,255,.14)}
.login-feature-item span{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18);font-size:11px}
.login-feature-item b{font-size:11.5px;font-weight:500}
.login-brand-decoration{position:absolute;width:360px;height:360px;border:54px solid rgba(255,255,255,.06);border-radius:50%;right:-150px;bottom:-170px}

.login-form-panel{display:flex;flex-direction:column;background:#fff;min-width:0}
.login-form-inner{width:min(440px,calc(100% - 76px));margin:auto;padding:52px 0 32px}
.login-mobile-logo{display:none}
.login-kicker{display:inline-block;color:var(--login-primary);font-size:10.5px;letter-spacing:1.15px;font-weight:600;margin-bottom:13px}
.login-form-inner h3{font-size:31px;line-height:1.15;margin:0 0 9px;color:#0b1c3c;font-weight:680}
.login-subtitle{font-size:14px;color:#758198;margin:0 0 28px;line-height:1.6}
.login-form{display:flex;flex-direction:column;gap:16px}
.login-field{margin:0}
.login-field label{
    display:block;
    font-size:15.5px;
    color:#142b52;
    font-weight:560;
    margin-bottom:8px;
}
.login-input-wrap{position:relative;display:flex;align-items:center}
.login-input-wrap input{
    width:100%;height:52px;
    border:1.5px solid #d7e1ef;
    border-radius:12px;
    background:#fbfdff;
    padding:0 47px 0 43px;
    color:#10264a;
    font-size:15px;
    outline:none;
    transition:border-color .17s ease,box-shadow .17s ease,background .17s ease;
}
.login-input-wrap input:focus{border-color:var(--login-primary);background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--login-primary) 11%,transparent)}
.login-input-icon{position:absolute;left:15px;z-index:1;color:#7890b1;font-size:13px}
.password-toggle{
    position:absolute;right:8px;
    width:37px;height:37px;
    border:0;border-radius:9px;
    background:transparent;
    color:#667b9c;
    cursor:pointer;
    display:grid;place-items:center;
    font-size:16px;
}
.password-toggle:hover{background:#eef4fd;color:var(--login-primary)}
.password-toggle.showing{color:var(--login-primary);background:#eef5ff}
.remember-row{display:grid;grid-template-columns:auto 1fr;column-gap:10px;position:relative;cursor:pointer;padding:3px 0 2px;color:#183052}
.remember-row input{position:absolute;opacity:0;pointer-events:none}
.remember-box{grid-row:1/3;width:21px;height:21px;border-radius:6px;border:1.5px solid #aebed3;background:#fff;display:grid;place-items:center;color:transparent;font-size:12px;margin-top:2px}
.remember-row input:checked+.remember-box{background:var(--login-primary);border-color:var(--login-primary);color:#fff}
.remember-row b,.remember-row small{display:block}
.remember-row b{font-size:12.5px;font-weight:550}
.remember-row small{font-size:10.5px;color:#7a879c;margin-top:3px;line-height:1.35}
.login-submit{height:52px;margin-top:3px;border-radius:11px;background:var(--login-primary) !important;border-color:var(--login-primary) !important;box-shadow:0 10px 22px color-mix(in srgb,var(--login-primary) 25%,transparent);font-size:14px}
.login-submit i{font-style:normal;font-size:18px;margin-left:auto}
.login-role-note{text-align:center;color:#7d899d;font-size:11px;margin-top:20px}
.login-role-note span{padding:0 5px;color:#b3becd}
.login-footer{min-height:64px;border-top:1px solid #edf1f6;padding:14px 34px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#8a95a8;font-size:10.5px}
.login-footer b{font-weight:600;color:#52627c}
.login-alert{margin:0 0 17px}

/* Pengaturan halaman login */
.login-settings-panel{max-width:1180px;margin-left:auto;margin-right:auto}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.settings-section{border:1px solid #dfe7f2;border-radius:15px;padding:18px;background:#fbfdff}
.settings-section h4{margin:0 0 15px;font-size:16px;color:#17345f;font-weight:600}
.full-field{grid-column:1/-1}
.login-logo-setting{display:grid;grid-template-columns:86px 1fr;gap:13px 16px;align-items:center}
.login-logo-preview{width:86px;height:86px;border:1px solid #dce5f0;border-radius:15px;background:#fff;padding:7px;display:grid;place-items:center;grid-row:1/3}
.login-logo-preview img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.simple-check{font-size:11px;color:#5b6c84;display:flex;gap:7px;align-items:center}
.color-setting-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}
.color-setting-row input[type="color"]{height:44px;padding:4px;cursor:pointer}
.settings-actions{justify-content:flex-end;margin-top:18px}
.settings-actions .btn{min-width:180px}

@media(max-width:1000px){
    .login-shell{grid-template-columns:.9fr 1.1fr;min-height:650px}
    .login-brand-panel{padding:42px 36px}
    .login-brand-main{align-items:flex-start;flex-direction:column;gap:16px}
    .login-brand-main h1{font-size:41px}
    .login-feature-grid{grid-template-columns:1fr}
    .settings-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
    .login-pro{padding:14px;align-items:start}
    .login-shell{grid-template-columns:1fr;min-height:auto;border-radius:22px;margin:12px 0}
    .login-brand-panel{display:none}
    .login-form-inner{width:calc(100% - 42px);padding:34px 0 28px}
    .login-mobile-logo{display:grid;width:74px;height:74px;border:1px solid #e0e8f3;border-radius:18px;padding:6px;margin-bottom:23px;box-shadow:0 9px 22px rgba(20,57,110,.10)}
    .login-mobile-logo img{width:100%;height:100%;object-fit:contain;border-radius:12px}
    .login-form-inner h3{font-size:27px}
    .login-footer{flex-direction:column;text-align:center;padding:16px 22px}
    .dashboard-welcome-card{align-items:flex-start;padding:20px;gap:13px}
    .dashboard-welcome-icon{width:48px;height:48px;min-width:48px;border-radius:14px;font-size:22px}
    .dashboard-welcome-copy h2{font-size:20px}
    .dashboard-welcome-role{display:none}
}
@media(max-width:520px){
    .sidebar .nav-item,.sidebar .nav-group-toggle{font-size:17px}
    .sidebar .nav-submenu a{font-size:15px}
    .login-pro{padding:8px}
    .login-shell{border-radius:18px}
    .login-form-inner{width:calc(100% - 32px)}
    .login-input-wrap input{height:50px}
}

/* ========================================================================== 
   SIJAR LOGIN VISUAL FINAL - seluruh tampilan dikendalikan dari Sistem > Halaman Login
   ========================================================================== */
.login-visual-final{
    min-height:100vh;
    margin:0;
    padding:0;
    background:linear-gradient(135deg,#06162f 0%,var(--login-secondary) 55%,#06142a 100%);
    color:#0a1f42;
}
.login-stage{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(520px,.96fr);
    overflow:hidden;
}
.login-hero{
    position:relative;
    min-height:100vh;
    background:
        linear-gradient(rgba(4,22,55,var(--login-overlay)),rgba(3,20,48,calc(var(--login-overlay) + .10))),
        var(--login-bg),
        linear-gradient(145deg,var(--login-primary),var(--login-secondary));
    background-size:cover;
    background-position:center;
    color:#fff;
    overflow:hidden;
}
.login-hero:after{
    content:"";
    position:absolute;
    inset:auto -10% -28px -5%;
    height:150px;
    opacity:.45;
    pointer-events:none;
    background:
      radial-gradient(100px 28px at 10% 45%,transparent 67%,rgba(51,137,255,.72) 68%,transparent 70%),
      radial-gradient(140px 34px at 30% 60%,transparent 67%,rgba(44,120,237,.66) 68%,transparent 70%),
      radial-gradient(120px 28px at 54% 36%,transparent 67%,rgba(51,137,255,.65) 68%,transparent 70%),
      radial-gradient(150px 38px at 80% 58%,transparent 67%,rgba(44,120,237,.63) 68%,transparent 70%);
}
.login-hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 18% 10%,rgba(75,173,255,.20),transparent 28%),linear-gradient(90deg,rgba(2,15,40,.12),rgba(2,15,40,.02));pointer-events:none}
.login-hero-content{
    position:relative;
    z-index:2;
    min-height:100vh;
    max-width:760px;
    padding:56px clamp(48px,6vw,108px) 54px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.login-hero-logo{
    width:128px;
    height:128px;
    object-fit:contain;
    align-self:center;
    filter:drop-shadow(0 12px 25px rgba(0,0,0,.25));
    margin-bottom:26px;
}
.login-hero-title{text-align:center}
.login-hero-title h1{
    font-size:clamp(58px,7vw,88px);
    line-height:.98;
    margin:0;
    letter-spacing:.015em;
    font-weight:700;
    text-shadow:0 5px 18px rgba(0,0,0,.20);
}
.login-hero-title p{
    margin:18px 0 0;
    font-size:clamp(20px,2.1vw,30px);
    font-weight:500;
    color:#f4f8ff;
    letter-spacing:.01em;
}
.login-hero-rule{width:52px;height:5px;border-radius:99px;background:var(--login-accent);margin:22px auto 18px;box-shadow:0 0 18px color-mix(in srgb,var(--login-accent) 48%,transparent)}
.login-school-name-final{margin:0 auto 28px;max-width:610px;text-align:center;font-size:clamp(16px,1.45vw,22px);line-height:1.55;color:#eef6ff;font-weight:430}
.login-feature-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2px}
.login-feature-card{
    min-height:92px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 17px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:14px;
    background:linear-gradient(135deg,rgba(7,31,72,.76),rgba(16,58,116,.50));
    box-shadow:0 10px 25px rgba(2,13,34,.18);
    backdrop-filter:blur(4px);
}
.login-feature-icon{
    width:48px;height:48px;min-width:48px;border-radius:12px;
    display:grid;place-items:center;
    color:#fff;background:var(--login-primary);
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.login-feature-card:nth-child(2) .login-feature-icon{background:#13a765}.login-feature-card:nth-child(3) .login-feature-icon{background:#7d42df}.login-feature-card:nth-child(4) .login-feature-icon{background:#f38a18}
.login-feature-icon svg{width:25px;height:25px;fill:currentColor}
.login-feature-card h3{margin:0 0 5px;color:#fff;font-size:15px;font-weight:600}
.login-feature-card p{margin:0;color:#dce9fb;font-size:12px;line-height:1.45;font-weight:400}
.login-slogan{margin:28px auto 0;color:#ffc14a;font-size:21px;font-weight:500;font-style:italic;letter-spacing:.01em;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.22)}

.login-access-panel{
    min-height:100vh;
    padding:34px clamp(28px,4.4vw,78px);
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at 85% 12%,color-mix(in srgb,var(--login-primary) 11%,transparent),transparent 32%),
      linear-gradient(145deg,#edf4ff 0%,#f8fbff 55%,#e8f1ff 100%);
}
.login-access-card{
    width:min(100%,640px);
    background:var(--login-panel);
    border:1px solid rgba(112,145,195,.20);
    border-radius:28px;
    box-shadow:0 26px 70px rgba(18,55,107,.22);
    padding:38px 46px 0;
    overflow:hidden;
}
.login-card-top{text-align:center;margin-bottom:26px}
.login-portal-pill{
    display:inline-flex;align-items:center;gap:9px;
    padding:9px 18px;border-radius:999px;
    background:color-mix(in srgb,var(--login-primary) 8%,#fff);
    color:var(--login-primary);font-size:13px;font-weight:600;letter-spacing:.02em;
}
.login-portal-pill svg{width:22px;height:22px;fill:currentColor}
.login-card-top h2{margin:24px 0 8px;font-size:34px;line-height:1.15;color:#0a1d3d;font-weight:700}
.login-card-top p{margin:0;color:#76839a;font-size:15px;line-height:1.6}
.login-title-dots{margin:18px auto 0;display:flex;justify-content:center;gap:6px;align-items:center}
.login-title-dots b,.login-title-dots span{display:block;height:7px;border-radius:99px;background:#9eb4d6}.login-title-dots b{width:25px;background:var(--login-primary)}.login-title-dots span{width:7px}
.login-form-final{display:flex;flex-direction:column;gap:19px}
.login-field-final{margin:0}
.login-field-final label{display:block;margin-bottom:8px;color:#0e2548;font-size:15px;font-weight:600}
.login-input-final{height:62px;border:1.5px solid #d8e1ef;border-radius:14px;background:#fff;display:flex;align-items:center;position:relative;transition:border-color .18s ease,box-shadow .18s ease}
.login-input-final:focus-within{border-color:var(--login-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--login-primary) 10%,transparent)}
.login-input-final>svg{width:21px;height:21px;fill:#6f84a6;margin-left:18px;flex:0 0 auto}
.login-input-final input{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;height:100%;width:100%;padding:0 48px 0 13px;font-size:16px;color:#10284d}
.login-input-final input::placeholder{color:#97a4b6}
.password-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:10px;background:transparent;color:#6680a6;display:grid;place-items:center;cursor:pointer}
.password-eye:hover{background:#eef4ff;color:var(--login-primary)}
.password-eye svg{width:23px;height:23px;fill:currentColor}.password-eye .eye-hidden{display:none}.password-eye.is-visible .eye-visible{display:none}.password-eye.is-visible .eye-hidden{display:block}
.remember-final{display:grid;grid-template-columns:auto 1fr;gap:11px;position:relative;cursor:pointer;align-items:start;color:#17345d}
.remember-final input{position:absolute;opacity:0;pointer-events:none}.remember-check{width:23px;height:23px;border:1.5px solid #adc0d9;border-radius:6px;color:transparent;display:grid;place-items:center;margin-top:1px;font-size:13px;background:#fff}.remember-final input:checked+.remember-check{background:var(--login-primary);border-color:var(--login-primary);color:#fff}.remember-final b,.remember-final small{display:block}.remember-final b{font-size:13px;font-weight:600;margin-bottom:3px}.remember-final small{font-size:11px;color:#8290a5;line-height:1.35}
.login-primary-button{height:60px;border:0;border-radius:13px;background:var(--login-button);color:#fff;font-size:16px;font-weight:560;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 13px 30px color-mix(in srgb,var(--login-button) 28%,transparent);transition:transform .16s ease,box-shadow .16s ease}.login-primary-button:hover{transform:translateY(-1px);box-shadow:0 16px 34px color-mix(in srgb,var(--login-button) 34%,transparent)}.login-primary-button svg{width:23px;height:23px;fill:currentColor}
.login-roles-final{margin-top:27px}.login-role-divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;color:#8d99ab;font-size:11px}.login-role-divider span{height:1px;background:#dbe3ef}.login-role-divider b{font-weight:500}.login-role-badges{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}.login-role-badges span{padding:9px 15px;border-radius:999px;font-size:11.5px;font-weight:500;border:1px solid}.role-admin{background:#eef4ff;border-color:#d7e5ff!important;color:#1958ca}.role-curriculum{background:#edf9f2;border-color:#d7f0e0!important;color:#158d55}.role-teacher{background:#fff6ed;border-color:#ffe1c3!important;color:#e26e08}
.login-card-footer-final{margin:32px -46px 0;padding:20px 28px;background:linear-gradient(90deg,#092453,#071b3e);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px}.login-security{display:flex;align-items:center;gap:10px}.security-lock{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.10);font-size:16px}.login-security b,.login-security small,.login-credit span,.login-credit small{display:block}.login-security b{font-size:11.5px;font-weight:600}.login-security small{font-size:9.5px;color:#aebed8;margin-top:3px}.login-credit{text-align:right}.login-credit span{font-size:10.5px}.login-credit b{color:#ffb03d;font-weight:650}.login-credit small{font-size:9px;color:#9fb0cb;margin-top:4px}

/* Admin: Halaman Login */
.login-settings-final{max-width:1280px;margin-inline:auto;overflow:visible}.login-settings-head{align-items:center}.settings-head-actions{display:flex;gap:10px}.settings-tabs{display:flex;gap:8px;padding:0 20px 16px;overflow-x:auto;border-bottom:1px solid #e2e9f3}.settings-tab{border:1px solid #dce5f2;background:#fff;color:#47607f;border-radius:10px;padding:10px 14px;white-space:nowrap;font-size:12px;font-weight:500;cursor:pointer}.settings-tab:hover{border-color:#a9bee0;background:#f6f9fe}.settings-tab.active{background:#135fe8;border-color:#135fe8;color:#fff;box-shadow:0 7px 16px rgba(19,95,232,.18)}.settings-tab-panels{padding:18px 20px 10px}.settings-tab-panel{display:none}.settings-tab-panel.active{display:block}.wide-section{width:100%}.settings-section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:17px}.settings-section-title h4{margin-bottom:4px}.settings-section-title p{margin:0;color:#77879d;font-size:11.5px}.settings-form-grid{grid-template-columns:1fr 1fr;gap:14px}.settings-media-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:16px}.media-preview-card{border:1px solid #dfe7f2;background:#f2f6fb;border-radius:14px;margin-bottom:14px;overflow:hidden}.logo-media-card{height:150px;display:grid;place-items:center}.logo-media-card img{max-width:120px;max-height:120px;object-fit:contain}.background-media-card{height:210px;background-size:cover;background-position:center}.media-options-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}.feature-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.feature-setting-card{border:1px solid #dde6f1;background:#fff;border-radius:14px;padding:15px}.feature-setting-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.feature-setting-top h5{margin:0;color:#18375f;font-size:13px}.switch-line{display:flex;gap:6px;align-items:center;font-size:10.5px;color:#62758f}.appearance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.color-field{display:grid;grid-template-columns:64px 1fr;grid-template-areas:"label label" "input value";align-items:center;column-gap:10px}.color-field label{grid-area:label}.color-field input{grid-area:input;width:64px;height:45px;padding:3px;border-radius:9px}.color-field span{grid-area:value;color:#667990;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.overlay-field{grid-column:1/-1}.overlay-field input{width:100%}.overlay-field output{display:inline-block;margin-top:6px;color:#47607f;font-size:12px}.settings-sticky-actions{position:sticky;bottom:0;z-index:8;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid #e0e8f2;margin:12px -20px -20px;padding:14px 20px;display:flex;justify-content:flex-end;gap:10px;border-radius:0 0 16px 16px}.login-settings-final .btn{font-weight:500}

@media(max-width:1100px){
  .login-stage{grid-template-columns:1fr 1fr}.login-hero-content{padding-inline:46px}.login-feature-cards{grid-template-columns:1fr}.login-access-panel{padding-inline:28px}.settings-media-grid{grid-template-columns:1fr}.appearance-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .login-stage{display:block}.login-hero{min-height:auto}.login-hero-content{min-height:auto;padding:34px 24px}.login-hero-logo{width:88px;height:88px;margin-bottom:16px}.login-hero-title h1{font-size:48px}.login-hero-title p{font-size:19px}.login-school-name-final{font-size:15px;margin-bottom:20px}.login-feature-cards{display:none}.login-slogan{font-size:16px;margin-top:15px}.login-access-panel{min-height:auto;padding:22px 15px 32px}.login-access-card{padding:28px 24px 0;border-radius:22px}.login-card-top h2{font-size:29px}.login-card-footer-final{margin:28px -24px 0;padding:18px 20px}.settings-form-grid,.feature-settings-grid{grid-template-columns:1fr}.appearance-grid{grid-template-columns:1fr}.settings-sticky-actions{flex-wrap:wrap}.settings-sticky-actions .btn{flex:1;min-width:130px}
}
@media(max-width:520px){
  .login-hero-content{padding:25px 18px}.login-hero-logo{width:72px;height:72px}.login-hero-title h1{font-size:40px}.login-hero-title p{font-size:17px}.login-school-name-final{font-size:13px}.login-access-panel{padding:12px 8px 22px}.login-access-card{padding:24px 16px 0;border-radius:18px}.login-card-top h2{font-size:26px}.login-input-final{height:56px}.login-card-footer-final{margin:25px -16px 0;padding:16px;flex-direction:column;align-items:flex-start}.login-credit{text-align:left}.login-role-badges{gap:6px}.login-role-badges span{padding:8px 10px;font-size:10.5px}.settings-tabs{padding-inline:12px}.settings-tab-panels{padding-inline:12px}.settings-sticky-actions{margin-inline:-12px}.media-options-row{display:grid;gap:8px}
}

/* =========================================================
   LOGIN FINAL - RESPONSIVE 1 LAYAR DESKTOP
   Menjaga seluruh komponen login tetap terlihat dalam viewport
   tanpa scroll pada desktop/laptop normal.
   ========================================================= */
@media (min-width:821px){
  .login-visual-final{
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  .login-stage{
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  .login-hero,
  .login-access-panel{
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  .login-hero-content{
    height:100%;
    min-height:0;
    box-sizing:border-box;
    justify-content:center;
    padding-top:clamp(20px,3vh,38px);
    padding-bottom:clamp(18px,2.8vh,34px);
  }
  .login-hero-logo{
    width:clamp(72px,9vh,108px);
    height:clamp(72px,9vh,108px);
    margin-bottom:clamp(10px,1.7vh,18px);
  }
  .login-hero-title h1{
    font-size:clamp(48px,7vh,72px);
  }
  .login-hero-title p{
    margin-top:clamp(8px,1.4vh,14px);
    font-size:clamp(17px,2.6vh,24px);
  }
  .login-hero-rule{
    margin-top:clamp(10px,1.7vh,17px);
    margin-bottom:clamp(8px,1.5vh,14px);
    height:4px;
  }
  .login-school-name-final{
    margin-bottom:clamp(12px,2vh,20px);
    font-size:clamp(14px,2vh,18px);
    line-height:1.4;
  }
  .login-feature-cards{
    gap:clamp(7px,1.2vh,10px) 10px;
  }
  .login-feature-card{
    min-height:0;
    padding:clamp(9px,1.35vh,12px) 13px;
    gap:11px;
  }
  .login-feature-icon{
    width:clamp(38px,5.5vh,45px);
    height:clamp(38px,5.5vh,45px);
    min-width:clamp(38px,5.5vh,45px);
  }
  .login-feature-icon svg{
    width:22px;
    height:22px;
  }
  .login-feature-card h3{
    margin-bottom:3px;
    font-size:clamp(12px,1.75vh,14px);
  }
  .login-feature-card p{
    font-size:clamp(10px,1.45vh,11.5px);
    line-height:1.35;
  }
  .login-slogan{
    margin-top:clamp(10px,1.7vh,17px);
    font-size:clamp(15px,2.3vh,19px);
  }

  .login-access-panel{
    box-sizing:border-box;
    padding-top:clamp(12px,2.2vh,24px);
    padding-bottom:clamp(12px,2.2vh,24px);
  }
  .login-access-card{
    max-height:calc(100dvh - 24px);
    width:min(100%,610px);
    box-sizing:border-box;
    padding:clamp(20px,3vh,30px) clamp(30px,3.2vw,44px) 0;
    border-radius:clamp(18px,2.6vh,26px);
    display:flex;
    flex-direction:column;
  }
  .login-card-top{
    margin-bottom:clamp(12px,1.8vh,18px);
  }
  .login-portal-pill{
    padding:clamp(6px,1vh,8px) 15px;
    font-size:12px;
  }
  .login-portal-pill svg{
    width:19px;
    height:19px;
  }
  .login-card-top h2{
    margin:clamp(12px,1.8vh,18px) 0 5px;
    font-size:clamp(27px,4vh,32px);
  }
  .login-card-top p{
    font-size:clamp(12px,1.8vh,14px);
    line-height:1.4;
  }
  .login-title-dots{
    margin-top:clamp(9px,1.35vh,13px);
  }
  .login-form-final{
    gap:clamp(10px,1.5vh,14px);
  }
  .login-field-final label{
    margin-bottom:5px;
    font-size:clamp(13px,1.8vh,14.5px);
  }
  .login-input-final{
    height:clamp(48px,6.6vh,56px);
    border-radius:12px;
  }
  .login-input-final input{
    font-size:clamp(14px,1.9vh,15.5px);
  }
  .remember-check{
    width:21px;
    height:21px;
  }
  .remember-final b{
    font-size:12px;
  }
  .remember-final small{
    font-size:10px;
  }
  .login-primary-button{
    height:clamp(48px,6.5vh,56px);
    font-size:15px;
  }
  .login-roles-final{
    margin-top:clamp(12px,1.8vh,18px);
  }
  .login-role-badges{
    margin-top:10px;
  }
  .login-role-badges span{
    padding:7px 12px;
    font-size:10.5px;
  }
  .login-card-footer-final{
    margin-top:clamp(14px,2vh,20px);
    padding:clamp(11px,1.6vh,15px) 22px;
  }
  .security-lock{
    width:32px;
    height:32px;
  }
  .login-security b{
    font-size:10.5px;
  }
  .login-security small,
  .login-credit span{
    font-size:9px;
  }
  .login-credit small{
    font-size:8px;
  }
}

/* Laptop dengan tinggi layar pendek (mis. 1366x768 / browser toolbar besar). */
@media (min-width:821px) and (max-height:760px){
  .login-hero-content{padding-top:14px;padding-bottom:14px}
  .login-hero-logo{width:68px;height:68px;margin-bottom:8px}
  .login-hero-title h1{font-size:46px}
  .login-hero-title p{font-size:16px;margin-top:7px}
  .login-hero-rule{margin:8px auto 7px;height:3px}
  .login-school-name-final{font-size:13px;margin-bottom:9px}
  .login-feature-cards{gap:6px 8px}
  .login-feature-card{padding:7px 10px;gap:8px;border-radius:11px}
  .login-feature-icon{width:34px;height:34px;min-width:34px;border-radius:9px}
  .login-feature-icon svg{width:19px;height:19px}
  .login-feature-card h3{font-size:11.5px;margin-bottom:1px}
  .login-feature-card p{font-size:9.5px;line-height:1.25}
  .login-slogan{font-size:14px;margin-top:8px}
  .login-access-panel{padding-top:8px;padding-bottom:8px}
  .login-access-card{max-height:calc(100dvh - 16px);padding-top:16px}
  .login-card-top{margin-bottom:9px}
  .login-portal-pill{padding:5px 12px;font-size:10.5px}
  .login-card-top h2{font-size:25px;margin:9px 0 3px}
  .login-card-top p{font-size:11.5px}
  .login-title-dots{margin-top:7px}
  .login-form-final{gap:8px}
  .login-field-final label{font-size:12px;margin-bottom:4px}
  .login-input-final{height:45px}
  .login-input-final input{font-size:13.5px}
  .remember-final{gap:8px}
  .remember-check{width:19px;height:19px}
  .remember-final b{font-size:11px;margin-bottom:1px}
  .remember-final small{font-size:9px}
  .login-primary-button{height:45px;font-size:13.5px}
  .login-roles-final{margin-top:9px}
  .login-role-divider{font-size:9.5px}
  .login-role-badges{margin-top:7px;gap:6px}
  .login-role-badges span{padding:6px 10px;font-size:9.5px}
  .login-card-footer-final{margin-top:10px;padding:9px 18px}
  .security-lock{width:28px;height:28px;font-size:13px}
  .login-security b{font-size:9.5px}
  .login-security small,.login-credit span{font-size:8px}
  .login-credit small{font-size:7.5px}
}

/* =========================================================
   LOGIN PRESISI & MENYATU - FINAL
   Acuan: visual login SIJAR yang disepakati.
   ========================================================= */
.login-visual-final{
  background:#061b43;
}
.login-visual-final .login-stage{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,54%) minmax(420px,46%);
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(circle at 88% 15%, color-mix(in srgb,var(--login-primary) 26%,transparent), transparent 34%),
    linear-gradient(120deg,#0b4eb7 0%,#073277 42%,#061b43 76%,#04122d 100%);
  overflow:hidden;
}
.login-visual-final .login-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--login-bg) center/cover no-repeat;
  opacity:.96;
}
.login-visual-final .login-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(3,20,52,.28) 0%,rgba(3,20,52,.20) 44%,rgba(3,20,52,.48) 58%,rgba(3,20,52,.82) 100%),
    radial-gradient(circle at 12% 16%,rgba(39,132,255,.28),transparent 30%);
  pointer-events:none;
}
.login-visual-final .login-hero{
  min-height:100vh;
  min-height:100dvh;
  background:transparent;
  position:relative;
  z-index:1;
  padding-bottom:78px;
}
.login-visual-final .login-hero-overlay{
  background:linear-gradient(180deg,rgba(4,24,59,.08),rgba(2,18,45,.26));
}
.login-visual-final .login-hero-content{
  max-width:720px;
  width:min(78%,720px);
  margin-inline:auto;
  padding:clamp(28px,4vh,50px) 0 clamp(100px,12vh,135px);
  justify-content:center;
}
.login-visual-final .login-hero-logo{
  width:clamp(88px,10vh,118px);
  height:clamp(88px,10vh,118px);
  margin-bottom:clamp(12px,1.6vh,18px);
}
.login-visual-final .login-hero-title h1{
  font-size:clamp(54px,6.8vh,78px);
  font-weight:680;
  letter-spacing:.018em;
}
.login-visual-final .login-hero-title p{
  margin-top:12px;
  font-size:clamp(18px,2.1vh,25px);
  font-weight:520;
}
.login-visual-final .login-hero-rule{
  margin:16px auto 14px;
  width:58px;
  height:4px;
}
.login-visual-final .login-school-name-final{
  margin-bottom:18px;
  max-width:620px;
  font-size:clamp(15px,1.75vh,19px);
  line-height:1.45;
}
.login-visual-final .login-feature-cards{
  width:min(100%,620px);
  margin-inline:auto;
  gap:10px;
}
.login-visual-final .login-feature-card{
  min-height:78px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(4,31,72,.82),rgba(13,55,111,.64));
  border-color:rgba(255,255,255,.18);
}
.login-visual-final .login-feature-icon{
  width:44px;height:44px;min-width:44px;border-radius:11px;
}
.login-visual-final .login-feature-icon svg{width:23px;height:23px}
.login-visual-final .login-feature-card h3{font-size:14px;margin-bottom:3px;font-weight:580}
.login-visual-final .login-feature-card p{font-size:11.5px;line-height:1.35}
.login-visual-final .login-slogan{
  margin-top:18px;
  font-size:clamp(16px,2vh,20px);
  font-weight:520;
}

.login-visual-final .login-access-panel{
  min-height:100vh;
  min-height:100dvh;
  padding:clamp(24px,4vh,50px) clamp(28px,4vw,66px) clamp(105px,12vh,130px);
  display:flex;
  justify-content:center;
  align-items:center;
  background:transparent;
  position:relative;
  z-index:2;
}
.login-visual-final .login-access-card{
  width:min(100%,520px);
  max-width:520px;
  background:rgba(255,255,255,.985);
  border:1px solid rgba(255,255,255,.72);
  border-radius:26px;
  padding:30px 38px 30px;
  box-shadow:0 28px 70px rgba(1,18,49,.34),0 0 0 1px rgba(41,96,178,.04);
  overflow:visible;
  backdrop-filter:blur(16px);
}
.login-visual-final .login-card-top{margin-bottom:18px}
.login-visual-final .login-portal-pill{
  padding:8px 16px;
  font-size:12px;
  font-weight:540;
}
.login-visual-final .login-portal-pill svg{width:20px;height:20px}
.login-visual-final .login-card-top h2{
  margin:17px 0 5px;
  font-size:clamp(28px,3.5vh,36px);
  font-weight:680;
}
.login-visual-final .login-card-top p{font-size:14px;line-height:1.4}
.login-visual-final .login-title-dots{margin-top:12px}
.login-visual-final .login-form-final{gap:14px}
.login-visual-final .login-field-final label{
  margin-bottom:6px;
  font-size:14px;
  font-weight:560;
}
.login-visual-final .login-input-final{
  height:56px;
  border-radius:13px;
}
.login-visual-final .login-input-final input{font-size:15px}
.login-visual-final .remember-final{gap:9px}
.login-visual-final .remember-final b{font-size:12.5px;font-weight:560}
.login-visual-final .remember-final small{font-size:10.5px}
.login-visual-final .login-primary-button{
  height:56px;
  border-radius:12px;
  font-size:15px;
  font-weight:540;
}
.login-visual-final .login-roles-final{margin-top:18px}
.login-visual-final .login-role-badges{margin-top:10px;gap:8px}
.login-visual-final .login-role-badges span{padding:8px 13px;font-size:10.5px;font-weight:500}

.login-visual-final .login-global-footer{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:5;
  min-height:82px;
  background:linear-gradient(90deg,rgba(5,31,75,.96),rgba(3,19,48,.98));
  border-top:1px solid rgba(255,255,255,.12);
  color:#fff;
  display:flex;
  align-items:center;
  box-shadow:0 -12px 35px rgba(1,13,34,.18);
}
.login-visual-final .login-global-footer-inner{
  width:min(100% - 72px,1360px);
  margin-inline:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:26px;
}
.login-visual-final .login-global-footer .security-lock{
  width:38px;height:38px;
}
.login-visual-final .login-global-footer .login-security b{font-size:11.5px;font-weight:560}
.login-visual-final .login-global-footer .login-security small{font-size:9.5px}
.login-visual-final .login-global-footer .login-credit span{font-size:10.5px}
.login-visual-final .login-global-footer .login-credit b{font-weight:560}
.login-visual-final .login-global-footer .login-credit small{font-size:9px}

/* laptop pendek: tetap satu layar tanpa membuat form terlalu lebar */
@media (min-width:821px) and (max-height:820px){
  .login-visual-final .login-hero-content{padding-top:18px;padding-bottom:94px}
  .login-visual-final .login-hero-logo{width:72px;height:72px;margin-bottom:8px}
  .login-visual-final .login-hero-title h1{font-size:48px}
  .login-visual-final .login-hero-title p{font-size:17px;margin-top:8px}
  .login-visual-final .login-hero-rule{margin:10px auto 9px;height:3px}
  .login-visual-final .login-school-name-final{font-size:13px;margin-bottom:11px}
  .login-visual-final .login-feature-card{min-height:62px;padding:9px 11px}
  .login-visual-final .login-feature-icon{width:38px;height:38px;min-width:38px}
  .login-visual-final .login-feature-card h3{font-size:12.5px}
  .login-visual-final .login-feature-card p{font-size:10px}
  .login-visual-final .login-slogan{font-size:15px;margin-top:11px}
  .login-visual-final .login-access-panel{padding-top:16px;padding-bottom:92px}
  .login-visual-final .login-access-card{max-width:490px;padding:20px 30px 22px;border-radius:22px}
  .login-visual-final .login-card-top{margin-bottom:12px}
  .login-visual-final .login-card-top h2{font-size:27px;margin-top:11px}
  .login-visual-final .login-card-top p{font-size:12px}
  .login-visual-final .login-title-dots{margin-top:8px}
  .login-visual-final .login-form-final{gap:10px}
  .login-visual-final .login-input-final{height:48px}
  .login-visual-final .login-field-final label{font-size:12.5px;margin-bottom:4px}
  .login-visual-final .remember-check{width:20px;height:20px}
  .login-visual-final .remember-final b{font-size:11.5px}
  .login-visual-final .remember-final small{font-size:9.5px}
  .login-visual-final .login-primary-button{height:48px;font-size:14px}
  .login-visual-final .login-roles-final{margin-top:12px}
  .login-visual-final .login-role-badges{margin-top:7px}
  .login-visual-final .login-role-badges span{padding:6px 10px;font-size:9.5px}
  .login-visual-final .login-global-footer{min-height:70px}
}

@media (max-width:1100px) and (min-width:821px){
  .login-visual-final .login-stage{grid-template-columns:minmax(0,52%) minmax(410px,48%)}
  .login-visual-final .login-hero-content{width:84%}
  .login-visual-final .login-access-panel{padding-inline:24px}
  .login-visual-final .login-access-card{max-width:470px;padding-inline:28px}
}

/* Tablet/HP: menyatu, satu kolom dan tetap nyaman dibaca */
@media (max-width:820px){
  .login-visual-final{overflow:auto!important}
  .login-visual-final .login-stage{
    display:block;
    min-height:100vh;
    background:#061b43;
    overflow:visible;
  }
  .login-visual-final .login-stage::after{
    background:linear-gradient(180deg,rgba(2,18,45,.18) 0%,rgba(3,20,52,.62) 50%,rgba(3,20,52,.92) 100%);
  }
  .login-visual-final .login-hero{
    min-height:auto;
    height:auto;
    padding-bottom:0;
  }
  .login-visual-final .login-hero-content{
    width:min(92%,620px);
    padding:26px 18px 18px;
  }
  .login-visual-final .login-hero-logo{width:72px;height:72px;margin-bottom:8px}
  .login-visual-final .login-hero-title h1{font-size:42px}
  .login-visual-final .login-hero-title p{font-size:16px;margin-top:7px}
  .login-visual-final .login-hero-rule{margin:10px auto 9px}
  .login-visual-final .login-school-name-final{font-size:13px;margin-bottom:0}
  .login-visual-final .login-feature-cards,
  .login-visual-final .login-slogan{display:none}
  .login-visual-final .login-access-panel{
    min-height:auto;
    height:auto;
    padding:10px 14px 24px;
  }
  .login-visual-final .login-access-card{
    width:min(100%,520px);
    padding:25px 20px 24px;
    border-radius:22px;
  }
  .login-visual-final .login-global-footer{
    position:relative;
    min-height:auto;
    padding:16px 0;
  }
  .login-visual-final .login-global-footer-inner{
    width:min(100% - 32px,520px);
  }
}
@media (max-width:520px){
  .login-visual-final .login-card-top h2{font-size:26px}
  .login-visual-final .login-access-card{padding-inline:16px}
  .login-visual-final .login-global-footer-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .login-visual-final .login-credit{text-align:left}
}

/* =========================================================
   SIJAR LOGIN - PRESISI PROFESIONAL V2
   Koreksi dari hasil implementasi nyata:
   - halaman benar-benar full viewport, tanpa bingkai luar
   - panel kiri dan kanan terasa satu komposisi
   - card login lebih ramping dan proporsional
   - footer menyatu di bawah seluruh halaman
   ========================================================= */
.login-body.login-visual-final{
  display:block !important;
  place-items:initial !important;
  width:100% !important;
  min-width:0 !important;
  height:100vh !important;
  height:100dvh !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#061a3d !important;
}

.login-visual-final .login-stage{
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  height:100dvh !important;
  min-height:0 !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,53%) minmax(420px,47%) !important;
  position:relative;
  overflow:hidden !important;
  background:#061a3d;
}

/* Satu foto/background untuk keseluruhan halaman agar tidak terasa dua layar. */
.login-visual-final .login-stage::before{
  opacity:1 !important;
  background:var(--login-bg) center center/cover no-repeat !important;
}
.login-visual-final .login-stage::after{
  background:
    linear-gradient(90deg,
      rgba(3,20,52,.38) 0%,
      rgba(3,20,52,.30) 44%,
      rgba(4,24,61,.48) 58%,
      rgba(4,24,61,.74) 76%,
      rgba(4,24,61,.86) 100%),
    radial-gradient(circle at 17% 18%,rgba(32,125,255,.20),transparent 28%) !important;
}

.login-visual-final .login-hero{
  height:calc(100dvh - 76px) !important;
  min-height:0 !important;
  padding:0 !important;
  background:transparent !important;
  overflow:hidden !important;
}
.login-visual-final .login-hero-overlay{
  background:linear-gradient(180deg,rgba(2,18,45,.06),rgba(2,18,45,.24)) !important;
}
.login-visual-final .login-hero-content{
  width:min(74%,650px) !important;
  max-width:650px !important;
  height:calc(100dvh - 76px) !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:clamp(22px,3.3vh,36px) 0 clamp(18px,2.5vh,28px) !important;
  box-sizing:border-box;
  justify-content:center !important;
}
.login-visual-final .login-hero-logo{
  width:clamp(74px,8.2vh,94px) !important;
  height:clamp(74px,8.2vh,94px) !important;
  margin-bottom:clamp(8px,1.1vh,12px) !important;
}
.login-visual-final .login-hero-title h1{
  font-size:clamp(48px,6.1vh,66px) !important;
  line-height:1 !important;
  font-weight:660 !important;
}
.login-visual-final .login-hero-title p{
  margin-top:9px !important;
  font-size:clamp(16px,2vh,21px) !important;
  font-weight:500 !important;
}
.login-visual-final .login-hero-rule{
  margin:11px auto 10px !important;
  width:54px !important;
  height:3px !important;
}
.login-visual-final .login-school-name-final{
  margin-bottom:13px !important;
  font-size:clamp(13px,1.55vh,16px) !important;
  line-height:1.35 !important;
}
.login-visual-final .login-feature-cards{
  width:min(100%,570px) !important;
  gap:8px !important;
}
.login-visual-final .login-feature-card{
  min-height:64px !important;
  padding:9px 12px !important;
  gap:10px !important;
  border-radius:13px !important;
  background:linear-gradient(135deg,rgba(5,34,79,.84),rgba(16,62,122,.64)) !important;
}
.login-visual-final .login-feature-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:10px !important;
}
.login-visual-final .login-feature-icon svg{
  width:20px !important;
  height:20px !important;
}
.login-visual-final .login-feature-card h3{
  margin-bottom:2px !important;
  font-size:12.5px !important;
  font-weight:560 !important;
}
.login-visual-final .login-feature-card p{
  font-size:10px !important;
  line-height:1.28 !important;
}
.login-visual-final .login-slogan{
  margin-top:11px !important;
  font-size:clamp(14px,1.75vh,17px) !important;
  font-weight:520 !important;
}

/* Area form tidak lagi menjadi panel layar kedua. */
.login-visual-final .login-access-panel{
  height:calc(100dvh - 76px) !important;
  min-height:0 !important;
  padding:clamp(18px,2.8vh,30px) clamp(30px,5vw,86px) !important;
  background:transparent !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.login-visual-final .login-access-card{
  width:min(100%,480px) !important;
  max-width:480px !important;
  max-height:calc(100dvh - 116px) !important;
  padding:clamp(20px,2.6vh,28px) clamp(28px,2.6vw,36px) clamp(18px,2.2vh,24px) !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.985) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:0 26px 70px rgba(1,15,42,.34),0 0 0 1px rgba(57,105,179,.05) !important;
  backdrop-filter:blur(18px) !important;
}
.login-visual-final .login-card-top{
  margin-bottom:12px !important;
}
.login-visual-final .login-portal-pill{
  padding:6px 14px !important;
  font-size:10.5px !important;
  font-weight:520 !important;
}
.login-visual-final .login-portal-pill svg{
  width:18px !important;
  height:18px !important;
}
.login-visual-final .login-card-top h2{
  margin:11px 0 3px !important;
  font-size:clamp(27px,3.3vh,33px) !important;
  line-height:1.08 !important;
  font-weight:650 !important;
}
.login-visual-final .login-card-top p{
  font-size:12px !important;
  line-height:1.35 !important;
}
.login-visual-final .login-title-dots{
  margin-top:8px !important;
}
.login-visual-final .login-title-dots b,
.login-visual-final .login-title-dots span{
  height:6px !important;
}
.login-visual-final .login-form-final{
  gap:10px !important;
}
.login-visual-final .login-field-final label{
  margin-bottom:4px !important;
  font-size:12.5px !important;
  font-weight:540 !important;
}
.login-visual-final .login-input-final{
  height:49px !important;
  border-radius:12px !important;
}
.login-visual-final .login-input-final>svg{
  width:19px !important;
  height:19px !important;
  margin-left:16px !important;
}
.login-visual-final .login-input-final input{
  padding-left:12px !important;
  font-size:13.5px !important;
}
.login-visual-final .password-eye{
  width:38px !important;
  height:38px !important;
}
.login-visual-final .password-eye svg{
  width:21px !important;
  height:21px !important;
}
.login-visual-final .remember-final{
  gap:8px !important;
  align-items:center !important;
}
.login-visual-final .remember-check{
  width:20px !important;
  height:20px !important;
  border-radius:5px !important;
  margin-top:0 !important;
}
.login-visual-final .remember-final b{
  margin-bottom:1px !important;
  font-size:11.5px !important;
  font-weight:540 !important;
}
.login-visual-final .remember-final small{
  font-size:9.2px !important;
  line-height:1.25 !important;
}
.login-visual-final .login-primary-button{
  height:49px !important;
  border-radius:11px !important;
  font-size:13.5px !important;
  font-weight:520 !important;
}
.login-visual-final .login-primary-button svg{
  width:20px !important;
  height:20px !important;
}
.login-visual-final .login-roles-final{
  margin-top:11px !important;
}
.login-visual-final .login-role-divider{
  gap:9px !important;
  font-size:9.3px !important;
}
.login-visual-final .login-role-badges{
  margin-top:7px !important;
  gap:6px !important;
}
.login-visual-final .login-role-badges span{
  padding:6px 10px !important;
  font-size:9.5px !important;
  font-weight:480 !important;
}

/* Footer benar-benar menjadi satu bagian dari keseluruhan halaman. */
.login-visual-final .login-global-footer{
  height:76px !important;
  min-height:76px !important;
  background:linear-gradient(90deg,rgba(6,33,78,.98),rgba(3,18,47,.99)) !important;
  box-shadow:0 -10px 32px rgba(1,13,34,.15) !important;
}
.login-visual-final .login-global-footer-inner{
  width:min(calc(100% - 88px),1460px) !important;
}
.login-visual-final .login-global-footer .security-lock{
  width:34px !important;
  height:34px !important;
}
.login-visual-final .login-global-footer .login-security b{
  font-size:10.5px !important;
}
.login-visual-final .login-global-footer .login-security small,
.login-visual-final .login-global-footer .login-credit span{
  font-size:8.8px !important;
}
.login-visual-final .login-global-footer .login-credit small{
  font-size:8px !important;
}

/* Laptop 1366x768 dan sekelasnya. */
@media (min-width:821px) and (max-height:790px){
  .login-visual-final .login-stage{grid-template-columns:minmax(0,54%) minmax(400px,46%) !important}
  .login-visual-final .login-hero,
  .login-visual-final .login-access-panel{height:calc(100dvh - 66px) !important}
  .login-visual-final .login-hero-content{height:calc(100dvh - 66px) !important;width:min(76%,590px) !important;padding-top:12px !important;padding-bottom:10px !important}
  .login-visual-final .login-hero-logo{width:62px !important;height:62px !important;margin-bottom:5px !important}
  .login-visual-final .login-hero-title h1{font-size:42px !important}
  .login-visual-final .login-hero-title p{font-size:14.5px !important;margin-top:6px !important}
  .login-visual-final .login-hero-rule{margin:7px auto 6px !important}
  .login-visual-final .login-school-name-final{font-size:11.5px !important;margin-bottom:7px !important}
  .login-visual-final .login-feature-cards{gap:6px !important}
  .login-visual-final .login-feature-card{min-height:54px !important;padding:6px 9px !important}
  .login-visual-final .login-feature-icon{width:32px !important;height:32px !important;min-width:32px !important}
  .login-visual-final .login-feature-card h3{font-size:10.7px !important}
  .login-visual-final .login-feature-card p{font-size:8.5px !important}
  .login-visual-final .login-slogan{font-size:12.5px !important;margin-top:7px !important}
  .login-visual-final .login-access-panel{padding-top:10px !important;padding-bottom:10px !important}
  .login-visual-final .login-access-card{max-width:450px !important;max-height:calc(100dvh - 88px) !important;padding:14px 26px 15px !important;border-radius:20px !important}
  .login-visual-final .login-card-top{margin-bottom:8px !important}
  .login-visual-final .login-portal-pill{padding:4px 11px !important;font-size:9.2px !important}
  .login-visual-final .login-card-top h2{font-size:24px !important;margin:7px 0 2px !important}
  .login-visual-final .login-card-top p{font-size:10.5px !important}
  .login-visual-final .login-title-dots{margin-top:5px !important}
  .login-visual-final .login-form-final{gap:7px !important}
  .login-visual-final .login-field-final label{font-size:10.7px !important;margin-bottom:3px !important}
  .login-visual-final .login-input-final{height:42px !important}
  .login-visual-final .login-input-final input{font-size:12px !important}
  .login-visual-final .remember-check{width:18px !important;height:18px !important}
  .login-visual-final .remember-final b{font-size:10px !important}
  .login-visual-final .remember-final small{font-size:8px !important}
  .login-visual-final .login-primary-button{height:42px !important;font-size:12px !important}
  .login-visual-final .login-roles-final{margin-top:8px !important}
  .login-visual-final .login-role-badges{margin-top:5px !important}
  .login-visual-final .login-role-badges span{padding:5px 8px !important;font-size:8.5px !important}
  .login-visual-final .login-global-footer{height:66px !important;min-height:66px !important}
}

/* Tablet dan HP tetap responsif tanpa memaksa satu layar. */
@media (max-width:820px){
  .login-body.login-visual-final{height:auto !important;min-height:100vh !important;overflow:auto !important}
  .login-visual-final .login-stage{display:block !important;width:100% !important;height:auto !important;min-height:100vh !important;overflow:visible !important}
  .login-visual-final .login-stage::after{background:linear-gradient(180deg,rgba(3,20,52,.28),rgba(3,20,52,.70)) !important}
  .login-visual-final .login-hero{height:auto !important;min-height:auto !important;padding:26px 18px 20px !important}
  .login-visual-final .login-hero-content{height:auto !important;width:min(100%,560px) !important;padding:0 !important}
  .login-visual-final .login-hero-logo{width:72px !important;height:72px !important}
  .login-visual-final .login-hero-title h1{font-size:42px !important}
  .login-visual-final .login-hero-title p{font-size:16px !important}
  .login-visual-final .login-feature-cards{display:none !important}
  .login-visual-final .login-slogan{font-size:14px !important;margin-top:10px !important}
  .login-visual-final .login-access-panel{height:auto !important;min-height:auto !important;padding:12px 14px 96px !important;overflow:visible !important}
  .login-visual-final .login-access-card{width:min(100%,500px) !important;max-height:none !important;padding:22px 20px !important;border-radius:20px !important}
  .login-visual-final .login-global-footer{position:absolute !important;height:auto !important;min-height:74px !important;padding:14px 0 !important}
  .login-visual-final .login-global-footer-inner{width:calc(100% - 36px) !important;gap:12px !important}
}

@media (max-width:520px){
  .login-visual-final .login-global-footer-inner{flex-direction:column !important;align-items:flex-start !important}
  .login-visual-final .login-credit{text-align:left !important}
}

/* =========================================================
   SIJAR LOGIN - VISUAL FINAL LOCKED (12-08-2026)
   Acuan: visual final yang disetujui. Override terakhir agar
   proporsi branding, feature cards, card login dan footer presisi.
   ========================================================= */
@media (min-width:821px){
  .login-visual-final .login-stage{
    grid-template-columns:minmax(0,57%) minmax(420px,43%) !important;
  }
  .login-visual-final .login-stage::after{
    background:linear-gradient(90deg,rgba(2,17,43,.46) 0%,rgba(2,17,43,.35) 51%,rgba(2,17,43,.24) 65%,rgba(2,17,43,.30) 100%) !important;
  }
  .login-visual-final .login-hero-content{
    width:min(84%,760px) !important;
    max-width:760px !important;
  }
  .login-visual-final .login-hero-logo{
    width:clamp(94px,11.5vh,126px) !important;
    height:clamp(94px,11.5vh,126px) !important;
    margin-bottom:clamp(7px,1vh,12px) !important;
  }
  .login-visual-final .login-hero-title h1{
    font-size:clamp(66px,8.4vh,94px) !important;
    line-height:.96 !important;
    letter-spacing:.01em !important;
  }
  .login-visual-final .login-hero-title p{
    font-size:clamp(21px,2.65vh,29px) !important;
    line-height:1.15 !important;
    margin-top:11px !important;
  }
  .login-visual-final .login-hero-rule{
    width:76px !important;
    height:4px !important;
    margin:13px auto 12px !important;
  }
  .login-visual-final .login-school-name-final{
    max-width:700px !important;
    font-size:clamp(17px,2.05vh,22px) !important;
    margin-bottom:18px !important;
  }
  .login-visual-final .login-feature-cards{
    width:min(100%,700px) !important;
    gap:14px 16px !important;
  }
  .login-visual-final .login-feature-card{
    min-height:88px !important;
    padding:13px 16px !important;
    gap:14px !important;
    border-radius:16px !important;
    background:linear-gradient(135deg,rgba(4,31,72,.91),rgba(14,62,124,.78)) !important;
  }
  .login-visual-final .login-feature-icon{
    width:50px !important;height:50px !important;min-width:50px !important;border-radius:12px !important;
  }
  .login-visual-final .login-feature-icon svg{width:27px !important;height:27px !important}
  .login-visual-final .login-feature-card h3{font-size:16px !important;line-height:1.2 !important;margin-bottom:4px !important}
  .login-visual-final .login-feature-card p{font-size:13px !important;line-height:1.35 !important}
  .login-visual-final .login-slogan{font-size:clamp(18px,2.2vh,23px) !important;margin-top:17px !important}

  .login-visual-final .login-access-panel{
    padding-left:24px !important;
    padding-right:clamp(34px,5vw,80px) !important;
  }
  .login-visual-final .login-access-card{
    width:min(100%,500px) !important;
    max-width:500px !important;
    border-radius:28px !important;
  }

  /* Footer: garis aksen orange yang halus mengganti kesan garis pemisah putih. */
  .login-visual-final .login-global-footer{
    min-height:82px !important;
    border-top:0 !important;
    background:linear-gradient(90deg,rgba(5,31,75,.99),rgba(3,19,48,.995)) !important;
  }
  .login-visual-final .login-global-footer::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,transparent 0%,#f59e0b 18%,#f59e0b 82%,transparent 100%);
    opacity:.95;
  }
  .login-visual-final .login-global-footer .login-security b{font-size:14px !important;line-height:1.2 !important}
  .login-visual-final .login-global-footer .login-security small{font-size:12px !important;line-height:1.3 !important}
  .login-visual-final .login-global-footer .login-credit span{font-size:13px !important;line-height:1.25 !important}
  .login-visual-final .login-global-footer .login-credit small{font-size:11px !important;line-height:1.3 !important}
  .login-visual-final .login-global-footer .security-lock{width:42px !important;height:42px !important}
}

/* Laptop 1366x768: tetap satu layar tetapi ukuran teks tidak terlalu mengecil. */
@media (min-width:821px) and (max-height:790px){
  .login-visual-final .login-stage{grid-template-columns:minmax(0,56%) minmax(410px,44%) !important}
  .login-visual-final .login-hero-content{width:min(82%,680px) !important}
  .login-visual-final .login-hero-logo{width:72px !important;height:72px !important}
  .login-visual-final .login-hero-title h1{font-size:50px !important}
  .login-visual-final .login-hero-title p{font-size:16.5px !important}
  .login-visual-final .login-school-name-final{font-size:13.5px !important;margin-bottom:9px !important}
  .login-visual-final .login-feature-cards{width:min(100%,620px) !important;gap:9px 11px !important}
  .login-visual-final .login-feature-card{min-height:60px !important;padding:7px 10px !important;gap:9px !important}
  .login-visual-final .login-feature-icon{width:36px !important;height:36px !important;min-width:36px !important}
  .login-visual-final .login-feature-card h3{font-size:12.5px !important}
  .login-visual-final .login-feature-card p{font-size:10px !important}
  .login-visual-final .login-slogan{font-size:14px !important;margin-top:8px !important}
  .login-visual-final .login-global-footer .login-security b{font-size:12px !important}
  .login-visual-final .login-global-footer .login-security small{font-size:10px !important}
  .login-visual-final .login-global-footer .login-credit span{font-size:11px !important}
  .login-visual-final .login-global-footer .login-credit small{font-size:9.5px !important}
}

/* ========================================================================
   SIJAR LOGIN — FINAL PRESISI APLIKASI
   Override terakhir. Dibuat berdasarkan tampilan aplikasi nyata, bukan mockup.
   Tujuan: satu background menyatu, card login ramping, footer satu baris.
   ======================================================================== */
.login-body.login-visual-final{
  width:100%;
  min-height:100dvh;
  height:100dvh;
  overflow:hidden;
  background:#061a3b;
}

.login-body.login-visual-final .login-stage{
  position:relative;
  isolation:isolate;
  width:100%;
  height:100dvh;
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(420px,42%);
  grid-template-rows:minmax(0,1fr) 68px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(3,20,50,.56) 0%,rgba(3,20,50,.45) 47%,rgba(3,20,50,.30) 61%,rgba(3,20,50,.22) 100%),
    var(--login-bg),
    linear-gradient(135deg,var(--login-secondary),#071a3b);
  background-size:cover;
  background-position:center center;
}

.login-body.login-visual-final .login-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 18%,rgba(36,117,255,.10),transparent 32%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(2,14,35,.18));
}

/* Tidak ada garis pembatas vertikal di tengah. */
.login-body.login-visual-final .login-stage::after{display:none!important;content:none!important}

.login-body.login-visual-final .login-hero{
  grid-column:1;
  grid-row:1;
  position:relative;
  min-height:0!important;
  height:auto!important;
  background:transparent!important;
  overflow:hidden;
}
.login-body.login-visual-final .login-hero::after{opacity:.22!important}
.login-body.login-visual-final .login-hero-overlay{
  background:linear-gradient(90deg,rgba(3,18,45,.12),rgba(3,18,45,0))!important;
}
.login-body.login-visual-final .login-hero-content{
  width:min(82%,760px)!important;
  max-width:760px!important;
  height:100%!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:22px 0 16px!important;
  justify-content:center!important;
  align-items:stretch!important;
}
.login-body.login-visual-final .login-hero-logo{
  width:clamp(84px,9.2vh,108px)!important;
  height:clamp(84px,9.2vh,108px)!important;
  margin:0 auto 7px!important;
}
.login-body.login-visual-final .login-hero-title h1{
  font-size:clamp(58px,7.2vh,82px)!important;
  line-height:.95!important;
  font-weight:700!important;
  letter-spacing:.015em!important;
}
.login-body.login-visual-final .login-hero-title p{
  margin:8px 0 0!important;
  font-size:clamp(19px,2.15vh,25px)!important;
  line-height:1.15!important;
  font-weight:550!important;
}
.login-body.login-visual-final .login-hero-rule{
  width:72px!important;
  height:4px!important;
  margin:11px auto 10px!important;
}
.login-body.login-visual-final .login-school-name-final{
  max-width:680px!important;
  margin:0 auto 13px!important;
  font-size:clamp(15px,1.72vh,19px)!important;
  line-height:1.3!important;
  font-weight:450!important;
}
.login-body.login-visual-final .login-feature-cards{
  width:100%!important;
  max-width:720px!important;
  margin:0 auto!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px 14px!important;
}
.login-body.login-visual-final .login-feature-card{
  min-height:78px!important;
  padding:11px 14px!important;
  gap:13px!important;
  border-radius:15px!important;
  border:1px solid rgba(115,180,255,.38)!important;
  background:linear-gradient(135deg,rgba(4,29,68,.90),rgba(15,66,127,.75))!important;
  box-shadow:0 10px 24px rgba(0,12,34,.16)!important;
}
.login-body.login-visual-final .login-feature-icon{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  border-radius:12px!important;
}
.login-body.login-visual-final .login-feature-icon svg{width:25px!important;height:25px!important}
.login-body.login-visual-final .login-feature-card h3{
  margin:0 0 3px!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:600!important;
}
.login-body.login-visual-final .login-feature-card p{
  font-size:11.5px!important;
  line-height:1.35!important;
}
.login-body.login-visual-final .login-slogan{
  margin:12px auto 0!important;
  font-size:clamp(16px,1.8vh,20px)!important;
  line-height:1.2!important;
}

/* Panel kanan transparan agar background kiri-kanan benar-benar menyatu. */
.login-body.login-visual-final .login-access-panel{
  grid-column:2;
  grid-row:1;
  min-height:0!important;
  height:auto!important;
  padding:18px clamp(30px,4vw,66px) 16px 18px!important;
  background:transparent!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.login-body.login-visual-final .login-access-card{
  box-sizing:border-box!important;
  width:min(100%,500px)!important;
  max-width:500px!important;
  max-height:calc(100dvh - 100px)!important;
  padding:20px 30px 22px!important;
  border-radius:25px!important;
  overflow:visible!important;
  background:rgba(255,255,255,.975)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 24px 58px rgba(0,20,56,.24)!important;
}
.login-body.login-visual-final .login-card-top{margin-bottom:13px!important}
.login-body.login-visual-final .login-portal-pill{
  padding:6px 14px!important;
  font-size:11px!important;
  gap:7px!important;
}
.login-body.login-visual-final .login-portal-pill svg{width:18px!important;height:18px!important}
.login-body.login-visual-final .login-card-top h2{
  margin:12px 0 3px!important;
  font-size:29px!important;
  line-height:1.08!important;
}
.login-body.login-visual-final .login-card-top p{font-size:12px!important;line-height:1.3!important}
.login-body.login-visual-final .login-title-dots{margin-top:8px!important;gap:5px!important}
.login-body.login-visual-final .login-title-dots b,
.login-body.login-visual-final .login-title-dots span{height:6px!important}
.login-body.login-visual-final .login-title-dots b{width:23px!important}
.login-body.login-visual-final .login-title-dots span{width:6px!important}
.login-body.login-visual-final .login-form-final{gap:11px!important}
.login-body.login-visual-final .login-field-final label{
  margin-bottom:5px!important;
  font-size:12px!important;
  font-weight:600!important;
}
.login-body.login-visual-final .login-input-final{
  height:51px!important;
  border-radius:13px!important;
}
.login-body.login-visual-final .login-input-final>svg{
  width:19px!important;height:19px!important;margin-left:15px!important;
}
.login-body.login-visual-final .login-input-final input{
  padding-left:11px!important;
  font-size:13px!important;
}
.login-body.login-visual-final .password-eye{width:38px!important;height:38px!important}
.login-body.login-visual-final .password-eye svg{width:21px!important;height:21px!important}
.login-body.login-visual-final .remember-final{gap:9px!important}
.login-body.login-visual-final .remember-check{width:20px!important;height:20px!important;border-radius:5px!important}
.login-body.login-visual-final .remember-final b{font-size:11px!important;margin-bottom:1px!important}
.login-body.login-visual-final .remember-final small{font-size:9.3px!important;line-height:1.25!important}
.login-body.login-visual-final .login-primary-button{
  height:50px!important;
  border-radius:12px!important;
  font-size:14px!important;
  font-weight:550!important;
}
.login-body.login-visual-final .login-primary-button svg{width:20px!important;height:20px!important}
.login-body.login-visual-final .login-roles-final{margin-top:13px!important}
.login-body.login-visual-final .login-role-divider{gap:9px!important;font-size:9.5px!important}
.login-body.login-visual-final .login-role-badges{gap:8px!important;margin-top:8px!important}
.login-body.login-visual-final .login-role-badges span{
  padding:6px 11px!important;
  font-size:9.5px!important;
}

/* Footer final: satu baris, ringkas, tidak tinggi. */
.login-body.login-visual-final .login-global-footer{
  grid-column:1 / -1!important;
  grid-row:2!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:68px!important;
  min-height:68px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  background:linear-gradient(90deg,rgba(4,31,75,.99),rgba(3,18,45,.995))!important;
  border:0!important;
  box-shadow:none!important;
  z-index:4!important;
}
.login-body.login-visual-final .login-global-footer::before{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;top:0!important;
  height:2px!important;
  background:linear-gradient(90deg,transparent 0%,var(--login-accent) 12%,var(--login-accent) 88%,transparent 100%)!important;
  opacity:.95!important;
}
.login-body.login-visual-final .login-global-footer-inner{
  width:calc(100% - 100px)!important;
  max-width:none!important;
  height:100%!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
}
.login-body.login-visual-final .login-security,
.login-body.login-visual-final .login-credit{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  white-space:nowrap!important;
}
.login-body.login-visual-final .security-lock{
  width:35px!important;
  height:35px!important;
  min-width:35px!important;
  font-size:14px!important;
}
.login-body.login-visual-final .login-security>span:last-child,
.login-body.login-visual-final .login-credit{
  display:flex!important;
  align-items:baseline!important;
  gap:8px!important;
}
.login-body.login-visual-final .login-security b,
.login-body.login-visual-final .login-security small,
.login-body.login-visual-final .login-credit span,
.login-body.login-visual-final .login-credit small{
  display:inline!important;
  margin:0!important;
  line-height:1!important;
}
.login-body.login-visual-final .login-security b{font-size:12px!important;font-weight:600!important}
.login-body.login-visual-final .login-security small{font-size:10px!important;color:#b9c8de!important}
.login-body.login-visual-final .login-credit{font-size:11px!important;text-align:right!important}
.login-body.login-visual-final .login-credit span{font-size:11px!important}
.login-body.login-visual-final .login-credit small{font-size:10px!important;color:#aebed5!important}

/* Desktop/laptop pendek: jaga seluruh komposisi tetap muat satu layar. */
@media (min-width:821px) and (max-height:820px){
  .login-body.login-visual-final .login-stage{grid-template-columns:58% 42%;grid-template-rows:minmax(0,1fr) 60px!important}
  .login-body.login-visual-final .login-hero-content{width:min(80%,680px)!important;padding:12px 0 9px!important}
  .login-body.login-visual-final .login-hero-logo{width:68px!important;height:68px!important;margin-bottom:4px!important}
  .login-body.login-visual-final .login-hero-title h1{font-size:47px!important}
  .login-body.login-visual-final .login-hero-title p{font-size:15.5px!important;margin-top:5px!important}
  .login-body.login-visual-final .login-hero-rule{margin:7px auto 6px!important;height:3px!important}
  .login-body.login-visual-final .login-school-name-final{font-size:12.5px!important;margin-bottom:7px!important}
  .login-body.login-visual-final .login-feature-cards{max-width:650px!important;gap:8px 10px!important}
  .login-body.login-visual-final .login-feature-card{min-height:56px!important;padding:7px 10px!important;gap:9px!important}
  .login-body.login-visual-final .login-feature-icon{width:34px!important;height:34px!important;min-width:34px!important}
  .login-body.login-visual-final .login-feature-icon svg{width:19px!important;height:19px!important}
  .login-body.login-visual-final .login-feature-card h3{font-size:11.5px!important}
  .login-body.login-visual-final .login-feature-card p{font-size:9px!important}
  .login-body.login-visual-final .login-slogan{font-size:13px!important;margin-top:7px!important}
  .login-body.login-visual-final .login-access-panel{padding:9px 38px 8px 14px!important}
  .login-body.login-visual-final .login-access-card{width:min(100%,470px)!important;max-width:470px!important;padding:13px 25px 15px!important;max-height:calc(100dvh - 80px)!important;border-radius:21px!important}
  .login-body.login-visual-final .login-card-top{margin-bottom:7px!important}
  .login-body.login-visual-final .login-portal-pill{padding:4px 10px!important;font-size:9px!important}
  .login-body.login-visual-final .login-portal-pill svg{width:15px!important;height:15px!important}
  .login-body.login-visual-final .login-card-top h2{font-size:23px!important;margin:7px 0 2px!important}
  .login-body.login-visual-final .login-card-top p{font-size:9.5px!important}
  .login-body.login-visual-final .login-title-dots{margin-top:4px!important}
  .login-body.login-visual-final .login-form-final{gap:6px!important}
  .login-body.login-visual-final .login-field-final label{font-size:9.7px!important;margin-bottom:3px!important}
  .login-body.login-visual-final .login-input-final{height:39px!important}
  .login-body.login-visual-final .login-input-final input{font-size:11px!important}
  .login-body.login-visual-final .remember-check{width:17px!important;height:17px!important}
  .login-body.login-visual-final .remember-final b{font-size:9.2px!important}
  .login-body.login-visual-final .remember-final small{font-size:7.8px!important}
  .login-body.login-visual-final .login-primary-button{height:39px!important;font-size:11.5px!important}
  .login-body.login-visual-final .login-roles-final{margin-top:6px!important}
  .login-body.login-visual-final .login-role-badges{margin-top:4px!important}
  .login-body.login-visual-final .login-role-badges span{padding:4px 8px!important;font-size:7.8px!important}
  .login-body.login-visual-final .login-global-footer{height:60px!important;min-height:60px!important}
}

/* Tablet */
@media (max-width:1024px) and (min-width:821px){
  .login-body.login-visual-final .login-stage{grid-template-columns:54% 46%}
  .login-body.login-visual-final .login-hero-content{width:86%!important}
  .login-body.login-visual-final .login-access-panel{padding-right:22px!important}
  .login-body.login-visual-final .login-access-card{width:min(100%,440px)!important;max-width:440px!important}
}

/* HP/tablet kecil: susun vertikal, tidak memaksa semua elemen jadi terlalu kecil. */
@media (max-width:820px){
  .login-body.login-visual-final{height:auto!important;min-height:100dvh!important;overflow:auto!important}
  .login-body.login-visual-final .login-stage{
    min-height:100dvh!important;height:auto!important;
    display:flex!important;flex-direction:column!important;
    background-position:center top!important;
    overflow:visible!important;
  }
  .login-body.login-visual-final .login-hero{order:1!important;padding:22px 18px 15px!important}
  .login-body.login-visual-final .login-hero-content{width:min(100%,600px)!important;height:auto!important;padding:0!important}
  .login-body.login-visual-final .login-hero-logo{width:74px!important;height:74px!important}
  .login-body.login-visual-final .login-hero-title h1{font-size:44px!important}
  .login-body.login-visual-final .login-hero-title p{font-size:16px!important}
  .login-body.login-visual-final .login-school-name-final{font-size:13px!important;margin-bottom:6px!important}
  .login-body.login-visual-final .login-feature-cards{display:none!important}
  .login-body.login-visual-final .login-slogan{font-size:13px!important;margin-top:5px!important}
  .login-body.login-visual-final .login-access-panel{order:2!important;padding:8px 14px 18px!important;overflow:visible!important}
  .login-body.login-visual-final .login-access-card{width:min(100%,500px)!important;max-width:500px!important;max-height:none!important;padding:22px 20px!important}
  .login-body.login-visual-final .login-global-footer{order:3!important;position:relative!important;height:auto!important;min-height:72px!important;padding:12px 0!important}
  .login-body.login-visual-final .login-global-footer-inner{width:calc(100% - 30px)!important;flex-wrap:wrap!important;gap:8px 18px!important}
  .login-body.login-visual-final .login-security,.login-body.login-visual-final .login-credit{white-space:normal!important}
}

@media (max-width:520px){
  .login-body.login-visual-final .login-global-footer-inner{flex-direction:column!important;align-items:flex-start!important}
  .login-body.login-visual-final .login-credit{text-align:left!important}
}

/* =========================================================
   SIJAR LOGIN FINAL - REVISI PRESISI DESKTOP 2026-08-12
   Permintaan final:
   - background sedikit lebih gelap
   - card login lebih ramping
   - logo lebih besar dan lebih naik
   - judul/deskripsi sekolah diperbesar
   - jarak antar baris feature card diperlebar
   - slogan diperbesar
   ========================================================= */
.login-body.login-visual-final .login-stage{
  position:relative;
}

/* Gelapkan background secara merata agar teks dan form lebih tegas. */
.login-body.login-visual-final .login-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(1,18,42,.34);
  pointer-events:none;
  z-index:0;
}
.login-body.login-visual-final .login-hero,
.login-body.login-visual-final .login-access-panel,
.login-body.login-visual-final .login-global-footer{
  position:relative;
  z-index:1;
}
.login-body.login-visual-final .login-hero-overlay{
  background:linear-gradient(90deg,rgba(1,18,42,.38),rgba(1,18,42,.17))!important;
}

/* Konten kiri dibuat lebih menonjol dan lebih dekat ke bagian atas. */
.login-body.login-visual-final .login-hero-content{
  width:min(84%,780px)!important;
  max-width:780px!important;
  padding:12px 0 16px!important;
  justify-content:center!important;
}
.login-body.login-visual-final .login-hero-logo{
  width:clamp(112px,12.6vh,142px)!important;
  height:clamp(112px,12.6vh,142px)!important;
  margin:-10px auto 4px!important;
}
.login-body.login-visual-final .login-hero-title h1{
  font-size:clamp(66px,8.2vh,94px)!important;
  line-height:.94!important;
}
.login-body.login-visual-final .login-hero-title p{
  margin-top:9px!important;
  font-size:clamp(24px,2.7vh,31px)!important;
  line-height:1.12!important;
  font-weight:600!important;
}
.login-body.login-visual-final .login-hero-rule{
  width:86px!important;
  height:4px!important;
  margin:12px auto 11px!important;
}
.login-body.login-visual-final .login-school-name-final{
  max-width:760px!important;
  margin:0 auto 16px!important;
  font-size:clamp(19px,2.05vh,24px)!important;
  line-height:1.28!important;
  font-weight:500!important;
}

/* Feature card: teks sedikit lebih besar dan jarak vertikal antar baris lebih lega. */
.login-body.login-visual-final .login-feature-cards{
  width:100%!important;
  max-width:760px!important;
  gap:22px 18px!important;
}
.login-body.login-visual-final .login-feature-card{
  min-height:86px!important;
  padding:13px 16px!important;
  gap:14px!important;
}
.login-body.login-visual-final .login-feature-icon{
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
}
.login-body.login-visual-final .login-feature-icon svg{
  width:27px!important;
  height:27px!important;
}
.login-body.login-visual-final .login-feature-card h3{
  margin-bottom:4px!important;
  font-size:17px!important;
  line-height:1.2!important;
  font-weight:600!important;
}
.login-body.login-visual-final .login-feature-card p{
  font-size:12.5px!important;
  line-height:1.35!important;
}
.login-body.login-visual-final .login-slogan{
  margin:16px auto 0!important;
  font-size:clamp(21px,2.35vh,27px)!important;
  line-height:1.2!important;
  font-weight:600!important;
}

/* Card login dibuat lebih ramping tanpa mengorbankan kenyamanan form. */
.login-body.login-visual-final .login-access-panel{
  padding-left:24px!important;
  padding-right:clamp(34px,4vw,70px)!important;
}
.login-body.login-visual-final .login-access-card{
  width:min(100%,450px)!important;
  max-width:450px!important;
  padding:22px 28px 24px!important;
  border-radius:24px!important;
}
.login-body.login-visual-final .login-card-top h2{
  font-size:30px!important;
}
.login-body.login-visual-final .login-input-final{
  height:52px!important;
}
.login-body.login-visual-final .login-primary-button{
  height:50px!important;
}

/* Laptop 1366x768 / layar pendek: tetap muat satu layar, namun tidak kembali mengecil berlebihan. */
@media (min-width:821px) and (max-height:820px){
  .login-body.login-visual-final .login-stage{
    grid-template-columns:58% 42%!important;
    grid-template-rows:minmax(0,1fr) 60px!important;
  }
  .login-body.login-visual-final .login-hero-content{
    width:min(83%,700px)!important;
    max-width:700px!important;
    padding:8px 0 9px!important;
  }
  .login-body.login-visual-final .login-hero-logo{
    width:82px!important;
    height:82px!important;
    margin:-6px auto 3px!important;
  }
  .login-body.login-visual-final .login-hero-title h1{
    font-size:53px!important;
  }
  .login-body.login-visual-final .login-hero-title p{
    font-size:18px!important;
    margin-top:5px!important;
  }
  .login-body.login-visual-final .login-hero-rule{
    width:72px!important;
    margin:7px auto 7px!important;
  }
  .login-body.login-visual-final .login-school-name-final{
    font-size:16.5px!important;
    margin-bottom:11px!important;
  }
  .login-body.login-visual-final .login-feature-cards{
    max-width:680px!important;
    gap:14px 14px!important;
  }
  .login-body.login-visual-final .login-feature-card{
    min-height:72px!important;
    padding:10px 13px!important;
  }
  .login-body.login-visual-final .login-feature-icon{
    width:43px!important;
    height:43px!important;
    min-width:43px!important;
  }
  .login-body.login-visual-final .login-feature-card h3{
    font-size:14px!important;
  }
  .login-body.login-visual-final .login-feature-card p{
    font-size:10.8px!important;
  }
  .login-body.login-visual-final .login-slogan{
    margin-top:10px!important;
    font-size:17.5px!important;
  }
  .login-body.login-visual-final .login-access-card{
    width:min(100%,430px)!important;
    max-width:430px!important;
    padding:17px 25px 18px!important;
  }
  .login-body.login-visual-final .login-card-top h2{
    font-size:27px!important;
  }
}

/* Desktop sangat lebar: tetap ramping, tidak melebar mengikuti layar. */
@media (min-width:1600px){
  .login-body.login-visual-final .login-access-card{
    width:455px!important;
    max-width:455px!important;
  }
  .login-body.login-visual-final .login-hero-content{
    max-width:800px!important;
  }
}

/* =========================================================
   SIJAR LOGIN - FINAL GELAP + CARD LEBIH RAMPING
   2026-08-12
   ========================================================= */

/* Background harus terasa satu layar penuh dan cukup gelap
   supaya identitas kiri dan kartu login selalu terbaca jelas. */
.login-body.login-visual-final,
.login-body.login-visual-final .login-stage{
  width:100%!important;
  min-width:100%!important;
  min-height:100dvh!important;
  background-color:#06172f!important;
}
.login-body.login-visual-final .login-stage{
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.login-body.login-visual-final .login-stage::before{
  background:rgba(2,15,36,.52)!important;
}
.login-body.login-visual-final .login-hero-overlay{
  background:linear-gradient(90deg,rgba(1,15,36,.52),rgba(1,15,36,.31))!important;
}

/* Form login dibuat benar-benar ramping; tidak mengikuti lebar panel kanan. */
.login-body.login-visual-final .login-access-panel{
  padding-left:18px!important;
  padding-right:clamp(34px,5.2vw,88px)!important;
}
.login-body.login-visual-final .login-access-card{
  width:min(100%,400px)!important;
  max-width:400px!important;
  padding:20px 24px 22px!important;
  border-radius:23px!important;
}
.login-body.login-visual-final .login-input-final{
  height:49px!important;
}
.login-body.login-visual-final .login-primary-button{
  height:48px!important;
}

/* Desktop besar: card tetap ramping, tidak membesar. */
@media (min-width:1600px){
  .login-body.login-visual-final .login-access-card{
    width:410px!important;
    max-width:410px!important;
  }
}

/* Laptop umum 1366x768 dan layar pendek. */
@media (min-width:821px) and (max-height:820px){
  .login-body.login-visual-final .login-stage{
    min-height:100dvh!important;
    height:100dvh!important;
    overflow:hidden!important;
  }
  .login-body.login-visual-final .login-access-panel{
    padding-left:15px!important;
    padding-right:clamp(28px,4.2vw,58px)!important;
  }
  .login-body.login-visual-final .login-access-card{
    width:min(100%,382px)!important;
    max-width:382px!important;
    padding:15px 21px 17px!important;
    border-radius:21px!important;
  }
  .login-body.login-visual-final .login-card-top h2{
    font-size:25px!important;
  }
  .login-body.login-visual-final .login-input-final{
    height:43px!important;
  }
  .login-body.login-visual-final .login-primary-button{
    height:43px!important;
  }
}

/* Tablet: tetap ramping tapi aman terhadap lebar layar. */
@media (max-width:1024px) and (min-width:821px){
  .login-body.login-visual-final .login-access-card{
    width:min(100%,390px)!important;
    max-width:390px!important;
  }
}

/* Mobile tetap responsif penuh. */
@media (max-width:820px){
  .login-body.login-visual-final .login-stage::before{
    background:rgba(2,15,36,.56)!important;
  }
  .login-body.login-visual-final .login-access-card{
    width:min(100%,430px)!important;
    max-width:430px!important;
  }
}

/* =========================================================
   SIJAR LOGIN - FULL DARK BACKGROUND + FOOTER SEPARATOR
   2026-08-12
   ========================================================= */

/* 1) Background gelap dibuat menyatu penuh sampai area di belakang card login. */
.login-body.login-visual-final .login-stage{
  background-color:#06162d!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.login-body.login-visual-final .login-stage::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background:linear-gradient(90deg,
    rgba(1,12,30,.64) 0%,
    rgba(1,14,34,.59) 52%,
    rgba(1,14,34,.55) 100%)!important;
  pointer-events:none!important;
  z-index:0!important;
}
.login-body.login-visual-final .login-hero-panel,
.login-body.login-visual-final .login-access-panel{
  position:relative!important;
  z-index:1!important;
  background:transparent!important;
}
.login-body.login-visual-final .login-hero-overlay{
  background:linear-gradient(90deg,rgba(1,15,36,.18),rgba(1,15,36,.08))!important;
}

/* 2) Footer desktop dibuat satu baris dengan separator vertikal yang jelas. */
@media (min-width:821px){
  .login-body.login-visual-final .login-security>span:last-child,
  .login-body.login-visual-final .login-credit{
    gap:0!important;
  }
  .login-body.login-visual-final .login-security b::after{
    content:" | "!important;
    display:inline!important;
    padding:0 10px!important;
    color:rgba(255,255,255,.52)!important;
    font-weight:400!important;
  }
  .login-body.login-visual-final .login-credit span::after{
    content:" | "!important;
    display:inline!important;
    padding:0 10px!important;
    color:rgba(255,255,255,.52)!important;
    font-weight:400!important;
  }
  .login-body.login-visual-final .login-security small,
  .login-body.login-visual-final .login-credit small{
    white-space:nowrap!important;
  }
}

/* Mobile: separator tetap rapi saat footer harus membungkus. */
@media (max-width:820px){
  .login-body.login-visual-final .login-security b::after,
  .login-body.login-visual-final .login-credit span::after{
    content:""!important;
    padding:0!important;
  }
}

/* ============================================================
   SIJAR - LOGIN FORM TYPOGRAPHY FINAL
   Memperbesar teks di dalam card login tanpa menggemukkan card.
   ============================================================ */
.login-body.login-visual-final .login-portal-pill{font-size:13px!important}
.login-body.login-visual-final .login-card-top h2{font-size:32px!important}
.login-body.login-visual-final .login-card-top p{font-size:14px!important}
.login-body.login-visual-final .login-field-final label{font-size:14px!important}
.login-body.login-visual-final .login-input-final input{font-size:15px!important}
.login-body.login-visual-final .remember-final b{font-size:13px!important}
.login-body.login-visual-final .remember-final small{font-size:11px!important}
.login-body.login-visual-final .login-primary-button{font-size:16px!important}
.login-body.login-visual-final .login-role-divider{font-size:11px!important}
.login-body.login-visual-final .login-role-badges span{font-size:11px!important}

/* Laptop dengan tinggi pendek tetap jelas terbaca. */
@media (min-width: 1001px) and (max-height: 820px){
  .login-body.login-visual-final .login-portal-pill{font-size:11.5px!important}
  .login-body.login-visual-final .login-card-top h2{font-size:26px!important}
  .login-body.login-visual-final .login-card-top p{font-size:11.5px!important}
  .login-body.login-visual-final .login-field-final label{font-size:12.5px!important}
  .login-body.login-visual-final .login-input-final input{font-size:13.5px!important}
  .login-body.login-visual-final .remember-final b{font-size:11.5px!important}
  .login-body.login-visual-final .remember-final small{font-size:9.5px!important}
  .login-body.login-visual-final .login-primary-button{font-size:13.5px!important}
  .login-body.login-visual-final .login-role-divider{font-size:10px!important}
  .login-body.login-visual-final .login-role-badges span{font-size:9px!important}
}

/* ============================================================
   SIJAR LOGIN - FINAL COMBINED PATCH
   Footer gold + typography form lebih besar
   ============================================================ */
.login-body.login-visual-final .login-footer{
  border-top:2px solid #f4c542!important;
  box-shadow:0 -1px 0 rgba(244,197,66,.18),0 -8px 24px rgba(0,0,0,.08)!important;
}
.login-body.login-visual-final .login-security,
.login-body.login-visual-final .login-credit{
  font-size:14px!important;
}
.login-body.login-visual-final .login-security b,
.login-body.login-visual-final .login-credit span{
  font-size:14px!important;
}
.login-body.login-visual-final .login-security small,
.login-body.login-visual-final .login-credit small{
  font-size:13px!important;
}
@media (min-width:821px){
  .login-body.login-visual-final .login-security b::after,
  .login-body.login-visual-final .login-credit span::after{
    color:#f4c542!important;
    font-weight:700!important;
    padding:0 12px!important;
  }
}

/* Form login: diperbesar lagi, card tetap ramping. */
.login-body.login-visual-final .login-portal-pill{font-size:14px!important}
.login-body.login-visual-final .login-card-top h2{font-size:34px!important;line-height:1.12!important}
.login-body.login-visual-final .login-card-top p{font-size:15px!important;line-height:1.45!important}
.login-body.login-visual-final .login-field-final label{font-size:15px!important}
.login-body.login-visual-final .login-input-final input{font-size:16px!important}
.login-body.login-visual-final .login-input-final input::placeholder{font-size:15px!important}
.login-body.login-visual-final .remember-final b{font-size:14px!important}
.login-body.login-visual-final .remember-final small{font-size:12px!important}
.login-body.login-visual-final .login-primary-button{font-size:17px!important}
.login-body.login-visual-final .login-role-divider{font-size:12px!important}
.login-body.login-visual-final .login-role-badges span{font-size:12px!important}

/* Laptop 1366x768: tetap lebih besar dari patch sebelumnya, tanpa membuat card gemuk. */
@media (min-width:1001px) and (max-height:820px){
  .login-body.login-visual-final .login-portal-pill{font-size:12.5px!important}
  .login-body.login-visual-final .login-card-top h2{font-size:29px!important}
  .login-body.login-visual-final .login-card-top p{font-size:13px!important}
  .login-body.login-visual-final .login-field-final label{font-size:13.5px!important}
  .login-body.login-visual-final .login-input-final input{font-size:15px!important}
  .login-body.login-visual-final .login-input-final input::placeholder{font-size:14px!important}
  .login-body.login-visual-final .remember-final b{font-size:12.5px!important}
  .login-body.login-visual-final .remember-final small{font-size:10.5px!important}
  .login-body.login-visual-final .login-primary-button{font-size:15px!important}
  .login-body.login-visual-final .login-role-divider{font-size:10.5px!important}
  .login-body.login-visual-final .login-role-badges span{font-size:10px!important}
  .login-body.login-visual-final .login-security,
  .login-body.login-visual-final .login-credit{font-size:13px!important}
  .login-body.login-visual-final .login-security b,
  .login-body.login-visual-final .login-credit span{font-size:13px!important}
  .login-body.login-visual-final .login-security small,
  .login-body.login-visual-final .login-credit small{font-size:12px!important}
}

/* ==========================================================
   SIJAR LOGIN - FORM TEXT FINAL BESAR
   Portal Akademik disembunyikan, card tetap ramping.
   ========================================================== */
.login-body.login-visual-final .login-portal-pill{
  display:none!important;
}
.login-body.login-visual-final .login-card-top{
  margin-top:0!important;
}
.login-body.login-visual-final .login-card-top h2{
  font-size:38px!important;
  line-height:1.08!important;
  margin-top:0!important;
  margin-bottom:8px!important;
}
.login-body.login-visual-final .login-card-top p{
  font-size:17px!important;
  line-height:1.45!important;
}
.login-body.login-visual-final .login-field-final label{
  font-size:17px!important;
  line-height:1.3!important;
}
.login-body.login-visual-final .login-input-final input{
  font-size:18px!important;
}
.login-body.login-visual-final .login-input-final input::placeholder{
  font-size:16px!important;
}
.login-body.login-visual-final .remember-final b{
  font-size:16px!important;
}
.login-body.login-visual-final .remember-final small{
  font-size:13px!important;
}
.login-body.login-visual-final .login-primary-button{
  font-size:19px!important;
}
.login-body.login-visual-final .login-role-divider{
  font-size:14px!important;
}
.login-body.login-visual-final .login-role-badges span{
  font-size:13px!important;
}

/* Laptop 1366x768: tetap besar tetapi dijaga agar muat satu layar. */
@media (min-width: 992px) and (max-height: 800px){
  .login-body.login-visual-final .login-card-top h2{font-size:32px!important}
  .login-body.login-visual-final .login-card-top p{font-size:14.5px!important}
  .login-body.login-visual-final .login-field-final label{font-size:15px!important}
  .login-body.login-visual-final .login-input-final input{font-size:16px!important}
  .login-body.login-visual-final .login-input-final input::placeholder{font-size:15px!important}
  .login-body.login-visual-final .remember-final b{font-size:14px!important}
  .login-body.login-visual-final .remember-final small{font-size:11.5px!important}
  .login-body.login-visual-final .login-primary-button{font-size:17px!important}
  .login-body.login-visual-final .login-role-divider{font-size:12px!important}
  .login-body.login-visual-final .login-role-badges span{font-size:11px!important}
}

/* ============================================================
   SIJAR LOGIN - 3D CARD ELEGAN & RESPONSIVE
   Efek hidup yang halus tanpa mengubah ukuran/typography final.
   ============================================================ */
.login-body.login-visual-final .login-access-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 14% 4%, rgba(255,255,255,.98) 0, rgba(255,255,255,.84) 24%, transparent 45%),
    linear-gradient(145deg,#ffffff 0%,#f8fbff 44%,#eef5ff 100%)!important;
  border:1px solid rgba(255,255,255,.92)!important;
  box-shadow:
    0 32px 70px rgba(0,10,35,.34),
    0 14px 28px rgba(17,55,125,.18),
    0 3px 8px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(45,93,170,.08)!important;
}
.login-body.login-visual-final .login-access-card::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  top:-42%!important;
  left:-24%!important;
  width:72%!important;
  height:92%!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(75,137,255,.16) 0%,rgba(75,137,255,.07) 42%,transparent 72%)!important;
  pointer-events:none!important;
}
.login-body.login-visual-final .login-access-card::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  right:-22%!important;
  bottom:-34%!important;
  width:68%!important;
  height:74%!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(17,82,190,.12) 0%,rgba(17,82,190,.04) 46%,transparent 72%)!important;
  pointer-events:none!important;
}

/* Sedikit depth pada kontrol form agar menyatu dengan card 3D. */
.login-body.login-visual-final .login-input-final{
  background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%)!important;
  border-color:rgba(54,94,155,.22)!important;
  box-shadow:
    inset 0 1px 2px rgba(13,42,88,.05),
    0 5px 14px rgba(19,58,120,.06)!important;
}
.login-body.login-visual-final .login-input-final:focus-within{
  border-color:rgba(35,99,220,.62)!important;
  box-shadow:
    0 0 0 3px rgba(45,105,225,.12),
    0 8px 18px rgba(20,65,145,.10)!important;
}
.login-body.login-visual-final .login-primary-button{
  box-shadow:
    0 10px 20px rgba(24,70,185,.24),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
}

/* Tablet/HP: depth tetap terlihat tetapi lebih ringan dan hemat ruang. */
@media (max-width:820px){
  .login-body.login-visual-final .login-access-card{
    box-shadow:
      0 20px 42px rgba(0,10,35,.24),
      0 8px 18px rgba(17,55,125,.13),
      inset 0 1px 0 rgba(255,255,255,1)!important;
  }
  .login-body.login-visual-final .login-access-card::before{
    opacity:.72!important;
  }
  .login-body.login-visual-final .login-access-card::after{
    opacity:.58!important;
  }
}

/* Perangkat dengan preferensi gerak minim: tidak ada animasi dekoratif. */
@media (prefers-reduced-motion:reduce){
  .login-body.login-visual-final .login-access-card,
  .login-body.login-visual-final .login-input-final,
  .login-body.login-visual-final .login-primary-button{
    transition:none!important;
  }
}

/* ============================================================
   SIJAR LOGIN - PORTAL SIJAR + WHITE BLENDING FINAL
   ============================================================ */
.login-body.login-visual-final .login-portal-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  min-height:30px!important;
  padding:6px 13px!important;
  margin:0 0 12px!important;
  border-radius:999px!important;
  font-size:0!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(240,247,255,.94))!important;
  border:1px solid rgba(255,255,255,1)!important;
  box-shadow:0 5px 14px rgba(15,48,105,.10), inset 0 1px 0 #fff!important;
}
.login-body.login-visual-final .login-portal-pill::after{
  content:"PORTAL SIJAR"!important;
  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  color:#2459b8!important;
}

/* White blending: membuat card lebih tegas dari background gelap. */
.login-body.login-visual-final .login-access-card{
  border:1px solid rgba(255,255,255,.98)!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.42),
    0 0 28px rgba(255,255,255,.30),
    0 0 58px rgba(255,255,255,.16),
    0 32px 70px rgba(0,10,35,.38),
    0 14px 28px rgba(17,55,125,.18),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 32px rgba(255,255,255,.24)!important;
}

@media (min-width:992px) and (max-height:800px){
  .login-body.login-visual-final .login-portal-pill{
    min-height:26px!important;
    padding:5px 11px!important;
    margin-bottom:8px!important;
  }
  .login-body.login-visual-final .login-portal-pill::after{font-size:11.5px!important}
}

@media (max-width:820px){
  .login-body.login-visual-final .login-access-card{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.38),
      0 0 22px rgba(255,255,255,.20),
      0 20px 42px rgba(0,10,35,.27),
      0 8px 18px rgba(17,55,125,.13),
      inset 0 1px 0 rgba(255,255,255,1)!important;
  }
}

/* ============================================================
   SIJAR LOGIN - WELCOME MINI CARD + NAVY SUPPORT TEXT
   ============================================================ */
.login-body.login-visual-final .login-card-top h2{
  display:block!important;
  width:100%!important;
  margin:0 0 12px!important;
  padding:13px 18px!important;
  border-radius:16px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#0b2a5b 0%,#124b9d 58%,#176fc4 100%)!important;
  border:1px solid rgba(255,255,255,.32)!important;
  border-left:4px solid #f4b942!important;
  box-shadow:0 10px 24px rgba(8,35,82,.20), inset 0 1px 0 rgba(255,255,255,.20)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.16)!important;
}
.login-body.login-visual-final .login-card-top p,
.login-body.login-visual-final .remember-final small{
  color:#0b2a5b!important;
}
.login-body.login-visual-final .login-card-top p{font-weight:600!important}
.login-body.login-visual-final .remember-final small{font-weight:500!important}
@media(max-width:820px){
  .login-body.login-visual-final .login-card-top h2{padding:11px 14px!important;border-radius:14px!important}
}

/* ============================================================
   JADWAL GURU - CARD VIEW RESPONSIVE
   ============================================================ */
.teacher-schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:18px;margin-top:18px}
.teacher-day-card{background:#fff;border:1px solid #e4eaf4;border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(18,52,99,.08)}
.teacher-day-head{padding:14px 17px;background:linear-gradient(135deg,#0b2a5b,#174f9f);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px}
.teacher-day-head h4{margin:0;font-size:17px;font-weight:700}.teacher-day-count{font-size:11px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);white-space:nowrap}
.teacher-lessons{padding:12px;display:flex;flex-direction:column;gap:10px}
.teacher-lesson-card{position:relative;padding:13px 14px 13px 17px;border:1px solid #e7edf6;border-radius:14px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 5px 14px rgba(19,57,111,.05)}
.teacher-lesson-card:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(#f5b53f,#e88421)}
.teacher-lesson-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.teacher-subject{font-size:15px;font-weight:700;color:#102d59;line-height:1.3}.teacher-jp{font-size:11px;font-weight:700;color:#0b4a92;background:#eaf3ff;border:1px solid #d5e7ff;padding:4px 8px;border-radius:999px;white-space:nowrap}
.teacher-lesson-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;font-size:12px;color:#53657d}.teacher-lesson-meta span{display:flex;align-items:center;gap:6px}.teacher-lesson-meta b{color:#1d3558;font-weight:600}
.teacher-schedule-empty{padding:36px 20px;text-align:center;border:1px dashed #ccd7e6;border-radius:16px;background:#fbfdff;color:#6b7c93;margin-top:18px}
@media(max-width:720px){.teacher-schedule-grid{grid-template-columns:1fr;gap:14px}.teacher-lesson-meta{grid-template-columns:1fr}.teacher-day-head{padding:13px 15px}}
@media print{.teacher-schedule-grid{grid-template-columns:repeat(2,1fr);gap:10px}.teacher-day-card,.teacher-lesson-card{box-shadow:none;break-inside:avoid}.teacher-day-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}.teacher-schedule-empty{display:none}}

/* ============================================================
   SIJAR LOGIN - SELAMAT DATANG FONT MATCH SLOGAN
   ============================================================ */
.login-body.login-visual-final .login-card-top h2{
  font-style:italic!important;
  font-weight:500!important;
  letter-spacing:.01em!important;
}

/* ============================================================
   SIJAR LOGIN - WELCOME MINI CARD COMPACT FINAL
   ============================================================ */
.login-body.login-visual-final .login-card-top h2{
  width:auto!important;
  max-width:100%!important;
  display:inline-flex!important;
  align-items:center!important;
  margin:0 0 9px!important;
  padding:8px 14px!important;
  border-radius:12px!important;
  font-size:clamp(18px,1.45vw,22px)!important;
  line-height:1.15!important;
  font-style:italic!important;
  font-weight:500!important;
  letter-spacing:.01em!important;
  color:#fff!important;
  background:linear-gradient(135deg,#0b2a5b 0%,#124b9d 62%,#176fc4 100%)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-left:3px solid #f4b942!important;
  box-shadow:0 7px 16px rgba(8,35,82,.16), inset 0 1px 0 rgba(255,255,255,.18)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.13)!important;
}

@media (min-width:992px) and (max-height:800px){
  .login-body.login-visual-final .login-card-top h2{
    padding:7px 12px!important;
    margin-bottom:7px!important;
    font-size:18px!important;
    border-radius:11px!important;
  }
}

@media (max-width:820px){
  .login-body.login-visual-final .login-card-top h2{
    padding:7px 12px!important;
    margin-bottom:8px!important;
    font-size:18px!important;
    border-radius:11px!important;
  }
}

/* ============================================================
   SIJAR LOGIN - PORTAL HIDDEN + SELAMAT DATANG BLINK FINAL
   ============================================================ */
.login-body.login-visual-final .login-portal-pill{
  display:none!important;
}

.login-body.login-visual-final .login-card-top h2{
  animation:sijarWelcomeBlink 1.8s ease-in-out infinite!important;
  transform-origin:center!important;
}

@keyframes sijarWelcomeBlink{
  0%,100%{
    opacity:1;
    filter:brightness(1);
    box-shadow:0 7px 16px rgba(8,35,82,.16), inset 0 1px 0 rgba(255,255,255,.18);
  }
  50%{
    opacity:.72;
    filter:brightness(1.18);
    box-shadow:0 8px 20px rgba(8,35,82,.22), 0 0 14px rgba(244,185,66,.24), inset 0 1px 0 rgba(255,255,255,.24);
  }
}

@media (prefers-reduced-motion:reduce){
  .login-body.login-visual-final .login-card-top h2{
    animation:none!important;
  }
}

/* ============================================================
   SIJAR - SUSUN JADWAL MODE SANGAT SEDERHANA
   Alur: Pilih kelas -> hari -> klik jam kosong -> simpan.
   ============================================================ */
.schedule-simple-page{overflow:visible}
.schedule-simple-head{align-items:flex-start}
.schedule-simple-guide{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:14px 0 18px;padding:12px 15px;border:1px solid #dce7f5;border-radius:14px;background:linear-gradient(180deg,#f8fbff,#f2f7ff);color:#28415f;font-size:13px}
.schedule-simple-guide b{font-weight:600}.guide-number{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#124b9d;color:#fff;font-weight:700}.guide-arrow{color:#8da2bd;font-size:17px}
.schedule-simple-filter{display:flex;align-items:flex-end;gap:16px;margin-bottom:14px}.schedule-simple-filter .class-picker{width:min(420px,100%)}
.schedule-simple-filter select{min-height:44px;font-size:15px}
.schedule-simple-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px;padding-bottom:2px}
.simple-day-tab{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:10px 15px;border:1px solid #d8e2f0;border-radius:11px;background:#fff;color:#26415f;text-decoration:none;font-weight:500;transition:.18s ease}
.simple-day-tab:hover{border-color:#8fb2df;background:#f6faff}.simple-day-tab.active{background:#124b9d;border-color:#124b9d;color:#fff;box-shadow:0 7px 16px rgba(18,75,157,.17)}
.schedule-simple-status{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 13px;padding:11px 14px;border-radius:12px;background:#f8fafc;border:1px solid #e3e9f1}.schedule-simple-status>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.schedule-simple-status b{font-size:16px;color:#112d52}.schedule-simple-status span:not(.badge){font-size:13px;color:#607089}
.schedule-simple-list{display:flex;flex-direction:column;gap:8px}.simple-slot-row{display:grid;grid-template-columns:145px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:70px;padding:10px 13px;border:1px solid #e2e9f2;border-radius:14px;background:#fff;box-shadow:0 4px 12px rgba(25,54,92,.04)}
.simple-slot-time{display:flex;flex-direction:column;gap:3px;padding-right:14px;border-right:1px solid #e7edf4}.simple-slot-time b{font-size:15px;color:#14345f}.simple-slot-time span{font-size:12px;color:#6c7d91}
.simple-slot-row.empty-slot{background:linear-gradient(180deg,#fff,#fbfdff)}.simple-empty-text{display:flex;flex-direction:column;gap:2px}.simple-empty-text span{font-size:14px;color:#62738a}.simple-empty-text small{font-size:11px;color:#9aa8b8}
.simple-add-btn{border:0;border-radius:10px;padding:10px 14px;background:#eaf3ff;color:#124b9d;font-size:13px;font-weight:600;cursor:pointer;transition:.18s ease;white-space:nowrap}.simple-add-btn:hover{background:#124b9d;color:#fff;box-shadow:0 7px 16px rgba(18,75,157,.18)}
.simple-slot-row.filled{border-left:4px solid #f0a126;background:linear-gradient(90deg,#fffaf2 0,#fff 18%)}.simple-lesson-info{display:flex;flex-direction:column;gap:2px;min-width:0}.simple-lesson-info b{font-size:15px;color:#17355d}.simple-lesson-info span{font-size:13px;color:#455b76}.simple-lesson-info small{font-size:11px;color:#8492a5}.simple-delete-btn{border:1px solid #efcaca;border-radius:9px;background:#fff4f4;color:#b93d3d;padding:8px 11px;font-size:12px;font-weight:500;cursor:pointer}.simple-delete-btn:hover{background:#c94a4a;border-color:#c94a4a;color:#fff}
.simple-slot-row.special{grid-template-columns:145px 1fr;background:#f5f7fa;border-style:dashed}.simple-special-label{color:#6b7788;font-size:13px;font-weight:500}
.schedule-simple-empty{display:flex!important;flex-direction:column;gap:5px;padding:34px 20px!important}.schedule-simple-empty.first{margin-top:14px}.schedule-simple-empty b{font-size:16px}.schedule-simple-empty span{font-size:13px;color:#718096}

/* Modal tambah jadwal: hanya tiga pilihan utama agar tidak membingungkan. */
.simple-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}.simple-modal.open{display:flex}.simple-modal-backdrop{position:absolute;inset:0;background:rgba(4,20,45,.58);backdrop-filter:blur(3px)}.simple-modal-card{position:relative;z-index:1;width:min(470px,100%);max-height:calc(100vh - 36px);overflow:auto;border-radius:20px;padding:24px;background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 80px rgba(0,18,52,.36)}
.simple-modal-close{position:absolute;right:13px;top:11px;width:34px;height:34px;border:0;border-radius:50%;background:#f0f4f9;color:#51627a;font-size:22px;line-height:1;cursor:pointer}.simple-modal-close:hover{background:#e2eaf4;color:#17355d}
.simple-modal-title{padding:0 42px 14px 0;margin-bottom:14px;border-bottom:1px solid #e9eef5}.modal-step{display:inline-block;margin-bottom:7px;color:#d98317;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.simple-modal-title h4{margin:0 0 5px;font-size:21px;color:#102f5c}.simple-modal-title p{margin:0;font-size:13px;color:#667991}
.simple-modal-card .field{margin-bottom:15px}.simple-modal-card .field label{display:block;margin-bottom:6px;font-size:13px;color:#243c5a;font-weight:600}.simple-modal-card select{width:100%;min-height:44px;border:1px solid #d8e1ed;border-radius:10px;padding:8px 11px;background:#fff;color:#193556;font-size:14px}.simple-modal-card select:focus{outline:0;border-color:#5b91d6;box-shadow:0 0 0 3px rgba(45,105,190,.11)}.simple-help{display:block;margin-top:6px;color:#728197;font-size:11px}.simple-help.error{color:#bd3e3e}.optional-label{font-size:10px;color:#8493a7;font-weight:500;margin-left:4px}.simple-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;padding-top:14px;border-top:1px solid #e9eef5}.simple-modal-actions .btn{font-weight:500!important}.modal-open{overflow:hidden}

@media(max-width:760px){
  .schedule-simple-guide{gap:7px;font-size:12px}.guide-arrow{display:none}
  .schedule-simple-filter{display:block}.schedule-simple-filter .class-picker{width:100%}
  .schedule-simple-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.simple-day-tab{min-width:0;padding:9px 4px;font-size:11px}
  .schedule-simple-status{align-items:flex-start}.schedule-simple-status>div{display:block}.schedule-simple-status>div span{display:block;margin-top:3px}
  .simple-slot-row,.simple-slot-row.special{grid-template-columns:88px minmax(0,1fr);gap:10px;padding:10px}.simple-slot-time{padding-right:9px}.simple-add-btn,.simple-delete-btn{grid-column:1/-1;width:100%;margin-top:2px}.simple-slot-row.filled{grid-template-columns:88px minmax(0,1fr)}
  .simple-modal{padding:10px}.simple-modal-card{padding:20px 16px;border-radius:17px}.simple-modal-title h4{font-size:19px}.simple-modal-actions{display:grid;grid-template-columns:1fr 1fr}.simple-modal-actions .btn{width:100%}
}

/* ============================================================
   SIJAR - POLISH UI SUSUN JADWAL SEDERHANA
   Fokus: rapi, ringan, mudah dipahami, tetap responsive.
   ============================================================ */
.schedule-simple-page{
  padding:0!important;
  overflow:hidden;
  border:1px solid #dce6f3;
  border-radius:26px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 18px 46px rgba(20,52,93,.10);
}
.schedule-simple-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:26px 30px 22px;
  background:
    radial-gradient(circle at 92% 18%,rgba(27,111,222,.10),transparent 30%),
    linear-gradient(135deg,#ffffff 0%,#f5f9ff 100%);
  border-bottom:1px solid #e3ebf5;
}
.schedule-simple-headcopy{min-width:0;max-width:760px}
.schedule-simple-eyebrow{
  margin-bottom:7px;
  color:#1d6fdc;
  font-size:11px;
  font-weight:600;
  letter-spacing:.13em;
}
.schedule-simple-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.schedule-simple-title-row h3{margin:0;color:#0f2b53;font-size:27px;line-height:1.15;font-weight:650}
.schedule-simple-title-row p{margin:6px 0 0;color:#71829a;font-size:14px}
.schedule-simple-subtitle{margin:12px 0 0!important;color:#62758f!important;font-size:13px!important;line-height:1.55;max-width:680px}
.schedule-status-pill{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
}
.schedule-status-pill.draft{background:#fff3d9;color:#a96100;border:1px solid #ffe0a1}
.schedule-status-pill.final{background:#e6f7ee;color:#157347;border:1px solid #bfe8d2}
.schedule-simple-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.schedule-simple-actions .btn{min-height:44px;padding:10px 16px;border-radius:12px;font-weight:500!important;box-shadow:0 8px 18px rgba(30,64,108,.10)}
.schedule-simple-actions form{margin:0}

.schedule-simple-guide{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px!important;
  margin:20px 30px 18px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.guide-step{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:82px;
  padding:14px;
  border:1px solid #dfe8f4;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
  box-shadow:0 7px 18px rgba(28,59,98,.05);
}
.guide-step::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#1d6fdc,#5ca9f6);
  opacity:.55;
}
.guide-step .guide-number{
  flex:0 0 30px;
  width:30px;
  height:30px;
  background:linear-gradient(145deg,#0f4f9d,#287edf);
  box-shadow:0 6px 12px rgba(26,98,188,.20);
  font-size:13px;
  font-weight:600;
}
.guide-step b{display:block;margin:1px 0 4px;color:#17365d;font-size:14px;font-weight:600}
.guide-step small{display:block;color:#7a8ba1;font-size:11.5px;line-height:1.4}

.schedule-simple-control-card{
  margin:0 30px 28px;
  padding:20px;
  border:1px solid #dfe8f3;
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 30px rgba(25,57,98,.07);
}
.schedule-simple-filter{margin:0!important}
.schedule-simple-filter .class-picker{width:min(390px,100%)!important}
.schedule-simple-filter .field label,
.schedule-day-label{
  display:block;
  margin-bottom:7px;
  color:#264362;
  font-size:12px;
  font-weight:600;
}
.schedule-simple-filter select{
  min-height:46px!important;
  padding:10px 13px!important;
  border:1px solid #d6e1ee!important;
  border-radius:12px!important;
  background:#fbfdff!important;
  color:#17365c!important;
  font-size:14px!important;
  box-shadow:inset 0 1px 1px rgba(17,48,88,.02);
}
.schedule-simple-filter select:focus{border-color:#6aa4e8!important;box-shadow:0 0 0 3px rgba(37,113,209,.10)!important;outline:0}
.schedule-day-section{margin-top:18px;padding-top:17px;border-top:1px solid #edf1f6}
.schedule-simple-tabs{gap:8px!important;margin:0!important;padding:0!important}
.simple-day-tab{
  min-width:86px!important;
  padding:9px 14px!important;
  border-radius:10px!important;
  border:1px solid #d9e3ef!important;
  background:#f8fbff!important;
  color:#35516f!important;
  font-size:12px!important;
  font-weight:500!important;
  box-shadow:none!important;
}
.simple-day-tab:hover{background:#edf5ff!important;border-color:#9fc2ec!important;color:#174f92!important}
.simple-day-tab.active{
  background:linear-gradient(135deg,#1456ad,#287ee0)!important;
  border-color:#1456ad!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(21,87,174,.20)!important;
}
.schedule-simple-status{
  justify-content:flex-start!important;
  gap:11px!important;
  margin:16px 0!important;
  padding:12px 14px!important;
  border:1px solid #d9e8f7!important;
  border-radius:13px!important;
  background:linear-gradient(90deg,#eef7ff 0%,#f8fbff 100%)!important;
}
.status-icon{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#1f6fd0;
  color:#fff;
  font-size:20px;
  line-height:1;
  box-shadow:0 6px 13px rgba(31,111,208,.18);
}
.status-copy{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.schedule-simple-status .status-copy b{font-size:14px!important;color:#17365d!important;font-weight:600}
.schedule-simple-status .status-copy span{font-size:12.5px!important;color:#587089!important}
.schedule-simple-status .status-copy strong{color:#1c5fae;font-weight:600}

.schedule-simple-empty{
  min-height:170px;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center;
  gap:7px!important;
  margin-top:14px;
  padding:28px 20px!important;
  border:1px dashed #cfdae8!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fbfdff,#f6f9fd)!important;
}
.schedule-simple-empty .empty-visual{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-bottom:4px;
  border-radius:14px;
  background:#eaf3ff;
  color:#1b67c0;
  font-size:22px;
}
.schedule-simple-empty b{color:#254566!important;font-size:15px!important;font-weight:600!important}
.schedule-simple-empty span{max-width:650px;color:#71839a!important;font-size:12.5px!important;line-height:1.55}
.schedule-simple-empty span strong{color:#355d89;font-weight:600}

.schedule-simple-list{gap:10px!important;margin-top:4px}
.simple-slot-row{
  min-height:72px!important;
  padding:11px 14px!important;
  border-radius:14px!important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.simple-slot-row.empty-slot:hover{border-color:#bed4ee;box-shadow:0 8px 22px rgba(24,66,113,.08);transform:translateY(-1px)}
.simple-add-btn{font-weight:500!important;background:linear-gradient(180deg,#eef6ff,#e6f1ff)!important}
.simple-add-btn:hover{background:#1458b0!important}

@media(max-width:1100px){
  .schedule-simple-guide{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .schedule-simple-hero{align-items:stretch;flex-direction:column}
  .schedule-simple-actions{justify-content:flex-start}
}
@media(max-width:760px){
  .schedule-simple-page{border-radius:18px}
  .schedule-simple-hero{padding:20px 16px 17px;gap:16px}
  .schedule-simple-title-row h3{font-size:22px}
  .schedule-simple-title-row{align-items:flex-start}
  .schedule-simple-subtitle{font-size:12px!important}
  .schedule-simple-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .schedule-simple-actions .btn,.schedule-simple-actions form,.schedule-simple-actions form .btn{width:100%}
  .schedule-simple-guide{grid-template-columns:1fr!important;margin:14px 16px!important;gap:8px!important}
  .guide-step{min-height:68px;padding:11px}
  .schedule-simple-control-card{margin:0 16px 18px;padding:15px;border-radius:16px}
  .schedule-simple-filter .class-picker{width:100%!important}
  .schedule-simple-tabs{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
  .simple-day-tab{min-width:0!important;width:100%;padding:9px 5px!important;font-size:11.5px!important}
  .schedule-simple-status{align-items:flex-start!important}
  .status-copy{display:block!important}
  .status-copy span{display:block;margin-top:2px}
  .schedule-simple-empty{min-height:150px}
}
@media(max-width:420px){
  .schedule-simple-actions{grid-template-columns:1fr}
  .schedule-simple-tabs{grid-template-columns:repeat(2,1fr)!important}
}

/* Footer tabel: jumlah data di kiri, navigasi halaman di kanan */
.table-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;flex-wrap:wrap}
.table-footer .data-count{font-size:12px;font-weight:700;color:#71809a}
.table-footer .pagination{margin-top:0;margin-left:auto}
@media(max-width:640px){
  .table-footer{align-items:flex-start}
  .table-footer .pagination{width:100%;margin-left:0;justify-content:flex-start}
}
.top-logout{border:0;cursor:pointer}