:root {
	--ink: #191919;
	--ink-soft: #383633;
	--paper: #f6f5f4;
	--surface: #fff;
	--line: rgba(0,0,0,.1);
	--text: rgba(0,0,0,.95);
	--muted: #a39e98;
	--rust: #0075de;
	--rust-pale: rgba(0,117,222,.08);
	--sage: #615d59;
	--success: #2a9d99;
	--danger: #dd5b00;
	--warning: #dd5b00;
	--radius-box: 3px;
	--radius-field: 3px;
	--radius-selector: 3px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 3px !important; }
body { margin: 0; min-height: 100vh; background: #ebe9e7; color: var(--text); font: 14px/1.5 Inter,-apple-system,system-ui,"Segoe UI",sans-serif; }
h1, h2, p { margin-top: 0; }
h1, h2 { color: inherit; letter-spacing: -.025em; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: progress; }

/* Header */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(100%,440px); height: 74px; margin: 0 auto; padding: max(10px,env(safe-area-inset-top)) 15px 10px; border-bottom: 1px solid var(--line); background: #fff; color: var(--text); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; background: #0075de; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.topbar h1 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; }
.sub { margin: 2px 0 0; color: #615d59; font-size: 10px; }
.topbar-right { margin-left: auto; }
.badge { max-width: 132px; padding: 5px 7px; overflow: hidden; border: 1px solid var(--line); background: #f6f5f4; color: #615d59; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.badge-success { border-color: rgba(42,157,153,.25); background: rgba(42,157,153,.08); color: #237b78; }

/* Persistent mobile navigation */
.bottom-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: min(100%,440px); margin: 0 auto; padding: 8px 10px max(8px,env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #ffffffed; box-shadow: 0 -3px 12px rgba(0,0,0,.025); backdrop-filter: blur(14px); }
.nav-item { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 53px; padding: 4px 2px; border: 0; background: transparent; color: #a39e98; transition: color .15s ease,background .15s ease; }
.nav-item svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item small { font-size: 9px; font-weight: 650; letter-spacing: .01em; }
.nav-item.active { color: var(--ink); }
.nav-item.active svg { color: var(--rust); }
.nav-item:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; }

/* Phone canvas and page views */
.app-main { width: min(100%,440px); max-width: 440px; min-height: calc(100dvh - 74px); margin: 0 auto; padding: 20px 14px calc(98px + env(safe-area-inset-bottom)); background: var(--paper); }
.view { display: none; }
.view.active { display: block; }
#view-settings.active { display: grid; gap: 14px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 1px 0 17px; }
.section-heading h2 { margin: 0; font-size: 23px; font-weight: 760; }
.eyebrow { margin: 0 0 4px; color: #a39e98; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.date-field { display: grid; gap: 4px; color: var(--muted); font-size: 9px; }
.date-field .input { width: 140px; min-height: 38px; padding: 0 8px; font-size: 11px; }

/* DaisyUI cards, forms, and buttons with NWY theme */
.cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.cards .card { display: block; min-height: 112px; padding: 13px 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.025); }
.cards .card:nth-child(n+5) { grid-column: 1/-1; min-height: auto; }
.card .label { color: #85847d; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.card .value { margin-top: 8px; color: var(--ink); font-size: 27px; font-weight: 760; letter-spacing: -.04em; line-height: 1.05; }
.card .sub2 { margin-top: 6px; color: #7c827c; font-size: 10px; line-height: 1.45; }
.panel { padding: 17px 15px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.025); }
.panel h2 { margin: 0 0 16px; color: var(--ink); font-size: 17px; font-weight: 750; }
.field { display: block; margin-bottom: 15px; }
.field > span { display: block; margin: 0 0 7px 1px; color: #687178; font-size: 10px; font-weight: 760; letter-spacing: .045em; }
.field > span b { color: var(--rust); }
.field > span em { color: #9a958b; font-style: normal; font-weight: 500; }
.input, .select { width: 100%; min-height: 46px; padding: 0 11px; border: 1px solid #d9d8d0; background: #fff; color: var(--text); font-size: 14px; box-shadow: none; }
.input::placeholder { color: #a6a69f; }
.input:focus, .select:focus { border-color: #0075de; outline: 0; box-shadow: 0 0 0 3px rgba(0,117,222,.08); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.btn { min-height: 44px; padding: 0 14px; border: 1px solid transparent; font-size: 12px; font-weight: 720; box-shadow: none; }
.btn-primary { border-color: #0075de; background: #0075de; color: #fff; }
.btn-primary:hover { border-color: #097fe8; background: #097fe8; }
.btn-outline { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-outline:hover { border-color: rgba(0,0,0,.15); background: #f6f5f4; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-error { border-color: #ead1cd; background: #f8e9e6; color: var(--danger); }
.w-full { width: 100%; }
#submit-btn { min-height: 48px; margin-top: 4px; }
.pic-value { min-height: 43px; padding: 10px 11px; border: 1px solid var(--line); background: #f6f5f4; color: var(--ink); font-weight: 600; }
.hint { margin: 0 0 14px; color: #787e7c; font-size: 11px; line-height: 1.55; }
.msg { min-height: 18px; margin: 9px 0 0; font-size: 12px; line-height: 1.45; }
.msg.ok { color: var(--success); }
.msg.err { color: var(--danger); }
.muted { color: var(--muted); font-size: 12px; font-weight: 450; }

.entry-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: -3px 0 17px; padding: 4px; background: #f1f0ee; }
.entry-mode { min-height: 38px; border: 0; background: transparent; color: #77736e; font-size: 11px; font-weight: 700; }
.entry-mode.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px #00000010; }
.print-option { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 12px; border: 1px solid var(--line); background: #faf9f8; color: var(--ink-soft); font-size: 11px; font-weight: 650; }
.print-option input { width: 18px; height: 18px; accent-color: #0075de; }
.print-option input:disabled { opacity: 1; }
.stock-summary { margin: -8px 0 12px; color: #77736e; font-size: 11px; }
.stock-list { display: grid; gap: 9px; }
.stock-card { padding: 13px; border: 1px solid var(--line); background: #fff; box-shadow: 0 2px 8px #26343d08; }
.stock-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stock-card-top strong { color: var(--ink); font-size: 14px; }
.stock-qty { flex: 0 0 auto; color: #187a6e; font-size: 16px; font-weight: 760; }
.stock-batch { margin-top: 4px; color: #6e6a65; font: 10px ui-monospace,monospace; }
.stock-meta { margin-top: 7px; color: #85817b; font-size: 10px; }
.stock-actions { display: grid; grid-template-columns: 3fr repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.stock-actions .btn { min-width: 0; min-height: 56px; padding: 5px 2px; font-size: 8px; }
.stock-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; line-height: 1.15; text-align: center; }
.stock-action svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stock-action span { max-width: 100%; overflow-wrap: anywhere; }
.stock-actions .stock-action-main { flex-direction: row; gap: 7px; font-size: 12px; font-weight: 650; }
.stock-actions .stock-action-main svg { width: 18px; height: 18px; }
.stock-remove-btn { border-color: #efcfca; color: #a7483d; }
.stock-adjust-batch { margin: -4px 0 14px; padding: 10px; border: 1px solid var(--line); background: #f8f7f5; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.event-type { display: block !important; width: max-content !important; padding: 3px 6px !important; background: #f1f0ee; color: #5c5955 !important; font-size: 9px !important; font-weight: 750; letter-spacing: .04em; }
#table tr.mutation .event-type { background: #eaf4f1; color: #25796d !important; }
#table tr.stock_adjustment .event-type { background: #fff0ed; color: #b34c40 !important; }
#table td.event-detail, #table td.event-expiry { display: block; color: #77736e; font-size: 10px; }
#table td.event-qty { color: #2b8174; font-weight: 750; }
#table tr.mutation td.event-qty { color: #b35a43; }
#table tr.stock_adjustment td.event-qty { color: #b35a43; }

/* Production history */
.table-wrap { overflow: visible; }
#table, #table thead, #table tbody, #table tr, #table td { display: block; width: 100%; }
#table thead { display: none; }
#table tbody { display: grid; gap: 9px; }
#table tr { padding: 12px 11px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 2px 8px #26343d09; }
#table td { display: inline-block; width: auto; padding: 2px 6px 2px 0; border: 0; color: #687178; font-size: 11px; white-space: normal; }
#table td:nth-child(2) { display: block; padding-bottom: 4px; color: var(--ink); font-size: 14px; font-weight: 740; }
#table td:nth-child(3) { color: #a46a48; font-family: ui-monospace,monospace; font-size: 10px; }
#table td:nth-child(6) { color: #78877c; }
#table td:last-child { display: block; width: 100%; padding-top: 8px; }
.row-actions { display: flex; gap: 6px; padding-top: 4px; }
.row-actions .btn { flex: 1; min-height: 36px; padding-inline: 8px; font-size: 10px; }
.empty { padding: 32px 14px; border: 1px dashed #d1c9ba; color: #83857e; font-size: 12px; text-align: center; }

/* Settings and administration */
.printer-panel { margin: 0; }
.printer-panel h2 { margin-bottom: 9px; }
.printer-state { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; }
.printer-icon { display: grid; flex: 0 0 46px; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); background: #f6f5f4; color: #615d59; }
.printer-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.printer-state strong { color: var(--ink); font-size: 14px; }
.printer-state p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.printer-panel .hint { margin-bottom: 13px; }
.secondary-btn { border-color: #d5d4cd; background: #f8f6f0; color: var(--ink); }
.printer-help { margin: 7px 0 0; color: var(--warning); font-size: 11px; }
.admin-settings { display: grid; gap: 11px; }
.admin-settings[hidden] { display: none; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; padding: 6px 1px 0; }
.settings-heading h2 { margin: 0; color: var(--ink); font-size: 18px; }
.settings-heading .badge { background: #f6f5f4; border-color: var(--line); color: #615d59; }
.settings-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.settings-action { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 84px; padding: 11px 9px; border: 1px solid var(--line); background: var(--surface); text-align: left; box-shadow: 0 3px 10px #26343d08; }
.settings-action:hover { border-color: #c8b7a4; background: #fffaf2; }
.settings-action-icon { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; background: #f6f5f4; color: #615d59; }
.settings-action-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-action .crew-icon { background: #f6f5f4; color: #615d59; }
.settings-action-copy { display: grid; min-width: 0; gap: 3px; }
.settings-action-copy strong { overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.settings-action-copy small { color: #85877f; font-size: 9px; line-height: 1.35; }
.settings-action-arrow { margin-left: auto; color: #a8a69d; font-size: 20px; }
.settings-list { border: 1px solid var(--line); background: var(--surface); box-shadow: none; }
.settings-list > summary { position: relative; min-height: 46px; padding: 13px 38px 11px 13px; color: var(--ink-soft); font-size: 11px; font-weight: 680; list-style: none; cursor: pointer; }
.settings-list > summary::-webkit-details-marker { display: none; }
.settings-list > summary::after { position: absolute; top: 17px; right: 17px; width: 8px; height: 8px; border-right: 1.5px solid #817d76; border-bottom: 1.5px solid #817d76; content: ""; transform: rotate(45deg); transition: transform .18s ease; }
.settings-list[open] > summary::after { top: 21px; transform: rotate(225deg); }
.settings-list > .collapse-content { padding: 0 13px 12px; }
.manage-list { display: grid; gap: 2px; }
.manage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 6px 0; border-bottom: 1px solid #eee9df; color: #5f6765; font-size: 10px; }
.manage-row span { overflow-wrap: anywhere; }
.manage-row .btn { min-height: 31px; padding-inline: 8px; font-size: 9px; }
#logout-btn { width: 100%; margin-top: 3px; }

/* Entry and add-crew/item dialogs */
.admin-dialog { width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 14px; border: 0; background: transparent; color: var(--text); }
.admin-dialog.dialog-fallback-open { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); }
.admin-dialog::backdrop { background: #18232bb5; backdrop-filter: blur(3px); }
.admin-dialog .modal-box { width: min(100%,410px); max-height: min(92dvh,740px); margin: auto; padding: 20px 17px 16px; overflow-y: auto; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 20px 60px #16222b42; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.modal-heading h2 { margin: 0; color: var(--ink); font-size: 19px; font-weight: 760; }
.modal-heading .eyebrow { color: #98785e; }
.modal-close { flex: 0 0 34px; min-height: 34px; width: 34px; padding: 0; font-size: 20px; }
.modal-actions { display: flex; gap: 8px; margin-top: 15px; }
.modal-actions .btn { flex: 1; }

/* Login */
.auth-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow-y: auto; padding: 24px 18px; background: #f6f5f4; }
.auth-screen.hidden { display: none; }
.auth-shell { width: min(100%,390px); }
.auth-brand { display: flex; align-items: center; gap: 11px; margin: 0 0 17px 2px; }
.auth-brand .logo { width: 44px; height: 44px; background: #fff; color: var(--text); }
.auth-brand div { display: grid; gap: 1px; }
.auth-brand strong { color: var(--ink); font-size: 12px; letter-spacing: .12em; }
.auth-brand div span { color: #777a77; font-size: 9px; letter-spacing: .15em; }
.auth-brand i { margin-left: auto; padding: 6px 8px; border: 1px solid #d9c9b5; color: #876849; font-size: 7px; font-style: normal; font-weight: 750; letter-spacing: .06em; white-space: nowrap; }
.auth-card { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 24px 23px; border: 1px solid #e4dacb; background: var(--surface); box-shadow: 0 18px 50px #26343d17; }
.auth-card .eyebrow { color: var(--rust); }
.auth-description { margin: 7px 0 21px; color: var(--muted); font-size: 12px; }
.auth-field { display: block; margin-bottom: 14px; }
.auth-field > span { display: block; margin: 0 0 6px 1px; color: #687178; font-size: 10px; font-weight: 760; }
.auth-field .input { min-height: 47px; font-size: 13px; }
.auth-card .btn { min-height: 47px; margin-top: 2px; }
.auth-card .msg { min-height: 0; margin: 0; }
.auth-card .msg:empty { display: none; }
.auth-card-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #eee8de; color: #88877e; font-size: 9px; }
.status-dot { width: 6px; height: 6px; background: #64896f; }
.auth-footer { margin: 15px 0 0; color: #83837b; font-size: 9px; text-align: center; }

/* Existing-label preview dialog */
.preview-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: #19252db8; }
.preview-modal.hidden { display: none; }
.preview-box { width: min(100%,620px); max-height: 90dvh; padding: 14px; overflow: auto; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 18px 50px #0f171d44; }
.preview-box header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; color: var(--ink); font-size: 12px; }
.preview-box img { display: block; width: 100%; border: 1px solid var(--line); background: #fff; }
.preview-box footer { margin-top: 12px; text-align: right; }
.preview-box .icon-btn { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); background: #f6f2e9; color: var(--ink); }

@media (min-width: 481px) { .app-main { box-shadow: 0 8px 24px rgba(0,0,0,.04); } }

/* Notion-inspired mobile workspace refinement */
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo { overflow: hidden; padding: 3px; border: 1px solid var(--line); background: #fff; }
.logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.topbar { width: min(100%,480px); height: 68px; padding-inline: 18px; }
.brand { gap: 11px; }
.logo { flex-basis: 38px; width: 38px; height: 38px; }
.topbar h1 { font-size: 14px; letter-spacing: -.02em; }
.sub { font-size: 10px; }
.app-main { width: min(100%,480px); max-width: 480px; min-height: calc(100dvh - 68px); padding: 25px 18px calc(104px + env(safe-area-inset-bottom)); }
.bottom-nav { width: min(100%,480px); padding: 7px 13px max(8px,env(safe-area-inset-bottom)); }
.nav-item { position: relative; gap: 4px; min-height: 57px; color: #8b8782; }
.nav-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-item small { font-size: 10px; font-weight: 500; }
.nav-item.active { color: #0075de; }
.nav-item.active::before { position: absolute; top: -7px; width: 25px; height: 2px; background: #0075de; content: ""; }
.nav-item:hover { color: #0075de; }
.section-heading { align-items: flex-end; margin: 2px 0 20px; }
.section-heading h2 { font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
#stock-refresh { min-height: 40px; }
.eyebrow { font-size: 9px; letter-spacing: .13em; }
.date-field { gap: 5px; color: #615d59; font-size: 10px; font-weight: 500; }
.date-field > span:not(.sr-only) { display: flex; align-items: center; gap: 4px; }
.date-field > span:not(.sr-only) svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.date-field .input { width: 148px; min-height: 40px; padding-inline: 9px; border-color: var(--line); background: #fff; font-size: 11px; }
.cards { gap: 10px; }
.cards .metric-card:nth-child(3) { grid-column: 1/-1; min-height: 98px; }
.cards .metric-card { min-height: 124px; padding: 13px 13px 12px; border-color: var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.025); }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.metric-head .label { color: #77726d; font-size: 9px; font-weight: 600; letter-spacing: .07em; }
.metric-icon { display: grid; width: 28px; height: 28px; place-items: center; color: #77726d; }
.metric-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.metric-card .value { margin-top: 8px; font-size: 28px; font-weight: 650; letter-spacing: -.045em; }
.metric-card .sub2 { margin-top: 4px; color: #8a8580; font-size: 10px; }
.panel { padding: 20px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.025); }
.panel h2 { margin-bottom: 19px; font-size: 20px; font-weight: 700; letter-spacing: -.035em; }
.field { margin-bottom: 16px; }
.field > span { margin-bottom: 6px; color: #615d59; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.input, .select { min-height: 46px; padding-inline: 12px; border-color: var(--line); font-size: 14px; }
.row { gap: 12px; }
.form-section { margin: 0; padding: 0 0 18px; }
.form-section + .form-section { padding: 18px 0; border-top: 1px solid rgba(0,0,0,.1); }
.form-section:last-of-type { padding-bottom: 0; }
.form-section > .field:last-child { margin-bottom: 0; }
.form-section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.form-section-heading > span { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); color: #615d59; font-size: 10px; font-weight: 600; }
.form-section-heading > div { display: grid; gap: 2px; padding-top: 1px; }
.form-section-heading strong { font-size: 12px; font-weight: 600; }
.form-section-heading small { color: #8a8580; font-size: 10px; }
.auto-batch { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); background: #f6f5f4; color: #77726d; font-size: 12px; }
.auto-batch svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: #615d59; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.expiry-warning { display: flex; align-items: flex-start; gap: 10px; margin: 3px 0 17px; padding: 12px 11px; border: 1px solid rgba(221,91,0,.25); border-left: 3px solid #dd5b00; background: #fff7f0; color: #733b17; }
.expiry-warning > svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; fill: none; stroke: #c75100; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.expiry-copy { display: grid; gap: 3px; }
.expiry-copy strong { color: #733b17; font-size: 14px; font-weight: 750; line-height: 1.35; }
.expiry-copy small { color: #733b17; font-size: 12px; font-weight: 650; line-height: 1.5; }
.search-control { position: relative; }
.search-control > svg { position: absolute; z-index: 1; top: 50%; left: 12px; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: #8a8580; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.search-control .input { padding-left: 38px; }
.btn { min-height: 44px; font-size: 13px; font-weight: 550; }
#submit-btn { min-height: 50px; font-size: 14px; font-weight: 600; }
.printer-panel, #view-settings .panel { padding: 19px 16px; }
.settings-actions { gap: 10px; }
.settings-action { min-height: 92px; gap: 10px; padding: 12px 10px; box-shadow: 0 1px 3px rgba(0,0,0,.025); }
.settings-action:hover { border-color: rgba(0,0,0,.2); background: #fff; }
.settings-action-icon { flex-basis: 34px; width: 34px; height: 34px; }
.settings-action-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-action-copy strong { font-size: 11px; font-weight: 600; }
.settings-action-copy small { font-size: 10px; }
.settings-action-arrow { width: 15px; height: 15px; flex: 0 0 15px; }
.settings-action-arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.row-actions { gap: 5px; }
.row-actions .btn { gap: 5px; min-height: 38px; font-size: 10px; }
.row-actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:focus-visible, .btn:focus-visible { outline: 2px solid rgba(0,117,222,.45); outline-offset: 2px; }
.modal-heading { margin-bottom: 22px; }
.admin-dialog .modal-box { padding: 22px 18px 18px; box-shadow: 0 12px 36px rgba(0,0,0,.12); }
.admin-dialog::backdrop { background: rgba(0,0,0,.4); backdrop-filter: blur(2px); }
.modal-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cards .card .label { color: #77726d; }
.cards .card .sub2 { color: #8a8580; }
.field > span { color: #615d59; }
.hint, .muted { color: #77726d; }
.input::placeholder { color: #a39e98; }
.settings-action-copy small, .settings-action-arrow { color: #8a8580; }
.search-help, .item-empty { padding: 10px 12px; color: #77726d; font-size: 11px; }
.search-result { display: grid; grid-template-columns: minmax(0,1fr) auto 17px; align-items: center; gap: 9px; width: 100%; min-height: 54px; padding: 8px 10px; border: 0; border-bottom: 1px solid rgba(0,0,0,.08); background: #fff; color: var(--text); text-align: left; }
.search-result:first-child { border-top: 1px solid rgba(0,0,0,.08); }
.search-result:hover, .search-result:focus-visible { background: #f6f5f4; }
.search-result-name { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 550; }
.search-result-meta { color: #8a8580; font-size: 10px; white-space: nowrap; }
.search-result-arrow { width: 16px; height: 16px; fill: none; stroke: #a39e98; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.date-error { margin: 6px 0 0; color: #b04700; font-size: 10px; line-height: 1.4; }
.date-error.hidden { display: none; }
#view-history .section-heading { margin-bottom: 16px; }
#view-history .panel h2 { margin-bottom: 16px; }
.app-main { padding-top: 21px; }
.panel { padding: 18px 15px; }
.cards .metric-card { min-height: 116px; }
.cards .metric-card:nth-child(3) { min-height: 90px; }

@media (max-width: 360px) {
	.app-main { padding-inline: 14px; }
	.settings-action { gap: 7px; padding-inline: 7px; }
	.settings-action-icon { flex-basis: 29px; width: 29px; height: 29px; }
	.row-actions .btn { padding-inline: 5px; }
}

/* Form refinements: colored steps, compact production identity, and print controls */
.form-section-heading > span { border-color: #bfd8ee; background: #eaf4fc; color: #1d72b8; font-weight: 800; }
.unit-readonly { background: #f5f5f3; color: #615d59; font-weight: 700; }
.production-pic { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin: -7px 1px 10px; color: #92908a; font-size: 9px; }
.production-pic strong { color: #615d59; font-size: 10px; font-weight: 650; }
.batch-result { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 13px; padding: 9px 11px; border: 1px solid #c9e1d8; background: #f0f8f4; color: #537d6c; font-size: 10px; }
.batch-result strong { color: #236e57; font: 700 12px ui-monospace,monospace; letter-spacing: .04em; }
.login-brand { display: grid; justify-items: center; gap: 2px; margin-bottom: 3px; text-align: center; }
.login-brand strong { color: var(--ink); font-size: 17px; font-weight: 760; }
.login-brand span { color: #77736e; font-size: 10px; }
.select { appearance: none; padding-right: 36px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23615d59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; }
.batch-meta { display: grid; gap: 0; margin-top: 1px; }
.batch-meta.hidden { display: none; }
.batch-meta .batch-result { margin: 0; }
.batch-meta .production-pic { margin: 5px 1px 0; }
.form-section-heading > div:not(.production-pic) { flex: 1; min-width: 0; }
.form-section-heading .production-pic { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0; max-width: 118px; min-height: 34px; margin: 0 0 0 auto; padding: 3px 7px; border: 1px solid #b9d9c2; background: #eef8f0; color: #367147; }
.form-section-heading .production-pic > span { margin: 0; color: #5b8a66; font-size: 7px; font-weight: 750; letter-spacing: .08em; line-height: 1.1; }
.form-section-heading .production-pic > strong { max-width: 100%; overflow: hidden; color: #285b35; font-size: 9px; font-weight: 720; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.batch-result { gap: 7px; flex-wrap: wrap; }
.batch-result strong { margin-left: auto; }
.batch-result small { color: #688275; font-size: 8px; }
.batch-edit { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border: 1px solid #c7d8ce; background: #fff; color: #4f7662; }
.batch-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.production-result-lines { display: grid; gap: 11px; margin: 0 0 18px; }
.production-result-line { display: flex; align-items: flex-start; gap: 10px; padding: 11px; border: 1px solid var(--line); font-size: 12px; font-weight: 620; line-height: 1.45; }
.production-result-line svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.production-result-line.success { border-color: #c8e2d0; background: #f0f8f2; color: #2d7542; }
.production-result-line.failure { border-color: #efc8c4; background: #fff3f1; color: #b33a32; }
.batch-picker-modal .field { margin-top: 15px; }