/* Dashboard V2 — closer to the visual mockup */

body{
  overflow-x:hidden;
}

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
}

.app-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:270px;
  z-index:30;
  display:flex;
  flex-direction:column;
  padding:22px 16px;
  background:rgba(4,10,20,.95);
  border-right:1px solid rgba(119,209,255,.16);
  box-shadow:18px 0 50px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:13px;
  padding:4px 8px 24px;
}

.sidebar-logo{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:2px solid #4d8dff;
  border-radius:50%;
  color:#88caff;
  font-size:28px;
  box-shadow:0 0 24px rgba(77,141,255,.3);
}

.sidebar-brand strong{
  display:block;
  font-size:20px;
  line-height:1;
  letter-spacing:.03em;
}

.sidebar-brand small{
  display:block;
  margin-top:5px;
  color:#8ea0b8;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.sidebar-nav{
  display:grid;
  gap:8px;
}

.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:50px;
  padding:0 14px;
  border-radius:11px;
  color:#e8edf5;
  font-size:15px;
}

.sidebar-nav a span{
  width:22px;
  font-size:21px;
  text-align:center;
}

.sidebar-nav a:hover,
.sidebar-nav a.active{
  background:linear-gradient(90deg,#6a35cf,#5936b9);
  box-shadow:0 8px 22px rgba(94,54,185,.25);
}

.sidebar-user{
  margin-top:auto;
  display:grid;
  grid-template-columns:44px 1fr;
  gap:10px;
  align-items:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(12,21,35,.9);
}

.sidebar-avatar{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#15243a;
  color:#6fc6ff;
}

.sidebar-user small{
  display:block;
  color:var(--muted);
  font-size:11px;
}

.sidebar-user>a{
  grid-column:1/-1;
  text-align:center;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#9ab0ca;
  font-size:12px;
}

.app-main{
  grid-column:2;
  min-width:0;
}

.mobile-topbar{
  display:none;
}

.app-content{
  width:min(1460px,calc(100% - 34px));
  margin:0 auto;
  padding:24px 0 34px;
}

.app-footer{
  padding:18px;
  color:#7f8da2;
  text-align:center;
  font-size:12px;
}

.cinematic-hero{
  min-height:390px;
  border:1px solid rgba(119,209,255,.22);
  border-radius:22px;
  overflow:hidden;

  background:
    linear-gradient(90deg,rgba(5,10,18,.92) 0%,rgba(5,10,18,.38) 48%,rgba(5,10,18,.18) 100%),
    linear-gradient(180deg,rgba(4,8,15,.05),rgba(4,8,15,.82)),
    url("primus-background.png") center top / 100% auto no-repeat;

  background-color:#07101b;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}

.hero-overlay{
  min-height:390px;
  display:flex;
  align-items:flex-end;
  padding:48px;
}

.hero-overlay h1{
  margin:8px 0;
  font-size:clamp(42px,6vw,80px);
  line-height:.9;
  text-transform:uppercase;
  background:linear-gradient(90deg,#fff,#8d5dff,#3ea7ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-line{
  width:360px;
  max-width:80vw;
  height:2px;
  margin:16px 0 12px;
  background:linear-gradient(90deg,#7e4cff,transparent);
}

.hero-subtitle{
  margin:0;
  font-size:19px;
  color:#dbe5f1;
}

.mockup-stats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:13px;
  margin:16px 0;
}

.mockup-stats article{
  min-height:105px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(8,16,28,.94);
  box-shadow:0 12px 30px rgba(0,0,0,.26);
}

.stat-symbol{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#9edcff;
  background:#1a2b42;
  font-size:22px;
  font-weight:900;
}

.stat-symbol.autobot{color:#ff4545;background:rgba(255,69,69,.14)}
.stat-symbol.decepticon{color:#a15cff;background:rgba(161,92,255,.16)}
.stat-symbol.value{color:#8c6dff;background:rgba(140,109,255,.17)}
.stat-symbol.wish{color:#ff5c82;background:rgba(255,92,130,.16)}

.mockup-stats small,
.mockup-stats em{
  display:block;
}

.mockup-stats small{
  color:#c5d0df;
  font-size:10px;
  letter-spacing:.05em;
}

.mockup-stats strong{
  display:block;
  margin:2px 0;
  font-size:24px;
}

.mockup-stats em{
  color:#8fa0b7;
  font-size:10px;
  font-style:normal;
}

.mockup-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:16px;
}

.mockup-center,
.mockup-right{
  display:grid;
  gap:16px;
  align-content:start;
}

.glass-panel{
  padding:20px;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(7,15,27,.93);
  box-shadow:0 18px 50px rgba(0,0,0,.30);
  backdrop-filter:blur(12px);
}

.panel-title-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.panel-title-row h2{
  margin:3px 0 0;
  font-size:21px;
}

.panel-title-row>a{
  color:#b383ff;
  font-size:12px;
}

.mockup-cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:11px;
}

.mockup-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:13px;
  background:#0e1827;
  transition:.18s ease;
}

.mockup-card:hover{
  transform:translateY(-3px);
  border-color:#6c52e2;
}

.mockup-card-image{
  height:210px;
  background:#07101a;
}

.mockup-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.mockup-card-body{
  padding:11px;
}

.mockup-card-body>span{
  color:#8f5eff;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}

.mockup-card-body h3{
  margin:4px 0;
  font-size:15px;
}

.mockup-card-body p,
.mockup-card-body small{
  display:block;
  margin:0;
  color:#92a2b8;
  font-size:10px;
}

.mockup-quick{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.mockup-quick a{
  padding:18px;
  border:1px solid var(--line);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(76,64,152,.15),rgba(15,26,42,.92));
}

.mockup-quick strong,
.mockup-quick span{
  display:block;
}

.mockup-quick span{
  margin-top:6px;
  color:#93a3b8;
  font-size:11px;
}

.side-list,
.activity-stack{
  display:grid;
  gap:9px;
}

.side-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:9px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:rgba(15,25,40,.75);
}

.side-thumb{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:7px;
  background:#07101a;
}

.side-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.side-item strong,
.side-item span{
  display:block;
}

.side-item strong{font-size:12px}
.side-item span{color:#91a0b4;font-size:10px}
.side-item b{color:#9a65ff}

.activity-entry{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:9px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.activity-entry:last-child{border-bottom:0}

.activity-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#12243a;
  color:#6ec6ff;
}

.activity-entry strong,
.activity-entry span,
.activity-entry small{
  display:block;
}

.activity-entry strong{font-size:11px}
.activity-entry span,
.activity-entry small{color:#8fa0b5;font-size:9px;margin-top:2px}

.dashboard-empty.compact{
  padding:22px;
}

@media(max-width:1180px){
  .mockup-stats{grid-template-columns:repeat(3,1fr)}
  .mockup-cards{grid-template-columns:repeat(3,1fr)}
  .mockup-quick{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:920px){
  .app-shell{display:block}
  .app-sidebar{
    transform:translateX(-100%);
    transition:transform .2s ease;
  }
  body.menu-open .app-sidebar{transform:translateX(0)}
  .app-main{grid-column:auto}
  .mobile-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    background:rgba(4,10,20,.95);
    border-bottom:1px solid var(--line);
  }
  .mobile-topbar button{
    border:1px solid var(--line);
    border-radius:8px;
    background:#142338;
    color:white;
    padding:8px 11px;
  }
  .mockup-layout{grid-template-columns:1fr}
  .mockup-right{grid-template-columns:1fr 1fr}
}

@media(max-width:700px){
  .app-content{width:min(100% - 20px,1460px)}
  .cinematic-hero{min-height:300px}
  .hero-overlay{min-height:300px;padding:26px}
  .mockup-stats{grid-template-columns:repeat(2,1fr)}
  .mockup-cards{grid-template-columns:repeat(2,1fr)}
  .mockup-right{grid-template-columns:1fr}
}

@media(max-width:460px){
  .mockup-stats,
  .mockup-cards,
  .mockup-quick{
    grid-template-columns:1fr;
  }
}