/* JTrade Remote — the phone stylesheet.
   Black ground, white ink, one hairline, the same green and red the site uses
   and nothing else colored. Laid out for 375 px first: nothing in a list
   scrolls sideways, and every target is a thumb's width. No web fonts — the
   host's own stack loads instantly and needs no second origin. */

:root {
  --bg: #06070a;
  --bg-2: #0c0d11;
  --bg-3: #14161c;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.18);
  --ink: #f2f3f5;
  --ink-2: rgba(242, 243, 245, 0.68);
  --ink-3: rgba(242, 243, 245, 0.44);
  --green: #3ddc84;
  --red: #ff5a67;
  --amber: #f6c04a;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  --radius: 10px;
  --bar: 46px;
  --tabs: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: 1.35rem; line-height: 1.2; }
p { margin: 0 0 0.85em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; border-radius: 4px; }

.up { color: var(--green); }
.down { color: var(--red); }
.flat { color: var(--ink-2); }
.fine { font-size: 0.82rem; color: var(--ink-3); line-height: 1.45; }
.head { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 22px 0 10px; }
.mono { font-family: var(--mono); }

/* ── Buttons and fields ─────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 0.92rem; font-weight: 500;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #0a0b0d; }
.btn.danger { border-color: rgba(255, 90, 103, 0.5); color: var(--red); }
.btn.small { min-height: 36px; padding: 7px 14px; font-size: 0.84rem; }
.btn[disabled] { opacity: 0.45; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 0.8rem; color: var(--ink-3); margin-bottom: 6px; }
.input {
  width: 100%; min-height: 46px; padding: 11px 13px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  color: var(--ink); font: inherit; font-size: 1rem;
}
.input:focus { border-color: rgba(255, 255, 255, 0.45); outline: none; }

.flash { padding: 11px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 0.88rem; margin-bottom: 16px; background: var(--bg-2); }
.flash.err { border-color: rgba(255, 90, 103, 0.5); color: var(--ink); }
.flash.ok { border-color: rgba(61, 220, 132, 0.45); }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.row form { margin: 0; }

/* A select is the same box as a text field; the platform draws its own caret
   inside it, and the page's dark color scheme makes it draw a dark one. */
select.input { padding-right: 34px; }

#order-new { width: 100%; margin-bottom: 4px; }

/* ── Sign-in and the 404 ────────────────────────────────── */

.remote-auth { display: flex; min-height: 100svh; align-items: center; justify-content: center; padding: 24px 18px calc(24px + var(--safe-bottom)); }
.remote-auth .sheet { width: 100%; max-width: 380px; }
.remote-auth .mark { width: 34px; color: var(--ink); margin-bottom: 18px; }
.remote-auth .mark svg { width: 100%; display: block; }
.remote-auth h1 { margin-bottom: 8px; }
.remote-auth .lede { color: var(--ink-2); font-size: 0.94rem; margin-bottom: 22px; }
.remote-auth .btn { width: 100%; }
.remote-auth .fine { margin-top: 20px; }

/* ── The bar ────────────────────────────────────────────── */

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  height: calc(var(--bar) + var(--safe-top));
  padding: var(--safe-top) 14px 0;
  display: flex; align-items: center; gap: 9px;
  background: rgba(6, 7, 10, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.bar .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-3); }
.bar .dot[data-state="live"] { background: var(--green); }
.bar .dot[data-state="warn"] { background: var(--amber); }
.bar .dot[data-state="off"] { background: var(--red); }
.bar .dot[data-state="unknown"] { background: var(--ink-3); }
.bar-text { font-size: 0.84rem; color: var(--ink-2); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-age { font-size: 0.74rem; color: var(--ink-3); flex: none; }

/* ── Pending commands ───────────────────────────────────── */

.pending {
  /* In the flow, not over it: a strip that appears must push the screen down
     rather than cover the first figure on it. */
  position: sticky; z-index: 4;
  top: calc(var(--bar) + var(--safe-top));
  margin: -14px -14px 12px; padding: 9px 14px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.pending-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-2); }
.pending-row.failed { color: var(--red); }
.pending-row.done { color: var(--green); }
.pending-label { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-note { color: var(--ink-3); font-size: 0.78rem; }
.pending-row.failed .pending-note { color: inherit; }

.spin {
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: var(--ink);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }

/* ── Screens ────────────────────────────────────────────── */

.screens {
  padding: calc(var(--bar) + var(--safe-top) + 14px) 14px calc(var(--tabs) + var(--safe-bottom) + 24px);
  max-width: 620px; margin: 0 auto;
}
.screen { display: block; }

.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.panel .head:first-child { margin-top: 0; }
.panel h1 { margin-bottom: 10px; }

.empty { padding: 20px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--ink-2); font-size: 0.9rem; }
.empty b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

.steps { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); font-size: 0.92rem; }
.steps li { margin-bottom: 8px; }

.sas {
  font-family: var(--mono); font-size: 2rem; letter-spacing: 0.14em;
  text-align: center; padding: 20px 10px; margin: 16px 0;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--radius);
  word-break: break-all;
}

/* ── Account summary ────────────────────────────────────── */

.summary { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.sum-main { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.sum-main .v { font-size: 1.85rem; font-weight: 600; letter-spacing: -0.02em; font-family: var(--mono); }
.sum-row { display: flex; gap: 24px; }
.sum-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sum-row .v { font-family: var(--mono); font-size: 0.98rem; font-weight: 600; }
.k { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv .v { font-family: var(--mono); font-size: 0.92rem; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.pill { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 0.86rem; }
.pill b { font-weight: 600; }
.pill span { color: var(--ink-3); font-size: 0.8rem; }
.pill[data-ok="yes"] { border-color: rgba(61, 220, 132, 0.45); }
.pill[data-ok="partly"] { border-color: rgba(246, 192, 74, 0.5); }
.pill[data-ok="no"] { border-color: rgba(255, 90, 103, 0.5); }

/* ── Cards ──────────────────────────────────────────────── */

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

.card {
  display: block; width: 100%; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
button.card { cursor: pointer; }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 3px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }

.sym { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; flex: none; }
.pl { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 0.95rem; font-weight: 600; }
.pl .pct { font-size: 0.8rem; opacity: 0.8; }
.sub { font-family: var(--mono); font-size: 0.79rem; color: var(--ink-3); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last { font-family: var(--mono); font-size: 0.79rem; color: var(--ink-3); flex: none; }
.status { font-size: 0.79rem; color: var(--ink-3); flex: none; }
.reason { font-size: 0.88rem; color: var(--ink-2); margin: 8px 0 0; }

.tag {
  display: inline-block; flex: none; padding: 2px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  border: 1px solid var(--line-2); color: var(--ink-2);
}
.tag.buy, .tag.add { border-color: rgba(61, 220, 132, 0.5); color: var(--green); }
.tag.sell, .tag.close, .tag.trim { border-color: rgba(255, 90, 103, 0.5); color: var(--red); }
.tag.hold { border-color: var(--line-2); color: var(--ink-3); }
.tag.triggered { border-color: rgba(246, 192, 74, 0.5); color: var(--amber); }
.tag.snoozed, .tag.retired { border-color: var(--line); color: var(--ink-3); }

.card.pos .tag { margin-top: 8px; }
.card.alert.seen { opacity: 0.62; }
/* A thesis the member pinned on the PC keeps its star here and nothing else:
   the order the PC sent is the order it is shown in. */
.card.thesis .sym { letter-spacing: 0; }
/* Research in flight: the same card, quieter, because it is not a result yet. */
.card.running { border-style: dashed; }
.card.running .sub { display: flex; align-items: center; gap: 6px; font-family: var(--sans); }
/* A signal's plan is the line the member came for. It wraps onto a second row
   rather than losing its target off the right edge. */
.plan { font-family: var(--mono); font-size: 0.76rem; line-height: 1.5; color: var(--ink-3); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* A line of the PC's prose with its standing beside it. Long text wraps rather
   than being clipped: half a falsifier is worse than none. */
.note { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.note:last-child { border-bottom: 0; }
.note-text { font-size: 0.86rem; color: var(--ink-2); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.note-tail { font-size: 0.75rem; color: var(--ink-3); flex: none; letter-spacing: 0.04em; }

.row-line { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.row-line:last-child { border-bottom: 0; }
.row-line .sub { text-align: left; }

.leg { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.84rem; }
.leg:last-child { border-bottom: 0; }
.leg-desc { font-family: var(--mono); font-size: 0.78rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-qty, .leg-px { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); flex: none; }

/* ── Ask ────────────────────────────────────────────────── */

#screen-ask { display: flex; flex-direction: column; min-height: calc(100svh - var(--bar) - var(--tabs) - var(--safe-top) - var(--safe-bottom) - 40px); }
.chat { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.bubble { max-width: 92%; padding: 11px 14px; border-radius: 14px; font-size: 0.94rem; }
.bubble p { margin: 0 0 0.7em; }
.bubble p:last-child { margin: 0; }
.bubble.you { align-self: flex-end; background: var(--bg-3); border: 1px solid var(--line-2); border-bottom-right-radius: 4px; }
.bubble.jt { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.waiting { display: flex; align-items: center; }
.chat-status { font-size: 0.8rem; color: var(--ink-3); padding: 4px 2px 10px; font-style: italic; }
.composer { position: sticky; bottom: 0; background: var(--bg); padding-top: 8px; }
.composer textarea {
  width: 100%; padding: 11px 13px; resize: none;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  color: var(--ink); font: inherit; font-size: 1rem;
}
.composer textarea:focus { border-color: rgba(255, 255, 255, 0.45); outline: none; }
.composer-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.composer-buttons { display: flex; gap: 8px; flex: none; }
.locked { padding: 20px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--ink-2); font-size: 0.9rem; }

/* ── Tabs ───────────────────────────────────────────────── */

/* Six tabs on a 375 px phone: 62 px each. The label is small enough that the
   longest of them ("Positions") sits inside its column with room around it,
   and it is clipped rather than wrapped if a host's font runs wide. */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  height: calc(var(--tabs) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: rgba(6, 7, 10, 0.96); border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.tab {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; padding: 0 2px;
  background: none; border: 0; color: var(--ink-3);
  font: inherit; font-size: 0.7rem; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tab > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab.on { color: var(--ink); }
.tab .badge {
  position: absolute; top: 9px; left: 50%; margin-left: 12px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #0a0b0d;
  font-size: 0.66rem; font-weight: 700; font-style: normal; line-height: 16px; text-align: center;
}

/* ── Sheets and the toast ───────────────────────────────── */

.sheet-back {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0.6); padding: 0;
}
.pin, .detail, .scan, .reader {
  width: 100%; max-width: 560px;
  background: var(--bg-2); border-top: 1px solid var(--line-2);
  border-radius: 16px 16px 0 0;
  padding: 22px 18px calc(22px + var(--safe-bottom));
  max-height: 86svh; overflow-y: auto;
}
.pin h2, .detail h2, .scan h2, .reader h2 { font-size: 1.1rem; margin-bottom: 8px; }
/* Up to 32 letters and digits (§2.7): spaced enough to count, not so wide that
   a long PIN runs off a 375 px sheet. */
.pin-input { font-family: var(--mono); font-size: 1.2rem; letter-spacing: 0.16em; text-align: center; margin-top: 14px; }
.pin .row, .detail .row, .scan .row { margin-top: 18px; }
.pin .row .btn, .detail .row .btn, .scan .row .btn { flex: 1 1 auto; }
/* The camera view: square, filled, on a black ground so the frame edges read. */
.scan video {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  margin-top: 12px; border-radius: 12px; background: #000;
}
.scan #scan-note { margin-top: 12px; }
.detail #detail-close { width: 100%; margin-top: 14px; }

/* ── The reader ─────────────────────────────────────────── */
/* A dossier can run to thousands of words. The sheet itself does not scroll —
   the title and the way back stay where the thumb left them — and the document
   scrolls inside it. Nothing may widen the page: a long unbroken token breaks
   rather than pushing the body sideways. */
.reader { display: flex; flex-direction: column; overflow: hidden; }
.reader h2 { flex: none; }
.doc {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: 4px;
  font-size: 0.94rem; color: var(--ink-2); overflow-wrap: anywhere;
}
.doc p { margin: 0 0 0.85em; }
.doc h3 { font-size: 1rem; color: var(--ink); margin: 18px 0 8px; }
.doc h4 { font-size: 0.88rem; color: var(--ink); margin: 16px 0 6px; }
.doc h3:first-child, .doc h4:first-child { margin-top: 0; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc-list { margin: 0 0 0.85em; padding-left: 20px; }
.doc-list li { margin-bottom: 6px; }
.reader #reader-close { flex: none; width: 100%; margin-top: 14px; }

/* ── The chart ──────────────────────────────────────────── */
/* The sheet is the chart: a header that says the last price, the desk chart's
   timeframe buttons, the canvas, and one line under it for whatever candle was
   tapped. The canvas is sized in CSS pixels and drawn in device pixels, so a
   hairline stays a hairline on a 3× screen, and it takes most of a phone's
   height so the candles have room to move. */

.chart-panel {
  width: 100%; max-width: 560px;
  background: var(--bg-2); border-top: 1px solid var(--line-2);
  border-radius: 16px 16px 0 0;
  padding: 18px 14px calc(18px + var(--safe-bottom));
  max-height: 92svh; overflow-y: auto;
}
.chart-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chart-head .sym { font-size: 1.15rem; }
.chart-last { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; }
.chart-change { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-3); }
.chart-canvas { margin-top: 10px; height: clamp(260px, 44svh, 420px); }
.chart-canvas canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
#chart-readout { font-family: var(--mono); font-size: 0.76rem; margin-top: 10px; min-height: 1.2em; overflow-wrap: anywhere; }
.chart-panel #chart-close { width: 100%; margin-top: 14px; }
.chart-panel .row .btn { flex: 1 1 auto; }

/* Ten buttons share one row on a phone; a screen too narrow for them scrolls
   the row sideways rather than squeezing a label. */
.chips {
  display: flex; gap: 3px; margin-top: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 1 0 0; min-width: 31px; min-height: 34px; padding: 6px 0;
  white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: transparent; color: var(--ink-3);
  font: inherit; font-size: 0.72rem; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.chip.on { background: var(--bg-3); border-color: rgba(255, 255, 255, 0.45); color: var(--ink); }

/* ── The watchlist, price alerts and routines ───────────── */

.card.watch .pl { font-size: 0.9rem; font-weight: 600; }
.card.watch .pl .pct { font-size: 0.76rem; }
.card.palert .sub, .card.routine .sub { font-family: var(--mono); }
.card.routine .card-foot { gap: 8px; }
.card.routine .card-foot .btn { margin-left: auto; }

/* The routine switch: a real checkbox, moved off screen but still the thing a
   screen reader and a keyboard find, with the track drawn beside it. */
.switch { position: relative; display: inline-flex; align-items: center; flex: none; }
.switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.switch-track {
  display: block; width: 42px; height: 25px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--bg-3); position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 50%; background: var(--ink-3);
  transition: transform 0.15s ease, background 0.15s ease;
}
.switch input:checked + .switch-track { background: rgba(61, 220, 132, 0.28); border-color: rgba(61, 220, 132, 0.55); }
.switch input:checked + .switch-track::after { transform: translateX(17px); background: var(--green); }
.switch input:focus-visible + .switch-track { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-track::after { transition: none; }
}

/* ── Settings ───────────────────────────────────────────── */
/* JTrade's own Settings tabs (§14): a list of sections, then a section's groups
   as panels of fields. Labels only. A field is its label and its control on one
   line when the control is small (a switch, a Set/Not set with Change), and its
   label over its control when the control needs the width. */

.card.entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.list .card.entry { margin-bottom: 0; }
.entry-go { color: var(--ink-3); font-size: 1.1rem; line-height: 1; flex: none; }

.settings-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.settings-top h1 { flex: 1 1 auto; min-width: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.settings-top .btn { flex: none; }
.settings-groups .head:first-child { margin-top: 0; }
.settings-group { padding-top: 4px; padding-bottom: 4px; }

.setting { padding: 12px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.setting-label { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; color: var(--ink); overflow-wrap: anywhere; }
.setting-value { flex: 0 1 auto; min-width: 0; font-family: var(--mono); font-size: 0.86rem; color: var(--ink-2); text-align: right; overflow-wrap: anywhere; }
.setting-value.multi { margin: 8px 0 0; text-align: left; white-space: pre-wrap; }
.setting > .input, .setting-number, .setting-secret { margin-top: 8px; }
.setting-number { display: flex; align-items: center; gap: 10px; }
.setting-number .input { flex: 1 1 auto; min-width: 0; }
.setting-unit { flex: none; font-family: var(--mono); font-size: 0.84rem; color: var(--ink-3); }
.setting textarea.input { min-height: 96px; resize: vertical; line-height: 1.45; }
.setting-secret .row { margin-top: 10px; }
.setting-secret .row .btn { flex: 1 1 auto; }
.setting .setting-error, .setting .setting-note { margin: 8px 0 0; }

.toast {
  position: fixed; left: 14px; right: 14px; z-index: 30;
  bottom: calc(var(--tabs) + var(--safe-bottom) + 14px);
  padding: 12px 15px; border-radius: var(--radius);
  background: var(--bg-3); border: 1px solid var(--line-2);
  font-size: 0.88rem; color: var(--ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}