/* EVE Bondsmith — shared base styles. Loaded before theme.css and each page's own
   <style>, so pages can override any rule simply by redeclaring it. */

:root{
  --bg:#0a0e14; --panel:#111823; --panel-2:#0d141d; --line:#1c2733; --text:#c5d1de; --dim:#6b7a8d;
  --holo:#4fd1e0; --holo-dim:#2b6c75; --best:#f0a830; --danger:#e0556b; --good:#5fd08a; --purple:#a98bdb;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --disp:"Chakra Petch",system-ui,sans-serif;
  --num:-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; line-height:1.5;
  background-image:radial-gradient(circle at 20% -10%,rgba(79,209,224,0.06),transparent 45%); min-height:100vh;
}
.wrap{ max-width:1180px; margin:0 auto; padding:24px 20px 80px; }
.nav{ display:flex; gap:16px; margin-bottom:18px; font-family:var(--disp); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
header{ border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:20px; }
.eyebrow{ font-family:var(--disp); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--holo-dim); }
h1{ font-family:var(--disp); font-weight:700; font-size:28px; letter-spacing:.02em; margin:4px 0 2px; }
h1 span{ color:var(--holo); }
.sub{ color:var(--dim); font-size:13px; }
a{ color:var(--holo); }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:16px; margin-bottom:18px; }
.card h2{ font-family:var(--disp); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.card h2::before{ content:""; width:6px; height:6px; background:var(--holo); display:inline-block; }
.muted{ color:var(--dim); }
.foot{ color:var(--dim); font-size:12px; margin-top:12px; }
.item{ display:flex; align-items:center; gap:10px; }
.item img{ width:26px; height:26px; border:1px solid var(--line); border-radius:3px; background:var(--panel-2); }
button.run{ font-family:var(--disp); letter-spacing:.1em; text-transform:uppercase; font-weight:600; font-size:13px; background:var(--holo); color:#04222a; border:none; cursor:pointer; padding:10px 18px; border-radius:3px; }
button.run:hover{ background:#6fe0ee; }
button.run.small{ padding:7px 12px; font-size:11px; }
button.run.ghost{ background:transparent; color:var(--dim); border:1px solid var(--line); }
button.run.ghost:hover{ color:var(--text); background:rgba(255,255,255,.03); }
input,select{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  font-family:var(--mono); font-size:13px; padding:9px 10px; border-radius:4px; outline:none;
}
input:focus,select:focus{ border-color:var(--holo-dim); }
input[type="checkbox"],input[type="radio"]{ width:auto; }
input[type="date"]{ color-scheme:dark; }
.stats{ display:flex; gap:12px; flex-wrap:wrap; }
.stat{ flex:1; min-width:140px; border:1px solid var(--line); border-radius:6px; padding:12px 14px; background:var(--panel-2); }
.stat .k{ font-family:var(--disp); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.stat .v{ font-family:var(--num); font-variant-numeric:tabular-nums; font-size:20px; font-weight:600; margin-top:3px; }
.err{ border-left:2px solid var(--danger); background:rgba(224,85,107,.08); padding:10px 12px; font-size:13px; margin:10px 0; border-radius:2px; }

/* ---- toasts & themed confirm (used by app-core.js) ---- */
#toasts{ position:fixed; right:14px; bottom:14px; z-index:9999; display:flex; flex-direction:column; gap:8px; max-width:min(420px,90vw); }
.toast{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--holo); color:var(--text);
  padding:10px 14px; border-radius:4px; font-size:13px; box-shadow:0 6px 24px rgba(0,0,0,.45);
  animation:toast-in .18s ease-out; }
.toast.good{ border-left-color:var(--good); } .toast.bad{ border-left-color:var(--danger); }
.toast.out{ opacity:0; transform:translateY(6px); transition:all .25s; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
#cfm-wrap{ position:fixed; inset:0; z-index:9998; background:rgba(4,8,14,.62); display:flex; align-items:center; justify-content:center; padding:20px; }
#cfm{ background:var(--panel); border:1px solid var(--line); border-radius:6px; max-width:440px; width:100%; padding:18px; box-shadow:0 12px 40px rgba(0,0,0,.55); }
#cfm .msg{ font-size:13.5px; white-space:pre-wrap; margin-bottom:16px; }
#cfm .btns{ display:flex; gap:10px; justify-content:flex-end; }
@media (prefers-reduced-motion:reduce){ .toast{ animation:none; } }

/* ==== color pass ====
   Accents are mixed from theme variables (color-mix), so the Highstorm skin
   re-tints all of this automatically. Kept subtle: washes, edges, glows. */

/* richer backdrop: cyan aurora top-left, faint amethyst rising from bottom-right */
body{
  background-image:
    radial-gradient(circle at 18% -12%, color-mix(in srgb, var(--holo) 9%, transparent), transparent 46%),
    radial-gradient(circle at 108% 112%, color-mix(in srgb, var(--purple) 7%, transparent), transparent 52%);
}

/* headline accent gets a soft charge */
h1 span{ text-shadow:0 0 20px color-mix(in srgb, var(--holo) 40%, transparent); }
.eyebrow{ color:color-mix(in srgb, var(--holo) 55%, var(--dim)); }

/* cards: hairline light along the top edge */
.card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--holo) 4%, transparent), transparent 46px), var(--panel);
  border-top:1px solid color-mix(in srgb, var(--holo) 22%, var(--line));
}
.card h2::before{ box-shadow:0 0 8px color-mix(in srgb, var(--holo) 60%, transparent); }

/* stat tiles: colored top edges cycling through the sphere palette */
.stat{ border-top:2px solid var(--holo-dim);
  background:linear-gradient(180deg, color-mix(in srgb, var(--holo) 5%, transparent), var(--panel-2) 60%); }
.stats .stat:nth-child(4n+2){ border-top-color:color-mix(in srgb, var(--purple) 70%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--purple) 5%, transparent), var(--panel-2) 60%); }
.stats .stat:nth-child(4n+3){ border-top-color:color-mix(in srgb, var(--best) 60%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--best) 5%, transparent), var(--panel-2) 60%); }
.stats .stat:nth-child(4n+4){ border-top-color:color-mix(in srgb, var(--good) 60%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--good) 5%, transparent), var(--panel-2) 60%); }

/* buttons: a little charge on hover */
button.run:not(.ghost):hover{ box-shadow:0 0 14px color-mix(in srgb, var(--holo) 40%, transparent); }
button.run.ghost:hover{ border-color:color-mix(in srgb, var(--holo) 45%, var(--line)); }

/* tables: whisper-faint zebra + warmer hover */
tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--holo) 2%, transparent); }
tbody tr:hover td{ background:color-mix(in srgb, var(--holo) 6%, transparent); }

/* links glow gently on hover */
a:hover{ text-shadow:0 0 10px color-mix(in srgb, var(--holo) 45%, transparent); }

/* nav: each section gets its own hue */
#appnav .grp:nth-of-type(1){ color:color-mix(in srgb, var(--holo) 75%, var(--dim)); }
#appnav .grp:nth-of-type(2){ color:color-mix(in srgb, var(--best) 65%, var(--dim)); }
#appnav .grp:nth-of-type(3){ color:color-mix(in srgb, var(--good) 60%, var(--dim)); }
#appnav .grp:nth-of-type(4){ color:color-mix(in srgb, var(--purple) 70%, var(--dim)); }

/* inputs: focus picks up a faint ring */
input:focus,select:focus,textarea:focus{ box-shadow:0 0 0 2px color-mix(in srgb, var(--holo) 18%, transparent); }

/* slim themed scrollbars (WebKit + Firefox) */
*{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--holo) 30%, var(--panel-2)) var(--bg); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--holo) 22%, var(--panel-2)); border-radius:5px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--holo) 40%, var(--panel-2)); }

/* determinate progress bar (makeProgress in app-core) */
.pgw{ display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
.pgbar{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.pgbar i{ display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--holo-dim), var(--holo));
  transition:width .35s ease; box-shadow:0 0 8px rgba(79,209,224,.5); }
.pgw.pgdone .pgbar i{ background:var(--good); transition:width .2s ease; }
.pgtxt{ font-family:var(--num,var(--mono,monospace)); font-size:11px; color:var(--dim); white-space:nowrap; }

/* ---- Stormlight flourishes (all themes) ---- */
/* stat tiles glow faintly like infused spheres; a touch brighter in the hand */
.stat{ box-shadow:inset 0 0 22px -12px color-mix(in srgb, var(--holo) 28%, transparent); transition:box-shadow .25s ease; }
.stat:hover{ box-shadow:inset 0 0 28px -10px color-mix(in srgb, var(--holo) 46%, transparent); }
/* chapter ornament under every page title */
header h1::after{ content:"\2500\2500\2500 \2726 \2500\2500\2500"; display:block; font-size:10px; letter-spacing:3px;
  color:var(--holo-dim); opacity:.75; margin-top:7px; font-family:Georgia,serif; font-weight:400; }
/* stormlight moving through the progress bar */
.pgbar i{ position:relative; overflow:hidden; }
.pgbar i::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent); animation:pgshine 1.9s ease-in-out infinite; }
@keyframes pgshine{ to{ transform:translateX(100%); } }
@media(prefers-reduced-motion:reduce){ .pgbar i::after{ animation:none; } }