/* Layout: calm client-branded library. Top bar with big search, chip-dropdown facets, justified-row photo grid; asset view is a full page (image left, tabbed panel right). */
:root {
  --bg: #FAFAF8;        /* Cloud White */
  --surface: #FFFFFF;
  --sand: #F5EFE4;      /* Soft Sand */
  --morning: #DCEEF4;   /* Morning Blue */
  --line: #D7DEE0;      /* Foam Gray */
  --fg: #333638;        /* Charcoal */
  --muted: #687174;
  --teal: #76A0A8;      /* Sure Teal */
  --action: #4C7A83;
  --action-hover: #3E6770;
  --on-action: #FFFFFF;
  --teal-ink: #3D6A73;
  --ok: #3F7A4E; --ok-bg: #E3F0E5;
  --warn: #9A5B0C; --warn-bg: #FBEDD5;
  --alert: #A4473A; --alert-bg: #F8E3DF;
  --img-bg: #E9ECEC;
  --sarah-ink: #8A6A3A;
  --scrim: rgba(28, 31, 32, 0.55);
  --shadow: 0 18px 40px -18px rgba(51, 54, 56, 0.28);
  --font-head: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1C1D; --surface: #222628; --sand: #2B2924; --morning: #1D2D32; --line: #343A3C;
    --fg: #ECEDEA; --muted: #9AA3A5; --teal: #8DB6BE; --action: #84B0B8; --action-hover: #9CC3CA; --on-action: #0F1C1F;
    --teal-ink: #9CC3CA; --ok: #8CC79A; --ok-bg: #1F3325; --warn: #E9B566; --warn-bg: #3A2C15; --alert: #EE9A8C; --alert-bg: #3D221E;
    --img-bg: #2A2E30; --sarah-ink: #DDBF8F; --scrim: rgba(0, 0, 0, 0.62); --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1A1C1D; --surface: #222628; --sand: #2B2924; --morning: #1D2D32; --line: #343A3C;
  --fg: #ECEDEA; --muted: #9AA3A5; --teal: #8DB6BE; --action: #84B0B8; --action-hover: #9CC3CA; --on-action: #0F1C1F;
  --teal-ink: #9CC3CA; --ok: #8CC79A; --ok-bg: #1F3325; --warn: #E9B566; --warn-bg: #3A2C15; --alert: #EE9A8C; --alert-bg: #3D221E;
  --img-bg: #2A2E30; --sarah-ink: #DDBF8F; --scrim: rgba(0, 0, 0, 0.62); --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.wrap { padding-inline: clamp(16px, 3vw, 40px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: 14px; line-height: 1.2; transition: background .2s, border-color .2s, transform .1s; white-space: nowrap; }
.btn:hover { border-color: var(--teal); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
.btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--sand); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn.icon { padding: 8px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.kbd { font: 500 11px var(--font-mono); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); }

/* top bar */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding-block: 14px; }
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand b { font: 600 19px var(--font-head); letter-spacing: -0.01em; }
.brand b span { color: var(--teal-ink); }
.brand small { color: var(--muted); font-size: 12px; }
.search { position: relative; max-width: 680px; width: 100%; justify-self: center; }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; height: 48px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 56px 0 46px; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent); }
.search .kbd { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.role-g { display: inline-flex; align-items: center; gap: 10px; }
.role { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.role button { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); }
.role button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.role-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.queue-link .count { background: var(--warn-bg); color: var(--warn); border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 600; }

/* library header */
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; }
.lib-head h1 { font-size: 26px; }
.lib-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.coltabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.coltab { border: 1px solid transparent; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.coltab:hover { color: var(--fg); background: var(--sand); }
.coltab[aria-pressed="true"] { color: var(--fg); background: var(--surface); border-color: var(--line); }
.coltab .n { color: var(--muted); font-weight: 500; margin-left: 8px; font-size: 11.5px; background: var(--sand); padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }

.facets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); padding: 7px 12px 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; }
.fchip:hover { border-color: var(--teal); }
.fchip.on { background: var(--morning); border-color: color-mix(in srgb, var(--teal) 55%, var(--line)); color: var(--fg); }
.fchip .v { color: var(--teal-ink); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip svg { width: 14px; height: 14px; color: var(--muted); }
.clear-all { font-size: 13px; color: var(--teal-ink); background: none; border: 0; padding: 6px 8px; text-decoration: underline; text-underline-offset: 3px; }
.filters-btn { display: none; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-bottom: 14px; }
.count-l { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.count-l b { color: var(--fg); font-weight: 600; }
.addr { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; background: var(--sand); border-radius: 999px; padding: 4px 4px 4px 12px; }
.addr code { font: 12px var(--font-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.addr code b { color: var(--fg); font-weight: 500; }
.addr .btn { padding: 3px 10px; font-size: 12px; }

/* justified grid */
.grid { display: flex; flex-direction: column; gap: 8px; padding-bottom: 120px; }
.grow { display: flex; gap: 8px; }
.card { position: relative; flex: none; border-radius: var(--r-sm); overflow: hidden; background: var(--img-bg); cursor: pointer; outline-offset: 3px; animation: rise .45s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0ms); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.card:hover img { transform: scale(1.02); }
.card.sel { box-shadow: 0 0 0 3px var(--action); }
.card .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,23,.32) 0%, rgba(20,22,23,0) 30%, rgba(20,22,23,0) 58%, rgba(20,22,23,.62) 100%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.card:hover .shade, .card:focus-within .shade, .card.sel .shade { opacity: 1; }
.card .tl { position: absolute; left: 8px; top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; max-width: calc(100% - 52px); }
.card .tr { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; }
.card .bot { position: absolute; left: 10px; right: 8px; bottom: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.card:hover .bot, .card:focus-within .bot, .card.sel .bot { opacity: 1; transform: none; }
.card .bot .t { font-size: 13px; font-weight: 500; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; border: 0; background: rgba(250,250,248,.92); color: #333638; opacity: 0; transition: opacity .2s, transform .1s; }
.cbtn svg { width: 16px; height: 16px; }
.card:hover .cbtn, .card:focus-within .cbtn, .cbtn.on { opacity: 1; }
.cbtn:active { transform: scale(.94); }
.cbtn.fav.on { color: #C2564A; }
.cbtn.fav.on svg { fill: currentColor; }
.cbtn.pick.on { background: var(--action); color: var(--on-action); }
.getbtn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: rgba(250,250,248,.95); color: #333638; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; flex: none; }
.getbtn svg { width: 15px; height: 15px; }
.vid { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; background: rgba(20,22,23,.66); color: #fff; font: 500 12px var(--font-mono); padding: 3px 8px 3px 6px; border-radius: 999px; transition: opacity .2s; }
.vid svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.card:hover .vid { opacity: 0; }
@media (hover: none) { .cbtn, .card .bot, .card .shade { opacity: 1; transform: none; } .card:hover .vid { opacity: 1; } .card .vid { bottom: auto; top: 44px; } }

/* status chips */
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; line-height: 1.3; white-space: nowrap; background: rgba(250,250,248,.94); color: #333638; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.ok { color: #2F6B3E; }
.st.changes { color: #A4473A; }
.st.await { color: #5C6466; }
.st.await::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.st.newrev { color: #3D6A73; }
.st.upload { color: #7A5A2A; background: #F5EFE4; }
.st.draft { color: #9A5B0C; background: #FBEDD5; }
.st.vert { color: #333638; }
.st.vert::before { width: 5px; height: 8px; border-radius: 1.5px; }
.st.claude { color: #6B4E9B; }
.st.quiet { padding: 0; width: 20px; height: 20px; justify-content: center; gap: 0; overflow: hidden; }
.st.quiet .tx { display: none; }
.card:hover .st.quiet, .card:focus-within .st.quiet { width: auto; height: auto; padding: 3px 8px; gap: 5px; }
.card:hover .st.quiet .tx, .card:focus-within .st.quiet .tx { display: inline; }
.legend-inline { display: inline-flex; gap: 14px; margin-left: 14px; font-size: 12.5px; color: var(--muted); }
.legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
.legend-inline i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* in-panel chips use tokens */
.pchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pchip.ok { background: var(--ok-bg); color: var(--ok); }
.pchip.changes { background: var(--alert-bg); color: var(--alert); }
.pchip.await { background: var(--sand); color: var(--muted); }
.pchip.newrev { background: var(--morning); color: var(--teal-ink); }
.pchip.draft { background: var(--warn-bg); color: var(--warn); }
.pchip.pub { background: var(--morning); color: var(--teal-ink); }
.pchip.stale { background: var(--warn-bg); color: var(--warn); }
.pchip.claude { background: var(--sand); color: var(--fg); border: 1px dashed var(--line); }

/* empty */
.empty { padding: 64px 0 120px; max-width: 520px; }
.empty h2 { font-size: 22px; }
.empty p { color: var(--muted); }
.empty .sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* bulk bar */
.bulk { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 8px; background: var(--fg); color: var(--bg); padding: 8px 8px 8px 18px; border-radius: 999px; box-shadow: var(--shadow); max-width: calc(100% - 32px); flex-wrap: wrap; animation: rise .3s cubic-bezier(.16,1,.3,1); }
.bulk .btn { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 30%, transparent); }
.bulk .btn.primary { background: var(--teal); border-color: var(--teal); color: #12201F; }
.bulk b { font-weight: 600; font-size: 14px; margin-right: 6px; }

/* popover + toast */
.pop { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); min-width: 240px; max-width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; padding: 6px; animation: pop .18s cubic-bezier(.16,1,.3,1); }
.pop h4 { margin: 8px 10px 4px; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.pop .opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.pop .opt:hover, .pop .opt:focus-visible { background: var(--sand); }
.pop .opt small { color: var(--muted); font: 12px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pop .opt.dis { opacity: .45; }
.pop .opt .ck { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line); display: inline-grid; place-items: center; flex: none; }
.pop .opt.on .ck { background: var(--action); border-color: var(--action); color: var(--on-action); }
.pop .opt .ck svg { width: 12px; height: 12px; stroke-width: 2.4; }
.pop .lbl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.pop .note { font-size: 12px; color: var(--muted); padding: 4px 10px 8px; }
.pop .row { display: flex; gap: 6px; padding: 6px; }
.pop input[type=text] { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--bg); font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; background: var(--fg); color: var(--bg); padding: 12px 18px; border-radius: 14px; box-shadow: var(--shadow); max-width: min(560px, calc(100vw - 32px)); font-size: 14px; animation: rise .3s cubic-bezier(.16,1,.3,1); }
.toast code { display: block; margin-top: 4px; font: 12.5px var(--font-mono); color: var(--teal); word-break: break-all; }

/* asset view */
.asset { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; padding-block: 18px 80px; }
.a-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 16px; }
.a-head h1 { font-size: 22px; margin-right: auto; min-width: 0; }
.a-head .pos { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stage { position: relative; background: var(--img-bg); border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; min-height: 320px; max-height: calc(100dvh - 190px); }
.stage img { max-height: calc(100dvh - 190px); width: 100%; object-fit: contain; }
.stage .play { position: absolute; inset: 0; margin: auto; width: 78px; height: 78px; border-radius: 50%; border: 0; background: rgba(250,250,248,.92); color: #333638; display: grid; place-items: center; box-shadow: var(--shadow); }
.stage .play svg { width: 28px; height: 28px; fill: currentColor; stroke: none; margin-left: 4px; }
.stage .badge { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; }
.revbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.revbar .l { font-size: 13px; color: var(--muted); margin-right: 4px; }
.revpill { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.revpill[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.revpill.draft { border-style: dashed; }
.revnote { margin-top: 10px; font-size: 14px; color: var(--muted); }
.revnote b { color: var(--fg); font-weight: 500; }
.banner { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-md); font-size: 13.5px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.banner.info { background: var(--morning); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.panel { border-left: 1px solid var(--line); padding-left: 28px; min-width: 0; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tab { border: 0; background: none; padding: 10px 10px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--action); }
@media (max-width: 760px) { .tab-long { display: none; } .tab { padding-inline: 9px; } }
@media (max-width: 760px) { .meta-row .addr { display: none; } .coltabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .coltab { flex: none; } .lib-head p { font-size: 13px; } }
.tab .n { font-size: 11.5px; background: var(--sand); padding: 0 6px; border-radius: 999px; margin-left: 4px; }
.sect { padding-block: 14px; border-bottom: 1px solid var(--line); }
.sect:last-child { border-bottom: 0; }
.sect h3 { font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 10px; }
.kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 4px; background: var(--sand); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 13px; }
.tag button { border: 0; background: transparent; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); padding: 0; }
.tag button:hover { background: var(--line); color: var(--fg); }
.tag button svg { width: 12px; height: 12px; }
.tag.facet { background: var(--morning); padding-right: 10px; }
.tagadd { border: 1px dashed var(--line); background: transparent; border-radius: 999px; padding: 3px 10px; font-size: 13px; width: 120px; }
.tagadd:focus { outline: none; border-color: var(--teal); border-style: solid; }
.rel { background: var(--sand); border-radius: var(--r-md); padding: 10px 12px; font-size: 13.5px; display: flex; gap: 10px; }
.rel svg { color: var(--teal-ink); margin-top: 2px; }
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14px; border-top: 1px solid var(--line); }
.li:first-child { border-top: 0; }
.li small { color: var(--muted); font: 12px var(--font-mono); }
.linkbtn { border: 0; background: none; color: var(--teal-ink); font-weight: 500; font-size: 13px; padding: 4px 6px; border-radius: 6px; display: inline-flex; gap: 5px; align-items: center; }
.linkbtn:hover { background: var(--morning); }
.linkbtn svg { width: 15px; height: 15px; }

/* approval */
.appr { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; background: var(--surface); }
.appr .top-l { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.appr .top-l b { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.appr p { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.appr .acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.appr textarea, .cmt-new textarea { width: 100%; min-height: 72px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); resize: vertical; font-size: 14px; }
.appr textarea:focus, .cmt-new textarea:focus { outline: none; border-color: var(--teal); }
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.field label { font-size: 13px; font-weight: 500; }
.err { color: var(--alert); font-size: 13px; }
.who { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; font: 600 11.5px var(--font-head); flex: none; }
.who.client { background: var(--sand); color: var(--sarah-ink); border: 1px solid color-mix(in srgb, #C9A46A 40%, transparent); }
.who.owner { background: var(--morning); color: var(--teal-ink); border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); }
.cmt { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.cmt:first-child { border-top: 0; }
.cmt .body { min-width: 0; flex: 1; }
.cmt .hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cmt .hd b { font-weight: 600; }
.cmt .hd time { color: var(--muted); }
.cmt .rv { font: 600 11px var(--font-mono); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; color: var(--muted); }
.cmt p { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.cmt.resolved p { color: var(--muted); }
.cmt.resolved .hd b { color: var(--muted); }
.cmt-new { margin-top: 10px; }
.cmt-new .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.cmt-new label { display: inline-flex; gap: 6px; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--sand); color: var(--fg); font-weight: 500; }

/* crops list */
.croprow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.croprow:first-child { border-top: 0; }
.cthumb { width: 64px; background-repeat: no-repeat; border-radius: 6px; background-color: var(--img-bg); }
.croprow .nm { font-weight: 600; font-size: 14px; }
.croprow .sub { font-size: 12.5px; color: var(--muted); }
.croprow .acts { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; margin-left: -6px; }
.stale-note { font-size: 12.5px; color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 6px 9px; margin-top: 6px; }

/* overlays */
.ov { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; animation: fadein .25s ease; }
.ov-head { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) clamp(16px, 3vw, 32px) 12px; border-bottom: 1px solid var(--line); }
.ov-head h2 { font-size: 17px; margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crop { flex: 1; display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
.crop-side { border-right: 1px solid var(--line); overflow: auto; padding: 16px; }
.crop-side h4 { margin: 14px 4px 6px; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.crop-side h4:first-child { margin-top: 0; }
.popt { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.popt:hover { background: var(--sand); }
.popt[aria-pressed="true"] { background: var(--morning); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.popt small { color: var(--muted); font: 12px var(--font-mono); white-space: nowrap; }
.popt .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.popt .dot.stale { background: var(--warn); }
.aspgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.asp { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px; font: 500 12.5px var(--font-body); }
.asp i { display: block; border: 1.5px solid currentColor; border-radius: 2px; opacity: .7; }
.asp[aria-pressed="true"] { background: var(--morning); border-color: var(--teal); }
.custom { display: flex; gap: 6px; align-items: center; }
.custom input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--surface); font: 13px var(--font-mono); }
.custom span { color: var(--muted); }
.crop-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cstage { flex: 1; min-height: 260px; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--img-bg) 60%, var(--bg)); overflow: hidden; touch-action: none; }
.cbox { position: relative; overflow: hidden; border-radius: 4px; user-select: none; }
.cbox img { width: 100%; height: 100%; pointer-events: none; }
.crect { position: absolute; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 0 9999px rgba(18,20,21,.58); outline: 1.5px solid #fff; cursor: move; touch-action: none; }
.crect:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.crect .g { position: absolute; inset: 0; background:
  linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
  linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% + .5px), transparent calc(66.66% + .5px)); pointer-events: none; }
.crect .h { position: absolute; width: 18px; height: 18px; border: 3px solid #fff; touch-action: none; filter: drop-shadow(0 0 1.5px rgba(0,0,0,.85)); }
.crect .h::after { content: ""; position: absolute; inset: -12px; }
.h.nw { left: -3px; top: -3px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.h.ne { right: -3px; top: -3px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.h.sw { left: -3px; bottom: -3px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.h.se { right: -3px; bottom: -3px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.cbar { border-top: 1px solid var(--line); padding: 14px clamp(16px, 3vw, 28px) calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; background: var(--bg); }
.cbar .info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cbar .px { font-size: 14px; }
.cbar .px b { font-variant-numeric: tabular-nums; }
.cbar .warnline { color: var(--warn); font-size: 13px; }
.cbar .link { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cbar .link code, .cbar .fn { font: 12.5px var(--font-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cbar .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* upload */
.modal-scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); display: grid; place-items: center; padding: 16px; animation: fadein .2s ease; }
.modal { background: var(--bg); border-radius: var(--r-lg); width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: var(--shadow); animation: pop .25s cubic-bezier(.16,1,.3,1); }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.modal-h h2 { font-size: 19px; }
.modal-b { padding: 8px 20px 20px; }
.drop { display: block; cursor: pointer; border: 1.5px dashed color-mix(in srgb, var(--teal) 60%, var(--line)); border-radius: var(--r-md); background: var(--surface); padding: 30px 20px; text-align: center; transition: background .2s; }
.drop.over { background: var(--morning); }
.drop p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.drop b { font-family: var(--font-head); font-weight: 600; font-size: 16px; }
.ufile { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.ufile:first-child { border-top: 0; }
.ufile .th { width: 56px; height: 56px; border-radius: 8px; background: var(--img-bg) center/cover no-repeat; }
.ufile .nm { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ufile .sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ufile .err { margin-top: 4px; }
.ufile .prods { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ptog { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.ptog[aria-pressed="true"] { background: var(--morning); border-color: var(--teal); }
.bar { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; width: 0; background: var(--action); transition: width .2s; }
.modal-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; font-size: 13px; color: var(--muted); }

/* review queue */
.queue { padding-block: 24px 100px; max-width: 1100px; }
.queue-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.queue-h h1 { font-size: 26px; }
.queue-h p { margin: 4px 0 0; color: var(--muted); max-width: 62ch; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.legend div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; }
.legend b { font-family: var(--font-head); font-weight: 600; display: block; font-size: 14.5px; }
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); animation: rise .4s cubic-bezier(.16,1,.3,1) both; }
.qrow:first-of-type { margin-top: 18px; }
.qimgs { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 10px; max-width: calc(var(--n, 1) * 320px); }
.qimgs figure { margin: 0; }
.qimgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--img-bg); }
.qimgs figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.qside h3 { font-size: 16px; }
.qside p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.qside .acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.qrow.done { opacity: .55; }
.qempty { margin-top: 30px; padding: 40px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }

/* filter sheet (phone) */
.sheet { position: fixed; inset: auto 0 0 0; z-index: 56; background: var(--bg); border-radius: 20px 20px 0 0; max-height: 82dvh; overflow: auto; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); animation: up .3s cubic-bezier(.16,1,.3,1); }
.sheet .grab { width: 40px; height: 4px; background: var(--line); border-radius: 4px; margin: 6px auto 10px; }
.sheet h4 { margin: 16px 0 6px; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.sheet .opts { display: flex; flex-wrap: wrap; gap: 6px; }

.foot { color: var(--muted); font-size: 12px; padding-block: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.foot a { color: var(--teal-ink); }

/* ---------- round 2 ---------- */
.avatar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: inline-grid; place-items: center; font: 600 12.5px var(--font-head); padding: 0; flex: none; }
.avatar.client { background: var(--sand); color: var(--sarah-ink); }
.avatar.owner { background: var(--morning); color: var(--teal-ink); }
.acct-h { display: flex; gap: 12px; align-items: center; padding: 10px 10px 8px; }
.acct-h b { display: block; font-size: 14.5px; }
.acct-h small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.soon { font: 500 11px/1.3 var(--font-body); color: var(--muted); background: var(--sand); padding: 2px 8px; border-radius: 999px; text-align: right; max-width: 150px; }
.switch { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.opt.on .switch { background: var(--warn); }
.opt.on .switch::after { transform: translateX(14px); }
.offline { background: var(--warn-bg); color: var(--warn); font-size: 13.5px; padding-block: 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.offline .linkbtn { color: var(--warn); text-decoration: underline; text-underline-offset: 3px; }
.toast-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.toast button { border: 0; background: var(--teal); color: #12201F; border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 13px; flex: none; }
body.bare .top, body.bare .offline { display: none !important; }
.sk { background: linear-gradient(90deg, var(--img-bg) 0%, color-mix(in srgb, var(--img-bg) 50%, var(--surface)) 50%, var(--img-bg) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm); flex: none; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
img.fade { opacity: 0; transition: opacity .5s ease; }
img.fade.in { opacity: 1; }
.share-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.confirm { font-size: 13px; background: var(--alert-bg); color: var(--alert); border-radius: 8px; padding: 8px 10px; margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linkbtn.danger { color: var(--alert); }
.linkbtn.danger:hover { background: var(--alert-bg); }
.linkbtn[disabled] { color: var(--muted); cursor: default; background: none; }
/* sign-in */
.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-art { position: relative; background: var(--img-bg) center / cover no-repeat; min-height: 240px; }
.auth-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,23,0) 45%, rgba(20,22,23,.6)); }
.auth-mark { position: absolute; left: clamp(20px, 4vw, 48px); bottom: clamp(48px, 7vw, 80px); z-index: 1; color: #FAFAF8; font: 600 clamp(26px, 3.4vw, 42px)/1.05 var(--font-head); letter-spacing: -0.02em; }
.auth-mark span { display: block; color: #CFE3E7; font-weight: 500; }
.auth-cap { position: absolute; left: clamp(20px, 4vw, 48px); bottom: 18px; z-index: 1; margin: 0; color: rgba(250,250,248,.82); font-size: 12.5px; }
.auth-main { display: flex; align-items: center; padding: 48px clamp(20px, 6vw, 88px); }
.auth-in { width: 100%; max-width: 420px; }
.auth h1 { font-size: 28px; }
.eyebrow { display: inline-block; font: 600 11.5px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--teal-ink); margin-bottom: 8px; }
.lead { color: var(--muted); margin: 10px 0 0; }
.lead b { color: var(--fg); font-weight: 500; overflow-wrap: anywhere; }
.inp { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--surface); font-size: 16px; }
.inp:focus, .otp input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent); }
.inp.bad, .otp input.bad { border-color: var(--alert); }
.btn.big { width: 100%; justify-content: center; height: 48px; font-size: 15px; margin-top: 16px; }
.otp-f { border: 0; padding: 0; margin: 0; min-width: 0; }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.otp input { width: 100%; min-width: 0; height: 56px; text-align: center; font: 600 22px var(--font-mono); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0; }
.otp input:disabled { opacity: .5; }
.msg { border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-top: 12px; }
.msg.err { background: var(--alert-bg); color: var(--alert); }
.msg.warn { background: var(--warn-bg); color: var(--warn); }
.msg.info { background: var(--morning); color: var(--teal-ink); }
.auth-links { display: flex; justify-content: space-between; gap: 8px; margin: 14px -6px 0; flex-wrap: wrap; }
.demo { margin-top: 36px; font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; line-height: 1.55; }
.demo .linkbtn { margin: 4px 0 0 -6px; }
.auth-foot { margin-top: 28px; font-size: 12px; color: var(--muted); }
/* video player */
.stage .pctl { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; background: rgba(20,22,23,.7); color: #fff; border-radius: 12px; padding: 6px 10px; backdrop-filter: blur(8px); }
.pctl button { border: 0; background: transparent; color: #fff; min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; padding: 0 6px; }
.pctl button:hover { background: rgba(255,255,255,.12); }
.pctl svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 2.2; }
.pctl .tc { font: 500 12.5px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pctl input[type=range] { flex: 1; min-width: 0; accent-color: #9CC3CA; }
.pctl .vtog { font: 600 12px var(--font-body); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 0 10px; height: 28px; }
.pctl .vtog[aria-pressed="true"] { background: #FAFAF8; color: #333638; }
.stage.vert img { width: auto; max-width: 100%; height: min(calc(100dvh - 210px), 640px); aspect-ratio: 9 / 16; object-fit: cover; }
#pimg { transition: transform .12s linear, opacity .5s ease; }
/* compare */
.cmp-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cmp-side figure { margin: 0; position: relative; }
.cmp-side img { width: 100%; border-radius: 12px; display: block; }
.cmp-side figcaption { position: absolute; left: 10px; top: 10px; }
.wipe { position: relative; overflow: hidden; border-radius: var(--r-lg); touch-action: none; user-select: none; cursor: ew-resize; background: var(--img-bg); }
.wipe img { width: 100%; display: block; pointer-events: none; }
.wipe .wtop { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.wipe .wtop img { height: 100%; object-fit: cover; }
.wipe .wbar { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #FAFAF8; box-shadow: 0 0 6px rgba(0,0,0,.35); }
.wipe .wknob { position: absolute; top: 50%; left: var(--x); width: 44px; height: 44px; border-radius: 50%; border: 0; background: #FAFAF8; color: #333638; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); cursor: ew-resize; }
.wipe .wknob svg { width: 14px; height: 14px; stroke-width: 2.2; }
.wipe .wl { position: absolute; left: 12px; top: 12px; }
.wipe .wr { position: absolute; right: 12px; top: 12px; }
.revbar select { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 10px; font-size: 13px; }
.qcmp { max-width: 640px; }
.qcap { font-size: 12.5px; color: var(--muted); margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* tag suggestions */
.tagwrap { position: relative; display: inline-block; }
.tagsugg { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; }
.tagsugg button { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0; background: transparent; padding: 7px 10px; border-radius: 7px; font-size: 13.5px; text-align: left; }
.tagsugg button[aria-selected="true"], .tagsugg button:hover { background: var(--sand); }
.tagsugg small { color: var(--muted); font: 12px var(--font-mono); white-space: nowrap; }
/* upload extras */
.demo-line { font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
.ufail { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 6px; flex-wrap: wrap; }
.bar.bad i { background: var(--alert); }
.okt { color: var(--ok); font-weight: 500; }
/* shared + dead pages */
.sh-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wordmark { font: 600 30px/1.1 var(--font-head); letter-spacing: -0.02em; }
.wordmark span { color: var(--teal-ink); font-weight: 500; }
.wordmark.sm { font-size: 20px; }
.sh-by { font-size: 13px; color: var(--muted); }
.sh-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-block: 28px 18px; }
.sh-title h1 { font-size: 30px; }
.sh-title p { margin: 4px 0 0; color: var(--muted); }
.sh-f { color: var(--muted); font-size: 12px; padding-block: 24px 90px; border-top: 1px solid var(--line); }
.shared .grid { padding-bottom: 40px; }
.dead { min-height: 100dvh; display: flex; flex-direction: column; }
.dead-in { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 600px; padding-block: 60px; }
.dead-in h1 { font-size: 30px; margin-top: 18px; }
.dead-in p { margin: 8px 0 0; font-size: 17px; }
.dead-in .muted { color: var(--muted); font-size: 14px; }
.dead-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--sand); display: grid; place-items: center; color: var(--teal-ink); }
.dead-ic svg { width: 26px; height: 26px; }
.demo-pill { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; gap: 6px; align-items: center; border: 1.5px dashed var(--teal); background: var(--surface); color: var(--fg); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow); }
/* email + branding */
.modal.wide { width: min(720px, 100%); }
.lead-s { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.mail { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mail-h { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 8px; }
.mail-h dt { color: var(--muted); }
.mail-h dd { margin: 0; overflow-wrap: anywhere; }
.mail-b { padding: 18px 20px 6px; font-size: 15px; line-height: 1.55; }
.mail-b p { margin: 0 0 12px; }
.mail-b ul { margin: 0 0 14px; padding-left: 20px; }
.mail-b .cta { display: inline-block; background: #5E8D96; color: #FFFFFF; padding: 9px 16px; border-radius: 999px; font-weight: 500; font-size: 14px; }
.mail-b .sig { color: var(--muted); }
.bsect { margin-top: 18px; }
.bsect h3 { font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 10px; }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sw { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 12.5px; background: var(--surface); }
.sw i { display: block; height: 54px; border-bottom: 1px solid var(--line); }
.sw div { padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.sw code { font-family: var(--font-mono); color: var(--muted); }
.sw span { color: var(--muted); }
.spec { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 8px; background: var(--surface); }
.spec small { color: var(--muted); font-size: 12px; }
.presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; font-size: 13.5px; }
.presets span { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.presets small { font: 12px var(--font-mono); color: var(--muted); white-space: nowrap; }
.src { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }
.mbar { display: none; }
@media (pointer: coarse) {
  .crect .h { width: 30px; height: 30px; }
  .crect .h::after { inset: -8px; }
}
@media (max-width: 760px) {
  .role-g { display: none; }
  .a-head .hide-m { display: none; }
  .a-head h1 { order: 5; flex-basis: 100%; font-size: 19px; }
  .a-head .pos { margin-left: auto; }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .mbar .btn { flex: 1; justify-content: center; }
  .asset { padding-bottom: 110px; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art { min-height: 190px; }
  .auth-mark { bottom: 38px; font-size: 24px; }
  .auth-main { padding-block: 28px 40px; }
  .otp { gap: 6px; }
  .otp input { height: 50px; font-size: 20px; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presets { grid-template-columns: minmax(0, 1fr); }
  .stage.vert img { height: 62dvh; }
  .stage .pctl { left: 8px; right: 8px; bottom: 8px; gap: 6px; padding: 4px 6px; }
  .pctl .tc { font-size: 10.5px; }
  .sh-title h1, .dead-in h1 { font-size: 24px; }
  .demo-pill { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- round 3: phone grid + sheets ---------- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
.pcard { min-width: 0; animation: rise .45s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0ms); }
.pframe { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--img-bg); cursor: pointer; }
.pframe img { width: 100%; height: 100%; object-fit: cover; }
.pframe .vid { left: 6px; bottom: 6px; top: auto; }
.pcard.sel .pframe { box-shadow: 0 0 0 3px var(--action); }
.pdot { position: absolute; left: 8px; top: 8px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(250,250,248,.95); pointer-events: none; }
.pdot.ok { background: #3F7A4E; }
.pdot.await { background: rgba(250,250,248,.95); box-shadow: inset 0 0 0 2px #5C6466, 0 0 0 2px rgba(250,250,248,.95); }
.pdot.changes { background: #A4473A; }
.pdot.newrev { background: #5E8D96; }
.pdot.upload { background: #C9A46A; }
.pdot.draft { background: #D18A1C; }
.pcheck { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(250,250,248,.85); border: 2px solid #FAFAF8; display: grid; place-items: center; color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pcheck svg { width: 16px; height: 16px; stroke-width: 2.6; }
.pcheck.on { background: var(--action); border-color: var(--action); color: var(--on-action); }
.pcap { display: flex; align-items: flex-start; gap: 4px; margin-top: 6px; }
.ptxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.pt { font-size: 13.5px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pp { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pget { flex: none; width: 44px; height: 44px; margin-right: -4px; border: 0; border-radius: 12px; background: transparent; color: var(--teal-ink); display: grid; place-items: center; }
.pget svg { width: 22px; height: 22px; stroke-width: 1.8; }
.pget:active { background: var(--morning); }
.selbtn { display: inline-flex; min-height: 44px; padding-inline: 18px; }
.bulk.hint { padding: 12px 20px; font-size: 14px; }
.bulk .shl { display: none; }
.psheet { position: fixed; inset: 0; z-index: 70; }
.psheet-scrim { position: absolute; inset: 0; background: var(--scrim); animation: fadein .2s ease; }
.psheet-panel:focus { outline: none; }
.psheet-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 20px 20px 0 0; max-height: 86dvh; display: flex; flex-direction: column; padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); animation: up .28s cubic-bezier(.16,1,.3,1); box-shadow: var(--shadow); }
.psheet .grab { height: 24px; flex: none; display: grid; place-items: center; touch-action: none; cursor: grab; }
.psheet .grab::before { content: ""; width: 40px; height: 5px; border-radius: 5px; background: var(--line); }
.psheet-head { display: flex; gap: 12px; align-items: center; padding: 2px 4px 12px; border-bottom: 1px solid var(--line); touch-action: none; }
.psheet-head img { width: 60px; height: 45px; object-fit: cover; border-radius: 8px; flex: none; background: var(--img-bg); }
.psheet-head b { display: block; font: 600 16px/1.25 var(--font-head); }
.psheet-head small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.psheet-body.pop { position: static; min-width: 0; max-width: none; max-height: none; flex: 1; min-height: 0; overflow: auto; border: 0; box-shadow: none; padding: 4px 0; background: transparent; animation: none; border-radius: 0; }
.psheet-body .opt { min-height: 48px; font-size: 15px; padding: 10px 8px; border-radius: 10px; }
.psheet-body .opt small { font-size: 13px; }
.psheet-body h4 { margin: 14px 8px 4px; }
.psheet-body .row input[type=text] { min-height: 44px; font-size: 16px; }
.psheet-body .row .btn { min-height: 44px; }
.psheet-body .acct-h { padding: 6px 8px 10px; }
.psheet-cancel { flex: none; width: 100%; min-height: 48px; justify-content: center; margin-top: 8px; font-size: 15px; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 900px) {
  .meta-row { align-items: flex-end; }
  .count-l { display: block; flex: 1; min-width: 0; }
  .legend-inline { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; }
  .bulk { left: 16px; right: 16px; transform: none; border-radius: 18px; justify-content: space-between; padding: 8px; gap: 6px; flex-wrap: nowrap; }
  .bulk b { padding-left: 8px; margin: 0; white-space: nowrap; }
  .bulk .btn { min-height: 44px; padding-inline: 10px; }
  .bulk .lg { display: none; }
  .bulk .shl { display: inline; }
  .bulk.hint { justify-content: center; }
  .mbar .btn, .a-head .btn, .revbar .btn, .revpill { min-height: 44px; }
  .a-head .btn.icon { min-width: 44px; justify-content: center; }
  .linkbtn { min-height: 44px; }
  .top .btn, .top .avatar { min-height: 44px; min-width: 44px; justify-content: center; }
  .brand { min-height: 44px; justify-content: center; }
  .bulk .btn { min-width: 44px; justify-content: center; }
  .revpill { min-width: 44px; justify-content: center; }
  .ov-head .btn { min-height: 44px; }
  .tab { min-height: 44px; }
  .crop-side .asp { min-height: 52px; }
  .crop-side .popt { min-height: 44px; }
  .custom input, .custom .btn { min-height: 44px; }
  .cbar .acts .btn { min-height: 44px; }
  .fchip.filters-btn, .addr .btn, .coltab { min-height: 44px; }
}

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (max-width: 1080px) {
  .asset { grid-template-columns: minmax(0, 1fr); }
  .panel { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .top-in { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .search { grid-column: 1 / -1; grid-row: 2; }
  .search .kbd { display: none; }
  .role-l { display: none; }
  .up-l { display: none; }
  .facets .fchip, .facets .clear-all { display: none; }
  .facets .filters-btn { display: inline-flex; }
  .brand b { font-size: 16px; }
  .brand small { font-size: 11px; }
  .top-actions { gap: 6px; }
  .queue-link .ql { display: none; }
  .role button { padding: 5px 9px; }
  .card .st:not(.vert):not(.draft) { padding: 0; width: 20px; height: 20px; justify-content: center; gap: 0; overflow: hidden; font-size: 0; }
  .card .st:not(.vert):not(.draft) .tx { display: none !important; }
  .card .st.vert, .card .st.draft { font-size: 10.5px; padding: 2px 7px; }
  .lib-head h1 { font-size: 22px; }
  .crop { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .crop-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 34dvh; }
  .cbar { grid-template-columns: minmax(0, 1fr); }
  .cbar .acts { justify-content: flex-start; }
  .qrow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .addr { width: 100%; }
}

/* ---------- build: real video, misc ---------- */
.vid-stage { background: #111; }
.vid-stage video { width: 100%; max-height: calc(100dvh - 190px); display: block; background: #111; }
.vid-stage.vert video { width: auto; max-width: 100%; height: min(calc(100dvh - 210px), 640px); aspect-ratio: 9 / 16; margin-inline: auto; }
.vid-stage .badge { pointer-events: none; }
.vtog-btn { position: absolute; right: 14px; top: 14px; border: 0; border-radius: 999px; padding: 6px 12px; font: 600 12.5px var(--font-body); background: rgba(250,250,248,.92); color: #333638; }
.vtog-btn[aria-pressed="true"] { background: var(--action); color: var(--on-action); }
.ufile .linkbtn { margin-top: 2px; }
@media (max-width: 760px) { .vid-stage.vert video { height: 62dvh; } .vtog-btn { min-height: 44px; } }

/* ---------- review round 1 fixes ---------- */
.grid.noanim .card, .grid.noanim .pcard { animation: none; }
.grid.noanim img.fade { transition: none; }
.copyview { color: var(--teal-ink); }
.li small, .kv dd { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.a-head h1 { display: inline-flex; align-items: center; gap: 6px; }
.rename { padding: 4px; opacity: .55; }
.a-head h1:hover .rename, .rename:focus-visible { opacity: 1; }
.renamef { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.renamef input { font: 600 20px var(--font-head); border: 1px solid var(--teal); border-radius: 10px; padding: 4px 10px; background: var(--surface); min-width: 0; width: min(420px, 60vw); }
body:has(.bulk) .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.share-ctl .btn.icon { padding: 8px; }
/* queue: uniform rows */
.qrow { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
.qimgs, .qcmp { max-width: 360px; width: 100%; }
.qimgs { grid-template-columns: minmax(0, 1fr); }
.qside .acts .ghost { color: var(--alert); }
/* lightbox (shared page) */
.lb { position: fixed; inset: 0; z-index: 58; background: #0E1011; display: flex; flex-direction: column; animation: fadein .2s ease; color: #FAFAF8; }
.lb-head { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) clamp(16px, 3vw, 32px) 12px; }
.lb-head > div { margin-right: auto; display: flex; flex-direction: column; }
.lb-head b { font: 600 17px var(--font-head); }
.lb-head small { color: rgba(250,250,248,.65); font-size: 12.5px; }
.lb-x { color: #FAFAF8; }
.lb-stage { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; padding: 0 clamp(16px, 6vw, 80px) 24px; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: calc(100dvh - 104px - env(safe-area-inset-top, 0px)); object-fit: contain; border-radius: 8px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(250,250,248,.14); color: #FAFAF8; display: grid; place-items: center; }
.lb-nav:hover { background: rgba(250,250,248,.26); }
.lb-nav.l { left: 12px; } .lb-nav.r { right: 12px; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 900px) {
  /* phone grid header: photos start higher */
  .lib-head { padding-top: 12px; flex-wrap: nowrap; align-items: center; }
  .lib-head h1 { font-size: 19px; }
  .lib-head p { display: none; }
  .lib-head .share-ctl .btn { padding: 6px 10px; font-size: 13px; }
  .lib-head .share-ctl .btn span { display: none; }
  .coltabs { margin-top: 10px; }
  .facets { margin-top: 8px; }
  .meta-row { margin-top: 6px; padding-bottom: 10px; align-items: center; }
  .legend-inline { display: none !important; }
  .facets { display: none; }
  .mrow-acts { display: inline-flex; gap: 8px; }
  .mrow-acts .fchip { min-height: 44px; }
  .lib-head .share-ctl .lg { display: none; }
  .copyview { display: none; }
  .asset { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
  /* phone crop editor: chips strip on top, image fills, action bar always visible */
  .ov { height: 100dvh; }
  .crop { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .crop-side { order: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; max-height: none; flex: none; padding: 10px 12px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .crop-side h4, .crop-side .custom, .crop-side #cerr { display: none; }
  .crop-side .aspgrid { display: contents; }
  .crop-side .asp { flex: none; min-height: 44px; flex-direction: row; padding: 6px 12px; border-radius: 999px; }
  .crop-side .popt { flex: none; width: auto; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; background: var(--surface); }
  .crop-side .popt small { display: none; }
  .crop-main { flex: 1; min-height: 0; }
  .cstage { min-height: 0; padding: 12px; }
  .cbar { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .cbar .link, .cbar .fn, .cbar .warnline { display: none; }
  .cbar .px { font-size: 13px; }
  .cbar .acts { flex-wrap: nowrap; }
  .cbar .acts .btn { flex: 1; justify-content: center; padding-inline: 8px; }
  .cbar .lg { display: none; }
  .qrow { grid-template-columns: minmax(0, 1fr); }
  .lb-nav { display: none; }
  .renamef input { font-size: 17px; width: 100%; }
}

/* ---------- review round 2 fixes ---------- */
/* crop handles: four identical squares centred on the corners, big invisible touch area */
.crect .h { width: 14px; height: 14px; border: 1.5px solid rgba(20,22,23,.75) !important; background: #fff; border-radius: 3px; filter: none; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.h.nw { left: -7px; top: -7px; } .h.ne { right: -7px; top: -7px; } .h.sw { left: -7px; bottom: -7px; } .h.se { right: -7px; bottom: -7px; }
.crect .h::after { inset: -15px; }
@media (pointer: coarse) {
  .crect .h { width: 20px; height: 20px; }
  .h.nw { left: -10px; top: -10px; } .h.ne { right: -10px; top: -10px; } .h.sw { left: -10px; bottom: -10px; } .h.se { right: -10px; bottom: -10px; }
  .crect .h::after { inset: -12px; }
}
/* cards: one tab stop, overlay shows on keyboard focus */
.card:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.card:focus-visible .shade, .card:focus-visible .bot, .card:focus-visible .cbtn { opacity: 1; transform: none; }
.banner.apprbar { background: var(--sand); justify-content: space-between; }
.banner.apprbar .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pop .warnnote { color: var(--alert); background: var(--alert-bg); border-radius: 8px; margin: 4px 4px 2px; padding: 8px 10px; }
.utitle { width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--bg); font-size: 14px; }
.utitle:focus { outline: none; border-color: var(--teal); }
.dupnote { margin-top: 6px; font-size: 12.5px; color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 6px 9px; }
.pubthumbs { display: flex; gap: 6px; margin: 0 0 12px; align-items: center; }
.pubthumbs img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--img-bg); }
.pubthumbs span { font-size: 13px; color: var(--muted); }
select.inp { appearance: auto; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 900px) {
  /* asset page: no letterbox, header scrolls away, room above the bottom bar */
  body[data-view="asset"] .top { position: static; }
  .stage { min-height: 0; background: transparent; border-radius: 12px; }
  .stage img { max-height: 58dvh; border-radius: 12px; }
  .vid-stage { background: #111; }
  .banner.apprbar { flex-direction: column; align-items: stretch; }
  .banner.apprbar .btn { flex: 1; justify-content: center; min-height: 44px; }
  /* toasts: bottom, compact, never over the middle of the grid */
  .toast { left: 12px; right: 12px; transform: none; max-width: none; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; padding: 10px 14px; }
  body[data-view="asset"] .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body:has(.bulk) .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .toast code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- review round 3 fixes ---------- */
@media (min-width: 1081px) { .banner.apprbar { display: none; } }
.mbar .btn svg { flex: none; }