/* FoodNo1 轉一轉・選食材 — Joomla Phase 4 / 20260713a */
.fno1-ingredient-app,
.fno1-ingredient-app * { box-sizing: border-box; }
.fno1-ingredient-app {
  --fn-bg:#24170f;
  --fn-bg2:#1b110b;
  --fn-panel:#2e1d14;
  --fn-panel2:#3a281d;
  --fn-line:rgba(255,255,255,.11);
  --fn-text:#f7f1e8;
  --fn-muted:#d4c1aa;
  --fn-gold:#ffb51b;
  --fn-orange:#ff6b1a;
  --fn-dark:#281507;
  width:100%;
  max-width:1180px;
  margin:18px auto;
  color:var(--fn-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang HK","Microsoft JhengHei",Arial,sans-serif;
}
.fno1-ingredient-shell {
  overflow:hidden;
  border:1px solid var(--fn-line);
  border-radius:24px;
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(255,181,27,.14), transparent 60%),
    linear-gradient(145deg,var(--fn-bg),var(--fn-bg2));
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}
.fno1-ingredient-hero { padding:14px 14px 0; }
.fno1-ingredient-hero img {
  display:block;width:100%;height:auto;border-radius:17px;
  border:1px solid var(--fn-line);background:#eee;
}
.fno1-ingredient-heading { padding:16px 18px 4px; }
.fno1-ingredient-brand { color:var(--fn-muted);font-size:13px;font-weight:700; }
.fno1-ingredient-brand::before { content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--fn-gold);box-shadow:0 0 12px rgba(255,181,27,.7); }
.fno1-ingredient-heading h2 { margin:9px 0 7px;font-size:34px;line-height:1.12;font-weight:900;letter-spacing:.5px; }
.fno1-ingredient-heading h2 span { color:var(--fn-orange);margin-left:10px; }
.fno1-ingredient-heading p { margin:0;color:var(--fn-muted);font-size:14px;line-height:1.6; }
.fno1-ingredient-layout { display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;padding:14px;align-items:start; }
.fno1-ingredient-panel { border:1px solid var(--fn-line);border-radius:20px;background:rgba(255,255,255,.035);padding:14px; }
.fno1-ingredient-section-title { margin:0 0 10px;font-size:17px;font-weight:900; }
.fno1-ingredient-section-title span { color:var(--fn-orange); }
.fno1-ingredient-cats { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px; }
.fno1-ingredient-cat,
.fno1-ingredient-chip,
.fno1-ingredient-smallbtn,
.fno1-ingredient-share {
  appearance:none;border:1px solid var(--fn-line);cursor:pointer;font:inherit;
}
.fno1-ingredient-cat { padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.055);color:var(--fn-text);font-weight:800;font-size:14px; }
.fno1-ingredient-cat:hover,.fno1-ingredient-cat.is-active { background:linear-gradient(180deg,#ffc342,#f0a40f);color:var(--fn-dark);border-color:rgba(255,255,255,.25); }
.fno1-ingredient-search { width:100%;padding:13px 14px;border:1px solid var(--fn-line);border-radius:13px;background:rgba(255,255,255,.08);color:var(--fn-text);font-size:16px;outline:none; }
.fno1-ingredient-search::placeholder { color:rgba(255,255,255,.55); }
.fno1-ingredient-search:focus { border-color:var(--fn-gold);box-shadow:0 0 0 3px rgba(255,181,27,.14); }
.fno1-ingredient-actions { display:grid;grid-template-columns:1fr auto;gap:9px;margin:12px 0; }
.fno1-ingredient-primary,.fno1-ingredient-clear { min-height:50px;border-radius:14px;border:0;font:inherit;font-weight:900;cursor:pointer; }
.fno1-ingredient-primary { color:var(--fn-dark);background:linear-gradient(180deg,#ffc84d,#f2aa12);box-shadow:inset 0 1px rgba(255,255,255,.35),0 8px 20px rgba(0,0,0,.22);font-size:17px; }
.fno1-ingredient-clear { padding:0 18px;color:var(--fn-text);background:rgba(255,255,255,.08);border:1px solid var(--fn-line); }
.fno1-ingredient-pool { display:flex;flex-wrap:wrap;gap:7px;margin:0 0 13px; }
.fno1-ingredient-chip { padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.055);color:var(--fn-text);font-size:13px; }
.fno1-ingredient-chip:hover { border-color:var(--fn-gold); }
.fno1-ingredient-more { margin:0 0 13px; }
.fno1-ingredient-smallbtn { padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--fn-text);font-weight:800; }
.fno1-ingredient-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.fno1-ingredient-card { min-width:0;display:block;overflow:hidden;border:1px solid var(--fn-line);border-radius:16px;background:linear-gradient(180deg,var(--fn-panel2),var(--fn-panel));color:var(--fn-text);text-decoration:none;box-shadow:0 7px 18px rgba(0,0,0,.16); }
.fno1-ingredient-card:hover { transform:translateY(-1px);text-decoration:none; }
.fno1-ingredient-card img { display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#26180f; }
.fno1-ingredient-card strong { display:block;padding:10px 8px 12px;text-align:center;font-size:15px;line-height:1.35; }
.fno1-ingredient-empty { grid-column:1/-1;padding:20px;border-radius:14px;background:rgba(255,255,255,.05);color:var(--fn-muted);text-align:center; }
.fno1-ingredient-aside { display:grid;gap:12px; }
.fno1-ingredient-aside h3 { margin:0 0 10px;font-size:17px; }
.fno1-ingredient-aside h3 span { color:var(--fn-orange); }
.fno1-ingredient-result-list { list-style:none;margin:0;padding:0;display:grid;gap:8px; }
.fno1-ingredient-result-list li { display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px;border:1px solid var(--fn-line);border-radius:13px;background:rgba(0,0,0,.12); }
.fno1-ingredient-result-list img { width:44px;height:44px;object-fit:cover;border-radius:10px;background:#24170f; }
.fno1-ingredient-result-list strong { min-width:0;font-size:13px;line-height:1.35; }
.fno1-ingredient-result-list a { padding:7px 10px;border:1px solid var(--fn-line);border-radius:999px;color:var(--fn-text);text-decoration:none;font-size:12px;font-weight:800; }
.fno1-ingredient-toolbar { display:flex;gap:8px;flex-wrap:wrap;margin-top:11px; }
.fno1-ingredient-share { padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.07);color:var(--fn-text);font-weight:800;font-size:13px; }
.fno1-ingredient-status { display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--fn-line);color:var(--fn-muted);font-size:12px; }
.fno1-ingredient-source { margin-top:8px;color:var(--fn-muted);font-size:12px; }
.fno1-ingredient-source a { color:var(--fn-orange);text-decoration:none;font-weight:900; }
.fno1-ingredient-series__head { display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:9px; }
.fno1-ingredient-series__head strong { color:var(--fn-gold); }
.fno1-ingredient-series__head a { color:var(--fn-orange);text-decoration:none;font-size:12px;font-weight:900; }
.fno1-ingredient-series__grid { display:grid;gap:7px; }
.fno1-ingredient-series__item { display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid var(--fn-line);border-radius:12px;background:rgba(0,0,0,.12);color:var(--fn-text);text-decoration:none;font-size:12px; }
.fno1-ingredient-series__item span:last-child { color:var(--fn-muted);white-space:nowrap; }
.fno1-ingredient-toast { position:fixed;left:50%;bottom:24px;z-index:99999;transform:translateX(-50%);max-width:90vw;padding:10px 15px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(20,12,8,.94);color:white;font-weight:800;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.35); }
@media (max-width:900px){ .fno1-ingredient-layout{grid-template-columns:1fr}.fno1-ingredient-aside{grid-template-columns:1fr 1fr}.fno1-ingredient-aside .fno1-ingredient-panel:first-child{grid-column:1/-1} }
@media (max-width:640px){
  .fno1-ingredient-app{margin:10px auto}.fno1-ingredient-shell{border-radius:18px}.fno1-ingredient-hero{padding:8px 8px 0}.fno1-ingredient-heading{padding:13px 12px 2px}.fno1-ingredient-heading h2{font-size:28px}.fno1-ingredient-layout{padding:9px;gap:9px}.fno1-ingredient-panel{padding:10px;border-radius:16px}.fno1-ingredient-actions{grid-template-columns:1fr auto}.fno1-ingredient-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fno1-ingredient-card strong{font-size:13px;padding:8px 5px 10px}.fno1-ingredient-aside{grid-template-columns:1fr}.fno1-ingredient-cat{padding:8px 10px;font-size:13px}.fno1-ingredient-status{flex-direction:column;gap:3px}
}