:root { color-scheme: light; --ink: #25302c; --muted: #68736f; --paper: #f5f2e9; --card: #fffdf7; --line: #d8d5c9; --accent: #c75c3b; --deep: #315c50; --berry: #4d9364; --ingredient: #d99a38; --skill: #467fae; --violet: #7569a5; }
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html, body { width: 100%; min-width: 0; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: radial-gradient(circle at 8% 2%, rgb(77 147 100 / 8%), transparent 28rem), radial-gradient(circle at 94% 18%, rgb(70 127 174 / 7%), transparent 26rem), var(--paper); font: 16px/1.55 system-ui, sans-serif; }
a { color: inherit; }
main, footer { width: min(calc(100% - 32px), 960px); margin-inline: auto; }
.site-header { position: sticky; z-index: 130; top: 0; display: flex; width: 100%; min-height: 58px; margin: 0; padding: 10px max(16px, calc((100% - 1280px) / 2)); align-items: center; gap: 12px; border-bottom: 1px solid #2b3950; color: white; background: #101a2d; box-shadow: 0 6px 20px rgb(13 24 42 / 16%); }
.brand { position: relative; display: block; flex: 0 0 auto; min-height: 28px; padding: 7px 0 7px 20px; color: #dce8f5; font-size: .76rem; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; }
.brand::before { content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 11px; border-radius: 3px; background: linear-gradient(135deg, #68c482 0 50%, #5ab4ea 50%); box-shadow: 0 0 0 4px rgb(104 196 130 / 10%); transform: translateY(-50%) rotate(45deg); }
.site-nav { display: flex; gap: 14px; margin-left: auto; font-size: .82rem; font-weight: 700; }
.site-nav a { position: relative; padding: 7px 11px 7px 22px; border: 1px solid #28364c; border-radius: 7px; color: #e9f1fb; background: #18253a; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.site-nav a::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--berry); transform: translateY(-50%); }
.site-nav a:nth-child(2)::before { background: var(--ingredient); }
.site-nav a:nth-child(3)::before { background: var(--skill); }
.site-nav a:nth-child(4)::before { background: var(--violet); }
.site-nav a:nth-child(5)::before { background: #8da0b6; }
.site-nav a:hover, .site-nav a:focus-visible { border-color: #58708f; background: #21324d; transform: translateY(-1px); }
.site-nav a.active { border-color: #6ca78f; color: white; background: var(--deep); box-shadow: inset 0 -2px #8bc2a8, 0 5px 12px rgb(6 15 24 / 20%); }
.site-nav a.active::before { background: #b5f0cd; box-shadow: 0 0 0 3px rgb(181 240 205 / 13%); }
.header-page-name { min-width: 0; margin-right: auto; padding-left: 12px; border-left: 1px solid #3a4860; overflow: hidden; color: white; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.header-user-switch { margin: 0; }
.header-user-switch label { display: flex; min-height: 36px; padding: 0 5px 0 10px; align-items: center; gap: 5px; border: 1px solid #34445d; border-radius: 7px; background: #18253a; }
.header-user-switch label > span[aria-hidden="true"] { color: #68c482; font-size: .6rem; }
.header-user-switch select { min-width: 88px; padding: 6px 24px 6px 5px; border: 0; color: white; background-color: transparent; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.header-user-switch option { color: var(--ink); background: white; }
.mobile-menu-toggle { display: grid; flex: 0 0 42px; width: 42px; min-height: 38px; padding: 9px; place-content: center; gap: 4px; border-color: #34445d; background: #18253a; box-shadow: none; }
.mobile-menu-toggle:hover { transform: none; box-shadow: none; }
.mobile-menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: white; }
.mobile-menu-backdrop { position: fixed; z-index: 148; inset: 0; display: block; width: 100%; min-height: 100dvh; padding: 0; border: 0; border-radius: 0; background: rgb(4 10 18 / 56%); box-shadow: none; }
.mobile-menu-backdrop[hidden] { display: none; }
.mobile-nav-drawer { position: fixed; z-index: 149; inset: 0 0 0 auto; display: flex; width: min(84vw, 330px); padding: 14px; flex-direction: column; gap: 14px; overflow-y: auto; color: white; background: #101a2d; box-shadow: -16px 0 40px rgb(3 9 17 / 32%); transform: translateX(105%); transition: transform .2s ease; }
.mobile-nav-drawer.is-open { transform: translateX(0); }
.mobile-nav-heading { display: flex; min-height: 42px; align-items: center; justify-content: space-between; border-bottom: 1px solid #34445d; }
.mobile-nav-heading strong { font-size: .92rem; }
.mobile-nav-heading button { width: 36px; min-height: 36px; padding: 0; border: 0; color: #dce8f5; background: transparent; font-size: 1.5rem; box-shadow: none; }
.mobile-nav-drawer .site-nav { display: grid; width: 100%; margin: 0; gap: 7px; overflow: visible; white-space: normal; }
.mobile-nav-drawer .site-nav a { width: 100%; min-height: 46px; padding: 11px 12px 11px 30px; }
.mobile-nav-drawer .site-nav a::before { left: 14px; }
.drawer-account { display: grid; margin-top: auto; padding-top: 14px; gap: 8px; border-top: 1px solid #34445d; color: #dce8f5; font-size: .84rem; }
.drawer-account > span { color: #9fadc0; font-size: .72rem; }
.drawer-account strong { color: white; font-size: 1rem; }
.drawer-account a { color: #bfe7d0; }
.drawer-account form { margin: 0; }
.drawer-account button { width: 100%; min-height: 40px; }
.mobile-header-actions { display: block; padding-top: 14px; border-top: 1px solid #34445d; }
.mobile-header-actions:empty { display: none; }
body.mobile-menu-open { overflow: hidden; }
footer { color: var(--muted); font-size: .85rem; }
/* The app shell keeps the first actionable area close to the persistent header.
   Larger gaps belong inside an intentional panel, not between every page section. */
main { padding: 22px 0 40px; }
footer { padding: 16px 0 28px; border-top: 1px solid var(--line); }
h1, h2, h3 { font-family: system-ui, sans-serif; line-height: 1.25; }
h1 { margin: 4px 0 12px; font-size: clamp(1.7rem, 4vw, 2.5rem); max-width: none; }
h2 { margin: 2px 0 10px; }
.eyebrow { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.hero { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 16px; border: 1px solid #cfddd5; border-radius: 10px; background: var(--card); box-shadow: 0 6px 16px rgb(44 61 54 / 6%); }
/* Decorative shapes made the top of each page taller without adding meaning. */
.hero::after { display: none; }
.hero > * { position: relative; z-index: 1; }
.hero-actions { display: flex; gap: 8px; }
.hero p:not(.eyebrow), .form-page > p { color: var(--muted); }
.box-page-header { display: flex; min-height: 58px; margin-bottom: 10px; align-items: center; justify-content: space-between; gap: 12px; }
.box-page-header > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.box-page-header h1 { margin: 0; font-size: 1.45rem; }
.box-page-header > div:first-child span { color: var(--muted); font-size: .76rem; }
.box-primary-actions { display: flex; gap: 7px; }
.box-primary-actions .button { min-height: 38px; padding: 7px 11px; gap: 5px; font-size: .78rem; }
.box-primary-actions span { font-size: .72rem; letter-spacing: -.08em; }
.box-page-tabs { position: sticky; z-index: 20; top: 71px; display: grid; margin-bottom: 12px; padding: 4px; grid-template-columns: repeat(3, 1fr); gap: 4px; border: 1px solid #cfd8d3; border-radius: 8px; background: rgb(255 253 247 / 94%); box-shadow: 0 5px 14px rgb(26 42 36 / 7%); backdrop-filter: blur(8px); }
.box-page-tabs button { position: relative; min-height: 40px; padding: 7px 10px; gap: 6px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: .78rem; box-shadow: none; }
.box-page-tabs button:hover { transform: none; box-shadow: none; background: #eef3f0; }
.box-page-tabs button[aria-selected="true"] { color: white; background: var(--deep); }
.box-page-tabs button b { display: grid; min-width: 18px; height: 18px; padding-inline: 4px; place-items: center; border-radius: 9px; color: #734316; background: #f1c77c; font-size: .62rem; }
.box-page-panel[hidden] { display: none; }
.box-page-panel > .backup-panel:last-child, .box-page-panel > .capture-panel:last-child { margin-bottom: 0; }
body.box-layout main { padding-top: 16px; }
.box-layout .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.box-register-fab { position: fixed; z-index: 100; right: max(20px, calc((100vw - 1280px) / 2)); bottom: 22px; display: inline-flex; min-width: 92px; min-height: 52px; padding: 10px 17px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #6ca78f; border-radius: 26px; color: white; background: var(--deep); box-shadow: 0 10px 26px rgb(16 37 31 / 28%); text-decoration: none; }
.box-register-fab:hover, .box-register-fab:focus-visible { background: #264b41; transform: translateY(-2px); }
.box-register-fab span { font-size: 1.35rem; line-height: 1; }
.box-register-fab b { font-size: .82rem; }
.button, button, .file-input { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 15px; border: 1px solid var(--deep); border-radius: 5px; color: var(--deep); background: transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.button:hover, button:hover:not(:disabled), .file-input:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgb(38 61 52 / 12%); }
.primary, button { color: white; background: var(--deep); }
.quiet { border-color: var(--line); color: var(--muted); background: transparent; }
.notice, .errors { padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--card); }
.toast-stack { position: fixed; z-index: 140; top: 78px; left: 50%; display: grid; width: min(560px, calc(100% - 28px)); gap: 7px; transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; min-height: 48px; padding: 10px 12px; align-items: center; gap: 9px; border: 1px solid #c8d7ce; border-left: 5px solid var(--berry); border-radius: 7px; background: white; box-shadow: 0 12px 30px rgb(20 34 30 / 22%); pointer-events: auto; animation: toast-in .18s ease both; }
.toast.notice, .toast.errors { margin: 0; }
.toast > span[aria-hidden="true"] { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: white; background: var(--berry); }
.toast > strong { font-size: .82rem; }
.toast-error { align-items: flex-start; border-color: #e1b7aa; border-left-color: var(--accent); }
.toast-error strong { font-size: .8rem; }
.toast-error ul { margin: 3px 0 0; padding-left: 18px; font-size: .72rem; }
.toast-close { flex: 0 0 28px; width: 28px; min-height: 28px; margin-left: auto; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 1.15rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.duplicate-warning { margin: 10px 0; padding: 11px 14px; border: 1px solid #b18432; border-left: 5px solid #b18432; border-radius: 5px; background: #f7f1df; }
.duplicate-warning p { margin: 4px 0; color: var(--muted); font-size: .82rem; }
.duplicate-warning ul { margin: 6px 0 0; padding-left: 20px; font-size: .78rem; }
.duplicate-confirm { background: #8a5a19; border-color: #8a5a19; }
.view-switch { display: flex; gap: 8px; margin: 24px 0 14px; }
.view-switch a { padding: 7px 12px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; }
.view-switch .selected { border-color: var(--accent); color: var(--ink); font-weight: 700; }
.goal-launcher { margin: 0 0 24px; padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: rgb(255 253 247 / 82%); box-shadow: 0 8px 22px rgb(44 48 43 / 5%); }
.goal-launcher-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.goal-launcher-heading h2 { margin: 2px 0 0; font-size: 1.25rem; }
.goal-launcher-heading > p { margin: 0; color: var(--muted); font-size: .78rem; }
.goal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.goal-card { position: relative; display: grid; min-width: 0; min-height: 106px; padding: 13px; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; overflow: hidden; border: 1px solid var(--line); border-top: 4px solid var(--berry); border-radius: 7px; color: var(--ink); background: linear-gradient(150deg, rgb(77 147 100 / 9%), white 65%); text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.goal-card:hover, .goal-card:focus-visible { border-color: var(--berry); box-shadow: 0 9px 20px rgb(44 48 43 / 10%); transform: translateY(-2px); }
.goal-card > span:nth-child(2) { min-width: 0; }
.goal-card small, .goal-card strong, .goal-card em { display: block; }
.goal-card small { color: var(--berry); font-size: .64rem; font-weight: 850; letter-spacing: .05em; }
.goal-card strong { margin-top: 2px; font-size: .88rem; line-height: 1.35; }
.goal-card em { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: .67rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.goal-card > b { color: var(--berry); font-size: 1.1rem; }
.goal-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; color: white; background: var(--berry); }
.goal-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.goal-compare { border-top-color: var(--ingredient); background: linear-gradient(150deg, rgb(217 154 56 / 11%), white 65%); }
.goal-compare:hover, .goal-compare:focus-visible { border-color: var(--ingredient); }
.goal-compare small, .goal-compare > b { color: #a86d14; }
.goal-compare .goal-icon { background: var(--ingredient); }
.goal-team { border-top-color: var(--skill); background: linear-gradient(150deg, rgb(70 127 174 / 10%), white 65%); }
.goal-team:hover, .goal-team:focus-visible { border-color: var(--skill); }
.goal-team small, .goal-team > b { color: var(--skill); }
.goal-team .goal-icon { background: var(--skill); }
.goal-plan { border-top-color: var(--violet); background: linear-gradient(150deg, rgb(117 105 165 / 9%), white 65%); }
.goal-plan small { color: var(--violet); }
.goal-plan .goal-icon { background: var(--violet); }
.goal-card.upcoming { opacity: .78; }
.goal-badge { padding: 3px 6px; border-radius: 999px; color: #5e557f; background: #ebe8f4; font-size: .6rem; font-weight: 800; white-space: nowrap; }
.next-actions { margin-bottom: 12px; padding: 11px 12px; border: 1px solid #c9d8d0; border-radius: 8px; background: #f7faf8; box-shadow: 0 5px 14px rgb(26 42 36 / 5%); }
.next-actions > header { display: flex; margin-bottom: 8px; align-items: center; justify-content: space-between; gap: 12px; }
.next-actions > header small, .next-actions > header h2 { display: block; margin: 0; }
.next-actions > header small { color: var(--berry); font-size: .57rem; font-weight: 850; }
.next-actions > header h2 { font-size: .95rem; }
.next-actions > header a { font-size: .62rem; font-weight: 800; }
.next-actions > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.next-action { --action-color: var(--deep); display: grid; min-width: 0; min-height: 72px; padding: 8px; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 7px; border: 1px solid #d6dfda; border-left: 4px solid var(--action-color); border-radius: 7px; color: var(--ink); background: white; text-decoration: none; }
.next-action > span:first-child { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: white; background: var(--action-color); font-size: .7rem; font-weight: 900; }
.next-action b, .next-action small { display: block; }
.next-action b { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.next-action small { margin-top: 2px; color: var(--muted); font-size: .54rem; line-height: 1.35; }
.next-action em { grid-column: 2; color: var(--action-color); font-size: .56rem; font-style: normal; font-weight: 850; }
.next-action.tone-import { --action-color: #5c7593; }.next-action.tone-event { --action-color: #8267a4; }.next-action.tone-healer { --action-color: #bd687e; }.next-action.tone-ingredient { --action-color: #b77a20; }.next-action.tone-team { --action-color: #467fae; }.next-action.tone-compare { --action-color: #44845a; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.box-collection { margin-bottom: 24px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-top: 4px solid var(--deep); border-radius: 7px; background: var(--card); box-shadow: 0 8px 22px rgb(44 48 43 / 6%); }
.box-collection-header { display: flex; min-height: 54px; padding: 10px 14px; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.box-collection-header > span:first-child { min-width: 0; }
.box-collection-header b, .box-collection-header small { display: block; }
.box-collection-header b { font-size: .92rem; }
.box-collection-header small { margin-top: 1px; color: var(--muted); font-size: .66rem; font-weight: 400; }
.box-collection-header > span:nth-child(2) { margin-left: auto; color: var(--deep); font-size: .82rem; font-weight: 800; white-space: nowrap; }
.box-collection > summary { display: flex; min-height: 68px; padding: 13px 18px; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }
.box-collection > summary::-webkit-details-marker { display: none; }
.box-collection > summary::after { content: "⌄"; color: var(--deep); font-size: 1.35rem; transition: transform .15s ease; }
.box-collection[open] > summary::after { transform: rotate(180deg); }
.box-collection > summary > span:first-child { min-width: 0; }
.box-collection > summary b, .box-collection > summary small { display: block; }
.box-collection > summary b { font-size: 1rem; }
.box-collection > summary small { margin-top: 2px; color: var(--muted); font-size: .7rem; font-weight: 400; }
.box-collection > summary > span:nth-child(2) { margin-left: auto; color: var(--deep); font-weight: 800; white-space: nowrap; }
.box-collection > .view-switch, .box-collection > .box-tools, .box-collection > .cards { margin-inline: 14px; }
.box-collection > .view-switch { margin-top: 8px; }
.box-collection > .cards { padding-bottom: 14px; }
.box-tools { display: grid; margin-block: 10px 12px; padding: 10px; grid-template-columns: minmax(190px, 1fr) auto; align-items: end; gap: 8px; border: 1px solid #d5ded9; border-radius: 8px; background: #f7faf8; }
.box-tools label { display: grid; min-width: 0; gap: 3px; color: var(--muted); font-size: .64rem; font-weight: 750; }
.box-tools input, .box-tools select { min-width: 0; min-height: 39px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: white; font: inherit; }
.box-search-shell { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 5px; }
.box-search { position: relative; }
.box-search > span { position: absolute; z-index: 1; left: 10px; bottom: 9px; color: var(--deep); font-size: 1rem; }
.box-search input { width: 100%; padding-left: 32px; padding-right: 39px; }
.box-search input::-webkit-search-cancel-button { appearance: none; }
.box-search-clear { position: absolute; z-index: 2; top: 50%; right: 5px; display: grid; width: 30px; min-height: 30px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: #edf1ee; box-shadow: none; font-size: 1rem; line-height: 1; transform: translateY(-50%); }
.box-search-clear:hover, .box-search-clear:focus-visible { color: white; background: var(--accent); box-shadow: none; transform: translateY(-50%); }
.box-ai-search { display: grid; min-width: 58px; min-height: 43px; padding: 4px 8px; place-items: center; align-content: center; gap: 0; border-color: #789eb6; color: #285778; background: #edf7fc; box-shadow: none; }
.box-ai-search:hover { transform: none; background: #dceef8; box-shadow: none; }
.box-ai-search:disabled { opacity: .65; }
.box-ai-search span { font-size: .64rem; font-weight: 900; }
.box-ai-search b { font-size: .58rem; }
.box-ai-status { grid-column: 1 / -1; margin: 5px 2px 0; color: var(--muted); font-size: .62rem; }
.box-ai-status[data-source="gemini"] { color: #285778; }
.box-ai-status[data-source="error"] { color: #a45438; }
.box-search-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.box-search-mode > span { grid-column: 1 / -1; color: var(--muted); font-size: .64rem; font-weight: 750; }
.box-search-mode button { min-height: 39px; padding: 6px 9px; border-color: #b9cbc2; color: var(--deep); background: white; box-shadow: none; font-size: .67rem; }
.box-search-mode button:hover { transform: none; box-shadow: none; }
.box-search-mode button[aria-checked="true"] { color: white; border-color: var(--deep); background: var(--deep); }
.box-filter-drawer { position: static; padding: 0; border: 0; }
.box-filter-drawer > summary { display: flex; min-width: 94px; min-height: 39px; padding: 5px 9px; align-items: center; justify-content: center; gap: 6px; border: 1px solid #b9cbc2; border-radius: 6px; color: var(--deep); background: white; font-size: .68rem; list-style: none; }
.box-filter-drawer > summary::-webkit-details-marker { display: none; }
.box-filter-drawer[open] > summary { color: white; border-color: var(--deep); background: var(--deep); }
.box-filter-drawer > summary > span { font-size: .9rem; }
.box-filter-grid { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; display: grid; width: min(650px, calc(100vw - 40px)); padding: 10px; grid-template-columns: repeat(3, minmax(120px, 1fr)) auto; align-items: end; gap: 8px; border: 1px solid #c8d6cf; border-radius: 8px; background: white; box-shadow: 0 14px 34px rgb(20 35 29 / 22%); }
.box-filter-reset { min-height: 39px; padding-inline: 10px; }
.box-sort-control { position: relative; display: block; min-width: 112px; }
.box-sort-control > span { position: absolute; z-index: 1; left: 8px; top: 50%; color: var(--deep); font-size: .85rem; transform: translateY(-50%); pointer-events: none; }
.box-tools .box-sort-control select { width: 100%; min-height: 39px; padding: 6px 24px 6px 23px; border-color: #b9cbc2; color: var(--deep); background-color: white; font-size: .67rem; font-weight: 800; cursor: pointer; }
.box-tools output { display: grid; min-width: 23px; height: 23px; place-items: center; border-radius: 12px; color: white; background: var(--deep); text-align: center; white-space: nowrap; font-size: .58rem; }
.box-tools output b { color: var(--deep); font-size: .9rem; }
.box-tools output b { color: inherit; font-size: inherit; }
.box-search-suggestions { margin: 0 14px 12px; padding: 8px; border: 1px solid #d7dfda; border-radius: 8px; background: #f9fbf9; }
.box-search-suggestions > summary { display: none; }
.box-search-suggestions > nav { display: flex; gap: 4px; margin-bottom: 7px; overflow-x: auto; scrollbar-width: thin; }
.box-search-suggestions > nav button { min-height: 30px; padding: 4px 10px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: .68rem; box-shadow: none; }
.box-search-suggestions > nav button:hover { transform: none; box-shadow: none; background: #e9f0ec; }
.box-search-suggestions > nav button[aria-selected="true"] { color: white; background: var(--deep); }
.suggestion-tiles { display: grid; max-height: 138px; padding: 1px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 5px; overflow-y: auto; }
.suggestion-tiles[hidden] { display: none; }
.suggestion-tiles > button { min-width: 0; min-height: 48px; padding: 5px 7px; justify-content: flex-start; gap: 7px; border-color: #d7dfda; color: var(--ink); background: white; box-shadow: none; }
.suggestion-tiles > button:hover { transform: none; border-color: var(--deep); box-shadow: none; background: #eef5f1; }
.suggestion-tiles > button[aria-pressed="true"] { border-color: var(--deep); color: white; background: var(--deep); }
.suggestion-tiles > button[hidden] { display: none; }
.suggestion-tiles img, .suggestion-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 7px; object-fit: cover; background: #edf0eb; }
.suggestion-icon.species { color: var(--berry); background: #e5f2e9; }
.suggestion-icon.berry { color: white; background: var(--berry); }
.type-icon { --type-color: #728079; display: inline-grid; place-items: center; color: white; background: var(--type-color); font-style: normal; font-weight: 900; }
.type-normal { --type-color: #7f887f; }.type-fire { --type-color: #d9663b; }.type-water { --type-color: #438cc7; }.type-electric { --type-color: #d6a91d; }.type-grass { --type-color: #58a563; }.type-ice { --type-color: #60abbc; }.type-fighting { --type-color: #b64d42; }.type-poison { --type-color: #8d5aa5; }.type-ground { --type-color: #af7d42; }.type-flying { --type-color: #698fc4; }.type-psychic { --type-color: #c45b86; }.type-bug { --type-color: #7d9c3d; }.type-rock { --type-color: #947945; }.type-ghost { --type-color: #665f9d; }.type-dragon { --type-color: #5472a7; }.type-dark { --type-color: #575263; }.type-steel { --type-color: #718b96; }.type-fairy { --type-color: #c76f9a; }
.suggestion-icon.energy { color: #7b4d00; background: #ffe6a8; }
.suggestion-icon.selection { color: white; background: var(--deep); }
.suggestion-icon.healer { color: white; background: #bd687e; }
.suggestion-icon.review { color: white; background: #a87624; }
.suggestion-icon.ingredient { color: #8f5e13; background: #fbefd8; font-size: 1.2rem; }
.suggestion-icon.main-skill, .suggestion-icon.subskill { color: white; background: var(--skill); font-size: .65rem; font-weight: 900; }
.suggestion-icon.subskill { background: var(--violet); }
.skill-suggestion > span:last-child { min-width: 0; }
.skill-suggestion > span:last-child b, .skill-suggestion > span:last-child small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-suggestion > span:last-child small { margin-top: 2px; color: var(--role-color, var(--muted)); font-size: .54rem; font-weight: 800; }
.skill-role, .detail-skill-name, .detail-subskill { --role-color: #71817a; --role-soft: #eef2f0; }
.role-speed { --role-color: #3f8f69; --role-soft: #e7f5ed; }.role-ingredient { --role-color: #c48728; --role-soft: #fbf0dc; }.role-trigger { --role-color: #477eaf; --role-soft: #e6f0f8; }.role-energy { --role-color: #b96d22; --role-soft: #fff0dd; }.role-recovery { --role-color: #b75d78; --role-soft: #f9e8ee; }.role-inventory { --role-color: #6d7680; --role-soft: #edf0f2; }.role-growth { --role-color: #7661a9; --role-soft: #eeeafb; }.role-cooking { --role-color: #b05c42; --role-soft: #faebe5; }.role-support { --role-color: #537b83; --role-soft: #e7f1f2; }
.suggestion-icon.skill-role { color: white; background: var(--role-color); font-size: .82rem; font-weight: 900; }
.suggestion-tiles b { min-width: 0; overflow: hidden; font-size: .69rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-tiles .performance-note { grid-column: 1 / -1; margin: 3px 5px; color: var(--muted); font-size: .63rem; }
.box-search-suggestions > p { margin: 8px; color: var(--muted); font-size: .7rem; text-align: center; }
.selection-rule-summary { margin: 0 14px 12px; padding: 8px 11px; border: 1px solid #cfdad4; border-radius: 7px; background: #fbfcfa; }
.selection-rule-summary summary { color: var(--deep); font-size: .72rem; font-weight: 850; cursor: pointer; }
.selection-rule-summary ul { display: grid; margin: 8px 0 5px; padding-left: 19px; gap: 4px; color: var(--muted); font-size: .67rem; }
.selection-rule-summary small { color: var(--muted); font-size: .62rem; }
.selection-result { display: inline-flex; margin-left: 5px; padding: 3px 7px; border-radius: 999px; font-size: .58rem; font-weight: 850; }
.selection-result.passed { color: #175837; background: #dff2e7; }
.selection-result.review { color: #744d0c; background: #fff0c9; }
.selection-result.failed { color: #785e33; background: #f2ecdf; }
.upgrade-candidate { display: inline-flex; margin-left: 5px; padding: 3px 7px; border: 1px solid #80b89a; border-radius: 999px; color: #135b37; background: #e5f6ec; font-size: .58rem; font-weight: 900; }
.specialty-pr-badge { display: inline-flex; margin-left: 5px; padding: 3px 7px; align-items: center; gap: 2px; border: 1px solid #cbd7d0; border-radius: 999px; color: var(--deep); background: #f1f5f2; font-size: .58rem; font-weight: 850; }
.specialty-pr-badge.high { border-color: #e2b747; color: #6f4d00; background: linear-gradient(135deg, #fff9da, #ffe9a3); box-shadow: 0 2px 7px rgb(174 125 10 / 16%); }
.card-type-badge { display: inline-flex; margin-left: 4px; padding: 3px 7px 3px 4px; align-items: center; gap: 4px; border-radius: 999px; color: white; background: var(--type-color); font-size: .57rem; font-weight: 850; vertical-align: middle; }
.card-type-badge i { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 18%); font-size: .55rem; font-style: normal; }
.specialty-performance-summary { display: grid; margin-top: 9px; padding: 8px 9px; gap: 5px; border: 1px solid #c9dcd2; border-radius: 7px; background: #f3f8f5; }
.specialty-performance-summary.skill { border-color: #c7d9e8; background: #f1f7fb; }
.specialty-performance-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.specialty-performance-heading span b, .specialty-performance-heading span small { display: block; }
.specialty-performance-heading span b { font-size: .67rem; }
.specialty-performance-heading span small { color: var(--muted); font-size: .54rem; }
.specialty-performance-heading > strong { color: var(--deep); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.specialty-performance-summary.skill .specialty-performance-heading > strong { color: #376d99; }
.specialty-performance-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.specialty-performance-facts > span { display: flex; min-width: 0; padding: 5px 6px; align-items: center; justify-content: space-between; gap: 4px; border-radius: 5px; background: white; color: var(--muted); font-size: .55rem; }
.specialty-performance-facts b { overflow: hidden; color: var(--ink); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.specialty-performance-facts .difficulty-ready, .specialty-performance-facts .difficulty-light { color: #26734b; }.specialty-performance-facts .difficulty-medium { color: #9a6a17; }.specialty-performance-facts .difficulty-heavy { color: #a34f3b; }
.specialty-performance-summary > small { color: var(--muted); font-size: .54rem; }
.selection-reasons { color: var(--muted); font-size: .69rem; }
.ingredient-target-meter { display: grid; margin-top: 10px; padding: 8px; gap: 5px; border: 1px solid #ead9b8; border-radius: 7px; background: #fffaf0; }
.ingredient-target-meter > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .65rem; }
.ingredient-target-meter strong { color: #805716; white-space: nowrap; }
.ingredient-target-meter progress { width: 100%; height: 8px; accent-color: var(--ingredient); }
.ingredient-target-meter small { color: var(--muted); font-size: .58rem; }
.ingredient-expected-items { display: flex; flex-wrap: wrap; gap: 4px; }
.ingredient-expected-items span { padding: 3px 6px; border-radius: 999px; color: #694814; background: #f7e8c8; font-size: .59rem; }
.tail-target-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; padding-top: 5px; border-top: 1px solid #ead9b8; font-size: .59rem; }
.tail-target-row progress { grid-column: 1 / -1; }
.tail-target-row small { grid-column: 1 / -1; }
.box-no-results { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--line); border-radius: 7px; text-align: center; }
.box-no-results p { margin: 4px 0 0; color: var(--muted); }
.card, .empty, .backup-panel, .capture-panel { padding: 22px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); box-shadow: 0 7px 18px rgb(44 48 43 / 5%); }
.card.archived { opacity: .7; }
.card-heading, .actions, .backup-panel, .capture-panel, .backup-actions, .backup-actions form, .form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card { position: relative; padding: 14px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--berry), var(--skill)); }
.card:hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgb(44 48 43 / 10%); }
.card-heading { justify-content: flex-start; align-items: center; }
.card-heading > div:not(.creature-portrait) { min-width: 0; }
.card-heading h2 { margin-bottom: 6px; overflow: hidden; font-size: 1.1rem; text-overflow: ellipsis; white-space: nowrap; }
.creature-portrait { flex: 0 0 82px; width: 82px; height: 82px; border: 1px solid var(--line); border-radius: 8px; object-fit: cover; background: #f1eee5; }
.creature-portrait.placeholder { display: grid; place-items: center; color: #a9aaa3; font: 2rem Georgia, serif; }
.card-mobile-actions { display: none; }
.card-details { margin-top: 12px; padding: 0; overflow: hidden; border: 1px solid #d8ded9; border-radius: 8px; background: #fbfcfa; }
.card-details > summary { display: grid; min-height: 42px; padding: 8px 10px; grid-template-columns: 24px auto 1fr; align-items: center; gap: 7px; border: 1px solid #abc2b7; border-radius: 7px; color: var(--deep); background: #f1f7f4; box-shadow: 0 2px 6px rgb(20 35 29 / 7%); cursor: pointer; list-style: none; }
.card-details > summary::-webkit-details-marker { display: none; }
.card-details > summary > .detail-toggle-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; color: white; background: var(--deep); font-size: .9rem; font-weight: 900; }
.card-details > summary > .detail-toggle-icon::before { content: "＋"; }
.card-details[open] > summary > .detail-toggle-icon { color: var(--deep); background: white; }
.card-details[open] > summary > .detail-toggle-icon::before { content: "×"; }
.card-details > summary b { font-size: .75rem; }
.card-details > summary .when-open { display: none; }
.card-details[open] > summary .when-closed { display: none; }
.card-details[open] > summary .when-open { display: inline; }
.card-details > summary small { justify-self: end; color: var(--muted); font-size: .58rem; font-weight: 500; }
.card-details[open] > summary { border-color: var(--deep); color: white; background: var(--deep); }
.card-details[open] > summary small { color: #dce9e3; }
.card-detail-body { display: grid; padding: 8px; gap: 8px; }
.card-detail-subject { display: grid; min-width: 0; padding: 8px; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid #cddbd4; border-radius: 8px; background: linear-gradient(135deg, #edf5f1, white); }
.card-detail-subject > img, .card-detail-subject-placeholder { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #cfd8d2; border-radius: 8px; object-fit: cover; color: #9ea9a3; background: #f7f7f3; font: 1.6rem Georgia, serif; }
.card-detail-subject > div { min-width: 0; }
.card-detail-subject small, .card-detail-subject strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-detail-subject small { color: var(--muted); font-size: .6rem; }
.card-detail-subject strong { margin-top: 1px; font-size: 1rem; }
.card-detail-subject > div > span { display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 999px; color: var(--deep); background: #dcebe3; font-size: .64rem; font-weight: 850; }
.card-detail-lazy { min-height: 64px; padding: 8px; }
.card-detail-loading, .card-detail-load-error { display: flex; min-height: 56px; padding: 10px; align-items: center; justify-content: center; gap: 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: white; font-size: .72rem; }
.card-detail-loading > span { width: 17px; height: 17px; border: 2px solid #c8d8d0; border-top-color: var(--deep); border-radius: 50%; animation: card-detail-spin .7s linear infinite; }
.card-detail-load-error { flex-wrap: wrap; border-color: #ddbaa9; color: #8c4e35; background: #fff7f2; }
.card-detail-load-error button { min-height: 34px; padding: 5px 10px; }
@keyframes card-detail-spin { to { transform: rotate(360deg); } }
.detail-section { min-width: 0; padding: 9px; border: 1px solid #e0e3df; border-radius: 7px; background: white; }
.detail-section h3 { display: flex; margin: 0 0 7px; align-items: center; gap: 5px; color: var(--ink); font-size: .72rem; }
.detail-section h3 > span { color: var(--deep); font-size: .65rem; }
.detail-upgrade-comparison { background: #f8fcf9; }
.detail-upgrade-heading { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.detail-upgrade-heading small { display: block; color: var(--muted); font-size: .52rem; }
.detail-upgrade-heading h3 { margin: 1px 0 0; }
.detail-upgrade-heading > strong { padding: 3px 7px; border-radius: 999px; font-size: .7rem; }
.detail-upgrade-heading > strong.up { color: #165d39; background: #dcf2e5; }
.detail-upgrade-heading > strong.down { color: #8a472f; background: #f7e6df; }
.detail-upgrade-grid { display: grid; margin-top: 7px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 5px; }
.detail-upgrade-grid > div, .detail-upgrade-grid > a { display: grid; min-width: 0; padding: 7px; gap: 3px; border: 1px solid #d9e3dc; border-radius: 6px; color: var(--ink); background: white; text-decoration: none; }
.detail-upgrade-grid > div.current { border-color: #76b18f; background: #eff8f2; }
.detail-upgrade-grid > span { align-self: center; color: var(--muted); font-weight: 900; }
.detail-upgrade-grid small { color: var(--muted); font-size: .5rem; }
.detail-upgrade-grid b { min-width: 0; font-size: .65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-upgrade-grid strong { font-size: .76rem; }
.detail-upgrade-grid a > span { display: flex; min-width: 0; align-items: center; gap: 5px; }
.detail-upgrade-grid img, .detail-upgrade-grid i { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 5px; object-fit: cover; }
.detail-upgrade-grid i { display: grid; place-items: center; background: #f0f2ef; font-style: normal; }
.detail-upgrade-comparison > p { margin: 6px 0 0; color: var(--muted); font-size: .55rem; }
.detail-ingredients h3 > span { color: var(--ingredient); }
.detail-subskills h3 > span { color: var(--skill); }
.detail-facts { display: grid; margin: 0; grid-template-columns: 1fr 1fr; gap: 5px; }
.detail-facts > div { min-width: 0; padding: 6px 7px; border-radius: 5px; background: #f3f5f3; }
.detail-facts .detail-fact-wide { grid-column: 1 / -1; }
.detail-facts dt { font-size: .58rem; }
.detail-facts dd { margin-top: 1px; font-size: .72rem; font-weight: 750; }
.detail-facts dd > span { float: right; padding: 1px 6px; border-radius: 999px; color: var(--deep); background: #dfece5; font-size: .59rem; }
.detail-facts .detail-nature dd { display: flex; margin-top: 3px; align-items: center; justify-content: space-between; gap: 7px; }
.detail-facts .detail-nature dd > strong { font-size: .78rem; }
.detail-facts .nature-effects { display: flex; float: none; padding: 0; flex-wrap: wrap; justify-content: flex-end; gap: 3px; color: inherit; background: transparent; }
.nature-effects em { padding: 3px 6px; border-radius: 999px; font-size: .56rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.nature-effects .up { color: #a04435; background: #f8e2dc; }
.nature-effects .down { color: #315f86; background: #dfeefa; }
.nature-effects .neutral { color: #59645e; background: #e4e8e5; }
.detail-ingredient-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.detail-ingredient { display: grid; min-width: 0; min-height: 72px; padding: 5px 3px; place-items: center; align-content: center; gap: 2px; border: 1px solid #ead9b8; border-radius: 7px; text-align: center; background: #fffaf0; }
.detail-ingredient small { color: #8a641f; font-size: .55rem; font-weight: 850; }
.detail-ingredient-icon { font-size: 1.25rem; line-height: 1; }
.detail-ingredient b { width: 100%; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.detail-ingredient.locked { opacity: .55; filter: grayscale(.7); }
.detail-subskill-grid { display: grid; gap: 5px; }
.detail-subskill { display: grid; min-width: 0; min-height: 42px; padding: 5px 8px; grid-template-columns: 58px 25px minmax(0, 1fr) auto; align-items: center; gap: 6px; border: 2px solid #cfd2d0; border-radius: 7px; background: linear-gradient(#fff, #f7f7f5); box-shadow: inset 4px 0 var(--role-color); }
.detail-subskill.rank-gold { border-color: #d7aa2d; background: linear-gradient(#fff7c9, #ffe99a); }
.detail-subskill.rank-blue { border-color: #69aeda; background: linear-gradient(#eef9ff, #d9f0fc); }
.detail-subskill small { color: var(--muted); font-size: .58rem; font-weight: 850; }
.detail-subskill small span { margin-left: 3px; font-size: .55rem; }
.detail-subskill b { min-width: 0; overflow: hidden; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.detail-subskill > i { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 6px; color: white; background: var(--role-color); font-size: .6rem; font-style: normal; font-weight: 900; }
.detail-subskill > em { padding: 2px 5px; border-radius: 999px; color: var(--role-color); background: var(--role-soft); font-size: .5rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.detail-skill-name { display: inline-flex; min-width: 0; padding: 4px 7px 4px 5px; align-items: center; gap: 5px; border-radius: 6px; color: var(--role-color); background: var(--role-soft); font-weight: 800; }
.detail-skill-name i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 5px; color: white; background: var(--role-color); font-size: .58rem; font-style: normal; }
.detail-skill-name small { color: var(--role-color); font-size: .5rem; }
.detail-subskill.locked { opacity: .58; filter: saturate(.65); }
.coverage-tile .type-icon { width: 26px; height: 26px; border-radius: 7px; font-size: .72rem; }
.detail-callout { padding: 8px 10px; border-left: 4px solid var(--skill); border-radius: 6px; background: #eef4f9; }
.detail-callout.selection { border-left-color: var(--berry); background: #edf6f0; }
.detail-callout.note { border-left-color: var(--ingredient); background: #fff8ea; }
.detail-callout.unavailable { border-left-color: var(--accent); background: #f8ebe5; }
.detail-callout strong { display: block; font-size: .68rem; }
.detail-callout p { margin: 3px 0 0; color: var(--muted); font-size: .63rem; line-height: 1.45; overflow-wrap: anywhere; }
.detail-catalog { margin: 0 2px; color: var(--muted); font-size: .54rem; overflow-wrap: anywhere; }
.detail-more { padding: 0; overflow: hidden; border: 1px solid #d8ded9; border-radius: 6px; background: white; }
.detail-more > summary { display: flex; min-height: 40px; padding: 8px 10px; align-items: center; gap: 7px; color: var(--deep); background: #f5f7f5; font-size: .66rem; list-style: none; }
.detail-more > summary::-webkit-details-marker { display: none; }
.detail-more > summary > span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #abc2b7; border-radius: 5px; background: white; }
.detail-more > summary > span::before { content: "＋"; }
.detail-more[open] > summary > span::before { content: "−"; }
.detail-more > .detail-callout, .detail-more > .detail-catalog { margin: 0 7px 7px; }
.card-detail-close { min-height: 42px; padding: 7px 10px; border-color: #b9cbc2; color: var(--deep); background: white; box-shadow: none; font-size: .7rem; }
.card-detail-close:hover { transform: none; border-color: var(--deep); background: #edf4f0; box-shadow: none; }
.card-detail-backdrop { display: none; }
.compact-card-actions { margin-top: 10px; }
.compact-card-actions .button, .compact-card-actions button { min-height: 36px; padding: 6px 10px; font-size: .82rem; }
.archive-action { display: grid; justify-items: start; gap: 3px; }
.archive-action small { color: var(--muted); font-size: .55rem; }
.level { padding: 4px 9px; border: 1px solid #c9dfd3; border-radius: 999px; color: var(--deep); background: linear-gradient(135deg, #e7f2eb, #dceae4); font-weight: 800; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.facts div { min-width: 0; }
dt { color: var(--muted); font-size: .75rem; }
dd { margin: 0; overflow-wrap: anywhere; }
details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { cursor: pointer; font-weight: 700; }
.unavailable { padding: 10px; border-radius: 4px; background: #f6e8df; overflow-wrap: anywhere; }
.actions { margin-top: 14px; justify-content: flex-start; }
.backup-panel { margin-top: 28px; }
.capture-panel { margin-top: 14px; }
.panel-backup, .panel-catalog, .panel-import, .panel-capture { position: relative; overflow: hidden; border-left-width: 6px; }
.panel-backup { border-left-color: var(--violet); background: linear-gradient(90deg, rgb(117 105 165 / 7%), var(--card) 24%); }
.panel-catalog { border-left-color: var(--skill); background: linear-gradient(90deg, rgb(70 127 174 / 7%), var(--card) 24%); }
.panel-import { border-left-color: var(--ingredient); background: linear-gradient(90deg, rgb(217 154 56 / 8%), var(--card) 24%); }
.panel-capture { border-left-color: var(--berry); background: linear-gradient(90deg, rgb(77 147 100 / 8%), var(--card) 24%); }
.capture-panel p { margin-bottom: 0; color: var(--muted); }
.capture-note { flex: 0 0 auto; text-align: right; }
.status-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--muted); }
.status-dot.ready { background: #3e8b69; box-shadow: 0 0 0 4px rgb(62 139 105 / 14%); }
.backup-actions { flex-wrap: wrap; justify-content: flex-end; }
.file-input input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.form-page { max-width: 760px; }
.form-page.edit-with-source { max-width: none; }
.form-page.wide { max-width: 920px; }
.review-layout main, .review-layout footer { width: min(calc(100% - 32px), 1500px); }
.review-page { width: 100%; }
.back { display: inline-block; margin-bottom: 24px; color: var(--deep); }
.entry-form { margin-top: 28px; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
label { display: grid; gap: 6px; color: var(--muted); font-size: .86rem; font-weight: 700; }
input, select, textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: white; font: inherit; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgb(49 92 80 / 18%); border-color: var(--deep); }
fieldset { margin: 22px 0; padding: 16px; border: 1px solid var(--line); border-radius: 4px; }
legend { padding: 0 6px; font-family: system-ui, sans-serif; font-weight: 700; }
.form-actions { justify-content: flex-end; margin-top: 20px; }
.stacked-actions { display: grid; gap: 8px; flex: 0 0 auto; }
.stacked-actions > *, .stacked-actions button { width: 100%; }
button:disabled { cursor: not-allowed; opacity: .45; }
.button.disabled { cursor: not-allowed; opacity: .38; }
.simulation-layout, .simulation-layout .site-header { width: 100vw; max-width: 100vw; }
.simulation-layout main, .simulation-layout footer { width: min(calc(100vw - 32px), 1280px); }
@media (max-width: 680px) {
  /* The comparison workspace must use the viewport, even after an Android
     browser has retained a stale desktop-width stylesheet. */
  body.simulation-layout main, body.simulation-layout footer {
    width: calc(100vw - 20px);
    max-width: 1280px;
    margin-inline: auto;
  }
}
.simulation-hero, .scenario-panel, .result-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.simulation-hero { margin-bottom: 24px; }
.simulation-hero h1 { max-width: none; font-size: clamp(2rem, 5vw, 3.5rem); }
.simulation-hero p:not(.eyebrow), .result-heading p { color: var(--muted); }
.simulation-form { display: grid; gap: 14px; }
.scenario-panel, .simulation-picker, .simulation-result, .simulation-notes { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); box-shadow: 0 5px 14px rgb(44 48 43 / 5%); }
.scenario-fields { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; align-items: end; }
.input-with-unit { display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid var(--line); border-radius: 4px; background: white; }
.input-with-unit input { border: 0; }
.input-with-unit span { padding-right: 10px; color: var(--muted); font-size: .8rem; }
.check-label { display: flex; min-height: 44px; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: white; }
.check-label input { width: auto; }
.simulation-picker { margin: 0; }
.simulation-picker > summary { display: grid; min-height: 46px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; cursor: pointer; list-style: none; }
.simulation-picker > summary::-webkit-details-marker { display: none; }
.simulation-picker > summary span { color: var(--deep); font-weight: 850; }
.simulation-picker > summary b { padding: 3px 7px; border-radius: 999px; color: var(--deep); background: #e7f2eb; font-size: .7rem; }
.simulation-picker > summary small { grid-column: 1 / -1; color: var(--muted); font-size: .65rem; }
.simulation-picker[open] > summary { margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.picker-confirm { display: flex; justify-content: flex-end; padding-top: 9px; }
.picker-tools { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 8px; margin: 14px 0 10px; }
.picker-tools button { min-height: 38px; }
.simulation-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; max-height: 360px; overflow: auto; }
.simulation-option { display: grid; grid-template-columns: auto 40px 1fr; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: white; cursor: pointer; }
.simulation-option:has(input:checked) { border-color: var(--deep); background: #e8f0eb; }
.simulation-option input { width: auto; }
.simulation-option img, .mini-portrait { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; background: #f1eee5; }
.mini-portrait { display: grid; place-items: center; color: var(--muted); }
.simulation-option span:last-child { min-width: 0; }
.simulation-option strong, .simulation-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simulation-option small { color: var(--muted); font-size: .7rem; }
.simulation-results { display: grid; gap: 10px; margin-top: 30px; }
.simulation-result { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px 20px; }
.result-creature { display: flex; align-items: center; gap: 10px; }
.result-creature img, .result-creature .creature-portrait { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 7px; object-fit: cover; }
.result-creature h3 { margin: 2px 0 8px; line-height: 1.15; }
.simulation-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.simulation-metrics div { padding: 10px; border-radius: 5px; background: #f0eee6; }
.simulation-metrics span, .simulation-metrics small { display: block; color: var(--muted); font-size: .7rem; }
.simulation-metrics strong { display: block; color: var(--deep); font-size: 1.45rem; }
.result-detail { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr .5fr 2fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .8rem; }
.result-detail p, .result-detail ul { margin: 4px 0 0; color: var(--muted); }
.result-detail ul { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; list-style: none; }
.simulation-warnings { grid-column: 1 / -1; margin: 0; padding: 8px 12px 8px 30px; color: #77501b; background: #f7f1df; font-size: .78rem; }
.unavailable-result { opacity: .78; }
.simulation-notes { margin-top: 18px; color: var(--muted); font-size: .82rem; }
.simulation-notes p { margin-bottom: 6px; }

.growth-simulation-layout main { width: min(calc(100% - 32px), 1240px); }
.growth-hero { display: flex; min-height: 52px; padding: 8px 10px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--card); }
.growth-hero .eyebrow, .growth-hero > div > p:not(.eyebrow) { display: none; }
.growth-hero h1 { margin: 0; font-size: 1.2rem; }
.growth-hero p { margin: 0; color: var(--muted); }
.page-tabs { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #f6f8f6; }
.page-tabs a { padding: 7px 11px; border-radius: 5px; color: var(--muted); font-size: .7rem; font-weight: 800; text-decoration: none; }
.page-tabs a.active { color: white; background: var(--deep); }
.growth-controls { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, auto) auto; align-items: end; gap: 7px; padding: 8px 10px 10px; border: 1px solid var(--line); border-radius: 0 0 9px 9px; background: var(--card); }
.growth-controls label { display: grid; align-content: start; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.growth-controls .wide { grid-column: 1 / -1; }
.growth-controls input { min-height: 44px; }
.growth-target-level { display: flex !important; min-height: 44px; align-items: center; gap: 6px; white-space: nowrap; }
.growth-target-level input { width: 62px; min-height: 38px !important; padding-inline: 5px; text-align: center; }
.growth-auto-status { display: inline-flex; align-self: end; min-height: 44px; padding: 0 10px; align-items: center; justify-content: center; gap: 5px; border-radius: 7px; color: #287451; background: #eaf5ee; font-size: .66rem; font-weight: 850; white-space: nowrap; }
.growth-auto-status > span { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: white; background: #419b68; font-size: .58rem; }
.growth-creature-picker { position: relative; min-width: 0; }
.growth-creature-picker > summary { display: grid; min-height: 44px; padding: 6px 11px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid #cbd8d2; border-radius: 7px; color: var(--deep); background: #fbfcfa; cursor: pointer; list-style: none; }
.growth-creature-picker > summary::-webkit-details-marker { display: none; }
.growth-creature-picker > summary span, .growth-creature-picker > summary small { color: var(--muted); font-size: .61rem; }.growth-creature-picker > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.growth-creature-picker > div { position: absolute; z-index: 35; top: calc(100% + 5px); width: min(430px, calc(100vw - 32px)); padding: 8px; border: 1px solid #bfcec6; border-radius: 9px; background: white; box-shadow: 0 16px 34px rgb(24 38 31 / 18%); }
.growth-creature-picker > div > input { width: 100%; min-height: 38px; }
.growth-creature-options { display: grid; max-height: 290px; margin-top: 6px; overflow-y: auto; grid-template-columns: 1fr; gap: 3px; }
.growth-creature-options button { display: grid; min-height: 42px; padding: 6px 9px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 5px; color: var(--ink); background: transparent; text-align: left; box-shadow: none; }
.growth-creature-options button:hover, .growth-creature-options button.selected { border-color: #9cc7af; color: var(--deep); background: #edf7f0; transform: none; }.growth-creature-options button small { color: var(--muted); font-size: .58rem; }
.growth-choice-group { display: grid; align-content: start; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.growth-choice-group > div { display: flex; min-height: 44px; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid #d1ddd6; border-radius: 7px; background: #f8faf8; }
.growth-choice-group button { min-height: 34px; padding: 5px 9px; border: 0; border-radius: 5px; color: #5d6c65; background: transparent; box-shadow: none; font-size: .69rem; font-weight: 800; white-space: nowrap; }
.growth-choice-group button:hover { color: var(--deep); background: #e6f2eb; transform: none; }.growth-choice-group button.selected { color: white; background: var(--deep); }
.grow-evolution > div { flex-wrap: nowrap; overflow-x: auto; }.grow-evolution button { flex: 0 0 auto; }
.number-stepper { display: grid; grid-template-columns: 40px minmax(54px, 1fr) 40px; align-items: stretch; border: 1px solid #cbd8d2; border-radius: 7px; overflow: hidden; background: white; }
.number-stepper input { min-width: 0; min-height: 40px; padding-inline: 4px; border: 0; border-radius: 0; text-align: center; }.number-stepper button { padding: 0; border: 0; border-radius: 0; color: var(--deep); background: #edf5f0; box-shadow: none; font-size: 1.1rem; }
.growth-advanced { grid-column: 1 / -1; padding-top: 0; }
.growth-advanced > summary { display: flex; min-height: 34px; align-items: center; padding: 0 2px; color: var(--deep); font-size: .71rem; font-weight: 750; cursor: pointer; list-style: none; }
.growth-advanced > summary::before { content: "+"; display: inline-grid; width: 22px; height: 22px; margin-right: 7px; place-items: center; border-radius: 50%; color: white; background: var(--deep); font-size: 1rem; }
.growth-advanced[open] > summary::before { content: "−"; }
.growth-advanced > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 8px; }
.growth-event-picker { padding: 0; border: 1px solid #d1ddd6; border-radius: 7px; background: #f8faf8; }
.growth-event-picker summary { display: flex; min-height: 44px; padding: 0 10px; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }.growth-event-picker summary::-webkit-details-marker { display: none; }.growth-event-picker summary b { overflow: hidden; color: var(--deep); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.growth-event-picker > div { display: flex; max-height: 230px; padding: 6px; overflow-y: auto; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--line); }.growth-event-picker strong { width: 100%; margin-top: 2px; color: var(--muted); font-size: .6rem; }.growth-event-picker button { min-height: 32px; padding: 4px 7px; border: 1px solid #ccd9d2; border-radius: 5px; color: #5d6c65; background: white; box-shadow: none; font-size: .62rem; }.growth-event-picker button.selected { color: white; border-color: var(--deep); background: var(--deep); }
.growth-summary { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.2fr) auto; align-items: center; gap: 14px; margin-top: 10px; padding: 10px; border: 1px solid #b7d4c5; border-radius: 9px; background: #edf7f0; }
.growth-before { display: grid; gap: 1px; padding: 8px 10px; border-radius: 6px; color: #7b8580; background: rgb(255 255 255 / 54%); }
.growth-before span, .growth-before small { font-size: .64rem; }.growth-before b { font-size: .78rem; font-weight: 750; }
.growth-identity { display: flex; align-items: center; gap: 12px; }
.growth-identity img, .growth-placeholder { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; background: white; }
.growth-placeholder { display: grid; place-items: center; font-size: 2rem; }
.growth-identity h2, .growth-identity p { margin: 0; }
.growth-identity h2 { color: var(--deep); }
.growth-identity small { color: #287451; font-size: .66rem; font-weight: 850; }.growth-identity p { color: var(--muted); font-size: .68rem; }
.growth-gain { display: grid; justify-items: end; }
.growth-gain strong { color: var(--deep); font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1; }
.growth-gain span { color: #287451; font-weight: 800; }
.growth-view-tabs { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; border-bottom: 1px solid var(--line); background: var(--card); }
.growth-view-tabs button { min-height: 44px; display: grid; place-items: center; padding: 0 6px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--muted); background: transparent; box-shadow: none; font-weight: 800; }
.growth-view-tabs button:hover, .growth-view-tabs button:focus-visible { color: var(--deep); background: #f3f7f4; transform: none; box-shadow: none; }
.growth-view-tabs button.active { border-bottom-color: #4789c6; color: #246fad; }
.growth-dashboard { display: grid; grid-template-columns: minmax(205px, .86fr) minmax(0, 1.14fr); margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); overflow: hidden; }
.growth-score-rail { display: grid; align-content: start; border-right: 1px solid var(--line); }
.rail-total { display: grid; gap: 2px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #f2f8f3; }
.rail-total span, .rail-total small { color: var(--muted); font-size: .72rem; }
.rail-total strong { color: var(--deep); font-size: clamp(1.55rem, 4vw, 2.3rem); line-height: 1.05; }
.rail-metric { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: baseline; gap: 2px 8px; padding: 7px 16px; border-bottom: 1px solid var(--line); }
.rail-metric:last-child { border-bottom: 0; }
.rail-metric > span { grid-row: span 2; display: inline-grid; min-height: 26px; place-items: center; border-radius: 999px; color: white; font-size: .7rem; font-weight: 800; }
.rail-metric.berry > span { background: #42bd6d; }
.rail-metric.ingredient > span { background: #d99a38; }
.rail-metric.skill > span { background: #4b94df; }
.rail-metric small { color: var(--muted); font-size: .72rem; }
.rail-metric strong { color: var(--ink); font-size: 1.15rem; line-height: 1.1; }
.rail-metric strong small { display: inline; margin-right: 4px; color: var(--muted); font-size: .58rem; font-weight: 800; }
.ingredient-yields { color: var(--ink); font-weight: 800; white-space: nowrap; }
.ingredient-yields b { font-weight: 800; }
.rail-metric em { color: var(--muted); font-style: normal; font-size: .65rem; }
.growth-radar { display: grid; align-content: center; justify-items: center; margin: 0; padding: 10px 12px 8px; }
.radar-mode-tabs { display: flex; width: min(100%, 240px); margin-bottom: 3px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: #f6f8f6; }
.radar-mode-tabs button { flex: 1; min-height: 27px; padding: 3px 7px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .65rem; font-weight: 800; }
.radar-mode-tabs button.active { background: var(--deep); color: white; }
.growth-radar svg { width: min(100%, 290px); overflow: visible; }
.growth-radar .radar-grid { fill: #f7f9f8; stroke: #cbd4cf; stroke-width: 1; }
.growth-radar .radar-grid.inner { fill: none; stroke: #dfe6e2; }
.growth-radar line { stroke: #cbd4cf; stroke-width: .8; }
.growth-radar text { fill: #64736b; font-size: 8px; font-weight: 700; }
.radar-current { fill: rgb(86 142 195 / 18%); stroke: #5d8fb7; stroke-width: 2; }
.radar-target { fill: rgb(67 174 105 / 22%); stroke: #42a768; stroke-width: 2; }
.growth-radar figcaption { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 10px; color: var(--muted); font-size: .68rem; }
.growth-radar figcaption b { color: var(--deep); }
.radar-reference { color: var(--muted); font-size: .6rem; text-align: center; }
.radar-dot { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 50%; }
.radar-dot.current { background: #5d8fb7; }.radar-dot.target { background: #42a768; }
.growth-tab-panel { margin-top: 10px; }
.growth-section { overflow: hidden; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.growth-panel-heading, .growth-section > .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.growth-panel-heading h2, .growth-section .section-heading h2 { margin: 0; font-size: 1rem; }
.growth-panel-heading p, .growth-section .section-heading p { margin: 0; color: var(--muted); font-size: .72rem; }
.growth-section > .energy-comparison { margin-top: 0; }
.growth-skill-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.growth-skill-stage { padding: 9px; border: 1px solid #cad7d0; border-radius: 7px; background: #fafcfb; }.growth-skill-stage.target { border-color: #8fc5a4; background: #eff8f1; }
.growth-skill-stage > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }.growth-skill-stage > header span { color: var(--muted); font-size: .62rem; }.growth-skill-stage > header strong { color: var(--deep); font-size: .76rem; }
.growth-main-skill { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px; border-radius: 6px; background: var(--role-soft); }.growth-main-skill > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: white; background: var(--role-color); font-weight: 900; }.growth-main-skill small, .growth-main-skill b, .growth-main-skill em { display: block; }.growth-main-skill small { color: var(--muted); font-size: .56rem; }.growth-main-skill b { overflow: hidden; margin: 1px 0; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.growth-main-skill em { color: var(--role-color); font-size: .55rem; font-style: normal; font-weight: 800; }
.growth-performance-facts { display: grid; margin: 6px 0; grid-template-columns: 1fr 1fr; gap: 3px; }.growth-performance-facts > div { min-width: 0; padding: 5px; border-radius: 4px; background: white; }.growth-performance-facts dt { color: var(--muted); font-size: .49rem; }.growth-performance-facts dd { overflow: hidden; margin: 2px 0 0; color: var(--ink); font-size: .62rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.growth-performance-facts dd > span { margin-right: 2px; color: var(--role-color); }.growth-performance-facts dd small { margin-left: 3px; color: #8c6543; font-size: .48rem; }
.growth-ingredients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }.growth-ingredients > span { display: grid; min-width: 0; padding: 4px 2px; border: 1px solid #ead8b5; border-radius: 4px; background: #fffaf0; color: #75551b; font-size: .5rem; font-weight: 800; text-align: center; }.growth-ingredients small { color: #9a7a46; font-size: .44rem; }.growth-ingredients b { font-size: .9rem; line-height: 1; }.growth-ingredients > span.locked { opacity: .4; filter: grayscale(.75); }
.growth-subskills { display: grid; margin-top: 6px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }.growth-subskills > div { min-width: 0; padding: 5px 3px; border: 1px solid #dde2df; border-radius: 4px; background: white; text-align: center; }.growth-subskills > div.rank-gold { border-color: #ddbf62; background: #fff8da; }.growth-subskills > div.rank-blue { border-color: #9ac0d9; background: #edf8ff; }.growth-subskills > div.locked { opacity: .42; filter: grayscale(.8); }.growth-subskills span, .growth-subskills b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.growth-subskills span { color: var(--muted); font-size: .47rem; }.growth-subskills b { margin-top: 2px; font-size: .51rem; }
.energy-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.energy-stage { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.energy-stage.target { border-color: #72aa8a; box-shadow: inset 4px 0 #4f936d; }
.energy-stage > header { display: flex; justify-content: space-between; gap: 10px; }
.energy-stage > header span { color: var(--muted); font-weight: 700; }
.energy-total { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 12px; }
.energy-total small { color: var(--muted); }
.energy-total strong { color: var(--deep); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; }
.energy-total span { color: var(--muted); }
.energy-range { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.energy-range > div, .energy-breakdown > div, .resource-grid > div { padding: 10px; border-radius: 7px; background: #f2f4ef; }
.energy-range span, .energy-range b, .energy-breakdown dt, .energy-breakdown dd, .resource-grid span, .resource-grid strong, .resource-grid small { display: block; }
.energy-range span, .energy-breakdown dt, .resource-grid span, .resource-grid small { color: var(--muted); font-size: .72rem; }
.energy-range b { margin-top: 3px; color: var(--ink); }
.energy-breakdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 8px 0 0; }
.energy-breakdown dd { margin: 3px 0 0; color: var(--deep); font-weight: 800; }
.energy-breakdown-nitoyon { grid-template-columns: repeat(3, 1fr); }
.energy-breakdown-nitoyon small { display: block; margin-top: 3px; color: var(--muted); font-size: .67rem; line-height: 1.35; }
.resource-panel { margin-top: 10px; }
.selected-event { margin-top: 10px; padding: 0; border: 1px solid #9dc9ad; border-left: 5px solid #4f936d; border-radius: 9px; background: #eff8f1; }
.selected-event.not-applies { border-color: #d8c48e; border-left-color: #b88c34; background: #fff9e9; }
.selected-event summary { display: flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; list-style: none; }
.selected-event summary span { padding: 3px 6px; border-radius: 5px; color: #266a49; background: #dfece3; font-size: .7rem; font-weight: 800; }
.selected-event.not-applies summary span { color: #76551c; background: #f3e8c8; }
.selected-event-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 12px 12px; }
.selected-event strong, .selected-event p { display: block; margin: 0; }
.selected-event p { color: var(--muted); font-size: .78rem; }
.selected-event ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.selected-event li { padding: 4px 7px; border-radius: 5px; background: #dfece3; color: var(--deep); font-size: .76rem; }
.selected-event.not-applies li { background: #f3e8c8; }
.selected-event a { color: var(--deep); font-size: .78rem; font-weight: 750; white-space: nowrap; }
.resource-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.resource-grid strong { margin: 3px 0; color: var(--deep); font-size: 1.25rem; }
.resource-options { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.resource-options > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }.resource-options > header strong { color: var(--deep); font-size: .78rem; }.resource-options > header small { color: var(--muted); font-size: .62rem; }
.resource-options > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }.resource-options article { min-width: 0; padding: 7px; border: 1px solid #d9e2dc; border-radius: 6px; background: #f8faf8; }.resource-options article.selected { border-color: #67a682; background: #ecf7ef; box-shadow: inset 3px 0 #4f936d; }.resource-options span, .resource-options b, .resource-options small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.resource-options span, .resource-options small { color: var(--muted); font-size: .57rem; }.resource-options b { margin: 3px 0; color: var(--deep); font-size: .86rem; }
.catalog-research-note { margin-bottom: 5px; }.catalog-research-sources { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }.catalog-research-sources li { display: inline-flex; gap: 4px; align-items: baseline; font-size: .65rem; }.catalog-research-sources span { color: var(--muted); }

@media (max-width: 760px) {
  .growth-simulation-layout main { width: min(calc(100% - 20px), 1240px); }
  .growth-hero { min-height: 48px; padding: 6px 8px; }
  .growth-hero h1 { font-size: 1rem; }
  .page-tabs { width: auto; text-align: center; }
  .page-tabs a { padding: 7px 8px; font-size: .63rem; }
  .growth-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 7px 8px 8px; }
  .growth-creature-picker { grid-column: auto; }
  .growth-advanced { grid-column: 1 / -1; }
  .growth-creature-picker > div { position: fixed; z-index: 156; top: 62px; right: 8px; bottom: 8px; left: 8px; width: auto; padding: 12px; box-shadow: 0 0 0 100vmax rgb(12 26 45 / 38%); }
  .growth-creature-options { max-height: calc(100dvh - 160px); }
  .grow-evolution { grid-column: 1 / -1; }
  .growth-target-level { min-width: 0; }
  .growth-target-level input { min-width: 0; padding-inline: 6px; text-align: center; }
  .growth-auto-status { display: none; }
  .grow-evolution > span { display: none; }
  .grow-evolution > div { min-height: 40px; }
  .grow-evolution button { min-height: 32px; }
  .growth-advanced > div { grid-template-columns: 1fr 1fr; }
  .growth-summary { grid-template-columns: 1fr auto; align-items: center; gap: 7px; }
  .growth-before { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 8px; }
  .growth-before span, .growth-before b, .growth-before small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .growth-before span { font-size: .58rem; }.growth-before b { font-size: .68rem; }.growth-before small { font-size: .58rem; }
  .growth-gain { grid-template-columns: 1fr auto; align-items: end; justify-items: start; }
  .growth-gain small { grid-column: 1 / -1; }
  .energy-comparison { grid-template-columns: 1fr; }
  .growth-view-tabs { grid-template-columns: repeat(3, 1fr); }
  .growth-skill-stages { grid-template-columns: 1fr; }
  .growth-dashboard { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
  .growth-score-rail { border-right: 1px solid var(--line); border-bottom: 0; }
  .rail-total { padding: 10px; }
  .rail-metric { grid-template-columns: 52px minmax(0, 1fr); padding: 6px 10px; }
  .rail-metric > span { min-height: 24px; font-size: .65rem; }
  .rail-metric strong { font-size: 1rem; }
  .growth-radar { padding: 6px 4px; }
  .growth-radar figcaption { gap: 3px 6px; font-size: .6rem; }
  .selected-event-details { grid-template-columns: 1fr; gap: 8px; }
  .energy-range { grid-template-columns: 1fr; }
  .energy-breakdown { grid-template-columns: 1fr 1fr; }
  .resource-grid { grid-template-columns: 1fr 1fr; }
  .resource-options > div { grid-template-columns: 1fr 1fr; }
}
.calculator-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.calculator-header h1 { margin-bottom: 4px; }
.calculator-header p { margin: 0; color: var(--muted); }
.scenario-panel, .simulation-picker, .simulation-notes { box-shadow: none; }
.scenario-panel { align-items: center; padding: 14px; }
.scenario-panel h2 { margin: 0; font-size: 1rem; white-space: nowrap; }
.comparison-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 5px; background: white; }
.comparison-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.comparison-table th, .comparison-table td { min-width: 170px; max-width: 220px; padding: 9px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table th:last-child, .comparison-table td:last-child { border-right: 0; }
.comparison-table thead th { position: sticky; top: 0; z-index: 2; background: #eef2ef; }
.comparison-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 145px; max-width: 145px; color: var(--muted); background: #f7f7f4; }
.comparison-table thead th:first-child { z-index: 3; background: #e7ece9; }
.comparison-table tbody tr:nth-child(even) td { background: #fbfbf9; }
.comparison-table .key-metric td { color: var(--deep); background: #f1f6f3; }
.comparison-table td > strong { font-size: 1.12rem; }
.comparison-table td > small { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; }
.comparison-creature { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px; }
.comparison-creature img, .comparison-creature .mini-portrait { width: 38px; height: 38px; }
.comparison-creature strong, .comparison-creature small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comparison-creature small { color: var(--muted); font-size: .68rem; font-weight: 400; }
.ingredient-breakdown span { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.subskill-summary, .warning-summary { color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.warning-summary { color: #77501b; }
.result-ok { color: #2d7255; font-weight: 700; }
.result-error { color: #9b4b36; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.workbench-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.workbench-header h1 { margin: 2px 0; font-size: 2rem; }
.workbench-header p:not(.eyebrow) { margin: 0; color: var(--muted); }
.calculator-header, .workbench-header, .evaluation-header, .team-header { position: relative; padding: 12px 14px; overflow: hidden; border: 1px solid #2b3a53; border-radius: 9px; color: white; background: #111b2e; box-shadow: 0 5px 14px rgb(13 24 42 / 10%); }
/* Page titles are navigation landmarks, not large decorative banners. */
.calculator-header::after, .workbench-header::after, .evaluation-header::after, .team-header::after { display: none; }
.calculator-header > *, .workbench-header > *, .evaluation-header > *, .team-header > * { position: relative; z-index: 1; }
.calculator-header h1, .workbench-header h1, .evaluation-header h1, .team-header h1 { color: white; }
.calculator-header p, .workbench-header p:not(.eyebrow), .evaluation-header p:not(.eyebrow), .team-header p:not(.eyebrow) { color: #aebbd0; }
.calculator-header .eyebrow, .workbench-header .eyebrow, .evaluation-header .eyebrow, .team-header .eyebrow { color: #72c9ea; }
.calculator-header .button, .workbench-header .button, .evaluation-header .button, .team-header .button { border-color: #72829a; color: white; background: #1a2941; }
.calculator-header .button:hover, .workbench-header .button:hover, .evaluation-header .button:hover, .team-header .button:hover { border-color: #91a8c6; background: #233650; }
.evaluation-header .button.primary { border-color: #4e9d71; background: #347b59; }
.evaluation-header .back { color: #a7d9c0; }
.workbench-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.workbench-status > span { padding: 6px 10px; border: 1px solid #3b4c66; border-radius: 4px; background: #19263b; color: #b8c5d8; font-size: .78rem; }
.workbench { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.user-switch { display: flex; gap: 5px; margin: -4px 0 8px; }
.user-switch a { min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: .72rem; font-weight: 750; text-decoration: none; }
.user-switch a.selected { border-color: var(--deep); color: white; background: var(--deep); }
.workbench-header, .condition-rail, .analysis-stage { width: 100%; min-width: 0; }
.condition-rail { position: static; top: auto; display: grid; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.comparison-conditions { border: 0; }
.comparison-conditions > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--deep); font-size: .78rem; font-weight: 800; }
.comparison-conditions > summary small { color: var(--muted); font-size: .66rem; font-weight: 500; }
.comparison-conditions[open] > summary { margin-bottom: 10px; }
.rail-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rail-heading > div, .section-heading > div { display: flex; align-items: center; gap: 9px; }
.rail-heading h2, .section-heading h2 { margin: 0; font-size: 1rem; }
.rail-heading > div > span, .section-heading > div > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 5px; color: white; background: var(--deep); font-size: .82rem; font-weight: 800; }
.rail-heading small, .section-heading p { margin: 0; color: var(--muted); font-size: .72rem; }
.primary-conditions { display: grid; gap: 10px; }
.comparison-presets { display: flex; align-items: stretch; gap: 7px; margin-top: 10px; }
.comparison-presets button { min-height: 38px; padding: 6px 10px; color: var(--deep); background: #f6f8f5; box-shadow: none; font-size: .7rem; }
.comparison-presets button:first-child { display: grid; flex: 1 1 auto; gap: 1px; text-align: left; }
.comparison-presets button strong, .comparison-presets button small { display: block; }
.comparison-presets button small { color: var(--muted); font-weight: 500; }
.comparison-presets button.selected { border-color: var(--deep); color: white; background: var(--deep); }
.comparison-presets button.selected small { color: #d6e7dc; }
.advanced-conditions { padding: 0; border-bottom: 0; }
.advanced-conditions summary { padding: 10px 0; color: var(--deep); font-size: .82rem; }
.advanced-conditions > div { display: grid; gap: 10px; padding-top: 5px; }
.rail-submit { width: 100%; gap: 7px; }
.rail-note { margin: -5px 0 0; color: var(--muted); font-size: .68rem; text-align: center; }
.analysis-stage { display: grid; gap: 12px; min-width: 0; }
.focus-panel, .selection-panel, .comparison-section { padding: 15px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.focus-panel { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(360px, 1.3fr); align-items: center; gap: 18px; }
.focus-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: #f7f8f5; }
.focus-tabs button { min-height: 44px; padding: 6px 5px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; box-shadow: none; font-size: .67rem; }
.focus-tabs button .icon { display: block; width: 17px; height: 17px; margin: 0 auto 2px; }
.focus-tabs button:hover, .focus-tabs button:focus-visible { color: var(--deep); background: #e8f0eb; transform: none; }
.focus-tabs button[aria-selected="true"] { color: white; background: var(--deep); }
.focus-tabs[data-focus-current="berry"] button[aria-selected="true"] { background: var(--berry); }.focus-tabs[data-focus-current="ingredient"] button[aria-selected="true"] { background: var(--ingredient); }.focus-tabs[data-focus-current="skill"] button[aria-selected="true"] { background: var(--skill); }
.compare-autopick { display: grid; padding: 10px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid #c7d9cf; border-radius: 7px; background: #f3f8f4; }
.compare-autopick label { display: inline-flex; align-items: center; gap: 5px; color: var(--deep); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.compare-autopick input { min-width: 0; min-height: 38px; }
.compare-autopick button { min-height: 38px; padding-inline: 10px; white-space: nowrap; }
.compare-autopick-note { grid-column: 2 / -1; color: var(--muted); font-size: .66rem; }
.selection-tray { display: flex; gap: 7px; min-height: 64px; margin-top: 12px; padding-bottom: 4px; overflow-x: auto; }
.box-drawer { padding: 0; overflow: hidden; }
.box-drawer > summary { display: flex; min-height: 60px; padding: 12px 15px; align-items: center; justify-content: space-between; gap: 14px; color: var(--ink); cursor: pointer; list-style: none; }
.box-drawer > summary::-webkit-details-marker { display: none; }
.box-drawer > summary::after { content: "⌄"; flex: 0 0 auto; color: var(--deep); font-size: 1.3rem; line-height: 1; transition: transform .15s ease; }
.box-drawer[open] > summary::after { transform: rotate(180deg); }
.drawer-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.drawer-heading > span:first-child { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 5px; color: white; background: var(--deep); }
.drawer-heading b, .drawer-heading small { display: block; }
.drawer-heading small { margin-top: 2px; color: var(--muted); font-size: .68rem; font-weight: 400; }
.drawer-count { margin-left: auto; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.drawer-count b { color: var(--deep); font-size: 1rem; }
.box-drawer > .selection-tray, .box-drawer > .box-picker { margin-inline: 15px; }
.box-drawer > .selection-tray { border-top: 1px solid var(--line); }
.box-drawer > .box-picker { padding-bottom: 14px; }
.tray-empty { align-self: center; margin: 0; color: var(--muted); font-size: .8rem; }
.tray-chip { position: relative; display: grid; flex: 0 0 205px; grid-template-columns: 42px minmax(0, 1fr) 24px; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 5px; background: white; }
.tray-chip img, .tray-chip .mini-portrait { width: 42px; height: 42px; }
.tray-chip > span:nth-child(2) { min-width: 0; }
.tray-chip strong, .tray-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-chip small { color: var(--muted); font-size: .68rem; }
.tray-remove { min-height: 26px; width: 26px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 1.15rem; }
.box-picker { margin-top: 8px; padding: 8px 0 0; border-bottom: 0; }
.box-picker summary { color: var(--deep); font-size: .82rem; }
.box-picker summary .icon { margin-right: 6px; }
.comparison-section .section-heading { margin-bottom: 12px; }
.comparison-snapshot { display: grid; grid-template-columns: minmax(120px, .7fr) repeat(3, minmax(145px, 1fr)); margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: white; }
.comparison-snapshot > div { display: grid; min-height: 92px; padding: 10px 13px; align-content: center; border-right: 1px solid var(--line); }
.comparison-snapshot > div:last-child { border-right: 0; }
.comparison-snapshot .snapshot-intro { background: #eef2ef; }
.snapshot-intro small, .snapshot-intro span, .comparison-snapshot > div > small { color: var(--muted); font-size: .68rem; }
.snapshot-intro strong { color: var(--deep); font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.comparison-snapshot > div > strong { margin-top: 4px; color: var(--ink); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.comparison-snapshot > div > strong i { margin-left: 2px; color: var(--muted); font-size: .68rem; font-style: normal; font-weight: 500; }
.metric-badge { display: inline-flex; width: fit-content; padding: 3px 8px; align-items: center; gap: 4px; border-radius: 999px; color: white; font-size: .68rem; font-weight: 800; }
.metric-badge.berry { background: #4d9364; }
.metric-badge.energy { background: #466e96; }
.metric-badge.ingredient { background: #d99a38; }
.metric-badge.skill { background: #467fae; }
.workbench[data-focus="energy"] .comparison-snapshot [data-metric="energy"], .workbench[data-focus="berry"] .comparison-snapshot [data-metric="berry"], .workbench[data-focus="ingredient"] .comparison-snapshot [data-metric="ingredient"], .workbench[data-focus="skill"] .comparison-snapshot [data-metric="skill"] { background: #edf5f0; box-shadow: inset 0 3px var(--deep); }
.comparison-guide { display: flex; gap: 10px; margin-bottom: 8px; padding: 8px 10px; border-left: 4px solid var(--deep); background: #edf2ef; font-size: .76rem; }
.comparison-guide b { flex: 0 0 auto; color: var(--deep); }
.comparison-guide span { color: var(--muted); }
.workbench-table .metric-group th { position: static; min-width: 0; max-width: none; padding: 5px 10px; color: var(--ink); background: #e4e5df; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.workbench-table tr[data-metric] td, .workbench-table tr[data-metric] th { transition: background-color .15s ease, box-shadow .15s ease; }
.workbench[data-focus="overview"] tr[data-metric="overview"] td,
.workbench[data-focus="berry"] tr[data-metric="berry"] td,
.workbench[data-focus="ingredient"] tr[data-metric="ingredient"] td,
.workbench[data-focus="skill"] tr[data-metric="skill"] td { color: var(--deep); background: #eaf3ee; box-shadow: inset 0 1px #c7ddd1, inset 0 -1px #c7ddd1; }
.workbench[data-focus="overview"] tr[data-metric="overview"] th,
.workbench[data-focus="berry"] tr[data-metric="berry"] th,
.workbench[data-focus="ingredient"] tr[data-metric="ingredient"] th,
.workbench[data-focus="skill"] tr[data-metric="skill"] th { color: var(--deep); background: #ddebe3; box-shadow: inset 4px 0 var(--deep); }
.overview-table { width: 100%; min-width: 790px; border-collapse: separate; border-spacing: 0; font-size: .78rem; }
.overview-table th, .overview-table td { height: 54px; padding: 7px 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; white-space: nowrap; }
.overview-table thead th { position: sticky; top: 0; z-index: 2; height: 38px; color: var(--muted); background: #ecefeccf; backdrop-filter: blur(6px); font-size: .68rem; font-weight: 800; }
.overview-table thead th .icon { display: block; width: 15px; height: 15px; margin: 0 auto 2px; color: var(--deep); }
.overview-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 185px; text-align: left; background: #faf9f5; }
.overview-table thead th:first-child { z-index: 3; background: #e7ebe8; }
.overview-table th:first-child .icon { display: inline-block; margin: 0 5px 0 0; }
.overview-table th:last-child, .overview-table td:last-child { width: 40px; border-right: 0; text-align: center; }
.overview-table tbody tr:last-child th, .overview-table tbody tr:last-child td { border-bottom: 0; }
.overview-table tbody tr:hover th, .overview-table tbody tr:hover td { background: #f0f5f2; }
.overview-table td strong { display: block; color: var(--ink); font-size: .96rem; font-variant-numeric: tabular-nums; }
.overview-table td small { display: block; color: var(--muted); font-size: .62rem; }
.overview-creature { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px; }
.overview-creature img, .overview-creature .mini-portrait { width: 38px; height: 38px; border-radius: 5px; object-fit: cover; }
.overview-creature > span:last-child { min-width: 0; }
.overview-creature strong, .overview-creature small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-creature small { color: var(--muted); font-size: .65rem; font-weight: 400; }
.row-detail-link { display: inline-grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 4px; color: var(--deep); background: white; text-decoration: none; }
.row-detail-link:hover, .row-detail-link:focus { border-color: var(--deep); background: #e4eee8; }
.unavailable-row { opacity: .72; }
.workbench[data-focus="overview"] .overview-table [data-metric="overview"],
.workbench[data-focus="energy"] .overview-table [data-metric="energy"],
.workbench[data-focus="berry"] .overview-table [data-metric="berry"],
.workbench[data-focus="ingredient"] .overview-table [data-metric="ingredient"],
.workbench[data-focus="skill"] .overview-table [data-metric="skill"] { color: var(--deep); background: #e4f0e9; box-shadow: inset 0 2px #5b8d76; }
.workbench[data-focus="overview"] .overview-table tbody [data-metric="overview"],
.workbench[data-focus="energy"] .overview-table tbody [data-metric="energy"],
.workbench[data-focus="berry"] .overview-table tbody [data-metric="berry"],
.workbench[data-focus="ingredient"] .overview-table tbody [data-metric="ingredient"],
.workbench[data-focus="skill"] .overview-table tbody [data-metric="skill"] { box-shadow: inset 0 1px #c3dacd; }
.result-evidence details:target { border-color: var(--deep); box-shadow: 0 0 0 3px rgb(49 92 80 / 14%); }
.result-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.result-evidence details { padding: 9px 10px; border: 1px solid var(--line); border-radius: 4px; background: #faf9f5; }
.result-evidence summary { font-size: .78rem; }
.result-evidence dl { display: grid; gap: 6px; margin: 10px 0 0; }
.result-evidence dl div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.result-evidence dd { font-size: .78rem; }
.result-evidence .simulation-warnings { margin-top: 8px; }
.empty-comparison { display: grid; gap: 4px; place-items: center; min-height: 150px; border: 1px dashed var(--line); border-radius: 5px; color: var(--muted); text-align: center; }
.empty-comparison strong { color: var(--ink); }
.simulation-notes { margin-top: 0; }
.evaluation-layout main, .evaluation-layout footer { width: min(calc(100% - 32px), 1080px); }
.evaluation-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.evaluation-header .back { margin: 0 0 8px; }
.evaluation-header h1 { margin: 2px 0 4px; font-size: 2rem; }
.evaluation-header p:not(.eyebrow) { margin: 0; color: #aebbd0; }
.evaluation-header-actions { display: flex; gap: 8px; }
.evaluation-subject { display: grid; grid-template-columns: 58px minmax(180px, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.evaluation-subject > img, .evaluation-subject > .creature-portrait { width: 58px; height: 58px; object-fit: cover; }
.evaluation-subject > div strong, .evaluation-subject > div span { display: block; }
.evaluation-subject > div span { color: var(--muted); font-size: .78rem; }
.evaluation-level { display: flex; align-items: end; gap: 7px; }
.evaluation-level label { width: 95px; }
.evaluation-level input { padding-block: 7px; }
.evaluation-level button { min-height: 38px; padding-block: 6px; }
.evaluation-preview-menu { position: relative; }
.evaluation-preview-menu > summary { display: flex; min-height: 38px; padding: 6px 9px; align-items: center; gap: 7px; border: 1px solid #b9cbc2; border-radius: 6px; color: var(--deep); background: #f7faf8; cursor: pointer; font-size: .7rem; font-weight: 800; list-style: none; }
.evaluation-preview-menu > summary::-webkit-details-marker { display: none; }
.evaluation-preview-menu > summary > span { font-size: 1rem; transition: transform .15s ease; }
.evaluation-preview-menu[open] > summary { border-color: var(--deep); color: white; background: var(--deep); }
.evaluation-preview-menu[open] > summary > span { transform: rotate(180deg); }
.evaluation-preview-menu > div { position: absolute; z-index: 35; top: calc(100% + 6px); right: 0; display: grid; width: min(350px, calc(100vw - 34px)); gap: 10px; padding: 11px; border: 1px solid #b9cbc2; border-radius: 8px; background: white; box-shadow: 0 14px 32px rgb(20 35 29 / 20%); }
.evaluation-preview-menu section { display: grid; gap: 5px; }
.evaluation-preview-menu section > b { color: var(--muted); font-size: .67rem; }
.evaluation-preview-menu section > small { color: #8d5e2c; font-size: .63rem; }
.preview-choice-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.preview-choice-buttons button { min-height: 32px; padding: 4px 8px; border-color: #bfd0c6; color: var(--deep); background: #f8faf8; box-shadow: none; font-size: .66rem; }
.preview-choice-buttons button.selected { border-color: var(--deep); color: white; background: var(--deep); }
.preview-pr-delta { display: block; margin-top: 6px; color: var(--deep); font-size: .64rem; font-weight: 800; }
.evaluation-objectives { display: grid; grid-template-columns: repeat(3, 1fr); margin: 10px 0; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.evaluation-objectives > a { display: flex; min-height: 42px; padding: 7px 10px; align-items: center; justify-content: center; gap: 6px; border-radius: 5px; color: var(--muted); background: transparent; font-size: .76rem; font-weight: 800; text-decoration: none; }
.evaluation-objectives > a > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: white; background: #84958c; font-size: .6rem; }
.evaluation-objectives > a:nth-child(1) > span { background: var(--berry); }.evaluation-objectives > a:nth-child(2) > span { background: var(--ingredient); }.evaluation-objectives > a:nth-child(3) > span { background: var(--skill); }
.evaluation-objectives > a:hover, .evaluation-objectives > a:focus-visible { color: var(--deep); background: #eef5f1; }
.objective-current { display: flex; min-width: 0; padding: 8px 14px; align-items: center; justify-content: center; gap: 9px; color: white; background: var(--deep); text-align: center; }
.evaluation-objectives .objective-current { color: white; background: var(--deep); box-shadow: 0 3px 8px rgb(26 58 46 / 18%); }
.evaluation-objectives .objective-current > span { color: var(--deep); background: white; }
.evaluation-objectives.objective-berry .objective-current { background: var(--berry); }
.evaluation-objectives.objective-ingredient .objective-current { background: var(--ingredient); }
.evaluation-objectives.objective-skill .objective-current { background: var(--skill); }
.objective-current > span:first-child { font-size: 1.15rem; }
.objective-current strong, .objective-current small { display: block; }
.objective-current strong { font-size: .96rem; }
.objective-current small { margin-top: 2px; color: #dce9e3; font-size: .64rem; }
.evaluation-view-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 8px 0; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 8px; background: #f5f7f4; }
.evaluation-view-tabs button { display: flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: .74rem; font-weight: 850; }
.evaluation-view-tabs button span { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: white; background: #87968f; font-size: .62rem; }
.evaluation-view-tabs button[data-evaluation-tab="skills"] span { background: var(--skill); }
.evaluation-view-tabs button.active { color: white; background: var(--deep); box-shadow: 0 2px 7px rgb(26 58 46 / 16%); }
.evaluation-view-tabs button.active span { color: var(--deep); background: white; }
.evaluation-tab-panel[hidden] { display: none; }
.skill-set-panel { padding: 10px; border: 1px solid #cbd8d2; border-radius: 8px; background: #fbfcfa; }
.skill-set-main { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--role-color); border-radius: 7px; background: var(--role-soft); }
.skill-set-main .skill-set-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: white; background: var(--role-color); font-weight: 900; }
.skill-set-main small, .skill-set-main span { display: block; font-size: .63rem; }
.skill-set-main small { color: var(--muted); }
.skill-set-main h2 { margin: 2px 0; font-size: 1rem; }
.skill-set-main span { color: var(--role-color); font-weight: 850; }
.skill-set-subskills { margin-top: 9px; }
.skill-set-subskills > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 6px; }
.skill-set-subskills > header strong { font-size: .78rem; }.skill-set-subskills > header small { color: var(--muted); font-size: .6rem; }
.skill-set-subskills > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.skill-set-chip { position: relative; min-width: 0; min-height: 94px; padding: 21px 7px 7px; border: 1px solid #d9dcd9; border-radius: 6px; background: white; text-align: center; }
.skill-set-chip.rank-gold { border-color: #dec063; background: #fff9df; }.skill-set-chip.rank-blue { border-color: #93bdd5; background: #edf8ff; }
.skill-set-chip.locked { opacity: .48; filter: grayscale(.65); }
.skill-set-level { position: absolute; top: 5px; left: 5px; color: var(--muted); font-size: .53rem; font-weight: 850; }
.skill-set-chip > .skill-set-icon { display: grid; width: 24px; height: 24px; margin: 0 auto 4px; place-items: center; border-radius: 50%; color: white; background: var(--role-color); font-size: .64rem; font-weight: 900; }
.skill-set-chip strong, .skill-set-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-set-chip strong { font-size: .62rem; }.skill-set-chip small { margin-top: 2px; color: var(--role-color); font-size: .52rem; font-weight: 800; }
.all-pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.auth-panel { width: min(100% - 32px, 520px); margin: 48px auto; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.stacked-form { display: grid; gap: 14px; margin: 22px 0; }
.stacked-form label { display: grid; gap: 6px; font-weight: 700; }
.stacked-form small { color: var(--muted); font-weight: 500; }
.header-account { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: .78rem; }
.header-account form { margin: 0; }.header-account button { padding: 6px 8px; font-size: .72rem; }
.user-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }.user-admin-row span { display: block; color: var(--muted); font-size: .82rem; }
.pr-tile { padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.pr-tile.metric-berry { border-top: 4px solid var(--berry); background: linear-gradient(180deg, rgb(77 147 100 / 8%), var(--card) 45%); }
.pr-tile.metric-ingredient { border-top: 4px solid var(--ingredient); background: linear-gradient(180deg, rgb(217 154 56 / 9%), var(--card) 45%); }
.pr-tile.metric-skill { border-top: 4px solid var(--skill); background: linear-gradient(180deg, rgb(70 127 174 / 8%), var(--card) 45%); }
.pr-tile.selected { box-shadow: 0 8px 18px rgb(44 48 43 / 10%); transform: translateY(-2px); }
.pr-tile.metric-berry.selected { border-color: var(--berry); }
.pr-tile.metric-ingredient.selected { border-color: var(--ingredient); }
.pr-tile.metric-skill.selected { border-color: var(--skill); }
.pr-tile > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pr-tile > div:first-child span { color: var(--muted); font-size: .72rem; font-weight: 750; }
.pr-tile > div:first-child strong { color: var(--deep); font-size: 1.08rem; }
.pr-tile dl { display: grid; gap: 4px; margin: 9px 0 0; }
.pr-tile dl div { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid #e7e4da; }
.pr-tile dt, .pr-tile dd { font-size: .7rem; }
.pr-tile dt { color: var(--muted); }
.pr-tile dd { color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.pr-tile p { margin: 8px 0 0; color: var(--muted); font-size: .7rem; }
.benchmark-note { margin: 0 0 12px; color: var(--muted); font-size: .7rem; }
.practical-performance { margin-bottom: 12px; padding: 15px; border: 1px solid #c9d8d0; border-top: 4px solid var(--deep); border-radius: 7px; background: var(--card); box-shadow: 0 8px 20px rgb(44 48 43 / 6%); }
.practical-performance.ingredient-focus { border-color: #e0c992; border-top-color: var(--ingredient); background: linear-gradient(145deg, #fffaf0, var(--card) 62%); }
.practical-performance > header { display: flex; margin-bottom: 10px; align-items: end; justify-content: space-between; gap: 14px; }
.practical-performance > header h2 { margin: 1px 0 0; font-size: 1.05rem; }
.practical-performance > header > small { color: var(--muted); font-size: .65rem; }
.practical-primary { display: grid; padding: 12px 14px; grid-template-columns: minmax(180px, 1fr) auto; align-items: baseline; gap: 3px 16px; border-radius: 7px; background: #eaf3ee; }
.ingredient-focus .practical-primary { background: #fff2d8; }
.practical-primary > span { font-size: .72rem; font-weight: 850; }
.practical-primary > strong { color: var(--deep); font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.ingredient-focus .practical-primary > strong { color: #8a5a10; }
.practical-primary > strong small { margin-left: 3px; font-size: .68rem; }
.practical-primary > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .65rem; }
.energy-expectation-breakdown { display: grid; margin: 8px 0 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.energy-expectation-breakdown > div { padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.energy-expectation-breakdown dt { font-size: .6rem; }
.energy-expectation-breakdown dd { margin-top: 2px; font-size: .84rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.practical-caveat { margin: 7px 2px 0; color: var(--muted); font-size: .6rem; }
.practical-warnings { margin: 7px 0 0; padding-left: 18px; color: #87512e; font-size: .62rem; }
.ingredient-performance-items { display: grid; margin-top: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ingredient-performance-items > div { padding: 8px 10px; border: 1px solid #ead7af; border-radius: 6px; background: white; }
.ingredient-performance-items span, .ingredient-performance-items strong, .ingredient-performance-items small { display: block; }
.ingredient-performance-items span { color: var(--muted); font-size: .61rem; }
.ingredient-performance-items strong { margin-top: 2px; color: #805716; font-size: .82rem; }
.ingredient-performance-items small { margin-top: 1px; color: var(--muted); font-size: .57rem; }
.recipe-contribution-heading { display: flex; margin-top: 12px; align-items: baseline; justify-content: space-between; gap: 10px; }
.recipe-contribution-heading strong { font-size: .82rem; }
.recipe-contribution-heading small { color: var(--muted); font-size: .6rem; }
.recipe-contribution-grid { display: grid; margin-top: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.recipe-contribution-grid article { min-width: 0; padding: 9px; border: 1px solid #e2d1ae; border-radius: 7px; background: white; }
.recipe-contribution-title { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.recipe-contribution-title span { color: var(--muted); font-size: .57rem; }
.recipe-contribution-title b { padding: 2px 5px; border-radius: 999px; color: #83580f; background: #f7e8c8; font-size: .52rem; }
.recipe-contribution-grid h3 { min-height: 2.4em; margin: 6px 0; font-size: .73rem; line-height: 1.2; }
.recipe-contribution-grid dl { display: grid; margin: 0; grid-template-columns: 1fr 1fr; gap: 4px; }
.recipe-contribution-grid dl > div { padding: 5px; border-radius: 4px; background: #faf7ef; }
.recipe-contribution-grid dt { font-size: .5rem; }
.recipe-contribution-grid dd { margin-top: 1px; font-size: .66rem; font-weight: 800; }
.recipe-contribution-grid progress { width: 100%; height: 7px; margin-top: 7px; accent-color: var(--ingredient); }
.recipe-supplied-items { display: flex; margin-top: 5px; flex-wrap: wrap; gap: 3px; }
.recipe-supplied-items span { padding: 2px 5px; border-radius: 999px; color: #744d0c; background: #fff1d4; font-size: .51rem; }
.recipe-judgement { margin: 6px 0 0; color: var(--muted); font-size: .56rem; }
.recipe-judgement.ready { color: #247147; font-weight: 800; }
.pr-summary { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(120deg, var(--card), #eef4f0); }
.pr-gauge { display: grid; width: 100px; height: 100px; place-content: center; border-radius: 50%; background: radial-gradient(circle at center, var(--card) 0 55%, transparent 56%), conic-gradient(var(--deep) calc(var(--percentile) * 1%), #dfe2dc 0); text-align: center; }
.pr-gauge span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.pr-gauge strong { color: var(--deep); font-size: 1.55rem; font-variant-numeric: tabular-nums; line-height: 1; }
.pr-copy h2 { margin: 2px 0; font-size: 1.3rem; }
.pr-copy .eyebrow, .pr-copy > p:last-child { display: none; }
.pr-facts { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 5px; }
.pr-facts div { padding: 9px 11px; border-bottom: 1px solid var(--line); }
.pr-facts div:last-child { border-bottom: 0; }
.pr-facts dd { font-weight: 750; }
.evaluation-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.evaluation-breakdown > div { padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.evaluation-breakdown h2 { font-size: 1rem; }
.evaluation-breakdown ul { margin: 10px 0; padding-left: 20px; }
.evaluation-breakdown p, .evaluation-breakdown li { color: var(--muted); font-size: .78rem; }
.evaluation-breakdown .facts { margin: 10px 0 0; }
.evaluation-detail-drawer { margin-top: 8px; border: 1px solid #cfdad4; border-radius: 7px; background: #fbfcfa; }
.evaluation-detail-drawer > summary { display: flex; min-height: 42px; padding: 8px 11px; align-items: center; justify-content: space-between; gap: 8px; color: var(--deep); cursor: pointer; font-size: .72rem; font-weight: 850; list-style: none; }
.evaluation-detail-drawer > summary::-webkit-details-marker { display: none; }
.evaluation-detail-drawer > summary > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: white; background: var(--deep); font-size: .7rem; }
.evaluation-detail-drawer[open] > summary { border-bottom: 1px solid var(--line); background: #f0f6f2; }
.evaluation-detail-drawer > .pr-facts, .evaluation-detail-drawer > .evaluation-breakdown { margin: 10px; }
.recipe-contribution-drawer { border-color: #ead7af; background: #fffdf8; }
.evaluation-warnings { margin-top: 12px; padding: 12px 16px; border-left: 4px solid #b18432; background: #f7f1df; }
.evaluation-warnings ul { margin: 6px 0 0; }
.team-layout main, .team-layout footer { width: min(calc(100% - 24px), 1440px); }
.team-layout main { padding-top: 16px; }
.team-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; padding: 10px 14px; }
.team-header h1 { margin: 0; font-size: 1.3rem; }
.team-header p:not(.eyebrow) { margin: 1px 0 0; color: #aebbd0; font-size: .68rem; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.icon-button > span[aria-hidden="true"] { font-size: 1.05em; line-height: 1; }
.team-guide { margin-bottom: 8px; padding: 10px; border: 1px solid #cbd7e3; border-radius: 9px; background: linear-gradient(145deg, #f8fbfd, #fffdf7 68%); box-shadow: 0 6px 16px rgb(30 48 70 / 5%); }
.team-guide-intro { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid #dce3e8; }
.team-guide-intro h2 { margin: 0; font-size: .92rem; }
.team-guide-intro p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .75rem; }
.guide-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: white; background: linear-gradient(135deg, var(--skill), #536ea4); box-shadow: 0 4px 9px rgb(70 127 174 / 18%); }
.guide-avatar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.guide-reset { min-height: 34px; padding: 5px 10px; font-size: .72rem; }
.current-goal-drawer { margin: 0 0 8px; border: 1px solid #bfd8c8; border-radius: 9px; background: #f5fbf7; }
.current-goal-drawer > summary { display: grid; grid-template-columns: 22px auto minmax(0, 1fr); align-items: center; gap: 7px; min-height: 38px; padding: 6px 10px; cursor: pointer; list-style: none; }
.current-goal-drawer > summary::-webkit-details-marker { display: none; }
.current-goal-drawer > summary > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: .72rem; }
.current-goal-drawer > summary > b { font-size: .76rem; white-space: nowrap; }
.current-goal-drawer > summary > small { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.current-goal-drawer > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px 9px 39px; color: var(--ink); font-size: .76rem; }
.current-goal-drawer > div strong { font-weight: 600; }
.current-goal-drawer > div a { flex: 0 0 auto; font-size: .68rem; }
.next-goal-suggestion button { border-color: #9fc8ad; background: #edf8f0; }
.guide-free-input, .consult-free-input { display: grid; margin-top: 8px; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 7px 10px; }
.guide-free-input label strong, .guide-free-input label small, .consult-free-input label strong, .consult-free-input label small { display: block; }
.guide-free-input label strong, .consult-free-input label strong { font-size: .75rem; }
.guide-free-input label small, .consult-free-input label small { margin-top: 1px; color: var(--muted); font-size: .56rem; }
.guide-free-input > div, .consult-free-input > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.guide-free-input input, .consult-free-input input { min-width: 0; min-height: 40px; }
.guide-free-input button, .consult-free-input button { min-height: 40px; white-space: nowrap; }
.guide-free-input > p, .consult-free-input > p { min-height: 1em; margin: 0; grid-column: 2; color: var(--muted); font-size: .58rem; }
.plan-request-suggestions { display: flex; min-width: 0; grid-column: 2; flex-wrap: wrap; gap: 4px; }
.plan-request-suggestions button { min-height: 28px; max-width: 100%; padding: 4px 8px; overflow: hidden; border-color: #c7d2cc; border-radius: 999px; color: var(--deep); background: #f7faf8; box-shadow: none; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.plan-request-suggestions button.promoted { border-color: #d8bd68; background: #fff8df; }
.plan-request-suggestions button span { color: #ae7b13; }
.plan-request-suggestions button small { margin-left: 4px; color: var(--muted); font-size: .5rem; }
.guide-conversation { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 8px 0 0; }
.briefing-chat { margin: 20px 0; padding: 18px; border: 1px solid var(--line, #cdd8d0); border-radius: 16px; background: #f7fbf8; }
.briefing-chat header, .briefing-chat form { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.briefing-chat h2 { margin: 0; font-size: 1.2rem; }
.briefing-chat header p, .briefing-chat p { margin: 4px 0; }
.briefing-chat form { margin-top: 12px; align-items: stretch; }
.briefing-chat form label { flex: 1; }
.briefing-chat input { width: 100%; box-sizing: border-box; }
.briefing-team-route { display: grid; margin-top: 12px; padding: 12px; gap: 4px; border: 1px solid #b9d4c4; border-radius: 8px; background: #eef7f1; }
.briefing-team-route > span { color: var(--deep); font-size: .68rem; font-weight: 850; }.briefing-team-route > strong { font-size: .86rem; }.briefing-team-route > small { color: var(--muted); font-size: .7rem; }.briefing-team-route > div { display: flex; margin-top: 5px; flex-wrap: wrap; gap: 7px; }.briefing-team-route .button { min-height: 36px; padding: 7px 10px; font-size: .74rem; }
.briefing-answer { margin-top: 12px; padding: 12px; border-left: 4px solid #3d8665; background: white; }
.briefing-answer strong { white-space: pre-wrap; }
.briefing-status { color: #52675e; font-size: .9rem; }
.guide-step[hidden], .guide-summary[hidden] { display: none; }
.guide-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 34px; animation: guide-reveal .18s ease both; }
.guide-step[data-guide-step="priority"], .meal-theme-step { grid-column: 1 / -1; }
.guide-question { position: relative; display: flex; min-height: 30px; padding: 3px 6px; align-items: center; gap: 6px; border: 0; background: transparent; }
.guide-question::after { display: none; }
.guide-question > span { z-index: 1; display: grid; flex: 0 0 21px; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: white; background: var(--skill); font-size: .62rem; font-weight: 850; }
.guide-question p { z-index: 1; margin: 0; font-size: .8rem; font-weight: 700; }
.meal-theme-step .guide-question small { display: block; margin-top: 2px; color: var(--muted); font-size: .62rem; font-weight: 500; }
.guide-replies { display: flex; flex-wrap: wrap; gap: 4px; }
.guide-replies button { min-height: 29px; padding: 4px 9px; border-color: #bdcbd8; border-radius: 999px; color: #3c5672; background: white; font-size: .69rem; }
.guide-replies button::before { margin-right: 4px; }
.guide-replies [data-value="everyday"]::before { content: "☀"; }
.guide-replies [data-value="event"]::before { content: "★"; }
.guide-replies [data-value="cooking"]::before { content: "🍲"; }
.guide-replies [data-value="resources"]::before { content: "◆"; }
.guide-replies [data-value="this_week"]::before { content: "7d"; font-size: .55rem; font-weight: 900; }
.guide-replies [data-value="next_event"]::before { content: "→"; }
.guide-replies [data-value="long_term"]::before { content: "∞"; }
.guide-replies [data-value="balanced"]::before { content: "◈"; }
.guide-replies [data-value="energy"]::before { content: "⚡"; }
.guide-replies [data-value="berry"]::before { content: "●"; color: var(--berry); }
.guide-replies [data-value="ingredient"]::before { content: "●"; color: var(--ingredient); }
.guide-replies [data-value="skill"]::before { content: "●"; color: var(--skill); }
.guide-replies [data-value="dream_shard"]::before { content: "✦"; }
.guide-replies [data-value="candy"]::before { content: "⬡"; }
.guide-replies button.selected::before { color: inherit; }
.guide-replies button:hover, .guide-replies button:focus-visible { border-color: var(--skill); color: var(--skill); background: #edf6fb; }
.guide-replies button.selected { border-color: var(--skill); color: white; background: var(--skill); box-shadow: 0 4px 10px rgb(70 127 174 / 20%); }
.guide-summary { display: flex; margin-top: 8px; padding: 7px 9px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #add0bd; border-left: 4px solid var(--berry); border-radius: 6px; background: #eef7f1; animation: guide-reveal .18s ease both; }
.guide-summary small, .guide-summary strong, .guide-summary p { display: block; }
.guide-summary small { color: var(--berry); font-size: .66rem; font-weight: 850; }
.guide-summary strong { margin-top: 1px; font-size: .95rem; }
.guide-summary p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }
.guide-summary button { flex: 0 0 auto; }
.guide-summary-actions { display: flex; align-items: center; gap: 6px; }
.team-guide.is-compact { padding: 6px 8px; }
.team-guide.is-compact .team-guide-intro, .team-guide.is-compact .guide-conversation { display: none; }
.team-guide.is-compact .guide-summary { margin-top: 0; }
@keyframes guide-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.team-recommendation { margin-bottom: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.recommendation-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.recommendation-heading h2 { margin: 2px 0 3px; font-size: 1.15rem; }
.recommendation-heading p:not(.eyebrow) { display: none; }
.recommendation-heading button { flex: 0 0 auto; }
.recommendation-energy { display: grid; margin-top: 12px; padding: 10px 13px; grid-template-columns: minmax(180px, 1fr) auto; align-items: baseline; gap: 2px 16px; border-left: 5px solid var(--ingredient); border-radius: 5px; background: linear-gradient(90deg, #f9f0df, #fffaf0); }
.recommendation-energy span { font-size: .74rem; font-weight: 750; }
.recommendation-energy strong { color: #9a6518; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.recommendation-energy small { grid-column: 1 / -1; color: var(--muted); font-size: .63rem; }
.party-options-heading { display: flex; margin-top: 8px; align-items: center; justify-content: space-between; gap: 12px; }
.party-options-heading div > * { display: block; }
.party-options-heading strong { font-size: .86rem; }
.party-options-heading span, .party-options-heading small { display: none; }
.party-carousel-controls { display: flex; align-items: center; gap: 6px; }
.party-carousel-controls button { min-width: 34px; min-height: 30px; padding: 2px 9px; font-size: 1.1rem; }
.party-carousel-controls span { min-width: 44px; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; }
.party-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 7px; scroll-snap-type: x mandatory; }
.party-option { overflow: hidden; border: 1px solid #cbd4d0; border-radius: 7px; background: #fbfcfa; opacity: .76; transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease; scroll-snap-align: center; }
.party-option.selected { border-color: var(--deep); box-shadow: 0 7px 18px rgb(48 102 81 / 19%); opacity: 1; transform: translateY(-2px); }
.party-option.best { border-color: #77a48f; box-shadow: 0 6px 16px rgb(48 102 81 / 12%); }
.party-option > header { display: grid; padding: 7px; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; background: #eef2ef; }
.party-option.best > header { background: linear-gradient(90deg, #e0f1e8, #f2f8f4); }
.party-option-rank { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: white; background: #65746e; font-size: .7rem; font-weight: 900; }
.party-option.best .party-option-rank { background: var(--deep); }
.party-option header strong, .party-option header small { display: block; }
.party-option header strong { font-size: .73rem; }
.party-option header small { display: none; }
.party-option header button { min-height: 28px; padding: 4px 7px; font-size: .6rem; }
.party-option-members { display: grid; padding: 6px 7px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.party-option-members > span { position: relative; display: grid; min-width: 0; justify-items: center; gap: 2px; }
.party-option-members b { position: absolute; left: 0; top: 0; z-index: 1; display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; color: white; background: var(--skill); font-size: .48rem; }
.party-option-members img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; }
.party-option-members em { max-width: 100%; overflow: hidden; font-size: .52rem; font-style: normal; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.party-option-metrics { display: grid; margin: 0; padding: 0 7px 7px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.party-option-metrics div { min-width: 0; padding: 5px 6px; border-top: 3px solid #84918c; border-radius: 4px; background: #f1f3f1; }
.party-option-metrics .berry { border-color: var(--berry); background: #edf6ef; }
.party-option-metrics .ingredient { border-color: var(--ingredient); background: #fbf4e8; }
.party-option-metrics .skill { border-color: var(--skill); background: #edf4f9; }
.party-option-metrics .resource { border-color: var(--violet); background: #f2eff8; }
.party-option-metrics .energy { border-color: #4d9a8a; background: #edf7f4; }
.party-option-metrics dt { width: 14px; height: 14px; overflow: hidden; color: transparent; font-size: 0; line-height: 1; white-space: nowrap; }
.party-option-metrics dt::before { display: grid; width: 14px; height: 14px; place-items: center; border-radius: 50%; color: white; font-size: .52rem; font-weight: 900; }
.party-option-metrics .berry dt::before { content: "●"; background: var(--berry); }
.party-option-metrics .ingredient dt::before { content: "◆"; background: var(--ingredient); }
.party-option-metrics .skill dt::before { content: "✦"; background: var(--skill); }
.party-option-metrics .resource dt::before { content: "◇"; background: var(--violet); }
.party-option-metrics .energy dt::before { content: "♥"; background: #4d9a8a; }
.party-option-metrics dd { margin: 1px 0 0; font-size: .68rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.coverage-comparison-heading { display: flex; margin: 11px 0 5px; align-items: baseline; justify-content: space-between; gap: 10px; }
.coverage-comparison-heading strong { font-size: .78rem; }
.coverage-comparison-heading span { color: var(--muted); font-size: .62rem; }
.coverage-comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.coverage-comparison .cooking-coverage { min-width: 0; margin-top: 0; opacity: .64; scroll-snap-align: center; transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
.coverage-comparison .cooking-coverage.selected { border-color: var(--ingredient); box-shadow: 0 6px 15px rgb(208 145 48 / 16%); opacity: 1; }
.coverage-comparison .coverage-row { grid-template-columns: minmax(70px, .7fr) minmax(80px, 1.4fr) 36px; gap: 5px; }
.coverage-comparison .coverage-row em { grid-column: 2 / -1; text-align: right; }
.candidate-order-title { margin: 12px 0 0; font-size: .76rem; }
.recommendation-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
.recommendation-card { position: relative; display: grid; min-width: 0; padding: 10px; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; border: 1px solid var(--line); border-top: 4px solid var(--skill); border-radius: 6px; background: linear-gradient(155deg, rgb(70 127 174 / 8%), white 60%); }
.recommendation-card > img, .recommendation-card > .mini-portrait { width: 38px; height: 38px; border-radius: 5px; object-fit: cover; }
.recommendation-card > span:nth-of-type(2) { min-width: 0; }
.recommendation-card strong, .recommendation-card small, .recommendation-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recommendation-card strong { font-size: .78rem; }
.recommendation-card small { color: var(--muted); font-size: .61rem; }
.recommendation-card em { margin-top: 3px; color: var(--skill); font-size: .62rem; font-style: normal; font-weight: 700; }
.recommendation-card > b { position: absolute; right: 6px; top: 5px; padding: 1px 5px; border-radius: 999px; color: white; background: var(--skill); font-size: .58rem; }
.recommendation-rank { position: absolute; left: -4px; top: -8px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: white; background: #17243a; font-size: .62rem; font-weight: 850; box-shadow: 0 2px 5px rgb(20 32 48 / 20%); }
.recommendation-gaps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.recommendation-gaps > div { padding: 9px 11px; border-left: 4px solid var(--ingredient); border-radius: 4px; background: #f8f2e6; }
.recommendation-gaps > div:last-child { border-left-color: var(--violet); background: #f2f0f7; }
.recommendation-gaps strong { font-size: .72rem; }
.recommendation-gaps p { margin: 2px 0 0; color: var(--muted); font-size: .68rem; }
.recommendation-warnings { margin: 9px 0 0; padding: 8px 10px 8px 28px; color: #73501e; background: #f8f2e6; font-size: .68rem; }
.recommendation-details { margin-top: 8px; padding: 6px 8px 8px; border: 1px solid var(--line); border-radius: 5px; }
.recommendation-details > summary { cursor: pointer; color: var(--deep); font-size: .7rem; font-weight: 800; }
.cooking-coverage { margin-top: 12px; padding: 12px; border: 1px solid #dfc99d; border-radius: 6px; background: #fffbf0; }
.cooking-coverage-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.cooking-coverage-heading span { font-size: .78rem; font-weight: 800; }
.cooking-coverage-heading strong { color: #9a6518; font-size: .7rem; }
.coverage-row { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(120px, 1.5fr) 100px 42px; align-items: center; gap: 8px; padding: 4px 0; font-size: .68rem; }
.coverage-meter { height: 7px; overflow: hidden; border-radius: 999px; background: #e7e1d3; }
.coverage-meter i { display: block; width: min(var(--coverage), 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ingredient), #e5b75f); }
.coverage-row b, .coverage-row em { font-variant-numeric: tabular-nums; text-align: right; }
.coverage-row em { color: var(--muted); font-style: normal; }
.team-builder { display: grid; gap: 8px; }
.cooking-conditions { min-width: 0; padding: 15px; overflow: hidden; border: 1px solid #dfc99d; border-radius: 7px; background: linear-gradient(145deg, #fffbf0, var(--card)); box-shadow: 0 7px 18px rgb(80 60 20 / 5%); }
.cooking-conditions[hidden] { display: none; }
.recipe-plan-selectors { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); align-items: end; gap: 14px; margin-top: 12px; }
.recipe-plan-selectors > * { min-width: 0; }
.recipe-plan-selectors label { min-width: 0; color: #72521f; font-size: .7rem; font-weight: 800; }
.recipe-plan-selectors select { max-width: 100%; margin-top: 4px; overflow: hidden; background: white; text-overflow: ellipsis; white-space: nowrap; }
.recipe-theme-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.recipe-theme-field legend { margin-bottom: 4px; color: #72521f; font-size: .7rem; font-weight: 800; }
.recipe-theme-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.recipe-theme-buttons button { min-height: 45px; padding: 6px 8px; border-color: #d8c8a8; color: #72521f; background: white; font-size: .68rem; font-weight: 800; }
.recipe-theme-buttons button.selected { border-color: #d5952e; color: #fff; background: #b9791f; box-shadow: 0 4px 10px rgb(150 95 15 / 18%); }
.pot-expansion-note { display: flex; margin: 8px 0 0; padding: 8px 10px; align-items: center; gap: 7px; border: 1px solid #e0b76f; border-radius: 6px; color: #72521f; background: #fff4dc; font-size: .67rem; }
.pot-expansion-note strong { white-space: nowrap; }
.recipe-catalog-status { margin: 8px 0 0; padding: 8px 10px; border-left: 4px solid var(--ingredient); color: var(--muted); background: #fffdf7; font-size: .67rem; }
.recipe-catalog-status.error { border-left-color: var(--danger); color: var(--danger); }
.selected-recipe-summary { display: grid; min-width: 0; margin-top: 9px; padding: 10px 12px; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 5px 14px; overflow: hidden; border: 1px solid #d9c18e; border-radius: 6px; background: white; }
.selected-recipe-summary > * { min-width: 0; }
.selected-recipe-summary strong, .selected-recipe-summary span { display: block; }
.selected-recipe-summary strong { font-size: .86rem; }
.selected-recipe-summary span, .selected-recipe-summary small { color: var(--muted); font-size: .61rem; }
.selected-recipe-summary ul { display: flex; margin: 0; padding: 0; flex-wrap: wrap; gap: 5px; list-style: none; }
.selected-recipe-summary li { padding: 4px 7px; border-radius: 999px; color: #72521f; background: #f8efd9; font-size: .65rem; }
.selected-recipe-summary small { grid-column: 1 / -1; overflow-wrap: anywhere; }
.manual-recipe-input { margin-top: 9px; padding: 7px 9px 9px; border: 1px solid #e4d8bd; border-radius: 5px; background: rgb(255 255 255 / 58%); }
.manual-recipe-input summary { cursor: pointer; color: #72521f; font-size: .68rem; font-weight: 800; }
.recipe-targets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.recipe-target { display: grid; grid-template-columns: minmax(0, 1fr) 82px; gap: 6px; padding: 8px; border: 1px solid #e4d8bd; border-radius: 5px; background: white; }
.recipe-target label, .cooking-settings label { font-size: .68rem; }
.recipe-target input, .recipe-target select, .cooking-settings input { padding: 7px 8px; }
.ingredient-native-select { display: none; }
.ingredient-picker { position: relative; display: block; min-width: 0; }
.ingredient-picker-trigger { display: grid; width: 100%; min-height: 46px; padding: 5px 8px; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 7px; border-color: #d8c8a8; color: var(--ink); background: #fffdf8; text-align: left; }
.ingredient-picker-trigger > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #f7edda; font-size: 1.3rem; }
.ingredient-picker-trigger b { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.ingredient-picker-trigger i { color: var(--muted); font-style: normal; }
.ingredient-tile-menu { position: absolute; z-index: 125; top: calc(100% + 5px); left: 0; display: grid; width: min(520px, 76vw); max-height: 330px; padding: 8px; grid-template-columns: repeat(4, minmax(92px, 1fr)); gap: 6px; overflow: auto; border: 1px solid #d8c8a8; border-radius: 8px; background: white; box-shadow: 0 14px 34px rgb(50 39 18 / 22%); }
.ingredient-tile-menu[hidden] { display: none; }
.ingredient-tile-menu button { display: grid; min-height: 76px; padding: 7px 5px; justify-items: center; align-content: center; gap: 4px; border-color: #e3d8c3; color: var(--ink); background: #fffdf8; }
.ingredient-tile-menu button[aria-selected="true"] { border-color: var(--ingredient); background: #fff1d5; box-shadow: inset 0 0 0 2px rgb(217 154 56 / 18%); }
.ingredient-tile-menu button span { font-size: 1.65rem; line-height: 1; }
.ingredient-tile-menu button b { font-size: .62rem; line-height: 1.25; text-align: center; }
.settings-tabs { position: fixed; z-index: 110; right: 0; top: 50%; display: grid; gap: 6px; transform: translateY(-50%); }
.settings-tabs button { display: grid; width: 88px; min-height: 62px; padding: 7px 5px; justify-items: center; align-content: center; gap: 2px; border-radius: 9px 0 0 9px; border-color: #34445d; color: white; background: #142238; box-shadow: 0 5px 16px rgb(13 25 43 / 16%); }
.settings-tabs button span { font-size: 1.2rem; }
.settings-tabs button b { font-size: .64rem; }
.settings-tabs button[aria-selected="true"] { border-color: #ddb15b; background: #8b641f; }
.settings-backdrop { position: fixed; z-index: 90; inset: 0; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: rgb(12 22 36 / 38%); backdrop-filter: blur(2px); }
.settings-backdrop[hidden], .settings-drawer[hidden] { display: none; }
.settings-drawer { position: fixed; z-index: 100; top: 68px; right: 88px; bottom: 12px; width: min(780px, calc(100vw - 108px)); overflow: auto; border: 1px solid #bfc9d2; border-radius: 10px 0 0 10px; background: #fffdf8; box-shadow: -14px 18px 42px rgb(14 25 41 / 26%); }
.settings-drawer-header { position: sticky; z-index: 3; top: 0; display: flex; min-height: 58px; padding: 9px 12px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); color: white; background: #142238; }
.settings-drawer-header strong, .settings-drawer-header small { display: block; }
.settings-drawer-header strong { font-size: .9rem; }
.settings-drawer-header small { margin-top: 2px; color: #b9c8db; font-size: .62rem; }
.settings-close { width: 34px; min-height: 34px; padding: 0; border-color: #60718a; color: white; background: transparent; font-size: 1.15rem; }
.settings-open { overflow: hidden; }
.profile-dock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.profile-dock > .cooking-profile-card:has(> details[open]) { grid-column: 1 / -1; }
.cooking-profile-card { min-width: 0; margin: 0; border: 1px solid #d9c18e; border-radius: 8px; background: #fffdf7; box-shadow: 0 5px 14px rgb(66 51 24 / 5%); }
.cooking-profile-card details { min-width: 0; }
.cooking-profile-card > details > summary { display: flex; padding: 9px 11px; cursor: pointer; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); font-size: .78rem; font-weight: 800; }
.cooking-profile-card > details > summary small { min-width: 0; overflow: hidden; color: var(--muted); font-size: .64rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cooking-profile-card > details[open] > summary { border-bottom: 1px solid #e7dcc5; }
.field-profile-card { border-color: #b9d4c5; background: linear-gradient(145deg, #f4faf6, #fffdf7); }
.field-profile-form { padding: 14px 16px 16px; }
.current-field-select { display: grid; max-width: 360px; gap: 5px; font-size: .68rem; font-weight: 800; }
.current-field-select select { padding: 8px; background: white; }
.field-bonus-grid { display: grid; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 7px; }
.field-bonus-grid > label { display: grid; min-width: 0; padding: 7px; grid-template-columns: minmax(110px, 1fr) 92px; align-items: center; gap: 6px; border: 1px solid #cfe0d6; border-radius: 5px; background: white; font-size: .62rem; }
.field-bonus-grid label > span:first-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.field-bonus-grid small { margin-left: 5px; padding: 1px 4px; border-radius: 999px; color: white; background: var(--deep); font-size: .52rem; }
.field-bonus-grid input { min-width: 0; padding: 6px; }
.bag-ocr-panel { display: grid; padding: 12px 16px; grid-template-columns: minmax(220px, 1fr) minmax(280px, 1fr); gap: 12px; align-items: center; background: #f3f8f4; }
.bag-ocr-panel p { margin: 3px 0 0; color: var(--muted); font-size: .64rem; }
.bag-ocr-panel form { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bag-ocr-panel input[type="file"] { max-width: 270px; font-size: .64rem; }
.cooking-profile-form { padding: 14px 16px 16px; }
.pot-profile { display: grid; max-width: 230px; gap: 5px; font-size: .68rem; font-weight: 800; }
.pot-profile input { padding: 8px; }
.ingredient-bag-grid { display: grid; margin-top: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.ingredient-bag-grid label { display: grid; padding: 7px; grid-template-columns: minmax(0, 1fr) 62px; gap: 5px; align-items: center; border: 1px solid #e4d8bd; border-radius: 5px; background: white; font-size: .62rem; }
.ingredient-bag-grid label.ocr-candidate { border-color: #4c9d78; background: #eef8f2; box-shadow: inset 3px 0 #4c9d78; }
.ingredient-bag-name { display: grid; min-width: 0; grid-template-columns: 32px minmax(0, 1fr); gap: 7px; align-items: center; line-height: 1.3; }
.ingredient-bag-name > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ingredient-bag-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #f7edda; font-size: 1.3rem; line-height: 1; }
.ingredient-bag-grid input { min-width: 0; padding: 6px; }
.recipe-levels { margin-top: 12px; padding: 9px 10px; border: 1px solid #e4d8bd; border-radius: 5px; background: white; }
.recipe-levels > summary { cursor: pointer; color: #72521f; font-size: .68rem; font-weight: 800; }
.recipe-levels > div { display: grid; margin-top: 9px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.recipe-levels label { display: grid; grid-template-columns: minmax(0, 1fr) 62px; align-items: center; gap: 6px; font-size: .62rem; }
.recipe-levels input { min-width: 0; padding: 6px; }
.recipe-levels p { margin: 8px 0 0; color: var(--muted); font-size: .61rem; }
.profile-save { display: flex; margin-top: 12px; justify-content: flex-end; align-items: center; gap: 14px; }
.profile-save span { color: var(--muted); font-size: .64rem; }
.cooking-settings { display: grid; grid-template-columns: 110px 110px 130px minmax(240px, 1fr); align-items: end; gap: 8px; margin-top: 8px; }
.team-conditions { padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.team-conditions > summary { display: flex; min-height: 46px; padding: 8px 10px; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.team-conditions > summary::-webkit-details-marker { display: none; }
.team-conditions > summary b, .team-conditions > summary small { display: block; }
.team-conditions > summary b { font-size: .92rem; }
.team-conditions > summary small { margin-top: 1px; color: var(--muted); font-size: .65rem; }
.team-conditions > summary em { padding: 4px 8px; border-radius: 999px; color: var(--deep); background: #edf4ef; font-size: .68rem; font-style: normal; }
.team-condition-fields { display: grid; padding: 9px; grid-template-columns: 1.2fr 100px 170px 135px auto; align-items: end; gap: 7px; border-top: 1px solid var(--line); }
.team-condition-actions { display: grid; gap: 6px; }
.team-conditions .check-label { width: max-content; min-height: 34px; padding: 5px 7px; gap: 5px; font-size: .68rem; white-space: nowrap; }.team-conditions .check-label input { margin: 0; }
.team-condition-actions button { min-height: 36px; padding: 6px 10px; font-size: .74rem; }
.team-selection, .team-results { padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.team-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 7px 0 5px; }
.team-slot { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: 7px; min-height: 60px; padding: 7px; border: 1px solid var(--deep); border-radius: 5px; background: #edf3ef; }
.team-slot img, .team-slot .mini-portrait { width: 44px; height: 44px; border-radius: 5px; object-fit: cover; }
.team-slot > span:nth-child(2) { min-width: 0; }
.team-slot strong, .team-slot small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-slot small { color: var(--muted); font-size: .62rem; }
.team-slot button { min-height: 24px; width: 24px; padding: 0; border: 0; color: var(--muted); background: transparent; }
.team-slot.empty { display: flex; align-items: center; justify-content: center; gap: 7px; border-style: dashed; border-color: var(--line); color: var(--muted); background: #faf9f5; }
.team-slot.empty > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #e5e3dc; font-size: .68rem; font-weight: 800; }
.team-picker-command { display: grid; margin: 10px 0 7px; grid-template-columns: minmax(220px, 1fr) auto auto auto; gap: 6px; }
.team-picker-search { display: grid; min-width: 0; min-height: 40px; padding: 0 5px 0 10px; grid-template-columns: auto minmax(0, 1fr) 30px; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.team-picker-search input { min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; }
.team-picker-search button { width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: #edf1ee; box-shadow: none; }
.team-ai-search { min-height: 40px; padding-inline: 9px; border-color: #7fa3c0; color: #21577d; background: #f4f9fd; font-size: .69rem; }
.team-filter-drawer { position: relative; }
.team-filter-drawer > summary { display: grid; min-width: 50px; min-height: 40px; padding: 0 9px; place-items: center; border: 1px solid #bcd0c4; border-radius: 6px; color: var(--deep); background: #fff; cursor: pointer; font-size: .68rem; font-weight: 800; }
.team-filter-drawer > div { position: absolute; z-index: 20; right: 0; display: grid; width: min(640px, 90vw); margin-top: 5px; padding: 9px; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 7px; border: 1px solid #bfcfc5; border-radius: 7px; background: white; box-shadow: 0 10px 25px rgb(28 44 35 / 16%); }
.team-filter-drawer label { display: grid; gap: 3px; color: var(--muted); font-size: .61rem; font-weight: 800; }
.team-filter-drawer select { min-width: 0; padding: 7px; background: white; font-size: .7rem; }
.team-search-status { margin: -1px 0 6px; color: var(--muted); font-size: .65rem; }
.team-kpis > div { position: relative; overflow: hidden; border-top: 4px solid var(--deep); box-shadow: 0 7px 16px rgb(44 48 43 / 6%); }
.team-kpis > div:nth-child(1) { border-top-color: var(--berry); background: linear-gradient(180deg, rgb(77 147 100 / 9%), var(--card) 52%); }
.team-kpis > div:nth-child(2) { border-top-color: var(--ingredient); background: linear-gradient(180deg, rgb(217 154 56 / 10%), var(--card) 52%); }
.team-kpis > div:nth-child(3) { border-top-color: var(--skill); background: linear-gradient(180deg, rgb(70 127 174 / 9%), var(--card) 52%); }
.team-kpis > div:nth-child(4) { border-top-color: var(--violet); background: linear-gradient(180deg, rgb(117 105 165 / 8%), var(--card) 52%); }
.team-results { margin-top: 14px; }
.team-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.team-kpis > div { padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: #f2f3ef; }
.team-kpis span, .team-kpis small { display: block; color: var(--muted); font-size: .7rem; }
.team-kpis strong { color: var(--deep); font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.team-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.team-result-grid > div { padding: 12px; border: 1px solid var(--line); border-radius: 5px; }
.event-verified { margin: 0 0 14px; color: var(--muted); font-size: .75rem; }
.event-section { margin-bottom: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.event-card { padding: 14px; border: 1px solid #d6dce2; border-top: 4px solid var(--skill); border-radius: 7px; background: #fbfcfd; }
.event-card.event-current { border-top-color: var(--ingredient); background: linear-gradient(155deg, rgb(217 154 56 / 10%), #fff 62%); }
.event-card.event-upcoming { border-top-color: var(--berry); background: linear-gradient(155deg, rgb(77 147 100 / 9%), #fff 62%); }
.event-card > div:first-child { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .7rem; }
.event-card h3 { margin: 8px 0 4px; font-size: 1rem; }
.event-card p, .event-card li, .event-card a { font-size: .74rem; }
.event-card ul { margin: 8px 0; padding-left: 18px; }
.event-status { padding: 2px 7px; border-radius: 999px; color: white; background: var(--deep); font-weight: 800; }
.event-ingredients { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
.event-ingredients strong { width: 100%; font-size: .7rem; }
.event-ingredients span { padding: 3px 7px; border-radius: 999px; color: #714d13; background: #fff0ce; font-size: .68rem; }
.forecast-section { border-style: dashed; }
.forecast-card { padding: 12px; border-left: 4px solid var(--violet); background: #f6f3fb; }
.forecast-card p, .forecast-card small { display: block; margin: 5px 0 0; font-size: .74rem; }
.event-strategy { padding: 16px; border-radius: 8px; color: white; background: linear-gradient(120deg, #15243a, #244b50); }
.event-strategy h2 { margin-top: 0; color: white; }
.event-strategy p { margin-bottom: 0; color: #d8e4e5; font-size: .8rem; }
.team-result-grid h3 { margin: 0 0 8px; font-size: .9rem; }
.team-member-list > div, .team-ingredient-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #e8e5dc; font-size: .76rem; }
.team-member-list > div:last-child, .team-ingredient-list > div:last-child { border-bottom: 0; }
.missing-catalog { margin-top: 10px; padding: 11px 13px; border-left: 4px solid #8b7662; background: #f1eee8; }
.missing-catalog p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }
.review-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.review-title { display: flex; min-width: 0; align-items: center; gap: 14px; }
.review-title .back { margin: 0; flex: 0 0 auto; }
.review-title h1 { margin: 0; max-width: none; font-size: 1.55rem; }
.review-title .eyebrow { margin-bottom: 2px; }
.review-title code { max-width: 28ch; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.candidate-navigation { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.review-list { display: grid; gap: 12px; }
.review-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.review-row h2 { overflow-wrap: anywhere; font-size: 1.1rem; }
.review-row p:last-child { color: var(--muted); white-space: pre-wrap; }
.review-row-actions { display: grid; gap: 10px; justify-items: end; flex: 0 0 auto; }
.review-state { padding: 3px 8px; border-radius: 999px; background: #eee9dd; color: var(--muted); font-size: .75rem; font-weight: 800; }
.review-state.accepted { color: var(--deep); background: #e2ece6; }
.review-workspace { display: grid; grid-template-columns: minmax(340px, 44fr) minmax(560px, 56fr); gap: 14px; align-items: start; }
.review-visual { position: sticky; top: 10px; display: grid; gap: 8px; }
.ocr-text, .source-image, .review-editor { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.source-image img { display: block; width: 100%; height: min(72vh, 760px); object-fit: contain; border-radius: 4px; background: #151816; }
.ocr-text { padding: 8px 12px; }
.ocr-text summary { border: 0; padding: 2px 0; font-size: .84rem; }
.ocr-text pre { max-height: 180px; margin: 8px 0 0; padding: 10px; overflow: auto; white-space: pre-wrap; background: #f1eee5; font-size: .76rem; }
.review-editor { padding: 14px; }
.local-recognition-note { margin: 0 0 9px; color: var(--muted); font-size: .78rem; }
.learned-note { margin: 0 0 9px; padding: 7px 9px; border-radius: 4px; color: var(--deep); background: #e2eee7; font-size: .74rem; font-weight: 700; }
.ocr-confidence { margin: 0 0 9px; padding: 9px 11px; border: 1px solid var(--line); border-left: 5px solid #9a5a43; border-radius: 5px; background: #f6eee7; }
.ocr-confidence.medium { border-left-color: #b18432; background: #f7f1df; }
.ocr-confidence.high { border-left-color: #4f8d70; background: #eaf3ed; }
.ocr-confidence div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ocr-confidence span { font-size: .78rem; font-weight: 800; }
.ocr-confidence strong { font-size: 1.35rem; color: var(--deep); }
.ocr-confidence p, .ocr-confidence small { display: block; margin: 2px 0 0; color: var(--muted); font-size: .7rem; }
.field-note { margin: 0 0 9px; color: var(--muted); font-size: .72rem; }
.compact-form { margin-top: 0; }
.visual-picker { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf8; }
.visual-picker > header, .ingredient-picker > header, .mint-picker { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.visual-picker h2, .visual-picker p, .ingredient-picker p { margin: 0; }
.visual-picker h2 { font-size: .94rem; }
.visual-picker p, .ingredient-picker small { color: var(--muted); font-size: .68rem; }
.visual-picker header > input { width: min(100%, 260px); min-height: 36px; padding: 6px 9px; font-size: .78rem; }
.species-choice-grid { display: grid; max-height: 280px; margin-top: 9px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; overflow-y: auto; padding-right: 2px; }
.species-choice, .ingredient-choice-grid button { display: flex; min-width: 0; min-height: 54px; padding: 5px; align-items: center; gap: 6px; border: 1px solid #d4dbd6; border-radius: 6px; color: var(--ink); background: white; box-shadow: none; font-size: .7rem; font-weight: 750; text-align: left; }
.species-choice:hover, .ingredient-choice-grid button:hover { transform: none; border-color: #6fa487; background: #f1f8f3; }
.species-choice.selected, .ingredient-choice-grid button.selected { border-color: var(--deep); background: #e4f1e9; box-shadow: inset 0 0 0 1px var(--deep); }
.species-choice img, .species-choice-placeholder { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 6px; object-fit: cover; }
.species-choice-placeholder { display: grid; place-items: center; color: #48695c; background: linear-gradient(135deg, #e3f1e7, #e3edf5); font-size: 1rem; font-weight: 900; }
.species-choice > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nature-picker { margin-top: 10px; }
.nature-choice-grid { display: grid; margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 6px; }
.nature-choice { position: relative; display: block; min-height: 58px; cursor: pointer; }
.nature-choice input, .segmented-choice input { position: absolute; opacity: 0; pointer-events: none; }
.nature-choice > span { display: grid; height: 100%; padding: 7px 9px; gap: 1px; border: 1px solid #d4dbd6; border-radius: 6px; background: white; }
.nature-choice b { font-size: .78rem; }.nature-choice small { font-size: .62rem; }.nature-choice .up { color: #37805a; }.nature-choice .down { color: #b15e52; }
.nature-choice input:checked + span { border-color: var(--deep); background: #e4f1e9; box-shadow: inset 0 0 0 1px var(--deep); }
.nature-choice.unresolved input:checked + span { border-color: #9e8360; background: #faf2df; box-shadow: inset 0 0 0 1px #9e8360; }
.mint-picker { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf8; }
.mint-picker > span { font-size: .82rem; font-weight: 800; }
.segmented-choice { display: flex; gap: 4px; }
.segmented-choice label { position: relative; cursor: pointer; }
.segmented-choice label span { display: block; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: white; font-size: .7rem; font-weight: 750; }
.segmented-choice input:checked + span { border-color: var(--deep); color: white; background: var(--deep); }
.ingredient-picker { padding: 7px 0 9px; border-bottom: 1px solid #e4e1d8; }.ingredient-picker:last-child { border-bottom: 0; }
.ingredient-choice-grid { display: grid; margin-top: 5px; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 4px; }
.ingredient-choice-grid button { min-height: 42px; padding: 4px 6px; font-size: .64rem; }.ingredient-choice-grid button i { font-size: 1.15rem; font-style: normal; }
.review-core { display: grid; grid-template-columns: 1.35fr .72fr 1fr 74px 1fr 86px; gap: 8px; align-items: end; }
.review-core label, .compact-slots label { gap: 3px; font-size: .74rem; }
.review-core input, .review-core select, .compact-slots input, .compact-slots select, .compact-form textarea { padding: 7px 8px; }
.shiny-checkbox > span:last-child { display: flex; min-height: 39px; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: white; }
.shiny-checkbox input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--deep); }
.review-slots { display: grid; grid-template-columns: 1fr 1.65fr; gap: 8px; margin-top: 10px; }
.review-slots fieldset { min-width: 0; margin: 0; padding: 9px; }
.review-slots legend { font-size: .86rem; }
.compact-slots { display: grid; gap: 6px; }
.compact-slots.ingredients { grid-template-columns: 1fr; }
.compact-slots.subskills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subskill-slot { position: relative; gap: 4px; padding-top: 4px; --skill-border: #cfd2d0; --skill-fill-top: #fff; --skill-fill-bottom: #fafafa; }
.subskill-slot.rank-gold { --skill-border: #d7aa2d; --skill-fill-top: #fff7c9; --skill-fill-bottom: #ffe99a; }
.subskill-slot.rank-blue { --skill-border: #69aeda; --skill-fill-top: #eef9ff; --skill-fill-bottom: #d9f0fc; }
.subskill-slot.rank-white { --skill-border: #cfd2d0; --skill-fill-top: #fff; --skill-fill-bottom: #f7f7f5; }
.subskill-slot-heading { display: flex; min-height: 19px; align-items: center; justify-content: space-between; gap: 6px; }
.subskill-slot select { min-height: 43px; border: 2px solid var(--skill-border); border-radius: 6px; color: var(--ink); background: linear-gradient(var(--skill-fill-top), var(--skill-fill-bottom)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%), 0 1px 2px rgb(37 48 44 / 10%); font-weight: 750; text-align-last: center; }
.subskill-slot.locked select { opacity: .58; filter: saturate(.7); }
.subskill-slot [data-unlock-state] { padding: 1px 7px; border-radius: 999px; color: white; background: #8d6b52; font-size: .61rem; font-weight: 800; line-height: 1.45; white-space: nowrap; }
.subskill-slot [data-unlock-state][hidden] { display: none; }
.evaluation-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.evaluation-metrics div { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.evaluation-metrics strong { color: var(--deep); font-size: 1.35rem; }
.evaluation-metrics span { color: var(--muted); font-size: .7rem; }
.label-review-start { margin-top: 16px; }
.visual-prediction { display: grid; gap: 3px; margin: 8px 0 14px; padding: 12px; border: 1px solid #69aeda; border-left-width: 5px; border-radius: 6px; background: #eef9ff; }
.visual-prediction.unknown { border-color: var(--line); background: #f5f3ec; }
.visual-prediction span, .visual-prediction p { color: var(--muted); font-size: .72rem; }
.visual-prediction strong { font-size: 1.15rem; }
.visual-prediction p { margin: 0; }
.prediction-candidates { display: grid; gap: 3px; margin: 6px 0 0; padding: 6px 0 0 1.2rem; border-top: 1px solid var(--line); }
.prediction-candidates li { padding-left: 2px; }
.prediction-candidates li span { color: var(--ink); font-size: .78rem; }
.prediction-candidates li small { margin-left: 6px; color: var(--muted); }
.costume-note { margin: 6px 0; padding: 7px 9px; border-left: 3px solid #d29a32; background: #fff4d7; color: #5d471f; font-size: .74rem; }
.species-label-actions { flex-wrap: wrap; }
.compact-form > label { margin-top: 9px; }
.compact-actions { margin-top: 9px; }
.reject-form { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.reject-form button { min-height: 36px; padding-block: 5px; }
.roadmap-page main { width: min(calc(100% - 32px), 1120px); }
.roadmap-hero { display: flex; min-height: 148px; padding: 24px 28px; align-items: end; justify-content: space-between; gap: 24px; overflow: hidden; border: 1px solid #2b3a53; border-radius: 10px; color: white; background: linear-gradient(112deg, #111b2e 0 64%, #193a48 100%); box-shadow: 0 10px 28px rgb(13 24 42 / 13%); }
.roadmap-hero h1 { margin-bottom: 6px; color: white; }
.roadmap-hero p:not(.eyebrow) { max-width: 660px; margin: 0; color: #b8c4d5; }
.roadmap-hero .eyebrow { color: #72c9ea; }
.roadmap-updated { flex: 0 0 auto; padding: 8px 12px; border: 1px solid #50647d; border-radius: 7px; background: #192941; }
.roadmap-updated span, .roadmap-updated strong { display: block; }
.roadmap-updated span { color: #9eb0c6; font-size: .62rem; }
.roadmap-updated strong { color: white; font-size: .78rem; }
.notices-page main { width: min(calc(100% - 32px), 1120px); }
.notice-hero { display: flex; min-height: 132px; padding: 22px 26px; align-items: end; justify-content: space-between; gap: 22px; border: 1px solid #2b3a53; border-radius: 10px; color: white; background: linear-gradient(112deg, #111b2e 0 68%, #193a48 100%); box-shadow: 0 10px 28px rgb(13 24 42 / 13%); }
.notice-hero h1 { margin: 0 0 5px; color: white; }
.notice-hero p:not(.eyebrow) { max-width: 680px; margin: 0; color: #c4cfdd; }
.notice-hero .eyebrow { color: #72c9ea; }
.notice-hero form { flex: 0 0 auto; }
.notice-toolbar { display: flex; margin-top: 12px; padding: 13px 16px; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.notice-toolbar > div { display: grid; gap: 2px; }
.notice-toolbar small { color: var(--muted); }
.notice-filters { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.notice-filters a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .7rem; }
.notice-filters a.active { border-color: var(--green); color: white; background: var(--green); }
.official-notice-list { display: grid; margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.official-notice-card { min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid #5885b2; border-radius: 9px; background: var(--card); box-shadow: 0 5px 14px rgb(44 48 43 / 4%); }
.official-notice-card.notice-category-イベント, .official-notice-card.notice-category-キャンペーン { border-left-color: #d79d3b; }
.official-notice-card.notice-category-不具合 { border-left-color: #c7664a; }
.official-notice-card.notice-category-お知らせ { border-left-color: #4a9b78; }
.official-notice-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .68rem; }
.official-notice-meta span { font-weight: 800; color: var(--green); }
.official-notice-card h2 { margin: 9px 0 13px; font-size: 1rem; line-height: 1.45; }
.official-notice-card > a { color: var(--green); font-size: .72rem; font-weight: 800; }
.notice-signal-board { margin-top: 12px; padding: 13px 16px; border: 1px solid #d7c98c; border-radius: 9px; background: #fffbec; }
.notice-signal-board > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.notice-signal-board h2, .notice-signal-board p { margin: 0; }
.notice-signal-board h2 { font-size: .95rem; }
.notice-signal-board p { margin-top: 2px; color: var(--muted); font-size: .63rem; }
.notice-signal-board > header > span { color: #765816; font-size: .65rem; font-weight: 850; }
.notice-signal-board > div { display: grid; margin-top: 9px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.notice-signal-board > div > a { display: grid; min-width: 0; padding: 9px; gap: 5px; border: 1px solid #eadca9; border-radius: 7px; color: var(--ink); background: white; text-decoration: none; }
.notice-signal-board a > span { display: flex; flex-wrap: wrap; gap: 3px; }
.notice-signal-board a b, .notice-signal-chips span { padding: 2px 6px; border-radius: 999px; color: #765816; background: #fff0b9; font-size: .53rem; }
.notice-signal-board a > strong { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.notice-signal-board a > small { color: var(--green); font-size: .56rem; font-weight: 750; }
.notice-signal-chips { display: flex; margin-top: 9px; flex-wrap: wrap; gap: 4px; }
.notice-empty { grid-column: 1 / -1; padding: 34px; border: 1px dashed var(--line); border-radius: 9px; text-align: center; background: var(--card); }
.notice-empty p { margin-bottom: 0; color: var(--muted); }
.notice-policy { margin-top: 12px; padding: 12px 15px; border-radius: 8px; color: var(--muted); background: #eef2ef; font-size: .7rem; }
.notice-policy p { display: inline; margin: 0 0 0 8px; }
.roadmap-purpose, .product-flow, .status-board, .change-board, .roadmap-plan, .principles { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); box-shadow: 0 7px 18px rgb(44 48 43 / 5%); }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.section-title-row h2 { margin: 2px 0 0; font-size: 1.2rem; }
.section-title-row > p { margin: 0; color: var(--muted); font-size: .74rem; }
.purpose-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.purpose-grid article { position: relative; min-height: 120px; padding: 16px 15px 14px 48px; overflow: hidden; border: 1px solid #d4dfd8; border-radius: 8px; background: linear-gradient(145deg, #eef6f1, white 68%); }
.purpose-grid article:nth-child(2) { border-color: #e4d4b5; background: linear-gradient(145deg, #fbf3e4, white 68%); }
.purpose-grid article:nth-child(3) { border-color: #cbd9e5; background: linear-gradient(145deg, #edf4f9, white 68%); }
.purpose-grid article > span { position: absolute; left: 13px; top: 15px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: white; background: var(--berry); font-size: .62rem; font-weight: 850; }
.purpose-grid article:nth-child(2) > span { background: var(--ingredient); }
.purpose-grid article:nth-child(3) > span { background: var(--skill); }
.purpose-grid h3 { margin: 0 0 6px; font-size: .92rem; }
.purpose-grid p { margin: 0; color: var(--muted); font-size: .74rem; }
.product-flow ol { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; }
.product-flow li { position: relative; display: flex; min-width: 0; padding: 10px; align-items: center; gap: 9px; border-radius: 7px; background: #f0f3f1; }
.product-flow li:not(:last-child)::after { content: "›"; position: absolute; right: -7px; z-index: 1; color: var(--deep); font-size: 1.25rem; }
.product-flow li b { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: white; background: var(--deep); font-size: .7rem; }
.product-flow strong, .product-flow small { display: block; }
.product-flow strong { font-size: .8rem; }
.product-flow small { color: var(--muted); font-size: .62rem; }
.roadmap-columns { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; }
.status-list { display: grid; gap: 8px; }
.status-list article { display: grid; padding: 10px; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 10px; border: 1px solid #e1e2dc; border-radius: 7px; }
.status-list h3, .status-list p { margin: 0; }
.status-list h3 { font-size: .82rem; }
.status-list p { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.status-chip { padding: 3px 6px; border-radius: 999px; color: white; background: var(--berry); font-size: .58rem; font-weight: 800; text-align: center; white-space: nowrap; }
.status-chip.active { background: var(--ingredient); }
.status-chip.planned { background: var(--violet); }
.change-list { display: grid; margin: 0; padding: 0; gap: 2px; list-style: none; }
.change-list li { display: grid; padding: 9px 2px; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; border-bottom: 1px solid #e4e3dc; }
.change-list li:last-child { border-bottom: 0; }
.change-list time { color: var(--accent); font-size: .6rem; font-weight: 850; }
.change-list strong { display: block; font-size: .8rem; }
.change-list p { margin: 2px 0 0; color: var(--muted); font-size: .67rem; }
.phase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.phase-grid article { padding: 14px; border: 1px solid var(--line); border-top: 4px solid #8da0b6; border-radius: 7px; background: white; }
.phase-grid article.current { border-top-color: var(--berry); background: linear-gradient(150deg, #eef7f1, white 65%); }
.phase-grid article > span { color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .07em; }
.phase-grid article.current > span { color: var(--berry); }
.phase-grid h3 { margin: 4px 0 8px; font-size: .84rem; }
.phase-grid ul { margin: 0; padding-left: 17px; color: var(--muted); font-size: .67rem; }
.phase-grid li + li { margin-top: 3px; }
.principles { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
.principles ul { display: grid; margin: 0; padding: 0; grid-template-columns: 1fr 1fr; gap: 9px; list-style: none; }
.principles li { padding: 9px 11px; border-left: 4px solid var(--deep); background: #f1f3ef; }
.principles strong, .principles span { display: block; }
.principles strong { font-size: .76rem; }
.principles span { margin-top: 2px; color: var(--muted); font-size: .65rem; }
.advice-layout main, .advice-layout footer { width: min(calc(100% - 24px), 1440px); }
.advice-layout main { padding-top: 16px; }
.advice-header { display: flex; min-height: 112px; padding: 18px 22px; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #2b3a53; border-radius: 10px; color: white; background: linear-gradient(112deg, #111b2e 0 68%, #193a48 100%); }
.advice-header h1 { margin: 2px 0 3px; color: white; font-size: 1.55rem; }
.advice-header p { margin: 0; color: #bdc9d8; font-size: .74rem; }
.advice-header .eyebrow { color: #78caeb; }
.advice-header-actions { display: flex; gap: 7px; }
.advice-header { min-height: 0; padding: 12px 14px; gap: 12px; background: #111b2e; }
.advice-header p, .advice-header .eyebrow { display: none; }
.advice-consultation { margin-top: 10px; padding: 14px; border: 1px solid #c9d8d0; border-radius: 10px; background: #fbfcf9; box-shadow: 0 7px 18px rgb(44 48 43 / 5%); }
.consult-event-briefing { margin: -3px -3px 13px; padding: 10px; border: 1px solid #c8d9e2; border-radius: 8px; background: #f3f9fc; }
.consult-event-briefing > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.consult-event-briefing > summary::-webkit-details-marker { display: none; }
.consult-event-briefing > summary > span:first-child { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: white; background: #4f83ad; font-size: .72rem; font-weight: 900; }
.consult-event-briefing > summary strong { font-size: .76rem; }
.consult-event-briefing > summary small { color: var(--muted); font-size: .6rem; }
.consult-event-briefing > summary > span:last-child { margin-left: auto; color: var(--deep); font-size: .64rem; font-weight: 800; }
.consult-event-briefing[open] > summary > span:last-child::after { content: 'を閉じる'; }
.consult-event-briefing[open] > summary > span:last-child { font-size: 0; }
.consult-event-briefing[open] > summary > span:last-child::after { font-size: .64rem; }
.consult-event-cards { display: grid; margin-top: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.consult-event-cards article { min-width: 0; padding: 8px; border: 1px solid #cedde4; border-radius: 7px; background: white; }
.consult-event-cards article.current { border-color: #8fc7a2; background: #f3fbf5; }
.consult-event-cards article > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.consult-event-cards article > div span { padding: 2px 5px; border-radius: 99px; color: #3f7094; background: #e8f3f9; font-size: .53rem; font-weight: 850; }
.consult-event-cards article.current > div span { color: #276a42; background: #def1e4; }
.consult-event-cards time { color: var(--muted); font-size: .54rem; white-space: nowrap; }
.consult-event-cards article > strong { display: block; margin-top: 5px; overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.consult-event-cards article > p { display: flex; min-height: 19px; margin: 4px 0; gap: 3px; overflow: hidden; }
.consult-event-cards article > p b { padding: 2px 5px; overflow: hidden; border-radius: 4px; color: #56646d; background: #eef1f2; font-size: .52rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.consult-event-cards article > small { color: #a45438; font-size: .56rem; font-weight: 750; }
.consult-no-event { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .66rem; }
.advice-consultation form > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.advice-consultation form > header > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.advice-consultation form > header h2, .advice-consultation form > header p { margin: 0; }
.advice-consultation form > header h2 { font-size: 1rem; }
.advice-consultation form > header p { margin-top: 2px; color: var(--muted); font-size: .66rem; }
.advice-consultation form > header > a { color: var(--deep); font-size: .68rem; font-weight: 800; }
.consult-avatar { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: white; background: var(--skill); font-weight: 900; }
.consult-steps { display: grid; margin-top: 12px; gap: 7px; }
.advice-consultation.is-ready .consult-steps { display: none; }
.consult-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; }
.consult-step[hidden] { display: none; }
.consult-step > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: white; background: #4f83ad; font-size: .68rem; font-weight: 900; }
.consult-step > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 8px; }
.consult-step > div > strong { font-size: .75rem; }
.consult-step > div > div { display: flex; flex-wrap: wrap; gap: 5px; }
.consult-step button { min-height: 36px; padding: 6px 11px; border-color: #bdcdc5; color: var(--deep); background: white; box-shadow: none; font-size: .7rem; }
.consult-step button.selected { border-color: var(--deep); color: white; background: var(--deep); }
.consult-result { display: grid; margin-top: 12px; padding: 11px 12px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; border-left: 4px solid var(--berry); border-radius: 7px; background: #eef8f1; }
.consult-result small, .consult-result strong { display: block; }
.consult-result small { color: var(--berry); font-size: .61rem; font-weight: 800; }
.consult-result strong { margin-top: 2px; font-size: .9rem; }
.consult-result p { margin: 2px 0 0; color: var(--muted); font-size: .66rem; }
.consult-field-options { display: flex; margin-top: 7px; flex-wrap: wrap; align-items: center; gap: 4px; }
.consult-field-options b, .consult-field-options span { padding: 3px 6px; border-radius: 4px; font-size: .56rem; }
.consult-field-options b { color: white; background: var(--deep); }
.consult-field-options span { color: #425b4f; background: #dfeee5; }
.consult-used-event { display: inline-flex; margin-top: 6px; align-items: center; gap: 5px; color: #4d6257; font-size: .58rem; }
.consult-used-event b { padding: 2px 5px; border-radius: 4px; color: white; background: var(--berry); }
.box-diagnosis { margin-top: 9px; border: 1px solid #bdd4c8; border-radius: 8px; background: #f3faf6; }
.box-diagnosis summary { display: grid; min-height: 48px; padding: 8px 11px; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; cursor: pointer; list-style: none; }
.box-diagnosis summary::-webkit-details-marker { display: none; }
.box-diagnosis summary > span:first-child { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; color: white; background: var(--deep); font-weight: 900; }
.box-diagnosis summary strong, .box-diagnosis summary small { display: block; }
.box-diagnosis summary strong { font-size: .76rem; }
.box-diagnosis summary small { margin-top: 2px; color: var(--muted); font-size: .56rem; }
.box-diagnosis summary > span:last-child { color: var(--deep); font-size: .62rem; font-weight: 850; }
.box-diagnosis-body { padding: 0 11px 10px; border-top: 1px solid #d7e6dd; }
.box-diagnosis-body > p { margin: 8px 0; color: #52685c; font-size: .62rem; }
.box-diagnosis-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.box-diagnosis-columns section { min-width: 0; padding: 8px; border: 1px solid #d4e1da; border-radius: 6px; background: white; }
.box-diagnosis-columns section > strong { display: block; margin-bottom: 6px; font-size: .64rem; }
.box-diagnosis-columns section > small { color: var(--muted); font-size: .58rem; }
.box-diagnosis-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.box-diagnosis-chips a { padding: 4px 6px; border: 1px solid #d4ddd7; border-radius: 4px; color: var(--deep); background: #fffdf8; font-size: .58rem; font-weight: 750; }
.box-training-candidates { margin-top: 8px; padding: 8px; border: 1px solid #d4e1da; border-radius: 6px; background: white; }
.box-training-candidates > strong, .box-training-candidates > small { display: block; }
.box-training-candidates > strong { font-size: .64rem; }
.box-training-candidates > small { margin-top: 2px; color: var(--muted); font-size: .55rem; }
.box-training-candidates > div { display: grid; margin-top: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.box-training-candidates a { min-width: 0; padding: 6px; border: 1px solid #d9e3dd; border-radius: 5px; background: #f8fcf9; }
.box-training-candidates a b, .box-training-candidates a span, .box-training-candidates a small { display: block; }
.box-training-candidates a b { color: var(--deep); font-size: .61rem; }
.box-training-candidates a span { overflow: hidden; margin-top: 2px; color: #53685c; font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }
.box-training-candidates a small { margin-top: 2px; color: var(--muted); font-size: .5rem; }
.box-diagnosis-actions { display: flex; margin-top: 8px; flex-wrap: wrap; gap: 6px; }
.box-diagnosis-actions .button { min-height: 34px; padding: 7px 10px; font-size: .62rem; }
.advice-ai-settings { margin-top: 9px; border: 1px solid #d1ddd6; border-radius: 7px; background: #fbfcfa; }
.advice-ai-settings summary { display: flex; min-height: 40px; padding: 8px 11px; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-size: .7rem; font-weight: 850; }
.advice-ai-settings summary small { color: var(--muted); font-size: .56rem; font-weight: 650; }
.advice-ai-settings > form { display: grid; padding: 0 11px 9px; grid-template-columns: minmax(0, 1fr) minmax(230px, .7fr) auto; align-items: end; gap: 8px; }
.advice-ai-settings > form > label:first-of-type > span, .advice-ai-settings > form small { display: block; }
.advice-ai-settings > form > label:first-of-type > span { margin-bottom: 3px; font-size: .6rem; font-weight: 800; }
.advice-ai-settings textarea { width: 100%; min-height: 58px; resize: vertical; }
.advice-ai-detail-toggle { display: flex; min-height: 58px; padding: 8px; align-items: center; gap: 7px; border: 1px solid #d4ddd7; border-radius: 6px; background: white; }
.advice-ai-detail-toggle input { flex: 0 0 auto; width: 18px; height: 18px; }
.advice-ai-detail-toggle b { display: block; font-size: .65rem; }
.advice-ai-detail-toggle small { margin-top: 2px; color: var(--muted); font-size: .53rem; }
.advice-ai-settings > form > button { min-height: 42px; }
.advice-ai-exclusions { display: grid; grid-column: 1 / -1; gap: 6px; padding: 8px; border: 1px solid #d4ddd7; border-radius: 6px; background: white; }
.advice-ai-exclusions > div:first-child { display: grid; grid-template-columns: minmax(170px, .4fr) minmax(0, 1fr); align-items: end; gap: 8px; }
.advice-ai-exclusions label b, .advice-ai-exclusions label small { display: block; }
.advice-ai-exclusions label b { font-size: .65rem; }
.advice-ai-exclusions label small { margin-top: 2px; color: var(--muted); font-size: .53rem; }
.advice-ai-exclusions > div:first-child > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
.advice-ai-exclusions input[type="search"] { min-height: 40px; }
.advice-ai-exclusion-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.advice-ai-exclusion-chips:empty { display: none; }
.advice-ai-exclusion-chips button { min-height: 34px; padding: 5px 9px; border-color: #c6d8ce; border-radius: 999px; background: #eef6f1; color: var(--berry); }
.advice-ai-exclusion-chips button small { display: inline; margin-left: 5px; color: var(--muted); }
.advice-ai-settings > p { margin: 0; padding: 7px 11px; border-top: 1px solid #e0e7e2; color: var(--muted); font-size: .56rem; }
.advice-ai-settings > p b { color: var(--berry); }
.training-page { display: grid; width: min(1320px, calc(100% - 24px)); margin: 16px auto; gap: 10px; }
.training-header { padding: 11px 14px; border-radius: 9px; color: white; background: #102039; }
.training-header small { color: #9ed8ef; font-weight: 850; }
.training-header h1 { margin: 3px 0; font-size: 1.45rem; }
.training-header p { display: none; }
.training-controls { display: block; padding: 0; border: 0; background: transparent; }
.training-settings { overflow: hidden; border: 1px solid #d7dfd9; border-radius: 8px; background: white; }
.training-settings summary { display: flex; min-height: 42px; padding: 0 10px; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.training-settings summary::-webkit-details-marker { display: none; }
.training-settings summary::after { content: '⌄'; color: var(--deep); font-size: 1rem; }
.training-settings[open] summary { border-bottom: 1px solid #e2e8e3; }.training-settings[open] summary::after { transform: rotate(180deg); }
.training-settings summary span { color: var(--deep); font-size: .72rem; font-weight: 850; }.training-settings summary b { overflow: hidden; color: var(--muted); font-size: .64rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.training-setting-fields { display: grid; padding: 8px 10px 10px; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px; }.training-setting-fields label span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .56rem; font-weight: 800; }.training-setting-fields select, .training-setting-fields input { width: 100%; min-height: 38px; }
.training-search { display: flex; padding: 5px 7px; align-items: center; gap: 7px; border: 1px solid #d4ddd7; border-radius: 8px; background: white; }
.training-search input { min-width: 0; flex: 1; border: 0; outline: 0; }
.training-search button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #edf1ee; }
.training-summary { display: flex; padding: 7px 9px; align-items: center; gap: 9px; border-left: 4px solid var(--berry); background: #f7faf8; }
.training-summary b { font-size: .72rem; }
.training-summary span { color: var(--berry); font-size: .65rem; font-weight: 850; }
.training-summary small { display: none; }
.training-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.training-list article { display: grid; min-width: 0; padding: 10px; gap: 8px; border: 1px solid #d9dfda; border-radius: 8px; background: #fffdf8; }
.training-subject { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.training-subject img, .training-subject i { width: 46px; height: 46px; border-radius: 7px; object-fit: cover; }
.training-subject i { display: grid; place-items: center; background: #f0f2ef; font-style: normal; }
.training-subject span { min-width: 0; }
.training-subject small, .training-subject b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-subject small { color: var(--muted); font-size: .5rem; }
.training-subject b { font-size: .78rem; }
.training-subject em { padding: 4px 7px; border-radius: 999px; color: var(--berry); background: #e6f2eb; font-size: .6rem; font-style: normal; font-weight: 850; }
.training-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.training-metrics span { padding: 7px; border-radius: 6px; background: #f3f5f2; }
.training-metrics small, .training-metrics strong { display: block; }
.training-metrics small { color: var(--muted); font-size: .48rem; }
.training-metrics strong { margin-top: 2px; font-size: .72rem; }
.training-list article footer { display: flex; align-items: center; gap: 7px; font-size: .52rem; }
.training-list article footer b { color: var(--ingredient); }
.training-list article footer a { margin-left: auto; color: var(--berry); font-weight: 850; }
.training-empty { grid-column: 1 / -1; padding: 24px; text-align: center; }
.training-notes { padding: 10px; border: 1px solid #ddd9c8; border-radius: 8px; background: #fffaf0; }
.training-notes > b { font-size: .68rem; }
.training-notes p { margin: 4px 0; color: var(--muted); font-size: .55rem; line-height: 1.5; }
.training-notes div { display: flex; gap: 12px; }
.training-notes a { color: var(--berry); font-size: .55rem; font-weight: 800; }
.advice-ai-followup { display: grid; margin-top: 9px; padding-top: 9px; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 8px 12px; border-top: 1px solid #d8e1dc; }
.advice-ai-followup > div:first-child strong, .advice-ai-followup > div:first-child small { display: block; }
.advice-ai-followup > div:first-child strong { font-size: .76rem; }
.advice-ai-followup > div:first-child small { margin-top: 2px; color: var(--muted); font-size: .56rem; }
.advice-ai-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.advice-ai-input input { min-width: 0; }
.advice-ai-input button { min-height: 42px; }
.advice-ai-answer { grid-column: 1 / -1; padding: 10px; border: 1px solid #c8d9e2; border-radius: 7px; background: #f3f9fc; }
.advice-ai-answer > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.advice-ai-answer > div b { color: #285778; font-size: .66rem; }
.advice-ai-answer > div small { color: var(--muted); font-size: .52rem; }
.advice-ai-answer p { margin: 5px 0; font-size: .7rem; }
.advice-ai-answer ol { margin: 5px 0 0; padding-left: 20px; color: var(--muted); font-size: .64rem; }
.advice-ai-basis { display: flex !important; margin-top: 6px; justify-content: flex-start !important; flex-wrap: wrap; gap: 4px !important; }
.advice-ai-basis span { padding: 3px 6px; border-radius: 4px; color: #315b48; background: #dfede5; font-size: .54rem; font-weight: 750; }
.advice-ai-clarification { display: flex !important; margin-top: 8px; padding: 7px 8px; align-items: center; justify-content: space-between !important; gap: 8px; border-left: 3px solid #4f83ad; border-radius: 5px; background: white; }
.advice-ai-clarification strong { color: var(--ink) !important; font-size: .62rem !important; }
.advice-ai-clarification button { min-height: 34px; padding: 5px 9px; white-space: nowrap; }
.advice-command { position: sticky; z-index: 10; top: 74px; display: grid; margin-top: 10px; padding: 9px; grid-template-columns: minmax(220px, 1fr) auto; gap: 9px; border: 1px solid #cad7d0; border-radius: 9px; background: rgb(249 250 246 / 96%); box-shadow: 0 7px 18px rgb(32 46 39 / 8%); backdrop-filter: blur(8px); }
.advice-search { display: grid; min-width: 0; min-height: 43px; padding: 0 7px 0 12px; grid-template-columns: auto 1fr 34px; align-items: center; gap: 8px; border: 1px solid #bdcdc5; border-radius: 7px; background: white; }
.advice-search input { min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; }
.advice-search button { width: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: #edf1ee; box-shadow: none; }
.advice-tabs { display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr)); gap: 5px; }
.advice-tabs button { min-height: 43px; padding: 7px 13px; border-color: #b9cbc2; color: var(--deep); background: white; box-shadow: none; }
.advice-tabs button.active { border-color: var(--deep); color: white; background: var(--deep); }
.advice-panel { margin-top: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 7px 18px rgb(44 48 43 / 5%); }
.advice-panel[hidden] { display: none; }
.advice-section-heading { display: flex; margin-bottom: 12px; align-items: end; justify-content: space-between; gap: 16px; }
.advice-section-heading h2 { margin: 0; font-size: 1.12rem; }
.advice-section-heading p, .advice-section-heading > span { margin: 3px 0 0; color: var(--muted); font-size: .67rem; }
.role-coverage-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.role-coverage { min-width: 0; padding: 11px; border: 1px solid #d4ddd7; border-top: 4px solid #84958c; border-radius: 8px; background: #f8faf8; }
.role-coverage.ready { border-top-color: var(--berry); background: #f1f8f3; }
.role-coverage.missing { border-top-color: #c8664b; background: #fff5f1; }
.role-coverage > div { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.role-coverage h3, .role-coverage p { margin: 0; }
.role-coverage h3 { min-width: 0; font-size: .76rem; }
.role-coverage strong { font-size: .75rem; white-space: nowrap; }
.role-coverage p { min-height: 32px; margin-top: 8px; color: var(--muted); font-size: .63rem; }
.role-coverage a { display: inline-block; margin-top: 6px; color: var(--deep); font-size: .62rem; font-weight: 800; }
.role-status { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: white; background: #84958c; font-size: .63rem; font-weight: 900; }
.ready .role-status { background: var(--berry); }
.missing .role-status { background: #c8664b; }
.advice-split { display: grid; margin-top: 10px; grid-template-columns: 1fr 1fr; gap: 10px; }
.advice-block { min-width: 0; padding: 13px; border: 1px solid #d7dfda; border-radius: 9px; background: white; }
.advice-block header h2, .advice-block header p { margin: 0; }
.advice-block header h2 { font-size: .9rem; }
.advice-block header p { margin-top: 2px; color: var(--muted); font-size: .63rem; }
.coverage-tiles { display: grid; margin-top: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.coverage-tile { display: grid; min-width: 0; min-height: 68px; padding: 7px 4px; place-items: center; align-content: center; gap: 2px; border: 1px solid #cee0d7; border-radius: 7px; color: var(--ink); background: #f2f8f4; text-align: center; text-decoration: none; }
.coverage-tile.missing { border-color: #e8d5b1; background: #fff8eb; }
.coverage-tile > span:not(.type-dot) { font-size: 1.25rem; }
.coverage-tile b { width: 100%; overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.coverage-tile small { color: var(--muted); font-size: .54rem; }
.coverage-tile.missing small { color: #aa5a35; font-weight: 850; }
.type-dot { display: block; width: 17px; height: 17px; border: 4px solid #e0e9e4; border-radius: 50%; background: var(--skill); }
.strategy-highlight { display: grid; padding: 12px 14px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; border: 1px solid #d8c98d; border-radius: 8px; background: #fffae9; }
.field-purpose-grid { display: grid; margin-bottom: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.field-purpose-grid article { display: grid; min-width: 0; padding: 10px; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 7px; border: 1px solid #d5dfda; border-radius: 8px; background: #f7faf8; }
.field-purpose-grid article > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: white; background: var(--deep); font-size: .78rem; }
.field-purpose-grid h3, .field-purpose-grid p { margin: 0; }
.field-purpose-grid h3 { font-size: .75rem; }
.field-purpose-grid p { margin-top: 3px; color: var(--muted); font-size: .59rem; }
.field-purpose-grid a { grid-column: 2; font-size: .59rem; font-weight: 850; }
.strategy-highlight > div { display: flex; align-items: center; gap: 9px; }
.strategy-highlight > div > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; color: #6f5513; background: #f1d76f; font-size: 1.2rem; }
.strategy-highlight small, .strategy-highlight strong { display: block; }
.strategy-highlight small { color: #756629; font-size: .58rem; }
.strategy-highlight p { margin: 0; color: var(--muted); font-size: .67rem; }
.field-advice-list { display: grid; margin-top: 10px; gap: 6px; }
.field-advice { display: grid; min-height: 58px; padding: 8px 10px; grid-template-columns: 32px minmax(140px, .8fr) minmax(240px, 2fr) auto; align-items: center; gap: 9px; border: 1px solid #d9dfda; border-radius: 7px; }
.field-advice.current { box-shadow: inset 4px 0 var(--skill); }
.field-rank { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: white; background: var(--deep); font-size: .66rem; font-weight: 850; }
.field-advice h3, .field-advice p { margin: 0; }
.field-advice h3 { font-size: .78rem; }
.field-advice h3 small { margin-left: 5px; color: var(--skill); font-size: .53rem; }
.field-advice p { color: var(--muted); font-size: .6rem; }
.field-type-status { display: flex; flex-wrap: wrap; gap: 4px; }
.field-type-status span { padding: 3px 7px; border-radius: 999px; color: #236144; background: #e5f4eb; font-size: .57rem; font-weight: 750; }
.field-type-status span.missing { color: #9a512f; background: #fff0e8; }
.field-advice > strong { font-size: .61rem; }
.advice-data-note, .local-advice-note { margin: 10px 0 0; padding: 10px 12px; border-left: 4px solid #7c90a5; color: var(--muted); background: #f0f3f5; font-size: .64rem; }
.strategy-references { margin-top: 8px; padding: 11px 12px; border: 1px solid #d8dfda; border-radius: 8px; background: white; }
.strategy-references header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.strategy-references header strong { font-size: .72rem; }
.strategy-references header small { color: var(--muted); font-size: .56rem; }
.strategy-references ul { display: grid; margin: 9px 0 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; }
.strategy-references li { padding: 8px; border-radius: 6px; background: #f3f6f4; }
.strategy-references a, .strategy-references span { display: block; }
.strategy-references a { font-size: .64rem; font-weight: 850; }
.strategy-references span { margin-top: 2px; color: var(--muted); font-size: .56rem; }
.event-advice-list { display: grid; gap: 9px; }
.advice-news-signals { margin-bottom: 10px; padding: 11px; border: 1px solid #d7c98c; border-radius: 8px; background: #fffbec; }
.advice-news-signals > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.advice-news-signals > header strong, .advice-news-signals > header a { font-size: .67rem; }
.advice-news-signals > div { display: grid; margin-top: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.advice-news-signals > div > a { display: grid; min-width: 0; padding: 8px; gap: 4px; border: 1px solid #eadca9; border-radius: 6px; color: var(--ink); background: white; text-decoration: none; }
.advice-news-signals a > span { display: flex; flex-wrap: wrap; gap: 3px; }
.advice-news-signals a b { padding: 2px 5px; border-radius: 999px; color: #765816; background: #fff0b9; font-size: .5rem; }
.advice-news-signals a > strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.advice-news-signals a > small { color: var(--muted); font-size: .54rem; }
.event-advice-list > article { border: 1px solid #d8dfda; border-radius: 8px; overflow: hidden; }
.event-advice-list header, .event-advice-list footer { display: flex; padding: 9px 12px; align-items: center; justify-content: space-between; gap: 10px; background: #f3f6f3; }
.event-advice-list header > div { display: flex; align-items: center; gap: 8px; }
.event-advice-list h3 { margin: 0; font-size: .86rem; }
.event-advice-list time { color: var(--muted); font-size: .62rem; }
.event-status { padding: 3px 7px; border-radius: 999px; color: white; background: var(--skill); font-size: .55rem; font-weight: 850; white-space: nowrap; }
.event-status.upcoming { background: var(--ingredient); }
.event-advice-body { display: grid; padding: 11px 12px; grid-template-columns: 1fr 1fr; gap: 16px; }
.event-advice-body strong { font-size: .68rem; }
.event-advice-body p, .event-advice-body ul { margin: 4px 0 8px; color: var(--muted); font-size: .66rem; }
.event-advice-body ul { padding-left: 17px; }
.event-advice-list footer { justify-content: flex-end; background: white; }
.event-advice-list footer a { font-size: .63rem; font-weight: 800; }
.strategy-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.strategy-card-grid article { position: relative; min-height: 152px; padding: 13px; border: 1px solid #d8dfda; border-radius: 8px; background: linear-gradient(145deg, #f3f8f5, white 70%); }
.strategy-card-grid article > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: white; background: var(--deep); font-size: .65rem; font-weight: 850; }
.strategy-card-grid h3 { margin: 9px 0 5px; font-size: .85rem; }
.strategy-card-grid p { margin: 0 0 9px; color: var(--muted); font-size: .66rem; }
.strategy-card-grid a { font-size: .63rem; font-weight: 850; }
.local-advice-note strong, .local-advice-note p { display: inline; margin: 0; }
.local-advice-note p { margin-left: 6px; }
.advice-no-results { padding: 32px; color: var(--muted); text-align: center; }
.weekly-team-bar { display: grid; padding: 10px 14px; grid-template-columns: auto 1fr; align-items: center; gap: 16px; border: 1px solid #b9d8ca; border-radius: 12px; background: #f4fbf7; }
.weekly-team-bar > div:first-child strong, .weekly-team-bar > div:first-child small { display: block; }
.weekly-team-bar > div:first-child small { color: var(--muted); font-size: .72rem; }
.weekly-team-members { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.weekly-team-members span { display: flex; min-width: 0; padding: 5px 7px; align-items: center; gap: 6px; border-radius: 8px; background: #fff; }
.weekly-team-members img, .weekly-team-members i { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; object-fit: contain; }
.weekly-team-members i { display: grid; place-items: center; background: var(--soft); font-style: normal; }
.weekly-team-members b { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.recommendation-actions { display: flex; align-items: center; gap: 7px; }
.recommendation-actions form { margin: 0; }

@media (max-width: 1100px) {
  .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box-tools { grid-template-columns: minmax(190px, 1fr) auto; }
  .box-filter-grid { grid-template-columns: 1fr 1fr; }
  .box-tools output { text-align: left; }
  .scenario-panel { align-items: stretch; flex-direction: column; }
  .scenario-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .simulation-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-workspace { grid-template-columns: minmax(300px, 42fr) minmax(480px, 58fr); }
  .review-core { grid-template-columns: 1fr 1fr 70px; }
  .review-core .number-field:last-child { grid-column: 3; }
  .review-slots { grid-template-columns: 1fr; }
  .workbench { grid-template-columns: minmax(0, 1fr); }
  .focus-panel { grid-template-columns: 1fr; }
  .party-options { grid-template-columns: repeat(3, minmax(280px, 1fr)); overflow-x: auto; padding: 3px 2px 7px; }
  .party-option { scroll-snap-align: start; }
  .recommendation-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recipe-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ingredient-bag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selected-recipe-summary { grid-template-columns: 1fr; }
  .selected-recipe-summary small { grid-column: auto; }
  .cooking-settings { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
  .cooking-settings .check-label { grid-column: 1 / -1; }
  .phase-grid { grid-template-columns: 1fr 1fr; }
  .role-coverage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coverage-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .field-purpose-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  /* Keep the containing block tied to the visual viewport.  Percentage-based
     widths can otherwise inherit Chrome Android's shrunken layout viewport. */
  html, body, body.simulation-layout { width: 100vw; min-width: 0; max-width: 100vw; }
  body.simulation-layout .site-header { width: 100vw; max-width: 100vw; }
  body.simulation-layout main {
    width: calc(100vw - 20px);
    max-width: none;
    margin-inline: 10px;
  }
  body.simulation-layout .workbench-header,
  body.simulation-layout .workbench,
  body.simulation-layout .condition-rail,
  body.simulation-layout .analysis-stage { width: 100%; max-width: 100%; min-width: 0; }
  .detail-subskill { grid-template-columns: 50px 23px minmax(0, 1fr); }
  .detail-subskill > em { grid-column: 3; justify-self: start; }
  .specialty-performance-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .subtitle { display: none; }
  .site-header { min-height: 54px; padding-block: 8px; flex-wrap: nowrap; }
  .brand { overflow: hidden; max-width: 72px; padding-left: 20px; color: #dce8f5; white-space: nowrap; }
  .header-page-name { min-width: 0; margin-right: auto; padding-left: 9px; overflow: hidden; border-left: 1px solid #3a4860; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-menu-toggle { display: grid; flex: 0 0 42px; width: 42px; min-height: 38px; padding: 9px; place-content: center; gap: 4px; border-color: #34445d; background: #18253a; box-shadow: none; }
  .mobile-menu-toggle:hover { transform: none; box-shadow: none; }
  .mobile-menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: white; }
  .mobile-menu-backdrop { position: fixed; z-index: 148; inset: 0; display: block; width: 100%; min-height: 100dvh; padding: 0; border: 0; border-radius: 0; background: rgb(4 10 18 / 56%); box-shadow: none; }
  .mobile-menu-backdrop[hidden] { display: none; }
  .mobile-nav-drawer { position: fixed; z-index: 149; inset: 0 0 0 auto; display: flex; width: min(84vw, 330px); padding: 14px; flex-direction: column; gap: 14px; overflow-y: auto; color: white; background: #101a2d; box-shadow: -16px 0 40px rgb(3 9 17 / 32%); transform: translateX(105%); transition: transform .2s ease; }
  .mobile-nav-drawer.is-open { transform: translateX(0); }
  .mobile-nav-heading { display: flex; min-height: 42px; align-items: center; justify-content: space-between; border-bottom: 1px solid #34445d; }
  .mobile-nav-heading strong { font-size: .92rem; }
  .mobile-nav-heading button { width: 36px; min-height: 36px; padding: 0; border: 0; color: #dce8f5; background: transparent; font-size: 1.5rem; box-shadow: none; }
  .mobile-nav-drawer .site-nav { display: grid; width: 100%; margin: 0; gap: 7px; overflow: visible; white-space: normal; }
  .mobile-nav-drawer .site-nav a { width: 100%; min-height: 46px; padding: 11px 12px 11px 30px; }
  .mobile-nav-drawer .site-nav a::before { left: 14px; }
  .mobile-header-actions { display: block; margin-top: auto; padding-top: 14px; border-top: 1px solid #34445d; }
  .mobile-header-actions:empty { display: none; }
  .mobile-header-actions .header-user-switch, .mobile-header-actions .header-user-switch label { width: 100%; }
  .mobile-header-actions .header-user-switch label { min-height: 46px; justify-content: stretch; }
  .mobile-header-actions .header-user-switch select { width: 100%; }
  body.mobile-menu-open { overflow: hidden; }
  main, footer { width: min(calc(100% - 20px), 960px); }
  main { padding: 10px 0 80px; }
  footer { display: none; }
  body.box-layout main { width: min(calc(100% - 18px), 960px); padding-top: 10px; }
  .box-page-header { min-height: 48px; margin-bottom: 7px; }
  .box-page-header h1 { font-size: 1.25rem; }
  .box-page-header > div:first-child span { display: none; }
  .box-primary-actions .button { min-height: 36px; padding: 6px 9px; }
  .box-primary-actions .button span { display: none; }
  .box-page-tabs { position: static; margin-bottom: 9px; }
  .box-page-tabs button { min-height: 38px; padding-inline: 5px; font-size: .72rem; }
  .box-page-tabs button > span { display: none; }
  .box-layout .goal-grid { grid-template-columns: 1fr; }
  .next-actions > div { grid-template-columns: 1fr; }
  .next-action { min-height: 64px; }
  .next-actions > div .next-action:nth-child(n + 2) { display: none; }
  .box-register-fab { right: 14px; bottom: 14px; min-width: 54px; min-height: 54px; padding: 0; border-radius: 50%; }
  .box-register-fab b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .box-collection-header { min-height: 48px; padding: 8px 11px; }
  .goal-launcher-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .goal-grid { grid-template-columns: 1fr; }
  .goal-card { min-height: 88px; }
  .hero, .backup-panel, .capture-panel, .simulation-hero, .calculator-header, .scenario-panel, .result-heading { align-items: stretch; flex-direction: column; }
  .hero { gap: 10px; margin-bottom: 10px; padding: 13px; }
  .hero h1 { margin: 0; font-size: 1.35rem; }
  .hero .eyebrow, .hero > div > p:not(.eyebrow) { display: none; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .scenario-fields { grid-template-columns: 1fr 1fr; }
  .simulation-picker { padding: 10px; }
  .simulation-picker[open] { position: fixed; z-index: 156; inset: 62px 8px 8px; display: flex; flex-direction: column; margin: 0; overflow: hidden; border-color: #a9c6b6; border-radius: 12px; background: #f9fbf9; box-shadow: 0 0 0 100vmax rgb(5 12 20 / 54%), 0 18px 48px rgb(4 12 20 / 32%); }
  .simulation-picker[open] > summary { position: sticky; top: 0; flex: 0 0 auto; min-height: 52px; margin: -10px -10px 8px; padding: 9px 12px; border: 0; color: white; background: var(--deep); }
  .simulation-picker[open] > summary span { color: white; }
  .simulation-picker[open] > summary b { color: var(--deep); background: white; }
  .simulation-picker[open] > summary small { color: #dce9e3; }
  .simulation-picker[open] .picker-tools { flex: 0 0 auto; }
  .simulation-picker[open] .simulation-options { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
  .simulation-picker[open] .picker-confirm { flex: 0 0 auto; padding-top: 8px; }
  .simulation-picker[open] .picker-confirm button { width: 100%; min-height: 48px; }
  body.simulation-picker-open { overflow: hidden; }
  .simulation-options { grid-template-columns: 1fr 1fr; }
  .picker-tools { grid-template-columns: 1fr 1fr; }
  .picker-tools input { grid-column: 1 / -1; }
  .simulation-result { grid-template-columns: 1fr; }
  .simulation-metrics { grid-template-columns: 1fr 1fr; }
  .result-detail { grid-template-columns: 1fr; }
  .comparison-table th, .comparison-table td { min-width: 155px; max-width: 190px; padding: 8px; }
  .comparison-table th:first-child { min-width: 112px; max-width: 112px; }
  .cards, .grid.two, .grid.three { grid-template-columns: 1fr; }
  .card, .card:hover { padding: 12px; transform: none; }
  .card-mobile-actions { display: grid; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .card-mobile-actions a { display: flex; min-height: 46px; padding: 8px 10px; align-items: center; justify-content: center; gap: 6px; border: 1px solid #b9cbc2; border-radius: 7px; color: var(--deep); background: white; font-size: .76rem; font-weight: 850; text-decoration: none; }
  .card-mobile-actions a.primary { border-color: var(--deep); color: white; background: var(--deep); }
  .card-mobile-actions a:only-child { grid-column: 1 / -1; }
  .card-details > summary { min-height: 48px; }
  body.card-detail-open { overflow: hidden; }
  .card-detail-backdrop { position: fixed; z-index: 154; inset: 0; display: block; width: 100%; min-height: 100dvh; padding: 0; border: 0; border-radius: 0; background: rgb(5 12 20 / 54%); box-shadow: none; }
  .card-detail-backdrop[hidden] { display: none; }
  .card-details[open] { position: fixed; z-index: 155; inset: 64px 8px 8px; margin: 0; overflow-y: auto; overscroll-behavior: contain; border-color: #b9cbc2; border-radius: 12px; background: #f7f9f7; box-shadow: 0 18px 48px rgb(4 12 20 / 32%); }
  .card-details[open] > summary { position: sticky; z-index: 4; top: 0; border-color: var(--deep); border-radius: 0; background: var(--deep); box-shadow: 0 4px 12px rgb(20 35 29 / 16%); }
  .card-details[open] > .card-detail-body { padding-bottom: 8px; }
  .detail-facts .detail-nature dd { align-items: flex-start; flex-direction: column; }
  .detail-facts .nature-effects { justify-content: flex-start; }
  .card-detail-close { position: sticky; bottom: 7px; z-index: 2; width: 100%; min-height: 48px; border-color: var(--deep); color: white; background: var(--deep); box-shadow: 0 5px 14px rgb(20 35 29 / 18%); }
  .compact-card-actions { display: grid; grid-template-columns: 1fr; }
  .compact-card-actions > a { display: none; }
  .compact-card-actions form, .compact-card-actions button { width: 100%; }
  .archive-action { padding-top: 7px; border-top: 1px solid var(--line); justify-items: stretch; }
  .archive-action small { text-align: center; }
  .box-tools { grid-template-columns: 1fr; }
  /* Keep the query field readable on phones.  Controls belong on their own
     row instead of competing with the user's text input. */
  .box-search-shell { grid-template-columns: minmax(0, 1fr) 54px 92px; }
  .box-search-shell .box-search { grid-column: 1 / -1; }
  .box-ai-search { min-width: 0; }
  .box-search-mode > span { display: none; }
  .box-search-mode button { min-width: 58px; }
  .box-filter-drawer > summary { min-width: 54px; padding-inline: 5px; }
  .box-filter-drawer > summary > b { display: none; }
  .box-filter-grid { right: 0; width: calc(100vw - 38px); grid-template-columns: 1fr 1fr; }
  .box-filter-reset { grid-column: 1 / -1; }
  .box-sort-control { min-width: 92px; }
  .box-tools .box-sort-control select { padding-inline: 22px 16px; font-size: .61rem; }
  .box-search-suggestions { margin-inline: 9px; }
  .box-search-suggestions { padding: 0; overflow: hidden; }
  .box-search-suggestions > summary { display: grid; min-height: 50px; padding: 8px 10px; grid-template-columns: 28px 1fr auto; align-items: center; gap: 7px; border: 1px solid #abc2b7; border-radius: 7px; color: var(--deep); background: #f1f7f4; box-shadow: 0 2px 7px rgb(20 54 41 / 7%); list-style: none; }
  .box-search-suggestions > summary::-webkit-details-marker { display: none; }
  .box-search-suggestions > summary > .suggestion-toggle-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; color: white; background: var(--deep); font-size: 1rem; font-weight: 900; line-height: 1; }
  .box-search-suggestions > summary > .suggestion-toggle-icon::before { content: "＋"; }
  .box-search-suggestions > summary b { font-size: .76rem; }
  .box-search-suggestions > summary small { color: var(--muted); font-size: .58rem; }
  .box-search-suggestions > summary .when-open { display: none; }
  .box-search-suggestions[open] > summary { color: white; border-color: var(--deep); background: var(--deep); }
  .box-search-suggestions[open] > summary > .suggestion-toggle-icon { color: var(--deep); background: white; }
  .box-search-suggestions[open] > summary > .suggestion-toggle-icon::before { content: "×"; }
  .box-search-suggestions[open] > summary .when-closed { display: none; }
  .box-search-suggestions[open] > summary .when-open { display: inline; }
  .box-search-suggestions[open] > summary small { color: #dce9e3; }
  .box-search-suggestions > nav { display: grid; margin: 0; padding: 7px; grid-template-columns: repeat(3, 1fr); gap: 4px; overflow: visible; border-top: 1px solid #d7dfda; }
  .box-search-suggestions > nav button { min-width: 0; min-height: 36px; padding: 5px 3px; overflow: hidden; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
  .suggestion-tiles { display: grid; max-height: min(44vh, 360px); padding: 7px; grid-template-columns: 1fr 1fr; gap: 5px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .suggestion-tiles > button { width: 100%; min-height: 50px; padding: 5px 7px; }
  .suggestion-tiles img, .suggestion-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .box-filter-reset { width: 100%; }
  .hero .button { align-self: flex-start; }
  .backup-actions, .backup-actions form { align-items: stretch; flex-direction: column; }
  .backup-actions > *, .backup-actions form > * { width: 100%; }
  .capture-note { text-align: left; }
  .review-row { align-items: stretch; flex-direction: column; }
  .review-row-actions { justify-items: stretch; }
  .review-header { align-items: stretch; flex-direction: column; }
  .review-title { display: grid; grid-template-columns: auto 1fr; }
  .review-title code { grid-column: 1 / -1; max-width: 100%; }
  .candidate-navigation { display: grid; grid-template-columns: 1fr 1fr; }
  .review-workspace { grid-template-columns: 1fr; }
  .review-visual { position: static; }
  .source-image img { height: auto; max-height: 68vh; }
  .review-core { grid-template-columns: 1fr 1fr; }
  .review-slots { grid-template-columns: 1fr; }
  .compact-slots.ingredients, .compact-slots.subskills { grid-template-columns: 1fr; }
  .evaluation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbench-header { align-items: stretch; flex-direction: column; }
  .workbench-status { align-items: stretch; }
  .workbench-status .button { margin-left: auto; }
  .workbench { grid-template-columns: 1fr; }
  .condition-rail { position: static; }
  .primary-conditions { grid-template-columns: 1fr 1fr; }
  .comparison-snapshot { grid-template-columns: 1fr 1fr; }
  .comparison-snapshot > div:nth-child(2) { border-right: 0; }
  .comparison-snapshot > div { border-bottom: 1px solid var(--line); }
  .comparison-snapshot > div:nth-last-child(-n+2) { border-bottom: 0; }
  .box-drawer > .selection-tray, .box-drawer > .box-picker { margin-inline: 10px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .result-evidence { grid-template-columns: 1fr; }
  .selection-tray { margin-inline: -4px; padding-inline: 4px; }
  .evaluation-header { align-items: stretch; flex-direction: column; }
  .evaluation-header .button { align-self: flex-start; }
  .evaluation-header-actions { align-items: stretch; }
  .evaluation-subject { grid-template-columns: 50px 1fr; }
  .evaluation-subject > img, .evaluation-subject > .creature-portrait { width: 50px; height: 50px; }
  .evaluation-subject { position: relative; }
  .evaluation-level { grid-column: 1 / -1; width: 100%; }
  /* The trigger is intentionally compact. Anchor its panel to the full
     subject card on phones so it never extends off the left edge. */
  .evaluation-preview-menu { position: static; }
  .evaluation-preview-menu > div { top: calc(100% + 8px); right: 8px; left: 8px; width: auto; max-height: min(58dvh, 420px); overflow-y: auto; overscroll-behavior: contain; }
  .evaluation-objectives { grid-template-columns: repeat(3, 1fr); }
  .evaluation-objectives > a { min-height: 40px; padding-inline: 4px; font-size: .67rem; }
  .all-pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .pr-tile { padding: 8px 6px; border-top-width: 3px; }
  .pr-tile > div:first-child { display: grid; gap: 2px; }
  .pr-tile > div:first-child span { font-size: .55rem; }
  .pr-tile > div:first-child strong { font-size: .76rem; }
  .pr-tile dl, .pr-tile p, .benchmark-note { display: none; }
  .practical-performance { padding: 10px; }
  .practical-performance > header { align-items: flex-start; flex-direction: column; gap: 2px; }
  .practical-primary { grid-template-columns: 1fr; gap: 2px; }
  .practical-primary > p { grid-column: auto; }
  .energy-expectation-breakdown { grid-template-columns: 1fr 1fr; }
  .ingredient-performance-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recipe-contribution-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .recipe-contribution-grid { grid-template-columns: 1fr; }
  .recipe-contribution-grid h3 { min-height: 0; }
  .pr-summary { grid-template-columns: 82px 1fr; justify-items: stretch; text-align: left; }
  .pr-gauge { width: 76px; height: 76px; }
  .pr-gauge strong { font-size: 1.2rem; }
  .pr-facts { width: 100%; text-align: left; }
  .evaluation-breakdown { grid-template-columns: 1fr; }
  .team-header { align-items: center; flex-direction: row; }
  .team-header .button { align-self: center; }
  .team-guide-intro { grid-template-columns: 40px minmax(0, 1fr) 34px; }
  .guide-free-input, .consult-free-input { grid-template-columns: 1fr; }
  .guide-free-input > p, .consult-free-input > p { grid-column: auto; }
  .plan-request-suggestions { grid-column: auto; flex-wrap: nowrap; overflow-x: auto; }
  .guide-free-input > div, .consult-free-input > div { grid-template-columns: minmax(0, 1fr) 104px; }
  .guide-avatar { width: 40px; height: 40px; }
  .guide-reset { grid-column: auto; width: 34px; min-height: 34px; padding: 0; font-size: 0; }
  .guide-reset > span[aria-hidden="true"] { font-size: 1rem; }
  .current-goal-drawer > div { align-items: flex-start; flex-direction: column; padding-left: 10px; }
  .guide-conversation { grid-template-columns: 1fr; }
  .guide-step, .guide-step[data-guide-step="priority"], .meal-theme-step { grid-column: auto; grid-template-columns: 64px minmax(0, 1fr); }
  .guide-replies { padding-left: 8px; }
  .guide-summary { align-items: stretch; flex-direction: column; }
  .guide-summary-actions { display: grid; grid-template-columns: auto 1fr; }
  .guide-summary button { width: 100%; }
  /* One candidate is the decision unit on a phone; the controls change it without a horizontal page. */
  .party-options { display: block; overflow: hidden; padding: 2px; }
  .party-option { display: none; }
  .party-option.selected { display: block; transform: none; }
  .coverage-comparison { display: block; overflow: hidden; }
  .coverage-comparison .coverage-option { display: none; }
  .coverage-comparison .coverage-option.selected { display: block; }
  .party-option-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .party-option-metrics div:nth-child(n + 7) { display: none; }
  .recommendation-heading { align-items: stretch; flex-direction: column; }
  .recommendation-heading button { width: 100%; }
  .recommendation-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .recommendation-actions form, .recommendation-actions form button { width: 100%; }
  .weekly-team-bar { grid-template-columns: 1fr; gap: 7px; }
  .weekly-team-members { gap: 3px; }
  .weekly-team-members span { padding: 4px; justify-content: center; }
  .weekly-team-members img, .weekly-team-members i { flex-basis: 38px; width: 38px; height: 38px; }
  .weekly-team-members b { display: none; }
  .party-options-heading { align-items: start; flex-direction: column; }
  .party-options { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(280px, 88vw); }
  .coverage-comparison { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(270px, 86vw); }
  .recommendation-cards { grid-template-columns: 1fr; }
  .recommendation-energy { grid-template-columns: 1fr; }
  .recommendation-energy small { grid-column: auto; }
  .recommendation-gaps { grid-template-columns: 1fr; }
  .coverage-row { grid-template-columns: 1fr 1.4fr; }
  .coverage-row b, .coverage-row em { text-align: left; }
  .recipe-plan-selectors, .recipe-targets, .cooking-settings { grid-template-columns: 1fr; }
  .recipe-theme-buttons button { min-height: 42px; padding-inline: 4px; font-size: .61rem; }
  .pot-expansion-note { align-items: flex-start; flex-wrap: wrap; }
  .ingredient-tile-menu { position: fixed; inset: auto 8px 8px; width: auto; max-height: min(58vh, 430px); grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 12px; }
  .settings-tabs { top: auto; bottom: 12px; gap: 4px; transform: none; }
  .settings-tabs button { width: 68px; min-height: 52px; border-radius: 9px 0 0 9px; }
  .settings-drawer { top: 58px; right: 0; bottom: 0; width: calc(100% - 6px); border-radius: 12px 0 0; }
  .bag-ocr-panel { grid-template-columns: 1fr; }
  .bag-ocr-panel form { align-items: stretch; justify-content: flex-start; flex-direction: column; }
  .ingredient-bag-grid, .recipe-levels > div { grid-template-columns: 1fr 1fr; }
  .profile-dock { grid-template-columns: 1fr; }
  .profile-save { align-items: stretch; flex-direction: column; }
  .recipe-target { grid-template-columns: 1fr 90px; }
  .cooking-settings .check-label { grid-column: auto; }
  .team-conditions { grid-template-columns: 1fr 1fr; }
  .team-condition-fields { grid-template-columns: 1fr 1fr; }
  .team-condition-fields > div, .team-condition-fields > button { grid-column: 1 / -1; }
  .team-slots { grid-template-columns: repeat(5, minmax(112px, 1fr)); overflow-x: auto; padding-bottom: 3px; }
  .team-picker-command { grid-template-columns: minmax(0, 1fr) auto auto; }
  .team-picker-search { grid-column: 1 / -1; }
  .team-filter-drawer > div { right: auto; left: 0; width: min(420px, 88vw); grid-template-columns: 1fr 1fr; }
  .compare-autopick { grid-template-columns: 1fr auto; }
  .compare-autopick label { grid-column: 1 / -1; }
  .compare-autopick-note { grid-column: 1 / -1; }
  .team-kpis { grid-template-columns: 1fr 1fr; }
  .team-result-grid { grid-template-columns: 1fr; }
  .event-grid { grid-template-columns: 1fr; }
  .notice-hero { min-height: 0; padding: 18px; align-items: flex-start; flex-direction: column; }
  .notice-toolbar { align-items: flex-start; flex-direction: column; }
  .notice-filters { justify-content: flex-start; }
  .official-notice-list { grid-template-columns: 1fr; }
  .notice-policy p { display: block; margin: 5px 0 0; }
  .roadmap-hero { min-height: 0; padding: 18px; align-items: flex-start; flex-direction: column; gap: 12px; }
  .roadmap-updated { margin: 0; }
  .section-title-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .purpose-grid, .roadmap-columns, .phase-grid, .principles, .principles ul { grid-template-columns: 1fr; }
  .product-flow ol { grid-template-columns: 1fr 1fr; }
  .product-flow li:nth-child(2)::after { display: none; }
  .principles { gap: 8px; }
  .advice-layout main { width: min(calc(100% - 18px), 960px); padding-top: 10px; }
  .advice-header { min-height: 0; padding: 13px; align-items: stretch; flex-direction: column; }
  .advice-header h1 { font-size: 1.25rem; }
  .advice-header-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .advice-header-actions .button { text-align: center; }
  .advice-consultation { padding: 10px; }
  .consult-event-cards { display: flex; margin-inline: -2px; padding-bottom: 2px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .consult-event-cards article { flex: 0 0 82%; scroll-snap-align: start; }
  .consult-step { align-items: start; }
  .consult-step > div { grid-template-columns: 1fr; gap: 4px; }
  .consult-step > div > div { display: grid; grid-template-columns: 1fr 1fr; }
  .consult-step button { min-width: 0; min-height: 42px; padding-inline: 5px; }
  .consult-result { grid-template-columns: 1fr; gap: 8px; }
  .consult-result .button { width: 100%; text-align: center; }
  .box-diagnosis-columns { grid-template-columns: 1fr; }
  .advice-ai-settings > form { grid-template-columns: 1fr; }
  .advice-ai-exclusions > div:first-child { grid-template-columns: 1fr; }
  .advice-ai-exclusions > div:first-child > div { grid-template-columns: minmax(0, 1fr) auto; }
  .advice-ai-exclusions [data-ai-exclusion-clear] { grid-column: 1 / -1; }
  .advice-ai-settings > form > button { width: 100%; }
  .training-page { width: min(calc(100% - 16px), 680px); margin-top: 8px; }
  .training-header { padding: 13px; }
  .training-setting-fields { grid-template-columns: 1fr 1fr; }
  .training-summary { align-items: flex-start; flex-wrap: wrap; }
  .training-summary small { width: 100%; margin-left: 0; }
  .training-list { grid-template-columns: 1fr; }
  .advice-ai-followup { grid-template-columns: 1fr; }
  .advice-ai-input { grid-template-columns: minmax(0, 1fr) 88px; }
  .advice-ai-answer { grid-column: auto; }
  .advice-command { top: 66px; padding: 7px; grid-template-columns: 1fr; }
  .advice-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .advice-tabs button { min-width: 0; padding-inline: 3px; font-size: .66rem; }
  .advice-panel { padding: 10px; }
  .advice-section-heading { align-items: flex-start; }
  .role-coverage-grid { grid-template-columns: 1fr 1fr; }
  .role-coverage p { min-height: 0; }
  .advice-split { grid-template-columns: 1fr; }
  .coverage-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strategy-highlight { grid-template-columns: 1fr; gap: 8px; }
  .field-advice { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .field-type-status { grid-column: 2 / -1; }
  .field-purpose-grid { grid-template-columns: 1fr; }
  .strategy-references ul { grid-template-columns: 1fr; }
  .notice-signal-board > div, .advice-news-signals > div { grid-template-columns: 1fr; }
  .event-advice-list header { align-items: flex-start; flex-direction: column; }
  .event-advice-body { grid-template-columns: 1fr; gap: 4px; }
  .strategy-card-grid { grid-template-columns: 1fr 1fr; }
}