:root {
    --black: #050506;
    --panel: #0f0f11;
    --panel-2: #161618;
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(208, 211, 217, 0.36);
    --silver: #c4c7cd;
    --silver-hi: #eef0f3;
    --silver-lo: #8c9098;
    --text: #f6f6f5;
    --text-dim: #a4a7ad;
    --text-faint: #71747b;
    --ok: #9fd8b5;
    --warn: #e9c685;
    --err: #ef9d9d;
    --radius: 16px;
    --radius-sm: 11px;
    --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body: "Jost", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
    --tabbar-h: 68px;
    color-scheme: dark;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
  html, body { margin: 0; }
  body {
    background: var(--black);
    color: var(--text);
    font: 400 15px/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  button { font: inherit; color: inherit; }

  .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- layout ---------- */
  .app {
    min-height: 100vh; min-height: 100dvh;
    display: grid;
    grid-template-columns: 430px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "top stage" "side stage";
    height: 100vh; height: 100dvh;
  }
  .topbar { grid-area: top; padding: 22px 26px 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .app[data-ready="1"] #viewStudio { order: -1; }
  .sidebar { grid-area: side; overflow-y: auto; padding: 14px 26px 40px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--line); }
  .stage { grid-area: stage; display: grid; place-items: center; padding: 28px; overflow: auto; }
  .view { display: flex; flex-direction: column; gap: 18px; }
  .tabbar { display: none; }

  /* ---------- brand ---------- */
  .brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .mark {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    border: 1px solid var(--silver); display: grid; place-items: center;
    font: 500 17px/1 var(--font-display); letter-spacing: 0.06em; color: var(--silver-hi);
  }
  .brand h1 { margin: 0; font: 500 20px/1.1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-hi); white-space: nowrap; }
  .brand p { margin: 3px 0 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }

  .pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; flex: none;
    border: 1px solid var(--line-strong); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
  }
  .pill .ic { width: 14px; height: 14px; }
  .pill.ok { color: var(--ok); }
  .pill.warn { color: var(--warn); }
  .pill .long { display: inline; }

  /* ---------- cards ---------- */
  .card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 34px rgba(0, 0, 0, 0.4);
  }
  .eyebrow { margin: 0; font: 500 11px/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--silver-lo); }
  .title { margin: 0; font: 500 26px/1.15 var(--font-display); letter-spacing: 0.01em; color: var(--silver-hi); }
  .hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
  .hint strong { color: var(--text); font-weight: 500; }
  .rule { height: 1px; background: var(--line); border: 0; margin: 2px 0; }

  .steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .steps li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--text-dim); }
  .steps .n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font: 500 12px/1 var(--font-body); color: var(--silver); }
  .steps b { color: var(--text); font-weight: 500; }

  /* ---------- buttons ---------- */
  .btn {
    appearance: none; -webkit-appearance: none; cursor: pointer; position: relative;
    min-height: 46px; padding: 0 20px; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--text);
    font: 500 12.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.05s;
    touch-action: manipulation; user-select: none; -webkit-user-select: none;
  }
  .btn:hover { border-color: var(--silver-hi); background: rgba(255, 255, 255, 0.04); }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible, .thumb:focus-visible, .tab:focus-visible, .chip:focus-visible, .seg button:focus-visible, .icon-btn:focus-visible {
    outline: 2px solid var(--silver-hi); outline-offset: 2px;
  }
  .btn-primary {
    background: linear-gradient(180deg, #fbfbfb 0%, #d3d6db 100%); color: #09090a; border-color: #f2f3f5;
    box-shadow: inset 0 1px 0 #ffffff, 0 8px 22px rgba(0, 0, 0, 0.45);
  }
  .btn-primary:hover { background: linear-gradient(180deg, #ffffff 0%, #dde0e5 100%); border-color: #fff; }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.36; cursor: not-allowed; pointer-events: none; }
  .btn-block { width: 100%; }
  .btn-sm { min-height: 40px; padding: 0 14px; font-size: 11.5px; }
  .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .btn-row > .btn { flex: 1 1 140px; }
  .btn.is-loading { color: transparent !important; pointer-events: none; }
  .btn.is-loading::after {
    content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(120, 124, 132, 0.5); border-top-color: #09090a; animation: spin 0.8s linear infinite;
  }
  .btn:not(.btn-primary).is-loading::after { border-color: rgba(255, 255, 255, 0.25); border-top-color: var(--silver-hi); }
  @keyframes spin { to { transform: rotate(360deg); } }
  .icon-btn {
    appearance: none; -webkit-appearance: none; cursor: pointer; width: 44px; height: 44px; border-radius: var(--radius-sm);
    display: grid; place-items: center; background: transparent; border: 1px solid var(--line-strong); color: var(--text);
    touch-action: manipulation; user-select: none; -webkit-user-select: none;
  }
  .icon-btn:hover { border-color: var(--silver-hi); background: rgba(255, 255, 255, 0.04); }
  .icon-btn:active { transform: translateY(1px); }
  .icon-btn:disabled { opacity: 0.32; cursor: not-allowed; pointer-events: none; }

  /* ---------- library ---------- */
  .lib-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .lib-row .count { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--text-dim); }
  .lib-row .count strong { font: 500 32px/1 var(--font-display); color: var(--silver-hi); }
  .lib-row .btn { flex: 0 0 auto; }

  .report { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .report-head strong { font: 500 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-hi); }
  .bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
  .bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--silver), var(--silver-hi)); transition: width 0.2s; }
  .results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; }
  .results li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 13px; line-height: 1.4; }
  .results .name { color: var(--text); word-break: break-all; }
  .results .msg { display: block; color: var(--text-dim); margin-top: 2px; }
  .results .tech { display: block; margin-top: 4px; font: 400 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-faint); word-break: break-word; }
  .results li .ic { width: 18px; height: 18px; margin-top: 1px; }
  .results li.ok .ic { color: var(--ok); }
  .results li.warn .ic, .results li.warn .msg { color: var(--warn); }
  .results li.fail .ic, .results li.fail .msg { color: var(--err); }
  .results li.work .ic { color: var(--silver); animation: spin 1.1s linear infinite; }

  details.more { border-top: 1px solid var(--line); padding-top: 12px; }
  details.more summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px;
    font: 500 11.5px/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); user-select: none; -webkit-user-select: none; }
  details.more summary::-webkit-details-marker { display: none; }
  details.more summary::after { content: "+"; font-size: 18px; letter-spacing: 0; color: var(--silver-lo); }
  details.more[open] summary::after { content: "\2212"; }
  details.more > .body { padding: 8px 0 4px; display: flex; flex-direction: column; gap: 12px; }
  .list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-dim); }
  .list strong { color: var(--text); font-weight: 500; }

  .thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 300px; overflow-y: auto; padding: 3px; }
  .thumb { position: relative; aspect-ratio: 9 / 16; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); padding: 0; cursor: pointer; }
  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .thumb.selected { border-color: var(--silver-hi); box-shadow: 0 0 0 1px var(--silver-hi); }
  .thumb.confirm { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
  .thumb .del { position: absolute; top: 4px; right: 4px; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.78); border: 1px solid var(--line-strong); color: var(--silver-hi); font: 500 10px/1 var(--font-body); letter-spacing: 0.04em; }
  .thumb .del .ic { width: 12px; height: 12px; }
  .thumb.confirm .del { background: var(--err); border-color: var(--err); color: #1a0a0a; }
  .thumb .flag { position: absolute; left: 4px; bottom: 4px; padding: 3px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.78); color: var(--warn); font: 500 9px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
  .empty-note { grid-column: 1 / -1; padding: 6px 2px; }

  /* ---------- studio controls ---------- */
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); }
  .seg button { appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--text-dim); min-height: 46px; border-radius: 8px;
    font: 500 14px/1 var(--font-body); touch-action: manipulation; }
  .seg button[aria-pressed="true"] { background: var(--silver-hi); color: #09090a; }
  .seg button:disabled { opacity: 0.36; }

  .field { display: flex; flex-direction: column; gap: 10px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver-lo); }
  input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; touch-action: pan-y; }
  input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); border-radius: 2px; }
  input[type="range"]::-moz-range-track { height: 2px; background: var(--line-strong); border-radius: 2px; }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -11px; border-radius: 50%; background: var(--silver-hi); border: 1px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
  input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--silver-hi); border: 1px solid #fff; }
  input[type="range"]:focus-visible { outline: 2px solid var(--silver-hi); outline-offset: 4px; border-radius: 6px; }

  .check { display: flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; color: var(--text-dim); }
  .check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--silver-lo); background: transparent; display: grid; place-items: center; margin: 0; flex: none; cursor: pointer; }
  .check input:checked { background: var(--silver-hi); border-color: var(--silver-hi); }
  .check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #09090a; border-bottom: 2px solid #09090a; transform: translateY(-1px) rotate(-45deg); }
  .check input:focus-visible { outline: 2px solid var(--silver-hi); outline-offset: 2px; }

  .tools { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
  .tools[data-idle="true"] .tool-body { opacity: 0.4; pointer-events: none; }
  .chips { display: flex; gap: 10px; flex-wrap: wrap; }
  .chip { appearance: none; -webkit-appearance: none; cursor: pointer; padding: 0; width: 46px; height: 66px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--panel-2); position: relative; touch-action: manipulation; }
  .chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .chip[aria-pressed="true"] { border-color: var(--silver-hi); box-shadow: 0 0 0 2px var(--silver-hi); }
  .tool-body { display: flex; flex-direction: column; gap: 14px; }
  .tool-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  .tool-line > .lbl { font: 500 11px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver-lo); min-width: 64px; }
  .pad { display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); gap: 6px; }
  .pad .up { grid-column: 2; grid-row: 1; } .pad .left { grid-column: 1; grid-row: 2; } .pad .right { grid-column: 3; grid-row: 2; } .pad .down { grid-column: 2; grid-row: 3; }
  .pad .icon-btn { width: 46px; height: 46px; }
  .pair { display: flex; gap: 8px; }
  .pair .icon-btn { width: 52px; height: 46px; }

  /* ---------- stage ---------- */
  .stage-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .canvas-wrap {
    height: min(84vh, 900px); height: min(84dvh, 900px); aspect-ratio: 1080 / 1920; max-width: 100%;
    border-radius: 14px; overflow: hidden; background: #000;
    border: 1px solid var(--line-strong); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
  }
  #storyCanvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
  #storyCanvas:active { cursor: grabbing; }
  .stage-note { margin: 0; max-width: 420px; text-align: center; font-size: 13px; letter-spacing: 0.03em; color: var(--text-dim); }

  /* ---------- export sheet ---------- */
  .sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.86); display: grid; place-items: center; padding: 16px; overflow: auto; }
  .sheet-card { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sheet-img { background: #000; border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: grid; place-items: center; }
  .sheet-img img { display: block; max-width: 100%; max-height: 52dvh; width: auto; height: auto; border-radius: 6px; -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; }

  .tech-box { width: 100%; min-height: 120px; resize: vertical; border-radius: var(--radius-sm); background: var(--black); border: 1px solid var(--line-strong); color: var(--text-dim);
    font: 400 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 10px; }

  @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

  /* ---------- phones and small tablets ---------- */
  @media (max-width: 959px) {
    .app { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
    .topbar { order: 0; padding: calc(14px + env(safe-area-inset-top)) 18px 6px; }
    .brand { flex: 1 1 auto; gap: 11px; }
    .brand h1 { font-size: 15px; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .brand p { display: none; }
    .pill .long { display: none; }
    .pill { padding: 6px 10px; letter-spacing: 0.08em; }
    .mark { width: 36px; height: 36px; font-size: 15px; }
    .sidebar { order: 2; overflow: visible; border-right: 0; padding: 12px 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }
    .stage { order: 1; position: sticky; top: 0; z-index: 5; padding: 10px 16px 12px; background: var(--black); border-bottom: 1px solid var(--line); overflow: visible; }
    .stage-inner { gap: 8px; }
    .canvas-wrap { height: min(42dvh, 520px); min-height: 250px; border-radius: 12px; }
    .stage-note { font-size: 12px; }
    .app[data-view="photos"] .stage, .app[data-view="photos"] #viewStudio { display: none; }
    .app[data-view="studio"] #viewPhotos { display: none; }
    .tabbar {
      display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
      padding-bottom: env(safe-area-inset-bottom); background: rgba(5, 5, 6, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      border-top: 1px solid var(--line-strong);
    }
    .tab { appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; min-height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
      color: var(--text-faint); font: 500 10.5px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; position: relative; touch-action: manipulation; }
    .tab[aria-selected="true"] { color: var(--silver-hi); }
    .tab[aria-selected="true"]::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; background: var(--silver-hi); border-radius: 2px; }
    .tab:disabled { opacity: 0.3; }
    .card { padding: 18px; }
    .btn { min-height: 50px; }
    .btn-sm { min-height: 46px; font-size: 12px; }
    .thumb-grid { grid-template-columns: repeat(3, 1fr); max-height: 360px; }
    .sheet { padding: 10px; }
  }
  @media (hover: none) and (pointer: coarse) {
    .thumb .del { min-width: 34px; height: 34px; border-radius: 17px; }
    .pad { grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); }
    .pad .icon-btn { width: 52px; height: 52px; }
    .pair .icon-btn { width: 60px; height: 52px; }
    .icon-btn { width: 48px; height: 48px; }
  }

/* ---------- accounts ---------- */
.seg2 { grid-template-columns: repeat(2, 1fr); }
.form { display: flex; flex-direction: column; gap: 14px; }
.tfield { display: flex; flex-direction: column; gap: 8px; font: 500 11px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver-lo); }
.tfield input {
  width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--radius-sm);
  background: var(--black); border: 1px solid var(--line-strong); color: var(--text);
  font: 400 16px/1.2 var(--font-body); letter-spacing: 0; text-transform: none;
  -webkit-appearance: none; appearance: none;
}
.tfield input:focus { outline: 2px solid var(--silver-hi); outline-offset: 1px; border-color: var(--silver-hi); }
.form-error {
  margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.45;
  color: var(--err); border: 1px solid rgba(239, 157, 157, 0.4); background: rgba(239, 157, 157, 0.06);
}
.linkbtn {
  appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; min-height: 44px; padding: 10px 0;
  color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; font: 400 13px/1.4 var(--font-body);
}
.linkbtn:hover { color: var(--text); }
.acct { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--text); word-break: break-all; }
.acct .ic { color: var(--silver); }
#authExpand { display: none; align-self: flex-start; }
#authCard.collapsed #authExpand { display: inline-flex; }
#authCard.collapsed #authForm, #authCard.collapsed #authMode, #authCard.collapsed #authLead, #authCard.collapsed #authTitle, #authCard.collapsed #localOnlyBtn { display: none; }
.results.admin li { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.results.admin li:last-child { border-bottom: 0; padding-bottom: 0; }
.arow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.arow .btn { flex: 1 1 140px; }