/* =====================================================================
   Tradly-24 design system — 4 switchable themes (dark default, light,
   midnight, high contrast), the glossy violet-to-blue gradient reserved for
   the brand mark + active nav states, everything else flat and clean.
   Import this on every page, then add page-specific rules after it.
   ===================================================================== */

:root, html[data-theme="dark"] {
  --bg-deep:#0a0714;
  --bg-deep-2:#0f0b20;
  --panel:rgba(255,255,255,0.045);
  --panel-strong:rgba(255,255,255,0.07);
  --border:rgba(255,255,255,0.09);
  --border-soft:rgba(255,255,255,0.06);
  --text-primary:#f3f1fb;
  --text-muted:#9d98b8;
  --text-dim:#6d6a8a;
  --bull:#2fd480;
  --bear:#fb5b5b;
  --warn:#f5a623;
  --grad-brand: linear-gradient(120deg,#7c3aed 0%, #6d5bff 45%, #3b6dff 100%);
  --grad-brand-gloss: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 55%), var(--grad-brand);
  --grad-text: linear-gradient(120deg,#c9a8ff 0%, #a78bfa 35%, #7dd3fc 100%);
  /* Fixed brand-mark color — defined ONLY here (never overridden inside any
     html[data-theme="..."] block below), so the rail logo mark stays this
     same violet-to-blue regardless of active theme. It used to reuse
     --grad-brand-gloss, which is theme-colored (yellow in "contrast", green
     in "meadow", pastel in "porcelain") — the logo is brand identity, not a
     themeable accent, so it needed its own always-on variable. Matches the
     "light" theme's --grad-brand (#7c3aed -> #6d5bff -> #2563eb), the
     canonical blue this was checked against.
  */
  --brand-logo-gradient: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%),
    linear-gradient(120deg, #7c3aed 0%, #6d5bff 45%, #2563eb 100%);
  --active-text:#ffffff;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --field-bg:rgba(255,255,255,0.03);
  --header-bg:rgba(10,7,20,0.55);
  --accent-tint:rgba(124,58,237,0.16);
  --surface-solid:#0f0b20;
  /* Rail-specific colors — separate from --panel/--text-dim so a theme can
     give the icon rail its own (e.g. always-dark) look without recoloring
     every card in the app. Defaults just mirror the existing look, so the
     5 themes above this comment are visually unchanged. */
  --sidebar-bg:var(--panel);
  --sidebar-icon-color:var(--text-dim);
  --card-shadow:none;
  --sidebar-w: 220px;
  --sidebar-w-collapsed: 80px;
  --topbar-h: 56px;
}

html[data-theme="light"] {
  --bg-deep: linear-gradient(160deg, #f6f3ff 0%, #eef3ff 45%, #eefaff 100%);
  --bg-deep-2:#f0eefc;
  --panel:rgba(124,58,237,0.06);
  --panel-strong:rgba(124,58,237,0.11);
  --border:rgba(70,50,130,0.14);
  --border-soft:rgba(70,50,130,0.09);
  --text-primary:#1a1330;
  --text-muted:#585174;
  --text-dim:#847da3;
  --grad-brand: linear-gradient(120deg,#7c3aed 0%, #6d5bff 45%, #2563eb 100%);
  --grad-brand-gloss: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%), var(--grad-brand);
  --grad-text: linear-gradient(120deg,#7c3aed 0%, #6d5bff 45%, #2563eb 100%);
  --active-text:#ffffff;
  --field-bg:rgba(255,255,255,0.55);
  --header-bg:rgba(255,255,255,0.55);
  --accent-tint:rgba(124,58,237,0.09);
  --surface-solid:#ffffff;
}

html[data-theme="midnight"] {
  --bg-deep:#050b18;
  --bg-deep-2:#0a1226;
  --panel:rgba(255,255,255,0.035);
  --panel-strong:#0d1730;
  --border:#1c2b4a;
  --border-soft:#152238;
  --text-primary:#dce8ff;
  --text-muted:#7d93bd;
  --text-dim:#546d8a;
  --grad-brand: linear-gradient(120deg,#22d3ee 0%, #6d5bff 60%, #7c3aed 100%);
  --grad-brand-gloss: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 55%), var(--grad-brand);
  --grad-text: linear-gradient(120deg,#7dd3fc 0%, #a78bfa 60%, #22d3ee 100%);
  --active-text:#04141c;
  --field-bg:rgba(255,255,255,0.03);
  --header-bg:rgba(5,11,24,0.6);
  --accent-tint:rgba(34,211,238,0.14);
  --surface-solid:#0a1226;
}

html[data-theme="contrast"] {
  --bg-deep:#000000;
  --bg-deep-2:#0a0a0a;
  --panel:#0a0a0a;
  --panel-strong:#141414;
  --border:#3a3a3a;
  --border-soft:#262626;
  --text-primary:#ffffff;
  --text-muted:#bdbdbd;
  --text-dim:#8f8f8f;
  --grad-brand:#ffd400;
  --grad-brand-gloss:#ffd400;
  --grad-text:#ffd400;
  --active-text:#000000;
  --bull:#4ade80;
  --bear:#ff6b6b;
  --warn:#ffd400;
  --field-bg:#0a0a0a;
  --header-bg:#000000;
  --accent-tint:rgba(255,212,0,0.12);
  --surface-solid:#0a0a0a;
}

html[data-theme="meadow"] {
  --bg-deep: linear-gradient(160deg, #f3fbee 0%, #eef8ea 45%, #f6fdf1 100%);
  --bg-deep-2:#ffffff;
  --panel:#ffffff;
  --panel-strong:#f3fbee;
  --border:#d7ecc9;
  --border-soft:#e6f5db;
  --text-primary:#0d1f00;
  --text-muted:#3f5a2c;
  --text-dim:#7c9464;
  --bull:#2fa84f;
  --bear:#e2463f;
  --warn:#c98a12;
  --grad-brand: linear-gradient(120deg, #86ea5d 0%, #6bd847 50%, #4fc23a 100%);
  --grad-brand-gloss: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 55%), var(--grad-brand);
  --grad-text: linear-gradient(120deg, #2f7a1d 0%, #4fae2e 50%, #6bd847 100%);
  --active-text:#0d1f00;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --field-bg:#ffffff;
  --header-bg:rgba(255,255,255,0.75);
  --accent-tint:rgba(79,194,58,0.14);
  --surface-solid:#ffffff;
}
html[data-theme="porcelain"] {
  /* Dark icon rail + an otherwise all-white/porcelain canvas, soft pastel
     brand accents, and shadowed, rounded cards — per an explicit reference
     screenshot (a dashboard with a near-black icon strip, white content
     area, pastel-tinted panels). Unlike the rail-color trick every other
     theme relies on implicitly, this one actually needs the rail to differ
     from --panel (white, used for cards) — that's what --sidebar-bg (added
     to :root above) exists for. */
  --bg-deep:#f4f6fa;
  --bg-deep-2:#ffffff;
  --panel:#ffffff;
  --panel-strong:#f6f7fb;
  --border:#e7e9f2;
  --border-soft:#eef0f6;
  --text-primary:#1c2333;
  --text-muted:#5b6478;
  --text-dim:#9399ab;
  --bull:#22b07d;
  --bear:#e5566d;
  --warn:#e0a530;
  --grad-brand: linear-gradient(120deg, #b9a6ff 0%, #8fb3ff 55%, #7fd8e6 100%);
  --grad-brand-gloss: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 55%), var(--grad-brand);
  --grad-text: linear-gradient(120deg, #6d5bff 0%, #4f8ef5 50%, #22a7bb 100%);
  --active-text:#1c2333;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --field-bg:#ffffff;
  --header-bg:rgba(255,255,255,0.85);
  --accent-tint:rgba(124,109,255,0.10);
  --surface-solid:#ffffff;
  --sidebar-bg:#12141c;
  --sidebar-icon-color:rgba(255,255,255,0.55);
  --card-shadow:0 10px 28px rgba(30,41,80,0.08), 0 2px 8px rgba(30,41,80,0.05);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg-deep);color:var(--text-primary);font-family:var(--font-body);}
a{color:inherit;text-decoration:none;}
input,select,textarea{font-family:var(--font-body);background:var(--field-bg);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);padding:9px 11px;font-size:13.5px;width:100%;}
input:focus,select:focus,textarea:focus{outline:none;border-color:#7c5cff;}
label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:5px;}
.field{margin-bottom:14px;}

.btn{border:1px solid var(--border);background:var(--panel);color:var(--text-primary);border-radius:8px;padding:9px 16px;font-size:13.5px;cursor:pointer;transition:all .15s;}
.btn:hover{border-color:#7c5cff;}
.btn-grad{border:none;background:var(--grad-brand-gloss);color:var(--active-text);font-weight:600;}
.btn-grad:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;}
.btn-sm{padding:6px 11px;font-size:12px;}
.btn-block{width:100%;}
/* Fixed-color "primary action" button (Add Group/Add Broker-style, per a
   reference screenshot) — deliberately NOT theme-driven like .btn-grad,
   same reasoning as --brand-logo-gradient: a solid near-black pill reads
   as a stable UI convention, not something that should shift with theme
   accent color. */
.btn-dark{background:#14161f;color:#fff;border:none;border-radius:9px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;}
.btn-dark:hover{background:#22242f;border-color:transparent;}
.btn-dark svg{width:14px;height:14px;}
.list-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}

.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:var(--card-shadow);}
.badge{display:inline-block;font-size:11px;padding:3px 9px;border-radius:6px;background:var(--panel-strong);color:var(--text-muted);}
.badge-bull{background:rgba(47,212,128,0.15);color:var(--bull);}
.badge-bear{background:rgba(251,91,91,0.15);color:var(--bear);}
.badge-warn{background:rgba(245,166,35,0.15);color:var(--warn);}
.text-bull{color:var(--bull);}
.text-bear{color:var(--bear);}
.text-muted{color:var(--text-muted);}
.text-dim{color:var(--text-dim);}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600;}

/* ---------------- auth pages (login/signup/pending) ---------------- */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-box{width:100%;max-width:400px;}
.auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:28px;}
.auth-brand-mark{width:34px;height:34px;border-radius:9px;background:var(--grad-brand-gloss);display:flex;align-items:center;justify-content:center;}
.auth-brand-name{font-family:var(--font-display);font-weight:600;font-size:20px;}
.auth-title{font-family:var(--font-display);font-size:17px;font-weight:600;margin-bottom:4px;}
.auth-sub{font-size:12.5px;color:var(--text-muted);margin-bottom:20px;}
.auth-footer{text-align:center;font-size:12.5px;color:var(--text-muted);margin-top:16px;}
.auth-error{background:rgba(251,91,91,0.1);border:1px solid rgba(251,91,91,0.3);color:var(--bear);border-radius:8px;padding:10px 12px;font-size:12.5px;margin-bottom:14px;display:none;}

/* ---------------- app shell (full-height rail + topbar/content column) ----
   The rail is a direct flex child of .app-shell (min-height:100vh), so it
   runs the full height of the viewport from the very top — the topbar does
   NOT sit above it. Instead, .main-col (topbar + content stacked) is the
   *other* flex child, to the right of the rail, so the topbar only ever
   spans the remaining width, never overlapping the rail. */
.app-shell{display:flex;min-height:100vh;}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  position:sticky;top:0;z-index:20;height:var(--topbar-h);display:flex;align-items:center;
  justify-content:flex-end;padding:0 18px;border-bottom:1px solid var(--border-soft);
  background:var(--header-bg);backdrop-filter:blur(14px);
}
.tb-actions{display:flex;align-items:center;gap:16px;}
.tb-index{display:flex;gap:14px;font-family:var(--font-mono);font-size:12px;}
.tb-clock{color:var(--text-muted);font-family:var(--font-mono);font-size:12px;}
.tb-theme-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.tb-avatar{width:28px;height:28px;border-radius:50%;background:var(--grad-brand-gloss);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;cursor:pointer;}
.avatar-wrap{position:relative;}
/* Small dropdown anchored under either avatar (topbar or rail-bottom) —
   clicking the avatar now offers "Edit profile" before logging out, instead
   of logging out immediately on click. */
.account-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:var(--surface-solid);
  border:1px solid var(--border-soft);border-radius:10px;box-shadow:0 14px 32px rgba(10,12,24,0.22);
  padding:6px;display:none;z-index:40;}
.account-menu.open{display:block;}
.account-menu-name{font-size:12px;font-weight:600;color:var(--text-primary);padding:8px 10px 6px;
  border-bottom:1px solid var(--border-soft);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.account-menu-item{display:block;font-size:13px;color:var(--text-muted);padding:8px 10px;border-radius:7px;
  cursor:pointer;text-decoration:none;white-space:nowrap;}
.account-menu-item:hover{background:var(--accent-tint);color:var(--text-primary);}
/* Rail sits on the left, so its dropdown opens to the right instead of
   right-aligned (which would run off the edge of the screen). */
.rail-footer .account-menu{left:100%;right:auto;top:auto;bottom:0;margin-left:10px;}

.nav-group{display:flex;position:relative;}
.rail{width:var(--sidebar-w-collapsed);flex:0 0 var(--sidebar-w-collapsed);background:var(--sidebar-bg);
  border-right:1px solid var(--border-soft);display:flex;flex-direction:column;align-items:center;padding:14px 0 16px;}
.rail-top{display:flex;flex-direction:column;align-items:center;gap:10px;}
.rail-brand{width:38px;height:38px;border-radius:10px;background:var(--brand-logo-gradient);display:flex;
  align-items:center;justify-content:center;flex:0 0 auto;margin-bottom:14px;box-shadow:0 4px 14px rgba(0,0,0,0.22);}
.rail-icon{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--sidebar-icon-color);cursor:pointer;transition:background .12s;}
.rail-icon svg{width:20px;height:20px;}
.rail-icon:hover{background:var(--accent-tint);}
.rail-icon.active{background:var(--grad-brand-gloss);color:var(--active-text);}
.rail-icon.active:hover{background:var(--grad-brand-gloss);}
/* Role badge + avatar pinned to the bottom of the rail (reference:
   admin-panel.html) — a small vertical role label above a circular avatar,
   separate from the topbar avatar (which stays the click-to-logout control). */
.rail-footer{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:16px;flex:0 0 auto;position:relative;}
.rail-role{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--bull);}
.rail-role.is-user{color:var(--sidebar-icon-color);}
.rail-mini-avatar{width:38px;height:38px;border-radius:50%;background:var(--panel-strong);border:1px solid var(--border-soft);
  color:var(--text-primary);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;cursor:pointer;flex:0 0 auto;}
.rail-mini-avatar:hover{border-color:var(--text-dim);}
.submenu{width:248px;flex:0 0 248px;background:var(--surface-solid);border-right:1px solid var(--border-soft);
  padding:20px 14px;display:none;position:absolute;left:var(--sidebar-w-collapsed);top:0;height:100%;
  overflow-y:auto;z-index:25;box-shadow:10px 0 28px rgba(10,12,24,0.18);}
.submenu.open{display:flex;flex-direction:column;}
.submenu-title{font-size:12.5px;font-weight:700;color:var(--text-primary);margin-bottom:16px;
  text-transform:uppercase;letter-spacing:.05em;padding:0 12px;}
.submenu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;
  color:var(--text-muted);font-size:13.5px;font-weight:500;padding:12px 14px;border-radius:9px;cursor:pointer;margin-bottom:8px;}
.submenu-item:last-child{margin-bottom:0;}
.submenu-item-label{overflow:hidden;text-overflow:ellipsis;}
.submenu-item:hover{background:var(--accent-tint);}
.submenu-item.active{background:var(--grad-brand-gloss);color:var(--active-text);}
.submenu-item.active:hover{background:var(--grad-brand-gloss);}
.submenu-item.soon{cursor:default;}
.submenu-item.soon:hover{background:none;}
.submenu-item.soon .submenu-item-label{color:var(--text-dim);}
.submenu-soon-badge{flex:0 0 auto;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text-dim);background:var(--panel);border:1px solid var(--border-soft);border-radius:5px;
  padding:2px 6px;}
.content-col{flex:1;min-width:0;display:flex;flex-direction:column;min-height:calc(100vh - var(--topbar-h));}
.content{flex:1;min-width:0;padding:24px 28px;}
.app-footer{flex:0 0 auto;padding:14px 28px;font-size:11.5px;color:var(--text-dim);border-top:1px solid var(--border-soft);}

.section-title{font-family:var(--font-display);font-weight:600;font-size:15px;margin:0 0 14px;}
.card-title{font-family:var(--font-display);font-weight:600;font-size:13.5px;margin:0 0 12px;color:var(--text-primary);}
.grid{display:grid;gap:14px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}
.stat-card .stat-label{font-size:11.5px;color:var(--text-muted);margin-bottom:6px;}
.stat-card .stat-value{font-size:20px;font-weight:600;font-family:var(--font-display);}
.stat-card .stat-delta{font-size:11px;margin-top:4px;}

/* ---------------- Home page index chart cards ---------------- */
.index-card{position:relative;}
.index-card .idx-name{font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:6px;}
.index-card .idx-price{font-size:24px;font-weight:600;font-family:var(--font-display);}
.index-card .idx-change{font-size:12.5px;font-weight:600;margin-top:2px;}
.index-card .idx-change.up{color:var(--bull);}
.index-card .idx-change.down{color:var(--bear);}
.index-card .idx-state{position:absolute;top:20px;right:20px;font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;padding:3px 9px;border-radius:6px;background:var(--panel-strong);color:var(--text-dim);}
.index-card .idx-state.open{background:rgba(47,212,128,0.15);color:var(--bull);}
.index-card .idx-chart{height:56px;margin:10px 0 4px;}
.index-card .idx-asof{font-size:11px;color:var(--text-dim);}

.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);padding:8px 10px;border-bottom:1px solid var(--border);}
.data-table td{padding:9px 10px;border-bottom:1px solid var(--border-soft);}
.empty-state{color:var(--text-dim);font-size:13px;text-align:center;padding:30px 0;}

/* ---------------- admin hub (resource cards) ---------------- */
.hub-block{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--border-soft);}
.hub-block:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.hub-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.hub-block-head .card-title{margin:0;}
.hub-block-count{font-size:11px;color:var(--text-dim);background:var(--panel-strong);border:1px solid var(--border-soft);
  border-radius:999px;padding:2px 9px;}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,168px));gap:12px;}
.hub-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-deep-2);color:var(--text-primary);text-decoration:none;cursor:pointer;transition:border-color .12s,background .12s;}
.hub-card:hover{border-color:var(--text-dim);background:var(--accent-tint);}
.hub-card.disabled{opacity:.45;cursor:default;}
.hub-card.disabled:hover{border-color:var(--border);background:var(--bg-deep-2);}
/* Plain monochrome icon, no colored badge behind it — matches the reference
   screenshot's flat outline-icon style rather than a themed accent square. */
.hub-card-icon{flex:0 0 auto;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);}
.hub-card-icon svg{width:20px;height:20px;}
.hub-card-label{font-size:12.5px;font-weight:600;line-height:1.35;}
.hub-card-soon{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);display:block;margin-top:2px;}

/* ---------------- autocomplete (symbol master typeahead) ---------------- */
.ac-wrap{position:relative;}
.ac-list{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:260px;background:var(--surface-solid);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,0.25);
  max-height:260px;overflow-y:auto;z-index:60;display:none;}
.ac-list.show{display:block;}
.ac-item{padding:8px 12px;cursor:pointer;font-size:12.5px;}
.ac-item:hover,.ac-item.active{background:var(--accent-tint);}
.ac-item .ac-symbol{font-weight:600;}
.ac-item .ac-meta{color:var(--text-dim);font-size:11px;margin-top:1px;}
.ac-empty{padding:10px 12px;color:var(--text-dim);font-size:12px;}

/* ---------------- modal (replaces native prompt()/confirm()) ---------------- */
.modal-overlay{position:fixed;inset:0;background:rgba(10,12,20,0.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:500;opacity:0;transition:opacity .15s ease;
  pointer-events:none;}
.modal-overlay.show{opacity:1;pointer-events:auto;}
.modal-card{background:var(--surface-solid);border:1px solid var(--border);border-radius:14px;
  padding:22px 24px;width:100%;max-width:380px;box-shadow:0 24px 64px rgba(0,0,0,0.35);
  transform:translateY(8px) scale(.98);transition:transform .15s ease;}
.modal-overlay.show .modal-card{transform:translateY(0) scale(1);}
.modal-title{font-family:var(--font-display);font-weight:600;font-size:15.5px;margin-bottom:6px;}
.modal-message{font-size:13px;color:var(--text-muted);margin-bottom:16px;line-height:1.5;}
.modal-input{width:100%;margin-bottom:6px;}
.modal-charcount{text-align:right;font-size:11px;color:var(--text-dim);margin-bottom:6px;}
.modal-error{font-size:12px;color:var(--bear);min-height:16px;margin-bottom:6px;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}

/* Inline validation/error banner shown just above the relevant form
   section (e.g. "Passwords don't match") instead of only a toast, so the
   error sits right next to what needs fixing. */
.form-alert{display:none;font-size:12.5px;color:var(--bear);background:rgba(239,83,80,0.12);
  border:1px solid rgba(239,83,80,0.3);border-radius:8px;padding:9px 12px;margin-bottom:12px;}
.form-alert.show{display:block;}

/* ---------------- toast ---------------- */
.toast{position:fixed;bottom:24px;right:24px;background:var(--bg-deep-2);border:1px solid var(--border);
  border-radius:10px;padding:12px 16px;font-size:13px;box-shadow:0 12px 32px rgba(0,0,0,0.35);
  z-index:300;transform:translateY(16px);opacity:0;transition:all .2s ease;max-width:340px;}
.toast.show{transform:translateY(0);opacity:1;}