:root {
    --bg: #f4f5f7;
    --panel: rgba(255, 255, 255, 0.72);
    --panel-strong: rgba(255, 255, 255, 0.95);
    --text: #121316;
    --muted: #5d6470;
    --border: rgba(15, 23, 42, 0.08);
    --shadow: 0 20px 45px rgba(10, 20, 40, 0.07);
    --accent: #3b82f6;
    --track: #dbe1ea;
    --input-bg: rgba(255, 255, 255, 0.8);
}

:root[data-theme='dark'] {
    --bg: #0f1115;
    --panel: rgba(30, 32, 39, 0.75);
    --panel-strong: rgba(22, 25, 32, 0.92);
    --text: #f3f5f8;
    --muted: #b8bfcc;
    --border: rgba(255, 255, 255, 0.08);
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    --accent: #7ab2ff;
    --track: #2b3342;
    --input-bg: rgba(255, 255, 255, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif; background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 55%), var(--bg); color: var(--text); min-height: 100vh; line-height: 1.5; padding: clamp(1rem, 3vw, 2.5rem); }
.bento-layout { max-width: 1000px; margin: 0 auto; display: grid; gap: clamp(0.8rem, 2vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.panel { background: var(--panel); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(1rem, 2.5vw, 1.8rem); display: flex; flex-direction: column; gap: 1rem; }
.panel-hero { grid-column: span 2; background: var(--panel-strong); }
.panel-hero h1 { font-size: clamp(1.65rem, 4vw, 2.5rem); letter-spacing: -0.03em; }
.eyebrow { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
h2 { font-size: 1.1rem; letter-spacing: -0.01em; }

.theme-switch {
    margin-left: auto;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.25rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.theme-switch:hover { border-color: var(--accent); }
.theme-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.switch-track { display: inline-flex; align-items: center; width: 3.4rem; height: 2rem; border-radius: 999px; background: var(--track); padding: 0.2rem; }
.switch-thumb { width: 1.55rem; height: 1.55rem; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,0.08); background-image: radial-gradient(circle at 40% 40%, #ffe785 34%, #f8b946 35%); transition: transform 0.22s ease, background-image 0.22s ease; }
:root[data-theme='dark'] .switch-thumb { transform: translateX(1.35rem); background-image: radial-gradient(circle at 35% 35%, #d9deff 32%, #8898ff 33%); }

.panel-search { gap: 0.75rem; }
#recipeSearch {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 0.85rem 1rem;
    background: var(--input-bg);
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#recipeSearch::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
#recipeSearch:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

.search-hint, .panel p, .recipe-card p { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.recipe-card a { text-decoration: none; color: inherit; }
.recipe-card { border-radius: 16px; border: 1px solid var(--border); padding: 1rem; background: rgba(255, 255, 255, 0.24); transition: transform 0.2s ease, border-color 0.2s ease; }
:root[data-theme='dark'] .recipe-card { background: rgba(255, 255, 255, 0.03); }
.recipe-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tag { font-size: 0.75rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.6rem; background: rgba(255, 255, 255, 0.45); }
@media (max-width: 760px) { .panel-hero { grid-column: span 1; } }