@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg:          #fbeae3;
  --surface:     #ffffff;
  --surface2:    #fbd8c7;
  --border:      #fbaf95;
  --accent:      #fb9d9e;
  --accent-dark: #e8787a;
  --text:        #3c1a18;
  --text2:       #6b3830;
  --text3:       #a07060;
  --tag-bg:      #fbd8c7;
  --tag-border:  #fbaf95;
  --success:     #5a9a5a;
  --warning:     #d4860a;
  --danger:      #c03030;
  --shadow:      0 2px 8px rgba(251,157,158,0.25);
  --shadow-lg:   0 8px 32px rgba(251,157,158,0.20);
  --radius:      12px;
  --radius-sm:   8px;
}

*{box-sizing:border-box;margin:0;padding:0;}

body {
  font-family:'Noto Sans TC',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(251,175,149,.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(251,157,158,.10) 0%, transparent 50%);
}

/* ── Header ── */
.header {
  background:var(--surface);
  border-bottom:2px solid var(--border);
  padding:0 20px;
  height:58px;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:var(--shadow);
}
.header-logo {
  display:flex;align-items:center;gap:9px;
  font-size:19px;font-weight:700;color:var(--accent-dark);
}
.header-logo i { font-size:20px; color:var(--accent); }
.header-actions { display:flex;gap:8px;margin-left:auto; }
.header-btn {
  background:none;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:6px 11px;
  font-size:16px;line-height:1;cursor:pointer;color:var(--text2);
  transition:background .15s,border-color .15s;font-family:inherit;
}
.header-btn:hover { background:var(--surface2);border-color:var(--accent); }

/* ── Tabs ── */
.tabs {
  display:flex;
  background:var(--surface2);
  border-bottom:2px solid var(--border);
  padding:0 16px;
  overflow-x:auto;
  scrollbar-width:none;
  position:sticky;
  top:58px;
  z-index:99;
}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn {
  padding:12px 16px;
  font-size:13px;font-weight:500;
  color:var(--text3);cursor:pointer;
  border:none;background:none;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  transition:all .18s;
  white-space:nowrap;
  font-family:inherit;
  display:flex;align-items:center;gap:5px;
}
.tab-btn:hover{color:var(--text2);}
.tab-btn.active{color:var(--accent-dark);border-bottom-color:var(--accent);background:var(--surface);}

/* ── Layout ── */
.content{max-width:960px;margin:0 auto;padding:20px 16px calc(20px + 64px + env(safe-area-inset-bottom));}
.pane{display:none;}
.pane.active{display:block;}
.module-pane{display:none;}
.module-pane.active{display:block;}

/* ── Bottom Navigation ── */
.bottom-nav {
  position:fixed;bottom:0;left:0;right:0;
  height:calc(58px + env(safe-area-inset-bottom));
  background:var(--surface);
  border-top:2px solid var(--border);
  display:flex;align-items:stretch;
  z-index:100;
  box-shadow:0 -4px 20px rgba(251,157,158,0.22);
  padding-bottom:env(safe-area-inset-bottom);
}
.bnav-btn {
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  background:none;border:none;cursor:pointer;
  color:var(--text3);font-family:inherit;
  transition:color .18s,background .18s;
  padding:8px 4px;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.bnav-btn:hover{background:var(--surface2);color:var(--text2);}
.bnav-btn.active{color:var(--accent-dark);}
.bnav-btn.active::after{
  content:'';position:absolute;top:0;left:20%;right:20%;
  height:3px;background:var(--accent);border-radius:0 0 3px 3px;
}
.bnav-icon{font-size:20px;line-height:1;position:relative;}
.nav-badge{
  position:absolute;top:-6px;left:12px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--danger);color:#fff;
  border-radius:9px;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.bnav-label{font-size:10px;font-weight:700;letter-spacing:.3px;}

/* ── FAB ── */
.fab {
  position:fixed;
  bottom:calc(64px + env(safe-area-inset-bottom) + 14px);
  right:16px;
  width:52px;height:52px;
  border-radius:16px;
  background:var(--accent);color:#fff;
  border:none;font-size:24px;line-height:1;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(251,157,158,0.55);
  display:none;align-items:center;justify-content:center;
  z-index:90;
  transition:background .18s,transform .18s;
  -webkit-tap-highlight-color:transparent;
}
.fab.visible{display:flex;}
.fab:hover{background:var(--accent-dark);transform:translateY(-2px);}
.fab:active{transform:translateY(0);}

/* ── Card ── */
.card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);margin-bottom:14px;
}
.card-title{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--accent-dark);
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.card-title::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── Section header ── */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;min-height:36px;}
.sec-title{font-size:16px;font-weight:700;color:var(--text);}

/* ── Form ── */
.row{display:grid;gap:10px;margin-bottom:12px;}
.row.c2{grid-template-columns:1fr 1fr;}
.row.c3{grid-template-columns:1fr 1fr 1fr;}
.row.c4{grid-template-columns:repeat(4,1fr);}
.field{display:flex;flex-direction:column;}
label.lbl{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--text2);margin-bottom:5px;display:block;
}
input:not([type=checkbox]):not([type=radio]):not(.search-input),select,textarea {
  width:100%;padding:9px 12px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);font-size:15px;
  font-family:inherit;color:var(--text);
  transition:border-color .18s;-webkit-appearance:none;
}
input:not([type=checkbox]):not([type=radio]):not(.search-input):focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface);
}
textarea{resize:vertical;min-height:80px;line-height:1.5;}
input[type=checkbox]{
  width:16px;height:16px;cursor:pointer;flex-shrink:0;
  appearance:none;-webkit-appearance:none;
  background:var(--surface);border:2px solid var(--accent);border-radius:4px;
  position:relative;transition:background .15s;
}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent);}
input[type=checkbox]:checked::after{
  content:'';position:absolute;left:3px;top:0px;
  width:5px;height:8px;
  border:2px solid #fff;border-top:none;border-left:none;
  transform:rotate(45deg);
}

/* ── Buttons ── */
.btn{
  padding:9px 18px;border:none;border-radius:var(--radius-sm);
  font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
  transition:all .15s;display:inline-flex;align-items:center;gap:5px;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(251,157,158,.4);}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px);}
.btn-secondary{background:var(--surface2);color:var(--text2);border:1.5px solid var(--border);}
.btn-secondary:hover{background:var(--border);}
.btn-success{background:#5a9a5a;color:#fff;box-shadow:0 2px 8px rgba(90,154,90,.3);}
.btn-success:hover{background:#4a8a4a;transform:translateY(-1px);}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-icon{padding:6px;border-radius:var(--radius-sm);background:none;border:1.5px solid var(--border);color:var(--text3);cursor:pointer;font-size:14px;transition:all .15s;font-family:inherit;}
.btn-icon:hover{background:var(--surface2);border-color:var(--accent);color:var(--text);}
.btn-danger-icon{background:none;border:1.5px solid #f0b8b8;color:#c03030;padding:6px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;transition:all .15s;}
.btn-danger-icon:hover{background:#fde8e8;}

/* ── Modal ── */
.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(60,26,24,.45);z-index:200;
  align-items:center;justify-content:center;padding:16px;
}
.overlay.open{display:flex;}
.modal{
  background:var(--surface);border-radius:var(--radius);
  padding:24px;width:100%;max-width:560px;
  max-height:92vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);
}
.modal-hdr{
  font-size:15px;font-weight:700;margin-bottom:18px;
  display:flex;justify-content:space-between;align-items:center;
  color:var(--text);
}
.modal-x{
  cursor:pointer;color:var(--text3);font-size:0;
  border:none;background:none;line-height:1;padding:4px;
}
.modal-x::before{
  font-family:"Font Awesome 6 Free";font-weight:900;
  content:'\f00d';font-size:18px;
}
.modal-x:hover{color:var(--text);}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border);}
.divider{height:1px;background:var(--border);margin:14px 0;}

/* ── Toast ── */
#app-toast {
  position:fixed;top:70px;left:50%;
  transform:translateX(-50%) translateY(-10px);
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:11px 22px;
  font-size:13px;color:var(--text);
  box-shadow:var(--shadow-lg);z-index:310;
  max-width:min(380px,calc(100vw - 32px));
  text-align:center;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;white-space:pre-line;
}
#app-toast.toast-show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
#app-toast.toast-err{border-color:#f0b8b8;color:#c03030;background:#fdf7f6;}
#app-toast.toast-ok{border-color:var(--accent);color:#3a6a3a;}

/* ── 更新內容（What's New）── */
.cl-version{display:flex;align-items:center;gap:8px;margin:16px 0 10px;}
.cl-version:first-child{margin-top:4px;}
.cl-ver-tag{background:var(--accent);color:#fff;border-radius:20px;padding:2px 12px;font-family:'DM Mono',monospace;font-weight:700;font-size:13px;}
.cl-date{font-size:12px;color:var(--text3);}
.cl-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
.cl-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--text2);line-height:1.55;}
.cl-list li i.cl-dot{color:var(--accent);font-size:7px;margin-top:7px;flex-shrink:0;}

/* ── Confirm Dialog ── */
.confirm-modal{max-width:360px;}
.confirm-title{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text);}
.confirm-msg{font-size:14px;color:var(--text2);line-height:1.6;}
.confirm-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.btn-confirm-danger{background:#c03030;color:#fff;padding:9px 20px;border-radius:var(--radius-sm);border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.btn-confirm-danger:hover{background:#a02020;}

/* ── 食譜「只看能做的」切換 ── */
.make-toggle{
  display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--text2);
  margin-bottom:12px;cursor:pointer;user-select:none;
}
.make-toggle > i{color:var(--success);font-size:13px;}

/* ── 食譜可做標記 ── */
.make-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;
}
.make-badge.ok{background:#e6f4e6;color:#3a7a3a;border:1px solid #aadaaa;}
.make-badge.short{background:var(--surface2);color:var(--text3);border:1px solid var(--border);}

/* ── 採買清單對照庫存 ── */
.shop-ok{font-size:11px;font-weight:700;color:var(--success);white-space:nowrap;flex-shrink:0;}
.shop-buy{font-size:11px;font-weight:700;color:var(--accent-dark);white-space:nowrap;flex-shrink:0;}

/* ── 備份 ── */
.backup-stats{
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:14px;
  font-size:13px;color:var(--text2);text-align:center;
}
.backup-actions{display:flex;flex-direction:column;gap:10px;}
.backup-actions .btn{width:100%;justify-content:center;padding:11px;}

/* ── 食譜分享 ── */
.recipe-share-bar{display:flex;gap:8px;margin-bottom:12px;}
.share-pick{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s;}
.share-pick.on{border-color:var(--accent);background:var(--bg);}
.share-pick input{flex-shrink:0;}

/* ── Search box ── */
.search-box{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:50px;padding:0 16px;margin-bottom:14px;
  box-shadow:var(--shadow);
  transition:border-color .15s,box-shadow .15s;
}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 3px 12px rgba(251,157,158,.28);}
.search-box > i{color:var(--accent);font-size:14px;flex-shrink:0;}
.search-box input{
  flex:1;min-width:0;border:none;background:none;padding:11px 0;font-size:14px;
  color:var(--text);font-family:inherit;-webkit-appearance:none;
}
.search-box input::placeholder{color:var(--text3);}
.search-box input:focus{outline:none;border:none;background:none;box-shadow:none;}
.search-clear{
  background:var(--surface2);border:none;color:var(--text3);cursor:pointer;
  width:22px;height:22px;border-radius:50%;font-size:11px;line-height:1;
  flex-shrink:0;display:none;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.search-box.has-val .search-clear{display:flex;}
.search-clear:hover{background:var(--accent);color:#fff;}

/* ── Category filter ── */
.cat-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.cat-filter-btn{
  padding:4px 13px;border-radius:50px;font-size:12px;font-weight:600;
  border:1.5px solid var(--border);background:var(--surface2);
  color:var(--text3);cursor:pointer;font-family:inherit;transition:all .15s;
  display:inline-flex;align-items:center;gap:4px;
}
.cat-filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.cat-filter-btn:hover:not(.active){background:var(--border);color:var(--text2);}

/* ── Category picker (in modal) ── */
.cat-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}
.cat-btn{
  border:1.5px solid var(--border);background:var(--surface);
  color:var(--text2);border-radius:20px;padding:5px 13px;
  font-size:13px;font-family:inherit;cursor:pointer;
  transition:all .15s;-webkit-tap-highlight-color:transparent;
  display:inline-flex;align-items:center;gap:5px;
}
.cat-btn:hover{background:var(--surface2);border-color:var(--accent);}
.cat-btn.active{color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.18);}

/* ── Segment control ── */
.seg-ctrl{display:flex;border:1.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;width:100%;}
.seg-opt{display:none;}
.seg-lbl{flex:1;text-align:center;padding:9px 6px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text3);background:var(--surface2);border-right:1px solid var(--border);transition:background .15s,color .15s;user-select:none;line-height:1.3;font-family:inherit;}
.seg-lbl:last-child{border-right:none;}
.seg-opt:checked + .seg-lbl{background:var(--accent);color:#fff;font-weight:700;}

/* ── Empty state ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:60px 24px;gap:14px;
}
.es-icon{font-size:54px;color:var(--border);}
.es-title{font-size:18px;font-weight:700;color:var(--text2);}
.es-desc{font-size:13px;color:var(--text3);line-height:1.7;max-width:280px;}

/* ── Progress bar ── */
.prog-wrap{display:flex;align-items:center;gap:8px;}
.prog-bar{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;}
.prog-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .3s;}
.prog-txt{font-size:11px;font-weight:700;color:var(--text3);white-space:nowrap;font-family:'DM Mono',monospace;}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;gap:4px;}
.badge-fresh{background:#e6f4e6;color:#3a7a3a;border:1px solid #aadaaa;}
.badge-warn{background:#fef3e2;color:#8a5500;border:1px solid #f0c878;}
.badge-exp{background:#fde8e8;color:#c03030;border:1px solid #f0b8b8;}
.badge-none{background:var(--surface2);color:var(--text3);border:1px solid var(--border);}
.badge-loc{background:var(--surface2);color:var(--text2);border:1px solid var(--border);}

/* ── Pantry items ── */
.pantry-item {
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;
  margin-bottom:10px;
  box-shadow:var(--shadow);
  transition:border-color .15s;
}
.pantry-item:hover{border-color:var(--accent);}
.pi-cat-icon {
  width:42px;height:42px;flex-shrink:0;
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.pi-body{flex:1;min-width:0;}
.pi-name{font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pi-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.pi-qty{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;color:var(--text2);}
.pi-actions{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.qty-btn{
  width:28px;height:28px;border-radius:50%;
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text2);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;font-family:inherit;line-height:1;
}
.qty-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ── Recipe cards ── */
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
@media(max-width:500px){.recipe-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:340px){.recipe-grid{grid-template-columns:1fr;}}

.recipe-card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:16px;
  box-shadow:var(--shadow);cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .1s;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.recipe-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.rc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.rc-cat-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.rc-fav{
  background:none;border:none;cursor:pointer;font-size:16px;
  color:var(--border);transition:color .15s,transform .15s;padding:2px;
  -webkit-tap-highlight-color:transparent;
}
.rc-fav:hover{transform:scale(1.2);}
.rc-fav.active{color:#fb9d9e;}
.rc-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.rc-source{font-size:11px;font-weight:600;color:var(--accent-dark);display:flex;align-items:center;gap:4px;margin:-4px 0 8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;}
.rc-meta-item{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:3px;}
.rc-cat-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;
  background:var(--tag-bg);border:1px solid var(--tag-border);color:var(--text2);
  margin-bottom:6px;
}

/* ── Recipe Detail (in modal) ── */
.recipe-detail-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.rd-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.rd-info{flex:1;}
.rd-name{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px;}
.rd-meta-row{display:flex;flex-wrap:wrap;gap:8px;}
.rd-meta-chip{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:4px;}

.ing-list{list-style:none;}
.ing-list li{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 0;border-bottom:1px solid var(--border);font-size:14px;
}
.ing-list li:last-child{border-bottom:none;}
.ing-name{color:var(--text);}
.ing-qty{font-family:'DM Mono',monospace;color:var(--text2);font-size:13px;white-space:nowrap;}
.ing-summary{font-size:12.5px;font-weight:600;display:flex;align-items:flex-start;gap:6px;margin-bottom:12px;padding:9px 12px;border-radius:var(--radius-sm);line-height:1.5;}
.ing-summary.ok{background:#e6f4e6;color:#3a7a3a;border:1px solid #aadaaa;}
.ing-summary.short{background:#fdf2ec;color:var(--accent-dark);border:1px solid var(--border);}

.step-list{list-style:none;counter-reset:step-counter;}
.step-item{
  display:flex;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--border);
}
.step-item:last-child{border-bottom:none;}
.step-num{
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;margin-top:2px;
}
.step-text{font-size:14px;color:var(--text2);line-height:1.6;}

/* ── Dynamic ingredient rows (in recipe modal) ── */
.ing-row-wrap{display:flex;flex-direction:column;gap:7px;}
.ing-row{display:flex;gap:6px;align-items:center;}
.ing-row input[type=text]{flex:2;}
.ing-row input[type=number]{flex:1;min-width:60px;}
.ing-row select{flex:1;min-width:70px;}
.remove-btn{
  width:30px;height:30px;
  border-radius:var(--radius-sm);
  border:1.5px solid #f0b8b8;background:none;
  color:#c03030;cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .15s,border-color .15s;
  font-family:inherit;
}
.remove-btn:hover{background:#fde8e8;border-color:#e88888;}

.step-row-wrap{display:flex;flex-direction:column;gap:8px;}
.step-row{display:flex;gap:8px;align-items:flex-start;}
.step-num-badge{
  width:28px;height:28px;border-radius:50%;
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text3);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;margin-top:8px;
}
.step-row textarea{flex:1;min-height:40px;height:40px;font-size:14px;resize:none;overflow:hidden;line-height:1.5;}
.step-row .remove-btn{margin-top:5px;}

/* ── Field header（標題 + 右側按鈕）── */
.field-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.field-hdr .btn{flex-shrink:0;}
.ing-row input[type=text]{flex:2;}
.ing-row input[type=number]{flex:1;min-width:55px;}
.ing-row input[list]{flex:1;min-width:60px;}

/* ── Cooking list ── */
.cooking-card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:16px;
  margin-bottom:12px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.cooking-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);}
.cooking-card.done-card{opacity:0.7;background:var(--surface2);}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.cc-name{font-size:15px;font-weight:700;color:var(--text);}
.cc-recipe-ref{font-size:12px;color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:4px;}
.cc-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
.cc-meta-item{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:3px;}
.done-badge{
  background:#e6f4e6;color:#3a7a3a;border:1px solid #aadaaa;
  border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;
}

/* ── Cooking detail (in modal) ── */
.cooking-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 4px;border-bottom:1px solid var(--border);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .1s;border-radius:6px;padding:10px 8px;
}
.cooking-item:last-child{border-bottom:none;}
.cooking-item:hover{background:var(--bg);}
.cooking-item.checked .ci-name{text-decoration:line-through;color:var(--text3);}
.ci-check{
  width:24px;height:24px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;transition:all .15s;
}
.ci-check.checked{background:var(--accent);border-color:var(--accent);}
.ci-name{flex:1;font-size:14px;color:var(--text);}
.ci-qty{font-family:'DM Mono',monospace;font-size:12px;color:var(--text3);white-space:nowrap;}

/* ── Market records ── */
.market-record{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);margin-bottom:12px;
  box-shadow:var(--shadow);overflow:hidden;
}
.mr-header{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;cursor:pointer;
  transition:background .1s;
  -webkit-tap-highlight-color:transparent;
}
.mr-header:hover{background:var(--bg);}

/* 以食材為主的紀錄卡（預設收合） */
.mr-header2{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;transition:background .1s;-webkit-tap-highlight-color:transparent;}
.mr-header2:hover{background:var(--bg);}
.mr-count{font-size:12px;color:var(--text3);white-space:nowrap;}
.mr-chevron{font-size:12px;color:var(--text3);transition:transform .2s;flex-shrink:0;}
.mr-chevron.open{transform:rotate(180deg);}
.mr-collapse{border-top:1px solid var(--border);}
.mr-items{padding:8px 16px 6px;}
.mr-item-line{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:14px;}
.mr-item-line:last-child{border-bottom:none;}
.mr-il-name{flex:1;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mr-il-qty{font-family:'DM Mono',monospace;font-size:12px;color:var(--text3);white-space:nowrap;}
.mr-il-price{font-family:'DM Mono',monospace;font-size:13px;color:var(--text2);white-space:nowrap;min-width:64px;text-align:right;}
.mr-note{padding:0 16px 10px;font-size:12px;color:var(--text3);display:flex;align-items:center;gap:5px;}
.mr-store{font-size:15px;font-weight:700;color:var(--text);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:6px;}
.mr-date{font-size:12px;color:var(--text3);}
.mr-total{font-family:'DM Mono',monospace;font-size:15px;font-weight:700;color:var(--accent-dark);white-space:nowrap;}
.mr-meta{padding:0 16px 10px;display:flex;gap:10px;flex-wrap:wrap;}
.mr-meta-item{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:3px;}
.mr-actions{padding:0 16px 12px;display:flex;justify-content:flex-end;gap:6px;border-top:1px solid var(--border);padding-top:10px;margin-top:0;}
.mr-detail{border-top:1px solid var(--border);padding:10px 16px;}
.mr-detail-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;
}
.mr-detail-item:last-child{border-bottom:none;}
.mr-di-name{color:var(--text);flex:1;}
.mr-di-qty{color:var(--text3);font-size:12px;margin:0 8px;}
.mr-di-price{font-family:'DM Mono',monospace;color:var(--text2);white-space:nowrap;}
.mr-expand-icon{font-size:12px;color:var(--text3);transition:transform .2s;flex-shrink:0;}
.mr-expand-icon.open{transform:rotate(180deg);}

/* ── Market item cards (in modal) ── */
.market-item-card{
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:10px;margin-bottom:8px;background:var(--bg);
}
.mic-row1{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.mic-row1 .mic-name{flex:1;min-width:0;}
.mic-row2{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;}
.mic-row2 input,.mic-row2 select{padding:8px 8px;font-size:13px;}
.mic-row3{display:flex;align-items:center;gap:8px;margin-top:6px;}
.mic-exp-lbl{font-size:12px;color:var(--text3);white-space:nowrap;display:flex;align-items:center;gap:4px;flex-shrink:0;}
.mic-row3 input{flex:1;min-width:0;padding:8px;font-size:13px;}
@media(max-width:440px){
  .mic-row2{grid-template-columns:1fr 1fr;}
}

/* ── Market total ── */
.market-total-box{
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 16px;
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;
}
.market-total-label{font-size:13px;font-weight:700;color:var(--text2);}
.market-total-val{font-family:'DM Mono',monospace;font-size:20px;font-weight:700;color:var(--accent-dark);}

/* ── Stats ── */
.sum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px;}
.sum-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--shadow);}
.sum-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:6px;}
.sum-val{font-family:'DM Mono',monospace;font-size:22px;font-weight:700;color:var(--text);}
.sum-sub{font-size:11px;color:var(--text3);margin-top:3px;}

.stat-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.stat-row:last-child{border-bottom:none;}
.stat-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.stat-label{flex:1;font-size:13px;color:var(--text);}
.stat-bar-wrap{width:80px;flex-shrink:0;}
.stat-bar{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;}
.stat-bar-fill{height:100%;background:var(--accent);border-radius:3px;}
.stat-amt{font-family:'DM Mono',monospace;font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap;min-width:60px;text-align:right;}

/* ── Weekly plan ── */
.week-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.week-nav-btn{background:none;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;color:var(--text2);font-family:inherit;font-size:13px;transition:all .15s;}
.week-nav-btn:hover{background:var(--surface2);border-color:var(--accent);}
.week-title{font-size:14px;font-weight:700;color:var(--text);}

.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.week-day-header{
  text-align:center;font-size:10px;font-weight:700;
  color:var(--text3);padding:6px 2px 4px;
  text-transform:uppercase;letter-spacing:.5px;
}
.week-day-header.today-hdr{color:var(--accent-dark);}

/* 每天一列、3 餐橫向（縱向利用空間） */
.plan-day{margin-bottom:14px;}
.plan-day-hdr{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text2);margin-bottom:7px;}
.plan-day-hdr.today-day{color:var(--accent-dark);}
.plan-day-meals{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}

.meal-slot{
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 6px;min-height:62px;
  background:var(--surface);cursor:pointer;
  transition:all .15s;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.meal-slot:hover{border-color:var(--accent);background:var(--bg);}
.meal-slot.today-slot{border-color:var(--accent);background:rgba(251,157,158,.06);}
.meal-slot.has-plan{border-color:var(--accent);background:var(--surface);}
.ms-time{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.3px;}
.ms-dish{font-size:12px;font-weight:600;color:var(--text);line-height:1.3;word-break:break-word;width:100%;}
.ms-dish + .ms-dish{margin-top:3px;padding-top:3px;border-top:1px dashed var(--border);}
.ms-note{font-size:11px;color:var(--text3);line-height:1.3;word-break:break-word;width:100%;margin-top:3px;font-style:italic;}
.meal-slot.has-plan .ms-time{color:var(--accent-dark);}
.ms-add{font-size:14px;color:var(--border);line-height:1;}

/* ── Meal plan (3 meal rows per week day in detail) ── */
.plan-day-section{margin-bottom:18px;}
.plan-day-header{
  font-size:13px;font-weight:700;color:var(--text2);
  padding:6px 0;border-bottom:2px solid var(--border);
  margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.plan-day-header.today-day{color:var(--accent-dark);}
.today-badge{
  background:var(--accent);color:#fff;border-radius:20px;
  padding:1px 8px;font-size:10px;font-weight:700;
}
.plan-meal-row{
  display:flex;align-items:center;gap:8px;
  padding:7px 6px;border-radius:8px;
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .1s;
  -webkit-tap-highlight-color:transparent;
}
.plan-meal-row:last-child{border-bottom:none;}
.plan-meal-row:hover{background:var(--bg);}
.pmr-time{font-size:11px;font-weight:700;color:var(--text3);width:28px;flex-shrink:0;}
.pmr-name{flex:1;font-size:13px;color:var(--text);}
.pmr-empty{flex:1;font-size:12px;color:var(--border);font-style:italic;}
.pmr-del{background:none;border:none;color:var(--border);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:4px;transition:color .15s;}
.pmr-del:hover{color:var(--danger);}

/* ── Chips ── */
.chip-list{display:flex;flex-wrap:wrap;gap:6px;}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;background:var(--surface);border:1.5px solid var(--border);border-radius:50px;font-size:12px;font-weight:500;}
.chip .x{cursor:pointer;color:var(--text3);font-size:14px;border:none;background:none;line-height:1;padding:0;transition:color .15s;}
.chip .x:hover{color:var(--accent);}

/* ── Hint ── */
.hint{font-size:12px;color:var(--text3);display:flex;align-items:flex-start;gap:5px;margin-top:6px;line-height:1.5;}

/* ── Number ── */
.num{font-family:'DM Mono',monospace;}

/* ── Scrollbar (webkit) ── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

/* ── Responsive ── */
@media(max-width:480px){
  .modal{padding:18px;}
}
@media(max-width:360px){
  .meal-slot{min-height:56px;padding:7px 4px;}
  .ms-name{font-size:11px;}
}
@media(max-width:360px){
  .recipe-grid{grid-template-columns:1fr;}
}

/* ── 新建料理：選擇來源 ── */
.choose-grid{display:flex;flex-direction:column;gap:12px;}
.choose-opt{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:20px 16px;border:1.5px solid var(--border);border-radius:var(--radius);
  background:var(--surface);cursor:pointer;font-family:inherit;
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.choose-opt:hover{border-color:var(--accent);background:var(--bg);transform:translateY(-2px);box-shadow:var(--shadow);}
.choose-icon{
  width:48px;height:48px;border-radius:14px;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.choose-title{font-size:15px;font-weight:700;color:var(--text);}
.choose-desc{font-size:12px;color:var(--text3);line-height:1.5;}

/* ── 挑選食譜清單 ── */
.pick-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  margin-bottom:8px;cursor:pointer;background:var(--surface);
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.pick-item:hover{border-color:var(--accent);background:var(--bg);}
.pick-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.pick-body{flex:1;min-width:0;}
.pick-name{font-size:14px;font-weight:700;color:var(--text);}
.pick-meta{font-size:11px;color:var(--text3);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;}
.pick-go{color:var(--text3);font-size:14px;flex-shrink:0;}

/* ── 料理步驟（詳情中可勾選）── */
.cook-step{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 8px;border-bottom:1px solid var(--border);
  cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:6px;
  transition:background .1s;
}
.cook-step:last-child{border-bottom:none;}
.cook-step:hover{background:var(--bg);}
.cook-step.done .cs-text{text-decoration:line-through;color:var(--text3);}
.cs-check{
  width:26px;height:26px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;transition:all .15s;
}
.cs-check.done{background:var(--accent);border-color:var(--accent);}
.cs-num{font-size:11px;}
.cs-num-lbl{flex-shrink:0;font-family:'DM Mono',monospace;font-size:14px;font-weight:700;color:var(--accent-dark);min-width:16px;text-align:center;padding-top:2px;}
.cook-step.done .cs-num-lbl{color:var(--text3);}
.cs-text{flex:1;font-size:14px;color:var(--text);line-height:1.6;padding-top:2px;}

/* 詳情中的食材參考小清單 */
.cook-ing-ref{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.cir-chip{font-size:12px;color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;}

/* ── 食材確認（採買清單）── */
.shop-from{font-size:11px;color:var(--text3);margin-top:2px;}

/* ── 價格走勢 ── */
.trend-item{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;
  box-shadow:var(--shadow);cursor:pointer;
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.trend-item:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);}
.trend-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.trend-body{flex:1;min-width:0;}
.trend-name{font-size:15px;font-weight:700;color:var(--text);}
.trend-meta{font-size:11px;color:var(--text3);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;}
.trend-price{text-align:right;flex-shrink:0;}
.trend-cur{font-family:'DM Mono',monospace;font-size:16px;font-weight:700;color:var(--accent-dark);}
.trend-unit{font-size:11px;font-weight:500;color:var(--text3);}
.trend-low{font-size:11px;color:var(--success);font-weight:700;margin-top:2px;}

.trend-chart{margin:10px 0;}
.trend-chart svg{width:100%;height:auto;display:block;}
.tc-dot{fill:var(--accent);}
.tc-dot-low{fill:var(--success);}
.tc-line{fill:none;stroke:var(--accent);stroke-width:2;}
.tc-axis{stroke:var(--border);stroke-width:1;}
.tc-lbl{font-family:'DM Mono',monospace;font-size:9px;fill:var(--text3);}

.best-buy{
  background:#e6f4e6;border:1.5px solid #aadaaa;border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.best-buy-icon{color:var(--success);font-size:20px;}
.best-buy-txt{font-size:13px;color:#2a6a2a;line-height:1.5;}
.best-buy-txt b{font-family:'DM Mono',monospace;}

.ph-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.ph-row:last-child{border-bottom:none;}
.ph-date{font-family:'DM Mono',monospace;color:var(--text3);font-size:12px;width:74px;flex-shrink:0;}
.ph-store{flex:1;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ph-price{font-family:'DM Mono',monospace;font-weight:700;color:var(--text2);white-space:nowrap;}
.ph-price.is-low{color:var(--success);}