/* KoozhenStudio 发行驾驶舱 - 既有发行样式表 */
:root {
  /* KoozhenStudio Aurora B2B shared foundation tokens (E3) */
  --ng-bg:#080D18; --ng-surface-1:#101827; --ng-surface-2:#162238;
  --ng-border:rgba(148,163,184,.16); --ng-border-strong:rgba(148,163,184,.28);
  --ng-text-1:#F1F5F9; --ng-text-2:#A8B3C7; --ng-text-3:#718096;
  --ng-primary:#7C6CF2; --ng-primary-hover:#8B7CF6; --ng-aurora-cyan:#33C6D4;
  --ng-success:#3CCB9A; --ng-warning:#F2B84B; --ng-danger:#F06A78; --ng-info:#5FA8FF;
}


/* ================= Google Fonts ================= */
/* Inter 4.0 vendored for offline display (SIL OFL 1.1). */
@font-face { font-family:'Inter'; src:url('../../vendor/inter/4.0/Inter-Regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../../vendor/inter/4.0/Inter-Medium.woff2') format('woff2'); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../../vendor/inter/4.0/Inter-SemiBold.woff2') format('woff2'); font-style:normal; font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../../vendor/inter/4.0/Inter-Bold.woff2') format('woff2'); font-style:normal; font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../../vendor/inter/4.0/Inter-ExtraBold.woff2') format('woff2'); font-style:normal; font-weight:800; font-display:swap; }

/* ================= 基础重置 ================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
    overflow: hidden; 
    background: #09090b;
    color: #e4e4e7;
    height: 100vh;
}

/* ================= 整体布局 ================= */
.app-container { display: flex; height: 100vh; }
.sidebar { width: 260px; background: #18181b; border-right: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; flex-shrink: 0; z-index: 50; }
.sidebar-header { height: 64px; padding: 0 20px; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); box-sizing: border-box; }
.sidebar-header .brand-logo { width: 100%; }

/* ================= 品牌Logo ================= */
.brand-logo { display: flex; align-items: center; gap: 14px; }
.logo-icon { width: 40px; height: 40px; position: relative; display: flex; align-items: center; justify-content: center; }
.logo-axis { position: absolute; width: 100%; height: 100%; }
.logo-axis line { stroke: #3f3f46; stroke-width: 1; }
.logo-axis .axis-x { stroke-dasharray: 8 4; }
.logo-axis .axis-y { stroke-dasharray: 8 4; }

.logo-core {
    width: 14px; height: 14px; border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.5), 0 0 30px rgba(59, 130, 246, 0.3);
    animation: corePulse 3s ease-in-out infinite; position: relative; z-index: 2;
}
.logo-core::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: rgba(59, 130, 246, 0.3); animation: coreRing 3s ease-in-out infinite;
}
@keyframes corePulse {
    0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.5), 0 0 30px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 15px rgba(59, 130, 246, 1), 0 0 30px rgba(59, 130, 246, 0.7), 0 0 45px rgba(59, 130, 246, 0.4); }
}
@keyframes coreRing {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0.2; }
}

.brand-text { display: flex; flex-direction: column; }
.brand-name { font-size: 18px; font-weight: 800; color: white; letter-spacing: -0.02em; }
.brand-tagline { font-size: 11px; color: #a1a1aa; letter-spacing: 0.04em; margin-top: 3px; font-weight: 500; }

/* ================= 侧边栏导航 ================= */
.sidebar-nav { flex: 1; padding: 12px; overflow-y: auto; }
.nav-section { margin-bottom: 20px; }
.nav-section-title { font-size: 10px; font-weight: 700; color: #71717a; text-transform: uppercase; letter-spacing: 0.12em; padding: 10px 12px 6px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: all 0.18s; color: #a1a1aa; font-size: 14px; font-weight: 500; border-left: 2px solid transparent; }
.nav-item:hover { background: rgba(255, 255, 255, 0.04); color: #fafafa; }
.nav-item.active { background: rgba(234, 179, 8, 0.1); color: #fde047; font-weight: 600; border-left-color: #eab308; }
.nav-icon { width: 32px; height: 32px; border-radius: 8px; background: #27272a; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.2s; }
.nav-item.active .nav-icon { background: rgba(234, 179, 8, 0.18); box-shadow: 0 0 12px rgba(234, 179, 8, 0.35); }
.nav-badge { margin-left: auto; background: #27272a; color: #71717a; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.nav-item.active .nav-badge { background: #eab308; color: #18181b; }

/* ================= 用户区域 ================= */
.user-section { padding: 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: all 0.2s; background: transparent; border: none; color: inherit; font: inherit; }
.user-btn:hover { background: rgba(255, 255, 255, 0.05); }
.user-avatar { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 13px; }
.user-info { flex: 1; text-align: left; }
.user-name { font-size: 13px; font-weight: 600; color: #fafafa; }
.user-role { font-size: 10px; color: #71717a; }
.user-arrow { font-size: 12px; color: #52525b; transition: transform 0.2s; }
.user-dropdown { position: absolute; bottom: 100%; left: 0; right: 0; background: #27272a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 6px; margin-bottom: 6px; display: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); z-index: 60; }
.user-dropdown.show { display: block; }
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: 13px; color: #a1a1aa; }
.dropdown-item:hover { background: rgba(255, 255, 255, 0.08); color: #fafafa; }
.dropdown-item.danger:hover { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* ================= 主内容区域 ================= */
.main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.top-bar { height: 56px; background: rgba(24, 24, 27, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: none; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 40; }
.top-bar.visible { display: flex; }
.timeline-bar { height: 64px; background: rgba(24, 24, 27, 0.98); border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: none; align-items: center; padding: 0 24px; z-index: 30; }
.timeline-bar.visible { display: flex; }
.content-area { flex: 1; overflow-y: auto; padding: 24px 32px; }

/* ================= Bento 卡片样式 ================= */
.bento-card { background: #18181b; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.bento-card:hover { border-color: rgba(59, 130, 246, 0.3); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.project-card { cursor: pointer; }
.project-card.critical { grid-column: span 2; }
.project-card.mini { height: 140px; }

/* ================= 泳道样式 ================= */
.swimlane { background: rgba(239, 68, 68, 0.03); border-radius: 16px; padding: 16px; margin-bottom: 24px; }
.swimlane-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(239, 68, 68, 0.2); }
.swimlane-title { font-size: 12px; font-weight: 700; color: #ef4444; text-transform: uppercase; letter-spacing: 0.05em; }
.swimlane-count { background: rgba(239, 68, 68, 0.2); color: #ef4444; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }

/* ================= 滚动条美化 ================= */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }

/* ================= 时间轴样式 ================= */
.milestone-container { display: flex; align-items: center; background: transparent; border-radius: 0; padding: 0; border: 0; gap: 4px; }
.timeline-node { display: flex; align-items: center; gap: 8px; padding: 4px 10px; cursor: pointer; border-radius: 6px; transition: all 0.3s; white-space: nowrap; }
.timeline-node.active { background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(6, 182, 212, 0.2) 100%); }
.node-indicator { width: 22px; height: 22px; border-radius: 50%; background: #09090b; border: 2px solid #3f3f46; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.timeline-node.active .node-indicator { background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); border-color: transparent; box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
.timeline-node.passed .node-indicator { background: #10b981; border-color: #10b981; }
.node-title { font-size: 13px; font-weight: 600; color: #a1a1aa; }
.timeline-node.active .node-title { color: #fff; }
.timeline-node.passed .node-title { color: #10b981; }
.node-subtitle { font-size: 11px; color: #71717a; }
.timeline-connector { width: 24px; height: 2px; background: #3f3f46; position: relative; flex-shrink: 0; }
.timeline-connector::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, #10b981, #3b82f6); transition: width 0.5s ease; }
.timeline-connector.passed::after { width: 100%; }

/* ================= 快捷按钮 ================= */
.quick-btn { background: #27272a; border: 1px solid #3f3f46; color: #a1a1aa; padding: 6px 14px; border-radius: 6px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.quick-btn:hover { border-color: #3b82f6; color: #3b82f6; }
.quick-btn.primary { background: rgba(59, 130, 246, 0.15); border-color: #3b82f6; color: #3b82f6; }

/* ================= 图表样式 ================= */
.curve-baseline { fill: none; stroke: #52525b; stroke-width: 2; stroke-dasharray: 6 4; }
.curve-ai { fill: none; stroke: #3b82f6; stroke-width: 3; filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.5)); transition: d 1s ease-in-out; }

.sparkline { width: 60px; height: 20px; }
.sparkline-path { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.sparkline-area { opacity: 0.2; }
.mini-chart { height: 50px; margin-top: 8px; }

/* ================= 统计样式 ================= */
.stat-item { display: flex; align-items: baseline; gap: 4px; }
.stat-value { font-size: 24px; font-weight: 800; color: white; }
.stat-label { font-size: 11px; color: #71717a; }
.stat-trend { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.stat-trend.up { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.stat-trend.down { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* ================= 视图切换状态 ================= */
.view-hidden { display: none !important; }
.view-active { display: block !important; }

/* ================= 按钮样式 ================= */
.create-btn { background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); border: none; color: white; padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }

/* ================= 动画关键帧 ================= */
@keyframes radarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.animate-slide-in { animation: slideIn 0.5s ease forwards; }

.canvas-bg { background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; }
@keyframes flowLine { to { stroke-dashoffset: -20; } }
.line-flow { stroke-dasharray: 6 6; animation: flowLine 1s linear infinite; }

@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
.agent-log-enter { animation: slideDownFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideDownFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

@keyframes pulseSkeleton { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.2; } }
.skeleton-box { background: #27272a; animation: pulseSkeleton 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes scanline { 0% { top: 0%; } 100% { top: 100%; } }
.scanner-line { width: 100%; height: 2px; background: #3b82f6; box-shadow: 0 0 10px #3b82f6; position: absolute; animation: scanline 2s linear infinite; z-index: 10;}

/* ================= 模拟素材卡片 ================= */
.mock-creative-1 { background: radial-gradient(circle at top right, #312e81, #000000); }
.mock-creative-2 { background: radial-gradient(circle at bottom left, #064e3b, #000000); }
.mock-creative-3 { background: radial-gradient(circle at center, #701a75, #000000); }
.mock-creative-4 { background: radial-gradient(circle at top left, #991b1b, #000000); }

/* ================= 文档动画 ================= */
@keyframes docSlide { from { transform: translateY(20px); opacity: 0;} to { transform: translateY(0); opacity: 1;} }
.doc-item { animation: docSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }

/* ================= Cohort 热力图颜色 ================= */
.cohort-100 { background: rgba(16, 185, 129, 1); color: #fff; }
.cohort-80 { background: rgba(16, 185, 129, 0.8); color: #fff; }
.cohort-60 { background: rgba(16, 185, 129, 0.6); color: #fff; }
.cohort-40 { background: rgba(16, 185, 129, 0.4); color: #fff; }
.cohort-20 { background: rgba(16, 185, 129, 0.2); color: #fff; }
.cohort-10 { background: rgba(16, 185, 129, 0.1); color: #a1a1aa; }

/* ================= 平台图片样式 ================= */
.platform-option img { filter: grayscale(20%); transition: filter 0.3s; }
.platform-option:hover img { filter: grayscale(0%); }

/* ================= KPI 横向紧凑条 ================= */
.kpi-strip .bento-card { padding: 10px 12px !important; }
.kpi-strip .bento-card .text-3xl { font-size: 1.25rem !important; line-height: 1.1 !important; }
.kpi-strip .bento-card .text-2xl { font-size: 1.1rem !important; line-height: 1.1 !important; }
.kpi-strip .bento-card .text-base { font-size: 0.75rem !important; }
.kpi-strip .bento-card .text-\[10px\] { font-size: 9px !important; }
.kpi-strip .bento-card .text-xs { font-size: 10px !important; }
.kpi-strip .bento-card .mb-2 { margin-bottom: 2px !important; }
.kpi-strip .bento-card .mb-1 { margin-bottom: 1px !important; }
.kpi-strip .bento-card .mt-3 { margin-top: 4px !important; }
.kpi-strip .bento-card .mt-2 { margin-top: 2px !important; }
.kpi-strip .bento-card .mt-1 { margin-top: 1px !important; }
.kpi-strip .bento-card .gap-2 { gap: 4px !important; }
.kpi-strip .bento-card svg { max-height: 18px !important; }
.kpi-strip .bento-card .h-1 { height: 3px !important; }
.kpi-strip .bento-card .leading-relaxed { line-height: 1.3 !important; font-size: 10px !important; }
/* ================= Copilot 抽屉 ================= */
.copilot-drawer { box-shadow: -4px 0 30px rgba(0,0,0,0.5); background: #18181b; }
.copilot-drawer.open { transform: translateX(0) !important; }
.copilot-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 49; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.copilot-overlay.open { opacity: 1; pointer-events: auto; }
.copilot-fab { position: fixed; bottom: 24px; right: 24px; z-index: 48; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #06b6d4); color: white; border: none; cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(59,130,246,0.4); transition: transform 0.2s; }
.copilot-fab:hover { transform: scale(1.1); }

/* ================= E8 首屏决策摘要（纯展示，不改业务绑定） ================= */
.e8-decision-summary { flex:0 0 auto; margin:12px 18px 0; padding:14px 16px 12px; border:1px solid var(--ng-border); border-radius:14px; background:linear-gradient(135deg,rgba(16,24,39,.96),rgba(8,13,24,.92)); box-shadow:0 10px 32px rgba(0,0,0,.18); }
.e8-summary-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:10px; }
.e8-eyebrow { display:block; color:var(--ng-aurora-cyan); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.e8-summary-head h1 { margin-top:3px; color:var(--ng-text-1); font-size:18px; line-height:1.25; font-weight:700; }
.e8-trust-boundary { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:440px; font-size:11px; line-height:1.4; }
.e8-trust-boundary span { padding:4px 8px; border-radius:999px; border:1px solid var(--ng-border); white-space:normal; }
.e8-boundary-demo { color:#FCD34D; background:rgba(242,184,75,.09); }
.e8-boundary-live { color:var(--ng-text-2); background:rgba(95,168,255,.07); }
.e8-priority-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.e8-priority-card { min-width:0; padding:10px 12px; border:1px solid var(--ng-border); border-radius:10px; background:rgba(255,255,255,.025); }
.e8-priority-card strong { display:block; margin:2px 0 4px; color:var(--ng-text-1); font-size:13px; line-height:1.35; }
.e8-priority-card p { color:var(--ng-text-3); font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.e8-priority-kicker { color:var(--ng-text-2); font-size:10px; font-weight:700; letter-spacing:.06em; }
.e8-priority-overview { border-top-color:var(--ng-info); }
.e8-priority-risk { border-top-color:var(--ng-danger); }
.e8-priority-growth { border-top-color:var(--ng-success); }
.e8-state-legend { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:9px; padding-top:8px; border-top:1px solid var(--ng-border); color:var(--ng-text-3); font-size:10px; line-height:1.4; }
.e8-state-legend span::before { content:'•'; margin-right:5px; color:var(--ng-info); }
.e8-state-legend [data-state="error"]::before { color:var(--ng-danger); }
.e8-state-legend [data-state="offline"]::before,.e8-state-legend [data-state="disabled"]::before { color:var(--ng-warning); }
.e8-state-legend [aria-disabled="true"] { opacity:.72; }
.e8-secondary-tools { margin-top:7px; color:var(--ng-text-3); font-size:10px; }
.e8-secondary-tools summary { width:max-content; max-width:100%; color:var(--ng-text-2); cursor:pointer; }
.e8-secondary-tools p { margin:5px 0 0 16px; line-height:1.45; }
.main-area,.chat-stage,.chat-scroll,.composer-inner { min-width:0; }
@media (max-width:944px) {
  .e8-decision-summary { margin:8px 10px 0; padding:10px 12px; }
  .e8-summary-head { gap:10px; margin-bottom:8px; }
  .e8-summary-head h1 { font-size:16px; }
  .e8-priority-card { padding:8px 9px; }
  .e8-priority-card p { font-size:10px; }
  .e8-trust-boundary { max-width:390px; }
}
@media (max-width:700px) {
  .e8-summary-head { flex-direction:column; }
  .e8-trust-boundary { justify-content:flex-start; max-width:none; }
  .e8-priority-grid { grid-template-columns:1fr; }
}

/* E9 visual consistency: publisher states align with the shared KoozhenStudio shell */
:root{--ng-radius-sm:8px;--ng-radius-md:12px;--ng-radius-lg:16px;--ng-shadow-card:0 14px 36px rgba(0,0,0,.24);--ng-shadow-pop:0 20px 56px rgba(0,0,0,.34);--ng-focus:0 0 0 3px rgba(51,198,212,.24)}
button,input,select,textarea{font:inherit}button,.send-btn,.chip,.phase-tab,.scene-item{border-radius:var(--ng-radius-md);transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}button:hover:not(:disabled),[role="button"]:hover:not([aria-disabled="true"]){border-color:var(--ng-border-strong)}button:active:not(:disabled),[role="button"]:active:not([aria-disabled="true"]){transform:translateY(1px)}button:focus-visible,[role="button"]:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--ng-aurora-cyan)!important;outline-offset:2px;box-shadow:var(--ng-focus)}button:disabled,[aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:saturate(.55);pointer-events:none}.e8-decision-summary,.e8-priority-card,.modal-content{border-radius:var(--ng-radius-lg);box-shadow:var(--ng-shadow-card)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:1024px){.main-area,.chat-stage,.composer-inner{min-width:0}}
@media(max-width:768px){.e8-decision-summary{margin-inline:8px}.e8-priority-grid{grid-template-columns:1fr}.composer-inner{padding-inline:10px}}