:root {
  color-scheme: light;
  --canvas: #fffaf2;
  --cream: #fff8ec;
  --paper: #fffefd;
  --ink: #534839;
  --muted: #907f6c;
  --line: #efe4d5;
  --orange: #f7c79b;
  --orange-deep: #d47f45;
  --orange-light: #fff0de;
  --yellow: #ffe8a8;
  --yellow-light: #fff6dc;
  --green: #cce8b8;
  --green-light: #edf6e5;
  --green-dark: #577d4a;
  --shadow: 0 13px 44px rgba(125, 88, 45, .065);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #d99c64; outline-offset: 3px; }
a { color: var(--green-dark); }
button:disabled { opacity: .52; cursor: not-allowed; }
#app { min-height: 100vh; }
.site-shell { max-width: 1020px; margin: 0 auto; padding: 28px 30px 92px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.brand { display: inline-flex; align-items: center; text-align: left; gap: 12px; min-width: 0; }
.brand-icon { flex: none; width: 47px; height: 47px; border-radius: 15px; background: var(--yellow); box-shadow: inset 0 -2px 0 rgba(164,109,57,.08); display:flex; align-items:center; justify-content:center; }
.brand-icon svg { width: 30px; height:30px; }
.brand-title { font-size: 19px; font-weight: 800; letter-spacing: .035em; line-height: 1.22; }
.brand-sub { color: var(--muted); font-size: 10px; letter-spacing: .13em; margin-top: 3px; }
.header-actions { display:flex; align-items:center; gap:9px; }
.icon-button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); display:inline-flex; align-items:center; justify-content:center; height: 43px; width: 43px; border-radius: 14px; transition: background .16s, transform .16s; flex: none; }
.icon-button:hover { background: var(--orange-light); transform: translateY(-1px); }
.icon-button svg { width: 19px; height:19px; }
.btn { background: var(--orange); border: 1px solid #efbc8b; min-height: 43px; padding: 10px 17px; border-radius: 13px; font-size: 13px; color: #5d412c; font-weight: 750; display:inline-flex; gap:7px; align-items:center; justify-content:center; transition: transform .16s, filter .16s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(.985); }
.btn svg { width: 17px; height:17px; }
.btn-secondary { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn-green { background: var(--green); border-color: #b3d6a0; color: #36572f; }
.btn-danger { color: #a84f45; background: #fff4ef; border-color: #f3d5ca; }
.btn-plain { background: transparent; border-color: transparent; color: var(--muted); }
.btn-sm { min-height:36px; padding: 8px 12px; font-size:12px; border-radius: 11px; }
.btn-full { width:100%; }
.hero { background: #ffe8ad; border:1px solid #f5dfac; border-radius: 25px; padding: 30px 36px; position:relative; overflow:hidden; min-height:165px; display:flex; flex-direction:column; justify-content:center; }
.hero:before { content:""; position:absolute; right: -32px; bottom:-87px; width:255px; height:255px; background:#ffd69f; border-radius:50%; }
.hero:after { content:""; position:absolute; right: 113px; top:-80px; width:170px; height:170px; border:1px solid rgba(236,157,91,.35); border-radius:50%; }
.hero-art { width:118px; height:118px; position:absolute; right:70px; top:22px; z-index:1; opacity:.92; }
.hero-eyebrow { font-size:11px; letter-spacing:.16em; color:#9b7148; font-weight:750; position:relative; z-index:1; }
.hero h1 { font-size: 29px; margin:9px 0 7px; letter-spacing:-.03em; position:relative; z-index:1; font-weight:850; }
.hero p { margin:0; color:#846947; font-size:13px; position:relative; z-index:1; }
.home-layout { display:grid; grid-template-columns: minmax(250px, .85fr) minmax(0, 1.15fr); gap:24px; margin-top:24px; align-items:start; }
.panel { background: var(--paper); border:1px solid var(--line); border-radius:21px; padding:22px; box-shadow:var(--shadow); }
.filter-panel { background: #fffdf9; }
.filter-panel h2, .list-heading h2 { font-size:17px; margin:0; font-weight:800; }
.subheading { color:var(--muted); font-size:12px; margin-top:5px; line-height:1.65; }
.field-wrap { position:relative; margin-top:17px; }
.search-box { display:flex; align-items:center; background:var(--paper); border:1px solid #e8ddce; height:49px; border-radius:14px; padding:0 13px; gap:10px; transition:border-color .18s; }
.search-box:focus-within { border-color:#a6c495; box-shadow:0 0 0 3px rgba(152,194,123,.13); }
.search-box svg { color:#9e917f; width:18px; height:18px; flex:none; }
.search-input { border:0; outline:none; min-width:0; width:100%; font-size:13px; background:transparent; color:var(--ink); }
.search-input::placeholder { color:#a69a8d; }
.search-input:focus-visible { outline:none; }
.search-tip { min-height:18px; color:var(--muted); font-size:11px; margin-top:8px; line-height:1.55; }
.filter-divider { border-top:1px dashed #e9ddca; margin:19px 0; }
.filter-label-row { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:14px; }
.filter-label { font-size:13px; font-weight:800; }
.text-link { background:none; border:0; padding:4px; color:#8b816c; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:9px 8px; }
.ingredient-tag { color:#617554; background:#f2f7ec; border:1px solid #dcebd1; padding:8px 12px; border-radius:999px; font-size:12px; display:inline-flex; align-items:center; gap:5px; line-height:1.1; min-height:34px; }
.ingredient-tag:hover { background:#e6f2da; }
.ingredient-tag.active { background:var(--green); border-color:#a4cf90; color:#3c6334; font-weight:800; }
.ingredient-tag svg { width:12px; height:12px; }
.tag-more { border:0; background:none; padding:7px 5px; font-size:12px; color:var(--green-dark); text-decoration:underline; text-underline-offset:3px; }
.guide-note { margin-top:17px; padding:13px 14px; background:var(--yellow-light); border-radius:12px; font-size:11px; line-height:1.9; color:#846c4c; }
.list-panel { padding:22px; }
.list-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.count { background:var(--yellow-light); color:#86673d; border-radius:999px; padding:6px 11px; font-size:11px; white-space:nowrap; }
.favorites-filter { background:transparent; color:#9d7861; border:1px solid #eedecd; border-radius:999px; display:inline-flex; align-items:center; gap:6px; padding:8px 11px; font-size:12px; white-space:nowrap; }
.favorites-filter.active { background:#fff0e6; border-color:#f2c3ae; color:#b56a52; }
.favorites-filter svg { width:14px; height:14px; }
.list-tools { display:flex; align-items:center; justify-content:flex-end; margin:-2px 0 13px; }
.recipe-list { display:flex; flex-direction:column; gap:10px; }
.recipe-card { border:1px solid #f0e7dc; background:#fff; border-radius:15px; min-height:78px; display:flex; align-items:stretch; transition: border-color .15s, background .15s, transform .15s; }
.recipe-card:hover { border-color:#eac6a7; background:#fffdf7; transform:translateY(-1px); }
.recipe-main { min-width:0; padding:16px 15px 16px 18px; flex:1; text-align:left; border:0; background:transparent; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; }
.recipe-name { font-size:14px; font-weight:800; color:var(--ink); }
.recipe-ingredients { color:var(--muted); font-size:12px; line-height:1.5; }
.recipe-side { display:flex; align-items:center; padding-right:12px; gap:4px; }
.heart-button { border:0; background:transparent; display:inline-flex; align-items:center; justify-content:center; height:39px; width:39px; border-radius:50%; color:#b9ab9b; }
.heart-button:hover { background:#fff1e7; }
.heart-button.active { color:#d98569; }
.heart-button svg { width:19px; height:19px; }
.chevron { color:#b5a997; width:18px; height:18px; margin-left:3px; pointer-events:none; }
.empty-state { padding:35px 20px; border:1px dashed #eddac6; border-radius:18px; text-align:center; background:#fffaf4; }
.empty-icon { margin:auto auto 13px; width:58px; height:58px; background:var(--yellow-light); display:flex; align-items:center; justify-content:center; border-radius:19px; }
.empty-icon svg { width:29px; height:29px; color:#d4a16b; }
.empty-state h3 { margin:0 0 8px; font-size:15px; }
.empty-state p { color:var(--muted); font-size:12px; line-height:1.9; margin:0 auto 15px; max-width:240px; }
.empty-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.footer { color:#a18c71; font-size:11px; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:43px; letter-spacing:.03em; }
.footer svg { width:14px; height:14px; color:#df9e73; }
.back-link { display:inline-flex; align-items:center; gap:8px; background:transparent; border:0; padding:9px 3px; margin:0 0 17px; color:var(--muted); font-size:13px; }
.back-link svg { width:17px; height:17px; }
.detail-wrap, .editor-wrap { max-width:740px; margin:0 auto; }
.detail-card, .editor-card { background:var(--paper); border:1px solid var(--line); border-radius:23px; padding:30px 35px 35px; box-shadow:var(--shadow); }
.detail-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.detail-label { color:#9f8b72; letter-spacing:.12em; font-size:10px; font-weight:750; }
.detail-name { margin:8px 0 0; font-weight:850; font-size:29px; line-height:1.3; }
.detail-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.detail-top-separator { height:1px; background:var(--line); margin:23px 0; }
.recipe-section { padding:0 0 20px; margin-bottom:20px; border-bottom:1px dashed var(--line); }
.recipe-section:last-of-type { border-bottom:0; margin-bottom:0; }
.section-title { display:flex; align-items:center; gap:9px; color:var(--green-dark); font-size:13px; font-weight:800; margin:0 0 11px; }
.section-title svg { width:17px; height:17px; }
.section-content { margin:0; color:var(--ink); line-height:1.9; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.main-chip-list { display:flex; flex-wrap:wrap; gap:9px; }
.main-chip { background:var(--green-light); color:#4d7040; border-radius:10px; padding:8px 13px; font-size:13px; }
.steps-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px; }
.step-item { display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.85; }
.step-number { flex:none; background:var(--yellow-light); color:#a77b49; font-size:11px; font-weight:800; width:26px; height:26px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.step-content { flex:1; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.note-card { background:#fff7dc; border:1px solid #f3e4b7; border-radius:14px; padding:16px 18px; margin-top:23px; }
.note-card h3 { margin:0 0 8px; color:#927449; font-size:13px; display:flex; gap:7px; align-items:center; }
.note-card h3 svg { width:17px; height:17px; }
.note-card p { margin:0; font-size:13px; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; }
.detail-bottom { border-top:1px solid var(--line); margin-top:23px; padding-top:22px; display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; }
.wake-button { border:1px solid #d9e8d0; color:var(--green-dark); background:#f4faee; border-radius:12px; min-height:40px; display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:9px 14px; font-size:12px; font-weight:750; }
.wake-button.active { background:var(--green); border-color:#b4d79f; }
.wake-button svg { width:16px; height:16px; }
.wake-help { color:var(--muted); font-size:11px; max-width:240px; line-height:1.65; }
.source-link { font-size:13px; overflow-wrap:anywhere; }
.editor-heading { font-size:22px; margin:0 0 4px; }
.editor-sub { color:var(--muted); font-size:12px; margin:0 0 24px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:19px 16px; }
.form-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.form-field.wide { grid-column:1/-1; }
.form-field label { font-size:13px; font-weight:800; color:var(--ink); }
.optional { color:#aa9a87; font-size:11px; font-weight:500; margin-left:5px; }
.form-field input, .form-field textarea { width:100%; border:1px solid #e8ddce; border-radius:13px; background:#fffcf7; color:var(--ink); padding:13px 14px; font-size:13px; outline:0; resize:vertical; line-height:1.65; }
.form-field input:focus, .form-field textarea:focus { border-color:#a6c495; box-shadow:0 0 0 3px rgba(152,194,123,.13); }
.form-field input::placeholder, .form-field textarea::placeholder { color:#ad9f8d; }
.field-help { font-size:11px; color:var(--muted); line-height:1.6; }
.editor-favorite { display:flex; align-items:center; gap:10px; background:#fff8ef; border:1px solid #f3e6d7; padding:13px 14px; border-radius:12px; font-size:13px; }
.editor-favorite input { accent-color:#d98569; width:17px; height:17px; }
.editor-actions { display:flex; justify-content:flex-end; align-items:center; gap:9px; flex-wrap:wrap; margin-top:26px; }
.modal-backdrop { position:fixed; inset:0; z-index:20; background:rgba(51,40,27,.33); display:flex; justify-content:center; align-items:center; padding:18px; }
.modal { background:var(--paper); border-radius:22px; padding:25px; width:min(100%,460px); max-height:min(88dvh,750px); overflow:auto; box-shadow:0 24px 85px rgba(64,39,18,.2); }
.modal h2 { font-size:20px; margin:0 0 8px; }
.modal p { color:var(--muted); font-size:12px; line-height:1.85; margin:0 0 18px; }
.modal-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.modal-heading h2 { margin:0; }
.setting-item { padding:16px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.setting-item h3 { font-size:13px; margin:0 0 5px; }
.setting-item p { font-size:11px; margin:0; }
.modal-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; margin-top:19px; }
.import-info { background:var(--yellow-light); border-radius:12px; padding:14px; color:#856b47; font-size:12px; line-height:1.75; }
.import-choice { display:flex; flex-direction:column; gap:10px; margin-top:17px; }
.import-choice button { background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 15px; text-align:left; font-weight:750; font-size:13px; color:var(--ink); }
.import-choice button:hover { border-color:#b7d2a6; background:#f8fcf4; }
.import-choice span { display:block; font-weight:400; font-size:11px; color:var(--muted); margin-top:4px; }
.toast { position:fixed; z-index:50; left:50%; transform:translate(-50%,15px); bottom:calc(26px + env(safe-area-inset-bottom)); background:#52483b; color:#fff; padding:12px 18px; border-radius:14px; max-width:min(90vw,450px); width:max-content; font-size:12px; box-shadow:0 15px 40px rgba(50,40,25,.18); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; text-align:center; line-height:1.5; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.hide { display:none!important; }
@media (max-width: 770px) {
 .site-shell { padding:20px 19px 68px; }
 .home-layout { grid-template-columns:1fr; gap:16px; margin-top:16px; }
 .hero { min-height:141px; padding:25px; }
 .hero-art { right:33px; top:15px; width:95px; height:95px; }
 .hero h1 { font-size:24px; }
 .filter-panel, .list-panel { padding:19px; }
 .detail-card, .editor-card { padding:25px 23px; }
}
@media (max-width: 490px) {
 .site-shell { padding:17px 13px 70px; }
 .brand-icon { width:42px; height:42px; border-radius:13px; }
 .brand-title { font-size:17px; }
 .site-header { margin-bottom:21px; }
 .header-actions { gap:6px; }
 .header-add { padding:8px 10px; }
 .header-add svg { width:15px; height:15px; }
 .icon-button { width:40px; height:40px; }
 .hero { padding:22px; min-height:135px; border-radius:19px; }
 .hero h1 { max-width:230px; font-size:23px; }
 .hero p { max-width:215px; font-size:12px; }
 .hero-art { right:-6px; top:15px; width:88px; height:88px; opacity:.5; }
 .panel { border-radius:18px; padding:18px 16px; }
 .recipe-card { min-height:76px; }
 .detail-card, .editor-card { padding:22px 17px; border-radius:18px; }
 .detail-title-row { gap:8px; }
 .detail-name { font-size:24px; }
 .detail-actions { flex-wrap:nowrap; }
 .detail-actions .btn { padding:8px 9px; }
 .form-grid { grid-template-columns:1fr; }
 .form-field.wide { grid-column:1; }
 .detail-bottom { align-items:flex-start; }
 .wake-help { max-width:none; }
 .modal { padding:21px 18px; }
}
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
/* Small inline illustrations must not inherit the SVG default viewport size. */
.guide-note svg, .setting-item > svg, .source-link svg { width: 15px; height: 15px; vertical-align: middle; margin-right: 4px; }
.source-link svg { margin-left: 3px; }

/* V1.1 · compact ingredient picker, recent recipes, pagination */
.all-tags-button { margin-top:13px; width:100%; min-height:42px; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--green-light); border:1px solid #d6e6c9; border-radius:12px; color:var(--green-dark); font-size:12px; font-weight:750; }
.all-tags-button svg { width:15px; height:15px; }
.tags-hint { margin-top:10px; color:var(--muted); font-size:11px; line-height:1.6; }
.list-tools { justify-content:space-between; flex-wrap:wrap; gap:10px; }
.sort-wrap { color:var(--muted); font-size:12px; display:flex; gap:8px; align-items:center; position:relative; white-space:nowrap; }
.sort-wrap select { color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:11px; min-height:39px; padding:8px 29px 8px 10px; font-size:12px; appearance:none; cursor:pointer; }
.sort-wrap > svg { position:absolute; right:10px; width:13px; height:13px; pointer-events:none; }
.pagination { margin-top:21px; padding-top:17px; border-top:1px dashed var(--line); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:9px 8px; }
.page-numbers { display:flex; justify-content:center; align-items:center; gap:4px; }
.page-button { min-width:35px; min-height:38px; padding:7px 10px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:10px; font-weight:650; font-size:12px; display:inline-flex; align-items:center; justify-content:center; gap:3px; }
.page-button.active { background:var(--green); color:#315c2f; border-color:#a8cd93; }
.page-direction svg { width:13px; height:13px; }
.page-ellipsis { color:var(--muted); padding:5px 2px; }
.page-caption { flex:1 0 100%; color:var(--muted); text-align:center; font-size:11px; }
#results-area { scroll-margin-top:14px; }
.ingredient-picker { width:min(100%,570px); max-height:min(82dvh,750px); display:flex; flex-direction:column; gap:12px; }
.picker-subtitle { margin:4px 0 0!important; }
.picker-search { flex:none; }
.picker-tags { overflow-y:auto; overscroll-behavior:contain; align-content:flex-start; padding:6px 1px 9px; min-height:90px; flex:1; }
.picker-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; border-top:1px solid var(--line); padding-top:14px; }
.picker-selected { font-size:12px; color:var(--muted); }
.picker-empty { width:100%; text-align:center; margin:18px 0; }
@media (max-width: 490px) {
  .site-shell { padding:calc(13px + env(safe-area-inset-top)) 12px calc(65px + env(safe-area-inset-bottom)); }
  .hero { min-height:108px; padding:17px 18px; }
  .hero h1 { font-size:21px; margin:5px 0; }
  .hero p { font-size:12px; }
  .hero-eyebrow { font-size:9px; }
  .hero-art { width:73px; height:73px; right:2px; top:14px; }
  .site-header { margin-bottom:14px; }
  .filter-panel, .list-panel { padding:17px 15px; }
  .ingredient-tag { min-height:42px; padding:10px 12px; font-size:13px; }
  .field-wrap { margin-top:12px; }
  .search-input, .form-field input, .form-field textarea { font-size:16px; }
  .search-box { height:48px; }
  .guide-note { margin-top:12px; padding:11px 12px; }
  .filter-divider { margin:14px 0; }
  .filter-label-row { margin-bottom:10px; }
  .list-tools { margin-top:0; }
  .heart-button { min-height:44px; min-width:44px; }
  .btn, .icon-button, .back-link, .wake-button { min-height:44px; }
  .modal-backdrop.ingredients-backdrop { align-items:flex-end; padding:0; }
  .ingredient-picker { border-radius:24px 24px 0 0; width:100%; max-height:83dvh; padding:23px 18px calc(18px + env(safe-area-inset-bottom)); }
  .pagination { justify-content:space-between; }
  .page-numbers { order:3; flex:1 0 100%; }
  .page-caption { order:4; }
  .page-button { min-height:42px; min-width:42px; }
  .page-direction { flex:1; }
  .detail-card { padding:23px 17px; }
  .step-item, .section-content { font-size:15px; }
  .step-item { line-height:1.8; }
}
@media (max-width:350px) {
  .brand-sub { font-size:9px; letter-spacing:.07em; }
  .header-actions { gap:4px; }
  .header-add { font-size:12px; padding:8px; }
  .brand { gap:7px; }
  .hero h1 { font-size:20px; }
  .page-numbers { gap:2px; }
  .page-number { min-width:37px; }
}

/* V1.2: optional install affordance inside settings, platform-specific guide */
.install-card { border:1px solid #e1edcb; background:var(--green-light); border-radius:15px; padding:15px; margin:14px 0 6px; }
.install-heading { display:flex; align-items:center; gap:11px; }
.install-heading h3 { font-size:13px; margin:0 0 4px; color:#426136; }
.install-heading p { font-size:11px; margin:0; }
.install-app-icon { width:51px; height:51px; flex:none; border-radius:13px; overflow:hidden; box-shadow:0 3px 10px rgba(64,85,38,.12); }
.install-app-icon img { display:block; width:100%; height:100%; object-fit:cover; }
.modal .install-help { margin:12px 0 0; color:#50684a; font-size:11px; line-height:1.8; }
.install-actions { display:flex; align-items:center; gap:10px; margin-top:9px; }
.install-actions:empty { display:none; }
.install-actions [hidden], .installed-label[hidden] { display:none!important; }
.installed-label { color:#517b45; font-size:11px; font-weight:750; }
@media (max-width: 490px) { .install-card { padding:12px; } }