/* CreatorOS 用户门户专用样式 */

.portal {
  margin: 0;
  padding: 0;
}

.portal-layout {
  display: flex;
  min-height: 100vh;
}

/* ====== 登录屏 ====== */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #1a1a1a;
}
.login-card {
  background: #2d2d2d;
  padding: 40px;
  border-radius: 12px;
  border: 1px solid #444;
  text-align: center;
  max-width: 380px;
}
.login-card h1 { margin-bottom: 16px; }
.login-card .hint { color: #666; font-size: 13px; margin-top: 16px; }

/* ====== 侧边栏 ====== */
.sidebar {
  width: 240px;
  background: #252525;
  border-right: 1px solid #3a3a3a;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.brand {
  padding: 0 20px 16px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #3a3a3a;
  margin-bottom: 16px;
}
.user-info { padding: 0 20px 16px; border-bottom: 1px solid #3a3a3a; margin-bottom: 16px; }
.user-name { font-weight: bold; font-size: 15px; }
.user-email { font-size: 12px; }
.channel-select {
  margin: 0 20px 16px;
  background: #3d3d3d;
  color: #e0e0e0;
  border: 1px solid #555;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
}
.nav { display: flex; flex-direction: column; flex: 1; }
.nav a {
  padding: 11px 20px;
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.nav a:hover { background: #2d2d2d; color: #fff; }
.nav a.active { background: #2d2d2d; color: #4CAF50; border-left-color: #4CAF50; }
.logout {
  padding: 11px 20px;
  color: #888;
  text-decoration: none;
  font-size: 13px;
  border-top: 1px solid #3a3a3a;
  margin-top: auto;
}
.logout:hover { color: #F44336; }

/* ====== 主内容区 ====== */
.content {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  background: #1a1a1a;
}
.content h2 { margin-bottom: 20px; font-size: 22px; }

.muted { color: #888; font-size: 13px; }
.error { color: #F44336; }

/* ====== 统计卡片 ====== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background: #2d2d2d;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #3a3a3a;
  text-align: center;
}
.stat-value { font-size: 28px; font-weight: bold; color: #4CAF50; }
.stat-label { color: #888; font-size: 12px; margin-top: 4px; }

/* ====== 图表区 ====== */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.chart-card {
  background: #2d2d2d;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #3a3a3a;
}
.chart-card h3 { margin-bottom: 12px; font-size: 14px; color: #aaa; }
.chart-card canvas { max-height: 260px; }

/* ====== 标签云 ====== */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tag {
  background: #3d3d3d;
  padding: 4px 11px;
  border-radius: 14px;
  font-size: 13px;
  color: #ddd;
}

/* ====== 金句卡 ====== */
.quote-card {
  background: #2d2d2d;
  padding: 18px;
  border-radius: 10px;
  border-left: 4px solid #FF9800;
  margin-bottom: 14px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.quote-image {
  width: 180px;
  min-height: 100px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #1a1a1a;
}
.quote-body { flex: 1; min-width: 0; }
.quote-stars { color: #FF9800; font-size: 15px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.quote-source { font-size: 12px; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-source a { color: #4dabf7; text-decoration: none; }
.quote-source a:hover { text-decoration: underline; }
.quote-text { font-size: 16px; line-height: 1.6; color: #f0f0f0; }
.quote-context { margin-top: 8px; font-size: 13px; }

/* ====== 原子卡 ====== */
.atom-card {
  background: #2d2d2d;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #3a3a3a;
  margin-bottom: 12px;
}
.atom-card.clickable { cursor: pointer; transition: border-color 0.15s; }
.atom-card.clickable:hover { border-color: #4CAF50; }
.atom-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.atom-content { font-size: 14px; line-height: 1.6; color: #ccc; }
.atom-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  background: #3a3a3a;
  color: #aaa;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
}
.badge.imp { background: #1b3a1b; color: #4CAF50; }

/* ====== 筛选/搜索栏 ====== */
.filter-bar, .search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-bar select, .filter-bar input, .search-bar input {
  background: #3d3d3d;
  color: #e0e0e0;
  border: 1px solid #555;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.filter-bar input, .search-bar input { flex: 1; min-width: 200px; }

/* ====== 生成表单 ====== */
.gen-form { max-width: 640px; }
.gen-form label { display: block; margin-bottom: 14px; font-size: 14px; color: #ccc; }
.gen-form input, .gen-form textarea, .gen-form select {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: #3d3d3d;
  color: #e0e0e0;
  border: 1px solid #555;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.gen-form button, .search-bar button {
  background: #4CAF50;
  color: #fff;
  border: none;
  padding: 9px 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.gen-form button:hover, .search-bar button:hover { background: #5dbf60; }

.result-pre {
  background: #2d2d2d;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #3a3a3a;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.6;
  max-height: 500px;
  overflow-y: auto;
}

/* ⚖️ 矛盾检测视图 */
.contradiction-result {
  margin-top: 16px;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  overflow: hidden;
}

.contradiction-verdict {
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
}

.contradiction-verdict.ok { background: rgba(46,204,113,0.15); border-left: 4px solid #2ecc71; color: #2ecc71; }
.contradiction-verdict.warn { background: rgba(243,156,18,0.15); border-left: 4px solid #f39c12; color: #f39c12; }
.contradiction-verdict.bad { background: rgba(231,76,60,0.15); border-left: 4px solid #e74c3c; color: #e74c3c; }

.contradiction-summary {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: #2a2a2a;
  border-top: 1px solid #3a3a3a;
  font-size: 14px;
  color: #aaa;
}

.contradiction-summary strong { color: #eee; }

/* ========== 📝 草稿一致性检测 ========== */
.draftCheck-result { margin-top:16px; border:1px solid #3a3a3a; border-radius:8px; overflow:hidden; }
.draftCheck-verdict { padding:16px 20px; font-size:16px; font-weight:600; }
.draftCheck-verdict.ok { background:rgba(46,204,113,0.12); border-left:4px solid #2ecc71; color:#2ecc71; }
.draftCheck-verdict.warn { background:rgba(243,156,18,0.12); border-left:4px solid #f39c12; color:#f39c12; }
.draftCheck-verdict.bad { background:rgba(231,76,60,0.12); border-left:4px solid #e74c3c; color:#e74c3c; }
.draftCheck-summary { display:flex; gap:24px; flex-wrap:wrap; padding:14px 20px; background:#2a2a2a; border-top:1px solid #3a3a3a; font-size:14px; color:#aaa; }
.draftCheck-summary strong { color:#eee; }
.draftCheck-card { margin-top:12px; padding:14px 16px; background:#2a2a2a; border:1px solid #3a3a3a; border-radius:8px; display:flex; gap:14px; align-items:flex-start; }
.draftCheck-image { width:160px; min-height:90px; object-fit:cover; border-radius:6px; flex-shrink:0; background:#1a1a1a; }
.draftCheck-cardBody { flex:1; min-width:0; }
.draftCheck-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; font-size:14px; color:#eee; }
.draftCheck-type { padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.draftCheck-type.red { background:#3a1b1b; color:#e74c3c; }
.draftCheck-type.orange { background:#3a2f12; color:#f39c12; }
.draftCheck-type.yellow { background:#3a3512; color:#ffe066; }
.draftCheck-type.green { background:#1b3a1b; color:#2ecc71; }
.draftCheck-sev { padding:2px 8px; border-radius:4px; font-size:11px; }
.draftCheck-sev.major { background:#3a1b1b; color:#e74c3c; }
.draftCheck-sev.minor { background:#2a2a3a; color:#aab; }
.draftCheck-conf { padding:1px 6px; border-radius:4px; font-size:10px; color:#888; }
.draftCheck-conf.high { color:#2ecc71; }
.draftCheck-conf.medium { color:#f39c12; }
.draftCheck-conf.low { color:#e74c3c; }
.draftCheck-quote { margin:8px 0; padding:10px 12px; background:#1f1f1f; border-left:3px solid #555; border-radius:4px; color:#bbb; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; font-style:italic; }
.draftCheck-reason { font-size:13px; color:#ccc; line-height:1.6; }
.draftCheck-fix { margin-top:8px; font-size:13px; color:#7fdbff; line-height:1.6; }

/* ========== 🎣 爆款标题 Hook ========== */
.hook-result { margin-top:8px; }
.hook-card { background:#2d2d2d; padding:18px; border-radius:10px; border-left:4px solid #FF9800; margin-bottom:14px; }
.hook-title { font-size:17px; font-weight:600; color:#f0f0f0; margin-bottom:8px; line-height:1.5; }
.hook-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; align-items:center; }
.hook-plat { background:#3d3d3d; padding:2px 10px; border-radius:11px; font-size:12px; color:#aaa; }
.hook-tag { background:#1b3a1b; padding:2px 10px; border-radius:11px; font-size:12px; color:#4CAF50; }
.hook-why { font-size:13px; line-height:1.6; margin-top:4px; }

/* ========== 📺 系列节目企划 ========== */
.series-result { margin-top:8px; }
.series-meta { background:#2a2a2a; padding:14px 20px; border-radius:8px; border:1px solid #3a3a3a; margin-bottom:14px; }
.series-topic { font-size:16px; margin-bottom:6px; }
.series-ep { background:#2d2d2d; padding:16px 18px; border-radius:10px; border:1px solid #3a3a3a; margin-bottom:12px; }
.series-ep:hover { border-color:#4CAF50; }
.series-ep-num { font-size:12px; color:#4CAF50; font-weight:600; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.series-ep-title { font-size:16px; font-weight:600; color:#f0f0f0; margin-bottom:8px; }
.series-field { font-size:13px; color:#bbb; line-height:1.6; margin-bottom:4px; }
.series-label { color:#888; }
.series-trailer { color:#f39c12; margin-top:4px; }

/* ========== 📝 三色大纲 / Firewall / 脚本 结果渲染 ========== */
.outline-body, .outline-firewall, .outline-script { background:#2d2d2d; padding:16px 18px; border-radius:8px; border:1px solid #3a3a3a; margin-top:8px; line-height:1.7; font-size:14px; color:#ddd; white-space:pre-wrap; word-break:break-word; }
.outline-body h3, .outline-firewall h3, .outline-script h3 { color:#f0f0f0; margin:8px 0 6px; }
.outline-body h6, .outline-firewall h6, .outline-script h6 { color:#ddd; }
.outline-body strong, .outline-firewall strong, .outline-script strong { color:#fff; }
.outline-body li, .outline-firewall li, .outline-script li { margin-left:16px; list-style:disc; }
.outline-body pre, .outline-firewall pre, .outline-script pre { background:#1a1a1a; padding:10px 12px; border-radius:6px; overflow-x:auto; }
.outline-firewall { border-left:4px solid #2196F3; }
.outline-script { border-left:4px solid #FF9800; }

/* ========== 🔴🟢🔵 三色标签染色 ========== */
.tag-red { color:#ff6b6b; }
.tag-green { color:#6bff6b; }
.tag-blue { color:#6b9bff; }

@media (max-width: 768px) {
  .portal-layout { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav a { border-left: none; border-bottom: 3px solid transparent; padding: 8px 12px; }
}

/* 手机紧凑布局(<=480px):主内容 padding 收紧、卡片纵向堆叠、字号适度缩小 */
@media (max-width: 480px) {
  .content { padding: 16px; }
  .content h2 { font-size: 18px; margin-bottom: 14px; }

  /* 侧边栏:紧凑横向品牌行 */
  .sidebar { padding: 10px 0; gap: 6px; }
  .brand { padding: 0 14px 8px; font-size: 16px; margin-bottom: 8px; }
  .user-info { padding: 0 14px 8px; margin-bottom: 8px; }
  .user-name { font-size: 14px; }
  .channel-select { margin: 0 14px 8px; padding: 6px 8px; font-size: 13px; }
  .nav a { padding: 7px 10px; font-size: 13px; }

  /* 统计卡片:最小宽度 100px,4 列在小屏挤成 2-3 列 */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 22px; }

  /* 图表区:单列堆叠 */
  .chart-grid { grid-template-columns: 1fr; gap: 12px; }

  /* 金句卡:纵向堆叠,图片在上 */
  .quote-card { flex-direction: column; gap: 10px; padding: 14px; }
  .quote-image { width: 100%; min-height: 140px; }
  .quote-text { font-size: 15px; }
  .quote-source { font-size: 11px; }

  /* 原子卡 */
  .atom-card { padding: 12px; }
  .atom-content { font-size: 13px; }

  /* 筛选/搜索栏:纵向堆叠 */
  .filter-bar, .search-bar { flex-direction: column; gap: 8px; }
  .filter-bar input, .search-bar input { min-width: 0; }

  /* 草稿检测:纵向堆叠 */
  .draftCheck-card { flex-direction: column; gap: 10px; }
  .draftCheck-image { width: 100%; min-height: 120px; }

  /* 标签云:更紧凑 */
  .tag { padding: 3px 8px; font-size: 12px; }
}