/* ===== BizPilotHR — Premium Brand System v3 ===== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#050505;
  --bg1:#0c0c0c;
  --bg2:#111111;
  --bg3:#181818;
  --bg4:#222222;
  --bg5:#2a2a2a;

  --border:rgba(255,255,255,0.06);
  --border2:rgba(255,255,255,0.1);
  --border3:rgba(255,255,255,0.16);

  --text:#ffffff;
  --text2:rgba(255,255,255,0.7);
  --text3:rgba(255,255,255,0.35);

  /* BRAND */
  --accent:#f5c800;
  --accent2:#e6b800;
  --accent-glow:rgba(245,200,0,0.2);
  --accent-soft:rgba(245,200,0,0.08);

  /* NEON RED hover */
  --neon:#ff2244;
  --neon-glow:rgba(255,34,68,0.22);
  --neon-soft:rgba(255,34,68,0.08);

  /* Semantic */
  --cyan:#00d4c8;
  --green:#22c55e;
  --red:#ff2244;

  --sidebar-w:232px;
  --topbar-h:60px;
  --r-xs:4px;
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;

  --font-display:'Bebas Neue',sans-serif;
  --font:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

/* scrollbar */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:2px}

html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  font-size:13.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-weight:500;
}

/* ── NEON HOVER — применяется ко всем блокам ── */
.neon-hover{
  transition:
    transform 0.22s cubic-bezier(0.22,1,0.36,1),
    border-color 0.22s,
    box-shadow 0.22s;
}
.neon-hover:hover{position:relative;z-index:10;
  transform:translateY(-2px);
  border-color:rgba(255,34,68,0.55) !important;
  box-shadow:
    0 0 0 1px rgba(255,34,68,0.25),
    0 0 16px rgba(255,34,68,0.12),
    0 0 40px rgba(255,34,68,0.06),
    0 14px 40px rgba(0,0,0,0.6) !important;
}

/* ── APP SHELL ── */
.app-shell{display:flex;min-height:100vh}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--sidebar-w);
  background:#080808;
  border-right:1px solid rgba(255,255,255,0.07);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:100;
}
.sidebar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent) 0%,transparent 100%);
}

.sidebar-logo{
  display:flex;align-items:center;gap:11px;
  padding:20px 16px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.logo-mark{
  width:34px;height:34px;
  background:var(--accent);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 20px rgba(245,200,0,0.25),inset 0 1px 0 rgba(255,255,255,0.2);
  animation:float 3.5s ease-in-out infinite;
}
.logo-text{
  font-family:var(--font-display);
  font-size:19px;letter-spacing:0.06em;color:#fff;line-height:1;font-weight:400;
}
.logo-text span{color:var(--accent)}

.sidebar-nav{flex:1;padding:10px 8px;overflow-y:auto;scrollbar-width:none}
.sidebar-nav::-webkit-scrollbar{display:none}

.nav-section-label{
  font-size:9px;font-weight:800;text-transform:uppercase;
  letter-spacing:0.14em;color:rgba(255,255,255,0.22);
  padding:0 8px;margin:14px 0 4px;
  display:flex;align-items:center;gap:8px;
}
.nav-section-label::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.06)}

.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:var(--r-sm);
  color:rgba(255,255,255,0.82);text-decoration:none;
  font-size:13px;font-weight:700;
  transition:all 0.14s;cursor:pointer;margin-bottom:2px;
  border:1px solid transparent;position:relative;
  letter-spacing:-0.01em;
}
.nav-item:hover{
  background:rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.8);
  border-color:rgba(255,255,255,0.08);
  transform:translateX(2px);
}
.nav-item.active{
  background:rgba(245,200,0,0.09);
  color:var(--accent);
  border-color:rgba(245,200,0,0.22);
  font-weight:700;
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:2px;background:var(--accent);border-radius:0 2px 2px 0;
}
.nav-item svg{flex-shrink:0;opacity:0.7}
.nav-item.active svg{opacity:1;color:var(--accent)}
.nav-item:hover svg{opacity:1}

.nav-badge{
  margin-left:auto;font-size:9px;padding:2px 7px;
  border-radius:8px;background:#1a1a1a;
  color:rgba(255,255,255,0.35);font-weight:700;
  font-family:var(--mono);letter-spacing:0;
}
.nav-badge.live{background:rgba(34,197,94,0.09);color:var(--green);border:1px solid rgba(34,197,94,0.2)}

.sidebar-footer{padding:10px 10px 14px;border-top:1px solid rgba(255,255,255,0.05);display:flex;flex-direction:column;gap:7px}

.ai-status-pill{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;color:var(--green);font-weight:600;
  background:rgba(34,197,94,0.06);
  border:1px solid rgba(34,197,94,0.15);
  border-radius:20px;padding:5px 10px;
}
.pulse-dot{
  width:6px;height:6px;background:var(--green);border-radius:50%;
  box-shadow:0 0 6px rgba(34,197,94,0.5);flex-shrink:0;
  animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}

.duck-mascot{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:var(--r-sm);
  background:rgba(245,200,0,0.04);
  border:1px solid rgba(245,200,0,0.1);
  cursor:pointer;transition:all 0.15s;
}
.duck-mascot:hover{background:rgba(245,200,0,0.08);border-color:rgba(245,200,0,0.22)}
.duck-emoji{font-size:20px;animation:float 4s ease-in-out infinite;display:inline-block;filter:drop-shadow(0 0 8px rgba(245,200,0,0.3))}
.duck-txt{font-size:9.5px;color:var(--accent);font-weight:800;line-height:1.35;letter-spacing:0.04em}

.user-card{
  display:flex;align-items:center;gap:9px;
  padding:7px 8px;border-radius:var(--r-sm);
  cursor:pointer;transition:all 0.14s;
  border:1px solid transparent;
}
.user-card:hover{background:#111;border-color:rgba(255,255,255,0.08)}
.user-avatar{
  width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#000;
  flex-shrink:0;overflow:hidden;
  box-shadow:0 2px 8px rgba(245,200,0,0.2);
}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-name{font-size:12.5px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.user-role{font-size:10px;color:rgba(255,255,255,0.3);font-weight:500}

/* ── MAIN ── */
.main-content{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column}

/* ── TOPBAR ── */
.topbar{
  height:var(--topbar-h);
  border-bottom:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;position:sticky;top:0;z-index:50;
  background:rgba(5,5,5,0.92);backdrop-filter:blur(16px);
}
.topbar::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,200,0,0.25),transparent);
}
.topbar-left{display:flex;align-items:baseline;gap:12px}
.page-title{
  font-family:var(--font-display);
  font-size:22px;letter-spacing:0.06em;color:#fff;font-weight:400;
}
.page-subtitle{font-size:11px;color:rgba(255,255,255,0.3);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:8px}

/* SEARCH */
.search-box{
  display:flex;align-items:center;gap:8px;
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--r-sm);padding:7px 12px;
  width:200px;transition:all 0.2s;
}
.search-box:focus-within{border-color:rgba(245,200,0,0.4);box-shadow:0 0 0 3px rgba(245,200,0,0.06);width:240px}
.search-box svg{color:rgba(255,255,255,0.3);flex-shrink:0}
.search-box input{background:none;border:none;outline:none;color:#fff;font-size:12.5px;font-family:var(--font);font-weight:500;width:100%}
.search-box input::placeholder{color:rgba(255,255,255,0.25)}

/* BUTTONS */
.btn-primary{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:#000;border:none;border-radius:var(--r-sm);
  padding:9px 16px;font-size:12.5px;font-weight:800;
  font-family:var(--font);cursor:pointer;transition:all 0.15s;
  white-space:nowrap;letter-spacing:0.01em;
  box-shadow:0 4px 16px rgba(245,200,0,0.2);
}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(245,200,0,0.3)}
.btn-primary:active{transform:scale(0.97)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid var(--border2);
  color:rgba(255,255,255,0.55);border-radius:var(--r-sm);
  padding:7px 13px;font-size:12px;font-weight:600;
  font-family:var(--font);cursor:pointer;transition:all 0.14s;
}
.btn-ghost:hover{background:rgba(255,255,255,0.06);color:#fff;border-color:var(--border3)}
.btn-ghost:active{transform:scale(0.97)}

.btn-danger{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid rgba(255,34,68,0.3);
  color:var(--red);border-radius:var(--r-sm);
  padding:7px 13px;font-size:12px;font-weight:600;
  font-family:var(--font);cursor:pointer;transition:all 0.14s;
}
.btn-danger:hover{background:rgba(255,34,68,0.08);border-color:rgba(255,34,68,0.5)}

/* NOTIF BTN */
.notif-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--r-sm);cursor:pointer;color:rgba(255,255,255,0.4);transition:all 0.14s;
}
.notif-btn:hover{border-color:var(--neon);color:var(--neon);box-shadow:0 0 12px rgba(255,34,68,0.2)}

/* ── DASHBOARD BODY ── */
.dashboard-body{padding:18px 22px 40px;display:flex;flex-direction:column;gap:14px}

/* ── METRIC CARDS ── */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

.metric-card{
  background:var(--bg1);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r);padding:20px 18px;
  position:relative;overflow:hidden;cursor:default;
}
.metric-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.metric-card:hover::after{transform:scaleX(1)}

.metric-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.metric-label{font-size:10px;font-weight:800;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.1em}
.metric-icon-wrap{width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.i-yellow{background:rgba(245,200,0,0.1);color:var(--accent);border:1px solid rgba(245,200,0,0.2)}
.i-cyan{background:rgba(0,212,200,0.08);color:var(--cyan);border:1px solid rgba(0,212,200,0.15)}
.i-green{background:rgba(34,197,94,0.08);color:var(--green);border:1px solid rgba(34,197,94,0.15)}
.i-red{background:rgba(255,34,68,0.08);color:var(--neon);border:1px solid rgba(255,34,68,0.15)}

.metric-value{
  font-family:var(--font-display);
  font-size:38px;letter-spacing:0.04em;line-height:1;
  color:#fff;margin-bottom:5px;
}
.mv-yellow{color:var(--accent)}
.mv-cyan{color:var(--cyan)}
.mv-green{color:var(--green)}
.mv-red{color:var(--neon)}

.metric-delta{font-size:11.5px;color:rgba(255,255,255,0.38);font-weight:500}
.d-up{color:var(--green)}
.d-down{color:var(--neon)}

.metric-bar{height:2px;background:rgba(255,255,255,0.07);border-radius:1px;margin-top:14px;overflow:hidden}
.metric-bar-fill{height:100%;border-radius:1px;transition:width 1.2s cubic-bezier(0.22,1,0.36,1)}
.mf-yellow{background:var(--accent)}
.mf-cyan{background:var(--cyan)}
.mf-green{background:var(--green)}
.mf-red{background:var(--neon)}

/* ── PANELS ── */
.full-panel,.panel{
  background:var(--bg1);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r);overflow:hidden;
}
.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.06);
}
.panel-title-group{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:#fff;letter-spacing:-0.01em;
}
.panel-title-group svg{color:rgba(255,255,255,0.35)}

.badge-active{font-size:9.5px;padding:3px 9px;border-radius:20px;background:rgba(34,197,94,0.08);color:var(--green);border:1px solid rgba(34,197,94,0.2);font-weight:700}
.badge-live{font-size:9.5px;padding:3px 9px;border-radius:20px;background:rgba(34,197,94,0.06);color:var(--green);border:1px solid rgba(34,197,94,0.15);font-weight:700}
.badge-info{font-size:9.5px;padding:3px 9px;border-radius:20px;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(245,200,0,0.2);font-weight:700;font-family:var(--mono)}

/* ── KANBAN ── */
.kanban-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px}
.kanban-col{display:flex;flex-direction:column;gap:5px}
.kanban-col-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.kanban-col-title{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.3)}
.kanban-col-count{font-size:9px;font-weight:800;color:#000;background:var(--accent);padding:2px 8px;border-radius:6px;font-family:var(--mono)}

.cand-card{
  background:var(--bg2);border:1px solid rgba(255,255,255,0.07);
  border-radius:var(--r-sm);padding:10px;cursor:pointer;
  position:relative;overflow:hidden;
}
.cand-card.hot::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.cand-name{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand-role{font-size:10px;color:rgba(255,255,255,0.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font-weight:500}
.cand-tags{display:flex;gap:3px;margin-top:7px;flex-wrap:wrap}

.tag{font-size:9px;padding:2px 6px;border-radius:var(--r-xs);font-weight:700}
.tag-tg{background:rgba(0,212,200,0.08);color:var(--cyan);border:1px solid rgba(0,212,200,0.15)}
.tag-wa{background:rgba(34,197,94,0.08);color:var(--green);border:1px solid rgba(34,197,94,0.15)}
.tag-hh{background:rgba(255,34,68,0.08);color:var(--neon);border:1px solid rgba(255,34,68,0.15)}
.tag-av{background:rgba(245,200,0,0.08);color:var(--accent);border:1px solid rgba(245,200,0,0.15)}
.tag-hot{background:rgba(245,200,0,0.09);color:var(--accent);border:1px solid rgba(245,200,0,0.2)}

.score-bar{height:2px;background:rgba(255,255,255,0.06);border-radius:1px;margin-top:8px;overflow:hidden}
.score-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:1px;transition:width 0.9s cubic-bezier(0.22,1,0.36,1)}

/* ── ACTIVITY ── */
.activity-list{display:flex;flex-direction:column}
.activity-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 16px;border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background 0.1s;cursor:default;
}
.activity-item:hover{background:rgba(255,255,255,0.02)}
.activity-item:last-child{border:none}
.act-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;font-weight:700}
.act-body{flex:1;min-width:0}
.act-title{font-size:12.5px;font-weight:600;color:#fff;line-height:1.4}
.act-sub{font-size:10.5px;color:rgba(255,255,255,0.38);margin-top:2px;font-weight:500}
.act-time{font-size:9.5px;color:rgba(255,255,255,0.22);flex-shrink:0;margin-top:2px;font-family:var(--mono)}

/* ── TABLE ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead tr{border-bottom:1px solid rgba(255,255,255,0.08)}
th{font-size:10px;font-weight:800;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.1em;padding:11px 14px;text-align:left;white-space:nowrap}
td{padding:12px 14px;font-size:13px;font-weight:500;border-bottom:1px solid rgba(255,255,255,0.05);vertical-align:middle;color:#fff}
tr:last-child td{border:none}
tbody tr{transition:background 0.1s}
tbody tr:hover{background:rgba(255,255,255,0.025)}

/* ── STATUS CHIPS ── */
.status-chip{font-size:10px;padding:3px 10px;border-radius:20px;font-weight:700;border:1px solid;display:inline-flex;align-items:center;gap:4px}
.chip-new{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.4);border-color:rgba(255,255,255,0.1)}
.chip-contact{background:rgba(0,212,200,0.08);color:var(--cyan);border-color:rgba(0,212,200,0.2)}
.chip-qual{background:rgba(245,200,0,0.08);color:var(--accent);border-color:rgba(245,200,0,0.2)}
.chip-sched{background:rgba(34,197,94,0.08);color:var(--green);border-color:rgba(34,197,94,0.2)}
.chip-hired{background:rgba(34,197,94,0.1);color:var(--green);border-color:rgba(34,197,94,0.25);font-weight:800}
.chip-arch{background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.07)}

/* ── CHART ── */
.chart-bars{display:flex;align-items:flex-end;gap:4px;height:70px}
.chart-bar{flex:1;border-radius:3px 3px 0 0;min-height:3px;cursor:pointer;transition:filter 0.15s,transform 0.15s}
.chart-bar:hover{filter:brightness(1.5);transform:scaleY(1.05);transform-origin:bottom}
.chart-labels{display:flex;margin-top:6px}
.chart-lbl{font-size:9px;color:rgba(255,255,255,0.25);text-align:center;flex:1;font-family:var(--mono);font-weight:500}

/* ── CHANNELS ── */
.channel-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-sm);
  background:var(--bg2);border:1px solid rgba(255,255,255,0.07);
  cursor:pointer;transition:all 0.14s;
}
.channel-item:hover{border-color:rgba(255,255,255,0.14);background:var(--bg3);transform:translateY(-1px)}
.ch-logo{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex-shrink:0}
.ch-name{font-size:12.5px;font-weight:700;color:#fff}
.ch-stat{font-size:10px;color:rgba(255,255,255,0.3);font-weight:500}
.ch-badge{font-size:9.5px;padding:2px 7px;border-radius:6px;font-weight:700}
.ch-on{background:rgba(34,197,94,0.09);color:var(--green);border:1px solid rgba(34,197,94,0.2)}
.ch-off{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.3);border:1px solid rgba(255,255,255,0.07)}

/* ── AI MODULES ── */
.ai-module-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,0.05);transition:background 0.1s}
.ai-module-item:hover{background:rgba(255,255,255,0.02)}
.ai-module-item:last-child{border:none}
.ai-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ai-dot.active{background:var(--green);box-shadow:0 0 6px rgba(34,197,94,0.5);animation:pulse-dot 2s ease infinite}
.ai-dot.idle{background:var(--bg5)}
.ai-module-name{font-size:13px;font-weight:600;color:#fff}
.ai-module-model{font-size:10px;color:rgba(255,255,255,0.3);font-family:var(--mono);font-weight:400}
.ai-module-stat{font-size:11px;color:rgba(255,255,255,0.45);font-weight:500}

/* ── DIALOGS ── */
.msg-bubble-in{
  background:var(--bg3);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px 12px 12px 3px;
  padding:10px 14px;
  font-size:13px;color:#fff;font-weight:500;
  line-height:1.55;word-break:break-word;
  max-width:75%;
}
.msg-bubble-out{
  background:rgba(245,200,0,0.12);
  border:1px solid rgba(245,200,0,0.25);
  border-radius:12px 12px 3px 12px;
  padding:10px 14px;
  font-size:13px;color:#fff;font-weight:500;
  line-height:1.55;word-break:break-word;
  max-width:75%;
}
.msg-bubble-ai{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px 12px 3px 12px;
  padding:10px 14px;
  font-size:13px;color:rgba(255,255,255,0.75);font-weight:500;
  line-height:1.55;word-break:break-word;
  max-width:75%;
}
.msg-ai-label{font-size:9px;color:var(--accent);font-weight:800;letter-spacing:0.06em;margin-bottom:3px;text-transform:uppercase}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(6px);z-index:500;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--bg1);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-lg);width:480px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,0.8);position:relative}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),rgba(245,200,0,0.3))}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,0.07)}
.modal-title{font-family:var(--font-display);font-size:20px;letter-spacing:0.06em;color:#fff;font-weight:400}
.modal-close{background:none;border:none;color:rgba(255,255,255,0.4);font-size:18px;cursor:pointer;padding:4px;border-radius:4px;transition:color 0.15s;line-height:1}
.modal-close:hover{color:#fff}
.modal-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid rgba(255,255,255,0.07)}

/* ── FORMS ── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:10px;font-weight:800;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.09em}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],
select,textarea{
  background:var(--bg2);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-sm);
  padding:10px 12px;font-size:13px;font-family:var(--font);font-weight:500;color:#fff;
  outline:none;transition:border-color 0.14s,box-shadow 0.14s;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:rgba(245,200,0,0.4);box-shadow:0 0 0 3px rgba(245,200,0,0.06)}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.2)}
select{appearance:none;cursor:pointer}
textarea{resize:vertical;min-height:80px}

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;right:20px;background:var(--bg2);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r);padding:12px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,0.8);z-index:600;max-width:320px;color:#fff}
.toast-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ── NOTIF ── */
.notif-panel{position:fixed;top:64px;right:14px;width:300px;background:var(--bg2);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r);box-shadow:0 16px 48px rgba(0,0,0,0.8);z-index:200;display:none;overflow:hidden}
.notif-panel.open{display:block}

/* ── SKELETON ── */
.skeleton{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:600px 100%;border-radius:var(--r-sm)}

/* ── SPINNER ── */
.tos-spinner{width:18px;height:18px;border:2px solid var(--bg5);border-top-color:var(--accent);border-radius:50%;display:inline-block;flex-shrink:0;animation:spin 0.65s linear infinite}

/* ── ANIMATIONS ── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.93)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}

.page-enter{animation:fadeUp 0.4s cubic-bezier(0.22,1,0.36,1) both}
.act-new{animation:slideRight 0.3s cubic-bezier(0.22,1,0.36,1) both}
.modal-overlay.open .modal{animation:scaleIn 0.22s cubic-bezier(0.22,1,0.36,1) both}
.toast{animation:slideRight 0.22s cubic-bezier(0.22,1,0.36,1) both}
.skeleton{animation:shimmer 1.5s infinite linear}

.stagger-grid>*{opacity:0;animation:fadeUp 0.4s cubic-bezier(0.22,1,0.36,1) forwards}
.stagger-grid>*:nth-child(1){animation-delay:.04s}
.stagger-grid>*:nth-child(2){animation-delay:.08s}
.stagger-grid>*:nth-child(3){animation-delay:.12s}
.stagger-grid>*:nth-child(4){animation-delay:.16s}
.stagger-grid>*:nth-child(5){animation-delay:.20s}
.stagger-grid>*:nth-child(6){animation-delay:.24s}

/* ── RESPONSIVE ── */
@media(max-width:1280px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  :root{--sidebar-w:58px}
  .logo-text,.nav-item>span,.nav-badge,.nav-section-label,
  .user-name,.user-role,.duck-txt,.ai-status-pill span{display:none}
  .nav-item{justify-content:center;padding:10px}
}
@media(max-width:600px){.sidebar{display:none}.main-content{margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── DIALOG PAGE SPECIFIC ── */
.dialog-shell{display:grid;grid-template-columns:280px 1fr;height:calc(100vh - 60px);overflow:hidden}
.dialog-list{border-right:1px solid rgba(255,255,255,0.06);overflow-y:auto;display:flex;flex-direction:column}
.dialog-search{padding:10px;border-bottom:1px solid rgba(255,255,255,0.06)}
.dialog-search input{width:100%;background:var(--bg2);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-sm);padding:7px 10px;font-size:12.5px;font-weight:500;color:#fff;font-family:var(--font);outline:none}
.dialog-search input::placeholder{color:rgba(255,255,255,0.25)}
.dialog-item{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.05);cursor:pointer;display:flex;align-items:flex-start;gap:10px;transition:background 0.1s}
.dialog-item:hover,.dialog-item.active{background:rgba(255,255,255,0.04)}
.dialog-item.active{border-left:2px solid var(--accent)}
.d-av{width:36px;height:36px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#000;flex-shrink:0}
.d-name{font-size:13px;font-weight:700;color:#fff}
.d-preview{font-size:10.5px;color:rgba(255,255,255,0.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font-weight:500}

.chat-area{display:flex;flex-direction:column;height:100%;overflow:hidden}
.chat-header{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.chat-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px}

.msg{display:flex;flex-direction:column;gap:3px}
.msg.out{align-self:flex-end;align-items:flex-end}
.msg.in{align-self:flex-start}
.msg-time{font-size:9.5px;color:rgba(255,255,255,0.2);font-family:var(--mono);font-weight:400}

.chat-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,0.06);display:flex;gap:8px;align-items:flex-end;flex-shrink:0;background:var(--bg1)}
.chat-input-wrap{flex:1;background:var(--bg2);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r);padding:9px 13px;transition:border-color 0.15s}
.chat-input-wrap:focus-within{border-color:rgba(245,200,0,0.35)}
.chat-textarea{width:100%;background:none;border:none;outline:none;color:#fff;font-size:13px;font-weight:500;font-family:var(--font);resize:none;max-height:100px;min-height:22px}
.chat-textarea::placeholder{color:rgba(255,255,255,0.2)}
.empty-chat{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:rgba(255,255,255,0.2);gap:12px;text-align:center;font-weight:500}

/* ── NEON HOVER FIX — text stays white, only border/shadow changes ── */
.neon-hover{
  transition:
    transform 0.22s cubic-bezier(0.22,1,0.36,1),
    border-color 0.22s,
    box-shadow 0.22s;
}
.neon-hover:hover{position:relative;z-index:10;
  transform:translateY(-2px);
  border-color:rgba(255,34,68,0.55) !important;
  box-shadow:
    0 0 0 1px rgba(255,34,68,0.22),
    0 0 18px rgba(255,34,68,0.1),
    0 0 40px rgba(255,34,68,0.05),
    0 14px 40px rgba(0,0,0,0.55) !important;
}
/* Ensure text colors are NOT affected by hover */
.neon-hover:hover .metric-value,
.neon-hover:hover .mv-yellow,
.neon-hover:hover .mv-cyan,
.neon-hover:hover .mv-green,
.neon-hover:hover .mv-red,
.neon-hover:hover .metric-label,
.neon-hover:hover .metric-delta,
.neon-hover:hover .panel-title-group,
.neon-hover:hover .cand-name,
.neon-hover:hover .cand-role,
.neon-hover:hover .act-title,
.neon-hover:hover .act-sub,
.neon-hover:hover .ai-module-name,
.neon-hover:hover .ch-name,
.neon-hover:hover .ch-stat {
  color:inherit !important;
}
.neon-hover:hover .mv-yellow{color:var(--accent) !important}
.neon-hover:hover .mv-cyan{color:var(--cyan) !important}
.neon-hover:hover .mv-green{color:var(--green) !important}
.neon-hover:hover .mv-red{color:var(--neon) !important}

/* ── NAV SECTION LABEL brighter ── */
.nav-section-label{
  color:rgba(255,255,255,0.5) !important;
  font-weight:900;
}

/* ── NAV ITEM base state — очень яркий ── */
.nav-item{
  color:rgba(255,255,255,0.82) !important;
  font-weight:700;
}
.nav-item:hover{color:#fff !important}
.nav-item.active{color:var(--accent) !important;font-weight:800}

/* ── SIDEBAR TEXT ── */
.user-name{color:#fff !important;font-weight:700}
.user-role{color:rgba(255,255,255,0.5) !important}
.duck-txt{color:var(--accent) !important;font-weight:800}
.ai-status-pill{color:var(--green) !important;font-weight:700}
.nav-item{color:rgba(255,255,255,0.82)!important;font-weight:700!important;font-size:13px!important}
.nav-item.active{color:var(--accent)!important;font-weight:800!important}
select option{background:#1a1a1a;color:#fff;font-family:'Inter',sans-serif}

/* ── MOBILE ADAPTATION ── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  
  /* Скрываем сайдбар на мобиле */
  .sidebar { display: none; }
  .main-content { margin-left: 0 !important; }
  
  /* Топбар */
  .topbar { padding: 0 14px; height: 52px; }
  .page-title { font-size: 16px; }
  .topbar-right { gap: 6px; }
  .search-box { display: none; }
  
  /* Dashboard body */
  .dashboard-body { padding: 12px 14px 30px; gap: 10px; }
  
  /* Метрики — 2 колонки */
  .metrics-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px; }
  .metric-value { font-size: 26px; }
  
  /* Канбан — скролл горизонтально */
  .kanban-grid { 
    grid-template-columns: repeat(5,200px) !important;
    overflow-x: auto; padding-bottom: 8px;
  }
  
  /* Mid grid — вертикально */
  .mid-grid { grid-template-columns: 1fr !important; }
  
  /* Bottom grid — вертикально */
  .bottom-grid { grid-template-columns: 1fr !important; }
  
  /* Panels */
  .full-panel, .panel, .panel-block { border-radius: 8px; }
  
  /* Table — скролл */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  
  /* Dialogs */
  .dialog-shell { grid-template-columns: 1fr !important; }
  .dialog-left { height: 40vh; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  
  /* Billing */
  .billing-grid { grid-template-columns: 1fr !important; }
  
  /* Forms */
  .form-row { grid-template-columns: 1fr !important; }
  
  /* Buttons */
  .btn-primary, .btn-ghost { font-size: 12px; padding: 8px 12px; }

  /* Profile */
  .profile-grid { grid-template-columns: 1fr !important; }
  
  /* Integrations */
  .int-grid { grid-template-columns: 1fr !important; }

  /* Analytics */
  .usage-grid { grid-template-columns: 1fr !important; }
  
  /* Modals */
  .modal { width: 95vw !important; margin: 0 auto; }
}

/* ── MOBILE NAV BAR (снизу) ── */
@media (max-width: 768px) {
  .mobile-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: rgba(10,10,10,0.95);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: space-around;
    padding: 8px 0 12px;
    backdrop-filter: blur(16px);
  }
  .mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: rgba(255,255,255,0.35); text-decoration: none;
    font-size: 10px; font-weight: 600; padding: 4px 12px;
    border-radius: 8px; transition: color .15s;
  }
  .mobile-nav-item.active { color: var(--accent); }
  .mobile-nav-item svg { width: 20px; height: 20px; }
  
  /* Отступ снизу для контента */
  .main-content { padding-bottom: 60px; }
}

/* ── MOBILE FIX ── */
@media (max-width: 768px) {
  /* Скрываем сайдбар полностью */
  .sidebar { display: none !important; }
  .main-content { margin-left: 0 !important; }
  
  /* Фикс мобильной навигации */
  .mobile-nav {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 999 !important;
    background: #0a0a0a !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 8px 0 16px !important;
    height: 60px !important;
  }
  .mobile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    color: rgba(255,255,255,0.4) !important;
    text-decoration: none !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    font-family: 'Inter', sans-serif !important;
  }
  .mobile-nav-item svg {
    width: 20px !important;
    height: 20px !important;
    stroke: rgba(255,255,255,0.4) !important;
  }
  .mobile-nav-item.active { color: #f5c800 !important; }
  .mobile-nav-item.active svg { stroke: #f5c800 !important; }
  
  /* Контент не перекрывается навигацией */
  .dashboard-body { padding-bottom: 70px !important; }
  .main-content { padding-bottom: 0 !important; }
  
  /* Диалоги на мобиле — только список */
  .dialog-shell { grid-template-columns: 1fr !important; height: auto !important; }
  .chat-area { display: none !important; }
  .dialog-left { height: calc(100vh - 112px) !important; border-right: none !important; }
  
  /* Метрики 2x2 */
  .metrics-grid, .metrics-row { 
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 8px !important;
  }
  
  /* Скрываем канбан на мобиле - показываем таблицу */
  .kanban-grid { display: none !important; }
  
  /* Топбар компактнее */
  .topbar { padding: 0 12px !important; }
  .page-title { font-size: 15px !important; }
  .search-box { display: none !important; }
  
  /* Таблицы */
  .table-wrap { overflow-x: auto !important; }
  table { min-width: 500px !important; }
  
  /* Полная ширина */
  .full-panel, .panel, .panel-block { border-radius: 8px !important; }
}

/* FIX: neon-hover не должен скрывать содержимое */
.neon-hover {
  transform-style: flat !important;
  backface-visibility: visible !important;
}
.metric-card.neon-hover:hover {
  transform: translateY(-2px) !important;
  z-index: 10 !important;
  position: relative !important;
}
.metric-card.neon-hover:hover * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* FINAL FIX neon-hover - только border и shadow, без transform scale */
.neon-hover:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,34,68,0.55) !important;
  box-shadow: 0 0 0 1px rgba(255,34,68,0.22), 0 0 18px rgba(255,34,68,0.1), 0 14px 40px rgba(0,0,0,0.55) !important;
  z-index: 10 !important;
  position: relative !important;
}
.stagger-grid{overflow:visible!important}
.dashboard-body{overflow:visible!important}

/* ── NEON STATUS CHIPS ── */
.chip-hired {
  background: rgba(34,197,94,0.08) !important;
  color: #22c55e !important;
  border: 1px solid rgba(34,197,94,0.25) !important;
  box-shadow: 0 0 8px rgba(34,197,94,0.2), 0 0 20px rgba(34,197,94,0.06) !important;
}
.chip-sched {
  background: rgba(245,200,0,0.08) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(245,200,0,0.3) !important;
  box-shadow: 0 0 8px rgba(245,200,0,0.2), 0 0 20px rgba(245,200,0,0.06) !important;
}
.chip-qual {
  background: rgba(0,212,200,0.08) !important;
  color: #00d4c8 !important;
  border: 1px solid rgba(0,212,200,0.25) !important;
  box-shadow: 0 0 8px rgba(0,212,200,0.15) !important;
}
.chip-contact {
  background: rgba(139,92,246,0.08) !important;
  color: #a78bfa !important;
  border: 1px solid rgba(139,92,246,0.2) !important;
}
.chip-new {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

/* AI Score neon colors in tables */
.ai-score-high { color: #22c55e !important; font-weight: 800 !important; text-shadow: 0 0 8px rgba(34,197,94,0.4) !important; }
.ai-score-mid  { color: var(--accent) !important; font-weight: 800 !important; text-shadow: 0 0 8px rgba(245,200,0,0.4) !important; }
.ai-score-low  { color: #ff2244 !important; font-weight: 800 !important; }

/* Hot candidate neon */
.cand-card.hot::before { background: linear-gradient(90deg,var(--accent),rgba(255,34,68,0.6)) !important; height: 2px !important; }
.is-hot { color: var(--accent) !important; text-shadow: 0 0 8px rgba(245,200,0,0.5) !important; }

/* Chip-new visible */
.chip-new, .status-chip.chip-new {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  box-shadow: none !important;
}

/* Fix chip colors */
.chip-new {
  background: rgba(100,116,139,0.15) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(100,116,139,0.3) !important;
}
.chip-arch, .chip-archived {
  background: rgba(100,116,139,0.1) !important;
  color: rgba(255,255,255,0.35) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.chip-contact {
  background: rgba(139,92,246,0.1) !important;
  color: #a78bfa !important;
  border: 1px solid rgba(139,92,246,0.25) !important;
}
.chip-qual {
  background: rgba(0,212,200,0.08) !important;
  color: #00d4c8 !important;
  border: 1px solid rgba(0,212,200,0.25) !important;
  box-shadow: 0 0 8px rgba(0,212,200,0.15) !important;
}
.chip-sched {
  background: rgba(245,200,0,0.08) !important;
  color: #f5c800 !important;
  border: 1px solid rgba(245,200,0,0.3) !important;
  box-shadow: 0 0 8px rgba(245,200,0,0.2) !important;
}
.chip-hired {
  background: rgba(34,197,94,0.08) !important;
  color: #22c55e !important;
  border: 1px solid rgba(34,197,94,0.25) !important;
  box-shadow: 0 0 8px rgba(34,197,94,0.2) !important;
}