/* ═══ Glass + theme layer (loaded after style.css) ═══════════════════
   Light is default; dark follows the OS unless the user toggles.
   Glass is used only on: header, top-bar app links, cards, floating UI.
   Body text always sits on near-opaque surfaces for contrast.        */
:root{
  --glass-bg:rgba(255,255,255,.72);
  --glass-bg-strong:rgba(255,255,255,.88);
  --glass-border:rgba(255,255,255,.65);
  --glass-line:rgba(26,54,93,.10);
  --glass-shadow:0 8px 32px -12px rgba(15,35,66,.25);
  --glass-blur:14px;
  --surface:#fff;
  --ambient-a:rgba(37,99,235,.10);
  --ambient-b:rgba(212,168,67,.12);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --color-bg:#0b1220;--color-bg-alt:#0f1a2e;--color-text:#e5ecf6;--color-text-light:#b4c2d6;
  --color-text-muted:#8a9bb2;--color-border:rgba(255,255,255,.10);--color-primary:#8fb4ff;
  --color-primary-h:#b5ceff;
  --glass-bg:rgba(18,30,52,.62);--glass-bg-strong:rgba(15,26,46,.88);--glass-border:rgba(255,255,255,.10);
  --glass-line:rgba(255,255,255,.08);--glass-shadow:0 10px 36px -14px rgba(0,0,0,.7);
  --surface:#111d33;--ambient-a:rgba(59,130,246,.14);--ambient-b:rgba(212,168,67,.08);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --color-bg:#0b1220;--color-bg-alt:#0f1a2e;--color-text:#e5ecf6;--color-text-light:#b4c2d6;
    --color-text-muted:#8a9bb2;--color-border:rgba(255,255,255,.10);--color-primary:#8fb4ff;
    --color-primary-h:#b5ceff;
    --glass-bg:rgba(18,30,52,.62);--glass-bg-strong:rgba(15,26,46,.88);--glass-border:rgba(255,255,255,.10);
    --glass-line:rgba(255,255,255,.08);--glass-shadow:0 10px 36px -14px rgba(0,0,0,.7);
    --surface:#111d33;--ambient-a:rgba(59,130,246,.14);--ambient-b:rgba(212,168,67,.08);
  }
}
body{background:var(--color-bg);color:var(--color-text);
  background-image:radial-gradient(60rem 28rem at 90% -5%,var(--ambient-a),transparent 70%),
                   radial-gradient(48rem 24rem at -5% 30%,var(--ambient-b),transparent 70%);
  background-attachment:scroll;transition:background-color .2s}

/* Header: one glass bar */
.site-header{background:var(--glass-bg-strong);border-bottom:1px solid var(--glass-line)}
@supports (backdrop-filter:blur(1px)){
  .site-header{background:var(--glass-bg);backdrop-filter:saturate(1.5) blur(var(--glass-blur));-webkit-backdrop-filter:saturate(1.5) blur(var(--glass-blur))}
}
/* Cards: soft glass, readable */
.card{background:var(--glass-bg-strong);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{border-color:rgba(37,99,235,.35)}
:root[data-theme="dark"] .card h3,:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3{color:var(--color-text)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card h3,:root:not([data-theme="light"]) h1,:root:not([data-theme="light"]) h2,:root:not([data-theme="light"]) h3{color:var(--color-text)}}
:root[data-theme="dark"] .main-nav__link,:root[data-theme="dark"] .site-logo__name{color:var(--color-text)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .main-nav__link,:root:not([data-theme="light"]) .site-logo__name{color:var(--color-text)}}

/* App links (top bar) */
.app-links{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.app-link{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#fff!important;
  font-weight:600;font-size:.7rem;text-decoration:none;transition:background-color .15s,border-color .15s}
.app-link:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
.app-link--accent{background:var(--gold-600);border-color:var(--gold-600);color:var(--blue-900)!important}
.app-link--accent:hover{background:var(--gold-500)}
.app-link:focus-visible{outline:2px solid var(--gold-400);outline-offset:2px}
@media(max-width:640px){
  .top-bar__left,.top-bar__badge{display:none}
  .top-bar__right{width:100%}
  .app-links{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem}
  .app-link{justify-content:center;padding:.4rem .6rem;font-size:.75rem}
}

/* Theme toggle */
.theme-toggle{width:40px;height:40px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-bg-strong);
  color:var(--color-text);display:inline-grid;place-items:center;cursor:pointer;transition:background-color .15s}
.theme-toggle:hover{background:var(--glass-bg)}
.theme-toggle:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Dark: nav hover/active needs a dark surface (style.css uses light blue-50) */
:root[data-theme="dark"] .main-nav__link:hover,:root[data-theme="dark"] .main-nav__link.active{color:#fff;background:rgba(255,255,255,.10)}
:root[data-theme="dark"] .main-nav__sub{background:var(--glass-bg-strong);border-color:var(--glass-line)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .main-nav__link:hover,:root:not([data-theme="light"]) .main-nav__link.active{color:#fff;background:rgba(255,255,255,.10)}
  :root:not([data-theme="light"]) .main-nav__sub{background:var(--glass-bg-strong);border-color:var(--glass-line)}
}
.site-logo__img{width:52px;height:52px;object-fit:contain;flex:none}