:root{--bg: #eef1f7;--bg-soft: #f7f8fb;--surface: #ffffff;--surface-muted: #f2f4fa;--card: #ffffff;--ink: #2a0a4a;--text: #27143f;--text-muted: #6f677b;--text-soft: #938ba0;--accent: #8b5cf6;--accent-hover: #7c3aed;--cyan: #22d3ee;--green: #22c55e;--orange: #f59e0b;--red: #ef4444;--stroke: rgba(42, 10, 74, .11);--stroke-strong: rgba(42, 10, 74, .2);--shadow: 0 18px 45px rgba(42, 10, 74, .12);--shadow-soft: 0 10px 24px rgba(42, 10, 74, .08);--radius: 18px;--radius-sm: 12px;--radius-xs: 8px;--header-height: 72px}*{margin:0;padding:0;box-sizing:border-box}html{background:var(--bg)}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:radial-gradient(circle at top left,rgba(34,211,238,.16),transparent 34rem),linear-gradient(180deg,#f8f9fd 0%,var(--bg) 42%,#eceff6 100%);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,select,textarea{font:inherit}button,a{color:inherit}img{display:block;max-width:100%}#root{min-height:100vh}.container{width:min(100% - 32px,1180px);margin:0 auto}.narrow-container{width:min(100% - 32px,720px);margin:0 auto}.app-page{min-height:calc(100vh - var(--header-height));padding:32px 0 56px}.app-page--buyer{padding-bottom:112px}.page-kicker{color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.page-title{color:var(--ink);font-size:clamp(30px,4vw,46px);font-weight:900;line-height:1.04}.page-subtitle{color:var(--text-muted);font-size:16px;max-width:620px}.text-accent{color:var(--accent)}.text-muted{color:var(--text-muted)}.text-center{text-align:center}.surface{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow-soft)}.card{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:24px}.panel{background:#ffffffc7;border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.empty-state{display:grid;place-items:center;gap:10px;min-height:190px;padding:40px 24px;text-align:center;color:var(--text-muted)}.empty-state h3{color:var(--ink);font-size:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;border-radius:999px;border:1px solid transparent;font-size:14px;font-weight:850;line-height:1;text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;white-space:nowrap}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:disabled{opacity:.58;cursor:not-allowed}.btn-primary{background:var(--green);color:#fff;box-shadow:0 12px 24px #22c55e42}.btn-primary:hover:not(:disabled){background:#16a34a}.btn-purple{background:var(--ink);color:#fff;box-shadow:0 12px 24px #2a0a4a33}.btn-accent{background:var(--accent);color:#fff;box-shadow:0 12px 24px #8b5cf647}.btn-cyan{background:linear-gradient(135deg,#0ea5e9,var(--cyan));color:#082f49;box-shadow:0 12px 24px #22d3ee42}.btn-orange{background:var(--orange);color:#3b2100;box-shadow:0 12px 24px #f59e0b3d}.btn-danger{background:var(--red);color:#fff;box-shadow:0 12px 24px #ef444438}.btn-ghost{background:#ffffffad;color:var(--ink);border-color:var(--stroke)}.btn-ghost:hover:not(:disabled){background:#fff;border-color:var(--stroke-strong)}.icon-button{width:42px;height:42px;padding:0;border-radius:14px}.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background:#ffffffbf;color:var(--text-muted);font-size:12px;font-weight:800}.chip--accent{color:var(--accent);border-color:#8b5cf647;background:#8b5cf61a}.chip--cyan{color:#036178;border-color:#22d3ee66;background:#22d3ee29}.chip--green{color:#047857;border-color:#22c55e5c;background:#22c55e1f}.app-header{position:sticky;top:0;z-index:1000;min-height:var(--header-height);background:#f8f9fddb;border-bottom:1px solid var(--stroke);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.app-header__inner{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:18px}.brand-mark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:950;text-decoration:none;letter-spacing:0}.brand-mark__icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:#fff;border:2px solid rgba(34,211,238,.7);box-shadow:0 10px 24px #2a0a4a33}.brand-mark__text{font-size:24px;color:var(--ink);line-height:1}.top-nav{display:flex;align-items:center;gap:10px}.top-nav a{color:var(--text-muted);font-size:14px;font-weight:800;text-decoration:none}.top-nav a:hover{color:var(--ink)}.mobile-bottom-nav{position:fixed;left:50%;bottom:14px;z-index:900;width:min(calc(100% - 28px),520px);transform:translate(-50%);display:none;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;border-radius:24px;background:#ffffffeb;border:1px solid var(--stroke);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.mobile-bottom-nav a{display:grid;gap:4px;place-items:center;min-height:54px;border-radius:18px;color:var(--text-soft);text-decoration:none;font-size:11px;font-weight:850}.mobile-bottom-nav a[aria-current=page]{color:var(--ink);background:#8b5cf61f}.hero-panel{position:relative;overflow:hidden;min-height:244px;border-radius:34px;padding:28px;color:#fff;background:linear-gradient(135deg,#2a0a4af5,#8b5cf6b8),radial-gradient(circle at top right,rgba(34,211,238,.8),transparent 19rem);box-shadow:var(--shadow)}.hero-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2a0a4ab8,#2a0a4a14),radial-gradient(circle at 78% 42%,rgba(255,255,255,.18),transparent 10rem);pointer-events:none}.hero-panel__content{position:relative;z-index:1;display:grid;align-content:end;min-height:188px;max-width:560px}.hero-panel h1,.hero-panel h2{color:#fff;font-size:clamp(30px,7vw,58px);font-weight:950;line-height:.96;margin-top:10px}.hero-panel p{color:#ffffffdb;font-size:16px;margin-top:10px}.vendor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}.vendor-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:18px;min-height:168px;padding:20px;border-radius:28px;background:#fff;border:1px solid rgba(42,10,74,.09);box-shadow:var(--shadow-soft);color:var(--text);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}.vendor-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.vendor-card--muted{border-style:dashed;background:#ffffffbd}.vendor-card--muted .vendor-card__media{opacity:.72;filter:saturate(.82)}.vendor-card__media{min-height:116px;border-radius:999px;overflow:hidden;display:grid;place-items:center;align-self:center;background:radial-gradient(circle at 45% 34%,rgba(255,255,255,.78),transparent 35%),linear-gradient(135deg,#22d3ee40,#8b5cf638)}.vendor-card__media img{width:100%;height:100%;object-fit:cover}.vendor-card__initials{color:var(--ink);font-size:30px;font-weight:950}.menu-list{display:grid;gap:14px}.menu-row{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border-radius:22px;background:#fff;border:1px solid var(--stroke);box-shadow:var(--shadow-soft)}.menu-row__image{width:82px;height:82px;border-radius:20px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#22d3ee2e,#8b5cf633);color:var(--ink);font-weight:950}.quantity-control{display:inline-flex;align-items:center;gap:8px;padding:6px;border-radius:999px;background:var(--surface-muted);border:1px solid var(--stroke)}.quantity-control button{width:34px;height:34px;border-radius:999px;border:0;display:grid;place-items:center;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 4px 10px #2a0a4a14}.quantity-control strong{min-width:24px;text-align:center;color:var(--ink)}.sticky-action-bar{position:fixed;left:50%;bottom:14px;z-index:880;width:min(calc(100% - 28px),760px);transform:translate(-50%);padding:12px;border-radius:24px;background:#fffffff0;border:1px solid var(--stroke);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.timeline{position:relative;display:grid;gap:20px;padding:4px 0}.timeline:before{content:"";position:absolute;left:22px;top:25px;bottom:25px;width:2px;background:var(--stroke)}.timeline-step{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;align-items:start}.timeline-step__dot{position:relative;z-index:1;width:46px;height:46px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--stroke);background:#fff;color:var(--text-soft);box-shadow:var(--shadow-soft)}.timeline-step--done .timeline-step__dot{background:var(--green);color:#fff}.timeline-step--current .timeline-step__dot{background:var(--accent);color:#fff;box-shadow:0 12px 24px #8b5cf647}.timeline-step--pending{opacity:.56}.queue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}.queue-lane{min-height:380px;border-radius:20px;padding:16px;background:#ffffffb8;border:1px solid var(--stroke);box-shadow:var(--shadow-soft)}.queue-lane--paid{border-color:#22d3ee8c}.queue-lane--preparing{border-color:#f59e0b8c}.queue-lane--ready{border-color:#22c55e8c}.order-card{display:grid;gap:14px;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--stroke);box-shadow:var(--shadow-soft)}.order-card--paid{border-left:5px solid var(--cyan)}.order-card--preparing{border-left:5px solid var(--orange)}.order-card--ready{border-left:5px solid var(--green)}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.data-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--stroke);background:var(--surface);box-shadow:var(--shadow-soft)}.data-table{width:100%;min-width:760px;border-collapse:collapse;text-align:left}.data-table th,.data-table td{padding:16px;border-bottom:1px solid var(--stroke);vertical-align:top}.data-table th{color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}input,select,textarea{width:100%;padding:13px 15px;background:#fff;border:1px solid var(--stroke);border-radius:14px;color:var(--text);font-size:14px;transition:border-color .2s,box-shadow .2s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px #8b5cf624}label{display:block;margin-bottom:8px;color:var(--ink);font-size:13px;font-weight:850}.spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(139,92,246,.16);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}.skeleton-pulse{background:linear-gradient(-90deg,#2a0a4a0d,#2a0a4a1c,#2a0a4a0d);background-size:400% 400%;animation:pulse 1.5s ease-in-out infinite}.dialog-backdrop{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:20px;background:#2a0a4a52;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dialog{width:min(100%,460px);background:#fff;border:1px solid var(--stroke);border-radius:24px;box-shadow:var(--shadow);padding:24px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}.grid{display:grid}.two-column{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.62fr);gap:24px;align-items:start}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{background-position:0% 0%}to{background-position:-135% 0%}}@media(max-width:860px){.top-nav{display:none}.mobile-bottom-nav{display:grid}.app-page--buyer{padding-bottom:120px}.two-column{grid-template-columns:1fr}}@media(max-width:640px){.container,.narrow-container{width:min(100% - 24px,1180px)}.app-header__inner{min-height:64px}.brand-mark__text{font-size:19px}.hero-panel{border-radius:30px;padding:24px;min-height:206px}.hero-panel__content{min-height:158px}.hero-panel h1,.hero-panel h2{font-size:clamp(29px,8vw,44px)}.vendor-grid{grid-template-columns:1fr}.vendor-card{grid-template-columns:minmax(0,1fr) 104px;padding:18px}.menu-row{grid-template-columns:72px minmax(0,1fr)}.menu-row>.quantity-control,.menu-row>.btn{grid-column:1 / -1;justify-self:stretch}.btn{min-height:42px;padding:10px 15px}}