/* TradeShot AI — shared styles (Phase 4, 15-10-2026).
   Themes: Midnight (default) and Light, chosen with the toggle (stored per browser).
   Fonts: Sora (headings), IBM Plex Sans (text), IBM Plex Mono (numbers). */

:root{
  --bg:#07080B; --bg2:#0B0D12; --panel:#0E1117; --panel2:#131722; --line:#1D2230; --line2:#262C3C;
  --ink:#ECEEF2; --muted:#868D9B; --faint:#5B6272;
  --go:#22E58A; --go-ink:#04140B; --shot:#FF2D3D; --warn:#F5B83D; --info:#5AA9FF;
  --field:#0A0D12; --shadow:0 10px 30px rgba(0,0,0,.45);
  --r:12px; --r-sm:8px;
  --f-head:'Sora',system-ui,sans-serif; --f-text:'IBM Plex Sans',system-ui,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F4F6FA; --bg2:#EDF0F6; --panel:#FFFFFF; --panel2:#F7F9FC; --line:#DCE1EA; --line2:#CBD2DE;
  --ink:#0B1A30; --muted:#5D6B82; --faint:#8A96A8;
  --go:#0F9D5C; --go-ink:#FFFFFF; --shot:#E0202F; --warn:#B7791F; --info:#1F6FD1;
  --field:#F7F9FC; --shadow:0 10px 30px rgba(11,26,48,.12);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--f-text);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
h1,h2,h3{font-family:var(--f-head);letter-spacing:-.02em;margin:0}
.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* logo: the right file for the theme */
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:36px;width:auto;display:block}
.logo .l{display:none}
:root[data-theme="light"] .logo .d{display:none}
:root[data-theme="light"] .logo .l{display:block}

/* top bar */
.topbar{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--bg)}
.topbar .sp{flex:1}
.topbar .home-btn svg{width:16px;height:16px}
@media(max-width:640px){.topbar .home-btn span{display:none}.topbar .home-btn{padding:0;width:36px;height:36px}}
.topbar .who{font-size:13px;color:var(--muted);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px var(--f-text);border-radius:var(--r-sm);
  border:1px solid var(--line2);background:var(--panel2);color:var(--ink);padding:10px 16px;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{border-color:var(--muted)}
.btn:focus-visible,.input:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.btn.primary{background:var(--go);border-color:var(--go);color:var(--go-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--shot)}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:default;filter:none}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.icon-btn svg{width:18px;height:18px}
.icon-btn .sun{display:none}
:root[data-theme="light"] .icon-btn .sun{display:block}
:root[data-theme="light"] .icon-btn .moon{display:none}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.input{font:15px var(--f-text);background:var(--field);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r-sm);padding:11px 12px;width:100%;min-width:0}
.input::placeholder{color:var(--faint)}
.hint{font-size:12.5px;color:var(--muted)}
.err{font-size:13px;color:var(--shot)}
.okmsg{font-size:13px;color:var(--go)}

/* cards and layout */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h2{font-size:17px;margin-bottom:12px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:24px 20px 48px;flex:1}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kpi .k{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.kpi .v{font:600 26px/1.2 var(--f-mono);margin-top:6px}
.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:13px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* pills */
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line2);color:var(--muted)}
.pill.ok{color:var(--go);border-color:color-mix(in srgb,var(--go) 45%,transparent)}
.pill.bad{color:var(--shot);border-color:color-mix(in srgb,var(--shot) 45%,transparent)}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}

/* notices and toasts */
.notice{border:1px solid var(--line2);border-left:3px solid var(--info);background:var(--panel2);border-radius:var(--r-sm);padding:12px 14px;font-size:14px}
.notice.warn{border-left-color:var(--warn)}
.notice.bad{border-left-color:var(--shot)}
.notice.ok{border-left-color:var(--go)}
#ts-toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:1000;max-width:min(380px,calc(100vw - 32px))}
.toast{background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--info);border-radius:var(--r-sm);padding:11px 14px;font-size:14px;box-shadow:var(--shadow)}
.toast.ok{border-left-color:var(--go)} .toast.bad{border-left-color:var(--shot)} .toast.warn{border-left-color:var(--warn)}

/* legal footer (wording rule 12-10-2026) */
.legal{border-top:1px solid var(--line);padding:18px 20px 26px;font-size:12px;line-height:1.6;color:var(--muted)}
.legal p{margin:0 auto;max-width:1180px}
.legal p+p{margin-top:6px}

/* spinner */
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--go);animation:ts-spin .8s linear infinite;display:inline-block}
@keyframes ts-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

@media (max-width:640px){
  .topbar{padding:12px 16px;gap:10px}
  .topbar .who{display:none}
  .wrap{padding:18px 16px 40px}
  .card{padding:16px}
  .logo img{height:32px}
}
/* payments (22-10-2026) */
.howpay{margin:6px 0 12px;padding-left:20px;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.howpay b{color:var(--ink)}
.payref{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px dashed var(--line2);border-radius:12px}
.payref .k{font-size:12px;color:var(--muted)}
.payref .v{font-size:22px;font-weight:700;letter-spacing:.04em}

/* ───────── Polish (23-10-2026): depth, tinted states, sticky glass top bar, phone bottom menu ───────── */
:root{
  --r:14px; --r-sm:10px; --violet:#A78BFA;
  --go-soft:color-mix(in srgb,var(--go) 13%,transparent);
  --edge:inset 0 1px 0 rgba(255,255,255,.045);
  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 12px 32px -18px rgba(0,0,0,.75);
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"]{
  --violet:#7C3AED;
  --edge:inset 0 1px 0 rgba(255,255,255,.95);
  --shadow-1:0 1px 2px rgba(11,26,48,.05),0 12px 30px -16px rgba(11,26,48,.20);
}
body{background:radial-gradient(1000px 520px at -10% -12%,color-mix(in srgb,var(--go) 7%,transparent),transparent 70%),var(--bg);background-repeat:no-repeat}
::selection{background:color-mix(in srgb,var(--go) 35%,transparent)}

.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}

.card{background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 60%,var(--panel)),var(--panel) 160px);box-shadow:var(--edge),var(--shadow-1)}
.card h2{font-size:17px;letter-spacing:-.01em}
.kpi .k{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}

.btn{min-height:40px;transition:border-color .15s,background-color .15s,box-shadow .15s,transform .08s}
.btn:hover{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--go),#fff 14%),var(--go));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px -10px color-mix(in srgb,var(--go) 80%,transparent)}
.btn.primary:hover{filter:brightness(1.05);border-color:var(--go)}
.btn.danger:hover{border-color:color-mix(in srgb,var(--shot) 60%,transparent);background:color-mix(in srgb,var(--shot) 8%,var(--panel2))}
.icon-btn{transition:border-color .15s,background-color .15s}
.icon-btn:hover{background:var(--panel2);border-color:var(--line2)}
@media (pointer:coarse){.btn{min-height:44px}.icon-btn{width:40px;height:40px}}

.input{transition:border-color .15s,box-shadow .15s}
.input:hover:not(:disabled){border-color:color-mix(in srgb,var(--ink) 25%,var(--line2))}
.input:focus{outline:none;border-color:var(--go);box-shadow:0 0 0 3px var(--go-soft)}
.input:disabled{opacity:.7}

.pill{padding:3px 10px;background:color-mix(in srgb,var(--line) 45%,transparent);line-height:1.4}
.pill.ok{background:var(--go-soft)}
.pill.bad{background:color-mix(in srgb,var(--shot) 12%,transparent)}
.pill.warn{background:color-mix(in srgb,var(--warn) 12%,transparent)}
/* plan colours: Single blue, Multi violet, All Access green */
.pill.tier-single{color:var(--info);border-color:color-mix(in srgb,var(--info) 45%,transparent);background:color-mix(in srgb,var(--info) 12%,transparent)}
.pill.tier-multi{color:var(--violet);border-color:color-mix(in srgb,var(--violet) 45%,transparent);background:color-mix(in srgb,var(--violet) 12%,transparent)}
.pill.tier-all{color:var(--go);border-color:color-mix(in srgb,var(--go) 45%,transparent);background:var(--go-soft)}

.notice{border-radius:var(--r-sm);background:color-mix(in srgb,var(--info) 5%,var(--panel))}
.notice.ok{background:color-mix(in srgb,var(--go) 6%,var(--panel))}
.notice.warn{background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.notice.bad{background:color-mix(in srgb,var(--shot) 7%,var(--panel))}
.toast{border-radius:var(--r-sm)}

/* phone bottom menu (used by /app; /trade later) */
.tabbar{display:none}
@media (max-width:860px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
    background:color-mix(in srgb,var(--panel) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
    border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:4px 2px;border-radius:12px;
    color:var(--muted);font:600 11px/1.1 var(--f-text);text-decoration:none;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tabbar svg{width:22px;height:22px}
  .tabbar [aria-current="page"],.tabbar .on{color:var(--go)}
  .tabbar [aria-current="page"]{background:var(--go-soft)}
  .tabbar a:focus-visible,.tabbar button:focus-visible{outline:2px solid var(--info);outline-offset:-2px}
  body.has-tabbar{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  body.has-tabbar #ts-toasts{bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){*:not(.spin){transition:none!important;animation:none!important}}