/* Ads retain their compact table/phone-summary layout in style.css.
   Keep direct receipt navigation from the redesign without tall cards. */
.ads-linked-receipts { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 100%; }
.ads-linked-receipts > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  flex: 1 1 auto;
  padding: 5px;
  border: 1px solid var(--ui-line, #e2e7f1);
  border-radius: 8px;
  background: var(--ui-surface-soft, #f5f7fc);
  color: var(--ui-accent, #0649ed);
  font-size: 11px;
  font-weight: 650;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ads-linked-receipts > button > span { min-width: 0; }
.ads-linked-receipts > button :is(i, svg) { flex-shrink: 0; }
.ads-linked-receipts > button:focus-visible { outline: 3px solid var(--ui-accent, #0649ed); outline-offset: 2px; }

/* Read-only setup progress: no horizontal rail or unvalidated jump controls. */
.studio-wizard-progress { min-width: 0; margin-bottom: 24px; }
.studio-wizard-current { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 5px 12px; margin-bottom: 16px; font-size: 12px; color: var(--ui-muted, #66758d); }
.studio-wizard-current strong { color: var(--ui-ink, #172236); font-size: 15px; overflow-wrap: anywhere; }
.studio-wizard-steps { display: grid; grid-template-columns: repeat(var(--studio-step-count), minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.studio-wizard-step { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; min-width: 0; color: var(--ui-muted, #66758d); }
.studio-wizard-step::before { content: ''; position: absolute; inset-inline: 0; top: 17px; height: 2px; background: var(--ui-line, #e2e7f1); }
.studio-wizard-step:first-child::before { inset-inline-start: 50%; }
.studio-wizard-step:last-child::before { inset-inline-end: 50%; }
.studio-wizard-step-number { display: grid; place-items: center; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ui-line, #e2e7f1); background: var(--ui-surface, #fff); font-size: 13px; font-weight: 750; }
.studio-wizard-step-label { font-size: 11px; font-weight: 650; text-align: center; overflow-wrap: anywhere; line-height: 1.5; }
.studio-wizard-step.is-current { color: var(--ui-accent, #0649ed); }
.studio-wizard-step.is-current .studio-wizard-step-number { background: #0649ed; border-color: #0649ed; color: white; }
.studio-wizard-step.is-complete .studio-wizard-step-number { background: var(--ui-accent-soft, #eaf0ff); border-color: var(--ui-accent, #0649ed); color: var(--ui-accent, #0649ed); }

/* Full amounts remain text, never ellipsized or clipped. Rows move their
   amount/actions below names on phones instead of squeezing either side. */
.workspace-money-value, .clothes-kpi-value, .clothes-kpi-note { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; font-variant-numeric: tabular-nums; }
.clothes-kpi-card, .clothes-kpi-layout { min-width: 0; }
.clothes-kpi-layout > .min-w-0 { flex: 1; max-width: 100%; }
.workspace-wallet-row, .workspace-subscription-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: start; gap: 8px 16px; min-width: 0; }
.workspace-wallet-row > *, .workspace-subscription-row > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.workspace-wallet-amount { text-align: end; font-variant-numeric: tabular-nums; }
.workspace-subscription-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; min-width: 0; }
.workspace-subscription-actions > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.workspace-subscription-actions > button { min-height: 44px; flex-shrink: 0; }
.studio-wallet-request { min-width: 0; }
.studio-wallet-request > div { min-width: 0; max-width: 100%; flex: 1 1 200px; overflow-wrap: anywhere; }
.studio-wallet-request .studio-wallet-request-actions { justify-content: flex-end; }
.studio-wallet-request-actions :is(button, label) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.studio-wallet-charge-preview > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.studio-wallet-charge-preview > input { flex: 0 1 144px; }
@media (max-width: 599px) {
  .studio-wizard-step-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .workspace-wallet-row, .workspace-subscription-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .workspace-wallet-amount { text-align: start; }
  .workspace-subscription-actions { justify-content: space-between; }
  .studio-wallet-request .studio-wallet-request-actions { justify-content: flex-start; }
  .clothes-kpi-layout { flex-direction: column; align-items: flex-start; }
  .clothes-kpi-layout > .min-w-0 { width: 100%; }
  .clothes-kpi-card .clothes-kpi-value { font-size: 17px; line-height: 1.5; }
}

/* Albayan Studio v2 frame (P2-02, P2-08; src/systems/ads_studio/15h-studio-shell.js).
   Phones and tablets (<= 900px): a sticky header and a fixed bottom section bar, the same
   breakpoint as the app shell. Wider: the same sections as a side rail. Colours come from the
   --ui-* tokens, so light and dark follow the app theme; insets stay physical (a left notch is on
   the left in Arabic too); every control is at least 44px; nothing may widen the page. */
.studio-v2-frame { min-width: 0; max-width: 100%; color: var(--ui-ink); }
.studio-v2-frame [hidden] { display: none !important; }
.studio-v2-frame :is(button, a):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
.studio-v2-icon { width: 20px; height: 20px; flex-shrink: 0; }
.studio-v2-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 60px; margin: -4px 0 16px; padding: max(8px, var(--app-safe-top, 0px)) 0 10px; background: var(--ui-canvas); border-bottom: 1px solid var(--ui-line); }
.studio-v2-heading { flex: 1 1 auto; min-width: 0; }
.studio-v2-kicker { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-v2-heading-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-width: 0; }
/* The "Classic view" link (P6-06): a 44 px touch target that reads as one line of the kicker (negative margins keep the header height). */
.studio-v2-header-link { display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; padding: 0 2px; border: 0; background: transparent; color: var(--ui-accent); font-size: 12px; font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; }
.studio-v2-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-header-actions { display: flex; flex-shrink: 0; align-items: center; gap: 6px; }
.studio-v2-icon-btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); color: var(--ui-ink); }
.studio-v2-icon-btn[aria-current="page"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-v2-body, .studio-v2-main, .studio-v2-screen { min-width: 0; max-width: 100%; }
.studio-v2-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 38; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 6px max(6px, var(--app-safe-right, 0px)) max(6px, var(--app-safe-bottom, 0px)) max(6px, var(--app-safe-left, 0px)); background: var(--ui-surface); border-top: 1px solid var(--ui-line); }
.studio-v2-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 56px; padding: 4px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--ui-muted); font-size: 11px; font-weight: 650; line-height: 1.25; text-align: center; }
.studio-v2-nav-item > span { display: block; max-width: 100%; overflow-wrap: anywhere; }
.studio-v2-nav-icon { width: 22px; height: 22px; flex-shrink: 0; }
.studio-v2-nav-item[aria-current="page"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-v2-nav.is-staff .studio-v2-nav-item { font-size: 10.5px; }
body.keyboard-open .studio-v2-nav { display: none !important; }
.studio-v2-soon { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 32px 20px; text-align: center; background: var(--ui-surface); border: 1px dashed var(--ui-line); border-radius: var(--ui-radius); }
.studio-v2-soon-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-v2-soon-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-soon-text { margin: 0; font-size: 15px; font-weight: 700; color: var(--ui-accent); overflow-wrap: anywhere; }
.studio-v2-soon-note { max-width: 32rem; margin: 0; font-size: 14px; line-height: 1.7; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-v2-gate { min-width: 0; margin-top: 16px; }
.studio-v2-list { display: flex; flex-direction: column; margin-top: 16px; overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.studio-v2-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 52px; padding: 10px 16px; border: 0; border-top: 1px solid var(--ui-line); background: transparent; color: var(--ui-ink); font-size: 15px; font-weight: 650; text-align: start; }
.studio-v2-row:first-child { border-top: 0; }
.studio-v2-row-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.studio-v2-row-value { flex-shrink: 0; max-width: 50%; font-size: 13px; font-weight: 600; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-v2-row.is-danger { color: #be123c; }
html.dark .studio-v2-row.is-danger { color: #fda4af; }
.studio-v2-builder { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.studio-v2-step-text { margin: 0; font-size: 14px; font-weight: 700; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.studio-v2-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--ui-muted); }
.studio-v2-step-dot { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ui-line); border-radius: 50%; background: var(--ui-surface); font-size: 13px; font-weight: 750; }
.studio-v2-step-name { max-width: 100%; font-size: 11px; font-weight: 650; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.studio-v2-step.is-current { color: var(--ui-accent); }
.studio-v2-step.is-current .studio-v2-step-dot { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-surface); }
.studio-v2-step.is-done .studio-v2-step-dot { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-v2-builder-actions { display: flex; justify-content: flex-end; }
.studio-v2-action { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 48px; max-width: 100%; padding: 10px 22px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); color: var(--ui-ink); font-size: 15px; font-weight: 750; white-space: normal; overflow-wrap: anywhere; }
.studio-v2-action.is-primary { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-surface); }
.studio-v2-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 24rem; margin: 64px auto 0; padding: 28px 20px; text-align: center; color: var(--ui-muted); background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.studio-v2-loading p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.studio-v2-spinner { width: 32px; height: 32px; border: 4px solid var(--ui-accent-soft); border-top-color: var(--ui-accent); border-radius: 50%; animation: studio-v2-spin 0.9s linear infinite; }
@keyframes studio-v2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .studio-v2-spinner { animation: none; } }
@media (max-width: 599px) {
  .studio-v2-step-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .studio-v2-builder-actions > .studio-v2-action { flex: 1 1 auto; }
}
@media (max-width: 359px) {
  .studio-v2-header { gap: 6px; }
  .studio-v2-header-actions { gap: 4px; }
  .studio-v2-title { font-size: 18px; }
  .studio-v2-nav-item { font-size: 10px; }
  .studio-v2-nav.is-staff .studio-v2-nav-item { font-size: 9.5px; }
}
@media (min-width: 901px) {
  .studio-v2-header { margin-top: 0; padding-top: 12px; }
  .studio-v2-title { font-size: 24px; }
  .studio-v2-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
  .studio-v2-frame[data-focus="1"] .studio-v2-body { grid-template-columns: minmax(0, 1fr); }
  .studio-v2-nav { position: sticky; top: 88px; right: auto; bottom: auto; left: auto; z-index: 1; grid-auto-flow: row; grid-auto-columns: auto; gap: 4px; padding: 8px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
  .studio-v2-nav-item { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 46px; padding: 8px 12px; font-size: 14px; text-align: start; }
  .studio-v2-nav.is-staff .studio-v2-nav-item { font-size: 14px; }
  .studio-v2-nav-icon { width: 20px; height: 20px; }
}

/* Studio v2 Home and My ads (P2-03, P2-04; src/systems/ads_studio/15j-studio-home.js, 15k-studio-ads.js).
   Cards on the --ui-* surfaces; the stage tones (never colour alone: every chip has its icon and
   words) are the tokens below, light and dark. The sheets are .mobile-dialog-overlay surfaces on
   <body> (the phone's Back closes them first), so they carry the tokens too. Nothing may widen the
   page: long names and amounts wrap; the fixed section bar never covers the last card. */
.studio-v2-frame, .studio-ads-sheet {
  --studio-slate-fg: #475569; --studio-slate-bg: #f1f5f9;
  --studio-amber-fg: #92400e; --studio-amber-bg: #fef3c7;
  --studio-orange-fg: #9a3412; --studio-orange-bg: #ffedd5;
  --studio-blue-fg: #1d4ed8; --studio-blue-bg: #dbeafe;
  --studio-redorange-fg: #b42318; --studio-redorange-bg: #fee4e2;
  --studio-green-fg: #166534; --studio-green-bg: #dcfce7;
  --studio-slateblue-fg: #334e68; --studio-slateblue-bg: #e3ecf5;
  --studio-rose-fg: #be123c; --studio-rose-bg: #ffe4e6;
  --studio-red-fg: #b91c1c; --studio-red-bg: #fee2e2;
}
html.dark :is(.studio-v2-frame, .studio-ads-sheet) {
  --studio-slate-fg: #cbd5e1; --studio-slate-bg: #1e293b;
  --studio-amber-fg: #fcd34d; --studio-amber-bg: #422006;
  --studio-orange-fg: #fdba74; --studio-orange-bg: #431407;
  --studio-blue-fg: #93c5fd; --studio-blue-bg: #172554;
  --studio-redorange-fg: #fda29b; --studio-redorange-bg: #3f1210;
  --studio-green-fg: #86efac; --studio-green-bg: #052e16;
  --studio-slateblue-fg: #a5c0dc; --studio-slateblue-bg: #1b2a3b;
  --studio-rose-fg: #fda4af; --studio-rose-bg: #4c0519;
  --studio-red-fg: #fca5a5; --studio-red-bg: #450a0a;
}
:is(.studio-v2-frame, .studio-ads-sheet) [data-tone] { --studio-fg: var(--studio-slate-fg); --studio-bg: var(--studio-slate-bg); }
:is(.studio-v2-frame, .studio-ads-sheet) [data-tone="amber"] { --studio-fg: var(--studio-amber-fg); --studio-bg: var(--studio-amber-bg); }
:is(.studio-v2-frame, .studio-ads-sheet) [data-tone="orange"] { --studio-fg: var(--studio-orange-fg); --studio-bg: var(--studio-orange-bg); }
:is(.studio-v2-frame, .studio-ads-sheet) [data-tone="blue"] { --studio-fg: var(--studio-blue-fg); --studio-bg: var(--studio-blue-bg); }
:is(.studio-v2-frame, .studio-ads-sheet) [data-tone="red-orange"] { --studio-fg: var(--studio-redorange-fg); --studio-bg: var(--studio-redorange-bg); }
:is(.studio-v2-frame, .studio-ads-sheet) [data-tone="green"] { --studio-fg: var(--studio-green-fg); --studio-bg: var(--studio-green-bg); }
:is(.studio-v2-frame, .studio-ads-sheet) [data-tone="slate-blue"] { --studio-fg: var(--studio-slateblue-fg); --studio-bg: var(--studio-slateblue-bg); }
:is(.studio-v2-frame, .studio-ads-sheet) [data-tone="rose"] { --studio-fg: var(--studio-rose-fg); --studio-bg: var(--studio-rose-bg); }
:is(.studio-v2-frame, .studio-ads-sheet) [data-tone="red"] { --studio-fg: var(--studio-red-fg); --studio-bg: var(--studio-red-bg); }
.studio-home, .studio-ads, .studio-ads-detail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.studio-home :is(p, h2, h3, dl, dd, ul, ol), .studio-ads :is(p, h2, h3, ul), .studio-ads-detail :is(p, h2, h3, dl, dd, ul, ol) { margin: 0; }
.studio-home :is(ul, ol), .studio-ads ul, .studio-ads-detail :is(ul, ol) { padding: 0; list-style: none; }
.studio-home-block, .studio-ads-box { min-width: 0; padding: 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); overflow-wrap: anywhere; }
.studio-home-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-bottom: 12px; min-width: 0; }
.studio-home-h2 { font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--ui-ink); }
.studio-home-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--ui-accent); font-size: 14px; font-weight: 750; }
.studio-home-empty { font-size: 14px; line-height: 1.6; color: var(--ui-muted); }
.studio-home-problem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--ui-surface-soft); font-size: 14px; color: var(--ui-ink); }
.studio-home-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--studio-amber-bg); color: var(--studio-amber-fg); font-size: 14px; font-weight: 700; line-height: 1.6; }
.studio-home-banner > p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.studio-home-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.studio-home-money-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--ui-surface-soft); }
.studio-home-money-label { font-size: 13px; font-weight: 750; color: var(--ui-muted); }
.studio-home-money-value { font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--ui-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.studio-home-money-note { font-size: 12px; line-height: 1.5; color: var(--ui-muted); }
.studio-home-money-meta { font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--ui-accent); }
.studio-home-needs, .studio-home-steps, .studio-home-trackers, .studio-ads-list { display: flex; flex-direction: column; gap: 10px; }
.studio-home-need, .studio-home-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px 12px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--ui-surface-soft); }
.studio-home-need { border-inline-start: 4px solid var(--studio-fg); }
.studio-home-need > .studio-v2-action, .studio-home-step > .studio-v2-action, .studio-home-step > .studio-home-step-status { grid-column: 1 / -1; justify-self: stretch; }
.studio-home-need-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--studio-bg); color: var(--studio-fg); }
.studio-home-need-text, .studio-home-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.studio-home-need-title, .studio-home-step-title { font-size: 15px; font-weight: 750; line-height: 1.5; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-home-need-note, .studio-home-step-hint { font-size: 13px; line-height: 1.6; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-home-step-number { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ui-line); border-radius: 50%; background: var(--ui-surface); font-size: 13px; font-weight: 800; color: var(--ui-muted); }
.studio-home-step.is-next .studio-home-step-number { border-color: var(--ui-accent); color: var(--ui-accent); }
.studio-home-step.is-done .studio-home-step-number { border-color: var(--studio-green-fg); background: var(--studio-green-bg); color: var(--studio-green-fg); }
.studio-home-step-status { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; font-weight: 750; color: var(--ui-muted); }
.studio-home-step-status.is-done { color: var(--studio-green-fg); }
.studio-home-tracker, .studio-ads-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; min-width: 0; min-height: 44px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); color: var(--ui-ink); text-align: start; font: inherit; }
.studio-home-tracker-name, .studio-ads-card-name { max-width: 100%; font-size: 15px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.studio-home-tracker-meta, .studio-ads-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: 100%; font-size: 12px; line-height: 1.5; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-home-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.studio-home-goal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; height: 100%; min-width: 0; min-height: 44px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface-soft); color: var(--ui-ink); text-align: start; font: inherit; }
.studio-home-goal[disabled] { opacity: 0.55; }
.studio-home-goal-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-home-goal-title { font-size: 15px; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; }
.studio-home-goal-hint { font-size: 12px; line-height: 1.5; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-stage-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: var(--studio-bg); color: var(--studio-fg); font-size: 12px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.studio-stage-chip-icon { width: 16px; height: 16px; flex-shrink: 0; }
.studio-checked { font-size: 12px; color: var(--ui-muted); }
.studio-checked.is-stale { font-weight: 750; color: var(--studio-amber-fg); }
.studio-flags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.studio-flag { display: inline-flex; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: var(--studio-amber-bg); color: var(--studio-amber-fg); font-size: 12px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.studio-ads-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.studio-ads-filters { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.studio-ads-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface); color: var(--ui-ink); font-size: 14px; font-weight: 700; }
.studio-ads-filter[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-ads-count { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--ui-surface-soft); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
:is(.studio-ads-bar, .studio-ads-actions, .studio-ads-contact) .studio-v2-action { gap: 8px; }
.studio-ads-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.studio-ads-name { font-size: 20px; font-weight: 800; line-height: 1.4; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-ads-variant { font-size: 13px; line-height: 1.6; color: var(--ui-muted); }
.studio-ads-next { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 650; color: var(--ui-ink); }
.studio-ads-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; width: 100%; }
.studio-ads-track-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--ui-muted); }
.studio-ads-track-step::before { content: ''; position: absolute; top: 13px; inset-inline: 0; height: 2px; background: var(--ui-line); }
.studio-ads-track-step:first-child::before { inset-inline-start: 50%; }
.studio-ads-track-step:last-child::before { inset-inline-end: 50%; }
.studio-ads-track-step.is-done::before { background: var(--ui-accent); }
.studio-ads-track-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--ui-line); border-radius: 50%; background: var(--ui-surface); }
.studio-ads-track-icon { width: 16px; height: 16px; }
.studio-ads-track-step.is-done .studio-ads-track-dot { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-ads-track-step.is-current { color: var(--ui-ink); font-weight: 750; }
.studio-ads-track-step.is-current .studio-ads-track-dot { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-surface); }
.studio-ads-track-step.is-side .studio-ads-track-dot { border-color: var(--studio-fg); background: var(--studio-bg); color: var(--studio-fg); }
.studio-ads-track-name { max-width: 100%; font-size: 11px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.studio-ads-track-none { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ui-muted); }
.studio-ads-detail .studio-ads-track-text { display: none; font-size: 13px; font-weight: 700; color: var(--ui-ink); }
.studio-ads-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.studio-ads-actions > .studio-v2-action { flex: 1 1 auto; }
.studio-v2-action.studio-ads-danger { border-color: var(--studio-rose-fg); color: var(--studio-rose-fg); }
.studio-v2-action.is-primary.studio-ads-danger { background: var(--studio-rose-fg); color: var(--ui-surface); }
:is(.studio-home, .studio-ads, .studio-ads-detail, .studio-ads-sheet) .studio-v2-action[disabled] { opacity: 0.6; }
.studio-ads-detail .studio-ads-h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; line-height: 1.5; color: var(--ui-ink); }
.studio-ads-box.studio-ads-reason { border-color: var(--studio-fg); background: var(--studio-bg); }
.studio-ads-reason-label { font-size: 14px; font-weight: 750; color: var(--studio-fg); }
.studio-ads-detail .studio-ads-reason-note { margin-top: 6px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; color: var(--ui-ink); }
.studio-ads-detail .studio-ads-money-meaning { margin-bottom: 8px; font-size: 13px; line-height: 1.6; color: var(--ui-muted); }
.studio-ads-money-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding: 8px 0; border-top: 1px solid var(--ui-line); font-size: 14px; color: var(--ui-ink); }
.studio-ads-money-row:first-child { border-top: 0; }
.studio-ads-money-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.studio-ads-money-amount { flex-shrink: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.studio-ads-chain + .studio-ads-chain { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ui-line); }
.studio-ads-detail .studio-ads-chain-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ui-line); font-size: 15px; font-weight: 800; color: var(--ui-ink); }
.studio-ads-detail .studio-ads-money-note { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--ui-muted); }
.studio-ads-results-used { font-size: 16px; font-weight: 800; color: var(--ui-ink); }
.studio-ads-detail .studio-ads-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.studio-ads-stats > div { min-width: 0; padding: 8px; border-radius: 12px; background: var(--ui-surface-soft); text-align: center; }
.studio-ads-stats dt { font-size: 11px; font-weight: 700; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-ads-stats dd { font-size: 15px; font-weight: 800; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-ads-detail .studio-ads-brief > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 0; cursor: pointer; list-style: none; }
.studio-ads-brief > summary::-webkit-details-marker { display: none; }
.studio-ads-brief-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--ui-muted); transition: transform 0.15s; }
.studio-ads-brief[open] .studio-ads-brief-icon { transform: rotate(180deg); }
.studio-ads-detail .studio-ads-brief-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.studio-ads-brief-list dt { font-size: 12px; font-weight: 700; color: var(--ui-muted); }
.studio-ads-brief-list dd { font-size: 14px; line-height: 1.6; color: var(--ui-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.studio-ads-missing { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--ui-ink); }
.studio-ads-missing > p { margin: 0; }
.studio-ads-sheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; background: rgb(15 23 42 / 55%); }
.studio-ads-sheet-panel { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 32rem; margin-inline: auto; padding: 20px 20px max(20px, var(--app-safe-bottom, 0px)); border-radius: 20px 20px 0 0; background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 -8px 30px rgb(15 23 42 / 25%); overflow-wrap: anywhere; }
.studio-ads-sheet-panel :is(p, h2) { margin: 0; }
.studio-ads-sheet-title { font-size: 18px; font-weight: 800; line-height: 1.4; }
.studio-ads-sheet-name { font-size: 14px; font-weight: 700; color: var(--ui-muted); }
.studio-ads-sheet-text { font-size: 14px; line-height: 1.7; }
.studio-ads-sheet-note { font-size: 12px; line-height: 1.6; color: var(--ui-muted); }
.studio-ads-sheet-error { padding: 10px 12px; border-radius: 12px; background: var(--studio-rose-bg); color: var(--studio-rose-fg); font-size: 13px; font-weight: 700; line-height: 1.6; }
.studio-ads-sheet-error[hidden] { display: none; }
.studio-ads-soon { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 12px; font-weight: 800; }
.studio-ads-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-ads-contact > p { flex: 1 1 100%; }
.studio-ads-contact > a { text-decoration: none; }
.studio-ads-sheet-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 4px; }
.studio-ads-sheet :is(button, a):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
@media (min-width: 600px) {
  .studio-home-need { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .studio-home-need > .studio-v2-action { grid-column: auto; justify-self: end; }
  .studio-home-step { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .studio-home-step > .studio-v2-action, .studio-home-step > .studio-home-step-status { grid-column: auto; justify-self: end; }
  .studio-home-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-home-money { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .studio-ads-sheet { justify-content: center; padding: 16px; }
  .studio-ads-sheet-panel { border-radius: var(--ui-radius); }
}
@media (max-width: 900px) {
  .studio-home, .studio-ads, .studio-ads-detail { padding-bottom: calc(80px + var(--app-safe-bottom, 0px)); }
}
@media (max-width: 599px) {
  .studio-ads-track-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .studio-ads-detail .studio-ads-track-text { display: block; }
}
@media (max-width: 359px) {
  .studio-home-money-value { font-size: 19px; }
  .studio-home-block, .studio-ads-box { padding: 14px 12px; }
  .studio-ads-track-name { font-size: 10px; }
}
/* Albayan Studio v2 request builder (P2-05; src/systems/ads_studio/15l-studio-builder.js).
   The frame's --ui-* tokens plus four local tones that follow the theme (declared as custom
   properties here and switched for html.dark). Cards, chips and rows wrap; nothing scrolls
   sideways; every control is at least 44px; a fixed field gets an outline (not colour alone). */
.studio-b { --studio-b-ok: #047857; --studio-b-warn: #b45309; --studio-b-orange: #c2410c; --studio-b-danger: #be123c; gap: 16px; width: 100%; max-width: 760px; margin-inline: auto; }
html.dark .studio-b { --studio-b-ok: #6ee7b7; --studio-b-warn: #fcd34d; --studio-b-orange: #fdba74; --studio-b-danger: #fda4af; }
.studio-b-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.studio-b-title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-b-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; border-radius: 14px; }
.studio-b .is-fix { outline: 3px solid var(--ui-accent); outline-offset: 4px; animation: studio-b-pulse 1.2s ease-out 2; }
@keyframes studio-b-pulse { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .studio-b .is-fix { animation: none; } }
.studio-b-label { margin: 0; font-size: 14px; font-weight: 750; line-height: 1.5; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-b-hint, .studio-b-count { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-b-count { text-align: end; }
.studio-b-error { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--studio-b-danger); overflow-wrap: anywhere; }
.studio-b-field.is-invalid .studio-b-input, .studio-b-field.is-invalid .studio-b-photos { border-color: var(--studio-b-danger); }
.studio-b-input { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 16px; line-height: 1.5; }
textarea.studio-b-input { resize: vertical; }
.studio-b-input:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 1px; }
.studio-b-sub { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.studio-b-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.studio-b-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.studio-b-pair > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.studio-b-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.studio-b-choice, .studio-b-shortcut { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 64px; padding: 12px 14px; border: 2px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; text-align: start; }
.studio-b-choice[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.studio-b-choice-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--ui-surface-soft); color: var(--ui-accent); }
.studio-b-choice-text, .studio-b-shortcut > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.studio-b-choice-title { font-size: 15px; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; }
.studio-b-choice-hint { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-b-shortcut { border-style: dashed; background: var(--ui-surface-soft); color: var(--ui-ink); }
.studio-b-shortcut > .studio-v2-icon { color: var(--ui-accent); }
.studio-b-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.studio-b-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 14px; font-weight: 650; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.studio-b-chip > span { min-width: 0; }
.studio-b-chip[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-surface); }
.studio-b-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-width: 44px; min-height: 44px; max-width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ui-accent); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; text-align: start; overflow-wrap: anywhere; }
.studio-b-link > span { min-width: 0; }
.studio-b-link.is-strong { background: var(--ui-accent-soft); }
.studio-b-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-b-note > span { min-width: 0; }
.studio-b-note.is-warn { color: var(--studio-b-warn); }
.studio-b-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); color: var(--ui-ink); font-size: 14px; line-height: 1.6; }
.studio-b-banner > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.studio-b-banner strong { display: block; }
.studio-b-banner-note { display: block; color: var(--ui-muted); white-space: pre-wrap; }
.studio-b-banner > .studio-b-banner-actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
.studio-b-banner.is-warn { border-color: var(--studio-b-warn); color: var(--studio-b-warn); }
.studio-b-banner.is-orange { border-color: var(--studio-b-orange); border-inline-start-width: 4px; }
.studio-b-banner.is-danger { border-color: var(--studio-b-danger); color: var(--studio-b-danger); }
.studio-b-box { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface-soft); }
.studio-b-total { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.5; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-b-wallet { display: flex; flex-direction: column; gap: 6px; min-width: 0; border-radius: 12px; }
.studio-b-wallet-line { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.6; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-b-wallet-line.is-ok { color: var(--studio-b-ok); }
.studio-b-wallet-line.is-short { color: var(--studio-b-danger); }
.studio-b-wallet-line.is-pending { color: var(--studio-b-warn); }
.studio-b-money { position: relative; min-width: 0; }
.studio-b-money-sign { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); font-size: 18px; font-weight: 800; color: var(--ui-accent); pointer-events: none; }
.studio-b-money .studio-b-input { padding-left: 34px; font-size: 20px; font-weight: 800; }
.studio-b-photos { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border: 1px dashed var(--ui-line); border-radius: 16px; }
.studio-b-photos:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
.studio-b-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.studio-b-photo { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface-soft); }
.studio-b-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.studio-b-photo-remove { position: absolute; top: 4px; inset-inline-end: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--ui-ink); color: var(--ui-surface); opacity: .88; }
.studio-b-photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1; min-width: 44px; min-height: 44px; padding: 6px; border: 2px dashed var(--ui-accent); border-radius: 14px; background: var(--ui-accent-soft); color: var(--ui-accent); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.studio-b-posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.studio-b-post { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 64px; padding: 8px; border: 2px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; text-align: start; }
.studio-b-post[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.studio-b-post img, .studio-b-post-empty { flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; background: var(--ui-surface-soft); object-fit: cover; }
.studio-b-post-empty { display: grid; place-items: center; color: var(--ui-muted); }
.studio-b-post-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.studio-b-post-excerpt { font-size: 14px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.studio-b-post-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ui-muted); }
.studio-b-details { min-width: 0; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); }
.studio-b-details > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 14px; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-b-details > summary > span { min-width: 0; }
.studio-b-details > .studio-b-field { padding: 0 12px 12px; }
.studio-b-summary { display: flex; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); }
.studio-b-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "term edit" "value edit"; align-items: center; gap: 2px 8px; padding-block: 10px; padding-inline: 14px 6px; border-top: 1px solid var(--ui-line); }
.studio-b-summary-row:first-child { border-top: 0; }
.studio-b-summary-row dt { grid-area: term; margin: 0; font-size: 12px; font-weight: 700; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-b-summary-row dd { grid-area: value; margin: 0; font-size: 14px; font-weight: 650; line-height: 1.5; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-b-edit { grid-area: edit; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ui-accent); }
.studio-b-problems { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--studio-b-danger); border-radius: 16px; background: var(--ui-surface); }
.studio-b-problems ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.studio-b-problems li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; font-size: 14px; line-height: 1.5; color: var(--ui-ink); }
.studio-b-problems li > span { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.studio-b-steps-next { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-inline-start: 22px; font-size: 14px; line-height: 1.6; color: var(--ui-ink); }
.studio-b-steps-next li { overflow-wrap: anywhere; }
.studio-b-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); font-size: 14px; line-height: 1.6; color: var(--ui-ink); cursor: pointer; }
.studio-b-check input { flex-shrink: 0; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ui-accent); }
.studio-b-check span { min-width: 0; overflow-wrap: anywhere; }
.studio-b-footer { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 4px; padding: 12px 0 max(12px, var(--app-safe-bottom, 0px)); background: var(--ui-canvas); border-top: 1px solid var(--ui-line); }
.studio-b-save { flex: 1 1 150px; min-width: 0; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-b-save[data-state="error"], .studio-b-save[data-state="conflict"] { color: var(--studio-b-danger); }
.studio-b-save[data-state="offline"] { color: var(--studio-b-warn); }
.studio-b-footer > .studio-v2-action { gap: 8px; }
.studio-b .studio-v2-action:disabled { opacity: .55; cursor: not-allowed; }
body.keyboard-open .studio-b-save { display: none; }
body.keyboard-open .studio-b-footer { padding-top: 6px; padding-bottom: 6px; }
.studio-b-sent { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; padding: 28px 18px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); text-align: center; }
.studio-b-sent-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: var(--ui-accent-soft); color: var(--studio-b-ok); }
.studio-b-sent-money { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.5; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-b-sent .studio-b-row { justify-content: center; }
.studio-b-waiting { margin-top: 24px; }
@media (min-width: 600px) {
  .studio-b-choices, .studio-b-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .studio-b-choice { gap: 10px; padding: 10px 12px; }
  .studio-b-chip { padding: 8px 12px; font-size: 13px; }
}
/* Albayan Studio v2 wallet and account (P2-06, P2-07; src/systems/ads_studio/15m-studio-wallet.js).
   The same --ui-* tokens as the frame. The status tones (waiting, done, stop) are named once here,
   for light and dark, and a tone never stands alone: every chip also has its icon and words.
   Amounts wrap instead of widening the page; every control is at least 44px. */
.studio-v2-frame, .studio-v2-wsheet-overlay {
  --studio-v2-tone-warn-ink: #92400e; --studio-v2-tone-warn-soft: #fef3c7;
  --studio-v2-tone-ok-ink: #047857; --studio-v2-tone-ok-soft: #d1fae5;
  --studio-v2-tone-bad-ink: #be123c; --studio-v2-tone-bad-soft: #ffe4e6;
}
html.dark .studio-v2-frame, html.dark .studio-v2-wsheet-overlay {
  --studio-v2-tone-warn-ink: #fcd34d; --studio-v2-tone-warn-soft: #3b2a0c;
  --studio-v2-tone-ok-ink: #6ee7b7; --studio-v2-tone-ok-soft: #0f3a2e;
  --studio-v2-tone-bad-ink: #fda4af; --studio-v2-tone-bad-soft: #4a1422;
}
.studio-v2-wallet, .studio-v2-account { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 100%; }
.studio-v2-wallet-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.studio-v2-wallet-card { min-width: 0; margin: 0; padding: 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.studio-v2-wallet-h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-wallet-h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; font-weight: 800; line-height: 1.5; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-wallet-note { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-v2-wallet-note .studio-v2-icon { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.studio-v2-wallet-nowrap { white-space: nowrap; }
.studio-v2-wallet-loading { margin: 0; padding: 24px 16px; font-size: 14px; text-align: center; color: var(--ui-muted); background: var(--ui-surface); border: 1px dashed var(--ui-line); border-radius: var(--ui-radius); overflow-wrap: anywhere; }
.studio-v2-wallet-error { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.6; color: var(--studio-v2-tone-bad-ink); overflow-wrap: anywhere; }
.studio-v2-wallet-error:empty { display: none; }
.studio-v2-wallet-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.studio-v2-wallet-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.studio-v2-wallet-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 16px; }
.studio-v2-wallet-tile.is-main { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.studio-v2-wallet-tile-label { margin: 0; font-size: 13px; font-weight: 750; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-v2-wallet-tile.is-main .studio-v2-wallet-tile-label { color: var(--ui-accent); }
.studio-v2-wallet-amount { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--ui-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.studio-v2-wallet-tile-text { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-v2-wallet-meta { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-wallet-banner { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--ui-surface-soft); color: var(--ui-ink); }
.studio-v2-wallet-banner.is-warn { background: var(--studio-v2-tone-warn-soft); color: var(--studio-v2-tone-warn-ink); }
.studio-v2-wallet-banner.is-bad { background: var(--studio-v2-tone-bad-soft); color: var(--studio-v2-tone-bad-ink); }
.studio-v2-wallet-banner-body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.studio-v2-wallet-banner-title, .studio-v2-wallet-banner-text { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.studio-v2-wallet-banner-title { font-weight: 800; }
.studio-v2-wallet-where > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 750; color: var(--ui-ink); cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.studio-v2-wallet-where > summary::-webkit-details-marker { display: none; }
.studio-v2-wallet-where[open] > summary { margin-bottom: 8px; }
.studio-v2-wallet-where .studio-v2-wallet-kv { margin-bottom: 10px; }
.studio-v2-wallet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.studio-v2-wallet-actions > .studio-v2-action { flex: 1 1 160px; }
.studio-v2-wallet-actions.is-compact > .studio-v2-action { flex: 0 1 auto; }
.studio-v2-wallet-actions.is-nav > .studio-v2-action { flex: 1 1 auto; }
.studio-v2-wallet .studio-v2-action, .studio-v2-account .studio-v2-action, .studio-v2-wsheet .studio-v2-action { gap: 8px; cursor: pointer; }
.studio-v2-wallet .studio-v2-action[disabled], .studio-v2-account .studio-v2-action[disabled] { opacity: 0.55; cursor: not-allowed; }
.studio-v2-wallet-small { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.studio-v2-wallet-danger { border-color: var(--studio-v2-tone-bad-ink); color: var(--studio-v2-tone-bad-ink); }
.studio-v2-wallet-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--ui-surface-soft); color: var(--ui-muted); font-size: 12px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.studio-v2-wallet-chip .studio-v2-icon { width: 16px; height: 16px; }
.studio-v2-wallet-chip.is-warn { background: var(--studio-v2-tone-warn-soft); color: var(--studio-v2-tone-warn-ink); }
.studio-v2-wallet-chip.is-ok { background: var(--studio-v2-tone-ok-soft); color: var(--studio-v2-tone-ok-ink); }
.studio-v2-wallet-chip.is-accent { background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-v2-wallet-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.studio-v2-wallet-pay, .studio-v2-wallet-ad, .studio-v2-wallet-created { display: flex; flex-direction: column; gap: 10px; }
.studio-v2-wallet-code { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; font-weight: 800; letter-spacing: 0.04em; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-wallet-code.is-big { font-size: 26px; }
.studio-v2-wallet-how { margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.7; color: var(--ui-ink); background: var(--ui-surface-soft); border-radius: 12px; overflow-wrap: anywhere; }
.studio-v2-wallet-kv { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.studio-v2-wallet-kv-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; min-width: 0; }
.studio-v2-wallet-kv-row > dt { min-width: 0; font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-v2-wallet-kv-row > dd { min-width: 0; margin: 0; font-size: 14px; font-weight: 750; color: var(--ui-ink); font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; }
.studio-v2-wallet-lines { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.studio-v2-wallet-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--ui-line); }
.studio-v2-wallet-line:first-child { padding-top: 0; border-top: 0; }
.studio-v2-wallet-line-name { flex: 1 1 12rem; min-width: 0; font-size: 14px; font-weight: 650; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-wallet-line-amount { font-size: 14px; font-weight: 800; color: var(--ui-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.studio-v2-wallet-line > .studio-v2-wallet-note { flex: 1 1 100%; }
.studio-v2-wallet-cycle { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--ui-line); }
.studio-v2-wallet-cycle > .studio-v2-wallet-kv { align-self: stretch; }
.studio-v2-wallet-steps { display: flex; flex-direction: column; gap: 6px; align-self: stretch; min-width: 0; margin: 0; padding: 0; list-style: none; }
.studio-v2-wallet-step { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: 13px; color: var(--ui-muted); }
.studio-v2-wallet-step .studio-v2-icon { width: 16px; height: 16px; }
.studio-v2-wallet-step.is-return .studio-v2-icon { color: var(--studio-v2-tone-ok-ink); }
.studio-v2-wallet-step-name { flex: 1 1 10rem; min-width: 0; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-wallet-step-amount { font-weight: 750; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.studio-v2-wallet-step-date { flex: 1 1 100%; font-size: 12px; }
.studio-v2-wallet-empty { padding: 16px; background: var(--ui-surface); border: 1px dashed var(--ui-line); border-radius: var(--ui-radius); }
.studio-v2-wallet-plan { display: flex; flex-direction: column; gap: 10px; }
.studio-v2-wallet-choices { display: grid; gap: 10px; min-width: 0; }
.studio-v2-wallet-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 64px; padding: 14px 16px; border: 2px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); color: var(--ui-ink); text-align: start; cursor: pointer; }
.studio-v2-wallet-choice[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.studio-v2-wallet-choice-icon { display: grid; flex-shrink: 0; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-v2-wallet-choice-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.studio-v2-wallet-choice-title { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.studio-v2-wallet-choice-text { font-size: 13px; line-height: 1.6; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-v2-wallet-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; min-width: 0; }
.studio-v2-wallet-preset { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 52px; padding: 8px 10px; border: 2px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); color: var(--ui-ink); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; overflow-wrap: anywhere; }
.studio-v2-wallet-preset[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-v2-wallet-preset-words { font-size: 12px; font-weight: 650; color: var(--ui-muted); }
.studio-v2-wallet-label { font-size: 14px; font-weight: 700; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-wallet-input { width: 100%; max-width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); color: var(--ui-ink); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.studio-v2-wallet-input:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 1px; }
.studio-v2-wallet-next { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding-inline-start: 22px; list-style: decimal; font-size: 14px; line-height: 1.7; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-wallet-kv-row > dd .studio-v2-wallet-note { font-weight: 500; }
.studio-v2-wallet.is-flow { gap: 14px; }
.studio-v2-account-person { display: flex; align-items: flex-start; gap: 14px; }
.studio-v2-account-avatar { display: grid; flex-shrink: 0; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 20px; font-weight: 800; }
.studio-v2-account-person-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.studio-v2-account-name { margin: 0; font-size: 17px; font-weight: 800; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-v2-account .studio-v2-list { margin-top: 0; }
.studio-v2-account a.studio-v2-row { text-decoration: none; }
.studio-v2-account-whatsapp { display: flex; flex-direction: column; gap: 10px; }
.studio-v2-account-check { display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 44px; padding: 6px 0; font-size: 14px; line-height: 1.7; color: var(--ui-ink); cursor: pointer; overflow-wrap: anywhere; }
.studio-v2-account-check > input { flex-shrink: 0; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--ui-accent); }
.studio-v2-account-check > span { min-width: 0; }
.studio-v2-wsheet-overlay { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; background: rgb(8 12 24 / 60%); }
.studio-v2-wsheet { display: flex; flex-direction: column; gap: 12px; align-self: center; width: 100%; max-width: 32rem; max-height: 90dvh; overflow-y: auto; padding: 22px 16px 16px; background: var(--ui-surface); color: var(--ui-ink); border-radius: var(--ui-radius); box-shadow: 0 -8px 30px rgb(8 12 24 / 25%); }
.studio-v2-wsheet-title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.studio-v2-wsheet-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-v2-wsheet-actions { display: flex; flex-direction: column; gap: 10px; }
.studio-v2-wsheet :is(button):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
@media (max-width: 359px) {
  .studio-v2-wallet-strip { grid-template-columns: minmax(0, 1fr); }
  .studio-v2-wallet-amount { font-size: 20px; }
  .studio-v2-wallet-code.is-big { font-size: 22px; }
}
@media (min-width: 600px) {
  .studio-v2-wsheet-actions { flex-direction: row-reverse; }
  .studio-v2-wsheet-actions > .studio-v2-action { flex: 1 1 0; }
}
@media (min-width: 700px) {
  .studio-v2-wallet-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .studio-v2-wallet-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Albayan Studio help desk (P3-05, P3-08, P3-09, P3-10; src/systems/ads_studio/15n-studio-help.js).
   Tickets, the New ticket form, the thread, our working hours, the inbox, the stop-request sheet and
   the staff tickets section, drawn in BOTH layouts (the classic tab too), so the tones are declared on
   .studio-help itself (light and dark) and every surface uses the --ui-* tokens. A status never
   stands alone: each chip has its icon and words. Every control is at least 44px; long subjects,
   numbers and messages wrap; nothing may widen the page. */
.studio-help, .studio-stop-sheet {
  --studio-help-slate-fg: #475569; --studio-help-slate-bg: #f1f5f9;
  --studio-help-amber-fg: #92400e; --studio-help-amber-bg: #fef3c7;
  --studio-help-blue-fg: #1d4ed8; --studio-help-blue-bg: #dbeafe;
  --studio-help-green-fg: #166534; --studio-help-green-bg: #dcfce7;
  --studio-help-rose-fg: #be123c; --studio-help-rose-bg: #ffe4e6;
}
html.dark :is(.studio-help, .studio-stop-sheet) {
  --studio-help-slate-fg: #cbd5e1; --studio-help-slate-bg: #1e293b;
  --studio-help-amber-fg: #fcd34d; --studio-help-amber-bg: #422006;
  --studio-help-blue-fg: #93c5fd; --studio-help-blue-bg: #172554;
  --studio-help-green-fg: #86efac; --studio-help-green-bg: #052e16;
  --studio-help-rose-fg: #fda4af; --studio-help-rose-bg: #4c0519;
}
.studio-help { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 100%; color: var(--ui-ink); }
.studio-help :is(p, h2, h3, dl, dd, dt, ul, ol) { margin: 0; }
.studio-help :is(ul, ol) { padding: 0; list-style: none; }
.studio-help-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); overflow-wrap: anywhere; }
.studio-help-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-width: 0; }
.studio-help-h2 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--ui-ink); }
.studio-help-h3 { font-size: 14px; font-weight: 800; line-height: 1.5; color: var(--ui-muted); }
.studio-help-note, .studio-help-empty { font-size: 13px; line-height: 1.7; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-help-terms a { color: var(--ui-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.studio-help ul.studio-help-guide { display: flex; flex-direction: column; gap: 6px; padding-inline-start: 18px; font-size: 13px; line-height: 1.7; color: var(--ui-ink); list-style: disc; }
.studio-help-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.studio-help-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.studio-help-chip > span { min-width: 0; }
.studio-help-chip[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-help-chip[disabled] { opacity: 0.55; }
.studio-help-chip-icon, .studio-help-status-icon, .studio-help-ask-icon { width: 16px; height: 16px; flex-shrink: 0; }
.studio-help-list { display: flex; flex-direction: column; gap: 10px; }
.studio-help-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; min-width: 0; min-height: 44px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface-soft); color: var(--ui-ink); text-align: start; font: inherit; cursor: pointer; }
.studio-help-row.is-overdue { border-color: var(--studio-help-rose-fg); }
.studio-help-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 100%; }
.studio-help-number { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; color: var(--ui-ink); }
.studio-help-subject { display: block; max-width: 100%; font-size: 15px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.studio-help-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: 100%; font-size: 12px; line-height: 1.5; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-help-status { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: var(--studio-help-slate-bg); color: var(--studio-help-slate-fg); font-size: 12px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.studio-help-status[data-tone="amber"] { background: var(--studio-help-amber-bg); color: var(--studio-help-amber-fg); }
.studio-help-status[data-tone="blue"] { background: var(--studio-help-blue-bg); color: var(--studio-help-blue-fg); }
.studio-help-status[data-tone="green"] { background: var(--studio-help-green-bg); color: var(--studio-help-green-fg); }
.studio-help-status[data-tone="rose"] { background: var(--studio-help-rose-bg); color: var(--studio-help-rose-fg); }
.studio-help-problem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 14px; background: var(--ui-surface-soft); font-size: 14px; color: var(--ui-ink); }
.studio-help-problem > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.studio-help-msgs { display: flex; flex-direction: column; gap: 10px; }
.studio-help-msg { display: flex; flex-direction: column; gap: 4px; max-width: 92%; min-width: 0; padding: 10px 14px; border-radius: 16px; background: var(--ui-surface-soft); }
.studio-help-msg.is-customer { align-self: flex-end; background: var(--ui-accent-soft); }
.studio-help-msg.is-team { align-self: flex-start; }
.studio-help-msg-from { font-size: 12px; font-weight: 800; color: var(--ui-muted); }
.studio-help-msg.is-team .studio-help-msg-from { color: var(--ui-accent); }
.studio-help-msg-text { font-size: 14px; line-height: 1.7; white-space: pre-wrap; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-help-msg-time { font-size: 11px; color: var(--ui-muted); }
.studio-help-form, .studio-help-reply, .studio-help-thread { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.studio-help-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.studio-help-label { font-size: 14px; font-weight: 750; line-height: 1.5; color: var(--ui-ink); }
.studio-help-input { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 16px; line-height: 1.5; }
textarea.studio-help-input { resize: vertical; }
.studio-help-input:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 1px; }
.studio-help-field.is-invalid .studio-help-input { border-color: var(--studio-help-rose-fg); }
.studio-help-error { font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--studio-help-rose-fg); overflow-wrap: anywhere; }
.studio-help-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.studio-help-actions > .studio-v2-action { flex: 1 1 auto; }
.studio-help .studio-v2-action, .studio-stop-sheet .studio-v2-action { gap: 8px; cursor: pointer; text-decoration: none; }
.studio-help .studio-v2-action[disabled] { opacity: 0.55; cursor: not-allowed; }
.studio-help-small { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.studio-help-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-width: 44px; min-height: 44px; max-width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ui-accent); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; text-align: start; cursor: pointer; overflow-wrap: anywhere; }
.studio-help-link > span { min-width: 0; }
.studio-help-ask { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); color: var(--ui-accent); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; cursor: pointer; overflow-wrap: anywhere; }
.studio-help-ask.is-compact { padding: 6px 10px; font-size: 12px; }
.studio-help-hours { display: flex; flex-direction: column; gap: 4px; }
.studio-help-hours-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--ui-line); font-size: 14px; color: var(--ui-ink); }
.studio-help-hours-row:first-child { border-top: 0; }
.studio-help-hours-row > dd { font-weight: 750; font-variant-numeric: tabular-nums; }
.studio-help-hours-row.is-closed > dd { font-weight: 600; color: var(--ui-muted); }
.studio-help-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-inbox-item { flex-direction: row; align-items: flex-start; gap: 12px; }
.studio-inbox-item.is-unread { border-color: var(--ui-accent); background: var(--ui-surface); }
.studio-inbox-item[disabled] { cursor: default; }
.studio-inbox-icon { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-inbox-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.studio-inbox-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; background: var(--ui-accent); vertical-align: middle; }
.studio-inbox-badge { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--studio-help-rose-fg); color: var(--ui-surface); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.studio-v2-icon-btn { position: relative; }
.studio-stop-sheet .studio-ads-sheet-panel { gap: 10px; }
.studio-stop-number { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; font-weight: 800; letter-spacing: 0.04em; color: var(--ui-ink); }
.studio-stop-urgent { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--studio-help-amber-bg); color: var(--studio-help-amber-fg); }
.studio-stop-urgent .studio-ads-sheet-text, .studio-stop-urgent .studio-ads-sheet-note { color: inherit; }
.studio-help-classic { margin-top: 4px; }
.studio-staff-tickets { margin-top: 24px; }
@media (max-width: 900px) {
  .studio-v2-frame .studio-help { padding-bottom: calc(80px + var(--app-safe-bottom, 0px)); }
}
@media (max-width: 359px) {
  .studio-help-card { padding: 14px 12px; }
  .studio-help-msg { max-width: 100%; }
}
/* Albayan Studio v2 Team desk and admin tools (P3-06b/c/d, P3-17, P3-19, M12; src/systems/ads_studio/15p-studio-desk.js,
   15q-studio-admin.js; loaded from studio-staff.js). Drawn inside the staff frame, so the --ui-* tokens and the
   --studio-*-fg/bg tones of the frame apply (light and dark). Every control is at least 44px; long names, codes and
   server texts wrap; nothing may widen the page at 320-820px. */
.studio-desk { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 100%; }
.studio-desk-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; min-width: 0; }
.studio-desk-heading { flex: 1 1 14rem; min-width: 0; }
.studio-desk-h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-desk-h2-later { margin-top: 10px; }
.studio-desk-h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.5; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-desk-note { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-desk-label { display: block; margin: 0; font-size: 13px; font-weight: 750; line-height: 1.5; color: var(--ui-ink); }
.studio-desk-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.studio-desk-box { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); overflow-wrap: anywhere; }
.studio-desk-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; min-width: 0; min-height: 44px; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-ink); text-align: start; box-shadow: var(--ui-shadow); overflow-wrap: anywhere; }
.studio-desk-card-name { font-size: 16px; font-weight: 800; line-height: 1.4; }
.studio-desk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; line-height: 1.6; color: var(--ui-muted); }
.studio-desk-meta > span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.studio-desk-meta-icon { width: 16px; height: 16px; flex-shrink: 0; }
.studio-desk-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.studio-desk-actions { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.studio-desk-actions > .studio-v2-action { flex: 1 1 10rem; gap: 8px; }
.studio-desk-decision-actions > .studio-v2-action { flex-basis: 8rem; }
.studio-v2-action.studio-desk-small { flex: 0 1 auto; min-height: 44px; padding: 8px 14px; font-size: 14px; gap: 6px; }
.studio-v2-action.studio-desk-more { align-self: center; }
.studio-desk-code { display: inline-block; max-width: 100%; padding: 2px 6px; border-radius: 8px; background: var(--ui-surface-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--ui-ink); overflow-wrap: anywhere; word-break: break-all; }
.studio-desk-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px dashed var(--ui-line); border-radius: 14px; background: var(--ui-surface-soft); }
.studio-desk-name-text { display: flex; flex: 1 1 12rem; flex-direction: column; gap: 4px; min-width: 0; }
.studio-desk-checklist { margin: 0; padding-inline-start: 20px; font-size: 13px; line-height: 1.65; color: var(--ui-ink); }
.studio-desk-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.studio-desk-dl > div { display: grid; grid-template-columns: minmax(6rem, 30%) minmax(0, 1fr); gap: 6px 12px; }
.studio-desk-dl dt { margin: 0; font-size: 13px; font-weight: 750; color: var(--ui-muted); }
.studio-desk-dl dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ui-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.studio-desk-input { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 15px; line-height: 1.5; }
.studio-desk-input:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 1px; }
textarea.studio-desk-input { resize: vertical; min-height: 84px; }
.studio-desk-money { margin: 0; font-size: 15px; font-weight: 750; color: var(--ui-ink); }
.studio-desk-countdown { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--studio-amber-bg); color: var(--studio-amber-fg); font-size: 13px; font-weight: 750; line-height: 1.5; }
.studio-desk-box[data-ready="1"] .studio-desk-countdown { background: var(--studio-green-bg); color: var(--studio-green-fg); }
.studio-desk-problem { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--studio-rose-bg); color: var(--studio-rose-fg); font-size: 13px; font-weight: 700; line-height: 1.6; }
.studio-desk-problem > p { margin: 0; }
.studio-desk-outcome { border-color: var(--studio-fg); background: var(--studio-bg); }
.studio-desk-outcome .studio-desk-note, .studio-desk-outcome .studio-desk-label { color: inherit; }
.studio-desk-outcome-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 800; color: var(--studio-fg); }
.studio-desk-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; background: var(--ui-surface); border: 1px dashed var(--ui-line); border-radius: var(--ui-radius); }
.studio-desk-empty-icon { width: 36px; height: 36px; color: var(--ui-accent); }
.studio-desk-sheet-lines { margin: 0; padding-inline-start: 18px; font-size: 14px; line-height: 1.7; color: var(--ui-ink); }
.studio-desk-pulse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 8px; }
.studio-desk-pulse-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--ui-surface-soft); }
.studio-desk-pulse-value { font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--ui-ink); }
.studio-desk-pulse-label { font-size: 12px; line-height: 1.5; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-desk-classic { min-width: 0; max-width: 100%; }
.studio-desk-classic > section { margin-top: 0; }
.studio-v2-nav.is-staff .studio-v2-nav-item { position: relative; }
.studio-desk-badge { position: absolute; top: 2px; inset-inline-end: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-surface); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.studio-desk-badge.is-urgent { background: var(--studio-rose-fg); }
.studio-desk-sound { margin-top: 12px; }
.studio-v2-row[aria-pressed="true"] .studio-v2-row-value { color: var(--ui-accent); }
.studio-desk-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--ui-line); font-size: 14px; line-height: 1.6; }
.studio-desk-line:first-of-type { border-top: 0; }
.studio-desk-line-label { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 12rem; min-width: 0; color: var(--ui-ink); }
.studio-desk-line-value { flex: 0 1 auto; max-width: 100%; margin: 0; font-weight: 750; color: var(--ui-ink); }
.studio-desk-line[data-tone] .studio-desk-line-value { padding: 0 8px; border-radius: 8px; background: var(--studio-bg); color: var(--studio-fg); }
.studio-desk-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-surface); font-size: 12px; font-weight: 800; }
.studio-admin-row { align-items: center; }
.studio-admin-row-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.studio-admin-alert-title { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 15px; font-weight: 750; line-height: 1.5; color: var(--ui-ink); }
.studio-admin-payment { list-style: none; }
.studio-admin-payment .studio-flag { margin-inline-start: 6px; }
.studio-admin-form { gap: 14px; }
.studio-admin-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.studio-admin-flag { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--ui-ink); cursor: pointer; }
.studio-admin-flag input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--ui-accent); }
.studio-admin-week { display: flex; flex-direction: column; gap: 4px; }
.studio-admin-day { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 4px 0; border-top: 1px solid var(--ui-line); }
.studio-admin-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.studio-admin-clock { width: auto; min-width: 7rem; }
.studio-admin-holidays { display: flex; flex-direction: column; gap: 10px; }
.studio-admin-holiday { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 14px; }
.studio-admin-holiday > input:first-child { grid-column: 1 / -1; }
.studio-admin-holiday > button { grid-column: 1 / -1; justify-self: end; }
.studio-admin-ramadan { padding: 8px 0; }
.studio-admin-about { padding: 10px 12px; border-radius: 12px; background: var(--ui-accent-soft); color: var(--ui-ink); }
@media (max-width: 900px) {
  .studio-v2-frame.is-staff .studio-desk { padding-bottom: calc(80px + var(--app-safe-bottom, 0px)); }
}
@media (max-width: 359px) {
  .studio-desk-box, .studio-desk-card { padding: 12px; }
  .studio-desk-dl > div { grid-template-columns: minmax(0, 1fr); }
  .studio-desk-actions > .studio-v2-action { flex-basis: 100%; }
}

/* Albayan Studio v2 Pages & replies, the page-link request and the help guides (P4-06, P4-07, P5-03;
   src/systems/ads_studio/15o-studio-pages.js). Drawn in the v2 frame and, through the classic
   delegate, inside the classic tab bar, so the four tones live on .studio-pg itself (light and dark) and
   every surface uses the --ui-* tokens. A state never stands alone: each chip has its icon and words.
   Every control is at least 44px; names, links and keywords wrap; nothing may widen the page. */
.studio-pg, .studio-pg-overlay {
  --studio-pg-ok-fg: #166534; --studio-pg-ok-bg: #dcfce7;
  --studio-pg-warn-fg: #92400e; --studio-pg-warn-bg: #fef3c7;
  --studio-pg-bad-fg: #be123c; --studio-pg-bad-bg: #ffe4e6;
  --studio-pg-slate-fg: #475569; --studio-pg-slate-bg: #f1f5f9;
  --studio-pg-fb: #1d4ed8; --studio-pg-fb-bg: #dbeafe; --studio-pg-ig: #be185d; --studio-pg-ig-bg: #fce7f3;
}
html.dark :is(.studio-pg, .studio-pg-overlay) {
  --studio-pg-ok-fg: #86efac; --studio-pg-ok-bg: #052e16;
  --studio-pg-warn-fg: #fcd34d; --studio-pg-warn-bg: #422006;
  --studio-pg-bad-fg: #fda4af; --studio-pg-bad-bg: #4c0519;
  --studio-pg-slate-fg: #cbd5e1; --studio-pg-slate-bg: #1e293b;
  --studio-pg-fb: #93c5fd; --studio-pg-fb-bg: #172554; --studio-pg-ig: #f9a8d4; --studio-pg-ig-bg: #500724;
}
.studio-pg { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 100%; color: var(--ui-ink); }
.studio-pg-classic { margin-top: 4px; }
.studio-pg :is(p, h2, h3, dl, dd, dt, ul, ol), .studio-pg-overlay :is(p, h2, dl, dd, dt, ul, ol) { margin: 0; }
.studio-pg :is(ul, ol), .studio-pg-overlay ul { padding: 0; list-style: none; }
.studio-pg-sections { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.studio-pg-section { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 0 14px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.studio-pg-section[aria-current="page"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-pg-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); overflow-wrap: anywhere; }
.studio-pg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-width: 0; }
.studio-pg-h2 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--ui-ink); }
.studio-pg-note, .studio-pg-empty { font-size: 13px; line-height: 1.7; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-pg-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: 100%; font-size: 12px; line-height: 1.5; color: var(--ui-muted); overflow-wrap: anywhere; }
.studio-pg-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.studio-pg-chips.is-tight { gap: 6px; }
.studio-pg-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: var(--studio-pg-slate-bg); color: var(--studio-pg-slate-fg); font-size: 12px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.studio-pg-chip[data-tone="ok"] { background: var(--studio-pg-ok-bg); color: var(--studio-pg-ok-fg); }
.studio-pg-chip[data-tone="warn"] { background: var(--studio-pg-warn-bg); color: var(--studio-pg-warn-fg); }
.studio-pg-chip[data-tone="bad"] { background: var(--studio-pg-bad-bg); color: var(--studio-pg-bad-fg); }
.studio-pg-chip-icon { width: 16px; height: 16px; flex-shrink: 0; }
.studio-pg-chip-remove { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -12px -14px -12px -2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.studio-pg-badge { display: inline-flex; flex-shrink: 0; align-items: center; padding: 2px 7px; border-radius: 8px; background: var(--studio-pg-fb-bg); color: var(--studio-pg-fb); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.studio-pg-badge[data-platform="ig"] { background: var(--studio-pg-ig-bg); color: var(--studio-pg-ig); }
.studio-pg-list { display: flex; flex-direction: column; gap: 10px; }
.studio-pg-page, .studio-pg-log-row { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface-soft); }
.studio-pg-page[data-state="attention"] { border-color: var(--studio-pg-warn-fg); }
.studio-pg-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.studio-pg-page-name { flex: 1 1 8rem; min-width: 0; font-size: 15px; font-weight: 750; line-height: 1.5; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-pg-fix { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--studio-pg-warn-bg); color: var(--studio-pg-warn-fg); }
.studio-pg-fix .studio-pg-note { color: inherit; }
.studio-pg-fix-title { font-size: 13px; font-weight: 800; }
.studio-pg-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.studio-pg-actions > .studio-v2-action { flex: 1 1 auto; }
.studio-pg .studio-v2-action, .studio-pg-overlay .studio-v2-action { gap: 8px; cursor: pointer; text-decoration: none; }
.studio-pg .studio-v2-action[disabled], .studio-pg-overlay .studio-v2-action[disabled] { opacity: 0.55; cursor: not-allowed; }
.studio-pg-small { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.studio-v2-action.studio-pg-danger { border-color: var(--studio-pg-bad-fg); color: var(--studio-pg-bad-fg); }
.studio-pg-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-width: 44px; min-height: 44px; max-width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ui-accent); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; text-align: start; cursor: pointer; overflow-wrap: anywhere; }
.studio-pg-link > span { min-width: 0; }
.studio-pg-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--studio-pg-slate-bg); color: var(--studio-pg-slate-fg); font-size: 14px; font-weight: 700; line-height: 1.6; }
.studio-pg-banner > p { min-width: 0; overflow-wrap: anywhere; }
.studio-pg-problem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 14px; background: var(--ui-surface-soft); font-size: 14px; color: var(--ui-ink); }
.studio-pg-problem > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.studio-pg-form, .studio-pg-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.studio-pg-label { font-size: 14px; font-weight: 750; line-height: 1.5; color: var(--ui-ink); }
.studio-pg-sublabel { font-size: 13px; font-weight: 650; color: var(--ui-muted); }
.studio-pg-input { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 16px; line-height: 1.5; }
textarea.studio-pg-input { resize: vertical; }
.studio-pg-input:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 1px; }
.studio-pg-input[disabled] { opacity: 0.6; }
.studio-pg-field.is-invalid .studio-pg-input { border-color: var(--studio-pg-bad-fg); }
.studio-pg-error { font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--studio-pg-bad-fg); overflow-wrap: anywhere; }
.studio-pg-choice { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.studio-pg-choice[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.studio-pg-choice[disabled] { opacity: 0.55; cursor: not-allowed; }
.studio-pg-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--ui-surface-soft); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.studio-pg-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.studio-pg-row > .studio-pg-input { flex: 1 1 12rem; width: auto; }
.studio-pg-check { display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 44px; padding: 6px 0; font-size: 14px; line-height: 1.7; color: var(--ui-ink); cursor: pointer; overflow-wrap: anywhere; }
.studio-pg-check > input { flex-shrink: 0; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--ui-accent); }
.studio-pg-check > span { min-width: 0; }
.studio-pg-switch { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; width: 52px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.studio-pg-switch::before { content: ''; display: block; width: 52px; height: 30px; border-radius: 999px; background: var(--ui-line); transition: background 0.15s; }
.studio-pg-switch[aria-checked="true"]::before { background: var(--ui-accent); }
.studio-pg-switch-knob { position: absolute; top: 10px; inset-inline-start: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--ui-surface); box-shadow: 0 1px 3px rgb(15 23 42 / 30%); transition: inset-inline-start 0.15s; }
.studio-pg-switch[aria-checked="true"] .studio-pg-switch-knob { inset-inline-start: 24px; }
.studio-pg-switch[disabled] { opacity: 0.55; cursor: not-allowed; }
.studio-pg-master, .studio-pg-behaviour { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--ui-surface-soft); }
.studio-pg-behaviour.is-off { opacity: 0.7; }
.studio-pg-master-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.studio-pg-master-title, .studio-pg-behaviour-title { font-size: 14px; font-weight: 750; line-height: 1.5; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-pg-rule { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 4px 4px 4px 0; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface-soft); }
.studio-pg-rule.is-off { opacity: 0.75; }
.studio-pg-rule > .studio-pg-switch { margin: 8px 8px 0; }
.studio-pg-rule-open { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; min-height: 44px; padding: 10px 12px; border: 0; background: transparent; color: var(--ui-ink); font: inherit; text-align: start; cursor: pointer; }
.studio-pg-rule-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.studio-pg-rule-name { min-width: 0; font-size: 15px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.studio-pg-details { min-width: 0; }
.studio-pg-details > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-size: 14px; font-weight: 750; color: var(--ui-ink); cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.studio-pg-details > summary::-webkit-details-marker { display: none; }
.studio-pg-details > summary > span { flex: 1 1 auto; min-width: 0; }
.studio-pg-details[open] > summary > .studio-pg-chip-icon:last-child { transform: rotate(180deg); }
.studio-pg-channels { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.studio-pg-channel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; padding: 8px 0; border-top: 1px solid var(--ui-line); }
.studio-pg-channel:first-child { border-top: 0; }
.studio-pg-channel-name { flex: 1 1 8rem; min-width: 0; font-size: 14px; font-weight: 650; color: var(--ui-ink); }
.studio-pg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.studio-pg-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--ui-surface-soft); text-align: center; }
.studio-pg-tile-value { font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.studio-pg-done { align-items: center; text-align: center; }
.studio-pg-done-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--studio-pg-ok-bg); color: var(--studio-pg-ok-fg); }
.studio-pg-number { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; font-weight: 800; letter-spacing: 0.04em; color: var(--ui-ink); }
.studio-guide-links { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.studio-guide-list { display: flex; flex-direction: column; }
.studio-guide-item { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 52px; padding: 10px 4px; border: 0; border-top: 1px solid var(--ui-line); background: transparent; color: var(--ui-ink); font: inherit; font-size: 15px; font-weight: 650; text-align: start; cursor: pointer; }
.studio-guide-list > li:first-child > .studio-guide-item { border-top: 0; }
.studio-guide-item > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.studio-guide-item > .studio-v2-icon { color: var(--ui-accent); }
.studio-guide-inline { padding: 12px 14px; border: 1px dashed var(--ui-line); border-radius: 16px; background: var(--ui-surface-soft); }
.studio-guide-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin-top: 8px; }
.studio-guide-intro { font-size: 14px; line-height: 1.7; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-pg ol.studio-guide-steps, .studio-pg-overlay ol.studio-guide-steps { display: flex; flex-direction: column; gap: 8px; padding-inline-start: 22px; font-size: 14px; line-height: 1.7; color: var(--ui-ink); list-style: decimal; }
.studio-guide-steps > li { overflow-wrap: anywhere; }
.studio-guide-note { padding: 10px 12px; border-radius: 12px; background: var(--ui-surface-soft); }
.studio-guide-hours { display: flex; flex-direction: column; gap: 4px; }
.studio-guide-hours-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--ui-line); font-size: 14px; color: var(--ui-ink); }
.studio-guide-hours-row:first-child { border-top: 0; }
.studio-guide-hours-row > dd { font-weight: 750; font-variant-numeric: tabular-nums; }
.studio-guide-hours-row.is-closed > dd { font-weight: 600; color: var(--ui-muted); }
.studio-pg-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; background: rgb(8 12 24 / 60%); color: var(--ui-ink); }
.studio-pg-sheet { display: flex; flex-direction: column; gap: 12px; align-self: center; width: 100%; max-width: 32rem; max-height: 90dvh; overflow-y: auto; padding: 22px 16px 16px; background: var(--ui-surface); color: var(--ui-ink); border-radius: var(--ui-radius); box-shadow: 0 -8px 30px rgb(8 12 24 / 25%); overflow-wrap: anywhere; }
.studio-pg-sheet-title { font-size: 18px; font-weight: 800; line-height: 1.4; }
.studio-pg-sheet-text { font-size: 15px; line-height: 1.7; color: var(--ui-muted); }
.studio-pg-sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.studio-pg-sheet :is(button):focus-visible, .studio-pg :is(button, a, input, textarea, summary):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
@media (max-width: 900px) {
  .studio-v2-frame .studio-pg { padding-bottom: calc(80px + var(--app-safe-bottom, 0px)); }
}
@media (min-width: 600px) {
  .studio-pg-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .studio-pg-sheet-actions { flex-direction: row-reverse; }
  .studio-pg-sheet-actions > .studio-v2-action { flex: 1 1 0; }
}
@media (max-width: 359px) {
  .studio-pg-card { padding: 14px 12px; }
  .studio-pg-section { padding: 0 10px; font-size: 13px; }

}

/* Albayan Studio extras (P5-02 TikTok service, P3-04b results card; src/systems/ads_studio/15r-studio-extras.js).
   The TikTok section and the desk rows sit inside .studio-help (its tones, cards, rows, chips and inputs
   are reused), so only what is new is declared here: the service line, the wants list and its 44px
   check rows, the team's note, the "sent" status line, the static desk row, and the results card drawn
   outside My ads (its stats grid is scoped to the detail there). Every surface uses the --ui-* tokens
   (light and dark come from them); nothing may widen the page at 320-820 px. */
.studio-tiktok-service { font-size: 15px; font-weight: 750; line-height: 1.6; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-tiktok-wants { min-width: 0; margin: 0; padding: 0; border: 0; }
.studio-tiktok-wants > legend { padding: 0; margin-bottom: 6px; }
.studio-tiktok-want { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; font-size: 14px; line-height: 1.6; color: var(--ui-ink); cursor: pointer; overflow-wrap: anywhere; }
.studio-tiktok-want > span { min-width: 0; }
.studio-tiktok-check { flex-shrink: 0; width: 22px; height: 22px; margin: 4px 0 0; accent-color: var(--ui-accent); }
.studio-tiktok-wants-list { display: flex; flex-direction: column; gap: 4px; max-width: 100%; padding-inline-start: 18px; font-size: 13px; line-height: 1.6; color: var(--ui-ink); list-style: disc; overflow-wrap: anywhere; }
.studio-tiktok-handle { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-weight: 750; color: var(--ui-accent); text-decoration: none; overflow-wrap: anywhere; }
.studio-tiktok-handle:hover { text-decoration: underline; }
.studio-tiktok-note { display: flex; flex-direction: column; gap: 2px; max-width: 100%; padding: 8px 12px; border-radius: 12px; background: var(--ui-accent-soft); font-size: 13px; line-height: 1.6; color: var(--ui-ink); overflow-wrap: anywhere; }
.studio-tiktok-note-from { font-size: 12px; font-weight: 800; color: var(--ui-accent); }
.studio-tiktok-sent { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--studio-help-green-bg); color: var(--studio-help-green-fg); font-size: 14px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.studio-tiktok-sent > span { min-width: 0; }
.studio-help-row.studio-tiktok-item { cursor: default; }
.studio-help-row.studio-tiktok-item.is-fresh { border-color: var(--ui-accent); }
.studio-tiktok-item .studio-help-link { margin-top: 2px; }
.studio-help-row.is-static { cursor: default; }
.studio-tiktok-desk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; min-width: 0; }
.studio-tiktok-desk-actions > .studio-help-form { width: 100%; }
.studio-tiktok-desk > li { min-width: 0; }
.studio-results-card { display: flex; flex-direction: column; gap: 8px; }
.studio-results-card .studio-ads-h3 { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; font-weight: 800; line-height: 1.5; color: var(--ui-ink); }
.studio-results-card .studio-ads-money-meaning { font-size: 13px; line-height: 1.6; color: var(--ui-muted); }
.studio-results-card .studio-ads-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0; }
.studio-results-card .studio-ads-money-note { font-size: 12px; line-height: 1.6; color: var(--ui-muted); }
@media (max-width: 359px) {
  .studio-results-card .studio-ads-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}