:root{
    --bg:#05070f;
    --panel:rgba(12,16,32,0.82);
    --panel-2:rgba(20,26,48,0.9);
    --border:rgba(120,150,255,0.22);
    --accent:#ffd25e;
    --accent-2:#7aa2ff;
    --text:#e8ecff;
    --muted:#9aa6d6;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow:hidden;
  }

  /* ===== Top Bar ===== */
  .topbar{
    position:fixed;top:0;left:0;right:0;height:54px;z-index:40;
    display:flex;align-items:center;gap:14px;padding:0 14px;
    background:linear-gradient(180deg,rgba(8,11,24,0.97),rgba(8,11,24,0.78));
    border-bottom:1px solid var(--border);backdrop-filter:blur(8px);
  }
  .brand{font-size:17px;font-weight:700;letter-spacing:.5px;white-space:nowrap;}
  .brand span{color:var(--accent);}
  .scale-pill{
    margin-left:auto;display:flex;align-items:center;gap:6px;
    background:var(--panel-2);border:1px solid var(--border);
    padding:6px 12px;border-radius:20px;font-size:13px;color:var(--muted);
  }
  .scale-pill b{color:var(--accent-2);}

  /* ===== Stage (the zoomable universe) ===== */
  .stage{
    position:fixed;top:54px;left:0;right:0;bottom:0;
    overflow:hidden;background:#02030a;
  }
  .stage.hidden{display:none;}
  .sphere-stage{
    position:fixed;top:54px;left:0;right:0;bottom:0;
    display:flex;align-items:center;justify-content:center;
    background:#02030a;z-index:22;overflow:hidden;
  }
  .sphere-stage.hidden{
    display:none;
  }
  .sphere-stage iframe{
    width:100%;height:100%;border:none;
  }
  .sphere-stage .sphere-overlay{
    position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:0 14px;pointer-events:auto;z-index:100;
  }
  .sphere-stage .sphere-action{
    pointer-events:auto;padding:12px 20px;border-radius:999px;
    border:1px solid var(--border);background:rgba(12,16,32,0.96);
    color:var(--text);font-size:13px;cursor:pointer;
    box-shadow:0 0 30px rgba(0,0,0,.25);transition:all 0.2s ease;
  }
  .sphere-stage .sphere-action:hover{
    background:rgba(122,162,255,0.25);border-color:var(--accent-2);color:var(--accent-2);
  }
  .sphere-stage .sphere-hint{
    color:var(--muted);font-size:12px;text-align:center;max-width:360px;
  }
  .universe{
    position:absolute;top:50%;left:50%;
    width:1600px;height:1066px;margin:-533px 0 0 -800px;
    transition:transform .35s cubic-bezier(.25,.8,.25,1);
    transform-origin:center center;
    overflow:hidden;
    border-radius:100% / 70%;
    clip-path:ellipse(100% 70% at 50% 50%);
  }
  /* rotating wrapper -> gives the galaxy its spiral spin */
  .galaxy-rotate{
    position:absolute;inset:0;
    transform-origin:50% 50%;
    animation:spin 140s linear infinite;
  }
  .galaxy-rotate.paused{animation-play-state:paused;}
  @keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  .universe img{
    width:100%;height:100%;object-fit:cover;display:block;
    border-radius:inherit;
  }
  /* soft galactic-core glow that breathes */
  .core-glow{
    position:absolute;left:50%;top:50%;
    width:240px;height:240px;border-radius:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(255,224,150,0.55),rgba(255,224,150,0) 70%);
    pointer-events:none;animation:breathe 8s ease-in-out infinite;
  }
  @keyframes breathe{0%,100%{opacity:.55;}50%{opacity:.9;}}

  /* ===== Solar System Orrery (galaxy zooms / fades into this) ===== */
  .solar-system{
    position:fixed;top:54px;left:0;right:0;bottom:0;z-index:20;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at center,#0a0f24 0%,#02030a 72%);
    opacity:0;pointer-events:none;transition:opacity .5s ease;
  }
  .orrery-tilt{transition:transform .6s ease;transform-style:preserve-3d;}
  .orrery-tilt.top{transform:rotateX(78deg);}
  .orrery-tilt.side{transform:rotateX(8deg);}
  .orrery{
    position:relative;width:760px;height:760px;
    --mult:1;transition:transform .4s ease;
  }
  .sun-core{
    position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 40%,#fff6c8,#ffb13b 55%,#ff7a18);
    box-shadow:0 0 60px 22px rgba(255,160,40,.7);
    animation:sunpulse 4s ease-in-out infinite;
  }
  @keyframes sunpulse{0%,100%{box-shadow:0 0 55px 18px rgba(255,160,40,.6);}
    50%{box-shadow:0 0 95px 34px rgba(255,160,40,.95);}}
  .orbit{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    border:1px solid rgba(150,180,255,.16);border-radius:50%;
  }
  .arm{
    position:absolute;inset:0;transform-origin:50% 50%;
    animation:orbit linear infinite;
    animation-duration:calc(var(--period) * 1s * var(--mult));
  }
  @keyframes orbit{from{transform:rotate(0);}to{transform:rotate(360deg);}}
  .planet{
    position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
    border-radius:50%;box-shadow:0 0 10px 2px rgba(255,255,255,.12);
  }
  .planet .plabel{
    position:absolute;left:50%;top:120%;transform:translateX(-50%);
    font-size:10px;color:var(--muted);white-space:nowrap;
    text-shadow:0 0 4px #000;
  }
  .saturn-ring{
    position:absolute;left:50%;top:50%;width:46px;height:14px;
    transform:translate(-50%,-50%) rotate(-20deg);
    border-radius:50%;border:2px solid rgba(230,210,160,.65);
  }
  .ss-speed{
    position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:36;
    display:none;gap:6px;background:var(--panel);border:1px solid var(--border);
    padding:6px;border-radius:24px;backdrop-filter:blur(8px);
  }
  .ss-speed.show{display:flex;}
  .ss-speed button{
    font-size:11px;letter-spacing:.5px;padding:6px 11px;border-radius:16px;
    background:var(--panel-2);border:1px solid var(--border);color:var(--muted);
    cursor:pointer;
  }
  .ss-speed button.active{background:rgba(255,210,94,.22);color:var(--accent);border-color:var(--accent);}

  /* ===== Revolving Earth Globe (solar system fades into this) ===== */
  .earth-layer{
    position:fixed;top:54px;left:0;right:0;bottom:0;z-index:22;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at center,#060a1a 0%,#01020a 78%);
    opacity:0;pointer-events:none;transition:opacity .5s ease;
  }
  .earth-layer.active{opacity:1;}
  #globeCanvas{display:block;cursor:pointer;transition:transform .7s cubic-bezier(.25,.8,.25,1);filter:drop-shadow(0 0 50px rgba(60,120,220,.45));}
  .earth-caption{
    position:absolute;bottom:78px;left:50%;transform:translateX(-50%);
    font-size:12px;color:var(--muted);letter-spacing:1.4px;text-align:center;
  }
  .earth-caption b{color:#7ec8ff;}

  /* ===== Sub-national Drill-down Map ===== */
  .region-layer{
    position:fixed;top:54px;left:0;right:0;bottom:0;z-index:24;
    display:none;flex-direction:column;align-items:center;
    background:radial-gradient(ellipse at center,#0a1326 0%,#03050d 80%);
  }
  .region-layer.show{display:flex;}
  .region-bar{
    width:100%;display:flex;align-items:center;gap:10px;
    padding:10px 16px;background:rgba(8,12,26,0.85);
    border-bottom:1px solid var(--border);backdrop-filter:blur(8px);
  }
  .region-bar button{
    font-size:12px;padding:7px 12px;border-radius:8px;cursor:pointer;
    background:var(--panel-2);border:1px solid var(--border);color:var(--text);
    transition:all .2s;white-space:nowrap;
  }
  .region-bar button:hover{background:rgba(122,162,255,.25);border-color:var(--accent-2);}
  .region-crumb{
    flex:1;font-size:13px;color:var(--accent);letter-spacing:.4px;
    text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  #regionCanvas{flex:1 1 0;display:block;cursor:pointer;width:100%;min-width:0;min-height:0;}
  .region-hint{
    position:absolute;bottom:74px;left:50%;transform:translateX(-50%);
    font-size:12px;color:var(--muted);background:rgba(8,12,26,.7);
    padding:5px 12px;border-radius:14px;border:1px solid var(--border);
  }
  /* clickable Sun hotspot on the image */
  .sun-hotspot{
    position:absolute;left:46%;top:60%;
    width:46px;height:46px;border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 0 3px rgba(255,210,94,0.6),0 0 28px 8px rgba(255,210,94,0.55);
    cursor:pointer;animation:pulse 2.4s infinite;
  }
  @keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,210,94,.6),0 0 22px 6px rgba(255,210,94,.4);}
    50%{box-shadow:0 0 0 5px rgba(255,210,94,.85),0 0 36px 12px rgba(255,210,94,.7);}}
  .sun-label{
    position:absolute;left:46%;top:66%;transform:translateX(-50%);
    font-size:12px;color:var(--accent);font-weight:700;letter-spacing:1px;
    text-shadow:0 0 6px #000;pointer-events:none;
  }

  /* ===== Left Navigation Panel ===== */
  .nav-panel{
    position:fixed;top:66px;left:12px;z-index:30;width:270px;
    max-height:calc(100vh - 80px);overflow-y:auto;
    background:var(--panel);border:1px solid var(--border);
    border-radius:14px;padding:14px;backdrop-filter:blur(10px);
  }
  .panel-header{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;margin-bottom:10px;
  }
  .panel-header h3{
    font-size:12px;text-transform:uppercase;letter-spacing:1.4px;
    color:var(--accent-2);margin:0;
  }
  .panel-toggle{
    width:34px;height:34px;border-radius:10px;
    border:1px solid var(--border);background:var(--panel-2);
    color:var(--text);font-size:16px;cursor:pointer;
  }
  .panel-toggle:hover{background:rgba(122,162,255,.15);}
  .field{margin-bottom:10px;}
  .field label{
    display:block;font-size:12px;color:var(--muted);margin-bottom:4px;
  }
  select{
    width:100%;padding:9px 10px;border-radius:9px;font-size:14px;
    background:var(--panel-2);color:var(--text);
    border:1px solid var(--border);outline:none;appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239aa6d6'><path d='M2 4l4 4 4-4'/></svg>");
    background-repeat:no-repeat;background-position:right 10px center;
  }
  select:focus{border-color:var(--accent-2);}
  .selection-info{
    margin-top:8px;padding:8px 10px;border-radius:9px;font-size:12px;
    background:rgba(122,162,255,0.1);border-left:3px solid var(--accent);
    color:var(--text);min-height:34px;
  }

  /* ===== School Management Panel ===== */
  .nav-panel,
  .sms-panel{
    transition: max-height 0.28s ease, padding 0.28s ease;
  }
  .sms-panel{
    position:fixed;top:66px;right:12px;z-index:30;width:340px;
    max-height:calc(100vh - 80px);overflow-y:auto;
    background:var(--panel);border:1px solid var(--border);
    border-radius:14px;padding:14px;backdrop-filter:blur(10px);
  }
  .nav-panel.collapsed{max-height:56px;overflow:hidden;}
  .nav-panel.collapsed .field,
  .nav-panel.collapsed .selection-info{display:none;}
  .sms-panel.collapsed{max-height:56px;overflow:hidden;}
  .sms-panel.collapsed .tabs,
  .sms-panel.collapsed .tab-content{display:none;}
  .tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
  .tab{
    flex:1 0 auto;font-size:12px;padding:7px 8px;border-radius:8px;
    background:var(--panel-2);border:1px solid var(--border);
    color:var(--muted);cursor:pointer;text-align:center;white-space:nowrap;
    transition:all .2s;
  }
  .tab:hover{color:var(--text);}
  .tab.active{
    background:linear-gradient(135deg,rgba(255,210,94,.25),rgba(122,162,255,.25));
    color:var(--accent);border-color:var(--accent);
  }
  .tab-content{display:none;animation:fade .25s ease;}
  .tab-content.active{display:block;}
  @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
  .tab-content h4{
    font-size:14px;color:var(--accent);margin-bottom:8px;
  }
  table{width:100%;border-collapse:collapse;font-size:12px;}
  th,td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--border);}
  th{color:var(--accent-2);font-weight:600;}
  td{color:var(--text);}
  .empty{
    color:var(--muted);font-size:13px;padding:18px 6px;text-align:center;
    border:1px dashed var(--border);border-radius:9px;
  }
  .pill{
    display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;
    background:rgba(122,162,255,.18);color:var(--accent-2);
  }
  .pill.good{background:rgba(80,220,140,.18);color:#5cdc8c;}
  .pill.bad{background:rgba(255,110,110,.18);color:#ff7676;}

  /* ===== Zoom / Pan Controls ===== */
  .controls{
    position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
    z-index:35;display:flex;gap:8px;
    background:var(--panel);border:1px solid var(--border);
    padding:8px;border-radius:30px;backdrop-filter:blur(10px);
  }
  .controls button{
    width:42px;height:42px;border-radius:50%;font-size:17px;cursor:pointer;
    background:var(--panel-2);border:1px solid var(--border);color:var(--text);
    display:flex;align-items:center;justify-content:center;transition:all .2s;
  }
  .controls button:hover{
    background:rgba(122,162,255,.25);border-color:var(--accent-2);
  }

  .video-modal{
    display:none;
    position:fixed;right:18px;top:90px;z-index:120;
    width:320px;max-width:92vw;height:360px;max-height:calc(100vh - 80px);
    background:rgba(7,12,24,.94);border:1px solid rgba(255,255,255,.12);
    border-radius:18px;box-shadow:0 24px 52px rgba(0,0,0,.35);
    overflow:hidden;font-family:Segoe UI,system-ui,sans-serif;color:#eef;
    backdrop-filter:blur(12px);
    transition:width .22s ease,height .22s ease,opacity .22s ease;
  }
  .video-modal.show{
    display:block;
  }
  .video-modal.collapsed{
    width:62px; height:56px; min-height:56px;
    border-radius:16px; overflow:visible;
  }
  .video-modal.collapsed .video-modal-body{
    display:none;
  }
  .video-modal.collapsed .video-modal-bar{
    justify-content:center;
    position:relative;
    cursor:pointer;
    padding:0;
  }
  .video-modal.collapsed .video-modal-bar span{
    display:none;
  }
  .video-modal.collapsed .video-modal-actions{
    gap:4px;
  }
  .video-modal.collapsed .video-modal-actions button{
    width:34px;height:34px;border-radius:12px;
  }
  .video-modal.collapsed .video-modal-bar::after{
    content:'Click to expand';
    position:absolute;right:100%;top:50%;transform:translate(12px,-50%);
    white-space:nowrap;padding:6px 10px;
    border-radius:10px;background:rgba(0,0,0,.8);
    color:#f5f8ff;font-size:11px;opacity:0;pointer-events:none;
    transition:opacity .2s ease;
  }
  .video-modal.collapsed .video-modal-bar:hover::after{
    opacity:1;
  }
  .video-modal-body{
    display:grid;gap:10px;padding:12px;
    height:calc(100% - 56px);
  }
  .video-modal-body video{
    width:100%;height:100%;border-radius:14px;background:#000;object-fit:cover;
  }
  .video-open-btn{
    display:flex;
    position:fixed;bottom:18px;right:18px;z-index:130;
    width:48px;height:48px;border:none;border-radius:16px;
    background:rgba(122,162,255,.18);color:#eef;font-size:22px;
    cursor:pointer;box-shadow:0 18px 36px rgba(0,0,0,.28);
    transition:transform .2s ease,background .2s ease;
    align-items:center;justify-content:center;
  }
  .video-open-btn::after{
    content:'Open Recording';
    position:absolute;right:110%;top:50%;transform:translateY(-50%);
    white-space:nowrap;padding:6px 10px;border-radius:12px;
    background:rgba(8,12,26,.95);color:#eef;font-size:11px;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .video-open-btn:hover::after{opacity:1;}
  .video-open-btn:hover{transform:translateY(-1px);background:rgba(122,162,255,.28);}
  .video-modal-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 14px;background:rgba(12,18,36,.96);border-bottom:1px solid rgba(255,255,255,.08);
  }
  .video-modal-bar span{font-size:13px;font-weight:700;letter-spacing:.01em;}
  .video-modal-actions{display:flex;gap:6px;}
  .video-modal-actions button{
    width:32px;height:32px;border:none;border-radius:10px;
    background:rgba(255,255,255,.08);color:#eef;font-size:14px;cursor:pointer;
    transition:background .2s ease;
  }
  .video-modal-actions button:hover{background:rgba(255,255,255,.18);}
  .video-modal-body{
    display:grid;gap:10px;padding:12px;
  }
  .video-modal-body video{
    width:100%;height:auto;border-radius:14px;background:#000;
  }
  .video-modal-caption{
    font-size:12px;color:rgba(238,238,238,.78);line-height:1.4;
  }

  /* scrollbars */
  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-thumb{background:rgba(122,162,255,.3);border-radius:6px;}

  @media (max-width:900px){
    .topbar{flex-wrap:wrap;align-items:center;gap:10px;height:auto;padding:10px 14px;}
    .brand{font-size:15px;}
    .scale-pill{margin-left:0;font-size:12px;padding:6px 10px;}
    .nav-panel,.sms-panel{position:static;width:auto;margin:8px;max-height:none;}
    .stage{position:static;height:40vh;}
    .sphere-stage{position:static;height:40vh;}
    .sphere-stage .sphere-overlay{bottom:14px;}
    .earth-layer,.region-layer,.solar-system{position:fixed;top:54px;left:0;right:0;bottom:0;}
    .region-bar{flex-wrap:wrap;justify-content:center;}
    .region-bar button{flex:1 1 auto;}
    .controls{left:auto;right:14px;bottom:14px;transform:none;flex-wrap:wrap;gap:6px;padding:6px;}
    .controls button{width:38px;height:38px;font-size:15px;}
    .video-modal{right:50%;left:auto;top:auto;bottom:12px;transform:translateX(50%);width:min(92vw,340px);height:auto;max-height:60vh;}
    .video-modal.collapsed{right:12px;left:auto;bottom:12px;transform:none;width:62px;height:56px;}
    .video-modal.collapsed .video-modal-bar::after{right:auto;left:-100%;transform:translate(-12px,-50%);}
    .video-modal-body{height:auto;padding:10px;}
    .video-modal-bar{padding:10px 12px;}
    .video-modal-caption{font-size:11px;}
    .video-open-btn{display:none;}
    body{overflow:auto;}
    .scroll-wrap{padding-top:54px;}
  }
  @media (min-width:901px){
    .video-open-btn{display:flex;}
  }