:root{
  --pink:#ff4fa8;
  --pink2:#ff7ac2;
  --blue:#6e8bff;
  --blue2:#9ad1ff;

  --ink:#0b1220;
  --muted:#5b6576;
  --muted2:#7a8598;
  --line: rgba(233,238,247,.95);

  --glass: rgba(255,255,255,.82);
  --glass2: rgba(255,255,255,.62);

  --shadow: 0 18px 55px rgba(20,40,90,.12);
  --shadow2: 0 14px 38px rgba(255,79,168,.14);

  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --pill:999px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --t: .18s var(--ease);

  --focus: 0 0 0 4px rgba(110,139,255,.18), 0 0 0 1px rgba(110,139,255,.35) inset;

  --safeTop: env(safe-area-inset-top);
  --safeBottom: env(safe-area-inset-bottom);
}

*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none!important;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,122,194,.28) 0, transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(110,139,255,.26) 0, transparent 45%),
    radial-gradient(circle at 38% 92%, rgba(154,209,255,.24) 0, transparent 48%),
    linear-gradient(135deg, #ffffff 0%, #f5f7ff 48%, #fff7fb 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 高级背景：细网格 + 噪点 */
.fx-grid{
  position:fixed; inset:0; pointer-events:none; z-index:-3;
  background-image:
    linear-gradient(to right, rgba(17,24,39,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,.9), rgba(0,0,0,.2) 58%, transparent 78%);
  opacity:.55;
}
.fx-noise{
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.22;
  mix-blend-mode: soft-light;
}
.fx-spotlight{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle 300px at var(--mx, 52%) var(--my, 18%), rgba(255,255,255,.46), transparent 72%),
    radial-gradient(circle 500px at calc(var(--mx, 52%) + 12%) calc(var(--my, 18%) + 8%), rgba(255,255,255,.18), transparent 72%);
  mix-blend-mode:screen;
  opacity:.92;
}

header{
  position:sticky; top:0; z-index:30;
  background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.55));
  backdrop-filter: blur(16px);
  border-bottom:1px solid var(--line);
  box-shadow: 0 10px 26px rgba(20,40,90,.08);
  padding-top: var(--safeTop);
}
.nav{
  max-width:1120px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand img{
  height:38px; display:block; width:auto;
  filter: drop-shadow(0 10px 18px rgba(20,40,90,.10));
}
.btxt{min-width:0;}
.btxt b{
  display:block;
  font-size:15px;
  font-weight:950;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.btxt small{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--muted2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-actions{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center;
}
.accountBadge{
  display:flex; flex-direction:column; justify-content:center;
  min-height:38px; padding:6px 12px; border-radius:16px;
  border:1px solid rgba(110,139,255,.18); background:rgba(255,255,255,.86);
  color:var(--ink); text-decoration:none; line-height:1.2;
}
.accountBadge span{font-size:9px;color:var(--muted2);}
.accountBadge b{font-size:11px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.btn{
  border:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 14px;
  border-radius: var(--pill);
  font-size:12px;
  font-weight:950;
  min-height:38px;
  transition: transform var(--t), filter var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
  white-space:nowrap;
}
.btn:focus{ outline:none; box-shadow: var(--focus); }
.btn-ghost{
  background: rgba(255,255,255,.86);
  border:1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 10px 20px rgba(20,40,90,.06);
}
.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--pink2), var(--pink));
  box-shadow: 0 14px 28px rgba(255,79,168,.28);
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0); }

main{
  max-width:1120px;
  margin:0 auto;
  padding:18px 18px calc(260px + var(--safeBottom));
}

/* 桌面：保持你原来“网站感”的结构 */
.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  margin-top:10px;
}
@media (max-width: 960px){ .hero{grid-template-columns:1fr;} }

.hero-card{
  background: var(--glass);
  border:1px solid rgba(255,255,255,.95);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute; inset:-60px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,79,168,.18), transparent 55%),
    radial-gradient(circle at 88% 78%, rgba(110,139,255,.18), transparent 55%);
  pointer-events:none;
  opacity:.95;
}
.hero-inner{ position:relative; z-index:1; }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:999px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(255,143,210,.75);
  font-size:12px;
  margin-bottom:10px;
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background: radial-gradient(circle,#ff9ad8,#ff4fa8);
  box-shadow: 0 0 0 4px rgba(255,79,168,.10);
}
.h1{
  font-size:20px;
  font-weight:980;
  line-height:1.35;
  margin-bottom:6px;
  letter-spacing:.2px;
}
.h1 span{
  background: linear-gradient(120deg, var(--pink), var(--blue));
  -webkit-background-clip:text;
  color:transparent;
}
.desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.95;
}
.heroStats{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.heroStat{
  padding:12px;
  border-radius: 18px;
  border:1px solid rgba(233,238,247,.94);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 24px rgba(20,40,90,.05);
  backdrop-filter: blur(14px);
}
.heroStat strong{
  display:block;
  font-size:18px;
  font-weight:980;
  letter-spacing:.2px;
  color:var(--ink);
}
.heroStat span{
  display:block;
  margin-top:5px;
  font-size:11px;
  color:var(--muted2);
  line-height:1.6;
}
.heroActions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.heroLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(233,238,247,.94);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 18px rgba(20,40,90,.06);
  font-size:12px;
  font-weight:980;
  color:var(--ink);
  text-decoration:none;
  transition: transform var(--t), filter var(--t), box-shadow var(--t), border-color var(--t);
}
.heroLink.primary{
  color:#fff;
  border-color: rgba(255,79,168,.18);
  background: linear-gradient(135deg, var(--pink2), var(--pink));
  box-shadow: 0 16px 28px rgba(255,79,168,.24);
}
.heroLink:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.heroMini{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:9px 12px;
  border-radius:999px;
  border:1px dashed rgba(110,139,255,.28);
  background: rgba(246,248,255,.78);
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}

.notice{
  margin-top:10px;
  padding:12px;
  border-radius: var(--radius-lg);
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(238,242,255,.92), rgba(254,243,247,.90));
  font-size:12px;
  color:#374151;
  box-shadow: 0 10px 22px rgba(20,40,90,.05);
  line-height:1.95;
}
.notice b{ font-weight:980; color: var(--ink); }
.notice em{ font-style:normal; font-weight:980; color:#ea580c; }
.notice ul{ margin-top:8px; padding-left:16px; }
.notice li{ margin:6px 0; }
.notice .k{ font-weight:980; color:#0b1220; }
.noticeInline{ margin-top:8px; }

.linkageBar{
  margin-top:10px;
  padding:12px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,122,194,.28);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,245,251,.92)),
    linear-gradient(135deg, rgba(255,122,194,.12), rgba(110,139,255,.10));
  box-shadow: 0 12px 26px rgba(20,40,90,.06);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.linkageCopy{ min-width:0; flex:1 1 320px; }
.linkageCopy b{
  display:block;
  font-size:12px;
  font-weight:980;
  color:var(--ink);
}
.linkageCopy small{
  display:block;
  margin-top:5px;
  font-size:11px;
  color:var(--muted);
  line-height:1.75;
}
.linkageActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.linkageAction{
  border:none;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 12px;
  border-radius: var(--pill);
  font-size:11px;
  font-weight:980;
  color:#9a3412;
  background: rgba(255,247,237,.96);
  border:1px solid rgba(251,146,60,.28);
  box-shadow: 0 10px 18px rgba(251,146,60,.10);
}
.linkageAction.ghost{
  color:var(--muted);
  background: rgba(255,255,255,.90);
  border-color: var(--line);
  box-shadow:none;
}

.side{
  background: rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
}
.side::after{
  content:"";
  position:absolute; right:-50px; bottom:-50px;
  width:160px;height:160px;border-radius:50%;
  background: radial-gradient(circle, rgba(110,139,255,.18), transparent 70%);
  pointer-events:none;
}
.side b{
  display:block;
  font-size:13px;
  font-weight:980;
  margin-bottom:6px;
  position:relative;
  z-index:1;
}
.side small{
  display:block;
  font-size:11px;
  color:var(--muted2);
  line-height:1.8;
  position:relative;
  z-index:1;
}
.sideLabel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(110,139,255,.18);
  background: rgba(245,247,255,.94);
  color:#334155;
  font-size:11px;
  font-weight:980;
  margin-bottom:10px;
  position:relative;
  z-index:1;
}
.sideLabel::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  box-shadow: 0 0 0 4px rgba(110,139,255,.12);
}

.kvs{ margin-top:10px; display:grid; gap:8px; position:relative; z-index:1;}
.kv{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(248,250,252,.92);
  font-size:12px;
}
.kv span{ color: var(--muted2); }
.kv b{ font-size:12px; font-weight:980; }
.liveBoard,
.miniSection{
  margin-top:10px;
  border-radius: 18px;
  border:1px solid rgba(233,238,247,.94);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 24px rgba(20,40,90,.05);
  padding:12px;
  position:relative;
  z-index:1;
}
.liveBoard{
  background:
    radial-gradient(circle at 0 0, rgba(255,122,194,.12), transparent 58%),
    rgba(255,255,255,.8);
}
.liveBoard b,
.miniSection b{
  display:block;
  font-size:12px;
  font-weight:980;
  color:var(--ink);
}
.liveBoard small{
  margin-top:4px;
  line-height:1.7;
}
.liveRows{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.liveRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius: 14px;
  background: rgba(248,250,252,.9);
  border:1px solid rgba(233,238,247,.94);
  font-size:11px;
  color:var(--muted2);
}
.liveRow strong{
  font-size:12px;
  font-weight:980;
  color:var(--ink);
  max-width: 58%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
}
.miniSectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.miniSectionHead span{
  font-size:11px;
  font-weight:980;
  color:#334155;
}
.miniSectionHead small{
  font-size:10px;
  color:var(--muted2);
}
.platformList{
  display:grid;
  gap:8px;
}
.platformRow{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:8px;
  align-items:center;
  font-size:11px;
  color:var(--muted2);
}
.platformRow b{
  margin:0;
  font-size:11px;
  font-weight:980;
  color:var(--ink);
}
.platformTrack{
  height:9px;
  border-radius:999px;
  background: rgba(233,238,247,.92);
  overflow:hidden;
  position:relative;
}
.platformFill{
  display:block;
  height:100%;
  border-radius:inherit;
  background: linear-gradient(90deg, var(--pink2), var(--blue));
  box-shadow: 0 8px 14px rgba(110,139,255,.14);
}
.platformFill.w-0{width:0%;}
.platformFill.w-5{width:5%;}
.platformFill.w-10{width:10%;}
.platformFill.w-15{width:15%;}
.platformFill.w-20{width:20%;}
.platformFill.w-25{width:25%;}
.platformFill.w-30{width:30%;}
.platformFill.w-35{width:35%;}
.platformFill.w-40{width:40%;}
.platformFill.w-45{width:45%;}
.platformFill.w-50{width:50%;}
.platformFill.w-55{width:55%;}
.platformFill.w-60{width:60%;}
.platformFill.w-65{width:65%;}
.platformFill.w-70{width:70%;}
.platformFill.w-75{width:75%;}
.platformFill.w-80{width:80%;}
.platformFill.w-85{width:85%;}
.platformFill.w-90{width:90%;}
.platformFill.w-95{width:95%;}
.platformFill.w-100{width:100%;}
.tagCloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tagCloud .pill{
  padding:6px 10px;
  font-size:11px;
  background: rgba(248,250,252,.95);
}
.rankList{
  display:grid;
  gap:8px;
}
.rankItem{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius: 16px;
  background: rgba(248,250,252,.9);
  border:1px solid rgba(233,238,247,.94);
}
.rankNo{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(255,122,194,.18), rgba(110,139,255,.18));
  color:var(--ink);
  font-size:11px;
  font-weight:980;
  box-shadow: 0 10px 18px rgba(20,40,90,.05);
}
.rankMain{
  min-width:0;
}
.rankMain b{
  margin:0;
  font-size:12px;
  font-weight:980;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rankMain small{
  margin-top:4px;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rankMeta{
  font-size:10px;
  color:#9a3412;
  font-weight:980;
  white-space:nowrap;
}

/* 工具条 */
.toolRow{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.search{
  flex: 1 1 320px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: var(--radius-lg);
  border:1px solid var(--line);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 24px rgba(20,40,90,.06);
}
.search .mk{
  width:26px;height:26px;border-radius:12px;
  background: linear-gradient(145deg, rgba(255,255,255,1), rgba(255,231,245,.9));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--muted2);font-weight:980;
  flex:0 0 auto;
}
.search input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-size:16px;
  color:var(--ink);
}
.search:focus-within{ box-shadow: var(--focus); }

.chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.chip{
  padding:8px 10px;
  border-radius: var(--pill);
  border:1px solid var(--line);
  background: rgba(255,255,255,.82);
  font-size:11px;
  color: var(--muted);
  cursor:pointer;
  user-select:none;
  transition: transform var(--t), background var(--t), border-color var(--t);
}
.chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.92); }
.chip[aria-pressed="true"]{
  border-color: rgba(255,79,168,.35);
  box-shadow: 0 12px 24px rgba(255,79,168,.10);
  color: var(--ink);
}
.counter{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius: var(--pill);
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
  font-size:11px;
  color: var(--muted2);
  white-space:nowrap;
}

.grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  scroll-margin-top: 88px;
}
@media (max-width: 960px){ .grid{grid-template-columns:1fr;} }

.card{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-xl);
  border:1px solid var(--line);
  background: rgba(255,255,255,.90);
  box-shadow: 0 18px 40px rgba(20,40,90,.10);
  padding:12px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  cursor: pointer;
  isolation:isolate;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,79,168,.12), transparent 58%),
    radial-gradient(circle at 88% 78%, rgba(110,139,255,.12), transparent 58%);
  pointer-events:none;
  opacity:.95;
}
.card::after{
  content:"";
  position:absolute;
  inset:-35% auto auto -45%;
  width:55%;
  height:160%;
  transform: rotate(16deg) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  pointer-events:none;
  opacity:0;
  transition: transform .7s var(--ease), opacity .28s var(--ease);
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(20,40,90,.14);
  border-color: rgba(255,79,168,.16);
}
.card:hover::after{
  opacity:1;
  transform: rotate(16deg) translateX(220%);
}
.motion-ready .card{
  opacity:0;
  transform: translateY(18px) scale(.985);
  transition:
    transform .48s var(--ease),
    opacity .48s var(--ease),
    box-shadow var(--t),
    border-color var(--t);
  transition-delay: var(--delay, 0s);
}
.delay-0{--delay:0s;}
.delay-1{--delay:.04s;}
.delay-2{--delay:.08s;}
.delay-3{--delay:.12s;}
.delay-4{--delay:.16s;}
.delay-5{--delay:.20s;}
.delay-6{--delay:.24s;}
.delay-7{--delay:.28s;}
.delay-8{--delay:.32s;}
.delay-9{--delay:.36s;}
.delay-10{--delay:.40s;}
.delay-11{--delay:.44s;}
.delay-12{--delay:.48s;}
.delay-13{--delay:.52s;}
.delay-14{--delay:.56s;}
.motion-ready .card.is-revealed{
  opacity:1;
  transform: translateY(0) scale(1);
}
.card.is-active{
  border-color: rgba(255,79,168,.34);
  box-shadow: 0 28px 62px rgba(255,79,168,.18);
  transform: translateY(-3px) scale(1.01);
}
.card.is-active::before{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,79,168,.18), transparent 58%),
    radial-gradient(circle at 88% 78%, rgba(110,139,255,.16), transparent 58%);
}
.card.is-active .wave{
  opacity:1;
  filter:saturate(1.15);
}
.card[data-platform="抖音"] .ctop .pill{
  background: rgba(238,250,255,.94);
  color:#155e75;
  border-color: rgba(34,211,238,.18);
}
.card[data-platform="快手"] .ctop .pill{
  background: rgba(255,247,237,.94);
  color:#9a3412;
  border-color: rgba(251,146,60,.22);
}
.card[data-platform="其他"] .ctop .pill{
  background: rgba(241,245,249,.94);
  color:#334155;
  border-color: rgba(148,163,184,.24);
}
.card[data-hasaudio="0"] .wave,
.card[data-playable="0"] .wave{
  opacity:.42;
  filter:saturate(.72);
}
.card[data-playable="0"] .aPlay{
  color:#7c2d12;
  background: rgba(255,247,237,.94);
  border:1px solid rgba(251,146,60,.28);
  box-shadow:none;
}

.ctop{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.ttl{ display:flex; align-items:center; gap:10px; min-width:0; }
.avCircle, .avCirclePh{
  width:34px;height:34px;
  border-radius:999px;
  flex:0 0 auto;
  border:1px solid rgba(233,238,247,.95);
  box-shadow: 0 10px 18px rgba(20,40,90,.08);
  background: rgba(255,255,255,.88);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.avCircle{ object-fit:cover; display:block; }
.avCirclePh{
  font-size:12px;
  font-weight:980;
  color: rgba(255,255,255,.95);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),
    linear-gradient(135deg,#60a5fa,#8b5cf6);
}
.avCirclePh.tone-0,.pArtPh.tone-0,.mArtPh.tone-0{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#fb7185,#8b5cf6);}
.avCirclePh.tone-1,.pArtPh.tone-1,.mArtPh.tone-1{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#60a5fa,#14b8a6);}
.avCirclePh.tone-2,.pArtPh.tone-2,.mArtPh.tone-2{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#f472b6,#38bdf8);}
.avCirclePh.tone-3,.pArtPh.tone-3,.mArtPh.tone-3{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#a78bfa,#22c55e);}
.avCirclePh.tone-4,.pArtPh.tone-4,.mArtPh.tone-4{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#06b6d4,#6366f1);}
.avCirclePh.tone-5,.pArtPh.tone-5,.mArtPh.tone-5{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#f97316,#ec4899);}
.avCirclePh.tone-6,.pArtPh.tone-6,.mArtPh.tone-6{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#10b981,#3b82f6);}
.avCirclePh.tone-7,.pArtPh.tone-7,.mArtPh.tone-7{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#c084fc,#f43f5e);}
.avCirclePh.tone-8,.pArtPh.tone-8,.mArtPh.tone-8{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#2dd4bf,#818cf8);}
.avCirclePh.tone-9,.pArtPh.tone-9,.mArtPh.tone-9{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#e879f9,#0ea5e9);}
.avCirclePh.tone-10,.pArtPh.tone-10,.mArtPh.tone-10{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#34d399,#a855f7);}
.avCirclePh.tone-11,.pArtPh.tone-11,.mArtPh.tone-11{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 46%),linear-gradient(135deg,#fb7185,#0f766e);}

.tmain{ min-width:0; }
.tmain b{
  display:block;
  font-size:13px;
  font-weight:980;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tmain small{
  display:block;
  margin-top:4px;
  font-size:11px;
  color: var(--muted2);
  line-height:1.55;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pill{
  display:inline-flex; align-items:center;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(248,250,252,.92);
  font-size:10px;
  color: var(--muted);
  white-space:nowrap;
  position:relative;
  z-index:1;
  flex:0 0 auto;
}

/* 动态波形（轻量） */
.wave{
  position:relative; z-index:1;
  margin-top:10px;
  height:10px;
  display:flex;
  gap:3px;
  opacity:.85;
}
.bar{
  width:3px; height:10px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,79,168,.55), rgba(110,139,255,.55));
  animation: updown 1.2s var(--ease) infinite;
  transform-origin: bottom;
}
.bar:nth-child(2){animation-delay:.08s}
.bar:nth-child(3){animation-delay:.16s}
.bar:nth-child(4){animation-delay:.24s}
.bar:nth-child(5){animation-delay:.32s}
.bar:nth-child(6){animation-delay:.40s}
@keyframes updown{
  0%{transform:scaleY(.35); opacity:.55}
  50%{transform:scaleY(1); opacity:1}
  100%{transform:scaleY(.35); opacity:.55}
}

.metaRow{ position:relative; z-index:1; margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.actions{ position:relative; z-index:1; margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;}

.aBtn{
  border:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 12px;
  border-radius: var(--pill);
  font-size:12px;
  font-weight:980;
  min-height:38px;
  transition: transform var(--t), filter var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
  white-space:nowrap;
}
.aPlay{
  color:#fff;
  background: linear-gradient(135deg, var(--pink2), var(--pink));
  box-shadow: 0 12px 22px rgba(255,79,168,.24);
}
.aLink{
  background: rgba(255,255,255,.86);
  border:1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 10px 18px rgba(20,40,90,.06);
}
.aReference{
  background:rgba(238,242,255,.94);
  border:1px solid rgba(110,139,255,.24);
  color:#4338ca;
  box-shadow:0 10px 18px rgba(79,70,229,.08);
}
.aBtn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.aBtn:active{ transform: translateY(0); }

.aBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* ✅ 热度：更慢更稳 */
.hotBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(255, 106, 0, .18);
  background: linear-gradient(135deg, rgba(255, 245, 233, .92), rgba(255, 244, 251, .90));
  box-shadow: 0 10px 18px rgba(255, 106, 0, .10);
  position:relative;
  overflow:hidden;
}
.hotBadge::before{
  content:"";
  position:absolute;
  inset:-20px;
  background:
    radial-gradient(circle at 20% 70%, rgba(255, 122, 0, .14), transparent 60%),
    radial-gradient(circle at 78% 30%, rgba(255, 79, 168, .12), transparent 62%);
  opacity:.9;
  pointer-events:none;
  animation: hotGlow 2.40s var(--ease) infinite;
}
@keyframes hotGlow{
  0%{opacity:.48; transform:scale(.995);}
  50%{opacity:.78; transform:scale(1.01);}
  100%{opacity:.48; transform:scale(.995);}
}
.hotIcon{
  width:18px;height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  font-size:16px;
  line-height:1;
  filter: drop-shadow(0 8px 10px rgba(255,106,0,.18));
  transform-origin: 50% 82%;
  animation: flame 2.05s var(--ease) infinite;
}
@keyframes flame{
  0%   { transform: translateY(0) rotate(-1deg) scale(1); }
  35%  { transform: translateY(-0.6px) rotate(1deg)  scale(1.03); }
  70%  { transform: translateY(0) rotate(-0.5deg) scale(1.015); }
  100% { transform: translateY(0) rotate(-1deg) scale(1); }
}
.hotText{
  position:relative;
  z-index:1;
  font-size:10px;
  font-weight:980;
  color:#7c2d12;
  white-space:nowrap;
}
.hotNum{ font-weight:990; letter-spacing:.2px; color:#9a3412; }

.empty{
  margin-top:12px;
  background: rgba(255,255,255,.90);
  border:1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding:16px;
}
.empty b{display:block;font-size:14px;font-weight:980;margin-bottom:6px;}
.empty p{font-size:12px;color:var(--muted);line-height:1.9;}
.empty .row{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;}

.footerCard{
  margin-top:14px;
  background: rgba(255,255,255,.90);
  border:1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding:14px;
}
.footerCard b{ display:block; font-size:13px; font-weight:980; margin-bottom:8px; }
.footerCard p{ font-size:12px; color: var(--muted); line-height:1.95; margin:6px 0; }
.footerCard .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  color: var(--muted2);
  font-size:11px;
  line-height:1.85;
  word-break: break-word;
}

/* 播放器底栏 */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px 12px calc(10px + var(--safeBottom));
  background: rgba(255,255,255,.90);
  border-top:1px solid var(--line);
  backdrop-filter: blur(16px);
  box-shadow: 0 -12px 26px rgba(20,40,90,.10);
}
.player{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.pLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex: 1 1 360px;
}
.pArt, .pArtPh{
  width:44px;height:44px;
  border-radius: 16px;
  border:1px solid rgba(233,238,247,.95);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 18px rgba(20,40,90,.08);
  flex:0 0 auto;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pArt{ object-fit:cover; display:block; }
#pArtWrap.is-clickable{cursor:pointer;}
.pArtPh{
  font-size:13px;
  font-weight:980;
  color: rgba(255,255,255,.95);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.38), transparent 46%),
    linear-gradient(135deg,#60a5fa,#8b5cf6);
}
.pInfo{ min-width:0; }
.pInfo b{
  display:block;
  font-size:12px;
  font-weight:980;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 520px;
}
.pInfo small{
  display:block;
  margin-top:3px;
  font-size:11px;
  color: var(--muted2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 520px;
}
.pBtns{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.mini{
  border:1px solid var(--line);
  background: rgba(255,255,255,.88);
  padding:8px 10px;
  border-radius: var(--pill);
  font-size:12px;
  font-weight:980;
  cursor:pointer;
  transition: transform var(--t), filter var(--t), box-shadow var(--t);
}
.mini:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.mini:focus{ outline:none; box-shadow: var(--focus); }
audio{
  width: min(560px, 100%);
  outline:none;
  border-radius: 14px;
}

/* ✅ 播放器上方投稿入口（只加这一行） */
.dockSubmit{
  max-width:1120px;
  margin:6px auto 0;
  padding:0 6px;
  text-align:center;
  font-size:11px;
  line-height:1.6;
}
.dockSubmit a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  font-weight:980;
  color: var(--pink);
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,79,168,.18);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 18px rgba(255,79,168,.08);
  transition: transform var(--t), filter var(--t);
}
.dockSubmit a:hover{ transform: translateY(-1px); filter: brightness(1.02); }

/* ✅ 底栏提示：居中（你说“下面那个窗口说明可以，但要居中”） */
.hint{
  max-width:1120px;
  margin:6px auto 0;
  padding:0 6px;
  font-size:10px;
  color: var(--muted2);
  line-height:1.65;
  text-align:center;
}

/* 体验层：不提供下载入口 + 不显示右键菜单（不等于绝对防下载） */
body{ -webkit-user-select:none; user-select:none; }
input, textarea { -webkit-user-select:text; user-select:text; }

/* 弹窗 */
.modalMask{
  position:fixed; inset:0;
  background: rgba(10,14,25,.42);
  backdrop-filter: blur(10px);
  z-index:60;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.modalMask.is-open{ display:flex; }
body.modal-open{ overflow:hidden; }
.modal{
  width: min(1520px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(233,238,247,1);
  box-shadow: 0 28px 80px rgba(20,40,90,.22);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  transform: translateY(10px) scale(.99);
  opacity: 0;
  animation: modalIn .22s var(--ease) forwards;
}
@keyframes modalIn{ to{ transform: translateY(0) scale(1); opacity: 1; } }
.modalHead{
  position:sticky;
  top:0;
  z-index:4;
  padding:12px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  background: linear-gradient(135deg, rgba(238,242,255,.95), rgba(254,243,247,.92));
  border-bottom:1px solid rgba(233,238,247,1);
}
.mHeadLeft{ display:flex; align-items:center; gap:12px; min-width:0; }
.mArt, .mArtPh{
  width:56px;height:56px;
  border-radius: 18px;
  border:1px solid rgba(233,238,247,.95);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 18px rgba(20,40,90,.08);
  flex:0 0 auto;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mArt{ object-fit:cover; display:block; }
.mArtPh{
  font-size:14px;
  font-weight:980;
  color: rgba(255,255,255,.95);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.38), transparent 46%),
    linear-gradient(135deg,#60a5fa,#8b5cf6);
}
.mTitle{ min-width:0; }
.mTitle b{
  display:block;
  font-size:14px;
  font-weight:980;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 700px;
}
.mTitle small{
  display:block;
  margin-top:4px;
  font-size:11px;
  color: var(--muted2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 700px;
}
.mClose{
  border:1px solid rgba(233,238,247,1);
  background: rgba(255,255,255,.88);
  padding:8px 12px;
  border-radius: 999px;
  font-size:12px;
  font-weight:980;
  cursor:pointer;
  transition: transform var(--t), filter var(--t), box-shadow var(--t);
  white-space:nowrap;
}
.mClose:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.mClose:active{ transform: translateY(0); }

.modalBody{
  padding:14px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:12px;
}
@media (max-width: 960px){ .modalBody{grid-template-columns:1fr;} }

.mCard{
  border-radius: 22px;
  border:1px solid rgba(233,238,247,1);
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 38px rgba(20,40,90,.10);
  padding:12px;
  position:relative;
  overflow:hidden;
}
.mCard::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,79,168,.10), transparent 58%),
    radial-gradient(circle at 88% 78%, rgba(110,139,255,.10), transparent 58%);
  pointer-events:none;
  opacity:.95;
}
.mCard > *{ position:relative; z-index:1; }

.mRow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mRow + .mRow{ margin-top:10px; }
.mPill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(233,238,247,1);
  background: rgba(248,250,252,.92);
  font-size:11px;
  color: var(--muted);
  white-space:nowrap;
  max-width: 100%;
}
.mPill strong{ color: var(--ink); font-weight:980; }
.mHint{
  font-size:11px;
  color: var(--muted2);
  line-height:1.8;
  margin-top:10px;
}

.mPlayer{ display:flex; flex-direction:column; gap:10px; }
.mpTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.mpTop b{ font-size:13px; font-weight:980; display:block; margin-bottom:4px; }
.mpTop small{ font-size:11px; color: var(--muted2); line-height:1.7; display:block; }
.mpBtns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.mpBtn{
  border:1px solid rgba(233,238,247,1);
  background: rgba(255,255,255,.90);
  border-radius:999px;
  padding:10px 12px;
  font-size:12px;
  font-weight:980;
  cursor:pointer;
  transition: transform var(--t), filter var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
  white-space:nowrap;
  min-height:38px;
}
.mpBtn.primary{
  border-color: rgba(255,79,168,.22);
  background: linear-gradient(135deg, rgba(255,122,194,.92), rgba(255,79,168,.92));
  color:#fff;
  box-shadow: 0 14px 28px rgba(255,79,168,.22);
}
.mpBtn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.mpBtn:active{ transform: translateY(0); }
.mpBtn:focus{ outline:none; box-shadow: var(--focus); }

.mpBar{
  border:1px solid rgba(233,238,247,1);
  background: rgba(248,250,252,.92);
  border-radius: 18px;
  padding:10px 12px;
}
.mpRange{ width:100%; accent-color: var(--pink); cursor:pointer; }
.mpTime{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; font-size:10px; color: var(--muted2); }
.mpWave{ display:flex; gap:3px; height:12px; align-items:flex-end; margin-top:8px; opacity:.9; }
.mpWave span{
  width:3px; height:10px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,79,168,.55), rgba(110,139,255,.55));
  transform-origin: bottom;
  animation: mpUp 1.15s var(--ease) infinite;
}
.mpWave span:nth-child(2){animation-delay:.08s}
.mpWave span:nth-child(3){animation-delay:.16s}
.mpWave span:nth-child(4){animation-delay:.24s}
.mpWave span:nth-child(5){animation-delay:.32s}
.mpWave span:nth-child(6){animation-delay:.40s}
.mpWave span:nth-child(7){animation-delay:.48s}
.mpWave span:nth-child(8){animation-delay:.56s}
@keyframes mpUp{
  0%{transform:scaleY(.35); opacity:.55}
  50%{transform:scaleY(1); opacity:1}
  100%{transform:scaleY(.35); opacity:.55}
}

.mActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
}
.mLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(233,238,247,1);
  background: rgba(255,255,255,.90);
  font-size:12px;
  font-weight:980;
  color: var(--ink);
  text-decoration:none;
  transition: transform var(--t), filter var(--t), box-shadow var(--t);
  white-space:nowrap;
}
.mLink:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.mLink.primary{
  color:#fff;
  border-color: rgba(255,79,168,.22);
  background: linear-gradient(135deg, rgba(255,122,194,.92), rgba(255,79,168,.92));
  box-shadow: 0 14px 28px rgba(255,79,168,.22);
}

.referencePanel{
  margin:0 14px 14px; padding:14px; border-radius:22px;
  border:1px solid rgba(233,238,247,1); background:rgba(248,250,252,.96);
  box-shadow:0 14px 38px rgba(20,40,90,.08);
}
.referenceHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.referenceHead b{display:block;font-size:14px;font-weight:980;}
.referenceHead small{display:block;margin-top:4px;color:var(--muted2);font-size:11px;line-height:1.6;}
.referenceState{margin:12px 0 0;color:var(--muted2);font-size:12px;line-height:1.7;}
.referenceGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:8px;margin-top:12px;}
.referenceCard{display:flex;min-width:0;height:100%;padding:8px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;flex-direction:column;}
.referenceAuthor{display:flex;align-items:center;gap:7px;min-width:0;}
.referenceAuthor img{width:32px;height:32px;flex:0 0 auto;border-radius:50%;object-fit:cover;background:#f1f5f9;}
.referenceAuthor div{min-width:0;}
.referenceAuthor b,.referenceAuthor small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.referenceAuthor b{font-size:11px;}.referenceAuthor small{margin-top:2px;font-size:9px;color:var(--muted2);}
.referenceTitle{display:-webkit-box;min-height:34px;margin:8px 0 6px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:10px;line-height:1.65;color:var(--ink);}
.referenceVideoWrap{width:100%;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#f1f5f9;}
.referenceVideoWrap video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#f1f5f9;}
.referenceVideoWrap video:fullscreen,
.referenceVideoWrap video:-webkit-full-screen{object-fit:contain;background:#000;}
.referenceVideoError{margin:0;padding:18px 12px;color:#b45309;background:#fff7ed;font-size:11px;line-height:1.7;}
.referenceFoot{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:auto;padding-top:7px;font-size:9px;color:var(--muted2);}
.referenceFoot a{display:inline-flex;padding:5px 7px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-weight:900;text-decoration:none;white-space:nowrap;}

@media (max-width: 1280px){
  .modal{width:min(1120px,calc(100vw - 24px));}
  .referenceGrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ===========================
   ✅ 移动端升级：App 平台级体验
   =========================== */
@media (max-width: 760px){
  .nav{ padding:10px 14px; }
  .brand img{ height:34px; }
  .btxt b{ font-size:14px; }
  .btxt small{ font-size:10px; }
  .nav-actions{ gap:8px; }
  .accountBadge{padding:5px 9px;min-height:36px;}
  .btn{ min-height:36px; padding:8px 12px; font-size:12px; }

  main{ padding:12px 12px calc(280px + var(--safeBottom)); }

  .hero{ gap:12px; margin-top:8px; }
  .hero-card{ padding:14px; border-radius: 22px; }
  .h1{ font-size:18px; }
  .desc{ font-size:12px; line-height:1.95; }
  .heroStats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroStat{ padding:10px; }
  .heroStat strong{ font-size:16px; }
  .heroActions{ flex-direction:column; align-items:stretch; }
  .heroLink,.heroMini{
    width:100%;
    justify-content:center;
  }
  .heroMini{
    white-space:normal;
    text-align:center;
  }

  .side{ padding:12px; border-radius: 22px; }
  .kvs{
    display:flex;
    gap:10px;
    overflow:auto;
    padding-bottom:2px;
    scroll-snap-type: x mandatory;
  }
  .kv{ flex: 0 0 auto; min-width: 172px; scroll-snap-align: start; }
  .liveBoard,
  .miniSection{ padding:10px; }
  .liveRow strong{ max-width: 52%; }
  .platformRow{ grid-template-columns: 52px 1fr 34px; }
  .rankItem{ padding:9px; }

  .toolRow{
    position: sticky;
    top: calc(60px + var(--safeTop));
    z-index: 20;
    padding: 10px 0 6px;
    background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.60));
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(233,238,247,.55);
    margin-top: 12px;
  }
  .search{
    flex: 1 1 100%;
    border-radius: 20px;
    padding: 12px 12px;
  }
  .search .mk{ width:28px; height:28px; border-radius: 14px; }
  .search input{ font-size:16px; }

  .chips{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow:auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .chip{ flex:0 0 auto; padding:9px 12px; font-size:12px; }
  .counter{ flex:0 0 auto; }

  .grid{ gap:10px; }
  .card{ padding:14px; border-radius: 22px; }
  .avCircle, .avCirclePh{ width:38px; height:38px; }
  .tmain b{ font-size:14px; }
  .tmain small{ font-size:12px; }
  .pill{ font-size:11px; padding:4px 10px; }
  .actions{ gap:10px; margin-top:12px; }
  .aBtn{ min-height:42px; padding: 10px 12px; font-size:13px; }
  .aPlay{ flex: 1 1 auto; }
  .aLink{ flex: 1 1 auto; }
  .aReference{ flex: 1 1 auto; }

  .dock{
    padding:12px 12px calc(12px + var(--safeBottom));
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }
  audio{ width: 100%; }
  .pBtns{ width:100%; justify-content:space-between; }
  .mini{ flex: 1 1 0; text-align:center; }

  .modalMask{ align-items:flex-end; padding: 0; overflow:hidden; }
  .modal{
    width: 100%;
    border-radius: 22px 22px 0 0;
    max-height: calc(92vh - var(--safeTop));
    overflow:auto;
  }
  .modalBody{ padding:12px; }
  .referencePanel{margin:0 12px 12px;padding:12px;}
  .referenceGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width: 420px){
  .nav{ padding:9px 10px; }
  .brand{ gap:8px; }
  .brand img{ height:30px; }
  .btxt b{ max-width:176px; }
  .nav-actions .btn-ghost{ display:none; }
  .accountBadge b{max-width:84px;}
  main{ padding:10px 10px calc(300px + var(--safeBottom)); }
  .hero-card,.side,.card,.footerCard{ border-radius:18px; }
  .heroStats{ gap:8px; }
  .heroStat{ padding:9px; border-radius:14px; }
  .heroStat strong{ font-size:15px; }
  .toolRow{ top:calc(54px + var(--safeTop)); }
  .ctop{ gap:8px; }
  .ttl{ gap:8px; }
  .actions{ flex-direction:column; align-items:stretch; }
  .referenceGrid{grid-template-columns:1fr;}
  .aBtn,.aLink{ width:100%; }
  .dock{ padding:10px 10px calc(10px + var(--safeBottom)); }
  .pLeft{ flex-basis:100%; }
  .pArt,.pArtPh{ width:40px; height:40px; border-radius:14px; }
  .pBtns{ gap:8px; }
  .mini{ min-height:40px; padding:8px; }
  .hint{ font-size:10px; }
  .modalHead{ padding:10px; }
  .mArt,.mArtPh{ width:48px; height:48px; border-radius:16px; }
  .mpTop{ flex-direction:column; }
  .mpBtns{ width:100%; justify-content:stretch; }
  .mpBtn{ flex:1 1 0; padding:9px 8px; }
  .referenceHead{align-items:center;}
  .referenceHead small{max-width:220px;}
}

@media (prefers-reduced-motion: reduce){
  .bar,.mpWave span{animation:none!important;}
  .hotIcon{animation:none!important;}
  .hotBadge::before{animation:none!important;}
  .fx-spotlight{display:none!important;}
  .btn,.aBtn,.card,.chip,.mini,.mClose,.mpBtn,.mLink{transition:none!important;}
  .motion-ready .card{opacity:1!important;transform:none!important;}
}

@media (pointer: coarse){
  .fx-spotlight{display:none;}
}

@media (max-width: 640px){
  body, body *{
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
  }
}