/* ═══════════════════════════════════════════════════════════════
   NoteDraft — in-browser phone simulator
   Used by: hero (static clone), #demo (interactive), gallery (clones).
   The app look mirrors the real NoteDraft UI (clean monochrome surface,
   charcoal FAB, hairline dividers). All screens re-theme through the
   CSS variables set on .phone-screen[data-app-theme] — that's what the
   demo's own "Appearance" screen switches.
   ═══════════════════════════════════════════════════════════════ */

/* ── App theme variables ───────────────────────────────────────
   The shipped app has exactly two themes: Light Mode / Dark Mode,
   both monochrome (accent = ink, FABs on primary/onPrimary). */
.phone-screen {
  --app-scale: 1;

  /* Light Mode (default — matches the shipped app) */
  --app-accent: #141417; /* monochrome "primary" ink */
  --on-acc: #ffffff;     /* label color on accent    */
  --ab: #ffffff;   /* background   */
  --ab2: #f3f4f5;  /* cards/wells  */
  --af: #16181d;   /* foreground   */
  --am: #7b8490;   /* muted        */
  --al: #e7e8ea;   /* hairlines    */
  --afab: #1c1c21; /* FAB fill     */
}
.phone-screen[data-app-theme="dark"] {
  --app-accent: #ececf1;
  --on-acc: #0a0a0c;
  --ab: #151519;
  --ab2: #202025;
  --af: #f2f2f4;
  --am: #9a9aa3;
  --al: #2c2c32;
  --afab: var(--app-accent);
  /* hairline so the dark screen doesn't merge into the phone frame ("black screen") */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

/* ── Frame ─────────────────────────────────────────────────── */
.phone {
  position: relative;
  width: min(340px, 92vw);
  aspect-ratio: 9 / 19;
  background: #0b0d12;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 48px;
  padding: 11px;
  box-shadow: var(--shadow-lg), inset 0 0 4px rgba(255, 255, 255, 0.08);
}
.phone::before {
  /* side button */
  content: "";
  position: absolute;
  right: -3px;
  top: 20%;
  width: 3px;
  height: 64px;
  border-radius: 2px;
  background: #22252d;
}
.phone--hero { width: min(292px, 84vw); }

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: var(--ab);
  color: var(--af);
  font-family: var(--font-b);
  transition: background 0.35s;
  user-select: none;
}
.phone-screen::before {
  /* punch-hole camera */
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #05070b;
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.12);
  z-index: 30;
}

/* editor & vault text can be selected/typed */
.phone-screen .ed-body,
.phone-screen .va-secret,
.phone-screen input { user-select: text; }

/* ── Status & gesture bars ─────────────────────────────────── */
.p-status {
  position: relative;
  z-index: 20;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--af);
}
.p-status__ics { letter-spacing: 2px; font-size: 9px; opacity: 0.8; }

.p-gesture {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 4px;
  border-radius: 4px;
  background: var(--am);
  opacity: 0.55;
  z-index: 25;
  pointer-events: none;
}

/* ── Screens & transitions ─────────────────────────────────── */
.scr {
  position: absolute;
  inset: 34px 0 0 0;
  display: flex;
  flex-direction: column;
  background: var(--ab);
  opacity: 0;
  visibility: hidden;
  transform: translateX(26px);
  transition: opacity 0.3s var(--ease), transform 0.32s var(--ease), visibility 0.32s;
}
.scr.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 5;
}

/* ── Top bar (mirrors the real app: ☰ Notes · EDIT ♥ ⌕ NO) ──── */
.p-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 13px;
  border-bottom: 1px solid var(--al);
}
.p-topbar__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-topbar__spacer { flex: 1; }
.p-topbar__menu {
  display: grid;
  gap: 4px;
  padding: 6px 2px;
}
.p-topbar__menu i { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--af); }
.p-topbar__action {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--af);
  padding: 5px 2px;
}
.p-topbar__ico { font-size: 17px; color: var(--af); padding: 4px 5px; line-height: 1; }
.p-avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 1.5px solid var(--al);
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--af);
}
.p-back {
  font-size: 24px;
  line-height: 1;
  padding: 2px 8px 5px 4px;
  color: var(--af);
}
.p-save {
  font-family: var(--font-m);
  font-size: 9.5px;
  color: var(--app-accent);
  transition: opacity 0.2s;
}
.p-chip-mini {
  font-family: var(--font-m);
  font-size: 9px;
  padding: 4px 9px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--app-accent) 14%, transparent);
  color: var(--app-accent);
  white-space: nowrap;
}
.p-chip-mini--btn { cursor: pointer; }

/* ── Body & shared bits ────────────────────────────────────── */
.p-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 46px;
  scrollbar-width: none;
}
.p-body::-webkit-scrollbar { display: none; }

.p-label {
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--am);
  margin: 12px 0 8px;
}
.p-label:first-child { margin-top: 2px; }
.p-label .th-size-val { float: right; color: var(--app-accent); }

.p-folders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.p-folder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--ab2);
  border-radius: 13px;
  padding: 10px 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--af);
  text-align: left;
  transition: transform 0.2s var(--ease);
}
.phone--demo .p-folder:active { transform: scale(0.96); }
.p-folder__ic { font-size: 14px; color: var(--app-accent); }
.p-folder em { font-style: normal; font-size: 9px; font-weight: 500; color: var(--am); }

.p-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--al);
  text-align: left;
  color: var(--af);
  transition: background 0.2s;
}
.phone--demo .p-row:active { background: var(--ab2); }
.p-row__ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--ab2);
  font-size: 14px;
  color: var(--af);
}
.p-row__tx { flex: 1; min-width: 0; }
.p-row__tx strong { display: block; font-size: 12.5px; font-weight: 700; }
.p-row__tx em { display: block; font-style: normal; font-size: 10px; color: var(--am); margin-top: 1px; }
.p-row__chev { color: var(--am); font-size: 15px; }

.p-mini-progress {
  display: block;
  width: 82%;
  height: 5px;
  margin-top: 6px;
  border-radius: 99px;
  background: var(--al);
  overflow: hidden;
}
.p-mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--app-accent);
  transition: width 0.4s var(--ease);
}

.p-btn-soft {
  background: var(--ab2);
  color: var(--af);
  border-radius: 11px;
  padding: 9px 15px;
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.15s var(--ease), background 0.2s;
}
.p-btn-soft:active { transform: scale(0.96); }

/* ── FAB + create sheet ────────────────────────────────────── */
.p-fab {
  position: absolute;
  right: 16px;
  bottom: 26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--afab);
  color: var(--on-acc);
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  transition: transform 0.3s var(--ease);
  z-index: 12;
}
.p-fab.is-open { transform: rotate(45deg); }

.p-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.4);
  z-index: 10;
  animation: scrimIn 0.25s;
}
@keyframes scrimIn { from { opacity: 0; } }

.p-sheet {
  position: absolute;
  right: 16px;
  bottom: 92px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  z-index: 11;
}
.sheet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ab);
  color: var(--af);
  border: 1px solid var(--al);
  border-radius: 13px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  animation: sheetIn 0.3s var(--ease) forwards;
}
.sheet-item span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-accent) 14%, transparent);
  color: var(--app-accent);
  font-size: 12px;
}
.sheet-item:nth-child(1) { animation-delay: 0.14s; }
.sheet-item:nth-child(2) { animation-delay: 0.1s; }
.sheet-item:nth-child(3) { animation-delay: 0.06s; }
.sheet-item:nth-child(4) { animation-delay: 0.03s; }
.sheet-item:nth-child(5) { animation-delay: 0s; }
@keyframes sheetIn { to { opacity: 1; transform: none; } }

/* ── Search overlay ────────────────────────────────────────── */
.p-search {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 13px;
  border-bottom: 1px solid var(--al);
  animation: searchIn 0.25s var(--ease);
}
@keyframes searchIn { from { opacity: 0; transform: translateY(-6px); } }
.p-search input {
  flex: 1;
  background: var(--ab2);
  border: 0;
  border-radius: 11px;
  padding: 9px 13px;
  font-size: 12.5px;
  color: var(--af);
  outline: none;
}
.p-search input::placeholder { color: var(--am); }
.p-search button { color: var(--am); font-size: 13px; padding: 6px; }
.p-row.is-hidden, .p-label.is-hidden, .p-folders.is-hidden { display: none; }

/* ── Toast ─────────────────────────────────────────────────── */
.p-toast {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translate(-50%, 14px);
  max-width: 82%;
  background: color-mix(in srgb, var(--af) 94%, transparent);
  color: var(--ab);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.3s var(--ease);
  z-index: 40;
  white-space: nowrap;
}
.p-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ── Editor ────────────────────────────────────────────────── */
.ed-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--al);
  overflow-x: auto;
  scrollbar-width: none;
}
.ed-toolbar::-webkit-scrollbar { display: none; }
.ed-tool {
  flex: none;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--af);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.ed-tool:active { transform: scale(0.92); }
.ed-tool.is-on {
  background: color-mix(in srgb, var(--app-accent) 16%, transparent);
  color: var(--app-accent);
}
.ed-tool b, .ed-tool i, .ed-tool u, .ed-tool s { font-size: 12.5px; }
.ed-sep { flex: none; width: 1px; height: 18px; background: var(--al); margin: 0 3px; }

.ed-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 40px;
  font-size: calc(13px * var(--app-scale));
  line-height: 1.65;
  outline: none;
  cursor: text;
  scrollbar-width: none;
}
.ed-body::-webkit-scrollbar { display: none; }
.ed-body h2 { font-family: var(--font-b); font-size: 1.35em; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.5em; }
.ed-body p { margin: 0 0 0.7em; }
.ed-body ul { list-style: disc; padding-left: 20px; margin: 0 0 0.7em; }
.ed-body ol { list-style: decimal; padding-left: 20px; margin: 0 0 0.7em; }
.ed-body li { margin-bottom: 0.25em; }
.ed-body mark { background: #fde047; color: #1a1a1a; padding: 0 3px; border-radius: 3px; }
.ed-body blockquote {
  margin: 0 0 0.7em;
  padding: 6px 12px;
  border-left: 3px solid var(--app-accent);
  background: var(--ab2);
  border-radius: 0 9px 9px 0;
  color: var(--am);
}
.ed-body a { color: var(--app-accent); text-decoration: underline; }

.ed-foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  padding: 8px 15px 26px;
  border-top: 1px solid var(--al);
  font-family: var(--font-m);
  font-size: 9.5px;
  color: var(--am);
}

/* ── Checklist ─────────────────────────────────────────────── */
.cl-head {
  background: var(--ab2);
  border-radius: 15px;
  padding: 13px 14px;
  margin-bottom: 6px;
}
.cl-head__t { margin: 0; font-size: 13.5px; font-weight: 800; }
.cl-head__c {
  margin: 2px 0 9px;
  font-family: var(--font-m);
  font-size: 10px;
  color: var(--am);
  font-variant-numeric: tabular-nums;
}
.cl-track {
  height: 7px;
  border-radius: 99px;
  background: var(--al);
  overflow: hidden;
}
.cl-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--app-accent);
  transition: width 0.45s var(--ease);
}

.cl-list { margin-top: 4px; }
.cl-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 3px;
  border-bottom: 1px solid var(--al);
  cursor: pointer;
}
.cl-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cl-box {
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  border: 1.7px solid var(--am);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--on-acc);
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.cl-item input:checked + .cl-box {
  background: var(--app-accent);
  border-color: var(--app-accent);
  transform: scale(1.05);
}
.cl-item input:checked + .cl-box::before { content: "✓"; }
.cl-tx { font-size: 12.5px; font-weight: 600; transition: color 0.2s; }
.cl-item input:checked ~ .cl-tx { color: var(--am); text-decoration: line-through; }

.cl-add { margin-top: 10px; }
.cl-add input {
  width: 100%;
  background: var(--ab2);
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 12px;
  color: var(--af);
  outline: none;
}
.cl-add input::placeholder { color: var(--am); }

.cl-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }
.cl-confetti span {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--c, var(--app-accent));
  animation: confetti 0.95s ease-out forwards;
}
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ── Budget table ──────────────────────────────────────────── */
.bt-hint {
  font-size: 10.5px;
  color: var(--am);
  margin: 2px 0 10px;
}
.bt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bt-table th {
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--am);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--al);
}
.bt-table td {
  padding: 8px;
  border-bottom: 1px solid var(--al);
  outline: none;
}
.bt-table td[data-col] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-m);
  font-size: 11px;
}
.bt-table td:focus { background: color-mix(in srgb, var(--app-accent) 10%, transparent); border-radius: 6px; }
.bt-table tfoot td {
  font-weight: 800;
  border-bottom: 0;
  border-top: 2px solid var(--af);
  background: color-mix(in srgb, var(--app-accent) 8%, transparent);
  font-size: 11.5px;
}
.bt-table tfoot td.is-flash { animation: cellFlash 0.5s; }
@keyframes cellFlash { 30% { background: color-mix(in srgb, var(--app-accent) 30%, transparent); } }

.bt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
}
.bt-status { font-size: 10.5px; font-weight: 700; color: #2e9e6b; }
.bt-status.is-over { color: #e5484d; }

/* ── Workflow (bullet/numbered blocks + inline media, like the app) ── */
.fl-blocks { display: flex; flex-direction: column; }
.fl-block {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 2px;
  border-bottom: 1px solid var(--al);
}
.fl-block:last-child { border-bottom: 0; }
.fl-num {
  font-family: var(--font-m);
  font-size: 11px;
  color: var(--am);
  min-width: 16px;
  padding-top: 1px;
}
.fl-tx strong { display: block; font-size: 12.5px; }
.fl-tx em { display: block; font-style: normal; font-size: 10px; color: var(--am); margin-top: 1px; }
.fl-media {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--ab2);
  font-size: 10px;
  color: var(--am);
}

/* ── Vault ─────────────────────────────────────────────────── */
.va-locked {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 20px 40px;
  text-align: center;
}
.va-shield {
  font-size: 40px;
  margin-bottom: 6px;
  transition: transform 0.3s var(--ease);
}
.va-shield.is-ok { animation: shieldPop 0.5s var(--ease); }
@keyframes shieldPop { 40% { transform: scale(1.25); } }
.va-title { margin: 0; font-size: 15px; font-weight: 800; }
.va-hint { margin: 3px 0 0; font-size: 10.5px; color: var(--am); }
.va-hint code { color: var(--app-accent); font-size: 10.5px; }

.va-dots {
  display: flex;
  gap: 12px;
  margin: 15px 0 4px;
}
.va-dots.is-shake { animation: shake 0.4s; }
@keyframes shake {
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.va-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.7px solid var(--am);
  transition: background 0.15s, border-color 0.15s;
}
.va-dots i.is-fill { background: var(--af); border-color: var(--af); }
.va-dots.is-err i { background: #e5484d; border-color: #e5484d; }

.va-msg {
  min-height: 15px;
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  color: #e5484d;
}
.va-msg.is-ok { color: #2e9e6b; }

.va-pad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 9px;
}
.va-key {
  height: 44px;
  border-radius: 13px;
  background: var(--ab2);
  color: var(--af);
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.12s var(--ease), background 0.15s;
}
.va-key:active { transform: scale(0.93); background: var(--al); }
.va-key--soft { background: transparent; border: 1.5px dashed var(--al); font-size: 17px; color: var(--am); }

.va-open { flex: 1; display: flex; flex-direction: column; min-height: 0; animation: entrance 0.4s var(--ease); }
.va-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--al);
}
.va-row__ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
}
.va-row__tx { flex: 1; min-width: 0; }
.va-row__tx strong { display: block; font-size: 12px; }
.va-row__tx em { display: block; font-style: normal; font-size: 9.5px; color: var(--am); }
.va-secret {
  display: block;
  font-size: 10px;
  color: var(--af);
  margin-top: 2px;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.va-eye, .va-copy {
  flex: none;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--ab2);
  color: var(--af);
  font-size: 12px;
  transition: transform 0.15s var(--ease);
}
.va-eye:active, .va-copy:active { transform: scale(0.9); }
.va-lock-again { width: 100%; margin-top: 14px; }
.va-foot {
  margin: 10px 0 0;
  font-size: 9.5px;
  color: var(--am);
  text-align: center;
}

/* ── Code editor ───────────────────────────────────────────── */
.co-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 13px 40px;
}
.co-pre {
  flex: 1;
  margin: 0;
  overflow: auto;
  background: #0d1117;
  border-radius: 14px;
  padding: 13px 11px;
  font-family: var(--font-m);
  font-size: 10.5px;
  line-height: 1.75;
  color: #c9d1d9;
  scrollbar-width: none;
}
.co-pre::-webkit-scrollbar { display: none; }
.co-pre .ln {
  display: inline-block;
  width: 20px;
  margin-right: 12px;
  text-align: right;
  color: #484f58;
  user-select: none;
}
.co-pre .k { color: #ff7b72; }
.co-pre .t { color: #79c0ff; }
.co-pre .s { color: #a5d6ff; }
.co-pre .c { color: #8b949e; font-style: italic; }
.co-pre .f { color: #d2a8ff; }
.co-foot {
  margin: 10px 2px 0;
  font-size: 9.5px;
  color: var(--am);
}

/* ── Timeline (schedule-by-hour entry list, like the app) ──── */
.tl-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--al);
}
.tl-entry.is-new { animation: entrance 0.35s var(--ease); }
.tl-time {
  font-family: var(--font-m);
  font-size: 10px;
  color: var(--am);
  min-width: 38px;
}
.tl-emoji { font-size: 14px; }
.tl-tx strong { display: block; font-size: 12.5px; }
.tl-tx em { display: block; font-style: normal; font-size: 10px; color: var(--am); margin-top: 1px; }
.tl-add { margin-top: 12px; width: 100%; }

/* ── Appearance ────────────────────────────────────────────── */
.th-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
.th-card {
  border: 1.6px solid var(--al);
  border-radius: 14px;
  padding: 9px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--af);
  text-align: center;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.th-card:active { transform: scale(0.96); }
.th-card.is-active {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent);
}
.th-prev {
  display: block;
  height: 52px;
  border-radius: 9px;
  border: 1px solid var(--al);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.th-prev i { position: absolute; left: 9px; height: 5px; border-radius: 3px; }
.th-prev i:first-child { top: 10px; right: 32%; }
.th-prev i:last-child { top: 23px; right: 55%; }
.th-prev--light { background: #fff; }
.th-prev--light i { background: #1c1c21; }
.th-prev--light i:last-child { background: #b9bec2; }
.th-prev--dark { background: #101013; }
.th-prev--dark i { background: #f2f2f4; }
.th-prev--dark i:last-child { background: #4b4b53; }

.th-dots { display: flex; gap: 13px; padding: 2px 2px 4px; }
.th-dot {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--d);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.th-dot:active { transform: scale(0.9); }
.th-dot.is-active { box-shadow: 0 0 0 3px var(--ab), 0 0 0 5.5px var(--d); }

.th-size {
  width: 100%;
  accent-color: var(--app-accent);
  margin: 2px 0 4px;
}
.th-sample {
  background: var(--ab2);
  border-radius: 14px;
  padding: 13px 14px;
  margin-top: 12px;
}
.th-sample__t { margin: 0 0 3px; font-size: calc(13px * var(--app-scale)); font-weight: 800; }
.th-sample__s { margin: 0; font-size: calc(11px * var(--app-scale)); color: var(--am); }

/* ── Reduced motion inside the phone ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scr, .sheet-item, .p-toast { transition: none; animation: none; opacity: 1; }
  .scr { transform: none; }
  .scr:not(.is-active) { opacity: 0; }
}