:root {
    --ink: #eff6ef;
    --muted: #8e9c94;
    --bg: #09100e;
    --panel: #111a17;
    --panel-2: #17211d;
    --line: rgba(255,255,255,.09);
    --accent: #b8f43d;
    --accent-dark: #263a0d;
    --accent-glow: rgba(184,244,61,.22);
    --orange: #ffb45c;
    --violet: #9a8cff;
    --danger: #ff6b72;
    --radius: 20px;
    --shadow: 0 22px 70px rgba(0,0,0,.32);
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
input, select, textarea { color: var(--ink); }
::selection { color: #102000; background: var(--accent); }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 900; letter-spacing: .16em; }
.brand-large { position: absolute; z-index: 2; top: 48px; left: 54px; font-size: 16px; }
.brand-mark { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; width: 30px; height: 30px; padding: 5px; border: 1px solid rgba(184,244,61,.45); border-radius: 9px; background: rgba(184,244,61,.08); box-shadow: 0 0 26px var(--accent-glow); transform: rotate(-4deg); }
.brand-mark i { display: block; width: 4px; border-radius: 3px; background: var(--accent); }
.brand-mark i:nth-child(1) { height: 10px; }
.brand-mark i:nth-child(2) { height: 16px; }
.brand-mark i:nth-child(3) { height: 13px; }

.auth-shell { display: grid; grid-template-columns: minmax(420px, 1.16fr) minmax(420px, .84fr); min-height: 100vh; overflow: hidden; }
.auth-visual { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 10vh 8vw; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 40% 45%, #1a2d20 0, #0d1713 42%, #08100d 76%); }
.auth-visual::before { position: absolute; inset: 0; z-index: -1; content: ""; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, transparent, black 24%, black 78%, transparent); }
.auth-visual::after { position: absolute; right: -12%; bottom: -28%; z-index: -1; width: 52vw; height: 52vw; content: ""; border: 1px solid rgba(184,244,61,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(184,244,61,.025), 0 0 0 140px rgba(184,244,61,.018); animation: breathe 8s ease-in-out infinite; }
.ambient { position: absolute; z-index: -1; border-radius: 999px; filter: blur(2px); opacity: .7; }
.ambient-one { top: 14%; right: 5%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(184,244,61,.17), transparent 67%); animation: float 8s ease-in-out infinite; }
.ambient-two { left: 10%; bottom: 5%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(72,215,154,.08), transparent 70%); animation: float 10s ease-in-out -3s infinite reverse; }
.auth-copy { position: relative; z-index: 2; max-width: 690px; }
.eyebrow, .step-label, .modal-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.pulse-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(184,244,61,.08); }
.pulse-dot::after { position: absolute; inset: -5px; content: ""; border: 1px solid var(--accent); border-radius: 50%; animation: pulse 2s ease-out infinite; }
.auth-copy h1 { margin: 0; font-size: clamp(52px, 5.5vw, 88px); line-height: .97; letter-spacing: -.065em; }
.auth-copy h1 em, .welcome-row h1 em { color: var(--accent); font-family: Georgia, serif; font-weight: 400; }
.auth-copy p { max-width: 550px; margin: 28px 0 0; color: #9eaaa2; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.7; }
.auth-demo { position: absolute; right: 8%; bottom: 9%; z-index: 3; width: min(390px, 45%); height: 132px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(8,15,12,.72); box-shadow: var(--shadow); backdrop-filter: blur(18px); transform: rotate(-2deg); }
.demo-code { position: absolute; top: 28px; left: 28px; display: flex; align-items: stretch; gap: 4px; width: 155px; height: 76px; }
.demo-code span { flex: 1; background: rgba(255,255,255,.84); }
.demo-code span:nth-child(2n) { flex: .4; }
.demo-code span:nth-child(3n) { flex: 1.6; }
.demo-scanline { position: absolute; top: 18px; bottom: 18px; left: 26px; width: 2px; background: var(--accent); box-shadow: 0 0 18px 3px var(--accent); animation: scan-x 2.8s ease-in-out infinite; }
.demo-status { position: absolute; top: 34px; right: 24px; display: grid; }
.demo-status b { color: var(--accent); font-size: 30px; }
.demo-status span { max-width: 115px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.auth-panel { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px; background: #f1f4ef; color: #172019; }
.auth-card { width: min(430px, 100%); animation: rise .7s both; }
.auth-card h2 { margin: 0 0 10px; color: #111a14; font-size: clamp(32px, 3vw, 44px); line-height: 1.06; letter-spacing: -.045em; }
.auth-card .muted { margin: 0 0 32px; color: #68726b; line-height: 1.55; }
.auth-card .step-label { color: #648c10; }
.auth-form { display: grid; gap: 18px; }
.auth-form label, .form-grid label, .notes-label, .user-add-card label { display: grid; gap: 8px; color: #3c4740; font-size: 12px; font-weight: 750; }
.auth-form input, .password-field, .form-grid input, .form-grid select, .notes-label textarea, .user-add-card input, .user-add-card select { width: 100%; min-height: 52px; border: 1px solid #d7ded7; border-radius: 12px; outline: 0; background: #fff; color: #172019; transition: border .2s, box-shadow .2s, transform .2s; }
.auth-form input, .form-grid input, .form-grid select, .notes-label textarea, .user-add-card input, .user-add-card select { padding: 0 15px; }
.notes-label textarea { min-height: 88px; padding-top: 13px; resize: vertical; }
.auth-form input:focus, .form-grid input:focus, .form-grid select:focus, .notes-label textarea:focus, .user-add-card input:focus, .user-add-card select:focus { border-color: #9bcf32; box-shadow: 0 0 0 4px rgba(155,207,50,.13); }
.password-field { display: flex; align-items: center; padding-right: 6px; }
.password-field input { min-height: 48px; border: 0; box-shadow: none !important; }
.show-password { border: 0; padding: 9px 10px; background: transparent; color: #67806e; font-size: 11px; font-weight: 800; }
.form-error { padding: 12px 14px; border: 1px solid #f6b6b8; border-radius: 10px; background: #fff0f0; color: #a9363b; font-size: 13px; line-height: 1.45; animation: shake .35s; }
.privacy-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 24px; color: #859087; font-size: 11px; }
.privacy-note span { color: #77ad16; font-size: 8px; }
.mobile-brand { display: none; margin-bottom: 42px; color: #172019; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 0 18px; border: 1px solid transparent; border-radius: 11px; font-size: 12px; font-weight: 800; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s, border .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--accent); color: #152000; box-shadow: 0 10px 30px rgba(184,244,61,.14); }
.btn-primary:hover { background: #c7ff53; box-shadow: 0 13px 35px rgba(184,244,61,.22); }
.btn-secondary { border-color: var(--line); background: var(--panel-2); color: var(--ink); }
.btn-secondary:hover { border-color: rgba(184,244,61,.3); }
.btn-ghost { border-color: var(--line); background: transparent; color: var(--muted); }
.btn-wide { width: 100%; min-height: 54px; margin-top: 4px; }
.auth-card .btn-primary { color: #152000; }
.icon-btn { display: inline-grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); transition: color .2s, background .2s; }
.icon-btn:hover { background: rgba(255,255,255,.06); color: var(--ink); }

.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; height: 100vh; padding: 27px 18px 20px; border-right: 1px solid var(--line); background: #0c1512; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 29px; }
.version-pill { padding: 4px 6px; border-radius: 5px; background: rgba(184,244,61,.09); color: var(--accent); font-size: 7px; font-weight: 900; letter-spacing: .11em; }
.nav-list { display: grid; gap: 6px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 13px; border: 0; border-radius: 11px; background: transparent; color: #829188; font-size: 12px; font-weight: 700; text-align: left; transition: .22s; }
.nav-item:hover { background: rgba(255,255,255,.04); color: var(--ink); transform: translateX(2px); }
.nav-item.active { background: linear-gradient(90deg, rgba(184,244,61,.13), rgba(184,244,61,.04)); color: var(--ink); }
.nav-item.active::before { position: absolute; left: 0; width: 2px; height: 22px; content: ""; border-radius: 4px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.nav-icon { display: grid; width: 24px; height: 24px; place-items: center; color: var(--accent); font-size: 18px; }
.nav-item kbd { margin-left: auto; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.03); color: #657169; font: 9px var(--font); }
.nav-count { display: grid; min-width: 21px; height: 21px; margin-left: auto; padding: 0 5px; place-items: center; border-radius: 7px; background: rgba(184,244,61,.11); color: var(--accent); font-size: 8px; }
.sidebar-tip { margin-top: auto; padding: 16px; border: 1px solid rgba(184,244,61,.11); border-radius: 14px; background: radial-gradient(circle at 100% 0, rgba(184,244,61,.10), transparent 55%), rgba(255,255,255,.025); }
.sidebar-tip .tip-icon { display: grid; width: 28px; height: 28px; margin-bottom: 13px; place-items: center; border-radius: 8px; background: var(--accent); color: #132000; font-weight: 900; }
.sidebar-tip b { font-size: 11px; }
.sidebar-tip p { margin: 6px 0 0; color: #75827a; font-size: 10px; line-height: 1.55; }
.account-card { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; margin-top: 15px; padding: 15px 4px 0; border-top: 1px solid var(--line); }
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #314821, #1c2b18); color: var(--accent); font-size: 13px; font-weight: 900; }
.account-card div:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.account-card b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-card span { color: #69766e; font-size: 9px; }
.account-card form { margin: 0; }

.workspace { min-width: 0; background: radial-gradient(circle at 95% 5%, rgba(184,244,61,.035), transparent 28%), #0a110f; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 74px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(10,17,15,.85); backdrop-filter: blur(18px); }
.topbar-title { display: flex; align-items: center; gap: 9px; color: #7d8c83; font-size: 10px; font-weight: 650; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.date-chip { color: #6f7d75; font-size: 10px; text-transform: capitalize; }
.scan-cta { min-height: 40px; }
.scan-corners { font-size: 18px; }
.mobile-menu { display: none; }
.page-content { width: min(1440px, 100%); margin: 0 auto; padding: 48px clamp(24px, 3.5vw, 58px) 80px; }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.welcome-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.btn-order { border-color: rgba(184,244,61,.2); background: rgba(184,244,61,.07); color: var(--accent); }
.btn-order b { display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: 6px; background: var(--accent); color: #172100; font-size: 8px; }
.btn-client-order { border-color: rgba(154,140,255,.24); background: rgba(154,140,255,.1); color: #c4bcff; }
.btn-client-order b { display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: 6px; background: var(--violet); color: #100d26; font-size: 8px; }
.nav-count.client-count { background: rgba(154,140,255,.13); color: #b9afff; }
.welcome-row .eyebrow { margin-bottom: 10px; }
.welcome-row h1 { margin: 0; font-size: clamp(35px, 3.6vw, 52px); line-height: 1; letter-spacing: -.05em; }
.welcome-row p { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 35px 0 42px; }
.stat-card { position: relative; display: flex; align-items: center; gap: 15px; min-height: 118px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.018)); transition: transform .25s, border .25s; }
.stat-card:hover { border-color: rgba(184,244,61,.2); transform: translateY(-3px); }
.stat-card.stat-accent { background: radial-gradient(circle at 100% 0, rgba(184,244,61,.14), transparent 55%), linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.stat-card.stat-accent::after { position: absolute; right: -28px; top: -34px; width: 90px; height: 90px; content: ""; border: 1px solid rgba(184,244,61,.15); border-radius: 50%; }
.stat-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: rgba(184,244,61,.10); color: var(--accent); font-size: 21px; }
.stat-icon.warning { background: rgba(255,180,92,.1); color: var(--orange); }
.stat-icon.violet { background: rgba(154,140,255,.1); color: var(--violet); }
.stat-card > div:last-child { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 9px; }
.stat-card span { grid-column: 1/-1; margin-bottom: 4px; color: #89968e; font-size: 10px; font-weight: 700; }
.stat-card strong { font-size: 27px; letter-spacing: -.04em; }
.stat-card small { color: #5e6a63; font-size: 8px; }

.inventory-section { padding-top: 2px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-heading > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.section-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.section-heading span { color: #637069; font-size: 10px; }
.view-toggle { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); }
.view-toggle button { width: 31px; height: 27px; border: 0; border-radius: 6px; background: transparent; color: #637069; }
.view-toggle button.active { background: #25302b; color: var(--accent); }
.toolbar { display: grid; grid-template-columns: minmax(250px, 1fr) 170px 180px 150px; gap: 10px; margin-bottom: 22px; }
.search-box { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); transition: border .2s, box-shadow .2s; }
.search-box:focus-within { border-color: rgba(184,244,61,.35); box-shadow: 0 0 0 3px rgba(184,244,61,.06); }
.search-box > span { margin-right: 10px; color: #6d7972; font-size: 19px; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; }
.search-box input::placeholder { color: #5e6a63; }
.search-box kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; color: #526058; font: 9px var(--font); }
.toolbar select { min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: #111a17; color: #8e9b93; font-size: 10px; }
.product-grid { display: grid; gap: 30px; }
.owner-section { display: grid; gap: 13px; }
.owner-section-heading { display: flex; align-items: center; gap: 11px; padding: 0 3px; }
.owner-section-heading::after { flex: 1; height: 1px; margin-left: 8px; content: ""; background: linear-gradient(90deg, var(--line), transparent); }
.owner-section-heading > div:nth-child(2) { display: grid; gap: 3px; }
.owner-section-heading h3 { margin: 0; font-size: 13px; letter-spacing: -.015em; }
.owner-section-heading span { color: #647168; font-size: 8px; }
.owner-avatar { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(184,244,61,.16); border-radius: 10px; background: rgba(184,244,61,.07); color: var(--accent); font-size: 10px; font-weight: 900; }
.owner-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.product-card { position: relative; display: grid; grid-template-columns: 92px minmax(0,1fr); min-height: 142px; padding: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, #111a17, #0e1714); transition: transform .25s, border-color .25s, box-shadow .25s; animation: card-in .45s both; }
.product-card:hover { z-index: 2; border-color: rgba(184,244,61,.25); box-shadow: 0 18px 38px rgba(0,0,0,.2); transform: translateY(-3px); }
.product-image { position: relative; display: grid; width: 82px; height: 116px; overflow: hidden; place-items: center; border-radius: 12px; background: radial-gradient(circle at 30% 20%, rgba(184,244,61,.20), transparent 52%), #1a2721; color: var(--accent); font-family: Georgia, serif; font-size: 30px; }
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-image::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(255,255,255,.06); border-radius: inherit; pointer-events: none; }
.stock-dot { position: absolute; top: 8px; right: 8px; z-index: 2; width: 8px; height: 8px; border: 2px solid #16231d; border-radius: 50%; background: var(--accent); }
.stock-dot.low { background: var(--orange); }
.stock-dot.empty { background: var(--danger); }
.product-main { display: flex; min-width: 0; flex-direction: column; padding: 3px 3px 2px 12px; }
.product-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; }
.product-top-actions { display: flex; align-items: center; gap: 3px; }
.order-quick-btn { height: 24px; padding: 0 7px; border: 1px solid rgba(184,244,61,.14); border-radius: 7px; background: rgba(184,244,61,.045); color: #8eaa57; font-size: 7px; font-weight: 850; transition: .2s; }
.order-quick-btn:hover, .order-quick-btn.selected { border-color: rgba(184,244,61,.32); background: rgba(184,244,61,.11); color: var(--accent); }
.category-pill { overflow: hidden; max-width: 82px; padding: 4px 7px; border-radius: 5px; background: rgba(184,244,61,.08); color: #9ecb45; font-size: 7px; font-weight: 850; letter-spacing: .09em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.more-btn { display: grid; width: 26px; height: 24px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #66736b; font-weight: 900; }
.more-btn:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.product-main h3 { overflow: hidden; margin: 10px 0 3px; font-size: 13px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.product-brand { overflow: hidden; color: #738078; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.product-description { display: -webkit-box; overflow: hidden; margin-top: 5px; color: #69766e; font-size: 8px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.product-meta { display: flex; gap: 8px; margin-top: 8px; color: #56645c; font-size: 8px; }
.product-bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; }
.barcode { max-width: 105px; overflow: hidden; color: #536058; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 7px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.quantity-control { display: flex; align-items: center; gap: 5px; }
.quantity-control button { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); color: #839087; font-size: 13px; transition: .2s; }
.quantity-control button:hover { border-color: rgba(184,244,61,.3); color: var(--accent); }
.quantity-control b { min-width: 25px; color: var(--ink); font-size: 12px; text-align: center; }
.product-menu { position: fixed; z-index: 100; display: grid; min-width: 155px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #1a2420; box-shadow: 0 15px 40px rgba(0,0,0,.4); animation: pop .16s both; }
.product-menu button { padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; color: #bec8c1; font-size: 10px; text-align: left; }
.product-menu button:hover { background: rgba(255,255,255,.06); }
.product-menu .danger { color: #ff8c91; }
.owner-products.list { grid-template-columns: 1fr; }
.owner-products.list .product-card { grid-template-columns: 60px 1fr; min-height: 82px; }
.owner-products.list .product-image { width: 54px; height: 54px; }
.owner-products.list .product-main { display: grid; grid-template-columns: minmax(180px,1fr) 160px 120px; align-items: center; gap: 20px; }
.owner-products.list .product-top { display: none; }
.owner-products.list .product-main h3 { margin: 0 0 4px; }
.owner-products.list .product-description { display: none; }
.owner-products.list .product-meta { margin: 0; }
.owner-products.list .product-bottom { align-items: center; margin: 0; }
.empty-state { display: grid; min-height: 340px; place-items: center; align-content: center; padding: 40px; border: 1px dashed rgba(255,255,255,.12); border-radius: 18px; text-align: center; }
.empty-state h3 { margin: 22px 0 7px; font-size: 18px; }
.empty-state p { margin: 0 0 20px; color: var(--muted); font-size: 11px; }
.empty-orbit { position: relative; display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid rgba(184,244,61,.2); border-radius: 50%; color: var(--accent); font-size: 28px; }
.empty-orbit::after { position: absolute; inset: -9px; content: ""; border: 1px dashed rgba(184,244,61,.14); border-radius: 50%; animation: spin 12s linear infinite; }

.modal { position: fixed; inset: 0; z-index: 1000; display: grid; visibility: hidden; padding: 24px; place-items: center; opacity: 0; transition: visibility .25s, opacity .25s; }
#scanner-modal { z-index: 1100; }
.modal.open { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(8px); }
.modal-card { position: relative; width: min(560px, 100%); max-height: min(880px, calc(100vh - 48px)); overflow: auto; padding: 32px; border: 1px solid rgba(255,255,255,.11); border-radius: 22px; background: #121b18; box-shadow: 0 30px 100px rgba(0,0,0,.55); transform: translateY(18px) scale(.985); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.modal.open .modal-card { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 17px; right: 17px; z-index: 2; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.03); color: #758178; font-size: 20px; }
.modal-close:hover { color: var(--ink); }
.modal-heading { padding-right: 35px; }
.modal-heading .modal-kicker { margin-bottom: 8px; }
.modal-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
.modal-heading p { margin: 8px 0 23px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.camera-shell { position: relative; display: grid; height: 286px; overflow: hidden; place-items: center; border: 1px solid var(--line); border-radius: 17px; background: #080e0c; }
.camera-shell video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.camera-shell.active video { opacity: 1; }
.camera-placeholder { position: absolute; display: grid; place-items: center; text-align: center; }
.camera-placeholder > span { margin-bottom: 12px; color: var(--accent); font-size: 42px; }
.camera-placeholder b { font-size: 12px; }
.camera-placeholder small { margin-top: 5px; color: #657168; font-size: 9px; }
.camera-shell.active .camera-placeholder { display: none; }
.scan-frame { position: absolute; inset: 20% 15%; opacity: 0; transition: opacity .3s; }
.camera-shell.active .scan-frame { opacity: 1; }
.scan-frame i { position: absolute; width: 25px; height: 25px; border-color: var(--accent); border-style: solid; }
.scan-frame i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.scan-frame i:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.scan-frame i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.scan-frame > span { position: absolute; right: 0; left: 0; top: 0; height: 1px; background: var(--accent); box-shadow: 0 0 12px 2px var(--accent); animation: scan-y 2.4s ease-in-out infinite; }
.camera-status { position: absolute; bottom: 13px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 20px; background: rgba(5,9,8,.8); color: #b2bdb5; font-size: 8px; backdrop-filter: blur(8px); }
.camera-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.camera-status.processing span { background: var(--orange); box-shadow: 0 0 7px var(--orange); }
.camera-status.success { color: var(--accent); }
.btn-camera { width: 100%; margin-top: 10px; border-color: var(--line); background: rgba(255,255,255,.035); color: #bcc6bf; }
.or-divider { display: flex; align-items: center; margin: 17px 0; color: #566159; font-size: 8px; }
.or-divider::before, .or-divider::after { flex: 1; height: 1px; content: ""; background: var(--line); }
.or-divider span { padding: 0 12px; }
.manual-scan { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.manual-scan input { min-width: 0; min-height: 45px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: rgba(255,255,255,.03); font-family: ui-monospace, monospace; font-size: 11px; }
.manual-scan input:focus { border-color: rgba(184,244,61,.35); }
.scan-rule { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 17px; padding: 12px; border-radius: 10px; background: rgba(184,244,61,.05); color: #7e8c83; font-size: 9px; line-height: 1.5; }
.scan-rule b { color: #aab7ae; }

.form-modal { width: min(690px, 100%); }
.image-picker { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; margin-bottom: 20px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }
.image-preview { display: grid; width: 96px; height: 82px; overflow: hidden; place-items: center; align-content: center; gap: 3px; border: 1px dashed rgba(184,244,61,.25); border-radius: 10px; background: rgba(184,244,61,.04); color: var(--accent); }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-preview small { color: #69766e; font-size: 8px; }
.image-picker-copy { display: grid; gap: 5px; color: #d8e0da; font-size: 11px; }
.image-picker-copy > span { color: #69766e; font-size: 8px; font-weight: 400; }
.image-picker-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.image-picker label { display: block; }
.image-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.image-picker em { display: block; width: max-content; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; color: #a9b4ac; font-size: 8px; font-style: normal; transition: .2s; }
.image-picker label:hover em { border-color: rgba(184,244,61,.3); color: var(--accent); transform: translateY(-1px); }
.image-picker .camera-action em { border-color: rgba(184,244,61,.2); background: rgba(184,244,61,.07); color: var(--accent); }
.barcode-input-row { display: flex; min-width: 0; }
.barcode-input-row input { min-width: 0; border-radius: 12px 0 0 12px; }
.field-scan-btn { flex: 0 0 auto; min-width: 82px; border: 1px solid rgba(184,244,61,.25); border-left: 0; border-radius: 0 12px 12px 0; background: rgba(184,244,61,.08); color: var(--accent); font-size: 9px; font-weight: 850; }
.field-scan-btn:hover { background: rgba(184,244,61,.14); }
.account-assignment { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid rgba(184,244,61,.14); border-radius: 12px; background: rgba(184,244,61,.045); }
.account-assignment .avatar { width: 38px; height: 38px; }
.account-assignment > div:nth-child(2) { display: grid; gap: 4px; }
.account-assignment b { color: #dce5df; font-size: 10px; }
.account-assignment span { color: #78867d; font-size: 8px; }
.account-assignment i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: rgba(184,244,61,.12); color: var(--accent); font-size: 10px; font-style: normal; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span-2 { grid-column: 1/-1; }
.form-grid label, .notes-label, .user-add-card label { color: #aeb8b1; }
.form-grid input, .form-grid select, .notes-label textarea, .user-add-card input, .user-add-card select { min-height: 44px; border-color: var(--line); background: rgba(255,255,255,.035); color: var(--ink); }
.form-grid select option, .user-add-card select option, .toolbar select option { background: #17201d; }
.notes-label { margin-top: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.wide-modal { width: min(850px, 100%); }
.users-layout { display: grid; grid-template-columns: 300px 1fr; gap: 22px; }
.user-add-card { display: grid; align-content: start; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.user-add-card h3 { margin: 0 0 3px; font-size: 14px; }
.list-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #839088; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.list-caption b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; background: rgba(184,244,61,.09); color: var(--accent); }
.users-list, .history-list { display: grid; gap: 8px; }
.user-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; }
.user-row .avatar { width: 38px; height: 38px; }
.user-row > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.user-row b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.user-row small { color: #657168; font-size: 8px; }
.role-badge { padding: 4px 7px; border-radius: 5px; background: rgba(154,140,255,.09); color: #b1a7ff; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.delete-user { width: 28px; height: 28px; margin-left: 5px; border: 0; border-radius: 7px; background: transparent; color: #6f7a73; }
.delete-user:hover { background: rgba(255,107,114,.08); color: var(--danger); }
.history-modal-card { width: min(700px, 100%); }
.history-list { max-height: 550px; overflow: auto; padding-right: 4px; }
.history-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.movement-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: rgba(184,244,61,.08); color: var(--accent); font-weight: 900; }
.movement-icon.out, .movement-icon.delete { background: rgba(255,107,114,.08); color: var(--danger); }
.movement-icon.adjust { background: rgba(154,140,255,.08); color: var(--violet); }
.history-main { display: grid; gap: 4px; min-width: 0; }
.history-main b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.history-main span { color: #657168; font-size: 8px; }
.history-side { display: grid; gap: 3px; text-align: right; }
.history-side b { color: var(--accent); font-size: 11px; }
.history-side b.negative { color: var(--danger); }
.history-side small { color: #59655e; font-size: 7px; }
.orders-modal-card { width: min(820px, 100%); }
.order-summary-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 19px; }
.order-summary-bar > div { display: flex; align-items: baseline; gap: 8px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.order-summary-bar strong { color: var(--accent); font-size: 21px; }
.order-summary-bar span { color: #78857d; font-size: 8px; }
.orders-list { display: grid; gap: 20px; }
.order-owner-group { display: grid; gap: 8px; }
.order-owner-heading { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; }
.order-owner-heading > div:nth-child(2) { display: grid; gap: 3px; }
.order-owner-heading h3 { margin: 0; font-size: 12px; }
.order-owner-heading span { color: #6e7b73; font-size: 8px; }
.order-owner-heading span b { color: #aab6ae; }
.order-owner-heading > button { min-height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); color: #85938a; font-size: 8px; font-weight: 800; }
.order-owner-heading > button:hover { border-color: rgba(184,244,61,.24); color: var(--accent); }
.order-rows { display: grid; gap: 6px; }
.order-row { display: grid; grid-template-columns: 46px minmax(0,1fr) auto 27px; align-items: center; gap: 11px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.order-product-image { display: grid; width: 46px; height: 52px; overflow: hidden; place-items: center; border-radius: 9px; background: #1d2a23; color: var(--accent); font-family: Georgia,serif; font-size: 15px; }
.order-product-image img { width: 100%; height: 100%; object-fit: cover; }
.order-product-copy { display: grid; min-width: 0; gap: 3px; }
.order-product-copy b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.order-product-copy span, .order-product-copy small { color: #69766e; font-size: 8px; }
.order-product-copy small { color: #525e57; }
.order-quantity { display: flex; align-items: center; gap: 6px; }
.order-quantity button { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); color: #9aa69e; }
.order-quantity button:hover { border-color: rgba(184,244,61,.3); color: var(--accent); }
.order-quantity b { min-width: 45px; font-size: 9px; text-align: center; }
.order-remove { display: grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #68756d; font-size: 16px; }
.order-remove:hover { background: rgba(255,107,114,.08); color: var(--danger); }
.order-empty { display: grid; min-height: 260px; place-items: center; align-content: center; text-align: center; }
.order-empty > span { display: grid; width: 58px; height: 58px; place-items: center; border: 1px dashed rgba(184,244,61,.24); border-radius: 50%; color: var(--accent); font-size: 23px; }
.order-empty h3 { margin: 17px 0 6px; font-size: 15px; }
.order-empty p { margin: 0; color: #6f7c74; font-size: 9px; }
.client-orders-modal-card { width: min(1030px, 100%); }
.client-orders-layout { display: grid; grid-template-columns: minmax(330px, .82fr) minmax(380px, 1.18fr); gap: 20px; }
.client-order-builder { display: grid; align-content: start; gap: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.builder-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.builder-heading > div { display: flex; align-items: center; gap: 8px; }
.builder-heading span { font-size: 12px; font-weight: 850; }
.builder-heading b { padding: 5px 7px; border-radius: 6px; background: rgba(184,244,61,.1); color: var(--accent); font-size: 8px; }
.builder-heading small { color: #69766e; font-size: 8px; }
.client-order-builder > label, .client-product-picker label { display: grid; gap: 7px; color: #aeb8b1; font-size: 9px; font-weight: 750; }
.client-order-builder input, .client-order-builder select { width: 100%; min-width: 0; min-height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: rgba(255,255,255,.035); color: var(--ink); font-size: 10px; }
.client-order-builder input:focus, .client-order-builder select:focus { border-color: rgba(184,244,61,.36); box-shadow: 0 0 0 3px rgba(184,244,61,.06); }
.client-order-builder select option { background: #17201d; }
.client-product-picker { display: grid; grid-template-columns: minmax(0,1fr) 75px auto; align-items: end; gap: 7px; }
.client-product-picker .btn { min-height: 43px; padding: 0 12px; }
.client-order-draft { display: grid; gap: 6px; min-height: 54px; }
.draft-empty { display: grid; min-height: 54px; place-items: center; border: 1px dashed var(--line); border-radius: 10px; color: #657269; font-size: 8px; text-align: center; }
.draft-line { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.09); }
.draft-line > div:first-child { display: grid; gap: 3px; min-width: 0; }
.draft-line > div:first-child b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.draft-line > div:first-child span { color: #69766e; font-size: 7px; }
.draft-line > div:first-child strong { color: var(--accent); }
.draft-line-controls { display: flex; align-items: center; gap: 4px; }
.draft-line-controls button { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); color: #96a299; }
.draft-line-controls > b { min-width: 20px; font-size: 8px; text-align: center; }
.draft-line-controls .draft-remove { margin-left: 3px; border-color: rgba(255,107,114,.12); color: var(--danger); }
.client-order-total { display: flex; align-items: center; justify-content: space-between; padding: 13px 0 3px; border-top: 1px solid var(--line); }
.client-order-total span { color: #8a978f; font-size: 9px; font-weight: 750; }
.client-order-total strong { color: var(--accent); font-size: 24px; letter-spacing: -.04em; }
.client-orders-history { min-width: 0; }
.client-orders-list { display: grid; max-height: 610px; overflow: auto; gap: 9px; padding-right: 4px; }
.customer-order-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); transition: .2s; }
.customer-order-card.completed { opacity: .62; }
.customer-order-card > header { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; }
.customer-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: rgba(154,140,255,.12); color: #bdb5ff; font-size: 10px; font-weight: 900; }
.customer-order-card header > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.customer-order-card h3 { margin: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.customer-order-card header span { color: #657269; font-size: 7px; }
.customer-order-card header em { padding: 5px 7px; border-radius: 6px; background: rgba(255,180,92,.09); color: var(--orange); font-size: 7px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.customer-order-card.completed header em { background: rgba(184,244,61,.08); color: var(--accent); }
.customer-order-lines { display: grid; gap: 1px; padding: 0 12px; }
.customer-order-line { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.055); font-size: 8px; }
.customer-order-line span { overflow: hidden; color: #a7b2aa; text-overflow: ellipsis; white-space: nowrap; }
.customer-order-line b { color: #6e7b73; font-weight: 600; }
.customer-order-line strong { min-width: 43px; color: var(--ink); text-align: right; }
.customer-order-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; background: rgba(0,0,0,.1); }
.customer-order-card footer > strong { color: var(--accent); font-size: 17px; }
.customer-order-card footer > div { display: flex; gap: 5px; }
.customer-order-card footer button { min-height: 29px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); color: #8f9b93; font-size: 7px; font-weight: 800; }
.customer-order-card footer button:hover { border-color: rgba(184,244,61,.25); color: var(--accent); }
.customer-order-card footer button.danger:hover { border-color: rgba(255,107,114,.24); color: var(--danger); }
.empty-list { padding: 35px 15px; border: 1px dashed var(--line); border-radius: 12px; color: #69756d; font-size: 10px; text-align: center; }

.toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 2000; display: grid; width: min(370px, calc(100vw - 44px)); gap: 9px; }
.toast { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; min-height: 66px; padding: 12px; border: 1px solid rgba(184,244,61,.21); border-radius: 13px; background: #18231e; box-shadow: 0 15px 45px rgba(0,0,0,.4); animation: toast-in .35s both; }
.toast.leaving { animation: toast-out .3s both; }
.toast.error { border-color: rgba(255,107,114,.25); }
.toast-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: rgba(184,244,61,.1); color: var(--accent); font-size: 16px; font-weight: 900; }
.toast.error .toast-icon { background: rgba(255,107,114,.1); color: var(--danger); }
.toast div:nth-child(2) { display: grid; gap: 3px; }
.toast b { font-size: 10px; }
.toast span { color: #819087; font-size: 8px; line-height: 1.4; }
.toast button { border: 0; background: transparent; color: #6a776f; }
.sidebar-scrim { display: none; }
.reveal { animation: rise .65s both; }
.stats-grid { animation-delay: .08s; }
.inventory-section { animation-delay: .15s; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
@keyframes float { 50% { transform: translate3d(0, -18px, 0) scale(1.05); } }
@keyframes pulse { from { opacity: .8; transform: scale(.5); } to { opacity: 0; transform: scale(1.7); } }
@keyframes breathe { 50% { transform: scale(1.04); opacity: .75; } }
@keyframes scan-x { 0%,100% { transform: translateX(0); } 50% { transform: translateX(158px); } }
@keyframes scan-y { 0%,100% { top: 0; } 50% { top: calc(100% - 1px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(25px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(25px) scale(.96); } }

@media (max-width: 1180px) {
    .owner-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .toolbar { grid-template-columns: minmax(240px, 1fr) repeat(3, 150px); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
    .auth-panel { min-height: 100vh; padding: 28px 22px; }
    .mobile-brand { display: inline-flex; }
    .app-shell { display: block; }
    .sidebar { position: fixed; left: 0; transform: translateX(-100%); width: 260px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
    .sidebar.open { transform: translateX(0); box-shadow: 20px 0 70px rgba(0,0,0,.45); }
    .sidebar-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
    .sidebar-scrim.open { display: block; }
    .mobile-menu { display: grid; }
    .topbar { padding: 0 20px; }
    .topbar-title { display: none; }
    .page-content { padding: 35px 20px 70px; }
}

@media (max-width: 680px) {
    .topbar { height: 65px; }
    .date-chip { display: none; }
    .scan-cta { min-width: 44px; padding: 0 13px; }
    .scan-cta { font-size: 0; }
    .scan-cta .scan-corners { font-size: 19px; }
    .welcome-row { align-items: flex-start; }
    .welcome-actions { align-items: flex-end; flex-direction: column-reverse; }
    .btn-order { min-height: 38px; padding: 0 10px; font-size: 9px; }
    .welcome-row .btn-secondary { width: 43px; min-width: 43px; padding: 0; font-size: 0; }
    .welcome-row .btn-secondary span { font-size: 19px; }
    .welcome-row h1 { font-size: 35px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; margin: 28px 0 36px; }
    .stat-card { display: grid; grid-template-columns: 35px 1fr; min-height: 105px; padding: 14px; gap: 10px; }
    .stat-icon { width: 35px; height: 35px; font-size: 17px; }
    .stat-card > div:last-child { display: grid; grid-template-columns: 1fr; }
    .stat-card strong { font-size: 23px; }
    .stat-card small { display: none; }
    .toolbar { grid-template-columns: 1fr 1fr; }
    .search-box { grid-column: 1/-1; }
    .owner-products { grid-template-columns: 1fr; }
    .owner-products.list .product-main { display: flex; }
    .owner-products.list .product-meta { margin-top: 6px; }
    .owner-products.list .product-bottom { margin-top: auto; }
    .view-toggle { display: none; }
    .modal { align-items: end; padding: 0; }
    .modal-card { width: 100%; max-height: 93vh; padding: 25px 20px max(24px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; transform: translateY(35px); }
    .camera-shell { height: 260px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: auto; }
    .users-layout { grid-template-columns: 1fr; }
    .client-orders-layout { grid-template-columns: 1fr; }
    .client-orders-list { max-height: none; }
    .order-row { grid-template-columns: 42px 1fr auto; }
    .order-product-image { width: 42px; height: 48px; }
    .order-quantity { grid-column: 2; justify-self: start; }
    .order-remove { grid-column: 3; grid-row: 1/3; }
    .order-owner-heading { grid-template-columns: 34px 1fr; }
    .order-owner-heading > button { grid-column: 2; justify-self: start; }
    .wide-modal { max-height: 94vh; }
    .toast-stack { right: 13px; bottom: 13px; width: calc(100vw - 26px); }
}

@media (max-width: 410px) {
    .page-content { padding-right: 14px; padding-left: 14px; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { min-height: 84px; }
    .toolbar { grid-template-columns: 1fr; }
    .search-box { grid-column: auto; }
    .image-picker { grid-template-columns: 76px 1fr; }
    .image-preview { width: 76px; height: 76px; }
    .client-product-picker { grid-template-columns: 1fr 80px; }
    .client-product-picker .btn { grid-column: 1/-1; }
    .customer-order-card > header { grid-template-columns: 36px 1fr; }
    .customer-order-card header em { grid-column: 2; width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}