/* 配色令牌与 workspace/public/assets/ws.css 保持一致：白字渐变 ≥4.6:1，浅色次要文字 ≥4.5:1。改这里时两边一起改 */
/* Phoenix home: character-led creative workspace. Kept separate from account/panel styles. */
:root { --sidebar-w: 222px; --accent: #ff817c; --accent-2: #e7799f; --grad-primary: linear-gradient(120deg,#cc4843,#c24a73); --bg: #18151e; --bg-soft: #211c28; --card: #25212d; --card-2: #302936; --border: #ffffff12; --text: #f7f0f4; --text-dim: #bdb0c0; --text-faint: #a294a6; --hero-bg: linear-gradient(115deg,#34242c,#2a223a 58%,#492c3c); --soft-accent: #ef736518; --ink-accent: #ffaaa0; --shadow-1: 0 12px 36px #0c081620; }
html.theme-light { --bg: #fcf9f7; --bg-soft: #fffdfb; --card: #fff; --card-2: #f5eeee; --border: #6c425415; --border-strong: #6c42542e; --text: #372d3e; --text-dim: #6f5f70; --text-faint: #7c6c7d; --accent: #d85e59; --accent-2: #ba6291; --grad-primary: linear-gradient(120deg,#cc4843,#c24a73); --hero-bg: linear-gradient(110deg,#fff2e9 0%,#f9e8e9 48%,#eee4fb 100%); --soft-accent: #f7e6e3; --ink-accent: #a8403f; --shadow-1: 0 12px 36px #7950600b; }
body { background-image: radial-gradient(#a5809410 .7px,transparent .7px); background-size: 7px 7px; }
.bg-glow { display:none; }
.sidebar, html.theme-light .sidebar { background: var(--bg-soft); }
.brand { gap:8px; padding:10px 7px 26px; }
.sidebar__scroll { padding-top:10px; }
.sidebar .brand { padding:2px 7px 12px; }
.brand__name { font-size:20px; letter-spacing:-.8px; }
.side-group__label { margin-top:10px; padding:4px 12px 4px; font-size:10px; }
.side-nav__item { font-size:13px; padding:11px 14px; margin:2px 0; }
.side-nav__item.is-active,html.theme-light .side-nav__item.is-active { background:var(--soft-accent); color:var(--ink-accent); }
.side-nav__item.is-active::after { content:'✦'; margin-left:auto; font-size:11px; }
.sidebar__bottom { padding:0; }
.sidebar .mascot { height:142px; padding:0; margin:0 0 -1px; }
.sidebar .mascot img { width:150px; height:142px; object-fit:contain; object-position:center bottom; display:block; filter:drop-shadow(0 5px 10px #db77751a); }
.signin-card,html.theme-light .signin-card { border:1px solid var(--border); background:var(--soft-accent); border-radius:16px; text-align:center; }
.signin-card span { font-size:11px; }
.topbar,html.theme-light .topbar { background:var(--bg); padding:0 36px; border-bottom:1px solid var(--border); min-height:72px; }
.top-nav { gap:26px; }
.top-nav a { font-size:13px; }
.top-nav a:first-child { color:var(--ink-accent); }
.btn-signin { background:var(--grad-primary); color:white; border:0; padding:10px 20px; animation:none; }
.content { max-width:1410px; padding:0 38px 32px; }
.hero { text-align:left; padding:26px 0 0; scroll-margin-top:90px; }
.hero-stage { position:relative; isolation:isolate; min-height:350px; border-radius:24px; background:var(--hero-bg); border:1px solid var(--border); overflow:hidden; }
.hero-stage::after { content:''; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(#f4b5ac60 1px,transparent 1px); background-size:12px 12px; mask-image:linear-gradient(90deg,transparent 40%,black); }
.hero-copy { position:relative; z-index:2; padding:39px 36px 28px; width:61%; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:10px; font-weight:700; letter-spacing:2px; color:var(--ink-accent); }
.hero-eyebrow span { font-size:17px; }
.hero__title { font-size:clamp(27px,3.1vw,43px); line-height:1.42; letter-spacing:-1.5px; margin:17px 0 12px; font-weight:800; }
.hero__title em { font-style:normal; color:var(--ink-accent); }
.hero__sub { font-size:13px; line-height:1.9; margin:0 0 22px; color:var(--text-dim); }
.hero-links { display:flex; align-items:center; gap:23px; font-size:12px; }
.hero-cta { display:inline-flex; align-items:center; gap:22px; padding:11px 17px; border-radius:10px; background:var(--text); color:var(--bg); box-shadow:0 5px 10px #51344012; font-weight:600; }
.hero-cta:hover { transform:translateY(-2px); }
.hero-note { display:block; margin-top:22px; font-size:8px; letter-spacing:3px; opacity:.42; }
.hero-character { position:absolute; right:0; top:0; bottom:0; width:46%; }
.phoenix-mascot { position:absolute; height:116%; width:100%; object-fit:contain; object-position:50% 0; top:1%; z-index:1; filter:drop-shadow(0 12px 13px #c3565e25); }
.character-word { position:absolute; font-size:63px; bottom:30px; right:8px; font-weight:900; color:#c988b526; letter-spacing:-4px; transform:rotate(-90deg); transform-origin:75% 50%; }
.character-label { position:absolute; bottom:13px; right:24px; font-size:7px; letter-spacing:1px; color:var(--ink-accent); z-index:3; }
.mascot-bubble { position:absolute; right:18px; bottom:43px; z-index:3; background:var(--bg-soft); border:1px solid var(--border); box-shadow:0 7px 25px #8356641c; border-radius:14px 14px 3px 14px; padding:12px 17px; transform:rotate(-3deg); text-align:left; transition:transform .2s; }
.mascot-bubble:hover { transform:rotate(0) translateY(-3px); }
.mascot-bubble span { display:block; font-size:9px; color:var(--ink-accent); margin-bottom:5px; }
.mascot-bubble strong { font-size:12px; }
.hero-orbit { position:absolute; width:310px; height:310px; border:1px solid #cf93ad50; border-radius:50%; right:50px; top:22px; box-shadow:0 0 0 26px #ffffff0a,0 0 0 27px #cf93ad20; }
.hero-star { position:absolute; color:#dfa175; font-size:31px; z-index:2; }
.hero-star--one { top:27px; right:29px; }
.hero-star--two { top:55%; right:41%; font-size:38px; }
.workspace-heading { display:flex; align-items:center; justify-content:space-between; margin:24px 4px 12px; }
.workspace-heading h2 { font-size:14px; font-weight:650; }
.workspace-heading > span { font-size:8px; letter-spacing:1.5px; color:var(--text-faint); }
.workspace-heading > span > span { color:var(--accent); padding-left:9px; }
.composer, html.theme-light .composer { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:14px 18px; box-shadow:var(--shadow-1); scroll-margin-top:95px; }
.composer:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--soft-accent); }
.composer__tabs,html.theme-light .composer__tabs { background:transparent; border:0; padding:0; gap:5px; margin-bottom:1px; border-radius:0; }
.composer__tab { border-radius:9px; padding:9px 15px; font-size:12px; }
.composer__tab.is-active { box-shadow:none; background:var(--soft-accent); color:var(--ink-accent); }
#composerInput { min-height:95px; padding:16px 5px 12px; font-size:13px; }
.composer__bar { border-top:1px solid var(--border); padding-top:11px; gap:9px; }
.composer__options { gap:7px; }
.select-pill,html.theme-light .select-pill { border:0; background:var(--bg); padding:7px 9px; }
.select-pill select { max-width:180px; font-size:10px; }
.select-pill__key,.toggle-pill { font-size:10px; }
.btn-primary { border-radius:10px; box-shadow:0 4px 10px #dd63821b; font-size:12px; }
.btn-ghost-grad,html.theme-light .btn-ghost-grad { border:0; background:transparent; color:var(--text-dim); font-size:11px; }
.btn-ghost-grad .ico,html.theme-light .btn-ghost-grad .ico { fill:var(--accent); }
.section { padding-top:32px; scroll-margin-top:72px; }
.section__head { gap:9px; margin-bottom:16px; }
.section__head h2 { font-size:18px; letter-spacing:-.5px; }
.section__icon { color:var(--accent); background:var(--soft-accent); border-radius:8px; }
.section__icon svg,html.theme-light .section__icon svg { fill:var(--accent); }
.section-kicker { margin-left:auto; font-size:11px; color:var(--text-faint); font-weight:400; }
.feature-row { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.feature-card { border-radius:16px; padding:18px; gap:9px; background:linear-gradient(135deg,var(--soft-accent),transparent 65%),var(--card); }
.feature-card:nth-child(2) { background:linear-gradient(135deg,#e67baf15,transparent 65%),var(--card); }
.feature-card:nth-child(3) { background:linear-gradient(135deg,#809de81c,transparent 65%),var(--card); }
.feature-card:nth-child(4) { background:linear-gradient(135deg,#c88be81c,transparent 65%),var(--card); }
.feature-card .badge { align-self:flex-end; font-size:9px; }
.feature-card__icon { margin-top:-22px; height:37px; width:37px; border-radius:12px; transform:rotate(-5deg); }
.feature-card__icon svg { width:20px; height:20px; }
.feature-card__icon--chat { background:linear-gradient(135deg,#df9680,#ed7676); }
.feature-card h3 { font-size:15px; margin-top:6px; }
.feature-card p { font-size:11px; line-height:1.8; }
.feature-card__actions { margin-top:3px; }
.feature-card__actions .btn-primary { padding:7px 9px; background:var(--soft-accent); color:var(--ink-accent); box-shadow:none; font-size:10px; }
.feature-card__actions .btn-ghost { font-size:10px; border:0; background:transparent; padding:7px 4px; }
.inspiration-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.idea-card { min-width:0; text-align:left; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:transform .2s,box-shadow .2s; }
.idea-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-1); }
.idea-art { display:block; position:relative; height:170px; overflow:hidden; background:linear-gradient(130deg,#f4d8c2,#ebb6b1); }
.idea-art img { height:235px; width:100%; object-fit:contain; object-position:center top; position:absolute; top:10px; }
.idea-number { position:absolute; top:13px; left:14px; color:#fff; font-size:8px; font-weight:600; letter-spacing:1.3px; z-index:2; text-shadow:0 1px 7px #372d3e70; }
.idea-copy { display:block; padding:16px; }
.idea-copy small { display:block; font-size:9px; color:var(--ink-accent); margin-bottom:8px; }
.idea-copy strong { display:flex; justify-content:space-between; font-size:14px; margin-bottom:8px; }
.idea-copy > span { display:block; font-size:10px; color:var(--text-dim); line-height:1.6; }
.idea-card--world .idea-art { background:radial-gradient(ellipse at 80% 100%,#d597cd,transparent 60%),linear-gradient(145deg,#434669,#8e7bba); }
.idea-moon { position:absolute; width:75px; height:75px; border-radius:50%; background:#fff4d5; right:47px; top:24px; box-shadow:0 0 50px #f1c7ff70; }
.idea-moon::after { content:''; position:absolute; inset:-6px 12px 8px -9px; border-radius:50%; background:#756aa0; }
.idea-sparkles { position:absolute; left:35px; top:48px; color:#ffe8bd; line-height:2; letter-spacing:26px; font-size:16px; }
.idea-land { position:absolute; width:125%; height:80px; background:#bcb0da; bottom:-40px; left:-12%; border-radius:50% 70% 0 0; box-shadow:70px -15px 0 #998abf,-70px -25px 0 #877cae; transform:rotate(-8deg); }
.idea-card--story .idea-art { background:repeating-linear-gradient(0deg,transparent 0 21px,#fff3 21px 22px),linear-gradient(135deg,#e8b2be,#b1bfdc); }
.story-frame { position:absolute; inset:32px 33px 17px; display:flex; align-items:center; justify-content:center; gap:18px; border:5px solid #fff9; outline:1px solid #fff8; outline-offset:5px; color:#fff; transform:rotate(-6deg); box-shadow:0 7px 15px #5f4e8220; }
.story-frame > span { font-family:serif; font-size:61px; }
.story-frame small { writing-mode:vertical-rl; letter-spacing:3px; font-size:10px; }
.inspiration-note { margin-top:12px; color:var(--text-faint); font-size:10px; }
.section__desc { font-size:12px; }
.chips { gap:8px; }
.chip,html.theme-light .chip { border-radius:8px; font-size:11px; padding:7px 12px; background:var(--card); }
.app-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.app-card { border-radius:14px; }
.app-card__cover { height:95px; }
.app-card__body { padding:14px; }
.app-card__body h3 { font-size:14px; }
.app-card__body p { font-size:11px; }
.footer { margin-top:40px; }
a:focus-visible,button:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media(min-width:1500px) { .hero-stage { min-height:390px; } .hero-copy { padding:45px; } .hero__title { font-size:46px; } }
@media(max-width:1180px) { .content { padding-left:24px; padding-right:24px; } .hero-copy { padding:30px 25px; } .hero__title { font-size:31px; } .hero-stage { min-height:335px; } .feature-row { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero__sub { font-size:12px; } .mascot-bubble { right:10px; padding:10px; } .mascot-bubble strong { font-size:10px; } }
@media(max-width:900px) { .content { padding:0 22px 26px; } .topbar,html.theme-light .topbar { padding:0 22px; min-height:62px; } .hero { padding-top:20px; } .hero-stage { min-height:335px; } .hero__title { font-size:36px; } .hero-copy { width:62%; } .hero-character { width:45%; } }
@media(max-width:640px) { .content { padding:0 15px 24px; } .hero-stage { min-height:525px; border-radius:19px; } .hero-copy { width:100%; padding:24px 22px; } .hero__title { font-size:30px; margin-top:12px; } .hero-eyebrow { font-size:8px; } .hero__sub { font-size:11px; max-width:270px; margin-bottom:16px; } .hero-note { display:none; } .hero-links { gap:17px; font-size:11px; } .hero-cta { padding:10px 13px; gap:12px; } .hero-character { height:260px; top:auto; bottom:0; width:77%; } .phoenix-mascot { height:118%; top:0; } .hero-orbit { width:210px; height:210px; top:auto; bottom:18px; right:22px; } .hero-star--one { top:20px; right:15px; font-size:24px; } .hero-star--two { top:auto; bottom:130px; right:80%; } .mascot-bubble { right:auto; left:-17%; bottom:29px; padding:10px 12px; } .character-label { right:12px; font-size:6px; } .character-word { font-size:49px; } .workspace-heading { margin-top:20px; } .workspace-heading h2 { font-size:13px; } .workspace-heading > span { display:none; } .composer,html.theme-light .composer { padding:12px; } .composer__tab { font-size:11px; padding:8px 10px; gap:5px; } .composer__tab .ico { width:13px; height:13px; } #composerInput { min-height:108px; font-size:12px; } .composer__actions { margin-top:4px; } .composer__options { row-gap:10px; } .select-pill select { max-width:175px; } .section-kicker { display:none; } .section { padding-top:28px; } .section__head h2 { font-size:17px; } .feature-row { gap:10px; } .feature-card { padding:14px; } .feature-card h3 { font-size:14px; } .feature-card__actions { flex-wrap:wrap; gap:3px; } .feature-card__actions .btn-ghost { display:none; } .inspiration-grid { grid-template-columns:1fr; gap:12px; } .idea-card { display:grid; grid-template-columns:115px minmax(0,1fr); } .idea-art { height:132px; } .idea-art img { height:160px; top:15px; } .idea-copy { padding:16px 12px; align-self:center; } .idea-copy strong { font-size:13px; } .idea-number { font-size:6px; left:8px; letter-spacing:.4px; } .idea-moon { right:13px; height:54px; width:54px; } .idea-sparkles { left:15px; letter-spacing:10px; } .story-frame { inset:30px 18px 20px; gap:4px; border-width:3px; } .story-frame > span { font-size:36px; } .story-frame small { font-size:6px; letter-spacing:1px; } .app-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .app-card__cover { height:80px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Fixed cover height must not let the original aspect ratio shrink its width. */
.app-card__cover { width:100%; aspect-ratio:auto; }

/* Keep the character in its own space, clear of the sign-in text. */
.sidebar__bottom { flex-shrink:0; }
.sidebar__bottom .signin-card { padding:13px 10px; }
.sidebar__bottom .signin-card > span { display:block; line-height:1.7; text-wrap:balance; }
@media(max-height:740px) { .sidebar .mascot { height:108px; margin-bottom:-1px; } .sidebar .mascot img { width:118px; height:108px; } }

/* The cutout meets either account card without covering its text. */
.sidebar__bottom .signin-card { position:relative; z-index:1; }

.theme-select { font:inherit; font-size:12px; color:var(--text-dim); background:var(--bg-soft); border:1px solid var(--border); border-radius:999px; padding:8px 10px; cursor:pointer; max-width:112px; }