:root {
  color-scheme: light;
  --ink: #202920;
  --muted: #68736a;
  --line: #dfe5dc;
  --paper: #ffffff;
  --canvas: #f4f6f2;
  --green: #197b56;
  --green-dark: #126446;
  --orange: #d68a2e;
  --red: #ba3d3d;
  font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 750; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 500; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: #e7f3eb; color: var(--green); font-size: 12px; font-weight: 800; }
.topbar-actions { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 12px; }
.user-label { color: var(--ink); font-weight: 650; }
.locale-mount { display: inline-flex; align-items: center; gap: 6px; }
.locale-flag { flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; }
.locale-select { min-height: 32px; padding: 0 25px 0 8px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); font-size: 11px; }
.app-layout { min-height: calc(100vh - 64px); display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.sidebar { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-right: 1px solid var(--line); background: #fbfcfa; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #47534a; text-align: left; font-size: 13px; }
.nav-item span { width: 18px; color: #718075; text-align: center; font-size: 16px; }
.nav-item:hover { background: #edf4ee; }
.nav-item.active { background: #e7f3eb; color: var(--green-dark); font-weight: 700; }
.nav-item.active span { color: var(--green); }
.back-to-pos { margin: auto 12px 8px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--green); text-decoration: none; font-size: 12px; font-weight: 650; }
.content-area { min-width: 0; padding: 28px clamp(16px, 3vw, 40px); }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 22px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.page-head h1 { margin: 0; font-size: 24px; }
.page-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.eyebrow { margin: 0 0 7px; color: var(--green); font-size: 10px; font-weight: 750; }
.button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); font-size: 12px; font-weight: 650; }
.button:hover { border-color: #9fb5a3; background: #f8fbf8; }
.button.primary { border-color: var(--green); background: var(--green); color: white; }
.button.primary:hover { background: var(--green-dark); }
.button.danger { border-color: #e8b9b9; color: var(--red); }
.button.warning { border-color: #e8d3ae; color: #80633a; }
.button.quiet { min-height: 32px; padding: 0 10px; background: transparent; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.inventory-thumb { display: block; width: 42px; height: 42px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: #f7f9f6; }
.inventory-thumb.placeholder { display: grid; place-items: center; font-size: 22px; color: #8aa093; background: #eef4ef; }
.menu-thumb { display: block; width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; background: #f7f9f6; }
.allergen-icon-preview, .allergen-inline-icon { display: inline-block; width: 30px; height: 30px; object-fit: contain; vertical-align: middle; border-radius: 4px; }
.allergen-inline-icon { width: 22px; height: 22px; }
.allergen-icon-placeholder { display: inline-grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #edf3ea; color: #526959; font-size: 9px; font-weight: 700; }
.menu-thumb.placeholder { display: grid; place-items: center; font-size: 20px; color: #7ea08a; background: linear-gradient(135deg, #f2f9f3, #edf3ea); }
.quick-stock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.quick-stock-grid .button { width: 100%; font-size: 16px; }
.quick-stock-button { border-color: #bce7c7; background: linear-gradient(180deg, #f1fbf5 0%, #ddeedf 100%); color: #1f6e4a; box-shadow: inset 0 0 0 1px rgba(34, 112, 80, .06); }
.quick-stock-button:hover { border-color: #7fc39a; background: linear-gradient(180deg, #eafaf0 0%, #d9f0e2 100%); }
.quick-stock-hint { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.inventory-toolbar { justify-content: flex-start; }
.inventory-filters { display: flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; width: auto; }
.inventory-file-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.inventory-file-actions .button { white-space: nowrap; }
.inventory-category-select { flex: 0 0 190px; width: 190px; min-height: 39px; padding: 8px 30px 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--ink); font: inherit; font-size: 12px; }
.inventory-category-select:focus { border-color: #61a181; outline: 0; box-shadow: 0 0 0 3px #197b5614; }
.report-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 12px; }
.report-toolbar .form-field { min-width: 180px; }
.report-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.report-results { max-width: none; }
.search-input, .form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); outline: 0; }
.search-input { width: min(320px, 100%); }
.search-input:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #61a181; box-shadow: 0 0 0 3px #197b5614; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 12px 14px; border-bottom: 1px solid #edf0eb; text-align: left; font-size: 12px; }
th { background: #f7f9f6; color: #68736a; font-size: 11px; font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfdfb; }
.status-pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #e9f5ed; color: #22724f; font-size: 10px; font-weight: 700; }
.status-pill.inactive { background: #f3eee5; color: #80633a; }
.empty-state { padding: 48px 16px; color: var(--muted); text-align: center; font-size: 13px; }
.kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi { padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.kpi span { display: block; color: var(--muted); font-size: 11px; }
.kpi strong { display: block; margin-top: 7px; font-size: 23px; }
.cashbox-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.cashbox-currency { max-width: none; }
.cashbox-metric { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf0eb; color: var(--muted); font-size: 11px; }
.cashbox-metric:last-child { border-bottom: 0; }
.cashbox-metric strong { color: var(--ink); text-align: right; font-size: 12px; }
.cashbox-ledger { max-width: none; }
.settings-grid, .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.discount-settings-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.discount-settings-flags { display: grid; gap: 14px; margin-top: 18px; }
.discount-settings-help { padding: 18px; border-radius: 10px; background: #f7f7f7; color: var(--text); }
.discount-settings-help h3 { margin: 0 0 18px; }
.discount-settings-help dl { margin: 0; }
.discount-settings-help dt { margin-top: 18px; font-weight: 600; }
.discount-settings-help dd { margin: 5px 0 0; color: var(--muted); }
.legacy-price-section { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.legacy-price-section h3 { margin: 0; font-size: 13px; }
.legacy-price-section p { margin: -5px 0 0; color: var(--muted); font-size: 11px; }
.legacy-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.takeout-toggle-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.takeout-flag { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.takeout-flag input { width: 16px; height: 16px; accent-color: var(--green); }
.allergen-edit-list { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; }
.allergen-edit-row { display: grid; flex: 0 1 225px; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 7px; min-width: 0; padding: 5px 7px; border: 1px solid #edf0eb; border-radius: 4px; background: #fbfdfb; }
.allergen-edit-row > label { display: flex; align-items: center; gap: 7px; }
.allergen-edit-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); }
.allergen-exposure { min-height: 32px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); font-size: 11px; }
.menu-image-edit-list { display: flex; align-items: flex-start; gap: 10px; max-width: 100%; overflow-x: auto; padding: 4px 0 8px; }
.menu-image-card { flex: 0 0 112px; display: grid; gap: 5px; min-width: 0; }
.menu-image-thumb { position: relative; width: 112px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #f7f9f6; }
.menu-image-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.menu-image-remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: 1px solid #dfe5dc; border-radius: 50%; background: #ffffffeb; color: #485248; font-size: 17px; line-height: 1; }
.menu-image-alt { width: 100%; min-height: 30px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font-size: 10px; }
.menu-image-upload { flex: 0 0 112px; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #aebcaf; border-radius: 6px; background: #fbfcfa; color: var(--green); cursor: pointer; font-size: 10px; font-weight: 650; }
.menu-image-upload:hover { border-color: var(--green); background: #f1f7f2; }
.menu-image-upload input { display: none; }
.menu-image-upload-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e7f3eb; font-size: 21px; font-weight: 400; }
.price-scheme-edit-list { display: grid; gap: 8px; }
.modifier-rule-list { display: grid; gap: 8px; }
.platform-price-list { display: grid; gap: 12px; }
.platform-price-row { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #edf0eb; }
.platform-price-row > strong { font-size: 12px; }
.bundle-component-list { display: grid; gap: 8px; }
.bundle-component-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .35fr) 40px; align-items: end; gap: 8px; }
.bundle-component-row .button { min-height: 38px; padding: 0; font-size: 18px; }
.platform-create-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.category-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.platform-create-form label:last-child { grid-column: 1 / -1; }
.modifier-rule-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(100px, .7fr)); align-items: end; gap: 10px; padding: 9px; border-bottom: 1px solid #edf0eb; }
.price-scheme-edit-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(110px, .7fr) 70px; align-items: center; gap: 12px; padding: 9px; border: 1px solid var(--line); border-radius: 5px; }
.scheme-assignment { display: flex; align-items: start; gap: 8px; }
.scheme-assignment input, .scheme-enabled input { accent-color: var(--green); }
.scheme-assignment span { display: grid; gap: 3px; }
.scheme-assignment strong { color: var(--ink); font-size: 11px; }
.scheme-assignment small { color: var(--muted); font-size: 10px; }
.scheme-enabled { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.menu-image-edit-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf0eb; }
.image-primary-option { display: flex; align-items: center; gap: 6px; min-height: 38px; color: var(--muted); font-size: 11px; }
.image-primary-option input { accent-color: var(--green); }
.settings-section { max-width: 820px; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.settings-section h2 { margin: 0 0 16px; font-size: 15px; }
.settings-hint { margin: -8px 0 12px; color: var(--muted); font-size: 12px; }
.dining-area-select { min-width: 190px; width: auto; }
.macro-code-button { justify-self: start; min-height: 38px; padding: 0 4px; border: 0; border-bottom: 1px dotted var(--green); background: transparent; color: var(--green); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.macro-code-button:hover { border-bottom-style: solid; color: var(--ink); }
.macro-selector { display: grid; gap: 14px; max-width: 620px; }
.macro-selected-details { display: grid; gap: 4px; min-height: 42px; padding: 10px 12px; border: 1px solid var(--border, #e5e5dd); border-radius: 6px; background: #fafaf6; }
.macro-selected-details strong { color: var(--ink); font-size: 12px; }
.macro-selected-details span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.macro-details { display: grid; gap: 12px; }
.macro-details > p:not(.macro-details-hint) { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; margin: 0; line-height: 1.6; }
.macro-details > p strong { color: var(--ink); font-size: 12px; }
.macro-details > p span { color: var(--muted); font-size: 12px; }
.macro-details-hint { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.settings-subnav { display: flex; gap: 4px; max-width: 820px; margin: 12px 0 16px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.settings-subnav-item { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.settings-subnav-item:hover, .settings-subnav-item.active { border-bottom-color: var(--green); color: var(--ink); }
.settings-subnav-item.active { background: color-mix(in srgb, var(--green) 7%, transparent); }
.settings-panels { max-width: 820px; }
.settings-panel { display: grid; gap: 14px; }
.settings-panel[hidden] { display: none; }
.tool-action-grid { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 12px; max-width: 720px; }
.tool-action-grid .button { min-height: 46px; }
.tool-action-grid .button:disabled { opacity: .5; cursor: not-allowed; }
.tool-warning { margin: 13px 0 0; color: #80633a; font-size: 11px; line-height: 1.6; }
.tools-page-section .tool-action-grid .button,
.tools-page-section .menu-init-browser-row .button { border-color: #d7e3da; background: #f1f7f2; color: #365b42; }
.tools-page-section .tool-action-grid .button:hover,
.tools-page-section .menu-init-browser-row .button:hover { border-color: #c3d8c8; background: #e8f2ea; }
.tools-page-section [data-action="menu-init-import"],
.tools-page-section [data-action="tool-backup"] { border-color: #c8dfcf; background: #eaf5ed; color: #2d6740; }
.tools-page-section [data-action="menu-init-import"]:hover,
.tools-page-section [data-action="tool-backup"]:hover { border-color: #b7d4bf; background: #deefe2; }
.tools-page-section [data-action="menu-init-template"],
.tools-page-section [data-action="menu-init-export"],
.tools-page-section [data-action="menu-init-browse"],
.tools-page-section [data-action="tool-restore-select"],
.tools-page-section [data-action="tool-export-migration"],
.tools-page-section [data-action="tool-import-select"] { border-color: #d2e0e8; background: #eff5f8; color: #405c6d; }
.tools-page-section [data-action="menu-init-template"]:hover,
.tools-page-section [data-action="menu-init-export"]:hover,
.tools-page-section [data-action="menu-init-browse"]:hover,
.tools-page-section [data-action="tool-restore-select"]:hover,
.tools-page-section [data-action="tool-export-migration"]:hover,
.tools-page-section [data-action="tool-import-select"]:hover { border-color: #c3d6e1; background: #e5f0f5; }
.tools-page-section [data-clear-action="retention-3"],
.tools-page-section [data-clear-action="retention-12"] { border-color: #e7ddc4; background: #faf6ea; color: #735f31; }
.tools-page-section [data-clear-action="retention-3"]:hover,
.tools-page-section [data-clear-action="retention-12"]:hover { border-color: #dfd1af; background: #f5eedc; }
.tools-page-section .button.danger,
.tools-page-section [data-clear-action="menu"],
.tools-page-section [data-clear-action="modifiers"] { border-color: #ecd5d2; background: #fbf0ef; color: #8c4b45; }
.tools-page-section .button.danger:hover,
.tools-page-section [data-clear-action="menu"]:hover,
.tools-page-section [data-clear-action="modifiers"]:hover { border-color: #e4c4c0; background: #f7e6e4; }
.menu-init-tools { display: grid; gap: 14px; }
.menu-init-browser-row { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 12px; align-items: center; max-width: 720px; }
.menu-init-browser-row .button { min-height: 46px; }
.menu-init-file-label { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 12px; }
.menu-init-file-label::placeholder { color: var(--muted); }
.menu-init-preview { display: grid; gap: 8px; max-width: 900px; padding: 14px; border: 1px solid #dce7df; border-radius: 8px; background: #f8fbf8; font-size: 12px; }
.menu-init-preview[hidden] { display: none; }
.menu-init-preview p { margin: 0; color: var(--muted); line-height: 1.6; }
.menu-init-preview .table-wrap { max-height: 300px; overflow: auto; }
.menu-init-preview table { margin: 0; }
.tool-action-grid-dual { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
@media (max-width: 520px) { .tool-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .menu-init-browser-row { grid-template-columns: 1fr; } }
.form-field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.form-field.form-toggle { grid-template-columns: 1fr auto; align-items: center; }
.form-field.form-toggle input[type="checkbox"] { grid-column: 2; grid-row: 1; width: 18px; min-height: 18px; padding: 0; accent-color: var(--green); }
.form-field.form-toggle small { grid-column: 1 / -1; }
.staff-permission-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 12px 0; padding: 11px 12px 12px; border: 1px solid #e0e4de; border-radius: 5px; }
.staff-permission-group legend { padding: 0 5px; color: #586257; font-size: 11px; font-weight: 700; }
.staff-permission-group label { display: flex; align-items: center; gap: 8px; min-height: 30px; color: #454d45; font-size: 11px; }
.staff-permission-group input { width: 15px; height: 15px; accent-color: #20946e; }
.staff-permission-group input:disabled { opacity: .45; }
.staff-editor-form { display: grid; gap: 14px; }
.staff-editor-section { padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.staff-editor-section h3 { margin: 0 0 11px; font-size: 13px; }
.staff-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; }
.staff-grade-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; }
.staff-grade-field .form-field { min-width: 0; }
.staff-grade-field .button { min-height: 38px; padding: 0 8px; color: var(--green-dark); white-space: nowrap; }
.staff-identity-flags { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.staff-identity-flags label { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; color: #454d45; font-size: 11px; }
.staff-identity-flags input { width: 16px; height: 16px; accent-color: var(--green); }
.staff-editor-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.staff-legacy-permissions summary { color: var(--muted); font-size: 11px; cursor: pointer; }
.staff-legacy-permissions .staff-permission-group { margin-top: 8px; }
@media (max-width: 520px) { .staff-editor-grid { grid-template-columns: minmax(0, 1fr); } }
.form-field textarea { min-height: 82px; resize: vertical; }
.form-actions { display: flex; justify-content: end; gap: 8px; margin-top: 18px; }
.modal-root:empty { display: none; }
.modal-root { position: fixed; z-index: 5; inset: 0; display: grid; place-items: center; padding: 18px; background: #10181088; }
.dialog { width: min(650px, 100%); max-height: 92vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 20px 55px #10181038; }
.dialog:has(#dish-form) { display: flex; width: min(940px, 96vw); max-height: 92vh; flex-direction: column; overflow: hidden; }
.dialog:has(#staff-form) { display: flex; width: min(820px, 96vw); max-height: 92vh; flex-direction: column; overflow: hidden; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; font-size: 16px; }
.dialog-body { padding: 18px 20px 20px; }
.dialog:has(#dish-form) .dialog-body { overflow: auto; }
.dialog:has(#staff-form) .dialog-body { overflow: auto; }
.dish-editor-heading { display: grid; grid-template-columns: minmax(110px, .55fr) minmax(220px, 1.1fr) auto; align-items: end; gap: 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.dish-editor-heading .form-field { color: #b64b4b; font-size: 12px; font-weight: 700; }
.dish-editor-heading .form-field input { color: var(--ink); font-weight: 500; }
.dish-editor-navigation { display: flex; gap: 7px; }
.dish-editor-navigation .button { min-height: 35px; padding: 0 11px; background: #eef6f8; border-color: #d0e1e6; color: #345b68; }
.dish-editor-navigation .button:disabled { opacity: .42; cursor: not-allowed; }
.dish-editor-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 12px; border-bottom: 1px solid var(--line); }
.dish-editor-tabs button { position: relative; min-height: 38px; padding: 0 15px; border: 0; border-radius: 4px 4px 0 0; background: #edf4f1; color: #536b5f; font-size: 11px; font-weight: 700; }
.dish-editor-tabs button:nth-child(2) { background: #fff2e5; color: #8e6136; }
.dish-editor-tabs button:nth-child(3) { background: #eaf5f0; color: #3b7260; }
.dish-editor-tabs button:nth-child(4) { background: #edf5f8; color: #476a7a; }
.dish-editor-tabs button.active { box-shadow: inset 0 -3px var(--green); color: var(--green-dark); }
.dish-basic-panel { display: grid; gap: 13px; padding: 14px; border: 1px solid #dce8df; border-radius: 5px; background: #fbfdfb; }
.dish-basic-panel > h3 { margin: 0; font-size: 13px; }
.dish-type-selector { margin: 0; padding: 10px 12px; border: 1px solid #cfe1d7; border-radius: 4px; background: #e8f3ec; }
.dish-type-select-source { display: none !important; }
.dish-type-selector legend { padding: 0 5px; color: #456853; font-size: 11px; font-weight: 700; }
.dish-type-selector > div { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.dish-type-selector label { display: inline-flex; align-items: center; gap: 6px; color: #33483a; font-size: 11px; }
.dish-type-selector input { accent-color: var(--green); }
.dish-translation-status { color: #648071; font-size: 10px; }
.dish-translation-status:empty { display: none; }
.menu-ai-bulk-status { min-height: 1.2em; margin: 8px 0; color: var(--muted); font-size: 12px; }
.menu-ai-bulk-status:empty { display: none; }
.ai-image-review { display: grid; justify-items: center; gap: 12px; max-width: min(86vw, 560px); }
.ai-image-review img { display: block; width: min(100%, 440px); aspect-ratio: 1; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #f7f9f6; }
.ai-image-review p { margin: 0; color: var(--muted); font-size: 13px; }
.translation-api-status { margin: 12px 0 0; color: #648071; font-size: 11px; line-height: 1.5; }
.ai-source-picker { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 11px 13px; border: 1px solid #cfe1d7; border-radius: 4px; background: #f4f8f5; }
.ai-source-picker legend { padding: 0 5px; color: #456853; font-size: 11px; font-weight: 700; }
.ai-source-picker label { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 11px; }
.ai-source-picker input[type="radio"] { width: 16px; min-height: 16px; margin: 0; accent-color: var(--green); }
.ai-source-picker label:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.dish-basic-panel .channel-fields { margin: 0; }
.dish-editor-tabs + .dish-basic-panel { margin-bottom: 4px; }
.dialog:has(#dish-form) .form-actions { position: sticky; bottom: -20px; z-index: 2; margin: 18px -20px -20px; padding: 12px 20px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); }
@media (max-width: 620px) {
  .dialog:has(#dish-form) { width: 100%; max-height: 100dvh; border-radius: 0; }
  .dish-editor-heading { grid-template-columns: minmax(0, 1fr) auto; }
  .dish-editor-id { grid-column: 1; }
  .dish-editor-name { grid-column: 1 / -1; grid-row: 2; }
  .dish-editor-navigation { grid-column: 2; grid-row: 1; }
  .dish-editor-tabs { gap: 2px; }
  .dish-editor-tabs button { flex: 1 1 auto; padding: 0 9px; }
}
.close-button { width: 32px; height: 32px; border: 0; border-radius: 5px; background: #f1f3ef; color: #536056; font-size: 19px; }
.toast { position: fixed; z-index: 10; left: 50%; bottom: 24px; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 6px; background: #202a22; color: white; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: .16s; font-size: 12px; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 12% 20%, #e2efe5 0, transparent 33%), linear-gradient(135deg, #f5f7f3, #edf2ec); }
.login-panel { width: min(410px, 100%); display: grid; gap: 13px; padding: 32px; border: 1px solid var(--line); border-radius: 9px; background: white; box-shadow: 0 20px 60px #1e392214; }
.login-panel h1 { margin: 0 0 8px; font-size: 26px; }
.login-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.login-return-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--green-dark); text-decoration: none; }
.login-error { min-height: 16px; margin: 0; color: var(--red); font-size: 11px; }

/* Compact operations-focused admin visual system */
:root {
  --ink: #202a32;
  --muted: #6c7880;
  --line: #e1e7e9;
  --paper: #fff;
  --canvas: #f3f6f7;
  --green: #178364;
  --green-dark: #10684f;
  --orange: #c47c28;
  --red: #c24545;
}

.topbar { position: sticky; z-index: 3; top: 0; height: 58px; padding: 0 22px; box-shadow: 0 1px 4px #23343b0b; }
.brand-mark { border-radius: 5px; background: #e4f3ed; }
.app-layout { grid-template-columns: 204px minmax(0, 1fr); }
.sidebar { position: sticky; top: 58px; height: calc(100vh - 58px); padding: 14px 10px; background: #fbfcfc; }
.nav-item { position: relative; min-height: 40px; border-radius: 4px; }
.nav-item.active { background: #e8f4ef; box-shadow: inset 3px 0 var(--green); }
.content-area { padding: 24px clamp(16px, 2.5vw, 34px); }
.page-head { margin-bottom: 18px; }
.page-head h1 { font-size: 22px; letter-spacing: 0; }
.button { min-height: 34px; border-radius: 4px; transition: background-color .14s ease, border-color .14s ease, transform .14s ease; }
.button:active { transform: translateY(1px); }
.button.primary { box-shadow: 0 1px 2px #0d60441a; }
.toolbar { margin-bottom: 10px; }
.search-input, .form-field input, .form-field select, .form-field textarea { border-radius: 4px; }
.table-wrap { border-radius: 5px; box-shadow: 0 1px 2px #25373c08; }
th, td { padding: 10px 12px; border-bottom-color: #edf0f1; }
th { background: #f7f9fa; }
.status-pill { padding: 4px 9px; background: #e4f6ea; color: #20804d; }
.status-pill.inactive { background: #fff0df; color: #a4621c; }
.settings-section, .kpi { border-radius: 5px; box-shadow: 0 1px 2px #25373c08; }
.qr-config-warning { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #edd7a6; border-radius: 5px; background: #fff9e9; color: #7b5a19; font-size: 12px; }
.qr-config-ready { margin: 0 0 12px; color: var(--green-dark); font-size: 12px; }
.qr-section { padding: 14px; }
.qr-section h2 { margin: 0 0 12px; font-size: 15px; }
.qr-code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; align-items: start; }
.qr-poster { width: min(100%, 270px); overflow: hidden; border: 1px solid #e2d9d9; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px #38212612; break-inside: avoid; }
.qr-poster-red { position: relative; padding: 16px 20px 28px; border-radius: 5px 5px 50% 50% / 5px 5px 9% 9%; background: linear-gradient(180deg, #032ea1 0 22%, #d90e26 22% 78%, #032ea1 78%); color: #fff; text-align: center; }
.qr-poster-brand { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 750; letter-spacing: 1px; }
.qr-poster-red h3 { margin: 0; font-size: 19px; font-weight: 650; }
.qr-poster-red p { min-height: 16px; margin: 4px 0 12px; color: #fff0f0; font-size: 12px; }
.qr-local-test-badge { display: block; width: fit-content; margin: 9px auto 0; padding: 4px 7px; border: 1px solid #ffffff8a; background: #032ea1; color: #fff; font-size: 8px; font-weight: 750; letter-spacing: .5px; }
.qr-poster-frame { position: relative; display: grid; width: fit-content; min-width: 174px; min-height: 174px; place-items: center; margin: 0 auto; padding: 6px; border: 2px solid #fff; background: #fff; }
.qr-poster-frame::before, .qr-poster-frame::after { position: absolute; z-index: 1; width: 18px; height: 18px; border-color: #f5b5bd; border-style: solid; content: ""; }
.qr-poster-frame::before { top: -8px; left: -8px; border-width: 3px 0 0 3px; }
.qr-poster-frame::after { right: -8px; bottom: -8px; border-width: 0 3px 3px 0; }
.qr-code-image { display: block; width: 162px; height: 162px; image-rendering: pixelated; }
.qr-code-center { position: absolute; z-index: 2; top: 50%; left: 50%; width: 32px; height: 32px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 4px; background: #fff; }
.qr-code-center img { display: block; width: 25px; height: 20px; object-fit: contain; }
.qr-code-empty { display: grid; width: 162px; height: 162px; place-items: center; background: #f4f6f2; color: var(--muted); font-size: 11px; text-align: center; }
.qr-poster-white { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 18px 16px; background: #fff; text-align: center; }
.qr-angkor-mark { width: 42px; height: 32px; object-fit: contain; }
.qr-poster-white strong { color: #b30d28; font-size: 16px; }
.qr-poster-white small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.qr-poster-white code { max-width: 100%; overflow-wrap: anywhere; color: #8a7779; font-size: 8px; }
.qr-download-button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 0 11px; border: 1px solid #032ea1; border-radius: 3px; background: #032ea1; color: #fff; font-size: 10px; font-weight: 700; text-decoration: none; }
.qr-download-button:hover { background: #d90e26; border-color: #d90e26; color: #fff; }
.delivery-tier-title { margin: 19px 0 10px; font-size: 13px; }
.delivery-tier-row { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)) auto; align-items: end; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.delivery-tier-row .form-field { margin: 0; }
.delivery-config-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.customer-order-card { margin: 10px 0; padding: 13px; border: 1px solid #e3e7e2; background: #fff; }
.customer-order-card header, .customer-order-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.customer-order-card header > div { display: flex; align-items: center; gap: 9px; }
.order-source-pill, .customer-order-status { padding: 4px 7px; background: #eff4ef; color: #35634f; font-size: 10px; }
.customer-order-lines { display: grid; gap: 4px; margin: 12px 0; color: #454d46; font-size: 12px; }
.customer-order-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 11px; }
.customer-order-meta a { color: #2c6c9a; }
.customer-order-card footer { margin-top: 13px; padding-top: 10px; border-top: 1px solid #e5e8e3; font-size: 12px; }
body.qr-print-mode .topbar, body.qr-print-mode .sidebar, body.qr-print-mode .page-head .page-actions, body.qr-print-mode .qr-config-warning, body.qr-print-mode .qr-config-ready { display: none !important; }
body.qr-print-mode .app-layout { display: block; }
body.qr-print-mode .content-area { padding: 0; }
body.qr-print-mode .qr-section { border: 0; box-shadow: none; }
body.qr-print-mode .qr-code-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .delivery-tier-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .customer-order-card header { align-items: flex-start; } }
@media print {
  body.qr-print-mode .qr-poster { width: 62mm; box-shadow: none; }
  body.qr-print-mode .qr-code-grid { grid-template-columns: repeat(3, 62mm); gap: 6mm; }
  body.qr-print-mode .qr-code-image, body.qr-print-mode .qr-code-empty { width: 42mm; height: 42mm; }
}
.inventory-table-wrap { max-width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow-x: auto; overflow-y: hidden; }
.inventory-table { width: 100%; min-width: 1050px; max-width: 1200px; table-layout: fixed; border-collapse: separate; border-spacing: 0 5px; }
.inventory-image-column { width: 10%; }
.inventory-product-column { width: 22%; }
.inventory-category-column { width: 12%; }
.inventory-quantity-column { width: 11.5%; }
.inventory-reorder-column { width: 7.5%; }
.inventory-status-column { width: 12%; }
.inventory-quick-column { width: 19.5%; }
.inventory-tools-column { width: 5.5%; }
.inventory-table thead th { padding: 9px 10px; border: 0; background: transparent; color: #77838a; font-size: 10px; white-space: nowrap; }
.inventory-table tbody tr.inventory-item-row { background: #fff; }
.inventory-table tbody tr.inventory-item-row:nth-child(4n + 2) { background: #f8fafb; }
.inventory-table .inventory-item-row td { height: 64px; padding: 8px 10px; border-top: 1px solid #e9edef; border-bottom: 1px solid #e9edef; }
.inventory-table .inventory-item-row td:first-child { border-left: 1px solid #e9edef; border-radius: 5px 0 0 5px; }
.inventory-table .inventory-item-row td:last-child { border-right: 1px solid #e9edef; border-radius: 0 5px 5px 0; }
.inventory-table .inventory-item-row:hover { background: #f3f8f6; }
.inventory-category-row th { padding: 12px 10px 5px; border: 0; background: transparent; color: #38454c; font-size: 12px; }
.inventory-category-mark { display: inline-grid; width: 22px; height: 22px; place-items: center; margin-right: 8px; border-radius: 4px; background: #e9f1f5; color: #4482a2; font-size: 11px; }
.inventory-category-count { display: inline-block; margin-left: 8px; padding: 3px 7px; border-radius: 10px; background: #e9eef1; color: #62717a; font-size: 9px; font-weight: 650; }
.inventory-thumb { width: 46px; height: 46px; border-radius: 5px; }
.inventory-thumb.placeholder { display: grid; place-items: center; border-color: #e6eaeb; background: #edf2f3; color: #89969b; font-size: 18px; font-weight: 700; }
.inventory-product-cell { min-width: 190px; }
.inventory-product-cell strong { display: block; color: #26343b; font-size: 12px; font-weight: 700; }
.inventory-item-code { display: block; margin-bottom: 3px; color: #78858b; font-size: 9px; }
.inventory-category-tag { display: inline-flex; flex: 0 0 auto; padding: 4px 8px; border: 1px solid #dcecf2; border-radius: 12px; background: #eaf6fa; color: #36758b; font-size: 10px; font-weight: 650; white-space: nowrap; }
.inventory-category-cell { white-space: nowrap; }
.inventory-quantity { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.inventory-quantity strong { color: #1f2c33; font-size: 18px; font-variant-numeric: tabular-nums; }
.inventory-quantity span { padding: 3px 6px; border-radius: 3px; background: #edf1f3; color: #637078; font-size: 9px; }
.inventory-quick-actions, .inventory-row-tools { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.inventory-quick-actions .button, .inventory-row-tools .button { min-width: 29px; min-height: 27px; padding: 0 5px; font-size: 10px; }
.inventory-quick-actions .stock-plus { border-color: #d3eee0; background: #f0faf5; color: #238454; }
.inventory-quick-actions .stock-plus:hover { border-color: #91d2af; background: #e4f7ed; }
.inventory-quick-actions .stock-minus { border-color: #f1d9d9; background: #fff6f5; color: #b74a4a; }
.inventory-quick-actions .stock-minus:disabled { opacity: .4; cursor: not-allowed; }
.inventory-quick-actions .stock-more { min-width: 27px; color: #66747c; font-weight: 800; letter-spacing: 0; }
.inventory-row-tools .stock-edit { border-color: #d2e4f3; background: #eef6fc; color: #337bae; font-size: 14px; }
.inventory-row-tools .stock-history { border-color: #eedcdd; background: #fff3f3; color: #b94c4c; font-size: 14px; }
.inventory-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.inventory-hub-card { display: flex; align-items: flex-start; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-align: left; }
.inventory-hub-card:hover { border-color: #b9dcc8; background: #f3f9f5; }
.inventory-hub-icon { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border-radius: 7px; background: #e7f3eb; color: var(--green-dark); font-size: 18px; }
.inventory-hub-text strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 13px; }
.inventory-hub-text small { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.inventory-subnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.inventory-subnav-back { padding: 0; border: 0; background: transparent; color: var(--green-dark); font-size: 12px; font-weight: 650; }
.inventory-subnav-tabs { display: flex; gap: 4px; }
.inventory-subnav-tab { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--muted); font-size: 11px; font-weight: 650; }
.inventory-subnav-tab.active { border-color: var(--green); background: #e7f3eb; color: var(--green-dark); }
.inventory-batch-input { width: 100%; max-width: 140px; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; }
.inventory-batch-input:focus { border-color: #61a181; outline: 0; box-shadow: 0 0 0 3px #197b5614; }
.inventory-stocktake-diff { font-variant-numeric: tabular-nums; font-weight: 650; }
.inventory-draft-hint { margin: -4px 0 12px; padding: 8px 12px; border: 1px solid #d3eee0; border-radius: 6px; background: #f0faf5; color: #238454; font-size: 11px; }
.inventory-batch-footer { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 16px; }
.inventory-batch-reason { flex: 1 1 280px; max-width: 420px; margin: 0; }
.inventory-batch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inventory-stats-date { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 650; }
.inventory-stats-date input { min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); font: inherit; font-size: 12px; }
.inventory-stats-kpis { margin: 18px 0 6px; }
.inventory-stats-section { margin-top: 26px; }
.inventory-stats-subhead { margin-bottom: 12px; align-items: center; }
.inventory-stats-subhead h2 { margin: 0; font-size: 15px; }
.purchasing-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.purchasing-flow-step { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #d3eee0; border-radius: 7px; background: #f0faf5; }
.purchasing-flow-index { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-dark); color: white; font-size: 11px; font-weight: 700; }
.purchasing-flow-label { font-size: 12px; color: var(--ink); font-weight: 600; }
.purchasing-flow-arrow { color: var(--muted); font-size: 16px; }
.purchasing-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.purchasing-best-price { background: #f0faf5; }
.purchasing-best-price td:nth-child(4) { color: var(--green-dark); font-weight: 700; }
.menu-workspace { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 14px; }
.menu-management-tabs { display: flex; align-items: center; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.menu-management-tab { position: relative; min-height: 42px; padding: 0 15px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; }
.menu-management-tab:hover { background: #f3f7f4; color: var(--ink); }
.menu-management-tab.active { color: var(--green-dark); }
.menu-management-tab.active::after { position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; background: var(--green); content: ""; }
.category-manager { padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.category-manager-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.category-manager-head h2 { margin: 0; font-size: 16px; }
.category-manager-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.category-manager-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.category-manager-summary span { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid #e2e9e3; border-radius: 5px; background: #f7faf7; color: var(--muted); font-size: 10px; }
.category-manager-summary strong { color: var(--ink); font-size: 11px; }
.category-tree-child { display: grid; gap: 3px; padding-left: 18px; }
.category-tree-child span { color: var(--muted); font-size: 10px; }
.category-tree-child strong { color: var(--ink); font-size: 11px; }
.menu-category-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 8px 9px; }
.menu-category-heading h2 { margin: 0; color: var(--ink); font-size: 13px; }
.menu-category-heading .button { min-height: 30px; padding: 0 9px; font-size: 10px; }
.menu-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.menu-catalog-toolbar .toolbar { flex: 1; margin: 0; }
.menu-catalog-toolbar > .button { flex: 0 0 auto; }
.menu-category-panel { min-width: 0; padding: 13px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.menu-category-panel h2 { margin: 0 8px 9px; color: var(--ink); font-size: 13px; }
.menu-category-list { display: grid; gap: 3px; }
.menu-category-filter { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 35px; padding: 6px 9px; border: 0; border-radius: 4px; background: transparent; color: #4d5b62; text-align: left; font-size: 11px; }
.menu-category-filter span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-category-filter small { flex: 0 0 auto; color: #7d898f; font-size: 10px; }
.menu-category-filter:hover { background: #f1f6f5; }
.menu-category-filter.active { background: #e8f4ef; color: var(--green-dark); font-weight: 700; box-shadow: inset 3px 0 var(--green); }
.menu-category-filter.active small { color: var(--green-dark); }
.menu-category-filter-secondary { position: relative; width: calc(100% - 14px); margin-left: 14px; padding-left: 15px; }
.menu-category-filter-secondary::before { position: absolute; left: 5px; top: -5px; width: 7px; height: calc(50% + 5px); border-left: 1px solid #cdd8d5; border-bottom: 1px solid #cdd8d5; border-radius: 0 0 0 4px; content: ""; }
.category-tree-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.category-tree-name strong { font-size: 11px; }
.category-level-mark { display: inline-grid; min-width: 24px; height: 20px; place-items: center; border-radius: 4px; background: #e8f1ee; color: #287353; font-size: 9px; font-weight: 750; }
.category-tree-branch { color: #82918e; font-size: 14px; }
.category-parent-name { color: #8b9693; font-size: 10px; }
.category-row-secondary td:nth-child(2) { padding-left: 20px; }
.menu-catalog { min-width: 0; }
.menu-toolbar { justify-content: flex-start; }
.menu-toolbar .search-input { width: min(360px, 100%); }
.menu-bulk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin-bottom: 9px; padding: 6px 10px; border: 1px solid #d7e9e1; border-radius: 5px; background: #f1f8f4; color: #275e4a; font-size: 11px; }
.menu-bulk-actions { display: flex; align-items: center; gap: 6px; }
.menu-bulk-actions .button { min-height: 30px; }
.menu-bulk-toolbar .button:disabled { opacity: .48; cursor: not-allowed; }
.menu-bulk-select-all { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #dce8df; border-radius: 5px; background: #f5f9f6; }
.menu-bulk-select-all label { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap; }
.menu-bulk-select-all input { width: 15px; height: 15px; accent-color: var(--green); }
.menu-bulk-select-all span { color: var(--muted); font-size: 10px; }
.menu-table { min-width: 960px; }
.menu-table th:first-child, .menu-table td:first-child { width: 38px; text-align: center; }
.menu-table input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--green); vertical-align: middle; }
.menu-bulk-summary { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.menu-bulk-fields { display: grid; gap: 8px; }
.menu-bulk-attribute { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px; border-bottom: 1px solid #edf0f1; }
.menu-bulk-attribute > label { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 11px; }
.menu-bulk-attribute input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); }
.menu-bulk-attribute input[type="text"], .menu-bulk-attribute select { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--ink); font: inherit; font-size: 11px; }
.menu-bulk-attribute :disabled { background: #f4f6f6; color: #909b9f; }
.menu-bulk-item-type { grid-template-columns: 180px minmax(0, 1fr); }
.menu-bulk-type-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 36px; padding: 5px 8px; border: 1px solid #cfe1d7; border-radius: 4px; background: #e8f3ec; }
.menu-bulk-type-options label { display: inline-flex; align-items: center; gap: 5px; color: #33483a; font-size: 11px; white-space: nowrap; }
.menu-bulk-type-options input[type="radio"] { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.menu-bulk-type-options input[type="radio"]:disabled { opacity: .55; }
.menu-bulk-allergens { align-items: start; }
.menu-bulk-allergen-list { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; min-width: 0; }
.menu-bulk-allergen-list .allergen-edit-row { flex: 1 1 170px; grid-template-columns: minmax(0, 1fr) 92px; gap: 5px; padding: 4px 6px; }
.menu-bulk-allergen-list .allergen-edit-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-bulk-allergen-list .allergen-exposure,
.menu-bulk-allergen-list select { width: 100%; min-height: 30px; padding: 3px 5px; font-size: 10px; }
.menu-bulk-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.member-kpi-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); margin-bottom: 14px; }
.member-kpi-grid .kpi { padding: 12px 15px; }
.member-kpi-grid .kpi strong { font-size: 19px; }
.member-filter { width: auto; min-width: 145px; }
.member-tag-fieldset { margin: 14px 0 0; padding: 11px; border: 1px solid var(--line); border-radius: 5px; }
.member-tag-fieldset legend { padding: 0 6px; color: var(--muted); font-size: 11px; }
.member-tag-options { display: flex; flex-wrap: wrap; gap: 7px; }
.member-tag-choice { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.member-tag-choice input { accent-color: var(--green); }
.member-tag-choice span, .member-tag-chip { display: inline-flex; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--tag-color, var(--green)) 24%, white); border-radius: 4px; background: color-mix(in srgb, var(--tag-color, var(--green)) 9%, white); color: var(--tag-color, var(--green)); font-size: 10px; font-weight: 650; }
.member-address-field { grid-column: 1 / -1; }
.member-tag-create-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: end; gap: 10px; margin-bottom: 16px; }
.member-tag-create-form input[type="color"] { min-height: 38px; padding: 3px; }
.member-tag-table { max-height: 45vh; }
.member-tag-table table { min-width: 360px; }

@media (max-width: 760px) {
  .discount-settings-layout { grid-template-columns: 1fr; }
  .topbar { height: 58px; padding: 0 12px; }
  .topbar-actions { gap: 8px; }
  .store-label { display: none; }
  .app-layout { min-height: calc(100vh - 58px); grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav-item { flex: 0 0 auto; min-height: 38px; }
  .back-to-pos { flex: 0 0 auto; margin: 0 8px; padding: 11px 8px; border-top: 0; border-left: 1px solid var(--line); }
  .content-area { padding: 18px 12px 28px; }
  .sidebar { position: static; height: auto; }
  .page-head { align-items: start; }
  .page-actions { justify-content: end; }
  .page-head h1 { font-size: 20px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .member-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-kpi-grid .kpi { padding: 10px 8px; }
  .member-kpi-grid .kpi strong { font-size: 14px; }
  .member-filter { flex: 1 1 130px; }
  .member-tag-create-form { grid-template-columns: 1fr; }
  .cashbox-summary { grid-template-columns: 1fr; }
  .settings-grid, .form-grid, .legacy-price-grid, .platform-create-form, .category-edit-form { grid-template-columns: 1fr; }
  .platform-create-form label:last-child { grid-column: auto; }
  .allergen-edit-row { flex-basis: min(100%, 240px); grid-template-columns: minmax(0, 1fr) 105px; }
  .price-scheme-edit-row { grid-template-columns: 1fr; }
  .modifier-rule-row { grid-template-columns: 1fr; }
  .bundle-component-row { grid-template-columns: 1fr; }
  .page-head { flex-wrap: wrap; }
  .inventory-filters { width: 100%; align-items: stretch; flex-direction: column; }
  .inventory-category-select, .inventory-filters .search-input { flex-basis: auto; width: 100%; }
  .inventory-file-actions { width: 100%; }
  .inventory-file-actions .button { flex: 1 1 0; }
  .menu-workspace { grid-template-columns: 1fr; }
  .menu-category-panel { padding: 10px; }
  .menu-category-list { display: flex; overflow-x: auto; gap: 5px; padding-bottom: 3px; }
  .menu-category-filter { flex: 0 0 auto; width: auto; }
  .menu-bulk-attribute { grid-template-columns: 1fr; }
  .menu-bulk-item-type { grid-template-columns: 1fr; }
  .menu-bulk-allergen-list .allergen-edit-row { flex-basis: 170px; }
}

@media (max-width: 520px) { .tool-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.login-help-qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.login-help-qr-field { display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; gap: 12px; }
.login-help-qr-preview { display: grid; width: 128px; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #f7f9f7; color: var(--muted); font-size: 10px; }
.login-help-qr-preview img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 760px) {
  .login-help-qr-grid { grid-template-columns: 1fr; }
}

.management-launch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 24px; }
.management-launch-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; align-items: center; gap: 13px; min-height: 104px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; }
.management-launch-card:hover { transform: translateY(-1px); border-color: #91bba0; box-shadow: 0 5px 16px #243d2b12; }
.management-launch-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 8px; background: #edf5ff; color: #3479c5; font-size: 24px; font-weight: 650; }
.management-launch-card strong { display: block; margin-bottom: 5px; font-size: 16px; }
.management-launch-card small { display: block; color: var(--muted); font-size: 11px; line-height: 1.55; }
.management-launch-arrow { color: #82918a; font-size: 24px; }
.cash-management-heading { justify-content: flex-start; margin: -8px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cash-management-heading h1 { display: flex; align-items: center; gap: 8px; color: #47534a; font-size: 20px; }
.cash-management-heading h1 span { font-size: 19px; font-weight: 400; }
.cash-management-grid { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cash-management-quick-actions { margin-bottom: 20px; }
.cash-management-card { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 14px; align-items: center; gap: 12px; min-height: 122px; padding: 15px; border: 1px solid #edf0ed; border-radius: 12px; background: var(--paper); box-shadow: 0 5px 18px #243d2b0a; color: var(--ink); text-align: left; }
.cash-management-card:not(:disabled):hover { border-color: #c9d9f2; box-shadow: 0 7px 20px #243d2b12; }
.cash-management-card .management-launch-icon { width: 52px; height: 52px; border-radius: 12px; background: #f0f3f8; color: #3479e8; font-size: 25px; }
.cash-management-card strong { display: block; margin-bottom: 5px; font-size: 16px; }
.cash-management-card small { display: block; color: #77818c; font-size: 12px; line-height: 1.55; }
.cash-management-card:disabled { cursor: not-allowed; opacity: .68; }
.cash-management-status { position: absolute; top: 8px; right: 10px; color: #87918a; font-size: 10px; }
.voucher-groups-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; gap: 16px; }
.voucher-group-pane, .voucher-group-vouchers-pane { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.voucher-group-toolbar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid #e7eaed; }
.voucher-group-toolbar .page-actions { align-items: center; gap: 8px; }
.voucher-group-total { padding: 0 4px; color: var(--ink); font-size: 14px; white-space: nowrap; }
.voucher-group-table, .voucher-definition-table { min-width: 620px; margin: 0; }
.voucher-definition-table { min-width: 660px; }
.voucher-group-table th:first-child, .voucher-group-table td:first-child { width: 44px; text-align: center; }
.voucher-group-table th:nth-child(2), .voucher-group-table td:nth-child(2) { width: 100px; }
.voucher-group-table td, .voucher-definition-table td { vertical-align: middle; }
.voucher-group-table tbody tr.is-selected > * { background: #eef6ff; }
.voucher-group-table input[type="radio"] { width: 17px; height: 17px; accent-color: #3479e8; }
.voucher-group-table .row-actions { gap: 5px; }
.voucher-group-table .row-actions .button, .voucher-definition-table .button { min-height: 30px; padding: 0 8px; }
.voucher-definition-secondary { display: flex; justify-content: flex-end; margin-top: 14px; }
.voucher-definition-editor { min-height: 100%; margin: -24px clamp(-34px, -2.5vw, -16px); background: #fff; }
.voucher-definition-editor-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; border-bottom: 1px solid #e7e7e7; }
.voucher-definition-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.voucher-definition-title h1 { margin: 0; font-size: 18px; font-weight: 650; }
.voucher-definition-close { width: 26px; height: 30px; padding: 0; border: 0; background: transparent; color: #899098; font-size: 26px; line-height: 1; cursor: pointer; }
.voucher-definition-form-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); align-items: start; gap: clamp(20px, 3vw, 42px); padding: 28px clamp(16px, 2.5vw, 34px); }
.voucher-definition-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 24px; }
.voucher-definition-fields .form-field { min-width: 0; }
.voucher-definition-fields input, .voucher-definition-fields textarea { width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid #d8dadd; border-radius: 3px; background: #fff; color: var(--ink); font: inherit; }
.voucher-definition-fields input:read-only { background: #f3f3f3; color: #a1a5aa; }
.voucher-definition-fields input:focus, .voucher-definition-fields textarea:focus { border-color: #4384df; outline: 0; box-shadow: 0 0 0 2px #4384df22; }
.voucher-definition-fields input::placeholder, .voucher-definition-fields textarea::placeholder { color: #b1b6bc; }
.voucher-definition-fields .required-mark { color: #ed6262; }
.voucher-definition-amount { display: flex; min-height: 38px; border: 1px solid #d8dadd; border-radius: 3px; background: #fff; }
.voucher-definition-amount:focus-within { border-color: #4384df; box-shadow: 0 0 0 2px #4384df22; }
.voucher-definition-amount input { min-width: 0; border: 0; outline: 0; box-shadow: none; }
.voucher-definition-amount > span { min-width: 36px; display: grid; place-items: center; border-left: 1px solid #e4e5e7; background: #fafafa; color: #444; }
.voucher-definition-fields .voucher-definition-note { grid-column: 1; }
.voucher-definition-note textarea { min-height: 92px; resize: vertical; }
.voucher-definition-help { min-height: 180px; padding: 24px; border-radius: 6px; background: #fafafa; color: var(--ink); }
.voucher-definition-help h2 { margin: 0 0 24px; font-size: 16px; font-weight: 700; }
.voucher-definition-help dl { display: grid; gap: 6px; margin: 0; }
.voucher-definition-help dt { margin-top: 14px; font-size: 14px; font-weight: 500; }
.voucher-definition-help dd { margin: 0; color: #8c9298; font-size: 13px; }
.voucher-group-form-layout .voucher-definition-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.voucher-association-list { max-height: min(55vh, 480px); display: grid; gap: 6px; overflow: auto; }
.voucher-association-option { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e6e9ec; border-radius: 5px; background: #fff; cursor: pointer; }
.voucher-association-option input { width: 17px; height: 17px; accent-color: #3479e8; }
.voucher-association-option span { display: grid; gap: 4px; }
.voucher-association-option small { color: var(--muted); }
.payment-method-table-wrap { max-width: 100%; }
.payment-method-table { min-width: 1980px; }
.payment-method-table th, .payment-method-table td { white-space: nowrap; }
.payment-method-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px 0 18px; }
.payment-method-form-section { margin-bottom: 14px; padding: 0 12px 13px; border: 1px solid #e8edf0; border-radius: 4px; }
.payment-method-form-section > h2 { margin: 0 -12px 12px; padding: 11px 12px; border-bottom: 1px solid #e8edf0; font-size: 13px; }
.payment-method-basic { background: #f0f8fd; border-color: #d9eaf5; }
.payment-method-basic > h2 { border-color: #d9eaf5; }
.payment-method-settlement { background: #fff7ed; border-color: #f5e8d8; }
.payment-method-settlement > h2 { border-color: #f5e8d8; }
.payment-method-functions { background: #effaf3; border-color: #d8eddf; }
.payment-method-functions > h2 { border-color: #d8eddf; }
.payment-method-amounts { background: #f6efff; border-color: #e7dafa; }
.payment-method-amounts > h2 { border-color: #e7dafa; }
.payment-method-currency { background: #fff8d8; border-color: #efe6b8; }
.payment-method-currency > h2 { border-color: #efe6b8; }
.payment-method-self-service { background: #eafafa; border-color: #d2eeee; }
.payment-method-self-service > h2 { border-color: #d2eeee; }
.payment-method-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-bottom: 12px; }
.payment-method-flags label { display: flex; align-items: center; gap: 7px; min-height: 24px; font-size: 12px; }
.payment-method-flags input, .payment-method-currency input[type="checkbox"], .payment-method-self-service input[type="checkbox"] { accent-color: #3479e8; }
.payment-method-print-mode { display: block; max-width: 50%; }
.payment-method-print-mode select { display: block; margin-top: 5px; }
.payment-currency-list { display: grid; gap: 8px; margin-top: 12px; }
.payment-currency-row { padding: 0 10px 10px; border: 1px solid #e2e4dc; border-radius: 4px; background: #fff; }
.payment-currency-row h3 { margin: 0 -10px 10px; padding: 9px 10px; border-bottom: 1px solid #eceee8; font-size: 12px; font-weight: 500; }
.payment-icon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.payment-icon-field { display: grid; gap: 7px; font-size: 11px; }
.payment-icon-upload { display: flex; width: 132px; height: 132px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; overflow: hidden; border: 1px dashed #d6e4e4; background: #fff; color: #47534a; cursor: pointer; }
.payment-icon-upload > span { font-size: 25px; }
.payment-icon-upload img { width: 100%; height: 100%; object-fit: contain; }
.payment-icon-upload input { display: none; }
.payment-icon-upload small { font-size: 10px; }
.management-back-row { margin: -8px 0 18px; }
.management-back-button { padding: 4px 0; border: 0; background: transparent; color: var(--green-dark); font-size: 12px; font-weight: 650; }
.management-back-button:hover { color: var(--green); text-decoration: underline; }
.restaurant-management-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; }
.restaurant-management-column { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #f9fbfd; }
.restaurant-management-column h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #3379c2; font-size: 14px; }
.restaurant-management-column h2 span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 5px; background: #eaf3ff; }
.restaurant-management-column > div { display: grid; gap: 8px; }
.restaurant-feature-card { display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 66px; padding: 10px; border: 1px solid #e3eaf0; border-radius: 6px; background: white; color: var(--ink); text-align: left; }
.restaurant-feature-card:not(:disabled):hover { border-color: #9ebfe0; background: #f7fbff; }
.restaurant-feature-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 6px; background: #edf5ff; color: #3479c5; font-size: 17px; font-weight: 650; }
.restaurant-feature-copy { min-width: 0; }
.restaurant-feature-copy strong { display: block; margin-bottom: 3px; font-size: 11px; }
.restaurant-feature-copy small { display: block; color: var(--muted); font-size: 9px; line-height: 1.4; }
.restaurant-feature-card.unavailable { cursor: not-allowed; background: #f7f8f9; color: #69737a; }
.restaurant-feature-card.unavailable .restaurant-feature-icon { background: #eff1f3; color: #87919a; }

@media (max-width: 1100px) {
  .restaurant-management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .management-launch-grid { grid-template-columns: 1fr; }
  .management-launch-card { min-height: 82px; }
  .cash-management-grid { width: 100%; }
  .cash-management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-management-card { grid-template-columns: 44px minmax(0, 1fr) 12px; gap: 10px; min-height: 104px; padding: 12px; }
  .cash-management-card .management-launch-icon { width: 44px; height: 44px; font-size: 22px; }
  .cash-management-card strong { font-size: 15px; }
  .cash-management-card small { font-size: 11px; }
  .voucher-groups-workspace { grid-template-columns: minmax(0, 1fr); }
  .voucher-definition-editor { margin: -24px -16px; }
  .voucher-definition-form-layout { grid-template-columns: minmax(0, 1fr); }
  .voucher-definition-help { min-height: 0; }
  .payment-method-flags, .payment-icon-grid { grid-template-columns: 1fr; }
  .payment-method-print-mode { max-width: none; }
}

@media (max-width: 520px) {
  .cash-management-grid { grid-template-columns: minmax(0, 1fr); }
  .voucher-definition-editor-head { align-items: flex-start; padding: 12px; }
  .voucher-definition-editor-head .page-actions { gap: 6px; }
  .voucher-definition-form-layout { padding: 18px 12px; }
  .voucher-definition-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .voucher-definition-fields .voucher-definition-note { grid-column: auto; }
  .voucher-group-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .restaurant-management-grid { grid-template-columns: 1fr; }
}

.hardware-staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; }
.hardware-staff-column { min-width: 0; }
.hardware-staff-column h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 0 9px; border-bottom: 1px solid #e3e8ed; color: #4b535a; font-size: 16px; }
.hardware-staff-column h2 span { font-size: 18px; font-weight: 400; }
.hardware-staff-column > div { display: grid; gap: 12px; }
.hardware-feature-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 108px; padding: 13px; border: 1px solid #e8ecef; border-radius: 10px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 4px 12px #1b2c3a08; }
.hardware-feature-card:not(:disabled):hover { border-color: #aac8ed; background: #fbfdff; box-shadow: 0 6px 16px #1b2c3a12; }
.hardware-feature-icon { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 14px; background: #f0f4f9; color: #3d83e8; font-size: 31px; font-weight: 600; }
.hardware-feature-copy { min-width: 0; }
.hardware-feature-copy strong { display: block; margin-bottom: 5px; color: #4a5158; font-size: 16px; }
.hardware-feature-copy small { display: block; color: #929ba3; font-size: 12px; line-height: 1.55; }
.hardware-feature-card.unavailable { cursor: not-allowed; background: #f9fafb; box-shadow: none; }
.hardware-feature-card.unavailable .hardware-feature-icon { color: #9aabbf; }

@media (max-width: 1100px) {
  .hardware-staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hardware-staff-grid { grid-template-columns: 1fr; gap: 24px; }
}

.report-hub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 18px; }
.report-hub-column { min-width: 0; }
.report-hub-column h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid #e6eaed; color: #596168; font-size: 14px; }
.report-hub-column h2 span { color: #6c747a; font-size: 16px; font-weight: 400; }
.report-hub-column > div { display: grid; gap: 10px; }
.report-hub-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 68px; padding: 9px; border: 1px solid #e9edf0; border-radius: 8px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 3px 10px #1b2c3a08; }
.report-hub-card:not(:disabled):hover { border-color: #b7cfee; background: #f8fbff; box-shadow: 0 5px 14px #1b2c3a10; }
.report-hub-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 9px; background: #f0f4f9; color: #3d83e8; font-size: 20px; font-weight: 600; }
.report-hub-copy { min-width: 0; }
.report-hub-copy strong { display: block; margin-bottom: 3px; color: #525a60; font-size: 12px; }
.report-hub-copy small { display: block; color: #959da4; font-size: 10px; line-height: 1.4; }
.report-hub-card.unavailable { cursor: not-allowed; background: #fafbfc; box-shadow: none; }
.report-hub-card.unavailable .report-hub-icon { color: #8fafd7; }

@media (max-width: 1100px) {
  .report-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .report-hub-grid { grid-template-columns: 1fr; }
}

.printer-wizard-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); align-items: start; gap: 18px; }
.printer-wizard-config { min-width: 0; }
.printer-wizard-config-intro { margin-bottom: 12px; padding: 16px 18px; border: 1px solid #dce9f4; border-radius: 7px; background: #f2f8fd; }
.printer-wizard-config-intro h2 { margin: 0 0 5px; font-size: 15px; }
.printer-wizard-config-intro p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.printer-wizard-config > .settings-section { max-width: none; }
.printer-wizard-guide { position: sticky; top: 16px; padding: 18px; border: 1px solid #e5e9ed; border-radius: 8px; background: #fff; box-shadow: 0 4px 14px #1b2c3a08; }
.printer-wizard-guide h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #343d44; font-size: 15px; }
.printer-wizard-guide h2 span { color: #4384d7; }
.printer-wizard-lead { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.printer-wizard-guide ol { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.printer-wizard-guide li { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: start; gap: 9px; }
.printer-wizard-step-number { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #edf4fc; color: #3479c5; font-size: 11px; font-weight: 700; }
.printer-wizard-guide li strong { display: block; margin: 3px 0 5px; color: #39444c; font-size: 12px; }
.printer-wizard-guide li p { margin: 0; color: #74808a; font-size: 11px; line-height: 1.65; }
.printer-wizard-menu-link { min-height: 30px; margin-top: 8px; padding: 0 9px; color: #3479c5; font-size: 10px; }
.dialog:has(#printer-form) { display: flex; width: min(1120px, 96vw); max-height: 92vh; flex-direction: column; overflow: hidden; }
.dialog:has(#printer-form) .dialog-body { overflow: auto; }
.printer-editor-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .8fr); align-items: start; gap: 20px; }
.printer-editor-form { display: grid; gap: 14px; min-width: 0; }
.printer-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.printer-editor-grid .form-field { min-width: 0; }
.required-mark { color: #c54242; }
.printer-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 13px; }
.printer-option { justify-content: start; min-height: 30px; margin: 0; }
.printer-option.form-field.form-toggle { grid-template-columns: auto minmax(0, 1fr); justify-content: start; gap: 8px; color: #505c64; }
.printer-option.form-field.form-toggle input[type="checkbox"] { grid-column: 1; grid-row: 1; width: 15px; min-height: 15px; }
.printer-option.form-field.form-toggle span { grid-column: 2; grid-row: 1; }
.printer-meal-types { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 6px; }
.printer-meal-types legend { padding: 0 5px; color: #59656d; font-size: 11px; font-weight: 700; }
.printer-meal-types label { display: inline-flex; align-items: center; gap: 5px; color: #505c64; font-size: 11px; }
.printer-meal-types input { width: 15px; height: 15px; accent-color: var(--green); }
.printer-config-note { margin: 0; padding: 9px 11px; border: 1px solid #f0dfb9; border-radius: 5px; background: #fffaf0; color: #80683b; font-size: 10px; line-height: 1.55; }
.printer-editor-help { padding: 14px; border-radius: 7px; background: #f7f8fa; }
.printer-editor-help h3 { margin: 0 0 12px; color: #414a50; font-size: 13px; }
.printer-editor-help p { margin: 0 0 12px; color: #858f96; font-size: 10px; line-height: 1.55; }
.printer-editor-help p:last-child { margin-bottom: 0; }
.printer-editor-help strong { display: block; margin-bottom: 3px; color: #555f66; font-size: 11px; }
.dialog:has(#printer-header-form), .dialog:has(#printer-footer-form) { display: flex; width: min(1600px, 96vw); max-height: 92vh; flex-direction: column; overflow: hidden; }
.dialog:has(#printer-header-form) .dialog-body, .dialog:has(#printer-footer-form) .dialog-body { overflow: auto; }
.printer-header-editor-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); align-items: start; gap: 24px; }
.printer-header-editor-layout form { min-width: 0; }
.printer-header-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.printer-receipt-first-line { grid-column: 1 / -1; }
.printer-header-line { display: grid; grid-template-columns: minmax(0, 1fr); }
.printer-header-line.with-action { grid-template-columns: minmax(0, 1fr) auto; }
.printer-header-help { margin: 0; padding: 18px 20px; border-radius: 7px; background: #f7f8fa; color: #7e8991; font-size: 12px; line-height: 1.6; }
.printer-header-help h3 { margin: 0 0 10px; color: #414a50; font-size: 13px; }
.printer-header-help strong { display: block; color: #555f66; }
.printer-header-help p { margin: 3px 0 9px; }
.printer-header-list { max-width: none; }
.printer-receipt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.printer-receipt-description { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.printer-header-list table { min-width: 560px; }
.printer-header-list th, .printer-header-list td { font-size: 14px; }
.dialog:has(#staff-permission-profile-form) { display: flex; width: min(1500px, 96vw); max-height: 94vh; flex-direction: column; overflow: hidden; }
.dialog:has(#staff-permission-profile-form) .dialog-body { overflow: auto; }
.staff-profile-section { margin: 0 0 14px; border: 1px solid #dfe6e1; border-radius: 6px; overflow: hidden; }
.staff-profile-section h3 { margin: 0; padding: 11px 13px; border-bottom: 1px solid #e5eae6; font-size: 13px; }
.staff-profile-basics { background: #eff8fd; }
.staff-profile-menu { background: #fff7ed; }
.staff-profile-cashier { background: #effaf2; }
.staff-profile-backend { background: #f5edff; }
.staff-profile-reservation { background: #fff5cc; }
.staff-profile-reports { background: #eafafa; }
.staff-profile-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; padding: 13px; }
.staff-profile-fields .form-field { min-width: 0; margin: 0; font-size: 11px; }
.staff-profile-toggle { display: flex; min-width: 0; align-items: center; gap: 7px; color: #39443d; font-size: 11px; }
.staff-profile-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.staff-profile-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.staff-profile-table { width: max-content; min-width: 100%; border-collapse: collapse; }
.staff-profile-table th, .staff-profile-table td { min-width: 84px; padding: 10px 11px; white-space: nowrap; }
.staff-profile-table th:nth-child(-n+4), .staff-profile-table td:nth-child(-n+4) { background: #f7f9f6; }
.staff-profile-table th:nth-child(1), .staff-profile-table td:nth-child(1) { min-width: 42px; }
.staff-profile-table th { text-align: center; }
.staff-profile-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.gift-voucher-secret-warning { padding: 10px 12px; border: 1px solid #f2d19a; border-radius: 6px; background: #fff8e9; color: #76511c; font-size: 12px; }
.gift-voucher-print-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gift-voucher-print-card { min-width: 0; display: grid; justify-items: center; gap: 7px; padding: 14px; border: 1px dashed #9baa9e; border-radius: 8px; text-align: center; }
.gift-voucher-qr { width: min(100%, 180px); aspect-ratio: 1; }
.gift-voucher-qr svg { display: block; width: 100%; height: 100%; }
.gift-voucher-print-card code { overflow-wrap: anywhere; color: #29382e; font-size: 11px; }
.gift-voucher-print-card small { color: var(--muted); font-size: 10px; }
.dialog:has(.gift-voucher-print-grid) { width: min(1000px, 96vw); }

@media print {
  body * { visibility: hidden !important; }
  #modal-root, #modal-root * { visibility: visible !important; }
  #modal-root { position: static; display: block; padding: 0; background: white; }
  #modal-root .dialog { width: 100%; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  #modal-root .dialog-head, #modal-root .dialog-actions, .gift-voucher-secret-warning { display: none !important; }
  .gift-voucher-print-grid { grid-template-columns: repeat(3, 1fr); gap: 8mm; }
  .gift-voucher-print-card { break-inside: avoid; padding: 5mm; }
  .gift-voucher-qr { width: 38mm; }
}

@media (max-width: 900px) {
  .printer-wizard-layout { grid-template-columns: 1fr; }
  .printer-wizard-guide { position: static; }
  .printer-header-editor-layout { grid-template-columns: 1fr; }
  .staff-profile-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .dialog:has(#printer-form) { width: 96vw; }
  .dialog:has(#printer-header-form), .dialog:has(#printer-footer-form) { width: 96vw; }
  .printer-editor-layout { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .printer-editor-grid, .printer-option-grid { grid-template-columns: 1fr; }
  .printer-header-form-grid { grid-template-columns: 1fr; }
  .printer-header-line.with-action { grid-template-columns: 1fr; }
  .staff-profile-fields { grid-template-columns: 1fr; }
  .gift-voucher-print-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.promotion-kpis { grid-template-columns: repeat(4, minmax(120px, 1fr)); margin-bottom: 16px; }
.promotion-kpis .kpi { padding: 15px 17px; }
.promotion-kpis .kpi strong { font-size: 21px; }
.promotion-section { margin-bottom: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.promotion-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.promotion-section-head h2 { margin: 0; font-size: 17px; }
.promotion-section-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.promotion-table { min-width: 820px; }
.promotion-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.promotion-shortcut { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 8px 10px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.promotion-shortcut-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: #edf5ef; color: var(--green); font-size: 18px; }
.promotion-shortcut h3 { margin: 1px 0 4px; font-size: 13px; }
.promotion-shortcut p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.promotion-shortcut .button { grid-column: 2; justify-self: start; min-height: 32px; }
@media (max-width: 1000px) {
  .promotion-shortcuts { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .promotion-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promotion-section-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 420px) {
  .promotion-kpis { grid-template-columns: 1fr; }
}