/* =====================================================================
   s2.css — exact sizes from the "Simpler version 2" canvas boards (390 px phone).
   Loaded last. Values are the boards' own px, scaled only by the text-size setting (--fs).
   ===================================================================== */
:root { --px: var(--fs, 1); --nav-bg: rgba(255,255,255,.55); }
/* the three soft orbs, placed like the boards */
body::before { background:
  radial-gradient(circle 230px at 60px 80px, var(--b1) 0%, transparent 68%),
  radial-gradient(circle 210px at calc(100% + 190px - 210px) 440px, var(--b2) 0%, transparent 68%),
  radial-gradient(circle 190px at 130px calc(100% - 70px), var(--b3) 0%, transparent 68%), var(--bg); }

/* ---------- page frame ---------- */
body { padding-left: 20px; padding-right: 20px; }
main.wrap { padding-left: 0; padding-right: 0; }
.g-t small { line-height: 1.5; }
.hero-card .hc-n small { font-weight: 300; }
.pg-head { align-items: flex-end; gap: 12px; }
.pg-head .eyebrow { font-size: calc(13px * var(--px)); color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 400; }
.pg-head h1 { margin: 2px 0 0; font-size: calc(34px * var(--px)); font-weight: 300; letter-spacing: -.6px; line-height: 1.1; }
.hbtn, .icon-btn.back-c { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: none; }

/* ---------- Home ---------- */
main.wrap:has(> .hero-card) { display: flex; flex-direction: column; gap: 16px; }
main.wrap:has(> .hero-card) > * { margin-top: 0; margin-bottom: 0; }
main.wrap > .hero-card { margin-top: 8px; padding: 22px; border-radius: 30px; gap: 14px; display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.hero-card .hc-top { display: flex; justify-content: space-between; align-items: flex-start; margin: 0; }
.hero-card .hc-top .eyebrow { font-size: calc(13px * var(--px)); color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.hero-card .hc-n { font-size: calc(46px * var(--px)); font-weight: 300; line-height: 1.1; letter-spacing: -1px; }
.hero-card .hc-n small { font-size: calc(15px * var(--px)); letter-spacing: 0; color: var(--muted); font-weight: 400; }
.hero-card .hc-all { font-size: calc(13px * var(--px)); color: var(--accent); font-weight: 500; padding: 12px 0; }
.hero-card .hc-list { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.hero-card .hc-row { min-height: 44px; padding: 0; gap: 12px; display: flex; align-items: center; font-size: calc(15px * var(--px)); }
.hero-card .hc-row .dot { width: 8px; height: 8px; flex: none; }
.dpill { font-size: calc(12px * var(--px)); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.hero-card .btn.primary.wide, .btn.primary.wide, .btn.wide { min-height: 52px; height: 52px; border-radius: 999px; font-size: calc(15px * var(--px)); font-weight: 500; }

/* Today's food (S2HomeToday) */
main.wrap > .g-card.food { padding: 18px 20px; border-radius: 28px; display: flex; flex-direction: column; gap: 12px; }
.g-card.food .fc-top { display: flex; justify-content: space-between; align-items: center; }
.g-card.food .fc-main .small { font-size: calc(13px * var(--px)); }
.g-card.food .fc-n { font-size: calc(30px * var(--px)); font-weight: 300; line-height: 1.25; }
.g-card.food .fc-n small { font-size: calc(14px * var(--px)); color: var(--muted); font-weight: 400; }
.g-card.food .round-cam { width: 52px; height: 52px; }
.g-card.food .mbars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.g-card.food .mbar { display: flex; flex-direction: column; gap: 4px; }
.g-card.food .mbar .small { font-size: calc(12px * var(--px)); }
.g-card.food .mbar b { font-size: calc(14px * var(--px)); font-weight: 400; }
.g-card.food .track, .g-card.food .track i { height: 4px; border-radius: 999px; }
.g-card.food .track { background: var(--line); }

/* Tonight */
.g-card.tonight { padding: 18px 20px; border-radius: 26px; gap: 14px; display: flex; align-items: center; text-align: left; width: 100%; }
.g-card.tonight .orb { width: 56px; height: 56px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, var(--b1) 0%, var(--accent) 100%); box-shadow: none; border: 0; overflow: hidden; }
.g-card.tonight .orb > :not(img) { display: none; }
.g-card.tonight .orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-card.tonight .g-t { display: flex; flex-direction: column; gap: 2px; }
.g-card.tonight .g-t small { font-size: calc(12px * var(--px)); color: var(--muted); }
.g-card.tonight .g-t b { font-size: calc(16px * var(--px)); line-height: 1.3; font-weight: 400; }

/* Small Home cards: "2 things to check" (S2Home) */
main.wrap:has(> .hero-card) > .g-list.home-rows { background: none; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.home-rows > .g-row { padding: 14px 18px; border-radius: 24px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); gap: 14px; }
.home-rows > .g-row + .g-row { border-top: 1px solid var(--glass-line); }
.home-rows .g-ico { width: 40px; height: 40px; background: var(--accent-soft); color: var(--accent); }
.home-rows .g-t b { font-size: calc(15px * var(--px)); font-weight: 400; }
.home-rows .g-t small { font-size: calc(12px * var(--px)); }
.pill-ghost { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--muted); font-size: calc(13px * var(--px)); display: inline-flex; align-items: center; gap: 8px; }
.g-row .chev, .g-card .chev { color: var(--muted); }

/* ---------- bottom bar (all boards) ---------- */
nav.tabs { height: 84px; padding: 0 0 18px; box-sizing: border-box; background: var(--nav-bg); border-top: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 0; box-shadow: none; left: 0; right: 0; bottom: 0; }
nav.tabs > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border-radius: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 400; min-height: 0; height: 100%; }
nav.tabs > button[aria-current="true"], nav.tabs > button.on, nav.tabs > button[aria-pressed="true"] { color: var(--accent); font-weight: 500; background: none; }
nav.tabs > button .ti { width: 22px; height: 22px; font-size: 22px; }
nav.tabs > button .ti svg { width: 22px; height: 22px; }
nav.tabs > button .tl { font-size: 11px; line-height: 1.2; }
nav.tabs > button.nav-add { width: auto; max-width: none; height: 100%; margin: 0; padding: 0; }
nav.tabs .badge { display: none; }
nav.tabs > button.nav-add .ti { width: 54px; height: 54px; margin-top: -16px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; font-size: 24px; }
nav.tabs > button.nav-add .ti svg { width: 24px; height: 24px; }
.g-row .chev, .g-card .chev { width: 16px; flex: none; text-align: center; }
main.wrap > .hero-card .hc-n small { font-weight: 300; }

/* ---------- Kitchen (S2Kitchen) ---------- */
main.wrap:has(> .k-head) { display: flex; flex-direction: column; gap: 14px; }
main.wrap:has(> .k-head) > * { margin-top: 0; margin-bottom: 0; }
.k-head { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.k-head .kh-top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.k-head .big-tabs { display: flex; gap: 6px; align-items: center; white-space: nowrap; margin-left: -12px; }
.k-head .big-tabs button { margin: 0; font-size: calc(26px * var(--px)); font-weight: 300; letter-spacing: -.6px; line-height: 1.5; color: var(--muted); padding: 2px 8px 4px; background: none; border: 1px solid transparent; border-radius: 999px; box-shadow: none; display: flex; align-items: flex-start; gap: 4px; }
.k-head .big-tabs button[aria-pressed="true"] { color: var(--ink); padding: 2px 14px 4px; border-color: var(--glass-line); box-shadow: var(--shadow); background: none; }
.k-head .big-tabs sup { font-size: 11px; font-weight: 500; letter-spacing: 0; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-top: 4px; line-height: 1; top: 0; }
input.search, input.k-search { height: 48px; min-height: 48px; padding: 0 18px 0 46px; border-radius: 999px; background: var(--glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A8FA3' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat 18px center; border: 1px solid var(--glass-line); box-shadow: none; font-size: calc(15px * var(--px)); color: var(--ink); }
.chips.scroll { display: flex; gap: 8px; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 0 20px; flex-wrap: nowrap; }
.chip { height: 36px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); font-size: calc(13px * var(--px)); font-weight: 400; display: inline-flex; align-items: center; flex-shrink: 0; box-shadow: none; }
.chip[aria-pressed="true"], .chip.on { border-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 500; }
section.glist-card { padding: 6px 20px; border-radius: 28px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.glist-card .krow { min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--line); border-top: 0; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; }
.glist-card .krow:last-child { border-bottom-color: transparent; }
.glist-card .krow .kico { display: none; }
.glist-card .krow .grow { display: flex; flex-direction: column; gap: 2px; }
.glist-card .krow b { font-size: calc(15px * var(--px)); font-weight: 400; line-height: 1.5; }
.glist-card .krow small { font-size: calc(12px * var(--px)); color: var(--muted); line-height: 1.5; }

/* Kitchen: the tools live in "Sort and filter" (S2Tidy) */
main.wrap:has(> .k-head) .k-tools { display: none; }

/* ---------- every sheet is a full page, like the boards (only "Add" floats above the bar) ---------- */
.scrim { background: transparent; }
.sheet:not(.overlay) { position: fixed; inset: 0; width: 100%; max-width: none; max-height: none; height: 100vh; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(circle 230px at 60px 80px, var(--b1) 0%, transparent 68%), radial-gradient(circle 210px at calc(100% - 20px) 440px, var(--b2) 0%, transparent 68%), radial-gradient(circle 190px at 130px calc(100% - 70px), var(--b3) 0%, transparent 68%), var(--bg); }
.sheet:not(.overlay) .grab { display: none; }
.sheet:not(.overlay) .sheet-body { height: 100%; box-sizing: border-box; padding: 14px 20px calc(30px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.sheet:not(.overlay) .sheet-body > * { margin-top: 0; margin-bottom: 0; flex-shrink: 0; }
.sheet:not(.overlay) .sheet-body > .vh, .sheet:not(.overlay) .sheet-body > input[type="file"] { position: absolute; }
/* page head: round back button + light title (28 px) */
.sh.sh2, .sh { display: flex; align-items: center; gap: 12px; padding: 0; margin: 0; }
.sh.sh2 h2, .sh h2 { margin: 0; font-size: calc(28px * var(--px)); font-weight: 300; letter-spacing: -.5px; line-height: 1.15; }
.sh.sh2 .grow > p { margin: 2px 0 0; font-size: calc(13px * var(--px)); line-height: 1.5; }
.sh .icon-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: none; }
/* bottom buttons sit on a fade, like the boards */
.sheet:not(.overlay) .sheet-foot, .sheet:not(.overlay) .sf:has(> .btn.primary), .sheet:not(.overlay) .cta-bar { position: sticky; bottom: calc(-30px - env(safe-area-inset-bottom, 0px)); margin-top: auto !important; padding: 14px 0 30px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(to bottom, transparent, var(--bg) 30%); z-index: 3; }
.sheet:not(.overlay) .sf > .btn, .sheet:not(.overlay) .cta-bar > .btn { width: 100%; min-height: 52px; border-radius: 999px; }
.sheet:not(.overlay) .sf:has(> .btn.primary) { flex-direction: column-reverse; }
.sheet:not(.overlay) .sf > .grow { display: none; }

/* ---------- Add (S2Add): a card above the bar, the + turns into × ---------- */
body.sheet-overlay .scrim { background: rgba(30,32,48,.12); bottom: 0; }
body.sheet-overlay nav.tabs { z-index: 60; }
body.sheet-overlay nav.tabs .nav-add .ti svg { transform: rotate(45deg); transition: transform .2s; }
.sheet.overlay { position: fixed; left: 12px; right: 12px; bottom: 98px; width: auto; max-width: none; max-height: calc(100dvh - 120px); padding: 20px; border-radius: 32px; background: var(--glass-hi); border: 1px solid var(--glass-line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); }
.sheet.overlay .grab { display: none; }
.sheet.overlay .sheet-body { padding: 0; }
.add-sheet { display: flex; flex-direction: column; gap: 16px; }
.add-sheet .pd-head { margin: 0; }
.add-sheet .pd-head h2 { margin: 0; font-size: calc(28px * var(--px)); font-weight: 300; letter-spacing: -.5px; line-height: 1.5; }
.add-sheet .pd-head .icon-btn, .add-sheet .add-more { display: none; }
.add4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.add4 > button { padding: 16px; border-radius: 24px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 132px; box-sizing: border-box; text-align: left; box-shadow: none; }
.add4 .g-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin: 0; }
.add4 b { font-size: calc(15px * var(--px)); font-weight: 400; line-height: 1.5; margin-bottom: -8px; }
.add4 small { font-size: calc(12px * var(--px)); color: var(--muted); line-height: 1.35; }
.say-pill { height: 54px; min-height: 54px; padding: 0 6px 0 20px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: calc(15px * var(--px)); box-shadow: none; text-align: left; width: 100%; }
.say-pill .round-add { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: none; }
/* Item (S2Item) keeps the bottom bar */
.sheet.with-nav { bottom: 84px !important; height: auto !important; }
body.sheet-nav nav.tabs { z-index: 60; }
.it-head .star-big { display: none; }
.it-head .icon-btn svg { width: 20px; height: 20px; }

/* ---------- generic list card (every board) ---------- */
.g-list { padding: 4px 18px; border-radius: 28px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
.g-list > .g-row { min-height: 60px; padding: 10px 0; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; border-radius: 0; background: none; }
.g-list > .g-row:last-child { border-bottom-color: transparent; }
.g-list > .g-row + .g-row { border-top: 0; }
.g-row .g-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.g-row .g-t b { font-size: calc(15px * var(--px)); font-weight: 400; line-height: 1.5; }
.g-row .g-t small { font-size: calc(12px * var(--px)); color: var(--muted); line-height: 1.5; }
.g-row .danger-t, .g-row .mark { font-size: calc(13px * var(--px)); color: var(--bad); font-weight: 400; }
h3.sec, .sec-h { margin: 8px 0 0; font-size: calc(15px * var(--px)); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* ---------- Item (S2Item) ---------- */
.sheet .it-title { margin: 10px 0 0 !important; padding: 0; }
.it-title .eyebrow { margin: 0; font-size: calc(13px * var(--px)); font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }
.it-title h1 { margin: 2px 0 0; font-size: calc(34px * var(--px)); font-weight: 300; letter-spacing: -.6px; line-height: 1.5; }
.g-card.it-hero { padding: 20px; border-radius: 28px; display: flex; flex-direction: column; gap: 16px; }
.it-hero .ih-top { display: flex; justify-content: space-between; align-items: flex-end; margin: 0; }
.it-hero .small.muted, .it-hero .ih-top .small { font-size: calc(12px * var(--px)); margin: 0; }
.it-hero .ih-n { font-size: calc(22px * var(--px)); font-weight: 400; letter-spacing: -.2px; line-height: 1.2; }
.it-hero > .small.muted { margin-bottom: -8px; }
.it-hero .seg, .it-hero .fracs { padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.it-hero .seg button, .it-hero .fracs button { height: 40px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font-size: calc(13px * var(--px)); }
.it-hero .seg button[aria-pressed="true"], .it-hero .fracs button[aria-pressed="true"], .it-hero .fracs button.on { background: var(--accent); color: var(--accent-ink, #fff); font-weight: 500; }
.big3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.big3 > button { padding: 14px 6px; border-radius: 22px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: calc(14px * var(--px)); font-weight: 400; min-height: 0; box-shadow: none; }
.big3 > button.on { border-color: transparent; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 500; }
.big3 > button > .g-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin: 0; }
.big3 > button.on > .g-ico { background: rgba(255,255,255,.22); color: inherit; }
.sheet .g-card:has(> .orb) { padding: 14px 18px; border-radius: 24px; background: var(--glass-hi); gap: 12px; display: flex; align-items: center; }
.sheet .g-card > .orb { width: 40px; height: 40px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, var(--b1) 0%, var(--accent) 100%); overflow: hidden; }
.sheet .g-card > .orb > :not(img) { display: none; }
.sheet .g-card > .orb img { width: 100%; height: 100%; object-fit: cover; }
.sheet .g-card:has(> .orb) .g-t { gap: 0; }
.sheet .g-card:has(> .orb) .g-t b { font-size: calc(14px * var(--px)); font-weight: 400; line-height: 1.5; }
.sheet .g-card:has(> .orb) .g-t small { font-size: calc(12px * var(--px)); line-height: 1.5; }
.g-card.it-hero { align-items: stretch; text-align: left; }
.big3 > button { line-height: 1.5; }

/* ---------- Cook (S2Cook) ---------- */
main.wrap:has(> .hscroll) { display: flex; flex-direction: column; gap: 14px; }
main.wrap:has(> .hscroll) > * { margin-top: 0; margin-bottom: 0; }
.sec-h:has(> h3) { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.sec-h > h3, .sec-h > h2 { margin: 0; font-size: calc(15px * var(--px)); font-weight: 500; letter-spacing: 0; }
.hc-all { font-size: calc(13px * var(--px)); font-weight: 500; color: var(--accent); padding: 12px 0; background: none; border: 0; }
.sec-h .hc-all { margin: -12px 0; }
.hscroll { display: flex; gap: 12px; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 0 20px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.idea-tile { width: 210px; flex: none; padding: 16px; box-sizing: border-box; border-radius: 26px; background: var(--glass-hi); border: 1px solid var(--glass-line); display: flex; flex-direction: column; gap: 10px; text-align: left; box-shadow: none; align-items: flex-start; }
.idea-tile .orb { width: 54px; height: 54px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, var(--b1) 0%, var(--accent) 100%); overflow: hidden; margin: 0; }
.idea-tile .orb > :not(img) { display: none; } .idea-tile .orb img { width: 100%; height: 100%; object-fit: cover; }
.idea-tile b { font-size: calc(15px * var(--px)); font-weight: 400; line-height: 1.3; margin-bottom: -8px; }
.idea-tile small { font-size: calc(12px * var(--px)); color: var(--muted); line-height: 1.5; }
section.glass-card:has(> .wk7) { padding: 16px; border-radius: 26px; display: flex; flex-direction: column; gap: 12px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.wk7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; }
.wk7 .wk-d { height: 54px; border-radius: 18px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; font-size: calc(12px * var(--px)); width: auto; }
.wk7 .wk-d.on { border-color: transparent; background: var(--accent); color: var(--accent-ink, #fff); }
.glass-card:has(> .wk7) > .small.muted { font-size: calc(13px * var(--px)); }
.glass-card:has(> .wk7) > .small.muted .linkish { color: var(--ink); text-decoration: none; font-size: inherit; }
main.wrap:has(> .hscroll) > .chips.wrap { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-top: -4px !important; }
main.wrap:has(> .hscroll) > .chips.wrap .chip { height: 30px; min-height: 30px; padding: 0 12px; font-size: calc(12px * var(--px)); }
.g-row > .g-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.g-row > .g-ico svg { width: 18px; height: 18px; }

/* ---------- Profile (S2Profile) ---------- */
main.wrap:has(> .pf-head) { display: flex; flex-direction: column; gap: 16px; }
main.wrap:has(> .pf-head) > * { margin-top: 0; margin-bottom: 0; }
main.wrap > .pf-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: -24px !important; text-align: center; }
.pf-head .pf-ava { width: 88px; height: 88px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--glass-line); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
.pf-head .pf-ava svg { width: 36px; height: 36px; }
.pf-head h1 { margin: 0; font-size: calc(26px * var(--px)); font-weight: 300; letter-spacing: -.4px; line-height: 1.5; }
.pf-head > .small { margin-top: -10px; font-size: calc(13px * var(--px)); color: var(--muted); }
.pf-btns { display: flex; gap: 8px; justify-content: center; }
.pf-btns .btn.sm { height: 38px; min-height: 38px; padding: 0 18px; border-radius: 999px; font-size: calc(13px * var(--px)); font-weight: 400; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); box-shadow: none; }
.pf-btns .btn.primary.sm { background: var(--accent); color: var(--accent-ink, #fff); border-color: transparent; font-weight: 500; }
.stats3 { padding: 14px 8px; border-radius: 24px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.stats3 > div { display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.stats3 > div:nth-child(2) { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.stats3 b { font-size: calc(22px * var(--px)); font-weight: 300; line-height: 1.5; }
.stats3 small { font-size: calc(12px * var(--px)); color: var(--muted); line-height: 1.5; }
main.wrap:has(> .pf-head) > h3.sec { margin: 6px 4px 0 !important; }

/* ---------- Recipe (S2Recipe) ---------- */
.rec-sh .grow h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-blob, .sheet .banner-ph { height: 170px; border-radius: 24px; border: 1px solid var(--glass-line); overflow: hidden; margin: 0; }
.rec-blob { background: radial-gradient(circle at 30% 30%, var(--b1) 0%, var(--b2) 55%, var(--b3) 100%); }
.sheet .banner-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.stat-tiles > div, .stat-tiles > button { padding: 14px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; text-align: left; align-items: flex-start; min-height: 0; }
.stat-tiles b { font-size: calc(22px * var(--px)); font-weight: 300; white-space: nowrap; line-height: 1.5; display: flex; align-items: center; gap: 4px; }
.stat-tiles small { font-size: calc(12px * var(--px)); color: var(--muted); line-height: 1.5; }
.stat-tiles .icon-btn.sm { width: 24px; height: 24px; min-height: 0; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass); font-size: 14px; padding: 0; }
.rec-have { margin-top: 8px !important; }
.rec-have .hc-all { font-size: calc(13px * var(--px)); font-weight: 400; white-space: nowrap; }
.rec-ings .g-row .linkish { text-decoration: none; color: inherit; font: inherit; }
.rec-ings .q { font-size: calc(13px * var(--px)); color: var(--muted); white-space: nowrap; }
.rec-ings .dpill { border: 0; }
.rec-more > summary { margin: 8px 0 12px; }
.rec-more > :not(summary) { margin-bottom: 14px; }
.sheet .cta-bar { left: auto; right: auto; width: auto; border: 0; box-shadow: none; border-radius: 0; }
.sheet .cta-bar { position: sticky !important; bottom: calc(-30px - env(safe-area-inset-bottom, 0px)) !important; padding: 14px 0 30px !important; margin-top: auto !important; background: linear-gradient(to bottom, transparent, var(--bg) 30%) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Settings (S2Settings) ---------- */
.sheet-body:has(> .set-mark) > .sh h2 { font-size: calc(26px * var(--px)); }
.sheet-body:has(> .set-mark) > h3.sec { margin: 8px 4px 0 !important; font-size: calc(13px * var(--px)); font-weight: 500; color: var(--muted); }

/* ---------- Shopping list (S2Shopping) ---------- */
main.wrap:has(> .list-head) { display: flex; flex-direction: column; gap: 14px; }
main.wrap:has(> .list-head) > * { margin-top: 0; margin-bottom: 0; }
body:has(main > .list-head) nav.tabs { display: none; }
.list-head { display: flex; align-items: center; gap: 12px; }
.list-head h1 { margin: 0; font-size: calc(28px * var(--px)); font-weight: 300; letter-spacing: -.5px; line-height: 1.15; }
form.pill-add { height: 48px; min-height: 48px; padding: 0 4px 0 18px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; align-items: center; gap: 6px; box-shadow: none; }
form.pill-add input { height: 46px; min-height: 0; border: 0; background: transparent; box-shadow: none; padding: 0; font-size: calc(15px * var(--px)); color: var(--ink); border-radius: 0; }
form.pill-add .round-add { width: 38px; height: 38px; min-height: 0; }
.gl-list .gi.gl { min-height: 60px; padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--line); gap: 12px; }
.gl-list .gi.gl:last-child { border-bottom-color: transparent; }
.gl-list .gl-t b { font-size: calc(15px * var(--px)); font-weight: 400; line-height: 1.5; }
.gl-list .gl-t small { font-size: calc(13px * var(--px)); color: var(--muted); opacity: .75; line-height: 1.5; }
.gl-list .tag.acc { font-size: calc(12px * var(--px)); padding: 4px 10px; border-radius: 999px; background: var(--soon-soft); color: var(--soon); border: 0; font-weight: 400; }
.gl-list .mono.small { font-family: inherit; font-size: calc(13px * var(--px)); color: var(--muted); }
.gl-list .gi.gl input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
p.gl-sum { margin: 0; font-size: calc(13px * var(--px)); line-height: 1.5; color: var(--muted); padding: 0; }
main.wrap:has(> .list-head) > .sheet-foot { position: sticky; bottom: 0; padding: 14px 0 30px; margin-top: auto !important; background: linear-gradient(to bottom, transparent, var(--bg) 30%); z-index: 3; }
main.wrap:has(> .list-head) .g-row .add-t, main.wrap:has(> .list-head) .g-row .linkish.acc { font-size: calc(13px * var(--px)); color: var(--accent); }
main.wrap:has(> .list-head) .linkish { text-decoration: none; color: var(--accent); font-size: calc(13px * var(--px)); }

/* sub-pages (back button in the head) have no bottom bar on the boards */
body:has(main > .pg-back) nav.tabs { display: none; }
main.wrap:has(> .pg-back) { display: flex; flex-direction: column; gap: 14px; }
main.wrap:has(> .pg-back) > * { margin-top: 0; margin-bottom: 0; }
.pg-back { display: flex; align-items: center; gap: 12px; }
.pg-back h1 { margin: 0; font-size: calc(28px * var(--px)); font-weight: 300; letter-spacing: -.5px; line-height: 1.15; }
/* Spending hero (S2Spending) */
.g-card.mo-hero { padding: 22px; border-radius: 28px; display: flex; flex-direction: column; gap: 6px; text-align: left; align-items: stretch; }
.mo-hero .mo-top .small, .mo-hero > .small { font-size: calc(13px * var(--px)); color: var(--muted); }
.mo-hero .mo-n { font-size: calc(40px * var(--px)); font-weight: 300; letter-spacing: -1px; line-height: 1.1; margin: 0; text-align: left; }
main.wrap > .sheet-foot { position: sticky; bottom: 0; padding: 14px 0 30px; margin-top: auto !important; background: linear-gradient(to bottom, transparent, var(--bg) 30%); z-index: 3; }
.sheet .cookmode.cm2 { display: flex; flex-direction: column; gap: 14px; flex: 1 0 auto; }
.sheet .cookmode.cm2 > * { margin-top: 0; margin-bottom: 0; }
.sheet .cookmode.cm2 .cm-foot { margin-top: auto !important; padding: 14px 0 30px; }
.sheet .cookmode.cm2 .cm-text { margin: 24px 0 0 !important; font-size: calc(26px * var(--px)); line-height: 1.35; }
.cm-timer .tm-big { font-size: calc(48px * var(--px)); }
/* form fields (S2EditItem) */
.sheet label.f { display: flex; flex-direction: column; gap: 6px; font-size: calc(13px * var(--px)); color: var(--muted); font-weight: 400; }
.sheet label.f input:not([type="checkbox"]), .sheet label.f select, .sheet label.f textarea { height: 48px; min-height: 48px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--glass-line); background: var(--glass-hi); color: var(--ink); font-size: calc(15px * var(--px)); box-shadow: none; }
.sheet label.f textarea { height: auto; padding: 12px 18px; }
/* pc-v34 · Log a meal (S2MealLog) */
.ml-write { display: flex; flex-direction: column; gap: 6px; }
.ml-write > span { font-size: calc(13px * var(--px)); color: var(--muted); }
.ml-write textarea { padding: 14px 18px; border-radius: 18px; border: 1px solid var(--glass-line); background: var(--glass-hi); color: var(--ink); font: inherit; font-size: calc(15px * var(--px)); resize: none; outline: none; min-height: 0; box-shadow: none; }
.ml-snap { height: 44px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass-hi); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: calc(15px * var(--px)); cursor: pointer; }
.sec-h .ml-all { font-size: calc(13px * var(--px)); color: var(--accent); font-weight: 500; background: none; border: 0; padding: 12px 0; min-height: 0; }
.ml-act { font-size: calc(13px * var(--px)); color: var(--accent); white-space: nowrap; background: none; border: 0; padding: 8px 0 8px 8px; min-height: 0; margin-left: auto; font-weight: 400; }
.ml-note { margin: 0; font-size: calc(12px * var(--px)); line-height: 1.5; color: var(--muted); }
.ml-more > :not(summary) { margin-bottom: 14px; }
.ml-more > summary { margin: 8px 0 12px; }
.g-row > .g-t { flex: 1; }
.ml-types ~ .sec-h { margin-top: 8px; }
.sheet .ml-types ~ .sec-h:has(> h3) { margin-top: 8px; } .sheet .ml-types ~ .sec-h > h3 { line-height: 1.5; } .sheet .ml-act { min-height: 0; padding: 0 0 0 8px; line-height: 1.5; }
.sheet:not(.overlay) .sheet-foot > .btn.primary { width: 100%; min-height: 52px; border-radius: 999px; }
/* pc-v35 · canvas kit (js/kit.js) — exact S2 board components */
.k-end { font-size: calc(13px * var(--px)); color: var(--muted); white-space: nowrap; flex: none; }
.k-end.accent { color: var(--accent); }
.k-end[class*="pill"] { font-size: calc(12px * var(--px)); padding: 4px 10px; border-radius: 999px; }
.k-end.pill-ok { background: var(--ok-soft, rgba(44,115,75,.12)); color: var(--ok); }
.k-end.pill-soon { background: var(--soon-soft, rgba(192,90,10,.12)); color: var(--soon); }
.k-end.pill-bad { background: var(--bad-soft, rgba(169,60,44,.12)); color: var(--bad); }
.k-end.pill { background: var(--accent-soft); color: var(--accent); }
.k-chev { color: var(--muted); display: flex; flex: none; }
.g-row .g-t { flex-grow: 1; }
.g-list > button.g-row, .g-list > label.g-row { width: 100%; background: transparent; border-radius: 0; text-align: left; color: var(--ink); font: inherit; }
.g-list > .g-row > .g-ico { width: 38px; height: 38px; }
.k-link { font-size: calc(13px * var(--px)); color: var(--accent); font-weight: 500; background: none; border: 0; padding: 12px 0; margin: -12px 0; min-height: 0; }
.sheet .sec-h:has(> h3) { margin-top: 8px; }
.sheet .sec-h > h3 { line-height: 1.5; }
.k-note { margin: 0; font-size: calc(13px * var(--px)); line-height: 1.5; color: var(--muted); }
.k-note.sm { font-size: calc(12px * var(--px)); }
.k-foot { display: flex; flex-direction: column; gap: 10px; }
.sheet:not(.overlay) .k-foot > .btn { width: 100%; min-height: 52px; height: 52px; border-radius: 999px; font-size: calc(15px * var(--px)); font-weight: 500; }
.k-foot > .k-btn2 { border: 1px solid var(--glass-line); background: var(--glass-hi); color: var(--ink); box-shadow: none; }
.k-field { display: flex; flex-direction: column; gap: 6px; }
.k-field > span { font-size: calc(13px * var(--px)); color: var(--muted); }
.k-card { padding: 14px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
.k-hero { padding: 20px; border-radius: 28px; display: flex; flex-direction: column; gap: 4px; }
.k-eye { font-size: calc(13px * var(--px)); color: var(--muted); }
.k-big { font-size: calc(44px * var(--px)); font-weight: 300; letter-spacing: -1px; line-height: 1.1; }
.k-sub { font-size: calc(13px * var(--px)); color: var(--muted); }
.k-bar { display: block; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.k-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.k-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.k-tile { padding: 12px; border-radius: 20px; background: var(--glass-hi); border: 1px solid var(--glass-line); display: flex; flex-direction: column; gap: 6px; }
.k-tl { font-size: calc(13px * var(--px)); color: var(--muted); }
.k-tv { font-size: calc(22px * var(--px)); font-weight: 300; }
.k-ts { font-size: calc(12px * var(--px)); color: var(--muted); }
.k-wide { width: 100%; }
/* pc-v35: top space as on the boards (56px there includes a ~24px phone status bar) */
main.wrap { padding-top: calc(32px + env(safe-area-inset-top, 0px)) !important; }
.sheet:not(.overlay) .sheet-body { padding-top: calc(32px + env(safe-area-inset-top, 0px)); }
.k-add { height: 48px; min-height: 0; border-radius: 18px; border: 1.5px dashed var(--glass-line); background: transparent; color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: calc(14px * var(--px)); font-weight: 500; width: 100%; box-shadow: none; cursor: pointer; }
.k-b44 { height: 44px; min-height: 0; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass-hi); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: calc(15px * var(--px)); font-weight: 400; width: 100%; box-shadow: none; cursor: pointer; }
.k-lead { margin: 0; font-size: calc(15px * var(--px)); line-height: 1.5; color: var(--muted); }
.k-pets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.k-pets > button { position: relative; height: 120px; border-radius: 24px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: calc(14px * var(--px)); box-shadow: none; }
.k-pets > button[aria-pressed="true"] { border: 1.5px solid var(--accent); background: var(--glass-hi); }
.k-pets > button .k-tick { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: none; align-items: center; justify-content: center; }
.k-pets > button[aria-pressed="true"] .k-tick { display: flex; }
.k-pets canvas, .k-pets img { width: 48px; height: 48px; image-rendering: pixelated; }
.k-search { height: 48px; padding: 0 18px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; align-items: center; gap: 10px; color: var(--muted); }
.k-search input { flex: 1; border: 0; outline: none; background: transparent; color: var(--ink); font-size: calc(15px * var(--px)); min-width: 0; height: 46px; min-height: 0; padding: 0; box-shadow: none; }
.k-nick { display: flex; flex-direction: column; gap: 0; padding-bottom: 14px; } .k-nick .g-row input { flex: 1; border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 0; height: 40px; font-size: calc(15px * var(--px)); color: var(--ink); }
.k-pbtn { border: 0; min-height: 0; cursor: pointer; font: inherit; font-size: calc(13px * var(--px)); background: none; padding: 4px 0 4px 10px; }
.k-pbtn.pill-ok { padding: 4px 10px; margin-left: 4px; font-size: calc(12px * var(--px)); }
.g-row.sel { background: var(--accent-soft) !important; margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.sort-card { display: flex; flex-direction: column; gap: 10px; }
.sort-card .sec-h .sc-name { font: inherit; border: 0; background: transparent; padding: 0; min-height: 0; height: auto; color: var(--ink); box-shadow: none; }
.sort-card.target .sec-h h3 { color: var(--accent); }
.k-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.k-stat { padding: 14px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; flex-direction: column; gap: 2px; }
.k-sv { font-size: calc(22px * var(--px)); font-weight: 300; }
.k-sl { font-size: calc(12px * var(--px)); color: var(--muted); }
.k-bars { padding: 14px 18px; border-radius: 28px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; flex-direction: column; gap: 2px; }
.k-brow { padding: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.k-bl { display: flex; justify-content: space-between; font-size: calc(14px * var(--px)); }
.k-vt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.k-tv18 { font-size: calc(18px * var(--px)); font-weight: 300; }
.k-bar.b4 { height: 4px; }
.sec-h > .k-end { font-size: calc(13px * var(--px)); }
.k-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .k-num input { width: 64px; text-align: right; border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 0; height: 28px; font: inherit; color: var(--muted); }
.k-lead.ink { color: var(--ink); }
.k-label { padding: 16px; border-radius: 28px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.k-label > div { padding: 18px; border-radius: 18px; border: 1.5px dashed var(--glass-line); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.k-ln { font-size: calc(20px * var(--px)); font-weight: 500; }
.k-ll { font-size: calc(14px * var(--px)); }
.k-qc { padding: 26px 22px; border-radius: 28px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.k-orb { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--b1) 0%, var(--accent) 100%); opacity: .85; align-self: center; }
.k-qt { font-size: calc(22px * var(--px)); font-weight: 300; line-height: 1.3; text-align: center; }
/* pc-v35 scan */
.k-photo { height: 220px; border-radius: 24px; background: radial-gradient(circle at 30% 30%, var(--b1) 0%, var(--b2) 55%, var(--b3) 100%); background-size: cover; background-position: center; border: 1px solid var(--glass-line); display: flex; align-items: flex-end; padding: 14px; box-sizing: border-box; flex: none; }
.k-photo span { font-size: 13px; color: var(--muted); }
.k-photo[style*="url("] span { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.k-wait, .k-info { padding: 16px 18px; border-radius: 28px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; flex-direction: column; gap: 10px; }
.k-wait > div { display: flex; justify-content: space-between; font-size: 14px; }
.k-wait .k-sec { color: var(--muted); }
.k-info { padding: 12px 16px; display: block; }
.k-info > div { font-size: 13px; line-height: 1.5; }
.k-edit { padding: 4px 0 12px; }
.k-edit .rev-item { margin: 0; }
/* every older "›" chevron draws the board's thin svg chevron */
.g-row .chev, .chev { font-size: 0 !important; width: 16px; height: 16px; flex: none; color: var(--muted); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat; }
.k-scan { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 16px 18px; border-radius: 28px; color: inherit; font: inherit; cursor: pointer; }
.k-scan b { font-size: 16px; font-weight: 500; display: block; }
.k-scan small { font-size: 13px; color: var(--muted); }
.k-it { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.k-info .k-note { margin: 0; }
.k-scan.k-card { padding: 18px; gap: 14px; background: var(--accent); color: var(--accent-ink); border: 0; }
.k-scan.k-card small { color: inherit; opacity: .8; }
.k-scan .g-ico { background: rgba(255,255,255,.18); color: inherit; }
.k-grid2 > .k-add { height: 96px; border-radius: 22px; margin: 0; }
.k-pill { border-radius: 999px; display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 52px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--muted); }
.k-pill input { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; font-size: 15px; flex: 1; min-width: 0; height: auto; }
.k-end.accent { color: var(--accent); font-size: 18px; }
.k-num { width: 56px; text-align: right; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; font: inherit; color: var(--muted); height: auto !important; min-height: 0 !important; }
.k-end:has(.k-num) { display: flex; align-items: center; gap: 4px; flex: none; }
.g-row input.k-num { width: 48px !important; flex: none; }
.g-list.k-scroll { max-height: 320px; overflow-y: auto; }
.k-num0 { background: none; border: 0; font: inherit; color: inherit; padding: 0 2px; cursor: pointer; }
.k-stepper { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 8px 0; }
.k-sb { width: 52px; height: 52px; border-radius: 50%; background: var(--glass-hi); border: 1px solid var(--glass-line); color: var(--ink); font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.k-sn { font-size: 56px; font-weight: 300; min-width: 64px; text-align: center; }
.k-note.center { text-align: center; }
.k-share { padding: 18px; border-radius: 28px; background: var(--glass-hi); border: 1px solid var(--glass-line); display: flex; flex-direction: column; gap: 10px; }
.k-sh-t { font-size: 22px; font-weight: 300; line-height: 1.25; }
.k-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.k-sh-i { font-size: 13px; line-height: 1.5; }
.k-sh-f { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.k-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.k-day { padding: 10px 0; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink); font: inherit; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.k-day b { font-size: 16px; font-weight: 400; }
.k-day[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.k-stars { display: flex; justify-content: space-between; padding: 0 8px; }
.k-stars button { background: none; border: 0; padding: 4px; color: var(--muted); cursor: pointer; }
.k-stars button[aria-pressed="true"] { color: var(--accent); }
.k-stars button[aria-pressed="true"] svg { fill: currentColor; }
label.k-photo { cursor: pointer; }
.alarm-full.k-alarm { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; background: var(--bg-glass, var(--bg)); background: radial-gradient(circle 220px at 20px 120px, var(--b1) 0%, transparent 68%), radial-gradient(circle 210px at calc(100% - 20px) 440px, var(--b2) 0%, transparent 68%), var(--bg); padding: calc(32px + env(safe-area-inset-top, 0px)) 20px 30px; color: var(--ink); }
.k-alarm > div.sh { background: none; padding: 0; display: flex; align-items: center; gap: 12px; border-radius: 0; min-width: 0; }
.k-alarm .k-al-t { font-size: 64px; font-weight: 300; text-align: center; margin-top: 40px; }
.k-alarm .k-al-s { font-size: 15px; text-align: center; margin: 0; }
.k-alarm .k-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; background: none; padding: 0; border-radius: 0; }
.k-alarm .k-foot .btn { margin: 0; font-size: 15px; padding: 0; }
.alarm-full.k-alarm > div { background: none; padding: 0; border-radius: 0; display: block; min-width: 0; text-align: left; box-shadow: none; }
.alarm-full.k-alarm > div.sh { display: flex; }
.alarm-full.k-alarm > div.k-foot { display: flex; }
.alarm-full.k-alarm h2 { font-size: 28px; font-weight: 300; margin: 0; }
.k-chat { padding: 18px; border-radius: 28px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; flex-direction: column; gap: 12px; }
.k-chat.empty { display: none; }
.k-chat.empty:has(.busy, .err) { display: flex; }
.k-chat .msg { font-size: 14px; line-height: 1.5; background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }
.k-chat .msg.me { align-self: flex-end; max-width: 80%; padding: 12px 16px; border-radius: 20px 20px 6px 20px; background: var(--accent); color: var(--accent-ink); }
.k-chat .msg p { margin: 0 0 6px; }
.k-starters { margin-top: 0; }
.k-askbar { position: sticky; bottom: calc(-30px - env(safe-area-inset-bottom, 0px)); margin-top: auto !important; padding: 14px 0 30px; display: flex; gap: 8px; align-items: center; background: linear-gradient(to bottom, transparent, var(--bg) 30%); z-index: 3; }
.k-askbar input { flex: 1; height: 52px; border-radius: 999px !important; padding: 0 20px !important; background: var(--glass-hi) !important; border: 1px solid var(--glass-line) !important; font-size: 15px; }
.k-askbar .btn { height: 52px; border-radius: 999px; padding: 0 20px; }
.k-wat { padding: 22px; gap: 6px; }
.k-glasses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.k-glass { height: 64px; border-radius: 20px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.k-glass.on { background: var(--accent-soft); color: var(--accent); }
.k-glass.on svg { fill: currentColor; fill-opacity: .25; }
.k-wat .k-big { font-size: 40px; }
.k-post { padding: 14px; border-radius: 28px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; flex-direction: column; gap: 10px; margin: 0; box-shadow: none; }
.k-post .post-ph-wrap { border-radius: 20px; overflow: hidden; margin: 0; }
.k-pt { display: flex; gap: 8px; align-items: flex-start; }
.k-ptt { font-size: 15px; }
.k-pt .k-note { margin: 2px 0 0; }
.k-pa { flex-wrap: wrap; margin: 0; }
.k-pbtn0 { border: 0; cursor: pointer; font: inherit; }
.feed { display: flex; flex-direction: column; gap: 14px; }
main.wrap:has(> .sheet-foot) { display: flex; flex-direction: column; min-height: 100dvh; box-sizing: border-box; }
main.wrap:has(> .sheet-foot) > * { flex: none; }
main.wrap:has(> .sheet-foot) > .sheet-foot { margin-top: auto !important; }
.k-av { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.k-av .av.big { width: 96px; height: 96px; font-size: 36px; font-weight: 300; }
.k-form { display: flex; flex-direction: column; gap: 14px; }
.k-info.k-row { display: flex; gap: 12px; align-items: center; }
.k-info.k-row > div { font-size: 13px; }
.k-form { flex: 1; } .k-form > .sheet-foot { margin-top: auto !important; }
.k-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.k-grid3 > .k-add, .k-shot { height: 96px; border-radius: 22px; margin: 0; }
.k-shot { background: var(--glass) center/cover; border: 1px solid var(--glass-line); position: relative; cursor: pointer; }
.k-shot span { position: absolute; top: 6px; right: 8px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.wn-scrim.k-wn { background: radial-gradient(circle 220px at 20px 120px, var(--b1) 0%, transparent 68%), radial-gradient(circle 210px at calc(100% - 20px) 440px, var(--b2) 0%, transparent 68%), var(--bg); align-items: stretch; justify-content: stretch; padding: 0; }
.k-wn .wn-card { background: none; box-shadow: none; border: 0; border-radius: 0; max-width: none; width: 100%; min-height: 100%; box-sizing: border-box; padding: calc(32px + env(safe-area-inset-top, 0px)) 20px 30px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.k-wn .sh { display: flex; align-items: center; gap: 12px; }
.k-wn h2 { font-size: 28px; font-weight: 300; margin: 0; }
.k-wn .g-list { margin: 0; }
.k-wn .k-foot { margin-top: auto; display: flex; flex-direction: column; }
.k-hdl { display: flex; flex-direction: column; width: 18px; flex: none; color: var(--muted); }
.k-hdl button { background: none; border: 0; color: inherit; padding: 0; height: 16px; line-height: 16px; font-size: 14px; cursor: pointer; }
.k-hdl button:disabled { opacity: .25; }