@font-face { font-family: Noto; src: url('assets/fonts/noto-regular.b1de729bf77be1e8.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Noto; src: url('assets/fonts/noto-medium.76df1bcafb1bad6a.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Noto; src: url('assets/fonts/noto-bold.c5287a915d9f3beb.woff2') format('woff2'); font-weight: 700; font-display: swap; }
img[data-media-pending], img[data-media-error] { opacity: 0; }
/* Section chrome is shared; only the central stream changes shape. */
.social-context-tabs { justify-content: center; margin: 0 auto 20px; width: 100%; }
.feed-filter-tab { display: inline-flex; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); min-height: 44px; padding: 8px 0; font: inherit; }
.feed-filter-tab[aria-current='page'] { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.diy-material-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 18px; border: 0; padding: 12px 0; margin: 12px 0 22px; }
.diy-material-choices legend { margin-bottom: 10px; font-weight: 700; }
.diy-material-choices label { display: flex; align-items: center; gap: 9px; min-height: 44px; overflow-wrap: anywhere; }
.diy-material-choices input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent-text); }
.step-photo-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.recipe-photo.diy-step-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 460px; margin-top: 14px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.recipe-photo.diy-step-photo > img { width: 100%; height: 100%; object-fit: contain; }
.step-media .diy-step-photo { width: min(100%,260px); }
.step-photo-status { margin: 0; }
.page-cooking .mobile-feed-actions > [href='#/editor'], .page-filtered .mobile-feed-actions > [href='#/editor'] { display: none; }
@media (max-width: 959px) {
  .page-cooking .mobile-feed-actions, .page-filtered .mobile-feed-actions { display: flex; justify-content: flex-end; }
}
@media (min-width: 1200px) {
  .social-general-layout, :root[data-theme='light'] .social-general-layout { grid-template-columns: 208px minmax(0,760px) 260px; justify-content: center; }
}
@media (max-width: 480px) {
  .social-context-tabs { gap: 4px; }
  .social-context-tabs a { padding-inline: 7px; font-size: 12px; }
  .diy-material-choices { column-gap: 10px; }
}
:root {
  --bottom: 0px; font: 15px/1.5 Noto, Arial, sans-serif; background: var(--background); color: var(--text);
}
:root {
  color-scheme: light;
  --accent-pressed: #0A3942;
  --background: #E7EBED; --card: #F8F8F8; --raised: #E1E7EA; --line: #D9E3E6; --text: #172B32; --muted: #52676F;
  --gold: #125560; --gold-ink: #fff; --accent-text: #125560; --accent-hover: #0D4650;
  --success: #125560; --follow-bg: #E8F2F4; --follow-line: #718A93; --red: #A43141; --on-danger: #fff; --control-border: #718A93; --placeholder: #52676F;
  --bar-header: #F8F8F8; --bar-bottom: #f8f8f8f5; --accent-soft: #E8F2F4; --accent-soft-strong: #E8F2F4; --accent-border: #718A93;
  --avatar-bg: #E8F2F4; --avatar-line: #D9E3E6; --avatar-text: #125560;
  --error-bg: #FBECEF; --own-message-bg: #E8F2F4; --own-message-line: #D9E3E6; --message-note: #52676F;
  --disabled-bg: #E8EEF0; --disabled-text: #6C7E85; --disabled-line: #D9E3E6; --inactive-input: #E8EEF0;
  --warning-bg: #FFF6E5; --warning-line: #80551C; --warning-text: #80551C;
  --toast-bg: #E8F2F4; --toast-text: #125560; --toast-line: #718A93;
  --shadow: #172b3208; --dialog-shadow: #172b3226; --backdrop: #172b3255;
  --top: 76px; font-family: 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); }
button, input, textarea, select { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { border-radius: 9px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
h1:focus, main:focus { outline: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 30px; font-weight: 700; line-height: 1.3; margin-bottom: 15px; letter-spacing: -.5px; overflow-wrap: anywhere; }
h2 { font-size: 20px; line-height: 1.35; margin-bottom: 16px; }
h3 { font-size: 18px; line-height: 1.4; }
p { line-height: 1.65; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 100; min-height: 44px; padding: 12px; background: var(--gold); color: var(--gold-ink); border-radius: 8px; }
.skip-link:focus { top: 10px; }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: calc(var(--top) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: var(--bar-header); border-bottom: 1px solid var(--line); }
.top-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 100%; padding: 10px 24px; margin: auto; }
.brand { font-size: 30px; font-weight: 700; color: var(--accent-text); letter-spacing: -1px; min-height: 44px; display: inline-flex; align-items: center; flex-shrink: 0; }
.top-link { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; min-height: 52px; border-radius: 8px; color: var(--muted); gap: 4px; position: relative; }
.top-link span:last-child { font-size: 10px; }
.top-link[aria-current='page'] { color: var(--accent-text); background: var(--accent-soft); }
.top-link:hover { color: var(--accent-text); }
.header-search { display: none; }
.main { width: 100%; margin: auto; padding: calc(var(--top) + 24px + env(safe-area-inset-top)) 24px calc(var(--bottom) + 40px + env(safe-area-inset-bottom)); min-height: 100vh; }
.local-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.section-entry { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.section-entry h1 { margin:0; letter-spacing:0; }
.cooking-entry { justify-content:flex-end; }
.games-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),292px));gap:20px;padding:16px 0 28px;border-top:1px solid var(--line)}
.game-preview-card{display:grid;grid-template-rows:3fr 1fr;aspect-ratio:1;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);text-decoration:none;box-shadow:0 5px 18px #0002}
.game-preview-image{position:relative;min-height:0;overflow:hidden;background:#0b141b}.game-preview-image img{display:block;width:100%;height:100%;object-fit:cover}.game-preview-badge{position:absolute;top:10px;left:10px;padding:4px 8px;border:1px solid #b99a5d66;border-radius:4px;background:#10171feb;color:#efdcaf;font-size:10px;line-height:1.4}
.game-preview-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;min-width:0}.game-preview-caption h2{margin:0 0 4px;font-size:19px;line-height:1.15}.game-preview-caption p{margin:0;font-size:12px;color:var(--muted)}.game-preview-play{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border:1px solid #b3935066;border-radius:50%;background:var(--gold);color:var(--gold-ink)}
.game-preview-card:hover{border-color:var(--gold);box-shadow:0 7px 22px #0003}.game-preview-card:focus-visible{outline:3px solid var(--gold);outline-offset:4px}@media(prefers-reduced-motion:no-preference){.game-preview-card{transition:border-color 120ms,box-shadow 120ms}}
.social-stream > .recipe-card { width:100%; margin:0; }
.demo-notice { font-size: 11px; line-height: 1.5; color: var(--muted); }
.demo-notice strong { display: inline; font-size: 11px; font-weight: 500; color: var(--accent-text); margin-right: 8px; }
.cart-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; flex-shrink: 0; color: var(--muted); background: var(--card); }
.cart-link .icon { width: 20px; height: 20px; }
.lead, .note { color: var(--muted); }
.lead { font-size: 15px; margin-bottom: 23px; }
.note { font-size: 13px; line-height: 1.6; }
.feed-tabs, .tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin: 0 0 20px; }
.feed-tabs a, .tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 14px; padding: 8px 2px; color: var(--muted); }
.feed-tabs a[aria-current='page'], .tabs a[aria-current='page'] { color: var(--accent-text); font-weight: 700; border-bottom: 2px solid var(--gold); }
.category-shortcuts { display: flex; gap: 10px; min-width: 0; max-width: 100%; overflow-x: auto; padding: 3px 3px 7px; margin: -5px -3px 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.category-shortcuts a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 14px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 12px; color: var(--muted); }
.category-shortcuts a[aria-current='page'], .category-shortcuts a:hover { border-color: var(--accent-border); color: var(--accent-text); background: var(--accent-soft); }
.category-shortcuts .icon { width: 21px; height: 21px; }
.recipe-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.recipe-card { border: 1px solid var(--line); border-radius: 13px; background: var(--card); overflow: hidden; min-width: 0; }
.card-head { padding: 12px 15px; }
.creator-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.creator { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.avatar { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--avatar-bg); border: 1px solid var(--avatar-line); font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--avatar-text); }
.avatar-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: zoom-in; }
.avatar-button:hover { background: var(--raised); }
.avatar-button .avatar { display: block; object-fit: cover; }
.avatar-window { display: block; overflow: hidden; border-radius: 50%; flex: none; }
.avatar-window .avatar { margin: 0; }
/* Profile framing affects the circle only; the viewer always contains the full master. */
.media-preview.media-avatar-editor { display: block; padding: 20px; }
.avatar-crop-stage { position: relative; width: min(280px,100%); aspect-ratio: 1; margin: 0 auto 18px; overflow: hidden; border-radius: 50%; background: var(--raised); outline: 2px solid var(--accent-border); outline-offset: 4px; cursor: grab; touch-action: none; user-select: none; }
.avatar-crop-stage.is-dragging { cursor: grabbing; }
.media-avatar .avatar-crop-stage img { position: absolute; max-width: none; max-height: none; margin: 0; border-radius: 0; object-fit: fill; pointer-events: none; }
.avatar-position { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avatar-position input { flex: 1; min-width: 110px; }
.avatar-position label { font-size: 13px; }
.profile-media-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#avatar-dialog[data-purpose="avatar"] { width: min(1100px,96vw); height: min(860px,94dvh); max-width: 96vw; max-height: 94dvh; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 24px 90px #0006; }
#avatar-dialog[data-purpose="avatar"][open] { display: grid; grid-template-rows: auto minmax(0,1fr); }
#avatar-dialog[data-purpose="avatar"]::backdrop { background: #071318ba; backdrop-filter: blur(8px); }
#avatar-dialog[data-purpose="avatar"] .dialog-header { padding: 16px 22px; margin: 0; border-bottom: 1px solid var(--line); gap: 20px; }
.avatar-viewer-heading { min-width: 0; }
.avatar-viewer-label { display: block; color: var(--muted); font-size: 11px; letter-spacing: .04em; margin-bottom: 3px; }
#avatar-title { font-size: 18px; margin: 0; overflow-wrap: anywhere; }
#avatar-title a { color: var(--text); text-decoration: none; }
#avatar-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
#avatar-dialog[data-purpose="avatar"] .avatar-viewer-stage { min-height: 0; padding: 24px; overflow: hidden; display: grid; place-items: center; background: #111b20; }
#avatar-dialog[data-purpose="avatar"] .avatar-preview { width: 100%; height: 100%; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; margin: 0; }
@media(max-width:600px) {
  #avatar-dialog[data-purpose="avatar"] { width: 96vw; height: 92dvh; border-radius: 12px; }
  #avatar-dialog[data-purpose="avatar"] .dialog-header { padding: 12px 14px; }
  #avatar-dialog[data-purpose="avatar"] .avatar-viewer-stage { padding: 10px; }
}
.user-name-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.user-name-link:hover { color: var(--accent-text); text-decoration: underline; }
.official-badge { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; margin-inline-start: .35em; border-radius: 50%; background: var(--accent-soft); color: var(--success); font-size: .75em; vertical-align: middle; flex: none; }
.official-badge svg { display: block; width: 76%; height: 76%; }
.profile-username { margin: .15rem 0 .35rem; color: var(--muted); font-size: .9rem; }
.official-profile-tabs { margin: 1.25rem 0; }
.creator-name > .user-name-link { display: flex; flex-direction: column; align-items: flex-start; min-height: 44px; }
.creator-name > .user-name-link:hover { text-decoration: none; }
.creator-name > .user-name-link:hover .creator-label { text-decoration: underline; }
.avatar-preview { display: block; width: min(360px,100%); height: auto; margin: 0 auto 20px; border-radius: 20px; }
.comment-user, .blocked-user-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.comment-user .user-name-link, .blocked-user-identity .user-name-link { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.thread-open { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--accent-text); }
.messenger-thread .user-name-link { display: inline-flex; align-items: center; min-height: 44px; }
.creator-name { font-size: 13px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.user-average { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.user-average > .icon { width: 12px; height: 12px; color: var(--accent-text); fill: currentColor; }
.user-followers { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.recipe-published { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.creator-controls { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.friend-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 7px 11px; font-size: 12px; font-weight: 700; color: var(--accent-text); border: 1px solid var(--accent-text); background: transparent; flex-shrink: 0; }
.friend-button .icon { width: 19px; height: 19px; }
.friend-button[aria-pressed='true'] { border-color: var(--accent-border); background: var(--accent-soft-strong); }
[data-action='follow']:not(:disabled) { color: var(--accent-text); border-color: var(--accent-text); background: transparent; }
[data-action='follow'][aria-pressed='true']:not(:disabled) { color: var(--success); border-color: var(--follow-line); background: var(--follow-bg); }
[data-action='follow']:not(:disabled):hover { box-shadow: inset 0 0 0 1px currentColor; }
[data-action='follow'] { white-space: nowrap; }
.more-button { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; background: transparent; color: var(--muted); }
.more-button:hover { color: var(--accent-text); background: var(--raised); }
.photo-link { display: block; position: relative; overflow: hidden; }
.recipe-photo { display: block; width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--raised); }
.recipe-photo, .ad-image { overflow: hidden; }
.recipe-photo > img, .ad-image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.recipe-card .recipe-photo { height: 240px; aspect-ratio: auto; }
.photo-copy { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 18px 17px; background: linear-gradient(transparent, #06090be8 48%, #06090bf5); }
.card-title { margin: 0; color: #fff; font-size: 23px; line-height: 1.25; font-weight: 700; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 2.5em; overflow: hidden; }
.photo-copy p { color: #e1e5e5; font-size: 12px; line-height: 1.4; margin: 6px 0 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.rating-row { display: flex; align-items: center; gap: 9px; padding: 8px 16px; color: var(--muted); font-size: 11px; }
.stars { display: inline-flex; gap: 2px; color: var(--accent-text); }
.stars .icon { width: 14px; height: 14px; }
.rating-star { --star-size: 14px; display: inline-block; position: relative; width: var(--star-size); height: var(--star-size); flex-shrink: 0; }
.rating-star > .icon, .rating-star-fill > .icon, .stars .rating-star .icon { position: absolute; top: 0; left: 0; width: var(--star-size); height: var(--star-size); }
.rating-star-outline { color: var(--muted); }
.rating-star-fill { position: absolute; top: 0; left: 0; height: 100%; width: var(--fill,0%); overflow: hidden; color: var(--accent-text); pointer-events: none; }
.rating-star-fill > .icon { fill: currentColor; stroke: currentColor; }
.personal-rating-panel { padding: 22px; margin: 20px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); container-type: inline-size; }
.rating-shortcuts { display: grid; grid-template-columns: repeat(5,minmax(44px,1fr)); gap: 6px; max-width: 360px; margin-bottom: 18px; }
.rating-shortcut { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 48px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--raised); }
.rating-shortcut .rating-star { --star-size: 32px; }
.rating-shortcut:hover, .rating-shortcut:focus-visible { border-color: var(--accent-text); }
.rating-numbers { border: 0; padding: 0; margin: 0; min-width: 0; }
.rating-choice-grid { display: grid; grid-template-columns: repeat(5,minmax(44px,1fr)); gap: 6px; }
.rating-choice { position: relative; min-width: 44px; min-height: 44px; cursor: pointer; }
.rating-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.rating-choice > span { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 14px; }
.rating-choice input:checked + span { background: var(--gold); border-color: var(--accent-text); color: var(--gold-ink); font-weight: 700; }
.rating-choice input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.rating-choice:hover > span { border-color: var(--accent-text); }
@container (min-width: 494px) { .rating-choice-grid { grid-template-columns: repeat(10,minmax(44px,1fr)); } }
@media (max-width: 600px) { .personal-rating-panel { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .rating-star-fill { transition: none; } }
.card-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 5px 10px; border-top: 1px solid var(--line); }
.social-button { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; min-width: 44px; min-height: 59px; padding: 6px 2px; border: 0; background: transparent; border-radius: 7px; color: var(--text); gap: 5px; }
.social-button .icon { width: 24px; height: 24px; }
.action-symbol { display: inline-flex; align-items: center; gap: 6px; }
.action-symbol b { font-size: 11px; font-weight: 400; }
.action-label { font-size: 12px; line-height: 1.2; max-width: 100%; }
.social-button:hover { background: var(--raised); }
.social-button.heart[aria-pressed='true'] { color: var(--red); }
.social-button .liked-icon { color: var(--red); fill: var(--red); }
.social-button[aria-pressed='true']:not(.heart) { color: var(--accent-text); background: var(--accent-soft); }
.card-cta { padding: 3px 14px 14px; }
.card-cta .button { width: 100%; }
.ad-head { display: flex; align-items: center; gap: 10px; min-height: 87px; }
.ad-identity { min-width: 0; }
.ad-identity strong { display: block; font-size: 13px; }
.ad-label { display: block; font-size: 11px; color: var(--accent-text); margin-top: 3px; }
.ad-image { width: 100%; height: 240px; background-size: cover; background-position: center; background-color: var(--raised); }
.ad-copy { padding: 18px 16px 16px; }
.ad-copy h3 { font-size: 21px; margin-bottom: 9px; }
.ad-copy p { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.ad-copy small { font-size: 10px; color: var(--muted); }
.ad-dialog-image { border-radius: 10px; height: auto; aspect-ratio: 3 / 2; margin-bottom: 16px; }
@media (max-width: 600px) { .ad-head { min-height: 78px; } .ad-image { height: 210px; } .ad-dialog-image { height: auto; } }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 11px 16px; font-size: 13px; font-weight: 700; border: 1px solid var(--gold); border-radius: 8px; background: var(--gold); color: var(--gold-ink); }
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button:not(.secondary):not(.danger-fill):not(.media-icon-control):not(:disabled):active { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.button.secondary { color: var(--accent-text); background: transparent; border-color: var(--accent-border); }
.button.secondary:hover { background: var(--accent-soft); border-color: var(--accent-text); }
.button .icon { width: 20px; height: 20px; }
.icon-button { min-width: 44px; min-height: 44px; padding: 9px; border: 1px solid var(--line); background: var(--card); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-button:hover { color: var(--accent-text); border-color: var(--accent-border); }
.icon-button .icon { width: 22px; height: 22px; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 13px; color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; margin-bottom: 14px; }
.detail-intro { margin-bottom: 17px; }
.detail-intro .creator-row { margin: 18px 0; }
.detail-photo { border-radius: 12px; margin: 18px 0; max-height: 350px; }
.metadata { display: flex; gap: 22px; color: var(--muted); font-size: 13px; }
.metadata span { display: inline-flex; align-items: center; gap: 7px; }
.metadata .icon { width: 20px; height: 20px; }
.recipe-visibility { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--muted); font-size: 11px; line-height: 1.4; }
.recipe-visibility .icon { width: 16px; height: 16px; }
.recipe-visibility > span { min-width: 0; overflow-wrap: anywhere; }
.card-visibility { position: absolute; top: 10px; right: 10px; max-width: calc(100% - 20px); z-index: 1; pointer-events: none; }
.detail-visibility { margin-top: 14px; }
.detail-actions { margin-bottom: 17px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.recipe-content { display: grid; gap: 30px; margin-top: 28px; }
.detail-intro, .detail-intro h1, .detail-intro p, .recipe-content > section, .tag { min-width: 0; overflow-wrap: anywhere; }
.ingredients-box { background: var(--card); border: 1px solid var(--line); padding: 22px; border-radius: 12px; }
.ingredient-list, .steps-list, .cart-list, .comment-list, .activity-list { margin: 0; padding: 0; list-style: none; }
.ingredient-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ingredient-row:last-child { border-bottom: none; }
.ingredient-row > span { min-width: 0; overflow-wrap: anywhere; }
.ingredient-row button { min-width: 44px; min-height: 44px; flex: 0 0 44px; background: var(--raised); border: 1px solid var(--line); color: var(--accent-text); font-size: 23px; }
.ingredient-row button[aria-pressed='true'] { background: var(--gold); border-color: var(--accent-text); color: var(--gold-ink); }
.ingredient-row .icon { width: 20px; height: 20px; }
.steps-list li { display: flex; gap: 14px; margin-bottom: 14px; padding: 16px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--card); }
.step-number { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; flex-shrink: 0; background: var(--accent-soft-strong); border: 1px solid var(--avatar-line); border-radius: 50%; color: var(--accent-text); font-size: 12px; font-weight: 700; }
.step-copy { min-width: 0; flex: 1; }
.step-title { margin: 0 0 6px; font-size: 15px; overflow-wrap: anywhere; }
.step-section-heading { margin: 22px 0 14px; font-size: 17px; overflow-wrap: anywhere; }
.recipe-notes { margin-top: 26px; }
.recipe-notes h3 { margin: 0 0 10px; font-size: 17px; }
.recipe-notes ul { padding-left: 22px; margin: 0; }
.recipe-notes li { margin-bottom: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.step-row-context { display: grid; gap: 3px; font-size: 12px; overflow-wrap: anywhere; }
.step-row-context span, .cook-step-section { color: var(--muted); }
.cook-step-section { margin: 0 0 8px; overflow-wrap: anywhere; }
.cook-instruction-title { margin: 0 0 12px; font-size: 20px; overflow-wrap: anywhere; }
.notes-field small { color: var(--muted); font-weight: 400; }
.steps-list p { font-size: 15px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tag-list { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0; }
.tag { background: var(--raised); color: var(--muted); border: 1px solid var(--line); padding: 5px 9px; border-radius: 5px; font-size: 11px; }
.empty-state { text-align: center; background: var(--card); border: 1px solid var(--line); padding: 38px 22px; border-radius: 12px; }
.empty-state > .icon { width: 35px; height: 35px; margin-bottom: 16px; color: var(--accent-text); }
.empty-state p { font-size: 14px; color: var(--muted); }
.collection-card { display: flex; align-items: center; gap: 18px; border: 1px solid var(--line); padding: 18px; border-radius: 12px; background: var(--card); }
.collection-card:hover { border-color: var(--accent-border); }
.collection-card .recipe-photo { width: 100px; aspect-ratio: 1; border-radius: 8px; flex-shrink: 0; }
.collection-card h2 { font-size: 19px; margin-bottom: 7px; }
.collection-card p { font-size: 12px; color: var(--muted); margin: 0; }
.profile-panel { display: flex; align-items: center; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 20px; }
.profile-panel > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.profile-panel .avatar { width: 64px; height: 64px; font-size: 21px; }
.profile-panel h2 { margin-bottom: 5px; font-size: 24px; }
.profile-panel .user-average { font-size: 12px; margin: 3px 0 7px; }
.profile-panel .user-followers { font-size: 12px; margin: 3px 0 7px; }
.profile-panel p { font-size: 12px; color: var(--muted); margin: 0; }
.profile-panel p.profile-bio { font-size: 14px; margin-top: 12px; white-space: pre-line; color: var(--text); }
.profile-hero { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 20px; background: var(--card); }
.profile-cover { height: clamp(150px,20vw,280px); background: var(--raised); }
.profile-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.profile-hero .profile-panel { border: 0; border-radius: 0; margin: 0; flex-wrap: wrap; align-items: flex-start; }
.profile-hero .avatar-button { width: 88px; height: 88px; padding: 4px; background: var(--card); }
.profile-hero .avatar { width: 80px; height: 80px; }
.profile-hero.has-cover .avatar-button { margin-top: -54px; position: relative; box-shadow: 0 0 0 4px var(--card); }
.profile-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-panel > .profile-actions { flex: 0 0 auto; }
.profile-actions .button { font-size: 12px; }
@media (max-width:600px) {
  .profile-panel > .profile-actions { flex: 0 0 100%; width: 100%; }
  .profile-actions .button { min-width: 120px; white-space: nowrap; }
  .profile-hero .avatar-button { width: 68px; height: 68px; }
  .profile-hero .profile-panel .avatar { width: 60px; height: 60px; }
  .profile-hero.has-cover .avatar-button { margin-top: -44px; }
}
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 21px; }
.profile-stat { padding: 20px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.profile-stat strong { display: block; font-size: 28px; color: var(--accent-text); }
.profile-stat span { font-size: 12px; color: var(--muted); }
.profile-stat-link { width: 100%; min-height: 44px; cursor: pointer; }
.profile-stat-link span { display: flex; justify-content: center; align-items: center; gap: 5px; }
.profile-stat-link span .icon { width: 14px; height: 14px; }
.profile-stat-link:hover { border-color: var(--accent-border); background: var(--raised); }
.followers-link { min-height: 44px; padding: 6px 0; background: transparent; border: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.followers-link:hover { color: var(--accent-text); }
.connections-owner { color: var(--muted); margin: 0 0 14px; }
.connection-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.connection-tabs [aria-pressed='true'] { border-color: var(--accent-text); color: var(--accent-text); background: var(--accent-soft-strong); }
.connection-list { list-style: none; padding: 0; margin: 0; }
.connection-user { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.connection-identity { min-width: 0; }
.connection-identity strong { display: block; }
.connection-identity small { display: block; color: var(--muted); font-size: 12px; }
.connection-identity .user-name-link { line-height: 1.35; overflow-wrap: anywhere; }
.connection-user .friend-button { min-width: 120px; }
.connection-empty { color: var(--muted); padding: 20px 0; }
@media (max-width:600px) {
  .connection-user { grid-template-columns: 44px minmax(0,1fr); gap: 6px 10px; }
  .connection-user .friend-button { grid-column: 2; justify-self: start; }
}
.profile-links { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 26px; }
.editor-form { display: grid; gap: 22px; }
.editor-photo-area { background: var(--card); border: 1px solid var(--line); padding: 13px; border-radius: 12px; }
.editor-photo-area h2 { font-size: 18px; margin: 18px 0 12px; }
.editor-photo-area h2 small { font-size: 12px; color: var(--muted); font-weight: 400; }
.media-actions, .profile-media-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.profile-media-actions { padding: 0 24px 24px; }
.media-actions .button, .profile-media-actions .button { min-height: 44px; }
.media-status { min-height: 24px; margin-top: 14px; }
.media-error { color: var(--red); }
.media-preview { display: flex; align-items: center; justify-content: center; min-height: 140px; background: var(--raised); border: 1px dashed var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.media-preview img { display: block; width: 100%; max-height: 280px; object-fit: contain; }
.media-avatar img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; margin: 18px; }
.media-preview.media-cover { display: block; min-height: 0; border: 0; background: transparent; overflow: visible; }
.cover-crop-stage { position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: var(--raised); cursor: grab; touch-action: none; user-select: none; }
.cover-crop-stage.is-dragging { cursor: grabbing; }
.cover-crop-stage img { position: absolute; max-width: none; max-height: none; object-fit: fill; pointer-events: none; }
.cover-crop-frame { position: absolute; inset-inline: 0; border: 2px dashed var(--accent-text); box-shadow: 0 0 0 999px rgb(0 0 0 / 45%); pointer-events: none; }
.cover-framing-help { margin: 10px 0; }
.cover-position { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; font-size: 12px; }
.cover-position input { min-width: 0; width: 100%; min-height: 44px; accent-color: var(--accent-text); }
.cover-position .button { font-size: 12px; padding: 8px 12px; }
.cover-recommendation { margin: 8px 0 0; }
.camera-preview { display: block; width: 100%; max-height: 300px; background: #000; border-radius: 12px; margin-bottom: 18px; }
.camera-preview[hidden], .media-actions [hidden] { display: none; }
.demo-photo-options { margin-top: 16px; }
.demo-photo-options summary { min-height: 44px; cursor: pointer; color: var(--muted); padding: 12px 0; }
.photo-empty { background: var(--raised); }
.photo-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; gap: 10px; color: var(--muted); min-height: 100px; }
.photo-placeholder .icon { width: 36px; height: 36px; }
.photo-copy .photo-placeholder { display: none; }
@media (max-width:600px) {
  .profile-media-actions { padding: 0 14px 18px; }
  .media-actions .button, .profile-media-actions .button { font-size: 12px; }
}
.editor-preview { max-height: 260px; border-radius: 8px; aspect-ratio: 16 / 9; margin-bottom: 13px; }
.photo-options { border: 0; padding: 0; margin: 0; }
.photo-options legend { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.photo-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.photo-choice { position: relative; cursor: pointer; min-width: 0; }
.photo-choice input { position: absolute; left: 5px; top: 5px; accent-color: var(--accent-text); width: 18px; height: 18px; z-index: 1; }
.photo-choice .recipe-photo { aspect-ratio: 1; border-radius: 7px; border: 3px solid transparent; }
.photo-choice input:checked + .recipe-photo { border-color: var(--accent-text); }
.photo-choice input:focus-visible + .recipe-photo { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.photo-choice span:last-child { display: block; color: var(--muted); font-size: 10px; margin-top: 5px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .course-options legend, .repeat-section h2 { font-size: 14px; font-weight: 500; color: var(--text); }
.field label .icon { width: 20px; height: 20px; margin-right: 4px; }
.field input, .field textarea, .field select, .repeat-row input, .repeat-row textarea, .search-field { width: 100%; min-width: 0; padding: 13px; min-height: 44px; border: 1px solid var(--control-border); background: var(--card); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
.header-search input::placeholder { font-style: italic; }
.field textarea { min-height: 96px; resize: vertical; }
.field small { font-size: 11px; color: var(--muted); }
.title-field input { background: var(--raised); font-size: 20px; font-weight: 500; min-height: 56px; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.course-options { border: 0; padding: 0; margin: 0; }
.course-options legend { margin-bottom: 12px; }
.visibility-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.visibility-options legend { color: var(--text); font-size: 14px; font-weight: 500; padding: 0; margin-bottom: 12px; }
.visibility-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.visibility-choice { position: relative; min-width: 0; min-height: 48px; cursor: pointer; }
.visibility-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 1; cursor: pointer; }
.visibility-choice > span { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 48px; height: 100%; padding: 11px 12px; border: 1px solid var(--control-border); border-radius: 9px; background: var(--card); color: var(--text); font-size: 13px; }
.visibility-choice > span > span { min-width: 0; overflow-wrap: anywhere; }
.visibility-choice .icon { width: 22px; height: 22px; }
.visibility-choice input:checked + span { border-color: var(--accent-text); background: var(--accent-soft-strong); color: var(--accent-text); }
.visibility-choice input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.visibility-options .note { margin: 10px 0 0; font-size: 11px; }
@media (max-width: 600px) { .visibility-grid { grid-template-columns: minmax(0,1fr); } .visibility-choice > span { justify-content: flex-start; } }
.course-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.course-chip { position: relative; display: inline-flex; cursor: pointer; }
.course-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.course-chip span { min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); color: var(--muted); background: var(--card); border-radius: 7px; font-size: 13px; display: inline-flex; align-items: center; }
.course-chip input:checked + span { background: var(--accent-soft-strong); border-color: var(--accent-text); color: var(--accent-text); }
.course-chip input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.repeat-section h2 { margin-bottom: 12px; }
.repeat-rows { display: grid; gap: 13px; margin-bottom: 13px; }
.repeat-row { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 9px; align-items: end; }
.repeat-row .row-field { display: grid; gap: 7px; min-width: 0; }
.repeat-row label { color: var(--muted); font-size: 12px; }
.repeat-row textarea { min-height: 44px; field-sizing: content; resize: vertical; }
.repeat-row .icon-button { margin-bottom: 1px; }
.ingredient-editor-row .ingredient-fields { grid-column: 1; }
.ingredient-editor-row > .icon-button { grid-column: 2; grid-row: 1; }
.ingredient-fields { display: grid; grid-template-columns: minmax(80px,.5fr) minmax(100px,.6fr) minmax(0,1.5fr); gap: 10px; min-width: 0; }
.ingredient-editor-row .row-field { min-width: 0; }
.ingredient-section-row { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 8px; align-items: center; width: 100%; max-width: 520px; padding-top: 8px; }
.ingredient-section-row[hidden] { display: none; }
.ingredient-section-title { min-width: 0; }
.ingredient-section-title input { width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); font-size: 14px; font-weight: 500; }
.ingredient-section-title input::placeholder { color: var(--muted); font-weight: 400; }
.ingredient-section-remove { border-color: transparent; background: transparent; color: var(--muted); }
.ingredient-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ingredient-section-add { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; }
.ingredient-section-add:hover { color: var(--accent-text); background: var(--accent-soft); }
.execution-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 24px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.execution-entry .note { margin: 0; flex: 1 1 200px; }
.ingredient-scale-note { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--muted); }
#cook-preview { margin-bottom: 22px; }
.cook-recipe-title { font-size: 26px; }
.cook-context { margin-bottom: 18px; }
.cook-progress { display: grid; gap: 9px; margin-bottom: 20px; font-size: 13px; color: var(--muted); }
.cook-progress progress { width: 100%; height: 9px; border: 0; border-radius: 10px; overflow: hidden; background: var(--raised); accent-color: var(--gold); }
.cook-progress progress::-webkit-progress-bar { background: var(--raised); }
.cook-progress progress::-webkit-progress-value { background: var(--gold); border-radius: 10px; }
.cook-progress progress::-moz-progress-bar { background: var(--gold); border-radius: 10px; }
.cook-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: start; gap: 20px; }
.cook-step-panel, .cook-ingredients-panel { min-width: 0; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow-wrap: anywhere; }
.cook-step-panel h2 { font-size: 23px; color: var(--accent-text); }
.cook-step-panel h2:focus { outline: none; }
.cook-step-text { margin: 0 0 28px; font-size: 19px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.cook-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.cook-controls .button { min-width: 0; padding: 10px; font-size: 13px; }
.cook-ingredients-panel summary { min-height: 44px; padding: 10px 0; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; }
.cook-ingredients-panel summary:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }
.cook-ingredients-panel[open] summary { margin-bottom: 10px; }
.cook-ingredients-panel .ingredient-row { font-size: 14px; }
.cook-complete-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft-strong); color: var(--success); margin-bottom: 18px; }
.cook-complete-mark .icon { width: 30px; height: 30px; }
.cook-rating-title { font-size: 18px; margin: 24px 0 12px; }
.cook-step-panel[data-testid='cook-complete'] .personal-rating-panel { padding: 0; border: 0; margin: 16px 0 22px; max-width: 520px; background: transparent; }
.cook-step-panel[data-testid='cook-complete'] .back-link { display: flex; margin: 12px 0 0; }
@media (max-width: 800px) { .cook-layout { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) {
  .ingredient-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .ingredient-name-field { grid-column: 1 / -1; }
  .ingredient-editor-row .row-field label { font-size: 11px; }
  .ingredient-editor-row input { padding: 11px 9px; }
  .execution-entry { padding: 16px; }
  .execution-entry .button { width: 100%; font-size: 14px; }
  .cook-recipe-title { font-size: 24px; }
  .cook-step-panel, .cook-ingredients-panel { padding: 18px; }
  .cook-step-text { font-size: 18px; }
  .cook-controls { gap: 9px; }
  .cook-controls .button { font-size: 12px; }
}
.form-error { padding: 14px; background: var(--error-bg); color: var(--red); border: 1px solid var(--red); border-radius: 8px; font-size: 13px; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 13px; padding-top: 11px; }
.cart-list { border-top: 1px solid var(--line); }
.cart-row { display: flex; align-items: center; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.cart-sources { margin-left: 34px; font-size: 11px; color: var(--muted); }
.cart-sources summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.cart-sources summary::before { content: '▸'; }
.cart-sources[open] summary::before { content: '▾'; }
.cart-sources ul { list-style: none; margin: 0; padding: 0; }
.cart-sources a { display: flex; align-items: center; min-height: 44px; text-decoration: underline; overflow-wrap: anywhere; }
.cart-adjusted { color: var(--accent-text); }
.cart-row label { display: flex; align-items: center; gap: 13px; min-height: 44px; min-width: 0; flex: 1; cursor: pointer; }
.cart-row label > span { min-width: 0; overflow-wrap: anywhere; }
.cart-row input { width: 21px; height: 21px; accent-color: var(--accent-text); flex-shrink: 0; }
.item-name { font-size: 15px; display: block; }
.item-source { font-size: 11px; color: var(--muted); display: block; margin-top: 5px; }
.cart-row.is-checked .item-name { color: var(--muted); text-decoration: line-through; }
.search-form { margin-bottom: 23px; }
.search-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 10px; }
.search-field { border-radius: 9px; }
.activity-list { margin-top: 14px; }
.activity-list li { padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.notification-badge { position: absolute; right: 2px; top: 0; background: var(--gold); color: var(--gold-ink); border: 2px solid var(--background); border-radius: 12px; min-width: 20px; padding: 1px 4px; font-size: 9px; font-weight: 700; line-height: 1.3; }
.message-unread-badge { background: var(--warning-bg); color: var(--warning-text); }
.notification-item { display: flex; align-items: center; gap: 12px; min-height: 48px; height: 48px; width: 100%; text-align: left; border: 0; background: var(--accent-soft); color: var(--text); padding: 10px 12px; border-radius: 8px; font-weight: 500; }
.notification-item:hover { background: var(--raised); }
.notification-item.is-read { background: transparent; color: var(--muted); font-weight: 400; }
.notification-symbol { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; color: var(--accent-text); }
.notification-symbol .icon { width: 22px; height: 22px; }
.notification-symbol[data-kind='like'] { color: var(--red); }
.notification-symbol[data-kind='rating'] .icon { fill: var(--accent-soft); }
.notification-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.notification-unread { width: 7px; height: 7px; flex-shrink: 0; background: var(--accent-text); border-radius: 50%; }
.messenger-list { display: grid; gap: 8px; }
.messenger-thread { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 6px 10px; min-width: 0; min-height: 62px; color: var(--text); text-decoration: none; }
.messenger-thread:hover { border-color: var(--accent-border); background: var(--raised); }
.messenger-thread:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.messenger-thread .thread-copy { flex: 1; min-width: 0; display: block; }
.messenger-thread .thread-name { min-width: 0; display: block; font-size: 13px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.messenger-thread .thread-preview { min-width: 0; display: block; font-size: 12px; line-height: 24px; color: var(--muted); margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.messenger-thread .thread-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.messenger-thread .messenger-unread { margin: 0; padding: 2px 6px; font-size: 10px; line-height: 16px; white-space: nowrap; }
.thread-unread-dot { display: block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); color: var(--accent-text); box-shadow: 0 0 5px currentColor; animation: messenger-unread-pulse 3.6s ease-in-out infinite; }
@keyframes messenger-unread-pulse { 0%, 100% { transform: scale(.85); box-shadow: 0 0 3px currentColor; } 50% { transform: scale(1.2); box-shadow: 0 0 8px currentColor; } }
@media (prefers-reduced-motion: reduce) { .thread-unread-dot { animation: none; transform: none; } }
.messenger-thread .avatar { flex: 0 0 36px; width: 36px; height: 36px; }
.thread-status { display: block; font-size: 11px; color: var(--muted); }
.thread-status.is-mutual { color: var(--success); }
.chat-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.chat-status > div { flex: 1; min-width: 150px; }
.chat-status strong { font-size: 13px; color: var(--success); }
.chat-status p { margin: 5px 0 0; }
.chat-log { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.sample-message, .own-message { padding: 14px 17px; border-radius: 12px; max-width: 88%; overflow-wrap: anywhere; }
.sample-message { background: var(--raised); border: 1px solid var(--line); align-self: flex-start; }
.own-message { background: var(--own-message-bg); border: 1px solid var(--own-message-line); align-self: flex-end; }
.chat-log strong { font-size: 11px; color: var(--accent-text); }
.chat-log p { margin: 7px 0; font-size: 14px; white-space: pre-wrap; }
.chat-log small { display: block; font-size: 10px; color: var(--message-note); }
.messenger-form { display: grid; gap: 14px; }
.messenger-form textarea { min-height: 100px; }
.messenger-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--raised); color: var(--text); font-weight: 700; }
.messenger-unread { display: inline-block; margin-top: 6px; padding: 4px 8px; border-radius: 12px; background: var(--own-message-bg); color: var(--text); font-size: 12px; font-weight: 700; }
.button:disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-line); cursor: default; }
.button:disabled:hover { background: var(--disabled-bg); border-color: var(--disabled-line); }
textarea:disabled { background: var(--inactive-input); color: var(--muted); border-style: dashed; }
.friend-button:disabled { border-color: var(--line); background: var(--raised); color: var(--muted); cursor: default; }
.safety-panel { margin-top: 27px; }
.safety-panel h3 { font-size: 14px; margin: 22px 0 12px; }
.safety-list { list-style: none; margin: 0 0 18px; padding: 0; }
.safety-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.safety-list li > span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.safety-list .button { flex-shrink: 0; font-size: 12px; }
.dialog-body > p { overflow-wrap: anywhere; }
.frame-options { margin-top: 20px; }
.frame-options .note { margin: 12px 0 0; font-size: 11px; }
.settings-form { display: grid; gap: 18px; }
.settings-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-sidebar { min-width: 0; position: sticky; top: calc(var(--top) + 16px + env(safe-area-inset-top)); max-height: calc(100dvh - var(--top) - var(--bottom) - 144px); overflow-y: auto; padding: 3px; margin: -3px; scrollbar-width: thin; }
.settings-category-list { display: grid; gap: 8px; }
.settings-page .settings-category { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 74px; padding: 12px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.settings-category:hover { background: var(--raised); }
.settings-category[aria-expanded='true'] { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); background: var(--raised); }
.settings-category:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.settings-category-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; background: var(--raised); color: var(--accent-text); border-radius: 12px; }
.settings-category-icon .icon { width: 22px; height: 22px; }
.settings-category-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.settings-category-label strong { display: block; color: var(--text); font-size: 16px; margin: 0 0 2px; }
.settings-category-label > span { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-category-chevron { flex: 0 0 20px; font-size: 26px; line-height: 1; text-align: center; color: var(--muted); }
.settings-workspace { min-width: 0; height: calc(100dvh - var(--top) - var(--bottom) - 144px); min-height: 320px; max-height: 820px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.settings-page .settings-form { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; height: 100%; }
.settings-page .settings-form[hidden], .settings-action-pane[hidden] { display: none; }
.settings-action-pane { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.settings-detail-toolbar { flex-shrink: 0; padding: 5px 24px; border-bottom: 1px solid var(--line); }
.settings-detail-scroll { flex: 1; min-height: 0; padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.settings-detail-scroll h1 { font-size: 22px; }
.settings-detail-scroll .account-page { max-width: none; margin: 0; }
.settings-detail-scroll .account-page > .account-back, .settings-detail-scroll .support-own > .account-back { display: none; }
.settings-detail-scroll .support-grid { grid-template-columns: minmax(0, 1fr); }
.settings-detail-scroll .auth-stage { display: block; padding: 0; }
.settings-detail-scroll .auth-wrap, .settings-detail-scroll .auth-card { width: 100%; max-width: none; }
.settings-detail-scroll .auth-card { padding: 0; background: transparent; border: 0; }
.settings-detail-scroll .auth-guest, .settings-detail-scroll .auth-switch { display: none; }
.settings-category:disabled { cursor: default; opacity: .65; }
@media (min-width: 801px) and (min-height: 560px) {
  .main.page-settings { height: 100dvh; min-height: 0; padding-bottom: 16px; overflow: hidden; }
  .page-settings .settings-page { height: 100%; display: flex; flex-direction: column; }
  .page-settings .settings-page > h1, .page-settings .settings-page > .lead { flex-shrink: 0; }
  .page-settings .settings-layout { flex: 1; min-height: 0; align-items: stretch; }
  .page-settings .settings-workspace { height: 100%; min-height: 0; max-height: none; }
  .page-settings .settings-sidebar { position: static; max-height: 100%; }
  .page-settings > .site-footer { display: none; }
}
.settings-panel-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.settings-category-panel { min-width: 0; }
.settings-category-panel[hidden] { display: none; }
.settings-category-panel:focus-visible { outline: 3px solid var(--accent-text); outline-offset: -3px; }
.settings-panel-heading { padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.settings-panel-heading h2 { margin: 0 0 6px; }
.settings-panel-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.settings-category-content { padding: 20px 24px; min-width: 0; }
.settings-category-content h3 { font-size: 15px; margin: 0 0 15px; }
.settings-category-content .field + .field { margin-top: 20px; }
.settings-category-content .field + .settings-toggle { margin-top: 18px; }
.settings-category-content .settings-panel-link { padding: 8px 0; }
.settings-category-content .settings-panel-link small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.settings-category-content .settings-panel-link strong { font-size: 14px; font-weight: 500; }
.settings-subsection { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
.settings-info-row { display: grid; gap: 5px; min-height: 52px; padding: 8px 0; overflow-wrap: anywhere; }
.settings-info-row strong { font-size: 14px; font-weight: 500; }
.settings-info-row small, .settings-info-row > span { font-size: 13px; color: var(--muted); }
.settings-save-area { display: grid; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--line); background: var(--card); flex-shrink: 0; }
.settings-save-area .note { margin: 0; }
.settings-page .settings-save { margin: 0; justify-self: start; align-self: start; }
:root[data-theme='light'] .settings-category, :root[data-theme='light'] .settings-workspace { border-radius: 20px; }
@media (max-width: 800px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .settings-sidebar { position: static; max-height: none; overflow: visible; }
  .settings-category-list { display: flex; gap: 8px; overflow-x: auto; padding: 4px; margin: -4px; scroll-padding-inline: 4px; scrollbar-width: thin; }
  .settings-page .settings-category { flex: 0 0 166px; min-height: 64px; padding: 12px; gap: 9px; }
  .settings-category-label strong { font-size: 13px; margin: 0; white-space: nowrap; }
  .settings-category-label > span, .settings-category-chevron { display: none; }
  .settings-workspace { height: auto; min-height: 0; max-height: none; }
  .settings-page .settings-form, .settings-action-pane { height: auto; }
  .settings-detail-scroll { overflow: visible; }
  .settings-panel-scroll { overflow: visible; }
}
@media (max-width: 600px) {
  .settings-category-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .settings-panel-heading { padding: 18px 15px; }
  .settings-category-content { padding: 18px 15px; }
  .settings-detail-toolbar { padding-inline: 15px; }
  .settings-detail-scroll { padding: 18px 15px; }
  .settings-save-area { padding: 16px 15px; }
  .settings-page .settings-save { width: 100%; justify-self: stretch; }
}
.settings-group > h2 { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 18px; margin: 0 2px 12px; }
.settings-group > h2 .icon { width: 21px; height: 21px; color: var(--muted); }
.settings-panel { background: var(--card); border: 1px solid var(--line); padding: 22px; border-radius: 16px; }
.settings-panel h2 { display: flex; align-items: center; gap: 11px; font-size: 18px; }
.settings-panel h2 .icon { color: var(--accent-text); }
.settings-panel .field + .field { margin-top: 20px; }
.settings-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; cursor: pointer; }
.settings-toggle > span { min-width: 0; }
.settings-toggle strong { display: block; font-size: 14px; font-weight: 500; }
.settings-toggle small { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 7px; }
.settings-toggle input { width: 44px; height: 44px; accent-color: var(--accent-text); flex-shrink: 0; margin: 0; }
.settings-row, .settings-reset-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; }
.settings-row > div:first-child, .settings-reset-row > div { min-width: 0; }
.settings-row strong, .settings-reset-row strong { display: block; font-size: 14px; font-weight: 500; }
.settings-row small, .settings-reset-row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 6px; }
.settings-row + .settings-toggle { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.settings-language { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.settings-language-picker { min-width:0; border:1px solid var(--control-border); border-radius:12px; background:var(--raised); }
.settings-language-picker summary { display:flex; align-items:center; gap:12px; min-height:52px; padding:10px 14px; cursor:pointer; list-style:none; }
.settings-language-picker summary::-webkit-details-marker { display:none; }
.settings-language-picker summary > strong { flex:1; font-size:14px; font-weight:500; }
.settings-language-current { display:flex; align-items:center; gap:10px; min-width:0; font-size:14px; }
.settings-language-flag { width:28px; height:21px; flex:0 0 28px; object-fit:cover; border:1px solid var(--control-border); border-radius:3px; }
.settings-language-chevron { width:8px; height:8px; flex:0 0 8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); margin:0 2px 4px 4px; }
.settings-language-picker[open] .settings-language-chevron { transform:rotate(225deg); margin-bottom:0; }
.settings-language-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; max-height:300px; overflow-y:auto; overscroll-behavior:contain; border:0; border-top:1px solid var(--line); padding:12px; margin:0; }
.settings-language-option { display:flex; align-items:center; gap:10px; min-height:44px; min-width:0; padding:8px 10px; border:1px solid transparent; border-radius:8px; cursor:pointer; font-size:14px; }
.settings-language-option input { width:18px; height:18px; min-height:18px; flex:0 0 18px; padding:0; margin:0; accent-color:var(--accent-text); }
.settings-language-option:hover { background:var(--card); }
.settings-language-option:has(input:checked) { background:var(--accent-soft-strong); border-color:var(--accent-border); }
.settings-language-option:has(input:focus-visible) { outline:3px solid var(--accent-text); outline-offset:-3px; }
.settings-language-option > span { min-width:0; overflow-wrap:anywhere; }
.settings-language > .note { margin:10px 0 0; font-size:12px; }
@media(max-width:600px) { .settings-language-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .settings-language-picker summary { padding:10px; gap:8px; } }
.switch-control { position: relative; width: 52px; height: 44px; flex: 0 0 52px; }
.switch-control input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.switch-track { position: absolute; left: 4px; top: 9px; width: 44px; height: 26px; border: 1px solid var(--control-border); border-radius: 20px; background: var(--raised); pointer-events: none; }
.switch-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); }
.switch-control input:checked + .switch-track { background: var(--gold); border-color: var(--accent-text); }
.switch-control input:checked + .switch-track::after { transform: translateX(18px); background: var(--gold-ink); }
.switch-control input:focus-visible + .switch-track { outline: 3px solid var(--accent-text); outline-offset: 4px; }
.switch-control input:disabled { cursor: default; }
.switch-control input:disabled + .switch-track { background: var(--disabled-bg); border-color: var(--disabled-line); }
.switch-control input:disabled + .switch-track::after { background: var(--disabled-text); }
.push-kinds .settings-toggle:has(input:disabled) { color: var(--disabled-text); cursor: default; }
.settings-reset-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.quiet-danger { min-height: 44px; min-width: 44px; padding: 8px 10px; background: transparent; border: 0; color: var(--red); font-size: 13px; flex-shrink: 0; }
.quiet-danger:hover { background: var(--error-bg); }
.settings-save { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.about-panel { margin-top: 27px; }
.danger-button { color: var(--red) !important; border-color: var(--red) !important; }
.storage-warning { padding: 14px; background: var(--warning-bg); border: 1px solid var(--warning-line); color: var(--warning-text); border-radius: 9px; font-size: 12px; margin-bottom: 18px; }
.site-footer { padding-top: 24px; margin-top: 24px; color: var(--muted); text-align: center; font-size: 11px; }
.site-footer p { margin: 0; }
.toast { position: fixed; bottom: calc(var(--bottom) + 16px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 15px); opacity: 0; pointer-events: none; z-index: 50; background: var(--toast-bg); color: var(--toast-text); border: 1px solid var(--toast-line); padding: 13px 18px; max-width: calc(100vw - 28px); border-radius: 10px; text-align: center; font-size: 13px; box-shadow: 0 8px 28px var(--shadow); transition: opacity .15s, transform .15s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.social-dialog { width: min(480px, calc(100vw - 24px)); max-height: min(80dvh, calc(100dvh - 32px)); overflow: auto; overscroll-behavior: contain; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--text); box-shadow: 0 16px 60px var(--dialog-shadow); }
.social-dialog::backdrop { background: var(--backdrop); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; gap: 10px; position: sticky; top: 0; background: var(--card); z-index: 2; }
.dialog-header h2 { margin: 0; font-size: 18px; }
.dialog-body { padding: 4px 22px 22px; }
.dialog-body .field { margin-bottom: 18px; }
.dialog-actions { display: grid; gap: 13px; }
.share-recipe-title { font-size: 17px; font-weight: 500; margin-bottom: 12px; overflow-wrap: anywhere; }
.share-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.share-option { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; min-width: 44px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--raised); color: var(--text); padding: 12px; font-size: 13px; text-align: left; }
.share-option > span { min-width: 0; overflow-wrap: anywhere; }
.share-option .icon { width: 21px; height: 21px; color: var(--accent-text); }
.share-option:hover { background: var(--accent-soft-strong); border-color: var(--accent-text); }
.share-option:disabled, .share-option[aria-disabled='true'] { background: var(--disabled-bg); border-color: var(--disabled-line); color: var(--disabled-text); cursor: default; }
.share-option:disabled .icon, .share-option[aria-disabled='true'] .icon { color: var(--disabled-text); }
.share-url-field input { min-width: 0; width: 100%; font-size: 12px; }
.share-status { min-height: 20px; margin: 0 0 14px; font-size: 13px; color: var(--accent-text); overflow-wrap: anywhere; }
.share-local-notice, .share-capability-note { padding: 10px 12px; border: 1px solid var(--line); background: var(--raised); border-radius: 9px; }
.share-panel > .button { width: 100%; }
@media (max-width: 375px) { .share-options { grid-template-columns: minmax(0,1fr); gap: 8px; } .share-option { padding: 10px 12px; } }
.confirmation-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.button.danger-fill { background: var(--red); border-color: var(--red); color: var(--on-danger); }
.button.danger-fill:hover { background: var(--red); border-color: var(--red); filter: brightness(.94); }
.dialog-menu .dialog-header { padding: 10px 12px 4px; }
.dialog-menu .dialog-header h2 { font-size: 15px; }
.dialog-menu .dialog-body { padding: 0 10px 14px; }
.dialog-menu[data-presentation='anchored'] { position: fixed; margin: 0; right: auto; bottom: auto; border-radius: 16px; max-width: calc(100vw - 24px); }
.dialog-menu[data-presentation='anchored']::backdrop { background: transparent; }
.dialog-menu[data-presentation='sheet'] { position: fixed; top: auto; left: 0; right: 0; bottom: 0; margin: 0; width: 100%; max-width: none; max-height: 80dvh; padding-bottom: env(safe-area-inset-bottom); border-radius: 20px 20px 0 0; border-bottom: 0; }
.dialog-menu[data-presentation='sheet']::before { content: ''; display: block; width: 36px; height: 4px; margin: 10px auto 0; border-radius: 10px; background: var(--control-border); }
.menu-context { padding: 6px 10px 12px; }
.menu-context strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.menu-context small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.menu-group + .menu-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.menu-action { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 44px; min-height: 48px; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 15px; font-weight: 400; text-align: left; }
.menu-action .icon { width: 22px; height: 22px; color: var(--muted); }
.menu-action > span { min-width: 0; overflow-wrap: anywhere; }
.menu-action:hover, .menu-action:focus-visible { background: var(--raised); }
.menu-action[aria-pressed='true'] .icon { color: var(--accent-text); }
.menu-action.danger-text, .menu-action.danger-text .icon { color: var(--red); }
.menu-action:disabled, .menu-action:disabled .icon { color: var(--muted); cursor: default; }
.menu-action:disabled:hover { background: transparent; }
.menu-note { color: var(--muted); font-size: 11px; line-height: 1.5; padding: 0 10px; margin: 12px 0 0; }
.comment-list { margin-bottom: 22px; }
.comment-list li { background: var(--raised); padding: 15px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 12px; }
.comment-list strong { display: block; font-size: 11px; color: var(--accent-text); margin-bottom: 7px; }
.comment-list p { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.comment-actions button { min-height: 44px; min-width: 44px; border: 0; border-radius: 8px; padding: 8px 10px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.comment-actions button:hover { background: var(--card); color: var(--text); }
.comment-replies { list-style: none; padding: 0 0 0 12px; margin: 10px 0 0; border-left: 2px solid var(--line); }
.comment-list .comment-is-reply { background: var(--card); margin-bottom: 8px; padding: 12px; }
.comment-item { min-width: 0; scroll-margin: 12px; }
.comment-item > strong { overflow-wrap: anywhere; }
.comment-item.comment-highlight { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.comment-reply-context { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 15px; font-size: 13px; }
.comment-reply-context > span { min-width: 0; overflow-wrap: anywhere; }
.comment-reply-context button { flex-shrink: 0; min-height: 44px; border: 0; border-radius: 8px; color: var(--accent-text); background: transparent; font: inherit; font-size: 13px; padding: 8px; cursor: pointer; }
.settings-panel-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 15px; text-align: left; padding: 4px 0; cursor: pointer; }
.settings-panel-link > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.settings-row-count { background: var(--raised); color: var(--muted); border-radius: 50%; min-width: 28px; height: 28px; display: grid; place-items: center; font-size: 13px; }
.collections-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.collection-card > .icon { width: 34px; height: 34px; flex-shrink: 0; color: var(--accent-text); }
.collection-card > div { min-width: 0; }
.collection-card h2 { overflow-wrap: anywhere; }
.collection-choices { display: grid; gap: 6px; margin: 14px 0 20px; }
.collection-choice { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); padding: 8px 2px; cursor: pointer; }
.collection-choice input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--accent-text); }
.collection-choice span { min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
@media (max-width: 600px) { .collections-grid { grid-template-columns: minmax(0, 1fr); } .comment-list li { padding: 12px; } .comment-list .comment-is-reply { padding: 10px; } }
.noscript { padding: 100px 24px; }
.compact-cards .recipe-grid { gap: 14px; }
.compact-cards .card-head { padding-top: 7px; padding-bottom: 7px; }
.compact-cards .recipe-card .recipe-photo { height: 180px; }
.compact-cards .photo-copy { padding-top: 28px; padding-bottom: 12px; }
.compact-cards .photo-copy p { display: none; }
.compact-cards .rating-row { padding-top: 5px; padding-bottom: 5px; }
.compact-cards .card-cta { padding-bottom: 9px; }
[hidden] { display: none !important; }
@media (min-width: 1100px) {
  .header-search { display: flex; flex: 1; max-width: 310px; min-width: 200px; height: 44px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--control-border); border-radius: 9px; background: var(--card); color: var(--muted); }
  .header-search .icon { width: 19px; height: 19px; }
  .header-search:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 2px var(--accent-text); }
  .header-search input { width: 100%; min-width: 0; height: 42px; padding: 0; background: transparent; border: 0; border-radius: 0; color: var(--text); font-size: 12px; }
  .header-search input:focus-visible { outline: none; }
}
@media (min-width: 901px) {
  .recipe-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-grid { gap: 20px; }
  .detail-overview, .recipe-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
  .detail-overview { align-items: center; margin-bottom: 24px; }
  .detail-overview .detail-intro { margin-bottom: 0; }
  .detail-overview .detail-photo { margin: 0; max-height: 420px; }
  .detail-tools .personal-rating-panel { margin: 0; }
  .detail-quick-actions { display: grid; gap: 12px; align-content: center; }
  .detail-quick-actions .detail-actions, .detail-quick-actions .note, .detail-quick-actions .execution-entry { margin: 0; }
  .detail-quick-actions > .button { justify-self: start; }
  .recipe-content { align-items: start; }
  .steps-list p, .detail-intro .lead { max-width: 70ch; }
  .settings-form { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
  .settings-form > .settings-group:first-child { grid-row: span 2; }
}
@media (min-width: 1360px) { .recipe-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 1800px) { .recipe-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 900px) {
  .top-nav { gap: 8px; padding: 10px 16px; }
  .top-link { min-width: 50px; }
  .top-link span:last-child { font-size: 9px; }
  .card-title { font-size: 23px; }
}
@media (max-width: 600px) {
  :root { --top: 108px; --bottom: 0px; }
  .top-nav { display: grid; grid-template-columns: repeat(5, minmax(44px,1fr)); grid-template-rows: 44px 48px; padding: 4px 8px; gap: 0; align-content: center; }
  .brand { font-size: 24px; min-width: 72px; grid-column: 1 / -1; justify-self: center; }
  .top-link { min-width: 44px; min-height: 48px; }
  .top-link .icon { width: 23px; height: 23px; }
  .top-link span:last-child { display: none; }
  .main { padding-left: 12px; padding-right: 12px; padding-top: calc(var(--top) + 13px + env(safe-area-inset-top)); }
  h1 { font-size: 25px; }
  .local-strip { gap: 8px; padding-bottom: 10px; margin-bottom: 12px; }
  .demo-notice { font-size: 9px; }
  .demo-notice strong { display: block; font-size: 10px; }
  .cart-link { font-size: 10px; padding: 6px 8px; }
  .cart-link .icon { width: 18px; height: 18px; }
  .feed-tabs, .tabs { gap: 21px; margin-bottom: 15px; }
  .feed-tabs a, .tabs a { font-size: 12px; }
  .category-shortcuts { gap: 7px; margin-bottom: 10px; }
  .category-shortcuts a { gap: 6px; padding: 8px 10px; font-size: 11px; }
  .card-head { padding: 10px 11px; }
  .creator { gap: 8px; }
  .creator-name { font-size: 12px; }
  .avatar { width: 33px; height: 33px; font-size: 10px; }
  .friend-button { font-size: 11px; padding: 7px 8px; }
  .creator-controls { gap: 0; }
  .recipe-card .recipe-photo { height: 210px; }
  .photo-copy { padding: 38px 14px 13px; }
  .card-title { font-size: 22px; }
  .photo-copy p { font-size: 11px; }
  .rating-row { padding: 7px 13px; font-size: 10px; }
  .stars .icon { width: 13px; height: 13px; }
  .card-actions { padding: 4px 6px; }
  .social-button { min-height: 60px; }
  .action-label { font-size: 11px; }
  .action-symbol b { font-size: 10px; }
  .card-cta { padding: 3px 12px 12px; }
  .card-cta .button { min-height: 44px; font-size: 12px; }
  .lead { font-size: 14px; }
  .note { font-size: 12px; }
  .detail-intro .creator-row { margin: 15px 0; }
  .ingredients-box { padding: 17px; }
  .metadata { gap: 18px; font-size: 12px; }
  .profile-panel { padding: 18px 14px; gap: 13px; }
  .profile-panel .avatar { width: 48px; height: 48px; font-size: 17px; }
  .profile-panel h2 { font-size: 21px; }
  .profile-panel p { font-size: 10px; }
  .profile-stats { gap: 8px; }
  .profile-stat { padding: 15px 7px; }
  .profile-stat strong { font-size: 25px; }
  .profile-stat span { font-size: 10px; }
  .profile-links .button { font-size: 11px; }
  .field label, .course-options legend { font-size: 13px; }
  .field-pair { gap: 12px; }
  .photo-choice-grid { gap: 7px; }
  .photo-choice span:last-child { font-size: 8px; }
  .form-actions .button { font-size: 11px; padding: 10px; }
  .collection-card { gap: 13px; padding: 15px; }
  .collection-card .recipe-photo { width: 75px; }
  .collection-card h2 { font-size: 17px; }
  .collection-card p { font-size: 11px; }
  .settings-panel { padding: 19px 15px; }
  .settings-panel h2 { font-size: 17px; }
  .settings-toggle { gap: 13px; }
  .settings-toggle strong { font-size: 13px; }
  .settings-toggle small { font-size: 11px; }
  .settings-save { width: 100%; }
  .dialog-header { padding: 14px 16px; }
  .dialog-body { padding: 18px; }
}
@media (min-width: 376px) and (max-width: 600px) {
  :root { --top: 68px; }
  .top-nav { display: flex; padding: 8px; gap: 4px; }
  .brand { width: 72px; min-width: 72px; flex-shrink: 0; }
  .top-link { width: 44px; min-width: 44px; flex: 0 0 44px; }
}
@media (max-width: 375px) {
  .card-head { padding-left: 9px; padding-right: 9px; }
  .creator { gap: 6px; }
  .creator-name { font-size: 11px; }
  .friend-button { padding: 7px 6px; font-size: 10px; }
  .action-label { font-size: 10px; }
  .card-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.editor-preview { height: 240px; max-height: none; aspect-ratio: auto; }
.editor-preview.frame-wide, .recipe-card[data-photo-frame='wide'] .recipe-photo { height: 210px; }
.editor-preview.frame-taller, .recipe-card[data-photo-frame='taller'] .recipe-photo { height: 270px; }
@media (max-width: 600px) {
  .editor-preview { height: 210px; }
  .editor-preview.frame-wide, .recipe-card[data-photo-frame='wide'] .recipe-photo { height: 180px; }
  .editor-preview.frame-taller, .recipe-card[data-photo-frame='taller'] .recipe-photo { height: 240px; }
}
.compact-cards .recipe-card[data-photo-frame='wide'] .recipe-photo { height: 155px; }
.compact-cards .recipe-card[data-photo-frame='taller'] .recipe-photo { height: 200px; }

/* Social Home: personal tools, a varied central stream, and discovery. */
.feed-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.feed-stream { min-width: 0; container-type: inline-size; }
.feed-stream .home-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; grid-auto-flow: row; }
.feed-rail { display: none; min-width: 0; }
.mobile-feed-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.mobile-feed-actions .button { padding: 10px; font-size: 12px; min-height: 46px; }
.mobile-feed-actions .icon { width: 18px; height: 18px; }
.mobile-feed-actions .button > span { font-size: 24px; line-height: 1; }
.settings-profile-entry { margin-bottom: 22px; }
.rail-new-recipe { width: 100%; min-height: 48px; margin-bottom: 16px; }
.rail-new-recipe > span { font-size: 25px; font-weight: 400; line-height: 1; }
.rail-panel { padding: 8px 4px 0; border: 0; border-radius: 0; background: transparent; margin-bottom: 22px; }
.rail-panel + .rail-panel { border-top: 1px solid var(--line); padding-top: 20px; }
.rail-panel:last-child { margin-bottom: 0; }
.rail-panel h2 { font-size: 15px; margin-bottom: 16px; overflow-wrap: anywhere; }
.rail-profile { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; min-height: 44px; }
.rail-profile > span:last-child, .suggested-identity { min-width: 0; }
.rail-profile strong, .suggested-identity strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.rail-profile small, .suggested-identity small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.rail-links { display: grid; gap: 4px; }
.rail-links a { display: flex; align-items: center; gap: 9px; padding: 9px 4px; min-height: 44px; border-radius: 8px; font-size: 12px; }
.rail-links .icon { width: 19px; height: 19px; color: var(--accent-text); }
.rail-links a > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rail-count { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; min-height: 25px; padding: 2px 5px; border-radius: 6px; background: var(--raised); font-size: 10px; }
.rail-text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-size: 12px; margin-top: 8px; }
.rail-caption { font-size: 10px; color: var(--muted); margin-top: -9px; margin-bottom: 16px; }
.suggested-users { display: grid; gap: 6px; }
.suggested-user { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; min-height: 48px; }
.rail-profile > a { flex: 1; min-width: 0; min-height: 44px; }
.suggested-identity.user-name-link { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; line-height: 1.4; text-decoration: none; }
.suggested-identity.user-name-link:hover strong { text-decoration: underline; }
.suggested-user .avatar { width: 36px; height: 36px; font-size: 11px; }
/* Keep the full click target while drawing a smaller follow control. */
.suggested-user .friend-button { position: relative; grid-column: 3; justify-self: end; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.suggested-user .friend-button::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--line); border-radius: 50%; pointer-events: none; }
.suggested-user .friend-button:hover::before { border-color: var(--accent-border); background: var(--accent-soft); }
.suggested-user .friend-button[aria-pressed='true']::before { border-color: var(--accent-border); background: var(--accent-soft-strong); }
.suggested-user .follow-add-symbol { position: relative; font-size: 20px; line-height: 1; font-weight: 400; }
.suggested-user .friend-button .icon { position: relative; width: 16px; height: 16px; }
.rail-empty { font-size: 12px; color: var(--muted); margin-bottom: 0; overflow-wrap: anywhere; }
.online-contacts-list { display: grid; gap: 4px; }
.online-contact { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 10px; align-items: center; min-height: 48px; padding: 4px; border-radius: 8px; text-decoration: none; }
.online-contact:hover { background: var(--raised); }
.online-contact-avatar { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--raised); color: var(--text); font-size: 11px; font-weight: 700; }
.online-contact-dot { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--success); border: 2px solid var(--bg); }
.online-contact-identity { min-width: 0; }
.online-contact strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.online-contact small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.online-contact > .icon { width: 18px; height: 18px; color: var(--muted); }
.online-contacts-action { padding: 0; border: 0; background: transparent; text-align: start; }
.inspiration-list { display: grid; gap: 14px; }
.inspiration-item { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 62px; border-radius: 8px; }
.inspiration-item .inspiration-photo { width: 62px; height: 62px; border-radius: 8px; background: var(--raised); }
.inspiration-item strong { display: block; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.inspiration-item small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.rail-profile:hover, .rail-links a:hover, .inspiration-item:hover { background: var(--raised); }
@media (min-width: 900px) {
  .mobile-feed-actions { display: none; }
  .feed-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .personal-rail { display: block; }
  .feed-rail { position: sticky; top: calc(var(--top) + 16px + env(safe-area-inset-top)); max-height: calc(100dvh - var(--top) - var(--bottom) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; padding: 3px; margin: -3px; }
}
@media (min-width: 1200px) {
  .feed-layout { grid-template-columns: 220px minmax(0, 1fr) 260px; }
  .discovery-rail { display: block; }
}
@container (min-width: 820px) {
  .compact-cards .feed-stream .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 8px; row-gap: 0; column-gap: 20px; }
  .feed-stream .recipe-card { align-self: start; }
  .feed-stream .recipe-card .recipe-photo { height: 310px; }
  .feed-stream .recipe-card[data-photo-frame='wide'] .recipe-photo { height: 240px; }
  .feed-stream .recipe-card[data-photo-frame='taller'] .recipe-photo { height: 390px; }
  .compact-cards .feed-stream .recipe-card .recipe-photo { height: 210px; }
  .compact-cards .feed-stream .recipe-card[data-photo-frame='wide'] .recipe-photo { height: 170px; }
  .compact-cards .feed-stream .recipe-card[data-photo-frame='taller'] .recipe-photo { height: 270px; }
}

/* Personal discovery and community follow the existing social-panel system. */
.filter-group { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.filter-group legend { font-weight: 700; margin-bottom: 10px; }
.filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-choice { position: relative; display: inline-flex; }
.filter-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px; border: 1px solid var(--control-border); border-radius: 22px; background: var(--card); color: var(--muted); cursor: pointer; }
.filter-choice input:checked + span { background: var(--accent-soft-strong); border-color: var(--accent-text); color: var(--accent-text); }
.filter-choice input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.feed-filter-toolbar, .active-filter-chips, .pdf-actions, .push-choice-actions, .search-result-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.feed-filter-toolbar .back-link { border: 0; background: transparent; margin: 0; padding: 10px; min-height: 44px; }
.filter-chip { display: inline-flex; gap: 8px; align-items: center; max-width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--accent-border); color: var(--accent-text); background: var(--accent-soft-strong); border-radius: 22px; overflow-wrap: anywhere; }
.filter-chip .icon { width: 16px; height: 16px; }
.editor-filter-metadata { padding: 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 20px; }
.editor-filter-metadata summary { min-height: 44px; cursor: pointer; font-weight: 700; }
.ingredient-list .ingredient-section-heading { display: block; padding: 18px 0 6px; border-bottom: 0; }
.ingredient-section-heading h3 { margin: 0; font-size: 16px; color: var(--accent-text); }
.recipe-sort-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 0; margin: 12px 0; }
.recipe-sort-toolbar select { min-height: 44px; max-width: 100%; background: var(--card); color: var(--text); border: 1px solid var(--control-border); padding: 10px 36px 10px 12px; }
.pinned-section { margin-top: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pinned-section h2 { display: flex; align-items: center; gap: 10px; }
.pdf-actions .note { flex-basis: 100%; margin: 0; }
.search-users-section { margin-bottom: 28px; }
.search-user-list .connection-identity .user-average, .search-user-list .connection-identity .user-followers { display: inline-flex; margin-right: 10px; }
.search-result-tabs [aria-pressed='true'] { background: var(--accent-soft-strong); border-color: var(--accent-text); color: var(--accent-text); }
.push-choice-actions { padding-top: 16px; }
.push-kinds .settings-toggle { min-height: 60px; }
.community-section { margin-top: 36px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.community-heading { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.community-heading h2 { margin-bottom: 6px; }
.community-heading p { margin-bottom: 0; }
.community-preview-link { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; width: 100%; min-height: 52px; padding: 12px; background: var(--raised); border: 1px solid var(--line); text-align: left; }
.community-preview-link > span:last-child { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.community-thumbnails { display: flex; gap: 6px; }
.community-thumbnails img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.community-section > .note { margin: 12px 0 0; }
.community-list { display: grid; gap: 18px; margin-bottom: 20px; }
.community-entry { padding-bottom: 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.community-person { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; align-items: center; margin-bottom: 12px; }
.community-person small { display: block; color: var(--muted); font-size: 12px; }
.community-person .user-name-link { overflow-wrap: anywhere; }
.community-photo-button { border: 0; padding: 0; background: transparent; display: block; width: 100%; border-radius: 12px; overflow: hidden; }
.community-photo-button img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.community-entry > p { margin: 12px 0 0; overflow-wrap: anywhere; }
.community-upload-preview img { display: block; max-width: 100%; max-height: 260px; object-fit: contain; border-radius: 12px; margin-bottom: 16px; }
.community-image-full { display: block; max-width: 100%; width: 100%; max-height: 65dvh; object-fit: contain; }
.cook-community-add { margin-bottom: 24px; }
@media (max-width: 600px) {
  .community-section { padding: 16px; }
  .community-thumbnails img { width: 48px; height: 48px; }
  .recipe-sort-toolbar { align-items: stretch; flex-direction: column; }
  .feed-tabs { gap: 16px; }
  .search-result-tabs { gap: 6px; }
  .search-result-tabs .button { padding: 10px; font-size: 12px; }
}

/* Recipe reading stays primary; rating and exports appear on request. */
.detail-tools { margin: 18px 0 28px; }
.detail-minor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.detail-minor-action { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 44px; padding: 7px 4px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; text-align: left; }
.detail-minor-action .icon { width: 19px; height: 19px; flex-shrink: 0; }
.detail-minor-action:hover { color: var(--accent-text); background: var(--accent-soft); }
.detail-minor-action strong { color: var(--accent-text); font-size: 13px; }
.recipe-export-options .note:empty { display: none; }
.recipe-export-options .note { display: block; margin: 8px 0; }
#social-dialog[data-purpose='rating'] .personal-rating-panel { padding: 0; border: 0; margin: 4px 0; background: transparent; }
.cook-completion-rating { max-width: 540px; border-top: 1px solid var(--line); padding-top: 16px; margin: 18px 0; }
.cook-completion-rating .cook-rating-title { margin: 0 0 14px; font-size: 22px; color: var(--accent-text); }
.cook-step-panel[data-testid='cook-complete'] .cook-completion-rating .personal-rating-panel { margin: 14px 0 20px; }
.cook-completion-rating .rating-choice > span { font-size: 16px; font-weight: 600; }
.cook-community-add { margin-top: 2px; }


/* Approved visual improvements: clear reading order and local panel actions. */
.editor-photo-area .editor-preview.photo-empty { height: 180px; aspect-ratio: auto; }
.editor-photo-advanced { padding-top: 6px; border-top: 1px solid var(--line); }
.editor-photo-advanced .frame-options { margin: 8px 0 20px; }
.editor-photo-advanced summary { color: var(--text); }
.recipe-sort-note { margin: -4px 0 22px; }
.feed-stream .creator-name [data-user-average][data-count='0'] { display: none; }

#avatar-dialog[data-purpose='community-photo'][open] {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  width: min(1100px, calc(100vw - 24px));
  height: min(860px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px);
  overflow: hidden;
}
#avatar-dialog[data-purpose='community-photo'] .dialog-header { position: static; }
#avatar-dialog[data-purpose='community-photo'] .dialog-header h2 { min-width: 0; overflow-wrap: anywhere; }
#avatar-dialog[data-purpose='community-photo'] .dialog-header .icon-button { flex-shrink: 0; }
#avatar-dialog[data-purpose='community-photo'] .dialog-body {
  display: grid; place-items: center; min-height: 0; min-width: 0; padding: 8px 18px 18px; overflow: hidden;
}
#avatar-dialog[data-purpose='community-photo'] .community-image-full {
  width: 100%; height: 100%; min-height: 0; min-width: 0; max-height: 100%; object-fit: contain;
}

#social-dialog:is([data-purpose='feed-filters'], [data-purpose='cook-servings'])[open] {
  display: flex; flex-direction: column; max-height: min(84dvh, calc(100dvh - 24px)); overflow: hidden;
}
#social-dialog:is([data-purpose='feed-filters'], [data-purpose='cook-servings']) > .dialog-header {
  position: static; flex-shrink: 0;
}
#social-dialog:is([data-purpose='feed-filters'], [data-purpose='cook-servings']) > .dialog-body {
  display: flex; flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden;
}
.dialog-layout-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; }
.dialog-scroll-area { flex: 1 1 auto; min-height: 0; padding: 4px 22px 20px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 12px; }
.dialog-layout-form > .dialog-actions {
  flex-shrink: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card);
}
.dialog-layout-form > .dialog-actions > .button { min-width: 0; min-height: 44px; padding: 10px 8px; }
.dialog-layout-form > .dialog-actions > .button:first-child,
[data-form='cook-servings'] > .dialog-actions > .button { grid-column: 1 / -1; }

.community-preview-link { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 12px; }
.community-preview-link .community-thumbnails { display: block; width: 48px; height: 48px; min-width: 0; }
.community-preview-link .community-thumbnails img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.community-preview-link .community-thumbnails:empty { display: none; }
.community-preview-link:has(.community-thumbnails:empty) { grid-template-columns: minmax(0, 1fr) 20px; }
.community-preview-link .community-preview-text { display: block; min-width: 0; overflow-wrap: anywhere; }
.community-preview-link > .icon { justify-self: end; width: 20px; height: 20px; }
@media (max-width: 600px) {
  .editor-photo-area .editor-preview.photo-empty { height: 150px; }
  .dialog-scroll-area { padding: 4px 18px 20px; }
  .dialog-layout-form > .dialog-actions { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .dialog-layout-form > .dialog-actions > .button { font-size: 12px; }
}
@media (max-width: 375px) {
  #social-dialog[data-purpose='feed-filters'] .field-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Existing approved light direction 03. */
:root[data-theme='light'] .top-nav { gap: 20px; padding-inline: 32px; }
:root[data-theme='light'] .top-link { border-radius: 28px; padding-inline: 12px; }
:root[data-theme='light'] .header-search { display: flex; align-items: center; gap: 9px; width: 300px; min-width: 0; height: 44px; padding: 0 14px; background: var(--card); border: 1px solid var(--control-border); border-radius: 24px; flex-shrink: 1; color: var(--muted); }
:root[data-theme='light'] .header-search .icon { width: 19px; height: 19px; }
:root[data-theme='light'] .header-search input { width: 100%; min-width: 0; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 12px; }
:root[data-theme='light'] .header-search:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 2px var(--accent-text); }
:root[data-theme='light'] .header-search input:focus-visible { outline: none; }
:root[data-theme='light'] .main { padding-inline: 32px; }
:root[data-theme='light'] :is(.page-cooking, .page-filtered) { padding-inline: 24px; }
:root[data-theme='light'] .button { border-radius: 12px; }
:root[data-theme='light'] :is(.friend-button, .filter-choice span, .filter-chip) { border-radius: 24px; }
:root[data-theme='light'] :is(.settings-panel, .profile-header, .stat, .collection-card, .community-section, .cook-complete, .cook-step-card, .personal-rating-panel, .empty-state) { border-radius: 20px; }
:root[data-theme='light'] .social-dialog { border-radius: 20px; }
:root[data-theme='light'] :is(input, textarea, select) { border-radius: 12px; }
:root[data-theme='light'] .sample-message { background: var(--card); }
:root[data-theme='light'] :is(.messenger-thread, .chat-status) { border-radius: 18px; }
:root[data-theme='light'] .own-message { color: var(--text); }
:root[data-theme='light'] .stars, :root[data-theme='light'] .rating-star-fill { color: var(--warning-text); }
:root[data-theme='light'] .notification-symbol[data-kind='rating'] { color: var(--warning-text); }

:root[data-theme='light'] .light-feed-title { font-size: 25px; line-height: 1.3; font-weight: 650; letter-spacing: -.6px; margin: 0 0 20px; }
:root[data-theme='light'] .feed-tabs { width: fit-content; max-width: 100%; gap: 4px; padding: 4px; margin-bottom: 16px; border: 0; border-radius: 28px; background: var(--raised); }
:root[data-theme='light'] .feed-tabs a { border: 0; border-radius: 24px; padding: 8px 22px; }
:root[data-theme='light'] .feed-tabs a[aria-current='page'] { background: var(--card); color: var(--accent-text); box-shadow: 0 1px 5px var(--shadow); }
:root[data-theme='light'] .category-shortcuts { gap: 8px; margin-bottom: 18px; }
:root[data-theme='light'] .category-shortcuts a { border: 0; border-radius: 0; background: transparent; padding-inline: 12px; }
:root[data-theme='light'] .category-shortcuts a[aria-current='page'] { border-bottom: 2px solid var(--accent-text); background: transparent; }
:root[data-theme='light'] .rail-new-recipe { border-radius: 28px; }
:root[data-theme='light'] .rail-links a { border-radius: 12px; }
:root[data-theme='light'] .inspiration-item .inspiration-photo { border-radius: 14px; }
:root[data-theme='light'] .feed-stream .recipe-card { width: 100%; padding: 4px 18px 14px; border: 0; border-radius: 24px; box-shadow: none; }
:root[data-theme='light'] .feed-stream .card-head { padding: 10px 0 6px; }
:root[data-theme='light'] .feed-stream .photo-link { display: flex; flex-direction: column; overflow: visible; }
:root[data-theme='light'] .feed-stream .photo-copy { position: static; order: -1; padding: 8px 3px 14px; background: transparent; }
:root[data-theme='light'] .feed-stream .card-title { color: var(--text); font-size: 22px; line-height: 1.25; max-height: 2.5em; letter-spacing: -.5px; }
:root[data-theme='light'] .feed-stream .photo-copy p { color: var(--muted); font-size: 13px; margin-top: 7px; }
:root[data-theme='light'] .feed-stream .recipe-card .recipe-photo { height: 300px; border-radius: 16px; }
:root[data-theme='light'] .feed-stream .recipe-card[data-photo-frame='wide'] .recipe-photo { height: 246px; }
:root[data-theme='light'] .feed-stream .recipe-card[data-photo-frame='taller'] .recipe-photo { height: 350px; }
:root[data-theme='light'] .feed-stream .card-visibility { top: auto; bottom: 12px; right: 12px; }
:root[data-theme='light'] .feed-stream .recipe-visibility { border-radius: 20px; }
:root[data-theme='light'] .feed-stream .rating-row { padding: 13px 4px 11px; }
:root[data-theme='light'] .feed-stream .card-actions { padding: 4px 0; margin-inline: 2px; }
:root[data-theme='light'] .feed-stream .social-button { min-height: 50px; flex-direction: row; gap: 7px; }
:root[data-theme='light'] .feed-stream .action-label { font-size: 11px; }
:root[data-theme='light'] .feed-stream .social-button .icon { width: 21px; height: 21px; }
:root[data-theme='light'] .feed-stream .card-cta { padding: 8px 2px 0; }
:root[data-theme='light'] .feed-stream .card-cta .button { border-radius: 24px; }
:root[data-theme='light'] .feed-stream .ad-image { border-radius: 16px; height: 300px; }
:root[data-theme='light'] .feed-stream .ad-copy { padding-inline: 3px; }
:root[data-theme='light'] .compact-cards .feed-stream .recipe-card .recipe-photo { height: 210px; }
:root[data-theme='light'] .compact-cards .feed-stream .recipe-card[data-photo-frame='wide'] .recipe-photo { height: 170px; }
:root[data-theme='light'] .compact-cards .feed-stream .recipe-card[data-photo-frame='taller'] .recipe-photo { height: 270px; }
@media (min-width: 1200px) {
  :root[data-theme='light'] .feed-layout { grid-template-columns: 208px minmax(0, 1fr) 272px; }
}
@media (max-width: 1199px) {
  :root[data-theme='light'] .top-nav { gap: 12px; padding-inline: 24px; }
  :root[data-theme='light'] .main { padding-inline: 24px; }
}
@media (max-width: 899px) {
  :root[data-theme='light'] .header-search { width: 225px; }
  :root[data-theme='light'] .top-link { padding-inline: 5px; }
  :root[data-theme='light'] .mobile-feed-actions { margin-bottom: 16px; }
}
@media (max-width: 600px) {
  :root[data-theme='light'] { --top: 108px; }
  :root[data-theme='light'] .top-nav { display: flex; flex-wrap: wrap; align-content: start; gap: 4px 0; padding: 8px 12px; }
  :root[data-theme='light'] .brand { grid-column: auto; min-width: 82px; height: 36px; min-height: 36px; font-size: 27px; justify-self: auto; }
  :root[data-theme='light'] .header-search { flex: 1 1 calc(100% - 94px); width: auto; height: 36px; margin-left: 10px; padding-inline: 10px; }
  :root[data-theme='light'] .header-search input { height: 34px; font-size: 10px; }
  :root[data-theme='light'] .header-search .icon { width: 16px; height: 16px; }
  :root[data-theme='light'] .top-link { flex: 0 0 20%; min-width: 0; min-height: 44px; height: 44px; gap: 3px; padding: 4px; }
  :root[data-theme='light'] .top-link .icon { width: 20px; height: 20px; }
  :root[data-theme='light'] .top-link span:last-child { display: block; font-size: 9px; }
  :root[data-theme='light'] .notification-badge { right: calc(50% - 19px); top: -1px; }
  :root[data-theme='light'] .main { padding-inline: 12px; }
  :root[data-theme='light'] .light-feed-title { font-size: 21px; margin-bottom: 12px; }
  :root[data-theme='light'] .mobile-feed-actions { margin-bottom: 10px; }
  :root[data-theme='light'] .feed-tabs { width: 100%; gap: 2px; margin-bottom: 8px; padding: 3px; }
  :root[data-theme='light'] .feed-tabs a { flex: 1; padding-inline: 8px; font-size: 12px; white-space: nowrap; }
  :root[data-theme='light'] .category-shortcuts { margin-bottom: 14px; }
  :root[data-theme='light'] .category-shortcuts a { padding-inline: 10px; font-size: 11px; }
  :root[data-theme='light'] .category-shortcuts .icon { width: 17px; height: 17px; }
  :root[data-theme='light'] .feed-stream .home-grid { gap: 22px; }
  :root[data-theme='light'] .feed-stream .recipe-card { padding: 3px 12px 12px; border-radius: 18px; }
  :root[data-theme='light'] .feed-stream .card-head { padding: 7px 0 4px; }
  :root[data-theme='light'] .feed-stream .creator { gap: 7px; }
  :root[data-theme='light'] .feed-stream .creator-name { font-size: 12px; }
  :root[data-theme='light'] .feed-stream .creator-name > .user-name-link { min-height: 44px; }
  :root[data-theme='light'] .feed-stream .friend-button { padding-inline: 8px; font-size: 10px; }
  :root[data-theme='light'] .feed-stream .friend-button .icon { display: none; }
  :root[data-theme='light'] .feed-stream .photo-copy { padding: 4px 2px 11px; }
  :root[data-theme='light'] .feed-stream .card-title { font-size: 20px; }
  :root[data-theme='light'] .feed-stream .photo-copy p { display: none; }
  :root[data-theme='light'] .feed-stream .recipe-card .recipe-photo { height: 180px; border-radius: 13px; }
  :root[data-theme='light'] .feed-stream .recipe-card[data-photo-frame='wide'] .recipe-photo { height: 165px; }
  :root[data-theme='light'] .feed-stream .recipe-card[data-photo-frame='taller'] .recipe-photo { height: 218px; }
  :root[data-theme='light'] .feed-stream .card-visibility { bottom: 9px; right: 9px; }
  :root[data-theme='light'] .feed-stream .rating-row { padding: 11px 2px 8px; font-size: 10px; gap: 6px; }
  :root[data-theme='light'] .feed-stream .card-actions { margin: 0; padding: 4px 0; }
  :root[data-theme='light'] .feed-stream .social-button { min-height: 54px; flex-direction: column; gap: 4px; }
  :root[data-theme='light'] .feed-stream .card-cta { padding: 5px 0 0; }
  :root[data-theme='light'] .feed-stream .ad-image { height: 190px; }
  :root[data-theme='light'] .compact-cards .feed-stream .recipe-card .recipe-photo { height: 140px; }
  :root[data-theme='light'] .compact-cards .feed-stream .recipe-card[data-photo-frame='wide'] .recipe-photo { height: 125px; }
  :root[data-theme='light'] .compact-cards .feed-stream .recipe-card[data-photo-frame='taller'] .recipe-photo { height: 170px; }
}
@media (max-width: 359px) {
  :root[data-theme='light'] .brand { font-size: 25px; min-width: 76px; }
  :root[data-theme='light'] .header-search { flex-basis: calc(100% - 86px); }
  :root[data-theme='light'] .header-search input { font-size: 9px; }
  :root[data-theme='light'] .feed-stream .creator-name { font-size: 11px; }
  :root[data-theme='light'] .feed-stream .creator { gap: 3px; }
  :root[data-theme='light'] .feed-stream .friend-button { padding-inline: 6px; font-size: 9px; }
  :root[data-theme='light'] .feed-stream .action-label { font-size: 10px; }
  :root[data-theme='light'] .feed-stream .card-title { font-size: 19px; }
}

/* Keep the visibility chip inside the photo after moving its title above it. */
:root[data-theme='light'] .feed-stream .recipe-card { --sage-photo-height: 300px; }
:root[data-theme='light'] .feed-stream .recipe-card[data-photo-frame='wide'] { --sage-photo-height: 246px; }
:root[data-theme='light'] .feed-stream .recipe-card[data-photo-frame='taller'] { --sage-photo-height: 350px; }
:root[data-theme='light'] .compact-cards .feed-stream .recipe-card { --sage-photo-height: 210px; }
:root[data-theme='light'] .compact-cards .feed-stream .recipe-card[data-photo-frame='wide'] { --sage-photo-height: 170px; }
:root[data-theme='light'] .compact-cards .feed-stream .recipe-card[data-photo-frame='taller'] { --sage-photo-height: 270px; }
:root[data-theme='light'] .feed-stream .card-visibility { bottom: calc(var(--sage-photo-height) - 38px); }
@media (max-width: 600px) {
  :root[data-theme='light'] .feed-stream .recipe-card { --sage-photo-height: 180px; }
  :root[data-theme='light'] .feed-stream .recipe-card[data-photo-frame='wide'] { --sage-photo-height: 165px; }
  :root[data-theme='light'] .feed-stream .recipe-card[data-photo-frame='taller'] { --sage-photo-height: 218px; }
  :root[data-theme='light'] .compact-cards .feed-stream .recipe-card { --sage-photo-height: 140px; }
  :root[data-theme='light'] .compact-cards .feed-stream .recipe-card[data-photo-frame='wide'] { --sage-photo-height: 125px; }
  :root[data-theme='light'] .compact-cards .feed-stream .recipe-card[data-photo-frame='taller'] { --sage-photo-height: 170px; }
}

/* Card actions keep keyboard focus and show saved state without a filled tile. */
body[data-input-mode='pointer'] .social-button:focus { outline: none; box-shadow: none; }
body[data-input-mode='keyboard'] .social-button:focus { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.social-button.save-button { flex-wrap: wrap; }
.social-button.save-button .action-label { overflow-wrap: anywhere; }
.social-button.save-button[aria-pressed='true'] { color: var(--success); background: transparent; }
.social-button.save-button[aria-pressed='true']:hover { background: var(--raised); }
.social-button.save-button[aria-pressed='true'] .action-label { font-weight: 500; }
.social-button .save-confirm-icon { border-radius: 50%; padding: 3px; background: var(--accent-soft); }

@media (max-width: 360px) {
  .card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Natural photo geometry and shared tag discovery, following the approved existing themes. */
.feed-stream .home-grid { --card-gutter: 20px; }
@container (min-width: 1120px) {
  .compact-cards .feed-stream .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 8px; row-gap: 0; column-gap: 20px; }
}
.natural-card { container-type: inline-size; }
:root[data-theme='light'] .feed-stream .recipe-card.natural-card { padding: 8px 8px 14px; }
:root .recipe-grid .recipe-card.natural-card .photo-link { display: flex; flex-direction: column; overflow: visible; }
:root .recipe-grid .recipe-card.natural-card .card-media { position: relative; }
:root .recipe-grid .recipe-card.natural-card .photo-copy { position: static; order: 0; padding: 13px 16px 4px; background: transparent; }
:root .recipe-grid .recipe-card.natural-card .card-title { color: var(--text); font-size: 22px; line-height: 1.25; max-height: 2.5em; }
:root .recipe-grid .recipe-card.natural-card .photo-copy p { color: var(--muted); }
:root .recipe-grid .recipe-card.natural-card .recipe-photo,
:root .compact-cards .recipe-grid .recipe-card.natural-card .recipe-photo,
:root .editor-preview { width: 100%; height: auto; aspect-ratio: var(--photo-ratio, 4 / 3); min-height: 96px; max-height: min(680px, 75dvh); }
:root .recipe-grid .recipe-card.natural-card .recipe-photo > img,
:root .editor-preview > img { width: 100%; height: 100%; object-fit: contain; }
:root .recipe-grid .recipe-card.natural-card .card-visibility { top: 12px; right: 12px; bottom: auto; }
:root .recipe-grid .recipe-card.natural-card .social-button { min-height: 44px; flex-direction: column; gap: 5px; }
:root .recipe-grid .recipe-card.natural-card .action-label { font-size: 11px; }
@container (max-width: 339px) {
  :root .recipe-grid .recipe-card.natural-card .card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .recipe-grid .recipe-card.natural-card .friend-button .icon { display: none; }
  :root .recipe-grid .recipe-card.natural-card .card-title { font-size: 20px; }
  :root .recipe-grid .recipe-card.natural-card .card-head { padding-inline: 10px; }
}
@container (min-width: 340px) {
  :root .recipe-grid .recipe-card.natural-card .card-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 520px) {
  :root .recipe-grid .recipe-card.natural-card .social-button { flex-direction: row; }
}
/* The same ordered mosaic is used by feed, search, profile and library grids. */
:root .main .recipe-grid.mosaic-grid {
  --card-gutter: 20px;
  grid-template-columns: repeat(var(--mosaic-columns, 1), minmax(0, 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: row;
  row-gap: 0;
  column-gap: 20px;
  align-items: start;
}
:root .compact-cards .main .recipe-grid.mosaic-grid { --card-gutter: 14px; column-gap: 14px; }
:root .main .recipe-grid.mosaic-grid[data-mosaic-columns='1'] { grid-auto-rows: auto; row-gap: var(--card-gutter); }
:root .main .recipe-grid .recipe-card.natural-card .recipe-photo { min-height: 0; max-height: none; }
:root .main .recipe-grid .recipe-card.natural-card .photo-copy p,
:root .recipe-detail .detail-intro > .lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  white-space: normal;
  line-height: 1.45;
  max-height: 4.35em;
  overflow-wrap: anywhere;
}
.editor-tags { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 28px; }
.editor-tags h2 small { color: var(--muted); font-size: 14px; font-weight: 400; }
.smart-tag-picker { min-width: 0; }
.smart-tag-picker h3 { margin: 16px 0 10px; font-size: 16px; }
.smart-tag-picker .cuisine-field { max-width: 360px; }
.tag-choices, .suggested-tags, .selected-tags, .derived-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.selected-tags > .note, .derived-tags > .note { flex-basis: 100%; margin-bottom: 0; }
.tag-suggestion, .tag-selected, .tag-choice { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); color: var(--text); font-size: 12px; }
.tag-choice { cursor: pointer; }
.tag-choice input { accent-color: var(--accent-text); width: 16px; height: 16px; flex-shrink: 0; }
.tag-choice:has(input:checked), .tag-suggestion[aria-pressed='true'], .tag-selected { border-color: var(--accent-text); background: var(--accent-soft); color: var(--accent-text); }
.tag-selected .icon, .tag-suggestion .icon { width: 16px; height: 16px; flex-shrink: 0; }
.tag-suggestion:hover, .tag-selected:hover { background: var(--raised); }
.tag-derived { padding: 5px 9px; border-radius: 8px; color: var(--muted); background: var(--raised); font-size: 12px; }
.all-tags, .tag-category { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; margin-top: 10px; }
.all-tags > summary, .tag-category > summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-weight: 700; }
.all-tags > .field { margin-top: 10px; }
.tag-choice[hidden], .tag-category[hidden] { display: none; }
.tag-choice:focus-within { outline: 3px solid var(--accent-text); outline-offset: 2px; }
@media (max-width: 600px) {
  .tag-suggestion, .tag-selected, .tag-choice { padding-inline: 10px; }
  .all-tags, .tag-category { padding-inline: 9px; }
}
/* Retained legacy IDs remain readable within narrow tag and filter chips. */
.tag-selected, .filter-chip { max-width: 100%; min-width: 0; }
.tag-label { min-width: 0; overflow-wrap: anywhere; }

/* One shared query field; the separate navigation search entry is removed. */
:root .top-nav .header-search { display: flex; flex: 1 1 260px; max-width: 520px; min-width: 140px; height: 44px; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--control-border); background: var(--card); color: var(--muted); }
:root .top-nav .header-search .icon { width: 19px; height: 19px; }
:root .top-nav .header-search:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 2px var(--accent-text); }
:root .top-nav .header-search input { width: 100%; min-width: 0; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 13px; }
:root .top-nav .header-search input:focus-visible { outline: none; }
.search-guidance { margin-bottom: 22px; }
.search-recipe-filters { padding: 16px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; }
.search-recipe-filters h2 { font-size: 16px; margin-bottom: 5px; }
.search-recipe-filters .note { margin-bottom: 12px; }
.search-recipe-filters .active-filter-chips { margin-bottom: 0; }
.search-summary { overflow-wrap: anywhere; }
@media (max-width: 900px) and (min-width: 601px) {
  :root .top-nav { gap: 9px; padding-inline: 16px; }
  :root .top-nav .top-link { min-width: 44px; padding-inline: 4px; }
}
@media (max-width: 600px) {
  :root, :root[data-theme='light'] { --top: 108px; }
  :root .top-nav { display: flex; flex-wrap: wrap; align-content: start; gap: 4px 0; padding: 8px 12px; }
  :root .top-nav .brand { flex: 0 0 82px; width: auto; min-width: 82px; min-height: 40px; height: 40px; font-size: 27px; grid-column: auto; justify-self: auto; }
  :root .top-nav .header-search { flex: 1 1 calc(100% - 94px); min-width: 0; max-width: none; width: auto; height: 40px; margin-left: 10px; padding-inline: 10px; }
  :root .top-nav .header-search input { height: 38px; font-size: 12px; }
  :root .top-nav .header-search .icon { width: 17px; height: 17px; }
  :root .top-nav .top-link { flex: 0 0 20%; min-width: 0; width: auto; min-height: 44px; height: 44px; padding: 4px; gap: 3px; }
  :root .top-nav .top-link .icon { width: 20px; height: 20px; }
  :root .top-nav .top-link span:last-child { display: block; font-size: 9px; }
}

/* Outstanding ingredient groups in the shared header basket. */
:root .top-nav .cart-badge { position: absolute; top: 0; right: calc(50% - 24px); min-width: 20px; padding: 1px 4px; border: 2px solid var(--bar-header); border-radius: 12px; background: var(--raised); color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.3; }
:root .top-nav .cart-badge.has-items { background: var(--gold); color: var(--gold-ink); }

/* Approved account presentation uses the existing Sage theme tokens. */
.auth-nav { justify-content: space-between; }
.auth-header-actions { display:flex; align-items:center; gap:16px; }
.auth-header-actions > a { min-height:44px; display:flex; align-items:center; font-size:13px; }
.auth-stage { display:flex; justify-content:center; padding:48px 24px 56px; }
#app > .site-header + main:not(.main) > :is(.auth-stage,.empty-state) { padding-top:calc(var(--top) + 48px + env(safe-area-inset-top)); }
.auth-wrap { width:min(100%,480px); }
.auth-card { width:min(100%,480px); padding:32px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
:root[data-theme='light'] .auth-card { border-radius:20px; }
.auth-card h1 { font-size:28px; line-height:1.3; margin:0 0 10px; }
.auth-intro { color:var(--muted); font-size:14px; margin-bottom:28px; }
.auth-form { display:grid; gap:20px; }
.auth-form .field { display:grid; gap:8px; }
.auth-form input { min-height:48px; width:100%; min-width:0; font-size:16px; padding:12px 13px; border-radius:12px; }
.auth-form .field > label { font-size:14px; font-weight:500; margin:0; }
.auth-form .field small { color:var(--muted); font-size:12px; }
.auth-form .button,.auth-card > .button { width:100%; min-height:48px; border-radius:12px; }
.auth-card > .button + .button { margin-top:12px; }
.auth-password { position:relative; }
.auth-password input { padding-right:58px; }
.auth-reveal { position:absolute; right:3px; top:2px; width:44px; height:44px; border:0; background:transparent; color:var(--muted); }
.auth-reveal:hover { color:var(--accent-text); background:var(--raised); }
.auth-forgot { display:flex; justify-content:flex-end; align-items:center; min-height:44px; margin-top:-12px; font-size:13px; color:var(--accent-text); }
.auth-error,.auth-notice { padding:13px; border-radius:12px; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.auth-error { color:var(--red); border:1px solid var(--red); background:var(--error-bg); }
.auth-notice { color:var(--warning-text); border:1px solid var(--warning-line); background:var(--warning-bg); }
.auth-switch { border-top:1px solid var(--line); margin:24px 0 0; padding-top:20px; text-align:center; color:var(--muted); font-size:14px; }
.auth-switch a,.auth-guest a { color:var(--accent-text); display:inline-flex; min-height:44px; align-items:center; text-decoration:underline; text-underline-offset:4px; }
.auth-guest { text-align:center; padding-top:16px; margin:0; font-size:13px; }
.auth-card button:disabled { cursor:wait; }
.cloud-more { margin:24px auto; display:flex; }
.cloud-login-link { flex-shrink:0; color:var(--accent-text); }
:root body[data-cloud='true'] .top-nav .top-link[data-action='logout'] { border:0; background:transparent; }

/* Compact search suggestions reuse both theme palettes. */
:root .top-nav .header-search { position:relative; }
.typeahead-panel[hidden] { display:none; }
.typeahead-panel { position:absolute; z-index:60; top:calc(100% + 8px); left:0; right:0; max-height:min(480px,60vh); overflow-y:auto; overscroll-behavior:contain; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--text); box-shadow:0 12px 28px #0003; }
.typeahead-group { padding:7px 8px 3px; color:var(--muted); font-size:11px; font-weight:700; }
.typeahead-row { display:flex; align-items:center; gap:8px; min-height:44px; padding:6px 8px; border-radius:7px; text-decoration:none; color:var(--text); }
.typeahead-row:hover,.typeahead-row[aria-selected='true'] { background:var(--raised); outline:1px solid var(--line); }
.typeahead-row strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; }
.typeahead-row small { flex:0 1 35%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }
.typeahead-avatar,.typeahead-recipe-icon { width:28px; height:28px; flex:0 0 28px; border-radius:50%; object-fit:cover; }
.typeahead-recipe-icon { display:grid; place-items:center; background:var(--raised); color:var(--muted); }
.typeahead-status { padding:10px 8px; margin:0; color:var(--muted); font-size:12px; }
.typeahead-all { display:flex; align-items:center; min-height:44px; padding:8px; border-top:1px solid var(--line); color:var(--accent-text); font-size:12px; }
.typeahead-all:focus-visible { outline:2px solid var(--accent-text); outline-offset:-2px; }
@media (max-width:600px) { .typeahead-panel { max-height:60vh; } .typeahead-row small { flex-basis:30%; } }
.profile-cover { position:relative; }
.profile-cover-edit { position:absolute; right:12px; bottom:12px; background:var(--card); border:1px solid var(--control-border); color:var(--text); box-shadow:0 2px 12px var(--shadow); }
.profile-panel .profile-details h2 > .user-name-link { min-height:0; padding:0; line-height:1.25; }
.profile-summary { display:flex; flex-wrap:wrap; align-items:last baseline; gap:4px 24px; }
.profile-summary .profile-identity { display:flex; flex-direction:column; min-width:0; gap:3px; }
.profile-panel .profile-summary .user-average { margin:0; }
.profile-panel .profile-summary > .user-followers { margin:0; min-height:40px; max-width:100%; overflow-wrap:anywhere; }
.profile-bio-line { display:flex; align-items:flex-start; gap:6px; margin-top:6px; }
.profile-panel .profile-bio-line .profile-bio { margin:0; min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; line-height:1.55; }
.profile-panel > .profile-details > p.profile-bio { margin:6px 0 0; overflow-wrap:anywhere; white-space:pre-wrap; line-height:1.55; }
#profile-bio-input { min-height:96px; max-height:320px; resize:vertical; }
#profile-bio-count { display:block; font-size:12px; color:var(--muted); }
#profile-bio-count.is-invalid { color:var(--red); }
@media(max-width:600px) {
  .profile-hero .profile-panel { display:grid; grid-template-columns:80px minmax(0,1fr); column-gap:12px; row-gap:0; padding:16px; }
  .profile-hero .profile-panel > .avatar-button { grid-column:1; grid-row:1 / 3; width:80px; height:80px; }
  .profile-hero .profile-panel > .profile-details { display:contents; }
  .profile-panel .profile-details > h2 { grid-column:2; margin:0 0 5px; font-size:22px; }
  .profile-panel .profile-summary { grid-column:2; gap:0 12px; }
  .profile-panel .profile-bio-line, .profile-panel > .profile-details > p.profile-bio { grid-column:1 / -1; margin-top:8px; }
  .profile-hero .profile-panel > .profile-actions { grid-column:1 / -1; }
}
.profile-bio-edit { flex-shrink:0; background:transparent; border:0; }
.profile-bio-edit .icon { width:18px; height:18px; }
.profile-media-actions:empty { display:none; }
@media(max-width:600px) {
  :root body[data-cloud='true'] .top-nav:not(.auth-nav) .top-link { flex-basis:calc(100% / var(--navigation-items,5)); }
  :root body[data-cloud='true'] .top-nav:not(.auth-nav) .top-link span:last-child { max-width:100%; overflow-wrap:anywhere; font-size:9px; line-height:1.15; }
  .auth-stage { padding:24px 16px 40px; }
  #app > .site-header + main:not(.main) > :is(.auth-stage,.empty-state) { padding-top:calc(var(--top) + 24px + env(safe-area-inset-top)); }
  .auth-card { padding:20px; }
  .auth-card h1 { font-size:25px; }
  .auth-header-actions { gap:8px; }
  .auth-nav { padding-inline:16px; }
  .profile-cover-edit { right:8px; bottom:8px; }
}
@media(max-width:360px) {
  .auth-stage { padding-inline:12px; }
  .auth-card { padding:16px; }
  .auth-header-actions > a { max-width:115px; line-height:1.35; }
}


/* Selected Afabel artwork, shared by the feed and account screens. */
:root .top-nav .brand { flex: 0 0 128px; width: 128px; min-width: 0; min-height: 44px; height: 44px; }
.brand-logo { display: block; width: 100%; aspect-ratio: 1766.445 / 488.544; pointer-events: none; }
.brand-logo img { display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 600px) {
  :root .top-nav .brand { flex-basis: 82px; width: 82px; }
}
.recipe-translation{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:.35rem 0;color:var(--muted,#777);font-size:.82rem}
.recipe-translation-action{border:0;background:none;color:var(--accent,#7b9b70);padding:.15rem .25rem;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.recipe-translation-action:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:3px}
.recipe-translation-action:disabled{opacity:.65;cursor:wait}
.recipe-translation-error{flex-basis:100%;color:var(--danger,#a84040)}

.feed-pagination { margin-top: 20px; text-align: center; }
.feed-pagination .cloud-more[hidden] { display: none; }
/* Account security actions and explicit lifecycle confirmation pages. */
.settings-danger-link strong { color:var(--red); }
.account-page { max-width:760px; margin:24px auto 60px; min-width:0; }
.account-page h1 { margin:18px 0; }
.account-page p { line-height:1.65; overflow-wrap:anywhere; }
.account-back { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); }
.account-card,.account-warning { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; margin:20px 0; }
.account-warning { border-color:var(--control-border); }
.account-card h2,.account-warning h2 { font-size:20px; margin-top:0; }
.account-card form { display:grid; gap:12px; margin-top:24px; }
.account-card input { width:100%; min-height:44px; padding:12px; border:1px solid var(--control-border); background:var(--background); color:var(--text); border-radius:9px; }
.account-card form p { margin:0; }
.account-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.account-page .button { min-height:44px; white-space:normal; text-align:center; }
.button.account-danger,.button.account-danger:hover { background:var(--error-bg); color:var(--red); border:1px solid var(--red); }
.account-error { color:var(--red); padding:14px; border:1px solid var(--red); border-radius:10px; }
.account-error[hidden] { display:none; }
.account-confirm { border-top:1px solid var(--line); padding-top:16px; margin-top:20px; }
.account-status { color:var(--success); }
@media(max-width:600px) { .account-page { margin-top:12px; } .account-card,.account-warning { padding:18px; } .account-actions .button { width:100%; } }

/* The desktop shell is shared by feeds and their related pages. */
.shared-page-layout .feed-stream { min-width: 0; }
.social-general-layout .social-feed-shell,
.social-general-layout .social-feed-heading,
.social-general-layout .social-feed-tabs { max-width: none; }
@media (min-width: 1024px) {
  :root .feed-layout, :root[data-theme='light'] .feed-layout {
    grid-template-columns: 190px minmax(0, 1fr) 240px;
    justify-content: stretch;
  }
  .feed-layout > .personal-rail, .feed-layout > .discovery-rail { display: block; }
}
@media (min-width: 1440px) {
  :root .feed-layout, :root[data-theme='light'] .feed-layout {
    grid-template-columns: 208px minmax(0, 1fr) 260px;
  }
}
/* User-approved compact navigation and feed categories. */
.top-link.nav-profile > .avatar { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; }
.top-link.nav-profile > .avatar-button { width: 30px; height: 30px; }
.settings-logout-area { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.settings-logout-area > button { min-height: 44px; width: 100%; }
.social-composer-collapsed { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin-bottom: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); text-align: start; cursor: pointer; font: inherit; min-height: 72px; }
.social-composer-collapsed > .avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; }
.social-composer-collapsed > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.social-composer-collapsed:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
@media (max-width: 600px) {
 :root, :root[data-theme='light'] { --top: 104px; }
 :root .site-header .top-nav { display: flex; flex-wrap: wrap; align-content: start; gap: 4px 0; padding: 8px 10px; height: 104px; }
 :root .site-header .brand { height: 36px; min-height: 36px; min-width: 82px; }
 :root .site-header .header-search { flex: 1 1 calc(100% - 94px); margin-inline-start: 10px; height: 36px; min-width: 0; max-width: none; padding-inline: 10px; }
 :root .site-header .header-search input { height: 34px; font-size: 11px; }
 :root .site-header .top-link { flex: 0 0 calc(100% / var(--navigation-items)); min-width: 0; height: 44px; min-height: 44px; padding: 4px 2px; gap: 0; flex-direction: column; justify-content: center; }
 :root .site-header .top-nav .top-link > .nav-label { display: none; }
 :root .site-header .top-link > .icon { width: 24px; height: 24px; }
 :root .site-header .top-link.nav-profile > .avatar { width: 28px; height: 28px; }
 :root .site-header .top-link .notification-badge, :root .site-header .top-link .cart-badge, :root .site-header .top-link .message-badge { position: absolute; inset: 0 calc(50% - 24px) auto auto; }
 :root .social-context-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; flex-wrap: nowrap; width: 100%; margin-bottom: 14px; }
 :root .social-context-tabs a { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 64px; gap: 2px; padding: 5px 1px; border-color: transparent; background: transparent; font-size: 10px; line-height: 1.25; }
 :root .social-context-tabs a > .category-label { display: none; }
 :root .social-context-tabs a > .icon { width: 20px; height: 20px; flex-shrink: 0; }
 :root .social-context-tabs a[aria-current='page'] { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }
 :root .social-context-tabs a[aria-current='page'] > .category-label { display: block; max-width: 100%; white-space: nowrap; }
 :root .social-context-tabs a[aria-current='page'] > .icon { width: 30px; height: 30px; }
}


/* Mobile settings overview and progressive route content. */
@media (max-width: 800px) {
.settings-page[data-settings-overview='true'] .settings-layout { display: grid; grid-template-columns: minmax(0,1fr); height: auto; }
.settings-page[data-settings-overview='true'] .settings-sidebar { position: static; max-height: none; overflow: visible; }
.settings-page[data-settings-overview='true'] .settings-category-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; gap: 10px; padding: 0; margin: 0; }
.settings-page[data-settings-overview='true'] .settings-workspace { height: auto; min-height: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.settings-page[data-settings-overview='false'] .settings-layout { grid-template-columns: minmax(0,1fr); }
.settings-page[data-settings-overview='false'] .settings-sidebar { display: none; }
}
@media (min-width: 801px) {
  .settings-overview-toolbar { display: none; }
  .settings-workspace { display: flex; flex-direction: column; }
  .settings-workspace > .settings-form, .settings-workspace > .settings-action-pane { flex: 1; min-height: 0; height: auto; }
  .settings-workspace > .settings-logout-area { order: 1; flex-shrink: 0; margin: 0; padding: 14px 24px; }
}
.settings-overview-toolbar { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.settings-overview-toolbar button { border: 0; background: none; cursor: pointer; }
.settings-page .settings-category { flex-basis: auto; }
.route-shell { min-width: 0; }
.route-placeholder-list { display: grid; gap: 16px; padding-block: 12px; }
.route-placeholder-card { display: flex; gap: 14px; min-height: 136px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.route-placeholder-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--raised); }
.route-placeholder-lines { display: grid; align-content: start; gap: 14px; flex: 1; padding-top: 7px; }
.route-placeholder-lines span { display: block; height: 12px; border-radius: 6px; background: var(--raised); }
.route-placeholder-lines span:first-child { width: 45%; }
.route-placeholder-lines span:last-child { width: 70%; }
@media(max-width:800px) {
  .settings-page[data-settings-overview='true'] .settings-category-list { grid-template-columns: minmax(0,1fr); }
  .settings-page[data-settings-overview='true'] .settings-category-label strong { font-size: 16px; white-space: normal; }
  .settings-page[data-settings-overview='true'] .settings-category-label > span { display: block; }
  .settings-page[data-settings-overview='true'] .settings-category-chevron { display: block; }
}

/* Append to root-owned styles.css after its existing comment rules. */
.comment-replies { border-left: 0; }
.comment-list .comment-is-reply { border: 0; }
.comment-actions .comment-like { display: inline-flex; align-items: center; gap: 6px; }
.comment-actions .comment-like.is-active { color: var(--red); background: var(--accent-soft); }
.comment-actions .comment-like.is-active .icon { fill: currentColor; }
.comment-actions .comment-like:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.comment-actions button:disabled { opacity: .6; cursor: default; }
.comment-reply-mention { color: var(--accent-text); }

/* Compact desktop posts and ads; preserve cooking, DIY and other page layouts. */
@media (min-width: 1024px) {
  :is(.page-following, .page-ads) .feed-layout:not(.shared-page-layout) > .feed-stream {
    width: clamp(380px, 50%, 640px);
    max-width: 100%;
    justify-self: center;
  }
  :is(.page-following, .page-ads) .feed-layout:not(.shared-page-layout) .social-stream .social-photo,
  :is(.page-following, .page-ads) .feed-layout:not(.shared-page-layout) .social-stream .social-native-stage,
  :is(.page-following, .page-ads) .feed-layout:not(.shared-page-layout) .social-stream .social-native-stage video {
    max-height: min(480px, 60vh);
  }
}

.page-home .feed-layout:not(.shared-page-layout) > .feed-stream { width: 100%; max-width: 100%; justify-self: stretch; }
.page-home .inspiration-photo { display: block; overflow: hidden; }
.page-home .inspiration-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Personal navigation and topics reuse the existing rail and color tokens. */
.personal-navigation .rail-profile { margin: 0; }
.personal-navigation hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 10px; }
.personal-navigation .rail-links { display: grid; gap: 3px; }
.personal-navigation .rail-links > a, .rail-unavailable { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 7px 4px; border-radius: 8px; font-size: 15px; }
.personal-navigation .rail-links a[aria-current='page'] { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.personal-navigation .rail-links .icon { width: 20px; height: 20px; flex: 0 0 20px; }
/* Inactive navigation keeps the approved vectors and their two-tone separation. */
.personal-navigation .rail-links > :is(a:not([aria-current='page']), .rail-unavailable) > .icon-filled [fill='#115865'] { fill: #8BB0B7; }
.personal-navigation .rail-links > :is(a:not([aria-current='page']), .rail-unavailable) > .icon-filled [fill='#8BB0B7'] { opacity: .55; }
.personal-navigation .rail-links .notification-badge, .personal-navigation .rail-links .message-badge { position: static; margin-inline-start: auto; flex: 0 0 auto; }
.rail-unavailable { color: var(--muted); }
.rail-unavailable > .icon, .rail-unavailable-name { filter: blur(.45px); opacity: .65; }
.rail-unavailable small { display: block; font-size: 11px; line-height: 1.4; }
.personal-rail > .topics-panel { margin-top: 28px; }
.topics-heading { display: flex; align-items: center; gap: 5px; }
.topics-heading > .topics-icon { width: 32px; height: 32px; flex: 0 0 32px; }
.topics-heading h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.3; }
.topics-help-button { width: 28px; height: 32px; flex: 0 0 28px; border: 1px solid var(--line); background: var(--raised); color: var(--text); border-radius: 50%; font: inherit; font-weight: 700; cursor: pointer; }
.topics-description { margin-block: 10px 12px; font-size: 12px; line-height: 1.5; }
.topics-list { list-style: none; margin: 0; padding: 0; }
.topic-row { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 2px 6px; min-height: 52px; padding: 7px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.topic-row:hover { color: var(--accent-text); }
.topic-rank { grid-row: span 2; color: var(--muted); font-size: 12px; }
.topic-row strong { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.topic-row small { grid-column: 2; font-size: 12px; color: var(--muted); }
.topics-explore { display: block; margin-top: 14px; line-height: 1.5; font-size: 13px; }
.topics-page { min-width: 0; }
.topics-page h1 { margin-bottom: 4px; overflow-wrap: anywhere; }
.topic-page-heading { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.topics-filters { display: grid; gap: 12px; margin-block: 20px; }
.topics-search { display: flex; gap: 8px; }
.topics-search input { flex: 1; width: 0; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; font-size: 14px; }
.topics-filter-row select { min-height: 44px; padding: 8px 30px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; font-size: 14px; }
.topics-filter-row { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; }
.topics-filter-row label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.topics-filter-row .topics-open-filter { display: flex; align-items: center; align-self: center; }
.topics-open-filter input { width: 18px; height: 18px; }
.topics-page > [data-topics-results] .topic-row { grid-template-columns: 28px minmax(0,1fr) auto; padding: 13px 8px; }
.topics-page > [data-topics-results] .topic-rank { grid-row: 1; }
.topics-page > [data-topics-results] .topic-row small { grid-column: 3; }
.topics-help h3 { margin-block: 18px 8px; font-size: 16px; }
.topics-help h3:first-child { margin-top: 0; }
.topics-help p { line-height: 1.65; }
.topic-hashtag { color: var(--accent-text); text-decoration: none; overflow-wrap: anywhere; }
.topic-hashtag:hover { text-decoration: underline; }
.secondary-navigation-menu { position: relative; flex: 0 0 32px; }
.secondary-navigation-menu summary { display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 44px; cursor: pointer; list-style: none; }
.secondary-navigation-menu summary::-webkit-details-marker { display: none; }
.secondary-navigation-menu nav { position: absolute; top: 100%; inset-inline-end: 0; z-index: 45; display: grid; min-width: 210px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 8px 28px #0002; }
.secondary-navigation-menu nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px; white-space: nowrap; }
.topbar-online { position: relative; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.topbar-online-previews { display: flex; gap: 7px; }
.topbar-online-person { display: flex; align-items: center; gap: 4px; max-width: 86px; font-size: 11px; }
.topbar-online-person > span:last-child { max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-online-person .online-contact-avatar { flex-shrink: 0; width: 26px; height: 26px; font-size: 10px; }
:root .top-nav .online-topbar-button { border: 0; background: transparent; cursor: pointer; min-width: 58px; font: inherit; font-size: 11px; }
.online-topbar-label { white-space: nowrap; }
.online-contacts-popover { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 46; width: min(350px,calc(100vw - 24px)); max-height: min(480px,calc(100dvh - 140px)); overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 8px 28px #0002; }
.online-contacts-popover[hidden] { display: none; }
.online-contacts-popover h2 { font-size: 17px; margin: 0 0 6px; }
.online-contacts-popover .online-contact { min-height: 52px; }
@media (min-width:1024px) {
  :root .feed-layout, :root[data-theme='light'] .feed-layout { grid-template-columns: 224px minmax(0,1fr) 240px; }
  .topics-panel .topics-heading h2 { font-size: 15px; white-space: nowrap; overflow-wrap: normal; }
}
@media (min-width:1440px) {
  :root .feed-layout, :root[data-theme='light'] .feed-layout { grid-template-columns: 232px minmax(0,1fr) 260px; }
  .topbar-online-person { max-width: 120px; }
  .topbar-online-person > span:last-child { max-width: 86px; }
}
@media (max-width:800px) {
  :root .site-header .top-nav { position: relative; }
  :root .site-header .top-nav .header-search { margin-inline-end: 36px; flex-basis: calc(100% - 130px); }
  .secondary-navigation-menu { position: absolute; top: 5px; right: 8px; }
  :root .site-header .top-nav > .top-link, :root body[data-cloud='true'] .site-header .top-nav > .top-link { flex-basis: calc(100% / var(--navigation-items,6)); }
  .topbar-online { flex: 0 0 calc(100% / var(--navigation-items,6)); justify-content: center; height: 48px; min-width: 0; }
  .topbar-online-previews { display: none; }
  :root .site-header .topbar-online .online-topbar-button { width: 100%; flex-basis: 100%; min-width: 0; gap: 0; padding-inline: 0; flex-direction: column; }
  :root .site-header .topbar-online .online-topbar-label { display: block; font-size: 9px; line-height: 1.3; }
  .online-contacts-popover { position: fixed; top: 108px; right: 10px; }
  .topics-filter-row { gap: 12px; }
  .topics-search { flex-wrap: wrap; }
  .topics-page > [data-topics-results] .topic-row { grid-template-columns: 20px minmax(0,1fr); }
  .topics-page > [data-topics-results] .topic-row small { grid-column: 2; }
}

/* Home section navigation follows the central feed width. */
@media (min-width: 801px) {
  .feed-stream > .social-context-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 6px; width: 100%; margin: 0 0 20px; }
  .feed-stream > .social-context-tabs a { min-width: 0; flex-wrap: wrap; gap: 4px; padding-inline: 4px; font-size: 12px; align-content: center; }
}

/* Header navigation now lives in the rail; mobile keeps one accessible menu. */
.mobile-navigation { display: none; }
@media (min-width:801px) {
  :root .site-header .top-nav { justify-content: flex-start; gap: 12px; }
  :root .site-header .topbar-online { margin-inline-start: auto; }
}
.rising-list { display: grid; gap: 6px; }
.rising-item { display: block; padding: 9px 4px; border-bottom: 1px solid var(--line); border-radius: 6px; }
.rising-item:hover { background: var(--raised); }
.rising-item strong { display: block; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.rising-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.rising-panel .rail-caption { font-size: 12px; line-height: 1.5; }
.rail-profile > a { flex: 1; min-width: 0; }
.rail-secondary-menu { margin-inline-start: auto; }
.rail-secondary-menu nav { min-width: min(210px,calc(100vw - 32px)); }
.secondary-navigation-menu nav .notification-badge,
.secondary-navigation-menu nav .message-badge { position: static; margin-inline-start: auto; }
.secondary-navigation-menu nav a > span:first-of-type { flex: 1; }
@media (max-width:899px) {
  .mobile-navigation { display: block; position: relative; top: auto; right: auto; flex: 0 0 36px; }
  .mobile-navigation summary { min-width: 36px; min-height: 44px; }
  .mobile-navigation nav { position: fixed; top: calc(var(--top) + env(safe-area-inset-top)); right: 10px; width: min(320px,calc(100vw - 20px)); max-height: calc(100dvh - var(--top) - 20px - env(safe-area-inset-top)); overflow-y: auto; }
}
@media (max-width:800px) {
  :root, :root[data-theme='light'] { --top: 64px; }
  :root .site-header .top-nav { height: 64px; flex-wrap: nowrap; align-content: center; align-items: center; gap: 8px; padding: 8px 10px; }
  :root .site-header .top-nav .brand { flex: 0 0 82px; min-width: 82px; height: 40px; }
  :root .site-header .top-nav .header-search { flex: 1 1 0; width: 0; margin: 0; min-width: 0; height: 38px; }
  :root .site-header .topbar-online { flex: 0 0 52px; height: 44px; }
  :root .site-header .top-nav .topbar-online .top-link.online-topbar-button { flex: 0 0 100%; width: 100%; min-width: 44px; min-height: 44px; height: 44px; }
  .online-contacts-popover { top: calc(72px + env(safe-area-inset-top)); }
}

/* A running game occupies the main area beside the existing personal rail. */
.page-games:has([data-game-workspace]) > .site-footer{display:none}
.game-page-layout .feed-stream{min-width:0;padding:0}
.game-workspace{min-width:0;width:100%;display:flex;flex-direction:column;border:1px solid var(--line,#c6d2d9);border-radius:12px;background:var(--card,#fff);overflow:hidden;isolation:isolate}
.game-workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:48px;padding:7px 12px;background:var(--card,#fff);color:var(--text,#17313c);border-bottom:1px solid var(--line,#c6d2d9)}
.game-workspace-title{margin:0;font-size:1rem;font-weight:700}
.game-workspace-toolbar button{min-height:36px;white-space:nowrap}
[data-game-stage]{position:relative;height:var(--game-stage-height,calc(100dvh - 180px));min-height:220px;flex:none;overflow:hidden;isolation:isolate;contain:paint;background:#071522}
[data-game-frame-host]{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;min-height:0!important;z-index:0!important;overflow:hidden}
[data-game-frame-effects]{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.game-workspace:fullscreen,.game-workspace-expanded{width:100%;height:100dvh;border:0;border-radius:0;background:#071522}
.game-workspace:fullscreen [data-game-stage],.game-workspace-expanded [data-game-stage]{flex:1;min-height:0;height:auto}
.game-workspace-expanded{position:fixed;inset:0;z-index:1200}
body.game-workspace-fallback-open{overflow:hidden;overscroll-behavior:none}
@media(min-width:1024px){:root .feed-layout.game-page-layout,:root[data-theme=light] .feed-layout.game-page-layout{grid-template-columns:224px minmax(0,1fr)}}
@media(min-width:1440px){:root .feed-layout.game-page-layout,:root[data-theme=light] .feed-layout.game-page-layout{grid-template-columns:232px minmax(0,1fr)}}
@media(max-width:767px){.page-games:has([data-game-workspace]){padding-left:8px;padding-right:8px}.game-workspace{border-radius:8px}.game-workspace-toolbar{gap:8px;padding:6px 8px}.game-workspace-title{font-size:.9rem}.game-workspace-toolbar button{font-size:.8rem;padding:6px 10px}}

/* Messages and settings share personal navigation without a discovery column. */
@media (min-width:900px) {
  :root .feed-layout.personal-page-layout { grid-template-columns: 200px minmax(0,1fr); }
}
@media (min-width:1024px) {
  :root .feed-layout.personal-page-layout { grid-template-columns: 224px minmax(0,1fr); }
}
@media (min-width:1440px) {
  :root .feed-layout.personal-page-layout { grid-template-columns: 232px minmax(0,1fr); }
}
@media (min-width:801px) and (min-height:560px) {
  .page-settings > .personal-page-layout { height: 100%; min-height: 0; align-items: stretch; }
  .page-settings > .personal-page-layout > .personal-rail { position: static; align-self: start; }
  .page-settings > .personal-page-layout > .feed-stream { height: 100%; min-height: 0; }
}

/* Fullscreen fills the viewport; its only shell control floats over the game. */
.game-workspace[data-game-display=fullscreen]{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#071522}
.game-workspace[data-game-display=fullscreen] [data-game-stage]{position:absolute;inset:0;width:100%;height:100%!important;min-height:0;flex:1}
.game-workspace[data-game-display=fullscreen] [data-game-toolbar]{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));top:auto;z-index:40;min-height:0;margin:0;padding:0;background:transparent;border:0;pointer-events:none}
.game-workspace[data-game-display=fullscreen] .game-workspace-title{display:none}
.game-workspace[data-game-display=fullscreen] [data-game-display-toggle]{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #d6bd7d66;border-radius:50%;background:#071522b8;color:#f5dfaa;box-shadow:0 2px 8px #0005;font-size:24px;line-height:1;pointer-events:auto}
.game-workspace[data-game-display=fullscreen] [data-game-display-toggle]:focus-visible{outline:2px solid #f5dfaa;outline-offset:2px}

/* Scrollable game menus keep their native scrolling without a white track. */
.game-workspace[data-game-display=fullscreen]{color-scheme:dark}
.game-workspace[data-game-display=fullscreen],.game-workspace[data-game-display=fullscreen] *{scrollbar-color:#8b815e transparent;scrollbar-width:thin}
.game-workspace[data-game-display=fullscreen] ::-webkit-scrollbar{width:8px;height:8px}
.game-workspace[data-game-display=fullscreen] ::-webkit-scrollbar-track{background:transparent}
.game-workspace[data-game-display=fullscreen] ::-webkit-scrollbar-thumb{background:#8b815e;border:2px solid transparent;background-clip:padding-box;border-radius:8px}