/* Ion: shared palette for desktop and companions. Electric lime and violet on near-black or warm paper. */
html[data-theme="ion"] {
  color-scheme:dark;
  --tint:#c6ff3d; --accent:#c6ff3d; --accent-2:#9b6bff; --accent-3:#3de0ff;
  --font:"Space Grotesk","Avenir Next",system-ui,sans-serif;
  --bg:#08090b; --panel:#111316; --panel-2:#181b1f; --border:#2a2e35;
  --text:#f4f6f2; --muted:#a2a99f; --input-bg:#0d0f12; --link:#c6ff3d;
  --green:#8bf0a8; --red:#ff8e8e; --amber:#ffd36b; --orange:#ffb27a;
  --radius:22px; --radius-btn:14px; --radius-input:12px;
  --surface:var(--panel); --surface-border-color:var(--border);
  --grad-brand:linear-gradient(var(--text),var(--text));
  --grad-primary:linear-gradient(#c6ff3d,#c6ff3d);
  --grad-primary-hover:linear-gradient(#d6ff6e,#d6ff6e);
  --btn-soft:linear-gradient(var(--panel-2),var(--panel-2));
  --btn-soft-hover:linear-gradient(var(--border),var(--border));
  --app-bg:var(--bg); --shadow:0 18px 40px -24px #000c; --shadow-glow:0 0 0 1px #c6ff3d33,0 12px 30px -12px #c6ff3d55;
}
html[data-theme="ion"][data-mode="light"] {
  color-scheme:light;
  --accent:#c6ff3d; --accent-2:#6d3df5; --accent-3:#0089a8;
  --bg:#f4f5f0; --panel:#ffffff; --panel-2:#eceee6; --border:#d6d9cf;
  --text:#0b0d0a; --muted:#52584f; --input-bg:#ffffff; --link:#4b6b00;
  --green:#1d6b35; --red:#b3261e; --amber:#7a5200; --orange:#a94200;
  --shadow:0 18px 40px -26px #1a1f1240;
}

/* ---------- Motion primitives (spring easing, animatable custom properties) ---------- */
@property --ion-rx { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --ion-ry { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --ion-spin { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --ion-glare { syntax:'<percentage>'; initial-value:0%; inherits:false; }
html[data-theme="ion"] {
  --ion-spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1);
  --ion-out:cubic-bezier(.16,1,.3,1);
  --ion-ink:#0b0d0a;
  --ion-hair:color-mix(in srgb,var(--text) 10%,transparent);
  --ion-glass:color-mix(in srgb,var(--panel) 72%,transparent);
  --ion-dot:light-dark(#0b0d0a1c,#ffffff16);
  --ion-mark:light-dark(#c6ff3d,#6d3df5b3);
  --ion-glow-a:light-dark(#c6ff3d55,#c6ff3d2e);
  --ion-glow-b:light-dark(#6d3df522,#9b6bff2a);
  --gutter:clamp(20px,3vw,56px);
  --cur-hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3L22 12.2L13.8 14.4L10.2 22.6Z' fill='%23c6ff3d' stroke='%230b0d0a' stroke-width='2.2' stroke-linejoin='round'/%3E%3Ccircle cx='22' cy='22' r='3' fill='%239b6bff' stroke='%230b0d0a' stroke-width='1.4'/%3E%3C/svg%3E") 4 3;
}
@keyframes ion-rise { from { opacity:0; translate:0 26px; scale:.985; } }
@keyframes ion-mark { from { background-size:0% .34em; } }
@keyframes ion-pulse { 0%,100% { box-shadow:0 0 0 0 #c6ff3d88; } 60% { box-shadow:0 0 0 7px #c6ff3d00; } }
@keyframes ion-spin { to { --ion-spin:360deg; } }
@keyframes ion-progress { from { scale:0 1; } to { scale:1 1; } }
@keyframes ion-frost { to { background-color:var(--ion-glass); border-bottom-color:var(--ion-hair); -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6); } }

/* ---------- Backdrop: dot grid that fades at the edges + a pointer-following glow ---------- */
html[data-theme="ion"][data-mode] body { background:var(--bg); }
html[data-theme="ion"][data-mode] body::before { display:block !important; }
html[data-theme="ion"][data-mode] body::before {
  mix-blend-mode:normal; opacity:1;
  background:radial-gradient(circle,var(--ion-dot) 1px,transparent 1.6px) 0 0/22px 22px;
  -webkit-mask:radial-gradient(ellipse 85% 75% at 50% 35%,#000 40%,transparent 100%);
  mask:radial-gradient(ellipse 85% 75% at 50% 35%,#000 40%,transparent 100%);
}
#ion-glow { display:none; }
html[data-theme="ion"] #ion-glow {
  display:block; position:fixed; left:0; top:0; z-index:0; width:760px; height:760px; margin:-380px 0 0 -380px;
  border-radius:50%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle,var(--ion-glow-a),var(--ion-glow-b) 38%,transparent 68%);
  transition:transform 1.1s var(--ion-out), opacity .6s;
}
html[data-theme="ion"] :is(#app-view,#login-view) { position:relative; z-index:1; }

/* ---------- Type: Unbounded display, highlighter stroke draws in under headings ---------- */
html[data-theme="ion"][data-mode] body { font-weight:450; letter-spacing:-.005em; }
html[data-theme="ion"][data-mode] :is(h1,h2,h3,h4) { font-family:"Unbounded","Space Grotesk",sans-serif; font-weight:600; letter-spacing:-.025em; text-wrap:balance; }
html[data-theme="ion"][data-mode] .section-head h2 {
  font-size:clamp(28px,3vw,44px); font-weight:700; line-height:1.15; width:fit-content;
  background:linear-gradient(var(--ion-mark),var(--ion-mark)) 0 88%/100% .34em no-repeat;
  animation:ion-mark .9s var(--ion-out) .15s backwards;
}
html[data-theme="ion"][data-mode] .station-card h3 { font-size:22px; }
html[data-theme="ion"][data-mode] :is(.stat .value,.sc-bal-num) { font-family:"Unbounded","Space Grotesk",sans-serif; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
html[data-theme="ion"][data-mode] :is(.stat .label,.cal .dow) { text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:600; color:var(--muted); }
html[data-theme="ion"] ::selection { background:#c6ff3d; color:#0b0d0a; }
html[data-theme="ion"][data-mode] a { color:var(--link); text-underline-offset:.22em; }

/* ---------- Header: clear at the top, frosts as you scroll; lime scroll-progress line ---------- */
html[data-theme="ion"][data-mode][data-style] .topbar {
  background:transparent; border:0; border-bottom:1px solid transparent; box-shadow:none;
  padding:12px var(--gutter);
  animation:ion-frost linear both; animation-timeline:scroll(root); animation-range:0 140px;
}
html[data-theme="ion"][data-mode] .topbar::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; transform-origin:0 50%;
  background:linear-gradient(90deg,#c6ff3d,#9b6bff,#3de0ff); scale:0 1;
  animation:ion-progress linear both; animation-timeline:scroll(root);
}
html[data-theme="ion"][data-mode] .brand {
  font-family:"Unbounded",sans-serif; font-weight:700; font-size:17px; letter-spacing:-.03em;
  background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--text);
}
html[data-theme="ion"][data-mode] .brand::after {
  content:""; display:inline-block; width:8px; height:8px; margin-left:8px; vertical-align:.18em; border-radius:50%;
  background:#c6ff3d; animation:ion-pulse 2.4s ease-out infinite;
}
html[data-theme="ion"][data-mode][data-style] .topbar .btn.ghost {
  border-radius:12px; border:1px solid var(--ion-hair); background:var(--ion-glass); box-shadow:none;
  transition:translate .5s var(--ion-spring),background .25s,border-color .25s;
}
html[data-theme="ion"][data-mode][data-style] .topbar .btn.ghost:hover { translate:0 -2px; border-color:color-mix(in srgb,var(--accent) 60%,transparent); }
html[data-theme="ion"][data-mode][data-style] .topbar #logout-btn { background:var(--text); color:var(--bg); border-color:transparent; }
html[data-theme="ion"][data-mode] .topbar .chip { background:transparent; border:1px dashed var(--ion-hair); color:var(--muted); border-radius:12px; font-weight:500; }
html[data-theme="ion"][data-mode] #breadcrumb :is(.crumb,.crumb-back,.crumb.current) { border-radius:10px; box-shadow:none; }

/* ---------- Frame: same proportions as Apple / Antigravity ---------- */
html[data-theme="ion"][data-mode] #content { max-width:1600px; width:auto; margin-inline:auto; padding:32px var(--gutter); }
html[data-theme="ion"][data-mode] #content:has(.station-layout) { padding-bottom:140px; } /* room above the dock */

/* ---------- Station page: the Ion dock (theme-sitenav.js) + HUD rail on the right ----------
   Six section keys in a floating glass dock that swells under the pointer; the current section is a lime
   pill naming the page. A section springs a launch pad of tilting glass page tiles up out of the dock. */
html[data-theme="ion"][data-mode] .station-layout { grid-template-columns:minmax(0,1fr) 236px; gap:24px; }
html[data-theme="ion"][data-mode] .station-layout:not(.has-right) { grid-template-columns:minmax(0,1fr); }
html.sn-on[data-theme="ion"][data-mode] .station-rail-left { display:none !important; }
html.sn-on[data-theme="ion"][data-mode] .station-layout { grid-template-columns:minmax(0,1fr) 236px !important; }
html.sn-on[data-theme="ion"][data-mode] .station-layout:not(:has(.station-rail-right)) { grid-template-columns:minmax(0,1fr) !important; }
.io-dock { display:none; }
html[data-theme="ion"] .io-dock {
  display:block; position:fixed; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); z-index:40; translate:-50% 0;
  font-family:var(--font); transition:translate .8s var(--ion-spring),opacity .5s;
  @starting-style { translate:-50% 140%; opacity:0; }
}
html[data-theme="ion"] .io-bar {
  position:relative; display:flex; align-items:flex-end; gap:6px; padding:10px; border-radius:26px;
  background:var(--ion-glass); border:1px solid var(--ion-hair);
  -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 30px 60px -24px #000a,inset 0 1px 0 #ffffff14;
}
/* A spectrum rim lights up while the pad is open. */
html[data-theme="ion"] .io-bar::after {
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none; opacity:0;
  background:conic-gradient(from var(--ion-spin),#c6ff3d,#3de0ff,#9b6bff,#ff6bd6,#c6ff3d); animation:ion-spin 4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); transition:opacity .45s var(--ion-out);
}
html[data-theme="ion"] .io-dock.io-open .io-bar::after { opacity:.9; }
html[data-theme="ion"] :is(.io-key,.io-step,.io-tile) { all:unset; box-sizing:border-box; cursor:pointer; -webkit-tap-highlight-color:transparent; }
html[data-theme="ion"] .io-key {
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:64px; height:52px; padding:0 14px;
  border-radius:17px; color:var(--text); transform-origin:50% 100%;
  transition:transform .42s cubic-bezier(.34,1.45,.64,1),background-color .25s,color .25s,box-shadow .35s;
}
/* Footing that rises with a lifted key, so the pointer can't slip out under it and flicker the hover. */
html[data-theme="ion"] .io-key::before { content:""; position:absolute; left:-3px; right:-3px; top:100%; height:12px; }
html[data-theme="ion"] .io-key b { font:700 12px/1 "Unbounded",var(--font); letter-spacing:-.01em; white-space:nowrap; }
html[data-theme="ion"] .io-key small { font-size:10.5px; line-height:1; color:var(--muted); font-variant-numeric:tabular-nums; }
html[data-theme="ion"] .io-key .io-now { font-size:12.5px; font-weight:600; line-height:1.1; white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
html[data-theme="ion"] .io-key.on { background:#c6ff3d; color:#0b0d0a; padding:0 18px; box-shadow:0 12px 28px -12px #c6ff3dcc; }
html[data-theme="ion"] .io-key.on b { font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
html[data-theme="ion"] .io-key.on::after { content:""; position:absolute; left:50%; bottom:-7px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#c6ff3d; }
html[data-theme="ion"] .io-key[aria-expanded="true"]:not(.on) { background:color-mix(in srgb,var(--accent-2) 26%,transparent); box-shadow:inset 0 0 0 1.5px var(--accent-2); }
html[data-theme="ion"] .io-step { display:grid; place-items:center; width:34px; height:52px; border-radius:14px; font-size:22px; color:var(--muted); transition:color .2s,background-color .2s,transform .4s var(--ion-spring); }
html[data-theme="ion"] .io-step:not([disabled]):hover { color:var(--text); background:var(--ion-hair); }
html[data-theme="ion"] .io-step[disabled] { opacity:.25; cursor:default; }
html[data-theme="ion"] :is(.io-key,.io-step,.io-tile):focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }
@media (hover:hover) {
  html[data-theme="ion"] .io-key:hover { transform:translateY(-7px) scale(1.12); z-index:2; }
  html[data-theme="ion"] .io-key:not(.on):hover { background:var(--ion-hair); }
  html[data-theme="ion"] .io-key:hover + .io-key, html[data-theme="ion"] .io-key:has(+ .io-key:hover) { transform:translateY(-2px) scale(1.04); }
  html[data-theme="ion"] .io-step:not([disabled]):hover { transform:translateY(-3px); }
}
/* Launch pad: springs up out of the dock. */
html[data-theme="ion"] .io-pad {
  position:absolute; left:50%; bottom:calc(100% + 16px); translate:-50% 0; box-sizing:border-box;
  width:max-content; min-width:300px; max-width:min(760px,calc(100vw - 24px)); padding:16px; border-radius:26px;
  background:var(--ion-glass); border:1px solid color-mix(in srgb,var(--accent-2) 45%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7);
  box-shadow:0 34px 70px -28px #000c,inset 0 1px 0 #ffffff14;
  transform-origin:50% 100%; transition:translate .55s var(--ion-spring),scale .55s var(--ion-spring),opacity .25s;
  @starting-style { translate:-50% 22px; scale:.94; opacity:0; }
}
html[data-theme="ion"] .io-pad[hidden] { display:none; }
html[data-theme="ion"] .io-pad-h { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:2px 6px 12px; }
html[data-theme="ion"] .io-pad-h b { font:800 22px/1 "Unbounded",var(--font); letter-spacing:-.03em; }
html[data-theme="ion"] .io-pad-h span { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
html[data-theme="ion"] .io-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; width:min(728px,calc(100vw - 56px)); }
html[data-theme="ion"] .io-pad:has(.io-tile:nth-child(-n+3):last-child) .io-tiles { width:auto; grid-template-columns:repeat(3,150px); }
html[data-theme="ion"] .io-pad:has(.io-tile:only-child) .io-tiles { grid-template-columns:repeat(1,180px); }
html[data-theme="ion"] .io-pad:has(.io-tile:nth-child(2):last-child) .io-tiles { grid-template-columns:repeat(2,160px); }
html[data-theme="ion"] .io-tile {
  position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; row-gap:6px; align-items:center;
  padding:14px; min-height:78px; border-radius:18px; color:var(--text);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,-40%),color-mix(in srgb,#c6ff3d var(--ion-glare,0%),transparent),transparent 62%),color-mix(in srgb,var(--panel-2) 70%,transparent);
  border:1px solid var(--ion-hair);
  transform:perspective(700px) rotateX(var(--ion-rx)) rotateY(var(--ion-ry));
  transition:--ion-rx .7s var(--ion-spring),--ion-ry .7s var(--ion-spring),--ion-glare .4s var(--ion-out),translate .5s var(--ion-spring),border-color .25s;
  animation:io-tile-in .6s var(--ion-spring) calc(var(--d) * 28ms) backwards;
}
@keyframes io-tile-in { from { opacity:0; translate:0 14px; scale:.9; } }
html[data-theme="ion"] .io-tile:hover { --ion-glare:18%; translate:0 -3px; border-color:color-mix(in srgb,#c6ff3d 55%,transparent); }
html[data-theme="ion"] .io-tile i { grid-row:span 2; font-style:normal; font-size:24px; line-height:1; }
html[data-theme="ion"] .io-tile b { font-size:13.5px; font-weight:600; line-height:1.2; }
html[data-theme="ion"] .io-tile small { font:600 10px/1 "Unbounded",var(--font); color:var(--muted); letter-spacing:.04em; }
html[data-theme="ion"] .io-tile.on { background:#c6ff3d; color:#0b0d0a; border-color:transparent; box-shadow:0 14px 30px -14px #c6ff3dcc; }
html[data-theme="ion"] .io-tile.on small { color:#0b0d0acc; }
@media (max-width:700px) {
  html[data-theme="ion"] .io-dock { left:8px; right:8px; translate:none; bottom:max(10px,env(safe-area-inset-bottom)); @starting-style { translate:0 140%; opacity:0; } }
  html[data-theme="ion"] .io-bar { gap:2px; padding:6px; border-radius:22px; justify-content:space-between; }
  html[data-theme="ion"] .io-step { display:none; }
  html[data-theme="ion"] .io-key { flex:1 1 0; min-width:0; height:48px; padding:0 4px; align-items:center; text-align:center; border-radius:15px; }
  html[data-theme="ion"] .io-key.on { padding:0 4px; }
  html[data-theme="ion"] .io-key b { font-size:9.5px; }
  html[data-theme="ion"] .io-key.on b { font-size:9.5px; letter-spacing:0; text-transform:none; opacity:1; }
  html[data-theme="ion"] :is(.io-key .io-now,.io-key small) { display:none; }
  html[data-theme="ion"] .io-pad { left:0; right:0; translate:none; width:auto; min-width:0; max-width:none; @starting-style { translate:0 22px; scale:.96; opacity:0; } }
  html[data-theme="ion"] .io-tiles, html[data-theme="ion"] .io-pad .io-tiles { width:auto !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
html[data-theme="ion"][data-mode][data-style] .station-rail-right {
  position:sticky; top:84px; padding:8px; border-radius:22px !important;
  background:var(--ion-glass) !important; border:1px solid var(--ion-hair) !important; box-shadow:var(--shadow) !important;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
html[data-theme="ion"][data-mode][data-style] .stats.station-stats-side .stat { background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:14px !important; transform:none !important; }
html[data-theme="ion"][data-mode][data-style] .stats.station-stats-side .stat + .stat { border-top:1px solid var(--ion-hair) !important; border-radius:0 !important; }
html[data-theme="ion"][data-mode] .stats.station-stats-side .stat .value { font-size:21px; }
html[data-theme="ion"][data-mode] .month-bar { flex-wrap:wrap; row-gap:10px; }

/* ---------- Surfaces: glass cards that tilt toward the pointer, with an iridescent rim ---------- */
html[data-theme="ion"][data-mode][data-style] :is(.card,.stat,.modal,.login-card,.status-strip) {
  background:
    radial-gradient(360px circle at var(--mx,50%) var(--my,-40%),color-mix(in srgb,#c6ff3d var(--ion-glare),transparent),transparent 62%),
    var(--ion-glass) !important;
  border:1px solid var(--ion-hair) !important; border-radius:var(--radius);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:var(--shadow) !important;
  transform:perspective(900px) rotateX(var(--ion-rx)) rotateY(var(--ion-ry));
  transition:--ion-rx .7s var(--ion-spring),--ion-ry .7s var(--ion-spring),--ion-glare .4s var(--ion-out),translate .6s var(--ion-spring),box-shadow .4s var(--ion-out);
}
html[data-theme="ion"][data-mode] .card::before { display:none; }
html[data-theme="ion"][data-mode][data-style] .card:hover { --ion-glare:16%; translate:0 -6px; box-shadow:0 34px 60px -30px #000b,0 0 0 1px color-mix(in srgb,#c6ff3d 35%,transparent) !important; }
html[data-theme="ion"][data-mode] .station-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; opacity:0;
  background:conic-gradient(from var(--ion-spin),#c6ff3d,#3de0ff,#9b6bff,#ff6bd6,#c6ff3d);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .45s var(--ion-out); animation:ion-spin 4s linear infinite;
}
html[data-theme="ion"][data-mode] .station-card:hover::after { opacity:1; }
html[data-theme="ion"][data-mode][data-style] .station-card { padding:28px; }
html[data-theme="ion"][data-mode] .station-card .sc-balance { background:color-mix(in srgb,var(--panel-2) 70%,transparent) !important; border:1px solid var(--ion-hair) !important; border-radius:16px; }
html[data-theme="ion"][data-mode] .add-card { background:transparent !important; border-style:dashed !important; box-shadow:none !important; backdrop-filter:none !important; }

/* ---------- Controls ---------- */
html[data-theme="ion"][data-mode][data-style] .btn {
  border-radius:var(--radius-btn); font-weight:600; box-shadow:none !important;
  transition:translate .5s var(--ion-spring),scale .4s var(--ion-spring),background .25s,color .25s,border-color .25s;
}
html[data-theme="ion"][data-mode][data-style] .btn:not(:disabled):hover { translate:0 -2px; }
html[data-theme="ion"][data-mode][data-style] .btn:not(:disabled):active { scale:.94; }
html[data-theme="ion"][data-mode][data-style] :is(.btn.primary,.btn.info) { background:#c6ff3d !important; color:#0b0d0a !important; border:0; }
html[data-theme="ion"][data-mode][data-style] :is(.btn.primary,.btn.info):hover { box-shadow:0 12px 26px -10px #c6ff3dcc !important; }
html[data-theme="ion"][data-mode][data-style] #content .btn:not(.primary):not(.info):not(.danger) { background:var(--ion-glass); border:1px solid var(--ion-hair); color:var(--text); }
html[data-theme="ion"][data-mode][data-style] #content .btn:not(.primary):not(.info):not(.danger):hover { border-color:color-mix(in srgb,var(--accent-2) 70%,transparent); }
html[data-theme="ion"][data-mode][data-style] .seg button.active { background:#c6ff3d !important; color:#0b0d0a !important; }
html[data-theme="ion"][data-mode][data-style] :is(.tab:not(.active),.seg button:not(.active)) { box-shadow:none !important; }
html[data-theme="ion"][data-mode][data-style] :is(input,select,textarea) {
  border-radius:var(--radius-input); border:1px solid var(--ion-hair); background:var(--input-bg); box-shadow:none;
  transition:border-color .25s,box-shadow .4s var(--ion-out);
}
html[data-theme="ion"][data-mode][data-style] textarea { field-sizing:content; min-height:3lh; }
html[data-theme="ion"][data-mode][data-style] :is(input,select,textarea):focus { outline:none; border-color:var(--accent-2); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 30%,transparent); }
html[data-theme="ion"][data-mode] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),textarea,[contenteditable="true"]) { cursor:text !important; }
html[data-theme="ion"][data-mode] :disabled { cursor:not-allowed !important; }
html[data-theme="ion"][data-mode] :is(input[type="checkbox"],input[type="radio"]) { accent-color:#9b6bff; }
html[data-theme="ion"][data-mode][data-style] .cal .day:not(.empty) {
  border-radius:16px !important; background:var(--ion-glass) !important; border:1px solid var(--ion-hair) !important; box-shadow:none !important;
  transition:scale .5s var(--ion-spring),border-color .25s,box-shadow .35s;
}
html[data-theme="ion"][data-mode][data-style] .cal .day:not(.empty):hover { scale:1.045; border-color:color-mix(in srgb,#c6ff3d 60%,transparent) !important; box-shadow:0 16px 30px -18px #000a !important; z-index:2; }
html[data-theme="ion"][data-mode][data-style] .cal .day.today { background:color-mix(in srgb,#c6ff3d 18%,var(--panel)) !important; outline:2px solid #c6ff3d; outline-offset:2px; }
html[data-theme="ion"][data-mode] .cal .day.today .num { color:light-dark(#0b0d0a,#c6ff3d); }
/* Toasts and modals spring in on entry. */
html[data-theme="ion"][data-mode] .toast:not(.err) {
  background:var(--text); color:var(--bg); border-radius:14px; font-weight:600;
  transition:translate .7s var(--ion-spring),opacity .35s;
  @starting-style { translate:0 30px; opacity:0; }
}
html[data-theme="ion"][data-mode] .modal { transition:scale .6s var(--ion-spring),opacity .3s; @starting-style { scale:.92; opacity:0; } }

/* ---------- Choreography ---------- */
html[data-theme="ion"][data-mode] #content > * { animation:ion-rise .8s var(--ion-out) backwards; }
html[data-theme="ion"][data-mode] #content > :nth-child(2) { animation-delay:.06s; }
html[data-theme="ion"][data-mode] #content > :nth-child(n+3) { animation-delay:.12s; }
/* The station layout itself never animates; its columns do (the dock lives on <body> with its own slide-up). */
html[data-theme="ion"][data-mode] #content > .station-layout { animation:none; }
html[data-theme="ion"][data-mode] .station-layout > :is(.station-main,.station-rail-right) { animation:ion-rise .8s var(--ion-out) .12s backwards; }
html[data-theme="ion"][data-mode] .station-grid > * { animation:ion-rise .9s var(--ion-out) backwards; }
html[data-theme="ion"][data-mode] .station-grid > :nth-child(2) { animation-delay:.09s; }
html[data-theme="ion"][data-mode] .station-grid > :nth-child(n+3) { animation-delay:.18s; }

/* ---------- Gallery preview ---------- */
.theme-showcase[data-preset="ion"] .theme-showcase-art { background:radial-gradient(circle,#ffffff18 1px,transparent 1.6px) 0 0/14px 14px,radial-gradient(circle at 70% 30%,#c6ff3d33,transparent 60%),#08090b; }
.theme-showcase[data-preset="ion"] .theme-showcase-orbit { border:0; border-radius:50%; background:conic-gradient(from var(--ion-spin),#c6ff3d,#3de0ff,#9b6bff,#ff6bd6,#c6ff3d); animation:ion-spin 4s linear infinite; opacity:.95; }
.theme-showcase[data-preset="ion"] .theme-showcase-pane { background:#111316cc; border:1px solid #ffffff1c; border-radius:18px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.theme-showcase[data-preset="ion"] .theme-showcase-type { font-family:"Unbounded",sans-serif; font-weight:700; color:#f4f6f2; }
.theme-showcase[data-preset="ion"] .theme-showcase-mini-button { background:#c6ff3d; border-radius:8px; }
.theme-showcase[data-preset="ion"] .theme-showcase-caption { color:#c6ff3d; position:relative; z-index:2; }

/* ---------- Small screens + accessibility ---------- */
@media (max-width:980px) {
  html[data-theme="ion"][data-mode] .station-layout { grid-template-columns:minmax(0,1fr); }
  html[data-theme="ion"][data-mode][data-style] .station-rail-right { position:static; }
  html[data-theme="ion"][data-mode] .stats.station-stats-side { flex-direction:row; flex-wrap:wrap; }
  html[data-theme="ion"][data-mode][data-style] .stats.station-stats-side .stat { flex:1 1 calc(50% - 8px); min-width:0; }
}
@media (max-width:700px) {
  html[data-theme="ion"][data-mode][data-style] .station-card { padding:24px; }
}
@media (hover:none),(pointer:coarse) { html[data-theme="ion"] #ion-glow { display:none; } }
@media (prefers-reduced-motion:reduce) {
  html[data-theme="ion"] *, html[data-theme="ion"] *::before, html[data-theme="ion"] *::after { animation:none !important; transition-duration:.01ms !important; }
  html[data-theme="ion"] #ion-glow { display:none; }
  html[data-theme="ion"][data-mode] .topbar { background:var(--ion-glass); }
}