/* ============================================================
   SPHERA — style.css  |  Your Universe of Connection
   Premium social media platform combining LinkedIn + Instagram + X + Facebook
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --bg: #06060f;
  --bg2: #0c0c1e;
  --bg3: #111128;
  --surface: #161630;
  --surface2: #1e1e3a;
  --border: rgba(255, 255, 255, 0.06);
  --text: #f0f0ff;
  --muted: #6b6b9a;
  --muted2: #4a4a7a;
  --radius: 14px;
  --radius-sm: 8px;
  --violet: #6d28d9;
  --violet2: #7c3aed;
  --blue: #2563eb;
  --cyan: #0ea5e9;
  --pink: #db2777;
  --gold: #d97706;
  --green: #059669;
  --grad: linear-gradient(135deg, #6d28d9, #2563eb, #0ea5e9);
  --grad2: linear-gradient(135deg, #6d28d9, #2563eb);
  --glow: rgba(109, 40, 217, 0.5);
  --sidebar-w: 256px;
  --rp-w: 290px;
  --topnav-h: 60px;
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  overflow: hidden
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px
}

::-webkit-scrollbar-thumb {
  background: rgba(109, 40, 217, 0.5);
  border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
  background: var(--violet2)
}

::-webkit-scrollbar-track {
  background: transparent
}

/* ============================================================
   SHELL LAYOUT
============================================================ */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden
}

/* ============================================================
   LEFT SIDEBAR
============================================================ */
.left-sidebar {
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.3s;
  z-index: 20;
  padding-bottom: 30px;
  scrollbar-width: auto;
  scrollbar-color: var(--violet2) var(--surface2);
}

.left-sidebar::-webkit-scrollbar {
  width: 6px;
}

.left-sidebar::-webkit-scrollbar-track {
  background: var(--surface2);
  /* Give the track a visible background */
  border-radius: 4px;
}

.left-sidebar::-webkit-scrollbar-thumb {
  background: var(--violet);
  /* Purple thumb */
  border-radius: 4px;
}

.left-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--pink);
  /* Bright pink on hover */
}

.ls-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.brand-orb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 0 20px var(--glow);
  flex-shrink: 0;
  animation: orbPulse 3s ease-in-out infinite;
}

@keyframes orbPulse {

  0%,
  100% {
    box-shadow: 0 0 20px var(--glow)
  }

  50% {
    box-shadow: 0 0 40px rgba(109, 40, 217, 0.8)
  }
}

.brand-name {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 1px;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.ls-nav {
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0
}

.lnav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  position: relative;
}

.lnav:hover {
  background: var(--surface);
  color: var(--text)
}

.active-lnav {
  background: var(--surface);
  color: var(--text) !important
}

.active-lnav .lnav-icon {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.lnav-icon {
  font-size: 17px;
  width: 22px;
  text-align: center;
  flex-shrink: 0
}

.nav-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--grad2);
  color: #fff;
}

.nav-badge.live {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  animation: livePulse 1.5s infinite
}

@keyframes livePulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0.6
  }
}

.nav-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(14, 165, 233, 0.1);
  padding: 1px 7px;
  border-radius: 20px
}

.ls-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 12px
}

.ls-channels {
  padding: 8px 8px 4px
}

.ls-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 2px 8px 8px
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s
}

.channel-item:hover {
  background: var(--surface);
  color: var(--text)
}

.ch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0
}

.ch-professional {
  background: #2563eb
}

.ch-creative {
  background: #7c3aed
}

.ch-personal {
  background: #db2777
}

.ch-business {
  background: #d97706
}

.add-channel-btn {
  width: calc(100% - 20px);
  margin: 6px 10px;
  padding: 7px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s
}

.add-channel-btn:hover {
  border-color: var(--violet2);
  color: var(--violet2)
}

.ls-cross-post {
  padding: 8px 12px;
  flex-shrink: 0
}

.cp-toggles {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px
}

.cp-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0
}

.cp-toggle input {
  appearance: none;
  width: 28px;
  height: 15px;
  background: var(--surface2);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0
}

.cp-toggle input:checked {
  background: var(--grad2)
}

.cp-toggle input::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: left 0.2s
}

.cp-toggle input:checked::after {
  left: 15px
}

.cp-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 900;
  color: #fff
}

.cp-ig {
  background: linear-gradient(135deg, #f09433, #dc2743)
}

.cp-li {
  background: #0a66c2
}

.cp-x {
  background: #000;
  border: 1px solid #333
}

.cp-fb {
  background: #1877f2
}

.cp-tt {
  background: linear-gradient(135deg, #69c9d0, #ee1d52)
}

.ls-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.ls-user-card:hover {
  background: var(--surface)
}

.lsu-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--violet2)
}

.lsu-info {
  flex: 1;
  overflow: hidden
}

.lsu-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lsu-handle {
  font-size: 10px;
  color: var(--muted)
}

.sphera-score {
  color: var(--cyan);
  font-weight: 600
}

.lsu-menu {
  color: var(--muted);
  cursor: pointer;
  padding: 4px
}

/* ============================================================
   MAIN CONTENT
============================================================ */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0
}

/* Top Nav */
.top-nav {
  height: var(--topnav-h);
  background: rgba(6, 6, 15, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  flex-shrink: 0;
  z-index: 10;
  position: sticky;
  top: 0;
}

.tn-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1
}

.tn-toggle-sidebar {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px
}

.tn-toggle-sidebar:hover {
  background: var(--surface);
  color: var(--text)
}

.tn-search {
  flex: 1;
  max-width: 500px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 8px 16px;
  transition: all 0.2s;
}

.tn-search:focus-within {
  border-color: var(--violet2);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15)
}

.tn-search-icon {
  color: var(--muted);
  font-size: 16px
}

.tn-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  outline: none
}

.tn-search-input::placeholder {
  color: var(--muted)
}

.search-kbd {
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px
}

.tn-actions {
  display: flex;
  align-items: center;
  gap: 10px
}

.tn-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--grad2);
  border: none;
  border-radius: 30px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 20px var(--glow);
  transition: all 0.2s;
}

.tn-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 30px var(--glow)
}

.tn-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s
}

.tn-icon-btn:hover {
  border-color: var(--violet2)
}

.notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background: var(--pink);
  border-radius: 50%;
  border: 2px solid var(--bg);
  animation: livePulse 1.5s infinite
}

.tn-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--violet2);
  cursor: pointer
}

/* PAGES */
.page {
  display: none;
  overflow-y: auto;
  flex: 1;
  padding-bottom: 40px
}

.active-page {
  display: block
}

/* ============================================================
   STORIES BAR
============================================================ */
.stories-bar {
  display: flex;
  gap: 12px;
  padding: 16px 20px 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.stories-bar::-webkit-scrollbar {
  height: 2px
}

.story-add-card {
  flex-shrink: 0;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.story-plus {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--violet2);
  transition: all 0.2s
}

.story-add-card:hover .story-plus {
  border-color: var(--violet2);
  background: rgba(124, 58, 237, 0.1)
}

.story-label {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap
}

.story-card {
  flex-shrink: 0;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
}

.story-ring {
  position: absolute;
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--muted2)
}

.story-ring-unseen {
  border-color: transparent;
  background: var(--grad);
  background-clip: padding-box;
  border: 2px solid transparent;
  background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad) border-box
}

.story-bg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover
}

.story-avatar {
  position: absolute;
  bottom: 14px;
  right: 0px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg2);
  object-fit: cover
}

.story-avatar-grad {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  background: var(--grad2)
}

.sg2 {
  background: linear-gradient(135deg, #0ea5e9, #6d28d9)
}

.sg3 {
  background: linear-gradient(135deg, #db2777, #9333ea)
}

.sg4 {
  background: linear-gradient(135deg, #d97706, #dc2626)
}

.sg5 {
  background: linear-gradient(135deg, #059669, #0ea5e9)
}

.story-username {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  max-width: 68px;
  text-overflow: ellipsis
}

/* ============================================================
   CATEGORY PILLS BAR
============================================================ */
.category-bar {
  padding: 12px 20px 4px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0
}

.cat-pills-wrap {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px
}

.cat-pills-wrap::-webkit-scrollbar {
  height: 2px
}

.cat-pill {
  flex-shrink: 0;
  padding: 6px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.cat-pill:hover {
  border-color: var(--violet2);
  color: var(--text)
}

.active-pill {
  background: var(--grad2);
  border-color: transparent;
  color: #fff !important;
  box-shadow: 0 0 14px var(--glow)
}

/* ============================================================
   CONTENT GRID (CapCut-style masonry)
============================================================ */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  padding: 16px 20px;
}

.content-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--surface);
}

.content-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6)
}

.cc-media-wrap {
  position: relative;
  overflow: hidden
}

.cc-media-wrap img,
.cc-media-wrap video {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s
}

.content-card:hover .cc-media-wrap img,
.content-card:hover .cc-media-wrap video {
  transform: scale(1.05)
}

.cc-tall .cc-media-wrap img {
  height: 280px
}

.cc-short .cc-media-wrap img {
  height: 180px
}

.cc-video-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}

.cc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 40%);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
}

.content-card:hover .cc-overlay {
  opacity: 1
}

.cc-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.2s;
}

.content-card:hover .cc-play-icon {
  transform: translate(-50%, -50%) scale(1)
}

.cc-overlay-stats {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9)
}

.cc-overlay-caption {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cc-featured-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--violet2);
  color: #fff;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700
}

.cc-info {
  padding: 10px
}

.cc-username {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.cc-stats-row {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--muted)
}

.cc-stat {
  display: flex;
  align-items: center;
  gap: 3px
}

.load-more-wrap {
  text-align: center;
  padding: 20px
}

.load-more-btn {
  padding: 10px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.load-more-btn:hover {
  border-color: var(--violet2);
  color: var(--text)
}

/* ============================================================
   DISCOVER PAGE
============================================================ */
.discover-hero {
  padding: 48px 40px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(109, 40, 217, 0.12), transparent 70%)
}

.dh-title {
  font-size: 40px;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px
}

.dh-sub {
  font-size: 16px;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto 28px
}

.dh-search {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto
}

.big-search {
  flex: 1;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 30px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  outline: none;
  transition: all 0.2s
}

.big-search:focus {
  border-color: var(--violet2)
}

.big-search-btn {
  padding: 14px 24px;
  background: var(--grad2);
  border: none;
  border-radius: 30px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 20px var(--glow)
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 24px 40px
}

/* ============================================================
   NETWORK PAGE
============================================================ */
.network-header {
  padding: 24px 24px 16px
}

.page-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px
}

.network-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.ns-stat {
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  min-width: 100px
}

.ns-num {
  display: block;
  font-size: 20px;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.ns-label {
  font-size: 11px;
  color: var(--muted)
}

.section-title-sm {
  font-size: 15px;
  font-weight: 700;
  padding: 0 24px 12px
}

.people-grid,
.communities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 24px
}

.person-card,
.community-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s
}

.person-card:hover,
.community-card:hover {
  border-color: var(--violet2);
  transform: translateY(-2px)
}

.pc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px
}

.pc-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px
}

.pc-title {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.4
}

.pc-score {
  font-size: 10px;
  color: var(--cyan);
  margin-bottom: 10px
}

.pc-connect-btn {
  width: 100%;
  padding: 7px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.pc-connect-btn:hover {
  background: var(--grad2);
  border-color: transparent;
  box-shadow: 0 0 14px var(--glow)
}

.community-card {}

.cc-banner {
  height: 60px;
  border-radius: 8px;
  background: var(--grad2);
  margin-bottom: 10px
}

.cc-cname {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px
}

.cc-members {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px
}

.cc-join-btn {
  width: 100%;
  padding: 7px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.cc-join-btn:hover {
  background: var(--violet2);
  border-color: transparent
}

/* ============================================================
   MESSAGES PAGE
============================================================ */
.messages-layout {
  display: flex;
  height: calc(100vh - var(--topnav-h));
  overflow: hidden
}

.msg-list-panel {
  width: 300px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0
}

.msg-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border)
}

.msg-list-header h3 {
  font-size: 15px;
  font-weight: 700
}

.new-msg-btn {
  padding: 5px 12px;
  background: var(--grad2);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer
}

.msg-search {
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  padding: 10px 16px;
  font-size: 12px;
  outline: none;
  width: 100%
}

.msg-list {
  flex: 1;
  overflow-y: auto
}

.msg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid var(--border)
}

.msg-item:hover,
.active-msg {
  background: var(--surface)
}

.msg-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff
}

.msg-item-body {
  flex: 1;
  overflow: hidden
}

.msg-item-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px
}

.msg-item-preview {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.msg-item-meta {
  text-align: right;
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0
}

.msg-unread-dot {
  width: 8px;
  height: 8px;
  background: var(--violet2);
  border-radius: 50%;
  margin-top: 4px;
  margin-left: auto
}

.msg-chat-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center
}

.chat-empty {
  text-align: center;
  color: var(--muted)
}

.ce-orb {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.3
}

/* ============================================================
   PULSE PAGE
============================================================ */
.pulse-header {
  text-align: center;
  padding: 48px 40px 24px;
  position: relative
}

.pulse-orb-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px
}

.pulse-orb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 40px var(--glow);
  animation: orbPulse 1.5s ease-in-out infinite
}

.pulse-title {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 8px;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.pulse-sub {
  font-size: 15px;
  color: var(--muted)
}

.pulse-streams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px 24px 24px
}

.stream-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s
}

.stream-card:hover {
  border-color: var(--violet2)
}

.sc-live {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px
}

.live-dot {
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  animation: livePulse 1s infinite
}

.sc-live-label {
  font-size: 10px;
  font-weight: 700;
  color: #ef4444;
  text-transform: uppercase
}

.sc-topic {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px
}

.sc-count {
  font-size: 12px;
  color: var(--cyan);
  margin-bottom: 8px
}

.sc-preview {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5
}

.pulse-globe-wrap {
  text-align: center;
  padding: 12px 24px 40px
}

.pulse-globe {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(109, 40, 217, 0.3), rgba(37, 99, 235, 0.2), transparent);
  border: 1px solid rgba(109, 40, 217, 0.4);
  margin: 0 auto 12px;
  position: relative;
  box-shadow: 0 0 60px rgba(109, 40, 217, 0.3);
  animation: globeSpin 20s linear infinite;
}

@keyframes globeSpin {
  from {
    box-shadow: 0 0 60px rgba(109, 40, 217, 0.3)
  }

  to {
    box-shadow: 0 0 80px rgba(37, 99, 235, 0.4)
  }
}

.pg-caption {
  font-size: 12px;
  color: var(--muted)
}

/* ============================================================
   TIME CAPSULE PAGE
============================================================ */
.capsule-hero {
  text-align: center;
  padding: 48px 40px 32px;
  background: radial-gradient(ellipse at center, rgba(109, 40, 217, 0.1), transparent 70%)
}

.capsule-icon {
  font-size: 52px;
  margin-bottom: 14px
}

.capsule-title {
  font-size: 32px;
  font-weight: 900;
  display: inline-block;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px
}

.capsule-sub {
  font-size: 15px;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 24px;
  line-height: 1.6
}

.capsule-create-btn {
  padding: 13px 32px;
  background: var(--grad);
  border: none;
  border-radius: 30px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 30px var(--glow);
  transition: all 0.2s
}

.capsule-create-btn:hover {
  transform: translateY(-2px)
}

.capsule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 0 24px
}

.capsule-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden
}

.capsule-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.05), transparent);
  pointer-events: none
}

.cc-locked-icon {
  font-size: 32px;
  margin-bottom: 10px
}

.cc-capsule-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px
}

.cc-capsule-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.4
}

.cc-unlock-date {
  font-size: 11px;
  color: var(--cyan);
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(14, 165, 233, 0.1);
  border-radius: 20px;
  display: inline-block
}

/* ============================================================
   PROFILE PAGE
============================================================ */
.profile-cover {
  position: relative;
  height: 200px;
  overflow: hidden
}

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

.cover-edit-btn {
  position: absolute;
  bottom: 12px;
  right: 16px;
  padding: 7px 16px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  cursor: pointer
}

.profile-header {
  display: flex;
  gap: 20px;
  padding: 0 24px 20px;
  align-items: flex-end;
  border-bottom: 1px solid var(--border);
  margin-top: -40px
}

.ph-avatar-wrap {
  position: relative;
  flex-shrink: 0
}

.ph-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--bg);
  position: relative;
  z-index: 2
}

.ph-avatar-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--grad);
  z-index: 1;
  animation: orbPulse 3s infinite
}

.ph-avatar-edit {
  position: absolute;
  bottom: 4px;
  right: 0px;
  width: 26px;
  height: 26px;
  background: var(--violet2);
  border: 2px solid var(--bg);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  z-index: 3
}

.ph-info {
  flex: 1;
  padding-top: 50px
}

.ph-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px
}

.ph-name {
  font-size: 22px;
  font-weight: 900
}

.ph-verified {
  font-size: 12px;
  background: var(--grad2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700
}

.ph-sphera-score {
  font-size: 12px;
  color: var(--cyan);
  font-weight: 600;
  margin-left: auto
}

.ph-title {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 5px
}

.ph-location {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px
}

.ph-open {
  color: var(--green);
  font-weight: 600
}

.ph-bio {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px
}

.ph-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px
}

.ph-tag {
  padding: 3px 10px;
  background: rgba(109, 40, 217, 0.15);
  border: 1px solid rgba(109, 40, 217, 0.3);
  border-radius: 20px;
  font-size: 11px;
  color: #a78bfa
}

.ph-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
  flex-wrap: wrap
}

.ph-stat {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.ph-stat strong {
  font-size: 15px;
  font-weight: 800
}

.ph-stat span {
  font-size: 10px;
  color: var(--muted)
}

.ph-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.ph-btn-primary {
  padding: 9px 22px;
  background: var(--grad2);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 16px var(--glow);
  transition: all 0.2s
}

.ph-btn-secondary {
  padding: 9px 22px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.ph-btn-secondary:hover {
  border-color: var(--violet2)
}

.ph-btn-icon {
  width: 36px;
  height: 36px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center
}

.profile-tabs {
  display: flex;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  gap: 2px;
  overflow-x: auto
}

.profile-tabs::-webkit-scrollbar {
  height: 2px
}

.ptab {
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap
}

.ptab:hover {
  color: var(--text)
}

.active-ptab {
  color: var(--text);
  border-bottom-color: var(--violet2)
}

.profile-content {
  overflow-y: auto
}

.profile-tab-panel {
  display: none;
  padding: 20px 24px
}

.active-ptabp {
  display: block
}

.profile-posts-grid,
.profile-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px
}

.profile-media-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s
}

.profile-media-grid img:hover {
  transform: scale(1.03)
}

/* About cards */
.about-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px
}

.about-card {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius)
}

.ac-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 12px
}

.ac-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5
}

.ac-item span {
  color: var(--muted)
}

.ac-item-icon {
  font-size: 20px;
  flex-shrink: 0
}

.skills-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.skill-tag {
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text)
}

.cross-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px
}

.cp-link {
  padding: 8px 12px;
  text-align: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s
}

.cp-link.cp-li {
  background: #0a66c2;
  color: #fff
}

.cp-link.cp-ig {
  background: linear-gradient(135deg, #f09433, #dc2743);
  color: #fff
}

.cp-link.cp-x {
  background: #000;
  color: #fff;
  border: 1px solid #333
}

.cp-link.cp-yt {
  background: #ff0000;
  color: #fff
}

/* Analytics */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px
}

.analytics-card {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius)
}

.ac-big {
  grid-column: span 2
}

.anl-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 10px
}

.anl-big {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 4px;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.anl-change {
  font-size: 12px;
  color: var(--green)
}

.sphera-score-display {
  display: flex;
  gap: 20px;
  align-items: center
}

.ssd-ring {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: conic-gradient(var(--violet2) 84.7%, var(--surface2) 84.7%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.ssd-value {
  font-size: 22px;
  font-weight: 900;
  background: #fff;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3)
}

.ssd-breakdown {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.ssd-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px
}

.ssd-pct {
  color: var(--violet2);
  font-weight: 700
}

.mood-ring-wrap {
  text-align: center
}

.mood-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(var(--green) 68%, var(--muted2) 68% 92%, #dc2626 92%);
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center
}

.mood-center {
  font-size: 12px;
  font-weight: 700;
  background: var(--bg3);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2
}

.mood-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 10px;
  color: var(--muted)
}

.ml-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0
}

.ml-pos {
  background: var(--green)
}

.ml-neu {
  background: var(--muted2)
}

.ml-neg {
  background: #dc2626
}

.anl-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 50px;
  margin-top: 10px
}

.anl-bar {
  flex: 1;
  background: var(--grad2);
  border-radius: 2px;
  transition: all 0.3s
}

/* Capsule cards in profile */
.capsule-profile-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px
}

/* ============================================================
   RIGHT PANEL
============================================================ */
.right-panel {
  width: var(--rp-w);
  background: var(--bg2);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px
}

.rpc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px
}

.rpc-icon {
  font-size: 15px;
  color: var(--violet2)
}

.rpc-title {
  font-size: 13px;
  font-weight: 700;
  flex: 1
}

.rpc-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--grad2);
  color: #fff;
  border-radius: 20px
}

.rpc-sub {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px
}

/* AI Match */
.ai-match-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.am-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--surface2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s
}

.am-item:hover {
  border: 1px solid rgba(109, 40, 217, 0.3)
}

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

.am-info {
  flex: 1;
  overflow: hidden
}

.am-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.am-match {
  font-size: 10px;
  color: var(--cyan)
}

.am-connect {
  padding: 4px 10px;
  background: var(--grad2);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer
}

/* Trending Topics */
.trending-topics {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px
}

.tt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer
}

.tt-item:hover .tt-tag {
  color: var(--violet2)
}

.tt-tag {
  font-size: 12px;
  font-weight: 600;
  transition: color 0.2s
}

.tt-count {
  font-size: 10px;
  color: var(--muted)
}

/* Pulse mini */
.pulse-mini-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px
}

.pm-item {
  font-size: 12px;
  line-height: 1.4;
  padding: 8px;
  background: var(--surface2);
  border-radius: 8px;
  border-left: 2px solid var(--violet2)
}

.pm-time {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px
}

/* Mood */
.mood-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px
}

.mood-btn {
  padding: 5px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.mood-btn:hover {
  border-color: var(--violet2);
  color: var(--text)
}

.active-mood {
  background: var(--grad2);
  border-color: transparent;
  color: #fff
}

/* Score card */
.score-display {
  padding: 4px 0
}

.score-number {
  font-size: 36px;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px
}

.score-bar-wrap {}

.score-bar {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px
}

.score-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 3px
}

.score-label {
  font-size: 11px;
  color: var(--cyan)
}

/* ============================================================
   CREATE POST MODAL
============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.2s ease
}

.modal-overlay.hidden {
  display: none
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.create-post-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  width: 560px;
  max-width: 95vw;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.cp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px
}

.cp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--violet2)
}

.cp-header-info {
  flex: 1
}

.cp-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px
}

.cp-audience {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  padding: 3px 10px;
  font-size: 11px
}

.cp-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  margin-left: auto;
  padding: 4px
}

.cp-textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  outline: none;
  resize: none;
  placeholder-color: var(--muted);
  margin-bottom: 14px
}

.cp-textarea::placeholder {
  color: var(--muted)
}

.cp-mood-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px
}

.cp-mood-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600
}

.cp-mood-pills {
  display: flex;
  gap: 6px
}

.cmp {
  font-size: 20px;
  cursor: pointer;
  width: 34px;
  height: 34px;
  background: var(--surface2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s
}

.cmp:hover {
  background: var(--surface)
}

.active-cmp {
  background: rgba(109, 40, 217, 0.2);
  box-shadow: 0 0 10px var(--glow)
}

.cp-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px
}

.cp-att-btn {
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.cp-att-btn:hover {
  border-color: var(--violet2);
  color: var(--text)
}

.cp-cross-post-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px;
  background: var(--surface);
  border-radius: 10px
}

.cp-cp-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600
}

.cp-cp-icons {
  display: flex;
  gap: 6px
}

.cp-platform-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.2s
}

.cp-platform-icon:hover {
  opacity: 1
}

.active-cpi {
  opacity: 1;
  box-shadow: 0 0 10px rgba(109, 40, 217, 0.4)
}

.cp-platform-icon.cp-ig {
  background: linear-gradient(135deg, #f09433, #dc2743)
}

.cp-platform-icon.cp-li {
  background: #0a66c2
}

.cp-platform-icon.cp-x {
  background: #000;
  border: 1px solid #333
}

.cp-platform-icon.cp-fb {
  background: #1877f2
}

.cp-platform-icon.cp-tt {
  background: linear-gradient(135deg, #69c9d0, #ee1d52)
}

.cp-preview {
  margin-bottom: 12px
}

.cp-preview img,
.cp-preview video {
  width: 100%;
  border-radius: 10px;
  max-height: 200px;
  object-fit: cover
}

.cp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 12px
}

.cp-hashtags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1
}

.hashtag-sug {
  font-size: 11px;
  color: var(--violet2);
  cursor: pointer;
  background: rgba(109, 40, 217, 0.1);
  padding: 3px 8px;
  border-radius: 20px
}

.hashtag-sug:hover {
  background: rgba(109, 40, 217, 0.2)
}

.cp-post-btn {
  padding: 10px 24px;
  background: var(--grad);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 20px var(--glow);
  transition: all 0.2s;
  white-space: nowrap
}

.cp-post-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 30px var(--glow)
}

/* Story viewer */
.story-viewer {
  background: var(--bg3);
  border-radius: 20px;
  width: 360px;
  height: 600px;
  position: relative;
  overflow: hidden
}

.sv-progress {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
  z-index: 5
}

.sv-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center
}

.sv-content {
  width: 100%;
  height: 100%
}

.sv-content img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.sv-info {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  color: #fff
}

/* Video modal */
.video-modal-card {
  background: var(--bg3);
  border-radius: 20px;
  display: flex;
  overflow: hidden;
  width: min(90vw, 900px);
  max-height: 90vh;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center
}

.vm-left {
  width: 360px;
  flex-shrink: 0;
  position: relative;
  background: #000
}

.vm-video {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.vm-video-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px
}

.vm-video-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.vm-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.2)
}

.vm-right {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0
}

.vm-user-row {
  display: flex;
  align-items: center;
  gap: 10px
}

.vm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--violet2)
}

.vm-user-info {
  flex: 1
}

.vm-username {
  font-size: 14px;
  font-weight: 700
}

.vm-time {
  font-size: 11px;
  color: var(--muted)
}

.vm-follow-btn {
  padding: 7px 16px;
  background: var(--grad2);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer
}

.vm-caption {
  font-size: 13px;
  line-height: 1.6
}

.vm-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.vm-hashtag {
  font-size: 12px;
  color: var(--violet2)
}

.vm-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.vm-action-btn {
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.vm-action-btn:hover {
  border-color: var(--violet2)
}

.vm-remix-btn {
  background: rgba(109, 40, 217, 0.15);
  border-color: rgba(109, 40, 217, 0.3);
  color: #a78bfa
}

.vm-reactions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.vm-react {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.2s
}

.vm-react:hover {
  transform: scale(1.2);
  background: var(--surface2)
}

.vm-comments-section {
  flex: 1;
  min-height: 0
}

.vm-comments-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px
}

.vm-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 10px
}

.vmc-item {
  display: flex;
  gap: 8px
}

.vmc-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  flex-shrink: 0
}

.vmc-body strong {
  font-size: 12px
}

.vmc-body p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px
}

.vm-comment-input-row {
  display: flex;
  gap: 8px;
  align-items: center
}

.vmc-self-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0
}

.vm-comment-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  padding: 7px 14px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s
}

.vm-comment-input:focus {
  border-color: var(--violet2)
}

.vm-comment-send {
  width: 34px;
  height: 34px;
  background: var(--grad2);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px
}

/* Toast */
.toast-el {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 40, 0.95);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  z-index: 999;
  backdrop-filter: blur(20px);
  animation: slideUp 0.3s ease;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5)
}

.toast-el.hidden {
  display: none
}

/* ============================================================
   INFINITE MARQUEE STRIP (CapCut-style scrolling cards)
============================================================ */
.marquee-section {
  padding: 8px 0 20px;
  overflow: hidden
}

.marquee-label {
  padding: 0 20px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.marquee-label span {
  color: var(--violet2);
  cursor: pointer;
  font-size: 12px
}

.marquee-label span:hover {
  text-decoration: underline
}

.marquee-outer {
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: marqueeMoveLeft 40s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused
}

.marquee-reverse {
  animation: marqueeMoveRight 38s linear infinite;
}

@keyframes marqueeMoveLeft {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

@keyframes marqueeMoveRight {
  0% {
    transform: translateX(-50%)
  }

  100% {
    transform: translateX(0)
  }
}

.mq-card {
  flex-shrink: 0;
  width: 130px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.mq-card:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6)
}

.mq-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s
}

.mq-card:hover img {
  transform: scale(1.08)
}

.mq-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.9);
}

.mq-card:hover .mq-play-icon {
  opacity: 1
}

.mq-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

.mq-card-user {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mq-card-likes {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.7)
}

.mq-featured {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--violet2);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
}

/* ============================================================
   POST TYPE TABS (in create post modal)
============================================================ */
.post-type-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  scrollbar-width: none
}

.post-type-tabs::-webkit-scrollbar {
  display: none
}

.ptt {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.ptt:hover {
  background: var(--surface);
  color: var(--text)
}

.ptt.active-ptt {
  background: var(--grad2);
  border-color: transparent;
  color: #fff
}

/* ============================================================
   REELS PAGE — full-screen vertical scroll
============================================================ */
#pageReels {
  padding: 0;
  overflow: hidden;
  height: calc(100vh - var(--topnav-h))
}

.reels-container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100%;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.reels-container::-webkit-scrollbar {
  display: none
}

.reel-card {
  flex-shrink: 0;
  width: 100%;
  height: calc(100vh - var(--topnav-h));
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85)
}

.reel-side-actions {
  position: absolute;
  right: 16px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.rsa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.rsa-btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.2s, background 0.2s;
}

.rsa-btn:hover .rsa-btn-icon {
  transform: scale(1.15);
  background: rgba(109, 40, 217, 0.6)
}

.reel-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 60px;
  padding: 20px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.reel-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px
}

.reel-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  background: var(--grad2)
}

.reel-username {
  font-size: 14px;
  font-weight: 700;
  color: #fff
}

.reel-follow-btn {
  padding: 4px 12px;
  border: 1.5px solid #fff;
  border-radius: 20px;
  background: transparent;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s
}

.reel-follow-btn:hover {
  background: #fff;
  color: #000
}

.reel-caption {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin-bottom: 8px
}

.reel-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.reel-tag {
  font-size: 12px;
  color: var(--violet2);
  font-weight: 600;
  cursor: pointer
}

.reel-audio-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7)
}

.reel-audio-icon {
  width: 28px;
  height: 28px;
  background: var(--grad2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  animation: spin 4s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.reel-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2)
}

.reel-progress-fill {
  height: 100%;
  background: var(--grad2);
  animation: reelProgress 12s linear infinite
}

@keyframes reelProgress {
  from {
    width: 0%
  }

  to {
    width: 100%
  }
}

/* ============================================================
   WATCH PAGE
============================================================ */
.watch-header {
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap
}

.watch-tabs {
  display: flex;
  gap: 8px
}

.watch-tab {
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.watch-tab.active-wtab,
.watch-tab:hover {
  background: var(--grad2);
  color: #fff
}

.watch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 16px 20px
}

.watch-card {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s
}

.watch-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5)
}

.wc-thumb {
  position: relative
}

.wc-thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block
}

.wc-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px
}

.wc-live-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  animation: pulse 2s infinite
}

.wc-info {
  padding: 10px 12px
}

.wc-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.4
}

.wc-meta {
  font-size: 11px;
  color: var(--muted)
}

.wc-views {
  font-size: 11px;
  color: var(--muted)
}

/* ============================================================
   GROUPS PAGE
============================================================ */
.groups-layout {
  display: flex;
  height: calc(100vh - var(--topnav-h));
  overflow: hidden
}

.groups-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px;
  overflow-y: auto;
  background: var(--bg)
}

.gs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px
}

.gs-title {
  font-size: 18px;
  font-weight: 800
}

.gs-create-btn {
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer
}

.gs-search {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  margin-bottom: 12px
}

.gs-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 8px
}

.gs-group-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 4px
}

.gs-group-item:hover,
.gs-group-item.active-gsi {
  background: rgba(109, 40, 217, 0.15)
}

.gs-group-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0
}

.gs-group-name {
  font-size: 13px;
  font-weight: 700
}

.gs-group-members {
  font-size: 11px;
  color: var(--muted)
}

.groups-main {
  flex: 1;
  overflow-y: auto;
  padding: 0
}

.group-feed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--muted)
}

.gfp-icon {
  font-size: 48px
}

.group-view {
  padding: 0
}

.gv-banner {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block
}

.gv-info {
  padding: 16px 20px
}

.gv-name {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px
}

.gv-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px
}

.gv-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px
}

.gv-join-btn {
  padding: 8px 24px;
  border-radius: 20px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}

.gv-share-btn {
  padding: 8px 24px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer
}

.gv-posts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px 20px
}

.gv-post-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid var(--border)
}

.gvp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px
}

.gvp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff
}

.gvp-name {
  font-size: 13px;
  font-weight: 700
}

.gvp-time {
  font-size: 11px;
  color: var(--muted)
}

.gvp-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 10px
}

.gvp-actions {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px
}

.gvp-act-btn {
  flex: 1;
  padding: 6px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.2s
}

.gvp-act-btn:hover {
  background: var(--border);
  color: var(--text)
}

/* ============================================================
   EVENTS PAGE
============================================================ */
.events-header {
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.ev-create-btn {
  padding: 8px 20px;
  border-radius: 20px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}

.events-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border)
}

.ev-tab {
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.ev-tab.active-etab,
.ev-tab:hover {
  background: var(--grad2);
  color: #fff
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px 20px
}

.event-card {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4)
}

.ec-banner {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block
}

.ec-body {
  padding: 14px
}

.ec-date {
  font-size: 11px;
  font-weight: 800;
  color: var(--violet2);
  text-transform: uppercase;
  margin-bottom: 4px
}

.ec-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 6px
}

.ec-location {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px
}

.ec-attendees {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px
}

.ec-actions {
  display: flex;
  gap: 8px
}

.ec-rsvp-btn {
  flex: 1;
  padding: 7px;
  border-radius: 10px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s
}

.ec-rsvp-btn:hover {
  opacity: 0.85
}

.ec-int-btn {
  padding: 7px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  cursor: pointer
}

/* ============================================================
   MARKETPLACE PAGE
============================================================ */
.market-header {
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.market-sell-btn {
  padding: 8px 20px;
  border-radius: 20px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}

.market-search-bar {
  display: flex;
  gap: 10px;
  padding: 12px 20px
}

.market-search {
  flex: 1;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px
}

.market-filter {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  cursor: pointer
}

.market-cats {
  display: flex;
  gap: 8px;
  padding: 0 20px 12px;
  overflow-x: auto;
  scrollbar-width: none
}

.market-cats::-webkit-scrollbar {
  display: none
}

.mcat {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.mcat.active-mcat,
.mcat:hover {
  background: var(--grad2);
  border-color: transparent;
  color: #fff
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 0 20px 20px
}

.market-item {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s
}

.market-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4)
}

.mi-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block
}

.mi-body {
  padding: 10px 12px
}

.mi-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--violet2);
  margin-bottom: 4px
}

.mi-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px
}

.mi-location {
  font-size: 11px;
  color: var(--muted)
}

.mi-condition {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px
}

/* ============================================================
   NOTIFICATION & FRIEND REQUEST PANELS
============================================================ */
.notif-panel,
.friend-req-panel {
  position: absolute;
  top: 48px;
  right: 0;
  width: 340px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.np-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border)
}

.np-title {
  font-size: 16px;
  font-weight: 800
}

.np-markall {
  font-size: 12px;
  color: var(--violet2);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600
}

.np-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.15s
}

.np-item:hover {
  background: var(--surface)
}

.np-item.np-unread {
  background: rgba(109, 40, 217, 0.08)
}

.np-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--grad2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 15px
}

.np-content {
  flex: 1;
  min-width: 0
}

.np-text {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 3px
}

.np-time {
  font-size: 11px;
  color: var(--muted)
}

.np-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet2);
  flex-shrink: 0;
  margin-top: 6px
}

.frq-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px
}

.frq-accept {
  padding: 5px 14px;
  border-radius: 8px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer
}

.frq-decline {
  padding: 5px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  cursor: pointer
}

/* Reaction popup */
.reaction-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 6px 10px;
  display: flex;
  gap: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  z-index: 100;
  animation: popIn 0.15s ease;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.reaction-popup.show {
  opacity: 1;
  pointer-events: all
}

@keyframes popIn {
  from {
    transform: scale(0.7)
  }

  to {
    transform: scale(1)
  }
}

.rp-emoji {
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.15s;
  line-height: 1
}

.rp-emoji:hover {
  transform: scale(1.4) translateY(-4px)
}

/* ============================================================
   CAREERORBIT — SPHERA's Job Board (NOT LinkedIn)
============================================================ */
/* Launchpad Banner (like Open to Work — but SPHERA branded) */
.co-launchpad-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 20px 0;
  padding: 14px 18px;
  background: rgba(109, 40, 217, 0.1);
  border: 1px solid rgba(109, 40, 217, 0.3);
  border-radius: 16px;
  position: relative;
}

.co-lp-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1
}

.co-lp-icon {
  font-size: 28px;
  animation: float 3s ease-in-out infinite
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-6px)
  }
}

.co-lp-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px
}

.co-lp-title strong {
  color: var(--violet2)
}

.co-lp-sub {
  font-size: 12px;
  color: var(--muted)
}

.co-lp-edit {
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap
}

.co-lp-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: 8px
}

/* ══════════════════════════════════════════════════
   CAREERORBIT — 4-THEME SYSTEM
   Theme is set by data-co-theme on .co-layout
   Default: midnight
   ══════════════════════════════════════════════════ */

/* ── Theme Button (inline in launchpad banner) ── */
.co-theme-float-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.co-theme-float-btn:hover {
  background: rgba(255, 255, 255, 0.20);
  transform: scale(1.1);
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.5);
}

/* ── Theme Popup Card ──────────────────────────────── */
.co-theme-popup {
  position: fixed;
  top: 145px;
  right: 270px;
  background: rgba(8, 8, 22, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(24px);
  padding: 12px;
  z-index: 9999;
  width: 195px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  animation: coPopupIn 0.18s ease;
}

@keyframes coPopupIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.co-theme-popup.hidden {
  display: none;
}

.co-theme-popup-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.co-theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: 'Outfit', sans-serif;
}

.co-theme-option:last-child {
  margin-bottom: 0;
}

.co-theme-option:hover {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.4);
}

.co-theme-option.co-theme-active {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.5);
}

.co-theme-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.co-theme-opt-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: left;
}

.co-theme-check {
  font-size: 13px;
  color: #a78bfa;
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.15s;
}

.co-theme-option.co-theme-active .co-theme-check {
  opacity: 1;
}



/* ── Edit Signal Modal ──────────────────────────────── */
.edit-signal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998;
  animation: fadeIn 0.15s ease;
}

.edit-signal-overlay.hidden,
.edit-signal-modal.hidden {
  display: none
}

.edit-signal-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  max-width: 92vw;
  max-height: 85vh;
  background: rgba(8, 8, 22, 0.98);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(124, 58, 237, 0.15);
  backdrop-filter: blur(24px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  animation: coPopupIn 0.2s ease;
  overflow: hidden;
}

.es-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.es-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff
}

.es-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px
}

.es-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

.es-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.es-field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.es-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.5);
}

.es-input {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  transition: border-color 0.2s;
}

.es-input:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.6);
}

.es-pill-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.es-pill {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.es-pill.active-espill,
.es-pill:hover {
  background: rgba(124, 58, 237, 0.25);
  border-color: #a78bfa;
  color: #a78bfa;
}

.es-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.es-cancel {
  padding: 9px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.es-save {
  padding: 9px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.es-save:hover {
  opacity: 0.85
}

/* ── Profile Menu Panels (Notifications, Help, Job Match, SpheraMatch) ─── */
.me-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}

.me-panel-overlay.hidden {
  display: none
}

.me-panel-content {
  width: 520px;
  max-width: 94vw;
  max-height: 85vh;
  background: rgba(8, 8, 22, 0.98);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(124, 58, 237, 0.12);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  animation: coPopupIn 0.2s ease;
  overflow: hidden;
}

.me-panel-wide {
  width: 700px
}

.me-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.me-panel-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff
}

.me-panel-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px
}

.me-panel-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

.me-panel-body {
  padding: 20px;
  overflow-y: auto;
}

.me-panel-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--violet2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Notification cards */
.me-notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.me-notif-job {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: all 0.15s;
}

.me-notif-job:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.3)
}

.me-notif-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.5), rgba(109, 40, 217, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}

.me-notif-info {
  flex: 1;
  min-width: 0
}

.me-notif-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px
}

.me-notif-company {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px
}

.me-notif-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.me-notif-match {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
  font-weight: 700;
}

.me-notif-salary {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-weight: 600;
}

.me-notif-exp {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-weight: 600;
}

.me-notif-time {
  font-size: 10px;
  color: #a78bfa;
  font-weight: 700;
  flex-shrink: 0
}

/* Resume tips card */
.me-resume-tips-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px;
}

.me-tip-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px
}

.me-tips-list {
  display: flex;
  flex-direction: column;
  gap: 12px
}

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

.me-tip-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.me-tip-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px
}

.me-tip-desc {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55)
}

.me-tip-cta {
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.me-tip-cta:hover {
  opacity: 0.85
}

/* Tutorial Reels grid */
.me-reels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.me-reel-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: all 0.15s;
}

.me-reel-card:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.3)
}

.me-reel-thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.me-reel-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff
}

.me-reel-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px
}

/* Job Match horizontal scroll cards */
.me-jm-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.me-jm-card {
  min-width: 220px;
  max-width: 240px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
}

.me-jm-card:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.3)
}

.me-jm-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
}

.me-jm-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3
}

.me-jm-company {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 3px
}

.me-jm-location {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px
}

.me-jm-salary {
  font-size: 14px;
  font-weight: 800;
  color: #a78bfa;
  margin-bottom: 8px
}

.me-jm-footer {
  display: flex;
  gap: 6px;
  margin-bottom: 10px
}

.me-jm-match {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
  font-weight: 700;
}

.me-jm-exp {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-weight: 600;
}

.me-jm-apply {
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: auto;
}

.me-jm-apply-ext {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15)
}

.me-jm-apply:hover {
  opacity: 0.85
}

/* SpheraMatch category sections */
.me-sm-section {
  margin-bottom: 18px
}

.me-sm-cat-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.me-sm-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin
}

.me-sm-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.me-sm-card:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.3)
}

.me-sm-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.5), rgba(109, 40, 217, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
}

.me-sm-info {
  flex: 1;
  min-width: 0
}

.me-sm-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.me-sm-company {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px
}

.me-sm-tags {
  display: flex;
  gap: 5px;
  margin-top: 4px
}

.me-sm-match {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
  font-weight: 700;
}

.me-sm-type {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-weight: 600;
}

/* 3-column layout */
.co-layout {
  display: grid;
  grid-template-columns: 260px 1fr 380px;
  gap: 0;
  height: calc(100vh - var(--topnav-h) - 80px);
  overflow: hidden;
  margin-top: 12px
}

/* Left sidebar */
.co-sidebar {
  border-right: 1px solid var(--border);
  padding: 16px;
  overflow-y: auto;
  background: var(--bg)
}

.co-search-block {
  margin-bottom: 16px
}

.co-search-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--violet2)
}

.co-search-row {
  display: flex;
  gap: 6px
}

.co-search-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px
}

.co-search-btn {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--grad2);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0
}

.co-filters {
  padding-top: 12px;
  border-top: 1px solid var(--border)
}

.co-filter-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 6px
}

.co-filter-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}

.co-pill {
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap
}

.co-pill.active-copill,
.co-pill:hover {
  background: rgba(109, 40, 217, 0.25);
  border-color: var(--violet2);
  color: var(--violet2)
}

.co-salary-slider {
  width: 100%;
  accent-color: var(--violet2);
  margin: 8px 0 4px
}

.co-salary-display {
  font-size: 13px;
  font-weight: 800;
  color: var(--violet2)
}

.co-tracker-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border)
}

.co-tracker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px
}

.co-tracker-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0
}

.co-tracker-status.applied {
  background: var(--violet2)
}

.co-tracker-status.saved {
  background: #8b5cf6
}

.co-tracker-status.viewed {
  background: #6d28d9
}

/* Middle: Job cards */
.co-main {
  overflow-y: auto;
  border-right: 1px solid var(--border)
}

.co-jobs-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.co-jobs-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted)
}

.co-job-card {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  position: relative
}

.co-job-card:hover,
.co-job-card.co-active-job {
  background: rgba(109, 40, 217, 0.08)
}

.co-job-card.co-active-job {
  border-left: 3px solid var(--violet2)
}

.cj-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px
}

.cj-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  flex-shrink: 0
}

.cj-logo-fallback {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff
}

.cj-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 3px
}

.cj-company {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600
}

.cj-location {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px
}

.cj-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px
}

.cj-tag {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(109, 40, 217, 0.15);
  color: var(--violet2);
  border: 1px solid rgba(109, 40, 217, 0.3)
}

.cj-tag.remote {
  background: rgba(109, 40, 217, 0.12);
  color: #a78bfa;
  border-color: rgba(109, 40, 217, 0.25)
}

.cj-tag.tssci {
  background: rgba(109, 40, 217, 0.12);
  color: #a78bfa;
  border-color: rgba(109, 40, 217, 0.25)
}

.cj-salary {
  font-size: 13px;
  font-weight: 800;
  color: var(--violet2);
  margin-bottom: 8px
}

.cj-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted)
}

.cj-easy-apply {
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer
}

.cj-match {
  font-size: 11px;
  font-weight: 700;
  color: var(--violet2)
}

.cj-save-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  top: 14px;
  right: 14px;
  transition: color 0.2s
}

.cj-save-btn:hover,
.cj-save-btn.saved {
  color: var(--violet2)
}

/* Right: Job Detail panel */
.co-detail {
  overflow-y: auto;
  padding: 20px;
  background: var(--bg)
}

.co-detail-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center
}

.cd-header {
  margin-bottom: 16px
}

.cd-logo-lg {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  margin-bottom: 10px
}

.cd-logo-lg-fb {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 28px;
  color: #fff;
  margin-bottom: 10px
}

.cd-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px
}

.cd-company {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px
}

.cd-meta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px
}

.cd-meta-item {
  font-size: 12px;
  color: var(--muted)
}

.cd-salary {
  font-size: 18px;
  font-weight: 800;
  color: var(--violet2);
  margin-bottom: 12px
}

.cd-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap
}

.cd-apply-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  min-width: 120px
}

.cd-apply-btn.easy {
  background: var(--grad2)
}

.cd-apply-btn:hover {
  opacity: 0.85
}

.cd-save-btn {
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  cursor: pointer
}

.cd-section {
  margin-bottom: 16px
}

.cd-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--violet2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px
}

.cd-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim)
}

.cd-req-list {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.cd-req-list li {
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  gap: 6px;
  align-items: flex-start
}

.cd-req-list li::before {
  content: "✦";
  color: var(--violet2);
  flex-shrink: 0;
  margin-top: 2px
}

.cd-connections {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.cd-conn-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted)
}

.cd-conn-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff
}

/* ============================================================
   ELEVATE — SPHERA's Learning Hub (NOT LinkedIn Learning)
============================================================ */
.el-oreilly-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 20px 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(5, 150, 105, 0.1));
  border: 1px solid rgba(234, 88, 12, 0.4);
  border-radius: 16px;
}

.el-or-img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0
}

.el-or-text {
  flex: 1
}

.el-or-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 3px;
  color: #f97316
}

.el-or-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5
}

.el-or-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0
}

.el-or-open {
  padding: 7px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ea580c, #f59e0b);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap
}

.el-or-disconnect {
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer
}

.el-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  height: calc(100vh - var(--topnav-h) - 96px);
  overflow: hidden;
  margin-top: 12px
}

.el-sidebar {
  border-right: 1px solid var(--border);
  padding: 16px;
  overflow-y: auto;
  background: var(--bg)
}

.el-sb-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border)
}

.el-sb-section:last-child {
  border-bottom: none
}

.el-sb-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px
}

.el-sb-link {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-dim)
}

.el-sb-link:hover,
.el-sb-link.active-esl {
  background: rgba(109, 40, 217, 0.15);
  color: var(--violet2)
}

.el-goal-item {
  margin-bottom: 10px
}

.el-goal-label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between
}

.el-goal-bar {
  height: 5px;
  border-radius: 10px;
  background: var(--border);
  overflow: hidden
}

.el-goal-fill {
  height: 100%;
  border-radius: 10px;
  background: var(--grad2)
}

.el-main {
  overflow-y: auto;
  padding: 0
}

.el-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 16px
}

.el-tab {
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.el-tab.active-eltab,
.el-tab:hover {
  color: var(--violet2);
  border-bottom-color: var(--violet2)
}

.el-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  padding: 16px
}

/* Course card */
.el-course-card {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s
}

.el-course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4)
}

.ec-thumb {
  position: relative;
  height: 130px;
  overflow: hidden
}

.ec-thumb-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px
}

.ec-provider {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px
}

.ec-provider.oreilly {
  background: #ea580c;
  color: #fff
}

.ec-provider.sphera {
  background: var(--grad2);
  color: #fff
}

.ec-provider.live {
  background: #dc2626;
  color: #fff;
  animation: pulse 2s infinite
}

.ec-cert-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  color: #f59e0b
}

.ec-body {
  padding: 12px
}

.ec-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 4px
}

.ec-instructor {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px
}

.ec-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px
}

.ec-progress-bar {
  flex: 1;
  height: 4px;
  border-radius: 10px;
  background: var(--border);
  overflow: hidden
}

.ec-progress-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to right, #6d28d9, #0ea5e9)
}

.ec-progress-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--violet2);
  white-space: nowrap
}

.ec-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  align-items: center
}

.ec-rating {
  color: #f59e0b
}

.ec-duration {
  color: var(--muted)
}

.hidden {
  display: none !important
}

/* ============================================================
   NEXUS — SPHERA's Global Broadcast Platform
   Design: Ocean-depth holographic dark theme. Zero X/Twitter resemblance.
============================================================ */
#pageNexus {
  padding: 0;
  overflow: hidden;
  height: calc(100vh - var(--topnav-h))
}

.nx-shell {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  height: 100%;
  overflow: hidden
}

.nx-leftnav {
  border-right: 1px solid var(--border);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(14, 165, 233, 0.03) 100%);
  scrollbar-width: none
}

.nx-leftnav::-webkit-scrollbar {
  display: none
}

.nx-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 16px;
  margin-bottom: 4px
}

.nx-brand-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.6))
}

.nx-brand-name {
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.nx-brand-tagline {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: -1px
}

.nx-navitem {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 40px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  position: relative
}

.nx-navitem:hover {
  background: rgba(14, 165, 233, 0.08);
  color: var(--text)
}

.nx-navitem.active-nxi {
  color: #0ea5e9;
  font-weight: 800
}

.nx-navitem.active-nxi::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: linear-gradient(#0ea5e9, #6d28d9);
  border-radius: 2px
}

.nx-nav-icon {
  font-size: 18px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.2s
}

.nx-navitem:hover .nx-nav-icon {
  transform: scale(1.15)
}

.nx-nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center
}

.nx-transmit-btn {
  width: calc(100% - 8px);
  margin: 12px 4px 0;
  padding: 14px;
  border-radius: 40px;
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.35);
  transition: all 0.2s;
  letter-spacing: 0.3px
}

.nx-transmit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 32px rgba(14, 165, 233, 0.5)
}

.nx-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(14, 165, 233, 0.05);
  border: 1px solid rgba(14, 165, 233, 0.1);
  margin-top: auto;
  cursor: pointer;
  transition: all 0.2s
}

.nx-user-row:hover {
  background: rgba(14, 165, 233, 0.1)
}

.nx-user-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0
}

.nx-user-info {
  flex: 1;
  overflow: hidden
}

.nx-user-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.nx-user-handle {
  font-size: 11px;
  color: var(--muted)
}

.nx-verified {
  color: #0ea5e9;
  font-size: 11px
}

.nx-pro-badge {
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 800;
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  color: #fff;
  flex-shrink: 0
}

.nx-main {
  overflow-y: auto;
  border-right: 1px solid var(--border);
  scrollbar-width: thin
}

.nx-tab-panel {
  display: none
}

.nx-tab-panel.active-nxp {
  display: block
}

.nx-feed-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0 16px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 10, 20, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border)
}

.nx-feed-tabs {
  display: flex;
  gap: 0;
  flex: 1
}

.nx-ftab {
  padding: 0 20px;
  height: 52px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap
}

.nx-ftab:hover {
  color: var(--text)
}

.nx-ftab.active-nxft {
  color: #0ea5e9;
  border-bottom-color: #0ea5e9
}

.nx-settings-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0
}

.nx-settings-btn:hover {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9
}

.nx-compose-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer
}

.nx-compose-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
  border: 2px solid rgba(14, 165, 233, 0.3)
}

.nx-compose-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  cursor: pointer;
  outline: none
}

.nx-compose-media-btns {
  display: flex;
  gap: 2px
}

.nx-qm-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 6px 8px;
  color: #0ea5e9;
  border-radius: 8px;
  transition: background 0.15s
}

.nx-qm-btn:hover {
  background: rgba(14, 165, 233, 0.1)
}

.nx-qtransmit-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid #0ea5e9;
  background: transparent;
  color: #0ea5e9;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s
}

.nx-qtransmit-btn:hover {
  background: #0ea5e9;
  color: #fff
}

.nx-transmission {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  cursor: pointer;
  position: relative
}

.nx-transmission:hover {
  background: rgba(14, 165, 233, 0.04)
}

.nx-tx-header {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  align-items: flex-start
}

.nx-tx-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25)
}

.nx-tx-meta {
  flex: 1;
  overflow: hidden
}

.nx-tx-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 1px
}

.nx-tx-name {
  font-size: 14px;
  font-weight: 800
}

.nx-tx-handle,
.nx-tx-dot,
.nx-tx-time {
  font-size: 12px;
  color: var(--muted)
}

.nx-tx-more {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-top: -2px
}

.nx-tx-more:hover {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9
}

.nx-amplify-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  padding-left: 52px
}

.nx-tx-body {
  padding-left: 52px
}

.nx-tx-text {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
  color: var(--text)
}

.nx-tx-hashtag {
  color: #0ea5e9;
  font-weight: 600
}

.nx-tx-hashtag:hover {
  text-decoration: underline
}

.nx-tx-media {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--border)
}

.nx-tx-media img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  display: block
}

.nx-tx-poll {
  background: rgba(14, 165, 233, 0.05);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px
}

.nx-poll-option {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(14, 165, 233, 0.3);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  overflow: hidden
}

.nx-poll-option:hover {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.08)
}

.nx-poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(14, 165, 233, 0.15);
  border-radius: 10px;
  transition: width 0.8s ease
}

.nx-poll-option-text,
.nx-poll-pct {
  position: relative;
  z-index: 1
}

.nx-poll-pct {
  float: right;
  font-size: 12px;
  color: #0ea5e9;
  font-weight: 700
}

.nx-poll-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px
}

.nx-tx-quote {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(14, 165, 233, 0.03);
  transition: background 0.2s
}

.nx-tx-quote:hover {
  background: rgba(14, 165, 233, 0.07)
}

.nx-qt-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700
}

.nx-tx-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 4px
}

.nx-tx-action {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 20px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

.nx-tx-action:hover.reply-act {
  color: #0ea5e9;
  background: rgba(14, 165, 233, 0.09)
}

.nx-tx-action:hover.amplify-act {
  color: #10b981;
  background: rgba(16, 185, 129, 0.09)
}

.nx-tx-action:hover.spark-act {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.09)
}

.nx-tx-action:hover.view-act {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.09)
}

.nx-tx-action:hover.share-act,
.nx-tx-action:hover.bookmark-act {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.09)
}

.nx-tx-action.sparked {
  color: #f43f5e
}

.nx-tx-action.amplified {
  color: #10b981
}

.nx-tx-action.bookmarked {
  color: #f59e0b
}

.nx-act-icon {
  font-size: 16px;
  line-height: 1
}

.nx-acted-separator {
  flex: 1
}

.nx-explore-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border)
}

.nx-search-input {
  flex: 1;
  padding: 10px 16px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(14, 165, 233, 0.05);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  outline: none;
  transition: all 0.2s
}

.nx-search-input:focus {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.08)
}

.nx-search-input::placeholder {
  color: var(--muted)
}

.nx-search-btn {
  padding: 10px 16px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s
}

.nx-explore-tabs,
.nx-notif-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none
}

.nx-etab,
.nx-ntab {
  flex-shrink: 0;
  padding: 12px 18px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s
}

.nx-etab:hover,
.nx-ntab:hover {
  color: var(--text)
}

.nx-etab.active-nxet,
.nx-ntab.active-nxnt {
  color: #0ea5e9;
  border-bottom-color: #0ea5e9
}

.nx-trend-card {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s
}

.nx-trend-card:hover {
  background: rgba(14, 165, 233, 0.04)
}

.nx-trend-category {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px
}

.nx-trend-tag {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 3px
}

.nx-trend-count {
  font-size: 12px;
  color: var(--muted)
}

.nx-alert-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s
}

.nx-alert-item:hover {
  background: rgba(14, 165, 233, 0.04)
}

.nx-alert-item.unread {
  background: rgba(14, 165, 233, 0.06)
}

.nx-alert-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff
}

.nx-alert-icon {
  font-size: 20px;
  flex-shrink: 0;
  padding-top: 2px
}

.nx-alert-content {
  flex: 1;
  min-width: 0
}

.nx-alert-text {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 3px
}

.nx-alert-text strong {
  color: var(--text);
  font-weight: 700
}

.nx-alert-time {
  font-size: 11px;
  color: var(--muted)
}

.nx-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0ea5e9;
  flex-shrink: 0;
  margin-top: 6px
}

.nx-channel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s
}

.nx-channel-item:hover {
  background: rgba(14, 165, 233, 0.04)
}

.nx-channel-av {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px
}

.nx-channel-info {
  flex: 1;
  overflow: hidden
}

.nx-channel-name {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 3px
}

.nx-channel-preview {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.nx-channel-meta {
  text-align: right;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted)
}

.nx-spaces-hero {
  text-align: center;
  padding: 40px 20px 20px;
  background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.08), transparent 70%)
}

.nx-spaces-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.nx-spaces-sub {
  font-size: 14px;
  color: var(--muted)
}

.nx-space-card {
  padding: 16px;
  margin: 12px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(109, 40, 217, 0.1));
  border: 1px solid rgba(14, 165, 233, 0.2);
  transition: all 0.2s;
  cursor: pointer
}

.nx-space-card:hover {
  border-color: #0ea5e9;
  transform: translateY(-2px)
}

.nx-space-live-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px
}

.nx-space-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: livePulse 1s infinite
}

.nx-space-live-label {
  font-size: 11px;
  font-weight: 800;
  color: #ef4444;
  text-transform: uppercase
}

.nx-space-viewers {
  font-size: 11px;
  color: var(--muted)
}

.nx-space-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px
}

.nx-space-hosts {
  display: flex;
  margin-bottom: 8px
}

.nx-space-host-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: #fff
}

.nx-space-join-btn {
  padding: 7px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.nx-space-join-btn:hover {
  opacity: 0.85
}

.nx-community-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s
}

.nx-community-card:hover {
  background: rgba(14, 165, 233, 0.04)
}

.nx-comm-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px
}

.nx-comm-info {
  flex: 1;
  overflow: hidden
}

.nx-comm-name {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 3px
}

.nx-comm-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px
}

.nx-comm-join {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid #0ea5e9;
  background: transparent;
  color: #0ea5e9;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s
}

.nx-comm-join:hover {
  background: #0ea5e9;
  color: #fff
}

.nx-profile-cover {
  height: 160px;
  position: relative
}

.nx-profile-header {
  display: flex;
  align-items: flex-end;
  padding: 0 16px 14px;
  margin-top: -48px;
  gap: 12px
}

.nx-profile-av-wrap {
  position: relative;
  flex-shrink: 0
}

.nx-profile-av {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 36px;
  color: #fff;
  border: 4px solid var(--bg);
  position: relative;
  z-index: 2
}

.nx-profile-av-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #6d28d9);
  z-index: 1;
  animation: orbPulse 3s infinite;
  opacity: 0.5
}

.nx-pro-full-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 800;
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  color: #fff;
  z-index: 3;
  border: 2px solid var(--bg)
}

.nx-profile-info {
  padding: 0 16px 14px
}

.nx-profile-name {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 2px
}

.nx-profile-handle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px
}

.nx-profile-bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 8px
}

.nx-profile-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px
}

.nx-profile-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-dim);
  flex-wrap: wrap
}

.nx-profile-stats strong {
  color: var(--text);
  font-weight: 800
}

.nx-profile-tabs-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none
}

.nx-profile-tab {
  flex: 1;
  padding: 12px 8px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap
}

.nx-profile-tab:hover {
  color: var(--text)
}

.nx-profile-tab.active-nxpt {
  color: #0ea5e9;
  border-bottom-color: #0ea5e9
}

.nx-pill-btn {
  padding: 8px 18px;
  border-radius: 20px;
  background: transparent;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.nx-pill-btn:hover {
  background: rgba(14, 165, 233, 0.08);
  color: #0ea5e9
}

.nx-rightsidebar {
  padding: 12px;
  overflow-y: auto;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: none
}

.nx-rightsidebar::-webkit-scrollbar {
  display: none
}

.nx-rs-search {
  position: relative;
  display: flex;
  align-items: center
}

.nx-rs-search .nx-search-input {
  padding-left: 40px
}

.nx-rs-search-icon {
  position: absolute;
  left: 14px;
  color: var(--muted);
  font-size: 16px;
  pointer-events: none
}

.nx-rs-card {
  background: rgba(14, 165, 233, 0.04);
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 18px;
  padding: 16px
}

.nx-rs-card-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 12px
}

.nx-rs-show-more {
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: #0ea5e9;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
  text-align: center
}

.nx-rs-show-more:hover {
  background: rgba(14, 165, 233, 0.08)
}

.nx-rs-trend {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s
}

.nx-rs-trend:last-child {
  border-bottom: none
}

.nx-rs-trend:hover .nx-rs-ttag {
  color: #0ea5e9
}

.nx-rs-tcat {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px
}

.nx-rs-ttag {
  font-size: 14px;
  font-weight: 800;
  margin: 2px 0;
  transition: color 0.15s
}

.nx-rs-tcount {
  font-size: 11px;
  color: var(--muted)
}

.nx-wtf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border)
}

.nx-wtf-item:last-child {
  border-bottom: none
}

.nx-wtf-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff
}

.nx-wtf-info {
  flex: 1;
  overflow: hidden
}

.nx-wtf-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.nx-wtf-handle {
  font-size: 11px;
  color: var(--muted)
}

.nx-wtf-follow {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #0ea5e9;
  background: transparent;
  color: #0ea5e9;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s
}

.nx-wtf-follow:hover {
  background: #0ea5e9;
  color: #fff
}

.nx-wtf-follow.following {
  background: rgba(14, 165, 233, 0.1)
}

.nx-rs-pro-card {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(109, 40, 217, 0.12));
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 18px;
  padding: 20px;
  text-align: center
}

.nx-pro-icon {
  font-size: 28px;
  margin-bottom: 8px;
  color: #f59e0b;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.6)
}

.nx-pro-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px
}

.nx-pro-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px
}

.nx-pro-btn {
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
  transition: all 0.2s
}

.nx-pro-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.4)
}

.nx-rs-footer {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
  padding: 4px 0
}

.nx-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 300;
  padding-top: 5vh;
  animation: fadeIn 0.15s ease
}

.nx-modal-overlay.hidden {
  display: none
}

.nx-modal-card {
  background: var(--bg3);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 22px;
  padding: 16px;
  width: 600px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8), 0 0 60px rgba(14, 165, 233, 0.1);
  animation: slideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.nx-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border)
}

.nx-modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s;
  margin-left: auto
}

.nx-modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444
}

.nx-modal-textarea {
  width: 100%;
  min-height: 120px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  outline: none;
  resize: none
}

.nx-modal-textarea::placeholder {
  color: var(--muted)
}

.nx-audience-sel {
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 20px;
  color: #0ea5e9;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer
}

.nx-modal-poll {
  background: rgba(14, 165, 233, 0.05);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px
}

.nx-poll-title {
  font-size: 13px;
  font-weight: 700;
  color: #0ea5e9;
  margin-bottom: 8px
}

.nx-poll-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  margin-bottom: 6px;
  outline: none
}

.nx-poll-input:focus {
  border-color: #0ea5e9
}

.nx-poll-duration {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px
}

.nx-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 8px;
  gap: 12px
}

.nx-toolbar-actions {
  display: flex;
  gap: 2px
}

.nx-toolbar-btn {
  background: transparent;
  border: none;
  font-size: 17px;
  cursor: pointer;
  padding: 7px 9px;
  color: #0ea5e9;
  border-radius: 10px;
  transition: background 0.15s
}

.nx-toolbar-btn:hover {
  background: rgba(14, 165, 233, 0.1)
}

.nx-char-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center
}

.nx-char-ring {
  width: 36px;
  height: 36px
}

.nx-char-count {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted)
}





/* ============================================================
   BAZAAR — SPHERA Social Commerce Platform
   Features: eBay auctions · Temu flash deals · TikTok Shop · Amazon Prime
============================================================ */
#pageMarketplace {
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  height: calc(100vh - var(--topnav-h))
}

#pageMarketplace.active-page {
  display: flex
}

/* Topbar */
.mkp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  gap: 12px;
  flex-shrink: 0
}

.mkp-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1
}

.mkp-logo {
  font-size: 20px;
  font-weight: 900;
  white-space: nowrap;
  color: #c9a84c;
  flex-shrink: 0
}

.mkp-logo span {
  color: #c9a84c
}

.mkp-search-wrap {
  display: flex;
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: border-color 0.2s
}

.mkp-search-wrap:focus-within {
  border-color: #c9a84c
}

.mkp-cat-select {
  padding: 0 10px;
  background: rgba(201, 168, 76, 0.08);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  white-space: nowrap
}

.mkp-search-input {
  flex: 1;
  padding: 9px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  outline: none
}

.mkp-search-input::placeholder {
  color: var(--muted)
}

.mkp-search-btn {
  padding: 9px 18px;
  background: #c9a84c;
  border: none;
  color: #0a0a0f;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s
}

.mkp-search-btn:hover {
  opacity: 0.88
}

.mkp-topbar-right {
  display: flex;
  gap: 8px;
  flex-shrink: 0
}

.mkp-my-orbit-btn {
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(201, 168, 76, 0.08);
  border: 1.5px solid rgba(201, 168, 76, 0.3);
  color: #c9a84c;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-my-orbit-btn:hover {
  background: rgba(201, 168, 76, 0.15)
}

.mkp-sell-btn {
  padding: 8px 18px;
  border-radius: 8px;
  background: #c9a84c;
  border: none;
  color: #0a0a0f;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 16px rgba(201, 168, 76, 0.25);
  transition: all 0.2s
}

.mkp-sell-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(201, 168, 76, 0.35)
}

/* Daily Deals Banner */
.mkp-deals-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(201, 168, 76, 0.05);
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  flex-shrink: 0;
  overflow: hidden
}

.mkp-deals-label {
  font-size: 12px;
  font-weight: 900;
  color: #c9a84c;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px
}

.mkp-deals-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
  padding: 2px 0
}

.mkp-deals-scroll::-webkit-scrollbar {
  display: none
}

.mkp-deal-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0
}

.mkp-deal-pill:hover {
  border-color: #c9a84c;
  background: rgba(201, 168, 76, 0.06)
}

.mkp-deal-pill-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px
}

.mkp-deal-pill-info {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.mkp-deal-pill-name {
  font-size: 11px;
  font-weight: 700
}

.mkp-deal-pill-price {
  font-size: 12px;
  color: #c9a84c;
  font-weight: 800
}

.mkp-deal-pill-off {
  font-size: 10px;
  color: var(--muted);
  text-decoration: line-through
}

.mkp-deals-timer {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0
}

.mkp-deals-clock {
  color: #c9a84c;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}

/* Shell: sidebar + content */
.mkp-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  flex: 1;
  overflow: hidden
}

.mkp-sidebar {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px 0;
  scrollbar-width: thin;
  background: var(--bg2)
}

.mkp-sb-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border)
}

.mkp-sb-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin-bottom: 8px
}

.mkp-check-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-dim);
  padding: 3px 0;
  cursor: pointer;
  transition: color 0.15s
}

.mkp-check-row:hover {
  color: var(--text)
}

.mkp-check-row input[type=checkbox] {
  accent-color: #c9a84c;
  width: 14px;
  height: 14px;
  cursor: pointer
}

.mkp-cat-tree {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.mkp-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s
}

.mkp-cat-row:hover {
  background: rgba(201, 168, 76, 0.08);
  color: #c9a84c
}

.mkp-cat-row.active-cat {
  background: rgba(201, 168, 76, 0.1);
  color: #c9a84c;
  font-weight: 700
}

.mkp-cat-count {
  font-size: 11px;
  color: var(--muted)
}

.mkp-price-range {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px
}

.mkp-price-input {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  outline: none;
  width: 0
}

.mkp-price-input:focus {
  border-color: #c9a84c
}

.mkp-apply-price {
  width: 100%;
  padding: 7px;
  border-radius: 6px;
  background: #c9a84c;
  border: none;
  color: #0a0a0f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s
}

.mkp-apply-price:hover {
  opacity: 0.88
}

.mkp-loc-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  outline: none;
  box-sizing: border-box
}

.mkp-loc-input:focus {
  border-color: #c9a84c
}

/* Main content area */
.mkp-content {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0
}

.mkp-results-bar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg2);
  position: sticky;
  top: 0;
  z-index: 5
}

.mkp-result-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text)
}

.mkp-sort-select {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer
}

.mkp-view-btns {
  display: flex;
  gap: 2px
}

.mkp-view-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s
}

.mkp-view-btn:hover {
  color: var(--text);
  border-color: #c9a84c
}

.mkp-view-btn.active-mkpv {
  background: rgba(201, 168, 76, 0.1);
  color: #c9a84c;
  border-color: #c9a84c
}

.mkp-section-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
  padding: 8px 16px 0
}

.mkp-recently-viewed {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border)
}

.mkp-rv-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px
}

.mkp-rv-list::-webkit-scrollbar {
  display: none
}

.mkp-rv-item {
  flex-shrink: 0;
  width: 70px;
  cursor: pointer;
  text-align: center
}

.mkp-rv-img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 1px solid var(--border);
  transition: border-color 0.2s
}

.mkp-rv-item:hover .mkp-rv-img {
  border-color: #c9a84c
}

.mkp-rv-price {
  font-size: 11px;
  font-weight: 700;
  color: #c9a84c;
  margin-top: 3px
}

/* Item Grid */
.mkp-item-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px
}

.mkp-item-grid.list-view {
  grid-template-columns: 1fr
}

/* Item Card */
.mkp-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: flex;
  flex-direction: column
}

.mkp-card:hover {
  border-color: #c9a84c;
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.12)
}

.mkp-card.list-card {
  flex-direction: row;
  border-radius: 10px
}

.mkp-card-img-wrap {
  position: relative;
  overflow: hidden
}

.mkp-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  transition: transform 0.3s
}

.mkp-card:hover .mkp-card-img {
  transform: scale(1.04)
}

.mkp-card.list-card .mkp-card-img {
  width: 160px;
  height: 140px;
  aspect-ratio: unset;
  flex-shrink: 0
}

/* Badges overlay */
.mkp-card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.mkp-badge {
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  color: #0a0a0f;
  background: #c9a84c
}

.mkp-badge.auction,
.mkp-badge.buynow,
.mkp-badge.offer,
.mkp-badge.deal,
.mkp-badge.tiktok,
.mkp-badge.prime,
.mkp-badge.hot,
.mkp-badge.free-ship,
.mkp-badge.new {
  background: #c9a84c;
  color: #0a0a0f
}

@keyframes flashBadge {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0.7
  }
}

.mkp-watchlist-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  backdrop-filter: blur(4px)
}

.mkp-watchlist-btn:hover {
  background: rgba(201, 168, 76, 0.2);
  transform: scale(1.1)
}

.mkp-watchlist-btn.watching {
  color: #c9a84c
}

/* Countdown bar */
.mkp-countdown-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.1)
}

.mkp-countdown-fill {
  height: 100%;
  background: #c9a84c;
  transition: width 1s linear
}

/* Card body */
.mkp-card-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.mkp-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.mkp-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted)
}

.mkp-cond-tag {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(201, 168, 76, 0.1);
  color: #c9a84c
}

.mkp-cond-tag.New,
.mkp-cond-tag.LikeNew,
.mkp-cond-tag.Good,
.mkp-cond-tag.Excellent,
.mkp-cond-tag.Acceptable,
.mkp-cond-tag.ForParts {
  background: rgba(201, 168, 76, 0.08);
  color: #c9a84c
}

/* Price area */
.mkp-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px
}

.mkp-card-price {
  font-size: 18px;
  font-weight: 900;
  color: #c9a84c
}

.mkp-card-was {
  font-size: 12px;
  color: var(--muted);
  text-decoration: line-through
}

.mkp-card-off {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted)
}

/* Auction row */
.mkp-auction-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 2px
}

.mkp-bids {
  color: var(--muted)
}

.mkp-time-left {
  color: #c9a84c;
  font-weight: 700;
  font-variant-numeric: tabular-nums
}

/* Seller row */
.mkp-seller-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px
}

.mkp-seller-badge {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  background: rgba(201, 168, 76, 0.1);
  color: #c9a84c
}

.mkp-seller-badge.top-rated,
.mkp-seller-badge.power {
  background: rgba(201, 168, 76, 0.1);
  color: #c9a84c
}

.mkp-stars {
  color: #c9a84c;
  font-size: 11px
}

/* Reviews */
.mkp-review-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted)
}

/* Action buttons */
.mkp-card-actions {
  display: flex;
  gap: 6px;
  padding: 8px 12px 12px
}

.mkp-btn-bidn,
.mkp-btn-buy,
.mkp-btn-offer {
  flex: 1;
  padding: 7px 0;
  border-radius: 8px;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-btn-bidn {
  background: #c9a84c;
  color: #0a0a0f
}

.mkp-btn-bidn:hover {
  opacity: 0.88
}

.mkp-btn-buy {
  background: #c9a84c;
  color: #0a0a0f
}

.mkp-btn-buy:hover {
  opacity: 0.88
}

.mkp-btn-offer {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text)
}

.mkp-btn-offer:hover {
  border-color: #c9a84c;
  color: #c9a84c
}

/* TikTok video play overlay */
.mkp-tiktok-play {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  pointer-events: none
}

/* Shipping row */
.mkp-ship-row {
  font-size: 11px;
  color: #c9a84c;
  font-weight: 600
}

/* Prime badge inline */
.mkp-prime-inline {
  font-size: 11px;
  font-weight: 800;
  color: #c9a84c
}

/* Watching count */
.mkp-watching {
  font-size: 11px;
  color: var(--muted)
}

/* Load more */
.mkp-load-more-wrap {
  padding: 20px;
  text-align: center
}

.mkp-load-more-btn {
  padding: 10px 32px;
  border-radius: 24px;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-load-more-btn:hover {
  border-color: #c9a84c;
  color: #c9a84c
}

/* ── ITEM DETAIL MODAL ── */
.mkp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(16px);
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  animation: fadeIn 0.15s ease
}

.mkp-modal-overlay.hidden {
  display: none
}

.mkp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 2
}

.mkp-modal-close:hover {
  background: rgba(239, 68, 68, 0.3)
}

.mkp-item-modal {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 900px;
  max-width: 100%;
  position: relative;
  animation: slideUp 0.3s ease;
  overflow: hidden
}

.mkp-item-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0
}

/* Left: Images */
.mkp-item-images {
  border-right: 1px solid var(--border)
}

.mkp-main-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px
}

.mkp-thumbs {
  display: flex;
  gap: 6px;
  padding: 10px;
  overflow-x: auto;
  border-top: 1px solid var(--border);
  scrollbar-width: none
}

.mkp-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: border-color 0.15s;
  flex-shrink: 0
}

.mkp-thumb:hover,
.mkp-thumb.active-thumb {
  border-color: #f59e0b
}

/* Right: Details */
.mkp-item-details {
  padding: 20px;
  overflow-y: auto;
  max-height: 80vh
}

.mkp-item-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px
}

.mkp-item-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 6px
}

.mkp-item-condition {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px
}

.mkp-item-reviews {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px
}

.mkp-item-reviews .mkp-stars {
  font-size: 14px
}

.mkp-item-rev-count {
  color: #c9a84c;
  cursor: pointer;
  font-weight: 700
}

.mkp-item-rev-count:hover {
  text-decoration: underline
}

/* Price block */
.mkp-item-price-block {
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px
}

.mkp-item-price {
  font-size: 28px;
  font-weight: 900;
  color: #c9a84c;
  margin-bottom: 2px
}

.mkp-item-price-was {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through
}

.mkp-item-price-save {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700
}

/* Bid block */
.mkp-bid-block {
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px
}

.mkp-bid-current {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px
}

.mkp-bid-amount {
  font-size: 26px;
  font-weight: 900;
  color: #c9a84c;
  margin-bottom: 4px
}

.mkp-bid-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px
}

.mkp-bid-input-row {
  display: flex;
  gap: 8px
}

.mkp-bid-input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(201, 168, 76, 0.3);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  outline: none
}

.mkp-bid-input:focus {
  border-color: #c9a84c
}

.mkp-place-bid-btn {
  padding: 9px 18px;
  border-radius: 8px;
  background: #c9a84c;
  border: none;
  color: #0a0a0f;
  font-weight: 800;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: all 0.2s
}

.mkp-place-bid-btn:hover {
  opacity: 0.88
}

.mkp-bid-history-toggle {
  font-size: 12px;
  color: #c9a84c;
  cursor: pointer;
  margin-top: 6px;
  display: inline-block
}

.mkp-bid-history-toggle:hover {
  text-decoration: underline
}

.mkp-bid-history {
  margin-top: 8px;
  display: none
}

.mkp-bid-history.show {
  display: block
}

.mkp-bid-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border)
}

/* CTA Buttons */
.mkp-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px
}

.mkp-detail-buy-btn {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  background: #c9a84c;
  border: none;
  color: #0a0a0f;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-detail-buy-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px)
}

.mkp-detail-offer-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-detail-offer-btn:hover {
  border-color: #c9a84c;
  color: #c9a84c
}

.mkp-detail-cart-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: rgba(201, 168, 76, 0.08);
  border: 1.5px solid rgba(201, 168, 76, 0.25);
  color: #c9a84c;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-detail-cart-btn:hover {
  background: rgba(201, 168, 76, 0.15)
}

/* Protection row */
.mkp-protection {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #c9a84c;
  padding: 8px;
  background: rgba(201, 168, 76, 0.05);
  border-radius: 8px;
  margin-bottom: 12px
}

/* Seller card */
.mkp-seller-card {
  background: rgba(201, 168, 76, 0.04);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px
}

.mkp-seller-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px
}

.mkp-seller-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px
}

.mkp-seller-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff
}

.mkp-seller-name {
  font-size: 14px;
  font-weight: 800
}

.mkp-seller-score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px
}

.mkp-seller-pct {
  color: #c9a84c;
  font-weight: 700
}

.mkp-seller-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px
}

.mkp-seller-tag {
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(201, 168, 76, 0.1);
  color: #c9a84c
}

.mkp-seller-tag.tr,
.mkp-seller-tag.ps,
.mkp-seller-tag.fast {
  background: rgba(201, 168, 76, 0.1);
  color: #c9a84c
}

.mkp-contact-seller {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-contact-seller:hover {
  border-color: #c9a84c;
  color: #c9a84c
}

/* Shipping + Returns */
.mkp-shipping-card {
  background: rgba(201, 168, 76, 0.04);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.8
}

.mkp-ship-row-detail {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  padding: 5px 0
}

.mkp-ship-row-detail:last-child {
  border-bottom: none
}

/* Desc + Q&A + Reviews tabs */
.mkp-detail-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px
}

.mkp-detail-tab {
  flex: 1;
  padding: 9px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-detail-tab:hover {
  color: var(--text)
}

.mkp-detail-tab.active-dt {
  color: #c9a84c;
  border-bottom-color: #c9a84c
}

.mkp-detail-tab-panel {
  display: none;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim)
}

.mkp-detail-tab-panel.active-dtp {
  display: block
}

/* Reviews list */
.mkp-review-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border)
}

.mkp-review-item:last-child {
  border-bottom: none
}

.mkp-review-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px
}

.mkp-review-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0
}

.mkp-review-name {
  font-size: 12px;
  font-weight: 700
}

.mkp-review-date {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto
}

.mkp-review-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim)
}

.mkp-review-helpful {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px
}

.mkp-review-helpful span {
  color: #c9a84c;
  cursor: pointer
}

/* Q&A */
.mkp-qa-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border)
}

.mkp-qa-q {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px
}

.mkp-qa-a {
  font-size: 12px;
  color: var(--text-dim)
}

.mkp-qa-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px
}

.mkp-ask-btn {
  padding: 8px 16px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.2s
}

.mkp-ask-btn:hover {
  border-color: #c9a84c;
  color: #c9a84c
}

/* Related items */
.mkp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px
}

.mkp-related-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 11px
}

.mkp-related-item:hover {
  border-color: #c9a84c
}

.mkp-related-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 5px
}

.mkp-related-price {
  font-weight: 800;
  color: #c9a84c
}

/* Offer modal (inside detail modal) */
.mkp-offer-form {
  background: rgba(201, 168, 76, 0.05);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  display: none
}

.mkp-offer-form.show {
  display: block
}

.mkp-offer-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--muted)
}

.mkp-offer-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(201, 168, 76, 0.25);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 8px
}

.mkp-offer-input:focus {
  border-color: #c9a84c
}

.mkp-submit-offer-btn {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: #c9a84c;
  border: none;
  color: #0a0a0f;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-submit-offer-btn:hover {
  opacity: 0.88
}

/* ── SELL MODAL ── */
.mkp-sell-modal {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 640px;
  max-width: 95vw;
  position: relative;
  overflow: hidden;
  animation: slideUp 0.3s ease
}

.mkp-sell-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px
}

.mkp-sell-title {
  font-size: 18px;
  font-weight: 900;
  color: #c9a84c
}

.mkp-sell-steps {
  display: flex;
  gap: 0
}

.mkp-step {
  flex: 1;
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  cursor: pointer
}

.mkp-step.active-step {
  color: #c9a84c;
  border-bottom-color: #c9a84c
}

.mkp-step.done-step {
  color: var(--muted);
  border-bottom-color: var(--border)
}

#mkpSellBody {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto
}

.mkp-sell-step-panel {
  display: none
}

.mkp-sell-step-panel.active-sell-step {
  display: block
}

.mkp-sell-section-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px
}

.mkp-sell-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 5px;
  margin-top: 12px
}

.mkp-sell-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s
}

.mkp-sell-input:focus {
  border-color: #c9a84c
}

.mkp-sell-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  outline: none;
  resize: vertical;
  box-sizing: border-box
}

.mkp-sell-textarea:focus {
  border-color: #c9a84c
}

.mkp-sell-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px
}

.mkp-sell-cat-btn {
  padding: 12px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  color: var(--text)
}

.mkp-sell-cat-btn:hover {
  border-color: #c9a84c;
  color: #c9a84c;
  background: rgba(201, 168, 76, 0.05)
}

.mkp-sell-cat-btn.active-scat {
  border-color: #c9a84c;
  background: rgba(201, 168, 76, 0.08);
  color: #c9a84c;
  font-weight: 800
}

.mkp-condition-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px
}

.mkp-cond-pill {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-cond-pill:hover {
  border-color: #c9a84c;
  color: #c9a84c
}

.mkp-cond-pill.active-cond {
  background: rgba(201, 168, 76, 0.08);
  border-color: #c9a84c;
  color: #c9a84c
}

.mkp-listing-type-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 14px
}

.mkp-lt-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-lt-btn:hover {
  border-color: #c9a84c;
  color: #c9a84c
}

.mkp-lt-btn.active-lt {
  background: rgba(201, 168, 76, 0.08);
  border-color: #c9a84c;
  color: #c9a84c
}

.mkp-sell-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between
}

.mkp-sell-back-btn {
  padding: 10px 20px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s
}

.mkp-sell-back-btn:hover {
  border-color: #c9a84c
}

.mkp-sell-next-btn {
  padding: 10px 28px;
  border-radius: 8px;
  background: #c9a84c;
  border: none;
  color: #0a0a0f;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-sell-next-btn:hover {
  opacity: 0.88
}

.mkp-review-card {
  background: rgba(201, 168, 76, 0.05);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 2
}

.mkp-fees-card {
  background: var(--bg2);
  border-radius: 10px;
  padding: 12px;
  font-size: 13px
}

.mkp-fees-title {
  font-weight: 800;
  margin-bottom: 8px
}

.mkp-fee-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px
}

.mkp-fee-row:last-child {
  border-bottom: none
}

.mkp-fee-val {
  color: #c9a84c;
  font-weight: 700
}

/* ── MY ORBIT MODAL ── */
.mkp-my-orbit-modal {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 700px;
  max-width: 95vw;
  position: relative;
  animation: slideUp 0.3s ease;
  overflow: hidden
}

.mkp-orbit-title {
  font-size: 20px;
  font-weight: 900;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  color: #c9a84c
}

.mkp-orbit-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border)
}

.mkp-orbit-tabs::-webkit-scrollbar {
  display: none
}

.mkp-otab {
  flex-shrink: 0;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap
}

.mkp-otab:hover {
  color: var(--text)
}

.mkp-otab.active-otab {
  color: #c9a84c;
  border-bottom-color: #c9a84c
}

.mkp-orbit-content {
  padding: 16px;
  min-height: 300px;
  max-height: 60vh;
  overflow-y: auto
}

/* Orbit item rows */
.mkp-orbit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s
}

.mkp-orbit-item:hover {
  border-color: #c9a84c;
  background: rgba(201, 168, 76, 0.04)
}

.mkp-orbit-item-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0
}

.mkp-orbit-item-info {
  flex: 1;
  overflow: hidden
}

.mkp-orbit-item-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mkp-orbit-item-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px
}

.mkp-orbit-item-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(201, 168, 76, 0.1);
  color: #c9a84c
}

.mkp-orbit-item-status.active,
.mkp-orbit-item-status.won,
.mkp-orbit-item-status.outbid,
.mkp-orbit-item-status.delivered,
.mkp-orbit-item-status.watching {
  background: rgba(201, 168, 76, 0.1);
  color: #c9a84c
}

.mkp-orbit-item-price {
  font-size: 14px;
  font-weight: 900;
  color: #c9a84c;
  flex-shrink: 0
}

/* Feedback list */
.mkp-feedback-item {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px
}

.mkp-feedback-item.positive {
  border-left: 3px solid #c9a84c
}

.mkp-feedback-item.negative {
  border-left: 3px solid rgba(255, 255, 255, 0.15)
}

.mkp-feedback-item.neutral {
  border-left: 3px solid rgba(255, 255, 255, 0.08)
}

.mkp-feedback-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px
}

.mkp-fb-col {
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border)
}

.mkp-fb-num {
  font-size: 24px;
  font-weight: 900
}

.mkp-fb-label {
  font-size: 11px;
  color: var(--muted)
}

.mkp-fb-positive .mkp-fb-num {
  color: #c9a84c
}

.mkp-fb-negative .mkp-fb-num {
  color: var(--muted)
}

.mkp-fb-neutral .mkp-fb-num {
  color: var(--muted)
}

/* Temu spin wheel teaser */
.mkp-spin-banner {
  background: rgba(201, 168, 76, 0.05);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-spin-banner:hover {
  border-color: #c9a84c
}

.mkp-spin-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 4px
}

.mkp-spin-sub {
  font-size: 12px;
  color: var(--muted)
}

/* Live Shop banner */
.mkp-live-shop-banner {
  background: rgba(201, 168, 76, 0.04);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.2s
}

.mkp-live-shop-banner:hover {
  border-color: #c9a84c
}

.mkp-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9a84c;
  animation: livePulse 1s infinite;
  flex-shrink: 0
}

.mkp-live-shop-text {
  flex: 1
}

.mkp-live-shop-title {
  font-size: 15px;
  font-weight: 800
}

.mkp-live-shop-sub {
  font-size: 12px;
  color: var(--muted)
}

.mkp-live-join-btn {
  padding: 8px 16px;
  border-radius: 20px;
  background: #c9a84c;
  border: none;
  color: #0a0a0f;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0
}

/* ============================================================
   ORBIT TRACKER — CareerOrbit Application Hub
============================================================ */
.ot-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  z-index: 498;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease
}

.ot-overlay.ot-open {
  opacity: 1;
  pointer-events: all
}

.ot-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 620px;
  max-width: 100vw;
  background: var(--bg3);
  border-left: 1px solid var(--border);
  z-index: 499;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1)
}

.ot-panel.ot-open {
  transform: translateX(0)
}

/* Header */
.ot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0
}

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

.ot-logo {
  font-size: 16px;
  font-weight: 900;
  color: var(--violet2)
}

.ot-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(109, 40, 217, 0.2);
  color: var(--violet2);
  border: 1px solid rgba(109, 40, 217, 0.3)
}

.ot-header-actions {
  display: flex;
  align-items: center;
  gap: 8px
}

.ot-export-btn {
  padding: 5px 12px;
  border-radius: 7px;
  background: rgba(109, 40, 217, 0.1);
  border: 1px solid rgba(109, 40, 217, 0.25);
  color: var(--violet2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.ot-export-btn:hover {
  background: rgba(109, 40, 217, 0.2)
}

.ot-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s
}

.ot-close:hover {
  color: var(--text)
}

/* Stats bar */
.ot-stats-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0
}

.ot-stat {
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background 0.15s
}

.ot-stat:last-child {
  border-right: none
}

.ot-stat:hover {
  background: rgba(255, 255, 255, 0.04)
}

.ot-stat-num {
  font-size: 22px;
  font-weight: 900;
  line-height: 1
}

.ot-stat-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-top: 4px
}

.ot-stat-total .ot-stat-num {
  color: var(--text)
}

.ot-stat-active .ot-stat-num {
  color: var(--violet2)
}

.ot-stat-shortlisted .ot-stat-num {
  color: #60a5fa
}

.ot-stat-interview .ot-stat-num {
  color: #f59e0b
}

.ot-stat-offer .ot-stat-num {
  color: #34d399
}

.ot-stat-rejected .ot-stat-num {
  color: var(--muted)
}

/* Pipeline bar */
.ot-pipeline-bar {
  height: 4px;
  background: var(--border);
  display: flex;
  flex-shrink: 0;
  overflow: hidden
}

.ot-pipe-seg {
  height: 100%;
  transition: width 0.4s ease
}

.ot-pipe-applied {
  background: var(--violet2)
}

.ot-pipe-shortlisted {
  background: #60a5fa
}

.ot-pipe-interview {
  background: #f59e0b
}

.ot-pipe-offer {
  background: #34d399
}

.ot-pipe-rejected {
  background: rgba(255, 255, 255, 0.15)
}

/* Filter row */
.ot-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg2)
}

.ot-filter-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none
}

.ot-filter-tabs::-webkit-scrollbar {
  display: none
}

.ot-ftab {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s
}

.ot-ftab:hover {
  color: var(--text)
}

.ot-ftab.active-oft {
  background: rgba(109, 40, 217, 0.15);
  border-color: rgba(109, 40, 217, 0.4);
  color: var(--violet2)
}

.ot-search {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  outline: none;
  width: 160px;
  flex-shrink: 0;
  transition: border-color 0.2s
}

.ot-search:focus {
  border-color: var(--violet2)
}

/* Application list */
.ot-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin
}

/* Application card */
.ot-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: default;
  transition: border-color 0.15s;
  animation: fadeIn 0.2s ease
}

.ot-card:hover {
  border-color: rgba(109, 40, 217, 0.3)
}

.ot-card-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.45), rgba(109, 40, 217, 0.18));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0
}

.ot-card-body {
  flex: 1;
  min-width: 0
}

.ot-card-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap
}

.ot-card-title {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px
}

.ot-status-chip {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0
}

.ot-chip-applied {
  background: rgba(109, 40, 217, 0.15);
  color: var(--violet2);
  border: 1px solid rgba(109, 40, 217, 0.25)
}

.ot-chip-shortlisted {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.25)
}

.ot-chip-interview {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25)
}

.ot-chip-offer {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.25)
}

.ot-chip-rejected {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border: 1px solid var(--border)
}

.ot-chip-withdrawn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border: 1px solid var(--border)
}

.ot-card-row2 {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.ot-card-salary {
  font-size: 12px;
  font-weight: 700;
  color: var(--violet2)
}

.ot-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.ot-refid {
  font-size: 10px;
  font-family: monospace;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px
}

.ot-card-date {
  font-size: 10px;
  color: var(--muted)
}

.ot-card-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

/* Card actions */
.ot-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0
}

.ot-action-select {
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s
}

.ot-action-select:focus {
  border-color: var(--violet2)
}

.ot-del-btn {
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s
}

.ot-del-btn:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444
}

.ot-followup-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted)
}

.ot-followup-input {
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
  outline: none;
  transition: border-color 0.2s
}

.ot-followup-input:focus {
  border-color: var(--violet2)
}

/* Empty state */
.ot-empty {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px
}

.ot-empty-icon {
  font-size: 52px
}

.ot-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text)
}

.ot-empty-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5
}

/* Footer */
.ot-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.ot-add-btn {
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(109, 40, 217, 0.12);
  border: 1px solid rgba(109, 40, 217, 0.3);
  color: var(--violet2);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s
}

.ot-add-btn:hover {
  background: rgba(109, 40, 217, 0.2)
}

.ot-footer-tip {
  font-size: 10px;
  color: var(--muted);
  text-align: right
}

/* Add manual modal */
.ot-add-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(14px);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s
}

.ot-add-overlay.ot-add-open {
  opacity: 1;
  pointer-events: all
}

.ot-add-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 440px;
  max-width: 95vw;
  animation: slideUp 0.3s ease;
  overflow: hidden
}

.ot-add-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2)
}

.ot-add-body {
  padding: 18px;
  max-height: 60vh;
  overflow-y: auto
}

.ot-add-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg2)
}

/* ============================================================
   QUICK LAUNCH — CareerOrbit Instant Apply
============================================================ */

/* Overlay */
.ql-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease
}

.ql-overlay.ql-open {
  opacity: 1;
  pointer-events: all
}

/* Panel */
.ql-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--bg3);
  border-left: 1px solid var(--border);
  z-index: 501;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1)
}

.ql-panel.ql-open {
  transform: translateX(0)
}

/* Header */
.ql-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0
}

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

.ql-logo {
  font-size: 16px;
  font-weight: 900;
  color: var(--violet2)
}

.ql-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(109, 40, 217, 0.2);
  color: var(--violet2);
  border: 1px solid rgba(109, 40, 217, 0.3)
}

.ql-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
  line-height: 1
}

.ql-close:hover {
  color: var(--text)
}

/* Job strip */
.ql-job-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(109, 40, 217, 0.06);
  flex-shrink: 0
}

.ql-job-strip-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.5), rgba(109, 40, 217, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0
}

.ql-job-strip-info {
  flex: 1;
  min-width: 0
}

.ql-job-strip-title {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ql-job-strip-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px
}

.ql-job-strip-sal {
  font-size: 12px;
  font-weight: 700;
  color: var(--violet2);
  flex-shrink: 0
}

/* Step progress dots */
.ql-steps {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 0
}

.ql-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default
}

.ql-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  transition: all 0.25s
}

.ql-step-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  transition: color 0.25s
}

.ql-step.active-qls .ql-step-dot {
  background: var(--violet2);
  border-color: var(--violet2);
  color: #fff
}

.ql-step.active-qls .ql-step-label {
  color: var(--violet2)
}

.ql-step.done-qls .ql-step-dot {
  background: rgba(109, 40, 217, 0.3);
  border-color: rgba(109, 40, 217, 0.5);
  color: var(--violet2)
}

.ql-step.done-qls .ql-step-label {
  color: var(--violet2)
}

.ql-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 4px;
  position: relative;
  top: -10px;
  transition: background 0.25s
}

.ql-step-line.done-line {
  background: rgba(109, 40, 217, 0.4)
}

/* Body */
.ql-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin
}

.ql-step-panel {
  display: none
}

.ql-step-panel.active-qlp {
  display: block
}

.ql-step-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px
}

.ql-step-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.5
}

/* Form fields */
.ql-field-group {
  margin-bottom: 14px
}

.ql-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 5px
}

.ql-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s
}

.ql-input:focus {
  border-color: var(--violet2)
}

.ql-textarea {
  min-height: 100px;
  resize: vertical
}

/* Radio group */
.ql-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px
}

.ql-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: all 0.15s
}

.ql-radio:hover {
  border-color: rgba(109, 40, 217, 0.4)
}

.ql-radio input {
  accent-color: var(--violet2);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0
}

/* Resume options */
.ql-resume-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s
}

.ql-resume-option:hover {
  border-color: rgba(109, 40, 217, 0.4)
}

.ql-resume-option.selected-qlr {
  border-color: var(--violet2);
  background: rgba(109, 40, 217, 0.08)
}

.ql-resume-icon {
  font-size: 24px;
  flex-shrink: 0
}

.ql-resume-info {
  flex: 1;
  min-width: 0
}

.ql-resume-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ql-resume-meta {
  font-size: 11px;
  color: var(--muted)
}

.ql-resume-check {
  font-size: 14px;
  color: var(--violet2);
  font-weight: 900;
  flex-shrink: 0
}

/* Upload zone */
.ql-upload-zone {
  border: 2px dashed rgba(109, 40, 217, 0.3);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 10px
}

.ql-upload-zone:hover {
  border-color: var(--violet2);
  background: rgba(109, 40, 217, 0.06)
}

/* Review card */
.ql-review-card {
  background: rgba(109, 40, 217, 0.06);
  border: 1px solid rgba(109, 40, 217, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.9
}

.ql-review-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px
}

.ql-review-key {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 90px;
  flex-shrink: 0;
  padding-top: 2px
}

.ql-review-val {
  font-size: 13px;
  color: var(--text);
  flex: 1
}

/* Delivery box */
.ql-delivery-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px
}

.ql-delivery-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 10px
}

.ql-delivery-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  line-height: 1.5
}

.ql-delivery-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center
}

/* Footer */
.ql-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  gap: 12px
}

.ql-back-btn {
  padding: 9px 18px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.ql-back-btn:hover {
  border-color: var(--violet2)
}

.ql-back-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed
}

.ql-step-counter {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-align: center
}

.ql-next-btn {
  padding: 10px 24px;
  border-radius: 8px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s
}

.ql-next-btn:hover {
  opacity: 0.88
}

.ql-next-btn.ql-launch {
  background: #c9a84c;
  color: #0a0a0f;
  font-size: 14px
}

/* Confirmation screen */
.ql-confirm-wrap {
  text-align: center;
  padding: 20px 0
}

.ql-confirm-icon {
  font-size: 56px;
  margin-bottom: 14px;
  animation: rocketLaunch 0.6s ease-out
}

@keyframes rocketLaunch {
  0% {
    transform: translateY(20px);
    opacity: 0
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

.ql-confirm-title {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--violet2)
}

.ql-confirm-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px
}

.ql-confirm-refbox {
  background: rgba(109, 40, 217, 0.1);
  border: 1px solid rgba(109, 40, 217, 0.25);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px
}

.ql-confirm-reflabel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted)
}

.ql-confirm-refid {
  font-size: 20px;
  font-weight: 900;
  font-family: monospace;
  color: var(--violet2);
  letter-spacing: 2px
}

.ql-confirm-copy {
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(109, 40, 217, 0.2);
  border: 1px solid rgba(109, 40, 217, 0.4);
  color: var(--violet2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.ql-confirm-copy:hover {
  background: rgba(109, 40, 217, 0.3)
}

.ql-confirm-tips {
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 20px
}

.ql-tip {
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 0;
  line-height: 1.5
}

.ql-done-btn {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s
}

.ql-done-btn:hover {
  opacity: 0.88
}

/* ============================================================
   ORBIT ALERTS + OPEN SIGNAL — CareerOrbit Modals
============================================================ */
/* Launchpad banner new buttons */
.co-lp-signal-btn {
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #34d399;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s
}

.co-lp-signal-btn:hover {
  background: rgba(52, 211, 153, 0.25)
}

.co-lp-signal-btn.signal-off {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--muted)
}

.co-lp-alerts-btn {
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(109, 40, 217, 0.12);
  border: 1px solid rgba(109, 40, 217, 0.3);
  color: var(--violet2);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s
}

.co-lp-alerts-btn:hover {
  background: rgba(109, 40, 217, 0.22)
}

/* Orbit Alerts modal */
.oa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  z-index: 502;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s
}

.oa-overlay.oa-open {
  opacity: 1;
  pointer-events: all
}

.oa-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 480px;
  max-width: 95vw;
  max-height: 88vh;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 18px;
  z-index: 503;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s
}

.oa-modal.oa-open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1)
}

.oa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0
}

.oa-logo {
  font-size: 15px;
  font-weight: 900;
  color: var(--violet2)
}

.oa-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1
}

.oa-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 8px
}

.oa-active-section {
  margin-bottom: 4px
}

.oa-alert-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(109, 40, 217, 0.08);
  border: 1px solid rgba(109, 40, 217, 0.2);
  margin-bottom: 6px;
  font-size: 12px
}

.oa-alert-kw {
  font-weight: 700;
  color: var(--violet2)
}

.oa-alert-meta {
  font-size: 11px;
  color: var(--muted)
}

.oa-alert-del {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  transition: color 0.15s
}

.oa-alert-del:hover {
  color: #ef4444
}

/* Open Signal modal */
.os-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  z-index: 502;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s
}

.os-modal-wrap.os-open {
  opacity: 1;
  pointer-events: all
}

.os-modal {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 18px;
  width: 440px;
  max-width: 95vw;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease
}

.os-status-on {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399;
  font-size: 13px;
  font-weight: 800;
  text-align: center
}

.os-status-off {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center
}

/* ============================================================
   SKILL PROBE — Assessment & Badge System
============================================================ */
.sp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(14px);
  z-index: 510;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s
}

.sp-overlay.sp-open {
  opacity: 1;
  pointer-events: all
}

.sp-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 560px;
  max-width: 96vw;
  max-height: 90vh;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  z-index: 511;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.28s
}

.sp-modal.sp-open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1)
}

.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0
}

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

.sp-logo {
  font-size: 16px;
  font-weight: 900;
  color: var(--violet2)
}

.sp-badge-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(109, 40, 217, 0.2);
  color: var(--violet2);
  border: 1px solid rgba(109, 40, 217, 0.3)
}

.sp-body {
  padding: 20px;
  overflow-y: auto
}

.sp-screen-title {
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 6px
}

/* Skill grid */
.sp-skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px
}

.sp-skill-card {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s
}

.sp-skill-card:hover {
  border-color: rgba(109, 40, 217, 0.5);
  background: rgba(109, 40, 217, 0.08);
  transform: translateY(-2px)
}

.sp-skill-icon {
  font-size: 28px;
  margin-bottom: 8px
}

.sp-skill-name {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px
}

.sp-skill-qcount {
  font-size: 10px;
  color: var(--muted)
}

.sp-skill-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  margin-top: 6px;
  display: inline-block
}

.sp-badge-earned {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3)
}

.sp-badge-none {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid var(--border)
}

/* Quiz */
.sp-quiz-top {
  margin-bottom: 16px
}

.sp-quiz-skill-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--violet2);
  margin-bottom: 10px
}

.sp-quiz-progress {
  display: flex;
  align-items: center;
  gap: 10px
}

.sp-quiz-prog-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden
}

.sp-quiz-prog-fill {
  height: 100%;
  background: var(--violet2);
  border-radius: 3px;
  transition: width 0.3s
}

.sp-quiz-prog-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0
}

.sp-question-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px
}

.sp-q-text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 14px
}

.sp-options {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.sp-option {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s
}

.sp-option:hover {
  border-color: rgba(109, 40, 217, 0.4);
  background: rgba(109, 40, 217, 0.06)
}

.sp-option.sp-selected {
  border-color: var(--violet2);
  background: rgba(109, 40, 217, 0.12);
  color: var(--violet2);
  font-weight: 700
}

.sp-option.sp-correct {
  border-color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  font-weight: 700
}

.sp-option.sp-wrong {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444
}

.sp-quiz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.sp-q-timer {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted)
}

/* Result */
.sp-result-wrap {
  text-align: center;
  padding: 12px 0
}

.sp-result-badge-icon {
  font-size: 70px;
  margin-bottom: 12px;
  animation: rocketLaunch 0.5s ease-out
}

.sp-result-title {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 6px
}

.sp-result-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px
}

.sp-result-score {
  font-size: 48px;
  font-weight: 900;
  color: var(--violet2);
  margin-bottom: 8px
}

.sp-result-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0;
  text-align: left
}

.sp-result-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px
}

.sp-result-retake {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  background: rgba(109, 40, 217, 0.1);
  border: 1px solid rgba(109, 40, 217, 0.25);
  color: var(--violet2);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  margin-top: 10px
}

.sp-result-done {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  background: var(--grad2);
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px
}

/* ============================================================
   WAVE 8 — New Excellence Tools
============================================================ */

/* Interview Prep Builder */
.ip-question-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
  transition: border-color 0.2s
}

.ip-question-card:hover {
  border-color: rgba(109, 40, 217, 0.3)
}

.ip-q-num {
  font-size: 10px;
  font-weight: 900;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px
}

.ip-q-text {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.5
}

.ip-star-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px
}

.ip-star-section {
  padding: 10px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.6
}

.ip-star-s {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2)
}

.ip-star-t {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.2)
}

.ip-star-a {
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.2)
}

.ip-star-r {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2)
}

.ip-star-label {
  font-weight: 900;
  font-size: 11px;
  margin-bottom: 4px
}

.ip-practice-hidden .ip-star-grid {
  filter: blur(5px);
  pointer-events: none;
  user-select: none
}

.ip-reveal-btn {
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  background: rgba(109, 40, 217, 0.15);
  border: 1px solid rgba(109, 40, 217, 0.3);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: #a78bfa;
  font-family: 'Outfit', sans-serif
}

.ip-tip-box {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.18);
  font-size: 11px;
  margin-top: 12px;
  line-height: 1.6
}

/* Reference Manager */
.ref-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px
}

.ref-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08)
}

.ref-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px
}

.ref-name {
  font-size: 13px;
  font-weight: 800
}

.ref-fresh-badge {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700
}

.ref-fresh-green {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399
}

.ref-fresh-amber {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fbbf24
}

.ref-fresh-red {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171
}

.ref-title {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px
}

.ref-rel-pill {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(109, 40, 217, 0.12);
  border: 1px solid rgba(109, 40, 217, 0.2);
  color: #a78bfa;
  display: inline-block;
  margin-bottom: 8px
}

.ref-email-out {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
  font-family: 'Outfit', sans-serif;
  margin-top: 10px
}

/* Total Comp Builder */
.tcb-input-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px
}

.tcb-offer-col {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08)
}

.tcb-offer-name {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #a78bfa
}

.tcb-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px
}

.tcb-field-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700
}

.tcb-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px
}

.tcb-result-card {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  position: relative
}

.tcb-winner {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.05)
}

.tcb-winner-crown {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px
}

.tcb-total-num {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 4px
}

.tcb-offer-label {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px
}

.tcb-bar-svg {
  width: 100%;
  height: 80px;
  margin-top: 8px
}

.tcb-breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

/* Career Timeline */
.ctl-container {
  position: relative;
  padding: 0 0 16px 24px;
  border-left: 2px solid rgba(109, 40, 217, 0.3);
  margin-left: 12px
}

.ctl-card {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
  margin-left: 16px
}

.ctl-card::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid
}

.ctl-job::before {
  background: #6d28d9;
  border-color: #a78bfa
}

.ctl-promotion::before {
  background: #34d399;
  border-color: #6ee7b7
}

.ctl-certification::before {
  background: #06b6d4;
  border-color: #67e8f9
}

.ctl-education::before {
  background: #f59e0b;
  border-color: #fcd34d
}

.ctl-award::before {
  background: #f59e0b;
  border-color: #fcd34d
}

.ctl-contract::before {
  background: #8b5cf6;
  border-color: #c4b5fd
}

.ctl-type-badge {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 6px;
  text-transform: uppercase
}

.ctl-badge-job {
  background: rgba(109, 40, 217, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(109, 40, 217, 0.25)
}

.ctl-badge-promotion {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.25)
}

.ctl-badge-certification {
  background: rgba(6, 182, 212, 0.1);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.25)
}

.ctl-badge-education {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25)
}

.ctl-badge-award {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25)
}

.ctl-badge-contract {
  background: rgba(139, 92, 246, 0.1);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.25)
}

.ctl-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px
}

.ctl-co {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px
}

.ctl-date {
  font-size: 10px;
  color: #6d28d9;
  font-weight: 700
}

.ctl-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 6px
}

/* Orbit News */
.onws-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
  transition: border-color 0.2s
}

.onws-card:hover {
  border-color: rgba(109, 40, 217, 0.3)
}

.onws-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px
}

.onws-source {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  background: rgba(109, 40, 217, 0.12);
  border: 1px solid rgba(109, 40, 217, 0.2);
  color: #a78bfa
}

.onws-date {
  font-size: 9px;
  color: var(--muted)
}

.onws-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 8px
}

.onws-snippet {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 8px
}

.onws-open-btn {
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  text-decoration: none;
  display: inline-block;
  font-weight: 700
}

.onws-open-btn:hover {
  background: rgba(109, 40, 217, 0.15);
  border-color: rgba(109, 40, 217, 0.3)
}

/* Dashboard Stats Strip */
.co-stats-strip {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07)
}

.co-strip-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1
}

.co-strip-num {
  font-size: 18px;
  font-weight: 900;
  color: #a78bfa
}

.co-strip-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px
}

/* ============================================================
   WAVE 7 — Career Intelligence Suite
============================================================ */


/* Application Funnel */
.af-stage-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 4px
}

.af-stage-card {
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  transition: border-color 0.2s
}

.af-stage-card:hover {
  border-color: rgba(109, 40, 217, 0.3)
}

.af-stage-num {
  font-size: 24px;
  font-weight: 900
}

.af-stage-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 3px
}

.af-stage-rate {
  font-size: 10px;
  font-weight: 700;
  margin-top: 4px
}

.af-funnel-row {
  margin-bottom: 8px
}

.af-funnel-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 4px
}

.af-funnel-track {
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden
}

.af-funnel-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.8s ease
}

.af-heatmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px
}

.af-heat-day {
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  cursor: default;
  transition: transform 0.15s
}

.af-heat-day:hover {
  transform: scale(1.1)
}

.af-heat-0 {
  background: rgba(255, 255, 255, 0.04)
}

.af-heat-1 {
  background: rgba(109, 40, 217, 0.15)
}

.af-heat-2 {
  background: rgba(109, 40, 217, 0.3)
}

.af-heat-3 {
  background: rgba(109, 40, 217, 0.5)
}

.af-heat-4 {
  background: rgba(109, 40, 217, 0.75);
  color: #fff
}

.af-insight-box {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  line-height: 1.8;
  margin-bottom: 8px
}

/* JD Match Scorer */
.jdm-result-top {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  align-items: center
}

.jdm-score-ring {
  flex-shrink: 0;
  text-align: center
}

.jdm-score-big {
  font-size: 36px;
  font-weight: 900
}

.jdm-score-label {
  font-size: 10px;
  color: var(--muted)
}

.jdm-match-section {
  flex: 1
}

.jdm-keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px
}

.jdm-kw-match {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399;
  font-weight: 700
}

.jdm-kw-miss {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171;
  font-weight: 700
}

.jdm-action-item {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid #6d28d9;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.6
}

.jdm-action-num {
  font-weight: 900;
  color: #a78bfa;
  margin-right: 8px
}

/* Resume Score */
.rs-overall {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09)
}

.rs-score-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(109, 40, 217, 0.15);
  border: 3px solid rgba(109, 40, 217, 0.4);
  flex-shrink: 0
}

.rs-score-num {
  font-size: 22px;
  font-weight: 900;
  line-height: 1
}

.rs-score-lbl {
  font-size: 8px;
  color: var(--muted);
  text-transform: uppercase
}

.rs-dim-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.rs-dim-label {
  width: 130px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0
}

.rs-dim-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden
}

.rs-dim-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
  background: linear-gradient(90deg, #6d28d9, #34d399)
}

.rs-dim-score {
  font-size: 11px;
  font-weight: 800;
  width: 36px;
  text-align: right;
  color: #a78bfa
}

.rs-bullet {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid #34d399;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.6
}

/* CPE/CEU Tracker */
.cpe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px
}

.cpe-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08)
}

.cpe-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px
}

.cpe-cert-name {
  font-size: 13px;
  font-weight: 800
}

.cpe-renew-badge {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700
}

.cpe-renew-ok {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399
}

.cpe-renew-warn {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fbbf24
}

.cpe-renew-due {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171
}

.cpe-prog-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px
}

.cpe-prog-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden
}

.cpe-prog-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
  background: linear-gradient(90deg, #6d28d9, #a78bfa)
}

.cpe-prog-label {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap
}

.cpe-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px
}

.cpe-log-item {
  font-size: 10px;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  margin-top: 4px
}

/* Negotiation Script */
.neg-tab-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px
}

.neg-tab {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  color: var(--text);
  transition: all 0.2s
}

.neg-tab.active {
  background: rgba(109, 40, 217, 0.25);
  border-color: rgba(109, 40, 217, 0.5);
  color: #a78bfa
}

.neg-script-box {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 12px;
  line-height: 1.8;
  white-space: pre-wrap;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 10px
}

.neg-objection {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(109, 40, 217, 0.06);
  border: 1px solid rgba(109, 40, 217, 0.18);
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.7
}

.neg-obj-q {
  font-weight: 800;
  color: #a78bfa;
  margin-bottom: 4px
}

/* ============================================================
   WAVE 6 EXTRAS — New Excellence Tools
============================================================ */


/* Offer Timeline */
.otl-lane {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
  position: relative;
  overflow: hidden
}

.otl-lane::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px
}

.otl-lane-urgent::before {
  background: #ef4444
}

.otl-lane-warn::before {
  background: #fbbf24
}

.otl-lane-ok::before {
  background: #34d399
}

.otl-lane-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px
}

.otl-co-name {
  font-size: 13px;
  font-weight: 800
}

.otl-role {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px
}

.otl-countdown {
  text-align: right
}

.otl-days-num {
  font-size: 28px;
  font-weight: 900;
  line-height: 1
}

.otl-days-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase
}

.otl-stage-row {
  display: flex;
  gap: 4px;
  margin-bottom: 10px
}

.otl-stage-dot {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08)
}

.otl-stage-dot.done {
  background: #34d399
}

.otl-stage-dot.active {
  background: #6d28d9
}

.otl-stage-label {
  font-size: 10px;
  color: var(--violet2);
  font-weight: 700;
  margin-bottom: 6px
}

.otl-key-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.otl-date-item {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1)
}

.otl-amount {
  font-size: 12px;
  font-weight: 800;
  color: #34d399;
  margin-bottom: 6px
}

/* Orbit Pulse */
.opulse-live-dot {
  display: flex;
  align-items: center;
  gap: 5px
}

.opulse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 4px
}

.opulse-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s
}

.opulse-card:hover {
  border-color: rgba(109, 40, 217, 0.3)
}

.opulse-role {
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px
}

.opulse-median {
  font-size: 20px;
  font-weight: 900;
  color: #34d399;
  margin-bottom: 4px
}

.opulse-trend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px
}

.opulse-trend-up {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399
}

.opulse-trend-down {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171
}

.opulse-band-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 6px
}

.opulse-sparkline {
  width: 100%;
  height: 28px
}

.opulse-insight-box {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.08), rgba(52, 211, 153, 0.05));
  border: 1px solid rgba(109, 40, 217, 0.2);
  font-size: 12px;
  line-height: 1.7
}

/* Skill Gap Radar */
.sgr-dim-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.sgr-dim-label {
  font-size: 11px;
  font-weight: 700;
  width: 120px;
  flex-shrink: 0
}

.sgr-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px
}

.sgr-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px
}

.sgr-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden
}

.sgr-bar-you {
  height: 100%;
  border-radius: 4px;
  background: #6d28d9;
  transition: width 0.8s ease
}

.sgr-bar-need {
  height: 100%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  transition: width 0.8s ease
}

.sgr-bar-label {
  font-size: 9px;
  color: var(--muted);
  width: 28px;
  text-align: right
}

.sgr-gap-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap
}

.sgr-gap-none {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399
}

.sgr-gap-small {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fbbf24
}

.sgr-gap-large {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171
}

.sgr-roadmap-item {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 6px;
  display: flex;
  gap: 10px;
  align-items: flex-start
}

.sgr-roadmap-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(109, 40, 217, 0.25);
  border: 1px solid rgba(109, 40, 217, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #a78bfa;
  flex-shrink: 0;
  margin-top: 1px
}

/* Orbit Vault */
.vault-stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px
}

.vault-stat {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center
}

.vault-stat-num {
  font-size: 20px;
  font-weight: 900;
  color: var(--violet2)
}

.vault-stat-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 3px
}

.vault-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px
}

.vault-doc {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative
}

.vault-doc-type {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 6px;
  letter-spacing: 0.3px
}

.vault-type-cert {
  background: rgba(109, 40, 217, 0.15);
  border: 1px solid rgba(109, 40, 217, 0.3);
  color: #a78bfa
}

.vault-type-clear {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171
}

.vault-type-offer {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399
}

.vault-type-contract {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fbbf24
}

.vault-type-id {
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: #60a5fa
}

.vault-type-other {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted)
}

.vault-doc-name {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 3px
}

.vault-doc-issuer {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px
}

.vault-expiry {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  display: inline-block
}

.vault-exp-ok {
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.2);
  color: #34d399
}

.vault-exp-warn {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fbbf24
}

.vault-exp-red {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171
}

.vault-exp-none {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08)
}

/* ============================================================
   WAVE 5 — Marketplace
============================================================ */


/* Orbit Market */
.om-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.om-filter-btn {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  transition: all 0.2s;
  color: var(--text)
}

.om-filter-btn.active {
  background: rgba(109, 40, 217, 0.2);
  border-color: rgba(109, 40, 217, 0.4);
  color: var(--violet2)
}

.om-listing {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
  transition: border-color 0.2s;
  cursor: pointer
}

.om-listing:hover {
  border-color: rgba(109, 40, 217, 0.3)
}

.om-listing-left {
  flex: 1
}

.om-listing-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px
}

.om-listing-org {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px
}

.om-listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.om-listing-right {
  text-align: right;
  flex-shrink: 0
}

.om-rate {
  font-size: 14px;
  font-weight: 900;
  color: #34d399
}

.om-type-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
  letter-spacing: 0.3px
}

.om-type-contract {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24
}

.om-type-fte {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399
}

.om-type-remote {
  background: rgba(109, 40, 217, 0.15);
  border: 1px solid rgba(109, 40, 217, 0.35);
  color: #a78bfa
}

/* Rate Calc */
.om-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px
}

.om-calc-field {
  display: flex;
  flex-direction: column;
  gap: 5px
}

.om-calc-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted)
}

.om-calc-result {
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.1), rgba(52, 211, 153, 0.05));
  border: 1px solid rgba(109, 40, 217, 0.25);
  margin-top: 12px
}

.om-calc-res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px
}

.om-calc-res-item {
  text-align: center;
  padding: 10px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07)
}

.om-calc-res-val {
  font-size: 14px;
  font-weight: 900;
  color: var(--violet2)
}

.om-calc-res-label {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px
}

/* Contract vs FTE */
.om-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.om-compare-col {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08)
}

.om-compare-col.winner {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.05)
}

.om-compare-header {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07)
}

.om-compare-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px
}

.om-compare-val {
  font-weight: 700
}

.om-compare-winner-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399;
  margin-top: 6px;
  display: inline-block
}

/* Orbit Web */
.ow-radar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px
}

.ow-company-node {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s
}

.ow-company-node:hover {
  border-color: rgba(109, 40, 217, 0.35);
  background: rgba(109, 40, 217, 0.06)
}

.ow-node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px
}

.ow-node-name {
  font-size: 12px;
  font-weight: 800
}

.ow-strength-dots {
  display: flex;
  gap: 3px
}

.ow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s
}

.ow-dot.lit {
  background: #6d28d9
}

.ow-dot.lit2 {
  background: #34d399
}

.ow-connections {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px
}

.ow-contact-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.ow-contact-pill {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600
}

/* Warm Intro */
.ow-intro-search {
  display: flex;
  gap: 8px;
  margin-bottom: 14px
}

.ow-chain {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px
}

.ow-chain-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--violet2);
  margin-bottom: 10px
}

.ow-chain-steps {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  gap: 6px
}

.ow-step {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-align: center
}

.ow-step-you {
  background: rgba(109, 40, 217, 0.2);
  border: 1px solid rgba(109, 40, 217, 0.4);
  color: #a78bfa
}

.ow-step-mid {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15)
}

.ow-step-target {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399
}

.ow-step-arrow {
  font-size: 14px;
  color: var(--muted);
  flex-shrink: 0
}

.ow-chain-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px
}

/* Referral */
.ow-ref-config {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px
}

.ow-ref-message {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 10px;
  white-space: pre-wrap
}

.ow-ref-actions {
  display: flex;
  gap: 8px
}

/* ============================================================
   WAVE 4 — Gamification Layer
============================================================ */


/* Orbit Score */
.os-gauge-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 6px;
  height: 130px
}

.os-gauge-svg {
  filter: drop-shadow(0 0 12px rgba(109, 40, 217, 0.4))
}

.os-gauge-center {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  min-width: 120px
}

.os-score-num {
  font-size: 36px;
  font-weight: 900;
  background: linear-gradient(135deg, #6d28d9, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1
}

.os-score-label {
  font-size: 11px;
  color: var(--muted)
}

.os-tier-badge {
  margin-top: 4px;
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 20px
}

.os-xp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px
}

.os-xp-bar {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden
}

.os-xp-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #6d28d9, #34d399);
  transition: width 1.2s ease
}

.os-xp-val {
  font-size: 10px;
  font-weight: 700;
  color: var(--violet2);
  white-space: nowrap
}

.os-dim-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 4px
}

.os-dim-card {
  padding: 12px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  cursor: default
}

.os-dim-icon {
  font-size: 18px;
  margin-bottom: 4px
}

.os-dim-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px
}

.os-dim-score {
  font-size: 14px;
  font-weight: 900
}

.os-dim-bar {
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-top: 5px
}

.os-dim-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease
}

.os-badge-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0
}

.os-badge {
  width: 60px;
  text-align: center;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1px solid;
  transition: all 0.2s
}

.os-badge-earned {
  background: rgba(109, 40, 217, 0.12);
  border-color: rgba(109, 40, 217, 0.35);
  filter: drop-shadow(0 0 8px rgba(109, 40, 217, 0.3))
}

.os-badge-locked {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
  opacity: 0.4;
  filter: grayscale(1)
}

.os-badge-icon {
  font-size: 22px;
  margin-bottom: 3px
}

.os-badge-name {
  font-size: 8px;
  font-weight: 700;
  line-height: 1.3
}

.os-tip-box {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.1), rgba(52, 211, 153, 0.06));
  border: 1px solid rgba(109, 40, 217, 0.25);
  font-size: 12px;
  line-height: 1.7
}

/* Mission Sim */
.msim-company-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px
}

.msim-company-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  gap: 12px;
  align-items: center
}

.msim-company-card:hover {
  border-color: rgba(109, 40, 217, 0.4);
  background: rgba(109, 40, 217, 0.08);
  transform: translateY(-2px)
}

.msim-co-logo {
  font-size: 28px;
  flex-shrink: 0
}

.msim-co-name {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px
}

.msim-co-role {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px
}

.msim-co-diff {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block
}

.msim-diff-easy {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399
}

.msim-diff-med {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fbbf24
}

.msim-diff-hard {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171
}

.msim-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px
}

.msim-role-label {
  font-size: 14px;
  font-weight: 800
}

.msim-company-label {
  font-size: 11px;
  color: var(--muted)
}

.msim-timer-wrap {
  position: relative
}

.msim-timer-ring {
  position: relative
}

.msim-timer-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 900
}

.msim-progress-track {
  display: flex;
  gap: 4px;
  margin-bottom: 14px
}

.msim-prog-dot {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.3s
}

.msim-prog-dot.done {
  background: #34d399
}

.msim-prog-dot.active {
  background: #6d28d9
}

.msim-stage-card {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px
}

.msim-stage-num {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--violet2);
  margin-bottom: 6px
}

.msim-stage-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px
}

.msim-stage-ctx {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6
}

.msim-choices {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.msim-choice {
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  font-size: 12px;
  font-family: 'Outfit', sans-serif;
  text-align: left;
  transition: all 0.2s;
  color: var(--text)
}

.msim-choice:hover:not(:disabled) {
  background: rgba(109, 40, 217, 0.1);
  border-color: rgba(109, 40, 217, 0.3)
}

.msim-choice.correct {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399
}

.msim-choice.wrong {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
  opacity: 0.6
}

.msim-feedback {
  padding: 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 8px
}

.msim-feedback-good {
  background: rgba(52, 211, 153, 0.07);
  border: 1px solid rgba(52, 211, 153, 0.2)
}

.msim-feedback-bad {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15)
}

.msim-next-btn {
  width: 100%;
  padding: 9px;
  border-radius: 9px;
  background: rgba(109, 40, 217, 0.2);
  border: 1px solid rgba(109, 40, 217, 0.4);
  color: var(--violet2);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 8px
}

.msim-sc-header {
  text-align: center;
  padding: 20px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px
}

.msim-sc-score {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, #6d28d9, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.msim-sc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px
}

.msim-sc-item {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08)
}

.msim-sc-item-label {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 4px
}

.msim-sc-item-val {
  font-size: 14px;
  font-weight: 800
}

.msim-sc-verdict {
  padding: 14px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.7;
  text-align: center
}

/* ============================================================
   WAVE 3 — Specialist Vertical Modules
============================================================ */


/* Shared W3 structural */
.med-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px
}

.med-filter-pill {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.med-filter-pill.active {
  background: rgba(109, 40, 217, 0.2);
  border-color: rgba(109, 40, 217, 0.5);
  color: var(--violet2)
}

.med-metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px
}

.med-metric {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center
}

.med-metric-val {
  font-size: 18px;
  font-weight: 900;
  color: var(--violet2)
}

.med-metric-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 3px
}

.med-job-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.2s;
  cursor: pointer
}

.med-job-card:hover {
  border-color: rgba(109, 40, 217, 0.3)
}

.med-job-left {
  flex: 1
}

.med-job-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px
}

.med-job-org {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px
}

.med-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.med-tag {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid
}

.med-tag-blue {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
  color: #60a5fa
}

.med-tag-green {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.25);
  color: #34d399
}

.med-tag-amber {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.25);
  color: #fbbf24
}

.med-salary {
  font-size: 13px;
  font-weight: 900;
  color: #34d399;
  white-space: nowrap
}

.med-section-divider {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--violet2);
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin: 14px 0 10px
}

.med-license-result {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid;
  margin-top: 10px
}

.med-license-ok {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.25)
}

.med-license-warn {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.25)
}

/* Command Orbit */
.com-clearance-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.com-clearance-btn {
  padding: 5px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Outfit', sans-serif
}

.com-clearance-btn.active,
.com-clearance-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171
}

.com-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  padding: 2px 9px;
  border-radius: 7px;
  font-weight: 900;
  letter-spacing: 0.3px
}

.com-badge-ts {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171
}

.com-badge-s {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24
}

.com-badge-pub {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399
}

.com-tracker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px
}

.com-tracker-card {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center
}

.com-tracker-stage {
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px
}

.com-tracker-status {
  font-size: 10px;
  color: var(--muted)
}

.com-guide-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px
}

.com-guide-icon {
  font-size: 18px;
  flex-shrink: 0
}

/* Launch Pad */
.lp-tab {
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  transition: all 0.2s;
  color: var(--text)
}

.lp-tab-active {
  background: rgba(109, 40, 217, 0.2);
  border-color: rgba(109, 40, 217, 0.4);
  color: var(--violet2)
}

.lp-intern-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px
}

.lp-intern-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px
}

.lp-intern-title {
  font-size: 13px;
  font-weight: 800
}

.lp-intern-org {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px
}

.lp-stipend {
  font-size: 12px;
  font-weight: 800;
  color: #34d399
}

.lp-deadline {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 7px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171
}

.lp-roadmap {
  position: relative;
  padding-left: 20px
}

.lp-roadmap::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #6d28d9, #34d399)
}

.lp-roadmap-step {
  position: relative;
  padding: 12px 0 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.lp-roadmap-step::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--violet2);
  border: 2px solid var(--bg3)
}

.lp-step-title {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px
}

.lp-step-actions {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6
}

.lp-sim-prompt {
  padding: 14px;
  border-radius: 12px;
  background: rgba(109, 40, 217, 0.1);
  border: 1px solid rgba(109, 40, 217, 0.25);
  margin-bottom: 10px
}

.lp-sim-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--violet2);
  margin-bottom: 6px
}

.lp-sim-question {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6
}

.lp-sim-result {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.07);
  border: 1px solid rgba(52, 211, 153, 0.2);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 10px
}

/* ============================================================
   WAVE 2 — Intelligence Layer & Platform Improvements
============================================================ */


/* Career Command Center */
.ccc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.ccc-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px
}

.ccc-card:hover {
  background: rgba(109, 40, 217, 0.1);
  border-color: rgba(109, 40, 217, 0.35);
  transform: translateY(-2px)
}

.ccc-card-icon {
  font-size: 28px
}

.ccc-card-name {
  font-size: 12px;
  font-weight: 800
}

.ccc-card-sub {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4
}

.ccc-card-stat {
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
  margin-top: 4px
}

/* Orbit Intel */
.oi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px
}

.oi-card {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08)
}

.oi-card-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px
}

.oi-card-val {
  font-size: 20px;
  font-weight: 900
}

.oi-meter {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 6px;
  overflow: hidden
}

.oi-meter-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease
}

.oi-keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px
}

.oi-kw {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700
}

.oi-kw-match {
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399
}

.oi-kw-miss {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444
}

.oi-position {
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.12), rgba(52, 211, 153, 0.08));
  border: 1px solid rgba(109, 40, 217, 0.25);
  text-align: center
}

/* Salary War Room */
.swr-strength-bar {
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  margin: 10px 0;
  overflow: hidden
}

.swr-strength-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 1s ease
}

.swr-range-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px
}

.swr-range-val {
  font-size: 18px;
  font-weight: 900;
  color: #34d399
}

.swr-script {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.8;
  font-style: italic
}

.swr-script-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--violet2);
  margin-bottom: 6px
}

.swr-tactic {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(109, 40, 217, 0.08);
  border: 1px solid rgba(109, 40, 217, 0.15);
  margin-bottom: 6px;
  font-size: 11px;
  display: flex;
  gap: 8px
}

/* Dark Orbit */
.do-hidden-list {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.do-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(109, 40, 217, 0.2);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  overflow: hidden
}

.do-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(135deg, #6d28d9, #34d399)
}

.do-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: 0.4px
}

.do-badge-stealth {
  background: rgba(109, 40, 217, 0.2);
  border: 1px solid rgba(109, 40, 217, 0.4);
  color: var(--violet2)
}

.do-badge-referral {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399
}

.do-badge-backfill {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24
}

.do-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  margin-right: 5px;
  animation: dopulse 1.5s infinite
}

@keyframes dopulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8)
  }
}

.do-signal-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px
}

/* Orbit Blind */
.ob-status-off {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  margin-bottom: 14px
}

.ob-status-on {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.3);
  margin-bottom: 14px
}

.ob-status-icon {
  font-size: 28px
}

.ob-status-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px
}

.ob-status-sub {
  font-size: 11px;
  color: var(--muted)
}

.ob-settings {
  padding: 4px 0
}

/* Team Orbit Match */
.tom-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

.tom-slider-label {
  font-size: 11px;
  font-weight: 700;
  width: 160px;
  flex-shrink: 0
}

.tom-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--muted);
  width: 100%
}

.tom-slider {
  width: 100%;
  height: 4px;
  accent-color: var(--violet2)
}

.tom-company-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.tom-fit-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  width: 120px;
  margin-top: 4px
}

.tom-fit-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #6d28d9, #34d399)
}

/* ============================================================
   WAVE 6 — Shared modal base & all 12 feature styles
============================================================ */

.w6-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 560px;
  max-width: 96vw;
  max-height: 90vh;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  z-index: 510;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6)
}

.w6-modal.sp-open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1)
}

/* Interview Forge */
.if-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px
}

.if-q-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700
}

.if-score-badge {
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(109, 40, 217, 0.15);
  border: 1px solid rgba(109, 40, 217, 0.3);
  color: var(--violet2);
  font-size: 12px;
  font-weight: 900
}

.if-question-box {
  padding: 16px;
  border-radius: 12px;
  background: rgba(109, 40, 217, 0.08);
  border: 1px solid rgba(109, 40, 217, 0.2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--text)
}

.if-feedback-box {
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.7
}

.if-feedback-good {
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #34d399
}

.if-feedback-ok {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fbbf24
}

.if-feedback-bad {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444
}

.if-result-score {
  font-size: 52px;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(135deg, #6d28d9, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 12px 0
}

/* Offer Orbit */
.oo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px
}

.oo-offer-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  position: relative
}

.oo-offer-title {
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--violet2)
}

.oo-offer-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04)
}

.oo-offer-total {
  font-size: 16px;
  font-weight: 900;
  color: #34d399;
  margin-top: 10px;
  text-align: center
}

.oo-winner {
  border-color: rgba(52, 211, 153, 0.4) !important;
  background: rgba(52, 211, 153, 0.06) !important
}

.oo-winner::before {
  content: '🏆 Best Value';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 8px;
  background: #34d399;
  color: #000;
  white-space: nowrap
}

/* Fraud Sentinel */
.fs-result-safe {
  padding: 14px;
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399;
  font-weight: 800;
  font-size: 14px;
  text-align: center
}

.fs-result-danger {
  padding: 14px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px
}

.fs-flag-list {
  margin-top: 10px
}

.fs-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.06);
  margin-bottom: 6px;
  font-size: 12px;
  border-left: 3px solid #ef4444
}

.fs-flag-ok {
  border-left-color: #34d399 !important;
  background: rgba(52, 211, 153, 0.06) !important
}

/* Rep Signal */
.rs-recruiter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px
}

.rs-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.rs-name {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px
}

.rs-stars {
  font-size: 12px;
  color: #fbbf24
}

.rs-trust {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399;
  font-weight: 700
}

/* Total Orbit Value */
.tov-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px
}

.tov-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px
}

.tov-item-val {
  font-weight: 800;
  color: #34d399
}

.tov-total {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.15), rgba(52, 211, 153, 0.1));
  border: 1px solid rgba(109, 40, 217, 0.3);
  text-align: center;
  margin-top: 8px
}

.tov-total-num {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(90deg, #6d28d9, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* Orbit Debrief */
.od-reason {
  padding: 14px;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  margin-bottom: 10px
}

.od-reason-title {
  font-size: 13px;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 6px
}

.od-fix {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.2);
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
  gap: 8px
}

/* Orbit Watch */
.ow-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.ow-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px
}

.ow-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px
}

.ow-company {
  font-size: 13px;
  font-weight: 800
}

.ow-alert {
  padding: 5px 8px;
  border-radius: 8px 8px 8px 0;
  background: rgba(109, 40, 217, 0.1);
  border: 1px solid rgba(109, 40, 217, 0.2);
  font-size: 10px;
  margin-bottom: 4px;
  line-height: 1.4
}

.ow-alert-red {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #ef4444
}

.ow-alert-green {
  background: rgba(52, 211, 153, 0.08) !important;
  border-color: rgba(52, 211, 153, 0.25) !important;
  color: #34d399
}

/* Proof Orbit */
.po-project-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px
}

.po-project-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px
}

.po-tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(109, 40, 217, 0.15);
  border: 1px solid rgba(109, 40, 217, 0.3);
  color: var(--violet2);
  margin-right: 4px;
  margin-top: 4px
}

/* Mission Report */
.mr-log-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px
}

.mr-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800
}

.mr-outcome-badge {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700
}

.mr-outcome-pending {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24
}

.mr-outcome-moved {
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399
}

.mr-outcome-rejected {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444
}

.mr-outcome-offer {
  background: rgba(109, 40, 217, 0.15);
  border: 1px solid rgba(109, 40, 217, 0.3);
  color: var(--violet2)
}

/* Orbit Referral */
.orf-company-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px
}

.orf-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.orf-card-left {
  font-size: 13px;
  font-weight: 800
}

.orf-card-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px
}

.orf-members {
  font-size: 10px;
  color: var(--violet2);
  font-weight: 700
}

/* Orbit Relocate */
.orloc-result {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1)
}

.orloc-equiv {
  font-size: 24px;
  font-weight: 900;
  color: #34d399;
  margin: 8px 0
}

.orloc-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

/* Signal Check */
.sc-streak-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px
}

.sc-streak-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  text-align: center
}

.sc-streak-num {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #6d28d9, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.sc-streak-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px
}

.sc-mood-check {
  margin-bottom: 14px
}

.sc-mood-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px
}

.sc-mood-row {
  display: flex;
  gap: 8px;
  justify-content: center
}

.sc-mood-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center
}

.sc-mood-btn span {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 700
}

.sc-mood-btn:hover,
.sc-mood-btn.active {
  background: rgba(109, 40, 217, 0.15);
  border-color: rgba(109, 40, 217, 0.35);
  transform: translateY(-2px)
}

.sc-tip-box {
  padding: 14px;
  border-radius: 12px;
  background: rgba(109, 40, 217, 0.08);
  border: 1px solid rgba(109, 40, 217, 0.2);
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 12px
}

.sc-milestones {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.sc-milestone {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 8px
}

.sc-milestone-done {
  border-color: rgba(52, 211, 153, 0.3) !important;
  background: rgba(52, 211, 153, 0.05) !important
}

/* ============================================================
   ORBIT COPILOT — Floating AI Chat
============================================================ */
.oc-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 520;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 50px;
  background: linear-gradient(135deg, #6d28d9, #4f46e5);
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(109, 40, 217, 0.5);
  transition: all 0.25s
}

.oc-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(109, 40, 217, 0.6)
}

.oc-fab-icon {
  font-size: 18px
}

.oc-fab-label {
  letter-spacing: 0.3px
}

.oc-fab-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  animation: pulse 2s infinite;
  flex-shrink: 0
}

.oc-panel {
  position: fixed;
  bottom: 90px;
  right: 28px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 540px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  z-index: 519;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5)
}

.oc-panel.oc-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1)
}

.oc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.15), rgba(79, 70, 229, 0.1));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0
}

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

.oc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6d28d9, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0
}

.oc-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--violet2)
}

.oc-subtitle {
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px
}

.oc-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0
}

.oc-qa-btn {
  padding: 5px 10px;
  border-radius: 16px;
  background: rgba(109, 40, 217, 0.1);
  border: 1px solid rgba(109, 40, 217, 0.25);
  color: var(--violet2);
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s
}

.oc-qa-btn:hover {
  background: rgba(109, 40, 217, 0.22)
}

.oc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin
}

.oc-msg-bot {
  display: flex;
  align-items: flex-start;
  gap: 8px
}

.oc-msg-bot-bubble {
  background: rgba(109, 40, 217, 0.1);
  border: 1px solid rgba(109, 40, 217, 0.2);
  border-radius: 4px 14px 14px 14px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  max-width: 88%;
  color: var(--text)
}

.oc-msg-user {
  display: flex;
  justify-content: flex-end
}

.oc-msg-user-bubble {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.3), rgba(79, 70, 229, 0.25));
  border: 1px solid rgba(109, 40, 217, 0.3);
  border-radius: 14px 14px 4px 14px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  max-width: 88%;
  color: var(--text)
}

.oc-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(109, 40, 217, 0.07);
  border-radius: 14px;
  width: 56px
}

.oc-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet2);
  animation: ocDot 1.2s infinite;
  display: block
}

.oc-typing span:nth-child(2) {
  animation-delay: 0.2s
}

.oc-typing span:nth-child(3) {
  animation-delay: 0.4s
}

@keyframes ocDot {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4
  }

  30% {
    transform: translateY(-5px);
    opacity: 1
  }
}

.oc-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0
}

.oc-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  outline: none
}

.oc-input:focus {
  border-color: var(--violet2)
}

.oc-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--violet2);
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0
}

.oc-send-btn:hover {
  opacity: 0.85
}

/* AI Outreach */
.outreach-job-target {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(109, 40, 217, 0.08);
  border: 1px solid rgba(109, 40, 217, 0.2);
  font-size: 12px;
  color: var(--violet2);
  font-weight: 700;
  margin-bottom: 12px
}

/* Hire Me Mode */
.hm-status-off {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center
}

.hm-status-on {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  font-size: 13px;
  font-weight: 800;
  text-align: center
}

.hm-bid-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px
}

.hm-bid-company {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px
}

.hm-bid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px
}

.hm-bid-salary {
  color: #34d399;
  font-weight: 800;
  font-size: 13px
}

.hm-bid-actions {
  display: flex;
  gap: 6px
}

.hm-bid-accept {
  flex: 1;
  padding: 6px;
  border-radius: 8px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer
}

.hm-bid-decline {
  flex: 1;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer
}

/* Career Path Simulator */
.cps-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

.cps-step:last-child {
  border-bottom: none
}

.cps-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d28d9, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0
}

.cps-step-body {
  flex: 1
}

.cps-step-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 3px
}

.cps-step-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5
}

.cps-step-cert {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(109, 40, 217, 0.15);
  border: 1px solid rgba(109, 40, 217, 0.3);
  color: var(--violet2);
  font-weight: 700;
  margin-top: 4px;
  margin-right: 4px
}

.cps-prob-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--border);
  overflow: hidden;
  margin: 6px 0
}

.cps-prob-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #6d28d9, #34d399);
  transition: width 0.8s
}

/* ============================================================
   ORBIT RESUME — Resume Builder Panel
============================================================ */
.or-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  z-index: 504;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s
}

.or-overlay.or-open {
  opacity: 1;
  pointer-events: all
}

.or-panel {
  position: fixed;
  inset: 0;
  background: var(--bg3);
  z-index: 505;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)
}

.or-panel.or-open {
  transform: translateY(0)
}

/* Header */
.or-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0
}

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

.or-logo {
  font-size: 16px;
  font-weight: 900;
  color: var(--violet2)
}

.or-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(109, 40, 217, 0.2);
  color: var(--violet2);
  border: 1px solid rgba(109, 40, 217, 0.3)
}

.or-header-actions {
  display: flex;
  align-items: center;
  gap: 8px
}

.or-preview-btn {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.or-preview-btn:hover {
  background: rgba(255, 255, 255, 0.1)
}

.or-export-btn {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(109, 40, 217, 0.12);
  border: 1px solid rgba(109, 40, 217, 0.3);
  color: var(--violet2);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s
}

.or-export-btn:hover {
  background: rgba(109, 40, 217, 0.22)
}

/* Template bar */
.or-template-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0
}

.or-tbar-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 4px
}

.or-tpl-btn {
  padding: 4px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s
}

.or-tpl-btn:hover {
  color: var(--text)
}

.or-tpl-btn.active-tpl {
  background: rgba(109, 40, 217, 0.15);
  border-color: rgba(109, 40, 217, 0.4);
  color: var(--violet2)
}

/* Body */
.or-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden
}

/* Editor pane */
.or-editor {
  overflow-y: auto;
  padding: 18px;
  border-right: 1px solid var(--border);
  scrollbar-width: thin
}

.or-section-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px
}

.or-sec-header {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text)
}

.or-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.or-add-item-btn {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(109, 40, 217, 0.1);
  border: 1px solid rgba(109, 40, 217, 0.25);
  color: var(--violet2);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer
}

.or-exp-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px
}

.or-exp-del {
  float: right;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  transition: color 0.15s
}

.or-exp-del:hover {
  color: #ef4444
}

/* Preview pane */
.or-preview-pane {
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.02);
  padding: 20px
}

.or-preview-doc {
  background: #fff;
  color: #1a1a1a;
  border-radius: 8px;
  padding: 32px 36px;
  min-height: 700px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
  font-family: 'Times New Roman', serif;
  font-size: 12px;
  line-height: 1.5
}

.or-prev-name {
  font-size: 22px;
  font-weight: 700;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 6px;
  margin-bottom: 4px
}

.or-prev-contact {
  font-size: 11px;
  color: #444;
  margin-bottom: 14px
}

.or-prev-section {
  margin-bottom: 14px
}

.or-prev-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 3px;
  margin-bottom: 8px
}

.or-prev-exp-title {
  font-size: 12px;
  font-weight: 700
}

.or-prev-exp-meta {
  font-size: 11px;
  color: #666;
  margin-bottom: 4px
}

.or-prev-exp-desc {
  font-size: 11px;
  line-height: 1.6
}

/* Footer */
.or-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  gap: 10px
}

.or-ai-btn {
  padding: 8px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(14, 165, 233, 0.15));
  border: 1px solid rgba(124, 58, 237, 0.35);
  color: #a78bfa;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s
}

.or-ai-btn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(14, 165, 233, 0.25))
}

/* ============================================================
   YOUTUBE MUSIC × REELS — Music Picker & Reel Song Bar
============================================================ */
/* Floating Add Music button */
.ytm-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, #ff0000, #cc0000);
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(255, 0, 0, 0.4);
  z-index: 50;
  transition: all 0.2s;
  display: none
}

#pageReels.active-page .ytm-fab {
  display: flex
}

.ytm-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 32px rgba(255, 0, 0, 0.55)
}

.ytm-fab-icon {
  font-size: 16px
}

/* Modal overlay */
.ytm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(20px);
  z-index: 400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: fadeIn 0.15s ease
}

.ytm-modal-overlay.hidden {
  display: none
}

/* Modal sheet */
.ytm-modal {
  background: #0f0f0f;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
  overflow: hidden
}

/* Header */
.ytm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08)
}

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

.ytm-yt-logo {
  width: 38px;
  height: 38px;
  background: #ff0000;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  font-weight: 900;
  flex-shrink: 0
}

.ytm-title {
  font-size: 17px;
  font-weight: 900;
  color: #fff
}

.ytm-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 1px
}

.ytm-premium-badge {
  padding: 1px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #000;
  font-weight: 900;
  font-size: 10px
}

.ytm-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s
}

.ytm-close:hover {
  background: rgba(255, 0, 0, 0.3)
}

/* Search */
.ytm-search-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

.ytm-search {
  flex: 1;
  padding: 10px 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s
}

.ytm-search:focus {
  border-color: #ff0000
}

.ytm-search::placeholder {
  color: rgba(255, 255, 255, 0.35)
}

.ytm-search-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ff0000;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s
}

.ytm-search-btn:hover {
  opacity: 0.85
}

/* Category pills */
.ytm-cats {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

.ytm-cats::-webkit-scrollbar {
  display: none
}

.ytm-cat-pill {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap
}

.ytm-cat-pill:hover {
  background: rgba(255, 0, 0, 0.15);
  border-color: rgba(255, 0, 0, 0.4);
  color: #fff
}

.ytm-cat-pill.active-ytmc {
  background: rgba(255, 0, 0, 0.2);
  border-color: #ff0000;
  color: #ff4444;
  font-weight: 800
}

/* Content area */
.ytm-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 0, 0, 0.3) transparent
}

/* Section label */
.ytm-section-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.4);
  margin: 12px 0 8px
}

/* Track row */
.ytm-track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent
}

.ytm-track:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 0, 0, 0.2)
}

.ytm-track.selected-track {
  background: rgba(255, 0, 0, 0.08);
  border-color: #ff0000
}

.ytm-track-num {
  width: 22px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0
}

.ytm-track-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff0000, #cc0000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative
}

.ytm-track-thumb::after {
  content: '▶';
  position: absolute;
  font-size: 12px;
  color: rgba(255, 255, 255, 0);
  transition: color 0.15s
}

.ytm-track:hover .ytm-track-thumb::after {
  color: #fff
}

.ytm-track-info {
  flex: 1;
  overflow: hidden
}

.ytm-track-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ytm-track-artist {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 1px
}

.ytm-track-duration {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0
}

.ytm-track-use {
  padding: 6px 14px;
  border-radius: 20px;
  background: #ff0000;
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  opacity: 0
}

.ytm-track:hover .ytm-track-use {
  opacity: 1
}

.ytm-track.selected-track .ytm-track-use {
  opacity: 1;
  background: #fff;
  color: #ff0000
}

/* Now Playing bar inside modal */
.ytm-now-playing {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 0, 0, 0.2)
}

.ytm-now-playing.show {
  display: flex
}

.ytm-np-icon {
  font-size: 20px;
  animation: spin 4s linear infinite
}

@keyframes spin {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

.ytm-np-info {
  flex: 1;
  overflow: hidden
}

.ytm-np-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ytm-np-artist {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5)
}

.ytm-np-apply {
  padding: 8px 18px;
  border-radius: 20px;
  background: #ff0000;
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s
}

.ytm-np-apply:hover {
  opacity: 0.85
}

/* Reel music bar (bottom of reel card) */
.reel-yt-music-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 0, 0, 0.12);
  border-top: 1px solid rgba(255, 0, 0, 0.2);
  animation: fadeIn 0.3s ease
}

.reel-yt-disc {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #ff0000, #660000);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  animation: spin 3s linear infinite
}

.reel-yt-scroll {
  flex: 1;
  overflow: hidden;
  white-space: nowrap
}

.reel-yt-scroll-inner {
  display: inline-block;
  animation: scrollText 8s linear infinite;
  font-size: 12px;
  color: #fff;
  font-weight: 600
}

@keyframes scrollText {
  0% {
    transform: translateX(100%)
  }

  100% {
    transform: translateX(-100%)
  }
}

.reel-yt-badge {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 0, 0, 0.4);
  color: #ff7777;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0
}

/* ============================================================
   SPHERA MEGA FEATURES — All New Page Styles
   Stories · Live · Spaces · Creator Studio · Sphera Pay
   Local · Book Club · Recipe Hub · Fitness · AI Match · AI News
============================================================ */

/* ── STORIES ─────────────────────────────────────────────── */
.stories-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0
}

.stories-create-btn {
  background: linear-gradient(135deg, #f59e0b, #ec4899);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px
}

.stories-tray {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  overflow-x: auto;
  scrollbar-width: none
}

.story-card {
  flex-shrink: 0;
  width: 96px;
  cursor: pointer;
  text-align: center
}

.story-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ec4899, #7c3aed);
  padding: 3px;
  margin: 0 auto 6px
}

.story-ring.seen {
  background: var(--border)
}

.story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 3px solid var(--bg1)
}

.story-add-ring {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9)
}

.story-name {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/* Story Viewer Overlay */
.stories-viewer-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999;
  display: flex;
  flex-direction: column
}

.stories-viewer-overlay.hidden {
  display: none
}

.sv-bar {
  display: flex;
  gap: 4px;
  padding: 12px 16px 0
}

.sv-seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  overflow: hidden
}

.sv-seg-fill {
  height: 100%;
  background: #fff;
  transition: width 0.1s linear
}

.sv-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 1001
}

.sv-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px
}

.sv-bottom {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  padding: 0 20px
}

.sv-reply {
  flex: 1;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 24px;
  padding: 10px 16px;
  color: #fff;
  font-size: 14px
}

.sv-emoji {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer
}

.sv-prev,
.sv-next {
  position: absolute;
  top: 50%;
  background: rgba(255, 255, 255, .15);
  border: none;
  color: #fff;
  font-size: 28px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transform: translateY(-50%)
}

.sv-prev {
  left: 10px
}

.sv-next {
  right: 10px
}

/* ── GO LIVE ─────────────────────────────────────────────── */
.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px
}

.live-go-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 700;
  cursor: pointer;
  animation: livePulse 2s infinite
}

@keyframes livePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, .4)
  }

  50% {
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0)
  }
}

.live-layout {
  display: grid;
  grid-template-columns: 1fr 340px 260px;
  gap: 16px;
  padding: 0 20px 20px;
  height: calc(100vh - 130px);
  overflow: hidden
}

.live-preview-col,
.live-chat-col,
.live-active-streams {
  background: var(--bg2);
  border-radius: 14px;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.live-preview-screen {
  flex: 1;
  background: #000;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px
}

.live-preview-placeholder {
  text-align: center;
  color: var(--text2)
}

.live-cam-icon {
  font-size: 48px;
  margin-bottom: 10px
}

.live-controls {
  display: flex;
  gap: 8px
}

.lc-btn {
  flex: 1;
  padding: 8px 4px;
  background: var(--bg3);
  border: none;
  border-radius: 10px;
  color: var(--text1);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s
}

.lc-btn:hover {
  background: var(--accent);
  color: #fff
}

.live-title-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text1);
  font-size: 14px
}

.live-cat-select {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text1)
}

.live-stats-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  font-size: 13px
}

.live-stat {
  color: var(--text2)
}

.live-chat-feed {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.live-chat-msg {
  font-size: 13px;
  padding: 4px 0
}

.live-chat-msg strong {
  color: var(--accent)
}

.live-chat-input-row {
  display: flex;
  gap: 8px
}

.live-chat-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  color: var(--text1);
  font-size: 13px
}

.live-chat-send {
  background: var(--accent);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: #fff;
  cursor: pointer;
  font-size: 16px
}

.live-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: .06em;
  margin-bottom: 8px
}

.live-stream-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s
}

.live-stream-card:hover {
  background: var(--bg3)
}

.lsc-thumb {
  width: 56px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
  flex-shrink: 0
}

.lsc-live-dot {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 7px;
  height: 7px;
  background: #dc2626;
  border-radius: 50%;
  animation: livePulse 2s infinite
}

.lsc-info {
  font-size: 12px
}

.lsc-title {
  font-weight: 600;
  color: var(--text1);
  margin-bottom: 2px
}

.lsc-meta {
  color: var(--text2);
  font-size: 11px
}

/* ── SPACES ──────────────────────────────────────────────── */
.spaces-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px
}

.spaces-create-btn {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-weight: 700;
  cursor: pointer
}

.spaces-tabs {
  display: flex;
  gap: 8px;
  padding: 0 20px 14px
}

.spaces-tab {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  transition: all .2s
}

.spaces-tab.active-stab {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  color: #fff;
  border-color: transparent
}

.spaces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 0 20px
}

.space-card {
  background: var(--bg2);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .3s
}

.space-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2)
}

.sc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px
}

.sc-live-badge {
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  animation: livePulse 2s infinite
}

.sc-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px
}

.sc-host {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 10px
}

.sc-speakers {
  display: flex;
  gap: -6px;
  margin-bottom: 10px
}

.sc-speaker-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg3);
  border: 2px solid var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: -8px
}

.sc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text2)
}

.sc-join-btn {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600
}

/* ── CREATOR STUDIO ──────────────────────────────────────── */
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px
}

.cs-export-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 16px;
  color: var(--text1);
  cursor: pointer
}

.cs-overview-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 0 20px 16px
}

.cs-stat-card {
  background: var(--bg2);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden
}

.cs-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cs-accent, var(--accent))
}

.cs-stat-icon {
  font-size: 22px;
  margin-bottom: 8px
}

.cs-stat-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--text1)
}

.cs-stat-label {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 4px
}

.cs-stat-change {
  font-size: 11px;
  font-weight: 600
}

.cs-stat-up {
  color: #10b981
}

.cs-stat-down {
  color: #ef4444
}

.cs-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 20px 16px
}

.cs-chart-box {
  background: var(--bg2);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid var(--border)
}

.cs-chart-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 12px
}

.cs-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px
}

.cs-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height .5s
}

.cs-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 0 20px
}

.cs-content-card {
  background: var(--bg2);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border)
}

.cs-content-thumb {
  height: 110px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px
}

.cs-content-body {
  padding: 10px
}

.cs-content-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px
}

.cs-content-stats {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text2)
}

/* ── SPHERA PAY ──────────────────────────────────────────── */
.pay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px
}

.pay-badge {
  background: rgba(16, 185, 129, .15);
  border: 1px solid rgba(16, 185, 129, .3);
  color: #10b981;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600
}

.pay-layout {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px
}

.pay-wallet-card {
  background: linear-gradient(135deg, #1d4ed8, #7c3aed, #ec4899);
  border-radius: 20px;
  padding: 28px;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  min-height: 180px
}

.pay-wallet-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07)
}

.pw-chip {
  font-size: 28px;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 20px
}

.pw-balance-label {
  font-size: 12px;
  opacity: .8;
  margin-bottom: 4px
}

.pw-balance {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 20px
}

.pw-card-num {
  font-size: 16px;
  letter-spacing: .18em;
  opacity: .8;
  margin-bottom: 6px;
  font-family: monospace
}

.pw-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em
}

.pw-network {
  position: absolute;
  bottom: 20px;
  right: 24px;
  font-size: 18px;
  font-weight: 900;
  opacity: .9
}

.pw-network span {
  font-size: 12px;
  opacity: .7
}

.pay-actions-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px
}

.pay-action-btn {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
  transition: all .2s
}

.pay-action-btn span {
  font-size: 22px;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.pay-action-btn:hover {
  border-color: var(--accent);
  background: var(--bg3)
}

.pay-recent-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: .06em;
  margin-bottom: 10px
}

.pay-tx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg2);
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border)
}

.pay-tx-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0
}

.pay-tx-info {
  flex: 1
}

.pay-tx-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px
}

.pay-tx-date {
  font-size: 11px;
  color: var(--text2)
}

.pay-tx-amount {
  font-size: 16px;
  font-weight: 700
}

.pay-tx-credit {
  color: #10b981
}

.pay-tx-debit {
  color: #ef4444
}

/* ── LOCAL ───────────────────────────────────────────────── */
.local-header {
  padding: 16px 20px 8px
}

.local-location-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 10px
}

.local-change-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px
}

.local-cats {
  display: flex;
  gap: 8px;
  padding: 0 20px 14px;
  overflow-x: auto;
  scrollbar-width: none
}

.local-cat {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  transition: all .2s
}

.local-cat.active-lcat {
  background: var(--accent);
  color: #fff;
  border-color: transparent
}

.local-map-preview {
  height: 180px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-radius: 14px;
  margin: 0 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border);
  cursor: pointer;
  position: relative;
  overflow: hidden
}

.local-map-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E")
}

.lmp-placeholder {
  text-align: center;
  color: var(--text2);
  font-size: 32px
}

.local-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px
}

.local-post {
  background: var(--bg2);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--border)
}

.lp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px
}

.lp-cat-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg3);
  color: var(--text2)
}

.lp-time {
  font-size: 11px;
  color: var(--text2);
  margin-left: auto
}

.lp-title {
  font-weight: 600;
  margin-bottom: 6px
}

.lp-body {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5
}

.lp-footer {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text2)
}

/* ── BOOK CLUB ────────────────────────────────────────────── */
.bc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px
}

.bc-add-btn {
  background: linear-gradient(135deg, #059669, #0ea5e9);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px
}

.bc-tabs {
  display: flex;
  gap: 8px;
  padding: 0 20px 16px;
  overflow-x: auto;
  scrollbar-width: none
}

.bc-tab {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  transition: all .2s
}

.bc-tab.active-bctab {
  background: linear-gradient(135deg, #059669, #0ea5e9);
  color: #fff;
  border-color: transparent
}

.bc-content {
  padding: 0 20px
}

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

.bc-book {
  cursor: pointer;
  transition: transform .2s
}

.bc-book:hover {
  transform: translateY(-4px)
}

.bc-cover {
  height: 200px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  margin-bottom: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3)
}

.bc-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px
}

.bc-author {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 4px
}

.bc-stars {
  color: #f59e0b;
  font-size: 12px
}

/* ── RECIPE HUB ──────────────────────────────────────────── */
.rh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px
}

.rh-create-btn {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px
}

.rh-cats {
  display: flex;
  gap: 8px;
  padding: 0 20px 14px;
  overflow-x: auto;
  scrollbar-width: none
}

.rh-cat {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  transition: all .2s
}

.rh-cat.active-rhcat {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border-color: transparent
}

.rh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 0 20px
}

.rh-card {
  background: var(--bg2);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .3s
}

.rh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25)
}

.rh-card-img {
  height: 160px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px
}

.rh-card-body {
  padding: 14px
}

.rh-card-title {
  font-weight: 700;
  margin-bottom: 4px
}

.rh-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 8px
}

.rh-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.rh-tag {
  background: var(--bg3);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text2)
}

.rh-shop-btn {
  width: 100%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border: none;
  border-radius: 10px;
  padding: 8px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  font-size: 13px
}

/* ── FITNESS ─────────────────────────────────────────────── */
.fit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px
}

.fit-log-btn {
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer
}

.fit-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 20px 16px
}

.fit-stat-card {
  background: var(--bg2);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  text-align: center
}

.fsc-icon {
  font-size: 24px;
  margin-bottom: 6px
}

.fsc-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text1)
}

.fsc-label {
  font-size: 11px;
  color: var(--text2)
}

.fsc-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  position: relative;
  font-size: 11px;
  font-weight: 700
}

.fit-tabs {
  display: flex;
  gap: 8px;
  padding: 0 20px 14px;
  overflow-x: auto;
  scrollbar-width: none
}

.fit-tab {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  transition: all .2s
}

.fit-tab.active-fttab {
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: #fff;
  border-color: transparent
}

.fit-content {
  padding: 0 20px
}

.fit-workout-card {
  background: var(--bg2);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .2s
}

.fit-workout-card:hover {
  border-color: #10b981
}

.fwc-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0
}

.fwc-info {
  flex: 1
}

.fwc-title {
  font-weight: 700;
  margin-bottom: 2px
}

.fwc-meta {
  font-size: 12px;
  color: var(--text2)
}

.fwc-badge {
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: #fff;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600
}

/* ── AI MATCH 2.0 ────────────────────────────────────────── */
.aim-header {
  padding: 16px 20px 4px
}

.aim-subtitle {
  font-size: 13px;
  color: var(--text2);
  margin-top: 4px
}

.aim-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 20px 14px;
  overflow-x: auto;
  scrollbar-width: none
}

.aim-tab {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  transition: all .2s
}

.aim-tab.active-aimtab {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  color: #fff;
  border-color: transparent
}

.aim-match-score-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--bg2);
  margin: 0 20px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-size: 13px
}

.aim-ai-pulse {
  font-size: 18px;
  animation: aimPulse 1.5s infinite
}

@keyframes aimPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

.aim-progress {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden
}

.aim-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  border-radius: 2px;
  width: 0;
  transition: width 2s ease
}

.aim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 0 20px
}

.aim-card {
  background: var(--bg2);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  transition: all .3s;
  cursor: pointer
}

.aim-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px)
}

.aim-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px
}

.aim-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.aim-name {
  font-weight: 700;
  margin-bottom: 3px
}

.aim-title-role {
  font-size: 12px;
  color: var(--text2)
}

.aim-match-badge {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.aim-reasons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.aim-reason-tag {
  background: rgba(124, 58, 237, .15);
  border: 1px solid rgba(124, 58, 237, .3);
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 11px;
  color: #a78bfa
}

.aim-card-actions {
  display: flex;
  gap: 8px
}

.aim-connect-btn {
  flex: 1;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  border: none;
  border-radius: 10px;
  padding: 8px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px
}

.aim-skip-btn {
  background: var(--bg3);
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  color: var(--text2);
  cursor: pointer
}

/* ── AI NEWS ANCHOR ──────────────────────────────────────── */
.ana-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px
}

.ana-live-badge {
  background: #dc2626;
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  animation: livePulse 2s infinite
}

.ana-studio {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  padding: 0 20px;
  height: calc(100vh - 120px)
}

.ana-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px
}

.ana-avatar-wrap {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--border);
  position: relative;
  overflow: hidden;
  width: 100%
}

.ana-avatar {
  font-size: 80px;
  margin-bottom: 12px;
  animation: anaFloat 4s ease-in-out infinite
}

@keyframes anaFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

.ana-sound-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
  margin-bottom: 10px
}

.ana-bar {
  width: 4px;
  background: linear-gradient(to top, #7c3aed, #0ea5e9);
  border-radius: 2px;
  animation: anaBarAnim 0.8s ease-in-out infinite
}

.ana-bar:nth-child(1) {
  animation-delay: 0s;
  height: 40%
}

.ana-bar:nth-child(2) {
  animation-delay: .15s;
  height: 70%
}

.ana-bar:nth-child(3) {
  animation-delay: .3s;
  height: 100%
}

.ana-bar:nth-child(4) {
  animation-delay: .15s;
  height: 70%
}

.ana-bar:nth-child(5) {
  animation-delay: 0s;
  height: 40%
}

@keyframes anaBarAnim {

  0%,
  100% {
    transform: scaleY(0.4)
  }

  50% {
    transform: scaleY(1)
  }
}

.ana-bar.paused {
  animation-play-state: paused
}

.ana-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(124, 58, 237, .8);
  color: #fff;
  font-size: 11px;
  padding: 5px 12px;
  white-space: nowrap;
  overflow: hidden
}

.ana-ticker-inner {
  display: inline-block;
  animation: tickerScroll 18s linear infinite
}

@keyframes tickerScroll {
  from {
    transform: translateX(100%)
  }

  to {
    transform: translateX(-100%)
  }
}

.ana-play-btn {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  border: none;
  border-radius: 20px;
  padding: 10px 24px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px
}

.ana-news-col {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px
}

.ana-news-item {
  background: var(--bg2);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden
}

.ana-news-item:hover {
  border-color: var(--accent)
}

.ana-news-item.active-news {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, .08)
}

.ana-news-item.active-news::before {
  content: '▶ NOW READING';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #7c3aed
}

.ana-cat-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg3);
  color: var(--text2);
  margin-bottom: 6px
}

.ana-news-title {
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.4
}

.ana-news-summary {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5
}

.ana-news-meta {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text2)
}


/* ============================================================
   VIDEO STUDIO — Lumora Embedded + Sphera Publish Bar
============================================================ */
#pageVideostudio {
  padding: 0;
  flex-direction: column;
  height: calc(100vh - var(--topnav-h));
  overflow: hidden
}

#pageVideostudio.active-page {
  display: flex
}

/* Publish bar */
.vs-publish-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(236, 72, 153, .12));
  border-bottom: 1px solid rgba(124, 58, 237, .35);
  flex-shrink: 0;
  gap: 16px;
  flex-wrap: wrap
}

.vs-pub-left {
  display: flex;
  align-items: center;
  gap: 10px
}

.vs-pub-logo {
  font-size: 20px
}

.vs-pub-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text1)
}

.vs-pub-subtitle {
  font-size: 11px;
  color: var(--text2);
  font-style: italic
}

.vs-pub-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}

.vs-pub-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: .06em;
  white-space: nowrap
}

.vs-pub-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap
}

.vs-pub-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3)
}

/* SPHERA button — most prominent */
.vs-pub-sphera {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-size: 13px;
  padding: 7px 16px
}

/* Platform-specific colors */
.vs-pub-ig {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff
}

.vs-pub-tt {
  background: #000;
  color: #fff;
  border: 1px solid #555
}

.vs-pub-li {
  background: #0077b5;
  color: #fff
}

.vs-pub-yt {
  background: #ff0000;
  color: #fff
}

.vs-pub-fb {
  background: #1877f2;
  color: #fff
}

.vs-pub-x {
  background: #000;
  color: #fff;
  border: 1px solid #555
}

.vs-pub-nx {
  background: linear-gradient(135deg, #0ea5e9, #7c3aed);
  color: #fff
}

/* Lumora iframe fills remaining space */
.vs-lumora-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #0f0a1a
}

/* Publish success toast override handled by showToast */

/* ============================================================
   LINKEDUP — Tinder-style Dating Feature
============================================================ */
#pageLinkedup {
  padding: 0;
  flex-direction: column;
  height: calc(100vh - var(--topnav-h));
  overflow: hidden;
  background: var(--bg)
}

#pageLinkedup.active-page {
  display: flex
}

/* Top bar */
.lu-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0
}

.lu-topbar-btn {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all .2s
}

.lu-topbar-btn.active-lu-tab,
.lu-topbar-btn:hover {
  background: rgba(236, 72, 153, .15);
  color: #ec4899
}

.lu-logo {
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(135deg, #ec4899, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 6px
}

.lu-heart {
  -webkit-text-fill-color: initial;
  animation: luHeartbeat 1.4s ease-in-out infinite
}

@keyframes luHeartbeat {

  0%,
  100% {
    transform: scale(1)
  }

  14% {
    transform: scale(1.28)
  }

  28% {
    transform: scale(1)
  }

  42% {
    transform: scale(1.15)
  }

  70% {
    transform: scale(1)
  }
}

/* Views */
.lu-view {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  position: relative
}

.active-lu-view {
  display: flex
}

/* Filter chips */
.lu-filters {
  display: flex;
  gap: 8px;
  padding: 12px 20px 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0
}

.lu-filter-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
  font-weight: 600
}

.lu-filter-chip:hover,
.lu-filter-chip.active-luf {
  background: linear-gradient(135deg, #ec4899, #f97316);
  color: #fff;
  border-color: transparent
}

/* Card stage */
.lu-card-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 16px 20px 0
}

/* Individual card */
.lu-card {
  position: absolute;
  width: min(360px, calc(100vw - 180px));
  height: min(460px, calc(100vh - 240px));
  border-radius: 20px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
  transition: transform .15s, box-shadow .15s;
  touch-action: none
}

.lu-card:active {
  cursor: grabbing
}

.lu-card.swiping {
  transition: none
}

.lu-card.fly-right {
  transition: transform .5s ease, opacity .4s;
  transform: translateX(140vw) rotate(30deg) !important;
  opacity: 0
}

.lu-card.fly-left {
  transition: transform .5s ease, opacity .4s;
  transform: translateX(-140vw) rotate(-30deg) !important;
  opacity: 0
}

.lu-card.fly-up {
  transition: transform .5s ease, opacity .4s;
  transform: translateY(-120vh) scale(1.1) !important;
  opacity: 0
}

/* Card z-index layering — done via JS */
.lu-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center
}

.lu-card-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, transparent 100%)
}

.lu-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: #fff
}

.lu-card-name {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 2px
}

.lu-card-age {
  font-size: 16px;
  font-weight: 400;
  margin-left: 8px;
  opacity: .9
}

.lu-card-location {
  font-size: 12px;
  opacity: .8;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px
}

.lu-card-bio {
  font-size: 13px;
  opacity: .85;
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.lu-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.lu-card-tag {
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(4px);
  border-radius: 10px;
  padding: 3px 9px;
  font-size: 11px
}

.lu-card-verified {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(236, 72, 153, .85);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px
}

.lu-card-activity {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
  color: #fff;
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600
}

/* Info button on card */
.lu-card-info-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  color: #fff;
  font-size: 16px;
  cursor: pointer
}

/* Swipe stamps */
.lu-stamp {
  position: absolute;
  top: 80px;
  font-size: 28px;
  font-weight: 900;
  padding: 8px 18px;
  border-radius: 12px;
  border: 4px solid;
  transform: rotate(-20deg);
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity .15s
}

.lu-stamp-like {
  left: 30px;
  color: #4ade80;
  border-color: #4ade80;
  transform: rotate(-20deg)
}

.lu-stamp-pass {
  right: 30px;
  color: #f87171;
  border-color: #f87171;
  transform: rotate(20deg)
}

.lu-stamp-super {
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  color: #a78bfa;
  border-color: #a78bfa
}

.lu-stamp.visible {
  opacity: 1
}

.lu-stamp.hidden {
  opacity: 0
}

/* Action buttons */
.lu-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 0 16px;
  flex-shrink: 0
}

.lu-action-btn {
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2)
}

.lu-action-btn:hover {
  transform: scale(1.12)
}

.lu-action-btn:active {
  transform: scale(.95)
}

.lu-pass {
  width: 58px;
  height: 58px;
  background: var(--bg2);
  color: #f87171;
  font-size: 24px;
  border: 2px solid rgba(248, 113, 113, .3)
}

.lu-superlike {
  width: 46px;
  height: 46px;
  background: var(--bg2);
  color: #a78bfa;
  font-size: 18px;
  border: 2px solid rgba(167, 139, 250, .3)
}

.lu-like {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #ec4899, #f97316);
  color: #fff;
  font-size: 26px
}

.lu-like:hover {
  box-shadow: 0 0 24px rgba(236, 72, 153, .5)
}

.lu-rewind {
  width: 38px;
  height: 38px;
  background: var(--bg2);
  color: #fbbf24;
  font-size: 16px;
  border: 2px solid rgba(251, 191, 36, .3)
}

.lu-boost {
  width: 38px;
  height: 38px;
  background: var(--bg2);
  color: #7c3aed;
  font-size: 16px;
  border: 2px solid rgba(124, 58, 237, .3)
}

/* MATCH POPUP */
.lu-match-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px)
}

.lu-match-popup.hidden {
  display: none
}

.lu-match-modal {
  background: linear-gradient(135deg, #1a0020, #0d0522);
  border: 1px solid rgba(236, 72, 153, .3);
  border-radius: 28px;
  padding: 40px 36px;
  text-align: center;
  max-width: 360px;
  width: 90%;
  animation: matchPop .5s cubic-bezier(.175, .885, .32, 1.275)
}

@keyframes matchPop {
  from {
    transform: scale(.5);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

.lu-match-hearts {
  font-size: 52px;
  animation: luHeartbeat 1.2s infinite;
  margin-bottom: 12px
}

.lu-match-title {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(135deg, #ec4899, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px
}

.lu-match-subtitle {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 20px
}

.lu-match-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px
}

.lu-match-av {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  border: 3px solid rgba(236, 72, 153, .5)
}

.lu-match-av-you {
  background: linear-gradient(135deg, #7c3aed, #ec4899)
}

.lu-match-av-them {
  background: linear-gradient(135deg, #ec4899, #f97316)
}

.lu-match-spark {
  font-size: 24px;
  animation: sparkSpin 2s linear infinite
}

@keyframes sparkSpin {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.lu-match-msg-btn {
  width: 100%;
  background: linear-gradient(135deg, #ec4899, #f97316);
  border: none;
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all .2s
}

.lu-match-msg-btn:hover {
  box-shadow: 0 0 20px rgba(236, 72, 153, .5)
}

.lu-match-continue-btn {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  color: var(--text2);
  font-size: 14px;
  cursor: pointer
}

/* MATCHES VIEW */
.lu-matches-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
  flex-shrink: 0
}

.lu-matches-header h3 {
  font-size: 16px;
  font-weight: 700
}

.lu-matches-count {
  font-size: 12px;
  color: var(--text2);
  background: rgba(236, 72, 153, .15);
  border: 1px solid rgba(236, 72, 153, .3);
  border-radius: 10px;
  padding: 3px 10px
}

.lu-new-matches-row {
  display: flex;
  gap: 12px;
  padding: 0 20px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0
}

.lu-match-bubble {
  flex-shrink: 0;
  text-align: center;
  cursor: pointer
}

.lu-match-bubble-av {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  border: 3px solid transparent;
  background-clip: padding-box;
  position: relative;
  margin: 0 auto 4px
}

.lu-match-bubble-av::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #f97316);
  z-index: -1
}

.lu-match-bubble-name {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap
}

.lu-messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px
}

.lu-msg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .2s
}

.lu-msg-row:hover {
  background: var(--bg2)
}

.lu-msg-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0
}

.lu-msg-info {
  flex: 1
}

.lu-msg-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px
}

.lu-msg-preview {
  font-size: 13px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lu-msg-time {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap
}

.lu-msg-unread {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #f97316);
  flex-shrink: 0
}

/* Out of cards state */
.lu-empty-state {
  text-align: center;
  color: var(--text2);
  padding: 40px 20px
}

.lu-empty-icon {
  font-size: 56px;
  margin-bottom: 12px
}

.lu-empty-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text1)
}

.lu-empty-sub {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px
}

.lu-empty-boost-btn {
  background: linear-gradient(135deg, #ec4899, #f97316);
  border: none;
  border-radius: 20px;
  padding: 12px 28px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px
}


/* ============================================================
   SPHERA AUTH MODAL
============================================================ */
.sphera-auth-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at top, #1a0a2e 0%, #0a0015 60%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(20px)
}

.sphera-auth-overlay.hidden {
  display: none
}

.sphera-auth-card {
  width: min(440px, 92vw);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(236, 72, 153, .25);
  border-radius: 28px;
  padding: 44px 40px 36px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.sphera-auth-logo {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #a78bfa, #ec4899, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-bottom: 6px
}

.sphera-auth-tagline {
  text-align: center;
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
  margin-bottom: 28px
}

.sphera-auth-tabs {
  display: flex;
  background: rgba(255, 255, 255, .06);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 28px
}

.sphera-auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: none;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s
}

.active-auth-tab {
  background: rgba(236, 72, 153, .2);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(236, 72, 153, .4)
}

.sphera-input-group {
  margin-bottom: 16px
}

.sphera-input-group label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: .5px
}

.sphera-auth-input {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 13px 16px;
  color: #fff;
  font-size: 14px;
  transition: all .2s;
  box-sizing: border-box
}

.sphera-auth-input:focus {
  outline: none;
  border-color: rgba(236, 72, 153, .5);
  background: rgba(236, 72, 153, .06);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, .1)
}

.sphera-auth-btn {
  width: 100%;
  background: linear-gradient(135deg, #7c3aed, #ec4899, #f97316);
  border: none;
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  margin-bottom: 12px;
  transition: all .2s;
  letter-spacing: .3px
}

.sphera-auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(236, 72, 153, .35)
}

.sphera-auth-btn:active {
  transform: translateY(0)
}

.sphera-auth-btn:disabled {
  opacity: .6;
  cursor: not-allowed
}

.sphera-auth-error {
  min-height: 20px;
  color: #f87171;
  font-size: 12px;
  text-align: center;
  margin-top: 4px
}

.sphera-auth-footer {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
  margin-top: 4px
}

.sphera-auth-footer a {
  color: #ec4899;
  cursor: pointer;
  font-weight: 600
}

.sphera-auth-divider {
  text-align: center;
  color: rgba(255, 255, 255, .25);
  font-size: 12px;
  margin: 16px 0;
  position: relative
}

.sphera-auth-divider::before,
.sphera-auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: rgba(255, 255, 255, .1)
}

.sphera-auth-divider::before {
  left: 0
}

.sphera-auth-divider::after {
  right: 0
}

.sphera-social-btns {
  display: flex;
  gap: 8px;
  justify-content: center
}

.sphera-social-btn {
  flex: 1;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 11px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s
}

.sphera-social-btn:hover {
  background: rgba(255, 255, 255, .12)
}

/* Loading spinner */
.sphera-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 6px
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* ============================================================
   SPHERA PROFILE PANEL & PAGES
============================================================ */

/* Slide-in panel */
.sphera-profile-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s
}

.sphera-profile-panel.profile-open {
  pointer-events: all;
  opacity: 1
}

.sphera-profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px)
}

.sphera-profile-drawer {
  position: relative;
  margin-left: auto;
  width: min(680px, 100vw);
  height: 100vh;
  background: #0c0018;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -24px 0 80px rgba(0, 0, 0, .6)
}

.sphera-profile-panel.profile-open .sphera-profile-drawer {
  transform: translateX(0)
}

.profile-close-btn {
  position: sticky;
  top: 0;
  left: 0;
  margin: 16px;
  z-index: 10;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all .2s
}

.profile-close-btn:hover {
  background: rgba(236, 72, 153, .3);
  border-color: rgba(236, 72, 153, .5)
}

.profile-scroll {
  padding-bottom: 80px
}

/* Cover photo */
.profile-cover-wrap {
  position: relative;
  margin-top: -62px
}

.profile-cover {
  height: 200px;
  width: 100%;
  position: relative
}

.profile-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, #0c0018)
}

.profile-cover-edit-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  padding: 8px 14px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all .2s
}

.profile-cover-edit-btn:hover {
  background: rgba(0, 0, 0, .8)
}

/* Avatar row */
.profile-avatar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 24px;
  margin-top: -52px;
  position: relative;
  z-index: 2
}

.profile-avatar-wrap {
  position: relative
}

.profile-avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 4px solid #0c0018;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  box-shadow: 0 0 0 2px rgba(236, 72, 153, .4)
}

.profile-avatar-edit {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(15, 10, 30, .9);
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s
}

.profile-avatar-edit:hover {
  background: rgba(236, 72, 153, .3)
}

.profile-action-btns {
  display: flex;
  gap: 8px;
  padding-bottom: 8px
}

/* Follow / Edit buttons */
.profile-follow-btn,
.profile-edit-btn,
.profile-msg-btn {
  border-radius: 20px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  border: none
}

.profile-follow-btn {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff
}

.profile-follow-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(236, 72, 153, .35)
}

.profile-follow-btn.following {
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 255, 255, .2);
  color: #fff
}

.profile-edit-btn {
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 255, 255, .2);
  color: #fff
}

.profile-edit-btn:hover {
  background: rgba(255, 255, 255, .15)
}

.profile-msg-btn {
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .15);
  color: #fff
}

.profile-msg-btn:hover {
  background: rgba(255, 255, 255, .13)
}

/* Info section */
.profile-info {
  padding: 16px 24px 0
}

.profile-display-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 8px
}

.profile-verified {
  color: #f97316;
  font-size: 16px
}

.profile-username {
  color: rgba(255, 255, 255, .45);
  font-size: 14px;
  margin: 0 0 10px
}

.profile-bio {
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 10px;
  white-space: pre-wrap
}

.profile-bio-empty {
  color: rgba(255, 255, 255, .3);
  font-size: 14px;
  cursor: pointer;
  margin: 0 0 10px
}

.profile-bio-empty:hover {
  color: rgba(236, 72, 153, .7)
}

.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .45)
}

.profile-meta-row a {
  color: rgba(139, 92, 246, .8);
  text-decoration: none
}

.profile-meta-row a:hover {
  color: #a78bfa
}

/* Stats row */
.profile-stats-row {
  display: flex;
  gap: 24px;
  margin-bottom: 16px
}

.profile-stat {
  cursor: pointer;
  text-align: center
}

.profile-stat:hover .profile-stat-num {
  color: #ec4899
}

.profile-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  display: block;
  transition: color .2s
}

.profile-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, .4)
}

/* Tabs */
.profile-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 0 24px;
  margin-bottom: 2px
}

.profile-tab {
  flex: 1;
  padding: 14px 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, .4);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  margin-bottom: -1px
}

.profile-tab:hover {
  color: rgba(255, 255, 255, .7)
}

.active-profile-tab {
  color: #fff;
  border-bottom-color: #ec4899
}

/* Posts grid */
.profile-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px 0
}

.profile-post-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, .04)
}

.profile-post-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s
}

.profile-post-tile:hover img {
  transform: scale(1.06)
}

.profile-post-tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 600
}

.profile-post-tile:hover .profile-post-tile-overlay {
  display: flex
}

.profile-post-text-tile {
  background: rgba(255, 255, 255, .04);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.profile-post-text-tile p {
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  margin: 0
}

.profile-post-tile-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  margin-top: 8px;
  display: block
}

.profile-empty-posts {
  grid-column: 1/-1;
  padding: 60px 0;
  text-align: center;
  color: rgba(255, 255, 255, .35)
}

.profile-empty-posts p {
  margin-top: 12px;
  font-size: 15px
}

/* ── Edit Profile Modal ── */
.ep-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center
}

.ep-overlay.ep-open {
  display: flex
}

.ep-card {
  background: rgba(15, 8, 32, .97);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  width: min(520px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .7)
}

.ep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 0
}

.ep-header h3 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0
}

.ep-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .5);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  transition: color .2s
}

.ep-close:hover {
  color: #fff
}

.ep-body {
  padding: 20px 28px
}

.ep-field {
  margin-bottom: 18px
}

.ep-field label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 6px
}

.ep-input {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  font-size: 14px;
  transition: all .2s;
  box-sizing: border-box;
  font-family: inherit;
  resize: none
}

.ep-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, .5);
  background: rgba(139, 92, 246, .06);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .1)
}

.ep-textarea {
  min-height: 90px
}

.ep-charcount {
  font-size: 11px;
  color: rgba(255, 255, 255, .3);
  text-align: right;
  margin-top: 4px
}

.ep-footer {
  display: flex;
  gap: 10px;
  padding: 16px 28px 24px;
  justify-content: flex-end
}

.ep-cancel-btn {
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  padding: 10px 20px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s
}

.ep-cancel-btn:hover {
  background: rgba(255, 255, 255, .12)
}

.ep-save-btn {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border: none;
  border-radius: 12px;
  padding: 10px 24px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s
}

.ep-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(236, 72, 153, .3)
}

.ep-save-btn:disabled {
  opacity: .6;
  cursor: not-allowed
}

/* ── Profile hover card ── */
.profile-hover-card {
  position: absolute;
  z-index: 9998;
  width: 270px;
  background: rgba(15, 8, 32, .95);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  backdrop-filter: blur(20px);
  animation: hoverFade .2s ease
}

@keyframes hoverFade {
  from {
    opacity: 0;
    transform: translateY(-6px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ── Skeleton shimmer ── */
.skeleton-shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .04) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.6s infinite
}

@keyframes shimmer {
  0% {
    background-position: 100% 0
  }

  100% {
    background-position: -100% 0
  }
}

.skeleton-line {
  background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .05) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.6s infinite
}

/* ============================================================
   ME DROPDOWN — LinkedIn-style profile menu
============================================================ */
.me-menu-wrap {
  position: relative
}

.me-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
  transition: background .2s
}

.me-btn:hover {
  background: rgba(255, 255, 255, .08)
}

.me-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .15)
}

.me-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%
}

.me-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1
}

.me-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.me-caret {
  font-size: 10px;
  color: rgba(255, 255, 255, .4)
}

/* Dropdown */
.me-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: rgba(12, 6, 28, .97);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
  backdrop-filter: blur(20px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 9995
}

.me-dropdown.me-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all
}

/* User card */
.me-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  cursor: pointer;
  transition: background .2s
}

.me-card:hover {
  background: rgba(255, 255, 255, .05)
}

.me-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden
}

.me-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%
}

.me-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff
}

.me-card-username {
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
  margin-top: 2px
}

/* View profile btn */
.me-view-profile-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 12px;
  background: none;
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  padding: 9px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s
}

.me-view-profile-btn:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .3)
}

/* Divider + labels */
.me-divider {
  height: 1px;
  background: rgba(255, 255, 255, .07);
  margin: 4px 0
}

.me-section-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .35);
  letter-spacing: .8px;
  padding: 10px 18px 4px
}

/* Items */
.me-item {
  display: block;
  width: 100%;
  padding: 10px 18px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all .2s;
  border-radius: 8px
}

.me-item:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  padding-left: 22px
}

/* Sign out = red danger */
.me-signout-btn {
  display: block;
  width: 100%;
  padding: 12px 18px;
  background: none;
  border: none;
  color: #f87171;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .3px
}

.me-signout-btn:hover {
  background: rgba(248, 113, 113, .1);
  color: #fca5a5
}

/* ── Me button v2 — avatar-only, SPHERA style (no "Me" label) ── */
.me-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 14px;
  transition: background .2s
}

.me-btn:hover,
.me-btn:focus {
  background: rgba(255, 255, 255, .07);
  outline: none
}

.me-avatar-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #7c3aed, #ec4899, #f97316);
  transition: box-shadow .25s
}

.me-btn:hover .me-avatar-ring {
  box-shadow: 0 0 14px rgba(236, 72, 153, .5)
}

.me-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  overflow: hidden;
  border: 2px solid #0c0018
}

.me-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%
}

.me-chevron {
  font-size: 9px;
  color: rgba(255, 255, 255, .4);
  line-height: 1;
  margin-top: -2px;
  transition: transform .2s
}

.me-dropdown.me-open~.me-chevron,
.me-btn[aria-expanded="true"] .me-chevron {
  transform: rotate(180deg)
}

/* Remove old label styles that no longer exist */
.me-label,
.me-name,
.me-caret {
  display: none
}

/* ============================================================
   LAYOUT OVERFLOW FIXES
   Fixes: topbar clipping dropdown, right panel hidden off-screen
============================================================ */

/* 1. Topbar — must be overflow:visible so the Me dropdown renders outside it */
.top-nav {
  overflow: visible !important;
  z-index: 100 !important
}

.tn-actions {
  overflow: visible !important;
  position: relative
}

.me-menu-wrap {
  overflow: visible !important
}

/* 2. App shell — allow right panel to be visible; handle overflow at page level */
.app-shell {
  overflow: visible !important
}

/* 3. Main content — keep overflow hidden (prevents page escape) */
.main-content {
  overflow: hidden;
  min-width: 0;
  flex: 1
}

/* 4. Right panel — collapse to icon strip on narrow viewports, full at wide */
@media(max-width:1280px) {
  .right-panel {
    width: 240px;
    min-width: 240px
  }
}

@media(max-width:1100px) {

  /* Hide full right panel, show a compact floating button instead */
  .right-panel {
    display: none
  }

  .right-panel-toggle {
    display: flex !important
  }
}

@media(min-width:1101px) {
  .right-panel {
    display: flex !important;
    width: var(--rp-w)
  }
}

/* 5. Compact right-panel toggle for narrow screens */
.right-panel-toggle {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 500;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(124, 58, 237, .45);
  align-items: center;
  justify-content: center;
  transition: transform .2s
}

.right-panel-toggle:hover {
  transform: scale(1.08)
}

/* 6. Prevent horizontal scroll at body level */
body {
  overflow-x: hidden !important
}

/* 7. Ensure the page (feed area) doesn't expand beyond available space */
#pageFeed>* {
  max-width: 100%;
  box-sizing: border-box
}

/* My Profile — pinned at bottom of sidebar */
.lnav-profile-pin {
  margin: 4px 8px 8px;
  background: rgba(124, 58, 237, .08);
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 12px;
}

.lnav-profile-pin:hover {
  background: rgba(124, 58, 237, .18) !important;
  border-color: rgba(124, 58, 237, .35);
}

/* ============================================================
   REEL UPLOAD CARD + VIDEO ELEMENT
============================================================ */
/* Video fills the card exactly like the img does */
.reel-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: #000;
}

/* Upload-prompt card — shows before a video is chosen */
.reel-upload-card {
  cursor: pointer;
  border: 2px dashed rgba(124, 58, 237, .4);
  background: rgba(12, 6, 28, .85);
  transition: border-color .2s, background .2s;
}

.reel-upload-card:hover {
  border-color: rgba(124, 58, 237, .85);
  background: rgba(20, 10, 44, .9);
}

.reel-upload-prompt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}

.reel-upload-icon {
  font-size: 48px;
  filter: drop-shadow(0 0 12px #7c3aed)
}

.reel-upload-text {
  font-size: 14px;
  font-weight: 700;
  color: #fff
}

.reel-upload-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .45)
}

/* ============================================================
   YOUTUBE CHANNEL CONNECT — FAB + Modal + Video Grid
============================================================ */

/* Floating "YouTube" button (sits above Add Music FAB) */
.yt-connect-fab {
  position: fixed;
  bottom: 130px;
  right: 20px;
  z-index: 501;
  display: none;
  /* shown only when Reels is active — toggled by JS */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ff0000;
  border: none;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(255, 0, 0, .5);
  transition: transform .2s, box-shadow .2s;
}

.yt-connect-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(255, 0, 0, .7)
}

.yt-connect-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1
}

/* Modal overlay */
.yt-channel-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(12px);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.yt-channel-modal-overlay.hidden {
  display: none
}

/* Modal card */
.yt-channel-modal {
  background: rgba(12, 6, 28, .97);
  border: 1px solid rgba(255, 0, 0, .25);
  border-radius: 24px;
  width: min(760px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .8);
  position: relative;
}

.yt-cm-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(255, 255, 255, .08);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 2;
}

.yt-cm-close:hover {
  background: rgba(255, 0, 0, .3)
}

/* Header */
.yt-cm-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 0
}

.yt-cm-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #ff0000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  font-weight: 900;
  flex-shrink: 0;
}

.yt-cm-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff
}

.yt-cm-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
  margin-top: 2px
}

/* Input row */
.yt-cm-input-wrap {
  display: flex;
  gap: 10px;
  padding: 16px 24px 0
}

.yt-cm-input {
  flex: 1;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 30px;
  padding: 12px 18px;
  color: #fff;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  outline: none;
  transition: border-color .2s;
}

.yt-cm-input:focus {
  border-color: rgba(255, 0, 0, .5);
  box-shadow: 0 0 0 2px rgba(255, 0, 0, .15)
}

.yt-cm-go-btn {
  padding: 12px 24px;
  background: #ff0000;
  border: none;
  border-radius: 30px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
  transition: background .2s;
}

.yt-cm-go-btn:hover {
  background: #cc0000
}

.yt-cm-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, .3);
  padding: 6px 24px 8px
}

/* Status bar */
.yt-cm-status {
  padding: 10px 24px;
  font-size: 13px;
  border-radius: 10px;
  margin: 0 24px
}

.yt-cm-status-loading {
  color: rgba(255, 255, 255, .6);
  animation: pulse 1.2s infinite
}

.yt-cm-status-error {
  color: #f87171;
  background: rgba(248, 113, 113, .1)
}

/* Video grid */
.yt-cm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 12px 24px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 0, 0, .3) transparent;
}

.yt-cm-video-card {
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color .2s, transform .15s;
  background: rgba(255, 255, 255, .04);
}

.yt-cm-video-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 0, 0, .3)
}

.yt-cm-selected {
  border-color: #ff0000 !important;
  background: rgba(255, 0, 0, .08) !important
}

.yt-cm-thumb-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden
}

.yt-cm-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.yt-cm-dur {
  position: absolute;
  bottom: 4px;
  right: 5px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px
}

.yt-cm-check {
  position: absolute;
  inset: 0;
  background: rgba(255, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
}

.yt-cm-check.hidden {
  display: none
}

.yt-cm-vtitle {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  padding: 6px 8px 2px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.yt-cm-vmeta {
  font-size: 10px;
  color: rgba(255, 255, 255, .35);
  padding: 0 8px 8px
}

/* Footer */
.yt-cm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  gap: 12px;
}

.yt-cm-footer span {
  font-size: 13px;
  color: rgba(255, 255, 255, .5)
}

.yt-cm-import-btn {
  padding: 12px 28px;
  background: linear-gradient(135deg, #ff0000, #7c3aed);
  border: none;
  border-radius: 30px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  box-shadow: 0 4px 20px rgba(255, 0, 0, .4);
  transition: transform .2s, box-shadow .2s;
}

.yt-cm-import-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(255, 0, 0, .6)
}

/* YouTube badge on reel card */
.reel-yt-badge-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3
}

.reel-yt-badge-pill {
  background: rgba(255, 0, 0, .85);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .4px;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
}

/* YouTube embed preview card (inside connect modal) */
.yt-cm-preview-card {
  cursor: pointer;
  border-radius: 16px;
  border: 2px solid rgba(255, 0, 0, .3);
  background: rgba(255, 0, 0, .06);
  padding: 20px;
  transition: border-color .2s, background .2s;
}

.yt-cm-preview-card:hover {
  border-color: rgba(255, 0, 0, .7);
  background: rgba(255, 0, 0, .12)
}

.yt-cm-preview-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px
}

.yt-cm-preview-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff0000;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}

.yt-cm-preview-text strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px
}

.yt-cm-preview-text span {
  font-size: 12px;
  color: rgba(255, 255, 255, .45)
}

.yt-cm-preview-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, .3)
}

/* Reel card embed preview overlay */
.reel-yt-embed-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: radial-gradient(ellipse at center, rgba(255, 0, 0, .18) 0%, rgba(0, 0, 0, .85) 100%);
}

.reel-yt-embed-logo {
  font-size: 56px;
  filter: drop-shadow(0 0 20px #ff0000)
}

.reel-yt-embed-label {
  font-size: 16px;
  font-weight: 800;
  color: #fff
}

.reel-yt-embed-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, .5)
}

/* YouTube iframe fills vm-left exactly like the video element */
.vm-yt-iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  inset: 0;
  min-height: 400px;
  background: #000;
}

/* Ensure vm-left stretches to full modal height */
.video-modal-card {
  align-items: stretch
}

.vm-left {
  align-self: stretch;
  min-height: 400px
}

/* Tap-to-unmute hint overlay */
.reel-yt-tap-hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}

/* Spinning vinyl / audio icon */
@keyframes spin {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

/* ── Video Studio Mode Tabs (Lumora / Prezi) ─────────────────── */
.vs-mode-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}

.vs-mode-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.active-vsmt {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(109, 40, 217, 0.25));
  border-color: rgba(14, 165, 233, 0.5);
  color: #fff;
}

#preziPanel {
  display: flex;
}

/* ═══════════════════════════════════════════════════════════════════
   MY ORBIT — Career Intelligence Dashboard
   SPHERA CareerOrbit sidebar panel — zero LinkedIn resemblance
═══════════════════════════════════════════════════════════════════ */

/* Sidebar tab switcher */
/* ══ PRIMARY NAV (4 main tabs always visible) ══ */
.co-primary-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.co-nav-tab {
  padding: 10px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  border-bottom: 2px solid transparent;
  text-align: center;
}

.co-nav-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.04);
}

.co-nav-tab.active-conavtab {
  color: #a78bfa;
  border-bottom: 2px solid #7c3aed;
  background: rgba(124, 58, 237, 0.07);
}

/* ══ TOOLS PANEL ══ */
.co-tools-panel {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.co-tools-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background .2s;
}

.co-tools-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.co-tools-title {
  font-size: 11px;
  font-weight: 800;
  color: #a78bfa;
  letter-spacing: .5px;
}

.co-tools-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 7px;
  border-radius: 10px;
}

.co-tools-chevron {
  margin-left: auto;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform .25s;
}

.co-tools-chevron.rotated {
  transform: rotate(-180deg);
}

/* ══ TOOLS GRID ══ */
.co-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px 8px 10px;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: max-height .3s ease, opacity .25s;
}

.co-tools-grid.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
}

/* Section label spans full 4 columns */
.co-tools-section-label {
  grid-column: span 4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  padding: 6px 2px 2px;
  margin-top: 4px;
}

/* ══ TOOL TILES ══ */
.co-tool-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all .18s;
  text-align: center;
  min-width: 0;
}

.co-tool-tile:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.18);
}

.co-tool-tile:active {
  transform: scale(0.95);
}

.ctt-icon {
  font-size: 18px;
  line-height: 1;
  display: block;
}

.ctt-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
  display: block;
}

.co-tool-tile:hover .ctt-label {
  color: #c4b5fd;
}

/* Intelligence tier — subtle purple tint */
.co-tool-tile.co-tool-hi {
  background: rgba(109, 40, 217, 0.08);
  border-color: rgba(109, 40, 217, 0.2);
}

.co-tool-tile.co-tool-hi:hover {
  background: rgba(109, 40, 217, 0.22);
}

/* Specialist tier — teal tint */
.co-tool-tile.co-tool-spec {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.18);
}

.co-tool-tile.co-tool-spec:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.15);
}

/* Analysis tier — blue tint */
.co-tool-tile.co-tool-ana {
  background: rgba(14, 165, 233, 0.05);
  border-color: rgba(14, 165, 233, 0.15);
}

.co-tool-tile.co-tool-ana:hover {
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(14, 165, 233, 0.38);
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.14);
}

/* Scrollbar for grid */
.co-tools-grid::-webkit-scrollbar {
  width: 4px;
}

.co-tools-grid::-webkit-scrollbar-track {
  background: transparent;
}

.co-tools-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* Legacy co-tab-btn kept for any remaining references */
.co-tab-bar {
  display: none;
}

.co-tab-btn {
  display: none;
}

.co-tab-btn.active-cotab {
  display: none;
}

/* My Orbit panel container */
#myOrbitPanel {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 14px 12px;
  overflow-y: auto;
}

#myOrbitPanel.orbit-visible {
  display: flex;
}

/* ── Orbital Profile Card ──────────────────────────────── */
.orbit-profile-card {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(14, 165, 233, 0.06));
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 14px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.orbit-profile-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.25), transparent 70%);
  z-index: -1;
}

.orbit-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  border: 2px solid rgba(124, 58, 237, 0.4);
  margin-bottom: 10px;
}

.orbit-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.orbit-title {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  margin-bottom: 8px;
}

.orbit-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 88, 12, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 8px;
}

.orbit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.orbit-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #a78bfa;
}

/* ── Orbit Intelligence (stats) ────────────────────────── */
.orbit-intel-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
}

.orbit-intel-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 12px;
}

.orbit-stat-row {
  display: flex;
  gap: 8px;
}

.orbit-stat-item {
  flex: 1;
  background: rgba(124, 58, 237, 0.07);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: background .2s;
}

.orbit-stat-item:hover {
  background: rgba(124, 58, 237, 0.14);
}

.orbit-stat-icon {
  font-size: 16px;
  margin-bottom: 4px;
}

.orbit-stat-num {
  font-size: 16px;
  font-weight: 800;
  color: #a78bfa;
}

.orbit-stat-lbl {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
}

.orbit-intel-link {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: #7c3aed;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
}

.orbit-intel-link:hover {
  color: #a78bfa;
}

/* ── Orbital Signal (quick post) ───────────────────────── */
.orbit-signal-post {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
}

.orbit-post-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.6);
  border-radius: 10px;
  padding: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  resize: none;
  font-family: inherit;
  box-sizing: border-box;
}

.orbit-post-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.orbit-post-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.orbit-post-type-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}

.orbit-post-type-btn:hover {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}

.orbit-post-submit {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* ── Orbit Flash (career news) ──────────────────────────── */
.orbit-flash-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
}

.orbit-flash-story {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.orbit-flash-story:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.orbit-flash-headline {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.orbit-flash-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 3px;
}

.orbit-flash-story:hover .orbit-flash-headline {
  color: #a78bfa;
}

/* ── Orbit Chat (messaging preview) ────────────────────── */
.orbit-chat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
}

.orbit-chat-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.orbit-chat-search::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.orbit-chat-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.orbit-chat-tab {
  flex: 1;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  transition: all .2s;
}

.orbit-chat-tab.active-ochtab {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.35);
  color: #a78bfa;
}

.orbit-msg-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background .15s;
  border-radius: 6px;
}

.orbit-msg-item:last-child {
  border-bottom: none;
}

.orbit-msg-item:hover {
  background: rgba(124, 58, 237, 0.06);
  padding: 7px 4px;
}

.orbit-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.orbit-msg-name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.orbit-msg-preview {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.orbit-msg-date {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Shared section title ───────────────────────────────── */
.orbit-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 10px;
}

/* ── StarMap (saved roles) ─────────────────────────────── */
.orbit-starmap-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
}

.orbit-star-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.orbit-star-item:last-child {
  border-bottom: none;
}

.orbit-star-item:hover .orbit-star-title {
  color: #a78bfa;
}

.orbit-star-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.orbit-star-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.orbit-star-co {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.orbit-empty-state {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  padding: 10px 0;
}

/* ── Career Clusters ───────────────────────────────────── */
.orbit-clusters-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
}

.orbit-cluster-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.orbit-cluster-item:last-child {
  border-bottom: none;
}

.orbit-cluster-item:hover .orbit-cluster-name {
  color: #a78bfa;
}

.orbit-cluster-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.orbit-cluster-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  flex: 1;
}

.orbit-cluster-members {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

/* ── Orbit Signals (feeds) ─────────────────────────────── */
.orbit-signals-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
}

.orbit-sig-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.orbit-sig-item:last-child {
  border-bottom: none;
}

.orbit-sig-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.orbit-sig-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.orbit-sig-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.38);
}

.orbit-sig-badge {
  margin-left: auto;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
  border: 1px solid rgba(124, 58, 237, 0.3);
  flex-shrink: 0;
}

/* ── Career Launches (events) ──────────────────────────── */
.orbit-launches-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 8px;
}

.orbit-launch-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.orbit-launch-item:last-child {
  border-bottom: none;
}

.orbit-launch-date {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 8px;
  padding: 4px 8px;
  text-align: center;
  flex-shrink: 0;
}

.orbit-launch-month {
  font-size: 9px;
  font-weight: 700;
  color: #0ea5e9;
  text-transform: uppercase;
}

.orbit-launch-day {
  font-size: 16px;
  font-weight: 800;
  color: #38bdf8;
  line-height: 1;
}

.orbit-launch-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.orbit-launch-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.orbit-launch-item:hover .orbit-launch-name {
  color: #0ea5e9;
}

/* ── Orbital Pro Hub ─────────────────────────────── */
.orbit-pro-hub-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(124, 58, 237, 0.06));
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 14px;
  padding: 14px;
}

.orbit-pro-feature-card {
  min-width: 130px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
}

/* ── Browse by Goal ──────────────────────────────── */
.orbit-goal-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: background .2s, border-color .2s;
}

.orbit-goal-card:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.25);
}

.orbit-goal-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 4px;
}

.orbit-goal-name {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.orbit-goal-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.3;
}

.orbit-goal-arrow {
  position: absolute;
  top: 10px;
  right: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
}

/* ── Orbital Pro Perks ───────────────────────────── */
.orbit-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.orbit-perk-item:last-child {
  border-bottom: none;
}

.orbit-perk-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* ── Orbital Pro Plan buttons ────────────────────── */
.orbit-plan-btn {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
}

.orbit-plan-btn:hover {
  background: rgba(124, 58, 237, 0.1);
  color: #a78bfa;
  border-color: rgba(124, 58, 237, 0.25);
}

/* ── Orbit Network Hub ───────────────────────────── */
.orbit-nw-tab {
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.orbit-nw-tab.active-orbnwtab {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.35);
  color: #a78bfa;
}

.orbit-nw-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
}

.orbit-nw-stat:hover {
  background: rgba(124, 58, 237, 0.08);
}

.orbit-nw-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.orbit-nw-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
}

.orbit-nw-num {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Incoming Orbit Requests ─────────────────────── */
.orbit-req-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.orbit-req-item:last-child {
  border-bottom: none;
}

.orbit-req-ignore {
  padding: 4px 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}

.orbit-req-ignore:hover {
  background: rgba(255, 255, 255, 0.06);
}

.orbit-req-accept {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.4);
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}

.orbit-req-accept:hover {
  background: rgba(124, 58, 237, 0.35);
}

/* ── Orbits In Your Atmosphere ───────────────────── */
.orbit-suggest-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: background .2s;
}

.orbit-suggest-card:hover {
  background: rgba(124, 58, 237, 0.06);
}

.orbit-suggest-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
}

.orbit-suggest-dismiss:hover {
  color: rgba(255, 255, 255, 0.7);
}

.orbit-suggest-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.orbit-suggest-name {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.orbit-suggest-title {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.3;
  margin-bottom: 4px;
}

.orbit-suggest-school {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 8px;
}

.orbit-suggest-connect {
  width: 100%;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 20px;
  padding: 5px 0;
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.orbit-suggest-connect:hover {
  background: rgba(124, 58, 237, 0.3);
}

/* ── Orbit Career Intel / Trajectories ───────────── */
.orbit-trajectory-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.orbit-trajectory-item:last-of-type {
  border-bottom: none;
}

.orbit-traj-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* ============================================================
   SPHERA SETTINGS — Two-pane LinkedIn-style layout
   Zero LinkedIn resemblance · Full SPHERA native design
============================================================ */
.ss-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(14px);
  padding: 20px;
}

.ss-modal {
  background: #0c0018;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
  display: flex;
  width: min(900px, 95vw);
  height: min(680px, 90vh);
  overflow: hidden;
  position: relative;
}

/* ── Left sidebar ─────────────────────────────────── */
.ss-sidebar {
  width: 220px;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.02);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ss-sidebar-header {
  padding: 20px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ss-sidebar-title {
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(135deg, #a78bfa, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ss-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: none;
}

.ss-nav-item {
  width: 100%;
  text-align: left;
  padding: 11px 18px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all .15s;
}

.ss-nav-item:hover {
  background: rgba(124, 58, 237, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.ss-nav-item.ss-nav-active {
  background: rgba(124, 58, 237, 0.12);
  color: #a78bfa;
  border-left-color: #7c3aed;
}

.ss-nav-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.ss-sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-footer-btn {
  width: 100%;
  padding: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
}

.ss-footer-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

/* ── Right content panel ──────────────────────────── */
.ss-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.3) transparent;
}

/* Section title */
.ss-section-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 24px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ss-section-title:first-child {
  margin-top: 0;
}

/* Settings group card */
.ss-group {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* Individual row */
.ss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background .15s;
  min-height: 46px;
}

.ss-row:last-child {
  border-bottom: none;
}

.ss-row:hover {
  background: rgba(124, 58, 237, 0.06);
}

.ss-arrow {
  cursor: pointer;
}

.ss-arrow span:last-child {
  color: rgba(255, 255, 255, 0.35);
  font-size: 16px;
}

.ss-arrow:hover span:last-child {
  color: #a78bfa;
}

/* Value text next to label */
.ss-val {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-left: auto;
  margin-right: 8px;
}

.ss-val-off {
  color: rgba(239, 68, 68, 0.7);
}

/* Toggle row (value + switch) */
.ss-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* CSS Toggle switch */
.ss-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 23px;
  flex-shrink: 0;
}

.ss-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ss-slider {
  position: absolute;
  inset: 0;
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background .3s;
}

.ss-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  transition: transform .3s, box-shadow .3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

.ss-switch input:checked+.ss-slider {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
}

.ss-switch input:checked+.ss-slider::after {
  transform: translateX(19px);
}

/* Close button */
.ss-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ss-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

@media (max-width: 680px) {
  .ss-sidebar {
    display: none;
  }

  .ss-modal {
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }
}

/* ============================================================
   TOP-NAV LAUNCHPAD BUTTON
============================================================ */
.tn-launchpad-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.2), rgba(37, 99, 235, 0.2));
  border: 1px solid rgba(109, 40, 217, 0.5);
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 30px;
  transition: all 0.25s;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(109, 40, 217, 0.3);
  letter-spacing: 0.3px;
}

.tn-launchpad-btn:hover {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.4), rgba(37, 99, 235, 0.4));
  border-color: var(--violet2);
  color: #fff;
  box-shadow: 0 0 24px rgba(109, 40, 217, 0.6);
  transform: translateY(-1px);
}

.tn-launchpad-btn.lp-active {
  background: var(--grad2);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 20px var(--glow);
}

.lp-btn-icon {
  font-size: 16px;
  line-height: 1;
}

.lp-btn-label {
  font-size: 13px;
  font-weight: 700;
}

/* ============================================================
   LAUNCHPAD OVERLAY
============================================================ */
.launchpad-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.launchpad-overlay.lp-open {
  pointer-events: all;
  opacity: 1;
}

/* Frosted backdrop */
.lp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 20, 0.82);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

/* Panel */
.lp-panel {
  position: relative;
  z-index: 1;
  width: min(860px, 96vw);
  max-height: calc(100vh - 40px);
  margin-top: 20px;
  background: rgba(17, 17, 40, 0.92);
  border: 1px solid rgba(109, 40, 217, 0.3);
  border-radius: 24px;
  padding: 24px 28px 32px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: scale(0.95) translateY(-10px);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lp-open .lp-panel {
  transform: scale(1) translateY(0);
}

/* Header */
.lp-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.lp-title {
  font-size: 18px;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.lp-search {
  flex: 1;
  padding: 9px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

.lp-search:focus {
  border-color: var(--violet2);
  background: rgba(109, 40, 217, 0.08);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15);
}

.lp-search::placeholder {
  color: var(--muted);
}

.lp-close {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.lp-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Section labels */
.lp-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Grid */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

/* Tiles */
.lp-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  font-family: 'Outfit', sans-serif;
  text-align: center;
  min-height: 90px;
}

.lp-tile:hover {
  background: rgba(109, 40, 217, 0.18);
  border-color: rgba(109, 40, 217, 0.5);
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 8px 32px rgba(109, 40, 217, 0.35);
}

.lp-tile:active {
  transform: scale(0.97);
}

/* Active tile (current page) */
.lp-tile.lp-tile-active {
  background: rgba(109, 40, 217, 0.25);
  border-color: rgba(109, 40, 217, 0.6);
  box-shadow: 0 0 20px rgba(109, 40, 217, 0.4);
}

.lp-tile-icon {
  font-size: 28px;
  line-height: 1;
  display: block;
}

.lp-tile-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}

.lp-tile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--grad2);
  color: #fff;
  text-transform: uppercase;
}

.lp-tile-badge.live {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  animation: livePulse 1.5s infinite;
}

/* No results */
.lp-no-results {
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-size: 14px;
  grid-column: 1 / -1;
}

/* Hidden tiles during search */
.lp-tile.lp-hidden {
  display: none;
}

@media (max-width: 560px) {
  .lp-panel {
    padding: 18px 14px 24px;
  }

  .lp-grid {
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 8px;
  }

  .lp-tile {
    padding: 12px 8px 10px;
    min-height: 76px;
    border-radius: 12px;
  }

  .lp-tile-icon {
    font-size: 22px;
  }

  .lp-tile-label {
    font-size: 10px;
  }
}

/* ============================================================
   SIDEBAR FOCUSED MODE (after launchpad navigation)
   — hides all nav items except the currently active one
============================================================ */
/* Hide all non-active nav items, dividers, and sections */
.left-sidebar.sb-focused .lnav:not(.active-lnav) {
  display: none;
}

.left-sidebar.sb-focused .ls-divider {
  display: none;
}

.left-sidebar.sb-focused .ls-section-label {
  display: none;
}

.left-sidebar.sb-focused .channel-item {
  display: none;
}

.left-sidebar.sb-focused .add-channel-btn {
  display: none;
}

.left-sidebar.sb-focused .cp-toggles {
  display: none;
}

.left-sidebar.sb-focused .ls-cross-post .ls-section-label {
  display: none;
}

/* Make the active item stand out with a glow + larger size */
.left-sidebar.sb-focused .active-lnav {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.25), rgba(37, 99, 235, 0.2));
  border: 1px solid rgba(109, 40, 217, 0.5);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(109, 40, 217, 0.35);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text) !important;
  margin: 8px;
}

.left-sidebar.sb-focused .active-lnav .lnav-icon {
  font-size: 20px;
}

/* Hint bar at top of sidebar in focused mode */
.left-sidebar.sb-focused .ls-nav::before {
  content: '⊞ tap Apps to browse all';
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted2);
  text-transform: uppercase;
  text-align: center;
  padding: 10px 12px 6px;
  cursor: pointer;
}

/* Reset focused mode when sidebar toggle (☰) is clicked — handled via JS */

/* ============================================================
   SPHERECHAT — Full Messaging System
   Premium iMessage/Instagram DM-inspired design
============================================================ */

/* ── 3-Column Layout ─────────────────────────────────────── */
#pageMessages {
  padding: 0;
  overflow: hidden;
  position: relative;
}

#pageMessages.active-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sc-layout {
  flex: 1;
  min-height: 0;
}

.sc-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

/* ── Left: Conversation List ─────────────────────────────── */
.sc-left {
  width: 320px;
  min-width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
}

.sc-left-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}

.sc-brand {
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(135deg, #a78bfa, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sc-new-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.3);
  color: #a78bfa;
  font-size: 15px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-new-btn:hover {
  background: rgba(124, 58, 237, 0.3);
  transform: scale(1.08);
}

/* Search */
.sc-search-wrap {
  position: relative;
  margin: 0 12px 10px;
}

.sc-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.35);
  font-size: 14px;
  pointer-events: none;
}

.sc-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 8px 12px 8px 32px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  box-sizing: border-box;
  transition: all .2s;
}

.sc-search-input:focus {
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(124, 58, 237, 0.08);
  outline: none;
}

.sc-search-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Tabs */
.sc-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 10px;
  flex-shrink: 0;
}

.sc-tab {
  flex: 1;
  padding: 5px 4px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}

.sc-tab:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

.sc-tab.active-sctab {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.4);
  color: #a78bfa;
}

.sc-tab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 20px;
  min-width: 14px;
  text-align: center;
}

/* Conversation list */
.sc-convo-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.2) transparent;
}

.sc-convo-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  position: relative;
}

.sc-convo-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sc-convo-item.sc-active {
  background: rgba(124, 58, 237, 0.12);
}

.sc-convo-item.sc-active .sc-convo-name {
  color: #a78bfa;
}

/* Avatar in convo list */
.sc-convo-av-wrap {
  position: relative;
  flex-shrink: 0;
}

.sc-convo-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.sc-convo-av-group {
  width: 44px;
  height: 44px;
  position: relative;
  flex-shrink: 0;
}

.sc-group-av-a {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  border: 2px solid rgba(13, 13, 24, 1);
}

.sc-group-av-b {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  border: 2px solid rgba(13, 13, 24, 1);
}

.sc-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0d0d18;
}

/* Convo body */
.sc-convo-body {
  flex: 1;
  min-width: 0;
}

.sc-convo-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.sc-convo-preview {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-convo-preview.sc-unread-preview {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.sc-convo-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.sc-convo-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.sc-unread-count {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ── Center: Chat Thread ─────────────────────────────────── */
.sc-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Empty state */
.sc-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 40px;
}

.sc-empty-orb {
  font-size: 52px;
  margin-bottom: 8px;
  filter: grayscale(0.3);
}

.sc-empty-title {
  font-size: 20px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.75);
}

.sc-empty-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  max-width: 220px;
  line-height: 1.5;
}

.sc-start-btn {
  margin-top: 8px;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  border: none;
  border-radius: 22px;
  padding: 10px 24px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}

.sc-start-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Chat header */
.sc-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.sc-header-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.sc-header-info {
  flex: 1;
  min-width: 0;
}

.sc-header-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.sc-header-status {
  font-size: 11px;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sc-header-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

.sc-header-away {
  color: rgba(255, 255, 255, 0.35);
}

.sc-header-actions {
  display: flex;
  gap: 6px;
}

.sc-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.sc-action-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
  border-color: rgba(124, 58, 237, 0.4);
}

/* Message scroll area */
.sc-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.2) transparent;
}

/* Date divider */
.sc-date-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 8px;
  flex-shrink: 0;
}

.sc-date-divider::before,
.sc-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.sc-date-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Message row */
.sc-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

.sc-msg-row.sc-out {
  flex-direction: row-reverse;
}

/* Bubble avatar (incoming only) */
.sc-bubble-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

/* Bubble */
.sc-bubble {
  max-width: 68%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.45;
  position: relative;
  word-break: break-word;
  transition: transform .15s;
}

.sc-bubble:hover {
  transform: scale(1.01);
}

/* Incoming bubble */
.sc-bubble.sc-in {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px 18px 18px 18px;
  color: rgba(255, 255, 255, 0.88);
}

/* Outgoing bubble */
.sc-bubble.sc-out {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border-radius: 18px 18px 4px 18px;
  color: #fff;
}

/* Image bubble */
.sc-img-bubble {
  padding: 4px;
  overflow: hidden;
  max-width: 200px;
  cursor: pointer;
}

.sc-img-bubble img {
  width: 100%;
  border-radius: 14px;
  display: block;
  transition: opacity .2s;
}

.sc-img-bubble img:hover {
  opacity: 0.85;
}

/* Voice bubble */
.sc-voice-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  min-width: 180px;
}

.sc-voice-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}

.sc-voice-play:hover {
  background: rgba(255, 255, 255, 0.35);
}

.sc-voice-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.sc-wave-bar {
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
  transition: height .3s;
}

.sc-voice-dur {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

/* Read receipts + time */
.sc-msg-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 0 4px;
  justify-content: flex-end;
}

.sc-msg-time {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
}

.sc-read-receipt {
  font-size: 10px;
  color: #60a5fa;
}

/* Reactions under bubble */
.sc-reactions {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.sc-reaction-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2px 7px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all .2s;
}

.sc-reaction-pill:hover {
  background: rgba(124, 58, 237, 0.25);
  border-color: rgba(124, 58, 237, 0.5);
}

.sc-reaction-pill span {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
}

/* Reaction hover bar */
.sc-reaction-bar {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 40, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 4px 8px;
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  white-space: nowrap;
  z-index: 10;
}

.sc-bubble:hover .sc-reaction-bar {
  opacity: 1;
  pointer-events: all;
}

.sc-react-emoji {
  font-size: 18px;
  cursor: pointer;
  padding: 2px;
  transition: transform .2s;
}

.sc-react-emoji:hover {
  transform: scale(1.3);
}

/* Typing indicator */
.sc-typing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  flex-shrink: 0;
}

.sc-typing-bubble {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px 18px 18px 18px;
  padding: 10px 16px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.sc-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: scTypeBounce 1.2s infinite;
}

.sc-typing-dot:nth-child(2) {
  animation-delay: .2s;
}

.sc-typing-dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes scTypeBounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-6px);
  }
}

/* ── Composer Bar ─────────────────────────────────────────── */
.sc-composer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 12px 16px 16px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
}

.sc-composer-left {
  display: flex;
  gap: 4px;
}

.sc-composer-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}

.sc-composer-icon-btn:hover {
  color: #a78bfa;
  background: rgba(124, 58, 237, 0.15);
}

.sc-composer-icon-btn.sc-emoji-active {
  color: #f59e0b;
}

.sc-input-wrap {
  flex: 1;
  position: relative;
}

.sc-composer-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  padding: 13px 18px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  box-sizing: border-box;
  min-height: 52px;
  max-height: 200px;
  transition: all .25s;
  line-height: 1.5;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.3) transparent;
}

.sc-composer-input:focus {
  border-color: rgba(124, 58, 237, 0.65);
  background: rgba(124, 58, 237, 0.07);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12), 0 4px 24px rgba(124, 58, 237, 0.15);
}

.sc-composer-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}

.sc-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);
}

.sc-send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.65);
}

.sc-send-btn:active {
  transform: scale(0.94);
}

/* ── Emoji Picker ─────────────────────────────────────────── */
.sc-emoji-picker {
  position: absolute;
  bottom: 60px;
  left: 10px;
  z-index: 5000;
  background: rgba(18, 18, 36, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
  min-width: 300px;
  transition: opacity .2s, transform .2s;
}

.sc-emoji-picker.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.sc-emoji-picker:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

.sc-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.sc-emoji-btn {
  font-size: 22px;
  cursor: pointer;
  text-align: center;
  padding: 4px;
  border-radius: 8px;
  transition: background .15s, transform .15s;
  border: none;
  background: transparent;
}

.sc-emoji-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  transform: scale(1.2);
}


/* ── Right Info Panel ─────────────────────────────────────── */
.sc-right {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .3s ease, opacity .3s ease;
  background: rgba(255, 255, 255, 0.015);
}

.sc-right.hidden {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.sc-right-inner {
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sc-right-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sc-right-av {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.4);
}

.sc-right-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.sc-right-handle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.sc-right-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.sc-right-action-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #a78bfa;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.sc-right-action-btn:hover {
  background: rgba(124, 58, 237, 0.25);
}

.sc-right-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 8px;
}

.sc-shared-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.sc-shared-thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(124, 58, 237, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: opacity .2s;
}

.sc-shared-thumb:hover {
  opacity: 0.75;
}

.sc-pinned-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.sc-pinned-icon {
  font-size: 14px;
  flex-shrink: 0;
  color: #f59e0b;
}

.sc-pinned-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

/* ── New Conversation Modal ───────────────────────────────── */
.sc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.sc-modal-overlay.hidden {
  display: none;
}

.sc-new-modal {
  background: rgba(16, 16, 36, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  width: min(420px, 94vw);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
}

.sc-nmodal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sc-nmodal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.sc-nmodal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.sc-nmodal-search-wrap {
  position: relative;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-nmodal-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 9px 12px 9px 32px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  box-sizing: border-box;
}

.sc-nmodal-search:focus {
  border-color: rgba(124, 58, 237, 0.5);
  outline: none;
}

.sc-nmodal-search::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.sc-nmodal-results {
  max-height: 320px;
  overflow-y: auto;
}

.sc-nmodal-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .15s;
}

.sc-nmodal-result:hover {
  background: rgba(124, 58, 237, 0.1);
}

.sc-nmodal-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.sc-nmodal-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.sc-nmodal-handle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* Message slide-in animation */
@keyframes scMsgSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   SPHERECHAT AI FEATURES
============================================================ */

/* ── 1. Smart Reply Chips ──────────────────────────────────── */
.sc-smart-replies {
  display: flex;
  gap: 6px;
  padding: 8px 18px 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
  animation: scMsgSlideIn .25s ease;
}

.sc-smart-chip {
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.sc-smart-chip:hover {
  background: rgba(124, 58, 237, 0.28);
  border-color: rgba(124, 58, 237, 0.6);
  color: #fff;
  transform: translateY(-1px);
}

/* ── 2. Tone Rewriter ──────────────────────────────────────── */
.sc-tone-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: rgba(14, 14, 32, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px 14px 0 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  backdrop-filter: blur(16px);
  z-index: 100;
  animation: scMsgSlideIn .2s ease;
}

.sc-tone-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.sc-tone-btn {
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.sc-tone-btn:hover {
  background: rgba(124, 58, 237, 0.25);
  color: #a78bfa;
  border-color: rgba(124, 58, 237, 0.4);
}

.sc-tone-btn.sc-generating {
  opacity: 0.5;
  pointer-events: none;
}

.sc-tone-close {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}

.sc-tone-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* ── 3. Summarizer Modal ──────────────────────────────────── */
.sc-summary-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(14px);
}

.sc-summary-modal.hidden {
  display: none;
}

.sc-summary-box {
  background: rgba(14, 14, 32, 0.98);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 20px;
  width: min(480px, 94vw);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
  animation: scMsgSlideIn .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sc-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sc-summary-title {
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #a78bfa, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sc-summary-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.sc-summary-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.sc-summary-body {
  padding: 20px;
  min-height: 100px;
}

.sc-summary-loading {
  display: flex;
  gap: 6px;
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  padding: 10px 0;
}

.sc-summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a78bfa;
  animation: scTypeBounce 1.2s infinite;
}

.sc-summary-dot:nth-child(2) {
  animation-delay: .2s;
}

.sc-summary-dot:nth-child(3) {
  animation-delay: .4s;
}

.sc-summary-bullet {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  animation: scMsgSlideIn .2s ease;
}

.sc-summary-bullet:last-child {
  border-bottom: none;
}

.sc-summary-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  margin-top: 1px;
}

.sc-summary-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}

/* ── 4. Task Extraction Banner ──────────────────────────────── */
.sc-task-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(245, 158, 11, 0.08);
  border-top: 1px solid rgba(245, 158, 11, 0.2);
  flex-shrink: 0;
  animation: scMsgSlideIn .25s ease;
}

.sc-task-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.sc-task-text {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.sc-task-text strong {
  color: #fbbf24;
  font-weight: 700;
}

.sc-task-add-btn {
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.sc-task-add-btn:hover {
  background: rgba(245, 158, 11, 0.3);
}

.sc-task-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}

.sc-task-dismiss:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* ── 5. @AI Bot Bubble ──────────────────────────────────────── */
.sc-ai-bubble-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.4);
}

.sc-ai-bubble {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(14, 165, 233, 0.1));
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 4px 18px 18px 18px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  max-width: 80%;
}

.sc-ai-label {
  font-size: 9px;
  font-weight: 800;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.sc-ai-thinking {
  display: flex;
  gap: 4px;
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  padding: 2px 0;
}

/* AI header action button */
.sc-ai-header-btn {
  padding: 5px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(14, 165, 233, 0.15));
  border: 1px solid rgba(124, 58, 237, 0.35);
  color: #a78bfa;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.sc-ai-header-btn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(14, 165, 233, 0.3));
  color: #fff;
  transform: translateY(-1px);
}

/* Rewrite btn in composer */
.sc-rewrite-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}

.sc-rewrite-btn:hover {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.sc-rewrite-btn.sc-rewrite-active {
  color: #f59e0b;
}

/* Reminder dot in convo sidebar */
.sc-reminder-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  flex-shrink: 0;
}



/* ============================================================
   SPHERECHAT — TIME CAPSULE / MEMORY VAULT / EMOTIONAL AI
============================================================ */

/* ── Feature 1: Send to Future — Seal Sheet ────────────────── */
.sc-seal-sheet {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: rgba(10, 8, 25, 0.98);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 18px 18px 0 0;
  padding: 16px 18px;
  backdrop-filter: blur(20px);
  z-index: 200;
  animation: scMsgSlideIn .22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sc-seal-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sc-seal-title span {
  font-size: 18px;
}

.sc-seal-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.sc-seal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}

.sc-seal-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.sc-seal-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 10px;
  padding: 8px 12px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
  color-scheme: dark;
}

.sc-seal-input:focus {
  border-color: rgba(124, 58, 237, 0.6);
  background: rgba(124, 58, 237, 0.08);
}

.sc-seal-btn {
  padding: 9px 20px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.sc-seal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.5);
}

.sc-seal-cancel {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: color .2s;
  padding: 4px;
}

.sc-seal-cancel:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Sealed bubble in thread */
.sc-sealed-bubble {
  border-radius: 14px !important;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(124, 58, 237, 0.1)) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px !important;
  cursor: pointer;
  transition: all .2s;
}

.sc-sealed-bubble:hover {
  background: rgba(99, 102, 241, 0.2) !important;
}

.sc-sealed-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.sc-sealed-info {
  flex: 1;
  min-width: 0;
}

.sc-sealed-label {
  font-size: 10px;
  font-weight: 800;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}

.sc-sealed-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-sealed-date {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.sc-countdown-badge {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  color: #a78bfa;
  white-space: nowrap;
}

/* Composer seal button */
.sc-seal-btn-composer {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}

.sc-seal-btn-composer:hover {
  color: #a78bfa;
  background: rgba(124, 58, 237, 0.15);
}

/* ── Feature 2: Memory Vault ────────────────────────────────── */
.sc-vault-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(109, 40, 217, 0.1);
  border-bottom: 1px solid rgba(109, 40, 217, 0.25);
  flex-shrink: 0;
  animation: scMsgSlideIn .25s ease;
}

.sc-vault-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.sc-vault-text {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.sc-vault-text strong {
  color: #c4b5fd;
  font-weight: 700;
}

.sc-vault-cta {
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(109, 40, 217, 0.25);
  border: 1px solid rgba(109, 40, 217, 0.4);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.sc-vault-cta:hover {
  background: rgba(109, 40, 217, 0.45);
  color: #fff;
}

.sc-vault-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Vaulted convo badge */
.sc-convo-vault-badge {
  font-size: 9px;
  background: rgba(109, 40, 217, 0.25);
  border: 1px solid rgba(109, 40, 217, 0.35);
  border-radius: 20px;
  padding: 1px 6px;
  color: #c4b5fd;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 4px;
}

/* Vault anniversary notification */
.sc-vault-anniversary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.15), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(109, 40, 217, 0.3);
  border-radius: 14px;
  animation: scMsgSlideIn .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sc-vault-anni-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.sc-vault-anni-text {
  flex: 1;
}

.sc-vault-anni-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.sc-vault-anni-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

/* Memory Vault header button */
.sc-vault-header-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}

.sc-vault-header-btn:hover {
  color: #c4b5fd;
  background: rgba(109, 40, 217, 0.18);
}

.sc-vault-header-btn.sc-vaulted {
  color: #c4b5fd;
}

/* ── Feature 3: Emotional AI banner ──────────────────────────── */
.sc-emotional-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  flex-shrink: 0;
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.08), rgba(124, 58, 237, 0.08));
  border-top: 1px solid;
  border-image: linear-gradient(90deg, rgba(236, 72, 153, 0.35), rgba(124, 58, 237, 0.35)) 1;
  animation: scMsgSlideIn .3s ease;
}

.sc-emotional-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.sc-emotional-text {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

.sc-emotional-text strong {
  color: #f9a8d4;
  font-weight: 700;
}

.sc-emotional-save {
  padding: 5px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(124, 58, 237, 0.2));
  border: 1px solid rgba(236, 72, 153, 0.35);
  color: #f9a8d4;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.sc-emotional-save:hover {
  background: rgba(236, 72, 153, 0.35);
  color: #fff;
}

.sc-emotional-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ============================================================
   SPHERECHAT — LOCATION LOCK & EVENT TRIGGER SEALS
============================================================ */

/* ── Tabbed Seal Sheet ─────────────────────────────────────── */
.sc-seal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 3px;
}

.sc-seal-tab {
  flex: 1;
  padding: 6px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}

.sc-seal-tab.active {
  background: rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.sc-seal-tab:hover:not(.active) {
  color: rgba(255, 255, 255, 0.7);
}

.sc-seal-tab-panel {
  display: none;
}

.sc-seal-tab-panel.active {
  display: block;
}

/* ── Location seal states ──────────────────────────────────── */
.sc-geo-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: 12px;
  transition: all .3s;
}

.sc-geo-status.idle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.sc-geo-status.loading {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #a5b4fc;
}

.sc-geo-status.captured {
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.3);
  color: #6ee7b7;
}

.sc-geo-status.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

.sc-geo-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.sc-geo-text {
  flex: 1;
  line-height: 1.4;
}

.sc-geo-text strong {
  display: block;
  font-weight: 700;
  margin-bottom: 1px;
}

.sc-geo-capture-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  transition: all .2s;
  white-space: nowrap;
}

.sc-geo-capture-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.sc-geo-capture-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Radius selector */
.sc-geo-radius {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.sc-geo-radius select {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  padding: 4px 8px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  color-scheme: dark;
}

/* Location sealed bubble badge */
.sc-sealed-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #6ee7b7;
  margin-top: 3px;
}

/* ── Event Trigger seals ───────────────────────────────────── */
.sc-event-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.sc-event-tile {
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.08);
  transition: all .2s;
  text-align: left;
}

.sc-event-tile:hover {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.08);
}

.sc-event-tile.selected {
  border-color: rgba(124, 58, 237, 0.7);
  background: rgba(124, 58, 237, 0.15);
}

.sc-event-tile-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.sc-event-tile-name {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1px;
}

.sc-event-tile-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.3;
}

/* Event config input area */
.sc-event-config {
  margin-top: 8px;
  animation: scMsgSlideIn .18s ease;
}

.sc-event-config-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 5px;
}

/* ── Extended sealed bubble extras ───────────────────────────── */
.sc-sealed-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 10px;
  color: #fbbf24;
  font-weight: 700;
  margin-top: 3px;
}

.sc-unlock-prompt {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

.sc-unlock-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px 10px;
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.sc-unlock-input:focus {
  border-color: rgba(124, 58, 237, 0.5);
}

.sc-unlock-try-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================
   SPHERECHAT — PRIVACY SHIELD
============================================================ */

/* Incognito mode indicator */
.sc-incognito-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(17, 24, 39, 0.95);
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  flex-shrink: 0;
  animation: scMsgSlideIn .2s ease;
}

.sc-incognito-icon {
  font-size: 16px;
}

.sc-incognito-text {
  flex: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.sc-incognito-text strong {
  color: #a78bfa;
}

.sc-incognito-toggle {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.15);
  color: #a78bfa;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
}

.sc-incognito-toggle:hover {
  background: rgba(99, 102, 241, 0.3);
}

.sc-incognito-active {
  background: rgba(15, 10, 30, 0.98) !important;
}

.sc-header-incognito {
  position: relative;
}

.sc-header-incognito::after {
  content: '👁️';
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 10px;
  background: #7c3aed;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
}

/* Self-destruct */
.sc-destruct-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.sc-destruct-btn:hover {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
}

.sc-destruct-btn.active {
  color: #f87171;
}

.sc-destruct-panel {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 220px;
  background: rgba(10, 8, 25, 0.98);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 14px;
  padding: 14px;
  z-index: 200;
  animation: scMsgSlideIn .2s ease;
  backdrop-filter: blur(20px);
}

.sc-destruct-label {
  font-size: 11px;
  font-weight: 800;
  color: #fca5a5;
  margin-bottom: 10px;
}

.sc-destruct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.sc-destruct-opt {
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
}

.sc-destruct-opt:hover,
.sc-destruct-opt.selected {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.sc-destruct-off {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
}

/* Self-destruct bubble countdown */
.sc-destruct-bubble {
  position: relative;
}

.sc-destruct-countdown {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: pulse 1s infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.15)
  }
}

.sc-bubble-dissolve {
  animation: dissolve .6s ease forwards !important;
}

@keyframes dissolve {
  0% {
    opacity: 1;
    transform: scale(1)
  }

  100% {
    opacity: 0;
    transform: scale(0.8)
  }
}

/* Auto-blur */
.sc-blurred {
  filter: blur(6px);
  cursor: pointer;
  user-select: none;
  transition: filter .3s;
}

.sc-blurred:hover {
  filter: blur(2px);
}

.sc-blurred.revealed {
  filter: none !important;
}

.sc-blur-hint {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  margin-top: 3px;
  font-style: italic;
}

/* Visibility/screenshot warning */
.sc-privacy-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(239, 68, 68, 0.95);
  color: #fff;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 800;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: scMsgSlideIn .3s ease;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4);
  backdrop-filter: blur(10px);
}

/* Scam detection banner */
.sc-scam-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(239, 68, 68, 0.1);
  border-top: 1px solid rgba(239, 68, 68, 0.25);
  flex-shrink: 0;
  animation: scMsgSlideIn .25s ease;
}

.sc-scam-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.sc-scam-text {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.sc-scam-text strong {
  color: #fca5a5;
  font-weight: 800;
}

.sc-scam-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  cursor: pointer;
}

/* ============================================================
   SPHERECHAT — CONTACT INTELLIGENCE
============================================================ */

/* Reply nudge badge on convo item */
.sc-nudge-badge {
  font-size: 9px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 20px;
  padding: 2px 7px;
  color: #fbbf24;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Follow-up pin */
.sc-followup-pin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sc-followup-pin:hover {
  color: #fbbf24;
}

.sc-followup-pin.pinned {
  color: #fbbf24;
}

/* Heatmap panel in right sidebar */
.sc-heatmap-panel {
  padding: 14px 16px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-heatmap-title {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.sc-heatmap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.sc-heatmap-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.sc-heatmap-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-heatmap-bar-wrap {
  width: 70px;
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  flex-shrink: 0;
}

.sc-heatmap-bar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #7c3aed, #6366f1);
}

.sc-heatmap-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

/* Reply nudge floating strip */
.sc-reply-nudge-strip {
  padding: 6px 14px;
  background: rgba(245, 158, 11, 0.08);
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #fbbf24;
  animation: scMsgSlideIn .25s ease;
}

/* ============================================================
   SPHERECHAT — WORK MODE
============================================================ */

/* Bubble right-click context menu */
.sc-bubble-menu {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  background: rgba(15, 12, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 6px;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  animation: scMsgSlideIn .15s ease;
}

.sc-bubble-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.sc-bubble-menu-item:hover {
  background: rgba(124, 58, 237, 0.15);
  color: #fff;
}

.sc-bubble-menu-item .mi-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sc-bubble-menu-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 0;
}

/* Task card in chat */
.sc-task-card {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0;
  cursor: pointer;
  transition: all .2s;
}

.sc-task-card:hover {
  background: rgba(99, 102, 241, 0.14);
}

.sc-task-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.sc-task-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex: 1;
}

.sc-task-card-badge {
  font-size: 9px;
  background: rgba(99, 102, 241, 0.25);
  border-radius: 20px;
  padding: 2px 8px;
  color: #a5b4fc;
  font-weight: 800;
  white-space: nowrap;
}

.sc-task-card-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

.sc-task-card-done {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Calendar event card in chat */
.sc-cal-card {
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0;
}

.sc-cal-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.sc-cal-card-icon {
  font-size: 20px;
}

.sc-cal-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.sc-cal-card-date {
  font-size: 11px;
  color: #6ee7b7;
}

.sc-cal-add-btn {
  margin-top: 8px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(5, 150, 105, 0.4);
  background: rgba(5, 150, 105, 0.15);
  color: #6ee7b7;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
}

.sc-cal-add-btn:hover {
  background: rgba(5, 150, 105, 0.3);
}

/* Shared to-do list thread item */
.sc-todo-list {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  margin: 6px 0;
  min-width: 240px;
}

.sc-todo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sc-todo-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex: 1;
}

.sc-todo-add-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.sc-todo-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 10px;
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.sc-todo-input:focus {
  border-color: rgba(124, 58, 237, 0.4);
}

.sc-todo-add-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.sc-todo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sc-todo-item:last-of-type {
  border-bottom: none;
}

.sc-todo-check {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #7c3aed;
  flex-shrink: 0;
}

.sc-todo-item-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  flex: 1;
}

.sc-todo-item-text.done {
  text-decoration: line-through;
  opacity: 0.4;
}

/* Meeting mode */
.sc-meeting-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(124, 58, 237, 0.1));
  border-bottom: 1px solid rgba(239, 68, 68, 0.25);
  flex-shrink: 0;
  animation: scMsgSlideIn .25s ease;
}

.sc-meeting-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  animation: pulse 1s infinite;
  flex-shrink: 0;
}

.sc-meeting-text {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.sc-meeting-text strong {
  color: #fca5a5;
}

.sc-meeting-end {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
}

.sc-meeting-end:hover {
  background: rgba(239, 68, 68, 0.35);
}

/* Meeting recap card */
.sc-meeting-recap {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  padding: 16px;
  margin: 8px 0;
}

.sc-meeting-recap-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sc-meeting-recap-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

.sc-meeting-recap-section {
  margin-bottom: 8px;
}

.sc-meeting-recap-label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.sc-meeting-recap-item {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  padding: 2px 0;
  padding-left: 12px;
  position: relative;
}

.sc-meeting-recap-item::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #f87171;
}

/* Voice transcript */
.sc-transcript-bubble {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  font-style: italic;
}

.sc-transcript-label {
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}

/* ============================================================
   ROUND 1 — STREAKS, REACTIONS, MEDIA SEARCH
============================================================ */

/* Chat Streaks */
.sc-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(239, 68, 68, 0.15));
  border: 1px solid rgba(251, 146, 60, 0.35);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #fb923c;
}

.sc-streak-flame {
  font-size: 14px;
  animation: flicker 1.5s ease-in-out infinite;
}

@keyframes flicker {

  0%,
  100% {
    transform: scale(1) rotate(-2deg)
  }

  50% {
    transform: scale(1.15) rotate(2deg)
  }
}

.sc-streak-toast {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-streak-toast-title {
  font-weight: 900;
  font-size: 14px;
}

.sc-streak-toast-sub {
  font-size: 11px;
  opacity: 0.8;
}

/* Reactions */
.sc-reactions-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.sc-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.sc-reaction-chip:hover,
.sc-reaction-chip.reacted {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.45);
}

.sc-reaction-count {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.65);
}

.sc-add-reaction-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.35);
  transition: all .2s;
}

.sc-add-reaction-btn:hover {
  border-color: rgba(124, 58, 237, 0.4);
  color: #a78bfa;
}

/* Reaction burst animation */
.sc-reaction-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 24px;
  animation: burstFly 0.8s ease forwards;
}

@keyframes burstFly {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 1;
  }

  100% {
    transform: translateY(-80px) scale(1.3);
    opacity: 0;
  }
}

/* Reaction picker */
.sc-reaction-picker {
  position: fixed;
  z-index: 9999;
  background: rgba(15, 12, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 40px;
  padding: 8px 12px;
  display: flex;
  gap: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  animation: scMsgSlideIn .15s ease;
}

.sc-reaction-picker-btn {
  font-size: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}

.sc-reaction-picker-btn:hover {
  transform: scale(1.3);
}

/* Smart media search */
.sc-media-search-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-height: 80vh;
  z-index: 9999;
  background: rgba(10, 8, 25, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(30px);
  animation: scMsgSlideIn .25s ease;
}

.sc-media-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.sc-media-search-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.sc-media-search-input:focus {
  border-color: rgba(124, 58, 237, 0.5);
}

.sc-media-search-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 20px;
  cursor: pointer;
}

.sc-media-search-filters {
  display: flex;
  gap: 6px;
  padding: 10px 20px;
  flex-shrink: 0;
}

.sc-media-filter-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.sc-media-filter-btn.active {
  background: rgba(124, 58, 237, 0.25);
  border-color: rgba(124, 58, 237, 0.5);
  color: #c4b5fd;
}

.sc-media-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px 20px;
}

.sc-media-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s;
  margin-bottom: 6px;
}

.sc-media-result:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sc-media-result-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.sc-media-result-info {
  flex: 1;
  min-width: 0;
}

.sc-media-result-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-media-result-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.sc-media-result-contact {
  font-size: 10px;
  color: #a78bfa;
  margin-top: 2px;
}

.sc-media-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  padding: 40px 0;
}

/* ============================================================
   ROUND 2 — THREADED REPLIES, VOICE TRANSCRIPTION, XP/BADGES
============================================================ */

/* Threaded reply quote */
.sc-thread-quote {
  background: rgba(124, 58, 237, 0.08);
  border-left: 3px solid rgba(124, 58, 237, 0.5);
  border-radius: 0 8px 8px 0;
  padding: 4px 10px;
  margin-bottom: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  cursor: pointer;
  transition: background .2s;
}

.sc-thread-quote:hover {
  background: rgba(124, 58, 237, 0.14);
}

.sc-thread-quote-name {
  font-weight: 800;
  color: #a78bfa;
  font-size: 10px;
  margin-bottom: 2px;
}

/* Voice note transcript */
.sc-voice-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-voice-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sc-voice-transcribe-btn {
  font-size: 10px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 20px;
  padding: 2px 10px;
  color: #c4b5fd;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  flex-shrink: 0;
}

.sc-voice-transcribe-btn:hover {
  background: rgba(124, 58, 237, 0.3);
}

/* XP / Gamification */
.sc-xp-toast {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(99, 102, 241, 0.9));
  color: #fff;
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.35);
}

.sc-xp-icon {
  font-size: 22px;
}

.sc-xp-text {
  flex: 1;
}

.sc-xp-text strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
}

.sc-xp-text span {
  font-size: 11px;
  opacity: 0.8;
}

/* XP bar in right panel */
.sc-xp-panel {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-xp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sc-xp-level {
  font-size: 11px;
  font-weight: 800;
  color: #c4b5fd;
}

.sc-xp-points {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.sc-xp-bar-wrap {
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
}

.sc-xp-bar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #7c3aed, #6366f1);
  transition: width .4s ease;
}

.sc-badges-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

.sc-badge.earned {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.4);
  color: #fb923c;
}

/* Level up banner */
.sc-levelup-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #7c3aed, #6366f1, #0ea5e9);
  padding: 12px 20px;
  text-align: center;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.5px;
  animation: levelUpBanner 4s ease forwards;
}

@keyframes levelUpBanner {
  0% {
    transform: translateY(-100%)
  }

  10% {
    transform: translateY(0)
  }

  85% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-100%)
  }
}

/* ============================================================
   ROUND 3 — TOPIC CHANNELS, PINNED SUMMARIES, STATUS STORIES
============================================================ */

/* Topic channels in Communities */
.sc-channel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.sc-channel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.sc-channel-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.sc-channel-item.active {
  background: rgba(124, 58, 237, 0.18);
  color: #c4b5fd;
}

.sc-channel-hash {
  font-weight: 900;
  color: rgba(255, 255, 255, 0.35);
  font-size: 16px;
  flex-shrink: 0;
}

.sc-channel-name {
  flex: 1;
}

.sc-channel-unread {
  background: #7c3aed;
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

/* Pinned AI summary in channel */
.sc-channel-summary-pin {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(124, 58, 237, 0.07);
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
  flex-shrink: 0;
}

.sc-channel-summary-icon {
  font-size: 18px;
  flex-shrink: 0;
  padding-top: 2px;
}

.sc-channel-summary-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  flex: 1;
}

.sc-channel-summary-text strong {
  color: #c4b5fd;
}

.sc-channel-summary-refresh {
  background: none;
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 8px;
  color: #a78bfa;
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Status story with AI caption */
.sc-story-ai-btn {
  padding: 4px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(99, 102, 241, 0.3));
  border: 1px solid rgba(124, 58, 237, 0.4);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
}

.sc-story-ai-btn:hover {
  background: rgba(124, 58, 237, 0.5);
}

.sc-story-caption-box {
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-top: 6px;
  font-style: italic;
}

/* ============================================================
   SPRINT 1 — MESSAGE GROUPING, HOVER ACTIONS, FOCUS MODE
============================================================ */

/* Message Grouping — iMessage style */
.sc-msg-row.sc-grouped {
  margin-top: 1px !important;
}

.sc-msg-row.sc-grouped .sc-bubble-av {
  visibility: hidden;
}

.sc-msg-row.sc-group-last {
  margin-bottom: 10px;
}

.sc-msg-row.sc-grouped .sc-msg-bubble.sc-in {
  border-top-left-radius: 4px !important;
}

.sc-msg-row:not(.sc-grouped) .sc-msg-bubble.sc-in {
  border-bottom-left-radius: 4px !important;
}

.sc-msg-row.sc-grouped .sc-msg-bubble.sc-out {
  border-top-right-radius: 4px !important;
}

.sc-msg-row:not(.sc-group-last) .sc-msg-bubble.sc-out {
  border-bottom-right-radius: 4px !important;
}

.sc-msg-row.sc-grouped .sc-msg-time {
  display: none;
}

/* Hover action bar */
.sc-hover-actions {
  position: absolute;
  top: -34px;
  right: 6px;
  display: none;
  align-items: center;
  gap: 2px;
  background: rgba(10, 8, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 4px 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  z-index: 100;
  animation: scMsgSlideIn 0.12s ease;
  white-space: nowrap;
}

.sc-msg-row:hover .sc-hover-actions,
.sc-msg-row:focus-within .sc-hover-actions {
  display: flex;
}

.sc-hover-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 8px;
  transition: all .15s;
  line-height: 1;
}

.sc-hover-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sc-hover-btn span {
  font-size: 10px;
  font-weight: 700;
  display: block;
  text-align: center;
}

/* Focus Mode */
.sc-focus-mode .sc-list-panel,
.sc-focus-mode .sc-right-panel {
  display: none !important;
}

.sc-focus-mode .sc-chat-panel {
  flex: 1 !important;
  max-width: 100% !important;
  border-radius: 0 !important;
}

.sc-focus-mode .sc-chat-header {
  background: rgba(5, 4, 15, 0.98) !important;
}

.sc-focus-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 20px;
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
}

.sc-focus-pill:hover {
  background: rgba(124, 58, 237, 0.35);
}

.sc-focus-pill.active {
  background: rgba(124, 58, 237, 0.35);
  border-color: rgba(124, 58, 237, 0.6);
}

/* ============================================================
   SPRINT 2 — MESSAGE EDITING, CRM-LITE, AUTO-PRIORITIZED INBOX
============================================================ */

/* Message editing */
.sc-msg-bubble.editing {
  outline: 2px solid rgba(124, 58, 237, 0.6);
  border-radius: 12px;
}

.sc-edit-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  resize: none;
  outline: none;
  line-height: 1.5;
  min-height: 24px;
}

.sc-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.sc-edit-save,
.sc-edit-cancel {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.sc-edit-save {
  background: rgba(124, 58, 237, 0.8);
  color: #fff;
}

.sc-edit-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

.sc-edited-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  margin-left: 6px;
  font-style: italic;
}

.sc-edit-history-btn {
  font-size: 9px;
  color: rgba(124, 58, 237, 0.7);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 2px;
}

/* CRM-lite panel */
.sc-crm-panel {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-crm-title {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}

.sc-crm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.sc-crm-label {
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  width: 80px;
  flex-shrink: 0;
}

.sc-crm-value {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 600;
  flex: 1;
}

.sc-crm-stage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
}

.sc-crm-stage.lead {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.3);
}

.sc-crm-stage.qualified {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.sc-crm-stage.partner {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.sc-crm-stage.client {
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(124, 58, 237, 0.4);
}

.sc-crm-notes {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  cursor: text;
  min-height: 36px;
  outline: none;
  font-family: inherit;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}

.sc-crm-notes:focus {
  border-color: rgba(124, 58, 237, 0.4);
  color: rgba(255, 255, 255, 0.8);
}

/* Auto-prioritized inbox badge */
.sc-priority-badge {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}

.sc-priority-urgent {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.sc-priority-high {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.3);
}

.sc-priority-normal {
  display: none;
}

.sc-inbox-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.sc-sort-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

.sc-sort-btn {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all .2s;
}

.sc-sort-btn.active {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.4);
  color: #c4b5fd;
}

/* ============================================================
   SPRINT 3 — CONNECTED APPS, CONTEXT NOTIFICATIONS
============================================================ */

/* Connected apps panel */
.sc-connected-apps {
  position: fixed;
  right: 20px;
  top: 70px;
  width: 320px;
  background: rgba(10, 8, 25, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  z-index: 9000;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(30px);
  animation: scMsgSlideIn 0.2s ease;
}

.sc-apps-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sc-apps-title {
  font-size: 13px;
  font-weight: 900;
  color: #fff;
}

.sc-apps-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-size: 16px;
}

.sc-app-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sc-app-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sc-app-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.sc-app-info {
  flex: 1;
}

.sc-app-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.sc-app-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 1px;
}

.sc-app-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
}

.sc-app-connected {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.sc-app-connect-btn {
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(124, 58, 237, 0.3);
  cursor: pointer;
  border-radius: 20px;
}

/* Unified inbox items */
.sc-unified-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background .15s;
}

.sc-unified-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sc-unified-source {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}

.sc-source-email {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.sc-source-calendar {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.sc-source-slack {
  background: rgba(74, 21, 75, 0.4);
  color: #da00ff;
}

.sc-unified-text {
  flex: 1;
}

.sc-unified-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.sc-unified-preview {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
  line-height: 1.4;
}

.sc-unified-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* Context-aware notification */
.sc-context-notif {
  position: fixed;
  bottom: 90px;
  right: 20px;
  background: rgba(10, 8, 25, 0.97);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 16px;
  padding: 12px 16px;
  z-index: 9999;
  max-width: 300px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  animation: scMsgSlideIn 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sc-context-notif-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.sc-context-notif-body {
  flex: 1;
}

.sc-context-notif-title {
  font-size: 12px;
  font-weight: 900;
  color: #fff;
}

.sc-context-notif-msg {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  line-height: 1.4;
}

.sc-context-notif-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.sc-context-notif-btn {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  border: none;
  cursor: pointer;
}

.sc-context-notif-btn.primary {
  background: rgba(124, 58, 237, 0.8);
  color: #fff;
}

.sc-context-notif-btn.secondary {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   CONVERSATION INTELLIGENCE LAYER
============================================================ */

/* Intelligence panel — pinned above composer */
.sc-intel-panel {
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0;
  transition: all .3s ease;
  overflow: hidden;
  max-height: 0;
}

.sc-intel-panel.visible {
  max-height: 200px;
}

.sc-intel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  animation: scMsgSlideIn .2s ease;
}

/* Insight type variants */
.sc-intel-bar.insight {
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid rgba(99, 102, 241, 0.5);
}

.sc-intel-bar.decision {
  background: rgba(16, 185, 129, 0.08);
  border-left: 3px solid rgba(16, 185, 129, 0.5);
}

.sc-intel-bar.conflict {
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid rgba(239, 68, 68, 0.5);
}

.sc-intel-bar.offtopic {
  background: rgba(251, 146, 60, 0.08);
  border-left: 3px solid rgba(251, 146, 60, 0.5);
}

.sc-intel-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.sc-intel-text {
  flex: 1;
  min-width: 0;
}

.sc-intel-label {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 1px;
}

.sc-intel-bar.insight .sc-intel-label {
  color: #818cf8;
}

.sc-intel-bar.decision .sc-intel-label {
  color: #34d399;
}

.sc-intel-bar.conflict .sc-intel-label {
  color: #f87171;
}

.sc-intel-bar.offtopic .sc-intel-label {
  color: #fb923c;
}

.sc-intel-msg {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-intel-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.sc-intel-btn {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all .2s;
}

.sc-intel-bar.insight .sc-intel-btn {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.sc-intel-bar.decision .sc-intel-btn {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.sc-intel-bar.conflict .sc-intel-btn {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.sc-intel-bar.offtopic .sc-intel-btn {
  background: rgba(251, 146, 60, 0.2);
  color: #fed7aa;
}

.sc-intel-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Decision card — shown in chat after detection */
.sc-decision-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 78, 59, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 6px 0;
  animation: scMsgSlideIn .3s ease;
}

.sc-decision-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.sc-decision-body {
  flex: 1;
}

.sc-decision-title {
  font-size: 11px;
  font-weight: 900;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.sc-decision-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  font-weight: 600;
}

.sc-decision-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.sc-decision-action-btn {
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.sc-decision-action-btn.primary {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.sc-decision-action-btn.secondary {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Conflict / tension alert */
.sc-conflict-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(127, 29, 29, 0.06));
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 6px 0;
  animation: scMsgSlideIn .3s ease;
}

.sc-conflict-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.sc-conflict-body {
  flex: 1;
}

.sc-conflict-title {
  font-size: 11px;
  font-weight: 900;
  color: #f87171;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.sc-conflict-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.sc-conflict-tip {
  font-size: 11px;
  color: rgba(251, 146, 60, 0.8);
  margin-top: 6px;
  font-style: italic;
}

/* Live insight pulse dot */
.sc-intel-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #818cf8;
  flex-shrink: 0;
  animation: liveIntelPulse 2s ease-in-out infinite;
}

@keyframes liveIntelPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

/* ============================================================
   PERSONAL AI IDENTITY SYSTEM
============================================================ */

/* Style profile card in right panel */
.sc-ai-identity-card {
  margin: 0 14px 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(99, 102, 241, 0.08));
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 16px;
  overflow: hidden;
}

.sc-ai-identity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-ai-identity-title {
  font-size: 11px;
  font-weight: 900;
  color: #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  flex: 1;
}

.sc-ai-identity-learn-btn {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
  cursor: pointer;
  transition: all .2s;
}

.sc-ai-identity-learn-btn:hover {
  background: rgba(124, 58, 237, 0.3);
}

/* Style trait chips */
.sc-style-traits {
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sc-style-trait {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.sc-style-trait.primary {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
}

/* Style stats row */
.sc-style-stats {
  padding: 6px 14px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.sc-style-stat {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 4px;
}

.sc-style-stat strong {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}

/* Reply as me button — shown in hover bar and composer */
.sc-reply-as-me {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.sc-reply-as-me:hover {
  background: rgba(124, 58, 237, 0.3);
  border-color: rgba(124, 58, 237, 0.5);
}

/* Tone variant picker */
.sc-tone-picker {
  position: fixed;
  z-index: 9999;
  background: rgba(10, 8, 25, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 14px;
  width: 280px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(30px);
  animation: scMsgSlideIn .18s ease;
}

.sc-tone-picker-title {
  font-size: 11px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}

.sc-tone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.sc-tone-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: all .2s;
}

.sc-tone-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.35);
  color: #fff;
}

.sc-tone-btn .sc-tone-icon {
  font-size: 20px;
}

.sc-tone-btn .sc-tone-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

/* Ghost draft preview */
.sc-ghost-preview {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 10px;
}

.sc-ghost-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  min-height: 40px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 8px 12px;
}

.sc-ghost-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.sc-ghost-use {
  flex: 1;
  padding: 7px;
  border-radius: 10px;
  border: none;
  background: rgba(124, 58, 237, 0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.sc-ghost-regen {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* Style learning animation */
.sc-learning-pulse {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #a78bfa;
  font-weight: 700;
}

.sc-learning-pulse::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  animation: liveIntelPulse 1.5s ease infinite;
  display: inline-block;
}

/* Draft indicator in composer */
.sc-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #a78bfa;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 8px;
  padding: 2px 7px;
}

/* ============================================================
   LIFE LOG — TIMELINE, RESURFACING, RELATIONSHIP MEMORY
============================================================ */

/* ── Timeline View ── */
.sc-timeline-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 15, 0.98);
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: inherit;
  animation: scFadeIn .2s ease;
}

@keyframes scFadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.sc-timeline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.sc-timeline-title {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}

.sc-timeline-search {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 7px 14px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 200px;
  transition: all .2s;
}

.sc-timeline-search:focus {
  border-color: rgba(124, 58, 237, 0.5);
  width: 240px;
}

.sc-timeline-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  transition: all .2s;
}

.sc-timeline-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sc-timeline-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Month group header */
.sc-timeline-month {
  font-size: 11px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 0 8px;
  position: sticky;
  top: 0;
  background: rgba(5, 4, 15, 0.95);
  backdrop-filter: blur(10px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sc-timeline-month::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

/* Timeline event rows */
.sc-timeline-event {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all .15s;
  position: relative;
  padding-left: 24px;
}

.sc-timeline-event:hover {
  padding-left: 28px;
}

.sc-timeline-event::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.5);
  border: 2px solid rgba(124, 58, 237, 0.8);
  flex-shrink: 0;
}

.sc-timeline-event:hover::before {
  background: #7c3aed;
}

.sc-tl-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sc-tl-date {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 700;
}

.sc-tl-preview {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-tl-preview mark {
  background: rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
  border-radius: 3px;
}

.sc-tl-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(124, 58, 237, 0.2);
  flex-shrink: 0;
  align-self: center;
}

/* ── Auto-resurfacing banner ── */
.sc-resurface-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(6, 78, 59, 0.05));
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 6px 0;
  animation: scMsgSlideIn .3s ease;
  cursor: pointer;
}

.sc-resurface-banner:hover {
  border-color: rgba(14, 165, 233, 0.4);
  background: rgba(14, 165, 233, 0.1);
}

.sc-resurface-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.sc-resurface-body {
  flex: 1;
}

.sc-resurface-label {
  font-size: 10px;
  font-weight: 900;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 3px;
}

.sc-resurface-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.sc-resurface-quote {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px solid rgba(14, 165, 233, 0.4);
}

/* ── Relationship Memory Panel ── */
.sc-memory-panel {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-memory-title {
  font-size: 10px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-memory-add-btn {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.sc-memory-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sc-memory-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.sc-memory-content {
  flex: 1;
}

.sc-memory-category {
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sc-memory-fact {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 1px;
  line-height: 1.4;
}

.sc-memory-date {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 2px;
}

.sc-memory-delete {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  transition: color .15s;
}

.sc-memory-delete:hover {
  color: rgba(239, 68, 68, 0.7);
}

/* Memory add form */
.sc-memory-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-memory-form select,
.sc-memory-form input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  padding: 5px 10px;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.sc-memory-save-btn {
  font-size: 11px;
  font-weight: 800;
  padding: 5px;
  border-radius: 8px;
  border: none;
  background: rgba(124, 58, 237, 0.7);
  color: #fff;
  cursor: pointer;
  width: 100%;
}

/* Timeline button in header */
.sc-timeline-btn {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sc-timeline-btn:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.35);
  color: #c4b5fd;
}

/* ============================================================
   PREDICTIVE CHAT ENGINE
============================================================ */

/* ── Pre-generated reply chips (shown in convo list) ── */
.sc-pre-reply-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #a78bfa;
  flex-shrink: 0;
  animation: liveIntelPulse 2.5s ease infinite;
}

/* ── Predictive insights card (above composer) ── */
.sc-predict-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.08), rgba(99, 102, 241, 0.05));
  border-top: 1px solid rgba(124, 58, 237, 0.15);
  animation: scMsgSlideIn .2s ease;
  transition: all .3s;
  overflow: hidden;
  flex-wrap: nowrap;
}

.sc-predict-bar.hidden {
  max-height: 0;
  padding: 0;
  border: none;
}

.sc-predict-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.sc-predict-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  flex: 1;
  font-weight: 500;
}

.sc-predict-text strong {
  color: #c4b5fd;
  font-weight: 800;
}

/* Pre-suggested reply chips row */
.sc-pre-reply-row {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.sc-pre-reply-row::-webkit-scrollbar {
  display: none;
}

.sc-pre-reply-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(124, 58, 237, 0.3);
  background: rgba(124, 58, 237, 0.1);
  color: #c4b5fd;
  white-space: nowrap;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.sc-pre-reply-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(124, 58, 237, 0.15);
  opacity: 0;
  transition: opacity .2s;
}

.sc-pre-reply-chip:hover::before {
  opacity: 1;
}

.sc-pre-reply-chip:hover {
  border-color: rgba(124, 58, 237, 0.55);
  transform: translateY(-1px);
}

.sc-pre-reply-chip.already-used {
  opacity: 0.4;
  text-decoration: line-through;
}

.sc-pre-reply-chip .sc-chip-ai {
  font-size: 9px;
  opacity: 0.6;
}

/* Follow-up nudge notification */
.sc-followup-nudge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.08), rgba(239, 68, 68, 0.05));
  border-left: 3px solid rgba(251, 146, 60, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background .15s;
}

.sc-followup-nudge:hover {
  background: rgba(251, 146, 60, 0.12);
}

.sc-followup-nudge-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.sc-followup-nudge-body {
  flex: 1;
}

.sc-followup-nudge-title {
  font-size: 11px;
  font-weight: 900;
  color: #fb923c;
}

.sc-followup-nudge-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

.sc-followup-nudge-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  font-size: 14px;
}

/* Prediction confidence indicator */
.sc-predict-confidence {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.12);
  color: #818cf8;
  border: 1px solid rgba(124, 58, 237, 0.2);
  flex-shrink: 0;
}

/* Habit insight row in right panel */
.sc-habit-panel {
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-habit-title {
  font-size: 10px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.sc-habit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sc-habit-icon {
  font-size: 14px;
}

.sc-habit-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  flex: 1;
}

.sc-habit-value {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
}

/* Active prediction dot on convo item */
.sc-pred-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a78bfa;
  flex-shrink: 0;
  animation: liveIntelPulse 2s ease infinite;
}

/* ============================================================
   GOAL-DRIVEN CONVERSATIONS
============================================================ */

/* ── Goal banner pinned below chat header ── */
.sc-goal-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.06));
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
  animation: scMsgSlideIn .2s ease;
}

.sc-goal-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.sc-goal-info {
  flex: 1;
  min-width: 0;
}

.sc-goal-label {
  font-size: 9px;
  font-weight: 900;
  color: rgba(52, 211, 153, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.sc-goal-name {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}

/* Progress bar */
.sc-goal-progress-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sc-goal-progress-track {
  width: 100px;
  height: 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sc-goal-progress-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.sc-goal-pct {
  font-size: 10px;
  font-weight: 900;
  color: #34d399;
}

/* Change / clear goal button */
.sc-goal-edit-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
}

.sc-goal-edit-btn:hover {
  background: rgba(16, 185, 129, 0.2);
}

/* ── Goal picker modal ── */
.sc-goal-picker {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}

.sc-goal-picker-box {
  background: rgba(10, 8, 25, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 28px;
  width: 480px;
  max-width: 95vw;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.sc-goal-picker-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}

.sc-goal-picker-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 20px;
}

.sc-goal-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.sc-goal-preset {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all .2s;
}

.sc-goal-preset:hover {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}

.sc-goal-preset.selected {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.12);
}

.sc-goal-preset-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.sc-goal-preset-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.sc-goal-preset-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 1px;
}

/* Custom goal input */
.sc-goal-custom {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.sc-goal-custom input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}

.sc-goal-custom input:focus {
  border-color: rgba(16, 185, 129, 0.4);
}

.sc-goal-custom input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.sc-goal-confirm-btn {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: all .2s;
}

.sc-goal-confirm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

/* ── Steps checklist (inline in chat) ── */
.sc-goal-steps-card {
  margin: 8px 12px;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 16px;
  padding: 14px 16px;
  animation: scMsgSlideIn .3s ease;
}

.sc-goal-steps-title {
  font-size: 10px;
  font-weight: 900;
  color: rgba(52, 211, 153, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-goal-step-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
}

.sc-goal-step-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(16, 185, 129, 0.4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  margin-top: 1px;
  transition: all .3s;
}

.sc-goal-step-check.done {
  background: rgba(16, 185, 129, 0.3);
  border-color: #10b981;
  color: #34d399;
}

.sc-goal-step-check.missing {
  border-color: rgba(251, 146, 60, 0.5);
  background: rgba(251, 146, 60, 0.08);
  color: #fb923c;
}

.sc-goal-step-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  line-height: 1.4;
}

.sc-goal-step-text.done {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.3);
}

.sc-goal-step-text.missing {
  color: #fb923c;
}

.sc-goal-missing-label {
  font-size: 9px;
  font-weight: 800;
  color: #fb923c;
  margin-left: 4px;
}

/* Set goal button in header */
.sc-goal-set-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(16, 185, 129, 0.4);
  background: transparent;
  color: rgba(52, 211, 153, 0.7);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.sc-goal-set-btn:hover {
  border-style: solid;
  background: rgba(16, 185, 129, 0.08);
}

/* ============================================================
   IN-CHAT TOOLS — POLLS, TASK BOARD, NOTES, CALENDAR
============================================================ */

/* ── Tool Launcher (⚡ button popup) ── */
.sc-tool-launcher {
  position: fixed;
  z-index: 9999;
  background: rgba(10, 8, 25, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 14px;
  width: 300px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(30px);
  animation: scMsgSlideIn .18s ease;
}

.sc-tool-launcher-title {
  font-size: 10px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.sc-tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sc-tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all .2s;
}

.sc-tool-item:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px);
}

.sc-tool-item .sc-tool-emoji {
  font-size: 24px;
}

.sc-tool-item .sc-tool-name {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
}

.sc-tool-item .sc-tool-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
}

/* ── Shared inline card wrapper ── */
.sc-inline-tool {
  margin: 6px 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  animation: scMsgSlideIn .3s ease;
}

.sc-tool-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sc-tool-card-icon {
  font-size: 18px;
}

.sc-tool-card-title {
  font-size: 12px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  flex: 1;
}

.sc-tool-card-by {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.sc-tool-card-body {
  padding: 12px 14px;
}

/* ── POLL ── */
.sc-poll-question {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
}

.sc-poll-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s;
}

.sc-poll-option:hover {
  border-color: rgba(124, 58, 237, 0.4);
}

.sc-poll-option.voted {
  border-color: rgba(124, 58, 237, 0.6);
  background: rgba(124, 58, 237, 0.08);
}

.sc-poll-option-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(124, 58, 237, 0.1);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
  border-radius: 10px;
}

.sc-poll-option-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  position: relative;
  z-index: 1;
  font-weight: 600;
}

.sc-poll-option-pct {
  font-size: 11px;
  font-weight: 800;
  color: #a78bfa;
  position: relative;
  z-index: 1;
}

.sc-poll-total {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}

/* Poll creation form */
.sc-poll-form {
  padding: 14px 16px;
}

.sc-poll-form input,
.sc-poll-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  font-family: inherit;
  outline: none;
  margin-bottom: 6px;
  transition: border-color .2s;
}

.sc-poll-form input:focus,
.sc-poll-form textarea:focus {
  border-color: rgba(124, 58, 237, 0.5);
}

/* ── TASK BOARD ── */
.sc-task-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.sc-task-col-header {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sc-task-item {
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 5px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.sc-task-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sc-task-cb {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  transition: all .2s;
}

.sc-task-cb.done {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

.sc-task-add-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.sc-task-add-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  padding: 5px 8px;
  font-family: inherit;
  outline: none;
}

.sc-task-add-input:focus {
  border-color: rgba(124, 58, 237, 0.4);
  border-style: solid;
}

.sc-task-add-btn {
  background: rgba(124, 58, 237, 0.3);
  border: none;
  border-radius: 8px;
  color: #c4b5fd;
  font-size: 13px;
  padding: 5px 10px;
  cursor: pointer;
}

/* ── NOTES ── */
.sc-note-body textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 100px;
  background: transparent;
  border: none;
  resize: vertical;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  line-height: 1.7;
  font-family: inherit;
  outline: none;
  padding: 0;
}

.sc-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-note-save {
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 8px;
  border: none;
  background: rgba(124, 58, 237, 0.4);
  color: #c4b5fd;
  cursor: pointer;
}

.sc-note-chars {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
}

/* ── CALENDAR / EVENT ── */
.sc-cal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-cal-form input,
.sc-cal-form select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}

.sc-cal-form input:focus {
  border-color: rgba(99, 102, 241, 0.5);
}

.sc-cal-event-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(79, 70, 229, 0.06));
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
  animation: scMsgSlideIn .3s ease;
}

.sc-cal-event-title {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}

.sc-cal-event-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sc-cal-event-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sc-cal-rsvp {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.sc-cal-rsvp-btn {
  flex: 1;
  padding: 7px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
}

.sc-cal-rsvp-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  color: #fff;
}

.sc-cal-rsvp-btn.going {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

.sc-cal-rsvp-btn.maybe {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fbbf24;
}

.sc-cal-rsvp-btn.no {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
}

/* ── Tool button in composer ── */
.sc-tool-launch-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sc-tool-launch-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ============================================================
   INTELLIGENCE SUITE — GROUPS A · B · C
============================================================ */

/* ═══ GROUP A-1: SECOND BRAIN ═══════════════════════════ */
.sc-brain-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(5, 4, 15, 0.97);
  backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .2s ease;
}

.sc-brain-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.sc-brain-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}

.sc-brain-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
  cursor: pointer;
}

.sc-brain-qa-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sc-brain-qa-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  padding: 9px 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}

.sc-brain-qa-input:focus {
  border-color: rgba(124, 58, 237, 0.5);
}

.sc-brain-qa-btn {
  padding: 9px 16px;
  border-radius: 12px;
  border: none;
  background: rgba(124, 58, 237, 0.6);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.sc-brain-qa-answer {
  margin: 0 16px 10px;
  padding: 12px 14px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  animation: scMsgSlideIn .2s ease;
}

.sc-brain-cards {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.sc-brain-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .2s;
}

.sc-brain-card:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.3);
}

.sc-brain-card-meta {
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 5px;
  display: flex;
  gap: 8px;
}

.sc-brain-card-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.sc-brain-card-tags {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sc-brain-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

/* Save-to-brain button on messages */
.sc-brain-save-btn {
  opacity: 0;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(124, 58, 237, 0.3);
  background: rgba(124, 58, 237, 0.1);
  color: #a78bfa;
  cursor: pointer;
  transition: all .15s;
  position: absolute;
  top: -6px;
  right: -2px;
}

.sc-msg-row:hover .sc-brain-save-btn {
  opacity: 1;
}

/* ═══ GROUP A-2: EMOTION-AWARE UI ══════════════════════ */
.sc-chat-panel {
  transition: background .8s ease, border-color .8s ease;
}

.sc-emotion-indicator {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  white-space: nowrap;
}

.sc-emotion-indicator.visible {
  opacity: 1;
}

/* ═══ GROUP A-3: REWIND ════════════════════════════════ */
.sc-rewind-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(10, 8, 25, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  animation: scMsgSlideIn .2s ease;
}

.sc-rewind-play {
  background: rgba(124, 58, 237, 0.4);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}

.sc-rewind-play:hover {
  background: rgba(124, 58, 237, 0.6);
}

.sc-rewind-track {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  cursor: pointer;
}

.sc-rewind-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  transition: width .3s;
}

.sc-rewind-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  font-weight: 700;
}

.sc-rewind-speed {
  font-size: 10px;
  font-weight: 800;
  color: #a78bfa;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 6px;
  padding: 2px 7px;
  cursor: pointer;
}

.sc-rewind-msg {
  animation: scRewindIn .4s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes scRewindIn {
  from {
    opacity: 0;
    transform: scale(.9) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ═══ GROUP B-1: CONTEXTUAL SEARCH ════════════════════ */
.sc-smart-search-overlay {
  position: absolute;
  inset: 0;
  z-index: 210;
  background: rgba(5, 4, 15, 0.98);
  backdrop-filter: blur(40px);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease;
}

.sc-smart-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.sc-smart-search-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(124, 58, 237, 0.4);
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  padding: 10px 16px;
  font-family: inherit;
  outline: none;
}

.sc-smart-search-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.sc-smart-search-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  padding: 0 20px 10px;
}

.sc-smart-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
}

.sc-smart-result {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .2s;
}

.sc-smart-result:hover {
  background: rgba(124, 58, 237, 0.09);
  border-color: rgba(124, 58, 237, 0.25);
}

.sc-smart-result-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.sc-smart-result-body {
  flex: 1;
  min-width: 0;
}

.sc-smart-result-who {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 3px;
}

.sc-smart-result-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

.sc-smart-result-text mark {
  background: rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
  border-radius: 3px;
  padding: 0 2px;
}

.sc-smart-result-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 3px;
}

.sc-smart-result-score {
  font-size: 10px;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 6px;
  padding: 2px 6px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* ═══ GROUP B-2: FULL AUTO MODE ════════════════════════ */
.sc-auto-badge {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 9990;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  border-radius: 16px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: liveIntelPulse 2s ease infinite;
  cursor: pointer;
}

.sc-auto-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: liveIntelPulse 1s ease infinite;
}

.sc-auto-badge-label {
  font-size: 11px;
  font-weight: 900;
  color: #f87171;
}

.sc-auto-preview {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9995;
  background: rgba(10, 8, 25, 0.97);
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  border-radius: 20px;
  padding: 16px 20px;
  width: 420px;
  max-width: 95vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  animation: scMsgSlideIn .2s ease;
}

.sc-auto-preview-label {
  font-size: 10px;
  font-weight: 900;
  color: #f87171;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
}

.sc-auto-preview-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin-bottom: 12px;
}

.sc-auto-countdown {
  height: 4px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.2);
  margin-bottom: 12px;
  overflow: hidden;
}

.sc-auto-countdown-fill {
  height: 100%;
  border-radius: 4px;
  background: #ef4444;
  transition: width .1s linear;
}

.sc-auto-actions {
  display: flex;
  gap: 8px;
}

.sc-auto-cancel {
  flex: 1;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  font-weight: 800;
  cursor: pointer;
}

.sc-auto-send {
  flex: 1;
  padding: 8px;
  border-radius: 12px;
  border: none;
  background: rgba(239, 68, 68, 0.5);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.sc-auto-confidence {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-top: 8px;
}

/* ═══ GROUP C-1: TEXT→VOICE ════════════════════════════ */
.sc-tts-btn {
  opacity: 0;
  font-size: 13px;
  padding: 3px 6px;
  border-radius: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all .15s;
  position: absolute;
  bottom: -6px;
  left: 0;
  line-height: 1;
}

.sc-msg-row:hover .sc-tts-btn {
  opacity: 1;
}

.sc-tts-btn.playing {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
}

/* ═══ GROUP C-2: CROSS-PLATFORM MEMORY ════════════════ */
.sc-xmem-overlay {
  position: absolute;
  inset: 0;
  z-index: 205;
  background: rgba(5, 4, 15, 0.97);
  backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .2s ease;
}

.sc-xmem-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sc-xmem-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}

.sc-xmem-sources {
  display: flex;
  gap: 6px;
  padding: 10px 20px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.sc-xmem-source-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.sc-xmem-source-btn.active {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
}

.sc-xmem-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
}

.sc-xmem-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 8px;
  transition: all .2s;
}

.sc-xmem-item:hover {
  background: rgba(99, 102, 241, 0.07);
  border-color: rgba(99, 102, 241, 0.2);
}

.sc-xmem-source-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.sc-xmem-body {
  flex: 1;
}

.sc-xmem-source-label {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 3px;
}

.sc-xmem-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.sc-xmem-when {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 4px;
}

/* ============================================================
   THINK BEFORE YOU SEND — EMOTIONAL INTELLIGENCE AI
============================================================ */

/* The gentle interrupt — slides up from the composer */
.sc-tbys-card {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 8px 6px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(10, 8, 25, 0.98);
  border: 1.5px solid rgba(251, 146, 60, 0.35);
  box-shadow: 0 -10px 40px rgba(251, 146, 60, 0.12), 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: scTBYSSlideUp .28s cubic-bezier(.34, 1.2, .64, 1);
  z-index: 500;
  backdrop-filter: blur(30px);
}

@keyframes scTBYSSlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Severity colour schemes */
.sc-tbys-card.sev-warn {
  border-color: rgba(251, 146, 60, 0.4);
}

.sc-tbys-card.sev-risk {
  border-color: rgba(239, 68, 68, 0.45);
}

.sc-tbys-card.sev-late {
  border-color: rgba(99, 102, 241, 0.4);
}

.sc-tbys-card.sev-info {
  border-color: rgba(52, 211, 153, 0.3);
}

/* Coloured top accent stripe */
.sc-tbys-stripe {
  height: 3px;
  width: 100%;
}

.sev-warn .sc-tbys-stripe {
  background: linear-gradient(90deg, #fb923c, #f59e0b);
}

.sev-risk .sc-tbys-stripe {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.sev-late .sc-tbys-stripe {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.sev-info .sc-tbys-stripe {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.sc-tbys-body {
  padding: 14px 16px 12px;
}

.sc-tbys-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.sc-tbys-emoji {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.sc-tbys-content {
  flex: 1;
  min-width: 0;
}

.sc-tbys-headline {
  font-size: 13px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 3px;
  line-height: 1.3;
}

.sc-tbys-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

/* Highlight of the risky phrase */
.sc-tbys-flag {
  display: inline-block;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  color: #fb923c;
  font-weight: 700;
  font-style: italic;
  margin-top: 4px;
}

.sev-risk .sc-tbys-flag {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.sev-late .sc-tbys-flag {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.3);
  color: #818cf8;
}

/* Rewrite suggestion box */
.sc-tbys-rewrite {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  position: relative;
  cursor: pointer;
  transition: background .15s;
}

.sc-tbys-rewrite:hover {
  background: rgba(255, 255, 255, 0.07);
}

.sc-tbys-rewrite-label {
  font-size: 9px;
  font-weight: 900;
  color: rgba(52, 211, 153, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 5px;
}

.sc-tbys-rewrite-use {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  border: none;
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
  cursor: pointer;
  transition: all .15s;
}

.sc-tbys-rewrite-use:hover {
  background: rgba(52, 211, 153, 0.35);
}

/* 3 action buttons */
.sc-tbys-actions {
  display: flex;
  gap: 6px;
}

.sc-tbys-btn {
  flex: 1;
  padding: 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid;
  transition: all .15s;
}

.sc-tbys-btn-rewrite {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399;
}

.sc-tbys-btn-rewrite:hover {
  background: rgba(52, 211, 153, 0.2);
}

.sc-tbys-btn-send {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.sc-tbys-btn-send:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.sc-tbys-btn-delete {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
  flex: 0 0 auto;
  padding: 8px 12px;
}

.sc-tbys-btn-delete:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* Mini "thinking" state */
.sc-tbys-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.sc-tbys-thinking-dots span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(251, 146, 60, 0.6);
  animation: scTypingPulse .9s ease infinite;
  margin: 0 1px;
}

.sc-tbys-thinking-dots span:nth-child(2) {
  animation-delay: .15s;
}

.sc-tbys-thinking-dots span:nth-child(3) {
  animation-delay: .3s;
}

/* Subtle "AI is watching" composer badge */
.sc-tbys-active-badge {
  font-size: 9px;
  font-weight: 800;
  color: rgba(52, 211, 153, 0.5);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(52, 211, 153, 0.15);
  background: rgba(52, 211, 153, 0.06);
  letter-spacing: 0.4px;
}

/* ============================================================
   DIGITAL TWIN — YOUR AI VERSION
============================================================ */

/* ── Twin activation badge in header ── */
.sc-twin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  transition: all .25s;
}

.sc-twin-badge.off {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.35);
}

.sc-twin-badge.on {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.15));
  border: 1.5px solid rgba(124, 58, 237, 0.5);
  color: #c4b5fd;
  animation: liveIntelPulse 2.5s ease infinite;
}

/* ── Twin global floating badge ── */
.sc-twin-global-badge {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(236, 72, 153, 0.12));
  border: 1.5px solid rgba(124, 58, 237, 0.45);
  border-radius: 16px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: liveIntelPulse 2s ease infinite;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
}

.sc-twin-global-badge span {
  font-size: 11px;
  font-weight: 900;
  color: #c4b5fd;
}

.sc-twin-global-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a78bfa;
  animation: liveIntelPulse 1s ease infinite;
}

/* ── Twin panel (right panel card) ── */
.sc-twin-panel {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(236, 72, 153, 0.04));
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 18px;
  padding: 16px;
  margin-top: 12px;
}

.sc-twin-panel-title {
  font-size: 12px;
  font-weight: 900;
  color: #c4b5fd;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.sc-twin-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.sc-twin-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}

.sc-twin-stat-val {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}

.sc-twin-stat-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
  font-weight: 700;
}

/* Personality traits */
.sc-twin-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.sc-twin-trait {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #c4b5fd;
}

/* Toggle */
.sc-twin-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.sc-twin-toggle-label {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.sc-twin-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background .3s;
  flex-shrink: 0;
}

.sc-twin-toggle.on {
  background: rgba(124, 58, 237, 0.5);
}

.sc-twin-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .3s;
}

.sc-twin-toggle.on .sc-twin-toggle-knob {
  transform: translateX(18px);
}

/* Twin message indicator */
.sc-twin-msg-tag {
  font-size: 8px;
  font-weight: 900;
  color: #a78bfa;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  letter-spacing: 0.5px;
}

/* Twin setup modal */
.sc-twin-setup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}

.sc-twin-setup-box {
  background: rgba(10, 8, 25, 0.98);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 24px;
  padding: 28px;
  width: 480px;
  max-width: 95vw;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.sc-twin-setup-title {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
}

.sc-twin-setup-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 20px;
  line-height: 1.5;
}

.sc-twin-setup-btn {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: all .2s;
  margin-bottom: 8px;
}

.sc-twin-setup-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
}

/* ============================================================
   CONTENT ENGINE — TIKTOK KILLER
============================================================ */

/* ── Chat → Content Generator Modal ── */
.sc-content-gen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}

.sc-content-gen-box {
  background: rgba(10, 8, 25, 0.99);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 24px;
  width: 560px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  padding: 0;
}

.sc-content-gen-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-content-gen-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}

/* Format selector */
.sc-content-formats {
  display: flex;
  gap: 6px;
  padding: 14px 24px;
  flex-wrap: wrap;
}

.sc-content-format-btn {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
}

.sc-content-format-btn.active {
  border-color: rgba(236, 72, 153, 0.5);
  background: rgba(236, 72, 153, 0.12);
  color: #f472b6;
}

/* Generated content display */
.sc-content-result {
  padding: 0 24px 20px;
}

.sc-content-section {
  margin-bottom: 14px;
}

.sc-content-section-label {
  font-size: 9px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.sc-content-section-text {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  position: relative;
}

.sc-content-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.sc-content-copy-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.sc-content-gen-actions {
  display: flex;
  gap: 8px;
  padding: 0 24px 20px;
}

.sc-content-gen-btn {
  flex: 1;
  padding: 11px;
  border-radius: 14px;
  border: none;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
}

.sc-content-post-btn {
  background: linear-gradient(135deg, #ec4899, #7c3aed);
  color: #fff;
}

.sc-content-post-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.3);
}

.sc-content-regen-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

/* ── Smart Content Feed ── */
.sc-feed-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease;
}

.sc-feed-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.sc-feed-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}

.sc-feed-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 20px;
  flex-shrink: 0;
  overflow-x: auto;
}

.sc-feed-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.sc-feed-tab.active {
  border-color: rgba(236, 72, 153, 0.5);
  background: rgba(236, 72, 153, 0.1);
  color: #f472b6;
}

.sc-feed-grid {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-content: start;
}

.sc-feed-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  overflow: hidden;
  transition: all .2s;
  cursor: pointer;
}

.sc-feed-card:hover {
  transform: translateY(-2px);
  border-color: rgba(236, 72, 153, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.sc-feed-card-visual {
  height: 140px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(236, 72, 153, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
}

.sc-feed-card-body {
  padding: 12px 14px;
}

.sc-feed-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sc-feed-card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

.sc-feed-card-name {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}

.sc-feed-card-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  margin-left: auto;
}

.sc-feed-card-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin-bottom: 8px;
}

.sc-feed-card-stats {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.sc-feed-card-stat {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ── Viral badge ── */
.sc-viral-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 20px;
  color: #fff;
  letter-spacing: 0.5px;
}

.sc-viral-hot {
  background: linear-gradient(135deg, #ef4444, #f97316);
}

.sc-viral-trending {
  background: linear-gradient(135deg, #f59e0b, #eab308);
  color: #000;
}

.sc-viral-rising {
  background: linear-gradient(135deg, #10b981, #34d399);
}

/* ============================================================
   TRUST SCORE + SCAM DETECTION + CO-PILOT + INTENT MESSAGING
============================================================ */

/* ── Trust Score Badge ── */
.sc-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.4px;
}

.sc-trust-high {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.sc-trust-med {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.sc-trust-low {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.sc-trust-new {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #818cf8;
}

/* Trust panel in right sidebar */
.sc-trust-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 14px;
  margin-top: 10px;
}

.sc-trust-panel-title {
  font-size: 11px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-trust-meter {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
  overflow: hidden;
}

.sc-trust-meter-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .4s ease;
}

.sc-trust-factors {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-trust-factor {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.sc-trust-factor-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Scam Detection Warning ── */
.sc-scam-warning {
  background: rgba(239, 68, 68, 0.08);
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 6px 12px;
  animation: scMsgSlideIn .2s ease;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sc-scam-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.sc-scam-body {
  flex: 1;
}

.sc-scam-title {
  font-size: 12px;
  font-weight: 900;
  color: #f87171;
  margin-bottom: 2px;
}

.sc-scam-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}

.sc-scam-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.sc-scam-dismiss {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

/* ── Live Co-Pilot (inline suggestions while typing) ── */
.sc-copilot-suggest {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 8px 4px;
  background: rgba(10, 8, 25, 0.96);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 14px;
  padding: 8px 12px;
  z-index: 400;
  animation: scMsgSlideIn .15s ease;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sc-copilot-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.sc-copilot-body {
  flex: 1;
  min-width: 0;
}

.sc-copilot-label {
  font-size: 9px;
  font-weight: 900;
  color: rgba(52, 211, 153, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 3px;
}

.sc-copilot-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.sc-copilot-text mark {
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
  border-radius: 2px;
  padding: 0 2px;
}

.sc-copilot-use {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

.sc-copilot-use:hover {
  background: rgba(52, 211, 153, 0.2);
}

/* ── Intent-Based Messaging ── */
.sc-intent-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 8px 4px;
  background: rgba(10, 8, 25, 0.98);
  border: 1.5px solid rgba(124, 58, 237, 0.35);
  border-radius: 18px;
  padding: 14px;
  z-index: 450;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  animation: scTBYSSlideUp .2s cubic-bezier(.34, 1.2, .64, 1);
}

.sc-intent-title {
  font-size: 12px;
  font-weight: 900;
  color: #c4b5fd;
  margin-bottom: 10px;
}

.sc-intent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.sc-intent-btn {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}

.sc-intent-btn:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
}

.sc-intent-custom {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  padding: 9px 12px;
  font-family: inherit;
  outline: none;
}

.sc-intent-custom::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.sc-intent-result {
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* ============================================================
   ADVANCED INTELLIGENCE — 5 FEATURES
============================================================ */

/* ── Future Response Simulation ── */
.sc-future-sim {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 8px 4px;
  background: rgba(10, 8, 25, 0.98);
  border: 1.5px solid rgba(99, 102, 241, 0.35);
  border-radius: 18px;
  padding: 14px 16px;
  z-index: 460;
  box-shadow: 0 -10px 40px rgba(99, 102, 241, 0.12);
  animation: scTBYSSlideUp .22s cubic-bezier(.34, 1.2, .64, 1);
}

.sc-future-title {
  font-size: 12px;
  font-weight: 900;
  color: #818cf8;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-future-outcomes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-future-outcome {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all .15s;
}

.sc-future-outcome:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sc-future-prob {
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
}

.sc-future-prob.positive {
  color: #34d399;
}

.sc-future-prob.neutral {
  color: #fbbf24;
}

.sc-future-prob.negative {
  color: #f87171;
}

.sc-future-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.sc-future-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

.sc-future-bar {
  height: 3px;
  border-radius: 3px;
  margin-top: 4px;
}

/* ── Decision Confidence Meter ── */
.sc-decision-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 14px;
  margin: 8px 12px;
}

.sc-decision-title {
  font-size: 11px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-decision-meter {
  position: relative;
  height: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-bottom: 8px;
}

.sc-decision-fill {
  height: 100%;
  border-radius: 10px;
  transition: width .5s ease;
}

.sc-decision-score {
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 4px;
}

.sc-decision-label {
  font-size: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
}

.sc-decision-factors {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.sc-decision-factor {
  flex: 1;
  text-align: center;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.sc-decision-factor-val {
  font-size: 14px;
  font-weight: 900;
}

.sc-decision-factor-name {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}

/* ── Why Did This Happen Engine ── */
.sc-why-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}

.sc-why-box {
  background: rgba(10, 8, 25, 0.99);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 24px;
  width: 520px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.sc-why-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
}

.sc-why-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 16px;
}

.sc-why-event {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sc-why-event:last-child {
  border-bottom: none;
}

.sc-why-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
}

.sc-why-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sc-why-line {
  width: 2px;
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}

.sc-why-event-body {
  flex: 1;
}

.sc-why-event-title {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2px;
}

.sc-why-event-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}

.sc-why-event-time {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 3px;
}

.sc-why-conclusion {
  margin-top: 14px;
  padding: 12px;
  background: rgba(251, 146, 60, 0.06);
  border: 1px solid rgba(251, 146, 60, 0.2);
  border-radius: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* ── Social Gravity Map ── */
.sc-gravity-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.98);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease;
}

.sc-gravity-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sc-gravity-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}

.sc-gravity-canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.sc-gravity-node {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.sc-gravity-node:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
}

.sc-gravity-label {
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.sc-gravity-line {
  position: absolute;
  pointer-events: none;
}

.sc-gravity-stats {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(10, 8, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 12px 16px;
}

.sc-gravity-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

/* ── Blind Spot Detector ── */
.sc-blindspot-card {
  background: rgba(245, 158, 11, 0.06);
  border: 1.5px solid rgba(245, 158, 11, 0.25);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 6px 12px;
  animation: scMsgSlideIn .2s ease;
}

.sc-blindspot-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.sc-blindspot-emoji {
  font-size: 18px;
  flex-shrink: 0;
}

.sc-blindspot-title {
  font-size: 12px;
  font-weight: 900;
  color: #fbbf24;
}

.sc-blindspot-body {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

.sc-blindspot-points {
  margin-top: 8px;
}

.sc-blindspot-point {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.sc-blindspot-dismiss {
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  background: none;
  color: #fbbf24;
  cursor: pointer;
  margin-top: 8px;
}

/* ============================================================
   CALL MANAGEMENT SYSTEM + USER SETTINGS
============================================================ */

/* ── Call Log Panel ── */
.sc-calls-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease;
}

.sc-calls-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sc-calls-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}

.sc-calls-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 20px;
  flex-shrink: 0;
  overflow-x: auto;
}

.sc-calls-tab {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sc-calls-tab.active {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.08);
  color: #34d399;
}

.sc-calls-tab .sc-call-count {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 9px;
}

.sc-calls-tab.active .sc-call-count {
  background: rgba(52, 211, 153, 0.2);
}

.sc-calls-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
}

/* Call card */
.sc-call-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all .15s;
}

.sc-call-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.sc-call-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}

.sc-call-info {
  flex: 1;
  min-width: 0;
}

.sc-call-name {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
}

.sc-call-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}

.sc-call-type-icon {
  font-size: 12px;
}

.sc-call-right {
  text-align: right;
  flex-shrink: 0;
}

.sc-call-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.sc-call-duration {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 2px;
}

.sc-call-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.sc-call-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.sc-call-action-btn:hover {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399;
}

.sc-call-spam {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.04);
}

.sc-call-missed .sc-call-name {
  color: #f87171;
}

/* Filter drawer */
.sc-calls-filter {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 14px;
  margin: 0 20px 10px;
}

.sc-calls-filter-title {
  font-size: 11px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.sc-calls-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.sc-calls-filter-row label {
  flex: 1;
  cursor: pointer;
}

/* ── User Settings Panel ── */
.sc-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease;
}

.sc-settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sc-settings-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}

.sc-settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  max-width: 700px;
}

.sc-settings-section {
  margin-bottom: 20px;
}

.sc-settings-section-title {
  font-size: 13px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 6px;
}

.sc-settings-item-info {
  flex: 1;
}

.sc-settings-item-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

.sc-settings-item-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}

.sc-settings-toggle {
  width: 38px;
  height: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}

.sc-settings-toggle.on {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.sc-settings-toggle-knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left .2s;
}

.sc-settings-toggle.on .sc-settings-toggle-knob {
  left: 20px;
}

.sc-settings-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  padding: 5px 8px;
  font-family: inherit;
  cursor: pointer;
}

/* ============================================================
   ANALYTICS + PLAYBOOKS + STORIES
============================================================ */

/* ── Communication Analytics Dashboard ── */
.sc-analytics-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease;
}

.sc-analytics-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sc-analytics-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}

.sc-analytics-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-content: start;
}

.sc-analytics-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 16px;
  overflow: hidden;
}

.sc-analytics-card-title {
  font-size: 10px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.sc-analytics-big {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 2px;
}

.sc-analytics-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.sc-analytics-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  margin-top: 10px;
}

.sc-analytics-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-width: 8px;
  transition: height .3s ease;
  position: relative;
}

.sc-analytics-bar-label {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  color: rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

.sc-analytics-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto 8px;
}

.sc-analytics-ring-inner {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: rgba(10, 8, 25, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
}

.sc-analytics-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.sc-analytics-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sc-analytics-progress {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  margin-top: 4px;
  overflow: hidden;
  flex: 1;
}

.sc-analytics-progress-fill {
  height: 100%;
  border-radius: 4px;
}

/* ── Conversation Playbooks ── */
.sc-playbook-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}

.sc-playbook-box {
  background: rgba(10, 8, 25, 0.99);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 24px;
  width: 520px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.sc-playbook-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-playbook-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}

.sc-playbook-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}

.sc-playbook-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 24px;
}

.sc-playbook-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all .15s;
}

.sc-playbook-card:hover {
  background: rgba(52, 211, 153, 0.06);
  border-color: rgba(52, 211, 153, 0.25);
}

.sc-playbook-card-emoji {
  font-size: 22px;
  margin-bottom: 6px;
}

.sc-playbook-card-name {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
}

.sc-playbook-card-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}

.sc-playbook-active {
  padding: 14px 24px;
}

.sc-playbook-step {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sc-playbook-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}

.sc-playbook-step.done .sc-playbook-step-num {
  background: rgba(52, 211, 153, 0.3);
}

.sc-playbook-step-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  flex: 1;
}

.sc-playbook-step-hint {
  font-size: 10px;
  color: rgba(52, 211, 153, 0.5);
  margin-top: 2px;
}

.sc-playbook-use-btn {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.08);
  color: #34d399;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Stories / Status Updates ── */
.sc-stories-bar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.sc-story-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.sc-story-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-story-ring.seen {
  background: rgba(255, 255, 255, 0.15);
}

.sc-story-ring.add {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.5), rgba(124, 58, 237, 0.5));
}

.sc-story-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: rgba(10, 8, 25, 0.95);
  border: 2px solid rgba(10, 8, 25, 1);
}

.sc-story-name {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* Story viewer */
.sc-story-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .1s ease;
}

.sc-story-content {
  width: 380px;
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.sc-story-progress {
  display: flex;
  gap: 3px;
  padding: 8px 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.sc-story-progress-seg {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.sc-story-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 3px;
  transition: width 5s linear;
}

.sc-story-card-inner {
  padding: 40px 20px 20px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

.sc-story-header {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 18px;
  left: 14px;
  z-index: 2;
}

.sc-story-header-name {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.sc-story-header-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.sc-story-text {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.sc-story-mood {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}

.sc-story-reactions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.sc-story-react-btn {
  font-size: 18px;
  cursor: pointer;
  transition: transform .15s;
  background: none;
  border: none;
}

.sc-story-react-btn:hover {
  transform: scale(1.3);
}

/* ============================================================
   PINBOARDS + INTRO ENGINE + MINI GAMES
============================================================ */

/* ── Pinboard per contact ── */
.sc-pinboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease;
}

.sc-pinboard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sc-pinboard-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}

.sc-pinboard-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  align-content: start;
}

.sc-pin-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 14px;
  position: relative;
  transition: all .15s;
  cursor: default;
}

.sc-pin-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.sc-pin-type {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.sc-pin-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  word-break: break-word;
}

.sc-pin-time {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 6px;
}

.sc-pin-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  font-size: 12px;
}

.sc-pin-delete:hover {
  color: #f87171;
}

.sc-pin-add {
  border: 2px dashed rgba(255, 255, 255, 0.1);
  background: none;
  border-radius: 16px;
  padding: 30px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  transition: all .15s;
}

.sc-pin-add:hover {
  border-color: rgba(124, 58, 237, 0.3);
  color: rgba(124, 58, 237, 0.6);
}

.sc-pin-add-icon {
  font-size: 24px;
}

/* Pin colors by type */
.sc-pin-note {
  border-left: 3px solid #fbbf24;
}

.sc-pin-link {
  border-left: 3px solid #3b82f6;
}

.sc-pin-idea {
  border-left: 3px solid #a855f7;
}

.sc-pin-task {
  border-left: 3px solid #34d399;
}

.sc-pin-image {
  border-left: 3px solid #ec4899;
}

/* ── Introduction Engine ── */
.sc-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}

.sc-intro-box {
  background: rgba(10, 8, 25, 0.99);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 24px;
  width: 500px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.sc-intro-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
  transition: all .15s;
}

.sc-intro-card:hover {
  border-color: rgba(236, 72, 153, 0.3);
}

.sc-intro-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sc-intro-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  border: 2px solid rgba(10, 8, 25, 1);
}

.sc-intro-avatar-sm:nth-child(2) {
  margin-left: -10px;
}

.sc-intro-reason {
  flex: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.sc-intro-reason strong {
  color: rgba(255, 255, 255, 0.8);
}

.sc-intro-btn {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(236, 72, 153, 0.3);
  background: rgba(236, 72, 153, 0.08);
  color: #ec4899;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Mini Games ── */
.sc-games-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}

.sc-games-box {
  background: rgba(10, 8, 25, 0.99);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 24px;
  width: 440px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.sc-game-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s;
}

.sc-game-card:hover {
  background: rgba(52, 211, 153, 0.06);
  border-color: rgba(52, 211, 153, 0.25);
}

.sc-game-emoji {
  font-size: 28px;
  margin-bottom: 6px;
}

.sc-game-name {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
}

.sc-game-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}

.sc-game-area {
  padding: 14px;
}

.sc-game-question {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  text-align: center;
}

.sc-game-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sc-game-option {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
}

.sc-game-option:hover {
  border-color: rgba(52, 211, 153, 0.3);
}

.sc-game-option.correct {
  background: rgba(52, 211, 153, 0.15);
  border-color: #34d399;
  color: #34d399;
}

.sc-game-option.wrong {
  background: rgba(239, 68, 68, 0.1);
  border-color: #f87171;
  color: #f87171;
}

.sc-game-score {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 10px;
}

/* ============================================================
   FILE SHARING + BROADCAST + INTEGRATIONS
============================================================ */

/* ── File sharing ── */
.sc-file-msg {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin: 4px 0;
}

.sc-file-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.sc-file-info {
  flex: 1;
  min-width: 0;
}

.sc-file-name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-file-size {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.sc-file-download {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.08);
  color: #34d399;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

/* ── Broadcast Messages ── */
.sc-broadcast-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}

.sc-broadcast-box {
  background: rgba(10, 8, 25, 0.99);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 24px;
  width: 480px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.sc-broadcast-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}

.sc-broadcast-contact:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sc-broadcast-contact.selected {
  background: rgba(52, 211, 153, 0.08);
}

/* ── Integrations Dashboard ── */
.sc-integrations-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease;
}

.sc-integrations-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-content: start;
}

.sc-integration-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 18px;
  overflow: hidden;
}

.sc-integration-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.sc-integration-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.sc-integration-name {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
}

.sc-integration-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 800;
}

.sc-integration-status.connected {
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
}

.sc-integration-status.available {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
}

.sc-integration-detail {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

.sc-integration-connect {
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(124, 58, 237, 0.3);
  background: rgba(124, 58, 237, 0.08);
  color: #a855f7;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 10px;
}

.sc-integration-connect.active {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.08);
  color: #34d399;
}

/* ============================================================
   REPLAY + MIRROR + PERSONAS + MOMENTUM + CONTRACTS
============================================================ */

/* ── Conversation Replay ── */
.sc-replay-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-replay-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0
}

.sc-replay-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}

.sc-replay-btn:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.3)
}

.sc-replay-progress {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  cursor: pointer
}

.sc-replay-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  transition: width .3s
}

.sc-replay-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  min-width: 40px
}

.sc-replay-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 20px 40px;
  max-width: 700px;
  margin: 0 auto;
  width: 100%
}

.sc-replay-msg {
  opacity: 0;
  transform: translateY(10px);
  transition: all .3s ease;
  margin-bottom: 8px
}

.sc-replay-msg.visible {
  opacity: 1;
  transform: translateY(0)
}

.sc-replay-marker {
  text-align: center;
  padding: 8px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(124, 58, 237, 0.6);
  margin: 12px 0
}

/* ── Mirror Mode ── */
.sc-mirror-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

.sc-mirror-box {
  background: rgba(10, 8, 25, 0.99);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 24px;
  width: 500px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7)
}

.sc-mirror-trait {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 6px
}

.sc-mirror-trait-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  flex: 1
}

.sc-mirror-trait-bar {
  width: 100px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden
}

.sc-mirror-trait-fill {
  height: 100%;
  border-radius: 6px
}

/* ── Personas ── */
.sc-persona-bar {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  overflow-x: auto;
  flex-shrink: 0
}

.sc-persona-chip {
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s
}

.sc-persona-chip.active {
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(124, 58, 237, 0.1);
  color: #c4b5fd
}

/* ── Momentum Tracker ── */
.sc-momentum-badge {
  position: absolute;
  top: 8px;
  right: 60px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 900;
  z-index: 10
}

.sc-momentum-badge.hot {
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.2)
}

.sc-momentum-badge.warm {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2)
}

.sc-momentum-badge.cool {
  background: rgba(96, 165, 250, 0.1);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.2)
}

.sc-momentum-badge.cold {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.2)
}

/* ── Contracts ── */
.sc-contracts-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-contract-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 8px
}

.sc-contract-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900
}

.sc-contract-status.pending {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24
}

.sc-contract-status.completed {
  background: rgba(52, 211, 153, 0.1);
  color: #34d399
}

.sc-contract-status.overdue {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171
}

.sc-contract-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin: 6px 0
}

.sc-contract-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  gap: 10px
}

/* ============================================================
   NUDGES + HEALTH + VAULT + FLOW + PULSE
============================================================ */

/* ── Smart Nudges ── */
.sc-nudge-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

.sc-nudge-box {
  background: rgba(10, 8, 25, 0.99);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 24px;
  width: 460px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7)
}

.sc-nudge-card {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
  transition: all .15s
}

.sc-nudge-card:hover {
  border-color: rgba(251, 191, 36, 0.25)
}

.sc-nudge-days {
  font-size: 20px;
  font-weight: 900;
  line-height: 1
}

.sc-nudge-starter {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
  font-style: italic
}

.sc-nudge-action {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center
}

/* ── Relationship Health ── */
.sc-health-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

.sc-health-box {
  background: rgba(10, 8, 25, 0.99);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 24px;
  width: 480px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7)
}

.sc-health-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px
}

.sc-health-ring-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(10, 8, 25, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.sc-health-metric {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 4px
}

.sc-health-metric-bar {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06)
}

.sc-health-metric-fill {
  height: 100%;
  border-radius: 4px
}

/* ── Message Vault ── */
.sc-vault-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-vault-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 8px;
  border-left: 3px solid #fbbf24
}

.sc-vault-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900
}

/* ── Flow State ── */
.sc-flow-indicator {
  position: absolute;
  bottom: 60px;
  right: 16px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 900;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: scPulse 2s infinite
}

.sc-flow-indicator.flowing {
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.2)
}

.sc-flow-indicator.breaking {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.2)
}

@keyframes scPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0.6
  }
}

/* ── Network Pulse ── */
.sc-pulse-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-pulse-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  align-content: start
}

.sc-pulse-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06)
}

.sc-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0
}

.sc-pulse-dot.active {
  background: #34d399;
  box-shadow: 0 0 6px #34d399
}

.sc-pulse-dot.recent {
  background: #fbbf24
}

.sc-pulse-dot.inactive {
  background: rgba(255, 255, 255, 0.15)
}

/* ============================================================
   TIKTOK-KILLER: FYP + VOICE + REACTIONS + THEMES + POLLS +
   DISAPPEARING + SCHEDULE + SUMMARY + DUET + QUICK ACTIONS
============================================================ */

/* ── For You Feed ── */
.sc-fyp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-fyp-feed {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 550px;
  margin: 0 auto;
  width: 100%
}

.sc-fyp-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 16px;
  position: relative;
}

.sc-fyp-card:hover {
  border-color: rgba(124, 58, 237, 0.3)
}

.sc-fyp-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900;
  margin-right: 4px
}

.sc-fyp-content {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 10px 0
}

.sc-fyp-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px
}

.sc-fyp-action {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .15s
}

.sc-fyp-action:hover {
  color: #ec4899
}

.sc-fyp-action.liked {
  color: #ec4899
}

/* ── Voice Notes ── */
.sc-voice-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(124, 58, 237, 0.08);
  border-radius: 14px;
  border: 1px solid rgba(124, 58, 237, 0.15)
}

.sc-voice-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}

.sc-voice-wave {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 24px;
  flex: 1
}

.sc-voice-bar {
  width: 3px;
  border-radius: 2px;
  background: rgba(124, 58, 237, 0.4);
  transition: height .1s
}

.sc-voice-bar.active {
  background: #7c3aed
}

.sc-voice-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  min-width: 30px
}

/* ── Rich Reactions ── */
.sc-react-popup {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(10, 8, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 50;
  animation: scSlideUp .15s ease
}

.sc-react-emoji {
  font-size: 20px;
  cursor: pointer;
  transition: transform .1s;
  padding: 2px
}

.sc-react-emoji:hover {
  transform: scale(1.3)
}

.sc-msg-reactions {
  display: flex;
  gap: 2px;
  margin-top: 2px
}

.sc-msg-reaction {
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer
}

@keyframes scSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
  }
}

/* ── Chat Themes ── */
.sc-themes-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

.sc-themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px
}

.sc-theme-card {
  border-radius: 14px;
  height: 120px;
  cursor: pointer;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  transition: all .15s
}

.sc-theme-card:hover {
  transform: scale(1.03)
}

.sc-theme-card.active {
  border-color: #7c3aed;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.3)
}

/* ── Quick Polls ── */
.sc-poll-card {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin: 4px 0
}

.sc-poll-question {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px
}

.sc-poll-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  overflow: hidden
}

.sc-poll-option:hover {
  border-color: rgba(124, 58, 237, 0.3)
}

.sc-poll-option.voted {
  border-color: rgba(52, 211, 153, 0.3)
}

.sc-poll-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.08);
  transition: width .5s
}

.sc-poll-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 1;
  flex: 1
}

.sc-poll-pct {
  font-size: 11px;
  font-weight: 800;
  color: rgba(124, 58, 237, 0.6);
  position: relative;
  z-index: 1
}

/* ── Disappearing Messages ── */
.sc-disappearing {
  animation: scFadeAway 1s forwards
}

@keyframes scFadeAway {
  0% {
    opacity: 1;
    transform: scale(1)
  }

  80% {
    opacity: 0.3;
    transform: scale(0.98)
  }

  100% {
    opacity: 0;
    transform: scale(0.95);
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden
  }
}

/* ── Schedule ── */
.sc-schedule-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

/* ── AI Summary ── */
.sc-summary-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.2);
  margin: 6px 0
}

.sc-summary-section {
  margin-bottom: 8px
}

.sc-summary-label {
  font-size: 9px;
  font-weight: 900;
  color: rgba(124, 58, 237, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px
}

.sc-summary-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5
}

/* ── Duet Mode ── */
.sc-duet-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-duet-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  overflow: hidden
}

.sc-duet-panel {
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04)
}

.sc-duet-panel-header {
  font-size: 12px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px
}

/* ── Quick Actions Toolbar ── */
.sc-quick-bar {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  overflow-x: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0
}

.sc-quick-btn {
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 3px
}

.sc-quick-btn:hover {
  border-color: rgba(124, 58, 237, 0.3);
  color: #c4b5fd
}

/* ============================================================
   BATCH 4: MOOD BOARD + TRANSLATOR + BOOKMARKS + NOTES +
   TEMPLATES + EXPORT + AMBIENT + DEBATE + TYPING + SHIELD
============================================================ */

/* ── Mood Board ── */
.sc-mood-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-mood-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  align-content: start
}

.sc-mood-tile {
  border-radius: 16px;
  padding: 16px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s
}

.sc-mood-tile:hover {
  transform: scale(1.02)
}

.sc-mood-tile-text {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5)
}

.sc-mood-tile-meta {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px
}

/* ── Translator ── */
.sc-translate-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.15);
  margin-top: 4px
}

/* ── Bookmarks ── */
.sc-bookmarks-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

.sc-bookmark-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all .15s
}

.sc-bookmark-card:hover {
  border-color: rgba(251, 191, 36, 0.3)
}

/* ── Contact Notes ── */
.sc-notes-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

/* ── Templates ── */
.sc-templates-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

.sc-template-item {
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all .15s
}

.sc-template-item:hover {
  border-color: rgba(124, 58, 237, 0.3);
  background: rgba(124, 58, 237, 0.04)
}

/* ── Chat Export ── */
.sc-export-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

/* ── Ambient Sounds ── */
.sc-ambient-bar {
  position: absolute;
  top: 50px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(10, 8, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: scFadeIn .15s ease
}

.sc-ambient-btn {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 4px
}

.sc-ambient-btn:hover {
  border-color: rgba(124, 58, 237, 0.3)
}

.sc-ambient-btn.playing {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.06);
  color: #34d399
}

/* ── AI Debate ── */
.sc-debate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-debate-msg {
  padding: 12px;
  border-radius: 14px;
  margin-bottom: 8px;
  max-width: 80%
}

.sc-debate-msg.user {
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.2);
  margin-left: auto
}

.sc-debate-msg.ai {
  background: rgba(236, 72, 153, 0.1);
  border: 1px solid rgba(236, 72, 153, 0.2)
}

/* ── Typing Insights ── */
.sc-typing-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

/* ── Encryption Shield ── */
.sc-shield-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 900;
  background: rgba(52, 211, 153, 0.08);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.15)
}

/* ============================================================
   BATCH 5: HEATMAP + LEADERBOARD + WORDCLOUD + REMIX +
   CHALLENGES + FOLDERS + RECEIPTS + FOCUS + TIMELINE + RXDASH
============================================================ */

/* ── Sentiment Heatmap ── */
.sc-heatmap-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 4px
}

.sc-heatmap-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  position: relative;
  cursor: pointer
}

.sc-heatmap-cell:hover {
  outline: 2px solid rgba(255, 255, 255, 0.3)
}

.sc-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  padding: 8px 20px
}

/* ── Contact Leaderboard ── */
.sc-leader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

.sc-leader-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 4px;
  transition: all .15s
}

.sc-leader-row:hover {
  background: rgba(255, 255, 255, 0.04)
}

.sc-leader-rank {
  font-size: 16px;
  font-weight: 900;
  min-width: 30px;
  text-align: center
}

/* ── Word Cloud ── */
.sc-cloud-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-cloud-words {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  overflow: hidden
}

.sc-cloud-word {
  cursor: pointer;
  transition: transform .15s;
  line-height: 1
}

.sc-cloud-word:hover {
  transform: scale(1.15)
}

/* ── Message Remix ── */
.sc-remix-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

/* ── Challenges ── */
.sc-challenge-card {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 8px
}

.sc-challenge-progress {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  margin-top: 6px
}

.sc-challenge-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #7c3aed, #ec4899)
}

/* ── Smart Folders ── */
.sc-folders-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease
}

.sc-folder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all .15s
}

.sc-folder-item:hover {
  border-color: rgba(124, 58, 237, 0.3)
}

/* ── Read Receipts ── */
.sc-receipt {
  font-size: 9px;
  margin-left: 4px
}

.sc-receipt.sent {
  color: rgba(255, 255, 255, 0.2)
}

.sc-receipt.delivered {
  color: rgba(59, 130, 246, 0.5)
}

.sc-receipt.read {
  color: #34d399
}

/* ── Focus Mode ── */
.sc-focus-active .sc-sidebar,
.sc-focus-active .sc-right-panel {
  opacity: 0.15;
  pointer-events: none;
  transition: opacity .3s
}

.sc-focus-banner {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.2);
  color: #a855f7;
  font-size: 10px;
  font-weight: 900;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px
}

/* ── Contact Timeline ── */
.sc-timeline-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 4, 15, 0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease
}

.sc-timeline-row {
  display: flex;
  gap: 12px;
  padding: 0 20px;
  margin-bottom: 16px
}

.sc-timeline-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px
}

.sc-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0
}

.sc-timeline-line {
  width: 2px;
  flex: 1;
  background: rgba(255, 255, 255, 0.06)
}

/* ============================================================
   📱 MOBILE RESPONSIVE — Added for phone/tablet support
   Tested breakpoints: ≤768px (phones), 769-1024px (tablets)
============================================================ */

/* ── Hamburger button (mobile only) ── */
.mob-menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1100;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* ── Mobile bottom navigation bar ── */
.mob-nav-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 6px 0 env(safe-area-inset-bottom, 6px);
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 10px;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}

.mob-nav-item .mob-icon {
  font-size: 20px;
  line-height: 1;
}

.mob-nav-item:hover,
.mob-nav-item.active {
  color: var(--text);
}

.mob-nav-item.active .mob-icon {
  filter: drop-shadow(0 0 6px var(--violet));
}

/* ── Sidebar overlay backdrop ── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}

@media screen and (max-width: 768px) {

  html,
  body {
    overflow: hidden;
  }

  /* Show mobile controls */
  .mob-menu-btn {
    display: flex;
  }

  .mob-nav-bar {
    display: flex;
  }

  /* App shell adjustments */
  .app-shell {
    flex-direction: column;
    height: 100dvh;
  }

  /* ── Left sidebar — slide-in overlay on mobile ── */
  .left-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px !important;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 4px 0 40px rgba(0, 0, 0, .8);
  }

  .left-sidebar.mob-open {
    transform: translateX(0);
  }

  .sidebar-backdrop.mob-open {
    display: block;
  }

  /* ── Hide right panels on mobile ── */
  .right-panel,
  [class*="right-panel"],
  [class*="rp-"],
  .discover-panel,
  .suggested-panel {
    display: none !important;
  }

  /* ── Main content full width with bottom nav space ── */
  .main-content {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding-bottom: 72px;
    /* space for bottom nav */
  }

  /* ── Top nav / header adjustments ── */
  .top-nav,
  .topnav {
    padding-left: 60px !important;
    /* space for hamburger */
  }

  /* ── Feed / post cards ── */
  .post-card,
  .feed-card,
  .card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* ── Chat panel mobile ── */
  .sc-shell {
    height: calc(100dvh - 72px) !important;
  }

  .sc-sidebar {
    width: 100% !important;
  }

  .sc-chat-area {
    width: 100% !important;
  }

  /* Show chat list OR chat view, not both */
  .sc-shell.chat-open .sc-sidebar {
    display: none;
  }

  .sc-shell:not(.chat-open) .sc-chat-area {
    display: none;
  }

  /* ── Story/reel scrollers ── */
  .stories-row,
  .reels-row {
    padding: 12px 12px !important;
    gap: 10px !important;
  }

  /* ── Compose / post input ── */
  .compose-bar,
  .post-compose {
    padding: 10px 12px !important;
  }

  /* ── Modal / overlay scaling ── */
  .modal-box,
  [class*="modal"] {
    width: 95vw !important;
    max-width: 95vw !important;
    border-radius: 16px !important;
  }

  /* ── Touch-friendly tap targets ── */
  button,
  .btn,
  [role="button"] {
    min-height: 40px;
  }

  input,
  textarea {
    font-size: 16px !important;
  }

  /* prevent iOS zoom */
}

/* ── Tablet (769–1024px) ── */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  :root {
    --sidebar-w: 200px;
    --rp-w: 220px;
  }

  .left-sidebar {
    width: 200px !important;
  }

  .right-panel,
  [class*="right-panel"] {
    width: 220px !important;
  }
}

/* ── Safe area insets (iPhone notch/home bar) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .mob-nav-bar {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }

  .main-content {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   VIDEO CREATOR STUDIO (sv-* prefix)
   Remotion-style browser-based video creation
============================================================ */
.sv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.sv-modal {
  background: #0d0d1e;
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 20px;
  width: min(96vw, 1020px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9), 0 0 60px rgba(124, 58, 237, 0.15);
}

.sv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sv-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex: 1;
  letter-spacing: 0.5px
}

.sv-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

.sv-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08)
}

.sv-body {
  display: flex;
  gap: 0;
  flex: 1;
  overflow: hidden
}

.sv-controls {
  width: 280px;
  flex-shrink: 0;
  padding: 20px;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.3) transparent;
}

.sv-label {
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 12px 0 6px;
}

.sv-label:first-child {
  margin-top: 0
}

.sv-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.sv-input:focus {
  border-color: rgba(124, 58, 237, 0.5)
}

.sv-template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px
}

.sv-tpl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
}

.sv-tpl-card:hover {
  border-color: rgba(124, 58, 237, 0.4);
  color: #fff;
  background: rgba(124, 58, 237, 0.08)
}

.sv-tpl-card.active {
  border-color: rgba(124, 58, 237, 0.8);
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.15);
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.3)
}

.sv-dur-btn {
  flex: 1;
  padding: 7px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.sv-dur-btn:hover {
  border-color: rgba(124, 58, 237, 0.4);
  color: #fff
}

.sv-dur-btn.active {
  border-color: rgba(124, 58, 237, 0.8);
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.15)
}

.sv-record-btn {
  flex: 1;
  padding: 11px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
  transition: all 0.2s;
}

.sv-record-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 30px rgba(124, 58, 237, 0.5)
}

.sv-dl-btn {
  flex: 1;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.sv-dl-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1)
}

.sv-preview-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  gap: 8px;
}

.sv-canvas {
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.25);
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.2);
  max-width: 100%;
  max-height: calc(92vh - 120px);
  object-fit: contain;
  animation: svCanvasGlow 3s ease-in-out infinite;
}

@keyframes svCanvasGlow {

  0%,
  100% {
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.15)
  }

  50% {
    box-shadow: 0 0 50px rgba(236, 72, 153, 0.2)
  }
}

@media(max-width:720px) {
  .sv-body {
    flex-direction: column
  }

  .sv-controls {
    width: 100%;
    flex-shrink: 0;
    max-height: 220px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06)
  }

  .sv-canvas {
    max-height: 200px
  }
}


/* ============================================================
   MOBILE ENHANCEMENTS — iPhone / Android / All devices
============================================================ */
@media screen and (max-width: 768px) {
  #pageReels {
    height: calc(100dvh - 72px);
    overflow: hidden;
  }

  .reels-container {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .reel-card {
    height: calc(100dvh - 72px) !important;
    width: 100vw !important;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .reel-side-actions {
    right: 12px;
    bottom: 80px;
  }

  .rsa-btn,
  .reel-action-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }

  .reel-upload-card {
    -webkit-tap-highlight-color: transparent;
  }

  .reel-upload-icon {
    font-size: 52px;
  }

  .reel-upload-text {
    font-size: 18px;
  }

  .reel-card-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .cp-attachments {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .cp-att-btn {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

video {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ════════════════════════════════════════════════════
   LINKEDIN-STYLE PROFILE PAGE  (lp-*)
   ════════════════════════════════════════════════════ */

/* Cover Banner */
#pageProfile {
  background: var(--surface);
  padding-bottom: 60px;
}

.lp-cover {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a, #1e1b4b, #312e81, #0ea5e9, #7c3aed);
  background-size: 400% 400%;
  animation: lpCoverShift 12s ease infinite;
}

@keyframes lpCoverShift {

  0%,
  100% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }
}

.lp-cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(10, 10, 20, .85) 100%);
}

.lp-cover-edit {
  position: absolute;
  right: 16px;
  bottom: 12px;
  background: rgba(15, 23, 42, .7);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .2s;
}

.lp-cover-edit:hover {
  background: rgba(109, 40, 217, .5);
}

/* Header card */
.lp-header-card {
  background: var(--card);
  border-radius: 0 0 20px 20px;
  padding: 0 32px 20px;
  position: relative;
  margin-bottom: 12px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, .35);
}

/* Avatar */
.lp-av-wrap {
  position: relative;
  display: inline-block;
  margin-top: -60px;
  margin-bottom: 8px;
  z-index: 10;
}

.lp-av {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d28d9, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 900;
  color: #fff;
  border: 4px solid var(--card);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .5);
}

.lp-av-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dashed rgba(167, 139, 250, .45);
  animation: lpRingPulse 3s linear infinite;
}

@keyframes lpRingPulse {
  to {
    transform: rotate(360deg)
  }
}

.lp-av-edit {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: #6d28d9;
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-open-badge {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(22, 163, 74, .4);
}

/* Header Body */
.lp-header-body {
  padding-top: 8px;
}

.lp-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lp-name {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.lp-verified {
  color: #a78bfa;
  font-size: 18px;
}

.lp-score-badge {
  background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.lp-headline {
  font-size: 15px;
  color: rgba(255, 255, 255, .75);
  margin: 4px 0 8px;
}

.lp-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

.lp-location {
  color: rgba(255, 255, 255, .6);
}

.lp-dot {
  color: rgba(255, 255, 255, .3);
}

.lp-connections strong {
  color: #a78bfa;
}

.lp-connections {
  color: rgba(255, 255, 255, .6);
}

.lp-profile-link {
  color: #60a5fa;
  text-decoration: none;
  font-size: 12px;
}

.lp-profile-link:hover {
  text-decoration: underline;
}

.lp-current-pill,
.lp-edu-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
  margin: 2px 4px 2px 0;
}

/* Action row */
.lp-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.lp-btn-primary {
  background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  border: none;
  color: #fff;
  padding: 9px 20px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity .2s;
}

.lp-btn-primary:hover {
  opacity: .85;
}

.lp-btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s;
}

.lp-btn-outline:hover {
  background: rgba(255, 255, 255, .08);
}

.lp-btn-icon {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

/* Open to Work banner */
.lp-otw-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgba(22, 163, 74, .12), rgba(34, 197, 94, .08));
  border: 1px solid rgba(34, 197, 94, .25);
  border-radius: 12px;
  padding: 12px 18px;
  margin-top: 10px;
}

.lp-otw-title {
  font-weight: 800;
  color: #4ade80;
  font-size: 13px;
  margin-bottom: 2px;
}

.lp-otw-roles {
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
}

.lp-otw-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  margin-top: 2px;
}

.lp-otw-edit {
  background: rgba(34, 197, 94, .15);
  border: 1px solid rgba(34, 197, 94, .3);
  color: #4ade80;
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
}

/* Stats strip */
.lp-stats-strip {
  display: flex;
  gap: 24px;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  margin-top: 14px;
}

.lp-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lp-stat-item strong {
  font-size: 18px;
  font-weight: 900;
  color: #a78bfa;
}

.lp-stat-item span {
  font-size: 11px;
  color: var(--muted);
}

/* 2-Column Body */
.lp-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  padding: 0 12px;
}

@media(max-width:900px) {
  .lp-body {
    grid-template-columns: 1fr;
  }

  .lp-right {
    display: none;
  }
}

/* Section cards */
.lp-section {
  background: var(--card);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, .05);
  transition: border-color .2s;
}

.lp-section:hover {
  border-color: rgba(167, 139, 250, .2);
}

.lp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.lp-section-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.lp-section-edit {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .6);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.lp-section-edit:hover {
  background: rgba(167, 139, 250, .2);
  color: #a78bfa;
}

.lp-section-icon-btn {
  background: rgba(109, 40, 217, .2);
  border: 1px solid rgba(109, 40, 217, .4);
  color: #a78bfa;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.lp-section-icon-btn:hover {
  background: rgba(109, 40, 217, .4);
}

/* About text */
.lp-about-text {
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.7;
}

/* Experience item */
.lp-exp-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.lp-exp-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.lp-exp-item:first-child {
  padding-top: 0;
}

.lp-exp-logo {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(109, 40, 217, .2), rgba(14, 165, 233, .15));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.lp-exp-body {
  flex: 1;
  min-width: 0;
}

.lp-exp-role {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  margin-bottom: 2px;
}

.lp-exp-company {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 1px;
}

.lp-exp-dates {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 1px;
}

.lp-exp-location {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.lp-exp-bullets {
  font-size: 13px;
  color: rgba(255, 255, 255, .65);
  margin: 6px 0 10px 16px;
  padding: 0;
  line-height: 1.65;
}

.lp-exp-bullets li {
  margin-bottom: 4px;
}

.lp-exp-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-skill-pill {
  background: rgba(109, 40, 217, .15);
  border: 1px solid rgba(109, 40, 217, .3);
  color: #c4b5fd;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 600;
}

/* Cert grid */
.lp-cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media(max-width:600px) {
  .lp-cert-grid {
    grid-template-columns: 1fr;
  }
}

.lp-cert-card {
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  padding: 14px;
}

.lp-cert-logo {
  font-size: 28px;
  flex-shrink: 0;
}

.lp-cert-name {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  margin-bottom: 2px;
}

.lp-cert-issuer {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}

.lp-cert-id {
  font-size: 11px;
  color: var(--muted);
}

.lp-cert-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: #60a5fa;
  text-decoration: none;
  font-weight: 600;
}

.lp-cert-link:hover {
  text-decoration: underline;
}

/* Skills */
.lp-skills-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background .2s;
}

.lp-skill-row:hover {
  background: rgba(255, 255, 255, .04);
}

.lp-skill-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

.lp-skill-end-count {
  font-size: 11px;
  color: #a78bfa;
  font-weight: 600;
}

/* Projects */
.lp-proj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media(max-width:600px) {
  .lp-proj-grid {
    grid-template-columns: 1fr;
  }
}

.lp-proj-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 16px;
  transition: border-color .2s;
}

.lp-proj-card:hover {
  border-color: rgba(167, 139, 250, .3);
}

.lp-proj-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.lp-proj-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.lp-proj-name {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
}

.lp-proj-dates {
  font-size: 11px;
  color: var(--muted);
}

.lp-proj-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.6;
  margin-bottom: 10px;
}

.lp-proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.lp-tag {
  background: rgba(14, 165, 233, .12);
  border: 1px solid rgba(14, 165, 233, .25);
  color: #7dd3fc;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.lp-proj-link {
  font-size: 12px;
  color: #60a5fa;
  text-decoration: none;
  font-weight: 600;
}

.lp-proj-link:hover {
  text-decoration: underline;
}

/* Awards */
.lp-award-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.lp-award-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.lp-award-icon {
  font-size: 26px;
  flex-shrink: 0;
}

.lp-award-name {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  margin-bottom: 2px;
}

.lp-award-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}

.lp-award-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.5;
}

/* Recommendations */
.lp-rec-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
}

.lp-rec-card:last-child {
  margin-bottom: 0;
}

.lp-rec-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.lp-rec-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.lp-rec-av.sg2 {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
}

.lp-rec-name {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
}

.lp-rec-title {
  font-size: 11px;
  color: var(--muted);
}

.lp-rec-rel {
  font-size: 11px;
  color: rgba(167, 139, 250, .7);
}

.lp-rec-quote {
  font-size: 13px;
  color: rgba(255, 255, 255, .65);
  line-height: 1.7;
  font-style: italic;
  border-left: 3px solid rgba(167, 139, 250, .4);
  padding-left: 14px;
}

/* Right column side cards */
.lp-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-side-card {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 16px;
  padding: 18px;
}

.lp-side-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}

/* Profile strength */
.lp-strength-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.lp-strength-ring {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.lp-strength-badge {
  background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 10px;
}

.lp-strength-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-si {
  font-size: 12px;
  padding: 3px 0;
}

.lp-si.done {
  color: #4ade80;
}

.lp-si.todo {
  color: rgba(255, 255, 255, .35);
}

/* Views */
.lp-views-big {
  font-size: 26px;
  font-weight: 900;
  color: #a78bfa;
  margin-bottom: 4px;
}

.lp-views-chart {
  margin: 8px 0 4px;
}

/* Quick launch */
.lp-ql-btn {
  background: rgba(109, 40, 217, .12);
  border: 1px solid rgba(109, 40, 217, .25);
  color: #c4b5fd;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background .2s;
}

.lp-ql-btn:hover {
  background: rgba(109, 40, 217, .3);
}

/* People Also Viewed */
.lp-pav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.lp-pav-item:last-child {
  border-bottom: none;
}

.lp-pav-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}

.lp-pav-av.sg2 {
  background: linear-gradient(135deg, #0891b2, #22d3ee);
}

.lp-pav-av.sg3 {
  background: linear-gradient(135deg, #be185d, #f43f5e);
}

.lp-pav-av.sg4 {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}

.lp-pav-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.lp-pav-title {
  font-size: 11px;
  color: var(--muted);
}

.lp-pav-connect {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(167, 139, 250, .4);
  color: #c4b5fd;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.lp-pav-connect:hover {
  background: rgba(167, 139, 250, .15);
}

/* ════════════════════════════════════════════════════
   SPHERA DOSSIER PROFILE  (sd-*)  — NOT LinkedIn
   ════════════════════════════════════════════════════ */

/* HERO BANNER */
.sd-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #020617 0%, #0f172a 30%, #1e1b4b 60%, #312e81 100%);
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.sd-hero-grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(167, 139, 250, .04) 0, rgba(167, 139, 250, .04) 1px, transparent 0, transparent 60px),
    repeating-linear-gradient(180deg, rgba(167, 139, 250, .04) 0, rgba(167, 139, 250, .04) 1px, transparent 0, transparent 60px);
}

.sd-hero-content {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 36px 36px 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

/* Hex Avatar */
.sd-av-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sd-hex-frame {
  width: 110px;
  height: 126px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 32px rgba(124, 58, 237, .5), 0 0 64px rgba(14, 165, 233, .2);
}

.sd-av {
  font-size: 52px;
  font-weight: 900;
  color: #fff;
  position: relative;
  z-index: 1;
}

.sd-hex-frame {
  position: relative;
}

.sd-hex-frame img.sd-av-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.sd-hex-upload {
  cursor: pointer;
  transition: all .3s;
}

.sd-hex-upload:hover {
  box-shadow: 0 0 40px rgba(124, 58, 237, .7), 0 0 80px rgba(14, 165, 233, .3);
}

.sd-av-cam-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  opacity: 0;
  transition: opacity .25s;
  z-index: 5;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.sd-hex-upload:hover .sd-av-cam-overlay {
  opacity: 1;
}

.sd-clearance-badge {
  background: rgba(239, 68, 68, .15);
  border: 1px solid rgba(239, 68, 68, .35);
  color: #fca5a5;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  text-align: center;
}

/* Hero Text */
.sd-hero-text {
  flex: 1;
  min-width: 240px;
}

.sd-hero-super {
  font-size: 10px;
  font-weight: 700;
  color: #6d28d9;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.sd-hero-name {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.1;
}

.sd-hero-headline {
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 12px;
  line-height: 1.5;
}

.sd-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.sd-meta-chip {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .65);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
}

.sd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sd-btn-primary {
  background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  border: none;
  color: #fff;
  padding: 9px 20px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity .2s;
}

.sd-btn-primary:hover {
  opacity: .85;
}

.sd-btn-secondary {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s;
}

.sd-btn-secondary:hover {
  background: rgba(167, 139, 250, .15);
}

/* Metrics */
.sd-hero-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

@media(max-width:900px) {
  .sd-hero-metrics {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.sd-metric-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  min-width: 90px;
  transition: background .2s;
}

.sd-metric-card:hover {
  background: rgba(124, 58, 237, .1);
  border-color: rgba(124, 58, 237, .3);
}

.sd-metric-val {
  font-size: 22px;
  font-weight: 900;
  color: #a78bfa;
}

.sd-metric-icon {
  font-size: 16px;
  margin: 2px 0;
}

.sd-metric-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* OTW Ribbon */
.sd-otw-ribbon {
  background: linear-gradient(90deg, rgba(22, 163, 74, .15), rgba(34, 197, 94, .08));
  border-top: 1px solid rgba(34, 197, 94, .2);
  color: #4ade80;
  font-size: 12px;
  padding: 9px 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.sd-otw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse 1.5s ease infinite;
}

/* TAB NAV — horizontal pill tabs, NOT LinkedIn cards */
.sd-tab-nav {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  overflow-x: auto;
  background: var(--card);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  position: sticky;
  top: 0;
  z-index: 20;
  scrollbar-width: none;
}

.sd-tab-nav::-webkit-scrollbar {
  display: none;
}

.sd-tab {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, .45);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}

.sd-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

.sd-tab.active-sd-tab {
  background: linear-gradient(90deg, rgba(124, 58, 237, .25), rgba(14, 165, 233, .15));
  border-color: rgba(124, 58, 237, .4);
  color: #c4b5fd;
}

/* PANEL BODY */
.sd-tab-body {
  padding: 20px;
}

.sd-panel {
  display: none;
}

.sd-panel.active-sdp {
  display: block;
}

/* About banner */
.sd-about-banner {
  background: linear-gradient(90deg, rgba(124, 58, 237, .08), rgba(14, 165, 233, .05));
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
  position: relative;
}

.sd-about-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #7c3aed;
  margin-bottom: 10px;
}

.sd-about-text {
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.75;
}

.sd-about-edit {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .5);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}

/* Overview 2-col */
.sd-overview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media(max-width:700px) {
  .sd-overview-row {
    grid-template-columns: 1fr;
  }
}

.sd-block-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.sd-top-skills-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sd-tskill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}

.sd-tskill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7c3aed;
}

.sd-current-post {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  padding: 14px;
}

.sd-cp-logo {
  font-size: 28px;
  flex-shrink: 0;
}

.sd-cp-role {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}

.sd-cp-co {
  font-size: 12px;
  color: var(--muted);
}

.sd-cp-date {
  font-size: 11px;
  color: #a78bfa;
  margin-top: 2px;
}

/* Panel header */
.sd-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.sd-add-btn {
  background: rgba(124, 58, 237, .15);
  border: 1px solid rgba(124, 58, 237, .3);
  color: #c4b5fd;
  padding: 7px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.sd-add-btn:hover {
  background: rgba(124, 58, 237, .3);
}

/* TIMELINE — vertical connector */
.sd-timeline {
  position: relative;
}

.sd-tl-item {
  display: flex;
  gap: 0;
  position: relative;
  margin-bottom: 4px;
}

.sd-tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: 2px solid rgba(255, 255, 255, .2);
  flex-shrink: 0;
  margin-top: 18px;
  margin-right: 0;
  z-index: 2;
}

.sd-tl-dot.active-dot {
  background: #7c3aed;
  box-shadow: 0 0 12px rgba(124, 58, 237, .6);
  border-color: #a78bfa;
}

.sd-tl-connector {
  width: 2px;
  background: rgba(255, 255, 255, .06);
  flex-shrink: 0;
  margin-left: -8px;
  margin-right: 0;
  min-height: 100%;
}

.sd-tl-card {
  flex: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px;
  padding: 16px;
  margin-left: 14px;
  margin-bottom: 10px;
  transition: border-color .2s;
}

.sd-tl-card:hover {
  border-color: rgba(124, 58, 237, .25);
}

.sd-tl-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.sd-tl-logo {
  font-size: 28px;
  flex-shrink: 0;
}

.sd-tl-role {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  margin-bottom: 2px;
}

.sd-tl-org {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
}

.sd-tl-dates {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.sd-clearance-pill {
  display: inline-block;
  margin-top: 6px;
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .25);
  color: #fca5a5;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 8px;
}

.sd-tl-bullets {
  margin: 8px 0 6px 4px;
}

.sd-tl-bullet {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  padding: 3px 0;
  padding-left: 12px;
  position: relative;
  line-height: 1.5;
}

.sd-tl-bullet::before {
  content: '›';
  position: absolute;
  left: 0;
  color: #7c3aed;
}

.sd-tl-skills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.sd-tl-skill {
  background: rgba(14, 165, 233, .1);
  border: 1px solid rgba(14, 165, 233, .2);
  color: #7dd3fc;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.sd-tl-subroles {
  margin-top: 10px;
  border-left: 2px solid rgba(124, 58, 237, .2);
  padding-left: 14px;
}

.sd-subrole {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.sd-subrole:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.sd-subrole-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7c3aed;
  flex-shrink: 0;
  margin-top: 5px;
}

.sd-subrole-title {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 2px;
}

.sd-subrole-dates {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.sd-subrole-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.55;
}

/* Clearances */
.sd-clearance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

@media(max-width:500px) {
  .sd-clearance-grid {
    grid-template-columns: 1fr;
  }
}

.sd-cl-card {
  background: rgba(239, 68, 68, .07);
  border: 1px solid rgba(239, 68, 68, .2);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}

.sd-cl-card.active-cl {
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .4);
  box-shadow: 0 0 24px rgba(239, 68, 68, .12);
}

.sd-cl-level {
  font-size: 16px;
  font-weight: 900;
  color: #fca5a5;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.sd-cl-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 8px;
}

.sd-cl-status {
  font-size: 12px;
  font-weight: 700;
  color: #4ade80;
}

/* Certs */
.sd-cert-stream {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sd-cert-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sd-cert-row:last-child {
  border-bottom: none;
}

.sd-cert-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.sd-cert-body {
  flex: 1;
}

.sd-cert-name {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}

.sd-cert-issuer {
  font-size: 11px;
  color: #a78bfa;
}

.sd-cert-skills {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.sd-cert-badge {
  background: rgba(52, 211, 153, .1);
  border: 1px solid rgba(52, 211, 153, .25);
  color: #34d399;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.sd-cert-badge:hover {
  background: rgba(52, 211, 153, .2);
}

/* Education */
.sd-edu-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sd-edu-card {
  display: flex;
  gap: 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 18px;
}

.sd-edu-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}

.sd-edu-school {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}

.sd-edu-degree {
  font-size: 13px;
  font-weight: 600;
  color: #a78bfa;
}

.sd-edu-field {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  margin: 2px 0;
}

.sd-edu-dates {
  font-size: 11px;
  color: var(--muted);
}

.sd-edu-skills {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  margin-top: 4px;
}

/* Skills — hex grid (totally different from LinkedIn list) */
.sd-skills-hex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.sd-skill-hex {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  cursor: default;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.sd-skill-hex::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--hc) 12%, transparent), transparent 70%);
  pointer-events: none;
}

.sd-skill-hex:hover {
  border-color: var(--hc);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--hc) 25%, transparent);
}

.sd-skill-hex span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}

.sd-skill-hex small {
  font-size: 10px;
  color: var(--hc);
  font-weight: 700;
}

/* Activity */
.sd-activity-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.sd-act-tab {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .5);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.sd-act-tab.active-sdat {
  background: rgba(124, 58, 237, .2);
  border-color: rgba(124, 58, 237, .4);
  color: #c4b5fd;
}

.sd-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.sd-act-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 18px;
}

.sd-act-header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.sd-act-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

.sd-act-av.ai-av {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
}

.sd-act-name {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}

.sd-act-meta {
  font-size: 11px;
  color: var(--muted);
}

.sd-act-body {
  font-size: 13px;
  color: rgba(255, 255, 255, .65);
  line-height: 1.6;
}

.sd-repost-card {
  background: rgba(255, 255, 255, .015);
}

.sd-repost-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
}

.sd-otw-act-banner {
  background: linear-gradient(90deg, rgba(22, 163, 74, .1), rgba(34, 197, 94, .06));
  border: 1px solid rgba(34, 197, 94, .2);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
}

.sd-otw-view-btn {
  display: block;
  margin-top: 10px;
  background: transparent;
  border: 1px solid rgba(34, 197, 94, .4);
  color: #4ade80;
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
}

/* CareerOrbit strip */
.sd-co-strip {
  background: rgba(124, 58, 237, .06);
  border: 1px solid rgba(124, 58, 237, .15);
  border-radius: 14px;
  padding: 16px;
}

.sd-co-strip-title {
  font-size: 12px;
  font-weight: 800;
  color: #a78bfa;
  margin-bottom: 10px;
}

.sd-co-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sd-co-btn {
  background: rgba(124, 58, 237, .12);
  border: 1px solid rgba(124, 58, 237, .25);
  color: #c4b5fd;
  padding: 7px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}

.sd-co-btn:hover {
  background: rgba(124, 58, 237, .3);
}

/* ════════════════════════════════════════════════════
   PREMIUM PROFILE FEATURES (prem-*)
   ════════════════════════════════════════════════════ */

/* Premium strip */
.sd-premium-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 215, 0, .1);
}

.sd-premium-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fbbf24;
  background: rgba(251, 191, 36, .08);
  border: 1px solid rgba(251, 191, 36, .2);
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

.sd-prem-btn {
  background: linear-gradient(90deg, rgba(251, 191, 36, .08), rgba(251, 191, 36, .05));
  border: 1px solid rgba(251, 191, 36, .25);
  color: #fbbf24;
  padding: 6px 13px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.sd-prem-btn:hover {
  background: rgba(251, 191, 36, .18);
  border-color: rgba(251, 191, 36, .5);
  transform: translateY(-1px);
}

/* ── SPOTLIGHT MODE ── */
.prem-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  animation: fadeIn .3s;
}

.prem-spotlight {
  width: min(900px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(160deg, #0a0a1a, #0f172a, #1e1b4b);
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 0 60px rgba(124, 58, 237, .25), 0 0 120px rgba(14, 165, 233, .1);
}

.prem-close-btn {
  display: inline-block;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .6);
  padding: 6px 16px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
}

.sl-hero {
  text-align: center;
  margin-bottom: 36px;
}

.sl-hex {
  width: 100px;
  height: 115px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 0 40px rgba(124, 58, 237, .5);
}

.sl-name {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
}

.sl-title {
  font-size: 15px;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 4px;
}

.sl-org {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 16px;
}

.sl-chips {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sl-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
}

.sl-chip.red {
  background: rgba(239, 68, 68, .15);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
}

.sl-chip.blue {
  background: rgba(14, 165, 233, .12);
  border: 1px solid rgba(14, 165, 233, .25);
  color: #7dd3fc;
}

.sl-chip.green {
  background: rgba(34, 197, 94, .1);
  border: 1px solid rgba(34, 197, 94, .25);
  color: #4ade80;
}

.sl-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

@media(max-width:600px) {
  .sl-sections {
    grid-template-columns: 1fr 1fr;
  }
}

.sl-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 16px;
}

.sl-card-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #a78bfa;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.sl-card-val {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
}

.sl-card-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
}

.sl-footer {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .3);
}

/* ── BIO TONE BUTTONS ── */
.bio-tone-btn {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .6);
  padding: 7px 16px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}

.bio-tone-btn.active-tone {
  background: rgba(167, 139, 250, .2);
  border-color: rgba(167, 139, 250, .4);
  color: #c4b5fd;
}

.prem-output-box {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.75;
  white-space: pre-wrap;
}

/* ── SALARY ── */
.sal-role-bar {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sal-role-label {
  font-size: 11px;
  font-weight: 800;
  color: #a78bfa;
  text-transform: uppercase;
}

.sal-role-val {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.sal-loc {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

.sal-range-display {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.sal-endpoint {
  text-align: center;
  flex-shrink: 0;
}

.sal-ep-val {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}

.sal-ep-s {
  font-size: 10px;
  color: var(--muted);
}

.sal-bar-wrap {
  flex: 1;
}

.sal-bar-bg {
  height: 16px;
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.sal-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7c3aed, #0ea5e9, #22c55e);
  border-radius: 8px;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
}

.sal-bar-labels {
  display: flex;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.sal-mid-display {
  text-align: center;
  margin-bottom: 24px;
}

.sal-mid-val {
  font-size: 36px;
  font-weight: 900;
  color: #4ade80;
  text-shadow: 0 0 20px rgba(74, 222, 128, .3);
}

.sal-mid-label {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  margin-top: 4px;
}

.sal-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.sal-bk {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  padding: 12px;
}

.sal-bk-total {
  grid-column: span 2;
  background: rgba(74, 222, 128, .06);
  border-color: rgba(74, 222, 128, .2);
}

.sal-bk-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.sal-bk-val {
  font-size: 16px;
  font-weight: 800;
  color: #4ade80;
}

.sal-bk-total .sal-bk-val {
  font-size: 20px;
}

.sal-sources {
  font-size: 10px;
  color: rgba(255, 255, 255, .3);
  text-align: center;
}

/* ── ENDORSEMENT ── */
/* uses existing w6-input, w6-select */

/* ── ANALYTICS ── */
.anl-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

@media(max-width:600px) {
  .anl-summary-row {
    grid-template-columns: 1fr 1fr;
  }
}

.anl-sum-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.anl-sum-val {
  font-size: 24px;
  font-weight: 900;
  color: #a78bfa;
}

.anl-sum-label {
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  margin: 4px 0;
}

.anl-sum-change {
  font-size: 11px;
  color: #4ade80;
  font-weight: 600;
}

.anl-section-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .4);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.anl-viewer-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.anl-vb-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.anl-vb-label {
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
  width: 180px;
  flex-shrink: 0;
}

.anl-vb-bar {
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, .06);
  border-radius: 5px;
  overflow: hidden;
}

.anl-vb-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 1s;
}

.anl-vb-pct {
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  width: 35px;
  text-align: right;
  flex-shrink: 0;
}

.anl-keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.anl-kw {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  cursor: default;
}

.anl-spark {
  display: block;
  overflow: visible;
}

/* ════════════════════════════════════════════════════
   RESUME UPLOAD MODAL  (ru-*)
   ════════════════════════════════════════════════════ */
.ru-step {
  display: block;
}

.ru-drop-zone {
  border: 2px dashed rgba(167, 139, 250, .35);
  border-radius: 20px;
  padding: 48px 32px;
  text-align: center;
  cursor: pointer;
  margin: 24px;
  transition: all .25s;
  background: rgba(124, 58, 237, .04);
}

.ru-drop-zone:hover,
.ru-drag-active {
  border-color: #a78bfa;
  background: rgba(124, 58, 237, .1);
  transform: scale(1.01);
}

.ru-drop-icon {
  font-size: 52px;
  margin-bottom: 12px;
}

.ru-drop-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.ru-drop-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 8px;
  line-height: 1.5;
}

.ru-drop-formats {
  font-size: 11px;
  color: #a78bfa;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Parse progress */
.ru-parse-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.ru-parse-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}

.ru-steps-list {
  max-height: 180px;
  overflow-y: auto;
  text-align: left;
  margin: 0 auto 20px;
  max-width: 500px;
}

.ru-step-line {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  animation: fadeIn .4s;
}

.ru-parse-bar-wrap {
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
}

.ru-parse-bar {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  border-radius: 8px;
  width: 0%;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* Preview */
.ru-preview-header {
  margin-bottom: 20px;
}

.ru-preview-title {
  font-size: 18px;
  font-weight: 800;
  color: #4ade80;
  margin-bottom: 4px;
}

.ru-preview-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}

.ru-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  max-height: 420px;
  overflow-y: auto;
}

.ru-acc-item {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  overflow: hidden;
}

.ru-acc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .2s;
}

.ru-acc-header:hover {
  background: rgba(255, 255, 255, .04);
}

.ru-acc-icon {
  font-size: 18px;
}

.ru-acc-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.ru-acc-chevron {
  color: rgba(255, 255, 255, .4);
  font-size: 12px;
}

.ru-acc-body {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
}

.ru-prev-field {
  margin-bottom: 10px;
}

.ru-prev-field label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .35);
  display: block;
  margin-bottom: 2px;
}

.ru-prev-val {
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
}

.ru-exp-prev {
  margin-bottom: 10px;
}

.ru-exp-prev-role {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}

.ru-exp-prev-meta {
  font-size: 11px;
  color: var(--muted);
}

.ru-prev-bullets {
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  padding-left: 16px;
  margin: 6px 0;
}

.ru-prev-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .06);
  margin: 8px 0;
}

.ru-cert-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ru-cert-chip {
  background: rgba(52, 211, 153, .1);
  border: 1px solid rgba(52, 211, 153, .2);
  color: #34d399;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
  font-weight: 600;
}

.ru-skill-chip {
  background: rgba(124, 58, 237, .12);
  border: 1px solid rgba(124, 58, 237, .25);
  color: #c4b5fd;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
  font-weight: 600;
}

.ru-preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════
   FIRST-LOGIN ONBOARDING PROMPT  (ob-*)
   ════════════════════════════════════════════════════ */
#obOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(16px);
  animation: fadeIn .4s;
}

.ob-modal {
  width: min(680px, 96vw);
  background: linear-gradient(160deg, #0a0a1a, #0f172a, #1a1040);
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(124, 58, 237, .3);
  animation: slideUp .4s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes slideUp {
  from {
    transform: translateY(40px);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

.ob-hero {
  padding: 36px 36px 24px;
  text-align: center;
}

.ob-logo {
  font-size: 42px;
  margin-bottom: 12px;
}

.ob-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
}

.ob-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}

.ob-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 28px 24px;
}

@media(max-width:500px) {
  .ob-choices {
    grid-template-columns: 1fr;
  }
}

.ob-choice-card {
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 24px 18px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
}

.ob-choice-card:hover {
  border-color: #a78bfa;
  background: rgba(124, 58, 237, .1);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, .2);
}

.ob-choice-card.featured {
  border-color: rgba(251, 191, 36, .3);
  background: rgba(251, 191, 36, .04);
}

.ob-choice-card.featured:hover {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, .1);
}

.ob-choice-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.ob-choice-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.ob-choice-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.5;
}

.ob-choice-tag {
  margin-top: 8px;
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 8px;
}

.ob-skip {
  text-align: center;
  padding-bottom: 20px;
}

.ob-skip-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .3);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.ob-skip-btn:hover {
  color: rgba(255, 255, 255, .6);
}

/* ════════════════════════════════════════════════════
   CAREERORBIT PROFILE BUILDER WIZARD  (pbw-*)
   ════════════════════════════════════════════════════ */
.pbw-modal {
  width: min(760px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
}

.pbw-step-bar {
  display: flex;
  align-items: center;
  padding: 16px 28px;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.pbw-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .4);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .3s;
}

.pbw-step-dot.active {
  background: #7c3aed;
  border-color: #a78bfa;
  color: #fff;
  box-shadow: 0 0 12px rgba(124, 58, 237, .5);
}

.pbw-step-dot.done {
  background: rgba(74, 222, 128, .15);
  border-color: #4ade80;
  color: #4ade80;
}

.pbw-connector {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, .08);
}

.pbw-connector.done {
  background: rgba(74, 222, 128, .3);
}

.pbw-step-label {
  font-size: 10px;
  color: rgba(255, 255, 255, .35);
  text-align: center;
  margin-top: 4px;
}

.pbw-body {
  padding: 28px;
}

.pbw-page {
  display: none;
}

.pbw-page.active-pbw {
  display: block;
  animation: fadeIn .3s;
}

.pbw-page-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.pbw-page-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 24px;
}

/* Dynamic list items inside wizard */
.pbw-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.pbw-item-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 14px;
}

.pbw-item-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.pbw-item-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.pbw-item-remove {
  background: none;
  border: none;
  color: rgba(255, 0, 0, .5);
  font-size: 16px;
  cursor: pointer;
}

.pbw-item-remove:hover {
  color: #f87171;
}

.pbw-add-item-btn {
  background: rgba(124, 58, 237, .12);
  border: 1px dashed rgba(124, 58, 237, .3);
  color: #a78bfa;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}

.pbw-add-item-btn:hover {
  background: rgba(124, 58, 237, .25);
}

/* Mini form grid within wizard items */
.pbw-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.pbw-mini-grid .w6-form-group {
  margin-bottom: 0;
}

.pbw-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.pbw-progress-text {
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
}

/* Skill tag input */
.pbw-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pbw-skill-tag {
  background: rgba(124, 58, 237, .15);
  border: 1px solid rgba(124, 58, 237, .3);
  color: #c4b5fd;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pbw-skill-tag button {
  background: none;
  border: none;
  color: #c4b5fd;
  cursor: pointer;
  font-size: 14px;
  opacity: .6;
  padding: 0;
}

.pbw-skill-input-row {
  display: flex;
  gap: 8px;
}

/* ════════════════════════════════════════════════════
   CAREER INTELLIGENCE ENGINE  (ci-*)
   ════════════════════════════════════════════════════ */

/* Scan animation */
.ci-scan-icon {
  font-size: 64px;
  animation: pulse 1.5s ease infinite;
  margin-bottom: 16px;
}

.ci-scan-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
}

.ci-scan-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 480px;
  margin: 0 auto 20px;
  text-align: left;
}

.ci-scan-step {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  animation: fadeIn .4s;
}

.ci-parse-bar-wrap {
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  height: 6px;
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
}

.ci-parse-bar {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #0ea5e9, #4ade80);
  border-radius: 8px;
  width: 0%;
  transition: width .5s ease;
}

/* Profile strip */
.ci-profile-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(124, 58, 237, .08), rgba(14, 165, 233, .05));
  border: 1px solid rgba(124, 58, 237, .15);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
}

.ci-ps-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}

.ci-ps-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.ci-ps-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}

.ci-ps-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.ci-ps-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}

.ci-ps-pill.green {
  background: rgba(74, 222, 128, .1);
  border: 1px solid rgba(74, 222, 128, .25);
  color: #4ade80;
}

.ci-ps-pill.blue {
  background: rgba(14, 165, 233, .1);
  border: 1px solid rgba(14, 165, 233, .2);
  color: #7dd3fc;
}

.ci-ps-pill.red {
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .2);
  color: #fca5a5;
}

/* Category tabs */
.ci-cat-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.ci-cat-tab {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .5);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.ci-cat-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.ci-cat-tab.active-ci-tab {
  background: linear-gradient(90deg, rgba(124, 58, 237, .25), rgba(14, 165, 233, .15));
  border-color: rgba(124, 58, 237, .4);
  color: #c4b5fd;
}

/* Job cards */
.ci-job-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ci-job-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s;
}

.ci-job-card:hover {
  border-color: rgba(124, 58, 237, .3);
}

.ci-job-card-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px 14px;
}

.ci-job-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}

.ci-job-main {
  flex: 1;
}

.ci-job-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.ci-job-company {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}

.ci-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.ci-job-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.ci-job-tag.loc {
  background: rgba(14, 165, 233, .1);
  color: #7dd3fc;
}

.ci-job-tag.type {
  background: rgba(124, 58, 237, .1);
  color: #c4b5fd;
}

.ci-job-tag.clear {
  background: rgba(239, 68, 68, .1);
  color: #fca5a5;
}

/* Match score ring */
.ci-match-ring {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.ci-match-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.ci-match-pct {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  z-index: 1;
}

.ci-match-lbl {
  font-size: 8px;
  color: rgba(255, 255, 255, .5);
  z-index: 1;
  font-weight: 700;
}

/* Why match */
.ci-why {
  padding: 0 18px 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding-top: 10px;
}

.ci-why strong {
  color: #a78bfa;
}

/* Action Hub */
.ci-action-hub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px;
  background: rgba(0, 0, 0, .15);
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.ci-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .18s;
}

.ci-action-btn:hover {
  background: rgba(124, 58, 237, .18);
  border-color: rgba(124, 58, 237, .35);
  color: #c4b5fd;
  transform: translateY(-1px);
}

.ci-action-btn.primary {
  background: rgba(124, 58, 237, .2);
  border-color: rgba(124, 58, 237, .4);
  color: #c4b5fd;
}

.ci-action-btn.primary:hover {
  background: rgba(124, 58, 237, .4);
}

/* Skill gap mini inline */
.ci-gap-strip {
  padding: 4px 18px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ci-gap-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.ci-gap-chip.have {
  background: rgba(74, 222, 128, .1);
  color: #4ade80;
}

.ci-gap-chip.need {
  background: rgba(239, 68, 68, .1);
  color: #fca5a5;
  border: 1px dashed rgba(239, 68, 68, .25);
}

/* Premium flag badge for flagship */
.sd-prem-flagship {
  background: linear-gradient(90deg, rgba(251, 191, 36, .18), rgba(251, 191, 36, .1)) !important;
  border-color: rgba(251, 191, 36, .45) !important;
  color: #fde68a !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, .15);
}

/* ════════════════════════════════════════════════════
   PROFILE NAVIGATION HUB  (sd-hub-*, sd-nav-hub)
   ════════════════════════════════════════════════════ */
.sd-nav-hub {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Search */
.sd-hub-search-row {
  display: flex;
  gap: 10px;
}

.sd-hub-search-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  overflow: hidden;
  transition: border-color .2s;
}

.sd-hub-search-wrap:focus-within {
  border-color: rgba(124, 58, 237, .5);
  box-shadow: 0 0 16px rgba(124, 58, 237, .15);
}

.sd-hub-search-icon {
  padding: 0 12px;
  font-size: 16px;
  opacity: .5;
}

.sd-hub-search {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  padding: 12px 8px;
  outline: none;
}

.sd-hub-search::placeholder {
  color: rgba(255, 255, 255, .3);
}

.sd-hub-search-btn {
  background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  border: none;
  color: #fff;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0 28px 28px 0;
  transition: opacity .2s;
}

.sd-hub-search-btn:hover {
  opacity: .85;
}

/* AI CTA Banner */
.sd-hub-ai-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  background: linear-gradient(90deg, rgba(124, 58, 237, .12), rgba(14, 165, 233, .08));
  border: 1px solid rgba(124, 58, 237, .25);
  border-radius: 16px;
  padding: 16px;
  transition: all .25s;
}

.sd-hub-ai-cta:hover {
  border-color: rgba(124, 58, 237, .5);
  background: linear-gradient(90deg, rgba(124, 58, 237, .22), rgba(14, 165, 233, .14));
  transform: translateY(-1px);
}

.sd-hub-ai-icon {
  font-size: 32px;
  flex-shrink: 0;
  animation: pulse 2s ease infinite;
}

.sd-hub-ai-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
}

.sd-hub-ai-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}

.sd-hub-ai-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 14px;
  white-space: nowrap;
}

/* Grid label */
.sd-hub-grid-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .3);
}

/* Quick-jump tiles */
.sd-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.sd-hub-tile {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 14px 12px;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
}

.sd-hub-tile:hover {
  background: rgba(124, 58, 237, .1);
  border-color: rgba(124, 58, 237, .3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(124, 58, 237, .15);
}

.sd-hub-tile-icon {
  font-size: 24px;
  margin-bottom: 6px;
}

.sd-hub-tile-label {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.sd-hub-tile-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, .4);
}

/* ============================================================
   GLOBAL THEME OVERRIDES (SPHERA Root)
============================================================ */
.hidden {
  display: none !important;
}

/* ══ THEME 2: STEEL BLUE ══ */
body[data-co-theme="steel"] {
  --bg: #0f172a;
  --bg2: #1e293b;
  --bg3: #334155;
  --surface: #1e293b;
  --surface2: #334155;
  --border: rgba(255, 255, 255, 0.12);
  --text: #f8fafc;
  --muted: #94a3b8;
  --violet: #3b82f6;
  --violet2: #60a5fa;
  --grad: linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa);
  --grad2: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

/* ══ THEME 3: MONOCHROME ══ */
body[data-co-theme="mono"] {
  --bg: #000000;
  --bg2: #0a0a0a;
  --bg3: #141414;
  --surface: #141414;
  --surface2: #262626;
  --border: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --muted: #a3a3a3;
  --violet: #525252;
  --violet2: #737373;
  --grad: linear-gradient(135deg, #262626, #525252, #737373);
  --grad2: linear-gradient(135deg, #171717, #404040);
}

/* ══ THEME 4: AURORA ══ */
body[data-co-theme="aurora"] {
  --bg: #020c14;
  --bg2: #041825;
  --bg3: #062335;
  --surface: #0a3047;
  --surface2: #104161;
  --border: rgba(34, 211, 238, 0.15);
  --text: #e0f4ff;
  --muted: #6496b0;
  --violet: #0ea5e9;
  --violet2: #22d3ee;
  --grad: linear-gradient(135deg, #0369a1, #0ea5e9, #22d3ee);
  --grad2: linear-gradient(135deg, #0284c7, #0ea5e9);
}

/* ══ THEME 5: PURE BLACK ══ */
/* ══ THEME 5: PURE BLACK — Premium Monochrome Edition ══ */
#pageCareerorbit[data-co-theme="pure-black"] {
  --bg: #000000;
  --bg2: #050505;
  --bg3: #0a0a0a;
  --surface: #0d0d0d;
  --surface2: #1a1a1a;
  --border: rgba(255, 255, 255, 0.14);
  --text: #ffffff;
  --muted: #aaaaaa;
  --violet: #ffffff;
  --violet2: #cccccc;
  --grad: linear-gradient(135deg, #222, #fff);
  --grad2: linear-gradient(135deg, #111, #555);
  color-scheme: dark;
  background: #000000;
  color: #ffffff;
}

/* ── Layout ── */
#pageCareerorbit[data-co-theme="pure-black"] .co-layout,
#pageCareerorbit[data-co-theme="pure-black"] .co-launchpad-banner,
#pageCareerorbit[data-co-theme="pure-black"] .co-sidebar,
#pageCareerorbit[data-co-theme="pure-black"] .co-main {
  background: #000000;
}

/* ── Muted text ── */
#pageCareerorbit[data-co-theme="pure-black"] .co-lp-sub,
#pageCareerorbit[data-co-theme="pure-black"] .co-filter-label,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-intel-title,
#pageCareerorbit[data-co-theme="pure-black"] .ci-ps-sub,
#pageCareerorbit[data-co-theme="pure-black"] .ci-job-company,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-flash-meta,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-msg-preview,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-msg-date,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-stat-lbl {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Job cards ── */
#pageCareerorbit[data-co-theme="pure-black"] .co-job-card,
#pageCareerorbit[data-co-theme="pure-black"] .ci-job-card,
#pageCareerorbit[data-co-theme="pure-black"] .job-card {
  background: #0d0d0d;
  border-color: rgba(255, 255, 255, 0.1);
}

#pageCareerorbit[data-co-theme="pure-black"] .co-job-card:hover,
#pageCareerorbit[data-co-theme="pure-black"] .ci-job-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
}

/* ── Badge chips — TS/SCI, Quick Launch, Onsite, etc. ── */
#pageCareerorbit[data-co-theme="pure-black"] .ci-job-tag,
#pageCareerorbit[data-co-theme="pure-black"] .co-job-tag,
#pageCareerorbit[data-co-theme="pure-black"] .job-tag,
#pageCareerorbit[data-co-theme="pure-black"] [class*="badge"],
#pageCareerorbit[data-co-theme="pure-black"] [class*="chip"],
#pageCareerorbit[data-co-theme="pure-black"] [class*="tag"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ── Purple gradient salary / match boxes ── */
#pageCareerorbit[data-co-theme="pure-black"] [style*="background:linear-gradient"],
#pageCareerorbit[data-co-theme="pure-black"] [style*="background: linear-gradient"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ── Filter pills ── */
#pageCareerorbit[data-co-theme="pure-black"] .co-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}

#pageCareerorbit[data-co-theme="pure-black"] .active-copill,
#pageCareerorbit[data-co-theme="pure-black"] .co-pill.active-copill {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* ── Tab buttons ── */
#pageCareerorbit[data-co-theme="pure-black"] .co-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

#pageCareerorbit[data-co-theme="pure-black"] .co-tab-btn.active-cotab {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* ── Search button ── */
#pageCareerorbit[data-co-theme="pure-black"] .co-search-btn {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* ── Search input ── */
#pageCareerorbit[data-co-theme="pure-black"] .co-search-input,
#pageCareerorbit[data-co-theme="pure-black"] input,
#pageCareerorbit[data-co-theme="pure-black"] textarea {
  background: #111111;
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* ── Action buttons (Apply Now, AI Outreach, etc.) ── */
#pageCareerorbit[data-co-theme="pure-black"] .ci-action-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.8);
}

#pageCareerorbit[data-co-theme="pure-black"] .ci-action-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

#pageCareerorbit[data-co-theme="pure-black"] .ci-action-btn.primary {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

#pageCareerorbit[data-co-theme="pure-black"] .ci-action-btn.primary:hover {
  background: #dddddd;
}

/* ── Apply Now / Connect / Quick Launch primary buttons ── */
#pageCareerorbit[data-co-theme="pure-black"] .co-apply-btn,
#pageCareerorbit[data-co-theme="pure-black"] [class*="apply-btn"],
#pageCareerorbit[data-co-theme="pure-black"] [class*="connect-btn"],
#pageCareerorbit[data-co-theme="pure-black"] .orbit-copilot-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

/* ── Launchpad banner buttons ── */
#pageCareerorbit[data-co-theme="pure-black"] .co-lp-signal-btn,
#pageCareerorbit[data-co-theme="pure-black"] .co-lp-alerts-btn,
#pageCareerorbit[data-co-theme="pure-black"] .co-lp-edit {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

#pageCareerorbit[data-co-theme="pure-black"] .co-lp-signal-btn:hover,
#pageCareerorbit[data-co-theme="pure-black"] .co-lp-alerts-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Category tabs ── */
#pageCareerorbit[data-co-theme="pure-black"] .ci-cat-tab {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
}

#pageCareerorbit[data-co-theme="pure-black"] .ci-cat-tab.active-ci-tab {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* ── Skill gap chips ── */
#pageCareerorbit[data-co-theme="pure-black"] .ci-gap-chip.have {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: none;
}

#pageCareerorbit[data-co-theme="pure-black"] .ci-gap-chip.need {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* ── Avatars & profile pills ── */
#pageCareerorbit[data-co-theme="pure-black"] .ci-ps-av,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-avatar {
  background: #ffffff;
  color: #000000;
}

#pageCareerorbit[data-co-theme="pure-black"] .ci-ps-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* ── Progress scan bar ── */
#pageCareerorbit[data-co-theme="pure-black"] .ci-parse-bar {
  background: linear-gradient(90deg, #444, #fff, #aaa);
}

/* ── Action hub container ── */
#pageCareerorbit[data-co-theme="pure-black"] .ci-action-hub {
  background: rgba(255, 255, 255, 0.03);
  border-top-color: rgba(255, 255, 255, 0.07);
}

/* ── Theme popup ── */
#pageCareerorbit[data-co-theme="pure-black"] .co-theme-popup {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.15);
}

#pageCareerorbit[data-co-theme="pure-black"] .co-theme-popup-title {
  color: rgba(255, 255, 255, 0.4);
}

#pageCareerorbit[data-co-theme="pure-black"] .co-theme-option {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* ── Orbit section cards ── */
#pageCareerorbit[data-co-theme="pure-black"] .orbit-profile-card,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-intel-card,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-flash-card,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-chat-card,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-starmap-card,
#pageCareerorbit[data-co-theme="pure-black"] .orbit-clusters-card {
  background: #0d0d0d;
  border-color: rgba(255, 255, 255, 0.08);
}

#pageCareerorbit[data-co-theme="pure-black"] .orbit-tag {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

#pageCareerorbit[data-co-theme="pure-black"] .orbit-pro-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

#pageCareerorbit[data-co-theme="pure-black"] .orbit-cluster-dot {
  background: #ffffff !important;
}

/* ── Scrollbar ── */
#pageCareerorbit[data-co-theme="pure-black"] ::-webkit-scrollbar-track {
  background: #080808;
}

#pageCareerorbit[data-co-theme="pure-black"] ::-webkit-scrollbar-thumb {
  background: #333333;
}

#pageCareerorbit[data-co-theme="pure-black"] ::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* ══ THEME 6: PURE WHITE — Premium Black Edition ══ */
#pageCareerorbit[data-co-theme="pure-white"] {
  --bg: #ffffff;
  --bg2: #f9f9f9;
  --bg3: #f2f2f2;
  --surface: #f5f5f5;
  --surface2: #e8e8e8;
  --border: rgba(0, 0, 0, 0.12);
  --text: #000000;
  --muted: #444444;
  --violet: #000000;
  --violet2: #111111;
  --grad: linear-gradient(135deg, #111111, #000000);
  --grad2: linear-gradient(135deg, #222222, #111111);
  color-scheme: light;
  background: #ffffff;
  color: #000000;
}

/* ── All pages & layout containers ── */
#pageCareerorbit[data-co-theme="pure-white"] .page,
#pageCareerorbit[data-co-theme="pure-white"] .co-layout,
#pageCareerorbit[data-co-theme="pure-white"] .co-launchpad-banner,
#pageCareerorbit[data-co-theme="pure-white"] .co-sidebar,
#pageCareerorbit[data-co-theme="pure-white"] .co-main,
#pageCareerorbit[data-co-theme="pure-white"] .main-content,
#pageCareerorbit[data-co-theme="pure-white"] .sidebar,
#pageCareerorbit[data-co-theme="pure-white"] .right-panel {
  background: var(--bg);
  color: #000000;
}

/* ── ALL text → black ── */
#pageCareerorbit[data-co-theme="pure-white"] *,
#pageCareerorbit[data-co-theme="pure-white"] h1,
#pageCareerorbit[data-co-theme="pure-white"] h2,
#pageCareerorbit[data-co-theme="pure-white"] h3,
#pageCareerorbit[data-co-theme="pure-white"] h4,
#pageCareerorbit[data-co-theme="pure-white"] p,
#pageCareerorbit[data-co-theme="pure-white"] span,
#pageCareerorbit[data-co-theme="pure-white"] label,
#pageCareerorbit[data-co-theme="pure-white"] div,
#pageCareerorbit[data-co-theme="pure-white"] a,
#pageCareerorbit[data-co-theme="pure-white"] li {
  color: #000000 !important;
}

/* ── Muted / secondary text ── */
#pageCareerorbit[data-co-theme="pure-white"] .co-lp-sub,
#pageCareerorbit[data-co-theme="pure-white"] .co-filter-label,
#pageCareerorbit[data-co-theme="pure-white"] .orbit-intel-title,
#pageCareerorbit[data-co-theme="pure-white"] .orbit-name,
#pageCareerorbit[data-co-theme="pure-white"] .orbit-title,
#pageCareerorbit[data-co-theme="pure-white"] .ci-job-title,
#pageCareerorbit[data-co-theme="pure-white"] .ci-scan-title,
#pageCareerorbit[data-co-theme="pure-white"] .co-search-title {
  color: #000000;
}

#pageCareerorbit[data-co-theme="pure-white"] .ci-job-company,
#pageCareerorbit[data-co-theme="pure-white"] .ci-ps-sub,
#pageCareerorbit[data-co-theme="pure-white"] .co-pill,
#pageCareerorbit[data-co-theme="pure-white"] .co-tab-btn {
  color: #444444;
}

#pageCareerorbit[data-co-theme="pure-white"] .co-search-input,
#pageCareerorbit[data-co-theme="pure-white"] .co-search-btn,
#pageCareerorbit[data-co-theme="pure-white"] .co-tab-btn {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
  color: #111111;
}

#pageCareerorbit[data-co-theme="pure-white"] .co-tab-btn.active-cotab {
  background: #000000;
  color: #ffffff;
}

#pageCareerorbit[data-co-theme="pure-white"] .ci-job-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

#pageCareerorbit[data-co-theme="pure-white"] .active-copill,
#pageCareerorbit[data-co-theme="pure-white"] .co-search-btn {
  background: #111111;
  color: #ffffff;
}

#pageCareerorbit[data-co-theme="pure-white"] .co-theme-popup {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
}

#pageCareerorbit[data-co-theme="pure-white"] .co-theme-option {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #111;
}

#pageCareerorbit[data-co-theme="pure-white"] .co-theme-popup-title {
  color: rgba(0, 0, 0, 0.45);
}