/* ============================================
   GetHireIn — Premium Animations & Micro-UX
   ============================================ */

/* ── Skeleton Loading ── */
@keyframes shimmer {
  0% { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f2f0 25%, #e8ebe8 50%, #f0f2f0 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.w-80 { width: 80%; }
.skeleton-text.w-60 { width: 60%; }
.skeleton-text.w-40 { width: 40%; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.skeleton-avatar-lg { width: 80px; height: 80px; border-radius: 50%; }
.skeleton-card { border-radius: 16px; height: 140px; }
.skeleton-btn { height: 40px; border-radius: 20px; width: 120px; }
.skeleton-line { height: 1px; background: var(--border); margin: 8px 0; }

/* ── Page Entry Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.92); }
  70%  { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-up   { animation: fadeUp 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.animate-in   { animation: fadeIn 0.35s ease both; }
.animate-left { animation: slideInLeft 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.animate-right{ animation: slideInRight 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.animate-pop  { animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Staggered children */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(n+7) { animation-delay: 360ms; }

/* ── Button Micro-interactions ── */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,197,137,0.35);
}
.btn-primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

/* Ripple effect on click */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  animation: rippleAnim 0.5s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Card Hover States ── */
.card-hover {
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.2s cubic-bezier(0.22,1,0.36,1);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}

/* ── Like Button Bounce ── */
@keyframes likeBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  60%  { transform: scale(0.9); }
  80%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.like-bounce { animation: likeBounce 0.4s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Toast Notifications ── */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(10px); }
}
.toast-notification {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #0a1612;
  color: #fff;
  padding: 12px 24px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 700;
  z-index: 99998;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastIn 0.3s cubic-bezier(0.22,1,0.36,1);
}
.toast-notification.success { border-left: 3px solid #00c589; }
.toast-notification.error   { border-left: 3px solid #ef4444; }
.toast-notification.info    { border-left: 3px solid #3b82f6; }

/* ── Number Counter Animation ── */
.count-animate { animation: countUp 0.4s ease both; }

/* ── Input Focus States ── */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,197,137,0.12);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* ── Progress Bar ── */
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--progress, 70%); }
}
.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00c589, #00a870);
  border-radius: 3px;
  animation: progressFill 0.8s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Score Circle ── */
@keyframes strokeDraw {
  from { stroke-dashoffset: 283; }
  to   { stroke-dashoffset: var(--dash-offset, 85); }
}
.score-circle-fill {
  animation: strokeDraw 1s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}

/* ── Typing Indicator ── */
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%            { transform: translateY(-6px); opacity: 1; }
}
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* ── Dark Mode ── */
:root {
  --transition-theme: background 0.3s, color 0.3s, border-color 0.3s;
}
body.dark-mode {
  --bg: #0f1411;
  --surface: #171e1a;
  --surface-2: #1e2822;
  --border: #2a3830;
  --border-light: #243028;
  --text: #e8f4ef;
  --text-dim: #9ab8a8;
  --text-faint: #5a7a68;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}
body { transition: var(--transition-theme); }

/* ── Pulse on new content ── */
@keyframes pulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(0,197,137,0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(0,197,137,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,197,137,0); }
}
.pulse-new { animation: pulseGreen 1s ease 2; }

/* ── Smooth page transitions ── */
.page-content {
  animation: fadeUp 0.4s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Dark Mode — Full Overrides ── */
body.dark-mode .post-card {
  background: #1a2420 !important;
  border-color: #2a3830 !important;
}
body.dark-mode .post-content,
body.dark-mode .post-card p,
body.dark-mode .post-card span,
body.dark-mode .post-card div {
  color: #e8f4ef !important;
}
body.dark-mode .post-meta-name {
  -webkit-text-fill-color: #00e5a0 !important;
  color: #00e5a0 !important;
}
body.dark-mode .post-meta-sub,
body.dark-mode .post-footer .post-action {
  color: #9ab8a8 !important;
}
body.dark-mode .post-footer {
  background: rgba(0,0,0,0.2) !important;
  border-top-color: #2a3830 !important;
}
body.dark-mode .composer-card,
body.dark-mode #composer {
  background: #1a2420 !important;
  border-color: #2a3830 !important;
}
body.dark-mode .composer-trigger {
  background: #222e28 !important;
  border-color: #2a3830 !important;
  color: #9ab8a8 !important;
}
body.dark-mode #post-input {
  background: #222e28 !important;
  border-color: #2a3830 !important;
  color: #e8f4ef !important;
}
body.dark-mode #post-input::placeholder { color: #5a7a68 !important; }
body.dark-mode .sidebar-card,
body.dark-mode .card,
body.dark-mode [class*="card"] {
  background: #1a2420 !important;
  border-color: #2a3830 !important;
}
body.dark-mode .sidebar-card p,
body.dark-mode .sidebar-card span,
body.dark-mode .sidebar-card a:not([style*="background"]) {
  color: #9ab8a8 !important;
}
body.dark-mode .sidebar-card h3,
body.dark-mode .sidebar-card h4,
body.dark-mode .sidebar-card strong {
  color: #e8f4ef !important;
}
body.dark-mode .quick-links a,
body.dark-mode .quick-links span {
  color: #9ab8a8 !important;
}
body.dark-mode .quick-links a:hover { color: #00c589 !important; }
body.dark-mode .top-nav {
  background: #111a16 !important;
  border-bottom-color: #2a3830 !important;
}
body.dark-mode .top-nav-logo { color: #e8f4ef !important; }
body.dark-mode .top-nav-item { color: #9ab8a8 !important; }
body.dark-mode .top-nav-item.active,
body.dark-mode .top-nav-item:hover { color: #00c589 !important; }
body.dark-mode .ghi-search-box {
  background: #222e28 !important;
  border-color: #2a3830 !important;
}
body.dark-mode #ghi-search-input { color: #e8f4ef !important; }
body.dark-mode #ghi-search-input::placeholder { color: #5a7a68 !important; }
body.dark-mode .ghi-search-dropdown {
  background: #1a2420 !important;
  border-color: #2a3830 !important;
}
body.dark-mode .ghi-search-item:hover { background: #222e28 !important; }
body.dark-mode .ghi-search-item-name { color: #e8f4ef !important; }
body.dark-mode .bottom-nav {
  background: #111a16 !important;
  border-top-color: #2a3830 !important;
}
body.dark-mode .bottom-nav-item { color: #9ab8a8 !important; }
body.dark-mode .bottom-nav-item.active { color: #00c589 !important; }
body.dark-mode input:not([type="submit"]):not([type="button"]),
body.dark-mode textarea,
body.dark-mode select {
  background: #222e28 !important;
  border-color: #2a3830 !important;
  color: #e8f4ef !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #5a7a68 !important; }
body.dark-mode .section-title,
body.dark-mode .section-label,
body.dark-mode h1, body.dark-mode h2,
body.dark-mode h3, body.dark-mode h4 {
  color: #e8f4ef !important;
}
body.dark-mode p, body.dark-mode li,
body.dark-mode label, body.dark-mode span:not([style*="background"]) {
  color: #9ab8a8;
}
body.dark-mode .stat-label,
body.dark-mode .text-faint { color: #5a7a68 !important; }
body.dark-mode .border-light { border-color: #2a3830 !important; }
body.dark-mode hr { border-color: #2a3830 !important; }
body.dark-mode .animate-up { color: inherit; }

/* Dark mode filter chips */
body.dark-mode .filter-chip {
  border-color: #2a3830 !important;
  color: #9ab8a8 !important;
}
body.dark-mode .filter-chip.active {
  background: rgba(0,197,137,0.15) !important;
  border-color: var(--accent) !important;
  color: #00c589 !important;
}

/* Dark mode post type chips */
body.dark-mode .ptype-btn {
  border-color: #2a3830 !important;
  color: #9ab8a8 !important;
}

/* Dark mode comments */
body.dark-mode #cw- > div,
body.dark-mode [id^="cw-"] {
  border-top-color: #2a3830 !important;
}
body.dark-mode [id^="cw-"] input {
  background: #222e28 !important;
  border-color: #2a3830 !important;
  color: #e8f4ef !important;
}
body.dark-mode .msg-bubble.theirs {
  background: #1a2420 !important;
  border-color: #2a3830 !important;
  color: #e8f4ef !important;
}
body.dark-mode .convo-item:hover { background: #222e28 !important; }
body.dark-mode .convo-item.active { background: rgba(0,197,137,0.1) !important; }
body.dark-mode .chat-messages { background: #0f1411 !important; }
body.dark-mode .chat-input-row {
  background: #1a2420 !important;
  border-color: #2a3830 !important;
}
body.dark-mode .chat-input { color: #e8f4ef !important; }

/* ═══ PWA STANDALONE (installed app) — safe-area handling ═══ */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0px); }
  .top-nav { top: env(safe-area-inset-top, 0px); }
  .top-nav::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0px);
    background: rgba(255,255,255,0.97); z-index: 101;
  }
  body.dark-mode .top-nav::before { background: #0f1411; }
}
/* ═══ end PWA standalone ═══ */

/* ═══ DARK MODE — redesigned pages (auto-generated overrides) ═══ */
/* Pages that hardcode body colors (e.g. jobs.html body{background:#f0f4f2}) escape the var swap — force it */
body.dark-mode{background:var(--bg) !important;color:var(--text) !important;}
body.dark-mode .hero{background:var(--surface);border-bottom:1px solid var(--border)}
body.dark-mode .hero-bg{background:linear-gradient(to right,#10201a 0%,#0e2a20 40%,#0b3a2a 75%,#0a4531 100%)}
body.dark-mode .hero-text h1{color:var(--text)}
body.dark-mode .hero-text p{color:var(--text-dim)}
body.dark-mode .search-panel{background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--shadow-md)}
body.dark-mode .sp-fields{border-bottom:1.5px solid var(--border)}
body.dark-mode .sp-f{border-right:1.5px solid var(--border)}
body.dark-mode .sp-f:hover{background:var(--surface-2)}
body.dark-mode .sp-f-icon{color:var(--text-faint)}
body.dark-mode .sp-f-body label{color:var(--text-faint)}
body.dark-mode .sp-f-body input,body.dark-mode .sp-f-body select{color:var(--text)}
body.dark-mode .sp-f-body input::placeholder{color:var(--text-faint)}
body.dark-mode .sp-f-body select{color:var(--text)}
body.dark-mode .sp-f-chevron{color:var(--text-faint)}
body.dark-mode .sp-search-btn:hover{color:#04342C}
body.dark-mode .country-dd{background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--shadow-md)}
body.dark-mode .cdd-header{border-bottom:1px solid var(--surface-2)}
body.dark-mode .cdd-title{color:var(--text)}
body.dark-mode .cdd-badge{background:var(--surface-2);color:#45d09a}
body.dark-mode .cdd-item{color:var(--text)}
body.dark-mode .cdd-item:hover{background:var(--surface-2)}
body.dark-mode .cdd-item.active{background:var(--surface-2);color:#45d09a}
body.dark-mode .cdd-item .ci-flag{color:#45d09a}
body.dark-mode .cdd-item .ci-count{color:var(--text-faint)}
body.dark-mode .sp-type{border:1.5px solid var(--border);color:var(--text-dim);background:var(--surface)}
body.dark-mode .sp-type:hover{color:#45d09a;background:var(--surface-2)}
body.dark-mode .sl h3{color:var(--text)}
body.dark-mode .sl-row{border-bottom:1px solid var(--surface-2)}
body.dark-mode .sl-head:hover .sl-name{color:#45d09a}
body.dark-mode .sl-left .svgi{color:var(--text-faint)}
body.dark-mode .sl-right{color:var(--text-faint)}
body.dark-mode .sl-right.set{color:#45d09a}
body.dark-mode .sl-opt{color:var(--text-dim)}
body.dark-mode .sl-opt:hover{background:var(--surface-2);color:#45d09a}
body.dark-mode .sl-opt.active{background:var(--surface-2);color:#45d09a}
body.dark-mode .alert-card{border:1.5px solid var(--border);background:var(--surface)}
body.dark-mode .alert-icon{background:var(--surface-2)}
body.dark-mode .alert-text strong{color:var(--text)}
body.dark-mode .alert-text span{color:var(--text-dim)}
body.dark-mode .alert-card .arr{color:var(--text-faint)}
body.dark-mode .ja-modal{background:var(--surface);box-shadow:var(--shadow-md)}
body.dark-mode .ja-modal h4{color:var(--text)}
body.dark-mode .ja-modal p{color:var(--text-dim)}
body.dark-mode .ja-modal label{color:var(--text-faint)}
body.dark-mode .ja-modal input{border:1.5px solid var(--border);color:var(--text)}
body.dark-mode .m-cancel{background:var(--bg);color:var(--text-dim)}
body.dark-mode .m-save:hover{color:#04342C}
body.dark-mode .rb-count{color:var(--text)}
body.dark-mode .rb-sort{color:var(--text-dim)}
body.dark-mode .rb-sel{border:1.5px solid var(--border);background:var(--surface);color:var(--text)}
body.dark-mode .jc{background:var(--surface);border:1.5px solid var(--border)}
body.dark-mode .jc-logo{background:var(--surface-2);border:1.5px solid var(--border);color:#45d09a}
body.dark-mode .jc-title{color:var(--text)}
body.dark-mode .jc-meta{color:var(--text-dim)}
body.dark-mode .jc-meta .svgi{color:var(--text-faint)}
body.dark-mode .t-sal{background:var(--surface-2);color:#45d09a;border:1px solid var(--border)}
body.dark-mode .t-ghi{background:var(--surface-2);color:#45d09a;border:1px solid var(--border)}
body.dark-mode .jc-desc{color:var(--text-dim)}
body.dark-mode .jc-posted{color:var(--text-faint)}
body.dark-mode .apply-btn:hover{color:#04342C}
body.dark-mode .apply-btn.applied{color:var(--text-faint)}
body.dark-mode .sr-card{background:var(--surface);border:1.5px solid var(--border)}
body.dark-mode .sr-title{color:var(--text)}
body.dark-mode .cg-item:hover .cg-n{color:#45d09a}
body.dark-mode .cg-n{color:var(--text)}
body.dark-mode .sr-updated{color:var(--text-faint)}
body.dark-mode .stats-strip{background:var(--surface);border-top:1.5px solid var(--border)}
body.dark-mode .ss-icon{background:var(--surface-2)}
body.dark-mode .ss-item strong{color:var(--text)}
body.dark-mode .ss-item span{color:var(--text-dim)}
body.dark-mode .loading-box p{color:var(--text-dim)}
body.dark-mode .co-logo{background:var(--surface)}
body.dark-mode .prof-logo{background:var(--surface)}
body.dark-mode .cd-hero{background:var(--surface);border-bottom:1px solid var(--border)}
body.dark-mode .cd-hero-bg{background:linear-gradient(to right,#10201a 0%,#0e2a20 40%,#0b3a2a 75%,#0a4531 100%)}
body.dark-mode .cd-hero-text h1{color:var(--text)}
body.dark-mode .cd-hero-text>p{color:var(--text-dim)}
body.dark-mode .cd-hb{border:1px solid var(--border);color:#45d09a}
body.dark-mode .cd-panel{background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--shadow-md)}
body.dark-mode .cd-fields{border-bottom:1.5px solid var(--border)}
body.dark-mode .cd-f{border-right:1.5px solid var(--border)}
body.dark-mode .cd-f:hover{background:var(--surface-2)}
body.dark-mode .cd-f-icon{color:var(--text-faint)}
body.dark-mode .cd-f-body label{color:var(--text-faint)}
body.dark-mode .cd-f-body input,body.dark-mode .cd-f-body select{color:var(--text)}
body.dark-mode .cd-f-body input::placeholder{color:var(--text-faint)}
body.dark-mode .cd-btn:hover{color:#04342C}
body.dark-mode .cd-dd{background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--shadow-md)}
body.dark-mode .cd-dd-header{border-bottom:1px solid var(--surface-2);color:var(--text)}
body.dark-mode .cd-dd-badge{background:var(--surface-2);color:#45d09a}
body.dark-mode .cd-dd-item{color:var(--text)}
body.dark-mode .cd-dd-item:hover{background:var(--surface-2)}
body.dark-mode .cd-dd-item.active{background:var(--surface-2);color:#45d09a}
body.dark-mode .cd-dd-item .cnt{color:var(--text-faint)}
body.dark-mode .cd-chip{border:1.5px solid var(--border);color:var(--text-dim);background:var(--surface)}
body.dark-mode .cd-chip:hover{color:#45d09a;background:var(--surface-2)}
body.dark-mode .cd-strip{background:var(--surface);border-top:1.5px solid var(--border)}
body.dark-mode .cd-si-icon{background:var(--surface-2)}
body.dark-mode .cd-si strong{color:var(--text)}
body.dark-mode .cd-si span{color:var(--text-dim)}
body.dark-mode .cd-left h3{color:var(--text)}
body.dark-mode .cd-row{border-bottom:1px solid var(--surface-2)}
body.dark-mode .cd-row-head:hover .cd-row-name{color:#45d09a}
body.dark-mode .cd-row-left .cd-svgi{color:var(--text-faint)}
body.dark-mode .cd-row-right{color:var(--text-faint)}
body.dark-mode .cd-row-right.set{color:#45d09a}
body.dark-mode .cd-opt{color:var(--text-dim)}
body.dark-mode .cd-opt:hover{background:var(--surface-2);color:#45d09a}
body.dark-mode .cd-opt.active{background:var(--surface-2);color:#45d09a}
body.dark-mode .cd-count{color:var(--text)}
body.dark-mode .cd-card{background:var(--surface);border:1.5px solid var(--border)}
body.dark-mode .cd-card-logo{background:var(--surface-2);border:1.5px solid var(--border);color:#45d09a}
body.dark-mode .cd-card-name{color:var(--text)}
body.dark-mode .cd-card-loc{color:var(--text-dim)}
body.dark-mode .cd-roles{color:#45d09a;background:var(--surface-2);border:1px solid var(--border)}
body.dark-mode .cd-b-grad{background:var(--surface-2);color:#45d09a;border:1px solid var(--border)}
body.dark-mode .cd-prev{color:var(--text-dim)}
body.dark-mode .cd-prev b{color:var(--text-dim)}
body.dark-mode .cd-view:hover{color:#04342C}
body.dark-mode .cd-follow{background:var(--surface);color:#45d09a;border:1.5px solid var(--border)}
body.dark-mode .cd-follow:hover{background:var(--surface-2)}
body.dark-mode .cd-follow.on{background:var(--surface-2)}
body.dark-mode .cd-more{background:var(--surface);border:1.5px solid var(--border);color:#45d09a}
body.dark-mode .cd-more:hover{background:var(--surface-2)}
body.dark-mode .cd-sr{background:var(--surface);border:1.5px solid var(--border)}
body.dark-mode .cd-sr-title{color:var(--text)}
body.dark-mode .cd-sr-item{color:var(--text)}
body.dark-mode .cd-sr-item:hover{color:#45d09a}
body.dark-mode .cd-sr-item .cnt{color:var(--text-faint)}
body.dark-mode .cd-load p{color:var(--text-dim)}
body.dark-mode #directory-view{background:var(--bg)}
body.dark-mode .cd-f{border-bottom:1px solid var(--surface-2)}
body.dark-mode #nw-page{background:var(--bg)}
body.dark-mode .nw-hero{background:var(--surface);border-bottom:1px solid var(--border)}
body.dark-mode .nw-hero-bg{background:linear-gradient(to right,#10201a 0%,#0e2a20 40%,#0b3a2a 75%,#0a4531 100%)}
body.dark-mode .nw-hero-text h1{color:var(--text)}
body.dark-mode .nw-hero-text>p{color:var(--text-dim)}
body.dark-mode .nw-hb{border:1px solid var(--border);color:#45d09a}
body.dark-mode .nw-panel{background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--shadow-md)}
body.dark-mode .nw-fields{border-bottom:1.5px solid var(--border)}
body.dark-mode .nw-f{border-right:1.5px solid var(--border)}
body.dark-mode .nw-f:hover{background:var(--surface-2)}
body.dark-mode .nw-f-icon{color:var(--text-faint)}
body.dark-mode .nw-f-body label{color:var(--text-faint)}
body.dark-mode .nw-f-body input,body.dark-mode .nw-f-body select{color:var(--text)}
body.dark-mode .nw-f-body input::placeholder{color:var(--text-faint)}
body.dark-mode .nw-btn:hover{color:#04342C}
body.dark-mode .nw-dd{background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--shadow-md)}
body.dark-mode .nw-dd-header{border-bottom:1px solid var(--surface-2);color:var(--text)}
body.dark-mode .nw-dd-badge{background:var(--surface-2);color:#45d09a}
body.dark-mode .nw-dd-item{color:var(--text)}
body.dark-mode .nw-dd-item:hover{background:var(--surface-2)}
body.dark-mode .nw-dd-item.active{background:var(--surface-2);color:#45d09a}
body.dark-mode .nw-dd-item .cnt{color:var(--text-faint)}
body.dark-mode .nw-chip{border:1.5px solid var(--border);color:var(--text-dim);background:var(--surface)}
body.dark-mode .nw-chip:hover{color:#45d09a;background:var(--surface-2)}
body.dark-mode .nw-strip{background:var(--surface);border-top:1.5px solid var(--border)}
body.dark-mode .nw-si-icon{background:var(--surface-2)}
body.dark-mode .nw-si strong{color:var(--text)}
body.dark-mode .nw-si span{color:var(--text-dim)}
body.dark-mode .nw-al-btn{color:var(--text)}
body.dark-mode .nw-left h3{color:var(--text)}
body.dark-mode .nw-row{border-bottom:1px solid var(--surface-2)}
body.dark-mode .nw-row-left .nw-svgi{color:var(--text-faint)}
body.dark-mode .nw-row-right{color:var(--text-faint)}
body.dark-mode .nw-row-right.set{color:#45d09a}
body.dark-mode .nw-opt{color:var(--text-dim)}
body.dark-mode .nw-opt:hover{background:var(--surface-2);color:#45d09a}
body.dark-mode .nw-opt.active{background:var(--surface-2);color:#45d09a}
body.dark-mode .nw-tab{border:1.5px solid var(--border);color:var(--text-dim);background:var(--surface)}
body.dark-mode .nw-tab:hover{color:#45d09a}
body.dark-mode .nw-count{color:var(--text)}
body.dark-mode .nw-card{background:var(--surface);border:1.5px solid var(--border)}
body.dark-mode .nw-ava{background:var(--surface-2);border:1.5px solid var(--border);color:#45d09a}
body.dark-mode .nw-name{color:var(--text)}
body.dark-mode .nw-role{color:var(--text-dim)}
body.dark-mode .nw-loc{color:var(--text-dim)}
body.dark-mode .nw-score{color:#45d09a;background:var(--surface-2);border:1px solid var(--border)}
body.dark-mode .nw-b-alum{background:var(--surface-2);color:#45d09a;border:1px solid var(--border)}
body.dark-mode .nw-help{color:var(--text-dim)}
body.dark-mode .nw-help b{color:var(--text-dim)}
body.dark-mode .nw-msg:hover{color:#04342C}
body.dark-mode .nw-msg:disabled{color:var(--text-faint)}
body.dark-mode .nw-sec{background:var(--surface);color:#45d09a;border:1.5px solid var(--border)}
body.dark-mode .nw-sec:hover{background:var(--surface-2)}
body.dark-mode .nw-sr{background:var(--surface);border:1.5px solid var(--border)}
body.dark-mode .nw-sr-title{color:var(--text)}
body.dark-mode .nw-sr-item{color:var(--text)}
body.dark-mode .nw-sr-item:hover{color:#45d09a}
body.dark-mode .nw-sr-item .cnt{color:var(--text-faint)}
body.dark-mode .nw-sug:hover .nw-sug-name{color:#45d09a}
body.dark-mode .nw-sug-ava{background:var(--surface-2);border:1px solid var(--border);color:#45d09a}
body.dark-mode .nw-sug-name{color:var(--text)}
body.dark-mode .nw-sug-why{color:var(--text-faint)}
body.dark-mode .nw-load p{color:var(--text-dim)}
body.dark-mode .nw-f{border-bottom:1px solid var(--surface-2)}
body.dark-mode #al-page{background:var(--bg)}
body.dark-mode .al-hero{background:var(--surface);border-bottom:1px solid var(--border)}
body.dark-mode .al-hero-bg{background:linear-gradient(to right,#10201a 0%,#0e2a20 40%,#0b3a2a 75%,#0a4531 100%)}
body.dark-mode .al-hero-text h1{color:var(--text)}
body.dark-mode .al-hero-text>p{color:var(--text-dim)}
body.dark-mode .al-cta:hover{color:#04342C}
body.dark-mode .al-cta.ghost{background:var(--surface);color:#45d09a;border:1.5px solid var(--border)}
body.dark-mode .al-cta.ghost:hover{background:var(--surface-2)}
body.dark-mode .al-hb{border:1px solid var(--border);color:#45d09a}
body.dark-mode .al-uc-btn{color:var(--text)}
body.dark-mode .al-panel{background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--shadow-md)}
body.dark-mode .al-fields{border-bottom:1.5px solid var(--border)}
body.dark-mode .al-f{border-right:1.5px solid var(--border)}
body.dark-mode .al-f:hover{background:var(--surface-2)}
body.dark-mode .al-f-icon{color:var(--text-faint)}
body.dark-mode .al-f-body label{color:var(--text-faint)}
body.dark-mode .al-f-body input,body.dark-mode .al-f-body select{color:var(--text)}
body.dark-mode .al-f-body input::placeholder{color:var(--text-faint)}
body.dark-mode .al-btn:hover{color:#04342C}
body.dark-mode .al-chip{border:1.5px solid var(--border);color:var(--text-dim);background:var(--surface)}
body.dark-mode .al-chip:hover{color:#45d09a;background:var(--surface-2)}
body.dark-mode .al-count{color:var(--text)}
body.dark-mode .al-card{background:var(--surface);border:1.5px solid var(--border)}
body.dark-mode .al-ava{background:var(--surface-2);border:1.5px solid var(--border);color:#45d09a}
body.dark-mode .al-name{color:var(--text)}
body.dark-mode .al-class{color:var(--text-faint)}
body.dark-mode .al-head{color:var(--text-dim)}
body.dark-mode .al-loc{color:var(--text-dim)}
body.dark-mode .al-b-alum{background:var(--surface-2);color:#45d09a;border:1px solid var(--border)}
body.dark-mode .al-help{color:var(--text-dim)}
body.dark-mode .al-help b{color:var(--text-dim)}
body.dark-mode .al-connect:hover{color:#04342C}
body.dark-mode .al-connect.pending{color:var(--text-faint)}
body.dark-mode .al-connect.connected{background:var(--surface);color:#45d09a}
body.dark-mode .al-sec{background:var(--surface);color:#45d09a;border:1.5px solid var(--border)}
body.dark-mode .al-sec:hover{background:var(--surface-2)}
body.dark-mode .al-empty{background:var(--surface);border:1.5px solid var(--border)}
body.dark-mode .al-empty-icon{background:var(--surface-2)}
body.dark-mode .al-empty h3{color:var(--text)}
body.dark-mode .al-empty p{color:var(--text-dim)}
body.dark-mode .al-invitee{color:#45d09a;background:var(--surface-2);border:1px solid var(--border)}
body.dark-mode .al-disc{background:var(--surface);border:1.5px solid var(--border)}
body.dark-mode .al-disc-title{color:var(--text)}
body.dark-mode .al-disc-item{color:var(--text);background:var(--surface-2);border:1.5px solid var(--border)}
body.dark-mode .al-disc-item:hover{color:#45d09a}
body.dark-mode .al-disc-item .cnt{color:var(--text-faint)}
body.dark-mode .al-sr{background:var(--surface);border:1.5px solid var(--border)}
body.dark-mode .al-sr-title{color:var(--text)}
body.dark-mode .al-sr-item{color:var(--text)}
body.dark-mode .al-sr-item:hover{color:#45d09a}
body.dark-mode .al-sr-item .cnt{color:var(--text-faint)}
body.dark-mode .al-sr-item .al-svgi{color:var(--text-faint)}
body.dark-mode .al-strip{background:var(--surface);border-top:1.5px solid var(--border)}
body.dark-mode .al-si-icon{background:var(--surface-2)}
body.dark-mode .al-si strong{color:var(--text)}
body.dark-mode .al-si span{color:var(--text-dim)}
body.dark-mode .al-load p{color:var(--text-dim)}
body.dark-mode .al-f{border-bottom:1px solid var(--surface-2)}
body.dark-mode .featured-btn{color:var(--text)}
body.dark-mode .spinner{border-top-color:var(--surface)}
body.dark-mode .lp-cta{color:var(--text)}
body.dark-mode .lp-roles{border:1.5px solid var(--border)}
body.dark-mode .lp-role-chip{border:1.5px solid var(--border);color:var(--text-dim)}
body.dark-mode .lp-role-chip:hover{color:#45d09a}
body.dark-mode .lp-role-input{border:1.5px solid var(--border)}
body.dark-mode .lp-gap{background:linear-gradient(to right,#10201a 0%,#0e2a20 40%,#0b3a2a 75%,#0a4531 100%);border:1.5px solid var(--border)}
body.dark-mode .lp-gap-title{color:var(--text)}
body.dark-mode .lp-gap-role{color:#45d09a}
body.dark-mode .lp-gap-lbl{color:var(--text-faint)}
body.dark-mode .lp-skill.have{background:var(--surface);color:#45d09a;border:1px solid var(--border)}
body.dark-mode .lp-gap-meta{color:var(--text-dim)}
body.dark-mode .lp-gap-meta b{color:#45d09a}
body.dark-mode .lp-gbtn:hover{color:#04342C}
body.dark-mode .lp-gbtn.ghost{background:var(--surface);color:#45d09a;border:1.5px solid var(--border)}
body.dark-mode .lp-tab{border:1.5px solid var(--border);color:var(--text-dim)}
body.dark-mode .lp-tab:hover{color:#45d09a}
body.dark-mode .lp-sr{border:1.5px solid var(--border)}
body.dark-mode .lp-sr-item .pct{color:#45d09a}
body.dark-mode .lp-sbar{background:var(--surface-2)}
body.dark-mode .lp-si{border:1.5px solid var(--border)}
body.dark-mode .lp-si-icon{background:var(--surface-2)}
body.dark-mode .lp-level-badge{color:var(--text)}
body.dark-mode .lp-goal-check{border:2px solid var(--border)}
body.dark-mode .msg-search:focus{background:var(--surface)}
body.dark-mode .online-dot{border:2px solid var(--surface)}
body.dark-mode .chat-input-row:focus-within{background:var(--surface)}
body.dark-mode .mi-act{color:#45d09a;background:var(--surface-2);border:1.5px solid var(--border)}
body.dark-mode .mi-b-alum{background:var(--surface-2);color:#45d09a}
body.dark-mode .mi-ctx-ava{background:var(--surface-2);border:2px solid var(--border);color:#45d09a}
body.dark-mode .mi-ctx-btn:hover{color:#04342C}
body.dark-mode .mi-ctx-btn.ghost{color:#45d09a;border:1.5px solid var(--border)}
body.dark-mode .mch-cta{color:var(--text)}
body.dark-mode .mch-nba-i .pct{color:var(--text)}
body.dark-mode .mch-stat{border:1.5px solid var(--border,var(--border))}
body.dark-mode .mch-card{border:1.5px solid var(--border,var(--border))}
body.dark-mode .mch-card-t a{color:#45d09a}
body.dark-mode .mch-pipe-s{background:var(--surface-2);border:1px solid var(--border)}
body.dark-mode .mch-pipe-s b{color:#45d09a}
body.dark-mode .mch-pipe-s span{color:var(--text-faint)}
body.dark-mode .mch-job{border-bottom:1px solid var(--border,var(--surface-2))}
body.dark-mode .mch-match{color:#45d09a;background:var(--surface-2);border:1.5px solid var(--border)}
body.dark-mode .mch-bar{background:var(--surface-2)}
body.dark-mode .hch-cta{color:var(--text)}
body.dark-mode .hch-card{border:1.5px solid var(--border,var(--border))}
body.dark-mode .hch-big{color:#45d09a}
body.dark-mode .hch-jrow{border-top:1px solid var(--border,var(--surface-2))}
body.dark-mode .hch-ps{background:var(--surface-2);border:1px solid var(--border)}
body.dark-mode .hch-ps b{color:#45d09a}
body.dark-mode .hch-ps span{color:var(--text-faint)}
body.dark-mode .hch-bar{background:var(--surface-2)}
body.dark-mode .hch-go{background:var(--surface-2);border:1.5px solid var(--border);color:#45d09a}
body.dark-mode .hch-steps .it:hover{color:#45d09a}
body.dark-mode .hch-steps .dot{border:2px solid var(--border)}
body.dark-mode .al-hb{background:rgba(255,255,255,0.08);}
body.dark-mode .cd-hb{background:rgba(255,255,255,0.08);border:1px solid var(--border);color:#45d09a;}
body.dark-mode .nw-hb{background:rgba(255,255,255,0.08);}
/* ═══ end redesign dark mode ═══ */