
:root{--bg:#07111f;--panel:#0d1b2e;--panel2:#101f35;--line:#1e3657;--text:#edf6ff;--muted:#9db2cc;--brand:#31d0aa;--brand2:#5da8ff;--danger:#ff6b6b;--radius:20px;--shadow:0 20px 55px rgba(0,0,0,.28)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;background:radial-gradient(circle at 85% -10%,rgba(49,208,170,.20),transparent 36%),radial-gradient(circle at 10% 0,rgba(93,168,255,.18),transparent 34%),var(--bg);color:var(--text);min-height:100vh}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.hidden{display:none!important}.landing .topnav{display:flex;justify-content:space-between;align-items:center;padding:18px 7vw;border-bottom:1px solid var(--line);background:rgba(7,17,31,.65);backdrop-filter:blur(16px);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-weight:900}.mark{width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;color:#06101e;font-weight:900}.topnav nav{display:flex;gap:18px;align-items:center;color:var(--muted)}.btn{border:1px solid var(--line);background:rgba(16,31,53,.88);color:var(--text);padding:11px 15px;border-radius:14px;cursor:pointer}.btn.primary{border:0;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#06101e;font-weight:900}.btn.danger{border-color:rgba(255,107,107,.45);color:#ffd0d0}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:70px 7vw}.eyebrow{color:#9ff4de;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}.hero h1{font-size:clamp(36px,6vw,68px);line-height:1.05;margin:10px 0}.lead{font-size:19px;line-height:1.8;color:var(--muted);max-width:720px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.panel,.card{background:linear-gradient(180deg,rgba(16,31,53,.92),rgba(13,27,46,.88));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.hero-card{padding:22px}.bubble{padding:14px 16px;border-radius:18px;margin:12px 0;max-width:85%}.bubble.ai{background:#10233d}.bubble.user{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#06101e;margin-right:auto}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.metric-row div,.metric{padding:16px;border:1px solid var(--line);border-radius:16px;background:#09172a}.metric-row b,.metric strong{display:block;font-size:28px}.metric-row small,.metric span{color:var(--muted)}.section{padding:40px 7vw}.grid{display:grid;gap:16px}.cards3{grid-template-columns:repeat(3,1fr)}.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.side{position:sticky;top:0;height:100vh;padding:24px;border-left:1px solid var(--line);background:rgba(7,17,31,.78);backdrop-filter:blur(18px)}.side .brand{margin-bottom:25px}.nav{display:grid;gap:8px}.nav button{border:0;text-align:right;padding:13px 14px;border-radius:15px;background:transparent;color:var(--muted);cursor:pointer}.nav button.active,.nav button:hover{background:rgba(93,168,255,.12);color:var(--text)}.side-note{margin-top:22px;padding:15px;border:1px solid var(--line);border-radius:16px;background:rgba(16,31,53,.75);color:var(--muted);line-height:1.7}.main{padding:26px}.top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:22px}.title h2{font-size:30px;margin:0}.title p{color:var(--muted);margin:6px 0 0}.page{display:none}.page.active{display:block}.stats{grid-template-columns:repeat(6,1fr)}.split{grid-template-columns:1.35fr .65fr;margin-top:16px}.employees{grid-template-columns:repeat(3,1fr)}.card{padding:18px}.employee h3{margin:12px 0 6px}.employee p{color:var(--muted);line-height:1.65}.avatar{width:50px;height:50px;border-radius:17px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#06101e;display:grid;place-items:center;font-weight:900}.badge,.pill{display:inline-flex;padding:6px 9px;border-radius:999px;background:rgba(49,208,170,.13);color:#9ff4de;border:1px solid rgba(49,208,170,.24);font-size:12px}.toolbar{display:flex;gap:10px;margin-bottom:14px}.search,.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);background:#09172a;color:var(--text);padding:12px;border-radius:14px}.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form label{display:grid;gap:7px;color:var(--muted);font-size:13px}.form textarea,.full{grid-column:1/-1}.form textarea{min-height:100px}.table{width:100%;border-collapse:separate;border-spacing:0 10px}.table th{color:var(--muted);font-weight:500;text-align:right;padding:0 12px}.table td{background:#09172a;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 12px}.table td:first-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0}.table td:last-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px}.modal{position:fixed;inset:0;background:rgba(3,8,15,.7);display:none;align-items:center;justify-content:center;padding:16px;z-index:20}.modal.show{display:flex}.modal .card{width:min(760px,100%)}.mobilebar{display:none}.toast{position:fixed;bottom:18px;left:18px;display:none;padding:12px 15px;border:1px solid var(--line);border-radius:14px;background:#10233d}.toast.show{display:block}@media(max-width:980px){.hero,.cards3,.app,.stats,.split,.employees{grid-template-columns:1fr}.side{display:none}.mobilebar{display:flex;position:sticky;top:0;z-index:10;padding:10px;gap:8px;overflow:auto;background:rgba(7,17,31,.92);border-bottom:1px solid var(--line)}.mobilebar button{white-space:nowrap}.main{padding:16px}.top{flex-direction:column}.form{grid-template-columns:1fr}.topnav nav{display:none}}
.hidden{display:none!important}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{max-width:680px}.auth-tabs{display:flex;gap:10px;margin:18px 0}.auth-form{margin-top:10px}.form .full{grid-column:1/-1}.danger{border-color:rgba(239,68,68,.35)!important;color:#fecaca!important}.toolbar{display:flex;gap:10px;margin-bottom:16px}.search{width:100%;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit}

.card-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.health{margin:0;padding:0 18px;color:var(--muted);line-height:2}.check{display:flex!important;align-items:center;gap:10px}.check input{width:auto}.brand small{color:var(--muted);font-size:12px}.table .btn{padding:7px 10px;border-radius:10px;margin:2px}@media(max-width:1180px){.stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.stats{grid-template-columns:1fr}.table{display:block;overflow:auto}.modal .card{max-height:92vh;overflow:auto}}

.mini.stats{grid-template-columns:repeat(3,1fr)}
#importFile{display:none}
@media(max-width:720px){.mini.stats{grid-template-columns:1fr}}

.kanban{grid-template-columns:repeat(5,1fr);align-items:start}.mini-card{border:1px solid var(--line);background:#09172a;border-radius:16px;padding:12px;margin:10px 0}.mini-card p{color:var(--muted);margin:8px 0 0;line-height:1.5}.muted{color:var(--muted)}.muted-pill{background:rgba(157,178,204,.12);color:var(--muted);border-color:rgba(157,178,204,.24)}@media(max-width:1180px){.kanban{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.kanban{grid-template-columns:1fr}}


/* V3.7 Mobile PWA Pro */
.mobilebar{position:fixed;bottom:0;left:0;right:0;z-index:30;display:none;gap:6px;overflow:auto;padding:8px;background:rgba(15,23,42,.96);border-top:1px solid rgba(148,163,184,.2)}
.mobilebar button{white-space:nowrap;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.06);color:inherit;border-radius:999px;padding:8px 12px;font-size:12px}
.mobilebar button.active{background:linear-gradient(135deg,#7c3aed,#06b6d4);border-color:transparent}
@media(max-width:820px){.side{display:none}.main{padding-bottom:78px}.mobilebar{display:flex}.top{position:sticky;top:0;z-index:20}.grid.split{grid-template-columns:1fr}.actions{gap:8px}.actions .btn{flex:1}}
@media(max-width:520px){.table{font-size:12px}.card{padding:14px}.metric strong{font-size:24px}.toolbar{flex-direction:column}.toolbar .search{width:100%}}
