/* ==============================================
   WC Picker – The Wine Dealer
   Clean light theme
   ============================================== */

:root {
  --bg:        #f5f3f0;
  --surface:   #ffffff;
  --surface-2: #f0ede8;
  --surface-3: #e8e3dc;
  --border:    #ddd8d0;

  --primary:   #8b1a2b;
  --primary-bg: rgba(139,26,43,0.08);
  --primary-lt: rgba(139,26,43,0.15);

  --dark:      #1a1a1a;
  --dark-2:    #2c2c2c;

  --success:   #2d7a4f;
  --success-bg: rgba(45,122,79,0.1);
  --warning:   #92400e;
  --warning-bg: rgba(146,64,14,0.1);
  --danger:    #991b1b;
  --danger-bg: rgba(153,27,27,0.1);

  --text:      #1a1a1a;
  --text-2:    #444;
  --text-muted: #888;

  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --topbar-h:  56px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 4px 16px rgba(0,0,0,0.1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); overscroll-behavior: none; }

body {
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

#app { height: 100dvh; overflow: hidden; }

.view { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; background: var(--bg); }

.content {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 16px;
  padding-bottom: 24px;
}

.content-order  { padding-bottom: 130px; }
.content-editor { padding-top: 14px; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.content-dash   { padding-top: 16px; }

/* ── Topbar ───────────────────────────────────── */

.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 4px;
  height: var(--topbar-h);
  background: var(--dark);
  border-bottom: none;
  flex-shrink: 0;
}

.topbar h1 { font-size: 17px; font-weight: 700; flex: 1; padding-left: 4px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-title { flex: 1; min-width: 0; }
.order-heading    { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; }
.order-subheading { font-size: 12px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn-icon {
  background: none; border: none; color: rgba(255,255,255,0.8);
  font-size: 20px; width: 44px; height: 44px;
  border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
}
.btn-icon:active { background: rgba(255,255,255,0.1); }

/* ── Buttons ──────────────────────────────────── */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px; border: none; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: opacity 0.15s, transform 0.1s; text-decoration: none;
}
.btn:active:not(:disabled) { transform: scale(0.97); opacity: 0.85; }
.btn:disabled, .btn.btn-disabled { opacity: 0.35; cursor: not-allowed; }

.btn-primary   { background: var(--primary); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); }
.btn-scan      { background: var(--primary); color: #fff; font-size: 16px; padding: 16px; }
.btn-complete  { background: var(--success); color: #fff; margin-top: 10px; }
.btn-danger    { background: var(--danger-bg); border: 1px solid rgba(153,27,27,0.2); color: var(--danger); }

/* ── Forms ────────────────────────────────────── */

.form-group  { margin-bottom: 16px; }
.form-row    { display: flex; gap: 12px; }
.form-half   { flex: 1; }

.form-group label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); margin-bottom: 6px;
}

.required { color: var(--danger); }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 15px;
  padding: 11px 13px; outline: none; font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }

.form-group textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
.form-group small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 5px; }

.search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.search-row input {
  flex: 1; min-width: 0; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 15px; padding: 11px 13px;
  outline: none; font-family: inherit;
}
.search-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
.btn-search { width: auto; flex-shrink: 0; padding: 10px 16px; }

/* ── Badges ───────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0;
}
.badge-blue  { background: rgba(59,130,246,0.12); color: #2563eb; }
.badge-amber { background: var(--warning-bg);     color: var(--warning); }
.badge-grey  { background: var(--surface-3);      color: var(--text-muted); }

/* ── Order cards ──────────────────────────────── */

.order-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 15px; margin-bottom: 10px; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: border-color 0.2s, transform 0.1s;
}
.order-card:active { transform: scale(0.985); border-color: var(--primary); }

.order-card-head  { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.order-num        { font-size: 16px; font-weight: 700; }
.order-date       { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.order-customer   { font-size: 15px; color: var(--text-2); margin-bottom: 3px; }
.order-meta-line  { font-size: 13px; color: var(--text-muted); margin-bottom: 9px; }

.progress-bar  { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.4s; }
.progress-complete { background: var(--success); }
.progress-label { font-size: 12px; color: var(--text-muted); }

/* ── Line items ───────────────────────────────── */

.line-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 13px 14px; margin-bottom: 9px;
  box-shadow: var(--shadow-sm);
}
.line-item-done { border-color: var(--success); background: var(--success-bg); }
.line-item-info { flex: 1; min-width: 0; }
.line-item-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.line-item-sku  { font-size: 12px; color: var(--text-muted); }
.line-item-tick { font-size: 12px; color: var(--success); font-weight: 600; margin-top: 3px; }

.line-item-controls { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; }
.qty-display { display: flex; align-items: baseline; gap: 2px; font-size: 22px; font-weight: 700; }
.qty-picked  { color: var(--text-muted); }
.qty-partial { color: var(--warning); }
.qty-done    { color: var(--success); }
.qty-sep     { font-size: 16px; color: var(--border); font-weight: 400; }
.qty-total   { font-size: 16px; color: var(--text-muted); }
.qty-btns { display: flex; gap: 7px; }

.btn-qty {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.btn-qty:active:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-qty:disabled { opacity: 0.3; cursor: not-allowed; }

.order-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 12px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--bg) 35%);
  z-index: 5;
}

.order-detail-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); font-size: 14px; box-shadow: var(--shadow-sm); }
.order-detail-row  { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.order-detail-row:last-child { border-bottom: none; }
.order-detail-row span:first-child { color: var(--text-muted); }
.order-detail-row span:last-child  { color: var(--text-2); text-align: right; }

/* ── Scan ─────────────────────────────────────── */

.view-scan { position: fixed; inset: 0; background: #000; z-index: 100; overflow: hidden; }
.view-scan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.scan-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top));
  background: linear-gradient(rgba(0,0,0,0.7), transparent);
}
.btn-scan-close { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 20px; cursor: pointer; }
.scan-label { color: rgba(255,255,255,0.9); font-size: 15px; font-weight: 500; }

.scan-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; pointer-events: none; }
.scan-frame { position: relative; width: 260px; height: 180px; }
.scan-corner { position: absolute; width: 26px; height: 26px; border-color: #fff; border-style: solid; }
.scan-corner.tl { top:0;left:0;border-width:3px 0 0 3px;border-radius:5px 0 0 0; }
.scan-corner.tr { top:0;right:0;border-width:3px 3px 0 0;border-radius:0 5px 0 0; }
.scan-corner.bl { bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 5px; }
.scan-corner.br { bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 5px 0; }

@keyframes scanLine { 0%,65%{top:5%;opacity:1} 45%{top:88%;opacity:1} 55%{top:88%;opacity:0} 56%{top:5%;opacity:0} }
.scan-line { position:absolute;left:3%;right:3%;height:2px;background:linear-gradient(90deg,transparent,var(--primary) 20%,#fff 50%,var(--primary) 80%,transparent);box-shadow:0 0 10px var(--primary);animation:scanLine 3s ease-in-out infinite; }
.scan-hint { color:rgba(255,255,255,0.75);font-size:14px;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,0.8); }
.scan-feedback-area { position:absolute;bottom:48px;left:16px;right:16px; }
.sfb { padding:13px 18px;border-radius:var(--radius);font-weight:600;font-size:15px;text-align:center;backdrop-filter:blur(12px); }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.sfb { animation: fadeSlideUp 0.25s ease; }
.sfb-ok   { background:rgba(45,122,79,0.92); color:#fff; }
.sfb-warn { background:rgba(146,64,14,0.92); color:#fff; }
.sfb-err  { background:rgba(153,27,27,0.92); color:#fff; }

/* ── Unknown barcode ──────────────────────────── */

.ub-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 20px;text-align:center;margin-bottom:20px;box-shadow:var(--shadow-sm); }
.ub-icon { font-size:40px;opacity:0.2;margin-bottom:14px; }
.ub-code { font-family:'Courier New',monospace;font-size:22px;font-weight:700;color:var(--primary);word-break:break-all;margin-bottom:8px; }

/* ── Action list ──────────────────────────────── */

.action-list { display:flex;flex-direction:column;gap:10px; }
.action-item { display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;cursor:pointer;width:100%;text-align:left;color:var(--text);box-shadow:var(--shadow-sm);font-family:inherit; }
.action-item:active { border-color:var(--primary); }
.action-icon  { font-size:24px;flex-shrink:0; }
.action-body  { flex:1; }
.action-title { font-weight:600;font-size:15px;margin-bottom:2px; }
.action-desc  { font-size:13px;color:var(--text-muted); }
.action-arrow { color:var(--text-muted);font-size:22px;flex-shrink:0; }
.action-item-muted { opacity:0.45; }

/* ── Misc ─────────────────────────────────────── */

.divider { height:1px;background:var(--border);margin:20px 0; }
.help-text { font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:14px; }
.text-warning { color:var(--warning); }
.barcode-inline { font-family:'Courier New',monospace;color:var(--primary);font-weight:700; }
.empty-state { text-align:center;padding:56px 24px; }
.empty-icon  { font-size:56px;margin-bottom:16px;opacity:0.5; }
.empty-state p { font-size:16px;color:var(--text-2);margin-bottom:24px;line-height:1.6; }
.text-muted-sm { font-size:13px;color:var(--text-muted); }
.empty-btn { width:auto;margin:0 auto; }

.settings-section { margin-bottom:4px; }
.section-title { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);margin-bottom:14px; }

.stat-row { display:flex;align-items:baseline;gap:6px;margin-bottom:14px;font-size:14px; }
.stat-val  { font-size:22px;font-weight:700;color:var(--primary); }
.stat-lbl  { color:var(--text-muted); }
.stat-sep  { color:var(--border); }

.user-card   { display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px; }
.user-avatar { width:44px;height:44px;border-radius:50%;background:var(--primary-bg);border:2px solid var(--primary);color:var(--primary);font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.user-name   { font-weight:600;font-size:15px;margin-bottom:2px; }
.user-email  { font-size:13px;color:var(--text-muted); }

/* ── Loading & Toast ──────────────────────────── */

.loading-overlay { position:fixed;inset:0;background:rgba(255,255,255,0.75);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200; }
.loading-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 36px;text-align:center;min-width:180px;box-shadow:var(--shadow); }
.loading-card p { font-size:14px;color:var(--text-muted); }

@keyframes spin { to { transform:rotate(360deg); } }
.spinner { width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.75s linear infinite;margin:0 auto 14px; }

.toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);padding:12px 22px;border-radius:30px;font-size:14px;font-weight:600;z-index:300;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);white-space:nowrap;max-width:calc(100vw - 40px);overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:var(--shadow); }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast-success { background:var(--success);color:#fff; }
.toast-error   { background:var(--danger); color:#fff; }
.toast-warning { background:var(--warning);color:#fff; }
.toast-info    { background:var(--primary);color:#fff; }

@supports (padding-top: env(safe-area-inset-top)) {
  .topbar { padding-top:env(safe-area-inset-top); height:calc(var(--topbar-h) + env(safe-area-inset-top)); }
}

/* ══════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════ */

.view-login { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:40px 24px;background:#1a1a1a; }
.login-brand { text-align:center;margin-bottom:40px; }
.login-logo-img { max-width:180px;height:auto;margin-bottom:20px;display:block;margin-left:auto;margin-right:auto; }
.login-logo-fallback { width:72px;height:72px;background:var(--primary);border-radius:16px;color:#fff;font-size:26px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 20px; }
.login-title { font-size:24px;font-weight:800;color:#fff;margin-bottom:4px; }
.login-sub   { font-size:14px;color:rgba(255,255,255,0.5); }
.login-form  { width:100%;max-width:360px; }
.login-form .form-group label { color:rgba(255,255,255,0.6); }
.login-form .form-group input { background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15);color:#fff; }
.login-form .form-group input::placeholder { color:rgba(255,255,255,0.3); }
.login-form .form-group input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(139,26,43,0.3); }
.btn-login   { margin-top:8px;padding:16px;font-size:16px;letter-spacing:0.02em; }
.login-error { background:rgba(153,27,27,0.2);border:1px solid rgba(153,27,27,0.4);color:#fca5a5;border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;margin-bottom:12px;line-height:1.5; }

/* ══════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════ */

.view-dashboard { background:var(--bg); }

.dash-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;
  padding-top:max(16px,calc(env(safe-area-inset-top) + 10px));
  background:var(--dark);
}

.dash-header-left { display:flex;align-items:center;gap:12px; }
.dash-logo { height:36px;width:auto; }
.dash-greeting { font-size:16px;font-weight:700;color:#fff; }
.dash-sub      { font-size:12px;color:rgba(255,255,255,0.5);margin-top:1px; }

.dash-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }

.dash-tile {
  position:relative;border-radius:var(--radius-lg);padding:20px 16px 18px;
  cursor:pointer;user-select:none;overflow:hidden;
  transition:transform 0.15s,box-shadow 0.15s;
  min-height:130px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:var(--shadow-sm);
}
.dash-tile:active { transform:scale(0.96);box-shadow:none; }

.tile-icon  { font-size:30px;line-height:1;margin-bottom:8px; }
.tile-label { font-size:15px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:2px; }
.tile-sub   { font-size:11px;color:rgba(255,255,255,0.65);line-height:1.3; }

.tile-badge { position:absolute;top:12px;right:12px;background:rgba(255,255,255,0.25);color:#fff;font-size:13px;font-weight:800;padding:2px 9px;border-radius:20px;min-width:26px;text-align:center; }
.tile-badge-empty { opacity:0.35; }

.dash-tile-orders   { background:linear-gradient(140deg,#8b1a2b,#c0392b); }
.dash-tile-scan     { background:linear-gradient(140deg,#2c3e50,#4a6741); }
.dash-tile-products { background:linear-gradient(140deg,#1a4731,#2d7a4f); }
.dash-tile-new      { background:linear-gradient(140deg,#7d5a1e,#c9a84c); }

/* ══════════════════════════════════════════════
   PRODUCT LIST
   ══════════════════════════════════════════════ */

.product-list-row { display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color 0.15s,transform 0.1s; }
.product-list-row:active { transform:scale(0.985);border-color:var(--primary); }
.plr-thumb { width:52px;height:52px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border); }
.plr-thumb img { width:100%;height:100%;object-fit:cover; }
.plr-no-img { font-size:24px;opacity:0.3; }
.plr-body  { flex:1;min-width:0; }
.plr-name  { font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px; }
.plr-meta  { display:flex;gap:10px;font-size:12px;color:var(--text-muted); }
.plr-price { color:var(--primary);font-weight:700; }
.plr-right { display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0; }
.plr-arrow { color:var(--text-muted);font-size:22px; }

.stock-dot { display:inline-block;width:8px;height:8px;border-radius:50%; }
.stock-in   { background:var(--success); }
.stock-out  { background:var(--danger); }
.stock-back { background:var(--warning); }

/* ══════════════════════════════════════════════
   PRODUCT EDITOR
   ══════════════════════════════════════════════ */

.view-editor { background:var(--bg); }

.editor-tabs { display:flex;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:0; }
.editor-tabs::-webkit-scrollbar { display:none; }

.etab { flex:1;min-width:70px;padding:12px 8px;background:none;border:none;color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:color 0.15s,border-color 0.15s;white-space:nowrap;text-align:center;font-family:inherit; }
.etab-active { color:var(--primary);border-bottom-color:var(--primary); }

.btn-save-top { background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:7px 14px;font-size:14px;font-weight:700;cursor:pointer;flex-shrink:0;font-family:inherit; }

.editor-footer { position:fixed;bottom:0;left:0;right:0;padding:12px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 35%);z-index:5; }

.toggle-row { display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px;border-bottom:1px solid var(--border);margin-bottom:14px; }
.toggle-label { flex:1; }
.toggle-label span { font-size:15px;font-weight:500;display:block;margin-bottom:2px; }
.toggle-desc { font-size:12px;color:var(--text-muted); }

.toggle { position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0; }
.toggle input { opacity:0;width:0;height:0; }
.toggle-slider { position:absolute;inset:0;background:var(--surface-3);border-radius:26px;border:1px solid var(--border);transition:background 0.2s;cursor:pointer; }
.toggle-slider::before { content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform 0.2s;box-shadow:var(--shadow-sm); }
.toggle input:checked + .toggle-slider { background:var(--primary);border-color:var(--primary); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

.btn-scan-inline { background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-2);font-size:18px;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0; }

.img-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px; }
.img-card { position:relative;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);border:1.5px solid var(--border);aspect-ratio:1; }
.img-card img { width:100%;height:100%;object-fit:cover;display:block; }
.img-badge { position:absolute;top:5px;left:5px;background:var(--primary);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;text-transform:uppercase; }
.img-actions { position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;background:linear-gradient(transparent,rgba(0,0,0,0.6));padding:20px 5px 5px; }
.img-btn { background:rgba(255,255,255,0.2);border:none;color:#fff;font-size:14px;width:28px;height:28px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.img-btn-del { background:rgba(153,27,27,0.7); }
.img-btn-spacer { width:28px; }
.img-uploading { position:absolute;inset:0;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center; }
.img-add-card { border:2px dashed var(--border);border-radius:var(--radius-sm);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--text-muted);transition:border-color 0.2s; }
.img-add-card:active { background:var(--surface-2);border-color:var(--primary); }

.check-list { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;max-height:260px;overflow-y:auto; }
.check-item { display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;font-size:14px; }
.check-item:last-child { border-bottom:none; }
.check-item input[type="checkbox"] { width:18px;height:18px;accent-color:var(--primary);cursor:pointer;flex-shrink:0; }

.tag-input-area { background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;min-height:48px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;cursor:text;transition:border-color 0.2s; }
.tag-input-area:focus-within { border-color:var(--primary); }
.tag-chips { display:contents; }
.tag-chip  { display:inline-flex;align-items:center;gap:4px;background:var(--primary-bg);border:1px solid var(--primary-lt);color:var(--primary);font-size:13px;font-weight:500;padding:3px 8px 3px 10px;border-radius:20px;white-space:nowrap; }
.tag-chip-del { background:none;border:none;color:var(--primary);font-size:11px;cursor:pointer;padding:0;line-height:1;opacity:0.7;font-family:inherit; }
#tag-input { flex:1;min-width:120px;background:none;border:none;outline:none;color:var(--text);font-size:14px;font-family:inherit;padding:2px 4px; }

/* ── Bottom sheet ─────────────────────────────── */

.sheet-backdrop { position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:50; }
.bottom-sheet { position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);border-radius:20px 20px 0 0;padding:12px 16px 24px;padding-bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));z-index:51;transform:translateY(100%);transition:transform 0.25s cubic-bezier(0.34,1.1,0.64,1);box-shadow:0 -8px 32px rgba(0,0,0,0.1); }
.bottom-sheet.sheet-open { transform:translateY(0); }
.sheet-handle { width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px; }
.sheet-title  { font-size:15px;font-weight:700;color:var(--text-muted);text-align:center;margin-bottom:12px; }