:root {
    --bg: #0c111b;
    --panel: #121a27;
    --panel-2: #182232;
    --line: #263346;
    --text: #edf3fb;
    --muted: #93a2b7;
    --accent: #ff8747;
    --accent-2: #ffc078;
    --green: #43e39a;
    --red: #ff5f73;
    --blue: #66a8ff;
    --accent-soft: rgba(255, 135, 71, .18);
    --accent-border: rgba(255, 135, 71, .42);
    --success-soft: rgba(67, 227, 154, .15);
    --danger-soft: rgba(255, 95, 115, .15);
    --surface-inset: #0f1724;
    --surface-strong: #182334;
    --surface-card: #111a28;
    --surface-image: #1c293b;
    --sidebar-bg: rgba(12, 17, 27, .92);
    --hero-glow: #172337;
    --toast-bg: #1b293c;
    --card-top: rgba(24, 34, 50, .96);
    --card-bottom: rgba(18, 26, 39, .96);
    --focus: #7fb5ff;
    --table-row-hover: rgba(255, 255, 255, .035);
    --badge-text: #b7c3d4;
    --success-text: #8ee9b8;
    --danger-text: #ff9c9c;
    --warning-text: #ffd492;
    --info-text: #9ed1ff;
    --note-text: #ffcf9e;
    --shadow: 0 18px 50px rgba(0, 0, 0, .24);
    --radius: 18px;
    --sidebar: 245px
}

:root[data-theme="light"] {
    --bg: #f3f6f8;
    --panel: #ffffff;
    --panel-2: #e9eef2;
    --line: #d4dde5;
    --text: #182635;
    --muted: #607184;
    --accent: #e85b27;
    --accent-2: #b94716;
    --green: #07965b;
    --red: #d9364c;
    --blue: #2478d4;
    --accent-soft: rgba(232, 91, 39, .15);
    --accent-border: rgba(232, 91, 39, .4);
    --success-soft: rgba(7, 150, 91, .13);
    --danger-soft: rgba(217, 54, 76, .13);
    --surface-inset: #f5f8fa;
    --surface-strong: #e9eef2;
    --surface-card: #ffffff;
    --surface-image: #dfe7ed;
    --sidebar-bg: rgba(255, 255, 255, .94);
    --hero-glow: #dbe7ee;
    --toast-bg: #ffffff;
    --card-top: #ffffff;
    --card-bottom: #f8fafb;
    --focus: #3975c6;
    --table-row-hover: rgba(36, 76, 112, .055);
    --badge-text: #496074;
    --success-text: #126b45;
    --danger-text: #a83232;
    --warning-text: #93600f;
    --info-text: #245d9f;
    --note-text: #96511b;
    --shadow: 0 14px 35px rgba(35, 58, 78, .12)
}

:root[data-accent="blue"] { --accent: #4f9dff; --accent-2: #8bc4ff; --accent-soft: rgba(79, 157, 255, .18); --accent-border: rgba(79, 157, 255, .42); --focus: #8bc4ff }
:root[data-accent="teal"] { --accent: #35c7b0; --accent-2: #8de8da; --accent-soft: rgba(53, 199, 176, .18); --accent-border: rgba(53, 199, 176, .42); --focus: #8de8da }
:root[data-accent="violet"] { --accent: #a78bfa; --accent-2: #d0c2ff; --accent-soft: rgba(167, 139, 250, .18); --accent-border: rgba(167, 139, 250, .42); --focus: #c4b5fd }
:root[data-accent="rose"] { --accent: #f4728c; --accent-2: #ffb1c0; --accent-soft: rgba(244, 114, 140, .18); --accent-border: rgba(244, 114, 140, .42); --focus: #ffb1c0 }
:root[data-accent="red"] { --accent: #ef5350; --accent-2: #ff8a80; --accent-soft: rgba(239, 83, 80, .18); --accent-border: rgba(239, 83, 80, .45); --focus: #ff8a80 }
:root[data-accent="yellow"] { --accent: #f5c542; --accent-2: #ffe082; --accent-soft: rgba(245, 197, 66, .19); --accent-border: rgba(245, 197, 66, .48); --focus: #ffe082 }
:root[data-theme="light"][data-accent="orange"] { --accent: #d95320; --accent-2: #b94716; --focus: #a63c13 }
:root[data-theme="light"][data-accent="blue"] { --accent: #2478d4; --accent-2: #1f5fa8; --focus: #1f5fa8 }
:root[data-theme="light"][data-accent="teal"] { --accent: #087f70; --accent-2: #066b5f; --focus: #066b5f }
:root[data-theme="light"][data-accent="violet"] { --accent: #7253c7; --accent-2: #5b3eaa; --focus: #5b3eaa }
:root[data-theme="light"][data-accent="rose"] { --accent: #c64762; --accent-2: #a9364e; --focus: #a9364e }
:root[data-theme="light"][data-accent="red"] { --accent: #c53d3a; --accent-2: #a52d2a; --focus: #a52d2a }
:root[data-theme="light"][data-accent="yellow"] { --accent: #b78200; --accent-2: #8a6200; --accent-soft: rgba(183, 130, 0, .16); --accent-border: rgba(183, 130, 0, .42); --focus: #8a6200 }
:root[data-theme="dark"][data-surface="ocean"] { --panel: #102238; --panel-2: #18324e; --surface-inset: #0d1b2d; --surface-strong: #193652; --surface-card: #11263e; --surface-image: #1c3a59; --sidebar-bg: rgba(9, 22, 37, .94); --hero-glow: #173653; --card-top: rgba(24, 50, 78, .96); --card-bottom: rgba(16, 34, 56, .96) }
:root[data-theme="dark"][data-surface="forest"] { --panel: #122820; --panel-2: #1a382d; --surface-inset: #0e211a; --surface-strong: #1d3d31; --surface-card: #132b23; --surface-image: #214837; --sidebar-bg: rgba(10, 25, 20, .94); --hero-glow: #173b2e; --card-top: rgba(26, 56, 45, .96); --card-bottom: rgba(18, 40, 32, .96) }
:root[data-theme="light"][data-surface="ocean"] { --panel: #ffffff; --panel-2: #e4edf7; --surface-inset: #f3f7fb; --surface-strong: #e1ebf5; --surface-card: #ffffff; --surface-image: #d9e6f2; --sidebar-bg: rgba(248, 251, 255, .96); --hero-glow: #d9e9f7; --card-top: #ffffff; --card-bottom: #f4f8fc }
:root[data-theme="light"][data-surface="forest"] { --panel: #ffffff; --panel-2: #e5f0ea; --surface-inset: #f4f9f6; --surface-strong: #e2eee7; --surface-card: #ffffff; --surface-image: #d9ebdf; --sidebar-bg: rgba(248, 253, 250, .96); --hero-glow: #dcefe2; --card-top: #ffffff; --card-bottom: #f4faf6 }
:root[data-font-scale="90"] { font-size: 90% }
:root[data-font-scale="110"] { font-size: 110% }
:root[data-font-scale="120"] { font-size: 120% }
:root[data-density="compact"] .card { padding: 13px }
:root[data-density="compact"] .card-head { padding-bottom: 10px }
:root[data-density="compact"] .page-content { gap: 14px }

* {
    box-sizing: border-box
}

html {
    background: var(--bg)
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 90% 0, var(--hero-glow) 0, transparent 28%), var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.45;
    transition: background-color .2s ease, color .2s ease
}

a {
    color: inherit;
    text-decoration: none
}

button,
input,
select,
textarea {
    font: inherit
}

button {
    cursor: pointer
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 48%, transparent);
    outline-offset: 2px
}

.hidden {
    display: none !important
}

.theme-settings-hero { align-items: center }
.theme-settings-hero-mark { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid var(--accent-border); border-radius: 20px; background: var(--accent-soft); color: var(--accent-2); font-size: 2.3rem }
.theme-settings-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); gap: 16px; align-items: start }
.theme-settings-panel { display: grid; gap: 0 }
.theme-setting-group { display: grid; gap: 13px; padding: 20px 0; border-bottom: 1px solid var(--line) }
.theme-setting-copy { display: grid; gap: 4px }
.theme-setting-copy span { color: var(--muted); font-size: .78rem }
.theme-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.theme-choice, .accent-choice, .theme-segmented label { position: relative; display: grid; gap: 6px; cursor: pointer }
.theme-choice input, .accent-choice input, .theme-segmented input { position: absolute; opacity: 0; pointer-events: none }
.theme-choice { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-inset) }
.theme-choice:has(input:checked), .accent-choice:has(input:checked), .theme-segmented label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) }
.theme-choice-preview { height: 52px; border-radius: 8px; border: 1px solid var(--line); position: relative; overflow: hidden }
.theme-choice-preview::after { content: ''; position: absolute; left: 10px; right: 25%; bottom: 10px; height: 8px; border-radius: 4px; background: currentColor; opacity: .65 }
.theme-preview-dark { background: #121a27; color: #ff8747 }
.theme-preview-light { background: #f3f6f8; color: #e85b27 }
.theme-choice strong, .accent-choice strong { font-size: .82rem }
.theme-choice small { color: var(--muted); font-size: .7rem }
.accent-choice-grid { display: flex; flex-wrap: wrap; gap: 10px }
.accent-choice { min-width: 82px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-inset); text-align: center; justify-items: center }
.accent-choice span { width: 25px; height: 25px; border-radius: 50%; background: var(--choice-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--choice-color) 18%, transparent) }
.accent-orange { --choice-color: #ff8747 }.accent-blue { --choice-color: #4f9dff }.accent-teal { --choice-color: #35c7b0 }.accent-violet { --choice-color: #a78bfa }.accent-rose { --choice-color: #f4728c }.accent-red { --choice-color: #ef5350 }.accent-yellow { --choice-color: #f5c542 }
.surface-slate { --choice-color: #64748b }.surface-ocean { --choice-color: #327dbb }.surface-forest { --choice-color: #39845c }
.surface-choice { min-width: 105px }
.theme-segmented { display: flex; flex-wrap: wrap; gap: 8px }
.theme-segmented label { display: block; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-inset); font-size: .78rem }
.theme-settings-actions { display: flex; justify-content: space-between; gap: 10px; padding-top: 20px }
.theme-preview { min-width: 0 }
.preview-window { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-inset) }
.preview-window-top { display: flex; gap: 5px; align-items: center; padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--surface-strong) }
.preview-window-top small { margin-left: 6px; color: var(--muted); font-size: .66rem }
.preview-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent) }
.preview-window-body { display: grid; grid-template-columns: 90px 1fr; min-height: 190px }
.preview-sidebar { display: grid; align-content: start; gap: 9px; padding: 13px 9px; background: var(--sidebar-bg); color: var(--muted); font-size: .62rem }
.preview-sidebar strong { color: var(--text); font-size: .72rem; margin-bottom: 7px }
.preview-sidebar .is-active { padding: 5px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-2) }
.preview-content { padding: 16px 13px; background: var(--panel) }
.preview-kicker { color: var(--accent); font-size: .58rem; font-weight: 900; letter-spacing: .1em }
.preview-content h4 { margin: 5px 0 14px; font-size: 1rem }
.preview-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px }
.preview-metrics div { padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-card) }
.preview-metrics small { display: block; color: var(--muted); font-size: .58rem }.preview-metrics strong { display: block; margin-top: 4px; font-size: .83rem }
.preview-bar { height: 7px; margin-top: 16px; border-radius: 5px; background: var(--surface-strong) }.preview-bar span { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--accent) }
.theme-preview-note { color: var(--muted); font-size: .74rem; line-height: 1.5 }
@media (max-width: 900px) { .theme-settings-layout { grid-template-columns: 1fr } }
@media (max-width: 520px) { .theme-settings-hero-mark { display: none } .theme-settings-actions { align-items: stretch; flex-direction: column-reverse } }

.block {
    display: block
}

.full {
    width: 100%
}

.span-2 {
    grid-column: 1/-1
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar) 1fr;
    min-height: 100vh
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 16px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--line);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    overflow: hidden
    z-index: 40
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 25px
}

.brand span:last-child {
    display: flex;
    flex-direction: column
}

.brand strong {
    letter-spacing: .04em
}

.brand small {
    color: var(--muted);
    margin-top: 2px
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--accent), #ffbd52);
    font-weight: 900;
    color: #17110c;
    box-shadow: 0 10px 30px rgba(241, 153, 98, .25)
}

.brand-mark.xl {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    font-size: 1.4rem
}

.nav-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 5px 10px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-border) transparent
}

.nav-list::-webkit-scrollbar {
    width: 6px
}

.nav-list::-webkit-scrollbar-track {
    background: transparent
}

.nav-list::-webkit-scrollbar-thumb {
    background: var(--accent-border);
    border-radius: 99px
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--muted);
    font-weight: 700;
    font-size: .92rem
}

.nav-link span {
    width: 20px;
    text-align: center
}

.nav-link:hover,
.nav-link.active {
    background: var(--accent-soft);
    color: var(--text)
}

.nav-link.active {
    box-shadow: inset 3px 0 var(--accent)
}

.nav-link[data-theme-settings-link] {
    color: var(--text)
}

.nav-link[data-theme-settings-link] span {
    color: var(--accent-2)
}

.nav-caption {
    margin: 18px 12px 6px;
    color: #63738b;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase
}

.sidebar-user {
    margin-top: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 15px
}

.sidebar-user>div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column
}

.sidebar-user strong {
    font-size: .87rem;
    overflow: hidden;
    text-overflow: ellipsis
}

.sidebar-user small {
    text-transform: capitalize;
    color: var(--muted)
}

.avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--surface-strong);
    color: var(--accent);
    font-weight: 900
}

.app-main {
    min-width: 0
}

.topbar {
    height: 91px;
    padding: 18px clamp(18px, 3vw, 36px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 30
}

.topbar h1 {
    font-size: 1.3rem;
    margin: 2px 0 0
}

.eyebrow {
    margin: 0;
    color: var(--accent);
    font-weight: 900;
    font-size: .67rem;
    letter-spacing: .14em
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 7px 10px;
    background: var(--surface-strong);
    color: var(--text);
    font-size: .74rem;
    font-weight: 800;
    transition: .16s ease
}

.theme-toggle:hover {
    border-color: var(--accent);
    transform: translateY(-1px)
}

.theme-icon {
    color: var(--accent-2);
    font-size: 1rem;
    line-height: 1
}

.exchange-rate-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
    border-radius: 10px;
    padding: 7px 10px;
    background: var(--success-soft);
    color: var(--text);
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer
}

.exchange-rate-button:hover {
    border-color: var(--green);
    transform: translateY(-1px)
}

.exchange-rate-button strong {
    color: var(--green)
}

.exchange-rate-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--green);
    color: #062318;
    font-weight: 900
}

.status-dot {
    font-size: .78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 7px
}

.status-dot i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(82, 207, 140, .11)
}

.page-content {
    padding: 26px clamp(18px, 3vw, 36px) 50px;
    max-width: 1700px;
    margin: 0 auto
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px
}

.hero h2 {
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    margin: 7px 0
}

.hero p:not(.eyebrow) {
    color: var(--muted);
    margin: 0;
    max-width: 720px
}

.card {
    background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow)
}

.card-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.card-head h3 {
    margin: 0;
    font-size: 1rem
}

.btn {
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 10px 14px;
    font-weight: 800;
    color: var(--text);
    background: var(--panel-2);
    transition: transform .16s ease, filter .16s ease, border-color .16s ease, background-color .16s ease
}

.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05)
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), #ffbd52);
    color: #1c120d
}

.btn-secondary {
    background: var(--surface-strong);
    border-color: var(--line)
}

.btn-success {
    background: linear-gradient(135deg, var(--green), #18b875);
    color: #082015
}

.btn-danger {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--red) 48%, transparent);
    color: var(--danger-text)
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--muted)
}

.btn-sm {
    padding: 7px 10px;
    font-size: .8rem
}

.btn-lg {
    padding: 13px 18px
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    display: grid;
    place-items: center
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px
}

.kpi-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 17px
}

.kpi-card span,
.kpi-card small {
    color: var(--muted);
    font-size: .76rem
}

.kpi-card strong {
    display: block;
    font-size: 1.55rem;
    margin: 7px 0
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px
}

th,
td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle
}

th {
    font-size: .68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em
}

td {
    font-size: .85rem
}

tbody tr:hover {
    background: var(--table-row-hover)
}

.badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    color: var(--badge-text);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: capitalize;
    white-space: nowrap
}

.badge.success {
    color: var(--success-text);
    border-color: color-mix(in srgb, var(--green) 48%, transparent);
    background: var(--success-soft)
}

.badge.danger {
    color: var(--danger-text);
    border-color: color-mix(in srgb, var(--red) 48%, transparent);
    background: var(--danger-soft)
}

.empty {
    color: var(--muted);
    text-align: center;
    padding: 35px
}

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    background: var(--panel)
}

.flash-success {
    border-color: color-mix(in srgb, var(--green) 52%, transparent);
    background: var(--success-soft);
    color: var(--success-text)
}

.flash-error {
    border-color: color-mix(in srgb, var(--red) 52%, transparent);
    background: var(--danger-soft);
    color: var(--danger-text)
}

.flash button {
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.2rem
}

.stack-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 20px
}

.stack-form label,
.cart label,
.modal label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: .75rem;
    color: var(--muted);
    font-weight: 800
}

.stack-form input,
.stack-form select,
.stack-form textarea,
.cart input,
.cart select,
.cart textarea,
.modal input,
.modal select,
.modal textarea,
.inline-edit input,
.adjust-form input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface-inset);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 11px;
    outline: none
}

.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus,
.cart input:focus,
.cart select:focus,
.cart textarea:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 14%, transparent)
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 76%, transparent)
}

select option {
    background: var(--surface-inset);
    color: var(--text)
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.split-layout {
    display: grid;
    grid-template-columns: minmax(300px, .75fr) minmax(0, 1.7fr);
    gap: 18px
}

.list-stack {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.inline-edit {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.2fr auto auto;
    gap: 8px;
    padding: 10px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px
}

.pos-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(350px, .72fr);
    gap: 18px;
    align-items: start
}

.pos-catalog {
    padding: 18px
}

.pos-tools {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 18px
}

.search {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--surface-inset);
    border: 1px solid var(--line);
    border-radius: 13px
}

.search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text)
}

.chips {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding-bottom: 3px
}

.chip {
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--muted);
    border-radius: 999px;
    padding: 8px 13px;
    font-weight: 800;
    font-size: .75rem;
    white-space: nowrap
}

.chip.active {
    background: var(--accent-soft);
    color: var(--accent-2);
    border-color: var(--accent-border)
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.product-card {
    padding: 0;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 15px;
    overflow: hidden;
    background: var(--surface-card);
    color: var(--text);
    cursor: pointer
}

.product-card:hover {
    border-color: #3d506a;
    transform: translateY(-1px)
}

.product-image {
    aspect-ratio: 16/9;
    background: var(--surface-image) center/cover no-repeat;
    display: grid;
    place-items: center;
    font-size: 2rem
}

.product-body {
    padding: 13px
}

.product-body small {
    color: var(--accent);
    font-weight: 800
}

.product-body h3 {
    font-size: .92rem;
    margin: 4px 0
}

.product-body p {
    color: var(--muted);
    font-size: .73rem;
    line-height: 1.35;
    height: 2em;
    overflow: hidden;
    margin: 0 0 10px
}

.product-body>div {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.product-footer { gap: 8px }
.product-detail-btn { border: 0; background: transparent; color: var(--muted); font-size: .68rem; font-weight: 800; cursor: pointer }
.product-detail-btn:hover { color: var(--accent-2) }

.add-mark {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent)
}

.cart {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 132px);
    overflow: auto
}

.cart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px;
    border-bottom: 1px solid var(--line)
}

.cart-head h2 {
    margin: 3px 0 0;
    font-size: 1.2rem
}

.cart-context,
.cart-notes {
    padding: 14px;
    border-bottom: 1px solid var(--line)
}

.cart-items {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow: auto
}

.empty-mini {
    text-align: center;
    color: var(--muted);
    padding: 24px 8px;
    font-size: .8rem
}

.cart-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    padding: 10px;
    background: var(--surface-inset);
    border: 1px solid var(--line);
    border-radius: 12px
}

.cart-line-actions { grid-column: 1 / -1; display: flex; gap: 5px; border-top: 1px solid var(--line); padding-top: 7px }
.cart-line-actions .btn { padding: 4px 7px; font-size: .68rem }
.customer-selector { display: flex; gap: 7px; align-items: center }
.customer-selector select { flex: 1 }
.pos-selector { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-inset); color: var(--text); padding: 10px 11px; text-align: left; cursor: pointer }
.selected-table-label { display: block; color: var(--muted); font-size: .68rem; margin-top: 5px }
.discount-control { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; align-items: center; color: var(--muted); font-size: .75rem }
.discount-control select, .discount-control input, #tipOther { width: 74px; border: 1px solid var(--line); background: var(--surface-inset); color: var(--text); border-radius: 9px; padding: 8px }
.table-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.table-picker-card { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-height: 100px; padding: 12px; border: 2px solid var(--table-state-color, var(--line)); border-radius: 13px; background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer; box-shadow: 0 0 12px color-mix(in srgb, var(--table-state-color, transparent) 18%, transparent) }
.table-picker-card span { color: var(--table-state-color, var(--muted)); font-size: .72rem; font-weight: 800 }
.table-picker-card small { color: var(--muted); font-size: .68rem }
.table-picker-card strong { font-size: 1.35rem; line-height: 1 }
.table-picker-card:disabled { cursor: not-allowed; opacity: .5 }
.table-picker-card.table-state-free { --table-state-color: var(--green) }
.table-picker-card.table-state-occupied { --table-state-color: var(--accent) }
.table-picker-card.table-state-reserved { --table-state-color: #caa8ff }
.table-picker-card.table-state-out_of_service { --table-state-color: var(--red) }
.product-detail-description { color: var(--muted); line-height: 1.5 }
.product-detail-price { color: var(--accent-2); font-size: 1.45rem; font-weight: 900; margin: 16px 0 }
.ingredient-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px }
.ingredient-list span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-inset); font-size: .75rem }
.ingredient-list small { color: var(--muted) }

.cart-line>div:first-child {
    min-width: 0
}

.cart-line strong {
    font-size: .8rem
}

.cart-line small {
    display: block;
    color: var(--muted);
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px
}

.qty {
    display: flex;
    align-items: center;
    gap: 7px
}

.qty button {
    width: 25px;
    height: 25px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    border-radius: 7px
}

.qty span {
    font-size: .75rem
}

.cart-summary {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.cart-summary>div {
    display: flex;
    justify-content: space-between;
    font-size: .8rem
}

.cart-total {
    margin-top: 5px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
    font-size: 1rem !important
}

.cart-total-converted {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--muted);
    font-size: .74rem !important
}

.cart-total-converted strong {
    color: var(--blue);
    white-space: nowrap
}

.cart>.btn.full {
    width: calc(100% - 28px);
    margin: 0 14px 15px
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 13, .72);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 18px
}

.modal {
    width: min(620px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
    border-radius: 20px;
    padding: 18px
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.modal h3 {
    margin: 4px 0 0
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line)
}

.modal-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 20px 20px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--red) 34%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--red) 7%, var(--panel));
}

.modal-danger-zone strong,
.modal-danger-zone small {
    display: block
}

.modal-danger-zone strong {
    color: var(--danger-text);
    font-size: .82rem
}

.modal-danger-zone small {
    margin-top: 4px;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.4
}

.btn-delete-product {
    flex: 0 0 auto;
    white-space: nowrap;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--red) 16%, transparent)
}

.btn-delete-product span {
    margin-right: 4px;
    font-size: 1rem;
    line-height: 0
}

.selection-help {
    font-size: .8rem;
    color: var(--muted)
}

.selection-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px
}

.selection-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px !important;
    padding: 11px;
    border: 1px solid var(--line);
    background: var(--surface-inset);
    border-radius: 11px
}

.selection-option input {
    width: auto !important
}

.selection-option span {
    display: flex;
    flex-direction: column
}

.selection-option strong {
    color: var(--text)
}

.selection-option small {
    font-weight: 500
}

.kitchen-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px
}

.kitchen-ticket {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 15px;
    box-shadow: var(--shadow)
}

.ticket-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.ticket-number {
    font-size: .7rem;
    color: var(--accent);
    font-weight: 900
}

.ticket-head h3 {
    margin: 2px 0;
    font-size: 1.05rem
}

.ticket-meta {
    font-size: .7rem;
    color: var(--muted);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line)
}

.ticket-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0
}

.ticket-items>div {
    background: var(--surface-inset);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px
}

.ticket-items strong {
    font-size: .8rem
}

.ticket-items small {
    display: block;
    color: var(--accent-2);
    margin-top: 3px
}

.ticket-note {
    font-size: .76rem;
    color: var(--note-text);
    padding: 9px;
    background: rgba(241, 153, 98, .08);
    border-radius: 9px
}

.ticket-actions {
    margin-top: 13px;
    display: grid;
    gap: 7px
}

.kitchen-details-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--line);
    border-radius: 0;
    color: var(--accent-2);
    font-size: .74rem
}

.kitchen-details-btn:hover {
    background: color-mix(in srgb, var(--accent) 9%, transparent)
}

.kitchen-details-btn span {
    font-size: 1rem
}

.kitchen-details-modal {
    width: min(680px, 100%)
}

.kitchen-detail-summary,
.kitchen-detail-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-inset)
}

.kitchen-detail-summary {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-inset))
}

.kitchen-detail-summary div,
.kitchen-detail-grid div {
    display: grid;
    gap: 4px
}

.kitchen-detail-summary span,
.kitchen-detail-grid span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em
}

.kitchen-detail-summary strong,
.kitchen-detail-grid strong {
    font-size: .82rem
}

.kitchen-detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 10px
}

.kitchen-detail-section {
    margin-top: 16px
}

.kitchen-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.kitchen-detail-section-head span {
    display: grid;
    min-width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-2);
    font-size: .72rem;
    font-weight: 900
}

.kitchen-detail-items {
    display: grid;
    gap: 8px
}

.kitchen-detail-item {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-2)
}

.kitchen-detail-item-main {
    display: grid;
    gap: 4px
}

.kitchen-detail-item small {
    color: var(--accent-2);
    font-size: .74rem
}

.kitchen-detail-note {
    margin-top: 14px;
    padding: 12px;
    border-left: 3px solid var(--accent);
    border-radius: 0 9px 9px 0;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-inset))
}

.kitchen-detail-note strong {
    font-size: .78rem
}

.kitchen-detail-note p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.45
}

.kitchen-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start }
.kitchen-column { min-width: 0; background: color-mix(in srgb, var(--panel) 72%, transparent); border: 1px solid var(--line); border-radius: 16px; padding: 13px }
.kitchen-column-head { display: flex; justify-content: center; gap: 13px; align-items: center; text-align: center; padding: 8px 4px 16px; border-bottom: 1px solid var(--line); margin-bottom: 12px }
.kitchen-column-head h3 { margin: 0 0 4px; font-size: 1.42rem; letter-spacing: .01em }
.kitchen-column-head p { margin: 0; color: var(--muted); font-size: .84rem }
.kitchen-column-count { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-inset); color: var(--accent-2); font-size: 1.08rem; font-weight: 900 }
.kitchen-column-list { display: grid; gap: 12px }
.kitchen-column-empty { padding: 28px 10px; text-align: center; color: var(--muted); font-size: .78rem; border: 1px dashed var(--line); border-radius: 11px }
.kitchen-column-received { border-top: 4px solid #4f9dff; background: color-mix(in srgb, #4f9dff 7%, var(--panel)) }
.kitchen-column-preparing { border-top: 4px solid #f2b84b; border-color: color-mix(in srgb, #f2b84b 42%, var(--line)); background: color-mix(in srgb, #f2b84b 7%, var(--panel)) }
.kitchen-column-delivered { border-top: 4px solid #42c98a; border-color: color-mix(in srgb, #42c98a 38%, var(--line)); background: color-mix(in srgb, #42c98a 7%, var(--panel)) }
.kitchen-column-received .kitchen-column-count { color: #78b7ff; background: rgba(79, 157, 255, .14) }
.kitchen-column-preparing .kitchen-column-count { color: #ffd176; background: rgba(242, 184, 75, .15) }
.kitchen-column-delivered .kitchen-column-count { color: #72e0ac; background: rgba(66, 201, 138, .15) }
.kitchen-ticket { border-top: 3px solid var(--ticket-accent, var(--line)); }
.kitchen-ticket:has(.status-received) { --ticket-accent: #4f9dff }
.kitchen-ticket:has(.status-preparing), .kitchen-ticket:has(.status-ready) { --ticket-accent: #f2b84b }
.kitchen-ticket:has(.status-delivered) { --ticket-accent: #42c98a }
.kitchen-ticket .badge.status-received, .table-badges .status-received { color: #8bc4ff; border-color: rgba(79, 157, 255, .55); background: rgba(79, 157, 255, .14) }
.kitchen-ticket .badge.status-preparing, .table-badges .status-preparing { color: #ffd176; border-color: rgba(242, 184, 75, .58); background: rgba(242, 184, 75, .15) }
.kitchen-ticket .badge.status-ready, .table-badges .status-ready { color: #72d9f2; border-color: rgba(62, 190, 222, .58); background: rgba(62, 190, 222, .15) }
.kitchen-ticket .badge.status-delivered, .table-badges .status-delivered { color: #72e0ac; border-color: rgba(66, 201, 138, .58); background: rgba(66, 201, 138, .15) }
.kitchen-ticket .badge { padding: 7px 11px; font-size: .82rem; letter-spacing: .01em }
.kitchen-ticket .ticket-number { font-size: .82rem }
.kitchen-ticket .ticket-head h3 { font-size: 1.2rem }
.kitchen-ticket .ticket-meta { font-size: .78rem }
.kitchen-ticket .ticket-items strong { font-size: .9rem }
.kitchen-ticket .ticket-items small { font-size: .76rem }
.table-badges .badge.status-received, .table-badges .badge.status-preparing, .table-badges .badge.status-ready, .table-badges .badge.status-delivered { font-size: .75rem; padding: 6px 9px }
.table-edit-locked { display: block; text-align: center; color: var(--muted) }
@media (max-width: 1050px) { .kitchen-board { grid-template-columns: 1fr } }

@media (max-width: 600px) {
    .kitchen-detail-summary,
    .kitchen-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .kitchen-details-modal {
        padding: 14px
    }
}

.status-preparing {
    color: var(--warning-text)
}

.status-ready {
    color: var(--info-text)
}

.tables-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px
}

.table-card {
    padding: 15px;
    background: var(--panel);
    border: 2px solid var(--table-state-color, var(--line));
    border-radius: 16px;
    min-height: 265px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .2s, transform .2s, box-shadow .2s
}

.table-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow)
}

.table-card,
.kitchen-ticket,
.kpi-card,
.product-card,
.card {
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease
}

.table-card.table-state-free {
    --table-state-color: var(--green);
    border-color: color-mix(in srgb, var(--green) 78%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent), 0 0 20px color-mix(in srgb, var(--green) 28%, transparent)
}

.table-card.table-state-occupied {
    --table-state-color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 82%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent)
}

.table-card.table-state-paid {
    --table-state-color: var(--blue);
    border-color: color-mix(in srgb, var(--blue) 82%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent), 0 0 22px color-mix(in srgb, var(--blue) 30%, transparent)
}

.table-card.table-state-refunded {
    --table-state-color: var(--red);
    border-color: color-mix(in srgb, var(--red) 78%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 18%, transparent), 0 0 22px color-mix(in srgb, var(--red) 26%, transparent)
}

.table-card.table-state-reserved {
    --table-state-color: #caa8ff;
    border-color: rgba(202, 168, 255, .65);
    box-shadow: 0 0 0 1px rgba(202, 168, 255, .1), 0 0 17px rgba(202, 168, 255, .12)
}

.table-card.table-state-out_of_service {
    --table-state-color: var(--red);
    border-color: rgba(255, 112, 112, .62);
    box-shadow: 0 0 0 1px rgba(255, 112, 112, .1), 0 0 17px rgba(255, 112, 112, .12);
    opacity: .62
}

.table-card-head,
.table-identity,
.table-meta,
.table-order,
.table-actions,
.table-status-form {
    display: flex;
    align-items: center
}

.table-card-head {
    justify-content: space-between
}

.table-number {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--table-state-color, var(--accent)) 14%, transparent);
    color: var(--table-state-color, var(--accent-2));
    font-size: 1.2rem;
    font-weight: 900;
    border: 1px solid color-mix(in srgb, var(--table-state-color, var(--accent)) 30%, transparent)
}

.table-identity {
    gap: 10px;
    min-width: 0
}

.table-kicker,
.table-order-label {
    display: block;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .1em
}

.table-card h3 {
    margin: 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.table-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    white-space: nowrap
}

.table-status.status-occupied {
    background: rgba(241, 153, 98, .12);
    color: var(--accent-2)
}

.table-status.status-free {
    color: var(--green)
}

.table-status.status-paid {
    background: rgba(108, 166, 255, .13);
    color: #9ec5ff
}

.table-status.status-reserved {
    background: rgba(202, 168, 255, .13);
    color: #caa8ff
}

.table-status.status-out_of_service {
    background: rgba(255, 112, 112, .12);
    color: #ff9b9b
}

.table-status .status-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor
}

.table-meta {
    justify-content: space-between;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .72rem
}

.table-meta strong {
    color: var(--text)
}

.table-waiter {
    margin: 0;
    color: var(--muted);
    font-size: .76rem
}

.table-order {
    justify-content: space-between;
    margin-top: 2px;
    padding: 11px;
    border: 1px solid rgba(241, 153, 98, .2);
    border-radius: 10px;
    background: rgba(241, 153, 98, .07)
}

.table-order-paid {
    border-color: rgba(108, 166, 255, .3);
    background: rgba(108, 166, 255, .08)
}

.table-order-paid .table-total {
    color: #9ec5ff
}

.table-order-refunded {
    border-color: color-mix(in srgb, var(--red) 45%, var(--line));
    background: var(--danger-soft)
}

.ticket-refunded-state {
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--red) 42%, var(--line));
    border-radius: 9px;
    background: var(--danger-soft);
    color: var(--danger-text);
    text-align: center;
    font-size: .75rem;
    font-weight: 800
}

.refund-reason-label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 14px;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800
}

.table-order strong {
    font-size: .8rem
}

.table-total {
    color: var(--accent-2);
    font-size: 1.05rem !important
}

.table-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.waiter-badge {
    color: var(--accent-2);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-strong))
}

.waiter-badge-icon {
    color: var(--accent);
    font-size: .58rem
}

.table-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 49px;
    color: var(--muted);
    font-size: .76rem
}

.table-empty-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px dashed #52647d;
    border-radius: 8px;
    color: var(--accent-2);
    font-size: 1.1rem
}

.table-actions {
    margin-top: auto
}

.payment-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 11px
}

.payment-modal {
    width: min(720px, 100%)
}

.clear-table-form {
    margin-top: 8px
}

.confirm-modal {
    width: min(460px, 100%)
}

.confirm-message {
    margin: 0 0 14px;
    color: var(--text);
    font-size: .9rem
}

.warning-callout {
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-2);
    font-size: .75rem
}

.modal-head-actions {
    display: flex;
    align-items: center;
    gap: 8px
}

.payment-section-title,
.account-items-head,
.account-item,
.account-breakdown>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.payment-section-title {
    margin-top: 18px;
    padding: 12px 0 8px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800
}

.payment-summary-main {
    grid-template-columns: repeat(4, 1fr)
}

.payment-summary-main strong {
    margin-top: 5px
}

.payment-total-converted {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--muted);
    font-size: .76rem
}

.payment-total-converted strong {
    color: var(--blue)
}

.account-items {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden
}

.account-items-head {
    padding: 10px 12px;
    background: var(--surface-strong);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em
}

.account-item {
    padding: 11px 12px;
    border-top: 1px solid var(--line);
    font-size: .8rem
}

.account-item small {
    display: block;
    max-width: 460px;
    margin-top: 4px;
    color: var(--muted);
    font-size: .68rem
}

.account-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    font-size: .8rem
}

.discount-value {
    color: var(--green)
}

.account-grand-total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 2px solid var(--line);
    font-size: 1.05rem
}

.account-grand-total strong {
    color: var(--accent-2);
    font-size: 1.2rem
}

.status-received { color: var(--muted) }
.status-preparing { color: var(--warning-text) }
.status-ready { color: var(--info-text) }
.status-delivered { color: var(--green) }
.status-refunded { color: var(--red) }

.payment-summary>div {
    padding: 12px;
    background: var(--surface-inset);
    border: 1px solid var(--line);
    border-radius: 11px;
    display: flex;
    flex-direction: column
}

.payment-summary span {
    color: var(--muted);
    font-size: .7rem
}

.mini-items {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.mini-items span {
    padding: 5px 7px;
    border-radius: 7px;
    background: var(--panel-2);
    font-size: .7rem
}

.payment-row {
    display: grid;
    grid-template-columns: 1.1fr .7fr 1fr auto;
    gap: 8px;
    margin: 8px 0
}

.payment-row {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface-inset) 88%, #000 12%)
}

.payment-row select,
.payment-row input {
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-inset) 82%, #000 18%);
    color: var(--text);
    border-radius: 10px;
    padding: 10px;
    font-weight: 700
}

.payment-row input[type="number"] {
    color: var(--accent-2);
    font-size: 1rem
}

.payment-row-meta {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .68rem;
    padding-top: 4px;
    border-top: 1px solid var(--line)
}

.payment-balance {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    color: var(--muted);
    font-size: .74rem
}

.payment-balance.is-complete {
    color: var(--success-text)
}

.payment-balance.is-short {
    color: var(--danger-text)
}

.inventory-row {
    display: grid;
    grid-template-columns: 1fr auto 1.3fr;
    gap: 13px;
    align-items: center;
    padding: 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px
}

.inventory-row.low {
    border-color: rgba(255, 112, 112, .35)
}

.inventory-row>div:first-child {
    display: flex;
    flex-direction: column
}

.inventory-row small {
    color: var(--muted)
}

.stock-value {
    text-align: right
}

.stock-value strong {
    font-size: 1.2rem
}

.stock-value span {
    color: var(--muted);
    font-size: .7rem
}

.adjust-form {
    display: grid;
    grid-template-columns: .5fr 1fr auto;
    gap: 7px
}

.empty-state {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 32px
}

.empty-state p {
    color: var(--muted);
    max-width: 550px
}

.empty-icon {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--panel-2);
    border-radius: 18px;
    font-size: 1.5rem
}

.auth-body {
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 0, #23344d, transparent 42%), var(--bg)
}

.auth-shell {
    width: min(460px, 100%)
}

.login-card {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .38);
    border-radius: 24px;
    overflow: hidden
}

.login-brand {
    display: flex;
    gap: 14px;
    padding: 24px 24px 0
}

.login-brand h1 {
    margin: 3px 0
}

.login-brand p:last-child {
    color: var(--muted);
    font-size: .78rem
}

.demo-credentials {
    margin: 0 20px 20px;
    padding: 13px;
    border: 1px dashed #38475c;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    font-size: .75rem;
    color: var(--muted)
}

.demo-credentials strong {
    color: var(--text);
    margin-bottom: 5px
}

.demo-credentials small {
    margin-top: 6px;
    color: #728198
}

.toast-container {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.toast {
    padding: 11px 14px;
    border-radius: 11px;
    background: var(--toast-bg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-size: .8rem;
    opacity: 0;
    transform: translateY(8px);
    transition: .2s
}

.toast.show {
    opacity: 1;
    transform: none
}

.toast.error {
    border-color: rgba(255, 112, 112, .42);
    color: var(--danger-text)
}

.mobile-only {
    display: none
}

@media(max-width:1200px) {
    .kpi-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .kitchen-board {
        grid-template-columns: repeat(2, 1fr)
    }

    .tables-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .pos-shell {
        grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr)
    }
}

@media(max-width:900px) {
    .app-shell {
        display: block
    }

    .sidebar {
        position: fixed;
        left: -270px;
        width: 245px;
        transition: .2s
    }

    .sidebar.open {
        left: 0
    }

    .mobile-only {
        display: grid
    }

    .topbar {
        padding: 15px 18px
    }

    .status-dot {
        display: none
    }

    .page-content {
        padding: 20px 15px 40px
    }

    .pos-shell,
    .split-layout {
        grid-template-columns: 1fr
    }

    .cart {
        position: static;
        max-height: none
    }

    .kitchen-board {
        grid-template-columns: 1fr 1fr
    }

    .tables-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .inline-edit {
        grid-template-columns: 1fr 1fr
    }

    .adjust-form {
        grid-template-columns: 1fr 1fr
    }

    .inventory-row {
        grid-template-columns: 1fr auto
    }

    .inventory-row .adjust-form {
        grid-column: 1/-1
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {
    .hero {
        align-items: flex-start;
        flex-direction: column
    }

    .hero .btn {
        width: 100%
    }

    .kpi-grid,
    .kitchen-board,
    .tables-grid,
    .product-grid {
        grid-template-columns: 1fr
    }

    .grid-2 {
        grid-template-columns: 1fr
    }

    .span-2 {
        grid-column: auto
    }

    .topbar-actions form {
        display: none
    }

    .topbar-actions {
        gap: 6px
    }

    .status-dot {
        display: none
    }

    .exchange-rate-button {
        padding: 7px
    }

    .exchange-rate-button > span:not(.exchange-rate-icon) {
        display: none
    }

    .inline-edit,
    .payment-row {
        grid-template-columns: 1fr
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .product-body p {
        display: none
    }

    .cart-line {
        grid-template-columns: minmax(0, 1fr) auto
    }

    .cart-line>strong:last-child {
        grid-column: 1/-1;
        text-align: right
    }

    .login-brand {
        flex-direction: column
    }

    .kpi-card strong {
        font-size: 1.3rem
    }
}

.compact-form-card {
    margin-bottom: 16px
}

.quick-form {
    display: grid;
    grid-template-columns: auto .55fr .55fr .8fr 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 12px
}

.quick-form input,
.quick-form select,
.table-status-form select,
.password-reset input {
    border: 1px solid var(--line);
    background: var(--surface-inset);
    color: var(--text);
    border-radius: 10px;
    padding: 9px
}

.table-status-form {
    display: flex;
    gap: 7px;
    margin-top: 8px
}

.table-status-form select {
    min-width: 0;
    flex: 1
}

.password-reset {
    display: flex;
    gap: 6px;
    min-width: 230px
}

.password-reset input {
    min-width: 130px
}

.credits-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.6fr); gap: 16px; align-items: start }
.credits-customers-panel, .credit-detail-panel { min-width: 0; overflow: visible }
.credit-customer-list { display: grid; gap: 7px }
.credit-customer { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid transparent; border-radius: 12px; color: var(--text); text-decoration: none }
.credit-customer:hover, .credit-customer.is-selected { border-color: var(--accent-border); background: var(--accent-soft) }
.credit-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent-2); font-weight: 900 }
.credit-customer-info { min-width: 0; display: grid; gap: 3px }
.credit-customer-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.credit-customer-info small, .credit-contact, .credit-payment-box span, .credit-order-head small { color: var(--muted); font-size: .74rem }
.credit-customer-total { color: var(--warning-text); white-space: nowrap }
.credit-detail-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--line) }
.credit-detail-head h3 { margin: 4px 0 }
.credit-contact { margin: 0 }
.credit-balance { display: grid; gap: 4px; text-align: right }
.credit-balance span { color: var(--muted); font-size: .75rem }
.credit-balance strong { color: var(--warning-text); font-size: 1.7rem }
.credit-payment-box { display: grid; gap: 12px; margin: 16px 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--accent) 7%, var(--surface-inset)) }
.credit-payment-box > div { display: grid; gap: 3px }
.credit-payment-fields { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(130px, 1fr) minmax(130px, 1fr) auto; gap: 8px; align-items: end }
.credit-payment-fields label { display: grid; gap: 5px; color: var(--muted); font-size: .75rem }
.credit-payment-fields input, .credit-payment-fields select { width: 100%; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 9px; padding: 9px }
.credit-section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px }
.credit-section-heading h4 { margin: 0; font-size: 1rem }
.credit-section-heading span { color: var(--muted); font-size: .76rem }
.credit-orders { display: grid; gap: 9px }
.credit-order { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-inset) }
.credit-order-head, .credit-order-footer { display: flex; justify-content: space-between; gap: 10px; align-items: center }
.credit-order-head small { display: block; margin-top: 4px }
.credit-order-items { display: grid; gap: 5px; margin: 12px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .82rem }
.credit-order-items span { display: flex; justify-content: space-between; gap: 10px }
.credit-order-footer { color: var(--muted); font-size: .7rem }
.warning-badge { color: var(--warning-text); border-color: color-mix(in srgb, var(--warning-text) 45%, transparent); background: color-mix(in srgb, var(--warning-text) 12%, transparent) }
.credit-empty { display: grid; gap: 5px; padding: 32px 15px; text-align: center; color: var(--muted) }
.credit-empty strong { color: var(--text) }
.credit-empty-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 4px; border-radius: 15px; background: var(--accent-soft); color: var(--accent-2); font-size: 1.5rem; font-weight: 900 }
.credit-payment-action { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin: 14px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warning-text) 42%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--warning-text) 9%, var(--surface-inset)) }
.credit-payment-action > div { display: grid; gap: 3px }
.credit-payment-action span { color: var(--muted); font-size: .75rem }
.btn-warning { border: 1px solid color-mix(in srgb, var(--warning-text) 55%, transparent); background: color-mix(in srgb, var(--warning-text) 18%, transparent); color: var(--warning-text); }
@media (max-width: 560px) { .credit-payment-action { align-items: stretch; flex-direction: column } }
@media (max-width: 900px) { .credits-layout { grid-template-columns: 1fr } .credit-payment-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) } .credit-payment-fields button { grid-column: 1 / -1 } }
@media (max-width: 560px) { .credit-detail-head { display: grid } .credit-balance { text-align: left } .credit-payment-fields { grid-template-columns: 1fr } .credit-order-footer { align-items: flex-start; flex-direction: column } }

.customer-list { gap: 9px }
.customer-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-inset) }
.customer-fields { display: grid; grid-template-columns: 1.1fr .75fr .8fr 1fr; gap: 8px; min-width: 0 }
.customer-fields input { min-width: 0; border: 1px solid transparent; background: transparent; color: var(--text); border-radius: 8px; padding: 9px 8px; font: inherit }
.customer-fields input:disabled { color: var(--text); opacity: 1; cursor: default }
.customer-row.is-editing { border-color: var(--accent-border) }
.customer-row.is-editing .customer-fields input { border-color: var(--line); background: var(--panel) }
.customer-menu-wrap { position: relative }
.customer-menu-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 1.35rem; line-height: 1; letter-spacing: .08em; cursor: pointer }
.customer-menu-button:hover, .customer-menu-button[aria-expanded=true] { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft) }
.customer-menu { position: absolute; z-index: 20; top: calc(100% + 7px); right: 0; display: none; min-width: 132px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); box-shadow: var(--shadow) }
.customer-menu.is-open { display: grid }
.customer-menu button { border: 0; border-radius: 7px; padding: 9px 10px; background: transparent; color: var(--text); text-align: left; font: inherit; font-size: .78rem; cursor: pointer }
.customer-menu button:hover { background: var(--surface-inset); color: var(--accent-2) }
.customer-menu .customer-delete-action:hover { color: var(--danger-text); background: var(--danger-soft) }
.customer-menu .customer-save-action { color: var(--success-text) }
@media (max-width: 760px) { .customer-fields { grid-template-columns: 1fr } .customer-row { align-items: start } }

.table-manager-modal {
    width: min(1120px, calc(100vw - 32px));
    max-height: min(860px, calc(100vh - 32px));
    overflow: auto
}

.table-create-form,
.table-manager-row {
    display: grid;
    grid-template-columns: 1.2fr repeat(2, minmax(90px, .55fr)) minmax(120px, .8fr) minmax(150px, 1fr) auto;
    gap: 8px;
    align-items: center
}

.table-create-form {
    padding: 14px;
    margin: 4px 0 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-inset)
}

.table-create-form > div {
    display: grid;
    gap: 3px
}

.modal-subtitle,
.table-manager-list-head span {
    color: var(--muted);
    font-size: .8rem
}

.table-create-form input,
.table-create-form select,
.table-manager-row input,
.table-manager-row select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    border-radius: 9px;
    padding: 9px
}

.table-manager-list {
    display: grid;
    gap: 8px
}

.table-manager-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 4px
}

.table-manager-row {
    grid-template-columns: 70px minmax(70px, .55fr) minmax(70px, .45fr) minmax(100px, .8fr) minmax(140px, 1fr) minmax(130px, .9fr) auto auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px
}

.table-manager-number {
    color: var(--muted);
    font-size: .82rem
}

.table-manager-number strong {
    display: block;
    color: var(--text);
    font-size: 1.1rem
}

@media (max-width: 900px) {
    .table-create-form,
    .table-manager-row {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .table-create-form > div,
    .table-manager-number {
        grid-column: 1 / -1
    }
}

.users-hero { margin-bottom: 18px }
.users-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.kpi-green { color: var(--green) }
.kpi-muted { color: var(--muted) }
.users-panel { overflow: hidden }
.users-panel-head { padding-bottom: 15px }
.users-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line) }
.users-search { display: flex; align-items: center; gap: 8px; width: min(380px, 100%); border: 1px solid var(--line); background: var(--surface-inset); border-radius: 10px; padding: 0 11px; color: var(--muted) }
.users-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); padding: 10px 0 }
.users-security-note, .modal-subtitle, .last-login, .current-user-label { color: var(--muted); font-size: .72rem }
.users-security-note { white-space: nowrap }
.users-table { min-width: 980px }
.users-table td { padding-top: 15px; padding-bottom: 15px }
.user-cell { display: flex; align-items: center; gap: 10px }
.user-cell small { display: block; color: var(--muted); font-size: .68rem; margin-top: 3px }
.user-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(241, 153, 98, .14); color: var(--accent-2); font-weight: 900 }
.role-badge, .status-label { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 9px; font-size: .68rem; font-weight: 800 }
.role-badge { background: var(--panel-2); color: #b9c8dd }
.role-admin { background: rgba(241, 153, 98, .13); color: var(--accent-2) }
.role-cocinero { background: rgba(108, 166, 255, .13); color: #9ec5ff }
.status-label.is-active { color: var(--green) }
.status-label.is-inactive { color: var(--red) }
.status-label span { width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.password-reset-inline { display: none; margin-top: 8px }
.password-reset-inline.is-visible { display: flex }
.user-modal { width: min(650px, 100%) }
.user-modal .modal-head { align-items: flex-start }
.modal-subtitle { margin: 6px 0 0 }
.user-form { padding: 4px 0 0 }
.user-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.password-input { display: flex; gap: 7px }
.password-input input { flex: 1 }
.password-input .icon-btn { flex: 0 0 auto; width: auto; padding: 0 11px; font-size: .72rem }
.password-strength { color: var(--muted); font-size: .68rem; font-weight: 600 }
.password-strength.strength-1 { color: var(--red) }
.password-strength.strength-2 { color: var(--accent-2) }
.password-strength.strength-3 { color: var(--green) }

.recipe-admin {
    margin-top: 18px;
    overflow: hidden
}

.recipe-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 20px 16px
}

.recipe-step {
    color: var(--accent-2);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    white-space: nowrap
}

.recipe-product-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 20px 16px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 8%, var(--panel-2))
}

.recipe-label,
.recipe-product-bar strong {
    display: block
}

.recipe-label {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em
}

.recipe-product-bar strong {
    font-size: 1.05rem
}

.recipe-product-select {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800
}

.recipe-product-select select {
    min-width: 220px;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 10px;
    background: var(--surface-inset);
    color: var(--text)
}

.recipe-add-panel,
.recipe-list {
    border-top: 1px solid var(--line)
}

.recipe-add-panel {
    padding: 18px 20px 20px;
    background: var(--panel-2)
}

.recipe-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px
}

.recipe-panel-title > div {
    flex: 1
}

.recipe-panel-title strong,
.recipe-panel-title small {
    display: block
}

.recipe-panel-title strong {
    font-size: .86rem
}

.recipe-panel-title small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .72rem
}

.recipe-number {
    display: grid;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #1c120d;
    font-size: .75rem;
    font-weight: 900
}

.recipe-add-form {
    display: grid;
    grid-template-columns: minmax(190px, 1.4fr) minmax(130px, .7fr) auto auto;
    align-items: end;
    gap: 12px
}

.recipe-add-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800
}

.recipe-add-form input,
.recipe-add-form select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 11px;
    background: var(--surface-inset);
    color: var(--text)
}

.recipe-check {
    flex-direction: row !important;
    align-items: center;
    min-height: 40px
}

.recipe-check input {
    width: auto
}

.recipe-list {
    padding-bottom: 8px
}

.recipe-list > .recipe-panel-title {
    margin: 18px 20px 8px
}

.ingredient-create-panel {
    margin: 0 20px 18px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--green) 6%, var(--panel-2))
}

.ingredient-create-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.6fr) repeat(5, minmax(105px, 1fr));
    align-items: end;
    gap: 10px
}

.ingredient-create-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800
}

.ingredient-create-form input,
.ingredient-create-form select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 9px;
    background: var(--surface-inset);
    color: var(--text)
}

.field-optional {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 500
}

.ingredient-create-submit {
    min-height: 40px;
    white-space: nowrap
}

.ingredient-create-submit span {
    margin-right: 4px;
    font-size: 1rem;
    line-height: 0
}

.card-subtitle {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: .76rem
}

.recipe-inline-form {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 120px
}

.recipe-inline-form input {
    width: 84px
}

.recipe-inline-form span,
.inline-check {
    color: var(--muted);
    font-size: .74rem;
    white-space: nowrap
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.inline-check input {
    width: auto
}

.check-label {
    justify-content: flex-end
}

.check-label input {
    width: auto !important;
    margin-right: 8px
}

@media(max-width:900px) {
    .users-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .users-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .users-search {
        width: 100%
    }

    .quick-form {
        grid-template-columns: 1fr 1fr
    }

    .quick-form strong,
    .quick-form .btn {
        grid-column: 1/-1
    }

    .recipe-product-bar {
        align-items: stretch;
        flex-direction: column
    }

    .recipe-product-select {
        align-items: stretch;
        flex-direction: column
    }

    .recipe-product-select select {
        min-width: 0
    }

    .recipe-add-form {
        grid-template-columns: 1fr 1fr
    }

    .recipe-add-form label:first-child,
    .recipe-add-form button {
        grid-column: 1 / -1
    }

    .ingredient-create-form {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ingredient-create-form label:first-child,
    .ingredient-create-submit {
        grid-column: 1 / -1
    }
}

@media(max-width:600px) {
    .recipe-header {
        padding: 18px 15px 14px
    }

    .recipe-product-bar,
    .recipe-add-panel {
        margin-left: 15px;
        margin-right: 15px
    }

    .recipe-product-bar {
        margin-top: 0
    }

    .recipe-add-panel {
        margin-left: 0;
        margin-right: 0;
        padding-left: 15px;
        padding-right: 15px
    }

    .recipe-add-form {
        grid-template-columns: 1fr
    }

    .recipe-add-form label:first-child,
    .recipe-add-form button {
        grid-column: auto
    }

    .ingredient-create-panel {
        margin-left: 15px;
        margin-right: 15px;
        padding: 15px
    }

    .ingredient-create-form {
        grid-template-columns: 1fr
    }

    .ingredient-create-form label:first-child,
    .ingredient-create-submit {
        grid-column: auto
    }

    .modal-danger-zone {
        align-items: stretch;
        flex-direction: column
    }

    .btn-delete-product {
        width: 100%
    }

    .payment-summary-main {
        grid-template-columns: 1fr 1fr
    }

    .modal-head-actions .btn {
        padding: 6px 8px;
        font-size: .68rem
    }

    .account-item {
        align-items: flex-start
    }

    .table-picker {
        grid-template-columns: 1fr 1fr
    }

    .customer-selector,
    .discount-control {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column
    }

    .discount-control select,
    .discount-control input,
    #tipOther {
        width: 100%
    }

    .users-kpis {
        grid-template-columns: 1fr 1fr
    }

    .users-security-note {
        white-space: normal
    }

    .user-form-grid {
        grid-template-columns: 1fr
    }

    .quick-form {
        grid-template-columns: 1fr
    }

    .quick-form strong,
    .quick-form .btn {
        grid-column: auto
    }

    .password-reset {
        min-width: 180px
    }
}

.form-hint {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.4
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center
}

.table-actions form {
    margin: 0
}

.modal[hidden],
.modal-backdrop[hidden] {
    display: none !important
}

.ticket-page {
    width: min(820px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 18px
}

.ticket-page-head,
.ticket-page-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.ticket-page-head h2 {
    margin: 4px 0;
    font-size: clamp(1.5rem, 3vw, 2.2rem)
}

.ticket-page-head p:not(.eyebrow) {
    color: var(--muted);
    margin: 0
}

.ticket-paper {
    width: min(380px, 100%);
    margin: 0 auto;
    padding: 22px 18px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    background: var(--panel);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
    color: var(--text);
    font-family: "Courier New", Courier, monospace;
    font-size: .78rem
}

.ticket-paper-head {
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--text);
    text-align: center
}

.ticket-brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 auto 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 900
}

.ticket-paper-head h1 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: .08em
}

.ticket-subtitle,
.ticket-paper-head p:not(.eyebrow),
.ticket-paper-footer {
    color: var(--muted);
    margin: 4px 0;
    font-size: .7rem
}

.ticket-subtitle {
    letter-spacing: .08em
}

.ticket-rule {
    overflow: hidden;
    margin: 11px 0 8px;
    color: var(--muted);
    white-space: nowrap
}

.ticket-identification {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    font-size: .72rem
}

.ticket-identification strong {
    font-size: 1.05rem
}

.ticket-paper-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line)
}

.ticket-paper-meta span,
.ticket-payments span {
    color: var(--muted);
    font-size: .7rem;
    overflow-wrap: anywhere
}

.ticket-paper-meta strong {
    display: block;
    margin-bottom: 3px;
    color: var(--text);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase
}

.ticket-lines {
    padding: 13px 0 10px;
    border-bottom: 1px dashed var(--line)
}

.ticket-line-head,
.ticket-line,
.ticket-totals>div {
    display: flex;
    justify-content: space-between;
    gap: 8px
}

.ticket-line-head {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase
}

.ticket-line {
    align-items: flex-start;
    padding: 7px 0
}

.ticket-qty {
    flex: 0 0 32px;
    text-align: left
}

.ticket-description {
    flex: 1;
    min-width: 0
}

.ticket-line>strong:last-child,
.ticket-line-head>span:last-child,
.ticket-totals strong {
    flex: 0 0 auto;
    text-align: right
}

.ticket-line small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .65rem;
    line-height: 1.35
}

.ticket-totals {
    display: grid;
    gap: 6px;
    padding: 14px 0
}

.ticket-total {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 2px solid var(--text);
    font-size: 1.05rem
}

.ticket-payments {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px dashed var(--line)
}

.ticket-paper-footer {
    display: grid;
    gap: 4px;
    padding-top: 13px;
    border-top: 1px dashed var(--line);
    text-align: center
}

@media (max-width: 600px) {
    .ticket-page-head {
        align-items: flex-start;
        flex-direction: column
    }

    .ticket-back {
        width: 100%;
        text-align: center
    }

    .ticket-paper-meta {
        grid-template-columns: 1fr 1fr
    }

    .ticket-paper {
        padding: 20px 15px
    }
}

@media print {
    @page { size: 58mm auto; margin: 0 }

    body,
    .app-shell,
    .app-main,
    .page-content {
        background: #fff !important
    }

    .sidebar,
    .topbar,
    .ticket-page-head,
    .ticket-page-footer,
    .flash,
    .toast-container {
        display: none !important
    }

    .app-shell {
        display: block
    }

    .page-content {
        padding: 0
    }

    .ticket-page,
    .ticket-paper {
        width: 100%;
        max-width: none;
        margin: 0;
        box-shadow: none
    }

    .ticket-paper {
        width: 58mm;
        min-width: 58mm;
        border: 0;
        padding: 0;
        color: #111
    }
}
/* =========================================================
   MESAS · CARDS OPERATIVOS PROFESIONALES
   Información = texto estructurado. Acciones = botones reales.
   ========================================================= */
.tables-grid { align-items: stretch; }
.table-card { min-height: 0; padding: 16px; gap: 12px; overflow: hidden; }
.table-card-head { gap: 12px; align-items: flex-start; }
.table-identity { flex: 1 1 auto; min-width: 0; }
.table-title-block { min-width: 0; }
.table-title-block h3 { max-width: 100%; font-size: .98rem; line-height: 1.25; }
.table-state-label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0; background: transparent !important; border: 0; border-radius: 0; color: var(--muted); font-size: .7rem; font-weight: 850; white-space: nowrap; }
.table-state-label.status-free { color: var(--green); }
.table-state-label.status-occupied { color: var(--accent-2); }
.table-state-label.status-paid { color: #9ec5ff; }
.table-state-label.status-refunded, .table-state-label.status-out_of_service { color: var(--danger-text); }
.table-state-label.status-reserved { color: #caa8ff; }
.table-state-label .status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.table-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: color-mix(in srgb,var(--panel-2) 55%,transparent); }
.table-info-item { min-width: 0; padding: 9px 10px; display: grid; gap: 3px; border-right: 1px solid var(--line); }
.table-info-item:nth-child(2) { border-right: 0; }
.table-info-item.table-info-wide { grid-column: 1/-1; border-top: 1px solid var(--line); border-right: 0; }
.table-info-item span, .table-operation-item span { color: var(--muted); font-size: .61rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.table-info-item strong, .table-operation-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: .75rem; }
.table-order { margin: 0; padding: 10px 11px; }
.table-operation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.table-operation-item { min-width: 0; display: grid; gap: 3px; padding: 8px; border-left: 2px solid color-mix(in srgb,var(--table-state-color,var(--accent)) 60%,transparent); background: color-mix(in srgb,var(--panel-2) 52%,transparent); border-radius: 6px; }
.table-empty { flex: 1 1 auto; min-height: 78px; padding: 11px; border: 1px dashed color-mix(in srgb,var(--green) 42%,var(--line)); border-radius: 10px; background: color-mix(in srgb,var(--green) 5%,transparent); }
.table-empty > div { display: grid; gap: 2px; }
.table-empty strong { color: var(--text); font-size: .78rem; }
.table-empty span:not(.table-empty-icon) { color: var(--muted); font-size: .69rem; }
.table-card-footer { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.btn-group.table-action-group { width: 100%; display: flex; align-items: stretch; gap: 0; }
.btn-group.table-action-group > .btn { flex: 1 1 0; width: auto; min-width: 0; min-height: 36px; padding-inline: 10px; border-radius: 0; justify-content: center; white-space: normal; line-height: 1.15; }
.btn-group.table-action-group > .btn:first-child { border-radius: 9px 0 0 9px; }
.btn-group.table-action-group > .btn:last-child { border-radius: 0 9px 9px 0; }
.btn-group.table-action-group > .btn:only-child { border-radius: 9px; }
.btn-group.table-action-group > .btn + .btn { margin-left: -1px; }
.table-action-note { margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.35; text-align: center; }
.table-card-footer .clear-table-form { margin: 0; }
.table-card-footer .clear-table-form .btn { width: 100%; }
@media (max-width: 420px) { .table-card-head { align-items: center; } .table-operation-grid { grid-template-columns: 1fr; } .table-operation-item { grid-template-columns: 82px 1fr; align-items: center; } }

/* =========================================================
   DATATABLE · HISTORIAL DE VENTAS
   ========================================================= */
.sales-history-card { overflow: hidden; }
.sales-table-head { align-items: flex-start; margin-bottom: 16px; }
.sales-table-head h3 { margin: 2px 0 4px; }
.sales-table-subtitle { margin: 0; color: var(--muted); font-size: .78rem; }
.datatable-toolbar, .datatable-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.datatable-toolbar { padding: 0 0 16px; }
.datatable-length { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .76rem; }
.datatable-length select, .datatable-search input { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); outline: none; }
.datatable-length select { padding: 7px 30px 7px 10px; }
.datatable-search { margin-left: auto; width: min(100%, 360px); }
.datatable-search input { width: 100%; padding: 8px 12px; }
.datatable-search input:focus, .datatable-length select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.datatable-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sales-datatable { min-width: 980px; }
.sales-datatable th { position: relative; background: var(--panel-2); white-space: nowrap; user-select: none; }
.sales-datatable th.is-sortable { cursor: pointer; padding-right: 28px; }
.sales-datatable th.is-sortable::after { content: '↕'; position: absolute; right: 10px; opacity: .38; font-size: .8rem; }
.sales-datatable th.is-sortable.is-sorted[data-sort-direction="asc"]::after { content: '↑'; opacity: 1; color: var(--accent); }
.sales-datatable th.is-sortable.is-sorted[data-sort-direction="desc"]::after { content: '↓'; opacity: 1; color: var(--accent); }
.sales-datatable td { line-height: 1.35; }
.sales-datatable tr[hidden] { display: none !important; }
.sales-id { color: var(--muted); font-variant-numeric: tabular-nums; }
.sales-ticket, .sales-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sales-ticket { color: var(--accent-2); }
.sales-primary { font-weight: 700; color: var(--text); }
.sales-date { white-space: nowrap; color: var(--muted); font-size: .78rem; }
.sales-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: .76rem; font-weight: 800; }
.sales-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
.sales-status.is-paid { color: var(--success-text); }
.sales-status.is-refunded { color: var(--danger-text); }
.sales-status.is-pending { color: var(--warning-text); }
.sales-actions { display: inline-flex; }
.sales-action-muted { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.datatable-detail-toggle { display: none; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); color: var(--text); font-weight: 900; cursor: pointer; }
.datatable-footer { padding-top: 16px; }
.datatable-info { margin: 0; color: var(--muted); font-size: .76rem; }
.datatable-pagination { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.datatable-page { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-weight: 800; }
.datatable-page:hover:not(:disabled), .datatable-page.is-active { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.datatable-page:disabled { opacity: .35; cursor: default; }
.datatable-empty { padding: 38px 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 1100px) {
  .datatable-wrap { overflow: visible; border: 0; border-radius: 0; }
  .sales-datatable { min-width: 0; }
  .sales-datatable .control { width: 42px; }
  .sales-datatable .priority-4 { display: none; }
  .datatable-detail-toggle { display: inline-grid; place-items: center; }
  .sales-datatable tr.is-expanded td.priority-4 { display: table-cell; }
}
@media (max-width: 860px) {
  .sales-datatable .priority-3, .sales-datatable .priority-4 { display: none; }
  .sales-datatable tr.is-expanded td.priority-3, .sales-datatable tr.is-expanded td.priority-4 { display: table-cell; }
}
@media (max-width: 720px) {
  .datatable-toolbar { align-items: stretch; }
  .datatable-length, .datatable-search { width: 100%; margin-left: 0; }
  .datatable-search { max-width: none; }
  .datatable-wrap { overflow: visible; }
  .sales-datatable, .sales-datatable tbody, .sales-datatable tr, .sales-datatable td { display: block; width: 100%; }
  .sales-datatable thead { display: none; }
  .sales-datatable tbody { display: grid; gap: 10px; }
  .sales-datatable tr { position: relative; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
  .sales-datatable td { min-height: 30px; padding: 7px 0; border: 0; text-align: right; }
  .sales-datatable td::before { content: attr(data-label); float: left; padding-right: 14px; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
  .sales-datatable td.control { position: absolute; top: 10px; right: 10px; width: auto; min-height: 0; padding: 0; z-index: 2; }
  .sales-datatable td.control::before { display: none; }
  .sales-datatable td:nth-child(2), .sales-datatable td.priority-2, .sales-datatable td.priority-3, .sales-datatable td.priority-4 { display: none; }
  .sales-datatable tr.is-expanded td:nth-child(2), .sales-datatable tr.is-expanded td.priority-2, .sales-datatable tr.is-expanded td.priority-3, .sales-datatable tr.is-expanded td.priority-4 { display: block; }
  .sales-datatable td:nth-child(3) { padding-right: 42px; font-size: 1rem; }
  .sales-datatable td.actions { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--line); }
  .sales-actions { justify-content: flex-end; }
  .datatable-footer { align-items: flex-start; }
  .datatable-pagination { width: 100%; margin-left: 0; justify-content: center; flex-wrap: wrap; }
}