:root{--green:#0b6b4b;--deep:#003d2d;--green2:#198754;--mint:#eaf7f0;--gold:#d4a72c;--gold2:#f0c84b;--ink:#13231e;--muted:#66746f;--line:#e5ece8;--sidebar:304px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink)}
body.admin-body{background:#f6f8f7}.admin-layout{min-height:100vh;display:flex;background:linear-gradient(135deg,#f8faf9,#f1f6f3)}
.app-sidebar{width:var(--sidebar);position:fixed;inset:0 auto 0 0;z-index:1040;color:#fff;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#003d2d 0%,#00513b 52%,#006044 100%);box-shadow:12px 0 36px rgba(0,54,40,.14)}
.app-sidebar:before{content:"";position:absolute;inset:0;opacity:.09;background-image:radial-gradient(circle at 20px 20px,transparent 0 13px,#fff 14px 15px,transparent 16px),radial-gradient(circle at 50px 50px,transparent 0 13px,#fff 14px 15px,transparent 16px);background-size:70px 70px;mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 100%)}
.sidebar-decor.top{position:absolute;inset:0 0 auto;height:105px;background:linear-gradient(135deg,rgba(212,167,44,.12),transparent 55%);pointer-events:none}.sidebar-brand,.school-year-card,.sidebar-scroll,.sidebar-bottom,.sidebar-mosque{position:relative;z-index:2}
.sidebar-brand{padding:18px 18px 10px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center}.school-logo{width:70px;height:70px;border-radius:20px 8px 20px 8px;border:2px solid rgba(240,200,75,.75);display:grid;place-items:center;background:linear-gradient(145deg,#f5fff8,#d7f2df);color:var(--green);font-size:34px;box-shadow:0 8px 22px rgba(0,0,0,.14),inset 0 0 0 4px rgba(255,255,255,.75)}
.brand-copy{line-height:1.05}.brand-copy strong{display:block;font-size:18px;letter-spacing:.6px}.brand-copy span{display:block;font-weight:800;font-size:17px;margin-top:3px;letter-spacing:1px}.sidebar-close{margin-left:auto;background:transparent;border:0;color:#fff;font-size:20px}
.school-year-card{margin:0 28px 10px;padding:6px 0 10px;text-align:center;border-bottom:1px solid rgba(255,255,255,.15)}.year-caption{display:flex;align-items:center;justify-content:center;gap:8px;color:#f4ca48;font-size:11px;font-weight:800;letter-spacing:.5px}.year-caption span{width:36px;height:2px;background:#d4a72c}.year-value{margin:7px auto 0;padding:5px 15px;border:1px solid rgba(212,167,44,.28);border-radius:10px;font-weight:800;font-size:15px;max-width:230px;background:rgba(0,0,0,.10)}
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;padding:4px 15px 6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}.sidebar-scroll::-webkit-scrollbar{width:5px}.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:20px}
.sidebar-profile{padding:13px 12px;margin:4px 0 12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);border-radius:14px;display:flex;align-items:center;gap:12px}.profile-avatar{width:58px;height:58px;min-width:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#dff6e7);color:#0b6b4b;font-size:29px;border:3px solid rgba(255,255,255,.5)}.profile-copy{min-width:0}.profile-copy strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-copy small{display:block;color:#d4f2df;margin-top:3px;font-size:12px}.profile-online{font-size:11px;color:#8cf0a9;margin-top:3px}.profile-online i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#32d66e;margin-right:5px;box-shadow:0 0 0 3px rgba(50,214,110,.12)}
.sidebar-label{font-size:11px;letter-spacing:.3px;font-weight:800;color:#f4ca48;padding:8px 10px 6px}.section-label{margin-top:8px;border-top:1px solid rgba(255,255,255,.14);padding-top:14px}.sidebar-link{margin:2px 0;padding:10px 12px;border-radius:8px;color:#eefaf3;text-decoration:none;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;transition:.18s}.sidebar-link i:first-child{width:20px;min-width:20px;text-align:center;font-size:17px}.sidebar-link:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}.sidebar-link.active{background:linear-gradient(90deg,rgba(212,167,44,.82),rgba(188,154,45,.70));color:#fff;box-shadow:inset 4px 0 #f7d35a,0 6px 15px rgba(0,0,0,.08)}
.sidebar-bottom{padding:8px 15px 14px;background:linear-gradient(180deg,rgba(0,61,45,.2),rgba(0,37,27,.4))}.sidebar-logout{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(212,167,44,.65);border-radius:9px;color:#fff;text-decoration:none;font-weight:700;font-size:14px;background:rgba(255,255,255,.06)}.sidebar-logout:hover{background:rgba(212,167,44,.15);color:#fff}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,37,27,.55);z-index:1030}.admin-content{width:calc(100% - var(--sidebar));margin-left:var(--sidebar);min-width:0}.content-topbar{height:64px;background:rgba(255,255,255,.96);border-bottom:1px solid #e9eeeb;display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:1000}.sidebar-toggle{display:none;color:#143b2e;border:0;font-size:24px}.topbar-breadcrumb{display:flex;align-items:center;gap:10px;color:#164e3b}.topbar-dot{width:8px;height:8px;border-radius:50%;background:#d4a72c}.topbar-clock{margin-left:auto;display:flex;align-items:center;color:#384640;font-size:13px}.topbar-display{margin-left:18px;text-decoration:none;color:#0b6b4b;border:1px solid #cde7d8;background:#f1fbf5;border-radius:9px;padding:7px 12px;font-size:12px;font-weight:700}.content-main{padding:24px 32px;min-height:calc(100vh - 112px)}.content-footer{padding:13px 32px;border-top:1px solid #e5ece8;background:#fff;color:#65716d;font-size:12px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
/* dashboard */
.dashboard-hero{position:relative;overflow:hidden;background:#fff;border:1px solid #e7ece9;border-radius:16px;padding:27px 28px;margin-bottom:18px;min-height:164px;box-shadow:0 6px 24px rgba(24,52,42,.045)}.dashboard-hero h1{font-size:34px;font-weight:800;color:#073e2e;margin:0 0 9px}.hero-line{width:58px;height:3px;background:#d4a72c;margin-bottom:12px;border-radius:99px}.dashboard-hero p{margin:0;color:#53615b;font-size:16px}.hero-pattern{position:absolute;right:0;top:0;width:260px;height:100%;opacity:.09;background-image:radial-gradient(circle,#0b6b4b 1px,transparent 1px);background-size:14px 14px;mask-image:linear-gradient(90deg,transparent,#000)}
.stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid #e8ecea;border-radius:14px;box-shadow:0 7px 20px rgba(22,52,41,.055);padding:16px;min-height:116px;display:flex;align-items:center;gap:13px}.stat-icon{width:58px;height:58px;min-width:58px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:25px}.stat-green{background:linear-gradient(145deg,#1e9b4d,#15803d)}.stat-blue{background:linear-gradient(145deg,#3b82f6,#2563eb)}.stat-purple{background:linear-gradient(145deg,#8b5cf6,#6d28d9)}.stat-orange{background:linear-gradient(145deg,#f59e0b,#ea580c)}.stat-teal{background:linear-gradient(145deg,#14b8a6,#0f766e)}.stat-card small{display:block;color:#66746f;font-size:13px}.stat-number{font-size:27px;font-weight:800;line-height:1.1;margin-top:4px;color:#0d1814}.stat-note{font-size:12px;margin-top:4px}.note-green{color:#16803f}.note-blue{color:#2563eb}.note-purple{color:#6d28d9}.note-orange{color:#ea580c}.note-teal{color:#0f766e}
.dashboard-two{display:grid;grid-template-columns:1.3fr .95fr;gap:18px;margin-bottom:18px}.panel-card{background:#fff;border:1px solid #e8ecea;border-radius:14px;box-shadow:0 7px 20px rgba(22,52,41,.055);padding:18px}.panel-title{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;margin-bottom:14px;color:#102c23}.panel-title i{color:#0b8b4d}.current-box{border:1px solid #d6e7dc;border-radius:10px;background:linear-gradient(135deg,#f7fbf8,#fff);overflow:hidden}.current-top{display:grid;grid-template-columns:1.5fr .45fr .75fr;gap:10px;padding:18px;border-bottom:1px solid #e1e9e5}.current-label{font-size:12px;color:#68746f;margin-bottom:4px}.current-value{font-size:15px;font-weight:700}.current-value i{color:#178a4b;margin-right:7px}.period-pill{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:#168a4a;color:#fff;border-radius:7px;font-weight:800}.current-body{padding:17px 18px}.current-status{color:#08753d;font-weight:800;font-size:14px;margin-bottom:10px}.current-subject{font-size:24px;font-weight:800;color:#0d1814}.current-teacher{color:#3f4d48;font-size:15px}.current-teacher strong{color:#148141}.info-strip{margin-top:14px;padding:10px 13px;border:1px solid #cfe0fb;background:#f0f6ff;color:#215fa8;border-radius:8px;font-size:12px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quick-card{min-height:105px;border:1px solid #e7ece9;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#15211d;box-shadow:0 4px 12px rgba(0,0,0,.05);transition:.18s}.quick-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.08);color:#0b6b4b}.quick-card i{font-size:29px;margin-bottom:10px}.quick-green i{color:#178a4b}.quick-blue i{color:#2563eb}.quick-purple i{color:#6d28d9}.quick-orange i{color:#ea580c}.quick-teal i{color:#0f8e87}.quick-card span{font-size:13px;font-weight:600;text-align:center}
.welcome-panel{position:relative;overflow:hidden;min-height:165px}.welcome-panel h2{font-size:21px;font-weight:800;color:#0b392b}.welcome-panel p{max-width:62%;color:#3e4c47;font-size:14px;line-height:1.65}.system-list{display:grid;gap:8px}.system-item{display:flex;align-items:center;gap:9px;font-size:13px;color:#53615b}.system-item i{color:#16a34a}.code-badge{font-family:monospace;font-size:11px;background:#f1f5f3;padding:3px 6px;border-radius:6px}
.card-stat{border:0;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.07)}.table thead th{background:#ecfdf5;color:#065f46;vertical-align:middle}.table td,.table th{vertical-align:middle}.form-control,.form-select{border-radius:10px}.btn{border-radius:10px}
.login-page,.display-page{min-height:100vh;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.22),transparent 24%),radial-gradient(circle at 80% 90%,rgba(255,255,255,.16),transparent 25%),linear-gradient(135deg,#064e3b,#15803d 45%,#22c55e);position:relative;overflow:hidden}.login-page:before,.display-page:before{content:"";position:absolute;inset:-20%;background:linear-gradient(45deg,transparent 45%,rgba(255,255,255,.06) 46%,rgba(255,255,255,.06) 54%,transparent 55%);background-size:70px 70px;transform:rotate(10deg)}.login-card{max-width:460px;border:0;border-radius:24px;box-shadow:0 25px 70px rgba(0,0,0,.22);position:relative}
.display-shell{position:relative;z-index:1}.glass{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.55);border-radius:22px}.display-title{color:#065f46;font-weight:800}.clock{font-variant-numeric:tabular-nums}.schedule-card{min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;border-radius:28px;box-shadow:0 20px 50px rgba(0,0,0,.16);position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,253,244,.95))}.schedule-card:before{content:"";position:absolute;width:180px;height:180px;right:-70px;top:-70px;border-radius:50%;background:rgba(34,197,94,.10)}.schedule-card:after{content:"";position:absolute;width:140px;height:140px;left:-70px;bottom:-70px;border-radius:50%;background:rgba(212,167,44,.10)}.subject{font-size:clamp(2rem,5vw,5.5rem);font-weight:900;line-height:1.05;color:#065f46;overflow-wrap:anywhere}.teacher{font-size:clamp(1.1rem,2.2vw,2rem);font-weight:700;color:#334155}.class-badge{font-size:clamp(1.3rem,2.5vw,2.2rem);padding:.5rem 1.2rem;border-radius:999px;background:#dcfce7;color:#166534;font-weight:800}.period-badge{font-size:clamp(1rem,1.8vw,1.4rem)}.fit-target{max-width:95%;margin:auto}.small-muted{font-size:.9rem;color:#64748b}.thumb{width:54px;height:54px;object-fit:cover;border-radius:50%;border:2px solid #dcfce7}.teacher-photo-frame{width:128px;height:128px;margin:12px auto;padding:5px;border-radius:28px 10px 28px 10px;background:linear-gradient(145deg,#d4a72c,#fff8d9,#15803d);box-shadow:0 12px 28px rgba(6,78,59,.18)}.teacher-photo{width:100%;height:100%;object-fit:cover;border-radius:22px 7px 22px 7px;border:4px solid #fff;background:#ecfdf5}.teacher-placeholder{width:100%;height:100%;border-radius:22px 7px 22px 7px;border:4px solid #fff;background:linear-gradient(145deg,#dcfce7,#f0fdf4);display:grid;place-items:center;color:#15803d;font-size:54px}.teacher-nip{font-size:12px;color:#64748b;margin-top:2px}.display-settings{background:#f7fff9;border:1px solid #d8f3df;border-radius:16px;padding:12px}.display-settings .form-label{font-weight:700;color:#166534;font-size:12px}.rotate-status{font-size:12px;color:#166534;font-weight:700}.rotation-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12);margin-right:5px}
@media(max-width:1200px){.stat-grid{grid-template-columns:repeat(3,1fr)}.dashboard-two{grid-template-columns:1fr}}
@media(max-width:991.98px){:root{--sidebar:304px}.app-sidebar{transform:translateX(-100%);transition:transform .25s ease}.app-sidebar.show{transform:translateX(0)}.sidebar-overlay.show{display:block}.admin-content{width:100%;margin-left:0}.sidebar-toggle{display:inline-flex;margin-right:10px}.content-topbar{padding:0 16px}.topbar-clock{display:none}.content-main{padding:20px 16px}.stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-hero{min-height:180px}}
@media(max-width:600px){.content-footer{padding:12px 16px}.footer-right{display:none}.stat-grid{grid-template-columns:1fr}.dashboard-hero{padding:21px}.dashboard-hero h1{font-size:28px}.current-top{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)}.welcome-panel p{max-width:100%}.brand-copy strong{font-size:15px}.brand-copy span{font-size:14px}}

.school-logo img{width:100%;height:100%;object-fit:contain;border-radius:16px 6px 16px 6px;padding:5px;background:#fff}
.school-logo i{line-height:1}
.login-brand-logo{width:104px;height:104px;border-radius:28px 10px 28px 10px;border:3px solid #d4a72c;background:#fff;object-fit:contain;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.login-brand-icon{width:104px;height:104px;border-radius:28px 10px 28px 10px;display:grid;place-items:center;margin:auto;background:linear-gradient(145deg,#ecfdf5,#d1fae5);color:#0b6b4b;border:3px solid #d4a72c;box-shadow:0 12px 30px rgba(0,0,0,.14);font-size:48px}
.madrasah-card{background:#fff;border:1px solid #e4ebe7;border-radius:18px;box-shadow:0 10px 28px rgba(20,50,40,.06);padding:22px}
.madrasah-logo-preview{width:150px;height:150px;border-radius:28px 10px 28px 10px;border:3px solid #d4a72c;background:#f3faf6;display:grid;place-items:center;overflow:hidden}
.madrasah-logo-preview img{width:100%;height:100%;object-fit:contain;padding:10px}
.madrasah-logo-preview i{font-size:58px;color:#0b6b4b}
.madrasah-heading{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.madrasah-heading-icon{width:48px;height:48px;border-radius:14px;background:#eaf7f0;color:#0b6b4b;display:grid;place-items:center;font-size:24px}

/* V10 - Focused Realtime Display */
.display-page{min-height:100vh;background:
 radial-gradient(circle at 12% 10%,rgba(212,167,44,.22),transparent 22%),
 radial-gradient(circle at 88% 88%,rgba(255,255,255,.16),transparent 25%),
 linear-gradient(135deg,#033d2e 0%,#08734f 48%,#16a05d 100%);
}
.display-shell{min-height:100vh;padding:12px 18px!important}
.display-controls{padding:12px 16px!important;border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,.12)}
.display-controls .display-title{font-size:clamp(1rem,1.7vw,1.5rem)}
.display-controls .small-muted{font-size:.72rem}
.display-settings{padding:7px 10px!important}
.display-settings .form-label{font-size:10px}
.display-controls .form-select,.display-controls .btn{min-height:34px;font-size:12px}
.realtime-stage-wrap{width:100%;display:flex;flex-direction:column;align-items:center}
.realtime-stage{
 width:min(76vw,1380px);height:min(72vh,720px);min-height:500px;
 margin:4px auto 0;position:relative;overflow:hidden;
 border-radius:34px;
 background:linear-gradient(145deg,rgba(255,255,255,.985),rgba(241,253,246,.97));
 border:8px solid rgba(255,255,255,.72);
 box-shadow:0 28px 70px rgba(0,0,0,.25),0 0 0 1px rgba(212,167,44,.35);
}
.realtime-stage:before{content:"";position:absolute;inset:0;opacity:.35;
 background-image:linear-gradient(30deg,transparent 47%,rgba(6,95,70,.08) 48%,rgba(6,95,70,.08) 52%,transparent 53%),
 linear-gradient(150deg,transparent 47%,rgba(212,167,44,.08) 48%,rgba(212,167,44,.08) 52%,transparent 53%);
 background-size:58px 58px;pointer-events:none}
.stage-glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.stage-glow-a{width:280px;height:280px;right:-100px;top:-110px;background:rgba(34,197,94,.16)}
.stage-glow-b{width:240px;height:240px;left:-100px;bottom:-120px;background:rgba(212,167,44,.13)}
.realtime-stage-content{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.current-card-inner{width:92%;height:88%;display:flex;flex-direction:column;justify-content:space-between;text-align:center}
.current-card-top{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #dceee3;padding:4px 8px 14px}
.current-live{font-size:clamp(.72rem,1vw,1rem);font-weight:900;color:#08734f;letter-spacing:.08em}
.current-live span{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.14);margin-right:6px}
.current-period{font-weight:800;color:#64748b;font-size:clamp(.85rem,1.25vw,1.2rem)}
.current-main{flex:1;display:grid;grid-template-columns:18% 58% 24%;align-items:center;gap:18px}
.current-class-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #dceee3;height:72%}
.current-class-label,.current-label,.teacher-focus-label{font-size:clamp(.65rem,1vw,.9rem);font-weight:900;color:#7a8a82;letter-spacing:.12em}
.current-class{margin-top:8px;font-size:clamp(3.5rem,8vw,8rem);font-weight:950;line-height:.95;color:#065f46}
.current-subject-wrap{padding:0 16px}
.current-label{color:#08734f;margin-bottom:14px}
.current-subject{width:100%;height:2.2em;display:flex;align-items:center;justify-content:center;font-weight:950;line-height:1.05;color:#075d45;overflow:hidden;overflow-wrap:anywhere}
.current-teacher{height:72%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid #dceee3}
.teacher-focus-frame{width:clamp(125px,12vw,205px);height:clamp(125px,12vw,205px);padding:7px;border-radius:38px 13px 38px 13px;background:linear-gradient(145deg,#d4a72c,#fff8d9,#0b7b55);box-shadow:0 16px 35px rgba(6,78,59,.18);margin-bottom:13px}
.teacher-photo-focus,.teacher-placeholder-focus{width:100%;height:100%;object-fit:cover;border:5px solid #fff;border-radius:31px 9px 31px 9px;background:#ecfdf5}
.teacher-placeholder-focus{display:grid;place-items:center;font-size:clamp(48px,5vw,82px);color:#15803d}
.teacher-focus-name{font-size:clamp(1.05rem,1.7vw,1.65rem);font-weight:900;color:#334155;max-width:95%;line-height:1.2}
.teacher-focus-nip{font-size:clamp(.6rem,.8vw,.78rem);color:#64748b;margin-top:4px}
.current-bottom{border-top:1px solid #dceee3;padding:12px 8px 2px;color:#718079;font-size:clamp(.62rem,.85vw,.82rem);font-weight:800;letter-spacing:.08em}
.current-bottom span{color:#d4a72c;margin:0 7px}
.stage-footer{width:min(76vw,1380px);display:flex;justify-content:space-between;padding:7px 12px;color:rgba(255,255,255,.9);font-size:11px;font-weight:700;letter-spacing:.04em}
.stage-footer span:first-child{color:#ffe9a8}
.empty-current{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#64748b}
.empty-icon{font-size:72px;color:#15803d;margin-bottom:10px}
.empty-current h2{font-weight:900;color:#065f46}
.empty-current p{margin:0}
@media(max-width:1000px){
 .realtime-stage{width:90vw;height:70vh;min-height:480px}
 .current-main{grid-template-columns:20% 56% 24%;gap:8px}
 .current-card-inner{width:94%;height:90%}
 .stage-footer{width:90vw}
}
@media(max-width:700px){
 .display-shell{padding:8px!important}
 .display-controls .row>div:nth-child(-n+3){display:none}
 .display-controls{margin-bottom:7px!important}
 .realtime-stage{width:96vw;height:74vh;min-height:480px;border-width:5px;border-radius:24px}
 .current-card-inner{height:92%;width:94%}
 .current-card-top{padding-bottom:9px}
 .current-main{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:5px}
 .current-class-wrap{border-right:0;border-bottom:1px solid #dceee3;height:auto;padding-bottom:7px}
 .current-class{font-size:48px}
 .current-subject-wrap{padding:4px}
 .current-subject{height:2.2em}
 .current-teacher{border-left:0;border-top:1px solid #dceee3;height:auto;padding-top:8px}
 .teacher-focus-frame{width:90px;height:90px;padding:4px;margin-bottom:5px}
 .teacher-focus-name{font-size:16px}
 .stage-footer{width:96vw;font-size:9px}
 .stage-footer span:last-child{display:none}
}

/* V11 - Realtime display control sidebar */
.display-app{min-height:100vh;display:flex;position:relative;z-index:1}
.display-sidebar{width:285px;min-width:285px;min-height:100vh;background:linear-gradient(180deg,#043f31 0%,#075d46 55%,#064b3a 100%);color:#fff;padding:22px 18px;box-shadow:12px 0 40px rgba(0,0,0,.18);display:flex;flex-direction:column;position:relative;z-index:5}
.display-sidebar:before{content:"";position:absolute;inset:0;opacity:.10;background-image:linear-gradient(30deg,transparent 47%,#fff 48%,#fff 52%,transparent 53%),linear-gradient(150deg,transparent 47%,#d4a72c 48%,#d4a72c 52%,transparent 53%);background-size:46px 46px;pointer-events:none}
.display-sidebar>*{position:relative;z-index:1}
.display-brand{display:flex;align-items:center;gap:11px;padding:2px 4px 20px;border-bottom:1px solid rgba(255,255,255,.14)}
.display-brand-logo{width:52px;height:52px;flex:0 0 52px;border-radius:17px 6px 17px 6px;background:#fff;color:#08734f;display:grid;place-items:center;font-size:27px;border:2px solid #d4a72c;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.display-brand strong{display:block;font-size:14px;letter-spacing:.04em}.display-brand span{display:block;font-size:12px;color:#cde9dd;letter-spacing:.16em;margin-top:2px}
.display-side-clock{text-align:center;padding:20px 8px 16px}.display-side-clock div{font-size:32px;font-weight:900;letter-spacing:.04em;font-variant-numeric:tabular-nums}.display-side-clock small{color:#b9dccc;font-size:11px}
.display-side-section{font-size:10px;font-weight:900;letter-spacing:.16em;color:#d4a72c;margin:14px 4px 8px}
.display-side-group{margin-bottom:10px}.display-side-group label{font-size:11px;font-weight:800;color:#dceee6;margin:0 0 5px;display:block}.display-side-group label i{margin-right:5px;color:#d4a72c}
.display-side-group .form-select{height:38px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.10);color:#fff;border-radius:10px;font-size:12px;box-shadow:none}
.display-side-group .form-select option{color:#123;background:#fff}
.display-side-btn{width:100%;height:39px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);color:#fff;border-radius:10px;margin-top:8px;font-size:12px;font-weight:800;text-align:left;padding:0 13px;transition:.2s}
.display-side-btn i{color:#d4a72c;margin-right:7px}.display-side-btn:hover,.display-side-btn.active{background:#d4a72c;color:#173d2f;border-color:#d4a72c}.display-side-btn:hover i,.display-side-btn.active i{color:#173d2f}.display-side-btn.outline{background:rgba(255,255,255,.04)}
.display-side-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.13);padding-top:13px}.display-side-footer .rotate-status{font-size:10px;color:#d9f1e4}.display-year{font-size:10px;color:#9fcab9;margin-top:7px}
.display-main{flex:1;min-width:0;min-height:100vh;padding:22px 28px 15px;display:flex;flex-direction:column}
.display-main-header{display:flex;justify-content:space-between;align-items:center;gap:20px;color:#fff;padding:0 4px 14px}
.display-kicker{font-size:10px;font-weight:900;letter-spacing:.16em;color:#ffe8a3}.display-main-header h1{font-size:clamp(1.7rem,2.7vw,2.7rem);font-weight:950;margin:3px 0 0}.display-main-header p{margin:0;color:#d4eee1;font-size:13px}
.header-status{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:9px 13px;border-radius:13px;backdrop-filter:blur(10px)}.header-status strong{display:block;font-size:11px;color:#fff}.header-status small{display:block;color:#c7e6d8;font-size:9px;margin-top:2px}
.display-status-strip{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.95);border-radius:14px;padding:9px 15px;margin-bottom:8px;box-shadow:0 10px 30px rgba(0,0,0,.10)}.status-now{display:flex;align-items:center;gap:8px;color:#075d45;font-size:12px}.main-clock{font-size:19px;font-weight:950;color:#065f46;font-variant-numeric:tabular-nums}
.status-live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.15)}
.display-main .realtime-stage-wrap{flex:1;min-height:0}.display-main .realtime-stage{width:min(82vw,1380px);height:min(74vh,720px);min-height:0;max-height:calc(100vh - 180px)}
.display-main .stage-footer{width:min(82vw,1380px)}
@media(max-width:900px){.display-sidebar{width:240px;min-width:240px;padding:16px 13px}.display-main{padding:14px}.display-main-header h1{font-size:25px}.header-status{display:none}.display-main .realtime-stage{width:94vw;height:70vh;max-height:none}.display-main .stage-footer{width:94vw}}
@media(max-width:700px){.display-app{display:block}.display-sidebar{width:100%;min-width:0;min-height:auto;padding:10px 12px}.display-brand{padding-bottom:9px}.display-side-clock{position:absolute;right:12px;top:8px;padding:0}.display-side-clock div{font-size:20px}.display-side-clock small{display:none}.display-side-section,.display-side-group{display:none}.display-side-btn{display:inline-block;width:calc(33.333% - 7px);margin:8px 3px 0;height:35px;font-size:10px}.display-side-footer{display:none}.display-main{min-height:calc(100vh - 86px);padding:8px}.display-main-header{padding:0 4px 7px}.display-main-header h1{font-size:21px}.display-main-header p{font-size:10px}.display-status-strip{margin-bottom:6px}.display-main .realtime-stage{width:96vw;height:68vh}.display-main .stage-footer{width:96vw}}

/* V12 - Jadwal saat ini dinaikkan, tidak lagi middle-align */
.display-main .realtime-stage-wrap{
    justify-content:flex-start;
    align-items:center;
}
.display-main .realtime-stage{
    margin-top:2px;
    height:min(70vh,680px);
    max-height:calc(100vh - 165px);
}
.display-main .realtime-stage-content{
    align-items:flex-start;
}
.display-main .current-card-inner{
    height:92%;
    margin-top:18px;
    justify-content:flex-start;
}
.display-main .current-card-top{
    flex:0 0 auto;
}
.display-main .current-main{
    flex:0 0 auto;
    min-height:0;
    margin-top:4px;
}
.display-main .current-bottom{
    margin-top:auto;
}
@media(max-width:900px){
    .display-main .realtime-stage{
        height:67vh;
        max-height:none;
    }
    .display-main .current-card-inner{
        margin-top:12px;
    }
}
@media(max-width:700px){
    .display-main .realtime-stage{
        height:65vh;
    }
    .display-main .current-card-inner{
        margin-top:8px;
        height:94%;
    }
}

/* V13 - Header/status compact and safe for standard screens */
.display-main-header{padding-bottom:8px}
.display-main-header h1{font-size:clamp(1.35rem,2.1vw,2.15rem)}
.display-main-header p{font-size:11px}
.display-status-strip{padding:6px 12px;margin-bottom:6px;border-radius:11px}
.status-now{font-size:10px;gap:6px}
.status-now .status-live-dot{width:7px;height:7px;box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.status-now .period-badge{font-size:10px;padding:.28rem .55rem}
.main-clock{font-size:16px}
.display-main .realtime-stage{height:min(66vh,620px);max-height:calc(100vh - 145px);min-height:430px}
.display-main .realtime-stage-content{align-items:flex-start}
.display-main .current-card-inner{height:94%;margin-top:12px}
.display-main .current-card-top{padding-bottom:9px}
.current-live{font-size:clamp(.62rem,.8vw,.78rem)}
.current-period{font-size:clamp(.72rem,1vw,.95rem)}
.display-main .current-main{margin-top:2px}
.display-main .current-class{font-size:clamp(2.8rem,6vw,6.2rem)}
.display-main .current-label{font-size:clamp(.58rem,.75vw,.75rem);margin-bottom:8px}
.display-main .current-subject{font-size:clamp(2.5rem,5.5vw,5.6rem);height:1.8em}
.display-main .teacher-focus-frame{width:clamp(105px,9vw,160px);height:clamp(105px,9vw,160px)}
.display-main .teacher-focus-name{font-size:clamp(.9rem,1.35vw,1.35rem)}
.display-main .teacher-focus-nip{font-size:10px}
.display-main .current-bottom{padding:8px 5px 0;font-size:9px}
.display-main .stage-footer{padding:5px 10px;font-size:9px}
@media(max-height:800px) and (min-width:701px){
 .display-main{padding-top:12px}
 .display-main-header{padding-bottom:5px}
 .display-main-header h1{font-size:22px}
 .display-status-strip{padding:5px 10px}
 .display-main .realtime-stage{height:62vh;max-height:calc(100vh - 125px);min-height:390px}
 .display-main .current-card-inner{margin-top:8px}
 .display-main .teacher-focus-frame{width:105px;height:105px}
 .display-main .current-subject{font-size:clamp(2.1rem,4.8vw,4.6rem)}
}
@media(max-width:700px){
 .display-main-header h1{font-size:19px}
 .display-main-header p{font-size:9px}
 .display-status-strip{padding:5px 8px}
 .status-now strong{font-size:9px}
 .main-clock{font-size:14px}
 .display-main .realtime-stage{height:61vh;min-height:390px}
 .display-main .current-card-inner{margin-top:6px}
 .display-main .current-subject{font-size:clamp(1.8rem,8vw,3.2rem)}
}

/* V14 - Ukuran font status, mata pelajaran dan kelas diperkecil 50% */
.display-main .status-now strong{font-size:5px!important;line-height:1.1}
.display-main .status-now{font-size:5px!important}
.display-main .status-now .period-badge{font-size:5px!important;padding:.18rem .35rem}
.display-main .current-class{font-size:clamp(1.4rem,3vw,3.1rem)!important}
.display-main .current-subject{font-size:clamp(1.25rem,2.75vw,2.8rem)!important}
@media(max-width:700px){
 .display-main .status-now strong,.display-main .status-now{font-size:5px!important}
 .display-main .status-now .period-badge{font-size:5px!important}
 .display-main .current-class{font-size:clamp(1.2rem,3vw,2.4rem)!important}
 .display-main .current-subject{font-size:clamp(1.1rem,4vw,2rem)!important}
}

/* V15 - Status +25%; foto guru dan jam di bawah mata pelajaran */
.display-main .status-now strong{font-size:6.25px!important}
.display-main .status-now{font-size:6.25px!important}
.display-main .status-now .period-badge{font-size:6.25px!important}
.subject-meta-row{display:flex;justify-content:center;align-items:center;gap:clamp(18px,3vw,42px);margin-top:16px}
.current-subject-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center}
.current-subject-wrap .current-teacher{height:auto!important;border:0!important;padding:0!important;min-width:150px}
.current-subject-wrap .teacher-focus-frame{margin-bottom:7px}
.current-time-box{min-width:180px;padding:13px 18px;border-radius:16px;background:#f2faf5;border:1px solid #d8eee0;text-align:center}
.current-time-value{margin-top:6px;color:#075d45;font-size:clamp(.9rem,1.35vw,1.3rem);font-weight:950;white-space:nowrap}
.current-time-value i{color:#d4a72c;margin-right:4px}
.display-main .current-subject{margin:0}
@media(max-width:700px){
 .subject-meta-row{gap:10px;margin-top:8px}
 .current-time-box{min-width:125px;padding:8px 9px}
 .current-time-value{font-size:12px}
 .current-subject-wrap .teacher-focus-frame{width:75px;height:75px}
 .current-subject-wrap .teacher-focus-name{font-size:13px}
 .current-subject-wrap .teacher-focus-label{font-size:8px}
 .display-main .status-now strong,.display-main .status-now,.display-main .status-now .period-badge{font-size:6.25px!important}
}