:root{
  --bg:#121212; --panel:#1c1c1c; --panel2:#242424; --line:#333;
  --text:#f2f2f2; --muted:#9a9a9a; --accent:#e07b39; --accent2:#c96a2a;
  --ok:#4caf50; --danger:#e05a5a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line);
  padding-top:calc(12px + env(safe-area-inset-top));
}
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{font-size:26px}
.brand h1{font-size:20px; font-weight:700; letter-spacing:.3px}

/* Buttons */
.btn{
  border:1px solid var(--line); background:var(--panel2); color:var(--text);
  padding:9px 14px; border-radius:9px; font-size:14px; cursor:pointer;
  transition:background .15s;
}
.btn:hover{background:#2e2e2e}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.btn.primary:hover{background:var(--accent2)}
.btn.ghost{background:transparent; border-style:dashed}
.btn.danger{background:transparent; border-color:var(--danger); color:var(--danger)}
.icon-btn{background:none;border:none;color:var(--text);font-size:26px;cursor:pointer;line-height:1}

/* Toolbar */
.toolbar{padding:12px 16px; display:flex; flex-direction:column; gap:10px}
#search{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); font-size:15px;
}
#search:focus{outline:none; border-color:var(--accent)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  padding:6px 12px; border-radius:20px; border:1px solid var(--line);
  background:var(--panel2); color:var(--muted); font-size:13px; cursor:pointer;
}
.chip.active{background:var(--accent); border-color:var(--accent); color:#fff}

/* Grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; padding:0 16px 24px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; cursor:pointer; transition:transform .12s, border-color .12s;
}
.card:hover{transform:translateY(-2px); border-color:var(--accent)}
.card img{width:100%; height:150px; object-fit:cover; background:var(--panel2)}
.card .noimg{width:100%; height:150px; display:flex; align-items:center; justify-content:center; font-size:40px; background:var(--panel2)}
.card .body{padding:12px}
.card h3{font-size:16px; margin-bottom:4px}
.card .meta{font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap}
.card .cat{display:inline-block; margin-top:8px; font-size:11px; color:var(--accent);
  border:1px solid var(--accent); padding:2px 8px; border-radius:12px}
.empty{padding:60px 20px; text-align:center; color:var(--muted)}

/* Detail */
.detail{max-width:760px; margin:0 auto; padding:0 16px 40px}
.detail .back{background:none;border:none;color:var(--accent);font-size:15px;cursor:pointer;padding:12px 0}
.detail img.hero{width:100%; max-height:340px; object-fit:cover; border-radius:12px; margin-bottom:16px}
.detail h2{font-size:26px; margin-bottom:6px}
.detail .desc{color:var(--muted); margin-bottom:12px}
.detail .meta{display:flex; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--muted); margin-bottom:16px}
.detail .meta b{color:var(--text)}
.detail .tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.detail .tag{font-size:12px; background:var(--panel2); border:1px solid var(--line); padding:3px 10px; border-radius:12px; color:var(--muted)}
.detail .dbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.section{margin:22px 0 10px; font-size:18px; color:var(--accent); border-bottom:1px solid var(--line); padding-bottom:6px}
table.ing{width:100%; border-collapse:collapse; margin-bottom:8px}
table.ing td{padding:6px 8px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top}
table.ing td.amt{text-align:right; white-space:nowrap; color:var(--text)}
table.ing td.unit{white-space:nowrap; color:var(--muted)}
table.ing td.note{color:var(--muted); font-size:12px}
ol.steps{list-style:none; counter-reset:step; margin:8px 0}
ol.steps li{counter-increment:step; position:relative; padding:8px 0 8px 40px; font-size:15px; line-height:1.5}
ol.steps li::before{content:counter(step); position:absolute; left:0; top:8px; width:26px; height:26px;
  background:var(--accent); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600}
.detail .src{color:var(--muted); font-size:12px; margin-top:20px}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:50; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:20px}
.modal-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; width:100%; max-width:640px; margin:auto}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line)}
.modal-head h2{font-size:18px}
.form{padding:20px; display:flex; flex-direction:column; gap:14px}
.form label{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--muted)}
.form input,.form textarea,.form select{
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  padding:10px 12px; border-radius:8px; font-size:14px; font-family:inherit;
}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--accent)}
.form textarea{resize:vertical}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.form h3{font-size:15px; color:var(--accent); margin-top:6px; border-bottom:1px solid var(--line); padding-bottom:6px}
.ing-row,.step-row{display:flex; gap:8px; margin-bottom:8px; align-items:center}
.ing-row input,.step-row input{flex:1}
.ing-row .unit{max-width:70px}
.ing-row .note{max-width:120px}
.ing-row .rm,.step-row .rm{background:none;border:none;color:var(--danger);font-size:20px;cursor:pointer}
.step-row input{flex:1}
.imgrow{display:flex; flex-direction:column; gap:8px}
.preview{max-width:160px; border-radius:8px; border:1px solid var(--line)}
.form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:8px}

/* Print */
@media print{
  .topbar,.toolbar,.dbar,.back,.modal{display:none!important}
  body{background:#fff;color:#000}
  .detail{max-width:100%; padding:0}
  .detail img.hero{max-height:200px}
  table.ing td{border-color:#ccc}
  ol.steps li::before{background:#000}
  .section{color:#000;border-color:#ccc}
}