/* Le's Recipes — Warm Kitchen Journal */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Outfit:wght@300;400;500;600;700&display=swap');

:root,[data-theme="light"]{
    --bg:#faf7f2;--bg2:#fff;--bg3:#f3efe8;--tx:#2c1810;--tx2:#6b5545;--tx3:#a08878;
    --brd:#e8ddd0;--brd2:#f0e8dd;
    --acc:#c0392b;--acc2:#a93226;--accL:#fdf0ee;--accT:#fff;
    --warm:#e67e22;--warm2:#d35400;--warmL:#fef5ec;
    --grn:#27ae60;--red:#c0392b;--wrn:#f39c12;
    --s1:0 1px 4px rgba(44,24,16,.06);--s2:0 4px 16px rgba(44,24,16,.08);--s3:0 10px 30px rgba(44,24,16,.12);
    --nav:#2c1810;--navT:#d4b8a0;
    --card:#fff;--inp:#fff;--inpB:#d4c4b0;
    --r:12px;--rs:8px;--fr:0 0 0 3px rgba(192,57,43,.2);
    --glass:rgba(255,255,255,.7);--glassBrd:rgba(192,57,43,.1)
}
[data-theme="dark"]{
    --bg:#1a1210;--bg2:#241c18;--bg3:#2e2420;--tx:#ede4dc;--tx2:#a08878;--tx3:#6b5545;
    --brd:#3a2e28;--brd2:#2e2420;
    --acc:#e74c3c;--acc2:#f06050;--accL:#3a1a14;--accT:#fff;
    --warm:#f39c12;--warm2:#e67e22;--warmL:#3d2a14;
    --grn:#2ecc71;--red:#e74c3c;--wrn:#f1c40f;
    --s1:0 1px 4px rgba(0,0,0,.3);--s2:0 4px 16px rgba(0,0,0,.4);--s3:0 10px 30px rgba(0,0,0,.5);
    --nav:#140e0a;--navT:#a08878;
    --card:#241c18;--inp:#2e2420;--inpB:#4a3e36;
    --glass:rgba(36,28,24,.7);--glassBrd:rgba(255,255,255,.06)
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--tx);line-height:1.7;min-height:100vh}
a{color:var(--acc);text-decoration:none;transition:color .2s}a:hover{color:var(--acc2)}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif}
hr{border:none;border-top:1px solid var(--brd);margin:1.5rem 0}

/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* Navbar */
.navbar{background:var(--nav);color:var(--navT);padding:0 1.25rem;position:sticky;top:0;z-index:1000;box-shadow:var(--s2)}
.nav-container{max-width:1400px;margin:0 auto;display:flex;align-items:center;height:64px;gap:1.5rem}
.nav-brand{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:.55rem;white-space:nowrap}
.nav-brand .chef{font-size:1.5rem}
.nav-links{display:flex;align-items:center;gap:.3rem;flex:1}
.nav-link{color:var(--navT);padding:.5rem .8rem;border-radius:var(--rs);font-size:.88rem;transition:all .2s;display:flex;align-items:center;gap:.4rem;white-space:nowrap;font-weight:500}.nav-link:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:.5rem;min-width:48px;min-height:48px;align-items:center;justify-content:center}
.theme-toggle{background:none;border:1px solid rgba(255,255,255,.12);color:var(--navT);width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:.2s}.theme-toggle:hover{background:rgba(255,255,255,.1)}
[data-theme="light"] .theme-icon-light{display:none}[data-theme="dark"] .theme-icon-dark{display:none}
.nav-user-menu{position:relative}.nav-user-btn{background:none;border:1px solid rgba(255,255,255,.12);color:var(--navT);padding:.45rem .8rem;border-radius:var(--rs);cursor:pointer;display:flex;align-items:center;gap:.4rem;font-size:.86rem;min-height:42px;font-family:inherit;font-weight:500}.nav-user-btn:hover{background:rgba(255,255,255,.08)}
.nav-dropdown{display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--brd);border-radius:var(--rs);box-shadow:var(--s3);min-width:180px;z-index:1001;overflow:hidden}.nav-dropdown.open{display:block;animation:slideUp .2s ease}
.nav-dropdown a{display:flex;align-items:center;gap:.55rem;padding:.65rem 1rem;color:var(--tx);font-size:.9rem;min-height:44px;transition:.15s}.nav-dropdown a:hover{background:var(--bg3)}
.nav-search{position:relative}.nav-search input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#fff;padding:.35rem .75rem .35rem 2rem;border-radius:999px;font-size:.82rem;width:170px;font-family:inherit;transition:width .3s;min-height:36px}.nav-search input:focus{outline:none;width:250px;background:rgba(255,255,255,.15);border-color:var(--acc)}.nav-search input::placeholder{color:rgba(255,255,255,.35)}
.nav-search i{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.35);font-size:.78rem;pointer-events:none}

/* Layout */
.main-content{padding-bottom:2rem}.container{max-width:1200px;margin:0 auto;padding:1.5rem 1.25rem}.container-fluid{padding:1.25rem}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.page-header h1{font-size:1.55rem;font-weight:700}
.card{background:var(--card);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--s1);transition:all .25s}
.card:hover{box-shadow:var(--s2)}.card-body{padding:1.5rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.58rem 1.1rem;border:1px solid transparent;border-radius:var(--rs);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap;font-family:inherit;min-height:44px;line-height:1.4}
.btn-primary{background:var(--acc);color:var(--accT)}.btn-primary:hover{background:var(--acc2);color:var(--accT);transform:translateY(-1px);box-shadow:0 4px 12px rgba(192,57,43,.3)}
.btn-secondary{background:var(--bg3);color:var(--tx);border-color:var(--brd)}.btn-secondary:hover{background:var(--brd)}
.btn-warm{background:var(--warm);color:#fff}.btn-warm:hover{background:var(--warm2)}
.btn-danger{background:var(--red);color:#fff}
.btn-outline{background:transparent;color:var(--tx2);border-color:var(--brd)}.btn-outline:hover,.btn-outline.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn-ghost{background:none;border:none;color:var(--tx2);padding:.35rem}.btn-ghost:hover{color:var(--acc)}
.btn-sm{padding:.38rem .7rem;font-size:.82rem;min-height:36px}.btn-xs{padding:.28rem .55rem;font-size:.76rem;min-height:32px}.btn-lg{padding:.72rem 1.5rem;font-size:1rem;min-height:48px}.btn-block{width:100%;justify-content:center}

/* Forms */
.form-group{margin-bottom:1.1rem}.form-group label{display:block;font-size:.86rem;font-weight:600;color:var(--tx2);margin-bottom:.3rem}
.form-control{width:100%;padding:.6rem .8rem;border:1px solid var(--inpB);border-radius:var(--rs);background:var(--inp);color:var(--tx);font-size:1rem;font-family:inherit;transition:border-color .2s,box-shadow .2s;min-height:44px}.form-control:focus{outline:none;border-color:var(--acc);box-shadow:var(--fr)}
.form-control-sm{padding:.4rem .65rem;font-size:.86rem;min-height:38px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-actions{display:flex;gap:.7rem;margin-top:1.5rem}
.help-text{font-size:.8rem;color:var(--tx3);margin-top:.2rem;display:block}
.toggle-row{display:flex;align-items:center;gap:.7rem;padding:.5rem 0}
.toggle-switch{position:relative;width:46px;height:24px;cursor:pointer}.toggle-switch input{display:none}
.toggle-slider{position:absolute;inset:0;background:var(--brd);border-radius:999px;transition:.3s}.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.toggle-switch input:checked+.toggle-slider{background:var(--acc)}.toggle-switch input:checked+.toggle-slider::before{transform:translateX(22px)}
.alert{padding:.75rem 1rem;border-radius:var(--rs);margin-bottom:1rem;font-size:.9rem;display:flex;align-items:center;gap:.4rem}
.alert-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}[data-theme="dark"] .alert-danger{background:#3f1212;color:#fca5a5;border-color:#5a1a1a}
.alert-success{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}[data-theme="dark"] .alert-success{background:#0a2e1f;color:#34d399;border-color:#134e35}

/* Stats */
.stats-bar{display:flex;gap:0;background:var(--card);border:1px solid var(--brd);border-radius:var(--r);margin-bottom:1.2rem;box-shadow:var(--s1);overflow:hidden}
.stat{flex:1;text-align:center;padding:.75rem .35rem;border-right:1px solid var(--brd2)}.stat:last-child{border-right:none}
.stat-value{font-size:1.35rem;font-weight:800;color:var(--acc);line-height:1.2;font-family:'Playfair Display',serif}
.stat-label{font-size:.7rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px;font-weight:600}

/* Recipe Grid */
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.recipe-card{background:var(--card);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--s1);overflow:hidden;transition:all .3s;cursor:pointer;position:relative}
.recipe-card:hover{transform:translateY(-4px);box-shadow:var(--s2);border-color:var(--acc)}
.recipe-card-img{width:100%;height:200px;object-fit:cover;display:block;background:var(--bg3)}
.recipe-card-noimg{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accL),var(--warmL));font-size:3.5rem}
.recipe-card-body{padding:1rem 1.2rem}
.recipe-card-body h3{font-size:1.1rem;font-weight:700;margin-bottom:.3rem;line-height:1.3}
.recipe-card-body h3 a{color:var(--tx)}.recipe-card-body h3 a:hover{color:var(--acc)}
.recipe-card-desc{color:var(--tx2);font-size:.84rem;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.recipe-card-meta{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.76rem;color:var(--tx3)}
.recipe-card-meta span{display:flex;align-items:center;gap:.2rem}
.recipe-card-tags{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.4rem}
.recipe-tag{font-size:.66rem;padding:.1rem .4rem;background:var(--bg3);color:var(--tx2);border-radius:999px;border:1px solid var(--brd)}
.recipe-tag.motorhome{background:var(--warmL);color:var(--warm);border-color:var(--warm)}
.recipe-card-fav{position:absolute;top:.6rem;right:.6rem;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:.2s;backdrop-filter:blur(4px)}
.recipe-card-fav:hover{background:rgba(0,0,0,.6);transform:scale(1.1)}
.recipe-card-fav.active{color:#e74c3c}
.recipe-cat-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .5rem;border-radius:999px;font-size:.72rem;font-weight:500}
.recipe-difficulty{font-size:.72rem;font-weight:600;padding:.1rem .4rem;border-radius:999px}
.diff-easy{background:#d1fae5;color:#065f46}[data-theme="dark"] .diff-easy{background:#0a2e1f;color:#34d399}
.diff-medium{background:#fef3e2;color:#b45309}[data-theme="dark"] .diff-medium{background:#3d2a14;color:#fbbf24}
.diff-hard{background:#fef2f2;color:#dc2626}[data-theme="dark"] .diff-hard{background:#3f1212;color:#fca5a5}

/* Recipe Detail */
.recipe-hero{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:1.5rem}
.recipe-hero img{width:100%;max-height:400px;object-fit:cover;display:block}
.recipe-hero-noimg{height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accL),var(--warmL));font-size:5rem}
.recipe-detail{max-width:850px}
.recipe-title{font-size:2rem;font-weight:800;margin-bottom:.4rem;line-height:1.2}
.recipe-meta-bar{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1rem;font-size:.88rem;color:var(--tx2)}
.recipe-meta-bar span{display:flex;align-items:center;gap:.3rem}
.recipe-section{margin-bottom:1.5rem}
.recipe-section h2{font-size:1.2rem;font-weight:700;margin-bottom:.8rem;padding-bottom:.4rem;border-bottom:2px solid var(--acc);display:flex;align-items:center;gap:.4rem}
.ingredient-list{list-style:none}
.ingredient-list li{padding:.45rem 0;border-bottom:1px solid var(--brd2);font-size:.92rem;display:flex;gap:.4rem}
.ingredient-list li:last-child{border-bottom:none}
.ing-amount{font-weight:600;color:var(--acc);min-width:70px}
.instruction-list{list-style:none;counter-reset:step}
.instruction-list li{counter-increment:step;padding:.7rem 0 .7rem 3rem;border-bottom:1px solid var(--brd2);font-size:.92rem;position:relative;line-height:1.6}
.instruction-list li::before{content:counter(step);position:absolute;left:0;top:.6rem;width:2.2rem;height:2.2rem;background:var(--acc);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;font-family:'Playfair Display',serif}
.instruction-list li:last-child{border-bottom:none}

/* Filters */
.filter-bar{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.category-filters{display:flex;flex-wrap:wrap;gap:.3rem}

/* Shopping List */
.shopping-item{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--brd2);font-size:.9rem}
.shopping-item.checked{text-decoration:line-through;opacity:.5}
.shopping-item input[type="checkbox"]{width:20px;height:20px;accent-color:var(--acc)}
.shopping-recipe-label{font-size:.7rem;color:var(--tx3);background:var(--bg3);padding:.08rem .35rem;border-radius:999px;margin-left:auto}

/* Print */
@media print{
    .navbar,.nav-toggle,.theme-toggle,.btn,.no-print{display:none!important}
    body{background:#fff;color:#000;font-size:14px}
    .recipe-hero img{max-height:250px}
    .instruction-list li::before{background:#000}
}

/* Empty state */
.empty-state{text-align:center;padding:3rem 1.2rem;color:var(--tx3)}.empty-state i{margin-bottom:1rem;opacity:.3;color:var(--acc)}.empty-state h3{color:var(--tx2);margin-bottom:.4rem}

/* Login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#2c1810,#1a1210,#3a1a14)}
.login-container{width:100%;max-width:400px;padding:1.2rem}
.login-card{background:#fff;border-radius:var(--r);box-shadow:var(--s3);padding:2rem}
.login-header{text-align:center;margin-bottom:1.5rem}
.login-header h1{font-size:1.5rem;color:#2c1810;font-family:'Playfair Display',serif}
.login-header p{color:#6b5545;font-size:.9rem}
.crew-grid{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.crew-chip{font-size:1.3rem;cursor:default;transition:.2s}.crew-chip:hover{transform:scale(1.2)}
.crew-roster{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid rgba(44,24,16,.08)}
.crew-roster h3{font-size:.82rem;color:rgba(44,24,16,.35);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.8rem;text-align:center;font-weight:500}

/* Responsive */
@media(max-width:768px){
    html{font-size:17px}
    .nav-links{display:none;position:fixed;top:64px;left:0;right:0;background:var(--nav);flex-direction:column;padding:1rem;gap:.3rem;box-shadow:var(--s3);z-index:999}.nav-links.open{display:flex}
    .nav-right{margin-left:0}.nav-toggle{display:flex;margin-left:auto}
    .recipe-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}
    .recipe-title{font-size:1.5rem}
    .nav-search input{width:140px}.nav-search input:focus{width:180px}
}
@media(max-width:480px){html{font-size:16px}.stat{flex:1 1 45%}}