static/css/style.css - main - NeuralNetworkCorporation/TechTalentHub

static/css/style.css
1 679 строк112 KB
Tim Gray Fan
Prepare project for defense and 1C artifacts
03 июн 2026, 09:49
03 июн 2026, 09:49f87494a
/* ╔══════════════════════════════════════════════════════╗
   ║  TechTalentHub  —  Aurora UI  v8                    ║
   ║  Полный редизайн: preloader · parallax · AOS         ║
   ╚══════════════════════════════════════════════════════╝ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --ff:  'Inter', system-ui, sans-serif;
  --ffd: 'Bricolage Grotesque', system-ui, sans-serif;

  --bg:    #eef2fa;
  --sur:   #ffffff;
  --sur2:  #f5f7fc;
  --bor:   rgba(10,14,40,.09);
  --bor2:  rgba(10,14,40,.16);
  --txt:   #09092a;
  --txt2:  #3a4468;
  --mut:   #6b7499;

  --p:  #4c3aff;
  --p2: #3525d4;
  --tl: #22d3ee;
  --pk: #ec4899;
  --gn: #10b981;
  --am: #f59e0b;
  --rd: #ef4444;

  --gb: linear-gradient(135deg, #4c3aff 0%, #22d3ee 55%, #ec4899 100%);
  --gi: linear-gradient(160deg, #070919 0%, #0c1030 100%);
  --ga:
    radial-gradient(55% 70% at 8%   5%,  rgba(6,182,212,.22),   transparent 60%),
    radial-gradient(50% 60% at 92%  12%, rgba(236,72,153,.18),  transparent 60%),
    radial-gradient(65% 80% at 50%  110%,rgba(76,58,255,.20),   transparent 60%);

  --s0: 0 1px 3px rgba(10,14,40,.07);
  --s1: 0 4px 16px -2px rgba(10,14,40,.10), 0 1px 3px rgba(10,14,40,.06);
  --s2: 0 16px 40px -10px rgba(10,14,40,.18), 0 4px 12px rgba(10,14,40,.06);
  --s3: 0 32px 64px -20px rgba(10,14,40,.28), 0 12px 24px rgba(10,14,40,.08);

  --r:  14px;  --rl: 22px;  --rx: 32px;
  --tr: .22s cubic-bezier(.4,0,.2,1);
  --ts: .4s  cubic-bezier(.34,1.56,.64,1);
}

[data-theme=dark] {
  --bg: #07091c; --sur: #0f1432; --sur2: #141a3e;
  --bor: rgba(255,255,255,.09); --bor2: rgba(255,255,255,.16);
  --txt: #e6eaf7; --txt2: #a8b3d4; --mut: #7584a8;
  --ga:
    radial-gradient(55% 70% at 8%  5%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(50% 60% at 92% 12%,rgba(236,72,153,.14), transparent 60%),
    radial-gradient(65% 80% at 50% 110%,rgba(76,58,255,.22), transparent 60%);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  font-family: var(--ff); font-size: 15px; line-height: 1.6;
  color: var(--txt); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background .35s, color .25s;
}
body::before {
  content: ''; position: fixed; inset: -30% -10%;
  background: var(--ga); z-index: -2; pointer-events: none;
  animation: aur 28s ease-in-out infinite alternate;
}
@keyframes aur { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(4%,-4%,0) rotate(4deg)} }
h1,h2,h3,h4,h5,h6 { font-family:var(--ffd); font-weight:800; letter-spacing:-.03em; color:var(--txt); margin:0 }
a { text-decoration:none; color:var(--p); transition:color var(--tr) }
::selection { background:rgba(76,58,255,.2); color:var(--txt) }

/* ── PRELOADER ──────────────────────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 9990;
  background: #050814;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  transition: opacity .8s cubic-bezier(.4,0,.2,1), visibility .8s;
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none }

/* звёздный фон */
.preloader::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 90%, rgba(76,58,255,.55), transparent 55%),
    radial-gradient(ellipse 60% 55% at 85% 5%,  rgba(236,72,153,.45), transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(34,211,238,.3),  transparent 55%);
  animation: aur 8s ease-in-out infinite alternate;
}
.preloader::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 65% 85%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 55% 20%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 75% 65%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 30% 90%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 5%  20%, rgba(255,255,255,.5), transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { 0%{opacity:.6} 100%{opacity:1} }

.pl-wrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  animation: plIn .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes plIn { from{opacity:0;transform:translateY(30px) scale(.9)} to{opacity:1;transform:none} }

.pl-logo {
  width: 96px; height: 96px; border-radius: 28px;
  background: var(--gb);
  display: grid; place-items: center; color: #fff; font-size: 40px;
  box-shadow: 0 0 0 0 rgba(76,58,255,.4), 0 30px 80px -20px rgba(76,58,255,.8);
  animation: plPulse 2s ease-in-out infinite;
  position: relative; overflow: hidden;
}
.pl-logo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  animation: plShine 2.5s ease-in-out infinite;
}
@keyframes plPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(76,58,255,.4),0 30px 80px -20px rgba(76,58,255,.8) }
  50%      { box-shadow:0 0 0 20px rgba(76,58,255,0),0 30px 80px -20px rgba(76,58,255,.9);transform:scale(1.04) }
}
@keyframes plShine { 0%{transform:translateX(-200%) rotate(45deg)} 100%{transform:translateX(200%) rotate(45deg)} }

.pl-title {
  font-family: var(--ffd); font-weight: 900; font-size: 32px; letter-spacing: -.06em;
  color: #fff; text-align: center;
}
.pl-title .hl { background:linear-gradient(90deg,#a3eaff,#ffb1d3,#ffd6a3); -webkit-background-clip:text; background-clip:text; color:transparent }

.pl-sub { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.4) }

.pl-bar-wrap { width: 260px; position: relative }
.pl-bar {
  height: 3px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden;
}
.pl-bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #4c3aff, #22d3ee, #ec4899);
  animation: plBar 1.6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes plBar { 0%{width:0%} 60%{width:75%} 100%{width:100%} }
.pl-pct {
  position: absolute; right: 0; top: -20px;
  font-family: monospace; font-size: 11px; color: rgba(255,255,255,.5);
  animation: plPct 1.6s linear forwards;
}
@keyframes plPct {
  0%{counter-reset:c 0} 100%{counter-reset:c 100}
}

/* ── CUSTOM CURSOR ──────────────────────────────────────── */
@media(hover:hover) and (pointer:fine) {
  html.use-cursor, html.use-cursor * { cursor: none !important }
}
.cur-dot, .cur-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  transform: translate(-200px,-200px); will-change: transform; mix-blend-mode: difference;
}
.cur-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff; margin: -3px 0 0 -3px;
  transition: width .15s, height .15s, margin .15s, border-radius .15s;
}
.cur-ring {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.9); margin: -18px 0 0 -18px;
  transition: width .22s, height .22s, margin .22s, background .22s;
}
.cur-hover .cur-dot { width:0; height:0; margin:0 }
.cur-hover .cur-ring { width:60px; height:60px; margin:-30px 0 0 -30px; background:rgba(255,255,255,.08) }
.cur-click .cur-ring { width:26px; height:26px; margin:-13px 0 0 -13px; background:rgba(255,255,255,.3) }
.cur-text  .cur-dot  { width:2px; height:20px; border-radius:1px; margin:-10px 0 0 -1px }
.cur-text  .cur-ring { width:0; height:0; border-width:0; margin:0 }
@media(hover:none),(pointer:coarse) { .cur-dot,.cur-ring { display:none } }

/* ── SCROLL PROGRESS (правая полоса) ────────────────────── */
.scroll-rail {
  position: fixed; top: 0; right: 0; width: 3px; height: 100vh; z-index: 9997;
  background: rgba(76,58,255,.1);
}
.scroll-rail-fill {
  width: 100%; height: 0%; border-radius: 99px;
  background: var(--gb);
  transition: height 60ms linear;
  box-shadow: 0 0 8px rgba(76,58,255,.5);
}

/* ── PAGE TRANSITION ────────────────────────────────────── */
.pg-overlay {
  position: fixed; inset: 0; z-index: 9998; background: var(--gi);
  transform: translateY(100%); pointer-events: none;
  transition: transform .45s cubic-bezier(.76,0,.24,1);
}
.pg-overlay.on { transform: translateY(0) }

/* ── BACK TO TOP ────────────────────────────────────────── */
.btt {
  position: fixed; bottom: 28px; right: 18px; z-index: 50;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--gb); color: #fff; border: none;
  display: grid; place-items: center; font-size: .95rem;
  box-shadow: var(--s2); opacity: 0; transform: translateY(16px) scale(.9);
  pointer-events: none; transition: all var(--tr);
}
.btt.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto }
.btt:hover { transform:translateY(-4px) scale(1.07) }

/* ── TOAST ──────────────────────────────────────────────── */
.toast-stack { position:fixed; bottom:24px; left:24px; z-index:9996; display:flex; flex-direction:column; gap:.4rem; pointer-events:none }
.toast-msg { background:var(--sur); border:1px solid var(--bor); border-radius:13px; padding:.65rem 1.1rem; font-size:.86rem; color:var(--txt); box-shadow:var(--s3); display:flex; align-items:center; gap:.55rem; pointer-events:auto; animation:tin .3s cubic-bezier(.22,1,.36,1) }
.toast-msg.out { animation:tout .28s ease forwards }
.toast-msg i { color:var(--p) }
@keyframes tin  { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }
@keyframes tout { to{opacity:0;transform:translateX(-20px)} }

/* ── NAVBAR ─────────────────────────────────────────────── */
.tth-nav {
  background: rgba(6,8,24,.88) !important;
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: .55rem 0;
}
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--gb); display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 20px -4px rgba(34,211,238,.5), inset 0 1px 0 rgba(255,255,255,.3);
  flex-shrink: 0; transition: transform var(--ts);
}
.navbar-brand:hover .brand-mark { transform: rotate(-14deg) scale(1.1) }
.brand-name { font-family:var(--ffd); font-weight:800; font-size:1.05rem; letter-spacing:-.03em; color:#fff }
.tth-nav .nav-link { color:rgba(255,255,255,.68)!important; padding:.45rem .9rem!important; border-radius:10px; font-weight:500; font-size:.9rem; transition:color var(--tr),background var(--tr) }
.tth-nav .nav-link:hover, .tth-nav .nav-link.active { color:#fff!important; background:rgba(255,255,255,.08) }
.tth-nav .nav-link i { opacity:.65; font-size:.85em }
.tth-nav .navbar-toggler { border:0; color:rgba(255,255,255,.8) }
.tth-nav .navbar-toggler-icon { filter:invert(1) }

.btn-theme {
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.8); cursor:pointer; font-size:.9rem;
  transition:background var(--tr),transform var(--tr);
}
.btn-theme:hover { background:rgba(255,255,255,.17); transform:rotate(-18deg) scale(1.1); color:#fff }
.icon-sun { display:none }
[data-theme=dark] .icon-sun { display:block }
[data-theme=dark] .icon-moon { display:none }

.btn-nav-sm {
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.85); border-radius:9px; padding:.38rem .85rem;
  font-size:.88rem; font-weight:600; transition:background var(--tr);
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
}
.btn-nav-sm:hover { background:rgba(255,255,255,.18); color:#fff }
.tth-drop {
  background:rgba(10,14,40,.96); backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.09); border-radius:14px;
  box-shadow:var(--s3); padding:.45rem;
}
.tth-drop .dropdown-header { color:rgba(255,255,255,.4); font-size:.76rem }
.tth-drop .dropdown-item  { color:rgba(255,255,255,.8); border-radius:8px; font-size:.9rem }
.tth-drop .dropdown-item:hover { background:rgba(255,255,255,.09); color:#fff }
.tth-drop .dropdown-divider  { border-color:rgba(255,255,255,.08) }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  font-family:var(--ff); font-weight:600; letter-spacing:-.01em;
  border-radius:11px; position:relative; overflow:hidden;
  transition:transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr), border-color var(--tr);
}
.btn-lg { border-radius:13px; font-size:1rem; padding:.75rem 1.6rem }
.btn-sm { border-radius:9px; font-size:.82rem; padding:.34rem .85rem }

.btn-primary {
  background:var(--gb); border:none; color:#fff;
  box-shadow: 0 8px 24px -8px rgba(76,58,255,.55);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(76,58,255,.7); color:#fff }
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28),transparent 70%);
  transform:translateX(-120%); transition:transform .65s;
}
.btn-primary:hover::after { transform:translateX(120%) }

.btn-secondary {
  background: var(--sur) !important;
  border: 1px solid var(--bor) !important;
  color: var(--txt) !important;
  box-shadow: var(--s0);
}
.btn-secondary:hover {
  background: var(--sur) !important;
  border-color: rgba(76,58,255,.3) !important;
  color: var(--txt) !important;
  transform: translateY(-1px);
  box-shadow: var(--s1) !important;
}
.btn-ghost {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important; backdrop-filter:blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.4) !important;
  color: #fff !important; transform:translateY(-1px);
}

/* ── CARDS ──────────────────────────────────────────────── */
.card {
  background:var(--sur); border:1px solid var(--bor); border-radius:var(--rl);
  box-shadow:var(--s1); overflow:hidden; color:var(--txt);
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.card-header { background:transparent; border-bottom:1px solid var(--bor); padding:1rem 1.4rem }
.card-body { color:var(--txt) }
.card-title { font-family:var(--ffd); font-weight:700; font-size:1rem; letter-spacing:-.02em; margin:0; color:var(--txt) }

/* Spotlight hover */
.sp {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden;
}
.sp::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(76,58,255,.11), transparent 65%);
  opacity:0; transition:opacity var(--tr);
}
.sp:hover::before { opacity:1 }
.sp:hover { transform:translateY(-4px); box-shadow:var(--s2); border-color:rgba(76,58,255,.22) }

/* ── METRIC CARDS ────────────────────────────────────────── */
.metric-card {
  background:var(--sur); border:1px solid var(--bor); border-radius:var(--rl);
  padding:1.5rem; box-shadow:var(--s1);
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  position:relative; overflow:hidden; --mx:50%; --my:50%;
}
.metric-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(300px circle at var(--mx) var(--my),rgba(76,58,255,.11),transparent 65%);
  opacity:0; transition:opacity var(--tr);
}
.metric-card:hover::before { opacity:1 }
.metric-card:hover { transform:translateY(-4px); box-shadow:var(--s2); border-color:rgba(76,58,255,.22) }
.m-label { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:.4rem }
.m-value { font-family:var(--ffd); font-size:2.5rem; font-weight:900; letter-spacing:-.05em; color:var(--txt); line-height:1 }
.m-help  { font-size:.8rem; color:var(--mut); margin-top:.35rem }
.m-icon  { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.05rem; flex-shrink:0; transition:transform var(--ts) }
.metric-card:hover .m-icon, .sp:hover .m-icon { transform:rotate(-8deg) scale(1.1) }

.ico-p  { background:linear-gradient(135deg,#dde0ff,#bdc0ff); color:#2515a1 }
.ico-tl { background:linear-gradient(135deg,#cffafe,#a5f3fc); color:#0e7490 }
.ico-pk { background:linear-gradient(135deg,#fce7f3,#fbcfe8); color:#9d174d }
.ico-am { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e }
.ico-gn { background:linear-gradient(135deg,#d1fae5,#a7f3d0); color:#065f46 }
.ico-rd { background:linear-gradient(135deg,#fee2e2,#fecaca); color:#991b1b }
.ico-gy { background:linear-gradient(135deg,#e2e8f0,#cbd5e1); color:#475569 }
[data-theme=dark] .ico-p  { background:rgba(76,58,255,.22); color:#bdc0ff }
[data-theme=dark] .ico-tl { background:rgba(34,211,238,.18); color:#a5f3fc }
[data-theme=dark] .ico-pk { background:rgba(236,72,153,.18); color:#fbcfe8 }
[data-theme=dark] .ico-am { background:rgba(245,158,11,.18); color:#fbbf24 }
[data-theme=dark] .ico-gn { background:rgba(16,185,129,.18); color:#86efac }
[data-theme=dark] .ico-rd { background:rgba(239,68,68,.18);  color:#fca5a5 }
[data-theme=dark] .ico-gy { background:rgba(100,116,139,.18);color:#94a3b8 }

/* ── FEATURE CARDS ───────────────────────────────────────── */
.feature-card {
  background:var(--sur); border:1px solid var(--bor); border-radius:var(--rl);
  padding:1.8rem; height:100%; position:relative; overflow:hidden;
  --mx:50%; --my:50%;
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.feature-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(300px circle at var(--mx) var(--my),rgba(76,58,255,.10),transparent 65%);
  opacity:0; transition:opacity var(--tr);
}
.feature-card:hover::before { opacity:1 }
.feature-card:hover { transform:translateY(-5px); box-shadow:var(--s2); border-color:rgba(76,58,255,.25) }
.feature-card h3 { font-size:1.15rem; margin:.9rem 0 .55rem }
.feature-card p  { color:var(--txt2); font-size:.92rem; line-height:1.65; margin:0 }

/* ── STATUS BADGES ───────────────────────────────────────── */
.badge-status {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .8rem; border-radius:99px; font-size:.75rem; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
}
.badge-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; animation:bl 2s ease-in-out infinite }
@keyframes bl { 50%{opacity:.35} }
.bs-approved { background:rgba(16,185,129,.12); color:#065f46; border-color:rgba(16,185,129,.25) }
.bs-pending  { background:rgba(245,158,11,.12);  color:#92400e; border-color:rgba(245,158,11,.28) }
.bs-rejected { background:rgba(239,68,68,.12);   color:#991b1b; border-color:rgba(239,68,68,.22)  }
.bs-draft    { background:rgba(100,116,139,.12);  color:#475569; border-color:rgba(100,116,139,.22)}
[data-theme=dark] .bs-approved { color:#86efac }
[data-theme=dark] .bs-pending  { color:#fbbf24 }
[data-theme=dark] .bs-rejected { color:#fca5a5 }
[data-theme=dark] .bs-draft    { color:#94a3b8 }

/* ── CHIPS ───────────────────────────────────────────────── */
.chip-group { display:flex; flex-wrap:wrap; gap:.45rem }
.chip {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .9rem; border-radius:99px;
  background:var(--sur); border:1px solid var(--bor);
  font-size:.8rem; font-weight:500; color:var(--txt);
  cursor:pointer; transition:all var(--tr); white-space:nowrap;
}
.chip:hover { border-color:rgba(76,58,255,.35); transform:translateY(-1px); box-shadow:var(--s0) }
.chip.active { background:var(--gb); color:#fff; border-color:transparent; box-shadow:0 4px 14px -4px rgba(76,58,255,.5) }
.chip-count { font-size:.7rem; font-family:monospace; padding:.08rem .4rem; border-radius:99px; background:rgba(0,0,0,.08); min-width:22px; text-align:center }
.chip.active .chip-count { background:rgba(255,255,255,.22) }

/* ── TABLE ───────────────────────────────────────────────── */
.tth-table { color:var(--txt); font-size:.9rem; margin:0; width:100% }
.tth-table thead th { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); border-bottom:1px solid var(--bor); background:var(--sur2); padding:.9rem 1.3rem }
.tth-table tbody td { padding:1rem 1.3rem; border-color:var(--bor); color:var(--txt); vertical-align:middle }
.tth-table tbody tr { transition:background var(--tr) }
.tth-table tbody tr:hover { background:rgba(76,58,255,.04) }

/* ── PROGRESS ────────────────────────────────────────────── */
.tth-progress { height:7px; background:rgba(76,58,255,.1); border-radius:99px; overflow:hidden }
.tth-progress-bar { height:100%; border-radius:99px; background:var(--gb); width:0; transition:width .9s cubic-bezier(.22,1,.36,1); position:relative; overflow:hidden }
.tth-progress-bar::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:shim 2.4s ease-in-out infinite }
@keyframes shim { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* ── FORMS ───────────────────────────────────────────────── */
.form-label { font-size:.82rem; font-weight:600; color:var(--txt2); margin-bottom:.38rem }
.form-control, .form-select {
  border:1px solid var(--bor); border-radius:11px; padding:.68rem .98rem;
  font-size:.93rem; background:var(--sur); color:var(--txt);
  transition:border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.form-control::placeholder { color:var(--mut) }
.form-control:focus, .form-select:focus {
  border-color:var(--p); box-shadow:0 0 0 3px rgba(76,58,255,.16);
  background:var(--sur); color:var(--txt); transform:translateY(-1px); outline:none;
}
.form-check-input { border-color:var(--bor); border-radius:5px; background:var(--sur) }
.form-check-input:checked { background-color:var(--p); border-color:var(--p) }
.search-wrap { position:relative }
.search-wrap .form-control { padding-left:2.5rem }
.search-wrap::before { content:'\f002'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; left:.95rem; top:50%; transform:translateY(-50%); color:var(--mut); pointer-events:none; font-size:.82rem }

/* ── ALERTS ──────────────────────────────────────────────── */
.alert { border-radius:12px; font-size:.9rem }
.alert-success { background:rgba(16,185,129,.1);  border-color:rgba(16,185,129,.25); color:#065f46 }
.alert-danger  { background:rgba(239,68,68,.1);    border-color:rgba(239,68,68,.22);  color:#991b1b }
.alert-warning { background:rgba(245,158,11,.1);   border-color:rgba(245,158,11,.25); color:#92400e }
.alert-info    { background:rgba(14,165,233,.1);   border-color:rgba(14,165,233,.22); color:#075985 }
[data-theme=dark] .alert-success{color:#86efac}[data-theme=dark] .alert-danger{color:#fca5a5}
[data-theme=dark] .alert-warning{color:#fbbf24}[data-theme=dark] .alert-info{color:#7dd3fc}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state { text-align:center; padding:3.5rem 1.5rem; color:var(--mut) }
.empty-icon { width:68px; height:68px; border-radius:20px; background:rgba(76,58,255,.08); display:grid; place-items:center; margin:0 auto .9rem; color:rgba(76,58,255,.5); font-size:1.9rem }
.empty-state h5 { color:var(--txt); margin:.25rem 0 .5rem }

/* ── PAGE HEADER ─────────────────────────────────────────── */
.page-hdr { padding-bottom:1.4rem; margin-bottom:2rem; border-bottom:1px solid var(--bor) }
.label-tag { display:inline-flex; align-items:center; gap:.45rem; font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--p); margin-bottom:.55rem }
.label-tag::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(76,58,255,.15); animation:bl 2.2s ease-in-out infinite }
.page-hdr h1 { font-size:clamp(1.9rem,3vw,2.7rem); font-weight:900; letter-spacing:-.048em; line-height:1 }
.page-hdr .subtitle { color:var(--mut); font-size:.95rem; margin-top:.4rem }

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb { font-size:.85rem; margin-bottom:.5rem }
.breadcrumb-item a { color:var(--txt2) }
.breadcrumb-item+.breadcrumb-item::before { content:'›'; color:var(--mut) }
.breadcrumb-item.active { color:var(--txt) }

/* ── DETAIL ITEMS ────────────────────────────────────────── */
.detail-item { padding:.9rem 1.1rem; border:1px solid var(--bor); border-radius:12px; background:var(--sur); transition:transform var(--tr),border-color var(--tr) }
.detail-item:hover { transform:translateY(-2px); border-color:rgba(76,58,255,.25) }
.di-label { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); font-weight:700; margin-bottom:.3rem }
.di-value { font-weight:600; color:var(--txt); font-size:.95rem }

/* ── TIMELINE ────────────────────────────────────────────── */
.timeline { position:relative; padding-left:38px }
.timeline::before { content:''; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--p),var(--tl),var(--pk)); opacity:.22; border-radius:99px }
.tl-item { position:relative; padding-bottom:1.8rem }
.tl-item:last-child { padding-bottom:0 }
.tl-dot { position:absolute; left:-38px; top:0; width:32px; height:32px; border-radius:50%; background:var(--sur); border:2px solid var(--bor); display:grid; place-items:center; font-size:.75rem; color:var(--mut); transition:all var(--tr) }
.tl-item.done     .tl-dot { background:var(--gb); border-color:transparent; color:#fff; box-shadow:0 4px 14px -4px rgba(76,58,255,.6) }
.tl-item.current  .tl-dot { border-color:var(--am); color:var(--am); box-shadow:0 0 0 4px rgba(245,158,11,.15); animation:bl 2s ease-in-out infinite }
.tl-item.rejected .tl-dot { background:linear-gradient(135deg,#ef4444,#f97316); border-color:transparent; color:#fff }
.tl-title { font-weight:700; font-size:.95rem; color:var(--txt) }
.tl-meta  { font-size:.8rem; color:var(--mut); margin-top:.2rem }

/* ── SPARKLINE ───────────────────────────────────────────── */
.sparkline { width:100%; height:36px; margin-top:.6rem }
.sp-path { fill:none; stroke:url(#sg); stroke-width:2; stroke-linecap:round; stroke-dasharray:300; stroke-dashoffset:300; animation:drawsp 1.6s cubic-bezier(.22,1,.36,1) .3s forwards }
.sp-fill { fill:url(#sf); opacity:0; animation:fadein .8s ease 1.1s forwards }
@keyframes drawsp { to{stroke-dashoffset:0} }
@keyframes fadein { to{opacity:.3} }

/* ══════════════════════════════════════════════════════════
   LANDING
   ══════════════════════════════════════════════════════════ */

/* HERO */
.hero {
  position: relative; background: var(--gi);
  color: #fff; overflow: hidden; isolation: isolate;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(65% 85% at 85% -8%,  rgba(236,72,153,.45), transparent 58%),
    radial-gradient(75% 95% at -8% 108%, rgba(76,58,255,.55),  transparent 60%),
    radial-gradient(55% 70% at 55% 55%,  rgba(34,211,238,.35), transparent 60%);
  animation: aur 20s ease-in-out infinite alternate;
}
.hero::after {
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:50px 50px;
  mask-image: radial-gradient(ellipse 85% 85% at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at center, #000 20%, transparent 70%);
}
.hero-inner { position:relative; z-index:1; padding:100px 0 80px; width:100% }
.hero-orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; will-change:transform }
.hero-orb.a { width:500px; height:500px; background:radial-gradient(circle,#ec4899,transparent 70%); top:-150px; right:-100px }
.hero-orb.b { width:430px; height:430px; background:radial-gradient(circle,#4c3aff,transparent 70%); bottom:-130px; left:-70px }
.hero-orb.c { width:300px; height:300px; background:radial-gradient(circle,#22d3ee,transparent 70%); top:30%; left:42%; opacity:.28 }

.hero-tag { display:inline-flex; align-items:center; gap:.55rem; padding:.48rem 1rem; border-radius:99px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(12px); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.9); font-weight:600 }
.hero-h1 { font-size:clamp(2.8rem,5.8vw,5.6rem); font-weight:900; letter-spacing:-.058em; line-height:.95; color:#fff; margin:1.1rem 0 1rem }
.hero-h1 .grad { background:linear-gradient(90deg,#a3eaff 0%,#ffb1d3 60%,#ffd6a3 100%); background-size:200%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gmove 7s ease-in-out infinite }
@keyframes gmove { 0%,100%{background-position:0%} 50%{background-position:100%} }
.hero-lead { font-size:1.08rem; color:rgba(255,255,255,.72); max-width:52ch; margin-bottom:2.2rem; line-height:1.68 }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem }
.hero-stats { display:flex; flex-wrap:wrap; gap:2.5rem; padding-top:2rem; margin-top:2rem; border-top:1px solid rgba(255,255,255,.1) }
.hs-num { font-family:var(--ffd); font-size:2.2rem; font-weight:900; letter-spacing:-.04em; color:#fff }
.hs-label { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:.2rem }

/* Workflow panel */
.wf-panel { background:rgba(255,255,255,.07); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.13); border-radius:var(--rx); padding:1.6rem; box-shadow:0 32px 64px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.13) }
.wf-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:.9rem; margin-bottom:.9rem; border-bottom:1px solid rgba(255,255,255,.08); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5) }
.live-pill { display:inline-flex; align-items:center; gap:.4rem; color:#a3e635 }
.live-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(163,230,53,.2); animation:bl 1.8s ease-in-out infinite }
.wf-items { display:flex; flex-direction:column; gap:.5rem }
.wf-item { display:flex; align-items:center; gap:.9rem; padding:.8rem 1rem; border-radius:13px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,.9); transition:background var(--tr),transform var(--tr),border-color var(--tr) }
.wf-item:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.14); transform:translateX(4px) }
.wf-num { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); display:grid; place-items:center; font-family:monospace; font-weight:700; font-size:.82rem; color:#a3eaff; flex-shrink:0 }
.wf-title { font-weight:600; font-size:.92rem; color:#fff }
.wf-sub   { font-size:.74rem; color:rgba(255,255,255,.5); margin-top:.1rem }
.wf-tag   { margin-left:auto; font-size:.6rem; letter-spacing:.14em; color:#a3e635; padding:.22rem .6rem; border-radius:99px; background:rgba(163,230,53,.1); border:1px solid rgba(163,230,53,.22) }

/* Marquee */
.marquee-wrap { overflow:hidden; padding:20px 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.2); margin-top:60px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.marquee-track { display:flex; align-items:center; gap:3rem; white-space:nowrap; width:max-content; font-size:.8rem; letter-spacing:.22em; font-weight:700; color:rgba(255,255,255,.42); animation:mq 42s linear infinite }
.marquee-wrap:hover .marquee-track { animation-play-state:paused }
.marquee-block { display:inline-flex; align-items:center; gap:3rem; flex-shrink:0 }
.marquee-sep { display:inline-block; width:7px; height:7px; background:linear-gradient(135deg,#22d3ee,#ec4899); transform:rotate(45deg); border-radius:2px; opacity:.6 }
@keyframes mq { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-50%,0,0)} }

/* Landing sections */
.section { padding:96px 0 }
.section-alt { background:linear-gradient(180deg,var(--sur2),var(--sur)); border-top:1px solid var(--bor); border-bottom:1px solid var(--bor) }
[data-theme=dark] .section-alt { background:linear-gradient(180deg,rgba(15,21,52,.55),rgba(15,21,52,.9)) }
.section-tag { display:inline-flex; align-items:center; gap:.45rem; font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--p); margin-bottom:.65rem }
.section-tag::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(76,58,255,.15); animation:bl 2.2s ease-in-out infinite }
.section-h2  { font-size:clamp(2rem,4vw,3.4rem); font-weight:900; letter-spacing:-.048em; line-height:1.02; color:var(--txt) }
.section-lead { font-size:1.05rem; color:var(--txt2); max-width:58ch; line-height:1.68 }

/* Stats band */
.stats-band { display:flex; flex-wrap:wrap; border:1px solid var(--bor); border-radius:var(--rx); overflow:hidden; background:var(--sur); box-shadow:var(--s1) }
.sbi { flex:1; min-width:160px; padding:2.2rem 2rem; text-align:center; position:relative; transition:background var(--tr) }
.sbi + .sbi { border-left:1px solid var(--bor) }
.sbi:hover { background:rgba(76,58,255,.03) }
.sbi-num { font-family:var(--ffd); font-size:3rem; font-weight:900; letter-spacing:-.06em; display:block; background:var(--gb); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1 }
.sbi-label { font-size:.78rem; color:var(--mut); margin-top:.55rem; letter-spacing:.04em }

/* Bento */
.bento { display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem }
.bn   { grid-column:span 4 }
.bn-6 { grid-column:span 6 }
.bn-8 { grid-column:span 8 }
.bn-r2{ grid-row:span 2 }
.bento-card { background:var(--sur); border:1px solid var(--bor); border-radius:var(--rl); padding:1.5rem; box-shadow:var(--s1); min-height:140px; display:flex; flex-direction:column; justify-content:space-between; transition:transform var(--tr),box-shadow var(--tr); position:relative; overflow:hidden; color:var(--txt) }
.bento-card:hover { transform:translateY(-3px); box-shadow:var(--s2) }
.bento-card.dark   { background:var(--gi); color:#fff; border-color:rgba(255,255,255,.08) }
.bento-card.accent { background:var(--gb); color:#fff; border:none }
.bento-card.dark   .m-label { color:rgba(255,255,255,.5)!important }
.bento-card.dark   .m-value { color:#fff }
.bento-card.accent .m-label { color:rgba(255,255,255,.8) }
.bento-card.accent .m-value { color:#fff }

.act-feed { display:flex; flex-direction:column; gap:.6rem; margin-top:.5rem }
.act-item { display:flex; gap:.7rem; align-items:flex-start; padding:.65rem .75rem; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); font-size:.83rem; color:rgba(255,255,255,.9) }
.act-ico  { width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:.75rem; flex-shrink:0 }
.act-text strong { display:block }
.act-time { font-size:.7rem; opacity:.5; margin-top:.12rem; font-family:monospace }

/* Testimonial */
.testimonial { background:var(--sur); border:1px solid var(--bor); border-radius:var(--rl); padding:1.9rem; position:relative; overflow:hidden; transition:transform var(--tr),box-shadow var(--tr) }
.testimonial:hover { transform:translateY(-4px); box-shadow:var(--s2) }
.testimonial::before { content:'"'; position:absolute; top:-1rem; right:1.2rem; font-size:6.5rem; font-family:var(--ffd); font-weight:900; background:var(--gb); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.12; pointer-events:none; line-height:1 }
.test-body { font-size:.98rem; color:var(--txt2); line-height:1.68; margin-bottom:1.3rem }
.test-author { display:flex; align-items:center; gap:.8rem }
.test-av   { width:44px; height:44px; border-radius:50%; background:var(--gb); color:#fff; display:grid; place-items:center; font-family:var(--ffd); font-weight:800; font-size:1rem; flex-shrink:0 }
.test-name { font-weight:700; font-size:.9rem; color:var(--txt) }
.test-role { font-size:.78rem; color:var(--mut) }

/* CTA */
.cta-section { position:relative; padding:96px 0; overflow:hidden; background:var(--gb); color:#fff }
.cta-section::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(ellipse 90% 90% at center,#000 25%,transparent 70%); -webkit-mask-image:radial-gradient(ellipse 90% 90% at center,#000 25%,transparent 70%) }
.cta-section > .container { position:relative; z-index:1 }
.cta-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:99px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22); font-size:.78rem; color:rgba(255,255,255,.92); font-weight:600; margin-bottom:.9rem }
.cta-h2  { font-size:clamp(2rem,4vw,3.4rem); font-weight:900; letter-spacing:-.048em; color:#fff; margin-bottom:.8rem }
.cta-lead { font-size:1rem; color:rgba(255,255,255,.78); max-width:48ch; line-height:1.65 }

/* Footer */
.tth-footer { margin-top:0; padding:30px 0; border-top:1px solid var(--bor); background:var(--sur); font-size:.86rem; color:var(--mut) }

/* Responsive */
@media(max-width:991.98px) {
  .hero-inner { padding:75px 0 60px }
  .section,.cta-section { padding:68px 0 }
  .bento { grid-template-columns:repeat(6,1fr) }
  .bn   { grid-column:span 3 }
  .bn-6,.bn-8 { grid-column:span 6 }
  .wf-panel { margin-top:1.5rem }
}
@media(max-width:767.98px) {
  .hero-h1 { font-size:2.8rem }
  .hero-stats { gap:1.6rem }
}
@media(max-width:575.98px) {
  .bento { grid-template-columns:1fr; gap:.9rem }
  .bn,.bn-6,.bn-8 { grid-column:span 1 }
  .bn-r2 { grid-row:span 1 }
  .stats-band { flex-direction:column }
  .sbi + .sbi { border-left:none; border-top:1px solid var(--bor) }
  .btt { bottom:16px; right:14px }
  .scroll-rail { display:none }
}
@media print {
  .cur-dot,.cur-ring,.scroll-rail,.btt,.toast-stack,.pg-overlay,.preloader,.tth-nav,.tth-footer,.no-print { display:none!important }
  body::before { display:none }
  [data-aos] { opacity:1!important; transform:none!important; transition:none!important }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; animation-iteration-count:1!important }
  [data-aos] { opacity:1!important; transform:none!important; transition:none!important }
  .marquee-track { animation:none }
  html.use-cursor,html.use-cursor * { cursor:auto!important }
}

/* ══════════════════════════════════════════════════════════
   TechTalentHub polish pack v10: compatibility + landing
   ══════════════════════════════════════════════════════════ */
:root {
  --ff-body: var(--ff);
  --ff-display: var(--ffd);
  --g-brand: var(--gb);
  --c-p: var(--p);
  --c-teal: var(--tl);
  --c-pink: var(--pk);
  --c-green: var(--gn);
  --c-amber: var(--am);
  --c-red: var(--rd);
  --c-text: var(--txt);
  --c-text2: var(--txt2);
  --c-muted: var(--mut);
  --c-surface: var(--sur);
  --c-surface2: var(--sur2);
  --c-border: var(--bor);
}

/* icon aliases used by templates */
.ico-teal { background:linear-gradient(135deg,#cffafe,#a5f3fc); color:#0e7490 }
.ico-pink { background:linear-gradient(135deg,#fce7f3,#fbcfe8); color:#9d174d }
.ico-amber{ background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e }
.ico-green{ background:linear-gradient(135deg,#d1fae5,#a7f3d0); color:#065f46 }
.ico-gray { background:linear-gradient(135deg,#e2e8f0,#cbd5e1); color:#475569 }
[data-theme=dark] .ico-teal { background:rgba(34,211,238,.18); color:#a5f3fc }
[data-theme=dark] .ico-pink { background:rgba(236,72,153,.18); color:#fbcfe8 }
[data-theme=dark] .ico-amber{ background:rgba(245,158,11,.18); color:#fbbf24 }
[data-theme=dark] .ico-green{ background:rgba(16,185,129,.18); color:#86efac }
[data-theme=dark] .ico-gray { background:rgba(100,116,139,.18); color:#94a3b8 }

.card-hover:hover { transform:translateY(-4px); box-shadow:var(--s2); border-color:rgba(76,58,255,.24) }
.stats-band-item { flex:1; min-width:160px; padding:2.2rem 2rem; text-align:center; position:relative; transition:background var(--tr) }
.stats-band-item + .stats-band-item { border-left:1px solid var(--bor) }
.stats-band-item:hover { background:rgba(76,58,255,.03) }

/* New cinematic preloader */
.preloader { background:#050715; overflow:hidden }
.pl-bg-grid {
  position:absolute; inset:-2px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 70% at center,#000 15%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at center,#000 15%,transparent 72%);
  opacity:.75;
  animation:plGrid 7s linear infinite;
}
@keyframes plGrid { to{transform:translate3d(52px,52px,0)} }
.pl-particles { position:absolute; inset:0; pointer-events:none; z-index:1 }
.pl-particles i {
  position:absolute; width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.85),0 0 40px rgba(34,211,238,.35);
  opacity:.55; animation:floatParticle 5.5s ease-in-out infinite alternate;
}
.pl-particles i:nth-child(1){left:13%;top:22%;animation-delay:.1s}.pl-particles i:nth-child(2){left:78%;top:18%;animation-delay:.7s}.pl-particles i:nth-child(3){left:86%;top:68%;animation-delay:1.1s}.pl-particles i:nth-child(4){left:18%;top:74%;animation-delay:1.6s}.pl-particles i:nth-child(5){left:51%;top:12%;animation-delay:2.1s}.pl-particles i:nth-child(6){left:42%;top:84%;animation-delay:2.7s}
@keyframes floatParticle { from{transform:translate3d(0,0,0) scale(.75);opacity:.25} to{transform:translate3d(18px,-28px,0) scale(1.18);opacity:.82} }
.pl-stage { position:relative; width:148px; height:148px; display:grid; place-items:center }
.pl-stage .pl-logo { position:relative; z-index:3; width:92px; height:92px; border-radius:30px }
.pl-ring { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.14); inset:0; animation:plSpin 7s linear infinite }
.pl-ring::before { content:''; position:absolute; width:10px; height:10px; border-radius:50%; background:#22d3ee; top:10px; left:50%; transform:translateX(-50%); box-shadow:0 0 22px #22d3ee }
.pl-ring.r2 { inset:18px; animation-duration:5.5s; animation-direction:reverse; border-color:rgba(236,72,153,.18) }
.pl-ring.r2::before { background:#ec4899; box-shadow:0 0 22px #ec4899; width:8px; height:8px }
.pl-ring.r3 { inset:34px; animation-duration:4.3s; border-color:rgba(163,230,53,.16) }
.pl-ring.r3::before { background:#a3e635; box-shadow:0 0 22px #a3e635; width:6px; height:6px }
@keyframes plSpin { to{transform:rotate(360deg)} }
.pl-bar-wrap { width:min(320px,78vw) }
.pl-pct { top:-24px; color:rgba(255,255,255,.72); letter-spacing:.08em }
.pl-status { margin-top:.65rem; text-align:center; color:rgba(255,255,255,.48); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase }
.preloader.done .pl-wrap { transform:translateY(-18px) scale(.96); transition:transform .7s cubic-bezier(.22,1,.36,1) }
@media(max-width:575.98px){.pl-stage{width:128px;height:128px}.pl-stage .pl-logo{width:82px;height:82px}.pl-title{font-size:28px}}

/* Landing v10 */
.hero-pro .hero-inner { padding:118px 0 88px }
.hero-trust { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.55rem }
.hero-trust span { display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .8rem; border-radius:99px; color:rgba(255,255,255,.76); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); font-size:.82rem }
.hero-trust i { color:#a3e635; font-size:.8rem }
.hero-dashboard {
  position:relative; padding:1.15rem; border-radius:34px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(26px);
  box-shadow:0 38px 90px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.18);
  overflow:hidden; color:#fff;
}
.hero-dashboard::before { content:''; position:absolute; inset:-40%; background:conic-gradient(from 120deg,transparent,rgba(34,211,238,.22),transparent,rgba(236,72,153,.18),transparent); animation:dashGlow 10s linear infinite; pointer-events:none }
.hero-dashboard > * { position:relative; z-index:1 }
@keyframes dashGlow { to{transform:rotate(360deg)} }
.dash-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem .55rem 1rem }
.dash-kicker { display:block; color:rgba(255,255,255,.46); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin-bottom:.18rem }
.dash-top h3 { color:#fff; font-size:1.65rem; font-weight:900; letter-spacing:-.05em }
.dash-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:.75rem }
.dash-card { min-height:138px; padding:1rem; border-radius:22px; background:rgba(5,8,20,.58); border:1px solid rgba(255,255,255,.10); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden }
.dash-card.wide { grid-row:span 2 }
.dash-label { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); font-weight:700 }
.dash-card strong { font-family:var(--ffd); font-size:2.55rem; letter-spacing:-.06em; line-height:1; color:#fff }
.dash-card small { color:rgba(255,255,255,.54) }
.dash-bars { height:70px; display:flex; align-items:flex-end; gap:.42rem; margin-top:1rem }
.dash-bars i { flex:1; min-width:14px; border-radius:99px 99px 6px 6px; background:linear-gradient(180deg,#22d3ee,#4c3aff); box-shadow:0 0 18px rgba(34,211,238,.22); animation:barBreath 2.8s ease-in-out infinite alternate }
.dash-bars i:nth-child(2n){background:linear-gradient(180deg,#ec4899,#4c3aff);animation-delay:.4s}.dash-bars i:nth-child(3n){animation-delay:.8s}
@keyframes barBreath { from{filter:saturate(.8); transform:scaleY(.9)} to{filter:saturate(1.25); transform:scaleY(1.05)} }
.workflow-mini { display:flex; align-items:center; gap:.65rem; margin:1rem 0; padding:.85rem; border-radius:22px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08) }
.wf-mini-step { display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.55); min-width:0 }
.wf-mini-step span { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.08); font-family:monospace; font-size:.75rem }
.wf-mini-step b { font-size:.82rem; color:inherit; white-space:nowrap }
.wf-mini-step.done span { background:rgba(16,185,129,.18); color:#86efac }.wf-mini-step.active span { background:rgba(245,158,11,.18); color:#fbbf24; box-shadow:0 0 0 4px rgba(245,158,11,.08) }
.wf-mini-step.done,.wf-mini-step.active { color:#fff }
.wf-mini-line { flex:1; height:1px; min-width:18px; background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.08)) }
.dash-feed { display:grid; gap:.55rem }
.dash-feed div { display:flex; align-items:center; gap:.6rem; padding:.72rem .85rem; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.82); font-size:.86rem }
.dash-feed i { color:#a3eaff }
.stats-section { padding-top:58px; padding-bottom:58px }
.feature-list { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem }
.feature-list span { display:inline-flex; align-items:center; padding:.28rem .65rem; border-radius:99px; background:rgba(76,58,255,.08); color:var(--p); font-size:.72rem; font-weight:700 }
.process-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem }
.process-card { position:relative; min-height:230px; padding:1.35rem; border-radius:24px; background:var(--sur); border:1px solid var(--bor); box-shadow:var(--s1); overflow:hidden; transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr) }
.process-card:hover { transform:translateY(-5px); box-shadow:var(--s2); border-color:rgba(76,58,255,.25) }
.process-card span { font-family:var(--ffd); font-size:2rem; font-weight:900; letter-spacing:-.06em; background:var(--gb); -webkit-background-clip:text; background-clip:text; color:transparent }
.process-card i { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; margin:1rem 0; background:rgba(76,58,255,.09); color:var(--p); font-size:1.1rem }
.process-card h3 { font-size:1.05rem; margin-bottom:.4rem }
.process-card p { color:var(--txt2); font-size:.88rem; margin:0; line-height:1.62 }
.role-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
.role-card { background:var(--sur); border:1px solid var(--bor); border-radius:22px; padding:1.25rem; box-shadow:var(--s1); display:flex; flex-direction:column; gap:.4rem; min-height:150px; transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr) }
.role-card:hover { transform:translateY(-4px); box-shadow:var(--s2); border-color:rgba(76,58,255,.22) }
.role-card i { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--gb); color:#fff; margin-bottom:.35rem }
.role-card b { font-family:var(--ffd); font-size:1.02rem; color:var(--txt) }
.role-card span { color:var(--txt2); font-size:.88rem; line-height:1.5 }
.cta-section .btn-ghost { background:rgba(255,255,255,.14)!important }
@media(max-width:1199.98px){.process-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:991.98px){.hero-pro .hero-inner{padding:82px 0 66px}.dash-grid{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767.98px){.role-grid,.dash-grid,.process-grid{grid-template-columns:1fr}.workflow-mini{align-items:flex-start; flex-direction:column}.wf-mini-line{width:1px;height:18px;min-width:0;margin-left:16px}.hero-dashboard{border-radius:26px}.dash-card.wide{grid-row:auto}}
@media(max-width:575.98px){.hero-trust span{font-size:.76rem}.dash-card strong{font-size:2.15rem}.process-card{min-height:auto}.stats-band-item + .stats-band-item{border-left:none;border-top:1px solid var(--bor)}}

/* ── v11 live polish / fixes ─────────────────────────── */
html, body { min-height:100% }
body { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1 0 auto; width:100%; position:relative; }
.tth-footer { margin-top:auto; flex-shrink:0 }

body::after {
  content:''; position:fixed; inset:auto -10% -20% auto; width:42vw; height:42vw; max-width:680px; max-height:680px;
  background:radial-gradient(circle, rgba(236,72,153,.10), transparent 62%);
  filter:blur(22px); pointer-events:none; z-index:-1; animation:floatAura 18s ease-in-out infinite alternate;
}
@keyframes floatAura { 0%{transform:translate3d(0,0,0) scale(.96)} 100%{transform:translate3d(-6%, -8%, 0) scale(1.08)} }

.tth-nav::after {
  content:''; position:absolute; inset:auto 8% 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.5), rgba(236,72,153,.45), transparent);
  opacity:.7; animation:navline 8s linear infinite;
}
@keyframes navline { 0%{transform:translateX(-8%)} 50%{transform:translateX(8%)} 100%{transform:translateX(-8%)} }

.page-hdr { position:relative; overflow:hidden }
.page-hdr::after {
  content:''; position:absolute; right:0; top:-10px; width:180px; height:90px; border-radius:999px;
  background:radial-gradient(circle at center, rgba(76,58,255,.12), transparent 72%); pointer-events:none; animation:floatSmall 9s ease-in-out infinite alternate;
}
@keyframes floatSmall { from{transform:translateY(-4px)} to{transform:translateY(10px) translateX(-12px)} }

.metric-card,.feature-card,.process-card,.role-card,.card,.section-live-card,.cta-panel,.hero-dashboard,.workflow-mini,.dash-feed div {
  position:relative; isolation:isolate;
}
.metric-card::after,.feature-card::after,.process-card::after,.role-card::after,.card::after,.section-live-card::after,.cta-panel::after,.hero-dashboard::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 66%, transparent 100%);
  transform:translateX(-130%); animation:glossDrift 10s ease-in-out infinite;
  opacity:.6; z-index:0;
}
@keyframes glossDrift { 0%,18%{transform:translateX(-130%)} 34%,100%{transform:translateX(130%)} }
.metric-card > *,.feature-card > *,.process-card > *,.role-card > *,.card > *,.section-live-card > *,.cta-panel > *,.hero-dashboard > * { position:relative; z-index:1 }

.section-live-card {
  display:grid; gap:1rem; padding:1.4rem; border-radius:28px; background:linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  border:1px solid rgba(76,58,255,.10); box-shadow:var(--s2); backdrop-filter:blur(18px); overflow:hidden;
}
[data-theme=dark] .section-live-card {
  background:linear-gradient(145deg, rgba(15,20,50,.92), rgba(15,20,50,.74));
  border-color:rgba(255,255,255,.08);
}
.section-live-card::before {
  content:''; position:absolute; inset:auto -12% -40% auto; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(34,211,238,.22), transparent 65%); filter:blur(10px); animation:floatAura 14s ease-in-out infinite alternate;
}
.slc-kicker { display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .82rem; border-radius:999px; width:max-content; background:rgba(76,58,255,.08); color:var(--p); font-weight:700; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase }
.slc-kicker i { color:var(--tl) }
.slc-timeline { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; padding:.95rem 1rem; border-radius:20px; background:rgba(76,58,255,.04); border:1px solid var(--bor) }
.slc-timeline span { font-weight:700; color:var(--txt); font-size:.88rem }
.slc-timeline i { width:20px; height:2px; border-radius:999px; background:linear-gradient(90deg,var(--p),var(--tl),var(--pk)); box-shadow:0 0 10px rgba(76,58,255,.22); animation:routeFlow 2.4s linear infinite }
@keyframes routeFlow { 0%{filter:saturate(.85); transform:scaleX(.85)} 50%{filter:saturate(1.2); transform:scaleX(1)} 100%{filter:saturate(.85); transform:scaleX(.85)} }
.slc-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem }
.slc-metrics div { padding:.95rem 1rem; border-radius:18px; background:rgba(255,255,255,.5); border:1px solid rgba(76,58,255,.08); display:flex; flex-direction:column; gap:.2rem }
[data-theme=dark] .slc-metrics div { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08) }
.slc-metrics b { font-family:var(--ffd); font-size:1.35rem; letter-spacing:-.05em; color:var(--txt) }
.slc-metrics span { font-size:.8rem; color:var(--txt2); line-height:1.45 }

.hero-dashboard {
  background:linear-gradient(145deg, rgba(16,26,54,.90), rgba(39,18,58,.82));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 42px 100px -34px rgba(0,0,0,.88), inset 0 1px 0 rgba(255,255,255,.15);
}
.hero-dashboard::before {
  background:
    radial-gradient(circle at 15% 85%, rgba(34,211,238,.18), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(236,72,153,.18), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 28%);
  animation:none;
}
.hero-dashboard::after { opacity:.42 }
.dash-ambient { position:absolute; border-radius:50%; filter:blur(24px); pointer-events:none; opacity:.7 }
.dash-ambient.da-1 { width:180px; height:180px; top:-50px; right:-25px; background:radial-gradient(circle, rgba(236,72,153,.28), transparent 65%); animation:orbitGlow 14s ease-in-out infinite alternate }
.dash-ambient.da-2 { width:220px; height:220px; left:-70px; bottom:-90px; background:radial-gradient(circle, rgba(34,211,238,.25), transparent 65%); animation:orbitGlow 16s ease-in-out infinite alternate-reverse }
@keyframes orbitGlow { from{transform:translate3d(0,0,0) scale(.92)} to{transform:translate3d(8%, -8%, 0) scale(1.08)} }
.dash-scan { position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px); mix-blend-mode:screen; opacity:.22; animation:scanShift 14s linear infinite }
@keyframes scanShift { to{transform:translateY(14px)} }
.dash-caption { font-size:.76rem; color:rgba(255,255,255,.56); letter-spacing:.03em }
.dash-line { position:relative; height:36px; margin-top:.65rem; overflow:hidden }
.dash-line::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.26), rgba(255,255,255,.08)) }
.dash-line span { position:absolute; left:-10%; right:-10%; top:6px; bottom:0; border-bottom:2px solid rgba(163,234,255,.95); border-radius:0 0 999px 999px; transform:skewX(-12deg); box-shadow:0 0 18px rgba(34,211,238,.25); animation:dashLineMove 3.8s ease-in-out infinite }
@keyframes dashLineMove { 0%,100%{transform:translateX(-2%) skewX(-12deg) scaleY(.92)} 50%{transform:translateX(4%) skewX(-12deg) scaleY(1.08)} }
.dash-bars { position:relative }
.dash-bars i { box-shadow:0 0 24px rgba(34,211,238,.25), inset 0 8px 18px rgba(255,255,255,.12) }
.dash-feed div { justify-content:space-between; gap:.75rem }
.dash-feed span { flex:1; min-width:0 }
.dash-feed em { font-style:normal; font-size:.7rem; color:rgba(255,255,255,.48); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap }
.live-pill { position:relative; overflow:hidden }
.live-pill.is-wink::after,.live-pill::after {
  content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.2) 50%, transparent 75%);
  transform:translateX(-130%);
}
.live-pill.is-wink::after { animation:pillShine .8s ease }
@keyframes pillShine { to{transform:translateX(130%)} }

.cta-section { background:linear-gradient(135deg, #25176f 0%, #1c8ec9 52%, #d946a3 100%) }
.cta-panel {
  padding:1.5rem; border-radius:34px; background:linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(22px); box-shadow:0 38px 80px -32px rgba(0,0,0,.6); overflow:hidden;
}
.cta-panel::before {
  content:''; position:absolute; inset:auto -10% -35% auto; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); filter:blur(6px); animation:floatAura 16s ease-in-out infinite alternate;
}
.cta-actions, .cta-mini-points { display:flex; flex-wrap:wrap; gap:.7rem }
.cta-mini-points span { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.92); font-size:.84rem }
.cta-mini-points i { color:#b9f1ff }
.cta-live-board {
  padding:1rem; border-radius:26px; background:rgba(8,11,30,.42); border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.clb-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; color:rgba(255,255,255,.68); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase }
.clb-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem }
.clb-stat { padding:1rem; border-radius:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); min-height:136px; display:flex; flex-direction:column; justify-content:space-between }
.clb-stat small { display:block; color:rgba(255,255,255,.54); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase }
.clb-stat strong { font-family:var(--ffd); font-size:2.1rem; line-height:1; letter-spacing:-.06em; color:#fff }
.clb-stat p { margin:0; color:rgba(255,255,255,.74) }
.clb-stat.full { grid-column:1 / -1; min-height:auto }
.clb-stat ul { list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
.clb-stat li { display:flex; align-items:center; gap:.55rem; color:rgba(255,255,255,.84); font-size:.9rem }
.clb-stat li i { color:#8df3c9; font-size:.5rem; animation:blinkDot 2s ease-in-out infinite }
@keyframes blinkDot { 0%,100%{opacity:.6; transform:scale(.9)} 50%{opacity:1; transform:scale(1.2)} }
.clb-wave { position:relative; height:36px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08) }
.clb-wave::before,
.clb-wave::after { content:''; position:absolute; inset:auto -12% 0; height:18px; border-radius:999px; }
.clb-wave::before { background:linear-gradient(90deg, rgba(34,211,238,.9), rgba(76,58,255,.9), rgba(236,72,153,.9)); animation:waveRide 2.8s ease-in-out infinite }
.clb-wave::after { bottom:9px; height:10px; background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.02)); animation:waveRide 3.6s ease-in-out infinite reverse }
@keyframes waveRide { 0%,100%{transform:translateX(-4%) scaleX(.92)} 50%{transform:translateX(4%) scaleX(1.04)} }

.page-actions { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; justify-content:flex-start }
.page-actions .action-btn {
  padding:.85rem 1.05rem; border-radius:18px; min-height:56px; min-width:110px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-size:.95rem; line-height:1; box-shadow:var(--s1);
}
.page-actions .action-btn i { font-size:1rem }
.page-actions .action-btn-primary { min-width:132px }
.page-actions .action-btn:hover { transform:translateY(-2px) }

/* keep secondary CTA buttons neat inside gradient sections */
.cta-section .btn-secondary { background:rgba(255,255,255,.92)!important; border-color:rgba(255,255,255,.2)!important }
.cta-section .btn-secondary:hover { background:#fff!important }

@media(max-width:991.98px){
  .clb-grid { grid-template-columns:1fr 1fr }
}
@media(max-width:767.98px){
  .slc-metrics, .clb-grid { grid-template-columns:1fr }
  .cta-panel { padding:1.1rem }
  .page-actions .action-btn { min-width:0; flex:1 1 calc(50% - .75rem) }
}
@media(max-width:575.98px){
  .slc-timeline { flex-direction:column; align-items:flex-start }
  .slc-timeline i { width:2px; height:18px }
  .page-actions .action-btn { flex:1 1 100% }
}


/* ── v12 fixes from visual QA ─────────────────────────── */
.vacation-create-layout { align-items:flex-start !important; }
.vacation-preview-col { align-self:flex-start; }
.vacation-preview-card { position:sticky; top:96px; margin-top:0 !important; }
.preview-checks { font-size:.86rem; color:var(--txt2); }
.vacation-preview-card .card-body { padding-top:1.6rem !important; }
.vacation-preview-card .detail-item { min-height:82px; display:flex; flex-direction:column; justify-content:center; }
#pvD { font-family:var(--ffd) !important; background:var(--gb) !important; }

.timeline .tl-item { overflow-wrap:anywhere; }
.timeline .tl-item > .ms-2 { min-width:0; }
.timeline .tl-title, .timeline .tl-meta { max-width:100%; }

.section-live-card { transform:translateY(0); }
@media(min-width:992px){
  #features .row.align-items-end { align-items:center !important; }
  #features .section-live-card { margin-top:0; }
}

@media(max-width:1199.98px){
  .vacation-preview-card { position:relative; top:auto; }
}

/* prevent generated favicon options folder from affecting UI; icon choices are stored as files only */


/* ── v13 visual fixes ────────────────────────────────── */
.features-intro {
  max-width:920px; margin:0 auto 3rem; text-align:center; position:relative;
}
.features-intro::before {
  content:''; position:absolute; inset:-22px 12% auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(76,58,255,.28), rgba(34,211,238,.28), transparent);
}
.feature-flow-strip {
  margin:1.45rem auto 0; display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.65rem;
  padding:.72rem .9rem; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid var(--bor); box-shadow:var(--s1);
}
[data-theme=dark] .feature-flow-strip { background:rgba(255,255,255,.05); }
.feature-flow-strip span {
  display:inline-flex; align-items:center; gap:.45rem; color:var(--txt); font-weight:700; font-size:.86rem; white-space:nowrap;
}
.feature-flow-strip i { color:var(--p); }
.feature-flow-strip b {
  width:24px; height:2px; border-radius:99px; flex:0 0 24px;
  background:linear-gradient(90deg,var(--p),var(--tl),var(--pk)); animation:routeFlow 2.4s ease-in-out infinite;
}
.preview-days-box { text-align:center; align-items:center; }
.preview-days-value, #pvD.preview-days-value {
  display:inline-block !important; width:auto !important; min-width:0 !important; padding:0 !important; margin:.1rem auto 0 !important;
  font-size:2.55rem !important; font-family:var(--ffd) !important; font-weight:900 !important; letter-spacing:-.06em !important; line-height:1 !important;
  background:linear-gradient(135deg,#4c3aff 0%,#22d3ee 55%,#ec4899 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  box-shadow:none !important; border:0 !important; border-radius:0 !important;
}
.preview-checks { font-size:.86rem; color:var(--txt2); }
@media(max-width:767.98px){
  .feature-flow-strip { border-radius:26px; }
  .feature-flow-strip b { width:14px; flex-basis:14px; }
}
@media(max-width:575.98px){
  .feature-flow-strip { display:grid; grid-template-columns:1fr; justify-items:center; border-radius:22px; }
  .feature-flow-strip b { width:2px; height:16px; }
}

/* ── v14 UX / onboarding / people / footer polish ───── */
.onb-pct-value {
  font-size:2.4rem; font-family:var(--ffd); font-weight:900; line-height:1;
  background:var(--gb); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.onb-task-row { position:relative; overflow:hidden; background:var(--sur); }
.onb-task-row::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(180deg,var(--am),var(--tl)); opacity:.45; transition:opacity var(--tr), width var(--tr); }
.onb-task-row:hover { background:rgba(76,58,255,.035); }
.onb-task-row.is-done::before { width:7px; opacity:1; background:linear-gradient(180deg,var(--gn),var(--tl)); }
.onb-task-row .form-check-input { width:1.25rem; height:1.25rem; cursor:pointer; border:2px solid rgba(76,58,255,.25); }
.onb-task-row .form-check-input:checked { background-color:var(--gn); border-color:var(--gn); box-shadow:0 0 0 4px rgba(16,185,129,.13); }

.calendar-actions { display:flex; gap:.65rem; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.calendar-actions .btn { min-height:42px!important; padding:.55rem 1rem!important; border-radius:14px!important; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; box-shadow:var(--s1); }
.calendar-actions .btn::after { pointer-events:none; }
@media(max-width:575.98px){ .calendar-actions { justify-content:flex-start; } .calendar-actions .btn { flex:1 1 auto; } }

.people-hero { position:relative; overflow:hidden; padding:2rem; border-radius:34px; background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.58)); border:1px solid var(--bor); box-shadow:var(--s2); }
[data-theme=dark] .people-hero { background:linear-gradient(145deg,rgba(15,20,50,.92),rgba(15,20,50,.72)); }
.people-hero-glow { position:absolute; inset:auto -12% -40% auto; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.24),transparent 65%); filter:blur(8px); animation:floatAura 16s ease-in-out infinite alternate; }
.people-hero h1 { font-size:clamp(2.2rem,4vw,4rem); letter-spacing:-.055em; }
.people-hero p { max-width:58ch; color:var(--txt2); margin:1rem 0 1.2rem; font-size:1.02rem; }
.people-hero-pills { display:flex; flex-wrap:wrap; gap:.65rem; }
.people-hero-pills span { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem; border-radius:999px; background:rgba(76,58,255,.08); color:var(--txt); border:1px solid rgba(76,58,255,.10); font-weight:700; font-size:.84rem; }
.people-hero-pills i { color:var(--p); }
.people-radar { position:relative; min-height:230px; border-radius:28px; background:linear-gradient(145deg,rgba(7,9,28,.94),rgba(22,15,62,.86)); border:1px solid rgba(255,255,255,.1); overflow:hidden; box-shadow:0 28px 70px -38px rgba(0,0,0,.9); }
.people-radar::before { content:''; position:absolute; inset:28px; border-radius:50%; border:1px dashed rgba(34,211,238,.38); animation:plSpin 18s linear infinite; }
.people-radar::after { content:''; position:absolute; inset:18px; background:conic-gradient(from 0deg,rgba(34,211,238,.32),transparent 26%,transparent 100%); border-radius:50%; animation:plSpin 7s linear infinite; }
.pr-core { position:absolute; inset:50%; transform:translate(-50%,-50%); z-index:2; width:74px; height:74px; border-radius:24px; display:grid; place-items:center; background:var(--gb); color:#fff; font-size:1.4rem; box-shadow:0 0 38px rgba(34,211,238,.28); }
.pr-ring { position:absolute; inset:54px; border-radius:50%; border:1px solid rgba(255,255,255,.12); }
.pr-ring.r2 { inset:82px; border-color:rgba(236,72,153,.16); }
.pr-node { position:absolute; z-index:3; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 0 0 8px rgba(34,211,238,.12),0 0 24px rgba(34,211,238,.7); }
.pr-node.n1 { top:38px; left:50%; transform:translateX(-50%); }
.pr-node.n2 { right:42px; top:50%; transform:translateY(-50%); }
.pr-node.n3 { bottom:38px; left:50%; transform:translateX(-50%); }
.pr-node.n4 { left:42px; top:50%; transform:translateY(-50%); }

.people-toolbar .chip-group { flex-wrap:wrap; }
.people-card { position:relative; overflow:hidden; border:1px solid var(--bor); border-radius:26px; background:var(--sur); box-shadow:var(--s1); padding:1.2rem; transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
.people-card:hover { transform:translateY(-5px); box-shadow:var(--s3); border-color:rgba(76,58,255,.22); }
.people-card .pc-bg { position:absolute; inset:-50% -30% auto auto; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.13),transparent 65%); pointer-events:none; animation:floatAura 14s ease-in-out infinite alternate; }
.pc-head { position:relative; display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.pc-avatar { width:56px!important; height:56px!important; border-radius:18px!important; font-size:1.2rem!important; flex:0 0 56px; }
.pc-head h3 { font-size:1.05rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-head p { margin:.15rem 0 0; color:var(--mut); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-progress { position:relative; margin-bottom:1rem; color:var(--txt2); font-size:.82rem; }
.pc-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:1rem; }
.pc-grid div { min-width:0; padding:.75rem; border:1px solid var(--bor); border-radius:16px; background:rgba(76,58,255,.025); }
.pc-grid span { display:block; color:var(--mut); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; margin-bottom:.25rem; }
.pc-grid b { display:block; color:var(--txt); font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-actions { display:flex; gap:.6rem; }
.pc-actions .btn { flex:1; }
#empGrid[data-view="list"] .row { flex-direction:column; gap:.75rem!important; }
#empGrid[data-view="list"] .emp-card { max-width:100%; flex:0 0 100%; }
#empGrid[data-view="list"] .people-card { display:grid; grid-template-columns:1.2fr 1fr auto; gap:1rem; align-items:center; padding:1rem 1.2rem; }
#empGrid[data-view="list"] .pc-head, #empGrid[data-view="list"] .pc-progress, #empGrid[data-view="list"] .pc-grid, #empGrid[data-view="list"] .pc-actions { margin:0; }
#empGrid[data-view="list"] .pc-grid { grid-template-columns:repeat(4, minmax(120px,1fr)); }
@media(max-width:991.98px){ #empGrid[data-view="list"] .people-card { grid-template-columns:1fr; } #empGrid[data-view="list"] .pc-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:575.98px){ .people-hero { padding:1.35rem; border-radius:26px; } .pc-grid { grid-template-columns:1fr; } .pc-actions { flex-direction:column; } }

.tth-footer-pro { position:relative; overflow:hidden; padding:54px 0 24px; background:linear-gradient(145deg,#07091c,#101842 55%,#190d32); border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.72); }
.tth-footer-pro .footer-aurora { position:absolute; inset:auto -10% -55% auto; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.24),transparent 62%); filter:blur(12px); animation:floatAura 18s ease-in-out infinite alternate; }
.footer-grid { position:relative; display:grid; grid-template-columns:1.6fr .8fr .8fr .8fr; gap:2rem; }
.footer-brand { display:inline-flex; align-items:center; gap:.7rem; color:#fff; font-family:var(--ffd); font-size:1.2rem; font-weight:900; }
.footer-brand:hover { color:#fff; }
.footer-brand-block p { max-width:38ch; margin:1rem 0; color:rgba(255,255,255,.58); }
.footer-live { display:inline-flex; align-items:center; gap:.5rem; padding:.52rem .8rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); font-size:.8rem; }
.footer-live span:first-child { width:7px; height:7px; border-radius:50%; background:#a3e635; box-shadow:0 0 0 4px rgba(163,230,53,.14); }
.footer-col { display:flex; flex-direction:column; gap:.55rem; }
.footer-col b { color:#fff; font-family:var(--ffd); letter-spacing:-.02em; margin-bottom:.3rem; }
.footer-col a, .footer-theme { color:rgba(255,255,255,.62); background:transparent; border:0; padding:0; text-align:left; font-size:.9rem; transition:color var(--tr), transform var(--tr); }
.footer-col a:hover, .footer-theme:hover { color:#fff; transform:translateX(3px); }
.footer-theme { display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; }
.footer-theme i { color:#a3eaff; }
.footer-bottom { position:relative; margin-top:2rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:rgba(255,255,255,.45); font-size:.82rem; }
@media(max-width:991.98px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:575.98px){ .footer-grid { grid-template-columns:1fr; } .tth-footer-pro { padding-top:40px; } }

.hero-dashboard { animation:dashFloat 6s ease-in-out infinite alternate; }
@keyframes dashFloat { from{transform:translateY(0)} to{transform:translateY(-8px)} }
.dash-card strong { display:inline-flex; min-width:1.9ch; transition:filter .2s, transform .2s; }
.dash-card strong.is-ticking { filter:drop-shadow(0 0 14px rgba(34,211,238,.55)); transform:translateY(-2px) scale(1.035); }
.dash-bars i { transform-origin:bottom; }
.dash-feed div { animation:feedPulse 4.6s ease-in-out infinite; }
.dash-feed div:nth-child(2){animation-delay:.7s}.dash-feed div:nth-child(3){animation-delay:1.4s}
@keyframes feedPulse { 0%,100%{border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.06)} 50%{border-color:rgba(34,211,238,.24); background:rgba(34,211,238,.09)} }

/* ── FINAL DEFENSE HOTFIX: people page visual + card overflow ── */
.people-radar {
  min-height:260px;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.people-radar::before {
  inset:34px 54px;
  border-radius:50%;
  opacity:.85;
}
.people-radar::after {
  inset:28px 42px;
  border-radius:50%;
  opacity:.62;
}
.people-radar .pr-core {
  width:82px;
  height:82px;
  border-radius:26px;
  animation:peopleCorePulse 3.2s ease-in-out infinite;
}
.people-radar .pr-ring.r1 {
  inset:52px 70px;
  border-radius:50%;
}
.people-radar .pr-ring.r2 {
  inset:76px 98px;
  border-radius:50%;
}
.people-radar .pr-node {
  width:18px;
  height:18px;
  box-shadow:0 0 0 9px rgba(34,211,238,.11),0 0 26px rgba(34,211,238,.72);
}
.people-radar .pr-node.n1 { top:42px; }
.people-radar .pr-node.n2 { right:62px; }
.people-radar .pr-node.n3 { bottom:42px; }
.people-radar .pr-node.n4 { left:62px; }
@keyframes peopleCorePulse {
  0%,100% { transform:translate(-50%,-50%) scale(1); box-shadow:0 0 38px rgba(34,211,238,.28); }
  50% { transform:translate(-50%,-50%) scale(1.045); box-shadow:0 0 54px rgba(236,72,153,.30),0 0 42px rgba(34,211,238,.25); }
}

.people-card {
  min-width:0;
  padding:1.25rem;
}
.people-card .pc-bg,
.people-card .pc-status,
.people-card .pc-head,
.people-card .pc-progress,
.people-card .pc-grid,
.people-card .pc-actions {
  position:relative;
  z-index:1;
}
.pc-status {
  position:absolute!important;
  top:1rem;
  right:1rem;
  z-index:3!important;
  max-width:64px;
  justify-content:center;
  white-space:nowrap;
}
.pc-head {
  min-width:0;
  padding-right:4.4rem;
  align-items:flex-start;
}
.pc-title {
  min-width:0;
  flex:1 1 auto;
  padding-top:.05rem;
}
.pc-head h3 {
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.14;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  min-height:1.14em;
}
.pc-head p {
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.pc-grid b {
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25;
  min-height:1.25em;
}
#empGrid[data-view="list"] .people-card {
  grid-template-columns:minmax(260px,1.1fr) minmax(180px,.8fr) minmax(360px,1.4fr) minmax(190px,auto);
}
#empGrid[data-view="list"] .pc-head { padding-right:4rem; }
#empGrid[data-view="list"] .pc-status { top:50%; transform:translateY(-50%); right:auto; left:calc(1.2rem + 60px); }
#empGrid[data-view="list"] .pc-grid b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:1199.98px){
  #empGrid[data-view="list"] .people-card { grid-template-columns:1fr; }
  #empGrid[data-view="list"] .pc-status { top:1rem; right:1rem; left:auto; transform:none; }
}
@media(max-width:575.98px){
  .people-radar { min-height:220px; }
  .people-radar .pr-node.n2 { right:42px; }
  .people-radar .pr-node.n4 { left:42px; }
  .pc-avatar { width:48px!important; height:48px!important; flex-basis:48px!important; }
  .pc-head { padding-right:3.9rem; gap:.7rem; }
  .pc-status { max-width:58px; font-size:.68rem!important; }
}


/* ── v18 employees page polish ───────────────────── */
.people-hero-v2 { padding:2.2rem; }
.people-wow-points { display:flex; flex-wrap:wrap; gap:.7rem; }
.people-wow-points span { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border-radius:999px; background:rgba(255,255,255,.6); border:1px solid rgba(76,58,255,.08); font-size:.84rem; color:var(--txt); box-shadow:var(--s1); }
[data-theme=dark] .people-wow-points span { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
.people-wow-points i { color:var(--tl); }
.team-stage { position:relative; min-height:320px; border-radius:30px; overflow:hidden; padding:1.1rem; background:radial-gradient(circle at top left, rgba(34,211,238,.18), transparent 26%), linear-gradient(145deg, #0a0f2c, #171340 52%, #26104b); border:1px solid rgba(255,255,255,.08); box-shadow:0 28px 70px -38px rgba(0,0,0,.9); }
.team-stage::before { content:''; position:absolute; inset:24px; border-radius:24px; border:1px solid rgba(255,255,255,.06); }
.ts-grid { position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 100%); }
.ts-aurora { position:absolute; border-radius:50%; filter:blur(20px); opacity:.7; pointer-events:none; }
.ts-1 { width:220px; height:220px; right:-40px; top:-40px; background:radial-gradient(circle, rgba(236,72,153,.3), transparent 65%); animation:orbitGlow 15s ease-in-out infinite alternate; }
.ts-2 { width:240px; height:240px; left:-80px; bottom:-90px; background:radial-gradient(circle, rgba(34,211,238,.22), transparent 65%); animation:orbitGlow 17s ease-in-out infinite alternate-reverse; }
.ts-node { position:absolute; z-index:2; min-width:150px; padding:.8rem .95rem; border-radius:22px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(16px); }
.ts-node i { color:#a3eaff; font-size:1rem; margin-bottom:.55rem; display:inline-block; }
.ts-node b { display:block; font-size:.92rem; }
.ts-node span, .ts-node small { display:block; color:rgba(255,255,255,.58); font-size:.74rem; }
.ts-main { inset:50% auto auto 50%; transform:translate(-50%,-50%); width:180px; height:180px; min-width:0; border-radius:32px; padding:1.1rem; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(145deg, rgba(34,211,238,.22), rgba(91,79,255,.22), rgba(236,72,153,.22)); border:1px solid rgba(255,255,255,.16); box-shadow:0 0 40px rgba(34,211,238,.18); }
.ts-main strong { font-family:var(--ffd); font-size:3rem; line-height:1; letter-spacing:-.06em; }
.ts-main small { letter-spacing:.14em; text-transform:uppercase; margin-bottom:.2rem; }
.ts-main span { max-width:12ch; }
.ts-a { left:18px; top:28px; }
.ts-b { right:20px; top:42px; }
.ts-c { left:24px; bottom:26px; }
.ts-d { right:22px; bottom:34px; }
.ts-line { position:absolute; z-index:1; height:1px; background:linear-gradient(90deg, rgba(34,211,238,.05), rgba(34,211,238,.46), rgba(236,72,153,.35)); transform-origin:left center; opacity:.8; }
.ts-line::after { content:''; position:absolute; right:-2px; top:50%; width:7px; height:7px; border-radius:50%; background:#8ce8ff; transform:translateY(-50%); box-shadow:0 0 14px rgba(34,211,238,.5); }
.l1 { left:162px; top:108px; width:150px; transform:rotate(23deg); }
.l2 { right:165px; top:118px; width:130px; transform:rotate(155deg); }
.l3 { left:170px; bottom:106px; width:142px; transform:rotate(-22deg); }
.l4 { right:168px; bottom:110px; width:126px; transform:rotate(204deg); }
.people-card { display:flex; flex-direction:column; gap:.95rem; min-height:100%; }
.people-card .pc-bg { inset:auto -10% -30% auto; width:220px; height:220px; opacity:.9; }
.pc-topline { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.pc-role-chip { display:inline-flex; align-items:center; padding:.45rem .78rem; border-radius:999px; background:rgba(76,58,255,.08); border:1px solid rgba(76,58,255,.12); color:var(--p); font-size:.73rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800; max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-head { align-items:flex-start; margin-bottom:0; }
.pc-avatar { width:62px!important; height:62px!important; border-radius:20px!important; flex:0 0 62px; display:grid; place-items:center; background:linear-gradient(145deg, rgba(76,58,255,.14), rgba(34,211,238,.16), rgba(236,72,153,.13)); border:1px solid rgba(76,58,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.45); color:var(--p); font-size:1.35rem!important; }
.pc-title-wrap { min-width:0; }
.pc-head h3 { font-size:1.45rem; line-height:1.05; white-space:normal; overflow:visible; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pc-head p { font-size:.95rem; white-space:normal; overflow:visible; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pc-progress { margin-bottom:0; }
.pc-grid { margin-bottom:0; }
.pc-grid div { min-height:88px; display:flex; flex-direction:column; justify-content:center; }
.pc-grid b { font-size:1rem; white-space:normal; overflow-wrap:anywhere; text-overflow:initial; }
.pc-actions .btn { min-height:46px; font-weight:700; }
#empGrid[data-view="list"] .people-card { grid-template-columns:1.3fr 1fr auto; }
#empGrid[data-view="list"] .pc-topline { grid-column:1/-1; }
#empGrid[data-view="list"] .pc-actions { align-self:stretch; min-width:220px; }
.people-futures .bento-card { min-height:180px; }
@media(max-width:1199.98px){ .team-stage { min-height:300px; } .ts-node { min-width:135px; padding:.75rem .85rem; } .ts-main { width:164px; height:164px; } }
@media(max-width:991.98px){ .team-stage { margin-top:.5rem; } .ts-main { width:154px; height:154px; } .ts-line { display:none; } }
@media(max-width:767.98px){ .people-hero-v2 { padding:1.45rem; } .team-stage { min-height:480px; } .ts-a { left:16px; top:18px; } .ts-b { right:16px; top:18px; } .ts-c { left:16px; bottom:18px; } .ts-d { right:16px; bottom:18px; } .ts-main { width:146px; height:146px; } }
@media(max-width:575.98px){ .team-stage { min-height:520px; } .ts-node { min-width:0; width:calc(50% - 20px); } .ts-main { width:136px; height:136px; padding:.9rem; } .ts-main strong { font-size:2.3rem; } .pc-topline { flex-direction:column; align-items:flex-start; } .pc-role-chip { max-width:100%; } }

/* ── v19 stable employees page rebuild ───────────────── */
.people-page-final * { min-width:0; }
.people-final-hero {
  position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); gap:1.5rem; align-items:stretch;
  padding:1.6rem; border-radius:34px; border:1px solid var(--bor); overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.62)); box-shadow:var(--s2);
}
[data-theme=dark] .people-final-hero { background:linear-gradient(145deg,rgba(15,20,50,.94),rgba(15,20,50,.74)); }
.people-final-hero::before { content:''; position:absolute; right:-120px; top:-120px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.22),transparent 66%); animation:floatAura 16s ease-in-out infinite alternate; }
.pfh-copy,.pfh-panel { position:relative; z-index:1; }
.pfh-copy { padding:.6rem .2rem .6rem .4rem; align-self:center; }
.pfh-copy h1 { font-size:clamp(2.3rem,4vw,4rem); letter-spacing:-.055em; line-height:.98; }
.pfh-copy p { max-width:62ch; color:var(--txt2); margin:1rem 0 1.2rem; font-size:1.02rem; line-height:1.7; }
.pfh-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.pfh-actions span { display:inline-flex; align-items:center; gap:.5rem; padding:.52rem .85rem; border-radius:999px; background:rgba(76,58,255,.08); border:1px solid rgba(76,58,255,.10); color:var(--txt); font-weight:750; font-size:.84rem; }
.pfh-actions i { color:var(--p); }
.pfh-panel { padding:1rem; border-radius:28px; color:#fff; background:radial-gradient(circle at 15% 10%,rgba(34,211,238,.22),transparent 32%),linear-gradient(145deg,#080d29,#161340 58%,#260f45); border:1px solid rgba(255,255,255,.10); box-shadow:0 28px 70px -38px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); overflow:hidden; }
.pfh-panel::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom,#000,transparent); opacity:.75; }
.pfh-panel > * { position:relative; z-index:1; }
.pfh-panel-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.pfh-panel-head span { display:block; color:rgba(255,255,255,.5); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; }
.pfh-panel-head b { display:block; color:#fff; font-family:var(--ffd); font-size:1.2rem; letter-spacing:-.03em; }
.pfh-panel-head i { width:44px; height:44px; border-radius:15px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#a3eaff; }
.pfh-kpi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.pfh-kpi-grid div { min-height:108px; display:flex; flex-direction:column; justify-content:space-between; padding:.9rem; border-radius:20px; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.09); }
.pfh-kpi-grid small { color:rgba(255,255,255,.54); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; }
.pfh-kpi-grid strong { color:#fff; font-family:var(--ffd); font-size:2.4rem; line-height:1; letter-spacing:-.06em; }
.pfh-flow { margin-top:.8rem; display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; padding:.75rem; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.pfh-flow span { color:rgba(255,255,255,.82); font-size:.78rem; font-weight:750; }
.pfh-flow i { width:18px; height:2px; border-radius:99px; background:linear-gradient(90deg,#22d3ee,#ec4899); animation:routeFlow 2.5s ease-in-out infinite; }
.people-final-toolbar .chip-group { flex-wrap:wrap; }
.employee-final-card { position:relative; height:100%; display:flex; flex-direction:column; gap:1rem; padding:1.15rem; border-radius:26px; background:var(--sur); border:1px solid var(--bor); box-shadow:var(--s1); overflow:hidden; transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr); }
.employee-final-card::before { content:''; position:absolute; right:-80px; bottom:-110px; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.14),transparent 66%); pointer-events:none; }
.employee-final-card:hover { transform:translateY(-4px); box-shadow:var(--s3); border-color:rgba(76,58,255,.24); }
.employee-final-card > * { position:relative; z-index:1; }
.efc-top { display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:.9rem; align-items:start; }
.efc-avatar { width:62px; height:62px; border-radius:20px; display:grid; place-items:center; color:var(--p); font-size:1.25rem; background:linear-gradient(145deg,rgba(76,58,255,.13),rgba(34,211,238,.13),rgba(236,72,153,.10)); border:1px solid rgba(76,58,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
.efc-title h3 { margin:0; font-size:1.28rem; line-height:1.08; letter-spacing:-.035em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.efc-title p { margin:.22rem 0 0; color:var(--mut); font-size:.9rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.efc-status { display:inline-flex; align-items:center; justify-content:center; min-width:54px; padding:.35rem .55rem; border-radius:999px; font-size:.76rem; font-weight:850; border:1px solid transparent; white-space:nowrap; }
.efc-status.done { color:#047857; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.20); }
.efc-status.progress { color:#92400e; background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.22); }
.efc-status.empty { color:var(--mut); background:rgba(107,116,153,.10); border-color:rgba(107,116,153,.16); }
[data-theme=dark] .efc-status.done{color:#86efac}[data-theme=dark] .efc-status.progress{color:#fbbf24}
.efc-progress { color:var(--txt2); font-size:.84rem; }
.efc-progress b { color:var(--txt); }
.efc-info { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.efc-info div { min-height:82px; display:flex; flex-direction:column; justify-content:center; padding:.72rem .78rem; border-radius:17px; background:rgba(76,58,255,.025); border:1px solid var(--bor); }
.efc-info span { display:block; margin-bottom:.25rem; color:var(--mut); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:850; }
.efc-info b { display:block; color:var(--txt); font-size:.93rem; line-height:1.25; overflow-wrap:anywhere; }
.efc-actions { margin-top:auto; display:flex; gap:.65rem; }
.efc-actions .btn { flex:1; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-weight:750; }
.people-final-grid[data-view="list"] .row { flex-direction:column; gap:.8rem!important; }
.people-final-grid[data-view="list"] .emp-card { width:100%; max-width:100%; flex:0 0 100%; }
.people-final-grid[data-view="list"] .employee-final-card { display:grid; grid-template-columns:minmax(260px,1.3fr) minmax(260px,1.4fr) minmax(190px,.7fr); align-items:center; }
.people-final-grid[data-view="list"] .efc-progress { min-width:220px; }
.people-final-grid[data-view="list"] .efc-info { grid-template-columns:repeat(4,minmax(110px,1fr)); }
.people-final-grid[data-view="list"] .efc-info div { min-height:66px; }
.people-final-grid[data-view="list"] .efc-actions { min-width:190px; flex-direction:column; }
.people-idea-card { height:100%; min-height:155px; padding:1.25rem; border-radius:24px; background:var(--sur); border:1px solid var(--bor); box-shadow:var(--s1); display:flex; flex-direction:column; gap:.55rem; transition:transform var(--tr),box-shadow var(--tr); }
.people-idea-card:hover { transform:translateY(-4px); box-shadow:var(--s2); }
.people-idea-card i { width:44px; height:44px; border-radius:15px; display:grid; place-items:center; background:var(--gb); color:#fff; }
.people-idea-card b { font-family:var(--ffd); font-size:1.08rem; color:var(--txt); }
.people-idea-card span { color:var(--txt2); font-size:.9rem; line-height:1.55; }
@media(max-width:1199.98px){ .people-final-grid[data-view="list"] .employee-final-card { grid-template-columns:1fr; } .people-final-grid[data-view="list"] .efc-info { grid-template-columns:repeat(2,minmax(0,1fr)); } .people-final-grid[data-view="list"] .efc-actions { flex-direction:row; min-width:0; } }
@media(max-width:991.98px){ .people-final-hero { grid-template-columns:1fr; } .pfh-panel { min-height:auto; } }
@media(max-width:575.98px){ .people-final-hero { padding:1.15rem; border-radius:26px; } .pfh-copy h1 { font-size:2.35rem; } .pfh-kpi-grid,.efc-info { grid-template-columns:1fr; } .pfh-flow { align-items:flex-start; flex-direction:column; } .pfh-flow i { width:2px; height:16px; margin-left:.45rem; } .efc-top { grid-template-columns:52px minmax(0,1fr); } .efc-avatar { width:52px; height:52px; border-radius:17px; } .efc-status { grid-column:1/-1; justify-self:start; } .efc-actions { flex-direction:column; } }


/* ── v20 Global Motion Suite: animations on every page ── */
.site-ambient { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; opacity:.95; }
.sa-orb { position:absolute; border-radius:50%; filter:blur(46px); opacity:.45; will-change:transform; }
.sa-orb.o1 { width:340px; height:340px; left:-120px; top:16%; background:radial-gradient(circle, rgba(76,58,255,.18), transparent 68%); animation:ambientRoam1 22s ease-in-out infinite alternate; }
.sa-orb.o2 { width:390px; height:390px; right:-140px; top:32%; background:radial-gradient(circle, rgba(34,211,238,.15), transparent 70%); animation:ambientRoam2 26s ease-in-out infinite alternate; }
.sa-orb.o3 { width:310px; height:310px; left:44%; bottom:-150px; background:radial-gradient(circle, rgba(236,72,153,.13), transparent 70%); animation:ambientRoam3 24s ease-in-out infinite alternate; }
.sa-line { position:absolute; height:1px; width:42vw; min-width:280px; background:linear-gradient(90deg, transparent, rgba(76,58,255,.22), rgba(34,211,238,.28), transparent); transform-origin:center; opacity:.55; }
.sa-line.l1 { top:20%; left:8%; transform:rotate(-12deg); animation:ambientLine 16s ease-in-out infinite alternate; }
.sa-line.l2 { right:8%; bottom:18%; transform:rotate(14deg); animation:ambientLine 18s ease-in-out infinite alternate-reverse; }
@keyframes ambientRoam1 { from{transform:translate3d(0,0,0) scale(.95)} to{transform:translate3d(8vw,-4vh,0) scale(1.12)} }
@keyframes ambientRoam2 { from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-6vw,5vh,0) scale(.92)} }
@keyframes ambientRoam3 { from{transform:translate3d(-3vw,0,0) scale(.9)} to{transform:translate3d(4vw,-7vh,0) scale(1.08)} }
@keyframes ambientLine { from{opacity:.18; filter:blur(0)} to{opacity:.62; filter:blur(.3px)} }

#siteMain { isolation:isolate; }
.tth-auto-reveal { opacity:0; transform:translateY(18px) scale(.985); transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
.tth-auto-reveal.is-visible { opacity:1; transform:none; }
.tth-auto-reveal:nth-child(2n) { transition-delay:.04s; }
.tth-auto-reveal:nth-child(3n) { transition-delay:.08s; }

.page-hdr,.people-final-hero,.people-hero,.card,.metric-card,.feature-card,.process-card,.role-card,.bento-card,.employee-final-card,.people-idea-card,.detail-item,.empty-state,.timeline,.stats-band,.cta-panel,.hero-dashboard,.wf-panel {
  --mx:50%; --my:50%; position:relative;
}
.card,.metric-card,.feature-card,.process-card,.role-card,.bento-card,.employee-final-card,.people-idea-card,.detail-item,.empty-state,.stats-band,.page-hdr {
  overflow:hidden;
}
.card::before,.metric-card::before,.feature-card::before,.process-card::before,.role-card::before,.bento-card::before,.employee-final-card::after,.people-idea-card::after,.detail-item::after,.stats-band::after,.page-hdr::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(76,58,255,.12), transparent 62%);
}
.card:hover::before,.metric-card:hover::before,.feature-card:hover::before,.process-card:hover::before,.role-card:hover::before,.bento-card:hover::before,.employee-final-card:hover::after,.people-idea-card:hover::after,.detail-item:hover::after,.stats-band:hover::after,.page-hdr:hover::before { opacity:1; }
.card:hover,.metric-card:hover,.feature-card:hover,.process-card:hover,.role-card:hover,.bento-card:hover,.employee-final-card:hover,.people-idea-card:hover,.detail-item:hover {
  transform:translateY(-5px); box-shadow:var(--s3); border-color:rgba(76,58,255,.24);
}
.card::after,.metric-card::after,.feature-card::after,.process-card::after,.role-card::after,.bento-card::after,.employee-final-card::before,.people-idea-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 0%, transparent 36%, rgba(255,255,255,.16) 50%, transparent 64%, transparent 100%);
  transform:translateX(-140%); opacity:.55;
}
.card:hover::after,.metric-card:hover::after,.feature-card:hover::after,.process-card:hover::after,.role-card:hover::after,.bento-card:hover::after,.employee-final-card:hover::before,.people-idea-card:hover::before { animation:globalShine .95s ease; }
@keyframes globalShine { to{transform:translateX(140%)} }

.m-icon,.empty-icon,.brand-mark,.pc-avatar,.efc-avatar,.test-av,.pr-core,.ts-main,.pfh-panel-head i { animation:iconBreath 4.8s ease-in-out infinite; }
@keyframes iconBreath { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-3px) scale(1.045)} }
.nav-link { position:relative; }
.nav-link::after { content:''; position:absolute; left:.8rem; right:.8rem; bottom:.32rem; height:2px; border-radius:99px; background:linear-gradient(90deg,var(--p),var(--tl),var(--pk)); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.22,1,.36,1); opacity:.85; }
.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }

.btn,.chip,.btn-nav-sm,.btn-theme,.footer-theme { will-change:transform; }
.btn:hover,.chip:hover,.btn-nav-sm:hover,.footer-theme:hover { transform:translateY(-2px) scale(1.015); }
.btn:active,.chip:active { transform:translateY(0) scale(.98); }
.form-control,.form-select { transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr), background var(--tr); }
.form-control:hover,.form-select:hover { transform:translateY(-1px); border-color:rgba(76,58,255,.22); }
.form-control:focus,.form-select:focus { transform:translateY(-2px); box-shadow:0 12px 28px -18px rgba(76,58,255,.45), 0 0 0 .22rem rgba(76,58,255,.10); }

.badge-status,.efc-status,.live-pill,.footer-live { animation:softPulse 3.2s ease-in-out infinite; }
@keyframes softPulse { 0%,100%{filter:saturate(1); box-shadow:none} 50%{filter:saturate(1.18); box-shadow:0 0 0 4px rgba(76,58,255,.06)} }
.tth-progress { overflow:hidden; }
.tth-progress-bar { background-size:220% 100%; animation:progressFlow 4s linear infinite; }
.tth-progress-bar::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform:translateX(-120%); animation:progressSweep 2.4s ease-in-out infinite; }
@keyframes progressFlow { 0%{background-position:0% 50%} 100%{background-position:220% 50%} }
@keyframes progressSweep { 0%,35%{transform:translateX(-120%)} 80%,100%{transform:translateX(120%)} }

.tth-table tbody tr { transition:transform var(--tr), background var(--tr), box-shadow var(--tr); }
.tth-table tbody tr:hover { transform:translateX(5px); background:rgba(76,58,255,.045); box-shadow:inset 3px 0 0 rgba(76,58,255,.42); }
.tth-table td,.tth-table th { transition:color var(--tr), background var(--tr); }
.sparkline { filter:drop-shadow(0 8px 12px rgba(76,58,255,.10)); }
.sp-path { animation:drawsp 1.6s cubic-bezier(.22,1,.36,1) .3s forwards, sparkBreathe 5s ease-in-out 2s infinite; }
@keyframes sparkBreathe { 0%,100%{stroke-width:2; opacity:.9} 50%{stroke-width:2.8; opacity:1} }

.timeline::before { animation:timelineFlow 5s ease-in-out infinite alternate; }
@keyframes timelineFlow { from{opacity:.18; filter:saturate(.9)} to{opacity:.55; filter:saturate(1.3)} }
.tl-item,.onb-task-row { transition:transform var(--tr), background var(--tr), border-color var(--tr); }
.tl-item:hover,.onb-task-row:hover { transform:translateX(4px); }
.onb-task-row.is-done { animation:doneGlow 3.6s ease-in-out infinite; }
@keyframes doneGlow { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 4px rgba(16,185,129,.06)} }

.calendar-day,.calendar-cell,.fc-daygrid-day,.vac-day,.day-cell { transition:transform var(--tr), box-shadow var(--tr), background var(--tr); }
.calendar-day:hover,.calendar-cell:hover,.fc-daygrid-day:hover,.vac-day:hover,.day-cell:hover { transform:translateY(-3px); box-shadow:var(--s2); }

.hero-orb,.people-hero-glow,.footer-aurora,.pc-bg,.ts-aurora,.dash-ambient { will-change:transform; }
.people-final-hero,.page-hdr,.people-toolbar,.card,.metric-card { animation:subtleFloat 9s ease-in-out infinite alternate; }
.people-final-hero,.page-hdr { animation-duration:11s; }
.card:nth-of-type(2n),.metric-card:nth-of-type(2n) { animation-delay:.7s; }
.card:nth-of-type(3n),.metric-card:nth-of-type(3n) { animation-delay:1.2s; }
@keyframes subtleFloat { from{transform:translateY(0)} to{transform:translateY(-3px)} }

[data-counter].is-ticking,.m-value.is-ticking,.sbi-num.is-ticking,.pfh-kpi-grid strong.is-ticking { filter:drop-shadow(0 0 14px rgba(34,211,238,.45)); transform:translateY(-2px) scale(1.035); }
[data-counter],.m-value,.sbi-num { transition:filter .22s, transform .22s; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .tth-auto-reveal { opacity:1!important; transform:none!important; }
}
@media(max-width:767.98px){ .site-ambient { opacity:.55; } .card:hover,.metric-card:hover,.feature-card:hover,.process-card:hover,.role-card:hover,.bento-card:hover,.employee-final-card:hover,.people-idea-card:hover,.detail-item:hover { transform:translateY(-2px); } }


/* ── v7 final fix: stable create-request layout ─────── */
.vacation-create-grid {
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 390px);
  gap:1.5rem;
  align-items:start !important;
  position:relative;
  overflow:visible !important;
}
.vacation-form-col,
.vacation-preview-col {
  min-width:0;
  align-self:start !important;
  transform:none !important;
}
.vacation-create-grid > .tth-auto-reveal,
.vacation-create-grid .vacation-preview-col,
.vacation-create-grid .vacation-preview-card,
.vacation-create-grid .card {
  animation:none !important;
}
.vacation-preview-col {
  position:relative !important;
  top:auto !important;
  margin:0 !important;
  z-index:1;
}
.vacation-preview-card {
  position:relative !important;
  top:auto !important;
  margin:0 !important;
  transform:none !important;
  will-change:auto !important;
  max-height:none !important;
}
.vacation-preview-card:hover {
  transform:translateY(-3px) !important;
}
.vacation-preview-card::before {
  opacity:.45;
  background:radial-gradient(280px circle at 70% 0%, rgba(34,211,238,.12), transparent 62%);
}
.vacation-preview-card .card-body {
  position:relative;
  z-index:1;
}
.vacation-preview-card .m-icon {
  animation:iconBreath 4.8s ease-in-out infinite;
}
.preview-checks > div {
  padding:.55rem .65rem;
  border:1px solid var(--bor);
  border-radius:14px;
  background:rgba(76,58,255,.025);
  transition:transform var(--tr), border-color var(--tr), background var(--tr);
}
.preview-checks > div:hover {
  transform:translateX(4px);
  border-color:rgba(76,58,255,.18);
  background:rgba(76,58,255,.045);
}
.vacation-create-grid .detail-item:hover {
  transform:translateY(-2px) !important;
}
@media(max-width:1199.98px){
  .vacation-create-grid { grid-template-columns:1fr; }
  .vacation-preview-col { order:2; }
  .vacation-form-col { order:1; }
}
@media(max-width:575.98px){
  .vacation-create-grid { gap:1rem; }
  .vacation-preview-card .card-body { padding:1.1rem !important; }
}


/* ── Bitrix24 integration widgets ───────────────────── */
.bitrix-card {
  position:relative; overflow:hidden;
  border-color:rgba(34,211,238,.18)!important;
  background:linear-gradient(145deg,var(--sur),rgba(34,211,238,.045));
}
.bitrix-card::before {
  content:''; position:absolute; inset:-40% -20% auto auto; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.18),transparent 65%);
  animation:floatAura 12s ease-in-out infinite alternate; pointer-events:none;
}
.bitrix-icon {
  width:48px; height:48px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(135deg,#22d3ee,#4c3aff,#ec4899);
  color:#fff; flex:0 0 48px; box-shadow:0 14px 32px -16px rgba(34,211,238,.85);
}
.bitrix-card h5 { font-family:var(--ffd); font-weight:800; }

/* ── v9 fix: stable employees list view ─────────────── */
#empGrid.people-final-grid[data-view="list"] {
  overflow:visible;
}
#empGrid.people-final-grid[data-view="list"] > .row {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:1rem !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
#empGrid.people-final-grid[data-view="list"] .emp-card {
  width:100% !important;
  max-width:100% !important;
  flex:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
#empGrid.people-final-grid[data-view="list"] .employee-final-card {
  display:grid !important;
  grid-template-columns:minmax(240px,1.15fr) minmax(210px,.95fr) minmax(0,1.45fr) minmax(150px,.55fr) !important;
  align-items:center !important;
  gap:1rem !important;
  padding:1rem 1.1rem !important;
  min-height:auto !important;
  overflow:hidden !important;
  animation:none !important;
}
#empGrid.people-final-grid[data-view="list"] .employee-final-card:hover {
  transform:translateY(-2px) !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-top {
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) auto !important;
  gap:.8rem !important;
  align-items:center !important;
  min-width:0 !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-avatar {
  width:54px !important;
  height:54px !important;
  border-radius:18px !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-title h3 {
  font-size:1.08rem !important;
  -webkit-line-clamp:1 !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-title p {
  font-size:.84rem !important;
  -webkit-line-clamp:1 !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-status {
  min-width:50px !important;
  padding:.32rem .5rem !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-progress {
  min-width:0 !important;
  width:100% !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-info {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.55rem !important;
  min-width:0 !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-info div {
  min-height:66px !important;
  padding:.62rem .68rem !important;
  overflow:hidden !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-info span {
  font-size:.58rem !important;
  letter-spacing:.10em !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-info b {
  font-size:.82rem !important;
  line-height:1.18 !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-actions {
  margin:0 !important;
  min-width:0 !important;
  width:100% !important;
  align-self:stretch !important;
  display:flex !important;
  flex-direction:column !important;
  gap:.55rem !important;
}
#empGrid.people-final-grid[data-view="list"] .efc-actions .btn {
  width:100% !important;
  min-height:42px !important;
  white-space:nowrap !important;
}

@media(max-width:1399.98px){
  #empGrid.people-final-grid[data-view="list"] .employee-final-card {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
  #empGrid.people-final-grid[data-view="list"] .efc-info,
  #empGrid.people-final-grid[data-view="list"] .efc-actions {
    grid-column:1 / -1 !important;
  }
  #empGrid.people-final-grid[data-view="list"] .efc-actions {
    flex-direction:row !important;
  }
}
@media(max-width:767.98px){
  #empGrid.people-final-grid[data-view="list"] .employee-final-card {
    grid-template-columns:1fr !important;
  }
  #empGrid.people-final-grid[data-view="list"] .efc-info {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:575.98px){
  #empGrid.people-final-grid[data-view="list"] .efc-top {
    grid-template-columns:52px minmax(0,1fr) !important;
  }
  #empGrid.people-final-grid[data-view="list"] .efc-status {
    grid-column:1 / -1 !important;
    justify-self:start !important;
  }
  #empGrid.people-final-grid[data-view="list"] .efc-info {
    grid-template-columns:1fr !important;
  }
  #empGrid.people-final-grid[data-view="list"] .efc-actions {
    flex-direction:column !important;
  }
}