:root{
  --bg:#1d2029;
  --bg2:#252934;
  --panel:#2c303c;
  --panel2:#353947;
  --text:#f6f7fb;
  --muted:#b9c0d4;
  --line:#3f4658;
  --blue:#4aa3ff;
  --red:#e84d5b;
  --gold:#d4a64a;
  --purple:#8c5cff;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:#1d2029;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
a{text-decoration:none;color:inherit}
.site-shell{min-height:100vh;background:linear-gradient(180deg,#202430 0%,#1c1f28 100%)}
.topbar{
  height:76px;
  background:#191b21;
  border-bottom:1px solid #2b303c;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px 0 10px;
  position:sticky;
  top:0;
  z-index:20;
}
.top-left{display:flex;align-items:center;gap:18px}
.back-btn{
  width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;
  font-size:2rem;font-weight:900;color:white;
}
.top-ad{
  width:270px;height:60px;
  background:linear-gradient(135deg,#446aa7,#161d2a), url("assets/img/banners/top-ad.jpg"); background-size:cover; background-position:center;
  border:1px solid #46516d;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  color:#eaf4ff;font-weight:1000;
  letter-spacing:.04em;
}
.top-actions{display:flex;gap:10px}
.social{
  height:44px;
  padding:0 18px;
  border-radius:0;
  display:flex;align-items:center;gap:8px;
  font-weight:800;
  background:#4aa3ff;
}
.social.red{background:#e84d5b}
.page-wrap{max-width:1500px;margin:0 auto;padding:42px 58px 60px}
.hero{
  min-height:335px;
  position:relative;
  overflow:hidden;
  border-radius:0;
  margin:-42px -58px 36px;
  padding:42px 58px;
  background:
    linear-gradient(90deg,rgba(30,33,43,.98),rgba(30,33,43,.88),rgba(30,33,43,.96)),
    radial-gradient(circle at 50% 25%,rgba(92,105,140,.25),transparent 45%);
}
.hero:before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(29,32,41,.72),rgba(29,32,41,.92)),
    url("assets/img/backgrounds/hero-bg.jpg");
  background-size:cover;
  background-position:center;
  opacity:.28;
}
.hero-content{position:relative;z-index:1;padding-top:38px}
.breadcrumb{color:#aeb7d2;font-size:1rem;margin-bottom:22px}
.breadcrumb strong{color:#fff}
.title-row{display:flex;align-items:center;gap:16px}
.title-icon{
  width:98px;height:98px;
  background:#343947;
  border:1px solid #5b6378;
  overflow:hidden;
}
.title-icon img{width:100%;height:100%;object-fit:cover}
.title-copy h1{
  margin:0 0 5px;
  font-size:2rem;
  letter-spacing:-.04em;
}
.title-copy p{margin:0 0 8px;color:#fff;font-size:1.15rem}
.updated{color:#c8cfdf;font-size:.9rem}
.updated strong{color:white}
.wide-ad{
  height:150px;
  margin:0 0 28px;
  border:1px solid #7987a8;
  background:linear-gradient(90deg,#527db9,#1b2a45 35%,#0f1116 60%,#5079b4), url("assets/img/banners/wide-ad.jpg"); background-size:cover; background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#dffaff;
  font-size:3.2rem;
  font-weight:1000;
  letter-spacing:.02em;
  text-shadow:0 3px 0 #000;
  overflow:hidden;
}
.section-heading{
  display:flex;align-items:center;gap:8px;
  border-bottom:2px solid var(--blue);
  padding-bottom:8px;
  margin-bottom:15px;
}
.blue-square{width:14px;height:14px;border-radius:3px;background:var(--blue)}
.section-heading h2{
  margin:0;
  text-transform:uppercase;
  font-size:1.25rem;
}
.section-heading span{color:#c6cada;font-size:.9rem;margin-left:10px}
.controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  margin-bottom:14px;
}
.search-wrap{
  height:41px;
  width:210px;
  background:#f4f5f7;
  color:#1f2430;
  display:flex;
  align-items:center;
  margin-right:10px;
}
.search-wrap input{
  border:0;
  outline:0;
  width:100%;
  background:transparent;
  padding:0 12px;
  font-size:1rem;
}
.clear-x{padding:0 12px;color:#111;font-weight:1000}
.filter{
  min-width:52px;
  height:41px;
  padding:0 14px;
  border:1px solid #555b6c;
  background:#303440;
  color:#c8cedd;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-weight:900;
  border-radius:0;
  margin-left:-1px;
}
.filter.active{background:var(--blue);color:white;border-color:var(--blue)}
.filter.reset{margin-left:10px;gap:8px;color:#aeb4c3}
.character-wall{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
}
.char-card{
  height:190px;
  border-radius:0;
  overflow:hidden;
  position:relative;
  border:0;
  background:#b79155;
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}
.char-card:before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.65) 100%);
  z-index:2;
}
.char-card .portrait{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#8763c9,#c49a5b);
  height:100%;
}
.char-card img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
  padding:0;
}
.fallback-initials{
  width:100%;height:100%;
  display:grid;place-items:center;
  font-size:2rem;font-weight:1000;
}
.char-name{
  position:absolute;
  left:0;right:0;bottom:7px;
  text-align:center;
  z-index:3;
  font-weight:1000;
  color:white;
  text-shadow:0 2px 3px #000;
}
.corner-icon{
  position:absolute;
  z-index:4;
  left:6px;top:6px;
  width:26px;height:26px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(15,17,24,.7);
  border:1px solid rgba(255,255,255,.22);
  font-size:.9rem;
}
.sidebar-float{
  position:fixed;
  right:18px;
  bottom:18px;
  background:#232733;
  border:1px solid #40485b;
  border-radius:14px;
  padding:10px;
  display:grid;
  gap:8px;
  z-index:30;
}
.sidebar-float a{
  width:42px;height:42px;border-radius:10px;background:#303646;display:grid;place-items:center;color:#cbd3e5;font-weight:900;
}
.page-grid{display:grid;grid-template-columns:250px 1fr;gap:22px}
.left-menu{
  background:#252934;
  border:1px solid #3c4354;
  padding:12px;
  align-self:start;
  position:sticky;
  top:96px;
}
.left-menu a{
  display:block;
  padding:12px 14px;
  border-bottom:1px solid #384052;
  color:#c6ccdc;
  font-weight:800;
}
.left-menu a.active,.left-menu a:hover{background:#343b4d;color:white}
.content-card{
  background:#252934;
  border:1px solid #3c4354;
  padding:22px;
}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:13px;text-align:left;border-bottom:1px solid #3c4354}
.table th{color:#c7cee0;text-transform:uppercase;font-size:.82rem}
@media(max-width:950px){
  .page-wrap{padding:24px 16px}
  .hero{margin:-24px -16px 28px;padding:24px 16px}
  .top-ad{display:none}
  .wide-ad{height:90px;font-size:1.6rem}
  .character-wall{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .char-card{height:155px}
  .page-grid{grid-template-columns:1fr}
  .left-menu{position:static}
}