/* Caliper — clean, airy, mobile-first dark UI for in-car use. */

:root {
  --bg: #0b0b0c;
  --surface: #141416;
  --surface-2: #1b1b1e;
  --text: #f4f4f5;
  --muted: #8b8b92;
  --hairline: rgba(255, 255, 255, 0.08);
  --accent: #e5301f;
  --accent-soft: rgba(229, 48, 31, 0.16);
  --accent-hot: #ff4a35;
  --good: #35c76a;
  --warn: #f0a83a;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
  --bar-h: 52px;
  --tab-h: 60px;
  --pad: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    radial-gradient(ellipse 42% 30% at 12% 8%, var(--accent-soft), transparent 55%);
  background-size: 24px 24px, 24px 24px, auto;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; cursor: pointer; }

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Top bar */
.topbar {
  height: var(--bar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--pad);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-back {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text);
  padding: 0 6px 3px;
  margin-left: -6px;
}

.brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  align-self: center;
}

.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand-by { color: var(--muted); font-size: 11px; }

.topbar-right { margin-left: auto; }

.unit-toggle {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 10px;
  user-select: none;
}

/* View area */
.view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--pad);
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
}

/* Tab bar */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(11, 11, 12, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  z-index: 10;
}

.tab {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.tab-ic { font-size: 18px; line-height: 1; }
.tab.is-active { color: var(--text); }
.tab.is-active .tab-ic { color: var(--accent); }

/* Home grid */
.home-hero { margin: 4px 0 18px; }
.home-hero h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }
.home-hero p { margin: 0; color: var(--muted); font-size: 13px; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tool-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}
.tool-card:active { background: var(--surface-2); }
.tool-card.is-hero { grid-column: 1 / -1; border-color: var(--accent); background: var(--accent-soft); min-height: 96px; }
.tool-card .tc-ic { font-size: 24px; color: var(--accent); }
.tool-card .tc-title { font-weight: 650; font-size: 15px; }
.tool-card .tc-desc { color: var(--muted); font-size: 12px; line-height: 1.35; }

.trust-note {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}

/* Generic tool layout */
.tool { display: flex; flex-direction: column; gap: 16px; }
.tool-head h2 { margin: 0 0 2px; font-size: 20px; letter-spacing: -0.01em; }
.tool-head p { margin: 0; color: var(--muted); font-size: 12px; }

/* Big readout */
.readout {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
}
.readout .big {
  font-family: var(--mono);
  font-size: clamp(56px, 22vw, 108px);
  font-weight: 700;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.readout .big small { font-size: 0.28em; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.readout .sub { margin-top: 6px; color: var(--muted); font-size: 13px; font-family: var(--mono); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
}
.stat .v { font-family: var(--mono); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: 11px; margin-top: 3px; }

/* Buttons */
.btn {
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 650;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-block { width: 100%; }
.btn-danger { color: #ff7a6b; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* Splits list */
.splits { display: flex; flex-direction: column; gap: 8px; }
.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 16px;
}
.split.is-hit { border-color: var(--accent); background: var(--accent-soft); }
.split .sp-label { font-weight: 600; }
.split .sp-time { font-family: var(--mono); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.split .sp-time.pending { color: var(--muted); }

/* G-meter canvas */
.gmeter-wrap { display: grid; place-items: center; }
.gmeter-canvas {
  width: min(78vw, 320px);
  height: min(78vw, 320px);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 24px;
}

/* Status pill */
.status {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}
.status.err { color: #ff7a6b; }
.status.ok { color: var(--good); }

.gps-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 6px; vertical-align: middle; }
.gps-dot.weak { background: var(--warn); }
.gps-dot.strong { background: var(--good); }

/* Logbook */
.log-list { display: flex; flex-direction: column; gap: 10px; }
.log-item {
  text-align: left;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.log-item:active { background: var(--surface-2); }
.log-item .li-date { font-size: 12px; color: var(--muted); }
.log-item .li-headline { font-family: var(--mono); font-weight: 700; font-size: 17px; margin-top: 2px; }
.log-item .li-arrow { color: var(--muted); font-size: 20px; }

.empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 16px;
  font-size: 14px;
}

.hint {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  padding: 12px 12px;
  font-family: var(--font);
  -webkit-appearance: none;
  appearance: none;
}
.input:focus { outline: none; border-color: var(--accent); }
select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238b8b92' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
input[type="range"].input { padding: 10px 0; background: transparent; border: none; accent-color: var(--accent); }

.tag {
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 1px 7px;
}

.card-lite { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.card-lite-head { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rho { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }

.adv { border: 1px solid var(--hairline); border-radius: 12px; padding: 0 14px; background: var(--surface); }
.adv summary { cursor: pointer; padding: 13px 0; font-size: 13px; color: var(--muted); list-style: none; }
.adv summary::-webkit-details-marker { display: none; }
.adv summary::before { content: "＋ "; color: var(--accent); }
.adv[open] summary::before { content: "－ "; }
.adv[open] { padding-bottom: 14px; }

.spl-canvas, .dyno-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 72 / 22;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.dyno-canvas { aspect-ratio: 72 / 32; }

.legend { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: var(--muted); margin-top: -4px; }
.legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.dtable { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--mono); }
.dtable th { text-align: right; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
.dtable th:first-child, .dtable td:first-child { text-align: left; }
.dtable td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.v-good { color: var(--good); }
.v-bad { color: #ff7a6b; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-sm { margin-top: -4px; }
.chip {
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--mono);
}
.chips-sm .chip { padding: 6px 12px; font-size: 12px; }
.chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

/* Step-by-step + advanced notes */
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.steps b { color: var(--text); }
.adv-note { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0 0 12px; }

/* Install button + instruction sheet */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.install-btn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 6px 13px;
}
.install-sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-end; z-index: 50; }
.install-card {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.install-head { font-size: 18px; font-weight: 700; }
.install-sheet ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.4; }
.install-sheet ol b { color: var(--text); }
.install-note { color: var(--muted); font-size: 12px; margin: 0; }
.ios-share { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--muted); border-radius: 5px; vertical-align: middle; }

/* ============ Drag Timer — glanceable, sunlight-readable ============ */
.drag-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sun-toggle { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--surface); font-size: 20px; color: var(--text); flex: 0 0 auto; }

.drag-speed { background: var(--surface); border: 1px solid var(--hairline); border-radius: 22px; padding: 24px 16px 20px; text-align: center; }
.ds-num { font-family: var(--mono); font-weight: 800; font-size: clamp(84px, 32vw, 168px); line-height: 0.88; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ds-unit { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; }
.ds-status { margin-top: 14px; font-family: var(--mono); font-size: 14px; color: var(--muted); min-height: 18px; }
.ds-status.ok { color: var(--good); }
.ds-status.err { color: #ff7a6b; }

.drag-splits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drag-tile { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.dt-label { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.dt-time { font-family: var(--mono); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.drag-tile.hit { border-color: var(--good); background: rgba(53, 199, 106, 0.12); }
.drag-tile.hit .dt-time { color: var(--good); }

.drag-cta { width: 100%; border-radius: 16px; padding: 20px; font-size: 20px; font-weight: 800; letter-spacing: 0.04em; border: 2px solid transparent; text-transform: uppercase; font-family: var(--mono); }
.drag-cta:active { filter: brightness(0.92); }
.drag-cta.go { background: var(--good); color: #04240f; }
.drag-cta.stop { background: var(--warn); color: #2a1c00; }
.drag-cta.ghost { background: transparent; border-color: var(--hairline); color: var(--text); }
.btn-row .drag-cta { flex: 1; }

/* Sunlight mode — bright panels + black text for direct daylight */
.drag.sun .drag-speed, .drag.sun .drag-tile { background: #ffffff; border-color: #000; color: #000; }
.drag.sun .ds-unit { color: #444; }
.drag.sun .ds-status { color: #000; }
.drag.sun .ds-status.ok { color: #0a7a33; }
.drag.sun .ds-status.err { color: #b00020; }
.drag.sun .dt-label { color: #444; }
.drag.sun .dt-time { color: #000; }
.drag.sun .drag-tile.hit { background: #0a7a33; border-color: #0a7a33; }
.drag.sun .drag-tile.hit .dt-label { color: #d6ffe4; }
.drag.sun .drag-tile.hit .dt-time { color: #fff; }
.drag.sun .sun-toggle { background: #fff; color: #000; border-color: #000; }
.drag.sun .drag-cta.go { background: #0a7a33; color: #fff; }
.drag.sun .drag-cta.stop { background: #b25e00; color: #fff; }
.drag.sun .drag-cta.ghost { background: #fff; color: #000; border-color: #000; }
.drag.sun .drag-hint { background: #fff; color: #111; border-left-color: #0a7a33; }
.drag.sun .drag-hint b { color: #000; }

/* ============ RoadDyno — concise setup + pinned action bar ============ */
.dy-lead { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 2px 2px 0; }

.dy-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 2px 14px; }
.dy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; }
.dy-row-l { font-size: 14px; font-weight: 600; }
.dy-row-v { color: var(--muted); font-size: 13px; font-family: var(--mono); }
.dy-hairline { height: 1px; background: var(--hairline); margin: 0 -14px; }
.dy-inline { display: flex; align-items: center; gap: 7px; }
.dy-plus { color: var(--muted); font-size: 15px; }
.dy-unit { color: var(--muted); font-size: 13px; }
.input-sm { width: 74px; padding: 9px 8px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.input-auto { width: auto; min-width: 156px; padding-top: 9px; padding-bottom: 9px; }

.dy-recap { color: var(--muted); font-size: 12.5px; font-family: var(--mono); text-align: center; }
.dy-glive { text-align: center; margin-top: -4px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dy-glive #dyG { font-size: 26px; font-weight: 700; color: var(--text); }
.dy-gunit { color: var(--muted); font-size: 14px; }

.dy-guide { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; margin-top: 10px; }
.dy-guide-h { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.dy-guide-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.dy-guide-steps li { font-size: 14px; line-height: 1.5; color: var(--muted); }
.dy-guide-steps b { color: var(--text); font-weight: 700; }

/* Pinned Start/Stop bar — always reachable while the setup scrolls above it */
.dyno-bar {
  position: sticky;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px);
  z-index: 6;
  margin: 8px calc(-1 * var(--pad)) 0;
  padding: 10px var(--pad);
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
.dy-go { background: var(--good); border-color: var(--good); color: #04240f; }
.dy-go:disabled { background: var(--surface-2); border-color: var(--hairline); color: var(--muted); }
.dy-stop { background: var(--warn); border-color: var(--warn); color: #2a1c00; }

/* ============ Noise Doctor — acoustic diagnosis ============ */
.nd-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nd-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--good);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.nd-ai-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
}

.nd-note {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.nd-progress { display: flex; flex-direction: column; gap: 8px; }
.nd-progress[hidden] { display: none; }
.nd-progress-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.nd-bar { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hairline); overflow: hidden; }
.nd-bar-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.08s linear; }
.nd-progress-hint { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }

.nd-report { display: flex; flex-direction: column; gap: 14px; }

.nd-engine { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nd-engine .input-sm { width: 100%; text-align: left; }
.nd-caveat { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }

.nd-list { display: flex; flex-direction: column; gap: 10px; }
.nd-item { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.nd-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nd-item-label { font-weight: 650; font-size: 14px; }
.nd-evidence { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.nd-check { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.nd-check b { color: var(--text); }
.tag-warn { color: var(--warn); border-color: var(--warn); }

.nd-deep { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.nd-deep-out:empty { display: none; }
.nd-deep-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* ============ Tone Compare / Belt / Road Hum ============ */
.tc-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tc-slot {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tc-slot-lab { font-size: 11px; color: var(--muted); font-family: var(--mono); letter-spacing: 0.02em; }
.tc-slot-val { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.tc-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-chip {
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.tc-bands { display: flex; flex-direction: column; gap: 10px; }
.tc-band {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.tc-band .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.tc-band-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.tc-band-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
}

.ac-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.sm-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  margin: 4px 0 10px;
}