*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.pg-page{margin:0;overflow-x:hidden}
body.pg-page::before{z-index:-1}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}

.app-shell{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
}
.side-rail{
  position:fixed;
  inset:0 auto 0 0;
  z-index:5;
  width:250px;
  display:flex;
  flex-direction:column;
  gap:var(--pg-space-6);
  padding:var(--pg-space-6);
}
.brand{
  justify-content:flex-end;
  min-height:112px;
  padding-bottom:var(--pg-space-5);
  border-bottom:1px solid var(--pg-color-border);
}
.brand-copy{display:grid;gap:var(--pg-space-1)}
.side-nav{display:grid;gap:var(--pg-space-2)}
.side-nav a,.rail-utility a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:var(--pg-radius-sm);
  color:var(--pg-color-text-muted);
  background:rgba(255,255,255,.015);
  font-size:14px;
  font-weight:900;
  transition:background var(--pg-transition-fast),border-color var(--pg-transition-fast),color var(--pg-transition-fast),transform var(--pg-transition-fast);
}
.side-nav a:hover,.side-nav a.active,.rail-utility a:hover{
  color:var(--pg-color-text);
  border-color:var(--pg-color-border-strong);
  background:linear-gradient(135deg,rgba(47,159,98,.16),rgba(11,17,13,.72));
}
.side-nav a.active{
  box-shadow:inset 3px 0 0 var(--pg-color-accent-soft);
  background:linear-gradient(135deg,rgba(47,159,98,.2),rgba(11,17,13,.86));
}
.side-nav a:focus-visible,
.rail-utility a:focus-visible,
.dashboard-text-link:focus-visible,
.playlist:focus-visible,
.app-footer a:focus-visible{
  outline:2px solid var(--pg-color-accent-soft);
  outline-offset:3px;
  box-shadow:var(--pg-focus-ring);
}
.rail-utility{margin-top:auto;padding-top:var(--pg-space-5);border-top:1px solid var(--pg-color-border)}
.rail-utility a{color:var(--pg-color-accent-soft);border-color:rgba(47,159,98,.24)}

.main-stage{
  grid-column:2;
  width:min(1420px,100%);
  padding:var(--pg-space-6) var(--pg-space-6) var(--pg-space-10);
}
.dashboard-header{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(310px,390px);
  align-items:center;
  gap:var(--pg-space-6);
  padding:clamp(28px,5vw,56px);
  overflow:hidden;
  border:1px solid var(--pg-color-border-strong);
  border-radius:var(--pg-radius-xl);
  background:
    linear-gradient(120deg,rgba(47,159,98,.16),transparent 40%),
    radial-gradient(circle at 92% 12%,rgba(212,162,77,.1),transparent 25%),
    linear-gradient(145deg,var(--pg-color-surface-strong),var(--pg-color-bg-soft));
  box-shadow:var(--pg-shadow-lg);
  animation:dashboard-header-enter 320ms cubic-bezier(.2,.7,.25,1) backwards;
}
.dashboard-header::after{
  content:"";
  position:absolute;
  right:-110px;
  bottom:-180px;
  width:390px;
  height:390px;
  border:1px solid rgba(47,159,98,.2);
  background:repeating-linear-gradient(135deg,rgba(47,159,98,.06) 0 2px,transparent 2px 17px);
  transform:rotate(9deg);
  pointer-events:none;
}
.dashboard-intro,.dashboard-status{position:relative;z-index:1}
.dashboard-kicker,.dashboard-section-heading span,.dashboard-card-type,.status-heading>span{
  color:var(--pg-color-accent-soft);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.dashboard-intro h1{margin:var(--pg-space-4) 0 var(--pg-space-3)}
.dashboard-intro p{max-width:700px;margin:0;font-size:18px}
.dashboard-status{
  padding:var(--pg-space-5);
  background:linear-gradient(145deg,rgba(11,17,13,.96),rgba(47,159,98,.1));
}
.status-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--pg-space-3)}
.dashboard-status h2{margin:var(--pg-space-5) 0 var(--pg-space-4);font-size:20px}
.status-schedule{display:flex;flex-wrap:wrap;gap:var(--pg-space-2);color:var(--pg-color-text-muted);font-size:13px;font-weight:800}
.status-pill.open{color:var(--pg-color-accent-soft);border-color:var(--pg-color-success);background:var(--pg-color-success-soft)}
.status-pill.upcoming{color:var(--pg-color-highlight);border-color:var(--pg-color-warning);background:var(--pg-color-warning-soft)}
.status-pill.closed{color:var(--pg-color-text-muted)}
.status-pill--live::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  margin-right:6px;
  border-radius:50%;
  background:var(--pg-color-success);
  box-shadow:0 0 0 0 rgba(62,189,115,.28);
  animation:dashboard-live-status 1800ms ease-out infinite;
}

.dashboard-content{margin-top:var(--pg-space-8)}
.dashboard-group{padding-top:var(--pg-space-2)}
.dashboard-group+.dashboard-group{margin-top:clamp(34px,5vw,58px);padding-top:clamp(28px,4vw,42px);border-top:1px solid var(--pg-color-border)}
.dashboard-section-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--pg-space-4);margin-bottom:var(--pg-space-5)}
.dashboard-section-heading h2{margin:var(--pg-space-2) 0 0}
.dashboard-section-heading p{max-width:620px;margin:var(--pg-space-2) 0 0;line-height:1.5}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pg-space-4)}
.dashboard-grid--community{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
.dashboard-grid--access{grid-template-columns:repeat(3,minmax(0,1fr))}
.dashboard-card{
  position:relative;
  min-height:285px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:var(--pg-space-5);
  background:linear-gradient(145deg,var(--pg-color-surface),var(--pg-color-surface-muted));
  transition:transform var(--pg-transition-base),border-color var(--pg-transition-base),background var(--pg-transition-base),box-shadow var(--pg-transition-base);
  animation:dashboard-card-enter 340ms cubic-bezier(.2,.7,.25,1) backwards;
}
.dashboard-card-banner{
  position:relative;
  height:48px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:12px;
  overflow:hidden;
  margin:calc(var(--pg-space-5) * -1) calc(var(--pg-space-5) * -1) var(--pg-space-3);
  padding:0 clamp(18px,3vw,34px);
  border-bottom:1px solid rgba(143,216,170,.13);
  background:linear-gradient(120deg,#07100b,#153222 56%,#0b1710);
  isolation:isolate;
}
.dashboard-card-banner::before,.dashboard-card-banner::after{content:"";position:absolute;pointer-events:none}
.dashboard-card-banner::before{inset:-65% -10%;z-index:-2;background:radial-gradient(circle at 24% 50%,rgba(62,189,115,.28),transparent 28%),radial-gradient(circle at 78% 42%,rgba(212,162,77,.18),transparent 25%)}
.dashboard-card-banner::after{inset:0;z-index:-1;opacity:.22;background:repeating-linear-gradient(90deg,transparent 0 20px,rgba(255,255,255,.08) 21px,transparent 22px)}
.dashboard-card-banner span{color:rgba(224,244,231,.76);font-size:clamp(15px,1.7vw,21px);font-weight:900;line-height:1;text-shadow:0 4px 14px rgba(0,0,0,.55)}
.dashboard-card-banner span:nth-child(2){color:rgba(232,190,105,.82);transform:translateY(-2px)}
.home-card-banner{height:76px;min-height:76px;border:0;border-radius:var(--pg-radius-md) var(--pg-radius-md) 6px 6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.72),inset 0 -1px rgba(143,216,170,.1)}
.home-card-banner--image{padding:0;background:#050906}
.home-card-banner--image::before,.home-card-banner--image::after{display:none}
.home-card-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.dashboard-card-banner--challenge{background:linear-gradient(125deg,#08110c,#183525,#152113)}
.dashboard-card-banner--library{background:linear-gradient(125deg,#070c09,#132a1d,#1e2417)}
.dashboard-card-banner--radio{background:linear-gradient(125deg,#08100b,#193827 50%,#101812)}
.dashboard-card-banner--playlist{background:linear-gradient(125deg,#080f0b,#20301d,#261e10)}
.dashboard-card-banner--community{background:linear-gradient(125deg,#080f0b,#183021,#10241a)}
.dashboard-card-banner--hall{background:linear-gradient(125deg,#0c100b,#26321b,#3a2912)}
.dashboard-card-banner--gallery{background:linear-gradient(125deg,#09100c,#173126,#26301c)}
.dashboard-card-banner--stream{background:radial-gradient(circle at 50% 52%,rgba(212,162,77,.2) 0 8%,transparent 9% 18%,rgba(82,162,108,.13) 19% 27%,transparent 28%),linear-gradient(125deg,#070c09,#173326,#242313)}
.dashboard-card-banner--friends{background:linear-gradient(125deg,#080f0b,#193526,#282516)}
.dashboard-card-banner--gallery-login,.dashboard-card-banner--admin{filter:saturate(.72);opacity:.86}
.dashboard-card--access{min-height:260px;background:linear-gradient(145deg,rgba(16,24,18,.92),rgba(9,14,11,.94))}
.dashboard-card--access .dashboard-card-banner{height:48px;min-height:48px}
.dashboard-card--access .home-card-banner{height:76px;min-height:76px}
.dashboard-card:nth-child(2){animation-delay:20ms}
.dashboard-card:nth-child(3){animation-delay:40ms}
.dashboard-card:nth-child(4){animation-delay:60ms}
.dashboard-card:nth-child(5){animation-delay:80ms}
.dashboard-card:nth-child(6){animation-delay:100ms}
.dashboard-card:nth-child(7){animation-delay:120ms}
.dashboard-card:nth-child(8){animation-delay:140ms}
.dashboard-card--featured{border-top-color:var(--pg-color-accent);background:linear-gradient(145deg,rgba(47,159,98,.08),var(--pg-color-surface-muted))}
.dashboard-card--admin{border-top-color:var(--pg-color-border-strong);background:linear-gradient(145deg,rgba(47,159,98,.13),var(--pg-color-surface-muted))}
.dashboard-card-index{align-self:flex-end;color:var(--pg-color-text-faint);font-size:12px;font-weight:900;letter-spacing:.12em}
.dashboard-card-copy{margin-top:var(--pg-space-3)}
.dashboard-card h3{margin:var(--pg-space-3) 0 var(--pg-space-3);color:var(--pg-color-text);font-size:23px}
.dashboard-card p{margin:0;line-height:1.55}
.dashboard-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pg-space-3);margin-top:auto;padding-top:var(--pg-space-5)}
.dashboard-card-actions .pg-button{width:100%;min-height:44px;justify-content:center;padding:10px 14px;text-align:center}
.dashboard-card-actions .pg-button{transition:filter var(--pg-transition-fast),transform var(--pg-transition-fast),border-color var(--pg-transition-fast),box-shadow var(--pg-transition-fast)}
.dashboard-card--inactive{border-color:rgba(143,216,170,.16);background:linear-gradient(145deg,rgba(16,24,18,.9),rgba(9,14,11,.94))}
.dashboard-card--inactive .dashboard-card-banner{filter:saturate(.72)}
.dashboard-card--inactive .dashboard-card-type,.dashboard-card--inactive .dashboard-card-index{color:rgba(232,190,105,.72)}
.dashboard-card-disabled-action{cursor:not-allowed;opacity:.72;filter:saturate(.65);pointer-events:none;user-select:none}
.dashboard-text-link{border-radius:var(--pg-radius-sm);color:var(--pg-color-accent-soft);font-size:13px;font-weight:900;transition:color var(--pg-transition-fast),background var(--pg-transition-fast)}
.dashboard-text-link:hover{color:var(--pg-color-text)}

@keyframes dashboard-header-enter{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes dashboard-card-enter{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes dashboard-live-status{
  0%,100%{box-shadow:0 0 0 0 rgba(62,189,115,.26)}
  55%{box-shadow:0 0 0 5px rgba(62,189,115,0)}
}

@media(hover:hover) and (pointer:fine){
  .dashboard-card:not(.dashboard-card--inactive):hover{
    transform:translateY(-3px);
    border-color:var(--pg-color-border-strong);
    background:linear-gradient(145deg,rgba(47,159,98,.14),var(--pg-color-surface-muted));
    box-shadow:0 20px 48px rgba(0,0,0,.38);
  }
  .dashboard-card:not(.dashboard-card--inactive):hover .pg-button--primary{filter:brightness(1.06)}
  .side-nav a:hover,.rail-utility a:hover{transform:translateX(1px)}
  .dashboard-text-link:hover{background:rgba(47,159,98,.08)}
}

.panel.section{
  position:relative;
  margin-top:var(--pg-space-8);
  padding:var(--pg-space-6);
  border:1px solid var(--pg-color-border);
  border-radius:var(--pg-radius-lg);
  background:linear-gradient(145deg,var(--pg-color-surface),var(--pg-color-bg-soft));
  box-shadow:var(--pg-shadow-sm);
}
.panel.section>h2{margin:0 0 var(--pg-space-5);font-size:22px}
.playlist-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pg-space-4)}
.playlist{
  display:block;
  min-height:150px;
  padding:var(--pg-space-5);
  border:1px solid var(--pg-color-border);
  border-radius:var(--pg-radius-md);
  background:var(--pg-color-surface-muted);
  transition:transform var(--pg-transition-fast),border-color var(--pg-transition-fast);
}
.playlist:hover{transform:translateY(-1px);border-color:var(--pg-color-border-strong)}
.playlist strong{display:block;margin-bottom:var(--pg-space-3);color:var(--pg-color-text);font-size:18px}
.playlist span{color:var(--pg-color-text-muted);line-height:1.5}
.tag{display:inline-block;margin-top:var(--pg-space-4);padding:5px 8px;border-radius:var(--pg-radius-sm);color:#120c03!important;background:var(--pg-color-highlight);font-size:12px;font-weight:900}

.app-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--pg-space-5);margin-top:var(--pg-space-8);padding-top:var(--pg-space-5);border-top:1px solid var(--pg-color-border-strong);color:var(--pg-color-text-muted);font-size:14px}
.app-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--pg-space-4)}
.app-footer a:hover{color:var(--pg-color-accent-soft)}

@media(max-width:1220px){
  .app-shell{grid-template-columns:220px minmax(0,1fr)}
  .side-rail{width:220px}
  .dashboard-grid,.dashboard-grid--community,.dashboard-grid--access{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .app-shell{display:block}
  .side-rail{position:relative;inset:auto;width:auto;min-height:auto;display:block;padding:var(--pg-space-4);border-right:0;border-bottom:1px solid var(--pg-color-border-strong)}
  .brand{min-height:92px;margin-bottom:var(--pg-space-4);padding-bottom:var(--pg-space-4)}
  .side-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail-utility{margin-top:var(--pg-space-4)}
  .main-stage{width:100%;padding:var(--pg-space-5)}
  .dashboard-header{grid-template-columns:1fr;padding:var(--pg-space-6)}
  .dashboard-intro h1{font-size:44px}
  .dashboard-card-banner,.dashboard-card--access .dashboard-card-banner{height:44px;min-height:44px}
  .home-card-banner{height:72px;min-height:72px}
  .dashboard-card--access .home-card-banner{height:72px;min-height:72px}
  .playlist-row{grid-template-columns:1fr}
  .app-footer{align-items:flex-start;flex-direction:column}
  .app-footer nav{justify-content:flex-start}
}
@media(max-width:560px){
  .side-nav,.dashboard-grid,.dashboard-grid--community,.dashboard-grid--access{grid-template-columns:1fr}
  .dashboard-intro h1{font-size:36px}
  .dashboard-section-heading,.status-heading{align-items:flex-start;flex-direction:column}
  .dashboard-card{min-height:250px}
  .dashboard-grid--community .dashboard-card{min-height:315px}
  .dashboard-card-banner,.dashboard-card--access .dashboard-card-banner{height:40px;min-height:40px}
  .home-card-banner{height:64px;min-height:64px}
  .dashboard-card--access .home-card-banner{height:64px;min-height:64px}
  .dashboard-card-actions .pg-button{width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dashboard-header,
  .dashboard-card,
  .status-pill--live::before{
    animation:none!important;
  }
  .dashboard-card,
  .dashboard-card-actions .pg-button,
  .dashboard-text-link,
  .side-nav a,
  .rail-utility a,
  .playlist{
    transition:none!important;
  }
}