/* ================= الألوان (فاتح / غامق) ================= */
        :root, [data-theme="light"] {
            --bg: 244 245 247; --surface: 255 255 255; --surface-2: 240 242 245;
            --line: 236 238 242; --line-2: 222 225 231;
            --ink: 16 19 24; --ink-2: 59 65 77; --muted: 108 114 126; --subtle: 128 134 146;
            --accent: 255 107 26; --accent-text: 207 78 0; --accent-press: 240 94 12; --on-accent: 26 12 2;
            --ok: 18 161 80; --ok-text: 12 122 60; --on-ok: 255 255 255;
            --bad: 220 52 52; --bad-text: 190 36 36; --on-bad: 255 255 255;
            --warn: 176 108 0;
            --t-bg: 80% 97%; --t-bg-h: 80% 94.5%; --t-ico: 75% 89%; --t-fg: 58% 32%;
            --shadow: 0 1px 2px rgb(16 19 24 / .04);
            --shadow-lg: 0 24px 60px rgb(16 19 24 / .18);
            --logo: url("/logo-light.png");
            color-scheme: light;
        }
        [data-theme="dark"] {
            --bg: 12 14 18; --surface: 22 25 31; --surface-2: 30 34 42;
            --line: 38 43 52; --line-2: 54 60 72;
            --ink: 238 240 244; --ink-2: 200 204 212; --muted: 150 156 170; --subtle: 124 131 146;
            --accent: 255 122 46; --accent-text: 255 145 84; --accent-press: 240 105 30; --on-accent: 26 12 2;
            --t-bg: 22% 15%; --t-bg-h: 22% 18%; --t-ico: 28% 24%; --t-fg: 70% 72%;
            --ok: 52 199 132; --ok-text: 86 214 155; --on-ok: 6 26 16;
            --bad: 244 96 96; --bad-text: 250 132 132; --on-bad: 30 8 8;
            --warn: 245 180 60;
            --shadow: 0 1px 2px rgb(0 0 0 / .3);
            --shadow-lg: 0 24px 70px rgb(0 0 0 / .55);
            --logo: url("/logo-dark.png");
            color-scheme: dark;
        }

        /* ================= الأساس ================= */
        * { box-sizing: border-box; }
        html { overflow-x: hidden; max-width: 100%; -webkit-text-size-adjust: 100%; }
        body {
            margin: 0; min-height: 100dvh; overflow-x: clip; max-width: 100%; /* clip مش hidden: مشان sticky يضل شغال */
            font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 15px; line-height: 1.55;
            background: rgb(var(--bg)); color: rgb(var(--ink));
            -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
            font-variant-numeric: tabular-nums;
        }
        button, input, select, textarea { font: inherit; color: inherit; }
        button { cursor: pointer; }
        button:disabled { cursor: not-allowed; opacity: .6; }
        [hidden] { display: none !important; }
        ::selection { background: rgb(var(--accent) / .25); }
        :focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
        .font-black { font-weight: 700 !important; }
        .font-mono, .font-mono-tag { font-family: inherit !important; font-variant-numeric: tabular-nums; }
        .muted { color: rgb(var(--muted)); }
        .small { font-size: 12.5px; }
        .num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
        .ph { line-height: 1; }

        /* النص فوق الأزرار المعبّاة (ألوان Tailwind القديمة) */
        .bg-orange-600.text-white, .bg-orange-500.text-white { color: rgb(var(--on-accent)) !important; }
        .bg-emerald-600.text-white, .bg-emerald-500.text-white { color: rgb(var(--on-ok)) !important; }

        /* ================= اللوغو ================= */
        .logo { display: inline-block; width: 36px; height: 36px; background: var(--logo) center / contain no-repeat; flex-shrink: 0; }
        .logo-lg { width: 64px; height: 64px; }

        /* ================= الأزرار ================= */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
            font-size: 14px; font-weight: 600; white-space: nowrap;
            transition: background-color .15s, border-color .15s, color .15s, transform .1s;
        }
        .btn:active:not(:disabled) { transform: scale(.98); }
        .btn .ph { font-size: 18px; }
        .btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
        .btn-sm .ph { font-size: 16px; }
        .btn-lg { min-height: 52px; font-size: 15.5px; border-radius: 14px; }
        .btn-primary { background: rgb(var(--accent)); color: rgb(var(--on-accent)); }
        .btn-primary:hover:not(:disabled) { background: rgb(var(--accent-press)); }
        .btn-secondary { background: rgb(var(--surface)); border-color: rgb(var(--line-2)); color: rgb(var(--ink)); }
        .btn-secondary:hover:not(:disabled) { background: rgb(var(--surface-2)); }
        .btn-ghost { background: transparent; color: rgb(var(--ink-2)); }
        .btn-ghost:hover:not(:disabled) { background: rgb(var(--surface-2)); }
        .btn-success { background: rgb(var(--ok)); color: rgb(var(--on-ok)); }
        .btn-success:hover:not(:disabled) { filter: brightness(.95); }
        .btn-danger { background: rgb(var(--bad)); color: rgb(var(--on-bad)); }
        .btn-danger-soft { background: rgb(var(--bad) / .1); color: rgb(var(--bad-text)); }
        .btn-danger-soft:hover:not(:disabled) { background: rgb(var(--bad) / .16); }
        .btn-brand { /* اسم قديم مستعمل بالكود */
            display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
            background: rgb(var(--accent)); color: rgb(var(--on-accent)); font-weight: 600; border-radius: 14px; padding: 0 20px; border: 0;
            transition: background-color .15s, transform .1s;
        }
        .btn-brand:hover:not(:disabled) { background: rgb(var(--accent-press)); }
        .btn-brand:active { transform: scale(.98); }
        .icon-btn {
            display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0;
            border-radius: 12px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink-2));
            transition: background-color .15s, color .15s;
        }
        .icon-btn:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
        .icon-btn .ph { font-size: 20px; }
        .icon-btn.spinning .ph { animation: spin .8s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ================= الحقول ================= */
        .field { display: flex; flex-direction: column; gap: 6px; }
        .label { font-size: 13px; font-weight: 600; color: rgb(var(--ink-2)); }
        .input-box {
            width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; outline: none;
            background: rgb(var(--surface)); border: 1px solid rgb(var(--line-2)); color: rgb(var(--ink));
            font-size: 15px; transition: border-color .15s, box-shadow .15s;
        }
        .input-box::placeholder { color: rgb(var(--subtle)); }
        .input-box:focus { border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / .15); }
        .input-box:disabled { background: rgb(var(--surface-2)); color: rgb(var(--muted)); }
        textarea.input-box { height: auto; padding: 12px 14px; resize: vertical; }
        input[type="date"].input-box, input[type="time"].input-box { text-align: right; }
        input[type="date"].input-box::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
        select.input-box {
            -webkit-appearance: none; appearance: none; padding-left: 38px; cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878d9a' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: left 12px center; background-size: 16px;
        }
        .input-wrap { position: relative; }
        .input-wrap > .ph { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: rgb(var(--subtle)); pointer-events: none; }
        .input-wrap > .input-box { padding-right: 42px; }
        .input-action { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; border-radius: 10px; color: rgb(var(--subtle)); display: grid; place-items: center; }
        .input-action:hover { color: rgb(var(--ink)); background: rgb(var(--surface-2)); }
        .input-action .ph { font-size: 18px; }
        .form-error { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; background: rgb(var(--bad) / .1); color: rgb(var(--bad-text)); }
        input[type=number]::-webkit-inner-spin-button { opacity: .4; }

        /* ================= البطاقات والعناصر ================= */
        .card, .glass-panel { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 16px; box-shadow: var(--shadow); }
        .card { padding: 20px; }
        .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
        .card-head h3 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
        .card-head h3 .ph { font-size: 20px; color: rgb(var(--accent-text)); }
        .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
        .badge-accent { background: rgb(var(--accent) / .12); color: rgb(var(--accent-text)); }
        .badge-ok { background: rgb(var(--ok) / .12); color: rgb(var(--ok-text)); }
        .badge-bad { background: rgb(var(--bad) / .12); color: rgb(var(--bad-text)); }
        .badge-muted { background: rgb(var(--surface-2)); color: rgb(var(--muted)); border: 1px solid rgb(var(--line)); }
        .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.6; }
        .alert .ph { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
        .alert-danger { background: rgb(var(--bad) / .09); color: rgb(var(--bad-text)); border: 1px solid rgb(var(--bad) / .22); }
        .alert-danger a, .alert-danger button { color: inherit; text-decoration: underline; background: none; border: 0; padding: 0; font-weight: 700; }
        .note { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgb(var(--accent) / .07); border: 1px solid rgb(var(--accent) / .2); }
        .note .ph { font-size: 20px; color: rgb(var(--accent-text)); flex-shrink: 0; margin-top: 2px; }
        .note p { margin: 0; }
        .notes { display: grid; gap: 10px; }
        .notes:empty { display: none; }
        .empty { text-align: center; padding: 36px 16px; color: rgb(var(--muted)); font-size: 14px; }
        .empty .ph { display: block; font-size: 34px; margin: 0 auto 8px; color: rgb(var(--subtle)); }
        .skeleton { border-radius: 12px; background: linear-gradient(90deg, rgb(var(--surface-2)) 0%, rgb(var(--line) / .7) 50%, rgb(var(--surface-2)) 100%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
        @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

        /* تبويبات مجزأة */
        .seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 13px; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); max-width: 100%; }
        .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; color: rgb(var(--muted)); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s; }
        .seg-btn:hover { color: rgb(var(--ink)); }
        .seg-btn.is-active { background: rgb(var(--surface)); color: rgb(var(--ink)); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
        [data-theme="dark"] .seg-btn.is-active { background: rgb(var(--line)); }
        .seg-btn .ph { font-size: 17px; }
        .seg-count { min-width: 22px; padding: 0 6px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; background: rgb(var(--line)); color: rgb(var(--ink-2)); }
        .seg-btn.is-active .seg-count { background: rgb(var(--accent) / .14); color: rgb(var(--accent-text)); }
        .seg-count-danger { background: rgb(var(--bad) / .14) !important; color: rgb(var(--bad-text)) !important; }

        /* بلاطات الأقسام */
        .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
        @media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
        @media (min-width: 1280px) { .tiles.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
        .tile {
            display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; padding: 12px 14px;
            border-radius: 14px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface-2)); text-align: right;
            font-size: 14.5px; font-weight: 600; transition: border-color .15s, background-color .15s, transform .1s;
        }
        .tile:hover { border-color: rgb(var(--line-2)); background: rgb(var(--surface)); }
        .tile:active { transform: scale(.98); }
        .tile.is-active { border-color: rgb(var(--accent) / .55); background: rgb(var(--accent) / .07); }
        .tile .tile-count { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; background: rgb(var(--accent)); color: rgb(var(--on-accent)); font-size: 12.5px; }
        .tile .ph { font-size: 18px; color: rgb(var(--subtle)); }

        /* عداد + / - */
        .stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .step-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgb(var(--line-2)); background: rgb(var(--surface)); display: grid; place-items: center; font-size: 18px; transition: background-color .15s, transform .1s; }
        .step-btn:active { transform: scale(.94); }
        .step-btn:hover { background: rgb(var(--surface-2)); }
        .step-btn.plus { background: rgb(var(--accent)); border-color: transparent; color: rgb(var(--on-accent)); }
        .step-btn.plus:hover { background: rgb(var(--accent-press)); }
        .step-val { min-width: 32px; text-align: center; font-size: 18px; font-weight: 700; }

        /* بطاقة صنف */
        .dish { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); transition: border-color .15s, background-color .15s; }
        .dish.is-active { border-color: rgb(var(--accent) / .55); background: rgb(var(--accent) / .05); }
        .dish-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
        .dish-name { font-weight: 700; font-size: 14.5px; }
        .link-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 600; color: rgb(var(--muted)); text-align: right; }
        .link-btn:hover { color: rgb(var(--accent-text)); }
        .link-btn.accent { color: rgb(var(--accent-text)); }
        .link-btn .ph { font-size: 15px; }
        .inline-edit { display: flex; gap: 6px; }
        .inline-edit .input-box { height: 38px; font-size: 14px; }
        .inline-edit .icon-btn { width: 38px; height: 38px; background: rgb(var(--ok)); color: rgb(var(--on-ok)); border: 0; }

        /* ================= الجدول ================= */
        .table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
        .table { width: 100%; border-collapse: collapse; font-size: 13.5px; text-align: right; }
        .table th { font-size: 12.5px; font-weight: 600; color: rgb(var(--muted)); padding: 10px 12px; border-bottom: 1px solid rgb(var(--line)); white-space: nowrap; }
        .table td { padding: 12px; border-bottom: 1px solid rgb(var(--line) / .7); vertical-align: middle; }
        .table tr:last-child td { border-bottom: 0; }
        .table tbody tr:hover { background: rgb(var(--surface-2)); }

        /* ================= شاشة الدخول ================= */
        .login { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgb(var(--bg)); overflow-y: auto; }
        .login::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 400px at 85% 10%, rgb(var(--accent) / .09), transparent 70%); pointer-events: none; }
        .login-card { position: relative; width: 100%; max-width: 400px; padding: 32px 28px 22px; border-radius: 22px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); box-shadow: var(--shadow-lg); }
        .login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
        .login-brand h1 { margin: 0; font-size: 22px; font-weight: 700; direction: ltr; text-align: right; }
        .login-brand h1 span { color: rgb(var(--accent-text)); }
        .login-brand p { margin: 2px 0 0; font-size: 14px; color: rgb(var(--muted)); }
        .login-form { display: grid; gap: 16px; }
        .login-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgb(var(--line)); font-size: 13px; color: rgb(var(--muted)); }
        .login-foot .ph { font-size: 16px; }

        /* ================= الهيكل: قائمة جانبية + شريط علوي ================= */
        :root { --side-w: 256px; --top-h: 68px; --bottom-h: 0px; }
        .shell { min-height: 100dvh; }
        .sidebar {
            position: fixed; top: 0; bottom: 0; right: 0; z-index: 45; width: var(--side-w);
            display: flex; flex-direction: column; background: rgb(var(--surface)); border-left: 1px solid rgb(var(--line));
            transition: transform .28s cubic-bezier(.2, .8, .2, 1);
        }
        .side-head { display: flex; align-items: center; gap: 12px; height: var(--top-h); padding: 0 18px; border-bottom: 1px solid rgb(var(--line)); }
        .side-brand { flex: 1; display: grid; line-height: 1.25; }
        .side-brand b { font-size: 16px; direction: ltr; text-align: right; }
        .side-brand small { font-size: 12px; color: rgb(var(--muted)); }
        .side-nav { flex: 1; overflow-y: auto; padding: 14px 12px; display: grid; align-content: start; gap: 2px; }
        .nav-group { font-size: 12px; font-weight: 600; color: rgb(var(--subtle)); padding: 14px 12px 6px; }
        .nav-group:first-child { padding-top: 2px; }
        .nav-item {
            display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 11px; border: 0; width: 100%;
            background: transparent; color: rgb(var(--ink-2)); font-size: 14.5px; font-weight: 500; text-align: right;
            transition: background-color .15s, color .15s;
        }
        .nav-item .ph { font-size: 21px; color: rgb(var(--subtle)); }
        .nav-item:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
        .nav-item.is-active { background: rgb(var(--accent) / .1); color: rgb(var(--accent-text)); font-weight: 700; }
        .nav-item.is-active .ph { color: rgb(var(--accent-text)); }
        .nav-item .nav-badge { margin-right: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; background: rgb(var(--bad)); color: rgb(var(--on-bad)); }
        .side-foot { padding: 14px; border-top: 1px solid rgb(var(--line)); display: grid; gap: 12px; }
        .me { display: flex; align-items: center; gap: 10px; }
        .me b { display: block; font-size: 14px; }
        .me small { font-size: 12px; color: rgb(var(--muted)); }
        .avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; background: rgb(var(--accent) / .12); color: rgb(var(--accent-text)); flex-shrink: 0; }
        .side-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

        .main { margin-right: var(--side-w); min-height: 100dvh; display: flex; flex-direction: column; }
        .topbar {
            position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 24px;
            background: rgb(var(--bg) / .82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
            border-bottom: 1px solid rgb(var(--line) / .8);
        }
        .topbar-title { flex: 1; min-width: 0; }
        .topbar-title h1 { margin: 0; font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .topbar-title p { margin: 0; font-size: 12.5px; color: rgb(var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .topbar-actions { display: flex; align-items: center; gap: 8px; }
        .clock-chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); font-size: 13.5px; font-weight: 600; color: rgb(var(--ink-2)); }
        .clock-chip .ph { font-size: 17px; color: rgb(var(--subtle)); }
        .menu-btn { display: none; }
        .content { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 24px calc(32px + var(--bottom-h)); }
        .page { animation: pageIn .28s ease-out; }
        @keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
        .page > * + * { margin-top: 18px; }
        .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
        .page-head h2 { margin: 0; font-size: 24px; font-weight: 700; }
        .page-head p { margin: 2px 0 0; }
        .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
        .search { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
        .search .ph { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: rgb(var(--subtle)); pointer-events: none; }
        .search .input-box { padding-right: 42px; }

        .bottom-nav { display: none; }
        .drawer-backdrop { display: none; }

        @media (max-width: 1023px) {
            :root { --top-h: 60px; }
            .sidebar { transform: translateX(105%); visibility: hidden; width: min(300px, 86vw); transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; }
            .shell.drawer-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-lg); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
            .shell.drawer-open .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: rgb(0 0 0 / .4); }
            .main { margin-right: 0; }
            .menu-btn { display: inline-flex; }
            .topbar { padding: 0 14px; }
            .topbar-title h1 { font-size: 17px; }
            .clock-chip { display: none; }
            .content { padding: 16px 14px calc(24px + var(--bottom-h)); }
            .page-head h2 { font-size: 20px; }
            .shell.has-bottom-nav { --bottom-h: calc(64px + env(safe-area-inset-bottom)); }
            .shell.has-bottom-nav .bottom-nav {
                display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
                height: var(--bottom-h); padding-bottom: env(safe-area-inset-bottom);
                background: rgb(var(--surface) / .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgb(var(--line));
            }
        }
        @media (min-width: 1024px) {
            .theme-btn-top { display: none; }
            .side-head .icon-btn { display: none; }
        }
        .bn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: rgb(var(--subtle)); font-size: 11.5px; font-weight: 600; min-width: 0; }
        .bn-item .ph { font-size: 23px; }
        .bn-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
        .bn-item.is-active { color: rgb(var(--accent-text)); }

        /* ================= النوافذ ================= */
        .modal { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(10 12 16 / .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn .18s ease-out; }
        .sheet { width: 100%; max-width: 440px; max-height: min(88dvh, 820px); display: flex; flex-direction: column; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 20px; box-shadow: var(--shadow-lg); animation: sheetIn .22s cubic-bezier(.2, .8, .2, 1); }
        .sheet-lg { max-width: 760px; }
        .sheet-sm { max-width: 380px; }
        .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgb(var(--line)); }
        .sheet-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
        .sheet-head p { margin: 2px 0 0; font-size: 13px; color: rgb(var(--muted)); }
        .sheet-body { padding: 18px 20px; overflow-y: auto; display: grid; gap: 16px; }
        .sheet-foot { padding: 14px 20px; border-top: 1px solid rgb(var(--line)); display: flex; gap: 10px; }
        .sheet-foot > * { flex: 1; }
        @keyframes fadeIn { from { opacity: 0; } }
        @keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
        @media (max-width: 639px) {
            .modal { align-items: flex-end; padding: 0; }
            .sheet { max-width: none; border-radius: 22px 22px 0 0; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); }
        }
        .confirm-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgb(var(--bad) / .1); color: rgb(var(--bad-text)); font-size: 26px; }

        /* ================= الإشعارات ================= */
        .toast {
            position: fixed; z-index: 70; left: 50%; bottom: calc(24px + var(--bottom-h)); transform: translate(-50%, 16px); opacity: 0; visibility: hidden; pointer-events: none;
            display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px); padding: 12px 16px; border-radius: 14px;
            background: rgb(var(--ink)); color: rgb(var(--surface)); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg);
            transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1), visibility .2s;
        }
        .toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
        .toast .ph { font-size: 20px; }
        .toast.ok .ph { color: rgb(var(--ok)); }
        .toast.err { background: rgb(var(--bad)); color: rgb(var(--on-bad)); }
        [data-theme="dark"] .toast.ok .ph { color: rgb(21 128 82); }

        /* ================= لوحة اليوم ================= */
        .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
        .stat { position: relative; padding: 18px; border-radius: 16px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); box-shadow: var(--shadow); text-align: right; }
        button.stat { width: 100%; transition: border-color .15s; }
        button.stat:hover { border-color: rgb(var(--line-2)); }
        .stat-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: rgb(var(--surface-2)); color: rgb(var(--ink-2)); margin-bottom: 14px; }
        .stat-accent .stat-ico { background: rgb(var(--accent) / .12); color: rgb(var(--accent-text)); }
        .stat-danger .stat-ico { background: rgb(var(--bad) / .1); color: rgb(var(--bad-text)); }
        .stat-label { margin: 0; font-size: 13.5px; font-weight: 600; color: rgb(var(--muted)); }
        .stat-value { margin: 2px 0 0; font-size: 32px; font-weight: 700; line-height: 1.2; }
        @media (max-width: 639px) {
            .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
            .stat { padding: 12px; }
            .stat-ico { width: 32px; height: 32px; font-size: 17px; margin-bottom: 8px; border-radius: 10px; }
            .stat-value { font-size: 24px; }
            .stat-label { font-size: 12px; }
        }
        .rank-list { display: grid; gap: 4px; }
        .rank { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgb(var(--line) / .7); }
        .rank:last-child { border-bottom: 0; }
        .rank-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: rgb(var(--surface-2)); color: rgb(var(--muted)); }
        .rank:first-child .rank-n { background: rgb(var(--accent) / .12); color: rgb(var(--accent-text)); }
        .rank-name { font-weight: 600; min-width: 0; }
        .rank-bar { display: block; height: 4px; border-radius: 4px; background: rgb(var(--accent) / .55); margin-top: 6px; }
        .quick-range { display: flex; gap: 8px; flex-wrap: wrap; }

        /* ================= الحجوزات ================= */
        .res-grid { display: grid; gap: 18px; align-items: start; }
        @media (min-width: 1024px) { .res-grid { grid-template-columns: minmax(0, 1fr) 320px; } .res-summary { position: sticky; top: calc(var(--top-h) + 20px); } }
        .res-main { display: grid; gap: 18px; min-width: 0; }
        .fields-4 { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        @media (min-width: 1280px) { .fields-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
        @media (max-width: 479px) { .fields-4 { grid-template-columns: 1fr; } }
        .choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgb(var(--line)); background: rgb(var(--surface-2)); text-align: right; transition: border-color .15s, background-color .15s; }
        .choice .ph { font-size: 26px; color: rgb(var(--subtle)); }
        .choice b { display: block; font-size: 15px; }
        .choice small { font-size: 12.5px; color: rgb(var(--muted)); }
        .choice.is-active { border-color: rgb(var(--accent)); background: rgb(var(--accent) / .07); }
        .choice.is-active .ph { color: rgb(var(--accent-text)); }
        .guests-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgb(var(--line)); }
        .pills { display: flex; align-items: center; gap: 8px; }
        .pill { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid rgb(var(--line-2)); background: rgb(var(--surface)); font-weight: 700; font-size: 15px; transition: background-color .15s, border-color .15s; }
        .pill:hover { border-color: rgb(var(--accent) / .6); }
        .pill.is-active { background: rgb(var(--accent)); border-color: transparent; color: rgb(var(--on-accent)); }
        .pills .input-box { width: 72px; text-align: center; font-weight: 700; }
        .summary-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
        .summary-card h3 .ph { color: rgb(var(--accent-text)); font-size: 20px; }
        .summary-items { margin: 0 0 14px; font-size: 14px; color: rgb(var(--ink-2)); line-height: 1.8; }
        .summary-total { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin-bottom: 14px; border-top: 1px dashed rgb(var(--line-2)); }
        .summary-total b { font-size: 20px; }
        @media (max-width: 1023px) {
            .res-summary { position: sticky; bottom: calc(var(--bottom-h) + 10px); z-index: 20; }
            .summary-card { padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-lg); }
            .summary-card h3, .summary-items { display: none; }
            .summary-total { flex: 1; padding: 0; margin: 0; border: 0; flex-direction: column; align-items: flex-start; gap: 0; }
            .summary-total span { font-size: 12px; color: rgb(var(--muted)); }
            .summary-card .btn { width: auto !important; flex: 1.4; }
        }
        .week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
        @media (max-width: 767px) { .week-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none; } .week-strip::-webkit-scrollbar { display: none; } .day { min-width: 88px; scroll-snap-align: start; } }
        .day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); transition: border-color .15s, background-color .15s; }
        .day:hover { border-color: rgb(var(--line-2)); }
        .day small { font-size: 12px; color: rgb(var(--muted)); font-weight: 600; }
        .day b { font-size: 20px; line-height: 1.3; }
        .day .day-count { margin-top: 4px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgb(var(--surface-2)); color: rgb(var(--subtle)); }
        .day .day-count.has { background: rgb(var(--accent) / .12); color: rgb(var(--accent-text)); }
        .day.is-active { border-color: rgb(var(--accent)); background: rgb(var(--accent) / .07); }
        .rec-list { display: grid; gap: 10px; }
        .booking { border-radius: 16px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); box-shadow: var(--shadow); transition: border-color .15s; }
        .booking:hover { border-color: rgb(var(--line-2)); }
        .booking-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; width: 100%; background: none; border: 0; text-align: right; }
        .booking-time { width: 62px; height: 48px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: rgb(var(--accent) / .1); color: rgb(var(--accent-text)); direction: ltr; }
        .booking-main { flex: 1; min-width: 0; }
        .booking-main b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .booking-main span { font-size: 13px; color: rgb(var(--muted)); }
        .booking .chev { font-size: 18px; color: rgb(var(--subtle)); transition: transform .2s; }
        .booking.accordion-open .chev { transform: rotate(180deg); }
        .booking.is-done { opacity: .72; }
        .booking.is-done .booking-time { background: rgb(var(--ok) / .12); color: rgb(var(--ok-text)); }
        .accordion-content { display: none; }
        .accordion-open .accordion-content { display: block; }
        .booking-body { padding: 0 16px 16px; }
        .booking-body .items { padding: 12px; border-radius: 12px; background: rgb(var(--surface-2)); }
        .chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); font-size: 13.5px; font-weight: 600; }
        .chip b { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: rgb(var(--accent) / .12); color: rgb(var(--accent-text)); font-size: 12.5px; }
        @media (max-width: 639px) { .toolbar .seg { width: 100%; } .toolbar .seg-btn { flex: 1; } .search { max-width: none; } }
        .booking-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0; font-size: 13px; color: rgb(var(--muted)); }
        .booking-meta a { color: rgb(var(--ink)); font-weight: 600; text-decoration: none; }
        .booking-meta .ph { font-size: 15px; vertical-align: -2px; margin-left: 4px; }
        .booking-actions { display: flex; flex-wrap: wrap; gap: 8px; }
        @media (max-width: 479px) { .booking-actions > * { flex: 1; } }

        /* ================= المطبخ ================= */
        .live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgb(var(--ok-text)); }
        .live i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--ok)); box-shadow: 0 0 0 0 rgb(var(--ok) / .5); animation: pulse 2s infinite; }
        @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgb(var(--ok) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--ok) / 0); } }
        .cook-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
        @media (min-width: 640px) { .cook-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
        .cook { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); }
        .cook.is-active { border-color: rgb(var(--accent) / .55); background: rgb(var(--accent) / .05); }
        .cook b { font-size: 14.5px; }
        .cook small { font-size: 12.5px; color: rgb(var(--muted)); }
        .cook .input-box { text-align: center; font-weight: 700; font-size: 17px; }
        .cook .input-box, .pills .input-box { -moz-appearance: textfield; }
        .cook .input-box::-webkit-inner-spin-button, .cook .input-box::-webkit-outer-spin-button,
        .pills .input-box::-webkit-inner-spin-button, .pills .input-box::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .prep-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 2px; border-bottom: 1px solid rgb(var(--line) / .7); }
        .prep-row:last-child { border-bottom: 0; }
        .prep-row span { font-weight: 600; }
        .kgroup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
        .kday-grid { display: grid; gap: 14px; }
        @media (min-width: 560px) { .kday-grid { grid-template-columns: 1fr 1fr; } }
        .prep-qty { min-width: 32px; height: 28px; padding: 0 8px; border-radius: 8px; display: inline-grid; place-items: center; background: rgb(var(--accent) / .12); color: rgb(var(--accent-text)); font-size: 14px; }
        .kgroup .prep-row { padding: 9px 0; }
        .kgroup { padding: 14px; border-radius: 14px; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); align-self: start; }
        .kgroup-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
        .kgroup-head .ph { font-size: 20px; color: rgb(var(--accent-text)); }
        .new-dish { display: grid; gap: 10px; grid-template-columns: 1fr 120px auto; padding: 14px; margin-bottom: 14px; border-radius: 14px; background: rgb(var(--surface-2)); border: 1px dashed rgb(var(--line-2)); }
        @media (max-width: 559px) { .new-dish { grid-template-columns: 1fr 1fr; } .new-dish .btn { grid-column: 1 / -1; } }
        .hint { font-size: 13px; color: rgb(var(--muted)); margin: -4px 0 14px; }

        /* ================= المخزون ================= */
        .inv-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
        .inv { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); box-shadow: var(--shadow); }
        .inv.is-low { border-color: rgb(var(--bad) / .45); }
        .inv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
        .inv-top b { font-size: 15.5px; }
        .inv-qty { display: flex; align-items: baseline; gap: 6px; }
        .inv-qty strong { font-size: 28px; line-height: 1; font-weight: 700; }
        .inv-qty span { font-size: 13px; color: rgb(var(--muted)); }
        .inv.is-low .inv-qty strong { color: rgb(var(--bad-text)); }
        .meter { height: 6px; border-radius: 6px; background: rgb(var(--surface-2)); overflow: hidden; }
        .meter i { display: block; height: 100%; border-radius: 6px; background: rgb(var(--ok)); }
        .inv.is-low .meter i { background: rgb(var(--bad)); }
        .inv-limit { font-size: 12.5px; color: rgb(var(--muted)); display: flex; justify-content: space-between; }
        .op-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
        @media (max-width: 400px) { .op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        .op { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; border: 1.5px solid rgb(var(--line)); background: rgb(var(--surface-2)); font-size: 13px; font-weight: 600; color: rgb(var(--muted)); }
        .op .ph { font-size: 21px; }
        .op.is-active { border-color: rgb(var(--accent)); background: rgb(var(--accent) / .08); color: rgb(var(--accent-text)); }
        .type-chip { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }

        /* ================= الموظفين والملاحظات ================= */
        .user-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
        .user-row + .user-row { border-top: 1px solid rgb(var(--line) / .7); }
        .user-row .grow { flex: 1; min-width: 0; }
        .user-row b { display: block; font-size: 15px; }
        .owner-grid { display: grid; gap: 18px; align-items: start; }
        @media (min-width: 1024px) { .owner-grid { grid-template-columns: 1fr 1fr; } }
        .stock-mini { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
        .stock-mini > div { padding: 12px 14px; border-radius: 12px; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); }
        .stock-mini > div.is-low { background: rgb(var(--bad) / .07); border-color: rgb(var(--bad) / .3); }
        .stock-mini b { display: block; font-size: 14px; }
        .stock-mini span { font-size: 13px; font-weight: 600; color: rgb(var(--ok-text)); }
        .stock-mini .is-low span { color: rgb(var(--bad-text)); }

        /* ================= الكاشير ================= */
        .pos-gate { max-width: 440px; margin: 24px auto; gap: 16px; }
        .pos-grid { display: grid; gap: 16px; align-items: start; }
        @media (min-width: 740px) { .pos-grid { grid-template-columns: minmax(0, 1fr) 330px; } }
        @media (min-width: 1280px) { .pos-grid { grid-template-columns: minmax(0, 1fr) 370px; } }
        .pos-menu { min-width: 0; }
        .pos-toolbar { display: flex; gap: 10px; margin-bottom: 12px; }
        .pos-toolbar .search { max-width: none; }
        .pos-cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 8px; scrollbar-width: none; }
        .pos-cats::-webkit-scrollbar { display: none; }
        .pos-cat { flex-shrink: 0; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgb(var(--line-2)); background: rgb(var(--surface)); font-weight: 600; font-size: 14.5px; white-space: nowrap; color: rgb(var(--ink-2)); transition: background-color .15s, color .15s; }
        .pos-cat.is-active { background: rgb(var(--ink)); color: rgb(var(--surface)); border-color: transparent; }
        .pos-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
        .pos-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 100px; padding: 12px 13px; border-radius: 14px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); text-align: right; box-shadow: var(--shadow); transition: border-color .15s, background-color .15s, transform .08s; }
        .pos-item:active { transform: scale(.97); }
        .pos-item.in-cart { border-color: rgb(var(--accent) / .6); background: rgb(var(--accent) / .05); }
        .pos-item-name { font-weight: 600; font-size: 14.5px; line-height: 1.45; }
        .pos-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
        .pos-item-foot b { font-size: 15.5px; }
        .pos-item-foot small { font-size: 11.5px; font-weight: 600; }
        .pos-item-foot small.ok { color: rgb(var(--ok-text)); }
        .pos-item-foot small.bad { color: rgb(var(--bad-text)); }
        .pos-item-qty { position: absolute; top: -8px; left: -6px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: rgb(var(--accent)); color: rgb(var(--on-accent)); font-size: 13px; font-weight: 700; box-shadow: var(--shadow); }
        .pos-cart { position: sticky; top: calc(var(--top-h) + 16px); display: flex; flex-direction: column; max-height: calc(100dvh - var(--top-h) - 32px - var(--bottom-h)); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
        .pos-cart-top { padding: 14px; display: grid; gap: 10px; border-bottom: 1px solid rgb(var(--line)); }
        .pos-cart-title { display: flex; align-items: center; justify-content: space-between; }
        .pos-cart-title h3 { margin: 0; font-size: 17px; font-weight: 700; }
        .pos-cart-close { display: none; }
        .pos-type-row { display: flex; gap: 8px; }
        .pos-type-row .seg { flex: 1; }
        .pos-type-row .seg-btn { flex: 1; }
        .pos-type-row .input-box { width: 84px; text-align: center; height: 46px; }
        .pos-lines { flex: 1; overflow-y: auto; padding: 4px 14px; min-height: 140px; }
        .pos-lines .empty { padding: 28px 8px; }
        .pos-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgb(var(--line) / .7); }
        .pos-line:last-child { border-bottom: 0; }
        .pos-line-name { font-weight: 600; font-size: 14.5px; }
        .pos-line-sub { font-size: 12.5px; color: rgb(var(--muted)); }
        .pos-line-total { font-size: 15px; }
        .pos-line .stepper { grid-column: 1 / -1; justify-content: flex-start; gap: 10px; }
        .pos-line .step-btn { width: 36px; height: 36px; font-size: 16px; }
        .pos-line .step-val { font-size: 16px; min-width: 22px; }
        .pos-cart-foot { padding: 14px; display: grid; gap: 12px; border-top: 1px solid rgb(var(--line)); background: rgb(var(--surface-2)); }
        .pos-total { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; color: rgb(var(--muted)); }
        .pos-total b { font-size: 28px; color: rgb(var(--ink)); }
        .pos-actions { display: flex; gap: 8px; }
        .pos-actions .btn { flex: 1; }
        .pos-cart-bar, .pos-backdrop { display: none; }
        @media (max-width: 739px) {
            .pos-cart { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 88dvh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom);
                transform: translateY(105%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; }
            #posApp.cart-open .pos-cart { transform: none; visibility: visible; box-shadow: var(--shadow-lg); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
            #posApp.cart-open .pos-backdrop { display: block; position: fixed; inset: 0; z-index: 49; background: rgb(0 0 0 / .4); }
            .pos-cart-close { display: inline-flex; }
            .pos-cart-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; bottom: calc(var(--bottom-h) + 10px); z-index: 20; width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-radius: 16px; background: rgb(var(--accent)); color: rgb(var(--on-accent)); font-weight: 700; font-size: 15px; box-shadow: var(--shadow-lg); }
            .pos-cart-bar > span { display: inline-flex; align-items: center; gap: 8px; }
            .pos-cart-bar .ph { font-size: 20px; }
            .pos-cart-bar b { font-size: 18px; }
            .pos-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        .pay-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-radius: 14px; background: rgb(var(--surface-2)); font-weight: 600; color: rgb(var(--muted)); }
        .pay-total b { font-size: 30px; color: rgb(var(--ink)); }
        .pay-change { font-size: 16px; font-weight: 700; padding: 12px 14px; border-radius: 12px; }
        .pay-change:empty { display: none; }
        .pay-change.ok { background: rgb(var(--ok) / .1); color: rgb(var(--ok-text)); }
        .pay-change.bad { background: rgb(var(--bad) / .1); color: rgb(var(--bad-text)); }

        /* ================================================================
           الستايل الجديد (v3): كاشير احترافي، بلا إطارات، ألوان حسب القسم، وحركة
           ================================================================ */
        :root { --side-w: 84px; --ease: cubic-bezier(.2, .9, .25, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); }
        body { font-family: 'Readex Pro', system-ui, sans-serif; }
        h1, h2, h3, b, strong { font-weight: 600; }

        /* الأسطح: بلا حدود، زوايا أنعم */
        .card, .glass-panel { border: 0; border-radius: 22px; }
        .stat { border: 0; border-radius: 22px; }
        .stat-value { font-size: 34px; font-weight: 700; }
        .stat-ico { border-radius: 14px; }
        .booking { border: 0; border-radius: 20px; }
        .inv { border: 0; border-radius: 22px; }
        .inv.is-low { box-shadow: inset 0 0 0 1.5px rgb(var(--bad) / .45), var(--shadow); }
        .dish, .cook { border: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px rgb(var(--line)); }
        .dish.is-active, .cook.is-active { box-shadow: inset 0 0 0 2px rgb(var(--accent)); background: rgb(var(--accent) / .05); }
        .kgroup { border: 0; border-radius: 20px; }
        .chip { border: 0; background: rgb(var(--surface-2)); }
        .booking-body .items .chip, .kgroup .chip { background: rgb(var(--surface)); }
        .note { border: 0; border-radius: 18px; }
        .alert-danger { border: 0; border-radius: 18px; }
        .stock-mini > div { border: 0; border-radius: 16px; }

        /* الأزرار والحقول */
        .btn { border-radius: 14px; min-height: 46px; border: 0; }
        .btn-lg { min-height: 58px; border-radius: 18px; font-size: 16.5px; font-weight: 700; }
        .btn-primary, .btn-brand { font-weight: 700; position: relative; overflow: hidden; }
        .btn-secondary { background: rgb(var(--surface)); box-shadow: inset 0 0 0 1px rgb(var(--line-2)); }
        .icon-btn { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(var(--line-2)); width: 46px; height: 46px; }
        .input-box { border: 0; border-radius: 14px; height: 50px; box-shadow: inset 0 0 0 1px rgb(var(--line-2)); }
        .input-box:focus { box-shadow: 0 0 0 3px rgb(var(--accent) / .22), inset 0 0 0 1px rgb(var(--accent)); }
        .search .input-box { border-radius: 999px; }
        .step-btn { border: 0; border-radius: 12px; background: rgb(var(--surface-2)); }
        .step-btn.plus { background: rgb(var(--accent)); }
        .pill { border: 0; box-shadow: inset 0 0 0 1px rgb(var(--line-2)); border-radius: 14px; transition: background-color .2s, color .2s, transform .15s var(--ease); }
        .pill:active, .step-btn:active, .tile:active, .day:active { transform: scale(.94); }
        .pill.is-active { background: rgb(var(--ink)); color: rgb(var(--surface)); box-shadow: none; }
        .choice, .op { border: 0; box-shadow: inset 0 0 0 1px rgb(var(--line-2)); border-radius: 18px; background: rgb(var(--surface)); }
        .choice.is-active, .op.is-active { box-shadow: inset 0 0 0 2px rgb(var(--accent)); background: rgb(var(--accent) / .06); }

        /* التبويبات بمؤشر بيزحلق */
        .seg { position: relative; border: 0; border-radius: 16px; background: rgb(var(--surface-2)); }
        .seg-btn { position: relative; z-index: 1; min-height: 42px; border-radius: 12px; transition: color .25s; }
        .seg.has-thumb .seg-btn.is-active { background: transparent; box-shadow: none; }
        .seg-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 12px; background: rgb(var(--surface)); box-shadow: 0 2px 8px rgb(16 19 24 / .1); transition: left .4s var(--ease), width .4s var(--ease); pointer-events: none; }
        [data-theme="dark"] .seg-thumb { background: rgb(var(--line-2)); }

        /* بلاطات الأقسام: كل قسم إله لون */
        .tile { border: 0; border-radius: 18px; min-height: 66px; gap: 10px; justify-content: flex-start; background: hsl(var(--h, 220) var(--t-bg)); transition: background-color .2s, transform .15s var(--ease), box-shadow .2s; }
        .tile:hover { background: hsl(var(--h, 220) var(--t-bg-h)); border: 0; }
        .tile > span:not(.tile-count):not(.tile-ico) { flex: 1; }
        .tile-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; background: hsl(var(--h, 220) var(--t-ico)); color: hsl(var(--h, 220) var(--t-fg)); }
        .tile .tile-ico .ph { color: inherit; font-size: 20px; }
        .tile.is-active { box-shadow: inset 0 0 0 2px hsl(var(--h, 220) var(--t-fg)); background: hsl(var(--h, 220) var(--t-bg)); }
        .tile .tile-count { background: rgb(var(--ink)); color: rgb(var(--surface)); }

        /* الأيام */
        .day { border: 0; border-radius: 18px; transition: background-color .25s, color .25s, transform .15s var(--ease); }
        .day.is-active { background: rgb(var(--ink)); color: rgb(var(--surface)); border: 0; }
        .day.is-active small { color: rgb(var(--surface) / .7); }
        .day.is-active .day-count, .day.is-active .day-count.has { background: rgb(var(--accent)); color: rgb(var(--on-accent)); }

        /* النوافذ والإشعارات */
        .sheet { border: 0; border-radius: 26px; }
        .sheet-head, .sheet-foot { border-color: rgb(var(--line) / .7); }
        .toast { border-radius: 999px; padding: 12px 20px; }

        /* الشريط العلوي */
        .topbar { border-bottom: 0; background: rgb(var(--bg) / .85); padding: 0 28px; }
        .topbar-title h1 { font-size: 23px; font-weight: 700; }
        .clock-chip { border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(var(--line-2)); height: 46px; }
        .page-head h2 { font-size: 26px; font-weight: 700; }

        /* ================= الشريط الجانبي (Rail) ================= */
        .rail { display: none; }
        @media (min-width: 768px) {
            .rail { display: flex; position: fixed; top: 0; bottom: 0; right: 0; z-index: 45; width: var(--side-w); flex-direction: column; align-items: center; gap: 4px; padding: 16px 0; background: #0e1014; overflow-y: auto; scrollbar-width: none; }
            .rail::-webkit-scrollbar { display: none; }
            .rail-logo { width: 48px; height: 48px; border-radius: 15px; flex-shrink: 0; background: url("/logo-dark.png") center / 34px no-repeat, #1c1f26; margin-bottom: 14px; }
            .rail-nav { display: flex; flex-direction: column; align-items: center; gap: 4px; }
            .rail-sep { width: 32px; height: 1px; background: #262a33; margin: 8px 0; }
            .rail-btn { position: relative; width: 68px; padding: 8px 2px 7px; flex-shrink: 0; border: 0; border-radius: 16px; background: none; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #8b919c; font-size: 11.5px; font-weight: 500; line-height: 1.2; text-align: center; transition: color .2s, background-color .2s, transform .15s var(--ease); }
            .rail-btn .ph, .rail-btn .ph-fill { font-size: 24px; }
            .rail-btn:hover { color: #fff; }
            .rail-btn:active { transform: scale(.93); }
            .rail-btn.is-active { color: #fff; background: #1f232b; }
            .rail-btn.is-active::before { content: ""; position: absolute; right: -8px; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: rgb(255 107 26); animation: pop .35s var(--spring); }
            .rail-btn .nav-badge { position: absolute; top: 4px; left: 8px; margin: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: rgb(244 96 96); color: #fff; }
            .rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 12px; }
            .rail-foot .rail-btn { padding: 10px 2px; }
            .rail-me { width: 42px; height: 42px; margin-top: 8px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ff8a3d, #ff5a1a); color: #fff; font-weight: 700; flex-shrink: 0; }
            .main { margin-right: var(--side-w) !important; }
            .sidebar, .drawer-backdrop { display: none !important; }
            .menu-btn, .theme-btn-top { display: none !important; }
            .shell.has-bottom-nav { --bottom-h: 0px; }
            .shell.has-bottom-nav .bottom-nav { display: none !important; }
            .topbar { padding: 0 28px; }
            .content { padding: 20px 28px 40px; }
        }
        /* الموبايل: شريط سفلي غامق */
        @media (max-width: 767px) {
            .shell.has-bottom-nav .bottom-nav { background: rgb(14 16 20 / .96); border-top: 0; }
            .bn-item { color: #8b919c; }
            .bn-item.is-active { color: #fff; }
            .bn-item.is-active .ph, .bn-item.is-active .ph-fill { color: rgb(255 122 46); }
        }

        /* ================= الحركة ================= */
        @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
        @keyframes pop { from { transform: scale(0); } }
        @keyframes bump { 40% { transform: scale(1.35); } }
        .rise > * { animation: rise .45s var(--ease) backwards; }
        .rise > :nth-child(2) { animation-delay: 30ms; } .rise > :nth-child(3) { animation-delay: 60ms; } .rise > :nth-child(4) { animation-delay: 90ms; }
        .rise > :nth-child(5) { animation-delay: 120ms; } .rise > :nth-child(6) { animation-delay: 150ms; } .rise > :nth-child(7) { animation-delay: 180ms; }
        .rise > :nth-child(8) { animation-delay: 210ms; } .rise > :nth-child(9) { animation-delay: 240ms; } .rise > :nth-child(10) { animation-delay: 270ms; }
        .rise > :nth-child(11) { animation-delay: 300ms; } .rise > :nth-child(12) { animation-delay: 330ms; } .rise > :nth-child(n+13) { animation-delay: 360ms; }
        .tile-count, .seg-count, .nav-badge, .pos-item-qty { animation: pop .35s var(--spring); }
        .pos-item-qty.bump { animation: bump .35s var(--spring); }
        .ripple { position: absolute; border-radius: 50%; background: rgb(255 255 255 / .45); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
        @keyframes ripple { to { transform: scale(4); opacity: 0; } }
        .fly { position: fixed; z-index: 80; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--accent)); color: rgb(var(--on-accent)); font-weight: 700; font-size: 14px; pointer-events: none; box-shadow: 0 8px 20px rgb(var(--accent) / .45); }

        /* ================= الكاشير بكامل الشاشة ================= */
        .shell.pos-mode .topbar { display: none; }
        .shell.pos-mode .content { max-width: none; padding: 0; }
        .shell.pos-mode #posApp { animation: none; }
        .shell.pos-mode #posMain { margin-top: 0; }
        @media (min-width: 740px) and (max-width: 1099px) {
            .shell.pos-mode #posMain.pos-grid { grid-template-columns: minmax(0, 1fr) 310px !important; }
            .pos-items { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
            .pos-head { padding: 14px 18px 6px; } .pos-toolbar, .pos-cats { padding-left: 18px; padding-right: 18px; } .pos-items { padding: 4px 18px 18px; }
            .pos-head h1 { font-size: 20px; }
        }
        #posMain.pos-grid { gap: 0; }
        @media (min-width: 740px) {
            .shell.pos-mode #posMain.pos-grid { height: calc(100dvh - var(--bottom-h)); grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr); }
            .shell.pos-mode .pos-menu { display: flex; flex-direction: column; min-height: 0; }
            .shell.pos-mode .pos-items { flex: 1; overflow-y: auto; align-content: start; }
            .shell.pos-mode .pos-cart { position: static; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: inset 1px 0 0 rgb(var(--line)); }
        }
        @media (min-width: 1280px) { .shell.pos-mode #posMain.pos-grid { grid-template-columns: minmax(0, 1fr) 390px; } }
        .pos-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px 8px; }
        .pos-head h1 { margin: 0; font-size: 23px; font-weight: 700; }
        .pos-head .sp { flex: 1; }
        .pos-clock { font-size: 15px; font-weight: 600; color: rgb(var(--ink-2)); }
        .shift-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgb(var(--ok) / .12); color: rgb(var(--ok-text)); font-size: 13px; font-weight: 600; border: 0; }
        .shift-chip i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--ok)); animation: pulse 2s infinite; }
        .pos-toolbar { padding: 6px 24px 12px; margin: 0; }
        .pos-toolbar .search .input-box { height: 50px; }
        .pos-toolbar .btn { border-radius: 999px; min-height: 50px; }
        .pos-cats { position: relative; padding: 0 24px 12px; margin: 0; gap: 6px; }
        .pos-cat { position: relative; z-index: 1; height: 48px; min-height: 48px; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 15px; transition: color .25s; }
        .pos-cat .ph { font-size: 20px; }
        .pos-cat small { font-size: 12px; color: rgb(var(--muted)); font-weight: 500; transition: color .25s; }
        .pos-cat.is-active { background: transparent; color: rgb(var(--surface)); }
        .pos-cat.is-active small { color: rgb(var(--surface) / .7); }
        .cat-thumb { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 48px; border-radius: 999px; background: rgb(var(--ink)); transition: left .45s var(--ease), width .45s var(--ease), opacity .2s; pointer-events: none; }
        .pos-items { padding: 4px 24px 24px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
        .pos-item { border: 0; border-radius: 20px; min-height: 124px; padding: 14px; gap: 10px; box-shadow: none; background: hsl(var(--h, 220) var(--t-bg)); transition: transform .18s var(--ease), background-color .2s; }
        .pos-item:hover { background: hsl(var(--h, 220) var(--t-bg-h)); }
        .pos-item:active { transform: scale(.95); transition-duration: .08s; }
        .pos-item.in-cart { background: hsl(var(--h, 220) var(--t-bg)); box-shadow: inset 0 0 0 2px hsl(var(--h, 220) var(--t-fg) / .55); }
        .pos-item-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; background: hsl(var(--h, 220) var(--t-ico)); color: hsl(var(--h, 220) var(--t-fg)); }
        .pos-item-name { flex: 1; font-size: 15.5px; }
        .pos-item-foot b { color: hsl(var(--h, 220) var(--t-fg)); font-size: 16px; font-weight: 700; }
        .pos-item-foot small.ok { color: hsl(var(--h, 220) 30% 45%); }
        [data-theme="dark"] .pos-item-foot small.ok { color: hsl(var(--h, 220) 30% 70%); }
        .pos-item-qty { top: 10px; left: 10px; min-width: 30px; height: 30px; background: rgb(var(--ink)); color: rgb(var(--surface)); font-size: 14px; }
        .pos-cart-top { border: 0; padding: 20px 20px 12px; }
        .pos-cart-title h3 { font-size: 20px; }
        .pos-cart-title span { color: rgb(var(--muted)); font-size: 14px; }
        .pos-type-row .seg { width: 100%; }
        .pos-tables { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-height: 44px; transition: opacity .25s, max-height .35s var(--ease), margin .35s var(--ease); }
        .pos-tables::-webkit-scrollbar { display: none; }
        .pos-tables.hide { opacity: 0; max-height: 0; margin-top: -10px; pointer-events: none; }
        .pos-tables span { align-self: center; font-size: 13px; color: rgb(var(--muted)); padding-left: 4px; white-space: nowrap; }
        .pos-tables button { flex-shrink: 0; width: 42px; height: 38px; border: 0; border-radius: 12px; background: rgb(var(--surface-2)); font-weight: 600; font-size: 14px; color: rgb(var(--ink-2)); transition: background-color .2s, color .2s, transform .15s var(--ease); }
        .pos-tables button:active { transform: scale(.9); }
        .pos-tables button.is-active { background: rgb(var(--ink)); color: rgb(var(--surface)); }
        /* قاعتين: كل قاعة بسطر لحالها */
        .pos-tables { display: grid; gap: 6px; max-height: 92px; overflow: visible; }
        .pos-tables .hall-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
        .pos-tables .hall-row::-webkit-scrollbar { display: none; }
        .pos-tables span { min-width: 92px; }
        /* تيك أواي من الكاشير */
        .pos-take { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 140px; transition: opacity .25s, max-height .35s var(--ease), margin .35s var(--ease); }
        .pos-take.hide { opacity: 0; max-height: 0; margin-top: -10px; pointer-events: none; overflow: hidden; }
        .pos-take .input-box { height: 44px; }
        .pos-take-time { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgb(var(--muted)); font-weight: 600; }
        .pos-take-time .ph { font-size: 18px; color: rgb(var(--accent-text)); }
        .pos-take-time .input-box { flex: 1; max-width: 150px; margin-right: auto; font-weight: 700; font-size: 16px; text-align: center; }
        .input-box.is-invalid { box-shadow: 0 0 0 2px rgb(var(--bad)) !important; animation: shake .35s; }
        @keyframes shake { 25% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }
        /* تنبيه التيك أواي قبل 20 دقيقة */
        .pos-alerts { display: grid; gap: 8px; padding: 0 24px; }
        .pos-alerts:empty { display: none; }
        .pos-alert { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; background: rgb(var(--bad) / .1); box-shadow: inset 0 0 0 1.5px rgb(var(--bad) / .45); animation: lineIn .35s var(--ease); }
        .pos-alert > .ph { font-size: 24px; color: rgb(var(--bad-text)); animation: ring 1.2s ease-in-out infinite; }
        .pos-alert p { flex: 1; margin: 0; display: grid; gap: 2px; min-width: 0; }
        .pos-alert p b { font-size: 14.5px; }
        .pos-alert p span { font-size: 13px; color: rgb(var(--bad-text)); font-weight: 600; }
        @keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-6deg); } }
        .q-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; background: rgb(var(--ink)); color: rgb(var(--surface)); }
        .q-count.is-due { background: rgb(var(--bad)); color: rgb(var(--on-bad)); animation: pulse 1.6s infinite; }
        .report-btn { min-width: 64px; font-weight: 700; flex-shrink: 0; }
        .pos-actions .btn { min-width: 0; }
        .pos-head { flex-wrap: wrap; row-gap: 8px; }
        .pos-toolbar { flex-wrap: wrap; } .pos-toolbar .search { flex: 1 1 220px; }
        .pos-actions #btnPosHold { flex: 0 1 auto; padding: 0 16px; }
        .pos-actions .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pos-total { min-width: 0; } .pos-total b { white-space: nowrap; }
        @media (max-width: 1100px) { .pos-actions #btnPosHold span { display: none; } .pos-head .pos-clock { display: none; } }
        @media (max-width: 739px) { .pos-alerts { padding: 0 14px; } .report-btn { min-width: 0; padding: 0 10px; } }
        .pos-lines { padding: 0 20px; }
        .pos-line { animation: lineIn .35s var(--ease); }
        .pos-line.static { animation: none; }
        .pos-line.out { animation: lineOut .28s var(--ease) forwards; }
        @keyframes lineIn { from { opacity: 0; transform: translateX(-16px); } }
        @keyframes lineOut { to { opacity: 0; transform: translateX(16px); } }
        .pos-line .step-btn { width: 34px; height: 34px; }
        .pos-line .step-btn:not(.plus) { background: rgb(var(--surface-2)); }
        .pos-line .step-btn.plus { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
        .pos-lines .empty .ph { animation: float 3s ease-in-out infinite; }
        @keyframes float { 50% { transform: translateY(-6px); } }
        .pos-cart-foot { border: 0; background: transparent; box-shadow: 0 -1px 0 rgb(var(--line)); padding: 16px 20px 20px; }
        .pos-total b { font-size: 34px; }
        .pos-actions .icon-btn { width: 58px !important; height: 58px !important; border-radius: 18px; background: rgb(var(--surface-2)); box-shadow: none; }
        #btnPosPay { transition: background-color .3s, transform .15s, filter .2s; }
        #btnPosPay:disabled { filter: grayscale(1) opacity(.35); }
        #btnPosPay.done { background: rgb(var(--ok)); color: rgb(var(--on-ok)); }
        #btnPosPay.done span { animation: rise .3s var(--ease); }
        @media (max-width: 739px) {
            .pos-head { padding: 12px 14px 4px; }
            .pos-clock { display: none; }
            .pos-toolbar, .pos-cats { padding-left: 14px; padding-right: 14px; }
            .pos-items { padding: 4px 14px 14px; }
            .pos-cart-bar { margin: 0 14px 14px; width: calc(100% - 28px); }
        }

        /* ================= النادل ================= */
        #posApp.mode-waiter .cashier-only, #posApp:not(.mode-waiter) .waiter-only { display: none !important; }
        .shell.pos-mode .waiter-tables { min-height: calc(100dvh - var(--bottom-h)); }
        .table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; padding: 8px 24px 20px; }
        .tbl { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; height: 108px; padding: 14px 16px; border: 0; border-radius: 22px; text-align: right; background: rgb(var(--surface)); box-shadow: inset 0 0 0 1px rgb(var(--line)); transition: transform .15s var(--ease), background-color .2s; }
        .tbl:active { transform: scale(.95); }
        .tbl b { font-size: 30px; font-weight: 700; line-height: 1; }
        .tbl span { font-size: 13px; color: rgb(var(--muted)); font-weight: 500; }
        .tbl.is-open { background: rgb(var(--accent) / .1); box-shadow: inset 0 0 0 2px rgb(var(--accent)); }
        .tbl.is-open span { color: rgb(var(--accent-text)); font-weight: 600; }
        .tbl.tk b { font-size: 17px; line-height: 1.3; }
        .waiter-sub { display: flex; align-items: center; gap: 8px; margin: 8px 24px 0; font-size: 17px; font-weight: 700; }
        .waiter-sub .ph { color: rgb(var(--accent-text)); font-size: 20px; }
        .pos-line.sent { opacity: .7; }
        .pos-target-seg { width: 100%; }
        .pos-target-seg .seg-btn { flex: 1; }
        .pos-group { margin: 10px 0 4px; padding: 4px 12px 2px; border-radius: 18px; background: rgb(var(--surface-2) / .6); transition: box-shadow .25s, background-color .25s; }
        .pos-group.is-target { box-shadow: inset 0 0 0 2px rgb(var(--accent) / .55); background: rgb(var(--accent) / .05); }
        .pos-group-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 4px; font-size: 14px; }
        .pos-group-head b { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
        .pos-group-head .ph { color: rgb(var(--accent-text)); font-size: 18px; }
        .pos-group-head span { font-weight: 700; color: rgb(var(--ink-2)); }
        .pos-group-empty { margin: 4px 2px 12px; font-size: 13px; color: rgb(var(--muted)); }
        .pos-group .pos-line:last-child { border-bottom: 0; }
        .korder-sub { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; padding-top: 8px; border-top: 1px dashed rgb(var(--line-2)); font-size: 13.5px; font-weight: 700; color: rgb(var(--accent-text)); }
        .pos-line.sent .stepper { color: rgb(var(--muted)); font-size: 13px; }
        #btnWaiterSend.done { background: rgb(var(--ok)); color: rgb(var(--on-ok)); }
        .korders { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
        .korders > .empty { grid-column: 1 / -1; padding: 18px; }
        .korder { padding: 14px 16px; border-radius: 20px; background: rgb(var(--surface-2)); }
        .korder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
        .korder-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }
        .korder-head .ph { color: rgb(var(--accent-text)); }
        @media (max-width: 739px) { .table-grid { padding: 8px 14px 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .waiter-sub { margin: 8px 14px 0; } }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
        }
        @media print { .sidebar, .topbar, .bottom-nav { display: none !important; } .main { margin: 0; } }
    
        .stats.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        @media (max-width: 899px) { .stats.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* الحجوزات: نقل التيك أواي للكاشير */
.move-pos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.move-pos .stat-ico { margin: 0; background: rgb(var(--accent) / .12); color: rgb(var(--accent-text)); }
.move-pos p { flex: 1; min-width: 200px; margin: 0; display: grid; gap: 2px; }
.move-pos p span { font-size: 13px; color: rgb(var(--muted)); }

/* الطابعات، أدوات النادل، الإغلاق بدون دفع */
.print-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; background: rgb(var(--bad) / .12); color: rgb(var(--bad-text)); cursor: pointer; animation: pulse 1.6s infinite; }
.print-chip[hidden] { display: none; }
.waiter-tools { display: flex; gap: 8px; }
.waiter-tools .btn { flex: 1; }
.pay-methods { grid-template-columns: repeat(3, 1fr); }
.pay-methods .choice { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 12px 8px; }
.close-choices { display: grid; gap: 10px; }
.close-choices .choice { width: 100%; cursor: pointer; }
.close-choices .choice span { display: grid; gap: 2px; }
.choice-bad .ph { color: rgb(var(--bad-text)); }
.choice-bad:hover { border-color: rgb(var(--bad) / .5); }

/* صنف خلص */
.pos-item.shake { animation: shake .35s; }
.pos-item.is-out { opacity: .5; filter: grayscale(.6); }

/* نافذة التأكيد دايمًا فوق أي نافذة تانية */
#confirmModal { z-index: 90; }
.pos-actions #btnPosSend { flex: 0 1 auto; padding: 0 16px; }
@media (max-width: 1100px) { .pos-actions #btnPosSend span { display: none; } }