:root {
  color-scheme: dark;
  --bg: #091016;
  --panel: #0f1820;
  --panel-2: #131e27;
  --line: #22313d;
  --line-soft: #192630;
  --text: #edf4f8;
  --muted: #8195a3;
  --accent: #23d88f;
  --accent-soft: rgba(35, 216, 143, .12);
  --amber: #f7b955;
  --red: #ff7272;
  --blue: #62a8ff;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(400px, .92fr); }
.login-visual { position: relative; overflow: hidden; padding: 58px 64px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 20% 90%, rgba(35,216,143,.21), transparent 38%), linear-gradient(145deg, #0e1c23, #081015 70%); border-right: 1px solid var(--line); }
.login-visual::after { content: ""; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(35,216,143,.12); border-radius: 50%; right: -260px; top: -220px; box-shadow: 0 0 0 75px rgba(35,216,143,.025), 0 0 0 150px rgba(35,216,143,.018); }
.brand-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: var(--accent); color: #05120d; font-size: 22px; font-weight: 950; letter-spacing: -.06em; }
.brand-mark.small { width: 43px; height: 43px; border-radius: 13px; font-size: 16px; }
.brand-logo-login { position: relative; z-index: 1; width: min(300px, 70%); height: 72px; object-fit: contain; object-position: left center; }
.brand-logo-sidebar { width: 43px; height: 43px; object-fit: cover; object-position: left; border-radius: 13px; }
.eyebrow, .mobile-brand { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.login-visual h1 { margin: 20px 0 18px; font-size: clamp(50px, 6vw, 84px); letter-spacing: -.065em; line-height: .93; }
.login-visual p { margin: 0; color: #9eb0bb; font-size: 19px; }
.login-version { color: #536874; font-size: 13px; }
.login-panel { display: grid; place-items: center; padding: 40px; }
.login-card { width: min(400px, 100%); }
.login-card h2 { margin: 0 0 8px; font-size: 32px; letter-spacing: -.035em; }
.login-card > p { margin: 0 0 34px; color: var(--muted); }
.mobile-brand { display: none; margin-bottom: 28px; }

label { display: grid; gap: 8px; color: #aebbc4; font-size: 13px; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; background: #0a1218; color: var(--text); padding: 12px 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: rgba(35,216,143,.75); box-shadow: 0 0 0 3px rgba(35,216,143,.09); }
textarea { min-height: 84px; resize: vertical; }
.login-card label + label { margin-top: 18px; }
.form-error { min-height: 38px; padding-top: 10px; color: var(--red); font-size: 13px; }

.button { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); padding: 10px 16px; font-weight: 750; cursor: pointer; transition: transform .12s, background .12s; }
.button:hover { transform: translateY(-1px); background: #192630; }
.button.primary { border-color: var(--accent); background: var(--accent); color: #05130e; }
.button.primary:hover { background: #36e8a0; }
.button.ghost { background: transparent; }
.button.danger { color: var(--red); }
.button.wide { width: 100%; padding: 13px; }
.button.small { padding: 7px 10px; border-radius: 8px; font-size: 12px; }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 24px 16px; border-right: 1px solid var(--line-soft); background: #0b1319; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 25px; }
.sidebar-brand strong { display: block; letter-spacing: .08em; font-size: 13px; }
.sidebar-brand span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
nav { display: grid; gap: 4px; }
.nav-label { padding: 21px 12px 7px; color: #536873; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-item { width: 100%; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 7px; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: #9fb0ba; text-align: left; cursor: pointer; }
.nav-item:hover { background: #111d25; color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-item i { font-style: normal; font-size: 18px; text-align: center; }
.nav-item span { font-size: 14px; font-weight: 650; }
.nav-item b { padding: 2px 6px; border-radius: 10px; background: #18252e; color: #5f7480; font-size: 9px; }
.nav-item.disabled { opacity: .62; cursor: default; }
.sidebar-foot { margin-top: auto; padding: 20px 10px 0; border-top: 1px solid var(--line-soft); }
.server-dot { color: #7e929e; font-size: 12px; }
.server-dot span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.app-version { margin-top: 7px; color: #445863; font-size: 11px; }

.main-area { min-width: 0; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line-soft); }
.topbar h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.user-menu { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-weight: 900; }
.user-menu strong, .user-menu span { display: block; font-size: 12px; }
.user-menu span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: #95a8b3; cursor: pointer; font-size: 18px; }
.icon-button:hover { color: var(--text); background: var(--panel-2); }
.content { padding: 30px 34px 60px; }

.page-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-actions .copy h3 { margin: 0 0 5px; font-size: 20px; }
.page-actions .copy p { margin: 0; color: var(--muted); font-size: 13px; }
.action-group { display: flex; gap: 10px; }
.search { width: 300px; position: relative; }
.search input { padding-left: 36px; }
.search::before { content: "⌕"; position: absolute; z-index: 1; left: 13px; top: 9px; color: #617783; font-size: 18px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 14px; }
.metric-card { min-height: 142px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(150deg, #111c24, #0e171e); }
.metric-card .metric-head { display: flex; justify-content: space-between; color: #7f929e; font-size: 12px; }
.metric-card .metric-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.metric-card strong { display: block; margin-top: 17px; font-size: 34px; letter-spacing: -.045em; }
.metric-card small { display: block; margin-top: 3px; color: #5d727e; }
.section-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; margin-top: 16px; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 19px 20px; border-bottom: 1px solid var(--line-soft); }
.panel-head h3 { margin: 0; font-size: 15px; }
.panel-head span { color: var(--muted); font-size: 12px; }
.panel-body { padding: 20px; }
.roadmap { display: grid; gap: 14px; }
.roadmap-item { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.roadmap-item i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-style: normal; font-size: 12px; font-weight: 800; }
.roadmap-item strong { display: block; font-size: 13px; }
.roadmap-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th { padding: 12px 16px; background: #0d171e; color: #607581; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
td { padding: 14px 16px; border-top: 1px solid var(--line-soft); color: #cdd8df; font-size: 13px; }
tbody tr:hover { background: rgba(255,255,255,.015); }
.code { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; }
.muted { color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 14px; font-size: 11px; font-weight: 750; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.active, .status.approved { color: var(--accent); background: var(--accent-soft); }
.status.draft { color: var(--amber); background: rgba(247,185,85,.11); }
.status.submitted, .status.warning { color: var(--amber); background: rgba(247,185,85,.11); }
.status.posted { color: var(--accent); background: var(--accent-soft); }
.status.cancelled { color: var(--red); background: rgba(244,99,99,.1); }
.status.archived, .status.inactive { color: #718590; background: #19252d; }
.row-actions { display: flex; justify-content: flex-end; gap: 7px; }
.empty { padding: 54px 25px; text-align: center; color: var(--muted); }
.empty strong { display: block; margin-bottom: 6px; color: #cbd7dd; font-size: 16px; }

.event-list { display: grid; }
.event { display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.event:last-child { border-bottom: 0; }
.event > i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--accent); }
.event strong { display: block; font-size: 12px; }
.event span, .event time { color: var(--muted); font-size: 11px; }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 30px; background: rgba(2,7,10,.78); backdrop-filter: blur(9px); }
.modal { width: min(720px, 100%); max-height: calc(100vh - 60px); overflow: hidden; display: flex; flex-direction: column; border: 1px solid #2a3a46; border-radius: 18px; background: #0e171e; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.modal.wide { width: min(980px, 100%); }
.modal > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.modal h3 { margin: 4px 0 0; font-size: 21px; }
.modal-body { padding: 22px; overflow: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.component-list { display: grid; gap: 10px; margin-top: 11px; }
.component-row { display: grid; grid-template-columns: 2fr .78fr .72fr .72fr 1.35fr 36px; gap: 8px; align-items: end; padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: #0a1319; }
.component-row label span { font-size: 10px; }
.subhead { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.subhead strong { font-size: 13px; }

.recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 14px; }
.recipe-card { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); cursor: pointer; }
.recipe-card:hover { border-color: #38505f; transform: translateY(-1px); }
.recipe-card-head { display: flex; justify-content: space-between; gap: 10px; }
.recipe-card h4 { margin: 11px 0 5px; font-size: 17px; }
.recipe-card p { margin: 0; color: var(--muted); font-size: 12px; }
.recipe-meta { display: flex; justify-content: space-between; margin-top: 19px; padding-top: 13px; border-top: 1px solid var(--line-soft); color: #78909c; font-size: 11px; }
.version-card { margin-bottom: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #0a1319; }
.version-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.version-card h4 { margin: 0; }
.version-actions { display: flex; align-items: center; gap: 8px; }
.version-note { margin: 8px 0 13px; color: var(--muted); font-size: 12px; }

.warehouse-actions { align-items: end; }
.warehouse-picker { width: min(430px, 100%); }
.warehouse-picker label { display: grid; grid-template-columns: auto minmax(230px, 1fr); align-items: center; gap: 12px; }
.warehouse-metrics { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.warehouse-section { margin-top: 28px; }
.section-title { margin: 0 0 12px; }
.section-title h3 { margin: 0 0 4px; font-size: 16px; }
.section-title span { color: var(--muted); font-size: 12px; }
.shortage-row { background: rgba(247,185,85,.025); }
.form-hint { display: block; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.inventory-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; color: var(--muted); font-size: 12px; }
.inventory-table input { min-width: 130px; }
.inventory-table td small { margin-left: 6px; }
.positive { color: var(--accent); }
.negative { color: var(--red); }
select[multiple] { min-height: 170px; }

.settings-tabs { display: flex; gap: 5px; margin-bottom: 24px; padding: 5px; width: fit-content; border: 1px solid var(--line); border-radius: 13px; background: #0b141b; }
.settings-tab, .display-switch button { border: 0; border-radius: 9px; background: transparent; color: var(--muted); padding: 10px 15px; font-size: 13px; font-weight: 750; cursor: pointer; }
.settings-tab:hover, .display-switch button:hover { color: var(--text); }
.settings-tab.active, .display-switch button.active { background: var(--accent-soft); color: var(--accent); }
.role-preview { margin-top: 17px; padding: 13px 15px; border: 1px solid rgba(98,168,255,.18); border-radius: 11px; background: rgba(98,168,255,.06); color: #a9cfff; font-size: 12px; }

.employee-cell { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.employee-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 900; background-size: cover; background-position: center; }
.employee-cell strong, .employee-cell span { display: block; }
.employee-cell span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.user-profile-grid { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start; }
.profile-photo-panel { display: grid; gap: 10px; justify-items: center; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #0a1319; }
.profile-photo-preview { width: 120px; height: 120px; display: grid; place-items: center; border-radius: 24px; background: var(--accent-soft); color: var(--accent); font-size: 38px; font-weight: 900; background-size: cover; background-position: center; }
.profile-photo-panel small { color: var(--muted); text-align: center; font-size: 10px; }
.file-button { position: relative; overflow: hidden; text-align: center; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.text-button.danger { color: var(--red); }
.section-access { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 0; padding: 15px; border: 1px solid var(--line); border-radius: 13px; }
.section-access legend, .touch-check-list legend { padding: 0 7px; color: #aebbc4; font-size: 12px; font-weight: 800; }
.section-access label, .touch-check-list label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: #0a1319; cursor: pointer; }
.section-access input, .touch-check-list input, .process-confirm input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
.section-access span { font-size: 11px; }

.trash-grid, .branding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trash-list { display: grid; padding: 0 18px; }
.trash-item { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.trash-item:last-child { border-bottom: 0; }
.trash-item strong, .trash-item small { display: block; }
.trash-item strong { margin-top: 4px; font-size: 13px; }
.trash-item small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.trash-item > div:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.branding-grid code, .brand-preview code { color: var(--accent); }
.branding-grid h3 { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.branding-grid p { color: var(--muted); line-height: 1.6; }
.brand-preview { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; padding: 20px; border: 1px dashed var(--line); border-radius: 14px; }
.brand-preview img { width: min(340px, 100%); height: 72px; object-fit: contain; object-position: left; }

.subhead > div > strong, .subhead > div > small { display: block; }
.subhead > div > small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.process-head { gap: 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.process-head > div:last-child { display: flex; align-items: center; gap: 8px; }
.process-head select { min-width: 190px; padding: 7px 10px; }
.process-step-list { display: grid; gap: 10px; margin-top: 12px; }
.process-step-row { display: grid; grid-template-columns: 45px 1.05fr 1.25fr 1.5fr .65fr 1.8fr 1fr 36px; gap: 8px; align-items: end; padding: 12px; border: 1px solid rgba(35,216,143,.15); border-radius: 13px; background: #09141a; }
.process-step-row label span { font-size: 9px; }
.process-step-row textarea { min-height: 43px; height: 43px; padding: 10px; resize: vertical; }
.process-order { align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; place-items: center; border-radius: 9px; background: #111e26; }
.process-order button { width: 100%; height: 24px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.process-order b { color: var(--accent); font-size: 13px; }
.process-confirm { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--line-soft); border-radius: 9px; }
.process-confirm span { line-height: 1.25; }
.process-step-row.non-load .process-component { opacity: .35; pointer-events: none; }
.tech-route-title { margin-top: 20px; }
.tech-route { display: grid; gap: 8px; }
.tech-route > div { display: grid; grid-template-columns: 34px 130px 1.2fr 1.5fr auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: #0d171e; }
.tech-route i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-style: normal; font-weight: 900; }
.tech-route span, .tech-route time { color: var(--muted); font-size: 10px; }
.tech-route strong { font-size: 12px; }
.tech-route p { margin: 0; color: #a7b7c0; font-size: 11px; }
.operation-duration { display: inline-flex; margin-top: 6px; padding: 8px 11px; border-radius: 9px; background: rgba(98,168,255,.1); color: var(--blue); font-weight: 800; }
.instruction-entry { grid-template-columns: 1fr; }

.touch-check-list { max-height: 380px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.touch-check-list label { min-height: 58px; }
.touch-check-list b { display: block; color: var(--accent); font-size: 10px; }
.touch-check-list span { font-size: 11px; }
.touch-number { min-height: 56px !important; border-width: 2px; font-size: 20px !important; font-weight: 850; cursor: pointer; }
.touch-keypad { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(1,6,9,.86); backdrop-filter: blur(8px); }
.touch-keypad-card { width: min(430px, 100%); padding: 16px; border: 1px solid #3a4b56; border-radius: 22px; background: #0d171e; box-shadow: 0 25px 80px rgba(0,0,0,.6); }
.touch-keypad-card header { display: grid; gap: 8px; padding: 10px 8px 17px; }
.touch-keypad-card header span { color: var(--muted); font-size: 12px; }
.touch-keypad-card header strong { min-height: 62px; overflow: hidden; padding: 8px 13px; border: 1px solid var(--line); border-radius: 12px; background: #071016; color: var(--accent); text-align: right; font-size: 36px; }
.touch-keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.touch-keypad button { min-height: 64px; border: 1px solid var(--line); border-radius: 13px; background: #17242d; color: var(--text); font-size: 24px; font-weight: 850; cursor: pointer; }
.touch-keypad button:active { transform: scale(.98); background: #20323d; }
.touch-keypad .key-danger { color: var(--red); }
.touch-keypad footer { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 9px; margin-top: 9px; }
.touch-keypad footer button { font-size: 15px; }
.touch-keypad .key-apply { border-color: var(--accent); background: var(--accent); color: #04150e; }

.ops-dashboard { --ops-bg:#f3f0e8; --ops-card:#fbfaf6; --ops-ink:#17201e; --ops-muted:#6f7a75; --ops-line:#d9d6cd; margin: -30px -34px -60px; min-height: calc(100vh - 92px); padding: 28px 28px 55px; background: var(--ops-bg); color: var(--ops-ink); }
.ops-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.ops-intro > div:first-child > span { color: #a46d17; font-size: 10px; font-weight: 850; letter-spacing: .2em; }
.ops-intro h3 { margin: 6px 0; font-size: 23px; }
.ops-intro p { margin: 0; color: var(--ops-muted); font-size: 12px; }
.ops-intro > div:last-child { display: grid; justify-items: end; gap: 12px; }
.ops-role-switch { display: flex; padding: 3px; border: 1px solid var(--ops-line); border-radius: 14px; background: #fff; }
.ops-role-switch button { padding: 8px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--ops-muted); font-size: 11px; cursor: pointer; }
.ops-role-switch button.active { background: #f1eee6; color: var(--ops-ink); font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ops-line-button { padding: 10px 15px; border: 0; border-radius: 11px; background: #113d34; color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.ops-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.ops-kpi, .ops-card { border: 1px solid var(--ops-line); border-radius: 17px; background: var(--ops-card); box-shadow: 0 7px 24px rgba(56,49,35,.05); }
.ops-kpi { position: relative; min-height: 145px; padding: 20px; }
.ops-kpi > span { color: #64716c; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.ops-kpi > i { position: absolute; top: 42px; left: 20px; width: 29px; height: 29px; border-radius: 50%; background: #e7fbf2; }
.ops-kpi.fact > i { background: #fff7df; }
.ops-kpi.work > i { background: #e8f5ff; }
.ops-kpi.risk > i { background: #fff0f0; }
.ops-kpi strong { display: block; margin-top: 48px; color: #091719; font-size: 27px; letter-spacing: -.04em; }
.ops-kpi small { display: block; margin-top: 6px; color: #66746e; font-size: 10px; }
.ops-main-grid { display: grid; grid-template-columns: 1.7fr .9fr; gap: 16px; margin-top: 16px; }
.ops-card > header { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 0; }
.ops-card header h3 { margin: 0 0 4px; font-size: 14px; }
.ops-card header span { color: var(--ops-muted); font-size: 10px; }
.ops-card header b { padding: 5px 9px; border: 1px solid var(--ops-line); border-radius: 12px; background: #fff; color: #33403c; font-size: 9px; }
.ops-chart { min-height: 390px; }
.week-chart { width: 100%; height: 285px; padding: 18px 18px 0; overflow: visible; }
.week-chart line { stroke: #dddcd5; stroke-dasharray: 4 5; }
.week-chart polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.week-chart .chart-plan { stroke: #d69a31; stroke-dasharray: 7 6; }
.week-chart .chart-fact { stroke: #146655; }
.week-chart text { fill: #78817d; font-size: 11px; }
.chart-legend { display: flex; gap: 17px; justify-content: center; padding-bottom: 15px; color: var(--ops-muted); font-size: 10px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 18px; height: 3px; background: #146655; }
.chart-legend i.plan { background: #d69a31; }
.ops-line-card { min-height: 390px; display: flex; flex-direction: column; padding: 23px; border-radius: 17px; background: #103e35; color: #fff; }
.ops-line-card > span, .ops-no-line span { color: #e7ad3f; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.ops-line-card > h3 { margin: 12px 0 8px; font-size: 20px; }
.ops-live { width: fit-content; padding: 7px 11px; border-radius: 15px; background: rgba(35,216,143,.12); color: #42e8a6; font-size: 10px; }
.ops-current { display: grid; margin-top: 22px; padding: 20px; border: 1px solid rgba(255,255,255,.58); border-radius: 14px; background: rgba(255,255,255,.05); }
.ops-current small { color: #8eb4aa; font-size: 9px; letter-spacing: .12em; }
.ops-current strong { margin-top: 10px; font-size: 16px; }
.ops-current p { margin: 7px 0 20px; color: #b8d1ca; font-size: 11px; }
.ops-current time { font-family: ui-monospace, monospace; font-size: 31px; font-weight: 900; }
.ops-current i { height: 8px; overflow: hidden; margin-top: 14px; border-radius: 9px; background: rgba(255,255,255,.12); }
.ops-current em { display: block; height: 100%; background: #e5ae3f; }
.ops-line-card footer { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 9px; padding-top: 18px; color: #84a99f; font-size: 10px; }
.ops-line-card footer b { color: #fff; }
.ops-no-line { margin: auto; text-align: center; }
.ops-no-line h3 { margin: 15px 0 8px; font-size: 23px; }
.ops-no-line p { color: #9dbcb4; }
.ops-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ops-attention, .ops-queue { display: grid; padding: 12px 22px 18px; }
.ops-attention button, .ops-queue button { min-height: 66px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border: 0; border-bottom: 1px solid var(--ops-line); background: transparent; color: var(--ops-ink); text-align: left; cursor: pointer; }
.ops-attention button:last-child, .ops-queue button:last-child { border-bottom: 0; }
.ops-attention i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #ffe8e8; color: #d64c4c; font-style: normal; font-weight: 900; }
.ops-attention strong, .ops-attention span, .ops-queue strong, .ops-queue span { display: block; }
.ops-attention strong, .ops-queue strong { font-size: 11px; }
.ops-attention span, .ops-queue span { margin-top: 4px; color: var(--ops-muted); font-size: 9px; }
.ops-attention b { padding: 5px 8px; border: 1px solid #f0caca; border-radius: 11px; color: #c93e3e; font-size: 9px; }
.ops-queue time { font-weight: 850; font-size: 11px; }
.ops-queue .status { font-size: 9px; }
.ops-empty { padding: 38px; color: var(--ops-muted); text-align: center; font-size: 11px; }
.ops-footnote { margin-top: 12px; color: #818884; text-align: right; font-size: 9px; }

.technologist-hero { min-height: 170px; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 18px; padding: 28px 30px; border: 1px solid rgba(35,216,143,.25); border-radius: 19px; background: radial-gradient(circle at 92% 0, rgba(35,216,143,.17), transparent 42%), linear-gradient(145deg, #111e25, #0d161c); }
.technologist-hero h3 { margin: 8px 0 7px; font-size: 29px; letter-spacing: -.045em; }
.technologist-hero p { margin: 0; color: #91a4af; font-size: 13px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.technologist-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 16px; }
.text-button { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 750; cursor: pointer; }
.empty.compact { padding: 24px 12px; font-size: 12px; }
.decision-list, .arrival-list, .plan-list { display: grid; gap: 0; }
.decision-row { display: grid; grid-template-columns: 1.5fr .8fr .8fr; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.decision-row:last-child, .arrival-row:last-child, .plan-row:last-child { border-bottom: 0; }
.decision-row strong, .decision-row small, .arrival-row strong, .arrival-row span, .plan-row strong, .plan-row span { display: block; }
.decision-row small { margin-bottom: 3px; color: #627681; font-size: 9px; text-transform: uppercase; }
.decision-row b { font-size: 12px; }
.decision-row > div:first-child strong { margin-top: 3px; font-size: 12px; }
.arrival-row, .plan-row { display: grid; grid-template-columns: 95px 1fr auto; gap: 13px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.arrival-row time, .plan-row time { color: var(--accent); font-size: 11px; font-weight: 750; }
.arrival-row strong, .plan-row strong { font-size: 12px; }
.arrival-row div span, .plan-row div span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.plan-row { grid-template-columns: 130px 1fr; }

.planning-metrics { grid-template-columns: repeat(4, minmax(170px, 1fr)); }
.compact-filter { width: 210px; grid-template-columns: auto 1fr; align-items: center; }
.compact-filter select { padding: 8px 10px; }
.planning-table { min-width: 1120px; }
.planning-shortage { background: rgba(255,114,114,.035); }
.planning-warning { background: rgba(247,185,85,.025); }
.planning-badge { display: inline-flex; padding: 5px 8px; border-radius: 13px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.planning-badge.shortage { color: var(--red); background: rgba(255,114,114,.1); }
.planning-badge.warning { color: var(--amber); background: rgba(247,185,85,.1); }
.planning-badge.enough { color: var(--accent); background: var(--accent-soft); }
.order-hint { display: block; margin-top: 4px; color: #d5e0e6; font-size: 10px; }
.quick-order-material { display: block; margin-top: 7px; }
.supply-summary { min-width: 240px; color: #9fb0ba; font-size: 11px; line-height: 1.7; }
.status.ordered { color: var(--amber); background: rgba(247,185,85,.11); }
.status.received { color: var(--accent); background: var(--accent-soft); }
.supply-item-row { display: grid; grid-template-columns: 2fr .8fr .65fr 36px; gap: 8px; align-items: end; padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: #0a1319; }
.receive-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }

.journal-filters { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(130px, .75fr)); gap: 10px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.journal-filters label span { font-size: 10px; }
.journal-filters input, .journal-filters select { padding: 9px 10px; }
.journal-summary { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0 2px 12px; color: var(--muted); font-size: 11px; }
.journal-summary strong { color: #dfe9ee; }
.source-badge, .result-badge { display: inline-flex; padding: 5px 8px; border-radius: 12px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.source-badge.live { color: var(--accent); background: var(--accent-soft); }
.source-badge.historical { color: #c3a8ff; background: rgba(169,123,255,.12); }
.result-badge.not_evaluated { color: #7e929e; background: #19252d; }
.result-badge.successful { color: var(--accent); background: var(--accent-soft); }
.result-badge.needs_adjustment { color: var(--amber); background: rgba(247,185,85,.11); }
.result-badge.rejected { color: var(--red); background: rgba(255,114,114,.1); }
.archive-warning { display: grid; gap: 4px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid rgba(169,123,255,.25); border-radius: 12px; background: rgba(169,123,255,.07); }
.archive-warning strong { color: #cfbaff; font-size: 12px; }
.archive-warning span { color: #9b8ab7; font-size: 11px; }
.historical-component-row { display: grid; grid-template-columns: 1.8fr .75fr .65fr 1.3fr 36px; gap: 8px; align-items: end; padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: #0a1319; }

.batch-card-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.batch-card-head h3 { margin: 7px 0 4px; font-size: 27px; letter-spacing: -.04em; }
.batch-card-head p { margin: 0; color: var(--muted); font-size: 12px; }
.batch-card-head > div:last-child { display: flex; gap: 7px; align-items: flex-start; }
.batch-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 20px 0; }
.batch-facts > div { padding: 13px; border: 1px solid var(--line-soft); border-radius: 11px; background: #0a1319; }
.batch-facts span, .batch-facts strong { display: block; }
.batch-facts span { color: #627681; font-size: 9px; text-transform: uppercase; }
.batch-facts strong { margin-top: 5px; font-size: 12px; }
.batch-note { margin-bottom: 20px; padding: 14px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-soft); }
.batch-note span { color: #65a68a; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.batch-note p { margin: 5px 0 0; color: #b6c8c0; font-size: 12px; }
.batch-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.batch-bottom-grid > section { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #0a1319; }
.batch-bottom-grid form { display: grid; gap: 11px; }
.attachment-list { display: grid; gap: 8px; margin-bottom: 13px; }
.attachment-row { display: grid; grid-template-columns: 1fr auto auto; gap: 7px; align-items: center; padding: 10px; border: 1px solid var(--line-soft); border-radius: 9px; background: #0d171e; }
.attachment-row strong, .attachment-row span { display: block; }
.attachment-row strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.attachment-row span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.batch-print-action { display: flex; justify-content: flex-end; margin-bottom: 12px; }

.production-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.display-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #0b141b; }
.production-layout { display: grid; gap: 16px; align-items: stretch; }
.production-layout.mode-both { grid-template-columns: minmax(510px, 1.05fr) minmax(450px, .95fr); }
.production-layout.mode-operator, .production-layout.mode-display { grid-template-columns: minmax(0, 1fr); }
.operator-console, .wall-display { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #0d171e; }
.operator-console { padding: 22px; }
.console-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.console-head h2 { margin: 5px 0 5px; font-size: 27px; letter-spacing: -.04em; }
.console-head h2 em { color: var(--accent); font-style: normal; }
.console-head p { margin: 0; color: var(--muted); font-size: 12px; }
.console-kicker { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 850; letter-spacing: .1em; }
.console-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--muted); font-size: 11px; }
.console-progress > div, .wall-progress > div { height: 8px; overflow: hidden; border-radius: 999px; background: #1a2933; }
.console-progress i, .wall-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #15bc78, var(--accent)); transition: width .25s; }
.current-step-card { display: grid; grid-template-columns: 62px 1fr auto; gap: 18px; align-items: center; min-height: 210px; padding: 22px; border: 1px solid rgba(35,216,143,.27); border-radius: 16px; background: radial-gradient(circle at 100% 0, rgba(35,216,143,.13), transparent 40%), #0a141a; }
.current-step-card.is-paused { border-color: rgba(247,185,85,.5); background: radial-gradient(circle at 100% 0, rgba(247,185,85,.12), transparent 40%), #15140f; }
.step-number { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: var(--accent); color: #05130e; font-size: 27px; font-weight: 950; }
.step-main > span, .step-clock > span { color: #66808d; font-size: 10px; font-weight: 850; letter-spacing: .13em; }
.step-main h3 { margin: 6px 0; font-size: 24px; line-height: 1.08; }
.step-main .dose { color: var(--accent); font-size: 35px; font-weight: 900; letter-spacing: -.04em; }
.step-main .dose small { font-size: 16px; }
.step-main p { margin: 10px 0 0; max-width: 520px; color: #93a6b1; font-size: 12px; line-height: 1.45; }
.step-clock { min-width: 125px; text-align: right; }
.step-clock strong { display: block; margin: 6px 0 5px; font-variant-numeric: tabular-nums; font-size: 35px; letter-spacing: -.04em; }
.step-clock strong.overrun, .wall-timer strong.overrun { color: var(--red); }
.step-clock small { color: #6f838f; font-size: 10px; }
.step-clock small b { color: #a8b7bf; }
.operator-entry { display: grid; grid-template-columns: .75fr 1.25fr; gap: 12px; margin-top: 14px; }
.operator-entry input { min-height: 52px; font-size: 17px; }
.operator-actions { display: grid; grid-template-columns: .7fr .7fr 1.6fr; gap: 10px; margin-top: 14px; }
.operator-actions:has(.touch-button:nth-child(2):last-child) { grid-template-columns: .75fr 1.25fr; }
.touch-button { min-height: 62px; border: 1px solid var(--line); border-radius: 13px; background: #15212a; color: var(--text); font-size: 15px; font-weight: 850; cursor: pointer; }
.touch-button.primary { border-color: var(--accent); background: var(--accent); color: #04150e; }
.touch-button.pause { border-color: rgba(247,185,85,.45); color: var(--amber); background: rgba(247,185,85,.08); }
.touch-button:active { transform: translateY(1px); }
.next-step { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 16px; padding: 13px 15px; border-radius: 12px; background: #111d25; }
.next-step > span { color: #657985; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.next-step strong { font-size: 13px; }
.next-step b { color: #b5c3cb; font-size: 13px; }
.step-strip { display: flex; gap: 7px; margin-top: 15px; overflow: auto; padding-bottom: 4px; }
.step-strip > div { flex: 0 0 115px; min-width: 0; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; color: #5e727d; background: #0a1218; }
.step-strip > div.in_progress { border-color: rgba(35,216,143,.42); color: var(--accent); background: var(--accent-soft); }
.step-strip > div.completed { color: #7f938d; }
.step-strip i { display: block; margin-bottom: 4px; color: inherit; font-style: normal; font-size: 11px; font-weight: 900; }
.step-strip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.empty-console { min-height: 520px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.empty-console h2 { margin: 6px 0; font-size: 32px; }
.empty-console p { margin: 0; color: var(--muted); }
.operator-queue { display: grid; gap: 9px; }
.planned-batch { display: grid; grid-template-columns: 1fr auto; gap: 4px 15px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #0a1319; text-align: left; cursor: pointer; }
.planned-batch:hover { border-color: rgba(35,216,143,.5); }
.planned-batch span, .planned-batch strong, .planned-batch small { grid-column: 1; }
.planned-batch small { color: var(--muted); }
.planned-batch b { grid-column: 2; grid-row: 1 / 4; align-self: center; color: var(--accent); }

.wall-display { min-height: 620px; display: flex; flex-direction: column; padding: 25px 28px 22px; background: radial-gradient(circle at 100% 0, rgba(35,216,143,.12), transparent 34%), #060c10; }
.wall-display > header, .wall-display > footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.wall-brand { color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .17em; }
.wall-batch { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.wall-batch span { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #8398a4; }
.wall-batch b { padding: 6px 9px; border-radius: 15px; background: var(--accent-soft); color: var(--accent); }
.wall-display.is-paused .wall-batch b { background: rgba(247,185,85,.12); color: var(--amber); }
.wall-product { margin-top: 40px; }
.wall-product > span { color: #718793; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wall-product h2 { margin: 7px 0 3px; font-size: clamp(27px, 3.1vw, 48px); letter-spacing: -.055em; }
.wall-product p { margin: 0; color: var(--muted); font-size: 15px; }
.wall-current { display: grid; grid-template-columns: 88px 1fr auto; gap: 24px; align-items: center; margin: auto 0; padding: 27px 0; }
.wall-step-number { text-align: center; }
.wall-step-number span, .wall-current > div:nth-child(2) > span, .wall-timer > span { display: block; color: #607783; font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.wall-step-number strong { display: block; color: var(--accent); font-size: 68px; line-height: .95; }
.wall-step-number small { color: #526671; font-size: 10px; }
.wall-current h3 { margin: 8px 0 4px; font-size: clamp(27px, 3vw, 46px); line-height: 1.03; letter-spacing: -.045em; }
.wall-current > div:nth-child(2) > p { margin: 0; color: var(--accent); font-size: 28px; font-weight: 900; }
.wall-current > div:nth-child(2) > small { display: block; margin-top: 10px; color: #879ba6; line-height: 1.4; }
.wall-timer { text-align: right; }
.wall-timer strong { display: block; margin: 7px 0 2px; font-variant-numeric: tabular-nums; font-size: clamp(37px, 4vw, 62px); line-height: 1; letter-spacing: -.06em; }
.wall-timer small { color: #667a85; }
.wall-progress { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 13px; color: #738894; font-size: 10px; }
.wall-progress b { color: #a8bac4; }
.wall-next { display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; margin-top: 16px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,.02); }
.wall-next span { color: #607580; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.wall-next strong { font-size: 14px; }
.wall-next b { color: #b6c4cc; font-size: 14px; }
.wall-display > footer { margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--line-soft); color: #526873; font-size: 9px; }
.waiting-display { align-items: center; justify-content: center; text-align: center; }
.waiting-display .wall-brand { position: absolute; top: 28px; left: 28px; }
.waiting-display h2 { margin: 18px 0 5px; font-size: 38px; }
.waiting-display p, .waiting-display time { color: var(--muted); }
.waiting-symbol { color: var(--accent); font-size: 78px; line-height: 1; }
.production-register { margin-top: 26px; }
.status.planned, .status.pending { color: var(--blue); background: rgba(98,168,255,.1); }
.status.in_progress, .status.completed { color: var(--accent); background: var(--accent-soft); }
.status.paused { color: var(--amber); background: rgba(247,185,85,.11); }

body.production-kiosk { overflow: hidden; }
body.production-kiosk .app-shell { grid-template-columns: 1fr; }
body.production-kiosk .sidebar, body.production-kiosk .topbar { display: none; }
body.production-kiosk .content { min-height: 100vh; padding: 0; }
body.production-kiosk #production-workspace, body.production-kiosk .production-layout { min-height: 100vh; }
body.production-kiosk .operator-console, body.production-kiosk .wall-display { min-height: 100vh; border: 0; border-radius: 0; }
body.production-kiosk .operator-console { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 3vw, 42px); }
body.display-kiosk .wall-display { padding: clamp(28px, 3vw, 58px); }
body.display-kiosk .wall-product { margin-top: clamp(40px, 7vh, 90px); }
body.display-kiosk .wall-current { flex: 1; }

.toast-stack { position: fixed; z-index: 40; right: 22px; bottom: 22px; display: grid; gap: 9px; }
.toast { min-width: 280px; max-width: 420px; padding: 13px 15px; border: 1px solid #2a3a45; border-left: 3px solid var(--accent); border-radius: 10px; background: #111c23; box-shadow: 0 16px 50px rgba(0,0,0,.35); font-size: 13px; animation: toast-in .18s ease-out; }
.toast.error { border-left-color: var(--red); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .section-grid { grid-template-columns: 1fr; }
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .production-layout.mode-both { grid-template-columns: 1fr; }
  .technologist-grid { grid-template-columns: 1fr; }
  .journal-filters { grid-template-columns: repeat(3, 1fr); }
  .ops-kpis { grid-template-columns: repeat(2, 1fr); }
  .ops-main-grid, .ops-bottom-grid { grid-template-columns: 1fr; }
  .process-step-row { grid-template-columns: 45px 1fr 1fr 1.4fr; }
  .process-instruction, .process-confirm { grid-column: span 2; }
}
@media (max-width: 780px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .mobile-brand { display: block; }
  .app-shell { grid-template-columns: 72px 1fr; }
  .sidebar { padding: 18px 10px; }
  .sidebar-brand { justify-content: center; padding: 0 0 20px; }
  .sidebar-brand > div:last-child, .nav-label, .nav-item span, .nav-item b, .sidebar-foot { display: none; }
  .nav-item { display: grid; grid-template-columns: 1fr; justify-items: center; padding: 12px; }
  .topbar { padding: 0 18px; }
  .content { padding: 22px 18px 50px; }
  .user-menu > div:not(.user-avatar) { display: none; }
  .page-actions { align-items: stretch; flex-direction: column; }
  .search { width: 100%; }
  .recipe-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .component-row { grid-template-columns: 1fr 1fr; }
  .component-row label:first-child, .component-row label:nth-child(5) { grid-column: 1 / -1; }
  .warehouse-picker { width: 100%; }
  .warehouse-picker label { grid-template-columns: 1fr; }
  .action-group { flex-wrap: wrap; }
  .technologist-hero { align-items: flex-start; flex-direction: column; }
  .planning-metrics { grid-template-columns: repeat(2, 1fr); }
  .journal-filters { grid-template-columns: 1fr 1fr; }
  .supply-item-row, .historical-component-row { grid-template-columns: 1fr 1fr; }
  .supply-item-row label:first-child, .historical-component-row label:first-child, .historical-component-row label:nth-child(4) { grid-column: 1 / -1; }
  .batch-facts, .batch-bottom-grid { grid-template-columns: 1fr 1fr; }
  .receive-list { grid-template-columns: 1fr; }
  .user-profile-grid, .trash-grid, .branding-grid { grid-template-columns: 1fr; }
  .section-access { grid-template-columns: 1fr 1fr; }
  .tech-route > div { grid-template-columns: 34px 1fr auto; }
  .tech-route > div > span, .tech-route > div > p { grid-column: 2; }
  .process-step-row { grid-template-columns: 45px 1fr 1fr; }
  .process-instruction, .process-confirm { grid-column: span 2; }
  .process-step-row > .remove-process-step { grid-column: 3; }
  .ops-dashboard { margin: -22px -18px -50px; padding: 20px 16px 45px; }
  .ops-intro { align-items: stretch; flex-direction: column; }
  .ops-intro > div:last-child { justify-items: stretch; }
  .ops-role-switch { overflow: auto; }
  .production-toolbar { align-items: stretch; flex-direction: column; }
  .display-switch { overflow: auto; }
  .current-step-card { grid-template-columns: 50px 1fr; }
  .step-number { width: 48px; height: 48px; }
  .step-clock { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .operator-entry { grid-template-columns: 1fr; }
  .wall-current { grid-template-columns: 70px 1fr; }
  .wall-timer { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 520px) {
  .metric-grid { grid-template-columns: 1fr; }
  .topbar p { display: none; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100vh - 20px); }
  .journal-filters, .planning-metrics, .batch-facts, .batch-bottom-grid { grid-template-columns: 1fr; }
  .batch-card-head { flex-direction: column; }
  .ops-kpis { grid-template-columns: 1fr; }
  .section-access, .touch-check-list { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  .button, .settings-tab, .display-switch button { min-height: 48px; }
  .nav-item { min-height: 52px; }
  input, select, textarea { min-height: 48px; font-size: 16px; }
  .inventory-table td { padding-top: 18px; padding-bottom: 18px; }
  .operator-console { padding: 18px; }
  .touch-button { min-height: 72px; font-size: 17px; }
}

@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #111; }
  body > *:not(#modal-backdrop) { display: none !important; }
  #modal-backdrop { position: static; display: block !important; padding: 0; background: #fff; backdrop-filter: none; }
  #modal { width: 100%; max-height: none; overflow: visible; border: 0; box-shadow: none; background: #fff; color: #111; }
  #modal > header, .batch-print-action, #batch-result-form, #attachment-form, .delete-attachment, .download-attachment { display: none !important; }
  .modal-body { padding: 0; overflow: visible; }
  .batch-card, .batch-card * { color: #111 !important; }
  .batch-card-head p, .muted { color: #555 !important; }
  .batch-facts > div, .batch-bottom-grid > section, .table-wrap, th, td, .batch-note { border-color: #bbb !important; background: #fff !important; }
  .batch-bottom-grid { grid-template-columns: 1fr; }
  .batch-bottom-grid > section:first-child { display: none; }
  table { min-width: 0; }
  th, td { padding: 7px; font-size: 10px; }
  .source-badge, .result-badge { border: 1px solid #999; background: #fff !important; }
}