@theme{--bg: #0e0f12; --surface: #14161a; --card: #1a1d22; --card-2: #22262d; --card-3: #2b2f37; --line: #ffffff12; --line-2: #ffffff1f; --line-3: #ffffff2e; --ink: #f1f3f5; --ink-2: #a6acb5; --ink-3: #6f757e; --ink-on: #16181c; --ink-icon: #8f96a0; --brand: #b4a6f6; --brand-soft: #b4a6f624; --brand-ring: #b4a6f657; --c-mint: #bfe3cd; --c-sky: #c3dbf2; --c-lilac: #dcd2f4; --c-blush: #f3d2da; --c-peach: #f6dcc4; --c-butter: #efe6bb; --c-sage: #d6e3bf; --c-rose: #f0cfe2; --st-pending: #8b919b; --st-pending-bg: #8b919b29; --st-prep: #f0b45e; --st-prep-bg: #f0b45e26; --st-ready: #62cf93; --st-ready-bg: #62cf9329; --st-delivery: #6bb0f4; --st-delivery-bg: #6bb0f429; --st-cancel: #f07b80; --st-cancel-bg: #f07b8026; --role-cashier: #6bb0f4; --role-kitchen: #f0b45e; --role-waiter: #62cf93; --role-courier: #b4a6f6; --role-owner: #e7eaee; --rk-low: #62cf93; --rk-low-bg: #62cf9324; --rk-med: #6bb0f4; --rk-med-bg: #6bb0f424; --rk-high: #f0b45e; --rk-high-bg: #f0b45e26; --rk-crit: #f07b80; --rk-crit-bg: #f07b8026; --success: var(--st-ready); --warning: var(--st-prep); --danger: var(--st-cancel); --info: var(--st-delivery); --info-soft: #6bb0f424; --info-ring: #6bb0f452; --font-sans: "Plus Jakarta Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --r-xs: 7px; --r-sm: 10px; --r-md: 13px; --r-lg: 17px; --r-xl: 22px; --r-2xl: 28px; --r-full: 9999px; --sidebar-width: 212px; --topbar-height: 64px; --gray-a04: #ffffff0a; --gray-a08: #ffffff14; --gray-a16: #ffffff29; --gray-a48: #ffffff7a; --ring-input: #ffffff24; --ring-card: #ffffff0d; --ring-btn: #ffffff1f; --ring-popover: #ffffff14; --accent: var(--brand); --accent-deep: #8f7ff0; --accent-soft: var(--brand-soft); --accent-ring: var(--brand-ring); --accent-glow: #b4a6f642; --accent-range: #b4a6f629; --chart-1: var(--brand); --chart-2: var(--c-mint); --chart-3: var(--c-sky); --chart-dark: var(--card-3); --chart-gray: var(--ink-2); --chart-gray-2: var(--ink-3); --sh-btn: 0 0 0 1px var(--ring-btn), 0 8px 18px -12px #000000b3; --sh-btn-primary: 0 0 0 1px #ffffff38, 0 8px 20px -14px #000000b8; --sh-card: 0 0 0 1px var(--ring-card), 0 8px 24px -18px #000000d1; --sh-input: 0 0 0 1px var(--ring-input), 0 4px 16px -12px #000000b3; --sh-popover: 0 0 0 1px var(--ring-popover), 0 18px 42px -20px #000000c7; --bg-page: var(--bg); --bg-surface: var(--surface); --bg-card: var(--card); --surface-1: var(--card-2); --color-bg: var(--bg); --color-bg-2: var(--gray-a08); --color-card: var(--card); --color-inset: var(--card-2); --color-bg-warm: var(--bg); --color-surface: var(--surface); --color-surface-warm: var(--surface); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-ink-3: var(--ink-3); --color-line: var(--line); --color-line-2: var(--line-2); --color-line-strong: var(--line-2); --color-border: var(--line); --color-border-warm: var(--line); --color-separator: var(--line); --color-muted: var(--ink-2); --color-subtle: var(--ink-3); --color-brand: var(--brand); --color-brand-hover: var(--accent-deep); --color-brand-soft: var(--accent-soft); --color-on-brand: var(--ink-on); --color-primary: var(--accent); --color-primary-hover: var(--accent-deep); --color-on-primary: var(--ink-on); --color-rec: var(--st-ready); --color-rec-soft: #31c85414; --color-stop: var(--st-cancel); --color-stop-soft: #e5484d14; --color-amber: var(--st-prep); --color-amber-soft: #fd722414; --color-info: var(--st-delivery); --color-info-soft: var(--info-soft); --color-success: var(--success); --color-rating: var(--warning); --color-status-pending: var(--st-pending); --color-status-pending-soft: var(--st-pending-bg); --color-status-preparing: var(--st-prep); --color-status-preparing-soft: var(--st-prep-bg); --color-status-ready: var(--st-ready); --color-status-ready-soft: var(--st-ready-bg); --color-status-ready-for-pickup: var(--st-prep); --color-status-ready-for-pickup-soft: var(--st-prep-bg); --color-status-out-for-delivery: var(--st-delivery); --color-status-out-for-delivery-soft: var(--st-delivery-bg); --color-status-completed: var(--st-ready); --color-status-completed-soft: var(--st-ready-bg); --color-status-cancelled: var(--st-cancel); --color-status-cancelled-soft: var(--st-cancel-bg); --color-status-payment-failed: var(--st-cancel); --color-status-payment-failed-soft: var(--st-cancel-bg); --radius-card: var(--r-lg); --radius-btn: var(--r-sm); --radius-nav: var(--r-sm); --radius-field: var(--r-sm); --radius-input: var(--r-sm); --radius-pill: var(--r-full); --radius-sm: var(--r-xs); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --radius-2xl: var(--r-xl); --radius-sheet: var(--r-xl); --field-padding-x: .625rem; --field-padding-end-select: 2.5rem; --field-chevron-inset: .625rem; --shadow-sm: var(--sh-card); --shadow-nav: var(--sh-popover); --shadow-sheet: var(--sh-popover); --shadow-card: var(--sh-card); --shadow-lift: var(--sh-popover); --shadow-cta: var(--sh-btn-primary);}body{font-family:var(--font-sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}.fig{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}.mono{font-family:var(--font-mono)}.scroll-hidden{scrollbar-width:none;-ms-overflow-style:none}.scroll-hidden::-webkit-scrollbar{display:none}.tray{background:var(--bg-surface);border-radius:var(--r-xl);padding:4px}.card-v7{background:var(--bg-card);border-radius:var(--r-lg);box-shadow:var(--sh-card)}.btn-depth:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#0000 30%,#00000005 100%);position:absolute;inset:0}.btn-primary-depth:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#fff3,#0000);position:absolute;inset:0}@layer base{input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden])),select,textarea{padding-inline:var(--field-padding-x)}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F5F6F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--field-chevron-inset) center;background-size:1rem;padding-inline-end:var(--field-padding-end-select)!important}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}.field-control{min-height:32px;padding-block:.375rem;padding-inline:var(--field-padding-x);border-radius:var(--r-sm);box-shadow:var(--sh-input);background-color:var(--bg-card);color:var(--ink);border:none;font-size:.875rem;font-weight:400;line-height:1.25rem}.field-control:focus-visible{box-shadow:var(--sh-input),0 0 0 2px var(--accent-ring);outline:none}select.field-control{padding-inline-end:var(--field-padding-end-select)}.kbd{border-radius:var(--r-xs);background:var(--bg-surface);min-width:18px;height:18px;box-shadow:0 0 0 1px var(--line-2);font-family:var(--font-mono);letter-spacing:.12px;color:var(--ink-2);justify-content:center;align-items:center;padding-inline:4px;font-size:12px;font-weight:500;line-height:1;display:inline-flex}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer components;@layer utilities{.block{display:block}.flex{display:flex}}body{background:var(--bg-app,#faf9f7);color:var(--ink,#1a1a1a);margin:0;font-family:system-ui,sans-serif}.demo-banner{color:#92400e;text-align:center;background:#fef3c7;padding:.75rem 1rem;font-weight:600}.demo-shell{max-width:960px;margin:0 auto;padding:1.5rem}.demo-card{background:#fff;border:1px solid #e8e6e3;border-radius:12px;margin-top:1rem;padding:1.25rem}.demo-btn{cursor:pointer;background:#fff;border:1px solid #d4d2cf;border-radius:8px;padding:.5rem 1rem;font-weight:500}.demo-btn-primary{color:#fff;background:#1a5d45;border-color:#1a5d45}