/* 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); }
.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; } }