/* ─── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #f0f4f8;
    --surface:   #ffffff;
    --surface2:  #f5f7fa;
    --border:    #dde3ec;
    --accent:    #2563eb;
    --accent2:   #6c63ff;
    --green:     #16a34a;
    --red:       #dc2626;
    --yellow:    #b45309;
    --text:      #1e2535;
    --muted:     #6b7280;
    --radius:    10px;
    --shadow:    0 2px 12px rgba(0,0,0,0.08);
    color-scheme: light;
}

html[data-theme="dark"] {
    --bg:        #0f1419;
    --surface:   #1a2028;
    --surface2:  #232b36;
    --border:    #2d3744;
    --accent:    #60a5fa;
    --accent2:   #a78bfa;
    --green:     #4ade80;
    --red:       #f87171;
    --yellow:    #fbbf24;
    --text:      #e5e7eb;
    --muted:     #94a3b8;
    --shadow:    0 2px 12px rgba(0,0,0,0.4);
    color-scheme: dark;
}

/* Tone down bright hover backgrounds in dark mode */
html[data-theme="dark"] .nav-links a.active { background: rgba(96,165,250,0.15); }

/* Group badges — dashboard + rule cards */
.group-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.group-badge.g-A { background: #3b82f6; color: #fff; }
.group-badge.g-B { background: #10b981; color: #fff; }
.group-badge.g-C { background: #f59e0b; color: #fff; }
.group-badge.g-D { background: #a855f7; color: #fff; }
html[data-theme="dark"] .group-badge.g-A { background: #2563eb; }
html[data-theme="dark"] .group-badge.g-B { background: #059669; }
html[data-theme="dark"] .group-badge.g-C { background: #d97706; }
html[data-theme="dark"] .group-badge.g-D { background: #9333ea; }

/* Theme toggle button */
.theme-toggle {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--border); }

html { font-size: 17px; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.45;
    min-height: 100vh;
}

/* ─── Navbar ──────────────────────────────────────────────── */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    padding: 0 32px;
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-brand {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    font-size: 0.9rem;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    padding: 3px 7px;
}

/* Market Status */
.nav-market-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--surface2);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    white-space: nowrap;
}
.market-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.market-dot.market-open {
    background: #16a34a;
    box-shadow: 0 0 6px rgba(22,163,74,0.5);
    animation: market-pulse 2s ease-in-out infinite;
}
.market-dot.market-closed { background: #dc2626; }
.market-label { font-weight: 600; color: var(--text); }
.market-detail { color: var(--muted); font-size: 0.72rem; }
@keyframes market-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 4px;
}

.nav-links a {
    display: block;
    padding: 6px 16px;
    border-radius: 6px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.18s, background 0.18s;
}

.nav-links a:hover { color: var(--text); background: var(--surface2); }
.nav-links a.active { color: var(--accent); background: rgba(79,142,247,0.1); }

/* ─── Layout ──────────────────────────────────────────────── */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 14px 18px 40px;
}

.page-header {
    margin-bottom: 42px;
}
.page-header h1 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.page-header p {
    color: var(--muted);
    margin-top: 10px;
    font-size: 0.96rem;
    line-height: 1.6;
    max-width: 600px;
}
.page-header code {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.83rem;
    background: var(--surface2);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--accent);
}

/* ─── Cards Grid ──────────────────────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
}

.card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 6px;
}
.card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.card-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 4px;
}

/* ─── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
}
.badge.red   { background: rgba(239,68,68,0.15); color: var(--red); }
.badge.green { background: rgba(34,197,94,0.15);  color: var(--green); }

/* ─── Status pills ────────────────────────────────────────── */
.status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.status.on  { background: rgba(34,197,94,0.12);  color: var(--green); }
.status.off { background: rgba(239,68,68,0.1);   color: var(--red); }

/* ─── Section grid (2-col) ────────────────────────────────── */
.section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 640px) { .section-grid { grid-template-columns: 1fr; } }

.info-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.info-box h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text);
}

.info-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.info-table tr { border-bottom: 1px solid var(--border); }
.info-table tr:last-child { border-bottom: none; }
.info-table td { padding: 9px 0; vertical-align: middle; white-space: nowrap; }
.info-table td:first-child { color: var(--muted); width: auto; }
#triggerSettingsTable td:first-child { width: 30%; min-width: 260px; }
.info-table td.mono {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.78rem;
    word-break: break-all;
}

/* ─── Alerts ──────────────────────────────────────────────── */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    font-size: 0.92rem;
    line-height: 1.5;
}
.alert.success {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.3);
    color: var(--green);
}
.alert.error {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.3);
    color: #b91c1c;
}
.alert a { color: inherit; font-weight: 600; }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: opacity 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { opacity: 0.88; }
.btn.secondary {
    background: var(--surface2);
    color: var(--muted);
    border: 1px solid var(--border);
}
.btn.secondary:hover { color: var(--text); }
.btn:not(.primary):not(.secondary) {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn:not(.primary):not(.secondary):hover { border-color: var(--accent); }

/* ─── Step Size Selector ──────────────────────────────────── */
.step-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
}
.step-btn {
    background: var(--surface2);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 13px;
    transition: background 0.15s, color 0.15s;
}
.step-btn:last-child { border-right: none; }
.step-btn:hover { background: var(--surface); color: var(--text); }
.step-btn.active { background: var(--accent); color: #fff; }
.trend-btn.trend-up.active   { background: var(--green); color: #fff; border-color: var(--green); }
.trend-btn.trend-down.active { background: var(--red);   color: #fff; border-color: var(--red); }

/* ─── Form Sections ───────────────────────────────────────── */
.form-section {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 32px 28px;
    margin-bottom: 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-section:hover {
    border-color: rgba(79,142,247,0.3);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.form-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}
.section-icon { font-size: 1.3rem; }
.section-desc {
    color: var(--muted);
    font-size: 0.88rem;
    margin-bottom: 26px;
    line-height: 1.5;
}

/* ─── Form Rows & Groups ──────────────────────────────────── */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.form-row:last-child { margin-bottom: 0; }

.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.full-width { grid-column: 1 / -1; }

label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

input[type="text"],
input[type="password"],
input[type="number"],
select {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95rem;
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    width: 100%;
    font-family: inherit;
    font-weight: 500;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
select:hover {
    border-color: rgba(79,142,247,0.5);
    background: var(--surface);
}

input:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(79,142,247,0.2);
    background: var(--surface);
    color: var(--text);
}

input::placeholder { color: var(--muted); opacity: 0.5; }

select option { background: var(--surface2); color: var(--text); }

.hint {
    font-size: 0.80rem;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 2px;
}

/* ─── Password eye toggle ─────────────────────────────────── */
.input-eye-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-eye-wrapper input { padding-right: 40px; }
.eye-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--muted);
    opacity: 0.5;
    padding: 0;
    line-height: 1;
    transition: opacity 0.15s;
}
.eye-btn:hover { opacity: 0.9; }

/* ─── Toggle checkbox ─────────────────────────────────────── */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}
.toggle-label input[type="checkbox"] { display: none; }
.toggle-box {
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #c5ccd8;
    border-radius: 11px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
}
.toggle-box::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s, background 0.2s;
}
.toggle-label input:checked + .toggle-box {
    background: var(--green);
}
.toggle-label input:checked + .toggle-box::after {
    left: 21px;
    background: #fff;
}

/* ─── Rule Builder ────────────────────────────────────────── */
.rule-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.rule-builder-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.rules-empty {
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    padding: 36px 0;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.rule-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 18px;
    overflow: hidden;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.rule-card:hover {
    border-color: rgba(79,142,247,0.5);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.rule-card.rule-triggered {
    border-color: rgba(234,179,8,0.6);
    background: rgba(234,179,8,0.02);
}
.rule-card.rule-disabled  { opacity: 0.6; }

.rule-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--surface2), var(--surface));
    border-bottom: 2px solid var(--border);
}

/* API call rate chip in the navbar */
.nav-api-stats {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.76rem; color: var(--muted);
    padding: 4px 12px; background: var(--surface2);
    border: 1px solid var(--border); border-radius: 14px;
    margin: 0 12px;
    white-space: nowrap;
}
.nav-api-stats .api-label { font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
.nav-api-stats .api-val {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    color: var(--text); font-weight: 700;
}
.nav-api-stats .api-win { font-size: 0.65rem; color: var(--muted); margin-left: 2px; }
.nav-api-stats .api-sep { color: var(--border); }

.r-name {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    outline: none;
    padding: 5px 10px;
    transition: all 0.15s;
}
.r-name:focus {
    background: var(--surface2);
    border-color: var(--accent);
}
.r-name::placeholder { color: var(--muted); font-weight: 400; }

.rule-badge {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}
.rule-badge.badge-active     { background: rgba(34,197,94,0.12);  color: var(--green); }
.rule-badge.badge-triggered  { background: rgba(234,179,8,0.12);  color: var(--yellow); }
.rule-badge.badge-disabled   { background: rgba(136,146,164,0.1); color: var(--muted); }

.rule-card-body {
    padding: 22px 22px 20px;
    background: var(--surface);
}

.rule-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.rule-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.rule-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rule-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.rule-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.rule-triggered-info {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--yellow);
}

.btn-icon {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 9px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-icon:hover         { color: var(--red);   background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
.btn-icon.btn-rearm:hover { color: var(--green); background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.2); }

/* Demo mode toggle */
.demo-toggle-label { cursor: pointer; user-select: none; }
.demo-toggle-box {
    width: 32px !important;
    height: 18px !important;
    background: #c5ccd8;
}
.demo-toggle-box::after {
    width: 12px !important;
    height: 12px !important;
    top: 3px !important;
    left: 3px !important;
}
.demo-toggle-label input:checked + .demo-toggle-box {
    background: var(--yellow);
}
.demo-toggle-label input:checked + .demo-toggle-box::after {
    left: 17px !important;
}
.demo-toggle-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.04em;
}
.demo-toggle-label:has(input:checked) .demo-toggle-text {
    color: var(--yellow);
}

.rules-save-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 16px;
}
.rules-msg {
    font-size: 0.85rem;
    flex: 1;
}
.rules-msg.ok  { color: var(--green); }
.rules-msg.err { color: var(--red); }

/* ─── Settings Tabs ───────────────────────────────────────── */
.tab-bar {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 9px 22px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text); background: var(--surface2); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(79,142,247,0.06); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Form actions ────────────────────────────────────────── */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

/* ─── Footer ──────────────────────────────────────────────── */
footer {
    text-align: center;
    color: var(--muted);
    font-size: 0.8rem;
    padding: 24px;
    border-top: 1px solid var(--border);
}

/* ─── Dashboard two-column layout ────────────────────────── */
body.has-dash-layout {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dash-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 580px;
    overflow: hidden;
    min-height: 0;
}
.dash-layout > .dash-side { order: 1; }
.dash-layout > .log-panel { order: 2; }

/* ═══════════════════════════════════════════════════════════════
   FULL-SCREEN MODE — maximise content, zero whitespace
   — Hides navbar/log-panel/headers, scales every visible element
     with viewport units so everything fits on screen with the
     largest readable fonts + controls.
   ═══════════════════════════════════════════════════════════════ */
body.dash-fullscreen {
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.dash-fullscreen .navbar { display: none !important; }
body.dash-fullscreen .container { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
body.dash-fullscreen .dash-layout { grid-template-columns: 1fr; height: 100vh !important; overflow: hidden !important; }
body.dash-fullscreen .log-panel { display: none !important; }
body.dash-fullscreen .dash-side { height: 100vh !important; overflow: hidden !important; }
body.dash-fullscreen .dash-inner { padding: 0.4vw 0.6vw 0.4vw !important; max-width: none; width: 100%; height: 100vh; overflow: hidden; box-sizing: border-box; }
body.dash-fullscreen .page-header { display: none !important; }

/* All info boxes: kill borders/padding so every pixel is content */
body.dash-fullscreen .info-box {
    padding: 0.6vw 0.8vw !important;
    margin: 0 0 0.4vw 0 !important;
    border-radius: 0.4vw;
}
body.dash-fullscreen .info-box h2 { font-size: 1.6vw !important; margin: 0 0 0.3vw 0 !important; }
body.dash-fullscreen .info-box h2 .section-toggle { font-size: 1.4vw; }

/* Active Positions chips */
body.dash-fullscreen #posCountBadge { font-size: 1.1vw; padding: 0.2vw 0.8vw; }
body.dash-fullscreen #posLastRefresh { font-size: 0.9vw !important; margin-bottom: 0.3vw !important; }
body.dash-fullscreen .pos-chip-dash { font-size: 1.4vw !important; padding: 0.4vw 1vw !important; }
body.dash-fullscreen #posRefreshBtn { font-size: 1vw !important; padding: 0.4vw 1vw !important; }
body.dash-fullscreen #positionsToggle { width: 1.6vw; height: 1.6vw; }
body.dash-fullscreen #positionsBox h2 span { font-size: 1.6vw; }

/* Trigger Settings table — biggest, most-interactive block */
body.dash-fullscreen #triggerSettingsBox { padding: 0.6vw 0.8vw !important; }
body.dash-fullscreen #triggerSettingsBox h2 { font-size: 1.8vw !important; margin-bottom: 0.4vw !important; }
body.dash-fullscreen #tsFullscreenBtn { font-size: 1vw !important; padding: 0.4vw 1vw !important; }
body.dash-fullscreen #tsSortBy { font-size: 1.1vw !important; padding: 0.3vw 0.8vw !important; }

body.dash-fullscreen #triggerSettingsBox .info-table { font-size: 1.6vw; width: 100%; }
body.dash-fullscreen #triggerSettingsBox .info-table td { padding: 0.45vw 0.35vw; white-space: nowrap; }
body.dash-fullscreen #triggerSettingsBox .info-table td:first-child { width: auto; }
body.dash-fullscreen #triggerSettingsBox .group-badge { font-size: 1.1vw; padding: 0.15vw 0.55vw; }

body.dash-fullscreen #triggerSettingsBox .ts-level-input {
    width: 10vw !important; font-size: 1.5vw; padding: 0.5vw 0.6vw;
    height: auto; min-height: 0 !important; box-sizing: border-box;
}
body.dash-fullscreen #triggerSettingsBox .ts-group-select {
    font-size: 1.5vw !important; padding: 0.5vw 0.8vw !important;
    height: auto; min-height: 0 !important; box-sizing: border-box;
}
body.dash-fullscreen #triggerSettingsBox .ts-level-save {
    font-size: 1.3vw; padding: 0.5vw 1vw; height: auto; min-height: 0 !important; box-sizing: border-box;
}
body.dash-fullscreen #triggerSettingsBox button.btn-toggle-dash,
body.dash-fullscreen #triggerSettingsBox .btn-rearm-dash,
body.dash-fullscreen #triggerSettingsBox .btn-alarm-dash {
    font-size: 1.4vw; padding: 0.5vw 1vw; min-height: 0 !important; line-height: 1.1;
}
body.dash-fullscreen #triggerSettingsBox button[onclick^="fireRule"] {
    font-size: 1.5vw !important; padding: 0.5vw 1.2vw !important; min-height: 0 !important;
}

/* LTP header inside the page (shown when navbar is hidden) */
body.dash-fullscreen #ltpDisplay { font-size: 2.6vw !important; }
body.dash-fullscreen #ltpSymbol, body.dash-fullscreen #ltpTime { font-size: 1.1vw !important; }

/* Auto-fit: shrink per-row vertical spacing when many rules are present */
body.dash-fullscreen #triggerSettingsTable tr { line-height: 1.15; }
body.dash-fullscreen #triggerSettingsTable td button,
body.dash-fullscreen #triggerSettingsTable td input,
body.dash-fullscreen #triggerSettingsTable td select { vertical-align: middle; }

/* If there are too many rules to fit, allow internal scroll inside Trigger Settings */
body.dash-fullscreen #triggerContent {
    max-height: calc(100vh - 14vw);
    overflow-y: auto;
}
/* Active Positions height capped at ~1/4 of the screen so Trigger Settings gets most space */
body.dash-fullscreen #positionsContent {
    max-height: 22vh;
    overflow-y: auto;
}

/* ─── Log panel (left) ────────────────────────────────────── */
.log-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);
    min-height: 0;
}

.log-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.log-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
}

.bot-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    transition: background 0.3s;
}
.bot-dot.stopped    { background: var(--muted); }
.bot-dot.restarting { background: var(--yellow); animation: botPulse 0.6s ease-in-out infinite; }
.bot-dot.running {
    background: var(--green);
    box-shadow: 0 0 7px rgba(34,197,94,0.7);
    animation: botPulse 1.8s ease-in-out infinite;
}
@keyframes botPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

.bot-status-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted);
}

.log-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    margin: 0;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.77rem;
    line-height: 1.65;
    color: #4b5563;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 0;
    background: var(--bg);
}

.log-empty {
    color: var(--muted);
    font-style: italic;
}

/* ─── Dashboard side (right) ──────────────────────────────── */
.dash-side {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

.dash-inner {
    flex: 1;
    padding: 24px 20px 20px;
}

/* ─── Inline Option Chain Panel ──────────────────────────── */
.r-chain-panel {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.r-chain-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.r-chain-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: uppercase;
    white-space: nowrap;
    margin-right: 4px;
}

.r-chain-expiry {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
    font-size: 0.84rem;
    padding: 5px 10px;
}

.r-chain-placeholder,
.r-chain-loading,
.r-chain-error {
    padding: 18px 16px;
    font-size: 0.83rem;
    text-align: center;
    color: var(--muted);
}
.r-chain-error { color: var(--red); }

.chain-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    table-layout: fixed;
}

.chain-table thead th {
    padding: 7px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}
.chain-ce-head  { text-align: right; color: var(--green); width: 42%; }
.chain-strike-head { text-align: center; color: var(--muted);  width: 16%; }
.chain-pe-head  { text-align: left;  color: var(--red);   width: 42%; }

.chain-table tbody tr { border-bottom: 1px solid var(--border); }
.chain-table tbody tr:last-child { border-bottom: none; }
.chain-table tbody tr:hover td { background: rgba(37,99,235,0.04); }

.chain-atm-row td { background: rgba(37,99,235,0.06) !important; }

.chain-ce-td  { text-align: right;  padding: 5px 10px; }
.chain-pe-td  { text-align: left;   padding: 5px 10px; }
.chain-strike-td {
    text-align: center;
    padding: 5px 6px;
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--text);
    white-space: nowrap;
}
.chain-atm-badge {
    font-size: 0.62rem;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 4px;
    vertical-align: middle;
}
.chain-level-badge {
    font-size: 0.62rem;
    font-weight: 700;
    background: var(--yellow);
    color: #fff;
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 4px;
    vertical-align: middle;
}
.chain-empty { color: var(--muted); }
.chain-last {
    font-size: 0.78rem;
    color: var(--text);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    white-space: nowrap;
    font-weight: 600;
}
.chain-cell-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
/* CE (left column, right-aligned): render [button] then [last] so Last sits near Strike */
.chain-ce-wrap { flex-direction: row; }
/* PE (right column, left-aligned): render [last] then [button] so Last sits near Strike */
.chain-pe-wrap { flex-direction: row-reverse; }
.chain-head-sub {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 500;
    opacity: 0.8;
    margin-left: 4px;
}
.chain-fund-head {
    text-align: center;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
    padding: 6px 4px;
    width: 12%;
}
.chain-fund-td {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    padding: 6px 4px;
    white-space: nowrap;
}
.chain-ce-fund { text-align: right; padding-right: 8px; }
.chain-pe-fund { text-align: left; padding-left: 8px; }

/* ─── Rules view mode: Option Chain Only ────────────────── */
/* Show ONLY the option chain section. Hide everything else inside the
   rule card body (conditions, action selector, symbol/token/qty/exchange
   fields, labels, and the "ALSO" divider). Keep rule card header
   visible so user still sees the rule name. */
#rulesContainer.view-chain-only .rule-section-when { display: none !important; }
#rulesContainer.view-chain-only .rule-section > .rule-section-label { display: none !important; }
/* Hide all form-rows and labels everywhere inside the card body except within chain panels */
#rulesContainer.view-chain-only .rule-card-body .form-row { display: none !important; }
/* Hide the "ALSO" divider row between action 1 and action 2 blocks */
#rulesContainer.view-chain-only .r-action2-block > div:first-child { display: none !important; }
/* Chain panel styling — visibility is controlled by JS based on whether
   the rule's action / action2 is actually buy/sell. */
#rulesContainer.view-chain-only .r-chain-panel {
    margin-top: 6px !important;
}
/* Kill extra spacing left behind from hidden sections */
#rulesContainer.view-chain-only .rule-section { padding: 0 !important; margin: 0 !important; }
#rulesContainer.view-chain-only .r-order-fields,
#rulesContainer.view-chain-only .r-order2-fields {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* View toggle radio labels — more button-like */
.view-toggle-option {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.view-toggle-option:hover { background: var(--surface); }
.view-toggle-option input[type="radio"]:checked + span {
    font-weight: 700;
    color: var(--accent);
}

.chain-pick-btn {
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.74rem;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    white-space: nowrap;
    transition: background 0.13s, color 0.13s, border-color 0.13s;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.chain-ce-btn:hover,
.chain-ce-btn.chain-selected {
    background: rgba(22,163,74,0.12);
    color: var(--green);
    border-color: rgba(22,163,74,0.4);
}
.chain-pe-btn:hover,
.chain-pe-btn.chain-selected {
    background: rgba(220,38,38,0.1);
    color: var(--red);
    border-color: rgba(220,38,38,0.35);
}

.chain-ltp-note {
    padding: 6px 14px;
    font-size: 0.75rem;
    color: var(--muted);
    background: var(--surface2);
    border-top: 1px solid var(--border);
    text-align: right;
}
.chain-ltp-note strong { color: var(--text); }

/* ─── Start / Stop buttons ────────────────────────────────── */
.btn-start {
    background: rgba(34,197,94,0.12);
    color: var(--green);
    border: 1px solid rgba(34,197,94,0.28);
    padding: 6px 14px;
    font-size: 0.83rem;
}
.btn-start:hover:not(:disabled) { background: rgba(34,197,94,0.22); }

.btn-stop {
    background: rgba(239,68,68,0.1);
    color: var(--red);
    border: 1px solid rgba(239,68,68,0.25);
    padding: 6px 14px;
    font-size: 0.83rem;
}
.btn-stop:hover:not(:disabled) { background: rgba(239,68,68,0.18); }

.btn-start:disabled,
.btn-stop:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ─── Rules Monitor (dashboard) ───────────────────────────── */
.rs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    line-height: 1.5;
}
.rs-table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding: 6px 8px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.rs-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.rs-table tr:last-child td { border-bottom: none; }

.rs-name  { font-weight: 600; white-space: nowrap; }
.rs-status { white-space: nowrap; font-weight: 600; }
.rs-action { font-size: 0.75rem; color: var(--muted); max-width: 200px; word-break: break-word; }

/* status row colours */
.rs-watching .rs-status  { color: var(--accent); }
.rs-fired .rs-status     { color: var(--green); }
.rs-demo .rs-status      { color: var(--yellow); }
.rs-disabled             { opacity: 0.45; }
.rs-disabled .rs-status  { color: var(--muted); }
.rs-triggered .rs-status { color: #8b5cf6; }
.rs-error .rs-status     { color: var(--red); }

/* condition met / not met */
.rs-met    { color: var(--green); font-weight: 600; }
.rs-notmet { color: var(--muted); }

/* demo badge */
.rs-demo-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: rgba(180,83,9,0.12);
    color: var(--yellow);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
}

/* fired-row highlight */
.rs-fired td, .rs-demo td {
    background: rgba(34,197,94,0.04);
}

/* dashboard level editor in trigger settings */
.ts-level-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.ts-level-input {
    width: 110px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 0.78rem;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    background: var(--surface2);
    color: var(--text);
    outline: none;
}
.ts-level-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
button.ts-level-save {
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    appearance: none;
    background: #1e40af;
    color: #bfdbfe;
    font-family: inherit;
    white-space: nowrap;
}
button.ts-level-save:hover:not(:disabled) { opacity: 0.8; }
button.ts-level-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* dashboard toggle button (enabled/disabled) */
button.btn-toggle-dash {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    line-height: 1.5;
}
button.btn-toggle-dash.is-on   { background: #166534; color: #bbf7d0; }
button.btn-toggle-dash.is-off  { background: #991b1b; color: #fecaca; }
button.btn-toggle-dash.is-live { background: #1e40af; color: #bfdbfe; }
button.btn-toggle-dash.is-demo { background: #92400e; color: #fde68a; }
button.btn-toggle-dash:hover:not(:disabled) { opacity: 0.75; }
button.btn-toggle-dash:disabled { opacity: 0.5; cursor: not-allowed; }

/* per-rule alarm bell toggle (dashboard) */
button.btn-alarm-dash {
    display: inline-block;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
    white-space: nowrap;
}
button.btn-alarm-dash.is-on {
    background: #92400e; color: #fde68a;
    box-shadow: 0 0 6px rgba(234,179,8,0.35);
}
button.btn-alarm-dash.is-off { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
button.btn-alarm-dash:hover:not(:disabled) { filter: brightness(1.15); }

/* dashboard re-arm button */
.btn-rearm-dash {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(139,92,246,0.35);
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
    transition: background 0.15s, color 0.15s;
}
.btn-rearm-dash:hover:not(:disabled) {
    background: rgba(139,92,246,0.22);
    color: #7c3aed;
}
.btn-rearm-dash:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   DENSITY + LARGER CONTENT (desktop default)
   — Maximizes screen real estate: larger fonts, tighter margins,
     bigger controls, no wasted whitespace.
   ═══════════════════════════════════════════════════════════════ */

/* Navbar — tighter but taller touch target */
.navbar { padding: 0 18px; height: 52px; }
.nav-brand { font-size: 1.15rem; font-weight: 700; }
.nav-links { gap: 4px !important; }
.nav-links a, .nav-links button { font-size: 0.95rem; padding: 6px 12px; }

/* Page header — kill big top margin */
.page-header { margin-bottom: 10px !important; }
.page-header h1 { font-size: 1.6rem; margin: 0; }

/* Info boxes — tighter padding, bigger title */
.info-box { padding: 12px 14px !important; margin-bottom: 10px !important; border-radius: 8px; }
.info-box h2 { font-size: 1.05rem; margin-bottom: 8px; }

/* Tables — a touch larger text, tighter vertical rhythm */
.info-table { font-size: 0.98rem; }
.info-table td { padding: 6px 4px; }

/* Buttons — bigger but not bulky */
.btn { font-size: 0.95rem; padding: 7px 14px; }
.btn-start, .btn-stop { font-size: 1rem; padding: 8px 18px; }
.btn-toggle-dash, .btn-alarm-dash, .btn-rearm-dash { font-size: 0.82rem; padding: 5px 12px; }

/* Trigger settings table — rows tighter, fonts bigger */
#triggerSettingsTable { font-size: 0.95rem; }
#triggerSettingsTable td { padding: 5px 4px; }
#triggerSettingsTable td:first-child { width: 26%; min-width: 240px; }
.ts-level-input { font-size: 0.95rem; padding: 5px 8px; }
.ts-group-select { font-size: 0.9rem !important; }

/* Rule cards (rules.php) — less padding, larger inputs */
.rule-card { padding: 12px 14px !important; margin-bottom: 10px !important; }
.rule-card-header { gap: 8px; }
.rule-card-header .r-name { font-size: 1.02rem; padding: 5px 10px; }
.rule-card-body { padding: 8px 0; gap: 10px; }

/* Option chain — bigger text, tighter rows */
.chain-table { font-size: 0.92rem; }
.chain-table th { font-size: 0.9rem; padding: 6px 8px; }
.chain-table td { padding: 4px 8px; }
.chain-pick-btn { font-size: 0.88rem; padding: 5px 10px; }

/* Log panel — more readable log text */
.log-toolbar { padding: 8px 12px; }
.log-title { font-size: 1rem; }
.log-body { font-size: 0.88rem; line-height: 1.4; padding: 8px 12px; }
.log-filter-toolbar { padding: 6px 10px !important; font-size: 0.82rem !important; }
.log-filter-toolbar label { font-size: 0.82rem; }

/* LTP / market status — bigger and more prominent */
#ltpDisplay { font-size: 1.6rem !important; font-weight: 700; }
.nav-market-status { font-size: 0.92rem; }

/* Active positions chips — larger, tighter */
.pos-chip-dash { font-size: 0.92rem !important; padding: 5px 12px !important; }

/* Dashboard layout gets more room */
.dash-inner { padding: 10px 12px 12px !important; }

/* Inputs/selects uniformly bigger */
input[type="number"], input[type="text"], select, textarea {
    font-size: 0.95rem;
    padding: 6px 10px;
}

/* Remove excess gap in section grid */
.section-grid { gap: 10px !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS
   ═══════════════════════════════════════════════════════════════ */

/* Tablets & small laptops (≤ 1024px) — still one column but narrower log */
@media (max-width: 1024px) {
    html { font-size: 16px; }
    .container { max-width: 100%; padding: 10px 12px 30px; }
    .dash-layout { grid-template-columns: 1fr 380px; }
    .page-header h1 { font-size: 1.5rem; }
}

/* Tablets & large phones (≤ 768px) — stack dashboard and log panel */
@media (max-width: 768px) {
    html { font-size: 16px; }   /* keep full readability on touch */
    body { line-height: 1.4; }
    .container { padding: 8px 10px 24px; }

    /* iOS Safari fix — don't lock to 100vh (address bar makes it shift),
       and allow natural page scrolling when content stacks */
    body.has-dash-layout {
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
        display: block !important;
    }
    .navbar { position: static !important; }  /* stop sticky overlap on iOS */

    /* Navbar — allow natural wrap/height so items don't overlap on iOS */
    .navbar {
        height: auto;
        min-height: 48px;
        padding: 6px 10px;
        flex-wrap: wrap;
        gap: 6px;
        row-gap: 6px;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-brand { font-size: 1.05rem; flex: 0 0 auto; }
    .nav-market-status { font-size: 0.78rem; padding: 3px 10px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .nav-api-stats { font-size: 0.72rem; flex: 0 0 auto; }
    .nav-links {
        flex: 1 1 100%;   /* drop to its own full-width row on mobile */
        margin: 0 !important;
        display: flex;
        overflow-x: auto;
        gap: 4px;
        padding: 0;
    }

    /* Make sure page content starts below navbar (no sticky on mobile — pure flow) */
    .dash-layout { padding-top: 0; margin-top: 0; }

    /* Page header kept small */
    .page-header { margin-bottom: 8px !important; }
    .page-header h1 { font-size: 1.3rem; }

    /* Stack dashboard + log panel vertically — dashboard first */
    .dash-layout {
        display: flex;
        flex-direction: column;
        overflow: visible;
        height: auto;
    }
    .dash-layout > .dash-side { order: 1; }
    .dash-layout > .log-panel { order: 2; border-left: none; border-top: 1px solid var(--border); }

    .dash-side { overflow-y: visible; max-height: none; }
    .dash-inner { padding: 8px 8px 8px !important; }
    /* Use fixed pixels on mobile — vh units are unreliable on iOS Safari */
    .log-panel { max-height: none; overflow: visible; }
    .log-body { font-size: 0.88rem; line-height: 1.35; max-height: 360px; padding: 6px 8px; }

    /* Nav — horizontal scroll instead of wrap to save vertical space */
    nav ul { flex-wrap: nowrap; overflow-x: auto; gap: 4px !important; padding: 6px 8px !important; }
    nav ul li { flex-shrink: 0; }
    nav ul li a { font-size: 0.95rem; padding: 6px 12px; white-space: nowrap; }

    /* Info boxes — tighter */
    .info-box { padding: 10px !important; margin-bottom: 8px !important; }
    .info-box h2 { font-size: 1rem; margin-bottom: 6px; }

    /* Trigger settings — horizontal scroll so rows stay on one line, readable font */
    #triggerSettingsTable { display: block; overflow-x: auto; white-space: nowrap; font-size: 0.92rem; }
    .info-table td { padding: 6px 4px; white-space: nowrap; }
    #triggerSettingsTable td:first-child { width: auto; min-width: 180px; }
    .ts-level-input { width: 90px !important; }
    .btn-toggle-dash, .btn-alarm-dash, .btn-rearm-dash { padding: 6px 10px; font-size: 0.82rem; }

    /* Rule cards — single-column body on narrow screens */
    .rule-card { padding: 10px !important; margin-bottom: 8px !important; }
    .rule-card-header { flex-wrap: wrap; gap: 6px; }
    .rule-card-header .r-name { font-size: 0.98rem; min-width: 160px; }
    .rule-card-body { padding: 6px 0; gap: 8px; }

    /* Option chain table — use fixed layout so columns don't collide */
    .r-chain-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .chain-table {
        table-layout: fixed;
        width: 100%;
        font-size: 0.85rem;
    }
    .chain-ce-head  { width: 40%; }
    .chain-strike-head { width: 20%; min-width: 72px; }
    .chain-pe-head  { width: 40%; }
    .chain-table td, .chain-table th { padding: 5px 4px; }
    .chain-ce-td  { padding: 5px 4px; }
    .chain-pe-td  { padding: 5px 4px; }
    .chain-strike-td { padding: 5px 4px; font-size: 0.88rem; min-width: 72px; }
    .chain-pick-btn {
        font-size: 0.72rem;
        padding: 6px 6px;
        max-width: 100%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* Position chips */
    .pos-chip-dash { font-size: 0.88rem !important; padding: 5px 10px !important; }

    /* Modals — full width */
    .modal-content, [style*="max-width: 700px"], [style*="max-width: 600px"] {
        max-width: 95vw !important;
        padding: 12px !important;
    }

    /* Touch targets — 40px minimum, 16px input font prevents iOS zoom-on-focus */
    button, .btn, input[type="checkbox"], input[type="radio"] { min-height: 40px; }
    input[type="number"], input[type="text"], textarea { min-height: 40px; font-size: 16px; }
    select { min-height: 40px; font-size: 16px; }

    /* LTP — prominent */
    #ltpDisplay { font-size: 1.4rem !important; }
}

/* Phones (≤ 480px) — further compression but keep touch targets */
@media (max-width: 480px) {
    html { font-size: 15.5px; }
    .container { padding: 6px 8px 20px; }
    .page-header h1 { font-size: 1.15rem; }

    /* Hide low-priority navbar items on small phones to prevent overlap */
    .market-detail { display: none; }
    .nav-api-stats { display: none; }
    .nav-market-status { font-size: 0.72rem; padding: 2px 8px; }
    .nav-brand { font-size: 0.95rem; }
    .brand-icon { font-size: 0.75rem; padding: 2px 5px; }

    /* LTP a bit smaller on phones */
    #ltpDisplay { font-size: 1.25rem !important; }

    /* Filter toolbar wraps to save width */
    .log-filter-toolbar { flex-wrap: wrap; gap: 4px; padding: 6px !important; font-size: 0.78rem !important; }
    .log-filter-toolbar label { font-size: 0.78rem; }

    /* Trigger settings — narrower input */
    #triggerSettingsTable .ts-level-cell input { width: 80px !important; }

    /* Info box headers */
    .info-box h2 { font-size: 0.95rem; flex-wrap: wrap; }

    /* Rule card body stacks */
    .rule-card-body { display: block; }

    /* Chain table: fixed layout, smaller buttons so CALL/Strike/PUT don't overlap */
    .chain-table { table-layout: fixed; font-size: 0.78rem; }
    .chain-ce-head, .chain-pe-head { width: 40%; }
    .chain-strike-head, .chain-strike-td { width: 20%; min-width: 64px; }
    .chain-pick-btn {
        font-size: 0.68rem;
        padding: 5px 4px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        box-sizing: border-box;
    }
    .chain-strike-td { font-size: 0.82rem; padding: 4px 2px; }
    .chain-atm-badge, .chain-level-badge { font-size: 0.55rem; padding: 1px 3px; }

    /* Nav */
    nav ul li a { font-size: 0.88rem; padding: 5px 10px; }
}

/* Landscape phones — cap log panel height to give more room to dashboard */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .log-panel { max-height: 42vh; }
    .log-body { max-height: 28vh; }
}