:root { --green:#1d5c45; --pale:#e7f2ea; --ink:#17221b; --muted:#637268; --line:#d9e2db; --danger:#a33124; }
* { box-sizing:border-box; }
body { margin:0; background:#f6f8f5; color:var(--ink); font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
header, main { max-width:700px; margin:auto; padding-left:20px; padding-right:20px; }
header { min-height:94px; display:flex; justify-content:space-between; align-items:center; color:white; background:var(--green); max-width:none; padding-left:max(20px,calc((100% - 660px)/2)); padding-right:max(20px,calc((100% - 660px)/2)); }
h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:1.55rem; } h2 { margin-bottom:8px; font-size:1.15rem; }
main { padding-top:18px; padding-bottom:40px; display:grid; gap:14px; }
section, dialog form { border:1px solid var(--line); border-radius:16px; background:white; padding:16px; box-shadow:0 1px 1px #17221b08; }
.mode-switch { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:5px; border-radius:12px; background:#dce7df; }
.mode-switch button { background:transparent; color:var(--green); }
.mode-switch button[aria-pressed="true"] { background:white; box-shadow:0 1px 2px #17221b20; }
label { display:block; font-weight:650; margin-bottom:7px; } input,select,button,textarea { font:inherit; } input,select,textarea { width:100%; min-height:46px; padding:10px 12px; border:1px solid #b6c5ba; border-radius:10px; background:white; color:var(--ink); } textarea { resize:vertical; }
#inventoryGroup { margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
button { min-height:44px; border:0; border-radius:10px; padding:9px 14px; background:var(--green); color:white; cursor:pointer; font-weight:700; } button:disabled { background:#b8c2ba; cursor:not-allowed; } button.secondary { background:var(--pale); color:var(--green); } .icon-button { min-width:42px; padding:4px; background:transparent; font-size:1.4rem; }
.scan-row,.count-row { display:flex; gap:8px; } .scan-row input,.count-row input { flex:1; } .small,.eyebrow { color:var(--muted); font-size:.82rem; margin-bottom:0; } .eyebrow { font-weight:750; letter-spacing:.08em; }
.product-title,.section-heading,.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .barcode { color:var(--muted); font-size:.8rem; text-align:right; word-break:break-all; } .product-actions { display:grid; justify-items:end; gap:8px; } .edit-button { min-height:34px; font-size:.8rem; padding:5px 8px; }
.stock-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; } .stock-grid div { padding:12px; border-radius:10px; background:var(--pale); } .stock-grid span { display:block; color:var(--muted); font-size:.8rem; } .stock-grid strong { display:block; margin-top:2px; font-size:1.45rem; }
details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; margin-bottom:16px; } summary { cursor:pointer; font-weight:650; } ul { list-style:none; padding:0; margin:10px 0 0; } li { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); } li:last-child { border:0; }
.inventory-count-status { margin:0 0 14px; padding:10px 12px; border-radius:10px; background:#eef1ef; color:var(--muted); font-weight:650; } .inventory-count-status.counted { background:var(--pale); color:var(--green); } .inventory-count-status.pending { background:#fff4ce; color:#795b00; }
.pending-card .section-heading span,.history-card .section-heading span { border-radius:999px; min-width:28px; text-align:center; padding:2px 8px; background:var(--pale); color:var(--green); font-weight:750; } .wide { width:100%; margin-top:14px; } .hidden { display:none !important; }
.action-main { min-width:0; } .action-main strong { overflow-wrap:anywhere; } .action-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px; } .status-badge { display:inline-block; border-radius:999px; padding:2px 8px; font-size:.72rem; font-weight:750; background:#eef1ef; color:var(--muted); } .status-badge.sending { background:#fff4ce; color:#795b00; } .status-badge.error { background:#fbe4e1; color:var(--danger); } .status-badge.success { background:var(--pale); color:var(--green); } .action-error { display:block; margin-top:4px; color:var(--danger); font-size:.78rem; } .history-card li { align-items:flex-start; }
.camera-panel video { width:100%; border-radius:10px; background:#17221b; } dialog { width:min(100% - 24px,540px); border:0; padding:0; border-radius:16px; } dialog::backdrop { background:#17221b99; } dialog form { border:0; display:grid; gap:10px; } .dialog-heading { align-items:center; } .dialog-heading h2 { margin:0; } .switch { display:flex; align-items:center; gap:8px; } .switch input { width:auto; min-height:0; }
@media (max-width:430px) { .scan-row { display:grid; grid-template-columns:1fr; } .mode-switch { grid-template-columns:1fr; } }