:root {
  --ink: #20291f;
  --muted: #788075;
  --cream: #f8f6ee;
  --paper: #fffdf8;
  --green: #386641;
  --lime: #d7edb3;
  --yellow: #f9d969;
  --orange: #e97740;
  --red: #c75e41;
  --line: #e7e5da;
  font-family: Manrope, "Noto Sans SC", sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; }
.app-shell { max-width: 1240px; margin: auto; padding: 22px 22px 112px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom: 28px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.04em; font-size:20px; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; background:var(--green); color:#fff; border-radius:13px; font-size:20px; transform:rotate(-8deg); }
.kitchen { background:var(--paper); border:1px solid var(--line); padding:9px 13px; border-radius:999px; font-size:13px; font-weight:700; }
.kitchen span { color:var(--muted); font-weight:500; margin-right:4px; }
.hero { position:relative; overflow:hidden; padding: 42px 46px; border-radius: 30px; background: var(--green); color:#fff; min-height:235px; }
.hero:after { content:""; position:absolute; right:-70px; top:-110px; width:330px; height:330px; background:var(--yellow); border-radius:46% 54% 65% 35%; opacity:.96; transform:rotate(28deg); }
.hero:before { content:"✦  ✦  ✦"; position:absolute; right:44px; top:58px; color:#2f5636; font-size:36px; z-index:1; letter-spacing:7px; transform:rotate(-8deg); }
.eyebrow { color:var(--lime); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { font-family:"DM Serif Display", "Noto Sans SC", serif; font-size:clamp(32px, 5vw, 58px); letter-spacing:-.04em; line-height:1.05; margin:12px 0; max-width:620px; }
.hero p { margin:0; color:#d6e4d2; font-size:15px; max-width:460px; line-height:1.65; }
.hero .hero-action { margin-top:22px; position:relative; z-index:2; }
.button { padding:12px 17px; border-radius:12px; font-size:14px; font-weight:800; transition:.2s transform,.2s background; }
.button:hover { transform:translateY(-2px); }.button:active { transform:translateY(0); }
.button.primary { background:var(--yellow); color:var(--ink); }.button.dark { background:var(--green); color:#fff; }.button.soft { background:#eef3e8; color:var(--green); }.button.ghost { background:transparent; color:var(--green); padding:8px; }.button.danger { background:#fde9e4; color:var(--red); }
.dashboard-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:22px; margin-top:22px; }.section { background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:25px; }.section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:19px; }.section-title h2 { margin:0; font-family:"DM Serif Display", "Noto Sans SC", serif; font-size:27px; letter-spacing:-.03em; }.count { color:var(--muted); font-size:12px; font-weight:700; }
.quick-actions { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:-32px; position:relative; z-index:3; padding:0 20px; }.quick { text-align:left; padding:15px; background:var(--paper); border:1px solid var(--line); border-radius:16px; min-height:94px; box-shadow:0 8px 20px #3d4e3510; }.quick i { display:grid; width:31px; height:31px; place-items:center; background:#f2f4e8; border-radius:10px; font-style:normal; margin-bottom:8px; }.quick b { display:block; font-size:13px; }.quick small { color:var(--muted); font-size:11px; }
.recipe-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:13px; }.recipe-card { border:1px solid var(--line); background:#fff; border-radius:17px; overflow:hidden; text-align:left; padding:0; }.recipe-art { height:108px; display:grid; place-items:center; font-size:46px; background:var(--card-bg,#f3d9b1); }.recipe-body { padding:12px; }.recipe-name { font-weight:800; font-size:14px; }.recipe-meta { font-size:11px; color:var(--muted); margin-top:5px; }.tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }.tag { border-radius:999px; padding:3px 7px; font-size:10px; font-weight:700; background:#eff3eb; color:#57715a; }
.order-card { background:#f5f1df; border-radius:18px; padding:19px; }.status { color:#265e39; background:#dff0cc; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800; }.status.waiting { background:#fee8ad; color:#946100; }.order-title { font-size:19px; font-weight:800; margin:13px 0 5px; }.order-sub { color:var(--muted); font-size:12px; }.avatars { margin:17px 0 14px; display:flex; }.avatar { width:30px; height:30px; display:grid; place-items:center; border:2px solid #f5f1df; margin-left:-7px; border-radius:50%; background:#b8d3a7; font-size:11px; font-weight:800; }.avatar:first-child { margin-left:0; }.stats { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #ded7b9; padding-top:13px; }.stat b { display:block; font-size:20px; }.stat span { color:var(--muted); font-size:11px; }
.nav { position:fixed; left:50%; bottom:calc(15px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(500px,calc(100% - 28px)); margin:0; display:flex; justify-content:space-around; gap:4px; background:#263a29; border-radius:18px; padding:7px; box-shadow:0 12px 30px #24392433; z-index:10; }.nav button { background:transparent; color:#cfd8c9; padding:10px 13px; border-radius:12px; font-size:12px; font-weight:700; }.nav button.active { color:var(--ink); background:var(--yellow); }
.page-head { display:flex; justify-content:space-between; align-items:end; margin:25px 0 20px; }.page-head h1 { font-size:42px; color:var(--ink); margin:0; }.page-head p { color:var(--muted); margin:6px 0 0; font-size:13px; }.search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:13px; padding:0 12px; }.search input { border:0; outline:0; width:220px; height:42px; background:transparent; }.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }.filter { background:#fff; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:12px; font-weight:700; }.filter.active { background:var(--green); color:white; border-color:var(--green); }
.large-recipe-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:15px; }.large-recipe-grid .recipe-art { height:146px; font-size:60px; }.empty { color:var(--muted); padding:28px 0; text-align:center; }.menu-list { display:grid; gap:12px; }.menu-row { display:flex; align-items:center; gap:14px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:15px; }.menu-row .recipe-art { width:65px; height:55px; flex:0 0 65px; border-radius:11px; font-size:30px; }.grow { flex:1; }.row-name { font-weight:800; }.row-sub { color:var(--muted); font-size:12px; margin-top:3px; }.circle-check { width:23px; height:23px; accent-color:var(--green); }
.choice-footer { position:sticky; bottom:88px; background:#263a29; color:#fff; border-radius:17px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 12px 26px #24392433; }.choice-footer span { font-size:13px; font-weight:700; }.choice-footer .button { padding:9px 13px; }
.tabs { display:flex; gap:7px; background:#ecefe5; padding:5px; border-radius:12px; width:max-content; }.tabs button { padding:8px 13px; background:transparent; color:var(--muted); border-radius:8px; font-size:12px; font-weight:800; }.tabs button.active { background:#fff; color:var(--ink); box-shadow:0 2px 5px #00000010; }.record-list { display:grid; gap:12px; }.person-record { padding:17px; background:#fff; border:1px solid var(--line); border-radius:16px; }.person-top { display:flex; gap:9px; align-items:center; }.person-top .avatar { margin:0; border:0; }.person-name { font-size:14px; font-weight:800; }.role { font-size:11px; color:var(--muted); }.picked { margin:12px 0 0 39px; color:#495247; font-size:13px; line-height:1.7; }.dish-record { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }.dish-record:last-child { border:0; }.mini-bar { height:7px; border-radius:999px; background:#edf0e9; margin-top:6px; overflow:hidden; }.mini-bar b { display:block; height:100%; background:var(--orange); border-radius:inherit; }
.modal-cover { position:fixed; z-index:20; inset:0; background:#1e2b2088; display:grid; place-items:center; padding:20px; }.modal { width:min(500px,100%); max-height:90vh; overflow:auto; background:var(--paper); border-radius:23px; padding:25px; }.modal h2 { margin:0 0 5px; font-family:"DM Serif Display", "Noto Sans SC", serif; font-size:30px; }.modal p { color:var(--muted); font-size:13px; line-height:1.6; }.form-field { display:grid; gap:6px; margin:15px 0; font-size:12px; font-weight:800; }.form-field input,.form-field textarea,.form-field select { padding:11px; border-radius:10px; border:1px solid var(--line); outline:none; background:#fff; }.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }.final-dishes { display:grid; gap:8px; margin:14px 0; }.final-dish { display:flex; align-items:center; gap:9px; padding:11px; background:#fff; border:1px solid var(--line); border-radius:10px; font-size:13px; font-weight:700; }.add-temp { display:flex; gap:8px; margin-top:10px; }.add-temp input { flex:1; padding:10px; border:1px solid var(--line); border-radius:10px; }
.history-item { padding:16px; border:1px solid var(--line); background:#fff; border-radius:15px; margin-bottom:10px; }.history-item h3 { margin:0; font-size:15px; }.history-item p { margin:5px 0 10px; color:var(--muted); font-size:12px; }.toast { opacity:0; pointer-events:none; position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(10px); background:#263a29; color:white; padding:10px 14px; border-radius:999px; font-size:12px; font-weight:700; transition:.25s; z-index:40; }.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:760px) { .app-shell { padding:14px 14px 104px; }.topbar { margin-bottom:16px; }.hero { padding:31px 25px; min-height:250px; }.hero:after { right:-160px; top:90px; }.hero:before { display:none; }.quick-actions { grid-template-columns:repeat(2,1fr); margin-top:-17px; padding:0 10px; }.dashboard-grid { grid-template-columns:1fr; }.recipe-grid { grid-template-columns:repeat(2,1fr); }.large-recipe-grid { grid-template-columns:repeat(2,1fr); }.page-head { align-items:flex-start; gap:12px; flex-direction:column; }.page-head h1 { font-size:34px; }.search { width:100%; }.search input { width:100%; }.section { padding:18px; }.nav { margin-top:18px; }.nav button { padding:9px 8px; }.recipe-art { height:95px; } }

.welcome { width:min(650px,calc(100% - 32px)); margin:9vh auto; text-align:center; }.welcome-mark { width:64px; height:64px; display:grid; place-items:center; border-radius:23px; background:var(--green); color:#fff; margin:0 auto 19px; font-size:32px; transform:rotate(-8deg); }.welcome h1 { color:var(--ink); font-size:48px; margin:12px auto; }.welcome>p { color:var(--muted); margin:0 auto 26px; line-height:1.7; max-width:440px; }.kitchen-panel { background:var(--paper); padding:14px; border-radius:23px; border:1px solid var(--line); text-align:left; }.kitchen-option { width:100%; display:flex; align-items:center; gap:13px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:15px; text-align:left; margin-bottom:9px; }.kitchen-option i { display:grid; place-items:center; width:40px; height:40px; color:#fff; font-style:normal; border-radius:13px; }.kitchen-option span { display:grid; gap:3px; flex:1; }.kitchen-option b { font-size:14px; }.kitchen-option small { color:var(--muted); font-size:11px; }.kitchen-option em { color:var(--green); font-style:normal; font-weight:800; }.create-kitchen { width:100%; color:var(--green); background:#edf3e8; padding:13px; border-radius:13px; font-weight:800; }.recipe-editor { display:grid; gap:16px; max-width:900px; margin:0 auto 42px; }.form-section { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:23px; }.form-section h2 { margin:0 0 5px; font-family:"DM Serif Display","Noto Sans SC",serif; font-size:26px; }.form-section>p { color:var(--muted); font-size:12px; margin:0 0 13px; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.form-field.wide { grid-column:1 / -1; }.form-field b { color:var(--orange); }.form-section textarea { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px; resize:vertical; outline-color:var(--green); font:inherit; }.photo-uploader { display:flex; flex-direction:column; gap:4px; border:1px dashed #96ae8c; border-radius:13px; padding:17px; margin-top:14px; color:var(--green); cursor:pointer; }.photo-uploader span { color:var(--muted); font-size:11px; }.photo-uploader input { color:var(--muted); font-size:11px; margin-top:5px; }.photo-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }.photo-preview img { width:92px; height:72px; object-fit:cover; border-radius:9px; border:1px solid var(--line); }.editor-actions { display:flex; justify-content:flex-end; gap:10px; }.menu-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.menu-card { text-align:left; display:flex; align-items:center; justify-content:space-between; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:19px; color:var(--ink); }.menu-card.selected { border:2px solid var(--green); box-shadow:0 7px 18px #38664114; }.menu-card h2 { margin:12px 0 3px; font-size:18px; }.menu-card p { margin:0; color:var(--muted); font-size:12px; }.menu-card>b { color:var(--green); font-size:22px; }.detail-heading { font-size:14px; margin:17px 0 5px; }.step-list { padding-left:20px; color:#495247; font-size:13px; line-height:1.8; } @media(max-width:760px){.welcome{margin:6vh auto}.welcome h1{font-size:38px}.form-grid,.menu-cards{grid-template-columns:1fr}.form-section{padding:18px}.editor-actions{position:sticky;bottom:12px;background:var(--cream);padding:10px;border-radius:14px}}
:root .recipe-art { overflow: hidden; }
.recipe-cover { display:block; width:100%; height:100%; object-fit:cover; min-height:0; }
.cover-preview img { display:block; width:min(100%,360px); aspect-ratio:4/3; object-fit:cover; border-radius:14px; margin-top:12px; }
.form-grid > .wide { grid-column:1 / -1; }
button:disabled { opacity:.6; cursor:wait; }
.quick-actions { grid-template-columns:repeat(5, 1fr); }
.tag-select-section { background:#f4f8ef; border:1px solid #dce8d4; border-radius:13px; padding:14px; }
.tag-section-title { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:800; }
.tag-select-section p { margin:5px 0 10px; color:var(--muted); font-size:11px; }
.tag-select-grid { grid-template-columns:repeat(2,1fr); }
.tag-select-grid .form-field { margin:0; }
.tag-empty { color:var(--muted); font-size:12px; padding:6px 0; }
.tag-manager-note { margin-bottom:15px; padding:13px 15px; color:#536052; background:#edf4e7; border-radius:14px; font-size:13px; line-height:1.6; }
.tag-group-list { display:grid; gap:14px; }
.tag-group-card { background:var(--paper); border:1px solid var(--line); border-radius:19px; padding:18px; }
.tag-group-head { display:flex; align-items:end; gap:10px; justify-content:space-between; }
.tag-group-head label { flex:1; display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:700; }
.tag-group-head input,.tag-add-row input { width:100%; padding:10px; background:#fff; border:1px solid var(--line); border-radius:10px; font:inherit; font-weight:800; color:var(--ink); }
.tag-options { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0; min-height:26px; }
.editable-tag { display:flex; align-items:center; gap:5px; padding:4px 7px 4px 10px; color:#386641; background:#edf4e7; border-radius:999px; font-size:12px; font-weight:800; }
.editable-tag input { width:76px; padding:0; border:0; outline:0; color:#386641; background:transparent; font:inherit; font-weight:800; }
.editable-tag button { display:grid; place-items:center; width:18px; height:18px; padding:0; border-radius:50%; background:#d7e8cb; color:#386641; font-size:16px; line-height:1; }
.tag-add-row { display:flex; gap:8px; }
.tag-add-row .button { white-space:nowrap; padding:10px 12px; }
.menu-top-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.mini-delete { padding:8px 10px; font-size:12px; }
.menu-selector { margin-top:16px; font-size:12px; }
.menu-selector>b span { color:var(--orange); }
.menu-filter-panel { display:flex; align-items:center; gap:13px; margin:-5px 0 17px; padding:13px 15px; background:var(--paper); border:1px solid var(--line); border-radius:15px; }
.menu-filter-panel>span { font-size:12px; font-weight:800; white-space:nowrap; }
.menu-filter-panel .filters { margin:0; }
.menu-filter-panel { display:block; }
.menu-filter-panel>span { display:block; margin-bottom:9px; }
.tag-option-filter { display:flex; align-items:center; gap:12px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); }
.tag-option-filter>span { color:var(--muted); font-size:11px; font-weight:800; white-space:nowrap; }
.tag-option-filter .filters { margin:0; }
.quick-actions { grid-template-columns:repeat(auto-fit, minmax(155px, 1fr)); }
.member-list { display:grid; gap:11px; }
.member-row { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.member-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#d7edb3; color:var(--green); font-weight:800; }
@media (max-width:760px) { .quick-actions { grid-template-columns:repeat(2, 1fr); }.tag-select-grid { grid-template-columns:1fr; }.tag-group-head { align-items:stretch; flex-direction:column; }.tag-group-head .button { align-self:flex-end; }.tag-add-row { align-items:stretch; flex-direction:column; }.tag-add-row .button { width:100%; }.menu-top-actions { justify-content:flex-start; }.tag-option-filter { align-items:flex-start; flex-direction:column; gap:6px; } }
.selected-menu-filters { display:flex; flex-wrap:wrap; gap:7px; margin:11px 0 2px; }
.selected-menu-filter { display:inline-flex; align-items:center; gap:5px; border:1px solid #cddfb9; border-radius:999px; padding:6px 9px; color:var(--green); background:#eff7e7; font-size:12px; font-weight:800; cursor:pointer; }
.selected-menu-filter b { font-size:15px; line-height:12px; }

.topbar-actions { display:flex; align-items:center; gap:8px; }
.logout { padding:8px 10px; border-radius:999px; color:var(--muted); background:transparent; font-size:12px; font-weight:700; }
.logout:hover { color:var(--green); background:#edf3e8; }
.login-error { margin:12px 0 0; padding:9px 11px; border-radius:10px; color:#9f422e; background:#fde9e4; font-size:12px; line-height:1.5; }
@media (max-width:760px) { .topbar-actions { gap:3px; } .logout { padding:7px; } }


.recipe-modal-actions { justify-content:space-between; }

.kitchen-manage { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.kitchen-manage h2 { margin:0; font-family:"DM Serif Display", "Noto Sans SC", serif; font-size:25px; }
.kitchen-manage p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.danger-zone { border-color:#f0c9bf; }
@media (max-width:760px) { .kitchen-manage { align-items:flex-start; flex-direction:column; } }
.auth-switch { display:block; margin:12px auto 0; }
.floating-refresh { position:fixed; z-index:15; display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--green); box-shadow:0 8px 22px #24392433; font-size:26px; font-weight:800; line-height:1; touch-action:none; user-select:none; cursor:grab; }
.floating-refresh.dragging { cursor:grabbing; box-shadow:0 12px 28px #24392455; }