/* ==========================================================
   ContentFlow — Milk Coffee Aesthetic
   Warm, refined, editorial design language
   ========================================================== */

:root {
  /* ── Milk Coffee Palette ── */
  --latte:        #FAF6F1;
  --cream:        #F3ECE2;
  --foam:         #EDE4D8;
  --caramel:      #D4C4AE;
  --mocha:        #B8A48E;
  --espresso:     #6B5B4E;
  --dark-roast:   #4A3C31;
  --black-coffee: #2C2218;

  /* ── Semantic Mapping ── */
  --bg-body:      #FAF6F1;
  --bg-surface:   #FFFFFF;
  --bg-column:    #F7F1EA;
  --bg-card:      #FFFFFF;
  --bg-hover:     #F3ECE2;
  --bg-input:     #FAF6F1;
  --bg-inset:     #F0E8DC;
  /* 别名变量（很多组件用到，之前未定义只靠 fallback，暗色模式会漏成浅色，这里统一定义） */
  --bg-primary:   #FAF6F1;
  --bg-secondary: #F3ECE4;
  --surface:      #FFFFFF;
  --surface-hover: rgba(0,0,0,0.04);

  --text-primary:   #1A1410;
  --text-secondary: #4A3C31;
  --text-muted:     #8A7A6A;
  --text-hint:      #9A8B7A;

  --border:       #E8DFD2;
  --border-light: #F0E8DC;
  --border-focus: #B8A48E;

  /* ── Accent Color: 深松绿（冷主色，呼应"松"鲜鲜品牌；暖中性底色不变）── */
  --accent:       #2F6F5E;
  --accent-hover: #255B4C;
  --accent-light: #E4EFEA;
  --accent-muted: #DCEAE4;

  --clr-urgent:   #C4564A;
  --clr-high:     #D4864A;
  --clr-medium:   #C4A84A;
  --clr-low:      #A8A898;
  --clr-green:    #6A9E78;
  --clr-blue:     #5E8BA8;
  --clr-purple:   #8E7AAE;
  --clr-pink:     #B87A8E;

  /* ── Shadows (Apple multi-layer) ── */
  --shadow-xs:  0 0.5px 1px rgba(44,34,24,0.04), 0 1px 3px rgba(44,34,24,0.03);
  --shadow-sm:  0 1px 2px rgba(44,34,24,0.04), 0 3px 10px rgba(44,34,24,0.05);
  --shadow-md:  0 1px 3px rgba(44,34,24,0.04), 0 6px 20px rgba(44,34,24,0.06), 0 12px 40px rgba(44,34,24,0.03);
  --shadow-lg:  0 2px 4px rgba(44,34,24,0.03), 0 8px 28px rgba(44,34,24,0.07), 0 20px 60px rgba(44,34,24,0.04);
  --shadow-xl:  0 2px 6px rgba(44,34,24,0.03), 0 12px 40px rgba(44,34,24,0.08), 0 32px 80px rgba(44,34,24,0.06);

  /* ── Radii (Apple squircle-ish) ── */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;

  /* ── Transitions (Apple spring) ── */
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1.0);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration: 200ms;
  --duration-slow: 350ms;

  /* ── Glass ── */
  --glass-bg: rgba(255,255,255,0.72);
  --glass-blur: saturate(180%) blur(20px);
  --glass-border: rgba(255,255,255,0.35);
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --latte:        #1A1410;
  --cream:        #221C16;
  --foam:         #2A231B;
  --caramel:      #3D3229;
  --mocha:        #5A4D40;
  --espresso:     #A89880;
  --dark-roast:   #E8DDD1;
  --black-coffee: #F0E8DC;

  --bg-body:      #1A1410;
  --bg-surface:   #241E17;
  --bg-column:    #1E1812;
  --bg-card:      #2A231B;
  --bg-hover:     #332B22;
  --bg-input:     #1E1812;
  --bg-inset:     #332B22;
  --bg-primary:   #1A1410;
  --bg-secondary: #221C16;
  --surface:      #2A231B;
  --surface-hover: #332B22;

  --text-primary:   #F0E8DC;
  --text-secondary: #C4B8A8;
  --text-muted:     #8A7A6A;
  --text-hint:      #6A5E52;

  --border:       #3D3229;
  --border-light: #332B22;
  --border-focus: #9C7B5C;

  --accent:       #4FA98C;
  --accent-hover: #6FBFA4;
  --accent-light: #24332E;
  --accent-muted: #1F2E29;

  --shadow-xs:  0 0.5px 1px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.10);
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.15), 0 3px 10px rgba(0,0,0,0.12);
  --shadow-md:  0 1px 3px rgba(0,0,0,0.12), 0 6px 20px rgba(0,0,0,0.16), 0 12px 40px rgba(0,0,0,0.08);
  --shadow-lg:  0 2px 4px rgba(0,0,0,0.12), 0 8px 28px rgba(0,0,0,0.18), 0 20px 60px rgba(0,0,0,0.10);
  --shadow-xl:  0 2px 6px rgba(0,0,0,0.12), 0 12px 40px rgba(0,0,0,0.20), 0 32px 80px rgba(0,0,0,0.14);

  --glass-bg: rgba(26,20,16,0.82);
  --glass-border: rgba(60,50,40,0.35);

  color-scheme: dark;
}
[data-theme="dark"] body {
  background: var(--bg-body);
  color: var(--text-primary);
}
[data-theme="dark"] .login-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
[data-theme="dark"] .kanban-column {
  background: rgba(255,255,255,0.02);
}
[data-theme="dark"] .project-card {
  background: var(--bg-card);
  border-left-color: transparent;
}
[data-theme="dark"] .project-card.card-p-urgent { border-left-color: var(--clr-urgent); }
[data-theme="dark"] .project-card.card-p-high { border-left-color: var(--clr-high); }
[data-theme="dark"] .project-card.card-p-medium { border-left-color: var(--clr-medium); }
[data-theme="dark"] .project-card.card-p-low { border-left-color: var(--clr-low); }
[data-theme="dark"] .modal {
  background: var(--bg-surface);
}
[data-theme="dark"] .column-count {
  opacity: 0.9;
}
[data-theme="dark"] .stat-card,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .settings-card {
  background: var(--bg-card);
}
[data-theme="dark"] .btn-primary {
  background: var(--accent);
  color: #1A1410;
}
[data-theme="dark"] .btn-secondary {
  background: var(--bg-inset);
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-input);
  color: var(--text-primary);
  border-color: transparent;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--accent);
}
[data-theme="dark"] .project-card.drag-placeholder {
  background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(255,255,255,0.03) 6px, rgba(255,255,255,0.03) 12px);
  border-color: rgba(255,255,255,0.12);
}
/* 今日驾驶舱：暗色下修正硬编码浅色 */
[data-theme="dark"] .daily-goals-card { background: linear-gradient(135deg, #2A231B, #221C16); }
[data-theme="dark"] .daily-ai-brief { background: var(--accent-muted); }
[data-theme="dark"] .daily-ai-badge { background: rgba(79,169,140,0.18); color: var(--accent-hover); }
[data-theme="dark"] .daily-todo-text-input:hover,
[data-theme="dark"] .daily-todo-text-input:focus { background: var(--bg-hover); }

/* ═══════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.login-card {
  background: var(--bg-surface);
  border-radius: var(--r-xl);
  padding: 48px 40px;
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: scaleIn 0.35s var(--ease) both;
}

.login-logo {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 32px;
  text-align: center;
  color: var(--dark-roast);
  margin-bottom: 8px;
}

.login-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.login-sub {
  text-align: center;
  font-size: 13px;
  color: var(--text-hint);
  margin-bottom: 32px;
}

.login-btn {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  margin-top: 8px;
}
.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-divider {
  display: flex;
  align-items: center;
  margin: 16px 0 8px;
  color: var(--text-hint);
  font-size: 13px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.login-divider span {
  padding: 0 12px;
}

.login-btn-dingtalk {
  background: #0089FF !important;
  color: #fff !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}
.login-btn-dingtalk:hover:not(:disabled) {
  background: #006FD6 !important;
}
.login-btn-dingtalk svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.login-error {
  text-align: center;
  color: var(--clr-urgent);
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
}

/* ── 备案信息 ── */
.beian-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-hint, #999);
  line-height: 1.6;
  opacity: .45;
}
.beian-footer a {
  color: var(--text-hint, #999);
  text-decoration: none;
  transition: color .2s;
}
.beian-footer a:hover {
  color: var(--text-secondary, #666);
  text-decoration: underline;
}
.beian-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 3px;
}
.beian-sep {
  margin: 0 6px;
}
@media (max-width: 480px) {
  .beian-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
  }
  .beian-sep { display: none; }
}

/* ── User Badge in Header ── */
.user-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1.5px solid var(--border);
}
.user-badge-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── User Badge with Dropdown Menu ── */
.user-badge-menu {
  cursor: pointer;
  padding: 6px 12px 6px 14px;
  border-radius: 100px;
  border-left: 1.5px solid var(--border);
  position: relative;
  transition: all 0.18s ease;
  user-select: none;
}
.user-badge-menu:hover { background: var(--surface-hover, rgba(0,0,0,0.04)); }
.user-badge-menu.active { background: var(--surface-hover, rgba(0,0,0,0.06)); }
.user-badge-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.user-badge-arrow {
  font-size: 10px; color: var(--text-muted);
  transition: transform 0.2s ease;
  margin-left: 2px;
}
.user-badge-menu.active .user-badge-arrow { transform: rotate(180deg); }

.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 130px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(156,123,92,0.15));
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(74,60,49,0.10);
  padding: 4px;
  z-index: 1050;
}
.admin-badge-sm {
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 100px;
  background: var(--clr-urgent); color: white;
}
.user-menu-divider {
  height: 1px; background: rgba(156,123,92,0.10);
  margin: 2px 0;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
  font-family: inherit;
  color: var(--text-primary);
}
.user-menu-item:hover { background: rgba(156,123,92,0.08); }
.user-menu-icon { font-size: 14px; width: 18px; text-align: center; }
.user-menu-label { flex: 1; font-size: 12px; font-weight: 500; }
.user-menu-item-danger { color: var(--clr-urgent, #e11d48); }
.user-menu-item-danger:hover { background: rgba(225,29,72,0.06); }

.user-menu-pop-enter-active, .user-menu-pop-leave-active {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.user-menu-pop-enter-from, .user-menu-pop-leave-to {
  opacity: 0; transform: translateY(-6px) scale(0.98);
}

/* ── Credentials Library ── */
.credentials-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.credentials-type-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.credentials-type-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.credentials-type-tabs button:hover { background: var(--surface-hover, rgba(156,123,92,0.08)); }
.credentials-type-tabs button.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.credentials-type-tabs .count-badge {
  font-size: 10px;
  background: rgba(0,0,0,0.12);
  padding: 1px 6px;
  border-radius: 100px;
}
.credentials-type-tabs button.active .count-badge { background: rgba(255,255,255,0.25); }
.credentials-search {
  flex-basis: 260px;
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  font-family: inherit;
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.credential-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: all 0.18s ease;
}
.credential-card:hover {
  box-shadow: 0 6px 18px rgba(74,60,49,0.1);
  transform: translateY(-1px);
}
.credential-card.cred-type-nas { border-left: 3px solid #3b82f6; }
.credential-card.cred-type-davinci { border-left: 3px solid #e11d48; }
.credential-card.cred-type-adobe { border-left: 3px solid #ef4444; }
.credential-card.cred-type-other { border-left: 3px solid #6b7280; }

.credential-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.credential-type-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
}
.credential-expiry-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(34,197,94,0.12);
  color: #16a34a;
  margin-left: auto;
}
.credential-expiry-badge.expiring-soon { background: rgba(234,179,8,0.15); color: #ca8a04; }
.credential-expiry-badge.expiring { background: rgba(249,115,22,0.15); color: #ea580c; }
.credential-expiry-badge.expired { background: rgba(225,29,72,0.15); color: #e11d48; }

.credential-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 2px 0 4px;
  word-break: break-word;
}

.credential-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
  flex-wrap: nowrap;
}
.credential-field:last-of-type { border-bottom: none; }
.credential-field-label { flex-shrink: 0; width: 18px; }
.credential-field-value {
  flex: 1;
  min-width: 0;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: break-all;
  color: var(--text-primary);
}
.credential-field-pw { background: rgba(156,123,92,0.06); border-radius: 6px; padding: 6px 8px; border-bottom: none; margin: 2px 0; }
.credential-pw-text { letter-spacing: 0.5px; }

.credential-members {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 11px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.credential-member-tag {
  padding: 2px 8px;
  background: rgba(156,123,92,0.12);
  color: var(--accent);
  border-radius: 100px;
  font-weight: 600;
  font-size: 11px;
}
.credential-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  background: rgba(0,0,0,0.03);
  padding: 6px 8px;
  border-radius: 6px;
  word-break: break-word;
}
.credential-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.credential-actions .btn { flex: 1; padding: 5px 10px; font-size: 12px; }

/* 成员多选选择器 */
.member-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.member-selector-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--bg);
  font-size: 12px;
  position: relative;
}
.member-selector-item:hover { border-color: var(--accent); }
.member-selector-item.selected {
  border-color: var(--accent);
  background: rgba(156,123,92,0.1);
}
.member-selector-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 11px;
  flex-shrink: 0;
}
.member-selector-name { font-weight: 600; color: var(--text-primary); }
.member-selector-role { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.member-selector-check {
  position: absolute; top: 4px; right: 4px;
  color: var(--accent); font-weight: 700; font-size: 12px;
}

.my-credentials-grid {
  grid-template-columns: 1fr !important;
}

/* ═══ 个人中心 Modal ═══ */
.my-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.my-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  flex-shrink: 0;
}
.my-profile-info { flex: 1; min-width: 0; }
.my-profile-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--dark-roast);
  display: flex;
  align-items: center;
  gap: 8px;
}
.my-profile-role {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.my-profile-meta {
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 4px;
}
.my-profile-section { margin-top: 24px; }
.my-profile-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-roast);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.my-profile-logs {
  max-height: 360px;
  overflow-y: auto;
}
.my-profile-log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.my-profile-log-item:last-child { border-bottom: none; }
.my-profile-log-action {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  min-width: 72px;
}
.my-profile-log-detail {
  flex: 1;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-profile-log-project {
  background: var(--bg-inset, #F3ECE4);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.my-profile-log-time {
  font-size: 11px;
  color: var(--text-hint);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .my-profile-header { flex-direction: column; text-align: center; gap: 10px; }
  .my-profile-name { justify-content: center; font-size: 18px; }
  .my-profile-log-item { flex-direction: column; gap: 4px; align-items: flex-start; }
  .my-profile-log-time { align-self: flex-end; }
}

/* ── Deadline Reminder Panel ── */
.deadline-reminder-panel {
  background: rgba(156,123,92,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.deadline-reminder-info {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.9;
}
.deadline-reminder-info strong {
  color: var(--text-primary);
  font-weight: 600;
}
.deadline-reminder-result {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: 8px;
  border-left: 3px solid #22c55e;
  font-size: 13px;
}
.deadline-reminder-list {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--text-secondary);
}
.deadline-reminder-list li { padding: 2px 0; }

/* ── Security Audit Log ── */
.security-log-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.security-log-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.security-log-item:last-child { border-bottom: none; }
.security-log-item.severity-high { border-left: 3px solid #ef4444; }
.security-log-item.severity-critical { border-left: 3px solid #dc2626; background: rgba(239,68,68,0.04); }
.security-log-item.severity-medium { border-left: 3px solid #f59e0b; }
.security-log-item.severity-low { border-left: 3px solid #3b82f6; }
.security-log-item.severity-info { border-left: 3px solid #22c55e; }
.security-log-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.security-log-type {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 1px 6px;
  border-radius: 4px;
}
.security-log-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}
.security-log-detail {
  color: var(--text-primary);
  line-height: 1.5;
}
.security-log-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Monitor Group Divider ── */
.monitor-group-divider {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 -4px;
}
.monitor-group-divider span {
  font-size: 13px; font-weight: 600; color: var(--espresso);
  white-space: nowrap; letter-spacing: 0.5px;
}
.monitor-group-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}

/* ── Security Dashboard ── */
.security-stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px;
}
.security-stat-card {
  background: var(--bg-inset); border-radius: 8px; padding: 14px 12px; text-align: center;
}
.security-stat-card.stat-warn { background: #fff8e1; }
.security-stat-card.stat-danger { background: #fbe9e7; }
.security-stat-number { font-size: 22px; font-weight: 700; color: var(--dark-roast); }
.stat-warn .security-stat-number { color: #e65100; }
.stat-danger .security-stat-number { color: #c62828; }
.security-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.security-section { margin-top: 16px; }
.security-section-title { font-size: 13px; font-weight: 600; color: var(--dark-roast); margin-bottom: 8px; }
.security-block-list { display: flex; flex-direction: column; gap: 6px; }
.security-block-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--bg-inset); border-radius: 6px; font-size: 13px;
}
.security-block-item code { font-size: 12px; color: var(--espresso); }
.security-block-ttl { font-size: 11px; color: #c62828; margin-left: auto; }
.security-type-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.security-type-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: var(--bg-inset); border-radius: 6px; font-size: 12px;
}
.security-type-name { font-family: monospace; color: var(--text-secondary); }
.security-type-count { font-weight: 600; color: var(--dark-roast); }
.security-rate-grid { display: flex; flex-direction: column; gap: 6px; }
.security-rate-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--bg-inset); border-radius: 6px; font-size: 13px;
}
.security-rate-name { font-weight: 500; color: var(--dark-roast); min-width: 80px; }
.security-rate-val { color: var(--text-secondary); flex: 1; }
.security-rate-limit { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.security-critical-list { display: flex; flex-direction: column; gap: 6px; }
.security-critical-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: rgba(239,68,68,0.04); border-left: 3px solid #ef4444; border-radius: 0 6px 6px 0; font-size: 12px;
}
.security-critical-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.security-critical-type { font-family: monospace; font-size: 11px; color: #c62828; background: rgba(239,68,68,0.08); padding: 1px 6px; border-radius: 4px; }
.security-critical-detail { color: var(--text-primary); flex: 1; min-width: 200px; }
.security-critical-ip { font-size: 11px; color: var(--text-muted); }

@media (max-width: 480px) {
  .credentials-grid { grid-template-columns: 1fr; }
  .credentials-toolbar { flex-direction: column; align-items: stretch; }
  .credentials-search { flex-basis: auto; width: 100%; }
  .user-menu { position: fixed; top: 56px; right: 10px; left: auto; min-width: 120px; width: auto; }
  .user-badge-name { display: none; }
}

/* ── Admin Badge ── */
.admin-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--clr-urgent);
  color: white;
  vertical-align: middle;
  margin-left: 4px;
}

.member-username {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ── Form Extras ── */
.form-divider {
  border-top: 1.5px dashed var(--border);
  margin: 8px 0 18px;
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500 !important;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.checkbox-hint {
  font-size: 11px;
  color: var(--text-hint);
  font-weight: 400;
  margin-left: 4px;
}
.dept-checkbox-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.dept-check-item {
  font-size: 13px;
}

/* ── Reset & Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: clip;
}

/* subtle warmth grain — barely visible */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23d6c8b4' fill-opacity='0.04'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23c4b6a0' fill-opacity='0.03'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23c4b6a0' fill-opacity='0.03'/%3E%3C/svg%3E");
}

#app { position: relative; z-index: 1; }

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  height: 68px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(44,34,24,0.04);
}

.header-left { display: flex; align-items: center; gap: 28px; min-width: 0; flex: 1 1 auto; }
.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.logo {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--dark-roast);
  letter-spacing: -0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dept-switcher {
  flex-shrink: 0;
}
.dept-switcher select {
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--dark-roast);
  background: var(--bg-secondary);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 5px 28px 5px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234A3C31' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .2s, box-shadow .2s;
}
.dept-switcher select:hover {
  border-color: var(--accent);
}
.dept-switcher select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(156, 123, 92, 0.15);
}

.nav-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* 左右渐变淡出，提示"还有内容可滚动" */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  padding: 4px 0;
  cursor: grab;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 123, 92, 0.35) transparent;
}
.nav-tabs.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.nav-tabs::-webkit-scrollbar { height: 4px; }
.nav-tabs::-webkit-scrollbar-track { background: transparent; }
.nav-tabs::-webkit-scrollbar-thumb {
  background: rgba(156, 123, 92, 0.25);
  border-radius: 4px;
}
.nav-tabs::-webkit-scrollbar-thumb:hover { background: rgba(156, 123, 92, 0.5); }
.nav-tabs button {
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.25s var(--ease);
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-new-project { white-space: nowrap; flex-shrink: 0; }
.search-box { flex-shrink: 1; min-width: 120px; }
.search-box input { min-width: 0; width: 100%; }
.online-indicator, .user-badge { flex-shrink: 0; white-space: nowrap; }
.online-count-text, .online-label, .user-badge-name { white-space: nowrap; }

/* 中等屏幕自动压缩 header 右侧，为 nav-tabs 让出空间 */
@media (max-width: 1400px) {
  .header-left { gap: 20px; }
  .nav-tabs button { padding: 8px 11px; font-size: 13px; }
  .search-box input { padding: 9px 12px 9px 34px; font-size: 13px; width: 180px; }
}
@media (max-width: 1200px) {
  .app-header { padding: 0 18px; }
  .header-left { gap: 14px; }
  .header-right { gap: 8px; }
  .logo { font-size: 20px; }
  .nav-tabs button { padding: 7px 10px; font-size: 12.5px; }
  .search-box input { width: 140px; padding: 8px 10px 8px 30px; }
  .online-label { display: none; }  /* 只留"🟢 N人" */
  .btn-new-project { padding: 7px 12px; font-size: 12.5px; }
}
.nav-tabs button:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.nav-tabs button.active {
  background: var(--accent-muted);
  color: var(--accent);
  font-weight: 700;
  box-shadow: none;
}
/* 顶栏右侧图标按钮（帮助/设置） */
.header-icon-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg-hover, #F3ECE2);
  font-size: 16px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease-taste), border-color .2s var(--ease-taste), transform .14s var(--ease-taste);
}
.header-icon-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.header-icon-btn:active { transform: scale(0.92); }
.header-icon-btn.active { background: var(--accent-muted); border-color: var(--accent); }
/* 桌面导航项少了，关掉横滑裁剪，让下拉能溢出显示 */
.nav-tabs-desktop { overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* 「看板」悬停下拉：项目集/日历/仪表盘收进来，始终在顶栏可切换、单层、不挡内容 */
.nav-group { position: relative; display: inline-flex; }
.nav-group-caret { font-size: 10px; opacity: .55; margin-left: 1px; }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 150px;
  background: var(--bg-surface, #fff); border: 1px solid var(--border, #E2D8CC);
  border-radius: var(--r-md, 14px); box-shadow: var(--shadow-md);
  padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 200;
}
/* 悬停桥接：caret 下方留一点点缓冲，避免移入时菜单消失 */
.nav-group::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
.nav-group:hover .nav-dropdown { display: flex; }
.nav-dropdown button {
  width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
  padding: 8px 12px; border-radius: 8px; white-space: nowrap;
  transition: background .15s var(--ease-taste), color .15s var(--ease-taste);
}
.nav-dropdown button:hover { background: var(--bg-hover, #F3ECE2); color: var(--dark-roast); }
.nav-dropdown button.active { background: var(--accent-muted); color: var(--accent); }

.search-box { position: relative; }
.search-box input {
  padding: 9px 14px 9px 38px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13.5px;
  font-family: inherit;
  width: 230px;
  outline: none;
  transition: all 0.25s var(--ease);
}
.search-box input::placeholder { color: var(--text-hint); }
.search-box input:focus {
  border-color: var(--mocha);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px rgba(156,123,92,0.1);
  width: 280px;
}
.search-box .search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: 0.5;
}

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.btn {
  padding: 9px 22px;
  border: none;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover {
  background: var(--foam);
  border-color: var(--caramel);
}
.btn-sm { padding: 5px 14px; font-size: 12.5px; }
.btn-icon {
  background: none; border: none; cursor: pointer;
  padding: 6px; font-size: 15px; border-radius: var(--r-sm);
  transition: all 0.2s var(--ease); color: var(--text-muted);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-secondary); }
.btn-tiny { font-size: 12px; opacity: 0.35; padding: 2px; }
.btn-tiny:hover { opacity: 0.8; }

/* ═══════════════════════════════════════
   KANBAN BOARD
   ═══════════════════════════════════════ */
.kanban-view { padding: 24px 32px; }

.kanban-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.kanban-filters select {
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.kanban-filters select:focus { border-color: var(--mocha); }
.filter-count {
  color: var(--text-muted);
  font-size: 13px;
  margin-left: auto;
  font-weight: 500;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  min-height: calc(100vh - 170px);
}

.kanban-column {
  background: rgba(156,123,92, 0.03);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  border: none;
  overflow: hidden;
  transition: background var(--duration) var(--ease);
}

.column-header {
  padding: 0 16px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: none;
  border-top: 3.5px solid;
  padding-top: 16px;
  position: relative;
  background: none;
}
.column-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--border-light);
  opacity: 0.7;
}
.column-icon { font-size: 15px; }
.column-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.column-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
}

.column-body {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 80px;
}

.column-empty {
  text-align: center;
  color: var(--text-hint);
  padding: 40px 16px;
  font-size: 12.5px;
  line-height: 1.6;
  font-style: normal;
}
.column-empty-icon {
  font-size: 28px;
  margin-bottom: 6px;
  opacity: 0.7;
  filter: grayscale(0.3);
}
.column-empty-text {
  opacity: 0.65;
}

/* ── Project Card ── */
.project-card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: 18px 18px 18px 22px;
  cursor: pointer;
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
  border: none;
  box-shadow: var(--shadow-sm);
  position: relative;
  border-left: 3.5px solid transparent;
}
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  pointer-events: none;
}
.project-card:hover {
  transform: translateY(-3px);
}
.project-card:hover::after { opacity: 1; }
.project-card:active { transform: translateY(-1px) scale(0.995); }
.project-card.dragging {
  opacity: 0;
  transform: scale(0.97);
  transition: none;
  z-index: 10;
}
.project-card.drag-placeholder {
  position: relative;
  opacity: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(156,123,92,0.04) 6px,
    rgba(156,123,92,0.04) 12px
  );
  border: 2px dashed rgba(156,123,92,0.22);
  border-left-width: 2px !important;
  border-left-color: rgba(156,123,92,0.22) !important;
  box-shadow: inset 0 2px 12px rgba(156,123,92,0.06);
  border-radius: var(--r-md);
}
.project-card.drag-placeholder > * {
  opacity: 0.18;
  filter: grayscale(1);
}

/* Priority accent bars */
.project-card.card-p-urgent { border-left-color: var(--clr-urgent); }
.project-card.card-p-high { border-left-color: var(--clr-high); }
.project-card.card-p-medium { border-left-color: var(--clr-medium); }
.project-card.card-p-low { border-left-color: var(--clr-low); }

.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.card-priority {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  flex-shrink: 0;
}
.priority-urgent {
  background: var(--clr-urgent);
  box-shadow: 0 0 0 3px rgba(196,86,74,0.15);
}
.priority-high { background: var(--clr-high); }
.priority-medium { background: var(--clr-medium); }
.priority-low { background: var(--clr-low); }

.card-category {
  font-size: 11px;
  font-weight: 600;
  padding: 2.5px 9px;
  border-radius: 100px;
  background: var(--accent-light);
  color: var(--espresso);
  cursor: pointer;
}
.card-category:hover { opacity: 0.75; }
.card-category-empty { opacity: 0.4; border: 1px dashed var(--border); background: transparent; font-weight: 400; }
.card-category-empty:hover { opacity: 0.7; }
.quick-cat-select { font-size: 11px; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--accent); background: var(--bg-card); max-width: 100px; }
.ai-cat-suggestion { font-size: 11px; margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: #EAF4EA; color: #4A7A4A; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.ai-cat-suggestion:hover { background: #D8ECD8; }
.ai-cat-confidence { font-size: 10px; opacity: 0.7; }
.ai-cat-apply { margin-left: auto; font-size: 10px; color: var(--accent); font-weight: 600; }

.card-title {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.45;
  color: var(--text-primary);
}
.card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px;
}
.card-phase-date { color: #5E8BA8; font-weight: 600; }
.card-deadline.overdue { color: var(--clr-urgent); font-weight: 700; }
.card-deadline.due-soon {
  color: var(--clr-high);
  font-weight: 600;
}
/* Urgency glow on overdue cards */
.project-card:has(.card-deadline.overdue) {
  border-left-color: var(--clr-urgent) !important;
  box-shadow: var(--shadow-sm), -3px 0 12px rgba(196,86,74,0.08);
}
.project-card:has(.card-deadline.due-soon) {
  border-left-color: var(--clr-high) !important;
}

.card-tasks { margin-bottom: 10px; }
.task-progress { display: flex; align-items: center; gap: 8px; }
.progress-bar {
  flex: 1; height: 5px;
  background: var(--bg-inset);
  border-radius: 100px; overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--clr-green);
  border-radius: 100px;
  transition: width 0.4s var(--ease);
}
.progress-text { font-size: 11px; color: var(--text-hint); white-space: nowrap; font-weight: 600; }

/* ── Assignment Badges on Kanban Cards ── */
.card-assignments { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.assignment-badge {
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--bg-inset);
  color: var(--text-muted);
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.assignment-badge.is-active {
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

/* ── Mobile Card Actions (hidden on desktop) ── */
.mobile-card-actions { display: none; }
.mobile-status-select {
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

/* ═══════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════ */
.dashboard-view { padding: 28px 32px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-align: center;
  border: none;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration) var(--ease);
}
.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.stat-number {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 48px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: -2px;
}
.stat-warning .stat-number { color: var(--clr-urgent); }
.stat-info .stat-number { color: var(--clr-medium); }
.stat-success .stat-number { color: var(--clr-green); }
.stat-accent .stat-number { color: var(--clr-blue); }
.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  font-weight: 500;
}
/* Sparkline in stat cards */
.stat-sparkline {
  margin-top: 14px;
  height: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
}
.stat-sparkline .spark-bar {
  flex: 1;
  max-width: 14px;
  border-radius: 4px 4px 2px 2px;
  background: var(--accent);
  min-height: 4px;
  transition: height 0.4s var(--ease-out), opacity 0.3s;
}

/* Theme toggle */
.theme-toggle {
  background: var(--bg-inset);
  border: 1.5px solid var(--border-light);
  border-radius: 100px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all var(--duration) var(--ease);
  display: flex;
  align-items: center;
}
.theme-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.dash-card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  padding: 28px;
  border: none;
  box-shadow: var(--shadow-sm);
}

/* 页面热度排行 */
.view-heat-card { margin-bottom: 20px; }
.view-heat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.view-heat-head h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 17px; margin: 0; color: var(--text-primary); }
.view-heat-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-column); border-radius: 100px; }
.view-heat-tabs button { border: none; background: transparent; cursor: pointer; font-size: 12.5px; font-family: inherit; color: var(--text-secondary); padding: 5px 14px; border-radius: 100px; transition: all 0.18s var(--ease); }
.view-heat-tabs button.active { background: var(--accent); color: #fff; font-weight: 600; }
.view-heat-list { display: flex; flex-direction: column; gap: 10px; }
.view-heat-row { display: flex; align-items: center; gap: 12px; }
.view-heat-rank { flex: 0 0 22px; height: 22px; line-height: 22px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.view-heat-rank.top3 { color: #fff; background: var(--accent); border-radius: 50%; }
.view-heat-name { flex: 0 0 96px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-heat-bar-wrap { flex: 1 1 auto; height: 12px; background: var(--bg-column); border-radius: 100px; overflow: hidden; min-width: 40px; }
.view-heat-bar { height: 100%; background: linear-gradient(90deg, var(--accent-hover), var(--accent)); border-radius: 100px; transition: width 0.5s var(--ease); }
.view-heat-metrics { flex: 0 0 auto; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.view-heat-metrics b { color: var(--text-primary); font-size: 14px; }
.view-heat-foot { margin-top: 14px; font-size: 11.5px; color: var(--text-muted); }
.view-heat-filters { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.view-heat-dept { font-size: 12.5px; padding: 5px 26px 5px 10px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-column); color: var(--text-primary); cursor: pointer; }
.view-heat-row { cursor: pointer; padding: 4px 8px; margin: 0 -8px; border-radius: 10px; transition: background 0.15s; }
.view-heat-row:hover { background: var(--bg-column); }
.view-heat-row.active { background: var(--accent-muted); }
.view-heat-caret { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); }
.view-trend-panel { padding: 10px 10px 6px 42px; }
.view-trend-head { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.view-trend-svg { width: 100%; height: 60px; display: block; background: var(--bg-column); border-radius: 10px; }
.view-trend-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 480px) {
  .view-heat-name { flex-basis: 72px; font-size: 12.5px; }
  .view-heat-metrics { font-size: 11px; }
  .view-trend-panel { padding-left: 10px; }
  .view-heat-head h3 { width: 100%; }
}
.dash-card h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 20px;
  color: var(--dark-roast);
}
.dash-card.full-width { grid-column: 1 / -1; }

.status-bar-item { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bar-label {
  width: 56px; font-size: 12px; color: var(--text-muted);
  text-align: right; font-weight: 500;
}
.bar-track {
  flex: 1; height: 26px;
  background: var(--bg-inset);
  border-radius: var(--r-sm); overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: var(--r-sm);
  transition: width 0.6s var(--ease);
  min-width: 4px;
}
.bar-count { width: 28px; font-size: 15px; font-weight: 700; color: var(--text-secondary); }

.workload-list { display: flex; flex-direction: column; gap: 14px; }
.workload-item {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0;
}
.workload-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--espresso); color: var(--cream);
  font-weight: 700; font-size: 15px;
  box-shadow: var(--shadow-sm);
}
.workload-info { flex: 1; }
.workload-name { font-size: 14px; font-weight: 600; color: var(--dark-roast); }
.workload-detail { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.workload-bar {
  width: 84px; height: 7px;
  background: var(--bg-inset);
  border-radius: 100px; overflow: hidden;
}
.mini-bar { height: 100%; border-radius: 100px; transition: width 0.4s var(--ease); }

.role-tag {
  font-size: 10.5px; font-weight: 600;
  padding: 2.5px 9px; border-radius: 100px;
  display: inline-block; margin-left: 6px;
  letter-spacing: 0.03em;
}

/* ── Upcoming Deadlines ── */
.upcoming-list { display: flex; flex-direction: column; gap: 2px; }
.upcoming-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease);
  border-bottom: 1px solid var(--border-light);
}
.upcoming-item:last-child { border-bottom: none; }
.upcoming-item:hover { background: var(--bg-hover); }
.upcoming-info { flex: 1; min-width: 0; }
.upcoming-title {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.upcoming-meta { display: flex; gap: 12px; font-size: 12px; }
.upcoming-status { font-weight: 600; }
.upcoming-deadline { color: var(--text-muted); font-weight: 500; }
.upcoming-deadline.urgent { color: var(--clr-urgent); font-weight: 700; }

.activity-list { max-height: 400px; overflow-y: auto; }
.activity-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.activity-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-top: 6px; flex-shrink: 0;
}
.activity-content { flex: 1; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.activity-actor { font-weight: 700; color: var(--dark-roast); }
.activity-project { color: var(--accent); font-weight: 500; }
.activity-detail { color: var(--text-muted); }
.activity-time { font-size: 11.5px; color: var(--text-hint); white-space: nowrap; font-weight: 500; }

/* ═══════════════════════════════════════
   SERIES (PROJECT GROUPS)
   ═══════════════════════════════════════ */
.series-view { padding: 28px 32px; }
.series-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
}
.series-header h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px; font-weight: 400; color: var(--dark-roast);
}

.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.series-card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  animation: fadeUp 0.35s var(--ease) both;
}
.series-card:nth-child(2) { animation-delay: 0.05s; }
.series-card:nth-child(3) { animation-delay: 0.10s; }
.series-card:nth-child(4) { animation-delay: 0.15s; }
.series-card:nth-child(5) { animation-delay: 0.20s; }
.series-card:nth-child(6) { animation-delay: 0.25s; }

.series-card:hover {
  border-color: var(--caramel);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.series-card-accent {
  height: 5px;
  width: 100%;
}

.series-card-body {
  padding: 20px 22px 22px;
}

.series-card-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}

.series-type-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  display: inline-block;
}
.series-type-badge.type-long {
  background: rgba(94,139,168,0.12);
  color: #5E8BA8;
}
.series-type-badge.type-short {
  background: rgba(196,168,74,0.12);
  color: #B89A3A;
}

/* ── Series Level (S/A/B) ── */
.series-level-group { margin-bottom: 28px; }
.series-level-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 6px 8px;
  cursor: pointer; border-radius: var(--r-sm);
  transition: background 0.15s var(--ease);
  user-select: none;
}
.series-level-header:hover { background: var(--bg-hover); }
.series-level-badge {
  font-size: 13px; font-weight: 800;
  padding: 3px 14px; border-radius: 100px;
  letter-spacing: 1px;
}
.series-level-badge.level-S { background: linear-gradient(135deg, #C4564A, #D4864A); color: #fff; }
.series-level-badge.level-A { background: linear-gradient(135deg, #C4A84A, #D4B85A); color: #fff; }
.series-level-badge.level-B { background: rgba(168,168,152,0.18); color: var(--text-secondary); }
.series-level-count { font-size: 13px; color: var(--text-muted); }

.series-level-tag {
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 100px;
  letter-spacing: 0.5px;
}
.series-level-tag.level-S { background: rgba(196,86,74,0.12); color: #C4564A; }
.series-level-tag.level-A { background: rgba(196,168,74,0.12); color: #B89A3A; }
.series-level-tag.level-B { background: rgba(168,168,152,0.10); color: var(--text-muted); }

.series-category {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--accent-light);
  color: var(--espresso);
}

.series-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.series-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.series-card-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 14px;
}

.series-stat {
  display: flex; flex-direction: column; align-items: center;
}
.series-stat-num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--dark-roast);
  line-height: 1.2;
}
.series-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}

.series-progress {
  margin-top: 4px;
}
.series-progress .progress-bar {
  height: 6px;
}
.series-phase-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.series-phase-seg { min-width: 4px; transition: width .3s; }
.sp-phase-health { display: flex; align-items: center; gap: 3px; font-size: 11px; white-space: nowrap; margin-left: auto; padding-left: 8px; }
.ph-days { font-weight: 700; padding: 1px 6px; border-radius: 8px; }
.ph-ok { color: #4A7A4A; background: #EAF4EA; }
.ph-warn { color: #9A7020; background: #FDF3E0; }
.ph-danger { color: #A03030; background: #FDE8E8; }
.ph-avg { color: var(--text-hint); font-size: 10px; }
.sp-cat { font-size: 10px; padding: 1px 6px; border-radius: 8px; border: 1px solid; }

.series-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.empty-sub {
  font-size: 13px;
  color: var(--text-hint);
  margin-top: 6px;
}

/* ── Series Detail Modal ── */
.series-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}

.series-detail-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  padding: 14px 16px;
  background: var(--bg-inset);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-light);
  margin-bottom: 20px;
}

.series-detail-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.series-project-list {
  display: flex; flex-direction: column;
  gap: 2px;
}

.series-project-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease);
  border-bottom: 1px solid var(--border-light);
}
.series-project-item:last-child { border-bottom: none; }
.series-project-item:hover { background: var(--bg-hover); }

.sp-info { flex: 1; min-width: 0; }
.sp-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-meta {
  display: flex; gap: 12px;
  font-size: 12.5px;
}
.sp-status { font-weight: 600; }
.sp-deadline { color: var(--text-muted); }
.sp-deadline.overdue { color: var(--clr-urgent); font-weight: 600; }

.sp-tasks {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}

.sp-assignees {
  display: flex; gap: 4px; flex-shrink: 0;
}

/* ── Series Done Section (折叠区) ── */
.series-done-section {
  margin-top: 8px;
  border-top: 1px dashed var(--border-light);
  padding-top: 4px;
}
.series-done-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background 0.15s var(--ease);
  user-select: none;
}
.series-done-toggle:hover { background: var(--bg-hover); }
.series-done-arrow { font-size: 10px; color: var(--text-light); }
.sp-done-item { opacity: 0.55; }
.sp-done-item .sp-title { text-decoration: line-through; }
.sp-delivered-tag {
  font-size: 11px; color: var(--clr-green); font-weight: 600;
}

/* ── Card Series Tag (on kanban) ── */
.card-series-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Color Picker ── */
.color-picker {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.color-option {
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.2s var(--ease);
  box-shadow: var(--shadow-xs);
}
.color-option:hover {
  transform: scale(1.15);
}
.color-option.selected {
  border-color: var(--dark-roast);
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--dark-roast);
}

/* ═══════════════════════════════════════
   CALENDAR VIEW
   ═══════════════════════════════════════ */
.calendar-view { padding: 24px 32px; }

.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--dark-roast);
  min-width: 140px;
  text-align: center;
}

.calendar-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Calendar Grid ── */
.cal-grid-wrap {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
  margin-bottom: 28px;
}
.cal-grid { min-width: 700px; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-weekday {
  padding: 12px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cal-cell {
  min-height: 100px;
  height: auto;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  transition: background 0.15s var(--ease);
  cursor: default;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--bg-hover); }

.cal-cell.other-month {
  background: var(--bg-inset);
  opacity: 0.45;
}

.cal-cell.is-today {
  background: rgba(156,123,92,0.06);
}

/* Rest day (大小休 + 法定假日) */
.cal-cell.is-rest { background: rgba(196,86,74,0.04); }
.cal-cell.is-rest .cal-day-num { color: var(--clr-urgent); }
.cal-cell.is-holiday { background: rgba(196,86,74,0.08); }
.cal-cell.is-adjusted-work { background: rgba(156,123,92,0.06); }

.cal-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-rest-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 0px 4px;
  border-radius: 3px;
  line-height: 1.6;
}
.cal-rest-tag.tag-rest {
  background: rgba(196,86,74,0.12);
  color: var(--clr-urgent);
}
.cal-rest-tag.tag-work {
  background: rgba(156,123,92,0.15);
  color: var(--accent);
}

.cal-day-num.today-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--dark-roast);
  color: var(--cream);
  font-size: 12px;
}

.cal-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cal-event {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}
.cal-event:hover {
  opacity: 0.85;
  transform: scale(1.02);
}
.cal-event-stage {
  opacity: 0.75;
  font-weight: 500;
  flex-shrink: 0;
}

.cal-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.6);
}

.cal-more {
  font-size: 10px;
  color: var(--text-hint);
  font-weight: 600;
  padding: 1px 4px;
}

/* ── Team Timeline ── */
.timeline-section {
  margin-top: 8px;
}

.timeline-heading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--dark-roast);
  margin-bottom: 16px;
}

.timeline-wrap {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.timeline-table {
  min-width: 960px;
}

.timeline-header-row {
  display: flex;
  border-bottom: 2px solid var(--border);
  background: var(--bg-inset);
  position: sticky;
  top: 68px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.timeline-header-row .timeline-name-col {
  z-index: 11;
  background: var(--bg-inset);
}

.timeline-row {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
  background: var(--bg-surface);
}
.timeline-row:last-child { border-bottom: none; }
.timeline-row:hover { background: rgba(156,123,92,0.02); }

.timeline-name-col {
  width: 160px;
  flex-shrink: 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 2px solid var(--border);
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--bg-surface);
}
.timeline-row:hover .timeline-name-col {
  background: #FEFCF8;
}

.timeline-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.timeline-member-info { min-width: 0; }
.timeline-member-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-member-role {
  font-size: 11px;
  color: var(--text-hint);
  font-weight: 500;
}

.timeline-days {
  flex: 1;
  display: flex;
  position: relative;
}

.timeline-day-header {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border-right: 1px solid var(--border-light);
}
.timeline-day-header:last-child { border-right: none; }
.timeline-day-header.is-today {
  background: rgba(156,123,92,0.12);
  color: var(--dark-roast);
  font-weight: 700;
}
.timeline-day-header.is-weekend,
.timeline-day-header.is-rest {
  color: var(--clr-urgent);
  opacity: 0.6;
}

.timeline-days-body {
  min-height: 44px;
}

.timeline-day-cell {
  flex: 1;
  border-right: 1px solid var(--border-light);
}
.timeline-day-cell:last-child { border-right: none; }
.timeline-day-cell.is-today {
  background: rgba(156,123,92,0.06);
}
.timeline-day-cell.is-weekend,
.timeline-day-cell.is-rest {
  background: rgba(196,86,74,0.02);
}

.timeline-bar {
  position: absolute;
  height: 24px;
  border-radius: 5px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.15s, filter 0.15s;
  box-shadow: var(--shadow-xs);
  z-index: 1;
}
.timeline-bar:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.timeline-bar.is-done {
  opacity: 0.35;
}

.bar-text {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Phase-segmented timeline bars */
.timeline-bar.is-planned {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.35) 3px, rgba(255,255,255,0.35) 6px) !important;
  border: 1.5px dashed rgba(255,255,255,0.6);
  opacity: 0.7;
}
.timeline-bar.is-active-phase {
  box-shadow: 0 0 0 2px var(--phase-color, currentColor), var(--shadow-sm);
  animation: phase-pulse 2.5s ease-in-out infinite;
}
@keyframes phase-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
.timeline-today-line {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: #C4564A; z-index: 3; pointer-events: none;
  opacity: 0.7;
}
.timeline-today-line::before {
  content: ''; position: absolute; top: -3px; left: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #C4564A;
}
.timeline-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.gantt-view-toggle {
  display: flex; gap: 4px;
}
.gantt-view-toggle .btn { padding: 4px 12px; font-size: 12px; }
.phase-legend { flex-wrap: wrap; }
.phase-filter-bar { gap: 5px; }
.phase-filter-pill {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 10px; border-radius: 14px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--border); background: transparent;
  transition: all .15s; user-select: none; white-space: nowrap;
}
.phase-filter-pill:hover { opacity: 0.85; transform: scale(1.03); }
.phase-filter-pill:not(.active) { opacity: 0.45; background: transparent !important; }

/* Calendar events with phase info */
.cal-event { border-radius: 3px; padding: 1px 4px; margin-bottom: 1px; font-size: 10px; cursor: pointer; display: flex; align-items: center; gap: 2px; line-height: 1.4; transition: opacity .15s; overflow: hidden; color: #fff; }
.cal-event:hover { opacity: 0.8; }
.cal-event-planned { opacity: 0.55; border: 1px dashed rgba(255,255,255,0.5); }
.cal-event-deadline { font-weight: 700; }
.cal-event-done { opacity: 0.45; text-decoration: line-through; }
.cal-ev-icon { flex-shrink: 0; font-size: 10px; }
.cal-event-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 10px; color: var(--text-hint); text-align: center; cursor: default; padding: 1px 0; }

/* Phase schedule table in project detail */
.phase-schedule-section { }
.phase-schedule-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 12px; }
.phase-schedule-header { display: flex; background: var(--bg-secondary); font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.phase-schedule-row { display: flex; border-bottom: 1px solid var(--border-light, #f0ebe4); align-items: center; }
.phase-schedule-row:last-child { border-bottom: none; }
.phase-schedule-row:hover { background: var(--bg-secondary); }
.ps-col { flex: 1; padding: 6px 8px; display: flex; align-items: center; min-width: 0; }
.ps-phase { flex: 1.2; font-weight: 600; gap: 4px; white-space: nowrap; border-left: 3px solid var(--ph-color, transparent); }
.ps-phase-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ps-date-input { width: 100%; border: 1px solid var(--border); border-radius: 4px; padding: 3px 4px; font-size: 11px; background: #fff; color: var(--text-primary); }
.ps-date-input:disabled { background: var(--bg-secondary); color: var(--text-hint); cursor: not-allowed; }
.ps-actual { color: var(--text-secondary); font-size: 11px; justify-content: center; }
.ps-done-check { color: var(--success); font-weight: 700; margin-left: 4px; }

/* ── Calendar Responsive ── */
@media (max-width: 1024px) {
  .calendar-toolbar { flex-direction: column; gap: 12px; align-items: flex-start; }
  .cal-cell { min-height: 70px; }
}
@media (max-width: 768px) {
  .calendar-view { padding: 16px; }
  .cal-cell { min-height: 56px; padding: 4px; }
  .cal-event { font-size: 10px; padding: 2px 4px; }
  .timeline-name-col { width: 120px; }
}

/* ═══════════════════════════════════════
   MEMBERS
   ═══════════════════════════════════════ */
.members-view { padding: 28px 32px; }
.members-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
}
.members-header h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--dark-roast);
}
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.member-card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: all 0.3s var(--ease);
}
.member-card:hover {
  border-color: var(--caramel);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.member-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 20px; font-weight: 700;
  flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.member-info { flex: 1; }
.member-info h4 { font-size: 15px; margin-bottom: 5px; font-weight: 600; color: var(--dark-roast); }
.member-info p { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }
.member-actions { display: flex; gap: 2px; }

/* ═══════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════ */
.settings-view { padding: 28px 32px; }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.settings-card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  padding: 36px;
  border: none;
  box-shadow: var(--shadow-sm);
}
.settings-card.span-2 { grid-column: span 2; }
/* Settings entry cards (overview tiles) */
.settings-entry-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-surface); border-radius: var(--r-lg);
  padding: 24px 28px; border: 1px solid var(--border);
  box-shadow: var(--shadow-xs); cursor: pointer;
  transition: all 0.2s ease;
}
.settings-entry-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(156, 123, 92, 0.12);
  transform: translateY(-2px);
}
.settings-entry-icon { font-size: 32px; flex-shrink: 0; }
.settings-entry-info { flex: 1; min-width: 0; }
.settings-entry-info h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 18px; font-weight: 400; color: var(--dark-roast); margin: 0 0 4px;
}
.settings-entry-info p {
  font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.4;
}
.settings-entry-count {
  font-size: 13px; font-weight: 600; color: var(--accent);
  background: rgba(156, 123, 92, 0.1); padding: 4px 12px;
  border-radius: 12px; white-space: nowrap; flex-shrink: 0;
}
.settings-entry-arrow {
  font-size: 18px; color: var(--text-hint); flex-shrink: 0;
  transition: transform 0.2s;
}
.settings-entry-card:hover .settings-entry-arrow { transform: translateX(3px); color: var(--accent); }
/* Settings sub-view header */
.settings-sub-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
}
.settings-sub-header h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px; font-weight: 400; color: var(--dark-roast);
  flex: 1; margin: 0;
}
.settings-card h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 20px; font-weight: 400; margin-bottom: 8px; color: var(--dark-roast);
}
.settings-desc { color: var(--text-muted); margin-bottom: 28px; font-size: 14px; line-height: 1.6; }
.api-key-display { display: inline-block; padding: 6px 12px; background: var(--bg-inset, #f5f0eb); border-radius: 6px; font-family: monospace; font-size: 13px; cursor: pointer; border: 1px solid var(--border); word-break: break-all; }
.api-key-display:hover { background: var(--bg-secondary); }
.api-doc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.api-doc-table th, .api-doc-table td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; }
.api-doc-table th { background: var(--bg-secondary); font-weight: 600; color: var(--text-primary); }
.api-doc-table code { background: var(--bg-inset, #f5f0eb); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.api-example-wrap { position: relative; }
.api-copy-btn {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  background: rgba(255,255,255,0.15); color: #d4c8bc; border: 1px solid rgba(255,255,255,0.2);
  padding: 3px 10px; border-radius: 5px; font-size: 11px; cursor: pointer;
  transition: all .15s;
}
.api-copy-btn:hover { background: rgba(255,255,255,0.25); color: #fff; }
.api-example { background: var(--dark-roast, #4A3C31); color: #e8e0d8; padding: 12px 16px; border-radius: 8px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
.api-log-wrap { max-height: 400px; overflow-y: auto; border-radius: 8px; border: 1px solid var(--border); }
.api-log-table { margin-top: 0 !important; }
.api-log-table td { font-size: 12px; }

/* ── API Key Management ── */
.api-keys-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.api-key-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  padding: 14px 16px;
  background: var(--bg-surface);
  transition: border-color .15s;
}
.api-key-card:hover { border-color: var(--border-focus); }
.api-key-card.status-pending { border-left: 3px solid var(--clr-medium); }
.api-key-card.status-revoked { opacity: .55; }
.api-key-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.api-key-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.api-key-card-title strong { font-size: 14px; color: var(--dark-roast); }
.api-key-card-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.api-key-card-key {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-inset); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px;
}
.api-key-card-key code { font-size: 12px; color: var(--espresso); word-break: break-all; flex: 1; }
.api-key-card-scopes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.api-key-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.api-key-status {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500;
}
.api-key-status.active { background: #e8f5e9; color: #4caf50; }
.api-key-status.pending { background: #fff8e1; color: #f9a825; }
.api-key-status.revoked { background: #fbe9e7; color: #e53935; }

.scope-chip {
  display: inline-block; font-size: 11px; padding: 2px 8px;
  border-radius: 10px; background: var(--accent-light); color: var(--accent);
  font-weight: 500; white-space: nowrap;
}

/* Scope checkbox grid in modal */
.scope-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.scope-group-label {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  margin-top: 8px; padding-bottom: 2px; border-bottom: 1px solid var(--border-light);
}
.scope-group-label:first-child { margin-top: 0; }
.scope-group-items { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.scope-check {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 6px; border-radius: 6px; font-size: 13px; color: var(--text-primary);
  transition: background .12s;
}
.scope-check:hover { background: var(--bg-hover); }
.scope-checkbox {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--mocha); display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.scope-checkbox.checked {
  background: var(--accent); border-color: var(--accent);
}
.scope-checkbox.checked::after {
  content: '✓'; color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.mcp-status-info { background: var(--bg-inset); border-radius: var(--r-md); padding: 14px 16px; margin: 12px 0; }
.mcp-status-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-light); }
.mcp-status-row:last-child { border-bottom: none; }
.mcp-label { font-size: 13px; color: var(--text-secondary); }
.mcp-value { font-size: 13px; font-weight: 600; color: var(--dark-roast); }
.mcp-config-list { display: flex; flex-direction: column; gap: 10px; }
.mcp-config-item { background: var(--bg-inset); border-radius: var(--r-md); padding: 12px 14px; }
.mcp-config-header { display: flex; align-items: center; gap: 10px; }
.mcp-config-name { font-size: 14px; font-weight: 600; color: var(--dark-roast); }
.mcp-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.mcp-badge-ok { background: var(--clr-green-bg, #e8f5e9); color: var(--clr-green, #4caf50); }
.mcp-badge-none { background: var(--bg-card); color: var(--text-hint); }
.mcp-config-url { font-size: 11px; color: var(--text-hint); margin-top: 4px; word-break: break-all; font-family: monospace; }
.settings-hint {
  margin-top: 28px; padding: 20px;
  background: var(--bg-inset);
  border-radius: var(--r-md); font-size: 13px; color: var(--text-secondary);
  line-height: 1.7; border: 1px solid var(--border-light);
}
.settings-hint ol, .settings-hint ul { margin: 10px 0 0 20px; }
.settings-hint li { margin-bottom: 5px; }
.settings-hint p { margin-bottom: 10px; }
.settings-hint code {
  background: var(--cream); padding: 1px 6px; border-radius: 4px;
  font-family: 'Courier New', monospace; font-size: 12px; color: var(--accent);
}
.settings-note { color: var(--clr-urgent); font-weight: 500; }
/* Members inside settings */
.settings-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.settings-member-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-inset); border-radius: var(--r-md);
  padding: 14px; border: 1px solid var(--border-light);
}
.settings-member-card .member-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 0;
}
.settings-member-card .member-info { flex: 1; min-width: 0; }
.settings-member-card .member-info h4 { font-size: 14px; margin: 0 0 2px; font-weight: 600; color: var(--dark-roast); }
.settings-member-card .member-info .role-tag { font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.settings-member-card .member-info p { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; }
.settings-member-card .member-actions { display: flex; gap: 4px; flex-shrink: 0; }
/* Monitor panel */
.monitor-table {
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.monitor-table-header {
  display: flex; gap: 0; padding: 10px 16px;
  background: var(--bg-inset); border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
}
.monitor-table-row {
  display: flex; gap: 0; padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px; color: var(--text-primary);
  transition: background 0.15s;
}
.monitor-table-row:last-child { border-bottom: none; }
.monitor-table-row:hover { background: var(--bg-inset); }
.monitor-col-status { width: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.monitor-col-name { width: 200px; flex-shrink: 0; font-weight: 600; color: var(--dark-roast); }
.monitor-col-desc { flex: 1; color: var(--text-secondary); font-size: 13px; }
/* 正常：慢而平静，轻微变亮 */
@keyframes breathOk {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.55); }
}
/* 运行中：匀速节律，变亮 */
@keyframes breathOnline {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.6); }
}
/* 未配置：极慢极微弱，几乎察觉不到 */
@keyframes breathUnconfigured {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.25); }
}
/* 异常：快速急促，变暗，营造紧迫感 */
@keyframes breathError {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(0.5); }
}
.monitor-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.15);
}
.monitor-dot.dot-ok          { animation: breathOk           3.5s ease-in-out infinite; }
.monitor-dot.dot-online       { animation: breathOnline       2s   ease-in-out infinite; }
.monitor-dot.dot-unconfigured { animation: breathUnconfigured 5s   ease-in-out infinite; }
.monitor-dot.dot-error        { animation: breathError        0.9s ease-in-out infinite; }
.monitor-dot.dot-offline      { animation: breathError        0.9s ease-in-out infinite; }
.monitor-legend {
  display: flex; gap: 20px; margin-top: 16px; font-size: 12px; color: var(--text-muted);
}
.monitor-legend span { display: flex; align-items: center; gap: 6px; }
.monitor-today-bar {
  display: flex; gap: 24px; padding: 16px 20px;
  background: var(--bg-inset); border-radius: var(--r-md);
  border: 1px solid var(--border-light);
}
.monitor-today-item { display: flex; align-items: center; gap: 10px; }
.monitor-today-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.monitor-today-value { font-size: 14px; font-weight: 500; color: var(--dark-roast); }
.is-rest-text { color: var(--clr-urgent); }
/* Automation task list */
.automation-task-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.automation-task-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border-light); transition: background 0.15s;
}
.automation-task-row:last-child { border-bottom: none; }
.automation-task-row:hover { background: var(--bg-inset); }
.automation-task-icon { font-size: 20px; width: 32px; text-align: center; flex-shrink: 0; }
.automation-task-info { flex: 1; min-width: 0; }
.automation-task-name { font-weight: 600; font-size: 13px; color: var(--dark-roast); }
.automation-task-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.automation-task-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.automation-task-interval {
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: rgba(156,123,92,0.1); padding: 2px 8px; border-radius: 10px;
}
.automation-task-time { font-size: 11px; color: var(--text-muted); }
.automation-task-time.has-error { color: var(--clr-urgent); }
.automation-task-result { flex-shrink: 0; max-width: 200px; }
.automation-result-badge {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.automation-result-badge.result-ok { background: rgba(34,197,94,0.1); color: #16a34a; }
.automation-result-badge.result-error { background: rgba(239,68,68,0.1); color: #dc2626; }
.automation-result-badge.result-info { background: rgba(59,130,246,0.1); color: #2563eb; }
/* Cookie status */
.cookie-status-list { display: flex; flex-direction: column; gap: 12px; }
.cookie-status-row {
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border-light); background: var(--surface);
}
.cookie-account-name { font-weight: 600; font-size: 14px; color: var(--dark-roast); margin-bottom: 8px; }
.cookie-status-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cookie-badge {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px;
}
.cookie-badge.cookie-ok { background: rgba(34,197,94,0.12); color: #16a34a; }
.cookie-badge.cookie-warning { background: rgba(245,158,11,0.12); color: #d97706; }
.cookie-badge.cookie-danger { background: rgba(239,68,68,0.12); color: #dc2626; }
.cookie-badge.cookie-expired { background: rgba(239,68,68,0.2); color: #dc2626; }
.cookie-badge.cookie-unconfigured { background: rgba(156,163,175,0.15); color: #6b7280; }
.cookie-badge.cookie-unknown { background: rgba(156,163,175,0.15); color: #6b7280; }
.cookie-expiry-date { font-size: 12px; color: var(--text-muted); }
.cookie-progress-bar {
  margin-top: 8px; height: 4px; border-radius: 2px;
  background: rgba(156,123,92,0.1); overflow: hidden;
}
.cookie-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.cookie-progress-fill.cookie-ok { background: #22c55e; }
.cookie-progress-fill.cookie-warning { background: #f59e0b; }
.cookie-progress-fill.cookie-danger { background: #ef4444; }
.cookie-progress-fill.cookie-expired { background: #ef4444; }
.cookie-help-hint {
  margin-top: 14px; padding: 10px 14px; font-size: 12px; color: var(--text-muted);
  background: rgba(156,123,92,0.04); border: 1px dashed var(--border);
  border-radius: var(--r-md); line-height: 1.6;
}
.cookie-help-hint strong { color: var(--text-secondary); }
/* Feedback management inside settings */
.settings-feedback-list { display: flex; flex-direction: column; gap: 14px; }
.settings-feedback-item {
  padding: 16px 18px;
  background: var(--bg-inset); border-radius: var(--r-md);
  border: 1px solid var(--border-light); font-size: 13px;
}
.settings-feedback-item .feedback-item-header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.settings-feedback-item .feedback-item-title { font-weight: 600; color: var(--dark-roast); margin-bottom: 4px; }
.settings-feedback-item .feedback-item-content { color: var(--text-secondary); line-height: 1.5; font-size: 12px; }
.webhook-url-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-inset); padding: 10px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
}
.webhook-url-box code {
  flex: 1; font-size: 13px; font-family: 'Courier New', monospace;
  color: var(--accent); word-break: break-all;
}
.json-example {
  background: var(--dark-roast); color: #e8dfd2; padding: 14px 18px;
  border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.7;
  font-family: 'Courier New', monospace; overflow-x: auto; margin: 8px 0;
  white-space: pre;
}
.settings-ref-hint { font-size: 12px; color: var(--text-hint); }

/* ── Holiday Management ── */
.holiday-add-row {
  display: flex; gap: 8px; margin-bottom: 10px; align-items: center;
}
.holiday-add-row input {
  padding: 7px 12px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-input); color: var(--text-primary); font-size: 13px;
  font-family: inherit; outline: none;
}
.holiday-add-row input:focus { border-color: var(--mocha); }
.holiday-list {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border-light); border-radius: var(--r-sm);
}
.holiday-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.holiday-item:last-child { border-bottom: none; }
.holiday-item:hover { background: var(--bg-hover); }
.holiday-date { font-family: 'Courier New', monospace; font-size: 12.5px; color: var(--text-muted); min-width: 100px; }
.holiday-name { flex: 1; font-weight: 500; color: var(--text-primary); }

/* ═══════════════════════════════════════
   FORMS
   ═══════════════════════════════════════ */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  background: rgba(156,123,92, 0.06);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all var(--duration) var(--ease);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-hint); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: transparent;
  background: rgba(156,123,92, 0.10);
  box-shadow: 0 0 0 3.5px rgba(156,123,92,0.12);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ═══════════════════════════════════════
   MODALS
   ═══════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(44,34,24,0.25);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 24px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  /* 阻止触摸穿透到底层页面（iOS Safari） */
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}
/* Modal 本身允许滚动 */
.modal { touch-action: auto; }
.modal-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.modal {
  background: var(--bg-surface);
  border-radius: var(--r-xl);
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
  border: none;
  box-shadow: var(--shadow-xl);
}
.modal-large { max-width: 920px; }

/* ── Slide-in Panel (project detail) ── */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
.modal-overlay.slide-in {
  justify-content: flex-end;
  padding: 0;
}
.modal-overlay.slide-in .modal {
  max-width: 580px;
  height: 100vh;
  max-height: 100vh;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  animation: slideInRight 0.35s var(--ease-out) both;
  box-shadow: -8px 0 32px rgba(44,34,24,0.12), -2px 0 8px rgba(44,34,24,0.06);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border-light);
}
.modal-header h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 19px; font-weight: 400; color: var(--dark-roast);
}
.modal-close {
  background: none; border: none;
  color: var(--text-hint); font-size: 26px;
  cursor: pointer; padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: all 0.2s;
  line-height: 1;
}
.modal-close:hover { color: var(--text-secondary); background: var(--bg-hover); }
.modal-body { padding: 28px; }
.modal-footer {
  padding: 18px 28px;
  border-top: 1px solid var(--border-light);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ═══════════════════════════════════════
   PROJECT DETAIL MODAL
   ═══════════════════════════════════════ */
.detail-header-left { display: flex; align-items: center; gap: 12px; }
.detail-header-right { display: flex; align-items: center; gap: 6px; }
.detail-body { display: grid; grid-template-columns: 1fr 280px; gap: 28px; }
.detail-sidebar {
  border-left: 1px solid var(--border-light);
  padding-left: 28px;
}
.detail-section { margin-bottom: 28px; }
.detail-section h4 {
  font-size: 14px; font-weight: 700;
  margin-bottom: 14px; color: var(--text-primary);
}
.section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.section-header h4 { margin-bottom: 0; }
.detail-info-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; font-size: 13.5px; margin-bottom: 14px;
}
.detail-info-grid div { padding: 6px 0; }
.detail-info-grid strong { color: var(--text-secondary); font-weight: 500; }
.detail-desc {
  font-size: 14px; color: var(--text-secondary); line-height: 1.7;
  padding: 14px 16px; background: var(--bg-inset);
  border-radius: var(--r-sm); border: 1px solid var(--border-light);
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* URL 描述：卡片式可点击链接 */
.detail-desc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(156, 123, 92, 0.06) 0%, rgba(156, 123, 92, 0.02) 100%);
  border: 1px solid rgba(156, 123, 92, 0.25);
  transition: all 0.2s var(--ease);
}
.detail-desc-link:hover {
  border-color: var(--caramel);
  background: linear-gradient(135deg, rgba(156, 123, 92, 0.1) 0%, rgba(156, 123, 92, 0.04) 100%);
}
.desc-link-icon {
  flex-shrink: 0;
  font-size: 18px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(156, 123, 92, 0.12);
  border-radius: 50%;
}
.desc-link-text {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.5;
  /* 桌面端最多显示2行，避免超长URL撑高卡片 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-link-text:hover {
  text-decoration: underline;
  color: var(--mocha);
}
.desc-link-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.desc-link-btn {
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Assignment Pipeline (Project Detail) ── */
.assignment-hint {
  font-size: 12.5px;
  color: var(--text-hint);
  margin-bottom: 16px;
  line-height: 1.5;
}

.assignment-pipeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pipeline-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  transition: all 0.3s var(--ease);
}

.pipeline-stage.active {
  border-color: var(--accent);
  background: rgba(47,111,94,0.06);
  box-shadow: 0 0 0 3px rgba(47,111,94,0.10);
}

.pipeline-stage.completed {
  opacity: 0.55;
}

.stage-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stage-icon { font-size: 17px; }

.stage-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.active-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--accent);
  color: white;
  letter-spacing: 0.02em;
}

.done-tag {
  font-size: 11px;
  color: var(--clr-green);
  font-weight: 700;
}

.stage-select {
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  min-width: 160px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.stage-select:focus { border-color: var(--mocha); }

/* ── Assignment Form (Create/Edit Modal) ── */
.assignment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.assignment-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.assignment-role-label {
  width: 90px;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.assignment-row select {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.assignment-row select:focus { border-color: var(--mocha); }

/* Cameraman multi-select (expanded row) */
.assignment-row-expanded {
  flex-wrap: wrap;
}
.cameraman-config {
  width: 100%;
  flex: 1;
}
.cameraman-count-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cam-count-label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.cam-count-btns {
  display: flex;
  gap: 4px;
}
.cam-count-btns button {
  padding: 4px 14px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.cam-count-btns button.active {
  background: var(--dark-roast);
  color: var(--cream);
  border-color: var(--dark-roast);
}
.cam-count-btns button:hover:not(.active) {
  border-color: var(--mocha);
  background: var(--bg-hover);
}
.cameraman-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cam-slot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cam-slot-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  min-width: 36px;
  text-align: right;
}
.cam-slot select {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.cam-slot select:focus { border-color: var(--mocha); }

/* Cameraman in pipeline detail */
.cameraman-detail-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.cam-detail-slot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cam-detail-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  min-width: 32px;
  text-align: right;
}
.cam-detail-slot .stage-select { flex: 1; }
.cam-add-btn {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 11px !important;
  padding: 3px 10px !important;
}

/* Sub cameraman badge on kanban card */
.assignment-badge.assignment-sub {
  opacity: 0.75;
  font-size: 10.5px;
}

.empty-hint {
  text-align: center; color: var(--text-hint);
  padding: 24px; font-size: 13px; font-style: italic;
}

/* ── Comments ── */
.comment-input { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; }
.comment-author-tag {
  padding: 5px 12px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1.5px solid var(--accent);
}
.comment-input input {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-input); color: var(--text-primary);
  font-size: 13px; font-family: inherit; outline: none;
}
.comment-input input:focus { border-color: var(--mocha); }
.comment-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13.5px; line-height: 1.55;
}
.comment-item strong { color: var(--accent); margin-right: 8px; font-weight: 600; }
.comment-item small { display: block; color: var(--text-hint); font-size: 11px; margin-top: 3px; }

/* ── Sidebar Logs ── */
.log-list { max-height: 500px; overflow-y: auto; }
.log-item {
  display: flex; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px; line-height: 1.6;
  color: var(--text-secondary);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.log-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--caramel); margin-top: 6px; flex-shrink: 0;
}
.log-actor { font-weight: 700; color: var(--dark-roast); }
.log-time { font-size: 11px; color: var(--text-hint); }

/* ═══════════════════════════════════════
   MOBILE BOTTOM NAV
   ═══════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 18px;
  z-index: 9999;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(44,34,24,0.12);
  padding: 4px 6px;
  border-radius: 20px;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
/* PWA独立模式：贴底全宽 */
@media (display-mode: standalone) {
  .mobile-bottom-nav {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(44,34,24,0.08);
    padding: 4px 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  }
}
.mobile-bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 4px 8px;
  min-height: 48px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mobile-bottom-nav button.active {
  color: var(--accent);
}
.mobile-nav-icon { font-size: 20px; line-height: 1.2; }
.mobile-nav-label { font-size: 10px; font-weight: 600; }

/* ── 移动端「我的」面板 ── */
.mobile-profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mobile-profile-panel {
  background: var(--surface, #fff);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 24px 20px calc(env(safe-area-inset-bottom, 0px) + 80px);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
}
.mobile-profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.mobile-profile-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; font-weight: 700;
  flex-shrink: 0;
}
.mobile-profile-info { flex: 1; min-width: 0; }
.mobile-profile-name {
  font-size: 17px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.mobile-profile-role {
  font-size: 13px; color: var(--text-muted); margin-top: 3px;
}
.mobile-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-profile-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.mobile-profile-btn:active { background: rgba(0,0,0,0.06); }
.mobile-profile-hint {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-hint);
}
.mobile-profile-btn-danger { color: var(--clr-urgent, #e11d48); }

/* 面板滑入动画 */
.mobile-profile-slide-enter-active { transition: all 0.28s ease-out; }
.mobile-profile-slide-leave-active { transition: all 0.22s ease-in; }
.mobile-profile-slide-enter-from,
.mobile-profile-slide-leave-to { opacity: 0; }
.mobile-profile-slide-enter-from .mobile-profile-panel,
.mobile-profile-slide-leave-to .mobile-profile-panel { transform: translateY(100%); }

/* ── 移动端「更多」面板 ── */
.mobile-more-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}
.mobile-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mobile-more-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 16px 4px;
  background: var(--bg-column, rgba(0,0,0,0.03));
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-more-grid button span { font-size: 24px; line-height: 1; }
.mobile-more-grid button:active { transform: scale(0.95); }
.mobile-more-grid button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft, rgba(47,111,94,0.08));
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 1400px) {
  .kanban-board { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .kanban-board { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Tablet ── */
@media (max-width: 768px) {
  .kanban-board {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
  }
  .kanban-board::-webkit-scrollbar { height: 4px; }
  .kanban-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  .kanban-column {
    min-width: 280px;
    max-width: 320px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .app-header {
    flex-direction: column; height: auto;
    padding: 14px 20px; gap: 12px;
  }
  .header-left, .header-right { width: 100%; }
  .header-right { justify-content: space-between; }
  .search-box input { width: 100%; }
  .search-box input:focus { width: 100%; }
  .detail-body { grid-template-columns: 1fr; }
  .detail-sidebar {
    border-left: none;
    border-top: 1px solid var(--border-light);
    padding-left: 0; padding-top: 20px;
  }
  .dashboard-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .kanban-view, .dashboard-view, .members-view, .settings-view { padding: 16px; }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  /* -- Show mobile bottom nav, hide desktop nav -- */
  .mobile-bottom-nav { display: flex; }
  .nav-tabs-desktop { display: none !important; }

  /* -- Body bottom padding for bottom nav (nav height + browser toolbar clearance) -- */
  body { padding-bottom: 110px; }

  /* -- Header simplification -- */
  .app-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    padding: 10px 14px;
    gap: 8px;
  }
  /* 把 header-left / header-right 摊平成 app-header 的直接子项，
     第一行：logo + 部门切换（左） …… 主题切换 + 在线人数（右）；第二行：搜索 + 新建 */
  .header-left, .header-right { display: contents; }
  .logo { order: 1; font-size: 17px; min-width: 0; flex: 0 0 auto; }
  .dept-switcher { order: 2; }
  .dept-switcher select { font-size: 12px; padding: 3px 20px 3px 7px; }
  .theme-switch { order: 3; margin-left: auto; }       /* 推到右侧 */
  .theme-switch button { font-size: 12px; padding: 3px 6px; }
  .online-indicator { order: 4; padding: 3px 8px; gap: 3px; font-size: 11px; flex: 0 0 auto; }
  .online-indicator .online-label { display: none; }   /* 只留「🟢 N」，省地方 */
  .search-box { order: 5; flex: 1 1 60%; }
  .search-box input { width: 100% !important; font-size: 13px; padding: 7px 10px 7px 32px; }
  .search-box input:focus { width: 100% !important; }
  .search-box .search-icon { left: 10px; }
  .btn-new-project { order: 6; flex: 0 0 auto; padding: 7px 12px; font-size: 12px; white-space: nowrap; }
  /* 帮助/设置/头像 在底部导航里都有了，顶栏不再重复；在线人数和部门切换保留 */
  .header-icon-btn,
  .header-right .user-badge { display: none !important; }

  /* -- Kanban: horizontal scroll -- */
  .kanban-view { padding: 12px; }
  .kanban-filters {
    flex-wrap: wrap;
    gap: 6px;
  }
  .kanban-filters select { padding: 5px 8px; font-size: 12px; flex: 1; min-width: 0; }
  .filter-count { width: 100%; text-align: right; font-size: 12px; }

  .kanban-board {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    min-height: auto;
    padding-bottom: 8px;
  }
  .kanban-column {
    min-width: 78vw;
    max-width: 78vw;
    scroll-snap-align: start;
    flex-shrink: 0;
    min-height: auto;
  }
  .column-header { padding: 12px 12px 10px; position: sticky; top: 0; z-index: 2; }
  .column-title { font-size: 12.5px; }
  .column-body { padding: 8px; gap: 6px; }
  .column-empty { padding: 24px 10px; font-size: 12px; }
  .kanban-column { border-top: 3px solid var(--border); }

  /* -- Project cards -- */
  .project-card { padding: 12px; }
  .project-card:hover { transform: none; }
  .project-card[draggable="true"] { -webkit-user-drag: none; }
  .card-title { font-size: 13.5px; }
  .card-desc { font-size: 12px; -webkit-line-clamp: 1; }
  .card-meta { font-size: 11.5px; gap: 6px; }
  .card-series-tag { font-size: 10px; padding: 2px 6px; }
  .assignment-badge { font-size: 9.5px; padding: 2px 6px; }
  .mobile-card-actions { display: block; margin-top: 8px; }

  /* -- Dashboard -- */
  .dashboard-view { padding: 12px; }
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }
  .stat-card { padding: 14px 8px; }
  .stat-number { font-size: 26px; }
  .stat-label { font-size: 11px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 10px; }
  .dash-card { padding: 18px 14px; }
  .dash-card h3 { font-size: 15px; }

  /* -- Series -- */
  .series-view { padding: 12px; }
  .series-header { margin-bottom: 16px; }
  .series-header h2 { font-size: 18px; }
  .series-grid { grid-template-columns: 1fr !important; }

  /* -- Calendar -- */
  .calendar-view { padding: 12px; }
  .calendar-toolbar { flex-direction: column; gap: 8px; align-items: stretch; }
  .calendar-nav { justify-content: center; }
  .calendar-title { font-size: 16px !important; }
  .calendar-legend { justify-content: center; flex-wrap: wrap; gap: 6px; }
  .legend-item { font-size: 10px; }

  .cal-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-grid { font-size: 11px; min-width: 520px; }
  .cal-weekday { padding: 6px 2px; font-size: 11px; }
  .cal-cell { min-height: 48px; padding: 3px; }
  .cal-day-num { font-size: 11px; }
  .cal-event { font-size: 9px; padding: 1px 3px; border-radius: 3px; }
  .cal-event-stage { display: none; }

  .timeline-section { margin-top: 20px; }
  .timeline-heading { font-size: 15px; }
  .timeline-wrap {
    overflow: auto;
    max-height: 70vh;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-md);
  }
  .timeline-header-row { top: 0; }
  .timeline-table { min-width: 700px; }
  .timeline-name-col { width: 90px; font-size: 11px; }
  .timeline-avatar { width: 24px; height: 24px; font-size: 10px; }
  .timeline-member-name { font-size: 11px; }
  .timeline-member-role { font-size: 9px; }
  .timeline-day-header { font-size: 9px; }

  /* -- Members -- */
  .members-view { padding: 12px; }
  .members-header h2 { font-size: 18px; }
  .members-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .member-card { padding: 14px; }

  /* -- Settings -- */
  .settings-view { padding: 12px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card { padding: 20px 16px; }
  .settings-card.span-2 { grid-column: span 1; }
  .settings-card h3 { font-size: 17px; }
  .settings-members-grid { grid-template-columns: 1fr; }
  .settings-entry-card { padding: 18px 16px; gap: 12px; }
  .settings-entry-icon { font-size: 26px; }
  .settings-entry-info h3 { font-size: 16px; }
  .settings-sub-header { gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
  .settings-sub-header h2 { font-size: 18px; }
  .monitor-col-name { width: 140px; font-size: 13px; }
  .monitor-col-desc { font-size: 11px; }
  .monitor-col-status { width: 40px; }
  .monitor-today-bar { flex-direction: column; gap: 12px; }
  .monitor-legend { flex-wrap: wrap; gap: 12px; }
  .automation-task-row { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .automation-task-desc { white-space: normal; }
  .automation-task-meta { flex-direction: row; gap: 8px; }
  .automation-task-result { max-width: 100%; }
  .automation-result-badge { max-width: 100%; }
  .cookie-status-info { flex-direction: column; align-items: flex-start; gap: 4px; }
  .webhook-url-box { flex-direction: column; align-items: stretch; }
  .webhook-url-box code { font-size: 11px; }
  .json-example { font-size: 11px; padding: 10px 12px; }

  /* -- Modals: full screen on mobile -- */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: slideUp 0.3s var(--ease) both;
    overflow-x: hidden;
  }
  .modal-large { max-width: 100%; }
  .modal-overlay.slide-in { align-items: flex-end; }
  .modal-overlay.slide-in .modal {
    max-width: 100%; width: 100%; height: auto;
    max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: slideUp 0.3s var(--ease) both;
  }
  .modal-header { padding: 16px 18px; }
  .modal-header h3 { font-size: 16px; }
  .modal-body {
    padding: 18px;
    overflow-x: hidden;
    /* 防止横向溢出导致全页面可左右滑动 */
    max-width: 100%;
  }
  .modal-body * {
    max-width: 100%;
  }
  .modal-footer { padding: 14px 18px; }

  .detail-header-left { gap: 8px; min-width: 0; flex: 1; }
  .detail-header-left h3 {
    font-size: 15px;
    /* 长项目标题不换行溢出：用省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .detail-header-right { gap: 4px; flex-shrink: 0; }
  .detail-info-grid { grid-template-columns: 1fr; font-size: 13px; gap: 6px; }
  .detail-info-grid div {
    padding: 4px 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* -- Description URL card on mobile: stack vertically -- */
  .detail-desc {
    font-size: 13px;
    padding: 12px 14px;
    word-break: break-all;
    overflow-wrap: anywhere;
  }
  .detail-desc-link {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .desc-link-icon {
    width: 28px; height: 28px;
    font-size: 15px;
  }
  .desc-link-text {
    flex: 1 1 auto;
    font-size: 12.5px;
    -webkit-line-clamp: 3;
    width: 100%;
  }
  .desc-link-actions {
    margin-left: 0;
    width: 100%;
    justify-content: stretch;
  }
  .desc-link-actions .desc-link-btn {
    flex: 1;
    justify-content: center;
    font-size: 12px;
    padding: 6px 10px;
  }

  /* -- Pipeline stages in detail -- */
  .pipeline-stage {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 10px;
    /* 避免 flex-wrap 导致抖动 */
    align-items: flex-start;
  }
  .stage-indicator {
    gap: 6px;
    flex: 1 1 100%;
    min-width: 0;
  }
  .stage-icon { font-size: 15px; }
  .stage-label { font-size: 13px; }
  .stage-select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: 13px;
    box-sizing: border-box;
  }

  /* -- Delivery link row: stack on mobile -- */
  .delivery-input-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .delivery-input {
    flex: 1 1 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* -- Comment input -- */
  .comment-input { flex-wrap: wrap; }
  .comment-input input { min-width: 0; box-sizing: border-box; }
  .comment-author-tag { font-size: 12px; padding: 4px 10px; }
  .comment-item {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* -- Assignment form in create modal -- */
  .assignment-row { flex-wrap: wrap; }
  .assignment-role-label { width: auto; font-size: 12px; }
  .assignment-row select { font-size: 12px; }

  /* -- Form inputs -- */
  .form-group input, .form-group select, .form-group textarea { font-size: 14px; }

  /* -- Login page -- */
  .login-card { padding: 32px 24px; }
  .login-logo { font-size: 26px; }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--caramel);
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover { background: var(--mocha); }

/* ═══════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 卡片入场动画仅首次加载生效，数据刷新后由 JS 添加 .loaded 类取消 */
.project-card { animation: fadeUp 0.3s var(--ease-out) both; }
.project-card:nth-child(2) { animation-delay: 0.04s; }
.project-card:nth-child(3) { animation-delay: 0.08s; }
.project-card:nth-child(4) { animation-delay: 0.12s; }
.project-card:nth-child(5) { animation-delay: 0.16s; }
.kanban-loaded .project-card { animation: none; }

.modal { animation: modalEnter 0.34s var(--ease-out) both; }

.stat-card { animation: fadeUp 0.35s var(--ease-out) both; }
.stat-card:nth-child(2) { animation-delay: 0.06s; }
.stat-card:nth-child(3) { animation-delay: 0.12s; }
.stat-card:nth-child(4) { animation-delay: 0.18s; }
.stat-card:nth-child(5) { animation-delay: 0.24s; }
.stat-card:nth-child(6) { animation-delay: 0.30s; }

.kanban-column { animation: fadeUp 0.35s var(--ease-out) both; }
.kanban-column:nth-child(2) { animation-delay: 0.04s; }
.kanban-column:nth-child(3) { animation-delay: 0.08s; }
.kanban-column:nth-child(4) { animation-delay: 0.12s; }
.kanban-column:nth-child(5) { animation-delay: 0.16s; }
.kanban-column:nth-child(6) { animation-delay: 0.20s; }

.member-card { animation: fadeUp 0.35s var(--ease) both; }
.member-card:nth-child(2) { animation-delay: 0.05s; }
.member-card:nth-child(3) { animation-delay: 0.10s; }
.member-card:nth-child(4) { animation-delay: 0.15s; }

.modal-overlay { animation: fadeIn 0.2s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════
   DRAG STATES
   ═══════════════════════════════════════ */
.column-body.drag-over {
  background: rgba(156,123,92,0.05);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 2px rgba(156,123,92,0.15);
  transition: all var(--duration) var(--ease);
}

/* ═══════════════════════════════════════
   SELECTION & FOCUS
   ═══════════════════════════════════════ */
::selection {
  background: var(--accent-light);
  color: var(--dark-roast);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════
   UPDATE NOTIFICATION
   ═══════════════════════════════════════ */
.update-notice {
  position: fixed;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--dark-roast);
  color: var(--cream);
  padding: 12px 20px 12px 16px;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  animation: noticeSlideDown 0.4s var(--ease) both;
  max-width: 90vw;
  cursor: pointer;
}
.update-notice-icon { font-size: 18px; flex-shrink: 0; }
.update-notice-text { flex: 1; line-height: 1.4; }
.update-notice-close {
  background: none;
  border: none;
  color: var(--cream);
  font-size: 20px;
  cursor: pointer;
  opacity: 0.5;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.update-notice-close:hover { opacity: 1; }
@keyframes noticeSlideDown {
  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.notice-fade-leave-active {
  transition: all 0.3s var(--ease);
}
.notice-fade-leave-to {
  transform: translateX(-50%) translateY(-20px);
  opacity: 0;
}

/* ═══════════════════════════════════════
   ARCHIVE
   ═══════════════════════════════════════ */
.archive-entry {
  padding: 10px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  border-top: 1px dashed var(--border-light);
  margin-top: 0;
  transition: all 0.2s var(--ease);
}
.archive-entry:first-of-type { margin-top: 8px; }
.archive-entry:hover {
  color: var(--accent);
  background: var(--accent-light);
}
.pending-review-entry { color: var(--caramel); }
.pending-review-badge {
  background: #C4A84A;
  color: white;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}

.archived-list { display: flex; flex-direction: column; gap: 8px; }
.archived-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-column);
  border-radius: var(--r-md);
  border: 1px solid var(--border-light);
}
.archived-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.archived-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}
.archived-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  flex-wrap: wrap;
}
.archived-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.review-badge {
  background: var(--clr-green);
  color: white;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}

/* ═══════════════════════════════════════
   REVIEW
   ═══════════════════════════════════════ */
.review-section {
  background: var(--bg-column);
  border-radius: var(--r-md);
  padding: 18px;
  border: 1px solid var(--border-light);
}
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.review-header h4 { margin: 0; }
.review-content { display: flex; flex-direction: column; gap: 12px; }
.review-block {
  background: var(--bg-surface);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  border: 1px solid var(--border-light);
}
.review-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.review-text {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
}
.review-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}
.review-empty {
  color: var(--text-hint);
  font-size: 13px;
  text-align: center;
  padding: 14px;
}
.review-rating {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
}
.star {
  font-size: 20px;
  color: var(--caramel);
  transition: color 0.15s;
}
.star.filled {
  color: #E8A838;
}

/* Rating input */
.rating-input {
  display: flex;
  align-items: center;
  gap: 4px;
}
.star-btn {
  font-size: 28px;
  color: var(--caramel);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.star-btn:hover, .star-btn.filled {
  color: #E8A838;
  transform: scale(1.1);
}
.rating-text {
  margin-left: 10px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ═══════════════════════════════════════
   DELIVERY LINK
   ═══════════════════════════════════════ */
.delivery-section {
  background: var(--bg-column);
  border-radius: var(--r-md);
  padding: 18px;
  border: 1px solid var(--border-light);
}
.delivery-section h4 { margin: 0 0 12px 0; }
.delivery-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 14px;
}
.delivery-status.delivered {
  background: rgba(106, 158, 120, 0.12);
  color: #6A9E78;
  border: 1px solid rgba(106, 158, 120, 0.25);
}
.delivery-status.pending {
  background: rgba(196, 168, 74, 0.12);
  color: #C4A84A;
  border: 1px solid rgba(196, 168, 74, 0.25);
}
.delivery-status-icon { font-size: 16px; }
.delivery-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.delivery-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.delivery-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: 'Courier New', monospace;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.delivery-input:focus {
  outline: none;
  border-color: var(--caramel);
  box-shadow: 0 0 0 2px rgba(156, 123, 92, 0.15);
}
.delivery-hint {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.8;
}
.delivery-hint p { margin: 0; }
.delivery-hint code {
  background: rgba(156, 123, 92, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11.5px;
}

/* Card delivery tag (kanban cards) */
.card-delivery-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 6px;
  display: inline-block;
}
.card-delivery-tag.delivered {
  background: rgba(106, 158, 120, 0.12);
  color: #6A9E78;
}
.card-delivery-tag.pending {
  background: rgba(196, 168, 74, 0.12);
  color: #C4A84A;
}

/* ═══════════════════════════════════════
   KNOWLEDGE BASE
   ═══════════════════════════════════════ */
.knowledge-view { padding: 24px 32px; }
.knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.knowledge-header h2 { font-size: 20px; }
.knowledge-header-actions { display: flex; gap: 8px; }
.knowledge-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.knowledge-filters select {
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.knowledge-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.knowledge-card:hover {
  border-color: var(--mocha);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.knowledge-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.knowledge-source {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 100px;
  letter-spacing: 0.02em;
}
.source-review { background: var(--clr-green); color: white; }
.source-manual { background: var(--clr-blue); color: white; }
.source-meeting { background: var(--clr-purple); color: white; }
.knowledge-category {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-light);
  padding: 2px 10px;
  border-radius: 100px;
}
.knowledge-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}
.knowledge-card-summary {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.knowledge-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.knowledge-tag {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 100px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  font-weight: 500;
}
.knowledge-tag.removable { cursor: pointer; }
.knowledge-tag.removable:hover { background: var(--clr-urgent); color: white; border-color: var(--clr-urgent); }
.knowledge-card-footer {
  margin-top: auto;
  padding-top: 6px;
}
.knowledge-time {
  font-size: 12px;
  color: var(--text-hint);
}
.knowledge-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.knowledge-empty .empty-icon { font-size: 48px; margin-bottom: 12px; }
.knowledge-empty p { font-size: 15px; }
.knowledge-empty .empty-sub { font-size: 13px; color: var(--text-hint); margin-top: 6px; }

/* Knowledge Tabs */
.knowledge-tabs { display: flex; gap: 4px; background: var(--bg-hover); border-radius: 10px; padding: 3px; }
.knowledge-tabs button {
  padding: 6px 16px; border: none; background: transparent; border-radius: 8px;
  font-size: 13px; cursor: pointer; color: var(--text-secondary); font-family: inherit; font-weight: 500; transition: all 0.2s;
}
.knowledge-tabs button.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.knowledge-header-actions { display: flex; gap: 12px; align-items: center; }

/* Wiki Tree */
.wiki-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); margin-bottom: 16px;
}
.wiki-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wiki-name { font-weight: 600; font-size: 15px; }
.wiki-link { font-size: 13px; color: var(--clr-accent, #5E8BA8); text-decoration: none; }
.wiki-link:hover { text-decoration: underline; }
.wiki-sync-time { font-size: 12px; color: var(--text-hint); }

.wiki-loading { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.wiki-loading .spinner {
  width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--clr-accent, #5E8BA8);
  border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wiki-error { text-align: center; padding: 40px 20px; color: var(--clr-urgent); }

.wiki-tree {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 8px 0; overflow: hidden;
}
.wiki-node-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px;
  cursor: pointer; transition: background 0.15s; user-select: none; min-height: 40px;
}
.wiki-node-row:hover { background: var(--bg-hover); }
.wiki-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.wiki-node-name { flex: 1; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-toggle { font-size: 12px; color: var(--text-hint); width: 16px; text-align: center; flex-shrink: 0; }
.wiki-open-link {
  font-size: 13px; color: var(--text-hint); text-decoration: none; opacity: 0;
  transition: opacity 0.15s; flex-shrink: 0; padding: 2px 6px;
}
.wiki-node-row:hover .wiki-open-link { opacity: 1; }
.wiki-open-link:hover { color: var(--clr-accent, #5E8BA8); }

.wiki-children { padding-left: 20px; border-left: 1px solid var(--border-light); margin-left: 27px; }
.wiki-children .wiki-children { margin-left: 27px; }

.wiki-leaf .wiki-node-name { color: var(--text-secondary); }
.wiki-leaf:hover .wiki-node-name { color: var(--text-primary); }

/* Wiki Recommend */
.wiki-recommend {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.wiki-recommend-label { font-size: 13px; color: var(--text-hint); white-space: nowrap; }
.wiki-recommend-link {
  padding: 6px 16px; background: var(--bg-hover); border: 1.5px solid var(--border);
  border-radius: 100px; font-size: 13px; color: var(--text-secondary);
  text-decoration: none; transition: all 0.2s; font-weight: 500;
}
.wiki-recommend-link:hover {
  border-color: var(--clr-accent, #5E8BA8); color: var(--text-primary); background: var(--bg-surface);
}
.wiki-recommend-link .wiki-arrow { opacity: 0.5; transition: opacity 0.2s; }
.wiki-recommend-link:hover .wiki-arrow { opacity: 1; }

/* Knowledge Detail */
.knowledge-detail-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.knowledge-detail-block {
  background: var(--bg-column);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--border-light);
}
.knowledge-detail-block h4 {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 700;
}
.knowledge-detail-block p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
}
.knowledge-detail-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ═══════════════════════════════════════════
   Series Group (Kanban Column Collapse)
   ═══════════════════════════════════════════ */
.series-group {
  margin-bottom: 6px;
}
.series-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: grab;
  transition: all 0.15s;
  user-select: none;
}
.series-group-header:active {
  cursor: grabbing;
}
.series-group-header.dragging {
  opacity: 0.5;
}
.series-group-header:hover {
  background: var(--bg-hover);
  box-shadow: var(--shadow-sm);
}
.series-group-accent {
  width: 4px;
  height: 22px;
  border-radius: 2px;
  flex-shrink: 0;
}
.series-group-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.series-group-count {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 10px;
  flex-shrink: 0;
}
.series-group-priorities {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.mini-priority {
  width: 7px !important;
  height: 7px !important;
}
.series-group-chevron {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.series-group-chevron.expanded {
  transform: rotate(90deg);
}
.series-batch-summary {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-green);
  background: rgba(106, 158, 120, 0.1);
  padding: 1px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Grouped cards have left accent border instead of series tag */
.project-card-grouped {
  border-left: 3px solid var(--border);
  margin-left: 6px;
  border-radius: 8px;
}
.series-group .project-card-grouped {
  margin-top: 6px;
}
.series-group .project-card-grouped:first-of-type {
  margin-top: 8px;
}

@media (max-width: 768px) {
  .series-group-header {
    padding: 8px 10px;
  }
  .series-group-name {
    font-size: 12px;
  }
  .series-group-priorities {
    display: none;
  }
}

/* ═══════════════════════════════════════════
   Help Center
   ═══════════════════════════════════════════ */
.help-view {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 100px;
}
.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.help-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.help-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 24px;
}
.help-tabs button {
  padding: 10px 20px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.help-tabs button:hover {
  color: var(--text-secondary);
}
.help-tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.help-content {
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Changelog */
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.changelog-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 20px 24px;
  transition: box-shadow 0.2s;
}
.changelog-item:hover {
  box-shadow: var(--shadow-md);
}
.changelog-latest {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--bg-surface), var(--accent-light));
}
.changelog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.changelog-version {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 2px 10px;
  border-radius: 6px;
}
.changelog-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.changelog-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}
.changelog-badge {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--clr-green);
  padding: 2px 8px;
  border-radius: 10px;
}
.changelog-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.changelog-items li {
  font-size: 13.5px;
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}
.changelog-items li::before {
  content: '•';
  position: absolute;
  left: 6px;
  color: var(--accent);
  font-weight: 700;
}

/* Tutorial */
.tutorial-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.tutorial-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.tutorial-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.tutorial-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.tutorial-card p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 6px;
}
.tutorial-card p:last-child {
  margin-bottom: 0;
}
.tutorial-card ul {
  padding-left: 20px;
  margin: 8px 0 0;
}
.tutorial-card ul li {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 4px;
}
.tutorial-img {
  width: 100%;
  max-width: 800px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  margin: 12px 0 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform 0.2s;
}
.tutorial-img:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
/* Tutorial TOC */
.tutorial-toc {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.tutorial-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.tutorial-toc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s;
  cursor: pointer;
}
.tutorial-toc-item:hover {
  background: var(--bg-secondary);
}
.tutorial-toc-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.tutorial-toc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.tutorial-toc-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
}
/* Tutorial collapsible sections */
.tutorial-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.15s;
}
.tutorial-toggle:hover {
  color: var(--accent);
}
.tutorial-arrow {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.2s;
  display: inline-block;
}
.tutorial-arrow.open {
  transform: rotate(90deg);
}
.tutorial-body {
  animation: fadeIn 0.2s ease;
}

/* Feedback */
.feedback-form-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.feedback-form-section textarea {
  resize: vertical;
  max-width: 100%;
  min-height: 100px;
  max-height: 300px;
}
.feedback-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.feedback-image-thumb { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.feedback-image-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.feedback-image-thumb .remove-img { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; border: none; font-size: 13px; line-height: 20px; text-align: center; cursor: pointer; padding: 0; }
.feedback-image-thumb .remove-img:hover { background: rgba(200,50,50,0.8); }
.feedback-upload-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 1.5px dashed var(--border); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all 0.2s; margin-top: 8px; }
.feedback-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.feedback-detail-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.feedback-detail-images img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; transition: transform 0.2s; }
.feedback-detail-images img:hover { transform: scale(1.05); }
.feedback-form-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.feedback-list-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feedback-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px 20px;
  transition: box-shadow 0.2s;
}
.feedback-item:hover {
  box-shadow: var(--shadow-sm);
}
.feedback-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.feedback-type {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-inset);
  color: var(--text-secondary);
}
.feedback-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.fb-status-pending {
  background: var(--clr-medium);
  color: #fff;
}
.fb-status-replied {
  background: var(--clr-blue);
  color: #fff;
}
.fb-status-resolved {
  background: var(--clr-green);
  color: #fff;
}
.feedback-author {
  font-size: 12px;
  color: var(--text-muted);
}
.feedback-time {
  font-size: 12px;
  color: var(--text-hint);
  margin-left: auto;
}
.feedback-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.feedback-item-content {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
}
.feedback-reply {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--bg-inset);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.feedback-reply-label {
  font-weight: 600;
  color: var(--accent);
}
.feedback-admin-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

/* Mobile adjustments for help center */
@media (max-width: 768px) {
  .help-view {
    padding: 16px 12px 100px;
  }
  .help-tabs button {
    padding: 8px 12px;
    font-size: 13px;
  }
  .changelog-item {
    padding: 14px 16px;
  }
  .changelog-header {
    gap: 8px;
  }
  .changelog-date {
    margin-left: 0;
  }
  .tutorial-card {
    padding: 12px 14px;
  }
  .feedback-form-section {
    padding: 14px 16px;
  }
  .feedback-item {
    padding: 12px 14px;
  }
}

/* Tag input */
.tag-input-row {
  display: flex;
  gap: 6px;
}
.tag-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ═══════════════════════════════════════
   BATCH PROGRESS — Card mini bar
   ═══════════════════════════════════════ */
.batch-progress-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px;
  background: var(--bg-inset);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.batch-tag {
  background: var(--accent);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.batch-stage-dot {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  opacity: 0.45;
  font-size: 11px;
  transition: opacity 0.2s;
}
.batch-stage-dot.highlight {
  opacity: 1;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════
   BATCH PROGRESS — Detail modal section
   ═══════════════════════════════════════ */
.batch-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.batch-total-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.batch-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.batch-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-inset);
  border-radius: 8px;
}
.batch-detail-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.batch-detail-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  width: 48px;
  flex-shrink: 0;
}
.batch-detail-bar {
  flex: 1;
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}
.batch-detail-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.batch-detail-input {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.batch-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
  line-height: 1;
}
.batch-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
.batch-btn:active {
  transform: scale(0.92);
}
.batch-detail-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 18px;
  text-align: center;
}
.batch-detail-total {
  font-size: 12px;
  color: var(--text-muted);
}
.batch-done-row {
  background: rgba(106, 158, 120, 0.08);
  border: 1px dashed rgba(106, 158, 120, 0.3);
}
.batch-done-auto {
  font-size: 10px;
  color: var(--clr-green);
  background: rgba(106, 158, 120, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}

/* ═══════════════════════════════════════
   BATCH PROGRESS — Mobile
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .batch-progress-bar {
    gap: 4px;
    padding: 3px 6px;
    font-size: 10px;
  }
  .batch-detail-row {
    padding: 5px 8px;
    gap: 6px;
  }
  .batch-detail-label {
    width: 40px;
    font-size: 12px;
  }
  .batch-btn {
    width: 28px;
    height: 28px;
  }
}

/* ═══════════════════════════════════════
   KNOWLEDGE - MOBILE
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .knowledge-view { padding: 16px; }
  .knowledge-grid { grid-template-columns: 1fr; }
  .knowledge-filters { flex-direction: column; align-items: stretch; }
  .knowledge-filters .search-box { max-width: 100% !important; }
}

/* ═══════════════════════════════════════
   在线人数徽章（Header 顶部）
   ═══════════════════════════════════════ */
.online-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(106, 158, 120, 0.12) 0%, rgba(106, 158, 120, 0.05) 100%);
  border: 1px solid rgba(106, 158, 120, 0.25);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: all 0.2s var(--ease);
  user-select: none;
}
.online-indicator:hover,
.online-indicator.active {
  border-color: #6A9E78;
  background: linear-gradient(135deg, rgba(106, 158, 120, 0.2) 0%, rgba(106, 158, 120, 0.08) 100%);
}

/* 主题模式三态切换（日间/黑夜/自动） */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 100px;
  background: var(--bg-column, rgba(0,0,0,0.04));
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.theme-switch button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 100px;
  color: var(--text-secondary);
  transition: all 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.theme-switch button:hover { background: rgba(0,0,0,0.06); }
.theme-switch button.active {
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(47,111,94,0.35);
}
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6A9E78;
  box-shadow: 0 0 0 0 rgba(106, 158, 120, 0.6);
  animation: onlinePulse 2.2s infinite;
}
@keyframes onlinePulse {
  0% { box-shadow: 0 0 0 0 rgba(106, 158, 120, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(106, 158, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(106, 158, 120, 0); }
}
.online-count-text {
  font-weight: 700;
  color: #6A9E78;
  font-size: 14px;
  min-width: 14px;
  text-align: center;
}
.online-label {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 弹出的在线列表（独立于 header，避免层叠上下文遮挡） */
.online-list {
  position: fixed;
  width: 280px;
  max-height: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(74, 60, 49, 0.18);
  z-index: 1200;
  overflow: hidden;
  cursor: default;
}
.online-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-inset);
}
.online-list-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 0 4px;
}
.online-list-close:hover { color: var(--text-primary); }
.online-list-body {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.online-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}
.online-user-item:last-child { border-bottom: none; }
.online-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.online-user-info {
  flex: 1;
  min-width: 0;
}
.online-user-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.online-self-tag {
  font-size: 11px;
  color: var(--accent);
  font-weight: 400;
  margin-left: 4px;
}
.online-user-role {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.online-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6A9E78;
  flex-shrink: 0;
}
.online-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-hint);
  font-size: 13px;
}
.online-list-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: transparent;
}

/* 弹出动画 */
.online-pop-enter-active, .online-pop-leave-active {
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.online-pop-enter-from, .online-pop-leave-to {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}

/* 手机端：徽章缩小 */
@media (max-width: 480px) {
  .online-indicator {
    padding: 5px 9px;
    gap: 4px;
  }
  .online-label { display: none; }
  .online-count-text { font-size: 13px; }
  .online-list {
    top: auto;
    bottom: 120px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
  }
}

/* ═══════════════════════════════════════
   团队活跃度 + 操作热力图
   ═══════════════════════════════════════ */
.activity-section {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 2px dashed var(--border-light);
}
.activity-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.activity-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.activity-subtitle {
  font-size: 12.5px;
  color: var(--text-hint);
}
.activity-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  margin-bottom: 20px;
}
.activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 640px;
}
.activity-table th {
  background: var(--bg-inset);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
.activity-table th.num,
.activity-table td.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.activity-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}
.activity-table tbody tr:last-child td { border-bottom: none; }
.activity-table tbody tr:hover { background: var(--bg-inset); }
.activity-row-selected { background: rgba(156, 123, 92, 0.08) !important; }
.activity-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.activity-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.activity-last-login { font-size: 12.5px; color: var(--text-secondary); }
.activity-never { color: var(--text-hint); font-style: italic; }
.activity-hot { color: #6A9E78; font-weight: 700; }

/* 图表卡片（通用） */
.activity-chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 20px;
}
.activity-chart-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.activity-chart-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.activity-compare-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-inset);
  padding: 3px;
  border-radius: var(--r-sm);
  margin-left: auto;
}
.activity-compare-tabs button {
  background: transparent;
  border: none;
  padding: 5px 12px;
  border-radius: calc(var(--r-sm) - 2px);
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s var(--ease);
}
.activity-compare-tabs button.active {
  background: var(--bg-surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.activity-bar-chart { display: flex; flex-direction: column; gap: 8px; }
.activity-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 70px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.activity-bar-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-weight: 500;
}
.activity-bar-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.activity-bar-track {
  background: var(--bg-inset);
  border-radius: 100px;
  height: 14px;
  overflow: hidden;
}
.activity-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  min-width: 2px;
}
.activity-bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 600;
}
.activity-chart-footer {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--text-hint);
  text-align: right;
}

/* ── 热力图 ── */
.heatmap-card {
  background: linear-gradient(135deg, var(--bg-surface) 0%, rgba(156, 123, 92, 0.04) 100%);
}
.heatmap-summary-row {
  display: flex;
  gap: 20px;
  padding: 12px 16px;
  background: var(--bg-inset);
  border-radius: var(--r-sm);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.heatmap-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 60px;
}
.heatmap-stat-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.heatmap-stat-label {
  font-size: 11px;
  color: var(--text-hint);
}
.heatmap-container {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.heatmap-weekday-labels {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 20px;
  flex-shrink: 0;
}
.heatmap-weekday-labels span {
  height: 11px;
  line-height: 11px;
  font-size: 10px;
  color: var(--text-hint);
  text-align: right;
  width: 14px;
}
.heatmap-grid-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.heatmap-month-labels {
  position: relative;
  height: 16px;
  margin-bottom: 4px;
}
.heatmap-month-labels span {
  position: absolute;
  font-size: 10px;
  color: var(--text-hint);
  white-space: nowrap;
}
.heatmap-grid {
  display: flex;
  gap: 3px;
}
.heatmap-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.heatmap-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  cursor: default;
  transition: outline 0.1s;
}
.heatmap-cell:hover {
  outline: 1.5px solid var(--accent);
  outline-offset: -0.5px;
}
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 10px;
}
.heatmap-legend-label {
  font-size: 10px;
  color: var(--text-hint);
}
.heatmap-legend-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
}
.heatmap-tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  background: var(--text-primary);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .activity-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .activity-header h3 { font-size: 16px; }
  .activity-chart-header { flex-direction: column; align-items: flex-start; }
  .activity-compare-tabs { margin-left: 0; width: 100%; justify-content: space-between; }
  .activity-compare-tabs button { flex: 1; }
  .activity-bar-row { grid-template-columns: 90px 1fr 56px; gap: 8px; font-size: 12px; }
  .activity-bar-name { gap: 6px; font-size: 12px; }
  .heatmap-summary-row { gap: 12px; padding: 10px 12px; }
  .heatmap-stat-num { font-size: 16px; }
  .heatmap-cell { width: 8px; height: 8px; }
  .heatmap-grid { gap: 2px; }
  .heatmap-col { gap: 2px; }
  .heatmap-weekday-labels { display: none; }
}

/* ============ OKR 系统样式 ============ */
/* ========== 组织管理 ========== */
.org-view { padding: 24px 28px 60px; max-width: 1000px; margin: 0 auto; }
.org-tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg-secondary); border-radius: 12px; margin-bottom: 24px; }
.org-tabs button { flex: 1; padding: 10px 16px; border: none; background: none; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .2s; }
.org-tabs button.active { background: var(--surface); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.org-tabs button:hover:not(.active) { color: var(--text-primary); }
.org-tab-content { animation: fadeIn .2s; }
.org-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }

/* --- 成员画像 --- */
.profile-member-selector { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.profile-selector-label { font-size: 13px; color: var(--text-secondary); margin-right: 4px; }
.profile-member-btn { padding: 6px 14px; border: 1px solid var(--border); background: var(--surface); border-radius: 20px; font-size: 13px; cursor: pointer; transition: all .2s; }
.profile-member-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 双栏布局 */
.profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
.profile-sidebar { display: flex; flex-direction: column; gap: 16px; }
.profile-main { display: flex; flex-direction: column; gap: 16px; }

/* 左侧：身份卡 */
.profile-identity-card { background: var(--surface); border-radius: 14px; padding: 24px 20px; text-align: center; border: 1px solid var(--border); }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; margin: 0 auto 12px; }
.profile-identity-card h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.profile-role { font-size: 13px; color: var(--text-secondary); }

/* 左侧：数字概览 */
.profile-stats-compact { background: var(--surface); border-radius: 14px; padding: 16px; border: 1px solid var(--border); }
.profile-stats-compact .stats-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.profile-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-light, rgba(0,0,0,.05)); }
.profile-stat-row:last-child { border-bottom: none; }
.profile-stat-row .stat-label { font-size: 13px; color: var(--text-secondary); }
.profile-stat-row .stat-value { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.profile-stat-row .stat-value.has-issue { color: var(--danger, #C27171); }
.profile-stat-row .stat-value.good { color: var(--success, #6B9E78); }

/* 左侧栏：个人目标 + 问题 */
.profile-sidebar-section { background: var(--surface); border-radius: 14px; padding: 14px; border: 1px solid var(--border); margin-top: 12px; }

/* 人事信息 / 星盘 */
.seniority-tag { margin-left: 6px; font-size: 11px; color: var(--accent); background: var(--accent-muted); padding: 1px 6px; border-radius: 8px; }
.resume-link { color: var(--accent); text-decoration: none; }
.hr-edit-form { display: flex; flex-direction: column; gap: 4px; }
.hr-edit-form label { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.hr-edit-form input, .hr-edit-form select { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); font-size: 13px; box-sizing: border-box; }
.hr-readonly { padding: 6px 8px; font-size: 13px; color: var(--text-primary); }
.hr-ec-row { display: flex; gap: 4px; }
.hr-ec-row input { min-width: 0; }
.hr-edit-actions { display: flex; gap: 8px; margin-top: 10px; }
.star-wheel { width: 100%; max-width: 280px; display: block; margin: 4px auto 10px; background: #fff; border-radius: 10px; }
.star-placements { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.star-pill { font-size: 11.5px; padding: 3px 8px; border-radius: 100px; background: var(--bg-column); color: var(--text-primary); border: 1px solid var(--border); }
.star-pill i { font-style: normal; color: var(--danger); margin-left: 2px; font-size: 10px; }
.star-report { font-size: 13px; line-height: 1.7; color: var(--text-primary); word-break: break-word; }
.star-report h1, .star-report h2, .star-report h3, .star-report h4 { font-size: 13.5px; margin: 10px 0 4px; color: var(--accent); }
.star-report-edit { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-size: 13px; line-height: 1.6; background: var(--bg-input); color: var(--text-primary); font-family: inherit; }
.star-disclaimer { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.star-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.star-wheel { cursor: zoom-in; }

/* 星盘完整分析弹窗 */
.star-report-modal { max-width: 720px; width: 94%; max-height: 88vh; display: flex; flex-direction: column; }
.star-report-modal .modal-body { overflow-y: auto; }
.star-report-full { font-size: 14.5px; line-height: 1.85; color: var(--text-primary); word-break: break-word; }
.star-report-full h1, .star-report-full h2, .star-report-full h3, .star-report-full h4 {
  font-size: 15.5px; font-weight: 700; color: var(--accent); margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border-light);
}
.star-report-full h1:first-child, .star-report-full h2:first-child, .star-report-full h3:first-child { margin-top: 2px; }
.star-report-full p { margin: 8px 0; }
.star-report-full ul, .star-report-full ol { margin: 8px 0; padding-left: 22px; }
.star-report-full li { margin: 5px 0; }
.star-report-full strong { color: var(--text-primary); font-weight: 700; }
.star-report-full table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13.5px; }
.star-report-full th, .star-report-full td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.star-report-full th { background: var(--bg-column); font-weight: 700; white-space: nowrap; }
.star-report-full td:first-child { white-space: nowrap; font-weight: 600; }
@media (max-width: 480px) {
  .star-report-full td:first-child, .star-report-full th { white-space: normal; }
}
.sidebar-section-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin: 0 0 10px; }

.profile-okr-card { background: var(--bg-secondary); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.profile-okr-card:last-child { margin-bottom: 0; }
.profile-okr-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 6px; }
.profile-okr-title { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; line-height: 1.3; }
.profile-okr-cycle { font-size: 10px; color: var(--text-hint); background: var(--bg-card); padding: 1px 5px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; }
.profile-okr-bar-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.profile-okr-bar { flex: 1; height: 5px; background: var(--border-light); border-radius: 3px; overflow: hidden; }
.profile-okr-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.profile-okr-bar-fill.low { background: #e5a0a0; }
.profile-okr-bar-fill.mid { background: #e5c77a; }
.profile-okr-bar-fill.good { background: #7ac4a0; }
.profile-okr-bar-fill.done { background: #6a9e78; }
.profile-okr-pct { font-size: 11px; font-weight: 700; color: var(--text-secondary); width: 32px; text-align: right; }
.profile-okr-krs { display: flex; flex-direction: column; gap: 3px; }
.profile-okr-kr { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-secondary); padding: 2px 0; }
.profile-okr-kr-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-okr-kr-val { flex-shrink: 0; font-weight: 600; margin-left: 6px; }

.profile-issue-card { background: var(--bg-secondary); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; border-left: 3px solid var(--border); }
.profile-issue-card:last-child { margin-bottom: 0; }
.profile-issue-card.priority-P0 { border-left-color: #C27171; }
.profile-issue-card.priority-P1 { border-left-color: #D4A042; }
.profile-issue-card.priority-P2 { border-left-color: #8C7E74; }
.profile-issue-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.profile-issue-priority { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 4px; color: #fff; }
.profile-issue-priority.P0 { background: #C27171; }
.profile-issue-priority.P1 { background: #D4A042; }
.profile-issue-priority.P2 { background: #8C7E74; }
.profile-issue-cat { font-size: 10px; color: var(--text-hint); background: var(--bg-card); padding: 1px 5px; border-radius: 4px; }
.profile-issue-status { font-size: 10px; color: var(--text-hint); margin-left: auto; }
.profile-issue-content { font-size: 12px; color: var(--text-primary); line-height: 1.4; }

/* 个人目标卡片 */
.profile-goal-card { background: var(--bg-secondary); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; border-left: 3px solid var(--border); position: relative; }
.profile-goal-card:last-child { margin-bottom: 0; }
.profile-goal-card.priority-P0 { border-left-color: #C27171; }
.profile-goal-card.priority-P1 { border-left-color: #D4A042; }
.profile-goal-card.priority-P2 { border-left-color: #8C7E74; }
.profile-goal-header { display: flex; align-items: center; gap: 6px; }
.profile-goal-title { font-size: 12px; color: var(--text-primary); flex: 1; line-height: 1.3; }
.profile-goal-title.goal-done { text-decoration: line-through; color: var(--text-hint); }
.goal-ai-tag { font-size: 9px; background: var(--accent-light, #D4A574); color: #fff; padding: 0 4px; border-radius: 3px; font-weight: 700; }
.profile-goal-desc { font-size: 11px; color: var(--text-secondary); margin-top: 4px; line-height: 1.3; }
.profile-goal-actions { display: flex; gap: 4px; margin-top: 4px; }
.btn-icon-tiny { background: none; border: none; cursor: pointer; font-size: 12px; padding: 0 2px; opacity: 0.6; }
.btn-icon-tiny:hover { opacity: 1; }
.profile-goal-empty { font-size: 12px; color: var(--text-hint); text-align: center; padding: 12px 0; }
.btn-add-goal { width: 100%; margin-top: 8px; background: none; border: 1px dashed var(--border); border-radius: 8px; padding: 6px; cursor: pointer; font-size: 12px; color: var(--text-secondary); }
.btn-add-goal:hover { border-color: var(--accent); color: var(--accent); }
.goal-edit-form, .goal-add-form { margin-top: 6px; }
.goal-edit-input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 12px; background: var(--bg-card); color: var(--text-primary); box-sizing: border-box; }
.goal-edit-textarea { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 11px; margin-top: 4px; resize: vertical; background: var(--bg-card); color: var(--text-primary); box-sizing: border-box; }
.goal-edit-row { display: flex; gap: 6px; margin-top: 4px; align-items: center; }
.goal-edit-select { border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 11px; background: var(--bg-card); }
.btn-sm-save { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.btn-sm-cancel { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.btn-icon-sm:disabled { opacity: 0.5; cursor: not-allowed; }

/* Hermes 洞察 */
.hermes-sync-badge { font-size: 11px; color: var(--text-hint); background: var(--bg-secondary); padding: 2px 8px; border-radius: 8px; }
.hermes-profile-block, .hermes-daily-block { margin-top: 12px; }
.hermes-block-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.hermes-content, .hermes-daily-content { position: relative; }
.hermes-collapsed { max-height: 120px; overflow: hidden; }
.hermes-collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: linear-gradient(transparent, var(--surface, #fff)); }
.hermes-pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0; background: var(--bg-secondary); border-radius: 8px; padding: 10px 12px; }
.btn-hermes-toggle { background: none; border: none; color: var(--accent); font-size: 11px; cursor: pointer; padding: 4px 0; }
.btn-hermes-toggle:hover { text-decoration: underline; }
.hermes-daily-item { margin-bottom: 10px; border-left: 2px solid var(--accent-light, #D4A574); padding-left: 10px; }
.hermes-daily-date { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.hermes-fold-icon { font-size: 10px; margin-left: 6px; color: var(--text-muted, #aaa); transition: transform .2s; }
.hermes-summary { font-size: 12px; color: var(--text-secondary); padding: 8px 0 0; }
.btn-hermes-more { display: block; margin: 8px auto 0; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--accent); font-size: 12px; padding: 5px 16px; border-radius: 12px; cursor: pointer; transition: background .2s; }
.btn-hermes-more:hover { background: var(--accent-light, #D4A574); color: #fff; }

/* 右侧：section 卡片 */
.profile-section { background: var(--surface); border-radius: 14px; padding: 20px; border: 1px solid var(--border); }
.profile-section-title { font-size: 15px; font-weight: 700; margin: 0 0 16px; color: var(--text-primary); }
.profile-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.profile-section-header .profile-section-title { margin-bottom: 0; }

/* SVG 五维雷达图 */
.radar-chart-container { display: flex; align-items: center; justify-content: center; gap: 24px; }
.radar-svg-wrap { flex-shrink: 0; }
.radar-svg-wrap svg { display: block; }
.radar-legend { display: flex; flex-direction: column; gap: 8px; }
.radar-legend-item { display: flex; align-items: center; gap: 8px; }
.radar-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.radar-legend-label { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.radar-legend-score { font-size: 14px; font-weight: 700; min-width: 28px; }

/* 评估卡片 */
.eval-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.eval-card-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.eval-period { font-weight: 700; color: var(--text-primary); }
.eval-total-score { font-size: 13px; color: var(--accent); font-weight: 600; }
.eval-evaluator { font-size: 12px; color: var(--text-secondary); margin-left: auto; }
.eval-actions { display: flex; gap: 4px; }
.eval-scores-row { display: flex; gap: 6px; flex-wrap: wrap; }
.eval-score-tag { font-size: 12px; padding: 2px 8px; border: 1px solid; border-radius: 12px; }
.eval-ai-summary { margin-top: 14px; padding: 14px; background: var(--bg-secondary); border-radius: 8px; }
.eval-ai-summary h4 { margin: 0 0 8px; font-size: 14px; }
.eval-ai-summary p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-primary); }
.eval-ai-summary-sm { margin-top: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.eval-source-tag { font-size: 11px; padding: 1px 8px; background: rgba(192,139,92,0.12); color: var(--accent); border-radius: 10px; font-weight: 600; }

/* 线标签 */
.eval-line-badge { display: inline-block; padding: 2px 10px; background: rgba(94,139,168,0.15); color: #5E8BA8; border-radius: 10px; font-size: 12px; font-weight: 700; }
.line-badge-mini { display: inline-block; padding: 0 4px; background: rgba(94,139,168,0.18); color: #5E8BA8; border-radius: 4px; font-size: 9px; font-weight: 700; margin-left: 2px; vertical-align: middle; line-height: 14px; }

/* AI核心素质评分 */
.core-score-input-form { padding: 8px 0; }
.core-score-input-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.core-score-input-label { width: 36px; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-align: right; flex-shrink: 0; }
.core-score-input { width: 70px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; text-align: center; background: var(--bg-card); }
.core-score-input:focus { border-color: var(--accent); outline: none; }
.core-score-input-max { font-size: 12px; color: var(--text-hint); }
.ai-score-diff { font-size: 11px; font-weight: 700; margin-left: 4px; padding: 0 4px; border-radius: 4px; }
.ai-score-diff.up { color: #6B9E78; background: rgba(107,158,120,0.12); }
.ai-score-diff.down { color: #C27171; background: rgba(194,113,113,0.12); }
.ai-score-diff.same { color: var(--text-hint); background: rgba(0,0,0,0.05); }
.ai-core-tag { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 8px; }
.ai-core-badge { display: inline-block; padding: 2px 8px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-radius: 10px; font-size: 10px; font-weight: 700; }
.ai-core-meta { font-size: 11px; color: var(--text-hint); }
.ai-core-detail-section { background: linear-gradient(135deg, rgba(102,126,234,0.04), rgba(118,75,162,0.04)); border: 1px solid rgba(102,126,234,0.12); }
.ai-core-overall { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--text-primary); }
.ai-core-reasoning-list { display: flex; flex-direction: column; gap: 8px; }
.ai-core-reason-item { background: var(--bg-secondary); border-radius: 8px; padding: 10px 12px; }
.ai-core-reason-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ai-core-dim-name { font-weight: 700; font-size: 13px; color: var(--text-primary); }
.ai-core-direction { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.ai-core-direction.up { color: #6B9E78; background: rgba(107,158,120,0.15); }
.ai-core-direction.down { color: #C27171; background: rgba(194,113,113,0.15); }
.ai-core-direction.same { color: var(--text-hint); background: rgba(0,0,0,0.06); }
.ai-core-reason-score { font-size: 13px; font-weight: 700; color: var(--accent); margin-left: auto; }
.ai-core-evidence { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.ai-core-highlights { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.eval-ai-core-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.eval-score-tag.ai-score { border-style: dashed; }

/* 盲区扫描 */
.ai-core-blindspots { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.blindspot-list { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.blindspot-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.5; }
.blindspot-item.warn { background: #FFF8E1; border-left: 3px solid var(--warning); }
.blindspot-label { font-weight: 600; color: var(--warning); white-space: nowrap; min-width: 56px; }
.blindspot-text { color: var(--text-secondary); }
.eval-blindspots-sm { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.blindspot-badge { font-size: 10px; color: var(--warning); font-weight: 600; }
.blindspot-tag { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #FFF8E1; color: #B8860B; }

/* 导入评分人勾选 */
.eval-import-evaluator-checks { display: flex; gap: 10px; flex-wrap: wrap; }
.eval-import-eval-check { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; padding: 4px 10px; border: 1px solid var(--border); border-radius: 16px; transition: all .2s; }
.eval-import-eval-check:has(input:checked) { background: var(--accent); color: #fff; border-color: var(--accent); }
.eval-import-eval-check input { display: none; }

/* 双雷达预览（导入） */
.eval-import-radars { display: flex; gap: 16px; margin-bottom: 16px; justify-content: center; }
.eval-import-radar-card { text-align: center; flex: 1; padding: 12px; background: var(--bg-secondary); border-radius: 12px; }
.eval-import-radar-card h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text-primary); }

/* 双雷达展示（画像页） */
.profile-dual-radar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile-radar-card { text-align: center; }
.profile-radar-card .radar-legend { justify-content: center; }

/* 导入预览 */
.eval-import-dims { flex: 1; max-height: 400px; overflow-y: auto; }
.eval-import-dim { margin-bottom: 12px; }
.eval-import-dim-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--bg-secondary); border-radius: 8px; margin-bottom: 4px; }
.eval-import-dim-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.eval-import-dim-avg { font-size: 14px; font-weight: 800; }
.eval-import-item { display: flex; justify-content: space-between; padding: 3px 10px 3px 20px; font-size: 12px; color: var(--text-secondary); }
.eval-import-item-name { flex: 1; }
.eval-import-item-avg { font-weight: 600; color: var(--text-primary); min-width: 30px; text-align: right; }
.eval-score-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.eval-score-row { display: flex; align-items: center; gap: 10px; }
.eval-score-row label { width: 80px; font-size: 13px; text-align: right; }
.eval-score-row input[type="range"] { flex: 1; }
.eval-range-val { width: 24px; font-weight: 600; text-align: center; }

/* --- 摘要统计条（会议/带教通用）--- */
.growth-summary-bar { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.growth-summary-item { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--surface); border-radius: 12px; border: 1px solid var(--border); flex: 1; min-width: 120px; }
.growth-summary-icon { font-size: 22px; flex-shrink: 0; }
.growth-summary-data { display: flex; flex-direction: column; }
.growth-summary-num { font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.growth-summary-label { font-size: 11px; color: var(--text-secondary); }
.growth-summary-num.danger { color: var(--danger, #C27171); }
.growth-summary-num.warn { color: #D4A042; }
.growth-summary-num.success { color: var(--success, #6B9E78); }

/* --- 会议洞察 --- */
.meeting-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.meeting-header h2 { margin: 0; font-size: 20px; }
.meeting-list { display: flex; flex-direction: column; gap: 12px; }
.meeting-card { background: var(--surface); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.meeting-card.selected { border-color: var(--accent); }
.meeting-card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; cursor: pointer; }
.meeting-card-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.meeting-card-info h4 { margin: 0; font-size: 15px; }
.meeting-date { font-size: 12px; color: var(--text-secondary); }
.meeting-status-tag { font-size: 12px; font-weight: 600; }
.meeting-card-actions { display: flex; gap: 6px; align-items: center; }
.meeting-observations { padding: 0 16px 16px; border-top: 1px solid var(--border); }
.meeting-member-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.meeting-member-check { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.meeting-member-check input { margin: 0; }
.meeting-file-upload-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.meeting-batch-list { background: var(--bg-secondary); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.meeting-batch-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px; background: var(--bg-card); border-radius: 6px; }
.meeting-batch-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-batch-size { color: var(--text-secondary); font-size: 12px; }

/* 会议视图切换 */
.meeting-view-tabs { display: flex; gap: 0; margin: 16px 0 12px; border-bottom: 2px solid var(--border); }
.meeting-view-tab { padding: 8px 20px; border: none; background: none; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; }
.meeting-view-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.meeting-view-tab:hover { color: var(--text-primary); }

/* 会议手风琴 */
.meeting-accordion { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.meeting-accordion-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-secondary); cursor: pointer; user-select: none; transition: background .2s; }
.meeting-accordion-header:hover { background: rgba(192,139,92,0.08); }
.meeting-accordion-arrow { font-size: 10px; color: var(--text-hint); transition: transform .2s; display: inline-block; }
.meeting-accordion-arrow.expanded { transform: rotate(90deg); }
.meeting-accordion-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); flex: 1; }
.meeting-accordion-count { font-size: 12px; color: var(--text-hint); white-space: nowrap; }
.meeting-accordion-body { padding: 8px; }
.meeting-accordion-body .meeting-card { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }

/* 会议归档 */
.meeting-archived-tag { font-size: 11px; padding: 1px 6px; background: rgba(0,0,0,0.06); color: var(--text-hint); border-radius: 6px; }
.meeting-card.archived { opacity: 0.6; }
.meeting-card.archived:hover { opacity: 0.85; }
.meeting-archive-toggle { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.meeting-archive-toggle input { margin: 0; }

/* 观察点 */
.obs-card { padding: 12px; border: 1px solid var(--border); border-radius: 8px; margin-top: 10px; }
.obs-card-header { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.obs-member { font-weight: 600; font-size: 13px; }
.obs-priority { color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 10px; font-weight: 700; }
.obs-category { font-size: 12px; font-weight: 600; }
.obs-content { margin: 0 0 4px; font-size: 13px; color: var(--text-primary); }
.obs-suggestion { margin: 0 0 6px; font-size: 12px; color: var(--text-secondary); }
.obs-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.obs-linked { font-size: 12px; color: var(--text-secondary); }
.coaching-status-pill { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 100px; white-space: nowrap; }
.coaching-status-pill.open { color: #b8862f; background: rgba(212,160,66,0.16); }
.coaching-status-pill.resolved { color: var(--success, #6B9E78); background: rgba(107,158,120,0.16); }

/* --- 带教追踪 --- */
.coaching-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.coaching-header h2 { margin: 0; font-size: 20px; }
.coaching-filters { display: flex; gap: 8px; align-items: center; }
.coaching-filter-select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; }
.coaching-list { display: flex; flex-direction: column; gap: 12px; }
.coaching-card { background: var(--surface); border-radius: 12px; padding: 16px; border: 1px solid var(--border); }
.coaching-card-header { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.coaching-priority { color: #fff; font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 700; }
.coaching-member { font-weight: 600; font-size: 14px; }
.coaching-status { font-size: 12px; border: 1px solid; padding: 1px 8px; border-radius: 10px; }
.coaching-category { font-size: 12px; font-weight: 600; }
.coaching-title { margin: 0 0 4px; font-size: 15px; color: var(--text-primary); }
.coaching-desc { margin: 0 0 10px; font-size: 13px; color: var(--text-secondary); }
.coaching-actions-list { padding: 10px 0; border-top: 1px solid var(--border); margin-top: 8px; }
.coaching-action-item { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13px; }
.coaching-action-date { color: var(--text-secondary); font-size: 12px; flex-shrink: 0; }
.coaching-action-text { color: var(--text-primary); }
.coaching-action-result { color: var(--accent); font-style: italic; }
.coaching-card-footer { display: flex; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

.okr-view { padding: 24px 28px 60px; max-width: 960px; margin: 0 auto; }
.okr-header { margin-bottom: 24px; }
.okr-header-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.okr-header h2 { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0; }
.okr-section-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.okr-section-tab { padding: 8px 20px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; cursor: pointer; color: var(--text-secondary); transition: all .2s; font-weight: 500; }
.okr-section-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.okr-section-tab:hover:not(.active) { background: var(--bg-secondary); color: var(--text-primary); }
.okr-dept-tabs { display: flex; gap: 6px; }
.okr-dept-tab { padding: 5px 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; cursor: pointer; color: var(--text-secondary); transition: all .2s; }
.okr-dept-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.okr-dept-tab:hover:not(.active) { background: var(--bg-secondary); color: var(--text-primary); }
.okr-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.okr-cycle-select { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; min-width: 180px; }
.okr-ai-group { display: flex; gap: 6px; align-items: center; }
.okr-month-input { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; width: 140px; }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-dark, #8a6b4a); }
.okr-io-group { display: flex; gap: 6px; align-items: center; }
.okr-export-dropdown { position: relative; }
.okr-export-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg, 0 4px 16px rgba(0,0,0,0.12)); z-index: 100; min-width: 160px; overflow: hidden; }
.okr-export-menu button { display: block; width: 100%; padding: 10px 16px; border: none; background: none; text-align: left; cursor: pointer; font-size: 14px; color: var(--text-primary); transition: background 0.15s; }
.okr-export-menu button:hover { background: var(--bg-hover, #F3ECE4); }
.okr-export-menu button:not(:last-child) { border-bottom: 1px solid var(--border-light); }
.okr-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.okr-empty-icon { font-size: 48px; margin-bottom: 12px; }
.okr-empty p { font-size: 14px; }

/* Objective Card */
.okr-obj-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 20px; overflow: hidden; }
.okr-obj-header { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 16px; border-bottom: 1px solid var(--border-light); }
.okr-obj-index { font-size: 13px; font-weight: 800; color: #fff; background: var(--accent); width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.okr-obj-content { flex: 1; min-width: 0; }
.okr-obj-title { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.okr-obj-desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.okr-obj-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.okr-obj-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Progress Ring */
.okr-progress-ring { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.okr-p-low { border-color: #e5a0a0; color: #c44; }
.okr-p-mid { border-color: #e5c77a; color: #b89a2a; }
.okr-p-good { border-color: #7ac4a0; color: #3a8a5a; }
.okr-p-done { border-color: #6a9e78; color: #4a8060; background: rgba(106,158,120,0.08); }

/* Score Badge */
.okr-score-badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 13px; font-weight: 700; }
.okr-s-good { background: rgba(106,158,120,0.15); color: #3a7a50; }
.okr-s-mid { background: rgba(200,180,80,0.15); color: #8a7a20; }
.okr-s-low { background: rgba(200,100,100,0.15); color: #a04040; }

/* KR List */
.okr-kr-list { padding: 12px 20px 16px; }
.okr-kr-item { padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.okr-kr-item:last-child { border-bottom: none; }
.okr-kr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.okr-kr-index { font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(156,123,92,0.1); padding: 2px 8px; border-radius: 6px; flex-shrink: 0; }
.okr-kr-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.okr-kr-actions { display: flex; gap: 2px; }
.okr-kr-empty { text-align: center; padding: 20px; color: var(--text-hint); font-size: 13px; }

/* KR Progress */
.okr-kr-progress { display: flex; align-items: center; gap: 10px; }
.okr-kr-bar { flex: 1; height: 8px; background: var(--border-light); border-radius: 4px; overflow: hidden; }
.okr-kr-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.okr-kr-bar-fill.okr-p-low { background: #e5a0a0; }
.okr-kr-bar-fill.okr-p-mid { background: #e5c77a; }
.okr-kr-bar-fill.okr-p-good { background: #7ac4a0; }
.okr-kr-bar-fill.okr-p-done { background: #6a9e78; }
.okr-kr-value { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.okr-kr-pct { font-size: 12px; font-weight: 700; color: var(--text-primary); min-width: 36px; text-align: right; }
.okr-auto-badge { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: linear-gradient(135deg, #E8F5E9, #C8E6C9); color: #2E7D32; font-weight: 600; cursor: help; white-space: nowrap; }

/* KR Update */
.okr-kr-update { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.okr-kr-input { width: 80px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.btn-xs { padding: 3px 10px; font-size: 11px; border-radius: 6px; }

/* KR Score */
.okr-kr-score { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; }
.okr-kr-score-comment { color: var(--text-secondary); flex: 1; }
.okr-kr-score-by { color: var(--text-hint); font-style: italic; }

/* Icon buttons */
.btn-icon { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; border-radius: 6px; transition: background 0.15s; }
.btn-icon:hover { background: rgba(0,0,0,0.06); }
.btn-icon-sm { background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px; border-radius: 4px; }
.btn-icon-sm:hover { background: rgba(0,0,0,0.06); }

/* Mobile */
@media (max-width: 480px) {
  .org-view { padding: 16px 12px 80px; }
  .org-tabs { flex-wrap: wrap; }
  .org-tabs button { font-size: 12px; padding: 8px 10px; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-main { min-width: 0; overflow: hidden; }
  .profile-section { padding: 14px; overflow: hidden; word-break: break-word; }
  .profile-identity-card { flex-direction: row; text-align: left; padding: 16px; gap: 12px; display: flex; align-items: center; }
  .profile-identity-card .profile-avatar { margin: 0; width: 48px; height: 48px; font-size: 18px; }
  .radar-chart-container { flex-direction: column; }
  .radar-legend { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center; }
  .profile-dual-radar { grid-template-columns: 1fr; }
  .eval-import-radars { flex-direction: column; }
  .eval-card { padding: 12px; }
  .eval-ai-summary { padding: 10px 12px; word-break: break-word; }
  .ai-core-detail-section { overflow: hidden; }
  .ai-core-overall { word-break: break-word; }
  .ai-core-evidence { word-break: break-word; }
  .ai-core-reason-item { padding: 8px 10px; }
  .blindspot-item { flex-direction: column; gap: 4px; }
  .growth-summary-bar { gap: 8px; }
  .growth-summary-item { min-width: 0; padding: 10px 12px; }
  .coaching-header { flex-direction: column; align-items: stretch; }
  .coaching-filters { flex-wrap: wrap; }
  .okr-view { padding: 16px 12px 80px; }
  .okr-header-top { flex-direction: column; align-items: flex-start; }
  .okr-dept-tabs { width: 100%; overflow-x: auto; }
  .okr-toolbar { width: 100%; }
  .okr-cycle-select { flex: 1; min-width: 0; }
  .okr-obj-header { flex-wrap: wrap; padding: 14px; gap: 10px; }
  .okr-obj-meta { order: -1; width: 100%; justify-content: flex-end; }
  .okr-kr-list { padding: 10px 14px; }
  .okr-kr-progress { flex-wrap: wrap; }
  .okr-kr-update { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   Accounts Matrix Module (v1.6.0)
   ═══════════════════════════════════════════════════════════ */
.accounts-view { padding: 24px 28px 60px; max-width: 1200px; margin: 0 auto; }
.accounts-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.accounts-header h2 { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0; }
.accounts-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.accounts-filter-tabs { display: flex; gap: 2px; background: var(--bg-inset); border-radius: 8px; padding: 3px; }
.accounts-filter-tabs button { padding: 6px 14px; border-radius: 6px; border: none; background: transparent; cursor: pointer; font-size: 13px; color: var(--text-secondary); transition: all 0.2s; }
.accounts-filter-tabs button.active { background: var(--bg-surface); box-shadow: 0 1px 3px rgba(0,0,0,0.1); color: var(--text-primary); font-weight: 600; }
.accounts-search { padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; width: 160px; background: var(--bg-surface); }
.accounts-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.accounts-empty-icon { font-size: 48px; margin-bottom: 12px; }

/* Accounts sub-tabs */
.accounts-sub-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg-secondary); padding: 4px; border-radius: 12px; width: fit-content; }
.accounts-sub-tabs button { padding: 8px 20px; border: none; background: none; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.accounts-sub-tabs button:hover { color: var(--text-primary); background: rgba(255,255,255,0.5); }
.accounts-sub-tabs button.active { background: var(--bg-card); color: var(--text-primary); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Hot Rank */
.hotrank-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.hotrank-main-tabs { display: flex; gap: 4px; background: var(--bg-secondary); padding: 3px; border-radius: 10px; }
.hotrank-main-tabs button { padding: 6px 16px; border: none; background: none; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
.hotrank-main-tabs button.active { background: var(--bg-card); color: var(--text-primary); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.hotrank-actions { display: flex; align-items: center; gap: 10px; }
.hotrank-updated { font-size: 12px; color: var(--text-muted); }
.hotrank-desc-note { font-size: 12px; color: var(--text-muted); background: var(--bg-secondary); border-radius: 8px; padding: 8px 14px; margin-bottom: 12px; line-height: 1.6; }
.btn-more-cats { font-style: italic; opacity: 0.7; }
.hotrank-tag-filter { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.hotrank-tag-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.hotrank-tag-filter button { padding: 4px 14px; border: 1.5px solid var(--border); background: var(--bg-surface); border-radius: 20px; font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
.hotrank-tag-filter button:hover { border-color: var(--accent); color: var(--accent); }
.hotrank-tag-filter button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.hotrank-topic-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.hotrank-topic-tabs button { padding: 6px 16px; border: 1.5px solid var(--border); background: var(--bg-surface); border-radius: 20px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
.hotrank-topic-tabs button:hover { border-color: var(--accent); }
.hotrank-topic-tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.hotrank-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }

/* Bookmarklet Help */
.bookmarklet-help { position: relative; background: var(--bg-card); border: 1px solid var(--accent-light, #D4A574); border-radius: 14px; padding: 20px 24px; margin-bottom: 16px; }
.bookmarklet-help h4 { margin: 0 0 8px; font-size: 15px; color: var(--text-primary); }
.bookmarklet-help p { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.6; }
.bookmarklet-help-close { position: absolute; top: 12px; right: 16px; font-size: 20px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.bookmarklet-help-close:hover { color: var(--text-primary); }
.bookmarklet-steps { display: flex; flex-direction: column; gap: 12px; }
.bookmarklet-step { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.bookmarklet-step .step-num { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.bookmarklet-code { margin-top: 8px; padding: 10px 14px; background: var(--bg-secondary); border-radius: 8px; font-family: monospace; font-size: 11px; word-break: break-all; color: var(--text-primary); cursor: pointer; border: 1px solid var(--border); user-select: all; }
.bookmarklet-code:hover { background: var(--bg-surface, #F3ECE4); }

/* Hot Video List */
.hotrank-video-list { display: flex; flex-direction: column; gap: 2px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.hotrank-video-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; transition: background 0.15s; border-bottom: 1px solid var(--border-light, #f0ebe4); }
.hotrank-video-item:last-child { border-bottom: none; }
.hotrank-video-item:hover { background: var(--bg-surface); }
.hotrank-rank { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--text-muted); background: var(--bg-secondary); border-radius: 8px; flex-shrink: 0; }
.hotrank-rank.top-3 { background: linear-gradient(135deg, #C08B5C 0%, #D4A574 100%); color: #fff; }
.hotrank-video-cover { width: 72px; height: 96px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.hotrank-video-cover img { width: 100%; height: 100%; object-fit: cover; }
.hotrank-video-body { flex: 1; min-width: 0; }
.hotrank-video-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hotrank-video-title a { color: inherit; text-decoration: none; }
.hotrank-video-title a:hover { color: var(--accent); }
.hotrank-video-author { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.hotrank-author-name { font-weight: 500; }
.hotrank-video-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.hotrank-tag { font-size: 11px; padding: 1px 8px; background: #f3e8ff; color: #7c3aed; border-radius: 10px; }
.hotrank-video-metrics { display: flex; gap: 14px; flex-shrink: 0; }
.hotrank-metric { text-align: center; }
.hotrank-metric-val { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.hotrank-metric-lbl { display: block; font-size: 10px; color: var(--text-muted); }
.hotrank-metric-total { display: block; font-size: 9px; color: var(--text-light); margin-top: 1px; }
.hotrank-video-date { font-size: 11px; color: var(--text-muted); flex-shrink: 0; width: 78px; text-align: right; }
.hotrank-date-label { font-size: 9px; color: var(--text-light); margin-right: 4px; }

/* Hot Topic List */
.hotrank-topic-list { display: flex; flex-direction: column; gap: 2px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.hotrank-topic-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; transition: background 0.15s; border-bottom: 1px solid var(--border-light, #f0ebe4); }
.hotrank-topic-item:last-child { border-bottom: none; }
.hotrank-topic-item:hover { background: var(--bg-surface); }
.hotrank-topic-body { flex: 1; min-width: 0; }
.hotrank-topic-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
a.hotrank-topic-link { text-decoration: none; color: var(--text-primary); transition: color 0.2s; }
a.hotrank-topic-link:hover { color: var(--accent); text-decoration: underline; }
.hotrank-topic-goto { text-decoration: none; font-size: 13px; opacity: 0.4; transition: opacity 0.2s; }
.hotrank-topic-goto:hover { opacity: 1; }
.hotrank-topic-item:hover .hotrank-topic-goto { opacity: 0.7; }
.hotrank-topic-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.hotrank-hot-value { color: #e53e3e; font-weight: 600; }
.hotrank-topic-cat { padding: 1px 8px; background: var(--bg-secondary); border-radius: 10px; font-size: 11px; }
.hotrank-topic-trend { flex-shrink: 0; font-size: 18px; width: 30px; text-align: center; }
.trend-up { color: #e53e3e; }
.trend-down { color: #38a169; }
.trend-new { font-size: 14px; }

/* Mobile hotrank */
@media (max-width: 768px) {
  .accounts-sub-tabs { width: 100%; justify-content: center; }
  .accounts-sub-tabs button { padding: 7px 14px; font-size: 13px; flex: 1; text-align: center; }
  .hotrank-video-item { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .hotrank-video-cover { width: 56px; height: 74px; }
  .hotrank-video-metrics { gap: 10px; width: 100%; justify-content: space-around; padding-top: 8px; border-top: 1px dashed var(--border-light, #f0ebe4); }
  .hotrank-video-date { display: none; }
  .hotrank-header { flex-direction: column; align-items: flex-start; }
}

/* Account groups */
.accounts-group { margin-bottom: 28px; }
.accounts-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1.5px solid var(--border); }
.accounts-group-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.accounts-group-label { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.accounts-group-count { font-size: 12px; color: var(--text-muted); margin-left: 4px; }
/* Competitor Analysis */
.competitor-analysis-view { }
.competitor-analysis-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.ca-overall { background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; font-size: 14px; line-height: 1.8; color: var(--text-primary); }
.ca-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 20px; }
.ca-card { background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 16px; }
.ca-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.ca-field { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13px; line-height: 1.6; }
.ca-label { color: var(--text-muted); font-weight: 600; white-space: nowrap; min-width: 60px; flex-shrink: 0; }
.ca-tags-section { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ca-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; background: var(--bg-inset); color: var(--text-secondary); }
.ca-tag-red { background: #fef2f2; color: #dc2626; }
.ca-tag-blue { background: #eff6ff; color: #2563eb; }
.ca-tag-purple { background: #f3e8ff; color: #7c3aed; }
.ca-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.ca-list-card { background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.ca-list-card ul { margin: 0; padding-left: 18px; }
.ca-list-card li { font-size: 13px; line-height: 1.8; color: var(--text-primary); }
.ca-strengths { border-left: 3px solid #22c55e; }
.ca-weaknesses { border-left: 3px solid #f59e0b; }
.ca-learnings { border-left: 3px solid #3b82f6; }
.ca-diff { border-left: 3px solid #8b5cf6; }
.ca-diff p { font-size: 13px; line-height: 1.8; margin: 0; }
@media (max-width: 768px) { .ca-grid { grid-template-columns: 1fr; } .ca-columns { grid-template-columns: 1fr; } }

/* Account cards grid */
.accounts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.account-card { background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 20px; cursor: pointer; transition: all 0.2s; }
.account-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(156,123,92,0.12); transform: translateY(-2px); }
.account-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.account-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--mocha)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.account-avatar-lg { width: 52px; height: 52px; font-size: 22px; }
.account-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-card-info { flex: 1; min-width: 0; }
.account-card-name { font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-card-id { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.type-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.type-badge.own { background: #dbeafe; color: #1d4ed8; }
.type-badge.competitor { background: #fef3c7; color: #92400e; }
.desc-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; background: #f3e8ff; color: #7c3aed; flex-shrink: 0; }
.account-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.account-stat { text-align: center; }
.account-stat-val { display: block; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.account-stat-lbl { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.account-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tier-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--bg-inset); color: var(--espresso); }
.account-avg-views { font-size: 12px; color: var(--text-muted); }

/* Platform icons on account card */
.account-platform-icons { display: flex; gap: 4px; align-items: center; }
.platform-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-size: 13px; }
.platform-icon-inline { margin-right: 2px; font-size: 14px; }

/* Platform filter bar */
.platform-filter-bar { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.platform-filter-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-surface); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all 0.2s; }
.platform-filter-btn:hover { border-color: var(--accent); }
.platform-filter-btn.active { border-color: var(--accent); background: var(--accent-muted); color: var(--accent); font-weight: 700; }
.platform-filter-count { background: rgba(0,0,0,0.08); border-radius: 4px; padding: 1px 6px; font-size: 11px; margin-left: 2px; }
.platform-filter-edit { opacity: 0; font-size: 11px; margin-left: 2px; transition: opacity 0.15s; }
.platform-filter-btn:hover .platform-filter-edit { opacity: 0.6; }
.platform-filter-btn:hover .platform-filter-edit:hover { opacity: 1; }

/* Video platform tag */
.video-platform-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; margin-right: 4px; vertical-align: middle; }
.vd-platform-tag { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; margin-top: 8px; }

/* Form section hint */
.form-section-hint { font-size: 12px; color: var(--text-muted); background: var(--bg-inset); border-radius: 8px; padding: 10px 14px; margin-top: 8px; line-height: 1.5; }
.form-section-platform { font-size: 12px; font-weight: 500; margin-left: 8px; }

/* Account detail */
.account-detail-header { margin-bottom: 20px; }
.account-detail-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.btn-back { color: var(--text-muted); }
.account-detail-info { display: flex; align-items: center; gap: 12px; flex: 1; }
.account-detail-name { font-size: 20px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.account-detail-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.account-detail-actions { display: flex; gap: 6px; }
.account-stats-bar { display: flex; gap: 12px; flex-wrap: wrap; }
.account-stat-card { background: var(--bg-inset); border-radius: 10px; padding: 14px 20px; min-width: 110px; text-align: center; flex: 1; }
.account-stat-card.stat-hit { background: linear-gradient(135deg, #fff7ed, #fef3c7); }
.account-stat-card-val { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.account-stat-card-lbl { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Account detail tabs */
.account-detail-tabs { display: flex; gap: 4px; margin: 20px 0 16px; background: var(--bg-inset); border-radius: 10px; padding: 4px; width: fit-content; }
.account-detail-tabs button { padding: 8px 18px; border-radius: 8px; border: none; background: transparent; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all 0.2s; }
.account-detail-tabs button.active { background: var(--bg-surface); box-shadow: 0 1px 4px rgba(0,0,0,0.08); color: var(--text-primary); font-weight: 700; }
.account-tab-content { min-height: 200px; }
.account-desc-card { background: var(--bg-inset); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.account-desc-card h4 { margin: 0 0 8px; font-size: 14px; }
.account-desc-card p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* Overview section */
.overview-section-title { margin: 24px 0 12px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.overview-section-title:first-of-type { margin-top: 8px; }
.overview-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.overview-stats-5col { grid-template-columns: repeat(5, 1fr); }
.overview-stat-card { background: var(--bg-surface); border-radius: 12px; padding: 16px; text-align: center; border: 1px solid var(--border-light); transition: transform 0.15s; }
.overview-stat-highlight { background: linear-gradient(135deg, #7c3aed15, #a78bfa22); border-color: #a78bfa55; }
.overview-stat-highlight .overview-stat-value { color: #7c3aed; }
.overview-stat-highlight .overview-stat-label { color: #7c3aed; font-weight: 600; }
.overview-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.overview-stat-value { font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.overview-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.overview-stat-avg { font-size: 11px; color: var(--accent); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-light); }

/* Charts */
.overview-charts { margin: 20px 0; display: flex; flex-direction: column; gap: 16px; }
.chart-row-2col { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; }
.chart-card { background: var(--bg-surface); border-radius: 12px; padding: 16px; border: 1px solid var(--border-light); }
.chart-card.chart-full { width: 100%; }
.chart-card h5.chart-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 0 0 12px; }
.chart-subtitle { font-weight: 400; font-size: 11px; color: var(--text-muted); margin-left: 8px; }
@media (max-width: 768px) { .chart-row-2col { grid-template-columns: 1fr; } }

/* Video bar chart */
.video-bars-list { display: flex; flex-direction: column; gap: 6px; max-height: 600px; overflow-y: auto; }
.video-bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
.video-bar-row:hover { background: var(--bg-secondary); }
.video-bar-row.is-hit { background: #C2717108; }
.video-bar-row.is-hit:hover { background: #C2717115; }
.vbar-cover { width: 44px; height: 58px; border-radius: 6px; overflow: hidden; flex-shrink: 0; position: relative; background: var(--bg-secondary); }
.vbar-cover img { width: 100%; height: 100%; object-fit: cover; }
.vbar-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.vbar-hit-badge { position: absolute; top: -2px; right: -2px; font-size: 12px; }
.vbar-info { width: 120px; flex-shrink: 0; }
.vbar-title { font-size: 12px; font-weight: 500; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbar-date { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.vbar-metrics { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.vbar-metric { display: flex; align-items: center; gap: 6px; }
.vbar-metric-label { font-size: 10px; width: 14px; text-align: center; flex-shrink: 0; }
.vbar-track { flex: 1; height: 14px; background: var(--bg-secondary); border-radius: 7px; overflow: hidden; }
.vbar-fill { height: 100%; border-radius: 7px; transition: width 0.4s ease; min-width: 2px; }
.vbar-fill.vbar-views { background: linear-gradient(90deg, #5E8BA8, #7EABC8); }
.vbar-fill.vbar-likes { background: linear-gradient(90deg, #C08B5C, #D4A574); }
.video-bar-row.is-hit .vbar-fill.vbar-views { background: linear-gradient(90deg, #C27171, #D89090); }
.video-bar-row.is-hit .vbar-fill.vbar-likes { background: linear-gradient(90deg, #C27171, #D89090); }
.vbar-metric-val { font-size: 11px; font-weight: 600; color: var(--text-secondary); width: 52px; text-align: right; flex-shrink: 0; }

/* Ranking list */
.overview-ranking { display: flex; flex-direction: column; gap: 6px; }
.ranking-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-surface); border-radius: 10px; border: 1px solid var(--border-light); cursor: pointer; transition: all 0.15s; }
.ranking-item:hover { background: var(--bg-inset); transform: translateX(3px); }
.ranking-pos { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; background: var(--bg-inset); color: var(--text-muted); }
.ranking-pos.rank-1 { background: linear-gradient(135deg, #FFD700, #FFA500); color: #fff; }
.ranking-pos.rank-2 { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: #fff; }
.ranking-pos.rank-3 { background: linear-gradient(135deg, #CD7F32, #B8860B); color: #fff; }
.ranking-body { flex: 1; min-width: 0; }
.ranking-title { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.hit-badge-sm { font-size: 11px; margin-right: 4px; }
.ranking-bar-wrap { height: 4px; background: var(--bg-inset); border-radius: 2px; overflow: hidden; }
.ranking-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 2px; transition: width 0.4s ease; min-width: 2px; }
.ranking-metrics { display: flex; gap: 8px; font-size: 11px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.ranking-likes { color: #e74c3c; font-weight: 600; }

/* Recent videos grid */
.recent-videos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.recent-video-card { background: var(--bg-surface); border-radius: 10px; border: 1px solid var(--border-light); overflow: hidden; cursor: pointer; transition: all 0.15s; }
.recent-video-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.recent-video-cover { position: relative; aspect-ratio: 16/9; background: var(--bg-inset); overflow: hidden; }
.recent-video-cover img { width: 100%; height: 100%; object-fit: cover; }
.recent-video-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 28px; }
.recent-video-hit { position: absolute; top: 6px; right: 6px; font-size: 14px; }
.recent-video-info { padding: 10px; }
.recent-video-title { font-size: 12px; font-weight: 500; color: var(--text-primary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.recent-video-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.recent-video-date { margin-left: auto; color: var(--text-light); }

/* Tag stats */
.tag-stats-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-stat-item { display: flex; align-items: center; gap: 8px; background: var(--bg-surface); border-radius: 20px; padding: 6px 14px; border: 1px solid var(--border-light); font-size: 12px; }
.tag-stat-name { font-weight: 600; color: var(--text-primary); }
.tag-stat-count { color: var(--accent); }
.tag-stat-likes { color: var(--text-muted); font-size: 11px; }

@media (max-width: 768px) {
  .overview-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-stats-5col { grid-template-columns: repeat(3, 1fr); }
  .recent-videos-grid { grid-template-columns: repeat(2, 1fr); }
  .ranking-metrics { flex-direction: column; gap: 2px; }
  .overview-stat-value { font-size: 20px; }
}
@media (max-width: 480px) {
  .overview-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .overview-stats-5col { grid-template-columns: repeat(2, 1fr); }
  .overview-stat-card { padding: 12px 8px; }
  .overview-stat-value { font-size: 18px; }
  .recent-videos-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* Videos toolbar */
.videos-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.videos-filter-tabs { display: flex; gap: 2px; background: var(--bg-inset); border-radius: 8px; padding: 3px; }
.videos-filter-tabs button { padding: 5px 12px; border-radius: 6px; border: none; background: transparent; cursor: pointer; font-size: 12px; color: var(--text-secondary); }
.videos-filter-tabs button.active { background: var(--bg-surface); box-shadow: 0 1px 3px rgba(0,0,0,0.08); font-weight: 600; color: var(--text-primary); }
.videos-search { padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; width: 140px; background: var(--bg-surface); }

/* Video list (legacy) */
.video-list { display: flex; flex-direction: column; gap: 2px; }
.video-list-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 10px; cursor: pointer; transition: all 0.15s; }
.video-list-item:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.video-list-main { flex: 1; min-width: 0; }
.video-list-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.video-date { font-size: 11px; color: var(--text-hint); font-weight: 400; }
.video-list-actions { display: flex; gap: 4px; flex-shrink: 0; }
.hit-badge { display: inline-block; background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; }

/* Video Gallery Grid */
.video-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.video-gcard { background: var(--bg-surface); border: 1.5px solid var(--border-light); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.2s; position: relative; }
.video-gcard:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(156,123,92,0.12); transform: translateY(-2px); }
.video-gcard-cover { position: relative; width: 100%; padding-top: 133%; background: var(--bg-inset); overflow: hidden; }
.video-gcard-cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.video-gcard-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; opacity: 0.2; }
.video-gcard-plays { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.65); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; backdrop-filter: blur(4px); }
.video-gcard-hit { position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.video-gcard-actions { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; z-index: 2; }
.video-gcard:hover .video-gcard-actions { opacity: 1; }
.video-gcard-actions .btn { background: rgba(255,255,255,0.9); backdrop-filter: blur(4px); border-radius: 6px; }
.video-gcard-body { padding: 10px 12px 12px; }
.video-gcard-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; min-height: 36px; }
.video-gcard-metrics { display: flex; gap: 8px; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.video-gcard-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.video-gcard-tags .video-tag { font-size: 10px; padding: 1px 6px; }

/* Sync button and info */
.btn-sync { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: none; }
.btn-sync:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.btn-sync:disabled { opacity: 0.6; cursor: not-allowed; }
.sync-info { font-size: 11px; color: var(--text-hint); margin-bottom: 12px; }
.feigua-range-tag { font-size: 11px; color: #c62828; background: #fce4ec; padding: 1px 6px; border-radius: 8px; cursor: help; }
.feigua-range-tag-sm { font-size: 10px; color: #888; }
.feigua-range-note { font-size: 10px; color: #b57a2a; }

/* Video metrics */
.video-metrics-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.video-metric { text-align: center; min-width: 50px; }
.vm-val { display: block; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.vm-lbl { display: block; font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.video-metrics-inline { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }

/* Video tags */
.video-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.video-tag { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.video-tag.content { background: #ede9fe; color: #6d28d9; }
.video-tag.audience { background: #fce7f3; color: #be185d; }

/* Tag selector in forms */
.tag-selector { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-option { padding: 4px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; background: var(--bg-inset); color: var(--text-secondary); border: 1.5px solid transparent; transition: all 0.15s; user-select: none; }
.tag-option:hover { border-color: var(--accent); }
.tag-option.selected { background: #ede9fe; color: #6d28d9; border-color: #8b5cf6; }
.tag-option.audience.selected { background: #fce7f3; color: #be185d; border-color: #ec4899; }
.form-section-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 16px 0 10px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.metrics-row { display: flex; gap: 8px; flex-wrap: wrap; }
.metrics-row .form-group { flex: 1; min-width: 80px; }
.script-textarea { font-family: inherit; line-height: 1.8; resize: vertical; }

/* Video detail modal */
.modal-xl { max-width: 800px; width: 95%; }
.video-detail-body { max-height: 70vh; overflow-y: auto; }
.vd-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); }
.vd-section:last-child { border-bottom: none; }
.vd-section h4 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 10px; }
.vd-meta { display: flex; gap: 16px; margin-bottom: 12px; font-size: 13px; }
.vd-link { color: var(--accent); text-decoration: none; }
.vd-link:hover { text-decoration: underline; }
.vd-date { color: var(--text-muted); }
.vd-metrics { margin-bottom: 8px; }
.vd-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; white-space: pre-wrap; }
.vd-script { font-size: 13px; color: var(--text-secondary); line-height: 1.8; white-space: pre-wrap; background: var(--bg-inset); border-radius: 8px; padding: 14px; max-height: 300px; overflow-y: auto; }

/* AI actions */
.vd-ai-actions { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }

/* Analysis cards */
.analysis-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.analysis-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.analysis-type-badge { padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.analysis-type-badge.hit_attribution { background: #fff7ed; color: #c2410c; }
.analysis-type-badge.comment_analysis { background: #eff6ff; color: #1d4ed8; }
.analysis-video-title { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-primary, #2C2520); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 10px; min-width: 0; }
.analysis-time { font-size: 11px; color: var(--text-hint); white-space: nowrap; }
.analysis-card-collapse { border: 1px solid var(--border-light, #F0E8DF); border-radius: 10px; margin-bottom: 8px; overflow: hidden; transition: box-shadow 0.15s; }
.analysis-card-collapse:hover { box-shadow: 0 2px 8px rgba(74,60,49,0.06); }
.analysis-card-collapse.expanded { border-color: var(--accent, #9C7B5C); box-shadow: 0 2px 12px rgba(156,123,92,0.1); }
.analysis-collapse-header { display: flex; align-items: center; padding: 12px 16px; cursor: pointer; gap: 8px; background: var(--bg-card, #fff); transition: background 0.15s; }
.analysis-collapse-header:hover { background: var(--bg-secondary, #F3ECE4); }
.analysis-collapse-arrow { font-size: 10px; color: var(--text-muted, #B5A99A); width: 14px; flex-shrink: 0; transition: transform 0.15s; }
.analysis-collapse-summary { flex: 2; font-size: 12px; color: var(--text-secondary, #8C7E74); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.analysis-collapse-body { padding: 0 16px 16px; border-top: 1px solid var(--border-light, #F0E8DF); animation: fadeIn 0.15s ease; }
.analysis-collapse-actions { padding: 10px 0 4px; }

/* Methodology card */
.method-card { background: var(--bg-card, #fff); border: 1px solid var(--border-light, #F0E8DF); border-radius: 12px; padding: 20px; }
.method-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.method-card-header h4 { margin: 0; }
.method-card-actions { display: flex; gap: 8px; }
.method-empty { text-align: center; padding: 20px; color: var(--text-muted, #B5A99A); font-size: 14px; }
.method-overall { font-size: 14px; line-height: 1.6; color: var(--text-primary, #2C2520); padding: 12px 16px; background: linear-gradient(135deg, rgba(156,123,92,0.06), rgba(156,123,92,0.02)); border-radius: 8px; margin-bottom: 8px; }
.method-meta { font-size: 11px; color: var(--text-muted, #B5A99A); margin-bottom: 12px; }
.method-sections { display: flex; flex-direction: column; gap: 4px; }
.method-section-item { border: 1px solid var(--border-light, #F0E8DF); border-radius: 8px; overflow: hidden; }
.method-section-item.expanded { border-color: var(--accent, #9C7B5C); }
.method-section-header { display: flex; align-items: center; padding: 10px 14px; cursor: pointer; gap: 8px; transition: background 0.15s; }
.method-section-header:hover { background: var(--bg-secondary, #F3ECE4); }
.method-section-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary, #2C2520); }
.method-section-count { font-size: 11px; color: var(--text-muted, #B5A99A); background: var(--bg-secondary, #F3ECE4); padding: 2px 8px; border-radius: 10px; }
.method-section-body { padding: 12px 14px 14px; border-top: 1px solid var(--border-light, #F0E8DF); animation: fadeIn 0.15s ease; }
.method-section-content { font-size: 13px; line-height: 1.6; color: var(--text-secondary, #8C7E74); margin: 0 0 10px; }
.method-patterns { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.method-pattern-item { font-size: 13px; padding: 6px 12px; background: var(--bg-secondary, #F3ECE4); border-radius: 6px; color: var(--text-primary, #2C2520); border-left: 3px solid var(--accent, #9C7B5C); }
.method-cases { font-size: 12px; color: var(--text-muted, #B5A99A); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.method-cases-label { font-weight: 500; }
.method-outdated { color: var(--warning, #D4A042); cursor: pointer; font-weight: 500; }
.method-outdated:hover { text-decoration: underline; }
.method-model-tag { display: inline-block; font-size: 11px; color: var(--text-muted, #B5A99A); background: var(--bg-secondary, #F3ECE4); padding: 1px 8px; border-radius: 8px; margin-left: 4px; }
.method-case-tag { background: rgba(156,123,92,0.08); padding: 2px 8px; border-radius: 4px; font-size: 11px; }

/* Script review */
.review-upload-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.review-upload-btn { cursor: pointer; background: var(--bg-secondary, #F3ECE4); border: 1px dashed var(--border, #E0D5C7); }
.review-upload-btn:hover { background: var(--accent-light, #D4A574); color: #fff; border-style: solid; }
.review-file-name { font-size: 12px; color: var(--accent, #9C7B5C); font-weight: 600; background: rgba(156,123,92,0.08); padding: 2px 8px; border-radius: 6px; }

/* Strategy tab */
.strategy-view { display: flex; flex-direction: column; gap: 16px; }
.strategy-section { display: flex; gap: 14px; padding: 16px 18px; background: var(--bg-card, #fff); border-radius: 12px; border: 1px solid var(--border, #E0D5C7); }
.strategy-section-icon { font-size: 22px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary, #F3ECE4); border-radius: 10px; }
.strategy-section-body { flex: 1; min-width: 0; }
.strategy-section-body h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text-primary, #2C2520); }
.strategy-section-body p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-secondary, #8C7E74); }
.strategy-positioning { border-left: 4px solid var(--accent, #9C7B5C); }
.strategy-value { border-left: 4px solid #6B9E78; }
.strategy-milestones { display: flex; flex-direction: column; gap: 10px; }
.strategy-milestone { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: var(--bg-secondary, #F3ECE4); border-radius: 8px; }
.milestone-status-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; background: var(--text-muted, #B5A99A); }
.strategy-milestone.in_progress .milestone-status-dot { background: var(--accent, #9C7B5C); box-shadow: 0 0 0 3px rgba(156,123,92,0.2); }
.strategy-milestone.done .milestone-status-dot { background: #6B9E78; }
.milestone-content { flex: 1; min-width: 0; }
.milestone-title { font-size: 13px; font-weight: 600; color: var(--text-primary, #2C2520); }
.milestone-desc { font-size: 12px; color: var(--text-secondary, #8C7E74); margin-top: 2px; }
.milestone-status-tag { font-size: 11px; white-space: nowrap; padding: 2px 8px; border-radius: 6px; background: rgba(156,123,92,0.08); color: var(--text-muted, #B5A99A); }
.strategy-milestone.in_progress .milestone-status-tag { background: rgba(156,123,92,0.15); color: var(--accent, #9C7B5C); }
.strategy-milestone.done .milestone-status-tag { background: rgba(107,158,120,0.15); color: #6B9E78; }
.strategy-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.strategy-tag { font-size: 13px; padding: 5px 14px; background: rgba(156,123,92,0.1); color: var(--accent, #9C7B5C); border-radius: 16px; font-weight: 500; }

/* Strategy edit form */
.strategy-edit-form { background: var(--bg-card, #fff); border-radius: 12px; border: 1px solid var(--border, #E0D5C7); padding: 20px; }
.strategy-edit-form .form-group { margin-bottom: 14px; }
.strategy-edit-form .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary, #2C2520); margin-bottom: 5px; }
.strategy-edit-form input[type="text"], .strategy-edit-form textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border, #E0D5C7); border-radius: 8px; font-size: 13px; background: var(--bg-secondary, #F3ECE4); color: var(--text-primary); box-sizing: border-box; }
.strategy-edit-form textarea { resize: vertical; font-family: inherit; }
.milestone-edit-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.milestone-edit-title { flex: 2; }
.milestone-edit-desc { flex: 3; }
.milestone-edit-status { flex: 0 0 auto; width: 90px; padding: 6px 8px; border: 1px solid var(--border, #E0D5C7); border-radius: 8px; font-size: 12px; background: var(--bg-secondary, #F3ECE4); }
.strategy-edit-form .form-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Content Lines */
.strategy-content-lines { border-left: 4px solid #D4A042; }
.content-lines-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.content-line-card { padding: 12px 14px; background: var(--bg-secondary, #F3ECE4); border-radius: 10px; border: 1px solid rgba(156,123,92,0.1); }
.content-line-name { font-size: 14px; font-weight: 700; color: var(--text-primary, #2C2520); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--border, #E0D5C7); }
.content-line-meta { font-size: 12px; color: var(--text-secondary, #8C7E74); line-height: 1.6; margin-bottom: 3px; }
.content-line-label { display: inline-block; font-weight: 600; color: var(--text-primary, #2C2520); min-width: 56px; margin-right: 4px; }
.content-line-keywords { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.content-line-kw { font-size: 11px; padding: 2px 10px; background: rgba(212,160,66,0.12); color: #A07828; border-radius: 12px; font-weight: 500; }

/* Content Blocks */
.strategy-blocks { border-left: 4px solid #7B68AE; }
.content-blocks-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.content-block-card { padding: 12px 14px; background: var(--bg-secondary, #F3ECE4); border-radius: 10px; border: 1px solid rgba(156,123,92,0.1); display: flex; flex-direction: column; gap: 6px; }
.content-block-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.content-block-name { font-size: 13px; font-weight: 700; color: var(--text-primary, #2C2520); }
.content-block-ratio { font-size: 11px; font-weight: 600; padding: 2px 8px; background: rgba(123,104,174,0.15); color: #7B68AE; border-radius: 8px; white-space: nowrap; }
.content-block-target { font-size: 12px; color: var(--text-secondary, #8C7E74); line-height: 1.5; }
.content-block-logic { font-size: 11px; color: var(--text-muted, #B5A99A); line-height: 1.5; font-style: italic; }

/* Content Grading */
.strategy-grading { border-left: 4px solid #5B8DB8; }
.content-grading-table { border-radius: 8px; overflow: hidden; border: 1px solid var(--border, #E0D5C7); font-size: 12px; }
.grading-header { display: flex; background: var(--bg-secondary, #F3ECE4); font-weight: 600; color: var(--text-primary, #2C2520); border-bottom: 2px solid var(--border, #E0D5C7); }
.grading-row { display: flex; border-bottom: 1px solid var(--border, #E0D5C7); background: var(--bg-card, #fff); }
.grading-row:last-child { border-bottom: none; }
.grading-row:hover { background: var(--bg-secondary, #F3ECE4); }
.grading-col { padding: 9px 10px; line-height: 1.5; color: var(--text-secondary, #8C7E74); overflow: hidden; }
.grading-col-level { flex: 0 0 72px; text-align: center; display: flex; align-items: center; justify-content: center; }
.grading-col-def { flex: 1.2; min-width: 0; }
.grading-col-target { flex: 0.7; min-width: 0; }
.grading-col-play { flex: 0.8; min-width: 0; }
.grading-col-strategy { flex: 1.3; min-width: 0; }
.grading-level-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; background: rgba(91,141,184,0.12); color: #5B8DB8; }
.grading-level-s { background: rgba(212,160,66,0.18); color: #A07828; }
.grading-level-a { background: rgba(107,158,120,0.18); color: #4B8458; }
.grading-level-b { background: rgba(91,141,184,0.15); color: #4A7A9E; }
.grading-level-c { background: rgba(156,123,92,0.12); color: var(--text-secondary, #8C7E74); }

/* Strategy Doc Preview */
.strategy-doc-section { margin-top: 8px; }
.strategy-doc-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent, #9C7B5C); border: 1px dashed var(--accent, #9C7B5C); background: transparent; border-radius: 8px; padding: 8px 16px; cursor: pointer; transition: all 0.2s; }
.strategy-doc-toggle:hover { background: rgba(156,123,92,0.08); }
.strategy-doc-preview { margin-top: 12px; padding: 20px 24px; background: var(--bg-card, #fff); border: 1px solid var(--border, #E0D5C7); border-radius: 12px; max-height: 520px; overflow-y: auto; line-height: 1.8; color: var(--text-primary, #2C2520); font-size: 13px; }
.strategy-doc-preview::-webkit-scrollbar { width: 5px; }
.strategy-doc-preview::-webkit-scrollbar-thumb { background: var(--border, #E0D5C7); border-radius: 4px; }

/* Simple Markdown rendered styles */
.strategy-doc-preview .smd-h1 { font-size: 22px; font-weight: 800; margin: 24px 0 12px; color: var(--text-primary, #2C2520); border-bottom: 2px solid var(--border, #E0D5C7); padding-bottom: 8px; }
.strategy-doc-preview .smd-h2 { font-size: 18px; font-weight: 700; margin: 20px 0 10px; color: var(--text-primary, #2C2520); border-bottom: 1px solid var(--border, #E0D5C7); padding-bottom: 6px; }
.strategy-doc-preview .smd-h3 { font-size: 15px; font-weight: 700; margin: 16px 0 8px; color: var(--text-primary, #2C2520); }
.strategy-doc-preview .smd-h4 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; color: var(--text-primary, #2C2520); }
.strategy-doc-preview .smd-h5, .strategy-doc-preview .smd-h6 { font-size: 13px; font-weight: 600; margin: 12px 0 6px; color: var(--text-secondary, #8C7E74); }
.strategy-doc-preview p { margin: 6px 0; }
.strategy-doc-preview strong { font-weight: 700; color: var(--text-primary, #2C2520); }
.strategy-doc-preview em { font-style: italic; }
.strategy-doc-preview .smd-blockquote { margin: 10px 0; padding: 10px 16px; border-left: 3px solid var(--accent, #9C7B5C); background: rgba(156,123,92,0.06); border-radius: 0 8px 8px 0; color: var(--text-secondary, #8C7E74); font-style: italic; }
.strategy-doc-preview .smd-ul, .strategy-doc-preview .smd-ol { margin: 8px 0; padding-left: 24px; }
.strategy-doc-preview .smd-ul li, .strategy-doc-preview .smd-ol li { margin-bottom: 4px; }
.strategy-doc-preview .smd-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; }
.strategy-doc-preview .smd-table th { background: var(--bg-secondary, #F3ECE4); font-weight: 600; text-align: left; padding: 8px 10px; border: 1px solid var(--border, #E0D5C7); color: var(--text-primary, #2C2520); }
.strategy-doc-preview .smd-table td { padding: 7px 10px; border: 1px solid var(--border, #E0D5C7); color: var(--text-secondary, #8C7E74); }
.strategy-doc-preview .smd-table tr:hover td { background: rgba(156,123,92,0.04); }
.strategy-doc-preview .smd-code-block { background: #2C2520; color: #E8DDD1; padding: 14px 16px; border-radius: 8px; overflow-x: auto; font-size: 12px; line-height: 1.6; margin: 10px 0; }
.strategy-doc-preview .smd-inline-code { background: rgba(156,123,92,0.1); color: var(--accent, #9C7B5C); padding: 1px 6px; border-radius: 4px; font-size: 12px; font-family: 'Courier New', monospace; }
.strategy-doc-preview .smd-hr { border: none; border-top: 1px solid var(--border, #E0D5C7); margin: 16px 0; }

/* Mobile responsive for strategy new sections */
@media (max-width: 480px) {
  .content-lines-grid { grid-template-columns: 1fr; }
  .content-blocks-row { grid-template-columns: 1fr 1fr; }
  .content-grading-table { font-size: 11px; overflow-x: auto; }
  .grading-col { padding: 6px 6px; }
  .grading-col-level { flex: 0 0 52px; }
  .strategy-doc-preview { padding: 14px 16px; max-height: 400px; }
}

/* Cross-Account Methodology */
/* Methodology inner tabs */
.methodology-inner-tabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--bg-secondary, #F3ECE4); border-radius: 10px; padding: 4px; }
.methodology-inner-tabs button { flex: 1; padding: 9px 16px; border: none; background: transparent; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-secondary, #8C7E74); transition: all 0.2s; }
.methodology-inner-tabs button.active { background: var(--bg-card, #fff); color: var(--accent, #9C7B5C); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.methodology-inner-tabs button:hover:not(.active) { color: var(--text-primary, #2C2520); }

/* Hotrank daily insights */
.hotrank-insights-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.insights-timeline { display: flex; flex-direction: column; gap: 12px; }
.insight-card { background: var(--bg-card, #fff); border: 1px solid var(--border, #E0D5C7); border-radius: 12px; padding: 16px 20px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.insight-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.insight-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.insight-date { font-size: 15px; font-weight: 700; color: var(--accent, #9C7B5C); }
.insight-meta { font-size: 11px; color: var(--text-muted, #B5A99A); display: flex; gap: 8px; align-items: center; }
.insight-card-summary { font-size: 13px; line-height: 1.7; color: var(--text-primary, #2C2520); }
.insight-expand-hint { font-size: 11px; color: var(--text-light, #B5A99A); margin-top: 8px; text-align: center; }
.insight-card-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border, #E0D5C7); cursor: default; }
.insight-section { margin-bottom: 16px; }
.insight-section h4 { font-size: 13px; font-weight: 700; color: var(--text-primary, #2C2520); margin: 0 0 8px; }
.insight-section ul { margin: 0; padding-left: 18px; }
.insight-section li { font-size: 12px; color: var(--text-secondary, #8C7E74); line-height: 1.7; margin-bottom: 4px; }
.insight-section li strong { color: var(--text-primary, #2C2520); }
.insight-section li em { font-style: normal; color: var(--accent, #9C7B5C); }
.insight-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.insight-cat-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: 12px; background: rgba(156,123,92,0.08); color: var(--text-primary, #2C2520); }
.trend-up { color: #22c55e; font-weight: 700; } .trend-down { color: #ef4444; font-weight: 700; } .trend-stable { color: #9ca3af; }
.insight-formula { margin-bottom: 8px; font-size: 12px; color: var(--text-secondary, #8C7E74); }
.insight-formula strong { color: var(--text-primary, #2C2520); }
.insight-formula-examples { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.insight-takeaways li { color: var(--accent, #9C7B5C); font-weight: 600; }

/* Script Suggestions */
.script-suggestion-card.script-evaluated { border-left: 3px solid var(--success, #6B9E78); }
.script-detail-block { padding: 10px 0; border-bottom: 1px dashed var(--border, #E0D5C7); }
.script-detail-block:last-of-type { border-bottom: none; }
.script-hook { font-size: 13px; margin: 6px 0; padding: 6px 10px; background: rgba(156,123,92,0.06); border-radius: 8px; line-height: 1.6; }
.script-outline { margin: 8px 0; }
.script-outline-item { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; font-size: 13px; line-height: 1.6; }
.outline-section-label { flex-shrink: 0; font-weight: 600; white-space: nowrap; }
.outline-content { flex: 1; color: var(--text-primary, #2C2520); }
.outline-duration { flex-shrink: 0; font-size: 11px; }
.eval-pending-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: rgba(212,160,66,0.15); color: #D4A042; font-weight: 600; }
.script-eval-form, .script-eval-result { margin-top: 12px; padding: 12px; background: rgba(156,123,92,0.04); border-radius: 10px; border: 1px solid var(--border, #E0D5C7); }
.eval-stars-input { display: flex; gap: 4px; margin-bottom: 10px; }
.eval-stars-input span { font-size: 24px; cursor: pointer; color: #ddd; transition: color 0.15s; }
.eval-stars-input span.active { color: #D4A042; }
.eval-stars-input span:hover { color: #D4A042; }
.eval-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.eval-tag-chip { display: inline-block; padding: 4px 10px; border-radius: 14px; font-size: 12px; cursor: pointer; background: rgba(156,123,92,0.08); color: var(--text-secondary, #8C7E74); border: 1px solid transparent; transition: all 0.15s; user-select: none; }
.eval-tag-chip:hover { border-color: var(--accent, #9C7B5C); }
.eval-tag-chip.selected { background: var(--accent, #9C7B5C); color: #fff; border-color: var(--accent, #9C7B5C); }
.eval-comment-input { width: 100%; padding: 6px 10px; border: 1px solid var(--border, #E0D5C7); border-radius: 8px; font-size: 13px; background: var(--bg-card, #fff); }

/* Weekly Summary Card */
.weekly-summary-card { background: var(--bg-card, #fff); border: 1px solid var(--accent, #9C7B5C); border-radius: 14px; margin-bottom: 20px; overflow: hidden; }
.weekly-summary-card { cursor: pointer; }
.weekly-summary-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border, #E0D5C7); flex-wrap: wrap; gap: 8px; }
.weekly-summary-title { display: flex; align-items: center; gap: 8px; }
.weekly-summary-title h3 { margin: 0; font-size: 16px; }
.weekly-summary-icon { font-size: 20px; }
.weekly-summary-meta { font-size: 12px; color: var(--text-secondary); }
.weekly-summary-actions { display: flex; align-items: center; gap: 10px; }
.weekly-summary-overview { padding: 16px 20px; font-size: 14px; line-height: 1.7; color: var(--text-primary); border-bottom: 1px solid var(--border, #E0D5C7); background: rgba(156,123,92,0.03); }
.weekly-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.weekly-summary-section { padding: 14px 20px; border-bottom: 1px solid var(--border-light, #f0e8de); }
.weekly-summary-section:nth-child(odd) { border-right: 1px solid var(--border-light, #f0e8de); }
.weekly-summary-section h4 { margin: 0 0 10px 0; font-size: 13px; color: var(--text-secondary); }
.weekly-pattern { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border-light, #f0e8de); }
.weekly-pattern:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.weekly-pattern-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.weekly-pattern-evidence { font-size: 12px; margin-top: 3px; }
.weekly-pattern-advice { font-size: 13px; color: var(--accent, #9C7B5C); font-weight: 600; margin-top: 3px; }
.confidence-tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.confidence-high { background: rgba(107,158,120,0.15); color: #6B9E78; }
.confidence-medium { background: rgba(212,160,66,0.15); color: #D4A042; }
.weekly-trend { padding: 6px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trend-strength { font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.strength-growing { background: rgba(107,158,120,0.15); color: #6B9E78; }
.strength-emerging { background: rgba(212,160,66,0.15); color: #D4A042; }
.strength-fading { background: rgba(194,113,113,0.12); color: #C27171; }
.weekly-playbook { padding: 6px 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; line-height: 1.6; }
.playbook-account { background: var(--accent, #9C7B5C); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.weekly-hooks { display: flex; flex-wrap: wrap; gap: 6px; }
.hook-pill { display: inline-block; padding: 4px 12px; border-radius: 16px; font-size: 12px; border: 1px solid var(--border, #E0D5C7); }
.hook-high { background: rgba(107,158,120,0.1); border-color: #6B9E78; color: #6B9E78; }
.hook-medium { background: rgba(212,160,66,0.08); border-color: #D4A042; color: #D4A042; }
.weekly-avoid-list { margin: 0; padding-left: 18px; }
.weekly-avoid-list li { font-size: 13px; color: #C27171; margin-bottom: 4px; }
.weekly-summary-focus { padding: 14px 20px; font-size: 13px; line-height: 1.6; background: rgba(156,123,92,0.04); border-top: 1px solid var(--border, #E0D5C7); }
.weekly-summary-empty { text-align: center; padding: 24px; }
.weekly-summary-empty-inner { background: var(--bg-card, #fff); border: 1px dashed var(--border, #E0D5C7); border-radius: 14px; padding: 24px; }
.weekly-summary-empty p { margin: 0 0 12px; color: var(--text-secondary); font-size: 14px; }

@media (max-width: 768px) {
  .weekly-summary-grid { grid-template-columns: 1fr; }
  .weekly-summary-section:nth-child(odd) { border-right: none; }
  .weekly-summary-header { padding: 12px 14px; }
  .weekly-summary-overview { padding: 12px 14px; }
  .weekly-summary-section { padding: 12px 14px; }
}
[data-theme="dark"] .weekly-summary-card { border-color: var(--accent, #C08B5C); }
[data-theme="dark"] .weekly-summary-overview { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .weekly-summary-focus { background: rgba(255,255,255,0.03); }

@media (max-width: 768px) {
  .methodology-inner-tabs button { font-size: 12px; padding: 7px 10px; }
  .insight-card { padding: 12px 14px; }
}

.cross-methodology-section { background: var(--bg-card, #fff); border: 1px solid var(--border, #E0D5C7); border-radius: 14px; margin-bottom: 20px; overflow: hidden; }
.cross-methodology-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; cursor: pointer; transition: background 0.15s; }
.cross-methodology-header:hover { background: rgba(156,123,92,0.04); }
.cross-methodology-title { display: flex; align-items: center; gap: 10px; }
.cross-methodology-icon { font-size: 22px; }
.cross-methodology-title h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary, #2C2520); }
.cross-methodology-meta { font-size: 12px; color: var(--text-muted, #B5A99A); }
.cross-methodology-meta .model-tag { display: inline-block; background: rgba(156,123,92,0.1); color: var(--accent, #9C7B5C); padding: 1px 6px; border-radius: 4px; font-size: 10px; margin-left: 6px; }
.cross-methodology-actions { display: flex; align-items: center; gap: 10px; }
.cross-methodology-toggle { color: var(--text-muted, #B5A99A); font-size: 12px; }
.cross-methodology-body { padding: 0 20px 18px; }
.cross-methodology-empty { padding: 20px; text-align: center; }
.cross-methodology-overall { font-size: 14px; line-height: 1.7; color: var(--text-primary, #2C2520); padding: 12px 16px; background: linear-gradient(135deg, rgba(156,123,92,0.06), rgba(156,123,92,0.02)); border-radius: 10px; margin-bottom: 16px; border-left: 3px solid var(--accent, #9C7B5C); }
.cross-methodology-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.cross-methodology-card { background: var(--bg-secondary, #F3ECE4); border-radius: 10px; padding: 14px 16px; transition: transform 0.15s, box-shadow 0.15s; }
.cross-methodology-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.cross-methodology-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary, #2C2520); margin-bottom: 8px; }
.cross-methodology-card-content { font-size: 12px; color: var(--text-secondary, #8C7E74); line-height: 1.6; margin-bottom: 10px; }
.cross-methodology-patterns { margin: 0; padding-left: 16px; }
.cross-methodology-patterns li { font-size: 12px; color: var(--text-primary, #2C2520); margin-bottom: 4px; line-height: 1.5; }
.cross-methodology-evidence { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.evidence-tag { font-size: 10px; background: rgba(156,123,92,0.1); color: var(--accent, #9C7B5C); padding: 2px 8px; border-radius: 10px; }
.cross-methodology-accounts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.cross-methodology-account-tag { background: var(--bg-secondary, #F3ECE4); border-radius: 10px; padding: 10px 14px; flex: 1; min-width: 200px; }
.cross-methodology-account-tag strong { font-size: 13px; color: var(--text-primary, #2C2520); display: block; margin-bottom: 4px; }
.account-role-text { font-size: 11px; color: var(--accent, #9C7B5C); display: block; margin-bottom: 2px; }
.account-best-text { font-size: 11px; color: var(--text-secondary, #8C7E74); }
.cross-methodology-time { font-size: 11px; text-align: right; }

@media (max-width: 768px) {
  .cross-methodology-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cross-methodology-grid { grid-template-columns: 1fr; }
  .cross-methodology-header { padding: 12px 14px; }
  .cross-methodology-body { padding: 0 14px 14px; }
  .cross-methodology-title h3 { font-size: 14px; }
  .cross-methodology-account-tag { min-width: 100%; }
}

.review-score-badge { color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 10px; flex-shrink: 0; }
.review-result-inline { margin-top: 16px; padding: 16px; background: var(--bg-secondary, #F3ECE4); border-radius: 10px; }
.review-result-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-score-big { font-size: 36px; font-weight: 800; }
.review-verdict { font-size: 16px; font-weight: 600; color: var(--text-primary, #2C2520); }
.review-checks { display: flex; flex-direction: column; gap: 8px; }
.review-check-item { display: flex; gap: 10px; padding: 10px 12px; background: var(--bg-card, #fff); border-radius: 8px; border-left: 3px solid var(--border, #E8DDD1); }
.review-check-item.pass { border-left-color: #6B9E78; }
.review-check-item.warning { border-left-color: #D4A042; }
.review-check-item.fail { border-left-color: #C27171; }
.review-check-icon { font-size: 16px; flex-shrink: 0; }
.review-check-body { flex: 1; min-width: 0; }
.review-check-dim { font-size: 13px; font-weight: 600; color: var(--text-primary, #2C2520); }
.review-check-finding { font-size: 12px; color: var(--text-secondary, #8C7E74); margin-top: 2px; }
.review-check-suggest { font-size: 12px; color: var(--accent, #9C7B5C); margin-top: 4px; }
.review-section { margin-top: 12px; }
.review-section h5 { font-size: 13px; margin: 0 0 6px; color: var(--text-primary, #2C2520); }
.review-section ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-secondary, #8C7E74); }
.review-section li { margin-bottom: 4px; }
.review-script-preview { margin-top: 12px; }
.review-script-preview h5 { font-size: 12px; color: var(--text-muted, #B5A99A); margin: 0 0 4px; }
.review-script-preview pre { font-size: 12px; background: var(--bg-secondary, #F3ECE4); padding: 10px; border-radius: 6px; white-space: pre-wrap; word-break: break-all; max-height: 150px; overflow-y: auto; color: var(--text-secondary, #8C7E74); margin: 0; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.analysis-section { margin-bottom: 14px; padding: 12px; background: var(--bg-inset); border-radius: 8px; }
.analysis-section:last-child { margin-bottom: 0; }
.analysis-section h5 { font-size: 13px; font-weight: 700; margin: 0 0 8px; color: var(--text-primary); }
.analysis-section p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 4px 0; }
.analysis-section ul { margin: 4px 0 0; padding-left: 20px; }
.analysis-section li { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 4px; }

/* Story structure */
.story-stage { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.stage-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--accent); color: #fff; flex-shrink: 0; white-space: nowrap; }
.stage-content { font-size: 13px; color: var(--text-secondary); flex: 1; }
.stage-technique { font-size: 11px; color: var(--text-muted); font-style: italic; flex-shrink: 0; }

/* Sentiment bar */
.sentiment-bar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; font-size: 11px; font-weight: 600; }
.s-positive { background: #86efac; color: #166534; display: flex; align-items: center; justify-content: center; }
.s-neutral { background: #fde68a; color: #854d0e; display: flex; align-items: center; justify-content: center; }
.s-negative { background: #fca5a5; color: #991b1b; display: flex; align-items: center; justify-content: center; }

/* Keyword pills */
.keyword-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.keyword-pill { padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.keyword-pill.empathy { background: #fef3c7; color: #92400e; }
.keyword-pill.complaint { background: #fee2e2; color: #991b1b; }
.keyword-pill.demand { background: #dbeafe; color: #1d4ed8; }

/* Top comment items */
.top-comment-item { padding: 10px; background: var(--bg-surface); border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--border-light); }
.top-comment-text { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.top-comment-likes { color: #ef4444; font-size: 12px; }
.top-comment-reason { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-style: italic; }

/* Comment section in video detail */
.vd-comment-form { background: var(--bg-inset); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.vd-comments-list { max-height: 300px; overflow-y: auto; }
.vd-comment-item { padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.vd-comment-item:last-child { border-bottom: none; }
.vd-comment-content { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.vd-comment-user { font-weight: 600; color: var(--text-primary); margin-right: 6px; }
.vd-comment-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--text-hint); }
.vd-comment-likes { color: #ef4444; }

/* Thresholds table */
.thresholds-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.thresholds-table th { padding: 8px 10px; background: var(--bg-inset); text-align: left; font-weight: 600; color: var(--text-secondary); font-size: 12px; border-bottom: 2px solid var(--border); }
.thresholds-table td { padding: 6px 4px; border-bottom: 1px solid var(--border-light); }
.tier-cell { font-weight: 600; color: var(--text-primary); padding-left: 10px !important; white-space: nowrap; }
.threshold-input { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; width: 100%; background: var(--bg-surface); }
.threshold-input.sm { width: 70px; }
.threshold-input.note { min-width: 120px; }

/* Helper classes used in accounts */
.loading-placeholder { text-align: center; padding: 40px; color: var(--text-muted); }
.empty-hint { text-align: center; padding: 20px; color: var(--text-muted); font-size: 13px; }
.btn-xs { padding: 2px 8px; font-size: 11px; border-radius: 4px; }

/* ═══════════════════════════════════════
   EXPENSE TRACKING
   ═══════════════════════════════════════ */
.expense-section { margin-top: 8px; }
.expense-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.expense-header h3 { margin-bottom: 0; }
.expense-header-actions { display: flex; gap: 8px; }
.expense-summary { background: var(--bg-secondary, #F3ECE4); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.expense-supplier-info { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.expense-supplier-name { font-family: 'DM Serif Display', Georgia, serif; font-size: 18px; color: var(--dark-roast, #4A3C31); }
.expense-supplier-year { font-size: 12px; color: #fff; background: var(--accent, #9C7B5C); padding: 2px 10px; border-radius: 20px; }
.expense-budget-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.expense-budget-item { text-align: center; padding: 14px 12px; background: var(--bg-surface, #fff); border-radius: 10px; border: 1px solid var(--border, #E8DDD1); }
.expense-budget-label { font-size: 12px; color: var(--text-muted, #B5A99A); margin-bottom: 4px; }
.expense-budget-value { font-family: 'DM Serif Display', Georgia, serif; font-size: 20px; color: var(--accent, #9C7B5C); }
.expense-budget-item.spent .expense-budget-value { color: #C27171; }
.expense-budget-item.remaining .expense-budget-value { color: #6B9E78; }
.expense-progress-wrap { display: flex; align-items: center; gap: 12px; }
.expense-progress-bar { flex: 1; height: 10px; background: var(--border, #E8DDD1); border-radius: 5px; overflow: hidden; }
.expense-progress-fill { height: 100%; border-radius: 5px; background: var(--accent, #9C7B5C); transition: width 0.5s ease; }
.expense-progress-fill.warning { background: #D4A042; }
.expense-progress-fill.danger { background: #C27171; }
.expense-progress-text { font-size: 14px; font-weight: 600; color: var(--text-secondary, #8C7E74); min-width: 50px; text-align: right; }
.expense-table-wrap { overflow-x: auto; margin-top: 16px; }
.expense-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.expense-table th { text-align: left; font-weight: 600; color: var(--text-muted, #B5A99A); font-size: 12px; padding: 10px 12px; border-bottom: 2px solid var(--border, #E8DDD1); white-space: nowrap; }
.expense-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light, #F0E8DF); color: var(--text-secondary, #8C7E74); }
.expense-table tr:hover td { background: rgba(156,123,92,0.04); }
.expense-amount { font-weight: 600; color: var(--dark-roast, #4A3C31); font-variant-numeric: tabular-nums; }
.expense-project-link { color: var(--accent, #9C7B5C); cursor: pointer; font-weight: 500; }
.expense-project-link:hover { text-decoration: underline; }
.expense-actions { white-space: nowrap; }
.expense-by-project { margin-top: 16px; }
.expense-by-project h4 { font-size: 14px; color: var(--text-secondary, #8C7E74); margin: 0 0 10px; font-weight: 600; }
.expense-project-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.expense-project-card { background: var(--bg-secondary, #F3ECE4); border-radius: 10px; padding: 12px 16px; min-width: 140px; flex: 1; max-width: 220px; transition: all 0.15s; }
.expense-project-card.clickable { cursor: pointer; }
.expense-project-card.clickable:hover { background: var(--bg-hover, #EBE1D5); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(74,60,49,0.08); }
.expense-project-card-name { font-size: 13px; color: var(--text-secondary, #8C7E74); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.expense-project-card.clickable .expense-project-card-name { color: var(--accent, #9C7B5C); font-weight: 500; }
.expense-project-card-amount { font-size: 18px; font-weight: 700; color: var(--dark-roast, #4A3C31); font-variant-numeric: tabular-nums; }
.expense-project-card-count { font-size: 11px; color: var(--text-muted, #B5A99A); margin-top: 2px; }
.expense-empty { text-align: center; padding: 32px; color: var(--text-muted, #B5A99A); font-size: 14px; }
.expense-row-imported { cursor: pointer; }
.expense-row-imported:hover td { background: rgba(156,123,92,0.06); }
.expense-items-badge { display: inline-block; font-size: 10px; background: var(--accent, #9C7B5C); color: #fff; padding: 1px 6px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
.expense-detail-row td { padding: 0 !important; border-bottom: 2px solid var(--accent, #9C7B5C); }
.expense-items-detail { padding: 12px 16px; background: var(--bg-secondary, #F3ECE4); }
.expense-items-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.expense-items-table th { text-align: left; font-size: 11px; color: var(--text-muted, #B5A99A); padding: 6px 8px; border-bottom: 1px solid var(--border, #E8DDD1); }
.expense-items-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-light, #F0E8DF); color: var(--text-secondary, #8C7E74); }
.expense-item-cat { font-weight: 600; color: var(--dark-roast, #4A3C31); white-space: nowrap; }
.expense-items-summary { display: flex; gap: 20px; justify-content: flex-end; padding: 10px 8px 4px; font-size: 13px; color: var(--text-secondary, #8C7E74); flex-wrap: wrap; }
.expense-items-final { font-weight: 700; color: var(--dark-roast, #4A3C31); }
.import-items-preview { max-height: 320px; overflow-y: auto; border: 1px solid var(--border, #E8DDD1); border-radius: 8px; padding: 8px; background: var(--bg-secondary, #F3ECE4); }
.import-amount-option { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border: 1.5px solid var(--border, #E8DDD1); border-radius: 8px; cursor: pointer; font-size: 13px; transition: all 0.15s; }
.import-amount-option:hover { border-color: var(--accent, #9C7B5C); }
.import-amount-option.active { border-color: var(--accent, #9C7B5C); background: rgba(156,123,92,0.08); font-weight: 600; }
.import-amount-option input[type="radio"] { display: none; }
@media (max-width: 768px) {
  .expense-budget-cards { grid-template-columns: 1fr; }
  .expense-header { flex-direction: column; gap: 12px; align-items: flex-start; }
  .expense-project-cards { flex-direction: column; }
  .expense-project-card { max-width: 100%; }
  .expense-table { font-size: 13px; }
  .expense-table th:nth-child(4), .expense-table td:nth-child(4),
  .expense-table th:nth-child(5), .expense-table td:nth-child(5) { display: none; }
  .expense-items-summary { flex-direction: column; gap: 4px; }
}

/* Mobile responsive for accounts */
@media (max-width: 768px) {
  .accounts-view { padding: 16px 12px 80px; }
  .accounts-grid { grid-template-columns: 1fr; }
  .account-stats-bar { flex-direction: column; }
  .account-stat-card { min-width: unset; }
  .account-detail-top { flex-direction: column; align-items: flex-start; }
  .account-detail-actions { width: 100%; justify-content: flex-end; }
  .video-metrics-grid { gap: 8px; }
  .video-metric { min-width: 40px; }
  .videos-toolbar { flex-direction: column; align-items: stretch; }
  .videos-search { width: 100%; }
  .video-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .video-gcard-title { font-size: 12px; min-height: 32px; }
  .video-gcard-metrics { font-size: 10px; gap: 6px; }
  .modal-xl { max-width: 100%; width: 100%; margin: 0; border-radius: 16px 16px 0 0; }
  .thresholds-table { font-size: 11px; }
  .threshold-input.sm { width: 50px; }
  .threshold-input.note { min-width: 60px; }
  .accounts-header { flex-direction: column; align-items: stretch; }
  .accounts-toolbar { flex-direction: column; }
  .accounts-search { width: 100%; }
}

/* ============ 新版更新通知 Modal ============ */
.update-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 60, 49, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInOverlay 0.28s ease;
  /* 阻止触摸穿透：overlay 本身不允许滚动，只有 modal-body 内部可滚动 */
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}
/* 允许 modal 内部的 body 正常滚动 */
.update-modal-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.update-modal {
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  background: #FDFAF4;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(74, 60, 49, 0.25), 0 4px 12px rgba(74, 60, 49, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideUp 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: auto;
}
@keyframes modalSlideUp {
  from { transform: translateY(24px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.update-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid #F1E8D7;
  flex-shrink: 0;
}

.update-modal-bell {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #C4A58A, #9C7B5C);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(156, 123, 92, 0.25);
}

.update-modal-title {
  flex: 1;
  min-width: 0;
}
.update-modal-title h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--dark-roast, #4A3C31);
}
.update-modal-subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #9E8E7A;
}

.update-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #A0907A;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}

/* ========== 绩效系统 ========== */
.perf-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.perf-header h2 { margin: 0; font-size: 18px; color: var(--text-primary); }
.perf-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.perf-period-nav { display: flex; align-items: center; gap: 6px; background: var(--surface); border-radius: 8px; padding: 4px 8px; }
.perf-period-label { font-weight: 600; font-size: 14px; min-width: 70px; text-align: center; }
.perf-stats { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); }
.perf-stat-badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.perf-stat-badge.draft { background: #FFF3CD; color: #856404; }
.perf-stat-badge.published { background: #D4EDDA; color: #155724; }
.perf-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.perf-card { background: var(--surface); border-radius: 12px; padding: 16px; border: 1px solid var(--border); cursor: pointer; transition: box-shadow 0.2s, transform 0.15s; position: relative; }
.perf-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }
.perf-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.perf-card-name { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.perf-card-status { font-size: 11px; padding: 2px 8px; border-radius: 8px; }
.perf-card-status.draft { background: #FFF3CD; color: #856404; }
.perf-card-status.published { background: #D4EDDA; color: #155724; }
.perf-card-status.scored { background: #CCE5FF; color: #004085; }
.perf-card-meta { display: flex; gap: 10px; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.perf-card-sections { display: flex; gap: 6px; flex-wrap: wrap; }
.perf-card-section-tag { font-size: 12px; padding: 2px 6px; background: var(--bg-secondary); border-radius: 6px; }
.perf-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; }
.perf-card:hover .perf-card-actions { opacity: 1; }

.perf-detail { max-width: 900px; }
.perf-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.perf-detail-header h3 { margin: 0; font-size: 17px; }
.perf-ai-reasoning { background: #F0F7FF; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: #333; display: flex; gap: 8px; align-items: flex-start; }
.perf-ai-badge { background: var(--accent); color: white; padding: 2px 8px; border-radius: 6px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }

.perf-section { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.perf-section-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-secondary); cursor: pointer; user-select: none; }
.perf-section-header:hover { background: var(--bg-hover, #ede6dd); }
.perf-section-icon { font-size: 16px; }
.perf-section-name { font-weight: 600; font-size: 14px; flex: 1; }
.perf-section-weight { font-size: 12px; color: var(--accent); font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background 0.2s; }
.perf-section-weight:hover { background: rgba(156,123,92,0.12); }
.perf-section-weight-input { width: 50px; padding: 2px 6px; border: 1px solid var(--accent); border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--accent); text-align: center; outline: none; }
.perf-section-count { font-size: 12px; color: var(--text-secondary); }
.perf-section-toggle { font-size: 10px; color: var(--text-secondary); }
.perf-section-items { padding: 8px 16px; }

.perf-item { padding: 12px 0; border-bottom: 1px solid var(--border-light, #f0ece6); }
.perf-item:last-child { border-bottom: none; }
.perf-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.perf-item-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.perf-item-weight { font-size: 11px; color: var(--accent); background: rgba(156,123,92,0.1); padding: 1px 6px; border-radius: 6px; cursor: pointer; transition: background 0.2s; }
.perf-item-weight:hover { background: rgba(156,123,92,0.2); }
.perf-item-weight-edit { font-size: 11px; color: var(--accent); display: inline-flex; align-items: center; gap: 2px; }
.perf-item-weight-input { width: 42px; padding: 1px 4px; border: 1px solid var(--accent); border-radius: 4px; font-size: 11px; color: var(--accent); text-align: center; outline: none; }
.perf-item-ai-tag { font-size: 11px; background: #E8F4FD; color: #0A6EBD; padding: 1px 6px; border-radius: 6px; }
.perf-item-criteria, .perf-item-rules { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; line-height: 1.6; }
.perf-item-criteria strong, .perf-item-rules strong { color: var(--text-primary); font-size: 12px; }
.perf-item-match { font-size: 12px; color: #666; margin-top: 4px; padding: 4px 8px; background: #FFF9E6; border-radius: 6px; }
.perf-match-badge { background: #FFD700; color: #333; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.perf-item-okr-tags { display: flex; gap: 4px; margin-top: 4px; }
.perf-okr-tag { font-size: 11px; background: rgba(156,123,92,0.12); color: var(--accent); padding: 1px 6px; border-radius: 4px; }

.perf-import-preview { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.perf-import-preview h3 { margin: 0 0 10px; font-size: 15px; }
.perf-import-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.perf-import-item { background: var(--bg-secondary); padding: 6px 12px; border-radius: 8px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.perf-import-name { font-weight: 600; }
.perf-import-role { font-size: 11px; color: var(--accent); }
.perf-import-sections { font-size: 11px; color: var(--text-secondary); }
.perf-import-actions { display: flex; gap: 8px; }

.perf-drag-ghost { opacity: 0.4; background: var(--bg-secondary); }
.perf-section-drag, .perf-item-drag { cursor: grab; color: var(--text-light); font-size: 14px; letter-spacing: -2px; user-select: none; padding: 0 4px; opacity: 0.5; transition: opacity 0.2s; }
.perf-section-drag:hover, .perf-item-drag:hover { opacity: 1; color: var(--accent); }
.perf-section-drag:active, .perf-item-drag:active { cursor: grabbing; }
.perf-sections-sortable { display: flex; flex-direction: column; gap: 12px; }
.perf-add-item { padding: 8px 0; text-align: center; border-top: 1px dashed var(--border); margin-top: 4px; }
.perf-add-item .btn-text { color: var(--accent); font-size: 13px; }
.perf-add-item .btn-text:hover { text-decoration: underline; }
.perf-edit-form { padding: 12px; background: #FFFDF8; border-radius: 8px; border: 1px solid var(--accent); }
.perf-edit-row { margin-bottom: 10px; }
.perf-edit-row label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 3px; }
.perf-edit-input { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; box-sizing: border-box; }
.perf-edit-textarea { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; resize: vertical; box-sizing: border-box; font-family: inherit; }
.perf-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-accent { background: var(--accent); color: white; border: none; padding: 5px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.btn-accent:hover { opacity: 0.9; }
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; }

.perf-learning-item { padding: 10px 0; border-bottom: 1px solid var(--border-light, #f0ece6); }
.perf-learning-item:last-child { border-bottom: none; }
.perf-learning-header { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.perf-learning-period { font-weight: 600; font-size: 13px; color: var(--accent); }
.perf-learning-role { font-size: 12px; color: var(--text-secondary); }
.perf-learning-date { font-size: 11px; color: var(--text-light); margin-left: auto; }
.perf-learning-summary { font-size: 13px; color: var(--text-primary); white-space: pre-line; line-height: 1.6; }

@media (max-width: 480px) {
  .perf-card-grid { grid-template-columns: 1fr; }
  .perf-header { flex-direction: column; align-items: flex-start; }
  .perf-toolbar { width: 100%; overflow-x: auto; }
  .perf-detail-header { flex-direction: column; align-items: flex-start; }
}
.update-modal-close:hover { background: rgba(156, 123, 92, 0.1); }

.update-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

.update-version-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.update-version-num {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 26px;
  color: var(--accent, #9C7B5C);
  font-weight: 400;
  line-height: 1;
}
.update-version-latest {
  font-size: 11px;
  background: linear-gradient(135deg, #E89A3A, #D48A3A);
  color: white;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.update-version-date {
  font-size: 12.5px;
  color: #A0907A;
  margin-left: auto;
}

.update-summary-card {
  background: #F5EFE4;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--dark-roast);
  margin-bottom: 16px;
  border-left: 4px solid var(--accent, #9C7B5C);
}

.update-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.update-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 0;
}

.update-item-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}
.update-item-badge.badge-new {
  background: #E6F4E8;
  color: #4A9B5E;
}
.update-item-badge.badge-optimize {
  background: #FFF4E0;
  color: #C4864A;
}
.update-item-badge.badge-fix {
  background: #FCE8E4;
  color: #C4564A;
}

.update-item-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.7;
  color: #4A3C31;
  word-break: break-word;
}

.update-modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid #F1E8D7;
  background: #FDFAF4;
  flex-shrink: 0;
}
.update-modal-footer .btn {
  flex: 1;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s;
}
.update-modal-footer .btn-secondary {
  background: white;
  color: #6B5E4D;
  border: 1px solid #E7DCCB;
}
.update-modal-footer .btn-secondary:hover {
  background: #F5EFE4;
  border-color: var(--accent, #9C7B5C);
}
.update-modal-footer .btn-primary {
  background: linear-gradient(135deg, #2F6F5E, #255B4C);
  color: white;
  box-shadow: 0 3px 10px rgba(47, 111, 94, 0.25);
}
.update-modal-footer .btn-primary:hover {
  box-shadow: 0 5px 16px rgba(47, 111, 94, 0.35);
  transform: translateY(-1px);
}

/* 过渡动画 */
.update-modal-fade-enter-active,
.update-modal-fade-leave-active {
  transition: opacity 0.25s ease;
}
.update-modal-fade-enter-from,
.update-modal-fade-leave-to {
  opacity: 0;
}

/* Mobile（≤ 480px 手机端） */
@media (max-width: 480px) {
  .update-modal-overlay { padding: 12px; }
  .update-modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px;
  }
  .update-modal-header { padding: 16px 16px 14px; }
  .update-modal-bell { width: 36px; height: 36px; font-size: 16px; }
  .update-modal-title h3 { font-size: 15.5px; }
  .update-modal-subtitle { font-size: 11.5px; }
  .update-modal-body { padding: 14px 16px; }
  .update-version-num { font-size: 22px; }
  .update-summary-card {
    padding: 12px 14px;
    font-size: 13.5px;
  }
  .update-item-text { font-size: 13px; }
  .update-modal-footer {
    padding: 12px 16px 14px;
    flex-direction: row;
  }
  .update-modal-footer .btn {
    padding: 10px 12px;
    font-size: 13px;
  }
}
@media (max-width: 360px) {
  .update-modal-footer { flex-direction: column; }
}

/* ===== AI策划 ===== */
.plan-card-list { display: flex; flex-direction: column; gap: 10px; }
.plan-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: all .2s; }
.plan-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.plan-card-header { display: flex; align-items: center; gap: 10px; }
.plan-card-title { font-weight: 600; flex: 1; }
.plan-card-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.plan-card-prediction { display: flex; gap: 12px; font-size: 12px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.plan-status-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.plan-status-draft { background: var(--bg-secondary); color: var(--text-muted); }
.plan-status-generated { background: #E8F0FE; color: #1A73E8; }
.plan-status-published { background: #E6F4EA; color: #137333; }
.plan-status-reviewed { background: #FEF7E0; color: #B06000; }
.plan-confidence { font-size: 11px; padding: 1px 6px; border-radius: 8px; }
.plan-confidence.high { background: #E6F4EA; color: #137333; }
.plan-confidence.medium { background: #FEF7E0; color: #B06000; }
.plan-confidence.low { background: #FCE8E6; color: #C5221F; }

.plan-detail-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; }
.plan-detail-section h5 { margin: 0 0 12px; font-size: 15px; }
.plan-info-grid { display: flex; flex-direction: column; gap: 12px; }
.plan-info-grid label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; display: block; }
.plan-goal-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.plan-goal-label { background: var(--accent-light-bg, #F5EDE6); color: var(--accent); padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.plan-ref-video { font-size: 13px; padding: 3px 0; }

.plan-hook-box { background: linear-gradient(135deg, #FFF8E1, #FFF3E0); border: 1px solid #FFE0B2; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.plan-question-item { display: flex; gap: 10px; margin-bottom: 10px; }
.plan-q-num { min-width: 32px; height: 32px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.plan-q-body { flex: 1; }
.plan-q-text { font-weight: 500; }
.plan-q-purpose { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.plan-q-followups { margin-top: 4px; }
.plan-q-followup { display: block; font-size: 12px; color: var(--text-secondary); padding-left: 8px; }
.plan-segment { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.plan-segment:last-child { border-bottom: none; }
.plan-seg-num { min-width: 24px; height: 24px; background: var(--bg-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.plan-ending .plan-seg-num { background: var(--accent-light-bg, #F5EDE6); }

.plan-prediction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan-pred-card { background: var(--bg-secondary); border-radius: 8px; padding: 12px; text-align: center; }
.plan-pred-val { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.plan-pred-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.plan-linked-video { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #E6F4EA; border-radius: 8px; font-size: 13px; }

.plan-comparison-table { margin-top: 10px; }
.plan-cmp-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.plan-cmp-header { font-weight: 600; color: var(--text-muted); font-size: 12px; }
.dev-good { color: #137333; font-weight: 600; }
.dev-moderate { color: #B06000; font-weight: 600; }
.dev-large { color: #C5221F; font-weight: 600; }
.plan-tip-box { margin-top: 8px; padding: 8px 12px; background: #FFF8E1; border: 1px solid #FFE0B2; border-radius: 6px; font-size: 12px; }

.plan-card-tracking { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.plan-cp-tag { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #E8E0D8; color: #999; font-weight: 500; }
.plan-cp-tag.done { background: var(--accent); color: #fff; }
.plan-card-dev { font-size: 11px; margin-left: 4px; font-weight: 600; }

.plan-checkpoint-timeline { display: flex; align-items: center; gap: 0; margin: 12px 0 8px; position: relative; }
.plan-checkpoint-timeline::before { content: ''; position: absolute; top: 9px; left: 16px; right: 16px; height: 2px; background: #E0D6CC; z-index: 0; }
.plan-cp-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; cursor: default; z-index: 1; }
.plan-cp-dot.done { cursor: pointer; }
.plan-cp-circle { width: 18px; height: 18px; border-radius: 50%; background: #E0D6CC; border: 2px solid #fff; transition: all .2s; }
.plan-cp-dot.done .plan-cp-circle { background: var(--accent); }
.plan-cp-dot.active .plan-cp-circle { background: var(--accent); box-shadow: 0 0 0 3px rgba(156,123,92,0.3); transform: scale(1.15); }
.plan-cp-dot span { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.plan-cp-dot.done span { color: var(--accent); font-weight: 600; }
.plan-cp-dot.active span { color: var(--dark-roast); font-weight: 700; }

.plan-review-card { margin-top: 10px; }
.plan-review-score { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.plan-review-score-val { font-size: 36px; font-weight: 700; }
.plan-review-score-label { font-size: 13px; color: var(--text-muted); }
.plan-review-text { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.plan-review-factors { margin-bottom: 12px; }
.plan-review-factors h6, .plan-review-lessons h6 { margin: 0 0 8px; font-size: 13px; color: var(--text-secondary); }
.plan-factor-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.plan-factor-metric { font-weight: 600; min-width: 50px; }
.plan-factor-dir { font-size: 11px; padding: 1px 6px; border-radius: 8px; }
.plan-factor-dir.accurate { background: #E6F4EA; color: #137333; }
.plan-factor-dir.off { background: #FCE8E6; color: #C5221F; }
.plan-review-lessons ul { margin: 0; padding-left: 18px; font-size: 13px; }
.plan-review-lessons li { margin-bottom: 4px; }

/* Plan file import */
.plan-file-import { margin-bottom: 16px; padding: 12px 14px; background: var(--bg-secondary); border-radius: 10px; border: 1px dashed var(--border); }
.plan-file-bar { display: flex; align-items: center; gap: 10px; }
.plan-upload-btn { cursor: pointer; }
.plan-file-info { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.plan-file-name { font-weight: 600; font-size: 13px; }
.plan-file-preview { margin-top: 10px; max-height: 300px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.plan-file-preview pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.6; font-family: inherit; }
.plan-file-preview-detail { max-height: 400px; }
.plan-source-file-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }

/* Plan modals */
.plan-goal-form-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.plan-ref-selector { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.plan-ref-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 13px; }
.plan-ref-option:last-child { border-bottom: none; }
.plan-ref-option:hover { background: var(--bg-secondary); }
.plan-ref-option.selected { background: #E8F0FE; }
.plan-ref-check { font-size: 16px; }
.plan-ref-title { flex: 1; }
.plan-link-list { max-height: 300px; overflow-y: auto; }
.plan-link-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.plan-link-item:hover { background: var(--bg-secondary); }
.plan-link-title { font-weight: 500; }

@media (max-width: 480px) {
  .plan-prediction-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .plan-pred-card { padding: 10px 8px; }
  .plan-pred-val { font-size: 16px; }
  .plan-cmp-row { font-size: 12px; gap: 4px; }
  .plan-question-item { flex-direction: column; gap: 6px; }
  .plan-q-num { align-self: flex-start; }
  .plan-q-body { width: 100%; }
  .plan-q-text { word-break: break-word; }
  .plan-goal-form-row { flex-wrap: wrap; }
  .plan-goal-form-row select { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   全局手机端适配补丁（≤480px）
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* -- 账号页面整体 -- */
  .accounts-view { padding: 16px 12px 80px; }
  .accounts-header h2 { font-size: 18px; }
  .accounts-toolbar { width: 100%; }
  .accounts-search { width: 100%; }
  .accounts-filter-tabs { width: 100%; overflow-x: auto; }
  .accounts-filter-tabs button { padding: 5px 10px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }

  /* 账号子导航 */
  .accounts-sub-tabs { width: 100%; overflow-x: auto; }
  .accounts-sub-tabs button { padding: 7px 12px; font-size: 12px; flex-shrink: 0; }

  /* 账号卡片网格 */
  .accounts-grid { grid-template-columns: 1fr; }
  .account-card { padding: 14px; }
  .account-card-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .account-stat-val { font-size: 14px; }

  /* 账号详情 */
  .account-detail-top { gap: 10px; }
  .account-detail-name { font-size: 17px; }
  .account-detail-info { gap: 8px; }
  .account-stats-bar { gap: 8px; }
  .account-stat-card { min-width: 0; flex: 1 1 calc(50% - 4px); padding: 10px 12px; }
  .account-stat-card-val { font-size: 18px; }
  .account-stat-card-lbl { font-size: 11px; }

  /* 账号详情标签栏 */
  .account-detail-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .account-detail-tabs button { padding: 6px 12px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }

  /* 概览统计格 */
  .chart-row-2col { grid-template-columns: 1fr; }

  /* 视频画廊 */
  .video-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .video-gcard-body { padding: 8px 10px; }
  .video-gcard-title { font-size: 12px; min-height: 32px; }
  .video-gcard-metrics { font-size: 10px; gap: 6px; }

  /* 视频列表项 */
  .video-list-item { flex-direction: column; gap: 8px; padding: 12px; }
  .video-list-actions { align-self: flex-end; }

  /* 热门视频 */
  .hotrank-video-item { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .hotrank-video-cover { width: 52px; height: 70px; }
  .hotrank-rank { width: 26px; height: 26px; font-size: 12px; }
  .hotrank-video-metrics { gap: 8px; width: 100%; justify-content: space-around; padding-top: 8px; border-top: 1px dashed var(--border-light); }
  .hotrank-metric-val { font-size: 12px; }
  .hotrank-video-date { display: none; }
  .hotrank-video-title { font-size: 13px; -webkit-line-clamp: 1; }
  .hotrank-main-tabs { width: 100%; overflow-x: auto; }
  .hotrank-main-tabs button { padding: 5px 10px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
  .hotrank-topic-tabs { flex-wrap: wrap; gap: 4px; }
  .hotrank-topic-tabs button { padding: 5px 12px; font-size: 12px; }

  /* 热门话题 */
  .hotrank-topic-item { gap: 8px; padding: 10px 12px; }
  .hotrank-topic-title { font-size: 13px; }
  .hotrank-topic-meta { gap: 6px; }

  /* 竞品分析 */
  .ca-grid { grid-template-columns: 1fr; }
  .ca-columns { grid-template-columns: 1fr; }
  .ca-overall { padding: 12px 14px; font-size: 13px; }

  /* 内容板块 */
  .content-blocks-row { grid-template-columns: 1fr; }
  .content-block-card { padding: 10px 12px; }

  /* Bookmarklet帮助 */
  .bookmarklet-help { padding: 14px 16px; }

  /* -- 项目集页面 -- */
  .series-level-header { padding: 4px 6px; }
  .series-level-badge { font-size: 12px; padding: 2px 10px; }
  .series-card-body { padding: 14px 16px; }
  .series-card-title { font-size: 14px; }
  .series-card-stats { gap: 10px; }
  .series-stat-num { font-size: 18px; }

  /* -- 表单行 -- */
  .form-row { grid-template-columns: 1fr; gap: 10px; }

  /* -- 帮助中心 -- */
  .help-view { padding: 16px 14px 120px; }
  .help-tabs { flex-wrap: wrap; gap: 4px; }
  .help-tabs button { padding: 8px 12px; font-size: 12px; flex: 1 1 auto; min-width: 0; }
  .tutorial-toc-grid { grid-template-columns: 1fr; }

  /* -- 活跃度表格 -- */
  .activity-table { min-width: 100%; font-size: 11px; }
  .activity-table th, .activity-table td { padding: 8px 6px; }

  /* -- 平台筛选条 -- */
  .platform-filter-bar { gap: 4px; margin-top: 10px; }
  .platform-filter-btn { padding: 5px 10px; font-size: 12px; }
  .platform-filter-edit { display: none; }
  .account-detail-sub { font-size: 12px; }
  .account-detail-sub span { display: inline; }
}

/* ═══ 权限角色配置（v2.5.0） ═══ */
.perm-roles-section { margin-top: 32px; }
.perm-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.perm-role-card { background: var(--bg-card, #fff); border: 1px solid var(--border, #E8DFD3); border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(74,60,49,0.05); }
.perm-role-head { display: flex; align-items: center; justify-content: space-between; }
.perm-role-head h4 { margin: 0; font-size: 15px; color: var(--dark-roast, #4A3C31); }
.perm-role-actions { display: flex; gap: 4px; }
.perm-sys-tag { font-size: 10px; background: #9C7B5C20; color: #9C7B5C; padding: 1px 6px; border-radius: 6px; vertical-align: middle; font-weight: 500; }
.perm-role-desc { font-size: 12px; color: var(--text-secondary, #8C7E74); margin: 8px 0 12px; min-height: 16px; }
.perm-role-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chip { font-size: 11px; padding: 3px 8px; border-radius: 8px; background: var(--bg-secondary, #F3ECE4); color: var(--text-secondary, #8C7E74); }
.perm-chip-edit { background: #6B9E7818; color: #5a8a66; }
.perm-chip-view { background: #5E8BA818; color: #4f7791; }

/* 权限矩阵弹窗 */
.perm-role-modal { max-width: 540px; width: 92%; }
.perm-matrix { margin: 14px 0; border: 1px solid var(--border, #E8DFD3); border-radius: 16px; overflow: hidden; max-height: 52vh; overflow-y: auto; background: var(--bg-card, #fff); }
.perm-matrix-legend { padding: 11px 18px; font-size: 12px; color: var(--text-secondary, #8C7E74); background: var(--bg-secondary, #F3ECE4); border-bottom: 1px solid var(--border, #E8DFD3); position: sticky; top: 0; z-index: 1; }
.perm-matrix-legend em { color: var(--accent, #9C7B5C); font-style: normal; font-weight: 700; }
.perm-matrix-group { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent, #9C7B5C); padding: 14px 18px 5px; }
.perm-matrix-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 18px; }
.perm-matrix-row:hover { background: var(--bg-secondary, #F8F3EC); }
.perm-matrix-mod { font-size: 13.5px; color: var(--dark-roast, #4A3C31); }
.perm-toggles { display: flex; gap: 8px; flex-shrink: 0; }
.perm-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1; padding: 6px 13px; border-radius: 20px; border: 1.5px solid var(--border, #E2D8CC); background: transparent; color: var(--text-light, #B5A99A); cursor: pointer; transition: all .15s ease; user-select: none; white-space: nowrap; }
.perm-toggle:hover { border-color: var(--accent-light, #D4A574); color: var(--accent, #9C7B5C); }
.perm-toggle.on { background: var(--accent, #9C7B5C); border-color: var(--accent, #9C7B5C); color: #fff; box-shadow: 0 2px 7px rgba(156, 123, 92, .28); }
.perm-toggle-edit.on { background: var(--success, #6B9E78); border-color: var(--success, #6B9E78); box-shadow: 0 2px 7px rgba(107, 158, 120, .28); }
.perm-toggle.on:hover { color: #fff; filter: brightness(1.04); }

/* 学习记录分组标题 */
.perf-learning-group-title { font-size: 13px; font-weight: 700; color: var(--accent, #9C7B5C); margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 1px dashed var(--border, #E8DFD3); }
.perf-learning-group-title:first-of-type { margin-top: 0; }
.perf-add-section { text-align: center; margin-top: 14px; }

/* ═══ ☀️ 今日驾驶舱（v2.6.0 / v2.7.1 留白重设计） ═══ */
.daily-view { padding: 28px 36px 48px; }
.daily-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.daily-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 28px; color: var(--dark-roast, #4A3C31); margin: 0; }
.daily-date { font-size: 15px; color: var(--text-secondary, #8C7E74); font-family: inherit; margin-left: 10px; }
.daily-sub { font-size: 12.5px; color: var(--text-light, #B5A99A); margin: 6px 0 0; }
.daily-actions { display: flex; gap: 8px; }

/* 两栏布局：左侧主工作区 + 右侧信号侧栏 */
.daily-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.daily-layout.daily-rest-layout { grid-template-columns: 1fr; }   /* 休息日只剩今日信号，单栏铺满 */
.daily-col-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* 右侧信号侧栏：吸顶固定（在68px顶栏之下），内容过长时自身独立滚动 */
.daily-col-side { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; overflow-x: hidden; min-width: 0; padding-right: 2px; }
.daily-col-side::-webkit-scrollbar { width: 6px; }
.daily-col-side::-webkit-scrollbar-thumb { background: var(--border, #E2D8CC); border-radius: 6px; }
.daily-col-side::-webkit-scrollbar-track { background: transparent; }

/* 主目标卡（hero） */
/* 休息日温馨横幅 */
.daily-rest-banner {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, rgba(47,111,94,0.12), rgba(47,111,94,0.04));
  border: 1px solid rgba(47,111,94,0.22);
  border-radius: var(--r-lg, 18px);
  padding: 18px 22px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.daily-rest-emoji { font-size: 32px; line-height: 1; flex-shrink: 0; }
.daily-rest-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 19px; font-weight: 700; color: var(--text-primary); }
.daily-rest-sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; line-height: 1.6; }

.daily-goals-card { background: linear-gradient(135deg, #FFF8F0, #FBF1E6); border: none; border-radius: var(--r-lg, 18px); padding: 26px 28px; box-shadow: var(--shadow-sm); }
.daily-goal-main label, .daily-goal-sub label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--accent, #9C7B5C); margin-bottom: 8px; }
.daily-goal-input { width: 100%; border: 1.5px solid var(--border, #E2D8CC); border-radius: 12px; padding: 13px 16px; font-size: 16px; background: #fff; color: var(--dark-roast, #4A3C31); transition: border-color .15s, box-shadow .15s; }
.daily-goal-input:focus { border-color: var(--accent, #9C7B5C); outline: none; box-shadow: 0 0 0 3px rgba(156,123,92,.10); }
.daily-goal-main .daily-goal-input { font-size: 17px; font-weight: 600; padding: 15px 18px; }
.daily-goal-input.sub { font-size: 14px; padding: 10px 14px; font-weight: 400; }
.daily-goal-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }

/* AI 简报 */
.daily-ai-brief { background: #F0F5F1; border: none; border-left: 3px solid var(--success, #6B9E78); border-radius: 12px; padding: 16px 20px; position: relative; box-shadow: var(--shadow-sm); }
.daily-ai-brief p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--dark-roast, #4A3C31); }
.daily-ai-badge { font-size: 10px; background: #6B9E7820; color: #5a8a66; padding: 2px 8px; border-radius: 6px; float: right; margin-left: 8px; }
.daily-empty-hint { background: var(--bg-secondary, #F3ECE4); border-radius: 12px; padding: 16px 20px; font-size: 13px; color: var(--text-secondary, #8C7E74); line-height: 1.65; }

/* 区块：每个 section 是一张无边框柔和阴影卡 */
.daily-section { background: var(--bg-surface, #fff); border-radius: var(--r-lg, 18px); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.daily-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.daily-section-head h3 { font-size: 16px; color: var(--dark-roast, #4A3C31); margin: 0; font-weight: 700; }
.daily-progress { font-size: 13px; color: var(--accent, #9C7B5C); font-weight: 600; margin-left: 8px; }

.daily-todo-list { display: flex; flex-direction: column; gap: 10px; }
.daily-todo { background: var(--bg-secondary, #FAF6F1); border: 1px solid transparent; border-radius: 12px; padding: 12px 16px; transition: box-shadow .15s, opacity .15s; }
.daily-todo:hover { box-shadow: var(--shadow-sm); }
.daily-todo.done { opacity: .55; }
.daily-todo-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.daily-check { width: 18px; height: 18px; cursor: pointer; accent-color: var(--success, #6B9E78); flex-shrink: 0; }
.daily-todo-text { flex: 1; font-size: 14px; color: var(--dark-roast, #4A3C31); }
.daily-todo-text.done { text-decoration: line-through; color: var(--text-light, #B5A99A); }
.daily-todo-text-input { flex: 1; min-width: 0; font-size: 14px; color: var(--dark-roast, #4A3C31); border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; font-family: inherit; }
.daily-todo-text-input:hover { border-color: var(--border, #E8DFD3); background: #fff; }
.daily-todo-text-input:focus { outline: none; border-color: var(--accent, #9C7B5C); background: #fff; }
.daily-todo-text-input.done { text-decoration: line-through; color: var(--text-light, #B5A99A); }
.daily-pri { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; flex-shrink: 0; cursor: pointer; user-select: none; }
.daily-pri.pri-P0 { background: #C2717120; color: #b35a5a; }
.daily-pri.pri-P1 { background: #D4A04220; color: #b8862f; }
.daily-pri.pri-P2 { background: var(--bg-secondary,#F3ECE4); color: var(--text-secondary,#8C7E74); }
.daily-src { font-size: 11px; color: var(--text-light, #B5A99A); flex-shrink: 0; }
.daily-del { opacity: 0; transition: opacity .15s; }
.daily-todo:hover .daily-del { opacity: .6; }
.daily-note-input { width: 100%; border: none; border-top: 1px dashed var(--border, #E8DFD3); margin-top: 10px; padding: 8px 2px 0; font-size: 12.5px; background: transparent; color: var(--text-secondary, #8C7E74); }
.daily-note-input:focus { outline: none; color: var(--dark-roast, #4A3C31); }
.daily-add { display: flex; gap: 8px; margin-top: 14px; }
.daily-add-input { flex: 1; border: 1.5px dashed var(--border, #E2D8CC); border-radius: 10px; padding: 11px 16px; font-size: 13px; background: transparent; }
.daily-add-input:focus { outline: none; border-color: var(--accent, #9C7B5C); border-style: solid; }
/* 今日页输入框改为自动换行的 textarea：禁手动拉伸、隐藏滚动条、自动撑高 */
.daily-goal-input, .daily-todo-text-input, .daily-note-input, .daily-add-input {
  resize: none; overflow: hidden; font-family: inherit; line-height: 1.55; display: block;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
/* 工作项可多行时，行内元素顶部对齐 */
.daily-todo-row { align-items: flex-start; }
.daily-todo-row > .daily-check { margin-top: 4px; }
.daily-todo-row > .daily-pri, .daily-todo-row > .daily-src { margin-top: 5px; }
.daily-todo-row > .daily-del { margin-top: 3px; }

/* 信号侧栏：标题裸放，每条信号作为独立卡纵向堆叠 */
.daily-signals-section { background: transparent; box-shadow: none; padding: 0; }
.daily-signals-section .daily-section-head { margin-bottom: 12px; padding: 0 2px; }
.daily-signals { display: flex; flex-direction: column; gap: 12px; }
.daily-signal-block { background: var(--bg-surface, #fff); border: none; border-radius: var(--r-md, 14px); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.daily-signal-block.warn { border-left: 3px solid var(--warning, #D4A042); }
.daily-signal-block.danger { border-left: 3px solid var(--danger, #C27171); }
.daily-signal-title { font-size: 13px; font-weight: 700; color: var(--dark-roast, #4A3C31); margin-bottom: 8px; }
.daily-signal-item { font-size: 12.5px; color: var(--text-secondary, #8C7E74); padding: 3px 0; line-height: 1.55; }
.daily-sev { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; margin-right: 4px; }
.daily-sev.severe { background: #C2717120; color: #b35a5a; }
.daily-sev.warn { background: #D4A04220; color: #b8862f; }

/* 工作清单提示文案 */
.daily-report-hint { font-size: 12px; color: var(--text-light, #B5A99A); margin: 0 0 14px; line-height: 1.55; }

/* 🧠 AI 学习记录卡片 */
.daily-learn-list { display: flex; flex-direction: column; gap: 12px; }
.daily-learn-card { background: var(--bg-secondary, #FAF6F1); border-radius: 12px; padding: 14px 16px; border-left: 3px solid var(--accent, #9C7B5C); }
.daily-learn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.daily-learn-date { font-size: 12px; color: var(--text-light, #B5A99A); }
.daily-learn-summary { font-size: 13.5px; line-height: 1.7; color: var(--dark-roast, #4A3C31); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

/* 防止长内容撑宽页面 */
.daily-todo-text-input, .daily-note-input, .daily-signal-item, .daily-ai-brief p, .daily-goal-input { word-break: break-word; overflow-wrap: anywhere; }

/* 窄屏：两栏合一，信号回退为网格 */
@media (max-width: 1000px) {
  .daily-layout { grid-template-columns: 1fr; gap: 18px; }
  .daily-col-side { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .daily-signals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 480px) {
  .daily-view { padding: 16px 14px 40px; }
  .daily-col-main { gap: 16px; }
  .daily-section { padding: 16px; }
  .daily-goals-card { padding: 18px; }
  .daily-goal-subs { grid-template-columns: 1fr; }
  .daily-signals { grid-template-columns: 1fr; }
  .daily-title { font-size: 22px; }
  .daily-header { gap: 8px; }
  .daily-actions { width: 100%; }
  .daily-actions .btn { flex: 1; }
  /* iOS 关键：输入字号≥16px，避免聚焦时自动放大导致页面"动来动去" */
  .daily-goal-input, .daily-goal-main .daily-goal-input, .daily-goal-input.sub, .daily-todo-text-input, .daily-note-input, .daily-add-input { font-size: 16px; }
  .daily-todo-text-input { flex: 1 1 auto; min-width: 0; }
  .daily-src { font-size: 10px; }
  .daily-del { opacity: .6; }
}

/* ════════════════════════════════════════════════════════════
   ✨ 高级感动效层（taste-skill 规范 · 2026-06）
   原则：只动 transform/opacity；统一缓动 cubic-bezier(0.16,1,0.3,1)；
   微交互 ~200ms；完整 hover/active/focus 触感；保留奶咖品牌配色。
   （文件顶部已有 prefers-reduced-motion 降级，全部自动覆盖）
   ════════════════════════════════════════════════════════════ */
:root { --ease-taste: cubic-bezier(0.16, 1, 0.3, 1); }

/* 视图切换：整页轻微淡入（只透明度，不与子元素位移打架） */
main.kanban-view, main.dashboard-view, main.daily-view, main.series-view,
main.calendar-view, main.settings-view, main.knowledge-view,
main.org-view, main.accounts-view, main.help-view {
  animation: viewEnter 0.42s var(--ease-taste) both;
}
@keyframes viewEnter { from { opacity: 0; } to { opacity: 1; } }

/* 按钮：完整触感循环（hover 上浮 / active 下压回弹 / focus 可见环） */
.btn { transition: background .2s var(--ease-taste), color .2s var(--ease-taste), border-color .2s var(--ease-taste), box-shadow .2s var(--ease-taste), transform .14s var(--ease-taste); }
.btn:active { transform: translateY(0) scale(0.96); }
.btn-primary:active { box-shadow: var(--shadow-sm); }
.btn-secondary:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47,111,94,0.30); }
.btn-icon { transition: background .2s var(--ease-taste), color .2s var(--ease-taste), transform .14s var(--ease-taste); }
.btn-icon:hover { transform: translateY(-1px); }
.btn-icon:active { transform: scale(0.88); }
.btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47,111,94,0.25); }

/* 表单聚焦：统一柔光环（输入框 / 文本域 / 下拉） */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,111,94,0.12);
}

/* 看板列：标题计数徽标在 hover 列时轻轻一弹 */
.column-count { transition: transform .2s var(--ease-taste); }
.kanban-column:hover .column-count { transform: scale(1.1); }

/* 顶部导航 tab：hover 轻微上浮，过渡更顺 */
.nav-tabs button { transition: background .2s var(--ease-taste), color .2s var(--ease-taste), transform .15s var(--ease-taste); }
.nav-tabs button:hover { transform: translateY(-1px); }
.nav-tabs button:active { transform: translateY(0) scale(0.97); }

/* 弹窗入场关键帧（上方 .modal 引用，替换原 scaleIn，质感更顺）
   注意：移动端底部弹窗的 .modal-overlay.slide-in .modal 特异性更高，不受影响 */
@keyframes modalEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 拖拽目标列：高亮过渡更顺滑 + 轻微内缩反馈 */
.column-body.drag-over { transition: background .2s var(--ease-taste), box-shadow .2s var(--ease-taste); }

/* 勾选 / 徽章等小元素的统一交互缓动 */
.assignment-badge { transition: transform .15s var(--ease-taste); }
.card-category, .card-category-empty { transition: background .18s var(--ease-taste), transform .15s var(--ease-taste); }
.card-category:hover, .card-category-empty:hover { transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════
   ✨ 看板高级动效套件（2026-06）— 氛围背景 / 完成庆祝 / FLIP / 列进度
   全部只动 transform/opacity；reduced-motion 自动降级（文件顶部已统一处理）
   ════════════════════════════════════════════════════════════ */

/* ① 液态玻璃质感（Apple liquid glass）— 用在弹窗 / 顶栏 / 看板列
   关键：磨砂半透 backdrop-blur + saturate + 顶部高光描边(inset 高光) + 1px 浅边
   用主题变量, 浅色/深色各自取值; 弱透明偏好自动降级为实底 */
:root {
  --glass-panel: rgba(247,241,234,0.55);   /* 看板列暖磨砂 */
  --glass-modal: rgba(255,255,255,0.88);   /* 弹窗 */
  --glass-hi:    rgba(255,255,255,0.85);    /* 顶部高光 */
  --glass-edge:  rgba(255,255,255,0.55);    /* 1px 浅边 */
}
[data-theme="dark"] {
  --glass-panel: rgba(44,36,28,0.50);
  --glass-modal: rgba(36,30,23,0.86);
  --glass-hi:    rgba(255,255,255,0.08);
  --glass-edge:  rgba(255,255,255,0.10);
}
.modal {
  background: var(--glass-modal);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-xl);
}
/* 顶栏玻璃高光 */
.app-header { box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 3px rgba(44,34,24,0.05); }
/* 看板列：暖磨砂玻璃面板（卡片仍为实底白，保证可读与分隔） */
.kanban-column {
  background: var(--glass-panel);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(44,34,24,0.03);
}
/* 弱透明偏好 / 不支持 backdrop-filter 时降级为实底 */
@media (prefers-reduced-transparency: reduce) {
  .modal { background: var(--bg-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kanban-column { background: var(--bg-column); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* 品牌动画标（造物台）：圆从桌下升起→转成方→转成菱→悬浮自转4圈→Q弹变回圆→沉回桌下，循环 */
.brand-anim { position: relative; display: inline-block; width: 1em; height: 1em; font-size: 22px; vertical-align: -0.2em; margin-right: 8px; flex-shrink: 0; }
.login-logo .brand-anim { font-size: 1.2em; margin-right: 11px; vertical-align: -0.18em; }
.brand-anim .bm-stage { position: absolute; left: 0; top: 0; width: 1em; height: 0.72em; overflow: hidden; }
.brand-anim .bm-shape {
  position: absolute; left: 0.3em; top: 0.16em; width: 0.4em; height: 0.4em;
  background: var(--accent); border-radius: 50%; transform-origin: center;
  animation: bmLife 25s cubic-bezier(0.45,0,0.55,1) infinite;
}
.brand-anim .bm-table { position: absolute; left: 0.06em; top: 0.64em; width: 0.88em; height: 0.15em; background: var(--accent); border-radius: 0.08em; }
.brand-anim .bm-table::before, .brand-anim .bm-table::after { content: ''; position: absolute; top: 0.15em; width: 0.09em; height: 0.12em; background: var(--accent); opacity: 0.5; border-radius: 0 0 0.05em 0.05em; }
.brand-anim .bm-table::before { left: 0.12em; }
.brand-anim .bm-table::after { right: 0.12em; }
@keyframes bmLife {
  /* 桌下：极小的圆（隐藏） */
  0%   { transform: translateY(0.62em) rotate(0deg) scale(0.12);  border-radius: 50%; animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
  /* 升起 + 由小变大，仍是圆 */
  8%   { transform: translateY(-0.03em) rotate(0deg) scale(1);    border-radius: 50%; }
  /* 变大后再变成正方形（正立），随后开始"转一下(1秒)→停顿"的节拍 */
  12%  { transform: translateY(-0.03em) rotate(0deg) scale(1);    border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  16%  { transform: translateY(-0.03em) rotate(45deg) scale(1);   border-radius: 8%; }
  18%  { transform: translateY(-0.03em) rotate(45deg) scale(1);   border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  22%  { transform: translateY(-0.03em) rotate(135deg) scale(1);  border-radius: 8%; }
  24%  { transform: translateY(-0.03em) rotate(135deg) scale(1);  border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  28%  { transform: translateY(-0.03em) rotate(225deg) scale(1);  border-radius: 8%; }
  30%  { transform: translateY(-0.03em) rotate(225deg) scale(1);  border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  34%  { transform: translateY(-0.03em) rotate(315deg) scale(1);  border-radius: 8%; }
  36%  { transform: translateY(-0.03em) rotate(315deg) scale(1);  border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  40%  { transform: translateY(-0.03em) rotate(405deg) scale(1);  border-radius: 8%; }
  42%  { transform: translateY(-0.03em) rotate(405deg) scale(1);  border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  46%  { transform: translateY(-0.03em) rotate(495deg) scale(1);  border-radius: 8%; }
  48%  { transform: translateY(-0.03em) rotate(495deg) scale(1);  border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  52%  { transform: translateY(-0.03em) rotate(585deg) scale(1);  border-radius: 8%; }
  54%  { transform: translateY(-0.03em) rotate(585deg) scale(1);  border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  58%  { transform: translateY(-0.03em) rotate(675deg) scale(1);  border-radius: 8%; }
  60%  { transform: translateY(-0.03em) rotate(675deg) scale(1);  border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  64%  { transform: translateY(-0.03em) rotate(765deg) scale(1);  border-radius: 8%; }
  66%  { transform: translateY(-0.03em) rotate(765deg) scale(1);  border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  70%  { transform: translateY(-0.03em) rotate(855deg) scale(1);  border-radius: 8%; }
  72%  { transform: translateY(-0.03em) rotate(855deg) scale(1);  border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  76%  { transform: translateY(-0.03em) rotate(945deg) scale(1);  border-radius: 8%; }
  78%  { transform: translateY(-0.03em) rotate(945deg) scale(1);  border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  82%  { transform: translateY(-0.03em) rotate(1035deg) scale(1); border-radius: 8%; }
  84%  { transform: translateY(-0.03em) rotate(1035deg) scale(1); border-radius: 8%;  animation-timing-function: cubic-bezier(0.45,0.05,0.55,0.95); }
  88%  { transform: translateY(-0.03em) rotate(1125deg) scale(1); border-radius: 8%; }
  /* 停顿完成 3 圈，准备 Q弹变圆 */
  90%  { transform: translateY(-0.03em) rotate(1125deg) scale(1); border-radius: 8%;  animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
  /* Q弹变胖成圆（过冲一下） */
  95%  { transform: translateY(-0.02em) rotate(1125deg) scale(1.2); border-radius: 50%; }
  96%  { transform: translateY(-0.02em) rotate(1125deg) scale(1); border-radius: 50%;  animation-timing-function: cubic-bezier(0.5,0,0.85,1); }
  /* 圆慢慢缩小、沉回桌下 */
  100% { transform: translateY(0.62em) rotate(1125deg) scale(0.12); border-radius: 50%; }
}
/* hover：整个标轻微放大 */
.logo .brand-anim, .login-logo .brand-anim { transition: transform .3s var(--ease-taste); }
.logo:hover .brand-anim, .login-logo:hover .brand-anim { transform: scale(1.1); }
/* 减少动态：停在静态菱形落在台上的样子（不至于只剩台子） */
@media (prefers-reduced-motion: reduce) {
  .brand-anim .bm-shape { animation: none; transform: translateY(-0.02em) rotate(45deg); border-radius: 8%; }
}

/* 🛠️ 问题解决站：知识库卡片列表 */
.station-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.station-card {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: var(--bg-surface, #fff); border-radius: var(--r-lg, 18px);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-taste, ease), box-shadow .18s var(--ease-taste, ease);
}
.station-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.station-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; color: #fff; }
.station-card-body { flex: 1; min-width: 0; }
.station-card-body h4 { margin: 0 0 4px; font-size: 15.5px; color: var(--dark-roast, #4A3C31); }
.station-card-body p { margin: 0; font-size: 13px; color: var(--text-secondary, #8C7E74); line-height: 1.55; }
.station-arrow { color: var(--text-light, #B5A99A); font-size: 18px; flex-shrink: 0; }
.station-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.station-detail-title { font-weight: 700; color: var(--dark-roast, #4A3C31); font-size: 15px; }

/* 知识库内嵌（同源 iframe） */
.davinci-frame {
  display: block; width: 100%; height: calc(100vh - 190px); min-height: 520px;
  border: none; border-radius: var(--r-lg, 18px);
  box-shadow: var(--shadow-sm); background: #FAF6F1;
}
@media (max-width: 768px) { .davinci-frame { height: calc(100vh - 230px); border-radius: 12px; } }

/* 钉钉登录授权说明列表 */
.consent-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.consent-list li { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-secondary, #F3ECE2); border-radius: 12px; padding: 12px 14px; }
.consent-ic { font-size: 20px; flex-shrink: 0; line-height: 1.3; }
.consent-list li div strong { font-size: 13.5px; color: var(--dark-roast, #4A3C31); }
.consent-list li div span { font-size: 12.5px; color: var(--text-secondary, #8C7E74); line-height: 1.6; }
.consent-note { font-size: 12.5px; color: var(--text-muted, #8A7A6A); line-height: 1.65; background: var(--accent-muted); border-radius: 10px; padding: 10px 12px; margin: 0; }

/* ② 完成庆祝：彩纸 */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 4000; }
.confetti-layer i {
  position: fixed; width: 8px; height: 8px; border-radius: 2px;
  opacity: 0; will-change: transform, opacity;
  animation: confettiPop 1s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes confettiPop {
  0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.5); }
}

/* ③ FLIP：换列卡片平滑滑动时浮在最上层 */
.project-card.flipping { z-index: 6; box-shadow: var(--shadow-lg); }

/* ④ 列顶进度条：该阶段项目占比，数据变化时平滑过渡（scaleX，不动宽度） */
.column-progress {
  height: 3px; margin: 0 14px 6px; border-radius: 3px;
  background: rgba(74,60,49,0.06); overflow: hidden;
}
.column-progress-fill {
  display: block; height: 100%; width: 100%; border-radius: 3px;
  transform-origin: left center; transform: scaleX(0);
  transition: transform .55s var(--ease-taste);
  opacity: .85;
}