@font-face {
  font-family: "Satoru Display";
  src: url("fonts/podkova/Podkova-wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

/* ========================================================================== */
/* Assistant v181 — safe actions, visible network thinking and opt-in wake.   */
/* ========================================================================== */
html.helper-open { overflow: hidden; }
#helper-modal {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(var(--sp-3), env(safe-area-inset-top)) var(--sp-3) max(var(--sp-3), env(safe-area-inset-bottom));
}
#helper-modal .chat-box {
  width: min(640px, 100%);
  max-height: min(900px, calc(100dvh - (var(--sp-3) * 2)));
  overflow: hidden;
}
#helper-modal .modal-x { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
#helper-modal :is(button, input):focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 2px;
}
.shadow-chat-head h2 { margin: 0; font-size: var(--type-heading); line-height: var(--leading-tight); }
.shadow-chat-head p { margin: var(--sp-1) 0 0; font-size: var(--type-meta); line-height: var(--leading-label); }
.chat-context-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-2);
}
.chat-context-note,
.chat-wake-status,
.chat-wake-unsupported {
  margin: var(--sp-1) 0 0;
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.chat-wake-status { min-block-size: calc(var(--type-meta) * var(--leading-label)); }
.chat-file-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel2);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.chat-file-chip span { min-width: 0; overflow-wrap: anywhere; }
.assistant-wake-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
#ai-fab.is-wake-listening {
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px var(--accent), 0 6px 22px rgba(0,0,0,.4);
}
.chat-msg.typing {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  letter-spacing: var(--tracking-natural);
  color: var(--muted);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}
.typing-dots { display: inline-flex; align-items: center; gap: var(--sp-1); min-inline-size: 32px; }
.typing-dots i {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: assistantThinkingDot 900ms ease-in-out infinite alternate;
}
.typing-dots i:nth-child(2) { animation-delay: 150ms; }
.typing-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes assistantThinkingDot { from { opacity: .35; transform: translateY(1px); } to { opacity: 1; transform: translateY(-2px); } }
.chat-actions {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.chat-action-row { align-items: start; }
.chat-action-row > span { display: grid; min-width: 0; gap: var(--sp-1); }
.chat-action-meta,
.chat-action-state {
  display: block;
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.chat-action-meta { color: var(--muted); }
.chat-action-state { font-weight: 700; color: var(--muted); }
.chat-action-state.is-done { color: var(--good); }
.chat-action-state.is-failed,
.chat-action-state.is-refused,
.chat-action-refused { color: var(--bad); }
.chat-action-refused { margin: var(--sp-2) 0 0; font-size: var(--type-meta); line-height: var(--leading-label); }
.chat-actions.applied { opacity: 1; }
.chat-form input { min-width: 0; font-size: var(--type-control); line-height: var(--leading-prose); }

@media (max-width: 600px), (pointer: coarse) {
  #helper-modal { align-items: flex-start; padding-inline: var(--sp-2); }
  #helper-modal .chat-box { max-height: calc(100dvh - (var(--sp-2) * 2)); }
  #helper-modal :is(button, input, label.drc-row) { min-block-size: var(--touch-min); }
  #helper-modal .chat-context-tools > * { flex: 1 1 100%; }
  #helper-modal .chat-context-tools button { inline-size: 100%; }
  #helper-modal .chat-form input { font-size: max(16px, var(--type-control)); }
  #helper-modal .chat-msg { max-width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dots i { animation: none; opacity: .72; transform: none; }
  #helper-modal *, #ai-fab { transition-duration: 0ms !important; }
}

/* ---------- Account identity profile v209 ----------
   A profile is a small, chosen identity surface. It deliberately does not
   borrow the density of Settings or the progress dashboards. */
.up-meta {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.up-meta:hover .up-name { color: var(--accent); }
.up-meta:focus-visible,
.pm-profile:focus-visible,
.lb-profile:focus-visible,
.account-profile-screen :is(a, button):focus-visible,
.account-profile-editor :is(input, select, textarea, button):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.account-profile-settings {
  display: grid;
  gap: var(--sp-4);
  overflow: clip;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line-soft));
  background:
    radial-gradient(720px 300px at 8% -20%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 64%),
    var(--surface-1, var(--panel));
}
.account-profile-settings-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.account-profile-settings-head h3 { margin: 2px 0 var(--sp-1); font-size: var(--type-title); line-height: var(--leading-display); }
.account-profile-settings-head p:not(.settings-eyebrow) { max-inline-size: 68ch; margin: 0; color: var(--text-soft); line-height: var(--leading-prose); }
.account-profile-settings .settings-eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: var(--type-meta);
  font-weight: 900;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.account-profile-editor {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}
.account-profile-preview { position: sticky; top: var(--sp-3); min-inline-size: 0; }
.account-profile-fields { min-inline-size: 0; display: grid; gap: var(--sp-4); }
.account-profile-essential-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.account-profile-fields > label,
.account-profile-essential-grid > label {
  min-inline-size: 0;
  display: grid;
  gap: var(--sp-1);
  color: var(--text-soft);
  font-size: var(--type-meta);
  font-weight: 800;
}
.account-profile-fields :is(input, select, textarea) { inline-size: 100%; min-inline-size: 0; }
.account-profile-fields textarea { resize: vertical; line-height: var(--leading-prose); }
.account-profile-handle-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2, var(--panel2)); }
.account-profile-handle-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.account-profile-handle-field i { padding-inline-start: 14px; color: var(--text-soft); font-style: normal; font-weight: 900; }
.account-profile-handle-field input { border: 0; background: transparent; box-shadow: none !important; }
.account-profile-handle-field input[aria-invalid="true"] { color: var(--bad); }
.account-profile-bio-field { position: relative; }
.account-profile-bio-field small { justify-self: end; color: var(--muted); font-weight: 700; }

.account-profile-choice,
.account-profile-links-editor {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.account-profile-choice > legend,
.account-profile-links-editor > legend { margin-block-end: var(--sp-2); color: var(--text-strong); font-size: var(--type-control); font-weight: 900; }
.account-profile-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.account-profile-choice-grid > label { position: relative; min-inline-size: 0; cursor: pointer; }
.account-profile-choice-grid input,
.account-profile-cover-choice input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.account-profile-choice-grid > label > span {
  min-block-size: 86px;
  display: grid;
  align-content: start;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2, var(--panel2));
  transition: border-color 140ms var(--ease-out, ease-out), background-color 140ms var(--ease-out, ease-out), transform 140ms var(--ease-out, ease-out);
}
.account-profile-choice-grid > label > span b { color: var(--text-strong); }
.account-profile-choice-grid > label > span small { color: var(--text-soft); line-height: var(--leading-prose); font-weight: 600; }
.account-profile-choice-grid input:checked + span {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-2, var(--panel2)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.account-profile-choice-grid input:focus-visible + span { outline: var(--focus-ring); outline-offset: 3px; }
.account-profile-cover-choice > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.account-profile-cover-choice label { position: relative; min-inline-size: 0; display: grid; gap: var(--sp-1); cursor: pointer; }
.account-profile-cover-choice label > span { block-size: 54px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); transition: border-color 140ms var(--ease-out, ease-out), transform 140ms var(--ease-out, ease-out); }
.account-profile-cover-choice label > b { color: var(--text-soft); font-size: var(--type-meta); }
.account-profile-cover-choice label.cover-void > span,
.account-profile-cover.cover-void { background: radial-gradient(circle at 72% 22%, rgba(121,101,224,.34), transparent 30%), linear-gradient(145deg, #0b1020, #15112b 62%, #090c14); }
.account-profile-cover-choice label.cover-aurora > span,
.account-profile-cover.cover-aurora { background: radial-gradient(circle at 20% 110%, rgba(82,240,210,.65), transparent 44%), radial-gradient(circle at 82% -10%, rgba(112,91,225,.72), transparent 50%), #0b1b26; }
.account-profile-cover-choice label.cover-ember > span,
.account-profile-cover.cover-ember { background: radial-gradient(circle at 82% 84%, rgba(255,137,62,.70), transparent 36%), linear-gradient(150deg, #161116, #3a1d1e 70%, #161116); }
.account-profile-cover-choice label.cover-paper > span,
.account-profile-cover.cover-paper { background: linear-gradient(135deg, rgba(120,78,42,.16) 1px, transparent 1px), linear-gradient(35deg, #d6c19a, #8d765f); background-size: 18px 18px, auto; }
.account-profile-cover-choice input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 17%, transparent); transform: translateY(-1px); }
.account-profile-cover-choice input:focus-visible + span { outline: var(--focus-ring); outline-offset: 3px; }

.account-profile-links-editor > p { margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-prose); }
.account-profile-links-editor [data-profile-links] { display: grid; gap: var(--sp-2); margin-block-end: var(--sp-2); }
.account-profile-link-row { min-inline-size: 0; display: grid; grid-template-columns: minmax(126px, 160px) minmax(0, 1fr) var(--touch-min); gap: var(--sp-2); align-items: center; }
.account-profile-link-row label { min-inline-size: 0; }
.account-profile-link-remove {
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: var(--surface-2, var(--panel2));
}
.account-profile-link-remove:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 58%, var(--line-soft)); }
.account-profile-save-status { min-block-size: 1.4em; margin: 0; color: var(--good); font-size: var(--type-meta); }
.account-profile-save-status.is-error { color: var(--bad); }

.account-profile-screen {
  --profile-accent: var(--accent);
  position: relative;
  min-inline-size: 0;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 34%, var(--line-soft));
  border-radius: clamp(18px, 3vw, 26px);
  color: var(--text);
  background: var(--surface-1, var(--panel));
  box-shadow: 0 20px 50px rgba(0,0,0,.24);
}
.account-profile-cover { position: relative; block-size: 118px; overflow: hidden; }
.account-profile-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--surface-1, var(--panel)) 58%, transparent)); }
.account-profile-cover span { position: absolute; inline-size: 124px; block-size: 124px; inset: -50px auto auto -32px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.account-profile-cover i { position: absolute; inline-size: 90px; block-size: 90px; inset: auto -28px -45px auto; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.account-profile-identity { position: relative; z-index: 1; min-inline-size: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: end; gap: var(--sp-2); margin: -40px var(--sp-3) 0; }
.account-profile-avatar { inline-size: 76px; block-size: 76px; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--surface-1, var(--panel)); border-radius: 24px; background: var(--surface-3, var(--panel2)); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.account-profile-origin-icon { inline-size: 100%; block-size: 100%; object-fit: contain; }
.account-profile-identity h3 { min-inline-size: 0; margin: 0; overflow-wrap: anywhere; color: var(--text-strong); font-size: clamp(20px, 4vw, 28px); line-height: var(--leading-tight); }
.account-profile-handle { margin: 2px 0 0; color: var(--text-soft); font-size: var(--type-meta); }
.account-profile-layout-label { align-self: center; padding: 5px 9px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); color: var(--text-soft); background: color-mix(in srgb, var(--surface-2) 84%, transparent); font-size: var(--type-floor); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.account-profile-bio { margin: var(--sp-3); color: var(--text); line-height: var(--leading-prose); overflow-wrap: anywhere; white-space: pre-line; }
.account-profile-bio.is-empty { color: var(--muted); font-style: italic; }
.account-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 var(--sp-3) var(--sp-3); border-block: 1px solid var(--line-soft); }
.account-profile-stats > span { min-inline-size: 0; display: grid; align-content: center; gap: 2px; padding: var(--sp-3) var(--sp-1); text-align: center; }
.account-profile-stats > span + span { border-inline-start: 1px solid var(--line-soft); }
.account-profile-stats b { overflow-wrap: anywhere; color: var(--text-strong); font-size: var(--type-control); line-height: var(--leading-tight); }
.account-profile-stats small { color: var(--muted); font-size: var(--type-floor); text-transform: uppercase; }
.account-profile-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-3); }
.account-profile-link { min-block-size: var(--touch-min); display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); color: var(--text); background: var(--surface-2, var(--panel2)); font-size: var(--type-meta); font-weight: 800; text-decoration: none; }
a.account-profile-link:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.account-profile-link > span { min-inline-size: 20px; color: var(--accent); text-align: center; font-weight: 950; }
.account-profile-links-empty { margin: 0 var(--sp-3) var(--sp-3); color: var(--muted); font-size: var(--type-meta); }
.account-profile-screen.layout-character .account-profile-identity { grid-template-columns: 94px minmax(0, 1fr); align-items: center; margin-top: -52px; text-align: start; }
.account-profile-screen.layout-character .account-profile-avatar { inline-size: 94px; block-size: 94px; border-radius: 30px; }
.account-profile-screen.layout-character .account-profile-layout-label { display: none; }
.account-profile-screen.layout-creator { display: flex; flex-direction: column; }
.account-profile-screen.layout-creator .account-profile-links { order: 4; }
.account-profile-screen.layout-creator .account-profile-stats { order: 5; margin-block-end: 0; border-block-end: 0; }
.account-profile-screen.layout-creator .account-profile-links-empty { order: 4; }

.account-profile-modal { padding: var(--sp-3); }
.account-profile-dialog { position: relative; inline-size: min(560px, 100%); max-block-size: calc(100dvh - 24px); overflow: auto; padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-0, #090d17); box-shadow: var(--shadow-modal); }
.account-profile-dialog > .modal-x { z-index: 4; inset: calc(var(--sp-3) + 4px) calc(var(--sp-3) + 4px) auto auto; color: #fff; background: rgba(5,8,16,.62); backdrop-filter: blur(8px); }
.account-profile-dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-block-start: var(--sp-3); }

/* The social list itself remains terse; a person's identity opens in one
   focused profile instead of pushing extra labels into every row. */
.pm-profile,
.lb-profile { min-inline-size: 0; margin: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: start; cursor: pointer; }
.pm-profile { grid-column: 1 / 3; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; }
.pm-profile:hover .pm-name,
.lb-profile:hover .lb-name { color: var(--accent); }
.lb-profile { grid-column: 2 / 4; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; }
.lb-profile + .lb-lvl { grid-column: 4; }
.lb-profile ~ .lb-xp { grid-column: 5; }

@media (max-width: 900px) {
  .account-profile-editor { grid-template-columns: minmax(0, 1fr); }
  .account-profile-preview { position: static; inline-size: min(520px, 100%); }
}
@media (max-width: 700px) {
  .account-profile-settings-head { display: grid; }
  .account-profile-settings-head > .btn { inline-size: 100%; }
  .account-profile-essential-grid,
  .account-profile-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .account-profile-choice-grid > label > span { min-block-size: 68px; }
  .account-profile-cover-choice > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-profile-link-row { grid-template-columns: minmax(0, 1fr) var(--touch-min); }
  .account-profile-link-row > label:first-child { grid-column: 1 / -1; }
  .account-profile-link-row > label:nth-child(2) { grid-column: 1; }
  .account-profile-link-row > button { grid-column: 2; }
  .account-profile-dialog { padding: var(--sp-2); }
  .account-profile-dialog > .modal-x { inset: calc(var(--sp-2) + 4px) calc(var(--sp-2) + 4px) auto auto; }
  .account-profile-identity { grid-template-columns: 68px minmax(0, 1fr); margin-inline: var(--sp-2); }
  .account-profile-avatar { inline-size: 68px; block-size: 68px; border-radius: 21px; }
  .account-profile-layout-label { display: none; }
  .account-profile-stats { margin-inline: var(--sp-2); }
  .account-profile-links { padding-inline: var(--sp-2); }
  .account-profile-bio { margin-inline: var(--sp-2); }
}
@media (max-width: 600px) {
  .leaderboard-card .lb-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .leaderboard-card .lb-profile { grid-column: 2; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-1); }
  .leaderboard-card .lb-profile + .lb-lvl { display: none; }
  .leaderboard-card .lb-profile ~ .lb-xp { grid-column: 3; }
}
@media (hover: hover) and (pointer: fine) {
  .account-profile-choice-grid > label:hover > span,
  .account-profile-cover-choice label:hover > span { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line-soft)); }
}
@media (pointer: coarse) {
  .account-profile-settings :is(button, input, select, textarea, label),
  .account-profile-dialog :is(button, a) { min-block-size: var(--touch-min); }
}
@media (prefers-reduced-motion: reduce) {
  .account-profile-settings *,
  .account-profile-settings *::before,
  .account-profile-settings *::after,
  .account-profile-modal *,
  .account-profile-modal *::before,
  .account-profile-modal *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Goals hierarchy v127 — one outline, one progress source
   ============================================================ */
:root {
  --goals-active-fg: #8ed5ff;
  --goals-line: color-mix(in srgb, var(--accent) 28%, var(--line-soft));
}
:root[data-theme="light"] {
  --goals-active-fg: #075f78;
  --goals-line: color-mix(in srgb, #075f78 35%, var(--line-soft));
}
.goals-shell { display: grid; gap: var(--sp-3); }
.goals-route-head {
  display: flex; align-items: end; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
.goals-route-head h2 { margin: 0; font-size: var(--type-title); line-height: var(--leading-display); }
.goals-route-head p { margin: var(--sp-1) 0 0; max-width: var(--measure-compact); color: var(--text-soft); }
.goals-kicker { color: var(--goals-active-fg) !important; font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 900; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.goals-counts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.goals-counts span { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line-soft); border-radius: var(--radius-pill); font-size: var(--type-meta); font-weight: 800; }
.goals-error { padding: var(--sp-2); border: 1px solid var(--bad); border-radius: var(--radius-md); color: var(--bad); }
.goals-outline { padding: 0; overflow: clip; background: color-mix(in srgb, var(--surface-2) 94%, transparent); }
.goals-outline > h3 { margin: 0; padding: var(--sp-3); border-bottom: 1px solid var(--line-soft); font-size: var(--type-heading); }
.goal-branch { position: relative; }
.goal-item {
  position: relative; margin-inline-start: min(calc(var(--goal-depth) * 22px), 66px);
  border-bottom: 1px solid var(--line-soft); background: transparent;
}
.goal-item::before { content: ""; position: absolute; inset-inline-start: -12px; inset-block: 0 50%; border-inline-start: 1px solid var(--goals-line); pointer-events: none; }
.goal-item[style*="--goal-depth:0"]::before { display: none; }
.goal-detail > summary { list-style: none; }
.goal-detail > summary::-webkit-details-marker { display: none; }
.goal-summary {
  min-height: 58px; display: grid; grid-template-columns: minmax(0,1fr) minmax(88px,140px);
  gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); cursor: pointer;
}
.goal-summary:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.goal-summary-main { min-width: 0; display: grid; gap: var(--sp-1); }
.goal-title { color: var(--text-strong); font-family: var(--font-display); font-size: var(--type-heading); line-height: var(--leading-ui); font-weight: 800; overflow-wrap: anywhere; }
.goal-summary-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-label); }
.goal-summary progress { inline-size: 100%; block-size: 8px; accent-color: var(--goal-color); }
.goal-detail[open] > .goal-summary { background: color-mix(in srgb, var(--goal-color) 8%, transparent); }
.goal-body { padding: 0 var(--sp-3) var(--sp-3); display: grid; gap: var(--sp-3); }
.goal-breadcrumb { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; color: var(--muted); font-size: var(--type-meta); }
.goal-breadcrumb a, .goal-deep-link, .task-menu-goal { color: var(--goals-active-fg); text-underline-offset: 3px; }
.goal-source-note { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-prose); }
.goal-linked { padding: var(--sp-2); border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.goal-linked h4 { margin: 0 0 var(--sp-2); font-size: var(--type-heading); }
.goal-linked-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: var(--sp-1); }
.goal-linked-list li { display: flex; justify-content: space-between; gap: var(--sp-2); padding-block: var(--sp-1); border-bottom: 1px solid var(--line-soft); }
.goal-linked-list a { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.goal-linked-list span { color: var(--muted); font-size: var(--type-meta); white-space: nowrap; }
.goal-task-form, .add-step-form, .metric-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-2); align-items: end; }
.goal-task-form label, .add-step-form label, .metric-form label, .goal-form label, .goal-edit-form label { min-width: 0; display: grid; gap: var(--sp-1); color: var(--muted); font-size: var(--type-meta); font-weight: 800; }
.goal-task-form input, .add-step-form input, .metric-form input { width: 100%; }
.goal-edit { border-top: 1px solid var(--line-soft); padding-top: var(--sp-2); }
.goal-edit > summary, .goals-create > summary, .goals-bulk > summary { min-height: var(--touch-min); display: flex; align-items: center; cursor: pointer; font-weight: 800; }
.goal-edit-form, .goal-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-2); padding: var(--sp-2); }
.goal-edit-form label:first-child, .goal-edit-form label:nth-child(2), .goal-edit-form button, .goal-field-wide, .goal-extra, .goal-form > button, .goal-form-status { grid-column: 1 / -1; }
.goal-edit-form textarea { min-height: 96px; resize: vertical; }
.goal-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: flex-start; }
.goal-actions > :is(button,a,label) { min-height: var(--touch-min); }
.goal-pick-lbl { display: inline-flex; gap: var(--sp-1); align-items: center; }
.goal-pick { inline-size: 20px; block-size: 20px; }
.gstep { min-height: var(--touch-min); grid-template-columns: var(--touch-min) minmax(0,1fr) var(--touch-min); padding: 0; }
.gstep .check, .gstep .del { inline-size: var(--touch-min); block-size: var(--touch-min); }
.goals-create, .goals-bulk, .goals-empty { padding: var(--sp-3); }
.goals-create > summary, .goals-bulk > summary { font-size: var(--type-heading); }
.goals-bulk .bulk-bar { margin-block: var(--sp-2); }
.goals-archive-list { border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; }
.goal-item.is-archived { opacity: .76; }
.goal-item.is-done .goal-title { color: var(--text-soft); }
.goals-empty h3 { margin-top: 0; }
.goals-load-card { max-width: 720px; margin-inline: auto; }
.goal-delete-overlay { padding: var(--sp-3); }
.goal-delete-box { position: relative; width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow: auto; padding: var(--sp-4); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-1); color: var(--text); }
.goal-delete-box h2 { margin-top: 0; }
.goal-delete-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.goal-delete-box .modal-x { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
.goals-shell :is(button,a,input,select,textarea,summary):focus-visible, .goal-delete-box :is(button,a):focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.task-menu-goal { display: block; padding: var(--sp-2); border-bottom: 1px solid var(--line-soft); font-size: var(--type-control); line-height: var(--leading-ui); }
@media (max-width: 600px) {
  .goals-shell { gap: var(--sp-2); }
  .goals-route-head { align-items: start; padding: var(--sp-2); }
  .goals-counts { display: none; }
  .gfilters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: thin; }
  .gfilter { min-height: var(--touch-min); white-space: nowrap; }
  .goals-outline > h3 { padding: var(--sp-2); }
  .goal-item { margin-inline-start: min(calc(var(--goal-depth) * 12px), 36px); }
  .goal-summary { min-height: var(--touch-min); grid-template-columns: minmax(0,1fr) 72px; padding: var(--sp-2); }
  .goal-body { padding: 0 var(--sp-2) var(--sp-2); gap: var(--sp-2); }
  .goal-edit-form, .goal-form, .goal-task-form, .add-step-form, .metric-form { grid-template-columns: minmax(0,1fr); }
  .goal-edit-form > *, .goal-form > *, .goal-task-form > *, .add-step-form > *, .metric-form > * { grid-column: 1; }
  .goal-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .goal-actions > * { width: 100%; }
  .goals-shell :is(button,input,select,textarea,summary), .goal-delete-box :is(button,input,select,textarea) { min-height: var(--touch-min); }
}

@media (hover: hover) and (pointer: fine) {
  .goal-summary, .goals-shell button { transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .goals-shell *, .goal-delete-overlay * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================
   Calendar data safety v117 — error is not an empty plan
   ========================================================== */
.calendar-load-recovery {
  width: min(100%, var(--layout-max));
  margin-inline: auto;
}

.calendar-load-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  border-color: color-mix(in srgb, var(--bad) 48%, var(--line-soft));
  background: color-mix(in srgb, var(--bad) 7%, var(--surface-1));
  box-shadow: none;
}

.calendar-load-mark {
  display: grid;
  place-items: center;
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  border: 1px solid color-mix(in srgb, var(--bad) 62%, var(--line-soft));
  border-radius: 50%;
  color: var(--bad);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  font-weight: 800;
}

.calendar-load-copy { min-width: 0; }
.calendar-load-copy h2 {
  margin: 0 0 var(--sp-1);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: var(--leading-display);
}
.calendar-load-copy p {
  max-inline-size: var(--measure-prose);
  margin: 0;
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: var(--leading-prose);
}
.calendar-load-retry {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
}

@media (max-width: 600px) {
  .calendar-load-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .calendar-load-retry {
    grid-column: 1 / -1;
    inline-size: 100%;
  }
}

/* Questionnaire v1 — one answer, one reviewed seed, one first action. */
.questionnaire-screen {
  align-items: flex-start;
  padding-block: clamp(24px, 6vh, 72px);
}
.questionnaire-brand {
  width: min(720px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  margin: 0 auto var(--sp-3, 12px);
  color: var(--text-soft, var(--muted));
  font-weight: 800;
  letter-spacing: .08em;
}
.questionnaire-brand .auth-origin-icon { inline-size: 32px; block-size: 32px; }
.questionnaire-box {
  width: min(720px, calc(100% - 32px));
  max-width: 720px;
  padding: clamp(20px, 4vw, 36px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: 0 22px 70px rgb(0 0 0 / .18);
}
.questionnaire-head { max-width: 62ch; margin-block-end: var(--sp-4, 16px); }
.questionnaire-head h1 { margin: 4px 0 8px; font-size: clamp(27px, 4.8vw, 42px); line-height: 1.05; }
.questionnaire-head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.questionnaire-step,
.questionnaire-source-badge {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  color: var(--accent-2, var(--accent));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#questionnaire-answer,
.questionnaire-review :is(input, textarea, select),
.questionnaire-manual :is(input, textarea) {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
}
#questionnaire-answer { min-block-size: 176px; resize: vertical; font-size: 16px; line-height: 1.5; }
.questionnaire-input-tools,
.questionnaire-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
  margin-block-start: var(--sp-3, 12px);
}
.questionnaire-input-tools > .muted { margin-inline-start: auto; font-size: 12px; }
.questionnaire-ai-consent,
.questionnaire-memory-choice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--sp-2, 8px);
  align-items: start;
  margin-block-start: var(--sp-4, 16px);
  padding: var(--sp-3, 12px);
  border: 1px solid var(--line-soft, var(--line));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-2, var(--panel2));
  cursor: pointer;
}
.questionnaire-ai-consent input,
.questionnaire-memory-choice input { inline-size: 20px; block-size: 20px; margin: 2px 0 0; }
.questionnaire-ai-consent span,
.questionnaire-memory-choice span { min-inline-size: 0; display: grid; gap: 3px; }
.questionnaire-ai-consent small,
.questionnaire-memory-choice small { color: var(--muted); line-height: 1.45; }
.questionnaire-ai-unavailable { margin: 12px 0 0; color: var(--muted); }
.questionnaire-plan-import,
.questionnaire-later,
.questionnaire-spheres {
  margin-block-start: var(--sp-3, 12px);
  border: 1px solid var(--line-soft, var(--line));
  border-radius: var(--radius-md, 12px);
  background: transparent;
}
:is(.questionnaire-plan-import, .questionnaire-later, .questionnaire-spheres) > summary {
  min-block-size: var(--touch-min, 42px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
}
:is(.questionnaire-plan-import, .questionnaire-later, .questionnaire-spheres) > :not(summary) { margin: 0; padding: 0 12px 12px; }
.questionnaire-file { position: relative; overflow: hidden; }
.questionnaire-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.questionnaire-actions .questionnaire-primary { margin-inline-start: auto; }
.questionnaire-source-actions .questionnaire-primary { flex: 1 1 260px; }
.questionnaire-source-actions .ghost { flex: 0 1 auto; }
.questionnaire-defer {
  min-block-size: var(--touch-min, 42px);
  display: block;
  margin: 10px auto 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.questionnaire-manual { display: grid; gap: var(--sp-3, 12px); }
.questionnaire-manual > label { display: grid; gap: 6px; font-weight: 800; }
.questionnaire-manual small,
.questionnaire-optional small { color: var(--muted); font-weight: 500; }
.questionnaire-manual fieldset,
.questionnaire-spheres fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.questionnaire-manual legend { margin-block-end: 8px; font-weight: 800; }
.questionnaire-time-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.questionnaire-time-choices label { position: relative; }
.questionnaire-time-choices input { position: absolute; opacity: 0; }
.questionnaire-time-choices span {
  min-block-size: var(--touch-min, 42px);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2, var(--panel2));
  cursor: pointer;
}
.questionnaire-time-choices input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2, var(--panel2))); }
.questionnaire-time-choices input:focus-visible + span { outline: var(--focus-ring, 2px solid var(--accent)); outline-offset: 2px; }
.questionnaire-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3, 12px); }
.questionnaire-review-block {
  min-inline-size: 0;
  display: grid;
  gap: 6px;
  padding: var(--sp-3, 12px);
  border: 1px solid var(--line-soft, var(--line));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-2, var(--panel2));
}
.questionnaire-review-block > label { font-weight: 800; }
.questionnaire-spheres { grid-column: 1 / -1; padding: 0; }
.questionnaire-spheres > summary > span { margin-inline-start: auto; color: var(--muted); }
.questionnaire-sphere-choice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-block-size: var(--touch-min, 42px);
  padding-block: 4px;
}
.questionnaire-sphere-choice input { inline-size: 20px; block-size: 20px; }
.questionnaire-sphere-choice > span { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 7px; align-items: center; }
.questionnaire-sphere-choice i { inline-size: 9px; block-size: 9px; border-radius: 999px; background: var(--sphere); }
.questionnaire-sphere-choice small { grid-column: 2; color: var(--muted); }

@media (max-width: 600px) {
  .questionnaire-screen { padding-block: 14px 28px; }
  .questionnaire-brand,
  .questionnaire-box { width: min(100% - 20px, 720px); }
  .questionnaire-box { padding: 18px 14px; }
  .questionnaire-review { grid-template-columns: minmax(0, 1fr); }
  .questionnaire-spheres { grid-column: 1; }
  .questionnaire-time-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .questionnaire-actions { align-items: stretch; flex-direction: column-reverse; }
  .questionnaire-actions .btn { inline-size: 100%; margin-inline-start: 0; }
  .questionnaire-input-tools > .muted { inline-size: 100%; margin-inline-start: 0; }
}

@media (pointer: coarse) {
  .questionnaire-box :is(button, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, summary) { min-block-size: var(--touch-min, 42px); }
}

@media (prefers-reduced-motion: reduce) {
  .questionnaire-box *, .questionnaire-box *::before, .questionnaire-box *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Return Shelf R2 — finite material → chosen action
   ============================================================ */
:root {
  --shelf-kicker-fg: #7ed9b0;
  --shelf-energy-fg: #ffd479;
  --shelf-practical-fg: #8fc7ff;
  --shelf-paper: color-mix(in srgb, var(--surface-2) 92%, #d9c49b 8%);
}
:root[data-theme="light"] {
  --shelf-kicker-fg: #12623d;
  --shelf-energy-fg: #704700;
  --shelf-practical-fg: #174f86;
  --shelf-paper: #fffdf8;
}

.return-shelf-shell {
  width: min(1180px, 100%);
  margin-inline: auto;
  display: grid;
  gap: var(--sp-4);
  padding-block-end: var(--sp-5);
}
.return-shelf-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 52%),
    var(--surface-1);
  box-shadow: var(--shadow-1);
}
.return-shelf-head > div { min-width: 0; }
.return-shelf-kicker {
  margin: 0 0 var(--sp-1);
  color: var(--shelf-kicker-fg);
  font: 850 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.return-shelf-head h2 {
  max-width: var(--measure-compact);
  margin: 0;
  color: var(--text-strong);
  font: 850 var(--type-title)/var(--leading-display) var(--font-display);
  overflow-wrap: anywhere;
}
.return-shelf-head h2:focus { outline: none; }
.return-shelf-head p:last-child {
  max-width: var(--measure-compact);
  margin: var(--sp-2) 0 0;
  color: var(--text-soft);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
}
.return-shelf-head > .btn { flex: 0 0 auto; min-height: var(--touch-min); color: var(--on-accent); }

.return-shelf-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-1);
}
.return-shelf-stats > div { min-width: 0; padding: var(--sp-3); display: grid; gap: 3px; }
.return-shelf-stats > div + div { border-inline-start: 1px solid var(--line-soft); }
.return-shelf-stats b {
  color: var(--text-strong);
  font: 850 var(--type-heading)/var(--leading-tight) var(--font-ui);
  overflow-wrap: anywhere;
}
.return-shelf-stats span { color: var(--text-soft); font: var(--type-meta)/var(--leading-label) var(--font-ui); }

.return-shelf-composer {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-color: color-mix(in srgb, var(--shelf-kicker-fg) 45%, var(--line-soft));
  background: var(--shelf-paper);
}
.return-shelf-composer > header { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-3); }
.return-shelf-composer h3 { margin: 0; color: var(--text-strong); font: 850 var(--type-heading)/var(--leading-ui) var(--font-ui); }
.return-shelf-close,
.return-shelf-menu {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: transparent;
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
  cursor: pointer;
}
.return-shelf-menu { width: auto; padding-inline: var(--sp-2); }
.return-shelf-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.return-shelf-field { min-width: 0; display: grid; align-content: start; gap: var(--sp-1); }
.return-shelf-field-wide { grid-column: 1 / -1; }
.return-shelf-field[hidden] { display: none; }
.return-shelf-field > span,
.return-shelf-complete-form label > span {
  color: var(--text-soft);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
}
.return-shelf-field :is(input, select, textarea),
.return-shelf-complete-form select {
  width: 100%;
  min-height: var(--touch-min);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  color: var(--text-strong);
  background: var(--surface-2);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
}
.return-shelf-field textarea { min-height: 76px; resize: vertical; }
.return-shelf-note,
.return-shelf-form-status {
  margin: 0;
  color: var(--text-soft);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
}
.return-shelf-form-status:empty { display: none; }
.return-shelf-form-status[data-error="true"] { color: var(--bad); }
.return-shelf-form-actions { display: flex; justify-content: end; flex-wrap: wrap; gap: var(--sp-2); }
.return-shelf-form-actions .btn:not(.ghost) { color: var(--on-accent); }

.return-shelf-inline-error {
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--bad) 55%, var(--line-soft));
  border-radius: var(--radius-md);
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 8%, var(--surface-1));
  font: 750 var(--type-control)/var(--leading-prose) var(--font-ui);
}
.return-shelf-expired {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.return-shelf-expired p { margin: 0; color: var(--text-soft); font: var(--type-control)/var(--leading-prose) var(--font-ui); }

.return-shelf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.return-shelf-toolbar > p { margin: 0; color: var(--text-soft); font: var(--type-meta)/var(--leading-label) var(--font-ui); }
.return-shelf-filters { display: inline-grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: var(--sp-1); }
.return-shelf-filters button {
  min-height: var(--touch-min);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding-inline: var(--sp-3);
  color: var(--text-soft);
  background: var(--surface-1);
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
  cursor: pointer;
}
.return-shelf-filters button.active {
  border-color: var(--shelf-kicker-fg);
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px var(--shelf-kicker-fg);
}

.return-shelf-batch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.return-shelf-item {
  min-width: 0;
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-color: var(--line-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, currentColor 4%, transparent), transparent 42%),
    var(--shelf-paper);
  color: var(--shelf-energy-fg);
}
.return-shelf-item.is-practical { color: var(--shelf-practical-fg); }
.return-shelf-item::before {
  content: '';
  position: absolute;
  inset: var(--sp-2) auto var(--sp-2) 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: currentColor;
}
.return-shelf-item > header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.return-shelf-kind {
  color: currentColor;
  font: 850 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.return-shelf-item h3 {
  margin: 0;
  color: var(--text-strong);
  font: 850 var(--type-heading)/var(--leading-ui) var(--font-ui);
  overflow-wrap: anywhere;
}
.return-shelf-item h3:focus { outline: none; }
.return-shelf-why { margin: 0; display: grid; gap: var(--sp-1); }
.return-shelf-why span,
.return-shelf-context,
.return-shelf-practical dt { color: var(--text-soft); font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); }
.return-shelf-why b { color: var(--text-strong); font: 750 var(--type-body)/var(--leading-prose) var(--font-ui); overflow-wrap: anywhere; }
.return-shelf-practical { margin: 0; display: grid; gap: var(--sp-2); }
.return-shelf-practical > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: var(--sp-2); }
.return-shelf-practical dd { min-width: 0; margin: 0; color: var(--text-strong); font: var(--type-control)/var(--leading-prose) var(--font-ui); overflow-wrap: anywhere; }
.return-shelf-own-note,
.return-shelf-context { margin: 0; overflow-wrap: anywhere; }
.return-shelf-own-note { padding: var(--sp-2); border-inline-start: 2px solid var(--line-strong); color: var(--text-soft); font: var(--type-control)/var(--leading-prose) var(--font-ui); }
.return-shelf-context span { color: var(--text-strong); }
.return-shelf-source { width: 100%; min-height: var(--touch-min); white-space: normal; overflow-wrap: anywhere; }
.return-shelf-complete-form { display: grid; gap: var(--sp-2); margin-block-start: auto; padding-block-start: var(--sp-2); border-block-start: 1px solid var(--line-soft); }
.return-shelf-complete-form label { min-width: 0; display: grid; gap: var(--sp-1); }
.return-shelf-complete-form > .btn { min-height: var(--touch-min); color: var(--on-accent); }

.return-shelf-state { grid-column: 1 / -1; display: grid; justify-items: start; gap: var(--sp-2); padding: var(--sp-4); }
.return-shelf-state :is(h3, p) { margin: 0; }
.return-shelf-state h3 { color: var(--text-strong); font: 850 var(--type-heading)/var(--leading-ui) var(--font-ui); }
.return-shelf-state p { max-width: var(--measure-compact); color: var(--text-soft); font: var(--type-body)/var(--leading-prose) var(--font-ui); }
.return-shelf-state.is-error { border-color: color-mix(in srgb, var(--bad) 55%, var(--line-soft)); }
.return-shelf-state .btn { min-height: var(--touch-min); color: var(--on-accent); }
.return-shelf-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); border-block: 1px solid var(--line-soft); }
.return-shelf-footer p { max-width: var(--measure-compact); margin: 0; color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }
.return-shelf-footer .btn { min-height: var(--touch-min); }

.return-shelf-archive { padding: 0; }
.return-shelf-archive > summary {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  padding: var(--sp-3);
  color: var(--text-strong);
  font: 850 var(--type-control)/var(--leading-ui) var(--font-ui);
  cursor: pointer;
}
.return-shelf-archive-list { display: grid; padding: 0 var(--sp-3) var(--sp-3); }
.return-shelf-archive-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-2); border-block-start: 1px solid var(--line-soft); }
.return-shelf-archive-row > span { min-width: 0; }
.return-shelf-archive-row :is(b, small) { display: block; overflow-wrap: anywhere; }
.return-shelf-archive-row b { color: var(--text-strong); font: 800 var(--type-control)/var(--leading-ui) var(--font-ui); }
.return-shelf-archive-row small { margin-block-start: 3px; color: var(--text-soft); font: var(--type-meta)/var(--leading-label) var(--font-ui); }
.return-shelf-archive-row .btn { min-height: var(--touch-min); }

.return-shelf-delete-overlay { padding: var(--sp-3); }
.return-shelf-delete-dialog {
  width: min(460px, 100%);
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-raised);
}
.return-shelf-delete-dialog h2 { margin: 0; color: var(--text-strong); font: 850 var(--type-title)/var(--leading-display) var(--font-display); }
.return-shelf-delete-dialog h2:focus { outline: none; }
.return-shelf-delete-dialog > p { margin: 0; color: var(--text-soft); font: var(--type-body)/var(--leading-prose) var(--font-ui); }
.return-shelf-delete-name { padding: var(--sp-2); border-inline-start: 3px solid var(--bad); color: var(--text-strong) !important; font-weight: 800 !important; }
.return-shelf-delete-dialog > div { display: flex; justify-content: end; gap: var(--sp-2); }
.return-shelf-delete-dialog .modal-x,
.return-shelf-delete-dialog .btn { min-width: var(--touch-min); min-height: var(--touch-min); }

.return-shelf-shell :is(button, input, select, textarea, summary):focus-visible,
.return-shelf-delete-dialog :is(button, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .return-shelf-item { transition: border-color 140ms ease, transform 140ms ease; }
  .return-shelf-item:hover { border-color: var(--line-strong); transform: translateY(-2px); }
  .return-shelf-filters button:hover,
  .return-shelf-menu:hover,
  .return-shelf-close:hover { border-color: var(--line-strong); color: var(--text-strong); }
}

@media (min-width: 901px) {
  .return-shelf-shell { gap: var(--sp-3); }
  .return-shelf-head { padding: var(--sp-3); }
  .return-shelf-stats > div { padding: var(--sp-2) var(--sp-3); }
  .return-shelf-item { gap: var(--sp-2); padding: var(--sp-3); }
  .return-shelf-complete-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-2); }
  .return-shelf-complete-form > .btn { width: auto; padding-inline: var(--sp-3); white-space: nowrap; }
}

@media (max-width: 900px) {
  .return-shelf-batch { grid-template-columns: minmax(0, 1fr); }
  .return-shelf-item { width: min(720px, 100%); }
}

@media (max-width: 600px) {
  body:has(.return-shelf-shell) .navrow .navsec-l { max-inline-size: 100%; overflow-wrap: anywhere; hyphens: auto; }
  .return-shelf-shell { gap: var(--sp-3); padding-block-end: calc(76px + env(safe-area-inset-bottom)); }
  .return-shelf-head { display: grid; align-items: start; padding: var(--sp-3); }
  .return-shelf-head > .btn { width: 100%; }
  .return-shelf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .return-shelf-stats > div { padding: var(--sp-2); }
  .return-shelf-stats b { font-size: var(--type-control); line-height: var(--leading-ui); }
  .return-shelf-stats span { font-size: var(--type-floor); overflow-wrap: anywhere; }
  .return-shelf-composer,
  .return-shelf-item { padding: var(--sp-3); }
  .return-shelf-form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .return-shelf-field-wide { grid-column: auto; }
  .return-shelf-field :is(input, select, textarea),
  .return-shelf-complete-form select { font-size: max(16px, var(--type-control)); }
  .return-shelf-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .return-shelf-toolbar { align-items: end; }
  .return-shelf-filters { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .return-shelf-filters button { min-width: 0; padding-inline: var(--sp-1); }
  .return-shelf-toolbar > p { display: none; }
  .return-shelf-expired,
  .return-shelf-footer { align-items: stretch; display: grid; }
  .return-shelf-footer .btn { width: 100%; }
  .return-shelf-archive-row { align-items: start; }
  .return-shelf-delete-dialog { padding: var(--sp-3); }
  .return-shelf-delete-dialog > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .return-shelf-shell :is(button, input, select, textarea, summary),
  .return-shelf-delete-dialog :is(button, input, select, textarea) { min-height: var(--touch-min); }
}

@media (prefers-reduced-motion: reduce) {
  .return-shelf-shell *,
  .return-shelf-shell *::before,
  .return-shelf-shell *::after,
  .return-shelf-delete-overlay *,
  .return-shelf-delete-overlay *::before,
  .return-shelf-delete-overlay *::after {
    animation: none !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --bg: #0f1320;
  --panel: #171c2e;
  --panel2: #1f2640;
  --line: #2a3250;
  --text: #e7ebf5;
  --muted: #99a2c0;
  --accent: #6c8cff;
  --good: #46c46b;
  --warn: #f0b34a;
  --bad: #e0526a;
  --surface-0: #090d17;
  --surface-1: #0f1422;
  --surface-2: #171d31;
  --surface-3: #202840;
  --surface-4: #2a3454;
  --line-soft: rgba(132, 150, 205, 0.16);
  --line-strong: rgba(132, 150, 205, 0.34);
  --text-strong: #f7f9ff;
  --text-soft: #c2c9dd;
  --accent-2: #4fd6ff;
  --accent-warm: #e0a23e;
  --rarity-common: #8b97b5;
  --rarity-rare: #4f9ff7;
  --rarity-epic: #b06ff0;
  --rarity-legendary: #e0a23e;
  --character-kicker-fg: #4fd6ff;
  --character-subtab-active-fg: #4fd6ff;
  --character-subtab-active-border: #6c8cff;
  --today-kicker-fg: #4fd6ff;
  --today-kicker-good-fg: #46c46b;
  --today-kicker-done-fg: #99a2c0;
  --today-subtab-active-fg: #4fd6ff;
  --today-subtab-active-border: #6c8cff;
  --today-nudge-fg: #ffd479;
  --today-nudge-border: #e0a23e;
  --today-nudge-danger-fg: #ffb3b3;
  --header-gold-fg: #e7c558;
  --header-streak-fg: #f0b34a;
  --shadow-card: 0 16px 46px rgba(0, 0, 0, 0.32);
  --shadow-raised: 0 22px 70px rgba(0, 0, 0, 0.42);
  --glow-active: 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 20%, transparent);
  --glow-legendary: 0 0 0 1px rgba(224, 162, 62, 0.48), 0 0 30px rgba(224, 162, 62, 0.18);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 140ms;
  --dur-normal: 240ms;
  --dur-slow: 520ms;
  --layout-max: 1080px;
  --work-max: 720px;
  --touch-min: 42px;
  --on-accent: #090d17;
  --on-bad: #090d17;
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--text-strong);
  --font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Satoru Display", Georgia, serif;
  --font-number: "Satoru Display", Georgia, serif;
  --font-data: var(--font-ui);
  --type-floor: 11px;
  --type-meta: 12px;
  --type-control: 14px;
  --type-body: 15px;
  --type-heading: 16px;
  --type-brand: clamp(18px, 1.4vw, 22px);
  --type-title: clamp(20px, 3vw, 34px);
  --type-hero: clamp(21px, 4vw, 42px);
  --type-ceremony: clamp(48px, 10vw, 96px);
  --leading-tight: 1;
  --leading-display: 1.12;
  --leading-label: 1.2;
  --leading-ui: 1.35;
  --leading-prose: 1.5;
  --tracking-natural: 0em;
  --tracking-caps: .08em;
  --tracking-ceremony: .12em;
  --measure-prose: 68ch;
  --measure-compact: 55ch;
  --measure-dialog: 34ch;
  --number-slot-timer: 5.5ch;
  --number-slot-level: 3ch;
  --number-slot-kpi: 7ch;
  --number-slot-data: 8ch;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --den-wall: #2c2740;
  --den-floor: #3a3450;
}
/* Светлая тема (#тема): переопределяем палитру — компоненты используют переменные */
:root[data-theme="light"] {
  --bg: #eef1f8;
  --panel: #ffffff;
  --panel2: #f1f4fb;
  --line: #d9dfeb;
  --text: #1b2236;
  --muted: #5f6883;
  --good: #2ea84f;
  --warn: #c98a16;
  --bad: #d23a55;
  --surface-0: #e7ebf4;
  --surface-1: #f3f6fb;
  --surface-2: #ffffff;
  --surface-3: #eef2fa;
  --surface-4: #e2e8f4;
  --line-soft: rgba(72, 87, 125, 0.14);
  --line-strong: rgba(72, 87, 125, 0.26);
  --text-strong: #101728;
  --text-soft: #3d4964;
  --rarity-common: #59657f;
  --rarity-rare: #1768b8;
  --rarity-epic: #7432a5;
  --rarity-legendary: #805100;
  --character-kicker-fg: #075f78;
  --character-subtab-active-fg: #075f78;
  --character-subtab-active-border: #075f78;
  --today-kicker-fg: #075f78;
  --today-kicker-good-fg: #0f612b;
  --today-kicker-done-fg: #4b556f;
  --today-subtab-active-fg: #075f78;
  --today-subtab-active-border: #075f78;
  --today-nudge-fg: #6f4700;
  --today-nudge-border: #8a5a00;
  --today-nudge-danger-fg: #9b2336;
  --header-gold-fg: #6f5300;
  --header-streak-fg: #744600;
  --on-bad: #fff;
  --shadow-card: 0 14px 36px rgba(40, 52, 90, 0.12);
  --shadow-raised: 0 20px 58px rgba(40, 52, 90, 0.16);
  --shadow: 0 8px 28px rgba(40, 52, 90, 0.12);
  --den-wall: #efe7da;
  --den-floor: #e0d5c2;
}
:root[data-theme="light"] #topbar { background: linear-gradient(180deg, var(--bg) 70%, rgba(238, 241, 248, 0.85)); }
:root[data-theme="light"] body { background: radial-gradient(1200px 600px at 80% -10%, rgba(108, 140, 255, 0.07), transparent 60%), var(--bg); }

* { box-sizing: border-box; }

/* Стандартный визуально-скрытый, но доступный скринридеру паттерн. Класс уже
   использовался в разметке (заметки, схватки, переименование питомца, теперь и
   пикер сферы) — но нигде не был определён, поэтому все эти подписи были видны
   на экране вместо того, чтобы озвучиваться. Одно определение чинит все места. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

body {
  margin: 0;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(108, 140, 255, 0.1), transparent 60%), var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { max-width: 1000px; margin: 0 auto; padding: 0 18px 80px; }

/* ---------- Topbar / character ---------- */
#topbar {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, var(--bg) 70%, rgba(15, 19, 32, 0.85));
  backdrop-filter: blur(6px);
  padding: 16px 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { font-size: 26px; }
.brand h1 { font-size: 20px; margin: 0; letter-spacing: 0.3px; }

.char-summary { margin-top: 12px; }
.char-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.char-level { font-size: 15px; color: var(--muted); white-space: nowrap; }
.char-level b { color: var(--text); font-size: 20px; }
.streak { color: var(--header-streak-fg); font-weight: 600; white-space: nowrap; }

.xp-bar {
  position: relative; flex: 1; min-width: 180px; height: 16px;
  background: var(--panel2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line);
}
.xp-bar > span {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  background: linear-gradient(90deg, var(--accent), #9b7cff); border-radius: 999px;
  transition: width 0.5s cubic-bezier(.2,.8,.2,1);
}
.xp-bar > i {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.skills-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.skill-chip {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; font-size: 12px;
}
.skill-chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.skill-chip .sk-lvl { color: var(--muted); }
.skill-chip .sk-bar { width: 46px; height: 6px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.skill-chip .sk-bar > span { display: block; height: 100%; border-radius: 999px; }

/* ---------- Nav ---------- */
#nav { margin-top: 14px; }
/* Верхний ряд — 5 разделов + шестерёнка */
.navrow { display: flex; gap: 6px; align-items: center; }
.navsec {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--muted); font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.navsec:hover { color: var(--text); background: var(--panel); }
.navsec.active { color: var(--text); background: var(--panel2); }
.navsec.locked { opacity: 0.55; }
.navsec-lock { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.navgear { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 18px; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
.navgear:hover { color: var(--text); background: var(--panel); }
.navgear.active { color: var(--text); background: var(--panel2); }
/* Второй ряд — под-вкладки активного раздела */
.navsub { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.navsubtab {
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.navsubtab:hover { color: var(--text); }
/* активная под-вкладка: тинт-фон + акцент-текст — читаемо при ЛЮБОМ акценте/теме (раньше белый текст на ярком акценте/циане был не виден). fb_mqm25nc3gqc5 */
.navsubtab.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel2)); border-color: var(--accent); font-weight: 700; }
/* Скачать вложение фидбека */
.rep-att { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rep-dl { font-size: 12px; color: var(--accent); }

/* ---------- Cards & layout ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 12px; font-size: 15px; }
.muted { color: var(--muted); }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 4px 2px 8px; }

/* ---------- Forms / inputs ---------- */
input, select, textarea, button {
  font-family: inherit; font-size: 14px; color: var(--text);
}
input, select, textarea {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { width: 100%; min-height: 70px; resize: vertical; }

.btn, .add-row button, .shutdown button, .settings-actions button {
  background: var(--accent); color: #fff; border: none; border-radius: 9px;
  padding: 9px 16px; font-weight: 600; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: var(--bad); }

.add-row {
  display: grid; grid-template-columns: 1fr 150px 118px 120px auto; gap: 8px; align-items: center;
}
.add-row input[name="title"] { width: 100%; }

.card-addquest .add-row {
  grid-template-columns: minmax(0, 1fr) minmax(112px, 150px) minmax(144px, 160px) minmax(104px, 120px) auto;
  gap: var(--sp-2);
  align-items: end;
}

.card-addquest .add-field,
.card-addquest .dur-part {
  display: grid;
  min-width: 0;
  gap: var(--sp-1);
}

.card-addquest :is(.add-field-label, .dur-part-label) {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  line-height: var(--leading-ui);
  font-weight: 700;
}

.card-addquest :is(input, select) {
  width: 100%;
  font-size: var(--type-control);
  line-height: var(--leading-prose);
}

.card-addquest button {
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}

.card-addquest .dur-input.is-labeled {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1);
  width: 100%;
}

.card-addquest .dur-part-control {
  display: flex;
  align-items: center;
  min-width: 0;
}

.card-addquest .dur-part-control input { width: 100%; }
.card-addquest .dur-input i {
  font-size: var(--type-meta);
  line-height: var(--leading-ui);
}

/* Справочник сфер: «?» рядом с чипом + модалка объяснения (fb_mrki1qlzwuwu) */
.ob-chip-wrap { display: inline-flex; align-items: stretch; gap: 3px; }
.ob-chip-q {
  flex: 0 0 auto; width: 22px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  font-size: 12px; font-weight: 700; line-height: 1; padding: 0;
}
.ob-chip-q:hover { border-color: var(--accent); color: var(--accent); }
.sg-box .sg-what { font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.sg-row {
  display: grid; gap: 2px; padding: 9px 11px; margin-bottom: 8px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
}
.sg-row b { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); font-weight: 700; }
.sg-row span { font-size: 13.5px; line-height: 1.45; }

/* Бэклог «Трение»: авто-подстановка сферы (инфо-чип) + «повторить вчера» в пустом дне */
.cat-chip-auto { cursor: default; opacity: .85; }
.empty-repeat { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.empty-repeat .btn { align-self: stretch; }

/* Питч на входе для холодного визитёра (альфа-запуск) */
.auth-pitch { max-width: 420px; margin: 0 auto 18px; padding: 0 18px; text-align: center; }
.auth-pitch .ap-lead { font-size: 14.5px; line-height: 1.5; margin: 0 0 12px; color: var(--text); }
.auth-pitch .ap-points { display: grid; gap: 7px; justify-items: center; margin-bottom: 12px; }
.auth-pitch .ap-points span {
  font-size: 12.5px; line-height: 1.4; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; max-width: 100%;
}
.auth-pitch .ap-alpha { font-size: 11.5px; line-height: 1.45; margin: 0; }
.auth-cta { font-size: 15px; padding: 12px; }
.auth-or { text-align: center; font-size: 12px; margin: 12px 0 8px; }

/* 🚩 Дерево v3: вехи — хребет реальных достижений (TREE-V3-PLAN.md) */
.tree-node.milestone {
  border-style: dashed;
  border-color: color-mix(in srgb, #e0a23e 55%, var(--line));
  background: color-mix(in srgb, #e0a23e 7%, var(--panel));
}
.tree-node.milestone.unlocked {
  border-style: solid; border-color: #e0a23e;
  background: color-mix(in srgb, #e0a23e 16%, var(--panel));
  box-shadow: 0 0 14px color-mix(in srgb, #e0a23e 30%, transparent);
}
.tree-node.milestone .tn-cost { color: #e0a23e; font-weight: 700; }
.ms-box .sg-what { font-size: 14px; line-height: 1.5; margin: 0 0 10px; }

/* 🌳 Гайд Тени внутри дерева навыков (fb_mrnjz1qsjmk8) */
.tree-guide { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.tree-guide .tg-row { display: flex; gap: 12px; align-items: flex-start; }
.tree-guide .tut-mascot { flex: 0 0 auto; }
.tree-guide .tg-say { font-size: 13.5px; line-height: 1.5; min-width: 0; }
.tree-guide .tg-say ol { margin: 6px 0; padding-left: 20px; display: grid; gap: 4px; }
.tree-guide .tg-say > span { display: block; font-size: 12.5px; margin-top: 4px; }
.tree-guide .tg-acts { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.tree-guide .tg-hint { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.tree-guide .tg-hint.muted { color: var(--muted); font-weight: 400; }

/* 🕯 «Заход» — вечерний вход в любимое дело (fb_mr2afy1ho0hu / fb_mrmr1frhpf7z) */
.entry-nudge { border-color: color-mix(in srgb, #e0a23e 45%, var(--line)); }
.entry-nudge .nudge { color: inherit; }
.entry-box .ob-chip { cursor: pointer; }
.entry-box .en-step { border-color: color-mix(in srgb, #e0a23e 40%, var(--line)); }
.entry-box .propose-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Нудж «жизнь шла, а записать было некогда» + выбор дня в «Итоге дня» (fb_mragb9rg2tkz) */
.daylog-nudge { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }
.dayrec-day {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); margin: 0 0 10px;
}
.dayrec-day input[type="date"] { flex: 0 1 190px; min-width: 0; }

/* «✓ в свой день» — засчитать просроченный квест задним числом (fb_mr4qhq6gy30w) */
.t-backdate {
  background: transparent; border: 1px dashed var(--muted); color: var(--muted);
  border-radius: 8px; padding: 2px 6px; font-size: 12px; line-height: 1.1;
  cursor: pointer; white-space: nowrap;
}
.t-backdate sub { font-size: 9px; margin-left: 2px; vertical-align: baseline; opacity: .85; }
.t-backdate:hover { border-color: var(--good); color: var(--good); border-style: solid; }

/* Ввод длительности «часы + минуты» (fb_mrkzpi0z3zk2) — данные всё так же в минутах */
.dur-input { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.dur-input input[type="number"] {
  width: 100%; min-width: 0; flex: 1 1 0; text-align: center;
  padding-left: 4px; padding-right: 0; -moz-appearance: textfield;
}
.dur-input input[type="number"]::-webkit-outer-spin-button,
.dur-input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dur-input i {
  font-style: normal; font-size: 11px; color: var(--muted);
  flex: 0 0 auto; margin-right: 2px; user-select: none;
}

/* ---------- Task list ---------- */
.tasks { list-style: none; margin: 0; padding: 0; }
.task {
  display: grid; grid-template-columns: 30px 1fr auto auto auto auto 28px;
  align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--line);
}
.task:last-child { border-bottom: none; }

/* ◆ Ядро дня. Метка приглушена, пока не выбрана: ядро — это осознанное решение,
   а не ещё один призыв что-то нажать. Выбранное дело получает левую полосу,
   чтобы ядро читалось в списке одним взглядом, без подсчёта значков. */
.t-core {
  background: none; border: none; cursor: pointer; padding: 0 5px 0 0;
  font-size: 11px; line-height: 1; color: var(--muted); opacity: .38;
  transition: opacity .15s ease, color .15s ease;
  min-width: 24px; min-height: 24px;
}
.t-core:hover { opacity: .8; }
.t-core.on { opacity: 1; color: var(--accent); }
.task.is-core { box-shadow: inset 3px 0 0 -1px var(--accent); }
.task.is-core.done { box-shadow: inset 3px 0 0 -1px var(--good); }
@media (hover: none) { .t-core { opacity: .55; min-width: 30px; min-height: 30px; } }

/* Закрытый день и закрытое ядро — герой меняет тон, а не только текст. */
.today-hero.is-coredone .th-kicker { color: var(--today-kicker-good-fg); }
.today-hero.is-daydone .th-kicker { color: var(--today-kicker-done-fg); }
.task .check {
  width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line);
  background: var(--panel2); color: #fff; cursor: pointer; padding: 0; line-height: 1;
}
.task.done .check { background: var(--good); border-color: var(--good); }
.task.done .t-title { text-decoration: line-through; color: var(--muted); }
.t-title { font-weight: 500; }
.t-skill {
  font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  color: #fff; background: color-mix(in srgb, var(--c) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
}
.t-skill-sel {
  font-size: 11px; padding: 3px 7px; border-radius: 999px; max-width: 150px;
  color: #fff; background: color-mix(in srgb, var(--c) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
  cursor: pointer; appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
}
.t-skill-sel:hover { background: color-mix(in srgb, var(--c) 45%, transparent); }
.t-skill-sel.missing { border-color: var(--warn); color: var(--warn); }
.t-skill-sel option { color: var(--text); background: var(--panel); }
.t-cats { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; background: none; border: none; padding: 0; cursor: pointer; max-width: 220px; }
.t-cat {
  font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  color: #fff; background: color-mix(in srgb, var(--c) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
}
.t-cat.missing { --c: var(--warn); color: var(--warn); }
.t-cats:hover .t-cat { filter: brightness(1.15); }
.cat-list { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; max-height: 50vh; overflow-y: auto; }
.cat-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.cat-opt:hover { background: var(--panel2); }
.cat-opt.is-sub { padding-left: 26px; }
/* Роль сферы в квесте: основная / фон (этап 2 LIFE-CAPTURE-PLAN.md) */
.cat-opt .cat-role { margin-left: auto; flex: 0 0 auto; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 3px 9px; font-size: 11px; cursor: pointer; min-height: 26px; }
.cat-opt .cat-role:hover { border-color: var(--accent); color: var(--fg); }
.cat-opt .cat-role.is-main { border-color: var(--accent); color: var(--accent); }
.cat-opt .cat-role.is-layer { border-style: dashed; color: var(--fg); opacity: .85; }
/* Фоновый слой на карточке квеста — пунктиром и приглушённо: виден, но не спорит с основной */
.t-cat.is-layer { border-style: dashed; opacity: .62; }
.cat-opt input { width: 17px; height: 17px; accent-color: var(--accent); }
.t-est, .t-diff { font-size: 12px; color: var(--muted); white-space: nowrap; }
.t-xp { font-size: 12px; font-weight: 700; color: var(--good); white-space: nowrap; }
.task .del {
  background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; opacity: 0.5;
}
.task .del:hover { color: var(--bad); opacity: 1; }

.daystat { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.daystat b { color: var(--text); }

.overdue { border-color: var(--warn); }
.overdue h3 { color: var(--warn); }

/* ---------- Stats ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.kpi .v { font-size: 26px; font-weight: 700; }
.kpi .l { font-size: 12px; color: var(--muted); margin-top: 2px; }

.chart { width: 100%; height: auto; display: block; }
.chart .bar-val { fill: var(--muted); font-size: 10px; }
.chart .bar-lbl { fill: var(--muted); font-size: 9px; }

.reflections { list-style: none; padding: 0; margin: 0; }
.reflections li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.reflections .date { color: var(--muted); font-size: 12px; }

/* ---------- Settings ---------- */
.skill-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.skill-edit input[type="color"] { padding: 2px; width: 44px; height: 38px; cursor: pointer; flex: 0 0 auto; }
.skill-edit input[data-field="name"] { flex: 1 1 130px; min-width: 0; }
.skill-edit select { flex: 1 1 120px; min-width: 0; }
.skill-edit .del { flex: 0 0 auto; }
.skill-edit.is-sub { margin-left: 22px; border-left: 2px solid var(--line); padding-left: 8px; }
.skill-edit.se-hidden { display: none; }
.skill-edit.is-archived { opacity: .6; }
.se-archived-badge { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px 8px; white-space: nowrap; }
.se-move { display: inline-flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }
.se-move button { background: var(--panel2); border: 1px solid var(--line); color: var(--muted); border-radius: 5px; width: 22px; height: 17px; line-height: 1; font-size: 9px; cursor: pointer; padding: 0; }
.se-move button:hover { color: var(--text); border-color: var(--accent); }
.se-collapse { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; width: 18px; flex: 0 0 auto; padding: 0; }
.se-collapse:hover { color: var(--text); }
.se-collapse-spacer { width: 18px; flex: 0 0 auto; }
.knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.knob label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.knob input { width: 100%; }
.settings-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast {
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; font-weight: 600;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
/* ---------- Stage 1: gold, focus timer, habits ---------- */
.gold-pill { color: var(--header-gold-fg); font-weight: 600; white-space: nowrap; }

.task { grid-template-columns: 30px 1fr auto auto auto auto 30px 28px; }
.t-time { font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.t-time:hover { color: var(--text); text-decoration: underline dotted; }
.focus {
  width: 30px; height: 26px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); cursor: pointer; padding: 0; font-size: 12px;
}
.focus:hover { border-color: var(--accent); }
.focus.active { background: var(--accent); border-color: var(--accent); }
.habit-streak { font-size: var(--type-meta); line-height: var(--leading-label); color: var(--header-streak-fg); white-space: nowrap; }

.timer-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.timer-clock { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.timer-task { color: var(--muted); font-size: 13px; margin-top: 2px; }
.timer-controls { display: flex; gap: 8px; }

.weekdays { display: flex; gap: 4px; flex-wrap: wrap; }
.weekdays label {
  font-size: 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel2); cursor: pointer; user-select: none;
}
.weekdays label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.weekdays input { display: none; }
.habit-edit { display: grid; grid-template-columns: 1.5fr 1fr 1fr 104px auto 30px; gap: 8px; align-items: center; margin-bottom: 8px; }

@media (max-width: 720px) {
  .add-row { grid-template-columns: 1fr 1fr; }
  .add-row input[name="title"] { grid-column: 1 / -1; }
  .task { grid-template-columns: 30px 1fr auto 30px 28px; }
  .task .t-skill, .task .t-skill-sel, .task .t-diff, .task .t-xp { display: none; }
  .habit-edit { grid-template-columns: 1fr 1fr; }
}

/* ---------- Calendar ---------- */
.cal { position: relative; border-top: 1px solid var(--line); margin-top: 6px; }
.cal-row { position: absolute; left: 0; right: 0; height: 42px; border-bottom: 1px dashed var(--line); }
.cal-h { position: absolute; left: 0; top: -8px; font-size: 11px; color: var(--muted); background: var(--panel); padding-right: 6px; }
.cal-block {
  position: absolute; left: 52px; right: 8px; border-radius: 7px; padding: 4px 8px; font-size: 12px; overflow: hidden;
  background: color-mix(in srgb, var(--c) 28%, var(--panel2)); border-left: 3px solid var(--c); color: var(--text);
  display: flex; align-items: flex-start; gap: 4px; justify-content: space-between;
}
.cal-block.done { opacity: 0.55; text-decoration: line-through; }
.cal-block b { font-variant-numeric: tabular-nums; }
.cal-b-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-dur { color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-x {
  flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1;
  opacity: 0.55; padding: 0 2px; border-radius: 4px;
}
.cal-x:hover { color: var(--bad); opacity: 1; background: color-mix(in srgb, var(--bad) 14%, transparent); }
.cal-hint { font-size: 12px; margin: -2px 0 6px; }
.cal-schedule { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.cal-schedule #cal-dur { width: 78px; }
.cal-dur-unit { font-size: 12px; margin-left: -4px; }

/* ---------- Вкладка «Календарь» (Apple-стиль) ---------- */
.calv-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.calv-title h2 { font-size: 19px; margin: 0; }
.calv-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.calv-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 5px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--text);
}
.calv-day:hover { border-color: var(--accent); }
.calv-day.active { background: color-mix(in srgb, var(--accent) 22%, var(--panel2)); border-color: var(--accent); }
.calv-day.is-today .cd-n { color: var(--accent); font-weight: 800; }
.cd-wd { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.cd-n { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cd-dot { font-size: 9.5px; min-width: 15px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; line-height: 14px; }
.cd-dot-empty { height: 14px; }
.calv-grid .cal-row { height: 48px; }
.calv-block { cursor: grab; }
.calv-block:active { cursor: grabbing; }
.cal-check { flex: none; width: 17px; height: 17px; font-size: 11px; margin-top: 1px; }
.calv-now { position: absolute; left: 44px; right: 0; height: 0; border-top: 2px solid var(--bad); z-index: 3; pointer-events: none; }
.calv-now::before { content: ''; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.calv-indicator {
  position: absolute; left: 44px; right: 0; height: 0; border-top: 2px dashed var(--accent); z-index: 4; pointer-events: none;
}
.calv-indicator::after { content: attr(data-time); position: absolute; left: 4px; top: -18px; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--panel); padding: 1px 5px; border-radius: 4px; }
.calv-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.calv-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12.5px; cursor: grab;
  background: color-mix(in srgb, var(--c) 22%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: 999px;
}
.calv-chip:active { cursor: grabbing; }
/* режимы день/месяц + напоминания */
.cal-modes { display: inline-flex; background: var(--panel2); border-radius: 999px; padding: 2px; gap: 2px; }
.cal-mode { border: none; background: none; color: var(--muted); font-size: 12.5px; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.cal-mode.active { background: var(--accent); color: #fff; font-weight: 600; }
.cal-remind.on { border-color: var(--accent); color: var(--accent); }
/* месячная сетка */
.cm-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.cm-wd span { text-align: center; font-size: 11px; color: var(--muted); text-transform: uppercase; }
.cm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
.cm-cell { position: relative; aspect-ratio: 1 / 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--text); }
.cm-cell:hover { border-color: var(--accent); }
.cm-out { opacity: 0.38; }
.cm-today .cm-n { color: var(--accent); font-weight: 800; }
.cm-sel { background: color-mix(in srgb, var(--accent) 22%, var(--panel2)); border-color: var(--accent); }
.cm-n { font-size: 15px; font-variant-numeric: tabular-nums; }
.cm-dot { font-size: 9.5px; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; line-height: 15px; }

/* ---------- Goals ---------- */
.goal-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.goal-form input[name="title"] { flex: 1 1 100%; }
.goal-form input, .goal-form select { flex: 1 1 120px; min-width: 0; }
.goal-form button[type="submit"] { flex: 0 0 auto; }
.goal-type { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); }
.type-recurring { color: #5fbf5f; } .type-short { color: #4f86f7; } .type-mid { color: #d8a44b; } .type-long { color: #e0526a; }
.goal-xp { font-size: 11px; color: #e7c558; font-weight: 600; }
.goal-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.gfilters { display: flex; gap: 6px; flex-wrap: wrap; }
.gfilter { background: var(--panel2); border: 1px solid var(--line); color: var(--muted); padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; }
.gfilter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.goal-archived { opacity: 0.6; }
.goal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.goal-head h3 { margin: 0 0 6px; }
/* хлебная крошка «зачем» — цепочка вверх до Севера */
.goal-why { font-size: 11.5px; color: var(--muted); margin: -2px 0 4px; line-height: 1.4; cursor: default; }
.goal-why-det > summary { list-style: none; cursor: pointer; }
.goal-why-det > summary::-webkit-details-marker { display: none; }
.goal-why-more { opacity: 0.5; letter-spacing: 1px; }
.goal-why-full { font-size: 11px; color: var(--muted); padding: 3px 0 5px 14px; line-height: 1.5; }
.goal-desc { font-size: 13px; color: var(--text); opacity: 0.75; margin: 2px 0 8px; line-height: 1.5; white-space: pre-wrap; }
/* статус-бейджи целей */
.goal-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.gs-active { color: #5fbf7a; background: color-mix(in srgb, #5fbf7a 16%, transparent); }
.gs-wait { color: #e0a23e; background: color-mix(in srgb, #e0a23e 16%, transparent); }
.gs-pause { color: var(--muted); background: var(--panel2); }
.gs-maint { color: #4f86f7; background: color-mix(in srgb, #4f86f7 16%, transparent); }
.gs-slip { color: #e0526a; background: color-mix(in srgb, #e0526a 16%, transparent); }
.gs-done { color: #5fbf7a; background: color-mix(in srgb, #5fbf7a 20%, transparent); }
.goal-status-sel { font-size: 12px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
/* числовой блок цели */
.gm-block { background: var(--panel2); border-radius: 10px; padding: 8px 12px; margin: 2px 0 8px; }
.gm-head { font-size: 14px; margin-bottom: 6px; }
.gm-head b { font-size: 17px; font-variant-numeric: tabular-nums; color: var(--accent); }
.metric-form { display: flex; gap: 8px; align-items: center; }
.metric-form input { flex: 1 1 auto; min-width: 0; }
.gm-log { font-size: 11.5px; margin-top: 7px; }
.gm-log span { opacity: 0.7; }
/* поля «число/состояние» в форме цели */
.goal-extra { flex: 1 1 100%; }
.goal-extra summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 3px 0; user-select: none; }
.goal-extra summary:hover { color: var(--text); }
.gx-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.gx-grid input[name="mStart"], .gx-grid input[name="mTarget"] { width: 84px; flex: 0 0 auto; }
.gx-grid input[name="mUnit"] { width: 90px; flex: 0 0 auto; }
.gx-grid input[name="window"] { flex: 1 1 160px; }
.gx-arrow { color: var(--muted); }
.gx-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.goal-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.goal-deadline { color: var(--muted); }
.goal-deadline.overdue { color: var(--bad); }
.goal.goal-done { opacity: 0.75; }
.progress { height: 10px; background: var(--panel2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress > span { display: block; height: 100%; border-radius: 999px; transition: width 0.4s; }
.gsteps { list-style: none; margin: 0 0 8px; padding: 0; }
.gstep { display: grid; grid-template-columns: 26px 1fr 24px; align-items: center; gap: 8px; padding: 5px 0; }
.gstep.done span { text-decoration: line-through; color: var(--muted); }
.check.sm { width: 22px; height: 22px; font-size: 12px; }
.add-step-form { display: flex; gap: 8px; }
.add-step-form input { flex: 1; }

/* ---------- Skill tree ---------- */
.tree-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tree-tab { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--c); color: var(--text); padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.tree-tab.active { background: color-mix(in srgb, var(--c) 22%, var(--panel2)); }
.tree-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tree-points { font-size: 14px; }
.tree-scroll { overflow-x: auto; padding: 8px 0; }
.tree { position: relative; margin: 0 auto; }
.tree-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.tree-node {
  position: absolute; width: 150px; height: 70px; border-radius: 12px; padding: 8px; box-sizing: border-box;
  border: 2px solid var(--line); background: var(--panel2); text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.tree-node.locked { opacity: 0.42; }
.tree-node.available { border-color: var(--c); cursor: pointer; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent); }
.tree-node.unlocked { border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, var(--panel2)); }
.tree-node.recommend { cursor: pointer; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); animation: pulse 1.8s infinite; z-index: 2; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 34%, transparent); } }
/* капстоун — финальный узел сферы, визуально особый */
.tree-node.capstone { border-width: 2.5px; background: linear-gradient(160deg, color-mix(in srgb, #ffc24b 16%, var(--panel2)), var(--panel2)); }
.tree-node.capstone.unlocked { background: linear-gradient(160deg, color-mix(in srgb, #ffc24b 30%, var(--c)), color-mix(in srgb, var(--c) 30%, var(--panel2))); box-shadow: 0 0 14px color-mix(in srgb, #ffc24b 40%, transparent); }
.tn-crown { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 15px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.tn-title { font-weight: 700; font-size: 12.5px; line-height: 1.1; }
.tn-perks { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.tn-perk { font-size: 10px; font-weight: 700; background: color-mix(in srgb, var(--c) 18%, transparent); border-radius: 6px; padding: 1px 5px; white-space: nowrap; }
.tn-cost { font-size: 10.5px; font-weight: 700; color: var(--muted); }
/* панель активных пассивок сферы */
.tree-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.tree-active .ta-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.perk-active { font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--accent) 16%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 999px; padding: 2px 9px; }

/* Редактор дерева */
.tree-ctrls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tree.edit { cursor: default; }
.tree.edit .tree-node { cursor: grab; touch-action: none; animation: none; opacity: 1; border-style: dashed; }
.tree.edit .tree-node:active { cursor: grabbing; }
.tree-node.editing { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); background: var(--panel2); }
.tree-node.sel { border-style: solid !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.tree-panel { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tp-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.tp-grid input { width: 100%; }
.tp-reqs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; }
.tp-req { display: inline-flex; align-items: center; gap: 5px; background: var(--panel2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.tp-req input { width: auto; }
.tp-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 560px) { .tp-grid { grid-template-columns: 1fr; } }

/* ---------- Rewards & achievements ---------- */
.rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.reward { position: relative; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.rw-icon { min-height: 74px; display: grid; place-items: center; }
.rw-name { font-weight: 600; font-size: 13px; margin: 4px 0; }
.rw-cost { color: #e7c558; font-weight: 600; margin-bottom: 8px; }
.reward .del { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--muted); cursor: pointer; }
.btn.disabled, .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.reward-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reward-form input[name="name"] { flex: 1; min-width: 160px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ach { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; opacity: 0.5; }
.ach.got { opacity: 1; border-color: var(--warn); }
.ach-icon { min-height: 68px; display: grid; place-items: center; filter: grayscale(1); }
.ach.got .ach-icon { filter: none; }
.ach-title { font-weight: 600; font-size: 13px; margin-top: 4px; }
.ach-desc { font-size: 11px; color: var(--muted); }
.ach-date { font-size: 11px; color: var(--warn); margin-top: 4px; }
.ach-prog { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ---------- Weekly (Sunsama-style grid) ---------- */
.week-nav { display: flex; align-items: center; justify-content: space-between; }

.wk-grid-wrap { overflow-x: auto; padding-bottom: 8px; margin: 0 -2px; }
.wk-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(128px, 1fr));
  gap: 8px;
  min-width: 900px;
}

.wk-col {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 120px;
}
.wk-col.is-today { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.wk-col.is-past { opacity: 0.68; }
.wk-col.wk-drop { border-color: var(--accent); border-style: dashed; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.wk-load { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin: 2px 0; }
.wk-hint { font-size: 12px; margin: 0 0 8px; }
.wk-col-head { display: flex; align-items: center; gap: 5px; padding-bottom: 5px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.wk-wd { font-weight: 700; font-size: 13px; }
.wk-col.is-today .wk-wd { color: var(--accent); }
.wk-date { font-size: 11px; color: var(--muted); }
.wk-prog { font-size: 11px; background: var(--panel2); border-radius: 8px; padding: 1px 5px; color: var(--muted); margin-left: auto; }
.wk-prog.all-done { background: color-mix(in srgb, var(--good) 22%, var(--panel2)); color: var(--good); font-weight: 700; }

.wk-tasks { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wk-task {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 0; border-bottom: 1px solid var(--line);
  font-size: 12px; min-width: 0; cursor: grab;
}
.wk-task:active { cursor: grabbing; }
.wk-task.wk-dragging { opacity: 0.4; }
.wk-task:last-child { border-bottom: none; }
.wk-task.done .wk-t-title { text-decoration: line-through; color: var(--muted); }
.wk-t-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-t-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wk-empty { font-size: 11px; margin: 4px 0; }

.wk-habits-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.wk-h-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c); opacity: 0.3;
  border: 1.5px solid var(--c);
  cursor: default;
}
.wk-h-dot.done { opacity: 1; }

.wk-add-btn {
  margin-top: auto; padding-top: 4px;
  font-size: 11px; color: var(--muted); background: none;
  border: 1px dashed var(--line); border-radius: 7px;
  padding: 4px 6px; cursor: pointer; width: 100%; font-family: inherit;
  transition: border-color .15s, color .15s;
}
.wk-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.wk-add-form { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.wk-add-form input { font-size: 12px; padding: 4px 7px; }
.wk-add-form select { font-size: 12px; padding: 3px 6px; }
.wk-add-btns { display: flex; gap: 4px; }
.wk-add-btns .btn.sm { padding: 4px 10px; font-size: 12px; }

/* ---------- Goals: type guide + diff hint ---------- */
.diff-hint { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 12px; margin: 4px 0 0; }
.diff-hint > span { display: inline-flex; align-items: center; }
.cos-lock-icon { width: 20px; height: 20px; vertical-align: 0; color: var(--muted); }
.gtype-guide { margin-bottom: 12px; }
.gtype-guide summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 4px 0; user-select: none; }
.gtype-guide summary:hover { color: var(--text); }
.gtype-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gtype-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.gtype-tf { color: var(--warn); font-size: 11px; font-weight: 600; white-space: nowrap; }

@media (max-width: 720px) {
  .reward-form { grid-template-columns: 1fr 1fr; display: grid; }
  .cal-block { left: 46px; }
}

/* base styles for delete buttons & form submit buttons that lack a parent-scoped rule */
.del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.del:hover { color: var(--bad); }
.goal-form button[type="submit"], .reward-form button[type="submit"] {
  background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-weight: 600; cursor: pointer;
}
.goal-form button[type="submit"]:hover, .reward-form button[type="submit"]:hover { filter: brightness(1.08); }

/* ---------- Auth / Login / Register / Onboarding screens ---------- */
.auth-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 18px 60px; }
.auth-logo { text-align: center; margin-bottom: 32px; }
.auth-logo span { font-size: 48px; display: block; }
.auth-logo h1 { font-size: 28px; margin: 8px 0 4px; }
.auth-logo p { color: var(--muted); font-size: 14px; margin: 0; }
.auth-box { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.auth-box label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.auth-box input { width: 100%; display: block; margin-bottom: 0; }

.registration-language-screen { justify-content: center; min-height: 100svh; box-sizing: border-box; padding-top: 24px; }
#app:has(> .registration-language-screen) { max-width: none; padding: 0; }
.registration-language-screen .auth-logo { margin-bottom: 22px; }
.registration-language-box { max-width: 460px; }
.registration-language-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.registration-language-option {
  min-height: 52px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel2); color: var(--text); display: flex; align-items: center; gap: 9px;
  font: inherit; text-align: left; cursor: pointer;
}
.registration-language-option:last-child { grid-column: 1 / -1; }
.registration-language-option.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel2)); }
.registration-language-option:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; box-shadow: var(--focus-ring); }
@media (hover:hover) and (pointer:fine) { .registration-language-option:hover { border-color: var(--accent); } }
.registration-language-note { margin: 16px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 380px) { .registration-language-options { grid-template-columns: 1fr; } .registration-language-option:last-child { grid-column: auto; } }

/* Profile cards */
.profiles-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; width: 100%; max-width: 640px; }
.profile-card { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px 16px; min-width: 130px; text-align: center; cursor: pointer; transition: border-color 0.18s, transform 0.15s; }
.profile-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.profile-card.selected { border-color: var(--accent); background: var(--panel2); }
.profile-card.new-card { border-style: dashed; color: var(--muted); }
.profile-card.new-card:hover { color: var(--text); }
.profile-avatar { font-size: 36px; margin-bottom: 8px; }
.add-avatar { font-size: 30px; line-height: 1.4; color: var(--muted); }
.profile-name { font-size: 14px; font-weight: 600; }
.pin-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pin-form input { text-align: center; letter-spacing: 4px; font-size: 18px; }
.pin-form button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 9px; font-weight: 600; cursor: pointer; }
.pin-error { color: var(--bad); font-size: 12px; min-height: 16px; }

/* Avatar picker */
.av-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.av-btn { display: grid; place-items: center; background: var(--panel2); border: 2px solid var(--line); border-radius: 10px; width: 46px; height: 46px; padding: 4px; cursor: pointer; }
.av-btn.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--panel2)); }

/* Программы-данжи (пресеты) */
.ob-section { font-size: 13px; font-weight: 700; color: var(--text); margin: 2px 2px 10px; }
.ob-or { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 12px; }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.prog-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-family: inherit; color: var(--text); transition: border-color .15s, transform .12s; }
.prog-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.prog-card:active { transform: scale(.98); }
.pc-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.pc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-name { font-weight: 700; font-size: 14px; }
.pc-tag { font-size: 12px; color: var(--muted); line-height: 1.4; }
.pc-meta { font-size: 11px; color: var(--accent); margin-top: 2px; }

/* Onboarding chips */
.ob-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ob-group { margin-bottom: 12px; }
.ob-group-h { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 2px 7px; }
.ob-group-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { background: var(--panel2); border: 2px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14px; cursor: pointer; }
.ob-chip.sel { background: color-mix(in srgb, var(--c) 25%, var(--panel2)); border-color: var(--c); color: var(--text); }
.ob-chip:hover:not(.sel) { border-color: var(--muted); }

/* User pill in header + logout */
.user-pill { display: flex; align-items: center; gap: 8px; }
.user-pill .up-av { font-size: 22px; }
.up-meta { display: flex; flex-direction: column; line-height: 1.15; }
.up-name { font-size: 13px; font-weight: 700; }
.up-rank { font-size: 11px; color: var(--rc, var(--muted)); font-weight: 600; }
.eq-title { font-size: 10px; color: var(--warn); font-weight: 600; }
.logout-btn { font-size: 12px; padding: 5px 10px; }

/* ---------- Форма / Momentum ---------- */
.ch-form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; max-width: 340px; }
.cf-label { font-size: 12px; color: var(--muted); font-weight: 600; flex: 0 0 auto; }
.cf-bar { flex: 1; height: 8px; background: var(--panel2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.cf-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .5s, background .3s; }
.cf-val { font-size: 12px; font-weight: 700; white-space: nowrap; flex: 0 0 auto; }

/* ---------- Аватар + редактор ---------- */
.ch-avatar-img { overflow: hidden; }
.ch-avatar-img .avatar-svg { width: 100%; height: 100%; border-radius: 50%; display: block; }
.avatar-svg { display: block; }

.avatar-editor h3 { margin-bottom: 12px; }
.ave-stage { width: 168px; height: 168px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, var(--panel2), var(--panel)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ave-stage .avatar-svg { width: 100%; height: 100%; }
.ave-cats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; }
.ave-cat { background: var(--panel2); border: 1px solid var(--line); color: var(--muted); padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; }
.ave-cat:hover { color: var(--text); }
.ave-cat.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.ave-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.ave-options.is-colors { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
.ave-opt { padding: 0; border: 2px solid var(--line); background: var(--panel2); border-radius: 12px; cursor: pointer; overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; transition: border-color .15s, transform .12s; }
.ave-opt:hover { transform: translateY(-2px); border-color: var(--muted); }
.ave-opt.sel { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ave-mini { width: 100%; height: 100%; display: block; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 35%, var(--panel), var(--panel2)); }
.ave-mini .avatar-svg { width: 100%; height: 100%; }
.ave-opt.ave-color { aspect-ratio: 1; border-radius: 50%; }
/* ---------- Icon System v1 ---------- */
.satoru-icon { position: relative; display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -.14em; }
.satoru-icon--glyph { background: currentColor; -webkit-mask: var(--satoru-icon) center / contain no-repeat; mask: var(--satoru-icon) center / contain no-repeat; }
.satoru-icon--emblem { object-fit: contain; }
.navsec-icon { width: 1.28em; height: 1.28em; }
.nav-motion-icon { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; color: currentColor; vertical-align: -.14em; }
.nav-motion-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nav-motion-icon *,
.nav-motion-icon { transform-box: fill-box; }
.navgear-icon { width: 1.16em; height: 1.16em; }
.navsec-lock-icon, .inline-glyph { width: .95em; height: .95em; margin-right: 2px; }
.header-emblem { width: 1.25em; height: 1.25em; margin-right: 1px; }
.task-difficulty-icon { width: 27px; height: 27px; vertical-align: -.43em; }
.task-action-icon { width: 1.1em; height: 1.1em; vertical-align: -.18em; }
.habit-streak-icon { width: 1.05em; height: 1.05em; margin-right: 2px; }
.heading-emblem { width: 30px; height: 30px; margin-right: 6px; vertical-align: -.42em; }
.heading-glyph { width: 22px; height: 22px; margin-right: 5px; vertical-align: -.31em; }
.energy-emblem { width: 38px; height: 38px; vertical-align: -.62em; }
.timer-task-icon, .capture-glyph, .note-kind-icon { width: 1.05em; height: 1.05em; vertical-align: -.16em; }
.daystat-emblem { width: 25px; height: 25px; vertical-align: -.4em; }
.cal-action-icon, .tab-glyph { width: 1em; height: 1em; vertical-align: -.14em; }
.tab-emblem { width: 1.12em; height: 1.12em; vertical-align: -.21em; }
.inline-emblem { width: 22px; height: 22px; margin-right: 3px; vertical-align: -.34em; }
.button-glyph { width: 1.06em; height: 1.06em; margin-right: 3px; }
.button-emblem { width: 25px; height: 25px; margin-right: 4px; vertical-align: -.38em; }
.lb-emblem { display: block; width: 92px; height: 92px; margin: 0 auto; filter: drop-shadow(0 6px 13px rgba(0,0,0,.42)); }
.lb-chest.ready .lb-emblem { animation: chestWiggle 1.6s ease-in-out infinite; }
.track-emblem { width: 1.35em; height: 1.35em; vertical-align: -.24em; }
.track-glyph { width: 1.25em; height: 1.25em; vertical-align: -.22em; }
.cost-emblem { width: 1.05em; height: 1.05em; margin-right: 2px; }
.kpi-emblem { width: 1.35em; height: 1.35em; vertical-align: -.25em; }
.mobile-sheet-glyph { width: 20px; height: 20px; vertical-align: 0; }
.mobile-sheet-icon .satoru-icon { color: var(--accent-2, var(--accent)); }
.mobile-sheet-icon .nav-motion-inspiration { inline-size: 22px; block-size: 22px; color: var(--accent-2, var(--accent)); }
.mobile-sheet-icon .nav-motion-inspiration svg { inline-size: 100%; block-size: 100%; }
.achievement-content-icon { width: 72px; height: 72px; vertical-align: 0; filter: drop-shadow(0 7px 13px rgba(0,0,0,.22)); }
.reward-content-icon { width: 80px; height: 80px; vertical-align: 0; filter: drop-shadow(0 8px 14px rgba(0,0,0,.24)); }
.reward-catalog-icon { width: 42px; height: 42px; vertical-align: 0; }
.gear-content-icon { width: 82px; height: 82px; vertical-align: 0; filter: drop-shadow(0 8px 14px rgba(0,0,0,.27)); }
.slot-emblem { width: 25px; height: 25px; vertical-align: -.35em; margin-right: 4px; }
.slot-glyph { width: 18px; height: 18px; vertical-align: -.22em; margin-right: 4px; }
.pet-trait-icon { width: 26px; height: 26px; vertical-align: 0; }
.pet-treat-icon { width: 38px; height: 38px; vertical-align: 0; filter: drop-shadow(0 5px 7px rgba(0,0,0,.26)); }
.avatar-origin-icon { width: 34px; height: 34px; vertical-align: 0; }
.profile-origin-icon, .party-origin-icon, .leaderboard-origin-icon { width: 38px; height: 38px; vertical-align: 0; }
.auth-origin-icon { width: 72px; height: 72px; vertical-align: 0; filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); }
.lb-pos.podium { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #17111f; font-weight: 950; box-shadow: 0 4px 10px rgba(0,0,0,.22); }
.lb-pos.podium-1 { background: #f0b44d; }
.lb-pos.podium-2 { background: #cbd2dc; }
.lb-pos.podium-3 { background: #c78658; }
.task-content-icon { width: 26px; height: 26px; margin-right: 7px; vertical-align: -.42em; }
.activity-inline-icon { width: 22px; height: 22px; margin-right: 5px; vertical-align: -.36em; }
.rank-inline-icon { width: 30px; height: 30px; margin-right: 4px; vertical-align: -.48em; }
.period-glyph { width: 24px; height: 24px; margin-right: 5px; vertical-align: -.36em; }
.day-summary-emblem { width: 66px; height: 66px; margin-right: 9px; vertical-align: -.72em; filter: drop-shadow(0 8px 14px rgba(0,0,0,.3)); }
.legacy-avatar-emoji { display: inline-grid; place-items: center; font-style: normal; line-height: 1; }
.tts-glyph { width: 17px; height: 17px; vertical-align: 0; }
.boss-stage-emblem { width: 124px; height: 124px; vertical-align: 0; }
.party-empty-emblem { width: 112px; height: 112px; vertical-align: 0; color: var(--accent-2, var(--accent)); }
.boss-card-emblem, .boss-victory-emblem { width: 50px; height: 50px; vertical-align: 0; }
.boss-win-emblem { width: 138px; height: 138px; vertical-align: 0; filter: drop-shadow(0 18px 26px rgba(0,0,0,.38)); }
.reward-icon-select { min-width: 158px; }
.rwc-free { display: inline-flex; align-items: center; }
.event-stage-boss { display: grid; place-items: center; width: 132px; height: 132px; }
.raid-boss { overflow: visible; }
.rw-boss { display: grid; place-items: center; min-height: 148px; }
.rw-boss .rw-x { position: absolute; right: calc(50% - 82px); bottom: 12px; min-width: 38px; padding: 5px 7px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 14px; font-weight: 950; box-shadow: 0 7px 16px rgba(0,0,0,.3); }
@media (prefers-reduced-motion: no-preference) {
  .navsec.active .nav-today-dart { animation: nav-dart-flight 1.18s cubic-bezier(.16,.84,.22,1) both; }
  .navsec.active .nav-today-target { animation: nav-target-impact 1.18s ease-out both; transform-origin: 50% 50%; }
  .navsec.active .nav-map-panel-a { animation: nav-map-panel-a 1.32s cubic-bezier(.2,.82,.22,1) both; transform-origin: 100% 50%; }
  .navsec.active .nav-map-panel-b { animation: nav-map-panel-b 1.32s cubic-bezier(.2,.82,.22,1) both; transform-origin: 50% 50%; }
  .navsec.active .nav-map-panel-c { animation: nav-map-panel-c 1.32s cubic-bezier(.2,.82,.22,1) both; transform-origin: 0 50%; }
  .navsec.active [data-motion="cycle-accelerate"] { animation: nav-cycle-accelerate 2s linear both; }
  .navsec.active [data-motion="lid-pop"] { animation: nav-gift-pop .84s cubic-bezier(.2,.9,.25,1.2) both; }
  .navsec.active [data-motion="lid-pop"]::after {
    content: "✦";
    position: absolute;
    left: 58%;
    top: -46%;
    color: var(--accent, #57d6f2);
    font-size: .72em;
    line-height: 1;
    -webkit-mask: none;
    mask: none;
    background: none;
    animation: nav-gift-spark .84s ease-out both;
  }
  .navsec.active [data-motion="hero-rise"] { animation: nav-hero-rise .92s cubic-bezier(.2,.9,.25,1.16) both; }
  .navsec.active [data-motion="ember-flicker"] { animation: nav-ember-flicker 1.18s ease-in-out infinite; transform-origin: 50% 78%; }
  .navgear.active [data-motion="one-tooth-turn"] { animation: nav-gear-turn .8s cubic-bezier(.2,.85,.25,1.15) both; }
  .header-emblem--streak { animation: icon-ember-float 2.4s ease-in-out infinite; }
  .ach.got:hover [data-motion="glint"],
  .reward:hover [data-motion="float"],
  .rwc-row:hover [data-motion="float"] { animation: icon-relic-float .7s cubic-bezier(.2,.9,.25,1.2) both; }
  .gear-item.equipped [data-motion="equip-pop"] { animation: icon-equip-pulse 2.8s ease-in-out infinite; }
  .gear-item:hover [data-motion="equip-pop"] { animation: icon-relic-pop .42s cubic-bezier(.2,.9,.25,1.25) both; }
  .event-stage [data-motion="breathe"],
  .raid-boss [data-motion="breathe"] { animation: icon-boss-breathe 3.6s ease-in-out infinite; transform-origin: 50% 82%; }
  .pet-card:hover [data-motion="pet-bounce"] { animation: icon-pet-bounce .55s cubic-bezier(.2,.9,.25,1.2) both; }
  .av-btn.sel [data-motion="pulse"] { animation: icon-origin-pulse 2.4s ease-in-out infinite; }
}
@keyframes icon-paper-breathe { 50% { transform: translateY(-1px) scale(1.06); } }
@keyframes nav-target-impact {
  0%,43% { transform: none; }
  47% { transform: translateX(-1.7px) rotate(-2.8deg); }
  52% { transform: translateX(1.4px) rotate(2.1deg); }
  58% { transform: translateX(-.9px) rotate(-1.2deg); }
  66%,100% { transform: none; }
}
@keyframes nav-dart-flight {
  0% { transform: translate(8px,-8px) scale(.62); opacity: 0; }
  22% { opacity: 1; }
  43% { transform: translate(0,0) scale(1.08); opacity: 1; }
  51% { transform: translate(.5px,-.5px) scale(.98); }
  66%,100% { transform: none; opacity: 1; }
}
@keyframes nav-map-panel-a {
  0% { transform: perspective(34px) rotateY(82deg) scaleX(.18); opacity: .28; }
  48% { transform: perspective(34px) rotateY(-8deg) scaleX(1.04); opacity: 1; }
  72%,100% { transform: none; opacity: 1; }
}
@keyframes nav-map-panel-b {
  0%,8% { transform: perspective(34px) rotateY(-84deg) scaleX(.12); opacity: .2; }
  55% { transform: perspective(34px) rotateY(7deg) scaleX(1.03); opacity: 1; }
  78%,100% { transform: none; opacity: 1; }
}
@keyframes nav-map-panel-c {
  0%,16% { transform: perspective(34px) rotateY(84deg) scaleX(.12); opacity: .18; }
  62% { transform: perspective(34px) rotateY(-7deg) scaleX(1.03); opacity: 1; }
  84%,100% { transform: none; opacity: 1; }
}
@keyframes nav-cycle-accelerate {
  0% { transform: rotate(0deg) scale(.93); }
  10% { transform: rotate(390deg) scale(1.05); }
  25% { transform: rotate(850deg) scale(1.07); }
  43% { transform: rotate(1170deg) scale(1.055); }
  62% { transform: rotate(1345deg) scale(1.035); }
  80% { transform: rotate(1415deg) scale(1.015); }
  92% { transform: rotate(1437deg) scale(1.004); }
  100% { transform: rotate(1440deg) scale(1); }
}
@keyframes nav-gift-pop {
  0% { transform: scaleY(.78) translateY(2px); }
  34% { transform: translateY(-3px) rotate(-4deg) scale(1.08); }
  50% { transform: translateY(-4px) rotate(4deg) scale(1.09); }
  68% { transform: translateY(-1px) rotate(-2deg) scale(1.03); }
  100% { transform: none; }
}
@keyframes nav-gift-spark {
  0%,24% { opacity: 0; transform: translateY(3px) scale(.3) rotate(-25deg); }
  52% { opacity: 1; transform: translateY(-5px) scale(1.22) rotate(8deg); }
  100% { opacity: 0; transform: translate(5px,-10px) scale(.65) rotate(26deg); }
}
@keyframes nav-hero-rise {
  0% { transform: translateY(3px) scale(.8); opacity: .45; }
  42% { transform: translateY(-2px) scale(1.12); opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
  67% { transform: translateY(0) scale(1.02); filter: drop-shadow(0 0 3px currentColor); }
  100% { transform: none; filter: none; }
}
@keyframes nav-ember-flicker {
  0%,100% { transform: scaleX(1) scaleY(.96) rotate(-1deg); filter: drop-shadow(0 0 2px currentColor); }
  35% { transform: scaleX(.94) scaleY(1.08) rotate(2deg); filter: drop-shadow(0 0 5px currentColor); }
  68% { transform: scaleX(1.05) scaleY(1.01) rotate(-2deg); filter: drop-shadow(0 0 3px currentColor); }
}
@keyframes nav-gear-turn {
  0% { transform: rotate(-18deg) scale(.82); opacity: .5; }
  56% { transform: rotate(52deg) scale(1.08); opacity: 1; }
  78% { transform: rotate(42deg) scale(.98); }
  100% { transform: rotate(45deg) scale(1); }
}
@keyframes icon-ember-float { 50% { transform: translateY(-1px) rotate(3deg); } }
@keyframes icon-relic-float { 45% { transform: translateY(-5px) rotate(-2deg) scale(1.05); filter: drop-shadow(0 12px 18px rgba(240,180,77,.25)); } }
@keyframes icon-relic-pop { 55% { transform: translateY(-4px) scale(1.08) rotate(2deg); } }
@keyframes icon-equip-pulse { 50% { transform: translateY(-2px) scale(1.035); filter: drop-shadow(0 9px 16px rgba(240,180,77,.24)); } }
@keyframes icon-boss-breathe { 50% { transform: translateY(-3px) scale(1.035) rotate(1deg); } }
@keyframes icon-pet-bounce { 45% { transform: translateY(-4px) scale(1.08); } 70% { transform: translateY(1px) scale(.98); } }
@keyframes icon-origin-pulse { 50% { transform: scale(1.06); filter: drop-shadow(0 4px 9px rgba(240,180,77,.28)); } }
@media (prefers-reduced-motion: reduce) {
  .satoru-icon[data-motion] { animation: none !important; transition: none !important; }
}

/* ============================================================
   MONEY / RESOURCES Guardian v1 — authored cut-paper plates.
   Runtime swaps complete figures and complete contact scenes; no limb layers
   or scale pulses are used to fake acting.
   ============================================================ */
.resources-penguin-v1,
.resources-penguin-v1__stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.resources-penguin-v1__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 0;
  filter: drop-shadow(0 10px 10px rgba(4, 7, 12, .4));
}
.resources-penguin-v1__frame.is-active,
.resources-penguin-v1__waddle-a { opacity: 1; }
.resources-penguin-v1[data-motion="waddle-route"] .resources-penguin-v1__waddle-a {
  animation: resourcesWaddleA .72s steps(1,end) infinite;
}
.resources-penguin-v1[data-motion="waddle-route"] .resources-penguin-v1__waddle-b {
  animation: resourcesWaddleB .72s steps(1,end) infinite;
}
@keyframes resourcesWaddleA { 0%,49.999%,100% { opacity: 1; } 50%,99.999% { opacity: 0; } }
@keyframes resourcesWaddleB { 0%,49.999%,100% { opacity: 0; } 50%,99.999% { opacity: 1; } }

.den-resources-penguin {
  aspect-ratio: 1;
  height: auto !important;
}
.den-resources-penguin .resources-penguin-v1 { width: 100%; height: 100%; }
.pet-card-resourcesPenguin .pet-art > .resources-penguin-v1 { width: 100%; height: 100%; }
.resources-penguin-domain-badge { color: #f1c979; border-color: rgba(213, 164, 73, .38); }
.den-resources-actions { border-color: rgba(213, 164, 73, .26); }
.den-resources-actions > span b { color: #f5d895; }
.den-scene[data-den-focus-canon="money"] .den-resources-penguin {
  filter: drop-shadow(0 10px 10px rgba(4,7,12,.4)) drop-shadow(0 0 9px rgba(230,177,72,.18));
}

.resources-pair-v1 {
  position: absolute;
  left: 37.5%;
  bottom: 1.4%;
  z-index: 23;
  display: block;
  width: 43%;
  aspect-ratio: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.resources-pair-v1.is-active {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.resources-pair-v1__stage,
.resources-pair-v1__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.resources-pair-v1__frame {
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 13px 13px rgba(4,7,12,.42));
}

.den-scene[data-den-renderer="v5"] .den-pet.den-resources-penguin {
  transition: translate 2.2s cubic-bezier(.25,.64,.22,1), scale 2.2s linear, opacity .18s ease, visibility 0s linear 0s;
}
.den-shell.is-resources-pair-approaching .den-avatar-core,
.den-shell.is-resources-pair-at-meeting .den-avatar-core,
.den-shell.is-resources-pair-returning .den-avatar-core {
  translate: 18% 1%;
  scale: .98;
}
.den-shell.is-resources-pair-approaching .den-resources-penguin,
.den-shell.is-resources-pair-at-meeting .den-resources-penguin {
  translate: -142% 0;
  scale: 1;
}
.den-shell.is-resources-pair-returning .den-resources-penguin {
  translate: 0 0;
  scale: 1;
}
.den-resources-penguin[data-resources-direction="home"] .resources-penguin-v1__frame { transform: scaleX(-1); }

.den-shell.is-resources-pair-active .den-avatar-core,
.den-shell.is-resources-pair-active .den-resources-penguin,
.den-shell.is-resources-pair-active .traveller-room-v4 {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.den-shell.is-resources-pair-active .den-scene > .den-pet:not(.den-resources-penguin) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  .resources-pair-v1 { left: 35%; bottom: 1.1%; width: 48%; }
}

@media (prefers-reduced-motion: reduce) {
  .resources-pair-v1,
  .resources-pair-v1 *,
  .resources-penguin-v1[data-motion] * { animation: none !important; transition: none !important; }
  .den-shell.is-resources-pair-approaching .den-avatar-core,
  .den-shell.is-resources-pair-at-meeting .den-avatar-core,
  .den-shell.is-resources-pair-returning .den-avatar-core,
  .den-shell.is-resources-pair-approaching .den-resources-penguin,
  .den-shell.is-resources-pair-at-meeting .den-resources-penguin,
  .den-shell.is-resources-pair-returning .den-resources-penguin { translate: 0 0 !important; scale: 1 !important; }
}

/* ══ BODY Guardian v1 — approved cut-paper toad ═══════════════════════════════
   A single 1024×1024 stage is scaled as a unit. State changes cross-fade only
   after decode; interaction motion is anchored at the floor, never a floating
   whole-PNG jump and never a pretend sliced-joint rig. */
.body-toad-v1 {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  contain: layout paint;
  isolation: isolate;
}
.body-toad-v1__stage {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 89.84375%;
}
.body-toad-v1__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  user-select: none;
  --actor-frame-scale: 1;
  --actor-facing: 1;
  transform-origin: 50% 89.84375%;
  transform: scale(var(--actor-frame-scale)) scaleX(var(--actor-facing));
}
.body-toad-v1__frame.is-active { opacity: 1; }
.body-toad-v1__frame.is-incoming { opacity: 0; }
.body-toad-v1__frame.is-outgoing { opacity: 0; }
.body-toad-v1[data-state="thriving"] .body-toad-v1__stage { animation: bodyToadProudBreath 3.2s ease-in-out infinite; }
.body-toad-v1[data-state="strained"] .body-toad-v1__stage { animation: bodyToadStrainedBreath 4.8s ease-in-out infinite; }
.body-toad-v1[data-state="restoring"] .body-toad-v1__stage { animation: bodyToadRestoringBreath 5.4s ease-in-out infinite; }
.body-toad-v1.is-reacting[data-interaction="greet"] .body-toad-v1__stage { animation: bodyToadGreeting 1.25s cubic-bezier(.2,.78,.22,1) both; }
.body-toad-v1.is-reacting[data-interaction="train"] .body-toad-v1__stage { animation: bodyToadTraining 1.9s cubic-bezier(.22,.72,.2,1) both; }
.body-toad-v1.is-reacting[data-interaction="rest"] .body-toad-v1__stage { animation: bodyToadSettle 2.6s cubic-bezier(.33,0,.25,1) both; }

.pet-card-body-toad { grid-column: span 2; }
.pet-card-body-toad .pet-art { width: min(100%, 330px); min-height: 250px; }
.pet-card-body-toad .pet-sphere { max-width: 560px; }
.body-toad-card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 4px; }
.body-toad-domain-badge {
  padding: 5px 9px;
  border: 1px solid rgba(78,205,224,.24);
  border-radius: 999px;
  background: rgba(78,205,224,.08);
  color: #8de8f4;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.den-body-toad {
  left: 57.5% !important;
  right: auto !important;
  top: 68.4% !important;
  bottom: auto !important;
  width: 16% !important;
  z-index: 8 !important;
  filter: drop-shadow(0 10px 9px rgba(4,6,12,.4));
  transform: none !important;
}
.body-pair-v2 {
  position: absolute;
  left: 24%;
  top: 4%;
  z-index: 9;
  display: block;
  width: 52%;
  aspect-ratio: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.992);
  transform-origin: 50% 95.703125%;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.78,.22,1), visibility 0s linear .24s;
  contain: layout paint;
  isolation: isolate;
}
.body-pair-v2.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  /* The live actors are hidden in the same commit. Opacity must therefore be
     immediate or a decoded contact plate still produces one blank paint. */
  transition: transform .24s cubic-bezier(.2,.78,.22,1), visibility 0s;
}
.body-pair-v2__stage,
.body-pair-v2__frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.body-pair-v2__frame { object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 12px 12px rgba(4,6,12,.4)); }
.body-pair-v2__frame--a { opacity: 1; }
.body-pair-v2__frame--b { opacity: 0; }
.body-pair-v2[data-mode="train"].is-active .body-pair-v2__frame--a { animation: bodyPairTrainA 1.4s steps(1,end) infinite; }
.body-pair-v2[data-mode="train"].is-active .body-pair-v2__frame--b { animation: bodyPairTrainB 1.4s steps(1,end) infinite; }
.body-pair-v2[data-mode="pushup"].is-active .body-pair-v2__frame--a { animation: bodyPairPushA 1.18s steps(1,end) infinite; }
.body-pair-v2[data-mode="pushup"].is-active .body-pair-v2__frame--b { animation: bodyPairPushB 1.18s steps(1,end) infinite; }
.body-pair-v2[data-mode="stretch"].is-active .body-pair-v2__frame--a { animation: bodyPairStretchA 2.4s steps(1,end) infinite; }
.body-pair-v2[data-mode="stretch"].is-active .body-pair-v2__frame--b { animation: bodyPairStretchB 2.4s steps(1,end) infinite; }
.body-pair-v2[data-mode="whistle"].is-active .body-pair-v2__frame--a { animation: bodyPairWhistleA .86s steps(1,end) infinite; }
.body-pair-v2[data-mode="whistle"].is-active .body-pair-v2__frame--b { animation: bodyPairWhistleB .86s steps(1,end) infinite; }
.body-pair-v2[data-mode="rest"].is-active .body-pair-v2__frame--a { animation: bodyPairPetA 1.5s steps(1,end) 2; }
.body-pair-v2[data-mode="rest"].is-active .body-pair-v2__frame--b { animation: bodyPairPetB 1.5s steps(1,end) 2; }
.body-pair-v2[data-mode="rest"].is-active .body-pair-v2__stage { animation: bodyPairRestBreath 3s ease-in-out 1; transform-origin: 50% 95.703125%; }
.den-shell.is-body-pair-active .den-avatar-core,
.den-shell.is-body-pair-active .den-body-toad { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.den-avatar-core,
.den-body-toad { transition: opacity .14s ease, visibility 0s linear 0s; }
.den-guardian-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 18px 14px;
  padding: 10px 12px;
  border: 1px solid rgba(78,205,224,.2);
  border-radius: 12px;
  background: rgba(27,37,59,.48);
}
.den-guardian-actions > span { display: grid; gap: 2px; min-width: 0; }
.den-guardian-actions small { color: var(--muted); }
.den-guardian-actions > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

@keyframes bodyToadProudBreath {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.008,1.016); }
}
@keyframes bodyToadStrainedBreath {
  0%,100% { transform: scale(1,.994) rotate(.15deg); }
  50% { transform: scale(.997,1.003) rotate(-.15deg); }
}
@keyframes bodyToadRestoringBreath {
  0%,100% { transform: scale(1,.988); }
  50% { transform: scale(1.003,1.006); }
}
@keyframes bodyToadGreeting {
  0%,100% { transform: scale(1) rotate(0); }
  24% { transform: scale(1.018,.974) rotate(-1deg); }
  48% { transform: scale(.996,1.022) rotate(.6deg); }
  72% { transform: scale(1.006,.994) rotate(-.25deg); }
}
@keyframes bodyToadTraining {
  0%,100% { transform: scale(1); }
  18% { transform: scale(1.025,.93); }
  43% { transform: scale(.99,1.055); }
  67% { transform: scale(1.012,.982); }
  84% { transform: scale(.998,1.01); }
}
@keyframes bodyToadSettle {
  0%,100% { transform: scale(1); }
  28% { transform: scale(1.01,.965); }
  72% { transform: scale(1.004,.982); }
}
@keyframes bodyPairTrainA { 0%,49.999%,100% { opacity: 1; } 50%,99.999% { opacity: 0; } }
@keyframes bodyPairTrainB { 0%,49.999%,100% { opacity: 0; } 50%,99.999% { opacity: 1; } }
@keyframes bodyPairPushA { 0%,49.999%,100% { opacity: 1; } 50%,99.999% { opacity: 0; } }
@keyframes bodyPairPushB { 0%,49.999%,100% { opacity: 0; } 50%,99.999% { opacity: 1; } }
@keyframes bodyPairStretchA { 0%,54.999%,100% { opacity: 1; } 55%,99.999% { opacity: 0; } }
@keyframes bodyPairStretchB { 0%,54.999%,100% { opacity: 0; } 55%,99.999% { opacity: 1; } }
@keyframes bodyPairWhistleA { 0%,49.999%,100% { opacity: 1; } 50%,99.999% { opacity: 0; } }
@keyframes bodyPairWhistleB { 0%,49.999%,100% { opacity: 0; } 50%,99.999% { opacity: 1; } }
@keyframes bodyPairPetA { 0%,49.999%,100% { opacity: 1; } 50%,99.999% { opacity: 0; } }
@keyframes bodyPairPetB { 0%,49.999%,100% { opacity: 0; } 50%,99.999% { opacity: 1; } }
@keyframes bodyPairRestBreath { 0%,100% { transform: scale(1); } 55% { transform: scale(1.001,1.004); } }

@media (max-width: 720px) {
  .pet-card-body-toad { grid-column: 1 / -1; }
  .pet-card-body-toad .pet-art { width: min(100%, 270px); min-height: 210px; }
  .den-body-toad { left: 57% !important; top: 68.8% !important; width: 17% !important; }
  .body-pair-v2 { left: 20%; top: 1%; width: 60%; }
  .den-guardian-actions { align-items: stretch; flex-direction: column; }
  .den-guardian-actions > div { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .body-toad-v1__stage,
  .body-toad-v1.is-reacting .body-toad-v1__stage,
  .body-pair-v2 *,
  .body-pair-v2 { animation: none !important; transition: none !important; }
  .body-toad-v1__frame { transition: none !important; }
}

/* Gold and streak are status readouts, not cards. Keeping them bare prevents
   their background plates from fighting the selected visual theme. */
.gold-pill,
.streak {
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 560px) {
  .ave-stage { width: 140px; height: 140px; }
  .ave-options { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
  .day-summary-emblem { width: 54px; height: 54px; vertical-align: -.62em; }
  .lb-emblem { width: 80px; height: 80px; }
  .gear-content-icon { width: 62px; height: 62px; }
  .rank-inline-icon { width: 26px; height: 26px; }
}

/* подсветка карточки при переходе по нуджу */
.flash-card { animation: flashCard 1.6s ease; }
@keyframes flashCard { 0%, 100% { box-shadow: var(--shadow); } 25% { box-shadow: 0 0 0 3px var(--accent), var(--shadow); } }

/* ---------- Импорт достижений ---------- */
.import-list { display: flex; flex-direction: column; gap: 10px; }
.import-row { display: flex; align-items: flex-start; gap: 10px; }
.imp-left { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 0; min-width: 0; }
.imp-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; margin-top: 4px; }
.imp-meta { display: flex; flex-direction: column; min-width: 0; }
.imp-name { font-weight: 600; font-size: 13.5px; }
.imp-hint { font-size: 11px; color: var(--muted); margin-top: 2px; }
.imp-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; min-width: 160px; }
.imp-right select { width: 100%; min-width: 0; }
.imp-lvl { font-size: 11.5px; font-weight: 700; color: var(--accent); white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.imp-lvl.muted { color: var(--muted); font-weight: 500; }
.imp-rank { font-size: 11px; font-weight: 600; }
.import-row.sub .imp-name, .rank-row.sub .rr-name { color: var(--muted); font-weight: 500; }
.import-row.sub, .rank-row.sub { padding-left: 12px; }
.rank-row.sub { opacity: 0.92; }
@media (max-width: 560px) {
  .import-row { flex-wrap: wrap; }
  .imp-right { min-width: 0; width: 100%; align-items: stretch; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .imp-right select { flex: 1 1 auto; }
  .imp-lvl { flex: 0 0 auto; }
}

/* ---------- Лидерборд ---------- */
.lb-table { display: flex; flex-direction: column; gap: 2px; }
.lb-row { display: grid; grid-template-columns: 40px 32px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.lb-row:last-child { border-bottom: none; }
.lb-row.me { background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.lb-pos { font-size: 18px; font-weight: 800; text-align: center; color: var(--muted); }
.lb-av { font-size: 24px; text-align: center; }
.lb-name { font-weight: 600; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lb-name .lb-rank { font-size: 11px; font-weight: 600; color: var(--muted); }
.lb-you { font-size: 10px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); padding: 1px 6px; border-radius: 999px; }
.lb-lvl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lb-xp { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-optout { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.lb-optout input { width: auto; }
@media (max-width: 560px) {
  .lb-row { grid-template-columns: 30px 26px 1fr auto; gap: 8px; }
  .lb-row .lb-lvl { display: none; }
  .lb-pos { font-size: 15px; }
  .lb-av { font-size: 20px; }
}

/* Хайп-чип (бафф за сложные квесты) */
.hype-chip { font-size: 12px; font-weight: 800; letter-spacing: .3px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; color: #ffb24a; background: linear-gradient(120deg, rgba(240,90,60,.22), rgba(240,160,40,.16)); border: 1px solid rgba(240,120,50,.55); box-shadow: 0 0 10px rgba(240,110,40,.25); animation: hypePulse 1.8s ease-in-out infinite; }
@keyframes hypePulse { 0%,100% { box-shadow: 0 0 8px rgba(240,110,40,.2); } 50% { box-shadow: 0 0 16px rgba(240,110,40,.45); } }

/* Plan badge (PRO / TRIAL / upsell) */
.plan-badge { font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; border: none; font-family: inherit; }
.plan-badge.pro { background: linear-gradient(120deg, #e0a23e, #ffd479); color: #3a2700; }
.plan-badge.trial { background: linear-gradient(120deg, #7c6cff, #b39bff); color: #fff; }
.plan-badge.free { background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.plan-badge.free:hover { color: #ffd479; border-color: #e0a23e; }

/* ---------- Floating focus pill (in-app / Safari fallback) ---------- */
.focus-pill { position: fixed; left: 18px; bottom: 18px; z-index: 60; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); min-width: 180px; display: none; }
.focus-pill.show { display: block; }
.focus-pill.overrun { border-color: var(--bad); }
.fp-main { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fp-task { font-size: 12px; color: var(--muted); max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-clock { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fp-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.focus-pill.overrun .fp-sub { color: var(--bad); }
.fp-ctrl { display: flex; gap: 6px; margin-top: 8px; }
.fp-ctrl button { flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 5px; cursor: pointer; }
.fp-ctrl button:hover { border-color: var(--accent); }

/* ============================================================
   Ранги, мастерство, Индекс баланса
   ============================================================ */
.rank-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--rc, var(--accent)) 18%, var(--panel2)); color: var(--rc, var(--text)); border: 1px solid color-mix(in srgb, var(--rc, var(--accent)) 40%, transparent); white-space: nowrap; }

.rank-row { display: grid; grid-template-columns: 14px 1fr auto 52px 120px auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rank-row:last-child { border-bottom: none; }
.rr-dot { width: 12px; height: 12px; border-radius: 50%; }
.rr-name { font-weight: 600; }
.rr-rank { color: var(--rc, var(--text)); font-weight: 700; font-size: 12px; white-space: nowrap; }
.rr-lvl { color: var(--muted); font-size: 12px; text-align: right; }
.rr-bar { height: 7px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.rr-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .5s; }
.rr-next { font-size: 11px; white-space: nowrap; }

.balance-card .bal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.balance-card .bal-head h3 { margin: 0; }
.bal-score { font-size: 34px; font-weight: 800; line-height: 1; }
.bal-score small { font-size: 14px; color: var(--muted); font-weight: 600; }
.bal-meter { height: 12px; background: var(--panel2); border-radius: 999px; overflow: hidden; margin: 12px 0 10px; border: 1px solid var(--line); }
.bal-meter > span { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* ============================================================
   Лутбоксы (сундуки) + рулетка
   ============================================================ */
.lootbox-card .lb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lootbox-card .lb-head h3 { margin: 0; }
.lb-boost { font-size: 12px; font-weight: 700; color: #ffd479; background: rgba(224,162,62,.15); padding: 3px 10px; border-radius: 999px; }
.lb-body { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.lb-chest { flex: 0 0 150px; text-align: center; padding: 16px 10px; border-radius: var(--radius); border: 2px dashed var(--line); background: var(--panel2); }
.lb-chest.ready { cursor: pointer; border-style: solid; border-color: #e0a23e; background: linear-gradient(180deg, rgba(224,162,62,.12), var(--panel2)); animation: chestPulse 2s ease-in-out infinite; }
.lb-chest.ready:hover { transform: translateY(-2px); }
.lb-chest.ready:active { transform: scale(.97); }
.lb-emoji { font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.lb-chest.ready .lb-emoji { animation: chestWiggle 1.6s ease-in-out infinite; }
.lb-status { margin-top: 8px; font-size: 13px; font-weight: 700; }
.lb-chest.empty .lb-status { color: var(--muted); font-weight: 500; }
.lb-info { flex: 1; min-width: 200px; }
.lb-titles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.title-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.title-chip.eq { border-color: var(--warn); color: #ffd479; }
.lb-hist { margin-top: 12px; }
.lb-hist summary { cursor: pointer; color: var(--muted); font-size: 13px; }
@keyframes chestPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,162,62,.4); } 50% { box-shadow: 0 0 0 8px rgba(224,162,62,0); } }
@keyframes chestWiggle { 0%,92%,100% { transform: rotate(0); } 94% { transform: rotate(-9deg); } 96% { transform: rotate(9deg); } 98% { transform: rotate(-6deg); } }

/* Roulette modal */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(8,10,18,.78); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.loot-box { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 22px; width: min(560px, 96vw); text-align: center; }
.loot-box h3 { margin: 0 0 16px; }
.loot-window { position: relative; height: 86px; overflow: hidden; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.loot-pointer { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: linear-gradient(180deg, var(--accent), #9b7cff); z-index: 3; box-shadow: 0 0 12px var(--accent); }
.loot-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; }
.loot-item { width: 120px; margin: 0 5px; flex: 0 0 120px; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 600; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); padding: 6px; }
.loot-item.win { background: linear-gradient(180deg, rgba(224,162,62,.18), var(--panel)); border-color: #e0a23e; }
.loot-item.flash { animation: winFlash .5s ease 3; }
@keyframes winFlash { 50% { background: rgba(224,162,62,.5); } }
.loot-result { font-size: 22px; font-weight: 800; min-height: 30px; margin: 16px 0; opacity: 0; transform: scale(.7); transition: opacity .35s cubic-bezier(.2,1.4,.4,1), transform .35s cubic-bezier(.2,1.4,.4,1); }
.loot-result.show { opacity: 1; transform: scale(1); }
/* #20 рарность в дроп-ленте + reveal-юс */
.loot-item.win { border-color: var(--rc, #e0a23e); background: linear-gradient(180deg, color-mix(in srgb, var(--rc, #e0a23e) 20%, transparent), var(--panel)); }
.loot-rarity { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 4px; }
.loot-rline { font-size: 20px; }
.loot-box.reveal { box-shadow: 0 0 0 1px var(--rc, #e0a23e), 0 0 44px -6px var(--rc, #e0a23e); }
.loot-box.reveal h3::after { content: ''; }
/* Лутбокс — футер и voucher */
.lb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lb-edit-btn { font-size: 12px; opacity: .7; }
.voucher-chip { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #f80)); color: #fff; border-radius: 10px; padding: 7px 13px; font-size: 13px; font-weight: 700; cursor: pointer; margin: 6px 0; text-align: center; letter-spacing: .3px; }
.voucher-chip:hover { filter: brightness(1.1); }
/* Лут-редактор */
.le-rows { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; max-height: 340px; overflow-y: auto; }
.le-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.le-row:last-child { border-bottom: none; }
.le-label { flex: 1; font-size: 13px; }
.le-inp { width: 72px; padding: 4px 8px; border-radius: 7px; border: 1.5px solid var(--line); background: var(--panel2); color: var(--fg); font-size: 14px; text-align: right; }
.le-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* Коллекция (Brawl-Stars) */
.collection-card .coll-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.collection-card .coll-head h3 { margin: 0; }
.coll-prog { font-size: 13px; font-weight: 700; color: var(--accent); }
.coll-body { display: flex; gap: 16px; align-items: flex-start; margin: 10px 0 4px; flex-wrap: wrap; }
.coll-preview { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel2); }
.coll-preview .avatar-svg { width: 100%; height: 100%; display: block; }
.coll-cats { flex: 1; min-width: 220px; }
.coll-sub { margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.cos-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 5px; border-radius: 11px; background: var(--panel2); border: 1.5px solid var(--line); cursor: pointer; }
.cos-tile.owned { border-color: color-mix(in srgb, var(--rc) 55%, var(--line)); }
.cos-tile.owned:hover { border-color: var(--rc); }
.cos-tile.eq { border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc), 0 0 16px -6px var(--rc); }
.cos-tile.locked { opacity: 0.5; cursor: default; }
.cos-prev { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.cos-frame { border: 4px solid; background: var(--panel); }
.cos-bg { border: 1px solid var(--line); }
.cos-lock { background: var(--panel); }
.cos-name { font-size: 11px; text-align: center; line-height: 1.2; color: var(--text); }
.cos-tile.locked .cos-name { color: var(--muted); }
.cos-eq { position: absolute; top: 4px; right: 5px; font-size: 11px; color: var(--rc); font-weight: 800; }
.title-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rar-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.pwa-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pwa-status { margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
.pwa-card[aria-busy="true"] .pwa-row { opacity: .72; }
.install-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--accent); background: linear-gradient(180deg, rgba(108,140,255,.12), var(--panel)); }
.install-banner .ib-text { font-size: 13.5px; line-height: 1.4; }
.install-banner .ib-acts { display: flex; align-items: center; gap: 8px; }
.sound-toggle { display: flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.sound-toggle input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
/* Раздел «Привычки» (Атомные привычки) */
.hsub { margin-bottom: 12px; }
.hb-intro h3 { margin: 0 0 6px; }
.hb-identity, .hb-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.hb-identity input, .hb-field input { font: inherit; font-size: 13.5px; color: var(--text); }
.hb-laws h4 { margin: 0 0 10px; }
.hb-law { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
.hb-law:first-of-type { border-top: none; }
.hb-lawn { flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--panel2); border: 1.5px solid var(--accent); color: var(--accent); }
.hb-law.break .hb-lawn { border-color: #e0526a; color: #e0526a; }
.hb-law b { font-size: 14px; }
.hb-law ul { margin: 5px 0 0; padding-left: 18px; }
.hb-law li { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 3px; }
.hb-ul { margin: 0; padding-left: 18px; } .hb-ul li { font-size: 13px; line-height: 1.55; margin-bottom: 5px; }
.hb-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.hb-card { border-left: 3px solid var(--c, var(--accent)); }
.hb-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hb-loop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hb-loop-step { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; }
.hb-loop-arr { color: var(--accent); font-weight: 700; }
.hb-extra { padding: 8px 0; border-top: 1px solid var(--line); }
.hb-extra:first-child { border-top: none; }
.hb-extra b { font-size: 13.5px; } .hb-extra p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; }
.hb-nmt { font-size: 12px; margin-top: 12px; }
.anti-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anti-row2 .anti-main { flex: 1; min-width: 160px; }
/* Мультиплеер: пати + кооп-рейд */
.party-or { text-align: center; font-size: 12px; margin: 10px 0; }
.ph-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ph-top h3 { margin: 0; }
.party-code { font-size: 13px; color: var(--muted); }
.party-code b { color: var(--accent); letter-spacing: 1px; font-size: 15px; }
.raid-card { border: 1px solid var(--line); }
.raid-card.won { border-color: #e0a23e; box-shadow: 0 0 26px -8px #e0a23e; }
.raid-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.raid-boss { font-size: 30px; }
.raid-bar { height: 14px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.raid-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #e0526a, #e0a23e); transition: width .5s; }
.raid-card.won .raid-bar > span { background: linear-gradient(90deg, #e0a23e, #5fbf7a); }
.raid-note { font-size: 11.5px; margin: 8px 0 0; }
.pm-list { display: flex; flex-direction: column; gap: 8px; }
.pm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; }
.pm-row.me { border-color: var(--accent); }
.pm-av { font-size: 22px; flex: 0 0 auto; }
.pm-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-name { font-weight: 600; }
.pm-sub { font-size: 12px; }
.pm-xp { font-weight: 800; color: var(--accent); white-space: nowrap; }
.pm-xp small { font-size: 10px; color: var(--muted); margin-left: 1px; font-weight: 600; }
.pm-cheer { flex: 0 0 auto; }
.raid-claim { margin: 10px 0 2px; background: linear-gradient(90deg, #e0a23e, #e0526a); border: none; }
.raid-claimed { display: inline-block; margin: 8px 0 2px; font-size: 12px; }
/* Сезонный прогресс (nested-прогрессия) */
.season-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.season-bar { height: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.season-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #7c6cff, #e0a23e); transition: width .5s; }
/* Кинематографичная победа над боссом (#22) */
.raidwin-ov { background: rgba(6, 8, 16, 0.86); }
.raidwin-box { position: relative; text-align: center; padding: 30px 26px; overflow: hidden; max-width: 96vw; }
.rw-rays { position: absolute; inset: -40% ; background: conic-gradient(from 0deg, transparent 0 10deg, rgba(224,162,62,.16) 10deg 20deg, transparent 20deg 30deg); animation: rwSpin 14s linear infinite; pointer-events: none; }
@keyframes rwSpin { to { transform: rotate(360deg); } }
.rw-boss { position: relative; font-size: 74px; animation: rwShake .5s ease 2, rwFade .8s ease 1s forwards; }
@keyframes rwShake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-9px) rotate(-6deg) } 75% { transform: translateX(9px) rotate(6deg) } }
@keyframes rwFade { to { opacity: .25; filter: grayscale(1); transform: scale(.8); } }
.rw-x {
  position: absolute;
  left: auto;
  top: auto;
  right: calc(50% - 82px);
  bottom: 12px;
  transform: scale(0);
  font-size: 14px;
  animation: rwBadgePop .4s ease 1.1s forwards;
}
@keyframes rwBadgePop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: .95; }
}
.rw-title { position: relative; font-size: 30px; font-weight: 800; letter-spacing: 2px; margin-top: 10px; color: #ffce6b; text-shadow: 0 0 22px rgba(224,162,62,.6); transform: scale(.6); opacity: 0; animation: rwTitle .5s cubic-bezier(.2,1.5,.4,1) 1.3s forwards; }
@keyframes rwTitle { to { transform: scale(1); opacity: 1; } }
.rw-sub { position: relative; font-size: 15px; color: var(--text); margin-top: 6px; opacity: 0; animation: rwIn .4s ease 1.6s forwards; }
.rw-party { position: relative; font-size: 13px; color: var(--muted); margin-top: 4px; opacity: 0; animation: rwIn .4s ease 1.8s forwards; }
.rw-btn { position: relative; margin-top: 18px; opacity: 0; animation: rwIn .4s ease 2s forwards; }
@keyframes rwIn { to { opacity: 1; } }
.rw-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rw-conf { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; opacity: .9; animation: rwConf 2.4s linear 1.3s infinite; }
@keyframes rwConf { to { transform: translateY(115%) rotate(540deg); opacity: 0; } }
/* Оформление: тема + акцент */
.theme-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.theme-lbl { font-size: 13px; color: var(--muted); width: 64px; flex: 0 0 auto; }
/* wrap обязателен: пять языков (🇺🇦 Українська, 🇪🇸 Español) в один ряд не влезают
   на 375px и раздвигали «Настройки» до горизонтального скролла всей страницы. */
.theme-toggle { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-opt { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.theme-opt.active { border-color: var(--accent); color: #fff; background: var(--accent); }
.accent-swatches { display: flex; gap: 8px; }
.accent-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.accent-sw.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
/* Nested-прогрессия: компактные полоски День/Неделя/Серия */
.ptrio-card { display: flex; flex-direction: column; gap: 9px; padding: 12px 16px; }
.ptrio-item { display: flex; flex-direction: column; gap: 4px; }
.ptrio-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; }
.ptrio-top > span:first-child { display: inline-flex; align-items: center; min-height: 26px; }
.ptrio-top .muted { font-weight: 500; }
.ptrio-bar { height: 7px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.ptrio-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.2,1,.3,1); }

/* ============================================================
   Живой компаньон (Finch-модель)
   ============================================================ */
.comp-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.comp-row { display: flex; align-items: center; gap: 14px; }
.comp-art { flex: 0 0 auto; width: 96px; height: 128px; display: block; overflow: hidden; background: transparent; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--accent) 50%, #d7dcef); box-shadow: 0 4px 14px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.15); }
.comp-svg { width: 84px; height: 84px; display: block; animation: comp-float 4s ease-in-out infinite; transform-origin: center bottom; }
.comp-video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.comp-shadow-art { object-fit: contain; filter: drop-shadow(0 7px 10px rgba(24, 12, 36, .22)); }
@keyframes comp-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
.comp-body { flex: 1 1 auto; min-width: 0; }
.comp-name { display: flex; align-items: center; gap: 7px; }
.comp-name b { font-size: 16px; font-weight: 800; }
.comp-rename { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.comp-rename:hover { color: var(--text); background: var(--panel2); }
.comp-line { margin: 3px 0 9px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.comp-line-row { display: flex; align-items: flex-start; gap: 6px; }
.comp-line-row .comp-line { flex: 1 1 auto; min-width: 0; }

/* Строка-чекбокс с текстом (карточки ИИ: итог дня, личная карта дерева, действия в чате).
   Раньше класс не был определён вовсе — label оставался инлайновым, и в узких контейнерах
   чекбокс отрывался от своей подписи. */
/* Селектор с `label` намеренно: на экране онбординга действует `.auth-box label
   { display: block }` — та же специфичность (0,1,1), и без `label` здесь наш flex
   проигрывал по порядку. Галочка отрывалась и вставала НАД своей подписью, из-за
   чего строка занимала втрое больше места. Поймано на живом проде 27.07. */
.drc-row, label.drc-row { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; line-height: 1.45; }
.drc-row > input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); }
.drc-row > span { flex: 1 1 auto; min-width: 0; }

/* 🕯 Момент дня с Тенью — встреча, а не модалка-нотация. Появляется один раз
   утром и один раз вечером, поэтому может позволить себе занять экран целиком. */
.moment-ov { align-items: flex-end; }
.moment-box {
  width: 100%; max-width: 460px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px 20px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  animation: momentUp .32s cubic-bezier(.22,.9,.3,1);
}
@keyframes momentUp { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .moment-box { animation: none; } }
.moment-art { width: 116px; height: 116px; display: flex; align-items: center; justify-content: center; }
.moment-art img, .moment-art video { width: 100%; height: 100%; object-fit: contain; }
.moment-line { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); max-width: 34ch; }
.moment-streak { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .01em; }
.moment-acts { display: flex; gap: 9px; width: 100%; margin-top: 2px; }
.moment-acts .btn { flex: 1 1 0; min-height: 46px; }
@media (min-width: 620px) {
  .moment-ov { align-items: center; }
  .moment-box { border-radius: 20px; padding-bottom: 22px; }
}

/* 🤖 Онбординг v2: блок «Тень собирает старт». */
.ob-ai { margin-bottom: 18px; }
.ob-ai textarea { width: 100%; resize: vertical; }
.ob-ai .ob-or { margin-top: 16px; }
.ob-ai-result .dayrec-list { margin: 0 0 12px; gap: 10px; }
.ob-ai-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-ai-acts .btn { flex: 1 1 auto; }

/* 💬 Карточки-действия в ответе Помощника (Фаза C).
   white-space: normal обязателен — пузырь .chat-msg держит pre-wrap ради переносов в тексте
   ответа, и без сброса переводы строк ВЁРСТКИ карточек рендерились как пустые строки. */
.chat-actions { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); white-space: normal; }
.chat-actions .dayrec-list { margin: 0 0 8px; gap: 10px; }
.chat-actions.applied { font-size: 12.5px; padding-top: 6px; }

/* Интервью «Личной карты» дерева: вопрос-лейбл + поле. */
.tm-q { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.tm-q input, .tm-q textarea { width: 100%; margin-top: 4px; font-weight: 400; }
.tm-hint { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; line-height: 1.4; }

/* Фраза Тени в нудже, когда у карточки нет .nudge-boost (мобилка). */
.nudge-voice { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--text); }

/* 🔊 Кнопка озвучки (голос Тени). Тихая по умолчанию, активная — акцентом. */
.tts-btn { flex: 0 0 auto; align-self: flex-start; background: none; border: none; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 4px 5px; border-radius: 7px; opacity: 0.5;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; }
.tts-btn:hover { opacity: 1; background: var(--panel2); }
.tts-btn.on { opacity: 1; background: var(--accent); color: #fff; }
.nudge-card .tts-btn, .chat-msg .tts-btn, .ai-out .tts-btn { display: block; margin-left: auto; margin-top: 4px; }
/* Тач: иконка заметнее (нет hover, чтобы её обнаружить) и палец-совместимая зона нажатия. */
@media (hover: none) {
  .tts-btn { opacity: 0.75; min-width: 34px; min-height: 34px; padding: 6px; }
}
.comp-bond { display: flex; flex-direction: column; gap: 4px; }
.comp-bond-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.comp-bond-top .muted { font-weight: 500; }
.comp-bond-bar { height: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.comp-bond-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s cubic-bezier(.2,1,.3,1); }
.comp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.comp-cta { background: var(--accent) !important; color: #fff !important; }
.comp-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.comp-form label { font-size: 13px; font-weight: 600; }
.comp-form input { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 14px; }
.comp-form-btns { display: flex; gap: 8px; }
.comp-peek { margin: 10px 0 0; font-size: 12.5px; font-style: italic; }

/* ============================================================
   Питомцы по сферам (десятиборье как зверинец)
   ============================================================ */
.pet-intro h3 { margin: 0 0 8px; }
.pet-intro .muted { font-size: 12.5px; line-height: 1.5; margin: 0; }
.pet-balance { margin: 10px 0 0 !important; font-size: 13px !important; line-height: 1.45; color: var(--text) !important; font-style: normal !important; }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pet-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 12px !important; }
.pet-art { width: 92px; height: 98px; }
.pet-svg { width: 100%; height: 100%; display: block; pointer-events: none; }
/* paper-doll idle: анимируем части по классам (id нельзя — много питомцев на странице) */
.pet-svg .pd-body-grp { animation: pd-bob 3.4s ease-in-out infinite; transform-origin: 60px 120px; }
.pet-svg .pd-ear-l { animation: pd-ear 4.2s ease-in-out infinite; transform-origin: 44px 50px; }
.pet-svg .pd-ear-r { animation: pd-ear 4.2s ease-in-out infinite .9s; transform-origin: 76px 50px; }
.pet-svg .pd-tail { animation: pd-tail 3.8s ease-in-out infinite; transform-origin: 92px 92px; }
.pet-svg .pd-eyes { animation: pd-blink 5s ease-in-out infinite; transform-origin: 60px 80px; }
@keyframes pd-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes pd-ear { 0%,92%,100% { transform: rotate(0) } 96% { transform: rotate(-9deg) } }
@keyframes pd-tail { 0%,100% { transform: rotate(-7deg) } 50% { transform: rotate(9deg) } }
@keyframes pd-blink { 0%,90%,100% { transform: scaleY(1) } 95% { transform: scaleY(.08) } }
.pet-svg .pd-wear { animation: pd-bob 3.4s ease-in-out infinite; } /* надетая экипировка качается синхронно с телом */
@media (prefers-reduced-motion: reduce) { .pet-svg .pd-body-grp, .pet-svg .pd-ear-l, .pet-svg .pd-ear-r, .pet-svg .pd-tail, .pet-svg .pd-eyes, .pet-svg .pd-wear { animation: none } }
.pet-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.pet-name b { font-size: 14.5px; font-weight: 800; }
.pet-badge { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.pet-bar { width: 100%; height: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 9px 0 6px; }
.pet-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.2,1,.3,1); }
.pet-line { margin: 0 !important; font-size: 11.5px !important; }
.pet-traits { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 8px; }
.pet-trait-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel2) 86%, transparent);
}
.pet-trait-chip small { color: var(--muted); font-size: 9px; font-weight: 750; white-space: nowrap; }
.pet-trait-chip .pet-trait-icon { width: 18px; height: 18px; }
.pet-art { position: relative; cursor: pointer; }
.pet-art:active .pet-svg { transform: scale(0.94); }
.pet-svg.pet-nom { animation: pet-nom .55s ease; }
@keyframes pet-nom { 0%,100% { transform: scale(1) } 25% { transform: scale(1.12) rotate(-3deg) } 60% { transform: scale(0.96) rotate(2deg) } }
.pet-food { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); pointer-events: none; animation: pet-food-rise 1s ease-out forwards; }
@keyframes pet-food-rise { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.6) } 20% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -34px) scale(1.1) } }
.pet-edit { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 1px 3px; border-radius: 5px; }
.pet-edit:hover { color: var(--text); background: var(--panel2); }
.pet-sphere { margin: 2px 0 0 !important; font-size: 10.5px !important; opacity: .8; }
.pet-species-picker { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; }
.pet-species-picker select { min-width: 0; width: 100px; padding: 5px 24px 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel2); color: var(--text); font: inherit; cursor: pointer; }
.pet-kit { width: 100%; display: grid; gap: 7px; margin-top: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--panel2) 72%, transparent); text-align: left; box-sizing: border-box; }
.pet-kit label { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 6px; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.pet-kit select { min-width: 0; width: 100%; padding: 5px 22px 5px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.pet-kit details { border-top: 1px solid var(--line); padding-top: 6px; }
.pet-kit summary { color: var(--muted); font-size: 10.5px; font-weight: 800; cursor: pointer; user-select: none; }
.pet-kit details label { margin-top: 6px; }
.fortune-edit-launch { width: 100%; display: grid; gap: 6px; margin-top: 8px; }
.fortune-edit-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--panel2)); }
.fortune-edit-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel2)); }
.fortune-edit-summary { display: block; padding: 0 4px; color: var(--muted); font-size: 9.5px; line-height: 1.35; text-align: center; }

/* Визуальная примерочная Fortune Cat — ручная настройка как в редакторе аватара. */
.fortune-editor-overlay { z-index: 260; }
.fortune-editor-box { position: relative; width: min(980px, 96vw); max-height: min(900px, 92dvh); overflow: auto; box-sizing: border-box; padding: 26px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 24px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, #fff 4%), var(--panel)); box-shadow: 0 30px 90px rgba(0,0,0,.42); }
.fortune-editor-x { z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--panel2); }
.fortune-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-right: 42px; margin-bottom: 20px; }
.fortune-editor-head h2 { margin: 3px 0 0; font-size: clamp(22px, 3vw, 32px); line-height: 1.1; }
.fortune-editor-kicker { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.fortune-editor-saved { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 750; }
.fortune-editor-saved i { width: 8px; height: 8px; border-radius: 50%; background: #56c985; box-shadow: 0 0 0 4px rgba(86,201,133,.12); }
.fortune-editor-layout { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(390px, 1.1fr); align-items: start; gap: 24px; }
.fortune-editor-preview-column { position: sticky; top: 0; min-width: 0; }
.fortune-editor-stage { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 11%, var(--panel2)) 0, var(--panel2) 58%, color-mix(in srgb, var(--panel2) 75%, #000) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.fortune-editor-stage .pet-svg { width: 94%; height: 94%; max-width: none; filter: drop-shadow(0 14px 12px rgba(0,0,0,.2)); }
.fortune-editor-caption { min-height: 34px; margin: 10px 8px 0; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.fortune-editor-controls { min-width: 0; }
.fortune-editor-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.fortune-editor-tab { min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 9px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); color: var(--muted); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.fortune-editor-tab span { font-size: 18px; }
.fortune-editor-tab:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.fortune-editor-tab.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 11%, transparent); }
.fortune-editor-options { min-height: 330px; }
.fortune-editor-help { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.fortune-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fortune-option { position: relative; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel2); color: var(--text); font: inherit; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.fortune-option:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); }
.fortune-option.selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); }
.fortune-option-thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--panel) 75%, transparent); }
.fortune-option-thumb img { width: 100%; height: 100%; object-fit: contain; }
.fortune-option-label { display: block; min-height: 28px; margin-top: 7px; font-size: 10.5px; font-weight: 800; line-height: 1.3; text-align: center; }
.fortune-option-check { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 900; opacity: 0; transform: scale(.7); transition: opacity .16s ease, transform .16s ease; }
.fortune-option.selected .fortune-option-check { opacity: 1; transform: scale(1); }
.fortune-auto-thumb { font-size: 40px; filter: drop-shadow(0 5px 7px rgba(0,0,0,.14)); }
.fortune-auto-thumb.empty { color: var(--muted); filter: none; }
.fortune-skin-swatch { position: relative; width: 72%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 7px 16px rgba(0,0,0,.2); }
.fortune-skin-swatch i, .fortune-skin-swatch b, .fortune-skin-swatch em { position: absolute; display: block; }
.fortune-skin-swatch i { inset: 0; background: #292b2f; }
.fortune-skin-swatch b { width: 66%; height: 66%; right: -7%; top: -6%; border-radius: 50%; background: #111317; }
.fortune-skin-swatch em { width: 44%; height: 20%; left: 28%; bottom: 16%; border-radius: 999px; background: #b78325; transform: rotate(-12deg); }
.fortune-skin-swatch.ivory i { background: #f1e8d7; }
.fortune-skin-swatch.ivory b { background: #fffaf0; }
.fortune-skin-swatch.ivory em { background: #b33a2e; }
.fortune-editor-footer { display: flex; justify-content: flex-end; margin-top: 18px; }
.fortune-editor-footer .btn { min-width: 150px; }

@media (max-width: 760px) {
  .fortune-editor-box { width: 100%; max-height: 92dvh; padding: 20px 14px 16px; border-radius: 22px 22px 12px 12px; }
  .fortune-editor-head { display: block; padding-right: 38px; }
  .fortune-editor-saved { margin-top: 9px; }
  .fortune-editor-layout { grid-template-columns: 1fr; gap: 14px; }
  .fortune-editor-preview-column { position: static; }
  .fortune-editor-stage { width: min(72vw, 310px); margin: 0 auto; }
  .fortune-editor-caption { min-height: 0; }
  .fortune-editor-tabs { position: sticky; top: -20px; z-index: 1; padding: 8px 0; margin-bottom: 8px; background: var(--panel); }
  .fortune-editor-options { min-height: 0; }
  .fortune-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fortune-editor-footer { position: sticky; bottom: -16px; padding: 10px 0 0; background: linear-gradient(transparent, var(--panel) 28%); }
  .fortune-editor-footer .btn { width: 100%; }
}
.pet-rename-form { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 4px; }
.pet-rename-form input { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 13px; text-align: center; }
.pet-rename-btns { display: flex; gap: 6px; justify-content: center; }
.btn.sm { padding: 4px 10px; font-size: 12px; }

/* ============================================================
   Режим «Система» — нарратор (Solo Leveling-вайб)
   ============================================================ */
#sysnarr { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.sysnarr {
  --sys: #4fd6ff;
  width: 100%; box-sizing: border-box; padding: 12px 16px 13px;
  background: linear-gradient(180deg, rgba(8,16,28,0.97), rgba(10,20,34,0.97));
  border: 1.5px solid var(--sys); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(79,214,255,0.25), 0 0 22px rgba(79,214,255,0.35), inset 0 0 18px rgba(79,214,255,0.08);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color: #dbf4ff; text-align: center; opacity: 0; transform: translateY(-14px) scale(.96);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,1.3,.3,1);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.sysnarr.show { opacity: 1; transform: translateY(0) scale(1); }
.sysnarr-head { font-size: 10.5px; letter-spacing: 3px; color: var(--sys); opacity: .85; margin-bottom: 5px; text-shadow: 0 0 8px rgba(79,214,255,.6); }
.sysnarr-title { font-size: 14.5px; font-weight: 700; letter-spacing: 1px; color: #fff; text-shadow: 0 0 10px rgba(79,214,255,.5); }
.sysnarr-body { font-size: 12.5px; margin-top: 4px; color: #a9d8ee; }
html[data-system="on"] #topbar .logo { text-shadow: 0 0 12px rgba(79,214,255,.7); color: #4fd6ff; }
html[data-system="on"] #appName { letter-spacing: 1.5px; }
@media (prefers-reduced-motion: reduce) { .sysnarr { transition: opacity .2s; } }

/* ============================================================
   Режим «Система» v2 — полный визуальный рескин (Solo Leveling «окно Системы»)
   Только цвета/рамки/шрифты + сетка-фон — раскладку не трогаем.
   ============================================================ */
html[data-system="on"] body {
  background:
    linear-gradient(rgba(79,214,255,0.045) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(79,214,255,0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(180deg, #060b14, #0a1119) fixed;
}
html[data-system="on"] #topbar { background: linear-gradient(180deg, rgba(8,16,26,0.96), rgba(8,16,26,0.7)); border-bottom: 1px solid rgba(79,214,255,0.25); }
html[data-system="on"] #appName, html[data-system="on"] .logo { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 1.5px; }
html[data-system="on"] .card {
  background: rgba(9,16,26,0.92);
  border: 1px solid rgba(79,214,255,0.36);
  border-radius: 7px;
  box-shadow: inset 0 0 16px rgba(79,214,255,0.06), 0 0 14px rgba(79,214,255,0.06);
}
html[data-system="on"] .card h2, html[data-system="on"] .card h3 {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 1px; color: #dff3fb; text-shadow: 0 0 8px rgba(79,214,255,0.32);
}
html[data-system="on"] .navsec.active, html[data-system="on"] .navsubtab.active { color: #4fd6ff; }
html[data-system="on"] .navsubtab.active { border-color: rgba(79,214,255,0.5); }
html[data-system="on"] .btn { border-color: rgba(79,214,255,0.4); }
html[data-system="on"] .xp-bar { border-color: rgba(79,214,255,0.3); }
html[data-system="on"] .xp-bar > span { box-shadow: 0 0 10px rgba(79,214,255,0.5); }
html[data-system="on"] #charSummary, html[data-system="on"] .ch-rank, html[data-system="on"] .daystat { font-family: ui-monospace, Menlo, Consolas, monospace; }
html[data-system="on"] .char-hero { position: relative; border-color: rgba(79,214,255,0.5); }
html[data-system="on"] .char-hero::before {
  content: "STATUS"; position: absolute; top: 0; right: 12px;
  font: 700 10px/1 ui-monospace, monospace; letter-spacing: 2px; color: #06121c;
  background: #4fd6ff; padding: 4px 9px; border-radius: 0 0 5px 5px;
}
html[data-system="on"] .task, html[data-system="on"] .gear-item, html[data-system="on"] .pet-card { border-color: rgba(79,214,255,0.18); }

/* ============================================================
   Снаряжение / Арсенал
   ============================================================ */
.gear-sum { font-size: 12.5px; font-weight: 600; margin: 0 0 10px; }
.gear-slot { margin-top: 10px; }
.gear-slot-h { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.gear-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.gear-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 8px; background: var(--panel2); border: 1.5px solid var(--line); border-radius: 11px; }
.gear-item.equipped { box-shadow: 0 0 0 1px currentColor inset; }
.gear-ic { min-height: 84px; display: grid; place-items: center; line-height: 1; }
.gear-nm { font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.gear-bonus { font-size: 11px; font-weight: 700; }
.gear-item .btn { margin-top: 3px; }

/* Мелкие фиксы фидбека */
.cf-hint { display: block; flex-basis: 100%; font-size: 10.5px; line-height: 1.3; margin-top: 3px; }
.calv-chip { position: relative; }
.calv-chip-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px; margin-left: 4px; padding: 0 2px; border-radius: 4px; }
.calv-chip-del:hover { color: var(--bad); background: rgba(224,82,106,0.12); }
.t-edit-form { flex: 1 1 auto; display: flex; }
.t-edit-form input { width: 100%; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--accent); background: var(--panel2); color: var(--text); font-size: 14px; font-family: inherit; }
.t-title { cursor: text; }

/* Дискаверабилити: подсветка новых разделов/фич */
.navsec { position: relative; }
.navsec-dot, .navsub-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel), 0 0 8px var(--accent); animation: disc-pulse 1.6s ease-in-out infinite; }
.navsec-dot { position: absolute; top: 5px; right: 7px; }
.navsub-dot { margin-left: 5px; vertical-align: middle; }
.navsec-new .navsec-l { color: var(--accent); }
@keyframes disc-pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.35); opacity: .7 } }
.sys-teaser { flex-direction: column; align-items: stretch; gap: 8px; }
.sys-teaser-btns { display: flex; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .navsec-dot, .navsub-dot { animation: none; } }

/* ============================================================
   Логово — комната персонажа
   ============================================================ */
.den-card { padding: 0 !important; overflow: hidden; }
.den-scene { position: relative; width: 100%; height: 244px; overflow: hidden; }
.den-room { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.den-avatar { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 132px; z-index: 2; }
.den-avatar svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25)); }
.den-avatar.den-avatar-art { bottom: -4px; width: auto; height: 228px; }
.den-avatar.den-avatar-art img { display: block; width: auto; height: 100%; filter: drop-shadow(0 10px 12px rgba(0,0,0,0.34)); }
.den-avatar-rig { bottom: 0; width: 148px; }
.satoru-avatar-rig { display: block; overflow: visible; }
.satoru-avatar-rig .avatar-ground { fill: rgba(10, 8, 18, 0.28); }
.satoru-avatar-rig .skin { fill: #efbd8f; }
.satoru-avatar-rig .neck { fill: #d79a70; }
.satoru-avatar-rig .hair { fill: #3b2a1d; }
.satoru-avatar-rig .hair-dark { fill: #251a13; opacity: .58; }
.satoru-avatar-rig .eye { fill: #2b231d; }
.satoru-avatar-rig .brow,
.satoru-avatar-rig .nose,
.satoru-avatar-rig .smile { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.satoru-avatar-rig .brow { stroke: #312016; stroke-width: 4; }
.satoru-avatar-rig .nose { stroke: #c7785f; stroke-width: 2.4; }
.satoru-avatar-rig .smile { stroke: #9d5146; stroke-width: 2.6; }
.satoru-avatar-rig .teal { fill: #1e7773; }
.satoru-avatar-rig .teal-dark { fill: #155955; }
.satoru-avatar-rig .cream { fill: #f2e3c8; }
.satoru-avatar-rig .pants { fill: #1f2d33; }
.satoru-avatar-rig .scarf { fill: #a34d31; }
.satoru-avatar-rig .scarf-dark { fill: #803621; }
.satoru-avatar-rig .leather { fill: #7a4f2e; }
.satoru-avatar-rig .leather-mid { fill: #9a683d; }
.satoru-avatar-rig .leather-dark { fill: #4d3422; }
.satoru-avatar-rig .strap,
.satoru-avatar-rig .belt,
.satoru-avatar-rig .glove { fill: #4b321f; }
.satoru-avatar-rig .gold,
.satoru-avatar-rig .brass,
.satoru-avatar-rig .goggle-rim { fill: #bd8b42; }
.satoru-avatar-rig .lens { fill: url(#satoru-lens); }
.satoru-avatar-rig .lens-shine,
.satoru-avatar-rig .lace,
.satoru-avatar-rig .chain,
.satoru-avatar-rig .line-dark,
.satoru-avatar-rig .stroke-soft { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.satoru-avatar-rig .lens-shine { stroke: rgba(255,255,255,.62); stroke-width: 3; }
.satoru-avatar-rig .lace { stroke: #d49a52; stroke-width: 3; }
.satoru-avatar-rig .chain { stroke: #3b2a1d; stroke-width: 4; stroke-dasharray: 4 6; }
.satoru-avatar-rig .line-dark { stroke: rgba(30,20,12,.42); stroke-width: 4; }
.satoru-avatar-rig .stroke-soft { stroke: rgba(40,25,12,.35); stroke-width: 3; }
.satoru-avatar-rig .lantern { fill: #4b321f; }
.satoru-avatar-rig .flame { fill: #ffd26a; filter: drop-shadow(0 0 5px rgba(255, 202, 82, .72)); }
.satoru-avatar-rig .avatar-pivots { display: none; }
.satoru-avatar-rig #avatar-rig,
.satoru-avatar-rig #avatar-body,
.satoru-avatar-rig #avatar-head,
.satoru-avatar-rig #avatar-arm-l,
.satoru-avatar-rig #avatar-arm-r,
.satoru-avatar-rig #avatar-forearm-l,
.satoru-avatar-rig #avatar-forearm-r,
.satoru-avatar-rig #avatar-leg-l,
.satoru-avatar-rig #avatar-leg-r,
.satoru-avatar-rig #avatar-boot-l,
.satoru-avatar-rig #avatar-boot-r,
.satoru-avatar-rig #avatar-cloak,
.satoru-avatar-rig #slot-head,
.satoru-avatar-rig #slot-neck,
.satoru-avatar-rig #slot-back,
.satoru-avatar-rig #avatar-accessory,
.satoru-avatar-rig #avatar-eyes {
  transform-box: view-box;
}
.satoru-avatar-rig #avatar-body { transform-origin: 110px 200px; animation: satoru-breath 3.8s ease-in-out infinite; }
.satoru-avatar-rig #avatar-head { transform-origin: 111px 112px; animation: satoru-head-idle 4.6s ease-in-out infinite; }
.satoru-avatar-rig #avatar-eyes { transform-origin: 111px 72px; animation: satoru-blink 5.4s infinite; }
.satoru-avatar-rig #avatar-arm-l { transform-origin: 62px 122px; }
.satoru-avatar-rig #avatar-arm-r { transform-origin: 158px 122px; }
.satoru-avatar-rig #avatar-forearm-l { transform-origin: 40px 168px; }
.satoru-avatar-rig #avatar-forearm-r { transform-origin: 173px 168px; }
.satoru-avatar-rig #avatar-leg-l { transform-origin: 88px 205px; }
.satoru-avatar-rig #avatar-leg-r { transform-origin: 129px 205px; }
.satoru-avatar-rig #avatar-boot-l { transform-origin: 87px 297px; }
.satoru-avatar-rig #avatar-boot-r { transform-origin: 131px 297px; }
.satoru-avatar-rig #avatar-cloak,
.satoru-avatar-rig #slot-neck { transform-origin: 110px 116px; }
.satoru-avatar-rig #slot-back { transform-origin: 146px 114px; animation: satoru-pack 4.2s ease-in-out infinite; }
.satoru-avatar-rig #avatar-accessory { transform-origin: 180px 178px; animation: satoru-lantern 3.4s ease-in-out infinite; }
.den-avatar-rig[data-state="happy"] .satoru-avatar-rig #avatar-rig { animation: satoru-happy 1.1s ease-out 2; }
.den-avatar-rig[data-state="victory"] .satoru-avatar-rig #avatar-rig { animation: satoru-victory 1s ease-out 3; }
.den-avatar-rig[data-state="tired"] .satoru-avatar-rig #avatar-body { animation: none; transform: translateY(8px) rotate(1.6deg); }
.den-avatar-rig[data-state="tired"] .satoru-avatar-rig #avatar-head { animation: none; transform: translateY(8px) rotate(5deg); }
.den-avatar-rig[data-state="tired"] .satoru-avatar-rig #avatar-arm-l { transform: translateY(9px) rotate(5deg); }
.den-avatar-rig[data-state="tired"] .satoru-avatar-rig #avatar-arm-r { transform: translateY(9px) rotate(-5deg); }
.den-avatar-rig[data-state="focus"] .satoru-avatar-rig #avatar-body { animation-duration: 5.2s; }
.den-avatar-rig[data-state="focus"] .satoru-avatar-rig #avatar-head { transform: translateY(-2px) rotate(-2deg); animation: none; }
.den-avatar-rig[data-state="focus"] .satoru-avatar-rig #avatar-arm-l { transform: rotate(-4deg); }
.den-avatar-rig[data-state="focus"] .satoru-avatar-rig #avatar-arm-r { transform: rotate(4deg); }
@keyframes satoru-breath {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-2px) scaleY(1.012); }
}
@keyframes satoru-head-idle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.5deg); }
}
@keyframes satoru-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.08); }
}
@keyframes satoru-pack {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1px) rotate(.8deg); }
}
@keyframes satoru-lantern {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3deg); }
}
@keyframes satoru-happy {
  0%, 100% { transform: translateY(0) scaleY(1); }
  36% { transform: translateY(-10px) scaleY(1.02); }
  66% { transform: translateY(2px) scaleY(.98); }
}
@keyframes satoru-victory {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-16px) rotate(-3deg); }
  70% { transform: translateY(1px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .satoru-avatar-rig #avatar-body,
  .satoru-avatar-rig #avatar-head,
  .satoru-avatar-rig #avatar-eyes,
  .satoru-avatar-rig #slot-back,
  .satoru-avatar-rig #avatar-accessory,
  .den-avatar-rig[data-state="happy"] .satoru-avatar-rig #avatar-rig,
  .den-avatar-rig[data-state="victory"] .satoru-avatar-rig #avatar-rig {
    animation: none;
  }
}

/* Calendar recovery is a global task-data gate, not a compact desktop action. */
#main .calendar-load-retry { min-block-size: var(--touch-min); }
@media (pointer: coarse), (max-width: 600px) {
  #main .calendar-load-retry {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}
.den-companion { position: absolute; right: 10px; top: 16px; width: 84px; height: 112px; z-index: 3; border-radius: 12px; overflow: hidden; background: rgba(10,8,20,0.82); border: 2px solid color-mix(in srgb, var(--accent) 60%, white); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 8px rgba(0,0,0,0.35); }
.den-companion .comp-video { width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; }
.den-companion svg { width: 100%; height: auto; display: block; }
.den-pet { position: absolute; z-index: 2; }
.den-pet svg { width: 100%; height: auto; display: block; }
.den-pet-0 { left: 14px; bottom: 14px; width: 52px; }
.den-pet-1 { right: 18px; bottom: 12px; width: 50px; }
.den-pet-2 { left: 84px; bottom: 6px; width: 42px; opacity: .96; }
.den-tag { position: absolute; left: 12px; top: 12px; z-index: 4; background: rgba(0,0,0,0.42); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(2px); }
.den-mood { margin: 0; padding: 13px 16px 2px; font-size: 13.5px; line-height: 1.45; }
.den-stats { display: flex; gap: 16px; padding: 6px 16px 10px; font-size: 13px; font-weight: 700; }
.den-stats span { color: var(--text); }
.den-focus { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 12px 10px; padding: 10px 13px; background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; font-size: 13px; }
.den-focus-on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.den-clock { font-variant-numeric: tabular-nums; font-size: 16px; }
.den-actions { display: flex; gap: 8px; padding: 0 12px 14px; flex-wrap: wrap; }

/* Error-boundary карточка */
.err-card { border-color: var(--bad); }
.err-card h3 { margin: 0 0 8px; }
.err-acts { display: flex; gap: 8px; margin-top: 12px; }
.err-trace { margin-top: 12px; padding: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; font-size: 11px; white-space: pre-wrap; overflow-x: auto; color: var(--muted); }

/* ============================================================
   Подписка / Pro / Paywall
   ============================================================ */
.tier-badge { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; vertical-align: middle; }
.tier-badge.tier-free { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.tier-badge.tier-trial { background: linear-gradient(120deg, #7c6cff, #b39bff); color: #fff; }
.tier-badge.tier-pro { background: linear-gradient(120deg, #e0a23e, #ffd479); color: #3a2700; }
.pro-feats { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 7px; }
.pro-feats li { font-size: 13px; color: var(--text); }
.btn.pro-cta { background: linear-gradient(120deg, #e0a23e, #ffd479); color: #3a2700; border: none; font-weight: 700; }
.btn.pro-cta:hover { filter: brightness(1.05); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.sub-card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pin-change { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pin-change input { padding: 8px 10px; }

.paywall-box { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 28px; width: min(440px, 96vw); text-align: center; }
.modal-x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.modal-x:hover { color: var(--text); }
.pw-crown { font-size: 50px; }
.paywall-box h2 { margin: 6px 0 8px; font-size: 22px; }
.paywall-box .pro-feats { text-align: left; max-width: 320px; margin: 16px auto; }
.pw-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pw-actions .btn { width: 100%; }
.pw-fine { font-size: 11px; margin-top: 12px; }

/* Locked (Pro-gated) card teaser */
.locked-card { position: relative; cursor: pointer; overflow: hidden; }
.locked-card > *:not(.lock-veil) { filter: blur(3px); opacity: .5; pointer-events: none; }
.lock-veil { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.lock-veil span { background: var(--panel2); border: 1px solid #e0a23e; color: #ffd479; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 999px; }

/* ============================================================
   Вид «Персонаж» — аватар, атрибуты, телосложение
   ============================================================ */
.char-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ch-avatar { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 25%, var(--panel2)), var(--panel2)); }
.ch-avatar::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(var(--rc) calc(var(--p) * 1%), var(--line) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); }
.ch-emoji { font-size: 46px; line-height: 1; }
.ch-meta { flex: 1; min-width: 220px; }
.ch-meta h2 { margin: 0 0 4px; }
.ch-rank { font-size: 14px; font-weight: 700; color: var(--rc, var(--text)); margin-bottom: 4px; }
.ch-arch { font-size: 14px; margin-bottom: 6px; }
.ch-title { font-size: 13px; margin-bottom: 10px; color: var(--accent); font-weight: 600; }
.char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 720px) { .char-grid { grid-template-columns: 1fr; } }
.radar-wrap { display: flex; justify-content: center; }
.radar { width: 100%; max-width: 280px; height: auto; }
.attr-list { display: grid; gap: 8px; margin: 12px 0; }
.attr-row { display: grid; grid-template-columns: 22px 110px 1fr 42px; align-items: center; gap: 8px; font-size: 13px; }
.attr-ic { font-size: 15px; }
.attr-dot { width: 11px; height: 11px; border-radius: 50%; justify-self: center; }
.attr-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-chip { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; margin-left: 8px; vertical-align: middle; cursor: help; }
.attr-bar { height: 8px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.attr-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .5s; }
.attr-val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.figure-wrap { display: flex; justify-content: center; padding: 8px 0; }
.figure { height: 200px; width: auto; }
.bmi-label { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.bmi-label b { color: var(--text); }
.body-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.body-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 4px; }
.body-form input { width: 90px; padding: 7px 9px; }
.locked-inline { cursor: pointer; color: #e0a23e; }
.locked-inline input { opacity: .5; }
.bodyfat-pro-gate {
  align-self: stretch;
  min-height: 42px;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel2);
  font: inherit;
  text-align: left;
}
.bodyfat-pro-gate b { color: var(--muted); font-size: 12px; }
.bodyfat-pro-gate:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============================================================
   Гайд «Как играть» + кнопка помощи + обратная связь
   ============================================================ */
.help-btn { width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 4px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-weight: 800; cursor: pointer; font-size: 14px; line-height: 1; flex: 0 0 auto; }
.help-btn:hover { color: var(--accent); border-color: var(--accent); }
.help-glyph { width: 17px; height: 17px; }
.guide-box { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 26px; width: min(620px, 96vw); max-height: 88vh; overflow-y: auto; }
.guide-box h2 { margin: 0 0 6px; }
/* Поп-ап «насколько хотел» (Хайп) */
.desire-box { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 24px; width: min(460px, 96vw); animation: fadeIn .2s; }
.desire-box h3 { margin: 0 0 4px; }
.desire-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.desire-sci { font-size: 11.5px; margin: 14px 0 0; line-height: 1.45; }
.desire-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 14px; cursor: pointer; background: var(--panel2); border: 1px solid var(--line); color: var(--text); transition: transform .1s, border-color .15s, background .15s; }
.desire-opt:hover { transform: translateY(-2px); }
.desire-opt .d-emoji { font-size: 30px; line-height: 1; }
.desire-opt b { font-size: 13px; }
.desire-opt small { font-size: 11px; color: var(--muted); text-align: center; }
.desire-opt.forced:hover { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel2)); }
.desire-opt.neutral:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel2)); }
.desire-opt.hyped:hover { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, var(--panel2)); }
@media (max-width: 560px) { .desire-btns { grid-template-columns: 1fr; } .desire-opt { flex-direction: row; justify-content: flex-start; gap: 10px; } .desire-opt small { text-align: left; } }
.guide-list { display: grid; gap: 14px; margin: 16px 0; }
/* Заголовок группы разделов гайда — якорь для глаза в длинном списке. */
.guide-group { margin: 10px 0 -2px; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent); font-weight: 800; }
.guide-group:first-child { margin-top: 0; }
.guide-sec { display: flex; gap: 14px; align-items: flex-start; }
.gs-ic { font-size: 24px; flex: 0 0 auto; width: 32px; text-align: center; }
.guide-sec h4 { margin: 0 0 3px; font-size: 15px; }
.guide-sec p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.feedback-form { display: flex; flex-direction: column; gap: 8px; }
.feedback-form textarea { min-height: 70px; resize: vertical; width: 100%; }
.fb-actions { display: flex; align-items: center; gap: 10px; }
.fb-file { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); background: var(--panel2); border: 1px dashed var(--line); border-radius: 9px; padding: 8px 12px; cursor: pointer; }
.fb-file input { display: none; }
.fb-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
/* Каталог наград */
.rwc-list { display: flex; flex-direction: column; margin-top: 12px; }
.rwc-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.rwc-row:last-child { border-bottom: none; }
.rwc-ic { width: 46px; min-width: 46px; display: grid; place-items: center; text-align: center; }
.rwc-name { flex: 1; min-width: 0; }
.rwc-cost { color: var(--warn); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Данные/бэкапы юзера (админ) */
.ud-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.ud-table th, .ud-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ud-table th { color: var(--muted); font-weight: 600; }
.ud-bk { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ud-stamp { font-size: 12px; max-width: 180px; }
.habit-edit select.missing, .skill-edit select.missing { border-color: var(--warn); color: var(--warn); }
.skill-edit { margin-left: calc(var(--d, 0) * 22px); } /* отступ по глубине вложенности (N уровней) */

/* Репорты (админ) */
.rep-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.rep-toolbar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rep-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.rep-item { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.rep-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 12px; flex-wrap: wrap; }
.rep-kind { font-weight: 700; }
.rep-text { margin: 8px 0; white-space: pre-wrap; }
.rep-medias { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-media { max-width: 160px; max-height: 160px; border-radius: 8px; border: 1px solid var(--line); display: block; }

/* Today nudge (chests / boost cross-promo) */
.nudge-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px !important; }
.nudge { background: linear-gradient(120deg, rgba(224,162,62,.16), rgba(224,162,62,.06)); border: 1px solid #e0a23e; color: #ffd479; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; }
.nudge:hover { filter: brightness(1.1); }
.nudge-boost { color: #ffd479; font-weight: 600; font-size: 13px; }
.en-low .nudge-boost { color: #ffb3b3; }
.mobil-nudge { flex-direction: column; align-items: stretch; gap: 10px; }
.mobil-text p { font-size: 12.5px; margin: 4px 0 0; line-height: 1.45; }
.mobil-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* анти-привычки (свобода от привычек) */
.anti-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.anti-row:last-of-type { border-bottom: none; }
.anti-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anti-title { font-weight: 600; font-size: 14px; }
.anti-stat { font-size: 12.5px; color: var(--muted); }
.anti-stat b { color: #5fbf7a; font-variant-numeric: tabular-nums; }
.anti-undo { color: var(--muted); }
.anti-note { font-size: 12px; margin: 10px 0 0; line-height: 1.45; }
.ah-edit { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ah-edit:last-child { border-bottom: none; }
.ah-name { font-size: 13.5px; }
/* ИИ-ассистент */
.ai-review-card, .wrapped-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ai-box { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 24px; width: min(560px, 96vw); max-height: 86vh; overflow-y: auto; animation: fadeIn .2s; }
.ai-box h3 { margin: 0 0 12px; }
.ai-spin { font-size: 28px; text-align: center; padding: 12px; }
.ai-out { font-size: 14px; line-height: 1.6; }
.ai-body .muted { line-height: 1.5; }
/* Движок «Предложений» */
.ai-box textarea { width: 100%; resize: vertical; min-height: 96px; font: inherit; }
.propose-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.prop-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.prop-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.4; }
.prop-row:hover { border-color: var(--accent); }
.prop-row input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.prop-row input:not(:checked) + .prop-text { opacity: 0.45; text-decoration: line-through; }
.prop-text { flex: 1; }
/* Баннер «Импорт целей текстом» в Целях */
.ai-import-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ai-imp-l { display: flex; flex-direction: column; gap: 2px; }
.ai-imp-l .muted { font-size: 12.5px; }
.imp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.imp-head h3 { margin: 0; }
/* ИИ-помощник: плавающая кнопка + чат */
/* Кнопка в углу — это ТЕНЬ, а не абстрактный робот. Разбор Альберта 28.07: раз она
   и есть Джарвис, логично держать её сбоку постоянно на виду и звать одним тапом.
   Портрет вместо эмодзи; стрик — маленьким бейджем на самой кнопке, чтобы не
   занимать отдельную карточку на экране. */
#ai-fab { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 24px; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.4); z-index: 50; transition: transform .15s, box-shadow .15s; display: flex; align-items: center; justify-content: center; padding: 0; overflow: visible;
  /* Светлая подложка обязательна: арт Тени — тёмный дымный силуэт, и на тёмной
     кнопке он сливался с фоном до неразличимости. */
  background: radial-gradient(circle at 50% 38%, rgba(155,124,255,.55), var(--accent) 72%); }
#ai-fab:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(108,140,255,.5); }
#ai-fab .fab-face { width: 84%; height: 84%; object-fit: contain; display: block; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
#ai-fab .fab-streak {
  position: absolute; top: -4px; right: -4px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 1px 5px; font-size: 10px; font-weight: 800;
  line-height: 1.4; letter-spacing: -.01em; pointer-events: none;
}
.chat-box { width: min(560px, 96vw); display: flex; flex-direction: column; max-height: 86vh; }
.chat-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; min-height: 220px; max-height: 56vh; }
.chat-msg { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.chat-msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.ai { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.typing { color: var(--muted); letter-spacing: 2px; }
.chat-empty { padding: 8px 2px; }
.chat-suggs { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.chat-sugg { text-align: left; background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 11px; font-size: 13px; cursor: pointer; }
.chat-sugg:hover { border-color: var(--accent); }
.chat-form { display: flex; gap: 8px; margin-top: 12px; }
.chat-form input { flex: 1; }
/* Карточка ИИ-ключей: мультипровайдер + гид */
.aikey-tip { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid #5fbf5f; border-radius: 9px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }
.aikey-form { display: flex; flex-direction: column; gap: 12px; }
/* Профиль-память: монопространственный, потому что это досье, а не проза — так видно
   структуру разделов и сразу заметно, если ИИ вернул мусор вместо текста. */
.profile-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 160px;
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px); padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55;
}
.profile-text:focus { outline: none; border-color: var(--accent); }
.profile-meta { font-size: 11.5px; margin-top: 6px; text-align: right; }
.profile-save-status { min-height: 1.5em; margin: 6px 0 0; color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-label); }
.profile-save-status.is-error,
.character-body-save-status.is-error { color: var(--bad); }
.aikey-row { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; }
.aikey-row.has { border-color: #5fbf5f; }
.aikey-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.aikey-free { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #093; background: #cdf3d6; border-radius: 999px; padding: 2px 7px; }
.aikey-paid { font-size: 10.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; }
.aikey-ok { font-size: 11.5px; color: #5fbf5f; margin-left: auto; }
.aikey-hint { font-size: 12px; line-height: 1.45; }
.aikey-hint a { color: var(--accent); white-space: nowrap; }
.aikey-row input { width: 100%; }
.aikey-pref { font-size: 13px; }
.aikey-pref select { margin-left: 6px; }
.aikey-actions { display: flex; align-items: center; gap: 10px; }
/* ИИ-биллинг: «включено в Pro» + полоса расхода токенов */
.aihouse { border-radius: 10px; padding: 11px 13px; margin: 0 0 12px; border: 1px solid var(--line); }
.aihouse.on { background: color-mix(in srgb, var(--accent) 10%, var(--panel2)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.aihouse.off { background: var(--panel2); }
.aihouse-h { font-size: 14px; }
.aihouse-bar { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 2px 0 5px; }
.aihouse-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
.aihouse-meta { font-size: 11.5px; }
/* Strava: пикер сферы для импорта тренировок */
.strava-skill { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); max-width: 320px; }
.strava-skill select { padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--panel2); color: var(--fg); font-size: 14px; }
.strava-skill code, .card code { background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 12px; }
/* Авто-категория: чип-подсказка под полем квеста */
.cat-suggest:empty { display: none; }
.cat-suggest { margin: 8px 0 0; }
.cat-chip { background: var(--panel2); border: 1px dashed var(--accent); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; animation: fadeIn .15s; }
.cat-chip:hover { background: var(--accent); border-style: solid; color: #fff; }
.cat-chip b { font-weight: 700; }
/* Копипаст-мост: шаги «через свой ИИ» */
.bridge-steps { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.bridge-step { font-size: 13px; line-height: 1.5; }
.bridge-step b { color: var(--accent); margin-right: 4px; }
.bridge-prompt, #bridge-json { width: 100%; margin-top: 6px; font: inherit; font-size: 12px; resize: vertical; }
.bridge-prompt { background: var(--panel2); color: var(--muted); }
#bridge-json { margin-bottom: 8px; }

/* ---------- Энергия (идея 19) ---------- */
.energy-card { padding: 12px 16px !important; cursor: help; }
.en-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.en-ic { font-size: 16px; }
.en-num { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 2px; }
.en-text { font-size: 12.5px; }
.en-bar { height: 9px; background: var(--panel2); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.en-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .5s, background .5s; }
.en-note { font-size: 11px; margin: 7px 0 0; }

/* ---------- Быстрый захват + Инбокс (Блок 2) ---------- */
.capture-card { padding: 12px 14px !important; }
.cap-row { display: flex; gap: 8px; align-items: center; }
.cap-row input[name="text"] { flex: 1 1 auto; min-width: 0; }
.cap-btn { flex: 0 0 auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; font-size: 17px; line-height: 1; padding: 8px 11px; cursor: pointer; }
.cap-btn:hover { border-color: var(--accent); }
.cap-add { flex: 0 0 auto; background: var(--accent); border: none; color: #fff; border-radius: 10px; padding: 8px 13px; font-size: 16px; cursor: pointer; font-weight: 700; }
.capture-card.recording { border-color: var(--bad); }
.cap-rec { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.cap-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bad); display: inline-block; margin-right: 6px; animation: capPulse 1s infinite; }
@keyframes capPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
#rec-timer { font-variant-numeric: tabular-nums; }
.notes-peek { padding: 12px 16px !important; }
.note-card { padding: 12px 14px !important; }
.note-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.note-when { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.note-acts { display: flex; gap: 6px; align-items: center; }
.note-media { display: block; margin-top: 8px; width: 100%; max-width: 360px; border-radius: 8px; }
audio.note-media { height: 40px; }
.note-text { width: 100%; margin-top: 8px; resize: vertical; min-height: 38px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 8px 10px; font: inherit; font-size: 13.5px; }
.note-text:focus { outline: none; border-color: var(--accent); }
/* админ-аналитика */
.an-box { margin-top: 8px; }
.an-dau-row { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.an-dau b { color: var(--text); }
.an-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.an-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: var(--panel2); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; }
.an-k { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.an-v { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
/* Полоска использования + список мёртвых фич (fb_mrkznky6uq9h) */
.an-bar { flex: 0 0 46px; height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.an-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.an-dead { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.an-dead-h { font-size: 12.5px; font-weight: 700; color: var(--warn); margin-bottom: 8px; }
.an-dead-list { display: flex; flex-wrap: wrap; gap: 6px; }
.an-dead-chip { font-size: 11.5px; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.an-other { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--muted); }

/* ============================================================
   📱 Мобильная адаптация (телефоны / узкие экраны)
   ============================================================ */

/* Горизонтально-скроллящийся nav — устойчив к любому числу вкладок.
   Свайпом видно все табы; активный авто-центрируется (JS scrollIntoView). */
@media (max-width: 720px) {
  #nav { margin: 14px -18px 0; padding: 0 18px; }
  .navrow {
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .navrow::-webkit-scrollbar { display: none; }
  .navsec { flex: 0 0 auto; padding: 8px 12px; }
  .navsec-l { font-size: 13px; }
  .navgear { position: sticky; right: 0; }
  .navsub { padding: 0 0 4px; }
}

/* Телефоны */
@media (max-width: 560px) {
  /* Месячная сетка календаря: на узких экранах не давим aspect-ratio (иначе переполнение по ширине) */
  .cm-grid, .cm-wd { gap: 4px; }
  .cm-cell { aspect-ratio: auto; min-height: 46px; }
  .cm-n { font-size: 14px; }
  /* Учитываем «безопасные зоны» (вырез/home-индикатор) в standalone-режиме на iPhone */
  #app { padding: 0 max(12px, env(safe-area-inset-left)) calc(72px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)); }
  #topbar { padding: max(12px, env(safe-area-inset-top)) 0 8px; margin-bottom: 16px; }
  .brand .logo { font-size: 22px; }
  .brand h1 { font-size: 18px; }

  /* iOS Safari не зумит инпут при фокусе если шрифт ≥16px */
  input, select, textarea { font-size: 16px; }
  .pin-form input { font-size: 18px; }

  /* Тач-таргеты крупнее. Негативные поля nav совпадают с padding #app (12px),
     чтобы лента табов доходила ровно до краёв экрана без горизонтального скролла. */
  #nav { margin: 12px -12px 0; padding: 0 12px; }
  .navsec { padding: 8px 11px; }
  .btn { min-height: 40px; }
  .gfilter, .tree-tab, .ob-chip, .gfilters .gfilter { min-height: 38px; display: inline-flex; align-items: center; }

  /* Шапка-персонаж компактнее */
  .char-main { gap: 10px; }
  .char-level b { font-size: 18px; }
  .xp-bar { min-width: 120px; }
  .skills-row { gap: 6px; }
  .skill-chip { padding: 5px 8px; }
  .user-pill .up-av { font-size: 20px; }

  /* KPI / счётчики */
  .kpis { gap: 10px; }
  .kpi { padding: 12px 14px; }
  .kpi .v { font-size: 22px; }
  .bal-score { font-size: 28px; }

  /* Ранги по сферам — ужимаем до dot / имя / ранг / мини-бар */
  .rank-row { grid-template-columns: 12px 1fr auto 56px; gap: 8px; }
  .rank-row .rr-lvl, .rank-row .rr-next { display: none; }

  /* Персонаж */
  .char-hero { gap: 14px; }
  .ch-avatar { width: 80px; height: 80px; }
  .ch-emoji { font-size: 38px; }
  .ch-meta { min-width: 160px; }
  .attr-row { grid-template-columns: 20px 84px 1fr 26px; gap: 6px; font-size: 12px; }
  .figure { height: 170px; }

  /* Таймер фокуса */
  .timer-clock { font-size: 28px; }
  .timer-card { gap: 10px; }

  /* Модалки — меньше внутренние отступы */
  .modal-overlay { padding: 12px; }
  .guide-box, .loot-box, .paywall-box { padding: 18px; }
  .guide-box { max-height: 90vh; }
  .guide-sec { gap: 10px; }
  .gs-ic { font-size: 20px; width: 26px; }

  /* Анти-«grid blowout»: grid/flex-элементы по умолчанию имеют min-width:auto
     и не дают колонкам сжиматься уже контента → горизонтальный скролл. */
  .add-row > *, .goal-form > *, .reward-form > *, .habit-edit > *, .skill-edit > * { min-width: 0; }
  .add-row input, .add-row select { width: 100%; }

  /* Формы целей/наград — в столбик */
  .goal-form input, .goal-form select { flex: 1 1 100%; }
  .reward-form input[name="name"] { min-width: 0; }
  .body-form input { width: 100%; }
  .body-form label { flex: 1 1 40%; }

  /* Toasts на всю ширину снизу */
  #toasts { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .toast { text-align: center; }

  /* Плавающий focus-pill — на всю ширину снизу */
  .focus-pill { left: 12px; right: 12px; bottom: 12px; min-width: 0; }
  .fp-task { max-width: none; }
}

/* ============================================================
   Нижняя навигация на телефоне (bottom-nav как в нативных аппах)
   ============================================================ */
@media (max-width: 560px) {
  /* backdrop-filter на #topbar создавал бы containing block и ломал position:fixed у бара */
  #topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  #nav { margin: 12px 0 0; padding: 0; }
  .navrow {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    overflow: visible; gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--panel) 95%, transparent);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    justify-content: space-around;
    box-shadow: 0 -4px 18px rgba(0,0,0,0.22);
  }
  .navrow .navsec {
    flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 2px;
    padding: 5px 2px; font-size: 19px; border-radius: 10px; line-height: 1;
  }
  .navrow .navsec-l { font-size: 9.5px; font-weight: 600; display: block; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .navrow .navgear { margin-left: 0; flex: 1 1 0; flex-direction: column; align-items: center; gap: 2px; font-size: 19px; padding: 5px 2px; display: flex; }
  .navrow .navsec-lock { font-size: 9px; position: absolute; top: 1px; right: 4px; }
  .navrow .navsec-dot { top: 1px; right: calc(50% - 17px); }
  .navsub { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .navsub::-webkit-scrollbar { display: none; }
  .navsubtab { flex: 0 0 auto; }
  #app { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  #ai-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .focus-pill { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}

/* ============================================================
   Аккаунты email+пароль — экраны входа/регистрации/сброса
   ============================================================ */
.auth-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.link-btn { background: none; border: none; color: var(--accent); font-size: 13px; cursor: pointer; padding: 4px; }
.link-btn:hover { text-decoration: underline; }
/* Тач: «вернуть обратно» стоит внутри строки текста, а палец не попадает в 23px (контракт ≥30). */
@media (hover: none) { .amnesty-undo .link-btn { min-height: 30px; padding: 6px 8px; } }
.legacy-login { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.legacy-login summary { cursor: pointer; font-size: 12.5px; color: var(--muted); list-style: none; }
.legacy-login summary::-webkit-details-marker { display: none; }
.legacy-login summary::before { content: '▸ '; }
.legacy-login[open] summary::before { content: '▾ '; }
.privacy-note { font-size: 11px; line-height: 1.45; color: var(--muted); margin: 12px 0 4px; }
.recovery-box { background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); padding: 22px; max-width: 380px; width: 100%; text-align: center; }
.recovery-box h3 { margin: 0 0 8px; }
.recovery-box .muted { font-size: 12.5px; line-height: 1.5; }
.recovery-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 19px; font-weight: 700; letter-spacing: 1px; background: var(--panel2); border: 1px dashed var(--accent); border-radius: 10px; padding: 14px; margin: 14px 0 10px; user-select: all; }

/* ---------- Danger zone / Privacy ---------- */
.danger-zone { margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); }
.danger-zone h3 { margin: 0 0 6px; color: var(--bad); font-size: 13.5px; }
.danger-btn { color: var(--bad) !important; border-color: color-mix(in srgb, var(--bad) 40%, transparent) !important; }
.danger-btn:hover { background: color-mix(in srgb, var(--bad) 12%, transparent) !important; border-color: var(--bad) !important; }

/* ---------- Эпик левелап-оверлей ---------- */
.lvlup-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72);
  animation: lvlupFadeIn .25s ease;
  cursor: pointer;
}
@keyframes lvlupFadeIn { from { opacity: 0 } to { opacity: 1 } }
.lvlup-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lvlup-p {
  position: absolute; top: 50%; left: 50%; opacity: 0;
  animation: lvlupParticle var(--dur, 1s) ease-out var(--delay, 0s) forwards;
}
@keyframes lvlupParticle {
  0%   { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}
.lvlup-box {
  position: relative; text-align: center; pointer-events: none;
  animation: lvlupPop .5s cubic-bezier(.17,.67,.36,1.35);
}
@keyframes lvlupPop { 0% { transform: scale(.25); opacity: 0 } 65% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }
.lvlup-title {
  font-size: 11px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--accent); opacity: .75; margin-bottom: 10px; font-weight: 700;
}
.lvlup-num {
  font-size: 96px; font-weight: 900; line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent), 0 0 70px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: lvlupGlow 1.6s ease-in-out infinite alternate;
}
@keyframes lvlupGlow {
  from { text-shadow: 0 0 18px var(--accent), 0 0 50px color-mix(in srgb, var(--accent) 55%, transparent); }
  to   { text-shadow: 0 0 38px var(--accent), 0 0 100px var(--accent), 0 0 140px color-mix(in srgb, var(--accent) 35%, transparent); }
}
.lvlup-prev { font-size: 13px; color: var(--muted); margin-top: 2px; opacity: 0; animation: lvlupFadeSlide .3s .45s ease forwards; }
.lvlup-rank { font-size: 18px; font-weight: 700; color: var(--warn); margin-top: 14px; opacity: 0; animation: lvlupFadeSlide .4s .6s ease forwards; text-shadow: 0 0 12px color-mix(in srgb, var(--warn) 50%, transparent); }
.lvlup-tap  { font-size: 11px; color: var(--muted); margin-top: 24px; letter-spacing: 1px; opacity: 0; animation: lvlupFadeSlide .3s 1.1s ease forwards; }
@keyframes lvlupFadeSlide { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
html[data-system="on"] .lvlup-num { color: #4fd6ff; text-shadow: 0 0 24px #4fd6ff, 0 0 70px rgba(79,214,255,.5); }
html[data-system="on"] .lvlup-title { color: #4fd6ff; }
html[data-system="on"] .lvlup-overlay { background: rgba(0,8,20,.82); }

/* ===== Колесо баланса v1 — ритм внимания + дрилл-даун ===== */
.bal-rows { display: grid; gap: 2px; margin: 12px 0 10px; }
.bal-row { display: grid; grid-template-columns: 16px 12px minmax(70px, 1fr) minmax(60px, 1.4fr) 50px 44px auto; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; font-size: 13px; margin-left: calc(var(--d, 0) * 16px); }
.bal-row[data-action] { cursor: pointer; }
.bal-row[data-action]:hover { background: var(--panel2); }
.bal-row.is-sub { font-size: 12.5px; opacity: 0.95; }
.bal-row.cooled { opacity: 0.66; }
.bal-caret, .bal-caret-spacer { width: 16px; text-align: center; color: var(--muted); font-size: 11px; }
.bal-dot { width: 11px; height: 11px; border-radius: 50%; }
.bal-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-bar { height: 8px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.bal-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .5s; min-width: 2px; }
.bal-dur { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.bal-lvl { text-align: right; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.bal-tag { font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.bal-tag.cool { color: var(--muted); background: var(--panel2); border: 1px solid var(--line); }
.bal-tag.hot { color: var(--warn); }
.bal-empty { font-size: 12.5px; margin: 6px 0 0; }

/* Подсказки про пустые домены / проекты (мягкие, скрываемые) */
.canon-hint { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; }
.canon-hint.proj { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.canon-hint-body { flex: 1 1 200px; line-height: 1.45; }
.canon-x { position: absolute; top: 4px; right: 6px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; }
.canon-x:hover { color: var(--fg); }
.ob-canon-hint { margin: 14px 0 0; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ob-canon-hint b { color: var(--fg); }

/* Канон-домен + флаг «проект» в редакторе верхних сфер */
.se-canon { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 2px 52px; padding-top: 6px; border-top: 1px dashed var(--line); }
.se-canon-lbl { font-size: 11.5px; color: var(--muted); cursor: help; }
.se-canon select { flex: 0 1 220px; min-width: 0; font-size: 12.5px; }
.se-proj { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.se-proj input { width: auto; height: auto; }

@media (max-width: 560px) {
  .bal-row { grid-template-columns: 14px 10px 1fr minmax(46px, 1fr) 42px auto; gap: 6px; }
  .bal-row .bal-lvl { display: none; }
  .se-canon { margin-left: 0; }
}

/* Импорт/редактирование целей: селекты сферы/горизонта, массовое удаление, выбор родителя сферы */
.goal-edit-sel { font-size: 12px; max-width: 150px; padding: 2px 4px; }
.goal-pick-lbl { display: inline-flex; align-items: center; padding: 0 4px; }
.goal-pick { width: 16px; height: 16px; cursor: pointer; }
.bulk-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bulk-bar .bulk-del { color: #e0526a; border-color: #e0526a55; }
.prop-parent { font-size: 12px; max-width: 160px; margin-left: 8px; padding: 2px 4px; }

/* Карточка цели на телефоне: заголовок и контролы в колонку, селекты не вылезают за экран */
@media (max-width: 560px) {
  .goal-head { flex-direction: column; }
  .goal-head > div:first-child { width: 100%; }
  .goal-actions { width: 100%; }
  .goal-status-sel, .goal-edit-sel { flex: 1 1 120px; min-width: 0; max-width: none; }
  .goal-actions .btn.sm { flex: 1 1 auto; }
}

/* ───── Гайд «Тень ведёт» — спотлайт-оверлей ───── */
#tut-overlay { position: fixed; inset: 0; z-index: 10001; pointer-events: none; }
.tut-dim { position: fixed; inset: 0; background: rgba(8, 10, 20, 0.66); }
.tut-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(8, 10, 20, 0.66); outline: 2px solid var(--accent); outline-offset: 2px; transition: left .25s, top .25s, width .25s, height .25s; }
.tut-bubble { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(440px, calc(100vw - 28px)); pointer-events: auto;
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 16px; padding: 14px 16px 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.45), 0 0 22px color-mix(in srgb, var(--accent) 24%, transparent);
  display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.tut-mascot { grid-row: 1 / 3; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; align-self: center; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%); }
.tut-mascot img { width: 320%; height: auto; transform: translateY(-18%); filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45)); }
.tut-say { font-size: 14px; line-height: 1.42; }
.tut-acts { grid-column: 2; display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.tut-hint { font-size: 12px; color: var(--accent); font-weight: 700; }
.tut-dots { position: absolute; top: 10px; right: 14px; font-size: 11px; color: var(--muted); font-weight: 700; }
@media (max-width: 560px) { .tut-bubble { bottom: 84px; } } /* над нижней навигацией */
.tut-drip { animation: tut-rise .35s ease; }
@keyframes tut-rise { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translateX(-50%); } }
@media (min-width: 761px) {
  /* A contextual drip belongs to Today’s support rail, never over the quest board. */
  .tut-bubble.tut-drip { left: auto; right: max(24px, calc((100vw - 1040px) / 2)); bottom: 24px; width: min(296px, calc(100vw - 48px)); transform: none; animation-name: tut-drip-rise; }
  @keyframes tut-drip-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .tut-hole { transition: none; } .tut-drip { animation: none; } }

/* «Итог дня голосом» (Speak your day) */
.dayrec-btn { margin-top: 8px; width: 100%; background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--text); border-radius: 10px; padding: 9px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .12s; }
.dayrec-btn:hover { border-color: var(--accent); }
#dayrec-mic.rec { background: #e0526a; color: #fff; border-color: #e0526a; animation: pulse-rec 1.2s infinite; }
@keyframes pulse-rec { 0%,100% { box-shadow: 0 0 0 0 rgba(224,82,106,.5) } 50% { box-shadow: 0 0 0 7px rgba(224,82,106,0) } }
.dayrec-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.dayrec-card { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.dayrec-card .drc-title { flex: 1 1 auto; font-size: 13px; min-width: 0; }
.dayrec-card .drc-sph { max-width: 130px; }
.dayrec-card .drc-min { width: 62px; }
.dayrec-card .drc-time { font-size: 11px; color: var(--muted); }
@media (max-width: 560px) { .dayrec-card { flex-wrap: wrap; } .dayrec-card .drc-title { flex-basis: 100%; } }

/* ── Эпизод: период вместо дней (LIFE-CAPTURE-PLAN.md) ── */
#ep-mic.rec { background: #e0526a; color: #fff; border-color: #e0526a; animation: pulse-rec 1.2s infinite; }
.ep-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ep-type { background: var(--panel2); border: 1px solid var(--line); color: var(--fg); border-radius: 999px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; min-height: 32px; }
.ep-type:hover { border-color: var(--accent); }
.ep-type.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ep-dates { display: flex; gap: 10px; flex-wrap: wrap; }
.ep-dates .dayrec-day { flex: 1 1 150px; }
.ep-profile { margin-top: 4px; }
/* Сетка: название сферы — ползунок — подпись уровня. Ползунок тянется, подписи фиксированы,
   чтобы длинные имена сфер не сдвигали шкалу и строки читались как единый столбец. */
.ep-row { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) 74px; align-items: center; gap: 10px; padding: 5px 0; }
.ep-row-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-row input[type="range"] { width: 100%; min-width: 0; accent-color: var(--accent); }
.ep-row-lvl { font-size: 11.5px; color: var(--muted); text-align: right; }
.ep-row-why { display: block; font-size: 11px; color: var(--muted); margin: -3px 0 5px; opacity: .75; }
.ep-social { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-social-btns { display: flex; gap: 6px; }
.ep-soc { background: var(--panel2); border: 1px solid var(--line); color: var(--fg); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; min-height: 32px; }
.ep-soc:hover { border-color: var(--accent); }
.ep-soc.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 560px) {
  .ep-row { grid-template-columns: minmax(64px, 1fr) minmax(72px, 1.6fr) 62px; gap: 7px; }
  .ep-row-lvl { font-size: 11px; }
}
/* ── Нагрузка сфер (этап 3 LIFE-CAPTURE-PLAN.md) ── */
.load-insight { font-size: 13px; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--panel2); border-left: 3px solid #e0526a; }
.load-rows { display: flex; flex-direction: column; gap: 6px; }
.load-row { display: grid; grid-template-columns: minmax(66px, 1fr) minmax(70px, 2fr) 62px 28px; align-items: center; gap: 8px; }
.load-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.load-bar { height: 8px; border-radius: 999px; background: var(--panel2); overflow: hidden; }
.load-bar i { display: block; height: 100%; border-radius: 999px; }
.load-bar .load-none { width: 100%; opacity: .25; background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px); }
.load-val { font-size: 11.5px; color: var(--muted); text-align: right; }
.load-val.is-hot { color: #e0526a; font-weight: 600; }
.load-restore { background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0; width: 26px; height: 26px; }
.load-restore:hover { border-color: var(--accent); }
.load-restore.on { border-color: #5fbf7a; }
@media (max-width: 560px) {
  .load-row { grid-template-columns: minmax(58px, 1fr) minmax(54px, 1.4fr) 54px 26px; gap: 6px; }
}

/* Список эпизодов (Прогресс) */
.ep-cards { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.ep-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.ep-card-head { display: flex; align-items: center; gap: 8px; }
.ep-card-title { flex: 1 1 auto; font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-card-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ep-card-top { font-size: 12px; margin-top: 5px; }

/* ── Две системы дисциплины: Доверие vs Контроль (DISCIPLINE-PATHS-PLAN.md) ── */
/* Экран выбора пути — две карты */
.path-choice-box { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 26px 24px; width: min(680px, 96vw); text-align: center; animation: fadeIn .25s; }
.path-choice-title { margin: 0 0 6px; font-size: 22px; }
.path-choice-sub { margin: 0 0 18px; font-size: 13.5px; }
.path-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.path-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer;
  background: var(--panel2); border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 16px 16px; color: var(--text); transition: transform .12s, border-color .12s, box-shadow .12s; }
.path-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.path-card.chosen { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.path-card-mascot { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.path-card-mascot img { width: 56px; height: 56px; object-fit: contain; }
.path-card .path-glyph { font-size: 26px; line-height: 1; }
.path-card h3 { margin: 2px 0 0; font-size: 18px; }
.path-card .path-tag { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.path-card .path-pitch { font-size: 13px; color: var(--muted); margin: 4px 0 8px; line-height: 1.45; }
.path-card .path-choose-btn { margin-top: auto; background: var(--accent); color: #fff; border-radius: 9px; padding: 7px 18px; font-weight: 700; font-size: 13.5px; }
.path-card[data-path="control"]:hover, .path-card.chosen[data-path="control"] { border-color: #4fd6ff; }
@media (max-width: 560px) { .path-cards { grid-template-columns: 1fr; } }

/* Настройки — выбор пути */
.path-opts { display: flex; gap: 10px; }
.path-opt { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  background: var(--panel2); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 8px; color: var(--text); transition: border-color .12s; }
.path-opt:hover { border-color: var(--accent); }
.path-opt.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); }
.path-opt-glyph { font-size: 22px; }
.path-opt-name { font-weight: 700; font-size: 14px; }
.path-opt-tag { font-size: 11px; color: var(--muted); }

/* Табло команд на лидерборде */
.path-banner .pb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.path-banner .pb-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); background: var(--panel2); }
.path-banner .pb-trust { background: linear-gradient(90deg, #6c8cff, #9b7cff); }
.path-banner .pb-control { background: linear-gradient(90deg, #1a2b3a, #4fd6ff); }
.path-banner .pb-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.path-banner.solo { text-align: left; }
.lb-path { font-size: 13px; }

/* Тизер 4-й стены (реплика противоположного маскота) */
.path-teaser { display: flex; gap: 12px; align-items: flex-start; border-style: dashed; }
.path-teaser .pt-mascot { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.path-teaser .pt-mascot img { width: 40px; height: 40px; object-fit: contain; }
.path-teaser .pt-body { flex: 1 1 auto; min-width: 0; }
.path-teaser .pt-body p { margin: 0 0 8px; font-size: 13.5px; font-style: italic; }
.path-teaser .pt-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Кремень — маскот-антагонист (черновой SVG) */
.flint-svg { filter: drop-shadow(0 2px 6px rgba(79,214,255,.35)); }

/* ⚔️ Клятва Кремню (commitment-ставка, путь Контроля) */
.t-oath { font-size: 11px; font-weight: 800; color: #4fd6ff; white-space: nowrap; padding: 2px 6px; border: 1px solid rgba(79,214,255,.4); border-radius: 7px; }
.t-oath-btn { background: none; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 6px; transition: .12s; }
.t-oath-btn:hover { border-color: #4fd6ff; color: #4fd6ff; }

/* ---------- Design Direction Phase 1: premium shell + daily cockpit ---------- */
body {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 82% -8%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 66%),
    radial-gradient(720px 440px at 12% 14%, rgba(79, 214, 255, 0.08), transparent 66%),
    linear-gradient(rgba(120, 145, 210, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 145, 210, 0.035) 1px, transparent 1px),
    var(--surface-0);
  background-size: auto, auto, 40px 40px, 40px 40px, auto;
  color: var(--text);
  font-family: var(--font-ui);
}

#app {
  max-width: var(--layout-max);
  padding-inline: 20px;
}

#topbar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-0) 92%, transparent), color-mix(in srgb, var(--surface-0) 70%, transparent)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 0 14px;
  margin-bottom: 24px;
}

.brand {
  gap: 12px;
}

.brand .logo {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 55% 30%, color-mix(in srgb, var(--accent-2) 36%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-3) 84%, transparent);
  border: 1px solid var(--line-soft);
  color: var(--accent-2);
  font-size: 24px;
  font-weight: 900;
  box-shadow: var(--glow-active);
}
.brand-shadow-mark {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: scale(2.2);
  filter: drop-shadow(0 2px 5px rgba(79, 214, 255, .34));
}
.auth-brand-mark {
  width: 76px;
  height: 76px;
  margin: 0 auto 6px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 34%, var(--line));
  border-radius: 25px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 64%),
    color-mix(in srgb, var(--panel2) 92%, transparent);
  box-shadow: 0 13px 38px rgba(5, 8, 20, .38), var(--glow-active);
}
.auth-logo .auth-brand-mark { display: grid; place-items: center; font-size: 0; }
.auth-brand-mark .brand-shadow-mark { width: 68px; height: 68px; transform: scale(2.05); }

.auth-logo h1,
.brand h1,
#appName {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-size: 22px;
  letter-spacing: 0.16em;
}

.char-summary {
  margin-top: 14px;
}

.char-main {
  gap: 12px;
}

.user-pill,
.skill-chip,
.gold-pill,
.streak,
.hype-chip,
.plan-badge,
.help-btn,
.logout-btn {
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 86%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
}

.up-av {
  font-size: 20px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-4));
}

.up-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.up-name {
  color: var(--text-strong);
  font-weight: 800;
  font-size: 13px;
}

.up-rank {
  color: var(--rc, var(--accent));
  font-size: 11px;
  font-weight: 700;
}

.char-level {
  color: var(--text-soft);
  font-weight: 700;
  letter-spacing: .02em;
}

.char-level b,
.timer-clock,
.kpi .v,
.rw-title {
  font-family: var(--font-number);
  font-variant-numeric: tabular-nums;
}

.char-level b {
  color: var(--text-strong);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.xp-bar {
  height: 18px;
  min-width: 240px;
  background: color-mix(in srgb, var(--surface-4) 66%, transparent);
  border-color: var(--line-soft);
  box-shadow: inset 0 1px 5px rgba(0,0,0,.42);
}

.xp-bar > span {
  background: linear-gradient(90deg, #4fd6ff 0%, var(--accent) 55%, #a77cff 100%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: width var(--dur-slow) var(--ease-out);
}

.xp-bar > i {
  font-weight: 800;
  letter-spacing: .03em;
}

.skills-row {
  gap: 10px;
  margin-top: 14px;
}

.skill-chip {
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  color: var(--text-soft);
}

.skill-chip .sk-name {
  color: var(--text);
  font-weight: 700;
}

.skill-chip .sk-bar {
  background: rgba(255,255,255,.06);
}

.navrow {
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-1) 84%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.navsec,
.navgear {
  min-height: 38px;
  border-radius: 13px;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}

.navsec {
  padding: 8px 13px;
  color: var(--text-soft);
}

.navsec:hover,
.navgear:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--surface-4) 66%, transparent);
  color: var(--text-strong);
}

.navsec.active,
.navgear.active {
  color: var(--text-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, var(--surface-4)), color-mix(in srgb, var(--accent) 10%, var(--surface-3)));
  box-shadow: var(--glow-active);
}

.navsec.locked {
  opacity: .48;
}

.navsub {
  gap: 8px;
  margin-top: 10px;
}

.navsubtab {
  min-height: 34px;
  padding: 7px 14px;
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
  color: var(--text-soft);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-natural);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-fast);
}

.navsubtab:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

.navsubtab.active {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
}

:root[data-theme="light"]:not([data-system="on"]) body:has(.today-shell) .navsubtab.active {
  color: var(--today-subtab-active-fg);
  border-color: var(--today-subtab-active-border);
}

.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), transparent 42%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}

.card h2,
.card h3 {
  color: var(--text-strong);
  font-family: var(--font-display);
  letter-spacing: .02em;
}

.card h3 {
  font-size: 16px;
}

.btn,
.add-row button,
.shutdown button,
.settings-actions button,
.goal-form button[type="submit"],
.reward-form button[type="submit"] {
  min-height: 38px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 13%, var(--accent)), color-mix(in srgb, #000 4%, var(--accent)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 20%, transparent);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast), box-shadow var(--dur-fast);
}

.btn:hover,
.add-row button:hover,
.shutdown button:hover,
.settings-actions button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 26%, transparent);
}

.btn.ghost {
  background: color-mix(in srgb, var(--surface-3) 86%, transparent);
  color: var(--text);
  border-color: var(--line-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

input,
select,
textarea {
  background: color-mix(in srgb, var(--surface-3) 86%, transparent);
  border-color: var(--line-soft);
  border-radius: 12px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.tasks {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.task {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface-3) 54%, transparent);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-fast);
}

.task:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-4) 52%, transparent);
}

.task:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.task .check {
  border-radius: 10px;
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-4) 60%, transparent);
}

.task.done .check {
  background: linear-gradient(180deg, color-mix(in srgb, #fff 12%, var(--good)), var(--good));
  box-shadow: 0 0 15px color-mix(in srgb, var(--good) 22%, transparent);
}

.daystat {
  gap: 10px;
  margin-bottom: 13px;
}

.daystat span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 0 12px 0 0;
  border-right: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}

.daystat span:last-child {
  padding-right: 0;
  border-right: 0;
}

.card-quests .tasks {
  gap: 0;
}

.card-quests .task {
  position: relative;
  padding: var(--sp-2) 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.card-quests .task:last-child {
  border-bottom: 0;
}

.card-quests .task.is-core {
  box-shadow: inset 3px 0 0 -1px var(--accent);
}

.card-quests .task.is-core.done {
  box-shadow: inset 3px 0 0 -1px var(--good);
}

.t-title-edit,
.t-time {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.t-title-edit {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  text-align: left;
  overflow-wrap: anywhere;
  font-family: var(--font-ui);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-natural);
}

.t-title-copy {
  display: -webkit-box;
  overflow: hidden;
  min-width: 0;
  line-height: inherit;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.t-time {
  padding: 0 4px;
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  white-space: nowrap;
}

.task-more {
  position: relative;
  z-index: 2;
}

.task-more > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  letter-spacing: .08em;
}

.task-more > summary::-webkit-details-marker {
  display: none;
}

.task-more[open] > summary {
  background: var(--surface-3);
  color: var(--text-strong);
}

.task-more-disclosure {
  display: none;
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-natural);
  white-space: nowrap;
}

.task.has-title-overflow .task-more-dots { display: none; }
.task.has-title-overflow .task-more-disclosure { display: inline; }

.task-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 4px;
  width: min(230px, calc(100vw - 40px));
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-raised);
}

.task-menu-title {
  margin: 0;
  padding: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-strong);
  font-size: var(--type-body);
  font-weight: 700;
  line-height: var(--leading-prose);
  overflow-wrap: anywhere;
}

.task-menu button {
  min-height: var(--touch-min);
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
  text-align: left;
  cursor: pointer;
}

.task-menu .task-menu-delete {
  color: var(--bad);
}
.task-menu-diff { padding: 4px var(--sp-2) 2px; border-top: 1px solid var(--line-soft); margin-top: 2px; }
.task-menu-diff-label { margin: 0 0 4px; font-size: var(--type-meta); line-height: var(--leading-label); }
.task-diff-row { display: flex; gap: 4px; }
.task-diff-btn { flex: 1; min-height: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; padding: 6px 10px; }
.task-diff-btn.is-active { border-color: var(--accent); background: var(--surface-3); }

/* ── Пикер сферы (sphere-search-v1) — дерево + поиск вместо <select> ──────────
   Тот же паттерн раскрытия, что у .task-more/.task-menu: <details>, абсолютная
   панель, свои токены не заводим. */
.sphere-field { position: relative; }
.sphere-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: var(--touch-min); padding: 8px 10px; border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text-strong);
  font-size: var(--type-control); line-height: var(--leading-ui); cursor: pointer; list-style: none;
}
.sphere-trigger::-webkit-details-marker { display: none; }
.sphere-field[open] > .sphere-trigger { border-color: var(--line-strong); }
.sphere-trigger-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.sphere-field-multi .sphere-trigger { align-items: flex-start; }
.sphere-field-multi .sphere-trigger-value { min-width: 0; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-1); white-space: normal; }
.sphere-summary-chip, .sphere-summary-more, .sphere-summary-background {
  min-height: 24px; display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--sphere-color, var(--line)) 48%, var(--line-soft)); border-radius: 999px;
  color: var(--text); background: color-mix(in srgb, var(--sphere-color, var(--surface-3)) 10%, transparent); font-size: var(--type-meta); line-height: var(--leading-label);
}
.sphere-summary-chip i, .goal-sphere-chip i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--sphere-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sphere-color) 18%, transparent); }
.sphere-summary-chip.is-primary { font-weight: 800; }
.sphere-summary-more, .sphere-summary-background { border-color: var(--line-soft); color: var(--text-soft); background: transparent; }
.sphere-trigger-placeholder { color: var(--text-soft); }
.sphere-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  width: min(560px, calc(100vw - 40px)); max-height: min(540px, 72vh); overflow-y: auto;
  display: grid; gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--surface-2); box-shadow: var(--shadow-raised);
}
.sphere-panel-head { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1); }
.sphere-panel-head > div { display: grid; gap: var(--sp-1); min-width: 0; }
.sphere-panel-head strong { color: var(--text-strong); font-size: var(--type-body); line-height: var(--leading-ui); }
.sphere-panel-head small { max-width: 50ch; color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-prose); }
.sphere-panel-done { min-width: var(--touch-min); min-height: var(--touch-min); padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--radius-sm); color: var(--accent); background: transparent; font: 800 var(--type-control)/var(--leading-ui) var(--font-ui); }
.sphere-search-input {
  min-height: var(--touch-min); padding: 8px 10px; border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-size: var(--type-control); font-family: var(--font-ui);
}
.sphere-panel-results { display: grid; gap: 2px; }
.sphere-choice-row {
  min-height: var(--touch-min); display: grid; grid-template-columns: 3px minmax(120px, 1fr) auto; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) calc(var(--sp-2) + (var(--sphere-depth) * var(--sp-3)));
  border-radius: var(--radius-sm); background: transparent;
}
.sphere-choice-row:hover, .sphere-choice-row:focus-within { background: var(--surface-3); }
.sphere-choice-row.is-main { background: color-mix(in srgb, var(--sphere-color) 9%, transparent); }
.sphere-choice-rail { align-self: stretch; border-radius: 999px; background: color-mix(in srgb, var(--sphere-color) 72%, transparent); }
.sphere-choice-name { min-width: 0; color: var(--text-strong); font-size: var(--type-control); line-height: var(--leading-ui); overflow-wrap: anywhere; }
.sphere-choice-actions { display: flex; align-items: center; gap: var(--sp-1); }
.sphere-role-button { min-height: var(--touch-min); min-width: 76px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: var(--text-soft); background: transparent; font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); }
/* Ширина задавалась под русские «Готово» и «Основная». Немецкое «Hauptbereich»,
   украинское «Готово» и испанское «Principal» шире, и как flex-элементы кнопки
   сжимались ниже собственного текста — надпись обрезалась. */
.sphere-panel-done, .sphere-role-button { white-space: nowrap; flex-shrink: 0; }
.sphere-role-button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--sphere-color) 65%, var(--line)); color: var(--text-strong); background: color-mix(in srgb, var(--sphere-color) 13%, transparent); }
.sphere-role-background { min-width: 64px; }
.sphere-row { border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-family: var(--font-ui); text-align: left; cursor: pointer; }
button.sphere-row { min-height: var(--touch-min); padding: 8px 10px; font-size: var(--type-control); line-height: var(--leading-ui); }
button.sphere-row:hover, button.sphere-row:focus-visible { background: var(--surface-3); }
.sphere-row.is-selected { color: var(--accent); font-weight: 700; }
.admin-user-field { flex: 1 1 240px; min-width: 0; max-width: 320px; }
.sphere-branch > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--touch-min); padding: 4px 4px 4px 10px; list-style: none; cursor: pointer; }
.sphere-branch > summary::-webkit-details-marker { display: none; }
.sphere-branch-name { font-size: var(--type-control); color: var(--text-strong); flex: 1; }
.sphere-pick-btn { min-height: var(--touch-min); padding: 6px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--type-meta); font-family: var(--font-ui); cursor: pointer; flex: none; }
.sphere-pick-btn.is-selected { border-color: var(--accent); color: var(--accent); }
.sphere-branch-kids { padding-left: var(--sp-3); border-left: 1px solid var(--line-soft); margin-left: 10px; }
.sphere-empty { padding: 8px 10px; font-size: var(--type-meta); }
@media (max-width: 600px) {
  .sphere-field .sphere-panel { position: fixed; inset: auto var(--sp-2) calc(72px + env(safe-area-inset-bottom)) var(--sp-2); width: auto; max-height: min(68dvh, 560px); border-radius: var(--radius-xl); }
  .sphere-choice-row { grid-template-columns: 3px minmax(0, 1fr); padding-inline-start: calc(var(--sp-2) + min(var(--sphere-depth), 3) * var(--sp-2)); }
  .sphere-choice-actions { grid-column: 2; justify-content: flex-start; }
  .sphere-role-button { min-width: 88px; }
}

.empty-day,
.empty-repeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.empty-day p,
.empty-repeat p {
  margin: 0;
}

.shutdown h3 { display: flex; align-items: center; margin-bottom: 4px; }
/* Наблюдение → просьба поправить: узкий факт, не открытый вопрос — поэтому визуально
   лёгкий, не тревожный акцент, а не тон предупреждения. */
.day-obs { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-md, 12px); padding: 10px 12px; margin: 8px 0; }
.day-obs-q { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.day-obs-acts { display: flex; gap: 8px; flex-wrap: wrap; }

.timer-card,
.energy-card,
.nudge-card,
.capture-card,
.note-card,
.ptrio-card,
.comp-card {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line-soft));
}

.timer-card {
  background:
    radial-gradient(320px 160px at 6% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.timer-clock {
  color: var(--text-strong);
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 20%, transparent);
}

.today-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--work-max)) minmax(260px, 1fr);
  column-gap: var(--sp-5);
  row-gap: var(--sp-4);
  align-items: start;
}

.today-work,
.today-support,
.today-footer {
  min-width: 0;
}

.today-work,
.today-support,
.today-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.day-nav { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.day-nav-btn {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: var(--touch-min); padding: 6px var(--sp-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--muted);
  font-family: var(--font-ui); font-size: var(--type-meta); cursor: pointer;
}
.day-nav-btn:hover, .day-nav-btn:focus-visible { color: var(--text-strong); border-color: var(--line-strong); }
.day-nav-sum { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

.today-footer {
  grid-column: 1 / -1;
}

.today-support > .comp-card {
  padding: var(--sp-4);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--surface-2)), var(--surface-2));
}

.today-support > .comp-card .comp-row {
  align-items: flex-start;
  gap: var(--sp-3);
}

.today-support > .comp-card .comp-art {
  flex-basis: 80px;
  width: 80px;
  height: 104px;
}

.today-support > .comp-card .comp-actions .btn {
  flex: 1 1 100%;
}

.today-deeper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--touch-min);
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-ui);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
  font-weight: 700;
  cursor: pointer;
}

.today-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  min-height: 170px;
  padding: 22px 24px;
  background:
    radial-gradient(520px 240px at 92% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 66%),
    radial-gradient(360px 200px at 10% 0%, rgba(79, 214, 255, .10), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-3) 70%, transparent), color-mix(in srgb, var(--surface-1) 96%, transparent));
}

.today-hero::after {
  content: '';
  position: absolute;
  inset: auto -40px -120px auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: inset 0 0 50px color-mix(in srgb, var(--accent) 10%, transparent);
  pointer-events: none;
}

.today-hero .th-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--today-kicker-fg);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  font-weight: 900;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.today-hero h2 {
  margin: 8px 0 7px;
  max-width: var(--measure-compact);
  color: var(--text-strong);
  font-size: var(--type-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-natural);
  font-synthesis: none;
  font-kerning: normal;
}

.th-sub {
  max-width: var(--measure-compact);
  margin: 0;
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: var(--leading-prose);
}

.th-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.th-actions .btn {
  min-width: 136px;
}

.th-stats {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 190px;
}

.th-stat {
  min-width: 82px;
  padding: 3px 12px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.th-stat:last-child {
  padding-right: 0;
  border-right: 0;
}

.th-stat b {
  display: block;
  color: var(--text-strong);
  font-family: var(--font-number);
  min-inline-size: var(--number-slot-kpi);
  font-size: var(--type-heading);
  line-height: var(--leading-tight);
  font-synthesis: none;
  font-kerning: normal;
  font-variant-numeric: normal;
}

.th-stat span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.today-shell .btn:not(.ghost):not(.danger):not(.pro-cta),
.today-shell .task.done .check,
.today-hero .btn:not(.ghost) {
  color: var(--on-accent);
}

/* Filled work/support controls share the same contrast-safe foreground as the
   hero CTA. Keep the override Today-scoped: other screens still need their own
   accent review before inheriting this contract. */
.today-shell .comp-cta,
.today-shell .card-addquest .add-row button[type="submit"],
.today-shell .cap-add,
.today-shell .tts-btn.on {
  color: var(--on-accent) !important;
}

.today-shell .btn.danger,
.today-shell #dayrec-mic.rec,
.today-shell #ep-mic.rec {
  color: var(--on-bad) !important;
}

.today-shell .t-cat,
.today-shell .t-skill,
.today-shell .t-xp,
.today-shell .t-oath,
.today-shell .t-backdate,
.today-shell .t-backdate sub {
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}

:root[data-theme="light"] .today-shell .t-cat:not(.missing),
:root[data-theme="light"] .today-shell .t-skill {
  color: var(--text-strong);
}

.today-hero .btn {
  font-family: var(--font-ui);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}

.today-shell .nudge {
  color: var(--today-nudge-fg);
  border-color: var(--today-nudge-border);
}

.today-shell .nudge-boost { color: var(--today-nudge-fg); }
.today-shell .entry-nudge .nudge { color: inherit; }
.today-shell .en-low .nudge-boost { color: var(--today-nudge-danger-fg); }

/* Тень — глобальный вход в помощника. Она остаётся доступной на каждом игровом
   экране; локальные сцены и support rail не заменяют её функционально. */

@media (hover: hover) and (pointer: fine) {
  .card-quests .task:hover {
    transform: none;
    background: color-mix(in srgb, var(--surface-3) 42%, transparent);
  }

  .task-more > summary:hover,
  .task-menu button:hover {
    background: var(--surface-3);
  }

  .task-more > summary:hover {
    color: var(--text-strong);
  }

  .today-deeper:hover {
    background: color-mix(in srgb, var(--surface-3) 70%, transparent);
    color: var(--text-strong);
  }
}

.btn-nextquest {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

.today-shell :where(button, input, select, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 900px) {
  .today-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .today-footer {
    grid-column: auto;
  }
}

:root[data-theme="light"] body {
  background:
    radial-gradient(900px 520px at 82% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 66%),
    linear-gradient(rgba(72, 87, 125, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 87, 125, 0.045) 1px, transparent 1px),
    var(--surface-0);
  background-size: auto, 40px 40px, 40px 40px, auto;
}

:root[data-theme="light"] #topbar {
  background: linear-gradient(180deg, rgba(238, 241, 248, .92), rgba(238, 241, 248, .78));
}

:root[data-theme="light"] .card,
:root[data-theme="light"] .navrow,
:root[data-theme="light"] .today-hero {
  box-shadow: var(--shadow-card);
}

@media (max-width: 720px) {
  #app {
    padding-inline: 14px;
  }

  .today-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .th-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
  }

  .th-stat {
    padding: 10px 8px;
  }

  .th-stat b {
    font-size: var(--type-heading);
  }
}

@media (max-width: 560px) {
  #topbar {
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .brand h1,
  #appName {
    font-size: 19px;
    letter-spacing: .12em;
  }

  .char-main {
    gap: 8px;
  }

  .xp-bar {
    min-width: 170px;
    flex-basis: 100%;
  }

  .today-hero h2 {
    font-size: var(--type-hero);
  }

  .th-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .th-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .navsec,
  .navgear,
  .navsubtab,
  .btn,
  .task {
    transition: none;
  }

  .navsec:hover,
  .navgear:hover,
  .navsubtab:hover,
  .btn:hover,
  .task:hover {
    transform: none;
  }
}

/* ---------- Design Direction Phase 2: lair, locker, skill map, reward path ---------- */
html,
body {
  overflow-x: hidden;
}

#app,
#main {
  min-width: 0;
}

#main { position: relative; }
#main.is-view-pending { pointer-events: none; }
#main.is-view-pending::before {
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  z-index: 40;
  height: 2px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 42% 100%;
  background-repeat: no-repeat;
  animation: view-preload-line .72s ease-in-out infinite;
  pointer-events: none;
}
#main.is-view-entering > :first-child { animation: mobile-view-enter 220ms var(--ease-out) both; }
@keyframes view-preload-line {
  from { background-position: -42% 0; opacity: .42; }
  50% { opacity: 1; }
  to { background-position: 142% 0; opacity: .42; }
}

.skills-row,
.navrow,
.navsub {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.skills-row::-webkit-scrollbar,
.navrow::-webkit-scrollbar,
.navsub::-webkit-scrollbar {
  display: none;
}

.skill-chip,
.navsec,
.navgear,
.navsubtab {
  flex: 0 0 auto;
}

.den-card {
  position: relative;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line-soft));
  background:
    radial-gradient(520px 240px at 68% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 70%, transparent), color-mix(in srgb, var(--surface-1) 98%, transparent));
}

.den-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -80px 120px rgba(0,0,0,.18);
  z-index: 1;
}

.den-card > * {
  position: relative;
  z-index: 2;
}

.den-scene {
  height: clamp(280px, 32vw, 360px);
  background:
    radial-gradient(460px 220px at 52% 58%, rgba(79,214,255,.10), transparent 70%),
    linear-gradient(180deg, rgba(18,22,38,.22), rgba(7,10,18,.18));
}

.den-room {
  filter: saturate(1.06) contrast(1.03);
  opacity: .98;
}

.den-avatar-rig {
  width: clamp(160px, 20vw, 220px);
  bottom: 2px;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.32));
}

.den-companion {
  right: 18px;
  top: 22px;
  width: 96px;
  height: 128px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    rgba(8,10,22,.82);
  border-color: color-mix(in srgb, var(--accent-2) 64%, white);
}

.den-tag {
  left: 18px;
  top: 18px;
  padding: 7px 12px;
  background: rgba(8, 11, 22, .64);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.den-pet-0 {
  left: 28px;
  bottom: 22px;
  width: 62px;
}

.den-pet-1 {
  right: 32px;
  bottom: 20px;
  width: 60px;
}

.den-pet-2 {
  left: 108px;
  bottom: 13px;
  width: 50px;
}

.den-pet-0.den-pet-fortune {
  left: 8px;
  bottom: 5px;
  width: 128px;
}

.den-pet-1.den-pet-fortune {
  right: 8px;
  bottom: 5px;
  width: 124px;
}

.den-pet-2.den-pet-fortune {
  left: 116px;
  bottom: 3px;
  width: 112px;
}

.den-mood {
  padding: 16px 20px 4px;
  color: var(--text-soft);
}

.den-stats {
  padding: 8px 20px 12px;
  gap: 10px;
  flex-wrap: wrap;
}

.den-stats span,
.den-focus {
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  border-radius: var(--radius-pill);
  padding: 6px 10px;
}

.den-focus {
  margin: 0 16px 14px;
  border-radius: var(--radius-md);
}

.den-actions {
  padding: 0 16px 18px;
}

.character-shell,
.tree-shell,
.rewards-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.char-hero {
  min-height: 190px;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(420px 220px at 10% 10%, color-mix(in srgb, var(--rc, var(--accent)) 20%, transparent), transparent 66%),
    radial-gradient(360px 180px at 92% 0%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.ch-avatar {
  width: 132px;
  height: 132px;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--rc) 28%, var(--surface-3)), var(--surface-1) 72%);
  box-shadow: 0 18px 45px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}

.ch-avatar::before {
  inset: -9px;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--rc) 26%, transparent));
}

.ch-meta h2 {
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1;
}

.ch-rank,
.ch-arch,
.ch-title {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  padding: 5px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-3) 72%, transparent);
}

.ch-form {
  display: grid;
  grid-template-columns: auto minmax(120px, 220px) auto;
  gap: 8px 10px;
  align-items: center;
  margin-top: 12px;
}

.cf-hint {
  grid-column: 1 / -1;
}

.avatar-editor,
.balance-card,
.char-grid > .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), transparent 44%),
    color-mix(in srgb, var(--surface-2) 94%, transparent);
}

.avatar-editor {
  position: relative;
  overflow: hidden;
}

.avatar-editor::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  pointer-events: none;
}

.ave-stage {
  width: 220px;
  height: 220px;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--accent) 15%, var(--surface-3)), var(--surface-1) 72%);
  border-color: var(--line-soft);
  box-shadow: 0 20px 55px rgba(0,0,0,.28);
}

.ave-cat {
  background: color-mix(in srgb, var(--surface-3) 78%, transparent);
  border-color: var(--line-soft);
}

.ave-cat.sel,
.ave-opt.sel {
  box-shadow: var(--glow-active);
}

.ave-opt {
  background: color-mix(in srgb, var(--surface-3) 74%, transparent);
  border-color: var(--line-soft);
}

.tree-hero,
.reward-hero {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
}

.tree-hero {
  background:
    radial-gradient(520px 260px at 92% 8%, color-mix(in srgb, var(--c) 28%, transparent), transparent 66%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-3) 78%, transparent), color-mix(in srgb, var(--surface-1) 98%, transparent));
}

.tree-hero h2,
.reward-hero h2 {
  margin: 8px 0 8px;
  color: var(--text-strong);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.02;
}

.tree-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(78px, 1fr));
  gap: 10px;
  min-width: 280px;
}

.tree-hero-stats span {
  display: grid;
  gap: 5px;
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid color-mix(in srgb, var(--c) 26%, var(--line-soft));
}

.tree-hero-stats b {
  color: var(--text-strong);
  font-family: var(--font-number);
  font-size: 24px;
  line-height: 1;
}

.tree-hero-stats small {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.tree-tabs-card {
  padding: 12px;
}

.tree-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.tree-tabs::-webkit-scrollbar {
  display: none;
}

.tree-tab {
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-3) 76%, transparent);
  border-color: color-mix(in srgb, var(--c) 28%, var(--line-soft));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.tree-tab.active {
  color: var(--text-strong);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 18%, transparent);
}

.tree-map-card {
  overflow: hidden;
  background:
    radial-gradient(620px 280px at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 74%),
    color-mix(in srgb, var(--surface-2) 94%, transparent);
}

.tree-scroll {
  margin-inline: -20px;
  padding: 18px 20px 10px;
  background:
    linear-gradient(rgba(132,150,205,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132,150,205,.035) 1px, transparent 1px);
  background-size: 34px 34px;
}

.tree-node {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 44%),
    color-mix(in srgb, var(--surface-3) 88%, transparent);
  border-color: var(--line-soft);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.tree-node.available {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent), 0 0 28px color-mix(in srgb, var(--c) 18%, transparent);
}

.tree-node.unlocked {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, rgba(255,255,255,.04)), transparent 55%),
    color-mix(in srgb, var(--surface-3) 92%, transparent);
}

.tree-node.capstone {
  border-color: color-mix(in srgb, var(--accent-warm) 64%, var(--line-soft));
  box-shadow: var(--glow-legendary);
}

.perk-active,
.perk-chip,
.tn-cost {
  border-radius: var(--radius-pill);
}

.reward-hero {
  background:
    radial-gradient(620px 260px at 86% 8%, rgba(224,162,62,.20), transparent 66%),
    radial-gradient(420px 220px at 8% 0%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-3) 78%, transparent), color-mix(in srgb, var(--surface-1) 98%, transparent));
}

.reward-track-preview {
  display: grid;
  grid-template-columns: 52px 54px 52px 54px 52px 54px 52px;
  align-items: center;
}

.reward-track-preview span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface-4) 72%, transparent);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font-weight: 900;
}

.reward-track-preview span.done {
  background: color-mix(in srgb, var(--good) 22%, var(--surface-4));
  border-color: color-mix(in srgb, var(--good) 48%, var(--line-soft));
}

.reward-track-preview span.ready {
  border-color: color-mix(in srgb, var(--accent-warm) 62%, var(--line-soft));
  box-shadow: var(--glow-legendary);
}

.reward-track-preview span.cap {
  color: #ffd479;
  border-color: color-mix(in srgb, var(--accent-warm) 70%, var(--line-soft));
}

.reward-track-preview i {
  height: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 62%, transparent), color-mix(in srgb, var(--accent-warm) 58%, transparent));
}

.lootbox-card,
.collection-card,
.path-card-settings,
.arsenal-card {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line-soft));
}

.lootbox-card .lb-chest {
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(224,162,62,.18), transparent 58%),
    color-mix(in srgb, var(--surface-3) 82%, transparent);
  border-color: var(--line-soft);
}

.lootbox-card .lb-chest.ready {
  box-shadow: var(--glow-legendary);
}

.collection-card .coll-body {
  align-items: stretch;
}

.coll-preview {
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--accent) 16%, var(--surface-3)), var(--surface-1) 76%);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 40px rgba(0,0,0,.24);
}

.cos-tile,
.ach,
.reward,
.pm-row {
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 44%),
    color-mix(in srgb, var(--surface-3) 76%, transparent);
  border-color: var(--line-soft);
}

.cos-tile.eq,
.ach.got {
  box-shadow: var(--glow-active);
}

.rewards-grid {
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
}

.reward {
  overflow: hidden;
}

.reward::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  opacity: .75;
}

.rw-icon {
  font-size: 32px;
}

.kpis {
  gap: 12px;
}

.kpi {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 44%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: var(--shadow-card);
}

.raid-card,
.season-card,
.party-head {
  background:
    radial-gradient(520px 220px at 92% 0%, rgba(224,162,62,.14), transparent 66%),
    color-mix(in srgb, var(--surface-2) 94%, transparent);
}

.raid-boss {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-4) 74%, transparent);
  border: 1px solid var(--line-soft);
  box-shadow: var(--glow-legendary);
}

.raid-bar,
.season-bar {
  height: 16px;
  background: color-mix(in srgb, var(--surface-4) 66%, transparent);
  border-color: var(--line-soft);
}

.season-card {
  position: relative;
  overflow: hidden;
}

.season-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px auto;
  width: 90px;
  height: 90px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--accent-warm) 28%, transparent);
  transform: rotate(14deg);
  pointer-events: none;
}

.path-choice-box {
  width: min(860px, 96vw);
  background:
    radial-gradient(420px 220px at 22% 0%, color-mix(in srgb, #6c8cff 18%, transparent), transparent 70%),
    radial-gradient(420px 220px at 86% 0%, rgba(79,214,255,.16), transparent 70%),
    color-mix(in srgb, var(--surface-1) 98%, transparent);
  border-color: var(--line-soft);
}

.path-cards {
  gap: 18px;
}

.path-card {
  min-height: 260px;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(300px 180px at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.path-card[data-path="control"] {
  background:
    radial-gradient(300px 180px at 50% 0%, rgba(79,214,255,.18), transparent 70%),
    linear-gradient(135deg, rgba(18,36,50,.62), color-mix(in srgb, var(--surface-2) 92%, transparent));
}

@media (max-width: 760px) {
  .tree-hero,
  .reward-hero {
    grid-template-columns: 1fr;
  }

  .tree-hero-stats,
  .reward-track-preview {
    min-width: 0;
    width: 100%;
  }

  .reward-track-preview {
    grid-template-columns: 44px 1fr 44px 1fr 44px 1fr 44px;
  }

  .reward-track-preview span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .ch-form {
    grid-template-columns: 1fr;
  }

  .den-companion {
    width: 78px;
    height: 104px;
  }
}

@media (max-width: 560px) {
  .den-scene {
    height: 270px;
  }

  .den-avatar-rig {
    width: 168px;
  }

  .char-hero {
    padding: 20px;
  }

  .ch-avatar {
    width: 104px;
    height: 104px;
  }

  .ave-stage {
    width: 168px;
    height: 168px;
  }

  .tree-hero h2,
  .reward-hero h2 {
    font-size: 30px;
  }

  .tree-hero-stats {
    grid-template-columns: 1fr;
  }
}

/* Fortune Cat v2: every transform runs around a production pivot embedded in
   the SVG markup. The old assembled PNG remains available as a data fallback. */
.fc-rig .fc-shadow,
.fc-rig .fc-tail,
.fc-rig .fc-bag,
.fc-rig .fc-back-wear,
.fc-rig .fc-body,
.fc-rig .fc-raised-paw,
.fc-rig .fc-held,
.fc-rig .fc-head,
.fc-rig .fc-head-wear,
.fc-rig .fc-face,
.fc-rig .fc-collar,
.fc-rig .fc-neck-wear,
.fc-rig .fc-prop,
.fc-rig .fc-bell {
  transform-box: view-box;
  transform-origin: 0 0;
  will-change: transform;
}

.fc-rig .fc-patch { opacity: 1; }
.fc-rig .fc-shadow { animation: fcV2Shadow 3.8s ease-in-out infinite; }
.fc-rig .fc-tail { animation: fcV2Tail 3.2s ease-in-out infinite; }
.fc-rig .fc-bag { animation: fcV2Bag 4.2s ease-in-out infinite; }
.fc-rig .fc-back-wear { animation: fcV2Bag 4.2s ease-in-out infinite; }
.fc-rig .fc-body { animation: fcV2Breathe 3.8s ease-in-out infinite; }
.fc-rig .fc-raised-paw { animation: fcV2Beckon 2.35s ease-in-out infinite; }
.fc-rig .fc-held { animation: fcV2Held 3.8s ease-in-out infinite; }
.fc-rig .fc-head { animation: fcV2Head 5.2s ease-in-out infinite; }
.fc-rig .fc-head-wear { animation: fcV2Head 5.2s ease-in-out infinite; }
.fc-rig .fc-face { animation: fcV2Blink 5.4s linear infinite; }
.fc-rig .fc-collar { animation: fcV2Collar 3.8s ease-in-out infinite; }
.fc-rig .fc-neck-wear { animation: fcV2Collar 3.8s ease-in-out infinite; }
.fc-rig .fc-prop { animation: fcV2Prop 3.8s ease-in-out infinite; }
.fc-rig .fc-bell { animation: fcV2Bell 2.35s ease-in-out infinite; }

@keyframes fcV2Shadow {
  0%, 100% { transform: scale(1); opacity: .54; }
  50% { transform: scale(.96); opacity: .42; }
}
@keyframes fcV2Tail {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@keyframes fcV2Bag {
  0%, 100% { transform: rotate(-.8deg) translateY(0); }
  50% { transform: rotate(.8deg) translateY(2px); }
}
@keyframes fcV2Breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: translateY(-2px) scale(1.008, 1.014); }
}
@keyframes fcV2Beckon {
  0%, 100% { transform: rotate(-11deg); }
  50% { transform: rotate(7deg); }
}
@keyframes fcV2Held {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50% { transform: rotate(1.8deg) translateY(-2px); }
}
@keyframes fcV2Head {
  0%, 100% { transform: rotate(-1.2deg) translateY(0); }
  50% { transform: rotate(1.4deg) translateY(-2px); }
}
@keyframes fcV2Blink {
  0%, 45%, 49%, 100% { transform: scaleY(1); }
  47%, 48% { transform: scaleY(.08); }
}
@keyframes fcV2Collar {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(-1px) scaleX(1.006); }
}
@keyframes fcV2Bell {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes fcV2Prop {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50% { transform: translateY(-2px) rotate(.6deg); }
}

.fc-rig.fc-state-hungry .fc-body { animation: fcV2TiredBody 4.8s ease-in-out infinite; }
.fc-rig.fc-state-hungry .fc-head { animation: fcV2TiredHead 4.8s ease-in-out infinite; }
.fc-rig.fc-state-hungry .fc-head-wear { animation: fcV2TiredHead 4.8s ease-in-out infinite; }
.fc-rig.fc-state-hungry .fc-raised-paw { animation: fcV2TiredPaw 4.8s ease-in-out infinite; }
.fc-rig.fc-state-hungry .fc-bell { animation-duration: 4.8s; }
@keyframes fcV2TiredBody {
  0%, 100% { transform: translateY(4px) scale(1, .99); }
  50% { transform: translateY(7px) scale(1.012, .975); }
}
@keyframes fcV2TiredHead {
  0%, 100% { transform: translateY(5px) rotate(-2.5deg); }
  50% { transform: translateY(8px) rotate(2deg); }
}
@keyframes fcV2TiredPaw {
  0%, 100% { transform: rotate(-3deg) translateY(5px); }
  50% { transform: rotate(2deg) translateY(8px); }
}

.fc-rig.fc-state-full .fc-body { animation-duration: 2.7s; }
.fc-rig.fc-state-full .fc-head { animation: fcV2HappyHead 2.7s ease-in-out infinite; }
.fc-rig.fc-state-full .fc-head-wear { animation: fcV2HappyHead 2.7s ease-in-out infinite; }
.fc-rig.fc-state-full .fc-face { animation: none; }
.fc-rig.fc-state-full .fc-tail,
.fc-rig.fc-state-full .fc-raised-paw,
.fc-rig.fc-state-full .fc-bell { animation-duration: 1.8s; }
@keyframes fcV2HappyHead {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-5px) rotate(1.8deg); }
}

.fc-rig.fc-state-overfed .fc-shadow,
.fc-rig.fc-state-overfed .fc-tail,
.fc-rig.fc-state-overfed .fc-bag,
.fc-rig.fc-state-overfed .fc-back-wear,
.fc-rig.fc-state-overfed .fc-body,
.fc-rig.fc-state-overfed .fc-raised-paw,
.fc-rig.fc-state-overfed .fc-held,
.fc-rig.fc-state-overfed .fc-head,
.fc-rig.fc-state-overfed .fc-head-wear,
.fc-rig.fc-state-overfed .fc-collar,
.fc-rig.fc-state-overfed .fc-neck-wear,
.fc-rig.fc-state-overfed .fc-prop,
.fc-rig.fc-state-overfed .fc-bell { animation-duration: 5.6s; }

@media (prefers-reduced-motion: reduce) {
  .fc-rig .fc-shadow,
  .fc-rig .fc-tail,
  .fc-rig .fc-bag,
  .fc-rig .fc-back-wear,
  .fc-rig .fc-body,
  .fc-rig .fc-raised-paw,
  .fc-rig .fc-held,
  .fc-rig .fc-head,
  .fc-rig .fc-head-wear,
  .fc-rig .fc-face,
  .fc-rig .fc-collar,
  .fc-rig .fc-neck-wear,
  .fc-rig .fc-prop,
  .fc-rig .fc-bell { animation: none !important; }
}

/* ── Аватар-риг «Странник» (Фаза 3): настоящий каркас+сменные слои — сменил собой
   и 3 конкурирующих готовых фото, и процедурный SVG-конструктор (оба снесены). ── */
/* Фигура аватара — БЕЗ клиппящего овала (перебиваем базовый .ave-stage: 168px круг + overflow hidden).
   Чистый контейнер, картинка целиком (object-fit contain), не обрезается. */
.ave-stage-figure { width: 100% !important; height: auto !important; min-height: 300px; max-width: none; border-radius: 16px !important; overflow: visible !important; background: radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--accent) 8%, var(--panel2)), var(--panel)) !important; display: flex; align-items: center; justify-content: center; padding: 18px 0; }
.avatar-preset-figure { max-height: 340px; width: auto; max-width: 88%; object-fit: contain; display: block; filter: drop-shadow(0 10px 22px rgba(0,0,0,.4)); }
.avatar-art-stack { position: relative; display: block; aspect-ratio: 2 / 3; isolation: isolate; }
.avatar-art-rig { position: absolute; inset: 0; transform-origin: 50% 86%; }
.avatar-art-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; transform-origin: var(--avatar-layer-pivot-x, 50%) var(--avatar-layer-pivot-y, 50%); }
.avatar-art-stack.is-reacting .avatar-art-rig,
.avatar-art-stack.is-reacting .avatar-art-layer { will-change: transform; }
.avatar-art-stack[data-avatar-interactive="true"] { cursor: pointer; border-radius: 18px; outline: none; }
.avatar-art-stack[data-avatar-interactive="true"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 72%, transparent); }
.avatar-art-stack--figure { width: min(92%, 284px); filter: drop-shadow(0 13px 22px rgba(0,0,0,.38)); }
.avatar-art-portrait { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; }
.avatar-art-stack--portrait { position: absolute; left: 50%; top: -15%; width: 290%; transform: translateX(-50%); }
.ch-avatar-img,
.coll-preview { position: relative; }
.up-av-raster,
.mobile-sheet-avatar {
  position: relative;
  display: block;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--accent) 22%, var(--surface-4)), var(--surface-3));
  color: inherit;
  cursor: pointer;
}
.up-av-raster { width: 32px; height: 32px; }
.mobile-sheet-avatar { width: 42px; height: 42px; }
.up-av-raster:hover,
.mobile-sheet-avatar:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); }
.up-av-raster:focus-visible,
.mobile-sheet-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.up-av-raster .avatar-art-stack--portrait,
.mobile-sheet-avatar .avatar-art-stack--portrait { top: -14%; width: 300%; }

.den-avatar-raster { bottom: -10px; width: 180px; }
.den-avatar-raster .avatar-art-stack { width: 100%; filter: drop-shadow(0 8px 11px rgba(0,0,0,.32)); }

/* Avatar Forge v1 uses semantic full-canvas wardrobe layers, not sliced joints.
   Keep this static until a separately reviewed motion rig is available. */
.avatar-art-stack[data-avatar-rigged="false"] .avatar-art-rig,
.avatar-art-stack[data-avatar-rigged="false"] .avatar-art-layer {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="idle"] .avatar-art-rig { animation: traveller-body-idle 4.6s ease-in-out infinite; }
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="portrait"] .avatar-art-rig { animation: traveller-body-portrait 5.8s ease-in-out infinite; }
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="focus"] .avatar-art-rig { animation: traveller-body-focus 5.2s ease-in-out infinite; }
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="tired"] .avatar-art-rig { animation: traveller-body-tired 5.8s ease-in-out infinite; }
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="happy"] .avatar-art-rig { animation: traveller-rig-settle 1.3s ease-out both; }
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="victory"] .avatar-art-rig { animation: traveller-rig-victory 1.8s ease-out both; }

.avatar-art-stack[data-avatar-motion="idle"] .avatar-art-hair-back,
.avatar-art-stack[data-avatar-motion="idle"] .avatar-art-hair-front,
.avatar-art-stack[data-avatar-motion="portrait"] .avatar-art-hair-back,
.avatar-art-stack[data-avatar-motion="portrait"] .avatar-art-hair-front { animation: traveller-hair-idle 5.1s ease-in-out infinite; }
.avatar-art-stack[data-avatar-motion="idle"] .avatar-art-scarf { animation: traveller-scarf-idle 4.1s ease-in-out infinite; }
.avatar-art-stack[data-avatar-motion="idle"] .avatar-art-pouch { animation: traveller-pouch-idle 4.7s ease-in-out infinite; }
.avatar-art-stack[data-avatar-motion="idle"] .avatar-art-lantern,
.avatar-art-stack[data-avatar-motion="focus"] .avatar-art-lantern { animation: traveller-lantern-idle 3.4s ease-in-out infinite; }
.avatar-art-stack[data-avatar-motion="idle"] .avatar-art-backpack { animation: traveller-pack-idle 4.6s ease-in-out infinite; }
.avatar-art-stack[data-avatar-motion="focus"] .avatar-art-goggles { animation: traveller-goggles-focus 2.8s ease-in-out infinite; }

.avatar-art-stack.is-reacting[data-avatar-reaction="greet"] .avatar-art-rig,
.avatar-art-stack.is-reacting[data-avatar-reaction="happy"] .avatar-art-rig { animation: traveller-rig-settle 1.3s cubic-bezier(.2,.8,.2,1) !important; }
.avatar-art-stack.is-reacting[data-avatar-reaction="victory"] .avatar-art-rig,
.avatar-art-stack.is-reacting[data-avatar-reaction="levelup"] .avatar-art-rig { animation: traveller-rig-victory 1.9s cubic-bezier(.16,.84,.24,1) !important; }
.avatar-art-stack.is-reacting[data-avatar-reaction="focus"] .avatar-art-rig { animation: traveller-react-focus 1.2s ease-out !important; }
.avatar-art-stack.is-reacting[data-avatar-reaction="tired"] .avatar-art-rig { animation: traveller-react-tired 1.3s ease-out !important; }
.avatar-art-stack.is-reacting .avatar-art-lantern { animation: traveller-lantern-react 1.15s ease-in-out !important; }
.avatar-art-stack.is-reacting .avatar-art-scarf,
.avatar-art-stack.is-reacting .avatar-art-pouch { animation: traveller-cloth-react 1.15s ease-in-out !important; }
.avatar-art-stack.is-reacting .avatar-art-hair-back,
.avatar-art-stack.is-reacting .avatar-art-hair-front { animation: traveller-hair-react 1.15s ease-in-out !important; }

.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="greet"] .avatar-art-upper-arm-r,
.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="greet"] .avatar-art-forearm-hand-r {
  transform-origin: 35.645% 26.693%;
  animation: traveller-arm-wave-r 1.3s cubic-bezier(.2,.82,.2,1) both !important;
}
.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="happy"] .avatar-art-upper-arm-r,
.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="happy"] .avatar-art-forearm-hand-r,
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="happy"] .avatar-art-upper-arm-r,
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="happy"] .avatar-art-forearm-hand-r {
  transform-origin: 35.645% 26.693%;
  animation: traveller-arm-happy-r 1.3s ease-out both !important;
}
.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="happy"] .avatar-art-upper-arm-l,
.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="happy"] .avatar-art-forearm-hand-l,
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="happy"] .avatar-art-upper-arm-l,
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="happy"] .avatar-art-forearm-hand-l {
  transform-origin: 64.355% 26.693%;
  animation: traveller-arm-happy-l 1.3s ease-out both !important;
}
.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="victory"] :is(.avatar-art-upper-arm-r,.avatar-art-forearm-hand-r),
.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="levelup"] :is(.avatar-art-upper-arm-r,.avatar-art-forearm-hand-r),
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="victory"] :is(.avatar-art-upper-arm-r,.avatar-art-forearm-hand-r) {
  transform-origin: 35.645% 26.693%;
  animation: traveller-arm-victory-r 1.9s cubic-bezier(.16,.84,.24,1) both !important;
}
.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="victory"] :is(.avatar-art-upper-arm-l,.avatar-art-forearm-hand-l),
.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="levelup"] :is(.avatar-art-upper-arm-l,.avatar-art-forearm-hand-l),
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="victory"] :is(.avatar-art-upper-arm-l,.avatar-art-forearm-hand-l) {
  transform-origin: 64.355% 26.693%;
  animation: traveller-arm-victory-l 1.9s cubic-bezier(.16,.84,.24,1) both !important;
}
.avatar-art-stack[data-avatar-rigged="true"].is-reacting[data-avatar-reaction="tired"] :is(.avatar-art-head,.avatar-art-face,.avatar-art-hair-back,.avatar-art-hair-front,.avatar-art-goggles),
.avatar-art-stack[data-avatar-rigged="true"][data-avatar-motion="tired"] :is(.avatar-art-head,.avatar-art-face,.avatar-art-hair-back,.avatar-art-hair-front,.avatar-art-goggles) {
  animation: traveller-head-tired 2.8s ease-in-out both !important;
}

@keyframes traveller-body-idle {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  48% { transform: translateY(-.8px) rotate(-.12deg) scaleX(1.001) scaleY(.999); }
}
@keyframes traveller-body-portrait {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  50% { transform: translateY(-1px) rotate(-.18deg) scale(1.003); }
}
@keyframes traveller-body-focus {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(-1px) scaleX(1.004); }
}
@keyframes traveller-body-tired {
  0%, 100% { transform: translateY(2px) rotate(.25deg) scaleY(.998); }
  50% { transform: translateY(3px) rotate(.4deg) scaleY(.997); }
}
@keyframes traveller-body-happy {
  0%, 100% { transform: translateY(0) scaleY(1); }
  38% { transform: translateY(-9px) scaleY(1.012); }
  68% { transform: translateY(1px) scaleY(.994); }
}
@keyframes traveller-body-victory {
  0%, 100% { transform: translateY(0) rotate(0); }
  34% { transform: translateY(-13px) rotate(-2deg); }
  70% { transform: translateY(1px) rotate(1deg); }
}
@keyframes traveller-rig-settle {
  0%,100% { transform: none; }
  38% { transform: translateY(-2px); }
  72% { transform: translateY(.5px); }
}
@keyframes traveller-rig-victory {
  0%,100% { transform: none; }
  24% { transform: translateY(-5px) scaleY(1.004); }
  48% { transform: translateY(1px) scaleY(.998); }
  70% { transform: translateY(-2px); }
}
@keyframes traveller-arm-wave-r {
  0%,100% { transform: rotate(0); }
  24% { transform: rotate(88deg); }
  43% { transform: rotate(72deg); }
  58% { transform: rotate(94deg); }
  74% { transform: rotate(77deg); }
}
@keyframes traveller-arm-happy-r { 0%,100% { transform: rotate(0); } 32%,68% { transform: rotate(22deg); } }
@keyframes traveller-arm-happy-l { 0%,100% { transform: rotate(0); } 32%,68% { transform: rotate(-22deg); } }
@keyframes traveller-arm-victory-r {
  0%,100% { transform: rotate(0); }
  20%,38% { transform: rotate(128deg); }
  52% { transform: rotate(112deg); }
  68% { transform: rotate(126deg); }
}
@keyframes traveller-arm-victory-l {
  0%,100% { transform: rotate(0); }
  20%,38% { transform: rotate(-128deg); }
  52% { transform: rotate(-112deg); }
  68% { transform: rotate(-126deg); }
}
@keyframes traveller-head-tired {
  0%,100% { transform: none; }
  28%,72% { transform: translateY(3px) rotate(2.2deg); }
}
@keyframes traveller-hair-idle { 0%,100% { transform: rotate(0); } 50% { transform: rotate(.45deg) translateY(-.4px); } }
@keyframes traveller-scarf-idle { 0%,100% { transform: rotate(-.15deg); } 50% { transform: rotate(.55deg) translateX(.4px); } }
@keyframes traveller-pouch-idle { 0%,100% { transform: rotate(0); } 50% { transform: rotate(.7deg); } }
@keyframes traveller-lantern-idle { 0%,100% { transform: rotate(-.7deg); } 50% { transform: rotate(.9deg); } }
@keyframes traveller-pack-idle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(.8px) rotate(.12deg); } }
@keyframes traveller-goggles-focus { 0%,72%,100% { filter: brightness(1); } 80% { filter: brightness(1.28) saturate(1.15); } }
@keyframes traveller-react-greet {
  0%,100% { transform: translateY(0) rotate(0); }
  24% { transform: translateY(-5px) rotate(-1.7deg); }
  50% { transform: translateY(-9px) rotate(1.1deg); }
  74% { transform: translateY(1px) rotate(-.5deg); }
}
@keyframes traveller-react-victory {
  0%,100% { transform: translateY(0) rotate(0) scale(1); }
  22% { transform: translateY(-15px) rotate(-2.4deg) scale(1.018); }
  45% { transform: translateY(1px) rotate(1.4deg) scale(.995); }
  66% { transform: translateY(-8px) rotate(-1deg) scale(1.01); }
  84% { transform: translateY(1px) rotate(.5deg); }
}
@keyframes traveller-react-focus { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-3px) scaleX(1.008); } }
@keyframes traveller-react-tired { 0% { transform: translateY(0); } 45%,100% { transform: translateY(7px) rotate(1.4deg) scaleY(.992); } }
@keyframes traveller-lantern-react { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 68% { transform: rotate(4deg); } }
@keyframes traveller-cloth-react { 0%,100% { transform: rotate(0); } 34% { transform: rotate(2.2deg); } 70% { transform: rotate(-1.4deg); } }
@keyframes traveller-hair-react { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-1.3deg) translateY(-1px); } 68% { transform: rotate(.8deg); } }

.avatar-reaction-cameo {
  position: fixed;
  right: 76px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 92;
  width: 126px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px) scale(.86);
  transition: opacity .22s ease, transform .28s cubic-bezier(.18,.86,.3,1.18);
  filter: drop-shadow(0 13px 19px rgba(0,0,0,.46));
}
.avatar-reaction-cameo.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.avatar-art-stack--cameo { width: 100%; }
.avatar-reaction-cameo > span:last-child:not(.avatar-art-stack) {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.avatar-editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
#avatar-editor { position: relative; }
#avatar-editor.is-avatar-swapping { pointer-events: none; }
#avatar-editor.is-avatar-swapping::after {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 8;
  padding: 5px 9px;
  content: "Готовим образ…";
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.avatar-editor-head h3 { margin: 0 0 3px; }
.avatar-editor-head p { margin: 0; color: var(--muted); font-size: 12px; }
.avatar-editor-badge { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel2)); font-size: 11px; font-weight: 800; }
.avatar-customizer { display: grid; gap: 15px; margin-top: 16px; }
.avatar-customizer section { display: grid; gap: 7px; }
.avatar-customizer h4 { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.avatar-editor-honesty {
  padding: 11px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel2));
}
.avatar-editor-honesty p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.avatar-choice-row { display: flex; flex-wrap: wrap; gap: 7px; }
.avatar-slots-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.avatar-slot-section { min-width: 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--panel2) 86%, transparent); }
.avatar-slot-section h4 { margin: 0 0 8px; color: var(--muted); font-size: 11px; letter-spacing: .045em; text-transform: uppercase; }
.avatar-section-help { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.avatar-slot-choice { flex: 1 1 auto; }
.avatar-choice { min-height: 36px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; transition: transform .12s, border-color .12s, background .12s; }
.avatar-choice:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.avatar-choice.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent); }
.avatar-color-choice { display: inline-flex; align-items: center; gap: 7px; }
.avatar-swatch { width: 17px; height: 17px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.2); }
.avatar-toggle-choice { min-width: 82px; }
.avatar-editor-note { margin: 15px 0 0; padding: 11px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, var(--panel2)); color: var(--muted); font-size: 12px; line-height: 1.45; }
.avatar-forge-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.avatar-forge-summary span { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--accent) 5%, var(--panel2)); font-size: 11px; }
.avatar-editor-actions { display: grid; grid-template-columns: minmax(190px, auto) minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 14px; padding: 13px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--accent) 5%, var(--panel2)); }
.avatar-editor-actions .btn { min-height: 42px; }
.avatar-editor-actions p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

html.avatar-forge-open,
html.avatar-forge-open body { overflow: hidden !important; }
.avatar-forge-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  background: #0c111c;
  opacity: 0;
  transition: opacity .16s ease;
}
.avatar-forge-overlay.is-visible { opacity: 1; }
.avatar-forge-overlay iframe { display: block; width: 100%; height: 100%; border: 0; background: #0c111c; }
.avatar-forge-overlay.is-applying::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  content: "Сохраняем образ…";
  color: #f4efe6;
  background: rgba(8, 12, 20, .68);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
}
@media (max-width: 560px) {
  .avatar-art-stack--figure { width: min(94%, 248px); }
  .avatar-slots-grid { grid-template-columns: 1fr; }
  .avatar-choice { min-height: 42px; }
  .avatar-editor-actions { grid-template-columns: 1fr; }
  .den-avatar-raster { width: 168px; }
  .avatar-reaction-cameo { right: 12px; bottom: max(82px, calc(env(safe-area-inset-bottom) + 70px)); width: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-art-rig,
  .avatar-art-layer { animation: none !important; transition: none !important; }
  .avatar-reaction-cameo { display: none !important; }
}
/* «?» у вида питомца — клик даёт хинт «что засчитывать в сферу» */
.pet-hint-icon { width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; }

/* Круглый портрет — та же фигура, кроп к ЛИЦУ (голова ~14% сверху в полноростовом рендере) */
.avatar-preset-portrait { width: 100%; height: 100%; object-fit: cover; object-position: 50% 11%; display: block; }
.ar-p { position: absolute; }
.ar-p img { display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.ar-mirror { transform: scaleX(-1); }
.ar-outer-full { position: relative; width: 254px; height: 339px; margin: 0 auto; }
.ar-outer-full .ar-stage { position: absolute; left: 0; top: 0; width: 480px; height: 640px; transform: scale(.53); transform-origin: top left; }
.ar-outer-portrait { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.ar-outer-portrait .ar-stage { position: absolute; left: 0; top: 0; width: 480px; height: 640px; transform: translate(-36px, 0) scale(.36); transform-origin: top left; }
.ave-layers { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.ave-layer { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 13px; transition: .12s; }
.ave-layer.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* ---------- Design Direction Phase 3: planning cockpit, habits lab, settings console ---------- */
.calv-head,
.week-nav,
.hb-intro,
#main:has(#skills-list) > .card:first-of-type {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-soft));
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--surface-1) 98%, transparent));
  box-shadow: 0 22px 70px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.055);
}

.calv-head::after,
.week-nav::after,
.hb-intro::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 58%, transparent), color-mix(in srgb, var(--rarity-legendary) 36%, transparent), transparent);
  opacity: .74;
  pointer-events: none;
}

.calv-title {
  align-items: center;
  gap: 9px;
}

.calv-title h2,
.week-nav b {
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
  letter-spacing: 0;
}

.calv-title .btn.sm,
.week-nav .btn {
  min-width: 40px;
  height: 40px;
  justify-content: center;
  padding-inline: 12px;
}

.calv-title .wk-load {
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  color: var(--text-soft);
}

.cal-modes {
  border: 1px solid var(--line-soft);
  background: rgba(5,8,16,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.cal-mode {
  min-height: 32px;
  padding-inline: 14px;
}

.cal-mode.active {
  color: #07111d;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 24%, transparent);
}

.calv-strip {
  gap: 9px;
  margin-top: 16px;
}

.calv-day {
  min-height: 76px;
  justify-content: center;
  border-color: var(--line-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 60%),
    color-mix(in srgb, var(--surface-3) 76%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.calv-day:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.calv-day.active {
  color: white;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 32%, transparent), transparent 68%),
    color-mix(in srgb, var(--accent) 24%, var(--surface-3));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 18px 42px color-mix(in srgb, var(--accent) 18%, transparent);
}

.calv-day .cd-n {
  font-size: 22px;
  line-height: 1;
}

.calv-day .cd-dot,
.calv-day .cd-dot-empty {
  height: 18px;
}

.calv-tray {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-legendary) 9%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface-2) 94%, transparent);
}

.calv-tray h3 {
  margin-bottom: 0;
}

.calv-chips {
  gap: 9px;
}

.calv-chip {
  min-height: 36px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.cal-schedule {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(6,9,18,.30);
}

.cal-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-3) 54%, transparent);
}

.cal {
  border-top: none;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(180deg, transparent 0 47px, rgba(255,255,255,.035) 48px),
    rgba(5,8,16,.28);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.cal-row {
  border-bottom-color: rgba(255,255,255,.045);
}

.cal-h {
  left: 10px;
  top: 6px;
  background: transparent;
}

.cal-block {
  right: 14px;
  left: 58px;
  min-height: 28px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--c) 52%, var(--line-soft));
  border-left-width: 4px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c) 34%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface-3) 82%, transparent);
  box-shadow: 0 9px 20px rgba(0,0,0,.18);
}

.week-nav {
  gap: 12px;
  justify-content: flex-start;
}

.week-nav > div {
  flex: 1;
  min-width: 180px;
}

.kpis {
  gap: 12px;
}

.kpi {
  border-color: var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,.042), transparent 56%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.kpi .v {
  letter-spacing: 0;
}

.wk-hint {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(6,9,18,.34);
}

.wk-grid-wrap {
  margin: 0;
  padding: 2px 2px 12px;
}

.wk-grid {
  gap: 10px;
}

.wk-col {
  min-height: 260px;
  border-color: var(--line-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), transparent 50%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.wk-col.is-today {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent-2) 62%, var(--line-soft));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-2) 94%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 22%, transparent), 0 16px 34px rgba(0,0,0,.20);
}

.wk-col.is-past {
  opacity: .78;
}

.wk-col-head {
  padding-bottom: 9px;
  border-bottom-color: var(--line-soft);
}

.wk-wd {
  font-size: 15px;
}

.wk-date {
  font-variant-numeric: tabular-nums;
}

.wk-load,
.wk-prog {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(5,8,16,.36);
}

.wk-load {
  width: fit-content;
  padding: 3px 7px;
}

.wk-task {
  gap: 7px;
  min-height: 34px;
  margin: 3px 0;
  padding: 6px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(5,8,16,.28);
}

.wk-task:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.wk-task.done {
  opacity: .62;
}

.wk-t-dot {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 12px currentColor;
}

.wk-habits-dots {
  padding: 8px;
  border: 1px dashed var(--line-soft);
  border-radius: 11px;
  background: rgba(5,8,16,.22);
}

.wk-h-dot {
  width: 11px;
  height: 11px;
}

.wk-add-btn {
  min-height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.hsub {
  margin-bottom: 14px;
}

.hsub .navsubtab {
  min-height: 40px;
}

.hb-intro h3,
.hb-laws h4,
.hb-card h3,
.hb-card b {
  letter-spacing: 0;
}

.hb-intro p {
  max-width: 780px;
}

.hb-identity {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  font-weight: 800;
}

.hb-identity input {
  max-width: 720px;
}

.hb-laws {
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), transparent 46%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.hb-law {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}

.hb-law:first-of-type {
  border-top: none;
}

.hb-lawn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  font-weight: 900;
  color: #08111c;
  background: linear-gradient(135deg, var(--accent-2), var(--rarity-legendary));
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

.hb-law.break .hb-lawn {
  background: linear-gradient(135deg, #ff7a8a, var(--rarity-epic));
  color: white;
}

.hb-law ul,
.hb-ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-soft);
}

.hb-law li + li,
.hb-ul li + li {
  margin-top: 6px;
}

.hb-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.hb-card {
  border-color: color-mix(in srgb, var(--c) 36%, var(--line-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.hb-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hb-top .muted {
  text-align: right;
  font-size: 12px;
}

.hb-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.hb-field input {
  font-weight: 600;
}

.anti-row2,
.anti-row,
.ah-edit {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.anti-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.anti-title {
  font-weight: 900;
}

.anti-stat {
  color: var(--text-soft);
  font-size: 12.5px;
}

.hb-loop {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.hb-loop-step {
  flex: 1 1 150px;
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-3) 72%, transparent);
  font-weight: 800;
}

.hb-loop-arr {
  align-self: center;
  color: var(--accent-2);
  font-weight: 900;
}

.hb-extra {
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.hb-extra:first-of-type {
  border-top: none;
}

#main:has(#skills-list) > .card {
  border-color: var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 48%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
}

#main:has(#skills-list) h3 {
  letter-spacing: 0;
}

.theme-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.theme-row:first-of-type {
  border-top: none;
}

.theme-lbl {
  color: var(--text-soft);
  font-weight: 900;
}

.theme-toggle,
.accent-swatches {
  border: 1px solid var(--line-soft);
  background: rgba(5,8,16,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.theme-opt {
  min-height: var(--touch-min);
}

.theme-opt.active {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #07111d;
  box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 18%, transparent);
}

.accent-sw {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.16);
}

.accent-sw.active {
  outline: 2px solid white;
  outline-offset: 2px;
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-soft);
}

#skills-list,
#habits-list,
.import-list {
  display: grid;
  gap: 9px;
}

.skill-edit,
.habit-edit,
.import-row {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(5,8,16,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.skill-edit {
  padding: 9px;
}

.skill-edit.is-sub {
  margin-left: clamp(10px, calc(var(--d) * 16px), 56px);
}

.se-canon {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
}

.se-canon-lbl,
.se-proj,
.imp-rank,
.imp-lvl {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface-3) 58%, transparent);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.se-move button,
.se-collapse {
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface-3) 64%, transparent);
}

.import-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.import-row.sub {
  margin-left: 24px;
}

.imp-left,
.imp-right,
.imp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.imp-head {
  justify-content: space-between;
  margin-bottom: 8px;
}

.imp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 14px currentColor;
}

.imp-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.imp-name {
  font-weight: 900;
}

.imp-hint {
  color: var(--muted);
  font-size: 12px;
}

.knobs {
  gap: 10px;
}

.knob {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 10px;
  background: rgba(5,8,16,.26);
}

.knob label {
  color: var(--text-soft);
  font-weight: 900;
}

.prog-grid {
  gap: 12px;
}

.settings-actions {
  position: sticky;
  bottom: 14px;
  z-index: 20;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  box-shadow: 0 18px 45px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(16px);
}

@media (max-width: 820px) {
  .calv-strip {
    grid-template-columns: repeat(7, minmax(58px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .calv-day {
    min-width: 58px;
  }

  .week-nav {
    flex-wrap: wrap;
  }

  .hb-law {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .hb-lawn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .theme-row,
  .import-row,
  .hb-top {
    grid-template-columns: 1fr;
    display: grid;
  }

  .imp-right {
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .calv-title h2,
  .week-nav b {
    font-size: 24px;
  }

  .calv-title .wk-load {
    margin-left: 0;
  }

  .cal-block {
    left: 46px;
    right: 8px;
  }

  .hb-list {
    grid-template-columns: 1fr;
  }

  .skill-edit.is-sub,
  .import-row.sub {
    margin-left: 0;
  }
}

/* ---------- Design Direction Phase 4: goals, progress, tribe, leaderboard ---------- */
.ai-import-card,
.ai-review-card,
.wrapped-card,
.party-head,
.path-banner,
.raid-card,
.season-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-soft));
  background:
    radial-gradient(420px 180px at 100% 0%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 56%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 55px rgba(0,0,0,.18);
}

.ai-import-card,
.ai-review-card,
.wrapped-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ai-imp-l {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ai-imp-l b,
.wrapped-card h3,
.ai-review-card h3 {
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0;
}

.gtype-guide {
  margin: 0 0 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(5,8,16,.26);
}

.gtype-guide summary {
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text-soft);
  font-weight: 800;
}

.gtype-rows {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.gtype-row {
  display: grid;
  grid-template-columns: auto minmax(90px, 130px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,.022);
}

.gtype-tf {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.gfilters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.gfilter {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-3) 64%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.gfilter:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line-soft));
}

.gfilter.active {
  color: #07111d;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.goal-form {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(5,8,16,.26);
}

.goal-form input[name="title"] {
  min-height: 44px;
  font-size: 15px;
  font-weight: 800;
}

.goal-extra {
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}

.gx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 8px;
  align-items: center;
  padding-top: 8px;
}

.gx-arrow {
  display: none;
}

.gx-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.goal {
  border-color: var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.goal::before {
  content: "";
  display: block;
  height: 3px;
  margin: -16px -16px 14px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--rarity-legendary));
  opacity: .48;
}

.goal-head h3 {
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: 0;
}

.goal-desc {
  color: var(--text-soft);
  opacity: 1;
}

.goal-why,
.goal-why-full {
  color: var(--muted);
}

.goal-meta {
  gap: 8px;
}

.goal-type,
.goal-status,
.goal-xp,
.goal-deadline,
.t-skill {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface-3) 62%, transparent);
  font-size: 12px;
  font-weight: 900;
}

.t-skill {
  border-color: color-mix(in srgb, var(--c) 45%, var(--line-soft));
  background: color-mix(in srgb, var(--c) 18%, var(--surface-3));
}

.goal-status.active,
.goal-status.status-active {
  color: var(--good);
}

.goal-deadline.overdue {
  border-color: color-mix(in srgb, var(--bad) 58%, var(--line-soft));
  background: color-mix(in srgb, var(--bad) 14%, transparent);
}

.goal-actions {
  justify-content: flex-end;
}

.goal-status-sel,
.goal-edit-sel {
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  border-color: var(--line-soft);
}

.gm-block {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(5,8,16,.25);
}

.gm-head b {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.metric-form,
.add-step-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.metric-form input,
.add-step-form input {
  flex: 1 1 180px;
}

.gsteps {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.gstep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(5,8,16,.22);
}

.gstep.done {
  opacity: .62;
}

.gstep span {
  flex: 1;
  min-width: 0;
}

.chart {
  width: 100%;
  max-height: 240px;
  overflow: visible;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.18));
}

.chart rect {
  filter: drop-shadow(0 0 10px rgba(79,214,255,.12));
}

.bar-lbl,
.bar-val {
  fill: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
}

.bal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bal-head h3 {
  margin: 0;
  letter-spacing: 0;
}

.bal-score {
  font-size: clamp(34px, 6vw, 58px);
  line-height: .9;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.bal-score small {
  font-size: 14px;
  color: var(--muted);
}

.bal-meter,
.raid-bar,
.season-bar {
  height: 14px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(5,8,16,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.bal-meter span,
.raid-bar span,
.season-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--rarity-legendary));
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent);
}

.rank-row {
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(5,8,16,.24);
}

.rank-row + .rank-row {
  margin-top: 7px;
}

.rr-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 14px currentColor;
}

.rr-rank {
  border: 1px solid color-mix(in srgb, var(--rc) 42%, var(--line-soft));
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  background: color-mix(in srgb, var(--rc) 15%, transparent);
  color: var(--rc);
  font-weight: 900;
}

.rr-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
}

.rr-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.party-head {
  padding: 24px;
}

.ph-top,
.raid-head,
.season-head,
.pb-head,
.pb-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ph-top h3 {
  margin: 0;
  font-size: clamp(24px, 4vw, 38px);
  letter-spacing: 0;
}

.party-code {
  padding: 7px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(5,8,16,.34);
}

.party-code b {
  color: var(--accent-2);
}

.party-or {
  display: flex;
  align-items: center;
  gap: 12px;
}

.party-or::before,
.party-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.raid-card {
  border-color: color-mix(in srgb, var(--bad) 28%, var(--line-soft));
}

.raid-card.won {
  border-color: color-mix(in srgb, var(--rarity-legendary) 58%, var(--line-soft));
  background:
    radial-gradient(380px 200px at 50% 0%, color-mix(in srgb, var(--rarity-legendary) 20%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.raid-boss {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  background: rgba(5,8,16,.36);
  font-size: 32px;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}

.raid-lore,
.raid-weak,
.raid-note {
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(5,8,16,.25);
}

.raid-weak {
  color: var(--rarity-legendary);
}

.raid-claim {
  margin-top: 12px;
}

.pm-list {
  display: grid;
  gap: 8px;
}

.pm-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(5,8,16,.25);
}

.pm-row.me {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 12%, rgba(5,8,16,.25));
}

.pm-av {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-3) 72%, transparent);
  font-size: 22px;
}

.pm-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pm-name {
  font-weight: 900;
}

.pm-sub {
  font-size: 12px;
}

.pm-xp {
  font-size: 18px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.pm-xp small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 11px;
}

.path-banner {
  padding: 18px 20px;
}

.pb-head b {
  font-size: clamp(18px, 2.4vw, 28px);
}

.pb-bar {
  display: flex;
  height: 18px;
  margin: 14px 0 9px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(5,8,16,.40);
}

.pb-trust {
  background: linear-gradient(90deg, #9b8cff, #6c8cff);
}

.pb-control {
  background: linear-gradient(90deg, #4fd6ff, #52f0d2);
}

.pb-legend {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 900;
}

.lb-table {
  gap: 8px;
}

.lb-row {
  min-height: 56px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%),
    rgba(5,8,16,.26);
}

.lb-row:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.lb-row.me {
  border-color: color-mix(in srgb, var(--accent-2) 52%, var(--line-soft));
  background:
    radial-gradient(180px 80px at 0% 50%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--accent) 12%, rgba(5,8,16,.26));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 12%, transparent);
}

.lb-pos {
  color: var(--rarity-legendary);
}

.lb-av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-3) 74%, transparent);
}

.lb-name {
  gap: 3px;
}

.lb-xp {
  font-size: 15px;
  color: var(--text);
}

.lb-optout {
  width: fit-content;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(5,8,16,.28);
}

@media (max-width: 820px) {
  .ai-import-card,
  .ai-review-card,
  .wrapped-card {
    align-items: stretch;
    flex-direction: column;
  }

  .gtype-row,
  .pm-row {
    grid-template-columns: 1fr;
  }

  .goal-head {
    flex-direction: column;
  }

  .goal-actions {
    justify-content: flex-start;
  }

  .rank-row {
    grid-template-columns: 12px minmax(0, 1fr) auto;
  }

  .rank-row .rr-lvl,
  .rank-row .rr-bar,
  .rank-row .rr-next {
    display: none;
  }
}

@media (max-width: 560px) {
  .gx-grid {
    grid-template-columns: 1fr;
  }

  .lb-row {
    grid-template-columns: 30px 34px minmax(0, 1fr) auto;
  }

  .lb-row .lb-lvl {
    display: none;
  }
}

/* ---------- Design Direction Phase 5: event hub, season path, side choice ---------- */
/* Fortnite and Runeterra inform the hierarchy here, not the visual noise: one event,
   one next step, and a short visible route to the reward. */
.party-shell {
  display: grid;
  gap: 16px;
}

.event-hero,
.party-empty-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 244px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(170px, .6fr);
  align-items: center;
  gap: 24px;
  padding: 26px 28px 70px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line-soft));
  background:
    radial-gradient(400px 260px at 88% 42%, rgba(224,162,62,.19), transparent 68%),
    radial-gradient(520px 290px at 2% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%),
    linear-gradient(128deg, color-mix(in srgb, var(--surface-3) 88%, #050816), color-mix(in srgb, var(--surface-1) 94%, #050816));
  box-shadow: var(--shadow-card);
}

.event-hero::before,
.party-empty-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 42%;
  opacity: .72;
  background:
    linear-gradient(140deg, transparent 6%, rgba(255,255,255,.055) 6% 7%, transparent 7% 23%, rgba(255,255,255,.04) 23% 24%, transparent 24%),
    linear-gradient(132deg, transparent 20%, rgba(224,162,62,.11) 20% 38%, transparent 38%);
  pointer-events: none;
}

.event-hero::after,
.party-empty-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -36px -80px auto;
  width: 260px;
  height: 190px;
  border: 1px solid color-mix(in srgb, var(--accent-warm) 35%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 34px color-mix(in srgb, var(--accent-warm) 4%, transparent), 0 0 0 68px color-mix(in srgb, var(--accent) 4%, transparent);
  transform: rotate(-18deg);
  pointer-events: none;
}

.event-hero.is-won {
  border-color: color-mix(in srgb, var(--rarity-legendary) 70%, var(--line-soft));
  background:
    radial-gradient(440px 270px at 84% 34%, color-mix(in srgb, var(--rarity-legendary) 24%, transparent), transparent 70%),
    radial-gradient(430px 240px at 2% 0%, color-mix(in srgb, var(--good) 16%, transparent), transparent 72%),
    linear-gradient(128deg, color-mix(in srgb, var(--surface-3) 92%, #050816), color-mix(in srgb, var(--surface-1) 96%, #050816));
}

.event-hero-copy,
.party-empty-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.event-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 48%, transparent);
  border-radius: var(--radius-pill);
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1.2px;
}

.event-hero h2,
.party-empty-hero h2 {
  max-width: 620px;
  margin: 10px 0 8px;
  color: var(--text-strong);
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1.04;
}

.event-hero-copy > p,
.party-empty-copy > p {
  max-width: 650px;
  margin: 0;
  line-height: 1.55;
}

.event-metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 15px;
}

.event-metrics span {
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(5,8,16,.31);
  color: var(--text-soft);
  font-size: 12px;
  white-space: nowrap;
}

.event-metrics b {
  color: var(--text-strong);
  font-weight: 950;
}

.event-stage,
.party-empty-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 152px;
}

.event-stage-ring,
.party-empty-mark i {
  position: absolute;
  width: 142px;
  height: 142px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 44%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent-2) 6%, transparent), 0 0 48px color-mix(in srgb, var(--accent-2) 16%, transparent);
}

.event-stage-ring::before,
.party-empty-mark i::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent-warm) 50%, transparent);
  border-radius: 50%;
}

.event-stage-boss,
.party-empty-mark span {
  z-index: 1;
  font-size: 78px;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.32));
}

.event-stage-mark,
.party-empty-mark b {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 14px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-warm) 58%, transparent);
  border-radius: 7px;
  background: rgba(5,8,16,.78);
  color: #ffd67c;
  font-size: 10px;
  letter-spacing: 1px;
  transform: rotate(-7deg);
}

.event-step-rail {
  position: absolute;
  right: 28px;
  bottom: 18px;
  left: 28px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.event-step {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(5,8,16,.42);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 750;
}

.event-step b {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-4) 84%, transparent);
  color: var(--muted);
  font-size: 11px;
}

.event-step.complete {
  border-color: color-mix(in srgb, var(--good) 48%, var(--line-soft));
  color: var(--text);
}

.event-step.complete b {
  background: color-mix(in srgb, var(--good) 72%, #0d1620);
  color: #fff;
}

.party-top-grid,
.party-event-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .68fr);
  gap: 16px;
  align-items: stretch;
}

.party-event-grid {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

.party-top-grid > .card,
.party-event-grid > .card {
  margin: 0;
}

.season-card-event {
  display: grid;
  align-content: center;
  min-height: 118px;
}

.season-card-event .season-bar {
  height: 14px;
  margin: 4px 0 7px;
}

.season-card-event p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.raid-card {
  min-height: 100%;
}

.raid-card .raid-bar {
  height: 16px;
  margin-top: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.raid-card .raid-bar > span {
  position: relative;
  overflow: hidden;
}

.raid-card .raid-bar > span::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  background: repeating-linear-gradient(120deg, transparent 0 10px, rgba(255,255,255,.23) 10px 12px);
}

.raid-claim {
  min-height: 42px;
  margin-top: 12px;
  font-weight: 900;
  box-shadow: 0 9px 22px color-mix(in srgb, var(--rarity-legendary) 22%, transparent);
}

.party-empty-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(130px, .42fr) minmax(260px, .7fr);
  padding-bottom: 26px;
}

.party-empty-actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: rgba(5,8,16,.38);
}

.party-empty-actions .party-or {
  margin: 0;
  font-size: 11px;
}

.party-empty-actions .add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.party-empty-actions input {
  min-width: 0;
}

/* The side choice needs to feel like a commitment, while preserving the ability to change later. */
.path-choice-box {
  isolation: isolate;
  overflow: hidden;
  padding: 30px;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line-soft));
  box-shadow: 0 24px 80px rgba(0,0,0,.46), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}

.path-choice-box::before,
.path-choice-box::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 45%;
  opacity: .74;
  pointer-events: none;
}

.path-choice-box::before {
  left: 0;
  background: linear-gradient(122deg, color-mix(in srgb, #6c8cff 18%, transparent), transparent 74%);
}

.path-choice-box::after {
  right: 0;
  background: linear-gradient(238deg, color-mix(in srgb, #4fd6ff 16%, transparent), transparent 74%);
}

.path-choice-title {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  color: var(--text-strong);
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.05;
}

.path-choice-sub {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
}

.path-cards {
  position: relative;
  margin-top: 22px;
}

.path-card {
  min-height: 300px;
  align-items: flex-start;
  padding: 22px 21px 18px;
  text-align: left;
  border-width: 1px;
  transform-origin: center bottom;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.path-card::before {
  content: "";
  position: absolute;
  inset: auto 14px 14px auto;
  width: 92px;
  height: 92px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
  border-radius: 26px;
  transform: rotate(16deg);
  pointer-events: none;
}

.path-card[data-path="trust"] {
  border-color: color-mix(in srgb, #8a78ff 46%, var(--line-soft));
  background:
    radial-gradient(210px 150px at 4% 4%, rgba(143,111,255,.28), transparent 72%),
    linear-gradient(145deg, rgba(47,37,96,.66), color-mix(in srgb, var(--surface-2) 94%, transparent));
}

.path-card[data-path="control"] {
  border-color: color-mix(in srgb, #4fd6ff 50%, var(--line-soft));
  background:
    radial-gradient(210px 150px at 4% 4%, rgba(79,214,255,.22), transparent 72%),
    linear-gradient(145deg, rgba(14,52,66,.68), color-mix(in srgb, var(--surface-2) 94%, transparent));
}

.path-card:hover,
.path-card:focus-visible {
  transform: translateY(-7px) scale(1.01);
  outline: none;
}

.path-card[data-path="trust"]:hover,
.path-card[data-path="trust"].chosen {
  border-color: #a792ff;
  box-shadow: 0 18px 36px rgba(58,42,151,.28), inset 0 1px 0 rgba(255,255,255,.08);
}

.path-card[data-path="control"]:hover,
.path-card[data-path="control"].chosen {
  border-color: #6de4ff;
  box-shadow: 0 18px 36px rgba(26,142,171,.24), inset 0 1px 0 rgba(255,255,255,.08);
}

.path-card-mascot {
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: rgba(5,8,16,.32);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.path-card .path-glyph {
  position: absolute;
  top: 22px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: rgba(5,8,16,.28);
  font-size: 19px;
}

.path-card h3 {
  margin-top: 4px;
  color: var(--text-strong);
  font-size: 23px;
}

.path-card .path-tag {
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1px;
}

.path-card .path-pitch {
  max-width: 34ch;
  min-height: 58px;
  margin: 4px 0 14px;
  color: var(--text-soft);
}

.path-card .path-choose-btn {
  width: 100%;
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
  border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #131c34), color-mix(in srgb, var(--accent-2) 72%, #131c34));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 20%, transparent);
}

.path-card[data-path="control"] .path-choose-btn {
  background: linear-gradient(135deg, #267d9d, #45cfe1);
}

.reward-hero {
  border-color: color-mix(in srgb, var(--accent-warm) 38%, var(--line-soft));
}

.reward-track-preview {
  position: relative;
  padding: 16px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-warm) 26%, var(--line-soft));
  border-radius: var(--radius-lg);
  background: rgba(5,8,16,.27);
}

.reward-track-preview::before {
  content: "SEASON ROUTE";
  position: absolute;
  top: 5px;
  left: 12px;
  color: color-mix(in srgb, var(--accent-warm) 78%, #fff);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 1.2px;
}

.reward-track-preview span {
  position: relative;
  z-index: 1;
}

.reward-track-preview span.ready {
  animation: reward-ready 1.8s ease-in-out infinite;
}

@keyframes reward-ready {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .reward-track-preview span.ready { animation: none; }
  .path-card,
  .path-card:hover { transform: none; }
}

@media (max-width: 820px) {
  .event-hero,
  .party-empty-hero,
  .party-top-grid,
  .party-event-grid {
    grid-template-columns: 1fr;
  }

  .event-hero,
  .party-empty-hero {
    min-height: 0;
  }

  .event-stage,
  .party-empty-mark {
    min-height: 132px;
  }

  .party-empty-actions {
    max-width: 560px;
  }
}

@media (max-width: 560px) {
  .event-hero,
  .party-empty-hero {
    gap: 14px;
    padding: 22px 18px 18px;
  }

  .event-hero::before,
  .party-empty-hero::before {
    width: 72%;
  }

  .event-stage,
  .party-empty-mark {
    min-height: 110px;
  }

  .event-stage-ring,
  .party-empty-mark i {
    width: 108px;
    height: 108px;
  }

  .event-stage-boss,
  .party-empty-mark span {
    font-size: 58px;
  }

  .event-step-rail {
    position: static;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .event-step { font-size: 12px; }

  .party-empty-actions .add-row { grid-template-columns: 1fr; }

  .path-choice-box { padding: 24px 16px; }
  .path-cards { grid-template-columns: 1fr; }
  .path-card { min-height: 0; }
  .path-card .path-pitch { min-height: 0; }
}

/* ============================================================
   Mobile product pass — 2026-07-13
   A phone-first shell layered after the legacy responsive rules.
   ============================================================ */

.mobile-nav-more {
  display: none;
}

.cal-tools {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.satoru-boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  color: var(--text-strong);
  background: var(--surface-0);
  opacity: 1;
  visibility: visible;
  transition: opacity 360ms ease, visibility 360ms ease;
}

.satoru-boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.boot-wordmark > strong {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .035em;
}

.boot-ouroboros {
  position: relative;
  width: clamp(118px, 25vw, 148px);
  aspect-ratio: 1;
}

.boot-ouroboros-orbit,
.boot-ouroboros-layer {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
}

.boot-ouroboros-orbit {
  transform-origin: 50% 50%;
  animation: boot-ouroboros-chase 3.2s linear infinite;
}

.boot-ouroboros-layer {
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.boot-ouroboros-body {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .24));
}

.boot-ouroboros-jaw {
  transform-origin: 52% 27.5%;
  animation: boot-ouroboros-bite .8s linear infinite;
}

.boot-progress {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.boot-progress i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
  animation: boot-progress-pulse 1.2s ease-in-out infinite;
}

.boot-progress i:nth-child(2) { animation-delay: 160ms; }
.boot-progress i:nth-child(3) { animation-delay: 320ms; }

@keyframes boot-ouroboros-chase {
  to { transform: rotate(360deg); }
}

@keyframes boot-ouroboros-bite {
  0%, 35%, 100% { transform: rotate(0deg); }
  54% { transform: rotate(22deg); }
  64% { transform: rotate(22deg); }
  77% { transform: rotate(-2deg); }
  87% { transform: rotate(0deg); }
}

@keyframes boot-progress-pulse {
  0%, 100% { opacity: .22; transform: translateY(0); }
  45% { opacity: 1; transform: translateY(-2px); }
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(2, 5, 12, .68);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

html.mobile-nav-open,
html.mobile-nav-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.mobile-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-sheet {
  width: min(100%, 520px);
  max-height: min(82svh, 680px);
  overflow: auto;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface-2)), var(--surface-1));
  box-shadow: 0 -28px 70px rgba(0, 0, 0, .48);
  transform: translateY(24px);
  transition: transform 180ms var(--ease-out);
}

.mobile-nav-overlay.is-open .mobile-nav-sheet {
  transform: translateY(0);
}

.mobile-sheet-handle {
  width: 42px;
  height: 4px;
  margin: 2px auto 12px;
  border-radius: 4px;
  background: var(--line-strong);
}

.mobile-sheet-head,
.mobile-sheet-profile,
.mobile-sheet-entry,
.mobile-sheet-utils {
  display: flex;
  align-items: center;
}

.mobile-sheet-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mobile-sheet-profile {
  min-width: 0;
  gap: 10px;
}

.mobile-sheet-profile > span {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-4));
  font-size: 22px;
}

.mobile-sheet-profile > div,
.mobile-sheet-entry > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mobile-sheet-profile b,
.mobile-sheet-entry b {
  color: var(--text-strong);
  font-size: 14px;
  letter-spacing: 0;
}

.mobile-sheet-profile small,
.mobile-sheet-entry small {
  color: var(--muted);
  font-size: 11px;
}

.mobile-sheet-close {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--text-soft);
  background: var(--surface-3);
}

.mobile-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-sheet-grid > .mobile-sheet-entry:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.mobile-sheet-entry {
  position: relative;
  min-width: 0;
  min-height: 66px;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  color: var(--text);
  text-align: left;
  background: color-mix(in srgb, var(--surface-3) 86%, transparent);
}

.mobile-sheet-entry.active {
  border-color: color-mix(in srgb, var(--accent-2) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-3));
}

.mobile-sheet-entry.locked { opacity: .55; }

.mobile-sheet-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-4));
  font-size: 19px;
}

.mobile-sheet-chevron {
  margin-left: auto;
  color: var(--muted);
  font-size: 20px;
}

.mobile-sheet-new {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 72%, transparent);
}

.mobile-sheet-utils {
  gap: 8px;
  margin-top: 10px;
}

.mobile-sheet-utils .btn {
  flex: 1 1 0;
}

@media (max-width: 600px) {
  html {
    scroll-padding-bottom: calc(94px + env(safe-area-inset-bottom));
  }

  body {
    background-size: auto, 34px 34px, 34px 34px, auto;
  }

  #app {
    width: 100%;
    max-width: none;
    padding: 0 max(12px, env(safe-area-inset-right)) calc(94px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  #topbar {
    position: relative;
    z-index: 80;
    padding: max(10px, env(safe-area-inset-top)) 0 10px;
    margin-bottom: 10px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .brand {
    min-height: 34px;
    gap: 9px;
  }

  .brand .logo {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 20px;
  }

  .brand h1,
  #appName {
    font-size: 18px;
    letter-spacing: 0;
  }

  .char-summary {
    margin-top: 9px;
  }

  .char-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    gap: 7px 8px;
    align-items: center;
  }

  .user-pill {
    grid-column: 1 / 3;
    grid-row: 1;
    min-width: 0;
    padding: 4px 8px 4px 5px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .user-pill .up-av {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .user-pill .up-meta { min-width: 0; }
  .user-pill .up-name {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }

  .up-rank,
  .eq-title,
  .skills-row,
  .help-btn,
  .logout-btn,
  .plan-badge {
    display: none !important;
  }

  .gold-pill,
  .streak {
    min-width: 0;
    padding: 6px 8px;
    justify-content: center;
    border-radius: 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  .gold-pill { grid-column: 3; grid-row: 1; }
  .streak { grid-column: 4; grid-row: 1; }

  .char-level {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    white-space: nowrap;
  }

  .char-level b { font-size: 19px; }

  .xp-bar {
    grid-column: 2 / 5;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 14px;
    flex: none;
  }

  .xp-bar > i { font-size: 10px; }

  .hype-chip {
    grid-column: 1 / -1;
    min-width: 0;
  }

  #nav {
    margin: 7px 0 0;
    padding: 0;
  }

  .navrow {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: max(7px, env(safe-area-inset-bottom));
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: auto;
    min-height: 64px;
    gap: 3px;
    overflow: visible;
    padding: 5px;
    border: 1px solid var(--line-strong);
    border-radius: 17px;
    background: color-mix(in srgb, var(--surface-1) 97%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 14px 42px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255,255,255,.04);
  }

  .navrow > .navsec,
  .navrow > .navgear {
    display: none;
  }

  .navrow > .navsec.mobile-primary,
  .navrow > .mobile-nav-more {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 54px;
    gap: 3px;
    padding: 5px 2px 4px;
    border-radius: 13px;
    font-size: 19px;
    line-height: 1;
  }

  /* Подпись в нижней навигации: слот фиксированный, длина слова зависит от языка.
     Немецкое «Gewohnheiten» шире английского «Habits» на 25px и наезжало на соседний
     пункт. Многоточие вместо наезда — защищает любой будущий язык, не только DE. */
  .navrow > .navsec.mobile-primary .navsec-l,
  .navrow > .mobile-nav-more .navsec-l {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .navrow > .navsec.mobile-primary.active,
  .navrow > .mobile-nav-more.active {
    background: color-mix(in srgb, var(--accent) 17%, var(--surface-3));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 28%, transparent);
  }

  .navrow > .navsec.mobile-primary.active::before,
  .navrow > .mobile-nav-more.active::before {
    content: "";
    position: absolute;
    top: 3px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-2);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-2) 60%, transparent);
  }

  .navrow .navsec-l {
    display: block;
    width: 100%;
    overflow: visible;
    color: inherit;
    font-size: var(--type-meta);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-natural);
    font-weight: 750;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
  }

  .mobile-more-glyph {
    display: block;
    height: 18px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .navrow .navsec-lock {
    top: 2px;
    right: 4px;
    font-size: 8px;
  }

  .navrow .navsec-dot {
    top: 3px;
    right: 7px;
  }

  .navsub {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    margin: 8px 0 0;
    padding: 2px 0 5px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .navsubtab {
    flex: 0 0 auto;
    min-height: var(--touch-min);
    padding: 8px 12px;
    border-radius: 11px;
    font-size: var(--type-meta);
    line-height: var(--leading-label);
  }

  .card {
    margin-bottom: 10px;
    padding: 14px;
    border-radius: 14px;
  }

  .card h2,
  .card h3,
  .calv-title h2 {
    letter-spacing: 0;
  }

  .btn,
  .add-row button,
  .shutdown button,
  .settings-actions button,
  .goal-form button[type="submit"],
  .reward-form button[type="submit"] {
    min-height: 44px;
  }

  .btn:active,
  .navsec:active,
  .navsubtab:active,
  .mobile-sheet-entry:active {
    transform: scale(.97);
  }

  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .today-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .today-tabs {
    margin-bottom: var(--sp-3);
  }

  /* Источник уже идёт в том же порядке, что экран и клавиатура: work → support
     → day close. Здесь остаётся только одноколоночная геометрия. */
  .today-work,
  .today-support,
  .today-footer {
    gap: 0;
  }

  .today-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 16px;
    padding: 18px 16px 16px;
  }

  .today-hero::after {
    width: 190px;
    height: 190px;
    right: -82px;
    bottom: -112px;
    opacity: .62;
  }

  .th-kicker {
    font-size: var(--type-meta);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-caps);
  }

  /* Герой ужат: на телефоне он вместе с шапкой съедал ~520px до первого дела.
     Иерархию держат scale/spacing; пользовательский next action остаётся полным. */
  .today-hero h2 {
    margin: 5px 0 4px;
    font-size: var(--type-hero);
    line-height: var(--leading-display);
  }

  .th-sub {
    font-size: var(--type-body);
    line-height: var(--leading-prose);
  }

  .th-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 10px;
  }

  .th-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .th-stats {
    justify-content: flex-start;
    min-width: 0;
  }

  .th-stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 10px;
    text-align: left;
  }

  .th-stat b { font-size: var(--type-heading); }
  .th-stat span {
    margin-top: 4px;
    font-size: var(--type-meta);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-caps);
  }

  .comp-card { padding: 12px 13px; }
  .comp-row { gap: 10px; }
  .comp-art {
    flex: 0 0 64px;
    width: 64px;
    height: 82px;
  }

  .comp-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .comp-actions .btn {
    flex: 1 1 120px;
  }

  .comp-bond-top {
    gap: 6px;
    flex-wrap: wrap;
  }

  .daystat {
    display: flex;
    gap: 10px;
  }

  .daystat span {
    min-width: 0;
    justify-content: flex-start;
    padding: 0 10px 0 0;
    font-size: var(--type-meta);
    line-height: var(--leading-label);
  }

  .add-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .add-row input[name="title"],
  .add-row select[name="skill"],
  .add-row button[type="submit"] {
    grid-column: 1 / -1;
    width: 100%;
  }

  .card-addquest .add-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
  }

  .card-addquest :is(.add-field-title, .add-field-duration),
  .card-addquest .add-row button {
    grid-column: 1 / -1;
  }

  .card-addquest .add-field-skill { grid-column: 1; }
  .card-addquest .add-field-difficulty { grid-column: 2; }
  .card-addquest :is(input, select) {
    font-size: max(16px, var(--type-control));
    line-height: var(--leading-prose);
  }

  .task {
    display: grid;
    grid-template-columns: var(--touch-min) minmax(0, 1fr) auto var(--touch-min) var(--touch-min);
    grid-template-rows: auto auto;
    gap: 6px 7px;
    align-items: center;
    min-width: 0;
    padding: var(--sp-2) 0;
  }

  .task .check { grid-column: 1; grid-row: 1 / 3; }

  /* Тач-зоны в строке квеста. В direct contour остаются completion и overflow;
     сам glyph компактный, но каждая нажимаемая область держит hard floor 42px. */
  .task .check,
  .task .task-more > summary {
    min-width: var(--touch-min); min-height: var(--touch-min);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .task .t-title,
  .task .t-edit-form { grid-column: 2 / 5; grid-row: 1; min-width: 0; }
  .task .task-more { grid-column: 5; grid-row: 1; }
  .task .t-cats { grid-column: 2; grid-row: 2; min-width: 0; }
  .task .t-time { grid-column: 3; grid-row: 2; }
  .task .t-diff { grid-column: 4; grid-row: 2; }
  .task .t-xp,
  .task .t-oath,
  .task .t-oath-btn { grid-column: 5; grid-row: 2; }
  .task > span:not([class]):empty { display: none; }

  .task .t-title,
  .task .t-title-edit {
    overflow-wrap: anywhere;
    line-height: var(--leading-ui);
  }

  .task .t-cats,
  .task .t-time,
  .task .t-title-edit {
    min-height: var(--touch-min);
  }

  .task .t-time {
    min-width: var(--touch-min);
  }

  .task-menu {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 130;
    width: auto;
  }

  .task .t-cats {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--type-meta);
    line-height: var(--leading-label);
  }

  .task .t-time,
  .task .t-diff,
  .task .t-xp {
    font-size: var(--type-meta);
    line-height: var(--leading-label);
    white-space: nowrap;
  }

  .calv-head { gap: 9px; }

  .calv-title {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    width: 100%;
    gap: 8px;
    align-items: center;
  }

  .calv-title h2 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: 19px;
    line-height: 1.15;
    text-align: center;
  }

  .calv-title h2 .muted { font-size: 15px; }

  .calv-title button[data-action="cal-shift"][data-days="-1"],
  .calv-title button[data-action="cal-shift-month"][data-delta="-1"] {
    grid-column: 1;
    grid-row: 1;
  }

  .calv-title button[data-action="cal-shift"][data-days="1"],
  .calv-title button[data-action="cal-shift-month"][data-delta="1"] {
    grid-column: 3;
    grid-row: 1;
  }

  .calv-title .wk-load {
    grid-column: 1 / -1;
    margin: 0 auto;
  }

  .cal-modes {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .cal-modes button {
    min-width: 0;
    min-height: 40px;
    padding-inline: 5px;
  }

  .calv-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  .calv-day {
    min-width: 0;
    padding: 8px 2px;
  }

  .calv-day .cd-wd { font-size: 8px; }
  .calv-day .cd-n { font-size: 17px; }

  .cal-tools {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }

  .cal-tools > button {
    width: 100%;
    min-width: 0;
    padding-inline: 5px;
    font-size: 10.5px;
  }

  .cal-schedule {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 7px;
    align-items: center;
  }

  .cal-schedule > :first-child,
  .cal-schedule button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .cal-schedule #cal-dur { width: 100%; }

  .goal-form,
  .reward-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .goal-form input[name="title"],
  .reward-form input[name="name"],
  .goal-form button[type="submit"],
  .reward-form button[type="submit"] {
    grid-column: 1 / -1;
    width: 100%;
  }

  .habit-edit,
  .skill-edit,
  .settings-actions,
  .theme-row,
  .import-row {
    gap: 8px;
  }

  .settings-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .settings-actions > * { width: 100%; }

  .den-scene {
    height: 276px;
  }

  .den-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .den-actions .btn {
    min-width: 0;
    padding-inline: 6px;
    font-size: 11px;
  }

  /* На остальных mobile-экранах rail с Тенью нет: сохраняем компактный one-tap
     FAB. Более специфичный Today-selector выше скрывает его только рядом с rail. */
  #ai-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    font-size: 21px;
  }
  #ai-fab .fab-streak { font-size: 9.5px; padding: 1px 4px; }

  .user-pill .up-av,
  .comp-rename,
  .today-shell .nudge,
  .today-shell .tts-btn,
  .card-quests .t-backdate,
  .card-quests .t-oath-btn,
  .today-shell .install-banner .del,
  .dayrec-btn,
  .cap-btn,
  .cap-add {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  #toasts,
  .focus-pill {
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 12px;
  }
}

@media (pointer: coarse) {
  .today-shell :is(button, input, select, textarea, summary) {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }
}

@media (max-width: 370px) {
  .gold-pill,
  .streak { padding-inline: 6px; font-size: 11px; }
  .today-hero { padding-inline: 14px; }
  .today-hero h2 { font-size: var(--type-hero); }
  .th-stat { padding-inline: 3px; }
  .th-stat b { font-size: var(--type-heading); }
  .navrow { left: 6px; right: 6px; gap: 2px; }
  .navrow .navsec-l { font-size: var(--type-meta); line-height: var(--leading-label); }
  .mobile-sheet-grid { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .card-quests .task:hover {
    background: transparent;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .today-shell *,
  .today-shell *::before,
  .today-shell *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@keyframes mobile-view-enter {
  from { opacity: .72; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .boot-ouroboros-orbit,
  .boot-ouroboros-jaw,
  .boot-progress i,
  #main.is-view-entering > :first-child,
  #main.is-view-pending::before {
    animation: none !important;
  }

  .satoru-boot,
  .mobile-nav-overlay,
  .mobile-nav-sheet {
    transition: none !important;
  }
}

/* ==========================================================
   Логово v2 — собираемая cut-paper комната
   ========================================================== */
.den-shell { display: grid; gap: 14px; }
.den-card {
  isolation: isolate;
  overflow: hidden;
  padding: 0 !important;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--panel) 96%, #111728);
}
.den-card::before { display: none; }
.den-card > * { position: relative; z-index: auto; }
.den-scene {
  position: relative;
  height: clamp(410px, 41vw, 510px);
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  background: #1b1e2c;
}
.den-room {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(1.04) contrast(1.025);
}
.den-room-art { object-fit: cover; object-position: center; }
.den-room-colorwash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .16;
  background:
    radial-gradient(circle at 18% 66%, color-mix(in srgb, var(--den-room-glow) 70%, transparent), transparent 24%),
    linear-gradient(120deg, color-mix(in srgb, var(--den-room-wall) 42%, transparent), transparent 58%);
  mix-blend-mode: soft-light;
}
.den-room-colorwash[data-phase="morning"] { opacity: .24; background: linear-gradient(120deg, rgba(255,214,148,.38), transparent 58%, rgba(157,199,240,.16)); }
.den-room-colorwash[data-phase="day"] { opacity: .14; background: linear-gradient(120deg, rgba(255,239,205,.22), transparent 58%, rgba(131,188,236,.18)); }
.den-room-colorwash[data-phase="sunset"] { opacity: .26; background: linear-gradient(115deg, rgba(255,151,87,.34), transparent 60%, rgba(116,91,173,.2)); }
.den-room-colorwash[data-phase="night"] { opacity: .16; }
.den-ambient-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.den-fire-glow,
.den-fire-flame,
.den-window-rain,
.den-window-bird,
.den-noise-headphones { position: absolute; opacity: 0; pointer-events: none; }
.den-fire-glow {
  left: 7%;
  bottom: 8%;
  z-index: 2;
  width: 26%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,171,62,.38), rgba(255,103,33,.12) 42%, transparent 74%);
  filter: blur(8px);
}
.den-fire-flame {
  left: 16.2%;
  bottom: 20.5%;
  z-index: 4;
  width: 42px;
  height: 54px;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 13px rgba(255,133,39,.72));
}
.den-fire-flame::before,
.den-fire-flame i,
.den-fire-flame b {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  content: "";
  border-radius: 56% 44% 62% 38% / 68% 52% 48% 32%;
  transform: translateX(-50%) rotate(45deg);
}
.den-fire-flame::before { width: 34px; height: 34px; background: #e86c2b; }
.den-fire-flame i { width: 24px; height: 24px; bottom: 3px; background: #ffb43d; }
.den-fire-flame b { width: 13px; height: 13px; bottom: 6px; background: #fff0a2; }
.den-window-rain {
  right: 8.4%;
  top: 10.2%;
  z-index: 2;
  width: 22.4%;
  height: 49%;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(54,79,116,.18), rgba(28,40,70,.3));
}
.den-window-rain i {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: -24%;
  width: 1.5px;
  height: 29%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(218,235,255,.9));
  transform: rotate(12deg);
  animation: denRainDrop .72s linear infinite;
  animation-delay: var(--d);
}
.den-window-bird {
  right: 14.4%;
  top: 41%;
  z-index: 4;
  width: 58px;
  height: 58px;
  color: #20243a;
  filter: drop-shadow(0 2px 2px rgba(255,255,255,.25));
  transform-origin: 50% 100%;
}
.den-bird-glyph,
.den-headphone-glyph { width: 100%; height: 100%; }
.den-noise-headphones {
  left: 50%;
  top: 39%;
  z-index: 8;
  width: 64px;
  height: 64px;
  color: #d7c38c;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 7px rgba(7,8,18,.6));
}
.den-scene[data-den-ambient="fire"] .den-fire-glow,
.den-scene[data-den-ambient="fire"] .den-fire-flame,
.den-scene[data-den-ambient="rain"] .den-window-rain,
.den-scene[data-den-ambient="birds"] .den-window-bird,
.den-scene[data-den-ambient="noise"] .den-noise-headphones { opacity: 1; }
.den-scene[data-den-ambient="fire"] .den-fire-glow { animation: denFireGlow 1.7s ease-in-out infinite; }
.den-scene[data-den-ambient="fire"] .den-fire-flame { animation: denFireFlame .52s ease-in-out infinite alternate; }
.den-scene[data-den-ambient="birds"] .den-window-bird { animation: denBirdPerch 3.6s ease-in-out infinite; }
.den-scene[data-den-ambient="noise"] .den-noise-headphones { animation: denHeadphonePulse 2.7s ease-in-out infinite; }
.den-room-vignette {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,9,16,.28), transparent 17%, transparent 82%, rgba(7,9,16,.24)),
    linear-gradient(180deg, rgba(7,9,16,.08), transparent 58%, rgba(7,9,16,.24));
  box-shadow: inset 0 1px rgba(255,255,255,.07);
}
.den-object {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 11px 12px rgba(4,6,12,.34));
  transform-origin: 50% 85%;
}
.den-object-wall { left: 9%; top: 12%; z-index: 1; width: 18%; }
.den-object-floor { left: 31%; bottom: -5%; z-index: 1; width: 38%; transform: scaleY(.42); transform-origin: 50% 100%; }
.den-object-light { right: 27%; top: 19%; z-index: 3; width: 11%; }
.den-object-seat { left: 7%; bottom: 2%; z-index: 4; width: 21%; }
.den-object-surface { right: 7%; bottom: 3%; z-index: 4; width: 20%; }
.den-object-comfort { left: 0; bottom: 18%; z-index: 3; width: 13%; }
.den-object-keepsake { right: 0; bottom: 18%; z-index: 3; width: 13%; }
.den-object[data-den-id="wall-map"] { left: 36%; top: 10%; width: 25%; }
.den-object[data-den-id="light-lantern"] { left: 27%; right: auto; top: 0; width: 8%; }
.den-object[data-den-id="seat-cushion"] { left: auto; right: 8%; bottom: 25%; width: 28%; }
.den-object[data-den-id="surface-crate"] { right: 6%; bottom: 2%; width: 22%; }
.den-object[data-den-id="comfort-bonsai"] { left: 1%; bottom: 17%; width: 13%; }
.den-object[data-den-id="keepsake-blades"] { right: 1%; bottom: 18%; width: 12%; }
.den-object[data-den-id="floor-traveller"] {
  left: 31%;
  bottom: 0;
  width: 38%;
  transform: none;
  transform-origin: 50% 100%;
}
.den-avatar.den-avatar-raster {
  left: 50%;
  bottom: -18px;
  z-index: 7;
  width: clamp(188px, 22vw, 232px);
  transform: translateX(-50%);
}
.den-avatar-raster .avatar-art-stack { width: 100%; filter: drop-shadow(0 14px 15px rgba(0,0,0,.37)); }
.den-avatar-shadow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 9px;
  z-index: -1;
  height: 9%;
  border-radius: 50%;
  background: rgba(7,9,16,.3);
  filter: blur(7px);
}
.den-companion {
  position: absolute;
  right: 19%;
  top: 30%;
  z-index: 6;
  width: 116px;
  height: 146px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  animation: denCompanionFloat 4.4s ease-in-out infinite;
}
.den-companion .comp-video,
.den-companion img,
.den-companion video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 11px 14px rgba(7,6,18,.48));
}
.den-companion .shadow-rig-aura-back { opacity: .52; }
.den-companion .shadow-rig-aura-front { opacity: .12; }
.den-companion .shadow-rig-orbit { opacity: .18; }
.den-companion .shadow-rig-orbit-b { opacity: .1; }
.den-companion-name {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(8,10,20,.68);
  color: rgba(255,255,255,.86);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(7px);
}
.den-pet {
  position: absolute;
  z-index: 7;
  width: 70px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  filter: drop-shadow(0 8px 9px rgba(4,6,12,.32));
}
.den-pet-0 { left: 27%; bottom: 3%; width: 70px; }
.den-pet-1 { right: 25%; bottom: 2%; width: 68px; }
.den-pet-2 { right: 10%; bottom: 4%; width: 62px; }
.den-pet-0.den-pet-fortune { left: 20%; bottom: -3%; width: 137px; }
.den-pet-1.den-pet-fortune { right: 18%; bottom: -3%; width: 132px; }
.den-pet-2.den-pet-fortune { right: 3%; bottom: -3%; width: 124px; }
.den-pet.is-reacting { animation: denPetReact .95s cubic-bezier(.2,.85,.24,1); }
.den-tag {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(8,10,20,.62);
  color: #fff;
  box-shadow: 0 9px 24px rgba(0,0,0,.19);
  backdrop-filter: blur(10px);
}
.den-tag small { color: rgba(255,255,255,.66); font-size: 10px; }
.den-scene-tools {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 12;
  display: flex;
  gap: 7px;
}
.den-scene-tools button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: rgba(8,10,20,.62);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.den-scene-tools button.is-active { background: color-mix(in srgb, var(--accent) 72%, rgba(8,10,20,.7)); border-color: rgba(255,255,255,.3); }
.den-tool-glyph { width: 16px; height: 16px; }
.den-life-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px 8px;
}
.den-mood {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
}
.den-mood strong { color: var(--text); font-size: 12px; }
.den-mood span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.den-stats { display: flex; flex: 0 0 auto; gap: 7px; padding: 0; }
.den-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}
.den-stat-glyph { width: 16px; height: 16px; }
.den-focus {
  margin: 3px 14px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel2) 90%, transparent);
}
.den-focus > span { display: inline-flex; align-items: center; gap: 7px; }
.den-row-glyph { width: 18px; height: 18px; }
.den-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 14px 16px; }
.den-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }

.ambient-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ambient-choice { display: inline-flex; align-items: center; gap: 7px; }
.ambient-choice.needs-audio-tap {
  border-color: color-mix(in srgb, var(--accent-warm) 72%, var(--line-soft));
  animation: ambient-needs-tap 1.35s ease-in-out infinite;
}
@keyframes ambient-needs-tap {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-warm) 0%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-warm) 18%, transparent); }
}

.tts-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel2) 88%, transparent);
}
.tts-settings label { display: grid; gap: 7px; min-width: 0; }
.tts-settings label > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.tts-settings label b { color: var(--text); font-variant-numeric: tabular-nums; }
.tts-settings select { width: 100%; min-width: 0; }
.tts-settings input[type="range"] { width: 100%; }
.tts-settings .btn { justify-self: start; }
.tts-settings small { grid-column: 1 / -1; line-height: 1.45; }
.shadow-voice-status { display: grid; gap: 4px; min-width: 0; }
.shadow-voice-status small { grid-column: auto; color: var(--muted); }
.shadow-voice-picker {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.shadow-voice-picker legend {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.shadow-voice-picker small { display: block; margin-top: 7px; color: var(--muted); line-height: 1.4; }
.shadow-voice-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shadow-voice-choice {
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.shadow-voice-choice.active {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
  color: var(--text);
}
.shadow-voice-choice:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 48%, transparent); outline-offset: 2px; }
.voice-mode { display: inline-flex; align-items: center; gap: 7px; color: var(--text); }
.voice-mode::before {
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 14%, transparent);
}
.voice-mode-cloud::before {
  background: var(--good);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 18%, transparent), 0 0 10px color-mix(in srgb, var(--good) 45%, transparent);
}
.voice-mode-fallback::before {
  background: var(--warn);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent);
}
@media (max-width: 760px) {
  .tts-settings { grid-template-columns: 1fr; }
  .tts-settings small { grid-column: 1; }
}

.den-editor {
  display: grid;
  gap: 20px;
  padding: 20px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(500px 240px at 100% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel2) 88%, var(--panel));
  animation: denEditorOpen .24s ease-out;
}
.den-editor-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.den-editor-title span { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.den-editor-title h3 { margin: 3px 0 0; font-size: 18px; }
.den-editor-group { display: grid; gap: 9px; }
.den-editor-group h4 { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.den-editor-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.den-clear {
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}
.den-theme-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.den-theme-choice {
  display: grid;
  grid-template-columns: 56px minmax(0,1fr);
  grid-template-rows: auto auto;
  gap: 7px 9px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.den-theme-choice.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.den-theme-choice.is-locked { opacity: .76; }
.den-theme-preview {
  position: relative;
  grid-row: 1 / 3;
  width: 56px;
  height: 47px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 9px;
  background: var(--den-preview-wall);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--den-preview-glow) 20%, transparent);
}
.den-theme-preview i { position: absolute; inset: 60% 0 0; background: var(--den-preview-floor); transform: skewY(-4deg); transform-origin: left top; }
.den-theme-preview b { position: absolute; right: 8px; top: 8px; width: 17px; height: 16px; border: 2px solid color-mix(in srgb, var(--den-preview-glow) 65%, white); border-radius: 3px; }
.den-theme-choice strong,
.den-theme-choice small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.den-theme-choice strong { font-size: 11px; }
.den-theme-choice small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.den-choice-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.den-choice-pro { color: #d7b86f; }
.den-mini-glyph { width: 13px; height: 13px; }
.den-item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.den-item-choice {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 78px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.den-item-choice.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.den-item-choice.is-locked .den-item-art { filter: saturate(.55) brightness(.75); }
.den-item-art {
  display: grid;
  place-items: center;
  width: 84px;
  height: 76px;
  overflow: hidden;
  border-radius: 9px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, var(--panel2)), var(--panel2));
}
.den-item-art img { width: 78px; height: 70px; object-fit: contain; }
.den-item-copy { display: grid; gap: 7px; min-width: 0; }
.den-item-copy strong { overflow: hidden; color: var(--text); font-size: 11px; line-height: 1.2; text-overflow: ellipsis; }
.den-editor-compact { grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 9px 12px; }
.den-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.den-pill {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.den-pill.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--text); }
.den-editor-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

@keyframes denCompanionFloat { 0%,100% { transform: translateY(0) rotate(-.7deg); } 50% { transform: translateY(-8px) rotate(.8deg); } }
@keyframes denPetReact { 0%,100% { transform: translateY(0) scale(1); } 28% { transform: translateY(-13px) scale(1.06,.96); } 58% { transform: translateY(1px) scale(.97,1.04); } 78% { transform: translateY(-5px) scale(1.02,.99); } }
@keyframes denEditorOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes denObjectFloat { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-6px) rotate(.6deg); } }
@keyframes denObjectBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018,.992); } }
@keyframes denObjectGlint { 0%,72%,100% { filter: drop-shadow(0 11px 12px rgba(4,6,12,.34)) brightness(1); } 80% { filter: drop-shadow(0 11px 12px rgba(4,6,12,.34)) brightness(1.23) saturate(1.12); } }
@keyframes denObjectFire { 0%,100% { filter: drop-shadow(0 9px 14px rgba(255,142,46,.24)) brightness(1); } 50% { filter: drop-shadow(0 7px 18px rgba(255,142,46,.5)) brightness(1.12); transform: scaleY(1.018); } }
@keyframes denObjectSoot { 0%,100% { transform: translate(0,0) rotate(-1deg); } 33% { transform: translate(2px,-5px) rotate(1deg); } 66% { transform: translate(-2px,-2px) rotate(-.4deg); } }
@keyframes denObjectSteam { 0%,100% { transform: translateY(0); filter: blur(0); } 50% { transform: translateY(-3px); filter: brightness(1.09); } }
@keyframes denObjectLeaf { 0%,100% { transform: rotate(-.4deg); } 50% { transform: rotate(.7deg); } }
@keyframes denObjectLantern { 0%,100% { transform: rotate(-1deg); filter: drop-shadow(0 8px 15px rgba(255,195,86,.3)); } 50% { transform: rotate(1.2deg); filter: drop-shadow(0 8px 21px rgba(255,195,86,.55)); } }
@keyframes denObjectCape { 0%,100% { transform: skewX(0) rotate(-.3deg); } 50% { transform: skewX(-1.3deg) rotate(.6deg); } }
@keyframes denObjectWatch { 0%,82%,100% { filter: brightness(1); } 88% { filter: brightness(1.32) hue-rotate(7deg); } }
@keyframes denRainDrop { from { transform: translateY(-20%) rotate(12deg); } to { transform: translateY(480%) rotate(12deg); } }
@keyframes denFireGlow { 0%,100% { transform: scale(.96); opacity: .74; } 50% { transform: scale(1.08,1.03); opacity: 1; } }
@keyframes denFireFlame { from { transform: scale(.92,1.03) rotate(-1deg); } to { transform: scale(1.05,.93) rotate(1.6deg); } }
@keyframes denBirdPerch { 0%,68%,100% { transform: translateY(0) rotate(0); } 72% { transform: translateY(-3px) rotate(-3deg); } 77% { transform: translateY(0) rotate(3deg); } 82% { transform: translateY(-2px) rotate(-1deg); } }
@keyframes denHeadphonePulse { 0%,100% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 5px 7px rgba(7,8,18,.6)); } 50% { transform: translateX(-50%) scale(1.035); filter: drop-shadow(0 5px 12px rgba(108,140,255,.55)); } }
.den-object[data-den-motion="float"] { animation: denObjectFloat 4s ease-in-out infinite; }
.den-object[data-den-motion="breathe"] { animation: denObjectBreathe 4.8s ease-in-out infinite; }
.den-object[data-den-motion="glint"],
.den-object[data-den-motion="bubble"],
.den-object[data-den-motion="drift"] { animation: denObjectGlint 6.4s ease-in-out infinite; }
.den-object[data-den-motion="fire"] { animation: denObjectFire 1.75s ease-in-out infinite; }
.den-object[data-den-motion="soot"] { animation: denObjectSoot 4.4s ease-in-out infinite; }
.den-object[data-den-motion="steam"] { animation: denObjectSteam 3.3s ease-in-out infinite; }
.den-object[data-den-motion="leaf"] { animation: denObjectLeaf 5.2s ease-in-out infinite; }
.den-object[data-den-motion="lantern"] { animation: denObjectLantern 3.2s ease-in-out infinite; }
.den-object[data-den-motion="cape"] { animation: denObjectCape 4.1s ease-in-out infinite; }
.den-object[data-den-motion="watch"] { animation: denObjectWatch 5.7s ease-in-out infinite; }

.navsub-icon { width: 17px; height: 17px; margin-right: 6px; vertical-align: -4px; }

@media (max-width: 720px) {
  .den-scene { height: 390px; }
  .den-object-wall { left: 7%; top: 13%; width: 22%; }
  .den-object-floor { left: 24%; bottom: -2%; width: 52%; }
  .den-object-light { right: 22%; top: 20%; width: 14%; }
  .den-object-seat { left: 2%; bottom: 5%; width: 27%; }
  .den-object-surface { right: 2%; bottom: 6%; width: 25%; }
  .den-object-comfort { left: -1%; bottom: 25%; width: 16%; }
  .den-object-keepsake { right: -1%; bottom: 25%; width: 16%; }
  .den-object[data-den-id="wall-map"] { left: 34%; top: 9%; width: 29%; }
  .den-object[data-den-id="light-lantern"] { left: 25%; top: 0; width: 10%; }
  .den-object[data-den-id="seat-cushion"] { right: 4%; bottom: 25%; width: 34%; }
  .den-object[data-den-id="surface-crate"] { right: 1%; bottom: 4%; width: 26%; }
  .den-object[data-den-id="comfort-bonsai"] { left: 0; bottom: 20%; width: 16%; }
  .den-object[data-den-id="keepsake-blades"] { right: 0; bottom: 22%; width: 15%; }
  .den-object[data-den-id="floor-traveller"] { left: 25%; bottom: 1%; width: 50%; transform: none; }
  .den-avatar.den-avatar-raster { bottom: -14px; width: 184px; }
  .den-companion { right: 12%; top: 30%; width: 76px; height: 101px; }
  .den-pet-0 { left: 20%; bottom: 3%; }
  .den-pet-1 { right: 18%; bottom: 3%; }
  .den-pet-2 { right: 2%; bottom: 4%; }
  .den-pet-0.den-pet-fortune { left: 11%; width: 122px; }
  .den-pet-1.den-pet-fortune { right: 10%; width: 118px; }
  .den-pet-2.den-pet-fortune { right: -4%; width: 112px; }
  .den-life-strip { align-items: flex-start; flex-direction: column; gap: 9px; }
  .den-mood span { white-space: normal; }
  .den-stats { width: 100%; }
  .den-stats span { flex: 1; justify-content: center; }
  .den-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .den-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .den-editor-compact { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .den-scene { height: 344px; }
  .den-tag { left: 10px; top: 10px; padding: 6px 8px; }
  .den-tag span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .den-scene-tools { right: 10px; top: 10px; }
  .den-scene-tools button { width: 34px; padding: 7px; justify-content: center; }
  .den-scene-tools button > span:not(.satoru-icon) { display: none; }
  .den-object-comfort,
  .den-object-keepsake { bottom: 22%; }
  .den-object[data-den-id="wall-map"] { left: 32%; width: 33%; }
  .den-object[data-den-id="light-lantern"] { left: 23%; width: 11%; }
  .den-object[data-den-id="seat-cushion"] { right: 2%; bottom: 26%; width: 38%; }
  .den-object[data-den-id="surface-crate"] { right: -1%; bottom: 4%; width: 29%; }
  .den-object[data-den-id="comfort-bonsai"] { bottom: 22%; width: 17%; }
  .den-object[data-den-id="keepsake-blades"] { bottom: 23%; width: 16%; }
  .den-object[data-den-id="floor-traveller"] { left: 22%; bottom: 1%; width: 56%; transform: none; }
  .den-avatar.den-avatar-raster { width: 166px; }
  .den-companion { right: 8%; top: 31%; width: 78px; height: 101px; }
  .den-pet { width: 57px; }
  .den-pet-0 { left: 16%; }
  .den-pet-1 { right: 16%; }
  .den-pet-2 { right: 0; }
  .den-pet-0.den-pet-fortune { left: 5%; width: 105px; }
  .den-pet-1.den-pet-fortune { right: 5%; width: 102px; }
  .den-pet-2.den-pet-fortune { right: -6%; width: 98px; }
  .den-actions { gap: 6px; }
  .den-actions .btn { padding-inline: 5px; font-size: 10.5px; }
  .den-editor { padding: 16px 12px; }
  .den-editor-title { align-items: stretch; flex-direction: column; }
  .den-theme-grid,
  .den-item-grid { grid-template-columns: 1fr; }
  .den-item-choice { grid-template-columns: 62px 1fr; min-height: 70px; }
  .den-item-art { width: 62px; height: 58px; }
  .den-item-art img { width: 56px; height: 56px; }
}

/* Den v4 — один world-space 1536×864. Этот блок намеренно стоит ПОСЛЕ
   breakpoint-правил v3 и отменяет их: при повороте телефона масштабируется вся
   комната целиком, а не каждый предмет по своему набору координат. */
.den-scene {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
}
.den-room-art { object-fit: contain; object-position: 50% 50%; }
.den-room-master {
  opacity: 1;
  transition: opacity .24s ease;
  will-change: opacity;
}
.den-room-master.is-den-master-incoming { opacity: 0; }
.den-room-master.is-den-master-incoming.is-den-master-ready { opacity: 1; }
.den-room-master.is-den-master-outgoing { opacity: 0; }
/* Coherent v5 masters already contain their window, furniture and physical
   lighting. Ambient remains audio-only until locked-camera videos pass QA. */
.den-scene[data-den-renderer="v5"] .den-window-sky,
.den-scene[data-den-renderer="v5"] .den-room-colorwash,
.den-scene[data-den-renderer="v5"] .den-practical-light,
.den-ambient-visual,
.den-practical-light-fireplace { display: none !important; }
.den-window-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.den-window-sky-fill { fill: rgba(8,20,52,.04); transition: fill 1.1s ease, opacity 1.1s ease; }
.den-window-sun,
.den-window-clouds { opacity: 0; transition: opacity 1.1s ease; }
.den-window-sun { fill: #ffe5a0; filter: drop-shadow(0 0 17px rgba(255,221,139,.72)); }
.den-window-clouds { fill: rgba(255,255,255,.35); }
.den-window-sky[data-phase="morning"] .den-window-sky-fill { fill: rgba(174,211,246,.5); }
.den-window-sky[data-phase="morning"] .den-window-sun,
.den-window-sky[data-phase="morning"] .den-window-clouds { opacity: .7; }
.den-window-sky[data-phase="day"] .den-window-sky-fill { fill: rgba(151,210,255,.58); }
.den-window-sky[data-phase="day"] .den-window-sun,
.den-window-sky[data-phase="day"] .den-window-clouds { opacity: .88; }
.den-window-sky[data-phase="sunset"] .den-window-sky-fill { fill: rgba(242,139,100,.5); }
.den-window-sky[data-phase="sunset"] .den-window-sun { opacity: .82; fill: #ffbd72; }
.den-practical-light {
  position: absolute;
  z-index: 5;
  display: block;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.den-practical-light-lantern {
  left: 18%;
  top: 22%;
  width: 27%;
  height: 55%;
  background: radial-gradient(ellipse at 55% 20%, rgba(255,218,137,.42), rgba(255,164,68,.14) 38%, transparent 72%);
  filter: blur(5px);
}
.den-scene:has(.den-object[data-den-id="light-lantern"]) .den-practical-light-lantern {
  opacity: .72;
  animation: denPracticalLight 3.4s ease-in-out infinite;
}
.den-practical-light-fireplace {
  left: 4%;
  top: 42%;
  width: 36%;
  height: 50%;
  background: radial-gradient(ellipse at 48% 62%, rgba(255,180,72,.5), rgba(255,92,31,.14) 36%, transparent 72%);
  filter: blur(7px);
}
.den-scene[data-den-ambient="fire"] .den-practical-light-fireplace {
  opacity: .78;
  animation: denPracticalFireLight 1.45s ease-in-out infinite;
}
.den-fireplace-base {
  position: absolute;
  left: 11.9%;
  top: 60.4%;
  z-index: 3;
  display: block;
  width: 17.2%;
  pointer-events: none;
}
.den-fireplace-base img,
.den-fire-flame img,
.den-window-bird > img,
.den-noise-headphones > img { display: block; width: 100%; height: auto; }
.den-fire-glow {
  left: 7.5% !important;
  top: 48% !important;
  bottom: auto !important;
  width: 28% !important;
  height: 37% !important;
}
.den-fire-flame {
  left: 12.55% !important;
  top: 59.1% !important;
  bottom: auto !important;
  width: 15.8% !important;
  height: auto !important;
  transform-origin: 50% 88% !important;
  filter: drop-shadow(0 0 8px rgba(255,126,37,.52)) !important;
}
.den-fire-flame::before,
.den-fire-flame > i,
.den-fire-flame > b { display: none !important; }
.den-window-bird {
  left: 80.2% !important;
  right: auto !important;
  top: 41.6% !important;
  width: 9.2% !important;
  height: auto !important;
  color: inherit;
  filter: drop-shadow(0 3px 4px rgba(8,5,2,.45)) !important;
  transform-origin: 48% 88% !important;
}
.den-bird-song {
  position: absolute;
  left: -8%;
  top: 24%;
  width: 36%;
  height: 34%;
  pointer-events: none;
}
.den-bird-song i,
.den-bird-song b {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e9c56f;
  box-shadow: 0 1px 2px rgba(8,5,2,.48);
  opacity: 0;
}
.den-bird-song i::after,
.den-bird-song b::after {
  position: absolute;
  left: 70%;
  bottom: 55%;
  width: 2px;
  height: 13px;
  content: "";
  border-radius: 999px;
  background: #e9c56f;
  transform: rotate(-8deg);
  transform-origin: 50% 100%;
}
.den-bird-song i { left: 55%; top: 58%; }
.den-bird-song b { left: 22%; top: 78%; transform: scale(.78); }
.den-scene[data-den-ambient="birds"] .den-bird-song i { animation: denBirdNote 2.2s ease-out infinite .25s; }
.den-scene[data-den-ambient="birds"] .den-bird-song b { animation: denBirdNote 2.2s ease-out infinite 1.25s; }
.den-noise-headphones {
  left: 47.15% !important;
  top: 41.6% !important;
  width: 5.8% !important;
  height: auto !important;
  transform: none !important;
  filter: drop-shadow(0 4px 5px rgba(7,8,18,.52)) !important;
}
.den-scene[data-den-ambient="noise"] .den-noise-headphones { animation: denHeadphoneWear 2.7s ease-in-out infinite; }
.den-object-v4 {
  left: var(--den-x) !important;
  right: auto !important;
  top: var(--den-y) !important;
  bottom: auto !important;
  width: var(--den-w) !important;
  height: var(--den-h) !important;
  z-index: var(--den-z) !important;
  transform: var(--den-transform, none);
  transform-origin: var(--den-pivot-x, 50%) var(--den-pivot-y, 50%);
}
.den-object-v4[data-den-motion="still"] { animation: none !important; }
.den-object-v4[data-den-id="wall-map"] { filter: drop-shadow(2px 8px 9px rgba(18,9,3,.34)); }
.den-object-v4[data-den-id="surface-crate"],
.den-object-v4[data-den-id="keepsake-blades"],
.den-object-v4[data-den-id="comfort-bonsai"] { filter: drop-shadow(0 8px 7px rgba(7,4,2,.42)); }

.den-avatar.den-avatar-raster {
  left: 38.2813% !important;
  top: 31.9444% !important;
  bottom: auto !important;
  width: 27.5% !important;
  height: 69%;
  transform: none !important;
}
.den-companion {
  left: 69.2057% !important;
  right: auto !important;
  top: 26.1574% !important;
  width: 11.3281% !important;
  height: 25.3472% !important;
}
.den-pet { right: auto !important; bottom: auto !important; }
.den-pet-0 { left: 23.1771% !important; top: 86.5741% !important; width: 6.7708% !important; }
.den-pet-1 { left: 62.6953% !important; top: 87.5% !important; width: 6.1198% !important; }
.den-pet-2 { left: 67.9688% !important; top: 88.3102% !important; width: 5.599% !important; }
.den-pet-0.den-pet-fortune { left: 20% !important; top: auto !important; bottom: 1.6% !important; width: 8.92% !important; }
.den-pet-1.den-pet-fortune { left: 61% !important; top: auto !important; bottom: 1.6% !important; width: 8.6% !important; }
.den-pet-2.den-pet-fortune { left: 69% !important; top: auto !important; bottom: 1.7% !important; width: 8.1% !important; }
.den-window-rain {
  left: 70.5729% !important;
  right: auto !important;
  top: 10.7639% !important;
  width: 21.875% !important;
  height: 48.1481% !important;
  border-radius: 50% 50% 3% 3% / 30% 30% 3% 3%;
}
@keyframes denPracticalLight {
  0%,100% { opacity: .62; transform: scale(.985); }
  48% { opacity: .78; transform: scale(1.015); }
}
@keyframes denPracticalFireLight {
  0%,100% { opacity: .66; transform: scale(.98,1); }
  32% { opacity: .82; transform: scale(1.025,.985); }
  67% { opacity: .72; transform: scale(.995,1.025); }
}
@keyframes denBirdNote {
  0% { opacity: 0; transform: translate(0,4px) scale(.55); }
  20% { opacity: .9; }
  72% { opacity: .72; }
  100% { opacity: 0; transform: translate(-10px,-18px) scale(1.08); }
}
@keyframes denHeadphoneWear {
  0%,100% { transform: scale(1); filter: drop-shadow(0 4px 5px rgba(7,8,18,.52)); }
  50% { transform: scale(1.025); filter: drop-shadow(0 4px 9px rgba(82,174,188,.5)); }
}

@media (prefers-reduced-motion: reduce) {
  .den-companion,
  .den-object,
  .den-pet.is-reacting,
  .den-editor,
  .den-fire-glow,
  .den-fire-flame,
  .den-window-rain i,
  .den-window-bird,
  .den-noise-headphones,
  .den-practical-light,
  .den-room-master { animation: none !important; transition: none !important; }
}

/* ============================================================
   Shadow Rig v2 runtime + v3 canonical evolution art
   Four normalized 1024px forms × ten runtime states.
   ============================================================ */
.shadow-rig {
  --shadow-violet: #a987ff;
  --shadow-violet-deep: #3b275e;
  --shadow-glow: rgba(169, 135, 255, .55);
  --shadow-warm: #ffd482;
  --shadow-cool: #80c9ff;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 1px;
  min-height: 1px;
  isolation: isolate;
  pointer-events: none;
}
.shadow-rig > span {
  position: absolute;
  display: block;
  pointer-events: none;
}
.shadow-rig-body {
  inset: 0;
  z-index: 4;
  transform-origin: 50% 72%;
  animation: shadowRigFloat 4.8s ease-in-out infinite;
}
.shadow-rig-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 8px rgba(10, 7, 22, .34));
  transform-origin: 50% 52%;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.shadow-form-spark .shadow-rig-image { transform: scale(1.72); }
.shadow-form-spirit .shadow-rig-image { transform: scale(1.5); }
.shadow-form-guardian .shadow-rig-image { transform: scale(1.22); }
.shadow-form-keeper .shadow-rig-image { transform: scale(1.08); }
.shadow-rig-ground {
  z-index: 1;
  left: 22%;
  right: 22%;
  bottom: 5%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(43, 26, 69, .52), transparent 72%);
  filter: blur(2px);
  animation: shadowRigGround 4.8s ease-in-out infinite;
}
.shadow-rig-aura {
  z-index: 2;
  left: 13%;
  top: 11%;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.shadow-rig-aura-back {
  background: radial-gradient(circle, var(--shadow-glow), rgba(94, 60, 145, .11) 48%, transparent 70%);
  filter: blur(5px);
  animation: shadowRigBreathe 3.8s ease-in-out infinite;
}
.shadow-rig-aura-front {
  z-index: 6;
  border: 1px solid rgba(199, 178, 255, .2);
  box-shadow: inset 0 0 13px rgba(182, 151, 255, .08);
  animation: shadowRigHalo 5.6s linear infinite;
}
.shadow-rig-orbit {
  z-index: 3;
  left: 10%;
  top: 9%;
  width: 80%;
  aspect-ratio: 1;
  border: 1px solid rgba(181, 150, 255, .18);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: shadowRigOrbit 9s linear infinite;
}
.shadow-rig-orbit-b {
  left: 18%;
  top: 17%;
  width: 64%;
  opacity: .7;
  animation-duration: 6.4s;
  animation-direction: reverse;
}
.shadow-rig-orbit i {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c9b2ff;
  box-shadow: 0 0 7px var(--shadow-glow);
}
.shadow-rig-orbit i:nth-child(1) { left: 10%; top: 22%; }
.shadow-rig-orbit i:nth-child(2) { right: 8%; top: 38%; transform: scale(.65); }
.shadow-rig-orbit i:nth-child(3) { left: 51%; bottom: -2px; transform: scale(.48); }
.shadow-rig-motes {
  z-index: 7;
  inset: 6% 8%;
}
.shadow-rig-motes i {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 40% 60% 45% 55%;
  background: #cbb6ff;
  box-shadow: 0 0 6px rgba(186, 153, 255, .62);
  opacity: .48;
  animation: shadowRigMote 3.7s ease-in-out infinite;
}
.shadow-rig-motes i:nth-child(1) { left: 8%; top: 55%; animation-delay: -.4s; }
.shadow-rig-motes i:nth-child(2) { left: 25%; top: 15%; animation-delay: -1.7s; transform: scale(.62); }
.shadow-rig-motes i:nth-child(3) { right: 9%; top: 39%; animation-delay: -2.5s; }
.shadow-rig-motes i:nth-child(4) { right: 19%; bottom: 15%; animation-delay: -.9s; transform: scale(.7); }
.shadow-rig-motes i:nth-child(5) { left: 40%; bottom: 5%; animation-delay: -3.1s; transform: scale(.5); }
.shadow-rig-motes i:nth-child(6) { right: 35%; top: 6%; animation-delay: -1.2s; transform: scale(.45); }

.shadow-rig-voice {
  z-index: 8;
  right: -4%;
  top: 26%;
  width: 34%;
  height: 35%;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .18s ease, transform .18s ease;
}
.shadow-rig-voice i {
  position: absolute;
  left: 3%;
  top: 50%;
  display: block;
  width: 50%;
  height: 28%;
  border: 2px solid rgba(211, 193, 255, .84);
  border-left: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 0 50% 50% 0;
  transform: translateY(-50%);
  animation: shadowRigVoice 1s ease-out infinite;
}
.shadow-rig-voice i:nth-child(2) { width: 72%; animation-delay: -.2s; opacity: .66; }
.shadow-rig-voice i:nth-child(3) { width: 94%; animation-delay: -.4s; opacity: .38; }
.shadow-rig-voice b {
  position: absolute;
  left: 0;
  top: 47%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f1eaff;
  box-shadow: 0 0 9px #b995ff;
  animation: shadowRigVoiceCore .55s ease-in-out infinite alternate;
}
.shadow-rig-thought {
  z-index: 8;
  right: 1%;
  top: 18%;
  width: 28%;
  height: 23%;
  opacity: 0;
}
.shadow-rig-thought i {
  position: absolute;
  bottom: 8%;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9c9ff;
  box-shadow: 0 0 7px var(--shadow-glow);
  animation: shadowRigThink 1.2s ease-in-out infinite;
}
.shadow-rig-thought i:nth-child(1) { left: 6%; width: 4px; height: 4px; animation-delay: -.2s; }
.shadow-rig-thought i:nth-child(2) { left: 37%; width: 6px; height: 6px; animation-delay: -.4s; }
.shadow-rig-thought i:nth-child(3) { right: 4%; bottom: 42%; animation-delay: -.6s; }
.shadow-rig-care {
  z-index: 8;
  right: 4%;
  top: 18%;
  width: 22%;
  aspect-ratio: 1;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255, 204, 117, .55));
}
.shadow-rig-care i,
.shadow-rig-care i::before,
.shadow-rig-care i::after {
  position: absolute;
  display: block;
  content: "";
  background: var(--shadow-warm);
}
.shadow-rig-care i {
  left: 28%;
  top: 35%;
  width: 38%;
  height: 38%;
  transform: rotate(45deg);
  border-radius: 4px 0 6px;
  animation: shadowRigHeart 1.7s ease-in-out infinite;
}
.shadow-rig-care i::before,
.shadow-rig-care i::after {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.shadow-rig-care i::before { left: -52%; top: 0; }
.shadow-rig-care i::after { left: 0; top: -52%; }
.shadow-rig-sleep {
  z-index: 8;
  right: 1%;
  top: 11%;
  width: 30%;
  height: 35%;
  opacity: 0;
}
.shadow-rig-sleep i {
  position: absolute;
  display: block;
  width: 10px;
  height: 5px;
  border-top: 2px solid #cbb7ff;
  border-right: 2px solid #cbb7ff;
  transform: skewX(-28deg);
  animation: shadowRigSleep 2.2s ease-out infinite;
}
.shadow-rig-sleep i:nth-child(1) { left: 4%; bottom: 3%; transform: scale(.6) skewX(-28deg); }
.shadow-rig-sleep i:nth-child(2) { left: 38%; bottom: 31%; animation-delay: -.7s; transform: scale(.8) skewX(-28deg); }
.shadow-rig-sleep i:nth-child(3) { right: 3%; top: 2%; animation-delay: -1.4s; }

/* state choreography */
.shadow-state-listening .shadow-rig-voice,
:root[data-shadow-mode="listening"] .shadow-rig .shadow-rig-voice {
  opacity: .62;
  transform: scale(.78) rotate(180deg);
  right: auto;
  left: -4%;
}
.shadow-state-listening .shadow-rig-voice i,
:root[data-shadow-mode="listening"] .shadow-rig .shadow-rig-voice i {
  animation-duration: 1.6s;
}
.shadow-state-thinking .shadow-rig-thought,
:root[data-shadow-mode="thinking"] .shadow-rig .shadow-rig-thought { opacity: 1; }
.shadow-state-thinking .shadow-rig-body,
:root[data-shadow-mode="thinking"] .shadow-rig .shadow-rig-body {
  animation: shadowRigThinkBody 2.7s ease-in-out infinite;
}
.shadow-state-speaking .shadow-rig-voice,
:root[data-shadow-mode="speaking"] .shadow-rig .shadow-rig-voice {
  opacity: 1;
  transform: scale(1);
}
.shadow-state-speaking .shadow-rig-body,
:root[data-shadow-mode="speaking"] .shadow-rig .shadow-rig-body {
  animation: shadowRigSpeakBody .66s ease-in-out infinite;
}
:root.shadow-speech-pulse .shadow-rig .shadow-rig-aura-back {
  animation: shadowRigWordPulse .34s ease-out;
}
.shadow-state-happy .shadow-rig-image,
.shadow-state-radiant .shadow-rig-image,
:root[data-shadow-mode="happy"] .shadow-rig .shadow-rig-image,
:root[data-shadow-mode="radiant"] .shadow-rig .shadow-rig-image {
  filter: brightness(1.12) saturate(1.14) drop-shadow(0 7px 10px rgba(141, 94, 235, .52));
}
.shadow-state-happy .shadow-rig-body,
:root[data-shadow-mode="happy"] .shadow-rig .shadow-rig-body {
  animation: shadowRigHappy 1.9s ease-in-out infinite;
}
.shadow-state-radiant .shadow-rig-aura-back,
:root[data-shadow-mode="radiant"] .shadow-rig .shadow-rig-aura-back {
  background: radial-gradient(circle, rgba(205, 181, 255, .75), rgba(122, 76, 205, .19) 48%, transparent 72%);
  animation-duration: 1.8s;
}
.shadow-state-radiant .shadow-rig-motes i,
:root[data-shadow-mode="radiant"] .shadow-rig .shadow-rig-motes i {
  opacity: .92;
  animation: shadowRigCelebrate 1.8s ease-in-out infinite;
}
.shadow-state-caring .shadow-rig-care,
:root[data-shadow-mode="caring"] .shadow-rig .shadow-rig-care { opacity: 1; }
.shadow-state-caring .shadow-rig-aura-back,
:root[data-shadow-mode="caring"] .shadow-rig .shadow-rig-aura-back {
  background: radial-gradient(circle, rgba(255, 206, 122, .35), rgba(155, 104, 199, .13) 50%, transparent 72%);
}
.shadow-state-sleepy .shadow-rig-sleep,
:root[data-shadow-mode="sleepy"] .shadow-rig .shadow-rig-sleep { opacity: .88; }
.shadow-state-sleepy .shadow-rig-body,
:root[data-shadow-mode="sleepy"] .shadow-rig .shadow-rig-body {
  animation: shadowRigSleepyBody 5.4s ease-in-out infinite;
}
.shadow-state-sleepy .shadow-rig-aura-back,
:root[data-shadow-mode="sleepy"] .shadow-rig .shadow-rig-aura-back { opacity: .48; }
.shadow-state-longing .shadow-rig-aura-back,
:root[data-shadow-mode="longing"] .shadow-rig .shadow-rig-aura-back {
  background: radial-gradient(circle, rgba(111, 192, 255, .38), rgba(89, 71, 153, .11) 50%, transparent 72%);
  animation-duration: 6.2s;
}
.shadow-state-longing .shadow-rig-body,
:root[data-shadow-mode="longing"] .shadow-rig .shadow-rig-body {
  animation: shadowRigLonging 5.1s ease-in-out infinite;
}
.shadow-state-alert .shadow-rig-body,
:root[data-shadow-mode="alert"] .shadow-rig .shadow-rig-body {
  animation: shadowRigAlert 1.15s ease-in-out infinite;
}
.shadow-state-alert .shadow-rig-aura-front,
:root[data-shadow-mode="alert"] .shadow-rig .shadow-rig-aura-front {
  border-color: rgba(255, 220, 143, .48);
  animation-duration: 1.8s;
}

/* Surface-specific framing */
.comp-art .shadow-rig,
.moment-art .shadow-rig,
.den-companion .shadow-rig,
.tut-mascot .shadow-rig { width: 100%; height: 100%; }
.moment-line-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.moment-line-row .tts-btn { margin-top: 2px; }
.comp-art .shadow-rig { transform: scale(.94); }
.moment-art .shadow-rig { transform: scale(1.08); }
.den-companion .shadow-rig { transform: scale(.96); }
.den-companion .shadow-rig-ground { bottom: 1%; }
.tut-mascot .shadow-rig { transform: scale(1.12); }
#ai-fab .shadow-rig {
  width: 86%;
  height: 86%;
  overflow: hidden;
  border-radius: 50%;
}
#ai-fab .shadow-rig-aura { left: 4%; top: 5%; width: 92%; }
#ai-fab .shadow-rig-orbit,
#ai-fab .shadow-rig-ground,
#ai-fab .shadow-rig-voice,
#ai-fab .shadow-rig-thought,
#ai-fab .shadow-rig-care,
#ai-fab .shadow-rig-sleep { display: none; }
.shadow-chat-head {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: -4px 30px 12px 0;
}
.shadow-chat-head-art {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 44%, rgba(157, 120, 235, .25), transparent 68%);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  overflow: hidden;
}
.shadow-chat-head h3 { margin: 0 0 3px; }
.shadow-chat-head p { margin: 0; font-size: 12px; }

@keyframes shadowRigFloat {
  0%,100% { transform: translateY(1.5%) rotate(-.35deg); }
  50% { transform: translateY(-2.5%) rotate(.45deg); }
}
@keyframes shadowRigGround {
  0%,100% { transform: scaleX(.94); opacity: .48; }
  50% { transform: scaleX(1.06); opacity: .33; }
}
@keyframes shadowRigBreathe {
  0%,100% { transform: scale(.94); opacity: .58; }
  50% { transform: scale(1.07); opacity: .92; }
}
@keyframes shadowRigHalo {
  to { transform: rotate(360deg); }
}
@keyframes shadowRigOrbit {
  to { transform: rotate(360deg); }
}
@keyframes shadowRigMote {
  0%,100% { transform: translate(0, 4px) rotate(0deg); opacity: .2; }
  48% { transform: translate(2px, -6px) rotate(100deg); opacity: .7; }
}
@keyframes shadowRigVoice {
  0% { transform: translateY(-50%) scale(.45); opacity: .9; }
  100% { transform: translateY(-50%) scale(1.06); opacity: 0; }
}
@keyframes shadowRigVoiceCore {
  to { transform: scale(1.55); box-shadow: 0 0 15px #c7acff; }
}
@keyframes shadowRigThink {
  0%,100% { transform: translateY(2px) scale(.72); opacity: .45; }
  50% { transform: translateY(-5px) scale(1.08); opacity: 1; }
}
@keyframes shadowRigHeart {
  0%,100% { transform: rotate(45deg) scale(.83); }
  48% { transform: rotate(45deg) scale(1.1); }
}
@keyframes shadowRigSleep {
  0% { transform: translate(0, 8px) scale(.4) skewX(-28deg); opacity: 0; }
  40% { opacity: .8; }
  100% { transform: translate(6px, -12px) scale(1.08) skewX(-28deg); opacity: 0; }
}
@keyframes shadowRigThinkBody {
  0%,100% { transform: translate(-1%, 1%) rotate(-1deg); }
  50% { transform: translate(1%, -1%) rotate(1.4deg); }
}
@keyframes shadowRigSpeakBody {
  0%,100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-1.5%) scale(1.015, .99); }
  72% { transform: translateY(.7%) scale(.992, 1.012); }
}
@keyframes shadowRigWordPulse {
  0% { transform: scale(.88); opacity: .6; }
  55% { transform: scale(1.17); opacity: 1; }
  100% { transform: scale(1); opacity: .74; }
}
@keyframes shadowRigHappy {
  0%,100% { transform: translateY(1%) rotate(-.7deg); }
  50% { transform: translateY(-4%) rotate(.8deg); }
}
@keyframes shadowRigCelebrate {
  0%,100% { transform: translateY(3px) scale(.55); opacity: .22; }
  50% { transform: translateY(-8px) scale(1.2) rotate(45deg); opacity: 1; }
}
@keyframes shadowRigSleepyBody {
  0%,100% { transform: translateY(2%) rotate(-1.2deg); }
  50% { transform: translateY(-.5%) rotate(1.2deg); }
}
@keyframes shadowRigLonging {
  0%,100% { transform: translate(-1%, 2%) scale(.985); }
  50% { transform: translate(1%, -1%) scale(1.005); }
}
@keyframes shadowRigAlert {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2.7%) scale(1.025); }
}

@media (max-width: 560px) {
  .shadow-chat-head {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 9px;
  }
  .shadow-chat-head-art { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .shadow-rig *,
  .shadow-rig *::before,
  .shadow-rig *::after {
    animation: none !important;
    transition: none !important;
  }
  .shadow-rig-voice i { opacity: .65; }
  .shadow-rig-thought i { opacity: .8; }
}

/* BODY Guardian final-cascade placement: keep these after all legacy Den rules. */
.den-pet.den-body-toad {
  left: 57.5% !important;
  right: auto !important;
  top: 68.4% !important;
  bottom: auto !important;
  width: 16% !important;
  z-index: 8 !important;
  transform: none !important;
}
.pet-card.pet-card-body-toad .pet-art { width: min(100%, 330px); min-height: 250px; }
@media (max-width: 720px) {
  .den-pet.den-body-toad { left: 57% !important; top: 68.8% !important; width: 17% !important; }
  .pet-card.pet-card-body-toad .pet-art { width: min(100%, 270px); min-height: 210px; }
}

/* Traveller locomotion v3: approved male avatar, authored stride frames and
   exact-silhouette blink. Contact poses remain atomic in BODY Pair v2. */
.avatar-core-stack { position: relative; display: block; aspect-ratio: 640 / 900; isolation: isolate; }
.avatar-core-motion { position: absolute; inset: 0; transform-origin: 50% 96%; animation: avatarCoreBreathing 4.8s cubic-bezier(.45,0,.55,1) infinite; }
.avatar-core-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  filter: drop-shadow(0 13px 20px rgba(0,0,0,.34));
  transition: opacity .22s ease, filter .16s ease;
}
.avatar-core-frame.is-active { opacity: 1; }
.avatar-core-frame.is-entering,
.avatar-core-frame.is-leaving { opacity: 0; }
.avatar-core-blink-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  opacity: 0;
  pointer-events: none;
}
.avatar-core-blink-layer img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.avatar-core-stack[data-avatar-core-pose="idle"]:not([data-locomotion="walk"]) .avatar-core-blink-layer { animation: avatarCoreBlink 5.6s steps(1,end) infinite; }
.avatar-core-stack[data-locomotion="walk"] .avatar-core-motion { animation: none; }
.avatar-core-stack[data-locomotion="walk"] .avatar-core-frame.is-active:not(.avatar-core-walk-frame) { opacity: 0 !important; transition: none; }
.avatar-core-walk-frame { opacity: 0; transition: none; }
.avatar-core-stack[data-locomotion="walk"] .avatar-core-walk-frame--a { animation: avatarCoreWalkA .76s steps(1,end) infinite; }
.avatar-core-stack[data-locomotion="walk"] .avatar-core-walk-frame--b { animation: avatarCoreWalkB .76s steps(1,end) infinite; }
.den-avatar-core[data-locomotion-direction="left"] .avatar-core-walk-frame { transform: scaleX(-1); }
.avatar-core-stack[data-avatar-core-pose="arms-up"] .avatar-core-motion { animation: avatarCoreVictorySettle .72s cubic-bezier(.18,.76,.22,1) 1, avatarCoreBreathing 4.8s .72s cubic-bezier(.45,0,.55,1) infinite; }
.avatar-core-stack[data-avatar-core-pose="window-back"] .avatar-core-motion { animation-duration: 5.8s; }
@keyframes avatarCoreBreathing { 0%,100% { transform: scale(1); } 50% { transform: scale(.999,1.004); } }
@keyframes avatarCoreVictorySettle { 0% { transform: scale(.992,1.008); } 62% { transform: scale(1.002,.998); } 100% { transform: scale(1); } }
@keyframes avatarCoreBlink {
  0%,85.999%,88%,89.199%,92%,100% { opacity: 0; }
  86%,87.999%,89.2%,91.999% { opacity: 1; }
}
@keyframes avatarCoreWalkA { 0%,49.999%,100% { opacity: 1; } 50%,99.999% { opacity: 0; } }
@keyframes avatarCoreWalkB { 0%,49.999%,100% { opacity: 0; } 50%,99.999% { opacity: 1; } }

.avatar-core-stage { min-height: 520px; overflow: hidden !important; }
.avatar-core-stack--figure { width: min(92%, 462px); }
.avatar-core-portrait { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.avatar-core-stack--portrait { position: absolute; left: 50%; top: -12%; width: 280%; transform: translateX(-50%); }
.avatar-core-gender-picker { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.avatar-core-gender-picker .avatar-core-control-label { padding: 0; }
.avatar-core-control-label { margin: 14px 0 7px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.avatar-core-gender-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; max-width: 460px; }
.avatar-core-pose-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.avatar-core-gender-button,
.avatar-core-pose-button { min-width: 0; padding: 10px 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); color: var(--fg); text-align: left; cursor: pointer; }
.avatar-core-gender-button { min-block-size: var(--touch-min); }
.avatar-core-gender-button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.avatar-core-gender-button:disabled { cursor: wait; opacity: .72; }
.avatar-core-gender-button strong,
.avatar-core-gender-button small,
.avatar-core-pose-button strong,
.avatar-core-pose-button small { display: block; }
.avatar-core-gender-button strong,
.avatar-core-pose-button strong { font-size: 12px; }
.avatar-core-gender-button small,
.avatar-core-pose-button small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.25; }
.avatar-core-gender-button.is-selected,
.avatar-core-pose-button.is-selected { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 13%,var(--panel2)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 42%,transparent); }

.den-avatar-core { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; appearance: none; translate: 0 0; transition: translate 2.8s linear; }
.den-avatar-core .avatar-core-stack { width: 100%; height: 100%; aspect-ratio: auto; }
.den-avatar-core .avatar-core-frame { filter: drop-shadow(0 14px 15px rgba(0,0,0,.37)); }
.den-avatar-core:focus-visible { outline: none; }
.den-avatar-core:focus-visible .avatar-core-frame { filter: drop-shadow(0 14px 19px rgba(83,214,255,.38)) brightness(1.035); }
.den-avatar-core[data-pose="window-back"] { left: 38.2813% !important; width: 27.5% !important; }
.den-avatar-core[data-locomotion-position="home"],
.den-avatar-core[data-locomotion-position="window"],
.den-avatar-core[data-locomotion-position="bench"] { left: 38.2813% !important; width: 27.5% !important; }
.den-avatar-core[data-locomotion-position="home"] { translate: 0 0; }
.den-avatar-core[data-locomotion-position="window"],
.den-avatar-core[data-locomotion-position="bench"] { translate: 100% 0; }
.den-avatar-core.is-locomotion-resetting { transition: none !important; translate: 0 0 !important; }

@media (max-width: 720px) {
  .avatar-core-stage { min-height: 430px; }
  .avatar-core-pose-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-core-motion { animation: none !important; }
  .avatar-core-frame { transition: none !important; }
  .avatar-core-blink-layer,
  .avatar-core-walk-frame { animation: none !important; }
  .den-avatar-core { transition: none !important; translate: 0 0 !important; }
}

/* Traveller room actions v4: complete authored poses bound to the coherent
   workshop bench. Percentages live in the same 1536x864 world as the room. */
.traveller-room-v4 {
  position: absolute;
  left: 65%;
  bottom: 10.9%;
  z-index: 9;
  display: block;
  width: 21.75%;
  aspect-ratio: 640 / 900;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 95.5556%;
}
.traveller-room-v4.is-active {
  opacity: 1;
  visibility: visible;
}
.traveller-room-v4__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 0;
  filter: drop-shadow(0 11px 12px rgba(0,0,0,.31));
}
.traveller-room-v4__frame--a { opacity: 1; }
.traveller-room-v4[data-action="bench-rest"].is-active {
  animation: travellerRoomBenchBreath 7s cubic-bezier(.45,0,.55,1) 1;
}
.traveller-room-v4[data-action="bench-read"].is-active .traveller-room-v4__frame--a {
  animation: travellerRoomReadA 3.2s steps(1,end) infinite;
}
.traveller-room-v4[data-action="bench-read"].is-active .traveller-room-v4__frame--b {
  animation: travellerRoomReadB 3.2s steps(1,end) infinite;
}
.den-prop-portal {
  position: absolute;
  left: 74%;
  bottom: 18%;
  z-index: 12;
  display: block;
  width: 8.5%;
  aspect-ratio: 1054 / 1492;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.08,.72) rotate(-7deg);
  transform-origin: 50% 86%;
}
.den-prop-portal img { display: block; width: 100%; height: 100%; object-fit: contain; }
.den-shell.is-den-prop-portal-active .den-prop-portal {
  visibility: visible;
  animation: denPropPortalOpen 1.05s cubic-bezier(.2,.78,.2,1) both;
}
@keyframes denPropPortalOpen {
  0% { opacity: 0; transform: scale(.06,.7) rotate(-8deg); }
  28%,68% { opacity: 1; transform: scale(1) rotate(2deg); }
  100% { opacity: 0; transform: scale(.04,.76) rotate(9deg); }
}
.den-shell.is-room-action-v4-active .den-avatar-core {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.den-shell.is-body-pair-active .traveller-room-v4 {
  opacity: 0 !important;
  visibility: hidden !important;
}
@keyframes travellerRoomBenchBreath {
  0%,100% { transform: scale(1); }
  50% { transform: scale(.999,1.004); }
}
@keyframes travellerRoomReadA {
  0%,59.999%,75%,100% { opacity: 1; }
  60%,74.999% { opacity: 0; }
}
@keyframes travellerRoomReadB {
  0%,59.999%,75%,100% { opacity: 0; }
  60%,74.999% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .traveller-room-v4,
  .traveller-room-v4__frame { animation: none !important; transition: none !important; }
  .den-prop-portal { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
  .traveller-room-v4[data-action="bench-read"] .traveller-room-v4__frame--a { opacity: 1 !important; }
  .traveller-room-v4[data-action="bench-read"] .traveller-room-v4__frame--b { opacity: 0 !important; }
}

/* ============================================================
   Den Stage v1 — one 1536x864 world, deterministic occupancy.
   These rules intentionally sit at the end of the cascade: older pet-index
   coordinates remain a fallback for room themes that do not use the stage.
   ============================================================ */
.den-scene[data-den-renderer="v5"] .den-pet[data-den-slot] {
  left: var(--den-stage-left) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--den-stage-bottom) !important;
  width: var(--den-stage-width) !important;
  z-index: var(--den-stage-z) !important;
  transform: none !important;
  transform-origin: 50% 100%;
  transition: translate .82s cubic-bezier(.22,.72,.2,1), scale .82s cubic-bezier(.22,.72,.2,1), opacity .18s ease, visibility 0s linear 0s;
}

/* Approach the same meeting anchor before the complete contact frame appears.
   The final contact remains one authored image, so hands and faces cannot split. */
.den-shell.is-body-pair-approaching .den-avatar-core {
  translate: 8% 1%;
  scale: .96;
}
.den-shell.is-body-pair-at-meeting .den-avatar-core,
.den-shell.is-body-pair-returning .den-avatar-core { translate: 8% 1%; scale: .96; }
.den-shell.is-body-pair-approaching .den-body-toad,
.den-shell.is-body-pair-at-meeting .den-body-toad,
.den-shell.is-body-pair-returning .den-body-toad { translate: 0 0; scale: 1; outline: none; }
.den-shell.is-body-pair-approaching .den-avatar-core .avatar-core-stack[data-locomotion="walk"] .avatar-core-frame,
.den-shell.is-body-pair-approaching .den-avatar-core .avatar-core-frame { transition: opacity .12s ease; }

/* The pair meets deeper in the room. Its absolute size is deliberately smaller
   than v2's 52% overlay, reducing the guardian's apparent size jump. */
.den-scene[data-den-renderer="v5"] .body-pair-v2 {
  left: 40.5%;
  right: auto;
  top: auto;
  bottom: 3.2%;
  width: 36%;
}
.den-scene[data-den-renderer="v5"] .body-pair-v2__frame {
  transform: scaleX(-1);
}

/* Perspective belongs to the actor's ground point. The window is farther from
   the camera than the home anchor, therefore both translation and scale tween. */
.den-avatar-core {
  transition: translate 2.2s linear, scale 2.2s linear, opacity .18s ease, visibility 0s linear 0s;
  scale: 1;
}
.den-avatar-core[data-locomotion-position="home"] { scale: 1; }
.den-avatar-core[data-locomotion-position="window"],
.den-avatar-core[data-locomotion-position="bench"] { scale: .78; }

/* Den Life v2 uses authored frame swaps. Scaling a complete PNG is not acting. */
.den-body-toad .body-toad-v1__stage { animation: none !important; }
.den-scene[data-den-focus-canon="body"] .den-body-toad {
  filter: drop-shadow(0 10px 9px rgba(4,6,12,.4)) drop-shadow(0 0 8px rgba(78,205,224,.16));
}

/* Every species receives the same card viewport. Species-specific normalization
   happens inside it, so a large guardian cannot stretch the grid. */
.pet-grid {
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  align-items: stretch;
}
.pet-card,
.pet-card.pet-card-body-toad { grid-column: auto; }
.pet-card .pet-art,
.pet-card.pet-card-body-toad .pet-art {
  display: grid;
  place-items: center;
  width: min(100%, 190px);
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  flex: 0 0 auto;
}
.pet-card .pet-art > .pet-svg { width: 76%; height: 76%; }
.pet-card-fortune .pet-art > .pet-svg { width: 94%; height: 94%; }
.pet-card-body-toad .pet-art > .body-toad-v1 { width: 100%; height: 100%; }
.pet-card .pet-name { margin-top: 8px; }

@media (max-width: 720px) {
  .den-scene[data-den-renderer="v5"] .body-pair-v2 {
    left: 40.5%;
    bottom: 3.2%;
    width: 36%;
  }
  .pet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-card .pet-art,
  .pet-card.pet-card-body-toad .pet-art { width: min(100%, 164px); }
}

@media (max-width: 440px) {
  .pet-grid { grid-template-columns: 1fr; }
  .pet-card .pet-art,
  .pet-card.pet-card-body-toad .pet-art { width: min(70vw, 190px); }
}

@media (prefers-reduced-motion: reduce) {
  .den-shell.is-body-pair-approaching .den-avatar-core,
  .den-shell.is-body-pair-at-meeting .den-avatar-core,
  .den-shell.is-body-pair-returning .den-avatar-core,
  .den-shell.is-body-pair-approaching .den-body-toad {
    translate: 0 0;
    scale: 1;
  }
  .den-avatar-core,
  .den-scene[data-den-renderer="v5"] .den-pet[data-den-slot] { transition: none !important; }
  .body-toad-v1.is-den-ambient .body-toad-v1__stage { animation: none !important; }
}

/* ============================================================
   BODY Guardian life v4 — authored locomotion, stable scale and portal reach.
   ============================================================ */
.den-scene[data-den-renderer="v5"] .den-pet.den-body-toad {
  transition: translate 2.2s linear, scale 2.2s linear, opacity .18s ease, visibility 0s linear 0s;
}
.den-shell.is-body-pair-approaching .den-avatar-core {
  translate: 24% 1%;
  scale: .98;
}
.den-shell.is-body-pair-at-meeting .den-avatar-core,
.den-shell.is-body-pair-returning .den-avatar-core {
  translate: 24% 1%;
  scale: .98;
}
.den-shell.is-body-pair-approaching .den-body-toad {
  animation: bodyToadMeetingArc 1.8s cubic-bezier(.34,.02,.24,1) both;
}
.den-shell.is-body-pair-at-meeting .den-body-toad {
  translate: 112% 0;
  scale: 1;
}
.den-shell.is-body-pair-returning .den-body-toad {
  animation: bodyToadMeetingReturnArc 1.8s cubic-bezier(.34,.02,.24,1) both;
}
.den-body-toad[data-toad-direction="left"] .body-toad-v1__frame { --actor-facing: -1; }
@keyframes bodyToadMeetingArc {
  0% { translate: 0 0; scale: 1; }
  23% { translate: 30% -17%; scale: 1; }
  45% { translate: 54% 0; scale: 1; }
  68% { translate: 82% -14%; scale: 1; }
  100% { translate: 112% 0; scale: 1; }
}
@keyframes bodyToadMeetingReturnArc {
  0% { translate: 112% 0; scale: 1; }
  23% { translate: 82% -14%; scale: 1; }
  45% { translate: 54% 0; scale: 1; }
  68% { translate: 30% -17%; scale: 1; }
  100% { translate: 0 0; scale: 1; }
}

.body-toad-v1__motion-frame--b { opacity: 0; }
.body-toad-v1[data-motion="approach-hop"] .body-toad-v1__motion-frame--a {
  animation: bodyToadHopCrouch .72s steps(1,end) infinite;
}
.body-toad-v1[data-motion="approach-hop"] .body-toad-v1__motion-frame--b {
  animation: bodyToadHopAir .72s steps(1,end) infinite;
}
@keyframes bodyToadHopCrouch { 0%,31%,100% { opacity: 1; } 32%,76% { opacity: 0; } 77%,99% { opacity: 1; } }
@keyframes bodyToadHopAir { 0%,31%,77%,100% { opacity: 0; } 32%,76% { opacity: 1; } }

.den-body-toad[data-toad-motion="hop-tour"][data-toad-route="away"] {
  animation: bodyToadTourAway 1.5s cubic-bezier(.34,.02,.24,1) both;
}
.den-body-toad[data-toad-motion="hop-tour"][data-toad-route="home"] {
  animation: bodyToadTourHome 1.5s cubic-bezier(.34,.02,.24,1) both;
}
.den-body-toad[data-toad-motion="bench-nap"][data-toad-route="bench"] {
  z-index: 10 !important;
  animation: bodyToadBenchAway 1.8s cubic-bezier(.34,.02,.24,1) both;
}
.den-body-toad[data-toad-motion="bench-nap"][data-toad-route="home"] {
  z-index: 10 !important;
  animation: bodyToadBenchHome 2.2s cubic-bezier(.34,.02,.24,1) both;
}
.body-toad-v1[data-motion="solo-stretch"] .body-toad-v1__motion-frame--a {
  animation: bodyToadStretchSide 6.4s steps(1,end) infinite;
}
.body-toad-v1[data-motion="solo-stretch"] .body-toad-v1__motion-frame--b {
  animation: bodyToadStretchUp 6.4s steps(1,end) infinite;
}
.body-toad-v1[data-motion="bench-nap"] .body-toad-v1__stage {
  animation: bodyToadNapBreath 5.8s ease-in-out infinite !important;
}
@keyframes bodyToadTourAway {
  0% { translate: 0 0; scale: 1; }
  22% { translate: 22% -16%; scale: .97; }
  44% { translate: 40% 0; scale: .94; }
  67% { translate: 58% -13%; scale: .91; }
  100% { translate: 76% 0; scale: .88; }
}
@keyframes bodyToadTourHome {
  0% { translate: 76% 0; scale: .88; }
  22% { translate: 58% -13%; scale: .91; }
  44% { translate: 40% 0; scale: .94; }
  67% { translate: 22% -16%; scale: .97; }
  100% { translate: 0 0; scale: 1; }
}
@keyframes bodyToadBenchAway {
  0% { translate: 0 0; scale: 1; }
  18% { translate: 48% -18%; scale: 1; }
  34% { translate: 88% 0; scale: 1; }
  50% { translate: 136% -22%; scale: .99; }
  66% { translate: 176% -2%; scale: .98; }
  82% { translate: 228% -51%; scale: .95; }
  100% { translate: 272% -78%; scale: .86; }
}
@keyframes bodyToadBenchHome {
  0% { translate: 272% -78%; scale: .86; }
  18% { translate: 228% -51%; scale: .95; }
  34% { translate: 176% -2%; scale: .98; }
  50% { translate: 136% -22%; scale: .99; }
  66% { translate: 88% 0; scale: 1; }
  82% { translate: 48% -18%; scale: 1; }
  100% { translate: 0 0; scale: 1; }
}
@keyframes bodyToadStretchSide { 0%,47.999%,84.001%,100% { opacity: 1; } 48%,84% { opacity: 0; } }
@keyframes bodyToadStretchUp { 0%,47.999%,84.001%,100% { opacity: 0; } 48%,84% { opacity: 1; } }
@keyframes bodyToadNapBreath { 0%,100% { translate: 0 0; } 50% { translate: 0 -1.2%; } }

.body-pair-v2__frame--c,
.body-pair-v2__frame--d { opacity: 0; }
.body-pair-v2[data-mode="whistle"].is-active .body-pair-v2__frame--a { animation: bodyPairWhistle4A 1.84s steps(1,end) infinite; }
.body-pair-v2[data-mode="whistle"].is-active .body-pair-v2__frame--b { animation: bodyPairWhistle4B 1.84s steps(1,end) infinite; }
.body-pair-v2[data-mode="whistle"].is-active .body-pair-v2__frame--c { animation: bodyPairWhistle4C 1.84s steps(1,end) infinite; }
.body-pair-v2[data-mode="whistle"].is-active .body-pair-v2__frame--d { animation: bodyPairWhistle4D 1.84s steps(1,end) infinite; }
@keyframes bodyPairWhistle4A { 0%,24.99%,100% { opacity: 1; } 25%,99.99% { opacity: 0; } }
@keyframes bodyPairWhistle4B { 0%,24.99%,50%,100% { opacity: 0; } 25%,49.99% { opacity: 1; } }
@keyframes bodyPairWhistle4C { 0%,49.99%,75%,100% { opacity: 0; } 50%,74.99% { opacity: 1; } }
@keyframes bodyPairWhistle4D { 0%,74.99%,100% { opacity: 0; } 75%,99.99% { opacity: 1; } }
.den-scene[data-den-renderer="v5"] .body-pair-v2[data-mode="whistle"] { left: 39%; width: 39%; }
.den-scene[data-den-renderer="v5"] .body-pair-v2[data-mode="pushup"] { left: 39.5%; width: 38%; }
.den-scene[data-den-renderer="v5"] .body-pair-v2[data-mode="train"] { left: 39.5%; width: 38%; }
.den-scene[data-den-renderer="v5"] .body-pair-v2[data-mode="rest"] { left: 39.75%; width: 37.5%; }

.den-prop-portal {
  left: 79.5%;
  bottom: 27%;
  width: 10.5%;
  z-index: 14;
  transform: scale(.04,.72);
  overflow: visible;
}
.den-prop-portal__core,
.den-prop-portal__rim {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.den-prop-portal__core { z-index: 0; transform-origin: 50% 50%; }
.den-prop-portal__rim { z-index: 1; }
.den-shell.is-den-prop-portal-active .den-prop-portal {
  visibility: visible;
  /* Extraction happens at 3.1s. Keep the portal visible across that handoff
     so the book is already in Traveller's hand while the rim closes. */
  animation: denPropPortalOpenV4 3.7s cubic-bezier(.2,.78,.2,1) both;
}
.den-shell.is-den-prop-portal-active .den-prop-portal__core {
  animation: denPropPortalCoreFlow 2.8s ease-in-out infinite;
}
.den-prop-reach {
  position: absolute;
  left: 65%;
  bottom: 10.9%;
  z-index: 13;
  display: block;
  width: 21.75%;
  aspect-ratio: 640 / 900;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 95.5%;
}
.den-prop-reach img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.den-shell.is-den-prop-portal-reaching .den-prop-reach {
  visibility: visible;
  animation: denPropReachV4 3.75s cubic-bezier(.2,.72,.2,1) both;
}
.den-shell.is-den-prop-portal-extracting .den-prop-reach {
  opacity: 0 !important;
  visibility: hidden !important;
}
.den-shell.is-den-prop-portal-reaching .den-avatar-core,
.den-shell.is-den-prop-portal-reaching:not(.is-den-prop-portal-extracting) .traveller-room-v4 {
  opacity: 0 !important;
  visibility: hidden !important;
}
.den-shell.is-body-pair-active .den-scene > .den-pet:not(.den-body-toad) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@keyframes denPropPortalOpenV4 {
  0% { opacity: 0; transform: scale(.035,.72); }
  18% { opacity: 1; transform: scale(1.02,.96); }
  30%,84% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.035,.74); }
}
@keyframes denPropPortalCoreFlow {
  0%,100% { transform: scale(.965,.985); filter: brightness(.98) saturate(1.04); opacity: .94; }
  50% { transform: scale(1.01,1.025); filter: brightness(1.12) saturate(1.18); opacity: 1; }
}
@keyframes denPropReachV4 {
  0% { opacity: 0; translate: -1% 0; }
  14%,60% { opacity: 1; translate: 0 0; }
  78% { opacity: 1; translate: -.4% 0; }
  100% { opacity: 0; translate: -1% 0; }
}

/* ============================================================
   RECOVERY Guardian v1 — authored state plates and soft-body idle.
   No whole-sprite bobbing or scale pulse is used as character acting.
   ============================================================ */
.recovery-slug-v1,
.recovery-slug-v1__stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.recovery-slug-v1__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 0;
  transition: opacity .28s ease;
  filter: drop-shadow(0 9px 9px rgba(4, 8, 12, .34));
  --actor-frame-scale: 1;
  --actor-facing: 1;
  transform-origin: 50% 89.84375%;
  transform: scale(var(--actor-frame-scale)) scaleX(var(--actor-facing));
}
.recovery-slug-v1__frame.is-active { opacity: 1; }
.recovery-slug-v1__frame.is-incoming { opacity: 0; }
.recovery-slug-v1__frame.is-outgoing { opacity: 0; }
.recovery-slug-v1.is-reassuring .recovery-slug-v1__stage {
  animation: recoverySlugWarmth 5.2s ease-in-out 1;
}
@keyframes recoverySlugWarmth {
  0%,100% { filter: brightness(1) drop-shadow(0 0 0 rgba(121,184,170,0)); }
  42%,72% { filter: brightness(1.06) drop-shadow(0 0 12px rgba(121,184,170,.42)); }
}
.den-recovery-slug {
  aspect-ratio: 1 / 1;
  height: auto !important;
}
.den-recovery-slug .recovery-slug-v1 { width: 100%; height: 100%; }
.pet-card-recovery-slug .pet-art > .recovery-slug-v1 { width: 100%; height: 100%; }
.recovery-slug-domain-badge { color: #9fd5c9; border-color: rgba(121,184,170,.34); }

@media (max-width: 720px) {
  .den-prop-reach { left: 65%; width: 21.75%; }
}

@media (prefers-reduced-motion: reduce) {
  .den-prop-reach { display: none !important; }
  .den-prop-portal__core { animation: none !important; }
  .den-body-toad[data-toad-route] { translate: 0 0 !important; scale: 1 !important; }
  .recovery-slug-v1__frame,
  .recovery-slug-v1__stage { animation: none !important; transition: none !important; }
}

/* ============================================================
   RECOVERY Guardian life v2 — slow soft-body locomotion and
   authored full-frame contact with the male Traveller.
   ============================================================ */
.recovery-pair-v2 {
  position: absolute;
  left: 35.5%;
  bottom: 1.8%;
  z-index: 22;
  display: block;
  width: 46%;
  aspect-ratio: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.recovery-pair-v2.is-active {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.recovery-pair-v2__stage,
.recovery-pair-v2__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.recovery-pair-v2__frame {
  object-fit: contain;
  object-position: 50% 100%;
  transform: scaleX(-1);
  filter: drop-shadow(0 13px 13px rgba(4, 7, 12, .42));
}
/* All pair plates share the same 1536px source stage, but older RECOVERY
   exports left different transparent gutters below their feet.  Normalize the
   authored ground line here instead of changing wrapper size per action. */
.recovery-pair-v2[data-mode="greet"] .recovery-pair-v2__frame { transform: translateY(7.3%) scaleX(-1); }
.recovery-pair-v2[data-mode="breathe"] .recovery-pair-v2__frame { transform: translateY(8.2%) scaleX(-1); }
.recovery-pair-v2[data-mode="restore"] .recovery-pair-v2__frame { transform: translateY(7.7%) scaleX(-1); }
.recovery-pair-v2[data-mode="stretch"] .recovery-pair-v2__frame { transform: translateY(11.5%) scaleX(-1); }
.recovery-pair-v2[data-mode="stretch"] .recovery-pair-v2__frame[data-pair-frame="stretch-soft-b"] {
  /* The replacement plate has a 4.8% wider alpha bbox than frame A. Keep the
     room-scale host fixed and calibrate only the authored source silhouette. */
  transform: translateY(11.9%) scaleX(-1) scale(.96);
}
.recovery-pair-v2__frame--a { opacity: 1; }
.recovery-pair-v2__frame--b { opacity: 0; }
.recovery-pair-v2[data-mode="breathe"].is-active .recovery-pair-v2__frame--a {
  animation: recoveryPairBreatheA 8.8s steps(1,end) infinite;
}
.recovery-pair-v2[data-mode="breathe"].is-active .recovery-pair-v2__frame--b {
  animation: recoveryPairBreatheB 8.8s steps(1,end) infinite;
}
.recovery-pair-v2[data-mode="stretch"].is-active .recovery-pair-v2__frame--a {
  animation: recoveryPairStretchA 10.4s steps(1,end) infinite;
}
.recovery-pair-v2[data-mode="stretch"].is-active .recovery-pair-v2__frame--b {
  animation: recoveryPairStretchB 10.4s steps(1,end) infinite;
}
.recovery-pair-v2[data-mode="restore"].is-active .recovery-pair-v2__stage {
  animation: recoveryPairWarmth 6.4s ease-in-out infinite;
}
@keyframes recoveryPairBreatheA { 0%,47.999%,91.001%,100% { opacity: 1; } 48%,91% { opacity: 0; } }
@keyframes recoveryPairBreatheB { 0%,47.999%,91.001%,100% { opacity: 0; } 48%,91% { opacity: 1; } }
@keyframes recoveryPairStretchA { 0%,45.999%,90.001%,100% { opacity: 1; } 46%,90% { opacity: 0; } }
@keyframes recoveryPairStretchB { 0%,45.999%,90.001%,100% { opacity: 0; } 46%,90% { opacity: 1; } }
@keyframes recoveryPairWarmth {
  0%,100% { filter: brightness(1) drop-shadow(0 0 0 rgba(151, 222, 203, 0)); }
  50% { filter: brightness(1.055) drop-shadow(0 0 15px rgba(151, 222, 203, .32)); }
}

.den-shell.is-recovery-pair-active .den-avatar-core,
.den-shell.is-recovery-pair-active .den-recovery-slug,
.den-shell.is-recovery-pair-active .traveller-room-v4 {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.den-shell.is-recovery-pair-active .den-scene > .den-pet:not(.den-recovery-slug) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.den-shell.is-recovery-pair-approaching .den-avatar-core,
.den-shell.is-recovery-pair-at-meeting .den-avatar-core,
.den-shell.is-recovery-pair-returning .den-avatar-core {
  translate: 18% 1%;
  scale: .98;
}
.den-shell.is-recovery-pair-approaching .den-avatar-core,
.den-shell.is-recovery-pair-returning .den-avatar-core {
  transition-duration: 2.6s;
}
.den-shell.is-recovery-pair-approaching .den-recovery-slug,
.den-shell.is-recovery-pair-at-meeting .den-recovery-slug {
  translate: -55% 0;
  scale: 1;
}
.den-shell.is-recovery-pair-returning .den-recovery-slug {
  translate: 0 0;
  scale: 1;
}
.den-shell.is-recovery-pair-approaching .den-recovery-slug,
.den-shell.is-recovery-pair-returning .den-recovery-slug {
  transition: translate 2.6s cubic-bezier(.25,.64,.22,1), scale 2.6s linear, opacity .18s ease, visibility 0s linear 0s;
}

.recovery-slug-v1__motion-frame--b { opacity: 0; }
.recovery-slug-v1[data-motion="approach-glide"] .recovery-slug-v1__motion-frame--a,
.recovery-slug-v1[data-motion="glide-tour"] .recovery-slug-v1__motion-frame--a {
  animation: recoverySlugCompress 2.6s steps(1,end) infinite;
}
.recovery-slug-v1[data-motion="approach-glide"] .recovery-slug-v1__motion-frame--b,
.recovery-slug-v1[data-motion="glide-tour"] .recovery-slug-v1__motion-frame--b {
  animation: recoverySlugExtend 2.6s steps(1,end) infinite;
}
.den-recovery-slug[data-slug-direction="left"] .recovery-slug-v1__frame { --actor-facing: -1; }
.den-recovery-slug[data-slug-motion="glide-tour"][data-slug-route="away"] {
  animation: recoverySlugTourAway 5.2s cubic-bezier(.28,.62,.22,1) both;
}
.den-recovery-slug[data-slug-motion="glide-tour"][data-slug-route="home"] {
  animation: recoverySlugTourHome 5.6s cubic-bezier(.28,.62,.22,1) both;
}
.recovery-slug-v1[data-motion="cushion-nap"] .recovery-slug-v1__stage {
  animation: recoverySlugSleepWarmth 7.2s ease-in-out infinite !important;
}
.recovery-slug-v1[data-motion="helpers"] .recovery-slug-v1__stage {
  animation: recoverySlugHelperGlow 6.8s ease-in-out infinite !important;
}
@keyframes recoverySlugCompress { 0%,34.999%,82.001%,100% { opacity: 1; } 35%,82% { opacity: 0; } }
@keyframes recoverySlugExtend { 0%,34.999%,82.001%,100% { opacity: 0; } 35%,82% { opacity: 1; } }
@keyframes recoverySlugTourAway { 0% { translate: 0 0; scale: 1; } 100% { translate: -38% 0; scale: .9; } }
@keyframes recoverySlugTourHome { 0% { translate: -38% 0; scale: .9; } 100% { translate: 0 0; scale: 1; } }
@keyframes recoverySlugSleepWarmth { 0%,100% { filter: brightness(.98); } 50% { filter: brightness(1.035); } }
@keyframes recoverySlugHelperGlow { 0%,100% { filter: drop-shadow(0 0 0 rgba(151,222,203,0)); } 50% { filter: drop-shadow(0 0 11px rgba(151,222,203,.3)); } }

.den-recovery-actions { border-color: rgba(121, 184, 170, .24); }
.den-recovery-actions > span b { color: #bce6dc; }

@media (max-width: 720px) {
  .recovery-pair-v2 { left: 35.5%; bottom: 1.4%; width: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .recovery-pair-v2,
  .recovery-pair-v2 *,
  .recovery-slug-v1[data-motion] *,
  .den-recovery-slug[data-slug-route] { animation: none !important; transition: none !important; }
  .den-shell.is-recovery-pair-approaching .den-avatar-core,
  .den-shell.is-recovery-pair-at-meeting .den-avatar-core,
  .den-shell.is-recovery-pair-returning .den-avatar-core,
  .den-shell.is-recovery-pair-approaching .den-recovery-slug,
  .den-shell.is-recovery-pair-at-meeting .den-recovery-slug,
  .den-shell.is-recovery-pair-returning .den-recovery-slug { translate: 0 0 !important; scale: 1 !important; }
}

/* ============================================================
   Lair craft pass — controls and actor reservations.
   The locked 16:9 room remains authored art geometry; these rules reserve
   interactive/actor footprints around it without retile or crop.
   ============================================================ */

/* The protagonist is the static focal anchor while the in-room Shadow owns
   the one continuous idle group. Walk and authored interaction frames remain
   available because they use separate transient classes/layers. */
.den-shell .den-avatar-core .avatar-core-motion {
  animation: none;
}

/* Window/bench actions occupy the east lane. Recovery moves into the vacated
   home lane, and Shadow clears the authored actor instead of floating over it. */
.den-shell.is-room-action-v4-active .den-recovery-slug,
.den-shell:has(.den-avatar-core[data-locomotion-position="window"]) .den-recovery-slug,
.den-shell:has(.den-avatar-core[data-locomotion-position="bench"]) .den-recovery-slug {
  translate: -132% 0;
}
.den-shell.is-room-action-v4-active .den-companion,
.den-shell:has(.den-avatar-core[data-locomotion-position="window"]) .den-companion,
.den-shell:has(.den-avatar-core[data-locomotion-position="bench"]) .den-companion {
  left: 52% !important;
  top: 22% !important;
}

/* During an authored actor beat, pause the default Shadow idle so the room
   still has a single moving focal group. */
.den-shell:is(
  .is-room-action-v4-active,
  .is-body-pair-approaching, .is-body-pair-at-meeting, .is-body-pair-returning, .is-body-pair-active,
  .is-resources-pair-approaching, .is-resources-pair-at-meeting, .is-resources-pair-returning, .is-resources-pair-active,
  .is-recovery-pair-approaching, .is-recovery-pair-at-meeting, .is-recovery-pair-returning, .is-recovery-pair-active
) .den-companion,
.den-shell:is(
  .is-room-action-v4-active,
  .is-body-pair-approaching, .is-body-pair-at-meeting, .is-body-pair-returning, .is-body-pair-active,
  .is-resources-pair-approaching, .is-resources-pair-at-meeting, .is-resources-pair-returning, .is-resources-pair-active,
  .is-recovery-pair-approaching, .is-recovery-pair-at-meeting, .is-recovery-pair-returning, .is-recovery-pair-active
) .den-companion * {
  animation-play-state: paused !important;
}

@media (hover: hover) and (pointer: fine) {
  .den-body-toad:hover { filter: brightness(1.035) drop-shadow(0 12px 11px rgba(4,6,12,.44)); }
  .den-companion:hover { filter: brightness(1.08); }
  .den-pet:hover { transform: translateY(-2px); }
  .den-scene-tools button:hover { background: color-mix(in srgb, var(--accent) 72%, rgba(8,10,20,.7)); border-color: rgba(255,255,255,.3); }
  .den-clear:hover { color: var(--accent); }
  .den-theme-choice:hover,
  .den-item-choice:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); }
  .den-pill:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--text); }
  .den-avatar-core:hover .avatar-core-frame { filter: drop-shadow(0 14px 18px rgba(0,0,0,.4)) brightness(1.035); }
}

@media (pointer: coarse), (max-width: 600px) {
  .den-scene-tools button,
  .den-companion,
  .den-focus .btn,
  .den-editor-title .btn,
  .den-editor .den-pill,
  .den-editor .den-clear {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}

/* Lair craft shell: one authored room, one compact console and disclosures
   for the controls that are not part of the room's primary emotional beat. */
.den-console {
  min-width: 0;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
.den-tag {
  align-items: flex-start;
  border-radius: var(--radius-md);
}
.den-tag-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.den-route-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-natural);
  font-synthesis: none;
  font-kerning: normal;
}
.den-tag .den-route-title { color: #fff; }
.den-tag-copy small,
.den-companion-name,
.den-scene-tools button,
.den-stats span {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-natural);
}
.den-tag-copy small { color: rgba(255,255,255,.78); }
.den-mood {
  font-size: var(--type-body);
  line-height: var(--leading-prose);
}
.den-mood strong {
  font-size: var(--type-heading);
  line-height: var(--leading-ui);
}
.den-focus,
.den-actions .btn,
.den-drawer > summary,
.den-residents > summary,
.den-guardian-actions .btn {
  font-family: var(--font-ui);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}
.den-focus .btn,
.den-scene-tools button {
  font-family: var(--font-ui);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}
.den-shell .btn,
.den-scene-tools button {
  min-block-size: var(--touch-min);
}
.den-shell .btn:not(.ghost):not(.danger):not(.pro-cta) { color: var(--on-accent); }
.den-drawer,
.den-residents {
  margin: 0 var(--sp-3) var(--sp-3);
  overflow: visible;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.den-drawer > summary,
.den-residents > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-block-size: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.den-drawer > summary::-webkit-details-marker,
.den-residents > summary::-webkit-details-marker { display: none; }
.den-disclosure-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.den-drawer > summary small,
.den-residents > summary small {
  color: var(--text-soft);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.den-disclosure-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  margin: 0;
  color: inherit;
  font-family: var(--font-ui);
  font-size: var(--type-heading);
  line-height: var(--leading-label);
}
.den-drawer-chevron,
.den-residents-chevron {
  flex: 0 0 auto;
  transition: rotate var(--dur-fast) var(--ease-out);
}
.den-drawer[open] > summary .den-drawer-chevron,
.den-residents[open] > summary .den-residents-chevron { rotate: 180deg; }
.den-drawer[open] > summary,
.den-residents[open] > summary { border-bottom: 1px solid var(--line-soft); }
.den-drawer .den-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3);
}
.den-residents-body {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
}
.den-residents .den-guardian-actions {
  align-items: stretch;
  margin: 0;
  padding: var(--sp-3);
  border-color: var(--line-soft);
  background: var(--surface-3);
}
.den-residents .den-guardian-actions > span b {
  color: var(--text-strong);
  font-size: var(--type-heading);
  line-height: var(--leading-ui);
}
.den-residents .den-guardian-actions small {
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: var(--leading-prose);
}
.den-residents .den-guardian-actions > div { justify-content: flex-start; }

/* The editor is itself disclosed. Once open, every visible control follows
   the same semantic type roles instead of the former 9–11px micro-scale. */
.den-editor-title > div > span,
.den-editor-group h4,
.den-theme-choice small,
.den-choice-state,
.den-editor-note {
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.den-editor-title > div > span { color: var(--text-soft); }
.den-editor-title > div > span,
.den-editor-group h4 { letter-spacing: var(--tracking-caps); }
.den-editor-title h3 {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--leading-display);
}
.den-clear,
.den-theme-choice strong,
.den-item-copy strong,
.den-pill,
.den-editor .btn {
  font-family: var(--font-ui);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}
.den-editor-note {
  font-size: var(--type-body);
  line-height: var(--leading-prose);
}
.den-theme-choice strong,
.den-theme-choice small,
.den-item-copy strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.den-drawer > summary:focus-visible,
.den-residents > summary:focus-visible,
.den-console button:focus-visible,
.den-editor button:focus-visible,
.den-scene-tools button:focus-visible {
  outline: none;
  border-radius: var(--radius-md);
  box-shadow: var(--focus-ring);
}

@media (max-width: 460px) {
  .den-tag .den-tag-copy {
    max-inline-size: 160px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Static tired state uses the existing approved bench plate without starting
   or persisting a 26-second room action. */
.den-tired-seat {
  position: absolute;
  left: 65%;
  bottom: 10.9%;
  z-index: 9;
  display: block;
  width: 21.75%;
  pointer-events: none;
  transform-origin: 50% 95.5%;
  animation: none;
}
.den-tired-seat img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.den-shell.is-energy-tired .den-avatar-core {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.den-shell.is-room-action-v4-active .den-tired-seat { opacity: 0; visibility: hidden; }
.den-shell.is-energy-tired.is-energy-motion-active .den-avatar-core {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.den-shell.is-energy-tired.is-energy-motion-active .den-tired-seat {
  opacity: 0;
  visibility: hidden;
}
.den-shell.is-energy-tired:is(
  .is-body-pair-approaching, .is-body-pair-returning,
  .is-recovery-pair-approaching, .is-recovery-pair-returning,
  .is-resources-pair-approaching, .is-resources-pair-returning
):not(:is(.is-body-pair-active, .is-recovery-pair-active, .is-resources-pair-active)) .den-avatar-core {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.den-shell.is-energy-tired:is(
  .is-body-pair-approaching, .is-body-pair-at-meeting, .is-body-pair-returning, .is-body-pair-settling, .is-body-pair-active,
  .is-recovery-pair-approaching, .is-recovery-pair-at-meeting, .is-recovery-pair-returning, .is-recovery-pair-settling, .is-recovery-pair-active,
  .is-resources-pair-approaching, .is-resources-pair-at-meeting, .is-resources-pair-returning, .is-resources-pair-settling, .is-resources-pair-active
) .den-tired-seat {
  opacity: 0;
  visibility: hidden;
}
.den-shell.is-den-offscreen .den-scene *,
.den-shell.is-den-offscreen .den-scene *::before,
.den-shell.is-den-offscreen .den-scene *::after {
  animation-play-state: paused !important;
}

/* Ambient recovery travel changes depth instead of crossing the Traveller's
   home lane. Authored contact/pair choreography remains a separate state. */
@keyframes recoverySlugTourAway {
  from { translate: 0 0; scale: 1; }
  to { translate: 0 -18%; scale: .9; }
}
@keyframes recoverySlugTourHome {
  from { translate: 0 -18%; scale: .9; }
  to { translate: 0 0; scale: 1; }
}

@media (min-width: 1180px) {
  .den-card {
    display: grid;
    grid-template-columns: minmax(0, var(--work-max)) minmax(0, 1fr);
    align-items: start;
  }
  .den-scene {
    grid-column: 1;
    grid-row: 1;
    border-right: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-bottom: 0;
  }
  .den-console {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 100%;
  }
  .den-editor { grid-column: 1 / -1; }
  .den-console .den-life-strip {
    align-items: stretch;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
  .den-console .den-mood span { white-space: normal; }
  .den-console .den-stats { width: 100%; }
  .den-console .den-stats span { flex: 1; justify-content: center; padding-inline: var(--sp-1); }
  .den-console .den-focus { margin: 0 var(--sp-3) var(--sp-2); }
  .den-console .den-drawer,
  .den-console .den-residents { margin-bottom: var(--sp-2); }
}

@media (pointer: coarse), (max-width: 600px) {
  .den-drawer > summary,
  .den-residents > summary,
  .den-actions .btn,
  .den-guardian-actions .btn,
  .den-theme-choice,
  .den-item-choice,
  .den-pill,
  .den-clear {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
  .den-scene[data-den-renderer="v5"] .den-pet.den-resources-penguin[data-den-slot],
  .den-scene[data-den-renderer="v5"] .den-pet[data-den-slot]:not(.den-body-toad):not(.den-resources-penguin):not(.den-recovery-slug) {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
    left: calc(var(--den-stage-center) - 21px) !important;
  }
  .den-tag-copy { max-width: 112px; }
  .den-actions .btn { padding-inline: var(--sp-1); }
}

/* Bench/window and passive tired postures share one reserved stage map. */
.den-shell:is(.is-room-action-v4-active, .is-energy-tired) .den-scene[data-den-renderer="v5"] .den-pet[data-den-slot] {
  left: var(--den-stage-seated-left) !important;
  bottom: var(--den-stage-seated-bottom) !important;
  width: var(--den-stage-seated-width) !important;
  z-index: var(--den-stage-seated-z) !important;
  translate: 0 0;
  scale: 1;
}
.den-shell.is-energy-tired .den-companion {
  left: 52% !important;
  top: 22% !important;
}
@media (pointer: coarse), (max-width: 600px) {
  .den-shell:is(.is-room-action-v4-active, .is-energy-tired) .den-scene[data-den-renderer="v5"] .den-pet.den-resources-penguin[data-den-slot],
  .den-shell:is(.is-room-action-v4-active, .is-energy-tired) .den-scene[data-den-renderer="v5"] .den-pet[data-den-slot]:not(.den-body-toad):not(.den-resources-penguin):not(.den-recovery-slug) {
    left: calc(var(--den-stage-seated-center) - 21px) !important;
  }
}

/* Character / Wardrobe v1: one authored preview, three public slots, one
   inventory drawer. The advanced nine-slot Forge remains an internal module. */
.character-shell .btn:not(.ghost):not(.danger):not(.pro-cta) { color: var(--on-accent); }
:root:not([data-system="on"]) body:has(.character-shell) .navsubtab.active {
  color: var(--character-subtab-active-fg);
  border-color: var(--character-subtab-active-border);
}

.character-shell { gap: var(--sp-4); }
.character-wardrobe-v1 {
  position: relative;
  overflow: hidden;
  padding: var(--sp-5);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line-soft));
  background:
    radial-gradient(480px 300px at 12% 44%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%),
    var(--surface-2);
  box-shadow: var(--shadow-card);
}
.character-wardrobe-v1:focus { outline: none; }
.character-wardrobe-v1:focus-visible { box-shadow: var(--shadow-card), var(--focus-ring); }
.character-wardrobe-v1.is-avatar-swapping { cursor: progress; }
.character-wardrobe-v1.is-avatar-swapping :is(button, input, select) { pointer-events: none; }

.character-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  align-items: center;
  gap: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}
.character-kicker {
  margin: 0 0 var(--sp-1);
  color: var(--character-kicker-fg);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.character-identity h2,
.character-wardrobe-heading h3 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-synthesis: none;
  font-kerning: normal;
  letter-spacing: var(--tracking-natural);
}
.character-identity h2 { font-size: var(--type-title); line-height: var(--leading-display); }
.character-name { margin: var(--sp-1) 0 0; color: var(--text-soft); font: 750 var(--type-brand)/var(--leading-ui) var(--font-display); overflow-wrap: anywhere; }
.character-identity-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.character-identity-chips :is(.ch-rank, .ch-arch, .ch-title) {
  max-width: 100%;
  margin: 0;
  padding: 5px 9px;
  color: var(--text-soft);
  font: 700 var(--type-meta)/var(--leading-label) var(--font-ui);
  overflow-wrap: anywhere;
}
.character-identity-progress { display: grid; gap: var(--sp-2); min-width: 0; }
.character-identity-progress .xp-bar { width: 100%; max-width: none; }
.character-form-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font: 700 var(--type-meta)/var(--leading-label) var(--font-ui); }
.character-form-line span { color: var(--muted); }
.character-form-line b { color: var(--text-strong); }

.character-wardrobe-heading { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0 var(--sp-3); }
.character-wardrobe-heading h3 { font-size: var(--type-brand); line-height: var(--leading-display); }
.character-wardrobe-heading p:last-child { max-width: var(--measure-compact); margin: var(--sp-1) 0 0; color: var(--text-soft); font: var(--type-body)/var(--leading-prose) var(--font-ui); }
.character-wardrobe-layout { display: grid; grid-template-columns: minmax(420px, .95fr) minmax(0, 1.05fr); gap: var(--sp-4); align-items: stretch; }
.character-wardrobe-preview-panel { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(138px, 160px); gap: var(--sp-3); min-width: 0; }
.character-wardrobe-preview { display: grid; min-width: 0; margin: 0; }
.character-wardrobe-stage {
  display: grid;
  min-height: 286px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 14%, var(--surface-3)), var(--surface-1) 76%);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.character-wardrobe-stage .avatar-art-stack--figure { width: min(76%, 190px); filter: drop-shadow(0 16px 24px rgba(0,0,0,.34)); }
.character-wardrobe-preview figcaption { padding-top: var(--sp-1); color: var(--muted); font: 700 var(--type-meta)/var(--leading-label) var(--font-ui); text-align: center; }

.character-wardrobe-slots { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); min-width: 0; }
.character-wardrobe-slot {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 2px var(--sp-2);
  min-width: 0;
  min-height: 86px;
  padding: var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-3) 72%, transparent);
  color: var(--text-strong);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.character-wardrobe-slot-icon { grid-row: 1 / 3; color: var(--character-kicker-fg); font: 800 var(--type-heading)/1 var(--font-display); }
.character-wardrobe-slot b,
.character-wardrobe-slot small { display: block; min-width: 0; overflow-wrap: anywhere; }
.character-wardrobe-slot b { font-size: var(--type-control); line-height: var(--leading-ui); }
.character-wardrobe-slot small { margin-top: 2px; color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-label); }
.character-wardrobe-slot-state { grid-column: 2; color: var(--text-soft); font: 800 var(--type-meta)/var(--leading-label) var(--font-ui); letter-spacing: .035em; text-transform: uppercase; }
.character-wardrobe-slot.is-active { border-color: var(--text-strong); background: color-mix(in srgb, var(--accent) 13%, var(--surface-3)); box-shadow: inset 3px 0 0 var(--accent); }

.character-wardrobe-drawer { min-width: 0; padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-1) 78%, transparent); }
.character-wardrobe-drawer > header { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.character-wardrobe-drawer h4 { margin: 0; color: var(--text-strong); font: 750 var(--type-heading)/var(--leading-ui) var(--font-ui); }
.character-wardrobe-filters { display: flex; gap: var(--sp-1); padding: 3px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: var(--surface-2); }
.character-wardrobe-filters button {
  min-height: 34px;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-soft);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.character-wardrobe-filters button.is-active { background: var(--surface-4); color: var(--text-strong); }
.character-wardrobe-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.character-wardrobe-item {
  position: relative;
  display: grid;
  grid-template-rows: 76px auto auto;
  align-content: start;
  min-width: 0;
  min-height: 176px;
  padding: var(--sp-2);
  overflow: hidden;
  border: 1px solid var(--rarity-color);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-3) 82%, transparent);
  color: var(--text-strong);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.character-wardrobe-item.rarity-none { border-style: dashed; }
.character-wardrobe-item.rarity-rare { box-shadow: inset 0 0 0 2px var(--surface-3), inset 0 0 0 3px var(--rarity-color); }
.character-wardrobe-item.rarity-epic { clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); }
.character-wardrobe-item.rarity-epic::before,
.character-wardrobe-item.rarity-legendary::before { position: absolute; z-index: 2; right: 6px; top: 5px; color: var(--rarity-color); font-size: 12px; line-height: 1; }
.character-wardrobe-item.rarity-epic::before { content: "◆"; }
.character-wardrobe-item.rarity-legendary::before { content: "✦"; padding: 2px 4px; border: 1px double var(--rarity-color); }
.character-wardrobe-item.rarity-legendary { border-style: double; border-width: 3px; }
.character-wardrobe-item.is-equipped { background: color-mix(in srgb, var(--accent) 13%, var(--surface-3)); }
.character-wardrobe-item.is-equipped::after { position: absolute; z-index: 3; inset: 0 auto 0 0; width: 4px; content: ""; background: var(--text-strong); pointer-events: none; }
.character-wardrobe-item.is-new { background-image: radial-gradient(circle, color-mix(in srgb, var(--rarity-color) 38%, transparent) 1px, transparent 1.5px); background-size: 9px 9px; }
.character-wardrobe-item-art { position: relative; display: grid; width: 72px; height: 72px; place-self: center; place-items: center; overflow: hidden; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-1) 72%, transparent); }
.character-wardrobe-item-art.is-empty { border: 1px dashed var(--line-strong); color: var(--muted); font: 800 20px/1 var(--font-display); }
.character-wardrobe-item-art-rig { position: absolute; inset: 0; transform-origin: 50% 50%; }
.character-wardrobe-item-art-rig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.character-wardrobe-item-art.is-head .character-wardrobe-item-art-rig { transform: scale(4.1); transform-origin: 50% -5%; }
.character-wardrobe-item-art.is-neck .character-wardrobe-item-art-rig { transform: scale(3.5); transform-origin: 50% 25%; }
.character-wardrobe-item-art.is-back .character-wardrobe-item-art-rig { transform: scale(2.55); transform-origin: 63% 34%; }
.character-wardrobe-item-copy { display: grid; gap: 2px; min-width: 0; margin-top: var(--sp-1); }
.character-wardrobe-item-copy b { font-size: var(--type-meta); line-height: var(--leading-ui); overflow-wrap: anywhere; }
.character-wardrobe-rarity { color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 800; }
.character-wardrobe-item-badges { display: flex; flex-wrap: wrap; gap: 3px; align-self: end; margin-top: var(--sp-1); }
.character-wardrobe-item-badges span { padding: 3px 5px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-soft); font: 800 var(--type-meta)/var(--leading-label) var(--font-ui); }
.character-wardrobe-item-badges .is-equipped { border-color: var(--text-strong); color: var(--text-strong); }
.character-wardrobe-item-badges .is-new { border-style: dashed; border-color: var(--rarity-color); color: var(--text-strong); }
.character-wardrobe-empty { grid-column: 1 / -1; display: grid; min-height: 176px; place-content: center; gap: var(--sp-1); padding: var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--text-soft); text-align: center; }
.character-wardrobe-empty b { color: var(--text-strong); font: 750 var(--type-control)/var(--leading-ui) var(--font-ui); }
.character-wardrobe-empty span { font: var(--type-meta)/var(--leading-prose) var(--font-ui); }
.character-rarity-key-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }
.character-rarity-key { display: inline-flex; align-items: center; gap: 5px; color: var(--text-soft); font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); }
.character-rarity-key i { position: relative; display: inline-block; width: 22px; height: 17px; border: 1px solid var(--rarity-color); border-radius: 4px; }
.character-rarity-key.rarity-rare i { box-shadow: inset 0 0 0 2px var(--surface-1), inset 0 0 0 3px var(--rarity-color); }
.character-rarity-key.rarity-epic i { clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); }
.character-rarity-key.rarity-epic i::after { content: "◆"; position: absolute; right: -3px; top: -6px; color: var(--rarity-color); font-size: 8px; }
.character-rarity-key.rarity-legendary i { border-style: double; border-width: 3px; }
.character-rarity-key.rarity-legendary i::after { content: "✦"; position: absolute; right: -5px; top: -8px; color: var(--rarity-color); font-size: 9px; }
.character-wardrobe-note { margin: var(--sp-2) 0 0; color: var(--muted); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }

.character-secondary > h3 { margin: 0 0 var(--sp-2); color: var(--text-soft); font: 800 var(--type-meta)/var(--leading-label) var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.character-secondary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.character-secondary-panel { min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-2); }
.character-secondary-panel[open] { grid-column: 1 / -1; }
.character-secondary-panel > summary { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); color: var(--text-strong); font: var(--type-control)/var(--leading-ui) var(--font-ui); cursor: pointer; list-style: none; }
.character-secondary-panel > summary::-webkit-details-marker { display: none; }
.character-secondary-panel[open] > summary > span:last-child { rotate: 45deg; }
.character-secondary-body { padding: 0 var(--sp-2) var(--sp-2); }
.character-secondary-body > .card { margin: 0; border: 0; background: var(--surface-1); box-shadow: none; }
.character-secondary-body .avatar-core-stage { min-height: 360px; }
.character-secondary .avatar-editor-head p,
.character-secondary .avatar-editor-note { font-size: var(--type-body); line-height: var(--leading-prose); }
.character-secondary .avatar-core-pose-button strong { font-size: var(--type-control); line-height: var(--leading-ui); }
.character-secondary .avatar-core-pose-button small { font-size: var(--type-meta); line-height: var(--leading-prose); }
.character-secondary .body-form label { font-size: var(--type-meta); line-height: var(--leading-label); }
.character-secondary .body-form :is(input, select, button) { font-size: var(--type-control); line-height: var(--leading-ui); }
.character-secondary .character-body-save-status { grid-column: 1 / -1; min-height: 1.5em; margin: 0; color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-label); }
.character-secondary .bal-row { font-size: var(--type-control); line-height: var(--leading-ui); }
.character-secondary .bal-row.is-sub { font-size: var(--type-meta); }

:is(.character-wardrobe-slot, .character-wardrobe-item, .character-wardrobe-filters button, .character-secondary-panel > summary):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.character-secondary :is(button, input, select, .bal-row[role="button"]):focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .character-wardrobe-slot:hover,
  .character-wardrobe-item:hover { translate: 0 -1px; border-color: var(--text-soft); }
}

@media (max-width: 900px) {
  .character-wardrobe-layout { grid-template-columns: 1fr; }
  .character-wardrobe-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .character-wardrobe-v1 { padding: var(--sp-3); }
  .character-identity { grid-template-columns: 1fr; gap: var(--sp-2); padding-bottom: var(--sp-1); }
  .character-identity-chips :is(.ch-rank, .ch-arch, .ch-title) { width: auto; }
  .character-wardrobe-heading { padding: var(--sp-2) 0 var(--sp-1); }
  .character-wardrobe-heading p:last-child { font-size: var(--type-control); line-height: var(--leading-prose); }
  .character-wardrobe-preview-panel { grid-template-columns: minmax(0, 1fr) minmax(98px, 106px); gap: var(--sp-2); align-items: stretch; }
  .character-wardrobe-preview { grid-template-rows: 180px auto; }
  .character-wardrobe-stage { min-height: 180px; }
  .character-wardrobe-stage .avatar-art-stack--figure { width: min(70%, 120px); }
  .character-wardrobe-slots { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); }
  .character-wardrobe-slot { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; padding: var(--sp-1); text-align: center; }
  .character-wardrobe-slot-icon { display: none; }
  .character-wardrobe-slot-state { grid-column: 1; }
  .character-wardrobe-drawer { padding: var(--sp-2); }
  .character-wardrobe-drawer > header { align-items: start; }
  .character-wardrobe-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-wardrobe-item { min-height: 184px; }
  .character-secondary-grid { grid-template-columns: 1fr; }
  .character-secondary-panel[open] { grid-column: auto; }
  .character-secondary-body .avatar-core-stage { min-height: 320px; }
}

@media (min-width: 901px) and (max-height: 900px) {
  .character-wardrobe-preview-panel { align-self: start; block-size: 257px; }
  .character-wardrobe-stage { min-height: 236px; }
  .character-wardrobe-stage .avatar-art-stack--figure { width: min(76%, 152px); }
  .character-wardrobe-slots { gap: var(--sp-1); }
  .character-wardrobe-slot { min-height: 0; padding: var(--sp-1) var(--sp-2); }
}

@media (pointer: coarse), (max-width: 600px) {
  .character-wardrobe-slot,
  .character-wardrobe-item,
  .character-wardrobe-filters button,
  .character-secondary-panel > summary,
  .character-secondary :is(button, input, select, .bal-row[role="button"]) { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
}

@media (prefers-reduced-motion: reduce) {
  .character-wardrobe-v1 *,
  .character-wardrobe-v1 *::before,
  .character-wardrobe-v1 *::after,
  .character-secondary * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Skill Tree craft v115 */
:root {
  --tree-kicker-fg: #77ddf7;
  --tree-node-fg: #f7f9ff;
  --tree-meta-fg: #c2c9dd;
  --tree-node-surface: #202840;
  --tree-node-border: #637091;
  --tree-chip-surface: #171d31;
  --tree-chip-border: #596785;
  --tree-locked-fg: #d5daea;
  --tree-locked-surface: #171d31;
  --tree-locked-border: #8f9aba;
  --tree-available-fg: #f7f9ff;
  --tree-available-surface: #202840;
  --tree-available-border: #4fd6ff;
  --tree-unlocked-fg: #effaf3;
  --tree-unlocked-surface: #19352b;
  --tree-unlocked-border: #5fd184;
  --tree-capstone-fg: #ffedc2;
  --tree-capstone-surface: #352c26;
  --tree-capstone-border: #e0a23e;
  --tree-milestone-fg: #ffedc2;
  --tree-milestone-border: #e0a23e;
  --tree-tab-fg: #c2c9dd;
  --tree-tab-surface: #202840;
  --tree-tab-border: #637091;
  --tree-tab-active-fg: #a9edff;
  --tree-tab-active-surface: #183244;
  --tree-tab-active-border: #4fd6ff;
  --tree-detail-surface: #171d31;
  --tree-detail-border: #596785;
  --tree-selected-border: #f7f9ff;
  --tree-map-grid: rgba(132, 150, 205, .08);
}

:root[data-theme="light"] {
  --tree-kicker-fg: #075f78;
  --tree-node-fg: #101728;
  --tree-meta-fg: #3d4964;
  --tree-node-surface: #ffffff;
  --tree-node-border: #59657f;
  --tree-chip-surface: #e2e8f4;
  --tree-chip-border: #7b87a1;
  --tree-locked-fg: #3d4964;
  --tree-locked-surface: #f3f6fb;
  --tree-locked-border: #59657f;
  --tree-available-fg: #101728;
  --tree-available-surface: #e8f4f7;
  --tree-available-border: #075f78;
  --tree-unlocked-fg: #18341e;
  --tree-unlocked-surface: #e8f5ec;
  --tree-unlocked-border: #0f612b;
  --tree-capstone-fg: #5f3b00;
  --tree-capstone-surface: #fbf1dd;
  --tree-capstone-border: #805100;
  --tree-milestone-fg: #5f3b00;
  --tree-milestone-border: #805100;
  --tree-tab-fg: #3d4964;
  --tree-tab-surface: #eef2fa;
  --tree-tab-border: #7b87a1;
  --tree-tab-active-fg: #075f78;
  --tree-tab-active-surface: #e8f4f7;
  --tree-tab-active-border: #075f78;
  --tree-detail-surface: #f3f6fb;
  --tree-detail-border: #7b87a1;
  --tree-selected-border: #101728;
  --tree-map-grid: rgba(72, 87, 125, .10);
}

.tree-shell {
  min-inline-size: 0;
  gap: var(--sp-2);
  font-family: var(--font-ui);
}


.tree-hero {
  min-block-size: 0;
  grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
}

.tree-hero .th-kicker {
  color: var(--tree-kicker-fg);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.tree-hero h2 {
  margin: var(--sp-1) 0;
  color: var(--text-strong);
  font: 750 var(--type-title)/var(--leading-display) var(--font-display);
  letter-spacing: var(--tracking-natural);
  overflow-wrap: anywhere;
}

.tree-hero p {
  max-inline-size: var(--measure-compact);
  margin: 0;
  color: var(--tree-meta-fg);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-inline-size: 240px;
  gap: 0;
  border-block: 1px solid var(--line-soft);
}

.tree-hero-stats span {
  display: grid;
  min-inline-size: 0;
  gap: 2px;
  padding: var(--sp-2);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tree-hero-stats span + span { border-inline-start: 1px solid var(--line-soft); }

.tree-hero-stats b {
  color: var(--text-strong);
  font: 750 var(--type-brand)/var(--leading-tight) var(--font-number);
}

.tree-hero-stats small {
  color: var(--tree-meta-fg);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.tree-tabs-card {
  min-inline-size: 0;
  padding: var(--sp-1);
  overflow: hidden;
}

.tree-tabs {
  display: flex;
  min-inline-size: 0;
  max-inline-size: 100%;
  gap: var(--sp-1);
  padding: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.tree-tab {
  flex: 0 0 auto;
  min-block-size: 36px;
  padding: 7px 11px;
  appearance: none;
  border: 1px solid var(--tree-tab-border);
  border-inline-start: 3px solid var(--c);
  border-radius: var(--radius-pill);
  background: var(--tree-tab-surface);
  box-shadow: none;
  color: var(--tree-tab-fg);
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
  white-space: nowrap;
}

.tree-tab .muted { color: var(--tree-meta-fg); }

.tree-tab.active,
.tree-tab[aria-pressed="true"] {
  border-color: var(--tree-tab-active-border);
  border-inline-start-color: var(--c);
  background: var(--tree-tab-active-surface);
  box-shadow: inset 0 -3px 0 var(--tree-tab-active-border);
  color: var(--tree-tab-active-fg);
}

.tree-tab.active .muted,
.tree-tab[aria-pressed="true"] .muted { color: inherit; }

.tree-map-card {
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--sp-3);
  overflow: hidden;
}

.tree-head {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: nowrap;
}

.tree-head h3 {
  flex: 0 1 auto;
  min-inline-size: 0;
  margin: 0;
  color: var(--text-strong);
  font: 750 var(--type-heading)/var(--leading-ui) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-ctrls {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-1);
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.tree-points {
  flex: 0 0 auto;
  color: var(--tree-meta-fg);
  font: 750 var(--type-control)/var(--leading-ui) var(--font-ui);
  white-space: nowrap;
}

.tree-points b { color: var(--text-strong); font-family: var(--font-number); }

.tree-active {
  margin: var(--sp-1) 0;
  color: var(--tree-meta-fg);
  font: var(--type-meta)/var(--leading-label) var(--font-ui);
}

.tree-active .ta-label,
.perk-active {
  flex: 0 0 auto;
  color: var(--tree-meta-fg);
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
  white-space: nowrap;
}

.tree-map-lede {
  max-inline-size: var(--measure-compact);
  margin: var(--sp-1) 0 var(--sp-2);
  color: var(--tree-meta-fg);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-scroll {
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: clamp(224px, 52vh, 560px);
  margin-inline: calc(-1 * var(--sp-3));
  padding: var(--sp-3);
  padding-block-start: calc(var(--sp-4) + var(--sp-1));
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  background:
    linear-gradient(var(--tree-map-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tree-map-grid) 1px, transparent 1px);
  background-size: 34px 34px;
}

.tree {
  position: relative;
  margin: 0;
}

.tree-node {
  position: absolute;
  display: grid;
  inline-size: 168px;
  block-size: 96px;
  min-inline-size: 168px;
  min-block-size: 96px;
  grid-template-rows: auto minmax(0, 2.4em) auto auto;
  align-content: center;
  align-items: center;
  gap: 1px;
  padding: 6px var(--sp-2);
  overflow: visible;
  appearance: none;
  border: 2px solid var(--tree-node-border);
  border-radius: var(--radius-md);
  background: var(--tree-node-surface);
  box-shadow: none;
  color: var(--tree-node-fg);
  font-family: var(--font-ui);
  text-align: center;
  cursor: pointer;
  isolation: isolate;
}

.tn-state {
  display: inline-flex;
  max-inline-size: 100%;
  min-block-size: 16px;
  place-self: center;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-inline: 5px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  color: inherit;
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tn-title {
  display: -webkit-box;
  min-inline-size: 0;
  min-block-size: 2.4em;
  max-block-size: 2.4em;
  overflow: hidden;
  color: inherit;
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tn-perks {
  display: flex;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 18px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  flex-wrap: nowrap;
}

.tn-perk {
  flex: 0 0 auto;
  padding: 1px 4px;
  border: 1px solid var(--tree-chip-border);
  border-radius: var(--radius-pill);
  background: var(--tree-chip-surface);
  color: inherit;
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
  white-space: nowrap;
}

.tn-cost {
  min-inline-size: 0;
  color: var(--tree-meta-fg);
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
  white-space: nowrap;
}

.tree-node.locked {
  opacity: 1;
  border-color: var(--tree-locked-border);
  border-style: dashed;
  background: var(--tree-locked-surface);
  box-shadow: none;
  color: var(--tree-locked-fg);
}

.tree-node.locked :is(.tn-state, .tn-cost) { color: var(--tree-locked-fg); }

.tree-node.available {
  border-color: var(--tree-available-border);
  border-style: solid;
  background: var(--tree-available-surface);
  box-shadow: inset 4px 0 0 var(--c);
  color: var(--tree-available-fg);
}

.tree-node.available::before {
  position: absolute;
  z-index: 2;
  inset-block-start: -2px;
  inset-inline-end: 14px;
  inline-size: 18px;
  block-size: 8px;
  background: var(--tree-available-border);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%);
  content: "";
}

.tree-node.available :is(.tn-state, .tn-cost) { color: var(--tree-available-fg); }

.tree-node.unlocked {
  border-color: var(--tree-unlocked-border);
  border-style: solid;
  background: var(--tree-unlocked-surface);
  box-shadow: inset 4px 0 0 var(--tree-unlocked-border);
  color: var(--tree-unlocked-fg);
}

.tree-node.unlocked :is(.tn-state, .tn-cost) { color: var(--tree-unlocked-fg); }

.tree-node.capstone {
  border: 4px double var(--tree-capstone-border);
  background: var(--tree-capstone-surface);
  box-shadow: none;
  color: var(--tree-capstone-fg);
}

.tree-node.capstone :is(.tn-state, .tn-cost) { color: var(--tree-capstone-fg); }

.tree-node.capstone.unlocked {
  border-color: var(--tree-capstone-border);
  background: var(--tree-capstone-surface);
  box-shadow: var(--glow-legendary);
}

.tree-node.capstone:not(.unlocked) {
  box-shadow: none;
  animation: none;
}

.tn-crown {
  inset-block-start: -15px;
  color: var(--tree-capstone-border);
  font-size: var(--type-heading);
  line-height: 1;
}

.tree-node.milestone {
  border-color: var(--tree-milestone-border);
  border-style: dashed;
  background: var(--tree-capstone-surface);
  box-shadow: none;
  color: var(--tree-milestone-fg);
}

.tree-node.milestone.unlocked {
  border-color: var(--tree-milestone-border);
  border-style: solid;
  background: var(--tree-capstone-surface);
  box-shadow: inset 4px 0 0 var(--tree-milestone-border);
}

.tree-node.milestone :is(.tn-state, .tn-cost) { color: var(--tree-milestone-fg); }

.tree-node.editing,
.tree.edit .tree-node {
  opacity: 1;
  border: 2px dashed var(--tree-node-border);
  background: var(--tree-node-surface);
  box-shadow: none;
  color: var(--tree-node-fg);
}

.tree-node.sel {
  border-color: var(--tree-selected-border) !important;
  outline: 2px solid var(--tree-selected-border);
  outline-offset: 2px;
}

@keyframes tree-recommend-v115 {
  0%, 100% { box-shadow: inset 4px 0 0 var(--c), 0 0 0 0 transparent; }
  45% { box-shadow: inset 4px 0 0 var(--c), 0 0 0 4px color-mix(in srgb, var(--tree-available-border) 42%, transparent); }
}

.tree-node.recommend {
  z-index: 2;
  animation: tree-recommend-v115 1560ms var(--ease-out) 3;
}

.tree-node.recommend.sel,
.tree-node.recommend:focus-visible { animation: none; }

.tree-tab:focus-visible,
.tree-node:focus-visible,
.tree-detail-close:focus-visible,
.tree-detail-primary:focus-visible,
.tree-panel :is(button, input):focus-visible,
.tree-guide summary:focus-visible,
[data-tree-dialog] :is(button, input, textarea, select):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}

.tree-scroll:focus-visible,
.tree-detail:focus-visible,
.tree-panel:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: -2px;
}

.tree-detail,
.tree-panel {
  min-inline-size: 0;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border: 0;
  border-top: 1px solid var(--tree-detail-border);
  background: transparent;
  color: var(--tree-node-fg);
  font-family: var(--font-ui);
}

.tree-detail-head {
  display: flex;
  min-inline-size: 0;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.tree-detail-head > div { min-inline-size: 0; }

.tree-detail-head h4 {
  margin: var(--sp-1) 0 0;
  color: var(--text-strong);
  font: 750 var(--type-heading)/var(--leading-ui) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-detail-kicker {
  color: var(--tree-meta-fg);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.tree-detail-kicker.locked { color: var(--tree-locked-fg); }
.tree-detail-kicker.available { color: var(--tree-available-border); }
.tree-detail-kicker.unlocked { color: var(--tree-unlocked-border); }

.tree-detail-close {
  display: inline-grid;
  flex: 0 0 auto;
  inline-size: 34px;
  block-size: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--tree-detail-border);
  border-radius: var(--radius-sm);
  background: var(--tree-detail-surface);
  color: var(--text-strong);
  font: 750 var(--type-control)/1 var(--font-ui);
  cursor: pointer;
}

.tree-detail-copy {
  max-inline-size: var(--measure-compact);
  margin: var(--sp-2) 0 0;
  color: var(--tree-meta-fg);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.tree-detail-grid > div { min-inline-size: 0; }
.tree-detail-grid b { color: var(--text-strong); font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); }

.tree-detail-perks,
.tree-detail-reqs {
  display: flex;
  min-inline-size: 0;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.tree-detail-perk,
.tree-detail-req {
  display: inline-flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 7px;
  border: 1px solid var(--tree-detail-border);
  border-radius: var(--radius-pill);
  background: var(--tree-detail-surface);
  color: var(--tree-meta-fg);
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-detail-req.is-met { border-style: solid; color: var(--tree-unlocked-fg); }

.tree-detail-actions { margin-top: var(--sp-3); }
.tree-detail-primary { font: 750 var(--type-control)/var(--leading-ui) var(--font-ui); }

.tree-detail-reason {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  color: var(--tree-locked-fg);
  font: var(--type-control)/var(--leading-ui) var(--font-ui);
}

.tree-detail-reason.is-unlocked { color: var(--tree-unlocked-fg); }

.tree-panel .tp-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.tree-panel .tp-grid label {
  color: var(--tree-meta-fg);
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
}

.tree-panel .tp-grid input { font: var(--type-control)/var(--leading-ui) var(--font-ui); }

.tree-panel :is(.tp-reqs, .tree-nudge, .tp-actions) {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
  color: var(--tree-meta-fg);
  font: var(--type-meta)/var(--leading-ui) var(--font-ui);
}

.tree-panel .tp-req {
  min-inline-size: 0;
  border-color: var(--tree-detail-border);
  background: var(--tree-detail-surface);
  color: var(--tree-meta-fg);
  font: var(--type-meta)/var(--leading-label) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-guide {
  padding: var(--sp-2) var(--sp-3);
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.tree-guide > summary {
  display: flex;
  min-block-size: 42px;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--text-strong);
  font: 750 var(--type-control)/var(--leading-ui) var(--font-ui);
  cursor: pointer;
  list-style: none;
}

.tree-guide > summary::-webkit-details-marker { display: none; }
.tree-guide > summary small { color: var(--tree-meta-fg); font: var(--type-meta)/var(--leading-label) var(--font-ui); text-align: end; }
.tree-guide > summary::after { content: "+"; flex: 0 0 auto; color: var(--tree-kicker-fg); font: 800 var(--type-heading)/1 var(--font-ui); }
.tree-guide[open] > summary::after { content: "−"; }
.tree-guide .tg-row { margin-top: var(--sp-2); }
.tree-guide .tg-say { color: var(--tree-node-fg); font: var(--type-control)/var(--leading-prose) var(--font-ui); }
.tree-guide .tg-say > span,
.tree-guide .tg-hint { font: var(--type-meta)/var(--leading-prose) var(--font-ui); }

.tree-load-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-3);
  min-inline-size: 0;
  padding: var(--sp-4);
  border: 1px dashed var(--tree-locked-border);
  background: var(--tree-locked-surface);
  box-shadow: none;
  color: var(--tree-locked-fg);
}

.tree-load-error-icon {
  display: inline-grid;
  inline-size: 32px;
  block-size: 32px;
  place-items: center;
  border: 1px dashed var(--tree-locked-border);
  border-radius: var(--radius-sm);
  color: var(--tree-locked-fg);
  font: 800 var(--type-heading)/1 var(--font-ui);
}

.tree-load-error > div { min-inline-size: 0; }

.tree-load-error h3 {
  margin: 0;
  color: var(--text-strong);
  font: 750 var(--type-heading)/var(--leading-ui) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-load-error p {
  max-inline-size: var(--measure-compact);
  margin: var(--sp-1) 0 0;
  color: var(--tree-locked-fg);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-load-error p.muted {
  color: var(--tree-meta-fg);
  font-size: var(--type-meta);
}

.tree-load-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.tree-load-actions .btn {
  min-block-size: var(--touch-min);
  font: 750 var(--type-control)/var(--leading-ui) var(--font-ui);
}

[data-tree-dialog] .ai-box { color: var(--tree-node-fg); font-family: var(--font-ui); }
[data-tree-dialog] .ai-box h2 { color: var(--text-strong); font: 750 var(--type-title)/var(--leading-display) var(--font-display); overflow-wrap: anywhere; }
[data-tree-dialog] .ai-box .sg-what { color: var(--tree-node-fg); font: var(--type-body)/var(--leading-prose) var(--font-ui); }
[data-tree-dialog] .ai-box p.muted { color: var(--tree-meta-fg); font-size: var(--type-meta) !important; line-height: var(--leading-prose) !important; }

@media (hover: hover) and (pointer: fine) {
  .tree-tab:hover { border-color: var(--tree-tab-active-border); }
  .tree-node:hover { translate: 0 -1px; }
}

@media (max-width: 600px) {
  .tree-shell { gap: var(--sp-1); }

  .tree-hero {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  .tree-hero h2 { margin-block: 2px; }
  .tree-hero p { font-size: var(--type-meta); line-height: var(--leading-prose); }

  .tree-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    inline-size: 100%;
    min-inline-size: 0;
  }

  .tree-hero-stats span { padding: 6px var(--sp-1); }
  .tree-hero-stats b { font-size: var(--type-heading); }

  .tree-tabs-card { padding: 2px; }

  .tree-map-card { padding: var(--sp-2); }
  .tree-head { gap: var(--sp-1); }
  .tree-head h3 { font-size: var(--type-control); }

  .tree-ctrls { justify-content: flex-start; }

  .tree-active {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .tree-map-lede { margin-block: 2px var(--sp-1); }

  .tree-scroll {
    max-block-size: clamp(180px, 31vh, 252px);
    margin-inline: calc(-1 * var(--sp-2));
    padding: var(--sp-2);
    padding-block-start: calc(var(--sp-4) + var(--sp-1));
  }

  .tree-detail,
  .tree-panel { margin-top: var(--sp-2); padding-top: var(--sp-2); }

  .tree-detail-grid,
  .tree-panel .tp-grid { grid-template-columns: 1fr; gap: var(--sp-2); }

  .tree-detail-head { gap: var(--sp-2); }
  .tree-detail-copy { font-size: var(--type-control); }

  .tree-guide { padding: var(--sp-1) var(--sp-2); }
  .tree-guide > summary { gap: var(--sp-2); }
  .tree-guide > summary small { max-inline-size: 50%; }

  .tree-load-error {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  .tree-load-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .tree-load-actions .btn { flex: 1 1 150px; }
}

@media (pointer: coarse), (max-width: 600px) {
  .tree-tab,
  .tree-ctrls .btn,
  .tree-detail-close,
  .tree-detail-primary,
  .tree-panel :is(button, input, .tp-req),
  .tree-guide > summary,
  .tree-load-actions .btn,
  [data-tree-dialog] :is(button, input, textarea, select) {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tree-shell *,
  .tree-shell *::before,
  .tree-shell *::after,
  [data-tree-dialog] * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Trust / Control craft v116 */
:is(#path-choice-modal, .path-card-settings, .path-teaser) {
  --path-stage-bg: #0b0f1a;
  --path-box-bg: #111827;
  --path-stage-fg: #f7f9ff;
  --path-stage-muted: #c2c9dd;
  --path-stage-line: #687493;
  --path-divider: #8994b0;
  --path-shadow: 0 24px 72px rgba(0, 0, 0, .44);
  --path-trust-field: #211d3a;
  --path-trust-field-strong: #302754;
  --path-trust-border: #a99aff;
  --path-trust-fg: #cfc5ff;
  --path-trust-action: #b7a8ff;
  --path-control-field: #122a34;
  --path-control-field-strong: #183b48;
  --path-control-border: #72def3;
  --path-control-fg: #9beaf8;
  --path-control-action: #79e1f2;
  --path-state-bg: #f7f9ff;
  --path-state-fg: #101728;
  --path-disabled-bg: #30394f;
  --path-disabled-fg: #c2c9dd;
}

:root[data-theme="light"] :is(#path-choice-modal, .path-card-settings, .path-teaser) {
  --path-stage-bg: #edf1f8;
  --path-box-bg: #ffffff;
  --path-stage-fg: #101728;
  --path-stage-muted: #3d4964;
  --path-stage-line: #65718c;
  --path-divider: #65718c;
  --path-shadow: 0 22px 58px rgba(40, 52, 90, .16);
  --path-trust-field: #f0edff;
  --path-trust-field-strong: #e5dfff;
  --path-trust-border: #5d48a9;
  --path-trust-fg: #4d388f;
  --path-trust-action: #b7a8ff;
  --path-control-field: #e6f4f7;
  --path-control-field-strong: #d8edf2;
  --path-control-border: #075f78;
  --path-control-fg: #075f78;
  --path-control-action: #79e1f2;
  --path-state-bg: #101728;
  --path-state-fg: #ffffff;
  --path-disabled-bg: #dbe1ed;
  --path-disabled-fg: #3d4964;
}

html:has(#path-choice-modal),
body:has(#path-choice-modal) {
  overflow: hidden;
  overscroll-behavior: none;
}

@keyframes path-choice-stage-in-v116 {
  from { opacity: 0; }
  to { opacity: 1; }
}

#path-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 100dvh;
  min-block-size: 100dvh;
  max-block-size: 100dvh;
  place-items: start center;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
  background:
    linear-gradient(118deg, var(--path-trust-field) 0, transparent 44%),
    linear-gradient(242deg, var(--path-control-field) 0, transparent 44%),
    var(--path-stage-bg);
  color: var(--path-stage-fg);
  font-family: var(--font-ui);
  text-align: start;
  animation: path-choice-stage-in-v116 var(--dur-normal) var(--ease-out) both;
}

#path-choice-modal .path-choice-box {
  position: relative;
  display: flex;
  inline-size: min(1120px, 100%);
  min-inline-size: 0;
  min-block-size: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  margin: auto;
  padding: clamp(58px, 7dvh, 72px) clamp(20px, 3vw, 40px) clamp(20px, 3dvh, 32px);
  overflow: clip;
  flex-direction: column;
  border: 1px solid var(--path-stage-line);
  border-radius: var(--radius-xl);
  background: var(--path-box-bg);
  box-shadow: var(--path-shadow);
  color: var(--path-stage-fg);
  text-align: start;
  animation: none;
  isolation: isolate;
}

#path-choice-modal .path-choice-box::before,
#path-choice-modal .path-choice-box::after {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inline-size: 46%;
  opacity: .24;
  pointer-events: none;
  content: "";
}

#path-choice-modal .path-choice-box::before {
  inset-inline-start: 0;
  background: linear-gradient(142deg, var(--path-trust-field-strong), transparent 72%);
  clip-path: polygon(0 0, 100% 0, 74% 100%, 0 84%);
}

#path-choice-modal .path-choice-box::after {
  inset-inline-end: 0;
  background: linear-gradient(218deg, var(--path-control-field-strong), transparent 72%);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 26% 100%);
}

#path-choice-modal .modal-x {
  position: fixed;
  z-index: 4;
  inset-block-start: max(16px, env(safe-area-inset-top));
  inset-inline-end: max(16px, env(safe-area-inset-right));
  display: inline-grid;
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  place-items: center;
  padding: 0;
  border: 1px solid var(--path-stage-line);
  border-radius: var(--radius-md);
  background: var(--path-box-bg);
  box-shadow: var(--shadow-card);
  color: var(--path-stage-fg);
  font: 750 var(--type-control)/1 var(--font-ui);
  cursor: pointer;
  transform: none;
  transition: none;
}

#path-choice-modal :is(.path-choice-head, .path-choice-header) {
  position: relative;
  z-index: 1;
  display: grid;
  min-inline-size: 0;
  justify-items: center;
  gap: var(--sp-2);
  text-align: center;
}

#path-choice-modal :is(.path-choice-kicker, .path-card-kicker) {
  color: var(--path-stage-muted);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

#path-choice-modal .path-choice-title {
  position: relative;
  z-index: 1;
  max-inline-size: var(--measure-dialog);
  margin: 0 auto;
  color: var(--path-stage-fg);
  font: 750 var(--type-title)/var(--leading-display) var(--font-display);
  letter-spacing: var(--tracking-natural);
  text-align: center;
  overflow-wrap: anywhere;
}

#path-choice-modal .path-choice-title:focus { outline: none; }

#path-choice-modal :is(.path-choice-sub, .path-choice-intro, .path-choice-description, .path-choice-lore) {
  position: relative;
  z-index: 1;
  inline-size: min(100%, var(--measure-dialog));
  margin: var(--sp-2) auto 0;
  color: var(--path-stage-muted);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
  text-align: center;
  overflow-wrap: anywhere;
}

#path-choice-modal .path-choice-lore { font-size: var(--type-control); }

#path-choice-modal .path-cards {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  min-inline-size: 0;
  min-block-size: clamp(360px, 50dvh, 560px);
  gap: clamp(28px, 4vw, 52px);
  margin-block-start: clamp(18px, 3dvh, 28px);
}

#path-choice-modal .path-cards::before,
#path-choice-modal .path-cards::after {
  position: absolute;
  z-index: 0;
  inset-inline-start: 50%;
  pointer-events: none;
  content: "";
}

#path-choice-modal .path-cards::before {
  inset-block: 10%;
  inline-size: 1px;
  background: var(--path-divider);
}

#path-choice-modal .path-cards::after {
  inset-block-start: 50%;
  inline-size: 13px;
  block-size: 13px;
  border: 2px solid var(--path-divider);
  background: var(--path-box-bg);
  transform: translate(-46%, -50%) rotate(45deg);
}

#path-choice-modal .path-card {
  --path-card-field: var(--path-trust-field);
  --path-card-field-strong: var(--path-trust-field-strong);
  --path-card-border: var(--path-trust-border);
  --path-card-purpose-fg: var(--path-trust-fg);
  --path-card-action: var(--path-trust-action);
  position: relative;
  z-index: 1;
  display: flex;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  block-size: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sp-2);
  padding: clamp(18px, 2.4vw, 28px);
  overflow: visible;
  flex-direction: column;
  appearance: none;
  border: 2px solid var(--path-card-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, var(--path-card-field-strong), var(--path-card-field) 48%);
  box-shadow: none;
  color: var(--path-stage-fg);
  font-family: var(--font-ui);
  text-align: start;
  cursor: pointer;
  transform: none;
  transition: none;
  isolation: isolate;
}

#path-choice-modal .path-card[data-path="control"] {
  --path-card-field: var(--path-control-field);
  --path-card-field-strong: var(--path-control-field-strong);
  --path-card-border: var(--path-control-border);
  --path-card-purpose-fg: var(--path-control-fg);
  --path-card-action: var(--path-control-action);
}

#path-choice-modal .path-card::before { content: none; }

#path-choice-modal .path-card::after {
  position: absolute;
  z-index: 2;
  inset-block-start: -2px;
  inset-inline-end: 18px;
  inline-size: 24px;
  block-size: 10px;
  background: var(--path-state-bg);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%);
  opacity: 0;
  pointer-events: none;
  content: "";
}

#path-choice-modal .path-card:is(.is-current, [data-current="true"]) {
  border-width: 4px;
  border-style: double;
}

#path-choice-modal .path-card:is(.is-selected, [aria-pressed="true"]) {
  outline: 3px solid var(--path-state-bg);
  outline-offset: 3px;
  box-shadow: inset 0 -6px 0 var(--path-state-bg);
}

#path-choice-modal .path-card:is(.is-selected, [aria-pressed="true"])::after { opacity: 1; }

#path-choice-modal .path-card-mascot {
  display: grid;
  inline-size: 76px;
  block-size: 76px;
  min-inline-size: 76px;
  min-block-size: 76px;
  margin: 0 0 var(--sp-1);
  place-items: center;
  overflow: clip;
  border: 1px solid var(--path-card-border);
  border-radius: var(--radius-lg);
  background: var(--path-box-bg);
  box-shadow: none;
}

#path-choice-modal .path-card-mascot :is(img, svg, video, [data-shadow-rig]) {
  max-inline-size: 100%;
  max-block-size: 100%;
}

#path-choice-modal .path-card .path-glyph {
  position: absolute;
  inset-block-start: clamp(18px, 2.4vw, 28px);
  inset-inline-end: clamp(18px, 2.4vw, 28px);
  display: grid;
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  place-items: center;
  border: 1px solid var(--path-card-border);
  border-radius: var(--radius-md);
  background: var(--path-box-bg);
  color: var(--path-card-purpose-fg);
  font: 750 var(--type-heading)/1 var(--font-display);
}

#path-choice-modal .path-card :is(h3, .path-card-title) {
  max-inline-size: calc(100% - 4px);
  margin: var(--sp-1) 0 0;
  color: var(--path-stage-fg);
  font: 750 var(--type-brand)/var(--leading-display) var(--font-display);
  letter-spacing: var(--tracking-natural);
  overflow-wrap: anywhere;
}

#path-choice-modal .path-card .path-tag {
  color: var(--path-card-purpose-fg);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#path-choice-modal .path-card .path-pitch {
  inline-size: min(100%, var(--measure-dialog));
  min-block-size: 0;
  margin: var(--sp-1) 0 0;
  color: var(--path-stage-muted);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}

#path-choice-modal :is(.path-consequences, .path-card-consequences) {
  display: grid;
  inline-size: min(100%, var(--measure-dialog));
  min-inline-size: 0;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: 0;
  color: var(--path-stage-fg);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
  list-style: none;
}

#path-choice-modal :is(.path-consequences, .path-card-consequences) li {
  position: relative;
  min-inline-size: 0;
  padding-inline-start: 22px;
  overflow-wrap: anywhere;
}

#path-choice-modal .path-consequences-title {
  color: var(--path-card-purpose-fg);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

#path-choice-modal .path-consequence {
  display: block;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

#path-choice-modal :is(.path-consequences, .path-card-consequences) li::before {
  position: absolute;
  inset-block-start: .15em;
  inset-inline-start: 0;
  color: var(--path-card-purpose-fg);
  font-weight: 900;
  content: "◇";
}

#path-choice-modal :is(.path-card-state, .path-card-status, .path-state, .path-current-marker, .path-selected-marker) {
  display: inline-flex;
  min-block-size: 26px;
  max-inline-size: 100%;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 8px;
  border: 1px solid var(--path-stage-line);
  border-radius: var(--radius-pill);
  background: var(--path-state-bg);
  color: var(--path-state-fg);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

#path-choice-modal .path-card .path-choose-btn {
  display: grid;
  inline-size: 100%;
  min-block-size: var(--touch-min);
  margin-block-start: auto;
  place-items: center;
  padding: 8px 12px;
  border: 1px solid var(--path-card-border);
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
  color: var(--path-stage-fg);
  font: 750 var(--type-control)/var(--leading-ui) var(--font-ui);
}

#path-choice-modal :is(.path-choice-actions, .path-choice-footer) {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  min-inline-size: 0;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: clamp(18px, 3dvh, 28px);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--path-stage-line);
}

#path-choice-modal .path-choice-status {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--path-stage-muted);
  font: var(--type-control)/var(--leading-ui) var(--font-ui);
  overflow-wrap: anywhere;
}

#path-choice-modal :is(.path-choice-confirm, .path-choice-cancel) {
  min-inline-size: min(240px, 100%);
  min-block-size: var(--touch-min);
  padding: 9px 18px;
  font: 750 var(--type-control)/var(--leading-ui) var(--font-ui);
  transform: none;
  transition: none;
}

#path-choice-modal .path-choice-confirm {
  border: 1px solid var(--path-stage-line);
  background: var(--path-disabled-bg);
  color: var(--on-accent) !important;
  box-shadow: none;
}

#path-choice-modal:is([data-selected="trust"], [data-pending-path="trust"], [data-path-pending="trust"]) .path-choice-confirm,
#path-choice-modal :is(.path-choice-box[data-pending-path="trust"], .path-choice-box[data-path-pending="trust"]) .path-choice-confirm {
  border-color: var(--path-trust-border);
  background: var(--path-trust-action);
}

#path-choice-modal:is([data-selected="control"], [data-pending-path="control"], [data-path-pending="control"]) .path-choice-confirm,
#path-choice-modal :is(.path-choice-box[data-pending-path="control"], .path-choice-box[data-path-pending="control"]) .path-choice-confirm {
  border-color: var(--path-control-border);
  background: var(--path-control-action);
}

#path-choice-modal .path-choice-confirm:disabled {
  border-color: var(--path-stage-line);
  background: var(--path-disabled-bg);
  color: var(--path-disabled-fg) !important;
  cursor: not-allowed;
  opacity: 1;
}

#path-choice-modal .path-choice-cancel {
  border-color: var(--path-stage-line);
  background: transparent;
  color: var(--path-stage-fg);
}

#path-choice-modal :is(.path-card, .modal-x, .path-choice-confirm, .path-choice-cancel):focus-visible,
.path-card-settings :is(.path-opt, button, input):focus-visible,
.path-teaser .pt-acts .btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}

#path-choice-modal .path-card:is(.is-selected, [aria-pressed="true"]):focus-visible {
  box-shadow: var(--focus-ring), inset 0 -6px 0 var(--path-state-bg) !important;
}

.path-card-settings {
  color: var(--text);
  font-family: var(--font-ui);
}

.path-card-settings h3 {
  color: var(--text-strong);
  font: 750 var(--type-heading)/var(--leading-display) var(--font-display);
  overflow-wrap: anywhere;
}

.path-card-settings .path-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.path-card-settings .path-opt {
  position: relative;
  min-inline-size: 0;
  min-block-size: 72px;
  padding: var(--sp-3);
  border: 2px solid var(--path-trust-border);
  background: var(--path-trust-field);
  color: var(--text-strong);
  font: 750 var(--type-control)/var(--leading-ui) var(--font-ui);
  transform: none;
  transition: none;
}

.path-card-settings .path-opt[data-path="control"] {
  border-color: var(--path-control-border);
  background: var(--path-control-field);
}

.path-card-settings .path-opt:is(.active, .is-current, [aria-pressed="true"]) {
  border-width: 4px;
  border-style: double;
  box-shadow: inset 0 -5px 0 var(--path-state-bg);
}

.path-card-settings .path-opt-name {
  color: var(--text-strong);
  font: 750 var(--type-heading)/var(--leading-display) var(--font-display);
  overflow-wrap: anywhere;
}

.path-card-settings .path-opt-tag,
.path-card-settings :is(.path-opt-state, .path-current-marker) {
  color: var(--text-soft);
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
  overflow-wrap: anywhere;
}

.path-card-settings :is(.path-review, [data-action="review-paths"], [data-action="review-path-choice"]) {
  min-block-size: var(--touch-min);
  margin-block-start: var(--sp-2);
  font: 750 var(--type-control)/var(--leading-ui) var(--font-ui);
}

.path-card-settings :is(.path-settings-row, .path-extra, label) {
  color: var(--text-soft);
  font: var(--type-control)/var(--leading-ui) var(--font-ui);
}

.path-teaser .pt-body p {
  color: var(--text);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
}

.path-teaser .pt-acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--sp-2);
}

.path-teaser .pt-acts .btn {
  min-block-size: var(--touch-min);
  font: 750 var(--type-control)/var(--leading-ui) var(--font-ui);
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  #path-choice-modal .path-card,
  #path-choice-modal :is(.modal-x, .path-choice-confirm, .path-choice-cancel),
  .path-card-settings .path-opt,
  .path-teaser .pt-acts .btn {
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }

  #path-choice-modal .path-card:hover,
  .path-card-settings .path-opt:hover { transform: translateY(-2px); }

  #path-choice-modal :is(.modal-x, .path-choice-confirm:not(:disabled), .path-choice-cancel):hover,
  .path-teaser .pt-acts .btn:hover { transform: translateY(-1px); }

  #path-choice-modal .path-card:focus-visible,
  .path-card-settings .path-opt:focus-visible { transform: none; }
}

@media (min-width: 761px) and (max-height: 900px) {
  #path-choice-modal .path-choice-box {
    padding-block-start: 28px;
    padding-block-end: var(--sp-3);
  }

  #path-choice-modal :is(.path-choice-intro, .path-choice-lore) {
    inline-size: min(100%, var(--measure-prose));
    margin-block-start: var(--sp-1);
  }

  #path-choice-modal .path-cards {
    min-block-size: 0;
    margin-block-start: var(--sp-3);
  }

  #path-choice-modal :is(.path-choice-actions, .path-choice-footer) {
    margin-block-start: var(--sp-2);
    padding-block-start: var(--sp-2);
  }
}

@media (max-width: 760px) {
  #path-choice-modal {
    padding:
      calc(12px + env(safe-area-inset-top))
      calc(12px + env(safe-area-inset-right))
      calc(12px + env(safe-area-inset-bottom))
      calc(12px + env(safe-area-inset-left));
    scrollbar-gutter: auto;
  }

  #path-choice-modal .path-choice-box {
    inline-size: 100%;
    min-block-size: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0;
    padding: 58px var(--sp-3) var(--sp-3);
    border-radius: var(--radius-lg);
  }

  #path-choice-modal .path-cards {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 0;
    gap: var(--sp-4);
    margin-block-start: var(--sp-4);
  }

  #path-choice-modal .path-cards::before,
  #path-choice-modal .path-cards::after { content: none; }

  #path-choice-modal .path-card {
    block-size: auto;
    min-block-size: 0;
    padding: var(--sp-4);
    border-radius: var(--radius-lg);
  }

  #path-choice-modal .path-card .path-pitch,
  #path-choice-modal :is(.path-consequences, .path-card-consequences) {
    inline-size: min(100%, var(--measure-dialog));
    min-inline-size: min(24ch, 100%);
  }

  #path-choice-modal :is(.path-choice-actions, .path-choice-footer) {
    position: sticky;
    inset-block-end: 0;
    flex-direction: column;
    align-items: stretch;
    margin: var(--sp-4) calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3));
    padding: var(--sp-3) var(--sp-3) max(var(--sp-3), env(safe-area-inset-bottom));
    background: var(--path-box-bg);
  }

  #path-choice-modal .path-choice-status { flex: 0 1 auto; }

  #path-choice-modal :is(.path-choice-confirm, .path-choice-cancel) {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .path-teaser .pt-acts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .path-card-settings .path-opts { grid-template-columns: minmax(0, 1fr); }
  .path-teaser .pt-acts { grid-template-columns: minmax(0, 1fr); }
}

@media (pointer: coarse), (max-width: 600px) {
  #path-choice-modal :is(button, [role="button"], input, select, textarea),
  .path-card-settings :is(.path-opt, button, input, select, textarea),
  .path-card-settings label,
  .path-teaser .pt-acts .btn {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  #path-choice-modal,
  #path-choice-modal *,
  #path-choice-modal *::before,
  #path-choice-modal *::after,
  .path-card-settings :is(.path-opt, button),
  .path-teaser .pt-acts .btn {
    animation: none !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  #path-choice-modal .path-card:hover,
  #path-choice-modal :is(.modal-x, .path-choice-confirm, .path-choice-cancel):hover,
  .path-card-settings .path-opt:hover,
  .path-teaser .pt-acts .btn:hover { transform: none !important; }
}

/* ==========================================================
   Plan Day v118 — work first, drag as enhancement
   ========================================================== */
:root {
  --calendar-active-fg: #9feaff;
  --calendar-today-fg: #9feaff;
}
:root[data-theme="light"] {
  --calendar-active-fg: #075f78;
  --calendar-today-fg: #075f78;
}

.calendar-shell {
  display: grid;
  width: min(100%, var(--layout-max));
  margin-inline: auto;
  gap: var(--sp-3);
}

.calendar-shell .calv-head {
  display: grid;
  gap: var(--sp-3);
  overflow: visible;
  border-color: var(--line-soft);
  background: var(--surface-1);
  box-shadow: none;
}
.calendar-shell .calv-head::after { content: none; }
.calendar-shell .calv-title {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(300px, auto);
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
}
.calendar-shell .calv-title-main {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min) auto auto;
  gap: var(--sp-2);
  align-items: center;
  min-width: 0;
}
.calendar-shell .calv-title h2 {
  min-width: 0;
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-natural);
  overflow-wrap: anywhere;
}
.calendar-shell .calv-title h2 .muted {
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: inherit;
}
.calendar-shell .calv-title-main > .btn {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  padding-inline: var(--sp-2);
}
.calendar-shell .calv-title .wk-load {
  margin: 0;
  padding: var(--sp-1) var(--sp-2);
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-data);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  white-space: nowrap;
}

.calendar-shell .cal-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 250px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: none;
}
.calendar-shell .cal-mode {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  padding: var(--sp-2);
  border-radius: calc(var(--radius-md) - 1px);
  color: var(--text-soft);
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.calendar-shell .cal-mode.active {
  border: 1px solid color-mix(in srgb, var(--accent) 68%, var(--line-strong));
  color: var(--calendar-active-fg);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  box-shadow: none;
  font-weight: 800;
}

.calendar-shell .cal-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  min-width: 0;
}
.calendar-shell .cal-tools > button {
  width: 100%;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: var(--sp-2);
  color: var(--text-soft);
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  white-space: normal;
}

.calendar-shell .calv-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(var(--touch-min), 1fr));
  gap: var(--sp-1);
  margin: 0;
  overflow: visible;
}
.calendar-shell .calv-day {
  display: grid;
  grid-template-rows: auto auto auto;
  place-items: center;
  min-width: var(--touch-min);
  min-height: 58px;
  padding: var(--sp-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  background: var(--surface-2);
  box-shadow: none;
  transform: none;
}
.calendar-shell .calv-day .cd-wd {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.calendar-shell .calv-day .cd-n {
  color: inherit;
  font-family: var(--font-data);
  font-size: var(--type-heading);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.calendar-shell .calv-day .cd-dot,
.calendar-shell .calv-day .cd-dot-empty {
  min-height: 12px;
  height: 12px;
  color: inherit;
  font-size: var(--type-floor);
  line-height: 1;
}
.calendar-shell .calv-day.active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line-strong));
  color: var(--calendar-active-fg);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-2));
  box-shadow: none;
}
.calendar-shell .calv-day.is-today:not(.active) {
  border-block-end-width: 3px;
  border-block-end-color: var(--calendar-today-fg);
}
.calendar-shell .calv-day.is-today .cd-n { color: var(--calendar-today-fg); }

.cal-move-receipt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--good) 46%, var(--line-soft));
  border-radius: var(--radius-md);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--good) 8%, var(--surface-1));
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}
.cal-move-receipt .cal-move-undo {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  color: var(--text-strong);
}

.calendar-day-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--work-max)) minmax(272px, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.calendar-day-work,
.calendar-day-support { min-width: 0; }
.calendar-day-support {
  display: grid;
  gap: var(--sp-3);
  position: sticky;
  top: var(--sp-3);
}
.calendar-work-card {
  margin: 0;
  padding: var(--sp-3);
  border-color: var(--line-soft);
  background: var(--surface-1);
  box-shadow: none;
}
.cal-work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cal-work-head h3,
.calendar-add-card h3 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--leading-display);
}
.cal-work-head .muted {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-data);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}

.calv-agenda { display: none; }
.calv-grid-viewport {
  height: min(520px, 56vh);
  min-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  scrollbar-gutter: stable;
}
.calendar-shell .cal {
  border: 0;
  border-radius: 0;
  background: repeating-linear-gradient(180deg, transparent 0 47px, color-mix(in srgb, var(--line-soft) 60%, transparent) 48px), var(--surface-0);
  box-shadow: none;
}
.calendar-shell .cal-events-layer {
  position: absolute;
  inset: 0 var(--sp-3) 0 58px;
  pointer-events: none;
}
.calendar-shell .cal-block {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--sp-1);
  right: var(--sp-3);
  left: 58px;
  min-height: 28px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c) 54%, var(--line-soft));
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c) 12%, var(--surface-2));
  box-shadow: none;
}
.calendar-shell .cal-events-layer .cal-block {
  pointer-events: auto;
  border-left-width: 1px;
}
.calendar-shell .cal-duration-mark {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: -1px;
  width: 4px;
  height: min(100%, var(--cal-duration-h));
  border-radius: var(--radius-pill);
  background: var(--c);
  pointer-events: none;
}
.calendar-shell .cal-block .cal-check {
  width: 28px;
  min-width: 28px;
  height: 100%;
  min-height: 28px;
  border: 0;
  border-radius: 0;
}
.calendar-shell .cal-block-main {
  min-width: 0;
  padding: 0 var(--sp-2) 0 0;
  border: 0;
  color: var(--text-strong);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.calendar-shell .cal-b-text {
  display: block;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-shell .cal-hint {
  margin: var(--sp-2) 0 0;
  padding: 0;
  border: 0;
  color: var(--text-soft);
  background: transparent;
  font-size: var(--type-meta);
  line-height: var(--leading-ui);
}

.calendar-add-card {
  margin: 0;
  padding: var(--sp-3);
  border-color: var(--line-soft);
  background: var(--surface-1);
  box-shadow: none;
}
.calendar-add-card .calendar-add-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.calendar-add-form .add-field-time { grid-column: 1; }
.calendar-add-form .add-field-skill { grid-column: 2; }
.calendar-add-form .add-field-difficulty { grid-column: 1 / -1; }
.calendar-add-form :is(.add-field-title, .add-field-duration),
.calendar-add-form > button { grid-column: 1 / -1; }
.calendar-add-form .add-field,
.calendar-add-form .dur-part {
  display: grid;
  min-width: 0;
  gap: var(--sp-1);
}
.calendar-add-form :is(.add-field-label, .dur-part-label) {
  color: var(--text-soft);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  font-weight: 700;
}
.calendar-add-form :is(input, select, button) {
  width: 100%;
  min-width: 0;
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}
.calendar-add-form .dur-input.is-labeled {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1);
  width: 100%;
}
.calendar-add-status {
  grid-column: 1 / -1;
  min-height: 1.35em;
  margin: 0;
  font-size: var(--type-meta);
  line-height: var(--leading-ui);
}

.calendar-shell .calv-tray {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--line-soft);
  background: var(--surface-1);
  box-shadow: none;
}
.calendar-shell .calv-tray > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: var(--sp-3);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.calendar-shell .calv-tray > summary::-webkit-details-marker { display: none; }
.calendar-shell .calv-tray > summary::after { content: "▾"; color: var(--text-soft); }
.calendar-shell .calv-tray[open] > summary::after { content: "▴"; }
.calv-tray-title {
  min-width: 0;
  font-size: var(--type-control);
  line-height: var(--leading-ui);
  font-weight: 800;
}
.calv-tray-count {
  display: grid;
  place-items: center;
  min-inline-size: 24px;
  min-block-size: 24px;
  border-radius: var(--radius-pill);
  color: var(--text-strong);
  background: var(--surface-3);
  font-family: var(--font-data);
  font-size: var(--type-meta);
  line-height: 1;
}
.calendar-shell .calv-chips {
  display: grid;
  gap: 0;
  padding: 0 var(--sp-3) var(--sp-3);
}
.calendar-shell .calv-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: center;
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-2) 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  color: var(--text-strong);
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.calv-chip-title {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: var(--type-control);
  line-height: var(--leading-ui);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.calv-chip-meta,
.cal-agenda-meta { display: grid; gap: 2px; justify-items: end; }
.calv-chip-duration {
  color: var(--text-soft);
  font-family: var(--font-data);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.calv-chip-disclosure,
.cal-agenda-disclosure {
  color: var(--text-strong);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  font-weight: 800;
}

.cal-task-overlay {
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4);
}
html.calendar-task-open,
html.calendar-task-open body {
  overflow: hidden;
  overscroll-behavior: none;
}
.cal-task-dialog {
  width: min(100%, 560px);
  max-height: min(100%, 720px);
  overflow-y: auto;
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--surface-1);
  box-shadow: var(--shadow-raised);
}
.cal-task-dialog-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.cal-task-dialog h2 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: var(--leading-display);
}
.cal-task-name {
  margin: var(--sp-2) 0 var(--sp-4);
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: var(--leading-prose);
  overflow-wrap: anywhere;
}
#cal-task-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.cal-task-field {
  display: grid;
  min-width: 0;
  gap: var(--sp-1);
  color: var(--text-soft);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  font-weight: 700;
}
.cal-task-field input {
  width: 100%;
  min-width: 0;
  min-height: var(--touch-min);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}
.cal-task-status {
  grid-column: 1 / -1;
  min-height: 1.35em;
  margin: 0;
  font-size: var(--type-meta);
  line-height: var(--leading-ui);
}
.cal-task-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.cal-task-actions .btn,
.cal-task-dialog .modal-x {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
}
.cal-task-save { color: var(--on-accent); }

#desire-pop .desire-box {
  width: min(100%, 560px);
  max-height: min(100%, 720px);
  overflow-y: auto;
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-1);
  box-shadow: var(--shadow-raised);
}
#desire-pop .desire-box h3 {
  padding-inline-end: calc(var(--touch-min) + var(--sp-2));
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: var(--leading-display);
}
#desire-pop .modal-x,
#desire-pop .desire-opt {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
}
#desire-pop .modal-x {
  top: var(--sp-3);
  right: var(--sp-3);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: var(--radius-sm);
}

.cal-sub-dialog {
  position: relative;
  width: min(100%, 560px);
  max-height: min(100%, 720px);
  overflow-y: auto;
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--surface-1);
  box-shadow: var(--shadow-raised);
}
.cal-sub-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.cal-sub-dialog h2 {
  margin: 0;
  padding-inline-end: calc(var(--touch-min) + var(--sp-2));
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: var(--leading-display);
}
.cal-sub-dialog h2:focus { outline: none; }
.cal-sub-dialog .modal-x {
  flex: 0 0 var(--touch-min);
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  padding: 0;
}
.cal-sub-intro,
.cal-sub-loading,
.cal-sub-error p {
  margin: var(--sp-2) 0 var(--sp-4);
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: var(--leading-prose);
}
.cal-sub-loading:focus { outline: none; }
#cal-sub-body { display: grid; gap: var(--sp-3); }
.cal-sub-link {
  display: grid;
  gap: var(--sp-1);
  color: var(--text-soft);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  font-weight: 700;
}
.cal-sub-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
}
.cal-sub-link input {
  width: 100%;
  min-width: 0;
  min-height: var(--touch-min);
  color: var(--text-strong);
  background: var(--surface-2);
  font-family: var(--font-ui);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}
.cal-sub-copy,
.cal-sub-open,
.cal-sub-retry {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
}
.cal-sub-open {
  justify-self: start;
  color: var(--on-accent);
}
.cal-sub-help {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}
.cal-sub-help h3 {
  margin: 0 0 var(--sp-2);
  color: var(--text-strong);
  font-size: var(--type-heading);
  line-height: var(--leading-display);
}
.cal-sub-help p {
  margin: var(--sp-2) 0 0;
  color: var(--text-soft);
  font-size: var(--type-control);
  line-height: var(--leading-prose);
}
.cal-sub-error { display: grid; justify-items: start; }

.calendar-shell :is(button, input, select, textarea, summary):focus-visible,
.calendar-load-recovery :is(button, input, select, textarea, summary):focus-visible,
#cal-task-modal :is(button, input, select, textarea):focus-visible,
#desire-pop :is(button, input, select, textarea):focus-visible,
#cal-sub-ov :is(button, a, input):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}
.calendar-shell .calv-grid-viewport:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  .calendar-shell .calv-day:hover,
  .calendar-shell .calv-chip:hover,
  .calendar-shell .cal-block-main:hover {
    border-color: var(--line-strong);
    background-color: color-mix(in srgb, var(--accent) 7%, transparent);
    transform: none;
  }
}

@media (max-width: 900px) {
  .calendar-shell .calv-title {
    grid-template-columns: minmax(0, 1fr);
  }
  .calendar-shell .cal-modes { min-width: 0; }
  .calendar-day-layout { grid-template-columns: minmax(0, 1fr); }
  .calendar-day-support { position: static; }
}

@media (max-width: 600px) {
  .calendar-shell { gap: var(--sp-2); }
  .calendar-shell .calv-head,
  .calendar-work-card,
  .calendar-add-card { padding: var(--sp-3); }
  .calendar-shell .calv-title {
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--sp-2);
    row-gap: var(--sp-1);
  }
  .calendar-shell .calv-title-main {
    grid-column: 1 / -1;
    grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  }
  .calendar-shell .calv-title h2 {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--type-heading);
    text-align: center;
  }
  .calendar-shell .calv-title h2 .muted { font-size: var(--type-meta); }
  .calendar-shell .cal-nav-prev { grid-column: 1; grid-row: 1; }
  .calendar-shell .cal-nav-next { grid-column: 3; grid-row: 1; }
  .calendar-shell .cal-nav-today { grid-column: 1 / 3; grid-row: 2; justify-self: start; }
  .calendar-shell .calv-title-main .wk-load { display: none; }
  .calendar-shell .cal-modes {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    gap: var(--sp-1);
  }
  .calendar-shell .cal-tools {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: stretch;
    width: 100%;
    min-width: 0;
    gap: var(--sp-1);
  }
  .calendar-shell .cal-mode,
  .calendar-shell .cal-tools > button {
    min-height: var(--touch-min);
    padding: var(--sp-1);
    font-size: var(--type-meta);
    line-height: var(--leading-label);
  }
  .calendar-shell .cal-tools > button {
    white-space: nowrap;
    overflow-wrap: normal;
    hyphens: none;
  }
  .calendar-shell .cal-tool-icon { display: none; }
  .calendar-shell .calv-strip {
    margin-inline: calc(0px - var(--sp-3));
    padding-inline: var(--sp-1);
  }
  .calendar-shell .calv-day {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: var(--sp-1) 0;
  }
  .calendar-shell .calv-day .cd-wd,
  .calendar-shell .calv-day .cd-n { font-size: var(--type-meta); }
  .calendar-day-layout { gap: var(--sp-2); }
  .cal-work-head { align-items: start; }
  .cal-work-head > .btn { min-width: var(--touch-min); min-height: var(--touch-min); }
  .calv-grid-viewport { display: none; }
  .calv-agenda {
    display: grid;
    gap: 0;
    border-block: 1px solid var(--line-soft);
  }
  .cal-agenda-row {
    display: grid;
    grid-template-columns: var(--touch-min) minmax(0, 1fr);
    gap: var(--sp-2);
    align-items: stretch;
    min-width: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .cal-agenda-row:last-child { border-bottom: 0; }
  .cal-agenda-row.done { opacity: .74; }
  .cal-agenda-check {
    width: var(--touch-min);
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    border: 0;
    border-radius: 0;
  }
  .cal-agenda-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-2);
    align-items: center;
    min-width: 0;
    min-height: var(--touch-min);
    padding: var(--sp-2) 0;
    border: 0;
    color: var(--text-strong);
    background: transparent;
    text-align: left;
  }
  .cal-agenda-time,
  .cal-agenda-duration {
    color: var(--text-soft);
    font-family: var(--font-data);
    font-size: var(--type-meta);
    line-height: var(--leading-label);
    white-space: nowrap;
  }
  .cal-agenda-title {
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--type-control);
    line-height: var(--leading-ui);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .cal-agenda-empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3) 0;
  }
  .cal-agenda-empty p { margin: 0; }
  .cal-agenda-empty strong,
  .cal-agenda-empty span { display: block; }
  .cal-agenda-empty strong { color: var(--text-strong); font-size: var(--type-control); line-height: var(--leading-ui); }
  .cal-agenda-empty span { margin-top: var(--sp-1); color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-ui); }
  .calendar-shell .cal-hint { display: none; }
  .calendar-add-form :is(input, select) {
    min-height: var(--touch-min);
    font-size: max(16px, var(--type-control));
    line-height: var(--leading-prose);
  }
  .calendar-add-form > button { min-height: var(--touch-min); }
  .calendar-shell .calv-tray > summary,
  .calendar-shell .calv-chip { min-height: var(--touch-min); }
  .cal-task-overlay { align-items: flex-end; padding: var(--sp-3); }
  .cal-task-dialog {
    width: 100%;
    max-height: calc(100dvh - var(--sp-5));
    padding: var(--sp-3);
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  }
  #cal-task-form { grid-template-columns: minmax(0, 1fr); }
  .cal-task-field,
  .cal-task-status,
  .cal-task-actions { grid-column: 1; }
  .cal-task-field input { font-size: max(16px, var(--type-control)); }
  .cal-task-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cal-task-actions .btn { width: 100%; }
  .cal-sub-dialog {
    width: 100%;
    max-height: calc(100dvh - var(--sp-5));
    padding: var(--sp-3);
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  }
  .cal-sub-link-row { grid-template-columns: minmax(0, 1fr); }
  .cal-sub-copy,
  .cal-sub-open,
  .cal-sub-retry { width: 100%; }
}

@media (pointer: coarse) {
  .calendar-shell :is(button, input, select, summary),
  #cal-task-modal :is(button, input, select),
  #desire-pop :is(button, input, select),
  #cal-sub-ov :is(button, a, input) {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-shell *,
  .calendar-shell *::before,
  .calendar-shell *::after,
  #cal-task-modal,
  #cal-task-modal *,
  #cal-task-modal *::before,
  #cal-task-modal *::after,
  #desire-pop,
  #desire-pop *,
  #desire-pop *::before,
  #desire-pop *::after,
  #cal-sub-ov,
  #cal-sub-ov *,
  #cal-sub-ov *::before,
  #cal-sub-ov *::after {
    animation: none !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  #desire-pop .desire-opt:hover { transform: none !important; }
}

/* ---------- Settings v120: six-purpose hub, progressive disclosure ---------- */
.settings-shell {
  display: grid;
  gap: var(--sp-4);
  max-width: min(100%, 1120px);
  margin-inline: auto;
}
.settings-hub,
.settings-group-head {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 94%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.settings-hub { display: grid; gap: var(--sp-3); padding: clamp(var(--sp-3), 3vw, var(--sp-5)); }
.settings-hub h2 { margin: 0; font-family: var(--font-display); font-size: var(--type-title); line-height: var(--leading-display); }
.settings-hub p { max-width: var(--measure-prose); margin: var(--sp-1) 0 0; }
.settings-eyebrow { color: var(--today-kicker-fg, var(--accent-2)); font-size: var(--type-meta); font-weight: 900; letter-spacing: var(--tracking-caps); line-height: var(--leading-label); text-transform: uppercase; }
.settings-hub-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
.settings-mobile-step { display: none; }
.settings-hub-item {
  min-block-size: var(--touch-min);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-3) 72%, transparent);
  color: var(--text-soft);
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
  cursor: pointer;
}
.settings-hub-item.active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-3));
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}
.settings-hub-item:focus-visible,
.settings-group :is(button, input, select, textarea):focus-visible {
  outline: var(--focus-ring, 2px solid var(--accent-2));
  outline-offset: 2px;
}
.settings-save-state { min-height: 1.5em; font-size: var(--type-meta); line-height: var(--leading-label); }
.settings-group { display: grid; gap: var(--sp-3); }
.settings-group[hidden] { display: none !important; }
.settings-group-head { padding: var(--sp-3) var(--sp-4); }
.settings-group-head h3 { margin: 0; font-size: var(--type-heading); line-height: var(--leading-ui); }
.settings-group-head p { margin: var(--sp-1) 0 0; font-size: var(--type-body); line-height: var(--leading-prose); }
.settings-group > .card { border-color: var(--line-soft); }
.settings-group > .card h4 { margin: 0 0 var(--sp-2); color: var(--text-strong); font-size: var(--type-heading); line-height: var(--leading-ui); }
.settings-data-card .settings-actions { position: static; margin-top: var(--sp-3); box-shadow: none; backdrop-filter: none; }

@media (max-width: 840px) {
  .settings-hub-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .settings-shell { gap: var(--sp-3); }
  .settings-hub { padding: var(--sp-3); }
  .settings-hub-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-mobile-step { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
  .settings-mobile-step span { color: var(--text-soft); font-size: var(--type-meta); font-weight: 800; text-align: center; }
  .settings-mobile-step .btn:last-child { justify-self: end; }
  .settings-hub-item { min-block-size: var(--touch-min); padding-inline: var(--sp-2); }
  .settings-group-head { padding: var(--sp-3); }
  .settings-group > .card { padding: var(--sp-3); }
}
@media (hover:hover) and (pointer:fine) {
  .settings-hub-item:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 46%, var(--line-soft)); }
}
@media (prefers-reduced-motion: reduce) {
  .settings-shell *, .settings-shell *::before, .settings-shell *::after { animation: none !important; transition-duration: 0ms !important; }
  .settings-hub-item:hover { transform: none; }
}

/* ---------- Calendar Week v121: seven dates, selected-day mobile detail ---------- */
.calendar-week-shell .calv-title-main {
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
}
.calendar-week-shell .calv-title h2 { font-size: var(--type-brand); }
.calendar-week-shell .week-work,
.calendar-week-shell .week-secondary {
  display: grid;
  min-width: 0;
  gap: var(--sp-3);
}
.calendar-week-shell .week-work-card {
  display: grid;
  min-width: 0;
  gap: var(--sp-3);
  overflow: visible;
  border-color: var(--line-soft);
  background: var(--surface-1);
  box-shadow: none;
}
.calendar-week-shell .week-work-head,
.calendar-week-shell .week-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.calendar-week-shell :is(.week-work-head, .week-summary-head) h3 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--leading-ui);
}
.calendar-week-shell .wk-mobile-detail { display: none; }
.calendar-week-shell .week-work-title-mobile { display: none; }
.calendar-week-shell .wk-grid-wrap {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.calendar-week-shell .wk-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
  gap: var(--sp-2);
  align-items: stretch;
}
.calendar-week-shell .wk-col {
  display: flex;
  min-width: 0;
  min-height: 300px;
  padding: var(--sp-2);
  flex-direction: column;
  gap: var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: none;
}
.calendar-week-shell .wk-col.is-today {
  border-color: color-mix(in srgb, var(--calendar-today-fg) 68%, var(--line-soft));
  box-shadow: inset 0 3px 0 var(--calendar-today-fg);
}
.calendar-week-shell .wk-col.wk-drop {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}
.calendar-week-shell .wk-col-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-1);
  align-items: baseline;
  min-width: 0;
  padding: 0;
  border: 0;
}
.calendar-week-shell .wk-wd {
  color: var(--text-strong);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
  font-weight: 800;
}
.calendar-week-shell .wk-date,
.calendar-week-shell .wk-prog,
.calendar-week-shell .wk-load {
  color: var(--text-soft);
  font-family: var(--font-data);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.calendar-week-shell .wk-prog { grid-column: 1 / -1; }
.calendar-week-shell .wk-load {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.calendar-week-shell .wk-tasks,
.calendar-week-shell .wk-detail-tasks {
  display: grid;
  min-width: 0;
  gap: var(--sp-1);
}
.calendar-week-shell .wk-tasks { align-content: start; flex: 1 1 auto; }
.calendar-week-shell .wk-task {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr);
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line-soft);
  border-inline-start: 3px solid var(--wk-skill, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  box-shadow: none;
}
.calendar-week-shell .wk-task.done { opacity: 1; background: color-mix(in srgb, var(--surface-1) 86%, var(--good)); }
.calendar-week-shell .wk-task.done .wk-task-title { color: var(--text-soft); text-decoration: line-through; }
.calendar-week-shell .wk-task.wk-dragging { opacity: .62; }
.calendar-week-shell .wk-task-board { cursor: grab; }
.calendar-week-shell .wk-task-detail { cursor: default; }
.calendar-week-shell .wk-task-board {
  grid-template-columns: 28px minmax(0, 1fr);
}
.calendar-week-shell .wk-task-board .wk-task-check {
  inline-size: 28px;
  min-inline-size: 28px;
  min-block-size: 28px;
}
.calendar-week-shell .wk-task-board .wk-task-main {
  min-block-size: 28px;
  padding: var(--sp-1);
}
.calendar-week-shell .wk-task-board .wk-task-title {
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.calendar-week-shell .wk-task-check {
  inline-size: var(--touch-min);
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  margin: 0;
  border: 0;
  border-inline-end: 1px solid var(--line-soft);
  border-radius: 0;
  color: var(--text-strong);
  background: transparent;
}
.calendar-week-shell .wk-task-main {
  display: grid;
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--sp-2);
  gap: var(--sp-1);
  border: 0;
  border-radius: 0;
  color: var(--text-strong);
  background: transparent;
  text-align: start;
}
.calendar-week-shell .wk-task-title {
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
  font-weight: 760;
  overflow-wrap: anywhere;
}
.calendar-week-shell .wk-task-meta {
  display: flex;
  min-width: 0;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--text-soft);
  font-family: var(--font-data);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.calendar-week-shell .wk-empty,
.calendar-week-shell .wk-detail-empty {
  margin: 0;
  padding: var(--sp-3);
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius-sm);
  text-align: center;
}
.calendar-week-shell .wk-detail-empty p { margin: 0; }
.calendar-week-shell .wk-add-btn {
  width: 100%;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  margin-top: auto;
  padding: var(--sp-2);
  color: var(--text-soft);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}
.calendar-week-shell .wk-add-form {
  display: grid;
  min-width: 0;
  margin-top: auto;
  padding: var(--sp-2);
  gap: var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
}
.calendar-week-shell .wk-add-form label { display: grid; min-width: 0; gap: var(--sp-1); color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); }
.calendar-week-shell .wk-add-form :is(input, select) { width: 100%; min-width: 0; min-height: var(--touch-min); font-size: var(--type-control); }
.calendar-week-shell .wk-add-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.calendar-week-shell .wk-add-btns .btn { min-width: var(--touch-min); min-height: var(--touch-min); }
.calendar-week-shell .wk-add-status { min-height: 1.4em; margin: 0; }
.calendar-week-shell .wk-habits-dots { display: flex; min-height: 12px; margin: 0; gap: var(--sp-1); align-items: center; flex-wrap: wrap; }
.calendar-week-shell .wk-h-dot { inline-size: 10px; block-size: 10px; border: 1px solid var(--c); border-radius: 50%; background: transparent; }
.calendar-week-shell .wk-h-dot.done { background: var(--c); }
.calendar-week-shell .wk-hint { margin: 0; font-size: var(--type-meta); line-height: var(--leading-label); }
.calendar-week-shell .week-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calendar-week-shell .week-summary-card,
.calendar-week-shell .week-reflections-card { grid-column: 1 / -1; }
.calendar-week-shell .week-summary-card { display: grid; gap: var(--sp-3); }
.calendar-week-shell .week-summary-card .kpis { margin: 0; }

@media (max-width: 900px) {
  .calendar-week-shell .wk-grid-wrap { display: none; }
  .calendar-week-shell .wk-mobile-detail { display: grid; min-width: 0; gap: var(--sp-3); }
  .calendar-week-shell .week-work-title-desktop { display: none; }
  .calendar-week-shell .week-work-title-mobile { display: inline; }
  .calendar-week-shell .wk-hint { display: none; }
  .calendar-week-shell .week-secondary { grid-template-columns: minmax(0, 1fr); }
  .calendar-week-shell .week-secondary > * { grid-column: 1 !important; }
  .calendar-week-shell .week-summary-card .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .calendar-week-shell .calv-title { grid-template-columns: minmax(0, 1fr); }
  .calendar-week-shell .calv-title-main { grid-column: 1; grid-row: 1; }
  .calendar-week-shell .cal-modes { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; }
  .calendar-week-shell .cal-tools { grid-column: 1; grid-row: 3; width: 100%; min-width: 0; }
  .calendar-week-shell .cal-tools > button { padding-inline: var(--sp-1); }
  .calendar-week-shell .week-overview { grid-template-columns: repeat(7, minmax(var(--touch-min), 1fr)); gap: var(--sp-1); }
  .calendar-week-shell .week-overview-day { min-width: var(--touch-min); min-height: 58px; padding-inline: 0; }
  .calendar-week-shell .week-work-card { padding: var(--sp-3); }
  .calendar-week-shell .week-work-head { align-items: flex-start; }
  .calendar-week-shell .wk-task-main { padding-inline: var(--sp-2); }
  .calendar-week-shell .week-summary-card .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (pointer: coarse) {
  .calendar-week-shell :is(button, input, select, textarea) { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
  .calendar-week-shell .wk-task-board { grid-template-columns: var(--touch-min) minmax(0, 1fr); }
  .calendar-week-shell .wk-task-board .wk-task-check { inline-size: var(--touch-min); min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
  .calendar-week-shell .wk-task-board .wk-task-main { min-block-size: var(--touch-min); }
}

@media (hover: hover) and (pointer: fine) {
  .calendar-week-shell .wk-task-main:hover,
  .calendar-week-shell .wk-add-btn:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-week-shell *,
  .calendar-week-shell *::before,
  .calendar-week-shell *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .calendar-week-shell :is(.wk-task-main, .wk-add-btn):hover { transform: none !important; }
}

/* ---------- Calendar Month v122: compact month choice + selected-day detail ---------- */
.calendar-month-shell .calv-title-main {
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
}
.calendar-month-shell .calv-title h2 { font-size: var(--type-brand); }
.calendar-month-shell .month-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  min-width: 0;
  gap: var(--sp-3);
  align-items: start;
}
.calendar-month-shell :is(.month-grid-card, .month-detail-card) {
  display: grid;
  min-width: 0;
  gap: var(--sp-3);
  border-color: var(--line-soft);
  background: var(--surface-1);
  box-shadow: none;
}
.calendar-month-shell :is(.month-grid-card, .month-detail-card) h3 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--leading-ui);
}
.calendar-month-shell .month-detail-card { position: sticky; top: var(--sp-3); }
.calendar-month-shell .month-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--sp-2);
  align-items: start;
}
.calendar-month-shell .month-detail-summary {
  margin: var(--sp-1) 0 0;
  color: var(--text-soft);
  font-family: var(--font-data);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.calendar-month-shell .month-open-day { width: 100%; min-height: var(--touch-min); }
.calendar-month-shell .cm-wd,
.calendar-month-shell .cm-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
  gap: var(--sp-2);
  margin: 0;
}
.calendar-month-shell .cm-wd span {
  color: var(--text-soft);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  font-weight: 800;
  text-align: center;
}
.calendar-month-shell .cm-cell {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  min-width: 0;
  min-height: 54px;
  aspect-ratio: auto;
  padding: var(--sp-1);
  gap: 2px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  background: var(--surface-2);
  box-shadow: none;
  cursor: pointer;
}
.calendar-month-shell .cm-cell.cm-out { opacity: 1; color: var(--text-soft); background: color-mix(in srgb, var(--surface-2) 62%, transparent); }
.calendar-month-shell .cm-cell.cm-today { border-color: var(--calendar-today-fg); box-shadow: inset 0 2px 0 var(--calendar-today-fg); }
.calendar-month-shell .cm-cell.cm-sel {
  border-color: var(--calendar-active-border);
  color: var(--calendar-active-fg);
  background: color-mix(in srgb, var(--calendar-active-border) 14%, var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--calendar-active-border);
}
.calendar-month-shell .cm-n {
  font-family: var(--font-data);
  font-size: var(--type-control);
  line-height: var(--leading-label);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.calendar-month-shell .cm-dot {
  min-width: 18px;
  padding: 1px var(--sp-1);
  border-radius: 999px;
  color: var(--on-accent);
  background: var(--accent);
  font-family: var(--font-data);
  font-size: var(--type-floor);
  line-height: var(--leading-label);
  font-weight: 800;
}
.calendar-month-shell .month-detail-tasks {
  display: grid;
  min-width: 0;
  gap: var(--sp-1);
}
.calendar-month-shell .wk-task {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr);
  min-width: 0;
  min-height: var(--touch-min);
  border: 1px solid var(--line-soft);
  border-inline-start: 3px solid var(--wk-skill, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.calendar-month-shell .wk-task.done { background: color-mix(in srgb, var(--surface-2) 86%, var(--good)); }
.calendar-month-shell .wk-task.done .wk-task-title { color: var(--text-soft); text-decoration: line-through; }
.calendar-month-shell .wk-task-check {
  inline-size: var(--touch-min);
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  margin: 0;
  border: 0;
  border-inline-end: 1px solid var(--line-soft);
  border-radius: 0;
  color: var(--text-strong);
  background: transparent;
}
.calendar-month-shell .wk-task-main {
  display: grid;
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--sp-2);
  gap: var(--sp-1);
  border: 0;
  border-radius: 0;
  color: var(--text-strong);
  background: transparent;
  text-align: start;
}
.calendar-month-shell .wk-task-title {
  min-width: 0;
  font-size: var(--type-control);
  line-height: var(--leading-ui);
  font-weight: 760;
  overflow-wrap: anywhere;
}
.calendar-month-shell .wk-task-meta {
  display: flex;
  min-width: 0;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--text-soft);
  font-family: var(--font-data);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
}
.calendar-month-shell .month-detail-empty {
  padding: var(--sp-3);
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius-sm);
  text-align: center;
}
.calendar-month-shell .month-detail-empty p { margin: 0; }
.calendar-month-shell .wk-add-btn {
  width: 100%;
  min-height: var(--touch-min);
  color: var(--text-soft);
  font-size: var(--type-control);
  line-height: var(--leading-ui);
}
.calendar-month-shell .wk-add-form {
  display: grid;
  min-width: 0;
  padding: var(--sp-2);
  gap: var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.calendar-month-shell .wk-add-form label { display: grid; min-width: 0; gap: var(--sp-1); color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); }
.calendar-month-shell .wk-add-form :is(input, select) { width: 100%; min-width: 0; min-height: var(--touch-min); font-size: var(--type-control); }
.calendar-month-shell .wk-add-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.calendar-month-shell .wk-add-btns .btn { min-width: var(--touch-min); min-height: var(--touch-min); }
.calendar-month-shell .wk-add-status { min-height: 1.4em; margin: 0; }

@media (max-width: 900px) {
  .calendar-month-shell .month-work { grid-template-columns: minmax(0, 1fr); }
  .calendar-month-shell .month-detail-card { position: static; }
}

@media (max-width: 600px) {
  .calendar-month-shell .calv-title { grid-template-columns: minmax(0, 1fr); }
  .calendar-month-shell .calv-title-main { grid-column: 1; grid-row: 1; }
  .calendar-month-shell .cal-modes { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; }
  .calendar-month-shell .cal-tools { grid-column: 1; grid-row: 3; width: 100%; min-width: 0; }
  .calendar-month-shell .cal-tools > button { padding-inline: var(--sp-1); }
  .calendar-month-shell .month-overview { grid-template-columns: repeat(7, minmax(var(--touch-min), 1fr)); gap: var(--sp-1); }
  .calendar-month-shell .month-overview-day { min-width: var(--touch-min); min-height: 58px; padding-inline: 0; }
  .calendar-month-shell :is(.month-grid-card, .month-detail-card) { padding: var(--sp-3); }
  .calendar-month-shell .cm-wd,
  .calendar-month-shell .cm-grid { gap: 2px; }
  .calendar-month-shell .cm-cell { min-height: 28px; padding: 1px; border-radius: 6px; }
  .calendar-month-shell .cm-n { font-size: var(--type-meta); }
  .calendar-month-shell .cm-dot { position: absolute; inset-inline-end: 2px; inset-block-end: 2px; min-width: 12px; padding-inline: 2px; font-size: 8px; line-height: 11px; }
  .calendar-month-shell .month-detail-head { grid-template-columns: minmax(0, 1fr); }
  .calendar-month-shell .month-open-day { width: 100%; }
}

@media (pointer: coarse) {
  .calendar-month-shell :is(button, input, select, textarea) { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
  .calendar-month-shell .cm-cell { min-inline-size: 0; min-block-size: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .calendar-month-shell :is(.cm-cell, .wk-task-main, .wk-add-btn):hover { border-color: var(--line-strong); background-color: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-month-shell *,
  .calendar-month-shell *::before,
  .calendar-month-shell *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Account & data lifecycle v123
   ============================================================ */
.account-credential-form,
.pin-change {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--sp-2);
}
.account-credential-form label,
.pin-change label {
  display: grid;
  min-width: 0;
  gap: var(--sp-1);
  color: var(--text-soft);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  font-weight: 700;
}
.account-credential-form input,
.pin-change input { width: 100%; min-width: 0; min-height: var(--touch-min); font-size: var(--type-control); line-height: var(--leading-prose); }
.account-credential-form .account-form-status,
.pin-change > .muted { grid-column: 1 / -1; min-height: 1.5em; }
.account-session-actions { margin-top: var(--sp-3); }
.account-data-card .settings-actions { flex-wrap: wrap; }
.account-import-label { position: relative; overflow: hidden; cursor: pointer; }
.account-import-label input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.account-import-label:focus-within { outline: var(--focus-ring); outline-offset: 2px; }
.commitment-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
.commitment-dialog :is(.commitment-win, .commitment-time) { display: grid; gap: var(--sp-2); margin-block: var(--sp-3); min-width: 0; }
.commitment-dialog :is(.commitment-win, .commitment-time) > span { font-size: var(--type-meta); line-height: var(--leading-ui); }
.commitment-dialog input { width: 100%; min-width: 0; box-sizing: border-box; min-height: var(--touch-min); }
.commitment-dialog > .btn { width: 100%; white-space: normal; min-height: var(--touch-min); }
.commitment-dialog > .modal-x { min-width: var(--touch-min); min-height: var(--touch-min); }
.account-dialog-box { width: min(100%, 560px); max-height: min(100%, 720px); overflow-y: auto; }
.account-dialog-box > h2 { padding-inline-end: var(--touch-min); }
.account-dialog-box > .modal-x { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
.account-dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.account-dialog-actions .btn { min-height: var(--touch-min); }
.account-import-summary { padding: var(--sp-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: var(--text-soft); background: var(--surface-2); overflow-wrap: anywhere; }
.account-import-result,
#account-import-status { min-height: 1.5em; }
.account-notice { margin: var(--sp-2) 0 0; padding: var(--sp-2); border: 1px solid var(--warn); border-radius: var(--radius-sm); color: var(--text-strong); background: color-mix(in srgb, var(--warn) 10%, var(--surface-2)); font-size: var(--type-meta); line-height: var(--leading-prose); }
.account-dialog-box :is(button, input):focus-visible,
.account-credential-form :is(button, input):focus-visible,
.pin-change :is(button, input):focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

@media (max-width: 600px) {
  .account-credential-form,
  .pin-change { grid-template-columns: minmax(0, 1fr); }
  .account-credential-form .account-form-status,
  .pin-change > .muted { grid-column: 1; }
  .account-dialog-box { max-height: calc(100dvh - 24px); }
}

@media (pointer: coarse) {
  .account-credential-form :is(button, input),
  .pin-change :is(button, input),
  .account-data-card :is(.btn, input),
  .account-dialog-box :is(button, input) { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
}

@media (prefers-reduced-motion: reduce) {
  .account-dialog-box *,
  .account-dialog-box *::before,
  .account-dialog-box *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Rewards & economy v124 — earned value and ethical surprise
   ============================================================ */
.rewards-shell { --reward-earned-fg: #ffd479; --reward-earned-border: var(--rarity-legendary); }
:root[data-theme="light"] .rewards-shell { --reward-earned-fg: #6f4700; --reward-earned-border: #805100; }
.reward-object-art {
  display: block;
  flex: none;
  inline-size: 96px;
  block-size: 96px;
  background-image: url('/art/rewards/reward-atlas-v1.png?v=1');
  background-repeat: no-repeat;
  background-size: 200% 200%;
  filter: drop-shadow(0 13px 18px rgba(0, 0, 0, .34));
}
.reward-object-art.is-chest { background-position: 0 0; }
.reward-object-art.is-gold { background-position: 100% 0; }
.reward-object-art.is-cosmetic { background-position: 0 100%; }
.reward-object-art.is-voucher { background-position: 100% 100%; }
.reward-hero-v189 {
  min-height: clamp(210px, 25vw, 300px);
  grid-template-columns: minmax(0, 1fr) minmax(190px, 33%);
  align-items: center;
  isolation: isolate;
}
.reward-hero-v189::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -8% -48% 42%;
  block-size: 88%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent-warm) 24%, transparent), transparent 68%);
  pointer-events: none;
}
.reward-hero-copy { max-inline-size: 720px; }
.reward-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 180px;
}
.hero-reward-chest { inline-size: clamp(180px, 23vw, 260px); block-size: clamp(180px, 23vw, 260px); animation: rewardEarnedBreath 3.8s ease-in-out infinite; }
.hero-reward-gold { position: absolute; inline-size: 80px; block-size: 80px; inset: auto 8% 4% auto; transform: rotate(8deg); }
.reward-hero-balance {
  position: absolute;
  inset: auto 4% 0 auto;
  min-inline-size: 58px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-warm) 58%, var(--line-soft));
  border-radius: var(--radius-pill);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--surface-1) 90%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  font-family: var(--font-number);
  font-weight: 900;
  text-align: center;
}
.reward-primary-cta { box-shadow: 0 10px 34px color-mix(in srgb, var(--accent-warm) 24%, transparent); }
@keyframes rewardEarnedBreath {
  0%, 100% { transform: translateY(2px) rotate(-.6deg); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .3)); }
  50% { transform: translateY(-5px) rotate(.6deg); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .44)); }
}
.rewards-shell .reward-hero .th-kicker,
.economy-confirm-kicker,
.loot-earned-label { color: var(--reward-earned-fg); }
.daily-reward-card .lb-head { align-items: flex-start; }
.daily-reward-randomness {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--good);
  border-radius: var(--radius-pill);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--good) 9%, var(--surface-2));
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  font-weight: 800;
}
.daily-reward-card .lb-body { display: grid; grid-template-columns: minmax(130px, 160px) minmax(0, 1fr); align-items: stretch; }
.daily-reward-card .lb-chest {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 132px;
  margin: 0;
  color: var(--text-strong);
  font: inherit;
}
.daily-chest-art { inline-size: 116px; block-size: 116px; }
.daily-reward-card .lb-chest.ready .daily-chest-art { animation: rewardEarnedBreath 3.4s ease-in-out infinite; }
.daily-reward-card .lb-chest small { max-inline-size: 19ch; color: var(--text-soft); font-size: 11px; line-height: 1.25; }
.daily-reward-card .lb-chest.ready {
  border-color: var(--reward-earned-border);
  background: color-mix(in srgb, var(--reward-earned-border) 9%, var(--surface-2));
  animation: none;
}
.daily-reward-card .lb-chest.ready .lb-emoji,
.daily-reward-card .lb-chest.ready .lb-emblem,
.rewards-shell .reward-track-preview span.ready { animation: none; }
.daily-reward-card .lb-info { min-width: 0; }
.daily-reward-card .lb-next { margin: 0 0 var(--sp-2); color: var(--text-strong); }
.daily-reward-fairness { margin: var(--sp-2) 0; padding: var(--sp-2); border-inline-start: 3px solid var(--good); color: var(--text-strong); background: color-mix(in srgb, var(--good) 7%, var(--surface-2)); }
.daily-reward-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.daily-reward-step { display: grid; min-width: 0; gap: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: var(--text-soft); background: var(--surface-2); }
.daily-reward-step.is-earned { border: 2px solid var(--reward-earned-border); color: var(--text-strong); }
.daily-reward-step.is-collected { border-style: double; border-width: 3px; color: var(--text-strong); }
.daily-reward-step .reward-step-state { font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 800; }
.capsule-odds { margin-top: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-2); }
.capsule-odds > summary { min-height: var(--touch-min); padding: var(--sp-2); color: var(--text-strong); font-weight: 800; cursor: pointer; }
.capsule-odds > p { margin: 0; padding: 0 var(--sp-2) var(--sp-2); color: var(--text-soft); line-height: var(--leading-prose); }
.capsule-odds ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0 var(--sp-2) var(--sp-2); list-style: none; }
.capsule-odds li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-2); min-width: 0; padding: var(--sp-2); border: 1px solid var(--rarity-common); border-radius: var(--radius-sm); color: var(--text-strong); background: var(--surface-1); }
.capsule-odds li.r-rare { border-color: var(--rarity-rare); }
.capsule-odds li.r-epic { border-color: var(--rarity-epic); border-width: 2px; }
.capsule-odds li.r-legendary { border-color: var(--rarity-legendary); border-style: double; border-width: 3px; }
.capsule-odds li b { font-variant-numeric: tabular-nums; }
.capsule-odds li small { grid-column: 1 / -1; color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); }
.voucher-chip { min-height: var(--touch-min); border: 1px solid var(--reward-earned-border); color: var(--on-accent); background: var(--reward-earned-border); }
.economy-rules ul { display: grid; gap: var(--sp-2); margin: 0; padding-inline-start: 1.25rem; color: var(--text-soft); }
.rewards-primary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.rewards-primary-grid > .card { height: 100%; }
.rewards-primary-grid .personal-reward-store .reward-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rewards-primary-grid .personal-reward-store .reward-form label:first-child,
.rewards-primary-grid .personal-reward-store .reward-form button[type="submit"] { grid-column: 1 / -1; }
.rewards-shell .cos-tile.available { cursor: pointer; opacity: 1; }
.rewards-shell .cos-tile.r-legendary { border-style: double; border-width: 3px; }
.rewards-shell .cos-rarity,
.rewards-shell .cos-cost { font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 800; }
.rewards-shell .cos-rarity { color: var(--text-soft); }
.rewards-shell .cos-cost { color: var(--text-strong); }
.personal-reward-store .settings-actions { margin: var(--sp-3) 0 var(--sp-2); }
.reward-create-details,
.rewards-disclosure { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-2); }
.reward-create-details { margin-block-start: var(--sp-2); }
.reward-create-details > summary,
.rewards-disclosure > summary {
  display: flex;
  align-items: center;
  min-block-size: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-strong);
  font-weight: 850;
  cursor: pointer;
}
.reward-create-details > .reward-form { padding: 0 var(--sp-3) var(--sp-3); }
.rewards-disclosure { padding: 0; overflow: clip; }
.rewards-disclosure > summary { font-size: var(--type-heading); }
.rewards-disclosure > .ach-grid,
.rewards-disclosure-body { margin: 0; padding: 0 var(--sp-3) var(--sp-3); }
.rewards-disclosure-body { display: grid; gap: var(--sp-3); }
.rewards-disclosure-body > .economy-rules { padding: 0; border: 0; background: none; box-shadow: none; }
.reward-limit,
.rwc-added { font-size: var(--type-meta); line-height: var(--leading-label); }
.personal-reward-store .reward-form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(130px, 1fr) minmax(110px, .65fr) auto; align-items: end; gap: var(--sp-2); }
.personal-reward-store .reward-form label { display: grid; min-width: 0; gap: var(--sp-1); color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 700; }
.personal-reward-store .reward-form :is(input, select) { width: 100%; min-width: 0; min-height: var(--touch-min); font-size: var(--type-control); line-height: var(--leading-prose); }
.personal-reward-store .reward .del { min-width: var(--touch-min); min-height: var(--touch-min); }
.loot-reveal-box,
.economy-confirm-box,
.reward-catalog-box,
.voucher-box { width: min(100%, 600px); max-height: min(calc(100dvh - 24px), 760px); overflow-y: auto; }
.loot-reveal-box,
.economy-confirm-box { position: relative; padding: clamp(var(--sp-4), 5vw, var(--sp-6)); text-align: start; }
.loot-reveal-box.is-capsule::before { content: none; }
.loot-ceremony-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.loot-ceremony-head h2 { margin: 2px 0 0; }
.loot-earned-label { margin: 0; font-size: var(--type-meta); font-weight: 900; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.loot-chest-art { inline-size: 118px; block-size: 118px; animation: rewardEarnedBreath 2.8s ease-in-out infinite; }
.loot-ceremony-copy { margin-block: var(--sp-2) 0; color: var(--text-soft); line-height: var(--leading-prose); }
.loot-capsule-result { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3); border: 2px solid var(--rarity-common); border-radius: var(--radius-sm); color: var(--text-strong); background: var(--surface-2); overflow: hidden; }
.loot-capsule-result[hidden] { display: none; }
.loot-capsule-result.r-rare { border-color: var(--rarity-rare); }
.loot-capsule-result.r-epic { border-color: var(--rarity-epic); }
.loot-capsule-result.r-legendary { border: 4px double var(--rarity-legendary); }
.loot-result-object { inline-size: 108px; block-size: 108px; }
.loot-capsule-result > div { display: grid; gap: var(--sp-1); min-width: 0; }
.loot-capsule-result > div > span { color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.loot-capsule-result > div > strong { overflow-wrap: anywhere; font-size: var(--type-heading); line-height: var(--leading-ui); }
.loot-capsule-result.is-revealed .loot-result-object { animation: rewardResultLand 560ms cubic-bezier(.16, 1.18, .28, 1) both; }
@keyframes rewardResultLand { 0% { opacity: 0; transform: scale(.62) rotate(-6deg); } 62% { opacity: 1; transform: scale(1.07) rotate(1deg); } 100% { opacity: 1; transform: none; } }

/* ── Честная лента сундука (chest-reveal-v1) ─────────────────────────────────
   Тот же контракт, что у самого модуля: лента едет по реальному пулу и
   останавливается на реально выигранном предмете — никакого near-miss,
   никакой подкрутки соседей. Маркер неподвижен, едет только лента. */
.loot-reel { position: relative; margin-top: var(--sp-3); height: 104px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent-warm) 12%, var(--surface-2)), var(--surface-2) 65%); }
.loot-reel[hidden] { display: none; }
.loot-reel-track { position: absolute; top: 0; left: 50%; height: 100%; display: flex; align-items: center; gap: var(--sp-2); will-change: transform; }
.loot-reel-tile {
  flex: none; display: grid; place-items: center; width: 88px; height: 88px; padding: 0;
  border-radius: var(--radius-sm); border: 2px solid var(--tile, var(--rarity-common));
  background: color-mix(in srgb, var(--tile, var(--rarity-common)) 18%, var(--surface-2));
  color: var(--text-strong); text-align: center; overflow: hidden;
}
.loot-reel-object { inline-size: 80px; block-size: 80px; filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .3)); }
.loot-reel-track.is-landed .loot-reel-tile.is-winner {
  border-width: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tile, var(--rarity-common)) 55%, transparent);
}
.loot-reel-marker {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-1.5px);
  background: linear-gradient(180deg, var(--reward-earned-border), transparent 16% 84%, var(--reward-earned-border)); opacity: .88; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .loot-reel-track { transition: none !important; } }

/* ============================================================
   Den spatial director v1.12 — position → facing → free meeting zone.
   Pair actions use the actors' measured room positions. Residents that are not
   taking part stay in the room; only a spectator whose footprint intersects
   the authored pair plate moves to the nearest free anchor.
   ============================================================ */
.den-shell[data-den-meeting] .den-avatar-core,
.den-shell[data-den-meeting] .den-body-toad,
.den-shell[data-den-meeting] .den-recovery-slug,
.den-shell[data-den-meeting] .den-resources-penguin,
.den-shell[data-den-meeting] .den-companion[data-shadow-den],
.den-shell[data-den-meeting] .den-pet.is-den-spectator-reflow {
  transition: translate 1.8s cubic-bezier(.3,.68,.22,1), scale 1.8s cubic-bezier(.3,.68,.22,1), opacity .18s ease, visibility 0s linear 0s !important;
}

.den-shell[data-den-meeting="body"].is-body-pair-approaching .den-avatar-core,
.den-shell[data-den-meeting="body"].is-body-pair-at-meeting .den-avatar-core,
.den-shell[data-den-meeting="recovery"].is-recovery-pair-approaching .den-avatar-core,
.den-shell[data-den-meeting="recovery"].is-recovery-pair-at-meeting .den-avatar-core,
.den-shell[data-den-meeting="resources"].is-resources-pair-approaching .den-avatar-core,
.den-shell[data-den-meeting="resources"].is-resources-pair-at-meeting .den-avatar-core,
.den-shell[data-den-meeting="shadow"].is-shadow-pair-approaching .den-avatar-core,
.den-shell[data-den-meeting="shadow"].is-shadow-pair-at-meeting .den-avatar-core {
  translate: var(--den-meeting-avatar-shift) 0 !important;
  scale: 1 !important;
}

.den-shell[data-den-meeting="body"].is-body-pair-approaching .den-body-toad,
.den-shell[data-den-meeting="body"].is-body-pair-at-meeting .den-body-toad,
.den-shell[data-den-meeting="recovery"].is-recovery-pair-approaching .den-recovery-slug,
.den-shell[data-den-meeting="recovery"].is-recovery-pair-at-meeting .den-recovery-slug,
.den-shell[data-den-meeting="resources"].is-resources-pair-approaching .den-resources-penguin,
.den-shell[data-den-meeting="resources"].is-resources-pair-at-meeting .den-resources-penguin,
.den-shell[data-den-meeting="shadow"].is-shadow-pair-approaching .den-companion[data-shadow-den],
.den-shell[data-den-meeting="shadow"].is-shadow-pair-at-meeting .den-companion[data-shadow-den] {
  translate: var(--den-meeting-actor-shift) 0 !important;
  scale: 1 !important;
  animation: none !important;
}

.den-shell[data-den-meeting].is-body-pair-returning .den-avatar-core,
.den-shell[data-den-meeting].is-body-pair-returning .den-body-toad,
.den-shell[data-den-meeting].is-recovery-pair-returning .den-avatar-core,
.den-shell[data-den-meeting].is-recovery-pair-returning .den-recovery-slug,
.den-shell[data-den-meeting].is-resources-pair-returning .den-avatar-core,
.den-shell[data-den-meeting].is-resources-pair-returning .den-resources-penguin,
.den-shell[data-den-meeting].is-shadow-pair-returning .den-avatar-core,
.den-shell[data-den-meeting].is-shadow-pair-returning .den-companion[data-shadow-den] {
  translate: 0 0 !important;
  scale: 1 !important;
  animation: none !important;
}

.den-shell[data-den-meeting="body"] .den-scene[data-den-renderer="v5"] .body-pair-v2,
.den-shell[data-den-meeting="recovery"] .recovery-pair-v2,
.den-shell[data-den-meeting="resources"] .resources-pair-v1 {
  left: var(--den-meeting-pair-left) !important;
  width: var(--den-meeting-pair-width) !important;
}

.den-shell[data-den-meeting] .den-pet.is-den-spectator-reflow {
  translate: var(--den-spectator-shift) 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}
.den-shell[data-den-meeting] .den-pet.is-den-spectator-returning { translate: 0 0 !important; }

/* A pair plate replaces only its two participants. Other residents witness the
   interaction from their own footprint instead of vanishing from the room. */
.den-shell.is-body-pair-active .den-scene > .den-pet:not(.den-body-toad),
.den-shell.is-recovery-pair-active .den-scene > .den-pet:not(.den-recovery-slug),
.den-shell.is-resources-pair-active .den-scene > .den-pet:not(.den-resources-penguin) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.den-resources-penguin[data-resources-direction="home"] .resources-penguin-v1__frame,
.den-resources-penguin[data-resources-direction="left"] .resources-penguin-v1__frame { transform: scaleX(-1); }
.den-companion[data-shadow-flight] .shadow-rig-body {
  animation: shadowDenLiveFlight .72s cubic-bezier(.35,0,.3,1) infinite !important;
  animation-play-state: running !important;
}

/* Traveller's east-lane visits now announce their route. Katsuya uses her
   authored compress/extend crawl while yielding the lane; every Shadow tier
   uses the same restrained flight cycle for this first locomotion pool. */
.den-shell[data-den-lane-motion] .den-recovery-slug {
  transition: translate 2.2s cubic-bezier(.28,.62,.22,1), scale 2.2s linear !important;
}
.den-shell[data-den-lane-motion] .den-companion[data-shadow-den] {
  transition: left 2.2s cubic-bezier(.28,.62,.22,1), top 2.2s cubic-bezier(.28,.62,.22,1), translate 2.2s cubic-bezier(.28,.62,.22,1) !important;
}
.den-shell[data-den-lane-motion] .den-companion[data-shadow-flight] .shadow-rig-body {
  animation: shadowDenLiveFlight .72s cubic-bezier(.35,0,.3,1) infinite !important;
  animation-play-state: running !important;
}

/* The four canonical Shadow posters have different face heights. A form-
   specific paper eyelid closes over the existing lavender eyes, so this reads
   as a blink of the same character rather than a whole-poster squash. */
.den-companion .shadow-rig-body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 6.4% 3.4% at var(--shadow-eye-left) var(--shadow-eye-y), #342443 0 72%, #76588e 78% 86%, transparent 92%),
    radial-gradient(ellipse 6.4% 3.4% at var(--shadow-eye-right) var(--shadow-eye-y), #342443 0 72%, #76588e 78% 86%, transparent 92%);
}
.den-companion .shadow-form-spark { --shadow-eye-left: 36.4%; --shadow-eye-right: 53.1%; --shadow-eye-y: 76.1%; }
.den-companion .shadow-form-spirit { --shadow-eye-left: 41.4%; --shadow-eye-right: 55.7%; --shadow-eye-y: 51.5%; }
.den-companion .shadow-form-guardian { --shadow-eye-left: 43.1%; --shadow-eye-right: 55.7%; --shadow-eye-y: 43.4%; }
.den-companion .shadow-form-keeper { --shadow-eye-left: 43.1%; --shadow-eye-right: 56.1%; --shadow-eye-y: 49.2%; }
.den-companion[data-shadow-blink="closed"] .shadow-rig-body::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .den-shell[data-den-meeting] .den-avatar-core,
  .den-shell[data-den-meeting] .den-pet,
  .den-shell[data-den-meeting] .den-companion[data-shadow-den] {
    transition: none !important;
    animation: none !important;
  }
  .den-companion .shadow-rig-body::after { display: none; }
}
@keyframes rewardCapsuleAnticipation {
  0% { transform: translateY(3px) scale(.96); filter: brightness(.88); }
  65% { transform: translateY(-2px) scale(1.04); filter: brightness(1.12); }
  100% { transform: none; filter: none; }
}
.loot-reveal-actions,
.economy-confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.loot-save-status,
.economy-confirm-status { min-height: 1.5em; color: var(--text-soft); }
.loot-save-status.is-error,
.economy-confirm-status.is-error { color: var(--bad); }
.economy-confirm-item { padding: var(--sp-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: var(--text-strong); background: var(--surface-2); font-weight: 800; overflow-wrap: anywhere; }
.reward-catalog-box .rwc-list,
.voucher-box .rwc-list { overflow-x: hidden; }
.reward-catalog-box .rwc-row,
.voucher-box .rwc-row { min-width: 0; }
.rewards-shell :is(button, input, select, summary):focus-visible,
:is(.loot-reveal-box, .economy-confirm-box, .reward-catalog-box, .voucher-box) :is(button, input, select, summary):focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

@media (max-width: 760px) {
  .rewards-primary-grid { grid-template-columns: minmax(0, 1fr); }
  .reward-hero-v189 { grid-template-columns: minmax(0, 1fr) minmax(130px, 34%); }
  .hero-reward-chest { inline-size: 170px; block-size: 170px; }
  .personal-reward-store .reward-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personal-reward-store .reward-form label:first-child,
  .personal-reward-store .reward-form button[type="submit"] { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .rewards-shell summary { min-height: var(--touch-min); }
  .daily-reward-card .lb-head { display: grid; }
  .daily-reward-card .lb-body { grid-template-columns: minmax(0, 1fr); }
  .reward-hero-v189 { min-height: 260px; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: var(--sp-2); }
  .reward-hero-v189 h2 { font-size: clamp(25px, 7.5vw, 31px); }
  .reward-hero-copy > p { display: none; }
  .reward-hero-visual { min-block-size: 128px; }
  .hero-reward-chest { inline-size: 132px; block-size: 132px; }
  .hero-reward-gold { inline-size: 54px; block-size: 54px; inset: auto 0 2% auto; }
  .reward-hero-balance { inset-inline-end: 0; padding: 5px 9px; }
  .daily-reward-card .lb-chest { min-height: 112px; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sp-2); text-align: start; }
  .daily-chest-art { grid-row: 1 / span 2; inline-size: 92px; block-size: 92px; }
  .daily-reward-card .lb-chest small { max-inline-size: none; }
  .daily-reward-card .lb-emoji { font-size: 28px; }
  .daily-reward-track { grid-template-columns: minmax(0, 1fr); }
  .capsule-odds ul { grid-template-columns: minmax(0, 1fr); }
  .rewards-shell .title-chip { min-height: var(--touch-min); padding-block: var(--sp-2); }
  .personal-reward-store .reward-form { grid-template-columns: minmax(0, 1fr); }
  .personal-reward-store .reward-form label:first-child,
  .personal-reward-store .reward-form button[type="submit"] { grid-column: 1; }
  .loot-reveal-actions,
  .economy-confirm-actions { grid-template-columns: minmax(0, 1fr); }
  .reward-catalog-box .rwc-row,
  .voucher-box .rwc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .reward-catalog-box .rwc-row .btn,
  .voucher-box .rwc-row .btn { grid-column: 2 / -1; }
  .loot-ceremony-head { align-items: flex-start; }
  .loot-chest-art { inline-size: 86px; block-size: 86px; }
  .loot-capsule-result { grid-template-columns: 82px minmax(0, 1fr); gap: var(--sp-2); }
  .loot-result-object { inline-size: 82px; block-size: 82px; }
}

@media (pointer: coarse) {
  .rewards-shell :is(button, input, select, summary),
  :is(.loot-reveal-box, .economy-confirm-box, .reward-catalog-box, .voucher-box) :is(button, input, select, summary) { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
}

@media (hover: hover) and (pointer: fine) {
  .daily-reward-card .lb-chest.ready:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .rewards-shell *,
  .rewards-shell *::before,
  .rewards-shell *::after,
  :is(.loot-reveal-box, .economy-confirm-box, .reward-catalog-box, .voucher-box) *,
  :is(.loot-reveal-box, .economy-confirm-box, .reward-catalog-box, .voucher-box) *::before,
  :is(.loot-reveal-box, .economy-confirm-box, .reward-catalog-box, .voucher-box) *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

.sound-mode-row { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); align-items: center; gap: var(--sp-3); }
.sound-mode-toggle { justify-self: start; flex-wrap: wrap; }
.sound-mode-help { max-inline-size: 68ch; margin: var(--sp-2) 0 0; }
@media (max-width: 600px) {
  .sound-mode-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .sound-mode-toggle { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sound-mode-toggle .theme-opt { min-inline-size: 0; padding-inline: var(--sp-1); }
}

/* ---------- Party, leaderboard & social privacy v125 ---------- */
.social-state,
.leaderboard-card,
.social-privacy-card,
.party-members-card { min-width: 0; }
.social-state h2,
.leaderboard-card h2 { margin-top: 0; font-size: var(--type-title); line-height: var(--leading-display); }
.social-state-error { border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); }
.social-state-error p,
.social-inline-error,
.social-confirm-status.is-error { color: var(--bad); }
.social-party-form { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-2) 86%, transparent); }
.social-party-form > label:not(.social-consent-check) { display: grid; gap: var(--sp-1); min-width: 0; color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 800; }
.social-party-form input { width: 100%; min-width: 0; }
.social-consent-check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-2); color: var(--text); font-size: var(--type-meta); line-height: var(--leading-ui); cursor: pointer; }
.social-consent-check input { width: auto; margin-top: 2px; }
.social-form-status,
.social-confirm-status,
.social-consent-state { min-height: 1.5em; margin: 0; color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-ui); }
.social-party-form button[type="submit"],
.social-state .btn:not(.ghost):not(.danger),
.social-privacy-card .btn:not(.ghost):not(.danger),
.social-confirm-actions .btn:not(.ghost):not(.danger) { color: var(--on-accent); }
.party-exit-actions .btn.danger,
.social-confirm-actions .btn.danger { color: var(--on-accent); }
.social-privacy-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); border-color: color-mix(in srgb, var(--accent) 42%, var(--line-soft)); }
.social-privacy-card.is-consented { border-color: color-mix(in srgb, var(--good) 60%, var(--line-soft)); }
.social-privacy-card h3 { margin: 0 0 var(--sp-1); font-size: var(--type-heading); line-height: var(--leading-ui); }
.social-privacy-card p { margin: 0; max-width: var(--measure-prose); color: var(--text-soft); font-size: var(--type-body); line-height: var(--leading-prose); }
.social-privacy-card .social-consent-state,
.social-privacy-card .social-inline-error { grid-column: 1 / -1; }
.event-party-identity {
  min-inline-size: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
}
.event-party-identity > b { min-inline-size: 0; overflow-wrap: anywhere; color: var(--text-strong); }
.event-raid-bar { max-inline-size: 560px; margin-block: var(--sp-3) var(--sp-2); }
.event-hero-copy > .raid-claim { margin-block-start: 0; }
.party-progress-details { padding: 0; overflow: clip; }
.party-progress-details > summary {
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-strong);
  font-weight: 900;
  list-style: none;
  cursor: pointer;
}
.party-progress-details > summary::-webkit-details-marker { display: none; }
.party-progress-details > summary::after { content: "⌄"; color: var(--muted); }
.party-progress-details[open] > summary::after { content: "⌃"; }
.party-progress-details > summary > b { margin-inline-start: auto; color: var(--text-soft); font-size: var(--type-meta); }
.party-progress-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: 0 var(--sp-4) var(--sp-4);
  border-block-start: 1px solid var(--line-soft);
}
.party-progress-section { min-inline-size: 0; padding-block-start: var(--sp-3); }
.party-progress-section h3 { margin: 0 0 var(--sp-1); overflow-wrap: anywhere; }
.party-progress-section p { font-size: var(--type-meta); line-height: var(--leading-prose); }
.party-progress-section .raid-lore { font-style: italic; }
.party-progress-section .raid-weak { font-weight: 800; }
.leaderboard-explainer { margin: 0 0 var(--sp-2); padding: var(--sp-3); border-left: 4px solid var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); font-size: var(--type-body); line-height: var(--leading-prose); }
.social-empty-copy { padding: var(--sp-3); border: 1px dashed var(--line-soft); border-radius: var(--radius-sm); }
.pm-row.is-private { border-style: dashed; }
.party-role,
.lb-you { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 6px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); color: var(--text-soft); font-size: var(--type-floor); line-height: var(--leading-label); }
.party-exit-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.social-confirm-box { position: relative; width: min(560px, calc(100vw - 24px)); max-height: min(780px, calc(100dvh - 24px)); overflow: auto; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--text); background: var(--surface-1); box-shadow: var(--shadow-modal); }
.social-confirm-box h2 { margin: 0 44px var(--sp-2) 0; font-size: var(--type-title); line-height: var(--leading-display); }
.social-confirm-kicker,
.party-shell .event-kicker,
.party-empty-hero .event-kicker { color: var(--text-soft); }
.social-confirm-kicker { margin: 0 0 var(--sp-1); font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 900; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.social-confirm-name { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); font-size: var(--type-meta); line-height: var(--leading-ui); font-weight: 800; }
.social-confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.social-confirm-box :is(button, input):focus-visible,
.social-party-form :is(button, input):focus-visible,
.social-privacy-card button:focus-visible,
.leaderboard-card :is(button, input):focus-visible,
.party-shell :is(button, input):focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

@media (max-width: 760px) {
  .social-privacy-card { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .social-privacy-card .social-consent-state,
  .social-privacy-card .social-inline-error { grid-column: 1; }
  .social-confirm-actions { grid-template-columns: minmax(0, 1fr); }
  .party-empty-actions { min-width: 0; }
  .pm-row { grid-template-columns: 42px minmax(0, 1fr) auto 42px; }
  .pm-xp { font-size: var(--type-control); }
  .party-progress-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 600px) {
  .party-exit-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  :is(.party-shell, .party-empty-hero, .leaderboard-card, .social-privacy-card, .social-confirm-box) :is(button, summary) { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
  :is(.party-shell, .party-empty-hero, .leaderboard-card, .social-privacy-card, .social-confirm-box) input:not([type="checkbox"]),
  .social-consent-check { min-block-size: var(--touch-min); }
  .leaderboard-card .lb-row { grid-template-columns: 28px 34px minmax(0, 1fr) auto; gap: var(--sp-1); }
  .leaderboard-card .lb-xp { font-size: var(--type-meta); }
}

@media (pointer: coarse) {
  :is(.party-shell, .party-empty-hero, .leaderboard-card, .social-privacy-card, .social-confirm-box) :is(button, input, summary) { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }
}

@media (hover: hover) and (pointer: fine) {
  :is(.social-privacy-card, .party-members-card) .btn:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.party-shell, .party-empty-hero, .leaderboard-card, .social-privacy-card, .social-confirm-box) *,
  :is(.party-shell, .party-empty-hero, .leaderboard-card, .social-privacy-card, .social-confirm-box) *::before,
  :is(.party-shell, .party-empty-hero, .leaderboard-card, .social-privacy-card, .social-confirm-box) *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- Habits v126: work-first, durable and non-shaming ---------- */
:root { --habits-active-fg: #4fd6ff; }
:root[data-theme="light"] { --habits-active-fg: #075f78; }
.habits-shell { display: grid; gap: var(--sp-3); }
.habits-shell > .route-title { margin: 0; font-size: var(--type-title); line-height: var(--leading-display); }
.habits-today { display: grid; gap: var(--sp-2); }
.habits-work-head { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-2); }
.habits-work-head h3 { margin: 0; color: var(--text-strong); font-size: var(--type-heading); line-height: var(--leading-ui); }
.habits-work-head p { margin: var(--sp-1) 0 0; color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-prose); }
.habits-work-head > span { min-inline-size: 2.5ch; text-align: end; font: 700 var(--type-heading)/var(--leading-tight) var(--font-data); }
.habits-today-list { margin: 0; }
.habit-create { border-top: 1px solid var(--line-soft); padding-top: var(--sp-2); }
.habit-create > summary { min-height: var(--touch-min); display: flex; align-items: center; width: fit-content; color: var(--accent); cursor: pointer; font: 700 var(--type-control)/var(--leading-ui) var(--font-ui); }
.habit-create-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(112px, 1fr) minmax(84px, .6fr) auto; gap: var(--sp-2); align-items: end; padding-top: var(--sp-2); }
.habit-create-form > label { display: grid; gap: var(--sp-1); min-width: 0; color: var(--muted); font: 700 var(--type-meta)/var(--leading-label) var(--font-ui); }
.habit-create-form :is(input,select) { width: 100%; min-height: var(--touch-min); color: var(--text); font: 400 var(--type-control)/var(--leading-prose) var(--font-ui); }
.habit-create-form fieldset { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.habit-guide-candidate,
.habit-two-minute { grid-column: 1 / -1; }
.habit-create-form legend { margin-bottom: var(--sp-1); color: var(--muted); font: 700 var(--type-meta)/var(--leading-label) var(--font-ui); }
.habit-day-picks { display: grid; grid-template-columns: repeat(7, minmax(var(--touch-min), 1fr)); gap: var(--sp-1); }
.habit-day-picks label { position: relative; display: grid; min-height: var(--touch-min); place-items: center; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.habit-day-picks input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; }
.habit-day-picks label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.habit-day-picks label:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
.habit-form-status { grid-column: 1 / -1; min-height: 1.2em; margin: 0; color: var(--bad); font-size: var(--type-meta); }
.habit-receipt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--touch-min); padding: var(--sp-2); border: 1px solid var(--good); border-radius: 10px; }
.habits-error { margin: 0; padding: var(--sp-2); border-inline-start: 3px solid var(--bad); color: var(--bad); }
.habits-recovery { display: grid; gap: var(--sp-2); }
.habits-recovery :is(h3,p) { margin: 0; }
.hsub[role="tablist"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hsub[role="tablist"] .navsubtab { min-height: var(--touch-min); }
.hsub[role="tablist"] .navsubtab:not(.active) { color: var(--text-soft); }
.hsub[role="tablist"] .navsubtab.active { color: var(--habits-active-fg); border-color: var(--habits-active-fg); }
.anti-row2 .del { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); display: inline-grid; place-items: center; }
.anti-row2 .anti-stat { color: var(--text-soft); line-height: var(--leading-prose); }
#add-antihabit > label { display: grid; gap: var(--sp-1); min-width: 0; color: var(--muted); font: 700 var(--type-meta)/var(--leading-label) var(--font-ui); }
#add-antihabit :is(input,select,button), .anti-row2 :is(button,.del) { min-height: var(--touch-min); }
.habits-shell :is(button,input,select,summary):focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.habits-shell :is(button,input,select,summary) { min-height: var(--touch-min); }
.habits-shell .check { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); }

@media (max-width: 600px), (pointer: coarse) {
  .habits-shell { gap: var(--sp-2); }
  .habit-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .habit-create-form > .habit-guide-candidate, .habit-create-form > .habit-title-field, .habit-create-form > .habit-two-minute, .habit-create-form fieldset, .habit-create-form > button, .habit-form-status { grid-column: 1 / -1; }
  .habit-create-form :is(input,select) { font-size: max(16px, var(--type-control)); }
  .habit-day-picks { grid-template-columns: repeat(7, minmax(var(--touch-min), 1fr)); overflow-x: auto; }
  .anti-row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .anti-row2 .anti-main { grid-column: 1 / -1; }
  .anti-row2 .btn { justify-self: stretch; white-space: normal; }
  #add-antihabit { grid-template-columns: minmax(0, 1fr); }
  #add-antihabit > * { grid-column: 1; }
}

@media (max-width: 380px) {
  .habit-day-picks { gap: 2px; overflow-x: visible; }
  .habit-day-picks label,
  .habit-day-picks input { box-sizing: border-box; }
  .habit-day-picks input { min-width: 0; padding: 0; border: 0; }
}

@media (max-width: 600px) {
  body:has(.habits-shell) .navrow .navsec-l { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; hyphens: auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .habits-shell *, .habits-shell *::before, .habits-shell *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}

/* Goals v127 cascade closure: legacy Goals rules live earlier in the product
   history, so the migrated controls are reasserted at the final screen layer. */
.goals-shell .goal-form,
.goals-shell .goal-edit-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-2); padding: var(--sp-2); align-items: end; }
.goals-shell .goal-form input,
.goals-shell .goal-form select { width: 100%; min-width: 0; }
.goals-shell .goal-form label { display: grid; gap: var(--sp-1); min-width: 0; }
.goals-shell .goal-form .goal-field-wide,
.goals-shell .goal-form .goal-extra,
.goals-shell .goal-form > button,
.goals-shell .goal-form .goal-form-status,
.goals-shell .goal-edit-form label:first-child,
.goals-shell .goal-edit-form label:nth-child(2),
.goals-shell .goal-edit-form > button { grid-column: 1 / -1; }
.goals-shell .goal-actions { justify-content: flex-start; }
.goals-shell .gstep { min-height: var(--touch-min); grid-template-columns: var(--touch-min) minmax(0,1fr) var(--touch-min); padding: 0; }
.goals-shell .gstep .check,
.goals-shell .gstep .del { inline-size: var(--touch-min); block-size: var(--touch-min); }
.goals-shell .add-step-form,
.goals-shell .metric-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-2); align-items: end; }
.goals-shell .gfilter { min-height: var(--touch-min); }
.goals-shell .goal-detail:not([open]) > .goal-body,
.goals-shell .goal-edit:not([open]) > .goal-edit-form,
.goals-shell .goals-create:not([open]) > :not(summary),
.goals-shell .goals-bulk:not([open]) > :not(summary),
.goals-shell .goal-extra:not([open]) > :not(summary) { display: none; }
.goals-shell .goal-detail[open] > .goal-body { display: grid; }
@media (min-width: 601px) {
  .goals-shell .goal-form .goal-extra { grid-column: 1; }
  .goals-shell .goal-form > button { grid-column: 2; align-self: end; }
}
@media (max-width: 600px) {
  .goals-shell .goal-form,
  .goals-shell .goal-edit-form,
  .goals-shell .add-step-form,
  .goals-shell .metric-form { grid-template-columns: minmax(0,1fr); }
  .goals-shell :is(.goal-form,.goal-edit-form,.add-step-form,.metric-form) > * { grid-column: 1 / -1; }
  .goals-shell .gfilters {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-block: var(--sp-1);
    scrollbar-width: thin;
  }
  .goals-shell .gfilter { flex: 0 0 auto; white-space: nowrap; }
  .goals-shell :is(.goal-breadcrumb,.goal-linked-list,.goal-actions) a {
    display: inline-flex;
    min-block-size: var(--touch-min);
    align-items: center;
  }
  body:has(.goals-shell) .navrow .navsec-l {
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-align: center;
  }
}

/* Mobile navigation v128 — four direct destinations + purpose-grouped More.
   This is DOM-aligned navigation; no CSS `order` participates in its sequence. */
.mobile-sheet-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 var(--touch-min);
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-4));
}
.mobile-sheet-profile h2 {
  margin: 0;
  color: var(--text-strong);
  font: 750 var(--type-heading)/var(--leading-ui) var(--font-ui);
}
.mobile-sheet-profile h2:focus { outline: none; }
.mobile-sheet-groups { display: grid; gap: var(--sp-2); }
.mobile-sheet-group {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-3) 72%, transparent);
}
.mobile-sheet-group > h3 {
  margin: 0;
  color: var(--muted);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.mobile-sheet-group-entries { display: grid; gap: var(--sp-1); }
.mobile-sheet-group .mobile-sheet-entry {
  min-block-size: var(--touch-min);
  border-color: color-mix(in srgb, var(--line-soft) 82%, transparent);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}
.mobile-sheet-entry[aria-current="page"] {
  border-color: color-mix(in srgb, var(--accent-2) 72%, var(--line));
  background: color-mix(in srgb, var(--accent) 17%, var(--surface-3));
  box-shadow: inset 3px 0 0 var(--accent-2);
}
.mobile-nav-sheet :is(button,.mobile-sheet-entry):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.mobile-sheet-utils { margin-top: 0; }
.mobile-sheet-utils .btn { min-block-size: var(--touch-min); }
@media (max-width: 600px), (pointer: coarse) {
  .mobile-sheet { max-block-size: min(86svh, 720px); }
  .mobile-sheet-entry { min-block-size: var(--touch-min); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-overlay,
  .mobile-nav-sheet { transition-duration: 0s; }
}

/* Notes v129 — quiet capture, durable actions, and one readable list. */
.notes-screen { display: grid; gap: var(--sp-3); max-width: var(--work-max, 720px); }
.notes-header { max-width: var(--measure-compact, 55ch); }
.notes-header .eyebrow { margin: 0 0 var(--sp-1); color: var(--today-kicker-fg, var(--accent)); font-size: var(--type-meta, 12px); line-height: var(--leading-label, 1.2); font-weight: 800; letter-spacing: var(--tracking-caps, .08em); text-transform: uppercase; }
.notes-header h2 { margin: 0; font-size: var(--type-title, clamp(20px,3vw,34px)); line-height: var(--leading-display, 1.12); }
.notes-header p { margin: var(--sp-1) 0 0; font-size: var(--type-body, 15px); line-height: var(--leading-prose, 1.5); color: var(--muted); }
.notes-list { display: grid; gap: var(--sp-2); }
.note-card { display: grid; gap: var(--sp-2); }
.note-top { align-items: flex-start; }
.note-top h3 { margin: 0; color: var(--text-strong); font-size: var(--type-heading, 16px); line-height: var(--leading-ui, 1.35); overflow-wrap: anywhere; }
.note-when { display: inline-flex; gap: var(--sp-1); margin-top: 2px; font-size: var(--type-meta, 12px); line-height: var(--leading-label, 1.2); }
.note-acts { flex-wrap: wrap; justify-content: flex-end; }
.note-acts .del, .note-delete-box .modal-x { min-inline-size: var(--touch-min, 42px); min-block-size: var(--touch-min, 42px); }
.note-text { font-size: var(--type-body, 15px); line-height: var(--leading-prose, 1.5); }
.note-text:focus-visible, .note-acts button:focus-visible, .capture-card button:focus-visible, .notes-recovery button:focus-visible, .note-delete-box button:focus-visible { outline: var(--focus-ring, 2px solid var(--accent)); outline-offset: 3px; }
.note-save-status, .capture-status { min-block-size: 1.2em; margin: 0; color: var(--muted); font-size: var(--type-meta, 12px); line-height: var(--leading-label, 1.2); }
.notes-empty p, .notes-recovery p { margin: 0; font-size: var(--type-body, 15px); line-height: var(--leading-prose, 1.5); }
.notes-recovery { display: grid; gap: var(--sp-2); }
.notes-recovery h2 { margin: 0; font-size: var(--type-title, clamp(20px,3vw,34px)); line-height: var(--leading-display, 1.12); }
.note-delete-overlay { display: grid; place-items: center; padding: var(--sp-3); }
.note-delete-box { position: relative; inline-size: min(100%, var(--measure-dialog, 34ch)); padding: var(--sp-4); background: var(--surface-1, var(--panel)); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-card, 18px); box-shadow: var(--shadow-raised); }
.note-delete-box h2 { margin: 0; padding-inline-end: 42px; font-size: var(--type-title, clamp(20px,3vw,34px)); line-height: var(--leading-display, 1.12); }
.note-delete-box p { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--type-body, 15px); line-height: var(--leading-prose, 1.5); }
.note-delete-box .modal-x { position: absolute; inset: var(--sp-2) var(--sp-2) auto auto; }
.note-delete-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-3); }
@media (max-width: 600px) {
  .notes-screen { gap: var(--sp-2); }
  .cap-row { display: grid; grid-template-columns: minmax(0,1fr) var(--touch-min, 42px) var(--touch-min, 42px) var(--touch-min, 42px); }
  .cap-row input[name="text"] { min-block-size: var(--touch-min, 42px); }
  .cap-btn, .cap-add { inline-size: var(--touch-min, 42px); min-block-size: var(--touch-min, 42px); padding: 0; display: grid; place-items: center; }
  .capture-status { grid-column: 1 / -1; }
  .note-top { display: grid; grid-template-columns: minmax(0,1fr); }
  .note-acts { justify-content: flex-start; }
  .note-acts .btn { min-block-size: var(--touch-min, 42px); }
  .note-delete-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .note-delete-actions .btn { min-block-size: var(--touch-min, 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .notes-screen *, .note-delete-overlay * { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

/* ── «Первая строка назавтра» (DISCIPLINE-ARENA-PLAN §2) ──────────────────────
   Утром экран ВЕДЁТ этой строкой, а не списком: поэтому сам текст берёт
   --type-title, а всё вокруг него намеренно тихое. Роли только из восьми
   существующих, новых токенов нет (DESIGN-CRAFT-RULES, единый token contract). */
.first-line-card { border-left: 3px solid var(--accent, #e0a23e); }
.fl-kicker { margin: 0 0 6px; font-size: var(--type-meta); color: var(--muted); }
.fl-text {
  margin: 0 0 14px; font-family: var(--font-display); font-size: var(--type-title);
  line-height: var(--leading-display); max-width: var(--measure-compact);
}
.fl-acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* Вечерний вопрос — часть «Итога дня», тон спокойный: это предложение, не форма. */
.fl-ask { margin-top: 14px; }
.fl-label { display: block; margin-bottom: 6px; font-size: var(--type-meta); color: var(--muted); }
.fl-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fl-input {
  flex: 1 1 220px; min-width: 0; font-size: var(--type-control);
  padding: 9px 12px; border-radius: var(--radius);
  background: var(--bg, transparent); border: 1px solid var(--line); color: inherit;
}
/* Тач: цель не ниже 42px (неподвижная граница продукта). */
@media (hover: none) {
  .fl-input { min-height: 42px; }
  .fl-acts .btn, .fl-row .btn { min-height: 42px; }
}

/* ── Схватки (DISCIPLINE-ARENA-PLAN §1) ──────────────────────────────────────
   Гейт §1: проигранная схватка — второй акт, а не приговор. Поэтому «Проиграл»
   не окрашен в красное и вообще ничем не выделен сильнее «Выиграл»: в любой
   истории про Паркера первую схватку он проигрывает всегда. */
.fights-score { font-family: var(--font-number); font-size: var(--type-heading); letter-spacing: var(--tracking-caps); }
/* Секунды — главное число фичи, поэтому крупнее строк списка. */
.fights-secs { margin: 0 0 10px; font-size: var(--type-body); color: var(--muted); }
.fights-secs b { font-family: var(--font-number); color: inherit; }
.fights-intro { margin: 0 0 12px; font-size: var(--type-control); color: var(--muted); max-width: var(--measure-compact); }
.fights-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fight-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fight-row.marked { opacity: .72; }
.fight-name { flex: 1 1 auto; min-width: 0; font-size: var(--type-control); }
.fight-secs { font-family: var(--font-number); font-size: var(--type-meta); color: var(--muted); }
.fight-acts { display: flex; gap: 6px; }
/* Проигранная схватка отмечается нейтрально — тем же весом, что выигранная. */
.fight-acts .is-lost { border-color: var(--line); font-weight: 700; }
.fights-against { margin: 10px 0 0; font-size: var(--type-meta); color: var(--muted); max-width: var(--measure-compact); }
.fight-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fight-add input {
  min-width: 0; font-size: var(--type-control); padding: 8px 10px;
  border-radius: var(--radius); background: var(--bg, transparent); border: 1px solid var(--line); color: inherit;
}
#fight-title { flex: 1 1 180px; }
#fight-secs { flex: 0 0 84px; }
@media (hover: none) {
  .fight-add input, .fight-add .btn, .fight-acts .btn { min-height: 42px; }
}
/* Предложение схватки из детектора (§1, вариант C). Отделено линией, а не
   цветом: это ДРУГОЙ голос — приложение заметило, — и он не должен выглядеть
   весомее собственных схваток человека. Они здесь главные, предложение лишь
   подсказка, от которой можно отказаться одним словом. */
.fight-suggest { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.fight-suggest-line { margin: 0 0 var(--sp-2); font-size: var(--type-meta); color: var(--muted); max-width: var(--measure-compact); }
.fight-suggest-row { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.fight-suggest-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (hover: none) { .fight-suggest-acts .btn { min-height: 42px; } }

/* ── Контекст провала (§4) и обычный день после срыва (§12) ───────────────────
   Тон обеих поверхностей приборный, а не сочувственный. Ни красного, ни акцентного
   цвета: гейт §4 требует арифметики, а цвет здесь немедленно стал бы оценкой —
   ровно тем «не расстраивайся», которое план запрещает. Числа набраны тем же
   числовым шрифтом, что счёт схваток и таймер: это одна и та же порода данных. */
.fail-context {
  margin: var(--sp-2) 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  font-size: var(--type-meta); color: var(--muted);
}
.kv-item { display: inline-flex; align-items: baseline; gap: 5px; }
/* Двоеточие рисуется, а не пишется: подпись обязана остаться отдельным текст-узлом
   ровно того вида, каким она лежит в словаре, иначе перевод её не находит. */
.kv-k::after { content: ':'; }
.kv-v { font-family: var(--font-number); font-weight: 700; color: var(--text-strong); }
/* ── Развилка §7 «не хочу» ≠ «не знаю как» ───────────────────────────────────
   Оба ответа имеют РОВНО одинаковый вес: тот же класс, тот же размер, ни один
   не подсвечен. Выделить любой значило бы поставить диагноз за человека — а вся
   ценность фичи в том, что диагноз ставит он сам. Та же причина, по которой
   «Проиграл» у схваток не окрашен красным. */
.stuck-card { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.stuck-title {
  margin: 0; font-size: var(--type-control); color: var(--text-strong);
  max-width: var(--measure-compact); overflow-wrap: anywhere;
}
.stuck-nums { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--type-meta); color: var(--muted); }
.stuck-note { font-size: var(--type-meta); color: var(--muted); max-width: var(--measure-compact); }
.stuck-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.stuck-card .fl-row { width: 100%; }
@media (hover: none) {
  .stuck-acts .btn, .stuck-card .fl-row .btn, .stuck-card .fl-input { min-height: 42px; }
}

/* Карточка §12 — колонка: наблюдение, числа и предложение читаются сверху вниз,
   а не сталкиваются в одну строку, как у обычного однострочного нуджа. */
.lapse-nudge { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.lapse-nums { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--type-meta); color: var(--muted); }
.lapse-core { font-size: var(--type-meta); color: var(--muted); max-width: var(--measure-compact); }

/* ── Pets v130: one semantic route surface; art stays authored, controls stay operable. ── */
.pets-shell { display: grid; gap: var(--sp-3); }
.pets-route-head { display: flex; align-items: center; min-height: 42px; }
.pets-route-head h2 { margin: 0; color: var(--text-strong); font-size: var(--type-title); line-height: var(--leading-display); }
.pet-art.pet-art-action,
.pet-hint {
  appearance: none;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.pet-art.pet-art-action { padding: 0; border-radius: 18px; cursor: pointer; }
.pet-art.pet-art-action:focus-visible,
.pet-hint:focus-visible,
.pet-edit:focus-visible,
.pet-rename-form :is(input,button):focus-visible,
.pet-species-picker select:focus-visible,
.body-toad-card-actions button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.pet-hint { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0; cursor: help; text-align: center; }
.pet-hint:hover { color: var(--text); opacity: 1; }
.pet-rename-error { margin: 0; color: var(--bad); font-size: var(--type-meta); line-height: var(--leading-label); }

/* ── Stats v135: a semantic observation surface, never a false deficit. ── */
.stats-shell { display: grid; gap: var(--sp-3); }
.stats-route-head { display: flex; align-items: center; min-height: 42px; }
.stats-route-head h2 { margin: 0; color: var(--text-strong); font-size: var(--type-title); line-height: var(--leading-display); }
.stats-shell .balance-card.is-observing .bal-score { color: var(--muted); }
.stats-shell .balance-card.is-observing .bal-head { align-items: baseline; }

@media (max-width: 600px), (pointer: coarse) {
  .pets-route-head { min-height: var(--touch-min); }
  .pet-edit { min-width: var(--touch-min); min-height: var(--touch-min); display: inline-grid; place-items: center; padding: 0; }
  .pet-hint { min-height: var(--touch-min); padding-inline: var(--sp-2); }
  .pet-species-picker select,
  .pet-rename-form input,
  .pet-rename-btns .btn,
  .body-toad-card-actions .btn,
  .pets-shell .tts-btn { min-width: var(--touch-min); min-height: var(--touch-min); }
  .pet-rename-form input { font-size: max(16px, var(--type-control)); }
  .stats-route-head { min-height: var(--touch-min); }
}

@media (prefers-reduced-motion: reduce) {
  .pet-art.pet-art-action:active .pet-svg { transform: none; }
}

/* ── Доска заказов: вкладка «Сегодня» ────────────────────────────────────────
   Отсылка к доскам объявлений Ведьмака и Skyrim, но authored-средствами, а не
   фототекстурой: STYLE-DECISION держит язык cut-paper, и пергамент в него
   ложится, а фотореалистичная древесина выбилась бы из всего приложения.
   Отступы — только шкала --sp-*, размеры — восемь ролей --type-*. */
.today-tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--sp-2);
  margin-bottom: 0;
}
.today-tab {
  font-size: var(--type-control); padding: var(--sp-2) var(--sp-4); min-height: 42px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer;
}
/* Активная вкладка отличается не только цветом: рамка и вес шрифта — C-05. */
.today-tab.on { color: inherit; font-weight: 700; border-color: var(--accent, #e0a23e); background: var(--panel); }

.board-shell { display: block; }
/* Листы не растягиваются в одиночном ряду и не сжимаются в нечитаемую полоску. */
.bsheet { max-width: 260px; }
.board-scene { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }

/* Доска: тёплые доски, тёмная рамка, лёгкая текстура полосами. */
.board-wood {
  position: relative; display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: var(--sp-4); padding: var(--sp-5); min-height: 320px;
  border-radius: var(--radius); border: 3px solid #3a2b1d;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 2px, rgba(255,255,255,.03) 2px 4px, transparent 4px 58px),
    linear-gradient(160deg, #6b5236, #4a3826 60%, #3d2e1f);
  box-shadow: inset 0 0 40px rgba(0,0,0,.55);
}
/* Пергамент. Наклон приходит инлайном (--tilt) и детерминирован по id заказа. */
.bsheet {
  position: relative; flex: 0 1 208px; min-height: 132px; text-align: left; cursor: pointer;
  padding: var(--sp-3) var(--sp-3) var(--sp-4); border: 0; border-radius: 2px;
  font-family: var(--font-display); font-size: var(--type-control); line-height: var(--leading-ui);
  color: #2f2517; background: linear-gradient(#f4e6c8, #e6d4ae);
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
  clip-path: polygon(0 2%, 98% 0, 100% 97%, 3% 100%);
  transition: transform .12s ease, box-shadow .12s ease;
}
.bsheet:hover, .bsheet:focus-visible { transform: rotate(var(--tilt, 0deg)) translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.5); }
/* Гвоздик сверху — лист приколот, а не приклеен. */
.bsheet::before {
  content: ''; position: absolute; top: 6px; left: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: radial-gradient(#9c8358, #4a3a26);
  transform: translateX(-50%); box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
/* Выбранный лист: подсвечен И вынесен вперёд — не только цветом (C-05). */
.bsheet.sel { outline: 2px solid #c9a227; outline-offset: 2px; z-index: 2; transform: rotate(0deg) translateY(-4px) scale(1.02); }
.bsheet.taken { filter: saturate(.8); }
.bsheet-text { display: block; }
.bsheet-mark {
  display: inline-block; margin-top: var(--sp-2); font-family: var(--font-ui);
  font-size: var(--type-meta); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: #5a4222; border: 1px solid #a08a5e; border-radius: 999px; padding: 0 var(--sp-2);
}
/* Сургучная печать помечает сезонный заказ — вместе со словом в детали, не вместо. */
.bsheet-seal {
  position: absolute; right: 10px; bottom: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(#a8302c, #6d1c1a); box-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.board-detail { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.bdetail-title { margin: 0 0 var(--sp-2); font-size: var(--type-heading); line-height: var(--leading-label); }
.bdetail-meta { margin: 0 0 var(--sp-3); font-size: var(--type-meta); color: var(--muted); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.bdetail-note, .bdetail-empty { margin: 0 0 var(--sp-4); font-size: var(--type-control); color: var(--muted); max-width: var(--measure-compact); }
.bdetail-full { margin: 0; font-size: var(--type-meta); color: var(--muted); }
.bdetail-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.board-ask { margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--type-meta); color: var(--muted); }
.board-ask .btn { margin-left: var(--sp-2); }

@media (max-width: 860px) {
  .board-scene { grid-template-columns: 1fr; }
  .bsheet { flex: 1 1 140px; min-height: 108px; }
}
@media (hover: none) {
  .bdetail-acts .btn, .board-ask .btn { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .bsheet, .bsheet:hover, .bsheet:focus-visible { transition: none; }
}

/* ── Калибровка вкуса доски ──────────────────────────────────────────────────
   Один заказ за раз, крупно: это не форма, а вопрос. Шкала --sp-*, роли --type-*. */
.board-calib { max-width: var(--measure-prose); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.board-calib h2 { margin: 0 0 var(--sp-2); font-size: var(--type-heading); line-height: var(--leading-label); }
.calib-lead { margin: 0 0 var(--sp-4); font-size: var(--type-control); color: var(--muted); max-width: var(--measure-compact); }
.calib-count { margin: 0 0 var(--sp-2); font-family: var(--font-number); font-size: var(--type-meta); color: var(--muted); letter-spacing: var(--tracking-caps); }
.calib-order {
  margin: 0 0 var(--sp-4); padding: var(--sp-4); border-left: 3px solid var(--accent, #e0a23e);
  font-family: var(--font-display); font-size: var(--type-title); line-height: var(--leading-display);
  max-width: var(--measure-compact);
}
.calib-label { display: block; margin-bottom: var(--sp-2); font-size: var(--type-meta); color: var(--muted); }
.calib-note {
  width: 100%; box-sizing: border-box; margin-bottom: var(--sp-4); font-size: var(--type-control);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  background: var(--bg, transparent); border: 1px solid var(--line); color: inherit;
}
.calib-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (hover: none) { .calib-acts .btn, .calib-note { min-height: 42px; } }

/* ============================================================
   Shadow Den v1.3 — live approach, authored atomic palm contact.
   The current evolution is selected before contact; no Spark fallback.
   ============================================================ */
.den-companion[data-shadow-den] {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  translate: 0 0;
  scale: 1;
  transform-origin: 50% 78%;
  transition:
    left .82s cubic-bezier(.22,.72,.2,1),
    top .82s cubic-bezier(.22,.72,.2,1),
    translate 1.8s cubic-bezier(.22,.72,.2,1),
    scale 1.8s cubic-bezier(.22,.72,.2,1),
    opacity .18s ease,
    visibility 0s linear 0s;
}
.den-companion[data-shadow-tier="0"] .shadow-rig { transform: scale(.72); }
.den-companion[data-shadow-tier="1"] .shadow-rig { transform: scale(.82); }
.den-companion[data-shadow-tier="2"] .shadow-rig { transform: scale(.91); }
.den-companion[data-shadow-tier="3"] .shadow-rig { transform: scale(1); }
.den-companion[data-shadow-den].is-shadow-den-solo {
  filter: drop-shadow(0 0 12px color-mix(in srgb, #9d78eb 58%, transparent));
}
.den-companion[data-shadow-den][data-shadow-den-mode="greet"] .shadow-rig-body {
  animation: shadowDenAnswer 1.55s cubic-bezier(.2,.82,.22,1) 2 !important;
}
.den-companion[data-shadow-den][data-shadow-den-mode="speak"] .shadow-rig-body {
  animation: shadowDenLeanIn 1.4s cubic-bezier(.22,.72,.2,1) both !important;
}
.den-companion[data-shadow-den][data-shadow-den-mode="think"] { translate: 0 -4%; }

.shadow-den-pair-v1 {
  display: none;
  position: absolute;
  left: 35%;
  bottom: 1.5%;
  width: 43%;
  aspect-ratio: 1;
  z-index: 12;
  pointer-events: none;
}
.shadow-den-pair-v1.is-active { display: block; }
.shadow-den-pair-v1__stage,
.shadow-den-pair-v1__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.shadow-den-pair-v1__frame {
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 12px 13px rgba(4,6,12,.4));
  animation: shadowDenAtomicBreath 3.2s ease-in-out infinite;
}
.den-shell.is-shadow-pair-approaching .den-avatar-core,
.den-shell.is-shadow-pair-at-meeting .den-avatar-core,
.den-shell.is-shadow-pair-returning .den-avatar-core {
  translate: 12% 1%;
  scale: 1;
}
.den-shell.is-shadow-pair-approaching .den-companion[data-shadow-den],
.den-shell.is-shadow-pair-at-meeting .den-companion[data-shadow-den],
.den-shell.is-shadow-pair-returning .den-companion[data-shadow-den] {
  translate: -150% 30%;
  scale: 1;
}
.den-shell.is-shadow-pair-approaching .den-companion .shadow-rig-body,
.den-shell.is-shadow-pair-returning .den-companion .shadow-rig-body {
  animation: shadowDenLiveFlight .72s cubic-bezier(.35,0,.3,1) infinite;
}
.den-shell.is-shadow-pair-at-meeting .den-companion .shadow-rig-body {
  animation: shadowDenLiveContact 2.8s cubic-bezier(.45,0,.55,1) infinite;
}
.den-shell[data-shadow-pair-phase="1"] .den-avatar-core { translate: 10% 1%; }
.den-shell[data-shadow-pair-phase="2"] .den-avatar-core { translate: 12% 1%; }
.den-shell[data-shadow-pair-phase="3"] .den-avatar-core { translate: 11% 1%; }
.den-shell[data-shadow-pair-phase="1"] .den-companion[data-shadow-den] { translate: -142% 27%; }
.den-shell[data-shadow-pair-phase="2"] .den-companion[data-shadow-den] { translate: -150% 30%; }
.den-shell[data-shadow-pair-phase="3"] .den-companion[data-shadow-den] { translate: -146% 26%; }
.den-shell[data-shadow-pair-phase="1"] .den-companion .shadow-rig-body {
  animation: shadowDenPhaseListen 1.55s cubic-bezier(.42,0,.3,1) infinite;
}
.den-shell[data-shadow-pair-phase="2"] .den-companion .shadow-rig-body {
  animation: shadowDenPhaseCare 1.7s cubic-bezier(.42,0,.3,1) infinite;
}
.den-shell[data-shadow-pair-phase="3"] .den-companion .shadow-rig-body {
  animation: shadowDenPhaseAnswer 1.45s cubic-bezier(.42,0,.3,1) infinite;
}
.den-shell.is-shadow-pair-active .den-scene > .den-pet {
  opacity: 1;
  pointer-events: none;
}
.den-shell.is-shadow-pair-active .den-avatar-core,
.den-shell.is-shadow-pair-active .den-companion[data-shadow-den] {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}
.den-shadow-actions {
  border-color: color-mix(in srgb, #9d78eb 34%, var(--line-soft));
  background: color-mix(in srgb, #9d78eb 5%, transparent);
}

@keyframes shadowDenLiveFlight {
  0%,100% { transform: translateY(1.5%) rotate(-2deg) skewX(0deg); }
  45% { transform: translateY(-3.5%) rotate(2deg) skewX(-1.6deg); }
  68% { transform: translateY(-1%) rotate(.4deg) skewX(.8deg); }
}
@keyframes shadowDenAnswer {
  0%,100% { transform: translateY(0) rotate(0) scale(1); }
  24% { transform: translateY(-11%) rotate(-3deg) scale(1.08); }
  48% { transform: translateY(-5%) rotate(3deg) scale(1.045); }
  72% { transform: translateY(-8%) rotate(-1deg) scale(1.065); }
}
@keyframes shadowDenLeanIn {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-8%) scale(1.1); }
  100% { transform: translateY(-4%) scale(1.055); }
}
@keyframes shadowDenLiveContact {
  0%,100% { transform: translateY(0) rotate(-.35deg); }
  45% { transform: translateY(-2%) rotate(.6deg); }
  72% { transform: translateY(-.5%) rotate(0deg); }
}
@keyframes shadowDenPhaseListen {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  48% { transform: translateY(-3.2%) rotate(1.2deg); }
}
@keyframes shadowDenPhaseCare {
  0%,100% { transform: translateY(-.5%) rotate(.4deg); }
  46% { transform: translateY(-1.8%) rotate(-1.1deg); }
}
@keyframes shadowDenPhaseAnswer {
  0%,100% { transform: translateY(-1%) rotate(-.4deg); }
  42% { transform: translateY(-4%) rotate(1.5deg); }
  68% { transform: translateY(-2%) rotate(.2deg); }
}
@keyframes shadowDenAtomicBreath {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-.7%) scale(1.004); }
}

@media (max-width: 720px) {
  .shadow-den-pair-v1 { left: 27%; bottom: 1%; width: 57%; }
  .den-shell.is-shadow-pair-approaching .den-companion[data-shadow-den],
  .den-shell.is-shadow-pair-at-meeting .den-companion[data-shadow-den],
  .den-shell.is-shadow-pair-returning .den-companion[data-shadow-den] {
    translate: -124% 26%;
    scale: 1;
  }
}

@media (max-width: 560px) {
  /* A running focus pill sits above the bottom navigation. Keep the resident
     disclosure scrollable above both fixed surfaces so Shadow actions remain
     reachable while a session is active. */
  body:has(.focus-pill.show) .den-shell {
    padding-bottom: calc(156px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .den-companion[data-shadow-den],
  .den-companion[data-shadow-den] *,
  .shadow-den-pair-v1 *,
  .den-shell.is-shadow-pair-approaching .den-avatar-core,
  .den-shell.is-shadow-pair-at-meeting .den-avatar-core,
  .den-shell.is-shadow-pair-returning .den-avatar-core {
    animation: none !important;
    transition: none !important;
  }
  .den-shell.is-shadow-pair-approaching .den-companion[data-shadow-den],
  .den-shell.is-shadow-pair-at-meeting .den-companion[data-shadow-den],
  .den-shell.is-shadow-pair-returning .den-companion[data-shadow-den],
  .den-shell.is-shadow-pair-approaching .den-avatar-core,
  .den-shell.is-shadow-pair-at-meeting .den-avatar-core,
  .den-shell.is-shadow-pair-returning .den-avatar-core {
    translate: 0 0 !important;
    scale: 1 !important;
  }
}

/* ============================================================
   Den pet-pet scenes v1 — authored pair replaces participants only.
   Traveller and every non-participating resident remain in the room.
   ============================================================ */
.den-pet-pair-v1 {
  display: none;
  position: absolute;
  left: 1.5%;
  bottom: .8%;
  width: 38%;
  aspect-ratio: 1;
  z-index: 12;
  pointer-events: none;
}
.den-pet-pair-v1.is-active { display: block; }
.den-pet-pair-v1__stage,
.den-pet-pair-v1__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.den-pet-pair-v1__frame {
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 11px 12px rgba(4,6,12,.42));
}
.den-pet-pair-v1__frame--a { opacity: 1; }
.den-pet-pair-v1__frame--b { opacity: 0; }
.den-pet-pair-v1.is-active .den-pet-pair-v1__frame--a { animation: denPetRecoveryA 2.4s steps(1,end) infinite; }
.den-pet-pair-v1.is-active .den-pet-pair-v1__frame--b { animation: denPetRecoveryB 2.4s steps(1,end) infinite; }
@keyframes denPetRecoveryA { 0%,48%,100% { opacity: 1; } 48.001%,92% { opacity: 0; } }
@keyframes denPetRecoveryB { 0%,48%,92.001%,100% { opacity: 0; } 48.001%,92% { opacity: 1; } }

.den-shell:is(.is-pet-pair-approaching,.is-pet-pair-at-meeting) .den-body-toad {
  translate: -52% 0 !important;
  transition: translate 2.2s cubic-bezier(.28,.62,.22,1) !important;
}
.den-shell:is(.is-pet-pair-approaching,.is-pet-pair-at-meeting) .den-recovery-slug {
  translate: -306% 0 !important;
  transition: translate 2.2s cubic-bezier(.28,.62,.22,1) !important;
}
.den-shell.is-pet-pair-returning .den-body-toad,
.den-shell.is-pet-pair-returning .den-recovery-slug {
  translate: 0 0 !important;
  transition: translate 2.3s cubic-bezier(.28,.62,.22,1) !important;
}
.den-shell.is-pet-pair-active .den-body-toad,
.den-shell.is-pet-pair-active .den-recovery-slug {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}
.den-shell.is-pet-pair-active .den-avatar-core,
.den-shell.is-pet-pair-active .den-companion[data-shadow-den],
.den-shell.is-pet-pair-active .den-resources-penguin {
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 720px) {
  .den-pet-pair-v1 { left: -.5%; bottom: .5%; width: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .den-pet-pair-v1,
  .den-pet-pair-v1 *,
  .den-shell:is(.is-pet-pair-approaching,.is-pet-pair-at-meeting,.is-pet-pair-returning) .den-pet {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Доска: сделанное, значки и медиа ────────────────────────────────────────
   Полка со сделанным (ARENA §8): действия должны оставлять видимый след.
   Медиа локальное — ни ленты, ни счётчиков (гейт §5). */
.board-done { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.board-done h3 { margin: 0 0 var(--sp-3); font-size: var(--type-heading); }
.bdone-badges { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; }
.bdone-badge {
  font-size: var(--type-meta); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: #5a4222; background: linear-gradient(#f0dfb8, #e0cb9d);
  border: 1px solid #a08a5e; border-radius: 999px; padding: 2px var(--sp-3);
}
.bdone-private { margin: 0 0 var(--sp-4); font-size: var(--type-meta); color: var(--muted); }
.bdone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.bdone { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); }
.bdone-title { margin: 0 0 var(--sp-2); font-size: var(--type-control); line-height: var(--leading-ui); }
.bdone-img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); margin-bottom: var(--sp-2); }
.bdone-cap { margin: 0 0 var(--sp-2); font-size: var(--type-meta); color: var(--muted); max-width: var(--measure-compact); }
.bdone-label { display: block; margin-bottom: var(--sp-1); font-size: var(--type-meta); color: var(--muted); }
.bdone-input, .bdone-file {
  width: 100%; box-sizing: border-box; margin-bottom: var(--sp-2); font-size: var(--type-control);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  background: var(--bg, transparent); border: 1px solid var(--line); color: inherit;
}
.bdone-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (hover: none) { .bdone-acts .btn, .bdone .btn, .bdone-input, .bdone-file { min-height: 42px; } }

/* ============================================================
   Board of Contracts v149 — one authored board, a reading rail,
   and a private travel journal. Skyrim/Witcher inform the spatial
   metaphor; Satoru's cut-paper language, legibility and restraint win.
   ============================================================ */
.board-screen,
.board-calib {
  --board-ink: #302619;
  --board-paper: #f2e3c2;
  --board-paper-low: #dfc99e;
  --board-wood-hi: #705339;
  --board-wood: #4b3727;
  --board-wood-low: #2c2119;
  --board-gold: #c99b3b;
  --board-detail-bg: #171411;
  --board-detail-fg: #f3ead8;
  --board-detail-muted: #c8bca9;
}
.board-screen { display: grid; gap: var(--sp-4); min-width: 0; }
.board-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-1) 0 var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.board-kicker {
  margin: 0 0 var(--sp-1);
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
}
.board-head h2 { margin: 0; color: var(--text-strong); font-size: var(--type-title); line-height: var(--leading-display); }
.board-head > div > p:last-child { max-width: var(--measure-compact); margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--type-body); line-height: var(--leading-prose); }
.board-count { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; margin: 0; }
.board-count b { min-inline-size: 3.2ch; color: var(--text-strong); font-family: var(--font-number); font-size: var(--type-title); line-height: var(--leading-tight); }
.board-count span { color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-label); }
.board-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.board-head-actions > .btn { min-height: var(--touch-min); text-align: center; }
.board-error { margin: 0; padding: var(--sp-3); border: 1px solid var(--bad); border-radius: var(--radius); color: var(--text-strong); background: color-mix(in srgb, var(--bad) 8%, var(--surface-1)); font-size: var(--type-control); line-height: var(--leading-ui); }

.board-wildcard {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--board-gold) 58%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-1) 92%, #c99b3b), var(--surface-1));
}
.board-wildcard > header { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-3); }
.board-wildcard h3 { margin: 0; color: var(--text-strong); font-size: var(--type-heading); line-height: var(--leading-label); }
.board-wildcard > p { max-width: var(--measure-prose); margin: 0; color: var(--muted); line-height: var(--leading-prose); }
.board-wildcard-error { padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); color: var(--text-strong) !important; }
.board-wildcard form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.board-wildcard fieldset { min-width: 0; margin: 0; padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); }
.board-wildcard legend { padding: 0 var(--sp-1); color: var(--text-strong); font-weight: 750; font-size: var(--type-control); line-height: var(--leading-ui); }
.board-wildcard label { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); color: var(--text); font-size: var(--type-meta); line-height: var(--leading-label); }
.board-wildcard legend label,
.board-wildcard .board-wildcard-check { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-2); margin: 0; cursor: pointer; }
.board-wildcard input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.board-wildcard input:not([type="checkbox"]) { width: 100%; min-width: 0; min-height: var(--touch-min); padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text); font: inherit; }
.board-wildcard small { display: block; margin-top: var(--sp-2); color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-ui); }
.board-wildcard-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.board-wildcard-actions .btn { min-height: var(--touch-min); }
.board-wildcard-actions span { color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-ui); }

.board-local,
.board-community {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--accent-2) 48%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-1) 94%, var(--accent-2)), var(--surface-1));
}
.board-local > header,
.board-community { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.board-local > header { display: grid; gap: var(--sp-3); }
.board-local h3,
.board-community h3 { margin: 0; color: var(--text-strong); font-size: var(--type-heading); line-height: var(--leading-label); }
.board-local > p,
.board-community p { max-width: var(--measure-prose); margin: 0; color: var(--muted); line-height: var(--leading-prose); }
.board-local form { display: grid; gap: var(--sp-3); min-width: 0; }
.board-local-city-grid,
.board-local-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.board-local label { display: grid; gap: var(--sp-1); min-width: 0; color: var(--text); font-size: var(--type-meta); font-weight: 700; line-height: var(--leading-label); }
.board-local :is(input:not([type="checkbox"]):not([type="radio"]),select) {
  width: 100%; min-width: 0; min-height: var(--touch-min); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text); font: inherit;
}
.board-local-check { grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: var(--sp-2) !important; cursor: pointer; }
.board-local :is(input[type="checkbox"],input[type="radio"]) { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.board-local-option { min-width: 0; margin: 0; padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); }
.board-local-option legend { max-width: 100%; padding: 0 var(--sp-1); color: var(--text-strong); }
.board-local-option legend label { grid-template-columns: auto minmax(0, 1fr); align-items: center; cursor: pointer; }
.board-local-option p { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-ui); }
.board-local-actions,
.board-community-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.board-local-actions span { color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-ui); }
.board-local :is(.btn,.link-btn),
.board-community .btn { min-height: var(--touch-min); }
.board-local-revoke { justify-self: start; padding-block: var(--sp-2); color: var(--muted); }
.board-local-error { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); color: var(--text-strong) !important; }
.board-local-unavailable { padding: var(--sp-3); border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text) !important; }
.board-community { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.board-community-actions { justify-content: flex-end; max-width: 360px; }
.board-completion,
.board-follow-up,
.board-receipt {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--board-gold) 48%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-1) 94%, var(--board-gold)), var(--surface-1));
}
.board-completion-head,
.board-follow-up,
.board-receipt { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.board-completion h3,
.board-follow-up h3,
.board-receipt h3 { margin: 0; color: var(--text-strong); font-size: var(--type-heading); line-height: var(--leading-label); }
.board-completion p,
.board-follow-up p,
.board-receipt p { max-width: var(--measure-prose); margin: 0; color: var(--muted); line-height: var(--leading-prose); }
.board-completion-reward { display: flex; align-items: flex-end; gap: var(--sp-1); flex-direction: column; color: var(--text); font-size: var(--type-meta); line-height: var(--leading-ui); }
.board-completion-reward b { color: var(--board-gold); font-family: var(--font-number); font-size: var(--type-control); }
.board-completion form { display: grid; gap: var(--sp-3); grid-column: 1 / -1; }
.board-completion fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.board-completion legend { margin-bottom: var(--sp-2); color: var(--text-strong); font-weight: 800; }
.board-proof-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.board-proof-choice { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; min-height: var(--touch-min); gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.board-proof-choice:has(input:checked) { border-color: var(--board-gold); box-shadow: inset 3px 0 0 var(--board-gold); }
.board-proof-choice.is-unavailable { opacity: .62; cursor: not-allowed; }
.board-proof-choice input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.board-proof-choice span { display: grid; gap: var(--sp-1); min-width: 0; }
.board-proof-choice b { color: var(--text-strong); font-size: var(--type-control); line-height: var(--leading-ui); }
.board-proof-choice small { color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-ui); }
.board-proof-field { display: grid; gap: var(--sp-1); max-width: var(--measure-prose); color: var(--text); font-size: var(--type-meta); font-weight: 750; }
.board-proof-field :is(textarea,input[type="file"]) { width: 100%; min-width: 0; min-height: var(--touch-min); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.board-proof-field textarea { min-height: 108px; resize: vertical; }
.board-proof-private { font-size: var(--type-meta); }
.board-proof-actions,
.board-follow-up-actions,
.board-receipt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.board-proof-actions .btn,
.board-follow-up-actions .btn,
.board-receipt-actions .btn { min-height: var(--touch-min); }
.board-proof-error { grid-column: 1 / -1; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); color: var(--text-strong) !important; }
.board-follow-up { border-color: color-mix(in srgb, var(--accent-2) 48%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-1) 94%, var(--accent-2)), var(--surface-1)); }
.board-follow-up-actions,
.board-receipt-actions { justify-content: flex-end; max-width: 430px; }
.board-receipt { border-color: color-mix(in srgb, var(--ok) 52%, var(--line)); }
.bdetail-alternative { display: inline-flex; align-items: center; min-height: var(--touch-min); margin-top: var(--sp-2); color: var(--accent-2); font-weight: 750; }

.board-active { display: grid; grid-template-columns: minmax(150px, .3fr) minmax(0, 1fr); gap: var(--sp-3); align-items: stretch; }
.board-active-label { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-1); }
.board-active-label h3 { margin: 0; font-size: var(--type-control); line-height: var(--leading-ui); }
.board-active-label span { color: var(--muted); font-family: var(--font-number); font-size: var(--type-meta); }
.board-active-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.board-active-ticket {
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: var(--surface-1);
  color: var(--text);
  font: 700 var(--type-control)/var(--leading-ui) var(--font-ui);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.board-active-ticket span { display: block; margin-bottom: var(--sp-1); color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-label); letter-spacing: var(--tracking-caps); }
.board-active-ticket.is-selected { border-color: var(--board-gold); box-shadow: inset 4px 0 0 var(--board-gold); }

.board-frame {
  position: relative;
  min-width: 0;
  padding: 7px;
  border: 1px solid #241b15;
  border-radius: 4px;
  background: linear-gradient(155deg, #765a40 0 4%, #3a2b20 15% 78%, #241a14 100%);
  box-shadow: 0 14px 30px color-mix(in srgb, #090806 30%, transparent), inset 0 0 0 2px rgba(233,203,145,.13);
}
.board-frame::before,
.board-frame::after { content: ''; position: absolute; z-index: 2; pointer-events: none; inset: 3px; border: 1px solid rgba(238,211,160,.16); clip-path: polygon(0 0, 32% 0, 32% 2px, 68% 2px, 68% 0, 100% 0, 100% 100%, 68% 100%, 68% calc(100% - 2px), 32% calc(100% - 2px), 32% 100%, 0 100%); }
.board-frame::after { inset: 6px; border-color: rgba(8,6,5,.55); }
.board-frame-cap { position: absolute; z-index: 4; top: -6px; left: 50%; display: flex; align-items: center; gap: 4px; translate: -50% 0; }
.board-frame-cap span { width: 34px; height: 3px; background: #312319; }
.board-frame-cap i { width: 14px; height: 14px; rotate: 45deg; border: 2px solid #2b2018; background: #60462f; box-shadow: inset 0 0 0 2px #8a6848; }
.board-scene { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .85fr); gap: 0; min-width: 0; align-items: stretch; }
.board-wall {
  position: relative;
  min-width: 0;
  padding: var(--sp-4);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 2px, rgba(0,0,0,.14) 2px 4px, transparent 4px 74px),
    linear-gradient(150deg, var(--board-wood-hi), var(--board-wood) 52%, var(--board-wood-low));
  box-shadow: inset 0 0 42px rgba(5,4,3,.58);
}
.board-wall-head { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: 0 var(--sp-1) var(--sp-3); border-bottom: 1px solid rgba(244,222,180,.16); color: #f1e6d2; }
.board-wall-head h3 { margin: 0; font-size: var(--type-heading); line-height: var(--leading-label); }
.board-wall-head p { max-width: 38ch; margin: 0; color: #d6c8b2; font-size: var(--type-meta); line-height: var(--leading-ui); text-align: right; }
.board-papers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.board-screen .bsheet {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 146px;
  padding: 27px var(--sp-3) var(--sp-4);
  border: 0;
  border-radius: 1px;
  background: linear-gradient(164deg, #f7ebcf, var(--board-paper) 52%, var(--board-paper-low));
  color: var(--board-ink);
  font-family: var(--font-display);
  font-size: var(--type-body);
  line-height: var(--leading-prose);
  text-align: left;
  overflow-wrap: anywhere;
  clip-path: polygon(1% 2%, 98% 0, 100% 94%, 96% 100%, 3% 98%, 0 8%);
  box-shadow: 0 7px 14px rgba(8,6,4,.42);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
}
.board-screen .bsheet.is-seasonal { grid-column: 1 / -1; min-height: 124px; padding-right: 72px; background: linear-gradient(160deg, #f8e9c8, #ead4a7 66%, #d6b97e); }
.bsheet-pin { position: absolute; top: 7px; left: 50%; width: 9px; height: 9px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #d6bd88 0 18%, #816642 34%, #3f3020 75%); box-shadow: 0 2px 3px rgba(0,0,0,.58); }
.bsheet-kind { display: block; margin-bottom: var(--sp-2); color: #6e5431; font-family: var(--font-ui); font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 800; letter-spacing: var(--tracking-caps); }
.bsheet-text { display: block; font-weight: 650; }
.bsheet-seal { position: absolute; right: 18px; bottom: 17px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 36% 28%, #c8564e 0 14%, #96352f 46%, #65221f 100%); color: rgba(255,235,215,.78); font: 800 12px/1 var(--font-display); box-shadow: 0 3px 5px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,216,184,.17); }
.board-screen .bsheet.is-selected { z-index: 3; outline: 2px solid #f0c767; outline-offset: 3px; box-shadow: 0 10px 20px rgba(7,5,3,.55); transform: rotate(0deg) translateY(-2px); }
/* Свой заказ: тот же лист, но кнопка снята — цвет чуть холоднее бумаги пула, чтобы
   отличать «мной написанное» от «предложенного», не вводя новой формы. */
.board-screen .bsheet.is-custom { background: linear-gradient(160deg, #eef0e4, #dfe2d0 70%, #cdd2bb); }
/* Пустой лист — форма, а не кнопка: писать надо прямо на нём. */
.board-screen .bsheet-blank { display: flex; flex-direction: column; gap: var(--sp-2); cursor: default; background: linear-gradient(160deg, #f2efe4, #e3e0d2); }
.board-screen .bsheet-blank input {
  width: 100%; min-width: 0; min-height: var(--touch-min); padding: var(--sp-2);
  border: 1px dashed #a08a5e; border-radius: 2px; background: rgba(255,255,255,.5);
  color: #2f2517; font-family: var(--font-ui); font-size: var(--type-control);
}
.board-screen .bsheet-blank input::placeholder { color: #7d6a48; }
.board-screen .bsheet-blank input:focus-visible { outline: 2px solid #c9a227; outline-offset: 1px; }
.board-screen .bsheet-blank button { align-self: flex-start; }
/* Небесное событие: единственный лист со сроком, поэтому он темнее остальных —
   ночная бумага среди дневной, а не просто ещё один цвет. */
.board-screen .bsheet.is-sky { background: linear-gradient(160deg, #2b3550, #1e2740 70%, #171e33); color: #e7ecf8; }
.board-screen .bsheet.is-sky .bsheet-kind { color: #a9bde8; }
.board-screen .bsheet-place { display: flex; flex-direction: column; gap: var(--sp-2); cursor: default; background: linear-gradient(160deg, #e9edf6, #d8dfee); }
.board-screen .bsheet-place select { width: 100%; min-width: 0; min-height: var(--touch-min); padding: var(--sp-2); border: 1px solid #8d99b5; border-radius: 2px; background: rgba(255,255,255,.65); color: #23293a; font-family: var(--font-ui); font-size: var(--type-control); }
.board-screen .bsheet-place-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.board-screen .bsheet-place-note { font-size: var(--type-meta); line-height: var(--leading-label); color: #4c5468; }
/* Правка своего заказа — прямо в детали, без ухода на другой экран. */
.bdetail-edit { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.bdetail-edit input { width: 100%; min-width: 0; min-height: var(--touch-min); padding: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font-family: var(--font-ui); font-size: var(--type-control); }
.bdetail-edit-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.board-detail {
  position: relative;
  min-width: 0;
  padding: var(--sp-5);
  border: 0;
  border-left: 6px double #5d4630;
  border-radius: 0;
  background: radial-gradient(circle at 90% 5%, rgba(201,155,59,.08), transparent 34%), linear-gradient(160deg, #1b1815, var(--board-detail-bg));
  color: var(--board-detail-fg);
}
.board-detail::before { content: ''; position: absolute; inset: var(--sp-3); pointer-events: none; border: 1px solid rgba(238,215,171,.1); }
.bdetail-copy { position: relative; z-index: 1; }
.bdetail-meta { margin: 0 0 var(--sp-3); color: #d1ac63; font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.bdetail-title { margin: 0 0 var(--sp-3); color: var(--board-detail-fg); font-size: var(--type-title); line-height: var(--leading-display); overflow-wrap: anywhere; }
.bdetail-state { margin: 0 0 var(--sp-4); color: var(--board-detail-muted); font-size: var(--type-control); line-height: var(--leading-prose); }
.bdetail-instruction { margin: 0 0 var(--sp-4); padding: var(--sp-3) 0; border-block: 1px solid rgba(239,222,190,.13); }
.bdetail-instruction h4 { margin: 0 0 var(--sp-2); color: #d1ac63; font-size: var(--type-meta); line-height: var(--leading-label); letter-spacing: var(--tracking-caps); }
.bdetail-instruction p { margin: 0; color: var(--board-detail-fg); font-size: var(--type-control); line-height: var(--leading-prose); }
.bdetail-privacy { margin: 0 0 var(--sp-4); color: var(--board-detail-muted); font-size: var(--type-meta); line-height: var(--leading-ui); }
.bdetail-reward { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); align-items: baseline; margin-bottom: var(--sp-4); }
.bdetail-reward span { grid-row: 1 / 3; align-self: center; color: var(--board-detail-muted); font-size: var(--type-meta); letter-spacing: var(--tracking-caps); }
.bdetail-reward b { color: #f0cd80; font-family: var(--font-number); font-size: var(--type-control); line-height: var(--leading-ui); text-align: right; }
.bdetail-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.board-screen .bdetail-acts .btn:not(.ghost) { color: var(--on-accent); }
.bdetail-full, .bdetail-empty { margin: 0; color: var(--board-detail-muted); font-size: var(--type-control); line-height: var(--leading-prose); }
.board-ask { position: relative; z-index: 1; margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid rgba(239,222,190,.13); color: var(--board-detail-muted); font-size: var(--type-meta); line-height: var(--leading-ui); }
.board-ask p { margin: 0 0 var(--sp-2); }
.board-ask > div { display: flex; gap: var(--sp-2); }

.board-journal-recovery { padding: var(--sp-4); border: 1px solid var(--bad); border-radius: var(--radius); background: var(--surface-1); }
.board-journal-recovery h3 { margin: 0 0 var(--sp-2); font-size: var(--type-heading); }
.board-journal-recovery > p:not(.board-kicker) { max-width: var(--measure-compact); margin: 0 0 var(--sp-3); color: var(--muted); line-height: var(--leading-prose); }
.board-done { margin-top: var(--sp-5); padding: var(--sp-5) 0 0; border-top: 1px solid var(--line-soft); }
.board-journal-head { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.board-journal-head h3 { margin: 0; color: var(--text-strong); font-size: var(--type-heading); line-height: var(--leading-label); }
.board-journal-head > div > p:last-child { max-width: var(--measure-compact); margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--type-control); line-height: var(--leading-prose); }
.board-private-mark { flex: 0 0 auto; color: var(--muted); font-size: var(--type-meta); }
.bdone-badges { margin: 0 0 var(--sp-4); }
.bdone-badge { border-radius: 2px; padding: var(--sp-1) var(--sp-3); }
.bdone-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.bdone { min-width: 0; padding: 0; border: 1px solid var(--line-soft); border-radius: 2px; background: var(--surface-1); overflow: clip; }
.bdone article { display: grid; gap: var(--sp-2); height: 100%; padding: var(--sp-3); }
.bdone-top { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-label); }
.bdone-top p { margin: 0; font-weight: 800; letter-spacing: var(--tracking-caps); }
.bdone-top time { font-family: var(--font-number); }
.bdone-title { margin: 0; color: var(--text-strong); font-size: var(--type-control); line-height: var(--leading-ui); overflow-wrap: anywhere; }
.bdone-figure { order: -1; margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-1); aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.bdone-img { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
.bdone-cap { margin: 0; color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-ui); }
.bdone .btn { justify-self: start; align-self: end; }
.bdone-edit { display: grid; gap: var(--sp-2); }
.bdone-label { margin: 0; }
.bdone-input, .bdone-file { margin: 0; }

.board-calib { max-width: none; padding: 0; border: 0; background: transparent; }
.board-calib-head { margin-bottom: var(--sp-4); }
.board-calib-head h2 { margin: 0; color: var(--text-strong); font-size: var(--type-title); line-height: var(--leading-display); }
.board-calib-head .calib-lead { max-width: var(--measure-prose); margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--type-body); line-height: var(--leading-prose); }
.board-calib-frame { max-width: 760px; padding: var(--sp-5); border: 7px solid #493526; border-radius: 3px; background: linear-gradient(155deg, var(--board-wood-hi), var(--board-wood-low)); box-shadow: inset 0 0 38px rgba(0,0,0,.48); }
.calib-paper { position: relative; padding: var(--sp-5); background: linear-gradient(155deg, #f6e8c9, #e2cc9e); color: var(--board-ink); clip-path: polygon(1% 1%, 99% 0, 100% 96%, 97% 100%, 2% 98%, 0 5%); }
.calib-paper::before { content: ''; position: absolute; top: 9px; left: 50%; width: 10px; height: 10px; translate: -50% 0; border-radius: 50%; background: radial-gradient(#cfb578, #544129); }
.calib-count { color: #6e5431; }
.calib-order { max-width: none; color: var(--board-ink); border-left-color: #966e2c; }
.calib-label { color: #6e5431; }
.calib-note { background: rgba(255,255,255,.34); border-color: #aa9064; color: var(--board-ink); }
.calib-paper .btn:not(.ghost) { color: var(--on-accent); }

.board-screen :is(.bsheet,.board-active-ticket,.btn,.link-btn,input,select,textarea):focus-visible,
.board-calib :is(.btn,input):focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (hover: hover) and (pointer: fine) {
  .board-screen .bsheet:hover { transform: rotate(var(--tilt, 0deg)) translateY(-2px); box-shadow: 0 11px 20px rgba(7,5,3,.54); }
  .board-active-ticket:hover { border-color: var(--board-gold); }
}
@media (max-width: 900px) {
  .board-active { grid-template-columns: 1fr; }
  .board-scene { grid-template-columns: 1fr; }
  .board-detail { border-left: 0; border-top: 6px double #5d4630; }
  .board-wildcard form { grid-template-columns: 1fr; }
  .board-wildcard-actions { grid-column: auto; }
  .board-local-options { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .board-head { align-items: start; }
  .board-head-actions { flex-direction: column-reverse; align-items: end; }
  .board-head > div > p:last-child { font-size: var(--type-control); }
  .board-count { align-items: start; }
  .board-count span { display: none; }
  .board-active-list { grid-template-columns: 1fr; }
  .board-frame { padding: 5px; }
  .board-scene { display: flex; flex-direction: column; }
  .board-detail { order: -1; padding: var(--sp-4); }
  .board-wall { padding: var(--sp-3); }
  .board-wall-head { display: block; }
  .board-wall-head p { margin-top: var(--sp-1); text-align: left; }
  .board-papers { gap: var(--sp-3); }
  .board-screen .bsheet { min-height: 154px; padding-inline: var(--sp-2); font-size: var(--type-control); line-height: var(--leading-ui); }
  .board-screen .bsheet.is-seasonal { min-height: 128px; padding-right: 58px; }
  .bsheet-kind { font-size: var(--type-meta); }
  .board-journal-head { display: block; }
  .board-private-mark { display: inline-block; margin-top: var(--sp-2); }
  .bdone-list { grid-template-columns: 1fr; }
  .board-calib-frame { padding: var(--sp-3); border-width: 5px; }
  .calib-paper { padding: var(--sp-4) var(--sp-3); }
  .board-local,
  .board-community,
  .board-completion,
  .board-follow-up,
  .board-receipt { grid-template-columns: 1fr; padding: var(--sp-3); }
  .board-local-city-grid { grid-template-columns: 1fr; }
  .board-proof-choices { grid-template-columns: 1fr; }
  .board-completion-head { grid-template-columns: 1fr; gap: var(--sp-2); }
  .board-completion-reward { align-items: flex-start; }
  .board-community-actions,
  .board-follow-up-actions,
  .board-receipt-actions { justify-content: flex-start; max-width: none; }
}
@media (max-width: 370px) {
  .board-papers { grid-template-columns: 1fr; }
  .board-screen .bsheet.is-seasonal { grid-column: auto; }
}
@media (max-width: 600px), (pointer: coarse) {
  .board-screen :is(.bsheet,.board-active-ticket,.bdetail-acts .btn,.board-ask .btn,.bdone .btn,.bdone-input,.bdone-file,.board-journal-recovery .btn,.board-head-actions .btn,.board-wildcard .btn,.board-wildcard input,.board-local .btn,.board-local .link-btn,.board-local input,.board-local select,.board-community .btn,.board-completion .btn,.board-completion input,.board-completion textarea,.board-follow-up .btn,.board-receipt .btn),
  .board-calib :is(.btn,.calib-note) { min-height: var(--touch-min); }
}
@media (prefers-reduced-motion: reduce) {
  .board-screen .bsheet,
  .board-screen .bsheet:hover,
  .board-screen .bsheet.is-selected { transform: none; transition: none; }
}

/* ============================================================
   Guide v3 — non-modal Shadow transcript + chapter library
   ============================================================ */
.guide-surface-v1 {
  --guide-bubble-bottom: 24px;
  color: var(--text);
  font-family: var(--font-ui);
}

.guide-surface-v1__spotlight {
  z-index: 1;
  border: 2px solid var(--today-kicker-fg, var(--accent-2));
  border-radius: var(--radius-md);
  box-shadow:
    0 0 0 var(--sp-1) color-mix(in srgb, var(--today-kicker-fg, var(--accent-2)) 22%, transparent),
    var(--glow-active);
  animation: guide-v3-reveal var(--dur-normal) var(--ease-out) both;
}

.guide-safe-bubble .guide-surface-v1__spotlight { display: none; }

/* A real application dialog owns focus and pointer input. The Guide instruction has
   already been spoken before that dialog opens, so keep only its target ring visible
   instead of covering the form controls that produce the durable receipt. */
.guide-target-in-modal .guide-surface-v1__bubble {
  visibility: hidden;
  pointer-events: none;
}

.guide-surface-v1__bubble {
  z-index: 2;
  display: grid;
  inline-size: min(calc(100vw - (var(--sp-5) * 2)), var(--measure-prose));
  max-block-size: 70dvh;
  gap: var(--sp-3);
  padding: var(--sp-4);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-1) 94%, var(--accent) 6%);
  color: var(--text);
  box-shadow: var(--shadow-raised);
  scrollbar-gutter: stable;
  animation: guide-v3-reveal var(--dur-normal) var(--ease-out) both;
}

.guide-surface-v1__header {
  display: flex;
  min-inline-size: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block-end: var(--sp-2);
  border-block-end: 1px solid var(--line-soft);
}

.guide-surface-v1__chapter {
  min-inline-size: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  font-weight: 750;
  line-height: var(--leading-ui);
  overflow-wrap: anywhere;
}

.guide-surface-v1__progress {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-family: var(--font-number);
  font-size: var(--type-meta);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: var(--leading-label);
}

.guide-surface-v1__title {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 750;
  line-height: var(--leading-display);
  overflow-wrap: anywhere;
}

.guide-surface-v1__visual-fallback {
  min-inline-size: 0;
  padding-inline-start: var(--sp-2);
  border-inline-start: 3px solid var(--today-kicker-fg, var(--accent-2));
  color: var(--today-kicker-fg, var(--accent-2));
  font-size: var(--type-meta);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-label);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.guide-surface-v1__visual-fallback:empty { display: none; }

.guide-surface-v1__transcript {
  max-inline-size: var(--measure-dialog);
  margin: 0;
  color: var(--text-strong);
  font-size: var(--type-body);
  line-height: var(--leading-prose);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.guide-surface-v1__choices,
.guide-surface-v1__choice {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-surface-v1__choices {
  display: grid;
  gap: var(--sp-2);
}

.guide-surface-v1__choice { display: grid; }

.guide-surface-v1__actions {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.guide-surface-v1__action {
  display: inline-flex;
  min-inline-size: var(--touch-min);
  max-inline-size: 100%;
  min-block-size: var(--touch-min);
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-strong);
  font: 750 var(--type-control)/var(--leading-ui) var(--font-ui);
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.guide-surface-v1__actions > .guide-surface-v1__action:first-child:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.guide-surface-v1__action.is-choice {
  inline-size: 100%;
  justify-content: start;
  background: var(--surface-2);
}

.guide-surface-v1__action[aria-pressed="true"] {
  border-color: var(--today-kicker-fg, var(--accent-2));
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-3));
  color: var(--text-strong);
}

.guide-surface-v1__action:disabled {
  border-color: var(--line-soft);
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

.guide-surface-v1__choice-label,
.guide-surface-v1__choice-description {
  display: block;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.guide-surface-v1__choice-label {
  color: inherit;
  font-size: var(--type-control);
  font-weight: 800;
  line-height: var(--leading-ui);
}

.guide-surface-v1__choice-description {
  margin-block-start: var(--sp-1);
  color: var(--text-soft);
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: var(--leading-prose);
}

.guide-surface-v1__action:focus-visible,
.guide-v3-library :is(button, a, input, select, textarea, summary, [role="button"]):focus-visible,
.guide-v3-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Guide Library is a calm chapter index. Status is always present as copy;
   line style and weight reinforce it without making colour the only channel. */
.guide-v3-library {
  display: grid;
  min-inline-size: 0;
  gap: var(--sp-4);
  color: var(--text);
  font-family: var(--font-ui);
}

.guide-box.guide-v3-library,
.guide-box:has(.guide-v3-library) {
  inline-size: min(calc(100vw - (var(--sp-5) * 2)), var(--work-max));
  max-block-size: calc(100dvh - (var(--sp-5) * 2));
  padding: var(--sp-4);
  border-color: var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-raised);
}

.guide-v3-library-head,
.guide-v3-library-header {
  display: grid;
  min-inline-size: 0;
  gap: var(--sp-2);
  padding-inline-end: calc(var(--touch-min) + var(--sp-2));
}

.guide-v3-library-eyebrow,
.guide-v3-kicker {
  margin: 0;
  color: var(--today-kicker-fg, var(--accent-2));
  font-size: var(--type-meta);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.guide-v3-library :is(h2, .guide-v3-library-title) {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 750;
  line-height: var(--leading-display);
  overflow-wrap: anywhere;
}

.guide-v3-library-copy,
.guide-v3-library-intro {
  max-inline-size: var(--measure-prose);
  margin: 0;
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: var(--leading-prose);
  overflow-wrap: anywhere;
}

.guide-v3-library-actions,
.guide-v3-card-actions {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.guide-v3-grid,
.guide-v3-library-grid,
.guide-v3-card-list {
  display: grid;
  min-inline-size: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-v3-card {
  display: grid;
  min-inline-size: 0;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

.guide-v3-card:is(.is-current, .guide-v3-card--current),
.guide-v3-card[data-guide-status="current"] {
  border-inline-start: 3px solid var(--today-kicker-fg, var(--accent-2));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}

.guide-v3-card:is(.is-completed, .guide-v3-card--completed),
.guide-v3-card[data-guide-status="completed"] {
  border-inline-start: 3px solid var(--good);
}

.guide-v3-card:is(.is-locked, .is-deferred, .guide-v3-card--locked, .guide-v3-card--deferred),
.guide-v3-card:is([data-guide-status="locked"], [data-guide-status="deferred"]) {
  border-style: dashed;
  background: var(--surface-1);
}

.guide-v3-card-head,
.guide-v3-card-header {
  display: flex;
  min-inline-size: 0;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.guide-v3-card-title,
.guide-v3-card h3 {
  min-inline-size: 0;
  margin: 0;
  color: var(--text-strong);
  font-size: var(--type-heading);
  line-height: var(--leading-ui);
  overflow-wrap: anywhere;
}

.guide-v3-card-status {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: var(--type-meta);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.guide-v3-card:is(.is-current, .guide-v3-card--current) .guide-v3-card-status,
.guide-v3-card[data-guide-status="current"] .guide-v3-card-status {
  color: var(--today-kicker-fg, var(--accent-2));
}

.guide-v3-card:is(.is-completed, .guide-v3-card--completed) .guide-v3-card-status,
.guide-v3-card[data-guide-status="completed"] .guide-v3-card-status { color: var(--good); }

.guide-v3-card-description {
  max-inline-size: var(--measure-compact);
  margin: 0;
  color: var(--text-soft);
  font-size: var(--type-control);
  line-height: var(--leading-prose);
  overflow-wrap: anywhere;
}

.guide-v3-card-actions { align-self: end; }

.guide-v3-card-action,
.guide-v3-library-action,
.guide-v3-library :is(button, a, input, select, textarea, summary, [role="button"]) {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
}

.guide-v3-library a { display: inline-flex; align-items: center; }

.comp-card .comp-art.guide-shadow-contact {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 128px minmax(var(--touch-min), auto);
  flex: 0 0 calc(128px + var(--sp-4));
  inline-size: calc(128px + var(--sp-4));
  block-size: auto;
  min-inline-size: 128px;
  min-block-size: 128px;
  scroll-margin-block-end: calc(var(--touch-min) + var(--sp-5) + var(--sp-3) + env(safe-area-inset-bottom));
  gap: var(--sp-1);
  padding: var(--sp-2);
  overflow: hidden;
  border: 2px solid var(--today-kicker-fg, var(--accent-2));
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  color: var(--text-strong);
  box-shadow: none;
  font-family: var(--font-ui);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.guide-shadow-contact > :is(.shadow-rig, .comp-video) {
  grid-row: 1;
  inline-size: 100%;
  block-size: 128px;
  min-block-size: 128px;
}

.guide-shadow-contact::after {
  content: attr(aria-label);
  display: flex;
  min-inline-size: 0;
  min-block-size: var(--touch-min);
  align-items: center;
  justify-content: center;
  padding-block-start: var(--sp-1);
  border-block-start: 1px solid var(--line-soft);
  color: var(--text-strong);
  font-size: var(--type-control);
  font-weight: 800;
  line-height: var(--leading-ui);
  text-align: center;
  overflow-wrap: anywhere;
}

.comp-card .comp-art.guide-shadow-contact:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.guide-box:has(.guide-v3-library) .modal-x,
.guide-box.guide-v3-library .modal-x {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
}

@keyframes guide-v3-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
  .comp-card .comp-art.guide-shadow-contact:hover {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  }

  .guide-surface-v1__action:not(:disabled):hover {
    border-color: var(--today-kicker-fg, var(--accent-2));
    background-color: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  }

  .guide-surface-v1__actions > .guide-surface-v1__action:first-child:not(:disabled):hover {
    border-color: var(--accent-2);
    background-color: color-mix(in srgb, var(--accent) 84%, var(--accent-2));
  }
}

@media (max-width: 600px) {
  .guide-surface-v1 {
    --guide-bubble-bottom: calc(var(--touch-min) + var(--sp-5) + var(--sp-3) + env(safe-area-inset-bottom));
  }

  .guide-surface-v1__bubble {
    inline-size: calc(100vw - (var(--sp-3) * 2));
    max-block-size: 58dvh;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  .guide-surface-v1__header { align-items: start; }
  .guide-surface-v1__transcript { max-inline-size: 100%; }
  .guide-surface-v1__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-surface-v1__action { inline-size: 100%; }
  .guide-surface-v1__actions > .guide-surface-v1__action:first-child { grid-column: 1 / -1; }

  .guide-box.guide-v3-library,
  .guide-box:has(.guide-v3-library) {
    inline-size: calc(100vw - (var(--sp-3) * 2));
    max-block-size: calc(100dvh - (var(--sp-3) * 2));
    padding: var(--sp-3);
  }

  .guide-v3-library { gap: var(--sp-3); }
  .guide-v3-grid,
  .guide-v3-library-grid,
  .guide-v3-card-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .guide-v3-library-actions,
  .guide-v3-card-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .guide-v3-library :is(button, a, input, select, textarea, summary, [role="button"]):not(.modal-x) { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-surface-v1,
  .guide-surface-v1 *,
  .guide-surface-v1 *::before,
  .guide-surface-v1 *::after,
  .guide-v3-library,
  .guide-v3-library *,
  .guide-v3-library *::before,
  .guide-v3-library *::after,
  .guide-shadow-contact,
  .guide-shadow-contact *,
  .guide-shadow-contact::before,
  .guide-shadow-contact::after {
    animation: none !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Режим съёмки виджета (?widget=) ─────────────────────────────────────────
   Одна карточка на чистом фоне, без шапки, навигации и всплывашек. Размер под
   вертикальный кадр: карточка по центру, вокруг воздух — при обрезке в 9:16
   ничего важного не срежется. */
html.is-capture, html.is-capture body { background: var(--bg); }
html.is-capture #topbar, html.is-capture #nav, html.is-capture #ai-fab,
html.is-capture #toasts, html.is-capture .satoru-boot { display: none !important; }
html.is-capture .capture-stage {
  min-height: 100vh; display: grid; place-items: center;
  padding: clamp(24px, 6vw, 72px);
}
html.is-capture .capture-stage > * { width: min(680px, 100%); margin: 0; }
/* Анимации в кадре не нужны: съёмка должна быть повторяемой, а не «как повезёт». */
html.is-capture *, html.is-capture *::before, html.is-capture *::after {
  animation-duration: 0s !important; animation-delay: 0s !important;
  transition-duration: 0s !important; transition-delay: 0s !important;
}

/* ============================================================
   Goals information architecture v168 — focus, horizons, map
   ============================================================ */
.goals-shell { gap: var(--sp-3); min-width: 0; }
.goals-route-head { align-items: center; }
.goals-head-side { display: grid; justify-items: end; gap: var(--sp-2); min-width: min(100%, 390px); }
.goals-head-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--sp-2); }
.goals-view-tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1);
  padding: var(--sp-1); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
.goals-view-tab {
  min-width: 0; min-height: 42px; border: 0; border-radius: var(--radius-md); padding: var(--sp-2);
  color: var(--text-soft); background: transparent; font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
}
.goals-view-tab > span { margin-inline-start: var(--sp-1); color: var(--muted); font-size: var(--type-meta); }
.goals-view-tab.active { color: var(--text-strong); background: color-mix(in srgb, var(--accent) 14%, var(--surface-3)); box-shadow: inset 0 -2px var(--accent); }
.goals-composer { padding: var(--sp-3); }
.goals-composer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-block-end: var(--sp-3); }
.goals-composer-head h3 { margin: 0; font-size: var(--type-heading); line-height: var(--leading-ui); }
.goals-composer .goal-form { margin: 0; grid-template-columns: minmax(0, 1fr); }
.goals-composer .goal-form-main { grid-column: 1; }
.goals-composer .goal-form-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr) minmax(170px, 1fr); gap: var(--sp-2); }
.goals-composer .goal-field-wide { grid-column: auto; }
.goals-composer .goal-extra { grid-column: 1 / -1; }
.goals-composer .goal-extra > summary { min-height: 42px; display: flex; align-items: center; font-weight: 800; }
.goals-composer .gx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.goals-section-head { padding: var(--sp-3); border-bottom: 1px solid var(--line-soft); }
.goals-section-head h3 { margin: 0; font-size: var(--type-heading); line-height: var(--leading-ui); }
.goals-section-head p { margin: var(--sp-1) 0 0; color: var(--text-soft); font-size: var(--type-body); line-height: var(--leading-prose); }
.goals-empty-copy { margin: 0; padding: var(--sp-4); color: var(--text-soft); }
.goals-archive { display: grid; gap: var(--sp-3); }

.goals-shell .goal-item { margin-inline-start: min(calc(var(--goal-depth) * 22px), 66px); }
.goals-shell .goal-summary {
  width: 100%; min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, 104px);
  gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: 0;
  color: var(--text-strong); background: transparent; text-align: start; font-family: var(--font-ui);
}
.goals-shell .goal-summary-main { min-width: 0; display: grid; gap: var(--sp-1); }
.goals-shell .goal-title { font-size: var(--type-heading); line-height: var(--leading-ui); overflow-wrap: anywhere; }
.goals-shell .goal-summary-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); }
.goals-shell .goal-next { min-width: 0; color: var(--text-soft); font-size: var(--type-control); line-height: var(--leading-ui); overflow-wrap: anywhere; }
.goals-shell .goal-next b { color: var(--text-strong); }
.goals-shell .goal-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1); color: var(--text-soft); font-size: var(--type-meta); }
.goals-shell .goal-progress progress { width: 100%; min-width: 0; }
.goals-shell .goal-item.is-done { opacity: 1; }
.goals-shell .goal-item.is-done .goal-title { color: var(--text-soft); }

.goal-detail-overlay { z-index: 10020; padding: var(--sp-3); overflow-y: auto; overscroll-behavior: contain; }
.goal-detail-box {
  position: relative; width: min(720px, 100%); max-height: calc(100dvh - (var(--sp-3) * 2)); overflow: auto;
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-xl);
  color: var(--text); background: var(--surface-1); box-shadow: var(--shadow-raise);
}
.goal-detail-box > .modal-x { min-width: 42px; min-height: 42px; }
.goal-detail-head { padding-inline-end: 46px; }
.goal-detail-head h2 { margin: var(--sp-1) 0; font-size: var(--type-title); line-height: var(--leading-display); overflow-wrap: anywhere; }
.goal-detail-head h2:focus { outline: none; }
.goal-detail-head > p { margin: 0; color: var(--text-soft); line-height: var(--leading-prose); }
.goal-detail-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.goal-detail-progress progress { width: 100%; }
.goal-next-card { margin-block: var(--sp-3); padding: var(--sp-3); border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line-soft)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.goal-next-card h3 { margin: 0 0 var(--sp-1); font-size: var(--type-meta); line-height: var(--leading-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.goal-next-card :is(a, span) { color: var(--text-strong); font-size: var(--type-body); line-height: var(--leading-prose); overflow-wrap: anywhere; }
.goal-next-card a { display: inline-flex; align-items: center; }
.goal-next-card > p { margin: 0; color: var(--muted); }
.goal-next-inline { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; margin-top: 8px; }
.goal-next-inline label { display: grid; gap: 5px; min-width: 0; }
.goal-next-inline label > span { font-size: .76rem; color: var(--muted); }
.goal-next-inline input { width: 100%; min-height: 42px; }
.goal-next-inline .btn { min-height: 42px; white-space: nowrap; }
@media (max-width: 600px) {
  .goal-next-inline { grid-template-columns: 1fr; }
  .goal-next-inline .btn { width: 100%; }
}
.goal-detail-section { border-top: 1px solid var(--line-soft); }
.goal-detail-section > summary { min-height: 48px; display: flex; align-items: center; color: var(--text-strong); font-size: var(--type-control); line-height: var(--leading-ui); font-weight: 900; }
.goal-detail-section-body { display: grid; gap: var(--sp-3); padding: 0 0 var(--sp-3); }
.goal-detail-box .goal-source-note { font-size: var(--type-meta); line-height: var(--leading-prose); }
.goal-detail-box .goal-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.goal-detail-box .goal-edit-form > :is(label:first-child, label:nth-child(2), button) { grid-column: 1 / -1; }
.goal-detail-box .goal-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.goal-detail-box .gstep { min-height: 42px; }
.goal-detail-box :is(.add-step-form, .metric-form, .goal-task-form) { align-items: end; }
html.goal-detail-open { overflow: hidden; }

.goals-shell :is(button, input, select, textarea, summary, a):focus-visible,
.goal-detail-box :is(button, input, select, textarea, summary, a):focus-visible {
  outline: var(--focus-ring); outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .goals-shell .goal-summary:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
  .goals-view-tab:hover { color: var(--text-strong); background: color-mix(in srgb, var(--accent) 7%, transparent); }
}
@media (max-width: 700px) {
  .goals-route-head { display: grid; align-items: start; padding: var(--sp-3); }
  .goals-head-side { width: 100%; min-width: 0; justify-items: stretch; }
  .goals-counts, .goals-head-actions { justify-content: start; }
  .goals-head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goals-view-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
  .goals-view-tab { padding-inline: var(--sp-1); font-size: var(--type-meta); overflow-wrap: anywhere; }
  .goals-composer .goal-form-main, .goals-composer .gx-grid { grid-template-columns: minmax(0, 1fr); }
  .goals-shell .goal-item { margin-inline-start: min(calc(var(--goal-depth) * 12px), 36px); }
  .goals-shell .goal-summary { min-height: 88px; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .goals-shell .goal-progress { grid-template-columns: minmax(0, 1fr) auto; }
  .goal-detail-overlay { align-items: end; padding: var(--sp-2); }
  .goal-detail-box { width: 100%; max-height: calc(100dvh - var(--sp-2)); padding: var(--sp-3); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md); }
  .goal-detail-box .goal-edit-form { grid-template-columns: minmax(0, 1fr); }
  .goal-detail-box .goal-edit-form > * { grid-column: 1 !important; }
}
@media (max-width: 390px) {
  .goals-view-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .goals-head-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goals-view-tab { font-size: var(--type-floor); }
}
@media (pointer: coarse), (max-width: 600px) {
  .goals-shell :is(button, input, select, textarea, summary, a),
  .goal-detail-box :is(button, input, select, textarea, summary, a) { min-height: var(--touch-min); }
  .goal-detail-box .gstep :is(.check, .del) { min-width: var(--touch-min); min-height: var(--touch-min); }
}
@media (prefers-reduced-motion: reduce) {
  .goals-shell *, .goals-shell *::before, .goals-shell *::after,
  .goal-detail-overlay *, .goal-detail-overlay *::before, .goal-detail-overlay *::after {
    animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================
   Goals v169 — calm initiative-first hierarchy
   Design contract: one primary action, two primary modes, no
   mission/vision noise in the immediate-action contour.
   ============================================================ */
.goals-shell {
  width: min(100%, 900px);
  margin-inline: auto;
  gap: var(--sp-2);
}
.goals-shell .goals-route-head {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.goals-route-head .goals-kicker { margin: 0; }
.goals-route-head h2 { margin-block-start: 2px; font-size: var(--type-title); }
.goals-route-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.goals-shell .goals-view-tabs {
  width: min(100%, 290px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border-radius: var(--radius-md);
}
.goals-shell .goals-view-tab { min-height: 42px; padding: var(--sp-1) var(--sp-2); font-size: var(--type-control); }
.goals-more-nav { position: relative; flex: 0 0 auto; }
.goals-more-nav > summary {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  background: var(--surface-2);
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
  list-style: none;
  cursor: pointer;
}
.goals-more-nav > summary::-webkit-details-marker { display: none; }
.goals-more-nav > summary::after { content: "⌄"; margin-inline-start: var(--sp-1); color: var(--muted); }
.goals-more-nav[open] > summary::after { content: "⌃"; }
.goals-more-nav.is-current > summary { color: var(--text-strong); box-shadow: inset 0 -2px var(--accent); }
.goals-more-menu {
  position: absolute;
  z-index: 40;
  inset-block-start: calc(100% + var(--sp-1));
  inset-inline-end: 0;
  width: min(270px, calc(100vw - 24px));
  display: grid;
  padding: var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-raise);
}
.goals-more-menu button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  text-align: start;
  font: 700 var(--type-control)/var(--leading-ui) var(--font-ui);
}
.goals-focus-board, .goals-all { display: grid; gap: var(--sp-2); min-width: 0; }
.goals-focus-head, .goals-all-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2);
}
.goals-focus-head h3, .goals-all-head h3 { margin: 0; font-size: var(--type-heading); line-height: var(--leading-ui); }
.goals-focus-head p, .goals-all-head p { margin: var(--sp-1) 0 0; max-width: var(--measure-compact); color: var(--text-soft); font-size: var(--type-body); line-height: var(--leading-prose); }
.goals-focus-list { display: grid; gap: var(--sp-2); }
.goals-initiative, .goals-group-section {
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 95%, transparent);
  box-shadow: none;
}
.goals-initiative-head { border-bottom: 1px solid var(--line-soft); }
.goals-initiative-head > button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  color: var(--text-strong);
  background: transparent;
  text-align: start;
  font: 850 var(--type-control)/var(--leading-ui) var(--font-ui);
}
.goals-initiative-head small { color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); font-weight: 700; }
.goals-shell .goal-item { margin-inline-start: 0; }
.goals-shell .goal-item::before { display: none; }
.goals-shell .goal-item:not(.is-selectable) { display: grid; grid-template-columns: minmax(0, 1fr) var(--touch-min); align-items: stretch; }
.goals-shell .goal-summary {
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
}
.goals-shell .goal-summary-main { gap: 3px; }
.goals-shell .goal-title { font-size: var(--type-body); line-height: var(--leading-ui); font-weight: 850; }
.goals-shell .goal-row-description { max-width: var(--measure-compact); color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.goals-shell .goal-row-spheres, .goal-detail-spheres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.goal-sphere-chip, .goal-sphere-more, .goal-sphere-background { min-height: 22px; display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); }
.goal-sphere-more, .goal-sphere-background { padding-inline-start: var(--sp-1); }
.goals-shell .goal-summary-meta { gap: 3px var(--sp-2); }
.goals-shell .goal-summary-meta > span:not(:last-child)::after { content: "·"; margin-inline-start: var(--sp-2); color: var(--muted); }
.goals-shell .goal-summary-meta .goal-status::after,
.goals-shell .goal-summary-meta .goal-deadline::after { content: none; }
.goals-shell .goal-group-chip { color: var(--text-soft); }
.goals-shell .goal-next { display: flex; align-items: baseline; gap: var(--sp-1); font-size: var(--type-meta); line-height: var(--leading-ui); }
.goals-shell .goal-next-mark { color: var(--goals-active-fg); font-weight: 900; }
.goals-shell .goal-open-mark { color: var(--muted); font-size: 24px; line-height: 1; }
.goals-shell .goal-quick-complete {
  min-width: var(--touch-min); min-height: var(--touch-min); align-self: stretch; display: grid; place-items: center;
  border: 0; border-inline-start: 1px solid var(--line-soft); color: var(--text-soft); background: transparent;
}
.goals-shell .goal-quick-complete > span { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; color: var(--on-accent); font: 900 var(--type-control)/1 var(--font-ui); }
.goals-shell .goal-quick-complete[aria-pressed="true"] > span { border-color: var(--good); background: var(--good); }
.goals-shell .goal-quick-complete:hover, .goals-shell .goal-quick-complete:focus-visible { background: color-mix(in srgb, var(--good) 8%, transparent); }
.goals-shell .goal-item-focus .goal-group-chip { display: none; }
.goals-shell .goal-item + .goal-item { border-top: 1px solid var(--line-soft); }
.goals-shell .goal-item { border-bottom: 0; }
.goals-show-all, .goals-clear-group {
  min-height: 42px;
  justify-self: start;
  padding: var(--sp-1) var(--sp-2);
  border: 0;
  color: var(--goals-active-fg);
  background: transparent;
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
}
.goals-focus-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.goals-focus-empty p { margin: 0; color: var(--text-soft); line-height: var(--leading-prose); }
.goals-exact-filter { min-width: min(100%, 230px); display: grid; gap: var(--sp-1); color: var(--text-soft); font-size: var(--type-meta); font-weight: 800; }
.goals-exact-filter select { width: 100%; min-height: 42px; }
.goals-group-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.goals-group-section > summary { list-style: none; cursor: pointer; }
.goals-group-section > summary::-webkit-details-marker { display: none; }
.goals-group-disclosure::before { content: "⌄"; color: var(--muted); }
.goals-group-section[open] .goals-group-disclosure::before { content: "⌃"; }
.goals-group-tools { display: flex; justify-content: flex-end; padding: var(--sp-1) var(--sp-2) 0; }
.goals-group-section-plain .goals-group-head { cursor: default; }
.goals-group-head h3 { margin: 0; font-size: var(--type-heading); line-height: var(--leading-ui); overflow-wrap: anywhere; }
.goals-group-head p { margin: 2px 0 0; color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-label); }
.goals-group-section.is-paused { border-style: dashed; }
.goals-group-list { min-width: 0; }
.goals-all > .goals-empty-copy { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
.goals-shell .goals-composer { padding: var(--sp-3); box-shadow: none; }
.goals-composer .goal-form-main { grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); }
.goals-composer .goal-extra small { color: var(--text-soft); font-size: var(--type-meta); line-height: var(--leading-prose); font-weight: 500; }
.goals-empty { box-shadow: none; }
.goals-empty > div { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.goals-shell .goals-map .goal-item { margin-inline-start: min(calc(var(--goal-depth) * 22px), 66px); }
.goals-shell .goals-map .goal-item::before { display: block; }
.goals-shell .goals-map .goal-item[style*="--goal-depth:0"]::before { display: none; }
.goals-all-tools { min-width: min(100%, 230px); display: grid; gap: var(--sp-2); }
.goals-bulk-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line-soft));
  border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.goals-bulk-toolbar > strong { color: var(--text-strong); font-size: var(--type-control); line-height: var(--leading-ui); }
.goals-bulk-toolbar > strong:focus { outline: none; }
.goals-bulk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-1); }
.goals-shell .goal-item.is-selectable { display: grid; grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min); align-items: stretch; }
.goals-shell .goal-item.is-selectable.is-selected { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.goals-shell .goal-bulk-pick {
  min-width: var(--touch-min); min-height: var(--touch-min); border: 0; border-inline-end: 1px solid var(--line-soft);
  color: var(--text-strong); background: transparent; font: 900 var(--type-control)/1 var(--font-ui);
}
.goals-shell .goal-bulk-pick::before { content: ""; display: inline-grid; width: 20px; height: 20px; place-items: center; border: 2px solid var(--line); border-radius: 6px; }
.goals-shell .goal-bulk-pick[aria-pressed="true"]::before { content: "✓"; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.goals-shell .goal-bulk-pick[aria-pressed="true"] > span { display: none; }
.goal-detail-head .goals-kicker span { letter-spacing: var(--tracking-natural); text-transform: none; }
.goal-detail-head { display: grid; gap: var(--sp-2); }
.goal-detail-head h2, .goal-detail-description, .goal-detail-summary { margin: 0; }
.goal-detail-description { max-width: var(--measure-prose); color: var(--text); font-size: var(--type-body); line-height: var(--leading-prose); white-space: pre-wrap; }
.goal-detail-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); color: var(--text-soft); font-size: var(--type-meta); }
.goal-detail-complete { justify-self: start; }
.goal-sphere-field { grid-column: 1 / -1; min-width: 0; }
.goal-sphere-field .sphere-panel { inset-inline-start: 0; inset-inline-end: auto; }
.goal-map-sections { display: grid; gap: var(--sp-2); }
.goal-map-section { border-top: 1px solid var(--line-soft); }
.goal-map-section > summary { min-height: var(--touch-min); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2); color: var(--text-strong); font: 850 var(--type-control)/var(--leading-ui) var(--font-ui); cursor: pointer; }
.goal-map-section > summary small { min-width: 28px; text-align: center; color: var(--text-soft); }
.goal-map-section-body { padding-block-end: var(--sp-2); }
.goal-detail-box .goal-edit-form > :is(label:first-child, label:nth-child(2), button) { grid-column: auto; }
.goal-detail-box .goal-edit-form > :is(label:first-child, label:nth-child(2), button:last-child) { grid-column: 1 / -1; }

.goal-group-overlay { z-index: 10030; padding: var(--sp-3); overflow-y: auto; overscroll-behavior: contain; }
.goal-group-box {
  position: relative;
  width: min(100%, 540px);
  max-height: calc(100dvh - (var(--sp-3) * 2));
  overflow: auto;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  color: var(--text);
  background: var(--surface-1);
  box-shadow: var(--shadow-raise);
}
.goal-group-box > .modal-x { min-width: var(--touch-min); min-height: var(--touch-min); }
.goal-group-box h2 { margin: 0; padding-inline-end: 48px; font-size: var(--type-title); line-height: var(--leading-display); }
.goal-group-box h2:focus { outline: none; }
.goal-group-box > p { color: var(--text-soft); line-height: var(--leading-prose); }
.goal-group-form { display: grid; gap: var(--sp-3); }
.goal-group-form label { display: grid; gap: var(--sp-1); color: var(--text-soft); font-size: var(--type-meta); font-weight: 800; }
.goal-group-dialog-actions, .goal-group-state-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); }
.goal-group-state-actions { margin-block-start: var(--sp-3); padding-block-start: var(--sp-3); border-top: 1px solid var(--line-soft); }
.goal-group-box :is(button, input):focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .goals-more-menu button:hover,
  .goals-initiative-head > button:hover,
  .goals-show-all:hover,
  .goals-clear-group:hover { color: var(--text-strong); background: color-mix(in srgb, var(--accent) 7%, transparent); }
}
@media (max-width: 700px) {
  .goals-shell { gap: var(--sp-2); }
  .goals-shell .goals-route-head { display: flex; min-height: 50px; padding: 0 var(--sp-1); }
  .goals-route-head h2 { font-size: var(--type-hero); }
  .goals-route-nav { padding-inline: var(--sp-1); }
  .goals-shell .goals-view-tabs { width: min(100%, 240px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goals-shell .goals-view-tab { font-size: var(--type-control); }
  .goals-focus-head, .goals-all-head { display: grid; align-items: start; padding: var(--sp-2) var(--sp-1); }
  .goals-all-tools { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .goals-bulk-toolbar { align-items: stretch; display: grid; margin-inline: var(--sp-1); }
  .goals-bulk-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goals-focus-head p, .goals-all-head p { font-size: var(--type-control); line-height: var(--leading-prose); }
  .goals-focus-list { gap: var(--sp-2); }
  .goals-initiative-head > button { min-height: var(--touch-min); padding: var(--sp-2); }
  .goals-shell .goal-summary { min-height: 64px; grid-template-columns: minmax(0, 1fr) 20px; padding: var(--sp-2); }
  .goals-shell .goal-summary-meta { row-gap: 2px; }
  .goals-shell .goals-map .goal-item { margin-inline-start: min(calc(var(--goal-depth) * 12px), 36px); }
  .goals-focus-empty { display: grid; padding: var(--sp-2); }
  .goals-exact-filter { width: 100%; min-width: 0; }
  .goals-group-head { align-items: start; padding: var(--sp-2); }
  .goals-group-head .btn { flex: 0 0 auto; }
  .goals-composer .goal-form-main, .goals-composer .gx-grid { grid-template-columns: minmax(0, 1fr); }
  .goals-shell .goals-composer { padding: var(--sp-2); }
  .goal-group-overlay { align-items: end; padding: var(--sp-2); }
  .goal-group-box { width: 100%; max-height: calc(100dvh - var(--sp-2)); padding: var(--sp-3); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md); }
}
@media (max-width: 370px) {
  .goals-shell .goals-view-tabs { width: min(100%, 220px); }
  .goals-more-nav > summary { padding-inline: var(--sp-2); }
  .goals-group-head { display: grid; }
  .goals-group-head .btn { justify-self: start; }
  .goals-all-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse), (max-width: 600px) {
  .goals-more-nav > summary,
  .goals-more-menu button,
  .goals-initiative-head > button,
  .goals-group-box :is(button, input),
  .goals-show-all,
  .goals-clear-group,
  .goals-bulk-toolbar button,
  .goals-shell .goal-bulk-pick { min-height: var(--touch-min); }
}
@media (prefers-reduced-motion: reduce) {
  .goal-group-overlay *, .goal-group-overlay *::before, .goal-group-overlay *::after,
  .goals-bulk-toolbar *, .goals-bulk-toolbar *::before, .goals-bulk-toolbar *::after {
    animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
}

/* ==========================================================
   Attention contract v1 — bounded entry, boundary and return.
   The engine owns policy/session truth; this block owns only the
   calm, accessible presentation of its four explicit UI states.
   ========================================================== */
html.attention-dialog-open,
html.attention-dialog-open body { overscroll-behavior: none; }

:root { --attention-kicker-fg: var(--accent-2); }
:root[data-theme="light"] { --attention-kicker-fg: #075f78; }

.attention-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  min-width: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--surface-0) 82%, transparent);
}

.attention-dialog {
  position: relative;
  width: min(100%, 640px);
  max-height: calc(100dvh - (var(--sp-4) * 2));
  overflow: auto;
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  color: var(--text);
  background: var(--surface-1);
  box-shadow: var(--shadow-raise);
  scrollbar-gutter: stable;
}

.attention-dialog > .modal-x {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: 2;
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
}

.attention-flow {
  min-width: 0;
  display: grid;
  gap: var(--sp-4);
}

.attention-flow-head {
  min-width: 0;
  padding-inline-end: calc(var(--touch-min) + var(--sp-2));
}

.attention-kicker {
  margin: 0 0 var(--sp-1);
  color: var(--attention-kicker-fg);
  font: 850 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.attention-flow-head h2 {
  max-width: var(--measure-compact);
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: var(--leading-display);
  font-synthesis: none;
  font-kerning: normal;
  overflow-wrap: anywhere;
}

.attention-flow-head h2:focus { outline: none; }

#attention-dialog-overlay [data-secretary-prepared] .t-title-edit,
#attention-dialog-overlay [data-secretary-prepared] .t-time { min-height: 42px; }

.attention-flow-head > p:last-child {
  max-width: var(--measure-compact);
  margin: var(--sp-2) 0 0;
  color: var(--text-soft);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
}

.attention-field-grid,
.attention-field,
.attention-fieldset,
.attention-emergency-body {
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
}

.attention-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.attention-field-wide { grid-column: 1 / -1; }

.attention-field > span,
.attention-fieldset > legend {
  color: var(--text-soft);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
}

.attention-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.attention-fieldset > legend { margin-block-end: var(--sp-2); }
.attention-topic-field[hidden] { display: none; }

.attention-field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  background: var(--surface-2);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
}

.attention-choice-row,
.attention-purpose-grid,
.attention-mode-grid {
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
}

.attention-choice-row { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); }
.attention-purpose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.attention-mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.attention-choice {
  position: relative;
  min-width: 0;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
}

.attention-choice:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  box-shadow: inset 3px 0 var(--accent);
}

.attention-choice > input {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.attention-choice > span,
.attention-choice > span > :is(b, small) {
  min-width: 0;
  display: block;
  overflow-wrap: anywhere;
}

.attention-choice b {
  color: var(--text-strong);
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
}

.attention-choice small {
  margin-block-start: 3px;
  color: var(--text-soft);
  font: var(--type-meta)/var(--leading-ui) var(--font-ui);
}

.attention-privacy-note,
.attention-calibration,
.attention-form-status,
.attention-emergency-body > p {
  margin: 0;
  color: var(--text-soft);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
}

.attention-calibration {
  padding: var(--sp-3);
  border-inline-start: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}

.attention-form-status:empty { display: none; }
.attention-form-status[data-error="true"] { color: var(--bad); }
.attention-commitment-hint {
  display: block;
  margin-block-start: calc(var(--sp-1) * -1);
  color: var(--text-soft);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
}

.attention-settings-card { display: grid; gap: var(--sp-3); }
.attention-settings-head {
  min-width: 0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.attention-settings-head h4 { margin: 0; color: var(--text-strong); font-size: var(--type-heading); line-height: var(--leading-ui); }
.attention-settings-head p { max-width: var(--measure-compact); margin: var(--sp-1) 0 0; line-height: var(--leading-prose); }
.attention-settings-head > .btn { flex: 0 0 auto; min-height: var(--touch-min); }
.attention-commitment-warning {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--bad) 55%, var(--line-soft));
  border-inline-start-width: 3px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bad) 8%, var(--surface-2));
}
.attention-commitment-warning :is(b, p) { margin: 0; overflow-wrap: anywhere; }
.attention-commitment-warning b { color: var(--text-strong); font: 800 var(--type-control)/var(--leading-ui) var(--font-ui); }
.attention-commitment-warning p { color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }
.attention-dialog .btn:not(.ghost):not(.danger),
.attention-settings-card .btn:not(.ghost):not(.danger) { color: var(--on-accent); }
.attention-policy-list { min-width: 0; display: grid; border-block: 1px solid var(--line-soft); }
.attention-policy-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.attention-policy-row + .attention-policy-row { border-top: 1px solid var(--line-soft); }
.attention-policy-row :is(b, small) { min-width: 0; display: block; overflow-wrap: anywhere; }
.attention-policy-row b { color: var(--text-strong); font: 850 var(--type-control)/var(--leading-ui) var(--font-ui); }
.attention-policy-row small { margin-block-start: 3px; color: var(--text-soft); font: var(--type-meta)/var(--leading-ui) var(--font-ui); }
.attention-policy-row .attention-policy-link-state { color: var(--accent); font-weight: 800; }
.attention-policy-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.attention-policy-row .btn { min-height: var(--touch-min); }
.attention-active-note {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-inline-start: 3px solid var(--accent);
  color: var(--text-soft);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
}
.attention-storage-state {
  width: fit-content;
  margin: 0;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-2);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
}

.browser-companion {
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%);
}
.browser-companion > summary {
  min-height: var(--touch-min);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  list-style: none;
}
.browser-companion > summary::-webkit-details-marker { display: none; }
.browser-companion > summary > span:nth-child(2),
.browser-companion > summary :is(b, small) { min-width: 0; display: block; overflow-wrap: anywhere; }
.browser-companion > summary b { color: var(--text-strong); font: 850 var(--type-control)/var(--leading-ui) var(--font-ui); }
.browser-companion > summary small { margin-block-start: 2px; color: var(--text-soft); font: var(--type-meta)/var(--leading-label) var(--font-ui); }
.browser-companion > summary > span:last-child { color: var(--text-soft); transition: transform var(--dur-fast) var(--ease-out); }
.browser-companion[open] > summary > span:last-child { transform: rotate(180deg); }
.browser-companion-mark {
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line-soft));
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-3));
  font-weight: 900;
}
.browser-companion-body {
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}
.browser-companion-body > p { margin: 0; color: var(--text-soft); line-height: var(--leading-prose); }
.browser-companion-active {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2);
  border-inline-start: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-3));
}
.browser-companion-active :is(b, span) { min-width: 0; overflow-wrap: anywhere; }
.browser-companion-active b { color: var(--text-strong); }
.browser-companion-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.browser-companion-actions > :is(a, button) { min-height: var(--touch-min); }
.browser-companion-install { font-size: var(--type-meta); }
.browser-companion > summary:focus-visible,
.browser-companion-actions :is(a, button):focus-visible { outline: none; box-shadow: var(--focus-ring); }

.browser-companion-launch-slot {
  grid-column: 1 / -1;
  min-width: 0;
  margin-block: calc(var(--sp-2) * -1) var(--sp-1);
}
.browser-companion-launch {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(180px, auto);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line-soft));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(240px 130px at 0% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 74%),
    linear-gradient(115deg, color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%), var(--surface-2));
  box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 10%, transparent);
  animation: browser-companion-arrive var(--dur-slow) var(--ease-out) both;
}
.browser-companion-launch::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, white 7%, transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: browser-companion-sheen 900ms var(--ease-out) 240ms both;
}
.browser-companion-launch-mark {
  inline-size: 70px;
  block-size: 70px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line-soft));
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-3));
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent);
}
.browser-companion-launch-mark img { inline-size: 52px; block-size: 52px; object-fit: contain; }
.browser-companion-launch-copy { min-width: 0; }
.browser-companion-launch-copy > span,
.browser-companion-installer-kicker {
  display: block;
  margin-block-end: var(--sp-1);
  color: var(--accent);
  font: 850 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.browser-companion-launch-copy h2 { margin: 0; color: var(--text-strong); font-size: var(--type-title); line-height: var(--leading-display); }
.browser-companion-launch-copy p { max-width: 760px; margin: var(--sp-1) 0 0; color: var(--text-soft); line-height: var(--leading-prose); }
.browser-companion-launch-actions { min-width: 0; display: grid; gap: var(--sp-1); justify-items: stretch; }
.browser-companion-launch-actions :is(button, .btn) { min-height: var(--touch-min); white-space: normal; }
.browser-companion-never { min-height: var(--touch-min); border: 0; background: transparent; color: var(--text-soft); font: 750 var(--type-meta)/var(--leading-ui) var(--font-ui); cursor: pointer; }
.browser-companion-never:hover { color: var(--text-strong); }
.browser-companion-launch-error { grid-column: 2 / -1; margin: 0; color: var(--danger); font-size: var(--type-meta); }
.browser-companion-launch :is(button, a):focus-visible { outline: none; box-shadow: var(--focus-ring); }

@keyframes browser-companion-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes browser-companion-sheen { to { transform: translateX(100%); } }

.browser-companion-installer-overlay { z-index: 10080; }
.browser-companion-installer {
  position: relative;
  width: min(760px, calc(100vw - 24px));
  max-height: min(860px, calc(100dvh - 24px));
  overflow: auto;
  padding: clamp(var(--sp-4), 4vw, var(--sp-6));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line-soft));
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
}
.browser-companion-installer > h2 { margin: 0; color: var(--text-strong); font: 900 var(--type-title)/var(--leading-display) var(--font-display); }
.browser-companion-installer > p { color: var(--text-soft); line-height: var(--leading-prose); }
.browser-companion-install-steps { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0; padding: 0; list-style: none; }
.browser-companion-install-steps li {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.browser-companion-install-steps li > span { inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface-3)); font-weight: 900; }
.browser-companion-install-steps li > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.browser-companion-install-steps li b { flex: 1 1 100%; color: var(--text-strong); }
.browser-companion-install-steps li p { flex: 1 1 100%; margin: 0; color: var(--text-soft); line-height: var(--leading-prose); }
.browser-companion-install-steps code { min-height: var(--touch-min); display: inline-flex; align-items: center; padding: 0 var(--sp-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: var(--text-strong); background: var(--surface-3); overflow-wrap: anywhere; }
.browser-companion-install-steps :is(a, button) { min-height: var(--touch-min); }
.browser-companion-installer-note { padding: var(--sp-2) var(--sp-3); border-inline-start: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.browser-companion-installer-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); }
.browser-companion-installer-actions > * { min-height: var(--touch-min); }
.browser-companion-installer :is(button, a):focus-visible { outline: none; box-shadow: var(--focus-ring); }

.attention-actions,
.attention-boundary-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.attention-actions > *,
.attention-boundary-actions > * { min-height: var(--touch-min); }

.attention-empty,
.attention-return-action,
.attention-emergency,
.attention-data-choice {
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.attention-empty p { margin: 0 0 var(--sp-2); color: var(--text-soft); line-height: var(--leading-prose); }

.attention-return-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}

.attention-return-action > span {
  color: var(--attention-kicker-fg);
  font-size: var(--type-title);
  line-height: var(--leading-tight);
}

.attention-return-action b,
.attention-return-action small { display: block; overflow-wrap: anywhere; }
.attention-return-action b { color: var(--text-strong); font: 850 var(--type-body)/var(--leading-ui) var(--font-ui); }
.attention-return-action small { margin-block-start: 3px; color: var(--text-soft); font: var(--type-meta)/var(--leading-label) var(--font-ui); }

.attention-emergency,
.attention-data-choice { padding: 0; }
.attention-emergency > summary,
.attention-data-choice > summary {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-soft);
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
  cursor: pointer;
}
.attention-emergency-body { padding: 0 var(--sp-3) var(--sp-3); }
.attention-emergency-body .btn { justify-self: start; min-height: var(--touch-min); }
.attention-data-choice > .attention-fieldset {
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
}

.attention-dialog :is(button, input, select, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .attention-choice:hover { border-color: var(--line-strong); background: var(--surface-3); }
  .attention-choice:has(input:checked):hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
}

@media (max-width: 700px) {
  .attention-overlay { place-items: end center; padding: var(--sp-2); }
  .attention-dialog {
    width: 100%;
    max-height: calc(100dvh - var(--sp-2));
    padding: var(--sp-3);
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
  }
  .attention-flow { gap: var(--sp-3); }
  .attention-field-grid,
  .attention-purpose-grid,
  .attention-mode-grid { grid-template-columns: minmax(0, 1fr); }
  .attention-choice-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attention-actions,
  .attention-boundary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #attention-dialog-overlay [data-secretary-evening] .attention-actions { grid-template-columns: minmax(0, 1fr); }
  .attention-actions > *,
  .attention-boundary-actions > * { width: 100%; }
  .attention-settings-head { display: grid; }
  .attention-settings-head > .btn { justify-self: start; }
  .attention-policy-row { align-items: start; grid-template-columns: minmax(0, 1fr); }
  .attention-policy-actions { justify-content: stretch; flex-wrap: wrap; }
  .attention-policy-actions .btn { flex: 1 1 12rem; }
}

@media (max-width: 370px) {
  .attention-overlay { padding: var(--sp-1); }
  .attention-dialog { max-height: calc(100dvh - var(--sp-1)); padding: var(--sp-2); }
  .attention-choice-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attention-actions,
  .attention-boundary-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (pointer: coarse), (max-width: 600px) {
  .attention-dialog :is(button, input, select, textarea, summary),
  .attention-choice { min-height: var(--touch-min); }
  .attention-field :is(input, select, textarea) { font-size: max(16px, var(--type-control)); }
}

@media (prefers-reduced-motion: reduce) {
  .attention-overlay *,
  .attention-overlay *::before,
  .attention-overlay *::after {
    animation: none !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   Secretary / recovery v197 — one compact place for support.
   The card surfaces the next useful intervention without turning Today into
   another dashboard. Detail, capture and day-close stay available on demand.
   ========================================================== */
.secretary-card {
  min-width: 0;
  overflow: clip;
  padding: var(--sp-3) !important;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-soft));
  background:
    radial-gradient(260px 150px at 8% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%),
    linear-gradient(150deg, color-mix(in srgb, var(--surface-3) 78%, transparent), var(--surface-2));
}

.today-support > .secretary-card { padding: var(--sp-3) !important; }
.secretary-summary.comp-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
}
.today-support > .secretary-card .secretary-summary .comp-art,
.secretary-card .secretary-summary .comp-art {
  inline-size: 58px;
  block-size: 72px;
  flex-basis: 58px;
  border-width: 1px;
  border-radius: var(--radius-md);
}
.secretary-summary .comp-body,
.secretary-summary .comp-line-row,
.secretary-summary .comp-name { min-width: 0; }
.secretary-summary .comp-name { flex-wrap: wrap; gap: var(--sp-1); }
.secretary-summary .comp-name > b { color: var(--text-strong); overflow-wrap: anywhere; }
.secretary-summary .comp-line { margin: var(--sp-1) 0 0; color: var(--text-soft); overflow-wrap: anywhere; }

.secretary-toggle,
.secretary-reward,
.secretary-settings-link {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-3) 84%, transparent);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.secretary-toggle { padding-inline: var(--sp-2); white-space: nowrap; }
.secretary-toggle span { color: var(--attention-kicker-fg); font-size: var(--type-control); }
.secretary-streak {
  min-block-size: 24px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line-soft));
  border-radius: var(--radius-pill);
  color: var(--header-streak-fg);
  background: color-mix(in srgb, var(--warn) 8%, var(--surface-2));
  font: 850 var(--type-meta)/1 var(--font-ui);
  white-space: nowrap;
}
.secretary-reward {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding-inline: var(--sp-2);
  color: var(--header-gold-fg);
  border-color: color-mix(in srgb, var(--accent-warm) 55%, var(--line-soft));
  background: color-mix(in srgb, var(--accent-warm) 11%, var(--surface-2));
}
.secretary-reward b { font-variant-numeric: tabular-nums; }
.secretary-reward.is-waiting { animation: secretaryRewardWaiting 1.8s var(--ease-out) infinite; }

.secretary-details {
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--line-soft);
}
.secretary-details.is-collapsed { display: none; }
.secretary-details-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--muted);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
}
.secretary-details-head .comp-rename {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
}

.secretary-control {
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-1) 74%, transparent);
}
.secretary-control.is-active {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-1));
}
.secretary-control.is-due {
  border-color: color-mix(in srgb, var(--accent-warm) 62%, var(--line-soft));
  box-shadow: inset 3px 0 0 var(--accent-warm);
}
.secretary-control.is-error { border-color: color-mix(in srgb, var(--bad) 55%, var(--line-soft)); }
.secretary-control-head {
  min-width: 0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.secretary-control-head > div,
.secretary-control-copy { min-width: 0; display: grid; gap: 3px; }
.secretary-control :is(b, small) { min-width: 0; display: block; overflow-wrap: anywhere; }
.secretary-control b { color: var(--text-strong); font: 850 var(--type-control)/var(--leading-ui) var(--font-ui); }
.secretary-control small { color: var(--text-soft); font: var(--type-meta)/var(--leading-label) var(--font-ui); }
.secretary-control-kicker {
  color: var(--attention-kicker-fg);
  font: 850 var(--type-floor)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.secretary-settings-link { padding-inline: var(--sp-3); }
.secretary-primary { min-block-size: var(--touch-min); }

.secretary-primary-offer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.secretary-primary-offer :is(button, .btn) { min-block-size: var(--touch-min); }
.secretary-primary-offer > :is(.secretary-action, .secretary-inline-nudge, .secretary-primary-note) {
  grid-column: 1 / -1;
}
.secretary-primary-note {
  margin: 0;
  color: var(--text-soft);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
}
.secretary-inline-nudge {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.secretary-inline-nudge > :is(.nudge, .mobil-text) { min-width: 0; flex: 1 1 190px; }
.secretary-inline-nudge .nudge-boost { min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
.secretary-inline-nudge .tts-btn { margin-inline-start: auto; }

.secretary-other-support {
  min-width: 0;
  border-block-start: 1px solid var(--line-soft);
}
.secretary-other-support > summary {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  list-style: none;
  color: var(--text-soft);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.secretary-other-support > summary::-webkit-details-marker { display: none; }
.secretary-other-support > summary > span:last-child { transition: transform 160ms var(--ease-out); }
.secretary-other-support[open] > summary > span:last-child { transform: rotate(180deg); }
.secretary-other-support-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
  padding-block-end: var(--sp-1);
}

.secretary-experiment-offer {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  gap: var(--sp-2);
}
.secretary-experiment-offer > :is(b, small) { min-width: 0; display: block; overflow-wrap: anywhere; }
.secretary-experiment-offer > b { color: var(--text-strong); font: 850 var(--type-control)/var(--leading-ui) var(--font-ui); }
.secretary-experiment-offer > small { color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }
.secretary-experiment-buttons { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1); }
.secretary-experiment-buttons > :is(button, .btn) { min-block-size: var(--touch-min); }
.secretary-experiment-action {
  min-height: var(--touch-min);
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line-soft));
  border-radius: var(--radius-md);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  font: 850 var(--type-control)/var(--leading-ui) var(--font-ui);
  cursor: pointer;
}
.secretary-experiment-feedback {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}
.secretary-experiment-feedback :is(button, input, label, select) { min-block-size: var(--touch-min); }
.secretary-experiment-feedback label { min-width: 0; display: grid; gap: var(--sp-1); color: var(--text-soft); font: 800 var(--type-meta)/var(--leading-label) var(--font-ui); }
.secretary-experiment-feedback select { width: 100%; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding-inline: var(--sp-2); font: var(--type-control)/var(--leading-ui) var(--font-ui); }
.secretary-experiment-feedback .secretary-experiment-action { grid-column: 1 / -1; }
.secretary-experiment-feedback details { min-width: 0; border-block: 1px solid var(--line-soft); }
.secretary-experiment-feedback details > summary { min-block-size: var(--touch-min); display: flex; align-items: center; color: var(--text-soft); font: 800 var(--type-meta)/var(--leading-label) var(--font-ui); cursor: pointer; }
.secretary-experiment-optional { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding-block-end: var(--sp-2); }
.secretary-experiment-review {
  min-width: 0;
  border-block: 1px solid var(--line-soft);
  color: var(--text-soft);
}
.secretary-experiment-review > summary {
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  list-style: none;
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.secretary-experiment-review > summary::-webkit-details-marker { display: none; }
.secretary-experiment-review > div {
  min-width: 0;
  display: grid;
  gap: var(--sp-1);
  padding-block-end: var(--sp-2);
}
.secretary-experiment-review p {
  margin: 0;
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.secretary-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1);
}
.secretary-action {
  min-width: 0;
  min-height: var(--touch-min);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--surface-2);
  font-family: var(--font-ui);
  text-align: start;
  cursor: pointer;
}
.secretary-action > span { grid-row: 1 / span 2; font-size: var(--type-heading); text-align: center; }
.secretary-action > :is(b, small) { min-width: 0; display: block; overflow-wrap: anywhere; }
.secretary-action b { font-size: var(--type-meta); line-height: var(--leading-label); }
.secretary-action small { color: var(--muted); font-size: var(--type-floor); line-height: var(--leading-label); }
.secretary-action.is-primary {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-2));
}
.secretary-action.is-pulsing { animation: secretaryActionDue 2.1s var(--ease-out) infinite; }

.capture-secondary {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-1);
  margin-block-start: var(--sp-1);
}
.capture-secondary :is(.dayrec-btn, .capture-notes-link) {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 5px var(--sp-2);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.capture-notes-link { font-variant-numeric: tabular-nums; }

details.shutdown { padding: 0; overflow: clip; }
details.shutdown > summary {
  min-width: 0;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  list-style: none;
  color: var(--text-soft);
  cursor: pointer;
}
details.shutdown > summary::-webkit-details-marker { display: none; }
details.shutdown > summary > span { min-width: 0; overflow-wrap: anywhere; }
details.shutdown > summary > span:last-child { flex: 0 0 auto; font-size: var(--type-meta); white-space: nowrap; }
details.shutdown[open] > summary { color: var(--text-strong); border-block-end: 1px solid var(--line-soft); }
details.shutdown > .shutdown-body { min-width: 0; padding: var(--sp-3); }
details.shutdown > .shutdown-body > :first-child { margin-block-start: 0; }

.attention-recovery-compact { max-inline-size: 600px; }
.attention-recovery-compact .attention-mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.attention-recovery-compact .attention-choice { padding-inline: var(--sp-2); }
.attention-evening-plan {
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.attention-evening-plan li {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.attention-evening-plan li > span {
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--good);
  background: color-mix(in srgb, var(--good) 11%, var(--surface-3));
  font-weight: 900;
}
.attention-evening-plan li > div,
.attention-evening-plan li :is(b, small) { min-width: 0; display: block; overflow-wrap: anywhere; }
.attention-evening-plan li b { color: var(--text-strong); font: 850 var(--type-control)/var(--leading-ui) var(--font-ui); }
.attention-evening-plan li small { margin-block-start: 3px; color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }

.attention-settings-shortcuts {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  border-block: 1px solid var(--line-soft);
}
.attention-settings-shortcuts > :is(button, .btn) { min-height: var(--touch-min); }
.attention-settings-shortcuts > span { min-width: 0; overflow-wrap: anywhere; }

.secretary-card :is(button, input, textarea, summary):focus-visible,
.capture-secondary button:focus-visible,
.attention-settings-shortcuts button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
details.shutdown > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  box-shadow: none;
}

@keyframes secretaryRewardWaiting {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-warm) 28%, transparent); }
  46% { transform: translateY(-2px); box-shadow: 0 0 0 5px transparent; }
}
@keyframes secretaryActionDue {
  0%, 100% { border-color: color-mix(in srgb, var(--accent-warm) 44%, var(--line-soft)); }
  50% { border-color: var(--accent-warm); box-shadow: 0 0 18px color-mix(in srgb, var(--accent-warm) 18%, transparent); }
}
@keyframes secretaryFabDue {
  0%, 100% { box-shadow: 0 6px 22px rgba(0,0,0,.4), 0 0 0 0 color-mix(in srgb, var(--accent-warm) 34%, transparent); }
  55% { box-shadow: 0 8px 26px rgba(0,0,0,.4), 0 0 0 9px transparent; }
}
.evening-reminder-due #ai-fab { animation: secretaryFabDue 2.2s var(--ease-out) infinite; }

@media (hover: hover) and (pointer: fine) {
  .secretary-toggle:hover,
  .secretary-settings-link:hover,
  .capture-secondary button:hover { color: var(--text-strong); border-color: var(--line-strong); background: var(--surface-3); }
  .secretary-action:hover { border-color: var(--line-strong); background: var(--surface-3); transform: translateY(-1px); }
  .secretary-reward:hover { filter: brightness(1.08); }
}

@media (max-width: 600px) {
  .secretary-card { padding: var(--sp-2) !important; }
  .today-support > .secretary-card { padding: var(--sp-2) !important; }
  .secretary-summary.comp-row { grid-template-columns: 52px minmax(0, 1fr) var(--touch-min); }
  .today-support > .secretary-card .secretary-summary .comp-art,
  .secretary-card .secretary-summary .comp-art { inline-size: 52px; block-size: 66px; flex-basis: 52px; }
  .secretary-toggle { inline-size: var(--touch-min); padding: 0; font-size: 0; }
  .secretary-toggle span { font-size: var(--type-heading); }
  .secretary-summary .comp-line { font-size: var(--type-meta); line-height: var(--leading-ui); }
  .secretary-control.is-active { grid-template-columns: minmax(0, 1fr); }
  .secretary-control.is-active .secretary-primary { width: 100%; }
  .secretary-primary-offer { grid-template-columns: minmax(0, 1fr); }
  .secretary-primary-offer > :is(button, .btn) { width: 100%; }
  .secretary-other-support { width: 100%; }
  .secretary-experiment-offer,
  .secretary-experiment-feedback { grid-template-columns: minmax(0, 1fr); }
  .secretary-experiment-buttons,
  .secretary-experiment-optional { grid-template-columns: minmax(0, 1fr); }
  .secretary-experiment-feedback .secretary-experiment-action { grid-column: 1; }
  .secretary-control-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .secretary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secretary-action { min-height: 50px; }
  .capture-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capture-secondary :is(.dayrec-btn, .capture-notes-link) { width: 100%; }
  details.shutdown > summary { padding-inline: var(--sp-2); }
  details.shutdown > .shutdown-body { padding: var(--sp-2); }
  .attention-recovery-compact .attention-mode-grid { grid-template-columns: minmax(0, 1fr); }
  .attention-settings-shortcuts { display: grid; grid-template-columns: minmax(0, 1fr); }
  .attention-settings-shortcuts > :is(button, .btn) { width: 100%; }
  .browser-companion-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .browser-companion-actions > :is(a, button) { width: 100%; }
  .browser-companion-launch-slot { margin-block-start: 0; }
  .browser-companion-launch { grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); }
  .browser-companion-launch-mark { inline-size: 52px; block-size: 52px; border-radius: var(--radius-md); }
  .browser-companion-launch-mark img { inline-size: 40px; block-size: 40px; }
  .browser-companion-launch-actions,
  .browser-companion-launch-error { grid-column: 1 / -1; }
  .browser-companion-installer-overlay { align-items: flex-end; padding: var(--sp-2) var(--sp-2) 0; }
  .browser-companion-installer { width: 100%; max-height: calc(100dvh - var(--sp-2)); padding: var(--sp-4) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .browser-companion-installer-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .browser-companion-installer-actions > * { width: 100%; }
}

@media (max-width: 374px) {
  .secretary-summary.comp-row { grid-template-columns: 46px minmax(0, 1fr) var(--touch-min); gap: var(--sp-1); }
  .today-support > .secretary-card .secretary-summary .comp-art,
  .secretary-card .secretary-summary .comp-art { inline-size: 46px; block-size: 60px; flex-basis: 46px; }
  .secretary-streak { padding-inline: var(--sp-1); }
  .secretary-actions { grid-template-columns: minmax(0, 1fr); }
  .secretary-action { min-height: var(--touch-min); }
  details.shutdown > summary > span:last-child { white-space: normal; text-align: end; }
}

@media (pointer: coarse) {
  .secretary-card :is(button, input, textarea),
  .capture-secondary button,
  details.shutdown > summary,
  .attention-settings-shortcuts :is(button, .btn),
  .browser-companion :is(summary, a, button),
  .browser-companion-launch :is(a, button),
  .browser-companion-installer :is(a, button) { min-block-size: var(--touch-min); }
}

@media (prefers-reduced-motion: reduce) {
  .secretary-primary-offer,
  .secretary-other-support,
  .secretary-experiment-offer,
  .secretary-experiment-action,
  .secretary-experiment-feedback,
  .secretary-other-support > summary > span:last-child { animation: none !important; transition: none !important; }
  .secretary-reward.is-waiting,
  .secretary-action.is-pulsing,
  .evening-reminder-due #ai-fab { animation: none !important; transform: none !important; }
  .secretary-action { transition: none !important; }
  .browser-companion > summary > span:last-child { transition: none !important; }
  .browser-companion-launch,
  .browser-companion-launch::after { animation: none !important; transform: none !important; }
  .secretary-reward.is-waiting,
  .secretary-action.is-pulsing { box-shadow: inset 0 0 0 1px var(--accent-warm); }
  .evening-reminder-due #ai-fab { box-shadow: 0 6px 22px rgba(0,0,0,.4), 0 0 0 4px var(--accent-warm); }
}

/* Launch hardening v180 — honest offline/update/reconnect boundary. */
#pwa-lifecycle-region {
  position: fixed;
  z-index: 10020;
  inset: max(10px, env(safe-area-inset-top)) 12px auto;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.pwa-lifecycle-surface {
  width: min(720px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text-strong);
  box-shadow: var(--shadow-raised);
  pointer-events: auto;
}
.pwa-lifecycle-surface.is-offline { border-color: var(--warn); }
.pwa-lifecycle-surface strong { display: block; font-size: var(--type-control); line-height: var(--leading-label); }
.pwa-lifecycle-surface p { margin: 3px 0 0; color: var(--muted); font-size: var(--type-meta); line-height: var(--leading-ui); }
.pwa-lifecycle-actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
.pwa-lifecycle-action { min-height: 42px; }
.pwa-lifecycle-action:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; box-shadow: var(--focus-ring); }
@media (max-width: 600px) {
  .pwa-lifecycle-surface { align-items: stretch; flex-direction: column; }
  .pwa-lifecycle-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .pwa-lifecycle-action { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-lifecycle-surface { animation: none; transition: none; }
}

/* Assistant v181 cascade closure: keep the scoped contract after legacy chat. */
#helper-modal .chat-msg.typing { letter-spacing: var(--tracking-natural); }
#helper-modal .chat-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
#helper-modal .chat-actions.applied { padding-top: var(--sp-3); font-size: inherit; opacity: 1; }

/* ── Founder Pass, Фаза 0 ──
   Карточка намеренно не выглядит как checkout: ни рамки-акцента, ни таймера, ни
   «осталось мало». Строка про отсутствие списания стоит выше кнопок, потому что
   записка требует, чтобы это было сказано до нажатия, а не после. */
.fp-card { display: flex; flex-direction: column; gap: 10px; }
.fp-title { margin: 0; font-size: 16px; }
.fp-honest { margin: 0; font-size: 13px; font-weight: 600; color: var(--fg); }
.fp-what, .fp-left, .fp-said { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.fp-left b { color: var(--fg); font-variant-numeric: tabular-nums; }
.fp-note-label { display: block; font-size: 12.5px; color: var(--muted); }
.fp-note-label input { display: block; width: 100%; margin-top: 5px; min-height: 42px; }
.fp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-acts .btn { min-height: 42px; }
.fp-change { align-self: flex-start; min-height: 42px; }
.fp-status:empty { display: none; }
.fp-status { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ========================================================================== */
/* Inspiration v196 — a finite editorial digest, never an infinite feed.       */
/* ========================================================================== */
.nav-motion-inspiration .nav-inspiration-sheet,
.nav-motion-inspiration .nav-inspiration-spark { transform-origin: 50% 50%; }
@keyframes inspirationNavGatherA {
  from { opacity: .3; transform: translate(-2px, 2px) rotate(-5deg); }
  to { opacity: 1; transform: none; }
}
@keyframes inspirationNavGatherB {
  from { opacity: .3; transform: translate(2px, 2px) rotate(5deg); }
  to { opacity: 1; transform: none; }
}
@keyframes inspirationNavSpark {
  from { opacity: 0; transform: scale(.45) rotate(-16deg); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .navsec.active .nav-motion-inspiration .sheet-a { animation: inspirationNavGatherA 220ms var(--ease-out) both; }
  .navsec.active .nav-motion-inspiration .sheet-b { animation: inspirationNavGatherB 220ms var(--ease-out) both; }
  .navsec.active .nav-motion-inspiration .nav-inspiration-spark { animation: inspirationNavSpark 180ms 40ms var(--ease-out) both; }
}
:root {
  --inspiration-mint: #72e1b6;
  --inspiration-blue: #70a7ff;
  --inspiration-violet: #b48cff;
  --inspiration-amber: #f3c46b;
  --inspiration-coral: #ff8e85;
  --inspiration-ink: #080c17;
  --inspiration-paper: color-mix(in srgb, var(--surface-2) 94%, #d6c8a3 6%);
  --inspiration-line: color-mix(in srgb, var(--inspiration-mint) 24%, var(--line-soft));
}

:root[data-theme="light"] {
  --inspiration-mint: #087859;
  --inspiration-blue: #175fb5;
  --inspiration-violet: #7044a8;
  --inspiration-amber: #8a5b00;
  --inspiration-coral: #a63f38;
  --inspiration-ink: #f9fbff;
  --inspiration-paper: #fffdf7;
  --inspiration-line: color-mix(in srgb, var(--inspiration-mint) 28%, var(--line-soft));
}

.inspiration-shell {
  inline-size: min(1180px, 100%);
  min-inline-size: 0;
  margin-inline: auto;
  padding-block-end: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  overflow-x: clip;
}

.inspiration-shell,
.inspiration-shell * { min-inline-size: 0; }

.inspiration-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  border: 0;
  border-block-end: 1px solid var(--inspiration-line);
  border-radius: 0;
  background:
    radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--inspiration-mint) 13%, transparent), transparent 30%),
    linear-gradient(100deg, color-mix(in srgb, var(--surface-2) 88%, transparent), transparent 78%);
  box-shadow: none;
}

.inspiration-head::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  inline-size: min(34%, 300px);
  block-size: 1px;
  background: linear-gradient(90deg, var(--inspiration-mint), transparent);
  pointer-events: none;
}

.inspiration-head > div { min-inline-size: 0; }
.inspiration-head h2 {
  max-inline-size: none;
  margin: 0;
  color: var(--text-strong);
  font: 800 var(--type-hero)/var(--leading-display) var(--font-display);
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.inspiration-head h2:focus { outline: none; }
.inspiration-head p:last-child {
  max-inline-size: 64ch;
  margin: var(--sp-2) 0 0;
  color: var(--text-soft);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
}
.inspiration-head > .btn { min-block-size: var(--touch-min); }

.inspiration-kicker {
  margin: 0 0 var(--sp-1);
  color: var(--inspiration-mint);
  font: 900 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.inspiration-mark {
  position: relative;
  inline-size: 58px;
  block-size: 58px;
  display: block;
  flex: none;
  border: 1px solid var(--inspiration-line);
  border-radius: 19px;
  background:
    radial-gradient(circle at 68% 25%, color-mix(in srgb, var(--inspiration-amber) 75%, transparent) 0 2px, transparent 3px),
    linear-gradient(145deg, color-mix(in srgb, var(--inspiration-mint) 21%, var(--surface-3)), var(--surface-1));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
  overflow: hidden;
}
.inspiration-mark :is(i, b, em) {
  position: absolute;
  display: block;
  block-size: 8px;
  border: 1px solid color-mix(in srgb, var(--text-strong) 48%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--surface-1) 74%, transparent);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .16);
  transform: rotate(-7deg);
}
.inspiration-mark i { inset: 13px 11px auto 15px; }
.inspiration-mark b { inset: 25px 15px auto 10px; transform: rotate(5deg); }
.inspiration-mark em { inset: 37px 9px auto 18px; transform: rotate(-2deg); }
.inspiration-mark :is(i, b, em)::before {
  content: "";
  position: absolute;
  inset: 2px auto 2px 4px;
  inline-size: 45%;
  border-radius: 2px;
  background: var(--inspiration-mint);
  opacity: .72;
}

.inspiration-tabs {
  display: flex;
  align-items: end;
  gap: var(--sp-4);
  padding-inline: var(--sp-2);
  border-block-end: 1px solid var(--line-soft);
}
.inspiration-tabs button {
  position: relative;
  min-block-size: var(--touch-min);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2);
  border: 0;
  color: var(--text-soft);
  background: transparent;
  font: 850 var(--type-control)/var(--leading-ui) var(--font-ui);
  cursor: pointer;
}
.inspiration-tabs button::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  block-size: 2px;
  background: transparent;
}
.inspiration-tabs button.active { color: var(--text-strong); }
.inspiration-tabs button.active::after { background: var(--inspiration-mint); }
.inspiration-tabs button span {
  min-inline-size: 22px;
  block-size: 22px;
  display: inline-grid;
  place-items: center;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  background: var(--surface-3);
  font: 800 var(--type-floor)/1 var(--font-data);
}

.inspiration-first-use {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(var(--sp-5), 4vw, 52px);
  padding: clamp(var(--sp-5), 4vw, 52px);
  border-color: var(--inspiration-line);
  background:
    radial-gradient(circle at 12% 82%, color-mix(in srgb, var(--inspiration-violet) 15%, transparent), transparent 34%),
    radial-gradient(circle at 87% 8%, color-mix(in srgb, var(--inspiration-mint) 12%, transparent), transparent 30%),
    var(--surface-1);
  overflow: hidden;
}
.inspiration-first-use > div:last-child { position: relative; z-index: 1; }
.inspiration-first-use h3,
.inspiration-setup h3,
.inspiration-saved-head h3,
.inspiration-quick-add h3,
.inspiration-state h3,
.inspiration-terminal h3 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  line-height: var(--leading-display);
}
.inspiration-first-use h3 { font-size: clamp(27px, 4vw, 46px); }
.inspiration-first-use > div:last-child > p:not(.inspiration-kicker) {
  max-inline-size: 58ch;
  margin: var(--sp-3) 0 0;
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: var(--leading-prose);
}
.inspiration-first-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.inspiration-first-actions .btn { min-block-size: var(--touch-min); }

.inspiration-first-visual {
  position: relative;
  min-block-size: 290px;
  border: 1px solid color-mix(in srgb, var(--inspiration-violet) 34%, var(--line-soft));
  border-radius: calc(var(--radius-xl) + 8px);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--inspiration-amber) 28%, transparent), transparent 19%),
    radial-gradient(circle at 28% 28%, color-mix(in srgb, var(--inspiration-blue) 32%, transparent), transparent 25%),
    linear-gradient(145deg, color-mix(in srgb, var(--inspiration-violet) 20%, var(--surface-3)), var(--surface-0));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), var(--shadow-card);
  overflow: hidden;
}
.inspiration-first-visual::before,
.inspiration-first-visual::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px solid color-mix(in srgb, var(--text-strong) 28%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.inspiration-first-visual::before { inline-size: 180px; block-size: 180px; }
.inspiration-first-visual::after { inline-size: 116px; block-size: 116px; }
.inspiration-first-visual :is(i, b) { position: absolute; display: block; }
.inspiration-first-visual i {
  inline-size: 88px;
  block-size: 112px;
  border: 1px solid color-mix(in srgb, var(--text-strong) 48%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  box-shadow: 0 16px 28px rgba(0, 0, 0, .24);
}
.inspiration-first-visual i:nth-child(1) { inset: 40px auto auto 18%; transform: rotate(-9deg); }
.inspiration-first-visual i:nth-child(2) { inset: 94px 13% auto auto; transform: rotate(10deg); }
.inspiration-first-visual i:nth-child(3) { inset: auto auto 23px 39%; transform: rotate(-2deg); }
.inspiration-first-visual b {
  inset: 50% auto auto 50%;
  z-index: 2;
  color: var(--inspiration-amber);
  font: 800 46px/1 var(--font-display);
  text-shadow: 0 0 24px color-mix(in srgb, var(--inspiration-amber) 62%, transparent);
  transform: translate(-50%, -50%);
}

.inspiration-import-preview,
.inspiration-profile-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.inspiration-import-preview { margin-block-start: var(--sp-3); }
.inspiration-import-preview span,
.inspiration-profile-summary > div > span {
  max-inline-size: 100%;
  min-block-size: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-3) 82%, transparent);
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
  overflow-wrap: anywhere;
}

.inspiration-import-file-button { cursor: pointer; }
.inspiration-importer {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-block-start: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--inspiration-mint) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-2) 86%, transparent);
}
.inspiration-importer > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.inspiration-importer h4 {
  margin: 2px 0 0;
  color: var(--text-strong);
  font: 850 var(--type-heading)/var(--leading-ui) var(--font-display);
}
.inspiration-import-local {
  flex: none;
  max-inline-size: 240px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--inspiration-mint) 38%, var(--line-soft));
  border-radius: var(--radius-pill);
  color: var(--inspiration-mint);
  background: color-mix(in srgb, var(--inspiration-mint) 8%, transparent);
  font: 800 var(--type-floor)/var(--leading-label) var(--font-ui);
  text-align: center;
}
.inspiration-import-local::before { content: "◉"; font-size: 8px; }
.inspiration-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.inspiration-import-actions :is(.btn, a) { min-block-size: var(--touch-min); }
.inspiration-import-guide {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--inspiration-cyan) 42%, var(--line-soft));
  border-radius: var(--radius-xl);
  outline: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--inspiration-cyan) 8%, transparent), transparent 48%),
    var(--surface-1);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-strong) 5%, transparent);
}
.inspiration-import-guide:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--inspiration-cyan) 24%, transparent); }
.inspiration-import-guide-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
}
.inspiration-import-guide h5 {
  margin: 2px 0 0;
  color: var(--text-strong);
  font: 850 var(--type-heading)/var(--leading-ui) var(--font-display);
}
.inspiration-device-switch {
  flex: none;
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-0) 74%, transparent);
}
.inspiration-device-switch button {
  min-block-size: 38px;
  padding: 7px 12px;
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  color: var(--text-soft);
  background: transparent;
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
}
.inspiration-device-switch button.is-active {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--inspiration-cyan) 18%, var(--surface-3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inspiration-cyan) 42%, transparent);
}
.inspiration-import-direct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--inspiration-mint) 34%, var(--line-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--inspiration-mint) 7%, var(--surface-2));
}
.inspiration-import-direct > div {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
}
.inspiration-import-direct > div > span {
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--surface-0);
  background: var(--inspiration-mint);
  font: 950 18px/1 var(--font-ui);
}
.inspiration-import-direct p { min-inline-size: 0; display: grid; gap: 2px; margin: 0; }
.inspiration-import-direct b { color: var(--text-strong); font: 850 var(--type-control)/var(--leading-ui) var(--font-ui); }
.inspiration-import-direct small { color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }
.inspiration-import-direct > .btn { flex: none; }
.inspiration-import-route {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-0) 58%, transparent);
}
.inspiration-import-route > div {
  min-inline-size: 0;
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-content: center;
  gap: 7px;
  padding: 8px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
}
.inspiration-import-route > div > b,
.inspiration-import-guide-steps > article > b {
  inline-size: 24px;
  block-size: 24px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--inspiration-cyan) 45%, var(--line-soft));
  border-radius: 50%;
  color: var(--inspiration-cyan);
  background: color-mix(in srgb, var(--inspiration-cyan) 8%, transparent);
  font: 900 var(--type-floor)/1 var(--font-data);
}
.inspiration-import-route span { min-inline-size: 0; display: grid; align-content: center; gap: 1px; }
.inspiration-import-route strong { color: var(--text-strong); font: 800 var(--type-floor)/var(--leading-label) var(--font-ui); overflow-wrap: anywhere; }
.inspiration-import-route small { color: var(--text-dim); font: 700 10px/var(--leading-label) var(--font-ui); }
.inspiration-import-route > i { align-self: center; color: var(--text-dim); font: 800 17px/1 var(--font-ui); }
.inspiration-import-guide-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.inspiration-import-guide-steps > article {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-3) 64%, transparent);
}
.inspiration-import-guide-steps h6 {
  margin: 0;
  color: var(--text-strong);
  font: 850 var(--type-control)/var(--leading-ui) var(--font-ui);
}
.inspiration-import-guide-steps p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
}
.inspiration-import-guide-steps .inspiration-import-tap {
  inline-size: fit-content;
  max-inline-size: 100%;
  display: inline-flex;
  margin-block-start: 8px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--inspiration-cyan) 38%, var(--line-soft));
  border-radius: var(--radius-pill);
  color: var(--inspiration-cyan);
  background: color-mix(in srgb, var(--inspiration-cyan) 7%, transparent);
  font: 800 var(--type-floor)/var(--leading-label) var(--font-ui);
}
.inspiration-import-guide-steps .inspiration-import-file-button { margin-block-start: 10px; }
.inspiration-import-guide footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--text-dim);
  font: var(--type-floor)/var(--leading-prose) var(--font-ui);
}
.inspiration-import-guide footer a { color: var(--inspiration-cyan); text-underline-offset: 3px; }
.inspiration-import-links {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.inspiration-import-links > label {
  color: var(--text-strong);
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
}
.inspiration-import-links textarea {
  inline-size: 100%;
  min-block-size: 96px;
  resize: vertical;
  padding: 10px var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  background: var(--surface-0);
  font: var(--type-meta)/var(--leading-prose) var(--font-data);
}
.inspiration-import-links > div { display: flex; justify-content: end; gap: var(--sp-2); }
.inspiration-import-status,
.inspiration-import-result,
.inspiration-import-error {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.inspiration-import-status,
.inspiration-import-result > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.inspiration-import-status { grid-template-columns: auto minmax(0, 1fr); }
.inspiration-import-status > span {
  inline-size: 30px;
  block-size: 30px;
  border: 2px solid color-mix(in srgb, var(--inspiration-mint) 24%, transparent);
  border-block-start-color: var(--inspiration-mint);
  border-radius: 50%;
  animation: inspiration-import-spin .8s linear 20;
}
@keyframes inspiration-import-spin { to { transform: rotate(360deg); } }
.inspiration-import-status :is(b, p),
.inspiration-import-result :is(b, p),
.inspiration-import-error :is(b, p) { margin: 0; }
.inspiration-import-status b,
.inspiration-import-result b,
.inspiration-import-error b { color: var(--text-strong); font: 850 var(--type-control)/var(--leading-ui) var(--font-ui); }
.inspiration-import-status p,
.inspiration-import-result p,
.inspiration-import-error p { margin-block-start: 3px; color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }
.inspiration-import-result { border-color: color-mix(in srgb, var(--good) 42%, var(--line-soft)); }
.inspiration-import-result > div:first-child > span {
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--surface-0);
  background: var(--good);
  font: 950 var(--type-control)/1 var(--font-ui);
}
.inspiration-import-result.is-warning { border-color: color-mix(in srgb, var(--warn) 50%, var(--line-soft)); }
.inspiration-import-result.is-warning > div:first-child > span { background: var(--warn); }
.inspiration-import-error { border-color: color-mix(in srgb, var(--bad) 55%, var(--line-soft)); }
.inspiration-import-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.inspiration-import-stats > span {
  min-block-size: 54px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-3) 74%, transparent);
  font: 750 var(--type-floor)/var(--leading-label) var(--font-ui);
  text-align: center;
}
.inspiration-import-stats b { color: var(--text-strong); font: 900 var(--type-heading)/1 var(--font-data); }
.inspiration-import-signals { display: flex; flex-wrap: wrap; gap: 6px; }
.inspiration-import-signals span {
  max-inline-size: 100%;
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-3) 74%, transparent);
  font: 750 var(--type-floor)/var(--leading-label) var(--font-ui);
  overflow-wrap: anywhere;
}
.inspiration-import-disclosure {
  margin: 0;
  color: var(--text-soft);
  font: var(--type-floor)/var(--leading-prose) var(--font-ui);
}

.inspiration-setup {
  display: grid;
  gap: 0;
  padding: 0;
  border-color: var(--inspiration-line);
  background: var(--inspiration-paper);
  overflow: clip;
}
.inspiration-setup > header,
.inspiration-quick-add > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.inspiration-setup > header { padding: var(--sp-5); }
.inspiration-setup h3 { font-size: var(--type-title); }
.inspiration-close {
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  flex: none;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--text-soft);
  background: transparent;
  font: 800 var(--type-control)/1 var(--font-ui);
  cursor: pointer;
}
.inspiration-setup fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: var(--sp-5);
  border: 0;
  border-block-start: 1px solid var(--line-soft);
}
.inspiration-setup legend {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px var(--sp-3);
  padding: 0;
  color: var(--text-strong);
}
.inspiration-setup legend > b {
  grid-row: 1 / span 2;
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--inspiration-line);
  border-radius: 50%;
  color: var(--inspiration-mint);
  font: 900 var(--type-control)/1 var(--font-data);
}
.inspiration-setup legend > span { font: 850 var(--type-heading)/var(--leading-ui) var(--font-ui); }
.inspiration-setup legend > small { color: var(--text-soft); font: var(--type-meta)/var(--leading-label) var(--font-ui); }
.inspiration-choices,
.inspiration-format-choices {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
}
.inspiration-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inspiration-format-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.inspiration-choice,
.inspiration-format-choice {
  position: relative;
  min-block-size: var(--touch-min);
  display: grid;
  align-content: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: var(--surface-1);
  cursor: pointer;
}
.inspiration-choice { gap: 3px; padding: 9px var(--sp-3); }
.inspiration-choice > span { color: var(--text-strong); font: 800 var(--type-control)/var(--leading-ui) var(--font-ui); overflow-wrap: anywhere; }
.inspiration-choice small { color: var(--text-soft); font: var(--type-floor)/var(--leading-label) var(--font-ui); overflow-wrap: anywhere; }
.inspiration-format-choice {
  min-block-size: 76px;
  justify-items: center;
  gap: 6px;
  padding: var(--sp-2);
  text-align: center;
}
.inspiration-choice input,
.inspiration-format-choice input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.inspiration-choice.is-selected,
.inspiration-choice:has(input:checked),
.inspiration-format-choice.is-selected,
.inspiration-format-choice:has(input:checked) {
  border-color: var(--inspiration-mint);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--inspiration-mint) 11%, var(--surface-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inspiration-mint) 35%, transparent);
}
.inspiration-choice:focus-within,
.inspiration-format-choice:focus-within { box-shadow: var(--focus-ring); }
.inspiration-format-choice > span {
  inline-size: 25px;
  block-size: 25px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--inspiration-mint);
  font: 900 var(--type-control)/1 var(--font-ui);
}
.inspiration-format-choice > span::before { content: "◇"; }
.inspiration-format-choice > span[data-format="edit"]::before { content: "▶"; font-size: 10px; }
.inspiration-format-choice > span[data-format="video"]::before { content: "▻"; }
.inspiration-format-choice > span[data-format="image"]::before { content: "▣"; }
.inspiration-format-choice > span[data-format="quote"]::before { content: "“"; font-family: var(--font-display); font-size: 20px; }
.inspiration-format-choice > span[data-format="podcast"]::before { content: "◖"; }
.inspiration-format-choice > b { font: 800 var(--type-meta)/var(--leading-label) var(--font-ui); }

.inspiration-free {
  display: grid;
  gap: var(--sp-1);
  margin-block-start: var(--sp-3);
  color: var(--text-soft);
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
}
.inspiration-free input,
.inspiration-quick-add :is(input, textarea) {
  inline-size: 100%;
  min-block-size: var(--touch-min);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 10px var(--sp-3);
  color: var(--text-strong);
  background: var(--surface-1);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
}
.inspiration-setup-more {
  margin-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line-soft);
}
.inspiration-more-topics { margin-block-start: var(--sp-2); }
.inspiration-more-topics > summary {
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  color: var(--text-soft);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.inspiration-setup-more > summary {
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  color: var(--text-soft);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.inspiration-setup-more[open] { padding-block-end: var(--sp-1); }
.inspiration-reference-fieldset { display: grid; gap: var(--sp-3); }
.inspiration-reference-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}
.inspiration-reference-head p {
  margin: 0;
  color: var(--text-soft);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
}
.inspiration-reference-head output {
  flex: none;
  color: var(--inspiration-mint);
  font: 850 var(--type-meta)/1 var(--font-data);
}
.inspiration-reference-list { display: grid; gap: var(--sp-2); }
.inspiration-reference-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr) var(--touch-min);
  gap: var(--sp-2);
  align-items: end;
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-1) 88%, var(--inspiration-mint) 4%);
}
.inspiration-reference-row label { display: grid; gap: 6px; min-inline-size: 0; }
.inspiration-reference-row label > span { color: var(--text-soft); font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); }
.inspiration-reference-row :is(input, textarea) {
  inline-size: 100%;
  min-block-size: var(--touch-min);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 9px var(--sp-3);
  color: var(--text-strong);
  background: var(--surface-0);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
  resize: vertical;
}
.inspiration-reference-row :is(input, textarea):focus-visible { outline: none; border-color: var(--inspiration-mint); box-shadow: var(--focus-ring); }
.inspiration-reference-remove {
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
}
.inspiration-reference-remove:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line-soft)); }
.inspiration-reference-add { justify-self: start; }
.inspiration-privacy {
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  border-block-start: 1px solid var(--line-soft);
  color: var(--text-soft);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
}
.inspiration-setup > .return-shelf-form-status { margin: 0; padding-inline: var(--sp-5); }
.inspiration-setup-actions {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
}
.inspiration-setup-actions .btn { min-block-size: var(--touch-min); }

.inspiration-profile-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 var(--sp-1);
}
.inspiration-profile-summary > div { min-inline-size: 0; }
.inspiration-profile-summary > .btn { flex: none; min-block-size: var(--touch-min); }

.inspiration-digest {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .88fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(0, auto));
  gap: var(--sp-3);
  align-items: stretch;
}
.inspiration-item {
  min-inline-size: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  color: var(--text-strong);
  background: var(--inspiration-paper);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  overflow: visible;
}
.inspiration-digest.should-enter .inspiration-item {
  animation: inspirationEnter var(--dur-normal) var(--ease-out) both;
  animation-delay: calc(var(--item-index, 0) * 38ms);
}
.inspiration-item.is-featured {
  grid-row: 1 / span 2;
  grid-template-rows: auto minmax(340px, 1fr) auto auto;
  padding: var(--sp-4);
}
.inspiration-item.is-done { border-color: color-mix(in srgb, var(--good) 44%, var(--line-soft)); }
.inspiration-item.is-done::after {
  content: "✓";
  position: absolute;
  inset: var(--sp-3) var(--sp-3) auto auto;
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--surface-0);
  background: var(--good);
  font-weight: 900;
  box-shadow: var(--shadow-card);
}
.inspiration-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--text-soft);
  font: 850 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: .035em;
  text-transform: uppercase;
}

.inspiration-visual {
  --visual-a: var(--inspiration-blue);
  --visual-b: var(--inspiration-violet);
  position: relative;
  min-block-size: 208px;
  display: grid;
  align-content: end;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--visual-a) 44%, transparent);
  border-radius: var(--radius-lg);
  color: #f8fbff;
  background:
    radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--visual-b) 66%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--visual-a) 44%, #11182b), #080c16 76%);
  isolation: isolate;
  overflow: hidden;
}
.inspiration-item.is-featured .inspiration-visual { min-block-size: clamp(340px, 43vw, 490px); block-size: 100%; padding: clamp(var(--sp-4), 3vw, var(--sp-6)); }
.inspiration-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 25%, rgba(3, 6, 14, .78));
  pointer-events: none;
}
.inspiration-visual-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: saturate(.84) contrast(1.06);
}
.inspiration-visual:has(.inspiration-visual-image) .inspiration-art { opacity: .22; }
.inspiration-visual :is(h3, p, blockquote) { position: relative; z-index: 2; }
.inspiration-visual h3 {
  margin: 0;
  color: #fff;
  font: 800 clamp(19px, 2.2vw, 31px)/var(--leading-display) var(--font-display);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.inspiration-item:not(.is-featured) .inspiration-visual h3 { font-size: clamp(18px, 1.6vw, 22px); }
.inspiration-visual-copy { display: grid; gap: var(--sp-2); }
.inspiration-visual-copy p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  color: rgba(244, 248, 255, .82);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
  overflow: hidden;
}
.inspiration-item.is-featured .inspiration-visual-copy p { -webkit-line-clamp: 4; max-inline-size: 58ch; font-size: var(--type-body); }
.inspiration-visual blockquote {
  max-inline-size: 23ch;
  margin: 0;
  color: #fff;
  font: 750 clamp(25px, 3.7vw, 47px)/1.12 var(--font-display);
  text-wrap: balance;
}
.inspiration-item:not(.is-featured) .inspiration-visual blockquote { font-size: clamp(21px, 2.5vw, 29px); }
.inspiration-attribution { margin: 0; color: rgba(244, 248, 255, .76); font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); }

.inspiration-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .82;
  pointer-events: none;
}
.inspiration-art::before,
.inspiration-art::after,
.inspiration-art :is(i, b) { content: ""; position: absolute; display: block; }
.inspiration-art::before {
  inset: 13% 10% auto auto;
  inline-size: 44%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, white 30%, transparent);
  border-radius: 50%;
}
.inspiration-art::after {
  inset: auto auto -21% -7%;
  inline-size: 76%;
  aspect-ratio: 1.7;
  border: 1px solid color-mix(in srgb, white 22%, transparent);
  border-radius: 50% 50% 0 0;
  transform: rotate(10deg);
}
.inspiration-art i:first-child {
  inset: 18% auto auto 12%;
  inline-size: 40%;
  block-size: 1px;
  background: color-mix(in srgb, white 45%, transparent);
  box-shadow: 0 12px 0 color-mix(in srgb, white 20%, transparent), 0 24px 0 color-mix(in srgb, white 12%, transparent);
  transform: rotate(-18deg);
}
.inspiration-art i:nth-child(2) {
  inset: 12% 22% auto auto;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--inspiration-amber);
  box-shadow: 0 0 24px color-mix(in srgb, var(--inspiration-amber) 78%, transparent);
}
.inspiration-art b {
  inset: 24% 28% auto auto;
  inline-size: 28%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, white 20%, transparent);
  border-radius: 8px;
  transform: rotate(24deg);
}
.inspiration-visual:is(.is-valley, .is-mountain, .is-room, .is-breath) { --visual-a: #318c73; --visual-b: #82b9e8; }
.inspiration-visual:is(.is-run, .is-stride, .is-pulse) { --visual-a: #b84b42; --visual-b: #f2b654; }
.inspiration-visual:is(.is-sun, .is-orbit, .is-signal) { --visual-a: #4b57a8; --visual-b: #d87ab8; }
.inspiration-visual:is(.is-cut, .is-hero, .is-forge) { --visual-a: #7351a7; --visual-b: #ec5e83; }
.inspiration-visual:is(.is-bunny, .is-hands, .is-map) { --visual-a: #3c7d8a; --visual-b: #b4a75c; }
.inspiration-visual:is(.is-ink, .is-paper, .is-voice) { --visual-a: #4f4a65; --visual-b: #a77f66; }

.inspiration-play {
  position: relative;
  z-index: 3;
  min-block-size: var(--touch-min);
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--radius-pill);
  padding: 7px var(--sp-3);
  color: #fff;
  background: rgba(4, 8, 18, .52);
  backdrop-filter: blur(9px);
  font: 850 var(--type-control)/var(--leading-ui) var(--font-ui);
  cursor: pointer;
}
.inspiration-play > span {
  inline-size: 25px;
  block-size: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--inspiration-ink);
  background: #fff;
  font-size: 10px;
}
.inspiration-visual iframe {
  position: absolute;
  inset: 0;
  z-index: 5;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  background: #000;
}
.inspiration-visual :is(.inspiration-media-close, [data-action="inspiration-media-close"]) {
  position: absolute;
  z-index: 6;
  inset: var(--sp-2) var(--sp-2) auto auto;
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
}

.inspiration-why {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px var(--sp-2);
  align-items: baseline;
  padding: 2px;
  overflow-wrap: anywhere;
}
.inspiration-why > span:first-child { color: var(--text-soft); font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); }
.inspiration-why > b { color: var(--text-strong); font: 800 var(--type-meta)/var(--leading-label) var(--font-ui); }
.inspiration-source {
  grid-column: 1 / -1;
  color: var(--text-soft);
  font: var(--type-floor)/var(--leading-label) var(--font-ui);
}
.inspiration-item-actions {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, auto) var(--touch-min);
  align-items: center;
  justify-content: start;
  gap: 6px;
  padding-block-start: var(--sp-1);
  border-block-start: 1px solid var(--line-soft);
}
.inspiration-item-actions :is(button, .btn),
.inspiration-save {
  min-block-size: var(--touch-min);
  min-inline-size: var(--touch-min);
  padding-inline: 11px;
  white-space: normal;
}
.inspiration-save {
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  background: transparent;
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.inspiration-item-actions :disabled { opacity: .58; cursor: default; }
.inspiration-item-more { position: relative; min-inline-size: var(--touch-min); }
.inspiration-item-more > summary {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  background: transparent;
  font: 900 var(--type-control)/1 var(--font-ui);
  cursor: pointer;
  list-style: none;
}
.inspiration-item-more > summary::-webkit-details-marker { display: none; }
.inspiration-item-more > div {
  position: absolute;
  z-index: 12;
  inset: auto 0 calc(100% + 7px) auto;
  inline-size: min(248px, calc(100vw - 40px));
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
.inspiration-menu-action {
  inline-size: 100%;
  min-block-size: var(--touch-min);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px var(--sp-3);
  color: var(--text-strong);
  background: transparent;
  text-align: start;
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.inspiration-menu-action.is-active,
.inspiration-menu-action[aria-pressed="true"] {
  color: var(--inspiration-mint);
  background: color-mix(in srgb, var(--inspiration-mint) 11%, transparent);
}
.inspiration-item-more > summary:focus-visible,
.inspiration-menu-action:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.inspiration-feedback-reason {
  display: grid;
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--inspiration-mint) 44%, var(--line-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--inspiration-mint) 7%, var(--surface-1));
}
.inspiration-feedback-reason > header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.inspiration-feedback-reason > header span {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--inspiration-mint);
  background: color-mix(in srgb, var(--inspiration-mint) 13%, transparent);
  font: 850 var(--type-meta)/1 var(--font-ui);
}
.inspiration-feedback-reason > header span.is-not_for_me {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 13%, transparent);
}
.inspiration-feedback-reason > header button {
  inline-size: var(--touch-min); block-size: var(--touch-min); border: 0; color: var(--text-soft); background: transparent; cursor: pointer;
}
.inspiration-feedback-reason label { display: grid; gap: 5px; }
.inspiration-feedback-reason label b { color: var(--text-strong); font: 850 var(--type-control)/var(--leading-ui) var(--font-ui); }
.inspiration-feedback-reason label small { color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }
.inspiration-feedback-reason textarea {
  inline-size: 100%; min-block-size: 86px; margin-block-start: 3px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 10px var(--sp-3); color: var(--text-strong); background: var(--surface-0); font: var(--type-control)/var(--leading-prose) var(--font-ui); resize: vertical;
}
.inspiration-feedback-reason textarea:focus-visible { outline: none; border-color: var(--inspiration-mint); box-shadow: var(--focus-ring); }
.inspiration-feedback-reason > div { display: flex; justify-content: end; flex-wrap: wrap; gap: var(--sp-2); }

.inspiration-terminal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-color: color-mix(in srgb, var(--good) 42%, var(--line-soft));
  background: color-mix(in srgb, var(--good) 7%, var(--surface-1));
}
.inspiration-terminal > span {
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--surface-0);
  background: var(--good);
  font-weight: 900;
}
.inspiration-terminal h3 { font-size: var(--type-heading); }
.inspiration-terminal p { margin: 3px 0 0; color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }
.inspiration-terminal .btn { min-block-size: var(--touch-min); }

.inspiration-state {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border-color: var(--inspiration-line);
  background: var(--surface-1);
}
.inspiration-state :is(h3, p) { margin: 0; }
.inspiration-state h3 { font-size: var(--type-heading); }
.inspiration-state p { max-inline-size: var(--measure-compact); color: var(--text-soft); line-height: var(--leading-prose); }
.inspiration-state.is-error { border-color: color-mix(in srgb, var(--bad) 55%, var(--line-soft)); }
.inspiration-state .btn { min-block-size: var(--touch-min); }

.inspiration-saved-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-1);
}
.inspiration-saved-head h3 { font-size: var(--type-title); }
.inspiration-saved-head p { max-inline-size: 62ch; margin: var(--sp-1) 0 0; color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }
.inspiration-saved-head > .btn { flex: none; min-block-size: var(--touch-min); }

.inspiration-quick-add {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-color: var(--inspiration-line);
  background: var(--inspiration-paper);
}
.inspiration-quick-add h3 { font-size: var(--type-heading); }
.inspiration-quick-add > label { display: grid; gap: var(--sp-1); color: var(--text-soft); font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); }
.inspiration-quick-add textarea { min-block-size: 90px; resize: vertical; }
.inspiration-quick-add > p { margin: 0; color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); }
.inspiration-quick-add > div:last-child { display: flex; justify-content: end; gap: var(--sp-2); }
.inspiration-quick-add .btn { min-block-size: var(--touch-min); }

.inspiration-saved-grid { display: grid; gap: var(--sp-2); }
.inspiration-saved-item {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-color: var(--line-soft);
  background: var(--surface-1);
}
.inspiration-saved-item > div:nth-child(2) { display: grid; align-content: center; gap: 3px; }
.inspiration-saved-item h3 { margin: 0; color: var(--text-strong); font: 800 var(--type-heading)/var(--leading-ui) var(--font-display); overflow-wrap: anywhere; }
.inspiration-saved-item > div:nth-child(2) > p { margin: 0; color: var(--text-soft); font: var(--type-meta)/var(--leading-prose) var(--font-ui); overflow-wrap: anywhere; }
.inspiration-format-label { color: var(--inspiration-mint); font: 900 var(--type-floor)/var(--leading-label) var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.inspiration-saved-item .inspiration-visual,
.inspiration-saved-preview,
.inspiration-saved-quote {
  min-block-size: 118px;
  block-size: 118px;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.inspiration-saved-item .inspiration-visual { padding: var(--sp-3); }
.inspiration-saved-item .inspiration-visual-copy p,
.inspiration-saved-item .inspiration-why { display: none; }
.inspiration-saved-item .inspiration-visual h3 { font-size: var(--type-heading); }
.inspiration-saved-item .inspiration-visual blockquote { font-size: var(--type-heading); }
.inspiration-saved-preview { display: grid; place-items: center; border: 1px solid var(--line-soft); background: var(--surface-2); }
.inspiration-saved-preview img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.inspiration-saved-preview > span { max-inline-size: 90%; color: var(--text-soft); font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); overflow-wrap: anywhere; }
.inspiration-saved-quote { display: grid; align-content: center; padding: var(--sp-3); color: var(--text-strong); background: color-mix(in srgb, var(--inspiration-violet) 10%, var(--surface-2)); font: 750 var(--type-control)/var(--leading-prose) var(--font-display); overflow-wrap: anywhere; }
.inspiration-saved-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--sp-1); }
.inspiration-saved-actions .btn { min-block-size: var(--touch-min); }

.inspiration-archive { padding: 0; overflow: clip; }
.inspiration-archive > summary {
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  padding: var(--sp-3);
  color: var(--text-strong);
  font: 850 var(--type-control)/var(--leading-ui) var(--font-ui);
  cursor: pointer;
}
.inspiration-archive > div { display: grid; padding: 0 var(--sp-3) var(--sp-3); }
.inspiration-archive > div > p {
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0;
  padding-block: var(--sp-2);
  border-block-start: 1px solid var(--line-soft);
}
.inspiration-archive > div > p > span { min-inline-size: 0; color: var(--text-strong); font: 750 var(--type-control)/var(--leading-ui) var(--font-ui); overflow-wrap: anywhere; }
.inspiration-archive .btn { flex: none; min-block-size: var(--touch-min); }

.inspiration-shell :is(button, input, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@keyframes inspirationEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes inspirationPulseOnce {
  0% { filter: saturate(.78); }
  55% { filter: saturate(1.28) brightness(1.08); }
  100% { filter: saturate(1); }
}

.inspiration-visual.is-playing { animation: inspirationPulseOnce var(--dur-normal) var(--ease-out) both; }

@media (hover: hover) and (pointer: fine) {
  .inspiration-tabs button,
  .inspiration-close,
  .inspiration-choice,
  .inspiration-format-choice,
  .inspiration-play,
  .inspiration-save,
  .inspiration-saved-item {
    transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .inspiration-tabs button:hover,
  .inspiration-close:hover,
  .inspiration-save:hover { color: var(--text-strong); }
  .inspiration-choice:hover,
  .inspiration-format-choice:hover { border-color: var(--line-strong); transform: translateY(-1px); }
  .inspiration-play:hover { border-color: #fff; background: rgba(4, 8, 18, .7); }
  .inspiration-saved-item:hover { border-color: var(--line-strong); }
}

@media (max-width: 900px) {
  .inspiration-first-use { grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); }
  .inspiration-first-visual { min-block-size: 250px; }
  .inspiration-digest { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-auto-flow: row; }
  .inspiration-item.is-featured { grid-row: auto; grid-template-rows: auto; }
  .inspiration-item.is-featured .inspiration-visual { min-block-size: min(54vw, 440px); }
  .inspiration-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspiration-saved-item { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); }
  .inspiration-saved-actions { grid-column: 2; justify-content: start; }
}

@media (max-width: 600px) {
  .inspiration-shell {
    gap: var(--sp-3);
    padding-block-end: calc(78px + env(safe-area-inset-bottom));
    overflow-x: clip;
  }
  .inspiration-head {
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-2) var(--sp-4);
  }
  .inspiration-head > .btn { grid-column: 1 / -1; inline-size: 100%; }
  .inspiration-head h2 { font-size: clamp(28px, 10vw, 38px); }
  .inspiration-mark { inline-size: 46px; block-size: 46px; border-radius: 15px; }
  .inspiration-mark i { inset: 10px 8px auto 12px; }
  .inspiration-mark b { inset: 20px 11px auto 8px; }
  .inspiration-mark em { inset: 30px 7px auto 14px; }
  .inspiration-tabs { gap: var(--sp-2); padding-inline: 0; }
  .inspiration-tabs button { flex: 1 1 50%; justify-content: center; padding-inline: var(--sp-1); }
  .inspiration-first-use { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-3); }
  .inspiration-first-visual { min-block-size: 210px; }
  .inspiration-first-use h3 { font-size: clamp(28px, 9vw, 38px); }
  .inspiration-first-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .inspiration-first-actions .btn { inline-size: 100%; }
  .inspiration-importer { padding: var(--sp-3); }
  .inspiration-importer > header { display: grid; }
  .inspiration-import-local { max-inline-size: none; justify-self: start; }
  .inspiration-import-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .inspiration-import-actions :is(.btn, a) { inline-size: 100%; }
  .inspiration-import-guide { padding: var(--sp-3); }
  .inspiration-import-guide-head { display: grid; align-items: start; }
  .inspiration-device-switch { inline-size: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inspiration-device-switch button { min-inline-size: 0; padding-inline: 4px; }
  .inspiration-import-direct { display: grid; }
  .inspiration-import-direct > .btn { inline-size: 100%; }
  .inspiration-import-route { display: grid; gap: 5px; }
  .inspiration-import-route > div { min-block-size: 46px; }
  .inspiration-import-route > i { display: none; }
  .inspiration-import-guide-steps { grid-template-columns: minmax(0, 1fr); }
  .inspiration-import-guide-steps > article { padding: var(--sp-2); }
  .inspiration-import-guide-steps .inspiration-import-file-button { inline-size: 100%; }
  .inspiration-import-guide footer { display: grid; }
  .inspiration-import-links > div { display: grid; grid-template-columns: minmax(0, 1fr); }
  .inspiration-import-links .btn { inline-size: 100%; }
  .inspiration-import-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspiration-setup > header,
  .inspiration-setup fieldset { padding: var(--sp-3); }
  .inspiration-privacy { padding: var(--sp-3); }
  .inspiration-setup > .return-shelf-form-status { padding-inline: var(--sp-3); }
  .inspiration-setup-actions { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--sp-3); }
  .inspiration-setup-actions .btn { inline-size: 100%; }
  .inspiration-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspiration-choice { padding-inline: var(--sp-2); }
  .inspiration-choice small { display: none; }
  .inspiration-format-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspiration-format-choice:last-child { grid-column: 1 / -1; }
  .inspiration-reference-head { align-items: start; }
  .inspiration-reference-row { grid-template-columns: minmax(0, 1fr) var(--touch-min); }
  .inspiration-reference-row label { grid-column: 1 / -1; }
  .inspiration-reference-remove { grid-column: 2; grid-row: 1; justify-self: end; }
  .inspiration-reference-row :is(input, textarea),
  .inspiration-feedback-reason textarea { font-size: max(16px, var(--type-control)); }
  .inspiration-feedback-reason > div { display: grid; grid-template-columns: minmax(0, 1fr); }
  .inspiration-feedback-reason .btn { inline-size: 100%; }
  .inspiration-free input,
  .inspiration-quick-add :is(input, textarea) { font-size: max(16px, var(--type-control)); }
  .inspiration-profile-summary { align-items: start; }
  .inspiration-profile-summary > div > span:nth-child(n+4) { display: none; }
  .inspiration-item,
  .inspiration-item.is-featured { padding: var(--sp-2); border-radius: var(--radius-lg); }
  .inspiration-visual,
  .inspiration-item.is-featured .inspiration-visual { min-block-size: clamp(270px, 88vw, 390px); padding: var(--sp-3); }
  .inspiration-visual blockquote,
  .inspiration-item:not(.is-featured) .inspiration-visual blockquote { font-size: clamp(25px, 8vw, 37px); }
  .inspiration-visual h3,
  .inspiration-item:not(.is-featured) .inspiration-visual h3 { font-size: clamp(21px, 6.2vw, 27px); }
  .inspiration-item-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--touch-min); }
  .inspiration-item-actions :is(button, .btn),
  .inspiration-save { inline-size: 100%; padding-inline: var(--sp-1); }
  .inspiration-why { grid-template-columns: minmax(0, 1fr); }
  .inspiration-terminal { grid-template-columns: auto minmax(0, 1fr); }
  .inspiration-terminal .btn { grid-column: 1 / -1; inline-size: 100%; }
  .inspiration-saved-head { display: grid; align-items: start; }
  .inspiration-saved-head > .btn { inline-size: 100%; }
  .inspiration-quick-add { padding: var(--sp-3); }
  .inspiration-quick-add > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspiration-saved-item { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .inspiration-saved-item .inspiration-visual,
  .inspiration-saved-preview,
  .inspiration-saved-quote { block-size: auto; min-block-size: 180px; }
  .inspiration-saved-actions { grid-column: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspiration-saved-actions .btn { inline-size: 100%; }
  .inspiration-archive > div > p { align-items: start; }
  .inspiration-shell :is(button, input, textarea, summary, .inspiration-choice, .inspiration-format-choice) { min-block-size: var(--touch-min); }
}

@media (max-width: 374px) {
  .inspiration-head { padding-inline: var(--sp-1); }
  .inspiration-head p:last-child { font-size: var(--type-control); }
  .inspiration-profile-summary { display: grid; }
  .inspiration-profile-summary > .btn { inline-size: 100%; }
  .inspiration-quick-add > div:last-child,
  .inspiration-saved-actions { grid-template-columns: minmax(0, 1fr); }
  .inspiration-visual,
  .inspiration-item.is-featured .inspiration-visual { min-block-size: 260px; }
}

@media (pointer: coarse) {
  .inspiration-shell :is(button, input, textarea, summary, .inspiration-choice, .inspiration-format-choice) { min-block-size: var(--touch-min); }
}

@media (prefers-reduced-motion: reduce) {
  .inspiration-import-status > span,
  .inspiration-shell *,
  .inspiration-shell *::before,
  .inspiration-shell *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   Interface hierarchy v203 — reveal complexity after intent.
   Shared geometry for Today, Calendar, Inspiration and Board.
   ========================================================== */

/* Removing the persistent sphere dashboard must reclaim real space, not leave
   a shell-sized gap behind it. */
.char-summary { margin-block-start: var(--sp-2); }
#nav { margin-block-start: var(--sp-2); }

/* Shared containment: a long translated sphere name may wrap inside its field,
   but may never make the form or the document wider. */
.sphere-field,
.sphere-trigger,
.sphere-trigger-value,
.sphere-summary-chip,
.sphere-summary-chip > span {
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
}
.sphere-trigger { inline-size: 100%; }
.sphere-trigger-value { overflow: hidden; }
.sphere-summary-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sphere-panel {
  max-inline-size: min(560px, calc(100vw - (2 * var(--sp-3))));
  overscroll-behavior: contain;
}
.calendar-day-support .sphere-panel { inset-inline: auto 0; }
.cat-chip-confirm {
  border-color: color-mix(in srgb, var(--good) 58%, var(--line-soft));
  color: var(--text-strong);
  background: color-mix(in srgb, var(--good) 10%, var(--surface-2));
  cursor: default;
  pointer-events: none;
}

/* Today: support stays readable, but never competes with the actual work. */
.today-support .secretary-summary.comp-row {
  grid-template-columns: 58px minmax(0, 1fr) var(--touch-min);
}
.today-support .secretary-toggle {
  inline-size: var(--touch-min);
  padding: 0;
  display: grid;
  place-items: center;
}
.today-support .secretary-toggle-copy { display: none; }
.today-support .secretary-summary .comp-line {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.today-support .secretary-control :is(b, small) {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Core is a stable hierarchy state, not an ornamental stripe crossing the
   completion control. Every row reserves the same border geometry. */
.card-quests .task {
  grid-template-columns: var(--touch-min) minmax(0, 1fr) auto auto auto auto var(--touch-min);
  gap: var(--sp-2);
  margin-block: 2px;
  padding: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--line-soft);
}
.card-quests .task:last-child { box-shadow: none; }
.card-quests .task.is-core {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line-soft));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, var(--surface-2)), color-mix(in srgb, var(--accent) 4%, var(--surface-1)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 11%, transparent);
}
.card-quests .task.is-core.done {
  border-color: color-mix(in srgb, var(--good) 56%, var(--line-soft));
  background: color-mix(in srgb, var(--good) 8%, var(--surface-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 10%, transparent);
}
.card-quests .task .check {
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
}
.card-quests .task > .t-title {
  min-inline-size: 0;
  display: grid;
  gap: 4px;
}
.task-core-badge {
  inline-size: max-content;
  max-inline-size: 100%;
  min-block-size: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-inline: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line-soft));
  border-radius: var(--radius-pill);
  color: var(--today-kicker-fg);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  font: 850 var(--type-floor)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.task.is-core .t-title-edit { color: var(--text-strong); font-weight: 750; }
.t-cat-more {
  min-block-size: 22px;
  display: inline-flex;
  align-items: center;
  padding-inline: 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  font: 750 var(--type-floor)/1 var(--font-ui);
}
.t-diff {
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-3) 72%, transparent);
}
.t-diff .task-difficulty-icon { inline-size: 24px; block-size: 24px; }

/* Quick capture shows the decision first; estimates and explanation are a
   second step. The same disclosure treatment is used in Calendar. */
.card-addquest .add-row {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto;
  align-items: end;
  gap: var(--sp-2);
}
.card-addquest .add-field-title { grid-column: 1; grid-row: 1; }
.card-addquest .add-field-skill { grid-column: 2; grid-row: 1; }
.card-addquest .add-submit { grid-column: 3; grid-row: 1; min-block-size: var(--touch-min); }
.quest-add-options,
.calendar-add-options {
  min-inline-size: 0;
  border-block-start: 1px solid var(--line-soft);
}
.quest-add-options { grid-column: 1 / -1; grid-row: 2; }
.quest-add-options > summary,
.calendar-add-options > summary,
.difficulty-help > summary {
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  list-style: none;
  color: var(--text-soft);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.quest-add-options > summary::-webkit-details-marker,
.calendar-add-options > summary::-webkit-details-marker,
.difficulty-help > summary::-webkit-details-marker { display: none; }
.quest-add-options > summary::after,
.calendar-add-options > summary::after,
.difficulty-help > summary::after { content: '⌄'; color: var(--accent); }
.quest-add-options[open] > summary::after,
.calendar-add-options[open] > summary::after,
.difficulty-help[open] > summary::after { content: '⌃'; }
.quest-add-options-body {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, .72fr);
  gap: var(--sp-2);
  padding-block-start: var(--sp-2);
}
.quest-add-options-body .difficulty-help { grid-column: 1 / -1; }
.difficulty-help { min-inline-size: 0; }
.difficulty-help .diff-hint {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-block-start: var(--sp-1);
}
.difficulty-help .diff-hint > span {
  min-inline-size: 0;
  min-block-size: var(--touch-min);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  overflow-wrap: break-word;
}
.difficulty-help .task-difficulty-icon { inline-size: 25px; block-size: 25px; }

/* Calendar header: date is two semantic lines, controls have their own space,
   and the three modes remain one segmented control with visible separators. */
.calendar-shell .calv-title {
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 250px) minmax(300px, auto);
  gap: var(--sp-2);
}
.calendar-shell .calv-title-main {
  grid-template-columns: var(--touch-min) minmax(180px, 1fr) var(--touch-min) auto;
  gap: var(--sp-1);
}
.calendar-shell .calv-title h2 {
  display: grid;
  gap: 2px;
  overflow-wrap: normal;
  word-break: normal;
}
.cal-date-primary { white-space: nowrap; }
.cal-date-meta {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  color: var(--text-soft);
  font: 700 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-natural);
}
.calendar-shell .cal-date-meta .wk-load {
  padding: 0;
  font-size: inherit;
}
.calendar-shell .cal-modes { gap: 0; overflow: clip; }
.calendar-shell .cal-mode {
  position: relative;
  border: 1px solid transparent;
  border-radius: 0;
}
.calendar-shell .cal-mode:not(:first-child)::before {
  content: '';
  position: absolute;
  inset-block: 9px;
  inset-inline-start: -1px;
  inline-size: 1px;
  background: var(--line-soft);
}
.calendar-shell .cal-mode:first-child { border-start-start-radius: calc(var(--radius-md) - 1px); border-end-start-radius: calc(var(--radius-md) - 1px); }
.calendar-shell .cal-mode:last-child { border-start-end-radius: calc(var(--radius-md) - 1px); border-end-end-radius: calc(var(--radius-md) - 1px); }
.calendar-shell .cal-mode.active { z-index: 1; border-radius: calc(var(--radius-md) - 1px); }
.calendar-shell .cal-mode.active::before,
.calendar-shell .cal-mode.active + .cal-mode::before { opacity: 0; }
.calendar-shell .cal-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: end;
  gap: var(--sp-1);
}
.calendar-shell .cal-tools > button { padding: var(--sp-1) var(--sp-2); }
.calendar-shell .cal-tool-copy { display: inline; }

.calendar-add-card .calendar-add-form { grid-template-columns: minmax(0, 1fr); }
.calendar-add-form :is(.add-field-title, .add-field-time, .calendar-add-options) { grid-column: 1; }
.calendar-add-form > button { grid-column: 1; }
.calendar-add-options-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding-block-start: var(--sp-2);
}
.calendar-add-options-body .add-field { grid-column: 1; }

/* Inspiration: one aligned URL field first; optional meaning and storage
   details remain available without repeating themselves in the main contour. */
.inspiration-reference-head { align-items: center; }
.inspiration-reference-storage { min-inline-size: 0; }
.inspiration-reference-storage > summary,
.inspiration-reference-why > summary {
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  color: var(--text-soft);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  cursor: pointer;
}
.inspiration-reference-storage > summary::-webkit-details-marker,
.inspiration-reference-why > summary::-webkit-details-marker { display: none; }
.inspiration-reference-storage > summary::after,
.inspiration-reference-why > summary::after { content: '⌄'; color: var(--inspiration-mint); }
.inspiration-reference-storage[open] > summary::after,
.inspiration-reference-why[open] > summary::after { content: '⌃'; }
.inspiration-reference-storage > p {
  max-inline-size: var(--measure-prose);
  margin: 0 0 var(--sp-2);
  color: var(--text-soft);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
}
.inspiration-reference-row {
  grid-template-columns: minmax(260px, 1fr) minmax(220px, .8fr) var(--touch-min);
  align-items: start;
}
.inspiration-reference-url,
.inspiration-reference-why { min-inline-size: 0; }
.inspiration-reference-why > summary span { color: var(--muted); font-weight: 650; }
.inspiration-reference-why label { margin-block-start: var(--sp-1); }

/* Wildcard is a two-step chooser. The initial view contains ideas only; the
   selected idea owns one detail form and one primary action. */
.board-wildcard-ideas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.board-wildcard-idea {
  min-inline-size: 0;
  min-block-size: 88px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--surface-1);
  font-family: var(--font-ui);
  text-align: start;
  cursor: pointer;
}
.board-wildcard-idea > span:nth-child(2) { min-inline-size: 0; display: grid; gap: 3px; }
.board-wildcard-idea b { color: var(--text-strong); font: 800 var(--type-control)/var(--leading-ui) var(--font-ui); overflow-wrap: break-word; }
.board-wildcard-idea small { margin: 0; font: var(--type-meta)/var(--leading-ui) var(--font-ui); overflow-wrap: break-word; }
.board-wildcard-idea em { color: var(--good); font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); }
.board-wildcard-idea-index {
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--board-gold) 46%, var(--line-soft));
  border-radius: 50%;
  color: var(--board-gold);
  font: 850 var(--type-meta)/1 var(--font-data);
}
.board-wildcard-idea:is(:hover, :focus-visible, .is-selected) {
  border-color: color-mix(in srgb, var(--board-gold) 62%, var(--line-strong));
  background: color-mix(in srgb, var(--board-gold) 7%, var(--surface-1));
}
.board-wildcard form {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}
.board-wildcard-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.board-wildcard-detail-head > span { color: var(--muted); font: 750 var(--type-meta)/var(--leading-label) var(--font-ui); }
.board-wildcard-detail { min-inline-size: 0; }
.board-wildcard-detail,
.quest-add-options[open] .quest-add-options-body,
.calendar-add-options[open] .calendar-add-options-body,
.inspiration-reference-why[open] label,
.inspiration-reference-storage[open] > p {
  animation: hierarchy-reveal 180ms var(--ease-out, ease-out) both;
}
.cat-chip-confirm { animation: hierarchy-receipt 240ms var(--ease-out, ease-out) both; }
@keyframes hierarchy-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hierarchy-receipt {
  0% { opacity: .64; transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}
.board-wildcard-detail fieldset { display: grid; gap: var(--sp-2); }
.board-wildcard-detail fieldset > label { margin: 0; }
.board-wildcard-actions { grid-column: 1; }

@media (max-width: 900px) {
  .calendar-shell .calv-title { grid-template-columns: minmax(0, 1fr); }
  .calendar-shell .cal-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .calendar-shell .cal-tool-copy { display: inline; }
}

@media (max-width: 720px) {
  .card-addquest .add-row { grid-template-columns: minmax(0, 1fr); }
  .card-addquest :is(.add-field-title, .add-field-skill, .quest-add-options, .add-submit) { grid-column: 1; grid-row: auto; }
  .card-addquest .add-submit { inline-size: 100%; }
  .quest-add-options-body,
  .difficulty-help .diff-hint { grid-template-columns: minmax(0, 1fr); }

  .card-quests .task {
    grid-template-columns: var(--touch-min) minmax(0, 1fr) auto var(--touch-min) var(--touch-min);
    grid-template-rows: auto auto;
    gap: 6px var(--sp-1);
  }
  .card-quests .task .check { grid-column: 1; grid-row: 1 / 3; }
  .card-quests .task > .t-title { grid-column: 2 / 5; grid-row: 1; }
  .card-quests .task .task-more { grid-column: 5; grid-row: 1; }
  .card-quests .task .t-cats { grid-column: 2; grid-row: 2; }
  .card-quests .task .t-time { grid-column: 3; grid-row: 2; }
  .card-quests .task .t-diff { grid-column: 4; grid-row: 2; }
  .card-quests .task :is(.t-xp, .t-oath, .t-oath-btn) { grid-column: 5; grid-row: 2; }
  .task-core-badge { margin-block-end: 2px; }

  .board-wildcard-ideas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .calendar-shell .calv-title-main { grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min); }
  .calendar-shell .calv-title h2 { text-align: center; }
  .cal-date-primary { white-space: normal; }
  .cal-date-meta { justify-content: center; }
  .calendar-shell .cal-date-meta .wk-load { display: none; }
  .calendar-shell .cal-tool-copy { display: inline; }

  .inspiration-reference-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .inspiration-reference-storage { grid-column: 1; }
  .inspiration-reference-row { grid-template-columns: minmax(0, 1fr) var(--touch-min); }
  .inspiration-reference-url,
  .inspiration-reference-why { grid-column: 1 / -1; }
  .inspiration-reference-remove { grid-column: 2; grid-row: 1; justify-self: end; }

  .board-wildcard { padding: var(--sp-3); }
  .board-wildcard > header,
  .board-wildcard-detail-head,
  .board-wildcard-actions { align-items: stretch; flex-direction: column; }
  .board-wildcard-idea { min-block-size: var(--touch-min); grid-template-columns: 30px minmax(0, 1fr) auto; }
  .board-wildcard-detail fieldset { padding: var(--sp-2); }
  .board-wildcard-actions .btn { inline-size: 100%; }
}

@media (pointer: coarse) {
  .board-wildcard-idea,
  .quest-add-options > summary,
  .calendar-add-options > summary,
  .difficulty-help > summary,
  .inspiration-reference-storage > summary,
  .inspiration-reference-why > summary { min-block-size: var(--touch-min); }
}

@media (prefers-reduced-motion: reduce) {
  .task-core-badge,
  .card-quests .task,
  .board-wildcard-idea,
  .board-wildcard-detail,
  .cat-chip-confirm,
  .quest-add-options *,
  .calendar-add-options *,
  .inspiration-reference-row * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================================== */
/* Skill Tree v4 — real capability path first, game practices second.          */
/* Final authoritative layer: keep after the legacy tree/craft selectors.      */
/* ========================================================================== */

.tree-shell {
  --tree-v4-path-fg: var(--tree-milestone-fg);
  --tree-v4-path-border: var(--tree-milestone-border);
  --tree-v4-path-surface: var(--tree-capstone-surface);
  --tree-v4-earned-fg: var(--tree-unlocked-fg);
  --tree-v4-earned-border: var(--tree-unlocked-border);
  --tree-v4-earned-surface: var(--tree-unlocked-surface);
  --tree-v4-practice-fg: var(--tree-available-fg);
  --tree-v4-practice-border: var(--tree-available-border);
  --tree-v4-practice-surface: var(--tree-available-surface);
}

.tree-v4-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-inline-size: 0;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.tree-v4-tab {
  position: relative;
  min-inline-size: 0;
  min-block-size: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  appearance: none;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - var(--sp-1));
  background: transparent;
  color: var(--text-soft);
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.tree-v4-tab:is(.active, [aria-selected="true"], [aria-pressed="true"]) {
  border-color: var(--tree-tab-active-border);
  background: var(--tree-tab-active-surface);
  color: var(--tree-tab-active-fg);
  box-shadow: inset 0 -3px 0 var(--tree-tab-active-border);
}

.tree-v4-tab.is-active {
  border-color: var(--tree-tab-active-border);
  background: var(--tree-tab-active-surface);
  color: var(--tree-tab-active-fg);
  box-shadow: inset 0 -3px 0 var(--tree-tab-active-border);
}

.tree-v4-tab:disabled {
  cursor: not-allowed;
  opacity: 1;
  color: var(--tree-locked-fg);
}

.tree-v4-note {
  max-inline-size: var(--measure-compact);
  margin: 0;
  color: var(--tree-meta-fg);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-v4-note strong { color: var(--text-strong); font-weight: 800; }

.tree-v4-path,
.tree-v4-practices {
  min-inline-size: 0;
  display: grid;
  gap: var(--sp-3);
}

.tree-v4-path[hidden],
.tree-v4-practices[hidden] { display: none !important; }

.tree-v4-next {
  position: relative;
  min-inline-size: 0;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tree-v4-path-border) 58%, var(--line-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--tree-v4-path-surface) 72%, var(--surface-2));
  color: var(--tree-v4-path-fg);
  box-shadow: none;
}

.tree-v4-next::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--sp-1);
  background: var(--tree-v4-path-border);
  content: "";
}

.tree-v4-next > header,
.tree-v4-trace > header,
.tree-v4-next-head,
.tree-v4-section-head {
  min-inline-size: 0;
  display: grid;
  gap: var(--sp-1);
}

.tree-v4-next :is(.tree-v4-kicker, header > small, header > span:first-child),
.tree-v4-trace :is(.tree-v4-kicker, header > small, header > span:first-child),
.tree-claim-kicker {
  color: var(--tree-v4-path-fg);
  font: 850 var(--type-meta)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.tree-v4-next :is(h3, h4),
.tree-v4-trace :is(h3, h4) {
  margin: 0;
  color: var(--text-strong);
  font: 800 var(--type-heading)/var(--leading-ui) var(--font-ui);
  letter-spacing: var(--tracking-natural);
  overflow-wrap: anywhere;
}

.tree-v4-next.is-complete {
  border-color: color-mix(in srgb, var(--tree-v4-earned-border) 58%, var(--line-soft));
  background: color-mix(in srgb, var(--tree-v4-earned-surface) 72%, var(--surface-2));
}

.tree-v4-next.is-complete::before { background: var(--tree-v4-earned-border); }
.tree-v4-next.is-complete .tree-v4-kicker { color: var(--tree-v4-earned-fg); }

.tree-v4-next.is-empty {
  border-style: dashed;
  border-color: var(--tree-locked-border);
  background: var(--tree-locked-surface);
}

.tree-v4-next > p,
.tree-v4-next > header > p {
  max-inline-size: var(--measure-compact);
  margin: 0;
  color: var(--tree-meta-fg);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-v4-next-grid {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.tree-v4-next-grid > * {
  min-inline-size: 0;
  display: grid;
  align-content: start;
  gap: var(--sp-1);
  margin: 0;
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid color-mix(in srgb, var(--tree-v4-path-border) 54%, var(--line-soft));
  background: transparent;
}

.tree-v4-next-grid :is(dt, b, strong, .tree-v4-label) {
  margin: 0;
  color: var(--tree-v4-path-fg);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
}

.tree-v4-next-grid :is(dd, p, span:not(.tree-v4-label)) {
  min-inline-size: 0;
  margin: 0;
  color: var(--text);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-v4-actions {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.tree-v4-actions :is(button, .btn, a[role="button"]) {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  white-space: normal;
  overflow-wrap: anywhere;
}

.tree-v4-trace {
  min-inline-size: 0;
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

.tree-v4-trace-list {
  min-inline-size: 0;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree-v4-trace-item {
  position: relative;
  min-inline-size: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-1);
  margin: 0;
  padding: var(--sp-2) 0 var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--text);
}

.tree-v4-trace-item:last-child { padding-block-end: 0; }

.tree-v4-trace-item::before {
  position: absolute;
  inset-block: calc(var(--sp-2) + 24px) 0;
  inset-inline-start: 11px;
  inline-size: 2px;
  border: 0;
  border-radius: 0;
  background: var(--tree-v4-earned-border);
  box-shadow: none;
  content: "";
}

.tree-v4-trace-item:last-child::before { display: none; }

.tree-v4-trace-state {
  position: relative;
  z-index: 1;
  inline-size: 24px;
  block-size: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tree-v4-earned-border);
  border-radius: 50%;
  background: var(--tree-v4-earned-surface);
  color: var(--tree-v4-earned-fg);
  font: 850 var(--type-meta)/1 var(--font-ui);
}

.tree-v4-trace-item > div { min-inline-size: 0; display: grid; gap: var(--sp-1); }

.tree-v4-trace-item :is(h4, b, strong) {
  margin: 0;
  color: var(--text-strong);
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-v4-trace-meta {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  flex-wrap: wrap;
  color: var(--tree-v4-earned-fg);
  font: 750 var(--type-meta)/var(--leading-label) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-v4-proof {
  max-inline-size: var(--measure-compact);
  margin: 0;
  color: var(--tree-meta-fg);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-v4-future {
  min-inline-size: 0;
  align-self: start;
  border-block: 1px solid var(--line-soft);
  background: transparent;
}

.tree-v4-future > summary {
  min-inline-size: 0;
  min-block-size: var(--touch-min);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  color: var(--text-strong);
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
  list-style: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.tree-v4-future > summary::-webkit-details-marker { display: none; }
.tree-v4-future > summary::after {
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  display: grid;
  place-items: center;
  color: var(--tree-meta-fg);
  font: 850 var(--type-heading)/1 var(--font-ui);
  content: "+";
}
.tree-v4-future[open] > summary::after { content: "−"; }

.tree-v4-future-list {
  min-inline-size: 0;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0 var(--sp-2);
  list-style: none;
}

.tree-v4-future-item {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-block-start: 1px solid var(--line-soft);
  color: var(--tree-locked-fg);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-v4-future-item::before {
  content: none;
}

.tree-v4-future-item > span:first-child {
  align-self: start;
  color: var(--tree-locked-border);
  font: 850 var(--type-meta)/var(--leading-prose) var(--font-ui);
  text-align: center;
}

.tree-v4-future-item > div { min-inline-size: 0; display: grid; gap: var(--sp-1); }

.tree-v4-future-item h4 {
  margin: 0;
  color: var(--text-strong);
  font: 800 var(--type-control)/var(--leading-ui) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-v4-future-item p {
  margin: 0;
  color: var(--tree-locked-fg);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-v4-future-item :is(b, strong) {
  color: var(--text-strong);
  font-weight: 800;
}

.tree-v4-practices { align-content: start; }

.tree-v4-practices > .tree-v4-note {
  inline-size: 100%;
  max-inline-size: none;
  padding: var(--sp-3);
  border-inline-start: 3px solid var(--tree-v4-practice-border);
  background: color-mix(in srgb, var(--tree-v4-practice-surface) 68%, var(--surface-2));
  color: var(--tree-v4-practice-fg);
}

.tree-v4-practice-map {
  min-inline-size: 0;
  display: block;
}

.tree-v4-practice-map .tree-map-card {
  margin: 0;
  border-color: var(--line-soft);
  background: var(--surface-2);
}

.tree-v4-practices .tree-active {
  color: var(--tree-meta-fg);
}

/* The semantic type remains visible without adding a fifth in-node row. */
.tree-v4-practice-map .tn-kind {
  position: absolute;
  z-index: 3;
  inset-block-start: -17px;
  inset-inline-start: var(--sp-1);
  max-inline-size: calc(100% - var(--sp-2));
  padding: 1px var(--sp-1);
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: var(--tree-node-surface);
  color: inherit;
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tree-v4-practice-map .tree-node.capstone .tn-kind {
  max-inline-size: calc(100% - 38px);
}

.tree-v4-practice-map .tree-node.capstone .tn-crown {
  inset-inline-start: auto;
  inset-inline-end: var(--sp-1);
  transform: none;
}

.tree-detail-capability p {
  margin: var(--sp-1) 0 0;
  color: var(--tree-meta-fg);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-panel .tp-grid :is(input, select, textarea) {
  inline-size: 100%;
  min-inline-size: 0;
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
}

/* Milestone claim is an evidence sheet, not a reward ceremony. */
#ms-claim .tree-claim-box,
.tree-v4-claim,
.tree-claim-box {
  inline-size: min(100%, 620px);
  max-block-size: min(88dvh, 760px);
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--tree-v4-path-border, var(--tree-milestone-border));
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-raised);
  color: var(--text);
}

.tree-claim-box :is(h2, h3),
.tree-v4-claim :is(h2, h3) {
  max-inline-size: var(--measure-compact);
  margin: 0;
  color: var(--text-strong);
  font: 800 var(--type-title)/var(--leading-display) var(--font-display);
  letter-spacing: var(--tracking-natural);
  overflow-wrap: anywhere;
}

.tree-claim-box > .sg-what { margin: 0; }

.tree-claim-kicker { color: var(--tree-milestone-fg); }

.tree-claim-criterion {
  min-inline-size: 0;
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: var(--sp-3);
  border: 0;
  border-inline-start: 3px solid var(--tree-milestone-border);
  background: color-mix(in srgb, var(--tree-capstone-surface) 68%, var(--surface-2));
  color: var(--text);
  font: var(--type-body)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-claim-criterion :is(b, strong, .tree-v4-label) {
  color: var(--tree-milestone-fg);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
}

.tree-claim-criterion p { margin: 0; }

.tree-claim-proof {
  min-inline-size: 0;
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  color: var(--text-soft);
  font: 800 var(--type-meta)/var(--leading-label) var(--font-ui);
}

.tree-claim-proof :is(input, textarea) {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--touch-min);
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--tree-detail-border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text);
  font: var(--type-control)/var(--leading-prose) var(--font-ui);
  resize: vertical;
}

.tree-claim-proof textarea { min-block-size: calc(var(--touch-min) * 2); }

.tree-claim-proof small {
  color: var(--tree-meta-fg);
  font: 400 var(--type-meta)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-claim-status {
  min-block-size: calc(var(--type-meta) * var(--leading-prose));
  margin: 0;
  color: var(--tree-meta-fg);
  font: var(--type-meta)/var(--leading-prose) var(--font-ui);
  overflow-wrap: anywhere;
}

.tree-claim-status:is(.is-error, [data-state="error"]) { color: var(--bad); }
.tree-claim-status:is(.is-saved, [data-state="saved"]) { color: var(--tree-unlocked-fg); }

.tree-claim-box :is(.propose-actions, .tree-v4-actions),
.tree-v4-claim :is(.propose-actions, .tree-v4-actions) {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 0;
}

.tree-claim-box :is(button, .btn),
.tree-v4-claim :is(button, .btn) {
  min-inline-size: var(--touch-min);
  min-block-size: var(--touch-min);
  white-space: normal;
}

.tree-v4-tab:focus-visible,
.tree-v4-actions :is(button, .btn, a[role="button"]):focus-visible,
.tree-v4-future > summary:focus-visible,
.tree-v4-trace-item:is(button, a):focus-visible,
.tree-claim-box :is(button, input, textarea, select):focus-visible,
.tree-v4-claim :is(button, input, textarea, select):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}

@keyframes tree-v4-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tree-v4-earned-receipt {
  0% { opacity: .68; transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}

.tree-v4-path:not([hidden]),
.tree-v4-practices:not([hidden]),
.tree-v4-future[open] > .tree-v4-future-list,
.tree-v4-future[open] > .tree-v4-trace-list,
#ms-claim .tree-claim-box,
.tree-v4-claim {
  animation: tree-v4-reveal var(--dur-normal) var(--ease-out) both;
}

.tree-v4-trace-item:is(.is-new, [data-new="true"]) {
  animation: tree-v4-earned-receipt var(--dur-slow) var(--ease-out) 1 both;
}

@media (min-width: 901px) {
  .tree-v4-path {
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, .75fr);
    align-items: start;
    gap: var(--sp-4);
  }

  .tree-v4-path > :is(.tree-v4-note, .tree-v4-next) { grid-column: 1 / -1; }
  .tree-v4-trace { grid-column: 1; }
  .tree-v4-future { grid-column: 2; }
}

@media (max-width: 900px) {
  .tree-v4-next-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

@media (max-width: 600px) {
  .tree-v4-switch { gap: 2px; padding: 2px; }
  .tree-v4-tab { padding-inline: var(--sp-2); }
  .tree-v4-note { font-size: var(--type-control); }

  .tree-v4-next,
  .tree-v4-trace { padding: var(--sp-3); border-radius: var(--radius-md); }

  .tree-v4-next-grid > * { padding-inline-start: var(--sp-2); }

  .tree-v4-actions { align-items: stretch; flex-direction: column; }
  .tree-v4-actions :is(button, .btn, a[role="button"]) { inline-size: 100%; }

  .tree-v4-trace-item {
    margin-inline-start: var(--sp-2);
    padding-inline-start: var(--sp-3);
  }

  .tree-v4-future > summary { padding-block: var(--sp-1); }
  .tree-v4-future-item { grid-template-columns: 18px minmax(0, 1fr); gap: var(--sp-1); }

  #ms-claim {
    align-items: end;
    padding-block: max(var(--sp-2), env(safe-area-inset-top)) max(var(--sp-2), env(safe-area-inset-bottom));
    padding-inline: max(var(--sp-2), env(safe-area-inset-left)) max(var(--sp-2), env(safe-area-inset-right));
  }

  #ms-claim .tree-claim-box,
  .tree-v4-claim,
  .tree-claim-box {
    inline-size: 100%;
    max-block-size: calc(100dvh - (var(--sp-2) * 2));
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);
  }

  .tree-claim-proof :is(input, textarea) {
    font-size: max(16px, var(--type-control));
  }

  .tree-panel .tp-grid :is(input, select, textarea) {
    min-block-size: var(--touch-min);
    font-size: max(16px, var(--type-control));
  }

  .tree-claim-box :is(.propose-actions, .tree-v4-actions),
  .tree-v4-claim :is(.propose-actions, .tree-v4-actions) {
    align-items: stretch;
    flex-direction: column;
  }

  .tree-claim-box :is(.propose-actions, .tree-v4-actions) :is(button, .btn),
  .tree-v4-claim :is(.propose-actions, .tree-v4-actions) :is(button, .btn) {
    inline-size: 100%;
  }
}

@media (max-width: 370px) {
  .tree-v4-next,
  .tree-v4-trace,
  #ms-claim .tree-claim-box,
  .tree-v4-claim { padding-inline: var(--sp-2); }

  .tree-v4-tab { font-size: var(--type-meta); }
}

@media (pointer: coarse) {
  .tree-v4-tab,
  .tree-v4-actions :is(button, .btn, a[role="button"]),
  .tree-v4-future > summary,
  .tree-v4-trace-item:is(button, a),
  .tree-claim-box :is(button, input, textarea, select),
  .tree-v4-claim :is(button, input, textarea, select),
  .tree-panel .tp-grid :is(input, select, textarea) {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}

@media (hover: hover) and (pointer: fine) {
  .tree-v4-tab:hover { color: var(--text-strong); background: var(--surface-3); }
  .tree-v4-tab:is(.active, .is-active, [aria-selected="true"], [aria-pressed="true"]):hover {
    color: var(--tree-tab-active-fg);
    background: var(--tree-tab-active-surface);
  }
  .tree-v4-future > summary:hover { color: var(--tree-v4-path-fg); }
}

@media (prefers-reduced-motion: reduce) {
  .tree-v4-switch *,
  .tree-v4-path,
  .tree-v4-path *,
  .tree-v4-practices,
  .tree-v4-practices *,
  #ms-claim *,
  .tree-v4-claim,
  .tree-v4-claim * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Interface hierarchy v204 — shared interaction and disclosure contracts
   ============================================================ */

/* A running focus session is a real control surface. Its actions must remain
   operable by touch and switch input even on the compact desktop pill. */
.focus-pill .fp-ctrl > :is(button, [role="button"]) {
  min-inline-size: var(--touch-min, 42px);
  min-block-size: var(--touch-min, 42px);
  display: inline-grid;
  place-items: center;
  padding: var(--sp-1, 4px) var(--sp-2, 8px);
}

.focus-pill :is(button, [role="button"]):focus-visible,
#nav :is(.navsec, .navgear, .navsubtab):focus-visible,
.mobile-nav-sheet :is(button, .mobile-sheet-entry):focus-visible,
:is(.help-btn, .logout-btn):focus-visible {
  outline: var(--focus-ring, 2px solid var(--accent-2, var(--accent)));
  outline-offset: 2px;
}

/* Today exposes one quiet capture line. Voice, video, recap and the Notes
   destination remain available behind one disclosure; the full tool row is
   shown only inside Notes, where capture is the primary job. */
.capture-card.is-compact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--touch-min, 42px);
  align-items: start;
  gap: var(--sp-2, 8px);
  padding: var(--sp-2, 8px) !important;
}

.capture-card.is-compact .cap-row {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--touch-min, 42px);
  gap: var(--sp-2, 8px);
}

.capture-card.is-compact .capture-status {
  grid-column: 1 / -1;
}

.capture-tools {
  position: relative;
  min-inline-size: var(--touch-min, 42px);
}

.capture-tools > summary {
  inline-size: var(--touch-min, 42px);
  block-size: var(--touch-min, 42px);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft, var(--line));
  border-radius: var(--radius-sm, 8px);
  color: var(--text-soft, var(--muted));
  background: var(--surface-2, var(--panel2));
  font-weight: 900;
  list-style: none;
  cursor: pointer;
}

.capture-tools > summary::-webkit-details-marker { display: none; }
.capture-tools > summary:focus-visible {
  outline: var(--focus-ring, 2px solid var(--accent));
  outline-offset: 2px;
}

.capture-tools-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-1, 4px));
  inset-inline-end: 0;
  z-index: 30;
  min-inline-size: min(280px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1, 4px);
  padding: var(--sp-2, 8px);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-1, var(--panel));
  box-shadow: var(--shadow-pop, 0 14px 36px rgba(0, 0, 0, .34));
}

.capture-tools-menu :is(.cap-btn, .dayrec-btn, .capture-notes-link) {
  min-inline-size: var(--touch-min, 42px);
  min-block-size: var(--touch-min, 42px);
}

.capture-tools-menu :is(.dayrec-btn, .capture-notes-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1, 4px);
  padding: var(--sp-2, 8px);
  border: 0;
  border-radius: var(--radius-sm, 8px);
  color: var(--text-soft, var(--muted));
  background: transparent;
  font: 800 var(--type-meta, 12px)/var(--leading-label, 1.25) var(--font-ui, inherit);
  cursor: pointer;
}

@media (max-width: 420px) {
  .capture-tools-menu { grid-template-columns: minmax(0, 1fr); }
}

/* Dialog actions use the same minimum target as the rest of the product. The
   selector is intentionally limited to known dialog surfaces, so ordinary
   dense desktop tables and day cells are not inflated. */
:is(
  .v204-dialog,
  .paywall-box,
  .guide-box,
  .loot-box,
  .raidwin-box,
  .account-dialog-box,
  .attention-dialog,
  .cal-task-dialog,
  .cal-sub-dialog
) :is(button, [role="button"], input:not([type="checkbox"]):not([type="radio"]), select, textarea, summary) {
  min-block-size: var(--touch-min, 42px);
}

:is(
  .v204-dialog,
  .paywall-box,
  .guide-box,
  .loot-box,
  .raidwin-box,
  .account-dialog-box,
  .attention-dialog,
  .cal-task-dialog,
  .cal-sub-dialog
) > .modal-x {
  min-inline-size: var(--touch-min, 42px);
  min-block-size: var(--touch-min, 42px);
  display: grid;
  place-items: center;
  padding: 0;
}

:is(
  .v204-dialog,
  .paywall-box,
  .guide-box,
  .loot-box,
  .raidwin-box,
  .account-dialog-box,
  .attention-dialog,
  .cal-task-dialog,
  .cal-sub-dialog
) :is(button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: var(--focus-ring, 2px solid var(--accent-2, var(--accent)));
  outline-offset: 2px;
}

/* Month boundaries remain compact, but dates are still actions. Forty-two
   pixels belong to the day target here; they are not imposed on decorative
   weekday labels or count dots. */
@media (max-width: 600px), (pointer: coarse) {
  .calendar-month-shell .cm-cell {
    min-block-size: var(--touch-min, 42px);
    min-height: var(--touch-min, 42px);
  }
}

/* Settings and the Today support rail contain user-authored long names. Keep
   controls inside their column and wrap at word boundaries instead of making
   one-letter/one-word vertical stacks. */
.settings-shell,
.settings-group,
.settings-group > .card,
.today-support,
.secretary-card,
.secretary-summary .comp-body,
.secretary-summary .comp-line-row {
  min-inline-size: 0;
}

.settings-shell :is(input, select, textarea) {
  box-sizing: border-box;
  max-inline-size: 100%;
}

.settings-shell :is(label, .settings-hub-item, .settings-group-head, .settings-group > .card),
.secretary-summary :is(.comp-name > b, .comp-line) {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.settings-hub-item {
  min-inline-size: 0;
  padding: var(--sp-2, 8px);
  white-space: normal;
  text-wrap: balance;
}

.settings-appearance-card { display: grid; gap: var(--sp-3, 12px); }
.settings-appearance-card > h3 { margin-block-end: 0 !important; }
.settings-appearance-card .theme-lbl {
  inline-size: auto;
  width: auto;
  min-inline-size: 0;
}
.settings-experience-stack { display: grid; gap: 0; }
.settings-experience-stack > :is(.card, .settings-subsection) {
  min-inline-size: 0;
  margin: 0;
  padding: var(--sp-3, 12px) 0;
  border: 0;
  border-block-end: 1px solid var(--line-soft, var(--line));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.settings-experience-stack > :last-child { border-block-end: 0; }
.settings-experience-stack > :is(.card, .settings-subsection) > :first-child { margin-block-start: 0; }

/* Progressive sections introduced in v204 share one quiet disclosure language:
   one summary action, one nested surface, no competing card glow. */
.stats-progressive,
.rewards-disclosure,
.pet-summary {
  min-inline-size: 0;
  border: 1px solid var(--line-soft, var(--line));
  border-radius: var(--radius-md, 12px);
  background: var(--surface-2, var(--panel2));
  box-shadow: none;
}

:is(.stats-progressive, .rewards-disclosure, details.pet-summary) > summary {
  min-block-size: var(--touch-min, 42px);
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  color: var(--text-strong, var(--text));
  font: 800 var(--type-control, 14px)/var(--leading-ui, 1.35) var(--font-ui, inherit);
  list-style: none;
  cursor: pointer;
}

:is(.stats-progressive, .rewards-disclosure, details.pet-summary) > summary::-webkit-details-marker {
  display: none;
}

:is(.stats-progressive, .rewards-disclosure, details.pet-summary) > summary::after {
  content: "⌄";
  margin-inline-start: auto;
  color: var(--text-soft, var(--muted));
}

:is(.stats-progressive, .rewards-disclosure, details.pet-summary)[open] > summary::after {
  content: "⌃";
}

:is(.stats-progressive, .rewards-disclosure, details.pet-summary) > summary:focus-visible,
.party-entry-choice:focus-visible {
  outline: var(--focus-ring, 2px solid var(--accent-2, var(--accent)));
  outline-offset: 2px;
}

.stats-progressive > :not(summary),
details.pet-summary > :not(summary) {
  margin: 0;
  padding: 0 var(--sp-3, 12px) var(--sp-3, 12px);
}

.pet-summary:not(details) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
}

.party-entry-choice {
  min-inline-size: 0;
  min-block-size: var(--touch-min, 42px);
  display: grid;
  align-content: center;
  gap: var(--sp-1, 4px);
  padding: var(--sp-3, 12px);
  border: 1px solid var(--line-soft, var(--line));
  border-radius: var(--radius-md, 12px);
  color: var(--text-strong, var(--text));
  background: var(--surface-2, var(--panel2));
  text-align: start;
}

.party-entry-choice[aria-pressed="true"],
.party-entry-choice.is-active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line-soft, var(--line)));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2, var(--panel2)));
}

@media (max-width: 600px) {
  .party-entry-choice { inline-size: 100%; }
}

/* v204 transitions name only the property that changes. This prevents later
   layout or theme changes from being animated accidentally. */
.stats-progressive,
.pet-summary,
.rewards-disclosure,
.party-entry-choice,
.v204-dialog {
  transition-property: border-color, background-color, color, opacity, transform;
  transition-duration: 140ms;
  transition-timing-function: var(--ease-out, ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .raidwin-box *,
  .raidwin-box *::before,
  .raidwin-box *::after,
  .rewards-shell *,
  .rewards-shell *::before,
  .rewards-shell *::after,
  :is(.loot-box, .loot-reveal-box) *,
  :is(.loot-box, .loot-reveal-box) *::before,
  :is(.loot-box, .loot-reveal-box) *::after,
  .card-quests .task.is-core,
  .task-core-badge,
  .stats-progressive,
  .pet-summary,
  .rewards-disclosure,
  .party-entry-choice,
  .v204-dialog {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .rw-rays,
  .rw-confetti,
  .rw-conf { display: none !important; }

  .rw-boss,
  .rw-title,
  .rw-x,
  .loot-result.show,
  .loot-capsule-result.is-revealed .loot-result-object {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* v208 final cascade: legacy social-row breakpoints appear later than the
   profile component. Keep the new profile trigger as one semantic cell. */
.party-members-card .pm-profile {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.leaderboard-card .lb-profile {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.leaderboard-card .lb-profile + .lb-lvl { grid-column: 4; }
.leaderboard-card .lb-profile ~ .lb-xp { grid-column: 5; }
@media (max-width: 820px) {
  .party-members-card .pm-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .party-members-card .pm-profile { grid-column: 1; }
  .leaderboard-card .lb-row { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
  .leaderboard-card .lb-profile { grid-column: 2; }
  .leaderboard-card .lb-profile + .lb-lvl { grid-column: 3; }
  .leaderboard-card .lb-profile ~ .lb-xp { grid-column: 4; }
}
@media (max-width: 600px) {
  .leaderboard-card .lb-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .leaderboard-card .lb-profile { grid-column: 2; gap: var(--sp-1); }
  .leaderboard-card .lb-profile + .lb-lvl { display: none; }
  .leaderboard-card .lb-profile ~ .lb-xp { grid-column: 3; }
}

/* Шаг цели → день. Один ход из чек-листа цели в сегодняшний квест и обратная
   ссылка на уже стоящий в дне квест: одна и та же фраза больше не пишется дважды.
   Живёт в строке шага и в карточке «Следующий шаг». */
.gstep-day {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line-soft));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text-strong);
  font: inherit;
  font-size: var(--type-meta);
  line-height: var(--leading-label);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.gstep-day:hover,
.gstep-day:focus-visible { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.gstep-day[disabled] { opacity: .5; cursor: default; }
.gstep-day.is-linked { border-style: dashed; background: transparent; color: var(--muted); }
.goal-next-card .gstep-day { margin-inline-start: var(--sp-2); font-size: var(--type-meta); }
@media (pointer: coarse) { .gstep-day { min-height: var(--touch-min); } }

/* Какой цели служит квест. Чип стоит под названием в той же ячейке, что и «Ядро дня»,
   поэтому сетка строки не меняется. Состояние цели проговаривается словом рядом с
   приглушённым цветом — цвет один читать нельзя. */
/* Ячейка названия — вложенная сетка с колонкой auto: она растягивалась по самому
   широкому элементу и вылезала за правый край строки квеста, обрезая слово о
   состоянии цели. Явная колонка заставляет длинное название сжаться многоточием. */
.card-quests .task > .t-title { grid-template-columns: minmax(0, 1fr); }
.task-goal-chip {
  inline-size: max-content;
  max-inline-size: 100%;
  min-block-size: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font: 600 var(--type-floor)/var(--leading-label) var(--font-ui);
  text-decoration: none;
  overflow: hidden;
}
.task-goal-chip:hover,
.task-goal-chip:focus-visible { color: var(--text-strong); border-color: color-mix(in srgb, var(--accent) 48%, var(--line-soft)); }
/* Название цели сжимается многоточием; слово о состоянии — нет. Иначе на узком
   экране обрезается именно оно, и «цель завершена» читается как живая работа. */
.task-goal-chip-title { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-goal-chip-mark { flex: 0 0 auto; }
.task-goal-chip-state { flex: 0 0 auto; opacity: .82; font-weight: 500; white-space: nowrap; }
.task-goal-chip:is(.is-completed, .is-archived) { opacity: .68; }
.task-goal-chip.is-archived { border-style: dashed; }
@media (pointer: coarse) { .task-goal-chip { min-block-size: 26px; } }

/* Дедлайны целей в календаре. Кнопка выбора дня несёт только пометку — ссылку внутрь
   кнопки вкладывать нельзя, — а сама цель открывается из шапки выбранного дня. */
.cal-goal-mark {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 3px;
  font-size: var(--type-floor);
  line-height: 1;
  pointer-events: none;
}
.calv-day, .cm-cell { position: relative; }
.calv-day.has-goal-deadline, .cm-cell.has-goal-deadline { border-color: color-mix(in srgb, var(--accent) 46%, var(--line-soft)); }
.cal-goal-deadlines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: var(--sp-2) 0 0;
}
.cal-goal-deadline {
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-inline: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line-soft));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-strong);
  font: 600 var(--type-floor)/var(--leading-label) var(--font-ui);
  text-decoration: none;
  overflow: hidden;
}
.cal-goal-deadline:hover,
.cal-goal-deadline:focus-visible { border-color: color-mix(in srgb, var(--accent) 62%, var(--line-soft)); }
.cal-goal-deadline-mark { flex: 0 0 auto; }
.cal-goal-deadline-kicker { flex: 0 0 auto; color: var(--muted); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.cal-goal-deadline-title { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-col .cal-goal-deadlines { margin: var(--sp-1) 0 0; }
.wk-col .cal-goal-deadline-kicker { display: none; }
@media (pointer: coarse) { .cal-goal-deadline { min-block-size: var(--touch-min); } }

/* Ход секретаря на карточке Тени. Один ход, две равноправные кнопки: отказ —
   это данные о неуместности, а не крестик в углу. */
.secretary-offer { display: grid; gap: var(--sp-2); }
.secretary-offer-reason { margin: 0; color: var(--text-strong); font-size: var(--type-body); line-height: var(--leading-prose); }
.secretary-offer-quote { color: var(--muted); line-height: var(--leading-prose); }
.secretary-offer-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.secretary-offer-buttons > * { min-block-size: var(--touch-min); }

/* Ритм сфер и объявленная частота. Частота — расширенный параметр сферы, поэтому
   живёт в той же строке настройки, что домен и «проект», и не занимает своей карточки. */
.se-rhythm { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--type-meta); }
.se-rhythm input { inline-size: 3.5rem; min-block-size: 32px; text-align: center; }
.stats-rhythm-line { margin-block-start: var(--sp-1); }

/* Версия на две минуты — второй вход в ту же привычку. Занимает отдельную строку
   под привычкой, чтобы не ломать сетку строки и не спорить с обычной отметкой. */
.habit-two-min {
  grid-column: 1 / -1;
  justify-self: start;
  max-inline-size: 100%;
  min-block-size: var(--touch-min);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-1);
  padding-inline: var(--sp-2);
  border: 1px dashed color-mix(in srgb, var(--accent) 44%, var(--line-soft));
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-strong);
  font: 600 var(--type-meta)/var(--leading-label) var(--font-ui);
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}
.habit-two-min:hover,
.habit-two-min:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.habit-two-min[disabled] { opacity: .5; cursor: default; }
.habit-two-min-lead { flex: 0 0 auto; color: var(--muted); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.habit-two-min-text { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Экран привычек озаглавлен собственными словами человека, если он их написал. */
.hb-intro h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.hb-intro-kicker { color: var(--muted); font: 700 var(--type-floor)/var(--leading-label) var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.hb-intro-identity { min-inline-size: 0; overflow-wrap: anywhere; }

/* Что взято с доски — внутри той же карточки, где живут квесты дня: это один
   вопрос «на что я сегодня подписался», а не вторая карточка рядом. */
.day-board-taken {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--line-soft);
}
.day-board-kicker {
  color: var(--muted);
  font: 700 var(--type-floor)/var(--leading-label) var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.day-board-list { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.day-board-order {
  inline-size: 100%;
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-strong);
  font: 500 var(--type-meta)/var(--leading-label) var(--font-ui);
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}
.day-board-order:hover,
.day-board-order:focus-visible { border-color: color-mix(in srgb, var(--accent) 46%, var(--line-soft)); }
.day-board-title { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-board-date { flex: 0 0 auto; margin-inline-start: auto; color: var(--muted); font-weight: 400; white-space: nowrap; }
/* Actionable Foundations v216 — одна реальная ценность до витрин геймификации. */
.first-value-card{position:relative;overflow:hidden;padding:22px;border:1px solid color-mix(in srgb,var(--accent) 48%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--card)),var(--card) 54%);box-shadow:0 18px 48px rgba(0,0,0,.16)}
.first-value-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent)}
.first-value-card__header,.first-value-card__actions,.first-value-card__boundary,.first-value-card__chosen{display:flex;align-items:center;gap:12px}
.first-value-card__header{justify-content:space-between;margin-bottom:18px}
.first-value-card__kicker,.first-value-card__eyebrow,.first-value-card__state,.first-value-card__support-label{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.first-value-card__kicker,.first-value-card__eyebrow{color:var(--accent)}
.first-value-card__state,.first-value-card__support-label{color:var(--muted)}
.first-value-card__content h2{margin:5px 0 7px;font-size:clamp(22px,3vw,32px);line-height:1.05}
.first-value-card__content>p{max-width:62ch;margin:0;color:var(--muted);line-height:1.5}
.first-value-card__chosen{align-items:flex-start;flex-direction:column;margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--bg) 55%,transparent)}
.first-value-card__chosen span,.first-value-card__chosen small{color:var(--muted)}
.first-value-card__support{margin-top:16px}.first-value-card__support-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.first-value-card__actions{margin-top:18px;flex-wrap:wrap}.first-value-card__primary,.first-value-card__secondary{min-height:42px;border-radius:12px;padding:9px 15px;font:inherit;font-weight:750;cursor:pointer}
.first-value-card__primary{border:1px solid transparent;background:var(--accent);color:var(--accentText,#071018);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 22%,transparent)}
.first-value-card__secondary{border:1px solid var(--line);background:var(--card2);color:var(--text)}
.first-value-card :is(button:disabled){opacity:.55;cursor:wait}.first-value-card__boundary{justify-content:space-between;margin-top:18px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--warn) 55%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--warn) 8%,transparent)}
.first-value-card__boundary p,.first-value-card__proof{margin:4px 0 0;color:var(--muted)}.first-value-card__boundary-actions{display:flex;gap:8px;flex-shrink:0}
.first-value-inline-error{margin:0;padding:10px 14px;border:1px solid var(--warn);border-radius:12px;color:var(--warn)}
@media(max-width:720px){.first-value-card{padding:18px}.first-value-card__boundary{align-items:flex-start;flex-direction:column}.first-value-card__boundary-actions,.first-value-card__actions{width:100%}.first-value-card__primary{width:100%}.first-value-card__support-list{flex-direction:column}.first-value-card__secondary{width:100%;text-align:left}}
.actionable-card{display:grid;gap:16px}.actionable-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.actionable-card h3{margin:2px 0 0}.actionable-kicker{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.telemetry-purpose-list{display:grid;gap:10px}.telemetry-purpose{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--bg) 44%,transparent)}
.telemetry-purpose__copy{min-width:0}.telemetry-purpose__head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.telemetry-purpose__copy p{margin:5px 0;color:var(--muted);line-height:1.4}.telemetry-purpose__copy small{display:block;color:var(--muted)}.telemetry-purpose__state{padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px}.telemetry-purpose__essential{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good);font-weight:900}
.actionable-switch{position:relative;display:inline-flex;flex:0 0 auto}.actionable-switch input{position:absolute;opacity:0;pointer-events:none}.actionable-switch>span[aria-hidden]{display:block;width:46px;height:26px;border:1px solid var(--line);border-radius:999px;background:var(--card2);transition:.18s}.actionable-switch>span[aria-hidden]::after{content:"";display:block;width:20px;height:20px;margin:2px;border-radius:50%;background:var(--muted);transition:.18s}.actionable-switch input:checked+span{background:color-mix(in srgb,var(--accent) 32%,var(--card2));border-color:var(--accent)}.actionable-switch input:checked+span::after{transform:translateX(20px);background:var(--accent)}.actionable-switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.ai-memory-card .muted{margin:0}.ai-memory-entry{display:grid;gap:12px;padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--bg) 44%,transparent)}.ai-memory-entry.is-dismissed{opacity:.72}.ai-memory-entry__text{margin:0;font-weight:650;line-height:1.45;overflow-wrap:anywhere}.ai-memory-entry__explain{display:grid;gap:3px;color:var(--muted);font-size:12px}.actionable-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ai-memory-edit-form{display:grid;gap:10px}.ai-memory-edit-form label{display:grid;gap:6px}.ai-memory-edit-form textarea{min-height:90px}.actionable-empty{display:grid;gap:4px;padding:16px;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}.actionable-error,.actionable-warning{margin:0;padding:10px 12px;border-radius:12px}.actionable-error{border:1px solid var(--danger);color:var(--danger)}.actionable-warning{border:1px solid var(--warn);color:var(--warn)}
@media(max-width:720px){.actionable-card>header,.telemetry-purpose{align-items:flex-start}.actionable-card>header{flex-direction:column}.telemetry-purpose__head{display:grid}.actionable-row .btn{flex:1}.telemetry-purpose__copy p{font-size:13px}}