:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --blue: #1d6fe8;
  --blue-dark: #0b3a8c;
  --cyan: #1fc8f0;
  --red: #e11d48;
  --green: #059669;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
a { color: var(--blue); }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--panel); border-radius: 10px;
  padding: 9px 14px; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--ink);
  min-height: 40px; touch-action: manipulation;
}
.btn:hover { border-color: #cbd5e1; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; border-color: transparent; }
.btn.danger { color: var(--red); }
.btn.small { padding: 5px 10px; min-height: 32px; font-size: 13px; }
.btn.icon { padding: 6px; min-width: 40px; }
.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff;
  min-height: 42px;
}
.input:focus { outline: 2px solid rgba(29, 111, 232, 0.35); border-color: var(--blue); }
label.field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 48px; }
/* Edge draws its own reveal button; one eye is enough. */
.pw-wrap .input::-ms-reveal, .pw-wrap .input::-ms-clear { display: none; }
.pw-eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
}
.pw-eye:hover { color: var(--ink); background: #f1f5f9; }
.pw-eye:focus-visible { outline: 2px solid rgba(29, 111, 232, 0.45); }
.pw-eye .eye-shut, .pw-eye[aria-pressed="true"] .eye-open { display: none; }
.pw-eye[aria-pressed="true"] .eye-shut { display: block; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--muted); }
.pill { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e2e8f0; color: #334155; }
.pill.published { background: #dcfce7; color: #166534; }
.pill.working { background: #e0f2fe; color: #075985; }
.pill.failed { background: #ffe4e6; color: #9f1239; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #0f172a; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; max-width: 90vw;
}

/* Shell */
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line);
  padding-top: calc(10px + env(safe-area-inset-top)); position: sticky; top: 0; z-index: 20;
}
.topbar .logo { height: 34px; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 600; }
html.is-phone .topbar a[data-nav="desk"] { display: none; }
html.is-desk .topbar a[data-nav="shoot"] { display: none; }
.topbar nav a.on { background: #eef4ff; color: var(--blue); }
.topbar .acct { margin-left: auto; font-size: 13px; color: var(--muted); }
.topbar .gear {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; color: var(--muted);
}
.topbar .gear:hover { background: #f1f5f9; }
.topbar .gear.on { background: #eef4ff; color: var(--blue); }
.shadow-prev {
  display: block; width: 100%; max-width: 360px; height: 220px; margin: 4px auto;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
input[type="range"] { width: 100%; accent-color: var(--blue); }
.sheet-back {
  position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.sheet { max-width: 420px; width: 100%; padding: 22px; display: grid; gap: 12px; }
.sheet h3 { margin: 0; }
.sheet p { margin: 0; }
.banner { padding: 10px 18px; background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; font-weight: 600; }
.banner a { margin-left: 8px; }
main { padding: 18px; max-width: 1500px; margin: 0 auto; }

/* Desk */
.desk { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 16px; align-items: start; }
.sku-list { max-height: calc(100vh - 150px); overflow: auto; }
.sku-list .head { position: sticky; top: 0; background: #fff; padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; z-index: 1; }
.sku-row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px;
  border-bottom: 1px solid var(--line); cursor: pointer; user-select: none;
}
.sku-row:hover { background: #f8fafc; }
.sku-row.on { background: #eef4ff; }
.sku-row .thumb { width: 56px; height: 56px; border-radius: 8px; background: #f1f5f9 center/contain no-repeat; border: 1px solid var(--line); }
.sku-row .code { font-weight: 700; }
.sku-row .note { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sku-row input[type="checkbox"] { width: 18px; height: 18px; }
.drag-grip { cursor: grab; font-size: 18px; color: var(--muted); padding: 0 4px; }
.detail { padding: 16px; display: grid; gap: 14px; }
.drag-zone {
  border: 2px dashed #93c5fd; border-radius: 12px; padding: 14px; background: #f0f7ff; cursor: grab;
  display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--blue-dark);
}
.drag-zone .stack { display: flex; }
.drag-zone .stack img { width: 42px; height: 42px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-left: -10px; }
.drag-zone .stack img:first-child { margin-left: 0; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.ph { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; }
.ph img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.ph .state { position: absolute; left: 6px; top: 6px; }
.ph .num { position: absolute; right: 6px; top: 6px; background: rgba(15,23,42,.7); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.ph.dragging { opacity: 0.4; }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* Editor */
.editor { position: fixed; inset: 0; background: #0b1220; z-index: 50; display: grid; grid-template-columns: 1fr 340px; }
.editor .stage { position: relative; overflow: hidden; touch-action: none; display: grid; place-items: center; }
.editor canvas.view { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.08); touch-action: none; }
.editor .marks { position: absolute; pointer-events: none; }
.editor .mark { position: absolute; border: 4px solid var(--red); border-radius: 50%; pointer-events: auto; cursor: move; touch-action: none; }
.editor .mark .sz { position: absolute; right: -10px; bottom: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--red); cursor: nwse-resize; }
.editor .mark .x { position: absolute; left: -12px; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: #0f172a; color: #fff; font-size: 13px; line-height: 22px; text-align: center; cursor: pointer; }
.editor .side { background: #fff; overflow: auto; display: flex; flex-direction: column; }
.editor .side header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); padding-top: calc(12px + env(safe-area-inset-top)); }
.editor .side header .title { font-weight: 700; flex: 1; }
.editor .tabs { display: flex; border-bottom: 1px solid var(--line); }
.editor .tabs button { flex: 1; border: 0; background: none; padding: 10px 4px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.editor .tabs button.on { color: var(--blue); border-bottom-color: var(--blue); }
.editor .sect { padding: 12px 14px; display: grid; gap: 12px; border-bottom: 1px solid var(--line); }
.editor .sect h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.slider { display: grid; grid-template-columns: 92px 1fr 48px; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; }
.slider input[type=range] { width: 100%; accent-color: var(--blue); height: 28px; }
.slider .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .btn.on { border-color: var(--blue); color: var(--blue); background: #eef4ff; }
.editor footer {
  margin-top: auto; padding: 12px 14px; display: flex; gap: 8px; border-top: 1px solid var(--line);
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; background: #fff;
}
.editor footer .btn { flex: 1; }
.switch { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px; }
.switch input { width: 20px; height: 20px; accent-color: var(--blue); }

/* Shoot (phone) */
.shoot { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; }
.shoot .skubar { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.shutter {
  width: 100%; border: 2px solid #bfdbfe; border-radius: 18px; padding: 22px; background: #fff; color: var(--blue-dark); display: flex;
  align-items: center; justify-content: center; gap: 16px; font-size: 19px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow);
}
.shutter:active { transform: scale(0.99); background: #f0f7ff; }
.shutter img { height: 60px; }
.notes { position: relative; }
.notes textarea { min-height: 110px; resize: vertical; }
.notes .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.notes.listening textarea { outline: 3px solid rgba(225, 29, 72, .45); }
.scanner { position: fixed; inset: 0; background: #000; z-index: 60; display: grid; grid-template-rows: auto 1fr; }
.scanner header { display: flex; justify-content: space-between; align-items: center; padding: 12px; padding-top: calc(12px + env(safe-area-inset-top)); color: #fff; }
.scanner #scanView { width: 100%; height: 100%; }

/* Settings, labels */
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.panel { padding: 18px; display: grid; gap: 14px; margin-bottom: 16px; }
.panel h3 { margin: 0; }

/* Public pages */
.public { max-width: 1080px; margin: 0 auto; padding: 24px; }
.hero { display: grid; gap: 18px; text-align: center; padding: 48px 0 24px; }
.hero img { max-width: 520px; width: 100%; margin: 0 auto; }
.hero h1 { font-size: clamp(28px, 4vw, 44px); margin: 0; }
.features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 24px 0; }
.features .card { padding: 18px; }
.auth { max-width: 420px; margin: 8vh auto; padding: 24px; display: grid; gap: 14px; }
.legal { max-width: 820px; margin: 0 auto; padding: 24px; line-height: 1.6; }
footer.site { text-align: center; padding: 24px; color: var(--muted); font-size: 13px; }
footer.site a { margin: 0 8px; }

@media (max-width: 900px) {
  .desk { grid-template-columns: 1fr; }
  .sku-list { max-height: none; }
  .topbar { justify-content: center; }
  .topbar nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line);
    justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .topbar nav a { padding: 10px 8px; font-size: 14px; }
  .topbar .acct { display: none; }
  .topbar .gear { position: absolute; right: 10px; top: calc(7px + env(safe-area-inset-top)); }
  main { padding: 12px 12px 96px; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .editor { grid-template-columns: 1fr; grid-template-rows: 1fr minmax(240px, 46vh); }
  .editor .side header { padding-top: 12px; }
  .editor .stage { padding-top: env(safe-area-inset-top); }
}