:root {
    --bg: #f3f5fb;
    --card: #ffffff;
    --text: #151a2d;
    --muted: #7f879d;
    --line: #e9edf5;
    --brand: #ff585d;
    --brand-soft: #fff0f1;
    --green: #10b76a;
    --green-soft: #eafaf2;
    --red: #f04444;
    --red-soft: #fff0f0;
    --violet: #b85cff;
    --violet-soft: #f7edff;
    --blue: #5b8def;
    --shadow: 0 14px 40px rgba(33, 43, 71, .08);
}

* { box-sizing: border-box; }
html { background: #969ca9; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
}

.app-shell {
    width: min(100%, 980px);
    margin: 0 auto;
    min-height: 100vh;
    background: var(--bg);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px 22px;
    color: #fff;
    background: linear-gradient(135deg, #ff585d, #ff7f79);
    box-shadow: 0 10px 30px rgba(255, 88, 93, .22);
}

.eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    color: #9aa2b7;
}

.topbar .eyebrow { color: rgba(255,255,255,.8); }
h1, h2 { margin: 0; }
h1 { margin-top: 4px; font-size: clamp(24px, 4vw, 34px); line-height: 1.05; }
h2 { margin-top: 4px; font-size: 20px; }

.source-pill {
    white-space: nowrap;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    font-size: 12px;
    font-weight: 800;
}

.content { padding: 22px; }
.hero-card, .main-signal-card, .status-card, .panel {
    background: var(--card);
    border: 1px solid rgba(22,31,58,.04);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.hero-card {
    overflow: hidden;
    background: radial-gradient(circle at 95% 5%, rgba(255,255,255,.18), transparent 27%), linear-gradient(135deg, #ff595e, #ff786f);
    color: #fff;
    padding: 22px;
}

.hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.label {
    display: block;
    margin-bottom: 6px;
    color: inherit;
    opacity: .72;
    font-size: 12px;
    font-weight: 700;
}

.period {
    display: block;
    max-width: 100%;
    font-size: clamp(16px, 3.6vw, 25px);
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

.timer-box { min-width: 120px; text-align: right; }
.timer {
    font-variant-numeric: tabular-nums;
    font-size: clamp(28px, 6vw, 44px);
    font-weight: 900;
    letter-spacing: .05em;
}

.next-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.22);
    font-size: 13px;
}
.next-row strong { overflow-wrap: anywhere; text-align: right; }

.main-signal-card { margin-top: 14px; padding: 20px; }
.main-signal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--line);
}
.main-signal-head h2 { overflow-wrap: anywhere; }
.signal-live-badge {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    background: #f1f4fa;
    color: #68728a;
    font-size: 11px;
    font-weight: 900;
}
.signal-live-badge.ready { background: var(--green-soft); color: #0b9455; }

.signal-callout {
    margin-top: 16px;
    padding: 22px 20px;
    border-radius: 17px;
    text-align: center;
    background: linear-gradient(135deg, #fff5f5, #fff);
    border: 2px solid #ffd9db;
}
.signal-callout.big { background: linear-gradient(135deg, #fff4e8, #fff); border-color: #ffc77e; }
.signal-callout.small { background: linear-gradient(135deg, #eef6ff, #fff); border-color: #a9cdfd; }
.callout-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}
.signal-callout strong {
    display: block;
    font-size: clamp(52px, 10vw, 82px);
    line-height: .95;
    font-weight: 1000;
    letter-spacing: .02em;
}
.signal-callout.big strong { color: #ff9d35; }
.signal-callout.small strong { color: #4f8fe9; }
.callout-range {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.signal-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.signal-detail {
    min-height: 116px;
    padding: 15px;
    border-radius: 15px;
    background: #f8f9fc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.signal-label { color: var(--muted); font-size: 12px; font-weight: 800; }
.signal-value {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 950;
    line-height: 1;
}
.signal-value.green { color: var(--green); }
.signal-value.red { color: var(--red); }
.signal-value.violet { color: var(--violet); }
.number-pick {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 36px;
    font-weight: 1000;
}
.number-pick.green { background: var(--green-soft); color: var(--green); }
.number-pick.red { background: var(--red-soft); color: var(--red); }
.number-pick.violet { background: var(--violet-soft); color: var(--violet); }
.signal-help { color: var(--muted); font-size: 11px; font-weight: 700; }

.plain-summary {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 13px;
    background: #151a2d;
    color: #fff;
    text-align: center;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.45;
}
.signal-note {
    margin-top: 10px;
    color: #707991;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}

.status-card {
    margin-top: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.status-card .label { color: var(--muted); }
.status-note { max-width: 520px; color: var(--muted); font-size: 12px; text-align: right; }

.panel { margin-top: 14px; padding: 20px; }
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.sample-count {
    padding: 8px 11px;
    border-radius: 999px;
    background: #f2f4f9;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.accuracy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.accuracy-item { padding: 14px; border-radius: 14px; background: #f8f9fc; }
.accuracy-item span { color: var(--muted); font-size: 12px; font-weight: 700; }
.accuracy-item strong { display: block; margin: 8px 0 10px; font-size: 25px; }
.bar { height: 7px; overflow: hidden; border-radius: 999px; background: #e8ecf4; }
.bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5a5f, #ff867b); transition: width .35s ease; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 11px 12px; color: #fff; background: var(--brand); font-size: 11px; text-align: left; }
th:first-child { border-radius: 10px 0 0 10px; }
th:last-child { border-radius: 0 10px 10px 0; }
td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }

.result-number { font-size: 20px; font-weight: 900; }
.result-number.green { color: var(--green); }
.result-number.red { color: var(--red); }
.result-number.violet {
    background: linear-gradient(180deg, var(--green) 0 48%, var(--violet) 52% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.dots { display: inline-flex; gap: 5px; align-items: center; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.green { background: var(--green); }
.dot.red { background: var(--red); }
.dot.violet { background: var(--violet); }

.badge { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.badge.win { color: #0d9457; background: var(--green-soft); }
.badge.loss { color: #d43131; background: var(--red-soft); }
.badge.pending { color: #786c91; background: #f2eef9; }
.signal-stack { display: flex; flex-wrap: wrap; gap: 5px; }
.mini { padding: 4px 7px; border-radius: 7px; background: #f3f5f9; color: #4f5870; font-size: 11px; font-weight: 700; }
.empty { padding: 28px !important; text-align: center; color: var(--muted); }

@media (max-width: 720px) {
    .app-shell { width: min(100%, 430px); }
    .topbar { padding: 20px 16px; }
    .content { padding: 13px; }
    .source-pill { padding: 7px 9px; font-size: 10px; }
    .hero-card { padding: 18px; border-radius: 16px; }
    .hero-row { gap: 12px; }
    .timer-box { min-width: 92px; }
    .main-signal-card { padding: 14px; border-radius: 15px; }
    .main-signal-head { align-items: flex-start; flex-direction: column; }
    .signal-callout { padding: 20px 12px; }
    .signal-details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .signal-detail { min-height: 104px; padding: 11px 9px; }
    .signal-label { font-size: 10px; }
    .signal-value { font-size: 25px; }
    .number-pick { width: 52px; height: 52px; font-size: 30px; }
    .signal-help { font-size: 9px; }
    .plain-summary { font-size: 14px; padding: 12px 10px; }
    .status-card { align-items: flex-start; flex-direction: column; }
    .status-note { text-align: left; }
    .panel { padding: 14px; border-radius: 15px; }
    .accuracy-grid { grid-template-columns: 1fr; }
    th, td { padding: 10px 8px; white-space: nowrap; font-size: 11px; }
    th { font-size: 10px; }
}

.signal-live-badge.waiting { background: #fff6df; color: #a26b00; }
.signal-live-badge.unavailable { background: var(--red-soft); color: #c73535; }
.validation-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.compact-head { margin-bottom: 12px; }
.validation-note { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.result-number.red-violet {
    background: linear-gradient(180deg, var(--red) 0 48%, var(--violet) 52% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.result-number.green-violet {
    background: linear-gradient(180deg, var(--green) 0 48%, var(--violet) 52% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.number-pick.red-violet { background: linear-gradient(135deg, var(--red-soft), var(--violet-soft)); color: var(--violet); }
.number-pick.green-violet { background: linear-gradient(135deg, var(--green-soft), var(--violet-soft)); color: var(--violet); }