:root{
  --bg:#0B0B0F; --bg-2:#17171C; --neon:#4F7CFF; --purple:#8B5CF6; --ice:#F5F7FA;
  --muted:#9CA3AF; --border:rgba(255,255,255,.08);
  --grad:linear-gradient(135deg,#4F7CFF 0%,#8B5CF6 100%);
  --glow:0 0 40px rgba(79,124,255,.35);
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ice);font-family:'Inter',sans-serif;scroll-behavior:smooth}
h1,h2,h3,h4,h5,.display-1,.display-2,.display-3,.display-4,.display-5{font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.text-muted-2{color:var(--muted)!important}
.text-grad{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Backgrounds */
.bg-grid{background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0);background-size:32px 32px}
.bg-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5;pointer-events:none;z-index:0}
.orb-blue{background:#4F7CFF;width:420px;height:420px}
.orb-purple{background:#8B5CF6;width:480px;height:480px}

/* Glass */
.glass{background:rgba(23,23,28,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:20px}
.glass-strong{background:rgba(23,23,28,.85);backdrop-filter:blur(28px);border:1px solid var(--border);border-radius:24px}

/* Navbar */
.navbar-cl{position:fixed;top:0;left:0;right:0;z-index:1000;padding:18px 0;transition:.3s;background:transparent}
.navbar-cl.scrolled{background:rgba(11,11,15,.75);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:12px 0}
.navbar-cl .nav-link{color:#cbd0db;font-weight:500;margin:0 10px;font-size:.92rem;transition:.2s}
.navbar-cl .nav-link:hover{color:#fff}
.brand{font-family:'Poppins';font-weight:700;font-size:1.35rem;display:flex;align-items:center;gap:8px}
.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--grad);display:grid;place-items:center;box-shadow:var(--glow)}
.brand-mark i{color:#fff;font-size:1rem}

/* Buttons */
.btn-cl{border-radius:12px;padding:10px 20px;font-weight:600;font-size:.92rem;border:1px solid var(--border);background:transparent;color:#fff;transition:.25s;display:inline-flex;align-items:center;gap:8px}
.btn-cl:hover{border-color:rgba(255,255,255,.25);transform:translateY(-1px);color:#fff}
.btn-primary-cl{background:var(--grad);border:none;color:#fff;box-shadow:0 10px 30px rgba(79,124,255,.35)}
.btn-primary-cl:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(139,92,246,.5);color:#fff}
.btn-ghost{background:rgba(255,255,255,.04)}
.btn-google{background:#fff;color:#111;font-weight:600}
.btn-google:hover{background:#f1f1f1;color:#111}

/* Hero */
.hero{position:relative;padding:160px 0 100px;overflow:hidden}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.05}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(79,124,255,.1);border:1px solid rgba(79,124,255,.3);color:#bcd0ff;font-size:.82rem;font-weight:500}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.glow-pulse{animation:glow 3s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 40px rgba(79,124,255,.3)}50%{box-shadow:0 0 70px rgba(139,92,246,.55)}}

/* Cards */
.card-cl{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:20px;padding:24px;transition:.3s;position:relative;overflow:hidden}
.card-cl:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.4);box-shadow:0 20px 50px rgba(79,124,255,.15)}
.card-cl::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.3s}
.card-cl:hover::before{opacity:.5}

.icon-tile{width:48px;height:48px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font-size:1.2rem;color:#fff;box-shadow:var(--glow)}

.stat-num{font-family:'Poppins';font-size:2.4rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Creator card */
.creator-card{padding:0;overflow:hidden}
.creator-cover{height:90px;background:var(--grad);position:relative}
.creator-body{padding:0 20px 20px;margin-top:-36px}
.creator-avatar{width:72px;height:72px;border-radius:50%;border:4px solid var(--bg-2);object-fit:cover}
.badge-verified{background:rgba(79,124,255,.2);color:#9bb6ff;border:1px solid rgba(79,124,255,.4);padding:3px 8px;border-radius:6px;font-size:.7rem;font-weight:600}
.platform-pill{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.06);display:inline-grid;place-items:center;margin-right:4px;font-size:.85rem}

/* Footer */
.footer{border-top:1px solid var(--border);padding:60px 0 30px;margin-top:80px;background:#08080B}

/* Login split */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:991px){.login-wrap{grid-template-columns:1fr}}
.login-left{padding:60px;position:relative;overflow:hidden;background:radial-gradient(ellipse at top left,#1a1530 0%,#0B0B0F 60%)}
.login-right{padding:60px;display:grid;place-items:center}

/* Dashboard */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:#0E0E13;border-right:1px solid var(--border);padding:24px 16px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:#cbd0db;font-size:.92rem;margin-bottom:4px;transition:.2s;cursor:pointer}
.side-link:hover{background:rgba(255,255,255,.04);color:#fff}
.side-link.active{background:linear-gradient(135deg,rgba(79,124,255,.18),rgba(139,92,246,.12));color:#fff;border:1px solid rgba(79,124,255,.3)}
.topbar{padding:18px 32px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;background:rgba(11,11,15,.7);backdrop-filter:blur(20px);position:sticky;top:0;z-index:50}
.main-area{padding:32px;overflow-x:hidden}
@media(max-width:768px){.app{grid-template-columns:1fr}.sidebar{display:none}}

.input-cl{background:rgba(255,255,255,.04);border:1px solid var(--border);color:#fff;border-radius:12px;padding:12px 16px;width:100%;transition:.2s}
.input-cl:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(79,124,255,.18);background:rgba(255,255,255,.06)}
.input-cl::placeholder{color:#6b7280}

.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border);font-size:.8rem;color:#cbd0db;cursor:pointer;transition:.2s}
.chip:hover,.chip.active{background:var(--grad);border-color:transparent;color:#fff}

.progress-cl{height:6px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.progress-cl > div{height:100%;background:var(--grad);border-radius:99px}

.toast-cl{position:fixed;bottom:24px;right:24px;z-index:9999;padding:14px 20px;border-radius:12px;background:rgba(23,23,28,.95);backdrop-filter:blur(20px);border:1px solid var(--border);color:#fff;display:flex;gap:10px;align-items:center;animation:slideIn .3s ease}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

.spinner-cl{width:18px;height:18px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* animated gradient bg */
.anim-grad{background:linear-gradient(135deg,#4F7CFF,#8B5CF6,#4F7CFF);background-size:200% 200%;animation:gradMove 8s ease infinite}
@keyframes gradMove{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

/* mock chart */
.bars{display:flex;align-items:flex-end;gap:8px;height:140px}
.bars > div{flex:1;background:var(--grad);border-radius:6px 6px 0 0;opacity:.85;transition:.3s}
.bars > div:hover{opacity:1;transform:scaleY(1.05)}

/* particles */
.particle{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.4;animation:floatP 8s ease-in-out infinite}
@keyframes floatP{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}

.hover-scale{transition:.25s}
.hover-scale:hover{transform:scale(1.04)}

.divider{height:1px;background:var(--border);margin:24px 0}

/* modal */
.modal-cl-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-cl-backdrop.show{display:flex;animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-cl{max-width:440px;width:100%;padding:36px}