:root {
  --bg: #f5f4ef;
  --surface: #ffffff;
  --text: #1c241f;
  --muted: #66706a;
  --accent: #315c45;
  --accent-2: #dfe9e2;
  --line: #e3e5e1;
  --shadow: 0 10px 30px rgba(20, 35, 27, .08);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,Segoe UI,Arial,sans-serif; }
button,input,select { font:inherit; }
.shell { width:min(1120px, calc(100% - 32px)); margin:0 auto; }
.hero { padding:56px 0 36px; background:linear-gradient(145deg,#eef3ef,#f8f6ef); border-bottom:1px solid var(--line); }
.eyebrow { font-size:.75rem; letter-spacing:.18em; font-weight:800; color:var(--accent); }
h1 { margin:.3rem 0 .25rem; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.5rem,7vw,4.8rem); line-height:1; }
.hero p { color:var(--muted); margin:0 0 24px; }
.search-wrap input { width:100%; max-width:680px; border:1px solid var(--line); padding:15px 18px; border-radius:14px; background:#fff; box-shadow:var(--shadow); outline:none; }
.controls { display:flex; gap:12px; justify-content:space-between; align-items:center; margin:28px 0; flex-wrap:wrap; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip,.secondary,select { border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:9px 13px; cursor:pointer; }
.chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
select { border-radius:12px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:0 0 18px; }
h2 { margin:0; font-size:1.7rem; }
.section-heading p { margin:4px 0 0; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-bottom:64px; }
.card { text-align:left; width:100%; border:1px solid var(--line); border-radius:20px; background:var(--surface); overflow:hidden; padding:0; color:inherit; box-shadow:0 2px 10px rgba(20,35,27,.03); cursor:pointer; transition:.18s ease; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.card-image { aspect-ratio:16/10; display:grid; place-items:center; background:linear-gradient(135deg,#dfe9e2,#f3eadf); color:var(--accent); font-weight:800; }
.card-image.has-image { background-size:cover; background-position:center; }
.card-image.has-image span { display:none; }
.card-body { padding:18px; }
.card-topline { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.status { color:var(--muted); }
.card h3 { margin:9px 0 8px; font-size:1.15rem; }
.description { color:var(--muted); line-height:1.45; font-size:.91rem; min-height:2.7em; }
.macro-row,.tag-row { display:flex; gap:7px; flex-wrap:wrap; margin-top:13px; }
.macro-row span,.tag-row span { font-size:.76rem; padding:6px 8px; border-radius:8px; background:#f4f5f2; color:#4d5851; }
.tag-row span { background:var(--accent-2); color:var(--accent); }
dialog { width:min(880px, calc(100% - 24px)); max-height:92vh; border:0; border-radius:22px; padding:0; box-shadow:0 30px 80px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(16,24,20,.55); backdrop-filter:blur(3px); }
.close { position:sticky; float:right; top:14px; right:14px; z-index:2; border:0; background:#fff; width:42px; height:42px; border-radius:50%; box-shadow:var(--shadow); font-size:1.5rem; cursor:pointer; margin:14px; }
.detail { padding:38px 42px 46px; }
.detail .kicker { color:var(--accent); text-transform:uppercase; font-size:.75rem; font-weight:800; letter-spacing:.1em; }
.detail h2 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,6vw,3.3rem); margin:.35rem 0 .6rem; }
.detail .lead { color:var(--muted); line-height:1.6; }
.detail-meta { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.detail-meta span { background:#f4f5f2; border-radius:10px; padding:9px 11px; font-size:.85rem; }
.detail-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:38px; margin-top:26px; }
.detail h3 { margin:0 0 12px; }
ul,ol { padding-left:20px; }
li { margin:.55rem 0; line-height:1.5; }
.source, .notes { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
a { color:var(--accent); }
.empty { grid-column:1/-1; padding:60px 20px; text-align:center; color:var(--muted); }
@media (max-width:850px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .hero{padding-top:38px}.shell{width:min(100% - 22px,1120px)} .grid{grid-template-columns:1fr;gap:14px}.section-heading{align-items:center}.detail{padding:30px 22px 34px}.detail-grid{grid-template-columns:1fr;gap:24px}.secondary{white-space:nowrap}.controls{align-items:stretch}.controls select{width:100%;} }

/* V2: recipe editor */
.hero-row { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; }
.primary { border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:12px; padding:11px 16px; cursor:pointer; font-weight:700; }
.primary:hover { filter:brightness(.96); }
.add-recipe { margin-bottom:24px; white-space:nowrap; }
.section-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.detail-toolbar { display:flex; justify-content:flex-end; margin:-4px 0 8px; }
.editor-dialog { width:min(980px, calc(100% - 24px)); }
.editor-form { padding:36px 42px 42px; }
.editor-heading { margin-bottom:24px; }
.editor-heading h2 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,5vw,3rem); margin:.35rem 0 .4rem; }
.editor-heading p { margin:0; color:var(--muted); }
.editor-form label { display:flex; flex-direction:column; gap:7px; min-width:0; }
.editor-form label > span { font-size:.79rem; font-weight:800; color:#475249; }
.editor-form input,.editor-form textarea,.editor-form select { width:100%; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:11px; padding:11px 12px; outline:none; }
.editor-form textarea { resize:vertical; min-height:76px; line-height:1.45; }
.editor-form input:focus,.editor-form textarea:focus,.editor-form select:focus,.search-wrap input:focus { border-color:#8da99a; box-shadow:0 0 0 3px rgba(49,92,69,.10); }
.form-grid { display:grid; gap:14px; margin-bottom:16px; }
.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.editor-form > label { margin-bottom:16px; }
.form-section { border-top:1px solid var(--line); padding-top:18px; margin-top:8px; }
.form-section h3 { margin:0 0 14px; }
.form-section h3 small { font-weight:400; color:var(--muted); font-size:.75rem; }
.form-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:22px; margin-top:10px; border-top:1px solid var(--line); }
.form-actions-right { display:flex; gap:9px; margin-left:auto; }
.danger { border:1px solid #c9a4a0; background:#fff7f6; color:#8b3831; border-radius:12px; padding:10px 14px; cursor:pointer; }
.hidden { display:none !important; }
.empty-add { margin-top:18px; }
@media (max-width:700px){
  .hero-row { align-items:flex-start; flex-direction:column; gap:0; }
  .add-recipe { width:100%; margin:0 0 20px; }
  .editor-form { padding:30px 20px 28px; }
  .form-grid.two,.form-grid.four { grid-template-columns:1fr; }
  .form-grid { gap:12px; }
  .form-actions { align-items:stretch; flex-direction:column-reverse; }
  .form-actions-right { width:100%; margin:0; display:grid; grid-template-columns:1fr 1fr; }
  .danger { width:100%; }
  .section-heading { align-items:flex-end; }
  .section-actions { max-width:58%; }
}

/* V3: cleaner actions + recipe importer */
.hero-actions { display:flex; gap:10px; align-items:center; margin-bottom:24px; }
.hero-actions .add-recipe { margin:0; }
.card-image.placeholder { position:relative; }
.card-image.placeholder > span.plate-mark {
  width:58px; height:58px; border:2px solid rgba(49,92,69,.38); border-radius:50%;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
.card-image.placeholder > span.plate-mark::after {
  content:""; position:absolute; inset:9px; border:1px solid rgba(49,92,69,.24); border-radius:50%;
}
.import-dialog { width:min(760px, calc(100% - 24px)); }
.import-form { padding:36px 42px 42px; }
.import-form label { display:flex; flex-direction:column; gap:7px; }
.import-form label > span { font-size:.79rem; font-weight:800; color:#475249; }
.import-form input,.import-form textarea { width:100%; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:11px; padding:11px 12px; outline:none; }
.import-form textarea { resize:vertical; line-height:1.5; }
.import-form input:focus,.import-form textarea:focus { border-color:#8da99a; box-shadow:0 0 0 3px rgba(49,92,69,.10); }
.import-tabs { display:flex; gap:8px; margin:0 0 20px; border-bottom:1px solid var(--line); padding-bottom:10px; }
.import-tab { border:0; background:transparent; padding:8px 12px; border-radius:999px; color:var(--muted); font-weight:800; cursor:pointer; }
.import-tab.active { background:var(--green); color:#fff; }
.import-panel { display:grid; gap:14px; }
.import-hint,.import-status { color:var(--muted); font-size:.9rem; line-height:1.5; margin:0; }
.import-status:empty { display:none; }

@media (max-width:680px){
  .hero-actions { width:100%; margin:0 0 20px; }
  .hero-actions .add-recipe { flex:1; width:auto; }
  .import-form { padding:30px 20px 28px; }
}

/* V4: social links, nutrition summary, generator */
.import-tab.active { background:var(--accent); }
.macro-editor h4 { margin:10px 0 10px; font-size:.9rem; color:#475249; }
.macro-heading-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:4px; }
.form-help { margin:0 0 16px; color:var(--muted); font-size:.88rem; line-height:1.45; }
.nutrition-section { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0 8px; }
.nutrition-section > div { border:1px solid var(--line); background:#fafbf9; border-radius:16px; padding:16px; }
.nutrition-section h3 { margin:0 0 12px; font-size:.95rem; }
.macro-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.macro-summary > div { background:#fff; border:1px solid var(--line); border-radius:11px; padding:10px; }
.macro-summary span { display:block; color:var(--muted); font-size:.72rem; margin-bottom:4px; }
.macro-summary strong { font-size:.95rem; }
.source-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.source-links a { border:1px solid var(--line); background:#fff; padding:8px 10px; border-radius:999px; text-decoration:none; font-size:.82rem; }
.generator-grid { margin-top:4px; }
.generator-preview { white-space:pre-wrap; background:#f7f8f5; border:1px solid var(--line); border-radius:12px; padding:14px; min-height:92px; color:#4d5851; line-height:1.5; font-size:.9rem; margin:16px 0 12px; }
.generator-actions { display:flex; justify-content:flex-end; gap:9px; }

@media (max-width:700px){
  .nutrition-section { grid-template-columns:1fr; }
  .macro-summary { grid-template-columns:repeat(2,1fr); }
  .macro-heading-row { align-items:flex-start; flex-direction:column; }
  .generator-actions { display:grid; grid-template-columns:1fr 1fr; }
  .hero-actions { flex-wrap:wrap; }
  .hero-actions .add-recipe { min-width:30%; }
}

/* V5: category artwork + photo upload + fiber */
.category-art { position:relative; overflow:hidden; background:linear-gradient(135deg,#dfe9e2,#f3eadf); }
.category-art::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.5),transparent 36%); }
.category-art[data-category="Breakfast"] { background:linear-gradient(135deg,#f4ead0,#e3ede4); }
.category-art[data-category="Lunch"],.category-art[data-category="Salad"] { background:linear-gradient(135deg,#dbe9dc,#edf1df); }
.category-art[data-category="Dinner"] { background:linear-gradient(135deg,#dce6e1,#eee4d8); }
.category-art[data-category="Dessert"] { background:linear-gradient(135deg,#efe2df,#f4ecd9); }
.category-art[data-category="Soup"],.category-art[data-category="Sauce"] { background:linear-gradient(135deg,#e9dfd2,#e1ebe4); }
.category-art[data-category="Snack"],.category-art[data-category="Appetizer"] { background:linear-gradient(135deg,#ebe6d6,#dfe9e4); }
.category-art[data-category="Bread"] { background:linear-gradient(135deg,#eee0ca,#e8ebe0); }
.category-art[data-category="Drink"] { background:linear-gradient(135deg,#dcebea,#e9e4ee); }
.category-art-icon { position:relative; z-index:1; font-size:3.25rem; line-height:1; filter:saturate(.7); }
.category-art-label { position:absolute; z-index:1; left:16px; bottom:14px; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:900; color:rgba(49,92,69,.72); }
.card-image.has-image::before,.image-preview.has-image::before { display:none; }
.image-editor-section { margin-bottom:18px; }
.image-editor-row { display:grid; grid-template-columns:220px 1fr; gap:18px; align-items:center; }
.image-preview { height:138px; border:1px solid var(--line); border-radius:16px; display:grid; place-items:center; background-size:cover; background-position:center; }
.image-editor-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.image-editor-actions small { width:100%; color:var(--muted); line-height:1.4; }
.upload-button { display:inline-flex !important; width:auto !important; cursor:pointer; }
.upload-button > span { display:inline-block; border:1px solid var(--accent); background:var(--accent); color:#fff !important; border-radius:12px; padding:11px 16px; font-size:.86rem !important; }
.upload-button input { display:none; }
.macro-editor .form-grid.four { grid-template-columns:repeat(5,minmax(0,1fr)); }
.macro-summary { grid-template-columns:repeat(5,1fr); }
@media (max-width:700px){
  .image-editor-row { grid-template-columns:1fr; }
  .image-preview { height:190px; }
  .macro-editor .form-grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .macro-summary { grid-template-columns:repeat(2,1fr); }
}

/* V6: single Add menu + automated recipe generation */
.add-menu-dialog { width:min(660px, calc(100% - 24px)); }
.add-menu-content { padding:30px; }
.add-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.add-choice { text-align:left; border:1px solid var(--line); background:#fff; border-radius:16px; padding:20px; min-height:132px; cursor:pointer; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; color:inherit; }
.add-choice:hover { transform:translateY(-2px); border-color:#aebfb3; box-shadow:0 10px 24px rgba(28,48,37,.08); }
.add-choice .choice-icon { display:block; font-size:1.45rem; margin-bottom:12px; }
.add-choice strong { display:block; font-family:Georgia,serif; font-size:1.13rem; margin-bottom:5px; }
.add-choice small { color:#65716a; font-size:.88rem; }
.generator-actions .primary[disabled] { opacity:.65; cursor:wait; }
@media (max-width:620px){
  .add-menu-content { padding:24px 18px 18px; }
  .add-choice-grid { grid-template-columns:1fr; }
  .add-choice { min-height:104px; padding:16px 18px; }
}


/* V7: contrast, safer mobile dialogs, saved-link library */
button.secondary, .button-link, .add-choice, .chip, .source-links a {
  border-color: var(--accent) !important;
}
.secondary, .button-link { background:#fff; color:var(--accent); }
.button-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border:1px solid var(--accent); border-radius:999px; padding:10px 14px; font-weight:800; }
.add-choice { border:2px solid rgba(49,92,69,.72) !important; background:#fbfcfa; }
.add-choice:hover,.add-choice:focus-visible { border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(49,92,69,.10),0 10px 24px rgba(28,48,37,.08); }
.category-art { background:linear-gradient(135deg,#cbded1,#e5d8c7) !important; }
.category-art[data-category="Dessert"] { background:linear-gradient(135deg,#dfc8c1,#ead9b8) !important; }
.category-art[data-category="Breakfast"] { background:linear-gradient(135deg,#e5d39f,#c8dccb) !important; }
.category-art[data-category="Lunch"],.category-art[data-category="Salad"] { background:linear-gradient(135deg,#bcd6bf,#d9dfb8) !important; }
.category-art[data-category="Dinner"] { background:linear-gradient(135deg,#bdd2c8,#dcc7b3) !important; }
.category-art-icon { font-size:4rem; filter:saturate(1.15) contrast(1.08); text-shadow:0 2px 0 rgba(255,255,255,.35); }
.category-art-label { display:none !important; }
.saved-links-list { display:grid; gap:10px; }
.saved-link-item { border:1px solid var(--accent); border-radius:14px; padding:14px; display:flex; gap:14px; align-items:center; justify-content:space-between; background:#fbfcfa; }
.saved-link-item > div { min-width:0; display:grid; gap:5px; }
.saved-link-item a { color:var(--accent); overflow-wrap:anywhere; font-size:.86rem; }
.compact-empty { padding:28px; }
dialog { max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; }
dialog .close { position:sticky; top:8px; float:right; z-index:20; background:#fff; border:2px solid var(--accent); color:var(--accent); }
@media (max-width:700px){
  dialog, .editor-dialog, .import-dialog, .add-menu-dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); margin:auto; }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .hero-actions .add-recipe { grid-column:1/-1; width:100%; }
  .saved-link-item { align-items:flex-start; flex-direction:column; }
  .saved-link-item .delete-link { width:100%; }
}


/* V7.2.1 — recipe cards are visibly tappable at all times */
.card {
  border: 2px solid var(--accent) !important;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(49, 92, 69, 0.12);
}

.card:active {
  transform: scale(0.992);
  box-shadow: 0 2px 8px rgba(28, 48, 37, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: var(--accent) !important;
  }
}


/* V7.2.2 — remove inconsistent white strip above recipe artwork */
.card {
  padding-top: 0 !important;
}

.card > .card-media,
.card > .category-art,
.card .card-media:first-child,
.card .category-art:first-child {
  margin-top: 0 !important;
  border-top-left-radius: calc(var(--radius, 18px) - 2px);
  border-top-right-radius: calc(var(--radius, 18px) - 2px);
}

/* Prevent first-child margins from collapsing into a visible white strip */
.card > :first-child {
  margin-top: 0 !important;
}


/* V7.2.3 — normalize the actual card image element in every render state */
.card > .card-image {
  display: grid !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

.card > .card-image.has-image {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-position: center !important;
  background-size: cover !important;
}


/* V7.2.4 — remove faux "white strip" from generic category artwork */
.card-image.category-art::before {
  display: none !important;
}


/* V7.3 — recipe cards are neutral containers, not native buttons */
.card {
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid var(--accent) !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  overflow: hidden !important;
  cursor: pointer;
  outline: none;
}

.card:focus-visible {
  box-shadow: 0 0 0 3px rgba(49,92,69,.16);
}

.card > .card-image {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-clip: border-box !important;
}

.card > .card-body {
  margin: 0 !important;
}


/* V8 shared/public-admin modes */
.public-mode .admin-only,
.public-mode #addMenuDialog,
.public-mode #editorDialog,
.public-mode #importDialog,
.public-mode #generatorDialog,
.public-mode #linkDialog {
  display: none !important;
}

.admin-mode .public-admin-link { display:none !important; }

.storage-status {
  margin: 3px 0 0;
  font-size: .78rem;
  color: var(--muted);
}
.storage-status.error { color:#9a3b32; }

@media (max-width:700px){
  .public-mode .hero-actions,
  .admin-mode .hero-actions {
    grid-template-columns:1fr 1fr;
  }
}


.admin-migration-note{
  margin-top:8px;
  max-width:720px;
  color:var(--muted);
  font-size:.9rem;
}


/* V8.2 admin login */
.login-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--bg);
}
.login-shell { width: min(460px, 100%); }
.login-card {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 22px;
  padding: clamp(24px, 6vw, 42px);
  box-shadow: 0 18px 50px rgba(28,48,37,.10);
}
.login-card h1 {
  margin: 4px 0 8px;
  font-family: var(--display);
  font-size: clamp(2.1rem, 8vw, 3.25rem);
}
.login-card > p { color: var(--muted); margin-bottom: 24px; }
.login-card form { display: grid; gap: 14px; }
.login-card label { display:grid; gap:7px; font-weight:800; }
.login-card input {
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(49,92,69,.35);
  border-radius:12px;
  padding:13px 14px;
  font:inherit;
}
.login-card input:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(49,92,69,.10);
}
.login-submit { width:100%; }
.login-error { min-height:1.3em; color:#9a3b32; margin:0; font-size:.9rem; }
.login-back {
  display:inline-block;
  margin-top:20px;
  color:var(--accent);
  font-weight:800;
  text-decoration:none;
}


/* V8.2.1 public read-only hardening */
body.public-mode .admin-only,
body.public-mode .detail-toolbar,
body.public-mode #editCurrentBtn,
body.public-mode #deleteRecipeBtn,
body.public-mode #addRecipeBtn,
body.public-mode #exportBtn,
body.public-mode #importBackupBtn {
  display: none !important;
}