/* orcha — sonar console at night.
 * One typeface (IBM Plex Mono, vendored — no third-party fetches), near-black
 * with a deep-water undertone, hairline rules, glacier-blue accent, color
 * only where it carries meaning.
 */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(plexmono-400.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(plexmono-500.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(plexmono-600.woff2) format("woff2");
}

:root {
  --bg:      #0a0d11;
  --bg-2:    #0e1318;
  --panel:   #11171d;
  --line:    #1f2a35;
  --line-2:  #2b3c4b;
  --text:    #d2dde6;
  --muted:   #8799a6;  /* AA on --bg at small sizes */
  --faint:   #576773;  /* decorative / non-essential only */
  --phos:    #7cc7e8;
  --phos-dim:#31566b;
  --busy:    #7ec998;  /* green = running fine; accent blue stays orcha's */
  --wait:    #e6b35a;
  --err:     #e57a64;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* safe-area-aware horizontal gutter (landscape notch) */
  --gx-l: max(.95rem, env(safe-area-inset-left));
  --gx-r: max(.95rem, env(safe-area-inset-right));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { height: 100%; }
body {
  height: var(--vh, 100dvh);
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  background-image: radial-gradient(ellipse 120% 60% at 50% -10%, #0f161e 0%, var(--bg) 60%);
  color: var(--text);
  font: 400 14.5px/1.55 var(--mono);
}

::selection { background: var(--phos-dim); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  min-height: 44px;
}
:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }

/* ---------- header ---------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem var(--gx-r) .35rem var(--gx-l);
  padding-top: max(.35rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.mark { width: 1.15rem; height: 1.15rem; align-self: center; }
.om-body { fill: #06090c; stroke: color-mix(in srgb, var(--phos) 45%, transparent); stroke-width: .55; }
.om-white { fill: #e8f2f7; }
.hint-mark .mark { width: 2rem; height: 2rem; opacity: .6; }
.mark-big { animation: breathe 3s ease-in-out infinite; }
.mark-big .mark { width: 2.6rem; height: 2.6rem; }
.word { font-size: 1rem; }
.conn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: .35rem;
  font-size: .78rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .06em;
}
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faint);
  transition: background .4s ease;
}
.dot.online   { background: var(--phos); box-shadow: 0 0 6px color-mix(in srgb, var(--phos) 55%, transparent); }
.dot.peerless { background: var(--wait); }
.dot.offline  { background: var(--err); }

nav { display: flex; gap: .15rem; }
.tab {
  position: relative;
  padding: .35rem .7rem;
  color: var(--muted);
  letter-spacing: .06em;
  border-radius: 3px;
}
.tab.active { color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.attn {
  position: absolute;
  top: 8px; right: 2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wait);
}
.attn.error-ish { background: var(--err); }

/* ---------- banner ---------- */
.banner {
  padding: .45rem var(--gx-r) .45rem var(--gx-l);
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--wait);
  background: color-mix(in srgb, var(--wait) 8%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--wait) 25%, var(--bg));
}

/* ---------- attention cards ---------- */
#attention {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.acard {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap; /* header line first; actions flow to a second row */
  align-items: center;
  gap: .45rem .7rem;
  padding: .55rem var(--gx-r) .55rem var(--gx-l);
  background: color-mix(in srgb, var(--wait) 9%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--wait) 30%, var(--bg));
  animation: rise .18s ease both;
}
.acard.error-ish {
  background: color-mix(in srgb, var(--err) 9%, var(--bg));
  border-bottom-color: color-mix(in srgb, var(--err) 30%, var(--bg));
}
.acard .what { flex: 1 1 100%; min-width: 0; }
.acard .who {
  font-size: .8rem;
  font-weight: 600;
  color: var(--wait);
  letter-spacing: .04em;
}
.acard.error-ish .who { color: var(--err); }
.acard .excerpt {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acard button { font-size: .78rem; }

/* ---------- layout ---------- */
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- transcript ---------- */
#messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem var(--gx-r) .4rem var(--gx-l);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  user-select: none;
  -webkit-user-select: none;
}
.msg { animation: rise .18s ease both; max-width: 100%; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.msg.you {
  color: var(--phos);
  white-space: pre-wrap;
  word-break: break-word;
  padding-left: 2ch;
  text-indent: -2ch; /* hanging indent: wrapped lines align under the text */
}
.msg.you::before { content: "❯ "; color: var(--phos-dim); }

.msg.orcha {
  position: relative;
  padding-left: .85rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.orcha::before {
  content: "";
  position: absolute;
  left: 0; top: .2rem; bottom: .2rem;
  width: 2px;
  background: var(--phos-dim);
  border-radius: 1px;
}

.msg.sys, .msg.err {
  align-self: center;
  max-width: 92%;
  padding: .15rem .6rem;
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.msg.err { color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, var(--bg)); }

.msg.thinking { color: var(--muted); padding-left: .85rem; position: relative; }
.msg.thinking::before {
  content: "";
  position: absolute;
  left: 0; top: .2rem; bottom: .2rem;
  width: 2px;
  background: var(--phos-dim);
}
.msg.thinking .caret {
  display: inline-block;
  width: .55em; height: 1.05em;
  vertical-align: text-bottom;
  background: var(--phos-dim);
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

.timestamp {
  align-self: center;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--muted);
}

/* ---------- empty-state hint (flex child of #messages) ---------- */
.hint {
  margin: auto; /* centers within the scroll area, keyboard-safe */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  padding: 1.5rem;
  text-align: center;
}
.hint-mark { color: var(--phos-dim); font-size: 1.6rem; }
.hint-title { color: var(--muted); letter-spacing: .12em; font-size: .8rem; }
.chips { display: flex; flex-direction: column; gap: .55rem; margin-top: .4rem; }
.chip {
  padding: .55rem 1rem;
  font-size: .82rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  letter-spacing: .02em;
  transition: border-color .15s ease;
}
.chip:active, .chip:hover { border-color: var(--phos-dim); }
.hint-tip { margin-top: .6rem; font-size: .72rem; letter-spacing: .06em; color: var(--faint); }

/* ---------- speech bar ---------- */
.speech-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem var(--gx-r) .3rem var(--gx-l);
  border-top: 1px solid var(--phos-dim);
  background: color-mix(in srgb, var(--phos) 6%, var(--bg));
  animation: rise .12s ease both;
}
.speech-label {
  flex: 1;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--phos);
}

/* ---------- composer ---------- */
#composer {
  display: flex;
  gap: .55rem;
  padding: .7rem var(--gx-r) .7rem var(--gx-l);
  padding-bottom: max(.7rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
#input {
  flex: 1;
  min-width: 0;
  padding: .6rem .8rem;
  font: 400 16px/1.4 var(--mono); /* 16px stops iOS auto-zoom */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  caret-color: var(--phos);
}
#input::placeholder { color: var(--faint); }
#input:focus { outline: none; border-color: var(--phos-dim); }
#send {
  width: 48px;
  flex: none;
  font-size: 1.05rem;
  color: var(--bg);
  background: var(--phos);
  border-radius: 3px;
  transition: opacity .15s ease;
}
#send:disabled { opacity: .35; }
#mic {
  width: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border: 1px solid var(--phos-dim);
  border-radius: 3px;
  transition: color .15s ease, border-color .15s ease;
}
#mic.rec {
  color: var(--err);
  border-color: var(--err);
  animation: breathe 1.2s ease-in-out infinite;
}
#ttsToggle {
  width: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
}
#ttsToggle.on { color: var(--phos); border-color: var(--phos-dim); }

/* inline button icons: filled body + stroked detail, both currentColor */
.ic { width: 20px; height: 20px; fill: currentColor; }
.ic .st { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---------- fleet ---------- */
.fleet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .45rem var(--gx-r) .35rem var(--gx-l);
}
.fleet-summary { font-size: .74rem; letter-spacing: .08em; color: var(--muted); }
.ghost {
  padding: .3rem .7rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: color .15s ease, border-color .15s ease;
}
.ghost:hover, .ghost:active { color: var(--text); border-color: var(--line-2); }

.fleet { overflow-y: auto; padding: 0 0 max(.8rem, env(safe-area-inset-bottom)); }
.frow {
  width: 100%;
  display: block;
  text-align: left;
  padding: .65rem var(--gx-r) .65rem var(--gx-l);
  border-bottom: 1px solid var(--line);
  animation: rise .18s ease both;
  user-select: none;
  -webkit-user-select: none;
}
.frow:active { background: var(--bg-2); }
.frow.waiting-for-input { box-shadow: inset 3px 0 var(--wait); }
.frow.error-ish { box-shadow: inset 3px 0 var(--err); }
.frow .top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}
.frow .name {
  font-weight: 600;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frow .meta {
  margin-top: .12rem;
  font-size: .76rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .72rem;
  letter-spacing: .08em;
}
.state .sdot { width: 6px; height: 6px; border-radius: 50%; }
.state.busy   { color: var(--busy); }
.state.busy .sdot { background: var(--busy); animation: breathe 1.6s ease-in-out infinite; }
.state.waiting-for-input { color: var(--wait); }
.state.waiting-for-input .sdot { background: var(--wait); animation: breathe 1.1s ease-in-out infinite; }
.state.error-ish { color: var(--err); }
.state.error-ish .sdot { background: var(--err); }
.state.idle, .state.unknown { color: var(--muted); }
.state.idle .sdot, .state.unknown .sdot { background: var(--faint); }
@keyframes breathe { 50% { opacity: .35; } }

.fleet-empty {
  padding: 2.2rem .95rem;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--muted);
}

/* ---------- confirm dialog ---------- */
dialog {
  width: min(34rem, calc(100vw - 2rem));
  border: 1px solid color-mix(in srgb, var(--wait) 35%, var(--line));
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
  animation: rise .14s ease both;
}
dialog::backdrop { background: rgba(4, 6, 4, .72); backdrop-filter: blur(2px); }
.confirm-head {
  padding: .7rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wait);
  border-bottom: 1px solid var(--line);
}
.warn-mark { margin-right: .2rem; }
dialog pre {
  margin: 0;
  padding: .8rem .9rem;
  max-height: 45vh;
  overflow: auto;
  font: 400 12.5px/1.5 var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
dialog .row {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: .7rem .9rem;
  border-top: 1px solid var(--line);
}
.danger {
  padding: .3rem 1.1rem;
  font-size: .82rem;
  letter-spacing: .04em;
  color: #1a0d09;
  background: var(--err);
  border-radius: 3px;
  font-weight: 600;
}

/* ---------- pane sheet ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 4, .55);
  z-index: 15;
  animation: fade .18s ease both;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 80dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .5);
  animation: slide-up .22s cubic-bezier(.3, .9, .3, 1) both;
  z-index: 20;
  touch-action: pan-y;
}
@keyframes slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet::before {
  /* grab handle */
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 34px; height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--line-2);
}
.sheet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .8rem var(--gx-r) .45rem var(--gx-l);
  border-bottom: 1px solid var(--line);
}
.sheet-title {
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-actions { display: flex; gap: .45rem; flex: none; }
.pane {
  flex: 1;
  margin: 0;
  padding: .8rem var(--gx-r) .8rem var(--gx-l);
  overflow: auto;
  font: 400 11.5px/1.45 var(--mono);
  color: #b9c4b2;
  white-space: pre;
}
.pane-options {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .55rem var(--gx-r) 0 var(--gx-l);
  border-top: 1px solid var(--line);
}
.opt {
  padding: .4rem .85rem;
  min-height: 40px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--phos-dim);
  border-radius: 3px;
}
.opt:active { background: var(--phos-dim); }
.acard .opts { display: flex; gap: .4rem; flex: 0 1 auto; min-width: 0; }
.acard .opts .opt { flex: 0 1 auto; min-width: 0; }
.acard .opt { min-height: 38px; padding: .3rem .7rem; }
/* actions row: dialog answers left, view/dismiss right, one shared height.
 * NB: the button is .open, not .view — .view is the main layout class. */
.acard .open { margin-left: auto; }
.acard .ghost { min-height: 38px; }

.keyrow {
  display: flex;
  gap: .3rem;
  padding: .5rem var(--gx-r) 0 var(--gx-l);
  overflow-x: auto;
}
.key {
  /* stretch to fill the row so all 8 fit a 412px phone; tiny screens scroll */
  flex: 1 0 auto;
  min-width: 40px;
  min-height: 40px;
  padding: .3rem .5rem;
  font-size: .82rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.key:active { color: var(--text); border-color: var(--line-2); }

#paneComposer {
  display: flex;
  gap: .55rem;
  padding: .55rem var(--gx-r) .55rem var(--gx-l);
  padding-bottom: max(.55rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
#paneInput {
  flex: 1;
  min-width: 0;
  padding: .5rem .7rem;
  font: 400 16px/1.4 var(--mono);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  caret-color: var(--phos);
  resize: none;
  max-height: 6rem;
  overflow-y: auto;
}
#paneInput::placeholder { color: var(--faint); }
#paneInput:focus { outline: none; border-color: var(--phos-dim); }
#paneMic {
  width: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border: 1px solid var(--phos-dim);
  border-radius: 3px;
}
#paneMic.rec { color: var(--err); border-color: var(--err); animation: breathe 1.2s ease-in-out infinite; }
#paneSend {
  width: 44px;
  flex: none;
  color: var(--bg);
  background: var(--phos);
  border-radius: 3px;
}

/* ---------- unpaired ---------- */
.unpaired {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 2rem;
  text-align: center;
  background: var(--bg);
  z-index: 30;
  font-size: .85rem;
  color: var(--muted);
}

.unpaired-title { font-size: 1.1rem; font-weight: 600; letter-spacing: .25em; color: var(--text); }
.unpaired p { margin: .1rem 0; }
.unpaired code {
  margin: .5rem 0;
  padding: .5rem 1.1rem;
  color: var(--phos);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
}
#pasteForm { display: flex; gap: .5rem; margin-top: .4rem; width: min(26rem, 86vw); }
#pasteInput {
  flex: 1;
  min-width: 0;
  padding: .5rem .7rem;
  font: 400 16px/1.4 var(--mono);
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
}
#pasteInput::placeholder { color: var(--faint); }

/* ---------- toast ----------
 * Top placement: the bottom edge is contested (composer, pane-sheet keyrow,
 * soft keyboard); under the header nothing ever overlaps it. */
#toast {
  position: fixed;
  top: calc(max(.35rem, env(safe-area-inset-top)) + 3.1rem);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 3rem);
  padding: .5rem .95rem;
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  box-shadow: 0 4px 18px rgb(0 0 0 / .45);
  z-index: 40;
  animation: drop .15s ease both;
}
@keyframes drop { from { transform: translate(-50%, -8px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* ---------- context menu ---------- */
.ctx-menu {
  position: fixed;
  z-index: 35;
  min-width: 140px;
  max-width: calc(100vw - 1rem);
  padding: .35rem 0;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgb(0 0 0 / .5);
  animation: rise .12s ease both;
}
.ctx-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .55rem .9rem;
  font-size: .82rem;
  color: var(--text);
}
.ctx-item:active { background: var(--phos-dim); }

/* screenshot mode (?still=1): freeze all motion for pixel-stable captures */
.still *, .still *::before, .still *::after { animation: none !important; transition: none !important; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .msg, .sheet, dialog, .frow, .scrim { animation: none !important; }
  .sdot, .mark.big, .msg.thinking .caret { animation: none !important; }
  .dot.online { box-shadow: none; }
}

/* ---------- wider screens: keep it a column, centered ---------- */
@media (min-width: 720px) {
  #messages, #composer, .fleet, .fleet-head, .banner {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  body { font-size: 15px; }
}

.voice-list { display: flex; flex-direction: column; gap: .4rem; padding: .8rem .9rem; max-height: 55vh; overflow-y: auto; }
.voice-list .opt { text-align: left; }
.voice-list .opt.current { border-color: var(--phos); color: var(--phos); }

/* ---------- settings ---------- */
.settings { display: flex; flex-direction: column; gap: 1rem; min-width: min(19rem, 78vw); padding: .8rem .9rem; }
.set-h { font-size: .7rem; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.set-group { display: flex; flex-direction: column; gap: .45rem; position: relative; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; font-size: .85rem; min-height: 40px; }
.set-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.set-opts .opt.current { border-color: var(--phos); color: var(--phos); }
.pill { min-width: 58px; padding: .3rem .7rem; min-height: 36px; font-size: .78rem;
  color: var(--muted); border: 1px solid var(--line); border-radius: 3px; }
.pill.on { color: var(--phos); border-color: var(--phos-dim); }
.set-note { font-size: .72rem; color: var(--faint); }
.set-help {
  width: 32px; height: 32px; min-height: 32px;
  font-size: .72rem; line-height: 30px; text-align: center;
  color: var(--muted); border: 1px solid var(--line); border-radius: 50%;
  padding: 0; flex: none;
}
#settingsTitle { color: var(--text); }
.set-tip {
  position: absolute;
  left: 0; right: 0;
  z-index: 5;
  margin-top: 2rem;
  padding: .5rem .7rem;
  font-size: .72rem;
  line-height: 1.4;
  text-transform: none;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  box-shadow: 0 4px 16px rgb(0 0 0 / .5);
  animation: rise .12s ease both;
}

.frow .sum {
  font-size: .72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: .1rem;
}