* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:84px; background:#f7f6f1; }
body { margin:0; background:#f7f6f1; color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.65; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:100; padding:11px 15px; border-radius:10px; background:var(--ink); color:#fff; }
.skip-link:focus { top:12px; }

/* Header */
.app-header { position:sticky; top:0; z-index:30; min-height:68px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; padding:10px max(22px,calc((100vw - var(--max))/2)); border-bottom:1px solid rgba(22,33,28,.1); background:rgba(255,255,255,.94); backdrop-filter:blur(16px); }
.brand { min-height: 44px; display:inline-flex; align-items:center; gap:9px; color:#17211d; font-weight:950; letter-spacing:-.035em; text-decoration:none; white-space:nowrap; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px 12px 12px 4px; background:#176b5a; color:#fff; box-shadow:4px 4px 0 #ffd166; font-size:17px; }
.brand small { padding:2px 6px; border-radius:999px; background:#ffe7a8; font-size:10px; }
.header-actions { display:flex; align-items:center; gap:7px; }
.language-button,.auto-button,.signup-button { min-height:44px; padding:0 13px; border:1px solid #d7ddd9; border-radius:11px; background:#fff; font-weight:800; }
.auto-button { color:#176b5a; }
.auto-button:hover,.language-button:hover { background:#edf7f3; }
.signup-button { border-color:#176b5a; background:#176b5a; color:#fff; }
.signup-button:hover { background:#105346; }
.account-link { min-height:44px; display:inline-flex; align-items:center; padding:0 10px; border-radius:10px; font-size:13px; font-weight:850; text-decoration:none; }
.account-link:hover { background:#f0f3f1; }
.saved-shortcut { min-height:44px; padding:0 11px; border:1px solid #cfe0d8; border-radius:11px; background:#edf7f3; color:#105346; font-weight:850; }

/* First view */
main { width:min(var(--max),calc(100% - 40px)); margin:0 auto; padding:24px 0 110px; }
.welcome { position:relative; display:grid; grid-template-columns:minmax(300px,.78fr) minmax(380px,1.22fr); grid-template-areas:"copy search" "copy examples" "recent recent"; gap:12px 42px; padding:34px 38px; overflow:hidden; border:1px solid #dce2de; border-radius:26px; background:linear-gradient(120deg,#eff8f4 0%,#fff 62%); box-shadow:0 12px 34px rgba(28,57,47,.06); }
.welcome::after { content:""; position:absolute; right:-28px; top:-34px; width:100px; height:100px; border-radius:26px; background:#ffd166; transform:rotate(16deg); opacity:.7; pointer-events:none; }
.welcome-copy { grid-area:copy; align-self:center; position:relative; z-index:1; }
.welcome-eyebrow { margin:0 0 8px; color:#176b5a; font-size:12px; font-weight:950; letter-spacing:.12em; }
.welcome h1 { margin:0; max-width:12em; color:#17211d; font-size:clamp(34px,4.1vw,52px); line-height:1.12; letter-spacing:-.055em; }
.welcome-copy>p:last-child { max-width:34em; margin:13px 0 0; color:#53625c; font-size:14px; }
.hero-search { grid-area:search; align-self:end; position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.hero-search label { min-height:64px; display:flex; align-items:center; gap:11px; padding:0 17px; border:2px solid #25332d; border-radius:16px; background:#fff; box-shadow:0 5px 0 rgba(22,33,28,.08); }
.hero-search label:focus-within { border-color:#176b5a; box-shadow:0 0 0 5px rgba(23,107,90,.13); }
.hero-search label>span { color:#176b5a; font-size:26px; }
.hero-search input { width:100%; min-width:0; min-height:56px; border:0; outline:0; background:transparent; font-size:16px; }
.hero-search button { min-width:104px; min-height:64px; padding:0 18px; border:0; border-radius:16px; background:#ffd166; color:#17211d; box-shadow:0 5px 0 #d9ad43; font-weight:950; }
.hero-search button:hover { background:#ffdb82; transform:translateY(-1px); }
.search-examples { grid-area:examples; position:relative; z-index:1; display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:#64716c; font-size:12px; }
.search-examples button { min-height:38px; padding:0 11px; border:1px solid #d4ddd8; border-radius:999px; background:#fff; font-size:12px; }
.search-examples button:hover { border-color:#176b5a; background:#edf7f3; color:#105346; }
.recent-method { grid-area:recent; position:relative; z-index:1; display:flex; align-items:center; gap:12px; margin-top:8px; padding:10px 13px; border-radius:12px; background:#17211d; color:#fff; }
.recent-method>span { color:#cdd7d2; font-size:11px; font-weight:800; }
.recent-method button { min-height:40px; padding:0; border:0; background:transparent; color:#fff; font-weight:850; text-align:left; }
.recent-method .recent-secondary { margin-left:auto; color:#fff; font-size:11px; }
.has-recent-method .starter-packs { display:none; }
.has-recent-method.show-starter-packs .starter-packs { display:block; }
.is-filtering .welcome { grid-template-columns:1fr; grid-template-areas:"search" "recent"; gap:8px; padding:14px 16px; border-radius:18px; }
.is-filtering .welcome::after,.is-filtering .welcome-copy,.is-filtering .search-examples { display:none; }
.is-filtering .hero-search { align-self:center; }
.is-filtering .hero-search label,.is-filtering .hero-search button { min-height:54px; box-shadow:none; }
.is-filtering .starter-packs { display:none; }

/* Goal navigation */
.starter-packs { margin:18px 0 26px; }
.starter-packs .section-title-row { margin-bottom:9px; }
.starter-packs .section-title-row h2 { font-size:17px; }
.starter-packs .section-title-row p { display:none; }
.starter-pack-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.starter-pack-grid button { min-height:90px; display:grid; justify-items:start; align-content:center; gap:3px; padding:13px; border:1px solid #dce2de; border-radius:16px; background:#fff; text-align:left; transition:transform .16s,box-shadow .16s,border-color .16s; }
.starter-pack-grid button:hover { transform:translateY(-2px); border-color:#176b5a; box-shadow:0 8px 20px rgba(23,107,90,.08); }
.starter-pack-grid i { font-style:normal; font-size:23px; line-height:1; }
.starter-pack-grid b { margin-top:4px; font-size:14px; }
.starter-pack-grid span { color:#68736e; font-size:11px; }
.starter-pack-grid button:nth-child(1) { background:#fff4ec; }
.starter-pack-grid button:nth-child(2) { background:#f0f1ff; }
.starter-pack-grid button:nth-child(3) { background:#edf8f2; }
.starter-pack-grid button:nth-child(4) { background:#fff7dc; }
.starter-pack-grid button:nth-child(5) { background:#fff0f5; }
.starter-pack-grid button:nth-child(6) { background:#eaf7ff; }

.filter-drawer { margin:0 0 22px; }
.filter-drawer>summary { width:max-content; min-height:44px; display:flex; align-items:center; gap:8px; padding:0 13px; border:1px solid #cfd8d3; border-radius:11px; background:#fff; font-size:13px; list-style:none; cursor:pointer; }
.filter-drawer>summary::-webkit-details-marker { display:none; }
.filter-drawer>summary::before { content:"☷"; color:#176b5a; font-size:17px; }
.filter-drawer>summary span { color:#68736e; font-size:11px; }
.filter-drawer[open] { padding:14px; border:1px solid #dce2de; border-radius:15px; background:#fff; }
.filter-drawer[open]>summary { margin-bottom:12px; background:#edf7f3; }
.filter-bar,.quick-filters,.journey-choices { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.filter-bar { margin:0 0 11px; }
.quick-chip,.journey-choices button { min-height:42px; padding:0 13px; border:1px solid #d6ded9; border-radius:999px; background:#fff; color:#52605a; font-size:12px; font-weight:800; }
.quick-chip:hover,.quick-chip.is-active,.quick-chip[aria-pressed="true"],.journey-choices button[aria-pressed="true"] { border-color:#176b5a; background:#edf7f3; color:#105346; }
.journey-choices>span { color:#68736e; font-size:12px; font-weight:800; }

/* Sections and cards */
.section-title-row { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.section-title-row h2 { margin:0; font-size:28px; line-height:1.25; letter-spacing:-.035em; }
.section-title-row p { margin:4px 0 0; color:#66736d; font-size:13px; }
.section-kicker { display:none; }
.section-kicker.is-visible { display:block; margin:0 0 3px; color:#176b5a; font-size:10px; font-weight:950; letter-spacing:.12em; }
.view-controls,#result-summary { color:#66736d; font-size:12px; }
#result-summary { padding:6px 10px; border-radius:999px; background:#ebeFEB; }
.library-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.library-card { position:relative; min-width:0; min-height:252px; display:grid; grid-template-rows:66px 1fr auto; overflow:hidden; border:1px solid #dde3df; border-radius:19px; background:#fff; box-shadow:0 5px 18px rgba(31,52,43,.06); transition:transform .16s,box-shadow .16s,border-color .16s; }
.library-card:hover,.library-card:focus-within { transform:translateY(-3px); border-color:#9ebaae; box-shadow:0 12px 26px rgba(31,52,43,.1); }
.list-icon.card-visual { width:100%; height:66px; display:flex; align-items:center; justify-content:space-between; padding:10px 13px; background:#edf8f2; }
.library-card[data-visual-category="writing"] .card-visual { background:#fff1e8; }
.library-card[data-visual-category="learning"] .card-visual { background:#eef0ff; }
.library-card[data-visual-category="life"] .card-visual { background:#fff6d9; }
.library-card[data-visual-category="image"] .card-visual { background:#fdebf3; }
.library-card[data-visual-category="coding"] .card-visual { background:#e7f5ff; }
.card-visual-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.82); font-size:21px; }
.card-visual-label { padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.82); font-size:10px; font-weight:900; }
.list-main { min-width:0; display:flex; flex-direction:column; padding:14px 16px 8px; }
.list-labels,.card-dates { display:none; }
.library-card .list-meta { display:none; }
.library-card .card-decision { display:none; }
.list-main h3 { min-height:47px; display:-webkit-box; margin:0; overflow:hidden; color:#17211d; font-size:18px; line-height:1.32; letter-spacing:-.025em; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.list-main > p { display:-webkit-box; min-height:39px; margin:6px 0 0; overflow:hidden; color:#63706a; font-size:12px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.community-card-meta { min-height:25px; display:flex; align-items:center; margin-top:auto; padding-top:8px; }
.community-card-meta .card-author { display:none !important; }
.community-card-meta .card-helpfulness { padding:4px 8px; border-radius:999px; background:#edf7f3; color:#176b5a; font-size:10px; font-weight:850; }
.community-card-meta:has(.card-helpfulness[hidden]) { display:none; }
.list-open { min-height:44px; margin:5px 15px 15px; border:1px solid #176b5a; border-radius:11px; background:#fff; color:#105346; font-size:12px; font-weight:900; }
.list-open::before { content:""; position:absolute; inset:0; }
.list-open:hover { background:#176b5a; color:#fff; }
.card-save { position:absolute; z-index:3; top:11px; right:11px; width:44px; height:44px; border:0; border-radius:50%; background:#fff; color:#176b5a; box-shadow:0 4px 12px rgba(22,33,28,.12); font-size:19px; }
.card-save[aria-pressed="true"] { background:#176b5a; color:#fff; }
.load-more { min-height:48px; display:block; margin:22px auto 0; padding:0 24px; border:1px solid #176b5a; border-radius:12px; background:#fff; color:#105346; font-weight:900; }
.load-more:hover { background:#edf7f3; }
.empty-state { padding:48px 20px; border:1px dashed #aab9b2; border-radius:18px; background:#fff; text-align:center; }
.empty-state h3 { margin:6px 0; }
.empty-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.empty-actions button,.submit-button { min-height:44px; padding:0 14px; border:1px solid #d2dbd6; border-radius:10px; background:#fff; font-weight:800; }
.empty-actions .submit-button,.submit-button { border-color:#176b5a; background:#176b5a; color:#fff; }

/* Returning and secondary content */
.my-kit { margin:0 0 36px; }
.kit-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.kit-item { min-height:76px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:12px; border:1px solid #dce2de; border-radius:14px; background:#fff; }
.kit-item button { min-height:44px; border:0; background:transparent; color:#105346; font-weight:850; text-align:left; }
.community-ranking,.trend-section,.business-packs { margin:42px 0 0; padding:22px; border:1px solid #dce2de; border-radius:20px; background:#fff; }
.ranking-tabs { display:flex; gap:4px; padding:4px; border-radius:11px; background:#eff2f0; }
.ranking-tabs button { min-height:40px; padding:0 11px; border:0; border-radius:8px; background:transparent; font-size:12px; font-weight:850; }
.ranking-tabs button[aria-pressed="true"] { background:#176b5a; color:#fff; }
.ranking-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }
.ranking-item { min-height:70px; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid #dce2de; border-radius:12px; background:#fff; text-align:left; }
.ranking-number { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; background:#ffd166; }
.ranking-item span { min-width:0; display:grid; }
.ranking-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ranking-item small,.ranking-empty { color:#67736d; font-size:11px; }
.trend-section { background:#17211d; color:#fff; }
.trend-section .section-title-row p,.trend-card p { color:#c6d0cb; }
.review-badge { padding:5px 9px; border-radius:999px; background:#2d3c35; font-size:11px; }
.trend-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:9px; }
.trend-card { min-width:0; display:grid; gap:7px; padding:14px; border:1px solid #34463e; border-radius:14px; background:#223029; }
.trend-card h3,.trend-card p { margin:0; }
.trend-card h3 { font-size:14px; }
.trend-card p { display:-webkit-box; overflow:hidden; font-size:11px; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.trend-metrics,.trend-actions { display:flex; flex-wrap:wrap; gap:6px; }
.trend-metrics span { padding:3px 6px; border-radius:7px; background:#31433a; color:#dbe5df; font-size:10px; }
.trend-actions { margin-top:auto; }
.trend-actions button { min-height:40px; padding:0 10px; border:1px solid #53675e; border-radius:9px; background:transparent; color:#fff; font-size:11px; font-weight:800; }
.trend-actions .trend-open { border-color:#ffd166; background:#ffd166; color:#17211d; }
.trend-more { display:none; }
.business-packs>summary { min-height:48px; display:flex; justify-content:space-between; align-items:center; list-style:none; cursor:pointer; }
.business-packs>summary::-webkit-details-marker { display:none; }
.business-packs>summary::after { content:"＋"; font-size:22px; }
.business-packs[open]>summary::after { content:"−"; }
.business-packs>summary span { display:grid; }
.business-packs>summary small { color:#66736d; }
.business-pack-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px; }
.business-pack-card { display:grid; gap:9px; padding:14px; border:1px solid #dce2de; border-radius:13px; }
.business-pack-card header { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:8px; }
.business-pack-card header>span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#edf7f3; }
.business-pack-card h3,.business-pack-card p { margin:0; }
.business-pack-card p,.business-pack-step { color:#66736d; font-size:11px; }
.business-pack-progress { height:6px; overflow:hidden; border-radius:999px; background:#e7ebe8; }
.business-pack-progress i { height:100%; display:block; background:#176b5a; }
.business-pack-actions { display:grid; grid-template-columns:1fr auto auto; gap:5px; }
.business-pack-actions button { min-height:40px; padding:0 8px; border:1px solid #d4dcd7; border-radius:8px; background:#fff; font-size:11px; font-weight:800; }
.business-pack-actions button:first-child { background:#176b5a; color:#fff; }
.pilot-consent { display:grid; grid-template-columns:1fr auto; gap:14px; margin-top:14px; padding:14px; border-radius:13px; background:#f2f6f3; }
.pilot-consent h3,.pilot-consent p { margin:0; }
.pilot-consent p { color:#66736d; font-size:11px; }
.pilot-consent-actions { min-width:230px; display:grid; align-content:center; gap:7px; }
.pilot-consent-actions label { display:flex; gap:7px; font-size:11px; font-weight:800; }
.pilot-consent-actions button,.pilot-feedback button { min-height:40px; border:1px solid #d4dcd7; border-radius:8px; background:#fff; }
.community-invite { margin-top:48px; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:24px 28px; border-radius:20px; background:#176b5a; color:#fff; }
.community-invite p,.community-invite h2 { margin:0; }
.community-invite p { color:#cde7de; font-size:11px; font-weight:850; }
.community-invite h2 { font-size:22px; }
.community-invite>div>span { color:#d9eee7; font-size:12px; }
.community-invite button { min-height:46px; flex:none; padding:0 16px; border:0; border-radius:11px; background:#ffd166; color:#17211d; font-weight:900; }
.site-legal-footer { width:min(var(--max),calc(100% - 40px)); margin:0 auto; padding:32px 0 38px; display:grid; grid-template-columns:1fr auto; gap:16px 26px; border-top:1px solid #dce2de; color:#66736d; }
.site-legal-footer p { margin:5px 0 0; font-size:12px; }
.site-legal-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 18px; }
.site-legal-footer nav a { min-height:44px; display:inline-flex; align-items:center; font-size:12px; }
.site-legal-footer small { grid-column:1/-1; }

/* Dialogs */
dialog { padding:0; border:0; background:transparent; color:var(--ink); }
dialog::backdrop { background:rgba(18,29,24,.56); backdrop-filter:blur(5px); }
.dialog-close { flex:0 0 44px; width:44px; height:44px; border:1px solid #d6ded9; border-radius:50%; background:#fff; font-size:22px; }
.content-dialog { width:min(760px,100%); max-width:none; max-height:100vh; margin:0 0 0 auto; }
.dialog-shell { height:100vh; overflow:auto; background:#fff; box-shadow:-18px 0 48px rgba(16,30,24,.2); }
.dialog-header { position:sticky; top:0; z-index:4; display:flex; align-items:start; justify-content:space-between; gap:20px; padding:26px 30px 20px; border-bottom:1px solid #e0e5e2; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.dialog-header h2 { margin:5px 0 8px; font-size:30px; line-height:1.22; letter-spacing:-.045em; }
.dialog-header p { margin:0; color:#5e6a64; }
.detail-labels { display:none; }
.detail-outcome-label { color:#176b5a; font-size:11px; font-weight:900; }
.detail-facts { display:flex; flex-wrap:wrap; gap:6px; padding:13px 30px; border-bottom:1px solid #e0e5e2; }
.detail-facts span { padding:4px 8px; border-radius:999px; background:#edf7f3; color:#105346; font-size:11px; font-weight:800; }
.detail-community-summary { display:flex; align-items:center; gap:7px; padding:10px 30px; border-bottom:1px solid #e0e5e2; background:#fafbf9; }
.detail-author { margin-right:auto; font-size:11px; font-weight:850; }
.detail-community-summary button { min-height:40px; padding:0 10px; border:1px solid #d6ded9; border-radius:999px; background:#fff; font-size:11px; font-weight:800; }
.detail-primary-bar { position:sticky; top:113px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 30px; border-bottom:1px solid #dce2de; background:#f5fbf8; }
.detail-primary-bar>span { color:#5d6963; font-size:11px; }
.detail-primary-bar>div { display:flex; gap:7px; }
.detail-primary-bar button,.prompt-heading button { min-height:46px; padding:0 15px; border:0; border-radius:10px; background:#176b5a; color:#fff; font-weight:900; }
.detail-primary-bar .save-method { border:1px solid #d5ddd8; background:#fff; color:#105346; }
.save-announcement { min-height:0; margin:0; padding:0 30px; color:#105346; font-size:11px; font-weight:800; }
.detail-body { display:flex; flex-direction:column; padding:0 30px 58px; }
.detail-body>section { padding:21px 0; border-bottom:1px solid #e3e7e4; }
.detail-body h3 { margin:0 0 11px; font-size:18px; }
.detail-body ul,.detail-body ol { margin:0; padding-left:21px; }
.detail-body li+li { margin-top:7px; }
.detail-section-number { margin:0 0 3px; color:#176b5a; font-size:10px; font-weight:950; letter-spacing:.1em; }
.detail-example { order:1; margin-top:18px; padding:17px !important; border:1px solid #dce2de !important; border-radius:14px; background:#f6faf8; }
.detail-overview { order:2; }
.detail-prepare { order:3; }
.detail-steps { order:4; }
.primary-use { order:5; }
.detail-completion { order:6; }
.warning-section { order:7; }
.detail-recovery { order:8; }
.detail-repeat { order:9; }
.detail-reviews { order:10; }
#detail-example-situation { margin:3px 0 9px; color:#66736d; font-size:12px; }
#detail-example-preview { padding:12px 14px; border-radius:10px; background:#fff; font-weight:850; }
.detail-steps ol { display:grid; gap:8px; padding:0; list-style:none; counter-reset:steps; }
.detail-steps li { position:relative; min-height:44px; padding:10px 10px 10px 45px; border:1px solid #dce2de; border-radius:11px; counter-increment:steps; }
.detail-steps li::before { content:counter(steps); position:absolute; left:10px; top:9px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#176b5a; color:#fff; font-size:11px; font-weight:900; }
.prompt-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; }
#detail-prompt { width:100%; min-height:210px; margin-top:13px; padding:15px; resize:vertical; border:1px solid #ccd7d1; border-radius:12px; background:#fafbf9; font-size:13px; line-height:1.7; }
.copy-status { min-height:22px; margin:6px 0 0; color:#105346; font-size:12px; font-weight:850; }
.retry-detail-load { min-height:44px; padding:0 13px; border:1px solid #176b5a; border-radius:9px; background:#fff; color:#105346; font-weight:850; }
.outcome-feedback,.feedback-reasons { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:12px; }
.outcome-feedback>span,.feedback-reasons>span { width:100%; font-weight:800; }
.outcome-feedback button { min-height:44px; padding:0 11px; border:1px solid #d2dbd6; border-radius:9px; background:#fff; }
.outcome-feedback button.is-selected { border-color:#176b5a; background:#edf7f3; color:#105346; }
.detail-disclosure { margin:0; padding:0; border-bottom:1px solid #e3e7e4; }
.detail-disclosure summary { min-height:56px; display:flex; align-items:center; justify-content:space-between; font-weight:850; list-style:none; cursor:pointer; }
.detail-disclosure summary::-webkit-details-marker { display:none; }
.detail-disclosure summary::after { content:"＋"; color:#176b5a; font-size:20px; }
.detail-disclosure[open] { padding-bottom:17px; }
.detail-disclosure[open] summary::after { content:"−"; }
.warning-section[open] ul { padding:14px 18px 14px 34px; border-radius:12px; background:#fff3e0; }
.detail-reviews { margin-top:16px; padding:18px !important; border:1px solid #dce2de !important; border-radius:14px; background:#fff; }
.detail-review-list { display:grid; gap:8px; }
.detail-review-list article,#detail-reviews-empty { padding:12px; border-radius:10px; background:#f4f6f4; }
.review-form { display:grid; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid #e0e5e2; }
.review-form textarea { min-height:88px; padding:11px; border:1px solid #ccd7d1; border-radius:10px; }
.review-form>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.review-form button { min-height:44px; padding:0 13px; border:0; border-radius:9px; background:#176b5a; color:#fff; font-weight:850; }

.use-dialog form,.auth-dialog>div,.mcp-shell,.studio-shell { width:min(620px,calc(100vw - 28px)); max-height:92vh; overflow:auto; margin:auto; padding:25px; border-radius:20px; background:#fff; box-shadow:0 22px 56px rgba(14,28,22,.25); }
.use-dialog form,.auth-dialog>div { width:min(480px,calc(100vw - 28px)); display:flex; flex-direction:column; gap:12px; }
.use-dialog .dialog-close,.auth-dialog .dialog-close,.mcp-dialog .dialog-close { align-self:flex-end; }
.use-dialog h2,.auth-dialog h2,.mcp-shell h2 { margin:0; line-height:1.3; }
.use-dialog p,.auth-dialog p,.mcp-shell p { margin:0; color:#176b5a; font-size:12px; font-weight:850; }
.use-dialog label,.auth-dialog label,#contribution-form>label,.entry-fields>label { display:grid; gap:5px; font-weight:800; }
.use-dialog input,.auth-dialog input,.entry-fields input,.entry-fields textarea { width:100%; min-height:46px; padding:10px 12px; border:1px solid #cbd6d0; border-radius:10px; background:#fff; }
.entry-fields textarea { min-height:150px; resize:vertical; }
.use-actions { display:flex; justify-content:flex-end; gap:7px; }
.use-actions button,.auth-submit { min-height:46px; padding:0 14px; border:1px solid #d1dad5; border-radius:10px; background:#fff; font-weight:850; }
.use-submit,.auth-submit { border-color:#176b5a !important; background:#176b5a !important; color:#fff; }
.auth-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:#176b5a; color:#fff; font-weight:900; }
.auth-consent { grid-template-columns:36px 1fr; align-items:start; font-size:12px; }
.auth-consent input { width:36px; min-height:36px; }
.auth-consent a { min-height:40px; display:inline-flex; align-items:center; color:#105346; }
.field-error { color:#b42318; font-weight:800; }
.mcp-url-label { display:grid; gap:6px; margin-top:15px; }
.mcp-url-row { display:grid; grid-template-columns:1fr auto; gap:7px; }
.mcp-url-row input { min-width:0; min-height:46px; padding:0 10px; border:1px solid #cbd6d0; border-radius:9px; }
.mcp-url-row button { border:0; border-radius:9px; background:#176b5a; color:#fff; font-weight:850; }
.mcp-steps { display:grid; gap:9px; padding:0; list-style:none; counter-reset:mcp; }
.mcp-steps li { display:grid; gap:3px; padding:12px; border-radius:11px; background:#f3f7f5; counter-increment:mcp; }
.mcp-steps li b::before { content:counter(mcp) ". "; color:#176b5a; }
.mcp-proof,.demo-trust { display:flex; gap:9px; padding:12px; border-radius:11px; background:#edf7f3; }
.mcp-proof { flex-direction:column; }
.studio-dialog { max-width:none; max-height:none; }
.studio-shell { width:min(700px,calc(100vw - 28px)); }
.studio-shell>header { display:flex; justify-content:space-between; gap:16px; }
.studio-shell h2,.studio-shell p { margin:0; }
.studio-shell>header span { color:#66736d; font-size:13px; }
.demo-trust { margin:14px 0; font-size:12px; }
.demo-trust b { flex:none; color:#105346; }
.studio-steps { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:12px 0; }
.studio-steps span { padding:9px; border-radius:9px; background:#f2f4f2; color:#68736e; font-size:12px; font-weight:850; }
.studio-steps span[aria-current="step"] { background:#176b5a; color:#fff; }
.entry-fields { display:grid; gap:12px; }
.entry-fields small,.autosave-note { color:#68736e; font-size:11px; }
.source-details { padding:10px; border:1px solid #dce2de; border-radius:10px; }
.source-details summary { cursor:pointer; font-weight:800; }
.submission-gate { display:none; }
.is-reviewing .submission-gate { display:block; }
.submission-preview,.translation-boundary,.authorship-gate,#contribution-form>fieldset { margin:12px 0 0; padding:13px; border:1px solid #dce2de; border-radius:11px; }
.submission-preview h3,.submission-preview p { margin:0; }
.authorship-gate label,#contribution-form>fieldset label { min-height:44px; display:flex; align-items:center; gap:8px; }
.authorship-gate input,#submission-check { width:20px; height:20px; }
.studio-actions { display:flex; align-items:center; gap:7px; margin-top:13px; }
.studio-actions button { min-height:44px; padding:0 12px; border:1px solid #d2dbd6; border-radius:9px; background:#fff; font-weight:850; }
.studio-actions .review-button { margin-left:auto; border-color:#176b5a; background:#176b5a; color:#fff; }

@media (max-width:900px) {
  .welcome { grid-template-columns:1fr; grid-template-areas:"copy" "search" "examples" "recent"; }
  .starter-pack-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .library-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trend-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .business-pack-grid { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  html { scroll-padding-top:70px; }
  .app-header { min-height:60px; gap:6px; padding:8px 12px; }
  .header-actions { gap:4px; }
  .auto-button,.saved-shortcut { display:none; }
  .account-link { min-height:40px; padding:0 7px; font-size:11px; }
  .signup-button { min-height:40px; padding:0 9px; font-size:11px; white-space:nowrap; }
  .language-button { min-width:44px; min-height:40px; padding:0 7px; font-size:10px; }
  main { width:calc(100% - 24px); padding-top:12px; }
  .welcome { gap:10px; padding:22px 16px 17px; border-radius:20px; }
  .welcome::after { width:62px; height:62px; }
  .welcome h1 { max-width:12em; font-size:30px; }
  .welcome-copy>p:last-child { max-width:30em; font-size:12px; }
  .hero-search { grid-template-columns:minmax(0,1fr) auto; }
  .hero-search label,.hero-search button { min-height:56px; border-radius:13px; box-shadow:none; }
  .hero-search label { padding:0 11px; }
  .hero-search input { font-size:14px; }
  .hero-search button { min-width:66px; padding:0 10px; font-size:12px; }
  .search-examples { gap:5px; }
  .search-examples>span { display:none; }
  .search-examples button { min-height:36px; max-width:100%; padding:0 9px; white-space:normal; }
  .recent-method { display:grid; grid-template-columns:1fr; gap:2px; }
  .recent-method .recent-secondary { margin:0; }
  .starter-pack-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .starter-pack-grid { gap:6px; }
  .starter-pack-grid button { min-height:84px; justify-items:center; padding:9px 5px; text-align:center; }
  .starter-pack-grid i { font-size:19px; }
  .starter-pack-grid b { font-size:12px; }
  .starter-pack-grid span { display:none; }
  .filter-drawer>summary { width:100%; justify-content:center; }
  .section-title-row { align-items:start; }
  .section-title-row h2 { font-size:23px; }
  #result-lead { display:none; }
  .library-list { grid-template-columns:1fr; gap:10px; }
  .library-card { min-height:156px; grid-template-columns:70px minmax(0,1fr); grid-template-rows:1fr auto; border-radius:16px; }
  .list-icon.card-visual { grid-column:1; grid-row:1/3; width:70px; height:100%; min-height:156px; flex-direction:column; justify-content:center; gap:8px; padding:8px 4px; }
  .card-visual-icon { width:42px; height:42px; }
  .card-visual-label { display:none; }
  .list-main { grid-column:2; grid-row:1; padding:13px 13px 5px; }
  .list-main h3 { min-height:0; font-size:16px; }
  .list-main>p { min-height:0; }
  .list-open { grid-column:2; grid-row:2; min-height:42px; margin:4px 12px 12px; }
  .card-save { top:auto; right:auto; bottom:11px; left:13px; width:44px; height:44px; }
  .community-ranking,.trend-section,.business-packs { margin:34px -2px 0; padding:17px 13px; }
  .ranking-list { grid-template-columns:1fr; }
  .trend-grid { display:grid; grid-template-columns:none; grid-auto-columns:82%; grid-auto-flow: column; overflow-x:auto; scroll-snap-type:x mandatory; }
  .trend-card { min-width:0; scroll-snap-align:start; }
  .pilot-consent { grid-template-columns:1fr; }
  .pilot-consent-actions { min-width:0; }
  .community-invite { align-items:stretch; flex-direction:column; padding:20px; }
  .community-invite button { width:100%; }
  .site-legal-footer { width:calc(100% - 24px); grid-template-columns:1fr; }
  .site-legal-footer nav { justify-content:flex-start; }
  .content-dialog { width:100%; margin:auto 0 0; }
  .dialog-shell { height:94vh; border-radius:20px 20px 0 0; }
  .dialog-header { padding:18px 16px 14px; }
  .dialog-header h2 { font-size:23px; }
  .detail-facts,.detail-community-summary { padding-left:16px; padding-right:16px; }
  .detail-primary-bar { position:fixed; inset:auto 0 0 0; top:auto; padding:9px 16px calc(9px + env(safe-area-inset-bottom)); box-shadow:0 -8px 24px rgba(18,29,24,.12); }
  .detail-primary-bar>span { display:none; }
  .detail-primary-bar>div { width:100%; }
  .detail-primary-bar button { flex:1; padding:0 8px; font-size:11px; }
  .save-announcement,.detail-body { padding-left:16px; padding-right:16px; }
  .detail-body { padding-bottom:116px; }
  .prompt-heading { align-items:stretch; flex-direction:column; }
  .prompt-heading button { width:100%; }
  .review-form>div { align-items:stretch; flex-direction:column; }
  .review-form button { width:100%; }
  .use-dialog form,.auth-dialog>div,.mcp-shell,.studio-shell { padding:20px 16px; }
  .mcp-url-row { grid-template-columns:1fr; }
  .mcp-url-row button { min-height:44px; }
  .studio-actions { position:sticky; bottom:-20px; z-index:3; margin:0 -16px -20px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid #dce2de; background:rgba(255,255,255,.96); }
  .studio-actions .review-button { flex:1; margin-left:0; }
}

@media (max-width:380px) {
  .header-brand>span:not(.brand-mark),.brand small { display:none; }
  .welcome h1 { font-size:27px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .library-card:hover,.starter-pack-grid button:hover { transform:none; }
}