:root{
  --bg:#080a0c;
  --panel:#12161a;
  --panel-2:#181d22;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.15);
  --text:#f0f2f4;
  --muted:#9aa0a8;
  --muted-2:#6c737d;
  --orange:#ff6420;
  --orange-2:#d33e12;
  --green:#58d727;
  --blue:#61a8ff;
  --red:#ff4a42;
  --yellow:#ffc233;
  --shadow:0 18px 48px rgba(0,0,0,.38);
  --radius:6px;
  --sidebar:306px;
  --topbar:76px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:"Inter", "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 82% -20%,rgba(255,100,32,.12),transparent 28rem),
    radial-gradient(circle at 16% 18%,rgba(255,75,39,.08),transparent 18rem),
    linear-gradient(180deg,#111317 0%,#080a0c 38%,#060708 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 95%);
}
button,a{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{text-decoration:none;color:inherit}

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  grid-template-rows:var(--topbar) 1fr 44px;
  grid-template-areas:
    "topbar topbar"
    "sidebar main"
    "footer footer";
}

.topbar{
  grid-area:topbar;
  display:flex;
  align-items:stretch;
  min-width:0;
  border-bottom:1px solid var(--line);
  background:rgba(13,16,19,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  position:sticky;
  top:0;
  z-index:10;
}
.brand{
  width:330px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 28px 0 34px;
  border-right:1px solid var(--line);
  letter-spacing:-2px;
  text-transform:none;
}
.brand__main{
  font-size:38px;
  font-weight:950;
  line-height:1;
  color:#f8f8f8;
  text-shadow:0 3px 0 rgba(0,0,0,.9), 0 0 15px rgba(255,255,255,.15);
  transform:scaleX(.86);
  transform-origin:left center;
}
.brand__ver{
  font-size:28px;
  font-weight:950;
  color:#f43a28;
  text-shadow:0 0 16px rgba(244,58,40,.5);
}
.topnav{
  display:flex;
  align-items:stretch;
  min-width:0;
  overflow-x:auto;
}
.topnav__item{
  min-width:142px;
  padding:0 18px;
  color:#c0c4ca;
  text-transform:uppercase;
  font-weight:800;
  font-size:13px;
  letter-spacing:.04em;
  border-right:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  position:relative;
  transition:.18s ease;
}
.topnav__item span{font-size:18px;color:#a9adb4}
.topnav__item:hover,.topnav__item.is-active{color:white;background:rgba(255,255,255,.025)}
.topnav__item.is-active::after{
  content:"";
  position:absolute;
  left:18px;right:18px;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  box-shadow:0 0 18px var(--orange);
}
.topnav__item.is-active span{color:var(--orange)}
.logout{
  margin-left:auto;
  min-width:154px;
  color:#a9adb4;
  text-transform:uppercase;
  font-weight:800;
  font-size:13px;
  letter-spacing:.04em;
  border-left:1px solid var(--line);
}
.logout span{font-size:20px;margin-right:8px;color:#818790}
.logout:hover{color:white;background:rgba(255,255,255,.03)}

.sidebar{
  grid-area:sidebar;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,22,27,.92),rgba(11,14,17,.96));
  min-height:0;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.sidebar::after{
  content:"";
  position:absolute;
  left:-60px;right:-60px;bottom:-40px;height:220px;
  background:radial-gradient(circle at 50% 100%,rgba(255,255,255,.08),transparent 60%);
  opacity:.35;
}
.profile-card{
  display:flex;
  align-items:center;
  gap:18px;
  padding:28px 28px 22px;
  border-bottom:1px solid var(--line);
  min-height:138px;
}
.avatar{
  width:96px;height:96px;border-radius:50%;
  border:3px solid var(--orange);
  position:relative;
  padding:6px;
  box-shadow:0 0 26px rgba(255,100,32,.55), 0 0 0 5px rgba(255,100,32,.09);
  flex:0 0 auto;
}
.avatar__mask{
  width:100%;height:100%;border-radius:50%;
  background:
    radial-gradient(circle at 50% 38%,#d7dde5 0 8%,transparent 9%),
    radial-gradient(circle at 42% 44%,#060708 0 6%,transparent 7%),
    radial-gradient(circle at 58% 44%,#060708 0 6%,transparent 7%),
    linear-gradient(135deg,#2a3038,#0e1115 55%,#020303);
  border:1px solid rgba(255,255,255,.2);
}
.avatar__mask::before{
  content:"";
  position:absolute;
  left:30px;right:30px;top:42px;height:28px;
  background:repeating-linear-gradient(90deg,#cfd5dd 0 4px,#13161a 4px 7px);
  clip-path:polygon(0 35%,100% 35%,82% 100%,18% 100%);
  opacity:.65;
}
.avatar__badge{
  position:absolute;right:-7px;bottom:1px;
  width:34px;height:34px;border-radius:6px;
  display:grid;place-items:center;
  color:#101317;background:#e6e8eb;
  border:2px solid #7a8088;font-weight:950;font-size:11px;
}
.profile-card h1{margin:0 0 4px;font-size:18px;line-height:1.1}
.profile-card p{margin:0 0 10px;color:#ff5330;font-weight:800}
.rank-btn{
  height:28px;min-width:78px;padding:0 12px;
  border:1px solid var(--line-strong);
  color:#d7dbe1;background:rgba(255,255,255,.04);
  text-transform:uppercase;font-size:12px;font-weight:900;
}
.sidenav{padding:12px 20px;position:relative;z-index:2}
.sidenav__item{
  width:100%;height:60px;
  padding:0 24px;
  border:1px solid var(--line);
  border-bottom:0;
  display:flex;align-items:center;gap:18px;
  color:#b6bbc2;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  text-transform:uppercase;font-size:13px;font-weight:850;letter-spacing:.03em;
  text-align:left;
  transition:.16s ease;
}
.sidenav__item:first-child{border-radius:var(--radius) var(--radius) 0 0}
.sidenav__item:last-child{border-bottom:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}
.sidenav__item span{width:28px;text-align:center;font-size:23px;color:#b8bec5;filter:grayscale(1)}
.sidenav__item:hover,.sidenav__item.is-active{color:white;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025))}
.sidenav__item.is-active{border-left:3px solid var(--orange);box-shadow:inset 0 0 0 1px rgba(255,100,32,.18)}
.sidenav__item.is-active span{filter:none;color:white}
.graffiti{
  margin-top:auto;
  padding:24px 32px 46px;
  position:relative;z-index:2;
  color:rgba(255,255,255,.075);
  font-size:34px;
  line-height:.92;
  font-weight:950;
  transform:rotate(-12deg);
  text-transform:uppercase;
}

.dashboard{
  grid-area:main;
  padding:0 20px 16px;
  display:grid;
  gap:12px;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto 328px 254px 202px;
  grid-template-areas:
    "stats stats stats"
    "hero hero news"
    "career production pvp"
    "ranking event collection";
  min-width:0;
}
.stats-strip{
  grid-area:stats;
  height:108px;
  display:grid;
  grid-template-columns:1.25fr .75fr .9fr .9fr .9fr;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(0,0,0,.08));
}
.stat{
  padding:18px 28px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  min-width:0;
  position:relative;
}
.stat:last-child{border-right:0}
.stat--level{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:18px}
.stat__body{min-width:0}
.stat__icon{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  color:#d5dae1;background:linear-gradient(145deg,#2a2f36,#0c0e11);
  border:1px solid var(--line-strong);font-weight:950;font-size:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.crest{font-size:18px;border-radius:12px;outline:5px double rgba(255,255,255,.2)}
.heart{color:var(--red)}
.stat small,.panel small,.muted,.income-label{
  color:#b4bac2;text-transform:uppercase;font-size:11px;letter-spacing:.055em;font-weight:850;
}
.stat strong{font-size:17px;line-height:1;color:white;white-space:nowrap}
.stat--level strong{font-size:24px;color:#ff6a28}
.stat strong span{font-size:13px;color:#c6cbd1;font-weight:700}
.stat em{font-size:12px;font-style:normal;color:#b9bec5;white-space:nowrap}
.stat em b{color:#ff6a28}
.green{color:var(--green)!important}.blue{color:var(--blue)!important}.red{color:var(--red)!important}
.bar{
  width:100%;height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;
}
.bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--orange-2),var(--orange))}
.bar--yellow span{background:linear-gradient(90deg,#f7b71f,#ffe277)}
.bar--blue span{background:linear-gradient(90deg,#3d7fd5,#75b6ff)}
.bar--red span{background:linear-gradient(90deg,#d82828,#ff5a4c)}

.panel{
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(24,29,34,.88),rgba(12,15,18,.92));
  border-radius:var(--radius);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  position:relative;
}
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.045),transparent 26%,transparent 70%,rgba(255,255,255,.02));
}
.panel__header,.panel__title-row{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.panel__header{padding:22px 22px 14px}
.panel__header h2,.panel__title-row h2{margin:0;text-transform:uppercase;letter-spacing:.035em;font-size:17px}
.panel__header a{color:var(--orange);font-size:10px;text-transform:uppercase;font-weight:950}
.panel__title-row strong{color:var(--green);text-transform:uppercase;font-size:12px}

.hero{grid-area:hero;padding:88px 28px 28px;display:flex;flex-direction:column;justify-content:space-between}
.panel--stadium{
  background:
    radial-gradient(circle at 60% 50%,rgba(255,92,52,.42),transparent 8rem),
    radial-gradient(circle at 52% 45%,rgba(255,255,255,.18),transparent 13rem),
    linear-gradient(rgba(8,10,12,.24),rgba(5,6,7,.95)),
    linear-gradient(110deg,#050607 0%,#24272d 43%,#0a0b0d 100%);
}
.panel--stadium::after{
  content:"";position:absolute;inset:0;opacity:.32;pointer-events:none;
  background:
    linear-gradient(12deg,transparent 0 46%,rgba(255,255,255,.2) 47%,transparent 48%),
    linear-gradient(-8deg,transparent 0 50%,rgba(255,255,255,.14) 51%,transparent 52%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 36px);
  mask-image:linear-gradient(to bottom,black 0 45%,transparent 80%);
}
.hero__copy,.hero__actions,.hero__seal{position:relative;z-index:1}
.hero h2{margin:0 0 10px;text-transform:uppercase;font-size:35px;letter-spacing:-.035em;line-height:1;text-shadow:0 2px 0 #000}
.hero p{margin:0;color:#d5d8dd;font-size:15px}
.hero__actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.action-card{
  min-height:60px;border-radius:4px;border:1px solid var(--line-strong);
  display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;
  padding:10px 16px;background:rgba(10,12,14,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:.16s ease;
}
.action-card span{grid-row:1/3;color:#c5c9cf;font-size:26px;text-align:center}
.action-card b{text-transform:uppercase;font-size:13px}
.action-card small{color:#aeb4bb;font-size:12px;text-transform:none;letter-spacing:0;font-weight:500}
.action-card:hover{transform:translateY(-1px);border-color:rgba(255,100,32,.45)}
.action-card--primary{background:linear-gradient(180deg,#fd7b2f,#c83b16);box-shadow:0 0 28px rgba(255,100,32,.28), inset 0 1px 0 rgba(255,255,255,.25)}
.action-card--primary span,.action-card--primary small{color:white}
.hero__seal{position:absolute;right:28px;top:28px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:2px dashed rgba(255,255,255,.55);font-weight:950;color:white}

.news{grid-area:news;padding-bottom:10px}
.news-list{position:relative;z-index:1;padding:0 20px}
.news-item{
  width:100%;display:grid;grid-template-columns:32px 48px 1fr 16px;align-items:center;gap:10px;
  min-height:45px;color:#bfc4cb;text-align:left;border-bottom:1px solid rgba(255,255,255,.055);
}
.news-item:hover{color:white;background:rgba(255,255,255,.025)}
.news-item p{margin:0;font-size:12px;line-height:1.35}.news-item time{font-size:12px;color:#858c95}.news-item i{font-style:normal;color:#aeb4bb;font-size:28px}
.badge{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;background:#575d66;color:white;font-size:13px;border:1px solid rgba(255,255,255,.2)}
.badge--red{background:#cf2a2d}.badge--dark{background:#2d1417}.badge--blue{background:#316ed6}.badge--gold{background:#9c710c}
.show-more{display:block;margin:8px auto 0;color:#a9afb7;text-transform:uppercase;font-size:10px;font-weight:900;position:relative;z-index:1}
.show-more:hover{color:white}

.career{grid-area:career;padding:22px 22px 18px}
.card-image{
  background:
    linear-gradient(90deg,rgba(13,16,20,.98),rgba(13,16,20,.8) 58%,rgba(13,16,20,.18)),
    radial-gradient(circle at 92% 35%,rgba(255,255,255,.24),transparent 9rem),
    linear-gradient(135deg,#11151a,#20252b);
}
.card-image::after{
  content:"";position:absolute;right:8px;top:0;bottom:0;width:43%;opacity:.3;
  background:
    radial-gradient(circle at 48% 25%,#d6d9df 0 18px,transparent 20px),
    radial-gradient(circle at 40% 42%,#0a0c0f 0 8px,transparent 9px),
    radial-gradient(circle at 58% 42%,#0a0c0f 0 8px,transparent 9px),
    linear-gradient(160deg,transparent 0 26%,rgba(255,255,255,.55) 27% 30%,transparent 31% 100%);
}
.career .panel__title-row,.career small,.career h3,.career p,.career .progress-line,.career button{position:relative;z-index:1}
.career h3{margin:20px 0 8px;text-transform:uppercase;font-size:20px;letter-spacing:.04em}
.career p{max-width:310px;margin:0 0 22px;color:#b7bcc3;font-size:13px;line-height:1.45}
.progress-line{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.progress-line span{height:8px;width:110px;border-radius:999px;background:linear-gradient(90deg,var(--orange-2),var(--orange))}
.progress-line b{color:var(--orange);font-size:13px}
.outline-btn{
  height:43px;min-width:204px;padding:0 18px;border:1px solid rgba(255,100,32,.8);border-radius:3px;
  color:var(--orange);background:rgba(255,100,32,.025);text-transform:uppercase;font-size:12px;font-weight:950;letter-spacing:.02em;
  position:relative;z-index:1;
}
.outline-btn:hover{background:rgba(255,100,32,.12);color:#ff8750;box-shadow:0 0 18px rgba(255,100,32,.18)}
.outline-btn.wide{width:100%}

.production{grid-area:production;padding:22px}
.production .money{margin:4px 0 14px;color:var(--green);font-size:26px;letter-spacing:.02em}.production .money span{font-size:13px;color:white}
.factory-list{display:grid;gap:7px;margin-bottom:16px;position:relative;z-index:1}
.factory-row{display:grid;grid-template-columns:20px minmax(110px,1fr) minmax(90px,170px) minmax(118px,auto);gap:8px;align-items:center;color:#bec4ca;font-size:12px}
.factory-row p{margin:0}.factory-row b{color:var(--green);font-size:12px;white-space:nowrap}.factory-row span{color:#d4d8dd}.bar.mini{height:4px}.bar.mini span{background:linear-gradient(90deg,#307f1a,var(--green))}

.pvp{grid-area:pvp;padding:22px}
.duel{margin:22px 0 18px;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:8px;position:relative;z-index:1}
.duel__side{display:flex;align-items:center;gap:12px;font-size:13px}.duel__side:last-child{justify-content:flex-end}
.team-logo{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:2px dashed rgba(255,255,255,.45);font-size:12px;font-weight:950;background:#15191e}.team-logo--blue{background:#2859a8}
.versus{text-align:center;color:#ff4b37;font-size:28px;text-shadow:0 0 18px rgba(255,65,45,.7)}
.pvp__result{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px;position:relative;z-index:1}.pvp__result b{color:var(--green);text-transform:uppercase;font-size:12px}.pvp__result time{color:#8e949d;font-size:12px}
.pvp p{margin:5px 0;color:#b9bec5;font-size:12px;position:relative;z-index:1}
.pvp .outline-btn{margin-top:12px}

.ranking{grid-area:ranking;padding:20px}
.ranking__grid{display:grid;grid-template-columns:170px 1fr;gap:20px;margin:14px 0;position:relative;z-index:1}
.rank-position{display:grid;place-items:center;border-right:1px solid var(--line)}
.rank-position strong{font-size:50px;color:var(--orange);line-height:.95}.rank-position span{font-size:13px;color:#d6dae0}
.rank-list{margin:0;padding:0;list-style-position:inside;display:grid;gap:5px;font-size:12px;color:#c3c8cf}.rank-list li{display:flex;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:3px}.rank-list li::marker{color:#b2b8c0}.rank-list b{font-weight:700;color:#c9cdd3}.rank-list .is-me{border:1px solid rgba(255,100,32,.55);color:var(--orange)}.rank-list .is-me b{color:var(--orange)}

.event{grid-area:event;padding:22px}
.panel--event{
  background:
    radial-gradient(circle at 75% 58%,rgba(255,83,48,.36),transparent 7rem),
    linear-gradient(rgba(15,18,22,.62),rgba(12,14,18,.95)),
    linear-gradient(135deg,#1f2228,#0d0f12);
}
.panel--event::after{
  content:"";position:absolute;right:0;bottom:0;width:45%;height:72%;opacity:.24;
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.18) 0 2px,transparent 2px 18px);
  transform:skewX(-18deg);
}
.event h2{position:relative;z-index:1;margin:6px 0 18px;text-transform:uppercase;font-size:21px;letter-spacing:.06em}.event p{position:relative;z-index:1;margin:0 0 0;color:#aeb4bb;text-transform:uppercase;font-size:12px;font-weight:800}.timer{position:relative;z-index:1;display:block;color:#ff4a37;font-size:31px;letter-spacing:.05em;margin:0 0 18px;text-shadow:0 0 16px rgba(255,74,55,.42)}

.collection{grid-area:collection;padding:22px}.collection p{position:relative;z-index:1;text-transform:uppercase;color:#bbc1c8;font-size:12px}.collection p b{color:var(--orange);font-size:18px}.medals{position:relative;z-index:1;display:flex;gap:16px;margin:24px 0 23px}.medals span{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);background:linear-gradient(145deg,#282d34,#0c0e10);font-size:28px;filter:grayscale(.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

.footer{
  grid-area:footer;
  display:flex;align-items:center;gap:26px;padding:0 24px;
  border-top:1px solid var(--line);
  color:#8c929b;font-size:12px;background:#080a0c;
}
.footer a{margin-left:auto}.footer a + a{margin-left:0}.footer a:hover{color:white}.socials{margin-left:8px;color:#b7bcc4;font-size:19px;letter-spacing:10px}

@media (max-width:1280px){
  :root{--sidebar:260px}.brand{width:280px}.topnav__item{min-width:124px}.dashboard{grid-template-columns:1fr 1fr;grid-template-rows:auto 320px auto auto auto;grid-template-areas:"stats stats" "hero hero" "news news" "career production" "pvp ranking" "event collection"}.stats-strip{grid-template-columns:repeat(3,1fr);height:auto}.stat{min-height:98px}.hero__actions{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .app-shell{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;grid-template-areas:"topbar" "sidebar" "main" "footer"}.topbar{position:relative;flex-wrap:wrap}.brand{width:auto;min-height:76px}.topnav{order:3;width:100%;border-top:1px solid var(--line)}.topnav__item{flex:1;min-width:120px;height:58px}.logout{min-width:120px}.sidebar{border-right:0}.profile-card{min-height:auto}.sidenav{display:grid;grid-template-columns:repeat(2,1fr)}.sidenav__item{border:1px solid var(--line);height:52px}.graffiti{display:none}.dashboard{padding:12px;grid-template-columns:1fr;grid-template-areas:"stats" "hero" "news" "career" "production" "pvp" "ranking" "event" "collection";grid-template-rows:auto}.stats-strip{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--line)}.stat:last-child{border-bottom:0}.factory-row{grid-template-columns:20px 1fr;}.factory-row .bar,.factory-row b{grid-column:2}.footer{flex-wrap:wrap;height:auto;min-height:64px;gap:12px}.footer a{margin-left:0}
}
@media (max-width:560px){
  .brand__main{font-size:30px}.brand__ver{font-size:22px}.hero{padding:72px 18px 18px}.hero h2{font-size:27px}.hero__actions{grid-template-columns:1fr}.news-item{grid-template-columns:28px 40px 1fr 10px}.ranking__grid{grid-template-columns:1fr}.rank-position{border-right:0;border-bottom:1px solid var(--line);padding-bottom:16px}.sidenav{grid-template-columns:1fr}.medals{flex-wrap:wrap}
}