:root {
  --ink:#172b2a; --muted:#667672; --green:#176b61; --green-dark:#123f39;
  --mint:#e7f5f1; --page:#f2f4ef; --line:#dbe4df; --white:#fff; --danger:#96473b;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--page);
}
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; }
button,input { font:inherit; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
.topbar { position:sticky; z-index:20; top:0; display:flex; align-items:center; gap:12px; min-height:72px; padding:12px clamp(16px,4vw,42px); color:white; background:var(--green-dark); box-shadow:0 3px 16px #092c281f; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; color:var(--green-dark); background:#d9eee7; font-size:13px; font-weight:900; }
.brand-copy strong,.brand-copy span { display:block; }.brand-copy strong { font-size:17px; }.brand-copy span { margin-top:2px; color:#b9d1ca; font-size:11px; }
.top-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }.top-actions>button { display:flex; align-items:center; gap:6px; min-height:36px; padding:7px 10px; border:1px solid #ffffff2e; border-radius:9px; color:white; background:#ffffff12; font-size:11px; font-weight:750; }.top-action-icon { width:21px; height:21px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }.barcode-icon { width:24px; stroke-width:2.1; stroke-linecap:butt; }.save-state { display:flex; align-items:center; gap:8px; margin-left:5px; color:#cfe2dc; font-size:11px; font-weight:650; }.save-state i { width:8px; height:8px; border-radius:50%; background:#59d59c; box-shadow:0 0 0 4px #59d59c20; }
.intro { padding:28px clamp(18px,4vw,42px) 24px; border-bottom:1px solid var(--line); background:#fbfcfa; }
.intro p { margin:0 0 5px; color:var(--green); font-size:11px; font-weight:850; letter-spacing:.09em; }.intro h1 { margin:0; font-size:clamp(25px,3vw,34px); letter-spacing:-.035em; }.intro span { display:block; margin-top:7px; color:var(--muted); font-size:13px; }
.workspace { display:grid; grid-template-columns:minmax(300px,370px) minmax(520px,1fr); gap:24px; padding:24px clamp(18px,3vw,34px) 36px; }
.entry-card,.list-card { border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:0 8px 28px #173b3210; }
.entry-card { align-self:start; padding:22px; }
.card-heading { display:flex; gap:12px; align-items:center; margin-bottom:18px; }.step-number { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:white; background:var(--green); font-weight:850; }.card-heading h2,.card-heading p { margin:0; }.card-heading h2 { font-size:18px; }.card-heading p { margin-top:3px; color:var(--muted); font-size:11px; }
label { display:block; margin-top:14px; color:#344945; font-size:12px; font-weight:750; } label em { color:var(--muted); font-size:10px; font-style:normal; font-weight:500; }
input { width:100%; min-height:50px; margin-top:7px; padding:10px 12px; border:1px solid #cad7d2; border-radius:10px; color:var(--ink); background:white; outline:0; font-size:16px; }
input:focus { border-color:var(--green); box-shadow:0 0 0 4px #176b6118; }
.counter-label { margin-top:22px; color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.09em; text-align:center; }.counter-label span { display:block; margin-top:3px; font-size:9px; font-weight:550; letter-spacing:0; }
.counter { display:grid; grid-template-columns:1fr 112px 1fr; gap:11px; margin-top:7px; }.counter input { height:74px; margin:0; padding:8px; border-width:2px; font-size:32px; font-weight:850; text-align:center; }.count-button { height:74px; border:0; border-radius:14px; font-size:40px; line-height:1; }.minus { color:var(--green-dark); background:#e4ece8; }.plus { color:white; background:var(--green); box-shadow:0 8px 18px #176b6133; }.count-button:active { transform:translateY(1px); }
.quick-count { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:8px; }.quick-count button { min-height:38px; padding:6px; border:1px solid #cbd9d4; border-radius:9px; color:var(--green-dark); background:#f3f7f5; font-size:12px; font-weight:800; }.quick-count button:last-child { color:var(--muted); font-size:10px; }
.save-button { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:64px; margin-top:16px; padding:10px 18px; border:0; border-radius:12px; color:white; background:var(--green-dark); text-align:left; }.save-button span strong,.save-button span small { display:block; }.save-button span strong { font-size:16px; }.save-button span small { margin-top:2px; color:#bdd5ce; font-size:11px; }.save-button>b { font-size:27px; }
.cancel-edit { width:100%; min-height:38px; margin-top:8px; border:1px solid #cbd9d4; border-radius:9px; color:var(--muted); background:white; font-size:11px; font-weight:750; }.draft-tools { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }.draft-tools button { min-height:38px; padding:7px; border:1px solid #cfdbd6; border-radius:9px; color:var(--green-dark); background:#f5f8f6; font-size:10px; font-weight:750; }.draft-tools button:disabled { cursor:not-allowed; opacity:.42; }
.message { margin:10px 0 0; font-size:11px; line-height:1.45; }.message:empty { display:none; }.error { color:#ad3d31; }.success { color:var(--green); font-weight:700; }
.list-card { min-width:0; overflow:hidden; }.list-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:21px 22px 16px; }.list-heading p { margin:0 0 5px; color:var(--green); font-size:10px; font-weight:850; letter-spacing:.08em; }.list-heading h2 { margin:0; font-size:20px; }.list-heading-actions { display:flex; align-items:center; gap:9px; }.focus-button { min-height:38px; padding:8px 12px; border:1px solid #bad2cb; border-radius:9px; color:var(--green-dark); background:white; font-size:10px; font-weight:800; }.total { flex:none; min-width:96px; padding:10px 13px; border-radius:11px; background:var(--mint); text-align:right; }.total strong,.total span { display:block; }.total strong { color:var(--green-dark); font-size:23px; }.total span { color:var(--muted); font-size:9px; }
.toolbar { display:flex; gap:9px; padding:0 22px 15px; border-bottom:1px solid var(--line); }.search { position:relative; flex:1; margin:0; }.search span { position:absolute; left:-9999px; }.search input { min-height:40px; margin:0; font-size:13px; }.toolbar button,.import-button { display:grid; place-items:center; min-height:40px; margin:0; padding:8px 12px; border:1px solid #bad2cb; border-radius:9px; color:var(--green-dark); background:var(--mint); font-size:11px; font-weight:750; white-space:nowrap; }.import-button { cursor:pointer; }.import-button input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }.toolbar .clear-button { color:var(--danger); border-color:#e4c7c1; background:#fff5f2; }.toolbar button:disabled { cursor:not-allowed; opacity:.45; }
.list-filters { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 22px; border-bottom:1px solid var(--line); background:#fafcfb; }.filter-buttons { display:flex; gap:6px; }.filter-buttons button { min-height:34px; padding:6px 11px; border:1px solid #ccd9d4; border-radius:18px; color:var(--muted); background:white; font-size:10px; font-weight:800; }.filter-buttons button.active { color:white; border-color:var(--green); background:var(--green); }.list-filters>span { color:var(--muted); font-size:10px; font-weight:650; }
.items { max-height:calc(100vh - 270px); min-height:230px; overflow:auto; }.empty-state { display:grid; place-items:center; align-content:center; gap:7px; min-height:230px; padding:28px; color:var(--muted); text-align:center; }.empty-state div { display:grid; place-items:center; width:45px; height:45px; margin-bottom:3px; border-radius:13px; color:var(--green); background:var(--mint); font-size:24px; }.empty-state strong { color:var(--ink); }.empty-state span { font-size:12px; }
.item { display:grid; grid-template-columns:minmax(190px,1fr) auto auto; gap:16px; align-items:center; padding:17px 18px; border-bottom:1px solid var(--line); }.item:last-child { border-bottom:0; }.item:hover { background:#fafcfb; }.item.is-zero { background:#fffdf6; }.item-identity { display:flex; align-items:flex-start; gap:11px; min-width:0; }.item-number { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:11px; color:white; background:var(--green-dark); font-size:15px; font-weight:900; }.item-copy { min-width:0; flex:1; }.item-copy>span:not(.previous-quantity),.item-copy>strong,.item-copy>small { display:block; }.item-copy>span:first-child { color:var(--green); font-size:11px; font-weight:850; letter-spacing:.05em; }.item-copy>strong { margin-top:3px; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.item-copy>small { margin-top:4px; color:var(--muted); font-size:10px; }.previous-quantity { display:inline-flex; align-items:center; gap:8px; width:max-content; max-width:100%; margin-top:8px; padding:5px 8px; border:1px solid #d8e2de; border-radius:8px; color:var(--muted); background:#f4f7f5; }.previous-quantity small { font-size:9px; }.previous-quantity b { color:var(--green-dark); font-size:13px; }
.row-counting { display:grid; gap:6px; min-width:230px; }.row-counter { display:grid; grid-template-columns:46px 1fr 46px; align-items:center; overflow:hidden; border:1px solid #cbd9d4; border-radius:10px; }.row-counter button { height:43px; border:0; color:var(--green-dark); background:#eef5f2; font-size:22px; font-weight:750; }.row-counter button:last-child { color:white; background:var(--green); }.row-counter output { min-width:62px; font-size:20px; font-weight:900; text-align:center; }.row-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }.row-quick button { min-height:31px; padding:4px; border:1px solid #cad7d2; border-radius:7px; color:var(--green-dark); background:white; font-size:10px; font-weight:850; }.row-quick .plus-ten { color:white; border-color:var(--green); background:var(--green); }.row-quick button:last-child { color:var(--muted); }.item-actions { display:grid; gap:6px; }.complete,.edit,.delete,.unlock { min-width:64px; height:35px; border:0; border-radius:9px; font-size:10px; font-weight:800; }.complete { color:white; background:var(--green-dark); }.edit { padding-inline:8px; color:var(--green-dark); background:var(--mint); }.delete { color:var(--danger); background:#fff1ee; font-size:18px; }.completed-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 18px; color:#e5f3ee; background:var(--green-dark); }.completed-heading>div { display:flex; align-items:center; gap:8px; }.completed-heading span { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; color:var(--green-dark); background:#9de2c1; }.completed-heading strong { font-size:12px; }.completed-heading small { color:#bcd5ce; font-size:10px; }.counted-item { background:#edf4f1; opacity:.9; }.counted-item .item-number { color:var(--green-dark); background:#c6ded6; }.locked-count { min-width:140px; padding:9px 12px; border-radius:10px; background:white; text-align:right; }.locked-count>span,.locked-count>strong,.locked-count>small { display:block; }.locked-count>span { color:var(--muted); font-size:9px; }.locked-count>strong { margin-top:2px; font-size:21px; }.locked-count .difference { margin-top:3px; color:var(--green); font-size:9px; }.counted-actions>span { color:var(--muted); font-size:9px; text-align:center; }.unlock { color:var(--green-dark); border:1px solid #bad2cb; background:white; }.item.highlighted { animation:highlight-row 1.8s ease-out; } @keyframes highlight-row { 0%,35% { box-shadow:inset 0 0 0 3px #e4aa2d; background:#fff6d9; } }
body.list-focus .workspace { grid-template-columns:1fr; max-width:1180px; margin-inline:auto; } body.list-focus .entry-card { display:none; } body.list-focus .list-card { box-shadow:0 10px 35px #173b3218; }
.app-dialog { width:min(520px,calc(100% - 24px)); padding:0; overflow:hidden; border:0; border-radius:17px; color:var(--ink); background:white; box-shadow:0 22px 70px #0b27224d; }.app-dialog::backdrop { background:#102c2985; backdrop-filter:blur(3px); }.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 20px; border-bottom:1px solid var(--line); }.dialog-heading p,.dialog-heading h2 { margin:0; }.dialog-heading p { margin-bottom:3px; color:var(--green); font-size:9px; font-weight:850; letter-spacing:.09em; }.dialog-heading h2 { font-size:20px; }.dialog-heading>button { width:37px; height:37px; border:0; border-radius:10px; color:var(--muted); background:#eef3f0; font-size:22px; }.scanner-view { position:relative; min-height:270px; background:#102421; }.scanner-view video { display:block; width:100%; height:300px; object-fit:cover; }.scan-frame { position:absolute; inset:50% auto auto 50%; width:78%; height:112px; border:3px solid #7df1b5; border-radius:13px; transform:translate(-50%,-50%); box-shadow:0 0 0 999px #081c184f; }.dialog-status { min-height:18px; margin:16px 20px 0; color:var(--green-dark); font-size:13px; font-weight:750; }.dialog-help { margin:8px 20px 20px; color:var(--muted); font-size:11px; line-height:1.5; }.voice-examples { display:grid; gap:7px; padding:17px 20px 0; }.voice-examples span { padding:9px 11px; border-radius:9px; color:var(--green-dark); background:var(--mint); font-size:11px; }.listen-button,.interpret-button { width:calc(100% - 40px); min-height:46px; margin:14px 20px 0; border:0; border-radius:10px; color:white; background:var(--green); font-weight:800; }.listen-button.listening { background:#a34234; }.voice-input { margin:15px 20px 0; }.voice-input input { margin-top:6px; }.interpret-button { margin-top:9px; margin-bottom:2px; color:var(--green-dark); border:1px solid #bad2cb; background:var(--mint); }.voice-dialog .dialog-status { margin-bottom:20px; }
.scanner-manual { display:grid; grid-template-columns:1fr auto; gap:8px; margin:11px 20px 0; }.scanner-manual input { min-height:43px; margin:0; }.scanner-manual button { padding:8px 15px; border:0; border-radius:9px; color:white; background:var(--green); font-weight:800; }

.photo-counter-dialog { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; overflow:hidden; border:0; color:white; background:#07110f; }.photo-counter-dialog::backdrop { background:#07110f; }.photo-counter-dialog [hidden] { display:none !important; }.photo-counter-header { position:absolute; z-index:5; inset:0 0 auto; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; min-height:68px; padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left)); background:linear-gradient(#07110fee,#07110fb8 75%,transparent); }.photo-icon-button { width:44px; height:44px; border:0; border-radius:13px; color:white; background:#ffffff1c; font-size:28px; }.photo-counter-title { display:grid; min-width:0; }.photo-counter-title small { color:#92cdb9; font-size:9px; font-weight:850; letter-spacing:.1em; }.photo-counter-title strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.photo-counter-header output { display:grid; place-items:center; min-width:55px; height:48px; padding:0 12px; border-radius:14px; color:#08251e; background:#7df1b5; font-size:25px; font-weight:950; }.photo-empty { display:grid; place-items:center; align-content:center; gap:12px; min-height:100%; padding:90px 24px 110px; text-align:center; }.photo-empty-icon { display:grid; place-items:center; width:74px; height:74px; border:1px solid #7df1b54d; border-radius:24px; color:#7df1b5; background:#7df1b512; font-size:42px; }.photo-empty h2,.photo-empty p { margin:0; }.photo-empty p { max-width:370px; color:#bad0c9; font-size:14px; line-height:1.55; }.photo-empty>small { max-width:390px; color:#78968c; font-size:10px; }.photo-pick-button { display:grid; place-items:center; min-width:210px; min-height:52px; margin:8px 0 0; border-radius:13px; color:#08251e; background:#7df1b5; font-size:14px; font-weight:900; cursor:pointer; }.photo-pick-button input,.photo-change-button input { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }.photo-workspace { width:100%; height:100%; }.photo-scroller { display:flex; align-items:center; width:100%; height:100%; padding:76px 10px 126px; overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y; }.photo-canvas { position:relative; flex:none; margin:auto; user-select:none; -webkit-user-select:none; }.photo-canvas img { display:block; width:100%; height:auto; -webkit-user-drag:none; touch-action:pan-x pan-y; }.photo-markers { position:absolute; inset:0; pointer-events:none; }.photo-marker { position:absolute; display:grid; place-items:center; width:26px; height:26px; border:2px solid white; border-radius:50%; color:white; background:#c94231; box-shadow:0 2px 7px #000b; font-size:11px; font-weight:950; transform:translate(-50%,-50%); }.photo-help { position:absolute; z-index:4; right:12px; bottom:100px; left:12px; color:#c2d5cf; font-size:10px; text-align:center; pointer-events:none; text-shadow:0 1px 4px #000; }.photo-counter-tools { position:absolute; z-index:5; inset:auto 0 0; display:flex; align-items:center; gap:8px; min-height:88px; padding:10px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:linear-gradient(transparent,#07110fd9 18%,#07110f); }.photo-counter-tools button,.photo-change-button { min-height:43px; padding:8px 12px; border:1px solid #ffffff2b; border-radius:11px; color:white; background:#ffffff12; font-size:11px; font-weight:800; white-space:nowrap; }.photo-tool-group { display:flex; gap:6px; }.photo-zoom { align-items:center; }.photo-zoom button { width:40px; padding:0; font-size:20px; }.photo-zoom span { min-width:40px; color:#b7cbc4; font-size:10px; text-align:center; }.photo-change-button { display:grid; place-items:center; cursor:pointer; }.photo-use-button { flex:1; border-color:#7df1b5 !important; color:#08251e !important; background:#7df1b5 !important; font-size:13px !important; }.photo-counter-tools button:disabled { cursor:not-allowed; opacity:.35; }.item-actions .photo-row { min-width:64px; height:35px; padding:0 7px; border:1px solid #bad2cb; border-radius:9px; color:var(--green-dark); background:white; font-size:10px; font-weight:800; }

@media (max-width:950px) { .workspace { grid-template-columns:1fr; max-width:760px; margin:auto; }.items { max-height:none; }.intro { text-align:center; } }
@media (max-width:620px) { .toolbar { display:grid; grid-template-columns:repeat(3,1fr); }.search { grid-column:1/-1; }.toolbar button,.import-button { white-space:normal; text-align:center; } }
@media (max-width:620px) { .list-filters { align-items:flex-start; flex-direction:column; padding-inline:15px; }.list-heading-actions { gap:6px; }.focus-button { padding-inline:9px; }.item { grid-template-columns:1fr auto; gap:12px; padding:16px 15px; }.item-identity { grid-column:1/-1; }.item-copy strong { white-space:normal; }.row-counting { min-width:0; width:100%; }.item-actions { align-self:end; }.locked-count { justify-self:start; text-align:left; }.top-actions>button span { display:none; } }
@media (max-width:520px) { .topbar { min-height:64px; padding:10px 14px; }.brand-mark { width:40px; height:40px; }.save-state span { display:none; }.intro { padding:20px 17px; }.intro h1 { font-size:26px; }.workspace { padding:13px 11px 24px; gap:13px; }.entry-card { padding:17px 15px; }.counter { grid-template-columns:1fr 100px 1fr; gap:8px; }.counter input,.count-button { height:68px; }.list-heading { align-items:flex-start; padding:18px 15px 13px; }.list-heading h2 { font-size:17px; }.list-heading-actions { flex-direction:column-reverse; align-items:flex-end; }.toolbar { padding:0 15px 13px; }.row-counter button { height:47px; }.row-counter output { font-size:22px; }.row-quick button { min-height:36px; } }
@media (max-width:720px) { .photo-counter-tools { display:grid; grid-template-columns:auto 1fr; }.photo-tool-group { grid-row:1; }.photo-zoom { justify-self:end; }.photo-change-button { grid-column:1; }.photo-use-button { grid-column:2; }.photo-scroller { padding-bottom:145px; }.photo-help { bottom:135px; } }
@media (max-width:430px) { .top-actions { gap:4px; }.top-actions>button { padding-inline:9px; }.photo-counter-tools button,.photo-change-button { padding-inline:9px; }.photo-tool-group:first-child button { font-size:10px; }.photo-change-button { font-size:10px; } }
@media (prefers-reduced-motion:no-preference) { .entry-card,.list-card { animation:rise .22s ease-out; } @keyframes rise { from { opacity:.5; transform:translateY(4px); } } }

/* Det faktiska filfältet täcker knappen för säkrare kameraöppning i mobilwebbläsare. */
.photo-pick-button,.photo-change-button { position:relative; overflow:hidden; }
.photo-pick-button input,.photo-change-button input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; clip:auto; cursor:pointer; }