:root {
  --bg:#08080d;
  --panel:#101018;
  --text:#f4f1fa;
  --muted:#92909f;
  --line:rgba(255,255,255,.12);
  --purple:#a78bfa;
  --pink:#edb5ff;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;
  overflow-x:hidden;line-height:1.6;
}
body.light{
  --bg:#efedf5;--panel:#fff;--text:#171321;
  --muted:#696477;--line:rgba(20,10,40,.14);
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
::selection{background:#a78bfa;color:#09070e}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none}
.noise{
  position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed;z-index:-1;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%);
  transform:translate(-50%,-50%);pointer-events:none;
}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  background:rgba(8,8,13,.72);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
body.light header{background:rgba(239,237,245,.78)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-size:19px;font-weight:900;letter-spacing:4px}
.logo span{color:var(--purple)}
.nav-links{display:flex;align-items:center;gap:28px;font-size:12px;letter-spacing:1.5px;color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;gap:10px;align-items:center}
.icon-btn,.menu-btn{
  border:1px solid var(--line);background:transparent;border-radius:50%;
  width:39px;height:39px;display:grid;place-items:center;cursor:pointer;
  transition:.25s;
}
.icon-btn:hover,.menu-btn:hover{border-color:var(--purple);color:var(--purple)}
.menu-btn{display:none}
.hero{
  min-height:790px;height:100svh;max-height:1050px;position:relative;
  display:flex;align-items:center;overflow:hidden;padding-top:76px;
}
.hero::before{
  content:"";position:absolute;width:700px;height:700px;right:-5%;top:10%;
  background:radial-gradient(circle,rgba(104,65,180,.2),transparent 68%);
}
.hero-copy{position:relative;z-index:3;width:58%;padding-bottom:25px}
.eyebrow{
  color:var(--purple);font-size:11px;letter-spacing:4px;text-transform:uppercase;
  display:flex;align-items:center;gap:12px;
}
.eyebrow:before{content:"";width:32px;height:1px;background:var(--purple)}
.hero h1{
  font-size:clamp(64px,10vw,142px);line-height:.87;letter-spacing:-.075em;
  margin:34px 0 28px;font-weight:900;
}
.hero h1 .outline{
  display:block;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.65);
  text-shadow:0 0 35px rgba(167,139,250,.08);
}
body.light .hero h1 .outline{-webkit-text-stroke:1px rgba(20,10,40,.55)}
.glitch{position:relative}
.hero-desc{max-width:420px;color:var(--muted);font-size:14px;line-height:2}
.hero-actions{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 21px;border:1px solid var(--line);border-radius:3px;
  font-size:11px;letter-spacing:1.5px;cursor:pointer;transition:.25s;
  background:transparent;
}
.btn-primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn:hover{transform:translateY(-3px);border-color:var(--purple)}
.hero-meta{display:flex;gap:32px;margin-top:50px;color:var(--muted);font-size:10px;letter-spacing:2px}
.hero-meta strong{display:block;color:var(--text);font-size:14px;font-weight:500;letter-spacing:1px}
.hero-art{
  position:absolute;right:3%;top:13%;width:min(48%,590px);height:76%;
  display:flex;align-items:center;justify-content:center;
}
.art-halo{
  position:absolute;width:90%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(167,139,250,.18);
  box-shadow:0 0 80px rgba(124,58,237,.13),inset 0 0 80px rgba(124,58,237,.08);
}
.art-halo:before,.art-halo:after{
  content:"";position:absolute;border:1px solid rgba(167,139,250,.12);border-radius:50%;
}
.art-halo:before{inset:9%}
.art-halo:after{inset:19%}
.art-number{
  position:absolute;right:0;top:15%;font-size:10px;letter-spacing:4px;
  color:var(--muted);writing-mode:vertical-rl;
}
.character{position:relative;width:83%;height:100%;max-height:660px}
.character .coat{
  position:absolute;bottom:-3%;left:7%;width:87%;height:58%;
  background:linear-gradient(110deg,#09090e 0%,#292433 43%,#101017 70%,#050507);
  clip-path:polygon(28% 0,70% 0,84% 18%,100% 100%,0 100%,15% 18%);
  filter:drop-shadow(0 0 30px rgba(124,58,237,.22));
}
.character .neck{
  position:absolute;top:37%;left:41%;width:18%;height:15%;
  background:linear-gradient(90deg,#9c8b99,#ead1dc,#796b83);
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);
}
.character .face{
  position:absolute;top:14%;left:27%;width:46%;height:39%;
  border-radius:44% 48% 42% 45%;
  background:linear-gradient(110deg,#b9a6b7,#f0d9e0 44%,#9b859e);
  box-shadow:inset -14px -2px 25px rgba(40,20,50,.25);
  transform:rotate(-5deg);
}
.character .hair{
  position:absolute;z-index:2;top:7%;left:17%;width:64%;height:42%;
  background:linear-gradient(130deg,#09090d,#26212f 53%,#09090c);
  border-radius:55% 47% 22% 25%;
  clip-path:polygon(8% 30%,15% 9%,39% 0,66% 7%,91% 28%,100% 78%,77% 58%,67% 100%,56% 53%,42% 94%,33% 47%,13% 82%,0 100%);
  filter:drop-shadow(0 0 12px rgba(167,139,250,.25));
}
.character .fringe{
  position:absolute;z-index:3;top:20%;left:35%;width:35%;height:22%;
  background:#14111b;clip-path:polygon(0 0,100% 0,75% 100%,50% 54%,22% 100%);
}
.character .eye{
  position:absolute;z-index:4;top:33%;left:37%;width:9%;height:2px;
  background:#292033;transform:rotate(-6deg);box-shadow:42px 5px 0 #292033;
}
.character .scarf{
  position:absolute;z-index:5;top:46%;left:22%;width:55%;height:12%;
  background:linear-gradient(170deg,#c6b6d4,#5b486d 45%,#191520);
  clip-path:polygon(10% 0,100% 10%,76% 65%,60% 100%,40% 38%,0 30%);
}
.character .light-line{
  position:absolute;z-index:6;top:52%;left:10%;width:78%;height:1px;
  background:linear-gradient(90deg,transparent,#c4b5fd,transparent);
  box-shadow:0 0 15px #a78bfa;
}
.scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:3px;color:var(--muted);display:flex;gap:13px;align-items:center;
}
.scroll-cue:before{content:"";width:30px;height:1px;background:var(--purple)}
.section{padding:110px 0;position:relative}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:38px}
.kicker{font-size:10px;letter-spacing:4px;color:var(--purple);text-transform:uppercase}
.section h2{font-size:clamp(32px,5vw,58px);line-height:1.1;letter-spacing:-2px;margin:12px 0 0}
.section-note{max-width:320px;color:var(--muted);font-size:12px;line-height:1.9}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center}
.about-text{font-size:clamp(18px,2vw,25px);line-height:1.9;max-width:700px}
.about-text span{color:var(--purple)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat{padding:22px;border:1px solid var(--line);background:var(--panel)}
.stat strong{font-size:27px;display:block;font-weight:500}
.stat small{color:var(--muted);font-size:10px;letter-spacing:2px}
.panel{
  background:linear-gradient(135deg,rgba(167,139,250,.06),transparent 50%),var(--panel);
  border:1px solid var(--line);padding:25px;
}
.panel-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}
.panel-title{font-size:11px;letter-spacing:2px}
.live{font-size:9px;color:#a7f3d0;letter-spacing:2px}
.live:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#6ee7b7;margin-right:8px}
.clock{font-size:clamp(26px,4vw,42px);letter-spacing:3px;font-variant-numeric:tabular-nums}
.clock-date{font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:5px}
.mini-bars{height:50px;display:flex;align-items:center;gap:4px;margin-top:18px;overflow:hidden}
.mini-bars i{display:block;width:3px;min-width:3px;background:linear-gradient(to top,#6d28d9,#c4b5fd);border-radius:3px;height:var(--h);opacity:.75}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filter{
  padding:9px 15px;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-size:10px;letter-spacing:1px;cursor:pointer;
}
.filter.active,.filter:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.gallery{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.media-card{
  position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  cursor:pointer;min-height:230px;isolation:isolate;
}
.media-card[hidden]{display:none}
.media-card .thumb{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s;
}
.media-card:hover .thumb{transform:scale(1.06);filter:brightness(.65)}
.media-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;
  background:
    radial-gradient(ellipse at 65% 20%,rgba(167,139,250,.24),transparent 45%),
    linear-gradient(145deg,#171421,#09090e 75%);
}
.media-placeholder .big{font-size:48px;color:rgba(196,181,253,.6);font-weight:200}
.media-placeholder small{color:#a8a2b8;font-size:9px;letter-spacing:3px}
.card-shade{
  position:absolute;inset:35% 0 0;z-index:1;
  background:linear-gradient(transparent,rgba(5,5,9,.94));
}
.card-info{position:absolute;z-index:2;bottom:0;left:0;right:0;padding:19px}
.card-info small{font-size:9px;letter-spacing:2px;color:#c4b5fd}
.card-info h3{margin:5px 0;font-size:17px;font-weight:500}
.card-info p{margin:0;color:#c1bdcc;font-size:11px}
.card-open{
  position:absolute;z-index:3;right:14px;top:14px;border:1px solid rgba(255,255,255,.35);
  width:35px;height:35px;display:grid;place-items:center;border-radius:50%;
  background:rgba(10,10,15,.4);backdrop-filter:blur(8px)
}
.video-play{
  position:absolute;z-index:3;left:50%;top:43%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.6);background:rgba(10,10,15,.4);
  backdrop-filter:blur(8px);font-size:16px;
}
.media-help{color:var(--muted);font-size:11px;line-height:2;margin-top:24px}
.media-help code{color:var(--purple)}
.music-layout{display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:24px}
.disc{
  width:90px;height:90px;border-radius:50%;
  background:repeating-radial-gradient(circle,#14121d 0 3px,#30283d 4px 5px,#09090d 6px 8px);
  border:1px solid #4b3b63;display:grid;place-items:center;
  box-shadow:0 0 40px rgba(124,58,237,.12);
}
.disc:after{content:"";width:23px;height:23px;border-radius:50%;background:#a78bfa;border:6px solid #1c1528}
.disc.playing{animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.track-label{font-size:9px;letter-spacing:3px;color:var(--purple)}
.track-name{font-size:20px;margin:4px 0}
.track-sub{font-size:11px;color:var(--muted)}
.music-controls{display:flex;align-items:center;gap:10px}
.play-btn{
  width:45px;height:45px;border-radius:50%;background:var(--text);color:var(--bg);
  border:0;cursor:pointer;font-size:15px;
}
.small-btn{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:19px}
.contact-box{
  padding:clamp(30px,6vw,75px);border:1px solid var(--line);position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 90% 10%,rgba(124,58,237,.18),transparent 40%),var(--panel);
}
.contact-box h2{font-size:clamp(40px,8vw,88px);letter-spacing:-5px;max-width:850px}
.contact-box h2 span{color:var(--purple)}
.contact-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:35px;flex-wrap:wrap}
footer{padding:28px 0;border-top:1px solid var(--line);font-size:10px;color:var(--muted);letter-spacing:1px}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:translateY(0)}
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(4,4,8,.94);
  backdrop-filter:blur(20px);display:none;align-items:center;justify-content:center;padding:24px;
}
.lightbox.open{display:flex}
.lightbox-inner{width:min(1100px,100%);max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:15px}
.lightbox-media{max-width:100%;max-height:75vh;object-fit:contain}
.lightbox video{width:100%;max-height:75vh;background:#000}
.lightbox-caption{font-size:12px;color:#c8c1d5;text-align:center}
.lb-close,.lb-prev,.lb-next{
  position:absolute;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);
  background:rgba(15,15,20,.7);color:white;cursor:pointer;border-radius:50%;font-size:22px;
}
.lb-close{right:25px;top:25px}
.lb-prev{left:25px;top:50%}.lb-next{right:25px;top:50%}
.empty-message{grid-column:1/-1;padding:40px;border:1px dashed var(--line);color:var(--muted);text-align:center;font-size:12px}
@media(max-width:800px){
  .container{width:min(100% - 32px,var(--max))}
  .nav{height:66px}
  .nav-links{
    display:none;position:absolute;top:66px;left:0;right:0;padding:22px;
    background:var(--panel);border-bottom:1px solid var(--line);
    flex-direction:column;gap:20px;align-items:flex-start;
  }
  .nav-links.open{display:flex}
  .menu-btn{display:grid}
  .hero{height:auto;min-height:760px;max-height:none;align-items:flex-start;padding-top:155px}
  .hero-copy{width:100%;padding-bottom:270px}
  .hero h1{font-size:clamp(65px,16vw,110px)}
  .hero-art{width:72%;height:390px;right:-4%;top:auto;bottom:40px;opacity:.8}
  .hero-meta{margin-top:30px;gap:18px}
  .section{padding:78px 0}
  .section-head{align-items:flex-start;flex-direction:column}
  .about-grid{grid-template-columns:1fr;gap:30px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .media-card{min-height:220px}
  .music-layout{grid-template-columns:65px 1fr;gap:16px}
  .disc{width:62px;height:62px}
  .music-controls{grid-column:1/-1;justify-content:flex-start}
  .contact-box h2{letter-spacing:-2px}
  .lb-prev{left:8px}.lb-next{right:8px}
}
@media(max-width:480px){
  .hero{min-height:700px}
  .hero-desc{font-size:12px}
  .gallery{grid-template-columns:1fr 1fr}
  .media-card{min-height:185px}
  .card-info{padding:12px}
  .card-info h3{font-size:14px}
  .card-info p{font-size:10px}
  .card-open{width:30px;height:30px;right:9px;top:9px}
  .stats{gap:8px}
  .stat{padding:16px}
  .stat strong{font-size:22px}
  .section h2{letter-spacing:-1px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  #stars,.cursor-glow{display:none}
}

/* ===== 显示稳定性补丁 =====
   原先 .reveal 默认 opacity:0，靠 IntersectionObserver 才显示；
   脚本一旦报错或浏览器不支持该 API，首屏之后的区块就永久不可见。
   现在改为：默认可见，只有在 <html class="js-anim"> 时才走动画。 */
.reveal{opacity:1;transform:none}
html.js-anim .reveal{opacity:0;transform:translateY(24px)}
html.js-anim .reveal.visible{opacity:1;transform:none}

/* ===== SLQ Weather Panel ===== */
.weather-section {
  position: relative;
}

.weather-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 30px;
  border: 1px solid var(--border, rgba(255,255,255,.15));
  border-radius: 4px;
  background: rgba(255,255,255,.025);
}

.weather-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.weather-label,
.weather-detail,
.weather-updated {
  color: var(--muted, #999);
  font-size: 12px;
  letter-spacing: 1.5px;
}

.weather-temperature {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: clamp(54px, 8vw, 86px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -4px;
}

.weather-temperature span:last-child {
  margin-top: 8px;
  font-size: 24px;
  letter-spacing: 0;
}

.weather-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: center;
}

.weather-stat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 90px;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--border, rgba(255,255,255,.12));
}

.weather-stat span {
  color: var(--muted, #999);
  font-size: 10px;
  letter-spacing: 1px;
}

.weather-stat strong {
  font-size: 21px;
  font-weight: 400;
}

.weather-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  grid-column: 1 / -1;
}

#weatherCitySelect {
  min-height: 42px;
  max-width: 100%;
  padding: 0 12px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,.2));
  border-radius: 3px;
  font: inherit;
}

#weatherCitySelect option {
  color: #111;
  background: #fff;
}

.weather-updated {
  grid-column: 1 / -1;
  font-size: 10px;
  letter-spacing: .5px;
}

@media (max-width: 640px) {
  .weather-panel {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px;
  }

  .weather-stats {
    grid-template-columns: 1fr 1fr;
  }

  .weather-actions,
  .weather-updated {
    grid-column: auto;
  }
}
/* ===== End Weather Panel ===== */


/* 修复中英文切换按钮尺寸 */
#languageBtn {
  min-width: 52px;
  width: auto;
  padding: 0 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

/* 统一语言切换按钮字体 */
#languageBtn {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1;
  font-variant: normal;
  text-align: center;
}

/* ===== 2026-10 优化：卡片 / 播放器 / 可点击性 ===== */

/* 首屏 meta：文字原来紧跟 <strong> 显示，现在包进 span，保持块级排布 */
.hero-meta span{display:block}

/* 照片与视频卡片：统一比例，黑白电影感，悬停回一点色 */
.gallery .media-card{aspect-ratio:4/3;min-height:0}
.gallery .media-card .thumb{
  filter:grayscale(1) contrast(1.08) brightness(.92);
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .5s;
}
.gallery .media-card:hover .thumb,
.gallery .media-card:focus-within .thumb{transform:scale(1.06);filter:grayscale(.15) contrast(1.05) brightness(.72)}
.gallery .media-card:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.media-card .card-info p{opacity:.85}
.video-play{transition:transform .3s,border-color .3s}
.media-card:hover .video-play{transform:translate(-50%,-50%) scale(1.08);border-color:var(--purple)}

/* 缺失素材：直接显示应该上传的文件路径 */
.media-placeholder .file-hint{
  font-size:9px;letter-spacing:1px;color:#7d778c;word-break:break-all;padding:0 14px;line-height:1.6;
}

/* 音乐：曲目序号 + 音量条 */
.track-index{font-size:9px;letter-spacing:2px;color:var(--muted);margin-left:8px}
.volume-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.volume-row .small-btn{font-size:15px;line-height:1}
#volume{width:120px;max-width:45vw;accent-color:var(--purple);cursor:pointer}
#volume:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* 手机端：按钮至少 44px，便于点击 */
@media(max-width:800px){
  .icon-btn,.menu-btn{width:44px;height:44px}
  .filter{padding:11px 16px}
  .small-btn{padding:8px 10px}
  .lb-close,.lb-prev,.lb-next{width:46px;height:46px}
  .nav-links a{display:block;padding:6px 0;font-size:14px}
  .volume-row{margin-top:6px}
}
@media(max-width:480px){
  .gallery .media-card{aspect-ratio:1/1}
  #volume{width:96px}
}

/* 系统开启"减少动态效果"时，关掉位移与旋转 */
@media(prefers-reduced-motion:reduce){
  .gallery .media-card .thumb,
  .gallery .media-card:hover .thumb,
  .media-card:hover .video-play{transform:none!important;transition:none!important}
  .disc.playing{animation:none!important}
}

/* 手机端导航：压缩间距，避免菜单占满整屏；链接高度 ≥44px 便于点击 */
@media(max-width:800px){
  .nav-links{
    max-height:calc(100svh - 66px);overflow-y:auto;
    gap:2px;padding:10px 22px 18px;
  }
  .nav-links a{
    padding:12px 0;font-size:15px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  body.light .nav-links a{border-bottom-color:rgba(20,10,40,.08)}
  .nav-links a:last-child{border-bottom:0}
}

/* ===== DARK MATTER：动漫人物自然融入背景 ===== */

.hero-art {
  isolation: isolate;
}

/* 隐藏原来的 CSS 几何人物 */
.hero-art .character {
  display: none;
}

/* 保留原有的紫色光环 */
.hero-art .art-halo {
  z-index: 0;
}

/* 人物图片：降低亮度，统一黑白色调 */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image: url("../1.jpg");
  background-repeat: no-repeat;
  background-position: center 44%;
  background-size: contain;

  filter: grayscale(1) contrast(1.08) brightness(0.8);
  opacity: 0.96;

  /* 四周柔和淡出，不留下明显图片边框 */
  -webkit-mask-image: radial-gradient(
    ellipse at 55% 44%,
    #000 36%,
    rgba(0, 0, 0, 0.92) 52%,
    rgba(0, 0, 0, 0.42) 72%,
    transparent 88%
  );
  mask-image: radial-gradient(
    ellipse at 55% 44%,
    #000 36%,
    rgba(0, 0, 0, 0.92) 52%,
    rgba(0, 0, 0, 0.42) 72%,
    transparent 88%
  );
}
/* 白色主题：自动切换人物图片 */
body.light .hero-art::after {
  background-image: url("../2.jpg");
  filter: grayscale(1) contrast(1.08) brightness(0.95);
  opacity: 1;
}
/* 左侧、顶部、底部向网站背景过渡 */
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      to right,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 70%, transparent) 20%,
      transparent 53%
    ),
    linear-gradient(
      to bottom,
      var(--bg) 0%,
      transparent 16%,
      transparent 78%,
      var(--bg) 100%
    );
}

/* 右侧编号放在图片上方 */
.hero-art .art-number {
  z-index: 3;
}

/* 手机上人物稍微向上调整 */
@media (max-width: 800px) {
  .hero-art::after {
    background-position: center 36%;
    filter: grayscale(1) contrast(1.05) brightness(0.82);
  }
}

/* ===== DARKMATTER · 电视直播入口 =====
   全部规则使用 dm-live-tv 前缀，只作用于这张卡片，不影响任何已有样式。
   注意：本文件里不使用 .hero-art::before / .hero-art::after。 */

.dm-live-tv-section{padding:0 0 110px}
.dm-live-tv-wrap{max-width:880px;margin:0 auto}

/* 电视机外壳 */
.dm-live-tv{
  display:block;position:relative;padding:14px;border-radius:12px;
  border:1px solid rgba(167,139,250,.26);
  background:linear-gradient(165deg,#0c0c14 0%,#07070b 55%,#0b0b12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 20px 60px rgba(0,0,0,.55),
    0 0 42px rgba(124,58,237,.10);
  color:var(--text);text-decoration:none;cursor:pointer;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.dm-live-tv:hover,
.dm-live-tv:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(167,139,250,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 24px 70px rgba(0,0,0,.6),
    0 0 60px rgba(124,58,237,.22);
  outline:none;
}
.dm-live-tv:focus-visible{outline:2px solid var(--purple);outline-offset:4px}

/* 顶部标识 */
.dm-live-tv-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:2px 6px 12px;
}
.dm-live-tv-brand{
  font-size:11px;font-weight:700;letter-spacing:4px;color:var(--text);
}
.dm-live-tv-channel{
  font-size:9px;letter-spacing:3px;color:var(--purple);opacity:.9;
}
.dm-live-tv-channel:before{
  content:"";display:inline-block;width:14px;height:1px;
  background:var(--purple);vertical-align:middle;margin-right:8px;opacity:.7;
}

/* 屏幕 */
.dm-live-tv-screen{
  position:relative;overflow:hidden;border-radius:6px;
  aspect-ratio:16/9;min-height:180px;
  border:1px solid rgba(167,139,250,.22);
  background:
    radial-gradient(ellipse at 72% 18%,rgba(124,58,237,.20),transparent 58%),
    radial-gradient(ellipse at 20% 86%,rgba(167,139,250,.10),transparent 60%),
    linear-gradient(160deg,#0a0912 0%,#06060a 60%,#0a0911 100%);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .35s ease;
}
.dm-live-tv:hover .dm-live-tv-screen{border-color:rgba(167,139,250,.45)}

/* 扫描线（只作用于本卡片屏幕） */
.dm-live-tv-screen:after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
  opacity:.55;mix-blend-mode:screen;
}
/* 屏幕反光 */
.dm-live-tv-screen:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 74%,rgba(255,255,255,.04) 100%);
}

.dm-live-tv-ch{
  position:absolute;top:12px;right:14px;z-index:4;
  font-size:9px;letter-spacing:2px;color:rgba(244,241,250,.55);
}

.dm-live-tv-center{position:relative;z-index:4;text-align:center;padding:18px}
.dm-live-tv-bili{
  font-size:clamp(15px,2.4vw,22px);font-weight:800;letter-spacing:.34em;
  color:#fff;text-shadow:0 0 18px rgba(167,139,250,.55);
}
.dm-live-tv-title{
  margin-top:8px;font-size:10px;letter-spacing:5px;color:rgba(237,181,255,.85);
}
.dm-live-tv-hint{
  margin-top:16px;font-size:11px;letter-spacing:1.6px;color:rgba(244,241,250,.62);
}
.dm-live-tv:hover .dm-live-tv-hint{color:#fff}

/* 待机指示灯 */
.dm-live-tv-standby{
  position:absolute;left:14px;bottom:12px;z-index:4;width:5px;height:5px;border-radius:50%;
  background:var(--purple);box-shadow:0 0 8px rgba(167,139,250,.9);opacity:.75;
}

/* 底部：房间名 + 状态 */
.dm-live-tv-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 6px 2px;font-size:10px;letter-spacing:2px;
}
.dm-live-tv-room{color:rgba(244,241,250,.72)}
.dm-live-tv-status{display:inline-flex;align-items:center;gap:8px;color:rgba(244,241,250,.72)}
.dm-live-tv-dot{
  width:8px;height:8px;border-radius:50%;background:#6b6b78;flex:0 0 auto;
  transition:background .3s ease,box-shadow .3s ease;
}

/* 状态配色：真实状态才给红/灰/琥珀 */
.dm-live-tv-status[data-state="live"]{color:#ff8a94}
.dm-live-tv-status[data-state="live"] .dm-live-tv-dot{
  background:#ff4d5e;box-shadow:0 0 10px rgba(255,77,94,.9);
  animation:dmLivePulse 1.8s ease-in-out infinite;
}
.dm-live-tv-status[data-state="offline"]{color:rgba(244,241,250,.6)}
.dm-live-tv-status[data-state="offline"] .dm-live-tv-dot{background:#6b6b78;box-shadow:none}
.dm-live-tv-status[data-state="round"]{color:#ffcf8a}
.dm-live-tv-status[data-state="round"] .dm-live-tv-dot{
  background:#ffb347;box-shadow:0 0 9px rgba(255,179,71,.75);
}
.dm-live-tv-status[data-state="checking"]{color:rgba(196,181,253,.85)}
.dm-live-tv-status[data-state="checking"] .dm-live-tv-dot{
  background:var(--purple);animation:dmLivePulse 1.6s ease-in-out infinite;
}
.dm-live-tv-status[data-state="unconfigured"]{color:rgba(244,241,250,.55)}
.dm-live-tv-status[data-state="unconfigured"] .dm-live-tv-dot{background:#8b8798}
.dm-live-tv-status[data-state="unknown"]{color:rgba(244,241,250,.55)}
.dm-live-tv-status[data-state="unknown"] .dm-live-tv-dot{background:#6b6b78}

@keyframes dmLivePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}

/* ===== 白色主题 body.light ===== */
body.light .dm-live-tv{
  border-color:rgba(20,10,40,.16);
  background:linear-gradient(165deg,#ffffff 0%,#f4f2f9 60%,#efeef5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px rgba(30,20,60,.12);
  color:#171321;
}
body.light .dm-live-tv:hover,
body.light .dm-live-tv:focus-visible{
  border-color:rgba(124,58,237,.45);
  box-shadow:0 22px 54px rgba(30,20,60,.18),0 0 40px rgba(124,58,237,.14);
}
body.light .dm-live-tv-brand{color:#171321}
body.light .dm-live-tv-channel{color:#6d3ec8}
body.light .dm-live-tv-screen{
  border-color:rgba(30,20,60,.18);
  background:
    radial-gradient(ellipse at 72% 18%,rgba(124,58,237,.16),transparent 58%),
    linear-gradient(160deg,#1b1a24 0%,#111119 60%,#1a1922 100%);
}
body.light .dm-live-tv-bottom{color:#3c3552}
body.light .dm-live-tv-room{color:#3c3552}
body.light .dm-live-tv-status{color:#3c3552}
body.light .dm-live-tv-status[data-state="live"]{color:#c0273a}
body.light .dm-live-tv-status[data-state="round"]{color:#a86a12}
body.light .dm-live-tv-status[data-state="checking"]{color:#5b3fb0}
body.light .dm-live-tv-status[data-state="unknown"],
body.light .dm-live-tv-status[data-state="unconfigured"],
body.light .dm-live-tv-status[data-state="offline"]{color:#57506b}

/* ===== 手机端 ===== */
@media(max-width:800px){
  .dm-live-tv-section{padding:0 0 78px}
  .dm-live-tv{padding:10px;border-radius:10px}
  .dm-live-tv-top{padding:0 4px 10px}
  .dm-live-tv-brand{font-size:10px;letter-spacing:3px}
  .dm-live-tv-channel{font-size:8px;letter-spacing:2px}
  .dm-live-tv-screen{aspect-ratio:4/3;min-height:200px}
  .dm-live-tv-bottom{padding:10px 4px 2px;font-size:9px;letter-spacing:1.6px}
  .dm-live-tv-hint{font-size:10px;letter-spacing:1.2px}
  .dm-live-tv-title{letter-spacing:3px}
}

/* 尊重"减少动态效果" */
@media(prefers-reduced-motion:reduce){
  .dm-live-tv{transition:none}
  .dm-live-tv:hover{transform:none}
  .dm-live-tv-status .dm-live-tv-dot{animation:none!important}
}