:root {
  --blue: #0052A4;
  --red: #E60012;
  --yellow: #FFD100;
  --ink: #20242A;
  --muted: #68717D;
  --line: #D8DEE6;
  --panel: #FFFFFF;
  --bg: #F5F7FA;
  --shadow: 0 10px 30px rgba(0, 40, 90, 0.08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100dvh; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; padding-top: calc(14px + env(safe-area-inset-top)); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { border: 2px solid var(--blue); background: white; padding: 5px 8px; font-weight: 900; letter-spacing: -.5px; box-shadow: 3px 3px 0 var(--yellow); }
.brand-blue { color: var(--blue); margin-right: 4px; }.brand-red { color: var(--red); }.version { color: var(--muted); font-size: 12px; }
.content { width: min(720px, 100%); margin: 0 auto; padding: 20px 16px 32px; }
.hero { background: var(--blue); color: white; border-radius: 18px; padding: 22px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.hero::after { content: ""; position: absolute; width: 120px; height: 120px; border: 10px solid rgba(255,255,255,.15); right: -45px; top: -45px; transform: rotate(45deg); }
.hero h1 { margin: 0 0 6px; font-size: 30px; }.hero p { margin: 0; opacity: .84; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.metric { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.metric strong { display: block; font-size: 28px; color: var(--blue); margin-top: 8px; }.metric span { color: var(--muted); font-size: 13px; }
.home-actions { margin-top: 14px; }
.section-head { display:flex; justify-content:space-between; align-items:center; margin: 24px 2px 12px; }.section-head h2 { margin:0; font-size:20px; }.text-button { border:0; background:transparent; color:var(--blue); font-weight:700; }
.product-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.product-card { background:white; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); text-align:left; padding:0; width:100%; }
.product-image { aspect-ratio:16/9; display:grid; place-items:center; background:linear-gradient(135deg,#eef3f9,#fff); color:#9AA5B1; border-bottom:1px solid var(--line); overflow:hidden; }
.product-image img { width:100%; height:100%; object-fit:cover; }.placeholder { font-weight:700; }
.product-body { padding:16px; }.tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }.tag { font-size:12px; padding:4px 8px; border-radius:999px; background:#EDF4FB; color:var(--blue); font-weight:700; }.tag.yellow { background:#FFF5BF; color:#7A5C00; }.tag.red { background:#FFE4E6; color:#A5000C; }
.product-title { font-size:19px; font-weight:800; margin:0 0 8px; }.meta { color:var(--muted); font-size:13px; }
.empty, .state-card { background:white; border:1px dashed #B8C3D1; border-radius:18px; padding:28px 20px; text-align:center; color:var(--muted); }
.primary, .secondary { width:100%; border-radius:14px; padding:14px 18px; font-weight:800; border:0; }.primary { background:var(--blue); color:white; }.secondary { background:white; color:var(--blue); border:1px solid var(--blue); }
.form-card, .detail-card { background:white; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow); }
.form-grid { display:grid; gap:14px; }.field label { display:block; font-weight:700; margin-bottom:7px; font-size:14px; }.field input,.field select,.field textarea { width:100%; border:1px solid #BBC5D1; border-radius:12px; padding:12px; background:white; }.field textarea { min-height:90px; resize:vertical; }.hint { color:var(--muted); font-size:12px; margin-top:5px; }.required::after { content:" *"; color:var(--red); }
.actions { display:grid; gap:10px; margin-top:18px; }.error { background:#FFF0F1; color:#9F0010; border:1px solid #FFC5CB; border-radius:12px; padding:12px; margin-bottom:14px; }.success { background:#EAF8EF; color:#136B35; border:1px solid #BCE5CA; border-radius:12px; padding:12px; margin-bottom:14px; }
.detail-list { display:grid; margin-top:14px; }.detail-row { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid #EDF0F4; }.detail-row span:first-child { color:var(--muted); }.detail-row span:last-child { font-weight:700; text-align:right; }
.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:1fr 1fr 76px 1fr 1fr; align-items:end; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid var(--line); }
.nav-item { border:0; background:transparent; color:#77818D; display:grid; gap:3px; justify-items:center; font-size:11px; }.nav-item.active { color:var(--blue); font-weight:800; }.nav-icon { font-size:21px; }.disabled { opacity:.4; cursor:not-allowed; }
.scan-button { align-self:start; transform:translateY(-22px); width:64px; height:64px; border-radius:50%; border:5px solid white; background:var(--blue); color:white; font-size:34px; box-shadow:0 7px 22px rgba(0,82,164,.35); }
.spinner { width:28px; height:28px; margin:0 auto; border:3px solid #D9E4EF; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
@media (min-width:680px) { .product-grid { grid-template-columns:1fr 1fr; }.content { padding-top:28px; } }

.purchase-dialog-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; padding-top:calc(16px + env(safe-area-inset-top)); padding-bottom:calc(16px + env(safe-area-inset-bottom)); background:rgba(16,24,40,.45); }
.purchase-dialog-backdrop.hidden { display:none; }
.purchase-dialog { width:min(100%,480px); max-height:min(90dvh,720px); overflow:auto; background:white; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 18px 48px rgba(0,40,90,.18); }
.purchase-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.purchase-dialog-head h2 { margin:0; font-size:20px; }
.purchase-dialog-close { width:36px; height:36px; border:0; border-radius:999px; background:#EDF0F4; color:var(--muted); font-size:24px; line-height:1; }
.purchase-dialog-product { background:#F5F7FA; border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:16px; }
.purchase-dialog-product-name { font-size:18px; font-weight:800; margin-bottom:6px; }
.purchase-dialog-product-model { margin-top:6px; }
.purchase-dialog-form .form-grid { margin-top:0; }
.purchase-dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.purchase-dialog-actions .primary, .purchase-dialog-actions .secondary { width:100%; }

.product-confirmation-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; padding-top:calc(16px + env(safe-area-inset-top)); padding-bottom:calc(16px + env(safe-area-inset-bottom)); background:rgba(16,24,40,.45); }
.product-confirmation-backdrop.hidden { display:none; }
.product-confirmation { width:min(100%,480px); max-height:min(90dvh,720px); overflow:auto; background:white; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 18px 48px rgba(0,40,90,.18); }
.product-confirmation-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.product-confirmation-head h2 { margin:0; font-size:20px; }
.product-confirmation-close { width:36px; height:36px; border:0; border-radius:999px; background:#EDF0F4; color:var(--muted); font-size:24px; line-height:1; }
.product-confirmation-card { background:#F5F7FA; border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:16px; }
.product-confirmation-name { margin:0 0 12px; font-size:20px; font-weight:800; }
.product-confirmation-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.product-confirmation-metric { background:white; border:1px solid var(--line); border-radius:14px; padding:14px; }
.product-confirmation-metric span { display:block; color:var(--muted); font-size:13px; margin-bottom:8px; }
.product-confirmation-metric strong { font-size:22px; color:var(--blue); }
.product-confirmation-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.product-confirmation-actions .primary, .product-confirmation-actions .secondary { width:100%; }

.barcode-scanner-view { display:grid; gap:16px; }
.barcode-scanner-head { margin-top:0; }
.barcode-reader { width:100%; min-height:min(56vw, 320px); border-radius:18px; overflow:hidden; background:#000; border:1px solid var(--line); box-shadow:var(--shadow); }
.barcode-reader video { width:100% !important; height:auto !important; object-fit:cover; display:block; }
.barcode-scanner-status { margin:0; padding:12px 14px; background:white; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:14px; line-height:1.5; white-space:pre-wrap; min-height:48px; }
.barcode-scanner-status.is-error { background:#FFF0F1; color:#9F0010; border-color:#FFC5CB; }
.barcode-scanner-actions { margin-top:4px; }
.barcode-debug-panel { background:#101828; color:#E7ECF3; border:1px solid #243044; border-radius:14px; padding:14px; box-shadow:var(--shadow); }
.barcode-debug-panel.hidden { display:none; }
.barcode-debug-title { margin:0 0 12px; font-size:14px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#93A4BC; }
.barcode-debug-list { margin:0; display:grid; gap:10px; }
.barcode-debug-row { margin:0; display:grid; gap:4px; }
.barcode-debug-row dt { margin:0; font-size:12px; font-weight:700; color:#93A4BC; }
.barcode-debug-row dd { margin:0; font-size:13px; line-height:1.45; word-break:break-word; white-space:pre-wrap; }
.barcode-debug-code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; max-height:180px; overflow:auto; background:#0B1220; border:1px solid #243044; border-radius:10px; padding:10px; }
.barcode-debug-error { color:#FFB4BC; }
.product-search-view { display:grid; gap:16px; }
.product-search-head { margin-top:0; }
.product-search-description { margin:0; color:var(--muted); font-size:15px; line-height:1.5; }
.product-search-results { display:grid; gap:12px; min-height:120px; }
.product-search-result-card { width:100%; text-align:left; background:white; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.product-search-result-name { display:block; font-size:19px; font-weight:800; color:var(--ink); }
.product-search-result-meta { display:block; margin-top:8px; color:var(--muted); font-size:13px; line-height:1.4; }
@media (min-width:680px) { .barcode-reader { min-height:320px; } .barcode-debug-code { max-height:240px; } }