/* ============================================================
   星枢AI StarPivot.ai —— 深色桌面体验（对齐参考站）
   固定导航 / 玻璃卡片 / cyan+purple 主色
   ============================================================ */
:root {
  --bg-deep: #0b0b0e;
  --bg-page: #0f0f12;
  --bg-page-2: #141418;
  --bg-panel: rgba(20,20,24,.72);
  --bg-card: rgba(255,255,255,.04);
  --bg-card-2: rgba(255,255,255,.06);
  --bg-input: rgba(255,255,255,.05);
  --bg-hover: rgba(34,211,238,.08);
  --bg-elevated: #17171d;
  --accent: #22d3ee;
  --accent-deep: #0891b2;
  --accent-soft: rgba(34,211,238,.12);
  --accent-glow: rgba(34,211,238,.22);
  --text-primary: #f2f4f8;
  --text-secondary: rgba(242,244,248,.62);
  --text-muted: rgba(242,244,248,.38);
  --text-on-accent: #04121a;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow-glow: 0 10px 34px rgba(34,211,238,.16);
  --radius: 14px;
  --radius-lg: 20px;
  --radius-sm: 10px;
  --header-h: 64px;
  --container: 1320px;
}

body { background: var(--bg-page); color: var(--text-primary); }
.page-bg { background:
  radial-gradient(900px 500px at 8% -8%, rgba(34,211,238,.10), transparent 60%),
  radial-gradient(800px 480px at 96% 4%, rgba(139,92,246,.10), transparent 60%),
  var(--bg-page); }
.site-header { left: 238px; height: 64px; background: rgba(15,15,18,.78); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); box-shadow: 0 4px 24px rgba(0,0,0,.25); }
.header-inner { max-width: none; padding: 0 22px; }
.site-header .brand { display: none; }
.main-nav ul { gap: 8px; }
.main-nav a { padding: 9px 18px; border-radius: 999px; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.main-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.main-nav a.active { color: #04121a; background: linear-gradient(135deg,#22d3ee,#67e8f9); box-shadow: 0 6px 20px rgba(34,211,238,.28); }
.btn { border-radius: 10px; }
.btn-primary { color: #04121a; background: linear-gradient(135deg,#22d3ee,#8b5cf6); }
.btn-ghost { background: rgba(255,255,255,.06); border-color: var(--border-strong); color: var(--text-secondary); }
.btn-ghost:hover { color:#fff; border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); }

body:not(.workspace-page) { padding-left: 238px; min-height: 100vh; }
.portal-rail { position: fixed; z-index: 150; left: 0; top: 0; bottom: 0; width: 238px; display: flex; flex-direction: column; color: var(--text-secondary); background: linear-gradient(180deg,#121216 0%,#0e0e12 60%,#0b0b0e 100%); border-right: 1px solid var(--border); box-shadow: 6px 0 26px rgba(0,0,0,.35); }
.rail-brand { height: 72px; display: flex; align-items: center; padding: 0 17px; gap: 10px; border-bottom: 1px solid var(--border); }
.rail-logo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #04121a; background: radial-gradient(circle at 32% 28%,#a5f3fc 0 10%,#22d3ee 38%,#0e7490 70%,#083344 100%); box-shadow: 0 6px 18px rgba(34,211,238,.35); font-size: 19px; font-weight: 900; }
.rail-brand strong { display: block; font-size: 16px; letter-spacing: .03em; color: #fff; }
.rail-brand small { display: block; color: var(--text-muted); font-size: 9px; margin-top: 1px; }
.rail-brand b { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); color: var(--text-secondary); font-size: 18px; }
.rail-nav { height: 72px; display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--border); padding: 8px 5px 0; }
.rail-nav a { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; border-radius: 11px 11px 0 0; font-size: 10px; color: var(--text-secondary); }
.rail-nav a i { height: 24px; display: grid; place-items: center; font-style: normal; font-size: 17px; }
.rail-nav a:last-child i { font-size: 10px; font-weight: 900; color: #fbbf24; }
.rail-nav a.active { color: #22d3ee; background: linear-gradient(180deg,rgba(34,211,238,.14),rgba(34,211,238,.03)); }
.rail-nav a.active::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 3px; border-radius: 3px; background: #22d3ee; }
.rail-scroll { flex: 1; min-height: 0; overflow: auto; padding: 11px 14px 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.rail-filter-title { font-size: 11px; color: var(--text-muted); margin: 0 2px 9px; }
.rail-search { display: flex; align-items: center; height: 40px; gap: 8px; padding: 0 11px; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 11px; }
.rail-search span { color: var(--text-muted); }
.rail-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 12px; }
.rail-search.compact { height: 30px; padding: 0; background: transparent; border: 0; gap: 7px; }
.rail-search.compact input { height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.05); color:#fff; }
.rail-search button { border: 0; border-radius: 7px; height: 30px; padding: 0 10px; background: rgba(34,211,238,.16); color: #67e8f9; font-weight: 700; font-size: 11px; cursor: pointer; }
.rail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.rail-tags button { border: 1px solid var(--border); border-radius: 999px; padding: 5px 9px; color: var(--text-secondary); background: rgba(255,255,255,.04); font-size: 10px; cursor: pointer; }
.rail-tags button:hover { color: #22d3ee; border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.08); }
.rail-agent-list { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 4px; }
.rail-agent { position: relative; display: flex; align-items: center; gap: 10px; min-height: 74px; padding: 8px; border-radius: 14px; }
.rail-agent:hover,.rail-agent.active { background: rgba(34,211,238,.10); }
.rail-agent.active::before { content:""; position:absolute; left:-14px; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background:#22d3ee; }
.rail-agent>i { flex: 0 0 48px; height: 48px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#232329,#111116); font-style:normal; font-size:24px; box-shadow:0 6px 14px rgba(0,0,0,.4); }
.rail-agent>span { min-width:0; flex:1; }
.rail-agent strong { display:block; color:#fff; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-agent small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--text-secondary); font-size:10px; line-height:1.45; margin-top:3px; }
.rail-agent>em { position:absolute; top:9px; right:8px; padding:2px 6px; border:1px solid rgba(251,113,133,.4); border-radius:6px; color:#fb7185; font-style:normal; font-size:9px; background:rgba(251,113,133,.12); }
.rail-account { flex: 0 0 70px; display: flex; align-items: center; padding: 9px 10px; gap: 7px; border-top: 1px solid var(--border); background: rgba(255,255,255,.02); }
.rail-account>button { height: 50px; min-width: 0; flex: 1; display: flex; align-items:center; gap:8px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.04); padding: 6px 8px; text-align: left; cursor:pointer; }
.rail-avatar { width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center; color:#04121a; background:linear-gradient(135deg,#22d3ee,#8b5cf6); font-weight:800; }
.rail-account strong { display:block; max-width:74px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:11px; }
.rail-account button small { display:block; color:#fbbf24; font-size:9px; }
.rail-account button em { margin-left:auto; color:var(--text-muted); font-style:normal; }
.rail-account>a { height:50px; flex:0 0 57px; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid rgba(139,92,246,.35); border-radius:13px; color:#c4b5fd; background:rgba(139,92,246,.12); font-size:11px; font-weight:800; }
.rail-account>a small { margin-top:2px; padding:1px 5px; color:#fff; background:#8b5cf6; border-radius:4px; font-size:8px; }

.page-hero { padding: 56px 0 30px; }
.page-hero h1 { color:#fff; }
.sec-chip { color:#67e8f9; border-color:rgba(34,211,238,.3); background:rgba(34,211,238,.1); }
.sec { padding: 54px 0; }
.card,.partner-card,.api-block { background: rgba(255,255,255,.04); border:1px solid var(--border); box-shadow: 0 10px 32px rgba(0,0,0,.3); }
.card:hover,.partner-card:hover { border-color: rgba(34,211,238,.35); box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(34,211,238,.12); transform: translateY(-3px); }
.card p,.partner-card p,.sec-p,.page-hero p { color: var(--text-secondary); }
.filter-bar { background: rgba(255,255,255,.04); border:1px solid var(--border); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.filter-btn { color: var(--text-secondary); border-color:transparent; background:transparent; }
.filter-btn.active { color:#04121a; background:linear-gradient(135deg,#22d3ee,#67e8f9); border-color:transparent; }
.model-card .go-btn { color:#04121a; background:linear-gradient(135deg,#22d3ee,#8b5cf6); }
.model-badge,.card .tag { color:#67e8f9; background:rgba(34,211,238,.12); }
.code-block { background:#0a0a0d; color:#e9eff8; border:1px solid var(--border); }
.site-footer { background:#0b0b0e; border-top:1px solid var(--border); }
.cta::before { background:radial-gradient(ellipse 50% 60% at 50% 100%,rgba(34,211,238,.18),transparent 70%); }

.gallery-masonry { columns: 4 240px; column-gap: 14px; }
.gallery-masonry .work-card { display:inline-block; width:100%; margin:0 0 14px; border:1px solid var(--border); background:rgba(255,255,255,.04); border-radius:12px; overflow:hidden; }
.work-card .work-media { position:relative; background:#17171d; color:transparent; overflow:hidden; }
.work-card .work-media img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.work-card:hover .work-media img { transform:scale(1.025); }
.work-card .work-media .play { color:#fff; background:rgba(8,10,14,.5); }
.work-body { padding:12px 13px; text-align:left; }
.work-body h3 { color:#fff; }
.work-body p { color:var(--text-secondary); font-size:11px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.work-meta { color:var(--text-muted); }
.work-meta>span:last-child { color:#67e8f9; background:rgba(34,211,238,.12); padding:2px 7px; border-radius:4px; }
.work-card .prompt-hint { color:#67e8f9; border-color:rgba(34,211,238,.16); }

.account-mask { position:fixed; z-index:400; inset:0; display:flex; align-items:center; justify-content:flex-end; padding:18px; background:rgba(4,6,10,.55); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:.2s; }
.account-mask.show { opacity:1; pointer-events:auto; }
.account-sheet { position:relative; width:min(616px,calc(100vw - 36px)); max-height:calc(100vh - 36px); overflow:auto; padding:27px 25px 25px; border:1px solid rgba(34,211,238,.22); border-radius:24px; background:linear-gradient(180deg,#15151a,#0f0f13); box-shadow:0 30px 80px rgba(0,0,0,.6); transform:translateX(25px); transition:.25s; }
.account-mask.show .account-sheet { transform:none; }
.account-close { position:absolute; right:17px; top:15px; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:var(--text-secondary); font-size:20px; cursor:pointer; }
.account-group+.account-group { margin-top:25px; }
.account-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; padding-left:17px; position:relative; }
.account-heading::before { content:""; position:absolute; left:3px; width:5px; height:20px; border-radius:4px; background:linear-gradient(#22d3ee,#8b5cf6); box-shadow:0 3px 9px rgba(34,211,238,.35); }
.account-heading b { color:#fff; font-size:17px; }
.account-heading span { color:var(--text-muted); font-weight:800; letter-spacing:.14em; font-size:12px; }
.account-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.account-card { min-height:92px; display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.04); }
.account-card:hover { transform:translateY(-1px); border-color:rgba(34,211,238,.3); box-shadow:0 10px 26px rgba(0,0,0,.35); }
.account-card>i { flex:0 0 56px; height:56px; display:grid; place-items:center; border:1px solid currentColor; border-radius:15px; font-style:normal; font-size:24px; background:rgba(255,255,255,.04); }
.account-card span { flex:1; min-width:0; }
.account-card strong { display:block; color:#fff; font-size:17px; }
.account-card small { display:block; color:var(--text-secondary); font-size:13px; margin-top:2px; }
.account-card em { color:rgba(255,255,255,.14); font-size:23px; font-style:normal; }
.tone-cyan>i { color:#22d3ee; }.tone-gold>i{color:#fbbf24}.tone-purple>i{color:#a78bfa}.tone-green>i{color:#34d399}.tone-blue>i{color:#60a5fa}.tone-red>i{color:#fb7185}.tone-orange>i{color:#fb923c}

/* 工作台沿用 styles.css 深色体系，这里只做轻微对齐，不再改成亮色 */
body.workspace-page { background:#0f0f12; }
.workspace-page .site-header { left:0; background:rgba(15,15,18,.82); }
.site-header .brand{display:flex;align-items:center;gap:10px;}
/* 全站头部 LOGO 统一为工作台同款圆形能量球（深色球+旋转青紫光晕），不用扁平亮色菱形 */
.brand .brand-logo{width:36px!important;height:36px!important;border-radius:50%!important;color:#dffaff!important;font-weight:900;background:radial-gradient(circle at 34% 28%,#152942 0%,#0b1220 68%)!important;border:1px solid rgba(34,211,238,.38);box-shadow:0 0 18px rgba(34,211,238,.28),inset 0 0 14px rgba(99,102,241,.22);text-shadow:0 0 10px rgba(34,211,238,.9),0 0 22px rgba(99,102,241,.6);position:relative;overflow:visible;}
.brand .brand-logo::before{content:"";position:absolute;inset:-2.5px;border-radius:50%!important;z-index:-1;background:conic-gradient(from 0deg,#22d3ee,#6366f1 38%,#c084fc 62%,#22d3ee);animation:logoSpin 7s linear infinite;opacity:.9;}
.brand .brand-logo::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.16),transparent 46%);}
@keyframes logoSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.brand .brand-logo::before{animation:none;}}

/* 扁平亮色菱形LOGO已移除，统一为圆形能量球 */

body.portal-dark { background:#0f0f12; }

@media (max-width: 980px) {
  body:not(.workspace-page){padding-left:0;padding-bottom:72px}.portal-rail{top:auto;right:0;width:auto;height:68px;flex-direction:row;border-right:0;border-top:1px solid var(--border)}
  .rail-brand,.rail-scroll,.rail-account{display:none}.rail-nav{height:68px;flex:1;grid-template-columns:repeat(4,1fr);border:0;padding:2px 8px}.site-header{left:0}.gallery-masonry{columns:2 220px}
}
@media (max-width: 640px) { .account-grid{grid-template-columns:1fr}.account-sheet{padding:24px 16px}.gallery-masonry{columns:1}.main-nav a{padding:8px 10px}.header-inner{padding:0 12px} }

.home-dashboard { height:100vh; overflow:hidden; }
.home-dashboard .site-header { position:fixed; right:0; }
.home-dashboard .header-inner { justify-content:flex-start; }
.home-dashboard .header-actions { margin-left:auto; margin-right:50px; }
.home-filter-pills { display:flex; align-items:center; gap:6px; margin-left:18px; padding-left:18px; border-left:1px solid var(--border); }
.home-filter-pills button { padding:7px 14px; border:1px solid transparent; border-radius:999px; color:var(--text-secondary); background:transparent; cursor:pointer; font-size:12px; }
.home-filter-pills button.active { color:#67e8f9; border-color:rgba(34,211,238,.33); background:rgba(34,211,238,.1); }
.home-gallery-main { height:calc(100vh - 64px); margin-top:64px; padding:14px 14px 40px; overflow:auto; }
.home-gallery-main .gallery { margin-top:0; }
.home-mobile-title { display:none; }
.home-app-button { position:fixed; z-index:130; right:20px; top:13px; width:42px; height:42px; display:grid; grid-template-columns:repeat(2,6px); place-content:center; gap:5px; border:0; border-radius:50%; background:rgba(255,255,255,.08); box-shadow:0 5px 18px rgba(0,0,0,.3); cursor:pointer; }
.home-app-button i { width:6px; height:6px; border-radius:2px; background:#22d3ee; }.home-app-button i:nth-child(2){background:#8b5cf6}.home-app-button i:nth-child(3){background:#fbbf24}.home-app-button i:nth-child(4){background:#34d399}
@media (max-width:980px){.home-gallery-main{height:calc(100vh - 132px)}.home-filter-pills{display:none}.home-app-button{right:14px}.home-mobile-title{display:block;padding:18px 4px}.home-mobile-title span{font-size:10px;color:#67e8f9;letter-spacing:.18em}.home-mobile-title h1{font-size:24px;margin:4px 0;color:#fff}.home-mobile-title p{font-size:12px;color:var(--text-secondary)}}

/* ===== 智能体模式：AI 团队协作阶段流 + 快捷问题（?agent=id） ===== */
.agent-stages{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.agent-stage{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.6;color:#b6c6da;
  background:rgba(34,211,238,.06);border:1px solid rgba(103,232,249,.16);border-radius:11px;padding:9px 12px;
  animation:agentStageIn .32s ease both}
.agent-stage .as-role{flex:none;font-size:11px;font-weight:700;color:#08121e;background:linear-gradient(135deg,#67e8f9,#a5b4fc);
  border-radius:999px;padding:2px 9px;margin-top:1px;white-space:nowrap}
@keyframes agentStageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.agent-questions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.agent-q{border:1px solid rgba(103,232,249,.3);background:rgba(34,211,238,.07);color:#a5f3fc;
  border-radius:999px;padding:7px 14px;font-size:12.5px;cursor:pointer;transition:.18s;font-family:inherit}
.agent-q:hover{background:rgba(34,211,238,.18);border-color:#22d3ee;transform:translateY(-1px)}

/* ===== item2/11：侧栏品牌LOGO统一为动态能量球；顶部重复LOGO隐藏；侧栏收放 ===== */
.rail-dup-hide{display:none !important;}
.rail-brand .brand-logo{width:36px !important;height:36px !important;border-radius:50% !important;flex:0 0 auto;}
.rail-brand b.rail-collapse{margin-left:auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.06);color:#cfd6e2;font-size:18px;line-height:1;border:1px solid rgba(255,255,255,.08);transition:.18s;}
.rail-brand b.rail-collapse:hover{background:rgba(34,211,238,.16);color:#22d3ee;border-color:rgba(34,211,238,.4);}
/* 折叠为窄条 */
.portal-rail.rail-collapsed{width:70px;}
.portal-rail.rail-collapsed .rail-brand{padding:0;justify-content:center;gap:0;height:64px;}
.portal-rail.rail-collapsed .rail-brand .brand-logo{margin:0 auto;}
.portal-rail.rail-collapsed .rail-brand strong,
.portal-rail.rail-collapsed .rail-brand small{display:none;}
.portal-rail.rail-collapsed .rail-collapse{position:absolute;right:8px;top:16px;width:22px;height:22px;font-size:15px;}
.portal-rail.rail-collapsed .rail-nav span{display:none;}
.portal-rail.rail-collapsed .rail-nav{padding:8px 0;}
.portal-rail.rail-collapsed .rail-nav a{justify-content:center;padding:11px 0;}
.portal-rail.rail-collapsed .rail-nav i{margin:0;font-size:19px;}
.portal-rail.rail-collapsed .rail-scroll,
.portal-rail.rail-collapsed .rail-account span,
.portal-rail.rail-collapsed .rail-account small,
.portal-rail.rail-collapsed .rail-account em{display:none;}
.portal-rail.rail-collapsed .rail-account{flex-direction:column;gap:8px;padding:10px 0;}
.portal-rail.rail-collapsed .rail-account button,
.portal-rail.rail-collapsed .rail-account a{justify-content:center;padding:8px 0;}
/* 浅色模式：侧栏底与收放按钮不再是黑块 */
html[data-theme="light"] .portal-rail{background:linear-gradient(180deg,#ffffff 0%,#f4f7fc 100%);border-right:1px solid #e3e8f1;box-shadow:6px 0 24px rgba(30,60,110,.06);}
html[data-theme="light"] .rail-brand{border-bottom:1px solid #e9edf4;}
html[data-theme="light"] .rail-brand strong{color:#16233a;}
html[data-theme="light"] .rail-brand small{color:#8a97ab;}
html[data-theme="light"] .rail-brand b.rail-collapse{background:#eef2f8;color:#5b6b82;border:1px solid #dde3ee;}
html[data-theme="light"] .rail-brand b.rail-collapse:hover{background:#e3f6fa;color:#0e9ec0;border-color:#9adce8;}

/* item2：仅宽屏（左侧栏可见时）隐藏顶部重复品牌；窄屏侧栏变底部栏，保留顶部LOGO */
@media(min-width:901px){
  body.has-portal-rail .site-header .brand,
  body.has-portal-rail .landing-header .brand{display:none !important;}
  /* 隐藏品牌后顶部导航项过多会把账户区挤出屏幕造成整页横向滚动，收紧间距并允许导航压缩 */
  body.has-portal-rail .landing-header .main-nav{min-width:0;flex:0 1 auto;}
  body.has-portal-rail .landing-header .main-nav ul{gap:6px;}
  body.has-portal-rail .landing-header .main-nav a{padding:9px 13px;white-space:nowrap;}
  body.has-portal-rail .landing-header .header-actions{flex:0 0 auto;margin-left:auto;}
}