@import "https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap";:root{--bg:#f3f4f6;--surface:#fff;--surface-2:#f8fafc;--ink:#0f172a;--muted:#64748b;--line:#dbe2ea;--accent:#0f766e;--accent-soft:#ccfbf1;--danger:#dc2626;--radius-lg:14px;--radius-md:10px}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--ink);background:radial-gradient(circle at 10% 0%, #ecfeff 0%, transparent 35%), radial-gradient(circle at 90% 0%, #fffbeb 0%, transparent 32%), var(--bg);font-family:Noto Sans SC,Manrope,sans-serif}.app{max-width:1380px;min-height:100vh;margin:0 auto;padding:12px 12px 84px}.topbar{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:#0f766e;margin:0;font-family:Manrope,sans-serif;font-size:11px;font-weight:800}h1{margin:2px 0 0;font-family:Manrope,sans-serif;font-size:clamp(1.35rem,2.1vw,2rem)}h2,h3{margin:0}input,select,textarea,button{font:inherit}input,select,textarea{border:1px solid var(--line);background:#fff;border-radius:10px;width:100%;padding:8px 10px}input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb, var(--accent) 30%, #fff 70%);outline-offset:1px}button{cursor:pointer;border:none;border-radius:999px;transition:transform .12s,opacity .12s}button:hover{transform:translateY(-1px)}button:disabled{opacity:.6;cursor:not-allowed}.primary-btn,.accent-btn{color:#fff;background:linear-gradient(130deg,#0f766e,#0e8c82);padding:8px 13px;font-weight:700}.subtle-btn{color:#115e59;background:#ecfeff;border:1px solid #bde5de;padding:7px 11px}.danger-btn{background:var(--danger);color:#fff;padding:8px 12px}.panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--surface) 96%, #ecfeff 4%);padding:12px}.toolbar{flex-wrap:wrap;gap:8px;display:flex}.search-input{flex:1;min-width:220px}.toolbar-actions{flex-wrap:wrap;gap:6px;display:flex}.inline-tag-row{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.group-strip{gap:6px;margin-top:10px;padding-bottom:2px;display:flex;overflow-x:auto}.group-pill{white-space:nowrap;color:#0f766e;background:#fff;border:1px solid #d4e5e2;padding:6px 10px}.group-pill.active{color:#fff;background:#0f766e}.tag-chip{background:#fff;border:1px solid #d6e3ea;border-radius:999px;padding:4px 10px;font-size:12px}.tag-chip.active{background:var(--accent-soft);border-color:#99e0d7}.tag-chip.small{padding:2px 8px;font-size:11px}.tag-wrap{flex-wrap:wrap;gap:5px;display:flex}.recipe-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:8px;margin-top:10px;display:grid}.recipe-card{border-radius:var(--radius-md);background:var(--surface);cursor:pointer;border:1px solid #d6e2e8;grid-template-columns:86px minmax(0,1fr);gap:8px;padding:6px;display:grid}.recipe-thumb-wrap{background:#e2e8f0;border-radius:9px;width:86px;height:86px;overflow:hidden}.recipe-thumb{object-fit:cover;width:100%;height:100%}.recipe-card-body{min-width:0}.card-headline{justify-content:space-between;gap:6px;display:flex}.card-headline h3{white-space:nowrap;text-overflow:ellipsis;font-size:15px;line-height:1.3;overflow:hidden}.group-badge{color:#0f766e;background:#ecfeff;border-radius:999px;flex-shrink:0;padding:2px 8px;font-size:11px}.lock-badge{color:#b91c1c;background:#fee2e2;border-radius:999px;flex-shrink:0;padding:2px 8px;font-size:11px}.meta-row{color:var(--muted);justify-content:space-between;align-items:center;margin-top:5px;font-size:12px;display:flex}.note-text{color:#334155;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:5px 0 0;font-size:12px;display:-webkit-box;overflow:hidden}.stars{gap:1px;line-height:1;display:inline-flex}.star{font-size:14px}.star.full{color:#f59e0b}.star.empty{color:#cbd5e1}.star.half{color:#0000;background:linear-gradient(90deg,#f59e0b 50%,#cbd5e1 50%);-webkit-background-clip:text;background-clip:text}.group-page-header p,.hint{color:var(--muted);margin:5px 0 0}.new-group-row{gap:8px;margin-top:10px;display:flex}.new-group-row input{flex:1}.group-list{gap:8px;margin-top:10px;display:grid}.group-item{border-radius:var(--radius-md);background:#fff;border:1px solid #d6e3ea;padding:10px}.group-main{justify-content:space-between;align-items:center;gap:8px;display:flex}.group-main h3 small{color:var(--muted)}.group-actions{gap:6px;display:flex}.group-preview{flex-wrap:wrap;gap:5px;margin-top:7px;display:flex}.group-preview-item{color:#475569;background:#f1f5f9;border-radius:999px;padding:3px 8px;font-size:11px}.bottom-nav{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:1px solid #d5e0e7;border-radius:999px;grid-template-columns:1fr 1fr;gap:5px;width:min(95%,460px);padding:5px;display:grid;position:fixed;bottom:8px;left:50%;transform:translate(-50%)}.nav-btn{color:#334155;background:0 0;padding:9px;font-weight:700}.nav-btn.active{color:#fff;background:#0f766e}.modal-mask{z-index:50;background:#02061773;justify-content:center;align-items:center;padding:12px;display:flex;position:fixed;inset:0}.modal{border-radius:var(--radius-lg);background:#fff;border:1px solid #dbe3ea;width:min(100%,780px);max-height:92vh;padding:14px;overflow:auto}.modal-actions{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.spin-modal{text-align:center}.wheel-wrap{aspect-ratio:1;width:min(72vw,360px);margin:12px auto 0;position:relative}.wheel-pointer{z-index:3;border-top:24px solid #ef4444;border-left:12px solid #0000;border-right:12px solid #0000;width:0;height:0;position:absolute;top:-8px;left:50%;transform:translate(-50%)}.wheel{touch-action:none;border:8px solid #fff;border-radius:50%;width:100%;height:100%;transition:transform 3.2s cubic-bezier(.17,.67,.12,1);position:relative;box-shadow:inset 0 0 0 1px #dbe3ea,0 8px 24px #0f172a26}.wheel-label{transform-origin:50%;color:#0f172a;white-space:nowrap;pointer-events:none;background:#ffffffe0;border:1px solid #d9e2ea;border-radius:999px;padding:1px 6px;font-size:11px;font-weight:700;position:absolute;top:50%;left:50%}.wheel-tooltip{z-index:4;color:#fff;white-space:nowrap;pointer-events:none;background:#0f172a;border-radius:8px;padding:4px 8px;font-size:12px;position:absolute;transform:translate(-50%,-100%)}.spin-result{margin-top:10px}.move-list{gap:6px;margin-top:8px;display:grid}.move-item{text-align:left;background:#f8fafc;border:1px solid #d5e2e8;border-radius:10px;padding:9px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;display:grid}label{flex-direction:column;gap:5px;font-size:14px;display:flex}.full-row{margin-top:10px}.ingredient-row{gap:7px;display:flex}.image-input-zone{background:var(--surface-2);border:1px solid #d8e3ea;border-radius:10px;grid-template-columns:128px minmax(0,1fr);gap:10px;padding:10px;display:grid}.image-preview-frame{background:#e2e8f0;border-radius:9px;width:128px;height:128px;overflow:hidden}.image-preview-frame img{object-fit:cover;width:100%;height:100%}.image-actions{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.image-actions small{color:var(--muted);line-height:1.5}.hidden-file-input{display:none}.star-picker{gap:4px;display:inline-flex}.star-btn{background:0 0;border:none;padding:0;font-size:30px;line-height:1}.star-btn.full{color:#f59e0b}.star-btn.empty{color:#cbd5e1}.star-btn.half{color:#0000;background:linear-gradient(90deg,#f59e0b 50%,#cbd5e1 50%);-webkit-background-clip:text;background-clip:text}.error-text{color:#dc2626;font-size:12px}.empty-state{color:#475569;background:#fff;border:1px dashed #cbd5e1;border-radius:10px;padding:16px}@media (width>=720px){.recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=1024px){.recipe-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=1320px){.recipe-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=760px){.topbar{flex-direction:column;align-items:flex-start}.form-grid{grid-template-columns:1fr}.new-group-row{flex-direction:column}.group-main{flex-direction:column;align-items:flex-start}.image-input-zone{grid-template-columns:1fr}.image-preview-frame{width:100%;height:180px}.star-btn{font-size:34px}}