/* 暗夜配色：近黑底、浅灰字，盈利绿、亏损红，低对比不刺眼 */
* { box-sizing: border-box; }
:root { color-scheme: dark; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; background: #0e1116; color: #dfe4ea; }
header { background: #141a21; color: #e8ebf0; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; border-bottom: 1px solid #232b36; }
header h1 { font-size: 19px; margin: 0; }
main { max-width: 760px; margin: 0 auto; padding: 12px 12px 40px; }
.card { background: #171c24; border: 1px solid #262e3a; border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.card h2 { font-size: 16px; margin: 0 0 10px; color: #e8ebf0; }
.hidden { display: none !important; }
.muted { color: #8f99a8; font-size: 13px; }
.error { color: #e0665a; }
.pos { color: #3fb97f; }
.neg { color: #e0665a; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat { background: #1e242e; border: 1px solid #2a323e; border-radius: 8px; padding: 10px; }
.stat-label { font-size: 12px; color: #9aa3b0; }
.stat-value { font-size: 18px; font-weight: 700; margin-top: 2px; word-break: break-all; color: #e8ebf0; }
.stat-value.pos { color: #3fb97f; }
.stat-value.neg { color: #e0665a; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.row label { flex: 1; min-width: 140px; }
label { display: block; font-size: 13px; color: #b6bec9; margin-bottom: 8px; }
label.check { display: flex; align-items: center; gap: 6px; padding-top: 22px; }
input[type="text"], input[type="number"], input[type="date"] { width: 100%; padding: 9px 10px; margin-top: 4px; font-size: 15px; border: 1px solid #333d4a; border-radius: 6px; background: #1e242e; color: #e8ebf0; }
input::placeholder { color: #6d7887; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: #4f8fd0; }
button { background: #2f6fb2; color: #eaf2fb; border: none; border-radius: 6px; padding: 10px 16px; font-size: 15px; cursor: pointer; }
button.ghost { background: #232a34; color: #cfd6de; border: 1px solid #333d4a; }
.seg { display: flex; gap: 6px; }
.seg button { background: #232a34; color: #cfd6de; border: 1px solid #333d4a; }
.seg button.on { background: #2f6fb2; color: #eaf2fb; border-color: #2f6fb2; }
.list .item { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #262e3a; padding: 10px 0; font-size: 14px; line-height: 1.5; }
.list .item:first-child { border-top: none; }
.actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.actions button { padding: 6px 10px; font-size: 13px; }
.actions button.armed { background: #8c2f28; color: #ffe9e6; }
.chart-block { margin-bottom: 14px; }
.chart-block:last-child { margin-bottom: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; color: #cfd6de; margin-bottom: 6px; }
.chart-end { font-weight: 700; font-size: 15px; }
.chart-end.pos { color: #3fb97f; }
.chart-end.neg { color: #e0665a; }
canvas.chart { width: 100%; height: 180px; display: block; background: #141a21; border: 1px solid #262e3a; border-radius: 8px; }
.chart-empty { margin: 8px 0 0; }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(2, 1fr); } }