/* =====================================================================================
   LIQUID GLASS skin: student portal only.
   To remove it completely: set  define('GLASS_THEME', false);  in config.php
   (or delete this file + the "✨" option; nothing else depends on it).
   Active only when <html data-skin="glass">.
   ===================================================================================== */
html[data-skin=glass]{
  --bg:transparent; --card:rgba(255,255,255,.09); --line:rgba(255,255,255,.18); --text:#eef3ff; --muted:#b4c2e2; --head:#fff;
  --topbar:rgba(255,255,255,.07); --side:rgba(255,255,255,.07); --input-bg:rgba(255,255,255,.08); --input-line:rgba(255,255,255,.25); --label:#d9e3fb;
  --hover:rgba(255,255,255,.12); --hover2:rgba(255,255,255,.07); --sel:rgba(255,255,255,.14); --sel-orange:rgba(242,106,33,.18); --track:rgba(255,255,255,.14);
  --chip-bg:rgba(255,255,255,.14); --chip-t:#e6eeff; --shadow:0 8px 32px rgba(3,8,25,.35); --info:#8fbaff; --navy:#5b8def; --navy2:#78a3ff;
  --ok-bg:rgba(43,182,115,.18); --bad-bg:rgba(229,96,95,.2); --warn-bg:rgba(224,165,43,.18); --info-bg:rgba(110,168,255,.18);
  --glass-blur:blur(22px) saturate(170%);
}
html[data-skin=glass] body.portal:not(.admin){
  background:#050b1f; min-height:100vh; position:relative; color:var(--text);
}
/* slow drifting colour blobs behind the glass */
html[data-skin=glass] body.portal:not(.admin)::before,
html[data-skin=glass] body.portal:not(.admin)::after{content:"";position:fixed;z-index:0;border-radius:50%;filter:blur(80px);opacity:.75;pointer-events:none}
html[data-skin=glass] body.portal:not(.admin)::before{width:55vmax;height:55vmax;left:-12vmax;top:-18vmax;background:radial-gradient(circle,#2f6bff 0%,rgba(47,107,255,0) 65%);animation:gdrift1 22s ease-in-out infinite alternate}
html[data-skin=glass] body.portal:not(.admin)::after{width:50vmax;height:50vmax;right:-14vmax;bottom:-16vmax;background:radial-gradient(circle,#ff6a21 0%,rgba(255,106,33,0) 62%);animation:gdrift2 26s ease-in-out infinite alternate}
@keyframes gdrift1{to{transform:translate(14vmax,10vmax) scale(1.15)}} @keyframes gdrift2{to{transform:translate(-12vmax,-8vmax) scale(1.2)}}
html[data-skin=glass] .shell{position:relative;z-index:1;padding:14px;gap:14px}
html[data-skin=glass] .side{border-radius:22px;height:calc(100vh - 28px);top:14px;border:1px solid var(--line);background:var(--side);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.25)}
html[data-skin=glass] .side-brand{border-bottom-color:rgba(255,255,255,.14)}
html[data-skin=glass] .side nav a.on{background:linear-gradient(135deg,rgba(242,106,33,.95),rgba(255,140,70,.85));box-shadow:0 6px 18px rgba(242,106,33,.4), inset 0 1px 0 rgba(255,255,255,.35)}
html[data-skin=glass] .topbar{border-radius:18px;border:1px solid var(--line);margin-bottom:14px;top:14px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.22)}
html[data-skin=glass] .inner{padding:0}
html[data-skin=glass] .card,html[data-skin=glass] .stat,html[data-skin=glass] .fn,html[data-skin=glass] .flow-sum,html[data-skin=glass] .tp,html[data-skin=glass] .qcard,html[data-skin=glass] .palette{
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid var(--line);border-radius:20px;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06)}
html[data-skin=glass] .fn{border-radius:16px}
html[data-skin=glass] .fn.done{background:linear-gradient(145deg,rgba(43,182,115,.28),rgba(255,255,255,.05))}
html[data-skin=glass] .fn.current{background:linear-gradient(145deg,rgba(242,106,33,.34),rgba(255,255,255,.06))}
html[data-skin=glass] .flow-sum .ring::before{background:#0d1530}
html[data-skin=glass] .card:hover,html[data-skin=glass] .stat:hover{border-color:rgba(255,255,255,.34)}
html[data-skin=glass] .btn-ghost{border-color:rgba(255,255,255,.3)} html[data-skin=glass] .btn-ghost:hover{background:rgba(255,255,255,.14)}
html[data-skin=glass] table.t th{color:#b4c2e2} html[data-skin=glass] table.t td{border-color:rgba(255,255,255,.12)}
html[data-skin=glass] select option{color:#111}
html[data-skin=glass] .themepick{background:rgba(255,255,255,.1);backdrop-filter:blur(10px)}
html[data-skin=glass] .modal{background:rgba(20,30,60,.72);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-color:rgba(255,255,255,.25)}
html[data-skin=glass] .alert,html[data-skin=glass] .due,html[data-skin=glass] .lock{backdrop-filter:blur(14px)}
html[data-skin=glass] a{color:#9cc4ff}
html[data-skin=glass] .btn,html[data-skin=glass] .side nav a.on,html[data-skin=glass] .themepick button.on{color:#fff!important}
html[data-skin=glass] ::-webkit-scrollbar{width:10px} html[data-skin=glass] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:10px}
@media (max-width:900px){
  html[data-skin=glass] .shell{padding:8px} html[data-skin=glass] .side{height:100vh;top:0;border-radius:0 22px 22px 0;left:-270px;background:rgba(10,16,40,.92)} html[data-skin=glass] body.sideopen .side{left:0}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-skin=glass] .card,html[data-skin=glass] .stat,html[data-skin=glass] .side,html[data-skin=glass] .topbar,html[data-skin=glass] .fn{background:rgba(20,30,64,.92)}
}
html[data-skin=glass] .fn.current em{color:#ffd9bf} html[data-skin=glass] .fn::after{background:rgba(255,255,255,.3)} html[data-skin=glass] .loop,html[data-skin=glass] .loop.left{border-color:rgba(255,255,255,.3)} html[data-skin=glass] .loop.done{border-color:var(--ok)} html[data-skin=glass] .loop.current{border-color:var(--orange)}