:root{
  --black:#0B0B0D;
  --black-soft:#141416;
  --white:#F4F3F0;
  --red:#E1132C;
  --red-dim:rgba(225,19,44,0.14);
  --gray:#8A8A8E;
  --line:rgba(244,243,240,0.14);
  --line-strong:rgba(244,243,240,0.28);
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk',sans-serif; font-weight:700; text-wrap:balance;
}
a{color:inherit;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--red); color:var(--white); border:none; border-radius:10px;
  padding:12px 20px; font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:0.95rem; cursor:pointer; transition:opacity .15s;
}
.btn:hover{opacity:0.88;}
.btn:disabled{opacity:0.5; cursor:default;}
.btn.ghost{
  background:rgba(255,255,255,0.06); border:1px solid var(--line-strong); color:var(--white);
  backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
}
.btn.ghost:hover{background:rgba(255,255,255,0.1);}
input,select,textarea{
  background:rgba(255,255,255,0.05); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; color:var(--white); font-family:'Inter',sans-serif; font-size:0.95rem;
  width:100%; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .15s, border-color .15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--red); background:rgba(255,255,255,0.08);}
select option{
  background:var(--black-soft); color:var(--white); padding:8px;
}
select option:checked, select option:hover{
  background:var(--red); color:var(--white);
}
select option:disabled{color:var(--gray);}
label{font-size:0.82rem; color:var(--gray); display:block; margin-bottom:6px;}
.card{
  border:1px solid rgba(255,255,255,0.12); border-radius:20px;
  background:linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
  padding:24px;
}
.pill{
  display:inline-block; padding:5px 12px; border-radius:999px; font-size:0.78rem;
  font-family:'Space Grotesk',sans-serif; font-weight:600; border:1px solid var(--line-strong);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.pill.red{background:var(--red-dim); color:var(--red); border-color:rgba(225,19,44,0.35);}
table{width:100%; border-collapse:collapse; font-size:0.9rem;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
th{color:var(--gray); font-weight:500; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:16px 28px; gap:16px;
  background:rgba(20,20,22,0.6); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,0.1);
  position:sticky; top:0; z-index:30;
}
.logo{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:0.02em;}
.logo .accent{color:var(--red);}
.topbar-brand{flex-shrink:0;}
.topbar-right{display:flex; align-items:center; gap:18px;}
.topbar-nav{display:flex; align-items:center; gap:4px;}
.topbar-nav a{
  font-family:'Space Grotesk',sans-serif; font-weight:600; padding:8px 12px; border-radius:8px;
  font-size:0.88rem; text-decoration:none; color:var(--white); transition:background .15s, color .15s;
  white-space:nowrap;
}
.topbar-nav a:hover{background:rgba(255,255,255,0.07);}
.topbar-nav a.active{background:rgba(225,19,44,0.14); color:var(--red);}
.nav-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:6px;
  border-radius:999px; background:var(--red); color:#fff;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.68rem;
  vertical-align:middle;
}
.topbar-user{display:flex; align-items:center; gap:14px; font-size:0.85rem; color:var(--gray); flex-shrink:0;}
.topbar-user span{white-space:nowrap;}
.topbar-toggle{
  display:none; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  width:38px; height:38px; border-radius:10px; align-items:center; justify-content:center;
  cursor:pointer; color:var(--white); flex-shrink:0; position:relative;
}
.topbar-toggle .icon-close{display:none;}
.topbar-toggle.open .icon-burger{display:none;}
.topbar-toggle.open .icon-close{display:block;}
@media (max-width:1220px){
  .topbar{padding:14px 18px;}
  .topbar-toggle{display:flex;}
  .topbar-nav{
    position:absolute; top:calc(100% + 10px); left:14px; right:14px; padding:10px;
    flex-direction:column; align-items:stretch; gap:2px;
    background:linear-gradient(160deg, rgba(32,32,36,0.97), rgba(11,11,13,0.99));
    backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
    border:1px solid rgba(255,255,255,0.14); border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .topbar-nav.open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
  .topbar-nav a{padding:12px 14px;}
  .topbar-user span{display:none;}
}
@media (max-width:480px){
  .topbar-user{gap:8px;}
  .topbar-user .btn{padding:8px 10px; font-size:0.78rem;}
}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:10px;}