:root{
  /* ─── Mercury Vibrant — energetic light theme for trading (2026-05-09) ─── */
  --bg:#F8FAFC;            /* cool off-white, modern */
  --surface:#FFFFFF;
  --surface-2:#F1F5F9;     /* hover bg, secondary */
  --surface-3:#E2E8F0;     /* tertiary */
  --border:#E5E9F0;        /* cool light border */
  --border-soft:#F1F5F9;
  --text:#0F172A;          /* rich navy near-black */
  --text-2:#475569;
  --text-3:#94A3B8;
  --text-4:#CBD5E1;
  /* Accent — electric blue for actions / nav */
  --accent:#2563EB;
  --accent-2:#1E40AF;
  --accent-bright:#3B82F6;
  --accent-bg:#DBEAFE;
  /* Gain — vibrant emerald (energetic but not neon) */
  --gain:#10B981;
  --gain-bg:#D1FAE5;
  --gain-text:#047857;
  /* Loss — vivid red */
  --loss:#EF4444;
  --loss-bg:#FEE2E2;
  --loss-text:#B91C1C;
  /* Gold — signature warm accent (kept) */
  --gold:#D4A574;
  --gold-bg:#FEF3C7;
  --gold-text:#92400E;
  /* Warning + info */
  --warn-bg:#FEF3C7;
  --warn-text:#92400E;
  --info-bg:#DBEAFE;
  --info-text:#1E40AF;
  /* Shape + motion */
  --r-md:8px;
  --r-lg:12px;
  --r-xl:14px;
  --shadow-sm:0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:0 2px 8px rgba(15,23,42,0.06);
  --shadow-lg:0 8px 24px rgba(15,23,42,0.08);
  --font-sans:'Manrope Variable','Manrope',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono Variable','JetBrains Mono',ui-monospace,monospace;
}

/* ─── Light sidebar (force, in case any leftover dark CSS lingers) ─── */
body .t-side {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
body .t-section { color: var(--text-3); }
body .t-nav { color: var(--text-2); transition: background 0.15s, color 0.15s; }
body .t-nav.on {
  background: var(--gold-bg);
  color: var(--gold-text);
  border-left: 2px solid var(--gold);
  font-weight: 600;
}
body .t-nav:hover:not(.locked):not(.on) {
  background: var(--surface-2);
  color: var(--text);
}
body .t-mark-tx { color: var(--text); }
body .t-side-foot { border-top: 1px solid var(--border); }
body .t-side-name { color: var(--text); }
body .t-side-out { color: var(--text-3); }
body .t-side-out:hover { color: var(--accent); }
body .t-avatar {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* Card elevation polish */
.t-card,
.t-fc,
.t-summary-bar {
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
}
.t-fc:hover { box-shadow: var(--shadow-md); }

/* Big numbers feel premium */
.t-summary-pl,
.t-fc-num {
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  font-size:13.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01';
}

.t-mono{font-family:var(--font-mono);font-feature-settings:'tnum','zero';}

a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

.t-app{display:flex;min-height:100vh;}

.t-side{
  width:200px;background:var(--surface);border-right:1px solid var(--border);
  padding:14px 10px;display:flex;flex-direction:column;flex-shrink:0;
}
.t-mark{display:flex;align-items:center;gap:8px;padding:4px 8px;margin-bottom:18px;}
.t-mark-sq{width:18px;height:18px;border-radius:5px;background:var(--accent);position:relative;flex-shrink:0;}
.t-mark-sq::after{content:'';position:absolute;width:7px;height:7px;background:var(--gold);top:5px;left:5px;border-radius:1px;}
.t-mark-tx{font-size:13px;font-weight:600;letter-spacing:-0.01em;}

.t-section{
  font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-4);padding:0 8px;margin:14px 0 6px;
}
.t-section:first-of-type{margin-top:0;}

.t-nav{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;
  font-size:12.5px;font-weight:500;color:var(--text-2);letter-spacing:-0.005em;
  margin-bottom:1px;text-decoration:none;
}
.t-nav:hover{background:var(--border-soft);color:var(--text);text-decoration:none;}
.t-nav.on{background:var(--accent);color:#FAFAF7;}
.t-nav.on .t-ico{color:#FAFAF7;}
.t-nav.locked{color:var(--text-4);cursor:not-allowed;pointer-events:auto;}
.t-nav.locked:hover{background:transparent;color:var(--text-4);text-decoration:none;}
.t-ico{width:14px;height:14px;flex-shrink:0;color:var(--text-3);}
.t-locked{margin-left:auto;font-size:9px;background:var(--border-soft);color:var(--text-3);padding:2px 6px;border-radius:4px;font-weight:500;}

.t-side-foot{margin-top:auto;padding:10px 8px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.t-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#FAFAF7;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0;
}
.t-side-user{min-width:0;flex:1;}
.t-side-name{font-size:11px;font-weight:500;letter-spacing:-0.005em;}
.t-side-out{font-size:10px;color:var(--text-3);}

.t-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.t-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;border-bottom:1px solid var(--border);background:var(--surface);
}
.t-crumb{font-size:14px;font-weight:600;letter-spacing:-0.01em;}
.t-crumb-sub{font-size:11px;color:var(--text-3);margin-top:1px;}
.t-top-right{display:flex;align-items:center;gap:8px;}

.t-content{padding:22px;flex:1;}

.t-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;}
.t-card-lg{padding:20px;}
.t-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px;}
.t-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px;}
.t-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}

.t-h{font-size:14px;font-weight:600;letter-spacing:-0.01em;margin:0 0 6px;}
.t-h2{font-size:18px;font-weight:600;letter-spacing:-0.015em;margin:0 0 4px;}
.t-h3{font-size:22px;font-weight:600;letter-spacing:-0.02em;margin:0 0 6px;}
.t-label{font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-3);margin:0 0 6px;}
.t-val{font-size:20px;font-weight:600;letter-spacing:-0.02em;}
.t-val-lg{font-size:26px;letter-spacing:-0.025em;}
.t-sub{font-size:11px;color:var(--text-3);margin-top:2px;}
.t-up{color:var(--gain);}
.t-dn{color:var(--loss);}

.t-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:500;letter-spacing:0.02em;}
.t-pill-up{background:var(--gain-bg);color:var(--gain-text);}
.t-pill-dn{background:var(--loss-bg);color:var(--loss-text);}
.t-pill-gd{background:var(--gold-bg);color:var(--gold-text);}
.t-pill-mu{background:var(--border-soft);color:var(--text-2);}
.t-pill-warn{background:var(--warn-bg);color:var(--warn-text);}
.t-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;}

.t-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 14px;border-radius:var(--r-md);font-size:12.5px;font-weight:500;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  cursor:pointer;letter-spacing:-0.005em;transition:background .15s,border-color .15s;
}
.t-btn:hover{background:var(--border-soft);}
.t-btn-pri{background:var(--accent);color:#FAFAF7;border-color:var(--accent);}
.t-btn-pri:hover{background:var(--accent-2);}
.t-btn-block{width:100%;padding:11px 14px;}
.t-btn-sm{padding:6px 10px;font-size:11.5px;}

.t-in{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);font-family:inherit;font-size:13.5px;color:var(--text);
}
.t-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,41,55,.08);}

.t-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.t-tbl th{
  text-align:left;padding:10px 10px;font-weight:500;font-size:11px;
  letter-spacing:0.05em;text-transform:uppercase;color:var(--text-3);
  border-bottom:1px solid var(--border);
}
.t-tbl td{padding:11px 10px;border-bottom:1px solid var(--border-soft);}
.t-tbl tr:last-child td{border-bottom:none;}
.t-num{text-align:right;font-family:var(--font-mono);font-feature-settings:'tnum';}

.t-bar{height:8px;border-radius:4px;background:var(--border-soft);overflow:hidden;display:flex;}
.t-bar-seg{height:100%;}

.t-divider{height:1px;background:var(--border);margin:14px 0;}

.t-error{
  background:var(--loss-bg);color:var(--loss-text);padding:10px 14px;
  border-radius:var(--r-md);font-size:12.5px;margin-bottom:14px;
}
.t-success{
  background:var(--gain-bg);color:var(--gain-text);padding:10px 14px;
  border-radius:var(--r-md);font-size:12.5px;margin-bottom:14px;
}

.t-login-wrap{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;
}
.t-login-card{width:100%;max-width:380px;}
.t-login-brand{text-align:center;margin-bottom:24px;}
.t-login-tag{font-size:13px;color:var(--text-2);margin-top:4px;letter-spacing:-0.005em;}
.t-login-form{padding:28px;}
.t-login-form .t-label{margin-bottom:6px;}
.t-login-form .t-in{margin-bottom:16px;}
.t-login-foot{text-align:center;margin-top:18px;font-size:11px;color:var(--text-3);}

input[type=range].t-range{
  width:100%;-webkit-appearance:none;appearance:none;height:4px;
  background:var(--border);border-radius:4px;outline:none;
}
input[type=range].t-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:2px solid #FFFFFF;
  box-shadow:0 0 0 1px var(--accent);
}

@media (max-width: 720px){
  .t-side{display:none;}
  .t-grid-4,.t-grid-3,.t-grid-2{grid-template-columns:1fr 1fr;}
  .t-content{padding:14px;}
}

/* ============================================================
   Feed Card pattern — used on Today, Long-term, Swing, Watchlist.
   WhatsApp-inspired: avatar + symbol + one-line action + price,
   with collapsed-by-default trade plan/details body. .t-fc-*
   namespace avoids clash with the original .t-card layout.
   ============================================================ */

.t-summary-bar{
  position:sticky;top:0;z-index:10;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px 18px;margin-bottom:14px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.t-summary-left{flex:1;min-width:200px;}
.t-summary-pl{font-size:15px;font-weight:600;color:var(--text);line-height:1.3;}
.t-summary-pl .gain{color:var(--gain);}
.t-summary-pl .loss{color:var(--loss);}
.t-summary-sub{font-size:11.5px;color:var(--text-3);margin-top:4px;font-family:var(--font-mono);}
.t-summary-right{display:flex;align-items:center;gap:12px;}
.t-summary-meta{font-size:11.5px;color:var(--text-3);}
.t-summary-running{display:inline-flex;align-items:center;gap:6px;color:var(--gold-text);font-weight:500;font-size:11.5px;}
.t-summary-running .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:tPulse 1.4s infinite;}
@keyframes tPulse{0%,100%{opacity:.4;}50%{opacity:1;}}

.t-flash{padding:11px 16px;border-radius:8px;margin-bottom:14px;font-size:13.5px;}
.t-flash.ok{background:var(--gain-bg);color:var(--gain-text);border:1px solid #BFDFCE;}
.t-flash.err{background:var(--loss-bg);color:var(--loss-text);border:1px solid #ECC9C5;}

.t-empty-state{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:36px 20px;text-align:center;border-left:4px solid #B5B3AB;
}
.t-empty-state .big{font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px;}
.t-empty-state .sub{font-size:13.5px;color:var(--text-2);}

.t-feed{display:flex;flex-direction:column;gap:8px;}
.t-feed-divider{
  display:flex;align-items:center;gap:10px;
  padding:18px 4px 4px;
  font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);
}
.t-feed-divider:first-child{padding-top:6px;}
.t-feed-divider .count{
  background:var(--border);color:var(--text-2);
  padding:2px 8px;border-radius:10px;font-size:10.5px;letter-spacing:0;
}

.t-fc{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color .15s,box-shadow .15s;
}
.t-fc:hover{border-color:#D4D2C9;}
.t-fc.expanded{box-shadow:0 1px 4px rgba(0,0,0,0.05);border-color:#D4D2C9;}

.t-fc-row{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  cursor:pointer;user-select:none;
  background:transparent;border:0;width:100%;text-align:left;font-family:inherit;
}
.t-fc-row:hover{background:#FAFAF7;}

.t-fc-avatar{
  width:42px;height:42px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-sans);font-size:15px;font-weight:600;flex-shrink:0;
}

.t-fc-main{flex:1;min-width:0;}
.t-fc-line1{display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden;}
.t-fc-sym{font-size:15.5px;font-weight:600;color:var(--text);flex-shrink:0;}
.t-fc-name{font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;}
.t-fc-line2{font-size:13px;color:var(--text-2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.t-fc-line2 strong{color:var(--text);font-weight:600;}

.t-fc-right{
  text-align:right;flex-shrink:0;min-width:90px;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
}
.t-fc-num{font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--text);line-height:1.1;}
.t-fc-num.gain{color:var(--gain);}
.t-fc-num.loss{color:var(--loss);}
.t-fc-sub{font-size:11px;color:var(--text-3);font-family:var(--font-mono);}

.t-fc-pill{display:inline-block;font-size:10.5px;padding:3px 9px;border-radius:10px;font-weight:600;}
.t-fc-pill.ready  {background:var(--gain-bg);color:var(--gain);}
.t-fc-pill.near   {background:var(--warn-bg);color:var(--warn-text);}
.t-fc-pill.waiting{background:var(--border-soft);color:var(--text-3);}
.t-fc-pill.urgent {background:var(--loss-bg);color:var(--loss);}
.t-fc-pill.dark   {background:var(--accent);color:#fff;}

.t-fc-caret{
  width:18px;height:18px;flex-shrink:0;
  color:#B5B3AB;transition:transform .15s;
  display:flex;align-items:center;justify-content:center;
}
.t-fc.expanded .t-fc-caret{transform:rotate(180deg);color:var(--text-2);}
.t-fc-caret svg{width:14px;height:14px;}

.t-fc-body{
  display:none;
  padding:4px 16px 16px 72px;
  background:#FCFBF8;border-top:1px solid var(--border-soft);
}
.t-fc.expanded .t-fc-body{display:block;}

.t-fc-plan{
  margin-top:12px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.75;color:var(--text);
}
.t-fc-plan-title{
  font-family:var(--font-sans);font-size:10.5px;font-weight:600;letter-spacing:.05em;
  color:var(--text-3);text-transform:uppercase;margin-bottom:6px;
}
.t-fc-plan .row{display:flex;gap:10px;align-items:baseline;}
.t-fc-plan .row .k{width:120px;color:var(--text-3);flex-shrink:0;font-size:12px;}
.t-fc-plan .row .v{color:var(--text);}
.t-fc-plan .v.gain{color:var(--gain);}
.t-fc-plan .v.loss{color:var(--loss);}
.t-fc-plan .v.muted{color:var(--text-3);}
.t-fc-plan .small{font-size:11.5px;color:var(--text-3);margin-left:6px;}

.t-fc-missed{
  margin-top:10px;padding:10px 14px;
  background:#FFFDF7;border-left:3px solid var(--gold);border-radius:4px;
  font-size:12.5px;color:var(--gold-text);line-height:1.55;
}
.t-fc-missed strong{color:var(--text);font-weight:600;}

.t-fc-cta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}

.t-fc-rationale{
  margin-top:10px;padding:9px 12px;
  background:var(--info-bg);border-radius:4px;
  font-size:11.5px;color:var(--text-2);line-height:1.55;
}

.t-footnote{margin-top:24px;padding:12px 4px;font-size:11.5px;color:var(--text-4);text-align:center;}

@media (max-width: 640px){
  .t-summary-bar{padding:12px 14px;}
  .t-fc-row{padding:12px 14px;gap:11px;}
  .t-fc-avatar{width:36px;height:36px;font-size:13px;}
  .t-fc-sym{font-size:14.5px;}
  .t-fc-line2{font-size:12.5px;}
  .t-fc-num{font-size:15.5px;}
  .t-fc-right{min-width:78px;}
  .t-fc-body{padding:4px 14px 14px 14px;}
  .t-fc-plan .row .k{width:90px;}
}

/* Live LTP tick — briefly flash the card on price change. */
@keyframes tLiveFlash {
  0%   { background-color: rgba(168, 118, 55, 0.10); }
  100% { background-color: transparent; }
}
.t-live-flash { animation: tLiveFlash 800ms ease-out; }
.t-live-ltp   { transition: color 200ms ease-out; }