@theme{ --bg: #0e0f12; --surface: #14161a; --card: #1a1d22; --card-2: #22262d; --card-3: #2b2f37; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .12); --line-3: rgba(255, 255, 255, .18); --ink: #f1f3f5; --ink-2: #a6acb5; --ink-3: #6f757e; --ink-on: #16181c; --ink-icon: #8f96a0; --brand: #b4a6f6; --brand-soft: rgba(180, 166, 246, .14); --brand-ring: rgba(180, 166, 246, .34); --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: rgba(139, 145, 155, .16); --st-prep: #f0b45e; --st-prep-bg: rgba(240, 180, 94, .15); --st-ready: #62cf93; --st-ready-bg: rgba(98, 207, 147, .16); --st-delivery: #6bb0f4; --st-delivery-bg: rgba(107, 176, 244, .16); --st-cancel: #f07b80; --st-cancel-bg: rgba(240, 123, 128, .15); --role-cashier: #6bb0f4; --role-kitchen: #f0b45e; --role-waiter: #62cf93; --role-courier: #b4a6f6; --role-owner: #e7eaee; --rk-low: #62cf93; --rk-low-bg: rgba(98, 207, 147, .14); --rk-med: #6bb0f4; --rk-med-bg: rgba(107, 176, 244, .14); --rk-high: #f0b45e; --rk-high-bg: rgba(240, 180, 94, .15); --rk-crit: #f07b80; --rk-crit-bg: rgba(240, 123, 128, .15); --success: var(--st-ready); --warning: var(--st-prep); --danger: var(--st-cancel); --info: var(--st-delivery); --info-soft: rgba(107, 176, 244, .14); --info-ring: rgba(107, 176, 244, .32); --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: rgba(255, 255, 255, .04); --gray-a08: rgba(255, 255, 255, .08); --gray-a16: rgba(255, 255, 255, .16); --gray-a48: rgba(255, 255, 255, .48); --ring-input: rgba(255, 255, 255, .14); --ring-card: rgba(255, 255, 255, .05); --ring-btn: rgba(255, 255, 255, .12); --ring-popover: rgba(255, 255, 255, .08); --accent: var(--brand); --accent-deep: #8f7ff0; --accent-soft: var(--brand-soft); --accent-ring: var(--brand-ring); --accent-glow: rgba(180, 166, 246, .26); --accent-range: rgba(180, 166, 246, .16); --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 rgba(0, 0, 0, .7); --sh-btn-primary: 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 20px -14px rgba(0, 0, 0, .72); --sh-card: 0 0 0 1px var(--ring-card), 0 8px 24px -18px rgba(0, 0, 0, .82); --sh-input: 0 0 0 1px var(--ring-input), 0 4px 16px -12px rgba(0, 0, 0, .7); --sh-popover: 0 0 0 1px var(--ring-popover), 0 18px 42px -20px rgba(0, 0, 0, .78); --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: rgba(49, 200, 84, .08); --color-stop: var(--st-cancel); --color-stop-soft: rgba(229, 72, 77, .08); --color-amber: var(--st-prep); --color-amber-soft: rgba(253, 114, 36, .08); --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:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.02) 100%)}.btn-primary-depth:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent)}@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;-webkit-appearance:none;padding-inline-end:var(--field-padding-end-select)!important;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}}.field-control{min-height:32px;padding-block:.375rem;padding-inline:var(--field-padding-x);border-radius:var(--r-sm);border:none;box-shadow:var(--sh-input);background-color:var(--bg-card);font-size:.875rem;line-height:1.25rem;font-weight:400;color:var(--ink)}.field-control:focus-visible{outline:none;box-shadow:var(--sh-input),0 0 0 2px var(--accent-ring)}select.field-control{padding-inline-end:var(--field-padding-end-select)}.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding-inline:4px;border-radius:var(--r-xs);background:var(--bg-surface);box-shadow:0 0 0 1px var(--line-2);font-family:var(--font-mono);font-size:12px;line-height:1;font-weight:500;letter-spacing:.12px;color:var(--ink-2)}@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 base{*,: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;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}}@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}