@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root { --primary:#f4b63d; --accent:#d98b21; --ink:#20231d; --paper:#fbfaf6; --mist:#f1eee6; --muted:#74766e; --line:#dedbd1; --success:#34825b; --danger:#bd4d43; --shadow:0 18px 45px rgba(38,34,23,.11); font-family:"DM Sans",system-ui,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); scroll-behavior:smooth; }
body { min-height:100%; margin:0; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.56; }
img { max-width:100%; }
a { color:inherit; text-decoration:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.icon { width:18px; height:18px; display:inline-block; flex:0 0 auto; }

/* customer menu */
.menu-shell { min-height:100vh; background:linear-gradient(115deg,#fcfbf7 0%,#f5f0e5 44%,#fffdf7 100%); padding-bottom:40px; }
.menu-top { height:70px; display:flex; align-items:center; justify-content:space-between; max-width:1220px; padding:0 24px; margin:auto; }
.brand-mini { display:flex; gap:10px; align-items:center; letter-spacing:.08em; font-size:12px; font-weight:700; }
.brand-mini img { height:35px; width:35px; object-fit:contain; border-radius:50%; background:white; border:1px solid var(--line); }
.top-table { font-size:12px; background:#fff; padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); }
.top-table strong { color:var(--ink); }
.menu-hero { max-width:1172px; margin:4px auto 27px; min-height:262px; padding:30px 38px; border-radius:28px; background:linear-gradient(135deg,#fffdf8 0%,#fff4df 53%,#f8e5bf 100%); color:var(--ink); position:relative; overflow:hidden; display:flex; align-items:center; border:1px solid #edddbd; box-shadow:0 18px 45px rgba(127,92,38,.11); }
.menu-hero:before,.menu-hero:after { content:""; position:absolute; width:330px; height:330px; border:1px solid rgba(201,135,31,.32); border-radius:50%; right:-115px; top:-194px; }
.menu-hero:after { width:235px; height:235px; right:-37px; top:133px; border-color:rgba(164,109,29,.16); }
.hero-copy { position:relative; z-index:1; max-width:595px; }
.hero-logo { width:75px; height:75px; object-fit:contain; background:#fff; padding:5px; border-radius:20px; border:2px solid rgba(244,182,61,.7); }
.eyebrow { margin:18px 0 7px; color:var(--primary); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; }
.menu-hero h1 { font:600 clamp(31px,5.4vw,54px)/1.05 "Fraunces",serif; margin:0; letter-spacing:-.04em; }
.hero-description { margin:13px 0 0; color:#69675f; max-width:460px; font-size:15px; line-height:1.55; }
.hero-bee { position:absolute; right:10%; bottom:23px; color:var(--accent); font:500 155px/.8 "Fraunces",serif; opacity:.14; transform:rotate(-8deg); }
.menu-content { max-width:1172px; margin:auto; }
.menu-tools { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 20px; }
.section-heading h2 { margin:0; font:600 28px "Fraunces",serif; letter-spacing:-.03em; }
.section-heading p { color:var(--muted); font-size:14px; margin:5px 0 0; }
.search { background:white; border:1px solid var(--line); border-radius:14px; display:flex; align-items:center; width:min(325px,100%); padding:0 13px; box-shadow:0 4px 12px rgba(33,29,18,.04); }
.search input { border:0; outline:0; min-width:0; width:100%; padding:13px 8px; background:transparent; color:var(--ink); }
.search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,139,33,.12); }
.category-rail { display:flex; gap:10px; overflow-x:auto; padding:3px 1px 15px; scroll-snap-type:x proximity; scrollbar-width:none; }
.category-rail::-webkit-scrollbar { display:none; }
.category-chip { min-width:max-content; scroll-snap-align:start; border:1px solid var(--line); background:#fffdfa; border-radius:16px; padding:8px 12px 8px 8px; color:var(--ink); display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; transition:.18s ease; }
.category-chip:hover,.category-chip.active { background:var(--ink); color:white; border-color:var(--ink); transform:translateY(-1px); }
.category-chip .cat-image,.category-chip .cat-icon { height:28px; width:28px; border-radius:10px; object-fit:cover; background:var(--mist); display:grid; place-items:center; }
.category-chip.active .cat-icon { background:rgba(255,255,255,.13); }
.featured-wrap { margin:7px 0 34px; }
.featured-title { font-size:12px; font-weight:700; letter-spacing:.15em; color:var(--accent); margin:0 0 12px; }
.featured-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.featured-card { min-height:180px; background:var(--ink); color:white; border:0; text-align:left; border-radius:20px; overflow:hidden; padding:0; position:relative; display:flex; align-items:flex-end; }
.featured-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,23,18,.88) 0%,rgba(20,23,18,.1) 75%); }
.featured-card img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; }
.featured-card > span { z-index:1; position:relative; padding:17px; }
.featured-card b { display:block; font:600 20px "Fraunces",serif; margin-top:3px; }
.featured-card small { color:var(--primary); font-weight:700; }
.products-area { padding-top:4px; }
.product-title-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:15px; }
.product-title-row h2 { margin:0; font:600 29px "Fraunces",serif; letter-spacing:-.03em; }
.result-count { color:var(--muted); font-size:13px; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.all-menu-list { display:grid; gap:22px; }
.menu-list-category { scroll-margin-top:18px; }
.menu-list-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 2px 9px; }
.menu-list-heading > div { display:flex; align-items:center; gap:8px; }
.menu-list-heading span { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:#80531b; background:#fff0d1; font-size:14px; }
.menu-list-heading h3 { margin:0; font:600 22px "Fraunces",serif; letter-spacing:-.025em; }
.menu-list-heading small { color:var(--muted); font-size:12px; }
.menu-list { overflow:hidden; border:1px solid #e4dfd4; border-radius:16px; background:#fffdf9; box-shadow:0 5px 17px rgba(38,34,23,.04); }
.menu-list-row { width:100%; min-height:55px; padding:13px 15px; border:0; border-bottom:1px solid #ebe6dc; background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left; transition:background .16s ease; }
.menu-list-row:last-child { border-bottom:0; }
.menu-list-row:hover { background:#fff6e5; }
.menu-list-row b { font-size:14px; line-height:1.35; }
.menu-list-price { color:var(--accent); font-size:14px; font-weight:700; white-space:nowrap; }
.menu-list-soldout { color:var(--danger); font-size:13px; font-weight:700; white-space:nowrap; }
.product-card { background:white; min-width:0; border:1px solid rgba(222,219,209,.8); border-radius:20px; overflow:hidden; box-shadow:0 6px 20px rgba(38,34,23,.045); text-align:left; padding:0; color:var(--ink); transition:transform .18s,box-shadow .18s; }
.product-card:hover { transform:translateY(-3px); box-shadow:0 16px 28px rgba(38,34,23,.12); }
.product-image { aspect-ratio:1.15/.82; width:100%; object-fit:cover; display:block; background:linear-gradient(135deg,#ebd099,#d79c49); }
.product-body { padding:15px 15px 16px; }
.product-tags { height:23px; display:flex; gap:6px; overflow:hidden; margin-bottom:7px; }
.tag { color:#80531b; background:#fff2d5; padding:4px 7px; border-radius:6px; line-height:1; font-size:10px; white-space:nowrap; font-weight:700; letter-spacing:.03em; }
.tag.dark { color:white; background:var(--ink); }
.product-name { margin:0; font:600 19px/1.15 "Fraunces",serif; letter-spacing:-.025em; }
.product-description { color:var(--muted); margin:6px 0 13px; min-height:38px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; line-height:1.45; }
.price-row { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.price { font-size:17px; font-weight:700; color:var(--ink); }
.old-price { color:#9d9c94; text-decoration:line-through; display:block; font-size:12px; margin-bottom:1px; }
.sale-price { color:#b65d1e; font-size:18px; font-weight:700; }
.sold-out { color:var(--danger); font-size:14px; font-weight:700; }
.detail-link { color:var(--accent); font-weight:700; font-size:12px; }
.empty { border:1px dashed #cfc9bc; border-radius:20px; background:rgba(255,255,255,.6); padding:45px 20px; text-align:center; color:var(--muted); grid-column:1/-1; }
.empty h3 { margin:0 0 5px; color:var(--ink); font:600 22px "Fraunces",serif; }
.menu-footer { max-width:1172px; margin:45px auto 0; border-top:1px solid var(--line); padding:22px 0 5px; display:flex; justify-content:space-between; gap:18px; color:var(--muted); font-size:12px; }
.menu-footer a { color:var(--ink); font-weight:700; }

/* modal */
.modal-backdrop { position:fixed; inset:0; z-index:20; background:rgba(22,24,19,.57); display:grid; place-items:center; padding:16px; backdrop-filter:blur(4px); }
.modal { max-width:700px; width:100%; overflow:auto; max-height:min(760px,calc(100vh - 32px)); border-radius:24px; background:var(--paper); position:relative; box-shadow:0 25px 80px rgba(0,0,0,.28); }
.modal-close { position:absolute; z-index:2; top:12px; right:12px; width:35px; height:35px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.94); font-size:19px; }
.product-modal { display:grid; grid-template-columns:1fr 1fr; }
.product-modal img { height:100%; min-height:340px; object-fit:cover; background:var(--mist); }
.product-detail-body { padding:37px 28px 26px; }
.product-detail-body h2 { font:600 35px/1.04 "Fraunces",serif; letter-spacing:-.045em; margin:9px 0 12px; }
.product-detail-body > p { color:var(--muted); line-height:1.6; margin:0 0 20px; }
.detail-price { font-size:24px; font-weight:700; margin:18px 0; }
.detail-list { border-top:1px solid var(--line); padding-top:16px; margin-top:19px; }
.detail-list h3 { margin:0 0 8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.detail-list span { font-size:13px; line-height:1.7; color:var(--muted); }

/* admin */
.admin-shell { min-height:100vh; background:#f7f6f2; display:grid; grid-template-columns:246px 1fr; }
.admin-sidebar { background:var(--ink); color:#fff; padding:22px 14px; display:flex; flex-direction:column; gap:25px; position:sticky; top:0; height:100vh; }
.admin-brand { padding:2px 10px 10px; display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.05em; font-size:13px; }
.admin-brand img { width:38px; height:38px; object-fit:contain; border-radius:12px; background:white; }
.admin-nav { display:grid; gap:4px; }
.admin-nav button { color:rgba(255,255,255,.67); background:transparent; border:0; display:flex; align-items:center; gap:10px; padding:11px 12px; width:100%; border-radius:10px; text-align:left; font-weight:600; font-size:13px; }
.admin-nav button:hover,.admin-nav button.active { background:rgba(255,255,255,.12); color:#fff; }
.admin-sidebar .logout { margin-top:auto; color:rgba(255,255,255,.75); background:transparent; border:1px solid rgba(255,255,255,.17); padding:10px; border-radius:10px; }
.admin-main { min-width:0; padding:36px clamp(20px,4vw,56px); max-width:1530px; width:100%; }
.admin-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:28px; }
.admin-head h1 { font:600 33px/1.1 "Fraunces",serif; letter-spacing:-.035em; margin:0; }
.admin-head p { margin:6px 0 0; color:var(--muted); font-size:14px; }
.btn { border:0; border-radius:10px; padding:11px 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--ink); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; }
.btn:hover { filter:brightness(1.13); }
.btn.primary { background:var(--accent); }
.btn.light { color:var(--ink); background:#e9e6dd; }
.btn.danger { background:#b74740; }
.btn.tiny { padding:7px 9px; font-size:11px; }
.stats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:13px; }
.stat-card,.panel { border:1px solid #e4e1d8; background:#fff; border-radius:16px; box-shadow:0 4px 16px rgba(38,34,23,.035); }
.stat-card { padding:17px; }
.stat-card span { display:block; font-size:12px; color:var(--muted); }
.stat-card strong { display:block; font:600 31px "Fraunces",serif; margin-top:5px; }
.dashboard-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; margin-top:20px; }
.panel { padding:20px; }
.panel h2 { font:600 22px "Fraunces",serif; margin:0 0 3px; letter-spacing:-.025em; }
.panel-subtitle { margin:0 0 18px; color:var(--muted); font-size:13px; }
.quick-actions { display:grid; gap:9px; }
.quick-action { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); background:#fffdfa; padding:12px; border-radius:10px; font-size:13px; font-weight:600; text-align:left; }
.quick-action span { color:var(--accent); }
.admin-table-wrap { overflow:auto; border:1px solid #e6e3db; border-radius:14px; background:#fff; }
.admin-table { min-width:735px; width:100%; border-collapse:collapse; text-align:left; }
.admin-table th { background:#fbfaf6; padding:12px 14px; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.admin-table td { padding:11px 14px; border-top:1px solid #eeece6; vertical-align:middle; font-size:13px; }
.table-product { display:flex; align-items:center; gap:9px; min-width:160px; }
.table-product img { width:38px; height:38px; object-fit:cover; border-radius:9px; background:var(--mist); }
.table-product b { display:block; font-size:13px; }
.table-product small { color:var(--muted); }
.status { display:inline-flex; border-radius:999px; padding:4px 7px; font-size:10px; line-height:1; font-weight:700; }
.status.available { color:#23704a; background:#e4f3ea; }.status.hidden { color:#786f65; background:#eeece7; }.status.soldout { color:#a3433b; background:#fae6e4; }.status.featured { color:#8c5d16; background:#fff1d2; }
.table-actions { display:flex; gap:5px; justify-content:flex-end; }
.split-grid { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(400px,1.2fr); gap:19px; align-items:start; }
.category-list { display:grid; gap:8px; }
.category-admin-row { border:1px solid var(--line); background:white; border-radius:12px; padding:10px; display:flex; align-items:center; gap:9px; transition:opacity .15s,transform .15s; }
.category-admin-row.dragging { opacity:.45; transform:scale(.98); }
.drag-handle { color:#9b978c; cursor:grab; font-size:19px; }
.category-admin-icon { height:34px; width:34px; border-radius:10px; object-fit:cover; background:var(--mist); display:grid; place-items:center; }
.category-row-title { font-weight:700; flex:1; font-size:13px; }
.category-row-actions { display:flex; gap:4px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.field { display:grid; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { color:#4d5149; font-size:12px; font-weight:700; }
.field input,.field textarea,.field select { outline:0; border:1px solid #dcd8ce; background:#fff; color:var(--ink); border-radius:9px; padding:10px 11px; font-size:13px; width:100%; }
.field textarea { min-height:83px; resize:vertical; line-height:1.45; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,139,33,.11); }
.switch-field { display:flex; gap:8px; align-items:center; padding:9px 0; font-size:12px; font-weight:600; }
.switch-field input { accent-color:var(--accent); height:16px; width:16px; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:17px; }
.modal .form-panel { padding:25px; }.modal .form-panel h2 { margin-top:0; font:600 26px "Fraunces",serif; }
.image-upload { display:flex; gap:10px; align-items:center; padding:10px; background:#f7f5ef; border-radius:10px; border:1px dashed #d4cfc1; }
.image-upload img { height:45px; width:45px; object-fit:cover; border-radius:8px; background:white; }.image-upload input { padding:0; border:0; background:transparent; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 18% 12%,#f2c55b 0,transparent 30%),linear-gradient(135deg,#eeebe3,#fbfaf6); }
.login-card { width:min(425px,100%); padding:30px; border:1px solid rgba(255,255,255,.7); border-radius:23px; background:rgba(255,255,255,.86); box-shadow:0 24px 70px rgba(38,34,23,.16); }
.login-logo { display:flex; align-items:center; gap:11px; margin-bottom:27px; font-size:12px; letter-spacing:.1em; font-weight:700; }.login-logo img { height:48px; width:48px; object-fit:contain; border-radius:14px; background:white; }
.login-card h1 { font:600 33px/1.05 "Fraunces",serif; margin:0 0 8px; letter-spacing:-.04em; }.login-card p { color:var(--muted); margin:0 0 22px; font-size:14px; line-height:1.5; }.login-card .btn { width:100%; margin-top:5px; }.login-card form { display:grid; gap:13px; }
.qr-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:20px; }.qr-preview { text-align:center; }.qr-preview img { width:min(280px,100%); padding:11px; border:1px solid var(--line); border-radius:15px; background:white; }.qr-url { display:block; overflow-wrap:anywhere; color:var(--muted); font-size:12px; margin:12px 0; }.table-add { display:flex; gap:7px; }.table-add input { min-width:0; flex:1; }
.toast-region { position:fixed; z-index:50; right:16px; bottom:16px; display:grid; gap:8px; width:min(360px,calc(100vw - 32px)); }.toast { padding:12px 14px; border-radius:12px; color:#fff; background:var(--ink); box-shadow:0 12px 30px rgba(0,0,0,.18); font-size:13px; font-weight:600; animation:toast-in .25s ease; }.toast.error { background:#a73d38; }@keyframes toast-in { from {transform:translateY(10px);opacity:0} to {transform:translateY(0);opacity:1} }

@media (max-width:900px) { .menu-top,.menu-content,.menu-footer { margin-left:18px; margin-right:18px; }.menu-hero { margin-left:18px; margin-right:18px; }.product-grid { grid-template-columns:repeat(2,1fr); }.featured-row { grid-template-columns:repeat(2,1fr); }.featured-card:last-child { display:none; }.admin-shell { grid-template-columns:1fr; }.admin-sidebar { position:sticky; z-index:10; top:0; height:auto; padding:9px 14px; flex-direction:row; align-items:center; gap:8px; }.admin-brand { padding:0; }.admin-nav { display:flex; overflow:auto; gap:3px; flex:1; }.admin-nav button { padding:9px 10px; width:auto; white-space:nowrap; }.admin-nav button .icon { display:none; }.admin-sidebar .logout { margin:0; padding:8px 10px; font-size:0; }.admin-sidebar .logout .icon { display:block; }.stats-grid { grid-template-columns:repeat(3,1fr); }.dashboard-grid,.split-grid,.qr-layout { grid-template-columns:1fr; }.admin-main { padding:26px 19px; }.admin-head h1 { font-size:30px; } }
@media (max-width:580px) { .menu-top { padding:0; height:61px; }.menu-hero { min-height:245px; padding:27px 21px; border-radius:23px; margin-bottom:22px; }.hero-logo { width:63px; height:63px; border-radius:17px; }.menu-hero h1 { font-size:36px; }.hero-description { font-size:13px; max-width:295px; }.hero-bee { right:1%; bottom:20px; font-size:125px; }.menu-tools { display:grid; gap:13px; }.section-heading h2 { font-size:25px; }.search { width:100%; }.featured-wrap { margin-bottom:27px; }.featured-row { grid-template-columns:1fr 1fr; gap:10px; }.featured-card { min-height:130px; border-radius:16px; }.featured-card b { font-size:16px; }.featured-card > span { padding:11px; }.product-grid { gap:11px; }.product-card { border-radius:15px; }.product-body { padding:10px 10px 12px; }.product-tags { margin-bottom:5px; height:20px; }.tag { padding:3px 5px; font-size:9px; }.product-name { font-size:16px; }.product-description { min-height:34px; margin:5px 0 9px; font-size:11px; }.price { font-size:14px; }.sale-price { font-size:15px; }.detail-link { font-size:10px; }.menu-footer { margin-top:31px; padding-top:18px; flex-direction:column; gap:8px; }.product-modal { grid-template-columns:1fr; }.product-modal img { min-height:210px; max-height:280px; }.product-detail-body { padding:24px 20px 22px; }.product-detail-body h2 { font-size:31px; }.modal { border-radius:20px; }.admin-head { align-items:center; }.admin-head p { display:none; }.admin-head .btn { padding:10px; font-size:0; }.admin-head .btn .icon { width:20px;height:20px; }.stats-grid { grid-template-columns:repeat(2,1fr); }.stat-card { padding:14px; }.stat-card strong { font-size:27px; }.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.admin-table { min-width:650px; }.panel { padding:16px; }.category-admin-row { padding:8px; }.category-row-actions .btn { font-size:0; padding:8px; }.category-row-actions .btn .icon { width:14px;height:14px; }.login-card { padding:25px 22px; } }

@media print { body * { visibility:hidden !important; } .qr-preview,.qr-preview * { visibility:visible !important; } .qr-preview { position:absolute; inset:0; border:0; box-shadow:none; } .qr-preview .btn { display:none !important; } }