:root {
  --bg: #f6f2ea; --surface: rgba(255,255,255,.72); --ink: #1f1a2e; --muted: #6b6478;
  --accent: #7a4fd6; --accent2: #c98a2b; --line: rgba(31,26,46,.12);
  --user: #ece4fb; --glow: rgba(122,79,214,.18);
  --est: #2f8f5b; --emg: #b9821c; --trad: #4c6fd1; --spec: #b04a7a;
  --onAccent: #fff; --onAccent2: #1f1a2e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0a16; --surface: rgba(24,20,40,.72); --ink: #ece8f6; --muted: #a29bb8;
    --accent: #a98bff; --accent2: #e8b45a; --line: rgba(236,232,246,.12);
    --user: #2a2148; --glow: rgba(169,139,255,.22); --onAccent: #160f2e;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0a16; --surface: rgba(24,20,40,.72); --ink: #ece8f6; --muted: #a29bb8;
  --accent: #a98bff; --accent2: #e8b45a; --line: rgba(236,232,246,.12);
  --user: #2a2148; --glow: rgba(169,139,255,.22); --onAccent: #160f2e;
}
/* ---------- Spiritual palettes (chosen in the header; default Amethyst follows system light/dark) ---------- */
:root[data-palette="lotus"] { color-scheme: light;
  --bg: #fbf3f1; --surface: rgba(255,255,255,.76); --ink: #3a2230; --muted: #7a5a68; --line: rgba(58,34,48,.12);
  --accent: #b04670; --accent2: #d4a24c; --user: #f6dfe7; --glow: rgba(194,85,127,.16); --onAccent: #fff; --onAccent2: #3a2230; }
:root[data-palette="thirdeye"] { color-scheme: dark;
  --bg: #0a0d24; --surface: rgba(18,22,52,.76); --ink: #e6e9ff; --muted: #9aa1d0; --line: rgba(230,233,255,.12);
  --accent: #6c7cff; --accent2: #c9b6ff; --user: #1c2350; --glow: rgba(108,124,255,.22); --onAccent: #080a20; --onAccent2: #14173a; }
:root[data-palette="heart"] { color-scheme: dark;
  --bg: #07140f; --surface: rgba(14,34,26,.76); --ink: #e3f4ec; --muted: #8fb3a3; --line: rgba(227,244,236,.12);
  --accent: #3ccf8e; --accent2: #f2a7b8; --user: #133528; --glow: rgba(60,207,142,.18); --onAccent: #052016; --onAccent2: #3a1420; }
:root[data-palette="temple"] { color-scheme: light;
  --bg: #f8efe0; --surface: rgba(255,250,240,.78); --ink: #3b1d12; --muted: #85624f; --line: rgba(59,29,18,.13);
  --accent: #b5462b; --accent2: #e0a020; --user: #f3dcc0; --glow: rgba(224,160,32,.2); --onAccent: #fff; --onAccent2: #3b1d12; }
:root[data-palette="celestial"] { color-scheme: dark;
  --bg: #050816; --surface: rgba(14,20,44,.76); --ink: #eef1fb; --muted: #96a0c2; --line: rgba(238,241,251,.12);
  --accent: #8fb4ff; --accent2: #f5d78e; --user: #172042; --glow: rgba(143,180,255,.2); --onAccent: #0a1030; --onAccent2: #2b2108; }
:root[data-palette="sage"] { color-scheme: light;
  --bg: #f1f3ec; --surface: rgba(255,255,255,.74); --ink: #22301f; --muted: #5a6a55; --line: rgba(34,48,31,.12);
  --accent: #4a7546; --accent2: #c0703f; --user: #dfe8d8; --glow: rgba(95,138,90,.18); --onAccent: #fff; --onAccent2: #24130a; }
:root[data-palette="moonlit"] { color-scheme: dark;
  --bg: #061418; --surface: rgba(10,34,40,.76); --ink: #e4f6f6; --muted: #8db3b5; --line: rgba(228,246,246,.12);
  --accent: #4fd1c5; --accent2: #e8d9b5; --user: #0f3138; --glow: rgba(79,209,197,.2); --onAccent: #04211f; --onAccent2: #2a2416; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 Inter, system-ui, sans-serif; }
#field { position: fixed; inset: 0; z-index: -1; opacity: .55; }
h2, h3, .brand, .transmission .body strong { font-family: "Cormorant Garamond", serif; }
h2 { font-size: 2rem; margin: .2em 0; font-weight: 600; } h3 { font-size: 1.35rem; margin: .4em 0; }
.sub, .muted { color: var(--muted); } .small { font-size: .8rem; }
.top { position: sticky; top: 0; display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 12px 16px; backdrop-filter: blur(14px); background: var(--surface); border-bottom: 1px solid var(--line); z-index: 5; flex-wrap: wrap; }
.brand { font-size: 1.6rem; font-weight: 600; letter-spacing: .04em; }
.sigil { color: var(--accent); }
.tabs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; }
.tab { background: none; border: 0; color: var(--muted); padding: 8px 12px; border-radius: 999px; font: inherit; cursor: pointer; }
.tab.active { color: var(--ink); background: var(--glow); }
main { max-width: 860px; margin: 0 auto; padding: 16px; }
.view { display: none; } .view.active { display: block; }
.banner { max-width: 860px; margin: 12px auto 0; padding: 10px 14px; border-radius: 12px; background: var(--glow); font-size: .88rem; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }
.primary { background: var(--accent); color: var(--onAccent); border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 500; }
.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; }
button:disabled { opacity: .45; cursor: default; }
.row, .formrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
input, textarea, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 12px; width: 100%; }
.formrow input[type=number] { width: 90px; } .formrow select { width: auto; } input[type=range] { width: 120px; padding: 0; }
input[type=checkbox] { width: auto; }
.transmission { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 0 40px var(--glow); margin-bottom: 16px; }
.transmission .label { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--accent2); }
.transmission .body { font-size: 1.05rem; margin-top: 6px; white-space: pre-wrap; }
.chat { display: flex; flex-direction: column; gap: 12px; min-height: 120px; padding-bottom: 8px; }
.msg { padding: 12px 16px; border-radius: 16px; max-width: 92%; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--user); }
.msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); }
.msg .meta { font-size: .72rem; color: var(--muted); margin-top: 6px; }
.starters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.starters button { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: .85rem; }
.composer { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); flex-wrap: wrap; }
.composer textarea { flex: 1; min-width: 200px; resize: none; max-height: 180px; }
.deep { font-size: .8rem; color: var(--muted); display: flex; gap: 4px; align-items: center; width: 100%; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 14px 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: box-shadow .2s; }
.card:hover { box-shadow: 0 0 24px var(--glow); }
.card .t { font-weight: 600; } .card .l { font-size: .75rem; color: var(--accent2); } .card .d { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.tag { display: inline-block; font-size: .68rem; padding: 2px 8px; border-radius: 999px; color: #fff; margin-top: 6px; }
.tag.est { background: var(--est); } .tag.emg { background: var(--emg); } .tag.trad { background: var(--trad); } .tag.spec { background: var(--spec); }
.script { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 18px; margin-top: 12px; }
.script:not(:empty) { padding: 16px 18px; }
.composeMed, .lab, .journal { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-top: 18px; }
.evidence { font-size: .9rem; margin-top: 8px; }
.breathOrb { width: 160px; height: 160px; margin: 24px auto; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, var(--accent), transparent 70%); color: #fff; transition: transform 5.45s ease-in-out; }
.caret { display: inline-block; width: .5em; height: 1.05em; margin-left: 2px; vertical-align: -.18em; background: var(--accent); border-radius: 2px; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.msg { scroll-margin-top: 90px; }
.typeSpacer { height: 65vh; }
.scrollHint { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; background: var(--accent); color: var(--onAccent); border: 0;
  border-radius: 999px; padding: 6px 14px; font-size: .82rem; box-shadow: 0 4px 24px var(--glow); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translate(-50%, 4px); } }
.card.selected { box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--glow); }
.hsHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hsTitle { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 600; }
.hsClock { font-variant-numeric: tabular-nums; font-size: 1.4rem; color: var(--accent2); white-space: nowrap; }
.hsTimeline { position: relative; display: flex; height: 30px; margin: 14px 0 6px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.hsSeg { display: grid; place-items: center; font-size: .7rem; color: var(--ink); overflow: hidden; white-space: nowrap; border-right: 1px solid var(--line); }
.hsSeg:last-of-type { border-right: 0; }
.hsSeg.now { background: var(--glow); font-weight: 600; }
.hsMarker { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--accent2); box-shadow: 0 0 8px var(--accent2); }
.hsStage { font-size: .9rem; color: var(--muted); min-height: 1.4em; }
#hsScope { width: 100%; height: 140px; display: block; margin: 8px 0; border-radius: 12px; background: var(--glow); }
.hsLayers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.hsLayers div { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.hsLayers b { color: var(--accent); }
/* Threads sidebar */
.threads { position: fixed; left: 0; top: var(--top-h, 60px); bottom: 0; width: 250px; padding: 14px 10px; display: none; flex-direction: column; gap: 6px;
  background: var(--surface); backdrop-filter: blur(14px); border-right: 1px solid var(--line); overflow-y: auto; z-index: 4; }
body.master-on .threads { display: flex; }
.newChat { width: 100%; }
.threadsLabel { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--accent2); margin: 10px 6px 2px; }
#threadList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.thread { display: flex; align-items: center; border-radius: 10px; }
.thread:hover, .thread.active { background: var(--glow); }
.tOpen { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; background: none; border: 0; color: var(--ink); padding: 7px 8px; text-align: left; }
.tt { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.td { font-size: .7rem; color: var(--muted); }
.tDel { background: none; border: 0; color: var(--muted); font-size: 1.1rem; padding: 4px 10px; opacity: 0; }
.thread:hover .tDel, .thread.active .tDel, .tDel:focus-visible { opacity: 1; }
.tEmpty { padding: 6px 8px; }
.threadsBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 6; }
.threadsToggle { margin-bottom: 10px; }
@media (min-width: 1100px) {
  body.master-on main, body.master-on .banner { margin-left: max(266px, calc((100vw - 860px) / 2)); }
  .threadsToggle { display: none; }
}
@media (max-width: 1099px) {
  .threads { top: 0; z-index: 7; width: min(280px, 85vw); transform: translateX(-100%); transition: transform .25s ease; }
  body.threads-open .threads { transform: none; }
  body.threads-open .threadsBackdrop { display: block; }
}
/* Account, plans and paywalls */
.topRight { position: relative; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.account { padding: 7px 14px; font-size: .88rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account.signedIn { background: var(--glow); }
.accountMenu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25); z-index: 8; }
.adminLink { text-align: center; text-decoration: none; }
.adminBtn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  text-decoration: none; color: var(--onAccent2); background: var(--accent2); white-space: nowrap; }
.adminBtn:hover { filter: brightness(1.08); }
.acctTier { font-weight: 600; color: var(--accent2); }
.lockTag { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border-radius: 999px; background: var(--accent2); color: var(--onAccent2); margin-left: 4px; vertical-align: 2px; }
.usageLine { width: 100%; }
.usageLine a, .authSwitch a, dialog a { color: var(--accent); }
.authErr { color: var(--spec); font-size: .85rem; min-height: 1.2em; }
.perks { padding-left: 18px; margin: 8px 0; } .perks li { margin: 4px 0; }
.row.center { justify-content: center; }
.paywall { text-align: center; padding: 22px 18px; margin: 14px 0; border-radius: 18px; border: 1px solid var(--accent2);
  background: radial-gradient(circle at 50% 0, var(--glow), transparent 70%), var(--surface); }
.paywallIcon { font-size: 1.8rem; color: var(--accent2); }
.lockedCard { opacity: .72; }
.lockedCard .t { color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.chip { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 5px 12px; font-size: .82rem; }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--onAccent); }
.hypCat { margin: 16px 0 0; }
/* Hypnosis audio player */
.hypPlayer { display: flex; gap: 22px; align-items: center; padding: 22px; margin: 14px 0; border-radius: 22px; border: 1px solid var(--line);
  background: radial-gradient(circle at 18% 50%, var(--glow), transparent 60%), var(--surface); }
.hypPlayer.locked { opacity: .55; }
.hypOrbWrap { flex: none; display: grid; place-items: center; width: 150px; height: 150px; }
.hypOrb { width: 120px; height: 120px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 2rem;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 45%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 45%, #000));
  box-shadow: 0 0 0 10px var(--glow), 0 0 50px var(--glow); transition: transform .3s; }
.hypOrb:hover { transform: scale(1.04); }
.hypPlayer.playing .hypOrb { animation: hypBreathe 11s ease-in-out infinite; cursor: default; }
@keyframes hypBreathe { 0%, 100% { transform: scale(.9); box-shadow: 0 0 0 6px var(--glow), 0 0 30px var(--glow); } 45% { transform: scale(1.12); box-shadow: 0 0 0 22px var(--glow), 0 0 80px var(--glow); } }
@media (prefers-reduced-motion: reduce) { .hypPlayer.playing .hypOrb { animation: none; } }
.hypInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hypTrack { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; font-weight: 600; line-height: 1.15; }
.hypPhase { color: var(--muted); min-height: 1.4em; }
.hypSteps { display: flex; gap: 4px; flex-wrap: wrap; }
.hypSteps span { font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.hypSteps span.done { color: var(--ink); border-color: transparent; background: var(--glow); }
.hypSteps span.now { color: var(--onAccent); background: var(--accent); border-color: var(--accent); }
.hypTime { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hypBar { flex: 1; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hypBar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .5s linear; }
.hypControls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hypMix { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.hypMix input { width: 90px; }
.hypSettings { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; font-size: .88rem; }
.hypSettings select { width: auto; }
.hypGoal { margin-bottom: 6px; }
@media (max-width: 640px) {
  .hypPlayer { flex-direction: column; text-align: center; padding: 18px 14px; }
  .hypSteps, .hypControls { justify-content: center; }
  .hypTime { width: 100%; }
}
.hypNow { min-height: 1.3em; }
.paletteBtn { background: none; border: 1px solid var(--line); border-radius: 999px; width: 38px; height: 38px; font-size: 1.05rem; line-height: 1; color: var(--ink); cursor: pointer; }
.paletteMenu { position: absolute; right: 0; top: calc(100% + 8px); width: 280px; padding: 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.25); z-index: 8; }
.paletteMenu .pmTitle { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent2); margin: 2px 6px 6px; }
.pmItem { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.pmItem:hover { background: var(--glow); }
.pmItem.on { background: var(--glow); box-shadow: inset 0 0 0 1px var(--accent); }
.pmSw { display: flex; flex: none; }
.pmSw i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -5px; }
.pmSw i:first-child { margin-left: 0; }
.pmName { font-weight: 500; font-size: .9rem; line-height: 1.2; }
.pmDesc { font-size: .72rem; color: var(--muted); }
.muteBtn { background: none; border: 1px solid var(--line); border-radius: 999px; width: 38px; height: 38px; font-size: 1.05rem; line-height: 1; color: var(--ink); }
.muteBtn.on { background: var(--ink); border-color: var(--ink); }
.composerOpts { display: flex; gap: 18px; width: 100%; }
.composerOpts .deep { width: auto; }
.composerOpts { align-items: center; flex-wrap: wrap; }
.volCtl { gap: 6px !important; }
.volCtl input[type=range] { width: 110px; accent-color: var(--accent); }
.volCtl.off { opacity: .5; }
.volPct { font-variant-numeric: tabular-nums; min-width: 3ch; font-size: .75rem; }
.primary.stop { background: var(--ink); color: var(--bg); }
.msg.stopped::after { content: "Stopped"; display: block; margin-top: 6px; font-size: .7rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
#jList { padding-left: 18px; } #jList li { margin: 6px 0; }
dialog { border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); max-width: 420px; width: calc(100% - 32px); }
dialog input { margin: 6px 0; }
dialog::backdrop { background: rgba(0,0,0,.4); backdrop-filter: blur(4px); }

/* Hypnosis modes and subliminal player */
.hypModes { display: inline-flex; gap: 4px; padding: 4px; margin: 6px 0 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.hypModes button { border: 0; background: none; color: var(--muted); padding: 8px 16px; border-radius: 999px; font-weight: 500; }
.hypModes button.active { background: var(--accent); color: var(--onAccent); }
.subLevelLabel { min-width: 9ch; font-size: .72rem; }
.subInside { margin: 8px 0 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.subInside summary { cursor: pointer; font-weight: 500; }
.subInside ul { columns: 2; column-gap: 24px; padding-left: 18px; margin: 8px 0 0; font-size: .86rem; }
.subInside li { margin: 3px 0; break-inside: avoid; }
@media (max-width: 640px) { .subInside ul { columns: 1; } }

/* ---------- Desktop: tab icons stay hidden ---------- */
.tab .ti { display: none; }

/* ---------- Phones: compact top bar + app-style bottom tab bar ---------- */
@media (max-width: 720px) {
  :root { --navH: calc(62px + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--navH); }
  .top { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .brand { font-size: 1.35rem; flex: none; }
  .topRight { gap: 6px; }
  .topRight .paletteBtn, .topRight .muteBtn { width: 40px; height: 40px; }
  .account { max-width: 110px; padding: 8px 12px; min-height: 40px; }
  .adminBtn { padding: 8px 10px; min-height: 40px; font-size: 0; gap: 0; }
  .adminBtn::before { content: "⚙"; font-size: 1rem; }

  /* The tabs become a bottom navigation bar, all six visible, thumb-reachable. */
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; justify-content: space-around; gap: 0; overflow: visible;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  :root:not([data-palette]) .tabs, :root[data-palette] .tabs { background: color-mix(in srgb, var(--bg) 88%, transparent); }
  .tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 14px; font-size: .66rem; position: relative; }
  .tab .ti { display: block; font-size: 1.25rem; line-height: 1; filter: saturate(.85); }
  .tab .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tab.active { background: var(--glow); color: var(--ink); }
  .tab .lockTag { position: absolute; top: 0; right: 4px; font-size: .5rem; padding: 0 4px; margin: 0; }

  main { padding: 12px 12px 20px; }
  h2 { font-size: 1.65rem; }
  .banner { margin: 8px 12px 0; }

  /* Touch-friendly controls; 16px text stops phones zooming in on focus. */
  input, textarea, select { font-size: 16px; min-height: 44px; }
  input[type=range] { min-height: 32px; }
  input[type=checkbox] { min-height: 0; width: 20px; height: 20px; }
  .primary, .ghost { min-height: 44px; padding: 10px 18px; }
  .ghost.small, .primary.small { min-height: 38px; }
  .starters button, .chip { min-height: 38px; padding: 8px 14px; }
  .card { padding: 14px; }

  /* Chat: composer sits just above the bottom bar. */
  .composer { bottom: var(--navH); padding: 10px 0; }
  .composerOpts { gap: 12px; }
  .volCtl input[type=range] { width: 90px; }
  .scrollHint { bottom: calc(var(--navH) + 90px); }
  .msg { max-width: 96%; padding: 11px 14px; }
  .threads { padding-top: calc(14px + env(safe-area-inset-top)); }

  /* Menus open as sheets under the top bar. */
  .accountMenu, .paletteMenu { position: fixed; left: 10px; right: 10px; top: calc(60px + env(safe-area-inset-top)); width: auto; max-height: 70vh; overflow-y: auto; }

  /* Dialogs use the full width. */
  dialog { width: calc(100% - 20px); max-width: none; margin: auto; }

  /* Frequency, binaural and hypnosis controls stack. */
  .formrow { gap: 8px; }
  .formrow label { display: flex; align-items: center; gap: 6px; }
  .hsHead { flex-direction: column; gap: 4px; }
  .hsLayers { grid-template-columns: 1fr; }
  .hsSeg { font-size: .6rem; }
  #hsScope { height: 110px; }
  .hypSettings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hypSettings label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-size: .78rem; }
  .hypSettings label.muted { flex-direction: row; align-items: center; }
  .hypSettings select { width: 100%; }
  .hypModes { display: flex; width: 100%; }
  .hypModes button { flex: 1; min-height: 42px; }
  .hypOrbWrap { width: 130px; height: 130px; }
  .hypOrb { width: 108px; height: 108px; }
  .hypMix { flex: 1 1 100%; justify-content: space-between; }
  .hypMix input { flex: 1; width: auto; }
  .grid { grid-template-columns: 1fr; gap: 8px; }
  .lab, .composeMed, .journal { padding: 14px; }
}
@media (max-width: 380px) {
  .brand { font-size: 1.2rem; }
  .account { max-width: 84px; }
  .hypSettings { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* A blurred header would trap the fixed bottom bar inside it, so phones get a solid header instead. */
  .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 94%, var(--accent)); }
  .composer { background: var(--bg); box-shadow: 0 -14px 14px var(--bg); }
}
@media (max-width: 720px) {
  .composerOpts { flex-wrap: nowrap; gap: 10px; font-size: .78rem; }
  .composerOpts .volPct { display: none; }
  .volCtl input[type=range] { width: 70px; min-width: 0; }
}
@media (max-width: 720px) { .hypModes button { white-space: nowrap; font-size: .88rem; padding: 8px 10px; } }

/* Links to the guide page */
.guideLink { display: inline-block; margin-left: 4px; color: var(--accent); font-size: .86rem; text-decoration: none; border-bottom: 1px dashed currentColor; }
.guideLink:hover { border-bottom-style: solid; }
.guideRow { margin: 0 0 10px; }
@media (max-width: 720px) { .guideLink { display: block; margin: 6px 0 0; padding: 4px 0; } .guideRow .guideLink { margin: 0; } }

/* Meditate & Breathe */
.medIntentLabel { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; }
.medIntentLabel input { flex: 1; }
.breathStage { display: flex; gap: 26px; align-items: center; padding: 24px; margin: 14px 0; border-radius: 22px; border: 1px solid var(--line);
  background: radial-gradient(circle at 20% 50%, var(--glow), transparent 60%), var(--surface); }
.brOrbWrap { position: relative; flex: none; width: 220px; height: 220px; display: grid; place-items: center; }
.brOrb { width: 120px; height: 120px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 40%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 50%, #000));
  box-shadow: 0 0 60px var(--glow), 0 0 0 10px var(--glow); transform: scale(1); will-change: transform; }
.brOrb span { font-size: .74rem; font-weight: 600; max-width: 96px; line-height: 1.2; }
.brOrb b { font-size: 1.3rem; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.brRing { position: absolute; inset: 0; border-radius: 50%; --p: 0;
  background: conic-gradient(var(--accent2) calc(var(--p) * 1%), transparent 0); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%); mask: radial-gradient(circle, transparent 66%, #000 67%); opacity: .8; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.brRing.go { animation: brSweep var(--dur, 4s) linear forwards; }
.brRing[data-kind="hold"], .brRing[data-kind="holdEmpty"] { background: conic-gradient(var(--muted) calc(var(--p) * 1%), transparent 0); }
@keyframes brSweep { from { --p: 0; } to { --p: 100; } }
.brInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .brOrb { transition: none !important; } }
@media (max-width: 720px) {
  .breathStage { flex-direction: column; text-align: center; padding: 18px 14px; gap: 14px; }
  .brOrbWrap { width: 200px; height: 200px; }
  .brInfo .hypControls { justify-content: center; }
  .medIntentLabel { flex-direction: column; align-items: stretch; grid-column: 1 / -1; }
}

/* Logo links back to the Master screen */
a.brand { color: inherit; text-decoration: none; cursor: pointer; border-radius: 10px; }
a.brand:hover .sigil { filter: drop-shadow(0 0 6px var(--accent)); }
a.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }