:root {
    color-scheme: dark;
    --bg: #050605;
    --bg-soft: #090d0a;
    --panel: rgba(18, 27, 22, 0.92);
    --panel-2: rgba(12, 17, 14, 0.96);
    --line: rgba(201, 172, 108, 0.22);
    --line-soft: rgba(230, 222, 202, 0.08);
    --text: #efe9d8;
    --muted: #9f9a8c;
    --dim: #6f746d;
    --green: #3fb66f;
    --red: #c85f55;
    --gold: #c9ac6c;
    --gold-soft: #e0cf9d;
    --yellow: #f5d85d;
    --grey: #5d625d;
    --active-bg: #f5d85d;
    --active-text: #07120d;
    --shadow: rgba(0, 0, 0, 0.42);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0;
}

html {
    background:
        radial-gradient(circle at 18% 8%, rgba(45, 103, 72, 0.42), transparent 34%),
        linear-gradient(145deg, #06140d 0%, #0e2a1a 42%, #031008 100%),
        repeating-linear-gradient(90deg, rgba(245, 216, 93, 0.018) 0, rgba(245, 216, 93, 0.018) 1px, transparent 1px, transparent 88px);
    background-attachment: fixed;
}

body {
    /* Intended default scale: the layout is designed for 80% browser zoom. */
    zoom: 0.8;
    background: transparent;
}

button,
input,
select {
    font: inherit;
}

button {
    border: 0;
}

.app-shell {
    width: min(1540px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 18px 0 40px;
}

.top-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 86px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(16, 38, 29, 0.92), rgba(8, 12, 10, 0.96));
    box-shadow: 0 18px 40px var(--shadow);
    overflow: hidden;
}

.top-panel-logo-wm {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 340px;
    max-width: 42%;
    height: auto;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.top-panel > .system-status,
.top-panel > .top-meta {
    position: relative;
    z-index: 1;
}

.brand-logo {
    width: min(360px, 36vw);
    height: auto;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: #010201;
    filter: drop-shadow(0 1px 0 rgba(201, 172, 108, 0.35));
}

.system-status,
.top-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.top-meta {
    align-items: flex-end;
}

.label,
label span {
    color: var(--muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.system-status strong,
.top-meta time {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    color: var(--yellow);
    font-weight: 500;
}

.system-status small {
    color: var(--muted);
}

.wallet-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wallet-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.wallet-icon.green {
    background: rgba(63, 182, 111, 0.14);
    color: var(--green);
    border-color: rgba(63, 182, 111, 0.55);
}

.wallet-icon.red {
    background: rgba(200, 95, 85, 0.14);
    color: var(--red);
    border-color: rgba(200, 95, 85, 0.58);
}

.wallet-icon.grey {
    background: rgba(93, 98, 93, 0.15);
    color: var(--grey);
}

.wallet-1 { --wallet-color: #f0c94a; --wallet-rgb: 240, 201, 74; }
.wallet-2 { --wallet-color: #54b7ff; --wallet-rgb: 84, 183, 255; }
.wallet-3 { --wallet-color: #d889ff; --wallet-rgb: 216, 137, 255; }
.wallet-4 { --wallet-color: #ff8f5a; --wallet-rgb: 255, 143, 90; }
.wallet-5 { --wallet-color: #69dfc4; --wallet-rgb: 105, 223, 196; }
.wallet-6 { --wallet-color: #9ed76a; --wallet-rgb: 158, 215, 106; }
.wallet-binance { --wallet-color: #f3ba2f; --wallet-rgb: 243, 186, 47; }

.wallet-icon.wallet-1,
.wallet-icon.wallet-2,
.wallet-icon.wallet-3,
.wallet-icon.wallet-4,
.wallet-icon.wallet-5,
.wallet-icon.wallet-6 {
    color: var(--wallet-color);
    border-color: rgba(var(--wallet-rgb), 0.56);
    background: rgba(var(--wallet-rgb), 0.12);
}

.wallet-icon.wallet-binance {
    color: var(--wallet-color);
    border-color: rgba(var(--wallet-rgb), 0.56);
    background: rgba(var(--wallet-rgb), 0.12);
}

.main-tabs,
.subtabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.main-tabs {
    margin: 18px 0;
}

.main-tab,
.subtab,
.ghost-btn,
.primary-btn,
.danger-btn {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.main-tab,
.subtab,
.ghost-btn {
    color: var(--muted);
    background: rgba(18, 27, 22, 0.68);
    border: 1px solid var(--line-soft);
}

.main-tab.active,
#parameter-tabs .subtab.active,
#forecast-tabs .subtab.active {
    color: #050807;
    border-color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 10px 22px rgba(0, 0, 0, 0.32);
    font-weight: 800;
}

.ghost-btn:hover {
    color: var(--active-text);
    border-color: #fff1a6;
    background: var(--active-bg);
    box-shadow: 0 0 0 2px rgba(245, 216, 93, 0.22), 0 10px 22px rgba(0, 0, 0, 0.32);
    font-weight: 800;
}

.subtab.green {
    color: var(--green);
    border-color: rgba(63, 182, 111, 0.42);
    background: rgba(63, 182, 111, 0.08);
}

.subtab.red {
    color: var(--red);
    border-color: rgba(200, 95, 85, 0.46);
    background: rgba(200, 95, 85, 0.08);
}

.subtab.grey {
    color: var(--grey);
    border-color: rgba(93, 98, 93, 0.32);
}

.subtab.active.grey {
    color: #06110b;
    background: #c6cbc0;
    border-color: #eff2ea;
}

.subtab.wallet-1,
.subtab.wallet-2,
.subtab.wallet-3,
.subtab.wallet-4,
.subtab.wallet-5,
.subtab.wallet-6 {
    color: var(--wallet-color);
    border-color: rgba(var(--wallet-rgb), 0.45);
    background: rgba(var(--wallet-rgb), 0.08);
}

.subtab.wallet-binance {
    color: var(--wallet-color);
    border-color: rgba(var(--wallet-rgb), 0.45);
    background: rgba(var(--wallet-rgb), 0.08);
}

.subtab.active.wallet-1,
.subtab.active.wallet-2,
.subtab.active.wallet-3,
.subtab.active.wallet-4,
.subtab.active.wallet-5,
.subtab.active.wallet-6 {
    color: #06110b;
    background: var(--wallet-color);
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 2px rgba(var(--wallet-rgb), 0.28), 0 10px 22px rgba(0, 0, 0, 0.32);
}

.subtab.active.wallet-binance {
    color: #06110b;
    background: var(--wallet-color);
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 2px rgba(var(--wallet-rgb), 0.28), 0 10px 22px rgba(0, 0, 0, 0.32);
}

.primary-btn {
    color: #090d0a;
    background: var(--gold);
    border: 1px solid var(--gold);
    font-weight: 700;
}

.danger-btn {
    color: var(--text);
    background: rgba(200, 95, 85, 0.16);
    border: 1px solid rgba(200, 95, 85, 0.42);
}

.primary-btn:hover,
.danger-btn:hover,
.main-tab:hover,
.subtab:hover {
    transform: translateY(-1px);
}

.button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- Parameters section-head: Active|Preset switch + Save + Preset menu ---- */
.param-controls {
    align-items: center;
}

.view-switch {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.22);
}

.view-switch-btn {
    min-height: 38px;
    padding: 8px 14px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
    transition: background 140ms ease, color 140ms ease;
}

.view-switch-btn + .view-switch-btn {
    border-left: 1px solid var(--line);
}

.view-switch-btn.active {
    background: var(--gold);
    color: #090d0a;
}

.view-switch-btn.disabled,
.view-switch-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.preset-menu {
    position: relative;
    display: inline-block;
}

.preset-menu-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 25;
    display: none;
    flex-direction: column;
    min-width: 184px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
    box-shadow: 0 18px 40px var(--shadow);
}

/* Open on hover (no JS timer) or when toggled open via click. */
.preset-menu:hover .preset-menu-list,
.preset-menu.open .preset-menu-list {
    display: flex;
}

.preset-menu-item {
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 6px;
    text-align: left;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 120ms ease, color 120ms ease;
}

.preset-menu-item:hover {
    background: rgba(201, 172, 108, 0.14);
    color: var(--gold-soft);
}

.preset-menu-item.danger {
    color: var(--red);
}

.preset-menu-item.disabled,
.preset-menu-item:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.preset-menu-item.disabled:hover,
.preset-menu-item:disabled:hover {
    background: transparent;
    color: var(--red);
}

.preset-menu-item:disabled {
    color: var(--muted);
}

/* ---- Generic hover help tooltip (params, subsections, metrics, details, viz heads) ---- */
.param-help,
.help-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: var(--gold-soft);
    opacity: 0.55;
    /* Fixed px size so the marker renders the same in every parent widget. */
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: help;
    vertical-align: middle;
    outline: none;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.param-help:hover,
.param-help:focus,
.param-help:focus-within,
.help-mark:hover,
.help-mark:focus,
.help-mark:focus-within {
    opacity: 1;
    color: var(--gold);
}

.param-help-tip,
.help-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    display: none;
    width: max-content;
    max-width: 260px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel-2);
    color: var(--text);
    /* Fixed px metrics: the popup must read identically regardless of the
       font size/weight of the widget it sits inside (viz h3s, metric labels…). */
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
    box-shadow: 0 16px 38px var(--shadow);
    pointer-events: none;
}

.param-help:hover .param-help-tip,
.param-help:focus .param-help-tip,
.param-help:focus-within .param-help-tip,
.help-mark:hover .help-pop,
.help-mark:focus .help-pop,
.help-mark:focus-within .help-pop {
    display: block;
}

.tab-view {
    display: none;
}

.tab-view.active {
    display: block;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin: 20px 0 14px;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    color: var(--text);
}

h1 {
    font-size: clamp(1.55rem, 3vw, 2.25rem);
}

h2 {
    font-size: 1.04rem;
}

h3 {
    font-size: 1rem;
    color: var(--gold-soft);
}

p {
    margin: 6px 0 0;
    color: var(--muted);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.metric {
    min-height: 86px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--panel);
}

.metric .value {
    display: block;
    margin-top: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.45rem;
    color: var(--gold-soft);
    font-weight: 800;
}

.subtabs {
    margin: 16px 0;
}

/* Parameters + Data tabs: the subtabs (wallet/exchange buttons) share their row
   with an action button (Save / Refresh) on desktop. On mobile the action
   button wraps below since the subtabs alone need the full row width, and
   margin-left:auto keeps it right-aligned once it wraps. */
.subtabs-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 14px 0;
}

.subtabs-action-row .subtabs {
    flex: 1 1 auto;
    margin: 0;
}

.subtabs-action-row .button-row {
    margin: 0;
    flex: 0 0 auto;
}

.status-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Data tab: keep all five summary metrics on a single row. */
#forecast-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Status tab: three fleet metrics sit evenly across one row. */
#fleet-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel,
.table-panel {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.panel {
    padding: 14px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 10px;
}

.detail-item {
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.14);
    min-height: 62px;
}

.detail-item .value {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.subaccount-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 10px;
}

.subaccount-card {
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
    color: var(--text);
    text-align: left;
}

.subaccount-card.green {
    border-color: rgba(63, 182, 111, 0.4);
    background: rgba(63, 182, 111, 0.07);
}

.subaccount-card.red {
    border-color: rgba(200, 95, 85, 0.42);
    background: rgba(200, 95, 85, 0.07);
}

.subaccount-card.grey {
    border-color: rgba(93, 98, 93, 0.38);
}

.subaccount-card.wallet-1,
.subaccount-card.wallet-2,
.subaccount-card.wallet-3,
.subaccount-card.wallet-4,
.subaccount-card.wallet-5,
.subaccount-card.wallet-6 {
    border-color: rgba(var(--wallet-rgb), 0.5);
    background: linear-gradient(180deg, rgba(var(--wallet-rgb), 0.12), rgba(0, 0, 0, 0.15));
}

.subaccount-card:hover {
    border-color: rgba(var(--wallet-rgb, 245, 216, 93), 0.88);
    background: linear-gradient(180deg, rgba(var(--wallet-rgb, 245, 216, 93), 0.2), rgba(var(--wallet-rgb, 245, 216, 93), 0.08));
    box-shadow: 0 0 0 1px rgba(var(--wallet-rgb, 245, 216, 93), 0.28);
}

/* Selected wallet in the Subaccount Breakdown selector (click again to deselect). */
.subaccount-card.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(245, 216, 93, 0.28);
}

.subaccount-card-head,
.subaccount-card-head span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.subaccount-card-head strong {
    color: var(--gold-soft);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.subaccount-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(68px, 1fr));
    gap: 8px;
}

.subaccount-card-grid span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.subaccount-card-grid small {
    color: var(--muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.subaccount-card-grid b {
    overflow-wrap: anywhere;
    font-size: 0.82rem;
}

.state-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--grey);
}

.state-dot.green {
    background: var(--green);
}

.state-dot.red {
    background: var(--red);
}

.state-dot.wallet-1,
.state-dot.wallet-2,
.state-dot.wallet-3,
.state-dot.wallet-4,
.state-dot.wallet-5,
.state-dot.wallet-6 {
    background: var(--wallet-color);
}

.heading-balance,
.text-yellow,
.text-gold,
.metric .value.text-gold {
    color: var(--yellow) !important;
}

.heading-balance {
    margin-left: 8px;
    font-weight: 850;
}

/* Current Position head: title (+ balance) left, active-days middle, button right. */
.position-panel-head {
    flex-wrap: wrap;
}

.position-panel-head h2 {
    flex: 1 1 auto;
}

.position-active-days {
    flex: 0 1 auto;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.position-active-days:empty {
    display: none;
}

.position-panel-head .button-row {
    flex: 0 0 auto;
}

.fleet-exposure-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

.fleet-exposure-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 10px;
}

.market-chart-card {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 330px;
    padding: 10px;
    border: 1px solid rgba(245, 216, 93, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.market-chart-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.market-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.market-chart-head strong {
    color: var(--text);
}

.chart-range-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.chart-range {
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--muted);
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.chart-range.active {
    color: var(--active-text);
    background: var(--yellow);
    border-color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
}

.market-chart {
    position: relative;
    min-height: 260px;
    display: grid;
    place-items: center;
    color: var(--muted);
}

.market-svg {
    width: 100%;
    height: 100%;
    min-height: 260px;
}

.chart-hover-point {
    fill: rgba(245, 216, 93, 0);
    stroke: rgba(245, 216, 93, 0);
    pointer-events: all;
    cursor: crosshair;
}

.chart-hover-point:hover {
    fill: rgba(245, 216, 93, 0.2);
    stroke: rgba(245, 216, 93, 0.55);
}

.chart-hover-tooltip {
    position: absolute;
    display: grid;
    gap: 2px;
    min-width: 138px;
    padding: 8px 10px;
    border: 1px solid rgba(245, 216, 93, 0.34);
    border-radius: 6px;
    background: rgba(4, 7, 5, 0.94);
    color: var(--text);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.46);
    pointer-events: none;
    z-index: 5;
}

.chart-hover-tooltip strong {
    color: var(--yellow);
}

.chart-hover-tooltip[hidden] {
    display: none;
}

.market-line {
    fill: none;
    stroke: var(--yellow);
    stroke-width: 2.4;
}

.chart-grid-line {
    stroke: rgba(230, 222, 202, 0.12);
    stroke-width: 1;
}

.chart-axis-label,
.entry-marker text {
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
}

.chart-axis-label {
    fill: var(--muted);
}

.chart-empty {
    padding: 18px;
    color: var(--muted);
    text-align: center;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 10px;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--muted);
}

.filter-name {
    flex: 1 1 auto;
    color: var(--text);
}

.filter-value {
    color: var(--gold-soft);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
    text-align: right;
}

.dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--grey);
}

.dot.on {
    background: var(--green);
}

.dot.off {
    background: var(--red);
}

.parameter-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 12px;
}

.param-section {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--panel);
    padding: 14px;
}

.param-section h3 {
    margin-bottom: 10px;
}

.param-subsection {
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    background: var(--panel-2);
    margin-bottom: 8px;
    /* visible (not hidden) so help tooltips can overflow the subsection box. */
    overflow: visible;
}

.param-subsection:last-child {
    margin-bottom: 0;
}

.param-subsection-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 6px 6px 0 0;
    background: rgba(201, 172, 108, 0.05);
    color: var(--gold-soft);
    cursor: pointer;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.param-subsection-head:hover {
    background: rgba(201, 172, 108, 0.1);
}

/* Closed subsection: head is the only visible box, so round all corners. */
.param-subsection:not(.open) .param-subsection-head {
    border-radius: 6px;
}

.param-subsection-chevron {
    display: inline-block;
    color: var(--muted);
    font-size: 0.72rem;
    transition: transform 0.15s ease;
}

.param-subsection.open .param-subsection-chevron {
    transform: rotate(90deg);
    color: var(--gold-soft);
}

.param-subsection-title {
    flex: 1;
}

.param-subsection-body {
    display: none;
    padding: 0 12px;
    border-top: 1px solid var(--line-soft);
}

.param-subsection.open .param-subsection-body {
    display: block;
}

.param-subsection-body:empty {
    border-top: 0;
}

.param-row {
    display: grid;
    grid-template-columns: 1fr minmax(92px, 142px);
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
}

.param-row[hidden] {
    display: none;
}

.param-row:last-child {
    border-bottom: 0;
}

.param-row label {
    color: var(--text);
    font-size: 0.91rem;
}

.param-row label small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.72rem;
}

.param-row input,
.param-row select,
.login-form input {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--text);
    background: rgba(0, 0, 0, 0.26);
    padding: 8px 10px;
}

.param-display-value {
    justify-self: end;
    color: var(--gold-soft);
    font-size: 0.85rem;
    white-space: nowrap;
    padding: 6px 8px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
}

.param-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-height: 22px;
    justify-self: end;
    accent-color: var(--gold);
}

.param-row.trade-days-row {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.trade-day-control {
    display: grid;
    gap: 8px;
}

.trade-day-zone {
    min-height: 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 8px;
    border: 1px dashed var(--line-soft);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
}

.trade-day-zone.drop-target {
    border-color: var(--yellow);
    background: rgba(245, 216, 93, 0.08);
}

.trade-day-caption {
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trade-day-chip {
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(245, 216, 93, 0.34);
    border-radius: 999px;
    background: rgba(245, 216, 93, 0.16);
    color: var(--yellow);
    cursor: grab;
    font-weight: 700;
}

.trade-day-chip.option {
    color: var(--muted);
    border-color: var(--line-soft);
    background: rgba(255, 255, 255, 0.04);
}

.trade-day-chip:active {
    cursor: grabbing;
}

.profile-panel {
    margin-bottom: 12px;
}

.profile-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.profile-summary strong {
    display: block;
    margin-top: 3px;
    color: var(--yellow);
    font-size: 1.05rem;
}

.profile-summary p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.profile-count {
    min-width: 96px;
    padding: 10px 12px;
    border: 1px solid rgba(245, 216, 93, 0.22);
    border-radius: 7px;
    text-align: center;
    background: rgba(0, 0, 0, 0.18);
}

.profile-count span {
    display: block;
    color: var(--yellow);
    font-weight: 850;
    font-size: 1.25rem;
}

.profile-count small {
    color: var(--muted);
}

.forecast-date-scope {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: -4px 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(11, 20, 15, 0.82);
}

.forecast-date-copy {
    min-width: min(340px, 100%);
}

/* Reusable small-caps field label — used for "Report" so it reads as a
   top-aligned match to the "Start Date" label beside it. */
.field-label {
    display: block;
    color: var(--gold-soft);
    font-size: 1.05rem;
    font-weight: 750;
    text-transform: uppercase;
}

.forecast-date-controls {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.trade-filter-panel {
    margin-bottom: 12px;
}

.trade-filter-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.trade-filter-head h2 {
    margin: 0 0 4px;
}

.trade-filter-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.filter-count {
    flex: 0 0 auto;
    border: 1px solid rgba(245, 216, 93, 0.28);
    border-radius: 999px;
    color: var(--yellow);
    background: rgba(245, 216, 93, 0.08);
    padding: 5px 9px;
    font-size: 0.76rem;
    font-weight: 750;
}

.trade-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 10px;
}

.trade-filter-field {
    display: grid;
    gap: 5px;
}

.trade-filter-field.start-date {
    grid-column: 1 / -1;
}

.trade-filter-field span {
    color: var(--gold-soft);
    font-size: 0.74rem;
    font-weight: 750;
    text-transform: uppercase;
}

.trade-filter-field input {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--text);
    background: rgba(0, 0, 0, 0.25);
    padding: 7px 9px;
}

.trade-filter-field input:focus {
    outline: 1px solid rgba(245, 216, 93, 0.58);
    border-color: rgba(245, 216, 93, 0.62);
}

.trade-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.ledger-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 12px;
    align-items: stretch;
}

.table-panel {
    overflow: auto;
    min-height: 0;
    /* Row height is set by the Selected Trade panel; the table fills it and
       scrolls internally so its bottom lines up with the detail panel. */
    contain: size;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1080px;
}

th,
td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    font-size: 0.84rem;
}

th {
    position: sticky;
    top: 0;
    color: var(--gold-soft);
    background: #0b100d;
    font-weight: 650;
    z-index: 1;
}

#trade-totals td {
    position: sticky;
    bottom: 0;
    color: var(--gold-soft);
    background: #101a14;
    border-top: 1px solid rgba(245, 216, 93, 0.45);
    border-bottom: 0;
    font-weight: 750;
    z-index: 1;
}

#trade-totals td:first-child {
    color: var(--yellow);
}

tr.trade-row {
    cursor: pointer;
}

tr.trade-row:hover,
tr.trade-row.active {
    background: rgba(245, 216, 93, 0.18);
    outline: 1px solid rgba(245, 216, 93, 0.35);
}

.text-green {
    color: var(--green);
}

.text-red {
    color: var(--red);
}

.text-gold { color: var(--yellow); }

.trade-detail {
    min-height: 320px;
}

.empty-detail {
    color: var(--muted);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.68);
    z-index: 20;
}

.modal-backdrop[hidden],
.toast[hidden] {
    display: none;
}

.modal {
    width: min(560px, 100%);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0b100d;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    padding: 18px;
}

.modal-field {
    display: grid;
    gap: 7px;
    margin-top: 12px;
}

.modal-field span {
    color: var(--gold-soft);
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
}

.modal-field input,
.modal-field select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--text);
    background: rgba(0, 0, 0, 0.28);
    padding: 8px 10px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.diff-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.diff-row {
    padding: 9px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--muted);
}

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    max-width: min(420px, calc(100vw - 36px));
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0b100d;
    color: var(--text);
    padding: 12px 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.login-body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
}

.login-shell {
    width: min(430px, 100%);
}

.login-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(16, 38, 29, 0.94), rgba(7, 9, 8, 0.98));
    padding: 30px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.login-logo {
    width: 100%;
    margin: 0 auto 28px;
}

.login-form {
    display: grid;
    gap: 16px;
}

.login-form label {
    display: grid;
    gap: 7px;
}

.wallet-test-suffix {
    display: inline;
    margin-left: 0.22em;
    font-size: 0.72em;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.82;
}

.subaccount-card-head .wallet-test-suffix {
    display: inline;
}

.login-form label[hidden] {
    display: none;
}

.login-form button {
    min-height: 42px;
    border-radius: 6px;
    background: var(--gold);
    color: #090d0a;
    cursor: pointer;
    font-weight: 700;
}

.auth-mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 20px;
    padding: 4px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.auth-mode-switch button {
    min-height: 38px;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.auth-mode-switch button.active {
    color: #08100b;
    background: var(--gold);
    font-weight: 750;
}

.account-name {
    color: var(--gold-soft);
    font-size: 0.78rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
}

.settings-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-card {
    align-self: stretch;
}

.settings-fill-card { flex: 1; }

.settings-accordion-head {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--gold-soft);
    background: rgba(0, 0, 0, 0.16);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-align: left;
}

.settings-accordion-head:hover,
.settings-accordion-head[aria-expanded="true"] {
    color: var(--text);
    border-color: var(--gold);
    background: rgba(243, 186, 47, 0.08);
}

.settings-accordion-chevron {
    transition: transform 140ms ease;
}

.settings-accordion-head[aria-expanded="true"] .settings-accordion-chevron {
    transform: rotate(90deg);
}

.settings-accordion-body {
    padding-top: 14px;
}

.settings-accordion-body[hidden] { display: none; }

.settings-form {
    display: grid;
    gap: 14px;
}

.settings-form label {
    display: grid;
    gap: 7px;
    color: var(--gold-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    font-weight: 700;
}

.settings-form input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--text);
    background: rgba(0, 0, 0, 0.26);
    padding: 8px 10px;
}

.api-settings-list {
    display: grid;
    gap: 10px;
}

.api-setting {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.16);
}

.pair-settings-list {
    display: grid;
    gap: 10px;
}

.pair-setting {
    display: grid;
    grid-template-columns: minmax(145px, 1fr) minmax(108px, auto);
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.16);
}

.pair-setting-custom-name { grid-column: 1; grid-row: 1; }
.pair-setting-select { grid-column: 1; grid-row: 2; }
.pair-setting-test { grid-column: 2; grid-row: 1; }
.pair-setting > [data-pair-save] { grid-column: 2; grid-row: 2; }

.pair-setting-custom-name,
.pair-setting-select {
    display: grid;
    gap: 5px;
}

.pair-setting-custom-name span,
.pair-setting-select span {
    color: var(--muted);
    font-size: 0.72rem;
}

.pair-setting select,
.pair-setting-custom-name input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--text);
    background: #0b1610;
    padding: 7px 9px;
}

.pair-setting-test {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--gold-soft);
    font-size: 0.76rem;
    white-space: nowrap;
    cursor: pointer;
}

.pair-setting-test input {
    width: 17px;
    height: 17px;
    accent-color: var(--gold);
}

.api-setting-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.api-setting-main div {
    display: grid;
    gap: 3px;
}

.api-setting-main small,
.api-test-result {
    color: var(--muted);
    font-size: 0.76rem;
}

.api-test-result { margin: 0; }

.connection-light {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    background: var(--grey);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}

.connection-light.connected { background: var(--green); box-shadow: 0 0 10px var(--green); }
.connection-light.failed { background: var(--red); box-shadow: 0 0 10px var(--red); }
.connection-light.testing { background: var(--yellow); animation: pulse 0.9s infinite alternate; }

button:disabled { opacity: 0.45; cursor: not-allowed; }

.settings-logout {
    display: inline-flex;
    width: fit-content;
    text-decoration: none;
}

.settings-logout-form {
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.settings-action-row {
    display: flex;
    justify-content: flex-end;
}

.tutorial-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    pointer-events: none;
    background: transparent;
}

.tutorial-backdrop[hidden] { display: none; }

.tutorial-card {
    position: fixed;
    width: min(440px, calc(100vw - 32px));
    padding: 20px;
    border: 1px solid var(--gold);
    border-radius: 10px;
    background: #0b100d;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.68);
    pointer-events: auto;
    z-index: 61;
}

.tutorial-card h2 { margin: 6px 0 10px; }
.tutorial-card #tutorial-copy { color: var(--text); line-height: 1.6; }
.tutorial-progress { color: var(--gold-soft); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; }
#tutorial-end { margin-right: auto; }

.tutorial-target,
.tutorial-tabs-target {
    position: relative;
    z-index: 50;
    outline: 3px solid var(--gold);
    outline-offset: 4px;
    border-radius: 8px;
    box-shadow: 0 0 34px rgba(243, 186, 47, 0.62);
    filter: brightness(1.2) saturate(1.08);
}

.tutorial-tabs-target {
    position: sticky;
    top: 12px;
    z-index: 55;
}

body.tutorial-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(2, 5, 3, 0.72);
    pointer-events: auto;
}

.form-error {
    color: var(--red);
    margin: 0;
}

@media (max-width: 980px) {
    .top-panel,
    .status-layout,
    .parameter-board,
    .ledger-layout,
    .fleet-exposure-layout {
        grid-template-columns: 1fr;
    }

    .settings-grid { grid-template-columns: 1fr; }
    .settings-fill-card { flex: none; }

    /* .table-panel uses `contain:size` and gets its height by matching
       .trade-detail's row height in the desktop 2-column grid — once
       .ledger-layout collapses to a single column above, each panel is its
       own grid row and .table-panel has nothing left to size itself by,
       so it collapses to zero height and the trade table disappears. Give
       it an explicit height so it renders (and scrolls internally, both
       ways, since the table itself still has a wide min-width). */
    .table-panel {
        height: 60vh;
    }

    /* Logo (left) and the X badge/clock (right) share the same top edge
       instead of the logo being vertically centered in the header. */
    .top-panel {
        align-items: start;
    }

    .top-panel-logo-wm {
        top: 14px;
        transform: none;
    }

    .top-meta {
        align-items: flex-end;
    }

    /* The clock's full date+time string is wide enough to reach under the
       logo when both start at the same top edge — nudge it down just enough
       to clear the logo's bottom edge, while the badge stays top-aligned. */
    #system-clock {
        margin-top: 10px;
    }

    .brand-logo {
        width: min(320px, 72vw);
        justify-self: start;
    }

    .metric-grid,
    #forecast-metrics,
    #fleet-metrics {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .trade-filter-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 620px) {
    .pair-setting { grid-template-columns: 1fr; align-items: stretch; }
    .pair-setting-custom-name,
    .pair-setting-select,
    .pair-setting-test,
    .pair-setting > [data-pair-save] { grid-column: 1; grid-row: auto; }
    .app-shell {
        width: min(100vw - 18px, 1540px);
        padding-top: 9px;
    }

    .main-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: auto; }
    .main-tabs .main-tab { min-width: 76px; padding-inline: 8px; font-size: 0.78rem; }
    .api-setting .button-row { display: grid; grid-template-columns: repeat(3, 1fr); }
    .tutorial-card { padding: 16px; }

    .section-head,
    .panel-head,
    .profile-summary {
        flex-direction: column;
        align-items: stretch;
    }

    /* Subaccount Breakdown's "All" button stays next to its heading, not
       stacked below, on every screen size, and stays small instead of the
       generic mobile width:100% button treatment. */
    #panel-breakdown .panel-head {
        flex-direction: row;
        align-items: center;
    }

    #breakdown-all {
        width: auto;
        min-height: 32px;
        padding: 7px 18px;
        font-size: 0.85rem;
    }

    .metric-grid,
    .detail-grid,
    .filter-grid,
    .fleet-exposure-stats {
        grid-template-columns: 1fr;
    }

    /* Status: Total Funds / Active Wallets / Current PNL stay in one row. */
    #fleet-metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Subaccount Breakdown: 2 cards per row (2x2) instead of 4-across or stacked.
       minmax(0, 1fr) is required, not bare 1fr — otherwise each column's minimum
       width defaults to its content's min-content size, which can force the
       whole page to overflow horizontally. */
    .subaccount-breakdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .subaccount-card {
        padding: 8px;
        gap: 6px;
    }

    .subaccount-card-head {
        flex-wrap: wrap;
        gap: 3px;
    }

    /* At ~160px/card there's enough room for Total/ROE/PNL side by side again,
       just with a smaller per-column minimum than the desktop 68px. */
    .subaccount-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    /* Status tab: Refresh stays next to the "Fleet Overview" heading, on the
       same row, instead of the generic mobile column-stack. */
    #tab-status .section-head {
        flex-direction: row;
        align-items: center;
    }

    /* Data tab filters: 2 columns instead of 1 per row. */
    .trade-filter-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Data tab metrics: rendered as Total Trades, Win Rate, ROI, PNL, Total
       Funds (in that order) — reorder visually so Total Funds sits full-width
       on top, then Total Trades + Win Rate, then ROI + PNL, 2 columns each. */
    #forecast-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    #forecast-metrics .metric:nth-child(1) { order: 2; } /* Total Trades */
    #forecast-metrics .metric:nth-child(2) { order: 3; } /* Win Rate */
    #forecast-metrics .metric:nth-child(3) { order: 4; } /* ROI */
    #forecast-metrics .metric:nth-child(4) { order: 5; } /* PNL */
    #forecast-metrics .metric:nth-child(5) { /* Total Funds */
        order: 1;
        grid-column: 1 / -1;
    }

    /* Start Date spans the full first row on mobile too; the remaining
       filters flow into the 2-column grid below it (see .trade-filter-grid
       above). */
    .trade-filter-field.start-date {
        grid-column: 1 / -1;
    }

    .trade-filter-head,
    .trade-filter-actions,
    .forecast-date-scope,
    .forecast-date-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .main-tab,
    .subtab,
    .ghost-btn,
    .primary-btn,
    .danger-btn {
        width: 100%;
    }

    /* Status/Parameters/Data nav stays in one row instead of stacking. */
    .main-tabs .main-tab {
        width: auto;
        flex: 1 1 0;
    }

    /* Status tab: Refresh button matches the Parameters Save button's mobile
       sizing (smaller) instead of stretching full-width. Right-alignment now
       comes from .section-head staying row-direction + space-between (see
       above), so no align-self override is needed here. */
    #tab-status .section-head #refresh-state {
        width: auto;
        min-height: 32px;
        padding: 7px 18px;
        font-size: 0.85rem;
    }

    /* Parameters tab: XRP/SOL on row 1, BTC/ETH on row 2 instead of one per row.
       Data tab: same 2-column treatment for its 4 wallet subtabs, but not the
       "All" tab, which stays full-width above them. */
    #parameter-tabs .subtab,
    #forecast-tabs .subtab:not([data-subtab="all"]) {
        width: calc(50% - 4px);
    }

    /* Save / Refresh move below the subtabs, smaller and right-aligned, since
       the subtabs alone need the full row width on mobile and wrap the action
       button onto its own line; margin-left:auto keeps it pinned to the right. */
    .subtabs-action-row .subtabs {
        flex-basis: 100%;
    }

    .subtabs-action-row .button-row {
        margin-left: auto;
    }

    #tab-parameters .param-controls .primary-btn,
    #tab-forecast .forecast-refresh-row .ghost-btn {
        width: auto;
        min-height: 32px;
        padding: 7px 18px;
        font-size: 0.85rem;
    }
}

textarea {
    min-height: 92px;
    resize: vertical;
    width: 100%;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--text);
    padding: 10px;
    font: inherit;
}

.exchange-tabs {
    margin-bottom: 10px;
}

.project-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
    align-items: start;
}

.project-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 32, 25, 0.94), rgba(9, 15, 12, 0.94));
    padding: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}

.project-card.closed {
    opacity: 0.68;
}

.project-card-head,
.project-mini-head,
.project-dates,
.project-note,
.checklist-row label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.project-card-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 10px;
}

.project-card h2 {
    margin: 4px 0 0;
    font-size: 1rem;
}

.project-card-actions,
.checklist-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.mini-btn,
.icon-btn {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 0.72rem;
}

.project-dates {
    margin: 10px 0;
    color: var(--yellow);
    font-size: 0.82rem;
}

.project-notes,
.project-checklist {
    margin-top: 12px;
}

.project-note,
.checklist-row {
    margin-top: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
    padding: 8px;
}

.checklist-row.done {
    opacity: 0.72;
}

.checklist-row.done label span {
    text-decoration: line-through;
}

.checklist-row {
    display: grid;
    gap: 7px;
}

.checklist-note {
    margin-left: 22px;
}

.muted-line,
.empty-projects {
    color: var(--muted);
}

.modal-field textarea {
    margin-top: 6px;
}

/* ============================ Cypress X visual aids ============================ */
.instance-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--active-text);
    background: var(--active-bg);
    padding: 3px 11px;
    border-radius: 999px;
    font-weight: 700;
    align-self: flex-end;
}

.status-visuals,
.forecast-visuals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0 18px;
}

/* Single-wallet status: ROE / PNL / Funds tiles share one row. */
.status-visuals.wallet-mode {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Fleet visuals area collapses in single-wallet view. */
.status-visuals:empty {
    display: none;
    margin: 0;
}

/* Wallet gauge sits inside the status layout grid; spacing comes from the grid gap. */
#wallet-visuals {
    margin: 0;
}

.viz-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px 16px;
    background: linear-gradient(180deg, rgba(16, 38, 29, 0.55), rgba(8, 12, 10, 0.85));
    box-shadow: 0 10px 26px var(--shadow);
    min-width: 0;
}

.viz-card.viz-wide {
    grid-column: 1 / -1;
}

.viz-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.viz-head h3 {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gold-soft);
    text-transform: uppercase;
}

/* Direct-child combinator only: the header's own value span (e.g. an equity
   $ amount), not the help-mark/help-pop tooltip nested inside the <h3> —
   those must keep their own fixed, uniform font-size regardless of widget. */
.viz-head > span {
    font-size: 1rem;
    font-weight: 600;
}

.viz-donut-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* Fleet Overview's "Positions" donut: centered within its card at every
   screen size, without touching the donut's own dimensions. */
#status-visuals .viz-donut-wrap {
    justify-content: center;
}

/* Wide Win/Loss card: center the bigger donut with its legend beside/under it. */
.viz-donut-wrap.viz-donut-center {
    justify-content: center;
    gap: 28px;
}

.viz-donut-wrap.viz-donut-center .cx-donut {
    width: 250px;
    height: 250px;
}

.cx-donut {
    width: 150px;
    height: 150px;
    flex: 0 0 auto;
}

.donut-center {
    fill: var(--text);
    font-size: 30px;
    font-weight: 700;
}

.donut-sub {
    fill: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.viz-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--muted);
}

.legend-item b {
    color: var(--text);
    margin-left: 2px;
}

.legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
}

.cx-hbars,
.cx-area,
.cx-columns,
.cx-gauge {
    width: 100%;
    height: auto;
    display: block;
}

.cx-bar-track {
    fill: rgba(230, 222, 202, 0.06);
}

.cx-bar-label {
    fill: var(--muted);
    font-size: 12px;
}

.cx-bar-value {
    fill: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.cx-axis {
    stroke: rgba(230, 222, 202, 0.28);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.cx-grid {
    stroke: rgba(230, 222, 202, 0.08);
    stroke-width: 1;
}

.cx-axis-label {
    fill: var(--dim);
    font-size: 11px;
}

.cx-area-line {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
}

.viz-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 92px;
    border-left: 3px solid var(--line);
}

.viz-stat.pos {
    border-left-color: var(--green);
}

.viz-stat.neg {
    border-left-color: var(--red);
}

.viz-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
}

.viz-stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}

.viz-gauge {
    grid-column: 1 / -1;
}

.chart-empty {
    padding: 26px 10px;
    text-align: center;
    color: var(--dim);
    font-size: 0.86rem;
}

@media (max-width: 900px) {
    .status-visuals,
    .status-visuals.wallet-mode,
    .forecast-visuals {
        grid-template-columns: 1fr;
    }
}