:root{
  --bg:#0e0f14; --card:#151823; --muted:#98a1b3; --text:#e9ecf1;
  --primary:#7353ea; --primary-2:#a78bfa; --accent:#00d6b9; --danger:#ff5d6c;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Inter",system-ui,Segoe UI,Arial; background:linear-gradient(160deg,#0b0c11 0%,#10131b 100%); color:var(--text);
}
.container{width:min(1140px,92vw); margin:auto}
.site-header{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background:rgba(14,15,20,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.header-grid{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--text)}
.logo{width:40px; height:40px; border-radius:12px; background:
 radial-gradient(120% 120% at 100% 0%, var(--accent) 0%, transparent 45%),
 linear-gradient(135deg, var(--primary), var(--primary-2));
 display:grid; place-items:center; font-weight:700; box-shadow:var(--shadow)}
.brand-text span{display:block; font-size:12px; color:var(--muted)}
.nav{display:flex; gap:10px}

.page{padding:32px 0 60px}

.hero{
  display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; margin-top:24px;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)
}
h1,h2,h3{margin:0 0 10px}
h1{font-size:36px}
h2{font-size:22px}
.muted{color:var(--muted)}
.kpis{display:flex; gap:14px; flex-wrap:wrap}
.kpi{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px 14px; font-size:13px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:white; text-decoration:none; font-weight:700; border:none; cursor:pointer; box-shadow:var(--shadow)
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--text)}
.btn.danger{background:linear-gradient(135deg,#ff6b6b,#ff3b3b)}
.btn.block{width:100%}
.btn.slim{padding:10px 14px; border-radius:10px}

.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}

.form .row{display:grid; gap:12px; margin-bottom:14px}
.form label{font-size:13px; color:var(--muted)}
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form input[type="tel"], .form input[type="number"], .form select, .form textarea{
  width:100%; background:var(--card); border:1px solid rgba(255,255,255,.09);
  color:var(--text); border-radius:12px; padding:12px 12px; outline:none;
}
.form input[type="file"]{color:var(--muted)}
.help{font-size:12px; color:var(--muted)}

.profile{display:grid; grid-template-columns:240px 1fr; gap:18px;}
.avatar{
  width:100%; aspect-ratio:1/1; border-radius:16px; background:#0d0f16; border:1px solid rgba(255,255,255,.08);
  display:grid; place-items:center; overflow:hidden
}
.avatar img{width:100%; height:100%; object-fit:cover}

.list{display:grid; gap:10px}
.item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 14px;
}
.badge{padding:6px 10px; border-radius:999px; background:rgba(115,83,234,.20); color:#cfc6ff; font-size:12px}

.modal{
  position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.5); z-index:100;
}
.modal .panel{
  width:min(520px,92vw); background:#0f1220; border:1px solid rgba(255,255,255,.10);
  border-radius:16px; box-shadow:var(--shadow); padding:20px; text-align:center;
}

.progress{
  width:100%; height:10px; border-radius:999px; background:#181c2a; overflow:hidden; border:1px solid rgba(255,255,255,.08)
}
.progress > div{height:100%; width:0; background:linear-gradient(90deg,var(--primary),var(--accent))}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:12px; color:#d9d9ff; background:rgba(167,139,250,.18); border:1px solid rgba(167,139,250,.35); padding:6px 10px; border-radius:999px}

.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:18px 0; color:var(--muted)}
.footer-grid{display:flex; align-items:center; justify-content:space-between}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .profile{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
}