/* 2026-09: one calm workspace. Presentation only; never styles user documents. */
:root{--coast-bg:#f4f5ef;--coast-paper:#fffef9;--coast-soft:#eef2e9;--coast-sea:#e5efe8;--coast-line:#dce3d8;--coast-ink:#293e35;--coast-muted:#66746b;--coast-brand:#3e725d;--coast-hover:#2d5947;--coast-shadow:0 2px 10px #304c3810;--coast-top:64px}
html[data-theme="dark"]{--coast-bg:#14241f;--coast-paper:#1c3029;--coast-soft:#253c32;--coast-sea:#2b4538;--coast-line:#3e594b;--coast-ink:#eef3e9;--coast-muted:#b2c5b8;--coast-brand:#acd4b8;--coast-hover:#c9e6ce;--coast-shadow:0 2px 10px #06130d20}
html body.coast-app{font-weight:400;line-height:1.65}
.coast-app :is(h1,h2,h3){font-weight:650;letter-spacing:-.02em}
.coast-app main h1{font-size:26px}
.coast-app main :is(.button,.btn,.content-button,.vc-button,.av-button,.software-button){font-weight:600;min-height:40px}
.coast-app main :is(.button,.btn,.content-button,.vc-button,.av-button,.software-button):active{transform:translateY(1px)}
.coast-app .site-compliance-footer{font-size:11px;line-height:1.6;padding:16px 24px}
.coast-app .site-compliance-footer :is(b,strong,a){font-weight:500}
.coast-app :is(.content-name,.software-name,.vc-card-title,.settings-title){font-weight:600}
.coast-app :is(.content-tab,.software-category,.vc-filter){font-weight:550}
/* Short, discoverable navigation. All groups remain available and keyboard operable. */
html body.coast-app>aside[data-primary-sidebar]{padding:16px 12px}
.coast-app .brand{margin-bottom:12px;gap:9px}
.coast-app .brand b{font-size:18px;font-weight:700}
.coast-app .side-nav{gap:3px}
.coast-app .side-nav a{font-size:13px;font-weight:500;min-height:39px;padding:7px 10px}
.coast-app .side-nav a.active{font-weight:650;border-color:var(--coast-line)!important}
.coast-app .nav-group{margin-top:3px}
.coast-app button.coast-nav-toggle{min-height:40px;font-size:12px;letter-spacing:.02em;font-weight:550;padding:10px}
.coast-app .coast-pinned{margin:8px 0;padding:0 0 12px;border-bottom:1px solid var(--coast-line)}
.coast-app .coast-pinned .nav-heading{font-size:10px;letter-spacing:.08em;padding-top:5px}
.coast-app .coast-pinned-list{gap:3px}
.coast-app .coast-pinned-list a{min-height:38px;font-size:13px;font-weight:500}
.coast-app .sidebar-storage-card{margin-top:16px;background:transparent!important;border-color:var(--coast-line)!important;padding:10px}
.coast-app .sidebar-storage-head{gap:8px}
.coast-app .sidebar-storage-name small{display:none}
.coast-app .sidebar-storage-details summary{min-height:36px;font-size:11px}
html body.coast-app>header.xiaoxiang-topbar{padding:9px 26px;gap:20px}
.coast-app .xiaoxiang-top-search{background:var(--coast-soft)!important}
.coast-app .xiaoxiang-top-search input{font-size:13px}
.coast-app :is(.account-menu summary,.notify-menu summary,.theme-quick-toggle){border-color:transparent!important;background:transparent!important}
.coast-app .mobile-menu-panel{background:var(--coast-paper)!important;box-shadow:0 24px 80px #13291f30}
.coast-app .mobile-menu-grid a{font-weight:550;border-color:var(--coast-line);border-radius:12px}
/* A compact welcome plus the full living panorama when explicitly expanded. */
.coast-home{gap:22px;max-width:1800px}
.coast-welcome{min-height:226px;grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr);border-radius:20px}
.coast-welcome-copy{padding:23px 28px}
.coast-app .coast-welcome h1{font-size:clamp(24px,1.9vw,32px);margin:10px 0;line-height:1.4}
.coast-app .coast-welcome h1 span{font-size:.76em;font-weight:500}
.coast-welcome p{font-size:13px}
.coast-welcome-actions{gap:14px;flex-wrap:wrap;margin-top:17px}
.coast-app .coast-welcome-actions .primary{min-height:40px;padding:9px 14px;font-size:12px}
.coast-welcome-scene{align-self:stretch;display:flex;align-items:end}
.coast-welcome-scene>[data-forest-panorama]{width:100%;height:226px;min-height:0}
.coast-app .coast-scene-expand{padding:6px 0;min-height:36px;background:transparent;border:0;box-shadow:none;color:var(--coast-muted);font-size:11px;font-weight:500;cursor:pointer}
.coast-app .coast-scene-expand:hover{color:var(--coast-brand);text-decoration:underline}
.coast-welcome[data-scene-expanded="true"]{grid-template-columns:minmax(0,1fr)}
.coast-welcome[data-scene-expanded="true"] .coast-welcome-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center}
.coast-welcome[data-scene-expanded="true"] .coast-welcome-copy>.coast-eyebrow{display:none}
.coast-welcome[data-scene-expanded="true"] .coast-welcome-copy h1{margin:0;font-size:24px}
.coast-welcome[data-scene-expanded="true"] .coast-welcome-copy h1 br,.coast-welcome[data-scene-expanded="true"] .coast-welcome-copy h1 span,.coast-welcome[data-scene-expanded="true"] .coast-welcome-copy>p{display:none}
.coast-welcome[data-scene-expanded="true"] .coast-welcome-actions{margin:0}
.coast-welcome[data-scene-expanded="true"] [data-forest-panorama]{height:clamp(260px,24vw,420px)}
.coast-home-section{padding:18px 20px;border-radius:16px}
.coast-section-heading{margin-bottom:10px}
.coast-section-heading .coast-eyebrow{font-size:9px;letter-spacing:.12em}
.coast-section-heading h2{font-size:18px;margin-top:4px}
.coast-shortcut{min-height:88px;gap:8px;padding:9px 5px}
.coast-shortcut>.coast-icon{width:32px;height:32px}
.coast-shortcut b{font-weight:600;font-size:12px}
.coast-centers{margin-top:6px}
.coast-app .coast-centers-heading h2{font-size:24px}
.coast-app .hub-card{border-radius:18px;box-shadow:none;padding:22px}
.coast-app .hub-card-head{min-height:146px;margin-bottom:14px}
.coast-app .hub-card h3{font-size:25px;font-weight:650}
.coast-app .hub-tile{min-height:69px;border-radius:12px}
.coast-app .hub-tile-copy b{font-weight:600}
/* Other tools share a compact page header; games retain their own stage. */
.coast-app :is(.content-pagehead,.intel-pagehead,.birth-pagehead,.agi-pagehead,.keyword-pagehead){margin-bottom:18px;gap:16px}
.coast-app :is(.content-pagehead,.intel-pagehead,.birth-pagehead) h1{font-size:26px}
.coast-app :is(.content-pagehead,.intel-pagehead,.birth-pagehead) p{font-size:13px;margin-top:5px}
html body.coast-app .vc-main .vc-hero{min-height:108px;padding:18px 22px!important;box-shadow:none!important;border-radius:16px;background:var(--coast-paper)!important}
.coast-app .vc-hero-title{font-size:26px}
.coast-app .vc-hero-title:after{display:none}
.coast-app .vc-hero-art{max-height:96px;max-width:180px;object-fit:contain}
.coast-app .vc-hero p{font-size:13px}
.coast-app .vc-list-panel{padding:18px;box-shadow:none!important}
.coast-app .vc-overview{border-radius:10px;padding:10px 12px}
.coast-app .vc-empty{padding:35px 20px;min-height:250px}
.coast-app :is(.community-banner,.community-hero){min-height:154px;box-shadow:none!important}
.coast-app :is(.community-banner,.community-hero) h1{font-size:28px}
.coast-app :is(.community-banner,.community-hero) img{max-height:135px;object-fit:contain}
.coast-app :is(.agi-panel,.ag-panel,.intel-form-panel,.settings-panel,.birth-panel){box-shadow:none!important}
.coast-app .intel-form-panel{padding:22px}
.coast-app :is(.settings-tab,.life-module-nav a,.intel-local-links a){font-weight:550}
.coast-app .fchat-main{box-shadow:none!important;overflow:hidden}
.coast-app .fchat-sidebar{box-shadow:none!important}
/* Login stays expressive, with the form as the strongest interactive surface. */
.coast-auth .login-redesign-shell,.coast-auth .register-redesign-shell{max-width:1680px;margin-inline:auto;box-shadow:0 12px 50px #284a3410}
.coast-auth .login-visual-copy{margin-top:clamp(25px,5vh,55px)}
.coast-auth .login-form-head h2,.coast-auth .register-form-head h2{font-weight:650}
.coast-auth .login-field,.coast-auth .register-field{font-weight:550}
.coast-auth .login-form-head p{font-size:13px;line-height:1.7}
.coast-auth .login-input-wrap input,.coast-auth .register-input-wrap input{font-weight:400;transition:border-color .15s,box-shadow .15s}
.coast-auth .login-input-wrap input:focus,.coast-auth .register-input-wrap input:focus{box-shadow:0 0 0 3px var(--coast-sea);border-color:var(--coast-brand)}
.coast-auth .login-mascot{animation:coast-breathe 7s ease-in-out infinite}
@keyframes coast-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* Dark controls keep readable text rather than light text on a light accent. */
html[data-theme="dark"] .coast-app main :is(.primary,.btn-primary,.content-button:not(.secondary):not(.ghost):not(.danger),.ai-image-submit,.intel-primary,.birth-primary,.vc-button.primary,.software-button.primary,.av-button.primary,.coast-submit-dock button){color:#142b20!important}
html[data-theme="dark"] .coast-auth :is(.login-submit,.register-submit){color:#142b20!important}
html[data-theme="dark"] .coast-app .coast-welcome{background:#243c33}
html[data-theme="dark"] body.coast-app{background:var(--coast-bg)!important}
html[data-theme="dark"] .coast-app .account-vault>.av-at-head{background:radial-gradient(ellipse at 80% 70%,#355848,transparent 62%),linear-gradient(110deg,#203a2e,#1c3029)!important}
html[data-theme="dark"] .coast-app .account-vault .av-folder-link{background:var(--coast-paper);color:var(--coast-ink);border-color:var(--coast-line)}
html[data-theme="dark"] .coast-app .account-vault .av-folder-link.active{background:var(--coast-sea)!important;color:var(--coast-brand)!important;border-color:var(--coast-line)!important}
@media(min-width:1800px){
 .coast-app main h1{font-size:30px}
 .coast-welcome{min-height:256px}.coast-welcome-scene>[data-forest-panorama]{height:256px}
 .coast-home-section{padding:22px 26px}.coast-shortcut{min-height:100px}
 .coast-app .hub-card{padding:28px}.coast-app .hub-card-head{min-height:174px}
 .coast-app .hub-tile{min-height:80px}
}
@media(max-width:1190px) and (min-width:921px){
 .coast-welcome{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .coast-welcome-copy{padding:22px}.coast-welcome-actions{gap:9px}
 .coast-shortcuts{grid-template-columns:repeat(8,minmax(0,1fr))}.coast-shortcut b{font-size:11px}
}
@media(max-width:920px){
 :root{--coast-top:58px}
 html body.coast-app>header.xiaoxiang-topbar{height:58px;min-height:58px;padding:7px 16px}
 html body.coast-app>main:not(.game-main){padding-top:18px!important;padding-bottom:calc(90px + env(safe-area-inset-bottom))!important}
 .coast-home{gap:16px}.coast-welcome{display:block;min-height:0;border-radius:17px}
 .coast-welcome-copy{padding:18px 20px 10px}.coast-welcome-copy>.coast-eyebrow{display:none}
 .coast-app .coast-welcome h1{font-size:22px;margin:0 0 5px}.coast-app .coast-welcome h1 br{display:none}
 .coast-app .coast-welcome h1 span{display:none}.coast-welcome p{font-size:12px}
 .coast-welcome-actions{margin-top:11px;gap:9px;flex-wrap:nowrap}.coast-welcome-actions>.coast-text-link{display:none}
 .coast-app .coast-scene-expand{margin-left:auto;min-height:40px;font-size:11px;width:auto!important;flex:none}
 .coast-welcome-scene>[data-forest-panorama]{height:136px;width:100%;object-fit:cover}
 .coast-scene-controls{top:6px;left:9px;gap:5px}.coast-app .coast-scene-toggle{width:38px;height:38px;min-height:38px}
 .coast-weather{left:96px;top:6px;max-width:calc(100% - 106px)}.coast-app .coast-weather-pill{min-height:38px;padding:6px 10px;font-size:11px}
 .coast-welcome[data-scene-expanded="true"] .coast-welcome-copy{display:block;padding:18px 20px 12px}
 .coast-welcome[data-scene-expanded="true"] .coast-welcome-actions{margin-top:10px}
 .coast-welcome[data-scene-expanded="true"] [data-forest-panorama]{height:240px}
 .coast-home-section{padding:16px 12px}.coast-section-heading{padding:0 5px;margin-bottom:8px}
 .coast-section-heading .coast-eyebrow{display:none}.coast-section-heading h2{font-size:18px;margin:0}
 .coast-shortcuts{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 .coast-shortcut{min-height:79px;gap:6px;padding:7px 2px}.coast-shortcut>.coast-icon{width:30px;height:30px}
 .coast-shortcut b{font-size:11px}.coast-shortcut small{font-size:10px}
 .coast-app .coast-centers-heading h2{font-size:22px}.coast-centers-heading>p{font-size:12px}
 .coast-app .hub-card{padding:18px}.coast-app .hub-card-head{min-height:117px}.coast-app .hub-card h3{font-size:23px}
 .coast-app .hub-tile{min-height:69px}.coast-app .hub-tile-copy small{line-height:1.6}
 .coast-app :is(.content-pagehead,.intel-pagehead,.birth-pagehead) h1{font-size:23px}
 html body.coast-app .vc-main .vc-hero{min-height:0;padding:16px!important;gap:12px}
 .coast-app .vc-hero-title{font-size:23px}.coast-app .vc-hero-actions{gap:8px}
 .coast-app .vc-hero-actions button{min-height:42px}.coast-app .vc-list-panel{padding:12px}
 .coast-app .vc-overview{padding:8px;gap:8px}.coast-app .vc-empty{padding:30px 16px;min-height:230px}
 .coast-app :is(.community-banner,.community-hero){min-height:120px;padding:18px}
 .coast-app .intel-form-panel{padding:17px}.coast-app .site-compliance-footer{font-size:10px}
}
@media(max-width:900px){
 .coast-auth .login-redesign-visual,.coast-auth .register-visual{padding:18px 24px 15px}
 .coast-auth .login-visual-copy{margin-top:10px}.coast-auth .login-visual-copy h1{font-size:21px}
 .coast-auth .login-redesign-panel,.coast-auth .register-panel{padding:22px 24px}
 .coast-auth .login-form-head{margin-bottom:21px}.coast-auth .login-input-wrap input,.coast-auth .register-input-wrap input{font-size:16px}
 .coast-auth .login-mascot-stage{bottom:0}.coast-auth .login-mascot{animation:none}
}
@media(prefers-reduced-motion:reduce){
 .coast-auth .login-mascot{animation:none}
 .coast-app main :is(.button,.btn,.content-button,.vc-button,.av-button,.software-button):active{transform:none}
}
