/* ============================ tokens ============================ */
:root {
  /* flat, warm paper look: white cards, hairline borders, mono labels */
  --accent: #111111;
  --bg: #f6f5f1;
  --text: #121212;
  --muted: #8a8984;
  --faint: #b8b7b1;
  --line: #ebe9e3;
  --line-strong: #dddbd4;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-hover: #faf9f6;
  --glass-edge: #e9e7e1;
  --glass-hi: none;
  --field: #ffffff;
  --chip: #f2f1ed;
  --pos: #2e8a57;
  --neg: #cf4a37;
  --warn: #d9962b;
  --pos-bg: color-mix(in srgb, var(--pos) 11%, transparent);
  --neg-bg: color-mix(in srgb, var(--neg) 10%, transparent);
  --ink: #141414;
  --ink-text: #ffffff;
  --shadow: none;
  --shadow-lg: 0 30px 80px rgba(20, 18, 10, 0.18);
  --r: 22px;
  --r-sm: 12px;
  --blur: 0px;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0f1012;
  --text: #f2f2ef;
  --muted: #8f8f8a;
  --faint: #5a5a56;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --glass: #17181b;
  --glass-strong: #17181b;
  --glass-hover: #1d1e22;
  --glass-edge: rgba(255, 255, 255, 0.08);
  --glass-hi: none;
  --field: #1b1c20;
  --chip: rgba(255, 255, 255, 0.05);
  --pos: #3fb37a;
  --neg: #e3604c;
  --pos-bg: color-mix(in srgb, var(--pos) 14%, transparent);
  --neg-bg: color-mix(in srgb, var(--neg) 14%, transparent);
  --ink: #f2f2ef;
  --ink-text: #111111;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 750; }
h3 { font-size: 14px; font-weight: 650; }
p { margin: 0; }
kbd { font: 600 11px/1 'Inter', sans-serif; padding: 3px 6px; border-radius: 6px; background: var(--chip); border: 1px solid var(--line-strong); border-bottom-width: 2px; }
.ic { flex: none; display: block; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.flat { color: var(--muted); }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; margin: 14px 0; }
.row-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; color: var(--muted); text-transform: uppercase; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }

/* ============================ wallpaper ============================ */
#wallpaper {
  position: fixed; inset: -60px; z-index: -1;
  background: var(--bg);
  background-size: cover; background-position: center;
}
#wallpaper::after { content: ''; position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }
#wallpaper.custom { filter: blur(var(--wp-blur)); background-size: cover !important; background-position: center !important; }
#wallpaper.custom::after { opacity: var(--wp-dim); }
[data-theme="dark"] #wallpaper.custom::after { opacity: max(var(--wp-dim), .45); }

/* ============================ glass ============================ */
.glass, .card {
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.8) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.8) brightness(1.04);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--shadow);
}
.glass-strong { background: var(--glass-strong); backdrop-filter: blur(40px) saturate(1.9); -webkit-backdrop-filter: blur(40px) saturate(1.9); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--shadow-lg); }
.card .card { box-shadow: var(--glass-hi); }
.card { border-radius: var(--r); padding: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

/* ============================ top bar ============================ */
.topbar {
  position: sticky; top: 10px; z-index: 50;
  margin: 10px 14px 0; height: 56px; padding: 0 10px 0 16px;
  display: flex; align-items: center; gap: 16px;
  border-radius: 18px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; letter-spacing: -0.03em; }
.brand-mark { width: 24px; height: 24px; border-radius: 8px; background: var(--ink); position: relative; overflow: hidden; }
.brand-mark::after { content: ''; position: absolute; inset: 6px 5px; border-left: 2.5px solid var(--ink-text); border-bottom: 2.5px solid var(--ink-text); border-radius: 0 0 0 3px; transform: skewX(-8deg); }
.brand-mark::before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); right: 4px; top: 4px; }
.nav { display: flex; gap: 2px; flex: 1; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.nav a { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 11px; color: var(--muted); font-weight: 550; white-space: nowrap; transition: .15s; }
.nav a:hover { color: var(--text); background: var(--chip); }
.nav a.on { color: var(--text); background: var(--glass-strong); box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 1px solid var(--line); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.pill-select { height: 36px; padding: 0 30px 0 12px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--field); font-weight: 550; max-width: 170px; appearance: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.avatar-btn { border-radius: 50%; display: flex; }
.avatar { border-radius: 50%; object-fit: cover; display: inline-flex; flex: none; }
.avatar-fallback { align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8fb3ff, var(--accent) 60%, #8b5cf6); letter-spacing: -0.02em; }


/* ============================ buttons / inputs ============================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 12px; font-weight: 600; white-space: nowrap; transition: transform .1s, background .15s, opacity .15s; }
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--ink); color: var(--ink-text); }
.btn-dark:hover { opacity: .88; }
.btn-ghost { background: var(--field); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--glass-hover); }
.btn-danger { background: var(--neg); color: #fff; }
.btn-lg { height: 48px; padding: 0 22px; border-radius: 14px; font-size: 15px; }
.btn.full { width: 100%; margin-top: 14px; }
.danger-text { color: var(--neg); }
.icon-btn { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: .15s; flex: none; }
.icon-btn:hover { background: var(--chip); color: var(--text); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 9px; }

.field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; align-content: flex-start; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 14px; min-width: 0; }
.field .hint { font-weight: 500; color: var(--faint); }
.field > input, .field > select, .field > textarea, .field > div { flex: 0 0 100%; min-width: 0; }
.pair input { min-width: 0; }
.field > span[data-v] { color: var(--text); }
input:not([type=checkbox]):not([type=range]), select, textarea {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-strong);
  background: var(--field); color: var(--text); font-size: 14px; font-weight: 500; outline: none; transition: border .15s, box-shadow .15s;
}
textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type=range] { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--faint); }
.pair { display: flex; gap: 6px; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 0 12px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.span-2 { grid-column: span 2; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--chip); border: 1px solid var(--line); }
.seg button { padding: 6px 12px; border-radius: 9px; font-weight: 600; font-size: 12.5px; color: var(--muted); text-transform: capitalize; display: inline-flex; align-items: center; gap: 5px; transition: .15s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--glass-strong); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.side-seg { display: flex; height: 40px; }
.side-seg button { flex: 1; justify-content: center; }
.side-seg button.on.long { background: var(--pos); color: #fff; }
.side-seg button.on.short { background: var(--neg); color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.static { margin: 14px 0; }
.chip { padding: 6px 11px; border-radius: 99px; background: var(--chip); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text); transition: .15s; }
.chip:hover { border-color: var(--line-strong); }
.chip.on { background: var(--ink); color: var(--ink-text); }
.chip.xs { padding: 2px 8px; font-size: 11px; }
.stars { display: flex; gap: 2px; height: 40px; align-items: center; }
.stars button { color: var(--line-strong); transition: .1s; }
.stars button.on { color: #f5b301; }
.stars button.on svg { fill: #f5b301; }
.stars-inline { color: #f5b301; letter-spacing: 1px; }
.stars-inline i { color: var(--line-strong); font-style: normal; }

.toggle-row { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; margin: 4px 0 14px; user-select: none; }
.toggle-row input { display: none; }
.switch { width: 40px; height: 24px; border-radius: 99px; background: var(--line-strong); position: relative; transition: .2s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: .2s; }
.toggle-row input:checked + .switch { background: var(--pos); }
.toggle-row input:checked + .switch::after { left: 19px; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--glass-strong); transition: .15s; }
.swatches button.on { border-color: var(--text); transform: scale(1.1); }

.badge { display: inline-flex; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; background: var(--chip); color: var(--muted); text-transform: capitalize; letter-spacing: 0; vertical-align: middle; }
.badge.pos { background: var(--pos-bg); color: var(--pos); }
.badge.neg { background: var(--neg-bg); color: var(--neg); }
.side { display: inline-flex; padding: 2px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.side.long { background: var(--pos-bg); color: var(--pos); }
.side.short { background: var(--neg-bg); color: var(--neg); }
.sym { font-weight: 800; letter-spacing: -0.01em; }

/* ============================ layout ============================ */
#view { padding: 18px 14px 60px; max-width: 1900px; margin: 0 auto; }
.page { max-width: 1240px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 2px 16px; flex-wrap: wrap; }
.page-head p { margin-top: 4px; }
.section-title { margin: 28px 0 12px; }
.empty { text-align: center; padding: 50px 20px; }
.empty h3 { font-size: 17px; margin-bottom: 6px; }
.empty-inline { padding: 18px; text-align: center; }
.chart-empty { display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 13px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 14px; }
.chart-empty.small { min-height: 90px; }

/* ============================ dashboard ============================ */
.dash { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.dash-left, .dash-right { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: none; }
.dash-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rail-card { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.rail-card .card-head { margin-bottom: 6px; }
.rail-card > .eyebrow { margin-bottom: 8px; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.kv > span { color: var(--muted); }
.kv + .kv { border-top: 1px solid var(--line); }

.acc-mini { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 12px; text-align: left; transition: .15s; width: 100%; }
.acc-mini:hover, .acc-mini.sel { background: var(--chip); }
.acc-mini > i { width: 8px; height: 30px; border-radius: 4px; flex: none; }
.acc-mini-name { flex: 1; font-weight: 650; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-mini small, .recent-row small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.acc-mini-val { text-align: right; font-size: 13px; }
.trophy-teaser { flex-direction: row; align-items: center; gap: 10px; color: var(--text); }
.trophy-teaser span { flex: 1; }
.trophy-teaser .ic:first-child { color: #f5b301; }

.hero { text-align: center; padding: 18px 18px 16px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: auto 0 -60% 0; height: 100%; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); pointer-events: none; }
.hero-num { font-size: clamp(38px, 3.6vw, 56px); font-weight: 900; letter-spacing: -0.05em; line-height: 1; margin: 6px 0 10px; }
.hero-num.flat { color: var(--text); }
.hero-sub { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; font-weight: 500; }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.streak { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-row.four { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; }
.stat-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-num { font-size: 22px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.stat-row.four .stat-num { font-size: 26px; }
.stat-num small { font-size: 15px; margin-left: 2px; color: var(--muted); font-weight: 700; }
.wl-bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; }
.wl-bars i { width: 10px !important; }
.wl-bars i { width: 14px; border-radius: 5px; min-height: 3px; }
.wl-bars i.pos { background: var(--pos); }
.wl-bars i.neg { background: var(--neg); }
.pf-gauge { width: 70px; height: 8px; border-radius: 9px; background: var(--chip); overflow: hidden; flex: none; }
.pf-gauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--neg), var(--warn), var(--pos)); background-size: 70px 100%; border-radius: 9px; }

.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-grid > .card { min-width: 0; }
.dash-charts { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.score-card { display: flex; flex-direction: column; align-items: center; }
.rail-card.score-card .radar { margin: -4px auto -6px; }
.score-card .card-head { width: 100%; }
.score-pill { font-weight: 900; font-size: 20px; letter-spacing: -0.03em; padding: 2px 12px; border-radius: 99px; background: var(--ink); color: var(--ink-text); }

.brief .field { margin-bottom: 0; }

/* calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 6px; }
.cal-h { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; padding: 2px 0 4px; text-transform: uppercase; letter-spacing: .06em; }
.cal-cell, .cal-week {
  min-height: 84px; border-radius: 13px; padding: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--chip); border: 1px solid transparent; text-align: left; transition: transform .12s, border .12s; min-width: 0; overflow: hidden;
}
.cal-cell:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.cal-cell.out { opacity: .35; }
.cal-cell.pos { background: linear-gradient(var(--pos-bg), var(--pos-bg)), var(--chip); border-color: color-mix(in srgb, var(--pos) 18%, transparent); }
.cal-cell.neg { background: linear-gradient(var(--neg-bg), var(--neg-bg)), var(--chip); border-color: color-mix(in srgb, var(--neg) 18%, transparent); }
.cal-cell.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cal-d { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.note-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cal-pnl { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; margin-top: auto; }
.cal-cell.pos .cal-pnl, .cal-week.pos .cal-pnl { color: var(--pos); }
.cal-cell.neg .cal-pnl, .cal-week.neg .cal-pnl { color: var(--neg); }
.cal-sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-week { background: transparent; border: 1px dashed var(--line-strong); }

/* right rail */
.plan-progress, .loss-meter, .meter { height: 6px; border-radius: 9px; background: var(--chip); overflow: hidden; margin: 2px 0 8px; }
.plan-progress i, .loss-meter i, .meter i { display: block; height: 100%; border-radius: 9px; transition: width .4s; }
.plan-progress i { background: var(--pos); }
.loss-meter { margin-top: 10px; }
.loss-meter i { background: linear-gradient(90deg, var(--warn), var(--neg)); }
.meter i.pos, .meter i.ok { background: var(--pos); }
.meter i.warn { background: var(--warn); }
.meter i.neg { background: var(--neg); }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px; text-align: left; font-size: 13px; font-weight: 500; border-radius: 9px; color: var(--text); }
.check:hover { background: var(--chip); }
.check .box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; flex: none; color: transparent; transition: .15s; margin-top: 1px; }
.check.on .box { background: var(--pos); border-color: var(--pos); color: #fff; }
.check.on > span:last-child { color: var(--muted); text-decoration: line-through; }
.ready { margin-top: 6px; font-weight: 600; }
.session-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.session-num { font-size: 20px; font-weight: 850; letter-spacing: -0.03em; }
.session .card-head { margin-bottom: 2px; }
.session .badge { display: inline-flex; align-items: center; gap: 4px; }
.session.tripped { border-color: var(--neg); box-shadow: 0 0 0 1px var(--neg), var(--shadow); }
.recent { display: flex; flex-direction: column; }
.recent-row { display: flex; align-items: center; gap: 9px; padding: 5px 4px; border-radius: 9px; text-align: left; font-size: 12.5px; }
.recent-row > b { font-size: 12.5px; }
.recent + .see-all { margin-top: 6px; }
.recent-row:hover { background: var(--chip); }
.recent-row + .recent-row { border-top: 1px solid var(--line); }
.side-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.side-dot.long { background: var(--pos); }
.side-dot.short { background: var(--neg); }
.recent-main { flex: 1; font-size: 13px; }
.recent-right { text-align: right; font-size: 13px; }

/* ============================ charts ============================ */
.chart-line { position: relative; padding-left: 46px; }
.chart-line svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart-line .zero { stroke: var(--line-strong); stroke-dasharray: 4 4; stroke-width: 1; }
.ytick { position: absolute; left: 0; transform: translateY(-50%); font-size: 10.5px; color: var(--faint); font-weight: 600; }
.chart-line .plot { position: relative; height: 100%; }
.hover-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-strong); opacity: 0; pointer-events: none; }
.hover-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--c); border: 2px solid var(--glass-strong); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--ink); color: var(--ink-text); padding: 7px 10px; border-radius: 10px; font-size: 11.5px; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 3; }
.tip b { font-size: 13px; }
.tip b.pos { color: color-mix(in srgb, var(--pos) 60%, #fff); } .tip b.neg { color: color-mix(in srgb, var(--neg) 60%, #fff); }
[data-theme="dark"] .tip b.pos { color: color-mix(in srgb, var(--pos) 70%, #000); } [data-theme="dark"] .tip b.neg { color: color-mix(in srgb, var(--neg) 70%, #000); }
.chart-line.hovering .hover-line, .chart-line.hovering .hover-dot, .chart-line.hovering .tip { opacity: 1; }

.bars { display: flex; gap: 6px; align-items: stretch; padding-bottom: 20px; }
.bar-col { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; }
.bar-track { position: relative; flex: 1; }
.bar { position: absolute; left: 12%; right: 12%; border-radius: 7px; transition: height .4s; }
.bar.pos { background: linear-gradient(180deg, var(--pos), color-mix(in srgb, var(--pos) 55%, transparent)); }
.bar.neg { background: linear-gradient(0deg, var(--neg), color-mix(in srgb, var(--neg) 55%, transparent)); }
.bar-zero { position: absolute; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.bar-label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; }
.bar-col:hover .bar { filter: brightness(1.12); }

.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar-row { display: grid; grid-template-columns: minmax(90px, 1.1fr) 2fr auto; gap: 12px; align-items: center; }
.hbar-name { font-weight: 650; font-size: 13px; text-transform: capitalize; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-name span { display: block; font-size: 11px; color: var(--muted); font-weight: 500; text-transform: none; }
.hbar-track { height: 10px; border-radius: 9px; background: var(--chip); overflow: hidden; }
.hbar { height: 100%; border-radius: 9px; }
.hbar.pos { background: var(--pos); } .hbar.neg { background: var(--neg); } .hbar.flat { background: var(--faint); }
.hbar-val { font-weight: 750; font-size: 13px; text-align: right; min-width: 64px; }

.radar .ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.radar .shape { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.radar .dot { fill: var(--accent); }
.radar text { font-size: 10px; font-weight: 650; fill: var(--muted); }
.spark { display: block; }

/* ============================ journal ============================ */
.filters { display: flex; gap: 8px; padding: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filters select { width: auto; min-width: 120px; }
.search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; padding-left: 12px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--field); color: var(--muted); }
.search input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0 !important; }
.search.sm { min-width: 0; height: 34px; margin: 10px 0 14px; }
.search.sm input { height: 32px; font-size: 13px; }
.day-group { padding: 6px; margin-bottom: 12px; }
.day-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; border-radius: 13px; }
.day-head:hover { background: var(--chip); }
.day-head b { margin-right: 8px; }
.day-pnl { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; min-width: 90px; text-align: right; }
.trade-list { display: flex; flex-direction: column; }
.trade-list.scroll { max-height: 420px; overflow-y: auto; }
.trade-row {
  display: grid; grid-template-columns: 50px 58px 62px 40px minmax(110px, 1.3fr) minmax(90px, 1fr) minmax(80px, 1fr) 50px 96px;
  gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 13px; transition: background .12s;
}
.trade-row:hover { background: var(--chip); }
.trade-row + .trade-row { border-top: 1px solid var(--line); }
.tr-time { color: var(--muted); font-weight: 600; }
.tr-px { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.tr-setup { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; }
.tr-setup i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tr-tags { display: flex; gap: 4px; align-items: center; overflow: hidden; }
.tr-pnl { text-align: right; font-weight: 800; }
.tr-r { text-align: right; font-size: 12px; }
.trade-list.compact .trade-row { grid-template-columns: 48px 52px 58px 36px minmax(100px, 1fr) minmax(70px, .8fr) 0 44px 90px; }
.trade-list.compact .tr-tags { display: none; }

/* ============================ analytics ============================ */
.insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.insight { display: flex; gap: 12px; align-items: flex-start; }
.insight > .ic { margin-top: 2px; color: var(--accent); }
.insight.good > .ic { color: var(--pos); }
.insight.bad > .ic { color: var(--neg); }
.insight p { margin-top: 5px; font-size: 13.5px; line-height: 1.5; }
.metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 6px; margin-bottom: 14px; }
.metric { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; border-radius: 12px; }
.metric:hover { background: var(--chip); }
.metric span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.metric b { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.chart-grid.two .span-2 { grid-column: span 2; }

/* ============================ playbook ============================ */
.playbook-grid, .acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.play { display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.play::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--c); }
.play-head { display: flex; justify-content: space-between; align-items: center; }
.play-head > div { display: flex; align-items: center; gap: 8px; }
.play-head h3 { font-size: 17px; }
.play-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.rules { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.rules li::marker { color: var(--c); font-weight: 800; }
.play-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; border-radius: 13px; background: var(--chip); margin-top: auto; }
.play-stats div, .detail-grid div, .tc-meta div { display: flex; flex-direction: column; gap: 2px; }
.play-stats span, .detail-grid span, .tc-meta span { font-size: 11px; color: var(--muted); font-weight: 600; }
.play-stats b { font-size: 15px; font-weight: 800; }
.play.add, .acc-card.add { align-items: center; justify-content: center; color: var(--muted); font-weight: 600; min-height: 200px; border-style: dashed; border-color: var(--line-strong); box-shadow: none; flex-direction: column; display: flex; gap: 8px; }
.play.add:hover, .acc-card.add:hover { color: var(--text); background: var(--glass-hover); }

/* ============================ accounts ============================ */
.acc-card { text-align: left; display: flex; flex-direction: column; gap: 8px; transition: transform .15s; position: relative; overflow: hidden; }
.acc-card:not(.add):hover { transform: translateY(-2px); }
.acc-card::after { content: ''; position: absolute; width: 180px; height: 180px; right: -60px; top: -80px; border-radius: 50%; background: radial-gradient(var(--c), transparent 70%); opacity: .18; pointer-events: none; }
.acc-card.archived { opacity: .6; }
.acc-top { display: flex; align-items: center; gap: 10px; }
.acc-top > div { flex: 1; min-width: 0; }
.acc-top small { display: block; color: var(--muted); font-size: 12px; }
.acc-logo { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--c); color: #fff; font-weight: 900; font-size: 17px; text-transform: uppercase; flex: none; }
.acc-logo.lg { width: 50px; height: 50px; font-size: 22px; border-radius: 16px; }
.acc-bal { font-size: 30px; font-weight: 850; letter-spacing: -0.04em; margin-top: 6px; }
.meter-label { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.meter { margin: 0; }
.acc-modal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.acc-modal-head .acc-logo { background: var(--c); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button { padding: 9px 14px; font-weight: 600; color: var(--muted); text-transform: capitalize; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--text); border-color: var(--text); }
.acc-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.acc-overview > div { display: flex; flex-direction: column; gap: 6px; }
.xl { font-size: 26px; font-weight: 850; letter-spacing: -0.04em; }
.panel { padding: 8px 16px; border-radius: 16px; background: var(--chip); margin-bottom: 16px; }
.panel.tripped { background: var(--neg-bg); }
.panel .meter { margin: -2px 0 6px; }
.rules-panel p { padding: 10px 0; }
.inline-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 120px; }
.ledger-row { display: grid; grid-template-columns: 130px 1fr auto 30px; gap: 12px; padding: 10px 6px; align-items: center; border-bottom: 1px solid var(--line); }

/* ============================ wall ============================ */
.wall { display: grid; grid-template-columns: minmax(0, 640px) 320px; gap: 20px; justify-content: center; align-items: start; }
.wall-main { display: flex; flex-direction: column; gap: 14px; }
.wall-main .page-head { margin-bottom: 2px; }
.wall-side { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 12px; }
.composer { display: flex; gap: 12px; align-items: flex-start; }
.composer textarea { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 8px 0; font-size: 15px; resize: none; }
.composer-bar { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.composer-bar select { width: auto; max-width: 300px; height: 34px; font-size: 12.5px; }
.attached { position: relative; margin: 6px 0 10px; }
.attached > .icon-btn { position: absolute; top: 8px; right: 8px; background: var(--glass-strong); }
.post { padding: 16px 18px; }
.post-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.post-text { font-size: 14.5px; line-height: 1.55; margin: 12px 0 4px; }
.post-img { width: 100%; border-radius: 14px; margin-top: 10px; display: block; border: 1px solid var(--line); cursor: zoom-in; }
.post-trade { cursor: pointer; }
.post-actions { display: flex; gap: 14px; margin-top: 12px; }
.post-actions button { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: 13px; padding: 6px 10px; border-radius: 9px; margin-left: -10px; }
.post-actions button:hover { background: var(--chip); }
.post-actions button.liked { color: var(--neg); }
.post-actions button.liked svg { fill: var(--neg); }
.ghosty { opacity: 0; }
.post:hover .ghosty { opacity: 1; }

.trade-card { border-radius: 18px; padding: 16px 18px; color: #fff; position: relative; overflow: hidden; background: linear-gradient(135deg, #1f2937, #0b0d12); }
.trade-card.pos { background: radial-gradient(120% 140% at 0% 0%, var(--pos) 0%, color-mix(in srgb, var(--pos) 45%, #000) 45%, color-mix(in srgb, var(--pos) 10%, #000) 100%); }
.trade-card.neg { background: radial-gradient(120% 140% at 0% 0%, var(--neg) 0%, color-mix(in srgb, var(--neg) 45%, #000) 45%, color-mix(in srgb, var(--neg) 10%, #000) 100%); }
.trade-card::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent 30%, #000); pointer-events: none; }
.tc-top { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.tc-top .muted { color: rgba(255,255,255,.65); margin-left: auto; font-size: 12px; }
.trade-card .side { background: rgba(255,255,255,.16); color: #fff; }
.tc-pnl { font-size: 38px; font-weight: 900; letter-spacing: -0.045em; margin: 14px 0 12px; position: relative; z-index: 1; }
.trade-card.big .tc-pnl { font-size: 52px; }
.tc-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; z-index: 1; }
.tc-meta span { color: rgba(255,255,255,.6); }
.tc-meta b { font-size: 14px; }

.profile-card { padding: 0; overflow: hidden; }
.pc-banner { height: 96px; background: linear-gradient(120deg, #c7d7ff, #e7dcff 40%, #d4f1ff 75%, #fff1f2); background-size: cover; background-position: center; position: relative; }
[data-theme="dark"] .pc-banner:not([style*="url"]) { background: linear-gradient(120deg, #1b2a63, #2d1a4f 45%, #0f3a4f); }
.pc-banner:not([style*="url"])::after, .settings-banner:not([style*="url"])::after { content: ''; position: absolute; inset: 0; background: radial-gradient(30% 80% at 25% 30%, rgba(255,255,255,.7), transparent 70%), radial-gradient(25% 70% at 80% 60%, rgba(255,255,255,.5), transparent 70%); opacity: .7; }
.pc-body, .pp-body { padding: 0 18px 18px; margin-top: -38px; position: relative; }
.pc-avatar { position: relative; display: inline-flex; }
.pc-avatar .avatar { border: 4px solid var(--glass-strong); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.founder { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: .08em; color: #fff; background: linear-gradient(90deg, var(--accent), #8b5cf6); white-space: nowrap; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.pc-body h3, .pp-body h3 { font-size: 18px; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.verified { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; background: var(--pos); color: #fff; align-items: center; justify-content: center; vertical-align: middle; }
.verified .ic { stroke-width: 4; }
.bio { margin-top: 10px; font-size: 13.5px; line-height: 1.5; }
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border-radius: 13px; background: var(--chip); padding: 10px 6px; text-align: center; }
.pc-stats div { display: flex; flex-direction: column; }
.pc-stats b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.pc-stats span { font-size: 11px; color: var(--muted); }
.trophy-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.see-all { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--muted); }
.see-all:hover { color: var(--text); }
.tm { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--chip); color: var(--faint); }
.tm.got { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #7c2d12; box-shadow: 0 3px 10px rgba(245, 158, 11, .3); }

/* ============================ modals ============================ */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 10, 16, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s; }
.modal-overlay.in { opacity: 1; }
.modal { width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto; border-radius: 26px; padding: 24px; box-shadow: var(--shadow-lg); transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.2, .9, .3, 1.2); }
.modal-overlay.in .modal { transform: none; }
.modal-sm { max-width: 460px; }
.modal-md { max-width: 680px; }
.modal-import { max-width: 900px; overflow-x: hidden; }
.imp-why { border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px 16px; margin: 4px 0 12px; background: var(--chip); }
.imp-why > b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.imp-why ul, .imp-skipped { margin: 8px 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.imp-skipped { margin: 0 0 10px 18px; font-size: 12.5px; color: var(--muted); }
.imp-fix { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.imp-fix .mono { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.imp-fix p { font-size: 13.5px; line-height: 1.55; margin-top: 4px; }
.dup-opts { display: flex; flex-direction: column; gap: 8px; }
.dup-opts button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 12px; text-align: left; transition: border-color .15s, background .15s; }
.dup-opts button:hover { border-color: var(--text); background: var(--chip); }
.dup-opts b { font-size: 14.5px; }
.dup-opts span { font-size: 13px; color: var(--muted); }
.acc-drop { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1.5px dashed var(--line-strong); border-radius: 12px; color: var(--muted); font-size: 13.5px; font-weight: 550; cursor: pointer; }
.acc-drop:hover, .acc-drop.over { border-color: var(--text); color: var(--text); }
.acc-drop.has { border-style: solid; color: var(--text); }
.imp-body { display: block; min-width: 0; }
.modal-lg { max-width: 860px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.modal-head h2 { display: flex; align-items: center; gap: 8px; }
.modal-head p { margin-top: 3px; }
.big-pnl { font-size: 24px; font-weight: 850; letter-spacing: -0.03em; margin-right: 6px; }
.confirm p { font-size: 15px; line-height: 1.5; }
.modal-image { max-width: 92vw; padding: 8px; background: transparent; border: 0; box-shadow: none; }
.zoomed { width: 100%; border-radius: 16px; display: block; cursor: zoom-out; }
.calc-strip { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin: -4px 0 14px; min-height: 16px; }
.calc-strip b { color: var(--text); }
.calc-strip .warn { color: var(--warn); font-weight: 600; }
.dropzone { border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); cursor: pointer; transition: .15s; font-weight: 500; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs:empty { display: none; }
.thumb { position: relative; }
.thumb img { width: 120px; height: 76px; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--line); }
.thumb button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; border-radius: 16px; background: var(--chip); margin-top: 14px; }
.detail-grid b { font-size: 14px; }
.note-block { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); font-size: 14px; line-height: 1.6; margin-top: 14px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 14px; }
.shots img { width: 100%; border-radius: 12px; cursor: zoom-in; display: block; border: 1px solid var(--line); }
.modal .chart-line { margin-bottom: 14px; }
.modal .trade-list { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 4px; }

/* settings sheet (big rounded panel with banner) */
.modal-settings { max-width: 1040px; height: min(760px, calc(100vh - 48px)); padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.settings-banner { height: 120px; flex: none; background: linear-gradient(120deg, #c7d7ff, #e7dcff 40%, #d4f1ff 75%, #fff1f2); background-size: cover; background-position: center; position: relative; }
[data-theme="dark"] .settings-banner:not([style*="url"]) { background: linear-gradient(120deg, #1b2a63, #2d1a4f 45%, #0f3a4f); }
.settings-x { position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,.35); color: #fff; z-index: 2; }
.settings-x:hover { background: rgba(0,0,0,.55); color: #fff; }
.settings { display: grid; grid-template-columns: 250px 1fr; flex: 1; min-height: 0; }
.settings-nav { padding: 0 14px 18px; border-right: 1px solid var(--line); overflow: visible; }
.settings-me { margin-top: -36px; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 6px; }
.settings-me .pc-avatar { align-self: flex-start; }
.settings-me small { display: block; }
.settings-nav .eyebrow { display: block; margin: 14px 8px 6px; }
.settings-nav [data-navlist] button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; font-weight: 550; color: var(--muted); text-align: left; }
.settings-nav [data-navlist] button:hover { background: var(--chip); color: var(--text); }
.settings-nav [data-navlist] button.on { background: var(--chip); color: var(--text); font-weight: 650; }
.settings-body { padding: 26px 32px 32px; overflow-y: auto; }
.settings-body > h2 { margin-bottom: 4px; }
.settings-body > p.muted { margin-bottom: 20px; }
.profile-preview { padding: 0; overflow: hidden; margin-bottom: 4px; box-shadow: none; }
.profile-preview .pc-banner { height: 120px; }
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.trophy { padding: 16px; border-radius: 16px; background: var(--chip); display: flex; flex-direction: column; gap: 5px; align-items: flex-start; opacity: .7; }
.trophy.got { opacity: 1; background: linear-gradient(160deg, color-mix(in srgb, #f59e0b 14%, transparent), var(--chip)); border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); }
.trophy small { color: var(--muted); font-size: 12px; min-height: 30px; }
.trophy .meter { width: 100%; }
.trophy-ic { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--line); color: var(--faint); margin-bottom: 4px; }
.trophy.got .trophy-ic { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #7c2d12; }
.wallpaper-pick { display: flex; gap: 14px; align-items: center; }
.wp-preview { width: 200px; height: 112px; border-radius: 14px; background: linear-gradient(120deg, #c7d7ff, #e7dcff 40%, #d4f1ff); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.edit-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.edit-item { display: flex; gap: 8px; align-items: center; }
.sym-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 16px; }
.sym-table .edit-item b { width: 46px; flex: none; }

/* ============================ welcome ============================ */
.welcome { min-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; }
.welcome-card { max-width: 680px; text-align: center; padding: 56px 40px; border-radius: 32px; box-shadow: var(--shadow-lg); }
.welcome-title { font-size: clamp(56px, 9vw, 96px); font-weight: 900; letter-spacing: -0.06em; line-height: 1; margin: 10px 0 16px; }
.welcome-title span { color: var(--accent); }
.welcome-sub { font-size: 17px; color: var(--muted); line-height: 1.55; font-family: 'Instrument Serif', serif; font-size: 22px; font-style: italic; }
.welcome-actions { display: flex; gap: 10px; justify-content: center; margin: 30px 0 26px; flex-wrap: wrap; }
.welcome-feats { display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: 13px; font-weight: 500; }
.welcome-feats span { display: inline-flex; align-items: center; gap: 6px; }

/* ============================ three-column pages (journal, analytics) ============================ */
.tri { display: grid; grid-template-columns: 270px minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.tri-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tri-main > .page-head { margin-bottom: 0; }
.tri-main .filters, .tri-main .day-group { margin-bottom: 0; }
.rail { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: none; }
.rail-big { font-size: 26px; font-weight: 850; letter-spacing: -0.04em; margin: 2px 0 6px; }
.rail-sub { margin: -8px 0 6px; }
.sym-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; font-size: 13px; text-align: left; width: 100%; }
.sym-row:hover { background: var(--chip); }
.sym-row.on { background: var(--ink); color: var(--ink-text); }
.sym-row.on .muted, .sym-row.on b { color: inherit; }
.trade-row.sel { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.detail-empty { align-items: center; text-align: center; gap: 8px; padding: 34px 20px; color: var(--muted); }
.detail-empty b { color: var(--text); font-size: 15px; }
.detail .trade-card { margin-bottom: 8px; }
.detail .tc-pnl { font-size: 32px; margin: 10px 0 8px; }
.detail .tc-meta b { font-size: 12.5px; }
.detail .chips { margin-top: 8px; }
.detail .note-block { font-size: 13px; padding: 10px 12px; margin-top: 10px; }
.detail .shots { grid-template-columns: 1fr; margin-top: 10px; }
.detail-actions { margin-top: 12px; }

/* chart options */
.card-head:has(.chart-opts) { flex-wrap: wrap; }
.card-head:has(.chart-opts) h3 { white-space: nowrap; }
.chart-opts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
select.mini-select { height: 28px; width: auto; padding: 0 8px; font-size: 12px; font-weight: 600; border-radius: 9px; }
.seg.xs { padding: 2px; border-radius: 10px; }
.seg.xs button { padding: 4px 8px; font-size: 11.5px; border-radius: 8px; text-transform: none; }
.bar.acc { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 50%, transparent)); }
.bar-val { position: absolute; left: -6px; right: -6px; text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; pointer-events: none; }
.bar-val.pos { color: var(--pos); } .bar-val.neg { color: var(--neg); }
.chart-line.has-x { margin-bottom: 20px; }
.xlabels { position: absolute; left: 46px; right: 0; bottom: -20px; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--faint); font-weight: 600; }

/* analytics */
.equity-card .card-head { align-items: flex-start; margin-bottom: 16px; }
.eq-kpis { display: flex; gap: 28px; flex-wrap: wrap; }
.eq-kpis div { display: flex; flex-direction: column; gap: 3px; }
.eq-kpis b { font-size: 19px; font-weight: 850; letter-spacing: -0.03em; }
.underwater-label { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.wl-split { display: flex; gap: 3px; height: 8px; margin: 2px 0 6px; }
.wl-split i { border-radius: 9px; }
.wl-split i.pos { background: var(--pos); } .wl-split i.neg { background: var(--neg); }
.wl-legend { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.ls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ls-tile { padding: 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 6px; border: 1px solid transparent; }
.ls-tile.long { background: var(--pos-bg); border-color: color-mix(in srgb, var(--pos) 22%, transparent); }
.ls-tile.short { background: var(--neg-bg); border-color: color-mix(in srgb, var(--neg) 22%, transparent); }
.ls-top { display: flex; align-items: center; gap: 7px; }
.ls-ic { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.long .ls-ic { background: var(--pos); } .short .ls-ic { background: var(--neg); }
.ls-net { font-size: 26px; font-weight: 850; letter-spacing: -0.04em; }
.ls-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ls-meta b { color: var(--text); }
.ls-split { height: 8px; border-radius: 9px; background: var(--neg); overflow: hidden; margin-top: 16px; }
.ls-split i { display: block; height: 100%; background: var(--pos); }
.ls-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 6px; }

/* settings: setups + wallpaper presets */
.setup-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.setup-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--chip); border: 1px solid var(--line); }
.setup-item small { display: block; }
.wp-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.wp-preset { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; border-radius: 14px; border: 2px solid transparent; font-size: 12px; font-weight: 650; text-transform: capitalize; color: var(--text); }
.wp-preset:hover { background: var(--chip); }
.wp-preset.on { border-color: var(--accent); }
.wp-swatch { height: 64px; border-radius: 10px; background: var(--wp, var(--chip)); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--muted); border: 1px solid var(--line); }

/* ============================ round 3: dashboard KPI row, plan, recent ============================ */
.stat-row.kpis { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
.kpis .stat { min-width: 0; }
.kpis .hero { text-align: left; padding: 11px 16px; }
.kpis .hero .hero-num { font-size: clamp(26px, 2.1vw, 34px); margin: 2px 0 3px; letter-spacing: -0.045em; }
.kpis .hero .streak { gap: 2px; }
.kpis .donut { width: 38px; height: 38px; flex: none; }
.kpis .pf-gauge { width: 46px; }
.today-card .stat-text { width: 100%; }
.today-card .eyebrow { display: flex; align-items: center; gap: 6px; }
.today-card .badge { padding: 1px 6px; font-size: 9.5px; gap: 3px; align-items: center; }
.today-card .loss-meter { margin: 4px 0 0; height: 4px; }
.today-card.tripped { border-color: var(--neg); box-shadow: 0 0 0 1px var(--neg), var(--shadow); }

.plan.cleared { border-color: color-mix(in srgb, var(--pos) 45%, transparent); }
.plan-head { display: flex; align-items: center; gap: 10px; }
.plan-head b { display: block; font-size: 13.5px; margin-top: 1px; }
.plan-ring .track { fill: none; stroke: var(--line-strong); stroke-width: 4; }
.plan-ring .fill { fill: none; stroke: var(--pos); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .4s; }
.plan-ring text { font-size: 10px; font-weight: 800; fill: var(--text); }
.plan-items { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.plan-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--chip); border: 1px solid var(--glass-edge); text-align: left; font-size: 12.5px; font-weight: 550; line-height: 1.35; transition: .15s; }
.plan-item:hover { transform: translateX(2px); }
.plan-num { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--muted); flex: none; }
.plan-item.on { background: linear-gradient(var(--pos-bg), var(--pos-bg)), var(--chip); border-color: color-mix(in srgb, var(--pos) 25%, transparent); color: var(--muted); }
.plan-item.on .plan-num { background: var(--pos); border-color: var(--pos); color: #fff; }

.recent { gap: 2px; }
.recent-row + .recent-row { border-top: 0; }
.recent-row { padding: 6px 4px; }
.sym-badge { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.sym-badge.long { background: var(--pos-bg); color: var(--pos); }
.sym-badge.short { background: var(--neg-bg); color: var(--neg); }
.pnl-pill { padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.pnl-pill.pos { background: var(--pos-bg); } .pnl-pill.neg { background: var(--neg-bg); } .pnl-pill.flat { background: var(--chip); }

/* capsule bars */
.bar-track::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: min(26px, 62%); transform: translateX(-50%); border-radius: 10px; background: var(--chip); }
.bar { left: 50%; right: auto; width: min(26px, 62%); transform: translateX(-50%); border-radius: 8px; }
.bar-zero { opacity: .5; }

/* ============================ round 3: analytics ============================ */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tile { padding: 10px 11px; border-radius: 13px; background: var(--chip); border: 1px solid var(--glass-edge); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile-label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tile b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile small { font-size: 10.5px; color: var(--faint); }
.perf-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.perf-top .rail-big { margin-bottom: 0; }
.risk-top { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.risk-top .rail-big { margin: 0; }
.risk-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--neg-bg); color: var(--neg); display: flex; align-items: center; justify-content: center; flex: none; }

.faceoff { margin-top: 4px; }
.fo-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; margin: 4px 0 12px; }
.fo-vs { padding: 2px 8px; border-radius: 99px; background: var(--chip); font-size: 10.5px; font-weight: 700; color: var(--muted); }
.fo-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 10px; }
.fo-side { display: flex; flex-direction: column; gap: 4px; }
.fo-side.pos { align-items: flex-end; }
.fo-side b { font-size: 13px; font-weight: 800; }
.fo-track { width: 100%; height: 7px; border-radius: 9px; background: var(--chip); display: flex; overflow: hidden; }
.fo-side.pos .fo-track { justify-content: flex-end; }
.fo-track i { display: block; height: 100%; border-radius: 9px; }
.fo-side.pos i { background: var(--pos); } .fo-side.neg i { background: var(--neg); }
.fo-label { font-size: 10px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.equity-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 16px 18px; }
.eq-side { display: flex; flex-direction: column; gap: 7px; }
.eq-now { font-size: 28px; font-weight: 850; letter-spacing: -0.04em; margin-bottom: 4px; }
.eq-stat { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding-top: 7px; border-top: 1px solid var(--line); }
.eq-stat span { color: var(--muted); }
.eq-side .seg { margin-top: auto; align-self: flex-start; }
.eq-chart { min-width: 0; }
.eq-legend { display: flex; gap: 14px; justify-content: flex-end; font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.eq-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-eq { width: 14px; height: 3px; border-radius: 3px; background: var(--pos); }
.lg-hwm { width: 14px; border-top: 2px dashed var(--muted); }
.lg-dd { width: 10px; height: 10px; border-radius: 3px; background: var(--neg-bg); border: 1px solid var(--neg); }
.dd-fill { fill: var(--neg); fill-opacity: .16; }
.hwm-line { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .75; }
.chart-grid.fill-last > .card:last-child:nth-child(odd) { grid-column: span 2; }

.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin: 8px 0 2px; }
.vs-side { padding: 11px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; border: 1px solid transparent; min-width: 0; }
.vs-side.long { background: var(--pos-bg); border-color: color-mix(in srgb, var(--pos) 22%, transparent); }
.vs-side.short { background: var(--neg-bg); border-color: color-mix(in srgb, var(--neg) 22%, transparent); }
.vs-tag { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vs-tag .ls-ic { width: 18px; height: 18px; }
.vs-net { font-size: 19px; font-weight: 850; letter-spacing: -0.03em; white-space: nowrap; }
.vs-side small { font-size: 11px; color: var(--muted); }
.vs-side small b { color: var(--text); }
.vs-mid { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.vs + .ls-split { margin-top: 12px; }

/* ============================ round 4: background, import, sync ============================ */
.bg-swatches button { box-shadow: inset 0 0 0 1px var(--line-strong); }
.color-pick { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(#f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f472b6, #f87171); color: #fff; cursor: pointer; position: relative; overflow: hidden; }
.color-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.warn-text { color: var(--warn); font-weight: 600; margin: 6px 0; }
code { font: 600 12px/1.4 ui-monospace, Consolas, monospace; padding: 1px 6px; border-radius: 6px; background: var(--chip); border: 1px solid var(--line); word-break: break-all; }

.imp-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
.imp-map { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; }
.imp-map summary { cursor: pointer; font-weight: 650; padding: 2px 0; }
.imp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; margin-top: 12px; }
.imp-grid .field { margin-bottom: 10px; }
.imp-status { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; margin: 4px 0 8px; }
.imp-preview { border: 1px solid var(--line); border-radius: 14px; padding: 4px; max-height: 300px; overflow-y: auto; }
.imp-row { display: grid; grid-template-columns: 150px 70px 64px 44px minmax(0, 1fr) 100px; gap: 10px; align-items: center; padding: 8px 10px; font-size: 13px; }
.imp-row + .imp-row { border-top: 1px solid var(--line); }
.imp-row > b:last-child { text-align: right; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.sync-card { padding: 16px; border-radius: 18px; background: var(--chip); border: 1px solid var(--glass-edge); margin-bottom: 14px; }
.sync-card .row.wrap { margin: 10px 0 6px; }
.sync-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sync-head small { display: block; margin-top: 2px; }
.sync-logo { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 13px; flex: none; }
.sync-map { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.sync-map-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }
.sync-map-row select { height: 34px; }
.sync-acc { margin-top: 10px; }
.steps { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; }

/* ============================ flat paper redesign (applies to every page) ============================ */
.glass, .card { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border: 1px solid var(--glass-edge); }
.glass-strong { backdrop-filter: none; -webkit-backdrop-filter: none; }
.eyebrow, .cal-mono, .mono { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#view { padding: 30px 28px 40px; max-width: 1840px; }

.topbar { position: sticky; top: 0; margin: 0; height: 72px; border-radius: 0; padding: 0 max(28px, calc((100% - 1784px) / 2)); background: color-mix(in srgb, var(--bg) 92%, transparent); border: 0; border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(10px); }
.brand { font-size: 22px; font-weight: 800; letter-spacing: -0.05em; gap: 0; }
.brand .dot { color: var(--pos); }
/* logo | tabs | buttons: the tabs start right after the logo, so a wider asset/account button never moves them */
.topbar { display: grid; grid-template-columns: auto minmax(0, auto) minmax(max-content, 1fr); column-gap: 56px; }
.topbar .brand { justify-self: start; }
.topbar-right { justify-self: end; }
.nav { gap: 30px; height: 100%; flex: none; }
.nav a { height: 100%; padding: 0 2px; border-radius: 0; background: none !important; box-shadow: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; font-size: 15px; font-weight: 500; color: var(--muted); }
.nav a .ic { display: none; }
.nav a.on { color: var(--text); border-bottom-color: var(--text) !important; }
.sync-pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--glass); font: 500 11px var(--mono); letter-spacing: .06em; color: var(--text); white-space: nowrap; }
.sync-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.sync-pill.on i { background: var(--pos); }
.pill-select, .asset-btn { height: 38px; border-radius: 99px; background-color: var(--glass); border: 1px solid var(--line-strong); }
.asset-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-weight: 550; white-space: nowrap; }
.btn { border-radius: 99px; }
.btn-ghost { background: var(--glass); border-color: var(--line-strong); }
.icon-btn { border-radius: 99px; }
.seg { background: var(--glass); border: 1px solid var(--line-strong); border-radius: 99px; padding: 4px; }
.seg button { border-radius: 99px; padding: 7px 16px; font-size: 14px; }
.seg button.on { background: var(--ink); color: var(--ink-text); box-shadow: none; }
.seg.xs button { padding: 4px 10px; font-size: 11.5px; }
input:not([type=checkbox]):not([type=range]), select, textarea { border-radius: 12px; border-color: var(--line-strong); }
.modal { background: var(--glass) !important; border: 1px solid var(--line) !important; }
.chip { background: var(--glass); border-color: var(--line-strong); }
.chip.on { background: var(--ink); color: var(--ink-text); }

/* page headers: mono crumb, big title, serif subtitle */
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin: 0 0 24px; }
.ph-crumb { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ph h1 { font-size: clamp(34px, 3.2vw, 48px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
.ph h1 span { color: var(--faint); font-weight: 700; }
.ph-sub { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--muted); margin-top: 6px; }
.ph-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nav-arrows { display: flex; align-items: center; gap: 8px; }
.nav-arrows b { min-width: 52px; text-align: center; font-size: 17px; font-weight: 700; }
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--glass); display: inline-flex; align-items: center; justify-content: center; }
.round-btn:hover { border-color: var(--text); }

/* asset filter popover */
.pop { position: absolute; z-index: 60; min-width: 220px; max-height: 360px; overflow-y: auto; padding: 8px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); }
.pop label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-weight: 550; }
.pop label:hover { background: var(--chip); }
.pop label small { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.pop input { accent-color: var(--ink); width: 16px; height: 16px; }
.pop .pop-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 6px; padding: 8px 6px 2px; }
.pop .pop-foot button { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pop .pop-foot button:hover { color: var(--text); }

/* ============================ journal: P&L calendar ============================ */
.pnl { display: grid; grid-template-columns: minmax(0, 1fr) 450px; gap: 28px; align-items: start; }
.pnl-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pnl-side { display: flex; flex-direction: column; gap: 28px; }
.pnl-cal { padding: 26px 24px 18px; }
.pc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .42fr)) minmax(0, .9fr); gap: 12px; }
.pc-h { font: 500 10.5px var(--mono); letter-spacing: .08em; color: var(--muted); padding: 0 6px 4px; }
.pc-cell { position: relative; min-height: 164px; border-radius: 16px; padding: 14px 16px 12px; display: flex; flex-direction: column; text-align: left; border: 1px solid transparent; min-width: 0; }
.pc-cell .pc-d { font-size: 14px; font-weight: 600; }
.pc-cell.out .pc-d, .pc-cell.empty .pc-d { color: var(--faint); font-weight: 500; }
.pc-cell.traded { border-color: var(--line-strong); background: var(--glass); cursor: pointer; transition: transform .12s, border-color .12s; }
.pc-cell.traded:hover { transform: translateY(-2px); border-color: var(--text); }
.pc-cell.future { border: 1px dashed var(--line-strong); }
.pc-cell.weekend { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 8px); border-radius: 14px; }
.pc-cell.weekend.traded { background: var(--glass); }
.pc-cell.satout { background: var(--chip); border-color: transparent; cursor: pointer; }
.pc-cell.today { border: 1.5px solid var(--text); }
.pc-cell.sel { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.pc-cell.sel .pc-meta, .pc-cell.sel .pc-meta b { color: color-mix(in srgb, var(--ink-text) 60%, transparent); }
.pc-today { position: absolute; top: 12px; right: 12px; font: 600 9.5px var(--mono); letter-spacing: .06em; padding: 3px 8px; border-radius: 99px; border: 1px solid currentColor; }
.pc-spark { height: 46px; margin: 12px 0 6px; }
.pc-spark svg { width: 100%; height: 100%; overflow: visible; display: block; }
.pc-spark .base { stroke: var(--line-strong); stroke-dasharray: 2 3; }
.pc-pnl { display: flex; align-items: center; gap: 7px; font-size: clamp(18px, 1.55vw, 26px); font-weight: 750; letter-spacing: -0.035em; white-space: nowrap; margin-top: auto; }
.pc-tri { font-size: 11px; }
.pc-tri.pos { color: var(--pos); } .pc-tri.neg { color: var(--neg); }
.pc-cell.sel .pc-tri.pos { color: color-mix(in srgb, var(--pos) 60%, #fff); }
.pc-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font: 500 9.5px var(--mono); letter-spacing: .06em; color: var(--muted); }
.wl-dots { display: flex; gap: 3px; flex-wrap: wrap; max-width: 60%; }
.wl-dots i { width: 7px; height: 7px; border-radius: 50%; }
.wl-dots i.w { background: var(--pos); }
.wl-dots i.l { border: 1.3px solid var(--neg); }
.wl-dots i.b { border: 1.3px solid var(--faint); }
.pc-cell.sel .wl-dots i.w { background: color-mix(in srgb, var(--pos) 60%, #fff); }
.pc-satout { font-family: var(--serif); font-style: italic; font-size: 24px; margin-top: auto; }
.pc-week { background: var(--chip); border-radius: 16px; padding: 14px 18px 12px; display: flex; flex-direction: column; min-height: 164px; }
.pc-week .pc-pnl { margin-top: 26px; }
.pc-week-bar { height: 3px; border-radius: 3px; background: var(--line-strong); margin: 18px 0 auto; overflow: hidden; }
.pc-week-bar i { display: block; height: 100%; border-radius: 3px; }
.pc-week-bar i.pos { background: var(--pos); } .pc-week-bar i.neg { background: var(--neg); }
.pc-legend { display: flex; align-items: center; gap: 22px; margin-top: 16px; padding: 0 6px; font: 500 10.5px var(--mono); letter-spacing: .08em; color: var(--muted); }
.pc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pc-legend .grow { flex: 1; }
.lg-line { width: 18px; height: 1.5px; background: var(--muted); }

.net { padding: 30px; }
.net-num { font-size: clamp(44px, 3.6vw, 64px); font-weight: 800; letter-spacing: -0.055em; margin-top: 16px; line-height: 1; }
.net-num small { font-size: .45em; color: var(--faint); letter-spacing: -0.02em; font-weight: 600; }
.vs-pill { display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; padding: 5px 12px; border-radius: 99px; font: 500 11px var(--mono); letter-spacing: .05em; }
.vs-pill.pos { background: var(--pos-bg); color: var(--pos); } .vs-pill.neg { background: var(--neg-bg); color: var(--neg); }
.net-chart { margin: 26px 0 26px; height: 120px; }
.net-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.stat-box { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; }
.stat-box > div { padding: 16px 20px; border-bottom: 1px solid var(--line-strong); }
.stat-box > div:nth-child(odd) { border-right: 1px solid var(--line-strong); }
.stat-box > div:nth-last-child(-n+2) { border-bottom: 0; }
.stat-box span { display: block; font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.stat-box b { display: block; font-size: 22px; font-weight: 650; letter-spacing: -0.03em; margin-top: 8px; }
.disc { padding: 30px; }
.disc-body { display: flex; align-items: center; gap: 24px; margin-top: 20px; }
.disc-ring { position: relative; width: 98px; height: 98px; flex: none; }
.disc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.disc-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 750; }
.disc-body h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.disc-body p { color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 6px; }
.pat { padding: 30px; }
.pat-item { display: grid; grid-template-columns: 30px 1fr; gap: 4px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; }
.pat .row-sb + .pat-item { margin-top: 14px; }
.pat-item span { font: 500 10.5px var(--mono); color: var(--faint); padding-top: 5px; }
.pat-item b { font-weight: 650; }
.pnl-row2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; }
.selday { padding: 30px; }
.selday-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 18px; }
.selday-top h3 { font-size: 23px; font-weight: 650; letter-spacing: -0.03em; }
.selday-top .big { font-size: 34px; font-weight: 750; letter-spacing: -0.04em; }
.st-head, .st-row { display: grid; grid-template-columns: 70px 80px minmax(0, 1fr) 60px 90px; gap: 10px; align-items: center; }
.st-head { font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.st-row { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.st-row:hover { background: var(--glass-hover); }
.st-row .t { font: 500 13px var(--mono); color: var(--muted); }
.side-pill { justify-self: start; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line-strong); font: 600 11px 'Inter'; letter-spacing: .04em; text-transform: uppercase; }
.st-row .sym { font-weight: 700; }
.st-row .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-row .r { text-align: right; font-family: var(--mono); font-size: 13.5px; }
.sel-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.sel-chips span { padding: 7px 13px; border-radius: 10px; border: 1px solid var(--line-strong); font-size: 13.5px; }
.sel-quote { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--muted); margin-top: 18px; }
.wkday { padding: 30px; }
.wk-bars { display: flex; align-items: flex-end; gap: 14px; height: 170px; margin-top: 40px; border-bottom: 1px solid var(--line-strong); }
.wk-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
.wk-col b { font: 500 11.5px var(--mono); }
.wk-col i { width: min(42px, 70%); border-radius: 8px 8px 0 0; background: var(--ink); min-height: 3px; }
.wk-col i.neg { background: var(--neg); }
.wk-col b.neg { color: var(--neg); }
.wk-labels { display: flex; gap: 14px; margin-top: 12px; }
.wk-labels span { flex: 1; text-align: center; font: 500 10.5px var(--mono); letter-spacing: .08em; color: var(--muted); }
.wk-note { margin-top: 26px; padding: 18px 20px; border-radius: 14px; background: var(--chip); font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.wk-note b { color: var(--text); }
.yr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.yr-m { padding: 20px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--glass); text-align: left; transition: border-color .12s; }
.yr-m:hover { border-color: var(--text); }
.yr-m.cur { border: 1.5px solid var(--text); }
.yr-m b { display: block; font-size: 24px; font-weight: 750; letter-spacing: -0.03em; margin: 10px 0 14px; }
.yr-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.yr-heat i { aspect-ratio: 1; border-radius: 3px; background: var(--chip); }
.yr-heat i.pos { background: var(--pos); } .yr-heat i.neg { background: var(--neg); }
.yr-heat i.pos.lo { opacity: .45; } .yr-heat i.neg.lo { opacity: .45; }
.yr-heat i.blank { background: transparent; }
.wk-list .day-group { margin-bottom: 16px; }
.app-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 60px; padding-top: 24px; font: 500 10.5px var(--mono); letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }

@media (max-width: 1400px) { .pnl { grid-template-columns: 1fr; } .pnl-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
@media (max-width: 900px) {
  .pc-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .pc-grid > .pc-week, .pc-h.wk { display: none; }
  .pc-cell { min-height: 70px; padding: 6px; }
  .pc-spark, .pc-meta, .pc-tri { display: none; }
  .pc-pnl { font-size: 11px; }
  .pnl-row2 { grid-template-columns: 1fr; }
  .yr-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================ economic calendar ============================ */
.cal-page {
  --c-card: #ffffff; --c-line: #eceae5; --c-soft: #f5f4f1; --c-ink: #111111; --c-mute: #8b8a85; --c-faint: #b9b8b2;
  --c-h: var(--neg); --c-m: #e8a23a; --c-l: #d9d8d3; --c-g: var(--pos);
  max-width: 1500px; margin: 0 auto; padding: 18px 8px 0; color: var(--c-ink);
}
[data-theme="dark"] .cal-page { --c-card: #14161b; --c-line: rgba(255, 255, 255, .08); --c-soft: rgba(255, 255, 255, .04); --c-ink: #f3f4f6; --c-mute: #8e939d; --c-faint: #5c616b; --c-l: #3a3d45; }
.cal-mono { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 11px; letter-spacing: .06em; color: var(--c-mute); text-transform: uppercase; font-weight: 500; }
.cal-page button { color: inherit; }
.cal-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.cal-kicker { display: flex; align-items: center; gap: 14px; font: 500 12px 'JetBrains Mono', monospace; letter-spacing: .06em; color: var(--c-mute); margin-bottom: 14px; }
.cal-kicker i { width: 34px; height: 1px; background: var(--c-faint); }
.cal-title { font-size: clamp(48px, 6.4vw, 104px); line-height: .9; font-weight: 900; letter-spacing: -0.065em; margin: 0; text-transform: uppercase; }
.cal-hl { background: var(--c-ink); color: var(--c-card); padding: 0 .1em; margin: 0 -.02em; box-decoration-break: clone; }
.cal-lede { margin-top: 26px; font-size: 18px; color: var(--c-mute); line-height: 1.6; }
.cal-lede em { font-family: 'Instrument Serif', serif; font-size: 22px; color: var(--c-ink); }
.cal-weekbox { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.cal-week-nav { display: flex; align-items: center; gap: 20px; }
.cal-week-nav b { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; }
.cal-round { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-card); display: flex; align-items: center; justify-content: center; transition: .15s; }
.cal-round:hover { border-color: var(--c-ink); }
.cal-live { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--c-line); background: var(--c-card); font: 500 11px 'JetBrains Mono', monospace; letter-spacing: .05em; color: var(--c-mute); }
.cal-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-g) 20%, transparent); }
.cal-live.none i { background: var(--c-m); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-m) 20%, transparent); }
.cal-live.cached i { background: var(--c-faint); box-shadow: none; }

.cal-filters { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cal-imp { display: flex; gap: 4px; padding: 5px; border-radius: 99px; border: 1px solid var(--c-line); background: var(--c-card); }
.cal-imp button { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 99px; font-size: 16px; color: var(--c-mute); }
.cal-imp button.on { background: var(--c-ink); color: var(--c-card); }
.cal-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-cur { padding: 8px 15px; border-radius: 99px; border: 1px solid var(--c-line); background: var(--c-card); font-weight: 600; font-size: 14px; color: var(--c-faint) !important; transition: .15s; }
.cal-cur.on { color: var(--c-ink) !important; }
.cal-search { width: 260px !important; height: 42px !important; border-radius: 99px !important; border: 1px solid var(--c-line) !important; background: var(--c-card) !important; padding: 0 20px !important; font-size: 15px !important; }

.imp { display: inline-flex; gap: 3px; vertical-align: middle; }
.imp i { width: 6px; height: 14px; border-radius: 2px; background: var(--c-l); }
.imp.high i.on { background: var(--c-h); }
.imp.medium i.on { background: var(--c-m); }
.imp.low i.on, .imp.holiday i.on { background: var(--c-faint); }
.imp.big i { width: 8px; height: 22px; }
.cal-imp button.on .imp i:not(.on) { background: rgba(255, 255, 255, .25); }

.cal-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-bottom: 34px; }
.cal-day { text-align: left; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 20px; padding: 20px 24px 22px; transition: transform .15s; }
.cal-day:hover { transform: translateY(-2px); }
.cal-day-top { display: flex; justify-content: space-between; align-items: center; height: 24px; font: 500 11px 'JetBrains Mono', monospace; letter-spacing: .06em; color: var(--c-mute); }
.cal-day-top em { font-style: normal; background: var(--c-g); color: #fff; padding: 4px 10px; border-radius: 99px; font-size: 10.5px; }
.cal-day > b { display: block; font-size: 56px; font-weight: 900; letter-spacing: -0.06em; line-height: 1; margin: 6px 0 22px; }
.cal-day-meta { display: flex; justify-content: space-between; font-size: 15px; color: var(--c-mute); margin-bottom: 12px; }
.cal-day-bar { display: flex; gap: 4px; height: 6px; }
.cal-day-bar i { border-radius: 9px; min-width: 0; }
.cal-day-bar i[style*="flex:0"] { display: none; }
.cal-day-bar .h { background: var(--c-h); } .cal-day-bar .m { background: var(--c-m); } .cal-day-bar .l { background: var(--c-l); }
.cal-day.today { background: #121212; border-color: #121212; color: #fff; }
.cal-day.today .cal-day-meta, .cal-day.today .cal-day-top { color: #a4a39e; }
.cal-day.today .cal-day-bar .l { background: #4a4a48; }

.cal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 30px; align-items: start; }
.cal-table { background: var(--c-card); border: 1px solid var(--c-line); border-radius: 22px; overflow: hidden; }
.cal-th, .cal-row { display: grid; grid-template-columns: 70px 80px minmax(0, 1fr) 66px 76px 86px 86px 24px; align-items: center; gap: 12px; padding: 0 30px; }
.cal-th { height: 66px; font: 500 11px 'JetBrains Mono', monospace; letter-spacing: .06em; color: var(--c-mute); border-bottom: 1px solid var(--c-line); }
.cal-th .r, .cal-row .r { text-align: right; }
.cal-group { display: flex; align-items: center; gap: 12px; padding: 0 30px; height: 64px; background: var(--c-soft); border-bottom: 1px solid var(--c-line); }
.cal-group b { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.cal-group .grow-r { margin-left: auto; }
.cal-row { min-height: 88px; border-bottom: 1px solid var(--c-line); position: relative; }
.cal-row .t { font-size: 14px; color: var(--c-mute); letter-spacing: .02em; }
.cal-cur-cell { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.flag { border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.cal-ev { min-width: 0; }
.cal-ev b { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.cal-ev small { display: block; font-size: 14px; color: var(--c-mute); margin-top: 3px; }
.cal-row.past .cal-ev b { color: var(--c-mute); }
.cal-row .cal-mono.r { font-size: 14px; color: var(--c-ink); letter-spacing: .01em; text-transform: none; }
.cal-row .cal-mono.r.up { color: var(--c-g); } .cal-row .cal-mono.r.down { color: var(--c-h); }
.cal-row .hol { font-size: 10px; }
.tag { font-style: normal; font: 600 11px 'Inter', sans-serif; padding: 3px 9px; border-radius: 99px; letter-spacing: .02em; }
.tag.live { background: var(--c-g); color: #fff; }
.tag.vol { background: #e6ebfb; color: #3550b8; }
[data-theme="dark"] .tag.vol { background: rgba(80, 110, 230, .2); color: #9fb2ff; }
.cal-row.live { background: linear-gradient(90deg, color-mix(in srgb, var(--c-g) 10%, transparent), transparent 60%); box-shadow: inset 4px 0 0 var(--c-g); }
.cal-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--c-line); justify-self: end; transition: .15s; }
.cal-dot:hover { border-color: var(--c-ink); }
.cal-dot.on { background: var(--c-ink); border-color: var(--c-ink); }
.cal-empty { padding: 24px 30px; color: var(--c-mute); font-size: 14px; border-bottom: 1px solid var(--c-line); }
.cal-foot { display: flex; justify-content: space-between; align-items: center; padding: 30px; }
.cal-foot button:first-child { font-weight: 600; font-size: 16px; }
.cal-foot button:hover { text-decoration: underline; }

.cal-side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 82px; }
.row-sb { display: flex; justify-content: space-between; align-items: center; }
.cal-next { background: #141414; color: #fff; border-radius: 22px; padding: 30px; }
.cal-next .cal-mono { color: #a3a29d; }
.cal-count { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 76px; font-weight: 900; letter-spacing: -0.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.cal-count i { width: 9px; height: 34px; background: radial-gradient(circle, #6b6b68 4px, transparent 4.5px) top / 9px 13px no-repeat, radial-gradient(circle, #6b6b68 4px, transparent 4.5px) bottom / 9px 13px no-repeat; flex: none; }
.cal-count-l { display: flex; gap: 0; margin: 14px 0 28px; }
.cal-count-l span { width: 120px; }
.cal-next-ev { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #2c2c2b; padding-top: 26px; }
.cal-next-ev b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.cal-next-ev small { display: block; color: #a3a29d; font-size: 15px; margin-top: 6px; }
.cal-next .imp i { background: #3a3a39; }
.cal-next-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.cal-next-boxes div { background: #232322; border-radius: 14px; padding: 14px 16px; }
.cal-next-boxes span { font-size: 10px; display: block; }
.cal-next-boxes b { display: block; font-size: 20px; color: #fff; margin-top: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cal-next-empty { color: #a3a29d; margin-top: 20px; }

.cal-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: 22px; padding: 30px; }
.ses { position: relative; margin-top: 18px; }
.ses-row { display: grid; grid-template-columns: 100px 1fr; align-items: center; height: 40px; font-size: 15px; }
.ses-scale { height: 24px; }
.ses-scale > div { display: flex; justify-content: space-between; font-size: 10px; color: var(--c-faint); }
.ses-track { position: relative; height: 26px; border-radius: 8px; background: var(--c-soft); overflow: hidden; }
.ses-track i { position: absolute; top: 0; bottom: 0; border-radius: 8px; opacity: .55; }
.ses-track i.open { opacity: 1; }
.ses-syd { background: #dfe6fb; } .ses-syd.open { background: #8ea6f2; }
.ses-tok { background: #fbe9d7; } .ses-tok.open { background: #f2b273; }
.ses-lon { background: #dcf1e3; } .ses-lon.open { background: #6fcf97; }
.ses-ny { background: #c9ecd6; } .ses-ny.open { background: var(--c-g); }
.ses-now { position: absolute; top: 24px; bottom: -6px; left: calc(100px + (100% - 100px) * var(--xf, 0)); width: 2px; background: var(--c-ink); }
.ses-now span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--c-ink); background: var(--c-card); padding: 0 3px; }
.ses-line { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 20px; color: var(--c-mute); margin-top: 20px; }
.al-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.al-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cal-card .row-sb + .al-row { margin-top: 10px; }
.al-row b { display: block; font-size: 16px; font-weight: 500; }
.al-row small { display: block; color: var(--c-mute); font-size: 13.5px; margin-top: 3px; }
.al-sw { width: 46px; height: 26px; border-radius: 99px; background: var(--c-l); position: relative; transition: .2s; flex: none; }
.al-sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: .2s; }
.al-sw.on { background: var(--c-g); }
.al-sw.on i { left: 23px; }
.cal-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--c-line); margin-top: 60px; padding: 28px 0 10px; font-size: 10.5px; }

@media (max-width: 1280px) {
  .cal-grid { grid-template-columns: 1fr; }
  .cal-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
@media (max-width: 900px) {
  .cal-days { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
  .cal-th { display: none; }
  .cal-row { grid-template-columns: 54px 70px minmax(0, 1fr) 50px; padding: 12px 16px; }
  .cal-row > span:nth-child(5), .cal-row > span:nth-child(6), .cal-row > span:nth-child(7) { display: none; }
  .cal-group { padding: 0 16px; }
}

.avatar-fallback { background: linear-gradient(145deg, #d9d7d1, #b9b7b0); color: #fff; }
.cal-link { display: flex; align-items: center; gap: 22px; padding: 18px 22px; transition: border-color .12s; }
.cal-link:hover { border-color: var(--text); }
.cal-link > span:nth-child(2) { flex: 1; min-width: 0; }
.strip { display: flex; gap: 4px; flex-wrap: wrap; }
.strip i { width: 14px; height: 14px; border-radius: 4px; background: var(--chip); }
.strip i.pos { background: var(--pos); } .strip i.neg { background: var(--neg); }
.strip i.now { outline: 1.5px solid var(--text); outline-offset: 1px; }
.dash-left, .dash-right, .rail { top: 96px; }
.kpis .hero .hero-num { font-weight: 800; }
.plan-item, .tile, .sync-card, .setup-item { background: var(--glass); border-color: var(--line-strong); }
.trade-card { border-radius: 18px; }

/* ---- round 6: a little more compact everywhere ---- */
#view { padding: 22px 24px 32px; }
.ph { margin-bottom: 18px; }
.ph h1 { font-size: clamp(28px, 2.4vw, 38px); }
.ph-sub { font-size: 17px; margin-top: 4px; }
.ph-crumb { margin-bottom: 6px; }
.card { padding: 16px; }
.stat { padding: 10px 14px; }
.stat-num { font-size: 20px; }
.kpis .hero .hero-num { font-size: clamp(24px, 1.9vw, 30px); }
.dash, .tri { gap: 14px; }
.dash-main, .tri-main { gap: 12px; }
.rail-card { padding: 12px 14px; }

/* header strip beside the greeting */
.hs { display: flex; gap: 10px; flex-wrap: wrap; margin-right: auto; margin-left: 28px; align-self: center; }
.hs-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--glass); min-width: 140px; max-width: 300px; }
.hs-item b { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-item small { font-size: 12px; color: var(--muted); }
a.hs-item:hover { border-color: var(--text); }
@media (max-width: 1250px) { .hs { display: none; } }

/* bar charts: solid black bars, red when negative, no tracks */
.bar-track::before { display: none; }
.bar { width: min(30px, 56%); border-radius: 6px 6px 2px 2px; }
.bar.neg { border-radius: 2px 2px 6px 6px; }
.bar.pos, .bar.acc { background: var(--ink); }
.bar.neg { background: var(--neg); }
.bar-val { font-family: var(--mono); font-size: 10px; font-weight: 500; }
.bar-val.pos, .bar-val.acc { color: var(--text); }
.bar-zero { opacity: 1; background: var(--line-strong); }
.bar-label { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

/* P&L calendar: smaller squares; dashboard version smaller still */
.pnl { gap: 18px; }
.pnl-main, .pnl-side { gap: 18px; }
.pnl-cal { padding: 18px 18px 14px; }
.pc-grid { gap: 8px; }
.pc-cell, .pc-week { min-height: 132px; padding: 12px 13px 10px; }
.pc-spark { height: 34px; margin: 8px 0 4px; }
.pc-pnl { font-size: clamp(16px, 1.3vw, 22px); }
.pc-week .pc-pnl { margin-top: 18px; }
.pc-week-bar { margin-top: 14px; }
.pnl-cal.compact .card-head { margin-bottom: 14px; }
.pnl-cal.compact .pc-cell, .pnl-cal.compact .pc-week { min-height: 104px; padding: 10px 11px 8px; }
.pnl-cal.compact .pc-spark { height: 24px; margin: 6px 0 2px; }
.pnl-cal.compact .pc-pnl { font-size: clamp(14px, 1.1vw, 18px); }
.pnl-cal.compact .pc-week .pc-pnl { margin-top: 12px; }
.pcc-month { font-size: 17px; font-weight: 750; letter-spacing: -0.02em; margin-left: 6px; }
.pcc-month span { color: var(--faint); }
.round-btn.sm { width: 32px; height: 32px; }
.net, .disc, .pat, .selday, .wkday { padding: 22px; }
.net-num { font-size: clamp(36px, 2.8vw, 50px); }
.net-chart { height: 64px; margin: 16px 0 18px; }
.stat-box > div { padding: 12px 16px; }
.stat-box b { font-size: 18px; margin-top: 6px; }
.disc-ring { width: 80px; height: 80px; }
.disc-body h3 { font-size: 17px; }
.disc-body p, .pat-item { font-size: 14.5px; }
.pat-item { padding: 14px 0; }
.wk-bars { height: 130px; margin-top: 28px; }
.selday-top { margin: 14px 0 12px; }
.selday-top .big { font-size: 28px; }
.st-row { padding: 11px 0; font-size: 14px; }

/* analytics: wins vs losses comparison table */
.cmp { margin-top: 10px; }
.cmp-split { display: flex; gap: 3px; height: 6px; margin-bottom: 12px; }
.cmp-split i { border-radius: 6px; }
.cmp-split .w { background: var(--pos); } .cmp-split .l { background: var(--neg); }
.cmp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cmp-row:first-of-type { border-top: 0; }
.cmp-row.head { font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted); padding-top: 0; }
.cmp-row span:first-child { color: var(--muted); }
.cmp-row b { font-family: var(--mono); font-size: 13px; font-weight: 500; text-align: right; min-width: 70px; }

/* ============================ free-form card grid (layout editor) ============================ */
.lgrid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: 14px; grid-auto-rows: 8px; position: relative; }
.lw { position: relative; min-width: 0; padding-bottom: 14px; }
.lw-body { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.lw-body > .card, .lw-body > a.card { flex: 1; min-height: 0; margin: 0; overflow: hidden !important; }
/* wrapper added by Layout.fitAll: same layout as the card, scaled down when the card is small */
.fit { display: inherit; flex-direction: inherit; flex-wrap: inherit; align-items: inherit; align-content: inherit; justify-content: inherit; gap: inherit;
  grid-template-columns: inherit; grid-template-rows: inherit; transform-origin: 0 0; box-sizing: border-box; }
.lay-btn.on { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }

/* edit mode */
.lay-bar { position: sticky; top: 84px; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 14px 12px 20px; border-radius: 18px; background: var(--glass); border: 1px solid var(--text); box-shadow: 0 10px 40px rgba(20, 18, 10, .12); }
.lay-bar-text b { display: block; font-size: 15px; }
.lay-bar-text span { font-size: 12.5px; color: var(--muted); }
.lay-bar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lay-add-wrap { position: relative; }
.lay-add { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 220px; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.lay-add button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; font-weight: 600; text-align: left; }
.lay-add button:hover { background: var(--chip); }
.lgrid.editing { background-image: linear-gradient(to right, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px); background-size: calc((100% + 14px) / 24) 100%; border-radius: 12px; }
.lgrid.editing .lw-body { pointer-events: none; user-select: none; }
.lgrid.editing .lw-body > .card { outline: 1.5px dashed var(--line-strong); outline-offset: 0; }
.lgrid.editing .lw:hover .lw-body > .card, .lw.active .lw-body > .card { outline: 2px solid var(--text); }
.lw.active { z-index: 20; }
.lw.active .lw-body > .card { box-shadow: 0 20px 50px rgba(0, 0, 0, .15); }
.lw-cover { position: absolute; inset: 0 0 14px 0; z-index: 4; cursor: grab; border-radius: 22px; }
.lay-moving, .lay-moving * { cursor: grabbing !important; user-select: none; }
.lay-resizing { user-select: none; }
.lw-tools { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 6px; pointer-events: none; }
.lw-tools > * { pointer-events: auto; }
.lw-grip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: 99px; background: var(--ink); color: var(--ink-text); font-size: 11.5px; font-weight: 600; cursor: grab; min-width: 0; max-width: calc(100% - 34px); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.lw-grip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-x { width: 26px; height: 26px; border-radius: 50%; background: var(--neg); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.rz { position: absolute; z-index: 5; }
.rz-n, .rz-s { left: 18px; right: 18px; height: 10px; cursor: ns-resize; }
.rz-n { top: -5px; } .rz-s { bottom: 9px; }
.rz-e, .rz-w { top: 18px; bottom: 32px; width: 10px; cursor: ew-resize; }
.rz-e { right: -5px; } .rz-w { left: -5px; }
.rz-ne, .rz-nw, .rz-se, .rz-sw { width: 16px; height: 16px; }
.rz-ne { top: -6px; right: -6px; cursor: nesw-resize; } .rz-sw { bottom: 8px; left: -6px; cursor: nesw-resize; }
.rz-nw { top: -6px; left: -6px; cursor: nwse-resize; } .rz-se { bottom: 8px; right: -6px; cursor: nwse-resize; }
.rz-n::after, .rz-s::after { content: ''; position: absolute; left: 50%; top: 3px; width: 34px; height: 4px; margin-left: -17px; border-radius: 4px; background: var(--text); opacity: .55; }
.rz-e::after, .rz-w::after { content: ''; position: absolute; top: 50%; left: 3px; width: 4px; height: 34px; margin-top: -17px; border-radius: 4px; background: var(--text); opacity: .55; }
.rz-ne::after, .rz-nw::after, .rz-se::after, .rz-sw::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--glass); border: 2px solid var(--text); }
.rz:hover::after { opacity: 1; }

.stat.hero { text-align: left; padding: 11px 16px; }
.stat.hero::before { display: none; }
.stat.hero .hero-num { font-size: clamp(24px, 1.9vw, 30px); margin: 2px 0 3px; letter-spacing: -0.045em; }
.lw .stat { min-width: 0; }
.lw .today-card .stat-text { width: 100%; }

/* content that adapts to the card's size */
.lw .stat { align-items: center; }
.lw .rail-card.score-card { align-items: center; justify-content: center; }
.lw .pnl-cal { display: flex; flex-direction: column; }
.lw .pnl-cal .pc-grid { flex: 1; grid-template-rows: auto; grid-auto-rows: var(--cell-h, auto); align-content: start; }
.mini-stat { padding: 12px 16px; }
.pc-cell, .pc-week { min-height: var(--cell-h, 132px) !important; }
.cell-tiny .pc-spark, .cell-tiny .pc-week-bar, .cell-tiny .pc-today, .cell-tiny .pc-tri { display: none; }
.cell-tiny .pc-cell, .cell-tiny .pc-week { padding: 6px 9px !important; }
.cell-tiny .pc-pnl { font-size: 13px !important; margin-top: 0 !important; }
/* tiny squares: date + P&L on one line, trades and win/loss dots underneath — always visible */
.cell-tiny .pc-cell, .cell-tiny .pc-week { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; column-gap: 6px; row-gap: 3px; }
.cell-tiny .pc-pnl { justify-self: end; }
.cell-tiny .pc-meta { grid-column: 1 / -1; margin-top: 0 !important; font-size: 8.5px; }
.cell-tiny .pc-week > .mono:first-child { display: none; }
.cell-tiny .pc-week > .mono:last-child { grid-column: 1 / -1; font-size: 8.5px; }
.cell-tiny .pc-week .pc-pnl { grid-column: 1 / -1; justify-self: start; }
.cell-tiny .pc-week .pc-pnl { margin: 0 !important; }
.pc-cell, .pc-week { overflow: hidden; }
.cell-mid .pc-spark { display: none; }
.cell-mid .pc-pnl { margin-top: auto !important; }
/* small squares: no mini chart, but trades and win/loss dots stay */
.cell-small .pc-spark, .cell-small .pc-week-bar { display: none; }
.cell-small .pc-meta { margin-top: 4px !important; font-size: 9px; }
.cell-small .pc-week > .mono:last-child { margin-top: 4px; font-size: 9px; }
.cell-small .wl-dots, .cell-tiny .wl-dots { flex-wrap: nowrap; overflow: hidden; }
.cell-small .wl-dots i, .cell-tiny .wl-dots i { width: 6px; height: 6px; flex: none; }
.cell-small .pc-cell, .cell-small .pc-week { padding: 9px 11px !important; }
.cell-small .pc-pnl { margin-top: auto !important; font-size: clamp(14px, 1.1vw, 18px) !important; }
.cell-small .pc-week .pc-pnl { margin-top: auto !important; }
.wide .pat-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.wide .pat-list .pat-item { border-top: 1px solid var(--line); }
.mini-stat { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.mini-stat b { font-size: 17px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-stat small { font-size: 12px; color: var(--muted); }
a.card.mini-stat:hover { border-color: var(--text); }

.lw-body > .card.plain { background: none; border: 0; padding: 0; box-shadow: none; }
.lgrid.editing .lw-body > .card.plain { outline-offset: 4px; border-radius: 18px; }
.feed { display: flex; flex-direction: column; gap: 14px; }
.lw .composer { margin: 0; }
.lw .cal-filters { margin: 0; padding: 10px 14px; display: flex; align-items: center; }
.lw .cal-days { margin: 0; height: 100%; }
.lw .cal-day { height: 100%; }
.lw .cal-table { padding: 0; border-radius: 22px; }
.lw .cal-th { position: sticky; top: 0; z-index: 2; background: var(--glass); }
.lw .cal-next { overflow: auto; }
.day-group.flat { border: 1px solid var(--line); border-radius: 14px; padding: 4px; margin-bottom: 10px; }
.mkt-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--glass); max-width: 320px; }
.mkt-btn b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-btn:hover { border-color: var(--text); }

/* ============================ backtest ============================ */
.bt-empty { max-width: 720px; margin: 40px auto; padding: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bt-empty h2 { font-size: 28px; letter-spacing: -0.03em; }
.bt-empty p { line-height: 1.6; }
.bt-chart { display: flex; flex-direction: column; padding: 12px 14px 10px; }
.bt-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.bt-bar .round-btn.sm { width: auto; min-width: 32px; padding: 0 6px; gap: 0; }
.bt-play { height: 32px; padding: 0 14px; font-size: 13px; min-width: 92px; }
.bt-jump { width: 140px !important; height: 32px !important; font-size: 12.5px !important; }
.bt-canvas { flex: 1; min-height: 0; position: relative; }
.bt-canvas canvas { position: absolute; inset: 0; display: block; touch-action: none; cursor: crosshair; }
.bt-order { display: flex; flex-direction: column; gap: 10px; }
.bt-price { font: 700 30px var(--mono); letter-spacing: -0.02em; }
.bt-order .field { margin-bottom: 0; }
.bt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bt-buy, .bt-sell { height: 46px; color: #fff; font-weight: 800; letter-spacing: .04em; }
.bt-buy { background: var(--pos); } .bt-sell { background: var(--neg); }
.bt-buy small, .bt-sell small { opacity: .65; font: 500 10px var(--mono); margin-left: 4px; }
.bt-buy:hover, .bt-sell:hover { filter: brightness(1.08); }
.bt-pos { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); }
.bt-pos.long { background: var(--pos-bg); } .bt-pos.short { background: var(--neg-bg); }
.bt-upnl { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; margin-top: 4px; }
.bt-stats { display: flex; flex-direction: column; gap: 10px; }
.bt-bal { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 10px; }
.bt-bal small { font-size: 14px; font-weight: 700; }
.bt-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bt-kpis div { padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line-strong); }
.bt-kpis span { display: block; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bt-kpis b { font-size: 16px; }
.bt-row { display: grid; grid-template-columns: 34px 130px 64px minmax(150px, 1.3fr) 80px 56px 100px 70px minmax(100px, 1.5fr); gap: 10px; align-items: center; padding: 9px 6px; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.bt-row:hover { background: var(--glass-hover); }
.bt-row.head { font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted); cursor: default; border-top: 0; }
.bt-row .r { text-align: right; }
.bt-row .mono { font-size: 11.5px; }
.bt-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
.bt-src { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bt-src-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line-strong); border-radius: 14px; cursor: pointer; color: var(--text); }
.bt-src-opt:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.bt-src-opt small { display: block; color: var(--muted); font-weight: 500; margin-top: 3px; line-height: 1.4; }
.bt-src-opt input { margin-top: 3px; accent-color: var(--ink); }

.score-card .card-head { align-self: stretch; }

/* analytics menus */
.an-menu { margin: -6px 0 18px; }
.an-menu button { font-size: 14px; padding: 8px 18px; }
.an-page { display: flex; flex-direction: column; gap: 14px; }
.an-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.an-kpi { display: flex; flex-direction: column; gap: 4px; }
.an-kpi b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.an-kpi small { color: var(--muted); font-size: 12px; }
.an-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.an-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.an-cols .eyebrow { display: block; margin: 6px 0 6px; }
.an-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.an-kv > span { color: var(--muted); }
.an-kv em { font-style: normal; font-size: 12px; min-width: 90px; text-align: right; }
.an-mvm .an-kv { display: grid; grid-template-columns: 1fr auto auto; }
.an-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; }
.an-ctl { display: inline-flex; align-items: center; gap: 8px; }
.an-ctl select { width: auto; height: 34px; }
.an-year { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.an-table { padding: 6px 10px; }
.an-tr { display: grid; grid-template-columns: minmax(130px, 1.6fr) repeat(calc(var(--cols) - 1), minmax(70px, 1fr)); gap: 10px; align-items: center; padding: 10px 8px; border-top: 1px solid var(--line); font-size: 13.5px; }
.an-tr.head { border-top: 0; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.an-tr.head button { text-align: left; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.an-tr.head button.r { text-align: right; }
.an-tr.head button.on { color: var(--text); }
.an-tr .r { text-align: right; }
.an-cmp-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.an-pick { display: flex; flex-direction: column; gap: 8px; }
.an-pick .row select { flex: 1; }
.an-pick > b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.an-pick.a { border-top: 3px solid var(--ink); } .an-pick.b { border-top: 3px solid var(--warn); }
.an-vs { align-self: center; font: 700 12px var(--mono); color: var(--muted); }
.an-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.an-dot.a { background: var(--ink); } .an-dot.b { background: var(--warn); }
.an-win { font-weight: 800; }
.an-lines { width: 100%; height: 470px; display: block; }
.an-lines text { font: 500 10px var(--mono); fill: var(--muted); }
.an-lines .gl { stroke: var(--line); } .an-lines .zero { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.an-lines path { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.an-lines .la { stroke: var(--ink); } .an-lines .lb { stroke: var(--warn); }
.an-year-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.an-month { display: flex; flex-direction: column; gap: 8px; }
.an-month b { font-size: 15px; }
.an-mh, .an-mg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.an-mh span { font: 500 9.5px var(--mono); color: var(--faint); text-align: center; }
.an-mg > * { aspect-ratio: 1; border-radius: 6px; font-size: 10.5px; display: flex; align-items: center; justify-content: center; color: var(--faint); background: var(--chip); }
.an-mg > i { background: none; }
.an-mg button.pos { background: color-mix(in srgb, var(--pos) calc(var(--a) * 100%), transparent); color: #fff; font-weight: 700; cursor: pointer; }
.an-mg button.neg { background: color-mix(in srgb, var(--neg) calc(var(--a) * 100%), transparent); color: #fff; font-weight: 700; cursor: pointer; }
.an-mg button.now { outline: 1.5px solid var(--text); }
.an-recap { padding: 12px 0; border-top: 1px solid var(--line); }
.an-recap p { margin-top: 6px; font-size: 14px; }
.an-ins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.an-in { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.an-in.good { background: var(--pos-bg); } .an-in.bad { background: var(--neg-bg); }
.an-tag { font: 700 9.5px var(--mono); letter-spacing: .08em; color: var(--muted); }
@media (max-width: 1200px) { .an-kpis { grid-template-columns: repeat(3, 1fr); } .an-two, .an-ins { grid-template-columns: 1fr; } .an-cols { grid-template-columns: 1fr; } .an-year-grid { grid-template-columns: repeat(3, 1fr); } }
.today-btn { height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--ink); color: var(--ink-text); font-weight: 650; font-size: 13px; white-space: nowrap; }
.today-btn.here { background: var(--glass); color: var(--muted); }
.today-btn:hover { filter: brightness(1.1); }
.nav-arrows .today-btn, .cal-week-nav .today-btn { height: 40px; }
.wl-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.wl-presets button { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600; color: var(--text); }
.wl-presets button.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.wl-presets i { width: 10px; height: 16px; border-radius: 3px; flex: none; }
.wl-presets button i:last-of-type { margin-right: 4px; }
.wl-custom { display: flex; gap: 12px; margin-top: 8px; }
.wl-custom label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wl-custom input { width: 44px; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 2px; background: var(--glass); }

/* dashboard header + scatter cards */
.dash-ph { align-items: center; flex-wrap: nowrap; }
.dash-hello { flex: none; }
.dash-hello h1 { font-size: 30px; white-space: nowrap; }
.snaps { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.snap { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--glass); min-width: 0; }
.snap b { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snap small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.snap:hover { border-color: var(--text); }
@media (max-width: 1300px) { .snaps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .dash-ph { flex-wrap: wrap; } .snaps { flex-basis: 100%; } }
.scatter text { font: 500 10px var(--mono); fill: var(--muted); }
.scatter .gl { stroke: var(--line); }
.scatter .vx { stroke-dasharray: 2 4; }
.scatter .zero { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.scatter circle { cursor: pointer; fill-opacity: .8; stroke: var(--glass); stroke-width: 1.5; transition: r .1s; }
.scatter circle.pos { fill: var(--pos); } .scatter circle.neg { fill: var(--neg); }
.scatter circle:hover { fill-opacity: 1; r: 8; }

/* journal month: daily breakdown */
.daily { display: flex; flex-direction: column; }
.dly-bars { display: flex; gap: 4px; align-items: stretch; margin: 4px 0 14px; }
.dly-col { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr 1fr auto; border-radius: 6px; padding: 0 1px; }
.dly-col:hover, .dly-col.sel { background: var(--chip); }
.dly-col small { font: 500 9.5px var(--mono); color: var(--muted); text-align: center; padding: 3px 0 2px; }
.dly-half { position: relative; display: block; border-color: var(--line-strong); }
.dly-half.up { border-bottom: 1px solid var(--line-strong); }
.dly-half i { position: absolute; left: 18%; right: 18%; border-radius: 4px; }
.dly-half.up i { bottom: 0; background: var(--ink); border-radius: 4px 4px 1px 1px; }
.dly-half.up i.pos { background: var(--pos); }
.dly-half.dn i { top: 0; background: var(--neg); border-radius: 1px 1px 4px 4px; }
.jd-grid { display: grid; gap: 12px; flex: 1; min-height: 0; }
.jd-tile { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--field, transparent); text-align: left; min-width: 0; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.jd-tile:hover { border-color: var(--line-strong); }
.jd-tile.sel { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.jd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.jd-date { display: flex; align-items: center; gap: 8px; }
.jd-date b { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.jd-date small { font: 500 9.5px/1.25 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.jd-pnl { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.jd-spark { display: block; color: var(--text); flex: 1; min-height: 28px; max-height: 120px; }
.jd-spark.pos { color: var(--pos); } .jd-spark.neg { color: var(--neg); }
.jd-tile .pc-spark { height: 100%; margin: 0; }
.jd-stats { display: flex; justify-content: space-between; gap: 6px; font: 500 10.5px var(--mono); color: var(--muted); white-space: nowrap; }
.jd-note { font-size: 12.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jd-note i { color: var(--faint); }
.dly-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; padding-top: 8px; }

/* journal week: one block per week */
.wkv { display: flex; flex-direction: column; gap: 16px; }
.wk-card { padding: 18px 20px; }
.wk-card.empty-week { padding: 14px 20px; opacity: .7; }
.wk-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font-size: 15px; }
.wk-head b { font-weight: 700; }
.wk-net { font-weight: 650; font-size: 14.5px; }
.wk-chev { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s; }
.wk-chev.open { transform: rotate(90deg); }
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 16px 0 18px; }
.wk-day { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-height: 96px; padding: 12px 14px; border-radius: 10px; background: var(--chip); text-align: right; cursor: default; }
.wk-day[data-openday] { cursor: pointer; }
.wk-day[data-openday]:hover { outline: 1.5px solid var(--text); }
.wk-day.pos { background: var(--pos-bg); } .wk-day.neg { background: var(--neg-bg); }
.wk-dl { display: flex; justify-content: space-between; width: 100%; font-size: 12.5px; color: var(--muted); }
.wk-dl i { font-style: normal; font-weight: 700; }
.wk-day.pos .wk-dl i { color: var(--pos); } .wk-day.neg .wk-dl i { color: var(--neg); }
.wk-day b { font-size: 17px; font-weight: 750; margin-top: auto; }
.wk-day small { font-size: 12px; color: var(--muted); }
.wk-bottom { display: grid; grid-template-columns: minmax(240px, 2fr) 3fr; gap: 26px; align-items: stretch; }
.wk-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 150px; }
.wk-cc { display: grid; grid-template-rows: 1fr 1fr auto; }
.wk-cc small { font: 500 10px var(--mono); color: var(--muted); text-align: center; padding-top: 4px; }
.wk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; align-content: start; }
.wk-stats > div > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.wk-stats > div > b { font-size: 17px; font-weight: 650; }
.wk-scale { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.wk-scale-name { font-weight: 700; font-size: 15px; }
.wk-scale-end small { display: block; font-size: 11.5px; color: var(--muted); }
.wk-scale-end b { font-size: 13.5px; }
.wk-scale-end.r { text-align: right; }
.wk-scale-bar { position: relative; height: 8px; border-radius: 4px; background: var(--chip); }
.wk-scale-bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--muted); }
.wk-scale-bar i.pos { background: var(--pos); } .wk-scale-bar i.neg { background: var(--neg); }
.wk-scale-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); }
.wk-trades { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
@media (max-width: 1000px) { .wk-bottom { grid-template-columns: 1fr; } .wk-stats { grid-template-columns: repeat(2, 1fr); } }

/* calendar cards that size themselves instead of shrinking */
.lw .cal-table { display: flex; flex-direction: column; container-type: inline-size; }
.cal-rows { flex: 1; min-height: 0; }
.cal-table .cal-row { height: 72px; min-height: 0; }
.cal-table .cal-ev b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cal-table .cal-ev b .tag { margin-left: 8px; vertical-align: 2px; }
.cal-table .cal-ev small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-table .cal-foot { padding: 16px 30px; gap: 12px; border-top: 1px solid var(--line); }
.cal-pager { display: inline-flex; align-items: center; gap: 8px; }
.cal-pager .round-btn:disabled { opacity: .3; }
@container (max-width: 760px) {
  .cal-th, .cal-row { grid-template-columns: 58px 70px minmax(0, 1fr) 50px 70px 24px; padding: 0 16px; }
  .cal-th > :nth-child(6), .cal-th > :nth-child(7), .cal-row > :nth-child(6), .cal-row > :nth-child(7) { display: none; }
  .cal-group, .cal-table .cal-foot { padding-left: 16px; padding-right: 16px; }
}
@container (max-width: 480px) {
  .cal-th, .cal-row { grid-template-columns: 50px minmax(0, 1fr) 40px 20px; }
  .cal-th > :nth-child(2), .cal-row > :nth-child(2), .cal-th > :nth-child(5), .cal-row > :nth-child(5) { display: none; }
  .cal-table .cal-foot > button:first-child { display: none; }
}
.cal-days.compact .cal-day { padding: 10px 14px; }
.cal-days.compact .cal-day > b { font-size: 26px; margin: 0 0 6px; }
.cal-days.compact .cal-day-meta { font-size: 12.5px; margin-bottom: 6px; }
/* short day cards: day + date on the left, counts on the right, impact bar along the bottom */
.cal-days.tiny .cal-day { padding: 10px 14px 9px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; column-gap: 12px; row-gap: 6px; }
.cal-days.tiny .cal-day-top { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; height: auto; gap: 2px; display: flex; }
.cal-days.tiny .cal-day-top em { display: none; }
.cal-days.tiny .cal-day > b { display: none; }
.cal-day-num { display: none; }
.cal-days.tiny .cal-day-num { display: block; }
.tiny-today { font-style: normal; display: none; color: var(--c-g); }
.cal-days.tiny .tiny-today { display: inline; }
.cal-days.tiny .cal-day-meta { grid-column: 2; grid-row: 1; margin: 0; flex-direction: column; align-items: flex-end; font-size: 13px; gap: 2px; }
.cal-days.tiny .cal-day-bar { grid-column: 1 / -1; grid-row: 2; height: 4px; display: flex; }
.cal-days.tiny .cal-day-num { font-size: 22px; font-weight: 900; letter-spacing: -0.05em; color: var(--c-ink); line-height: 1; }
.cal-day.today .cal-day-num { color: #fff; }
.lw .cal-filters { flex-wrap: nowrap; overflow: hidden; gap: 12px; }
.lw .cal-filters .cal-imp { flex: none; }
.lw .cal-filters .cal-right { flex-wrap: nowrap; min-width: 0; }
.lw .cal-filters .cal-search { width: 220px !important; min-width: 120px; }
.lw .cal-filters .cal-mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-next { display: flex; flex-direction: column; }
.cal-next .cal-count { margin-top: 14px; }
.cal-next.small .cal-next-ev, .cal-next.tiny .cal-next-ev { padding-top: 12px; margin-top: auto; }
.cal-next.tiny .cal-next-ev small { display: none; }
.cal-next.tiny .cal-next-ev b, .cal-next.small .cal-next-ev b { font-size: 17px; }
.lw .cal-card .ses-row { height: var(--ses-h, 40px); }
.lw .cal-card .ses-track { height: calc(var(--ses-h, 40px) * .62); }
.lw .cal-card .ses { margin-top: 10px; }

/* backtest v2 */
.bt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bt-only { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--chip); border: 1px solid var(--line-strong); font: 600 10.5px var(--mono); letter-spacing: .06em; color: var(--muted); }
.bt-ph { margin-bottom: 14px; }
.bt-ph h1 { font-size: 28px; }
.bt-ctl { display: inline-flex; align-items: center; gap: 6px; }
.bt-ctl .mono { font-size: 9.5px; }
.bt-body { flex: 1; min-height: 0; display: flex; gap: 8px; }
.bt-tools { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); align-self: flex-start; }
.bt-tools button { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.bt-tools button:hover:not(:disabled) { background: var(--chip); color: var(--text); }
.bt-tools button.on { background: var(--ink); color: var(--ink-text); }
.bt-tools button:disabled { opacity: .3; cursor: default; }
.bt-tools > i { height: 1px; background: var(--line); margin: 4px 2px; }
.bt-swatch { width: 18px; height: 18px; border-radius: 50%; margin: 6px auto 2px; box-shadow: 0 0 0 2px var(--glass), 0 0 0 3px var(--line-strong); }
.bt-canvas { flex: 1; }
.bt-reset { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 99px; background: var(--ink); color: var(--ink-text); font-size: 12.5px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.bt-reset[hidden] { display: none; }
.bt-price small { font-size: .55em; color: var(--faint); font-weight: 600; }
.bt-btns small { opacity: .6; font: 500 10px var(--mono); margin-left: 4px; }
.bt-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bt-cats button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line-strong); font-weight: 600; font-size: 13px; }
.bt-cats button small { font: 500 10px var(--mono); color: var(--muted); }
.bt-cats button.on { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.bt-cats button.on small { color: inherit; opacity: .6; }
.bt-isearch { margin: 0 0 10px !important; height: 38px !important; }
.bt-inst { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; max-height: 230px; overflow-y: auto; margin-bottom: 14px; padding: 2px; }
.bt-inst button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); text-align: left; position: relative; }
.bt-inst button:hover { border-color: var(--line-strong); background: var(--chip); }
.bt-inst button.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.bt-inst button span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bt-inst button small { position: absolute; top: 9px; right: 10px; font: 600 9.5px var(--mono); text-transform: uppercase; color: var(--muted); }
.bt-src { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 12px; }
.bt-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 12px; }
.bt-presets button { display: flex; align-items: center; gap: 4px; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; text-align: left; }
.bt-presets button.on { border-color: var(--text); }
.bt-presets i { width: 10px; height: 14px; border-radius: 2px; flex: none; }
.bt-colrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.bt-colrow label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.bt-colrow input { width: 100%; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 2px; background: var(--glass); }
.bt-style .toggle-row { margin: 4px 0 8px; font-size: 13px; }

/* named layouts */
.lay-group { display: inline-flex; align-items: center; gap: 6px; }
.lay-name { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--glass); font-weight: 600; max-width: 200px; }
.lay-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-name:hover { border-color: var(--text); }
.lay-cur { color: var(--muted); font-weight: 600; }
.lay-menu { width: 290px; display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.lay-menu > .mono { padding: 2px 6px 6px; }
.lm-row { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.lm-row:hover { background: var(--chip); }
.lm-main { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 8px; text-align: left; min-width: 0; }
.lm-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lm-main small { margin-left: auto; color: var(--muted); font-size: 11px; }
.lm-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; }
.lm-row.on .lm-dot { background: var(--ink); border-color: var(--ink); }
.lm-row.on b { font-weight: 750; }
.lm-foot { display: flex; gap: 6px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.lm-foot .btn { flex: 1; height: 34px; padding: 0 10px; font-size: 12.5px; }

/* journal date pickers */
.pick-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid transparent; font-size: 16px; font-weight: 700; white-space: nowrap; }
.pick-btn:hover { border-color: var(--line-strong); background: var(--glass); }
.picker { width: 320px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pk-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 260px; overflow-y: auto; }
.pk-years button, .pk-months button, .pk-presets button { padding: 9px 0; border-radius: 10px; font-weight: 600; border: 1px solid var(--line); }
.pk-years button:hover, .pk-months button:hover, .pk-presets button:hover { border-color: var(--text); }
.pk-years button.on, .pk-months button.on { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.pk-head { display: flex; align-items: center; gap: 8px; }
.pk-head button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; }
.pk-head select { flex: 1; height: 34px; }
.pk-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pk-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pk-range .field { margin: 0; }
.pk-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pk-presets button { padding: 7px 8px; font-size: 12.5px; }
.picker .btn.full { margin-top: 2px; }

/* year heatmap card: 12 months that always fit the card */
.yr-card { display: flex; flex-direction: column; padding: 14px; overflow: hidden !important; }
.yr-card .yr-grid { flex: 1; min-height: 0; display: grid; gap: 12px; }
.yr-card .yr-m { display: flex; flex-direction: column; min-height: 0; padding: 12px 14px; }
.yr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.yr-top b { margin: 0; font-size: 17px; }
.yr-card .yr-heat { flex: 1; min-height: 0; grid-template-rows: repeat(6, minmax(0, 1fr)); }
.yr-card .yr-heat i { aspect-ratio: auto; min-height: 0; }

@media (max-width: 900px) {
  .lgrid { display: flex; flex-direction: column; gap: 14px; }
  .lw { height: var(--hpx); padding-bottom: 0; }
  .lay-btn { display: none; }
}
/* economic calendar on the paper look: compact header so the events are on screen */
.cal-page { max-width: none; padding: 0; --c-card: var(--glass); --c-line: var(--line); --c-soft: var(--chip); --c-ink: var(--text); --c-mute: var(--muted); --c-faint: var(--faint); --c-g: var(--pos); --c-h: var(--neg); }
.cal-page .ph { margin-bottom: 20px; }
.cal-page .ph h1 .cal-hl { padding: 0 .14em; border-radius: 6px; background: var(--text); color: var(--bg); }
.cal-weekbox { gap: 10px; }
.cal-week-nav b { font-size: 20px; }
.cal-round { width: 42px; height: 42px; }
.cal-filters { margin-bottom: 14px; }
.cal-imp button { font-size: 14px; padding: 7px 14px; }
.cal-cur { padding: 6px 12px; font-size: 13px; }
.cal-search { height: 38px !important; width: 210px !important; font-size: 14px !important; }
.cal-days { gap: 14px; margin-bottom: 20px; }
.cal-day { padding: 14px 18px 14px; border-radius: 18px; }
.cal-day > b { font-size: 38px; margin: 2px 0 12px; }
.cal-day-meta { font-size: 13.5px; margin-bottom: 10px; }
.cal-th { height: 52px; }
.cal-group { height: 54px; }
.cal-row { min-height: 72px; }
.cal-ev b { font-size: 16px; }
.cal-count { font-size: 64px; }
.cal-footer { margin-top: 36px; }

/* ============================ toast ============================ */
#toastRoot { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 11px 18px; border-radius: 99px; background: var(--ink); color: var(--ink-text); font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-lg); transform: translateY(16px) scale(.96); opacity: 0; transition: .25s cubic-bezier(.2, .9, .3, 1.3); }
.toast.in { transform: none; opacity: 1; }
.toast.good .ic { color: var(--pos); }
.toast.bad { background: var(--neg); color: #fff; }

/* ============================ responsive ============================ */
@media (max-width: 1360px) {
  .dash { grid-template-columns: minmax(0, 1fr) 280px; }
  .dash-left { display: none; }
  .tri { grid-template-columns: minmax(0, 1fr) 300px; }
  .tri > .rail:first-child { display: none; }
}
@media (max-width: 1100px) {
  .tri { grid-template-columns: 1fr; }
  .tri .rail-right { display: none; }
  .stat-row.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .hero { grid-column: span 2; }
  .equity-card { grid-template-columns: 1fr; }
  .dash-charts { grid-template-columns: 1fr; }
  .nav a span { display: none; }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .trade-row { grid-template-columns: 46px 54px 58px 36px minmax(0, 1fr) 0 0 44px 90px; }
  .tr-setup, .tr-tags { display: none !important; }
}
@media (max-width: 960px) {
  .dash { grid-template-columns: 1fr; }
  .dash-right { position: static; max-height: none; }
  .wall { grid-template-columns: 1fr; }
  .wall-side { position: static; }
  .chart-grid, .insights { grid-template-columns: 1fr; }
  .chart-grid .span-2, .chart-grid.two .span-2 { grid-column: auto; }
  .stat-row.four { grid-template-columns: 1fr 1fr; }
  .settings { grid-template-columns: 1fr; }
  .settings-nav { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .topbar { margin: 8px 8px 0; gap: 8px; padding: 0 8px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .brand span:last-child, .hide-sm, .pill-select { display: none; }
  #view { padding: 14px 8px 60px; }
  .stat-row, .grid-3, .grid-4, .acc-overview, .detail-grid { grid-template-columns: 1fr 1fr; }
  .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal-week { display: none; }
  .cal-h:nth-child(8) { display: none; }
  .cal-cell { min-height: 58px; padding: 5px; }
  .cal-sub { display: none; }
  .cal-pnl { font-size: 11px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .trade-row { grid-template-columns: 54px 58px minmax(0, 1fr) 84px; }
  .tr-time, .tr-qty, .tr-px, .tr-r { display: none; }
  .modal { padding: 18px; border-radius: 22px; }
}

/* ============================ notebook ============================ */
.nb { display: grid; grid-template-columns: 230px 360px minmax(0, 1fr); gap: 14px; height: calc(100vh - 250px); min-height: 520px; }
.nb > .card { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.nb-side { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.nb-folder { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--muted); font-weight: 550; font-size: 14px; text-align: left; width: 100%; }
.nb-folder span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-folder small { font: 500 11px var(--mono); color: var(--faint); }
.nb-folder:hover { background: var(--chip); color: var(--text); }
.nb-folder.on { background: var(--ink); color: var(--ink-text); }
.nb-folder.on small { color: inherit; opacity: .7; }
.nb-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin: 0 3px; }
.nb-hash { font-style: normal; width: 15px; text-align: center; font-weight: 700; }
.nb-sec { font-size: 10px; letter-spacing: .1em; color: var(--faint); padding: 16px 10px 6px; }
.nb-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--field); color: var(--muted); width: 260px; }
.nb-search input { border: 0 !important; background: none !important; box-shadow: none !important; outline: none; height: auto; padding: 0; flex: 1; min-width: 0; font: inherit; color: var(--text); }
.ph-right:has(.nb-search) { flex-wrap: nowrap; }
.nb-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.nb-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; text-align: left; width: 100%; border: 1px solid transparent; }
.nb-item:hover { background: var(--chip); }
.nb-item.on { background: var(--chip); border-color: var(--line-strong); }
.nb-item img, .nb-ico { width: 48px; height: 48px; border-radius: 9px; flex: none; object-fit: cover; }
.nb-ico { display: flex; align-items: center; justify-content: center; background: var(--chip); color: var(--muted); }
.nb-item.on .nb-ico { background: var(--field); }
.nb-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nb-item-top { display: flex; align-items: center; gap: 6px; }
.nb-item-top .mono { font-size: 9.5px; letter-spacing: .08em; color: var(--faint); }
.nb-item-top .grow { flex: 1; }
.nb-star { color: var(--warn); display: inline-flex; }
.nb-item b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-snip { font-size: 12.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-snip i, .nb-blank, .nb-empty { color: var(--faint); }
.nb-pnl { font-weight: 800; font-size: 13px; white-space: nowrap; align-self: center; }
.nb-empty, .nb-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 40px 20px; height: 100%; font-size: 14px; }
.nb-trashbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.nb-editor { padding: 22px 26px; display: flex; flex-direction: column; }
.nb-trashed { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--chip); color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.nb-ed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nb-ed-title { min-width: 0; flex: 1; }
.nb-ed-title > .mono { font-size: 10px; letter-spacing: .1em; color: var(--faint); }
.nb-ed-title h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin: 4px 0 2px; display: flex; align-items: center; gap: 10px; }
.nb-ed-title p { font-size: 13px; }
.nb-title { width: 100%; border: 0; background: none; outline: none; font: 800 28px var(--font, inherit); letter-spacing: -0.03em; color: var(--text); margin: 4px 0 2px; padding: 0; }
.nb-fav.on { color: var(--warn); }
.nb-fav.on svg { fill: currentColor; }
.nb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 18px 0 4px; }
.nb-facts > div { background: var(--glass-strong); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.nb-facts span { font: 500 9.5px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.nb-facts b { font-size: 14px; }
.nb-label { font-size: 10px; letter-spacing: .1em; color: var(--muted); margin: 18px 0 8px; }
.nb-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--field); font: inherit; color: var(--text); }
.nb-text { width: 100%; min-height: 140px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--field); font: inherit; font-size: 14.5px; line-height: 1.6; color: var(--text); resize: vertical; }
.nb-text.tall { min-height: 260px; margin-top: 18px; }
.nb-text:focus, .nb-input:focus { outline: none; border-color: var(--text); }
.nb-editor .trade-list.compact { border: 1px solid var(--line); border-radius: 12px; padding: 2px 6px; }
.nb-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; border-radius: 12px; padding-bottom: 6px; }
.nb-shots.over { outline: 2px dashed var(--text); outline-offset: 4px; }
.nb-shot { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.nb-shot img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.nb-shot button { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: none; align-items: center; justify-content: center; }
.nb-shot:hover button { display: flex; }
.nb-addimg { aspect-ratio: 16 / 10; border: 1.5px dashed var(--line-strong); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.nb-addimg small { font-weight: 400; color: var(--faint); }
.nb-addimg:hover { border-color: var(--text); color: var(--text); }
@media (max-width: 1250px) { .nb { grid-template-columns: 200px 300px minmax(0, 1fr); } .nb-search { width: 200px; } }
@media (max-width: 960px) { .nb { grid-template-columns: 1fr; height: auto; } .nb > .card { max-height: none; overflow: visible; } .nb-side { flex-direction: row; flex-wrap: wrap; } .nb-folder { width: auto; } .nb-sec { display: none; } }

/* ============================ score: alive on hover, breakdown on click ============================ */
.score-card.live { position: relative; cursor: pointer; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s; }
.score-card.live:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.score-card .score-pill { transition: transform .35s cubic-bezier(.2,.9,.3,1.6); }
.score-card.live:hover .score-pill { transform: scale(1.1) rotate(-3deg); }
.radar .shape { transform-box: view-box; transform-origin: center; transition: fill .3s; }
.score-card.live .radar .shape:not(.cmp) { animation: sc-breathe 4.5s ease-in-out infinite; }
.score-card.live:hover .radar .shape:not(.cmp) { animation-duration: 1.8s; fill: color-mix(in srgb, var(--accent) 34%, transparent); }
.radar .shape.cmp { fill: none; stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1.4; }
.radar .ax .dot { transform-box: fill-box; transform-origin: center; transition: transform .25s; }
.score-card.live .radar .ax .dot { animation: sc-twinkle 3s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
.radar .ax text { transition: fill .2s; }
.radar .ax .hit { fill: transparent; }
.radar .ax:hover .dot { transform: scale(2); animation: none; }
.radar .ax:hover text { fill: var(--text); font-weight: 800; }
.radar .ax:hover .spoke { stroke: var(--text); stroke-dasharray: 2 3; }
.score-card.live:hover .radar .ax text { fill: var(--text); }
.score-more { position: absolute; right: 14px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; }
.score-card.live:hover .score-more { opacity: 1; transform: none; }
@keyframes sc-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes sc-twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }

.sc-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 16px; }
.sc-radar { display: flex; flex-direction: column; align-items: center; cursor: default; }
.sc-radar:hover { transform: none !important; box-shadow: none !important; }
.sc-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: -6px; }
.sc-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.sc-legend i.now { background: var(--accent); }
.sc-legend i.all { border-top: 2px dashed var(--muted); height: 0; }
.sc-side { display: flex; flex-direction: column; gap: 10px; }
.sc-call { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); }
.sc-call.good { background: var(--chip); }
.sc-call .mono { font-size: 9.5px; letter-spacing: .1em; color: var(--muted); }
.sc-call b { display: block; font-size: 15px; margin: 3px 0 2px; }
.sc-call p { font-size: 13px; color: var(--muted); line-height: 1.45; }
.sc-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.sc-row { padding: 12px 2px; border-bottom: 1px solid var(--line); animation: sc-in .4s both; animation-delay: calc(var(--i) * 60ms); }
.sc-row-top { display: flex; align-items: baseline; gap: 10px; }
.sc-row-top .grow { flex: 1; }
.sc-val { font-size: 16px; font-weight: 800; }
.sc-bar { position: relative; height: 7px; border-radius: 9px; background: var(--chip); margin: 8px 0 6px; }
.sc-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 9px; background: var(--accent); animation: sc-grow .8s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i) * 60ms + .1s); transform-origin: left; }
.sc-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); border-radius: 2px; }
.sc-row-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.sc-tip { text-align: right; color: var(--text); }
.sc-ok { color: var(--pos); font-weight: 650; }
@keyframes sc-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes sc-grow { from { transform: scaleX(0); } }
@media (max-width: 680px) { .sc-top { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .score-card.live .radar .shape, .score-card.live .radar .ax .dot, .sc-row, .sc-bar i { animation: none !important; } }

/* ============================ date picker (every calendar title) ============================ */
.dp { position: fixed; z-index: 90; width: 300px; padding: 12px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06);
  opacity: 0; transform: translateY(-6px) scale(.94); transition: opacity .14s ease-out, transform .16s cubic-bezier(.2,.9,.3,1.25); }
.dp.in { opacity: 1; transform: none; }
.dp.out { opacity: 0; transform: translateY(-4px) scale(.96); transition: opacity .12s ease-in, transform .12s ease-in; }
.dp button { font: inherit; color: inherit; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.dp-arrow { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.dp-arrow:hover { background: var(--chip); color: var(--text); }
.dp-title { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 650; }
.dp-title b { font-weight: 800; }
.dp-title:hover { background: var(--chip); }
.dp-months, .dp-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dp-years { max-height: 228px; overflow-y: auto; scrollbar-width: thin; animation: dp-fade .16s ease-out; }
.dp-months { padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.dp-months button, .dp-years button { padding: 7px 0; border-radius: 9px; font-size: 13px; font-weight: 600; transition: background .12s, transform .12s; }
.dp-dow, .dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-dow span { font: 500 10px var(--mono); color: var(--faint); padding: 2px 0 4px; }
.dp-days { animation: dp-fade .16s ease-out; }
.dp-days button { aspect-ratio: 1; border-radius: 50%; font-size: 13px; font-weight: 550; transition: background .12s, transform .12s; }
.dp-months button:hover, .dp-years button:hover, .dp-days button:hover { background: var(--chip); transform: scale(1.06); }
.dp .today { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.dp button.on { background: var(--ink); color: var(--ink-text); box-shadow: none; }
.dp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp-foot [data-dptoday] { font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line-strong); }
.dp-foot [data-dptoday]:hover { border-color: var(--text); }
@keyframes dp-fade { from { opacity: 0; transform: translateY(3px); } }
/* calendar titles that open it */
:where(.date-pick) { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; } /* zero priority: the title's own size wins */
.date-pick { cursor: pointer; border-radius: 10px; padding: 2px 8px; margin: -2px -8px; transition: background .15s; display: inline-flex; align-items: baseline; gap: 6px; }
.date-pick .dp-caret { align-self: center; }
.date-pick:hover { background: var(--chip); }
.date-pick .dp-caret { opacity: .45; transition: transform .2s, opacity .2s; }
.date-pick:hover .dp-caret { opacity: 1; transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .dp, .dp.out { transition: none; } .dp-days, .dp-years { animation: none; } }

/* calendar squares adapt to their own width too: the trade count + win/loss dots always stay, words shrink first */
.pc-cell { container-type: inline-size; }
.pc-meta { white-space: nowrap; gap: 6px; }
.pc-meta .pc-n em { font-style: normal; }
.wl-dots { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.wl-dots i { flex: none; }
@container (max-width: 120px) {
  .pc-pnl { font-size: 15px !important; gap: 4px; }
  .pc-meta { font-size: 8.5px; }
  .wl-dots i { width: 5px; height: 5px; }
}
@container (max-width: 95px) {
  .pc-tri, .pc-today { display: none !important; }
  .pc-pnl { font-size: 13px !important; letter-spacing: -0.04em; }
  .pc-meta .pc-n em { display: none; }       /* "3 trades" → "3" */
  .wl-dots { gap: 2px; }
}
@container (max-width: 82px) {
  .pc-pnl { font-size: 11.5px !important; letter-spacing: -0.05em; }
  .pc-d { font-size: 12px !important; }
}
.pc-week { container-type: inline-size; }
.cell-tiny .pc-pnl { min-width: 0; overflow: hidden; text-overflow: clip; }

/* compare chart: hover readout */
.an-lines-wrap { position: relative; cursor: crosshair; }
.an-lines-wrap > i, .al-tip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s; }
.an-lines-wrap.hover > i, .an-lines-wrap.hover .al-tip { opacity: 1; }
.al-guide { top: 10px; bottom: 20px; width: 0; border-left: 1px dashed var(--line-strong); }
.al-dot { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 2px solid var(--glass-strong); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.al-dot.a { background: var(--ink); } .al-dot.b { background: var(--warn); }
.al-tip { z-index: 5; min-width: 230px; max-width: 300px; padding: 10px 12px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0,0,0,.14); font-size: 12.5px; display: flex; flex-direction: column; gap: 8px; }
.al-row { display: flex; flex-direction: column; gap: 2px; }
.al-row + .al-row { padding-top: 8px; border-top: 1px solid var(--line); }
.al-row > b { display: flex; align-items: center; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-row .muted { font-size: 11.5px; }
.al-tip, .al-tip * { text-align: left; }
.al-row span { display: block; line-height: 1.45; }
.al-row span b { display: inline; font-size: inherit !important; font-weight: 750; letter-spacing: normal; }
.al-tip, .al-tip * { text-align: left !important; }
.al-row > b { justify-content: flex-start; }
.al-tip, .al-row { align-items: stretch !important; }

/* ============================ trade on a chart ============================ */
.modal.modal-chart { max-width: min(1500px, calc(100vw - 32px)); width: 100%; height: calc(100vh - 48px); max-height: none; padding: 18px 20px; overflow: hidden; }
.tc { display: flex; flex-direction: column; height: 100%; gap: 14px; }
.tc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tc-head h2 { display: flex; align-items: center; gap: 10px; }
.tc-pnl { font-size: 18px; font-weight: 800; }
.tc-tfs:empty { display: none; }
.tc-tfs button { padding: 6px 11px; }
.tc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.tc-chart { position: relative; min-height: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--glass-strong); cursor: crosshair; }
.tc-chart canvas { display: block; }
.tc-src { position: absolute; left: 12px; top: 10px; font-size: 10px; letter-spacing: .08em; color: var(--muted); background: var(--glass-strong); padding: 3px 7px; border-radius: 6px; }
.tc-msg { position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); width: min(560px, 90%); display: none; }
.tc-msg.on, .tc-msg:not(:empty) { display: block; }
.tc-msg div { padding: 12px 14px; border-radius: 12px; background: var(--chip); border: 1px solid var(--line-strong); font-size: 13px; line-height: 1.55; }
.tc-tip { position: absolute; display: none; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 9px; background: var(--glass-strong); border: 1px solid var(--line-strong); box-shadow: 0 6px 18px rgba(0,0,0,.12); font: 500 11px var(--mono); pointer-events: none; white-space: nowrap; }
.tc-side { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; }
.tc-big { font-size: 34px; font-weight: 850; letter-spacing: -0.04em; }
.tc-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tc-kv > div { background: var(--glass-strong); padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.tc-kv span { font: 500 9.5px var(--mono); letter-spacing: .07em; color: var(--muted); text-transform: uppercase; }
.tc-kv b { font-size: 13.5px; }
.tc-kv small { font-weight: 500; color: var(--muted); font-size: 11px; }
.tc-notes { font-size: 13.5px; line-height: 1.55; padding: 10px 12px; border-radius: 12px; background: var(--chip); }
.tc-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tc-shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
@media (max-width: 960px) { .tc-body { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 1fr) auto; } .modal.modal-chart { height: auto; overflow-y: auto; } }

/* ============================ accounts: bigger cards, every rule, scrollable ============================ */
.acc-scroll { overflow-y: auto !important; scrollbar-width: thin; padding-right: 4px; }
.acc-scroll .acc-grid { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; }
.acc-card.big { padding: 20px 22px; gap: 14px; }
.acc-card.big .acc-top b { font-size: 16px; }
.acc-card.big .badge { text-transform: capitalize; font-size: 12px; padding: 4px 11px; }
.acc-card .badge.muted { background: var(--chip); color: var(--muted); }
.acc-card.is-blown { opacity: .85; }
.acc-mid { display: grid; grid-template-columns: minmax(0, 1fr) 46%; gap: 14px; align-items: center; }
.acc-card.big .acc-bal { font-size: 32px; margin-top: 0; }
.acc-spark { width: 100%; height: 64px; display: block; overflow: visible; }
.acc-spark polyline { fill: none; stroke: var(--c, var(--ink)); stroke-width: 2; stroke-linejoin: round; }
.acc-spark .floor { stroke: var(--neg); stroke-dasharray: 3 3; stroke-width: 1; opacity: .7; }
.acc-spark.empty { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--faint); border: 1px dashed var(--line); border-radius: 10px; }
.acc-rules { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.acc-rule { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 5px; align-items: center; font-size: 13px; }
.acc-rule .meter { grid-column: 2 / -1; }
.acc-ok { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; }
.acc-ok.y { background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos); }
.acc-ok.n { background: color-mix(in srgb, var(--neg) 16%, transparent); color: var(--neg); }
.acc-rl { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-rv { color: var(--muted); font-size: 12.5px; text-align: right; white-space: nowrap; }
.acc-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.acc-nums > div { background: var(--glass-strong); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.acc-nums span { font: 500 9.5px var(--mono); letter-spacing: .07em; color: var(--muted); text-transform: uppercase; }
.acc-nums b { font-size: 13.5px; }
.acc-viol { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 7px 10px; border-radius: 10px; background: var(--chip); }
.acc-viol.hard { color: var(--neg); background: color-mix(in srgb, var(--neg) 10%, transparent); }
.acc-status-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.acc-status-chips span { font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 99px; background: var(--chip); color: var(--muted); }
.acc-status-chips .st-passed, .acc-status-chips .st-funded { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.acc-status-chips .st-blown { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
.acc-rules-title { font-weight: 750; font-size: 14px; margin: 6px 0 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.acc-rules-title .hint { font-weight: 500; }
.field-hint { display: block; font-size: 11px; font-weight: 500; color: var(--faint); margin-top: 3px; }
.field-check { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 5px; }
.field-check input { width: 15px !important; height: 15px; accent-color: var(--ink); }
.acc-vh { margin: 16px 0 6px; font-size: 14px; }
.acc-vlist { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.acc-vlist > div { display: grid; grid-template-columns: 100px 130px minmax(0, 1fr); gap: 10px; padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.acc-vlist > div.hard b { color: var(--neg); }
@media (max-width: 680px) { .acc-scroll .acc-grid { grid-template-columns: 1fr; } .acc-mid { grid-template-columns: 1fr; } .acc-nums { grid-template-columns: repeat(2, 1fr); } }

/* account status pins on the cumulative P&L charts — show while hovering the chart */
.chart-line .mk { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .18s; }
.chart-line.hovering .mk, .chart-line:hover .mk { opacity: 1; }
.mk i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--glass-strong); border: 2.5px solid var(--mk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk) 18%, transparent); }
.mk span { position: absolute; left: -2px; bottom: 11px; transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; font-weight: 700; line-height: 1.2; padding: 3px 7px; border-radius: 7px; background: var(--glass-strong); border: 1px solid color-mix(in srgb, var(--mk) 45%, var(--line)); color: var(--mk); box-shadow: 0 3px 10px rgba(0,0,0,.08); text-align: center; }
.mk span small { display: block; font: 500 9px var(--mono); color: var(--muted); letter-spacing: .02em; }
.mk.r span { transform: translateX(-90%); }
.mk.b span { bottom: auto; top: 11px; }
.mk-blown { --mk: var(--neg); } .mk-passed, .mk-ready { --mk: var(--pos); } .mk-payout { --mk: var(--ink); } .mk-rule { --mk: var(--warn); }

/* ============================ calendar colours (winning / losing day tint) ============================ */
:root { --cal-win: var(--pos); --cal-loss: var(--neg); --cal-win-a: .08; --cal-loss-a: .08; }
.pc-cell.traded.day-pos, .jd-tile.day-pos, .wk-day.pos, .cc-preview .day-pos {
  background: color-mix(in srgb, var(--cal-win) calc(var(--cal-win-a) * 100%), var(--glass-strong));
  border-color: color-mix(in srgb, var(--cal-win) calc(var(--cal-win-a) * 100% + 22%), var(--line-strong)); }
.pc-cell.traded.day-neg, .jd-tile.day-neg, .wk-day.neg, .cc-preview .day-neg {
  background: color-mix(in srgb, var(--cal-loss) calc(var(--cal-loss-a) * 100%), var(--glass-strong));
  border-color: color-mix(in srgb, var(--cal-loss) calc(var(--cal-loss-a) * 100% + 22%), var(--line-strong)); }
.pc-cell.traded.sel { background: var(--ink) !important; }
.yr-heat i.pos { background: var(--cal-win); } .yr-heat i.neg { background: var(--cal-loss); }
.an-mg button.pos { background: color-mix(in srgb, var(--cal-win) calc(var(--a) * 100%), transparent); }
.an-mg button.neg { background: color-mix(in srgb, var(--cal-loss) calc(var(--a) * 100%), transparent); }
/* the tiny palette button */
.cc-btn { width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); background: none; border: 1px solid transparent; transition: color .15s, border-color .15s, background .15s; }
.cc-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--glass-strong); }
/* the popover */
.cc-pop { position: fixed; z-index: 90; width: 280px; padding: 12px; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(0,0,0,.16);
  opacity: 0; transform: translateY(-6px) scale(.95); transform-origin: top right; transition: opacity .14s ease-out, transform .16s cubic-bezier(.2,.9,.3,1.25); }
.cc-pop.in { opacity: 1; transform: none; }
.cc-pop.out { opacity: 0; transform: translateY(-4px) scale(.96); transition: opacity .12s ease-in, transform .12s ease-in; }
.cc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13.5px; }
.cc-head button { font-size: 12px; font-weight: 600; color: var(--muted); }
.cc-head button:hover { color: var(--text); }
.cc-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 38px; gap: 10px; align-items: center; padding: 6px 0; }
.cc-color { width: 30px; height: 30px; border-radius: 9px; background: var(--sw); border: 2px solid var(--glass-strong); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; position: relative; overflow: hidden; }
.cc-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.cc-mid { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 600; }
.cc-mid input[type=range] { width: 100%; accent-color: var(--ink); height: 14px; }
.cc-pct { font: 600 11px var(--mono); color: var(--muted); text-align: right; }
.cc-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.cc-preview span { padding: 10px; border-radius: 10px; border: 1px solid var(--line); font-weight: 750; font-size: 14px; }
.cc-presets { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.cc-presets button { display: flex; padding: 3px; border-radius: 8px; border: 1px solid var(--line); }
.cc-presets button:hover { border-color: var(--text); }
.cc-presets i { width: 14px; height: 14px; display: block; }
.cc-presets i:first-child { border-radius: 4px 0 0 4px; } .cc-presets i:last-child { border-radius: 0 4px 4px 0; }
@media (prefers-reduced-motion: reduce) { .cc-pop, .cc-pop.out { transition: none; } }

/* ============================ prop firm picker + logos ============================ */
.acc-logo.has-img { position: relative; overflow: hidden; background: #fff; }
.acc-logo.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5px; background: #fff; }
.acc-logo.has-img b { font-weight: 800; }
.acc-logo.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--chip); color: var(--muted); }
.acc-logo.xs { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--chip); color: var(--muted); }
.acc-logo.sm.has-img img, .acc-logo.xs.has-img img { padding: 3px; }
.pf { position: relative; margin-bottom: 4px; }
.pf-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--field); padding: 0 6px 0 8px; margin-top: 6px; }
.pf-search input { border: 0 !important; background: none !important; box-shadow: none !important; flex: 1; min-width: 0; height: 44px; padding: 0; outline: none; }
.pf-search:focus-within { border-color: var(--text); }
.pf-results { position: absolute; left: 0; right: 0; top: 78px; z-index: 20; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.pf-results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; }
.pf-results button:hover { background: var(--chip); }
.pf-results button b { font-size: 14px; }
.pf-results button small { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.pf-dym { font-size: 12.5px; color: var(--muted); padding: 8px 10px 2px; }
.pf-own { color: var(--muted); font-size: 13px; border-top: 1px solid var(--line) !important; margin-top: 4px; border-radius: 0 0 10px 10px !important; }
.pf-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 10px; }
.pf-row > span { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chips button { padding: 6px 13px; border-radius: 99px; border: 1px solid var(--line-strong); font-weight: 650; font-size: 13px; transition: background .12s, border-color .12s; }
.pf-chips button:hover { border-color: var(--text); }
.pf-chips button.on { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.pf-src { margin-top: 10px; padding: 8px 11px; border-radius: 10px; background: var(--chip); font-size: 12.5px; line-height: 1.5; }
.pf-src.ok { background: color-mix(in srgb, var(--pos) 9%, transparent); }
.pf-src a { text-decoration: underline; }
.pf > .field { display: flex !important; flex-direction: column; align-items: stretch; gap: 0; }
.pf-search { width: 100%; box-sizing: border-box; }
.pf-results { top: 84px; }
.pf-src .ic { display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* ============================ strategy tester (Backtest → Strategy tester) ============================ */
.pt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; }
.pt-sep { width: 1px; height: 22px; background: var(--line); }
.pt-data { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; }
.pt-warn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; margin-bottom: 12px; border-radius: 12px; font-size: 13px; background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pt-grid { display: grid; grid-template-columns: minmax(380px, 40%) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.pt-editor, .pt-report { display: flex; flex-direction: column; min-height: calc(100vh - 290px); padding: 14px; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
kbd { font: 600 10px var(--mono); padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.18); margin-left: 4px; }
/* editor */
.pe { position: relative; flex: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr); border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--field); min-height: 420px; }
.pe-gutter { overflow: hidden; padding: 12px 8px 12px 0; text-align: right; font: 12.5px/20px var(--mono); color: var(--faint); background: var(--chip); user-select: none; }
.pe-gutter span { display: block; }
.pe-gutter span.err { color: #fff; background: var(--neg); border-radius: 0 4px 4px 0; }
.pe-area { position: relative; min-width: 0; }
.pe-hl, .pe-ta { position: absolute; inset: 0; margin: 0; padding: 12px 14px; font: 12.5px/20px var(--mono) !important; tab-size: 4; white-space: pre; overflow: auto; letter-spacing: 0; }
.pe-hl { pointer-events: none; color: var(--text); overflow: hidden; }
.pe-ta { border: 0 !important; outline: none; resize: none; background: transparent !important; color: transparent; caret-color: var(--text); box-shadow: none !important; height: 100% !important; border-radius: 0 !important; }
.pe-ta::selection { background: color-mix(in srgb, var(--ink) 25%, transparent); color: transparent; }
.pk-cm { color: var(--muted); font-style: italic; } .pk-st { color: #0f8a5f; } .pk-nu { color: #b45309; } .pk-co { color: #b45309; }
.pk-kw { color: #7c3aed; font-weight: 600; } .pk-ns { color: #2563eb; } .pk-fn { color: #0e7490; } .pk-bi { color: #be185d; }
:root[data-theme="dark"] .pk-st { color: #4ade80; } :root[data-theme="dark"] .pk-nu, :root[data-theme="dark"] .pk-co { color: #fbbf24; }
:root[data-theme="dark"] .pk-kw { color: #c4b5fd; } :root[data-theme="dark"] .pk-ns { color: #93c5fd; } :root[data-theme="dark"] .pk-fn { color: #67e8f9; } :root[data-theme="dark"] .pk-bi { color: #f9a8d4; }
.pe-status { margin-top: 8px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; min-height: 22px; }
.pe-status.err { color: var(--neg); background: color-mix(in srgb, var(--neg) 10%, transparent); padding: 6px 10px; border-radius: 9px; }
/* report */
.pt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -2px -2px 14px; overflow-x: auto; }
.pt-tabs button { padding: 9px 13px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.pt-tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.pt-body { flex: 1; min-height: 0; overflow-y: auto; }
.pt-empty { display: flex; align-items: center; justify-content: center; height: 300px; color: var(--muted); text-align: center; padding: 20px; }
.pt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.pt-kpi { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 2px; }
.pt-kpi span { font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.pt-kpi b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.pt-kpi small { font-size: 12px; color: var(--muted); }
.pt-perf-head, .pt-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 8px; }
.pt-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pt-legend label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.pt-legend input { width: 13px; height: 13px; accent-color: var(--ink); }
.pt-legend i, .pt-ptip i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.ptl-cum i, i.ptl-cum { background: var(--pos); } .ptl-bh i, i.ptl-bh { background: #2962FF; } .ptl-exc i { background: linear-gradient(90deg, var(--pos) 50%, var(--neg) 50%); } .ptl-dd i, i.ptl-dd { background: #ef5350; }
.pt-perf { position: relative; height: 320px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 4px; }
.pt-svg { width: 100%; height: 100%; display: block; }
.pt-svg text { font: 500 10px var(--mono); fill: var(--muted); }
.pt-svg .gl { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } .pt-svg .zero { stroke: var(--line-strong); vector-effect: non-scaling-stroke; }
.pt-svg .ln-cum { fill: none; stroke: var(--pos); stroke-width: 2; vector-effect: non-scaling-stroke; } .pt-svg .ln-cum.neg { stroke: var(--neg); }
.pt-svg .ar-cum { fill: color-mix(in srgb, var(--pos) 14%, transparent); } .pt-svg .ar-cum.neg { fill: color-mix(in srgb, var(--neg) 14%, transparent); }
.pt-svg .ln-bh { fill: none; stroke: #2962FF; stroke-width: 1.3; vector-effect: non-scaling-stroke; opacity: .85; }
.pt-svg .ln-dd { fill: none; stroke: #ef5350; stroke-width: 1.1; vector-effect: non-scaling-stroke; opacity: .7; }
.pt-svg .ex-up { fill: color-mix(in srgb, var(--pos) 55%, transparent); } .pt-svg .ex-dn { fill: color-mix(in srgb, var(--neg) 55%, transparent); }
.pt-svg .pt-hover { stroke: var(--muted); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.pt-ptip, .pt-tip { position: absolute; top: 10px; display: none; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; background: var(--glass-strong); border: 1px solid var(--line-strong); box-shadow: 0 8px 22px rgba(0,0,0,.12); font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 3; }
.pt-ptip span, .pt-tip span { display: flex; align-items: center; gap: 6px; }
.pt-tip i { width: 9px; height: 3px; border-radius: 2px; display: inline-block; }
.pt-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 14px; }
.pt-mini > div { background: var(--glass-strong); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pt-mini span { font: 500 9.5px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.pt-mini b { font-size: 14px; } .pt-mini small { font-weight: 500; color: var(--muted); }
.pt-pls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pt-pl { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 12px; align-items: center; font-size: 13px; }
.pt-pl > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-pl > b { text-align: right; }
.pt-pl-bar { position: relative; height: 8px; border-radius: 6px; background: var(--chip); }
.pt-pl-bar i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.pt-pl-bar i.l { right: 50%; background: var(--neg); opacity: .7; } .pt-pl-bar i.w { left: 50%; background: var(--pos); }
.pt-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.pt-tr { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 10px; padding: 9px 14px; font-size: 13px; border-top: 1px solid var(--line); }
.pt-tr:first-child { border-top: 0; }
.pt-tr.head { font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; background: var(--chip); }
.pt-tr b { font-weight: 650; } .pt-tr small { color: var(--muted); font-weight: 500; }
.pt-hist { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.pt-hist > div { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.pt-hist i { display: block; width: 100%; border-radius: 3px 3px 0 0; min-height: 1px; }
.pt-hist i.pos { background: var(--pos); } .pt-hist i.neg { background: var(--neg); }
.pt-hist-x { display: flex; justify-content: space-between; font: 500 10px var(--mono); color: var(--muted); margin-top: 4px; }
.pt-trades { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pt-trow { display: grid; grid-template-columns: 40px 58px minmax(70px, 1fr) 128px 92px 50px 104px 82px 82px 96px; gap: 8px; padding: 8px 12px; font-size: 12.5px; border-top: 1px solid var(--line); align-items: center; }
.pt-trow:first-child { border-top: 0; }
.pt-trow.head { font: 500 9.5px var(--mono); letter-spacing: .07em; color: var(--muted); text-transform: uppercase; background: var(--chip); }
.pt-trow > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-trow > span > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-trow .r { text-align: right; align-items: flex-end; }
.pt-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; margin-bottom: 12px; }
.pt-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding-top: 22px; }
.pt-chk input { width: 16px; height: 16px; accent-color: var(--ink); }
.pt-note { margin-top: 6px; }
.pt-chart { position: relative; height: calc(100vh - 380px); min-height: 380px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: crosshair; }
.pt-chart canvas { display: block; }
.pt-hint { position: absolute; left: 10px; bottom: 26px; pointer-events: none; }
.pt-menu { display: flex; flex-direction: column; min-width: 220px; padding: 6px; }
.pt-menu button { text-align: left; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 550; }
.pt-menu button:hover { background: var(--chip); }
@media (max-width: 1250px) { .pt-grid { grid-template-columns: 1fr; } .pt-editor { min-height: 460px; } .pt-kpis { grid-template-columns: repeat(2, 1fr); } }
.pt-svg .ex-up { fill: color-mix(in srgb, var(--pos) 28%, transparent); } .pt-svg .ex-dn { fill: color-mix(in srgb, var(--neg) 28%, transparent); }
.pt-perf-head .pt-legend { flex: 1 1 auto; min-width: 0; justify-content: flex-end; row-gap: 4px; }
.pt-body { overflow-x: hidden; }
.pt-perf-head { flex-direction: column; align-items: flex-start; gap: 6px; }
.pt-perf-head .pt-legend { justify-content: flex-start; }
/* the editor and the report fit the window and scroll inside — the page stays put */
.pt-editor, .pt-report { height: calc(100vh - 300px); min-height: 520px; }
.pt-editor .pe { min-height: 0; }
.pt-editor .pe-status { margin: 0 0 8px; }
.pe-status[data-pt="goto-err"] { cursor: pointer; }
.pe-status[data-pt="goto-err"]:hover { text-decoration: underline; }
@media (max-width: 1250px) { .pt-editor, .pt-report { height: 640px; } }
.pt-editor, .pt-report { height: calc(100vh - 350px); }
.pt-trow[data-pttrade] { cursor: pointer; transition: background .12s; }
.pt-trow[data-pttrade]:hover { background: var(--chip); }
.pt-trow.sel { background: var(--chip); box-shadow: inset 3px 0 0 var(--ink); }
.pt-trow-act { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 4px 0 2px; }

/* status pins v2: numbered dots + a legend row (no overlapping labels) */
.chart-line .mk i { left: -9px; top: -9px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font: 800 10px/1 Inter, sans-serif; font-style: normal; color: #fff; background: var(--mk); border: 2px solid var(--glass-strong); transform: translateY(calc(var(--st, 0) * -22px)); transition: transform .2s; }
.chart-line .mk { pointer-events: auto; cursor: default; }
.chart-line .mk span { display: none; }
.mk-legend { position: absolute; left: 44px; right: 6px; bottom: 6px; z-index: 4; display: flex; flex-wrap: wrap; gap: 4px 6px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; }
.chart-line.hovering .mk-legend, .chart-line:hover .mk-legend { opacity: 1; transform: none; }
.mk-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 99px; background: var(--glass-strong); border: 1px solid color-mix(in srgb, var(--mk) 40%, var(--line)); box-shadow: 0 2px 8px rgba(0,0,0,.06); font-size: 11px; white-space: nowrap; }
.mk-legend i { width: 16px; height: 16px; border-radius: 50%; background: var(--mk); color: #fff; font: 800 9.5px/16px Inter, sans-serif; font-style: normal; text-align: center; }
.mk-legend b { color: var(--mk); font-weight: 700; }
.mk-legend small { color: var(--muted); font: 500 10px var(--mono); }
.mk-legend { top: 2px; bottom: auto; left: 44px; gap: 4px; flex-wrap: wrap; max-width: calc(100% - 50px); }
.mk-legend span { padding: 2px 7px 2px 2px; font-size: 10.5px; gap: 4px; }
.mk-legend i { width: 14px; height: 14px; font-size: 9px; line-height: 14px; }
.tip .tip-mk { display: flex; align-items: center; gap: 5px; font-weight: 650; color: var(--mk); white-space: nowrap; }
.tip .tip-mk i { width: 14px; height: 14px; border-radius: 50%; background: var(--mk); color: #fff; font: 800 9px/14px Inter, sans-serif; font-style: normal; text-align: center; flex: none; }
.chart-line .tip { top: 26px; transform: translateX(-50%); }
.tip .tip-mk { color: inherit; font-weight: 600; }
.chart-line .tip { z-index: 6; }

/* accounts: test a date range */
.acc-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px; margin-bottom: 14px; }
.acc-range.on { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)); }
.acc-range-t { display: flex; flex-direction: column; gap: 1px; }
.acc-range-t b { font-size: 14px; }
.acc-range-c { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.acc-rpick { height: 34px; font-size: 13px; }
.acc-range-years { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.acc-range-years button { padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 12px; font-weight: 650; }
.acc-range-years button:hover { border-color: var(--text); }
.acc-range-years button.on { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.acc-range-note { flex-basis: 100%; display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 7px 10px; border-radius: 10px; background: var(--chip); }
.acc-range-note.in-modal { margin: -4px 0 12px; }
.acc-verdict { font-size: 13px; padding: 8px 11px; border-radius: 10px; background: var(--chip); color: var(--muted); }
.acc-verdict.pos { color: var(--pos); background: color-mix(in srgb, var(--pos) 10%, transparent); }
.acc-verdict.neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 10%, transparent); }

/* account picker (top bar): several accounts at once */
.acc-pick-btn { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: none !important; padding-right: 12px !important; cursor: pointer; }
.acc-pick-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.acc-pick-dots { display: inline-flex; }
.acc-pick-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--field); margin-right: -4px; }
.acc-pick-dots i:last-child { margin-right: 2px; }
.acc-picker { width: 320px; max-height: 420px; overflow-y: auto; }
.acc-picker label { display: grid; grid-template-columns: 16px 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.acc-picker label > i { width: 10px; height: 10px; border-radius: 50%; }
.acc-picker label span { display: flex; flex-direction: column; min-width: 0; }
.acc-picker label span b, .acc-picker label span small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-picker label span small { margin: 0; font-family: inherit; font-size: 11.5px; text-transform: capitalize; }
.acc-picker label em { font-style: normal; font-size: 12px; font-weight: 700; }
.acc-picker .acc-pk-all { grid-template-columns: 16px minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; margin-bottom: 4px; }
/* compare: pick several accounts per side */
.an-accs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.an-accs button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.an-accs button i { width: 8px; height: 8px; border-radius: 50%; opacity: .5; }
.an-accs button.on { color: var(--text); border-color: var(--text); background: var(--chip); }
.an-accs button.on i { opacity: 1; }

/* compare chart: read-out strip above the lines (replaces the floating box) */
.al-read { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; margin: 0 0 6px; border-radius: 10px; background: var(--chip); min-height: 46px; font-size: 12.5px; }
.al-line { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.al-line > b:first-of-type { max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
.al-line .grow { flex: 1; }
.al-line .an-dot { flex: none; margin-right: 0; }
.an-lines-wrap .al-guide { bottom: auto; }
.an-lines-wrap .al-tip { display: none !important; }

/* compare: up to five groups */
.an-cmp-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.an-cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-bottom: 14px; }
.an-cmp-grid .an-pick { border-top: 3px solid var(--gc, var(--ink)); }
.an-pick .row-sb .mono { display: inline-flex; align-items: center; gap: 6px; }
.an-pick .row-sb .an-dot { margin-right: 0; }
.an-two.stack { grid-template-columns: 1fr; }
.an-two.stack .an-lines { height: 420px; }
.an-tr .an-dot { margin-right: 4px; }
.an-dot[style*="--d"], .al-dot[style*="--d"] { background: var(--d) !important; }
.an-two.stack .an-lines text { font-size: 8px; }
.an-two.stack .an-lines { height: 380px; }

/* compare: compact group lines */
.cmp-panel { display: flex; align-items: flex-start; gap: 14px; padding: 8px 12px; margin-bottom: 14px; }
.cmp-gs { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmp-g { display: flex; align-items: center; gap: 10px; height: 40px; border-left: 3px solid var(--gc); padding-left: 10px; }
.cmp-g + .cmp-g { border-top: 1px solid var(--line); }
.cmp-l { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--mono); width: 34px; }
.cmp-l .an-dot { margin: 0; }
.cmp-g .mini-select { height: 30px; max-width: 170px; font-size: 13px; }
.cmp-g .cmp-val { max-width: 260px; }
.cmp-accbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-accbtn:hover { border-color: var(--text); }
.cmp-g > b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.cmp-g > small { width: 82px; white-space: nowrap; }
.cmp-x { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); flex: none; }
.cmp-x[data-cmpdel]:hover { background: var(--chip); color: var(--text); }
.cmp-acts { display: flex; flex-direction: column; gap: 6px; padding-top: 5px; }
.cmp-acts .btn { justify-content: flex-start; }
@media (max-width: 900px) { .cmp-panel { flex-direction: column; } .cmp-acts { flex-direction: row; } .cmp-g > small { display: none; } }

/* dashboard card labels: "Win rate", not "WIN RATE" */
.lgrid[data-page="dashboard"] .eyebrow, .lgrid[data-page="dashboard"] .mini-stat > .mono { text-transform: none; font-family: var(--font, Inter, sans-serif); letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
/* loss-limit (and other small) cards: lines never run into each other */
.mini-stat { min-width: 0; overflow: hidden; }
.mini-stat > * { line-height: 1.25; }
.mini-stat small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lgrid[data-page="dashboard"] .mini-stat .mono { text-transform: none; font-family: var(--font, Inter, sans-serif); letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
.day-nav { display: inline-flex; gap: 4px; margin: 0 4px 0 10px; }
.day-nav .round-btn:disabled { opacity: .35; cursor: default; }

/* ============================ ev.pos logo (from the brand kit) ============================ */
.evpos-logo{--evpos-ink:#0B0B0E;--evpos-dot:#FF3D1F;display:inline-flex;align-items:center;height:30px;line-height:0;text-decoration:none}
.evpos-logo svg{height:100%;width:auto;display:block;overflow:visible}
.evpos-ink{fill:var(--evpos-ink);transition:fill .2s}
.evpos-dot{fill:var(--evpos-dot);transform-box:fill-box;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.evpos-logo:hover .evpos-dot{transform:translateX(4px)}
[data-theme="dark"] .evpos-logo{--evpos-ink:#F3F0E8}
.evpos-logo .evpos-mark-only{display:none}
@media (max-width:560px){.evpos-logo .evpos-full{display:none}.evpos-logo .evpos-mark-only{display:block}}
.topbar .brand { display: flex; align-items: center; }

/* ============================ sign up · log in · plans · walls ============================ */
:root { --au-violet: #5650c2; --au-cream: #f6e9c8; --au-paper: #f3f0e8; --au-ink: #3a1820; --au-dot: #ff3d1f; }
body.auth-mode .topbar, body.auth-mode #wallpaper { display: none; }
body.auth-mode #view { padding: 0; max-width: none; }
.au { min-height: 100vh; display: flex; flex-direction: column; background: var(--au-violet); color: var(--au-ink); }
.au-top { display: flex; align-items: center; gap: 36px; padding: 22px 48px; background: var(--au-paper); }
.au-top .evpos-logo { height: 38px; --evpos-ink: #0b0b0e; margin-right: auto; }
.au-nav { display: flex; gap: 42px; margin-right: 32px; }
.au-nav a { font-size: 17px; color: #2a2a2e; }
.au-nav a:hover { color: #000; }
.au-link { font-weight: 600; color: #2a2a2e; }
.au-who { font-size: 14px; color: #555; }
.au-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 30px; border-radius: 99px; background: #0b0b0e; color: #fff !important; font-size: 17px; font-weight: 600; border: 0; cursor: pointer; transition: transform .15s; }
.au-btn:hover { transform: translateY(-1px); }
.au-btn.ghost { background: transparent; color: #0b0b0e !important; border: 1.5px solid #0b0b0e; }
.au-stage { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: 56px 80px; }
.au-stage.wide { grid-template-columns: 1fr; justify-items: center; }
.au-card { position: relative; background: var(--au-cream); border-radius: 26px; padding: 52px 56px 44px; box-shadow: 0 0 80px rgba(246, 233, 200, .32), 0 30px 60px rgba(25, 15, 80, .25); max-width: 640px; width: 100%; animation: au-in .5s cubic-bezier(.2,.9,.3,1.1) both; }
.au-eyebrow { display: block; font: 500 14px var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--au-ink); margin-bottom: 14px; }
.au-h { font-family: 'Anton', 'Impact', sans-serif; font-weight: 400; font-size: clamp(64px, 7.4vw, 118px); line-height: .92; letter-spacing: -0.005em; text-transform: uppercase; color: var(--au-ink); margin: 0 0 22px; }
.au-dot { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--au-dot); margin-left: .06em; vertical-align: baseline; }
.au-sub { font-size: 18px; line-height: 1.45; color: #5a2a33; margin: 0 0 26px; }
.au-form { display: flex; flex-direction: column; gap: 14px; }
.au-form.shake { animation: au-shake .35s; }
.au-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--au-ink); }
.au-form input { height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid rgba(58, 24, 32, .2); background: #fffaf0; font: 500 16px Inter, sans-serif; color: var(--au-ink); outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; box-sizing: border-box; }
.au-form input:focus { border-color: var(--au-ink); box-shadow: 0 0 0 4px rgba(86, 80, 194, .2); }
.au-pw { position: relative; display: block; }
.au-pw button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; font: 600 13px Inter, sans-serif; color: #7a4a52; cursor: pointer; padding: 6px 8px; }
.au-meter { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #7a4a52; }
.au-meter i { position: relative; flex: 1; height: 5px; border-radius: 5px; background: rgba(58, 24, 32, .12); overflow: hidden; }
.au-meter i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--s, 0) * 100%); background: var(--au-dot); border-radius: 5px; transition: width .25s, background .25s; }
.au-meter[data-s="3"] i::after, .au-meter[data-s="4"] i::after, .au-meter[data-s="5"] i::after { background: #2f8f5b; }
.au-err { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 61, 31, .12); color: #a3220c; font-size: 14px; font-weight: 600; }
.au-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; margin-top: 6px; border: 0; border-radius: 99px; background: #0b0b0e; color: #fff !important; font: 700 17px Inter, sans-serif; cursor: pointer; transition: transform .15s, background .15s; text-decoration: none; }
.au-submit span { transition: transform .2s; }
.au-submit:hover span { transform: translateX(4px); }
.au-submit:hover { background: #1d1d24; }
.au-submit:disabled { opacity: .55; cursor: default; }
.au-submit.busy { opacity: .7; }
.au-submit.ghost { background: transparent; color: var(--au-ink) !important; border: 1.5px solid var(--au-ink); }
.au-switch { margin: 22px 0 0; font-size: 15px; color: #5a2a33; }
.au-switch a { font-weight: 700; color: var(--au-ink); text-decoration: underline; text-underline-offset: 3px; }
.au-fine { margin: 10px 0 0; font: 500 12px var(--mono); color: #8a5a62; letter-spacing: .02em; }
.au-art { display: flex; align-items: center; justify-content: center; }
.au-metal { width: min(520px, 100%); height: auto; animation: au-float 6s ease-in-out infinite; }
.au-list { margin: 0 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.au-list li::before, .au-tier li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--au-dot); margin-right: 12px; vertical-align: 2px; }
/* plans */
.au-plans { max-width: 1180px; }
.au-plans .au-h { font-size: clamp(56px, 6vw, 96px); }
.au-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.au-tier { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 22px; border-radius: 20px; background: #fffaf0; border: 1.5px solid rgba(58, 24, 32, .14); }
.au-tier.best { border-color: var(--au-ink); box-shadow: 0 12px 30px rgba(58, 24, 32, .12); }
.au-tier.cur { outline: 3px solid var(--au-violet); outline-offset: -1px; }
.au-tag { position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 99px; background: var(--au-dot); color: #fff; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.au-tn { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 30px; text-transform: uppercase; letter-spacing: .01em; }
.au-tb { font-size: 14px; color: #7a4a52; }
.au-price { font-family: 'Anton', sans-serif; font-size: 52px; line-height: 1; margin: 10px 0 8px; }
.au-price small { font: 600 15px Inter, sans-serif; color: #7a4a52; margin-left: 4px; }
.au-tier ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; flex: 1; }
.au-tier .au-submit { height: 50px; }
/* in-app paywall + registration wall */
.au-wall-page { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 48px 56px; margin: 8px 0; border-radius: 28px; background: var(--au-violet); color: var(--au-ink); min-height: calc(100vh - 140px); }
.au-lock .au-submit { width: 100%; }
.au-reg { position: fixed; inset: 72px 0 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--au-violet) 55%, transparent); backdrop-filter: blur(7px); opacity: 0; transition: opacity .3s; }
.au-reg.in { opacity: 1; }
.au-reg .au-card { max-width: 520px; color: var(--au-ink); }
.au-reg .au-h { font-size: clamp(56px, 6vw, 84px); }
.au-reg .au-submit { width: 100%; }
@keyframes au-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes au-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
@keyframes au-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 1100px) { .au-stage, .au-wall-page { grid-template-columns: 1fr; padding: 32px 24px; } .au-art { display: none; } .au-tiers { grid-template-columns: 1fr; } .au-nav { display: none; } .au-top { padding: 16px 20px; gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .au-metal, .au-card { animation: none; } }

/* ============================ admin panel ============================ */
.adm-404, .adm-gate { max-width: 440px; margin: 80px auto; text-align: center; padding: 34px; }
.adm-gate form { text-align: left; margin-top: 18px; }
.adm-gate .btn.full { width: 100%; justify-content: center; margin-top: 8px; }
.adm-lock { display: inline-flex; width: 58px; height: 58px; border-radius: 18px; align-items: center; justify-content: center; background: var(--ink); color: var(--ink-text); margin-bottom: 12px; }
.adm-err { color: var(--neg); font-weight: 600; font-size: 13px; margin: 6px 0 0; }
.adm-timer { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.adm-tabs { margin-bottom: 16px; }
.adm-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.adm-body { display: flex; flex-direction: column; gap: 14px; }
.adm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.adm-kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.adm-kpi span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.adm-kpi b { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.adm-kpi small { font-size: 12px; color: var(--muted); }
.adm-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.adm-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.adm-bars i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--ink); opacity: .85; }
.adm-planrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 36px; gap: 10px; align-items: center; padding: 8px 0; font-size: 13.5px; }
.adm-planrow b { text-align: right; }
.adm-search { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--field); width: 240px; }
.adm-temp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 14%, transparent); font-size: 13px; }
.adm-temp code { font: 700 14px var(--mono); padding: 2px 8px; border-radius: 6px; background: var(--glass-strong); user-select: all; }
.adm-users { display: flex; flex-direction: column; }
.adm-ur { display: grid; grid-template-columns: minmax(180px, 1.6fr) 140px 100px 100px 110px 90px minmax(230px, auto); gap: 10px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--line); font-size: 13px; }
.adm-ur.head { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.adm-ur > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-ur > span > b, .adm-ur > span > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-ur small { color: var(--muted); font-size: 11.5px; }
.adm-ur select { height: 30px; border-radius: 8px; font-size: 12.5px; }
.adm-ur.off { opacity: .55; }
.adm-st { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--pos); }
.adm-st.off { background: var(--neg); }
.adm-ur > span:nth-child(6) { flex-direction: row; align-items: center; }
.adm-acts { flex-direction: row !important; justify-content: flex-end; gap: 6px !important; flex-wrap: wrap; }
.adm-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; }
.adm-pcard { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.adm-trial { max-width: 200px; }
.adm-log { display: flex; flex-direction: column; max-height: 560px; overflow-y: auto; }
.adm-lr { display: grid; grid-template-columns: 120px 90px minmax(120px, .8fr) minmax(0, 2fr); gap: 10px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); font-size: 13px; }
.adm-tag { justify-self: start; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; background: var(--chip); }
.adm-tag.t-login-fail, .adm-tag.t-admin-fail { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }
.adm-tag.t-admin { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.adm-tag.t-login, .adm-tag.t-signup { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
.adm-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.adm-checks li::before { content: '✓'; color: var(--pos); font-weight: 800; margin-right: 10px; }
.adm-pwform { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 1200px) { .adm-kpis { grid-template-columns: repeat(2, 1fr); } .adm-two, .adm-pgrid { grid-template-columns: 1fr; } .adm-users { overflow-x: auto; } }
.card-head .adm-search { width: 260px !important; flex: none; }
.card-head > h3 { white-space: nowrap; }