*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#fff;--bg-2:#fafafa;--bg-3:#f4f4f5;--surface:#fff;
  --border:#e7e7e9;--border-2:#d4d4d8;
  --text:#0a0a0a;--text-2:#3f3f46;--muted:#71717a;--muted-2:#a1a1aa;
  --accent:#ea580c;--accent-hover:#c2410c;--accent-fg:#fff;
  --accent-soft:#fff7ed;--accent-soft-fg:#c2410c;
  --success:#16a34a;--success-soft:#dcfce7;--success-fg:#15803d;
  --warning:#ca8a04;--warning-soft:#fef9c3;--warning-fg:#854d0e;
  --info:#2563eb;--info-soft:#dbeafe;--info-fg:#1d4ed8;
  --danger:#dc2626;--danger-soft:#fee2e2;--danger-fg:#991b1b;
  --shadow-xs:0 1px 2px rgba(15,15,15,.04);
  --shadow-sm:0 1px 3px rgba(15,15,15,.06),0 1px 2px rgba(15,15,15,.04);
  --shadow-md:0 4px 8px -2px rgba(15,15,15,.06),0 2px 4px -2px rgba(15,15,15,.04);
  --shadow-lg:0 12px 20px -6px rgba(15,15,15,.10);
  --shadow-xl:0 24px 32px -8px rgba(15,15,15,.12);
  --radius-sm:6px;--radius:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0a0a;--bg-2:#131316;--bg-3:#1c1c21;--surface:#131316;
    --border:#27272a;--border-2:#3f3f46;
    --text:#fafafa;--text-2:#d4d4d8;--muted:#a1a1aa;--muted-2:#71717a;
    --accent:#fb923c;--accent-hover:#fdba74;--accent-fg:#1c1917;
    --accent-soft:#3a1607;--accent-soft-fg:#fdba74;
    --success:#22c55e;--success-soft:#14321c;--success-fg:#86efac;
    --warning:#eab308;--warning-soft:#2e2405;--warning-fg:#fde047;
    --info:#3b82f6;--info-soft:#132a52;--info-fg:#93c5fd;
    --danger:#ef4444;--danger-soft:#3a1313;--danger-fg:#fca5a5;
  }
}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--accent);color:var(--accent-fg)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:24px;line-height:1.3}h2{font-size:19px;line-height:1.35}h3{font-size:16px}
p{margin:0}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.icon{flex-shrink:0;display:inline-block;vertical-align:middle}
.icon.flip{transform:scaleX(-1)}
.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:12px}
.num{font-variant-numeric:tabular-nums}
button{font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius);padding:9px 14px;transition:background .15s var(--ease),border-color .15s,color .15s,transform .1s;white-space:nowrap}
button:hover{background:var(--bg-3);border-color:var(--border-2)}
button:active{transform:scale(.98)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
button.ghost{background:transparent;border-color:transparent}
button.ghost:hover{background:var(--bg-3)}
button.danger{color:var(--danger);border-color:var(--border)}
button.danger:hover{background:var(--danger-soft);border-color:var(--danger)}
button.lg{padding:11px 18px;font-size:15px}
button.block{width:100%}
button.sm{padding:6px 11px;font-size:13px}
.icon-btn{width:36px;height:36px;padding:0;border-radius:var(--radius-full)}
input,textarea,select{font-family:inherit;font-size:14px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
textarea{resize:vertical;min-height:64px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:6px}
.field .hint{color:var(--muted);font-size:12px;margin-top:4px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-err{color:var(--danger);font-size:13px;margin-top:8px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-full);font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.pending{background:var(--warning-soft);color:var(--warning-fg)}
.pill.accepted,.pill.preparing,.pill.ready{background:var(--info-soft);color:var(--info-fg)}
.pill.completed{background:var(--success-soft);color:var(--success-fg)}
.pill.rejected,.pill.cancelled{background:var(--danger-soft);color:var(--danger-fg)}
.empty{text-align:center;padding:56px 20px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-lg)}
.empty-icon{width:56px;height:56px;border-radius:50%;background:var(--bg-3);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--muted)}
.empty h3{font-size:15px;margin-bottom:4px}
.empty p{color:var(--muted);font-size:13.5px;max-width:340px;margin:0 auto}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:var(--radius);box-shadow:var(--shadow-xl);font-size:13.5px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);z-index:100;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.skel{background:linear-gradient(90deg,var(--bg-3) 0%,var(--border) 50%,var(--bg-3) 100%);background-size:200% 100%;animation:shimmer 1.4s infinite linear;border-radius:var(--radius-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.skel-cover{aspect-ratio:16/9}
.skel-body{padding:14px;display:flex;flex-direction:column;gap:8px}
.skel-line{height:12px}
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(10,10,10,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal.open{display:flex;animation:fadeIn .15s var(--ease)}
.modal-content{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:440px;max-height:90vh;overflow-y:auto;padding:24px;animation:slideUp .2s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-head h3{font-size:17px}
.row{display:flex;gap:8px;align-items:center}
.stack>*+*{margin-top:12px}
.anim-in{animation:fadeUp .25s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.boot-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:14px}
.boot-spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}