/* ============================================================================
   MOSTAR WOW Cup — ГОСТЕВАЯ страница. Светлая iOS «liquid glass» тема.
   Mobile-first. Системные шрифты (на iPhone = SF Pro). Только для visitor.html.
   ============================================================================ */

:root {
  /* light base + pastel bokeh */
  --bg-1: #eef3fc;
  --bg-2: #f5f1fb;
  --bg-3: #eafaf6;

  --ink: #0b1220;
  --ink-2: #5b6472;
  --ink-3: #98a1b2;

  --accent: #0a84ff;       /* iOS system blue */
  --accent-press: #0060df;
  --accent-soft: rgba(10, 132, 255, 0.12);
  --accent-grad: linear-gradient(135deg, #36a2ff 0%, #0a84ff 60%, #5e5cff 120%);

  /* glass */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-2: rgba(255, 255, 255, 0.40);
  --glass-3: rgba(255, 255, 255, 0.30);
  --glass-border: rgba(255, 255, 255, 0.75);
  --hairline: rgba(17, 24, 39, 0.08);
  --shadow: 0 12px 34px rgba(31, 45, 80, 0.12);
  --shadow-sm: 0 4px 14px rgba(31, 45, 80, 0.10);
  --shadow-press: inset 0 2px 6px rgba(31, 45, 80, 0.14);

  --ok: #1f9d57;
  --warn: #c8881a;
  --err: #e0463b;
  --info: #0a84ff;
  --purple: #7a5cff;
  --gray: #8a93a6;

  --radius: 24px;
  --radius-sm: 16px;
  --radius-pill: 999px;
  --blur: 22px;

  --t-fast: 130ms;
  --t: 220ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);

  --font-ui: -apple-system, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 48%, var(--bg-3) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
  font-size: 16px;
  min-height: 100vh;
}

/* ---- animated light bokeh ---- */
body::before, body::after { content: ""; position: fixed; inset: -15%; z-index: -2; pointer-events: none; }
body::before {
  background:
    radial-gradient(28% 26% at 14% 12%, rgba(10, 132, 255, 0.22), transparent 70%),
    radial-gradient(26% 24% at 86% 8%, rgba(122, 92, 255, 0.20), transparent 70%),
    radial-gradient(30% 30% at 78% 86%, rgba(54, 220, 180, 0.18), transparent 72%),
    radial-gradient(26% 26% at 20% 88%, rgba(255, 138, 180, 0.16), transparent 72%);
  filter: blur(40px);
  background-repeat: no-repeat;
  animation: bokeh-drift 26s var(--ease) infinite alternate;
}
body::after { /* fine sparkle particles */
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1.4px, transparent 2px),
    radial-gradient(circle, rgba(10,132,255,0.5) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(122,92,255,0.45) 0 1.2px, transparent 2px);
  background-size: 240px 240px, 360px 360px, 300px 300px;
  background-position: 0 0, 80px 120px, 200px 40px;
  opacity: .5;
  animation: spark-float 30s linear infinite;
}

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

a { color: var(--accent); text-decoration: none; }
::selection { background: var(--accent-soft); }

/* ---- brandbar ---- */
.brandbar {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 20px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 20;
}
.brandbar .logo {
  font-weight: 800; letter-spacing: 1.5px; font-size: 21px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.brandbar .logo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 10px rgba(10,132,255,.5); animation: dot-pulse 2.6s ease-in-out infinite; }
.brandbar .sub { font-size: 12.5px; color: var(--ink-2); }

/* ---- layout + glass cards ---- */
.wrap { max-width: 620px; margin: 0 auto; padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
.wrap-narrow { max-width: 620px; }
.wrap-wide { max-width: 1240px; }
.card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.9);
  padding: 18px; margin-bottom: 16px;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card, .brandbar { background: rgba(255, 255, 255, 0.92); }
}
.card h2 { margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.card h3 { margin: 0 0 14px; font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); display: flex; align-items: center; gap: 11px; }
.card h3 .step {
  width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff; background: var(--accent-grad);
  box-shadow: 0 4px 12px rgba(10,132,255,.35);
}

.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.tiny { font-size: 11px; color: var(--ink-3); }
.center { text-align: center; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent-grad); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 15px 20px; min-height: 54px; font-size: 17px; font-weight: 700; cursor: pointer;
  font-family: inherit; text-decoration: none; letter-spacing: -.2px;
  box-shadow: 0 8px 20px rgba(10, 132, 255, 0.30);
  transition: transform var(--t-fast), box-shadow var(--t), filter var(--t);
}
.btn:hover { filter: brightness(1.03); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.full { width: 100%; }
.btn.sm { padding: 9px 14px; min-height: 40px; font-size: 14px; }
.btn.ghost {
  background: var(--glass-2); color: var(--accent); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn.ghost:hover { filter: none; background: rgba(255,255,255,0.6); }
.btn.secondary { background: var(--glass-2); color: var(--ink); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); }

/* ---- badges (common.js) ---- */
.badge { display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.badge.gray { background: rgba(138,147,166,.16); color: #5f6779; }
.badge.blue { background: rgba(10,132,255,.14); color: #0a6fd6; }
.badge.amber { background: rgba(200,136,26,.16); color: #9a6a12; }
.badge.green { background: rgba(31,157,87,.16); color: #157f44; }
.badge.red { background: rgba(224,70,59,.15); color: #c0392b; }
.badge.purple { background: rgba(122,92,255,.16); color: #5b43c7; }

/* ---- hint / status text ---- */
.hint { background: var(--glass-2); border: 1px solid var(--glass-border); border-left: 4px solid var(--accent); padding: 11px 13px; border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-2); }
.hint.ok { border-left-color: var(--ok); }
.hint.warn { border-left-color: var(--warn); }
.hint.err { border-left-color: var(--err); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .err { color: var(--err); }

/* ---- STYLE CARDS: big, name-only, two examples (М/Ж) side by side ---- */
.style-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.style-card {
  position: relative; cursor: pointer; padding: 12px 12px 14px;
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform var(--t-fast), box-shadow var(--t), border-color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.style-card .ex { display: flex; gap: 10px; }
.style-card .ex-img {
  flex: 1; width: 50%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 28%;
  border-radius: var(--radius-sm); display: block;
  background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(235,242,252,.5));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.style-card .ex-img.miss { display: none; }
.style-card .nm {
  margin-top: 12px; text-align: center; font-weight: 700; font-size: 18px; letter-spacing: -.2px; color: var(--ink);
}
.style-card:hover { transform: translateY(-2px); }
.style-card:active { transform: scale(.985); }
.style-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm); }
.style-card.sel {
  border-color: transparent;
  box-shadow: 0 0 0 2.5px var(--accent), 0 14px 30px rgba(10,132,255,.22), inset 0 1px 0 rgba(255,255,255,.9);
  background: rgba(255,255,255,0.6);
}
.style-card.sel::after {
  content: "✓"; position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff;
  background: var(--accent-grad); box-shadow: 0 4px 12px rgba(10,132,255,.45); animation: pop-in var(--t) var(--ease-pop) both;
}

/* ---- photo stage + camera ---- */
.preview-img { max-width: 100%; border-radius: var(--radius-sm); max-height: 360px; display: block; margin: 14px auto; box-shadow: var(--shadow-sm); border: 1px solid var(--glass-border); }
#cameraBox { position: relative; }
#video { width: 100%; max-height: 360px; border-radius: var(--radius-sm); background: #000; border: 1px solid var(--glass-border); }
#cameraBox::after { content: ""; position: absolute; left: 50%; top: 46%; width: 150px; height: 190px; margin-left: -75px; margin-top: -95px; border: 2px dashed rgba(10,132,255,.6); border-radius: 50%; pointer-events: none; }
#btnShoot { width: 74px; height: 74px; border-radius: 50%; padding: 0; min-height: 74px; flex: none; font-size: 24px; box-shadow: 0 8px 22px rgba(10,132,255,.4); animation: shutter-pulse 1.8s ease-in-out infinite; }
#camHint { color: var(--ink-3); }

/* ---- consent: one line + custom iOS checkbox + collapsible ---- */
.consent-row { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; }
.consent-row input[type="checkbox"] { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; left: 0; top: 50%; transform: translateY(-50%); cursor: pointer; }
.cbx { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; border: 2px solid rgba(17,24,39,.22); background: rgba(255,255,255,.7); transition: background var(--t), border-color var(--t), box-shadow var(--t); }
.cbx-tick { width: 16px; height: 16px; }
.cbx-tick path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.consent-row input[type="checkbox"]:checked + .cbx { background: var(--accent-grad); border-color: transparent; box-shadow: var(--shadow-press); animation: stamp-pop 220ms var(--ease-pop); }
.consent-row input[type="checkbox"]:checked + .cbx .cbx-tick path { stroke-dashoffset: 0; transition: stroke-dashoffset 240ms var(--ease-pop); }
.consent-row input[type="checkbox"]:focus-visible + .cbx { box-shadow: 0 0 0 3px var(--accent-soft); }
.consent-lead { font-weight: 600; color: var(--ink); font-size: 15px; }

.consent-more { margin-top: 12px; }
.consent-toggle { list-style: none; cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.consent-toggle::-webkit-details-marker { display: none; }
.consent-toggle .chev { transition: transform var(--t); }
.consent-more[open] .consent-toggle .chev { transform: rotate(180deg); }
.consent-more:not([open]) .t-close { display: none; }
.consent-more[open] .t-open { display: none; }
.consent-full { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
.consent-more[open] .consent-full { grid-template-rows: 1fr; margin-top: 10px; }
.consent-full > span { overflow: auto; max-height: 240px; min-height: 0; display: block; background: var(--glass-3); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.consent-more:not([open]) .consent-full > span { padding-top: 0; padding-bottom: 0; border-width: 0; }

/* ---- status screen ---- */
#statusView .card.center { padding: 30px 20px; }
#orderCode { font-family: var(--font-mono); font-size: clamp(40px, 13vw, 56px); font-weight: 800; letter-spacing: 3px; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 10px 0; }
#statusBadgeBox { margin: 14px 0; }

/* My orders (returning visitor) */
#myOrdersList { display: flex; flex-direction: column; gap: 10px; }
.myorder { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--glass-2); border: 1px solid var(--glass-border); }
.myorder.ready { border-color: rgba(31,157,87,.55); box-shadow: 0 0 0 2px rgba(31,157,87,.18); }
.myorder .mo-num { font-weight: 800; font-size: 18px; color: var(--accent); min-width: 54px; font-variant-numeric: tabular-nums; }
.myorder .mo-mid { flex: 1; min-width: 0; }
.myorder .mo-style { font-weight: 600; color: var(--ink); }
.myorder .mo-status { font-size: 12.5px; color: var(--ink-2); }
.myorder.ready .mo-status { color: var(--ok); font-weight: 700; }

/* ---- toast ---- */
.toast-wrap { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; width: calc(100% - 32px); max-width: 420px; }
.toast { background: rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); color: var(--ink); padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); box-shadow: var(--shadow); font-size: 14px; transition: opacity .3s ease; border-left: 4px solid var(--accent); animation: toast-in var(--t) var(--ease) both; }
.toast.err { border-left-color: var(--err); }
.toast.ok { border-left-color: var(--ok); }

/* ---- responsive: 2 columns of style cards on wider screens ---- */
@media (min-width: 560px) {
  .style-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- keyframes ---- */
@keyframes bokeh-drift { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 6% 8%, -6% 4%, -4% -6%, 5% -5%; } }
@keyframes spark-float { from { background-position: 0 0, 80px 120px, 200px 40px; } to { background-position: 0 -240px, 80px -120px, 200px -260px; } }
@keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }
@keyframes shutter-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(10,132,255,.45); } 50% { box-shadow: 0 0 0 12px rgba(10,132,255,0); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes stamp-pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
   OPERATOR CABINET (light glass, shared theme). Same header/look everywhere.
   ============================================================================ */
.brandbar .brandwrap { display: flex; flex-direction: column; }
.brandbar nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.brandbar nav a {
  color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 8px 13px; border-radius: var(--radius-pill); min-height: 38px; display: inline-flex; align-items: center;
  transition: background var(--t), color var(--t);
}
.brandbar nav a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.brandbar nav a.active { background: var(--accent); color: #fff; }
.brandbar nav a#logoutLink:hover { background: rgba(224,70,59,.12); color: var(--err); }

/* header status badges (Режим / Сервис генерации) */
.hbadges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: 14px; }
.hbadge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--glass-2); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm);
  font-size: 12.5px; color: var(--ink-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hbadge .lbl b { color: var(--ink); font-weight: 700; }
.hbadge .ico { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--gray); }
.hbadge.ok .ico { background: var(--ok); }
.hbadge.bad .ico { background: var(--err); }
.hbadge.bad { border-color: rgba(224,70,59,.35); }

/* command band (statusLine) */
#statusLine { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 11px 14px; color: var(--ink-2); font-size: 13px; margin-top: 8px; }
#statusLine b { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 800; }
#genWarn:not(:empty), #hfHealth:not(:empty) { margin-top: 10px; }
.hint.ok::before, .hint.warn::before { content: "●"; margin-right: 7px; font-size: 11px; }
.hint.ok::before { color: var(--ok); } .hint.warn::before { color: var(--warn); }

/* orders table */
table.orders { width: 100%; border-collapse: collapse; font-size: 14px; }
table.orders th { text-align: left; padding: 10px; border-bottom: 1px solid var(--hairline); text-transform: uppercase; font-size: 11px; letter-spacing: .5px; color: var(--ink-3); font-weight: 700; }
table.orders td { text-align: left; padding: 10px; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--ink); }
table.orders td.tiny, table.orders td.muted { font-variant-numeric: tabular-nums; color: var(--ink-3); }
table.orders tr:hover { background: var(--accent-soft); cursor: pointer; }
table.orders .thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 12px; border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); background: #fff; }
table.orders b { color: var(--accent); font-weight: 800; }

/* key-value + split + imgbox + codeblock (order modal) */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 10px; font-size: 13px; }
.kv div:nth-child(odd) { color: var(--ink-2); }
.kv div:nth-child(even) { color: var(--ink); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.imgbox { background: var(--glass-3); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px; text-align: center; }
.imgbox img { max-width: 100%; max-height: 460px; border-radius: 12px; }
.codeblock { background: rgba(255,255,255,.6); color: var(--ink); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; }

/* modal */
.modal-bg { position: fixed; inset: 0; background: rgba(20,28,50,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; z-index: 50; padding: 18px; overflow: auto; }
.modal-bg.open { display: flex; animation: fade-in var(--t) ease; }
.modal { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius); max-width: 920px; width: 100%; box-shadow: var(--shadow); animation: modal-in var(--t) var(--ease) both; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--hairline); position: sticky; top: 0; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); border-radius: var(--radius) var(--radius) 0 0; }
.modal-head h2 { color: var(--accent); }
.modal-body { padding: 18px; }
.close-x { margin-left: auto; cursor: pointer; font-size: 20px; color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--glass-border); width: 40px; height: 40px; border-radius: 50%; transition: color var(--t), box-shadow var(--t), transform var(--t); }
.close-x:hover { color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transform: rotate(90deg); }
.btn.green { background: linear-gradient(135deg,#3fd07f,#1f9d57); color: #fff; box-shadow: 0 8px 18px rgba(31,157,87,.28); }
.btn.danger { background: linear-gradient(135deg,#ff7a6f,#e0463b); color: #fff; box-shadow: 0 8px 18px rgba(224,70,59,.26); }

/* collapsed prompt block */
.prompt-toggle { list-style: none; cursor: pointer; font-weight: 600; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 40px; }
.prompt-toggle::-webkit-details-marker { display: none; }
.prompt-toggle .acc { color: var(--accent); font-weight: 700; margin-left: auto; white-space: nowrap; }
.prompt-more[open] .prompt-toggle .acc { color: var(--ink-2); }

/* settings page */
.set-layout { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.set-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 4px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.set-nav a { padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 600; font-size: 14px; cursor: pointer; }
.set-nav a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.set-nav a.active { background: var(--accent); color: #fff; }
.set-section { display: none; }
.set-section.active { display: block; animation: fade-in var(--t) ease; }
.set-actions { display: flex; gap: 12px; padding: 4px 0 20px; }
.opt-list { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass-2); cursor: pointer; transition: border-color var(--t), box-shadow var(--t); }
.opt input { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.opt .opt-b { display: flex; flex-direction: column; gap: 3px; }
.opt .opt-b b { color: var(--ink); }
.opt .opt-d { font-size: 12.5px; color: var(--ink-2); }
.opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: rgba(255,255,255,.62); }
label.chk { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); margin: 12px 0 0; cursor: pointer; }
label.chk input { width: 20px; height: 20px; accent-color: var(--accent); }
.logo-ed { padding: 12px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--glass-3); }
.logo-ed-h { font-weight: 700; margin-bottom: 6px; }
.cat-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hairline); font-weight: 500; }
.cat-row input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
@media (max-width: 760px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; }
  .set-nav a { white-space: nowrap; }
}

/* install page */
code { font-family: var(--font-mono); font-size: 12.5px; background: var(--glass-3); border: 1px solid var(--glass-border); border-radius: 6px; padding: 2px 6px; color: var(--accent); }
.flow { display: flex; flex-direction: column; gap: 6px; }
.flow-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass-2); }
.flow-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--accent-grad); }
.flow-step b { color: var(--ink); }
.flow-arrow { text-align: center; color: var(--ink-3); font-size: 18px; line-height: 1; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.steps li { line-height: 1.5; }
.cfg { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cfg > div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cfg span { min-width: 130px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
/* install page — desktop two-column: sticky download on the left, instructions on the right */
.install-grid { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
.install-aside { position: sticky; top: 84px; }
.install-main .card { margin-bottom: 16px; }
@media (max-width: 860px) {
  .install-grid { grid-template-columns: 1fr; }
  .install-aside { position: static; }
}

/* plain-language settings text */
.sec-desc { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: -2px 0 16px; }
.fld-help { color: var(--ink-3); font-size: 12px; line-height: 1.4; margin: 2px 0 6px; }
/* desktop: keep settings fields a comfortable width (not stretched across a laptop screen) */
.set-main { max-width: 880px; }
.set-main .card input[type="number"] { max-width: 220px; }
.set-main .card input[type="text"], .set-main .card select { max-width: 540px; }
.set-main .row input { max-width: none; }

/* ============================================================================
   OPERATOR DESKTOP CONSOLE (master-detail). Full-viewport, independent scroll.
   ============================================================================ */
:root { --bar: 68px; }
/* The whole cabinet scrolls like a normal desktop page; the queue stays put (sticky). */
body.op-console { min-height: 100vh; }
body.op-console .brandbar .hbadges { margin-left: 14px; }
#consoleView { display: block; }
.op-band { position: sticky; top: var(--bar); z-index: 15; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); backdrop-filter: blur(var(--blur)) saturate(160%); border-bottom: 1px solid var(--hairline); }
.op-band .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.op-band .chip { cursor: pointer; padding: 7px 13px; border-radius: var(--radius-pill); background: var(--glass-3); border: 1px solid var(--glass-border); font-size: 13px; color: var(--ink-2); font-weight: 600; }
.op-band .chip.active { background: var(--accent); color: #fff; border-color: transparent; }
.op-band .chip b { font-variant-numeric: tabular-nums; }
.op-band-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#opWarn { flex: none; }
.op-band-warn { background: rgba(255,194,75,.16); border-bottom: 1px solid var(--glass-border); color: #8a6a18; font-size: 13px; padding: 8px 16px; }

.op-grid { display: grid; grid-template-columns: 360px 1fr; gap: 16px; padding: 16px; align-items: start; max-width: 1680px; margin: 0 auto; }
.op-panel { background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.9); display: flex; flex-direction: column; }
/* Queue stays pinned while the page scrolls through a long order; its list scrolls inside. */
.op-queue { position: sticky; top: calc(var(--bar) + 14px); max-height: calc(100vh - var(--bar) - 28px); overflow: hidden; }

/* queue */
.op-queue-head { flex: none; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.op-queue-head .qh-row { display: flex; align-items: center; justify-content: space-between; }
.op-queue-head .qh-title { font-weight: 700; font-size: 15px; }
.q-search { margin-top: 10px; width: 100%; padding: 9px 12px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: rgba(255,255,255,.6); font-size: 14px; }
.op-queue-list { overflow-y: auto; min-height: 0; padding: 10px 12px; flex: 1; }
.q-item { position: relative; display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 12px 10px 16px; margin-bottom: 8px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass-2); cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t), background var(--t); }
.q-item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--gray); }
.q-item.s-blue::before { background: var(--info); } .q-item.s-amber::before { background: var(--warn); } .q-item.s-green::before { background: var(--ok); } .q-item.s-red::before { background: var(--err); } .q-item.s-purple::before { background: var(--purple); }
.q-item:hover { transform: translateY(-2px); background: var(--accent-soft); }
.q-item.sel { border-color: transparent; background: rgba(255,255,255,.66); box-shadow: 0 0 0 2.5px var(--accent), var(--shadow-sm); }
.q-item .q-thumb { width: 48px; height: 48px; flex: none; object-fit: cover; border-radius: 12px; border: 1px solid var(--glass-border); background: #fff; }
.q-item .q-mid { flex: 1; min-width: 0; }
.q-item .q-num { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-item .q-sub { margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.q-item .q-need { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-grad); flex: none; animation: dot-pulse 2.4s ease-in-out infinite; }

/* detail */
.op-detail-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.op-detail-head .dh-title { font-size: 18px; font-weight: 700; }
.op-detail-head .op-cta { margin-left: auto; min-width: 260px; }
.op-cta .btn { min-height: 64px; font-size: 18px; width: 100%; }
.op-cta .cta-plate { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-sm); background: rgba(31,157,87,.14); border: 1px solid rgba(31,157,87,.4); color: var(--ok); font-weight: 700; padding: 0 16px; text-align: center; }
.op-detail-body { padding: 16px; }
.focus-track { display: flex; gap: 6px; margin-bottom: 14px; }
.focus-track .st { flex: 1; text-align: center; font-size: 11px; color: var(--ink-3); padding: 7px 4px; border-radius: var(--radius-sm); background: var(--glass-3); border: 1px solid var(--glass-border); }
.focus-track .st.done { color: var(--ok); } .focus-track .st.cur { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.focus-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.focus-stage .imgbox img { max-height: 44vh; object-fit: contain; }
.op-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.op-block { margin: 0; }
.wrap-btns { flex-wrap: wrap; }
.wrap-btns > * { flex: 0 1 auto; min-width: 0; }
.op-empty { margin: auto; text-align: center; color: var(--ink-2); padding: 40px; max-width: 420px; }
.op-danger-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hairline); }

@media (min-width: 1700px) { .op-grid { grid-template-columns: 400px 1fr; } .focus-stage .imgbox img { max-height: 52vh; } }
@media (max-width: 1100px) { .op-grid { grid-template-columns: 300px 1fr; } }
@media (max-width: 900px) {
  .op-grid { grid-template-columns: 1fr; }
  .op-queue { position: static; max-height: 56vh; }
  .focus-stage { grid-template-columns: 1fr; }
  .op-detail-head { flex-wrap: wrap; }
  .op-detail-head .op-cta { margin-left: 0; width: 100%; }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* operator order table -> stacked cards on phones */
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  table.orders thead { display: none; }
  table.orders tr { display: block; background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); margin-bottom: 10px; padding: 6px 12px; }
  table.orders tr:hover { background: var(--glass-2); }
  table.orders td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--hairline); padding: 9px 0; }
  table.orders td:last-child { border-bottom: none; }
  table.orders td::before { content: attr(data-label); color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
  .hbadges { margin-left: 0; }
}

/* ===== Contact block, stepper, generation progress (added) ===== */
.photo-hint { margin-top: 10px; }
.req { color: var(--err); }

.fld-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
.fld {
  width: 100%; box-sizing: border-box; padding: 13px 14px; min-height: 48px;
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.7); color: var(--ink); font-size: 16px; font-family: var(--font-ui);
}
.fld:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.stepper { display: flex; gap: 6px; margin: 0 0 14px; }
.st-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.st-dot {
  width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--glass-3); border: 1px solid var(--glass-border); color: var(--ink-3); font-size: 13px; font-weight: 700;
}
.st-item.cur .st-dot { background: var(--accent); color: #fff; border-color: transparent; }
.st-item.cur { color: var(--accent); }
.st-item.done .st-dot { background: var(--ok); color: #fff; border-color: transparent; }
.st-item.done { color: var(--ok); }

.gen-progress { margin: 14px 0 4px; }
.gp-track { display: flex; gap: 4px; }
.gp-step {
  flex: 1; font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: center;
  padding: 8px 2px; border-radius: 10px; background: var(--glass-3); border: 1px solid var(--glass-border);
}
.gp-step.cur { background: var(--accent); color: #fff; border-color: transparent; }
.gp-step.done { background: var(--ok); color: #fff; border-color: transparent; }

/* operator: bulk-select checkbox + bar */
.q-check { width: 22px; height: 22px; flex: 0 0 auto; margin-right: 8px; align-self: center; cursor: pointer; }
.bulk-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 8px 0; background: var(--accent-soft); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); }
.bulk-bar .bulk-count { font-weight: 700; color: var(--ink); margin-right: auto; }