:root { --page:#f5f5f7; --surface:#ffffff; --ink:#1d1d1f; --muted:rgba(0,0,0,.56); --line:rgba(0,0,0,.08); --blue:#0071e3; --blue-dark:#0066cc; --fresh:#e9f5ef; --warm:#fff5e9; --shadow:rgba(0,0,0,.12) 3px 5px 30px 0; }
* { box-sizing:border-box; }
html { background:var(--page); }
body { margin:0; min-width:320px; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",Arial,sans-serif; font-size:17px; letter-spacing:-.32px; background:var(--page); }
button,input,select { font:inherit; } button { cursor:pointer; }
.page { width:min(980px,calc(100% - 36px)); margin:0 auto; padding-bottom:54px; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:270px; margin:0 calc((980px - 100vw) / 2) 28px; padding:62px max(18px,calc((100vw - 980px)/2)); color:#fff; background:#1d1d1f; }
.eyebrow,.kicker { margin:0 0 8px; font-size:12px; line-height:1.33; font-weight:600; letter-spacing:-.12px; }.eyebrow { color:#a7d8c2; }.kicker { color:var(--blue-dark); }
.hero h1 { margin:0; max-width:620px; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif; font-size:clamp(40px,6vw,56px); font-weight:600; line-height:1.07; letter-spacing:-.7px; }.hero-text { margin:14px 0 0; max-width:550px; color:rgba(255,255,255,.86); font-size:21px; line-height:1.19; letter-spacing:.05px; }
.hero-stat { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:270px; }.stat { padding:8px 12px; border:1px solid rgba(255,255,255,.34); border-radius:980px; color:#fff; font-size:14px; line-height:1.3; white-space:nowrap; }
.guide { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin:0 0 28px; padding:15px 18px; border-radius:11px; color:rgba(0,0,0,.8); background:var(--fresh); font-size:14px; }.guide span { font-weight:600; }.guide i { color:var(--blue); font-style:normal; }
.grid { display:grid; gap:16px; }.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }.action-grid { margin-top:16px; }
.card { min-width:0; padding:26px; border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }.section-title { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:16px; }.section-title h2 { margin:0; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC",sans-serif; font-size:28px; font-weight:600; line-height:1.14; letter-spacing:.05px; }.section-title select { width:auto; min-width:118px; }
input,select { width:100%; min-height:44px; padding:9px 12px; border:1px solid rgba(0,0,0,.14); border-radius:11px; color:var(--ink); background:#fff; outline:none; } input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 2px var(--blue); }
button { min-height:40px; padding:8px 15px; border:1px solid transparent; border-radius:8px; color:#fff; background:var(--blue); font-weight:400; line-height:1.2; transition:background .18s ease,transform .18s ease; } button:hover { background:#147ce5; } button:active { transform:scale(.98); background:#0066cc; } button:disabled { opacity:.58; cursor:wait; }.primary { background:var(--blue); }.wide { width:100%; min-height:44px; }.text-button { min-height:auto; padding:3px 0; border:0; color:var(--blue-dark); background:transparent; font-size:14px; }.text-button:hover { color:var(--blue-dark); background:transparent; text-decoration:underline; }
.form-row { display:grid; grid-template-columns:minmax(0,1fr) 88px 72px auto; gap:8px; }.dish-form { display:grid; grid-template-columns:minmax(0,1fr) 92px 62px; gap:8px; }.dish-form .ingredient-input { grid-column:span 2; }.dish-form button { grid-column:3; grid-row:2; }.hint { margin:12px 0; color:var(--muted); font-size:14px; line-height:1.43; }.item-list { display:grid; gap:8px; max-height:294px; overflow:auto; }.item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:11px; background:#f5f5f7; }.item-main { min-width:0; flex:1; }.item strong,.item small { display:block; }.item strong { font-size:15px; line-height:1.25; }.item small { margin-top:4px; color:var(--muted); font-size:12px; line-height:1.33; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.item-actions { display:flex; align-items:center; gap:8px; }.item-actions button { min-height:32px; padding:5px 9px; color:rgba(0,0,0,.8); background:#fff; font-size:12px; }.toggle { width:18px; height:18px; accent-color:var(--blue); }.availability { display:inline-block; margin-top:6px; font-size:12px; font-weight:600; }.ready { color:#277953; }.missing { color:#a55325; }
.wheel-card { background:#f5f5f7; }.weekly-card { background:#fff; }.wheel-card,.weekly-card { min-height:445px; }.wheel-stage { position:relative; display:grid; place-items:center; min-height:245px; }.pointer { position:absolute; z-index:2; top:0; color:var(--blue); font-size:30px; text-shadow:0 2px 3px rgba(0,0,0,.12); }.wheel { width:220px; height:220px; display:grid; place-items:center; padding:35px; overflow:hidden; border:8px solid #fff; border-radius:50%; color:var(--ink); font-size:15px; font-weight:600; line-height:1.3; text-align:center; box-shadow:var(--shadow); transition:transform 4s cubic-bezier(.14,.82,.2,1); }.wheel span { display:block; }.result { min-height:24px; margin:14px 0 0; color:var(--blue-dark); text-align:center; font-weight:600; }.weekly-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }.weekly-controls label { display:grid; gap:6px; font-size:14px; font-weight:600; }.weekly-output { display:grid; gap:8px; max-height:286px; overflow:auto; margin-top:16px; }.day { display:grid; grid-template-columns:58px 1fr; gap:10px; padding:12px; border-radius:11px; background:#f5f5f7; }.day strong { color:var(--blue-dark); }.day p { margin:0; font-size:14px; line-height:1.47; }.notice { padding:12px; border-radius:11px; color:#7a4f28; background:var(--warm); font-size:13px; line-height:1.6; }.notice.good { color:#276e4f; background:var(--fresh); }.empty { padding:18px; border-radius:11px; color:var(--muted); background:#f5f5f7; text-align:center; font-size:14px; }
@media (max-width:1020px) { .hero { margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; } }
@media (max-width:834px) { .two-col { grid-template-columns:1fr; }.hero { align-items:flex-start; flex-direction:column; min-height:0; padding-top:48px; padding-bottom:48px; }.hero-stat { justify-content:flex-start; }.wheel-card,.weekly-card { min-height:auto; } }
@media (max-width:560px) { .page { width:min(100% - 20px,980px); }.hero { margin-left:-10px; margin-right:-10px; padding:38px 20px; }.hero h1 { font-size:40px; }.hero-text { font-size:18px; }.card { padding:20px; }.section-title h2 { font-size:24px; }.form-row,.dish-form,.weekly-controls { grid-template-columns:1fr; }.dish-form .ingredient-input,.dish-form button { grid-column:auto; grid-row:auto; }.guide { justify-content:flex-start; }.guide i { display:none; } }