/* Night-trading-desk design system. Both themes are fully defined here via CSS variables on -- the toggle is instant and can never produce mixed white-on-white states. */ :root[data-theme="dark"] { --page-bg: #04060a; --surface: #0a0e15; --surface-raised: #111726; --border: #1c2434; --ink: #e9eef8; --muted: #94a2b8; --subtle: #5d6b82; --accent: #ffb224; --accent-soft: rgba(255, 178, 36, .12); --accent-2: #3ddbf0; --gain: #ff4d5e; --gain-soft: rgba(255, 77, 94, .12); --loss: #2fe6a7; --loss-soft: rgba(47, 230, 167, .12); --warning: #ffb224; --warning-soft: rgba(255, 178, 36, .12); --info: #3ddbf0; --info-soft: rgba(61, 219, 240, .12); --shadow: 0 2px 6px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.35); --shadow-hover: 0 4px 10px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45); --card-gradient: linear-gradient(180deg, #101a2c 0%, #0a0e15 100%); --glow-gain: 0 0 16px rgba(255, 77, 94, .4); --glow-loss: 0 0 16px rgba(47, 230, 167, .35); --glow-accent: 0 0 16px rgba(255, 178, 36, .35); --line-glow: drop-shadow(0 0 6px var(--tone)); --page-texture: radial-gradient(1100px 520px at 78% -12%, rgba(61,219,240,.08), transparent 60%), radial-gradient(900px 460px at 10% -8%, rgba(255,178,36,.06), transparent 55%), linear-gradient(rgba(148,162,184,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(148,162,184,.03) 1px, transparent 1px); --page-texture-size: auto, auto, 44px 44px, 44px 44px; } :root[data-theme="light"] { --page-bg: #f6f7f9; --surface: #ffffff; --surface-raised: #ffffff; --border: #e2e5ea; --ink: #14181f; --muted: #5b6472; --subtle: #8891a0; --accent: #2f5fd6; --accent-soft: rgba(47, 95, 214, .1); --accent-2: #0e7fa8; --gain: #c23b3b; --gain-soft: rgba(194, 59, 59, .1); --loss: #1f8a5f; --loss-soft: rgba(31, 138, 95, .1); --warning: #b5750c; --warning-soft: rgba(181, 117, 12, .1); --info: #2f5fd6; --info-soft: rgba(47, 95, 214, .1); --shadow: 0 1px 2px rgba(20,24,31,.04), 0 1px 12px rgba(20,24,31,.05); --shadow-hover: 0 2px 4px rgba(20,24,31,.05), 0 8px 20px rgba(20,24,31,.08); --card-gradient: #ffffff; --glow-gain: none; --glow-loss: none; --glow-accent: none; --line-glow: none; --page-texture: none; --page-texture-size: auto; } * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { background-color: var(--page-bg); background-image: var(--page-texture); background-size: var(--page-texture-size); background-attachment: fixed; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'PingFang TC', 'Microsoft JhengHei', sans-serif; min-height: 100vh; display: flex; flex-direction: column; } .mono, .kpi-value, .ticker-item, .topbar-meta, td.num, th.num, .sec, .news-meta { font-family: 'SF Mono', 'JetBrains Mono', 'Roboto Mono', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } /* --- motion ----------------------------------------------------------- */ @keyframes rise-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes live-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(47,230,167,.45); } 55% { box-shadow: 0 0 0 6px rgba(47,230,167,0); } } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes pulse-bar { 0%,100% { opacity: .4; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* --- ticker tape ------------------------------------------------------- */ .ticker-tape { overflow: hidden; border-bottom: 1px solid var(--border); background: var(--surface); position: relative; } .ticker-track { display: flex; width: max-content; will-change: transform; animation: ticker-scroll 150s linear infinite; } .ticker-tape:hover .ticker-track { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: baseline; gap: .55rem; padding: .55rem 1rem; border-right: 1px solid var(--border); text-decoration: none; font-size: .76rem; white-space: nowrap; color: var(--muted); cursor: pointer; } .ticker-item:hover { background: var(--accent-soft); } .ticker-item b { color: var(--ink); font-weight: 700; } .ticker-item .up { color: var(--gain); font-weight: 700; text-shadow: var(--glow-gain); } .ticker-item .down { color: var(--loss); font-weight: 700; text-shadow: var(--glow-loss); } .ticker-item .dim { color: var(--subtle); font-size: .68rem; } /* --- topbar / tabs ------------------------------------------------------ */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface); } .topbar-left { display: flex; align-items: center; gap: .65rem; min-width: 0; } .live-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--loss); animation: live-pulse 2.2s ease-in-out infinite; flex: 0 0 auto; } .brand { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: .85rem; letter-spacing: .14em; color: var(--muted); } .brand b { color: var(--accent); } .topbar-meta { color: var(--subtle); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-right { display: flex; gap: .45rem; flex: 0 0 auto; } .btn { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; padding: .42rem .8rem; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; } .btn:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow-accent); } .btn.primary { border-color: var(--accent); color: var(--accent); } .btn.danger { border-color: var(--gain); color: var(--gain); } .btn:disabled { opacity: .45; cursor: not-allowed; } .tabs { display: flex; gap: .15rem; padding: .4rem .8rem 0; border-bottom: 1px solid var(--border); background: var(--surface); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-size: .86rem; font-weight: 600; padding: .55rem .9rem; cursor: pointer; white-space: nowrap; } .tabs button:hover { color: var(--ink); } .tabs button.active { color: var(--accent); border-bottom-color: var(--accent); } /* --- layout ------------------------------------------------------------ */ main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 1rem 1.1rem 2rem; } .tab-page { animation: rise-in .35s ease-out both; } .two-col { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.1rem; align-items: start; } .two-col.even { grid-template-columns: 1fr 1fr; } /* Grid/flex children default to min-width:auto, which lets a fixed-width ECharts canvas prop a column open wider than the viewport on phones. Allow every layout child to shrink; chart.resize() then follows. */ .two-col > div { min-width: 0; } main { overflow-x: clip; } .sec { color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 1rem 0 .45rem; padding-left: .55rem; border-left: 3px solid var(--accent); } .panel { background: var(--card-gradient); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: .5rem; } .chart { width: 100%; height: 260px; max-width: 100%; overflow: hidden; } .chart.tall { height: 320px; } .note { color: var(--muted); font-size: .82rem; margin: .2rem 0 .6rem; line-height: 1.5; } .footer { color: var(--subtle); font-size: .7rem; text-align: center; padding: 1rem; border-top: 1px solid var(--border); } /* --- KPI cards ----------------------------------------------------------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .65rem; margin: .5rem 0 .4rem; } .kpi-grid.compact { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .55rem; } .kpi { min-height: 84px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-gradient); box-shadow: var(--shadow); padding: .8rem .85rem; display: flex; flex-direction: column; justify-content: space-between; gap: .25rem; position: relative; overflow: hidden; --tone: var(--info); animation: rise-in .5s ease-out both; transition: box-shadow .15s, border-color .15s; } .kpi:nth-child(2) { animation-delay: .04s; } .kpi:nth-child(3) { animation-delay: .08s; } .kpi:nth-child(4) { animation-delay: .12s; } .kpi:nth-child(5) { animation-delay: .16s; } .kpi:nth-child(n+6) { animation-delay: .2s; } .kpi:hover { box-shadow: var(--shadow-hover); border-color: var(--accent-2); } .kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--tone), transparent 80%); filter: var(--line-glow); } .kpi.positive { --tone: var(--gain); } .kpi.negative { --tone: var(--loss); } .kpi.warning { --tone: var(--warning); } .kpi.positive .kpi-value { color: var(--gain); text-shadow: var(--glow-gain); } .kpi.negative .kpi-value { color: var(--loss); text-shadow: var(--glow-loss); } .kpi-label { color: var(--muted); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; } .kpi-value { color: var(--ink); font-size: clamp(1rem, 1.4vw, 1.24rem); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .kpi-note { color: var(--subtle); font-size: .66rem; line-height: 1.3; } .kpi-note.positive { color: var(--gain); } .kpi-note.negative { color: var(--loss); } .kpi-grid.compact .kpi { min-height: 72px; padding: .65rem .7rem; } .kpi-grid.compact .kpi-value { font-size: clamp(.9rem, 1vw, 1.05rem); } /* Period-return strip: always one row of four, three lines per cell. */ .period-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; } .period-grid .period-card { min-height: 0; padding: .55rem .65rem; gap: .12rem; } .period-card .kpi-value { font-size: clamp(.85rem, 1vw, 1rem); } .period-bench { color: var(--subtle); font-size: .64rem; line-height: 1.3; white-space: nowrap; } /* Single-line stat row: label left, number right, minimal height. Selector is specific enough to beat `.kpi-grid.compact .kpi`. */ .kpi-grid .kpi.kpi--row, .kpi-grid.compact .kpi.kpi--row { flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; min-height: 0; padding: .48rem .7rem; } .kpi--row .kpi-label { font-size: .62rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Never wrap the number -- the long label truncates instead. */ .kpi--row .kpi-value { font-size: .85rem; text-align: right; white-space: nowrap; flex: 0 0 auto; } /* --- freshness ----------------------------------------------------------- */ /* Slim one-line status strip -- info-dense, not a big card. */ .freshness { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.1rem; margin: .4rem 0 .6rem; padding: .38rem .7rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: .72rem; } .fresh-status { display: inline-flex; align-items: baseline; gap: .45rem; padding: .1rem .5rem; border-radius: 4px; background: var(--info-soft); } .fresh-status.positive { background: var(--gain-soft); } .fresh-status.warning { background: var(--warning-soft); } .fresh-status.negative { background: var(--loss-soft); } .fresh-status b { font-size: .74rem; } .fresh-status span { color: var(--muted); font-size: .66rem; } .fresh-item { display: inline-flex; align-items: baseline; gap: .35rem; } .fresh-item span { color: var(--subtle); font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; } .fresh-item b { font-size: .7rem; font-family: 'SF Mono', Menlo, monospace; } /* Collapsed-by-default risk alerts: a slim pill until tapped open. */ .alert-collapse { margin: .4rem 0; } .alert-collapse summary { list-style: none; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: 6px; background: var(--warning-soft); color: var(--muted); font-size: .76rem; font-weight: 600; padding: .35rem .7rem; user-select: none; } .alert-collapse summary::-webkit-details-marker { display: none; } .alert-collapse summary::after { content: "▾"; color: var(--subtle); transition: transform .15s ease; } .alert-collapse[open] summary::after { transform: rotate(180deg); } .alert-collapse summary:hover { border-color: var(--warning); } /* --- alerts --------------------------------------------------------------- */ .alert { border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: 6px; background: var(--info-soft); padding: .65rem .85rem; margin: .4rem 0; font-size: .84rem; line-height: 1.5; } .alert.warning { border-left-color: var(--warning); background: var(--warning-soft); } .alert.critical { border-left-color: var(--gain); background: var(--gain-soft); } .alert.success { border-left-color: var(--loss); background: var(--loss-soft); } /* --- tables ---------------------------------------------------------------- */ .table-wrap { overflow-x: auto; padding: 0; } table { width: 100%; border-collapse: collapse; font-size: .82rem; } th, td { padding: .55rem .75rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); } th { color: var(--subtle); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; position: sticky; top: 0; background: var(--surface-raised); } tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--accent-soft); } td.num, th.num { text-align: right; } td .up { color: var(--gain); font-weight: 600; } td .down { color: var(--loss); font-weight: 600; } td .badge { padding: .12rem .5rem; border-radius: 4px; font-size: .7rem; font-weight: 700; } td .badge.ok { color: var(--loss); background: var(--loss-soft); } td .badge.fail { color: var(--gain); background: var(--gain-soft); } td .badge.warn { color: var(--warning); background: var(--warning-soft); } /* Date stamp on a 今日 figure that is really an older session's close. Declared outside the `td` scope because it also rides the ticker tape. */ .badge.stale { display: inline-block; margin-left: .35rem; padding: .1rem .35rem; border-radius: 4px; font-size: .65rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--warning); background: var(--warning-soft); } /* --- forms --------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: .9rem; } .form-grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; color: var(--muted); } .form-grid input, .form-grid select { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; color: var(--ink); font: inherit; font-size: .84rem; padding: .45rem .6rem; min-width: 0; max-width: 100%; } .form-grid label { min-width: 0; } .form-grid input:focus, .form-grid select:focus { outline: none; border-color: var(--accent); } .form-grid button { grid-column: 1 / -1; } .form-grid .confirm { flex-direction: row; align-items: center; gap: .45rem; grid-column: 1 / -1; } .form-msg { grid-column: 1 / -1; font-size: .78rem; min-height: 1rem; } .form-msg.ok { color: var(--loss); } .form-msg.err { color: var(--gain); } .remove-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .35rem; } .remove-list label { flex-direction: row; align-items: center; gap: .5rem; font-size: .84rem; color: var(--ink); } /* --- news ------------------------------------------------------------------ */ .news-controls { display: flex; gap: .55rem; flex-wrap: wrap; margin: .4rem 0 .8rem; } .news-controls select, .news-controls input { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; color: var(--ink); font: inherit; font-size: .84rem; padding: .5rem .65rem; flex: 1 1 12rem; } .news-list { display: flex; flex-direction: column; gap: .6rem; } .news-card { display: block; border: 1px solid var(--border); border-left: 3px solid var(--accent-2); border-radius: 8px; background: var(--card-gradient); box-shadow: var(--shadow); padding: .85rem 1rem; text-decoration: none; color: inherit; animation: rise-in .4s ease-out both; transition: box-shadow .15s, border-color .15s; } .news-card:hover { box-shadow: var(--shadow-hover); border-color: var(--accent); } .news-title { font-size: .92rem; font-weight: 650; line-height: 1.45; } .news-meta { color: var(--subtle); font-size: .7rem; margin-top: .3rem; } /* --- loading ----------------------------------------------------------------- */ .loading { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 3rem 0; color: var(--muted); font-size: .85rem; } .loading-pulse { width: 3rem; height: 3px; background: var(--accent); border-radius: 999px; animation: pulse-bar 1.1s ease-in-out infinite; } .loading[hidden] { display: none; } /* --- phone: one screen carries the whole story ------------------------------- */ @media (max-width: 700px) { main { padding: .6rem .6rem 1.4rem; } .two-col, .two-col.even { grid-template-columns: 1fr; } .kpi-grid, .kpi-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; } .kpi { min-height: 0; padding: .5rem .6rem; gap: .12rem; } .kpi-value { font-size: .95rem; } .kpi-label, .kpi-note { font-size: .58rem; } /* Period strip stays a single four-across row even on phones. */ .kpi-grid.period-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; } .period-grid .period-card { padding: .45rem .35rem; } .period-grid .kpi-label { font-size: .56rem; } .period-card .kpi-value { font-size: .74rem; } .period-bench { font-size: .54rem; } .fresh-item { display: none; } .chart { height: 220px; } .chart.tall { height: 250px; } .ticker-item { padding: .45rem .7rem; font-size: .7rem; } .topbar { padding: .55rem .7rem; } .topbar-meta { display: none; } .form-grid { grid-template-columns: 1fr; } .sec { margin: .75rem 0 .35rem; } }