:root{
  --bg: #0a0810;
  --bg-2: #120e1c;
  --card: #17121f;
  --card-border: rgba(255,255,255,0.08);
  --gold: #f6c445;
  --pink: #ff3d8a;
  --purple: #8b3bf2;
  --text: #f4eee0;
  --text-dim: #b3a9c2;
  --danger: #ff5b5b;
  --success: #3ee68a;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background: radial-gradient(ellipse at 50% -10%, #241a33 0%, var(--bg) 55%) fixed;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  min-height:100vh;
  display:flex; flex-direction:column;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4,.brand-word{ font-family:'Cinzel', serif; }
main{ flex:1; }

nav{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 5vw;
  background: rgba(10,8,16,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap; gap: 10px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:38px; height:38px; border-radius:50%; }
.brand-word{ font-size: 17px; font-weight:700; letter-spacing: 1px; color: var(--gold); }
.navlinks{ display:flex; gap: 18px; flex-wrap:wrap; font-size: 12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.navlinks a{ color: var(--text-dim); transition: color .2s; }
.navlinks a:hover, .navlinks a.active{ color: var(--pink); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-cta{
  border: 1px solid var(--gold); color: var(--gold);
  padding: 8px 16px; font-size: 11px; font-weight:800; letter-spacing: 1px; text-transform:uppercase;
  border-radius: 2px; transition: all .2s;
}
.nav-cta:hover{ background: var(--gold); color:#1a1206; }
.nav-user{ font-size:12px; color: var(--text-dim); }
.nav-user b{ color: var(--gold); }

.wrap{ max-width: 1080px; margin: 0 auto; padding: 50px 5vw; }
.wrap-narrow{ max-width: 720px; margin: 0 auto; padding: 50px 5vw; }

.kicker{ font-size: 11px; letter-spacing:3px; text-transform:uppercase; color: var(--purple); font-weight:800; margin-bottom: 10px; }
.page-title{ font-size: clamp(26px, 4vw, 40px); font-weight:700; color: var(--text); margin: 0 0 10px; }
.page-title em{ font-style:normal; color: var(--gold); }
.page-desc{ color: var(--text-dim); max-width: 620px; font-size: 14.5px; line-height:1.7; margin-bottom: 36px; }

.card{
  background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; padding: 24px;
}
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 18px; }
.grid-2{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 20px; }

.btn{
  display:inline-block; padding: 11px 22px; font-size: 12px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; border-radius: 2px; border: 1px solid var(--card-border); color: var(--text-dim);
  background: transparent; cursor:pointer; transition: all .2s;
}
.btn:hover{ border-color: var(--gold); color: var(--gold); }
.btn-primary{ background: linear-gradient(135deg, var(--pink), var(--purple)); color:#fff; border:none; box-shadow: 0 0 18px rgba(255,61,138,0.3);}
.btn-primary:hover{ color:#fff; box-shadow: 0 0 26px rgba(255,61,138,0.55); }
.btn-danger{ border-color: var(--danger); color: var(--danger); }
.btn-danger:hover{ background: var(--danger); color:#1a0505; }
.btn-sm{ padding: 6px 14px; font-size: 10.5px; }

label{ display:block; font-size:12px; font-weight:700; letter-spacing:0.5px; color: var(--text-dim); margin: 14px 0 6px; text-transform:uppercase;}
input[type=text], input[type=email], input[type=password], input[type=datetime-local], input[type=number], input[type=color], select, textarea{
  width:100%; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--card-border); color: var(--text);
  border-radius: 4px; font-family:inherit; font-size:14px;
}
textarea{ min-height: 100px; resize: vertical; }
form .field{ margin-bottom: 4px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; margin: 8px 0; font-size:13px; color: var(--text-dim); text-transform:none; }
.checkbox-row input{ width:auto; }

.badge{ display:inline-block; font-size:10px; letter-spacing:1px; text-transform:uppercase; font-weight:800; padding:4px 10px; border-radius:999px; }
.badge-gold{ background: rgba(246,196,69,0.15); color: var(--gold); border:1px solid rgba(246,196,69,0.4); }
.badge-pink{ background: rgba(255,61,138,0.15); color: var(--pink); border:1px solid rgba(255,61,138,0.4); }
.badge-purple{ background: rgba(139,59,242,0.15); color: #c9a3ff; border:1px solid rgba(139,59,242,0.4); }
.badge-success{ background: rgba(62,230,138,0.15); color: var(--success); border:1px solid rgba(62,230,138,0.4); }
.badge-danger{ background: rgba(255,91,91,0.15); color: var(--danger); border:1px solid rgba(255,91,91,0.4); }

table{ width:100%; border-collapse: collapse; font-size:13.5px; }
th, td{ text-align:left; padding: 10px 12px; border-bottom: 1px solid var(--card-border); }
th{ color: var(--text-dim); font-size:11px; letter-spacing:1px; text-transform:uppercase; }

.alert{ padding: 12px 16px; border-radius: 4px; font-size:13px; margin-bottom: 18px; }
.alert-error{ background: rgba(255,91,91,0.1); border:1px solid rgba(255,91,91,0.35); color:#ffb3b3; }
.alert-info{ background: rgba(74,163,255,0.1); border:1px solid rgba(74,163,255,0.35); color:#a9d2ff; }

.tabs{ display:flex; gap: 22px; font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight:800; color: var(--text-dim); margin-bottom:22px; border-bottom:1px solid var(--card-border); padding-bottom: 12px; flex-wrap:wrap;}
.tabs a.active{ color: var(--gold); }

.role-photo{ width:160px; height:36px; border-radius:6px; object-fit:contain; background: var(--bg-2); border:1px solid var(--card-border); padding:4px; }
.avatar{ width: 84px; height:84px; border-radius:50%; background: linear-gradient(135deg, var(--pink), var(--purple)); display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; font-size: 28px; color:#fff; }

footer{ padding: 40px 5vw; border-top:1px solid var(--card-border); text-align:center; }
footer p{ color: var(--text-dim); font-size: 12px; }

@media (max-width: 900px){
  .grid[style*="repeat(4"]{ grid-template-columns: repeat(2, 1fr) !important; }
  .grid-2[style*="260px"]{ grid-template-columns: 1fr !important; }
}
@media (max-width: 560px){
  .grid[style*="repeat(4"]{ grid-template-columns: 1fr !important; }
  nav{ flex-direction:column; align-items:flex-start; }
}