/* ===========================================================
   ALGOXPERTS Portfolio — shared design system
   Palette/type adopted from the "AlgoXperts Portfolio Redesign"
   design (Claude Design mockup) — dark navy, Outfit + Spline Sans
   Mono. Real data/logic unchanged; this file is presentation only.
   =========================================================== */

:root{
  color-scheme: dark;
  --page:#080e1a; --surface:#101a2b; --surface-2:#16223a; --surface-3:#1e2c48;
  --ink:#f2f5f9; --ink-soft:#dbe2ec; --ink-muted:#b6c1d2;
  --line:rgba(157,180,208,.12); --line-strong:rgba(157,180,208,.24);
  --shadow:rgba(0,0,0,.55);

  /* status (fixed meaning everywhere: good = profit, bad = loss) */
  --good:#34d399; --good-wash:rgba(52,211,153,.12);
  --bad:#f87171; --bad-wash:rgba(248,113,113,.12);

  /* per-bot brand accent - pick one, applied via [data-bot] below */
  --orb:#4f8ff7; --orb-wash:rgba(79,143,247,.16);
  --daily:#e3a83c; --daily-wash:rgba(227,168,60,.16);
  --brand: var(--orb); --brand-wash: var(--orb-wash);

  /* categorical symbol colors (fixed hue order, validated adjacent-pair CVD) */
  --series-blue:#3987e5; --series-orange:#e3a83c; --series-aqua:#34d399;
  --series-yellow:#d4b106; --series-magenta:#d55181; --series-green:#4ade80;
  --series-violet:#9085e9; --series-red:#f87171;

  --font-display:'Outfit',system-ui,sans-serif;
  --font-body:'Outfit',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* type scale: 26 title & hero numbers, 20 KPI numbers, 15 headings, 12.5 body & labels, 11 units & ticks.
     Outfit for words, Spline Sans Mono strictly for numbers and dates. */
  --fs-title:26px; --fs-num:26px; --fs-num-sm:22px; --fs-h:15px; --fs-body:12.5px; --fs-small:11px;

  /* spacing / radius scale - every card-like thing uses these, nothing bespoke */
  --radius:12px; --radius-sm:8px; --radius-pill:999px;
  --card-pad:20px;
  --tile-pad:16px 18px;
  --gap:12px;
}
/* Per-bot brand assignment: bots are user-defined now, so this is set at
   runtime (--brand / --brand-wash on the root inline style) from the bot's
   position in its own account - see setBrandColor() in bot.html. */

*{box-sizing:border-box;}
html{background:var(--page);}
body{
  color:var(--ink); font-family:var(--font-mono); font-size:var(--fs-body); line-height:1.45; -webkit-font-smoothing:antialiased; margin:0;
  overflow-x:hidden; /* belt-and-suspenders: a fixed-width child (e.g. the trade table) should scroll itself, never the page */
  background:transparent;
}
/* Scene: one fixed photo behind the whole app (swap via --scene), darkened toward the
   bottom and the edges so the bright cloud sea never competes with the glass panels.
   A fixed pseudo-element instead of background-attachment:fixed - that one is broken on iOS. */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--page);
  --scene-w:1400px;
  background-image:
    linear-gradient(180deg, rgba(8,14,26,.18) 0, rgba(8,14,26,.26) 12vw, rgba(8,14,26,.62) 24vw, var(--page) 33vw),
    var(--scene, url('./bg/scene.webp'));
  background-position:top center, top center;
  background-size:100% auto, max(100%, var(--scene-w)) auto;
  background-repeat:no-repeat;
}
@media (max-width:700px){
  body::after{
    background-image:
      linear-gradient(180deg, rgba(8,14,26,.18) 0%, rgba(8,14,26,.35) 45%, rgba(8,14,26,.75) 100%),
      var(--scene, url('./bg/scene.webp'));
    background-position:center, center 30%;
    background-size:cover, cover;
  }
}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
::selection{background:var(--brand-wash);}
a{color:inherit;}
h1,h2,h3{text-wrap:balance; margin:0;}
button{font:inherit;}

/* ---------- Motion: entrance reveal + shared easing ---------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes revealUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
  .reveal{animation:revealUp .5s cubic-bezier(.16,.8,.3,1) both; animation-delay:var(--reveal-delay, 0ms);}
}
.lift{transition:transform .22s cubic-bezier(.16,.8,.3,1), box-shadow .22s ease, border-color .22s ease;}
.lift:hover{transform:translateY(-3px); box-shadow:0 14px 32px -12px rgba(0,0,0,.5); border-color:var(--line-strong);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);}

.page{max-width:1280px; margin:0 auto; padding:36px 28px 72px;}

/* ---------- App bar (product brand + date, above the masthead) ---------- */
.app-bar{position:sticky; top:0; z-index:30; display:flex; flex-direction:column; margin-bottom:22px; padding:0; transition:border-radius .2s ease, box-shadow .2s ease, background .2s ease; border-radius:var(--radius); background:radial-gradient(560px 340px at 6% 0%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%), linear-gradient(165deg, rgba(22,40,74,.84) 0%, rgba(15,26,48,.86) 48%, rgba(10,18,34,.88) 100%); border:1px solid rgba(255,255,255,.10);  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -36px rgba(0,0,0,.85);}
.app-bar-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:9px 12px 9px 16px; transition:padding .2s ease;}
/* scrolled: flush to the top edge, opaque, one step smaller */
.app-bar.is-stuck{border-top-left-radius:0; border-top-right-radius:0; border-top-color:transparent; background:linear-gradient(180deg, #111e36 0%, #0c172b 100%); box-shadow:0 14px 34px -14px rgba(0,0,0,.8);}
.app-bar.is-stuck .app-bar-row{padding:5px 12px 5px 16px;}
.app-bar.is-stuck .app-bar-nav{padding:5px 12px;}
.app-bar.is-stuck .app-brand{font-size:14px;}
.app-bar.is-stuck .app-brand-mark{width:24px; height:15px;}
.app-bar.is-stuck .share-btn{padding:6px 11px;}
.app-bar.is-stuck .share-btn.icon-only{width:30px; height:30px;}
.app-bar.is-stuck .nav-tab{padding:5px 10px;}
.app-bar .app-brand, .app-bar .app-brand-mark, .app-bar .share-btn, .app-bar .nav-tab, .app-bar-nav{transition:padding .2s ease, font-size .2s ease, width .2s ease, height .2s ease;}
.app-bar .toolbar{margin-left:auto;}
.app-bar-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-top:1px solid rgba(255,255,255,.10);}
.app-bar .nav-tabs{flex-wrap:wrap; gap:4px; flex:1 1 auto; min-width:0;}
.app-bar-nav .toggle-group{padding:2px; flex:none;}
.app-bar-nav .toggle-group button{padding:4px 10px; font-size:10px;}
.ic{width:14px; height:14px; flex:none; display:inline-block;}
.nav-menu-wrap{position:relative; display:inline-flex;}
.nav-more .caret{width:12px; height:12px; margin-left:-2px; opacity:.7;}
.nav-menu{position:absolute; top:calc(100% + 6px); left:0; min-width:220px; background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.45); padding:6px; z-index:40; display:flex; flex-direction:column; gap:2px;}
.nav-menu[hidden]{display:none;}
.nav-menu .nav-tab{border-radius:7px; padding:8px 10px;}
.share-btn .ic{margin-right:1px;}
.btn-ic{display:inline-flex; align-items:center; justify-content:center; line-height:0;}
.share-btn{line-height:1;}
.share-btn.icon-only{width:34px; height:34px; padding:0; justify-content:center; border-radius:50%;}
.share-btn.icon-only .ic{margin:0; width:15px; height:15px; transform:translateX(-1px);}
.share-btn.primary{background:linear-gradient(155deg, var(--ink), color-mix(in srgb, var(--ink) 82%, var(--brand))); color:var(--page); border-color:transparent;}
.share-btn.primary:hover{color:var(--page); border-color:transparent;}
.app-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-.01em;}
.app-brand .tld{color:var(--ink-muted); font-weight:500;}
.app-brand-mark{width:30px; height:19px; flex:none; display:inline-block; filter:drop-shadow(0 0 7px rgba(52,211,153,.4));}
.logo-mark{display:block; width:100%; height:100%; overflow:visible;}
@media (max-width:700px){.panel, .hero-item, .kpi-tile, .portfolio-card{}}

.panel, .hero-item, .kpi-tile, .app-bar, .masthead, .portfolio-card, .auth-card{backdrop-filter:blur(6px) saturate(1.2); -webkit-backdrop-filter:blur(6px) saturate(1.2);}
@media (max-width:700px){.panel, .hero-item, .kpi-tile, .app-bar{backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}}
/* Text inside glass gets a soft dark halo so it stays crisp over bright parts of the scene */
/* no text shadows anywhere (Michael) */
a.share-btn, a.upload-submit, a.btn-ghost{text-decoration:none;}
.lang-switch button.has-tip{text-decoration:none;}
.share-card-frame, .share-card-frame *{text-shadow:none;}

/* ---------- Start view (account without bots) ---------- */
.start-panel .panel-head{margin-bottom:16px;}
.start-head{text-align:center; margin-bottom:26px;}
.start-mark{display:inline-block; width:54px; height:34px; margin-bottom:12px; filter:drop-shadow(0 0 10px rgba(52,211,153,.45));}
.start-mark svg{width:100%; height:100%; display:block;}
.start-intro h3{font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.02em; line-height:1.15; color:var(--ink); margin:0;}
.start-lead{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-soft); margin:0; line-height:1.55;}
.start-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.start-steps li{display:flex; gap:16px; align-items:flex-start; padding:14px 16px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);}
.start-num{flex:none; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--page); background:var(--good);}
.start-steps strong{display:block; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); margin-bottom:4px;}
.start-steps span:not(.start-num){font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-soft); line-height:1.5;}
.start-btn{display:flex; align-items:center; justify-content:center; gap:9px; width:auto; margin:24px auto 0; padding:13px 24px; font-size:12px;}

/* ---------- MT5 sync ---------- */
.sync-modal{width:min(94vw, 560px); gap:18px; max-height:92vh; overflow:auto;}
.sync-head{display:flex; align-items:center; justify-content:space-between;}
.sync-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; counter-reset:sync;}
.sync-steps li{display:flex; gap:14px; align-items:flex-start; padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);}
.sync-steps li::before{counter-increment:sync; content:counter(sync); flex:none; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:12px; color:var(--page); background:var(--good);}
.sync-steps li > div{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1;}
.sync-steps strong{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink);}
.sync-steps span{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-soft); line-height:1.5;}
.sync-dl{display:inline-flex; align-items:center; gap:9px; width:auto; align-self:flex-start; margin-top:6px; padding:10px 16px; text-decoration:none;}
.sync-url{display:flex; align-items:center; gap:8px; margin-top:6px;}
.sync-url code{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink); background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); border-radius:7px; padding:7px 10px; user-select:all;}
.sync-status{display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); padding-top:12px;}
.sync-status[hidden]{display:none;}
.sync-row{display:grid; grid-template-columns:14px 1fr auto auto; gap:10px; align-items:center; font-family:var(--font-mono); font-size:var(--fs-body); padding:6px 4px;}
.sync-row-name{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sync-row-login, .sync-row-time{color:var(--ink-muted); font-size:var(--fs-small);}
.sync-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-muted);}
.sync-rotate{background:none; border:0; color:var(--ink-muted); font-family:var(--font-mono); font-size:var(--fs-small); cursor:pointer; padding:4px 0; text-decoration:underline; text-underline-offset:3px;}
.sync-foot-right{display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.sync-pair{display:flex; gap:8px; align-items:center; margin-top:6px;}
.sync-fallback{display:flex; flex-direction:column; gap:2px; margin-top:8px;}
.sync-code{width:120px; font-family:var(--font-mono); font-size:15px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:8px 10px; border-radius:8px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.14); color:var(--ink);}
.sync-code:focus{border-color:var(--good); outline:none;}
.sync-pair-btn{display:inline-flex; align-items:center; gap:8px; width:auto; padding:9px 14px;}
.sync-rotate:hover{color:var(--ink);}
.sync-dot{display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; margin-left:2px; vertical-align:middle;}
.sync-dot.fresh{background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); animation:syncPulse 2.4s ease-in-out infinite;}
.sync-dot.stale{background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.22);}
@keyframes syncPulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent);} 50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--good) 10%, transparent);}}
.start-actions{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; flex-wrap:wrap;}
.start-actions .start-btn{margin:0;}
.start-alt{background:none; border:0; color:var(--ink-muted); font-family:var(--font-mono); font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.06em; cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
.start-alt:hover{color:var(--ink);}

/* ---------- Cash flows (deposits / withdrawals) ---------- */
.flow-badge{display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:3px 8px; border-radius:6px; color:#8fb3ff; background:rgba(79,143,247,.14); border:1px solid rgba(79,143,247,.35); white-space:nowrap;}
.flow-badge.out{color:#f8c471; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35);}
.trade-row.flow-row{background:rgba(79,143,247,.05);}
.trade-row.flow-row .trade-cell{color:var(--ink-soft);}
.trade-row.flow-row .flow-amt{color:#8fb3ff; font-weight:600;}
.trade-row.flow-row.out .flow-amt{color:#f8c471;}
.flow-marker rect{fill:#8fb3ff; stroke:rgba(10,18,34,.9); stroke-width:1.5;}
.flow-marker.out rect{fill:#f8c471;}
.flow-marker-label{font-family:var(--font-mono); font-size:10px; font-weight:700; fill:#8fb3ff; letter-spacing:.04em; paint-order:stroke; stroke:rgba(10,18,34,.85); stroke-width:3px;}
.flow-marker.out .flow-marker-label{fill:#f8c471;}

/* ---------- LIVE (open positions) ---------- */
.live-panel{border-color:color-mix(in srgb, var(--good) 38%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px color-mix(in srgb, var(--good) 14%, transparent), 0 30px 70px -40px color-mix(in srgb, var(--good) 45%, transparent); background:radial-gradient(620px 300px at 0% 0%, color-mix(in srgb, var(--good) 16%, transparent), transparent 70%), linear-gradient(165deg, rgba(22,40,74,.86) 0%, rgba(15,26,48,.88) 48%, rgba(10,18,34,.9) 100%);}
.live-panel .live-head{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:0;}
.live-head-left{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;}
.live-head-left .live-badge{align-self:center; position:relative; top:-1px;}
.live-count{font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink);}
.live-stamp{font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-muted); text-transform:uppercase; letter-spacing:.08em;}
.live-stale{font-family:var(--font-mono); font-size:var(--fs-small); color:var(--bad); text-transform:uppercase; letter-spacing:.08em;}
.live-stats{display:flex; gap:28px;}
.live-stat{display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
.live-stat-label{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);}
.live-stat-value{font-family:var(--font-mono); font-weight:600; font-size:var(--fs-num-sm); color:var(--ink); font-variant-numeric:tabular-nums;}
.live-stat-value.good{color:var(--good);} .live-stat-value.bad{color:var(--bad);} .live-stat-value.muted{color:var(--ink-muted);}
.live-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; margin-top:16px;}
.live-card{position:relative; overflow:hidden; border-radius:12px; padding:14px 16px 13px 19px; background:linear-gradient(90deg, color-mix(in srgb, var(--card-accent, var(--good)) 17%, transparent), transparent 46%), rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10); display:flex; flex-direction:column; gap:8px; transition:transform .15s ease, border-color .15s ease;}
.live-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--card-accent, var(--good));}
.live-badge.inactive{color:var(--ink-muted); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.05); box-shadow:none;}
.live-badge.inactive .live-dot{background:var(--ink-muted); box-shadow:none; animation:none;}
.live-panel.inactive{border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
.live-card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.2);}
.live-card-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.live-card-sym{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); letter-spacing:.01em;}
.live-card-pl{font-family:var(--font-mono); font-weight:600; font-size:var(--fs-num); line-height:1; font-variant-numeric:tabular-nums;}
.live-card.good .live-card-pl{color:var(--good);} .live-card.bad .live-card-pl{color:var(--bad);}
.live-card-meta{display:flex; gap:12px; flex-wrap:wrap; font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-muted);}
.live-card-bot{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.live-panel[hidden]{display:none;}
.live-head{margin-bottom:8px;}
.live-badge{display:inline-flex; align-items:center; font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.14em; color:var(--good); padding:5px 11px; border-radius:7px; border:1px solid color-mix(in srgb, var(--good) 50%, transparent); background:color-mix(in srgb, var(--good) 12%, transparent); box-shadow:0 0 18px -6px color-mix(in srgb, var(--good) 60%, transparent);}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); animation:syncPulse 2.4s ease-in-out infinite;}
.live-meta{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
.live-meta-item.good{color:var(--good);}
.live-meta-item.bad{color:var(--bad, #f87171);}
.live-empty{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-muted); padding:4px 0 2px;}
.live-grid{display:flex; flex-direction:column;}
.live-row{display:grid; grid-template-columns:minmax(90px,1fr) 90px 60px 110px 110px 110px; gap:12px; align-items:center; padding:9px 12px; font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink); border-radius:8px;}
.live-grid.has-bot .live-row{grid-template-columns:minmax(150px,1.3fr) minmax(90px,1fr) 90px 60px 110px 110px 110px;}
.live-row:not(.live-row-head):hover{background:rgba(255,255,255,.04);}
.live-row-head{font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); padding:0 12px 8px; border-bottom:1px solid var(--line-strong); border-radius:0;}
.live-row .r{text-align:right;}
.live-row .soft{color:var(--ink-soft);}
.live-row .good{color:var(--good);}
.live-row .bad{color:var(--bad, #f87171);}
.live-bot{display:flex; align-items:center; gap:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.live-sym{font-weight:600;}
.sync-scope-block{grid-column:1/-1; display:flex; flex-direction:column; gap:8px; padding:6px 0 10px 24px; transition:opacity .2s;}
.scope-editor{padding:2px 0 4px 0;}
.sync-date{width:118px; font-family:var(--font-mono); font-size:var(--fs-body); padding:6px 9px; border-radius:7px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.14); color:var(--ink);}
.sync-date:focus{border-color:var(--good); outline:none;}
.sync-date:disabled{opacity:.6;}
.settings-modal{width:min(94vw, 600px); gap:16px; max-height:92vh; overflow:auto;}
.settings-bot{display:flex; flex-direction:column; gap:10px;}
.settings-bot.bordered{border-top:1px solid var(--line); padding-top:14px;}
.settings-bot-head{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink);}
.settings-label{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); margin-top:2px;}
.sync-scope-block.busy{opacity:.5; pointer-events:none;}
.sync-from{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);}
.sync-from input[type="date"]{font-family:var(--font-mono); font-size:var(--fs-body); padding:5px 8px; border-radius:7px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.14); color:var(--ink); color-scheme:dark;}
.sync-from input[type="date"]:disabled{opacity:.6;}
.sync-from-hint{font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink-muted);}
.sync-checks{display:flex; flex-direction:column; gap:3px;}
.sync-check{display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-soft); cursor:pointer; padding:3px 0;}
.sync-check input{accent-color:var(--good); width:15px; height:15px; margin:0; cursor:pointer;}
.sync-check input:disabled{cursor:default;}
.sync-check-label{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sync-check-count{color:var(--ink-muted); font-size:var(--fs-small);}
.user-menu-item.danger, .user-menu-item.danger .ic{color:#f87171;}

/* ---------- language switch (login) ---------- */
.auth-card{position:relative;}
.lang-switch{display:inline-flex; gap:2px; align-items:center;}
.auth-card .lang-switch{position:absolute; top:12px; right:14px;}
.app-bar .lang-switch{margin:0 2px;}
.lang-switch button{font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.08em; padding:4px 7px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--ink-muted); cursor:pointer;}
.lang-switch button:hover{color:var(--ink);}
.lang-switch button.active{color:var(--ink); border-color:var(--line-strong);}

/* ---------- error panel ---------- */
.error-panel{max-width:640px; margin:24px auto 0; padding:26px 28px 22px; display:flex; flex-direction:column; gap:12px;}
.error-head{display:flex; align-items:center; gap:12px;}
.error-head .ic{width:22px; height:22px; color:var(--bad); flex:none;}
.error-head h2{font-size:17px;}
.error-detail{font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-muted); word-break:break-word; padding:8px 12px; border-radius:8px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08);}
.error-actions{display:flex; gap:10px; margin-top:4px;}

/* ---------- Tooltips (data-tip) ---------- */
.has-tip{cursor:help; text-decoration:underline dotted rgba(255,255,255,.38); text-underline-offset:3px; outline:none;}
.tip-box{position:fixed; z-index:80; max-width:270px; padding:9px 12px; border-radius:8px; background:#0b1426; border:1px solid rgba(255,255,255,.16); box-shadow:0 14px 34px rgba(0,0,0,.55); font-family:var(--font-mono); font-size:12px; line-height:1.45; color:var(--ink); text-transform:none; letter-spacing:0; pointer-events:none; opacity:0; transition:opacity .12s ease;}
.tip-box.show{opacity:1;}

/* ---------- Masthead ---------- */
.masthead{margin-bottom:var(--gap); padding:18px 22px 16px; border-radius:var(--radius); background:radial-gradient(560px 340px at 6% 0%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%), linear-gradient(165deg, rgba(22,40,74,.84) 0%, rgba(15,26,48,.86) 48%, rgba(10,18,34,.88) 100%); border:1px solid rgba(255,255,255,.10);  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -36px rgba(0,0,0,.85);}
@media (max-width:700px){.masthead{ padding:14px 16px 12px;}}
.masthead-top{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:14px;}
.masthead-heading{display:flex; flex-direction:column; gap:6px;}
.eyebrow{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); margin:0;}
.back-link{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-muted); text-decoration:none; display:inline-flex; align-items:center; gap:5px; transition:color .12s ease;}
.back-link:hover{color:var(--ink);}
.account-name{font-family:var(--font-display); font-weight:600; font-size:var(--fs-title); letter-spacing:-.015em; line-height:1.1; margin:0;}

/* ---------- Nav tabs (Portfolio / AX ORB / AX Daily Pro) ---------- */
.nav-tabs{display:flex; align-items:center; gap:2px;}
.nav-tab{display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12.5px; font-weight:500; padding:7px 12px; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--ink-soft); text-decoration:none; white-space:nowrap; transition:background .15s ease, color .15s ease;}
.nav-tab:hover{color:var(--ink); background:rgba(157,180,208,.08);}
.nav-tab.active{color:var(--ink); background:rgba(157,180,208,.14);}
.nav-tab-dot{width:7px; height:7px; border-radius:50%; flex:none; display:inline-block;}
.nav-tab-wrap{display:flex; align-items:center; border-radius:var(--radius-pill);}
.nav-tab-wrap:hover{background:rgba(157,180,208,.08);}
.nav-tab-wrap:hover .nav-tab{background:transparent;}
.nav-tab-wrap .nav-tab.active{background:transparent;}
.nav-tab-wrap:has(.nav-tab.active){background:rgba(157,180,208,.14);}
.nav-tab-actions{display:flex; align-items:center; gap:1px; max-width:0; overflow:hidden; opacity:0; transition:max-width .18s ease, opacity .15s ease, padding .18s ease;}
.nav-tab-wrap:hover .nav-tab-actions, .nav-tab-wrap:focus-within .nav-tab-actions{max-width:64px; opacity:1; padding-right:6px;}
.nav-tab-act{width:24px; height:24px; border-radius:50%; border:0; background:transparent; color:var(--ink-muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; flex:none;}
.nav-tab-act .ic{width:13px; height:13px; margin:0;}
.nav-tab-act:hover{color:var(--ink); background:rgba(255,255,255,.10);}
.nav-tab-act.danger:hover{color:#f87171; background:rgba(248,113,113,.14);}

/* ---------- Live indicator (gentle pulse next to "Live-Konto") ---------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes livePulse{
    0%{box-shadow:0 0 0 0 var(--brand-wash);}
    70%{box-shadow:0 0 0 6px transparent;}
    100%{box-shadow:0 0 0 0 transparent;}
  }
  .live-dot{animation:livePulse 2.2s cubic-bezier(.4,0,.6,1) infinite;}
}
.live-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--brand); margin-right:7px; vertical-align:middle;}

.masthead-bottom{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12);}
.masthead-meta{display:flex; flex-wrap:wrap; gap:10px; margin:0;}
.masthead-meta > div{display:flex; flex-direction:column; gap:4px; min-width:170px; padding:9px 13px 10px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.masthead-meta dt{display:flex; align-items:center; gap:7px; margin:0; font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);}
.masthead-meta dd{margin:0; font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink);}
.meta-dot{width:7px; height:7px; border-radius:50%; flex:none; display:inline-block;}
.masthead-meta dd:has(.meta-row){display:flex; flex-direction:column; gap:3px; margin-top:2px;}
.meta-row{display:flex; align-items:baseline; gap:12px;}
.meta-v{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink);}
@media (max-width:520px){.masthead-meta > div{min-width:0; flex:1 1 100%;}}

/* ---------- Bots table (portfolio overview masthead) ---------- */
.bots-scroll{overflow-x:auto;}
.bots-grid{display:grid; grid-template-columns:minmax(210px,1.5fr) minmax(130px,1.1fr) 96px 120px 160px 120px 140px; gap:14px; align-items:center; padding:9px 12px;}
@media (max-width:900px){.bots-grid{min-width:820px;}}
.bots-grid-head{padding:0 12px 9px; border-bottom:1px solid var(--line-strong);}
.bots-grid-head > div{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);}
.bots-grid-head > div.r, .bots-cell.r{text-align:right;}
.bots-row{border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s ease;}
.bots-row:last-child{border-bottom:none;}
.bots-row:hover{background:rgba(157,180,208,.07);}
.bots-cell{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; font-variant-numeric:tabular-nums;}
.bots-cell.soft{color:var(--ink-soft);}
.bots-cell.good{color:var(--good);} .bots-cell.bad{color:var(--bad);}
.bots-name{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:13.5px; min-width:0;}
.bots-name .bots-name-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nav-tab{max-width:260px;}
.nav-tab-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.bots-spark{height:28px;}
.bots-spark svg{width:100%; height:100%; display:block; overflow:visible;}
.bots-panel{max-width:100%; overflow-x:auto;}
.bots-table{border-collapse:collapse;}
.bots-table th{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); text-align:left; padding:8px 40px 8px 0; border-bottom:1px solid var(--line); white-space:nowrap;}
.bots-table td{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); padding:10px 40px 10px 0; border-top:1px solid var(--line); white-space:nowrap;}
.bots-table tbody tr:first-child td{border-top:none;}
.bots-table .bot-name{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--ink);}
.bots-table .bot-dot{width:8px; height:8px; border-radius:50%; flex:none;}

/* ---------- Toolbar: currency + share ---------- */
.toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.toggle-group{display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid rgba(255,255,255,.10); border-radius:var(--radius-pill); background:rgba(14,23,40,.9); }
.toggle-group button{border:none; background:transparent; color:var(--ink-muted); font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:5px 13px; border-radius:var(--radius-pill); cursor:pointer; transition:background .18s ease, color .18s ease, box-shadow .18s ease;}
.toggle-group button.active{background:linear-gradient(155deg, var(--ink), color-mix(in srgb, var(--ink) 82%, var(--brand))); color:var(--page); box-shadow:0 2px 10px -2px rgba(0,0,0,.4);}
.toggle-group button:hover:not(.active){color:var(--ink);}
.share-btn{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); background:rgba(14,23,40,.9);  border:1px solid rgba(255,255,255,.10); border-radius:var(--radius-pill); padding:8px 14px; cursor:pointer; transition:border-color .18s ease, color .18s ease, transform .18s cubic-bezier(.16,.8,.3,1), box-shadow .18s ease;}
.share-btn:hover{border-color:var(--line-strong); color:var(--ink); transform:translateY(-1px); box-shadow:0 8px 20px -10px rgba(0,0,0,.5);}
.share-btn:active{transform:translateY(0);}

/* ---------- Hero stats ---------- */
.hero-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px;}
.hero-item{background:radial-gradient(280px 170px at 0% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%), linear-gradient(165deg, rgba(22,40,74,.84) 0%, rgba(15,26,48,.86) 55%, rgba(10,18,34,.88) 100%); border:1px solid rgba(255,255,255,.10);  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 44px -30px rgba(0,0,0,.8); border-radius:var(--radius); padding:18px 20px; display:flex; flex-direction:column; gap:8px; min-width:0; transition:transform .22s cubic-bezier(.16,.8,.3,1), box-shadow .22s ease, border-color .22s ease;}
.hero-item:hover{transform:translateY(-2px); box-shadow:0 14px 32px -14px rgba(0,0,0,.55); border-color:var(--line-strong);}
.hero-label{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);}
.hero-value{font-family:var(--font-mono); font-weight:500; font-size:var(--fs-num); letter-spacing:-.02em; line-height:1.1; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink); display:flex; align-items:baseline; gap:6px;}
.hero-value .unit{font-size:var(--fs-small); font-weight:400; color:var(--ink-muted);}
.hero-value.good{color:var(--good);} .hero-value.bad{color:var(--bad);}
@media (max-width:820px){.hero-stats{grid-template-columns:repeat(2,1fr);}}
.hero-stats.five{grid-template-columns:repeat(5,1fr);}
@media (max-width:1100px){.hero-stats.five{grid-template-columns:repeat(3,1fr);}}
@media (max-width:820px){.hero-stats.five{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.hero-stats.five{grid-template-columns:1fr;}}
.hero-value.text{font-size:15px; font-weight:500; white-space:normal; line-height:1.3;}
@media (max-width:480px){.hero-stats{grid-template-columns:1fr;}}

/* ---------- KPI strip ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:12px;}
.kpi-tile{background:radial-gradient(280px 170px at 0% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%), linear-gradient(165deg, rgba(22,40,74,.84) 0%, rgba(15,26,48,.86) 55%, rgba(10,18,34,.88) 100%); border:1px solid rgba(255,255,255,.10);  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 44px -30px rgba(0,0,0,.8); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:8px; min-width:0; transition:transform .22s cubic-bezier(.16,.8,.3,1), box-shadow .22s ease, border-color .22s ease;}
.kpi-tile:hover{transform:translateY(-2px); box-shadow:0 14px 32px -14px rgba(0,0,0,.55); border-color:var(--line-strong);}
.kpi-label{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);}
.kpi-value{font-family:var(--font-mono); font-weight:500; font-size:var(--fs-num-sm); letter-spacing:-.015em; line-height:1; display:flex; align-items:baseline; gap:5px; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink);}
.kpi-value .unit{font-size:var(--fs-small); font-weight:400; color:var(--ink-muted);}
.kpi-value.good{color:var(--good);} .kpi-value.bad{color:var(--bad);}
/* Icon chip + label row at the top of every number tile */
.tile-head{display:flex; align-items:center; gap:9px; min-width:0;}
.tile-icon{width:26px; height:26px; border-radius:8px; flex:none; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft); background:rgba(157,180,208,.10); border:1px solid rgba(255,255,255,.10);}
.tile-icon .ic{width:14px; height:14px;}
.tile-icon.good{color:var(--good); background:var(--good-wash); border-color:rgba(52,211,153,.26);}
.tile-icon.bad{color:var(--bad); background:var(--bad-wash); border-color:rgba(248,113,113,.26);}
.tile-icon.amber{color:#e3a83c; background:rgba(227,168,60,.14); border-color:rgba(227,168,60,.32);}
.tile-icon.blue{color:#4f8ff7; background:rgba(79,143,247,.14); border-color:rgba(79,143,247,.32);}
.tile-icon.violet{color:#9085e9; background:rgba(144,133,233,.14); border-color:rgba(144,133,233,.32);}
.tile-icon.teal{color:#2dd4bf; background:rgba(45,212,191,.13); border-color:rgba(45,212,191,.3);}
.tile-icon.magenta{color:#d55181; background:rgba(213,81,129,.14); border-color:rgba(213,81,129,.32);}
.tile-icon.accent{color:var(--brand); background:var(--brand-wash); border-color:color-mix(in srgb, var(--brand) 30%, transparent);}
@media (max-width:980px){.kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.kpi-grid{grid-template-columns:1fr;}}

/* ---------- Panels (shared card shell) ---------- */
.panel{position:relative; background:radial-gradient(560px 340px at 6% 0%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%), linear-gradient(165deg, rgba(22,40,74,.84) 0%, rgba(15,26,48,.86) 48%, rgba(10,18,34,.88) 100%); border:1px solid rgba(255,255,255,.10);  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -36px rgba(0,0,0,.85); border-radius:var(--radius); padding:var(--card-pad); transition:border-color .22s ease;}
.panel:hover{border-color:var(--line-strong);}

.panel-head{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; flex-wrap:wrap;}
.panel h2{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); display:flex; align-items:center; gap:8px;}
.panel-sub{font-size:11px; color:var(--ink-muted); margin:0 0 12px; font-family:var(--font-mono);}
.full-width{margin-bottom:var(--gap);}

/* ---------- Charts (shared chrome) ---------- */
.chart-wrap{position:relative;}
svg.chart{width:100%; height:auto; display:block; overflow:visible;}
.chart-tall{height:clamp(210px, 26vw, 330px);}
.chart-short{flex:1; min-height:0; height:auto;}
.tick-label{font-family:var(--font-mono); font-size:var(--fs-small); fill:var(--ink-muted);}
.grid-line{stroke:var(--line); stroke-width:1;}
.baseline{stroke:var(--line-strong); stroke-width:1;}
.chart-tooltip{position:absolute; pointer-events:none; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:9px 11px; box-shadow:0 6px 18px var(--shadow); font-size:12px; opacity:0; transform:translateY(2px); transition:opacity .08s ease; z-index:5; white-space:nowrap;}
.chart-tooltip.show{opacity:1; transform:translateY(0);}
.chart-tooltip .tt-date{font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-muted); margin-bottom:5px;}
.chart-tooltip .tt-row{display:flex; align-items:center; gap:10px; justify-content:space-between; padding:2px 0;}
.chart-tooltip .tt-key{display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:var(--fs-body);}
.chart-tooltip .tt-key .tt-swatch{width:10px; height:2px; border-radius:1px; flex:none;}
.chart-tooltip .tt-val{font-family:var(--font-mono); font-weight:600; font-size:12px;}
.chart-legend{display:flex; gap:20px; flex-wrap:wrap; margin:2px 0 14px;}
.legend-item{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-soft);}
.legend-swatch{width:14px; height:2px; border-radius:1px; flex:none;}

/* ---------- Breakdown grid (3-pack) ---------- */
.breakdown-grid{display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:var(--gap); margin-bottom:var(--gap);}
@media (max-width:980px){.breakdown-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.breakdown-grid{grid-template-columns:1fr;}}
.breakdown-grid > .panel{display:flex; flex-direction:column;}
.breakdown-grid > .panel > .bw-list{flex:1;}
.breakdown-grid > .panel > svg.chart{flex:1; min-height:250px; height:auto;}

/* ---------- Best/worst list ---------- */
.bw-list{display:grid; grid-template-columns:1fr 1fr; gap:0 44px;}
.bw-col + .bw-col{position:relative;}
.bw-col + .bw-col::before{content:""; position:absolute; top:0; bottom:0; left:-22px; width:1px; background:rgba(255,255,255,.12);}
.bw-section-label.good{color:var(--good);} .bw-section-label.bad{color:var(--bad);}
.bw-col{display:flex; flex-direction:column; gap:0; min-width:0;}
.bw-section-label{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); margin:14px 0 6px;}
.bw-section-label:first-child{margin-top:0;}
@media (max-width:560px){.bw-list{grid-template-columns:1fr;}}
.bw-row{display:grid; grid-template-columns:84px minmax(70px,1fr) 64px 84px 52px; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line);}
.bw-row:last-child{border-bottom:none;}
.bw-head{display:grid; grid-template-columns:84px minmax(70px,1fr) 64px 84px 52px; gap:10px; padding:0 0 8px; border-bottom:1px solid var(--line-strong);}
.bw-head > span{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);}
.bw-head > span.r, .bw-row > .r{text-align:right;}
.bw-head.has-bot, .bw-row.has-bot{grid-template-columns:84px minmax(70px,1fr) minmax(110px,1.2fr) 64px 84px 52px;}
.bw-row .bw-r{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-soft);}
.bw-row .bw-sym{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink);}
.bw-row .bw-date{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-soft);}
.bw-row .bw-val{font-family:var(--font-mono); font-weight:600; font-size:var(--fs-body);}

/* ---------- Nach Symbol ---------- */
.symbol-panel .sym-rows{margin-top:8px; display:flex; flex-direction:column; gap:4px;}
.sym-row{display:flex; flex-direction:column; gap:6px; padding:8px 0; border-bottom:1px solid var(--line);}
.sym-row-foot{display:flex; align-items:center; gap:12px;}
.sym-row-foot .sym-track{flex:1;}
.sym-row:last-child{border-bottom:none;}
.sym-row-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.sym-row-id{display:flex; align-items:center; gap:9px;}
.sym-dot{width:7px; height:7px; border-radius:50%; flex:none;}
.sym-name{font-family:var(--font-mono); font-size:12px; color:var(--ink);}
.sym-track{position:relative; height:6px; background:rgba(255,255,255,.05); border-radius:3px; overflow:visible;}
.sym-zero{position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(255,255,255,.14);}
.sym-fill{position:absolute; top:0; height:6px; border-radius:3px; min-width:3px;}
.sym-net{font-weight:500; font-size:13px; font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.sym-meta{font-size:var(--fs-small); color:var(--ink-muted); font-family:var(--font-mono); white-space:nowrap; flex:none;}
/* stats only on hover (always visible where there is no hover) */
.sym-row .sym-meta{opacity:0; transition:opacity .15s ease;}
.sym-row:hover .sym-meta{opacity:1;}
@media (hover:none){.sym-row .sym-meta{opacity:1;}}
/* compact symbol bars */
.symx-row{display:grid; grid-template-columns:96px 1fr 84px; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); cursor:default;}
.symx-row:last-child{border-bottom:0;}
.symx-row:hover{background:rgba(255,255,255,.03);}
.symx-id{display:flex; align-items:center; gap:8px; min-width:0;}
.symx-name{font-family:var(--font-mono); font-size:12px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.symx-track{position:relative; height:10px; border-radius:5px; background:rgba(255,255,255,.06);}
.symx-zero{position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:rgba(255,255,255,.22);}
.symx-fill{position:absolute; top:0; bottom:0; opacity:.92;}
.symx-fill.pos{left:50%; border-radius:0 5px 5px 0;}
.symx-fill.neg{right:50%; border-radius:5px 0 0 5px;}
.symx-net{text-align:right; font-family:var(--font-mono); font-size:12.5px; font-variant-numeric:tabular-nums;}
.symx-net.good{color:var(--good);}
.symx-net.bad{color:var(--bad);}
/* bot colour palette */
.color-palette{display:flex; gap:8px; flex-wrap:wrap; padding:2px 0;}
.color-swatch{width:24px; height:24px; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); transition:transform .12s ease;}
.color-swatch:hover{transform:scale(1.12);}
.color-swatch.active{border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25);}
.color-swatch.auto{background-image:linear-gradient(135deg, transparent 46%, rgba(255,255,255,.85) 46%, rgba(255,255,255,.85) 54%, transparent 54%);}
/* legacy row layout kept for narrow breakdown-panel width (used inside the 3-col grid) */
.sym-row-id{flex:none;}

/* ---------- Trade table (CSS-grid rows, matches the redesign's fixed column template) ---------- */
.trades-panel{margin-bottom:20px;}
.controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; margin-bottom:12px;}
.chip-row{display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface-2);}
.chip{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:5px 12px; border-radius:var(--radius-pill); border:0; background:transparent; color:var(--ink-muted); cursor:pointer; transition:background .15s ease, color .15s ease;}
.chip.active{background:linear-gradient(155deg, var(--ink), color-mix(in srgb, var(--ink) 82%, var(--brand))); color:var(--page);}
.search-input{font-family:var(--font-mono); font-size:var(--fs-body); padding:8px 13px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--surface-2); color:var(--ink); width:210px; outline:none; transition:border-color .15s ease, box-shadow .15s ease;}
.search-input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash);}
.search-input::placeholder{color:var(--ink-muted);}
.trade-count{font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-muted);}
/* The grid's fixed column widths add up wider than a phone screen - without this,
   the header row (which sits outside .table-scroll, so it stays put while the
   body scrolls vertically) overflows the page itself instead of just this table,
   dragging the WHOLE page sideways on mobile. One shared horizontal scrollbar
   for header+body keeps their columns aligned no matter how far it's scrolled. */
.trades-scroll-x{overflow-x:auto; margin-top:14px;}
.table-scroll{max-height:460px; overflow-y:auto; overflow-x:visible;}
.trade-grid{--trade-cols:124px 124px minmax(96px,1fr) 76px 54px 88px 88px 76px 84px 46px; display:grid; grid-template-columns:var(--trade-cols); gap:10px; padding:10px 12px; align-items:center;}
.trade-grid.has-bot{--trade-cols:140px 124px 124px minmax(96px,1fr) 76px 54px 88px 88px 76px 84px 46px;}
.trade-grid-head{padding:0 12px 10px; border-bottom:1px solid var(--line-strong);}
.day-modal-table-scroll .trade-grid-head{position:sticky; top:0; background:var(--surface); z-index:1;}
.trade-grid-head > div{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);}
.trade-grid-head > div.r, .trade-grid > div.r{text-align:right;}
.trade-row{border-bottom:1px solid var(--line); transition:background .1s;}
.trade-row:hover{background:var(--surface-2);}
.trade-row:last-child{border-bottom:none;}
.trade-cell{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums; min-width:0;}
.trade-cell.soft{overflow:hidden; text-overflow:ellipsis;}
.trade-cell.strong{color:var(--ink);}
.trade-cell.net.good{color:var(--good); font-weight:500;} .trade-cell.net.bad{color:var(--bad); font-weight:500;}
.sym-chip{display:inline-flex; align-items:center; gap:8px;}
.sym-chip .sym-dot{width:6px; height:6px;}
.type-badge{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-soft);}
.dir-badge{display:inline-flex; align-items:center; justify-content:center; min-width:54px; padding:3px 10px; border-radius:6px; font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; letter-spacing:.04em; border:1px solid transparent;}
.dir-badge.long{color:var(--good); background:rgba(52,211,153,.16); border-color:rgba(52,211,153,.35);}
.dir-badge.short{color:var(--bad); background:rgba(248,113,113,.16); border-color:rgba(248,113,113,.35);}
.panel-total{font-family:var(--font-mono); font-size:var(--fs-body); font-weight:600; padding:6px 12px; border-radius:var(--radius-pill); border:1px solid var(--line); color:var(--ink);}
.panel-total.good{color:var(--good); background:var(--good-wash); border-color:rgba(52,211,153,.3);}
.panel-total.bad{color:var(--bad); background:var(--bad-wash); border-color:rgba(248,113,113,.3);}

/* ---------- Daily calendar ---------- */
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap;}
.cal-head-left{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.cal-nav-group{display:flex; align-items:center; gap:4px;}
.cal-nav{width:28px; height:28px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft); font-size:12px; line-height:26px; text-align:center; cursor:pointer; flex:none; transition:border-color .12s ease, color .12s ease;}
.cal-nav:hover{border-color:var(--line-strong); color:var(--ink);}
.cal-month-label{font-family:var(--font-display); font-weight:600; font-size:15px; min-width:150px; text-align:center; color:var(--ink);}
.cal-month-total{font-family:var(--font-mono); font-size:var(--fs-body); font-weight:500; color:var(--ink-soft); padding:5px 11px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--line);}
.cal-month-total.good{color:var(--good); border-color:rgba(52,211,153,.28); background:var(--good-wash);}
.cal-month-total.bad{color:var(--bad); border-color:rgba(248,113,113,.28); background:var(--bad-wash);}
.cal-last-btn{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill); padding:7px 13px; cursor:pointer; transition:border-color .12s ease, color .12s ease;}
.cal-last-btn:hover{border-color:var(--line-strong); color:var(--ink);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr) 1.15fr; gap:6px;}
.cal-dow{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); padding:0 2px 2px;}
.cal-cell{background:rgba(14,23,40,.9); border:1px solid var(--line); border-radius:var(--radius-sm); min-height:76px; padding:8px 10px; display:flex; flex-direction:column; gap:4px; transition:border-color .12s ease;}
.cal-cell.has-data{cursor:pointer;}
.cal-cell.has-data:hover{border-color:var(--line-strong);}
.cal-cell.good-1{background:color-mix(in srgb, var(--good) 8%, var(--surface));}
.cal-cell.good-2{background:color-mix(in srgb, var(--good) 16%, var(--surface));}
.cal-cell.good-3{background:color-mix(in srgb, var(--good) 28%, var(--surface));}
.cal-cell.bad-1{background:color-mix(in srgb, var(--bad) 8%, var(--surface));}
.cal-cell.bad-2{background:color-mix(in srgb, var(--bad) 16%, var(--surface));}
.cal-cell.bad-3{background:color-mix(in srgb, var(--bad) 28%, var(--surface));}
.cal-daynum{font-size:11px; color:var(--ink-muted); font-family:var(--font-mono);}
.cal-net{font-family:var(--font-mono); font-weight:500; font-size:12px; font-variant-numeric:tabular-nums;}
.cal-cell[class*="good-"] .cal-net, .cal-week.good .cal-net{color:var(--good);}
.cal-cell[class*="bad-"] .cal-net, .cal-week.bad .cal-net{color:var(--bad);}
.cal-trades{font-size:var(--fs-small); color:var(--ink-muted); font-family:var(--font-mono);}
.cal-week{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); min-height:76px; padding:8px 10px; display:flex; flex-direction:column; gap:4px;}
.cal-week.good{background:var(--good-wash); border-color:rgba(52,211,153,.2);} .cal-week.bad{background:var(--bad-wash); border-color:rgba(248,113,113,.2);}
.cal-week.has-data{cursor:pointer; transition:border-color .12s ease;}
.cal-week.has-data:hover{border-color:var(--line-strong);}
.cal-head-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.day-modal-share{margin-right:40px; align-self:flex-start;}
.cal-week-label{font-size:var(--fs-small); color:var(--ink-muted); font-family:var(--font-mono);}
.cal-week .cal-net{font-size:12px;}
@media (max-width:700px){
  .cal-cell, .cal-week{min-height:56px; padding:5px 4px; gap:1px;}
  .cal-net{font-size:11px;} .cal-daynum{font-size:9px;} .cal-trades{font-size:9px;}
  .cal-dow{padding:5px 3px; font-size:8.5px;}
}
@media (max-width:520px){
  .cal-week, .cal-dow:last-child{display:none;}
  .cal-grid{grid-template-columns:repeat(7,1fr);}
}

/* ---------- Day-detail modal ---------- */
.day-modal{width:min(96vw, 1120px); max-height:82vh; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); padding:24px; position:relative; box-shadow:0 24px 64px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:18px;}
.day-modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px;}
.day-modal-headtext{display:flex; flex-direction:column; gap:10px;}
.day-modal-date{font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--ink);}
.day-modal-badges{display:flex; gap:8px; flex-wrap:wrap;}
.day-modal-badge{font-family:var(--font-mono); font-size:var(--fs-body); font-weight:500; padding:5px 11px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--line); color:var(--ink); align-self:flex-start;}
.day-modal-badge.good{color:var(--good); border-color:rgba(52,211,153,.28); background:var(--good-wash);}
.day-modal-badge.bad{color:var(--bad); border-color:rgba(248,113,113,.28); background:var(--bad-wash);}
.day-modal-table-scroll{overflow-y:auto; overflow-x:hidden; max-height:340px;}
/* the day modal is narrower than the page: flexible columns, never a horizontal scrollbar */
.day-modal .trade-grid{--trade-cols:120px 120px minmax(84px,1fr) 70px 50px 78px 78px 70px 76px 40px; gap:8px; padding-left:8px; padding-right:8px;}
.day-modal .trade-grid.has-bot{--trade-cols:minmax(100px,1fr) 120px 120px minmax(80px,1fr) 70px 50px 78px 78px 70px 76px 40px;}
.day-modal .trade-grid-head{padding-left:8px; padding-right:8px;}
.day-modal-bot{display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; font-weight:500; font-size:11px; line-height:1.3; padding:4px 9px; border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap;}

/* ---------- Portfolio cards (overview) ---------- */
.portfolio-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--gap); margin-bottom:var(--gap);}
@media (max-width:760px){.portfolio-grid{grid-template-columns:1fr;}}
.portfolio-card{--accent:var(--brand); position:relative; background:radial-gradient(560px 220px at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), radial-gradient(280px 170px at 0% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%), linear-gradient(165deg, rgba(22,40,74,.84) 0%, rgba(15,26,48,.86) 55%, rgba(10,18,34,.88) 100%); border:1px solid rgba(255,255,255,.10);  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -36px rgba(0,0,0,.85); border-radius:var(--radius); padding:14px 16px 13px; display:flex; flex-direction:column; gap:10px; transition:transform .22s cubic-bezier(.16,.8,.3,1), box-shadow .22s ease, border-color .22s ease;}
.portfolio-card.clickable{cursor:pointer;}
.portfolio-card:hover{transform:translateY(-3px); box-shadow:0 18px 40px -16px rgba(0,0,0,.6); border-color:var(--line-strong);}
.portfolio-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.portfolio-card-headtext{display:flex; flex-direction:column; gap:5px;}
.portfolio-card-name{display:flex; align-items:center; gap:9px;}
.portfolio-dot{width:8px; height:8px; border-radius:50%; flex:none;}
.portfolio-card-head h3{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink);}
.portfolio-meta{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-muted);}
.portfolio-badge{font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.09em; padding:4px 9px; border-radius:var(--radius-pill); border:1px solid; flex:none;}
.portfolio-spark{height:44px; margin:-2px 0 -4px;}
.portfolio-spark svg{width:100%; height:100%; display:block; overflow:visible;}
.portfolio-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:8px 10px;}
.portfolio-kpi-label{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); margin-bottom:4px;}
.portfolio-kpi-value{font-family:var(--font-mono); font-weight:500; font-size:14px; font-variant-numeric:tabular-nums; color:var(--ink);}
.portfolio-kpi-value.good{color:var(--good);} .portfolio-kpi-value.bad{color:var(--bad);}
.portfolio-symbols{display:flex; gap:14px; padding-top:2px; flex-wrap:wrap;}
.portfolio-symbol{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-soft);}
.portfolio-link{display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); text-decoration:none; padding:11px; border-radius:var(--radius-sm); background:transparent; border:1px solid var(--line); transition:border-color .12s ease, color .12s ease;}
.portfolio-link:hover{border-color:var(--line-strong); color:var(--ink);}
.portfolio-link .arrow{transition:transform .12s ease;}
.portfolio-link:hover .arrow{transform:translateX(3px);}

/* ---------- Share overlay ---------- */
.share-overlay{position:fixed; inset:0; background:rgba(4,8,16,.74); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50; opacity:0; pointer-events:none; transition:opacity .15s ease;}
.share-overlay.open{opacity:1; pointer-events:auto;}
#shareOverlay{z-index:60;}
/* ---------- Upload modal + generic form controls ---------- */
.upload-modal{width:min(92vw, 460px); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); padding:26px 26px 22px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:14px;}
.upload-modal-title{font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink);}
.form-field{display:flex; flex-direction:column; gap:6px;}
.form-field label{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft);}
.form-field select, .form-field input[type="text"], .form-field input[type="file"]{font-family:var(--font-mono); font-size:var(--fs-body); padding:9px 11px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); outline:none; width:100%;}
.form-field select:focus, .form-field input:focus{border-color:var(--line-strong);}
.radio-group{display:flex; flex-direction:column; gap:8px;}
.radio-option{display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--ink); cursor:pointer;}
.radio-option input{margin-top:2px;}
.radio-option .radio-desc{display:block; font-size:11px; color:var(--ink-muted); margin-top:1px;}
.upload-submit{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:11px; border-radius:8px; border:0; background:linear-gradient(155deg, var(--ink), color-mix(in srgb, var(--ink) 82%, var(--brand))); color:var(--page); cursor:pointer; transition:transform .18s cubic-bezier(.16,.8,.3,1), box-shadow .18s ease;}
.upload-submit:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(0,0,0,.5);}
.upload-submit:active:not(:disabled){transform:translateY(0);}
.upload-submit:disabled{opacity:.6; cursor:default;}
.upload-status{font-size:12px; min-height:1em;}
.upload-status.err{color:var(--bad);}
.upload-status.ok{color:var(--good);}
.user-email{font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); align-self:center; margin-right:2px;}

/* ---------- User menu ---------- */
.user-menu-wrap{position:relative;}
.user-menu-dropdown{position:absolute; top:calc(100% + 6px); right:0; min-width:220px; background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.45); padding:6px; z-index:40; display:flex; flex-direction:column; gap:2px;}
.user-menu-dropdown[hidden]{display:none;}
.user-menu-email{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); padding:8px 10px 6px; border-bottom:1px solid var(--line); margin-bottom:4px; word-break:break-all; text-transform:none; letter-spacing:0;}
.user-menu-item{display:flex; align-items:center; gap:11px; font-family:var(--font-mono); font-size:var(--fs-body); text-align:left; padding:9px 10px; border-radius:7px; border:0; background:none; color:var(--ink); cursor:pointer;}
.user-menu-item .ic{width:15px; height:15px; color:var(--ink-soft);}
.user-menu-item:hover{background:var(--surface-2);}
.modal-actions{display:flex; gap:10px; margin-top:2px;}
.modal-actions .upload-submit{flex:1;}
.btn-ghost{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:11px 16px; border-radius:8px; background:transparent; border:1px solid var(--line-strong); color:var(--ink-soft); cursor:pointer;}
.btn-ghost:hover{color:var(--ink); border-color:rgba(255,255,255,.3);}
.rename-btn{background:none; border:0; color:var(--ink-muted); cursor:pointer; font-size:13px; padding:2px 4px; margin-left:6px; vertical-align:middle;}
.rename-btn:hover{color:var(--ink);}
.rename-input{font-family:var(--font-display); font-weight:600; font-size:inherit; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:6px; color:var(--ink); padding:2px 8px;}
@media (max-width:1280px){.page{padding-left:20px; padding-right:20px;}}

/* ---------- Share card (rasterised by html2canvas - keep to rgba gradients, no color-mix/filters) ---------- */
.share-card-frame{width:min(92vw, 480px); padding:1px; border-radius:var(--radius); box-shadow:0 36px 90px -24px rgba(0,0,0,.78); transform:translateY(10px) scale(.985); transition:transform .3s cubic-bezier(.16,.8,.3,1);}
.share-overlay.open .share-card-frame{transform:none;}
.share-card{position:relative; overflow:hidden; border-radius:calc(var(--radius) - 1px); background-color:#0f1a2e; padding:30px 30px 20px;}
.share-card-close{position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft); cursor:pointer; font-size:14px; line-height:1; z-index:3;}
.share-card-close:hover{color:var(--ink);}
.share-card-eyebrow{position:relative; display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;}
.share-card-eyebrow-dot{width:6px; height:6px; border-radius:50%; flex:none;}
.share-card-title{font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-.02em; line-height:1.1; color:var(--ink); padding-right:36px;}
.share-card-bots{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.share-bot-chip{display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--ink);}
.share-bot-chip .dot{width:7px; height:7px; border-radius:50%; flex:none;}
.share-card-sub{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); margin-top:5px;}
.share-card-date{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); margin-top:3px; white-space:nowrap;}
.share-card-hero{position:relative; text-align:center; padding:26px 0 6px;}
.share-card-hero-glow{position:absolute; left:calc(50% - 200px); top:calc(50% - 120px); width:400px; height:240px; pointer-events:none;}
.share-card-spark-band{height:72px; margin:14px -30px 0;}
.share-card-spark{width:100%; height:100%; display:block; pointer-events:none;}
.share-card-hero-label{position:relative; font-family:var(--font-mono); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--ink); margin-bottom:12px;}
.share-card-hero-value{position:relative; font-family:var(--font-display); font-weight:700; font-size:66px; letter-spacing:-.03em; line-height:1; color:var(--ink);}
.share-card-hero-value.good{color:var(--good);} .share-card-hero-value.bad{color:var(--bad);}
.share-card-hero-sub{position:relative; font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); margin-top:12px;}
.share-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.10);}
.share-card-stat-label{font-family:var(--font-mono); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:6px;}
.share-card-stat-value{font-family:var(--font-mono); font-weight:600; font-size:16px; color:var(--ink);}
.share-card-stat-value.good{color:var(--good);} .share-card-stat-value.bad{color:var(--bad);}
.share-card-footer{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10);}
.share-card-brand{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:12.5px; letter-spacing:0; color:var(--ink);}
.share-card-brand-tld{color:var(--ink-muted); font-weight:500;}
.share-card-brand-mark{width:24px; height:15px; flex:none; display:inline-block;}
.share-card-footer-date{font-family:var(--font-mono); font-size:10px; color:var(--ink-muted);}
.share-card-actions{display:flex; gap:10px; margin-top:14px;}
.share-card-actions button{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:10px 8px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid var(--line); white-space:nowrap; transition:transform .18s cubic-bezier(.16,.8,.3,1), box-shadow .18s ease;}
.share-card-actions .ic{width:14px; height:14px;}
.share-card-actions button:hover{transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(0,0,0,.5);}
.share-card-actions .primary{color:var(--page); border-color:transparent;}
.share-card-actions .secondary{background:var(--surface-2); color:var(--ink);}

/* ---------- LIVE share buttons + live share cards ---------- */
.live-stats{align-items:center;}
.live-share{width:34px; height:34px; border-radius:50%; border:1px solid color-mix(in srgb, var(--good) 45%, transparent); background:color-mix(in srgb, var(--good) 12%, transparent); color:var(--good); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; margin-left:2px; transition:background .12s ease, transform .18s cubic-bezier(.16,.8,.3,1);}
.live-share .ic{width:15px; height:15px; transform:translateX(-1px);}
.live-share:hover{background:color-mix(in srgb, var(--good) 24%, transparent); transform:translateY(-1px);}
.live-panel.inactive .live-share{color:var(--ink-muted); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.05);}
.live-card-top-right{display:inline-flex; align-items:center; gap:8px;}
.live-card-share{width:24px; height:24px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--ink-soft); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; opacity:.6; transition:opacity .12s ease, color .12s ease, border-color .12s ease;}
.live-card-share .ic{width:12px; height:12px; transform:translateX(-.5px);}
.live-card:hover .live-card-share{opacity:1;}
.live-card-share:hover{color:var(--ink); border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.12);}
.share-card-pills{display:flex; gap:8px; margin-bottom:12px;}
.share-pill{display:inline-flex; align-items:center; font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.14em; padding:5px 11px; border-radius:7px; border:1px solid transparent;}
.share-card-rows{margin-top:18px; padding-top:4px; border-top:1px solid rgba(255,255,255,.10);}
.share-row{display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06);}
.share-row:last-child{border-bottom:0;}
.share-row-dot{width:8px; height:8px; border-radius:50%; flex:none;}
.share-row-sym{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); min-width:58px;}
.share-row .dir-badge{min-width:44px; padding:2px 7px; font-size:10px;}
.share-row-meta{flex:1; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.share-row-val{font-family:var(--font-mono); font-weight:600; font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.share-row-val.good{color:var(--good);} .share-row-val.bad{color:var(--bad);}
.share-rows-more{font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); padding-top:8px;}

/* ---------- empty dashboard ---------- */
.start-body{display:grid; grid-template-columns:minmax(250px, 1fr) 1.6fr; gap:28px; align-items:start;}
@media (max-width:900px){ .start-body{grid-template-columns:1fr;} }
.start-intro{display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:4px 6px 0 2px;}
.start-intro .start-mark{margin-bottom:0;}
.start-note{font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-muted); line-height:1.55; margin:0;}
.start-intro .start-alt{margin-top:4px; padding:0;}
.start-status{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted);}
.start-status-dot{width:8px; height:8px; border-radius:50%; background:var(--good); animation:startPulse 1.8s ease-out infinite;}
@keyframes startPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55);} 100%{box-shadow:0 0 0 9px rgba(52,211,153,0);}}
.start-panel .sync-steps{margin:0;}
.empty-hint{font-family:var(--font-mono); font-size:var(--fs-body); color:var(--ink-muted); text-align:center; padding:22px 0 8px;}
.hero-value.placeholder, .kpi-value.placeholder{color:var(--ink-muted);}
.tile-icon.placeholder{color:var(--ink-muted); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10);}