:root{
  --bg-url: url("./assets/img/forest.jpg");
  --bg-pos: center center;
  --frost-tint: 8, 32, 28;
  --frost-alpha: 0.12;
  --frost-blur: 24px;
  --edge-shadow: 0.22;
  --sweep-dur: 2.8s;
  --flash-dur: 260ms;
  --brand: #1bc077;
  --brand-strong: #3ff2a8;
  --text: #e9fff9;
  --muted: #a8c7bb;
  --panel-bg: rgba(3,16,13,.82);
  --panel-border: rgba(255,255,255,.08);
  --card-bg: rgba(255,255,255,.03);
  --card-border: rgba(255,255,255,.12);
  --shadow-soft: 0 30px 60px rgba(0,0,0,.4);
  --scroll-thumb: rgba(61,166,123,.7);
}

*,*::before,*::after{
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:#010806;
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  display:block;
}

button{
  font:inherit;
}

.stage{
  min-height:100vh;
  height:100%;
  display:flex;
  position:relative;
  background-image:var(--bg-url), url("../img/forest.jpg");
  background-size:cover;
  background-position:var(--bg-pos);
  background-repeat:no-repeat;
  overflow-x:hidden;
  overflow-y:visible;
  isolation:isolate;
}

.stage__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 60%,rgba(0,0,0,.65));
  z-index:5;
}

.frost{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  z-index:10;
  background:linear-gradient(
    to right,
    rgba(var(--frost-tint), calc(var(--frost-alpha) + .02)) 0%,
    rgba(var(--frost-tint), var(--frost-alpha)) 50%,
    rgba(var(--frost-tint), calc(var(--frost-alpha) + .00)) 100%
  );
  backdrop-filter:blur(var(--frost-blur)) saturate(115%);
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(115%);
  box-shadow:inset -52px 0 62px rgba(0,0,0,var(--edge-shadow));
  overflow:visible;
}

.frost.go{
  animation:sweep var(--sweep-dur) cubic-bezier(.22,.61,.2,1) forwards;
}

@keyframes sweep{
  from{ width:0vw; }
  to{ width:50vw; }
}

.name-wrap{
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  display:grid;
  place-items:center;
}

.name-mask{
  background-image:var(--bg-url), url("../img/forest.jpg");
  background-size:cover;
  background-position:var(--bg-pos);
  background-attachment:fixed;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  font-weight:900;
  letter-spacing:.04em;
  line-height:1;
  text-align:center;
  font-size:clamp(48px,13vw,220px);
  -webkit-text-stroke:10px rgba(0,0,0,.35);
  filter:
    drop-shadow(0 3px 12px rgba(0,0,0,.42))
    drop-shadow(0 18px 46px rgba(0,0,0,.28));
  opacity:0;
}

.name-mask.flash{
  animation:flashIn var(--flash-dur) steps(1,end) forwards;
}

.name-mask.visible{
  opacity:1;
}

@keyframes flashIn{
  0%{
    opacity:0;
    filter:brightness(1.6)
      drop-shadow(0 3px 12px rgba(0,0,0,.42))
      drop-shadow(0 18px 46px rgba(0,0,0,.28));
  }
  100%{
    opacity:1;
    filter:brightness(1)
      drop-shadow(0 3px 12px rgba(0,0,0,.42))
      drop-shadow(0 18px 46px rgba(0,0,0,.28));
  }
}

@supports (-webkit-touch-callout:none){
  .name-mask{
    background-attachment:scroll;
  }
}

.panel{
  position:fixed;
  top:0;
  right:0;
  width:min(560px,92vw);
  height:100vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--panel-bg);
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  border-left:1px solid var(--panel-border);
  padding:28px clamp(18px,3vw,36px) 36px;
  padding-bottom:24px;
  display:flex;
  flex-direction:column;
  gap:22px;
  z-index:100;
  box-shadow:-30px 0 60px rgba(0,0,0,.35);
  transition:transform .35s ease, opacity .35s ease;
}

.panel__body{
  min-height:100%;
  display:block;
}

.panel.hidden{
  transform:translateX(120%);
  opacity:0;
  pointer-events:none;
}

.panel__close{
  position:absolute;
  top:18px;
  right:18px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.25);
  color:var(--text);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
}

.panel__toolbar{
  display:flex;
  gap:18px;
  align-items:flex-end;
  flex-wrap:wrap;
}

body.panel-open{
  overflow:hidden;
  overscroll-behavior:contain;
}

.toolbar__field{
  flex:1 1 240px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  color:var(--muted);
}

.toolbar__field input{
  height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:0 16px;
  font-size:16px;
  outline:none;
  transition:border .2s ease, box-shadow .2s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.toolbar__field input:focus{
  border-color:rgba(31,204,131,.9);
  box-shadow:0 0 0 2px rgba(31,204,131,.25);
}

.btn-primary{
  border:none;
  border-radius:999px;
  padding:0 32px;
  height:48px;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong));
  color:#03120e;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 16px 32px rgba(17,147,94,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}

.btn-primary:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

.btn-primary:not(:disabled):active{
  transform:translateY(1px);
  box-shadow:0 10px 20px rgba(17,147,94,.4);
}

.status-bar{
  border-radius:18px;
  padding:14px 18px;
  font-size:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.4;
}

.status-bar::before{
  content:"●";
  font-size:12px;
  color:var(--muted);
}

.status-bar[data-state="loading"]{
  border-color:rgba(31,204,131,.4);
}

.status-bar[data-state="loading"]::before{
  color:var(--brand);
  animation:pulse 1.2s ease infinite;
}

.status-bar[data-state="error"]{
  border-color:rgba(255,120,120,.6);
  color:#ffdede;
}

.status-bar[data-state="error"]::before{
  color:#ff7a7a;
  animation:none;
}

.status-bar[data-state="success"]::before{
  color:#3ff2a8;
}

@keyframes pulse{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;
}

.kpi-card{
  padding:18px;
  border-radius:20px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 30px rgba(0,0,0,.2);
}

.kpi-card p{
  margin:0 0 6px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.04em;
}

.kpi-card strong{
  font-size:32px;
  font-weight:800;
  color:var(--text);
}

.chart-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.chart-card,
.mv-panel,
.player-card{
  border-radius:24px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  padding:20px 22px;
  box-shadow:var(--shadow-soft);
}

.chart-card header,
.mv-panel header,
.player-card header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.chart-card h3,
.mv-panel h3,
.player-card h3{
  margin:0;
  font-size:18px;
  letter-spacing:.02em;
}

.chart-card p,
.mv-panel p,
.player-card p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

.chart-card__body{
  position:relative;
  min-height:220px;
}

.chart{
  width:100%;
  height:240px;
}

.chart-card__empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.15);
  background:rgba(6,16,13,.6);
  font-size:14px;
}

[data-empty="false"] .chart-card__empty{
  opacity:0;
  pointer-events:none;
}

.mv-panel__meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.mv-panel__sort{
  display:flex;
  gap:8px;
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:4px;
}

.sort-btn{
  border:none;
  border-radius:999px;
  padding:6px 16px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}

.sort-btn.is-active{
  background:rgba(50,196,129,.2);
  color:var(--text);
}

.mv-list{
  max-height:360px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-right:6px;
  position:relative;
}

.mv-list[data-state="loading"]::before,
.mv-list[data-state="empty"]::before{
  content:attr(data-placeholder);
  position:relative;
  text-align:center;
  padding:42px 0;
  border:1px dashed rgba(255,255,255,.15);
  border-radius:18px;
  color:var(--muted);
}

.mv-list[data-state="loading"]::before{
  content:"正在拉取 MV 列表…";
}

.mv-list[data-state="empty"]::before{
  content:"暂无 MV 数据";
}

.mv-list .placeholder{
  display:none;
}

.mv-item{
  display:flex;
  gap:14px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border .15s ease;
}

.mv-item:hover{
  transform:translateY(-1px);
  border-color:rgba(63,242,168,.7);
}

.mv-item[data-active="true"]{
  background:linear-gradient(135deg,rgba(26,96,73,.8),rgba(8,28,22,.95));
  border-color:rgba(63,242,168,.9);
  box-shadow:0 20px 30px rgba(0,0,0,.4);
}

.mv-item__cover{
  width:120px;
  height:68px;
  border-radius:12px;
  object-fit:cover;
  background:#000;
  flex-shrink:0;
}

.mv-item__body{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.mv-item__title{
  margin:0;
  font-size:15px;
  font-weight:700;
}

.mv-item__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}

.mv-item__tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  font-size:11px;
  color:var(--brand-strong);
}

.player-card video{
  width:100%;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:#050f0c;
  min-height:260px;
  outline:none;
}

.player-badge{
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  color:var(--muted);
  font-size:12px;
  align-self:flex-start;
  background:rgba(255,255,255,.05);
}

.panel-fab{
  position:fixed;
  right:32px;
  top:50%;
  transform:translateY(-50%) scale(.9);
  border:none;
  border-radius:999px;
  padding:14px 26px;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong));
  color:#02150e;
  font-weight:700;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:10;
}

.panel-fab[data-visible="true"]{
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) scale(1);
}

.toast{
  position:fixed;
  left:50%;
  bottom:32px;
  transform:translate(-50%,150%);
  padding:12px 20px;
  border-radius:999px;
  background:rgba(0,0,0,.8);
  color:#fff;
  font-size:14px;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .3s ease, opacity .3s ease;
  opacity:0;
  z-index:20;
}

.toast[data-show="true"]{
  transform:translate(-50%,0);
  opacity:1;
}

.toast[data-variant="error"]{
  background:rgba(142,30,30,.9);
}

.toast[data-variant="warn"]{
  background:rgba(176,123,22,.9);
}

.toast[data-variant="success"]{
  background:rgba(23,120,81,.95);
}

/* Scrollbar */
.mv-list,
.panel{
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) rgba(255,255,255,.08);
}

.mv-list::-webkit-scrollbar,
.panel::-webkit-scrollbar{
  width:8px;
}

.mv-list::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--brand),var(--brand-strong));
  border-radius:999px;
}

.mv-list::-webkit-scrollbar-track,
.panel::-webkit-scrollbar-track{
  background:rgba(0,0,0,.2);
  border-radius:999px;
}

@media (max-width:1200px){
  .stage{
    flex-direction:column;
  }

  .panel{
    max-width:none;
    width:100%;
    border-left:none;
    border-top:1px solid var(--panel-border);
    box-shadow:0 -20px 40px rgba(0,0,0,.4);
  }

  .stage__hud{
    position:relative;
    left:auto;
    bottom:auto;
    margin:32px auto 0;
    max-width:92%;
  }

  .panel-fab{
    right:16px;
    top:auto;
    bottom:24px;
    transform:translateY(0) scale(.9);
  }

  .panel-fab[data-visible="true"]{
    transform:translateY(0) scale(1);
  }
}

@media (max-width:768px){
  .panel{
    padding:24px 16px 32px;
  }

  .chart{
    height:200px;
  }

  .player-card video{
    min-height:200px;
  }

  .stage__hud{
    text-align:center;
  }
}