:root {
  color-scheme: light;
  --ink: #111827;
  --muted: #667085;
  --line: #e5e7eb;
  --canvas: #f3f5f8;
  --card: #ffffff;
  --accent: #ff5a36;
  --accent-dark: #de3f20;
  --accent-soft: #fff0eb;
  --safe: #087c61;
  --safe-soft: #e7f7f1;
  --warn: #a15c00;
  --warn-soft: #fff5df;
  --danger: #c52233;
  --danger-soft: #fff0f1;
  --shadow: 0 14px 36px rgba(17, 24, 39, .08);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f8fafc;
  --muted: #a8b3c5;
  --line: #334155;
  --canvas: #0b1120;
  --card: #111827;
  --accent: #ff6b4a;
  --accent-dark: #ff9a82;
  --accent-soft: #3a1f1a;
  --safe: #5ee2bd;
  --safe-soft: #12372f;
  --warn: #ffc970;
  --warn-soft: #3b2a12;
  --danger: #ff8b98;
  --danger-soft: #3d1720;
  --shadow: 0 14px 36px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.auth-shell { min-height: 100svh; display: grid; place-items: center; padding: 24px 18px; background: radial-gradient(circle at 80% 0%, #ffe0d5 0, transparent 38%), linear-gradient(160deg, #fff 0%, #f4f6f9 70%); }
.auth-card { width: min(100%, 420px); padding: 30px 24px; border: 1px solid rgba(229, 231, 235, .9); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.brand-mark { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 22px; border-radius: 17px; color: #fff; background: linear-gradient(135deg, var(--accent), #ff9c45); font-size: 24px; font-weight: 900; box-shadow: 0 10px 24px rgba(255, 90, 54, .28); }
.eyebrow { margin: 0 0 5px; color: var(--accent-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 27px; line-height: 1.2; }
h2 { margin-bottom: 0; font-size: 18px; }
.muted { color: var(--muted); font-size: 14px; line-height: 1.65; }
.stack { display: grid; gap: 17px; margin-top: 25px; }
label { display: grid; gap: 7px; color: #344054; font-size: 14px; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #cfd4dc; border-radius: 11px; outline: 0; color: var(--ink); background: #fff; font-weight: 500; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 90, 54, .13); }
input:disabled, select:disabled { color: #98a2b3; background: #f2f4f7; }
label small { color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 500; }
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 60px; }
.text-button { position: absolute; top: 0; right: 0; height: 100%; border: 0; padding: 0 13px; color: var(--accent-dark); background: transparent; font-size: 13px; font-weight: 800; }
.primary { border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--accent), #f04438); font-weight: 800; box-shadow: 0 8px 20px rgba(255, 90, 54, .2); }
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: .55; cursor: wait; }
.large { min-height: 49px; padding: 12px 16px; }
.form-error { min-height: 18px; margin: -5px 0 0; color: var(--danger); font-size: 13px; line-height: 1.4; }
.security-note { margin: 22px 0 0; color: #98a2b3; font-size: 12px; text-align: center; }

.app-shell { min-height: 100svh; padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: calc(12px + env(safe-area-inset-top)) 18px 11px; border-bottom: 1px solid rgba(229,231,235,.85); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.topbar h1 { margin: 0; font-size: 22px; }
.topbar .eyebrow { margin-bottom: 2px; }
.top-actions { display: flex; gap: 6px; }
.icon-button { min-height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; color: #475467; background: #fff; font-size: 12px; font-weight: 800; }
.danger-text { color: var(--danger); }
.global-draw-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: min(calc(100% - 32px), 788px); gap: 12px; margin: 12px auto 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 5px 18px rgba(17, 24, 39, .05); }
.global-draw-issue { display: grid; gap: 2px; }
.global-draw-issue small, .global-draw-bar time { color: var(--muted); font-size: 9px; }
.global-draw-issue strong { font-size: 12px; }
.global-draw-bar time { text-align: right; white-space: nowrap; }
.global-draw-digits { display: flex; justify-content: center; gap: 5px; }
.global-draw-digits span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: 13px; font-weight: 900; }
.content { width: min(100%, 820px); margin: 0 auto; padding: 16px; }
.view { display: none; animation: rise .2s ease-out; }
.view.active { display: block; }
@keyframes rise { from { opacity: .2; transform: translateY(5px); } }

.status-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
.status-strip div { display: grid; flex: 1; gap: 2px; }
.status-strip strong { font-size: 14px; }
.status-strip small { color: var(--muted); font-size: 11px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #98a2b3; box-shadow: 0 0 0 4px #f2f4f7; }
.status-dot.online { background: #12b76a; box-shadow: 0 0 0 4px #ecfdf3; }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.badge { display: inline-flex; align-items: center; width: fit-content; min-height: 25px; padding: 4px 8px; border-radius: 999px; color: #475467; background: #f2f4f7; font-size: 11px; font-weight: 800; white-space: nowrap; }
.safe-badge { color: var(--safe); background: var(--safe-soft); }
.warn-badge { color: var(--warn); background: var(--warn-soft); }
.danger-badge { color: var(--danger); background: var(--danger-soft); }
.muted-badge { color: #667085; }

.hero-card { overflow: hidden; padding: 18px; border-radius: 20px; color: #fff; background: linear-gradient(140deg, #111827 0%, #29364b 62%, #3a2b32 100%); box-shadow: var(--shadow); }
.hero-head, .hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-head p { margin-bottom: 4px; color: #cbd5e1; font-size: 12px; }
.hero-head strong { font-size: 19px; letter-spacing: .02em; }
.hero-card .badge { color: #ffd9ce; background: rgba(255,90,54,.2); }
.digits { display: flex; gap: 9px; margin: 22px 0; }
.digits span { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: 22px; font-weight: 900; box-shadow: inset 0 -4px 8px rgba(111, 23, 5, .22); }
.hero-foot { color: #cbd5e1; font-size: 11px; }

.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.metric-grid article { display: grid; gap: 4px; min-height: 95px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.metric-grid .balance-metric { border-color: #a7e5d3; background: linear-gradient(145deg, var(--safe-soft), var(--card) 72%); }
.metric-grid .balance-metric strong { color: var(--safe); }
.metric-grid span { color: var(--muted); font-size: 12px; }
.metric-grid strong { font-size: 21px; }
.metric-grid small { color: #98a2b3; font-size: 10px; }
.metric-grid.compact article { min-height: 76px; }
.value-positive { color: var(--safe); }
.value-negative { color: var(--danger); }

.emergency-button { display: flex; align-items: center; width: 100%; gap: 13px; margin: 2px 0 8px; padding: 15px; border: 1px solid #ffc7ce; border-radius: 16px; color: var(--danger); background: var(--danger-soft); text-align: left; }
.emergency-button.engaged { color: #fff; border-color: var(--danger); background: var(--danger); }
.emergency-button > span:last-child { display: grid; gap: 3px; }
.emergency-button strong { font-size: 15px; }
.emergency-button small { opacity: .82; font-size: 11px; }
.stop-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: rgba(197,34,51,.11); }
.window-note { margin: 0 2px 16px; color: var(--muted); font-size: 11px; text-align: center; }

.panel { margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.overall-progress { display: grid; gap: 8px; margin: -2px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.overall-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.overall-progress strong { font-size: 18px; }
.overall-progress span { color: var(--safe); font-size: 13px; font-weight: 900; }
.overall-progress small { color: var(--muted); font-size: 11px; }
.progress-track { overflow: hidden; height: 8px; border-radius: 999px; background: var(--line); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--safe)); transition: width .25s ease; }
.compact-stack { gap: 11px; margin-top: 12px; }
.protocol-panel { border-color: #ffd2c7; background: linear-gradient(180deg, #fff 0%, #fff9f7 100%); }
.protocol-target { margin: 9px 0 0; color: #667085; font-size: 12px; overflow-wrap: anywhere; }
.protocol-target span { color: #344054; font-weight: 700; }
.site-settings-form { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.secondary-button { min-height: 42px; border: 1px solid var(--accent); border-radius: 11px; color: var(--accent-dark); background: var(--card); font-weight: 800; }
.secondary-button:disabled { opacity: .55; cursor: wait; }
.protocol-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.protocol-actions button { min-height: 44px; }
.protocol-remember-row { background: var(--canvas); }
.protocol-auto-login-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.protocol-auto-login-control > div { display: grid; gap: 4px; }
.protocol-auto-login-control strong { font-size: 13px; }
.protocol-auto-login-control small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.protocol-auto-login-control button { flex: 0 0 auto; min-height: 40px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading p { margin-bottom: 3px; }
.link-button { min-height: 34px; padding: 5px 8px; border: 0; color: var(--accent-dark); background: transparent; font-size: 12px; font-weight: 800; }
.plan-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; }
.full { grid-column: 1 / -1; }
.switch-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 55px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.switch-row span { display: grid; gap: 3px; }
.switch-row input { appearance: none; width: 46px; min-height: 26px; margin: 0; border: 0; border-radius: 999px; padding: 3px; background: #d0d5dd; transition: background .15s; }
.switch-row input::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.22); transition: transform .15s; }
.switch-row input:checked { background: var(--accent); }
.switch-row input:checked::before { transform: translateX(20px); }
.first-run-note { display: grid; gap: 4px; padding: 12px; border-left: 3px solid var(--accent); border-radius: 4px 10px 10px 4px; color: #7a2e1f; background: var(--accent-soft); font-size: 12px; line-height: 1.5; }

.list { display: grid; gap: 9px; }
.plan-streak-note { margin: -5px 0 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink); background: var(--safe-soft); font-size: 12px; line-height: 1.5; }
.list-item { display: grid; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.list-item-head, .list-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.list-item strong { font-size: 14px; }
.list-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.list-item-foot { color: #98a2b3; font-size: 11px; }
.execution-facts { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 9px; color: var(--muted); background: var(--canvas); font-size: 11px; }
.execution-facts strong { color: var(--ink); font-size: 12px; text-align: right; }
.item-actions { display: flex; gap: 7px; margin-top: 2px; }
.secondary, .danger-outline { flex: 1; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 12px; font-weight: 800; }
.danger-outline { color: var(--danger); border-color: #f5b7bf; }
.empty { padding: 26px 12px; color: #98a2b3; font-size: 13px; text-align: center; }
.table-list { display: grid; }
.table-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.table-row:first-child { border-top: 0; }
.table-row-main { display: grid; gap: 4px; min-width: 0; }
.table-row strong { font-size: 13px; }
.table-row p { margin: 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.mini-digits { display: flex; align-items: center; gap: 4px; }
.mini-digits span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: 12px; font-weight: 800; }
.amount { align-self: center; font-size: 13px; font-weight: 900; text-align: right; }
.orders-note { margin: -5px 14px 9px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.site-order-panel { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: linear-gradient(145deg, var(--accent-soft), var(--card) 48%); }
.site-order-tabs { display: flex; gap: 7px; overflow-x: auto; margin: 12px 0 15px; padding-bottom: 3px; scrollbar-width: thin; }
.site-order-tabs button { flex: 0 0 auto; min-height: 36px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--card); font-size: 12px; font-weight: 800; }
.site-order-tabs button.active { color: #fff; border-color: var(--accent); background: var(--accent); }
.site-order-form { display: grid; gap: 12px; }
.site-order-quote-row { display: grid; grid-template-columns: minmax(150px, .55fr) 1fr; align-items: stretch; gap: 9px; }
.site-order-quote-row button { min-height: 42px; }
.site-order-quote-result { display: grid; align-content: center; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--canvas); font-size: 12px; line-height: 1.45; }
.site-order-quote-result.safe { color: var(--safe); border-color: color-mix(in srgb, var(--safe) 38%, var(--line)); background: var(--safe-soft); }
.site-order-quote-result.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 38%, var(--line)); background: var(--warn-soft); }
.site-order-record { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.site-order-record-head, .site-order-record-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.site-order-record-head strong { font-size: 13px; }
.site-order-record p, .site-order-record-foot { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.site-order-record .order-cancel-button { flex: 0 0 auto; min-width: 76px; }
.order-card { display: grid; gap: 10px; min-width: 0; padding: 14px; border-top: 1px solid var(--line); background: var(--card); }
.order-card:first-child { border-top: 0; }
.order-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.order-source { width: fit-content; padding: 3px 8px; border-radius: 999px; color: var(--muted); background: var(--canvas); font-size: 10px; font-weight: 850; }
.order-source.plan { color: var(--safe); background: var(--safe-soft); }
.order-source.attempt { color: var(--accent-dark); background: var(--accent-soft); }
.order-card-main { display: grid; gap: 8px; min-width: 0; }
.order-card-main > strong { min-width: 0; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.order-card-main > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.order-money-grid, .order-settlement { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.order-money-grid > span, .order-settlement > span { display: grid; min-width: 0; gap: 2px; padding: 9px; border-radius: 10px; color: var(--muted); background: var(--canvas); font-size: 10px; line-height: 1.4; }
.order-money-grid small { color: var(--muted); font-size: 9px; }
.order-money-grid b, .order-settlement b { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.order-settlement { padding-top: 8px; border-top: 1px dashed var(--line); }
.order-settlement b.value-positive { color: var(--safe); }
.order-settlement b.value-negative { color: var(--danger); }
.order-result { padding: 8px 10px; border-radius: 9px; background: var(--canvas); }
.order-cancel-button { width: 100%; min-height: 42px; }
.order-cancel-state { padding: 10px 11px; border-radius: 10px; font-size: 11px; font-weight: 800; line-height: 1.5; text-align: center; }
.order-cancel-state.pending { color: var(--warn); background: var(--warn-soft); }
.order-cancel-state.success { color: var(--safe); background: var(--safe-soft); }
.order-cancel-state.unknown { color: var(--danger); background: var(--danger-soft); }
.weekly-report-panel { display: grid; gap: 10px; }
.weekly-report-panel .section-heading { margin-bottom: 0; }
.weekly-note { margin: 0; }
.weekly-report-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.weekly-report-totals > span { display: grid; gap: 3px; padding: 10px; border-radius: 10px; color: var(--muted); background: var(--canvas); font-size: 10px; }
.weekly-report-totals b { color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.weekly-report-totals b.value-positive { color: var(--safe); }
.weekly-report-totals b.value-negative { color: var(--danger); }
.weekly-report-days { display: grid; gap: 7px; }
.weekly-day-row { display: grid; grid-template-columns: minmax(72px, auto) 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.weekly-day-row strong { font-size: 11px; }
.weekly-day-row span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.weekly-day-row b { font-size: 12px; text-align: right; }

.history-panel { padding: 18px; }
.history-toolbar { display: grid; grid-template-columns: minmax(190px, 1fr) auto auto; align-items: end; gap: 10px; }
.history-toolbar button { min-height: 46px; padding: 10px 16px; }
.group-search-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.group-search-actions { display: flex; gap: 8px; }
.group-search-actions button { flex: none; min-height: 44px; padding: 9px 13px; }
.streak-box { display: grid; gap: 12px; margin-top: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.streak-box h3 { margin: 0; font-size: 18px; }
.streak-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.streak-controls label { font-size: 11px; }
.streak-controls input, .streak-controls select { min-height: 42px; padding: 8px 10px; font-size: 12px; }
.streak-actions { display: flex; gap: 8px; }
.streak-actions button { flex: 1; min-height: 42px; }
.streak-rule { margin: 0; padding: 10px 11px; border-radius: 10px; color: var(--muted); background: var(--canvas); font-size: 11px; line-height: 1.55; }
.position-streak-stats { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.position-streak-stats .section-heading { margin: 0; }
.position-streak-stats .field-note { margin: 0; }
.streak-analysis-controls { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr) auto; gap: 9px; align-items: end; }
.streak-analysis-controls .primary { min-height: 42px; }
.position-streak-stats-meta { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.position-streak-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.position-streak-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.position-streak-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.position-streak-card header strong { color: var(--accent-dark); font-size: 16px; }
.position-streak-card header span { color: var(--muted); font-size: 11px; text-align: right; }
.position-streak-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.position-streak-metric { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 9px; border-radius: 10px; background: var(--safe-soft); }
.position-streak-metric span { color: var(--muted); font-size: 10px; font-weight: 800; }
.position-streak-metric strong { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.position-streak-metric b { color: var(--safe); font-size: 16px; font-variant-numeric: tabular-nums; }
.position-streak-metric small { align-self: end; color: var(--muted); font-size: 9px; text-align: right; }
.position-streak-metric.sample-low { background: var(--warn-soft); }
.position-streak-metric.sample-low b { color: var(--warn); }
.position-streak-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 5px; }
.position-streak-actions button { min-height: 34px; padding: 6px 7px; font-size: 10px; }
.direct-follow-status { margin: 10px 0 13px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--safe) 45%, var(--line)); border-radius: 11px; color: var(--safe); background: var(--safe-soft); font-size: 12px; font-weight: 800; line-height: 1.5; }
.direct-follow-status.locked { border-color: color-mix(in srgb, var(--warn) 48%, var(--line)); color: var(--warn); background: var(--warn-soft); }
.position-streak-actions button.not-ready { color: var(--muted); background: var(--canvas); }
.conditional-followers { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.conditional-followers .section-heading { margin: 0; }
.conditional-followers .field-note { margin: 0; }
.conditional-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-items: end; }
.conditional-controls label { font-size: 11px; }
.conditional-controls input, .conditional-controls select { min-height: 42px; padding: 8px 10px; font-size: 12px; }
.conditional-controls .primary { min-height: 42px; }
.conditional-meta { color: var(--muted); font-size: 11px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.conditional-reliability { padding: 10px 11px; border-radius: 10px; font-size: 11px; font-weight: 750; line-height: 1.55; }
.conditional-reliability.neutral { color: var(--muted); background: var(--card); }
.conditional-reliability.warn { color: var(--warn); background: var(--warn-soft); }
.conditional-reliability.safe { color: var(--safe); background: var(--safe-soft); }
.conditional-candidate-summary { display: grid; gap: 10px; padding: 13px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.conditional-candidate-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conditional-candidate-head strong { font-size: 13px; }
.conditional-candidate-digits { display: flex; flex-wrap: wrap; gap: 7px; }
.conditional-digit-chip { display: inline-grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums; }
.conditional-candidate-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.conditional-candidate-metrics span { display: grid; gap: 2px; padding: 8px; border-radius: 9px; background: var(--card); color: var(--muted); font-size: 9px; }
.conditional-candidate-metrics b { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.conditional-order-button { min-height: 40px; }
.conditional-top-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.seven-streak-current-card:has(.primary) { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn-soft); }
.seven-streak-current-card { align-content: start; }
.seven-reverse-label { color: var(--warn) !important; font-size: 11px !important; font-weight: 850; }
.seven-reverse-code { color: var(--accent-dark); font-size: clamp(34px, 9vw, 52px); line-height: 1; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.seven-streak-dual-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 5px 0; }
.seven-streak-dual-status > div { display: grid; gap: 3px; padding: 8px; border-radius: 9px; background: var(--canvas); }
.seven-streak-dual-status small, .seven-streak-dual-status span { color: var(--muted); font-size: 9px; line-height: 1.4; }
.seven-streak-dual-status b { font-size: 13px; }
.seven-streak-dual-status b.hit { color: var(--safe); }
.seven-streak-dual-status b.miss { color: var(--danger); }
.seven-outcome-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 3px; }
.seven-outcome-title b { font-size: 10px; }
.seven-outcome-title small { text-align: right; }
.seven-outcome-flow { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; border-radius: 9px; background: var(--canvas); }
.seven-outcome-chip { display: grid; min-width: 47px; gap: 1px; padding: 5px 6px; border-radius: 8px; text-align: center; }
.seven-outcome-chip small { color: inherit; font-size: 8px; opacity: .82; }
.seven-outcome-chip b { font-size: 9px; white-space: nowrap; }
.seven-outcome-chip.reverse-hit { color: var(--safe); background: var(--safe-soft); }
.seven-outcome-chip.reverse-miss { color: var(--danger); background: var(--danger-soft); }
.seven-history-miss { color: var(--danger) !important; font-weight: 750; }
.conditional-top-card { display: grid; gap: 5px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.conditional-top-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conditional-top-card header strong { color: var(--accent-dark); font-size: 22px; }
.conditional-top-card header b { font-size: 14px; font-variant-numeric: tabular-nums; }
.conditional-top-card span, .conditional-top-card small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.conditional-subheading { margin: 2px 0 -3px; font-size: 13px; }
.conditional-same-position, .conditional-exact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.conditional-summary-card { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.conditional-summary-card strong { font-size: 12px; }
.conditional-summary-card span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.conditional-matrix { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.conditional-matrix table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 10px; font-variant-numeric: tabular-nums; }
.conditional-matrix th, .conditional-matrix td { min-width: 54px; padding: 7px 5px; border: 1px solid var(--line); text-align: center; }
.conditional-matrix th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: var(--canvas); }
.conditional-matrix tbody th { left: 0; z-index: 2; }
.conditional-matrix tr.selected th { color: var(--accent-dark); }
.conditional-matrix td { background: var(--card); }
.conditional-matrix td.heat-1 { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.conditional-matrix td.heat-2 { background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.conditional-matrix td.heat-3 { background: color-mix(in srgb, var(--accent) 21%, var(--card)); }
.conditional-matrix td.heat-4 { background: color-mix(in srgb, var(--accent) 28%, var(--card)); }
.conditional-matrix td.heat-5 { background: color-mix(in srgb, var(--accent) 35%, var(--card)); }
.conditional-matrix td.heat-6 { background: color-mix(in srgb, var(--accent) 42%, var(--card)); }
.conditional-matrix td.heat-7 { background: color-mix(in srgb, var(--accent) 49%, var(--card)); }
.conditional-matrix td.heat-8 { background: color-mix(in srgb, var(--accent) 56%, var(--card)); }
.conditional-matrix td.heat-9 { background: color-mix(in srgb, var(--accent) 63%, var(--card)); }
.conditional-matrix td b { display: block; color: var(--ink); font-size: 10px; }
.conditional-matrix td small { color: var(--muted); font-size: 9px; }
.conditional-stability { padding: 10px 11px; border-radius: 10px; color: var(--muted); background: var(--card); font-size: 10px; line-height: 1.55; }
.prediction-panel { display: grid; gap: 13px; }
.smart-plan-card { display: grid; gap: 11px; margin: 0 14px; padding: 15px; border: 2px solid color-mix(in srgb, var(--safe) 45%, var(--line)); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--safe-soft) 72%, var(--card)), var(--card)); }
.smart-plan-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.smart-plan-heading h3, .smart-plan-heading p { margin: 0; }
.smart-plan-detail, .smart-plan-blockers, .smart-plan-card > small { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.smart-plan-blockers { color: var(--danger); }
.smart-plan-result { display: grid; gap: 10px; }
.smart-plan-code { color: var(--accent-dark); font-size: clamp(28px, 10vw, 44px); font-weight: 900; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.smart-plan-title { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.smart-plan-title strong { font-size: 15px; }
.smart-plan-title span { color: var(--muted); font-size: 10px; }
.smart-plan-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.smart-plan-metrics span { display: grid; gap: 2px; padding: 9px; border-radius: 10px; background: var(--canvas); color: var(--muted); font-size: 9px; line-height: 1.35; }
.smart-plan-metrics b { color: var(--ink); font-size: 14px; }
.smart-plan-unit-label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.smart-plan-unit-label input { min-height: 44px; }
.smart-plan-unit-label small { color: var(--muted); }
.short-term-panel { gap: 13px; }
.short-term-list { display: grid; gap: 11px; margin: 0 14px; }
.short-term-card { display: grid; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.short-term-card.short-term-forward { border-left: 3px solid var(--accent); }
.short-term-card.short-term-reverse { border-left: 3px solid var(--warn); }
.short-term-card header, .short-term-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.short-term-card header strong { display: block; font-size: 14px; }
.short-term-card header small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.short-term-code { color: var(--accent-dark); font-size: clamp(30px, 10vw, 46px); font-weight: 900; letter-spacing: .16em; line-height: 1; font-variant-numeric: tabular-nums; }
.short-term-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.short-term-metrics span { display: grid; gap: 2px; padding: 8px; border-radius: 9px; color: var(--muted); background: var(--canvas); font-size: 9px; line-height: 1.35; }
.short-term-metrics b { color: var(--ink); font-size: 14px; }
.short-term-metrics small { color: var(--muted); font-size: 9px; }
.short-term-foot { align-items: center; border-top: 1px dashed var(--line); padding-top: 8px; }
.short-term-foot > span { max-width: 62%; font-size: 10px; line-height: 1.4; }
.safe-text { color: var(--safe); }
.danger-text { color: var(--danger); }
.three-fixed-sets { padding: 10px; border-radius: 10px; background: var(--canvas); color: var(--accent-dark); font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.smart-monitor-box { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.smart-monitor-box .section-heading { margin: 0; }
.smart-monitor-box .prediction-controls { padding: 0; }
.smart-monitor-box .prediction-footnote { margin: 0; }
.smart-monitor-box .field-note { grid-column: 1 / -1; }
.smart-monitor-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.smart-monitor-ledger > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.smart-monitor-ledger small { display: block; color: var(--muted); }
.smart-monitor-ledger strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.smart-monitor-flow, .smart-monitor-recovery-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.monitor-result-chip, .monitor-observe-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.monitor-result-chip.hit, .monitor-observe-chip.hit { color: var(--safe); background: var(--safe-soft); }
.monitor-result-chip.miss, .monitor-observe-chip.miss { color: var(--danger); background: var(--danger-soft); }
.monitor-result-chip.pending { color: var(--warn); background: var(--warn-soft); }
.smart-monitor-recovery-flow small { width: 100%; color: var(--muted); }
.money-positive { color: var(--safe); }
.money-negative { color: var(--danger); }
.prediction-intro, .prediction-footnote { margin: 0 14px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.prediction-intro b { color: var(--accent-dark); font-size: 17px; letter-spacing: 2px; }
.prediction-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px; align-items: end; }
.prediction-controls label { font-size: 11px; }
.prediction-controls input, .prediction-controls select { min-height: 44px; }
.prediction-controls .primary { grid-column: 1 / -1; min-height: 46px; }
.prediction-panel > .conditional-meta,
.prediction-panel > .conditional-reliability,
.prediction-panel > .conditional-stability,
.prediction-panel > .conditional-subheading,
.prediction-panel > .conditional-top-list,
.prediction-panel > .form-error { margin-right: 14px; margin-left: 14px; }
.position-candidates-summary { display: grid; gap: 12px; margin: 0 14px; padding: 16px; scroll-margin-top: 92px; border: 2px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.position-candidate-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.position-candidate-title strong { display: block; color: var(--ink); font-size: 15px; }
.position-candidate-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.position-candidate-actions button { min-height: 38px; padding: 8px 11px; white-space: nowrap; }
.position-candidate-code { color: var(--accent-dark); font-size: clamp(27px, 9vw, 42px); font-weight: 900; letter-spacing: .13em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.position-candidate-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.position-candidate-metrics span { display: grid; gap: 3px; padding: 9px; border-radius: 10px; color: var(--muted); background: var(--card); font-size: 9px; line-height: 1.35; }
.position-candidate-metrics b { color: var(--ink); font-size: 14px; }
.prediction-rule-heading { margin: 10px 14px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.prediction-rules-list { margin: 0 14px 15px; }
.prediction-rule-card p { overflow-wrap: anywhere; }
.rate-monitor-box { display: grid; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.rate-monitor-box .section-heading { margin: 0; }
.streak-summary { display: flex; align-items: baseline; gap: 8px; padding-top: 2px; }
.streak-summary strong { color: var(--accent-dark); font-size: 27px; font-variant-numeric: tabular-nums; }
.streak-summary span { color: var(--muted); font-size: 12px; }
.streak-list { display: grid; gap: 9px; }
.streak-card { display: grid; gap: 8px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.streak-card.ongoing { border-color: #79d7bc; background: linear-gradient(135deg, var(--safe-soft), var(--canvas) 70%); }
.streak-card-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.streak-card-main > div { display: grid; gap: 5px; }
.streak-card-main strong { font-size: 14px; }
.streak-card-main b { flex: none; color: var(--accent-dark); font-size: 18px; font-variant-numeric: tabular-nums; }
.streak-state { width: fit-content; padding: 2px 7px; border-radius: 999px; color: var(--muted); background: var(--card); font-size: 10px; font-weight: 800; }
.streak-card.ongoing .streak-state { color: var(--safe); background: var(--safe-soft); }
.streak-card p { margin: 0; color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11px; font-variant-numeric: tabular-nums; }
.streak-card .link-button { justify-self: start; padding: 3px 0; font-size: 11px; }
.history-view-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.history-view-tabs button { min-height: 42px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 800; }
.history-view-tabs button.active { color: #fff; background: linear-gradient(135deg, var(--accent), #f04438); box-shadow: 0 6px 15px rgba(255, 90, 54, .18); }
.field-note { margin: -4px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.streak-follow-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.streak-follow-actions button { min-height: 39px; padding: 8px; font-size: 11px; }
.streak-rule-heading { margin-top: 11px; padding-top: 15px; border-top: 1px solid var(--line); }
.future-monitor-box { display: grid; gap: 12px; margin-top: 16px; padding: 15px; border: 1px solid color-mix(in srgb, var(--safe) 42%, var(--line)); border-radius: 16px; background: linear-gradient(145deg, var(--safe-soft), var(--card) 72%); }
.monitor-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--safe) 45%, var(--line)); border-radius: 16px; background: linear-gradient(135deg, var(--safe-soft), var(--card)); }
.monitor-shortcut div { display: grid; gap: 4px; }
.monitor-shortcut strong { font-size: 16px; color: var(--safe); }
.monitor-shortcut span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.monitor-shortcut button { flex: 0 0 auto; white-space: nowrap; }
.attention-pulse { animation: monitor-attention 1.2s ease-out; }
@keyframes monitor-attention { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--safe) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.future-monitor-box .section-heading { margin: 0; }
.future-monitor-box .field-note { margin: 0; line-height: 1.65; }
.monitor-form { display: grid; gap: 12px; }
.monitor-form > small { color: var(--muted); line-height: 1.55; }
.monitor-form .primary { width: 100%; }
.compact-button { min-height: 36px; padding: 7px 10px; }
.rule-card small { color: var(--muted); line-height: 1.5; }
.rule-card .danger-outline { justify-self: start; min-height: 36px; padding: 7px 10px; }
.follow-dialog { width: min(calc(100% - 24px), 560px); max-height: min(88svh, 780px); padding: 0; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--card); box-shadow: 0 28px 70px rgba(0, 0, 0, .28); }
.follow-dialog::backdrop { background: rgba(15, 23, 42, .62); backdrop-filter: blur(3px); }
.follow-dialog form { display: grid; gap: 14px; padding: 20px; overflow-y: auto; }
.dialog-sheet { display: grid; gap: 14px; padding: 20px; overflow-y: auto; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.dialog-heading .icon-button { min-width: 38px; font-size: 20px; line-height: 1; }
.dialog-summary { margin: 0; padding: 11px 12px; border-radius: 11px; color: var(--safe); background: var(--safe-soft); font-size: 13px; font-weight: 800; line-height: 1.55; }
.dialog-summary.warning-summary { color: var(--warn); background: var(--warn-soft); }
.dialog-detail { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.follow-fields { display: grid; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.follow-fields > small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.check-row { display: flex; align-items: center; gap: 9px; }
.check-row input { width: 19px; min-height: 19px; accent-color: var(--accent); }
.dialog-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 9px; }
.dialog-actions button { min-height: 47px; }
.history-summary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; margin: 16px 0 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.history-summary > div { display: flex; align-items: baseline; gap: 5px; grid-row: 1 / 3; }
.history-summary strong { color: var(--accent-dark); font-size: 28px; font-variant-numeric: tabular-nums; }
.history-summary span { color: var(--muted); font-size: 12px; }
.history-summary p { margin: 0; font-size: 14px; font-weight: 800; }
.history-summary small { color: var(--muted); font-size: 11px; }
.history-list { display: grid; gap: 11px; }
.history-card { display: grid; gap: 13px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 5px 16px rgba(17, 24, 39, .035); }
.history-card.group-match { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), var(--card) 58%); box-shadow: 0 8px 22px rgba(255, 90, 54, .12); }
.history-card.streak-match { border-color: var(--safe); box-shadow: 0 0 0 2px var(--safe-soft), 0 8px 22px rgba(16, 185, 129, .12); }
.history-card header, .history-card footer, .history-card-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-card header { padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.history-issue { color: var(--ink); font-size: 17px; font-weight: 900; letter-spacing: .03em; }
.history-card time { color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 800; }
.history-issue-full { display: grid; gap: 4px; min-width: 130px; }
.history-issue-full small { color: var(--muted); font-size: 10px; }
.history-issue-full strong { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .025em; }
.history-digits { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.history-digits span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--accent), #f04438); font-size: 21px; font-weight: 900; line-height: 1; box-shadow: inset 0 -3px 7px rgba(111, 23, 5, .2); }
.history-card footer { color: var(--muted); font-size: 11px; }
.history-card footer strong { color: var(--ink); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; letter-spacing: .05em; }
.history-more { width: 100%; min-height: 44px; margin-top: 12px; }

.bottom-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(229,231,235,.92); background: rgba(255,255,255,.95); backdrop-filter: blur(14px); }
.bottom-nav button { display: grid; justify-items: center; gap: 2px; min-height: 52px; border: 0; border-radius: 12px; color: #98a2b3; background: transparent; font-weight: 800; }
.bottom-nav button span { font-size: 20px; line-height: 1; }
.bottom-nav button small { font-size: 10px; }
.bottom-nav button.active { color: var(--accent-dark); background: var(--accent-soft); }

.toast { position: fixed; z-index: 100; top: calc(18px + env(safe-area-inset-top)); left: 50%; max-width: calc(100% - 32px); padding: 11px 15px; border-radius: 11px; color: #fff; background: #111827; box-shadow: var(--shadow); font-size: 13px; transform: translate(-50%, -140%); opacity: 0; transition: transform .2s, opacity .2s; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: var(--danger); }

html[data-theme="dark"] .auth-shell { background: radial-gradient(circle at 80% 0%, #40251f 0, transparent 38%), linear-gradient(160deg, #111827 0%, #080d18 70%); }
html[data-theme="dark"] .auth-card { border-color: rgba(51, 65, 85, .9); background: rgba(17, 24, 39, .96); }
html[data-theme="dark"] label { color: #dbe4f0; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { border-color: #475569; color: var(--ink); background: #0f172a; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #718096; }
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled { color: #7c8ba1; background: #1e293b; }
html[data-theme="dark"] .security-note,
html[data-theme="dark"] .metric-grid small,
html[data-theme="dark"] .list-item-foot,
html[data-theme="dark"] .empty { color: #8491a5; }
html[data-theme="dark"] .topbar { border-bottom-color: rgba(51, 65, 85, .88); background: rgba(15, 23, 42, .94); }
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .danger-outline { color: #d5deea; background: #0f172a; }
html[data-theme="dark"] .danger-text,
html[data-theme="dark"] .danger-outline { color: var(--danger); }
html[data-theme="dark"] .status-dot { background: #718096; box-shadow: 0 0 0 4px #1e293b; }
html[data-theme="dark"] .status-dot.online { background: #34d399; box-shadow: 0 0 0 4px #12372f; }
html[data-theme="dark"] .badge { color: #cbd5e1; background: #263245; }
html[data-theme="dark"] .metric-grid .balance-metric { border-color: #275e50; }
html[data-theme="dark"] .safe-badge { color: var(--safe); background: var(--safe-soft); }
html[data-theme="dark"] .warn-badge { color: var(--warn); background: var(--warn-soft); }
html[data-theme="dark"] .danger-badge { color: var(--danger); background: var(--danger-soft); }
html[data-theme="dark"] .muted-badge { color: #b1bdcd; }
html[data-theme="dark"] .protocol-panel { border-color: #59372f; background: linear-gradient(180deg, #111827 0%, #1b1718 100%); }
html[data-theme="dark"] .streak-box { background: #111827; }
html[data-theme="dark"] .streak-card { background: #0f172a; }
html[data-theme="dark"] .future-monitor-box { background: linear-gradient(145deg, rgba(16, 185, 129, .12), #111827 72%); }
html[data-theme="dark"] .monitor-shortcut { background: linear-gradient(135deg, rgba(16, 185, 129, .14), #111827); }

@media (max-width: 560px) {
  .monitor-shortcut { align-items: stretch; flex-direction: column; }
  .monitor-shortcut button { width: 100%; }
}
html[data-theme="dark"] .streak-state { background: #1e293b; }
html[data-theme="dark"] .history-view-tabs,
html[data-theme="dark"] .follow-fields { background: #0f172a; }
html[data-theme="dark"] .follow-dialog { background: #111827; }
html[data-theme="dark"] .protocol-target { color: #a8b3c5; }
html[data-theme="dark"] .protocol-target span { color: #e2e8f0; }
html[data-theme="dark"] .switch-row input { background: #475569; }
html[data-theme="dark"] .switch-row input::before { background: #f8fafc; }
html[data-theme="dark"] .first-run-note { color: #ffc4b7; }
html[data-theme="dark"] .bottom-nav { border-top-color: rgba(51, 65, 85, .94); background: rgba(15, 23, 42, .96); }
html[data-theme="dark"] .bottom-nav button { color: #8491a5; }
html[data-theme="dark"] .bottom-nav button.active { color: var(--accent-dark); }
html[data-theme="dark"] .toast { color: #111827; background: #f8fafc; }
html[data-theme="dark"] .toast.error { color: #fff; background: #be3345; }
html[data-theme="dark"] .order-card { background: #111827; }

@media (min-width: 720px) {
  .topbar { padding-inline: max(24px, calc((100% - 820px) / 2)); }
  .content { padding: 24px; }
  .metric-grid { grid-template-columns: repeat(5, 1fr); }
  .metric-grid.compact { grid-template-columns: repeat(4, 1fr); }
  .bottom-nav { left: 50%; width: 500px; bottom: 16px; padding: 7px; border: 1px solid var(--line); border-radius: 18px; transform: translateX(-50%); box-shadow: var(--shadow); }
  .app-shell { padding-bottom: 100px; }
}

@media (max-width: 420px) {
  .content { padding: 13px; }
  .panel { padding: 14px; }
  .flush-mobile { padding: 0; overflow: hidden; }
  .flush-mobile .padded { padding: 14px 14px 0; }
  .flush-mobile .table-list { padding: 0 14px; }
  .digits { justify-content: space-between; gap: 5px; }
  .digits span { width: 39px; }
  .history-panel { padding: 14px; }
  .history-toolbar { grid-template-columns: 1fr 1fr; }
  .history-toolbar label { grid-column: 1 / -1; }
  .history-toolbar button { padding-inline: 10px; }
  .group-search-box { grid-template-columns: 1fr; }
  .group-search-actions button { flex: 1; }
  .streak-box { padding: 13px 12px; }
  .streak-controls { grid-template-columns: 1fr 1fr; }
  .position-streak-stats { padding: 12px 10px; }
  .streak-analysis-controls { grid-template-columns: 1fr 1fr; }
  .streak-analysis-controls .primary { grid-column: 1 / -1; }
  .position-streak-stats-grid { grid-template-columns: 1fr; }
  .conditional-followers { padding: 12px 10px; }
  .conditional-controls { grid-template-columns: 1fr 1fr; }
  .conditional-controls .primary { grid-column: 1 / -1; }
  .conditional-top-list { grid-template-columns: 1fr; }
  .seven-streak-dual-status { grid-template-columns: 1fr 1fr; }
  .seven-outcome-chip { min-width: 44px; }
  .conditional-candidate-head { align-items: flex-start; flex-direction: column; }
  .conditional-candidate-metrics { grid-template-columns: 1fr; }
  .conditional-same-position, .conditional-exact { grid-template-columns: 1fr; }
  .prediction-controls { grid-template-columns: 1fr; padding: 0 10px; }
  .smart-plan-card { margin-right: 10px; margin-left: 10px; }
  .prediction-panel > .conditional-meta,
  .prediction-panel > .conditional-reliability,
  .prediction-panel > .conditional-stability,
  .prediction-panel > .conditional-subheading,
  .prediction-panel > .conditional-top-list,
  .prediction-panel > .form-error,
  .position-candidates-summary,
  .prediction-intro,
  .prediction-footnote { margin-right: 10px; margin-left: 10px; }
  .position-candidate-title { flex-direction: column; }
  .position-candidate-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .prediction-rule-heading, .prediction-rules-list { margin-right: 10px; margin-left: 10px; }
  .position-candidate-metrics { grid-template-columns: 1fr; }
  .position-streak-card header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .position-streak-card header span { text-align: left; }
  .streak-card-main { align-items: flex-start; }
  .streak-card-main b { font-size: 16px; }
  .streak-follow-actions { grid-template-columns: 1fr; }
  .follow-dialog form, .dialog-sheet { padding: 16px; }
  .history-summary { grid-template-columns: auto 1fr; padding: 12px; }
  .history-card { padding: 14px 12px; }
  .history-card-main { align-items: flex-end; }
  .history-issue-full { min-width: 105px; }
  .history-issue-full strong { font-size: 13px; }
  .history-digits { gap: 5px; }
  .history-digits span { width: 36px; height: 36px; font-size: 18px; }
  .history-card footer { align-items: flex-start; flex-direction: column; gap: 4px; }
  .orders-note { margin-right: 10px; margin-left: 10px; }
  .weekly-note { margin-right: 0; margin-left: 0; }
  .order-card { padding: 13px 10px; }
  .order-money-grid, .order-settlement { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}