:root{
    --bg:#fffdfb;
    --bg-soft:#fff7ed;
    --surface:#ffffff;
    --surface-2:#fffaf5;
    --border:#f1e2d3;
    --border-strong:#e8d5c0;
    --text:#201a17;
    --text-2:#6b5d52;
    --text-3:#9a8a7e;
    --accent:#e85d04;
    --accent-2:#f48c06;
    --accent-soft:#ffedd5;
    --accent-soft-2:#fff1e0;
    --green:#15803d;
    --green-bg:#dcfce7;
    --chip-bg:#fff7ed;
    --shadow:0 4px 20px rgba(232,93,4,.08), 0 1px 3px rgba(0,0,0,.06);
    --shadow-hover:0 10px 28px rgba(232,93,4,.14), 0 2px 6px rgba(0,0,0,.06);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#181210;
      --bg-soft:#241a16;
      --surface:#221a17;
      --surface-2:#2a201c;
      --border:#3d2f28;
      --border-strong:#4a382f;
      --text:#fef3e8;
      --text-2:#cbb8a8;
      --text-3:#9c8777;
      --accent:#fb923c;
      --accent-2:#fdba74;
      --accent-soft:#3b2312;
      --accent-soft-2:#2f2018;
      --green:#86efac;
      --green-bg:#14532d;
      --chip-bg:#2a201c;
      --shadow:0 4px 20px rgba(0,0,0,.35);
      --shadow-hover:0 10px 28px rgba(0,0,0,.45);
      color-scheme: dark;
    }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  button,input,select{touch-action:manipulation}
  .wrap{max-width:1120px;margin:0 auto;padding:0 16px 48px}
  /* Header */
  .hero{padding:22px 0 6px}
  .hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
  .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 10px;border-radius:999px;border:1px solid var(--border)}
  .badge-proto{background:var(--accent);color:#fff;border-color:transparent}
  .badge-count{background:var(--surface);color:var(--text-2)}
  .badge-count strong{color:var(--text);font-size:13px}
  h1{font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:2px 0 8px}
  h1 span{color:var(--accent)}
  @media(min-width:640px){h1{font-size:36px}}
  .lead{font-size:15px;color:var(--text-2);max-width:720px;margin:0}
  .lead strong{color:var(--text)}
  /* Controls - sticky */
  .controls{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:14px 0 12px;margin-top:14px;border-bottom:1px solid var(--border)}
  .search-row{display:flex;gap:10px;flex-wrap:wrap}
  .search-form{display:flex;gap:8px;flex:1 1 340px;min-width:0;margin:0}
  .search-box{flex:1 1 auto;min-width:0;position:relative}
  .search-btn{flex:0 0 auto;height:52px;min-width:76px;padding:0 20px;border:0;border-radius:14px;background:var(--accent);color:#fff;font-size:16px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .search-btn:active{opacity:.85}
  @media(prefers-color-scheme: dark){.search-btn{color:#1a0e02}}
  .search-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--text-3);pointer-events:none}
  .search-box input{width:100%;height:52px;padding:0 44px 0 42px;border-radius:14px;border:1.5px solid var(--border-strong);background:var(--surface);font-size:16px;color:var(--text);outline:none;transition:.15s}
  .search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
  .search-box input::placeholder{color:var(--text-3)}
  .search-box input::-webkit-search-cancel-button,.search-box input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
  .clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:999px;border:0;background:var(--bg-soft);color:var(--text-2);font-size:18px;line-height:1;display:none;cursor:pointer;align-items:center;justify-content:center}
  .clear-btn.visible{display:flex}
  .sort-wrap{flex:0 0 auto;display:flex;gap:8px;align-items:stretch}
  .sort-wrap label{font-size:12px;font-weight:700;color:var(--text-2);align-self:center;white-space:nowrap}
  select.sort{height:52px;border-radius:14px;border:1.5px solid var(--border-strong);background:var(--surface);padding:0 12px;font-size:14px;font-weight:600;color:var(--text);outline:none;cursor:pointer;min-width:160px}
  select.sort:focus{border-color:var(--accent)}
  .filter-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
  .filter-label::after{content:"";flex:1;height:1px;background:var(--border)}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{appearance:none;border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s;line-height:1}
  .chip small{font-size:11px;font-weight:700;background:var(--bg-soft);border:1px solid var(--border);padding:2px 6px;border-radius:999px;color:var(--text-3)}
  .chip:hover{border-color:var(--accent-2);color:var(--text)}
  .chip.active{background:var(--text);color:var(--bg);border-color:var(--text)}
  .chip.active small{background:rgba(255,255,255,.18);border-color:transparent;color:inherit}
  @media(prefers-color-scheme: dark){.chip.active{background:var(--accent);border-color:var(--accent);color:#1a0e02} .chip.active small{background:rgba(0,0,0,.18);color:#1a0e02}}
  .chip-kcal.active{background:var(--accent);border-color:var(--accent);color:#fff}
  .chip-kcal.active small{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
  /* Info box */
  .info-box{margin-top:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;gap:12px}
  .info-box-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:18px}
  .info-box p{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.65}
  .info-box p strong{color:var(--text)}
  .info-box code{font-size:12.5px;background:var(--surface);border:1px solid var(--border);padding:1px 6px;border-radius:6px;font-family:ui-monospace,monospace}
  /* Results meta */
  .meta{margin:22px 0 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
  .meta-count{font-size:15px}
  .meta-count strong{font-size:22px;font-weight:800}
  .meta-sub{font-size:13px;color:var(--text-2)}
  .reset-link{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent);background:none;border:0;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
  /* Grid */
  .grid{display:grid;grid-template-columns:1fr;gap:14px}
  @media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
  @media(min-width:960px){.grid{grid-template-columns:1fr 1fr 1fr}}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);transition:transform .15s, box-shadow .15s, border-color .15s;text-decoration:none}
  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--border-strong)}
  .card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
  .cats{display:flex;flex-wrap:wrap;gap:6px}
  .cat{font-size:11.5px;font-weight:700;letter-spacing:.01em;padding:4px 8px;border-radius:999px;background:var(--accent-soft-2);border:1px solid var(--border);color:var(--accent);line-height:1}
  @media(prefers-color-scheme: dark){.cat{color:var(--accent-2)}}
  .date{font-size:12px;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:2px}
  .card h2{font-size:16.5px;line-height:1.45;font-weight:700;margin:0;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.45em * 2)}
  .nutrition{display:flex;flex-wrap:wrap;gap:8px}
  .nutri{flex:1 1 0;min-width:62px;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:8px 6px;text-align:center}
  .nutri b{display:block;font-size:15px;line-height:1.1;font-weight:800}
  .nutri span{display:block;font-size:11px;color:var(--text-2);font-weight:600;margin-top:2px}
  .nutri.kcal{background:var(--text);color:var(--bg);border-color:var(--text)}
  .nutri.kcal span{color:var(--text-3)}
  @media(prefers-color-scheme: dark){.nutri.kcal{background:var(--accent);color:#1a0e02;border-color:var(--accent)} .nutri.kcal span{color:#5c2e00}}
  .nutri-empty{font-size:12.5px;color:var(--text-3);background:var(--bg-soft);border:1px dashed var(--border-strong);border-radius:10px;padding:8px 10px;text-align:center}
  .ingredients{font-size:13px;color:var(--text-2);line-height:1.6}
  .ingredients-label{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--text-3);display:block;margin-bottom:3px}
  .ingredients p{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:10px}
  .open-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;background:var(--accent);padding:8px 12px;border-radius:999px;line-height:1}
  .card:hover .open-btn{background:#c75104}
  @media(prefers-color-scheme: dark){.open-btn{color:#1a0e02}}
  .empty{grid-column:1/-1;text-align:center;padding:48px 20px;background:var(--surface);border:1.5px dashed var(--border-strong);border-radius:18px}
  .empty strong{display:block;font-size:17px;margin-bottom:6px}
  .empty p{margin:0;color:var(--text-2);font-size:14px}
  .empty button{margin-top:14px;background:var(--text);color:var(--bg);border:0;padding:10px 16px;border-radius:999px;font-weight:700;cursor:pointer}
  /* Footer */
  .footer{margin-top:36px;border-top:1px solid var(--border);padding-top:18px}
  .footer p{font-size:12.5px;color:var(--text-2);line-height:1.7;margin:0 0 8px}
  .footer a{color:var(--accent);font-weight:600}
  .quick-ing{margin-top:12px}
  .quick-ing .chips{gap:6px}
  .quick-ing .chip{font-size:12.5px;padding:6px 10px}
  @media(max-width:560px){
    .sort-wrap{width:100%}
    select.sort{flex:1;width:100%}
    .controls{padding-top:10px}
    h1{font-size:28px}
    .card h2{min-height:auto}
  }
  /* Morning update line + NEW pill */
  .update-line{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-2);background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:9px 12px;max-width:720px}
  .update-dot{width:8px;height:8px;border-radius:999px;background:var(--green);flex-shrink:0}
  .card-top-right{display:inline-flex;align-items:center;gap:6px}
  .new-badge{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--accent);border-radius:999px;padding:3px 7px;line-height:1}
  @media(prefers-color-scheme: dark){.new-badge{color:#1a0e02}}
  /* reduced motion */
  @media(prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}