:root{
  color-scheme:dark;
  --bg:#0c0c0e; --fg:#f3f3f5; --dim:#8a8a93; --line:#232329; --card:#131317;
  --accent:#ff5a3c; --ok:#31c26a; --bad:#ff5a47;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* input{display:block} ниже перебивает hidden от браузера — без этой строки
   скрытый выбор файла виден на странице гостя. Поймано глазами 12.09. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);
  font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:32px 18px 72px;-webkit-font-smoothing:antialiased}
main.narrow{max-width:520px;margin-inline:auto}
main.wide,body.wide main{max-width:1080px;margin-inline:auto}
main.center{text-align:center;padding-top:12vh}
.brand,.foot{font-size:13px;color:var(--dim)}
.brand{margin:0 0 20px}
.foot{margin:32px 0 0;text-align:center}

h1{font-size:30px;line-height:1.15;letter-spacing:-.025em;margin:0 0 10px;font-weight:640}
.kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.lede{color:var(--dim);margin:0 0 26px;font-size:16px}
.label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.note{font-size:13px;color:var(--dim);margin:12px 0 0}
.note.ok{color:var(--ok)} .note.bad{color:var(--bad)}
.dim{color:var(--dim);font-weight:400}
.big{font-size:19px;margin:0 0 16px;font-variant-numeric:tabular-nums}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:14px}
label{display:block;font-size:13px;color:var(--dim);margin-bottom:14px}
/* OC-189: `font:16px/1.2 inherit` — недопустимая запись (inherit не семейство), браузер отбрасывал её
   целиком, и поля получали системные 13 px: iPhone приближал страницу при фокусе, а select
   выглядел чужим рядом с input. Семейство указано явно. */
input,select{display:block;width:100%;margin-top:6px;background:#0b0b0e;color:var(--fg);
  border:1px solid var(--line);border-radius:11px;padding:13px 12px;
  font:16px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;min-height:48px}
/* Стрелка select — не background-image: в мобильном WebKit select с собственным background-image
   теряет рамку (поймано гейтом OC-189), поэтому стрелку рисует обёртка. */
select{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:none}
.selwrap{position:relative;display:block}
.selwrap::after{content:"";position:absolute;right:15px;bottom:21px;width:8px;height:8px;pointer-events:none;
  border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);transform:rotate(45deg) translateY(-3px)}
input:focus,select:focus{outline:0;border-color:#3b3b44}
.two{display:flex;gap:12px}.two>label{flex:1}

button,.btn{display:block;width:100%;text-align:center;text-decoration:none;
  border:0;border-radius:12px;background:var(--accent);color:#fff;
  font:640 16px/1 -apple-system,sans-serif;padding:16px 18px;margin-top:4px}
button:disabled{opacity:.38}
.btn.ghost,button.ghost{background:#1a1a20;color:var(--fg);border:1px solid var(--line)}

.card.qr{display:flex;gap:18px;align-items:center}
.card.qr svg{border-radius:10px;flex:none}
.code{font:700 26px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;margin:0 0 8px}
.link a{color:var(--dim);font-size:13px;word-break:break-all}
/* OC-188: на экране уже 440 px колонка с кодом не помещается рядом с QR — встаёт под него. */
.card.qr>div{min-width:0}
@media (max-width:440px){.card.qr{flex-direction:column;align-items:flex-start}.card.qr>div{width:100%}}

.card.stats{display:flex;gap:8px;text-align:center}
.card.stats>div{flex:1}
.card.stats b{display:block;font-size:27px;font-variant-numeric:tabular-nums}
.card.stats span{font-size:12px;color:var(--dim)}

.camera{text-align:center}
.note.wait{color:var(--accent)}
/* Час проявки на экране гостя: читается лучше обычной сноски и не меняется от статусов ниже. */
.develops{font-size:14px;color:var(--fg);margin:14px 0 0}
.develops .dim{font-size:13px}
/* Секунда превью: кадр показывается на месте счётчика и пропадает. Занимает ту же
   высоту, иначе страница прыгает и «секунда» читается как сбой. */
#preview{display:block;width:100%;max-height:52vh;object-fit:cover;border-radius:12px;margin:0 0 18px;background:#17171c}
#preview[hidden]{display:none}
#whoami{margin-top:16px;text-align:left}
#whoami[hidden]{display:none}
.shots{margin:4px 0 18px}
.shots b{display:block;font-size:64px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.shots span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* OC-186: на телефоне две колонки (minmax(200px) на 390 px давал одну — кадр на весь экран и
   сотни экранов прокрутки). Широкий экран сохраняет сетку по ширине кадра. */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media (min-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}}
.grid figure{margin:0}
.grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block;background:#17171c}
.grid figcaption{font-size:11px;color:var(--dim);padding:6px 2px}

main.print{max-width:420px;margin-inline:auto;text-align:center;background:#fff;color:#111;
  border-radius:18px;padding:34px 28px}
main.print .qrbox{margin:18px 0}
main.print .lede{color:#555}
main.print .code{color:#111}
main.print .qrbox svg{max-width:100%;height:auto}
main.print .addr{font:600 17px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;margin:0 0 6px;word-break:break-all}
main.print .when{color:#555;font-size:14px;margin:0}
@media print{body{background:#fff;padding:0}main.print{border-radius:0}}

.btn.dl{display:inline-block;width:auto;padding:11px 18px;font-size:14px}

/* ── страница продукта (OC-061) ───────────────────────────────────────────
   Тёмная типографика та же, что в приложении: человек, который пришёл читать,
   и человек, который завёл плёнку, видят один продукт, а не лендинг и сервис. */
.block{margin:46px 0 0}
.block h2{font-size:21px;line-height:1.2;letter-spacing:-.02em;margin:0 0 14px;font-weight:620}
.block p{color:var(--dim);margin:0 0 12px;font-size:15px;line-height:1.55}
.block.center{text-align:center;margin-top:58px;padding-bottom:20px}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 16px 34px;color:var(--dim);font-size:15px;line-height:1.55}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);color:var(--fg);font-size:12px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.steps b,.plain b{color:var(--fg);font-weight:600}
.plain{list-style:none;padding:0;margin:0}
.plain li{padding:0 0 12px 18px;position:relative;color:var(--dim);font-size:15px;line-height:1.55}
.plain li::before{content:"—";position:absolute;left:0;color:var(--line)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px;margin:0 0 14px}
.tier{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center}
.tier b{display:block;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tier span{display:block;font-size:11px;color:var(--dim);margin-top:4px;line-height:1.3}
/* ── удаление (OC-026/OC-067/OC-142) ─────────────────────────────────────── */
form.inline{display:inline;margin:0}
button.tiny{display:inline-block;width:auto;padding:4px 10px;font-size:11px;margin:4px 0 0}
button.bad,.btn.bad{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.card.key{border-color:var(--accent)}

.faq{margin:0}
.faq dt{font-weight:600;margin:0 0 5px;font-size:15px}
.faq dd{margin:0 0 18px;color:var(--dim);font-size:15px;line-height:1.55}
.cap{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center;margin:0 0 14px}

/* ── кадр на весь экран (OC-167) ─────────────────────────────────────────── */
.grid .thumb{display:block}
body.viewing{overflow:hidden}
#viewer{position:fixed;inset:0;z-index:50;background:#050507;display:flex;align-items:center;justify-content:center;
  touch-action:pan-y;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
#viewer img{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-drag:none;pointer-events:none}
#viewer .bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:8px;
  padding:max(12px,env(safe-area-inset-top)) 14px 24px;background:linear-gradient(rgba(0,0,0,.7),transparent);
  font-size:14px;font-variant-numeric:tabular-nums}
#viewer .bar .close{margin-left:auto}
#viewer .vbtn{display:inline-block;width:auto;margin:0;padding:9px 14px;font-size:14px;line-height:1;
  background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:10px}
#viewer .vbtn:disabled{opacity:.3}
#viewer .nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;font-size:26px;padding:12px 14px}
#viewer .prev{left:10px}#viewer .next{right:10px}
/* На телефоне листают пальцем: стрелки нужны только там, где есть мышь. */
@media (hover:none){#viewer .nav{display:none}}
#viewer .msg{position:absolute;left:14px;right:14px;bottom:max(18px,env(safe-area-inset-bottom));z-index:2;margin:0;
  padding:11px 14px;border-radius:10px;background:rgba(255,90,71,.92);color:#fff;font-size:14px;text-align:center}

/* ── раздать приглашение (OC-156/OC-155) ─────────────────────────────────── */
.card.qr .actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.card.qr .actions>*{margin:0}
#qrview{position:fixed;inset:0;z-index:60;background:#fff;color:#111;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:20px 20px max(20px,env(safe-area-inset-bottom));text-align:center}
#qrview svg{width:min(88vw,62vh);height:auto;display:block}
#qrview .addr{font:600 17px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;margin:18px 0 6px;word-break:break-all}
#qrview .acts{display:flex;gap:10px;width:min(88vw,420px);margin-top:14px}
#qrview .acts button{flex:1;margin:0}
#qrview .acts .ghost{background:#eee;color:#111;border:1px solid #ccc}

.card.inapp{border-color:var(--accent)}
.card.inapp .note:first-of-type{margin-top:0}

/* ── образцы фильтров в форме (OC-189) ───────────────────────────────────── */
fieldset.looks{border:0;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
fieldset.looks legend{font-size:13px;color:var(--dim);padding:0;margin-bottom:6px;float:left;width:100%}
fieldset.looks legend+*{clear:left}
label.look{position:relative;display:block;margin:0;padding:8px;border:1px solid var(--line);border-radius:12px;background:#0b0b0e;color:var(--fg);cursor:pointer}
label.look input{position:absolute;opacity:0;width:1px;height:1px;margin:0;min-height:0}
label.look .sample{position:relative;display:block;height:64px;border-radius:8px;overflow:hidden;margin-bottom:8px;
  background:radial-gradient(circle at 74% 30%,#ffd27a 0 11%,transparent 12%),
    linear-gradient(170deg,transparent 0 58%,#2f7a46 58% 100%),linear-gradient(#5f9dff,#bcd9ff 58%)}
label.look .sample.flash::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.18),rgba(0,0,0,.22) 75%)}
label.look b{display:block;font-size:14px;font-weight:620}
label.look small{display:block;font-size:12px;color:var(--dim);margin-top:2px;line-height:1.3}
label.look input:checked~b{color:var(--accent)}
label.look:has(input:checked){border-color:var(--accent)}
label.look input:focus-visible~.sample{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:520px){fieldset.looks{grid-template-columns:repeat(4,1fr)}}

/* ── проявка в календаре (OC-161) ────────────────────────────────────────── */
.calendar{margin-top:16px;text-align:left}
.calendar[hidden]{display:none}
.calendar .row{display:flex;gap:8px}
.calendar .row .btn{flex:1;margin:0;padding:12px 10px;font-size:14px}