:root{
      --bg:#101411;--panel:#1a211c;--panel2:#222b24;--line:#354138;--text:#f4f0e7;--muted:#b7b5aa;
      --accent:#d8a95d;--accent2:#9fbd8d;--danger:#db7b70;--shadow:0 16px 40px rgba(0,0,0,.28);
      --radius:18px;
    }
    *{box-sizing:border-box}
    body{margin:0;background:radial-gradient(circle at top,#263028 0,#111612 40%,#0c100d 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .shell{max-width:980px;margin:0 auto;min-height:100vh;padding-bottom:92px}
    .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:rgba(16,20,17,.91);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
    .brand{display:flex;gap:12px;align-items:center}.brandmark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#d8a95d,#9c7440);display:grid;place-items:center;color:#17130c;font-size:22px;box-shadow:var(--shadow)}
    .brand h1{font-size:18px;margin:0}.brand small{display:block;color:var(--muted);margin-top:2px}
    .avatar{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:999px;padding:9px 12px}
    main{padding:18px}
    .hero{background:linear-gradient(145deg,rgba(216,169,93,.19),rgba(159,189,141,.09)),var(--panel);border:1px solid rgba(216,169,93,.24);border-radius:24px;padding:22px;box-shadow:var(--shadow);overflow:hidden;position:relative}
    .hero:after{content:'🍞';position:absolute;right:17px;bottom:-18px;font-size:92px;opacity:.10;transform:rotate(-11deg)}
    .hero h2{font-size:30px;line-height:1.05;margin:0 0 8px}.hero p{color:var(--muted);margin:0;max-width:560px}
    .search{display:flex;gap:10px;margin:16px 0}.search input{flex:1;background:#0f1410;color:var(--text);border:1px solid var(--line);padding:14px 15px;border-radius:14px;outline:none}.search input:focus{border-color:var(--accent)}
    .section-head{display:flex;justify-content:space-between;align-items:end;margin:22px 0 10px}.section-head h3{margin:0;font-size:20px}.section-head button{border:0;background:none;color:var(--accent)}
    .category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.category{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:16px;text-align:left;color:var(--text);min-height:102px;transition:.18s}.category:hover{transform:translateY(-2px);border-color:var(--accent)}.category .icon{font-size:26px}.category b{display:block;margin-top:10px}.category small{color:var(--muted)}
    .cards{display:grid;gap:12px}.recipe-card{display:grid;grid-template-columns:86px 1fr auto;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:11px;box-shadow:0 8px 20px rgba(0,0,0,.15)}
    .thumb{width:86px;height:74px;border-radius:13px;background:linear-gradient(145deg,#3d493f,#202820);display:grid;place-items:center;font-size:34px}.recipe-card h4{margin:0 0 5px}.meta{color:var(--muted);font-size:13px;display:flex;gap:8px;flex-wrap:wrap}.badge{display:inline-block;border-radius:999px;padding:4px 8px;font-size:11px;border:1px solid var(--line);color:var(--muted)}.badge.finished{color:#bdd4ae;border-color:#51644c}.badge.working{color:#e7c887;border-color:#685b3d}.badge.draft{color:#dda29a;border-color:#684b47}.chev{font-size:22px;color:var(--muted);border:0;background:none}
    .tabs{display:flex;gap:8px;overflow:auto;padding-bottom:4px}.tab{white-space:nowrap;border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:9px 12px;border-radius:999px}.tab.active{background:var(--accent);border-color:var(--accent);color:#21170a;font-weight:700}
    .bottom{position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(15,19,16,.94);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.08);padding:9px max(12px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
    .bottom-inner{max-width:980px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.navbtn{border:0;background:none;color:var(--muted);padding:8px 2px;border-radius:12px}.navbtn.active{background:var(--panel2);color:var(--accent)}.navbtn span{display:block;font-size:20px}.navbtn small{font-size:11px}
    .panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px}.panel h3{margin-top:0}
    .field{margin-bottom:14px}.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}.field input,.field select,.field textarea{width:100%;background:#0f1410;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px}.field textarea{min-height:90px;resize:vertical}.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .btn{border:0;border-radius:12px;padding:12px 15px;font-weight:700}.btn.primary{background:var(--accent);color:#201507}.btn.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--line)}.btn.danger{background:#5a2927;color:#ffd9d5}.btn.full{width:100%}
    .stack{display:grid;gap:10px}.ingredient-row{display:grid;grid-template-columns:80px 88px 1fr 40px;gap:8px}.step-row{display:grid;grid-template-columns:1fr 40px;gap:8px}.mini{padding:9px;border-radius:10px;border:1px solid var(--line);background:#0f1410;color:var(--text)}
    .detail-title{display:flex;justify-content:space-between;gap:12px}.detail-title h2{margin:0 0 7px}.detail-actions{display:flex;gap:8px}.detail-actions button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:8px 10px}
    .scale-box{display:flex;align-items:center;gap:10px;background:#111712;border:1px solid var(--line);padding:12px;border-radius:13px}.scale-box input{width:86px;background:#080d09;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:8px}.list{display:grid;gap:9px}.list-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}.list-item:last-child{border-bottom:0}.qty{color:var(--accent);font-weight:800;min-width:80px}.stepno{width:27px;height:27px;display:grid;place-items:center;border-radius:999px;background:var(--accent);color:#201507;font-weight:800;flex:0 0 auto}
    .note{border-left:3px solid var(--accent2);padding:11px 13px;background:#131a15;border-radius:0 12px 12px 0;color:#ddd9ce;margin:9px 0}.empty{text-align:center;color:var(--muted);padding:40px 20px}.hidden{display:none!important}
    .login{min-height:100vh;display:grid;place-items:center;padding:22px}.login-card{width:min(450px,100%);background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow)}.login-card h1{margin:10px 0 5px;font-size:31px}.login-card p{color:var(--muted)}.profile-picks{display:grid;gap:10px;margin:20px 0}.profile-pick{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:15px;padding:13px}.profile-pick.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(216,169,93,.15)}.face{width:40px;height:40px;border-radius:13px;background:#344036;display:grid;place-items:center;font-size:20px}.login-msg{min-height:20px;color:var(--danger);font-size:13px}
    .ownerline{font-size:12px;color:var(--accent2)}.split{display:flex;justify-content:space-between;gap:10px;align-items:center}.muted{color:var(--muted)}.danger-text{color:var(--danger)}
    .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(15px);background:#f1eadc;color:#1d211e;padding:12px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:99;box-shadow:var(--shadow);font-weight:700}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
    @media(min-width:720px){.category-grid{grid-template-columns:repeat(4,1fr)}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.recipe-card{grid-template-columns:86px 1fr auto}.hero h2{font-size:40px}.bottom{position:sticky}.shell{padding-bottom:0}}
    @media(max-width:480px){.ingredient-row{grid-template-columns:62px 72px 1fr 36px}.recipe-card{grid-template-columns:72px 1fr auto}.thumb{width:72px}.row{grid-template-columns:1fr}.hero h2{font-size:26px}}

.loading-screen,.error-screen{min-height:100vh;display:grid;place-items:center;padding:24px;text-align:center}.spinner{width:42px;height:42px;border:4px solid rgba(255,255,255,.12);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px}@keyframes spin{to{transform:rotate(360deg)}}
.sync-note{font-size:12px;color:var(--muted);text-align:center;margin-top:12px}.offline{color:var(--danger)}
.thumb.has-image{overflow:hidden;padding:0}.thumb.has-image img{width:100%;height:100%;object-fit:cover;display:block}
.recipe-hero-image{height:min(42vw,340px);min-height:190px;border-radius:22px;overflow:hidden;margin-bottom:14px;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--panel)}
.recipe-hero-image img{width:100%;height:100%;object-fit:cover;display:block}
.source-panel{display:flex;align-items:center;justify-content:space-between;gap:14px}.source-panel .btn{text-decoration:none;white-space:nowrap}
.import-panel{border-color:rgba(216,169,93,.42);background:linear-gradient(145deg,rgba(216,169,93,.10),rgba(159,189,141,.05)),var(--panel)}
.import-panel h3{margin:0 0 5px}.import-panel p{margin:0 0 14px}.import-icon{font-size:30px;float:left;margin-right:12px}.import-controls{display:grid;grid-template-columns:1fr auto;gap:9px;clear:both}.import-controls input{width:100%;background:#0f1410;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px;min-width:0}
@media(max-width:560px){.import-controls{grid-template-columns:1fr}.source-panel{align-items:flex-start;flex-direction:column}.source-panel .btn{width:100%;text-align:center}}