/* Levanty Kitchen Guide
   BRAND: colors come from the Levanty logo (red, yellow, black outline). Change this first block to restyle the whole app. */
:root{
  color-scheme:light;
  --font-display:'Lilita One','Arial Rounded MT Bold','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:#FFFBEA; --surface:#FFFFFF; --surface-2:#F6F0D6; --ink:#181818; --muted:#5E594B; --line:#E3DCBF;
  --accent:#D82028; --accent-ink:#FFFFFF; --accent-soft:#FDE6E7;
  --yellow:#F8E800; --yellow-ink:#181818; --outline:#181818;
  --herb:#2D6A44; --herb-soft:#DDEBE1;
  --good:#1F6B3A; --good-bg:#DDEFE2; --warn:#7A5300; --warn-bg:#FBEFB5; --bad:#9F1F1F; --bad-bg:#F8DEDC;
  --logo-bg:transparent; --logo-pad:0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#161311; --surface:#211D1A; --surface-2:#2C2723; --ink:#F7F2E2; --muted:#B9AF9B; --line:#3B342E;
    --accent:#F0444B; --accent-ink:#1A0809; --accent-soft:#3D2022;
    --yellow:#F8E800; --yellow-ink:#181818; --outline:#F7F2E2;
    --herb:#6FC48D; --herb-soft:#1C3326;
    --good:#7BD39A; --good-bg:#17301F; --warn:#E8C26A; --warn-bg:#352A0D; --bad:#F09A94; --bad-bg:#3A1A18;
    --logo-bg:#FFFFFF; --logo-pad:4px 10px;
  }
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.5;
  padding-top:max(20px, env(safe-area-inset-top, 0px));
  padding-bottom:max(48px, env(safe-area-inset-bottom, 0px));
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
[hidden]{display:none!important}
*{box-sizing:border-box}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.app{max-width:1120px; margin:0 auto}
h1,h2,h3{font-family:var(--font-display); font-weight:400; margin:0; text-wrap:balance; line-height:1.15; letter-spacing:.01em}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.muted{color:var(--muted)}
.m0{margin:0}

/* header */
.top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding-bottom:16px; border-bottom:4px solid var(--yellow); box-shadow:0 1px 0 var(--outline)}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.logo{height:52px; width:auto; max-width:190px; object-fit:contain; background:var(--logo-bg); padding:var(--logo-pad); border-radius:10px}
.wordmark{font-family:var(--font-display); font-size:32px; font-weight:400; letter-spacing:.02em; color:var(--accent); -webkit-text-stroke:1.5px var(--outline); paint-order:stroke fill}
.brand .sub{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.topright{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
nav{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:999px; flex-wrap:wrap}
nav a{text-decoration:none; padding:8px 16px; border-radius:999px; font-weight:600; font-size:14px; color:var(--muted)}
nav a.on{background:var(--yellow); color:var(--yellow-ink); box-shadow:inset 0 0 0 2px var(--yellow-ink)}
#status{font-size:12px; color:var(--muted)}
.banner{margin-top:12px; padding:10px 14px; border-radius:10px; background:var(--warn-bg); color:var(--warn); font-size:14px; font-weight:500}

/* sign in */
.auth{max-width:420px; margin:48px auto 0; display:flex; flex-direction:column; gap:16px}
.auth .logo{height:72px; max-width:240px; margin:0 auto}
.auth h2{text-align:center; font-size:26px}
.auth form{display:flex; flex-direction:column; gap:12px}
.err{margin:0; font-size:14px; color:var(--bad); background:var(--bad-bg); padding:8px 12px; border-radius:8px}
.okmsg{margin:0; font-size:14px; color:var(--good); background:var(--good-bg); padding:8px 12px; border-radius:8px}
.linkbtn{background:none; border:0; padding:6px 0; font:inherit; font-size:14px; color:var(--muted); text-decoration:underline; cursor:pointer; align-self:center}

/* two-pane layout */
.layout{display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); gap:24px; margin-top:20px; align-items:start}
.list{display:flex; flex-direction:column; gap:14px; min-width:0}
.search{width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{min-height:34px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px; font-weight:500; cursor:pointer}
.chip.on{background:var(--yellow); color:var(--yellow-ink); border-color:var(--yellow-ink); font-weight:600}
.cat{margin:6px 0 2px}
.cards{display:flex; flex-direction:column; gap:8px}
.dish{display:block; text-decoration:none; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
.dish:hover{border-color:var(--muted)}
.dish.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 4px 0 0 var(--accent)}
.dish .row{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.dish .name{font-weight:600}
.dish .sum{font-size:13px; color:var(--muted); margin-top:2px}
.dish .pr{font-variant-numeric:tabular-nums; font-weight:600; font-size:14px; white-space:nowrap}
.empty{padding:18px; border:1px dashed var(--line); border-radius:10px; color:var(--muted)}

.sheet{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; min-width:0}
.detail{min-width:0; display:flex; flex-direction:column; gap:16px}
.detail h2{font-size:30px}
.titlerow{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.price{font-family:var(--font-display); font-size:28px; font-weight:400; white-space:nowrap; background:var(--yellow); color:var(--yellow-ink); border:2px solid var(--yellow-ink); border-radius:10px; padding:2px 12px}
.back{display:none; align-self:flex-start; padding:8px 0; font-weight:600; text-decoration:none; color:var(--muted)}
.note{background:var(--surface-2); border-radius:10px; padding:10px 14px; font-size:14px}
.block{display:flex; flex-direction:column; gap:10px}
.hd{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.block h3,.sheet h3{font-size:18px}
.choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px}
.field{display:flex; flex-direction:column; gap:4px; min-width:0}
.field label,.flabel{font-size:12px; font-weight:600; color:var(--muted)}
select,.txt,textarea{min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit; width:100%}
textarea{min-height:120px; resize:vertical}
.warnmsg{margin:0; font-size:13px; color:var(--warn); background:var(--warn-bg); padding:8px 12px; border-radius:8px}
.prog{height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.prog i{display:block; height:100%; background:var(--herb)}
.progtxt{font-size:13px; color:var(--muted)}
.btn{min-height:40px; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit; font-weight:600; font-size:14px; cursor:pointer}
.btn.primary{background:var(--accent); border:2px solid var(--outline); color:var(--accent-ink); box-shadow:0 3px 0 var(--outline); font-family:var(--font-display); font-weight:400; font-size:16px; letter-spacing:.02em}
.btn.primary:active{transform:translateY(2px); box-shadow:0 1px 0 var(--outline)}
.btn.danger{color:var(--bad); border-color:var(--bad)}
.btn:disabled{opacity:.5; cursor:default}
.btnrow{display:flex; gap:8px; flex-wrap:wrap}
ul.build{list-style:none; margin:0; padding:0}
.line{display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line label{display:flex; align-items:center; gap:12px; flex:1; min-width:0; padding:12px 0; cursor:pointer; flex-wrap:wrap}
.line input[type=checkbox]{width:24px; height:24px; accent-color:var(--herb); flex:none; margin:0}
.line .nm{font-weight:500}
.line.done .nm{text-decoration:line-through; color:var(--muted)}
.line.sub{padding:6px 0 6px 36px; font-size:13px; color:var(--muted)}
.qty{font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; background:var(--surface-2); border-radius:6px; padding:2px 8px}
.tbc{font-size:11px; font-weight:600; color:var(--warn); background:var(--warn-bg); border-radius:6px; padding:2px 6px}
.lc{font-variant-numeric:tabular-nums; font-size:13px; color:var(--muted)}
.ready{margin:0; font-weight:600; color:var(--good)}
ol.steps{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px}

/* manager */
.tblwrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:left; padding:8px 10px; white-space:nowrap}
td{padding:9px 10px; border-top:1px solid var(--line); vertical-align:middle}
th.r,td.r{text-align:right}
td.n{font-weight:500}
tr.tot td{font-weight:700}
.pill{display:inline-block; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap}
.pill.good{background:var(--good-bg); color:var(--good)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.bad{background:var(--bad-bg); color:var(--bad)}
.pill.na{background:var(--surface-2); color:var(--muted)}
.money{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:0 8px; min-height:38px}
.money input{border:0; background:transparent; color:var(--ink); font:inherit; width:76px; padding:6px 2px; text-align:right; font-variant-numeric:tabular-nums}
.money input:focus-visible{outline:none}
.money:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.pctbox input{width:48px}
.kpis{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:flex-end}
.kpi{display:flex; flex-direction:column; gap:2px}
.kpi b{font-family:var(--font-display); font-size:24px; font-weight:400}
.kpi span.l{font-size:12px; color:var(--muted)}
.stack{display:flex; flex-direction:column; gap:16px}
.costs-grid{display:flex; flex-direction:column; gap:20px; margin-top:20px}
.grp td{background:var(--surface-2); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.hint{font-size:12px; color:var(--muted)}
.cell{min-height:38px; padding:6px 8px}
.ing{min-width:520px}
.ing td{padding:6px 6px}
.ing .q{width:80px}
.ing .u{width:90px}
.links{display:flex; flex-wrap:wrap; gap:6px}
.links a{font-size:13px; padding:4px 10px; border-radius:999px; background:var(--surface-2); text-decoration:none}
.editrow{display:grid; grid-template-columns:minmax(0,1fr) 90px 90px auto; gap:8px; align-items:center}
.editrow.item{grid-template-columns:minmax(0,1fr) 90px auto}
.chbox{border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:10px}
.check{display:flex; align-items:center; gap:8px; font-size:14px}
.check input{width:20px; height:20px; accent-color:var(--herb)}

/* quiz */
.quiz{max-width:760px; margin:20px auto 0; display:flex; flex-direction:column; gap:16px}
.qgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px}
.qchip{min-height:48px; padding:8px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-weight:500; cursor:pointer; text-align:left}
.qchip.on{border-color:var(--herb); background:var(--herb-soft)}
.qchip.ok{border-color:var(--good); background:var(--good-bg)}
.qchip.no{border-color:var(--bad); background:var(--bad-bg)}
.qchip.miss{border-color:var(--warn); background:var(--warn-bg)}
.verdict{margin:0; font-weight:600}
.verdict.good{color:var(--good)}
.verdict.bad{color:var(--bad)}
.foot{margin-top:32px; font-size:13px; color:var(--muted)}

@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .layout.has-detail .list{display:none}
  .layout:not(.has-detail) .detail{display:none}
  .back{display:inline-block}
  .detail h2{font-size:26px}
  .sheet{padding:16px}
  .editrow{grid-template-columns:minmax(0,1fr) 80px 80px}
  .editrow > .btn{grid-column:1 / -1}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}

.txt.pin{text-align:center; font-size:28px; letter-spacing:.4em; font-family:var(--display, inherit)}
.ing-add{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.ing-add .field{flex:1 1 150px; min-width:0}
.ing-add .field:first-child{flex:2 1 220px}
select.cell{width:100%; min-height:38px; margin-bottom:4px}
td select.cell.u{width:auto; min-width:76px}
.costcard{border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; background:var(--surface)}
.costcard .hd{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.costcard .block{margin:0}
.costcard .block > h3{display:none}