9516a7a8e8
- define missing design tokens (--card/--foreground/--accent/--font/--text-2) that theme/modal components referenced but :root never declared (they rendered transparent/wrong color) - zero section-panel padding so .signal-header is the single top-spacing source (was double 22px+22px on theme/lineage/health/sim/backtest panels) - theme cards now surface the new source reads (banks rate, retail sales YoY, nonbank household debt, property prices, telecom business confidence)
354 lines
26 KiB
CSS
354 lines
26 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
|
||
|
||
:root {
|
||
color-scheme: dark;
|
||
font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||
color: #edf2f7;
|
||
background: #0b1018;
|
||
font-synthesis: none;
|
||
text-rendering: optimizeLegibility;
|
||
--bg: #0b1018;
|
||
--panel: #111925;
|
||
--panel-soft: #151f2d;
|
||
--line: #263344;
|
||
--line-bright: #35465c;
|
||
--text: #edf2f7;
|
||
--muted: #8794a6;
|
||
--faint: #5b6a7e;
|
||
--mint: #52d6bd;
|
||
--mint-soft: rgba(82, 214, 189, 0.12);
|
||
--amber: #e6b96c;
|
||
--amber-soft: rgba(230, 185, 108, 0.12);
|
||
--red: #ef8b8b;
|
||
--red-soft: rgba(239, 139, 139, 0.12);
|
||
/* aliases the theme/macro/sources/modal components reference — these were
|
||
written against a design-system variable set that was never declared, so
|
||
every var() below fell back to invalid and those elements lost their
|
||
intended background/color. Map them onto the real palette here. */
|
||
--card: #151f2d; /* card background = panel-soft */
|
||
--foreground: #edf2f7; /* primary text = --text */
|
||
--text-2: #a9b2c2; /* secondary text */
|
||
--font: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--accent: #4da3ff; /* blue accent (distinct from mint) */
|
||
--accent-soft: rgba(77, 163, 255, 0.12);
|
||
--danger: #ef8b8b; /* = --red */
|
||
--line-weak: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
body { margin: 0; min-width: 320px; background: var(--bg); }
|
||
button, input { font: inherit; }
|
||
button { cursor: pointer; }
|
||
|
||
.app-shell { min-height: 100vh; display: flex; background: radial-gradient(circle at 85% -10%, rgba(82, 214, 189, 0.08), transparent 32rem), var(--bg); }
|
||
.sidebar { width: 248px; flex: 0 0 248px; min-height: 100vh; padding: 28px 18px 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: rgba(11, 16, 24, 0.76); }
|
||
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 9px 33px; }
|
||
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(82, 214, 189, .7); border-radius: 9px; color: var(--mint); font: 500 11px 'DM Mono', monospace; letter-spacing: -.08em; box-shadow: 0 0 24px rgba(82, 214, 189, .12); }
|
||
.brand-name { font-size: 13px; font-weight: 800; letter-spacing: .01em; }
|
||
.brand-caption { margin-top: 2px; color: var(--faint); font: 10px 'DM Mono', monospace; }
|
||
.nav-stack { display: grid; gap: 5px; }
|
||
.nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600; transition: .2s ease; }
|
||
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.025); }
|
||
.nav-item.active { color: var(--mint); background: var(--mint-soft); border-color: rgba(82,214,189,.18); }
|
||
.nav-glyph { width: 16px; color: currentColor; font-size: 15px; text-align: center; }
|
||
.sidebar-footer { margin-top: auto; padding: 12px 8px 0; }
|
||
.mode-card { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
|
||
.mode-dot, .freshness-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 99px; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
|
||
.mode-label { font-size: 11px; font-weight: 700; }
|
||
.mode-detail, .version-line { margin-top: 3px; color: var(--faint); font: 10px 'DM Mono', monospace; }
|
||
.version-line { padding: 14px 3px 0; }
|
||
|
||
.content { width: min(100%, 1440px); margin: 0 auto; padding: 42px clamp(22px, 4vw, 64px) 70px; }
|
||
.topbar { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 35px; }
|
||
.eyebrow, .section-kicker { color: var(--mint); font: 500 10px 'DM Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
|
||
h1, h2, p { margin: 0; }
|
||
h1 { margin-top: 10px; font-size: clamp(28px, 4vw, 46px); line-height: 1.04; letter-spacing: -.055em; }
|
||
h2 { margin-top: 7px; font-size: 17px; letter-spacing: -.025em; }
|
||
.subtitle { max-width: 560px; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.7; }
|
||
.topbar-meta { text-align: right; color: var(--muted); font: 10px 'DM Mono', monospace; }
|
||
.freshness-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(82,214,189,.25); border-radius: 99px; color: var(--mint); background: var(--mint-soft); }
|
||
.freshness-pill.pill-fixture { border-color: rgba(230,185,108,.35); color: var(--amber); background: var(--amber-soft); }
|
||
.freshness-pill.pill-fixture .freshness-dot { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
|
||
.as-of { margin-top: 10px; }
|
||
|
||
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
|
||
.kpi-card, .panel, .state-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(21,31,45,.86), rgba(14,21,31,.94)); box-shadow: 0 18px 42px rgba(0,0,0,.12); }
|
||
.kpi-card { min-height: 132px; padding: 19px 19px 16px; border-radius: 10px; }
|
||
.accent-card { border-color: rgba(82,214,189,.3); background: linear-gradient(145deg, rgba(25,56,59,.8), rgba(14,31,38,.92)); }
|
||
.kpi-label { color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
|
||
.kpi-value { margin-top: 12px; color: var(--text); font-size: 29px; font-weight: 700; letter-spacing: -.055em; }
|
||
.kpi-unit { margin-left: 4px; color: var(--mint); font: 14px 'DM Mono', monospace; }
|
||
.quality-value { font-size: 22px; text-transform: capitalize; }
|
||
.kpi-foot { margin-top: 10px; color: var(--faint); font: 10px 'DM Mono', monospace; }
|
||
.long-count, .positive-text { color: var(--mint); }
|
||
.short-count, .negative-text { color: var(--red); }
|
||
|
||
.hero-grid, .bottom-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 12px; margin-bottom: 12px; }
|
||
.panel { border-radius: 10px; padding: 22px; }
|
||
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
|
||
.confidence-tag, .status-tag { padding: 6px 8px; color: var(--mint); border: 1px solid rgba(82,214,189,.22); border-radius: 6px; background: var(--mint-soft); font: 10px 'DM Mono', monospace; white-space: nowrap; }
|
||
.pulse-lead { display: flex; gap: 15px; align-items: baseline; margin: 26px 0 25px; }
|
||
.pulse-number { color: var(--mint); font-size: 32px; font-weight: 700; letter-spacing: -.06em; }
|
||
.pulse-copy { max-width: 380px; color: var(--muted); font-size: 12px; line-height: 1.6; }
|
||
.observation-list { display: grid; gap: 16px; }
|
||
.observation-row { display: grid; grid-template-columns: minmax(145px, 1fr) 1.3fr 58px; align-items: center; gap: 14px; }
|
||
.observation-name { color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; }
|
||
.observation-track { height: 6px; overflow: hidden; border-radius: 99px; background: #253140; }
|
||
.observation-bar { height: 100%; border-radius: inherit; }
|
||
.bar-positive { background: var(--mint); box-shadow: 0 0 16px rgba(82,214,189,.42); }
|
||
.bar-negative { background: var(--red); }
|
||
.observation-value { text-align: right; font: 11px 'DM Mono', monospace; }
|
||
.lineage-panel { display: flex; flex-direction: column; }
|
||
.lineage-list { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--line); }
|
||
.lineage-item { display: flex; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
|
||
.lineage-item strong { color: var(--text); font: 10px 'DM Mono', monospace; text-align: right; }
|
||
.lineage-note { margin-top: auto; padding-top: 22px; color: var(--faint); font-size: 11px; line-height: 1.7; }
|
||
|
||
.signal-panel { padding: 0; overflow: hidden; }
|
||
.signal-header { padding: 22px; border-bottom: 1px solid var(--line); }
|
||
.signal-header > div:first-child { flex: 1 1 auto; min-width: 0; }
|
||
.stock-panel .signal-header { align-items: center; flex-wrap: wrap; }
|
||
.stock-panel .panel-subtitle { max-width: 620px; }
|
||
.strategy-meta { color: var(--faint); font: 10px 'DM Mono', monospace; }
|
||
.strategy-meta span { color: var(--line-bright); padding: 0 5px; }
|
||
.table-wrap { overflow-x: auto; }
|
||
table { width: 100%; border-collapse: collapse; min-width: 850px; }
|
||
th { padding: 12px 16px; color: var(--faint); border-bottom: 1px solid var(--line); font: 10px 'DM Mono', monospace; font-weight: 400; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
|
||
td { padding: 14px 16px; border-bottom: 1px solid rgba(38,51,68,.72); color: var(--muted); font-size: 11px; vertical-align: middle; }
|
||
tbody tr:last-child td { border-bottom: 0; }
|
||
tbody tr:hover { background: rgba(255,255,255,.025); }
|
||
.muted-cell, .score-cell, .target-cell { font-family: 'DM Mono', monospace; }
|
||
.symbol-name { display: block; color: var(--text); font-size: 12px; }
|
||
.confidence-cell { display: block; margin-top: 4px; color: var(--faint); font: 9px 'DM Mono', monospace; }
|
||
.side-pill { display: inline-block; min-width: 52px; padding: 5px 7px; border-radius: 5px; font: 10px 'DM Mono', monospace; text-align: center; }
|
||
.side-pill.long { color: var(--mint); background: var(--mint-soft); }
|
||
.side-pill.short { color: var(--red); background: var(--red-soft); }
|
||
.side-pill.neutral { color: var(--amber); background: var(--amber-soft); }
|
||
.reason-code { display: inline-block; margin: 2px 3px 2px 0; padding: 4px 5px; border: 1px solid var(--line-bright); border-radius: 4px; color: var(--faint); font: 9px 'DM Mono', monospace; }
|
||
|
||
/* ---- Theme panel (multi-theme) ---- */
|
||
/* These sections are `class="panel X-panel"` with an inner `.panel-header
|
||
signal-header`. `.panel` applies 22px padding; `.signal-header` applies its
|
||
own 22px + bottom border. Without padding:0 the header ends up inset 44px
|
||
while the body stays at 22px -> header misaligned from content. Zero the
|
||
panel padding and let the header carry the spacing (matches .stock-panel). */
|
||
.theme-panel, .lineage-panel, .health-panel, .sim-panel, .backtest-panel,
|
||
.research-panel { padding: 0; overflow: hidden; }
|
||
.theme-panel { margin-top: 18px; }
|
||
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||
.theme-card { border: 1px solid var(--line-bright); border-radius: 10px; padding: 14px; background: var(--card); }
|
||
.theme-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
|
||
.theme-chip { background: var(--accent-soft, rgba(63,161,255,0.12)); color: var(--accent); font: 9px 'DM Mono', monospace; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
|
||
.theme-label-en { font: 600 12px/1.4 var(--font); color: var(--foreground); }
|
||
.theme-label-th { font-weight: 700; margin-bottom: 2px; }
|
||
.theme-source { font: 10px 'DM Mono', monospace; color: var(--faint); margin-bottom: 10px; }
|
||
.theme-read-value { font-size: 22px; font-weight: 700; color: var(--foreground); }
|
||
.theme-read-meta { font-size: 11px; color: var(--faint); margin-top: 2px; }
|
||
.theme-read-error { font-size: 11px; color: var(--danger, #e5484d); }
|
||
|
||
@media (max-width: 720px) { .theme-grid { grid-template-columns: 1fr; } }
|
||
|
||
/* ---- Rebuilt theme panel: surprise + thesis ---- */
|
||
.theme-surprise { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 6px; }
|
||
.theme-surprise-label { font-size: 10px; color: var(--faint); }
|
||
.theme-surprise-value { font-size: 22px; font-weight: 700; color: var(--accent); }
|
||
.theme-thesis { font-size: 11px; color: var(--text-2, #99a); border-top: 1px dashed var(--line-bright); padding-top: 6px; margin-top: 6px; }
|
||
|
||
.macro-panel { margin-top: 14px; border-top: 1px solid var(--line-bright); padding-top: 12px; }
|
||
.macro-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
|
||
.macro-chip { background: var(--card); border: 1px solid var(--line-bright); border-radius: 6px; padding: 6px 9px; font-size: 11px; }
|
||
.macro-chip strong { color: var(--mint); }
|
||
|
||
/* ---- Lineage / sources table ---- */
|
||
.lineage-panel { margin-top: 18px; }
|
||
.source-table { width: 100%; border-collapse: collapse; }
|
||
.source-table th { text-align: left; font: 700 10px 'DM Mono', monospace; color: var(--faint); padding: 6px 8px; border-bottom: 1px solid var(--line-bright); }
|
||
.source-table td { padding: 7px 8px; font-size: 12px; border-bottom: 1px solid var(--line-weak, rgba(255,255,255,.04)); }
|
||
.source-name { color: var(--accent); }
|
||
.combined-cell { color: var(--mint); font-weight: 600; font-family: 'DM Mono', monospace; }
|
||
|
||
/* theme tag chips */
|
||
.theme-tag { display: inline-block; margin: 2px 3px 2px 0; padding: 2px 6px; border-radius: 4px; background: rgba(63,161,255,.12); color: var(--accent); font-size: 10px; }
|
||
.theme-tag.large { font-size: 12px; padding: 4px 8px; }
|
||
.clickable-row { cursor: pointer; transition: background .15s ease; }
|
||
.clickable-row:hover { background: rgba(63,161,255,.06); }
|
||
|
||
/* theme narrative (long-form) */
|
||
.theme-narrative { font-size: 12px; line-height: 1.6; color: var(--text-2, #9aa); border-top: 1px dashed var(--line-bright); padding-top: 8px; margin-top: 8px; }
|
||
|
||
/* per-symbol detail modal */
|
||
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow: auto; }
|
||
.modal-card { background: var(--card, #0e1218); border: 1px solid var(--line-bright); border-radius: 12px; max-width: 640px; width: 100%; padding: 20px; }
|
||
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
|
||
.modal-kicker { font: 700 10px 'DM Mono', monospace; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
|
||
.modal-head h3 { font-size: 24px; margin: 4px 0 0; }
|
||
.modal-close { background: none; border: 1px solid var(--line-bright); color: var(--text); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; }
|
||
.modal-body { display: flex; flex-direction: column; gap: 16px; }
|
||
.modal-section { border-top: 1px solid var(--line-weak, rgba(255,255,255,.06)); padding-top: 12px; }
|
||
.modal-section-title { font: 700 11px 'DM Mono', monospace; color: var(--faint); margin-bottom: 8px; }
|
||
.modal-sub { font-size: 11px; color: var(--faint); margin-top: 6px; }
|
||
.contrib-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
|
||
.contrib-calc em { font-style: normal; color: var(--accent); }
|
||
.contrib-calc strong { color: var(--mint); font-family: 'DM Mono', monospace; }
|
||
.contrib-calc { color: var(--text-2, #9aa); font-size: 12px; }
|
||
.fund-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 12px; }
|
||
.fund-grid span { background: rgba(255,255,255,.03); border-radius: 6px; padding: 6px 8px; }
|
||
.fund-grid strong { color: var(--text); font-family: 'DM Mono', monospace; }
|
||
.score-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||
.score-table td { padding: 7px 6px; border-bottom: 1px solid var(--line-weak, rgba(255,255,255,.05)); }
|
||
.score-table tr.score-total td { border-top: 1px solid var(--line-bright); font-weight: 700; color: var(--mint); }
|
||
|
||
/* calculation steps in the symbol modal */
|
||
.calc-box { background: rgba(0,0,0,.25); border: 1px solid var(--line-bright); border-radius: 8px; padding: 12px; }
|
||
.calc-line { font: 700 14px 'DM Mono', monospace; color: var(--mint); padding: 6px 0 10px; border-bottom: 1px dashed var(--line-bright); margin-bottom: 8px; }
|
||
.calc-step { padding: 6px 0; border-bottom: 1px solid var(--line-weak, rgba(255,255,255,.05)); }
|
||
.calc-step-head { display: flex; justify-content: space-between; font-size: 13px; }
|
||
.calc-step-head strong { color: var(--text); font-family: 'DM Mono', monospace; }
|
||
.calc-step-note { font-size: 11px; color: var(--faint); margin-top: 3px; line-height: 1.5; }
|
||
.calc-z { font-size: 11px; color: var(--faint); margin-top: 8px; line-height: 1.6; }
|
||
|
||
/* backtest section */
|
||
.backtest-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px 0; }
|
||
.backtest-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--faint); }
|
||
.backtest-controls input, .backtest-controls select { background: #0a0e14; border: 1px solid var(--line-bright); color: var(--text); border-radius: 6px; padding: 7px 9px; font-size: 12px; }
|
||
.primary-btn { background: var(--mint); color: #062a1f; border: none; border-radius: 7px; padding: 9px 16px; font-weight: 700; cursor: pointer; font-size: 12px; }
|
||
.primary-btn:disabled { opacity: .5; cursor: not-allowed; }
|
||
.bt-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
|
||
.bt-kpi { background: rgba(255,255,255,.03); border: 1px solid var(--line-bright); border-radius: 8px; padding: 12px; }
|
||
.bt-kpi span { display: block; font-size: 11px; color: var(--faint); margin-bottom: 6px; }
|
||
.bt-kpi strong { font-size: 15px; font-family: 'DM Mono', monospace; }
|
||
.bt-meta { margin: 4px 0 10px; font-size: 11px; }
|
||
.bt-holdings { margin-top: 8px; font-size: 12px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
||
.bt-history { margin-top: 20px; }
|
||
.bt-history .source-table td { font-size: 12px; padding: 6px 8px; }
|
||
|
||
.thesis-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
|
||
.thesis-row { display: flex; gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line-weak, rgba(255,255,255,.05)); }
|
||
.thesis-theme { min-width: 130px; color: var(--accent); }
|
||
.thesis-text { flex: 1; font-size: 12px; color: var(--text-2, #99a); }
|
||
.thesis-surprise { font-family: 'DM Mono', monospace; color: var(--mint); }
|
||
|
||
/* ---- Simulation panel ---- */
|
||
.sim-panel { margin-top: 18px; }
|
||
.sim-controls { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
|
||
.sim-field { display: flex; flex-direction: column; gap: 4px; }
|
||
.sim-field label { font-size: 11px; color: var(--faint); }
|
||
.sim-field input, .sim-field select { background: var(--card); border: 1px solid var(--line-bright); color: var(--text); padding: 7px 9px; border-radius: 5px; font-size: 12px; }
|
||
.sim-result { display: flex; flex-direction: column; gap: 12px; }
|
||
.sim-sums { display: flex; gap: 24px; }
|
||
.sim-sum span { display: block; font-size: 11px; color: var(--faint); }
|
||
.sim-sum strong { font-size: 20px; }
|
||
.sim-note { font-size: 11px; color: var(--amber); font-style: italic; }
|
||
.sim-buckets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
|
||
.sim-bucket { border: 1px solid var(--line-bright); border-radius: 8px; padding: 10px; min-width: 0; overflow: hidden; }
|
||
.sim-bucket-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||
.sim-bucket-tag { font: 700 10px 'DM Mono', monospace; padding: 2px 6px; border-radius: 4px; flex: none; }
|
||
.sim-bucket-tag.b1 { background: var(--accent-soft, rgba(63,161,255,.15)); color: var(--accent); }
|
||
.sim-bucket-tag.b2 { background: var(--amber-soft, rgba(245,158,11,.15)); color: var(--amber); }
|
||
.sim-bucket-tag.b3 { background: var(--mint-soft, rgba(94,234,212,.15)); color: var(--mint); }
|
||
.sim-order-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
|
||
.sim-order-table td { padding: 3px 4px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
|
||
.sim-order-table td:first-child { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.sim-bucket-head strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
|
||
@media (max-width: 720px) { .sim-buckets { grid-template-columns: 1fr; } }
|
||
.row-action, .primary-button { padding: 8px 10px; border: 1px solid var(--line-bright); border-radius: 5px; color: var(--text); background: transparent; font-size: 10px; white-space: nowrap; transition: .2s ease; }
|
||
.row-action:hover { color: var(--mint); border-color: var(--mint); }
|
||
|
||
/* Stock board (alternative factor × signal merged table) */
|
||
.stock-panel { padding: 0; overflow: hidden; margin-bottom: 12px; }
|
||
.panel-subtitle { margin-top: 10px; color: var(--faint); font-size: 11px; line-height: 1.6; }
|
||
.panel-subtitle em { color: var(--mint); font-style: normal; }
|
||
.stock-controls { display: flex; align-items: center; gap: 14px; }
|
||
.toggle-filter { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 10px 'DM Mono', monospace; cursor: pointer; user-select: none; }
|
||
.toggle-filter input { width: auto; accent-color: var(--mint); }
|
||
.toggle-filter span { white-space: nowrap; }
|
||
.dividend-dot { margin-left: 6px; color: var(--amber); }
|
||
th.sortable { cursor: pointer; transition: color .15s ease; }
|
||
th.sortable:hover { color: var(--text); }
|
||
th.sortable.active { color: var(--mint); }
|
||
|
||
.research-panel { margin-bottom: 12px; }
|
||
.research-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: center; margin-top: 22px; }
|
||
.research-status { display: inline-block; padding: 7px 9px; border-radius: 5px; font: 11px 'DM Mono', monospace; text-transform: uppercase; }
|
||
.status-ready { color: var(--mint); background: var(--mint-soft); }
|
||
.status-blocked { color: var(--amber); background: var(--amber-soft); }
|
||
.status-descriptive { color: var(--amber); background: var(--amber-soft); }
|
||
.research-reason { margin-top: 12px; color: var(--muted); font-size: 12px; }
|
||
.research-meta { margin-top: 10px; color: var(--faint); font: 9px 'DM Mono', monospace; overflow-wrap: anywhere; }
|
||
.gate-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
|
||
.gate-row { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
|
||
.gate-row strong { color: var(--text); font: 10px 'DM Mono', monospace; text-align: right; }
|
||
.research-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
|
||
.research-result-row { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--faint); font: 9px 'DM Mono', monospace; }
|
||
.research-result-row strong { font-size: 14px; }
|
||
.empty-research { margin-top: 18px; padding: 14px; border: 1px dashed var(--line-bright); border-radius: 6px; color: var(--faint); font: 10px 'DM Mono', monospace; }
|
||
|
||
.bottom-grid { grid-template-columns: 1fr 1fr; }
|
||
.thesis-panel { background: linear-gradient(145deg, rgba(36,48,64,.9), rgba(15,23,34,.95)); }
|
||
.thesis-panel p, .ledger-panel p { margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.8; }
|
||
.thesis-rule { display: flex; align-items: center; gap: 9px; margin-top: 24px; color: var(--mint); font: 10px 'DM Mono', monospace; }
|
||
.thesis-rule span { width: 22px; height: 1px; background: var(--mint); }
|
||
.warning-tag { color: var(--amber); border-color: rgba(230,185,108,.3); background: var(--amber-soft); }
|
||
.neutral-tag { color: var(--amber); border-color: rgba(230,185,108,.25); background: var(--amber-soft); }
|
||
.auth-form { display: grid; gap: 10px; margin-top: 16px; }
|
||
.auth-copy { color: var(--muted); font-size: 11px; line-height: 1.65; }
|
||
.paper-auth-warning { margin-top: 14px; padding: 9px 10px; border: 1px solid rgba(230,185,108,.3); border-radius: 5px; color: var(--amber); background: var(--amber-soft); font: 10px 'DM Mono', monospace; line-height: 1.55; }
|
||
.entry-form { display: grid; gap: 10px; margin-top: 16px; }
|
||
.selected-entry { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--muted); font: 10px 'DM Mono', monospace; }
|
||
.selected-entry strong { color: var(--text); font-size: 13px; }
|
||
input { width: 100%; padding: 10px 11px; outline: none; border: 1px solid var(--line-bright); border-radius: 6px; color: var(--text); background: rgba(11,16,24,.7); font: 11px 'DM Mono', monospace; }
|
||
input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(82,214,189,.09); }
|
||
.primary-button { color: #071411; border-color: var(--mint); background: var(--mint); font-weight: 700; }
|
||
.primary-button:disabled { opacity: .5; cursor: wait; }
|
||
.empty-ledger { margin-top: 18px; padding: 14px; border: 1px dashed var(--line-bright); border-radius: 6px; color: var(--faint); font: 10px 'DM Mono', monospace; text-align: center; }
|
||
.notice { margin-top: 14px; padding: 9px 10px; border-radius: 5px; font: 10px 'DM Mono', monospace; }
|
||
.notice-success { color: var(--mint); background: var(--mint-soft); }
|
||
.notice-error { color: var(--red); background: var(--red-soft); }
|
||
.state-card { margin-top: 12px; padding: 28px; border-radius: 10px; color: var(--muted); font: 12px 'DM Mono', monospace; }
|
||
.error-state { color: var(--red); border-color: rgba(239,139,139,.3); }
|
||
|
||
@media (max-width: 1040px) {
|
||
.sidebar { width: 208px; flex-basis: 208px; }
|
||
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.app-shell { display: block; }
|
||
.sidebar { width: 100%; min-height: auto; padding: 15px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
|
||
.brand-lockup { padding: 0; }
|
||
.nav-stack { display: flex; overflow-x: auto; margin-top: 14px; gap: 5px; }
|
||
.nav-item { flex: 0 0 auto; padding: 8px 10px; font-size: 10px; }
|
||
.nav-glyph { display: none; }
|
||
.sidebar-footer { display: none; }
|
||
.content { padding: 30px 16px 44px; }
|
||
.topbar { display: block; padding-bottom: 25px; }
|
||
.topbar-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; text-align: left; }
|
||
.hero-grid, .bottom-grid { grid-template-columns: 1fr; }
|
||
/* .panel's default 18px must NOT re-pad the section panels (theme/stock/
|
||
lineage/health/sim/backtest/research) — those keep padding:0 so their
|
||
.signal-header stays the single source of top spacing; otherwise the
|
||
header (#1a7f) would sit inset 18px further than the body. */
|
||
.panel:not(.theme-panel):not(.stock-panel):not(.lineage-panel):not(.health-panel):not(.sim-panel):not(.backtest-panel):not(.research-panel):not(.signal-panel) { padding: 18px; }
|
||
.signal-header { padding: 18px; }
|
||
.research-grid { grid-template-columns: 1fr; gap: 18px; }
|
||
.research-results { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
|
||
@media (max-width: 500px) {
|
||
.kpi-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
|
||
.kpi-card { min-height: 112px; padding: 14px; }
|
||
.kpi-value { font-size: 22px; }
|
||
.kpi-foot { font-size: 9px; }
|
||
.pulse-lead { display: block; margin: 20px 0; }
|
||
.pulse-copy { display: block; margin-top: 8px; }
|
||
.observation-row { grid-template-columns: 1fr 55px; gap: 8px; }
|
||
.observation-track { grid-column: 1 / -1; grid-row: 2; }
|
||
.observation-value { grid-column: 2; grid-row: 1; }
|
||
.lineage-item { display: block; }
|
||
.lineage-item strong { display: block; margin-top: 5px; text-align: left; }
|
||
h1 { font-size: 31px; }
|
||
.subtitle { font-size: 11px; }
|
||
}
|