:root{
  /* 文字随档位缩放；小档保持原有尺寸，控件与页面宽度独立响应。 */
  font-size:16px;
  --bg:#f5f7fb;
  --bg2:#edf1f8;
  --panel:rgba(255,255,255,.76);
  --panel-strong:rgba(255,255,255,.93);
  --panel-soft:rgba(255,255,255,.56);
  --text:#161a22;
  --muted:#68707d;
  --faint:#96a0af;
  --line:rgba(19,27,44,.08);
  --line-strong:rgba(19,27,44,.15);
  --shadow:0 26px 70px rgba(29,39,65,.10);
  --shadow-soft:0 12px 34px rgba(29,39,65,.08);
  --accent:#6b5cff;
  --accent2:#00bfff;
  --accent3:#ff49c2;
  --green:#32d17c;
  --yellow:#ffbf47;
  --red:#ff5d73;
  --blue:#49a4ff;
}
html[data-font-size="standard"]{font-size:20px}
html[data-font-size="large"]{font-size:24px}
.font-size-control{position:relative;flex-shrink:0}
.font-size-control summary{list-style:none;font-size:.875rem;font-weight:700;user-select:none}
.font-size-control summary::-webkit-details-marker{display:none}
.font-size-control summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.font-size-options{
  position:absolute;right:0;top:calc(100% + 10px);z-index:80;
  width:max-content;min-width:150px;margin:0;padding:12px;border-radius:14px;
  color:var(--text);background:var(--panel-strong);border:1px solid var(--line-strong);
  box-shadow:var(--shadow);backdrop-filter:blur(24px);font-size:.875rem;
}
.font-size-options legend{float:left;width:100%;padding:0 8px 8px;color:var(--muted);font-size:.75rem}
.font-size-options label{display:flex;align-items:center;gap:10px;clear:both;min-height:44px;padding:6px 8px;cursor:pointer;border-radius:8px}
.font-size-options label:hover,.font-size-options label:focus-within{background:var(--panel-soft)}
.font-size-options input{accent-color:var(--accent);width:16px;height:16px;margin:0}
@media(max-width:380px){.topbar .brand-copy{display:none}}
@media(min-width:381px) and (max-width:440px){html[data-font-size="large"] .topbar .brand-copy{display:none}}
html[data-theme="dark"]{
  --bg:#060912;
  --bg2:#0a1020;
  --panel:rgba(14,18,30,.72);
  --panel-strong:rgba(18,23,36,.94);
  --panel-soft:rgba(15,19,31,.52);
  --text:#f5f7fb;
  --muted:#a5adbb;
  --faint:#717888;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);
  --shadow:0 28px 90px rgba(0,0,0,.40);
  --shadow-soft:0 14px 40px rgba(0,0,0,.24);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
.strm-sync-column{display:flex;flex-direction:column;gap:14px;min-width:0}
.strm-sync-failure-scroll{width:100%;min-width:0;height:280px;max-height:280px;grid-auto-rows:max-content;align-content:start;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:auto}
.strm-sync-failure-scroll .list-row{width:100%;min-width:0}
.strm-sync-failure-scroll .list-main{flex:1;min-width:0;overflow-wrap:anywhere;white-space:normal}
.strm-sync-failure-scroll .btn,.strm-sync-failure-scroll .status-dot{flex-shrink:0}
body{
  margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(900px 620px at 4% -8%,rgba(107,92,255,.22),transparent 60%),
    radial-gradient(760px 560px at 98% 8%,rgba(0,191,255,.14),transparent 62%),
    radial-gradient(820px 560px at 70% 102%,rgba(255,73,194,.11),transparent 66%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  transition:background .45s ease,color .3s ease;
}
body::before{
  content:"";position:fixed;inset:-15%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(circle at 20% 24%,rgba(107,92,255,.18),transparent 20%),
    radial-gradient(circle at 78% 28%,rgba(0,191,255,.12),transparent 22%),
    radial-gradient(circle at 56% 80%,rgba(255,73,194,.10),transparent 22%);
  filter:blur(58px);
  animation:aurora 16s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 76%);
}
@keyframes aurora{
  0%{transform:translate3d(-2%,0,0) scale(1)}
  50%{transform:translate3d(2%,-1%,0) scale(1.04)}
  100%{transform:translate3d(0,2%,0) scale(1.02)}
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0}
.shell{width:min(1450px,calc(100% - 30px));margin:auto;padding:14px 0 46px}

/* 顶部导航的布局、链接与选中状态。 */
.topbar{
  position:sticky;top:12px;z-index:70;height:72px;padding:0 16px 0 18px;
  display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(200px,1fr);align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:22px;
  background:color-mix(in srgb,var(--panel) 90%,transparent);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  box-shadow:var(--shadow-soft);
}
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.logo{
  width:42px;height:42px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#7c62ff 0%,#597dff 44%,#00c5ff 100%);
  box-shadow:0 12px 30px rgba(93,98,255,.26),inset 0 1px 1px rgba(255,255,255,.55)
}
.logo::before{
  content:"";position:absolute;inset:8px;border-radius:10px;border:2px solid rgba(255,255,255,.88);
  transform:rotate(8deg)
}
.logo::after{
  content:"";position:absolute;width:12px;height:12px;border-radius:50%;right:7px;top:7px;background:#fff;
  box-shadow:-14px 14px 0 rgba(255,255,255,.5)
}
.brand-copy strong{display:block;font-size:0.875rem;letter-spacing:-.01em}
.brand-copy small{display:block;margin-top:3px;color:var(--muted);font-size:0.625rem}
.mainnav{
  justify-self:center;display:flex;align-items:center;gap:4px;padding:4px;border-radius:14px;
  background:var(--panel-soft);border:1px solid var(--line)
}
.mainnav a{
  border-radius:10px;padding:9px 14px;color:var(--muted);font-size:0.6875rem;font-weight:760;
  transition:.22s ease;white-space:nowrap
}
.mainnav a:hover{color:var(--text);background:rgba(127,127,127,.07)}
.mainnav a.active{
  color:var(--text);background:var(--panel-strong);
  box-shadow:0 5px 18px rgba(0,0,0,.07),inset 0 0 0 1px var(--line)
}
.top-actions{justify-self:end;display:flex;align-items:center;gap:8px}
.status-pill{
  height:38px;padding:0 12px;border-radius:12px;display:flex;align-items:center;gap:8px;
  background:var(--panel-soft);border:1px solid var(--line);font-size:0.625rem;color:var(--muted)
}
.status-pill i{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(50,209,124,.12),0 0 14px rgba(50,209,124,.45);
  animation:statusPulse 2s ease-in-out infinite
}
@keyframes statusPulse{50%{transform:scale(.82);opacity:.7}}
.icon-btn{
  width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);
  display:grid;place-items:center;cursor:pointer;transition:.22s ease
}
.icon-btn:hover{transform:translateY(-2px);background:var(--panel-strong);border-color:var(--line-strong)}
.github-btn{color:var(--muted);text-decoration:none}
.github-btn svg{width:18px;height:18px;display:block;fill:currentColor}
.github-btn:hover{color:var(--text)}
.github-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mobile-title{display:none;color:var(--muted);font-size:0.625rem;font-weight:700}

/* 首页标题区域与概览信息。 */
main{padding-top:18px}
.hero{
  position:relative;overflow:hidden;min-height:300px;padding:38px;
  display:grid;grid-template-columns:1.18fr .82fr;gap:28px;align-items:center;
  border:1px solid var(--line);border-radius:30px;
  background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 46%),var(--panel);
  backdrop-filter:blur(24px);box-shadow:var(--shadow)
}
.hero.compact{min-height:245px;padding:32px}
.hero::before{
  content:"";position:absolute;width:640px;height:640px;border-radius:50%;right:-230px;top:-290px;
  background:
    radial-gradient(circle at 35% 35%,rgba(255,255,255,.42),rgba(0,191,255,.18) 20%,rgba(107,92,255,.20) 40%,rgba(255,73,194,.12) 58%,transparent 68%);
  filter:blur(2px);animation:heroOrb 11s ease-in-out infinite
}
.hero::after{
  content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:170px;bottom:-190px;
  background:radial-gradient(circle,rgba(107,92,255,.20),transparent 68%);filter:blur(10px)
}
@keyframes heroOrb{50%{transform:translate(-24px,24px) scale(1.05) rotate(8deg)}}
.hero-copy,.hero-side{position:relative;z-index:2}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:var(--panel-soft);border:1px solid var(--line);color:var(--muted);font-size:0.625rem;font-weight:800
}
.hero-tag i{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 12px rgba(107,92,255,.75)}
.hero h1{
  margin:16px 0 0;max-width:780px;font-size:clamp(2.5rem,4.9vw,4.25rem);
  line-height:.99;letter-spacing:-.055em;font-weight:830
}
.hero.compact h1{font-size:clamp(2.125rem,4.2vw,3.5rem)}
.gradient{
  background:linear-gradient(100deg,#8c76ff 0%,#00c5ff 48%,#ff5aca 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-copy>p{max-width:700px;margin:18px 0 0;color:var(--muted);font-size:0.8125rem;line-height:1.72}
.hero-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.chip{
  padding:9px 12px;border-radius:12px;background:var(--panel-soft);border:1px solid var(--line);
  font-size:0.625rem;color:var(--muted)
}
.hero-side{
  min-height:238px;border:1px solid var(--line);border-radius:25px;padding:22px;
  background:color-mix(in srgb,var(--panel-strong) 72%,transparent);
  box-shadow:var(--shadow-soft);overflow:hidden
}
.hero-side::before{
  content:"";position:absolute;left:-60px;top:-70px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,191,255,.24),transparent 70%);filter:blur(12px)
}
.live-head{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;color:var(--muted);font-size:0.625rem}
.wave{display:flex;align-items:flex-end;gap:3px;height:18px}
.wave i{width:3px;border-radius:999px;background:linear-gradient(to top,var(--accent),var(--accent2));animation:wave 1.3s ease-in-out infinite}
.wave i:nth-child(1){height:8px}.wave i:nth-child(2){height:14px;animation-delay:.1s}.wave i:nth-child(3){height:10px;animation-delay:.2s}.wave i:nth-child(4){height:17px;animation-delay:.3s}.wave i:nth-child(5){height:11px;animation-delay:.4s}
@keyframes wave{50%{transform:scaleY(.45);opacity:.65}}
.live-orb-wrap{display:grid;place-items:center;padding:18px 0 10px;position:relative;z-index:2}
.live-orb{
  width:96px;height:96px;border-radius:50%;position:relative;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.82),rgba(0,191,255,.62) 18%,rgba(107,92,255,.78) 48%,rgba(255,73,194,.42) 72%,rgba(255,255,255,.05) 100%);
  box-shadow:0 18px 46px rgba(79,92,255,.28),inset -14px -18px 32px rgba(14,20,50,.28);
  animation:float 5s ease-in-out infinite
}
.live-orb::before,.live-orb::after{
  content:"";position:absolute;border-radius:50%;inset:-12px;border:1px solid rgba(127,127,255,.22);
  animation:ring 3s ease-in-out infinite
}
.live-orb::after{inset:-24px;animation-delay:.8s;opacity:.5}
@keyframes float{50%{transform:translateY(-7px) rotate(6deg)}}
@keyframes ring{50%{transform:scale(1.06);opacity:.2}}
.live-title{text-align:center;position:relative;z-index:2}
.live-title strong{font-size:1.0625rem}.live-title p{margin:5px 0 0;color:var(--muted);font-size:0.625rem}

/* 页面分区和通用布局容器。 */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:34px 4px 13px}
.section-head h2{margin:0;font-size:1.4375rem;letter-spacing:-.035em}
.section-head p{margin:5px 0 0;color:var(--muted);font-size:0.6875rem}
.section-head>span{font-size:0.625rem;color:var(--faint)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.metric{
  min-height:112px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--panel);
  box-shadow:var(--shadow-soft);backdrop-filter:blur(24px);transition:.28s ease
}
.metric:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.metric span{display:block;color:var(--muted);font-size:0.625rem}
.metric strong{display:block;margin-top:7px;font-size:1.8125rem;letter-spacing:-.04em}
.metric p{margin:6px 0 0;color:var(--faint);font-size:0.5625rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stack{display:grid;gap:12px}

/* 卡片表面及指针聚光效果。 */
.card,.panel,.service-card,.action-card{
  position:relative;overflow:hidden;border:1px solid var(--line);background:var(--panel);
  box-shadow:var(--shadow-soft);backdrop-filter:blur(24px)
}
.card,.panel{border-radius:24px}
.card{padding:20px;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease}
.card::before,.service-card::before,.action-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 45%);
  transition:opacity .24s ease
}
.card:hover::before,.service-card:hover::before,.action-card:hover::before{opacity:1}
.card:hover,.service-card:hover,.action-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong)
}
.card h3,.panel h3{margin:0;font-size:0.9375rem;letter-spacing:-.02em}
.card p,.panel p{color:var(--muted);font-size:0.625rem;line-height:1.6}
.card-top,.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2
}
.panel-head{padding:18px 18px 14px}
.panel-head p{margin:5px 0 0}
.panel-body{padding:0 18px 18px}
.card-icon{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--panel-strong),var(--panel-soft));border:1px solid var(--line);
  font-size:0.75rem;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.06)
}
.live-state{display:flex;align-items:center;gap:6px;font-size:0.5625rem;color:var(--muted)}
.live-state i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(50,209,124,.5)}
.glow{position:absolute;width:220px;height:220px;border-radius:50%;right:-120px;bottom:-130px;filter:blur(10px);opacity:.55;z-index:0}
.glow.purple{background:radial-gradient(circle,rgba(107,92,255,.38),transparent 68%)}
.glow.blue{background:radial-gradient(circle,rgba(0,191,255,.32),transparent 68%)}
.glow.pink{background:radial-gradient(circle,rgba(255,73,194,.24),transparent 68%)}

/* 媒体服务入口布局。 */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.service-card{
  min-height:215px;padding:22px;border-radius:25px;transition:.3s ease
}
.service-card h3{margin:28px 0 7px;font-size:1.25rem}
.service-card p{margin:0;color:var(--muted);font-size:0.6875rem;line-height:1.65}
.service-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.service-meta span{padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel-soft);color:var(--muted);font-size:0.5625rem}
.arrow{position:absolute;right:20px;bottom:17px;color:var(--faint);font-size:1.375rem;transition:.25s}
.service-card:hover .arrow,.action-card:hover .arrow{transform:translateX(4px);color:var(--text)}

/* 首页概览卡片的网格布局。 */
.home-services{
  display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:12px;align-items:stretch
}
.home-services .strm-card{grid-row:span 2;min-height:390px}
.home-services .home-service{min-height:188px}
.big-number{margin-top:26px;font-size:3.125rem;letter-spacing:-.055em;font-weight:820;position:relative;z-index:2}
.big-number small{font-size:0.875rem;color:var(--muted);font-weight:700;margin-left:5px}
.mini-bars{position:absolute;left:20px;right:20px;bottom:22px;height:74px;display:flex;gap:7px;align-items:flex-end;opacity:.9}
.mini-bars i{flex:1;border-radius:8px 8px 4px 4px;background:linear-gradient(to top,rgba(107,92,255,.18),rgba(0,191,255,.86));animation:bars 2.7s ease-in-out infinite alternate}
.mini-bars i:nth-child(1){height:28%}.mini-bars i:nth-child(2){height:44%;animation-delay:.2s}.mini-bars i:nth-child(3){height:35%;animation-delay:.4s}.mini-bars i:nth-child(4){height:58%;animation-delay:.6s}.mini-bars i:nth-child(5){height:48%;animation-delay:.8s}.mini-bars i:nth-child(6){height:72%;animation-delay:1s}.mini-bars i:nth-child(7){height:60%;animation-delay:1.2s}
@keyframes bars{to{filter:brightness(1.18);transform:scaleY(.88)}}
.health-card{min-height:215px}
.health-layout{display:grid;grid-template-columns:1fr 120px;gap:11px;align-items:center;margin-top:15px;position:relative;z-index:2}
.health-list{display:grid;gap:8px}
.health-btn,.health-static{
  min-height:40px;padding:9px 11px;border:1px solid var(--line);border-radius:13px;background:var(--panel-soft);
  display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:0.5625rem;color:var(--text)
}
.health-btn{cursor:pointer;transition:.22s ease}
.health-btn:hover{transform:translateY(-1px);background:var(--panel-strong);border-color:var(--line-strong)}
.health-btn strong,.health-static strong{font-size:0.5625rem}
.health-btn span,.health-static span{color:var(--muted)}
.progress-ring{
  width:120px;height:120px;border-radius:50%;margin:auto;
  background:conic-gradient(var(--green) 0 90%,rgba(255,255,255,.10) 90% 100%);
  display:grid;place-items:center;position:relative;animation:spinIn 1.1s cubic-bezier(.2,.8,.2,1) both
}
.progress-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--panel-strong)}
.progress-ring div{position:relative;z-index:2;text-align:center}
.progress-ring strong{display:block;font-size:1.625rem;letter-spacing:-.05em}
.progress-ring span{font-size:0.5rem;color:var(--muted)}
@keyframes spinIn{from{transform:scale(.75) rotate(-80deg);opacity:0}to{transform:none;opacity:1}}
.status-panel{margin-top:12px}
.status-list{display:grid;gap:9px}
.status-row{
  min-height:58px;padding:11px 12px;border-radius:15px;background:var(--panel-soft);border:1px solid var(--line);
  display:flex;align-items:center;gap:10px
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(50,209,124,.45);flex:0 0 auto}
.status-copy{min-width:0}
.status-copy strong{display:block;font-size:0.625rem}
.status-copy span{display:block;margin-top:3px;color:var(--muted);font-size:0.5rem}
.status-value{margin-left:auto;color:var(--faint);font-size:0.5625rem;white-space:nowrap}

/* 最近活动列表样式。 */
.activity-grid{display:grid;grid-template-columns:1.42fr .58fr;gap:12px}
.activity-panel{min-height:252px;padding:20px;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:var(--shadow-soft)}
.activity-panel h3{margin:0;font-size:0.9375rem}.activity-panel>p{margin:4px 0 0;color:var(--muted);font-size:0.625rem}
.timeline{margin-top:18px;display:grid}
.event{display:grid;grid-template-columns:80px 18px 1fr;gap:10px;align-items:start;padding:10px 0}
.event time{font-size:0.5625rem;color:var(--faint);padding-top:3px}
.event-line{position:relative;height:100%}
.event-line i{display:block;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 12px rgba(107,92,255,.42)}
.event-line::after{content:"";position:absolute;width:1px;top:11px;bottom:-18px;left:3px;background:var(--line)}
.event:last-child .event-line::after{display:none}
.event-copy strong{display:block;font-size:0.625rem}.event-copy span{display:block;margin-top:3px;color:var(--muted);font-size:0.5625rem}

/* 页面内的标签切换控件。 */
.page-tabs{
  position:sticky;top:96px;z-index:45;margin-top:12px;padding:6px;display:flex;gap:6px;overflow:auto;
  border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--panel) 91%,transparent);
  backdrop-filter:blur(22px);box-shadow:var(--shadow-soft)
}
.page-tab{
  flex:0 0 auto;height:40px;padding:0 15px;border-radius:13px;background:transparent;color:var(--muted);
  font-size:0.6875rem;font-weight:760;white-space:nowrap;cursor:pointer
}
.page-tab:hover{color:var(--text);background:rgba(127,127,127,.07)}
.page-tab.active{background:var(--panel-strong);color:var(--text);box-shadow:0 5px 18px rgba(0,0,0,.06),inset 0 0 0 1px var(--line)}
.tab-panel{display:none;padding-top:26px}
.tab-panel.active{display:block;animation:panelIn .34s ease both}
/* 纵向功能面板沿用卡片网格的间距，避免独立设置面板边框相贴。 */
[data-tab-panel="emby"][data-panel-name="warmup"]>.panel+.panel{margin-top:12px}
.site-update-panels>.panel{margin-block:0}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 表单字段与交互控件。 */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{
  padding:12px 13px;border-radius:16px;background:var(--panel-soft);border:1px solid var(--line)
}
.field.full{grid-column:1/-1}
.field label{display:block;color:var(--muted);font-size:0.5625rem;margin-bottom:8px}
.field-help{display:block;margin-top:6px;color:var(--muted);font-size:0.625rem;font-weight:500;line-height:1.6;overflow-wrap:anywhere}
.field input,.field select,.field textarea{
  width:100%;border:0;outline:none;background:transparent;color:var(--text);font-size:0.6875rem;resize:vertical
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;background-size:4px 4px;background-repeat:no-repeat
}
.field select option{background:var(--panel-strong);color:var(--text)}
.switch-row{
  min-height:62px;padding:11px 13px;border:1px solid var(--line);border-radius:16px;background:var(--panel-soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.switch-copy strong{display:block;font-size:0.625rem}.switch-copy small{display:block;margin-top:3px;color:var(--muted);font-size:0.5rem}
.switch-btn{width:44px;height:24px;padding:2px;border-radius:999px;background:rgba(127,127,127,.25);cursor:pointer;transition:.25s}
.switch-btn::after{content:"";display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.18);transition:.25s}
.switch-btn.on{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.switch-btn.on::after{transform:translateX(20px)}
.button-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.btn{
  height:40px;padding:0 15px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft);
  font-size:0.6875rem;font-weight:700;cursor:pointer;transition:.22s ease
}
.btn:hover{transform:translateY(-1px);background:var(--panel-strong);border-color:var(--line-strong)}
.btn.primary{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 26px rgba(107,92,255,.25)}
.btn.danger{border-color:transparent;color:#fff;background:linear-gradient(135deg,#ff8b58,var(--red))}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.code-box{
  display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--line);border-radius:16px;background:var(--panel-soft)
}
.code-box code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:0.625rem}
.search-box{
  display:flex;gap:9px;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--panel-soft)
}
.search-box input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--text);font-size:0.6875rem}

/* 站点多选列表与选中反馈。 */
.site-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.site-box{
  padding:18px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 92%,transparent),color-mix(in srgb,var(--panel-soft) 72%,transparent));
  box-shadow:var(--shadow-soft);position:relative;overflow:hidden
}
.site-box::before{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-130px;top:-145px;
  background:radial-gradient(circle,rgba(107,92,255,.14),transparent 68%);pointer-events:none
}
.site-box h3{position:relative}.site-box>p{position:relative;margin:5px 0 14px;color:var(--muted);font-size:0.5625rem}
.site-options{display:grid;gap:9px;position:relative}
.site-option{
  position:relative;display:flex;align-items:center;gap:9px;min-height:54px;
  padding:11px 48px 11px 13px;border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--panel-soft) 80%,transparent);
  font-size:0.625rem;font-weight:650;cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease
}
.site-option:hover{transform:translateY(-1px);border-color:var(--line-strong);background:var(--panel-strong);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.site-option input{position:absolute;opacity:0;pointer-events:none}
.site-option::after{
  content:"";position:absolute;right:13px;top:50%;width:25px;height:25px;transform:translateY(-50%);
  border:1px solid var(--line-strong);border-radius:9px;background:color-mix(in srgb,var(--panel-strong) 78%,transparent);
  transition:.22s ease
}
.site-option::before{
  content:"✓";position:absolute;right:13px;top:50%;z-index:2;width:25px;height:25px;display:grid;place-items:center;
  transform:translateY(-50%) scale(.7);opacity:0;color:#fff;font-size:0.75rem;font-weight:900;transition:.22s cubic-bezier(.2,.8,.2,1)
}
.site-option:has(input:checked){
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line-strong));
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--panel-soft)),color-mix(in srgb,var(--accent2) 7%,var(--panel-soft)));
  box-shadow:0 10px 28px rgba(77,83,255,.09),inset 0 0 0 1px color-mix(in srgb,var(--accent) 13%,transparent)
}
.site-option:has(input:checked)::after{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 7px 18px rgba(77,83,255,.28)}
.site-option:has(input:checked)::before{opacity:1;transform:translateY(-50%) scale(1)}
.site-option small{margin-left:auto;color:var(--faint);font-size:0.5rem;font-weight:500}

/* 列表行和表格的通用样式。 */
.list{display:grid;gap:9px}
.list-row{
  min-height:58px;padding:11px 12px;border:1px solid var(--line);border-radius:15px;background:var(--panel-soft);
  display:flex;align-items:center;gap:10px
}
.list-main{min-width:0}.list-main strong{display:block;font-size:0.625rem}.list-main small{display:block;margin-top:3px;color:var(--muted);font-size:0.5rem}
.list-value{margin-left:auto;color:var(--faint);font-size:0.5625rem;white-space:nowrap}
.badge{padding:7px 9px;border:1px solid var(--line);border-radius:999px;font-size:0.5625rem;white-space:nowrap;background:var(--panel-soft)}
.badge.ok{color:var(--green)}.badge.wait{color:var(--yellow)}.badge.bad{color:var(--red)}.badge.info{color:var(--blue)}
.table{width:100%;border-collapse:separate;border-spacing:0 9px}
.table th,.table td{padding:12px 13px;font-size:0.625rem;text-align:left}
.table th{color:var(--muted)}
.table tbody tr{background:var(--panel-soft)}
.table tbody td:first-child{border-radius:13px 0 0 13px}.table tbody td:last-child{border-radius:0 13px 13px 0}

/* 账号列表与状态显示。 */
.account-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.account-card{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--panel-soft)}
.account-card h4{margin:0;font-size:0.8125rem}.account-card p{margin:6px 0;color:var(--muted);font-size:0.5625rem}
.account-card .button-row{margin-top:12px}

/* 下载任务的布局与状态。 */
.download-list{display:grid;gap:10px}
.download-item{padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--panel-soft)}
.download-head,.download-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.download-head strong{font-size:0.6875rem}.download-meta{margin:8px 0;color:var(--muted);font-size:0.5625rem}
.progress{height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2));animation:progressGlow 2.5s ease-in-out infinite alternate}
@keyframes progressGlow{to{filter:brightness(1.15)}}

/* 文件拖入和上传区域。 */
.dropzone{
  min-height:220px;border:1px dashed var(--line-strong);border-radius:22px;background:var(--panel-soft);
  display:grid;place-items:center;text-align:center;padding:26px
}
.drop-icon{
  width:58px;height:58px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:1.375rem;box-shadow:0 14px 30px rgba(107,92,255,.26)
}
.dropzone strong{font-size:0.875rem}.dropzone p{margin:7px 0;color:var(--muted);font-size:0.5625rem;line-height:1.6}

/* 播放诊断结果和报告区域。 */
.issue-card{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--panel-soft)}
.issue-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.issue-card h4{margin:0;font-size:0.75rem}.issue-card p{margin:6px 0 0;color:var(--muted);font-size:0.5625rem}
.direct-capability-note{margin-bottom:16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;color:var(--muted);background:var(--panel-soft);font-size:0.625rem;line-height:1.7}
.direct-capability-samples{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-bottom:18px}
.direct-capability-sample{display:grid;gap:9px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel-soft)}
.direct-capability-sample-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.direct-capability-sample strong{font-size:0.75rem}.direct-capability-sample p{margin:0;color:var(--muted);font-size:0.5625rem;overflow-wrap:anywhere}
.direct-capability-table-wrap{max-width:100%;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:16px}
.direct-capability-table{width:100%;min-width:1280px;border-collapse:collapse;background:var(--panel-soft)}
.direct-capability-table th,.direct-capability-table td{padding:10px 11px;border-bottom:1px solid var(--line);font-size:0.5625rem;text-align:left;white-space:nowrap}.direct-capability-table th{position:sticky;top:0;z-index:1;color:var(--muted);background:var(--panel)}.direct-capability-table tr:last-child td{border-bottom:0}
.direct-capability-status{display:inline-flex;align-items:center;gap:5px}.direct-capability-status i{width:6px;height:6px;border-radius:50%;background:var(--muted)}.direct-capability-status.ok i{background:var(--green)}.direct-capability-status.bad i{background:var(--red)}
@media(max-width:720px){.direct-capability-samples{grid-template-columns:1fr}.direct-capability-table-wrap{max-height:58vh}.direct-capability-panel .panel-body{padding-inline:12px}}
.stage-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.stage{padding:6px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:0.5rem;color:var(--muted)}
.stage.bad{color:var(--red);border-color:color-mix(in srgb,var(--red) 25%,var(--line))}
.report-preview{
  min-height:210px;padding:14px;border-radius:18px;background:#101522;color:#dce6f8;border:1px solid rgba(255,255,255,.06);
  font:0.625rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:auto;white-space:pre-wrap
}
html[data-theme="light"] .report-preview{background:#1b2130;color:#eaf1ff}

/* 弹窗遮罩、尺寸和内部排版。 */
.modal-backdrop{
  position:fixed;inset:0;z-index:110;background:rgba(3,5,10,.58);backdrop-filter:blur(14px) saturate(130%);
  opacity:0;pointer-events:none;transition:.26s ease
}
.modal-backdrop.show{opacity:1;pointer-events:auto}
.modal{
  position:fixed;left:50%;top:50%;z-index:111;width:min(760px,calc(100vw - 28px));max-height:min(760px,calc(100vh - 48px));
  overflow:hidden;display:flex;flex-direction:column;transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;
  border:1px solid var(--line-strong);border-radius:28px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel-strong) 96%,transparent),color-mix(in srgb,var(--panel) 94%,transparent));
  box-shadow:0 36px 120px rgba(0,0,0,.46);transition:.28s cubic-bezier(.2,.8,.2,1)
}
.modal::before{
  content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-165px;top:-185px;
  background:radial-gradient(circle,rgba(107,92,255,.18),transparent 68%);pointer-events:none
}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal-head{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:20px 20px 16px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel-strong) 92%,transparent);backdrop-filter:blur(18px)
}
.modal-title{display:flex;align-items:center;gap:10px}.modal-title h3{margin:0;font-size:1.0625rem}
.modal-count{
  min-width:28px;height:24px;padding:0 8px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:999px;background:var(--panel-soft);color:var(--muted);font-size:0.5625rem;font-weight:800
}
.modal-close{
  width:36px;height:36px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);
  cursor:pointer;transition:.22s ease
}
.modal-close:hover{transform:rotate(6deg);background:var(--panel-strong);border-color:var(--line-strong)}
.modal-body{
  position:relative;z-index:1;min-height:0;overflow:auto;padding:16px 18px 20px;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong)) transparent
}
.modal-body::-webkit-scrollbar{width:7px}.modal-body::-webkit-scrollbar-track{background:transparent}
.modal-body::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 58%,var(--line-strong)),color-mix(in srgb,var(--accent2) 46%,var(--line-strong)))}
.modal-body>p{margin:0 0 13px;color:var(--muted);font-size:0.625rem}
.site-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.site-item{
  min-height:74px;padding:12px 13px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel-soft) 86%,transparent),color-mix(in srgb,var(--panel) 84%,transparent));
  transition:.24s ease
}
.site-item:hover{transform:translateY(-2px);border-color:var(--line-strong);background:var(--panel);box-shadow:0 10px 28px rgba(0,0,0,.08)}
.site-avatar{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--panel-strong),var(--panel-soft));border:1px solid var(--line);font-size:0.6875rem;font-weight:850
}
.site-item.good .site-avatar{color:var(--green)}.site-item.bad .site-avatar{color:var(--red)}
.site-info{min-width:0}.site-info strong{display:block;font-size:0.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-info small{display:block;margin-top:4px;color:var(--muted);font-size:0.5625rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 全局操作提示框。 */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:140;opacity:0;pointer-events:none;
  transform:translate(-50%,14px);padding:11px 16px;border-radius:999px;
  background:var(--panel-strong);border:1px solid var(--line);backdrop-filter:blur(24px);box-shadow:var(--shadow);
  font-size:0.625rem;transition:.25s ease
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 管理台登录页面。 */
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-shell{width:min(960px,100%);display:grid;grid-template-columns:1fr 430px;gap:18px;align-items:stretch}
.login-visual,.login-card{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:30px;background:var(--panel);box-shadow:var(--shadow)
}
.login-visual{padding:38px;min-height:560px;display:flex;flex-direction:column;justify-content:space-between}
.login-visual::before{
  content:"";position:absolute;width:540px;height:540px;border-radius:50%;right:-220px;top:-180px;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.45),rgba(0,191,255,.20) 20%,rgba(107,92,255,.22) 42%,rgba(255,73,194,.13) 60%,transparent 70%);
  animation:heroOrb 11s ease-in-out infinite
}
.login-visual>*{position:relative;z-index:2}.login-visual h1{font-size:3.5rem;letter-spacing:-.055em;margin:16px 0 0;line-height:.98}
.login-card{padding:32px;display:flex;flex-direction:column;justify-content:center}
.login-card h2{margin:0;font-size:1.75rem;letter-spacing:-.04em}.login-card>p{color:var(--muted);font-size:0.6875rem;line-height:1.7}
.login-error{min-height:18px;color:var(--red);font-size:0.5625rem}

/* 页脚与内容进入动画。 */
.footer{display:flex;justify-content:space-between;padding:28px 4px 0;color:var(--faint);font-size:0.5625rem}
.reveal{opacity:0;transform:translateY(18px);animation:reveal .72s cubic-bezier(.2,.8,.2,1) forwards}
.r1{animation-delay:.05s}.r2{animation-delay:.12s}.r3{animation-delay:.19s}.r4{animation-delay:.26s}
@keyframes reveal{to{opacity:1;transform:none}}

/* 按屏幕宽度调整页面布局。 */
@media(max-width:1150px){
  .topbar{grid-template-columns:1fr auto}.mainnav{display:none}
  .hero{grid-template-columns:1fr}.hero-side{min-height:225px}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .home-services{grid-template-columns:1fr 1fr}.home-services .strm-card{grid-row:auto;min-height:250px}
  .services-grid,.grid-3,.grid-4,.account-grid{grid-template-columns:1fr 1fr}
  .activity-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .shell{width:min(100% - 18px,1450px);padding-top:9px}
  .topbar{top:7px;height:64px;border-radius:18px}.brand-copy small,.status-pill{display:none}.mobile-title{display:block}
  .hero{padding:25px;border-radius:26px}.hero h1{font-size:2.625rem}
  .metrics,.home-services,.services-grid,.grid-2,.grid-3,.grid-4,.account-grid,.field-grid,.site-columns{grid-template-columns:1fr}
  .page-tabs{top:78px}
  .health-layout{grid-template-columns:1fr}.progress-ring{margin:auto}
  .button-row{flex-direction:column}.btn{width:100%}
  .footer{flex-direction:column;gap:8px}
  .site-list{grid-template-columns:1fr}
  .login-shell{grid-template-columns:1fr}.login-visual{min-height:360px}.login-visual h1{font-size:2.75rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}



/* 明暗主题共用的表面、颜色与层次变量。
 */

/* 亮色主题的背景、边框和文字颜色。 */
html[data-theme="light"]{
  --bg:#f7f8fa;
  --bg2:#f2f4f7;
  --panel:#ffffff;
  --panel-strong:#ffffff;
  --panel-soft:#f7f8fa;
  --text:#111318;
  --muted:#5f6673;
  --faint:#8a919e;
  --line:#e5e7eb;
  --line-strong:#d8dce3;
  --shadow:0 10px 30px rgba(17,24,39,.055);
  --shadow-soft:0 4px 16px rgba(17,24,39,.045);
}

/* 暗色主题的玻璃表面与层次颜色。 */
html[data-theme="dark"]{
  --bg:#060913;
  --bg2:#0a1020;
  --panel:rgba(15,19,31,.78);
  --panel-strong:rgba(20,25,39,.96);
  --panel-soft:rgba(17,22,35,.62);
  --text:#f7f8fb;
  --muted:#aab2c0;
  --faint:#7d8595;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.15);
  --shadow:0 32px 90px rgba(0,0,0,.46);
  --shadow-soft:0 15px 44px rgba(0,0,0,.26);
}

/* 页面整体背景和装饰层。 */
html[data-theme="light"] body{
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html[data-theme="light"] body::before{
  opacity:.18;
  filter:blur(90px);
  background:
    radial-gradient(circle at 20% 16%,rgba(107,92,255,.10),transparent 21%),
    radial-gradient(circle at 82% 12%,rgba(0,191,255,.07),transparent 20%);
}
html[data-theme="light"] body::after{opacity:.05}

html[data-theme="dark"] body{
  background:
    radial-gradient(900px 620px at 3% -6%,rgba(107,92,255,.24),transparent 58%),
    radial-gradient(780px 560px at 98% 8%,rgba(0,191,255,.17),transparent 61%),
    radial-gradient(860px 580px at 72% 103%,rgba(255,73,194,.12),transparent 65%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
html[data-theme="dark"] body::before{
  opacity:.95;
  filter:blur(64px);
}
html[data-theme="dark"] body::after{opacity:.12}

/* 亮色主题下卡片及面板的表面。 */
html[data-theme="light"] .topbar,
html[data-theme="light"] .hero,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .metric,
html[data-theme="light"] .activity-panel,
html[data-theme="light"] .service-card,
html[data-theme="light"] .site-box,
html[data-theme="light"] .login-visual,
html[data-theme="light"] .login-card,
html[data-theme="light"] .modal,
html[data-theme="light"] .page-tabs{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}

/* 暗色主题下卡片及面板的表面。 */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .activity-panel,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .site-box,
html[data-theme="dark"] .login-visual,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .page-tabs{
  -webkit-backdrop-filter:blur(20px) saturate(155%);
  backdrop-filter:blur(20px) saturate(155%);
}

/* 统一卡片、按钮和字段圆角。 */
html[data-theme="light"] .topbar{border-radius:18px}
html[data-theme="light"] .hero,
html[data-theme="light"] .login-visual,
html[data-theme="light"] .login-card{border-radius:24px}
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .activity-panel,
html[data-theme="light"] .service-card{border-radius:18px}
html[data-theme="light"] .metric{border-radius:16px}
html[data-theme="light"] .site-box{border-radius:18px}
html[data-theme="light"] .page-tabs{border-radius:14px;padding:4px}
html[data-theme="light"] .mainnav{border-radius:12px;padding:3px}

/* 输入、按钮等通用控件的表面与边框。 */
.mainnav,
.page-tabs,
.status-pill,
.hero-tag,
.chip,
.field,
.switch-row,
.search-box,
.code-box,
.health-btn,
.health-static,
.status-row,
.list-row,
.account-card,
.download-item,
.issue-card,
.site-option,
.btn,
.dropzone,
.modal-count,
.badge,
.table tbody tr{
  border-color:var(--line);
}

html[data-theme="light"] .mainnav,
html[data-theme="light"] .page-tabs,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .hero-tag,
html[data-theme="light"] .chip,
html[data-theme="light"] .field,
html[data-theme="light"] .switch-row,
html[data-theme="light"] .search-box,
html[data-theme="light"] .code-box,
html[data-theme="light"] .health-btn,
html[data-theme="light"] .health-static,
html[data-theme="light"] .status-row,
html[data-theme="light"] .list-row,
html[data-theme="light"] .account-card,
html[data-theme="light"] .download-item,
html[data-theme="light"] .issue-card,
html[data-theme="light"] .site-option,
html[data-theme="light"] .btn,
html[data-theme="light"] .dropzone,
html[data-theme="light"] .modal-count,
html[data-theme="light"] .badge,
html[data-theme="light"] .table tbody tr{
  background:var(--panel-soft);
  box-shadow:none;
}

html[data-theme="dark"] .mainnav,
html[data-theme="dark"] .page-tabs,
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .hero-tag,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .field,
html[data-theme="dark"] .switch-row,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .code-box,
html[data-theme="dark"] .health-btn,
html[data-theme="dark"] .health-static,
html[data-theme="dark"] .status-row,
html[data-theme="dark"] .list-row,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .download-item,
html[data-theme="dark"] .issue-card,
html[data-theme="dark"] .site-option,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .dropzone,
html[data-theme="dark"] .modal-count,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .table tbody tr{
  border-color:var(--line-strong);
  background:color-mix(in srgb,var(--panel-strong) 78%,var(--panel-soft));
}

/* 导航当前页的选中效果。 */
html[data-theme="light"] .mainnav a.active,
html[data-theme="light"] .page-tab.active{
  color:var(--text);
  background:var(--panel-strong);
  box-shadow:
    0 1px 3px rgba(17,24,39,.07),
    inset 0 0 0 1px var(--line-strong);
}

html[data-theme="dark"] .mainnav a.active,
html[data-theme="dark"] .page-tab.active{
  color:var(--text);
  background:linear-gradient(
    145deg,
    var(--panel-strong),
    color-mix(in srgb,var(--panel-strong) 82%,var(--accent))
  );
  box-shadow:
    0 8px 24px rgba(52,60,95,.09),
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,var(--line-strong)),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* 可交互组件的悬停反馈。 */
html[data-theme="light"] .card:hover,
html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .action-card:hover,
html[data-theme="light"] .metric:hover{
  transform:translateY(-2px);
  border-color:var(--line-strong);
  box-shadow:0 12px 30px rgba(17,24,39,.08);
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .service-card:hover,
html[data-theme="dark"] .action-card:hover,
html[data-theme="dark"] .metric:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line-strong));
  box-shadow:0 30px 68px rgba(31,40,68,.13);
}

/* 卡片上的指针聚光装饰。 */
html[data-theme="light"] .card::before,
html[data-theme="light"] .service-card::before,
html[data-theme="light"] .action-card::before{
  display:none;
}

html[data-theme="dark"] .card::before,
html[data-theme="dark"] .service-card::before,
html[data-theme="dark"] .action-card::before{
  display:block;
  background:
    radial-gradient(
      300px circle at var(--mx,50%) var(--my,50%),
      rgba(120,112,255,.13),
      rgba(0,191,255,.05) 28%,
      transparent 48%
    );
}

/* 按钮的颜色、层次和交互状态。 */
html[data-theme="light"] .btn{
  border-radius:11px;
  background:var(--panel-strong);
  border-color:var(--line-strong);
  box-shadow:0 1px 2px rgba(17,24,39,.035);
}
html[data-theme="light"] .btn:hover{
  background:color-mix(in srgb,var(--panel-strong) 94%,var(--accent) 6%);
}
html[data-theme="light"] .btn.primary{
  background:#2563eb;
  box-shadow:0 4px 12px rgba(37,99,235,.16);
}
html[data-theme="light"] .btn.primary:hover{
  background:#1d4ed8;
  filter:none;
}

html[data-theme="dark"] .btn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
html[data-theme="dark"] .btn.primary{
  background:linear-gradient(135deg,#735fff,#2c8dff 55%,#08bff5);
  box-shadow:
    0 12px 28px rgba(76,87,255,.24),
    inset 0 1px 0 rgba(255,255,255,.24);
}
html[data-theme="dark"] .btn.primary:hover{filter:brightness(1.045)}

/* 开关轨道与滑块。 */
html[data-theme="light"] .switch-btn{
  border:1px solid var(--line-strong);
}
html[data-theme="light"] .switch-btn.on{
  background:#2563eb;
  box-shadow:none;
}
html[data-theme="dark"] .switch-btn.on{
  background:linear-gradient(135deg,#735fff,#1aa9ff);
  box-shadow:0 5px 14px rgba(76,87,255,.22);
}

/* 输入字段和列表容器的层次。 */
html[data-theme="light"] .field,
html[data-theme="light"] .switch-row,
html[data-theme="light"] .search-box,
html[data-theme="light"] .code-box,
html[data-theme="light"] .site-option,
html[data-theme="light"] .list-row,
html[data-theme="light"] .status-row{
  border-radius:12px;
}

html[data-theme="dark"] .field,
html[data-theme="dark"] .switch-row,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .code-box,
html[data-theme="dark"] .site-option,
html[data-theme="dark"] .list-row,
html[data-theme="dark"] .status-row{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* 站源选择区域的卡片与选项。 */
html[data-theme="light"] .site-option{
  min-height:50px;
}
html[data-theme="light"] .site-option::after{
  width:22px;height:22px;border-radius:7px;
}
html[data-theme="light"] .site-option::before{
  width:22px;height:22px;font-size:0.6875rem;
}
html[data-theme="light"] .site-option:has(input:checked){
  border-color:#9dbcf8;
  background:color-mix(in srgb,#2563eb 7%,var(--panel));
  box-shadow:none;
}
html[data-theme="light"] .site-option:has(input:checked)::after{
  background:#2563eb;
  box-shadow:none;
}

html[data-theme="dark"] .site-option:has(input:checked){
  border-color:color-mix(in srgb,var(--accent) 48%,var(--line-strong));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--accent) 11%,var(--panel-strong)),
      color-mix(in srgb,var(--accent2) 7%,var(--panel-strong))
    );
  box-shadow:
    0 10px 28px rgba(75,85,255,.09),
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
}
html[data-theme="dark"] .site-option:has(input:checked)::after{
  border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 7px 18px rgba(77,83,255,.28);
}

/* 首页标题区的光晕及装饰效果。 */
html[data-theme="light"] .hero::before{
  opacity:.72;
  filter:blur(20px);
}
html[data-theme="light"] .hero::after{opacity:.55}
html[data-theme="light"] .glow{
  opacity:.22;
  filter:blur(28px);
}
html[data-theme="light"] .live-orb{
  box-shadow:
    0 12px 30px rgba(79,92,255,.18),
    inset -10px -12px 26px rgba(14,20,50,.22);
}
html[data-theme="light"] .live-orb::before,
html[data-theme="light"] .live-orb::after{
  opacity:.35;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .login-visual{
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.09);
}

/* 文字字号、字重和信息层次。 */
html[data-theme="light"] .hero-copy>p,
html[data-theme="light"] .card p,
html[data-theme="light"] .panel p,
html[data-theme="light"] .activity-panel>p,
html[data-theme="light"] .section-head p,
html[data-theme="light"] .metric span,
html[data-theme="light"] .metric p,
html[data-theme="light"] .field label,
html[data-theme="light"] .list-main small,
html[data-theme="light"] .status-copy span,
html[data-theme="light"] .event-copy span,
html[data-theme="light"] .brand-copy small{
  color:#626b78;
}
html[data-theme="light"] .section-head{margin-top:30px}
html[data-theme="light"] .section-head h2{font-size:1.3125rem}
html[data-theme="light"] .metric strong{font-size:1.6875rem}

html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .panel p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .activity-panel>p,
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .metric p,
html[data-theme="dark"] .field label,
html[data-theme="dark"] .list-main small,
html[data-theme="dark"] .status-copy span,
html[data-theme="dark"] .event-copy span,
html[data-theme="dark"] .brand-copy small{
  color:var(--muted);
}


/* 品牌图标与文字标识的尺寸。 */
.brand-logo-img{
  width:42px;height:42px;display:block;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 10px 20px rgba(64,90,255,.18));
}
.service-logo-img{
  width:42px;height:42px;display:block;object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(64,90,255,.16));
}
.hero-tag.service-tag{gap:9px;padding:7px 11px 7px 8px}
.hero-tag.service-tag img{
  width:26px;height:26px;display:block;object-fit:contain;
}
html[data-theme="dark"] .brand-logo-img,
html[data-theme="dark"] .service-logo-img,
html[data-theme="dark"] .hero-tag.service-tag img{
  filter:drop-shadow(0 10px 22px rgba(48,132,255,.24));
}


/* 首页的来源设置与站点健康信息。 */
.source-settings-card{
  color:inherit;
  text-decoration:none;
  min-height:215px;
}
.source-title{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.source-title h3{margin:0}
.source-summary{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:20px;
}
.source-summary>div{
  min-width:0;
  padding:11px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel-soft);
}
.source-summary span{
  display:block;
  color:var(--muted);
  font-size:0.5rem;
  white-space:nowrap;
}
.source-summary strong{
  display:block;
  margin-top:5px;
  font-size:0.6875rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.source-arrow{
  position:absolute;
  right:18px;
  bottom:14px;
  z-index:2;
  color:var(--faint);
  font-size:1.25rem;
  transition:.25s ease;
}
.source-settings-card:hover .source-arrow{
  transform:translateX(4px);
  color:var(--text);
}
.home-secondary-grid>.panel{
  min-height:270px;
}
.home-health-panel .health-layout-wide{
  grid-template-columns:minmax(0,1fr) 142px;
  gap:18px;
}
.home-health-panel .progress-ring{
  width:132px;
  height:132px;
}
@media(max-width:760px){
  .source-summary{grid-template-columns:1fr}
  .home-health-panel .health-layout-wide{grid-template-columns:1fr}
}


/* 概览页面的指标和状态元素。 */
.service-logo-img{
  border-radius:14px;
}

.home-service{
  padding-bottom:18px;
}

.home-service-meta{
  position:relative;
  z-index:2;
  margin-top:14px;
  gap:6px;
}

.home-service-meta span{
  padding:6px 8px;
  font-size:0.5rem;
}

.activity-feed-panel{
  min-height:auto;
  padding:18px 20px;
}

.feed-list{
  display:grid;
  gap:0;
}

.feed-row{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  min-height:50px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}

.feed-row:last-child{
  border-bottom:0;
}

.feed-badge{
  width:24px;
  height:24px;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:0.6875rem;
  font-weight:800;
}

.feed-badge.green{background:linear-gradient(135deg,#31d27c,#1fb66a)}
.feed-badge.blue{background:linear-gradient(135deg,#5b8dff,#377dff)}
.feed-badge.orange{background:linear-gradient(135deg,#ffb243,#ff7a00)}
.feed-badge.purple{background:linear-gradient(135deg,#7b61ff,#5b7cff)}

.feed-main{
  min-width:0;
}

.feed-main strong{
  display:block;
  font-size:0.625rem;
}

.feed-main small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.45;
}

.feed-row time{
  color:var(--faint);
  font-size:0.5625rem;
  white-space:nowrap;
}

@media(max-width:760px){
  .feed-row{
    grid-template-columns:24px 1fr;
  }
  .feed-row time{
    grid-column:2;
  }
}

/* 手机端站点数量较多时保持列表内部滚动，避免两组启用/屏蔽卡片把页面
   撑到数十屏；卡片只绘制可视区域，降低全动画模式下的滚动开销。 */
@media(max-width:980px){
  .site-policy-grid .t4-policy-list{
    max-height:min(480px,54vh) !important;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    contain:layout paint;
  }
  .site-policy-grid .t4-policy-item.compact{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"main main" "status actions";
    gap:9px 12px;
    padding:12px;
    content-visibility:auto;
    contain-intrinsic-size:88px;
  }
  .site-policy-grid .t4-policy-main{grid-area:main}
  .site-policy-grid .t4-policy-status{grid-area:status;justify-self:start;margin:0}
  .site-policy-grid .t4-policy-item.compact .t4-policy-actions{grid-area:actions;justify-self:end;margin:0}
  #fwSearchSiteList,
  #t4SearchSiteList,
  #embySearchSiteList,
  #strmDisplaySiteList,
  #strmSearchSiteList{
    contain:layout paint;
  }
  #fwSearchSiteList .t4-search-choice,
  #t4SearchSiteList .t4-search-choice,
  #embySearchSiteList .t4-search-choice,
  #strmDisplaySiteList .t4-search-choice,
  #strmSearchSiteList .t4-search-choice{
    content-visibility:auto;
    contain-intrinsic-size:88px;
  }
}

.source-title .service-logo-img{overflow:hidden}


/* 活动与日志条目的来源图标。
 */
.section-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:0.625rem;
  font-weight:700;
  transition:.22s ease;
}
.section-link:hover{
  color:var(--text);
  transform:translateX(2px);
}
.section-link span{font-size:0.875rem;line-height:1}

.activity-loading,
.activity-empty{
  min-height:120px;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:0.625rem;
}

.feed-row{
  grid-template-columns:34px minmax(0,1fr) auto;
  min-height:58px;
}

.feed-logo{
  width:30px;
  height:30px;
  display:block;
  object-fit:contain;
  border-radius:9px;
  filter:drop-shadow(0 7px 14px rgba(54,84,255,.15));
}
html[data-theme="dark"] .feed-logo{
  filter:drop-shadow(0 8px 17px rgba(50,124,255,.23));
}

.feed-main strong{
  display:flex;
  align-items:center;
  gap:7px;
}
.feed-source{
  flex:0 0 auto;
  padding:3px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel-soft);
  color:var(--faint);
  font-size:0.4375rem;
  font-weight:700;
}
.feed-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  min-width:0;
}
.feed-main small{
  margin-top:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.feed-status{
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:50%;
}
.feed-status.ok{background:var(--green);box-shadow:0 0 8px rgba(50,209,124,.45)}
.feed-status.warn{background:var(--yellow);box-shadow:0 0 8px rgba(255,191,71,.35)}
.feed-status.bad{background:var(--red);box-shadow:0 0 8px rgba(255,93,115,.35)}
.feed-status.info{background:var(--blue);box-shadow:0 0 8px rgba(73,164,255,.35)}

/* 完整日志页的筛选和记录布局。 */
.logs-toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}
.log-filter-group{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.log-filter{
  height:36px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-soft);
  color:var(--muted);
  font-size:0.5625rem;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}
.log-filter img{
  width:20px;
  height:20px;
  object-fit:contain;
  border-radius:6px;
}
.log-filter:hover{
  color:var(--text);
  border-color:var(--line-strong);
  background:var(--panel-strong);
}
.log-filter.active{
  color:var(--text);
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line-strong));
  background:color-mix(in srgb,var(--accent) 7%,var(--panel-strong));
}
.logs-list{
  display:grid;
  gap:8px;
}
.log-entry{
  min-height:70px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel-soft);
  transition:.22s ease;
}
.log-entry:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
  background:var(--panel-strong);
}
.log-entry .feed-logo{
  width:36px;
  height:36px;
  border-radius:11px;
}
.log-entry-main{
  min-width:0;
}
.log-entry-main strong{
  display:block;
  font-size:0.625rem;
}
.log-entry-main p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.5;
}
.log-entry-main .log-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:7px;
}
.log-tag{
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--faint);
  background:var(--panel);
  font-size:0.4375rem;
}
.log-entry time{
  align-self:start;
  padding-top:4px;
  color:var(--faint);
  font-size:0.5625rem;
  white-space:nowrap;
}
.logs-footer{
  display:flex;
  justify-content:center;
  margin-top:14px;
}

@media(max-width:760px){
  .feed-row{
    grid-template-columns:30px minmax(0,1fr);
  }
  .feed-row time{
    grid-column:2;
    margin-top:-4px;
  }
  .logs-toolbar{
    grid-template-columns:1fr;
  }
  .log-entry{
    grid-template-columns:34px minmax(0,1fr);
  }
  .log-entry time{
    grid-column:2;
    padding-top:0;
  }
}


/* 首页媒体服务卡片与 STRM 趋势图。
 */
.module-summary-card{
  min-height:215px !important;
}
.module-summary-card .source-title{
  padding-right:8px;
}
.module-summary-card .source-title h3{
  margin:0;
  font-size:0.9375rem;
}
.module-summary-card .source-title p{
  max-width:280px;
}
.module-summary{
  margin-top:22px;
}
.module-summary.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.module-summary.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.module-summary>div{
  min-height:58px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.module-summary strong{
  font-size:1.0625rem;
  letter-spacing:-.03em;
}

/* STRM 概览保持大卡片布局，趋势图按时间排序显示统计值。 */
.strm-card{
  overflow:visible;
}
.strm-chart-head{
  position:absolute;
  left:20px;
  right:20px;
  bottom:112px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--faint);
  font-size:0.5rem;
}
.strm-chart-legend{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.strm-chart-legend i{
  width:6px;
  height:6px;
  border-radius:50%;
}
.strm-chart-legend i.sub{background:#7b61ff}
.strm-chart-legend i.site{background:#19c9ff}
.strm-chart-legend i.manual{background:#ff5ca8}

.strm-tree-chart{
  position:absolute;
  left:20px;
  right:20px;
  bottom:22px;
  z-index:5;
  height:76px;
  display:flex;
  align-items:flex-end;
  gap:7px;
}
.chart-loading{
  width:100%;
  align-self:center;
  text-align:center;
  color:var(--faint);
  font-size:0.5625rem;
}
.strm-time-node{
  position:relative;
  flex:1;
  min-width:0;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  cursor:default;
}
.strm-time-stem{
  position:relative;
  width:100%;
  max-width:48px;
  min-height:8px;
  border-radius:8px 8px 4px 4px;
  overflow:hidden;
  display:flex;
  flex-direction:column-reverse;
  background:rgba(127,127,127,.08);
  box-shadow:0 8px 22px rgba(69,83,255,.08);
  transform-origin:bottom;
  animation:chartGrow .55s cubic-bezier(.2,.8,.2,1) both;
}
.strm-segment{
  width:100%;
  min-height:1px;
}
.strm-segment.subscription{
  background:linear-gradient(180deg,#927cff,#6b5cff);
}
.strm-segment.site{
  background:linear-gradient(180deg,#38d7ff,#00aef0);
}
.strm-segment.manual{
  background:linear-gradient(180deg,#ff77bb,#ff4f9e);
}
.strm-time-node:hover .strm-time-stem{
  filter:brightness(1.13);
  box-shadow:0 10px 28px rgba(74,94,255,.20);
}
.strm-time-node::after{
  content:attr(data-time);
  position:absolute;
  bottom:-17px;
  color:var(--faint);
  font-size:0.4375rem;
  opacity:0;
  transition:.18s ease;
  white-space:nowrap;
}
.strm-time-node:hover::after{
  opacity:1;
}
.strm-chart-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  z-index:20;
  width:164px;
  padding:10px 11px;
  transform:translate(-50%,8px);
  pointer-events:none;
  opacity:0;
  border:1px solid var(--line-strong);
  border-radius:13px;
  background:var(--panel-strong);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px);
  transition:.18s ease;
}
.strm-time-node:first-child .strm-chart-tooltip{
  left:0;
  transform:translate(0,8px);
}
.strm-time-node:last-child .strm-chart-tooltip{
  left:auto;
  right:0;
  transform:translate(0,8px);
}
.strm-time-node:hover .strm-chart-tooltip{
  opacity:1;
}
.strm-chart-tooltip strong{
  display:block;
  font-size:0.5625rem;
}
.strm-tooltip-total{
  margin-top:4px;
  color:var(--muted);
  font-size:0.5rem;
}
.strm-tooltip-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-top:8px;
}
.strm-tooltip-grid span{
  display:block;
  padding:6px 4px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel-soft);
  text-align:center;
  color:var(--muted);
  font-size:0.4375rem;
}
.strm-tooltip-grid b{
  display:block;
  margin-top:3px;
  color:var(--text);
  font-size:0.625rem;
}
@keyframes chartGrow{
  from{transform:scaleY(.08);opacity:.3}
  to{transform:scaleY(1);opacity:1}
}

@media(max-width:760px){
  .module-summary.two,
  .module-summary.three{
    grid-template-columns:1fr;
  }
  .strm-chart-legend{
    display:none;
  }
}


/* 多个猫源与影视仓输入的管理卡片。
 */
.multi-source-list{
  display:grid;
  gap:12px;
}

.multi-source-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel-soft);
  transition:.24s ease;
}
.multi-source-card:hover{
  border-color:var(--line-strong);
  box-shadow:var(--shadow-soft);
}

.multi-source-card.primary-source{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 5%,var(--panel-soft)),var(--panel-soft));
}

.multi-source-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:16px 17px 12px;
}
.multi-source-title{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.multi-source-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel-strong);
  flex:0 0 auto;
}
.multi-source-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.multi-source-title-copy{
  min-width:0;
}
.multi-source-kicker{
  display:block;
  color:var(--accent);
  font-size:0.5rem;
  font-weight:800;
  margin-bottom:4px;
}
.multi-source-title-copy strong{
  display:block;
  font-size:0.8125rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.multi-source-title-copy small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:0.5rem;
}

.multi-source-state{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.multi-source-state i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px rgba(50,209,124,.45);
}
.multi-source-state.off i{
  background:var(--faint);
  box-shadow:none;
}
.multi-source-state span{
  font-size:0.5625rem;
  color:var(--muted);
}

.multi-source-body{
  padding:0 17px 16px;
}
.multi-source-url{
  margin-top:2px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  color:var(--muted);
  font-size:0.5625rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.multi-source-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}
.source-meta-pill{
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--muted);
  font-size:0.5rem;
}
.source-meta-pill.ok{color:var(--green)}
.source-meta-pill.info{color:var(--blue)}
.source-meta-pill.warn{color:var(--yellow)}

.multi-source-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.multi-source-actions .btn{
  height:34px;
  padding:0 11px;
  font-size:0.5625rem;
}
.multi-source-actions .btn.danger-soft{
  color:var(--red);
  border-color:color-mix(in srgb,var(--red) 26%,var(--line));
  background:color-mix(in srgb,var(--red) 6%,var(--panel));
}

.source-proxy-editor{
  display:none;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin-top:10px;
}
.source-proxy-editor.show{
  display:grid;
}
.source-proxy-editor input{
  width:100%;
  min-width:0;
  height:36px;
  border:1px solid var(--line);
  border-radius:11px;
  outline:none;
  padding:0 10px;
  background:var(--panel);
  color:var(--text);
  font-size:0.5625rem;
}

.compact-trust{
  min-height:46px;
}

.tvbox-sites-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.tvbox-sites-toggle button{
  padding:0;
  background:transparent;
  color:var(--accent);
  font-size:0.5625rem;
  font-weight:750;
  cursor:pointer;
}
.tvbox-site-grid{
  display:none;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}
.tvbox-site-grid.show{
  display:flex;
}
.tvbox-site-chip{
  min-height:34px;
  padding:7px 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel);
  color:var(--text);
  font-size:0.5rem;
  cursor:pointer;
  transition:.18s ease;
}
.tvbox-site-chip:hover{
  border-color:var(--line-strong);
  transform:translateY(-1px);
}
.tvbox-site-chip.disabled{
  color:var(--muted);
  background:color-mix(in srgb,var(--panel) 88%,var(--red) 5%);
}
.tvbox-site-chip i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
}
.tvbox-site-chip.disabled i{
  background:var(--red);
}

@media(max-width:760px){
  .multi-source-head{
    align-items:flex-start;
  }
  .source-proxy-editor{
    grid-template-columns:1fr;
  }
}


/* 自定义下拉框与 STRM 统计面板。
 */

/* 保留原生下拉框承载表单值，仅替换可见界面。 */
.field{
  position:relative;
}
.field select.mf-native-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

.mf-select{
  position:relative;
  width:100%;
}
.mf-select-trigger{
  width:100%;
  min-height:38px;
  padding:0 38px 0 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  font-size:0.6875rem;
  cursor:pointer;
  outline:none;
}
.mf-select-trigger::after{
  content:"";
  position:absolute;
  right:4px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translateY(-65%) rotate(45deg);
  transition:.2s ease;
}
.mf-select.open .mf-select-trigger::after{
  transform:translateY(-30%) rotate(225deg);
}
.mf-select-value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mf-select-menu{
  position:absolute;
  left:-8px;
  right:-8px;
  top:calc(100% + 8px);
  z-index:120;
  padding:6px;
  display:grid;
  gap:4px;
  max-height:240px;
  overflow:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px) scale(.985);
  transform-origin:top;
  border:1px solid var(--line-strong);
  border-radius:15px;
  background:var(--panel-strong);
  box-shadow:0 20px 55px rgba(0,0,0,.18);
  backdrop-filter:blur(20px) saturate(150%);
  transition:.18s ease;
  scrollbar-width:thin;
}
.mf-select.open .mf-select-menu{
  opacity:1;
  visibility:visible;
  transform:none;
}
.mf-select-option{
  min-height:38px;
  padding:0 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:0.625rem;
  cursor:pointer;
  transition:.16s ease;
}
.mf-select-option:hover{
  color:var(--text);
  background:var(--panel-soft);
  border-color:var(--line);
}
.mf-select-option.selected{
  color:var(--text);
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--accent) 11%,var(--panel-soft)),
    color-mix(in srgb,var(--accent2) 7%,var(--panel-soft))
  );
  border-color:color-mix(in srgb,var(--accent) 25%,var(--line-strong));
}
.mf-select-option.selected::after{
  content:"✓";
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:7px;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 5px 13px rgba(77,83,255,.22);
  font-size:0.625rem;
  font-weight:850;
}
html[data-theme="light"] .mf-select-menu{
  background:#fff;
  box-shadow:0 16px 42px rgba(17,24,39,.12);
}
html[data-theme="light"] .mf-select-option.selected{
  background:#eef4ff;
  border-color:#c7d8fb;
}

/* 在 STRM 概览卡片中显示紧凑的统计图面板。 */
.strm-card{
  overflow:hidden;
}
.strm-chart-shell{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:5;
  height:142px;
  padding:12px 13px 11px;
  overflow:visible;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--panel-soft) 82%,transparent),color-mix(in srgb,var(--panel) 68%,transparent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px rgba(24,35,72,.07);
}
.strm-chart-shell::before{
  content:"";
  position:absolute;
  inset:43px 13px 20px;
  pointer-events:none;
  opacity:.52;
  background-image:
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:100% 25%;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.25));
}
.strm-chart-head{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  height:28px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.strm-chart-title{
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:0;
}
.strm-chart-title>span{
  color:var(--muted);
  font-size:0.5rem;
}
.strm-chart-title>strong{
  color:var(--text);
  font-size:0.625rem;
}
.strm-chart-legend{
  color:var(--faint);
}
.strm-tree-chart{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  height:82px;
  padding:3px 2px 0;
  gap:8px;
  z-index:4;
}
.strm-time-node{
  z-index:5;
}
.strm-time-stem{
  max-width:44px;
  border-radius:9px 9px 5px 5px;
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  background:color-mix(in srgb,var(--panel-strong) 55%,transparent);
  box-shadow:
    0 7px 17px rgba(69,83,255,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.strm-time-node:hover .strm-time-stem{
  transform:translateY(-2px);
  box-shadow:
    0 11px 26px rgba(74,94,255,.18),
    0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);
}
.strm-segment.subscription{
  background:linear-gradient(180deg,#9b85ff,#6d59ff);
}
.strm-segment.site{
  background:linear-gradient(180deg,#34dcff,#0ab8ef);
}
.strm-segment.manual{
  background:linear-gradient(180deg,#ff79bd,#ff50a0);
}
.strm-chart-axis{
  position:absolute;
  left:14px;
  right:14px;
  bottom:5px;
  display:flex;
  justify-content:space-between;
  color:var(--faint);
  font-size:0.375rem;
  pointer-events:none;
}
.strm-time-node::after{
  display:none;
}
.strm-chart-tooltip{
  bottom:calc(100% + 8px);
}
html[data-theme="light"] .strm-chart-shell{
  background:linear-gradient(180deg,#fbfcff,#f6f8fc);
  border-color:#e1e6ef;
  box-shadow:0 8px 22px rgba(30,41,59,.055);
}
html[data-theme="light"] .strm-time-stem{
  background:#fff;
  border-color:#e2e7ef;
}

@media(max-width:760px){
  .strm-chart-shell{
    height:136px;
  }
}


/* T4 的有效站点、启用、屏蔽与搜索范围。
 */
.t4-policy-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.t4-policy-panel .panel-body{
  padding-top:0;
}
.t4-policy-list{
  display:grid;
  gap:9px;
  max-height:500px;
  overflow:auto;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--accent) 34%,var(--line-strong)) transparent;
}
.t4-policy-list::-webkit-scrollbar{width:6px}
.t4-policy-list::-webkit-scrollbar-track{background:transparent}
.t4-policy-list::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 34%,var(--line-strong));
}

.t4-policy-item{
  min-height:100px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel-soft);
  transition:.2s ease;
}
.site-order-handle{
  flex:0 0 auto;width:34px;height:38px;border:0;border-radius:10px;background:transparent;
  color:var(--muted);font-size:1.375rem;line-height:1;cursor:grab;touch-action:none;
}
.site-order-handle:active{cursor:grabbing}
.site-order-dragging{opacity:.55;outline:2px solid var(--accent)}
.site-latency{display:inline-flex;margin-top:7px;padding:3px 8px;border-radius:999px;background:var(--panel-soft);color:var(--muted);font-size:0.6875rem;font-weight:800}
@media(max-width:430px){
  .site-item{grid-template-columns:38px minmax(0,1fr)!important;gap:10px!important;padding:13px!important;min-height:0!important}
  .site-item .site-avatar{width:38px!important;height:38px!important;border-radius:12px!important}
  .site-item .site-info{min-width:0;overflow:hidden}
  .site-item .site-info strong,.site-item .site-info small{overflow-wrap:anywhere;word-break:break-word}
  .site-item .site-item-actions{grid-column:2!important;justify-self:start!important;min-width:0!important}
  .section-actions{display:flex;flex-wrap:wrap;gap:8px}
}
.t4-policy-item:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
  background:var(--panel-strong);
}
.t4-policy-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.t4-policy-item-copy{
  min-width:0;
}
.t4-policy-item-copy strong{
  display:block;
  font-size:0.625rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.t4-policy-item-copy small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:0.5rem;
}
.t4-policy-origin{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:7px;
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--faint);
  font-size:0.4375rem;
}
.t4-policy-origin.extra{
  color:var(--blue);
  border-color:color-mix(in srgb,var(--blue) 24%,var(--line));
}
.t4-policy-actions{
  display:flex;
  gap:7px;
  margin-top:10px;
}
.t4-policy-actions .btn{
  height:31px;
  padding:0 10px;
  font-size:0.5rem;
}
.t4-policy-actions .block{
  color:var(--red);
  border-color:color-mix(in srgb,var(--red) 25%,var(--line));
  background:color-mix(in srgb,var(--red) 6%,var(--panel));
}
.t4-policy-actions .restore{
  color:var(--green);
  border-color:color-mix(in srgb,var(--green) 25%,var(--line));
  background:color-mix(in srgb,var(--green) 6%,var(--panel));
}

.t4-search-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.t4-search-choice{
  position:relative;
  min-height:58px;
  padding:11px 42px 11px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel-soft);
  cursor:pointer;
  transition:.2s ease;
}
.t4-search-choice:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
  background:var(--panel-strong);
}
.t4-search-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.t4-search-choice strong{
  font-size:0.5625rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.t4-search-choice small{
  color:var(--faint);
  font-size:0.4375rem;
}
.t4-search-choice::after{
  content:"";
  position:absolute;
  right:11px;
  top:50%;
  width:23px;
  height:23px;
  transform:translateY(-50%);
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--panel);
  transition:.2s ease;
}
.t4-search-choice::before{
  content:"✓";
  position:absolute;
  right:11px;
  top:50%;
  z-index:2;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  transform:translateY(-50%) scale(.7);
  opacity:0;
  color:#fff;
  font-size:0.625rem;
  font-weight:900;
  transition:.2s ease;
}
.t4-search-choice:has(input:checked){
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line-strong));
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--accent) 9%,var(--panel-soft)),
    color-mix(in srgb,var(--accent2) 5%,var(--panel-soft))
  );
}
.t4-search-choice:has(input:checked)::after{
  border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 6px 16px rgba(76,87,255,.22);
}
.t4-search-choice:has(input:checked)::before{
  opacity:1;
  transform:translateY(-50%) scale(1);
}
.t4-empty{
  min-height:170px;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:0.5625rem;
}

@media(max-width:1000px){
  .t4-search-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .t4-policy-grid,
  .t4-search-grid{grid-template-columns:1fr}
  .t4-policy-list{max-height:none}
}


/* T4 的概览、搜索、站点策略与配置地址标签页。
 */
.t4-overview-metrics{
  margin-top:0;
}
.t4-overview-summary{
  margin-top:12px;
}
.t4-link-grid .panel{
  min-height:190px;
}
.t4-link-grid .panel-body>p{
  margin:10px 1px 0;
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.55;
}


/* T4 站点策略的操作按钮。
 */
.t4-policy-actions{
  margin-top:13px;
}
.policy-action-pill{
  min-width:104px;
  height:36px;
  padding:0 12px 0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:12px;
  font-size:0.5625rem;
  font-weight:780;
  letter-spacing:.01em;
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}
.policy-action-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:8px;
  font-size:0.75rem;
  font-weight:900;
}
.policy-action-pill.block{
  color:#ff7187;
  border-color:color-mix(in srgb,var(--red) 32%,var(--line));
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--red) 10%,var(--panel-strong)),
      color-mix(in srgb,var(--red) 4%,var(--panel-soft)));
}
.policy-action-pill.block .policy-action-icon{
  color:#fff;
  background:linear-gradient(135deg,#ff7187,#ff4e68);
  box-shadow:0 5px 13px rgba(255,78,104,.20);
}
.policy-action-pill.restore{
  color:#36d889;
  border-color:color-mix(in srgb,var(--green) 32%,var(--line));
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--green) 10%,var(--panel-strong)),
      color-mix(in srgb,var(--green) 4%,var(--panel-soft)));
}
.policy-action-pill.restore .policy-action-icon{
  color:#fff;
  background:linear-gradient(135deg,#42df91,#22bd70);
  box-shadow:0 5px 13px rgba(34,189,112,.20);
}
.policy-action-pill:hover{
  transform:translateY(-1px);
}
.policy-action-pill.block:hover{
  border-color:color-mix(in srgb,var(--red) 55%,var(--line-strong));
  box-shadow:0 8px 22px rgba(255,78,104,.12);
}
.policy-action-pill.restore:hover{
  border-color:color-mix(in srgb,var(--green) 55%,var(--line-strong));
  box-shadow:0 8px 22px rgba(34,189,112,.12);
}
.policy-action-pill:active{
  transform:translateY(0) scale(.98);
}
html[data-theme="light"] .policy-action-pill.block{
  color:#d9344f;
  background:#fff5f6;
  border-color:#f6cbd2;
}
html[data-theme="light"] .policy-action-pill.restore{
  color:#168552;
  background:#f1fbf6;
  border-color:#c6ecd9;
}


/* T4 搜索区与站点策略区的信息排版。
 */
.t4-policy-grid{
  gap:18px;
  align-items:stretch;
}
.t4-policy-panel{
  position:relative;
  overflow:hidden;
}
.t4-policy-panel .panel-head{
  align-items:flex-start;
  padding-bottom:12px;
}
.t4-policy-panel .panel-head h3{
  font-size:0.9375rem;
  letter-spacing:-.01em;
}
.t4-policy-panel .panel-head p{
  margin-top:6px;
  max-width:36ch;
  color:color-mix(in srgb,var(--muted) 88%,white 12%);
  line-height:1.6;
  font-size:0.5625rem;
}
.t4-policy-panel .panel-body{
  padding-top:4px;
}
.t4-policy-list{
  gap:12px;
  max-height:560px;
  padding-right:8px;
}
.t4-policy-item{
  min-height:132px;
  padding:16px 17px;
  border-radius:18px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--panel-strong) 82%,transparent),
      color-mix(in srgb,var(--panel-soft) 100%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.t4-policy-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(12,18,45,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.t4-policy-item-head{
  gap:14px;
}
.t4-policy-item-copy strong{
  font-size:0.75rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.t4-policy-item-copy small{
  margin-top:7px;
  color:color-mix(in srgb,var(--muted) 84%,white 16%);
  font-size:0.5rem;
  line-height:1.6;
}
.t4-policy-origin{
  margin-top:10px;
  padding:5px 9px;
  font-size:0.4375rem;
  color:color-mix(in srgb,var(--faint) 88%,white 12%);
}
.t4-policy-item .badge{
  min-width:52px;
  justify-content:center;
  font-size:0.5rem;
  font-weight:800;
}
.t4-policy-actions{
  margin-top:16px;
}
.policy-action-pill{
  min-width:118px;
  height:40px;
  padding:0 14px 0 10px;
  gap:10px;
  border-radius:14px;
  font-size:0.5625rem;
}
.policy-action-icon{
  width:24px;
  height:24px;
  border-radius:9px;
}
.t4-search-panel .panel-head{
  align-items:flex-start;
  padding-bottom:14px;
}
.t4-search-panel .panel-head h3{
  font-size:0.9375rem;
  letter-spacing:-.01em;
}
.t4-search-panel .panel-head p{
  margin-top:6px;
  max-width:42ch;
  color:color-mix(in srgb,var(--muted) 88%,white 12%);
  line-height:1.6;
  font-size:0.5625rem;
}
.t4-search-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.t4-search-choice{
  min-height:92px;
  padding:16px 60px 16px 16px;
  gap:8px;
  border-radius:16px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--panel-strong) 78%,transparent),
      color-mix(in srgb,var(--panel-soft) 100%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.t4-search-choice:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(12,18,45,.16), inset 0 1px 0 rgba(255,255,255,.04);
}
.t4-search-choice strong{
  font-size:0.6875rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.t4-search-choice small{
  color:color-mix(in srgb,var(--muted) 84%,white 16%);
  font-size:0.5rem;
  line-height:1.55;
  padding-right:8px;
}
.t4-search-choice::after,
.t4-search-choice::before{
  right:16px;
}
.t4-search-choice::after{
  width:26px;
  height:26px;
  border-radius:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.t4-search-choice::before{
  width:26px;
  height:26px;
  font-size:0.6875rem;
}
.t4-search-choice:has(input:checked){
  border-color:color-mix(in srgb,var(--accent) 50%,var(--line-strong));
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--accent) 13%,var(--panel-strong)),
      color-mix(in srgb,var(--accent2) 9%,var(--panel-soft)));
  box-shadow:
    0 14px 34px rgba(76,87,255,.16),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.t4-search-choice:has(input:checked) strong{
  color:color-mix(in srgb,white 92%,var(--text) 8%);
}
.t4-search-choice:has(input:checked) small{
  color:color-mix(in srgb,white 70%,var(--muted) 30%);
}
#t4SearchSummary,
#t4EnabledCount,
#t4BlockedCount{
  font-weight:800;
}
.t4-empty{
  min-height:200px;
  font-size:0.625rem;
  color:color-mix(in srgb,var(--muted) 86%,white 14%);
}
html[data-theme="light"] .t4-policy-item,
html[data-theme="light"] .t4-search-choice{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
html[data-theme="light"] .t4-policy-item-copy small,
html[data-theme="light"] .t4-search-choice small,
html[data-theme="light"] .t4-policy-panel .panel-head p,
html[data-theme="light"] .t4-search-panel .panel-head p{
  color:color-mix(in srgb,var(--muted) 92%,black 8%);
}
@media(max-width:1180px){
  .t4-search-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:980px){
  .t4-policy-grid{
    grid-template-columns:1fr;
  }
  .t4-policy-list{
    max-height:none;
  }
}


/* T4 站点策略的紧凑卡片布局。
 */
.t4-policy-list{
  gap:10px;
}
.t4-policy-item.compact{
  min-height:0;
  padding:13px 14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  border-radius:16px;
}
.t4-policy-main{
  min-width:0;
}
.t4-policy-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.t4-policy-title-row>strong{
  min-width:0;
  flex:1;
  font-size:0.75rem;
  font-weight:820;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.t4-policy-title-row .badge{
  flex:0 0 auto;
  min-width:50px;
  height:27px;
  font-size:0.5rem;
}
.t4-policy-meta-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
  color:color-mix(in srgb,var(--muted) 88%,white 12%);
  font-size:0.5rem;
}
.t4-policy-meta-row .t4-policy-origin{
  margin-top:0;
  padding:4px 7px;
  font-size:0.4375rem;
}
.t4-policy-item.compact .t4-policy-actions{
  margin-top:0;
  flex:0 0 auto;
}
.t4-policy-item.compact .policy-action-pill{
  min-width:108px;
  height:36px;
  padding:0 12px 0 8px;
  border-radius:12px;
  font-size:0.5625rem;
}
.t4-policy-item.compact .policy-action-icon{
  width:22px;
  height:22px;
  border-radius:8px;
}
.t4-policy-item.compact:hover{
  transform:translateY(-1px);
}
html[data-theme="light"] .t4-policy-meta-row{
  color:color-mix(in srgb,var(--muted) 92%,black 8%);
}

@media(max-width:900px){
  .t4-policy-item.compact{
    grid-template-columns:1fr;
  }
  .t4-policy-item.compact .t4-policy-actions{
    margin-top:2px;
  }
}


/* T4 状态居中和亮色选中卡片。
 */
.t4-policy-item.compact{
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
}
.t4-policy-title-row{
  display:block;
  min-width:0;
}
.t4-policy-title-row>strong{
  display:block;
}
.t4-policy-status{
  align-self:center;
  justify-self:center;
  min-width:54px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0.5rem;
  font-weight:800;
}
.t4-policy-item.compact .t4-policy-actions{
  align-self:center;
  justify-self:end;
}
html[data-theme="light"] .t4-search-choice:has(input:checked){
  border-color:#90a2ff;
  background:
    linear-gradient(135deg,
      rgba(97,123,255,.10),
      rgba(61,193,255,.10));
  box-shadow:
    0 10px 24px rgba(76,87,255,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] .t4-search-choice:has(input:checked) strong{
  color:#172033;
}
html[data-theme="light"] .t4-search-choice:has(input:checked) small{
  color:#5a667d;
}
html[data-theme="light"] .t4-search-choice:has(input:checked)::after{
  background:linear-gradient(135deg,#6278ff,#2da7ff);
  box-shadow:0 8px 18px rgba(76,87,255,.18);
}
html[data-theme="light"] .t4-search-choice:has(input:checked)::before{
  color:#fff;
}
@media(max-width:900px){
  .t4-policy-item.compact{
    grid-template-columns:1fr;
    align-items:start;
  }
  .t4-policy-status{
    justify-self:start;
    margin-top:2px;
  }
  .t4-policy-item.compact .t4-policy-actions{
    justify-self:start;
  }
}


/* =========================================================
   Shared site policy layout for 全局 / Emby / STRM / FW-Rex
   ========================================================= */
.site-policy-grid{
  gap:18px;
  align-items:stretch;
}
.site-policy-grid .t4-policy-panel .panel-body{
  padding-top:4px;
}
.site-policy-grid .t4-policy-list{
  max-height:520px;
  padding-right:6px;
}
.site-policy-grid .t4-policy-item.compact{
  min-height:0;
  grid-template-columns:34px minmax(0,1fr) auto auto;
  grid-template-areas:"handle main status actions";
  gap:10px;
  padding:11px 12px;
}
.site-policy-grid .site-order-handle{grid-area:handle;align-self:center}
.site-policy-grid .site-order-spacer{grid-area:handle;width:34px;height:1px}
.site-policy-grid .t4-policy-main{grid-area:main}
.site-policy-grid .t4-policy-status{grid-area:status;margin:0}
.site-policy-grid .t4-policy-item.compact .t4-policy-actions{grid-area:actions;margin:0}
.site-policy-grid .t4-policy-main .t4-policy-origin{
  white-space:nowrap;
}
.site-policy-latency{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  color:var(--muted);
  font-weight:750;
}
@media(max-width:980px){
  .site-policy-grid{
    grid-template-columns:1fr;
  }
  .site-policy-grid .t4-policy-list{
    max-height:min(480px,54vh) !important;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .site-policy-grid .t4-policy-item.compact{
    grid-template-columns:34px minmax(0,1fr) auto;
    grid-template-areas:
      "handle main status"
      "handle actions actions";
    align-items:center;
  }
  .site-policy-grid .t4-policy-item.compact .t4-policy-actions{
    justify-self:end;
  }
}

@media(max-width:430px){
  .site-policy-grid .t4-policy-item.compact{
    grid-template-columns:30px minmax(0,1fr);
    grid-template-areas:
      "handle main"
      "handle status"
      "handle actions";
    gap:7px 9px;
    padding:10px;
  }
  .site-policy-grid .site-order-handle,
  .site-policy-grid .site-order-spacer{width:30px}
  .site-policy-grid .t4-policy-status,
  .site-policy-grid .t4-policy-item.compact .t4-policy-actions{
    justify-self:start;
  }
  .site-policy-grid .t4-policy-item.compact .policy-action-pill{
    min-width:0;
    height:34px;
  }
}


/* 居中提示、站点弹窗与站源管理页布局。
 */
.modal-backdrop{
  background:radial-gradient(circle at 50% 50%,rgba(8,14,38,.32),rgba(5,10,26,.72));
  backdrop-filter:blur(14px) saturate(1.06);
}
.modal{
  width:min(760px,calc(100vw - 28px));
  max-height:min(560px,calc(100vh - 48px));
  border-radius:28px;
  box-shadow:0 34px 100px rgba(4,10,28,.32),0 8px 32px rgba(18,24,52,.16);
}
.modal::before{
  width:380px;height:380px;right:-190px;top:-210px;
  background:radial-gradient(circle,rgba(92,104,255,.18),rgba(0,195,255,.12) 32%,transparent 68%);
}
.modal-head{padding:22px 24px 18px}
.modal-title h3{font-size:1.75rem;letter-spacing:-.04em}
.modal-body{padding:18px 24px 24px}
.modal-body>p{font-size:0.8125rem;line-height:1.75;margin-bottom:16px}
.site-list{gap:14px}
.site-item{
  position:relative;
  min-height:96px;
  grid-template-columns:52px minmax(0,1fr) auto;
  padding:16px 16px 16px 18px;
  gap:14px;
  border-radius:20px;
}
.site-item.selected{
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line-strong));
  box-shadow:0 12px 30px rgba(76,87,255,.10), inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);
}
.site-avatar{width:52px;height:52px;border-radius:16px;font-size:0.9375rem}
.site-info strong{font-size:0.9375rem}
.site-info small{font-size:0.75rem;white-space:normal;line-height:1.55}
.site-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.site-select-pill{
  position:absolute;left:16px;top:14px;z-index:2;
  min-height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel-strong) 88%,transparent);color:var(--muted);
  font-size:0.6875rem;font-weight:800;cursor:pointer;transition:.18s ease;
}
.site-item.selected .site-select-pill{
  color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 10px 22px rgba(76,87,255,.22);
}
.site-action-btn{
  min-height:40px;padding:0 16px;border-radius:14px;border:1px solid var(--line);cursor:pointer;
  font-size:0.75rem;font-weight:850;color:var(--text);background:var(--panel-strong);transition:.18s ease;
}
.site-action-btn:hover{transform:translateY(-1px);border-color:var(--line-strong)}
.site-action-btn.retry{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#ff6c89,#ff5076 52%,#ff7959);
  box-shadow:0 12px 26px rgba(255,90,120,.18);
}
.site-action-btn.retry:hover{filter:brightness(1.04)}
html[data-theme="light"] .site-item.selected{background:linear-gradient(135deg,rgba(37,99,235,.05),rgba(115,95,255,.04))}
html[data-theme="light"] .site-select-pill{background:#fff}
html[data-theme="light"] .site-action-btn{background:#fff}
html[data-theme="light"] .modal{box-shadow:0 28px 70px rgba(17,24,39,.18)}

.toast{
  left:50%;top:50%;bottom:auto;transform:translate(-50%,-44%);
  min-width:240px;max-width:min(520px,calc(100vw - 40px));
  padding:16px 20px 16px 50px;border-radius:18px;font-size:0.8125rem;font-weight:700;
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--panel-strong) 96%,transparent),color-mix(in srgb,var(--panel) 90%,transparent));
  box-shadow:0 28px 80px rgba(7,12,26,.22), inset 0 1px 0 rgba(255,255,255,.10);
}
.toast::before{
  content:"✓";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:0.75rem;font-weight:900;
  box-shadow:0 8px 20px rgba(76,87,255,.22);
}
.toast.show{transform:translate(-50%,-50%)}

.manage-overview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:10px 0 14px;
}
.overview-mini{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;padding:16px 18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--panel-strong) 92%,transparent),color-mix(in srgb,var(--panel-soft) 90%,transparent));
  box-shadow:var(--shadow-soft);
}
.overview-mini::after{
  content:"";position:absolute;inset:auto -20px -20px auto;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle,rgba(92,104,255,.14),transparent 70%);pointer-events:none;
}
.overview-mini span{display:block;color:var(--muted);font-size:0.6875rem;line-height:1.5}
.overview-mini strong{display:block;margin-top:8px;font-size:1.875rem;line-height:1;letter-spacing:-.04em}
.overview-mini small{display:block;margin-top:8px;color:var(--faint);font-size:0.6875rem}
.manage-columns{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(320px,.92fr);gap:14px;align-items:start}
.manage-main,.manage-side{display:grid;gap:14px}
.manage-panel{margin-top:0 !important}
.input-helper-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.input-helper-card{
  border:1px dashed var(--line);border-radius:16px;padding:14px 14px 13px;background:color-mix(in srgb,var(--panel-soft) 92%,transparent)
}
.input-helper-card strong{display:block;font-size:0.8125rem}
.input-helper-card p{margin:6px 0 0;color:var(--muted);font-size:0.6875rem;line-height:1.6}
html[data-theme="light"] .overview-mini{background:#fff}
html[data-theme="light"] .input-helper-card{background:#fff}

@media(max-width:1080px){
  .manage-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .manage-columns{grid-template-columns:1fr}
}
@media(max-width:760px){
  .modal-title h3{font-size:1.375rem}
  .site-item{grid-template-columns:44px minmax(0,1fr);padding-top:44px}
  .site-item-actions{grid-column:1 / -1;justify-content:flex-start}
  .site-select-pill{left:14px;top:12px}
  .toast{padding-left:48px;font-size:0.75rem}
  .manage-overview,.input-helper-grid{grid-template-columns:1fr}
}



/* 站源页面、弹窗及来源表单的间距和控件样式。
 */
.toast{
  left:50%;
  top:50%;
  bottom:auto;
  transform:translate(-50%,-46%);
  min-width:260px;
  max-width:min(520px,calc(100vw - 40px));
  padding:16px 18px;
  border-radius:18px;
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--panel-strong) 98%,transparent),color-mix(in srgb,var(--panel-soft) 88%,transparent));
  box-shadow:0 26px 70px rgba(7,12,26,.18), inset 0 1px 0 rgba(255,255,255,.10);
  font-size:0.8125rem;
  font-weight:750;
  line-height:1.5;
}
.toast::before{display:none;content:none}
.toast.show{transform:translate(-50%,-50%)}

.modal{
  display:flex;
  flex-direction:column;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.98);
}
.modal.show{transform:translate(-50%,-50%) scale(1)}
.modal-body{overflow:auto}

.site-item{
  min-height:88px;
  align-items:center;
  padding:16px 18px;
}
.site-item.selected{box-shadow:none}
.site-item-actions{min-width:92px}
.site-action-btn.retry{
  color:#fff !important;
  border-color:transparent;
  background:linear-gradient(135deg,#ff6c89,#ff5076 52%,#ff7959);
}
.site-action-btn.retry.pending{
  background:linear-gradient(135deg,#7a7f8f,#a1a6b5);
}
html[data-theme="light"] .site-action-btn.retry{
  color:#fff !important;
  background:linear-gradient(135deg,#ff6b89,#f24a72 52%,#ff7a5d);
  box-shadow:0 10px 22px rgba(242,74,114,.16);
}

.manage-columns{
  grid-template-columns:1fr;
  gap:16px;
}
.manage-side{
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.manage-main,.manage-side{gap:16px}
.manage-panel{overflow:hidden}

.field input,
.field textarea,
.source-proxy-editor input{
  background:color-mix(in srgb,var(--panel-strong) 94%,transparent);
  border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .source-proxy-editor input{
  background:#fff;
}
.field input::placeholder,
.field textarea::placeholder,
.source-proxy-editor input::placeholder{
  color:var(--faint);
}

.source-inline-editor{
  margin-top:12px;
  padding:12px 12px 0;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
}
.source-inline-editor label{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:0.625rem;
  font-weight:700;
}
.source-proxy-editor{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
}
.source-proxy-editor input{
  height:40px;
  font-size:0.6875rem;
}
.tvbox-sites-toggle button{
  border:0;
  background:transparent;
}
.tvbox-sites-toggle button:focus-visible,
.policy-action-pill:focus-visible,
.site-action-btn:focus-visible,
.switch-btn:focus-visible,
.btn:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 52%,transparent);
  outline-offset:2px;
}

.tvbox-site-grid{
  gap:8px;
  margin-top:12px;
}
.tvbox-site-chip{
  min-height:36px;
  font-size:0.5625rem;
}

@media(max-width:760px){
  .site-item{
    grid-template-columns:44px minmax(0,1fr);
  }
  .site-item-actions{
    grid-column:1 / -1;
    justify-content:flex-start;
    min-width:0;
  }
  .source-proxy-editor{
    grid-template-columns:1fr;
  }
}


/* 输入框、代理编辑与操作提示样式。
 */

/* Proxy editor only appears after clicking “设置代理”. */
.source-inline-editor{
  display:none;
  margin-top:14px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:color-mix(in srgb,var(--panel-soft) 86%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.source-inline-editor.show{
  display:block;
  animation:sourceEditorIn .18s ease both;
}
@keyframes sourceEditorIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
.source-inline-editor label{
  display:block;
  margin:0 0 9px;
  color:var(--muted);
  font-size:0.625rem;
  font-weight:750;
}
.source-proxy-editor{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  margin:0;
}
.source-proxy-editor.show{
  display:grid;
}
.source-proxy-editor input{
  height:42px;
  padding:0 13px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  outline:none;
  background:var(--panel-strong);
  color:var(--text);
  font-size:0.6875rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.source-proxy-editor input:focus{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong));
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.source-proxy-editor .btn{
  height:42px;
}
html[data-theme="light"] .source-inline-editor{
  background:#f8faff;
}
html[data-theme="light"] .source-proxy-editor input{
  background:#fff;
}

/* 明确表单控件的边界和交互状态。 */
.field{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:color-mix(in srgb,var(--panel-soft) 82%,transparent);
}
.field label{
  margin:0 0 8px;
  color:var(--muted);
  font-size:0.625rem;
  font-weight:700;
}
.field input,
.field textarea{
  width:100%;
  min-height:42px;
  padding:0 12px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  outline:none;
  background:var(--panel-strong);
  color:var(--text);
  font-size:0.6875rem;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.field textarea{
  min-height:104px;
  padding:11px 12px;
  line-height:1.55;
  resize:vertical;
}
.field input:focus,
.field textarea:focus{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
}
.field input::placeholder,
.field textarea::placeholder{
  color:var(--faint);
}
html[data-theme="light"] .field{
  background:#f8faff;
}
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea{
  background:#fff;
}

/* 自定义下拉框沿用输入字段的视觉样式。 */
.field .mf-select{
  min-height:42px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:var(--panel-strong);
}
.field .mf-select-trigger{
  min-height:40px;
  padding:0 38px 0 12px;
  font-size:0.6875rem;
}
.field .mf-select-trigger::after{
  right:14px;
}
.field .mf-select.open{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
}
html[data-theme="light"] .field .mf-select{
  background:#fff;
}

/* 操作提示使用居中文字的消息框。 */
.toast{
  left:50%;
  top:50%;
  bottom:auto;
  min-width:260px;
  min-height:54px;
  max-width:min(520px,calc(100vw - 40px));
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.5;
  transform:translate(-50%,-46%);
  border-radius:18px;
}
.toast::before{
  display:none !important;
  content:none !important;
}
.toast.show{
  transform:translate(-50%,-50%);
}

/* 猫源标题与内容之间的间距。 */
.multi-source-title-copy strong{
  margin-top:1px;
}


/* 品牌区域、页脚和来源卡片对齐。
 */
.home-footer{
  margin-top:18px;
  padding-top:20px;
}
.home-footer span:first-child{
  color:var(--muted);
}
.home-footer span:last-child{
  text-align:right;
}
@media(max-width:760px){
  .home-footer span:last-child{
    text-align:left;
  }
}

.panel-meta-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:31px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel-soft);
  color:var(--muted);
  font-size:0.5625rem;
  font-weight:650;
  white-space:nowrap;
}

.source-count-badge{
  width:56px;
  min-width:56px;
  height:56px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex:0 0 auto;
  line-height:1.05;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.source-count-badge small{
  display:block;
  margin:0;
  font-size:0.5rem;
  font-weight:750;
  color:inherit;
  letter-spacing:.01em;
}
.source-count-badge strong{
  display:block;
  margin-top:3px;
  font-size:0.6875rem;
  font-weight:820;
  color:inherit;
}
.source-count-badge.ok{
  color:var(--green);
  background:color-mix(in srgb,var(--green) 6%,var(--panel));
}
.source-count-badge.wait{
  color:var(--yellow);
  background:color-mix(in srgb,var(--yellow) 7%,var(--panel));
}

/* 亮色主题下导入来源标题的对齐。 */
.multi-source-head{
  align-items:flex-start;
}
.multi-source-title-copy small{
  line-height:1.45;
}

/* 文件上传面板与信任说明对齐。 */
.upload-dropzone{
  min-height:232px;
}
.upload-dropzone > div{
  max-width:320px;
}
.upload-dropzone .button-row{
  justify-content:center;
}
.site-option.compact-trust{
  align-items:center;
  padding-top:12px;
  padding-bottom:12px;
}
.site-option.compact-trust::after,
.site-option.compact-trust::before{
  top:50%;
}

/* 选中项隐藏尾部重复的勾选图标。 */
.mf-select-option{
  justify-content:flex-start;
}
.mf-select-option.selected::after{
  display:none;
  content:none;
}

/* 统一下拉选项与页面文字的排版。 */
.mf-select-option{
  font-size:0.625rem;
  font-weight:600;
  color:var(--muted);
}
.mf-select-option.selected{
  color:var(--text);
}

html[data-theme="light"] .panel-meta-note,
html[data-theme="light"] .source-count-badge,
html[data-theme="light"] .upload-dropzone{
  background:#fff;
}


/* 全局站点设置的草稿及保存状态。
 */
.service-meta b,
.health-btn b{
  font:inherit;
  color:inherit;
  font-weight:inherit;
}
#saveGlobalSites.has-pending{
  box-shadow:0 10px 28px rgba(76,87,255,.18),0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent);
}

/* 统一站源视图的布局。 */
.btn[data-dirty="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),0 10px 24px color-mix(in srgb,var(--accent) 15%,transparent)}


/* Forward/Rex 服务页的区域布局。
 */
.fw-page .page-tabs{
  margin-bottom:0;
}
.fw-page .tab-panel{
  padding-top:0;
}
.fw-page .tab-panel > .section-head{
  margin-top:20px;
}
.fw-page .fw-overview-metrics{
  margin-top:0;
}
.fw-page .fw-overview-grid{
  margin-top:14px;
  align-items:stretch;
}
.fw-page .fw-overview-grid > .panel{
  min-height:210px;
}
.fw-page .fw-address-panel{
  max-width:none;
}
.fw-page .fw-address-panel .code-box{
  min-height:66px;
}
.fw-page .tab-panel[data-panel-name="search"] .section-head,
.fw-page .tab-panel[data-panel-name="sites"] .section-head,
.fw-page .tab-panel[data-panel-name="address"] .section-head{
  margin-bottom:13px;
}
@media(max-width:760px){
  .fw-page .tab-panel > .section-head{margin-top:16px}
}


/* Forward/Rex 概览与未保存提示。
 */
.fw-page .fw-overview-runtime{
  margin-top:14px;
}
.fw-overview-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.fw-overview-item{
  min-height:104px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:color-mix(in srgb,var(--panel-soft) 88%,transparent);
}
.fw-overview-item span,
.fw-overview-item small{
  display:block;
  color:var(--muted);
  font-size:0.5625rem;
}
.fw-overview-item strong{
  display:block;
  margin:9px 0 7px;
  font-size:1.375rem;
  letter-spacing:-.03em;
}
.fw-service-panel{
  max-width:none;
}
.btn[data-dirty="true"]{
  position:relative;
  border-color:color-mix(in srgb,var(--accent) 52%,var(--line-strong));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),0 10px 24px color-mix(in srgb,var(--accent) 16%,transparent);
}
.btn[data-dirty="true"]::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:7px;
  display:inline-block;
  background:#ffb84d;
  box-shadow:0 0 0 4px rgba(255,184,77,.10);
}
html[data-theme="light"] .fw-overview-item{
  background:#fff;
}
@media(max-width:900px){
  .fw-overview-strip{grid-template-columns:1fr}
}


/* 主题切换时的反馈动画。
 */
:root{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

@media (prefers-reduced-motion:no-preference){
  html.theme-switching body,
  html.theme-switching body::before,
  html.theme-switching body::after,
  html.theme-switching .topbar,
  html.theme-switching .hero,
  html.theme-switching .panel,
  html.theme-switching .card,
  html.theme-switching .metric,
  html.theme-switching .activity-panel,
  html.theme-switching .service-card,
  html.theme-switching .page-tabs,
  html.theme-switching .mainnav,
  html.theme-switching .btn,
  html.theme-switching .field,
  html.theme-switching .switch-row,
  html.theme-switching .code-box,
  html.theme-switching .t4-policy-item,
  html.theme-switching .t4-search-choice{
    transition:
      background-color .38s ease,
      background .38s ease,
      border-color .38s ease,
      color .32s ease,
      box-shadow .38s ease,
      opacity .32s ease !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration:.42s;
    animation-timing-function:cubic-bezier(.2,.7,.2,1);
  }
  ::view-transition-old(root){animation-name:moreplay-theme-out}
  ::view-transition-new(root){animation-name:moreplay-theme-in}

  @keyframes moreplay-theme-out{
    from{opacity:1;filter:blur(0)}
    to{opacity:0;filter:blur(2px)}
  }
  @keyframes moreplay-theme-in{
    from{opacity:0;filter:blur(2px)}
    to{opacity:1;filter:blur(0)}
  }
}


/* 主题切换的覆盖层与过渡效果。
 */
.theme-switch-ripple{
  position:fixed;
  z-index:9998;
  width:48px;
  height:48px;
  border-radius:50%;
  pointer-events:none;
  transform:translate3d(-50%,-50%,0) scale(.35);
  opacity:0;
  contain:strict;
  will-change:transform,opacity;
}
.theme-switch-ripple.to-light{
  background:radial-gradient(circle,rgba(255,255,255,.94) 0 16%,rgba(130,204,255,.42) 40%,transparent 72%);
  box-shadow:0 0 24px rgba(116,170,255,.34);
}
.theme-switch-ripple.to-dark{
  background:radial-gradient(circle,rgba(126,106,255,.86) 0 16%,rgba(31,86,255,.34) 42%,transparent 72%);
  box-shadow:0 0 24px rgba(100,92,255,.28);
}
.theme-switch-ripple.go{
  animation:moreplay-ripple-burst .34s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes moreplay-ripple-burst{
  0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.35)}
  24%{opacity:.82}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(7)}
}

@media (prefers-reduced-motion:no-preference){
  html.theme-switching-full body{
    animation:moreplay-theme-full-pulse .30s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes moreplay-theme-full-pulse{
    0%{opacity:1}
    42%{opacity:.90}
    100%{opacity:1}
  }
}

@media (prefers-reduced-motion:no-preference){
  html.theme-view-transition::view-transition-old(root){
    animation:none;
    z-index:1;
  }
  html.theme-view-transition::view-transition-new(root){
    z-index:2;
    animation:moreplay-theme-radial-reveal .62s cubic-bezier(.22,.75,.18,1) both;
  }
  @keyframes moreplay-theme-radial-reveal{
    from{clip-path:circle(0 at var(--theme-x) var(--theme-y));filter:saturate(1.18) brightness(1.08)}
    72%{filter:saturate(1.08) brightness(1.03)}
    to{clip-path:circle(var(--theme-r) at var(--theme-x) var(--theme-y));filter:none}
  }
}

/* Emby 分区管理页面布局。
 */
.emby-overview-metrics{
  margin-top:0;
}
.emby-overview-grid{
  margin-top:14px;
  align-items:stretch;
}
.emby-overview-grid > .panel{
  min-height:235px;
}
.emby-overview-strip{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.emby-service-panel{
  max-width:none;
}
/* 预热模式菜单跨过下方缓存卡片，避免卡片合成层遮挡点击。 */
[data-panel-name="warmup"] .panel:has(.mf-select.open){
  position:relative;
  z-index:20;
  overflow:visible;
}
[data-tabs="emby"]{
  margin-bottom:0;
}
[data-tab-panel="emby"]{
  padding-top:0;
}
[data-tab-panel="emby"] > .section-head{
  margin-top:20px;
}
[data-tab-panel="emby"][data-panel-name="search"] .section-head,
[data-tab-panel="emby"][data-panel-name="sites"] .section-head,
[data-tab-panel="emby"][data-panel-name="address"] .section-head{
  margin-bottom:13px;
}
#embyAccountGrid.account-grid{
  margin-top:0;
}
@media(max-width:900px){
  .emby-overview-strip{grid-template-columns:1fr}
}
@media(max-width:760px){
  [data-tab-panel="emby"] > .section-head{margin-top:16px}
}


/* Emby 设备列表滚动与账号编辑控件。
 */
#embyDeviceList{
  max-height:190px;
  overflow-y:auto;
  padding-right:5px;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong)) transparent;
}
#embyDeviceList::-webkit-scrollbar{width:6px}
#embyDeviceList::-webkit-scrollbar-track{background:transparent}
#embyDeviceList::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 58%,var(--line-strong)),
    color-mix(in srgb,var(--accent2) 46%,var(--line-strong))
  );
}

.account-edit-modal{
  width:min(560px,calc(100vw - 28px));
}
.account-edit-modal .modal-body{
  padding:18px 20px 22px;
}
.account-edit-modal .field-grid{
  grid-template-columns:1fr;
}
.account-edit-modal .switch-row{
  background:var(--panel-soft);
}

#embyAccountGrid .account-card{
  min-height:150px;
  display:flex;
  flex-direction:column;
}
#embyAccountGrid .account-card .button-row{
  margin-top:auto;
}


/* Emby 账号列表与连接地址的排版。
 */
.emby-account-head{
  align-items:center;
}
.emby-add-account{
  min-width:112px;
  justify-content:center;
}
.emby-add-account span{
  font-size:1rem;
  line-height:1;
  margin-right:4px;
}
.emby-account-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.emby-account-stat{
  position:relative;
  overflow:hidden;
  min-height:110px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel-soft) 84%,var(--accent) 3%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.emby-account-stat::after{
  content:"";
  position:absolute;
  width:86px;
  height:86px;
  right:-28px;
  top:-28px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%);
}
.emby-account-stat span{display:block;color:var(--muted);font-size:0.5625rem}
.emby-account-stat strong{display:block;margin-top:8px;font-size:1.5rem;line-height:1;color:var(--text)}
.emby-account-stat small{display:block;margin-top:8px;color:var(--faint);font-size:0.5rem}

.emby-account-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
.emby-account-card{
  position:relative;
  overflow:hidden;
  min-height:205px !important;
  padding:18px !important;
  background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel-soft) 92%,transparent)) !important;
}
.emby-account-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 52%,color-mix(in srgb,var(--accent) 5%,transparent));
}
.emby-account-card.is-disabled{opacity:.82}
.emby-account-card-top{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
.emby-account-avatar{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:15px;
  color:#fff;
  font-size:1rem;
  font-weight:850;
  background:linear-gradient(145deg,#6c5cff,#25b8ff 62%,#20db9a);
  box-shadow:0 10px 24px rgba(67,95,255,.2),inset 0 1px 0 rgba(255,255,255,.25);
}
.emby-account-identity{min-width:0}
.emby-account-name-row{display:flex;align-items:center;gap:7px;min-width:0}
.emby-account-name-row h4{margin:0;font-size:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emby-account-identity p{margin:5px 0 0;color:var(--muted);font-size:0.5625rem}
.emby-default-chip{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  font-size:0.5rem;
  font-weight:750;
}
.emby-account-card-meta{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:18px;
}
.emby-account-card-meta span{
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel-soft);
}
.emby-account-card-meta small{display:block;color:var(--faint);font-size:0.5rem}
.emby-account-card-meta strong{display:block;margin-top:5px;color:var(--text);font-size:0.625rem}
.emby-account-card-actions{
  position:relative;
  display:flex;
  gap:8px;
  margin-top:14px;
}

.emby-address-hero{
  overflow:hidden;
  position:relative;
}
.emby-address-hero::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-90px;
  top:-130px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 17%,transparent),transparent 68%);
  pointer-events:none;
}
.emby-address-top{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:20px 22px 12px;
}
.emby-address-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,var(--panel)),var(--panel-soft));
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.08);
}
.emby-address-icon img{width:38px;height:38px;object-fit:contain}
.emby-address-kicker{display:block;color:var(--accent);font-size:0.5rem;font-weight:850;letter-spacing:.14em}
.emby-address-copy h3{margin:4px 0 0;font-size:1.0625rem}
.emby-address-copy p{margin:5px 0 0;color:var(--muted);font-size:0.5625rem}
.emby-address-box{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:stretch;
  margin:6px 22px 0;
  padding:10px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:color-mix(in srgb,var(--panel-soft) 92%,transparent);
}
.emby-address-url{min-width:0;padding:5px 7px}
.emby-address-url span{display:block;color:var(--faint);font-size:0.5rem}
.emby-address-url code{display:block;margin-top:6px;color:var(--text);font-size:0.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emby-copy-btn{min-width:96px;justify-content:center}
.emby-address-facts{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:14px 22px 22px;
}
.emby-address-fact{
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel-soft);
}
.emby-address-fact span{display:block;color:var(--faint);font-size:0.5rem}
.emby-address-fact strong{display:block;margin-top:6px;font-size:0.8125rem;color:var(--text)}
.emby-address-fact small{display:block;margin-top:5px;font-size:0.5rem;color:var(--muted)}
.emby-address-guide{margin-top:14px}
.emby-client-list{display:grid;gap:9px}
.emby-client-list>div{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel-soft);
}
.emby-client-list img{width:30px;height:30px;object-fit:contain}
.emby-client-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--accent);font-size:0.5625rem;font-weight:850}
.emby-client-list strong{display:block;font-size:0.625rem}
.emby-client-list small{display:block;margin-top:4px;color:var(--muted);font-size:0.5rem}
.emby-address-info-list .list-row{min-height:54px}

html[data-theme="light"] .emby-account-stat,
html[data-theme="light"] .emby-account-card,
html[data-theme="light"] .emby-address-fact,
html[data-theme="light"] .emby-client-list>div{
  background:#fff;
}

@media(max-width:900px){
  .emby-account-grid{grid-template-columns:1fr !important}
  .emby-account-summary{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:680px){
  .emby-account-summary{grid-template-columns:1fr}
  .emby-address-top{grid-template-columns:48px minmax(0,1fr)}
  .emby-address-top>.badge{grid-column:1 / -1;justify-self:start}
  .emby-address-box{grid-template-columns:1fr}
  .emby-address-facts{grid-template-columns:1fr}
  .emby-account-card-top{grid-template-columns:42px minmax(0,1fr)}
  .emby-account-card-top>.badge{grid-column:1 / -1;justify-self:start}
}


/* STRM 订阅管理的列表与操作区域。
 */
.strm-subscription-list{
  display:grid;
  gap:10px;
}
.strm-subscription-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel-soft);
  overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.strm-subscription-card.open{
  border-color:color-mix(in srgb,var(--accent) 26%,var(--line));
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.strm-subscription-summary{
  width:100%;
  min-height:68px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.strm-subscription-summary:hover{
  background:color-mix(in srgb,var(--accent) 4%,transparent);
}
.strm-subscription-chevron{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--muted);
  font-size:1rem;
  transition:transform .18s ease,background .18s ease;
}
.strm-subscription-card.open .strm-subscription-chevron{
  transform:rotate(180deg);
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));
}
.strm-subscription-title{
  min-width:0;
  display:grid;
  gap:5px;
}
.strm-subscription-title strong{
  font-size:0.75rem;
}
.strm-subscription-title small{
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.5;
}
.strm-subscription-detail{
  display:none;
  padding:0 15px 15px;
}
.strm-subscription-card.open .strm-subscription-detail{
  display:block;
  animation:strmSubscriptionOpen .18s ease both;
}
@keyframes strmSubscriptionOpen{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
.strm-subscription-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:12px 2px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:0.5625rem;
}
.strm-episode-panel{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  overflow:hidden;
}
.strm-episode-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 13px;
  border-bottom:1px solid var(--line);
}
.strm-episode-head>div:first-child{
  display:grid;
  gap:4px;
}
.strm-episode-head strong{
  font-size:0.6875rem;
}
.strm-episode-head small{
  color:var(--muted);
  font-size:0.5625rem;
}
.button-row.compact{
  margin:0;
  gap:7px;
}
.button-row.compact .btn{
  min-height:30px;
  padding:0 10px;
  font-size:0.5625rem;
}
.strm-episode-grid{
  max-height:278px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:12px;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--accent) 42%,var(--line-strong)) transparent;
}
.strm-episode-choice{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-soft);
  color:var(--text);
  font-size:0.5625rem;
  line-height:1.4;
  cursor:pointer;
}
.strm-episode-choice:hover{
  border-color:color-mix(in srgb,var(--accent) 25%,var(--line));
}
.strm-episode-choice input{
  width:16px;
  height:16px;
  flex:0 0 auto;
  accent-color:var(--accent);
}
.strm-subscription-actions{
  margin-top:12px;
}
html[data-theme="light"] .strm-subscription-card,
html[data-theme="light"] .strm-episode-choice{
  background:#fff;
}
@media(max-width:1100px){
  .strm-episode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .strm-subscription-summary{grid-template-columns:28px minmax(0,1fr)}
  .strm-subscription-summary>.badge{grid-column:2}
  .strm-episode-head{align-items:flex-start;flex-direction:column}
  .strm-episode-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .strm-episode-grid{grid-template-columns:1fr}
}


/* 搜索结果数量限制的状态提示。 */
.t4-search-choice.limit-disabled{
  opacity:.48;
  cursor:not-allowed;
}
.t4-search-choice.limit-disabled:hover{
  transform:none;
  border-color:var(--line);
}
.t4-search-choice.limit-disabled input{
  cursor:not-allowed;
}


/* STRM 订阅、媒体库、下载和手动入库页面布局。
 */
.strm-subscription-summary{
  grid-template-columns:34px minmax(0,1fr) auto;
  min-height:70px;
}
.strm-subscription-chevron{
  align-self:center;
  justify-self:center;
  line-height:1;
}
.strm-subscription-title{
  align-self:center;
}
.strm-subscription-summary>.badge{
  align-self:center;
}
.strm-subscription-route-row{
  display:grid;
  grid-template-columns:auto minmax(220px,1fr);
  gap:10px;
  margin-top:12px;
  align-items:center;
}
.strm-route-select{
  width:100%;
  min-height:38px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:0 12px;
  background:var(--panel);
  color:var(--text);
  outline:none;
  font:inherit;
}
.strm-route-select:focus{
  border-color:color-mix(in srgb,var(--accent) 62%,var(--line-strong));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}

/* 媒体库树形目录。 */
.strm-library-tree{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.strm-library-category{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--panel-soft);
}
.strm-library-category-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 14px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.strm-tree-chevron{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  transition:transform .18s ease;
}
.strm-library-category.open .strm-tree-chevron{transform:rotate(180deg)}
.strm-library-category-body{display:none;padding:0 10px 10px}
.strm-library-category.open .strm-library-category-body{display:grid;gap:8px}
.strm-library-item{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--panel);
}
.strm-library-item-head{
  width:100%;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.strm-library-item-head>div{display:grid;gap:4px}
.strm-library-item-head strong{font-size:0.6875rem}
.strm-library-item-head small{font-size:0.5625rem;color:var(--muted)}
.strm-library-item-detail{display:none;padding:0 12px 12px}
.strm-library-item.open .strm-library-item-detail{display:block}
.strm-library-actions{margin-top:12px}

/* 下载任务内部标签页。 */
.strm-download-tabs{
  margin:14px 0;
}
.local-video-path{
  margin-top:8px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--muted);
  font-size:0.5625rem;
  word-break:break-all;
}

/* 手动入库的搜索与选择区域。 */
.strm-manual-searchbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 170px auto;
  gap:12px;
  align-items:end;
}
.strm-manual-search-button{min-height:42px}
.strm-manual-results{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.strm-manual-result-card{
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  gap:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}
.strm-manual-poster{
  min-height:120px;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 70% 25%,rgba(56,189,248,.35),transparent 26%),
    linear-gradient(145deg,#1d2858,#10172f 45%,#351549);
  color:#fff;
  font-size:1.875rem;
  font-weight:900;
}
.strm-manual-poster img{width:100%;height:100%;object-fit:cover}
.strm-manual-poster iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
.strm-manual-result-body{
  min-width:0;
  display:grid;
  gap:10px;
  align-content:start;
}
.strm-manual-result-title{display:grid;gap:4px}
.strm-manual-result-title strong{font-size:0.8125rem}
.strm-manual-result-title small{font-size:0.5625rem;color:var(--muted)}
.strm-manual-scrape{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel-soft);
  font-size:0.5625rem;
}
.strm-manual-scrape input{
  width:16px;height:16px;accent-color:var(--accent);
}
.strm-manual-import-button{width:100%}

html[data-theme="light"] .strm-library-category,
html[data-theme="light"] .strm-library-item,
html[data-theme="light"] .strm-manual-result-card{
  box-shadow:0 12px 30px rgba(30,48,86,.06);
}

@media(max-width:900px){
  .strm-manual-results{grid-template-columns:1fr}
  .strm-manual-searchbar{grid-template-columns:1fr 150px}
  .strm-manual-search-button{grid-column:1/-1}
}
@media(max-width:680px){
  .strm-subscription-route-row{grid-template-columns:1fr}
  .strm-manual-searchbar{grid-template-columns:1fr}
  .strm-manual-result-card{grid-template-columns:68px minmax(0,1fr)}
  .strm-manual-poster{min-height:100px}
}


/* STRM 作品匹配和线路选择控件。
 */
.strm-manual-match-modal{
  width:min(820px,calc(100vw - 28px));
}
.strm-manual-match-modal .field small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:0.5625rem;
}
.strm-manual-route-panel{
  display:grid;
  gap:10px;
  animation:strmRouteReveal .2s ease both;
}
@keyframes strmRouteReveal{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}
.strm-manual-result-card.route-open{
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
  box-shadow:0 18px 38px rgba(0,0,0,.08);
}


/* STRM 设置、播放线路与下拉菜单的布局。
 */

/* 手动搜索的下拉菜单允许显示在面板边界之外。 */
.strm-manual-search-panel{
  overflow:visible !important;
  z-index:24;
}
.strm-manual-search-panel .panel-body{
  position:relative;
  z-index:4;
  overflow:visible;
}
.strm-manual-searchbar{
  position:relative;
  overflow:visible;
}
.strm-manual-searchbar .field{
  overflow:visible;
}
.strm-manual-searchbar .field:has(.mf-select.open){
  z-index:260;
}
.strm-manual-searchbar .mf-select.open{
  z-index:260;
}
.strm-manual-searchbar .mf-select-menu{
  z-index:280;
}

/* 动态线路选择使用统一的自定义下拉控件。 */
.strm-subscription-route-field{
  min-width:0;
  padding:9px 12px;
}
.strm-subscription-route-field label{
  margin-bottom:3px;
}
.strm-subscription-route-row.route-open{
  grid-template-columns:auto minmax(0,1fr);
  align-items:end;
}
.strm-subscription-route-row .mf-select{
  min-width:0;
}
.strm-subscription-route-row .mf-select-menu,
.strm-manual-route-panel .mf-select-menu{
  z-index:220;
}

/* 线路控件展开时保持海报宽高比。 */
.strm-manual-result-card{
  align-items:start;
}
.strm-manual-poster{
  width:84px;
  min-height:0 !important;
  height:auto;
  aspect-ratio:2 / 3;
  align-self:start;
}
.strm-manual-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.strm-manual-result-body{
  align-self:start;
}

/* 手动线路选择面板内的下拉控件。 */
.strm-manual-route-panel .field{
  overflow:visible;
}
.strm-manual-route-panel .field:has(.mf-select.open){
  z-index:220;
}

/* 明确显示设置是否已经保存。 */
#strmBaseSaveState{
  transition:.18s ease;
}


/* TMDB 选项、播放线路选择及箭头对齐。
 */

/* 所有增强后的下拉框都替换原生外观，不依赖字段容器的位置。
 */
select.mf-native-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-width:1px !important;
  min-height:1px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

/* 订阅与手动入库生成的下拉框使用统一尺寸。
 */
.strm-subscription-route-field .mf-select,
.strm-manual-route-panel .mf-select{
  width:100%;
}
.strm-subscription-route-field .mf-select-trigger,
.strm-manual-route-panel .mf-select-trigger{
  min-height:40px;
  padding:0 38px 0 10px;
}
.strm-subscription-route-field .mf-select-menu,
.strm-manual-route-panel .mf-select-menu{
  left:0;
  right:0;
  top:calc(100% + 7px);
}

/* 使用几何线条绘制箭头，避免不同系统字体的基线差异。
 */
.strm-subscription-chevron,
.strm-tree-chevron{
  position:relative;
  display:grid;
  place-items:center;
  line-height:0 !important;
  font-size:0 !important;
}
.strm-subscription-chevron::before,
.strm-tree-chevron::before{
  content:"";
  width:6px;
  height:6px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-1.5px) rotate(45deg);
  transform-origin:center;
  transition:transform .18s ease;
}
.strm-subscription-card.open .strm-subscription-chevron{
  transform:none;
}
.strm-subscription-card.open .strm-subscription-chevron::before{
  transform:translateY(1.5px) rotate(225deg);
}
.strm-library-category.open .strm-tree-chevron{
  transform:none;
}
.strm-library-category.open .strm-tree-chevron::before{
  transform:translateY(1.5px) rotate(225deg);
}

/* 为较长的 TMDB 模式名称保留菜单宽度。 */
#strmTmdbMetadataMode + .mf-select .mf-select-option,
#strmTmdbLanguage + .mf-select .mf-select-option{
  min-height:42px;
  height:auto;
  padding-top:8px;
  padding-bottom:8px;
  line-height:1.35;
  text-align:left;
}
#strmTmdbMetadataMode + .mf-select .mf-select-value,
#strmTmdbLanguage + .mf-select .mf-select-value{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* TMDB 与订阅设置菜单的浮层边界。
 */

/* 包含浮动下拉框的资料和订阅设置卡片允许菜单溢出显示。
 */
.strm-meta-settings-grid{
  position:relative;
  z-index:30;
  overflow:visible;
}
.strm-meta-settings-panel{
  overflow:visible !important;
}
.strm-meta-settings-panel .panel-body{
  position:relative;
  overflow:visible;
}
.strm-meta-settings-panel .field{
  overflow:visible;
}

/* 打开菜单时提高所属卡片层级，避免被相邻卡片和列表遮挡。
 */
.strm-meta-settings-panel:has(.mf-select.open){
  z-index:360;
}
.strm-meta-settings-panel .field:has(.mf-select.open){
  position:relative;
  z-index:370;
}
.strm-meta-settings-panel .mf-select.open{
  z-index:380;
}
.strm-meta-settings-panel .mf-select-menu{
  z-index:390;
}

/* 订阅列表保持在浮动菜单下方。 */
.tab-panel[data-panel-name="meta"] > .strm-subscriptions-panel{
  position:relative;
  z-index:1;
}

/* 限制语言选项列表的高度，并允许内部滚动。 */
#strmTmdbLanguage + .mf-select .mf-select-menu{
  max-height:min(300px,42vh);
  overscroll-behavior:contain;
}


/* 自定义 TMDB 语言输入区域。
 */
.strm-custom-language-modal{
  width:min(540px,calc(100vw - 28px));
}
.strm-custom-language-modal .field small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.55;
}
#strmCustomLanguageInput{
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}


/* 媒体库按来源、分类和资源三级展示。
 */
.strm-library-source-group{
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--panel);
  overflow:hidden;
}
.strm-library-source-head{
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.strm-source-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.strm-source-copy strong{
  font-size:0.75rem;
}
.strm-source-copy small{
  color:var(--muted);
  font-size:0.5625rem;
}
.strm-source-chevron{
  width:26px;
  height:26px;
  flex:0 0 26px;
  position:relative;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:9px;
}
.strm-source-chevron::before{
  content:"";
  width:6px;
  height:6px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-1.5px) rotate(45deg);
  transition:transform .18s ease;
}
.strm-library-source-group.open .strm-source-chevron::before{
  transform:translateY(1.5px) rotate(225deg);
}
.strm-library-source-body{
  display:none;
  padding:0 10px 10px;
}
.strm-library-source-group.open .strm-library-source-body{
  display:grid;
  gap:8px;
}

/* 分类层级使用比来源分组更轻的样式。 */
.strm-library-source-body > .strm-library-category{
  background:var(--panel-soft);
  border-radius:13px;
}

/* 具体媒体资源的列表行。 */
.strm-library-item-status{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:0.5625rem;
}
.strm-library-item-head{
  padding-left:14px;
  padding-right:14px;
}
.strm-library-item-detail{
  border-top:1px solid var(--line);
  padding-top:12px;
}

html[data-theme="light"] .strm-library-source-group{
  box-shadow:0 12px 34px rgba(30,48,86,.055);
}

@media(max-width:720px){
  .strm-library-item-head{
    align-items:flex-start;
  }
  .strm-library-item-status{
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
  }
}


/* 窄屏布局下的导航、卡片、表单和弹窗适配。
 */

.mobile-menu-toggle,
.mobile-nav-backdrop,
.mobile-nav-drawer{
  display:none;
}

@media(max-width:1150px){
  /* 隐藏桌面导航时提供可操作的移动导航入口。
 */
  .mobile-menu-toggle{
    display:grid;
  }
  .mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:890;
    background:rgba(4,7,14,.54);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    opacity:0;
    pointer-events:none;
    transition:opacity .24s ease;
  }
  .mobile-nav-drawer{
    display:flex;
    position:fixed;
    z-index:900;
    top:max(10px,env(safe-area-inset-top));
    right:10px;
    bottom:max(10px,env(safe-area-inset-bottom));
    width:min(340px,calc(100vw - 20px));
    padding:14px;
    flex-direction:column;
    border:1px solid var(--line-strong);
    border-radius:24px;
    background:color-mix(in srgb,var(--panel-strong) 96%,transparent);
    box-shadow:0 30px 100px rgba(0,0,0,.38);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    backdrop-filter:blur(28px) saturate(160%);
    transform:translateX(calc(100% + 26px));
    opacity:0;
    pointer-events:none;
    transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .22s ease;
  }
  .mobile-nav-open .mobile-nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  .mobile-nav-open .mobile-nav-drawer{
    transform:none;
    opacity:1;
    pointer-events:auto;
  }
  .mobile-nav-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:2px 2px 13px;
    border-bottom:1px solid var(--line);
  }
  .mobile-nav-brand{
    display:flex;
    align-items:center;
    min-width:0;
    gap:10px;
  }
  .mobile-nav-brand img{
    width:36px;
    height:36px;
    border-radius:11px;
    object-fit:cover;
  }
  .mobile-nav-brand strong{
    display:block;
    font-size:0.8125rem;
  }
  .mobile-nav-brand small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:0.5625rem;
  }
  .mobile-nav-links{
    display:grid;
    gap:5px;
    padding:13px 0;
  }
  .mobile-nav-links a{
    min-height:48px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid transparent;
    border-radius:14px;
    color:var(--muted);
    font-size:0.75rem;
    font-weight:780;
    transition:.18s ease;
  }
  .mobile-nav-links a::after{
    content:'›';
    color:var(--faint);
    font-size:1.125rem;
  }
  .mobile-nav-links a.active{
    color:var(--text);
    border-color:var(--line);
    background:var(--panel-soft);
  }
  .mobile-nav-links a:active{
    transform:scale(.985);
  }
  .mobile-nav-foot{
    margin-top:auto;
    padding:12px 4px 2px;
    border-top:1px solid var(--line);
    color:var(--faint);
    font-size:0.5625rem;
    line-height:1.6;
  }
  body.mobile-nav-lock{
    overflow:hidden;
    touch-action:none;
  }
}

@media(max-width:760px){
  html{
    scroll-padding-top:132px;
  }
  body{
    overflow-x:hidden;
  }
  .shell{
    width:calc(100% - 14px) !important;
    padding-top:max(7px,env(safe-area-inset-top)) !important;
    padding-bottom:max(34px,env(safe-area-inset-bottom)) !important;
  }
  .topbar{
    top:max(6px,env(safe-area-inset-top));
    height:60px;
    min-width:0;
    padding:0 9px 0 10px;
    gap:7px;
    border-radius:17px;
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .brand{
    min-width:0;
    gap:9px;
  }
  .brand-logo-img{
    width:36px !important;
    height:36px !important;
    border-radius:11px !important;
    flex:0 0 36px;
  }
  .brand-copy{
    min-width:0;
  }
  .brand-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:0.8125rem;
  }
  .brand-copy small,
  .status-pill{
    display:none !important;
  }
  .top-actions{
    gap:5px;
  }
  .icon-btn{
    width:36px;
    height:36px;
    border-radius:11px;
    flex:0 0 36px;
  }
  main{
    padding-top:12px;
  }

  /* 二级标签页横向排列并保持可访问。 */
  .page-tabs{
    top:74px !important;
    margin-top:9px;
    padding:4px;
    gap:3px;
    border-radius:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .page-tabs::-webkit-scrollbar{display:none}
  .page-tab{
    height:38px;
    padding:0 13px;
    border-radius:11px;
    scroll-snap-align:start;
  }
  .tab-panel{
    padding-top:20px;
  }

  /* 压缩窄屏标题区占用的纵向空间。 */
  .hero,
  .hero.compact{
    min-height:0 !important;
    padding:20px !important;
    gap:14px;
    border-radius:23px;
  }
  .hero h1,
  .hero.compact h1{
    margin-top:13px;
    font-size:clamp(2rem,10.2vw,2.625rem) !important;
    line-height:1.01;
  }
  .hero-copy>p{
    margin-top:13px;
    font-size:0.6875rem;
    line-height:1.65;
  }
  .hero-chips{
    gap:6px;
    margin-top:16px;
  }
  .chip{
    padding:7px 9px;
    border-radius:10px;
    font-size:0.53125rem;
  }
  .hero-side{
    min-height:178px !important;
    padding:15px;
    border-radius:19px;
  }
  .hero.compact .hero-side{
    min-height:0 !important;
  }
  .hero.compact .hero-side .grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px;
  }
  .hero.compact .hero-side .metric{
    min-height:92px;
    padding:12px;
  }
  .hero.compact .hero-side .metric strong{
    font-size:1.25rem;
  }
  .live-orb{
    width:76px;
    height:76px;
  }
  .live-orb-wrap{
    padding:12px 0 7px;
  }
  .live-title strong{
    font-size:0.875rem;
  }

  /* 手机端概览指标使用两列网格。 */
  .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px;
  }
  .metric{
    min-width:0;
    min-height:104px;
    padding:14px;
    border-radius:17px;
  }
  .metric strong{
    margin-top:6px;
    font-size:1.5rem;
  }
  .metric span{font-size:0.5625rem}
  .metric p{font-size:0.5rem;line-height:1.45}

  .section-head{
    margin:27px 2px 10px;
    align-items:flex-start;
    gap:8px;
    flex-wrap:wrap;
  }
  .section-head h2{
    font-size:1.25rem;
  }
  .section-head p{
    font-size:0.625rem;
  }
  .section-head>span{
    margin-left:auto;
    padding-top:4px;
    font-size:0.5rem;
  }

  /* 窄屏卡片与面板使用更紧凑的间距。 */
  .card,
  .service-card,
  .action-card{
    padding:16px;
    border-radius:20px;
  }
  .module-summary-card{
    min-height:0 !important;
  }
  .module-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px;
    margin-top:16px;
  }
  .module-summary>div{
    min-height:54px;
    padding:9px;
    border-radius:12px;
  }
  .module-summary strong{font-size:0.9375rem}
  .module-summary span{font-size:0.46875rem}
  .panel{
    border-radius:19px;
  }
  .panel-head{
    padding:15px 14px 11px;
    gap:8px;
  }
  .panel-body{
    padding:0 14px 14px;
  }
  .panel-head h3{font-size:0.875rem}
  .panel-head p{font-size:0.5625rem;line-height:1.45}

  /* 根据操作用途设置按钮宽度。 */
  .button-row{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:7px;
    margin-top:11px;
  }
  .button-row .btn,
  .btn{
    width:auto !important;
    min-height:40px;
    height:auto;
    padding:9px 13px;
    line-height:1.25;
  }
  .button-row .btn.primary:only-child{
    flex:1 1 auto;
  }

  .field{
    padding:10px 11px;
    border-radius:14px;
  }
  .field input,
  .field select,
  .field textarea,
  .mf-select-trigger{
    min-height:42px;
  }
  .switch-row{
    min-height:58px;
    padding:10px 11px;
    border-radius:14px;
  }

  /* 窄屏下保持搜索框和代码字段可用。 */
  .search-box{
    padding:8px;
    gap:7px;
  }
  .code-box{
    padding:9px;
    gap:7px;
  }
  .code-box .btn,
  .emby-copy-btn{
    flex:0 0 auto;
    min-width:70px;
    padding-inline:10px;
  }

  /* 长标签在列表内部换行，避免撑开页面。 */
  .list-row{
    min-width:0;
    gap:8px;
    padding:10px;
  }
  .list-main,
  .source-title,
  .switch-copy{
    min-width:0;
  }
  .list-main strong,
  .list-main small,
  .source-title h3,
  .source-title p{
    overflow-wrap:anywhere;
  }

  /* 表格通过横向滚动容纳较宽内容。 */
  .panel-body:has(> .table),
  .panel-body:has(.table){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table{
    min-width:620px;
  }

  /* 弹窗尺寸适配移动浏览器的可视区域。 */
  .modal{
    width:calc(100vw - 14px) !important;
    max-height:calc(100dvh - 20px) !important;
    border-radius:21px !important;
  }
  .modal-head{
    padding:15px 14px 12px !important;
  }
  .modal-title h3{
    font-size:1.125rem !important;
  }
  .modal-body{
    padding:12px 13px max(16px,env(safe-area-inset-bottom)) !important;
  }
  .site-item{
    min-height:70px !important;
    padding:11px !important;
    grid-template-columns:36px minmax(0,1fr) auto !important;
    gap:8px !important;
    border-radius:15px !important;
  }

  /* 操作提示避开手机底部手势区域。 */
  .toast{
    max-width:calc(100vw - 24px);
  }

  /* STRM 管理区域的窄屏布局。 */
  .strm-subscription-card,
  .strm-library-source-group,
  .strm-library-category,
  .strm-library-item,
  .strm-manual-result-card{
    border-radius:16px;
  }
  .strm-subscription-summary{
    padding:11px;
  }
  .strm-episode-panel{
    padding:10px;
    border-radius:14px;
  }
  .strm-episode-grid{
    gap:6px;
  }
  .strm-episode-choice{
    min-height:48px;
    padding:8px;
    font-size:0.5625rem;
  }
  .strm-library-source-head,
  .strm-library-category-head,
  .strm-library-item-head{
    min-width:0;
  }
  .strm-library-item-status{
    white-space:nowrap;
  }
  .strm-manual-result-card{
    gap:10px;
    padding:10px;
  }
  .strm-manual-poster{
    width:62px !important;
  }

  /* T4、Forward/Rex 和 Emby 的站点卡片。 */
  .t4-search-grid{
    grid-template-columns:1fr !important;
  }
  .t4-search-choice,
  .t4-site-card{
    min-width:0;
  }
  .fw-overview-strip,
  .emby-account-summary,
  .emby-address-facts{
    grid-template-columns:1fr 1fr !important;
  }

  /* 页脚在窄屏下保持紧凑排版。 */
  .footer{
    padding:22px 3px 0;
    gap:5px;
    font-size:0.5rem;
  }
}

@media(max-width:520px){
  .shell{
    width:calc(100% - 10px) !important;
  }
  .topbar{
    height:58px;
    padding-inline:8px;
    border-radius:15px;
  }
  .top-actions{
    gap:4px;
  }
  .icon-btn{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
  .mobile-nav-drawer{
    top:max(5px,env(safe-area-inset-top));
    right:5px;
    bottom:max(5px,env(safe-area-inset-bottom));
    width:calc(100vw - 10px);
    border-radius:20px;
  }
  .page-tabs{
    top:70px !important;
  }
  .hero,
  .hero.compact{
    padding:17px !important;
    border-radius:20px;
  }
  .hero h1,
  .hero.compact h1{
    font-size:clamp(1.875rem,10.8vw,2.375rem) !important;
  }
  .hero-tag{
    padding:6px 9px;
    font-size:0.53125rem;
  }
  .hero-side{
    padding:13px;
  }
  .metrics{
    gap:5px;
  }
  .metric{
    min-height:96px;
    padding:12px;
    border-radius:15px;
  }
  .metric strong{
    font-size:1.3125rem;
  }
  .card,
  .service-card,
  .action-card{
    padding:14px;
    border-radius:18px;
  }
  .source-summary,
  .module-summary,
  .fw-overview-strip,
  .emby-account-summary,
  .emby-address-facts{
    grid-template-columns:1fr 1fr !important;
  }
  .section-head>span{
    width:100%;
    margin-left:0;
    padding-top:0;
  }
  .button-row{
    gap:6px;
  }
  .button-row .btn,
  .btn{
    min-height:38px;
    padding:8px 11px;
    font-size:0.625rem;
  }
  .search-box{
    flex-wrap:wrap;
  }
  .search-box input{
    flex:1 1 100%;
    min-height:36px;
  }
  .search-box .btn{
    width:100% !important;
  }
  .code-box code{
    font-size:0.53125rem;
  }
  .modal-title{
    min-width:0;
  }
  .modal-title h3{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .site-item{
    grid-template-columns:32px minmax(0,1fr) !important;
  }
  .site-item-actions{
    grid-column:2;
    justify-self:start;
  }
  .strm-episode-grid{
    grid-template-columns:1fr !important;
  }
  .strm-manual-result-card{
    grid-template-columns:56px minmax(0,1fr) !important;
  }
  .strm-manual-poster{
    width:56px !important;
  }
  .fw-overview-strip,
  .emby-account-summary,
  .emby-address-facts{
    gap:6px;
  }
}

@media(max-width:380px){
  .brand-copy strong{font-size:0.75rem}
  .top-actions .icon-btn{width:32px;height:32px;flex-basis:32px}
  .hero h1,.hero.compact h1{font-size:1.8125rem !important}
  .metrics{grid-template-columns:1fr 1fr !important}
  .metric{padding:10px}
  .module-summary{grid-template-columns:1fr 1fr !important}
  .mobile-nav-links a{min-height:46px}
}


/* 最近活动快照与日志有限分页布局。
 */

/* 首页最近活动保持固定条数，不形成独立纵向滚动区。
 */
.activity-feed-panel{
  overflow:hidden;
}
#recentActivityList{
  overflow:visible !important;
  max-height:none !important;
}
#recentActivityList .feed-row{
  flex-shrink:0;
}

/* 日志筛选器与分页数量控件。 */
.logs-toolbar{
  grid-template-columns:minmax(0,1fr) auto;
}
.logs-toolbar-right{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:10px;
}
.logs-page-size-field{
  width:118px;
  min-width:118px;
  margin:0;
}
.logs-page-size-field label{
  display:block;
  margin:0 0 5px;
  color:var(--faint);
  font-size:0.5rem;
}
.logs-page-size-field .mf-select,
.logs-page-size-field select{
  width:100%;
}
.logs-page-size-field .mf-select-trigger{
  min-height:36px;
}

.logs-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.logs-pagination span{
  min-width:150px;
  text-align:center;
  color:var(--muted);
  font-size:0.5625rem;
}
.logs-pagination .btn:disabled{
  opacity:.38;
  cursor:not-allowed;
}

/* 日志页只渲染当前有限页的记录。 */
#allLogsList{
  min-height:120px;
}

@media(max-width:980px){
  .logs-toolbar{
    grid-template-columns:1fr;
  }
  .logs-toolbar-right{
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
  }
}

@media(max-width:760px){
  .logs-toolbar-right{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .logs-page-size-field{
    width:100%;
    min-width:0;
  }
  .logs-pagination{
    gap:8px;
  }
  .logs-pagination .btn{
    flex:1;
  }
  .logs-pagination span{
    min-width:0;
    flex:1.25;
  }
}


/* 各管理页面共用的动画与交互反馈。
 */

/* 页面分区的进入动画。 */
html.mp-motion-ready .mp-auto-reveal{
  opacity:0;
  transform:translate3d(0,14px,0) scale(.996);
  filter:blur(2.5px);
  will-change:opacity,transform,filter;
}
html.mp-motion-ready .mp-auto-reveal.mp-in-view{
  animation:mpSectionReveal .58s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--mp-delay,0ms);
}
@keyframes mpSectionReveal{
  0%{
    opacity:0;
    transform:translate3d(0,14px,0) scale(.996);
    filter:blur(2.5px);
  }
  55%{
    opacity:1;
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}

/* 容器进入后按顺序显示主要卡片。 */
html.mp-motion-ready .metrics.mp-auto-reveal > .metric,
html.mp-motion-ready .services-grid.mp-auto-reveal > .service-card{
  opacity:0;
  transform:translateY(10px) scale(.985);
}
html.mp-motion-ready .metrics.mp-auto-reveal.mp-in-view > .metric,
html.mp-motion-ready .services-grid.mp-auto-reveal.mp-in-view > .service-card{
  animation:mpChildReveal .48s cubic-bezier(.2,.8,.2,1) both;
}
html.mp-motion-ready .metrics.mp-in-view > :nth-child(1),
html.mp-motion-ready .services-grid.mp-in-view > :nth-child(1){animation-delay:.04s}
html.mp-motion-ready .metrics.mp-in-view > :nth-child(2),
html.mp-motion-ready .services-grid.mp-in-view > :nth-child(2){animation-delay:.085s}
html.mp-motion-ready .metrics.mp-in-view > :nth-child(3),
html.mp-motion-ready .services-grid.mp-in-view > :nth-child(3){animation-delay:.13s}
html.mp-motion-ready .metrics.mp-in-view > :nth-child(4),
html.mp-motion-ready .services-grid.mp-in-view > :nth-child(4){animation-delay:.175s}
html.mp-motion-ready .services-grid.mp-in-view > :nth-child(5){animation-delay:.22s}
html.mp-motion-ready .services-grid.mp-in-view > :nth-child(6){animation-delay:.265s}

@keyframes mpChildReveal{
  from{
    opacity:0;
    transform:translateY(10px) scale(.985);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* 动态插入列表行的显示动画。 */
.mp-dynamic-enter{
  animation:mpDynamicRowIn .38s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--mp-item-delay,0ms);
}
@keyframes mpDynamicRowIn{
  from{
    opacity:0;
    transform:translateY(8px) scale(.992);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* 标签切换反馈。 */
.page-tab{
  transition:
    color .2s ease,
    background .2s ease,
    box-shadow .24s ease,
    transform .2s cubic-bezier(.2,.8,.2,1);
}
.page-tab:hover{
  transform:translateY(-1px);
}
.page-tab:active{
  transform:translateY(0) scale(.97);
}
.page-tab.active{
  animation:mpTabActivate .26s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mpTabActivate{
  0%{transform:scale(.965)}
  70%{transform:scale(1.018)}
  100%{transform:none}
}

/* 面板、列表行和控件的交互反馈。 */
.panel{
  transition:
    border-color .26s ease,
    box-shadow .3s ease,
    background .26s ease;
}
.list-row,
.site-option,
.issue-card,
.strm-library-item,
.strm-subscription-card,
.strm-download-item,
.emby-account-item{
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}
.btn,
.icon-btn,
.log-filter,
.modal-close{
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    background .2s ease,
    border-color .2s ease,
    box-shadow .22s ease,
    filter .2s ease,
    opacity .2s ease;
}
.btn:active:not(:disabled),
.icon-btn:active:not(:disabled),
.log-filter:active:not(:disabled){
  transform:scale(.965);
}

/* 在支持指针的设备上显示克制的悬停反馈。 */
@media(hover:hover) and (pointer:fine){
  .panel:hover{
    border-color:color-mix(in srgb,var(--accent) 18%,var(--line-strong));
    box-shadow:
      var(--shadow-soft),
      0 12px 34px color-mix(in srgb,var(--accent) 5%,transparent);
  }
  .list-row:hover,
  .site-option:hover{
    transform:translateX(3px);
  }
  .issue-card:hover,
  .strm-library-item:hover,
  .strm-subscription-card:hover,
  .strm-download-item:hover,
  .emby-account-item:hover{
    transform:translateY(-2px);
    border-color:var(--line-strong);
    box-shadow:0 10px 28px rgba(0,0,0,.065);
  }
}

/* 开关切换反馈。 */
.switch-btn.on{
  animation:mpSwitchOn .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes mpSwitchOn{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
}

/* 自定义下拉框的展开反馈。 */
.mf-select.open .mf-select-menu{
  animation:mpSelectMenuIn .2s cubic-bezier(.2,.8,.2,1) both;
}
.mf-select.open .mf-select-option{
  animation:mpSelectOptionIn .2s cubic-bezier(.2,.8,.2,1) both;
}
.mf-select.open .mf-select-option:nth-child(1){animation-delay:.015s}
.mf-select.open .mf-select-option:nth-child(2){animation-delay:.03s}
.mf-select.open .mf-select-option:nth-child(3){animation-delay:.045s}
.mf-select.open .mf-select-option:nth-child(4){animation-delay:.06s}
.mf-select.open .mf-select-option:nth-child(5){animation-delay:.075s}
.mf-select.open .mf-select-option:nth-child(6){animation-delay:.09s}

@keyframes mpSelectMenuIn{
  from{opacity:0;transform:translateY(-7px) scale(.982)}
  to{opacity:1;transform:none}
}
@keyframes mpSelectOptionIn{
  from{opacity:0;transform:translateY(-3px)}
  to{opacity:1;transform:none}
}

/* 原生折叠区域的开合效果。 */
details[open] > :not(summary){
  animation:mpDetailsOpen .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mpDetailsOpen{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}

/* 弹窗主体显示后再呈现内部内容。 */
.modal.show .modal-head{
  animation:mpModalHeadIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.modal.show .modal-body{
  animation:mpModalBodyIn .36s .045s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mpModalHeadIn{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:none}
}
@keyframes mpModalBodyIn{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}

/* 移动导航抽屉中的链接按顺序进入。 */
html.mobile-nav-open .mobile-nav-links a{
  animation:mpDrawerLinkIn .34s cubic-bezier(.2,.8,.2,1) both;
}
html.mobile-nav-open .mobile-nav-links a:nth-child(1){animation-delay:.035s}
html.mobile-nav-open .mobile-nav-links a:nth-child(2){animation-delay:.065s}
html.mobile-nav-open .mobile-nav-links a:nth-child(3){animation-delay:.095s}
html.mobile-nav-open .mobile-nav-links a:nth-child(4){animation-delay:.125s}
html.mobile-nav-open .mobile-nav-links a:nth-child(5){animation-delay:.155s}
html.mobile-nav-open .mobile-nav-links a:nth-child(6){animation-delay:.185s}
@keyframes mpDrawerLinkIn{
  from{opacity:0;transform:translateX(12px)}
  to{opacity:1;transform:none}
}

/* 登录页面的进入反馈。 */
.login-visual{
  animation:mpLoginVisualIn .68s cubic-bezier(.2,.8,.2,1) both;
}
.login-card{
  animation:mpLoginCardIn .68s .08s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mpLoginVisualIn{
  from{opacity:0;transform:translateX(-18px) scale(.99)}
  to{opacity:1;transform:none}
}
@keyframes mpLoginCardIn{
  from{opacity:0;transform:translateX(18px) scale(.99)}
  to{opacity:1;transform:none}
}

/* 遵循系统减少动态效果的设置，并覆盖后置动画规则。
 */
@media(prefers-reduced-motion:reduce){
  .mp-auto-reveal,
  .mp-dynamic-enter,
  .page-tab.active,
  .switch-btn.on,
  .mf-select.open .mf-select-menu,
  .mf-select.open .mf-select-option,
  details[open] > :not(summary),
  .modal.show .modal-head,
  .modal.show .modal-body,
  html.mobile-nav-open .mobile-nav-links a,
  .login-visual,
  .login-card{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}


/* 数字输入与下拉控件的统一交互样式。
 */

/* 数字输入框的增减控件。 */
/* 隐藏浏览器自带的数字步进器，统一各浏览器的控件外观。
 */
input[type="number"].mf-number-input{
  appearance:textfield;
  -moz-appearance:textfield;
  padding-right:42px !important;
}
input[type="number"].mf-number-input::-webkit-inner-spin-button,
input[type="number"].mf-number-input::-webkit-outer-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}

.mf-number-shell{
  position:relative;
  width:100%;
  border-radius:12px;
}
.mf-number-shell .mf-number-input{
  width:100%;
}

.mf-number-controls{
  position:absolute;
  top:50%;
  right:8px;
  width:25px;
  height:30px;
  transform:translateY(-50%);
  display:grid;
  grid-template-rows:1fr 1fr;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  background:color-mix(in srgb,var(--panel-soft) 88%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .22s ease,
    transform .2s cubic-bezier(.2,.8,.2,1);
}

.mf-number-step{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:
    color .16s ease,
    background .16s ease,
    transform .14s ease;
}
.mf-number-step + .mf-number-step{
  border-top:1px solid var(--line);
}
.mf-number-step span{
  width:5px;
  height:5px;
  border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;
}
.mf-number-up span{
  transform:translateY(1px) rotate(225deg);
}
.mf-number-down span{
  transform:translateY(-1px) rotate(45deg);
}

.mf-number-shell:focus-within .mf-number-controls{
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line-strong));
  background:color-mix(in srgb,var(--accent) 6%,var(--panel-soft));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 7%,transparent);
}
.mf-number-step:hover{
  color:var(--text);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}
.mf-number-step:active{
  transform:scale(.88);
}
.mf-number-shell.step-flash .mf-number-controls{
  animation:mpNumberStepFlash .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes mpNumberStepFlash{
  0%{transform:translateY(-50%) scale(.94)}
  55%{transform:translateY(-50%) scale(1.05)}
  100%{transform:translateY(-50%) scale(1)}
}

html[data-theme="light"] .mf-number-controls{
  background:#f7f9fe;
}

/* 下拉菜单展开动画。 */
.mf-select{
  transition:
    border-color .22s ease,
    box-shadow .24s ease,
    background .22s ease,
    transform .22s cubic-bezier(.2,.8,.2,1);
}
.mf-select-trigger{
  transition:
    color .2s ease,
    transform .2s cubic-bezier(.2,.8,.2,1);
}
.mf-select-trigger::after{
  transition:
    transform .3s cubic-bezier(.34,1.56,.64,1),
    border-color .2s ease;
}
.mf-select.open{
  transform:translateY(-1px);
}
.mf-select.open .mf-select-trigger::after{
  border-color:var(--accent);
}
.mf-select.open .mf-select-menu{
  animation:mpSelectSpringIn .28s cubic-bezier(.2,.85,.2,1) both;
}
.mf-select.open .mf-select-option{
  animation:mpSelectOptionCascade .24s cubic-bezier(.2,.8,.2,1) both;
}
.mf-select.open .mf-select-option:nth-child(1){animation-delay:.018s}
.mf-select.open .mf-select-option:nth-child(2){animation-delay:.038s}
.mf-select.open .mf-select-option:nth-child(3){animation-delay:.058s}
.mf-select.open .mf-select-option:nth-child(4){animation-delay:.078s}
.mf-select.open .mf-select-option:nth-child(5){animation-delay:.098s}
.mf-select.open .mf-select-option:nth-child(6){animation-delay:.118s}
.mf-select.open .mf-select-option:nth-child(7){animation-delay:.138s}
.mf-select.open .mf-select-option:nth-child(8){animation-delay:.158s}

.mf-select.value-changed .mf-select-value{
  animation:mpSelectValueChanged .32s cubic-bezier(.2,.8,.2,1);
}
.mf-select.value-changed{
  animation:mpSelectChangedGlow .34s cubic-bezier(.2,.8,.2,1);
}

@keyframes mpSelectSpringIn{
  0%{
    opacity:0;
    transform:translateY(-10px) scale(.97);
    filter:blur(2px);
  }
  70%{
    opacity:1;
    transform:translateY(1px) scale(1.003);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}
@keyframes mpSelectOptionCascade{
  from{
    opacity:0;
    transform:translateY(-5px);
  }
  to{
    opacity:1;
    transform:none;
  }
}
@keyframes mpSelectValueChanged{
  0%{opacity:.35;transform:translateY(4px)}
  100%{opacity:1;transform:none}
}
@keyframes mpSelectChangedGlow{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
  50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
}

@media(prefers-reduced-motion:reduce){
  .mf-number-shell.step-flash .mf-number-controls,
  .mf-select.open .mf-select-menu,
  .mf-select.open .mf-select-option,
  .mf-select.value-changed .mf-select-value,
  .mf-select.value-changed{
    animation:none!important;
  }
}


/* 下拉触发按钮与菜单展开反馈。
 */

/* 菜单打开时给触发按钮明确的焦点反馈。 */
.mf-select.open{
  transform:translateY(-1px) scale(1.002);
}
.mf-select.open .mf-select-trigger{
  color:var(--text);
}
.mf-select.open .mf-select-trigger::after{
  border-color:var(--accent);
  transform:translateY(-30%) rotate(225deg) scale(1.18);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 58%,transparent));
}

/* 菜单从触发按钮的位置向下展开。 */
.mf-select-menu{
  transform-origin:top center;
  clip-path:inset(0 0 100% 0 round 15px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px) scale(.965,.86);
  filter:blur(4px);
  transition:
    opacity .24s ease,
    transform .34s cubic-bezier(.2,.8,.2,1),
    filter .24s ease,
    clip-path .34s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .34s;
  will-change:transform,opacity,clip-path,filter;
}

.mf-select.open .mf-select-menu{
  visibility:visible;
  opacity:1;
  clip-path:inset(0 0 0 0 round 15px);
  transform:none;
  filter:none;
  transition-delay:0s;
  animation:mpSelectDropReveal .48s cubic-bezier(.16,1,.3,1) both;
  box-shadow:
    0 24px 66px rgba(0,0,0,.25),
    0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent),
    0 8px 34px color-mix(in srgb,var(--accent) 10%,transparent);
}

/* 暗色面板上使用短暂光带提示菜单打开。 */
.mf-select-menu::before{
  content:"";
  position:sticky;
  top:0;
  z-index:3;
  display:block;
  height:1px;
  margin:-1px 5px 0;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb,var(--accent) 80%,#fff),
    color-mix(in srgb,var(--accent2) 65%,#fff),
    transparent
  );
  transform:scaleX(.18);
  transform-origin:center;
}
.mf-select.open .mf-select-menu::before{
  animation:mpSelectTopGlow .62s .08s cubic-bezier(.2,.8,.2,1) both;
}

/* 选项按顺序向下显示。 */
.mf-select.open .mf-select-option{
  opacity:0;
  transform:translate3d(-10px,-7px,0) scale(.985);
  animation:mpSelectOptionDrop .34s cubic-bezier(.16,1,.3,1) forwards;
}

.mf-select.open .mf-select-option:nth-child(1){animation-delay:.075s}
.mf-select.open .mf-select-option:nth-child(2){animation-delay:.115s}
.mf-select.open .mf-select-option:nth-child(3){animation-delay:.155s}
.mf-select.open .mf-select-option:nth-child(4){animation-delay:.195s}
.mf-select.open .mf-select-option:nth-child(5){animation-delay:.235s}
.mf-select.open .mf-select-option:nth-child(6){animation-delay:.275s}
.mf-select.open .mf-select-option:nth-child(7){animation-delay:.315s}
.mf-select.open .mf-select-option:nth-child(8){animation-delay:.355s}
.mf-select.open .mf-select-option:nth-child(9){animation-delay:.395s}
.mf-select.open .mf-select-option:nth-child(10){animation-delay:.435s}
.mf-select.open .mf-select-option:nth-child(n+11){animation-delay:.455s}

/* 选中项及勾选标记的确认动画。 */
.mf-select.open .mf-select-option.selected::after{
  animation:mpSelectCheckPop .42s .21s cubic-bezier(.34,1.56,.64,1) both;
}

.mf-select-trigger[aria-expanded="true"]{
  animation:mpSelectTriggerOpen .34s cubic-bezier(.34,1.56,.64,1) both;
}

/* 选项悬停时通过轻微位移提示可交互。 */
@media(hover:hover) and (pointer:fine){
  .mf-select-option:hover{
    transform:translateX(3px);
  }
}

@keyframes mpSelectDropReveal{
  0%{
    opacity:0;
    clip-path:inset(0 0 100% 0 round 15px);
    transform:translateY(-13px) scale(.96,.82);
    filter:blur(4px);
  }
  58%{
    opacity:1;
    clip-path:inset(0 0 0 0 round 15px);
    transform:translateY(3px) scale(1.006,1.018);
    filter:blur(0);
  }
  78%{
    transform:translateY(-1px) scale(.998,.996);
  }
  100%{
    opacity:1;
    clip-path:inset(0 0 0 0 round 15px);
    transform:none;
    filter:none;
  }
}

@keyframes mpSelectOptionDrop{
  0%{
    opacity:0;
    transform:translate3d(-10px,-7px,0) scale(.985);
  }
  70%{
    opacity:1;
    transform:translate3d(2px,1px,0) scale(1.003);
  }
  100%{
    opacity:1;
    transform:none;
  }
}

@keyframes mpSelectCheckPop{
  0%{
    opacity:0;
    transform:scale(.45) rotate(-18deg);
  }
  72%{
    opacity:1;
    transform:scale(1.15) rotate(4deg);
  }
  100%{
    opacity:1;
    transform:none;
  }
}

@keyframes mpSelectTriggerOpen{
  0%{transform:scale(.992)}
  58%{transform:scale(1.008)}
  100%{transform:none}
}

@keyframes mpSelectTopGlow{
  0%{
    opacity:0;
    transform:scaleX(.18);
  }
  38%{
    opacity:.95;
  }
  100%{
    opacity:0;
    transform:scaleX(1);
  }
}

/* 小屏幕适当缩短选项依次显示的时长。 */
@media(max-width:760px){
  .mf-select.open .mf-select-option:nth-child(n){
    animation-duration:.30s;
  }
}

/* 遵循用户减少动画的系统偏好。 */
@media(prefers-reduced-motion:reduce){
  .mf-select-menu,
  .mf-select.open .mf-select-menu,
  .mf-select.open .mf-select-menu::before,
  .mf-select.open .mf-select-option,
  .mf-select.open .mf-select-option.selected::after,
  .mf-select-trigger[aria-expanded="true"]{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    filter:none!important;
    opacity:1!important;
    clip-path:none!important;
  }
}


/* 开关滑块对齐、下拉浮层与站点头像。
 */

/* 保持开关滑块在轨道内部垂直居中。 */
.switch-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  vertical-align:middle;
  box-sizing:border-box;
}
.switch-btn::after{
  position:absolute;
  left:2px;
  top:2px;
  margin:0;
  transform:translateX(0);
}
.switch-btn.on::after{
  transform:translateX(20px);
}

/* 设置卡片允许菜单浮出边界，避免预热模式被卡片底部裁剪。 */
.emby-service-panel,
.playback-settings-panel,
.emby-service-panel .panel-body,
.playback-settings-panel .panel-body{
  overflow:visible;
}
/* Tab 入场动画会建立层叠上下文，菜单打开时整个 tab 需高于后续探测卡片。 */
[data-tab-panel="emby"]:has(.mf-select.open),
[data-tab-panel="settings"]:has(.mf-select.open){
  position:relative;
  z-index:35;
  overflow:visible;
}
.mf-select-trigger:disabled{opacity:.5;cursor:not-allowed}

/* 诊断数据量只影响内部滚动，不随样本和报告长度无限撑开页面。 */
#playbackIssueList,
#directCapabilitySamples,
#directCapabilityResults,
.report-preview{
  min-width:0;
  max-height:min(480px,55vh);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.report-preview{overflow-wrap:anywhere}
#directCapabilitySamples{margin-bottom:18px}
#directCapabilitySamples .direct-capability-samples{margin-bottom:0}
#directCapabilityResults .direct-capability-table thead{position:sticky;top:0;z-index:1;background:var(--panel-strong)}

/* 表单面板中的下拉菜单允许溢出显示。 */
.panel.manage-panel,
.panel.manage-panel .panel-body,
#addTvboxSourceForm,
#addTvboxSourceForm .field-grid,
#addTvboxSourceForm .field,
#strmSubscriptionSettings,
#strmSubscriptionSettings .field-grid,
#strmSubscriptionSettings .field,
#strmTmdbSettings,
#strmTmdbSettings .field-grid,
#strmTmdbSettings .field{
  overflow:visible;
}

.panel:has(.mf-select.open),
.card:has(.mf-select.open),
.manage-panel:has(.mf-select.open),
.panel-body:has(.mf-select.open),
.field-grid:has(.mf-select.open),
.field:has(.mf-select.open),
.switch-row:has(.mf-select.open){
  overflow:visible;
}

.field:has(.mf-select.open),
.switch-row:has(.mf-select.open){
  position:relative;
  z-index:220;
}

.panel:has(.mf-select.open),
.card:has(.mf-select.open),
.manage-panel:has(.mf-select.open),
.panel-body:has(.mf-select.open){
  position:relative;
  z-index:160;
}

.mf-select.open{
  z-index:260;
}
.mf-select-menu{
  z-index:280;
}

/* 根据来源名称生成站点头像的封面外观。 */
.site-avatar{
  text-transform:uppercase;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
}
.site-avatar.site-avatar-text-2{
  font-size:0.75rem;
}
.site-avatar.site-avatar-text-1{
  font-size:0.9375rem;
}


/* 根据站点名称和状态显示封面样式。
 */
.site-avatar{
  --site-cover-h1:210;
  --site-cover-h2:252;
  --site-cover-angle:145deg;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.24) !important;
  color:#fff !important;
  background:
    linear-gradient(
      var(--site-cover-angle),
      hsl(var(--site-cover-h1) 82% 50%),
      hsl(var(--site-cover-h2) 84% 58%)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -12px 24px rgba(0,0,0,.08),
    0 8px 20px hsl(var(--site-cover-h1) 82% 48% / .16);
  text-shadow:0 1px 5px rgba(0,0,0,.22);
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    box-shadow .24s ease,
    filter .24s ease;
}
.site-avatar::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:78%;
  aspect-ratio:1;
  left:-24%;
  top:-30%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.58),rgba(255,255,255,.09) 46%,transparent 72%);
  filter:blur(1px);
}
.site-avatar::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -26% -42% 18%;
  height:78%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%);
  transform:rotate(-18deg);
}
.site-avatar > span{
  position:relative;
  z-index:2;
  display:block;
  line-height:1;
}
.site-avatar.site-avatar-text-2{
  font-size:0.75rem !important;
  font-weight:900;
  letter-spacing:.08em;
  text-indent:.08em;
}
.site-avatar.site-avatar-text-1{
  font-size:1rem !important;
  font-weight:900;
}

/* 可用来源使用较冷的健康状态配色。 */
.site-item.good .site-avatar{
  outline:1px solid hsl(var(--site-cover-h1) 78% 62% / .12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -12px 24px rgba(0,0,0,.07),
    0 8px 20px hsl(var(--site-cover-h1) 82% 48% / .16),
    0 0 0 3px hsl(var(--site-cover-h1) 82% 52% / .055);
}

/* 异常来源使用偏暖的提示配色，同时保留名称特征。 */
.site-item.bad .site-avatar{
  background:
    linear-gradient(
      var(--site-cover-angle),
      hsl(var(--site-cover-h1) 88% 58%),
      hsl(var(--site-cover-h2) 92% 62%)
    ) !important;
  outline:1px solid hsl(var(--site-cover-h1) 88% 60% / .16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -12px 24px rgba(120,0,18,.09),
    0 8px 22px hsl(var(--site-cover-h1) 90% 52% / .20),
    0 0 0 3px hsl(var(--site-cover-h1) 90% 55% / .065);
}

@media(hover:hover) and (pointer:fine){
  .site-item:hover .site-avatar{
    transform:translateY(-2px) rotate(-2deg) scale(1.045);
    filter:saturate(1.08) brightness(1.035);
  }
  .site-item:nth-child(even):hover .site-avatar{
    transform:translateY(-2px) rotate(2deg) scale(1.045);
  }
}

html[data-theme="light"] .site-avatar{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -12px 24px rgba(0,0,0,.05),
    0 9px 22px hsl(var(--site-cover-h1) 78% 45% / .15);
}

@media(max-width:760px){
  .site-avatar.site-avatar-text-2{font-size:0.6875rem !important}
  .site-avatar.site-avatar-text-1{font-size:0.9375rem !important}
}


/* 影视仓站点集合的折叠交互。
 */

/* 将管理站点入口显示为明确的折叠按钮。 */
.tvbox-sites-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:auto;
  min-height:32px;
  padding:0 0;
  color:var(--accent);
  background:transparent;
  border:0;
  box-shadow:none;
  transform:none !important;
  transition:
    color .2s ease,
    opacity .2s ease;
}
.tvbox-sites-toggle:hover{
  color:color-mix(in srgb,var(--accent) 78%,var(--text));
  background:transparent;
  box-shadow:none;
  transform:none !important;
}
.tvbox-sites-toggle:active{
  transform:none !important;
  opacity:.72;
}

.tvbox-sites-toggle-chevron{
  position:relative;
  width:14px;
  height:14px;
  flex:0 0 14px;
}
.tvbox-sites-toggle-chevron::before{
  content:"";
  position:absolute;
  left:4px;
  top:3px;
  width:5px;
  height:5px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transform-origin:center;
  transition:transform .24s cubic-bezier(.22,1,.36,1);
}
.tvbox-sites-toggle[aria-expanded="true"] .tvbox-sites-toggle-chevron::before{
  transform:translateY(2px) rotate(225deg);
}

/* 站点集合以抽屉方式展开。 */
.tvbox-sites-list,
.tvbox-sites{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-4px);
  visibility:hidden;
  pointer-events:none;
  transition:
    max-height .26s cubic-bezier(.22,1,.36,1),
    opacity .22s ease,
    transform .24s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .26s;
}
.tvbox-sites-list.open,
.tvbox-sites.open{
  max-height:720px;
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto;
  transition:
    max-height .26s cubic-bezier(.22,1,.36,1),
    opacity .22s ease .025s,
    transform .24s cubic-bezier(.22,1,.36,1),
    visibility 0s;
}

/* 站点标签使用平稳的进入反馈。 */
.tvbox-site-pill,
.tvbox-site-chip,
.tvbox-site-choice{
  transform:none;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    opacity .18s ease,
    transform .18s ease;
}
.tvbox-sites-list.open .tvbox-site-pill,
.tvbox-sites.open .tvbox-site-pill,
.tvbox-sites-list.open .tvbox-site-chip,
.tvbox-sites.open .tvbox-site-chip,
.tvbox-sites-list.open .tvbox-site-choice,
.tvbox-sites.open .tvbox-site-choice{
  animation:mpTvboxSiteQuietIn .28s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--tvbox-site-index,0) * 30ms);
}

@keyframes mpTvboxSiteQuietIn{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@media(hover:hover) and (pointer:fine){
  .tvbox-site-pill:hover,
  .tvbox-site-chip:hover,
  .tvbox-site-choice:hover{
    transform:translateY(-1px);
  }
}

/* 影视仓站点组内覆盖较强的逐项弹跳动画。 */
.tvbox-sites-list .mp-dynamic-enter,
.tvbox-sites .mp-dynamic-enter{
  animation:none !important;
}

/* 展开后增加轻微区域分隔。 */
.multi-source-card:has(.tvbox-sites-list.open),
.multi-source-card:has(.tvbox-sites.open){
  border-color:color-mix(in srgb,var(--accent) 14%,var(--line-strong));
  box-shadow:0 8px 24px rgba(0,0,0,.045);
}

/* 移动端沿用同样的交互节奏。 */
@media(max-width:760px){
  .tvbox-sites-list.open,
  .tvbox-sites.open{
    max-height:1100px;
  }
}

/* 减少动态效果时只保留简单淡入。 */
@media(prefers-reduced-motion:reduce){
  .tvbox-sites-toggle-chevron::before{
    transition:none !important;
  }
  .tvbox-sites-list,
  .tvbox-sites,
  .tvbox-sites-list.open,
  .tvbox-sites.open{
    transition:opacity .12s linear !important;
    transform:none !important;
  }
  .tvbox-sites-list.open .tvbox-site-pill,
  .tvbox-sites.open .tvbox-site-pill,
  .tvbox-sites-list.open .tvbox-site-chip,
  .tvbox-sites.open .tvbox-site-chip,
  .tvbox-sites-list.open .tvbox-site-choice,
  .tvbox-sites.open .tvbox-site-choice{
    animation:mpTvboxSiteReducedIn .12s linear both !important;
  }
}
@keyframes mpTvboxSiteReducedIn{
  from{opacity:0}
  to{opacity:1}
}


/* 站点管理入口和局部状态反馈。
 */

/* 突出站点管理入口的可点击状态。 */
.tvbox-sites-toggle{
  display:block !important;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.tvbox-sites-manage-btn{
  width:100%;
  min-height:56px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto 22px;
  align-items:center;
  gap:11px;
  padding:9px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 17%,var(--line));
  border-radius:14px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--accent) 5%,var(--panel-soft)),
      color-mix(in srgb,var(--accent2) 3%,var(--panel))
    );
  color:var(--text);
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .22s ease,
    transform .18s ease;
}

.tvbox-sites-manage-btn:hover{
  border-color:color-mix(in srgb,var(--accent) 32%,var(--line-strong));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--accent) 9%,var(--panel-soft)),
      color-mix(in srgb,var(--accent2) 5%,var(--panel))
    );
  box-shadow:0 7px 20px color-mix(in srgb,var(--accent) 6%,transparent);
  transform:translateY(-1px);
}

.tvbox-sites-manage-btn:active{
  transform:translateY(0) scale(.995);
}

.tvbox-sites-manage-btn[aria-expanded="true"]{
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line-strong));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--accent) 10%,var(--panel-soft)),
      color-mix(in srgb,var(--accent2) 6%,var(--panel))
    );
}

.tvbox-sites-manage-icon{
  width:34px;
  height:34px;
  display:grid;
  grid-template-columns:repeat(2,6px);
  grid-template-rows:repeat(2,6px);
  align-content:center;
  justify-content:center;
  gap:4px;
  border:1px solid color-mix(in srgb,var(--accent) 17%,var(--line));
  border-radius:10px;
  background:color-mix(in srgb,var(--accent) 7%,var(--panel));
  color:var(--accent);
}

.tvbox-sites-manage-icon i{
  width:6px;
  height:6px;
  display:block;
  border-radius:2px;
  background:currentColor;
  opacity:.78;
}

.tvbox-sites-manage-copy{
  min-width:0;
  display:grid;
  gap:3px;
}

.tvbox-sites-manage-copy strong{
  font-size:0.625rem;
  line-height:1.2;
}

.tvbox-sites-manage-copy small{
  color:var(--muted);
  font-size:0.5rem;
  line-height:1.3;
}

.tvbox-sites-enabled-count{
  min-width:64px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--muted);
  text-align:center;
  font-size:0.5rem;
  white-space:nowrap;
}

.tvbox-sites-manage-chevron{
  position:relative;
  width:20px;
  height:20px;
}

.tvbox-sites-manage-chevron::before{
  content:"";
  position:absolute;
  left:6px;
  top:5px;
  width:6px;
  height:6px;
  border-right:1.6px solid var(--muted);
  border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg);
  transform-origin:center;
  transition:transform .24s cubic-bezier(.22,1,.36,1);
}

.tvbox-sites-manage-btn[aria-expanded="true"] .tvbox-sites-manage-chevron::before{
  transform:translateY(3px) rotate(225deg);
}

/* 站点面板使用独立且克制的展开过渡。 */
.tvbox-site-grid{
  display:flex !important;
  flex-wrap:wrap;
  gap:7px;
  margin-top:0 !important;
  max-height:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-5px);
  transition:
    max-height .28s cubic-bezier(.22,1,.36,1),
    opacity .2s ease,
    transform .24s cubic-bezier(.22,1,.36,1),
    margin-top .24s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .28s;
}

.tvbox-site-grid.show{
  max-height:720px;
  margin-top:11px !important;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:
    max-height .28s cubic-bezier(.22,1,.36,1),
    opacity .2s ease .02s,
    transform .24s cubic-bezier(.22,1,.36,1),
    margin-top .24s cubic-bezier(.22,1,.36,1),
    visibility 0s;
}

/* 启停站点时只更新被点击标签，并显示短暂的高亮反馈。
 */
.tvbox-site-chip{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.tvbox-site-chip::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:0;
  transform:translateX(-45%);
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      color-mix(in srgb,var(--green) 13%,transparent) 45%,
      transparent 78%
    );
  pointer-events:none;
}

.tvbox-site-chip.disabled::after{
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      color-mix(in srgb,var(--red) 12%,transparent) 45%,
      transparent 78%
    );
}

.tvbox-site-chip.state-updated{
  animation:mpTvboxChipState .42s cubic-bezier(.22,1,.36,1) both;
}

.tvbox-site-chip.state-updated::after{
  animation:mpTvboxChipSweep .48s ease both;
}

.tvbox-site-chip.state-updated i{
  animation:mpTvboxDotState .42s cubic-bezier(.22,1,.36,1) both;
}

.tvbox-site-state{
  display:inline-block;
  min-width:16px;
}

.tvbox-site-name{
  min-width:0;
}

.tvbox-site-separator{
  color:var(--muted);
}

.tvbox-sites-enabled-count.count-updated{
  animation:mpTvboxCountState .38s cubic-bezier(.22,1,.36,1) both;
}

@keyframes mpTvboxChipState{
  0%{
    border-color:var(--line);
  }
  48%{
    border-color:color-mix(in srgb,var(--accent) 35%,var(--line-strong));
  }
  100%{
    border-color:var(--line);
  }
}

@keyframes mpTvboxChipSweep{
  0%{
    opacity:0;
    transform:translateX(-45%);
  }
  30%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translateX(55%);
  }
}

@keyframes mpTvboxDotState{
  0%{
    transform:scale(.55);
    opacity:.35;
  }
  62%{
    transform:scale(1.28);
    opacity:1;
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes mpTvboxCountState{
  0%{
    transform:translateY(2px);
    opacity:.55;
  }
  55%{
    transform:translateY(-1px);
    opacity:1;
  }
  100%{
    transform:none;
    opacity:1;
  }
}

/* 此区域关闭逐个标签依次弹入的动画。 */
.tvbox-site-grid.show .tvbox-site-chip{
  animation:none !important;
}

@media(max-width:760px){
  .tvbox-sites-manage-btn{
    grid-template-columns:34px minmax(0,1fr) 20px;
  }

  .tvbox-sites-enabled-count{
    grid-column:2 / 3;
    width:max-content;
    min-width:0;
    justify-self:start;
    margin-top:1px;
  }

  .tvbox-sites-manage-chevron{
    grid-column:3;
    grid-row:1 / span 2;
  }

  .tvbox-site-grid.show{
    max-height:1200px;
  }
}

@media(prefers-reduced-motion:reduce){
  .tvbox-sites-manage-btn,
  .tvbox-sites-manage-chevron::before,
  .tvbox-site-grid,
  .tvbox-site-chip.state-updated,
  .tvbox-site-chip.state-updated::after,
  .tvbox-site-chip.state-updated i,
  .tvbox-sites-enabled-count.count-updated{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}


/* 按全特效、一般和高性能模式控制动画。
 */
.motion-settings-panel{overflow:visible}
.motion-mode-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.motion-mode-card{
  appearance:none;
  position:relative;
  min-width:0;
  min-height:184px;
  padding:18px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel-strong) 90%,transparent),var(--panel-soft));
  color:var(--text);
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.035);
  transition:border-color .2s ease,box-shadow .22s ease,transform .2s cubic-bezier(.2,.8,.2,1),background .2s ease;
}
.motion-mode-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 32%,var(--line-strong));
  box-shadow:0 16px 38px rgba(0,0,0,.07);
}
.motion-mode-card.active{
  border-color:color-mix(in srgb,var(--accent) 58%,var(--line-strong));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--panel-strong)),var(--panel-soft));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),0 18px 46px color-mix(in srgb,var(--accent) 9%,transparent);
}
.motion-mode-card:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 75%,white);outline-offset:3px}
.motion-mode-icon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:flex-end;justify-content:center;gap:4px;
  padding:10px;
  background:color-mix(in srgb,var(--accent) 10%,var(--panel-strong));
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  margin-bottom:16px;
}
.motion-mode-icon i{display:block;width:5px;border-radius:999px;background:linear-gradient(180deg,var(--accent2),var(--accent))}
.motion-icon-performance i:nth-child(1){height:7px}.motion-icon-performance i:nth-child(2){height:7px}.motion-icon-performance i:nth-child(3){height:7px}
.motion-icon-balanced i:nth-child(1){height:9px}.motion-icon-balanced i:nth-child(2){height:16px}.motion-icon-balanced i:nth-child(3){height:12px}
.motion-icon-full i:nth-child(1){height:10px}.motion-icon-full i:nth-child(2){height:21px}.motion-icon-full i:nth-child(3){height:15px}
.motion-mode-copy{display:block;padding-right:24px}
.motion-mode-copy strong{display:block;font-size:0.9375rem;letter-spacing:.01em}
.motion-mode-copy small{display:block;margin-top:5px;color:var(--muted);font-size:0.6875rem;font-weight:750}
.motion-mode-copy em{display:block;margin-top:12px;color:var(--faint);font-size:0.625rem;font-style:normal;line-height:1.65}
.motion-mode-check{
  position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;
  color:transparent;background:transparent;border:1px solid var(--line-strong);
  font-size:0.75rem;font-weight:900;
  transition:.2s ease;
}
.motion-mode-card.active .motion-mode-check{
  color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 25%,transparent);
}
.motion-mode-recommend{
  position:absolute;right:46px;top:14px;
  padding:4px 7px;border-radius:999px;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  font-size:0.5rem;font-weight:850;
}
.motion-mode-note{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:14px;padding:12px 14px;border-radius:15px;
  background:var(--panel-soft);border:1px solid var(--line);color:var(--muted);
  font-size:0.625rem;line-height:1.55;
}
.motion-mode-note i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;margin-top:4px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 12px color-mix(in srgb,var(--accent) 32%,transparent)}

/* 一般模式保留操作反馈，减少持续绘制和较重的效果。 */
html[data-motion="balanced"] body::before,
html[data-motion="balanced"] .wave i,
html[data-motion="balanced"] .live-orb,
html[data-motion="balanced"] .live-orb::before,
html[data-motion="balanced"] .live-orb::after,
html[data-motion="balanced"] .mini-bars i,
html[data-motion="balanced"] .progress i,
html[data-motion="balanced"] .status-pill i,
html[data-motion="balanced"] .card-live i,
html[data-motion="balanced"] .hero::before{
  animation:none!important;
}
html[data-motion="balanced"] .reveal{
  transform:translateY(6px);
  animation-duration:.34s!important;
}
html[data-motion="balanced"].mp-motion-ready .mp-auto-reveal{
  transform:translateY(5px);
  filter:none;
}
html[data-motion="balanced"].mp-motion-ready .mp-auto-reveal.mp-in-view{
  animation-duration:.3s!important;
}
html[data-motion="balanced"] .mp-dynamic-enter{
  animation-duration:.22s!important;
}
html[data-motion="balanced"] .metrics.mp-in-view > *,
html[data-motion="balanced"] .services-grid.mp-in-view > *{
  animation-delay:0ms!important;
}
html[data-motion="balanced"] .theme-switch-ripple{display:none!important}
@media(hover:hover) and (pointer:fine){
  html[data-motion="balanced"] .list-row:hover,
  html[data-motion="balanced"] .site-option:hover,
  html[data-motion="balanced"] .issue-card:hover,
  html[data-motion="balanced"] .strm-library-item:hover,
  html[data-motion="balanced"] .strm-subscription-card:hover,
  html[data-motion="balanced"] .strm-download-item:hover,
  html[data-motion="balanced"] .emby-account-item:hover{
    transform:none!important;
  }
}

/* 高性能模式关闭动画，同时保持控件可操作。 */
html[data-motion="performance"] *,
html[data-motion="performance"] *::before,
html[data-motion="performance"] *::after{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}
html[data-motion="performance"] .reveal,
html[data-motion="performance"] .mp-auto-reveal,
html[data-motion="performance"] .mp-dynamic-enter,
html[data-motion="performance"] .page-tab.active,
html[data-motion="performance"] details[open] > :not(summary),
html[data-motion="performance"] .modal.show .modal-head,
html[data-motion="performance"] .modal.show .modal-body,
html[data-motion="performance"].mobile-nav-open .mobile-nav-links a,
html[data-motion="performance"] .login-visual,
html[data-motion="performance"] .login-card{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
html[data-motion="performance"] .theme-switch-ripple{display:none!important}
html[data-motion="performance"] .motion-mode-card:hover{transform:none!important}

@media(max-width:760px){
  .motion-mode-grid{grid-template-columns:1fr}
  .motion-mode-card{min-height:0;padding:15px 16px;display:grid;grid-template-columns:38px minmax(0,1fr) 22px;gap:12px;align-items:center}
  .motion-mode-icon{width:38px;height:38px;margin:0;padding:8px;border-radius:12px}
  .motion-mode-copy{padding-right:0}
  .motion-mode-copy em{margin-top:7px}
  .motion-mode-check{position:static;grid-column:3;grid-row:1;align-self:center}
  .motion-mode-recommend{right:48px;top:12px}
}

/* 禁用动画后显式显示下拉选项，避免选项停留在透明的初始状态。
 */
html[data-motion="performance"] .mf-select.open .mf-select-menu{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  clip-path:none !important;
  animation:none !important;
  transition:none !important;
}
html[data-motion="performance"] .mf-select.open .mf-select-option{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
  transition:none !important;
}
html[data-motion="performance"] .mf-select.open .mf-select-menu::before,
html[data-motion="performance"] .mf-select.open .mf-select-option.selected::after,
html[data-motion="performance"] .mf-select-trigger[aria-expanded="true"]{
  animation:none !important;
  transition:none !important;
  filter:none !important;
}
html[data-motion="performance"] .mf-select:not(.open) .mf-select-menu{
  opacity:0 !important;
  visibility:hidden !important;
}



/* 按三档性能设置应用对应的视觉反馈强度。
 */

/* 主题切换集中在单层覆盖上绘制，减少卡片分别过渡颜色的开销。
 */
html.theme-apply-instant *,
html.theme-apply-instant *::before,
html.theme-apply-instant *::after{
  transition:none !important;
}
.theme-switch-veil{
  position:fixed;
  inset:0;
  z-index:9997;
  pointer-events:none;
  opacity:0;
  contain:strict;
  will-change:opacity;
}
.theme-switch-veil.to-light{background:rgba(244,248,255,.42)}
.theme-switch-veil.to-dark{background:rgba(3,6,14,.42)}
.theme-switch-veil.balanced.go{animation:mpThemeVeilBalanced .18s ease-out both}
.theme-switch-veil.full.go{animation:mpThemeVeilFull .30s cubic-bezier(.2,.8,.2,1) both}
@keyframes mpThemeVeilBalanced{
  0%{opacity:.18}
  100%{opacity:0}
}
@keyframes mpThemeVeilFull{
  0%{opacity:.30}
  44%{opacity:.15}
  100%{opacity:0}
}

/* 一般模式保留短反馈，关闭持续重绘和大量列表行的同时动画。
 */
html[data-motion="balanced"] body::before,
html[data-motion="balanced"] .hero::before,
html[data-motion="balanced"] .live-orb,
html[data-motion="balanced"] .live-orb::before,
html[data-motion="balanced"] .live-orb::after,
html[data-motion="balanced"] .mini-bars i,
html[data-motion="balanced"] .progress i{
  animation:none !important;
}
/* 小型状态指示保留轻量动态反馈。 */
html[data-motion="balanced"] .status-pill i{animation-duration:2.8s !important}
html[data-motion="balanced"] .wave i{animation-duration:2.0s !important}

/* 一般模式关闭跟随指针的聚光效果。 */
html[data-motion="balanced"] .card::before,
html[data-motion="balanced"] .service-card::before,
html[data-motion="balanced"] .action-card::before{
  display:none !important;
}

/* 分区使用一次短暂淡入与位移。 */
html[data-motion="balanced"] .reveal{
  transform:translateY(5px);
  animation-duration:.26s !important;
}
html[data-motion="balanced"].mp-motion-ready .mp-auto-reveal{
  transform:translate3d(0,5px,0) !important;
  filter:none !important;
  will-change:opacity,transform;
}
html[data-motion="balanced"].mp-motion-ready .mp-auto-reveal.mp-in-view{
  animation:mpBalancedSectionIn .24s ease-out both !important;
  animation-delay:0s !important;
}
@keyframes mpBalancedSectionIn{
  from{opacity:0;transform:translate3d(0,5px,0)}
  to{opacity:1;transform:none}
}
html[data-motion="balanced"].mp-motion-ready .metrics.mp-auto-reveal > .metric,
html[data-motion="balanced"].mp-motion-ready .services-grid.mp-auto-reveal > .service-card{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
html[data-motion="balanced"] .mp-dynamic-enter{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
}

/* 控件保持响应，并减少弹性、逐项显示和光晕装饰。 */
html[data-motion="balanced"] .page-tab.active{animation:mpBalancedTap .15s ease-out both !important}
@keyframes mpBalancedTap{from{transform:scale(.985)}to{transform:none}}
html[data-motion="balanced"] .switch-btn.on{animation:none !important}
html[data-motion="balanced"] .mf-number-shell.step-flash .mf-number-controls{animation:none !important}
html[data-motion="balanced"] details[open] > :not(summary){animation-duration:.18s !important}
html[data-motion="balanced"] .modal.show .modal-head,
html[data-motion="balanced"] .modal.show .modal-body{animation-duration:.20s !important;animation-delay:0s !important}
html[data-motion="balanced"].mobile-nav-open .mobile-nav-links a{
  animation-duration:.20s !important;
  animation-delay:0s !important;
}
html[data-motion="balanced"] .login-visual,
html[data-motion="balanced"] .login-card{
  animation-duration:.28s !important;
  animation-delay:0s !important;
}

/* 一般模式的下拉框只使用单层展开过渡。 */
html[data-motion="balanced"] .mf-select{transform:none !important}
html[data-motion="balanced"] .mf-select-menu{
  clip-path:none !important;
  filter:none !important;
  transform:translateY(-4px) scale(.995) !important;
  will-change:opacity,transform;
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s !important;
}
html[data-motion="balanced"] .mf-select.open .mf-select-menu{
  opacity:1 !important;
  visibility:visible !important;
  transition-delay:0s !important;
}
html[data-motion="balanced"] .mf-select.open .mf-select-menu::before{display:none !important}
html[data-motion="balanced"] .mf-select.open .mf-select-option,
html[data-motion="balanced"] .mf-select.open .mf-select-option:nth-child(n){
  opacity:1;
}
html[data-motion="balanced"] .mf-select.open .mf-select-option.selected::after,
html[data-motion="balanced"] .mf-select-trigger[aria-expanded="true"],
html[data-motion="balanced"] .mf-select.value-changed,
html[data-motion="balanced"] .mf-select.value-changed .mf-select-value{
  animation:none !important;
}
html[data-motion="balanced"] .mf-select.open .mf-select-trigger::after{
  filter:none !important;
  transform:translateY(-30%) rotate(225deg) !important;
  transition:transform .16s ease,border-color .16s ease !important;
}
@media(hover:hover) and (pointer:fine){
  html[data-motion="balanced"] .mf-select-option:hover{transform:none !important}
}

/* 减少悬停位移和阴影变化，保留轻微的交互提示。 */
@media(hover:hover) and (pointer:fine){
  html[data-motion="balanced"] .card:hover,
  html[data-motion="balanced"] .service-card:hover,
  html[data-motion="balanced"] .action-card:hover,
  html[data-motion="balanced"] .metric:hover{
    transform:translateY(-1px) !important;
  }
  html[data-motion="balanced"] .list-row:hover,
  html[data-motion="balanced"] .site-option:hover,
  html[data-motion="balanced"] .issue-card:hover,
  html[data-motion="balanced"] .strm-library-item:hover,
  html[data-motion="balanced"] .strm-subscription-card:hover,
  html[data-motion="balanced"] .strm-download-item:hover,
  html[data-motion="balanced"] .emby-account-item:hover{
    transform:none !important;
  }
}

/* 站点管理只保留局部状态反馈。 */
html[data-motion="balanced"] .tvbox-site-grid,
html[data-motion="balanced"] .tvbox-site-grid.show,
html[data-motion="balanced"] .tvbox-sites-list,
html[data-motion="balanced"] .tvbox-sites-list.open,
html[data-motion="balanced"] .tvbox-sites,
html[data-motion="balanced"] .tvbox-sites.open{
  transition-duration:.18s !important;
}
html[data-motion="balanced"] .tvbox-site-grid.show .tvbox-site-chip,
html[data-motion="balanced"] .tvbox-sites-list.open .tvbox-site-pill,
html[data-motion="balanced"] .tvbox-sites.open .tvbox-site-pill,
html[data-motion="balanced"] .tvbox-sites-list.open .tvbox-site-chip,
html[data-motion="balanced"] .tvbox-sites.open .tvbox-site-chip,
html[data-motion="balanced"] .tvbox-sites-list.open .tvbox-site-choice,
html[data-motion="balanced"] .tvbox-sites.open .tvbox-site-choice{
  animation:none !important;
}
html[data-motion="balanced"] .tvbox-site-chip.state-updated{animation-duration:.20s !important}
html[data-motion="balanced"] .tvbox-site-chip.state-updated::after{animation:none !important;opacity:0 !important}
html[data-motion="balanced"] .tvbox-site-chip.state-updated i,
html[data-motion="balanced"] .tvbox-sites-enabled-count.count-updated{animation-duration:.20s !important}

/* 一般模式的主题切换使用单层覆盖反馈。 */
html[data-motion="balanced"] .theme-switch-ripple{display:none !important}

/* 全特效模式恢复对应的装饰与展开效果。
 */
html[data-motion="full"] .tvbox-site-grid.show .tvbox-site-chip:not(.state-updated){
  animation:mpTvboxSiteQuietIn .28s cubic-bezier(.22,1,.36,1) both !important;
  animation-delay:calc(var(--tvbox-site-index,0) * 30ms) !important;
}

/* 高性能模式移除静态悬停位移和动态装饰。
 */
html[data-motion="performance"] .theme-switch-ripple,
html[data-motion="performance"] .theme-switch-veil,
html[data-motion="performance"] .card::before,
html[data-motion="performance"] .service-card::before,
html[data-motion="performance"] .action-card::before{
  display:none !important;
}
html[data-motion="performance"] .mf-select,
html[data-motion="performance"] .mf-select.open,
html[data-motion="performance"] .mf-select-trigger,
html[data-motion="performance"] .mf-select-option,
html[data-motion="performance"] .tvbox-sites-manage-btn,
html[data-motion="performance"] .tvbox-site-chip,
html[data-motion="performance"] .page-tab,
html[data-motion="performance"] .btn,
html[data-motion="performance"] .icon-btn{
  transform:none !important;
  filter:none !important;
}
@media(hover:hover) and (pointer:fine){
  html[data-motion="performance"] .card:hover,
  html[data-motion="performance"] .service-card:hover,
  html[data-motion="performance"] .action-card:hover,
  html[data-motion="performance"] .metric:hover,
  html[data-motion="performance"] .panel:hover,
  html[data-motion="performance"] .list-row:hover,
  html[data-motion="performance"] .site-option:hover,
  html[data-motion="performance"] .issue-card:hover,
  html[data-motion="performance"] .strm-library-item:hover,
  html[data-motion="performance"] .strm-subscription-card:hover,
  html[data-motion="performance"] .strm-download-item:hover,
  html[data-motion="performance"] .emby-account-item:hover,
  html[data-motion="performance"] .tvbox-sites-manage-btn:hover{
    transform:none !important;
  }
}


/* 站点启用和屏蔽反馈按所选性能模式执行。
 */
.t4-policy-item.compact.site-policy-switch-in,
.t4-policy-item.compact.site-policy-switch-out{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  will-change:transform,opacity,box-shadow;
}
.t4-policy-item.compact[data-site-policy-fx="blocked"]{
  --site-policy-fx-color:var(--red);
  --site-policy-exit-x:7px;
  --site-policy-enter-x:-7px;
}
.t4-policy-item.compact[data-site-policy-fx="enabled"]{
  --site-policy-fx-color:var(--green);
  --site-policy-exit-x:-7px;
  --site-policy-enter-x:7px;
}

/* 一般：只反馈当前被操作的站点卡片，不做整个列表级联。 */
html[data-motion="balanced"] .t4-policy-item.compact.site-policy-switch-out{
  animation:mpSitePolicyOutBalanced .09s ease-out both;
}
html[data-motion="balanced"] .t4-policy-item.compact.site-policy-switch-in{
  animation:mpSitePolicyInBalanced .28s cubic-bezier(.2,.78,.24,1) both;
}
html[data-motion="balanced"] .t4-policy-item.compact.site-policy-switch-in .t4-policy-status{
  animation:mpSitePolicyBadgeBalanced .24s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes mpSitePolicyOutBalanced{
  to{opacity:.72;transform:translateX(var(--site-policy-exit-x)) scale(.994)}
}
@keyframes mpSitePolicyInBalanced{
  0%{opacity:.62;transform:translateX(var(--site-policy-enter-x)) scale(.994);box-shadow:0 0 0 1px color-mix(in srgb,var(--site-policy-fx-color) 14%,transparent)}
  58%{opacity:1;transform:translateX(0) scale(1.002);box-shadow:0 0 0 3px color-mix(in srgb,var(--site-policy-fx-color) 10%,transparent),0 10px 26px color-mix(in srgb,var(--site-policy-fx-color) 7%,transparent)}
  100%{opacity:1;transform:none;box-shadow:none}
}
@keyframes mpSitePolicyBadgeBalanced{
  0%{opacity:.68;transform:scale(.92)}
  65%{opacity:1;transform:scale(1.035)}
  100%{opacity:1;transform:none}
}

/* 全特效：更明显的状态迁移、局部光晕与扫光，但仍限制在当前卡片。 */
html[data-motion="full"] .t4-policy-item.compact[data-site-policy-fx="blocked"]{
  --site-policy-exit-x:13px;
  --site-policy-enter-x:-13px;
}
html[data-motion="full"] .t4-policy-item.compact[data-site-policy-fx="enabled"]{
  --site-policy-exit-x:-13px;
  --site-policy-enter-x:13px;
}
html[data-motion="full"] .t4-policy-item.compact.site-policy-switch-out{
  animation:mpSitePolicyOutFull .145s cubic-bezier(.4,0,.7,.3) both;
}
html[data-motion="full"] .t4-policy-item.compact.site-policy-switch-in{
  animation:mpSitePolicyInFull .48s cubic-bezier(.16,.86,.24,1) both;
}
html[data-motion="full"] .t4-policy-item.compact.site-policy-switch-in::after{
  content:"";
  position:absolute;
  z-index:3;
  pointer-events:none;
  top:-20%;
  bottom:-20%;
  left:-55%;
  width:42%;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--site-policy-fx-color) 24%,white 10%),transparent);
  opacity:0;
  transform:translateX(-35%) skewX(-12deg);
  animation:mpSitePolicySweepFull .46s ease-out .02s both;
}
html[data-motion="full"] .t4-policy-item.compact.site-policy-switch-in .t4-policy-status{
  animation:mpSitePolicyBadgeFull .42s cubic-bezier(.16,.86,.24,1) both;
}
@keyframes mpSitePolicyOutFull{
  0%{opacity:1;transform:none;box-shadow:none}
  55%{box-shadow:0 0 0 2px color-mix(in srgb,var(--site-policy-fx-color) 16%,transparent)}
  100%{opacity:.46;transform:translateX(var(--site-policy-exit-x)) scale(.986);box-shadow:0 0 24px color-mix(in srgb,var(--site-policy-fx-color) 12%,transparent)}
}
@keyframes mpSitePolicyInFull{
  0%{opacity:.42;transform:translateX(var(--site-policy-enter-x)) scale(.978);box-shadow:0 0 0 1px color-mix(in srgb,var(--site-policy-fx-color) 18%,transparent)}
  42%{opacity:1;transform:translateX(0) scale(1.012);box-shadow:0 0 0 3px color-mix(in srgb,var(--site-policy-fx-color) 15%,transparent),0 14px 34px color-mix(in srgb,var(--site-policy-fx-color) 13%,transparent)}
  72%{transform:scale(.998);box-shadow:0 0 0 1px color-mix(in srgb,var(--site-policy-fx-color) 9%,transparent),0 8px 20px color-mix(in srgb,var(--site-policy-fx-color) 7%,transparent)}
  100%{opacity:1;transform:none;box-shadow:none}
}
@keyframes mpSitePolicySweepFull{
  0%{opacity:0;transform:translateX(-35%) skewX(-12deg)}
  18%{opacity:.78}
  100%{opacity:0;transform:translateX(410%) skewX(-12deg)}
}
@keyframes mpSitePolicyBadgeFull{
  0%{opacity:.3;transform:scale(.76)}
  45%{opacity:1;transform:scale(1.10)}
  72%{transform:scale(.97)}
  100%{opacity:1;transform:none}
}

/* 高性能与系统减弱动态：状态直接变化，不保留残余动画样式。 */
html[data-motion="performance"] .t4-policy-item.compact.site-policy-switch-in,
html[data-motion="performance"] .t4-policy-item.compact.site-policy-switch-out,
html[data-motion="performance"] .t4-policy-item.compact.site-policy-switch-in .t4-policy-status{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
  box-shadow:none!important;
}
html[data-motion="performance"] .t4-policy-item.compact.site-policy-switch-in::after{display:none!important}
@media(prefers-reduced-motion:reduce){
  .t4-policy-item.compact.site-policy-switch-in,
  .t4-policy-item.compact.site-policy-switch-out,
  .t4-policy-item.compact.site-policy-switch-in .t4-policy-status{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    box-shadow:none!important;
  }
  .t4-policy-item.compact.site-policy-switch-in::after{display:none!important}
}


/* 搜索站点选择的局部确认反馈。
 */
.t4-search-choice > strong,
.t4-search-choice > small{
  position:relative;
  z-index:1;
}
.t4-search-choice::after{z-index:2}
.t4-search-choice::before{z-index:3}
.search-choice-fx{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
}

/* 一般：只给当前点击项一个短促的状态确认，不做列表级联。 */
html[data-motion="balanced"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="selected"]{
  animation:mpSearchChoiceOnBalanced .28s cubic-bezier(.2,.78,.24,1) both;
}
html[data-motion="balanced"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="unselected"]{
  animation:mpSearchChoiceOffBalanced .22s ease-out both;
}
html[data-motion="balanced"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="selected"]::after{
  animation:mpSearchCheckOnBalanced .24s cubic-bezier(.2,.8,.25,1) both;
}
html[data-motion="balanced"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="selected"]::before{
  animation:mpSearchTickOnBalanced .22s cubic-bezier(.2,.8,.25,1) both;
}
html[data-motion="balanced"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="unselected"]::after{
  animation:mpSearchCheckOffBalanced .20s ease-out both;
}
@keyframes mpSearchChoiceOnBalanced{
  0%{transform:scale(.994);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)}
  55%{transform:scale(1.004);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent),0 8px 22px rgba(76,87,255,.07)}
  100%{transform:none}
}
@keyframes mpSearchChoiceOffBalanced{
  0%{transform:scale(1.002);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 8%,transparent)}
  100%{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
}
@keyframes mpSearchCheckOnBalanced{
  0%{transform:translateY(-50%) scale(.88)}
  65%{transform:translateY(-50%) scale(1.05)}
  100%{transform:translateY(-50%) scale(1)}
}
@keyframes mpSearchTickOnBalanced{
  0%{opacity:.35;transform:translateY(-50%) scale(.72)}
  70%{opacity:1;transform:translateY(-50%) scale(1.06)}
  100%{opacity:1;transform:translateY(-50%) scale(1)}
}
@keyframes mpSearchCheckOffBalanced{
  0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
}

/* 全特效：选择/取消都有更明显的回弹；选中时增加局部扫光与光晕。 */
html[data-motion="full"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="selected"]{
  animation:mpSearchChoiceOnFull .50s cubic-bezier(.16,.86,.24,1) both;
}
html[data-motion="full"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="unselected"]{
  animation:mpSearchChoiceOffFull .40s cubic-bezier(.2,.76,.24,1) both;
}
html[data-motion="full"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="selected"] .search-choice-fx{
  opacity:1;
  background:
    radial-gradient(circle at 86% 50%,color-mix(in srgb,var(--accent2) 20%,transparent),transparent 28%),
    linear-gradient(108deg,transparent 20%,color-mix(in srgb,var(--accent) 15%,white 5%) 46%,transparent 70%);
  transform:translateX(-42%);
  animation:mpSearchChoiceSweepFull .48s ease-out .02s both;
}
html[data-motion="full"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="unselected"] .search-choice-fx{
  opacity:1;
  background:radial-gradient(circle at 86% 50%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 34%);
  animation:mpSearchChoiceFadeFull .32s ease-out both;
}
html[data-motion="full"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="selected"]::after{
  animation:mpSearchCheckOnFull .44s cubic-bezier(.16,.86,.24,1) both;
}
html[data-motion="full"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="selected"]::before{
  animation:mpSearchTickOnFull .42s cubic-bezier(.16,.86,.24,1) both;
}
html[data-motion="full"] .t4-search-choice.search-choice-toggle-fx[data-search-choice-fx="unselected"]::after{
  animation:mpSearchCheckOffFull .34s ease-out both;
}
@keyframes mpSearchChoiceOnFull{
  0%{transform:scale(.982);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent)}
  40%{transform:scale(1.012);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent),0 15px 34px rgba(76,87,255,.15)}
  72%{transform:scale(.997);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 9%,transparent),0 8px 22px rgba(76,87,255,.08)}
  100%{transform:none}
}
@keyframes mpSearchChoiceOffFull{
  0%{transform:scale(1.008);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent),0 10px 26px rgba(76,87,255,.10)}
  58%{transform:scale(.993)}
  100%{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
}
@keyframes mpSearchChoiceSweepFull{
  0%{opacity:0;transform:translateX(-42%)}
  18%{opacity:.95}
  100%{opacity:0;transform:translateX(42%)}
}
@keyframes mpSearchChoiceFadeFull{
  0%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(1.025)}
}
@keyframes mpSearchCheckOnFull{
  0%{transform:translateY(-50%) scale(.74);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 30%,transparent)}
  42%{transform:translateY(-50%) scale(1.13);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}
  70%{transform:translateY(-50%) scale(.96)}
  100%{transform:translateY(-50%) scale(1)}
}
@keyframes mpSearchTickOnFull{
  0%{opacity:0;transform:translateY(-50%) scale(.55) rotate(-10deg)}
  45%{opacity:1;transform:translateY(-50%) scale(1.16) rotate(2deg)}
  72%{transform:translateY(-50%) scale(.96)}
  100%{opacity:1;transform:translateY(-50%) scale(1)}
}
@keyframes mpSearchCheckOffFull{
  0%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
}

/* 高性能：JS 不挂效果类；这里再兜底保证无残余动画。 */
html[data-motion="performance"] .t4-search-choice.search-choice-toggle-fx,
html[data-motion="performance"] .t4-search-choice.search-choice-toggle-fx::before,
html[data-motion="performance"] .t4-search-choice.search-choice-toggle-fx::after,
html[data-motion="performance"] .t4-search-choice.search-choice-toggle-fx .search-choice-fx{
  animation:none!important;
  transform:none!important;
  filter:none!important;
}
html[data-motion="performance"] .search-choice-fx{display:none!important}
@media(prefers-reduced-motion:reduce){
  .t4-search-choice.search-choice-toggle-fx,
  .t4-search-choice.search-choice-toggle-fx::before,
  .t4-search-choice.search-choice-toggle-fx::after,
  .t4-search-choice.search-choice-toggle-fx .search-choice-fx{
    animation:none!important;
    transform:none!important;
    filter:none!important;
  }
  .search-choice-fx{display:none!important}
}


/* 代理编辑与下拉菜单的显示效果按性能模式分级。
 */
.source-inline-editor{
  position:relative;
  overflow:hidden;
}
.source-inline-editor::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
}
.mf-select-menu{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  align-content:start;
}
.mf-select-option{
  --mf-option-index:0;
}

/* 高性能：无动画，立即展开。 */
html[data-motion="performance"] .source-inline-editor.show,
html[data-motion="performance"] .source-inline-editor.show::after,
html[data-motion="performance"] .mf-select.open .mf-select-menu,
html[data-motion="performance"] .mf-select.open .mf-select-option{
  animation:none !important;
  transition:none !important;
}
html[data-motion="performance"] .source-inline-editor.show::after{
  opacity:0 !important;
}
html[data-motion="performance"] .mf-select-menu,
html[data-motion="performance"] .mf-select-option{
  transform:none !important;
  filter:none !important;
}

/* 一般：轻量淡入/轻微位移，只保留必要反馈。 */
html[data-motion="balanced"] .source-inline-editor.show{
  animation:mpRevealBalancedIn .18s cubic-bezier(.22,.8,.22,1) both;
}
html[data-motion="balanced"] .source-inline-editor.show::after{
  background:linear-gradient(120deg,
    transparent 0%,
    color-mix(in srgb,var(--accent) 12%,transparent) 30%,
    color-mix(in srgb,var(--accent2) 8%,transparent) 58%,
    transparent 100%);
  animation:mpRevealBalancedWash .28s ease-out both;
}
html[data-motion="balanced"] .mf-select.open .mf-select-menu{
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line-strong));
  box-shadow:
    0 18px 38px rgba(0,0,0,.19),
    0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent);
  animation:mpSelectBalancedMenuInStrong .22s cubic-bezier(.18,.86,.24,1.02) both !important;
}
html[data-motion="balanced"] .mf-select.open .mf-select-trigger{
  background:color-mix(in srgb,var(--accent) 4%,transparent);
}
html[data-motion="balanced"] .mf-select.open .mf-select-option,
html[data-motion="balanced"] .mf-select.open .mf-select-option:nth-child(n){
  animation:mpSelectBalancedOptionInStrong .20s cubic-bezier(.2,.82,.24,1) both !important;
  animation-delay:calc(var(--mf-option-index,0) * 18ms) !important;
}

/* 全特效：完整展开、轻弹、扫光。 */
html[data-motion="full"] .source-inline-editor.show{
  animation:mpRevealFullIn .34s cubic-bezier(.18,.88,.24,1.06) both;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 42px color-mix(in srgb,var(--accent) 10%,transparent);
}
html[data-motion="full"] .source-inline-editor.show::after{
  background:linear-gradient(115deg,
    transparent 0%,
    color-mix(in srgb,var(--accent2) 0%,transparent) 18%,
    color-mix(in srgb,var(--accent) 18%,transparent) 42%,
    color-mix(in srgb,var(--accent2) 12%,transparent) 62%,
    transparent 100%);
  animation:mpRevealFullSweep .52s cubic-bezier(.2,.8,.2,1) both;
}
html[data-motion="full"] .mf-select.open{
  filter:drop-shadow(0 18px 34px color-mix(in srgb,var(--accent) 12%,transparent));
}
html[data-motion="full"] .mf-select.open .mf-select-menu{
  animation:mpSelectFullMenuIn .24s cubic-bezier(.2,.86,.24,1) both;
}
html[data-motion="full"] .mf-select.open .mf-select-option{
  animation:mpSelectFullOptionIn .24s cubic-bezier(.2,.86,.24,1) both;
  animation-delay:calc(var(--mf-option-index,0) * 18ms);
}
html[data-motion="full"] .mf-select.open .mf-select-option.selected{
  box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 12%,transparent);
}

@keyframes mpRevealBalancedIn{
  from{opacity:0;transform:translateY(-5px) scale(.992)}
  to{opacity:1;transform:none}
}
@keyframes mpRevealBalancedWash{
  0%{opacity:0;transform:translateX(-14%)}
  25%{opacity:.7}
  100%{opacity:0;transform:translateX(16%)}
}
@keyframes mpRevealFullIn{
  0%{opacity:0;transform:translateY(-8px) scale(.978)}
  58%{opacity:1;transform:translateY(1px) scale(1.005)}
  100%{opacity:1;transform:none}
}
@keyframes mpRevealFullSweep{
  0%{opacity:0;transform:translateX(-24%) skewX(-12deg)}
  18%{opacity:.22}
  52%{opacity:.55}
  100%{opacity:0;transform:translateX(24%) skewX(-12deg)}
}
@keyframes mpSelectBalancedMenuIn{
  from{opacity:0;transform:translateY(-4px) scale(.992)}
  to{opacity:1;transform:none}
}
@keyframes mpSelectBalancedOptionIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
@keyframes mpSelectFullMenuIn{
  0%{opacity:0;transform:translateY(-7px) scale(.984)}
  60%{opacity:1;transform:translateY(1px) scale(1.003)}
  100%{opacity:1;transform:none}
}
@keyframes mpSelectFullOptionIn{
  0%{opacity:0;transform:translateY(-7px) scale(.986)}
  60%{opacity:1;transform:translateY(1px) scale(1.01)}
  100%{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .source-inline-editor.show,
  .source-inline-editor.show::after,
  .mf-select.open .mf-select-menu,
  .mf-select.open .mf-select-option{
    animation:none !important;
    transition:none !important;
  }
}

@keyframes mpSelectBalancedMenuInStrong{
  0%{opacity:0;transform:translateY(-9px) scale(.982)}
  62%{opacity:1;transform:translateY(1.5px) scale(1.004)}
  100%{opacity:1;transform:none}
}
@keyframes mpSelectBalancedOptionInStrong{
  0%{opacity:0;transform:translateY(-6px) scale(.988)}
  72%{opacity:1;transform:translateY(1px) scale(1.003)}
  100%{opacity:1;transform:none}
}


/* 输入来源状态及 STRM 媒体库的交互反馈。
 */

/* ---------- 猫源 / TVBox 输入源：新的“状态扫描”切换效果 ---------- */
.multi-source-card{
  position:relative;
  isolation:isolate;
}
.multi-source-card::after{
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
  inset:0;
  border-radius:inherit;
  opacity:0;
}
.multi-source-card[data-source-state-fx="enabled"]{--mp-source-fx:var(--green)}
.multi-source-card[data-source-state-fx="disabled"]{--mp-source-fx:var(--red)}

/* 一般：短促的状态扫描线 + 轻微压合，区别于旧的整卡高亮。 */
html[data-motion="balanced"] .multi-source-card.source-state-exit{
  animation:mpSourceStateExitBalanced .095s ease-out both;
}
html[data-motion="balanced"] .multi-source-card.source-state-enter{
  animation:mpSourceStateEnterBalanced .34s cubic-bezier(.2,.78,.24,1) both;
}
html[data-motion="balanced"] .multi-source-card.source-state-enter::after{
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb,var(--mp-source-fx) 18%,transparent) 46%,
    color-mix(in srgb,var(--mp-source-fx) 7%,transparent) 54%,
    transparent 100%);
  animation:mpSourceScanBalanced .34s ease-out both;
}
html[data-motion="balanced"] .multi-source-card.source-state-enter .multi-source-state,
html[data-motion="balanced"] .multi-source-card.source-state-enter .source-count-badge{
  animation:mpSourceBadgeBalanced .28s cubic-bezier(.2,.8,.24,1) both;
}
@keyframes mpSourceStateExitBalanced{
  from{opacity:1;transform:none}
  to{opacity:.72;transform:scaleY(.993)}
}
@keyframes mpSourceStateEnterBalanced{
  0%{opacity:.76;transform:scaleY(.992)}
  56%{opacity:1;transform:scaleY(1.003)}
  100%{opacity:1;transform:none}
}
@keyframes mpSourceScanBalanced{
  0%{opacity:0;transform:translateY(-38%)}
  28%{opacity:.62}
  100%{opacity:0;transform:translateY(38%)}
}
@keyframes mpSourceBadgeBalanced{
  0%{transform:translateY(2px) scale(.94);opacity:.55}
  62%{transform:translateY(-1px) scale(1.035);opacity:1}
  100%{transform:none;opacity:1}
}

/* 全特效：双扫描 + 状态环扩散，仍只作用当前输入源卡片。 */
html[data-motion="full"] .multi-source-card.source-state-exit{
  animation:mpSourceStateExitFull .15s cubic-bezier(.4,0,.65,.3) both;
}
html[data-motion="full"] .multi-source-card.source-state-enter{
  animation:mpSourceStateEnterFull .54s cubic-bezier(.16,.86,.24,1) both;
}
html[data-motion="full"] .multi-source-card.source-state-enter::after{
  background:
    linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--mp-source-fx) 25%,transparent) 48%,transparent 58%),
    radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--mp-source-fx) 18%,transparent),transparent 30%);
  animation:mpSourceScanFull .52s cubic-bezier(.2,.8,.2,1) both;
}
html[data-motion="full"] .multi-source-card.source-state-enter .multi-source-state,
html[data-motion="full"] .multi-source-card.source-state-enter .source-count-badge{
  animation:mpSourceBadgeFull .46s cubic-bezier(.16,.86,.24,1) both;
}
html[data-motion="full"] .multi-source-card.source-state-enter .multi-source-state i{
  animation:mpSourceDotRingFull .48s cubic-bezier(.16,.86,.24,1) both;
}
@keyframes mpSourceStateExitFull{
  0%{opacity:1;transform:none;filter:none}
  100%{opacity:.58;transform:perspective(800px) rotateX(1.1deg) scaleY(.986);filter:saturate(.86)}
}
@keyframes mpSourceStateEnterFull{
  0%{opacity:.5;transform:perspective(800px) rotateX(-1.2deg) scaleY(.982)}
  46%{opacity:1;transform:perspective(800px) rotateX(.35deg) scaleY(1.006);box-shadow:0 14px 34px color-mix(in srgb,var(--mp-source-fx) 10%,transparent)}
  74%{transform:scaleY(.998)}
  100%{opacity:1;transform:none;box-shadow:none}
}
@keyframes mpSourceScanFull{
  0%{opacity:0;transform:translateY(-48%) scaleY(.82)}
  18%{opacity:.78}
  60%{opacity:.42}
  100%{opacity:0;transform:translateY(48%) scaleY(1.08)}
}
@keyframes mpSourceBadgeFull{
  0%{transform:scale(.78);opacity:.25}
  44%{transform:scale(1.10);opacity:1}
  72%{transform:scale(.97)}
  100%{transform:none;opacity:1}
}
@keyframes mpSourceDotRingFull{
  0%{transform:scale(.55);box-shadow:0 0 0 0 color-mix(in srgb,var(--mp-source-fx) 28%,transparent)}
  48%{transform:scale(1.24);box-shadow:0 0 0 8px color-mix(in srgb,var(--mp-source-fx) 0%,transparent)}
  100%{transform:scale(1);box-shadow:none}
}

/* 高性能：立即切换，不留动画残余。 */
html[data-motion="performance"] .multi-source-card.source-state-exit,
html[data-motion="performance"] .multi-source-card.source-state-enter,
html[data-motion="performance"] .multi-source-card.source-state-enter::after,
html[data-motion="performance"] .multi-source-card.source-state-enter .multi-source-state,
html[data-motion="performance"] .multi-source-card.source-state-enter .source-count-badge,
html[data-motion="performance"] .multi-source-card.source-state-enter .multi-source-state i{
  animation:none!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  box-shadow:none!important;
}
html[data-motion="performance"] .multi-source-card.source-state-enter::after{display:none!important}

/* ---------- TVBox 内部站点启停：换成“状态刻度 + 环形脉冲”，三档独立 ---------- */
.tvbox-site-chip.state-updated::after{
  background:none;
}
html[data-motion="balanced"] .tvbox-site-chip.state-updated{
  animation:mpTvboxSiteStateBalanced .30s cubic-bezier(.2,.78,.24,1) both!important;
}
html[data-motion="balanced"] .tvbox-site-chip.state-updated::after{
  display:block;
  inset:auto 8px 5px 8px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--accent) 48%,transparent),transparent);
  animation:mpTvboxSiteUnderlineBalanced .30s ease-out both!important;
}
html[data-motion="balanced"] .tvbox-site-chip.state-updated i{
  animation:mpTvboxSiteDotBalanced .28s cubic-bezier(.2,.8,.24,1) both!important;
}
@keyframes mpTvboxSiteStateBalanced{
  0%{transform:scale(.992);box-shadow:inset 0 0 0 1px transparent}
  56%{transform:scale(1.004);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent)}
  100%{transform:none;box-shadow:none}
}
@keyframes mpTvboxSiteUnderlineBalanced{
  0%{opacity:0;transform:scaleX(.15)}
  52%{opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(.72)}
}
@keyframes mpTvboxSiteDotBalanced{
  0%{transform:scale(.7)}
  62%{transform:scale(1.18)}
  100%{transform:scale(1)}
}

html[data-motion="full"] .tvbox-site-chip.state-updated{
  animation:mpTvboxSiteStateFull .50s cubic-bezier(.16,.86,.24,1) both!important;
}
html[data-motion="full"] .tvbox-site-chip.state-updated::after{
  display:block;
  inset:50% auto auto 50%;
  width:22px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 28%,transparent),transparent 66%);
  animation:mpTvboxSiteRingFull .46s ease-out both!important;
}
html[data-motion="full"] .tvbox-site-chip.state-updated i{
  animation:mpTvboxSiteDotFull .46s cubic-bezier(.16,.86,.24,1) both!important;
}
html[data-motion="full"] .tvbox-sites-enabled-count.count-updated{
  animation:mpTvboxCountFull .42s cubic-bezier(.16,.86,.24,1) both!important;
}
@keyframes mpTvboxSiteStateFull{
  0%{transform:scale(.982);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)}
  42%{transform:scale(1.012);box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 10%,transparent)}
  72%{transform:scale(.997)}
  100%{transform:none;box-shadow:none}
}
@keyframes mpTvboxSiteRingFull{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.35)}
  72%{opacity:.22;transform:translate(-50%,-50%) scale(4.2)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(5)}
}
@keyframes mpTvboxSiteDotFull{
  0%{transform:scale(.55);filter:brightness(1)}
  42%{transform:scale(1.34);filter:brightness(1.35)}
  70%{transform:scale(.94)}
  100%{transform:scale(1);filter:none}
}
@keyframes mpTvboxCountFull{
  0%{opacity:.45;transform:translateY(3px) scale(.92)}
  50%{opacity:1;transform:translateY(-1px) scale(1.05)}
  100%{opacity:1;transform:none}
}
html[data-motion="performance"] .tvbox-site-chip.state-updated,
html[data-motion="performance"] .tvbox-site-chip.state-updated::after,
html[data-motion="performance"] .tvbox-site-chip.state-updated i,
html[data-motion="performance"] .tvbox-sites-enabled-count.count-updated{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  box-shadow:none!important;
  filter:none!important;
}
html[data-motion="performance"] .tvbox-site-chip.state-updated::after{display:none!important}

/* ---------- STRM 媒体库：默认收起 + 分类/层级点击三档动画 ---------- */
.strm-library-source-head,
.strm-library-category-head,
.strm-library-item-head{
  position:relative;
  overflow:hidden;
}
.strm-library-source-head::after,
.strm-library-category-head::after,
.strm-library-item-head::after{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:0;
  border-radius:inherit;
  opacity:0;
}

/* 一般：平滑手风琴 + 短促头部高亮。 */
html[data-motion="balanced"] .strm-library-source-head.library-head-pulse,
html[data-motion="balanced"] .strm-library-category-head.library-head-pulse,
html[data-motion="balanced"] .strm-library-item-head.library-head-pulse{
  animation:mpLibraryHeadBalanced .24s ease-out both;
}
html[data-motion="balanced"] .strm-library-category.library-toggle-fx .strm-library-category-head::after,
html[data-motion="balanced"] .strm-library-source-group.library-toggle-fx .strm-library-source-head::after,
html[data-motion="balanced"] .strm-library-item.library-toggle-fx .strm-library-item-head::after{
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 8%,transparent),transparent);
  animation:mpLibraryHeadWashBalanced .26s ease-out both;
}
@keyframes mpLibraryHeadBalanced{
  0%{background:transparent}
  50%{background:color-mix(in srgb,var(--accent) 5%,transparent)}
  100%{background:transparent}
}
@keyframes mpLibraryHeadWashBalanced{
  0%{opacity:0;transform:translateX(-25%)}
  35%{opacity:.65}
  100%{opacity:0;transform:translateX(25%)}
}

/* 全特效：更明显的头部弹性和局部扫光，内容仍使用 JS 测量高度，不整树重绘。 */
html[data-motion="full"] .strm-library-source-head.library-head-pulse,
html[data-motion="full"] .strm-library-category-head.library-head-pulse,
html[data-motion="full"] .strm-library-item-head.library-head-pulse{
  animation:mpLibraryHeadFull .42s cubic-bezier(.16,.86,.24,1) both;
}
html[data-motion="full"] .strm-library-category.library-toggle-fx .strm-library-category-head::after,
html[data-motion="full"] .strm-library-source-group.library-toggle-fx .strm-library-source-head::after,
html[data-motion="full"] .strm-library-item.library-toggle-fx .strm-library-item-head::after{
  background:
    linear-gradient(105deg,transparent 18%,color-mix(in srgb,var(--accent) 15%,transparent) 47%,transparent 72%),
    radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 34%);
  animation:mpLibraryHeadSweepFull .42s ease-out both;
}
@keyframes mpLibraryHeadFull{
  0%{transform:scale(.994)}
  44%{transform:scale(1.005);background:color-mix(in srgb,var(--accent) 7%,transparent)}
  72%{transform:scale(.999)}
  100%{transform:none;background:transparent}
}
@keyframes mpLibraryHeadSweepFull{
  0%{opacity:0;transform:translateX(-32%)}
  18%{opacity:.92}
  100%{opacity:0;transform:translateX(32%)}
}

/* 箭头档位差异。 */
html[data-motion="performance"] .strm-source-chevron::before,
html[data-motion="performance"] .strm-tree-chevron::before,
html[data-motion="performance"] .strm-tree-chevron{
  transition:none!important;
}
html[data-motion="balanced"] .strm-source-chevron::before,
html[data-motion="balanced"] .strm-tree-chevron::before,
html[data-motion="balanced"] .strm-tree-chevron{
  transition:transform .18s ease!important;
}
html[data-motion="full"] .strm-source-chevron::before,
html[data-motion="full"] .strm-tree-chevron::before,
html[data-motion="full"] .strm-tree-chevron{
  transition:transform .32s cubic-bezier(.16,.86,.24,1)!important;
}
html[data-motion="performance"] .strm-library-source-head.library-head-pulse,
html[data-motion="performance"] .strm-library-category-head.library-head-pulse,
html[data-motion="performance"] .strm-library-item-head.library-head-pulse,
html[data-motion="performance"] .strm-library-source-head::after,
html[data-motion="performance"] .strm-library-category-head::after,
html[data-motion="performance"] .strm-library-item-head::after{
  animation:none!important;
  transform:none!important;
  opacity:0!important;
}

@media(prefers-reduced-motion:reduce){
  .multi-source-card.source-state-exit,
  .multi-source-card.source-state-enter,
  .multi-source-card.source-state-enter::after,
  .multi-source-card.source-state-enter .multi-source-state,
  .multi-source-card.source-state-enter .source-count-badge,
  .multi-source-card.source-state-enter .multi-source-state i,
  .tvbox-site-chip.state-updated,
  .tvbox-site-chip.state-updated::after,
  .tvbox-site-chip.state-updated i,
  .tvbox-sites-enabled-count.count-updated,
  .strm-library-source-head.library-head-pulse,
  .strm-library-category-head.library-head-pulse,
  .strm-library-item-head.library-head-pulse{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    filter:none!important;
  }
}


/* 订阅卡片与媒体库目录共用局部展开动画，不重建整个列表。
 */

/* 覆盖仅作用于订阅的进入动画，避免与共用折叠动画冲突。 */
.strm-subscription-card.open .strm-subscription-detail{
  animation:none !important;
}

.strm-subscription-summary,
.strm-library-item-head{
  position:relative;
  overflow:hidden;
}
.strm-subscription-summary::after,
.strm-library-item-head::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
}

/* -------- 高性能：订阅 / 媒体条目完全瞬时切换 -------- */
html[data-motion="performance"] .strm-subscription-summary,
html[data-motion="performance"] .strm-subscription-chevron,
html[data-motion="performance"] .strm-library-item-head,
html[data-motion="performance"] .strm-tree-chevron,
html[data-motion="performance"] .strm-tree-chevron::before{
  transition:none !important;
  animation:none !important;
}
html[data-motion="performance"] .strm-subscription-summary::after,
html[data-motion="performance"] .strm-library-item-head::after{
  display:none !important;
}

/* -------- 一般：当前剧集/订阅卡片局部反馈 -------- */
html[data-motion="balanced"] .strm-subscription-summary.strm-series-head-pulse,
html[data-motion="balanced"] .strm-library-item-head.strm-series-head-pulse{
  animation:mpStrmSeriesHeadBalanced .26s cubic-bezier(.2,.78,.24,1) both;
}
html[data-motion="balanced"] .strm-subscription-card.strm-series-disclosure-fx .strm-subscription-summary::after,
html[data-motion="balanced"] .strm-library-item.strm-series-disclosure-fx .strm-library-item-head::after{
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb,var(--accent) 9%,transparent) 42%,
    color-mix(in srgb,var(--accent2) 7%,transparent) 58%,
    transparent 100%);
  animation:mpStrmSeriesWashBalanced .30s ease-out both;
}
html[data-motion="balanced"] .strm-subscription-card.strm-series-disclosure-fx,
html[data-motion="balanced"] .strm-library-item.strm-series-disclosure-fx{
  animation:mpStrmSeriesShellBalanced .24s ease-out both;
}
html[data-motion="balanced"] .strm-subscription-chevron{
  transition:transform .18s ease,background .18s ease,border-color .18s ease !important;
}

@keyframes mpStrmSeriesHeadBalanced{
  0%{background:transparent}
  45%{background:color-mix(in srgb,var(--accent) 6%,transparent)}
  100%{background:transparent}
}
@keyframes mpStrmSeriesWashBalanced{
  0%{opacity:0;transform:translateX(-28%)}
  38%{opacity:.72}
  100%{opacity:0;transform:translateX(28%)}
}
@keyframes mpStrmSeriesShellBalanced{
  0%{border-color:var(--line);box-shadow:none}
  48%{border-color:color-mix(in srgb,var(--accent) 24%,var(--line));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 6%,transparent)}
  100%{border-color:var(--line);box-shadow:none}
}

/* -------- 全特效：仍然只作用当前剧集/订阅卡片 -------- */
html[data-motion="full"] .strm-subscription-summary.strm-series-head-pulse,
html[data-motion="full"] .strm-library-item-head.strm-series-head-pulse{
  animation:mpStrmSeriesHeadFull .40s cubic-bezier(.16,.88,.24,1) both;
}
html[data-motion="full"] .strm-subscription-card.strm-series-disclosure-fx .strm-subscription-summary::after,
html[data-motion="full"] .strm-library-item.strm-series-disclosure-fx .strm-library-item-head::after{
  background:
    linear-gradient(105deg,transparent 14%,color-mix(in srgb,var(--accent) 16%,transparent) 46%,transparent 72%),
    radial-gradient(circle at 14% 50%,color-mix(in srgb,var(--accent2) 13%,transparent),transparent 34%);
  animation:mpStrmSeriesSweepFull .44s ease-out both;
}
html[data-motion="full"] .strm-subscription-card.strm-series-disclosure-fx,
html[data-motion="full"] .strm-library-item.strm-series-disclosure-fx{
  animation:mpStrmSeriesShellFull .38s cubic-bezier(.16,.88,.24,1) both;
}
html[data-motion="full"] .strm-subscription-chevron{
  transition:transform .30s cubic-bezier(.16,.88,.24,1),background .22s ease,border-color .22s ease !important;
}

@keyframes mpStrmSeriesHeadFull{
  0%{transform:translateY(0);background:transparent}
  42%{transform:translateY(-1px);background:color-mix(in srgb,var(--accent) 8%,transparent)}
  72%{transform:translateY(.5px)}
  100%{transform:none;background:transparent}
}
@keyframes mpStrmSeriesSweepFull{
  0%{opacity:0;transform:translateX(-34%)}
  18%{opacity:.95}
  100%{opacity:0;transform:translateX(34%)}
}
@keyframes mpStrmSeriesShellFull{
  0%{transform:scale(.997);border-color:var(--line);box-shadow:none}
  44%{transform:scale(1.003);border-color:color-mix(in srgb,var(--accent) 32%,var(--line));box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 10%,transparent)}
  74%{transform:scale(.999)}
  100%{transform:none;border-color:var(--line);box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  .strm-subscription-summary.strm-series-head-pulse,
  .strm-library-item-head.strm-series-head-pulse,
  .strm-subscription-card.strm-series-disclosure-fx,
  .strm-library-item.strm-series-disclosure-fx,
  .strm-subscription-card.strm-series-disclosure-fx .strm-subscription-summary::after,
  .strm-library-item.strm-series-disclosure-fx .strm-library-item-head::after{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    box-shadow:none !important;
  }
}


/* STRM 浮层可见性、弹窗与聚光层级。
 */

/* 1) STRM 订阅 - 选择线路下拉框不再被卡片/按钮区遮挡 */
.strm-subscription-card.open,
.strm-subscription-card.open .strm-subscription-detail,
.strm-subscription-card.open .strm-episode-panel,
.strm-subscription-card.open .strm-subscription-route-row,
.strm-subscription-card.open .strm-subscription-route-field{
  overflow:visible;
}
.strm-subscription-route-row.route-open{
  position:relative;
  z-index:36;
  align-items:end;
}
.strm-subscription-route-field,
.strm-subscription-route-field .mf-select{
  position:relative;
  z-index:38;
}
.strm-subscription-route-field .mf-select-menu{
  z-index:380 !important;
}
.strm-subscription-actions{
  position:relative;
  z-index:1;
}

/* 2) Spotlight 扩展到面板/指标卡，并修复动态区域不响应的问题 */
.panel,
.metric,
.overview-mini,
.input-helper-card,
.activity-panel{
  position:relative;
  overflow:hidden;
}
.panel::before,
.metric::before,
.overview-mini::before,
.input-helper-card::before,
.activity-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 45%);
  transition:opacity .24s ease;
}
.panel:hover::before,
.metric:hover::before,
.overview-mini:hover::before,
.input-helper-card:hover::before,
.activity-panel:hover::before{
  opacity:1;
}
html[data-theme="dark"] .panel::before,
html[data-theme="dark"] .metric::before,
html[data-theme="dark"] .overview-mini::before,
html[data-theme="dark"] .input-helper-card::before,
html[data-theme="dark"] .activity-panel::before{
  background:radial-gradient(
    300px circle at var(--mx,50%) var(--my,50%),
    rgba(120,112,255,.13),
    rgba(0,191,255,.05) 28%,
    transparent 48%
  );
}
html[data-theme="light"] .panel::before,
html[data-theme="light"] .metric::before,
html[data-theme="light"] .overview-mini::before,
html[data-theme="light"] .input-helper-card::before,
html[data-theme="light"] .activity-panel::before{
  display:none;
}

/* 3) 全局弹窗三档动效（适用于手动匹配等所有 modal） */
.modal,
.modal-backdrop{
  will-change:opacity,transform,filter;
}
.modal::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}

/* 高性能：瞬时显示，不做额外特效 */
html[data-motion="performance"] .modal,
html[data-motion="performance"] .modal-backdrop{
  transition:none !important;
  animation:none !important;
}
html[data-motion="performance"] .modal.show,
html[data-motion="performance"] .modal-backdrop.show,
html[data-motion="performance"] .modal.show .modal-head,
html[data-motion="performance"] .modal.show .modal-body,
html[data-motion="performance"] .modal.show::after{
  animation:none !important;
  filter:none !important;
}

/* 一般：更清晰的弹出，但保持克制 */
html[data-motion="balanced"] .modal-backdrop{
  transition:opacity .18s ease,backdrop-filter .18s ease !important;
}
html[data-motion="balanced"] .modal{
  transform:translate(-50%,-47%) scale(.976);
  transition:opacity .18s ease,transform .18s cubic-bezier(.22,.8,.22,1),box-shadow .18s ease !important;
}
html[data-motion="balanced"] .modal.show{
  animation:mpModalBalancedShell .22s cubic-bezier(.22,.8,.22,1) both;
}
html[data-motion="balanced"] .modal-backdrop.show{
  animation:mpModalBalancedBackdrop .18s ease both;
}
html[data-motion="balanced"] .modal.show .modal-head{
  animation:mpModalBalancedHead .18s ease-out both !important;
}
html[data-motion="balanced"] .modal.show .modal-body{
  animation:mpModalBalancedBody .2s .02s ease-out both !important;
}
html[data-motion="balanced"] .modal.show::after{
  background:linear-gradient(118deg,transparent 0%,color-mix(in srgb,var(--accent) 10%,transparent) 38%,transparent 76%);
  animation:mpModalBalancedSweep .24s ease-out both;
}

/* 全特效：完整弹性、层次光效、柔和扫光 */
html[data-motion="full"] .modal-backdrop{
  transition:opacity .28s ease,backdrop-filter .28s ease !important;
}
html[data-motion="full"] .modal{
  transform:translate(-50%,-48.5%) scale(.968);
}
html[data-motion="full"] .modal.show{
  animation:mpModalFullShell .34s cubic-bezier(.18,.88,.24,1.06) both;
  box-shadow:0 40px 120px rgba(4,10,28,.34),0 14px 42px color-mix(in srgb,var(--accent) 11%,transparent);
}
html[data-motion="full"] .modal-backdrop.show{
  animation:mpModalFullBackdrop .28s ease-out both;
}
html[data-motion="full"] .modal.show .modal-head{
  animation:mpModalFullHead .26s cubic-bezier(.18,.88,.24,1.03) both !important;
}
html[data-motion="full"] .modal.show .modal-body{
  animation:mpModalFullBody .32s .035s cubic-bezier(.18,.88,.24,1.03) both !important;
}
html[data-motion="full"] .modal.show::after{
  background:linear-gradient(116deg,
    transparent 0%,
    color-mix(in srgb,var(--accent2) 0%,transparent) 18%,
    color-mix(in srgb,var(--accent) 16%,transparent) 42%,
    color-mix(in srgb,var(--accent2) 11%,transparent) 62%,
    transparent 100%);
  animation:mpModalFullSweep .55s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes mpModalBalancedBackdrop{
  from{opacity:0;backdrop-filter:blur(0) saturate(1)}
  to{opacity:1;backdrop-filter:blur(14px) saturate(1.06)}
}
@keyframes mpModalBalancedShell{
  from{opacity:0;transform:translate(-50%,-47.5%) scale(.972)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes mpModalBalancedHead{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
@keyframes mpModalBalancedBody{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes mpModalBalancedSweep{
  0%{opacity:0;transform:translateX(-16%) skewX(-12deg)}
  35%{opacity:.28}
  100%{opacity:0;transform:translateX(12%) skewX(-12deg)}
}
@keyframes mpModalFullBackdrop{
  from{opacity:0;backdrop-filter:blur(0) saturate(1)}
  to{opacity:1;backdrop-filter:blur(14px) saturate(1.06)}
}
@keyframes mpModalFullShell{
  0%{opacity:0;transform:translate(-50%,-49.5%) scale(.958)}
  56%{opacity:1;transform:translate(-50%,-50%) scale(1.007)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes mpModalFullHead{
  0%{opacity:0;transform:translateY(-11px)}
  62%{opacity:1;transform:translateY(1px)}
  100%{opacity:1;transform:none}
}
@keyframes mpModalFullBody{
  0%{opacity:0;transform:translateY(14px) scale(.992)}
  62%{opacity:1;transform:translateY(-1px) scale(1.003)}
  100%{opacity:1;transform:none}
}
@keyframes mpModalFullSweep{
  0%{opacity:0;transform:translateX(-24%) skewX(-12deg)}
  18%{opacity:.2}
  52%{opacity:.5}
  100%{opacity:0;transform:translateX(24%) skewX(-12deg)}
}

@media(prefers-reduced-motion:reduce){
  .modal,
  .modal-backdrop,
  .modal.show,
  .modal-backdrop.show,
  .modal.show .modal-head,
  .modal.show .modal-body,
  .modal.show::after{
    transition:none !important;
    animation:none !important;
    filter:none !important;
  }
}


/* 线路菜单背景和剧集选择反馈。
 */

/* STRM 线路菜单必须是实体层：完全盖住后面的订阅文字。 */
.strm-subscription-route-field .mf-select-menu,
.strm-manual-route-panel .mf-select-menu{
  background:#111827 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:0;
  isolation:isolate;
  box-shadow:0 22px 54px rgba(0,0,0,.34),0 0 0 1px rgba(118,110,255,.18) !important;
}
.strm-subscription-route-field .mf-select.open .mf-select-menu,
.strm-manual-route-panel .mf-select.open .mf-select-menu{
  opacity:1 !important;
}
html[data-theme="light"] .strm-subscription-route-field .mf-select-menu,
html[data-theme="light"] .strm-manual-route-panel .mf-select-menu{
  background:#ffffff !important;
  box-shadow:0 22px 54px rgba(31,41,55,.18),0 0 0 1px rgba(87,82,255,.16) !important;
}
.strm-subscription-route-field .mf-select-option,
.strm-manual-route-panel .mf-select-option{
  position:relative;
  z-index:1;
}

/* 分集选择基础层 */
.strm-episode-choice{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  contain:paint;
}
.strm-episode-choice::before,
.strm-episode-choice::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index:-1;
}
.strm-episode-choice-fx[data-episode-fx="selected"]{
  border-color:color-mix(in srgb,var(--accent) 48%,var(--line-strong));
}
.strm-episode-choice-fx[data-episode-fx="cleared"]{
  border-color:color-mix(in srgb,var(--muted) 34%,var(--line));
}

/* 高性能：无分集动画，状态瞬时变化。 */
html[data-motion="performance"] .strm-episode-choice-fx,
html[data-motion="performance"] .strm-episode-choice-fx::before,
html[data-motion="performance"] .strm-episode-choice-fx::after,
html[data-motion="performance"] .strm-episode-bulk-button-fx,
html[data-motion="performance"] .strm-episode-count-fx{
  animation:none !important;
  transition:none !important;
  transform:none !important;
  filter:none !important;
}

/* 一般：当前单集短促“确认”反馈；全选/清空是轻量波次。 */
html[data-motion="balanced"] .strm-episode-choice-fx[data-episode-fx="selected"]{
  animation:mpEpisodeBalancedSelect .28s cubic-bezier(.22,.8,.22,1) both;
  animation-delay:calc(var(--episode-fx-index,0) * 7ms);
}
html[data-motion="balanced"] .strm-episode-choice-fx[data-episode-fx="cleared"]{
  animation:mpEpisodeBalancedClear .24s ease-out both;
  animation-delay:calc(var(--episode-fx-index,0) * 6ms);
}
html[data-motion="balanced"] .strm-episode-choice-fx[data-episode-fx="selected"]::after{
  background:linear-gradient(115deg,transparent 0%,color-mix(in srgb,var(--accent) 12%,transparent) 48%,transparent 82%);
  animation:mpEpisodeBalancedWash .30s ease-out both;
  animation-delay:calc(var(--episode-fx-index,0) * 7ms);
}
html[data-motion="balanced"] .strm-episode-choice input:checked{
  filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--accent) 26%,transparent));
}
html[data-motion="balanced"] .strm-episode-bulk-button-fx{
  animation:mpEpisodeBalancedButton .24s ease-out both;
}
html[data-motion="balanced"] .strm-episode-count-fx{
  animation:mpEpisodeBalancedCount .24s ease-out both;
}

/* 全特效：更明显的弹性、局部光晕和级联扫光，仅当前分集面板。 */
html[data-motion="full"] .strm-episode-choice-fx[data-episode-fx="selected"]{
  animation:mpEpisodeFullSelect .44s cubic-bezier(.18,.88,.24,1.08) both;
  animation-delay:calc(var(--episode-fx-index,0) * 18ms);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent),
    inset 0 0 24px color-mix(in srgb,var(--accent) 11%,transparent);
}
html[data-motion="full"] .strm-episode-choice-fx[data-episode-fx="cleared"]{
  animation:mpEpisodeFullClear .36s cubic-bezier(.22,.72,.2,1) both;
  animation-delay:calc(var(--episode-fx-index,0) * 14ms);
}
html[data-motion="full"] .strm-episode-choice-fx[data-episode-fx="selected"]::before{
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 24% 50%,color-mix(in srgb,var(--accent) 21%,transparent),transparent 66%);
  animation:mpEpisodeFullGlow .48s ease-out both;
  animation-delay:calc(var(--episode-fx-index,0) * 18ms);
}
html[data-motion="full"] .strm-episode-choice-fx[data-episode-fx="selected"]::after{
  background:linear-gradient(112deg,transparent 0%,color-mix(in srgb,var(--accent2) 0%,transparent) 18%,color-mix(in srgb,var(--accent) 22%,transparent) 48%,transparent 80%);
  animation:mpEpisodeFullSweep .52s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--episode-fx-index,0) * 18ms);
}
html[data-motion="full"] .strm-episode-choice input:checked{
  animation:mpEpisodeCheckboxPop .34s cubic-bezier(.18,.88,.24,1.12) both;
  filter:drop-shadow(0 3px 7px color-mix(in srgb,var(--accent) 35%,transparent));
}
html[data-motion="full"] .strm-episode-bulk-button-fx{
  animation:mpEpisodeFullButton .38s cubic-bezier(.18,.88,.24,1.08) both;
}
html[data-motion="full"] .strm-episode-count-fx{
  animation:mpEpisodeFullCount .36s cubic-bezier(.18,.88,.24,1.08) both;
}

@keyframes mpEpisodeBalancedSelect{
  0%{transform:scale(.985);background:color-mix(in srgb,var(--accent) 2%,var(--panel-soft))}
  55%{transform:scale(1.006);background:color-mix(in srgb,var(--accent) 8%,var(--panel-soft))}
  100%{transform:none;background:var(--panel-soft)}
}
@keyframes mpEpisodeBalancedClear{
  0%{transform:scale(1.004);opacity:1}
  55%{transform:scale(.992);opacity:.78}
  100%{transform:none;opacity:1}
}
@keyframes mpEpisodeBalancedWash{
  0%{opacity:0;transform:translateX(-18%)}
  45%{opacity:.65}
  100%{opacity:0;transform:translateX(18%)}
}
@keyframes mpEpisodeBalancedButton{
  0%{transform:scale(.97)}
  55%{transform:scale(1.025);border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
  100%{transform:none}
}
@keyframes mpEpisodeBalancedCount{
  0%{opacity:.55;transform:translateY(2px)}
  100%{opacity:1;transform:none}
}
@keyframes mpEpisodeFullSelect{
  0%{transform:scale(.972);background:color-mix(in srgb,var(--accent) 1%,var(--panel-soft))}
  50%{transform:scale(1.018);background:color-mix(in srgb,var(--accent) 11%,var(--panel-soft))}
  76%{transform:scale(.997)}
  100%{transform:none;background:var(--panel-soft)}
}
@keyframes mpEpisodeFullClear{
  0%{transform:scale(1.01);opacity:1}
  42%{transform:scale(.982);opacity:.62;filter:saturate(.72)}
  75%{transform:scale(1.004);opacity:.92}
  100%{transform:none;opacity:1;filter:none}
}
@keyframes mpEpisodeFullGlow{
  0%{opacity:0;transform:scale(.55)}
  42%{opacity:.75}
  100%{opacity:0;transform:scale(1.18)}
}
@keyframes mpEpisodeFullSweep{
  0%{opacity:0;transform:translateX(-30%) skewX(-12deg)}
  25%{opacity:.35}
  55%{opacity:.7}
  100%{opacity:0;transform:translateX(30%) skewX(-12deg)}
}
@keyframes mpEpisodeCheckboxPop{
  0%{transform:scale(.78)}
  58%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
@keyframes mpEpisodeFullButton{
  0%{transform:scale(.955)}
  50%{transform:scale(1.035);box-shadow:0 9px 20px color-mix(in srgb,var(--accent) 16%,transparent)}
  100%{transform:none;box-shadow:none}
}
@keyframes mpEpisodeFullCount{
  0%{opacity:.45;transform:translateY(3px) scale(.96)}
  58%{opacity:1;transform:translateY(-1px) scale(1.04);color:var(--accent2)}
  100%{transform:none;color:inherit}
}

@media(prefers-reduced-motion:reduce){
  .strm-episode-choice-fx,
  .strm-episode-choice-fx::before,
  .strm-episode-choice-fx::after,
  .strm-episode-bulk-button-fx,
  .strm-episode-count-fx,
  .strm-episode-choice input:checked{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
}


/* 线路菜单的层叠顺序与更新日志折叠布局。
 */

/* STRM 订阅线路菜单：提升整张当前卡片，彻底避免被后续订阅卡片盖住或点穿。 */
.strm-subscription-list{
  position:relative;
  isolation:isolate;
}
.strm-subscription-card{
  position:relative;
  z-index:0;
}
.strm-subscription-card:has(.strm-subscription-route-field .mf-select.open){
  z-index:900 !important;
  overflow:visible !important;
  isolation:isolate;
}
.strm-subscription-card:has(.strm-subscription-route-field .mf-select.open) .strm-subscription-detail,
.strm-subscription-card:has(.strm-subscription-route-field .mf-select.open) .strm-subscription-route-row,
.strm-subscription-card:has(.strm-subscription-route-field .mf-select.open) .strm-subscription-route-field,
.strm-subscription-card:has(.strm-subscription-route-field .mf-select.open) .mf-select{
  overflow:visible !important;
}
.strm-subscription-route-field .mf-select-menu,
.strm-manual-route-panel .mf-select-menu{
  pointer-events:none !important;
  background:#111827 !important;
  background-image:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  mix-blend-mode:normal !important;
  isolation:isolate;
}
.strm-subscription-route-field .mf-select.open .mf-select-menu,
.strm-manual-route-panel .mf-select.open .mf-select-menu{
  pointer-events:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:1200 !important;
}
.strm-subscription-route-field .mf-select-menu::before,
.strm-manual-route-panel .mf-select-menu::before{
  display:none !important;
  content:none !important;
}
.strm-subscription-route-field .mf-select-option,
.strm-manual-route-panel .mf-select-option{
  pointer-events:auto !important;
}
html[data-theme="light"] .strm-subscription-route-field .mf-select-menu,
html[data-theme="light"] .strm-manual-route-panel .mf-select-menu{
  background:#fff !important;
  background-image:none !important;
}

/* 更新日志：外层只显示版本号与更新时间，点击后局部展开具体内容。 */
.changelog-release-list{
  display:grid;
  gap:12px;
}
.changelog-release{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:var(--panel-soft);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.changelog-release-summary{
  width:100%;
  min-height:74px;
  padding:14px 16px 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.changelog-release-main{
  min-width:0;
  display:grid;
  gap:6px;
}
.changelog-release-main strong{
  font-size:0.9375rem;
  letter-spacing:-.015em;
}
.changelog-release-main small{
  color:var(--muted);
  font-size:0.625rem;
}
.changelog-release-side{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.changelog-release-chevron{
  width:28px;
  height:28px;
  position:relative;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-strong);
}
.changelog-release-chevron::before{
  content:"";
  width:7px;
  height:7px;
  border-right:1.7px solid var(--muted);
  border-bottom:1.7px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .22s ease,border-color .22s ease;
}
.changelog-release.open .changelog-release-chevron::before{
  transform:translateY(2px) rotate(225deg);
  border-color:var(--accent2);
}
.changelog-release-detail{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  border-top:1px solid transparent;
}
.changelog-release-detail-inner{
  min-height:0;
  overflow:hidden;
  padding:0 18px;
}
.changelog-release-detail p{
  margin:0;
  color:var(--text);
  font-size:0.6875rem;
  font-weight:750;
  line-height:1.6;
}
.changelog-release-detail ul{
  margin:9px 0 0;
  padding-left:18px;
  color:var(--muted);
  font-size:0.625rem;
  line-height:1.8;
}
.changelog-release.open{
  border-color:color-mix(in srgb,var(--accent) 32%,var(--line-strong));
}
.changelog-release.open .changelog-release-detail{
  grid-template-rows:1fr;
  opacity:1;
  border-top-color:var(--line);
}
.changelog-release.open .changelog-release-detail-inner{
  padding:14px 18px 17px;
}
html[data-theme="light"] .changelog-release{
  background:#fff;
}

/* 高性能：直接展开/收起。 */
html[data-motion="performance"] .changelog-release,
html[data-motion="performance"] .changelog-release-summary,
html[data-motion="performance"] .changelog-release-detail,
html[data-motion="performance"] .changelog-release-detail-inner,
html[data-motion="performance"] .changelog-release-chevron::before{
  transition:none !important;
  animation:none !important;
  transform:none;
}
html[data-motion="performance"] .changelog-release.open .changelog-release-chevron::before{
  transform:translateY(2px) rotate(225deg) !important;
}

/* 一般：轻量手风琴 + 当前版本卡片短促高亮。 */
html[data-motion="balanced"] .changelog-release-detail{
  transition:grid-template-rows .22s cubic-bezier(.22,.8,.22,1),opacity .18s ease,border-color .18s ease;
}
html[data-motion="balanced"] .changelog-release-detail-inner{
  transition:padding .22s cubic-bezier(.22,.8,.22,1);
}
html[data-motion="balanced"] .changelog-release.changelog-release-fx{
  animation:mpChangelogBalancedCard .28s ease-out both;
}
html[data-motion="balanced"] .changelog-release.open .changelog-release-detail-inner{
  animation:mpChangelogBalancedDetail .22s ease-out both;
}

/* 全特效：弹性展开、局部扫光和层次光晕，但只作用当前版本卡片。 */
html[data-motion="full"] .changelog-release-detail{
  transition:grid-template-rows .34s cubic-bezier(.18,.88,.24,1.04),opacity .22s ease,border-color .22s ease;
}
html[data-motion="full"] .changelog-release-detail-inner{
  transition:padding .34s cubic-bezier(.18,.88,.24,1.04);
}
html[data-motion="full"] .changelog-release::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(112deg,transparent 0%,color-mix(in srgb,var(--accent) 18%,transparent) 48%,transparent 82%);
}
html[data-motion="full"] .changelog-release.changelog-release-fx{
  animation:mpChangelogFullCard .46s cubic-bezier(.18,.88,.24,1.07) both;
}
html[data-motion="full"] .changelog-release.changelog-release-fx::after{
  animation:mpChangelogFullSweep .52s cubic-bezier(.2,.8,.2,1) both;
}
html[data-motion="full"] .changelog-release.open .changelog-release-detail-inner{
  animation:mpChangelogFullDetail .34s .025s cubic-bezier(.18,.88,.24,1.04) both;
}

@keyframes mpChangelogBalancedCard{
  0%{transform:scale(.992);border-color:var(--line-strong)}
  55%{transform:scale(1.003);border-color:color-mix(in srgb,var(--accent) 46%,var(--line-strong))}
  100%{transform:none}
}
@keyframes mpChangelogBalancedDetail{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}
@keyframes mpChangelogFullCard{
  0%{transform:scale(.985);box-shadow:none}
  48%{transform:scale(1.006);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 12%,transparent)}
  78%{transform:scale(.998)}
  100%{transform:none;box-shadow:none}
}
@keyframes mpChangelogFullSweep{
  0%{opacity:0;transform:translateX(-28%) skewX(-12deg)}
  28%{opacity:.28}
  58%{opacity:.62}
  100%{opacity:0;transform:translateX(28%) skewX(-12deg)}
}
@keyframes mpChangelogFullDetail{
  0%{opacity:0;transform:translateY(-9px) scale(.992)}
  62%{opacity:1;transform:translateY(1px) scale(1.002)}
  100%{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .changelog-release,
  .changelog-release-summary,
  .changelog-release-detail,
  .changelog-release-detail-inner,
  .changelog-release-chevron::before,
  .changelog-release::after{
    transition:none !important;
    animation:none !important;
  }
}


/* 播放线路局部反馈与媒体服务指标排版。
 */

/* Emby 的五个指标按三项加两项排列。 */
.module-summary.five{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* 线路控件只影响当前区域的显示。 */
.strm-subscription-route-row.route-open,
.strm-manual-result-card.route-open .strm-manual-route-panel{
  position:relative;
  isolation:isolate;
  transform-origin:top center;
}
.strm-subscription-route-row.route-open::after,
.strm-manual-result-card.route-open .strm-manual-route-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  z-index:0;
}
.strm-subscription-route-row.route-open > *,
.strm-manual-result-card.route-open .strm-manual-route-panel > *{
  position:relative;
  z-index:1;
}

/* 高性能：立即显示，没有位移、回弹、扫光或级联。 */
html[data-motion="performance"] .strm-subscription-route-row.route-open,
html[data-motion="performance"] .strm-manual-result-card.route-open .strm-manual-route-panel,
html[data-motion="performance"] .strm-subscription-route-field .mf-select.open .mf-select-menu,
html[data-motion="performance"] .strm-manual-route-panel .mf-select.open .mf-select-menu,
html[data-motion="performance"] .strm-subscription-route-field .mf-select.open .mf-select-option,
html[data-motion="performance"] .strm-manual-route-panel .mf-select.open .mf-select-option{
  animation:none !important;
  transition:none !important;
  transform:none !important;
  filter:none !important;
}

/* 一般：明确但克制的局部下沉 + 轻回弹，选项短级联。 */
html[data-motion="balanced"] .strm-subscription-route-row.route-open,
html[data-motion="balanced"] .strm-manual-result-card.route-open .strm-manual-route-panel{
  animation:mpStrmRouteBalancedPanel .24s cubic-bezier(.22,.82,.22,1) both;
}
html[data-motion="balanced"] .strm-subscription-route-row.route-open::after,
html[data-motion="balanced"] .strm-manual-result-card.route-open .strm-manual-route-panel::after{
  background:linear-gradient(116deg,transparent 0%,color-mix(in srgb,var(--accent) 10%,transparent) 42%,transparent 82%);
  animation:mpStrmRouteBalancedWash .30s ease-out both;
}
html[data-motion="balanced"] .strm-subscription-route-field .mf-select.open .mf-select-menu,
html[data-motion="balanced"] .strm-manual-route-panel .mf-select.open .mf-select-menu{
  animation:mpStrmRouteBalancedMenu .20s cubic-bezier(.22,.82,.22,1) both !important;
}
html[data-motion="balanced"] .strm-subscription-route-field .mf-select.open .mf-select-option,
html[data-motion="balanced"] .strm-manual-route-panel .mf-select.open .mf-select-option{
  animation:mpStrmRouteBalancedOption .18s ease-out both !important;
  animation-delay:calc(var(--mf-option-index,0) * 16ms) !important;
}

/* 全特效：更完整的弹性、局部辉光与级联，不影响其它订阅/搜索结果。 */
html[data-motion="full"] .strm-subscription-route-row.route-open,
html[data-motion="full"] .strm-manual-result-card.route-open .strm-manual-route-panel{
  animation:mpStrmRouteFullPanel .36s cubic-bezier(.18,.9,.24,1.08) both;
  filter:drop-shadow(0 14px 28px color-mix(in srgb,var(--accent) 9%,transparent));
}
html[data-motion="full"] .strm-subscription-route-row.route-open::after,
html[data-motion="full"] .strm-manual-result-card.route-open .strm-manual-route-panel::after{
  background:linear-gradient(115deg,
    transparent 0%,
    color-mix(in srgb,var(--accent2) 0%,transparent) 18%,
    color-mix(in srgb,var(--accent) 17%,transparent) 43%,
    color-mix(in srgb,var(--accent2) 11%,transparent) 62%,
    transparent 100%);
  animation:mpStrmRouteFullSweep .55s cubic-bezier(.2,.8,.2,1) both;
}
html[data-motion="full"] .strm-subscription-route-field .mf-select.open .mf-select-menu,
html[data-motion="full"] .strm-manual-route-panel .mf-select.open .mf-select-menu{
  animation:mpStrmRouteFullMenu .28s cubic-bezier(.18,.9,.24,1.06) both !important;
  box-shadow:0 26px 62px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent),0 0 34px color-mix(in srgb,var(--accent) 10%,transparent) !important;
}
html[data-motion="full"] .strm-subscription-route-field .mf-select.open .mf-select-option,
html[data-motion="full"] .strm-manual-route-panel .mf-select.open .mf-select-option{
  animation:mpStrmRouteFullOption .24s cubic-bezier(.18,.9,.24,1.06) both !important;
  animation-delay:calc(var(--mf-option-index,0) * 22ms) !important;
}

@keyframes mpStrmRouteBalancedPanel{
  0%{opacity:0;transform:translateY(-7px) scale(.99)}
  72%{opacity:1;transform:translateY(1px) scale(1.002)}
  100%{opacity:1;transform:none}
}
@keyframes mpStrmRouteBalancedWash{
  0%{opacity:0;transform:translateX(-16%)}
  42%{opacity:.45}
  100%{opacity:0;transform:translateX(14%)}
}
@keyframes mpStrmRouteBalancedMenu{
  from{opacity:0;transform:translateY(-7px) scale(.99)}
  to{opacity:1;transform:none}
}
@keyframes mpStrmRouteBalancedOption{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}
@keyframes mpStrmRouteFullPanel{
  0%{opacity:0;transform:translateY(-10px) scale(.982)}
  58%{opacity:1;transform:translateY(2px) scale(1.006)}
  100%{opacity:1;transform:none}
}
@keyframes mpStrmRouteFullSweep{
  0%{opacity:0;transform:translateX(-25%) skewX(-12deg)}
  20%{opacity:.22}
  54%{opacity:.52}
  100%{opacity:0;transform:translateX(25%) skewX(-12deg)}
}
@keyframes mpStrmRouteFullMenu{
  0%{opacity:0;transform:translateY(-10px) scale(.978)}
  62%{opacity:1;transform:translateY(2px) scale(1.005)}
  100%{opacity:1;transform:none}
}
@keyframes mpStrmRouteFullOption{
  0%{opacity:0;transform:translateY(-8px) scale(.985)}
  62%{opacity:1;transform:translateY(1px) scale(1.008)}
  100%{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .strm-subscription-route-row.route-open,
  .strm-manual-result-card.route-open .strm-manual-route-panel,
  .strm-subscription-route-field .mf-select.open .mf-select-menu,
  .strm-manual-route-panel .mf-select.open .mf-select-menu,
  .strm-subscription-route-field .mf-select.open .mf-select-option,
  .strm-manual-route-panel .mf-select.open .mf-select-option{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
}


/* 日志筛选与顶部页面导航的分级反馈。
 */
.mainnav{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.mainnav::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
}
.mainnav a{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.mainnav a::before,
.mainnav a::after,
.log-filter::before,
.log-filter::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:0;
}
.mainnav a::before{
  inset:0;
  border-radius:inherit;
}
.mainnav a::after{
  left:12px;
  right:12px;
  bottom:5px;
  height:2px;
  border-radius:999px;
  transform:scaleX(.2);
  transform-origin:center;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 82%,transparent),color-mix(in srgb,var(--accent2) 72%,transparent));
}
.mainnav a.active{
  color:var(--text);
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel-strong) 92%,transparent),color-mix(in srgb,var(--panel) 94%,transparent));
  box-shadow:
    0 10px 24px rgba(4,8,24,.14),
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,var(--line));
}
.mainnav a.active::after{
  opacity:1;
  transform:scaleX(1);
}
.log-filter{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.log-filter::before{
  inset:0;
  border-radius:inherit;
}
.log-filter::after{
  inset:auto 9px 6px;
  height:2px;
  border-radius:999px;
  transform:scaleX(.22);
  transform-origin:center;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 82%,transparent),color-mix(in srgb,var(--accent2) 72%,transparent));
}
.log-filter.active{
  color:var(--text);
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line-strong));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--panel-strong)),color-mix(in srgb,var(--accent2) 3%,var(--panel-soft)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent),0 10px 22px color-mix(in srgb,var(--accent) 6%,transparent);
}
.log-filter.active::after{
  opacity:1;
  transform:scaleX(1);
}

/* 高性能：直接切换，取消额外特效 */
html[data-motion="performance"] .mainnav,
html[data-motion="performance"] .mainnav a,
html[data-motion="performance"] .log-filter,
html[data-motion="performance"] .mainnav::after,
html[data-motion="performance"] .mainnav a::before,
html[data-motion="performance"] .mainnav a::after,
html[data-motion="performance"] .log-filter::before,
html[data-motion="performance"] .log-filter::after{
  animation:none !important;
  transition:none !important;
}
html[data-motion="performance"] .mainnav.nav-press-balanced,
html[data-motion="performance"] .mainnav.nav-press-full,
html[data-motion="performance"] .mainnav a.mp-mainnav-fx,
html[data-motion="performance"] .log-filter.mp-log-filter-fx{
  animation:none !important;
  filter:none !important;
}

/* 一般：更清晰的按下/切换反馈，但不做重光效 */
html[data-motion="balanced"] .mainnav a{
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
html[data-motion="balanced"] .mainnav a:hover{
  background:color-mix(in srgb,var(--accent) 5%,transparent);
}
html[data-motion="balanced"] .mainnav a.active{
  animation:mpMainnavBalancedActive .18s ease-out both;
}
html[data-motion="balanced"] .mainnav a.mp-mainnav-fx{
  animation:mpMainnavBalancedTap .2s ease-out both;
}
html[data-motion="balanced"] .mainnav.nav-press-balanced::after{
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--accent) 10%,transparent) 45%,transparent 100%);
  animation:mpMainnavBalancedSweep .2s ease-out both;
}
html[data-motion="balanced"] .mainnav a.mp-mainnav-fx::before{
  background:linear-gradient(115deg,transparent 0%,color-mix(in srgb,var(--accent) 12%,transparent) 44%,transparent 100%);
  animation:mpMainnavBalancedLinkSweep .22s ease-out both;
}
html[data-motion="balanced"] .log-filter.active{
  animation:mpLogFilterBalancedActive .18s ease-out both;
}
html[data-motion="balanced"] .log-filter.mp-log-filter-fx{
  animation:mpLogFilterBalancedTap .18s ease-out both;
}
html[data-motion="balanced"] .log-filter.mp-log-filter-fx::before{
  background:linear-gradient(115deg,transparent 0%,color-mix(in srgb,var(--accent) 10%,transparent) 44%,transparent 100%);
  animation:mpLogFilterBalancedSweep .22s ease-out both;
}

/* 全特效：更完整的切换强调，保留局部扫光与容器脉冲 */
html[data-motion="full"] .mainnav a{
  transition:transform .24s cubic-bezier(.2,.8,.2,1),background .24s ease,border-color .24s ease,box-shadow .24s ease,color .24s ease,filter .24s ease;
}
html[data-motion="full"] .mainnav a:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
}
html[data-motion="full"] .mainnav a.active{
  box-shadow:
    0 12px 28px color-mix(in srgb,var(--accent) 8%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,var(--line));
  animation:mpMainnavFullActive .3s cubic-bezier(.18,.88,.24,1.03) both;
}
html[data-motion="full"] .mainnav.nav-press-full::after{
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--accent) 10%,transparent) 24%,color-mix(in srgb,var(--accent2) 8%,transparent) 50%,transparent 100%);
  animation:mpMainnavFullSweep .34s cubic-bezier(.2,.8,.2,1) both;
}
html[data-motion="full"] .mainnav a.mp-mainnav-fx{
  filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--accent) 10%,transparent));
  animation:mpMainnavFullTap .3s cubic-bezier(.18,.88,.24,1.04) both;
}
html[data-motion="full"] .mainnav a.mp-mainnav-fx::before{
  background:linear-gradient(112deg,transparent 0%,color-mix(in srgb,var(--accent) 16%,transparent) 36%,color-mix(in srgb,var(--accent2) 12%,transparent) 56%,transparent 100%);
  animation:mpMainnavFullLinkSweep .42s cubic-bezier(.2,.8,.2,1) both;
}
html[data-motion="full"] .log-filter.active{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),0 14px 28px color-mix(in srgb,var(--accent) 8%,transparent);
  animation:mpLogFilterFullActive .26s cubic-bezier(.18,.88,.24,1.03) both;
}
html[data-motion="full"] .log-filter.mp-log-filter-fx{
  filter:drop-shadow(0 8px 16px color-mix(in srgb,var(--accent) 10%,transparent));
  animation:mpLogFilterFullTap .26s cubic-bezier(.18,.88,.24,1.03) both;
}
html[data-motion="full"] .log-filter.mp-log-filter-fx::before{
  background:linear-gradient(115deg,transparent 0%,color-mix(in srgb,var(--accent) 16%,transparent) 36%,color-mix(in srgb,var(--accent2) 12%,transparent) 56%,transparent 100%);
  animation:mpLogFilterFullSweep .38s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes mpMainnavBalancedActive{
  from{box-shadow:0 0 0 rgba(0,0,0,0);transform:translateY(1px)}
  to{box-shadow:0 10px 24px rgba(4,8,24,.14),inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,var(--line));transform:none}
}
@keyframes mpMainnavBalancedTap{
  0%{transform:scale(.98)}
  60%{transform:scale(1.01)}
  100%{transform:none}
}
@keyframes mpMainnavBalancedSweep{
  0%{opacity:0;transform:translateX(-14%)}
  30%{opacity:.26}
  100%{opacity:0;transform:translateX(14%)}
}
@keyframes mpMainnavBalancedLinkSweep{
  0%{opacity:0;transform:translateX(-22%) skewX(-12deg)}
  40%{opacity:.24}
  100%{opacity:0;transform:translateX(18%) skewX(-12deg)}
}
@keyframes mpMainnavFullActive{
  0%{transform:translateY(1px) scale(.992)}
  56%{transform:translateY(-1px) scale(1.012)}
  100%{transform:none}
}
@keyframes mpMainnavFullTap{
  0%{transform:scale(.972)}
  56%{transform:scale(1.014)}
  100%{transform:none}
}
@keyframes mpMainnavFullSweep{
  0%{opacity:0;transform:translateX(-18%)}
  18%{opacity:.18}
  52%{opacity:.42}
  100%{opacity:0;transform:translateX(18%)}
}
@keyframes mpMainnavFullLinkSweep{
  0%{opacity:0;transform:translateX(-26%) skewX(-12deg)}
  18%{opacity:.18}
  52%{opacity:.46}
  100%{opacity:0;transform:translateX(24%) skewX(-12deg)}
}
@keyframes mpLogFilterBalancedActive{
  from{transform:translateY(1px)}
  to{transform:none}
}
@keyframes mpLogFilterBalancedTap{
  0%{transform:scale(.976)}
  60%{transform:scale(1.01)}
  100%{transform:none}
}
@keyframes mpLogFilterBalancedSweep{
  0%{opacity:0;transform:translateX(-14%) skewX(-12deg)}
  35%{opacity:.22}
  100%{opacity:0;transform:translateX(14%) skewX(-12deg)}
}
@keyframes mpLogFilterFullActive{
  0%{transform:translateY(1px) scale(.992)}
  56%{transform:translateY(-1px) scale(1.012)}
  100%{transform:none}
}
@keyframes mpLogFilterFullTap{
  0%{transform:scale(.972)}
  56%{transform:scale(1.016)}
  100%{transform:none}
}
@keyframes mpLogFilterFullSweep{
  0%{opacity:0;transform:translateX(-22%) skewX(-12deg)}
  18%{opacity:.18}
  52%{opacity:.46}
  100%{opacity:0;transform:translateX(20%) skewX(-12deg)}
}

@media(prefers-reduced-motion:reduce){
  .mainnav,
  .mainnav::after,
  .mainnav a,
  .mainnav a::before,
  .mainnav a::after,
  .log-filter,
  .log-filter::before,
  .log-filter::after{
    animation:none !important;
    transition:none !important;
    filter:none !important;
  }
}


/* 日志分页菜单与页面切换效果。
 */
.logs-toolbar,
.logs-toolbar-right,
.logs-page-size-field{
  overflow:visible;
}
.logs-page-size-field{
  position:relative;
  z-index:12;
}
.logs-page-size-field .mf-select,
.logs-page-size-field .mf-select-menu{
  position:relative;
}
.logs-page-size-field .mf-select-menu{
  z-index:760 !important;
}
.logs-toolbar:has(.logs-page-size-field .mf-select.open),
.logs-toolbar-right:has(.logs-page-size-field .mf-select.open),
.logs-page-size-field:has(.mf-select.open){
  position:relative;
  z-index:740;
}
.logs-toolbar:has(.logs-page-size-field .mf-select.open) ~ .logs-list,
.logs-toolbar:has(.logs-page-size-field .mf-select.open) ~ .logs-pagination{
  pointer-events:none;
  user-select:none;
}

/* 顶部主导航：页面切换动效，而不是按钮本身动效 */
.page-transition-veil{
  position:fixed;
  inset:0;
  z-index:12000;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(720px circle at 50% 0%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 58%),
    linear-gradient(180deg, rgba(3,7,20,.06), rgba(3,7,20,.02));
}
.page-transition-veil::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,var(--accent) 9%,transparent) 34%,color-mix(in srgb,var(--accent2) 8%,transparent) 50%,transparent 72%);
}
html.page-leave-balanced body,
html.page-leave-full body{
  pointer-events:none;
}
html.page-enter-balanced .shell,
html.page-enter-full .shell,
html.page-leave-balanced .shell,
html.page-leave-full .shell{
  will-change:transform,opacity,filter;
  transform-origin:50% 86px;
}

/* 高性能：直接切换页面，不参与过渡 */
html[data-motion="performance"] .page-transition-veil,
html[data-motion="performance"] .shell{
  animation:none !important;
  transition:none !important;
  filter:none !important;
}

/* 一般：短促的整体切页感，轻淡入淡出 */
html.page-leave-balanced .shell{
  animation:mpPageLeaveBalanced .15s ease both;
}
html.page-enter-balanced .shell{
  animation:mpPageEnterBalanced .3s cubic-bezier(.22,.8,.22,1) both;
}
html.page-leave-balanced .page-transition-veil{
  animation:mpPageVeilLeaveBalanced .15s ease both;
}
html.page-enter-balanced .page-transition-veil{
  animation:mpPageVeilEnterBalanced .3s ease both;
}
html.page-enter-balanced .page-transition-veil::before{
  animation:mpPageVeilSweepBalanced .26s ease-out both;
}

/* 全特效：更明显的整体切页感，带柔和扫光和轻微深度 */
html.page-leave-full .shell{
  animation:mpPageLeaveFull .24s cubic-bezier(.18,.88,.24,1.02) both;
}
html.page-enter-full .shell{
  animation:mpPageEnterFull .44s cubic-bezier(.18,.88,.24,1.03) both;
}
html.page-leave-full .page-transition-veil{
  animation:mpPageVeilLeaveFull .24s ease both;
}
html.page-enter-full .page-transition-veil{
  animation:mpPageVeilEnterFull .44s ease both;
}
html.page-enter-full .page-transition-veil::before{
  animation:mpPageVeilSweepFull .46s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes mpPageLeaveBalanced{
  from{opacity:1;transform:none;filter:none}
  to{opacity:.9;transform:translateY(8px) scale(.992);filter:none}
}
@keyframes mpPageEnterBalanced{
  0%{opacity:0;transform:translateY(12px) scale(.992)}
  100%{opacity:1;transform:none}
}
@keyframes mpPageVeilLeaveBalanced{
  from{opacity:0}
  to{opacity:.22}
}
@keyframes mpPageVeilEnterBalanced{
  0%{opacity:.22}
  100%{opacity:0}
}
@keyframes mpPageVeilSweepBalanced{
  0%{opacity:0;transform:translateX(-18%) skewX(-12deg)}
  35%{opacity:.24}
  100%{opacity:0;transform:translateX(14%) skewX(-12deg)}
}
@keyframes mpPageLeaveFull{
  0%{opacity:1;transform:none;filter:none}
  100%{opacity:.72;transform:translateY(14px) scale(.986);filter:blur(2px)}
}
@keyframes mpPageEnterFull{
  0%{opacity:0;transform:translateY(18px) scale(.986);filter:blur(3px)}
  58%{opacity:1;transform:translateY(-1px) scale(1.003);filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes mpPageVeilLeaveFull{
  from{opacity:0}
  to{opacity:.34}
}
@keyframes mpPageVeilEnterFull{
  0%{opacity:.34}
  100%{opacity:0}
}
@keyframes mpPageVeilSweepFull{
  0%{opacity:0;transform:translateX(-24%) skewX(-12deg)}
  18%{opacity:.18}
  52%{opacity:.46}
  100%{opacity:0;transform:translateX(22%) skewX(-12deg)}
}

@media(prefers-reduced-motion:reduce){
  .page-transition-veil,
  .page-transition-veil::before,
  html.page-enter-balanced .shell,
  html.page-enter-full .shell,
  html.page-leave-balanced .shell,
  html.page-leave-full .shell{
    animation:none !important;
    transition:none !important;
    filter:none !important;
  }
}


/* 页面切换、日志分页菜单和日志视图切换效果。
 */
/* 1) 修复日志“每页显示”下拉框打开时整体被拉高变形 */
.logs-page-size-field .mf-select{
  position:relative !important;
}
.logs-page-size-field .mf-select-menu{
  position:absolute !important;
  left:-8px;
  right:-8px;
  top:calc(100% + 8px);
  z-index:860 !important;
}
.logs-page-size-field,
.logs-page-size-field .mf-select,
.logs-page-size-field .mf-select-trigger{
  min-height:0;
  height:auto;
}
.logs-page-size-field:has(.mf-select.open){
  align-self:flex-start;
}
.logs-toolbar-right:has(.logs-page-size-field .mf-select.open){
  align-items:flex-start;
}

/* 2) 顶部页面切换过渡提速 */
html.page-leave-balanced .shell{animation:mpPageLeaveBalancedFast .09s ease both}
html.page-enter-balanced .shell{animation:mpPageEnterBalancedFast .2s cubic-bezier(.22,.8,.22,1) both}
html.page-leave-balanced .page-transition-veil{animation:mpPageVeilLeaveBalancedFast .09s ease both}
html.page-enter-balanced .page-transition-veil{animation:mpPageVeilEnterBalancedFast .2s ease both}
html.page-enter-balanced .page-transition-veil::before{animation:mpPageVeilSweepBalancedFast .18s ease-out both}
html.page-leave-full .shell{animation:mpPageLeaveFullFast .14s cubic-bezier(.18,.88,.24,1.02) both}
html.page-enter-full .shell{animation:mpPageEnterFullFast .3s cubic-bezier(.18,.88,.24,1.03) both}
html.page-leave-full .page-transition-veil{animation:mpPageVeilLeaveFullFast .14s ease both}
html.page-enter-full .page-transition-veil{animation:mpPageVeilEnterFullFast .3s ease both}
html.page-enter-full .page-transition-veil::before{animation:mpPageVeilSweepFullFast .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes mpPageLeaveBalancedFast{
  from{opacity:1;transform:none;filter:none}
  to{opacity:.92;transform:translateY(4px) scale(.996);filter:none}
}
@keyframes mpPageEnterBalancedFast{
  0%{opacity:0;transform:translateY(6px) scale(.996)}
  100%{opacity:1;transform:none}
}
@keyframes mpPageVeilLeaveBalancedFast{from{opacity:0}to{opacity:.16}}
@keyframes mpPageVeilEnterBalancedFast{0%{opacity:.16}100%{opacity:0}}
@keyframes mpPageVeilSweepBalancedFast{
  0%{opacity:0;transform:translateX(-12%) skewX(-12deg)}
  35%{opacity:.18}
  100%{opacity:0;transform:translateX(10%) skewX(-12deg)}
}
@keyframes mpPageLeaveFullFast{
  0%{opacity:1;transform:none;filter:none}
  52%{opacity:.96;transform:translateY(3px) scale(.996);filter:blur(.35px)}
  100%{opacity:.88;transform:translateY(7px) scale(.993);filter:blur(1px)}
}
@keyframes mpPageEnterFullFast{
  0%{opacity:.18;transform:translateY(8px) scale(.993);filter:blur(1.35px)}
  28%{opacity:.76;transform:translateY(3px) scale(.997);filter:blur(.45px)}
  62%{opacity:1;transform:translateY(-1px) scale(1.002);filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes mpPageVeilLeaveFullFast{from{opacity:0}to{opacity:.24}}
@keyframes mpPageVeilEnterFullFast{0%{opacity:.24}100%{opacity:0}}
@keyframes mpPageVeilSweepFullFast{
  0%{opacity:0;transform:translateX(-18%) skewX(-12deg)}
  18%{opacity:.14}
  52%{opacity:.34}
  100%{opacity:0;transform:translateX(16%) skewX(-12deg)}
}

/* 3) 日志筛选内容切换使用“子页面切换”风格，并分三档 */
.logs-list,
.logs-pagination{
  will-change:opacity,transform,filter;
  transform-origin:50% 0;
}
html[data-motion="performance"] .logs-list,
html[data-motion="performance"] .logs-pagination,
html[data-motion="performance"] .logs-view-swap-balanced,
html[data-motion="performance"] .logs-view-swap-full{
  animation:none !important;
  transition:none !important;
  filter:none !important;
}
html[data-motion="balanced"] .logs-list.logs-view-swap-balanced,
html[data-motion="balanced"] .logs-pagination.logs-view-swap-balanced{
  animation:mpLogsSwapBalanced .22s ease both;
}
html[data-motion="full"] .logs-list.logs-view-swap-full,
html[data-motion="full"] .logs-pagination.logs-view-swap-full{
  animation:mpLogsSwapFull .34s cubic-bezier(.18,.88,.24,1.03) both;
}
@keyframes mpLogsSwapBalanced{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes mpLogsSwapFull{
  0%{opacity:0;transform:translateY(10px) scale(.994);filter:blur(2px)}
  62%{opacity:1;transform:translateY(-1px) scale(1.002);filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}

@media(prefers-reduced-motion:reduce){
  .logs-list,
  .logs-pagination,
  .logs-list.logs-view-swap-balanced,
  .logs-pagination.logs-view-swap-balanced,
  .logs-list.logs-view-swap-full,
  .logs-pagination.logs-view-swap-full{
    animation:none !important;
    transition:none !important;
    filter:none !important;
  }
}


/* 登录页面的认证状态与交互布局。
 */
.login-auth-page{
  min-height:100vh;
  margin:0;
}
.login-page-v2{
  min-height:100vh;
  padding:28px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(760px circle at 16% 18%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 62%),
    radial-gradient(700px circle at 82% 80%, color-mix(in srgb,var(--accent2) 12%,transparent), transparent 60%),
    var(--bg);
}
.login-shell-v2{
  width:min(1120px,100%);
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(390px,.82fr);
  gap:22px;
  align-items:stretch;
}
.login-visual-v2,
.login-card-v2{
  border-radius:32px;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.login-visual-v2{
  position:relative;
  min-height:620px;
  padding:36px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.login-visual-v2::before{
  content:"";
  position:absolute;
  width:640px;
  height:640px;
  right:-250px;
  top:-220px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 34%,rgba(255,255,255,.42),rgba(0,191,255,.20) 20%,rgba(107,92,255,.22) 42%,rgba(255,73,194,.13) 60%,transparent 70%);
  animation:heroOrb 11s ease-in-out infinite;
}
.login-visual-v2>*{
  position:relative;
  z-index:2;
}
.login-visual-top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
}
.login-brand-static{
  cursor:default;
  user-select:none;
}
.login-hero-tag{
  margin-top:8px;
}
.login-copy-block h1{
  margin:0;
  font-size:3.625rem;
  line-height:.98;
  letter-spacing:-.06em;
}
.login-copy-block p{
  max-width:560px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:0.75rem;
  line-height:1.85;
}
.login-capability-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.login-capability-card{
  min-height:82px;
  padding:15px 16px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:center;
  gap:12px;
  border-radius:19px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel-strong) 90%,transparent),color-mix(in srgb,var(--panel) 96%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.login-capability-card img{
  width:46px;
  height:46px;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(40,52,160,.16));
}
.login-capability-card strong{
  display:block;
  font-size:0.75rem;
}
.login-capability-card small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.45;
}
.login-card-v2{
  position:relative;
  padding:36px 32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.login-card-v2::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 45%,transparent),color-mix(in srgb,var(--accent2) 35%,transparent),transparent);
}
.login-card-head-v2{
  margin-bottom:24px;
}
.login-kicker{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--panel-soft));
  font-size:0.625rem;
  font-weight:760;
}
.login-card-head-v2 h2{
  margin:18px 0 0;
  font-size:2rem;
  letter-spacing:-.045em;
}
.login-card-head-v2 p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:0.6875rem;
  line-height:1.7;
}
.login-form-v2{
  display:grid;
  gap:14px;
}
.login-password-field{
  padding:14px;
  border-radius:20px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel-soft) 92%,transparent),color-mix(in srgb,var(--panel) 96%,transparent));
}
.login-password-field label{
  display:block;
  margin:0 0 10px;
  color:var(--muted);
  font-size:0.5625rem;
  font-weight:760;
  letter-spacing:.035em;
}
.login-password-shell-v2{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.login-password-shell-v2 input{
  width:100%;
  min-height:50px;
  padding:0 14px;
  border-radius:16px;
  font-size:0.75rem;
  background:var(--panel-strong);
}
.login-visibility-btn-v2{
  min-width:64px;
  height:50px;
  padding:0 14px;
  border-radius:15px;
  border:1px solid var(--line);
  background:var(--panel-soft);
  color:var(--muted);
  font-size:0.625rem;
  font-weight:760;
  cursor:pointer;
  transition:.18s ease;
}
.login-visibility-btn-v2:hover{
  color:var(--text);
  border-color:var(--line-strong);
  background:var(--panel-strong);
}
.login-error-v2{
  min-height:18px;
  margin:0;
  color:var(--red);
  font-size:0.5625rem;
  line-height:1.6;
}
.login-primary-btn{
  width:100%;
  min-height:50px;
  border-radius:16px;
  font-size:0.6875rem;
  font-weight:820;
}
.login-primary-btn[aria-busy="true"]{
  cursor:wait;
  opacity:.82;
}
html[data-theme="light"] .login-page-v2{
  background:
    radial-gradient(780px circle at 16% 18%,rgba(92,118,255,.13),transparent 62%),
    radial-gradient(700px circle at 82% 80%,rgba(34,196,255,.11),transparent 60%),
    var(--bg);
}
html[data-theme="light"] .login-capability-card{
  box-shadow:var(--shadow-soft);
}
html[data-theme="dark"] .login-capability-card{
  box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04);
}
@media(max-width:920px){
  .login-shell-v2{grid-template-columns:1fr}
  .login-visual-v2{min-height:450px}
}
@media(max-width:760px){
  .login-page-v2{padding:14px}
  .login-visual-v2,.login-card-v2{border-radius:24px}
  .login-visual-v2{min-height:0;padding:24px 22px}
  .login-copy-block h1{font-size:2.625rem}
  .login-copy-block p{font-size:0.6875rem}
  .login-capability-grid{grid-template-columns:1fr}
  .login-card-v2{padding:26px 20px}
  .login-card-head-v2 h2{font-size:1.75rem}
  .login-password-shell-v2{grid-template-columns:1fr}
  .login-visibility-btn-v2{width:100%}
}

/* 登录进入动画继续遵循当前性能设置。 */
html[data-motion="performance"] .login-visual-v2,
html[data-motion="performance"] .login-card-v2,
html[data-motion="performance"] .login-visual-v2::before{
  animation:none !important;
  transition:none !important;
}
html[data-motion="balanced"] .login-visual-v2,
html[data-motion="balanced"] .login-card-v2{
  animation-duration:.28s !important;
  animation-delay:0s !important;
}


/* 日志分页菜单固定布局与逐行更新反馈。
 */
/* 分页菜单开合时保持工具栏尺寸稳定。 */
.logs-toolbar,
.logs-toolbar:has(.logs-page-size-field .mf-select.open){
  align-items:end !important;
  position:relative;
  z-index:auto !important;
}
.logs-toolbar-right,
.logs-toolbar-right:has(.logs-page-size-field .mf-select.open){
  align-items:flex-end !important;
  position:relative;
  z-index:auto !important;
}
.logs-page-size-field,
.logs-page-size-field:has(.mf-select.open){
  width:7.375rem !important;
  min-width:7.375rem !important;
  flex:0 0 7.375rem !important;
  align-self:auto !important;
  position:relative !important;
  z-index:420 !important;
  overflow:visible !important;
}
.logs-page-size-field .mf-select,
.logs-page-size-field .mf-select.open{
  position:relative !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  transform:none !important;
  overflow:visible !important;
}
.logs-page-size-field .mf-select-trigger{
  width:100% !important;
  min-height:36px !important;
  height:36px !important;
}
.logs-page-size-field .mf-select-menu,
.logs-page-size-field .mf-select.open .mf-select-menu{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:calc(100% + 8px) !important;
  width:100% !important;
  min-width:118px !important;
  margin:0 !important;
  z-index:16000 !important;
}
.logs-toolbar:has(.logs-page-size-field .mf-select.open) ~ .logs-list,
.logs-toolbar:has(.logs-page-size-field .mf-select.open) ~ .logs-pagination{
  pointer-events:auto !important;
  user-select:auto !important;
}

/* 日志轮询只为新增或变化的行提供反馈，不对整个列表重复播放动画。
 */
.logs-list,
.logs-pagination,
.logs-list.logs-view-swap-balanced,
.logs-pagination.logs-view-swap-balanced,
.logs-list.logs-view-swap-full,
.logs-pagination.logs-view-swap-full{
  animation:none !important;
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  will-change:auto !important;
}
.log-entry{
  position:relative;
  overflow:hidden;
}

/* 高性能：完全不做日志切换动画。 */
html[data-motion="performance"] .log-entry,
html[data-motion="performance"] .log-entry::before,
html[data-motion="performance"] .log-entry::after{
  animation:none !important;
  transition:none !important;
  filter:none !important;
}

/* 一般：筛选/翻页是轻微的单行落位；实时新增只高亮新增行。 */
html[data-motion="balanced"] .log-entry.log-row-switch-balanced{
  animation:mpLogRowSettleBalanced .16s var(--log-fx-delay,0ms) ease-out both;
}
html[data-motion="balanced"] .log-entry.log-row-live-balanced{
  animation:mpLogRowLiveBalancedV2 .22s ease-out both;
}

/* 全特效：仍然只动单条日志，增加局部边缘提示，不缩放整个列表。 */
html[data-motion="full"] .log-entry.log-row-switch-full{
  animation:mpLogRowSettleFull .22s var(--log-fx-delay,0ms) cubic-bezier(.2,.82,.2,1) both;
}
html[data-motion="full"] .log-entry.log-row-live-full{
  animation:mpLogRowLiveFullV2 .3s cubic-bezier(.18,.88,.24,1.02) both;
}
html[data-motion="full"] .log-entry.log-row-live-full::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 24%,transparent);
  pointer-events:none;
  animation:mpLogLiveEdgeV2 .46s ease-out both;
}
html[data-motion="full"] .log-entry.log-row-live-full::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,var(--accent) 7%,transparent) 32%,color-mix(in srgb,var(--accent2) 6%,transparent) 50%,transparent 70%);
  animation:mpLogLiveWashV2 .4s ease-out both;
}

@keyframes mpLogRowSettleBalanced{
  0%{opacity:.72;transform:translateY(3px)}
  100%{opacity:1;transform:none}
}
@keyframes mpLogRowLiveBalancedV2{
  0%{opacity:.72;transform:translateY(-4px);background:color-mix(in srgb,var(--accent) 7%,var(--panel-soft));border-color:color-mix(in srgb,var(--accent) 24%,var(--line))}
  100%{opacity:1;transform:none;background:var(--panel-soft);border-color:var(--line)}
}
@keyframes mpLogRowSettleFull{
  0%{opacity:.58;transform:translateY(5px)}
  68%{opacity:1;transform:translateY(-1px)}
  100%{opacity:1;transform:none}
}
@keyframes mpLogRowLiveFullV2{
  0%{opacity:.55;transform:translateY(-6px);background:color-mix(in srgb,var(--accent) 9%,var(--panel-soft));border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
  58%{opacity:1;transform:translateY(1px);background:color-mix(in srgb,var(--accent) 3%,var(--panel-soft))}
  100%{opacity:1;transform:none;background:var(--panel-soft);border-color:var(--line)}
}
@keyframes mpLogLiveEdgeV2{
  0%{opacity:0;transform:scaleY(.25)}
  26%{opacity:.9;transform:scaleY(1)}
  100%{opacity:0;transform:scaleY(.72)}
}
@keyframes mpLogLiveWashV2{
  0%{opacity:0;transform:translateX(-12%)}
  36%{opacity:.7}
  100%{opacity:0;transform:translateX(10%)}
}

@media(max-width:760px){
  .logs-page-size-field,
  .logs-page-size-field:has(.mf-select.open){
    width:100% !important;
    min-width:0 !important;
    flex-basis:auto !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .log-entry,
  .log-entry::before,
  .log-entry::after{
    animation:none !important;
    transition:none !important;
    filter:none !important;
  }
}


/* 日志分页菜单的层叠上下文。
 */
/* 打开分页菜单时提高整个工具栏层级，避免后面的日志行覆盖菜单。
 */
.logs-toolbar{
  position:relative !important;
  z-index:2 !important;
  overflow:visible !important;
}
.logs-toolbar-right{
  position:relative !important;
  z-index:3 !important;
  overflow:visible !important;
}
.logs-list,
.logs-pagination{
  position:relative;
  z-index:1;
}
.logs-toolbar:has(.logs-page-size-field .mf-select.open){
  z-index:900 !important;
  overflow:visible !important;
}
.logs-toolbar:has(.logs-page-size-field .mf-select.open) .logs-toolbar-right{
  z-index:910 !important;
}
/* 多个日志选择器叠行时，仅抬高展开项，避免菜单被另一个字段挡住。 */
.logs-toolbar:has(.logs-page-size-field .mf-select.open) .logs-page-size-field:has(.mf-select.open){
  z-index:920 !important;
}
.logs-toolbar:has(.logs-page-size-field .mf-select.open) .logs-page-size-field .mf-select.open{
  z-index:930 !important;
}
.logs-toolbar:has(.logs-page-size-field .mf-select.open) .logs-page-size-field .mf-select-menu{
  z-index:940 !important;
  pointer-events:auto !important;
}
.panel:has(.logs-page-size-field .mf-select.open),
.panel-body:has(.logs-page-size-field .mf-select.open){
  overflow:visible !important;
}


/* 界面文字的对比度与清晰度。
 */
/* 增强中性色对比，保持原有信息层次。 */
html[data-theme="light"]{
  --text:#0f1218;
  --muted:#535b68;
  --faint:#747d8b;
}
html[data-theme="dark"]{
  --text:#f9faff;
  --muted:#bac2d0;
  --faint:#9099aa;
}

body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
  font-synthesis:none;
  font-kerning:normal;
}
button,input,select,textarea{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:auto;
  font-kerning:normal;
}

/* 提高小字号文字的可读性。 */
.brand-copy small,
.live-state,
.metric span,
.metric p,
.card p,
.panel p,
.service-card p,
.service-meta span,
.section-head p,
.section-head>span,
.event time,
.event-copy span,
.field label,
.switch-copy small,
.list-main small,
.list-value,
.account-card p,
.download-meta,
.dropzone p,
.issue-card p,
.stage,
.modal-body>p,
.site-info small,
.overview-mini span,
.overview-mini small,
.input-helper-card p,
.emby-account-stat span,
.emby-account-stat small,
.emby-account-identity p,
.emby-account-card-meta small,
.emby-address-copy p,
.emby-address-url span,
.emby-address-fact span,
.emby-address-fact small,
.emby-client-list small,
.strm-library-item-head small{
  font-weight:560;
  letter-spacing:.003em;
}

/* 主要标签保持清晰且适度的字重。 */
.mainnav a,
.page-tab,
.btn,
.log-filter,
.mf-select-trigger,
.mf-select-option,
.list-main strong,
.event-copy strong,
.service-card h3,
.panel-title,
.section-head h2{
  text-rendering:geometricPrecision;
}

/* 日志页通过颜色对比区分密集信息。 */
.log-entry{
  -webkit-font-smoothing:auto;
  text-rendering:optimizeLegibility;
}
.log-entry .event-copy strong,
.log-entry .log-entry-title{
  font-weight:700;
}
.log-entry .event-copy span,
.log-entry time,
.log-entry .log-entry-detail,
.log-entry .log-entry-meta{
  color:var(--muted);
  font-weight:560;
}

/* 动画结束后释放影响文字栅格化的变换状态。 */
html:not(.page-enter-balanced):not(.page-enter-full):not(.page-leave-balanced):not(.page-leave-full) .shell,
.log-entry:not(.log-row-switch-balanced):not(.log-row-switch-full):not(.log-row-live-balanced):not(.log-row-live-full),
.card:not(:hover),
.service-card:not(:hover),
.action-card:not(:hover){
  transform:translateZ(0);
}

/* 亮色卡片上的辅助文字使用更明确的对比度。 */
html[data-theme="light"] .footer,
html[data-theme="light"] .status-value,
html[data-theme="light"] .list-value,
html[data-theme="light"] .event time,
html[data-theme="light"] .service-meta span{
  color:color-mix(in srgb,var(--faint) 88%,var(--text) 12%);
}

@media(max-width:760px){
  .card p,.panel p,.service-card p,.event-copy span,.list-main small{
    line-height:1.68;
  }
}


/* 辅助文字可读性和影视仓状态动画时序。
 */
/* 增强小字号辅助文字的对比度。 */
html[data-theme="light"]{
  --muted:#454e5c;
  --faint:#687382;
}
html[data-theme="dark"]{
  --muted:#c7ceda;
  --faint:#9da7b7;
}

/* 静止状态释放合成图层，避免文字长期保持较软的栅格化效果。 */
html:not(.page-enter-balanced):not(.page-enter-full):not(.page-leave-balanced):not(.page-leave-full) .shell,
.log-entry:not(.log-row-switch-balanced):not(.log-row-switch-full):not(.log-row-live-balanced):not(.log-row-live-full),
.card:not(:hover),
.service-card:not(:hover),
.action-card:not(:hover){
  transform:none;
  backface-visibility:visible;
}

/* 适度提高小字号文字的可读性。 */
.brand-copy small,
.live-state,
.metric span,
.metric p,
.card p,
.panel p,
.service-card p,
.service-meta span,
.section-head p,
.section-head>span,
.event time,
.event-copy span,
.field label,
.switch-copy small,
.list-main small,
.list-value,
.download-meta,
.site-info small,
.overview-mini span,
.overview-mini small,
.input-helper-card p,
.emby-account-stat span,
.emby-account-stat small,
.emby-account-identity p,
.emby-account-card-meta small,
.emby-address-copy p,
.emby-address-url span,
.emby-address-fact span,
.emby-address-fact small,
.emby-client-list small,
.strm-library-item-head small,
.tvbox-sites-manage-copy small,
.tvbox-site-state,
.tvbox-site-name,
.tvbox-sites-enabled-count,
.multi-source-kicker{
  font-weight:600;
  letter-spacing:.006em;
}

.mainnav a,
.page-tab,
.btn,
.log-filter,
.mf-select-trigger,
.mf-select-option,
.tvbox-sites-manage-copy strong,
.multi-source-card strong,
.event-copy strong,
.list-main strong{
  font-weight:650;
}

/* 半透明表面上的状态与来源标签保持清晰。 */
.tvbox-site-chip,
.chip,
.badge,
.pill,
.service-meta span{
  text-shadow:none;
}
html[data-theme="light"] .tvbox-site-chip,
html[data-theme="light"] .chip,
html[data-theme="light"] .badge,
html[data-theme="light"] .pill{
  color:color-mix(in srgb,var(--text) 88%,var(--muted) 12%);
}

/* 逐项进入动画只在展开期间生效，避免状态反馈结束后再次触发。
 */
html[data-motion="full"] .tvbox-site-grid.show .tvbox-site-chip{
  animation:none !important;
  animation-delay:0s !important;
}
html[data-motion="full"] .tvbox-site-grid.site-grid-opening.show .tvbox-site-chip:not(.state-updated){
  animation:mpTvboxSiteQuietIn .28s cubic-bezier(.22,1,.36,1) both !important;
  animation-delay:calc(var(--tvbox-site-index,0) * 30ms) !important;
}

/* 状态动画结束后回到稳定位置。 */
html[data-motion="balanced"] .tvbox-site-chip.state-updated{
  animation:mpTvboxChipState .20s cubic-bezier(.22,1,.36,1) both !important;
}
html[data-motion="full"] .tvbox-site-chip.state-updated{
  animation:mpTvboxChipStateFull .34s cubic-bezier(.16,.9,.24,1.05) both !important;
}
html[data-motion="full"] .tvbox-site-chip.state-updated::after{
  animation:mpTvboxChipSweep .38s ease-out both !important;
}
html[data-motion="full"] .tvbox-site-chip.state-updated i{
  animation:mpTvboxDotState .34s cubic-bezier(.16,.9,.24,1.05) both !important;
}
@keyframes mpTvboxChipStateFull{
  0%{
    transform:scale(.985);
    border-color:color-mix(in srgb,var(--accent) 18%,var(--line));
  }
  52%{
    transform:scale(1.018);
    border-color:color-mix(in srgb,var(--accent) 42%,var(--line-strong));
  }
  100%{
    transform:none;
    border-color:var(--line);
  }
}

@media(prefers-reduced-motion:reduce){
  .tvbox-site-grid.site-grid-opening .tvbox-site-chip,
  .tvbox-site-chip.state-updated,
  .tvbox-site-chip.state-updated::after,
  .tvbox-site-chip.state-updated i{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}


/* 影视仓站点组的连续收起反馈。
 */
/* 使用脚本测量的实际内容高度，避免固定高度造成收起前停顿。
 */
.tvbox-site-grid.show{
  max-height:var(--tvbox-grid-height,720px) !important;
}
@media(max-width:760px){
  .tvbox-site-grid.show{
    max-height:var(--tvbox-grid-height,1200px) !important;
  }
}

/* 收起时只对容器执行连续过渡。 */
html[data-motion="balanced"] .tvbox-site-grid.site-grid-closing{
  transition:
    max-height .18s cubic-bezier(.4,0,.2,1),
    opacity .15s ease,
    transform .18s cubic-bezier(.4,0,.2,1),
    margin-top .18s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .18s !important;
}
html[data-motion="full"] .tvbox-site-grid.site-grid-closing{
  transition:
    max-height .26s cubic-bezier(.4,0,.2,1),
    opacity .19s ease,
    transform .24s cubic-bezier(.4,0,.2,1),
    margin-top .24s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .26s !important;
}
html[data-motion="performance"] .tvbox-site-grid,
html[data-motion="performance"] .tvbox-site-grid.show,
html[data-motion="performance"] .tvbox-site-grid.site-grid-closing{
  transition:none !important;
}

/* 标签悬停只改变外观，不在状态动画结束后补做位移。
 */
@media(hover:hover) and (pointer:fine){
  .tvbox-site-chip:hover{
    transform:none !important;
    border-color:var(--line-strong);
  }
  html[data-motion="full"] .tvbox-site-chip:hover{
    box-shadow:0 7px 16px color-mix(in srgb,var(--accent) 5%,transparent);
  }
  html[data-motion="balanced"] .tvbox-site-chip:hover{
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 7%,transparent);
  }
}

/* 状态动画以静止位置结束，移除动画类时不再触发额外过渡。
 */
.tvbox-site-chip.state-updated{
  transition-property:background-color,color,border-color,box-shadow !important;
}
html[data-motion="balanced"] .tvbox-site-chip.state-updated{
  animation-duration:.20s !important;
}
html[data-motion="full"] .tvbox-site-chip.state-updated{
  animation-duration:.34s !important;
}

@media(prefers-reduced-motion:reduce){
  .tvbox-site-grid,
  .tvbox-site-grid.show,
  .tvbox-site-grid.site-grid-closing,
  .tvbox-site-chip,
  .tvbox-site-chip:hover{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}


/* 退出登录按钮的交互样式。
 */
.logout-btn{
  color:var(--muted);
}
.logout-btn svg{
  width:17px;
  height:17px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.logout-btn:hover{
  color:#ff6c86;
  border-color:color-mix(in srgb,#ff5f79 38%,var(--line-strong));
  background:color-mix(in srgb,#ff5f79 8%,var(--panel-strong));
  box-shadow:0 8px 22px color-mix(in srgb,#ff5f79 10%,transparent);
}
.logout-btn.is-logging-out{
  color:#ff6c86;
  cursor:wait;
}
html[data-motion="balanced"] .logout-btn.is-logging-out svg{
  animation:mpLogoutNudge .55s ease-in-out infinite alternate;
}
html[data-motion="full"] .logout-btn.is-logging-out svg{
  animation:mpLogoutNudge .42s ease-in-out infinite alternate;
}
html[data-motion="performance"] .logout-btn,
html[data-motion="performance"] .logout-btn svg{
  animation:none !important;
  transition:none !important;
}
@keyframes mpLogoutNudge{
  from{transform:translateX(-1px)}
  to{transform:translateX(2px)}
}
@media(prefers-reduced-motion:reduce){
  .logout-btn,.logout-btn svg{animation:none !important;transition:none !important}
}


/* STRM 概览卡片与统计布局。
 */
.strm-card-redesign{
  position:relative;
  min-height:390px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
  background:
    radial-gradient(360px circle at 8% 10%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 72%),
    linear-gradient(160deg,color-mix(in srgb,var(--panel-strong) 96%,transparent),color-mix(in srgb,var(--panel) 92%,transparent));
}
.strm-card-redesign::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-120px;
  bottom:-120px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 68%);
  opacity:.75;
}
.strm-card-header{
  position:relative;
  z-index:6;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.strm-card-header .source-title{
  align-items:flex-start;
}
.strm-card-header h3{
  margin:4px 0 0;
  font-size:1.1875rem;
  letter-spacing:-.035em;
}
.strm-card-header p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:0.625rem;
  line-height:1.6;
}
.strm-card-kicker{
  display:block;
  color:var(--accent);
  font-size:0.5rem;
  font-weight:800;
  letter-spacing:.08em;
}
.strm-overview-row{
  position:relative;
  z-index:6;
  margin-top:22px;
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.2fr);
  gap:12px;
}
.strm-primary-stat,
.strm-quick-stats>div{
  border:1px solid color-mix(in srgb,var(--line) 90%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel-soft) 92%,transparent),color-mix(in srgb,var(--panel) 88%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.strm-primary-stat{
  min-height:92px;
  padding:14px 15px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.strm-primary-stat>span,
.strm-quick-stats span{
  color:var(--muted);
  font-size:0.5rem;
  font-weight:700;
}
.strm-primary-stat>strong{
  margin-top:7px;
  color:var(--text);
  font-size:2rem;
  line-height:1;
  letter-spacing:-.055em;
}
.strm-primary-stat>strong small{
  margin-left:5px;
  color:var(--muted);
  font-size:0.625rem;
  font-weight:700;
  letter-spacing:0;
}
.strm-primary-stat>p{
  margin:7px 0 0;
  color:var(--faint);
  font-size:0.5rem;
}
.strm-quick-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.strm-quick-stats>div{
  min-height:42px;
  padding:9px 11px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.strm-quick-stats strong{
  color:var(--text);
  font-size:1rem;
  line-height:1;
  letter-spacing:-.035em;
}
.strm-chart-shell-redesign{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  width:100%;
  height:124px;
  margin-top:14px;
  padding:11px 12px 10px;
  flex:0 0 auto;
  border-radius:17px;
  z-index:6;
}
.strm-chart-shell-redesign::before{
  inset:40px 12px 19px;
}
.strm-chart-shell-redesign .strm-chart-head{
  height:24px;
}
.strm-chart-shell-redesign .strm-tree-chart{
  height:69px;
  gap:7px;
}
.strm-card-arrow{
  position:absolute;
  right:18px;
  bottom:16px;
  z-index:7;
  font-size:1.25rem;
  color:var(--faint);
  opacity:.72;
  transition:transform .2s ease,color .2s ease,opacity .2s ease;
}
.strm-card-redesign:hover .strm-card-arrow{
  transform:translateX(3px);
  color:var(--text);
  opacity:1;
}
html[data-theme="light"] .strm-card-redesign{
  background:
    radial-gradient(360px circle at 8% 10%, rgba(92,118,255,.08), transparent 72%),
    linear-gradient(160deg,#fff,#f9fbff);
}
html[data-theme="light"] .strm-primary-stat,
html[data-theme="light"] .strm-quick-stats>div{
  background:rgba(248,250,255,.92);
}
@media(max-width:760px){
  .strm-card-redesign{min-height:0;padding:18px}
  .strm-overview-row{grid-template-columns:1fr}
  .strm-quick-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strm-chart-shell-redesign{height:132px}
}


/* 收紧 STRM 卡片底部留白。
 */
.strm-card-redesign{
  gap:12px;
}
.strm-overview-row{
  margin-top:14px;
}
.strm-chart-shell-redesign{
  margin-top:auto;
  height:136px;
  padding:12px 12px 11px;
}
.strm-chart-shell-redesign::before{
  inset:42px 12px 20px;
}
.strm-chart-shell-redesign .strm-tree-chart{
  height:80px;
}
@media(max-width:760px){
  .strm-card-redesign{gap:10px;}
  .strm-chart-shell-redesign{
    margin-top:14px;
    height:132px;
  }
}


/* STRM 趋势图的高度与排版。
 */
.strm-chart-shell-redesign{
  height:148px;
  padding:12px 12px 12px;
}
.strm-chart-shell-redesign::before{
  inset:42px 12px 21px;
}
.strm-chart-shell-redesign .strm-tree-chart{
  height:92px;
}
@media(max-width:760px){
  .strm-chart-shell-redesign{
    height:138px;
  }
  .strm-chart-shell-redesign .strm-tree-chart{
    height:84px;
  }
}


/* 紧凑界面文字的清晰度。
 */
html[data-theme="light"]{
  --muted:#3f4855;
  --faint:#5e6978;
}
html[data-theme="dark"]{
  --muted:#d0d6e1;
  --faint:#aab3c2;
}

body,
button,input,select,textarea{
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-optical-sizing:auto;
  font-synthesis:weight style;
}

/* 避免中文小标签使用过细的字重。 */
.mainnav a,
.page-tab,
.btn,
.log-filter,
.mf-select-trigger,
.mf-select-option,
.list-main strong,
.event-copy strong,
.service-card h3,
.panel-title,
.section-head h2{
  text-rendering:optimizeLegibility;
}

/* 在不改变布局结构的前提下适度放大小字号文字。 */
.progress-ring span,
.status-copy span,
.switch-copy small,
.site-option small,
.list-main small,
.stage,
.strm-card-kicker,
.strm-primary-stat>span,
.strm-quick-stats span,
.strm-primary-stat>p,
.strm-chart-title>span,
.emby-account-stat small,
.emby-account-card-meta small,
.emby-address-kicker,
.emby-address-url span,
.emby-address-fact span,
.emby-address-fact small,
.emby-client-list small{
  font-size:0.5625rem !important;
  font-weight:600 !important;
  line-height:1.5;
}

/* 提高经常查看的状态与附加信息字号。 */
.live-state,
.metric p,
.service-meta span,
.event time,
.event-copy span,
.field label,
.list-value,
.badge,
.account-card p,
.download-meta,
.dropzone p,
.issue-card p,
.site-info small,
.emby-account-stat span,
.emby-account-identity p,
.emby-address-copy p,
.strm-library-item-head small{
  font-size:0.59375rem;
  font-weight:600;
  line-height:1.55;
}

/* 区分卡片说明、次级标题和较弱的辅助信息。 */
.card p,
.panel p,
.service-card p,
.section-head p,
.input-helper-card p{
  color:var(--muted);
  font-weight:600;
}

/* 通过适度字重提高数字的辨识度。 */
.metric strong,
.strm-primary-stat>strong,
.strm-quick-stats strong,
.overview-mini strong,
.service-stat strong,
.emby-account-stat strong{
  font-weight:750;
  text-rendering:optimizeLegibility;
}

html[data-theme="light"] .status-value,
html[data-theme="light"] .event time,
html[data-theme="light"] .list-value,
html[data-theme="light"] .footer,
html[data-theme="light"] .service-meta span{
  color:var(--faint);
}

@media(max-width:760px){
  .progress-ring span,
  .status-copy span,
  .switch-copy small,
  .site-option small,
  .list-main small,
  .stage,
  .strm-card-kicker,
  .strm-primary-stat>span,
  .strm-quick-stats span,
  .strm-primary-stat>p,
  .strm-chart-title>span{
    font-size:0.5625rem !important;
  }
}


/* 亮色主题的半透明媒体服务面板。
 */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .metric,
html[data-theme="light"] .service-card,
html[data-theme="light"] .activity-panel,
html[data-theme="light"] .overview-mini,
html[data-theme="light"] .input-helper-card,
html[data-theme="light"] .site-box{
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(247,250,255,.64)) !important;
  border-color:rgba(201,209,225,.68) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  box-shadow:
    0 14px 34px rgba(62,76,112,.075),
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 0 0 1px rgba(255,255,255,.18) !important;
}
html[data-theme="light"] .module-summary>div,
html[data-theme="light"] .strm-primary-stat,
html[data-theme="light"] .strm-quick-stats>div{
  background:linear-gradient(145deg,rgba(249,251,255,.72),rgba(241,245,252,.56)) !important;
  border-color:rgba(205,213,229,.72) !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  backdrop-filter:blur(12px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 7px 18px rgba(72,88,124,.035) !important;
}
html[data-theme="light"] .strm-card-redesign{
  background:
    radial-gradient(360px circle at 8% 10%,rgba(92,118,255,.095),transparent 72%),
    linear-gradient(145deg,rgba(255,255,255,.80),rgba(247,249,255,.62)) !important;
}
html[data-theme="light"] .card:hover,
html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .metric:hover{
  border-color:rgba(171,184,214,.78) !important;
  box-shadow:
    0 17px 40px rgba(62,76,112,.095),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 0 1px rgba(255,255,255,.20) !important;
}


/* STRM 箭头与开关滑块的对齐。
 */
.switch-btn::after{
  top:50%;
  left:2px;
  transform:translate3d(0,-50%,0);
}
.switch-btn.on::after{
  transform:translate3d(20px,-50%,0);
}
.strm-card-arrow{
  right:14px;
  bottom:22px;
  font-size:1.125rem;
}
@media(max-width:760px){
  .strm-card-arrow{
    right:12px;
    bottom:18px;
  }
}


/* 暗色开关和 STRM 箭头的居中位置。
 */
html[data-theme="dark"] .switch-btn::after{
  top:1px;
  transform:translate3d(0,0,0);
}
html[data-theme="dark"] .switch-btn.on::after{
  transform:translate3d(20px,0,0);
}
.strm-chart-shell-redesign{
  padding-right:30px;
}
.strm-chart-shell-redesign::before{
  right:30px;
}
.strm-card-arrow{
  right:20px;
  bottom:17px;
  font-size:1.375rem;
}
@media(max-width:760px){
  .strm-chart-shell-redesign{
    padding-right:28px;
  }
  .strm-chart-shell-redesign::before{
    right:28px;
  }
  .strm-card-arrow{
    right:18px;
    bottom:15px;
    font-size:1.25rem;
  }
}


/* STRM 展开箭头与其他服务卡片对齐。
 */
.strm-card-arrow{
  right:18px;
  bottom:14px;
  font-size:1.25rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media(max-width:760px){
  .strm-card-arrow{
    right:18px;
    bottom:14px;
    font-size:1.25rem;
  }
}


/* 明暗主题的颜色、控件和层次样式。
 */

/* 共用主题颜色变量。 */
html[data-theme="light"]{
  --bg:#f4f7fb;
  --bg2:#edf2f8;
  --panel:rgba(255,255,255,.74);
  --panel-strong:rgba(255,255,255,.92);
  --panel-soft:rgba(248,250,254,.64);
  --text:#10151e;
  --muted:#4d5868;
  --faint:#717d8d;
  --line:rgba(83,100,126,.14);
  --line-strong:rgba(76,94,122,.23);
  --shadow:0 22px 56px rgba(50,64,94,.10);
  --shadow-soft:0 10px 28px rgba(50,64,94,.075);
}
html[data-theme="dark"]{
  --bg:#060a13;
  --bg2:#09111f;
  --panel:rgba(13,18,30,.74);
  --panel-strong:rgba(18,24,38,.94);
  --panel-soft:rgba(15,21,34,.64);
  --text:#f6f8fc;
  --muted:#b0b8c7;
  --faint:#8791a2;
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.155);
  --shadow:0 28px 72px rgba(0,0,0,.40);
  --shadow-soft:0 14px 36px rgba(0,0,0,.24);
}

/* 页面背景与装饰层。 */
html[data-theme="light"] body{
  background:
    radial-gradient(900px 540px at 8% -8%,rgba(97,104,255,.10),transparent 62%),
    radial-gradient(820px 520px at 96% 4%,rgba(27,188,255,.075),transparent 64%),
    radial-gradient(740px 460px at 72% 102%,rgba(255,90,185,.055),transparent 68%),
    linear-gradient(180deg,#f7f9fc 0%,#f1f5fa 52%,#edf2f8 100%);
}
html[data-theme="light"] body::before{
  opacity:.14;
  filter:blur(96px);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(920px 620px at 4% -8%,rgba(99,82,255,.21),transparent 60%),
    radial-gradient(800px 570px at 98% 8%,rgba(0,180,255,.14),transparent 62%),
    radial-gradient(800px 560px at 70% 104%,rgba(255,73,194,.085),transparent 68%),
    linear-gradient(180deg,#060a13 0%,#08101d 54%,#09111f 100%);
}
html[data-theme="dark"] body::before{
  opacity:.82;
  filter:blur(70px);
}

/* 主要卡片和面板表面。 */
html[data-theme="light"] .topbar,
html[data-theme="light"] .hero,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .metric,
html[data-theme="light"] .activity-panel,
html[data-theme="light"] .service-card,
html[data-theme="light"] .site-box,
html[data-theme="light"] .login-visual,
html[data-theme="light"] .login-card,
html[data-theme="light"] .modal,
html[data-theme="light"] .page-tabs,
html[data-theme="light"] .overview-mini,
html[data-theme="light"] .input-helper-card{
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(247,250,255,.62)) !important;
  border-color:rgba(190,201,220,.66) !important;
  -webkit-backdrop-filter:blur(20px) saturate(148%) !important;
  backdrop-filter:blur(20px) saturate(148%) !important;
  box-shadow:
    0 14px 34px rgba(54,70,102,.075),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 0 1px rgba(255,255,255,.20) !important;
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .activity-panel,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .site-box,
html[data-theme="dark"] .login-visual,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .page-tabs,
html[data-theme="dark"] .overview-mini,
html[data-theme="dark"] .input-helper-card{
  background:linear-gradient(145deg,rgba(17,23,38,.82),rgba(10,15,27,.72)) !important;
  border-color:rgba(255,255,255,.09) !important;
  -webkit-backdrop-filter:blur(22px) saturate(150%) !important;
  backdrop-filter:blur(22px) saturate(150%) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 0 0 1px rgba(255,255,255,.018) !important;
}

/* 内部信息块与控件表面。 */
html[data-theme="light"] .module-summary>div,
html[data-theme="light"] .source-summary>div,
html[data-theme="light"] .strm-primary-stat,
html[data-theme="light"] .strm-quick-stats>div,
html[data-theme="light"] .health-btn,
html[data-theme="light"] .health-static,
html[data-theme="light"] .status-row,
html[data-theme="light"] .list-row,
html[data-theme="light"] .account-card,
html[data-theme="light"] .download-item,
html[data-theme="light"] .issue-card,
html[data-theme="light"] .site-option,
html[data-theme="light"] .field,
html[data-theme="light"] .switch-row,
html[data-theme="light"] .search-box,
html[data-theme="light"] .code-box{
  background:linear-gradient(145deg,rgba(250,252,255,.72),rgba(242,246,252,.56)) !important;
  border-color:rgba(197,207,224,.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 5px 14px rgba(72,88,124,.03) !important;
}
html[data-theme="dark"] .module-summary>div,
html[data-theme="dark"] .source-summary>div,
html[data-theme="dark"] .strm-primary-stat,
html[data-theme="dark"] .strm-quick-stats>div,
html[data-theme="dark"] .health-btn,
html[data-theme="dark"] .health-static,
html[data-theme="dark"] .status-row,
html[data-theme="dark"] .list-row,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .download-item,
html[data-theme="dark"] .issue-card,
html[data-theme="dark"] .site-option,
html[data-theme="dark"] .field,
html[data-theme="dark"] .switch-row,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .code-box{
  background:linear-gradient(145deg,rgba(20,27,42,.80),rgba(13,19,31,.68)) !important;
  border-color:rgba(255,255,255,.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 20px rgba(0,0,0,.10) !important;
}

/* 输入框及下拉选择框。 */
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .field select,
html[data-theme="light"] .mf-select-trigger,
html[data-theme="light"] .source-proxy-editor input{
  background:rgba(255,255,255,.70) !important;
  border-color:rgba(185,197,216,.78) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .mf-select-trigger,
html[data-theme="dark"] .source-proxy-editor input{
  background:rgba(8,13,23,.56) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field textarea:focus,
html[data-theme="light"] .mf-select.open .mf-select-trigger{
  border-color:rgba(94,106,255,.46) !important;
  box-shadow:0 0 0 3px rgba(96,105,255,.085),inset 0 1px 0 rgba(255,255,255,.90) !important;
}
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .mf-select.open .mf-select-trigger{
  border-color:rgba(117,104,255,.52) !important;
  box-shadow:0 0 0 3px rgba(107,92,255,.11),inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/* 导航链接的选中和悬停状态。 */
html[data-theme="light"] .mainnav,
html[data-theme="light"] .page-tabs{
  background:rgba(248,250,253,.68) !important;
  border-color:rgba(184,196,216,.66) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 4px 14px rgba(60,76,108,.035) !important;
}
html[data-theme="dark"] .mainnav,
html[data-theme="dark"] .page-tabs{
  background:rgba(10,15,26,.62) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}
html[data-theme="light"] .mainnav a.active,
html[data-theme="light"] .page-tab.active{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,248,255,.88)) !important;
  border-color:rgba(103,95,255,.30) !important;
  box-shadow:
    0 5px 14px rgba(77,89,132,.075),
    inset 0 0 0 1px rgba(109,94,255,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-theme="dark"] .mainnav a.active,
html[data-theme="dark"] .page-tab.active{
  background:linear-gradient(145deg,rgba(36,37,68,.92),rgba(20,30,50,.92)) !important;
  border-color:rgba(121,108,255,.34) !important;
  box-shadow:
    0 8px 20px rgba(37,39,86,.16),
    inset 0 0 0 1px rgba(122,108,255,.11),
    inset 0 1px 0 rgba(255,255,255,.075) !important;
}

/* 按钮、标签与状态徽标。 */
html[data-theme="light"] .btn,
html[data-theme="light"] .chip,
html[data-theme="light"] .badge,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .hero-tag{
  background:rgba(255,255,255,.70) !important;
  border-color:rgba(187,199,219,.75) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 3px 10px rgba(70,86,120,.025) !important;
}
html[data-theme="dark"] .btn,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .hero-tag{
  background:rgba(18,25,39,.74) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}
html[data-theme="light"] .btn.primary{
  color:#fff !important;
  background:linear-gradient(135deg,#6258ff,#2b8dff 62%,#15bdf5) !important;
  border-color:transparent !important;
  box-shadow:0 9px 22px rgba(65,91,220,.18),inset 0 1px 0 rgba(255,255,255,.30) !important;
}
html[data-theme="dark"] .btn.primary{
  color:#fff !important;
  background:linear-gradient(135deg,#735fff,#2e8cff 58%,#10bff4) !important;
  border-color:transparent !important;
  box-shadow:0 11px 25px rgba(66,79,220,.24),inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* 悬停时的层次反馈。 */
html[data-theme="light"] .card:hover,
html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .action-card:hover,
html[data-theme="light"] .metric:hover{
  border-color:rgba(157,173,204,.82) !important;
  box-shadow:
    0 18px 42px rgba(52,68,102,.105),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 0 0 1px rgba(255,255,255,.18) !important;
}
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .service-card:hover,
html[data-theme="dark"] .action-card:hover,
html[data-theme="dark"] .metric:hover{
  border-color:rgba(128,115,255,.20) !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.075),
    0 0 0 1px rgba(111,96,255,.025) !important;
}

/* 文字、边框和分隔线。 */
html[data-theme="light"] .section-head p,
html[data-theme="light"] .card p,
html[data-theme="light"] .panel p,
html[data-theme="light"] .metric span,
html[data-theme="light"] .metric p,
html[data-theme="light"] .field label,
html[data-theme="light"] .list-main small,
html[data-theme="light"] .status-copy span,
html[data-theme="light"] .event-copy span{
  color:#4d5868;
}
html[data-theme="light"] .field-help{color:#4d5868}
html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .panel p,
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .metric p,
html[data-theme="dark"] .field label,
html[data-theme="dark"] .list-main small,
html[data-theme="dark"] .status-copy span,
html[data-theme="dark"] .event-copy span{
  color:#aeb7c6;
}
html[data-theme="dark"] .field-help{color:#aeb7c6}
.panel-head,
.section-head,
.list-row,
.status-row,
.event{
  border-color:color-mix(in srgb,var(--line) 92%,transparent);
}

/* 状态圆点和展开箭头。 */
.live-state i{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 9%,transparent),0 0 10px color-mix(in srgb,var(--green) 42%,transparent);
}
.source-arrow,
.arrow,
.strm-card-arrow{
  color:color-mix(in srgb,var(--faint) 88%,var(--text));
  opacity:.82;
}
.card:hover .source-arrow,
.card:hover .strm-card-arrow,
.service-card:hover .arrow,
.action-card:hover .arrow{
  color:var(--text);
  opacity:1;
}

/* STRM 趋势图的视觉层次。 */
html[data-theme="light"] .strm-chart-shell,
html[data-theme="light"] .strm-chart-shell-redesign{
  background:linear-gradient(145deg,rgba(251,253,255,.68),rgba(240,245,252,.50)) !important;
  border-color:rgba(193,204,223,.70) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 7px 18px rgba(64,80,116,.03) !important;
}
html[data-theme="dark"] .strm-chart-shell,
html[data-theme="dark"] .strm-chart-shell-redesign{
  background:linear-gradient(145deg,rgba(19,26,41,.74),rgba(10,16,28,.66)) !important;
  border-color:rgba(255,255,255,.085) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 26px rgba(0,0,0,.12) !important;
}

/* 滚动条的尺寸与颜色。 */
html[data-theme="light"] *{
  scrollbar-color:rgba(112,126,151,.34) transparent;
}
html[data-theme="dark"] *{
  scrollbar-color:rgba(146,157,180,.25) transparent;
}

/* 各性能模式共用视觉样式，仅调整动态反馈。 */
html[data-motion="performance"] .card,
html[data-motion="performance"] .panel,
html[data-motion="performance"] .metric,
html[data-motion="performance"] .service-card{
  transition:none !important;
}

/* 下拉框打开时保留原有外观，并抑制浏览器额外的方形焦点框。
 */
.mf-select-trigger,
.mf-select-trigger:focus,
.mf-select-trigger:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  border-radius:inherit;
}
.mf-select.open{
  outline:none !important;
  box-shadow:none !important;
}

/* 展开箭头与面板开合时间同步。
 */
html[data-motion="full"] .strm-subscription-chevron::before,
html[data-motion="full"] .strm-tree-chevron::before,
html[data-motion="full"] .strm-source-chevron::before{
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform;
}

/* 订阅内容区使用三百三十毫秒的展开过渡。 */
html[data-motion="full"] .strm-subscription-chevron::before{
  transform:translate3d(0,-1.5px,0) rotate(45deg);
  transition:transform .33s cubic-bezier(.22,.61,.36,1) !important;
}
html[data-motion="full"] .strm-subscription-card.open .strm-subscription-chevron::before{
  transform:translate3d(0,1.5px,0) rotate(225deg);
}

/* 媒体库分类内容区使用三百六十毫秒的展开过渡。 */
html[data-motion="full"] .strm-tree-chevron::before{
  transform:translate3d(0,-1.5px,0) rotate(45deg);
  transition:transform .36s cubic-bezier(.22,.61,.36,1) !important;
}
html[data-motion="full"] .strm-library-category.open .strm-tree-chevron::before{
  transform:translate3d(0,1.5px,0) rotate(225deg);
}

/* 面板开始收起时立即转动箭头，保持焦点反馈的形状一致。
 */

/* 指针点击不额外绘制方形焦点框，键盘操作保留圆角焦点提示。
 */
.strm-subscription-summary,
.strm-library-source-head,
.strm-library-category-head,
.strm-library-item-head{
  -webkit-tap-highlight-color:transparent;
}
.strm-subscription-summary:focus,
.strm-library-source-head:focus,
.strm-library-category-head:focus,
.strm-library-item-head:focus{
  outline:none !important;
}
.strm-subscription-summary:focus:not(:focus-visible),
.strm-library-source-head:focus:not(:focus-visible),
.strm-library-category-head:focus:not(:focus-visible),
.strm-library-item-head:focus:not(:focus-visible){
  box-shadow:none !important;
}
.strm-subscription-summary:focus-visible,
.strm-library-source-head:focus-visible,
.strm-library-category-head:focus-visible,
.strm-library-item-head:focus-visible{
  outline:none !important;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 42%,transparent);
}

/* 全特效模式下箭头略早于内容区完成转动。
 */
html[data-motion="full"] .strm-subscription-chevron::before{
  transition-duration:.24s !important;
  transition-timing-function:cubic-bezier(.2,.72,.24,1) !important;
}
html[data-motion="full"] .strm-source-chevron::before{
  transition:transform .23s cubic-bezier(.2,.72,.24,1) !important;
}
html[data-motion="full"] .strm-tree-chevron::before{
  transition-duration:.25s !important;
  transition-timing-function:cubic-bezier(.2,.72,.24,1) !important;
}

/* 收起期间虽然内容区暂时保留打开标记，箭头仍立即开始回转。
 */
html[data-motion="full"] .strm-subscription-card[data-strm-disclosure-fx="close"] .strm-subscription-chevron::before,
html[data-motion="balanced"] .strm-subscription-card[data-strm-disclosure-fx="close"] .strm-subscription-chevron::before{
  transform:translate3d(0,-1.5px,0) rotate(45deg) !important;
}
html[data-motion="full"] .strm-library-source-group[data-strm-disclosure-fx="close"] .strm-source-chevron::before,
html[data-motion="balanced"] .strm-library-source-group[data-strm-disclosure-fx="close"] .strm-source-chevron::before{
  transform:translate3d(0,-1.5px,0) rotate(45deg) !important;
}
html[data-motion="full"] .strm-library-category[data-strm-disclosure-fx="close"] .strm-tree-chevron::before,
html[data-motion="balanced"] .strm-library-category[data-strm-disclosure-fx="close"] .strm-tree-chevron::before{
  transform:translate3d(0,-1.5px,0) rotate(45deg) !important;
}

/* 箭头只在过渡期间使用合成层。 */
.strm-subscription-chevron::before,
.strm-source-chevron::before,
.strm-tree-chevron::before{
  backface-visibility:hidden;
  transform-origin:50% 50%;
}

/* 展开动画沿用下拉箭头时序，光带限制在卡片圆角内部。
 */

/* 展开箭头使用与下拉触发器一致的时长和弹性曲线。
 */
html[data-motion="full"] .strm-subscription-chevron::before,
html[data-motion="full"] .strm-source-chevron::before,
html[data-motion="full"] .strm-tree-chevron::before{
  transition-property:transform,border-color,filter !important;
  transition-duration:.30s,.20s,.20s !important;
  transition-timing-function:cubic-bezier(.34,1.56,.64,1),ease,ease !important;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform;
}

/* 打开方向的箭头旋转附带轻微缩放反馈。 */
html[data-motion="full"] .strm-subscription-card.open:not([data-strm-disclosure-fx="close"]) .strm-subscription-chevron::before,
html[data-motion="full"] .strm-library-source-group.open:not([data-strm-disclosure-fx="close"]) .strm-source-chevron::before,
html[data-motion="full"] .strm-library-category.open:not([data-strm-disclosure-fx="close"]) .strm-tree-chevron::before{
  transform:translate3d(0,1.5px,0) rotate(225deg) scale(1.08) !important;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 42%,transparent));
}

/* 脚本标记收起状态后立即回转箭头，使箭头与实际高度变化同步结束。
 */
html[data-motion="full"] .strm-subscription-card[data-strm-disclosure-fx="close"] .strm-subscription-chevron::before,
html[data-motion="full"] .strm-library-source-group[data-strm-disclosure-fx="close"] .strm-source-chevron::before,
html[data-motion="full"] .strm-library-category[data-strm-disclosure-fx="close"] .strm-tree-chevron::before{
  transform:translate3d(0,-1.5px,0) rotate(45deg) scale(1) !important;
  filter:none;
}

/* 展开高亮沿卡片圆角裁剪，避免出现方形闪光。
 */
.strm-subscription-card,
.strm-library-source-group,
.strm-library-category,
.strm-library-item{
  isolation:isolate;
}
.strm-subscription-summary,
.strm-library-source-head,
.strm-library-category-head,
.strm-library-item-head{
  overflow:hidden !important;
  background-clip:padding-box;
}
.strm-subscription-summary::after,
.strm-library-source-head::after,
.strm-library-category-head::after,
.strm-library-item-head::after{
  inset:0 !important;
  max-width:100%;
  max-height:100%;
  overflow:hidden;
  border-radius:inherit;
  clip-path:inset(0 round 12px);
}

/* 将紫色反馈绘制为内阴影，限制在订阅或媒体卡片的圆角内。
 */
@keyframes mpStrmSeriesShellFull{
  0%{
    transform:scale(.997);
    border-color:var(--line);
    box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent);
  }
  44%{
    transform:scale(1.003);
    border-color:color-mix(in srgb,var(--accent) 32%,var(--line));
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent),
      inset 0 0 24px color-mix(in srgb,var(--accent) 12%,transparent);
  }
  74%{
    transform:scale(.999);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent),
      inset 0 0 14px color-mix(in srgb,var(--accent) 7%,transparent);
  }
  100%{
    transform:none;
    border-color:var(--line);
    box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent);
  }
}

/* 一般模式沿用相同的圆角裁剪规则。 */
@keyframes mpStrmSeriesShellBalanced{
  0%{border-color:var(--line);box-shadow:inset 0 0 0 0 transparent}
  48%{
    border-color:color-mix(in srgb,var(--accent) 24%,var(--line));
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),
      inset 0 0 16px color-mix(in srgb,var(--accent) 7%,transparent);
  }
  100%{border-color:var(--line);box-shadow:inset 0 0 0 0 transparent}
}

/* 指针点击时避免浏览器另绘方形焦点装饰。 */
.strm-subscription-summary:focus,
.strm-subscription-summary:focus-visible,
.strm-library-source-head:focus,
.strm-library-source-head:focus-visible,
.strm-library-category-head:focus,
.strm-library-category-head:focus-visible,
.strm-library-item-head:focus,
.strm-library-item-head:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

/* 展开箭头同步与圆角内部光晕裁剪。
 */

html[data-motion="full"] .strm-subscription-chevron::before,
html[data-motion="full"] .strm-source-chevron::before,
html[data-motion="full"] .strm-tree-chevron::before,
html[data-motion="balanced"] .strm-subscription-chevron::before,
html[data-motion="balanced"] .strm-source-chevron::before,
html[data-motion="balanced"] .strm-tree-chevron::before{
  transition:transform .20s ease !important;
  filter:none !important;
  will-change:transform;
  transform-origin:50% 50%;
  backface-visibility:hidden;
}
html[data-motion="full"] .strm-subscription-card.open:not([data-strm-disclosure-fx="close"]) .strm-subscription-chevron::before,
html[data-motion="balanced"] .strm-subscription-card.open:not([data-strm-disclosure-fx="close"]) .strm-subscription-chevron::before,
html[data-motion="full"] .strm-library-source-group.open:not([data-strm-disclosure-fx="close"]) .strm-source-chevron::before,
html[data-motion="balanced"] .strm-library-source-group.open:not([data-strm-disclosure-fx="close"]) .strm-source-chevron::before,
html[data-motion="full"] .strm-library-category.open:not([data-strm-disclosure-fx="close"]) .strm-tree-chevron::before,
html[data-motion="balanced"] .strm-library-category.open:not([data-strm-disclosure-fx="close"]) .strm-tree-chevron::before{
  transform:translateY(1.5px) rotate(225deg) !important;
}
html[data-motion="full"] .strm-subscription-card[data-strm-disclosure-fx="close"] .strm-subscription-chevron::before,
html[data-motion="balanced"] .strm-subscription-card[data-strm-disclosure-fx="close"] .strm-subscription-chevron::before,
html[data-motion="full"] .strm-library-source-group[data-strm-disclosure-fx="close"] .strm-source-chevron::before,
html[data-motion="balanced"] .strm-library-source-group[data-strm-disclosure-fx="close"] .strm-source-chevron::before,
html[data-motion="full"] .strm-library-category[data-strm-disclosure-fx="close"] .strm-tree-chevron::before,
html[data-motion="balanced"] .strm-library-category[data-strm-disclosure-fx="close"] .strm-tree-chevron::before{
  transform:translateY(-1.5px) rotate(45deg) !important;
}

html[data-motion="full"] .strm-subscription-summary.strm-series-head-pulse,
html[data-motion="full"] .strm-library-item-head.strm-series-head-pulse,
html[data-motion="full"] .strm-library-source-head.library-head-pulse,
html[data-motion="full"] .strm-library-category-head.library-head-pulse,
html[data-motion="full"] .strm-library-item-head.library-head-pulse{
  animation-duration:.18s !important;
  animation-timing-function:ease !important;
}
html[data-motion="full"] .strm-subscription-card.strm-series-disclosure-fx .strm-subscription-summary::after,
html[data-motion="full"] .strm-library-item.strm-series-disclosure-fx .strm-library-item-head::after,
html[data-motion="full"] .strm-library-category.library-toggle-fx .strm-library-category-head::after,
html[data-motion="full"] .strm-library-source-group.library-toggle-fx .strm-library-source-head::after,
html[data-motion="full"] .strm-library-item.library-toggle-fx .strm-library-item-head::after{
  animation-duration:.18s !important;
  animation-timing-function:ease !important;
}
html[data-motion="full"] .strm-subscription-card.strm-series-disclosure-fx,
html[data-motion="full"] .strm-library-item.strm-series-disclosure-fx{
  animation-duration:.18s !important;
  animation-timing-function:ease !important;
}

.strm-subscription-summary,
.strm-library-source-head,
.strm-library-category-head,
.strm-library-item-head,
.strm-subscription-chevron,
.strm-source-chevron,
.strm-tree-chevron{
  isolation:isolate;
  overflow:hidden !important;
  contain:paint;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
.strm-subscription-summary{border-radius:17px;}
.strm-subscription-card.open .strm-subscription-summary{border-radius:17px 17px 0 0;}
.strm-library-source-head{border-radius:15px;}
.strm-library-source-group.open .strm-library-source-head{border-radius:15px 15px 0 0;}
.strm-library-category-head{border-radius:15px;}
.strm-library-category.open .strm-library-category-head{border-radius:15px 15px 0 0;}
.strm-library-item-head{border-radius:13px;}
.strm-library-item.open .strm-library-item-head{border-radius:13px 13px 0 0;}

.strm-subscription-summary::after,
.strm-library-source-head::after,
.strm-library-category-head::after,
.strm-library-item-head::after{
  inset:0 !important;
  border-radius:inherit !important;
  clip-path:inset(0 round 13px) !important;
  overflow:hidden !important;
  filter:none !important;
  box-shadow:none !important;
}

html[data-motion="full"] .strm-subscription-card.open .strm-subscription-chevron,
html[data-motion="full"] .strm-library-source-group.open .strm-source-chevron,
html[data-motion="full"] .strm-library-category.open .strm-tree-chevron{
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),
             inset 0 0 10px color-mix(in srgb,var(--accent) 9%,transparent) !important;
}

.strm-subscription-summary:focus,
.strm-subscription-summary:focus-visible,
.strm-library-source-head:focus,
.strm-library-source-head:focus-visible,
.strm-library-category-head:focus,
.strm-library-category-head:focus-visible,
.strm-library-item-head:focus,
.strm-library-item-head:focus-visible{
  outline:0 !important;
  outline-offset:0 !important;
  box-shadow:none !important;
}

/* 订阅和来源、分类层级的光带时长；资源行沿用自身时序。
 */
html[data-motion="full"] .strm-subscription-card.strm-series-disclosure-fx .strm-subscription-summary::after,
html[data-motion="full"] .strm-library-source-group.library-toggle-fx .strm-library-source-head::after,
html[data-motion="full"] .strm-library-category.library-toggle-fx .strm-library-category-head::after{
  animation-duration:.32s !important;
  animation-timing-function:cubic-bezier(.22,.72,.22,1) !important;
}


/* 按层级和性能模式设置分类展开的光带与弹性反馈。
 */

/* 全特效模式延长紫色高亮的移动时间。 */
html[data-motion="full"] .strm-subscription-card.strm-series-disclosure-fx .strm-subscription-summary::after,
html[data-motion="full"] .strm-library-source-group.library-toggle-fx .strm-library-source-head::after,
html[data-motion="full"] .strm-library-category.library-toggle-fx .strm-library-category-head::after{
  animation-duration:.56s !important;
  animation-timing-function:cubic-bezier(.16,.70,.20,1) !important;
}

/* 一般模式使用更短、更轻的光带反馈。 */
html[data-motion="balanced"] .strm-subscription-card.strm-series-disclosure-fx .strm-subscription-summary::after,
html[data-motion="balanced"] .strm-library-source-group.library-toggle-fx .strm-library-source-head::after,
html[data-motion="balanced"] .strm-library-category.library-toggle-fx .strm-library-category-head::after{
  animation-duration:.30s !important;
  animation-timing-function:ease-out !important;
}

/* 高性能模式即时完成分类交互。 */
html[data-motion="performance"] .strm-subscription-card.strm-series-disclosure-fx .strm-subscription-summary::after,
html[data-motion="performance"] .strm-library-source-group.library-toggle-fx .strm-library-source-head::after,
html[data-motion="performance"] .strm-library-category.library-toggle-fx .strm-library-category-head::after{
  animation:none !important;
  transition:none !important;
  transform:none !important;
  opacity:0 !important;
}
html[data-motion="performance"] .strm-subscription-summary.strm-series-head-pulse,
html[data-motion="performance"] .strm-library-source-head.library-head-pulse,
html[data-motion="performance"] .strm-library-category-head.library-head-pulse{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}

/* 全特效模式下订阅、媒体库分类与站点策略卡片的光带时长。
 */

/* 订阅和媒体库分类的紫色光带平稳移动。 */
html[data-motion="full"] .strm-subscription-card.strm-series-disclosure-fx .strm-subscription-summary::after,
html[data-motion="full"] .strm-library-source-group.library-toggle-fx .strm-library-source-head::after,
html[data-motion="full"] .strm-library-category.library-toggle-fx .strm-library-category-head::after{
  animation-duration:.78s !important;
  animation-timing-function:cubic-bezier(.18,.62,.20,1) !important;
}

/* 站点策略保持及时响应，并延长全特效模式的光带显示。
 */
html[data-motion="full"] .t4-policy-item.compact.site-policy-switch-in{
  animation-duration:.66s !important;
  animation-timing-function:cubic-bezier(.16,.78,.22,1) !important;
}
html[data-motion="full"] .t4-policy-item.compact.site-policy-switch-in::after{
  animation-duration:.74s !important;
  animation-delay:.015s !important;
  animation-timing-function:cubic-bezier(.18,.58,.18,1) !important;
}
html[data-motion="full"] .t4-policy-item.compact.site-policy-switch-in .t4-policy-status{
  animation-duration:.56s !important;
}


/* 站点策略光晕限制在卡片内，目录层级使用柔和的展开回弹。
 */

/* 站点策略卡片通过绘制裁剪和内阴影限制光晕范围。
 */
html[data-motion="full"] .t4-policy-item.compact.site-policy-switch-in,
html[data-motion="full"] .t4-policy-item.compact.site-policy-switch-out{
  overflow:hidden !important;
  isolation:isolate;
  contain:paint;
  border-radius:16px;
  background-clip:padding-box;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
html[data-motion="full"] .t4-policy-item.compact.site-policy-switch-in::after{
  top:0 !important;
  right:auto !important;
  bottom:0 !important;
  border-radius:16px !important;
  clip-path:inset(0 round 16px);
  filter:none !important;
  box-shadow:none !important;
}
@keyframes mpSitePolicyOutFull{
  0%{
    opacity:1;
    transform:none;
    box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--site-policy-fx-color) 0%,transparent);
  }
  55%{
    box-shadow:
      inset 0 0 0 2px color-mix(in srgb,var(--site-policy-fx-color) 16%,transparent),
      inset 0 0 20px color-mix(in srgb,var(--site-policy-fx-color) 8%,transparent);
  }
  100%{
    opacity:.46;
    transform:translateX(var(--site-policy-exit-x)) scale(.986);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--site-policy-fx-color) 10%,transparent),
      inset 0 0 24px color-mix(in srgb,var(--site-policy-fx-color) 10%,transparent);
  }
}
@keyframes mpSitePolicyInFull{
  0%{
    opacity:.42;
    transform:translateX(var(--site-policy-enter-x)) scale(.978);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--site-policy-fx-color) 18%,transparent),
      inset 0 0 12px color-mix(in srgb,var(--site-policy-fx-color) 7%,transparent);
  }
  42%{
    opacity:1;
    transform:translateX(0) scale(1.012);
    box-shadow:
      inset 0 0 0 3px color-mix(in srgb,var(--site-policy-fx-color) 15%,transparent),
      inset 0 0 30px color-mix(in srgb,var(--site-policy-fx-color) 13%,transparent);
  }
  72%{
    transform:scale(.998);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--site-policy-fx-color) 9%,transparent),
      inset 0 0 18px color-mix(in srgb,var(--site-policy-fx-color) 7%,transparent);
  }
  100%{
    opacity:1;
    transform:none;
    box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--site-policy-fx-color) 0%,transparent);
  }
}

/* 分类标题使用一次明显回弹和后续衰减，具体媒体行不使用该效果。
 */
html[data-motion="full"] .strm-subscription-summary.strm-series-head-pulse,
html[data-motion="full"] .strm-library-source-head.library-head-pulse,
html[data-motion="full"] .strm-library-category-head.library-head-pulse{
  transform-origin:50% 50%;
  animation:mpCategoryJellyHeadFull .47s linear both !important;
}
@keyframes mpCategoryJellyHeadFull{
  0%{transform:translateY(0) scale3d(1,1,1);background:transparent}
  38%{transform:translateY(1px) scale3d(.999,1.010,1);background:color-mix(in srgb,var(--accent) 7%,transparent)}
  58%{transform:translateY(-.58px) scale3d(1.001,.995,1)}
  75%{transform:translateY(.28px) scale3d(.9997,1.004,1)}
  89%{transform:translateY(-.10px) scale3d(1.0002,.999,1)}
  100%{transform:none;background:transparent}
}
\n\n/* 主要按钮表面和空闲合成层的控制。 */\n\n/* 主要操作通过顶部高光和同色光晕呈现层次。 */\n.btn.primary{\n  border-color:color-mix(in srgb,#fff 14%,transparent) !important;\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.32),\n    0 6px 16px color-mix(in srgb,var(--accent) 18%,transparent) !important;\n}\n.btn.primary:hover{\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.38),\n    0 8px 20px color-mix(in srgb,var(--accent) 22%,transparent) !important;\n}\n.btn.primary:active:not(:disabled){\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.26),\n    0 4px 11px color-mix(in srgb,var(--accent) 16%,transparent) !important;\n}\nhtml[data-theme="light"] .btn.primary{\n  border-color:rgba(255,255,255,.26) !important;\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.42),\n    0 5px 14px rgba(37,99,235,.13) !important;\n}\nhtml[data-theme="light"] .btn.primary:hover{\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.48),\n    0 7px 17px rgba(37,99,235,.16) !important;\n}\nhtml[data-theme="dark"] .btn.primary{\n  border-color:rgba(255,255,255,.12) !important;\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.30),\n    0 7px 18px rgba(76,87,255,.18) !important;\n}\n\n/* 下拉框关闭后释放合成层，重新打开时恢复动画所需的图层。 */\n.mf-select:not(.open) .mf-select-menu{will-change:auto !important}\n.mf-select.open .mf-select-menu{will-change:transform,opacity,clip-path,filter}\n\n/* 分区进入动画结束后回到普通图层树。 */\nhtml.mp-motion-ready .mp-auto-reveal.mp-in-view{will-change:auto}\n
/* 主要按钮使用内部渐变和边缘层次，屏蔽图标按几何方式居中绘制。
 */

.btn.primary{
  position:relative;
  isolation:isolate;
  text-shadow:none !important;
  filter:none !important;
  background-size:145% 145%;
  background-position:20% 50%;
  transition:
    background-position .24s cubic-bezier(.2,.8,.2,1),
    border-color .20s ease,
    box-shadow .20s ease,
    opacity .20s ease !important;
  -webkit-font-smoothing:antialiased;
}

/* 按钮文字保持静止栅格层，悬停反馈只改变表面装饰。
 */
.btn.primary:hover{
  transform:none !important;
  filter:none !important;
  background-position:78% 50%;
  text-shadow:none !important;
}
.btn.primary:active:not(:disabled){
  transform:none !important;
  filter:none !important;
  background-position:62% 50%;
  text-shadow:none !important;
}

/* 亮色主题的按钮不绘制偏向右下的深色外阴影。 */
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .btn.primary:active:not(:disabled){
  background-image:linear-gradient(135deg,#536cff 0%,#347fff 50%,#09bdf2 100%) !important;
  border-color:rgba(55,113,235,.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}
html[data-theme="light"] .btn.primary:hover{
  border-color:rgba(55,113,235,.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* 暗色主题的按钮使用冷色内部边缘。
 */
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn.primary:hover,
html[data-theme="dark"] .btn.primary:active:not(:disabled){
  background-image:linear-gradient(135deg,#725eff 0%,#3983ff 52%,#08bdf2 100%) !important;
  border-color:rgba(111,126,255,.28) !important;
  box-shadow:
    inset 0 0 0 1px rgba(103,126,255,.13),
    inset 0 -1px 0 rgba(24,92,176,.10) !important;
}
html[data-theme="dark"] .btn.primary:hover{
  border-color:rgba(124,139,255,.36) !important;
  box-shadow:
    inset 0 0 0 1px rgba(112,135,255,.18),
    inset 0 -1px 0 rgba(24,92,176,.08) !important;
}

/* 使用圆形和斜线绘制屏蔽图标，避免字体基线造成偏移。
 */
.policy-action-icon{
  position:relative;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  text-align:center;
}
.policy-action-pill.block .policy-action-icon{
  font-size:0 !important;
}
.policy-action-pill.block .policy-action-icon::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  border:1.6px solid currentColor;
  border-radius:50%;
  box-sizing:border-box;
  transform:translate(-50%,-50%);
}
.policy-action-pill.block .policy-action-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1.6px;
  height:11px;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
  transform-origin:50% 50%;
}

/* 站点首行边框保持完整，主要按钮通过内部倒角呈现层次。
 */

/* 首行紧贴滚动区域顶部，悬停时保留原位置并使用内部高亮。
 */
.site-policy-grid .t4-policy-list > .t4-policy-item.compact:first-child:hover{
  transform:translateY(0) scale(1.001) !important;
  border-color:var(--line-strong) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--line-strong) 72%,transparent),
    inset 0 1px 0 color-mix(in srgb,var(--accent) 10%,transparent) !important;
}

/* 主要按钮的层次均绘制在圆角边界内。
 */
.btn.primary,
.btn.primary:hover,
.btn.primary:active:not(:disabled){
  overflow:hidden;
  text-shadow:none !important;
  filter:none !important;
  transform:none !important;
  -webkit-font-smoothing:auto;
  font-weight:760;
  letter-spacing:0;
}

html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .btn.primary:active:not(:disabled){
  color:#fff !important;
  border:1px solid rgba(54,112,236,.42) !important;
  background-image:
    linear-gradient(180deg,
      rgba(122,164,255,.28) 0%,
      rgba(74,127,255,.10) 34%,
      rgba(18,105,228,.10) 68%,
      rgba(7,151,221,.18) 100%),
    linear-gradient(135deg,#566dff 0%,#377fff 52%,#0abcf0 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(137,184,255,.52),
    inset 1px 0 0 rgba(97,151,255,.18),
    inset -1px 0 0 rgba(5,154,225,.18),
    inset 0 -2px 0 rgba(17,101,205,.30) !important;
}
html[data-theme="light"] .btn.primary:hover{
  border-color:rgba(58,119,242,.50) !important;
  box-shadow:
    inset 0 1px 0 rgba(151,194,255,.58),
    inset 1px 0 0 rgba(104,158,255,.22),
    inset -1px 0 0 rgba(9,163,232,.22),
    inset 0 -2px 0 rgba(18,105,210,.34),
    inset 0 0 18px rgba(66,130,255,.08) !important;
}
html[data-theme="light"] .btn.primary:active:not(:disabled){
  background-position:62% 52%;
  box-shadow:
    inset 0 2px 4px rgba(28,91,196,.18),
    inset 0 1px 0 rgba(111,165,255,.38),
    inset 0 -1px 0 rgba(7,147,216,.22) !important;
}

html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn.primary:hover,
html[data-theme="dark"] .btn.primary:active:not(:disabled){
  color:#fff !important;
  border:1px solid rgba(83,110,244,.56) !important;
  background-image:
    linear-gradient(180deg,
      rgba(92,125,255,.22) 0%,
      rgba(56,111,255,.08) 34%,
      rgba(18,101,222,.10) 70%,
      rgba(3,143,207,.18) 100%),
    linear-gradient(135deg,#6859f4 0%,#3678f6 52%,#08aeda 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(93,137,255,.38),
    inset 1px 0 0 rgba(79,111,238,.18),
    inset -1px 0 0 rgba(7,142,205,.18),
    inset 0 -2px 0 rgba(13,72,164,.38) !important;
}
html[data-theme="dark"] .btn.primary:hover{
  border-color:rgba(93,123,255,.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(104,148,255,.46),
    inset 1px 0 0 rgba(86,119,246,.22),
    inset -1px 0 0 rgba(10,151,216,.22),
    inset 0 -2px 0 rgba(14,76,170,.42),
    inset 0 0 18px rgba(55,106,245,.10) !important;
}
html[data-theme="dark"] .btn.primary:active:not(:disabled){
  background-position:62% 52%;
  box-shadow:
    inset 0 2px 4px rgba(8,46,119,.28),
    inset 0 1px 0 rgba(78,124,238,.30),
    inset 0 -1px 0 rgba(5,129,188,.25) !important;
}

/* 性能模式的选中标记使用几何勾选，按钮文字与内部渐变分层显示。
 */

/* 在圆形容器内绘制勾选标记，保持视觉居中。
 */
.motion-mode-check{
  position:absolute;
  overflow:hidden;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:-9999px;
}
.motion-mode-check::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:9px;
  box-sizing:border-box;
  border-style:solid;
  border-color:currentColor;
  border-width:0 2px 2px 0;
  border-radius:.5px;
  opacity:0;
  transform:translate(-50%,-58%) rotate(45deg);
  transform-origin:50% 50%;
  pointer-events:none;
}
.motion-mode-card.active .motion-mode-check::before{
  opacity:1;
}

/* 主要按钮通过叠加渐变与内部倒角增加层次。
 */
.btn.primary,
.btn.primary:hover,
.btn.primary:active:not(:disabled){
  color:#fff !important;
  text-shadow:none !important;
  filter:none !important;
  transform:none !important;
  font-family:inherit;
  font-size:0.7125rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.006em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:auto;
  background-size:100% 100%,165% 165% !important;
  background-position:0 0,42% 46% !important;
  transition:
    background-position .24s ease,
    border-color .20s ease,
    box-shadow .20s ease !important;
}

html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .btn.primary:active:not(:disabled){
  border:1px solid rgba(48,119,236,.54) !important;
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.10) 24%,
      rgba(93,151,255,.03) 48%,
      rgba(1,145,221,.13) 100%),
    linear-gradient(132deg,
      #685cff 0%,
      #506dff 28%,
      #3289ff 55%,
      #15a8f6 76%,
      #09c4eb 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 2px 5px rgba(255,255,255,.055),
    inset 1px 0 0 rgba(100,139,255,.20),
    inset -1px 0 0 rgba(0,177,225,.20),
    inset 0 -2px 0 rgba(20,100,207,.34) !important;
}
html[data-theme="light"] .btn.primary:hover{
  background-position:0 0,58% 54% !important;
  border-color:rgba(42,127,241,.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    inset 0 2px 7px rgba(255,255,255,.075),
    inset 1px 0 0 rgba(107,147,255,.24),
    inset -1px 0 0 rgba(0,187,232,.24),
    inset 0 -2px 0 rgba(17,105,213,.38),
    inset 0 0 15px rgba(72,143,255,.075) !important;
}
html[data-theme="light"] .btn.primary:active:not(:disabled){
  background-position:0 0,62% 58% !important;
  box-shadow:
    inset 0 2px 5px rgba(26,95,197,.17),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(5,154,218,.24) !important;
}

html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn.primary:hover,
html[data-theme="dark"] .btn.primary:active:not(:disabled){
  border:1px solid rgba(76,112,238,.68) !important;
  background-image:
    linear-gradient(180deg,
      rgba(113,145,255,.17) 0%,
      rgba(80,126,255,.07) 25%,
      rgba(34,100,224,.03) 52%,
      rgba(2,132,194,.15) 100%),
    linear-gradient(132deg,
      #6255ef 0%,
      #4b67ef 29%,
      #2e7eea 55%,
      #1498de 77%,
      #08b4d7 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(103,139,249,.38),
    inset 0 2px 5px rgba(75,110,231,.055),
    inset 1px 0 0 rgba(83,109,230,.21),
    inset -1px 0 0 rgba(4,151,205,.20),
    inset 0 -2px 0 rgba(10,65,149,.46) !important;
}
html[data-theme="dark"] .btn.primary:hover{
  background-position:0 0,58% 54% !important;
  border-color:rgba(85,124,248,.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(112,149,255,.46),
    inset 0 2px 7px rgba(75,116,241,.075),
    inset 1px 0 0 rgba(91,119,238,.24),
    inset -1px 0 0 rgba(7,160,214,.24),
    inset 0 -2px 0 rgba(11,71,158,.50),
    inset 0 0 15px rgba(51,104,238,.09) !important;
}
html[data-theme="dark"] .btn.primary:active:not(:disabled){
  background-position:0 0,62% 58% !important;
  box-shadow:
    inset 0 2px 5px rgba(5,42,111,.32),
    inset 0 1px 0 rgba(88,131,240,.30),
    inset 0 -1px 0 rgba(4,127,181,.28) !important;
}

/* 主要按钮的悬停光带和高性能模式图标。
 */

/* 文字层保持稳定，只让装饰绘制层执行动画。 */
.btn.primary{
  position:relative;
  isolation:isolate;
  contain:paint;
  font-size:0.7375rem;
  font-weight:780;
  line-height:1.15;
  letter-spacing:.008em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:auto;
}
.btn.primary::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(112deg,
    transparent 0%,
    transparent 36%,
    rgba(255,255,255,.05) 44%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,.07) 57%,
    transparent 65%,
    transparent 100%);
  transform:translateX(-145%);
  opacity:0;
  transition:transform .46s cubic-bezier(.2,.78,.2,1),opacity .16s ease;
}
.btn.primary:hover::after{
  transform:translateX(145%);
  opacity:.9;
}
.btn.primary:active:not(:disabled)::after{
  opacity:.25;
  transition-duration:.10s;
}

/* 亮色主题的主要按钮使用柔和的蓝青渐变。
 */
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .btn.primary:active:not(:disabled){
  border-color:rgba(65,116,220,.46) !important;
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.11) 25%,
      rgba(74,132,236,.025) 52%,
      rgba(14,145,208,.10) 100%),
    linear-gradient(132deg,
      #606cf0 0%,
      #4e76ee 30%,
      #3888ec 57%,
      #229fdf 79%,
      #19afd2 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    inset 0 2px 6px rgba(255,255,255,.06),
    inset 1px 0 0 rgba(94,137,238,.18),
    inset -1px 0 0 rgba(18,159,208,.17),
    inset 0 -2px 0 rgba(34,105,190,.30) !important;
}
html[data-theme="light"] .btn.primary:hover{
  background-position:0 0,72% 55% !important;
  border-color:rgba(59,122,226,.57) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.61),
    inset 0 2px 7px rgba(255,255,255,.08),
    inset 1px 0 0 rgba(95,144,244,.22),
    inset -1px 0 0 rgba(17,169,217,.21),
    inset 0 -2px 0 rgba(30,111,198,.34),
    inset 0 0 16px rgba(69,132,232,.065) !important;
}

/* 暗色主题保留较深的按钮表面与绘制层反馈。 */
html[data-theme="dark"] .btn.primary:hover{
  background-position:0 0,72% 55% !important;
}

/* 一般模式缩短光带持续时间并减轻强度。 */
html[data-motion="balanced"] .btn.primary::after{
  opacity:0;
  transition-duration:.28s,.12s;
}
html[data-motion="balanced"] .btn.primary:hover::after{
  opacity:.55;
}

/* 高性能模式关闭动态反馈。 */
html[data-motion="performance"] .btn.primary::after{
  display:none !important;
}

/* 高性能图标的三条等高指示条在容器中垂直居中。
 */
.motion-mode-icon.motion-icon-performance{
  align-items:center;
  line-height:0;
}
.motion-mode-icon.motion-icon-performance i{
  flex:0 0 5px;
  margin:0;
  transform:none;
}


/* STRM 新建订阅的搜索弹窗。
 */
.strm-subscription-search-modal{
  width:min(820px,calc(100vw - 28px));
}
.strm-subscription-searchbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 124px 160px auto;
  gap:12px;
  align-items:end;
}
.strm-subscription-search-button{min-height:42px}
.strm-subscription-searchbar > .field{min-width:0;height:90px}
.strm-subscription-searchbar .field input,
.strm-subscription-searchbar .field .mf-select{height:42px;min-height:42px}
.strm-subscription-searchbar .field .mf-select-trigger{height:40px;min-height:40px}
.strm-subscription-search-help{margin:10px 0 0 !important;color:var(--muted);font-size:0.5625rem}
.strm-subscription-search-message{
  margin:12px 0 0 !important;
  min-height:18px;
}
.strm-subscription-search-results{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
  max-height:min(52vh,520px);
  overflow:auto;
  padding:2px 5px 4px 2px;
}
.strm-subscription-search-results .strm-manual-result-card{
  grid-template-columns:72px minmax(0,1fr);
  padding:12px;
  border-radius:16px;
}
.strm-subscription-search-results .strm-manual-poster{
  min-height:104px;
  border-radius:12px;
}
.strm-subscription-search-results .strm-manual-result-body{gap:8px}
.strm-subscription-search-overview{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:40px;
  margin:0;
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.55;
}
.strm-subscription-search-results .btn[disabled]{opacity:.72;cursor:default}
@media(max-width:760px){
  .strm-subscription-searchbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strm-subscription-search-button{grid-column:1/-1}
  .strm-subscription-search-results{grid-template-columns:1fr}
}
@media(max-width:520px){
  .strm-subscription-searchbar{grid-template-columns:1fr}
}


/* 下载任务卡片显示后端返回的诊断信息。 */
.download-detail-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  margin:9px 0 2px;
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.45;
}
.download-detail-grid span{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
.download-detail-grid b,.download-local-line b{color:var(--text);font-weight:760}
.download-detail-grid .download-detail-path{flex-basis:100%;word-break:break-all}
.download-error-detail{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  margin-top:9px;
  padding:9px 10px;
  border:1px solid color-mix(in srgb,var(--danger) 30%,var(--line));
  border-radius:10px;
  background:color-mix(in srgb,var(--danger) 7%,var(--panel-soft));
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.5;
}
.download-error-detail strong{color:var(--danger);font-weight:800;white-space:nowrap}
.download-error-detail span{min-width:0;word-break:break-word}
.download-local-line{display:flex;gap:7px;align-items:baseline;margin-top:8px;color:var(--muted);font-size:0.5625rem}
.strm-manual-result-description{
  margin:0;
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}


/* 订阅卡片显示后端返回的错误信息。 */
.strm-subscription-error-detail{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  margin:8px 0 10px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line));
  border-radius:10px;
  background:color-mix(in srgb,var(--danger) 6%,var(--panel-soft));
  color:var(--muted);
  font-size:0.5625rem;
  line-height:1.5;
}
.strm-subscription-error-detail strong{color:var(--danger);font-weight:800;white-space:nowrap}
.strm-subscription-error-detail span{min-width:0;word-break:break-word}


/* 搜索范围可能包含大量站点；限制选择区高度，避免把整页无限拉长。 */
#fwSearchSiteList,
#t4SearchSiteList,
#embySearchSiteList,
#strmDisplaySiteList,
#strmSearchSiteList{
  max-height:min(560px,58vh) !important;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  align-content:start;
  padding-right:5px;
  scrollbar-gutter:stable;
}
@media(max-width:760px){
  #fwSearchSiteList,
  #t4SearchSiteList,
  #embySearchSiteList,
  #strmDisplaySiteList,
  #strmSearchSiteList{
    max-height:min(480px,55vh) !important;
  }
}

/* 健康度弹窗在手机上使用完整两列网格；头像列宽必须与头像一致，避免覆盖标题。 */
@media(max-width:760px){
  #siteModal{
    width:calc(100vw - 14px) !important;
    max-height:calc(100dvh - max(20px,env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
  }
  #siteModal .modal-body{
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #siteModal .site-list{
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px;
  }
  #siteModal .site-item{
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    align-items:start !important;
    min-height:0 !important;
    padding:14px !important;
    column-gap:12px !important;
    row-gap:8px !important;
  }
  #siteModal .site-avatar{
    position:relative !important;
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:52px !important;
    height:52px !important;
    margin:0 !important;
    align-self:start;
  }
  #siteModal .site-info{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  #siteModal .site-info strong,
  #siteModal .site-info small{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  #siteModal .site-info strong{line-height:1.35}
  #siteModal .site-info small{margin-top:5px;line-height:1.5}
  #siteModal .site-latency{margin-top:7px}
  #siteModal .site-item-actions{
    grid-column:2 !important;
    grid-row:2 !important;
    justify-self:start !important;
    justify-content:flex-start !important;
    min-width:0 !important;
    margin:0 !important;
  }
}
#embySearchProbeTab[hidden],#embySearchProbePanel[hidden]{display:none!important}

/* 分开限制样本和矩阵的高度，空态也保持紧凑，数据增加只产生内部滚动。 */
#directCapabilitySection[hidden]{display:none!important}
.direct-capability-results-panel{margin-top:14px}
#directCapabilitySamples{max-height:min(300px,40vh);margin-bottom:0}
#directCapabilityResults{max-height:min(480px,55vh)}
#directCapabilitySection .t4-empty{min-height:96px;padding:18px}
#directCapabilitySamples .direct-capability-sample{min-width:0;overflow-wrap:anywhere}

/* 桌面由基础设置确定整行高度，失败记录只占右侧剩余空间，数量不撑高页面。 */
.strm-sync-settings-grid{align-items:stretch}
.strm-sync-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.strm-sync-metrics .metric{min-width:0;min-height:96px;padding:16px}
@media(min-width:761px){
  .strm-sync-column{contain:size;min-height:0}
  #strmSyncProgressPanel{flex:0 0 auto}
  #strmSyncFailurePanel{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
  #strmSyncFailurePanel>.panel-head{flex:0 0 auto}
  #strmSyncFailurePanel>.panel-body{display:flex;flex:1 1 0;min-height:0;overflow:hidden}
  .strm-sync-failure-scroll{flex:1 1 0;min-height:0;height:auto;max-height:none}
}
@media(max-width:1100px){
  .strm-sync-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.emby-warmup-failures { max-height: min(400px, 50vh); overflow-y: auto; overscroll-behavior: contain; margin-top: 16px; }
.emby-warmup-failure { padding: 12px; margin-bottom: 8px; border: 1px solid var(--border, #303746); border-radius: 12px; overflow-wrap: anywhere; }
.emby-warmup-failure p { margin: 6px 0 0; }
/* 输出文件夹沿用现有表单间距与主题辅助文字，不改变其它设置卡片。 */
.strm-output-folder-field { margin-top: 10px; }
.strm-output-folder-field .field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 0.625rem; font-weight: 500; line-height: 1.6; }