/* AKAME_ART_V5 — capa visual premium, solo presentación */
:root{
  --akame-red:#ff2838;
  --akame-red-soft:#9c0c18;
  --akame-panel:rgba(9,10,14,.93);
  --akame-line:rgba(255,47,61,.18);
}

body{
  background:
    radial-gradient(circle at 75% 18%,rgba(126,5,18,.16),transparent 28%),
    radial-gradient(circle at 18% 82%,rgba(105,5,18,.13),transparent 30%),
    #050609!important;
}

/* Fondo cinematográfico grande: luna + Akame + ciudad */
.shell{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.shell:before{
  content:"";
  position:absolute;
  z-index:-3;
  top:0;
  left:0;
  right:0;
  height:365px;
  background-image:
    linear-gradient(90deg,rgba(4,5,8,.42) 0%,rgba(4,5,8,.18) 30%,rgba(4,5,8,.08) 58%,rgba(4,5,8,.34) 100%),
    linear-gradient(180deg,rgba(4,5,8,.05) 0%,rgba(4,5,8,.18) 55%,#050609 100%),
    url('/assets/akame-hero-wide.svg?v=20260823-5');
  background-size:cover;
  background-position:center 36%;
  background-repeat:no-repeat;
  filter:saturate(1.10) contrast(1.04) brightness(.84);
  transform:scale(1.015);
  transform-origin:center top;
}
.shell:after{
  content:"";
  position:absolute;
  z-index:-2;
  top:235px;
  left:0;
  right:0;
  height:210px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(5,6,9,.56) 35%,#050609 100%);
}

/* Header alto como el mockup: título abajo, estado arriba */
.topbar{
  height:220px!important;
  margin-bottom:-8px!important;
  border-bottom:0!important;
  background:transparent!important;
  overflow:visible!important;
  display:flex!important;
  align-items:flex-end!important;
  padding-bottom:30px!important;
}
.topbar:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,42,56,.28),rgba(255,255,255,.07),transparent);
}
.header-art{display:none!important}
.akame-generated-figure,.akame-figure-v2,.akame-figure-v3{display:none!important}

.page-heading{
  z-index:4!important;
  padding:18px 24px 17px!important;
  border-left:2px solid rgba(255,39,54,.66);
  border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,rgba(5,6,9,.86),rgba(5,6,9,.42) 70%,transparent);
  backdrop-filter:blur(5px);
  box-shadow:0 18px 55px rgba(0,0,0,.18);
}
.page-heading .eyebrow{color:#ff4652!important;text-shadow:0 0 14px rgba(255,34,49,.32)}
.topbar h1{font-size:34px!important;text-shadow:0 3px 18px rgba(0,0,0,.7)}
.page-subtitle{color:#a6a8b0!important}

.top-actions{
  position:absolute!important;
  z-index:5!important;
  top:24px!important;
  right:0!important;
  align-items:center!important;
}
.top-status{
  background:linear-gradient(145deg,rgba(11,13,18,.92),rgba(6,7,10,.82))!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.40),inset 0 1px rgba(255,255,255,.025)!important;
  backdrop-filter:blur(10px);
}
.operator{
  padding:5px 10px 5px 7px!important;
  border-radius:12px;
  background:rgba(4,5,8,.34);
  backdrop-filter:blur(7px);
}
.operator img{
  width:46px!important;
  height:46px!important;
  object-fit:cover!important;
  object-position:50% 13%!important;
  border-radius:50%!important;
  background:#08090d!important;
  filter:saturate(1.06) contrast(1.05) brightness(.92);
  box-shadow:0 0 0 1px rgba(255,45,57,.55),0 0 22px rgba(255,35,49,.18)!important;
}

/* Sidebar más premium */
.sidebar{
  background:
    radial-gradient(circle at 50% 72%,rgba(137,7,20,.10),transparent 24%),
    linear-gradient(180deg,rgba(4,5,8,.998),rgba(5,6,9,.985))!important;
  border-right-color:rgba(255,255,255,.08)!important;
}
.brand-mark{box-shadow:0 0 30px rgba(255,36,51,.16),inset 0 0 24px rgba(255,36,51,.08)!important}
.nav{border-radius:10px!important}
.nav.active{
  border-color:rgba(255,45,57,.48)!important;
  background:linear-gradient(90deg,rgba(132,8,20,.56),rgba(48,4,10,.23))!important;
  box-shadow:inset 3px 0 #ff2938,0 0 34px rgba(255,29,45,.13)!important;
}
.sidebar-art{
  padding:0 0 12px!important;
  overflow:visible!important;
  position:relative;
  min-height:315px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
}
.sidebar-art:before{
  content:"";
  position:absolute;
  width:235px;
  height:235px;
  left:50%;
  top:36px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(205,9,27,.24),rgba(91,5,14,.07) 48%,transparent 72%);
  filter:blur(12px);
  pointer-events:none;
}
.sidebar-art img{
  width:236px!important;
  height:285px!important;
  object-fit:cover!important;
  object-position:50% 16%!important;
  margin:0 auto -36px!important;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 0 28px rgba(255,31,47,.34)) saturate(1.08) contrast(1.05);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 70%,rgba(0,0,0,.78) 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 70%,rgba(0,0,0,.78) 82%,transparent 100%);
}
.sidebar-art p,.sidebar-art small{position:relative;z-index:3}
.sidebar-art p{margin:14px 0 5px!important;text-shadow:0 0 14px rgba(255,34,49,.30)}

/* Tarjetas: vidrio oscuro + borde rojo fino */
.card{
  border-color:rgba(255,255,255,.105)!important;
  background:linear-gradient(145deg,rgba(15,17,23,.95),rgba(7,8,12,.965))!important;
  backdrop-filter:blur(12px);
  box-shadow:0 24px 65px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.018)!important;
}
.card:before{
  content:"";
  position:absolute;
  left:9%;
  right:9%;
  top:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,39,54,.42),transparent);
}
.card:hover{border-color:rgba(255,47,61,.20)!important}

.hero-grid{position:relative;z-index:2;gap:20px!important}
.hero-card{
  min-height:332px!important;
  background:
    radial-gradient(circle at 80% 50%,rgba(144,7,21,.18),transparent 31%),
    linear-gradient(145deg,rgba(12,13,18,.96),rgba(7,8,12,.96))!important;
  border-color:rgba(255,45,58,.28)!important;
  box-shadow:0 26px 78px rgba(0,0,0,.52),0 0 38px rgba(142,7,20,.08)!important;
}
.hero-card:after{
  background:
    repeating-linear-gradient(135deg,transparent 0 31px,rgba(255,255,255,.012) 32px 33px),
    linear-gradient(120deg,rgba(255,255,255,.015),transparent 32%,rgba(255,39,54,.022))!important;
}
.hero-copy{max-width:58%!important}
.hero-emblem{
  width:292px!important;
  height:292px!important;
  right:20px!important;
  top:22px!important;
  filter:drop-shadow(0 0 30px rgba(255,34,49,.28))!important;
}
.slots strong{font-size:78px!important;text-shadow:0 0 34px rgba(255,38,52,.23)!important}
.hero-button{box-shadow:0 12px 34px rgba(222,18,32,.30),0 0 18px rgba(255,36,51,.08)!important}

.bot-card{
  min-height:332px!important;
  border-color:rgba(255,45,58,.19)!important;
  background:
    radial-gradient(circle at 96% 8%,rgba(151,10,23,.14),transparent 34%),
    linear-gradient(145deg,rgba(15,17,23,.96),rgba(7,8,12,.97))!important;
}
.bot-card .metric-row{background:rgba(3,4,7,.22);border-radius:8px;overflow:hidden}

.dashboard-bottom{position:relative;z-index:2;margin-top:20px!important}
.mini-card{min-height:318px!important}
.health-card{
  background:radial-gradient(circle at 47% 48%,rgba(29,137,73,.10),transparent 34%),linear-gradient(145deg,rgba(14,16,21,.96),rgba(7,8,12,.97))!important;
}
.health-card:before{display:none!important}
.health-ring{box-shadow:0 0 52px rgba(34,226,121,.13),inset 0 0 22px rgba(34,226,121,.05)!important}
.flow-card{
  background-image:
    linear-gradient(90deg,rgba(8,9,13,.97),rgba(8,9,13,.84)),
    url('/assets/night-header.svg?v=20260823-5')!important;
  background-size:cover!important;
  background-position:center!important;
}
.protection-card{background:linear-gradient(145deg,rgba(14,16,21,.96),rgba(9,7,11,.98))!important}
.shield-list li{background:rgba(4,5,8,.32)!important}

/* Pequeños detalles del mockup */
.card-kicker,.card-head h3{letter-spacing:.1px}
.icon-box{box-shadow:inset 0 0 18px rgba(255,41,56,.06),0 0 18px rgba(255,35,49,.05)!important}
.live-pill,.online-pill.online{box-shadow:0 0 18px rgba(34,226,121,.07)}
.safe-note{background:rgba(3,4,7,.38)!important}

@media(max-width:1250px){
  .shell:before{height:330px;background-position:center 34%}
  .topbar{height:200px!important}
  .hero-emblem{width:245px!important;height:245px!important;top:42px!important}
  .hero-copy{max-width:62%!important}
  .operator{min-width:155px!important}
}
@media(max-width:900px){
  .shell:before{height:245px;background-position:58% 28%;opacity:.75}
  .topbar{height:165px!important;padding-bottom:16px!important}
  .page-heading{padding:12px 16px!important}
  .topbar h1{font-size:26px!important}
  .top-actions{top:14px!important}
  .sidebar-art{min-height:235px}
  .sidebar-art img{width:170px!important;height:215px!important;margin-bottom:-25px!important}
}