/* Plain CSS helpers (the Tailwind Play CDN cannot @apply in external files). */
.safe-area { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.card { background: rgb(15 23 42); border: 1px solid rgb(30 41 59); border-radius: 0.9rem; padding: 0.9rem; }
.stat-label { font-size: 0.72rem; color: rgb(148 163 184); }
.stat-value { font-size: 1.25rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.btn-ghost { font-size: 0.8rem; padding: 0.35rem 0.6rem; border-radius: 0.5rem; border: 1px solid rgb(51 65 85); color: rgb(203 213 225); }
.btn-ghost:hover { background: rgb(30 41 59); }
.thead th { text-align: left; font-weight: 500; font-size: 0.72rem; color: rgb(100 116 139); padding: 0.25rem 0.4rem; }
.thead th.text-right { text-align: right; }
tbody td { padding: 0.35rem 0.4rem; border-top: 1px solid rgb(30 41 59); font-variant-numeric: tabular-nums; }
.pos { color: rgb(52 211 153); }
.neg { color: rgb(251 113 133); }
.log-INFO { color: rgb(203 213 225); }
.log-WARNING { color: rgb(251 191 36); }
.log-ERROR, .log-CRITICAL { color: rgb(251 113 133); font-weight: 600; }
.log-ts { color: rgb(100 116 139); margin-right: 0.5rem; }
#terminal div { white-space: pre-wrap; word-break: break-word; }
/* Module 8: charts */
.chart-box { position: relative; height: 320px; border-radius: 0.6rem; overflow: hidden; background: rgb(2 6 23); border: 1px solid rgb(30 41 59); }
@media (max-width: 767px) { .chart-box { height: 260px; } }
.tf-btn { font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 0.4rem; border: 1px solid rgb(51 65 85); color: rgb(148 163 184); }
.tf-btn.active { background: rgb(5 150 105); border-color: rgb(5 150 105); color: #fff; }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: rgb(30 41 59 / 0.6); }
.selected-row td { background: rgb(120 53 15 / 0.25); }
/* Trading Mode segmented toggle */
.mode-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0.4rem 0.25rem; border-radius: 0.45rem; font-size: 0.8rem; font-weight: 600; color: rgb(148 163 184); transition: background .15s, color .15s; }
.mode-btn:hover { color: #fff; background: rgb(51 65 85 / 0.6); }
.mode-btn[aria-checked="true"] { background: rgb(5 150 105); color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.mode-btn[aria-checked="true"][data-mode="reverse_only"] { background: rgb(2 132 199); }
.mode-btn[aria-checked="true"][data-tm="testnet"] { background: rgb(217 119 6); }
.mode-btn[aria-checked="true"][data-tm="live"] { background: rgb(225 29 72); }
.mode-live { color: rgb(253 164 175); }
/* portfolio cards */
.pf-stat { background: rgb(30 41 59 / 0.6); border-radius: 0.6rem; padding: 0.55rem 0.8rem; }
.pf-num { font-size: 1.15rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.pos-card { border: 1px solid rgb(51 65 85); border-radius: 0.9rem; padding: 0.9rem 1rem; background: rgb(15 23 42); }
.pos-card.danger { border: 2px solid rgb(225 29 72); }
.pos-card.naked { border: 2px solid rgb(225 29 72); background: rgb(76 5 25 / 0.35); }
.pos-chip { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 0.4rem; white-space: nowrap; }
.chip-std { background: rgb(6 78 59); color: rgb(110 231 183); }
.chip-rev { background: rgb(12 74 110); color: rgb(125 211 252); }
.chip-safe { background: rgb(6 78 59); color: rgb(110 231 183); }
.chip-watch { background: rgb(120 53 15); color: rgb(252 211 77); }
.chip-danger { background: rgb(127 29 29); color: rgb(253 164 175); }
.chip-muted { background: rgb(51 65 85); color: rgb(203 213 225); }
.pos-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
@media (max-width: 520px) { .pos-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pos-big { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pos-mid { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(241 245 249); }
.pos-mid.pos, .pos-big.pos { color: rgb(52 211 153); }
.pos-mid.neg, .pos-big.neg { color: rgb(251 113 133); }
.liq-bar { height: 6px; border-radius: 3px; background: rgb(51 65 85); margin-top: 0.3rem; overflow: hidden; }
.liq-fill { height: 6px; border-radius: 3px; }
.pos-details { margin-top: 0.75rem; border-top: 1px solid rgb(30 41 59); padding-top: 0.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.25rem 1.25rem; font-size: 0.78rem; }
.pos-details div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0; border-bottom: 1px dashed rgb(30 41 59); }
.pos-details span:first-child { color: rgb(148 163 184); }
.pos-details span:last-child { color: rgb(226 232 240); font-variant-numeric: tabular-nums; text-align: right; }
/* strategy editor */
.sf-row { display: grid; grid-template-columns: 1fr 8.5rem 1.75rem; gap: 0.5rem; align-items: center; }
.sf-input { width: 100%; border-radius: 0.5rem; background: rgb(30 41 59); border: 1px solid rgb(51 65 85); padding: 0.35rem 0.5rem; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.sf-input:focus { outline: none; box-shadow: 0 0 0 2px rgb(16 185 129); }
.sf-input.changed { border-color: rgb(217 119 6); }
.sf-input.invalid { border-color: rgb(225 29 72); }
.sf-reset { font-size: 0.9rem; color: rgb(148 163 184); border-radius: 0.4rem; }
.sf-reset:hover { color: #fff; background: rgb(51 65 85); }
.sf-reset:disabled { visibility: hidden; }
@media (max-width: 420px) { .sf-row { grid-template-columns: 1fr 6.5rem 1.75rem; } }
.mode-sub { font-size: 0.62rem; font-weight: 400; opacity: 0.8; line-height: 1.1; text-align: center; }
.scan-off { opacity: 0.4; }
/* Reverse margin-loan detail row */
.loan-row td { border-top: none; padding-top: 0; padding-bottom: 0.5rem; background: rgb(8 47 73 / 0.25); }
/* Module 11: auto-transfer switch (state comes from aria-checked, set only after the server confirms) */
.switch { position: relative; flex: none; width: 2.75rem; height: 1.5rem; border-radius: 9999px; background: rgb(51 65 85); transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 9999px; background: #fff; transition: transform .15s; }
.switch[aria-checked="true"] { background: rgb(217 119 6); }
.switch[aria-checked="true"]::after { transform: translateX(1.25rem); }
.switch:disabled { opacity: 0.5; }
@media (max-width: 639px) { #funding-clock { order: 10; width: 100%; text-align: center; } }