:root{--bg:#f7f4ee;--surface:#fffdf8;--surface2:#f1ece2;--text:#28251f;--muted:#756f65;--line:#e5ded2;--accent:#d85c36;--accent2:#a63e21;--soft:#f8ded4;--green:#2d6d50;--shadow:0 18px 50px rgba(68,48,30,.10);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at 10% 0%,rgba(216,92,54,.10),transparent 26rem),radial-gradient(circle at 100% 18%,rgba(45,109,80,.08),transparent 22rem),var(--bg)}
button,input,select{font:inherit}button{cursor:pointer}.site-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(16px);background:rgba(247,244,238,.88);border-bottom:1px solid rgba(229,222,210,.85)}
.header-inner{width:min(1240px,calc(100% - 32px));margin:auto;display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:24px}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-icon{width:46px;height:46px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:0 8px 20px rgba(68,48,30,.08);font-size:25px}.brand strong{display:block;font-size:18px}.brand small{display:block;color:var(--muted);margin-top:2px}
.nav-tabs{display:flex;padding:5px;background:var(--surface2);border-radius:999px}.nav-btn{border:0;background:transparent;color:var(--muted);padding:10px 18px;border-radius:999px;font-weight:700}.nav-btn.active{background:var(--surface);color:var(--accent);box-shadow:0 4px 15px rgba(68,48,30,.08)}
main{width:min(1240px,calc(100% - 32px));margin:0 auto 64px}.page{display:none;padding-top:34px}.page.active{display:block}
.hero{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;padding:42px;border-radius:32px;background:linear-gradient(135deg,rgba(255,253,248,.96),rgba(248,222,212,.78)),var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--accent);margin:0 0 10px}.hero h1,.lottery-copy h1{font-size:clamp(32px,5vw,58px);line-height:1.08;margin:0;max-width:850px}.hero p:not(.eyebrow),.lottery-copy>p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.8;max-width:760px;margin:18px 0 0}
.primary-btn,.draw-button{border:0;color:white;background:var(--accent);border-radius:16px;padding:15px 22px;font-weight:800;box-shadow:0 12px 24px rgba(216,92,54,.25);transition:.2s}.primary-btn:hover,.draw-button:hover{background:var(--accent2);transform:translateY(-2px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}.stats article{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 22px;display:flex;align-items:baseline;gap:10px}.stats strong{font-size:30px}.stats span{color:var(--muted)}
.controls{display:grid;grid-template-columns:minmax(280px,1fr) 170px 150px 150px;gap:12px;margin-top:26px}.search-box{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 16px}.search-box input{width:100%;border:0;outline:0;background:transparent;padding:15px 0;color:var(--text)}select{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 14px;color:var(--text);outline:0}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 12px}.chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:10px 15px;border-radius:999px;font-weight:700}.chip.active{color:white;background:var(--green);border-color:var(--green)}.results-line{color:var(--muted);font-size:14px;margin:0 0 18px}
.recipe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.recipe-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;min-height:255px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(68,48,30,.06);transition:.22s}.recipe-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d8cbbc}.recipe-icon{width:56px;height:56px;display:grid;place-items:center;font-size:29px;border-radius:18px;background:var(--soft)}.recipe-card h3{font-size:21px;margin:16px 0 7px}.recipe-card p{color:var(--muted);margin:0;line-height:1.6}.card-meta{display:flex;gap:10px;color:var(--muted);font-size:12px;margin-top:10px;flex-wrap:wrap}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.tag{background:var(--surface2);padding:5px 8px;border-radius:999px;font-size:11px;color:#665f55}.card-actions{display:flex;gap:9px;margin-top:auto;padding-top:18px}.view-btn{flex:1;border:0;background:var(--text);color:white;border-radius:12px;padding:10px 12px;font-weight:700}.favorite-btn{width:42px;border:1px solid var(--line);background:white;border-radius:12px;font-size:20px}.favorite-btn.active{background:#fff0ea;border-color:#efb29d}
.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}.empty-state span{font-size:52px}.empty-state h3{color:var(--text)}
.lottery-shell{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;min-height:620px;padding:34px 10px}.lottery-options{margin:28px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px}.lottery-options label{font-size:14px;color:var(--muted);font-weight:700;display:flex;flex-direction:column;gap:8px}.lottery-options select{height:52px}.draw-button{font-size:20px;padding:17px 26px;min-width:220px}.dice{display:inline-block;margin-right:8px}.draw-button.spinning .dice{animation:dice .35s linear infinite}@keyframes dice{to{transform:rotate(360deg)}}.secondary-btn{margin-left:10px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:15px 20px;font-weight:800}
.lottery-machine{padding:20px;border-radius:36px;background:#2d2a26;box-shadow:0 30px 70px rgba(48,36,26,.25);border:8px solid #403b35}.machine-top{display:flex;gap:8px;padding:2px 4px 16px}.machine-top span{width:10px;height:10px;border-radius:50%;background:#766d63}.lottery-screen{min-height:390px;border-radius:24px;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.95),rgba(248,222,212,.92));display:grid;place-items:center;padding:28px;text-align:center;overflow:hidden}.screen-placeholder .big-emoji{font-size:92px;display:block}.screen-placeholder p{font-weight:800;color:#6f6256}.result-card{cursor:pointer;animation:pop .45s ease}@keyframes pop{0%{transform:scale(.84);opacity:0}100%{transform:scale(1);opacity:1}}.result-card .result-icon{font-size:86px}.result-card .result-label{color:var(--accent);font-weight:800;letter-spacing:.15em;font-size:12px}.result-card h2{font-size:40px;margin:8px 0}.result-card p{color:var(--muted);line-height:1.7}.result-card .click-tip{display:inline-block;margin-top:14px;background:var(--text);color:white;padding:10px 14px;border-radius:999px;font-size:13px}.machine-footer{color:white;padding:16px 8px 2px;display:flex;justify-content:space-between;align-items:center}.status-light{width:10px;height:10px;background:#6ee7a7;border-radius:50%;box-shadow:0 0 15px #6ee7a7}
.history{margin-top:24px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.section-heading h2{margin:0;font-size:32px}.text-btn{border:0;background:transparent;color:var(--accent);font-weight:800}.history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.history-card{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:16px;cursor:pointer;display:flex;gap:12px;align-items:center}.history-card span{font-size:30px}.history-card strong{display:block}.history-card small{color:var(--muted)}
.modal{position:fixed;inset:0;display:none;z-index:100}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:rgba(27,23,19,.58);backdrop-filter:blur(5px)}.modal-card{position:relative;width:min(780px,calc(100% - 28px));max-height:88vh;overflow:auto;margin:6vh auto;background:var(--surface);border-radius:28px;padding:30px;box-shadow:0 35px 90px rgba(0,0,0,.28)}.modal-close{position:sticky;top:0;float:right;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface2);font-size:26px;z-index:2}.detail-hero{display:flex;gap:18px;align-items:center;padding-right:40px}.detail-icon{width:76px;height:76px;display:grid;place-items:center;background:var(--soft);border-radius:22px;font-size:40px}.detail-hero h2{font-size:36px;margin:0}.detail-hero p{color:var(--muted);margin:6px 0 0}.detail-meta{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.detail-meta span{background:var(--surface2);padding:8px 11px;border-radius:999px;color:#655e54;font-size:13px}.detail-columns{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px}.detail-section{background:white;border:1px solid var(--line);border-radius:20px;padding:20px}.detail-section h3{margin-top:0}.ingredient-list{list-style:none;padding:0;margin:0}.ingredient-list li{padding:10px 0;border-bottom:1px dashed var(--line)}.ingredient-list li:last-child{border-bottom:0}.step-list{padding-left:24px;margin:0}.step-list li{padding:0 0 14px 6px;line-height:1.7}.tip-box{margin-top:18px;padding:16px 18px;border-radius:16px;background:#fff3d9;color:#6d5524}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#28251f;color:white;padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;z-index:200}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){.recipe-grid{grid-template-columns:repeat(3,1fr)}.controls{grid-template-columns:1fr 1fr 1fr}.search-box{grid-column:1/-1}}
@media(max-width:820px){.recipe-grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.lottery-shell{grid-template-columns:1fr;gap:28px}.history-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.header-inner{min-height:68px}.brand small{display:none}.brand strong{font-size:15px}.brand-icon{width:40px;height:40px}.nav-btn{padding:9px 12px;font-size:14px}main{width:min(100% - 22px,1240px)}.page{padding-top:18px}.hero{grid-template-columns:1fr;padding:26px 22px}.hero h1,.lottery-copy h1{font-size:36px}.hero-draw{justify-self:start}.stats{gap:8px}.stats article{padding:14px;display:block}.stats strong{font-size:24px;display:block}.controls{grid-template-columns:1fr}.search-box{grid-column:auto}.controls select{height:50px}.recipe-grid{grid-template-columns:1fr}.lottery-options{grid-template-columns:1fr}.lottery-shell{padding-top:10px;min-height:auto}.lottery-screen{min-height:330px}.result-card h2{font-size:34px}.history-grid{grid-template-columns:1fr}.detail-columns{grid-template-columns:1fr}.modal-card{padding:22px;margin:3vh auto;max-height:94vh}.detail-hero h2{font-size:30px}}

.initial-loader{grid-column:1/-1;padding:70px 20px;text-align:center;color:var(--muted)}
.load-more-wrap{text-align:center;padding:28px 0 8px}
.load-more-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:13px 24px;font-weight:800;box-shadow:0 8px 24px rgba(68,48,30,.07)}
.load-more-btn:hover{border-color:var(--accent);color:var(--accent)}
.recipe-card{content-visibility:auto;contain-intrinsic-size:255px}


/* ===== Mobile responsive upgrade v2 ===== */
:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
.mobile-bottom-nav{display:none}
.mobile-filter-toggle{display:none}
.recipe-card,.history-card,.view-btn,.favorite-btn,.chip,.nav-btn,.draw-button,.secondary-btn,.load-more-btn{-webkit-tap-highlight-color:transparent}
button,select,input{touch-action:manipulation}
@media (max-width: 700px){
  body{padding-bottom:calc(76px + var(--safe-bottom));background:var(--bg)}
  .site-header{
    position:sticky;top:0;
    background:rgba(247,244,238,.96);
    backdrop-filter:blur(12px);
  }
  .header-inner{
    width:100%;min-height:58px;padding:8px 12px;
  }
  .brand{min-width:0}
  .brand-icon{width:38px;height:38px;border-radius:12px;font-size:21px;flex:none}
  .brand strong{font-size:15px;white-space:nowrap}
  .brand small{display:none}
  .nav-tabs{display:none}
  main{width:100%;margin:0 auto 28px;padding:0 12px}
  .page{padding-top:12px}
  .hero{
    display:block;
    border-radius:22px;
    padding:22px 18px;
    box-shadow:0 10px 28px rgba(68,48,30,.08);
  }
  .hero h1,.lottery-copy h1{
    font-size:30px;
    line-height:1.14;
    letter-spacing:-.02em;
  }
  .hero p:not(.eyebrow),.lottery-copy>p:not(.eyebrow){
    margin-top:12px;
    font-size:15px;
    line-height:1.7;
  }
  .hero-draw{
    width:100%;margin-top:18px;padding:15px 18px;
    justify-content:center;
  }
  .stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:12px 0 16px;
  }
  .stats article{
    min-width:0;
    border-radius:16px;
    padding:13px 14px;
    display:block;
  }
  .stats strong{font-size:23px;line-height:1.2}
  .stats span{display:block;margin-top:3px;font-size:12px}
  .controls{
    grid-template-columns:1fr;
    gap:10px;
    margin:12px 0 14px;
    padding:12px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 8px 22px rgba(68,48,30,.05);
  }
  .controls.mobile-collapsed{
    display:none;
  }
  .search-box{
    min-height:48px;border-radius:14px;
  }
  .search-box input{font-size:16px}
  .controls select{
    width:100%;height:48px;border-radius:14px;font-size:16px;
  }
  .chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    gap:8px;
    margin:10px -12px 10px;
    padding:0 12px 3px;
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{
    flex:0 0 auto;
    padding:10px 14px;
    min-height:42px;
    white-space:nowrap;
  }
  .results-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:4px 0 12px;
    font-size:13px;
  }
  .mobile-filter-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:999px;
    padding:7px 12px;
    color:var(--text);
    font-weight:700;
  }
  .recipe-grid{grid-template-columns:1fr;gap:11px}
  .recipe-card{
    min-height:0;
    display:grid;
    grid-template-columns:54px 1fr;
    grid-template-areas:
      "icon title"
      "icon desc"
      "meta meta"
      "tags tags"
      "actions actions";
    gap:0 12px;
    border-radius:18px;
    padding:15px;
    content-visibility:auto;
    contain-intrinsic-size:210px;
  }
  .recipe-icon{grid-area:icon;width:54px;height:54px;border-radius:16px;font-size:27px}
  .recipe-card h3{grid-area:title;margin:2px 0 5px;font-size:19px;line-height:1.25}
  .recipe-card>p{grid-area:desc;font-size:13px}
  .card-meta{grid-area:meta;margin-top:12px;font-size:12px}
  .tags{grid-area:tags;margin-top:10px}
  .card-actions{grid-area:actions;padding-top:13px}
  .view-btn{min-height:46px;font-size:15px}
  .favorite-btn{width:46px;min-height:46px}
  .load-more-wrap{padding:18px 0 8px}
  .load-more-btn{width:100%;min-height:48px}
  .lottery-shell{
    display:flex;
    flex-direction:column;
    gap:20px;
    min-height:0;
    padding:8px 0 18px;
  }
  .lottery-copy{width:100%}
  .lottery-options{grid-template-columns:1fr;gap:10px;margin:18px 0 14px;max-width:none}
  .lottery-options select{height:50px;font-size:16px}
  .draw-button{width:100%;min-width:0;min-height:52px;font-size:18px}
  .secondary-btn{width:100%;margin:10px 0 0;min-height:48px}
  .lottery-machine{
    width:100%;
    padding:13px;
    border-width:6px;
    border-radius:28px;
  }
  .lottery-screen{min-height:300px;border-radius:20px;padding:20px}
  .screen-placeholder .big-emoji{font-size:74px}
  .result-card .result-icon{font-size:70px}
  .result-card h2{font-size:31px}
  .machine-footer{padding:12px 4px 0;font-size:13px}
  .history{margin-top:10px}
  .section-heading h2{font-size:25px}
  .history-grid{grid-template-columns:1fr;gap:9px}
  .history-card{min-height:68px;border-radius:16px}
  .modal-card{
    width:100%;
    height:100dvh;
    max-height:none;
    margin:0;
    border-radius:0;
    padding:18px 15px calc(24px + var(--safe-bottom));
  }
  .modal-close{
    position:sticky;top:0;
    width:44px;height:44px;
    background:rgba(241,236,226,.96);
  }
  .detail-hero{gap:12px;padding-right:44px}
  .detail-icon{width:62px;height:62px;border-radius:18px;font-size:32px}
  .detail-hero h2{font-size:26px;line-height:1.18}
  .detail-hero p{font-size:13px}
  .detail-meta{gap:7px;margin:16px 0}
  .detail-meta span{font-size:12px;padding:7px 9px}
  .detail-columns{grid-template-columns:1fr;gap:13px}
  .detail-section{padding:16px;border-radius:17px}
  .ingredient-list li{padding:9px 0}
  .step-list li{padding-bottom:12px}
  .tip-box{margin-top:13px;border-radius:15px}
  .toast{
    bottom:calc(86px + var(--safe-bottom));
    max-width:calc(100% - 30px);
    text-align:center;
  }
  .mobile-bottom-nav{
    position:fixed;
    z-index:90;
    left:0;right:0;bottom:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    min-height:64px;
    padding:7px 10px calc(7px + var(--safe-bottom));
    background:rgba(255,253,248,.96);
    border-top:1px solid var(--line);
    backdrop-filter:blur(15px);
    box-shadow:0 -8px 24px rgba(68,48,30,.08);
  }
  .mobile-nav-btn{
    border:0;background:transparent;color:var(--muted);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-height:50px;border-radius:13px;font-weight:700;
  }
  .mobile-nav-btn span{font-size:21px;line-height:1}
  .mobile-nav-btn small{font-size:11px}
  .mobile-nav-btn.active{color:var(--accent);background:var(--soft)}
}
@media (max-width: 380px){
  main{padding:0 9px}
  .hero{padding:19px 15px}
  .hero h1,.lottery-copy h1{font-size:27px}
  .stats article{padding:12px}
  .recipe-card{padding:13px}
}


/* ===== Local virtual account & personal records v3 ===== */
.account-shell{padding:10px 0 40px}
.account-guest-card{
  max-width:760px;margin:50px auto;padding:48px;text-align:center;
  background:linear-gradient(145deg,var(--surface),#fff3ea);
  border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow)
}
.account-guest-icon{
  width:86px;height:86px;margin:0 auto 20px;display:grid;place-items:center;
  border-radius:28px;background:var(--soft);font-size:44px
}
.account-guest-card h1{font-size:42px;margin:0}
.account-guest-card>p:not(.eyebrow){max-width:600px;margin:16px auto 0;color:var(--muted);line-height:1.8;font-size:16px}
.guest-actions{display:flex;justify-content:center;gap:12px;margin-top:28px}
.local-data-tip{display:inline-block;margin-top:22px;padding:10px 14px;border-radius:999px;background:var(--surface2);color:var(--muted);font-size:13px}
.profile-card{
  display:flex;align-items:center;gap:18px;padding:26px 28px;
  border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:0 10px 30px rgba(68,48,30,.06)
}
.profile-avatar{
  width:72px;height:72px;flex:none;display:grid;place-items:center;
  border-radius:22px;background:var(--soft);font-size:36px;font-weight:900;color:var(--accent)
}
.profile-main{min-width:0;flex:1}
.profile-main h1{font-size:34px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-main p:not(.eyebrow){margin:5px 0 0;color:var(--muted)}
.outline-danger-btn{
  border:1px solid #e6aaa0;background:#fff7f5;color:#b33f2e;
  border-radius:13px;padding:11px 16px;font-weight:800
}
.account-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.account-stats article{padding:20px;border:1px solid var(--line);border-radius:19px;background:var(--surface)}
.account-stats strong{display:block;font-size:30px}
.account-stats span{color:var(--muted);font-size:14px}
.record-panel{
  margin-top:18px;padding:25px;border:1px solid var(--line);
  border-radius:24px;background:var(--surface)
}
.account-heading{align-items:center}
.record-actions{display:flex;gap:6px;flex-wrap:wrap}
.danger-text{color:#b33f2e}
.account-record-controls{display:grid;grid-template-columns:1fr 190px;gap:12px;margin:18px 0}
.compact-search{min-height:48px}
.account-record-list{display:grid;gap:10px}
.account-record-item{
  display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:14px;
  padding:14px;border:1px solid var(--line);border-radius:17px;background:#fff
}
.account-record-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:15px;background:var(--soft);font-size:28px}
.account-record-main{min-width:0}
.account-record-main strong{display:block;font-size:17px}
.account-record-main p{margin:4px 0 0;color:var(--muted);font-size:13px}
.record-count-badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:var(--surface2);font-size:12px;font-weight:800;color:var(--muted)}
.record-view-btn{border:0;background:var(--text);color:#fff;padding:9px 12px;border-radius:11px;font-weight:700}
.account-record-actions{display:flex;align-items:center;gap:8px}
.account-empty{text-align:center;padding:46px 16px;color:var(--muted)}
.account-empty span{font-size:46px}.account-empty h3{color:var(--text);margin:10px 0 4px}
.small-empty{padding:24px 12px}
.recent-notes-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.note-preview{
  padding:16px;border:1px solid var(--line);border-radius:17px;background:#fff;cursor:pointer
}
.note-preview strong{display:block;margin-bottom:6px}
.note-preview p{margin:0;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.note-preview small{display:block;margin-top:10px;color:#9b9287}
.auth-card{
  position:relative;width:min(460px,calc(100% - 28px));margin:9vh auto;
  background:var(--surface);border-radius:28px;padding:30px;box-shadow:0 35px 90px rgba(0,0,0,.28)
}
.auth-close{position:absolute;right:18px;top:18px}
.auth-brand{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:var(--soft);font-size:31px;margin-bottom:18px}
.auth-card h2{font-size:31px;margin:0}
.auth-description{color:var(--muted);line-height:1.65;margin:10px 0 22px}
.auth-field{display:block;margin-bottom:14px}
.auth-field span{display:block;font-size:13px;color:var(--muted);font-weight:800;margin-bottom:7px}
.auth-field input{
  width:100%;height:50px;border:1px solid var(--line);border-radius:14px;
  padding:0 14px;background:white;outline:0;font-size:16px
}
.auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(216,92,54,.10)}
.auth-submit{width:100%;min-height:50px;margin-top:4px}
.auth-mode-switch{display:block;margin:16px auto 0;border:0;background:transparent;color:var(--accent);font-weight:800}
.auth-error{padding:10px 12px;border-radius:11px;background:#fff0ed;color:#a63727;font-size:13px}
.auth-warning{margin-top:18px;padding:12px;border-radius:13px;background:var(--surface2);color:var(--muted);font-size:12px;line-height:1.55}
.recipe-note-box{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff}
.recipe-note-box h3{margin:0 0 8px}.recipe-note-box p{color:var(--muted);font-size:13px;margin:0 0 10px}
.recipe-note-box textarea{
  width:100%;min-height:100px;resize:vertical;border:1px solid var(--line);
  border-radius:13px;padding:12px;outline:0;font:inherit;line-height:1.6
}
.recipe-note-box textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(216,92,54,.10)}
.note-actions{display:flex;justify-content:flex-end;margin-top:10px}
.save-note-btn{border:0;background:var(--green);color:#fff;border-radius:12px;padding:10px 15px;font-weight:800}
.login-note-prompt{margin-top:16px;padding:14px 16px;border-radius:15px;background:var(--surface2);color:var(--muted)}
.login-note-prompt button{border:0;background:transparent;color:var(--accent);font-weight:800;padding:0}
@media(max-width:820px){
  .account-stats{grid-template-columns:repeat(2,1fr)}
  .recent-notes-list{grid-template-columns:1fr}
}
@media(max-width:700px){
  .mobile-bottom-nav{grid-template-columns:repeat(4,1fr)}
  .account-shell{padding:0 0 20px}
  .account-guest-card{margin:10px 0;padding:28px 18px;border-radius:22px}
  .account-guest-card h1{font-size:29px}
  .guest-actions{display:grid;grid-template-columns:1fr;margin-top:20px}
  .guest-actions .secondary-btn{margin:0}
  .local-data-tip{border-radius:14px;line-height:1.5}
  .profile-card{padding:17px;gap:12px;border-radius:20px;align-items:flex-start;flex-wrap:wrap}
  .profile-avatar{width:56px;height:56px;border-radius:17px;font-size:28px}
  .profile-main{width:calc(100% - 70px)}
  .profile-main h1{font-size:25px}
  .outline-danger-btn{width:100%}
  .account-stats{gap:8px;margin:10px 0}
  .account-stats article{padding:14px;border-radius:16px}
  .account-stats strong{font-size:24px}
  .record-panel{margin-top:10px;padding:16px;border-radius:19px}
  .account-heading{align-items:flex-start}
  .record-actions{margin-top:8px}
  .account-record-controls{grid-template-columns:1fr}
  .account-record-controls select{height:48px}
  .account-record-item{grid-template-columns:50px 1fr;gap:10px;padding:12px}
  .account-record-icon{width:50px;height:50px}
  .account-record-actions{grid-column:1/-1;justify-content:space-between}
  .record-view-btn{flex:1;min-height:42px}
  .auth-card{width:100%;height:100dvh;max-height:none;margin:0;border-radius:0;padding:24px 18px calc(26px + var(--safe-bottom))}
}


/* ===== Supabase cloud account v4 ===== */
.cloud-sync-status{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:6px 10px;border-radius:999px;background:#e8f7ef;color:#28734f;font-size:12px;font-weight:800}
.cloud-sync-status.syncing{background:#fff4d7;color:#82651e}.cloud-sync-status.error{background:#ffebe7;color:#aa3828}
.cloud-account-note{margin-top:14px;padding:12px 14px;border:1px solid #cfe7d9;border-radius:14px;background:#f0faf4;color:#35664c;font-size:13px;line-height:1.6}
.auth-submit[disabled],.draw-button[disabled],.save-note-btn[disabled]{opacity:.6;cursor:wait;transform:none}
.cloud-error-card{max-width:760px;margin:30px auto;padding:22px;border:1px solid #efb4a8;border-radius:20px;background:#fff3f0;color:#94392b;line-height:1.7}
@media(max-width:700px){.cloud-sync-status{margin-top:6px}.cloud-account-note{font-size:12px}}


/* ===== 588 recipes detailed tutorial v5 ===== */
.brand-only{border:0;background:transparent;padding:0;flex:none}
.header-inner{justify-content:space-between}
.nav-tabs{margin-left:auto}
.hero{grid-template-columns:minmax(0,1fr) auto}
.hero h1{max-width:760px}
.hero-draw{display:inline-flex;align-items:center;gap:8px;font-size:17px;padding:17px 24px}
.tutorial-hero{padding-bottom:20px;border-bottom:1px solid var(--line)}
.tutorial-kicker{font-size:12px!important;letter-spacing:.14em;font-weight:900;color:var(--accent)!important;margin:0 0 5px!important}
.tutorial-meta{margin:18px 0 8px}
.tutorial-section{margin-top:20px;padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff}
.tutorial-heading{display:flex;align-items:center;gap:12px;margin-bottom:17px}
.tutorial-heading>span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--text);color:#fff;font-weight:900}
.tutorial-heading p{margin:0;color:var(--accent);font-size:10px;letter-spacing:.14em;font-weight:900}
.tutorial-heading h3{margin:2px 0 0;font-size:22px}
.ingredient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ingredient-chip{padding:10px 12px;border-radius:12px;background:var(--surface2);font-size:14px;line-height:1.45}
.prep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.prep-item{padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.prep-item span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--soft);color:var(--accent);font-weight:900}
.prep-item p{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.7}
.tutorial-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.tutorial-step{display:grid;grid-template-columns:42px 1fr;gap:11px;padding:15px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#fff,var(--surface))}
.tutorial-step-number{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--accent);color:#fff;font-weight:900;font-size:17px}
.tutorial-step h4{margin:1px 0 6px;font-size:16px}
.tutorial-step p{margin:0;color:var(--muted);font-size:13px;line-height:1.72}
.tutorial-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.key-card{padding:18px;border-radius:18px;background:#fff3d9;color:#5f4d28}
.key-card.alt-card{background:#edf7f1;color:#315c47}
.key-card h3{margin:0 0 10px;font-size:17px}.key-card ul{margin:0;padding-left:20px}.key-card li{margin:7px 0;line-height:1.65;font-size:13px}
.account-favorite-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.account-favorite-card{display:grid;grid-template-columns:52px 1fr;gap:11px;padding:13px;border:1px solid var(--line);border-radius:17px;background:#fff}
.account-favorite-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:var(--soft);font-size:27px}
.account-favorite-main{min-width:0}.account-favorite-main strong{display:block;font-size:16px}.account-favorite-main p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.account-favorite-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 44px;gap:8px}
.remove-favorite-btn{border:1px solid #efb29d;background:#fff0ea;color:var(--accent);border-radius:11px;font-size:18px}
@media(max-width:700px){
 .header-inner{justify-content:center}.brand-only{position:absolute;left:12px}.hero{display:block}.hero-draw{width:100%;justify-content:center}
 .tutorial-section{padding:15px;border-radius:18px}.ingredient-grid{grid-template-columns:1fr}.prep-grid{grid-template-columns:1fr}.tutorial-steps{grid-template-columns:1fr}.tutorial-bottom-grid{grid-template-columns:1fr}
 .tutorial-step{grid-template-columns:38px 1fr;padding:13px}.tutorial-step-number{width:38px;height:38px}
 .account-favorite-grid{grid-template-columns:1fr}
}


/* ===== Clean centered hero v6 ===== */
.hero.hero-clean{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  min-height:300px;
  padding:48px 28px;
  text-align:center;
}
.hero.hero-clean h1{
  max-width:none;
  margin:0;
  text-align:center;
}
.hero.hero-clean .hero-draw{
  justify-content:center;
  margin:0;
}
@media(max-width:700px){
  .hero.hero-clean{
    display:flex;
    min-height:270px;
    gap:25px;
    padding:40px 18px;
  }
  .hero.hero-clean h1{
    width:100%;
    font-size:34px;
    text-align:center;
  }
  .hero.hero-clean .hero-draw{
    width:100%;
  }
}


/* ===== 热门菜入口 v11 ===== */
.controls{
  grid-template-columns:170px 150px 150px;
  justify-content:start;
}
@media(max-width:1050px){
  .controls{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .controls{grid-template-columns:1fr}
}