/* ==============================================================================
   电视发现页：家庭角色与兴趣设置 (1920×1080 大屏交互规范专用样式)
   遵循《电视发现页：家庭角色与兴趣设置交互规格 V1.0》
   ============================================================================== */

:root {
  --primary-accent: #38bdf8;
  --primary-gradient: linear-gradient(135deg, #0ea5e9, #6366f1);
  --ai-badge-gradient: linear-gradient(135deg, #06b6d4, #3b82f6);
  --org-badge-gradient: linear-gradient(135deg, #f59e0b, #ea580c);
  --bg-dark-base: #060913;
  --panel-bg: rgba(15, 23, 42, 0.88);
  --card-bg: rgba(30, 41, 59, 0.7);
  --card-hover-bg: rgba(51, 65, 85, 0.85);
  --focus-ring-color: #38bdf8;
  --focus-glow: 0 0 0 3px #38bdf8, 0 8px 32px rgba(56, 189, 248, 0.45);
  --anim-cubic: cubic-bezier(0.2, 0, 0, 1);
  --anim-focus: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-dark-base);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #f8fafc;
}

/* ==============================================================================
   1920×1080 大屏标准视口与自适应舞台
   ============================================================================== */
.screen-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, #151d38 0%, #080c1a 65%, #030611 100%);
}

/* 仅在纯发现页原型中使用 column 纵向排版 (有 .discover-header 场景) */
.discover-family-page .app-stage,
.screen-viewport:has(.discover-header) .app-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* 背景动态极光氛围 */
.ambient-aurora {
  position: absolute;
  top: -150px;
  left: -100px;
  width: 2120px;
  height: 1280px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
  background: 
    radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 80% 40%, rgba(14, 165, 233, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 50% 85%, rgba(168, 85, 247, 0.18) 0%, transparent 55%);
  filter: blur(70px);
}

/* ==============================================================================
   发现页顶栏 (Header)
   ============================================================================== */
.discover-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 64px 20px 64px;
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.discover-brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
}

.brand-icon-box svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
}

.brand-title-wrap {
  display: flex;
  flex-direction: column;
}

.brand-page-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-ai-flow {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ai-badge-gradient);
  color: #fff;
  letter-spacing: 0.5px;
}

/* 顶部已有角色胶囊栏与添加入口 (发现页入口专属) */
.discover-header .user-profile-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 999px;
}

.discover-header .profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid transparent;
  cursor: pointer;
  outline: none;
  transition: all 0.2s var(--anim-focus);
}

.discover-header .profile-chip:hover,
.discover-header .profile-chip.focused {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
  transform: scale(1.04);
}

.discover-header .profile-chip.active-role {
  border-color: rgba(56, 189, 248, 0.6);
  background: rgba(56, 189, 248, 0.15);
}

.discover-header .chip-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: linear-gradient(135deg, #334155, #475569);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.discover-header .chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discover-header .chip-name {
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
}

.discover-header .chip-default-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}

/* 添加新角色入口胶囊 */
.discover-header .profile-chip.add-chip {
  background: rgba(56, 189, 248, 0.12);
  border: 1.5px dashed rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}

.discover-header .profile-chip.add-chip .chip-name {
  color: #38bdf8;
}

.discover-header .profile-chip.add-chip .chip-avatar {
  background: #38bdf8;
  color: #0f172a;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-capsule {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
}

.header-capsule.time-capsule {
  font-family: monospace;
  font-weight: 700;
  color: #f8fafc;
  border-color: rgba(56, 189, 248, 0.3);
}

/* ==============================================================================
   发现页主体展示流 (作为背景底图，浮层打开时覆盖 55% 遮罩)
   ============================================================================== */
.discover-main-body {
  position: relative;
  z-index: 5;
  flex: 1;
  padding: 0 64px 36px 64px;
  overflow-y: auto;
  overflow-x: hidden;
}

.discover-hero-banner {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 32px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-banner-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 9, 19, 0.95) 0%, rgba(6, 9, 19, 0.4) 60%, transparent 100%);
  z-index: 1;
}

.hero-banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 800px;
}

.hero-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #fff;
  width: fit-content;
}

.hero-banner-title {
  font-size: 38px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
}

.hero-banner-desc {
  font-size: 16px;
  color: #cbd5e1;
  line-height: 1.5;
}

/* 发现流推荐磁贴列排 */
.discover-row-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}

.section-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-row-title {
  font-size: 22px;
  font-weight: 800;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title-sub {
  font-size: 14px;
  font-weight: normal;
  color: #64748b;
}

.discover-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.discover-card-item {
  position: relative;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  cursor: pointer;
  outline: none;
  transition: all 0.25s var(--anim-focus);
}

.discover-card-item:hover,
.discover-card-item.focused {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--focus-ring-color);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--focus-ring-color);
}

.discover-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.65;
  transition: transform 0.4s ease;
}

.discover-card-item:hover .discover-card-bg,
.discover-card-item.focused .discover-card-bg {
  transform: scale(1.06);
  opacity: 0.85;
}

.discover-card-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 15, 30, 0.95) 100%);
}

.discover-card-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.discover-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
}

.discover-card-meta {
  font-size: 13px;
  color: #94a3b8;
}

/* ==============================================================================
   核心：家庭角色与兴趣设置 统一三态非全屏浮层
   (Family & Interest Overlay - 84% 宽 × 80% 高)
   ============================================================================== */
.family-overlay-backdrop {
  position: absolute;
  inset: 0;
  z-index: 100;
  background-color: rgba(6, 9, 19, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms linear;
}

.family-overlay-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* 浮层容器 (固定外框保持稳定，宽 84% = 1612px，默认全高 864px，S1 状态自适应收敛为 520px) */
.family-overlay-container {
  position: relative;
  width: 1612px;
  height: 864px;
  border-radius: 28px;
  background: rgba(13, 20, 36, 0.94);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 24px 72px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.97);
  transition: height 280ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 220ms var(--anim-cubic);
}

/* S1 状态：默认在第一行添加角色时，高度紧凑收敛至 520px，彻底消除下方大片空白 */
.family-overlay-container.state-s1 {
  height: 520px;
}

.family-overlay-backdrop.active .family-overlay-container {
  transform: scale(1);
}

/* 浮层顶栏 */
.overlay-top-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 36px 18px 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.4);
}

.overlay-header-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
}

.brand-logo-icon svg {
  width: 20px;
  height: 20px;
}

.overlay-main-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.summary-divider {
  margin: 0 4px;
  opacity: 0.35;
}

.overlay-header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.active-role-summary-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: #cbd5e1;
}

.active-role-summary-pill strong {
  color: #38bdf8;
}

.overlay-close-btn {
  display: none !important;
}

/* ==============================================================================
   浮层主体：A 区、B 区、C 区同一容器平滑伸缩
   ============================================================================== */
.overlay-morph-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 36px 24px 36px;
}

/* ------------------------------------------------------------------------------
   A 区：添加角色区 (可添加预设角色)
   ------------------------------------------------------------------------------ */
.area-add-roles {
  position: relative;
  overflow: hidden;
  transition: max-height 240ms var(--anim-cubic), 
              opacity 200ms linear, 
              margin 240ms var(--anim-cubic);
}

/* S1 展开状态 */
.state-s1 .area-add-roles {
  max-height: 250px;
  opacity: 1;
  margin-top: 18px;
  margin-bottom: 12px;
}

/* S2 状态：收起但保留向上提示 */
.state-s2 .area-add-roles {
  max-height: 46px;
  opacity: 1;
  margin-top: 12px;
  margin-bottom: 8px;
}

/* S3 状态：完全收起 */
.state-s3 .area-add-roles {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.s2-add-guide-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.2s ease;
}

.state-s2 .s2-add-guide-hint {
  display: flex;
}

.s2-add-guide-hint .guide-arrow {
  font-size: 11px;
  color: #38bdf8;
  animation: bounceArrowUp 1.8s infinite ease-in-out;
}

.s2-add-guide-hint .guide-text {
  color: #94a3b8;
  letter-spacing: 0.5px;
}

@keyframes bounceArrowUp {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.add-roles-content-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.state-s2 .add-roles-content-box,
.state-s3 .add-roles-content-box {
  display: none;
}

.area-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.area-title-text {
  font-size: 20px;
  font-weight: 800;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preset-roles-grid {
  display: grid;
  grid-template-columns: repeat(5, 204px);
  gap: 16px;
  justify-content: start;
  margin: 0;
  padding: 6px 0 12px 0;
  width: 100%;
}

.preset-candidate-card {
  position: relative;
  height: 96px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(25, 36, 56, 0.75), rgba(15, 23, 42, 0.85));
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 顶部环境微光反射层 */
.preset-candidate-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

/* 底部极光微光指示条 (纯内嵌，完全不破坏外框轮廓) */
.preset-candidate-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 28%;
  right: 28%;
  height: 3px;
  background: #38bdf8;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -1px 8px #38bdf8;
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* 🌟 获焦/悬浮状态：沉浸式多层级发光与微抬升，杜绝生硬贴框角标 */
.preset-candidate-card:hover,
.preset-candidate-card.focused {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22) 0%, rgba(30, 58, 102, 0.45) 55%, rgba(15, 23, 42, 0.95) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.7),
              0 16px 36px -4px rgba(0, 0, 0, 0.8),
              0 0 30px rgba(56, 189, 248, 0.38),
              inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transform: translateY(-6px) scale(1.03);
  z-index: 10;
}

.preset-candidate-card:hover::before,
.preset-candidate-card.focused::before {
  opacity: 1;
}

.preset-candidate-card:hover::after,
.preset-candidate-card.focused::after {
  opacity: 1;
  transform: scaleX(1);
}

.preset-candidate-card.full {
  opacity: 0.45;
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(255, 255, 255, 0.05);
  cursor: not-allowed;
}

.preset-candidate-card.full:hover,
.preset-candidate-card.full.focused {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
}

.preset-avatar-box {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #334155);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.preset-candidate-card:hover .preset-avatar-box,
.preset-candidate-card.focused .preset-avatar-box {
  border-color: #ffffff;
  box-shadow: 0 0 0 2.5px #38bdf8, 0 0 18px rgba(56, 189, 248, 0.65);
  transform: scale(1.06);
}

.preset-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 更多角色卡片专属样式 */
.preset-more-card {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.08), rgba(15, 23, 42, 0.75));
  border-style: dashed;
  border-color: rgba(56, 189, 248, 0.35);
}

.preset-more-card:hover,
.preset-more-card.focused {
  border-style: solid;
  border-color: #38bdf8;
}

.more-avatar-box {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(99, 102, 241, 0.3));
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
}

.preset-info-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.preset-name-title {
  font-size: 22px;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: 0.5px;
  margin: 0;
  transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.preset-candidate-card:hover .preset-name-title,
.preset-candidate-card.focused .preset-name-title {
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
  transform: translateY(-1px);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* 🌟 内嵌式操作提示胶囊：获焦时在名称下方平滑升起，优雅不突兀 */
.preset-focus-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 5px;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 8px;
  width: fit-content;
  opacity: 0;
  transform: translateY(6px);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              max-height 0.2s ease;
}

.preset-candidate-card:hover .preset-focus-action,
.preset-candidate-card.focused .preset-focus-action {
  opacity: 1;
  transform: translateY(0);
  max-height: 30px;
  pointer-events: auto;
}

.preset-focus-action .tv-key-cap {
  background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%);
  color: #0284c7;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.preset-focus-action .action-desc {
  font-size: 12px;
  font-weight: 700;
  color: #bae6fd;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.preset-candidate-card.full .preset-focus-action {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.25);
}

.preset-candidate-card.full .preset-focus-action .tv-key-cap {
  background: #64748b;
  color: #ffffff;
}

.preset-candidate-card.full .preset-focus-action .action-desc {
  color: #94a3b8;
}

/* ------------------------------------------------------------------------------
   B 区：已添加角色区 (全家及添加的角色，连续缩放)
   ------------------------------------------------------------------------------ */
.area-configured-roles {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 240ms var(--anim-cubic);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

/* S1 状态下的 B 区 (无兴趣区，隐藏底部分割线) */
.state-s1 .area-configured-roles {
  padding-top: 6px;
  border-bottom: none;
  padding-bottom: 4px;
}

/* S2 状态下的 B 区 (高光突出，大头像 ~96px) */
.state-s2 .area-configured-roles {
  padding-top: 10px;
  padding-bottom: 18px;
}

/* S3 状态下的 B 区 (紧凑行，小头像 ~48px) */
.state-s3 .area-configured-roles {
  padding-top: 8px;
  padding-bottom: 10px;
}

.configured-roles-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.roles-track-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 32px 18px 16px 18px;
  margin-top: -14px;
  scrollbar-width: none;
}

.roles-track-wrap::-webkit-scrollbar {
  display: none;
}

/* 角色项卡片容器 */
.role-badge-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  outline: none;
  padding: 6px 12px 10px 12px;
  border-radius: 16px;
  transition: transform 140ms var(--anim-focus), background-color 140ms ease;
  flex-shrink: 0;
}

.role-badge-item:hover,
.role-badge-item.focused {
  background: rgba(56, 189, 248, 0.12);
  z-index: 10;
}

/* 🌟 新增角色入场动效 (自上而下弹性飞入与高光展开) */
@keyframes roleBadgePopIn {
  0% {
    opacity: 0;
    transform: translateY(-28px) scale(0.5);
  }
  55% {
    opacity: 1;
    transform: translateY(6px) scale(1.12);
  }
  75% {
    transform: translateY(-3px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.role-badge-item.newly-added {
  animation: roleBadgePopIn 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.role-badge-item.newly-added .role-avatar-circle {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.85) !important;
}

/* S1 & S2 大头像 (约 96px) */
.role-badge-item .role-avatar-circle {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #334155);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 3px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: width 240ms var(--anim-cubic), 
              height 240ms var(--anim-cubic), 
              border-color 160ms ease, 
              box-shadow 160ms ease, 
              transform 140ms var(--anim-focus);
}

.role-badge-item .role-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.role-badge-item .role-name-label {
  font-size: 22px;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: 0.5px;
  transition: all 200ms var(--anim-cubic);
}

/* S2 获焦与激活态大头像高光 (120ms 放大至 1.06，外框发光) */
.state-s2 .role-badge-item.active-role .role-avatar-circle {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.4), 0 10px 28px rgba(14, 165, 233, 0.5);
  transform: scale(1.06);
}

.role-badge-item.focused .role-avatar-circle {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px #38bdf8, 0 12px 30px rgba(56, 189, 248, 0.6);
  transform: scale(1.08);
}

.role-badge-item.active-role .role-name-label,
.role-badge-item.focused .role-name-label {
  color: #38bdf8;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(56, 189, 248, 0.6);
}

/* 默认角色徽标 */
.role-default-tag-pill {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* 长按删除浮动提示 (仅在 S2 且非默认角色获焦/选中时显示) */
.role-longpress-hint {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(239, 68, 68, 0.95);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 25;
}

.state-s2 .role-badge-item.active-role:not(.default-role) .role-longpress-hint,
.state-s2 .role-badge-item.focused:not(.default-role) .role-longpress-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.state-s3 .role-longpress-hint,
.state-s3 .longpress-progress-ring {
  display: none !important;
}

/* 环形长按计时反馈 (围绕 96px 头像) */
.longpress-progress-ring {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  pointer-events: none;
  transform: rotate(-90deg);
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 5;
}

.role-badge-item.is-pressing .longpress-progress-ring {
  opacity: 1;
}

.progress-ring-circle {
  fill: transparent;
  stroke: #ef4444;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
}

.role-badge-item.is-pressing .progress-ring-circle {
  transition: stroke-dashoffset 0.8s linear;
  stroke-dashoffset: 0;
}

.role-badge-item.is-pressing .role-avatar-circle {
  transform: scale(0.95) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6) !important;
}

/* S3 状态：B 区紧凑行 (头像由 96px 平滑缩至 48px，横向胶囊排布) */
.state-s3 .roles-track-wrap {
  gap: 14px;
  padding: 8px 6px;
  margin-top: 0;
}

.state-s3 .role-badge-item {
  flex-direction: row;
  gap: 10px;
  padding: 4px 14px 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid transparent;
}

.state-s3 .role-badge-item.active-role {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.5);
}

.state-s3 .role-badge-item.focused {
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
}

.state-s3 .role-badge-item .role-avatar-circle {
  width: 48px;
  height: 48px;
  border-width: 2px;
  transform: none !important;
}

.state-s3 .role-badge-item .role-name-label {
  font-size: 14px;
}

.state-s3 .role-delete-action-box {
  display: none !important;
}

.state-s3 .role-default-tag-pill {
  top: -2px;
  right: -2px;
  font-size: 8px;
  padding: 1px 4px;
}

/* S3 状态上方提示："▲ 家庭角色管理" */
.s3-role-mgmt-hint {
  display: none;
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  gap: 6px;
  align-items: center;
}

.state-s3 .s3-role-mgmt-hint {
  display: flex;
}

/* ------------------------------------------------------------------------------
   C 区：兴趣设置区 (左分类、右批量与3列账号卡片网格)
   ------------------------------------------------------------------------------ */
.area-interests {
  position: relative;
  flex: 1;
  display: flex;
  gap: 28px;
  overflow: hidden;
  margin-top: 14px;
  transition: all 240ms var(--anim-cubic);
}

/* S1 状态：彻底收起且隐藏，等待焦点移入 B 区才展示 */
.state-s1 .area-interests {
  opacity: 0;
  height: 0;
  max-height: 0;
  flex: 0;
  pointer-events: none;
  margin: 0;
  transform: translateY(28px);
}

/* S2 状态：焦点移至已添加角色时平滑向上展开浮现 */
.state-s2 .area-interests {
  opacity: 1;
  max-height: 620px;
  flex: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms var(--anim-cubic), max-height 260ms var(--anim-cubic);
}

/* S3 状态：全面展开展示更多账号 */
.state-s3 .area-interests {
  opacity: 1;
  max-height: 720px;
  flex: 1;
  transform: translateY(0);
  margin-top: 10px;
}

/* 左侧：兴趣选择侧边栏面板 (包含上方标题与下方分类单列) */
.interests-sidebar-panel {
  width: 236px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 14px;
  height: 100%;
}

/* 左侧标题栏：“兴趣选择” (高度与内边距与右侧 batch-actions-bar 严格水平对齐) */
.interests-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0 16px 0;
  height: 48px;
  box-sizing: content-box;
}

.interests-sidebar-title {
  font-size: 20px;
  font-weight: 800;
  color: #cbd5e1;
  letter-spacing: 0.5px;
  line-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 6px;
  margin: 0;
}

/* 左侧：分类导航栏 (单列分类，大屏清晰字号，与右侧卡片网格高度严格一致) */
.interests-category-rail {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  padding-bottom: 24px;
  scrollbar-width: none;
}

.interests-category-rail::-webkit-scrollbar {
  display: none;
}

.category-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 12px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid transparent;
  color: #94a3b8;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s var(--anim-focus);
}

.category-nav-item.active-category {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-weight: 900;
}

.category-nav-item:hover,
.category-nav-item.focused,
.category-nav-item.active-category.focused {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  font-size: 22px;
  box-shadow: 0 0 0 3px #38bdf8, 0 8px 24px rgba(56, 189, 248, 0.55) !important;
  transform: scale(1.04) translateX(6px);
  z-index: 10;
}

.category-nav-item.focused .category-item-count,
.category-nav-item.active-category.focused .category-item-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.category-item-count {
  font-size: 14px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

/* 右侧：账号内容主面板 (上方批量操作 + 账号网格) */
.interests-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 14px;
  height: 100%;
}

/* 顶部批量操作栏 (居中对齐，放大按钮，与左侧“兴趣选择”基线高度完全对齐) */
.batch-actions-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 16px 0;
  height: 48px;
  box-sizing: content-box;
  background: transparent;
  border: none;
}

.batch-scope-hint {
  display: none !important;
}

.batch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 42px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
  letter-spacing: 0.5px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.batch-btn:hover,
.batch-btn.focused {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6), 0 8px 24px rgba(14, 165, 233, 0.55);
  transform: translateY(-2px) scale(1.04);
}

.batch-toggle-btn.all-selected {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.batch-toggle-btn.all-selected:hover,
.batch-toggle-btn.all-selected.focused {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.6), 0 8px 24px rgba(239, 68, 68, 0.55);
}

/* 账号卡片网格容器 (一行三张，独立滚动) */
.accounts-grid-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.3) rgba(15, 23, 42, 0.3);
}

.accounts-grid-viewport::-webkit-scrollbar {
  width: 6px;
}

.accounts-grid-viewport::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.35);
  border-radius: 3px;
}

.accounts-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 28px;
  column-gap: 18px;
  padding: 4px 4px 36px 4px;
}

/* 单张账号卡片 (电视大屏体验，所有文字不低于 20px) */
.account-card-item {
  position: relative;
  height: 248px;
  border-radius: 20px;
  background: var(--card-bg);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  padding: 20px 22px 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  outline: none;
  transition: transform 140ms var(--anim-focus), 
              border-color 140ms ease, 
              box-shadow 140ms ease, 
              background-color 140ms ease;
}

/* 卡片落焦反馈 (轻微向上平移2px，配合28px行间距，彻底消除对上一排标签的遮挡) */
.account-card-item:hover,
.account-card-item.focused {
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 2.5px var(--focus-ring-color), 0 10px 24px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
  z-index: 5;
  background: var(--card-hover-bg);
}

/* 已关注状态稳定底色 */
.account-card-item.followed {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
}

.account-card-item.followed:hover,
.account-card-item.followed.focused {
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 2.5px var(--focus-ring-color), 0 10px 28px rgba(14, 165, 233, 0.4);
  transform: translateY(-2px);
}

/* 卡片顶部：头像 + 账号名 + 关注数 + 关注按钮 */
.card-header-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-avatar-box {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #334155);
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.account-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-title-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.account-name-text {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

/* 关注人数展示行 (类似数字博主主页，带剪影图标，大屏字号 20px) */
.account-followers-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.2px;
}

.account-followers-line .followers-icon {
  color: #38bdf8;
  opacity: 0.85;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.account-followers-line .followers-count-val {
  color: #7dd3fc;
  font-size: 20px;
  font-weight: 700;
}

/* 关注状态标记勾选框 (大屏字号 20px) */
.follow-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #94a3b8;
  flex-shrink: 0;
  transition: all 120ms ease;
}

.account-card-item.followed .follow-status-pill {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

/* 卡片中下一句话简介 (大屏字号 20px，双行高标准 28px) */
.account-intro-text {
  font-size: 20px;
  color: #94a3b8;
  line-height: 1.4;
  height: 56px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 6px 0;
}

/* 卡片底部：简介下方展示相关标签组 (大屏字号 20px，彻底去掉横线) */
.card-bottom-row,
.account-tags-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0;
  margin-bottom: 2px;
  border-top: none;
}

.account-tags-list {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  flex-wrap: nowrap;
}

.account-tag-chip {
  font-size: 20px;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ==============================================================================
   删除确认弹窗 (浮层内部居中显示，背景角色区变暗)
   ============================================================================== */
.delete-role-modal-scrim {
  position: absolute;
  inset: 0;
  z-index: 150;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms linear;
}

.delete-role-modal-scrim.active {
  opacity: 1;
  pointer-events: auto;
}

.delete-role-card {
  width: 520px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.95);
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  transform: scale(0.95);
  transition: transform 180ms var(--anim-cubic);
}

.delete-role-modal-scrim.active .delete-role-card {
  transform: scale(1);
}

.delete-role-avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.45));
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-role-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0f172a;
  background: #1e293b;
}

.delete-warn-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.delete-warn-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.18);
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  font-size: 26px;
}

.delete-title-h3 {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
}

.delete-prompt-desc {
  font-size: 15px;
  color: #cbd5e1;
  line-height: 1.5;
}

.delete-actions-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  width: 100%;
}

.delete-modal-btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
}

.btn-delete-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.btn-delete-cancel:hover,
.btn-delete-cancel.focused {
  background: rgba(255, 255, 255, 0.2);
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

.btn-delete-confirm {
  background: #ef4444;
  color: #ffffff;
}

.btn-delete-confirm:hover,
.btn-delete-confirm.focused {
  background: #dc2626;
  border-color: #fca5a5;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

/* ==============================================================================
   新建角色未选兴趣提示弹窗 (浮层内部居中显示，拦截未选兴趣的退出行为)
   ============================================================================== */
.empty-interest-modal-scrim {
  position: absolute;
  inset: 0;
  z-index: 160;
  background: rgba(3, 7, 18, 0.82);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms linear;
}

.empty-interest-modal-scrim.active {
  opacity: 1;
  pointer-events: auto;
}

.empty-interest-card {
  width: 540px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.96);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 40px rgba(245, 158, 11, 0.15);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  transform: scale(0.95);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.empty-interest-modal-scrim.active .empty-interest-card {
  transform: scale(1);
}

.empty-interest-avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(217, 119, 6, 0.45));
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-interest-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #0f172a;
  background: #1e293b;
}

.empty-interest-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f59e0b;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.empty-interest-title-h3 {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.empty-interest-prompt-desc {
  font-size: 15px;
  color: #cbd5e1;
  line-height: 1.6;
}

.empty-interest-prompt-desc strong {
  color: #f59e0b;
  font-weight: 700;
}

.empty-interest-actions-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  width: 100%;
}

.empty-modal-btn {
  flex: 1;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
}

.btn-interest-continue {
  background: #f59e0b;
  color: #0f172a;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

.btn-interest-continue.focused,
.btn-interest-continue:focus {
  background: #fbbf24;
  transform: scale(1.04);
  box-shadow: 0 0 0 3px #ffffff, 0 8px 24px rgba(245, 158, 11, 0.55);
}

.btn-interest-quit {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.15);
}

.btn-interest-quit.focused,
.btn-interest-quit:focus {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: scale(1.04);
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* ==============================================================================
   手机扫码添加更多角色弹窗 (QR Code Modal)
   ============================================================================== */
.qr-role-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 29, 0.82);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.qr-role-modal-scrim.active {
  opacity: 1;
  pointer-events: auto;
}

.qr-role-card {
  width: 700px;
  background: linear-gradient(145deg, #131c2e, #0d1527);
  border: 1.5px solid rgba(56, 189, 248, 0.3);
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 40px rgba(56, 189, 248, 0.15);
  padding: 30px 36px 22px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: qrModalPopIn 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qrModalPopIn {
  from {
    transform: scale(0.92) translateY(16px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.qr-modal-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qr-badge-pill {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  letter-spacing: 0.5px;
}

.qr-modal-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.qr-modal-subtitle {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.4;
}

.qr-modal-body {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 8px 0;
}

.qr-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.qr-code-frame {
  position: relative;
  width: 160px;
  height: 160px;
  background: #ffffff;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.qr-status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #38bdf8;
  font-weight: 600;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  animation: pulseDot 1.6s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

.qr-features-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.qr-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  border-radius: 12px;
}

.qr-feature-item .feature-icon {
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}

.qr-feature-item strong {
  display: block;
  font-size: 13px;
  color: #f1f5f9;
  margin-bottom: 2px;
}

.qr-feature-item p {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
}

.qr-mock-sync-btn {
  width: 100%;
  margin-top: 4px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(99, 102, 241, 0.25));
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.qr-mock-sync-btn:hover,
.qr-mock-sync-btn.focused {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
  transform: scale(1.02);
}

.qr-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}

.footer-hint-text {
  font-size: 13px;
  color: #94a3b8;
}

.footer-hint-text strong {
  color: #38bdf8;
}

.qr-cancel-btn {
  padding: 6px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.qr-cancel-btn:hover,
.qr-cancel-btn.focused {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: #ffffff;
}

/* ==============================================================================
   底部遥控操作指引栏 (Remote Hints) 与 虚拟遥控器挂件 (Virtual D-Pad)
   ============================================================================== */
.screen-footer-hints {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 64px;
  background: rgba(6, 9, 19, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hints-group {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hint-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #94a3b8;
}

.key-symbol {
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: monospace;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
}

/* 屏幕右下角虚拟遥控器挂件 (方便在 PC 浏览器点击调试) */
.virtual-remote-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(56, 189, 248, 0.3);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.widget-title {
  font-size: 12px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.5px;
}

.dpad-cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 42px);
  grid-template-rows: repeat(3, 42px);
  gap: 6px;
}

.dpad-btn {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
  transition: all 0.12s ease;
}

.dpad-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
}

.dpad-btn:active {
  transform: scale(0.92);
}

.dpad-btn.btn-ok {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  border-color: #38bdf8;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.4);
}

.dpad-back-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.dpad-btn.btn-back-wide {
  flex: 1;
  height: 34px;
  font-size: 12px;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.dpad-btn.btn-back-wide:hover {
  background: #ef4444;
  color: #fff;
}

/* Toast 提示框 */
.tv-toast-box {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 300;
  padding: 12px 28px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: all 220ms var(--anim-cubic);
}

.tv-toast-box.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 全局焦点无遮挡 & 保持在最前保证 */
.discover-header .profile-chip.focused,
.role-badge-item.focused,
.preset-candidate-card.focused,
.category-nav-item.focused,
.account-card-item.focused,
.batch-btn.focused,
.btn-delete-cancel.focused,
.btn-delete-confirm.focused,
.qr-mock-sync-btn.focused,
.qr-cancel-btn.focused {
  position: relative !important;
  z-index: 50 !important;
}