/* =====================================================================
   CorpGen 全站共享样式 (common.css)
   统一解决：①下拉框文字看不清 ②返回首页入口 ③响应式(PC/手机)适配
   加载顺序：在各页面 </head> 前引入，覆盖页面自身样式。
   ===================================================================== */

/* ① 下拉框可读性：根元素声明暗色方案，浏览器原生弹层自动走暗色 */
:root { color-scheme: dark; }
html { color-scheme: dark; }

select {
  color-scheme: dark;
  background-color: #0d2847 !important;
  color: #e1f5fe !important;
}
select option {
  background: #0d2847 !important;
  color: #e1f5fe !important;
}
select optgroup {
  background: #0a1628 !important;
  color: #81d4fa !important;
}
/* 选中项（聚焦态）更醒目 */
select:focus option:checked,
select option:checked {
  background: #155e9a !important;
  color: #ffffff !important;
}

/* ② 返回首页浮动按钮（由 common.js 在无导航栏页面注入） */
.back-home {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 1;
  color: #cfe9fb;
  text-decoration: none;
  background: rgba(5, 11, 24, 0.72);
  padding: 8px 13px;
  border-radius: 20px;
  border: 1px solid rgba(79, 195, 247, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.back-home:hover { color: #ffffff; border-color: #4fc3f7; }

/* ③ 通用防溢出 */
img, video, canvas, svg { max-width: 100%; height: auto; }
* { -webkit-tap-highlight-color: transparent; }

/* =====================================================================
   响应式：大屏(默认) / 平板 ≤900px / 手机 ≤768px / 小手机 ≤480px
   仅用通用布局类名做兜底堆叠，页面自身的 @media 仍优先（除非 !important）。
   ===================================================================== */

@media (max-width: 900px) {
  .container, .app, .layout, .main-content, .wrapper {
    flex-direction: column !important;
    display: flex !important;
  }
  .left-panel, .right-panel, .sidebar, .content, .panel {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 0 !important;
    overflow-x: clip;
  }
  .navbar {
    padding: 10px 14px !important;
    flex-wrap: wrap;
  }
  .navbar .logo { font-size: 20px !important; }

  /* 导航折叠：默认隐藏，点击 menu-toggle 后展开 */
  .nav-links { display: none !important; }
  .nav-links.show {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    background: rgba(8, 16, 32, 0.97);
    padding: 12px 16px;
    gap: 4px;
    z-index: 200;
    border-bottom: 1px solid rgba(79, 195, 247, 0.2);
    max-height: 80vh;
    overflow-y: auto;
  }
  .nav-links a {
    padding: 12px 8px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(79, 195, 247, 0.08);
  }
  .menu-toggle { display: block !important; }

  /* 多栏布局堆叠为单列 */
  .container, .app, .layout, .main-content, .wrapper {
    flex-direction: column !important;
    display: flex !important;
    gap: 12px !important;
    padding: 10px !important;
  }
  .left-panel, .right-panel, .sidebar, .content, .panel {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .grid, .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 触控友好 */
  button, .btn, .btn-action, .btn-primary, .btn-secondary, .btn-ghost,
  .btn-success, .btn-danger, .btn-login, .btn-sm {
    min-height: 42px;
    font-size: 15px !important;
  }
  input, textarea, select {
    min-height: 42px;
    font-size: 16px !important;   /* 防止 iOS 聚焦缩放 */
  }

  h1 { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  h3 { font-size: 17px !important; }

  table { display: block; overflow-x: auto; white-space: nowrap; }
  .modal, .modal-content, .dialog {
    max-width: 94vw !important;
    width: 94vw !important;
    margin: auto !important;
  }
}

@media (max-width: 480px) {
  .navbar .logo { font-size: 18px !important; }
  .nav-links a { font-size: 14px !important; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
}

/* =====================================================================
   全站滚动策略（用户强约束，2026-07-28）：
   仅浏览器本身可滚动；任何元素（页面内容面板/侧栏/弹窗）都不得出现
   内部竖向滚动条；页面随内容拉高到几屏就几屏，禁止限制高度。
   原则：overflow:hidden 仅做裁剪、不显示滚动条，予以保留（装饰/进度条/
   表格省略号/时间轴）。仅把 overflow-y:auto/scroll（会显示竖向滚动条者）
   改为 visible，并解除制造它的 max-height / height:100vh。
   ===================================================================== */
html, body {
  height: auto !important;
  min-height: 100%;
  overflow-x: clip !important;        /* 防横向溢出且不制造竖向滚动容器 */
  overflow-y: visible !important;     /* 页面交给浏览器滚动 */
}

/* 解除常见页面内容容器的固定高度与内部竖向滚动（核心问题） */
.main, .content, .panel, .left-panel, .right-panel, .sidebar,
.player-sidebar, .shot-list, .properties, .sidebar-content,
.log-area, .modal, .modal-content, .skill-content,
.app, .layout, .wrapper, .container, .stage, .results, .result-list,
[class*="panel"], [class*="content"], [class*="result"], [class*="sidebar"] {
  max-height: none !important;
  overflow-y: visible !important;
}
/* 侧栏曾被 height:100vh 钉死，改回 auto 以随内容拉伸 */
.sidebar { height: auto !important; }

/* 弹窗：框内不再滚动，由满屏遮罩层滚动（视觉等同浏览器滚动），避免框内竖向滚动条 */
.modal-overlay, .modal-backdrop, .overlay,
[class*="overlay"], [class*="backdrop"] {
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 移动端展开菜单：不再内部滚动，随页面增长 */
.nav-links.show { max-height: none !important; overflow-y: visible !important; }

/* =====================================================================
   工作室顶栏（视频生成工作台页由 common.js 注入）
   结构：🎬 易拍 | [🎬 视频生成 ▾ 下拉切换] | 返回首页 | 我的任务 |
          我的视频 | 角色形象库 | (登录态)
   ===================================================================== */
.studio-gen { position: relative; }
.studio-gen-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(34,211,238,.12);
  border: 1px solid rgba(34,211,238,.4);
  color: var(--accent, #22d3ee);
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.studio-gen-btn:hover { background: rgba(34,211,238,.2); }
.studio-gen-btn .caret { font-size: 11px; opacity: .8; }

.studio-gen-panel {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 200px;
  background: rgba(10,14,24,.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 8px;
  z-index: 300;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  flex-direction: column; gap: 2px;
}
.studio-gen.open .studio-gen-panel,
.studio-gen:hover .studio-gen-panel { display: flex; }
.studio-gen-panel a {
  color: var(--text, #e8edf5); text-decoration: none;
  font-size: 14px; padding: 8px 10px; border-radius: 8px; white-space: nowrap;
}
.studio-gen-panel a:hover { background: rgba(255,255,255,.08); }
.studio-gen-panel a.active {
  background: rgba(34,211,238,.16); color: var(--accent, #22d3ee); font-weight: 600;
}

/* 通用功能链接在当前页高亮 */
.nav-links a.active {
  color: var(--accent, #22d3ee) !important;
  font-weight: 600;
}

/* 创建型 navbar（本身无 .navbar 的页，如 drama.html / roles.html） */
.studio-navbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: rgba(10,14,24,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-wrap: wrap;
  position: sticky; top: 0; z-index: 200;
}
.studio-navbar .logo { font-weight: 700; font-size: 18px; cursor: pointer; }
.studio-navbar .nav-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

@media (max-width: 768px) {
  .studio-gen-panel { position: static; box-shadow: none; background: transparent; border: none; padding: 4px 0 4px 12px; }
  .studio-navbar .nav-links { display: none; width: 100%; }
  .studio-navbar .nav-links.show { display: flex; flex-direction: column; align-items: flex-start; }
}