/* MiniMedApps shop: shared look. Same tokens as the Year 4 hub, so the shop and the apps read as one product.
   Block colours: X amber, XI jade, XII iris. */
:root {
  --bg:#0F1420; --surface:#151C2B; --surface-2:#1C2436; --sunk:#0B0F18;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.14);
  --ink:#EEF1F7; --ink-2:#B3BCCD; --ink-3:#7D879B; --ink-4:#566075;
  --bx:#F2A93B; --bxi:#3CC3A9; --bxii:#9D84F5;
  --bad:#F0607A; --good:#3FC98A;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Inter Tight","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* aliases used by the admin page */
  --card:var(--surface); --mute:var(--ink-3); --accent:var(--bx); --err:var(--bad); --ok:var(--good);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; color: var(--ink); background: var(--bg);
  font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased;
}
body::before { /* faint block-colour glow in the corners */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 400px at 0% 0%, rgba(242,169,59,.10), transparent 70%),
    radial-gradient(600px 420px at 100% 12%, rgba(157,132,245,.10), transparent 70%),
    radial-gradient(700px 400px at 40% 110%, rgba(60,195,169,.08), transparent 70%);
}
:focus-visible { outline: 2px solid var(--bx); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand img { width: 36px; height: 36px; display: block; }
.brand b { font: 800 19px/1 var(--display); letter-spacing: -.025em; }
.brand b i { font-style: normal; color: var(--bx); }

.eyebrow { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.btn {
  font: 600 14px/1 var(--body); padding: 11px 14px; border-radius: 10px; cursor: pointer;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2);
  transition: border-color .15s, background .15s, transform .15s var(--ease);
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { color: #1A1205; background: var(--bx); border-color: var(--bx); }
.btn.primary:hover { background: #F7BB5C; border-color: #F7BB5C; }
.btn:disabled { opacity: .6; cursor: wait; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }