/* ひとさじ帖 — prototype UI. No build tools, fonts, or CSS libraries needed. */
:root {
  --canvas: #f9f8f4;
  --paper: #fffefa;
  --sidebar: #f2f2ea;
  --surface: #f5f4ed;
  --line: #e8e8df;
  --ink: #2e3930;
  --muted: #8d938b;
  --green: #46634d;
  --green-dark: #334c39;
  --green-pale: #e7ede5;
  --orange: #c67d57;
  --orange-pale: #f7e9dc;
  --shadow: 0 10px 35px rgba(46,57,48,.055);
  --radius: 19px;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline: 3px solid #94b59b; outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .48; }
svg { display: inline-block; flex-shrink: 0; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; width: 252px; height: 100vh; top: 0; left: 0; display: flex; flex-direction: column; padding: 35px 22px 21px; background: var(--sidebar); border-right: 1px solid #e8e9df; z-index: 40; }
.brand { display: flex; align-items: center; gap: 11px; margin: 0 9px 66px; }
.brand-mark { background: var(--green); color: #fff9ed; border-radius: 13px; height: 42px; width: 42px; font-size: 32px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-family: Georgia,serif; }
.brand-copy { display: flex; flex-direction: column; }
.brand-copy strong { font-size: 23px; letter-spacing: .08em; font-weight: 750; line-height: 1.35; }
.brand-copy small { color: #889387; font-family: Georgia,serif; font-size: 8px; letter-spacing: .15em; white-space: nowrap; }
.sidebar-group-title { margin: 0 16px 18px; font-size: 10px; font-family: Georgia,serif; letter-spacing: .22em; color: #a3aa9f; font-weight: bold; }
.main-nav { display: flex; flex-direction: column; gap: 8px; }
.main-nav a { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 10px; color: #707e70; font-size: 13px; font-weight: 650; min-height: 46px; transition: .18s; }
.main-nav a:hover, .main-nav a.active { color: var(--green); background: #e2e9df; }
.main-nav a.active { font-weight: 800; }
.nav-icon, .main-nav svg, .bottom-nav svg, .settings-link svg { width: 19px; height: 19px; display: inline-flex; align-items: center; }
.sidebar-bottom { margin-top: auto; }
.sidebar-note { position: relative; overflow: hidden; padding: 24px 17px 14px; border-radius: 15px; background: #e4e9da; margin-bottom: 20px; }
.sidebar-note-icon { position: absolute; right: -5px; top: -21px; font-size: 100px; color: #d1dbc8; line-height: 1; }
.sidebar-note strong { position: relative; display:block; font-size: 14px; letter-spacing: .02em; line-height: 1.8; }
.sidebar-note p { position: relative; margin: 10px 0 0; color: #778875; font-size: 10px; }
.settings-link { display:flex; align-items:center; gap: 12px; padding: 10px 13px; font-size: 12px; color: #788476; }
.settings-link:hover { color: var(--green); }
.sidebar-footer { font-size: 8px; font-family: Georgia,serif; letter-spacing: .14em; color: #b4bcad; margin: 30px 10px 0; }
.main-column { margin-left: 252px; min-width: 0; flex: 1; }
.topbar { height: 78px; border-bottom: 1px solid var(--line); padding: 0 clamp(24px,4.8vw,70px); display:flex; align-items:center; justify-content:space-between; background: #fcfbf7; }
.topbar-caption { font-size: 12px; color: #9a9b90; letter-spacing: .08em; }
.topbar-right { display:flex; align-items:center; gap: 18px; }
.topbar-date { font-size: 11px; color: #869083; }
.avatar { width: 34px; height: 34px; display:grid; place-items:center; border: 0; border-radius: 50%; background: var(--green-pale); color: var(--green); font-size: 12px; font-weight: 800; }
.mobile-brand,.bottom-nav { display: none; }
#app { width: min(1300px,100%); margin: 0 auto; padding: 35px clamp(22px,4.8vw,70px) 80px; }
.eyebrow { display:flex; align-items:center; gap: 8px; color: var(--orange); font-family: Georgia,serif; text-transform: uppercase; font-size: 10px; letter-spacing: .17em; font-weight: 800; }
.eyebrow .line { width: 23px; height: 1px; background: var(--orange); }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { line-height: 1.45; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom: 27px; }
.page-heading h1 { font-size: clamp(24px,2.6vw,32px); margin: 5px 0 3px; letter-spacing: .04em; }
.page-heading p { font-size: 12px; color: var(--muted); margin: 0; }
.page-title-sub { font-family: Georgia,serif; color: var(--orange); font-weight: bold; font-size: 10px; letter-spacing: .15em; }
.hero { position: relative; min-height: 262px; background: linear-gradient(110deg,#e6ecdf 0%,#ebefe6 62%,#e0e8d7 100%); border-radius: 21px; overflow: hidden; padding: 33px 36px; display: flex; align-items: center; margin-bottom: 33px; }
.hero::after { content:""; position:absolute; right: -70px; top:-110px; width: 395px; height:395px; border:1px solid rgba(255,255,255,.8); border-radius:50%; }
.hero::before { content:""; position:absolute; right: 4%; bottom:-240px; width:390px; height:390px; background:rgba(255,255,255,.32); border-radius:50%; }
.hero-content { position:relative; z-index:2; flex: 1; }
.hero-badge { display:inline-flex; align-items:center; gap:7px; font-size:10px; color: var(--green); font-weight:800; letter-spacing: .03em; margin-bottom:14px; }
.hero h2 { font-size: clamp(22px, 2.8vw, 35px); letter-spacing: .065em; line-height:1.6; margin:0 0 10px; color:#364f3b; }
.hero h2 em { font-style:normal; color:var(--orange); }
.hero p { color:#7d8d7d; font-size:12px; margin:0 0 23px; line-height:1.8; }
.hero-visual { width: 34%; min-width: 190px; z-index:1; position:relative; display:grid; place-items:center; align-self:stretch; }
.hero-plate { width:clamp(180px,20vw,260px); height:clamp(180px,20vw,260px); border-radius:50%; background:radial-gradient(circle at 50% 45%,#fffefa 0 57%,#e6e5da 59% 67%,#fefef9 68% 100%); box-shadow: 12px 19px 33px rgba(79,86,63,.15),inset -5px -6px 15px #deded4; transform:rotate(-13deg); display:grid; place-items:center; }
.hero-plate::after { content:""; position:absolute; width:63%; height:63%; border-radius:50%; border:1px solid #eeeee4; }
.hero-dish { position:relative; font-size: clamp(100px,12.5vw,157px); line-height:1; z-index:1; filter:drop-shadow(5px 9px 4px rgba(52,67,38,.12)); transform:rotate(13deg); }
.hero-decoration { position:absolute; font-size:50px; right:5%; top:7%; opacity:.65; transform:rotate(25deg); }
.btn { border:0; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:10px; padding:12px 18px; font-size:12px; font-weight:750; white-space:nowrap; transition:transform .16s, background .16s,box-shadow .16s; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn:active:not(:disabled) { transform:translateY(0); }
.btn svg { width:17px; height:17px; }
.btn-primary { background:var(--green); color:white; box-shadow:0 5px 14px rgba(53,89,60,.11); }
.btn-primary:hover:not(:disabled) { background:var(--green-dark); }
.btn-white { background:var(--paper); color:var(--green); box-shadow:0 5px 14px rgba(30,55,30,.05); }
.btn-outline { background:var(--paper); border:1px solid #dde3d8; color:var(--green); }
.btn-soft { background:var(--green-pale); color:var(--green); }
.btn-danger { background:#f9e6e2; color:#aa4b3d; }
.btn-small { padding:9px 13px; font-size:11px; border-radius:8px; }
.btn-icon { width:37px; height:37px; padding:0; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap: 12px; margin-bottom:17px; }
.section-head h2 { font-size:18px; margin:0; letter-spacing:.035em; }
.section-head .hint { font-size:11px; color:var(--muted); margin-left:10px; font-weight:400; }
.inline-link { display:inline-flex; align-items:center; gap:7px; background:none; border:0; font-weight:750; color:var(--green); font-size:11px; }
.inline-link svg { width:14px; height:14px; }
.filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:21px; }
.filter-chip { background:#f2f2ed; border:1px solid transparent; border-radius:100px; padding:8px 16px; font-size:11px; color:#889085; font-weight:650; transition:.18s; }
.filter-chip:hover { border-color:#d1dccb; }
.filter-chip.active { background:var(--green); color:#fff; }
.search-filter-bar { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:18px; }
.search-wrap { position:relative; width:min(410px,100%); }
.search-wrap > svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); height:18px; width:18px; color:#a3aa9f; pointer-events:none; }
.search-input { border:1px solid var(--line); outline:none; background:#fff; border-radius:11px; width:100%; height:46px; padding:0 14px 0 42px; color:var(--ink); font-size:12px; box-shadow: 0 2px 8px rgba(40,50,42,.02); }
.search-input:focus { border-color:#b3c7b5; box-shadow:0 0 0 3px #e7ede7; }
.search-input::placeholder { color:#aab1a7; }
.result-count { font-size:11px; color:var(--muted); white-space:nowrap; }
.recipe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:21px; }
.recipe-card { cursor:pointer; position:relative; min-width:0; background:#fff; border:1px solid #ecebe5; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(34,44,34,.035); transition:box-shadow .18s,transform .18s; }
.recipe-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); }
.food-art { overflow:hidden; position:relative; height:163px; display:grid; place-items:center; background:var(--food-bg,#f3ece2); }
.food-art::before { content:""; position:absolute; width: 174px; height:174px; border-radius:50%; background:radial-gradient(circle,#fffef6 0 57%,#e2dfd6 59% 67%,#fbfaf3 68%); box-shadow:11px 12px 18px rgba(45,45,30,.11); transform:translate(0,7px) rotate(-17deg); }
.food-art::after { content:""; position:absolute; width:118px; height:118px; border-radius:50%; border:1px solid rgba(214,206,188,.4); transform:translateY(7px); }
.food-art .food-emoji { font-size:88px; position:relative; z-index:2; line-height:1; filter:drop-shadow(3px 7px 5px rgba(54,54,35,.11)); }
.food-art .food-sprig { position:absolute; font-size:38px; top:7px; right:16px; opacity:.45; transform:rotate(34deg); }
.food-art.big { height:340px; border-radius:19px; }
.food-art.big::before { width:310px; height:310px; }
.food-art.big::after { width:211px; height:211px; }
.food-art.big .food-emoji { font-size:165px; }
.recipe-card-body { padding:14px 15px 16px; }
.card-overline { display:flex; align-items:center; justify-content:space-between; color:#9b9c90; font-size:10px; margin-bottom:5px; }
.card-overline .card-category { color:#af805e; font-weight:650; }
.recipe-card h3 { font-size:15px; font-weight:800; margin:0 0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-footer { display:flex; align-items:center; gap:13px; color:#92998f; font-size:10px; }
.card-footer span { display:inline-flex; align-items:center; gap:4px; }
.card-footer svg { width:13px; height:13px; }
.heart-btn { position:absolute; z-index:4; right:12px; top:12px; border:0; background:rgba(255,255,255,.93); color:#8c9789; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; box-shadow:0 3px 10px rgba(30,30,20,.07); }
.heart-btn svg { width:17px; height:17px; }
.heart-btn.is-on { color:#c57461; }
.heart-btn.is-on svg { fill:#c57461; }
.dashboard-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:31px; }
.stat-card { display:flex; align-items:center; gap:13px; background:white; border:1px solid var(--line); border-radius:12px; padding:16px 17px; }
.stat-icon { width:41px; height:41px; flex-shrink:0; border-radius:11px; display:grid; place-items:center; background:var(--green-pale); color:var(--green); }
.stat-icon.orange { background:var(--orange-pale); color:#b67a52; }
.stat-icon svg { width:21px; height:21px; }
.stat-label { display:block; color:#9aa298; font-size:10px; white-space:nowrap; }
.stat-number { font-size:20px; font-weight:850; line-height:1.2; }
.stat-number small { font-size:10px; font-weight:400; margin-left:3px; }
.empty-state { border:1px dashed #d8ded4; border-radius:18px; background:#fcfcf8; min-height:260px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:24px; gap:12px; }
.empty-state .empty-icon { font-size:45px; }
.empty-state h3 { margin:0; }
.empty-state p { color:var(--muted); font-size:12px; margin:0 0 8px; }
.back-link { display:inline-flex; align-items:center; gap:7px; color:#8d9a8b; font-size:12px; padding:6px 0 17px; }
.back-link svg { width:17px; height:17px; }
.detail-intro { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:23px; }
.detail-intro h1 { font-size:31px; margin:4px 0 7px; }
.detail-intro p { margin:0; color:#919b8d; font-size:12px; }
.detail-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.detail-feature { display:grid; grid-template-columns:1.15fr .85fr; gap:25px; margin-bottom:30px; }
.detail-summary { display:flex; flex-direction:column; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px; }
.detail-summary h2 { margin:10px 0; font-size:25px; }
.detail-summary p { font-size:12px; line-height:2; color:#8e988c; margin:0 0 22px; }
.detail-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:auto; padding-top:24px; border-top:1px solid var(--line); }
.detail-meta > div { display:flex; align-items:center; gap:9px; font-size:12px; }
.detail-meta svg { width:18px; height:18px; color:var(--green); }
.detail-meta small { display:block; font-size:10px; color:#a4aba0; }
.detail-columns { display:grid; grid-template-columns:minmax(265px,.83fr) minmax(0,1.17fr); align-items:start; gap:22px; }
.content-panel { border:1px solid var(--line); border-radius:17px; background:#fff; padding:24px; }
.content-panel h2 { display:flex; align-items:center; gap:10px; font-size:17px; margin:0 0 20px; }
.content-panel h2 > svg { width:21px; height:21px; color:var(--green); }
.panel-title-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:17px; }
.panel-title-row h2 { margin:0; }
.servings-control { display:flex; align-items:center; gap:8px; background:#f4f6f1; border-radius:10px; padding:4px; }
.servings-control button { border:none; width:28px; height:28px; border-radius:7px; background:#fff; color:var(--green); font-weight:800; display:grid; place-items:center; }
.servings-control span { font-size:12px; font-weight:750; min-width:37px; text-align:center; }
.ingredient-list { list-style:none; padding:0; margin:0; }
.ingredient-list li { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:13px 0; border-bottom:1px solid #f0f0eb; font-size:12px; }
.ingredient-list li:last-child { border:0; }
.ingredient-name { font-weight:600; }
.ingredient-value { color:#6b776c; font-weight:700; }
.ingredient-list li label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.ingredient-list li input[type=checkbox] { accent-color:var(--green); width:16px; height:16px; }
.ingredient-list li:has(input:checked) .ingredient-name { text-decoration:line-through; color:#b2b9b0; }
.steps-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:13px; }
.step-item { display:flex; text-align:left; gap:14px; align-items:flex-start; width:100%; background:#fff; border:1px solid #eeefe8; border-radius:12px; padding:15px 14px; transition:.15s; }
.step-item:hover { border-color:#bdcdb8; background:#fbfcf8; }
.step-number { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:var(--green); background:var(--green-pale); font-weight:800; flex-shrink:0; }
.step-item.done { background:#f3f7f1; border-color:#e0e9dc; }
.step-item.done .step-number { background:var(--green); color:#fff; }
.step-item.done .step-text { color:#acb6a9; text-decoration:line-through; }
.step-text { font-size:12px; line-height:1.95; padding-top:4px; }
.progress-label { margin:0 0 13px; color:#91a08c; font-size:11px; }
.progress-track { background:#e8ede4; height:5px; border-radius:10px; overflow:hidden; margin-bottom:18px; }
.progress-fill { background:var(--green); height:100%; transition:width .2s; }
.detail-bottom-note { margin-top:17px; font-size:11px; color:#9ca598; }
.form-layout { display:grid; grid-template-columns: minmax(250px,.74fr) minmax(0,1.26fr); gap:23px; align-items:start; }
.form-panel { background:#fff; border:1px solid var(--line); border-radius:17px; padding:24px; min-width:0; }
.form-panel h2 { display:flex; gap:8px; align-items:center; font-size:16px; margin:0 0 8px; }
.form-panel h2 svg { height:19px; width:19px; color:var(--green); }
.panel-help { font-size:11px; color:#939d90; margin:0 0 22px; line-height:1.85; }
.upload-zone { width:100%; min-height:180px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; flex-direction:column; border:1.5px dashed #b7c8b7; background:#f7faf5; border-radius:13px; padding:15px; position:relative; overflow:hidden; }
.upload-zone:hover,.upload-zone.dragover { background:#eef5eb; border-color:var(--green); }
.upload-zone svg { width:35px; height:35px; color:var(--green); }
.upload-zone strong { font-size:12px; }
.upload-zone small { font-size:10px; color:#9aa99a; }
.upload-zone input { position:absolute; inset:0; cursor:pointer; opacity:0; }
.upload-preview { max-width:100%; max-height:220px; border-radius:8px; object-fit:contain; }
.upload-zone:has(.upload-preview) { padding:10px; background:#f2f1ed; }
.recognition-status { border-radius:8px; background:#f7f5ef; font-size:11px; color:#6d806e; padding:10px 12px; margin:12px 0; }
.recognition-status.warning { background:#fff1e6; color:#a67452; }
.recognition-status.loading { background:#ebf2e7; }
.field { margin-bottom:16px; min-width:0; }
.field label,.group-label { display:block; font-size:11px; font-weight:750; color:#657363; margin-bottom:7px; }
.field input,.field textarea,.field select,.editor-row input,.editor-row textarea { min-width:0; width:100%; outline:none; border:1px solid #e3e7dd; border-radius:9px; background:#fff; color:var(--ink); padding:11px 12px; font-size:12px; }
.field input:focus,.field textarea:focus,.field select:focus,.editor-row input:focus,.editor-row textarea:focus { border-color:#98b29b; box-shadow:0 0 0 3px #e8f0e5; }
.field input::placeholder,.field textarea::placeholder,.editor-row input::placeholder { color:#b3bcb0; }
.field textarea { resize:vertical; line-height:1.8; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.form-section { padding-top:19px; border-top:1px solid #f0f0ea; margin-top:18px; }
.form-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.form-section-header h3 { margin:0; font-size:13px; }
.editor-rows { display:flex; flex-direction:column; gap:8px; }
.editor-row { display:flex; align-items:center; gap:8px; min-width:0; }
.editor-row .amount-input { width:95px; flex-shrink:0; }
.editor-row .unit-input { width:70px; flex-shrink:0; }
.editor-row .remove-row { flex-shrink:0; border:0; background:#faf4f1; color:#ad786c; width:32px; height:36px; border-radius:8px; display:grid; place-items:center; }
.editor-row .remove-row svg { height:15px; width:15px; }
.editor-row .step-index { flex-shrink:0; border-radius:9px; background:#eef2eb; width:28px; height:33px; display:grid; place-items:center; font-size:11px; font-weight:800; color:var(--green); }
.editor-row textarea { resize:vertical; min-height:52px; }
.form-actions { display:flex; justify-content:flex-end; gap:11px; padding-top:22px; border-top:1px solid #eeefe9; margin-top:22px; }
.form-vertical-actions { display:flex; flex-direction:column; gap:9px; }
.small-note { font-size:10px; color:#9ba497; line-height:1.9; }
.demo-text-button { border:0; background:transparent; color:var(--green); text-decoration:underline; font-size:11px; padding:6px 0; }
.settings-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.settings-grid .form-panel { min-height:210px; }
.settings-grid h2 { margin-bottom:10px; }
.settings-grid .btn { margin:5px 7px 5px 0; }
.settings-grid p { font-size:12px; color:#849082; }
.callout { display:flex; gap:10px; align-items:start; padding:13px 14px; border-radius:10px; background:#f6f3e8; color:#807f64; font-size:11px; margin:18px 0 0; }
.callout svg { width:18px; height:18px; }
.toast { position:fixed; z-index:120; right:26px; bottom:25px; background:#354d3d; color:white; border-radius:11px; padding:13px 18px; font-size:12px; box-shadow:0 15px 40px #0002; opacity:0; pointer-events:none; transform:translateY(10px); transition:.24s; max-width:min(390px,calc(100vw - 30px)); }
.toast.show { opacity:1; transform:translateY(0); }
.card-subtitle { color:#a5aea0; font-size:11px; }
.section-space { margin-top:29px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:1230px) { .sidebar { width:220px; padding-left:15px; padding-right:15px; } .main-column { margin-left:220px; } .recipe-grid { gap:15px; } .hero { padding:27px; } .recipe-card h3 { font-size:14px; } }
@media(max-width:1050px) { .recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .detail-feature { grid-template-columns:1fr 1fr; } .food-art.big { height:290px; } .food-art.big::before { width:250px;height:250px; } .food-art.big::after { width:170px;height:170px; } .food-art.big .food-emoji { font-size:140px; } .detail-columns { grid-template-columns:1fr 1.15fr; } .detail-intro { flex-direction:column; } }
@media(max-width:820px) { .sidebar { display:none; } .main-column { margin-left:0; } .topbar { height:65px; padding:0 25px; } .topbar-caption { display:none; } .mobile-brand { display:flex; align-items:center; gap:9px; font-size:17px; letter-spacing:.05em; } .mobile-brand .brand-mark { height:33px; width:33px; border-radius:10px; font-size:25px; } #app { padding:25px 25px 115px; } .bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:45; display:flex; justify-content:space-around; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,251,.98); border-top:1px solid var(--line); box-shadow:0 -4px 20px #00000008; } .bottom-nav a { display:flex; align-items:center; flex-direction:column; justify-content:center; gap:2px; width:24%; color:#929e92; padding:4px; } .bottom-nav a.active { color:var(--green); font-weight:800; } .bottom-nav a > svg { height:20px; width:20px; } .bottom-nav small { font-size:10px; } .toast { bottom:95px; } }
@media(max-width:610px) { .topbar { padding:0 18px; } #app { padding:23px 17px 115px; } .page-heading h1 { font-size:26px; } .page-heading { align-items:flex-start; } .page-heading .btn { padding:9px 12px; } .hero { min-height:253px; padding:24px 22px; margin-bottom:22px; } .hero h2 { font-size:22px; } .hero p { max-width:215px; } .hero-visual { position:absolute; width:160px; min-width:160px; bottom:-47px; right:-40px; opacity:.93; height:190px; } .hero-plate { width:180px; height:180px; } .hero-dish { font-size:112px; } .hero-decoration { display:none; } .hero-content { max-width:90%; } .hero-badge { font-size:9px; } .dashboard-strip { gap:8px; margin-bottom:25px; } .stat-card { flex-direction:column; gap:4px; padding:12px 8px; align-items:flex-start; } .stat-icon { height:30px; width:30px; border-radius:8px; } .stat-icon svg { width:16px; height:16px; } .stat-number { font-size:17px; } .stat-label { font-size:9px; } .recipe-grid { gap:11px; } .food-art { height:124px; } .food-art::before { width:143px; height:143px; } .food-art::after { width:95px; height:95px; } .food-art .food-emoji { font-size:66px; } .food-art .food-sprig { font-size:26px; } .recipe-card-body { padding:10px 11px 12px; } .recipe-card h3 { font-size:12px; margin-bottom:5px; } .card-overline { font-size:9px; } .card-footer { font-size:9px; gap:6px; flex-wrap:wrap; } .heart-btn { top:7px; right:7px; width:31px; height:31px; } .filter-chip { padding:7px 12px; } .search-filter-bar { align-items:stretch; flex-direction:column; gap:5px; } .search-wrap { width:100%; } .result-count { align-self:flex-end; } .detail-feature,.detail-columns,.form-layout,.settings-grid { grid-template-columns:1fr; gap:15px; } .detail-summary { padding:21px; } .food-art.big { height:265px; } .detail-intro h1 { font-size:27px; } .detail-actions { width:100%; } .content-panel,.form-panel { padding:19px; } .form-layout .form-panel:first-child { order:0; } .editor-row .amount-input { width:65px; } .editor-row .unit-input { width:54px; } .field-grid { gap:9px; } .field input,.field textarea,.field select,.editor-row input,.editor-row textarea { padding:10px 8px; } .topbar-date { display:none; } }
@media(max-width:375px) { .recipe-grid { grid-template-columns:1fr 1fr; gap:9px; } .hero h2 { font-size:20px; } .hero-visual { right:-66px; } .hero-content { max-width:94%; } .stat-label { white-space:normal; } .card-footer span:last-child { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* v2 cloud auth / AI */
.auth-panel { max-width:590px; margin:26px auto; padding:30px; }
.auth-panel .field { margin:18px 0; }
.auth-actions {display:flex;flex-wrap:wrap;gap:12px;}
.auth-actions .btn {min-width:145px;justify-content:center;}
.recognition-status {overflow-wrap:anywhere;}
@media(max-width:610px) { .auth-panel {padding:20px;margin:12px auto;} .auth-actions .btn {flex:1;} }

/* v2.1 — Title-to-recipe free auto-fill */
.auto-recipe-panel{padding:24px;border-radius:18px;background:linear-gradient(135deg,#f0f3e9,#fdfaf4);border:1px solid #d9e3d0;margin-bottom:25px}
.auto-recipe-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.auto-free-tag{padding:6px 10px;border-radius:100px;background:#dcebdc;color:#2e653d;font-size:12px;font-weight:800}
.auto-method{font-size:12px;letter-spacing:.04em;color:#70816b;font-weight:700}
.auto-recipe-panel h2{margin:0 0 9px;font-size:21px;display:flex;gap:10px;align-items:center}
.auto-recipe-panel .field{margin-top:13px}
.auto-recipes-hint{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:13px;font-size:12px;color:#6b796a}
.auto-example{border:1px solid #d6dfd2;background:#fff;border-radius:100px;padding:6px 10px;color:#52654e;cursor:pointer;font-family:inherit;font-size:12px}
.auto-example:hover{border-color:#78966e;background:#f9fff5}
.auto-recipe-panel .form-vertical-actions{margin-top:16px;gap:9px}
.auto-recipe-panel .form-vertical-actions button{justify-content:center}
.auto-recipe-panel .recognition-status{margin-top:14px;overflow-wrap:anywhere}
.auto-privacy{font-size:12px;line-height:1.8;color:#74806f;margin:12px 0 0}
.ocr-recipe-panel{border-top:1px solid #e8e7df;padding-top:22px}
@media(max-width:640px){.auto-recipe-panel{padding:17px}.auto-recipe-panel h2{font-size:19px}}

/* v2.2 ChatGPT-assisted import: responsive and accessible */
.chatgpt-assist-panel{background:#f7f7f2;border:1px solid #dce5d8;border-radius:18px;margin:20px 0 16px;padding:20px}
.chatgpt-head{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px;color:#2f4939}
.chatgpt-head strong{font-size:1rem}
.chatgpt-label{font-size:0.74rem;font-weight:700;background:#dfeae0;color:#325943;padding:5px 11px;border-radius:30px}
.chatgpt-details{margin-top:12px}.chatgpt-details summary{cursor:pointer;color:#46664e;font-size:.86rem}
.chatgpt-prompt-text{width:100%;font-size:.82rem;line-height:1.5;margin-top:10px;box-sizing:border-box;resize:vertical}
.chatgpt-assist-panel .form-vertical-actions{margin-top:12px}
.chatgpt-assist-panel .field textarea{width:100%;box-sizing:border-box}
@media(max-width:640px){.chatgpt-assist-panel{padding:15px}.chatgpt-assist-panel .btn{width:100%;white-space:normal}}

/* v2.3 - Offline Mac AI status */
.ollama-status{padding:11px 13px;margin:10px 0 18px;border-radius:10px;background:#f8eee8;color:#876654;font-size:.82rem;line-height:1.6;border:1px solid #efdcd1;}
.ollama-status.ready{background:#e7f1e9;color:#355d43;border-color:#c7dfcd;}

/* v2.4 — mobile-first editing, readability and cooking mode */
.quality-report { padding:13px 14px;border-radius:12px;font-size:13px;line-height:1.7;margin-top:18px;overflow-wrap:anywhere; }
.quality-report:empty { display:none; }
.quality-report.alert { background:#fff7ec;border:1px solid #e4cdad;color:#70553b; }
.quality-report.ok { background:#edf5ee;border:1px solid #caddcc;color:#2f6142; }
.quality-report ul{padding-left:20px;margin:8px 0;}.quality-report p{font-size:12px;margin:8px 0 0;}
.mobile-camera{display:none;margin:12px 0 0;justify-content:center;cursor:pointer;}
.cooking-mode .detail-feature{display:none;}
.cooking-mode .detail-columns{grid-template-columns:1fr 1.35fr;}
.cooking-mode .step-text{font-size:1rem;line-height:1.9;}
.cooking-mode .step-item{min-height:66px;}
@media(max-width:820px){
  input,textarea,select {font-size:16px!important;}
  .mobile-camera{display:flex;}
  #app{padding-bottom:calc(124px + env(safe-area-inset-bottom));}
  .detail-actions{flex-wrap:wrap;}
  .detail-actions .btn{min-height:44px;}
  .form-actions{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom));z-index:32;background:#fffefa;padding:12px 8px;margin-left:-6px;margin-right:-6px;box-shadow:0 -12px 24px #0000000c;border-radius:12px;}
  .form-actions .btn-primary{min-height:48px;}
  .auto-recipe-panel button,.chatgpt-assist-panel button{min-height:44px;white-space:normal;text-align:center;}
  .upload-zone{min-height:125px;}
  .cooking-mode .detail-columns{grid-template-columns:1fr;}
}
@media(max-width:530px){
  .editor-row{display:grid;grid-template-columns:minmax(0,1fr) 85px 65px 34px;gap:5px;align-items:center;min-width:0;}
  .editor-row>*{min-width:0;box-sizing:border-box;}
  .editor-row .amount-input{width:100%;}.editor-row .unit-input{width:100%;}
  .editor-row:has(textarea){grid-template-columns:28px minmax(0,1fr) 35px;}
  .editor-row textarea{min-width:0;width:100%;}
  .form-panel{min-width:0;padding:15px;}
  .field-grid{grid-template-columns:1fr 1fr;}
  .detail-actions{gap:8px;}
  .detail-actions .btn{flex:1;justify-content:center;}
  .content-panel{padding:16px;}
  .ingredient-list li{gap:8px;}
  .ingredient-value{max-width:36%;overflow-wrap:anywhere;text-align:right;}
  .detail-columns .step-item{padding:15px 10px;}
  .cooking-mode .step-text{font-size:1.05rem;}
}