* { 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-name { font-weight:950; }
.brand-meaning { padding-left:10px; border-left:1px solid #d9e0dc; color:#68736e; font-size:10px; font-weight:800; letter-spacing:0; }
.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; }
.loop-entry-link { min-height:44px; display:inline-flex; align-items:center; gap:7px; padding:0 12px; border:1px solid #176b5a; border-radius:11px; color:#176b5a; background:#f4fbf8; font-size:12px; font-weight:900; text-decoration:none; white-space:nowrap; }
.loop-entry-link:hover { background:#e4f4ed; }
.loop-entry-link b { display:none; }
.loop-entry-link i { font-style:normal; }
.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(320px,.9fr) minmax(420px,1.1fr); grid-template-areas:"copy panel" "recent recent"; gap:22px 48px; padding: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:13em; color:#17211d; font-size:clamp(34px,3.5vw,46px); line-height:1.12; letter-spacing:-.055em; }
.welcome-lead { max-width:34em; margin:13px 0 0; color:#53625c; font-size:14px; }
.first-view-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:22px 0 0; padding:0; list-style:none; }
.first-view-steps li { min-width:0; display:grid; grid-template-columns:26px 1fr; align-items:center; gap:7px; padding:8px 7px; border:1px solid #d7e5df; border-radius:11px; background:rgba(255,255,255,.72); color:#43514b; font-size:10px; font-weight:850; line-height:1.35; }
.first-view-steps b { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:#176b5a; color:#fff; font-size:10px; }
.welcome-search-panel { grid-area:panel; align-self:center; position:relative; z-index:1; display:grid; gap:10px; padding:20px; border:1px solid #d9e2dd; border-radius:20px; background:rgba(255,255,255,.88); box-shadow:0 12px 26px rgba(31,52,43,.07); }
.search-prompt { margin:0; color:#25332d; font-size:14px; font-weight:950; }
.companion-intro { display:flex; align-items:center; gap:9px; margin-top:3px; }
.companion-avatar { position:relative; width:36px; height:36px; flex:0 0 36px; padding:0; border:0; border-radius:12px 12px 12px 5px; background:#176b5a; box-shadow:3px 3px 0 #ffd166; transition:transform .18s ease; }
.companion-avatar:hover { transform:rotate(-4deg) translateY(-2px); }
.companion-avatar::after { content:"✦"; position:absolute; top:-10px; right:-8px; color:#d59d14; font-size:15px; transform:rotate(12deg); }
.companion-eyes::before,.companion-eyes::after { content:""; position:absolute; top:12px; width:4px; height:6px; border-radius:999px; background:#fff; }
.companion-eyes::before { left:10px; }
.companion-eyes::after { right:10px; }
.companion-mouth { position:absolute; left:14px; top:23px; width:9px; height:5px; border-bottom:2px solid #fff; border-radius:0 0 9px 9px; }
.companion-bubble { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:4px 7px; margin:0; padding:7px 10px; border:1px solid #d6e5df; border-radius:6px 12px 12px 12px; background:#fff; color:#52605a; font-size:10px; }
.companion-bubble::before { content:""; position:absolute; left:-7px; top:12px; width:12px; height:12px; border-left:1px solid #d6e5df; border-bottom:1px solid #d6e5df; background:#fff; transform:rotate(45deg); }
.companion-bubble b,.companion-bubble span { position:relative; z-index:1; }
.companion-bubble b { color:#105346; font-size:10px; }
.companion-bubble small { margin-right:4px; color:#728079; font-size:9px; }
.companion-intro.is-speaking .companion-avatar { animation:konasu-nod .4s ease; }
@keyframes konasu-nod { 45% { transform:translateY(3px) rotate(3deg); } }
.hero-search { 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:126px; min-height:64px; padding:0 18px; border:0; border-radius:16px; background:#ffd166; color:#17211d; box-shadow:0 5px 0 #d9ad43; font-size:13px; font-weight:950; }
.hero-search button:hover { background:#ffdb82; transform:translateY(-1px); }
.search-examples { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:#64716c; font-size:11px; }
.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:"panel" "recent"; gap:8px; padding:14px 16px; border-radius:18px; }
.is-filtering .welcome::after,.is-filtering .welcome-copy,.is-filtering .search-prompt,.is-filtering .search-examples,.is-filtering .companion-intro { display:none; }
.is-filtering .welcome-search-panel { padding:0; border:0; background:transparent; box-shadow: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:block; margin-top:1px; font-size:11px; }
.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:16px; }
.library-card { --card-accent:#55a88a; --card-tint:#edf8f2; position:relative; isolation:isolate; min-width:0; min-height:250px; display:grid; grid-template-rows:76px 1fr auto; overflow:hidden; border:1px solid #dce4df; border-radius:20px; background:#fff; box-shadow:0 4px 14px rgba(31,52,43,.055),0 1px 2px rgba(31,52,43,.04); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.library-card::after { content:""; position:absolute; z-index:2; inset:0 0 auto; height:4px; background:var(--card-accent); pointer-events:none; }
.library-card:hover,.library-card:focus-within { transform:translateY(-4px); border-color:color-mix(in srgb,var(--card-accent) 48%,#dce4df); box-shadow:0 16px 32px rgba(31,52,43,.12),0 2px 5px rgba(31,52,43,.05); }
.library-card:has(.list-open:focus-visible) { outline:3px solid #176b5a; outline-offset:3px; }
.library-card:has(.list-open:active) { transform:translateY(-1px) scale(.995); }
.library-card[data-visual-category="writing"] { --card-accent:#e58958; --card-tint:#fff1e8; }
.library-card[data-visual-category="learning"] { --card-accent:#7f88d8; --card-tint:#eef0ff; }
.library-card[data-visual-category="life"] { --card-accent:#d6a82f; --card-tint:#fff6d9; }
.library-card[data-visual-category="image"] { --card-accent:#cf72a0; --card-tint:#fdebf3; }
.library-card[data-visual-category="coding"] { --card-accent:#579bc7; --card-tint:#e7f5ff; }
.list-icon.card-visual { width:100%; height:76px; display:flex; align-items:center; justify-content:space-between; padding:13px 15px 10px; background:var(--card-tint); background:linear-gradient(135deg,var(--card-tint),color-mix(in srgb,var(--card-tint) 58%,#fff)); }
.card-visual-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.92); border-radius:15px; background:rgba(255,255,255,.88); box-shadow:0 5px 12px rgba(31,52,43,.08); font-size:23px; transition:transform .18s ease; }
.library-card:hover .card-visual-icon,.library-card:focus-within .card-visual-icon { transform:translateY(-2px) rotate(-2deg); }
.card-visual-label { padding:6px 10px; border:1px solid rgba(255,255,255,.92); border-radius:999px; background:rgba(255,255,255,.86); color:#324039; font-size:10px; font-weight:900; }
.list-main { min-width:0; display:flex; flex-direction:column; padding:15px 17px 8px; }
.list-labels,.card-dates { display:none; }
.library-card .list-meta { display:none; }
.library-card .card-decision { display:none; }
.list-main h3 { min-height:46px; display:-webkit-box; margin:0; overflow:hidden; color:#17211d; font-size:17px; line-height:1.35; letter-spacing:-.025em; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.list-main > p { display:-webkit-box; min-height:38px; margin:7px 0 0; overflow:hidden; color:#63706a; font-size:12px; line-height:1.58; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.community-card-meta { min-height:29px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px; }
.community-card-meta .card-author { min-width:0; display:flex; align-items:center; color:#52605a; font-size:10px; font-weight:850; }
.community-card-meta .card-author .endorsement-badge { margin-left:0; padding:2px 7px 2px 4px; font-size:10px; }
.community-card-meta .card-author .endorsement-badge i { font-size:15px; }
.community-card-meta .card-helpfulness { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:850; }
.card-vote-count { padding:3px 7px; border:1px solid #d6e2dc; border-radius:999px; background:#f6faf8; color:#315047; white-space:nowrap; }
.card-vote-count.is-not-helpful { background:#faf8f6; color:#68584f; }
.list-open { z-index:1; min-height:46px; display:flex; align-items:center; justify-content:space-between; margin:4px 16px 14px; padding:0 12px; border:0; border-top:1px solid #e4e9e6; border-radius:0; background:transparent; color:#105346; font-size:12px; font-weight:900; text-align:left; }
.list-open::before { content:""; position:absolute; inset:0; }
.list-open::after { content:"→"; width:28px; height:28px; display:grid; place-items:center; flex:0 0 28px; margin-left:8px; border-radius:50%; background:var(--card-tint); color:#17211d; font-size:14px; transition:transform .18s ease,background-color .18s ease; }
.list-open:hover { color:#105346; }
.library-card:hover .list-open::after,.library-card:focus-within .list-open::after { transform:translateX(3px); background:color-mix(in srgb,var(--card-accent) 24%,#fff); }
.card-save { position:absolute; z-index:4; top:14px; right:14px; width:44px; height:44px; border:1px solid rgba(255,255,255,.95); border-radius:50%; background:rgba(255,255,255,.92); color:#176b5a; box-shadow:0 5px 13px rgba(22,33,28,.12); font-size:19px; transition:transform .16s ease,background-color .16s ease,color .16s ease; }
.card-save:hover { transform:scale(1.07); }
.card-save:focus-visible { outline:3px solid #176b5a; outline-offset:2px; }
.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; }
.binary-rating { display:grid; grid-template-columns:1fr 1fr; gap:7px; width:min(100%,420px); }
.binary-rating button { justify-content:center; font-weight:850; }
.binary-rating .helpful-button.is-selected { border-color:#176b5a; background:#edf7f3; color:#105346; }
.binary-rating .not-helpful-button.is-selected { border-color:#9d6659; background:#fff1ed; color:#7d3e31; }
.owner-post-actions { display:flex; gap:5px; margin-left:auto; }
.owner-post-actions button { min-height:36px; padding:0 10px; border:1px solid #d2dbd6; border-radius:8px; background:#fff; font-weight:800; }
.owner-post-actions #delete-own-post { color:#a32d2d; }
.endorsement-badge { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:3px 7px 3px 4px; border:1px solid #d8b24e; border-radius:999px; background:#fff9e8; color:#145c4d; font-size:11px; font-weight:900; white-space:nowrap; }
.endorsement-badge i { color:#d59d14; font-size:18px; font-style:normal; line-height:1; filter:drop-shadow(0 1px 0 #fff); animation:endorsement-spark 4.8s ease-in-out infinite; }
.endorsement-badge::after { content:""; position:absolute; inset:-30% auto -30% -45%; width:28%; transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent); animation:endorsement-shine 4.8s ease-in-out infinite; }
@keyframes endorsement-shine { 0%,72% { left:-45%; } 88%,100% { left:125%; } }
@keyframes endorsement-spark { 0%,70%,100% { transform:rotate(12deg) scale(1); } 78% { transform:rotate(35deg) scale(1.32); } 86% { transform:rotate(12deg) scale(1); } }
@media (prefers-reduced-motion:reduce) { .endorsement-badge::after { animation:none; display:none; } .endorsement-badge i { animation:none; } }
.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 auto; align-items:center; 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; }
.studio-steps em { padding:5px 8px; border-radius:999px; background:#fff0bd; color:#5c4811; font-size:11px; font-style:normal; font-weight:900; white-space:nowrap; }
.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-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; }
.studio-dialog[data-mode="new"] .submission-preview,.studio-dialog[data-mode="source"] .submission-preview { display:none; }
.studio-dialog .submission-preview { background:#fafbf9; }
.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; }
#contribution-form>fieldset small { display:block; margin-top:5px; color:#68736e; font-size:11px; }
.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; }
.studio-actions .review-button:disabled { cursor:wait; opacity:.65; }

@media (max-width:900px) {
  .brand-meaning { display:none; }
  .loop-entry-link { display:none; }
  .welcome { grid-template-columns:1fr; grid-template-areas:"copy" "panel" "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-brand .brand-name,.header-brand .brand-meaning,.header-brand small { display:none; }
  .header-actions { gap:4px; }
  .auto-button,.saved-shortcut { display:none; }
  .loop-entry-link { display:none; }
  .account-link { min-height:40px; padding:0 7px; font-size:11px; }
  .signup-button { width:90px; min-height:40px; padding:4px 7px; font-size:10px; line-height:1.05; white-space:normal; }
  .loop-entry-link { min-height:40px; padding:0 8px; font-size:11px; }
  .loop-entry-link span { display:none; }
  .loop-entry-link b { display:inline; }
  .language-button { min-width:44px; min-height:40px; padding:0 7px; font-size:10px; }
  main { width:calc(100% - 24px); padding-top:12px; }
  .welcome { gap:14px; padding:22px 16px 17px; border-radius:20px; }
  .welcome::after { width:62px; height:62px; }
  .welcome h1 { max-width:12em; font-size:30px; }
  .welcome-lead { max-width:30em; font-size:12px; }
  .first-view-steps { margin-top:16px; }
  .first-view-steps li { grid-template-columns:22px 1fr; padding:7px 5px; font-size:9px; }
  .first-view-steps b { width:22px; height:22px; }
  .welcome-search-panel { gap:9px; padding:14px; border-radius:15px; }
  .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:82px; padding:0 9px; font-size:11px; line-height:1.25; }
  .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; }
  .community-card-meta { min-height:25px; padding-top:5px; }
  .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 .brand-name,.header-brand .brand-meaning,.brand small { display:none; }
  .welcome h1 { font-size:27px; }
  .first-view-steps { grid-template-columns:1fr; }
  .hero-search { grid-template-columns:1fr; }
  .hero-search button { width:100%; }
}

@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; }
}

/* Social feed shell — inspired by tool-library layouts, adapted to AI Konas */
.app-shell { min-height:100vh; display:grid; grid-template-columns:238px minmax(0,1fr); background:#fafafa; }
.app-content { min-width:0; }
.social-sidebar { position:sticky; top:0; z-index:40; height:100vh; display:flex; flex-direction:column; gap:20px; padding:20px 14px 16px; border-right:1px solid #e4e7e5; background:#fff; }
.sidebar-brand { padding:0 8px; }
.sidebar-brand>span:last-child { min-width:0; display:grid; line-height:1.15; }
.sidebar-brand b { font-size:17px; }
.sidebar-brand small { margin-top:4px; color:#7a8580; font-size:9px; font-weight:750; letter-spacing:0; }
.social-nav { display:grid; gap:4px; }
.social-nav a { min-height:48px; display:grid; grid-template-columns:34px 1fr; align-items:center; gap:8px; padding:0 12px; border-radius:13px; color:#35413c; font-size:13px; font-weight:850; text-decoration:none; }
.social-nav a:hover,.social-nav a.is-current { background:#eef7f3; color:#105346; }
.social-nav a.is-current { box-shadow:inset 3px 0 #176b5a; }
.social-nav i { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:#f3f5f4; color:#176b5a; font-size:17px; font-style:normal; }
.sidebar-compose { min-height:48px; padding:0 14px; border:0; border-radius:14px; background:#17211d; color:#fff; font-size:13px; font-weight:900; box-shadow:0 7px 16px rgba(23,33,29,.15); }
.sidebar-compose:hover { background:#176b5a; }
.sidebar-foot { display:grid; gap:2px; margin-top:auto; }
.sidebar-foot a { min-height:40px; display:flex; align-items:center; padding:0 12px; border-radius:10px; color:#69746f; font-size:11px; font-weight:800; text-decoration:none; }
.sidebar-foot a:hover { background:#f2f4f3; color:#17211d; }

.app-header { min-height:60px; padding:8px 28px; }
.social-stage { width:min(1080px,calc(100% - 44px)); display:grid; grid-template-columns:minmax(0,720px) 300px; align-items:start; gap:28px; margin:0 auto; }
.social-stage main { width:auto; min-width:0; margin:0; padding:28px 0 96px; }
.social-rail { position:sticky; top:82px; display:grid; gap:12px; padding-top:28px; }
.rail-card { padding:18px; border:1px solid #e0e5e2; border-radius:18px; background:#fff; box-shadow:0 5px 16px rgba(25,45,36,.04); }
.rail-card h2,.rail-card p { margin:0; }
.rail-card h2 { font-size:16px; line-height:1.4; letter-spacing:-.025em; }
.rail-card p { margin-top:7px; color:#69746f; font-size:11px; line-height:1.7; }
.rail-intro { overflow:hidden; background:linear-gradient(145deg,#17211d,#24463a); color:#fff; }
.rail-intro p { color:#c9d8d2; }
.rail-kicker { display:block; margin-bottom:8px; color:#ffd166; font-size:9px; font-weight:950; letter-spacing:.16em; }
.rail-feed { position:relative; min-height:330px; padding:0; }
.rail-feed-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:15px 16px 10px; }
.rail-feed-head .rail-kicker { margin:0; }
.rail-feed-live { display:inline-flex; align-items:center; gap:5px; color:#c9d8d2; font-size:8px; font-weight:850; }
.rail-feed-live i { width:6px; height:6px; border-radius:50%; background:#ffd166; box-shadow:0 0 0 4px rgba(255,209,102,.12); }
.rail-feed-progress { height:2px; overflow:hidden; background:rgba(255,255,255,.12); }
.rail-feed-progress i { display:block; width:100%; height:100%; background:#ffd166; transform:scaleX(0); transform-origin:left; }
.rail-feed.is-running .rail-feed-progress i { animation:rail-feed-progress 8s linear forwards; }
.rail-feed-pick { width:100%; min-height:190px; display:block; padding:14px 16px 11px; border:0; background:transparent; color:#fff; text-align:left; }
.rail-feed-pick h2 { min-height:45px; font-size:17px; }
.rail-feed-pick p { min-height:56px; }
.rail-feed-author { display:flex; align-items:center; gap:6px; margin-bottom:10px; color:#dce8e3; font-size:9px; font-weight:850; }
.rail-feed-author>i { width:22px; height:22px; display:grid; place-items:center; border-radius:8px 8px 8px 3px; background:#176b5a; color:#fff; font-style:normal; }
.rail-feed-author>b { margin-left:auto; padding:3px 6px; border-radius:999px; background:#fff4c9; color:#5a4610; font-size:8px; }
.rail-feed-label { display:block; margin-bottom:6px; color:#91cbb9; font-size:9px; font-weight:900; }
.rail-feed-open { display:flex; align-items:center; justify-content:space-between; margin-top:12px; color:#ffd166; font-size:10px; font-weight:900; }
.rail-feed-open i { font-style:normal; }
.rail-feed-reactions { display:grid; grid-template-columns:repeat(3,1fr); margin:0 12px 12px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:12px; }
.rail-feed-reactions button { min-width:0; min-height:54px; display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; align-content:center; justify-content:center; column-gap:5px; padding:5px 3px; border:0; background:rgba(255,255,255,.045); color:#fff; }
.rail-feed-reactions button+button { border-left:1px solid rgba(255,255,255,.12); }
.rail-feed-reactions button:hover,.rail-feed-reactions button[aria-pressed="true"] { background:rgba(255,209,102,.13); color:#ffd166; }
.rail-feed-reactions button>span { grid-row:1/3; align-self:center; font-size:15px; font-weight:950; }
.rail-feed-reactions b { font-size:13px; line-height:1; text-align:left; }
.rail-feed-reactions small { color:#aebeb7; font-size:7px; font-weight:800; white-space:nowrap; }
.rail-feed.is-entering .rail-feed-pick>* { animation:rail-feed-enter .48s cubic-bezier(.2,.75,.25,1) both; }
.rail-feed.is-entering .rail-feed-pick>*:nth-child(2) { animation-delay:.035s; }
.rail-feed.is-entering .rail-feed-pick>*:nth-child(3) { animation-delay:.07s; }
.rail-feed.is-entering .rail-feed-pick>*:nth-child(4) { animation-delay:.105s; }
.rail-feed-controls { display:grid; grid-template-columns:34px 1fr 34px; align-items:center; padding:0 12px 12px; }
.rail-feed-controls button { width:32px; height:30px; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:rgba(255,255,255,.06); color:#fff; }
.rail-feed-controls button:hover { background:rgba(255,255,255,.14); }
.rail-feed-controls span { color:#91a49c; font-size:8px; font-weight:850; letter-spacing:.12em; text-align:center; }
@keyframes rail-feed-progress { to { transform:scaleX(1); } }
@keyframes rail-feed-enter { from { opacity:0; transform:translateY(13px) skewY(1deg); } to { opacity:1; transform:none; } }
.rail-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rail-heading a { color:#176b5a; font-size:10px; font-weight:850; text-decoration:none; }
.rail-trends { margin:11px 0 0; padding:0; list-style:none; }
.rail-trends li+li { border-top:1px solid #edf0ee; }
.rail-trends button { width:100%; min-height:60px; display:grid; grid-template-columns:27px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:7px; padding:8px 0; border:0; background:transparent; text-align:left; }
.rail-trends button>span { grid-row:1/3; color:#a0aaa5; font-size:10px; font-weight:900; }
.rail-trends b { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.rail-trends small { color:#7b8781; font-size:9px; }
.mini-certification { display:inline-flex; align-items:center; gap:4px; margin-bottom:9px; padding:4px 8px; border-radius:999px; background:#fff4c9; color:#5a4610; font-size:10px; font-weight:900; }
.mini-certification i { color:#d29a0d; font-size:15px; font-style:normal; }
.rail-pricing>span { display:block; margin-bottom:6px; color:#176b5a; font-size:10px; font-weight:950; }
.rail-pricing a { min-height:42px; display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding:0 12px; border-radius:11px; background:#17211d; color:#fff; font-size:11px; font-weight:900; text-decoration:none; }
.rail-pricing i { font-style:normal; }

.welcome { display:block; padding:30px 28px 24px; border:1px solid #e0e5e2; border-radius:22px; background:#fff; box-shadow:none; text-align:center; }
.welcome::after { right:-40px; top:-46px; width:96px; height:96px; border-radius:28px; opacity:.55; }
.welcome-copy { max-width:620px; margin:0 auto; }
.welcome h1 { max-width:none; font-size:clamp(32px,4vw,46px); }
.welcome h1 br { display:none; }
.welcome-lead { margin:9px auto 0; }
.first-view-steps { max-width:560px; margin:17px auto 0; }
.welcome-search-panel { max-width:660px; margin:20px auto 0; padding:14px; border-radius:18px; box-shadow:0 12px 26px rgba(31,52,43,.08); text-align:left; }
.search-prompt { padding-left:2px; }
.hero-search label { min-height:70px; border:1px solid #cfd7d3; border-radius:14px; box-shadow:none; }
.hero-search button { min-height:70px; border-radius:14px; background:#17211d; color:#fff; box-shadow:none; }
.hero-search button:hover { background:#176b5a; }
.companion-intro { justify-content:center; }
.recent-method { max-width:660px; margin:12px auto 0; text-align:left; }

.starter-packs { margin:14px 0 16px; }
.starter-pack-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.starter-pack-grid button { min-height:82px; border-radius:14px; }
.feed-composer { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; margin:0 0 18px; padding:12px; border:1px solid #dce2de; border-radius:18px; background:#fff; }
.composer-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:14px 14px 14px 5px; background:#176b5a; color:#fff; box-shadow:3px 3px 0 #ffd166; font-weight:950; }
.feed-composer>.contribution-trigger:not(.composer-submit) { min-width:0; display:grid; gap:2px; padding:4px 7px; border:0; background:transparent; text-align:left; }
.feed-composer b { font-size:12px; }
.feed-composer button span { color:#7a8580; font-size:10px; }
.composer-submit { min-height:42px; padding:0 13px; border:0; border-radius:11px; background:#17211d; color:#fff; font-size:11px; font-weight:900; }

.content-section { padding-top:4px; }
.section-title-row h2 { font-size:24px; }
.library-list { grid-template-columns:1fr; gap:11px; }
.library-card { min-height:176px; grid-template-columns:104px minmax(0,1fr); grid-template-rows:1fr auto; border-radius:18px; box-shadow:0 3px 10px rgba(31,52,43,.045); }
.library-card::after { inset:0 auto 0 0; width:4px; height:auto; }
.list-icon.card-visual { grid-column:1; grid-row:1/3; width:104px; height:100%; min-height:176px; flex-direction:column; justify-content:center; gap:9px; padding:12px 8px; }
.card-visual-label { max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-main { grid-column:2; grid-row:1; padding:17px 54px 6px 17px; }
.list-main h3 { min-height:0; font-size:18px; }
.list-main>p { min-height:0; font-size:12px; }
.community-card-meta { min-height:28px; }
.list-open { grid-column:2; grid-row:2; min-height:44px; margin:3px 16px 12px; padding:0 10px; }
.card-save { top:13px; right:13px; }
.community-ranking,.trend-section,.business-packs { margin-top:28px; }
.trend-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.community-invite { margin-top:30px; }
.site-legal-footer { width:min(1080px,calc(100% - 44px)); }

@media (min-width:961px) {
  .app-header .header-brand { display:none; }
}
@media (max-width:1180px) {
  .social-stage { width:min(760px,calc(100% - 36px)); grid-template-columns:1fr; }
  .social-rail { display:none; }
  .site-legal-footer { width:min(760px,calc(100% - 36px)); }
}
@media (max-width:960px) {
  .app-shell { display:block; }
  .social-sidebar { display:none; }
  .app-header .header-brand { display:none; }
  .app-header { padding:8px 18px; }
  .social-stage { width:min(760px,calc(100% - 28px)); }
}
@media (max-width:620px) {
  .social-stage { width:100%; }
  .social-stage main { width:calc(100% - 24px); margin:0 auto; padding-top:12px; }
  .welcome { padding:23px 15px 17px; text-align:left; }
  .welcome-copy { margin:0; }
  .welcome h1 { font-size:30px; }
  .first-view-steps { margin-left:0; }
  .welcome-search-panel { margin-top:15px; }
  .companion-intro { justify-content:flex-start; }
  .starter-pack-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .feed-composer { grid-template-columns:40px minmax(0,1fr); }
  .composer-submit { grid-column:1/-1; width:100%; }
  .library-card { min-height:156px; grid-template-columns:70px minmax(0,1fr); }
  .list-icon.card-visual { width:70px; min-height:156px; }
  .list-main { padding:13px 48px 5px 13px; }
  .list-main h3 { font-size:16px; }
  .card-save { top:10px; right:9px; }
  .site-legal-footer { width:calc(100% - 24px); }
}

/* Compact goal picker: six quick choices, not six content cards. */
.starter-packs { margin:12px 0 15px; }
.starter-packs .section-title-row { margin-bottom:7px; }
.starter-pack-grid { gap:7px; }
.starter-pack-grid button {
  min-height:56px;
  grid-template-columns:25px minmax(0,1fr);
  grid-template-rows:1fr;
  align-items:center;
  align-content:center;
  justify-items:start;
  gap:7px;
  padding:7px 10px;
  border-radius:12px;
}
.starter-pack-grid i { font-size:20px; }
.starter-pack-grid b { margin:0; font-size:12px; line-height:1.3; }
.starter-pack-grid span { display:none; }

@media (max-width:620px) {
  .starter-packs { margin-top:10px; }
  .starter-packs .section-title-row { margin-bottom:6px; }
  .starter-pack-grid { gap:5px; }
  .starter-pack-grid button {
    min-height:52px;
    grid-template-columns:1fr;
    justify-items:center;
    gap:1px;
    padding:5px 3px;
    text-align:center;
  }
  .starter-pack-grid i { font-size:17px; }
  .starter-pack-grid b { font-size:11px; }
}