/* Lightbox. Neutral dark greys so colour judgements aren't skewed; one amber accent. */
:root {
  --bg: #121314;
  --panel: #1a1b1d;
  --raised: #25272a;
  --line: #34373b;
  --text: #ececec;
  --muted: #9a9ea4;
  --accent: #f2b43c;
  --accent-ink: #1c1504;
  --danger: #ff7a66;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.4 var(--font);
  display: flex; flex-direction: column;
  height: 100dvh; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Top bar ---------- */
.bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--accent); text-decoration: none; margin-right: auto; min-width: 0; }
.brand-mark { width: 30px; height: 30px; flex: none; stroke: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { color: var(--text); font-size: 1.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.brand-sub { color: var(--muted); font-size: .72rem; font-weight: 500; line-height: 1.25; letter-spacing: .02em; white-space: nowrap; }
.bar-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn, .text-btn, .primary-btn, .tool-btn, .link-btn, .chip, .look, .tab {
  cursor: pointer; border: 0; background: none; -webkit-user-select: none; user-select: none;
}
.icon-btn { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover:not(:disabled), .text-btn:hover:not(:disabled) { background: var(--raised); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn[aria-pressed="true"] { background: var(--raised); color: var(--accent); }
.text-btn { height: 40px; padding: 0 10px; border-radius: 8px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.text-btn svg { width: 20px; height: 20px; }
.primary-btn {
  height: 40px; padding: 0 16px; border-radius: 8px; margin-left: 4px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.primary-btn:hover { filter: brightness(1.08); }
.primary-btn:disabled { opacity: .6; cursor: progress; }
.primary-btn.big { height: 52px; padding: 0 28px; font-size: 1.05rem; margin: 8px 0 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Upload screen ---------- */
.upload { flex: 1; display: grid; place-items: center; padding: 20px 16px; overflow: auto; }
.drop {
  width: 100%; max-width: 520px; text-align: center;
  padding: 40px 24px; border: 2px dashed var(--line); border-radius: 16px; background: var(--panel);
}
.drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.drop-icon { width: 48px; height: 48px; color: var(--accent); stroke-width: 1.6; }
.drop h1 { margin: 10px 0 6px; font-size: 1.6rem; }
.drop p { margin: 0 auto 14px; max-width: 34ch; color: var(--muted); }
.fine { font-size: .85rem; color: var(--muted); margin: 14px 0 0; }
.progress { margin-top: 18px; }
.progress-bar { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .15s; }
#progress-text { display: block; margin-top: 8px; font-size: .9rem; color: var(--muted); }

/* ---------- Editor layout: photo on top, tools below (phones); side panel (wide) ---------- */
.editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.frame { position: relative; overflow: hidden; touch-action: manipulation; }
.frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.spinner {
  position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: var(--accent);
  animation: spin .8s linear infinite; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.stage.busy .spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.controls {
  flex: none; background: var(--panel); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Six tabs in a grid: one row on phones, two rows of three on very narrow phones and in
   the desktop side panel. Nothing ever hides off the edge. */
.tabs { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); }
.tab { min-width: 0; }
@media (max-width: 369px) { .tabs { grid-template-columns: repeat(3, 1fr); } }
.tab { flex: 1 0 auto; padding: 12px 10px 10px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
@media (max-width: 480px) { .tab { padding: 12px 0 10px; font-size: .76rem; letter-spacing: -.01em; } }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.panels { height: 232px; overflow-y: auto; overscroll-behavior: contain; }
.panel { padding: 10px 16px 6px; }
.panel-foot { display: flex; justify-content: flex-end; padding: 2px 0 4px; }
.link-btn { color: var(--muted); font-size: .88rem; padding: 6px 2px; }
.link-btn:hover { color: var(--text); text-decoration: underline; }
.panel-bottom { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 16px; border-top: 1px solid var(--line); }
.status { flex: 1; min-width: 0; margin: 0; font-size: .78rem; line-height: 1.35; color: var(--muted); }
.status-line { display: block; }
#photo-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* only the name may be cut short */
.status a { color: var(--accent); }
.done-btn {
  flex: none; height: 36px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--raised); color: var(--text); font-weight: 700; cursor: pointer;
}
.done-btn:hover { border-color: var(--accent); }

/* After "Done": tools hidden, the photo takes the space, two big buttons below it */
.finish-bar {
  flex: none; display: flex; justify-content: center; gap: 12px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--line);
}
.big-btn {
  flex: 1; max-width: 260px; height: 54px; border-radius: 12px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1.08rem; font-weight: 700;
}
.big-btn svg { width: 22px; height: 22px; }
.big-btn.primary { background: var(--accent); color: var(--accent-ink); }
.big-btn.secondary { background: var(--raised); color: var(--text); border: 1px solid var(--line); }
.big-btn:hover { filter: brightness(1.08); }
.editor.finished .controls { display: none; }

@media (min-width: 900px) {
  .editor { flex-direction: row; }
  /* Wide screens are short for their width: keep the buttons beside the photo, not under it */
  .finish-bar {
    width: 240px; flex-direction: column; justify-content: center; gap: 14px;
    padding: 24px 20px; border-top: 0; border-left: 1px solid var(--line);
  }
  .finish-bar .big-btn { flex: none; width: 100%; max-width: none; }
  .finish-bar .primary { order: -1; }
  .controls {
    width: 360px; min-height: 0; border-top: 0; border-left: 1px solid var(--line);
    display: flex; flex-direction: column;
  }
  .controls .tab { padding: 12px 8px 10px; font-size: .92rem; }
  /* the options scroll in the full height of the page, between the tabs and Done */
  .panels { flex: 1; height: auto; min-height: 0; }
}
@media (min-width: 900px) {   /* side panel: two rows of three */
  .controls .tabs { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Sliders ---------- */
.slider { padding: 4px 0 2px; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; cursor: default; }
.slider-head label { color: var(--text); }
.slider-head output { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0;
  background: transparent; cursor: pointer; --a: 50%; --b: 50%; touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--line) var(--a), var(--accent) var(--a), var(--accent) var(--b), var(--line) var(--b));
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--line) var(--a), var(--accent) var(--a), var(--accent) var(--b), var(--line) var(--b));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.6);
}
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* ---------- Crop panel ---------- */
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.chip { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--raised); color: var(--text); font-size: .88rem; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.crop-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 4px; }
.tool-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 8px; background: var(--raised); font-size: .78rem; color: var(--muted); }
.tool-btn svg { width: 22px; height: 22px; color: var(--text); }
.tool-btn[aria-pressed="true"] svg { color: var(--accent); }

/* Crop box on the photo */
.crop-box {
  position: absolute; z-index: 3; touch-action: none; cursor: move;
  outline: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  background-image:
    linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px),
                              transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px),
                               transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px));
}
.crop-box .h { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.crop-box .h::after { content: ""; position: absolute; inset: 12px; background: #fff; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,.6); }
.crop-box .h[data-h="n"], .crop-box .h[data-h="s"] { cursor: ns-resize; }
.crop-box .h[data-h="e"], .crop-box .h[data-h="w"] { cursor: ew-resize; }
.crop-box .h[data-h="nw"], .crop-box .h[data-h="se"] { cursor: nwse-resize; }
.crop-box .h[data-h="ne"], .crop-box .h[data-h="sw"] { cursor: nesw-resize; }
.h[data-h="nw"] { left: 0; top: 0; }    .h[data-h="n"] { left: 50%; top: 0; }   .h[data-h="ne"] { left: 100%; top: 0; }
.h[data-h="e"] { left: 100%; top: 50%; } .h[data-h="se"] { left: 100%; top: 100%; } .h[data-h="s"] { left: 50%; top: 100%; }
.h[data-h="sw"] { left: 0; top: 100%; } .h[data-h="w"] { left: 0; top: 50%; }

/* ---------- Before / after ---------- */
.tag {
  display: none; position: absolute; top: 10px; z-index: 2; padding: 3px 8px; border-radius: 6px;
  background: rgba(0,0,0,.6); font-size: .78rem; font-weight: 600; pointer-events: none;
}
.tag-before { left: 10px; } .tag-after { right: 10px; }
.frame.comparing { touch-action: none; cursor: ew-resize; }
.frame.comparing .tag { display: block; }
.compare-handle { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.6); pointer-events: none; }
.compare-handle span {
  position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
.compare-handle span::before, .compare-handle span::after {
  content: ""; position: absolute; top: 11px; border: 6px solid transparent;
}
.compare-handle span::before { left: 3px; border-right-color: #333; }
.compare-handle span::after { right: 3px; border-left-color: #333; }

/* ---------- Looks ---------- */
.looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 6px; }
.look { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; font-size: .76rem; color: var(--muted); text-align: center; line-height: 1.15; }
.look i { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; }
.look[aria-pressed="true"] { color: var(--text); }
.look[aria-pressed="true"] i { border-color: var(--accent); }

/* ---------- Export sheet ---------- */
.sheet {
  width: min(520px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 24px));
  padding: 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--text);
}
.sheet::backdrop { background: rgba(0,0,0,.6); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px 18px; }
.sheet-head h2 { margin: 0; font-size: 1.15rem; }
.sheet > .fine { margin: 0; padding: 4px 18px 16px; }
.formats { list-style: none; margin: 0; padding: 0 12px; }
.formats li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--line); }
.formats li:first-child { border-top: 0; }
.f-name { font-weight: 600; }
.f-size { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.f-notes { grid-column: 1 / -1; font-size: .82rem; color: var(--muted); }
.f-notes .warn { color: var(--accent); }
.f-notes .link-btn { padding: 0 0 0 4px; color: var(--accent); font-size: .82rem; }
.f-btn { grid-row: 1 / 3; grid-column: 2; height: 38px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--raised); font-weight: 600; cursor: pointer; }
.f-btn:hover { background: var(--line); }
.f-btn:disabled { opacity: .7; cursor: progress; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 50; max-width: min(440px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 10px;
  background: #f4f4f4; color: #151515; font-size: .92rem; box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.toast.error { background: var(--danger); color: #1a0703; }

/* Phones: brand on the first row, editing controls on a second row below it */
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; row-gap: 6px; }
  .bar-actions { flex-basis: 100%; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
  #auto-btn { margin-left: auto; }
  .bar-actions:not(:has(#auto-btn)) #export-btn { margin-left: auto; }
  .text-btn { padding: 0 8px; }
  .brand-name { font-size: 1.3rem; }
}
@media (max-width: 340px) {
  .text-btn span { display: none; }
  .primary-btn { padding: 0 12px; }
  .brand-sub { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } #progress-fill { transition: none; } }

/* ======================= Phase 2: Photo / Sports switch ======================= */
.modes { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--raised); margin-right: 8px; flex: none; }
.mode { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 700; font-size: .9rem; text-decoration: none; }
.mode[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.mode:not([aria-current="page"]):hover { color: var(--text); }
@media (max-width: 640px) {
  .modes { margin-right: 0; padding: 2px; }
  .mode { padding: 5px 9px; font-size: .82rem; }
  .brand { gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { font-size: 1.22rem; }
  .brand-sub { font-size: .64rem; letter-spacing: .01em; }
}
/* Phones: "Powered by / Framework-Studio.org" on two lines, so the brand and the three modes share a row */
@media (max-width: 640px) {
  .brand-sub2 { display: block; }
  .brand-sub { line-height: 1.08; }
  .brand-name { line-height: 1; }
  .bar { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 380px) {             /* 360 px Android phones: brand and switch still share a row */
  .brand { gap: 6px; }
  .brand-sub { font-size: .58rem; letter-spacing: 0; }
  .mode { padding: 5px 7px; font-size: .78rem; }
}

/* ======================= Shared controls ======================= */
.sub { margin: 12px 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.panel > .sub:first-child { margin-top: 2px; }
.hint { margin: 2px 0 8px; font-size: .85rem; color: var(--muted); }
.hint-inline { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: .82rem; }
.chip.busy { opacity: .75; cursor: progress; }
.chips { flex-wrap: wrap; overflow: visible; }
#ratios { flex-wrap: wrap; }

.switch { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; font-size: .92rem; }
.switch input {
  -webkit-appearance: none; appearance: none; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 12px;
  background: var(--line); position: relative; cursor: pointer; transition: background .15s;
}
.switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }

.color-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.color-label { flex: none; width: 74px; font-size: .9rem; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 3px; }
.swatch {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18);
  cursor: pointer; padding: 0;
}
.swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch.auto { width: auto; border-radius: 14px; padding: 0 10px; background: var(--raised); color: var(--text); font-size: .8rem; font-weight: 700; }
.swatch.picker { -webkit-appearance: none; appearance: none; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.swatch.picker::-webkit-color-swatch-wrapper { padding: 0; }
.swatch.picker::-webkit-color-swatch { border: 0; border-radius: 50%; opacity: 0; }
.swatch.picker.custom::-webkit-color-swatch { opacity: 1; }
.swatch.picker::-moz-color-swatch { border: 0; border-radius: 50%; opacity: 0; }
.swatch.picker.custom { outline: 2px solid var(--accent); outline-offset: 2px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.field { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--muted); }
.field.wide { grid-column: 1 / -1; }
input[type="text"] {
  width: 100%; height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: 1rem var(--font);
}
input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
input[type="text"]::placeholder { color: #5d6167; }

/* ======================= Sports tiles, fonts, logo ======================= */
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0; }
.tiles.wide { grid-template-columns: repeat(3, 1fr); }
.tile { display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; color: var(--muted); font-size: .72rem; cursor: pointer; text-align: center; }
.tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; border: 2px solid transparent; background: var(--raised); display: block; }
.tiles.wide .tile img { aspect-ratio: 12 / 5; }
.tile[aria-pressed="true"] { color: var(--text); }
.tile[aria-pressed="true"] img { border-color: var(--accent); }
@media (max-width: 400px) { .tiles { grid-template-columns: repeat(4, 1fr); } .tiles.wide { grid-template-columns: repeat(2, 1fr); } }

.fonts { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; }
.font-chip { flex: none; padding: 6px 12px; border-radius: 8px; border: 2px solid transparent; background: var(--raised); color: var(--text); font-size: 1.15rem; cursor: pointer; white-space: nowrap; }
.font-chip[aria-pressed="true"] { border-color: var(--accent); }

.logo-row { display: flex; align-items: center; gap: 12px; }
.logo-thumb {
  width: 72px; height: 72px; border-radius: 8px; display: grid; place-items: center; flex: none; overflow: hidden;
  background: repeating-conic-gradient(#3a3d42 0 25%, #2c2f33 0 50%) 0 0 / 14px 14px; color: var(--muted); font-size: .72rem;
}
.logo-thumb img { max-width: 92%; max-height: 92%; }
.logo-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.bg-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; }

/* ======================= Cut-out card, effects ======================= */
.cutout-card { padding: 10px 12px; border-radius: 10px; background: var(--raised); margin-bottom: 8px; }
.cutout-msg { margin: 0 0 6px; font-size: .9rem; }
.cutout-card[data-state="ready"] .cutout-msg::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: #6fd08c; vertical-align: 1px;
}
.cutout-card .progress-bar { margin: 6px 0; }
#cutout-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.cutout-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cutout-actions .chip { background: var(--panel); }

.effect { padding: 4px 0 6px; border-top: 1px solid var(--line); }
.effect:first-child { border-top: 0; }
.effect.off .effect-body { opacity: .55; }
.effect-colour .swatches { padding: 2px 3px 4px; }
.effect-colour .swatch { width: 24px; height: 24px; }

/* Message over the picture (cut-out progress) */
.stage-note {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4;
  width: min(360px, calc(100% - 32px)); padding: 10px 14px; border-radius: 10px;
  background: rgba(20,21,23,.88); font-size: .9rem; box-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.stage-note .progress-bar { margin-top: 8px; }
.stage-note .progress-bar div { height: 100%; background: var(--accent); transition: width .3s; }
.frame.draggable { cursor: move; touch-action: none; }

/* ======================= Brush (fix the cut-out) ======================= */
body.brushing { overflow: hidden; }
.brush { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg); }
.brush-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brush-bar h2 { margin: 0 auto 0 0; font-size: 1.05rem; }
.seg { display: flex; padding: 3px; border-radius: 10px; background: var(--raised); }
.seg-btn { border: 0; background: none; color: var(--muted); font-weight: 700; padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.seg-btn.keep[aria-pressed="true"] { background: #2f9e5a; color: #fff; }
.seg-btn.erase[aria-pressed="true"] { background: #c8423c; color: #fff; }
.brush-size { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.brush-size input { width: 120px; }
.brush-actions { display: flex; gap: 4px; align-items: center; }
.brush-actions .text-btn:disabled { opacity: .4; cursor: default; }
.brush-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.brush-stage.busy .spinner { opacity: 1; }
.brush-frame { position: relative; }
#brush-img, #brush-draw { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#brush-draw { touch-action: none; cursor: crosshair; }
.brush-help { margin: 0; padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); font-size: .85rem; color: var(--muted); text-align: center; background: var(--panel); }
@media (max-width: 640px) {
  .brush-bar h2 { flex-basis: 100%; }
  .brush-size input { width: 90px; }
}

/* ======================= Sports: text fields with their own style ======================= */
.field-list { display: flex; flex-direction: column; gap: 6px; }
.field-card { border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.field-card.open { border-color: #4a4e54; }
.field-top { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; }
.field-name { font-size: .88rem; color: var(--text); }
.field-top input[type="text"] { height: 38px; background: var(--panel); }
.field-card.off .field-top input[type="text"] { opacity: .5; text-decoration: line-through; }
.style-btn {
  height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--raised);
  color: var(--text); font: 600 .82rem var(--font); cursor: pointer; position: relative;
}
.style-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.style-btn.changed::after {          /* this field has its own style */
  content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.field-style { padding: 2px 10px 6px; border-top: 1px solid var(--line); }
.fs-row { display: flex; align-items: center; justify-content: space-between; }
.fs-move { display: flex; gap: 2px; }
.fs-move .icon-btn { width: 36px; height: 36px; background: var(--raised); }
.fs-move .icon-btn svg { width: 20px; height: 20px; }
.fs-line { margin: 2px 0 6px; }
.fs-font { display: flex; align-items: center; gap: 10px; font-size: .9rem; margin: 4px 0; }
.fs-font select {
  flex: 1; min-width: 0; height: 38px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 1.05rem;
}
.fs-colour .color-label { width: 56px; }
@media (max-width: 380px) { .field-top { grid-template-columns: 70px 1fr auto; } }

/* Wide screens: room for every tab on one row */
@media (min-width: 1200px) { .controls { width: 400px; } }

/* ======================= Sports: dragging words on the picture ======================= */
.frame.text-drag { touch-action: none; }
.frame.text-drag.over-text { cursor: move; }
.text-hit { position: absolute; z-index: 3; pointer-events: none; outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: 2px; }
.text-hit span {
  position: absolute; left: -3px; bottom: calc(100% + 6px); padding: 2px 6px; border-radius: 4px;
  background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.fs-pos { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.fs-pos-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fs-pos .chip { background: var(--raised); }

/* ======================= Phase 2B: looks, templates, text effects ======================= */
.pop-big { width: 100%; max-width: none; margin: 4px 0 2px; }
.pop-big.busy, .preset.busy, .chip.busy, #pop-btn.busy { opacity: .6; cursor: progress; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.preset {
  height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer;
  background: linear-gradient(135deg, var(--raised), var(--panel)); color: var(--text); font: 700 .88rem var(--font);
}
.preset:hover { border-color: var(--accent); }
.templates { display: flex; flex-direction: column; gap: 8px; }
.template { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.template.active { border-color: var(--accent); }
.template h4 { margin: 0 0 2px; font-size: .98rem; }
.template .hint { margin-bottom: 6px; }
.awards { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.awards .field { margin-top: 6px; }
.boost { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px;
         margin: 6px 0; border-radius: 8px; background: var(--raised); font-size: .85rem; }
.fx-controls, .fs-fx { margin-top: 4px; }
.fs-fx-wrap { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.fs-fx-label { display: block; font-size: .9rem; margin-bottom: 4px; }
.fx-style .chip { padding: 6px 10px; font-size: .82rem; }
#pop-btn span { white-space: nowrap; }
@media (max-width: 380px) { #pop-btn span { display: none; } }

/* Make it pop stands out in the top bar */
#pop-btn { border: 1px solid var(--accent); color: var(--accent); }
#pop-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Messages are information only: taps go through them, and on phones they sit over the
   picture instead of covering the tools */
.toast { pointer-events: none; }
@media (max-width: 899px) {
  .toast { top: calc(110px + env(safe-area-inset-top)); bottom: auto; }
}

/* ======================= Sports: crop the photo, orientation ======================= */
.crop-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.crop-row .chip { display: inline-flex; align-items: center; gap: 6px; }
.crop-row .chip svg { width: 16px; height: 16px; }
#orientation { margin-top: 6px; }
#orientation .chip:disabled { opacity: .4; cursor: default; }
.crop-frame { position: relative; overflow: hidden; }
.crop-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.cropper .chips { flex-wrap: wrap; }
/* the crop handles at the photo's edges stay fully grabbable (the stage clips the shading) */
.cropper .crop-frame { overflow: visible; }

/* ======================= Collage ======================= */
.collage .tabs { grid-template-columns: repeat(6, 1fr); }
@media (min-width: 900px) { .collage .controls .tabs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 369px) { .collage .tabs { grid-template-columns: repeat(3, 1fr); } }
#starts .preset { height: auto; padding: 8px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
#starts .preset span { font-weight: 400; font-size: .76rem; color: var(--muted); }
.layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.layout-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 8px;
  border: 2px solid transparent; background: var(--raised); color: var(--muted); font: 600 .72rem var(--font); cursor: pointer;
}
.layout-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.layout-btn .lt { position: relative; width: 100%; aspect-ratio: 1; }
.layout-btn .lt i { position: absolute; box-sizing: border-box; border: 1.5px solid var(--raised); background: #6b7078; border-radius: 3px; }
.layout-btn.fits .lt i { background: color-mix(in srgb, var(--accent) 70%, #6b7078); }
.photo-list, .overlay-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.photo-row {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 10px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line);
}
.photo-row[aria-current="true"] { border-color: var(--accent); }
.photo-row.unused { opacity: .6; }
.photo-row .n { width: 1.4em; text-align: center; font-weight: 700; color: var(--muted); }
.photo-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--raised); flex: none; }
.photo-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.photo-row .icon-btn { width: 34px; height: 34px; flex: none; }
.photo-row .icon-btn:disabled { opacity: .3; }
.add-photos { display: inline-flex; margin: 0 0 8px; cursor: pointer; }
.add-photos:has(input:disabled) { opacity: .4; pointer-events: none; }
a.chip { text-decoration: none; display: inline-flex; align-items: center; }
.chip.danger { color: #ff8a80; }
.sticker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 4px 0 10px; }
.sticker-btn { aspect-ratio: 1; padding: 6px; border: 0; border-radius: 8px; background: var(--raised); cursor: pointer; }
.sticker-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sticker-btn:hover { outline: 2px solid var(--accent); }
.ov-row {
  text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font: .88rem var(--font); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-row[aria-current="true"] { border-color: var(--accent); }
.collage .panel input[type="text"] { margin-bottom: 6px; }

/* ======================= Eraser (Phase 3) ======================= */
#eraser-img, #eraser-draw { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
#eraser-draw { touch-action: none; cursor: crosshair; }
.eraser .brush-actions .primary-btn:disabled { opacity: .45; cursor: default; }
.eraser-progress {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(360px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: 0 6px 24px rgba(0,0,0,.45); font-size: .9rem;
}
.eraser-progress .progress-bar { height: 6px; }
#eraser-fill { height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .3s; }
.eraser.working #eraser-draw { pointer-events: none; }
.erase-panel .big-btn { width: 100%; justify-content: center; margin: 4px 0 8px; }
.erase-count { font-size: .9rem; color: var(--muted); margin: 0 0 6px; }
/* Photo mode has 7 tabs (Erase): one row on phones, two rows of four in the side panel */
.editor.photo .tabs, .editor.sports .tabs { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 369px) { .editor.photo .tabs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .editor.sports .tabs { grid-template-columns: repeat(4, 1fr); } }   /* longer words: two rows */
@media (min-width: 900px) { .editor.photo .controls .tabs, .editor.sports .controls .tabs { grid-template-columns: repeat(4, 1fr); } }
.bg-upload .chip, .crop-row .chip { display: inline-flex; align-items: center; gap: 6px; }
.bg-upload .chip svg { width: 16px; height: 16px; }

/* ======================= Animated clips (Phase 4) ======================= */
.sheet > .clip-cta { width: calc(100% - 24px); justify-content: center; margin: 2px 12px 10px; }
.clip-sheet { overflow-y: auto; max-height: calc(100dvh - 24px); }
.clip-sheet .clip-body { display: flex; flex-direction: column; gap: 6px; padding: 0 18px 16px; }
.clip-sheet .sub { margin: 8px 0 2px; }
.clip-sheet #clip-caption { margin-top: 6px; }
.clip-sheet #clip-make, .clip-sheet #clip-download { width: 100%; justify-content: center; margin-top: 6px; text-decoration: none; }
.clip-sheet #clip-make:disabled { opacity: .5; cursor: progress; }
.clip-progress { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--muted); }
#clip-fill { height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .3s; }
.clip-status {
  position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40;
  width: max-content; white-space: nowrap; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 16px; border: 0; border-radius: 999px;
  background: var(--raised); color: var(--text); font: inherit; font-size: .92rem; box-shadow: 0 6px 24px rgba(0,0,0,.5); cursor: pointer;
}
.clip-status svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; }
.clip-status-bar { width: 64px; height: 6px; flex: none; border-radius: 3px; background: var(--line); overflow: hidden; }
.clip-status-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.clip-status.ready { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.clip-status.ready svg { stroke: var(--accent-ink); }
.clip-status.ready .clip-status-bar { display: none; }
.clip-result { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.clip-result video, .clip-result img { max-width: 100%; max-height: 52vh; border-radius: 8px; background: #000; }
/* full-width big buttons inside panels and sheets (the finish bar keeps its 260 px cap) */
.sheet > .clip-cta, .clip-sheet .big-btn, .erase-panel .big-btn { flex: none; max-width: none; }
.clip-sheet .big-btn, .erase-panel .big-btn { width: 100%; }

/* ======================= Cut-out brush: Tap to select, box, zoom ======================= */
.seg-btn.add[aria-pressed="true"] { background: #2f9e5a; color: #fff; }
.seg-btn.remove[aria-pressed="true"] { background: #c8423c; color: #fff; }
.seg-btn.box[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.seg-btn.person[aria-pressed="true"] { background: #f2b43c; color: #1b1b1b; }
.brush-modes .seg-btn { padding: 7px 11px; white-space: nowrap; }
.brush-sliders { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.brush-sliders[hidden] { display: none; }
.brush-zoom { display: flex; align-items: center; gap: 2px; }
.brush-zoom .icon-btn { width: 36px; height: 36px; }
#brush-stage { touch-action: none; }                       /* pinches zoom the photo, not the page */
#brush-frame { transform-origin: 50% 50%; will-change: transform; }
#brush-stage.panning, #brush-stage.panning #brush-draw { cursor: grabbing; }
.brush-busy {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(360px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: 0 6px 24px rgba(0,0,0,.45); font-size: .9rem;
}
#brush-fill { height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .3s; }
.cutout-quality { margin: 2px 0 6px; }
@media (max-width: 640px) {
  .brush-modes { width: 100%; }
  .brush-modes .seg-btn { flex: 1; padding: 7px 4px; font-size: .86rem; }
  .brush-sliders .brush-size input { width: 80px; }
}

/* ======================= Crop everywhere ======================= */
/* Photo mode: while the crop box shows, its handles may stick out of the photo (they were cut
   in half at the edges); the stage around the photo leaves room for them */
.frame:has(> .crop-box:not([hidden])) { overflow: visible; }
/* the crop window (Sports, Collage): shapes, then rotate / flip / turn / straighten */
.cropper .brush-bar { align-items: center; }
.cropper .crop-ratios { flex-basis: 100%; flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
.crop-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex-basis: 100%; }
.crop-tools .tool-btn { flex: none; width: 64px; padding: 6px 2px; }
.crop-straighten { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); flex: 1; min-width: 220px; }
.crop-straighten input { flex: 1; }
.crop-straighten output { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
#crop-undo:disabled { opacity: .4; cursor: default; }
.cropper .crop-frame img { pointer-events: none; }

/* Phones held sideways: the side-panel layout, so the photo keeps its space (it shrank to
   nothing under the controls, so there was nowhere to crop) */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 899px) {
  .editor { flex-direction: row; }
  .controls {
    width: 320px; min-height: 0; border-top: 0; border-left: 1px solid var(--line);
    display: flex; flex-direction: column;
  }
  .panels { flex: 1; height: auto; min-height: 0; }
  .controls .tabs { grid-template-columns: repeat(4, 1fr); }
  .controls .tab { padding: 8px 2px 6px; font-size: .74rem; }
  .finish-bar {
    width: 200px; flex-direction: column; justify-content: center; gap: 10px;
    padding: 12px; border-top: 0; border-left: 1px solid var(--line);
  }
  .finish-bar .big-btn { flex: none; width: 100%; max-width: none; height: 46px; }
  .bar { flex-wrap: nowrap; padding-top: 4px; padding-bottom: 4px; }
  .bar-actions { flex-basis: auto; border-top: 0; padding-top: 0; }
  .brand-sub2 { display: inline; }
  .cropper .crop-tools .tool-btn span { display: none; }
}

/* Intro effects picker (clips.js): picture tiles, the chosen ones numbered when combined */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.fx-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 3px;
  border: 2px solid var(--line); border-radius: 10px; background: none; color: inherit; font: inherit; cursor: pointer; }
.fx-tile img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 7px; background: #111; display: block; }
.fx-tile .fx-name { font-size: .8rem; text-align: center; line-height: 1.2; }
.fx-tile[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fx-tile .fx-num:not(:empty) { position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 700; display: grid; place-items: center; }

/* ======================= Saved projects ======================= */
.save-btn { position: relative; }
.save-btn.in-project::after { content: ""; position: absolute; right: 6px; top: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.proj-sheet .proj-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 18px; }
.proj-sheet .field { font-size: .9rem; }
.proj-sheet .fine, .proj-sheet p { margin: 0; }
.proj-buttons { display: flex; gap: 10px; }
.proj-buttons .big-btn { background: var(--raised); color: var(--text); }
.proj-buttons .big-btn.primary { background: var(--accent); color: var(--accent-ink); }
.big-btn.danger { background: var(--danger); color: #1b0703; }

.projects { flex: 1; overflow-y: auto; padding: 16px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); }
.projects-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.projects-head h1 { margin: 0; font-size: 1.5rem; }
.projects-head .fine { margin: 0; color: var(--muted); }
.projects-empty { color: var(--muted); max-width: 560px; }
.projects-empty a { color: var(--accent); }
.project-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.project-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line); min-width: 0; }
.project-card.busy { opacity: .6; pointer-events: none; }
.project-pic { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; padding: 0; border: 0;
  border-radius: 10px; background: var(--bg); color: var(--muted); font-weight: 700; cursor: pointer; overflow: hidden; }
.project-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.project-info { padding: 0 4px; min-width: 0; }
.project-name { margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-meta { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.project-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.project-actions .chip { border: 0; cursor: pointer; }
.chip.primary-chip { background: var(--accent); color: var(--accent-ink); }
.chip.danger-chip { color: var(--danger); }
@media (max-width: 520px) {             /* phones: one project a row, picture on the left */
  .project-list { grid-template-columns: 1fr; gap: 10px; }
  .project-card { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto 1fr; gap: 6px 10px; }
  .project-pic { grid-row: 1 / 3; align-self: start; }
  .project-info { padding: 2px 0 0; }
  .project-actions { align-content: start; gap: 5px; }
  .project-actions .chip { padding: 6px 10px; font-size: .8rem; }
}
/* the Projects link: a word on wide screens, a folder icon on phones (keeps the top bar to two rows) */
.mode-projects { display: inline-flex; align-items: center; gap: 5px; }
.mode-projects svg { width: 17px; height: 17px; display: none; }
@media (max-width: 640px) {
  .mode-projects svg { display: block; }
  .mode-projects span { display: none; }
}
@media (max-width: 640px) {             /* four mode buttons and the brand share one row */
  .mode { padding: 5px 6px; font-size: .76rem; }
  .mode-projects { padding: 5px 5px; }
}
@media (max-width: 380px) {
  .mode-projects svg { width: 15px; height: 15px; }
}

/* ======================= Phone menu (the modes, projects and account in one button) ======================= */
.nav-wrap { position: relative; display: none; flex: none; }
.nav-btn {
  display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px 0 12px; border: 0; border-radius: 9px;
  background: var(--raised); color: var(--text); font-weight: 700; font-size: .88rem; cursor: pointer;
}
.nav-btn svg { width: 18px; height: 18px; color: var(--muted); transition: transform .15s; }
.nav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; padding: 6px;
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.nav-menu a, .nav-menu button {
  display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 8px; background: none; text-align: left;
  color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.nav-menu a:hover, .nav-menu button:hover { background: var(--raised); }
.nav-menu a[aria-current="page"] { color: var(--accent); }
.nav-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.nav-menu .nav-who { padding: 8px 12px 4px; color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .bar .modes { display: none; }
  .nav-wrap { display: block; }
  .brand-name { font-size: 1.12rem; white-space: nowrap; }
}
@media (max-width: 340px) {
  .brand { gap: 6px; }
  .brand-mark { width: 24px; height: 24px; }
  .brand-name { font-size: 1.02rem; }
  .nav-btn { padding: 0 6px 0 10px; font-size: .82rem; }
}

/* ======================= Pages: home, log in, account, admin, terms ======================= */
.page { flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  padding: 20px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.page > * { flex-shrink: 0; }
.page-inner { width: 100%; max-width: 640px; margin: 0 auto; flex: 1 0 auto; }
.home > section, .home > .ex-note { width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; }
.page.admin .page-inner, .page.home .page-inner { max-width: 1100px; }
.page h1 { margin: 4px 0 10px; font-size: 1.6rem; line-height: 1.2; }
.page h2 { margin: 0 0 8px; font-size: 1.1rem; }
.page a:not(.big-btn) { color: var(--accent); }
.lede { color: var(--muted); font-size: 1.05rem; margin: 0 0 16px; }
.notice { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); }
.notice.ok { border-color: color-mix(in srgb, #4caf50 60%, var(--line)); }
.notice.bad { border-color: var(--danger); color: var(--text); background: color-mix(in srgb, var(--danger) 14%, var(--panel)); }
.form { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; }
.form .field { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .92rem; }
.form input[type="email"], .form input[type="password"], .form input[type="text"], .form input[type="number"], .form select {
  height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font: inherit; font-size: 1rem; font-weight: 400; width: 100%; box-sizing: border-box; }
.form input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--muted); }
.form .check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.form .big-btn { flex: none; max-width: none; width: 100%; }
.form .fine { margin: -4px 0 0; }
.form-links { color: var(--muted); }
.auth .page-inner { max-width: 420px; }
.card { padding: 16px; margin: 0 0 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.card .form { margin: 0; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.row-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }
.row-links .big-btn { flex: 1 1 200px; max-width: none; height: 46px; font-size: 1rem; text-decoration: none; }
.big-btn { text-decoration: none; }
.meter { height: 10px; border-radius: 5px; background: var(--raised); overflow: hidden; margin: 8px 0; }
.meter i { display: block; height: 100%; background: var(--accent); min-width: 2px; }
.meter.near i { background: #ff9f43; }
.meter.full i { background: var(--danger); }

/* Footer: terms, privacy, age note */
.site-foot { width: 100%; max-width: 1100px; margin: 28px auto 0; padding: 16px 0 calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-foot a { color: var(--muted); }
.site-foot .grow { flex: 1 1 auto; }

/* Home */
.home > .hero { max-width: 760px; margin: 8px auto 22px; text-align: center; }
.hero h1 { font-size: clamp(1.7rem, 6vw, 2.8rem); line-height: 1.12; margin: 6px 0 12px; letter-spacing: -.01em; }
.hero .hl { color: var(--accent); }
.home-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 6px auto 10px; max-width: 640px; }
.home-cta .big-btn { flex: 1 1 170px; max-width: 220px; }
#cta-guest, #cta-open { flex-basis: 100%; max-width: 440px; }
@media (min-width: 700px) { #cta-guest, #cta-open { flex-basis: 170px; max-width: 220px; } }
.home-note { color: var(--muted); margin: 6px auto 0; max-width: 520px; }
.examples { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 62%); gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin: 0 -2px; overscroll-behavior-x: contain; }
.examples .ex { margin: 0; scroll-snap-align: center; }
.examples img, .examples video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); }
.examples figcaption { margin-top: 6px; color: var(--muted); font-size: .85rem; text-align: center; }
@media (min-width: 760px) { .examples { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.ex-note { text-align: center; color: var(--muted); margin: 0 0 18px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.feature { padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.feature h2 { margin: 0 0 4px; font-size: 1.02rem; color: var(--accent); }
.feature p { margin: 0; color: var(--muted); }

/* Header: account button (desktop) */
.acct-wrap { position: relative; flex: none; margin-right: 6px; }
.acct-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; margin-right: 6px; border-radius: 9px;
  border: 0; cursor: pointer; font: inherit;
  background: var(--raised); color: var(--text); font-weight: 700; font-size: .88rem; text-decoration: none; flex: none; max-width: 200px; }
.acct-wrap .acct-btn { margin-right: 0; }
.acct-btn .chev { width: 16px; height: 16px; color: var(--muted); }
.acct-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.acct-menu { min-width: 220px; }
.nav-menu .logout { color: var(--danger); }
.acct-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-btn svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
@media (max-width: 1000px) { .acct-btn { padding: 0 9px; } .acct-btn span { display: none; } }
@media (max-width: 640px) { .acct-btn, .acct-wrap { display: none; } }

/* Guests: the "create a free account to save" prompts (projects.js) */
.nudge-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.nudge-buttons .big-btn { flex: none; max-width: none; width: 100%; height: 50px; }
.nudge-card { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel)); color: var(--muted); font-size: .9rem; }
.nudge-card a { color: var(--accent); font-weight: 700; }
.sheet .nudge-card { margin: 4px 18px 18px; }
.guest-projects { max-width: 560px; }
.guest-projects h1 { margin: 0 0 8px; font-size: 1.5rem; }

/* Admin page */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tr.off td { opacity: .6; }
.admin-table .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; min-width: 190px; }
.admin-table .actions form { margin: 0; }
.admin-table .chip { cursor: pointer; }
.chip.danger { color: var(--danger); }
.acct-tag { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--raised); font-size: .74rem; color: var(--muted); }
.acct-tag.bad { color: var(--danger); }
.del { width: auto; }
.del[open] { width: 100%; }
.del summary { list-style: none; display: inline-flex; }
.del summary::-webkit-details-marker { display: none; }
.del .form { margin-top: 8px; }
.page code { background: var(--raised); padding: 1px 5px; border-radius: 5px; font-size: .85em; }
@media (max-width: 640px) {             /* phones: each account as a block */
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .admin-table td { border: 0; padding: 3px 4px; }
}

/* Error pages, terms, privacy */
.err-code { margin: 10px 0 0; font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -.02em; }
.error-page .row-links .big-btn { flex: 1 1 140px; }
.legal .page-inner { max-width: 720px; }
.legal h2 { margin: 22px 0 6px; }
.legal p, .legal li { color: var(--text); line-height: 1.55; }
.legal ul { padding-left: 20px; }
.plan-form select { height: 32px; padding: 0 8px; border-radius: 999px; border: 0; background: var(--raised); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; }

/* Crop tab (Sports, Collage) */
.crop-big { width: 100%; max-width: none; margin: 4px 0 8px; }
.crop-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.crop-pick-btn { position: relative; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px;
  background: var(--raised); overflow: hidden; cursor: pointer; }
.crop-pick-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crop-pick-btn span { position: absolute; left: 4px; top: 3px; font-size: .72rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; }
.crop-pick-btn[aria-pressed="true"] { border-color: var(--accent); }

/* Admin: sections, one-time password / link, add user, activity */
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; }
.admin-nav a { font-weight: 600; }
.admin-nav a[aria-current="page"] { color: var(--text) !important; text-decoration: none; }
.crumbs { margin: 0; color: var(--muted); font-size: .88rem; }
.card.shown { border-color: var(--accent); }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; font-family: ui-monospace, monospace; font-size: .95rem; }
.copy-row .big-btn { flex: none; width: auto; padding: 0 18px; height: 46px; }
.form .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.form select { appearance: auto; }
.acct-tag.warn { color: #ff9f43; }
.warn-text { color: #ff9f43; }
.activity { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.activity li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.activity li:last-child { border-bottom: 0; }

/* Admin: Terms / Privacy editor */
.page.admin .page-editor { margin-bottom: 14px; }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.md-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .md-panes { grid-template-columns: 1fr; } }
.md-write { display: flex; flex-direction: column; }
.md-write textarea { min-height: 420px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font: .92rem/1.5 ui-monospace, monospace; resize: vertical; }
.md-preview-wrap { display: flex; flex-direction: column; min-width: 0; }
.md-preview { min-height: 420px; max-height: 70vh; overflow: auto; padding: 4px 14px; border-radius: 10px; border: 1px dashed var(--line); background: var(--panel); }
.legal-body h2 { margin: 22px 0 6px; }
.legal-body p, .legal-body li { line-height: 1.55; }
.versions { list-style: none; margin: 0; padding: 0; }
.versions li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.v-actions { display: flex; gap: 6px; align-items: center; }
.v-actions form { margin: 0; }

/* Admin: home page editor */
.feature-edit { display: grid; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.form textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font: inherit; font-weight: 400; resize: vertical; }
.ex-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex-item { display: grid; grid-template-columns: auto 72px 1fr auto; gap: 10px; align-items: center; padding: 8px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg); cursor: grab; }
.ex-item.dragging { opacity: .5; border-style: dashed; }
.ex-item img, .ex-item video { width: 72px; height: 90px; object-fit: cover; border-radius: 8px; background: #000; }
.ex-grip { color: var(--muted); font-weight: 800; letter-spacing: -2px; }
.ex-move { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 520px) { .ex-item { grid-template-columns: 56px 1fr auto; } .ex-grip { display: none; }
  .ex-item img, .ex-item video { width: 56px; height: 70px; } }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.home-actions .big-btn { flex: 1 1 200px; max-width: none; width: auto; }
.replace-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.inline-form select, .inline-form input[type="file"] { max-width: 100%; font: inherit; font-size: .88rem; color: var(--text); }
.inline-form select { height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--raised); padding: 0 6px; }
.preview-note { border-color: var(--accent); max-width: 1100px; margin: 0 auto 14px; width: 100%; }
.opt { color: var(--muted); font-weight: 400; font-size: .85em; }

/* Projects: admins viewing another account's projects */
.owner-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.owner-pick label { font-weight: 700; }
.owner-pick input, .owner-pick select { height: 38px; border-radius: 9px; border: 1px solid var(--line); background: var(--raised);
  color: var(--text); font: inherit; padding: 0 10px; min-width: 0; }
.owner-pick input { flex: 0 1 180px; }
.owner-pick select { flex: 1 1 220px; max-width: 420px; }
.notice.viewing { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); font-weight: 600; }
.preview-sheet img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 10px; }
.project-actions a.chip { text-decoration: none; }

/* Studio: the Sports page's other skin (templates/sports.html): sports-only parts stay in the page
   (the script expects them) but never show */
.editor.studio .sports-only, .editor.studio .studio-hide { display: none !important; }
.editor:not(.studio) .studio-only { display: none !important; }