:root{
  --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-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}

/* Top navigation */
.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:14px;letter-spacing:-.01em}
.brand-copy small{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.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:11px;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:10px;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:10px;font-weight:700}

/* Hero */
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:10px;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(40px,4.9vw,68px);
  line-height:.99;letter-spacing:-.055em;font-weight:830
}
.hero.compact h1{font-size:clamp(34px,4.2vw,56px)}
.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:13px;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:10px;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:10px}
.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:17px}.live-title p{margin:5px 0 0;color:var(--muted);font-size:10px}

/* General layout */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:34px 4px 13px}
.section-head h2{margin:0;font-size:23px;letter-spacing:-.035em}
.section-head p{margin:5px 0 0;color:var(--muted);font-size:11px}
.section-head>span{font-size:10px;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:10px}
.metric strong{display:block;margin-top:7px;font-size:29px;letter-spacing:-.04em}
.metric p{margin:6px 0 0;color:var(--faint);font-size:9px}
.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}

/* Cards / spotlight */
.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:15px;letter-spacing:-.02em}
.card p,.panel p{color:var(--muted);font-size:10px;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:12px;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.06)
}
.live-state{display:flex;align-items:center;gap:6px;font-size:9px;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%)}

/* Service hub */
.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:20px}
.service-card p{margin:0;color:var(--muted);font-size:11px;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:9px}
.arrow{position:absolute;right:20px;bottom:17px;color:var(--faint);font-size:22px;transition:.25s}
.service-card:hover .arrow,.action-card:hover .arrow{transform:translateX(4px);color:var(--text)}

/* Home bento */
.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:50px;letter-spacing:-.055em;font-weight:820;position:relative;z-index:2}
.big-number small{font-size:14px;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:9px;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:9px}
.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:26px;letter-spacing:-.05em}
.progress-ring span{font-size:8px;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:10px}
.status-copy span{display:block;margin-top:3px;color:var(--muted);font-size:8px}
.status-value{margin-left:auto;color:var(--faint);font-size:9px;white-space:nowrap}

/* Activity */
.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:15px}.activity-panel>p{margin:4px 0 0;color:var(--muted);font-size:10px}
.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:9px;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:10px}.event-copy span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Tabs */
.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:11px;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}}

/* Forms / controls */
.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:9px;margin-bottom:8px}
.field-help{display:block;margin-top:6px;color:var(--muted);font-size:10px;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:11px;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:10px}.switch-copy small{display:block;margin-top:3px;color:var(--muted);font-size:8px}
.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:11px;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:10px}
.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:11px}

/* Custom site selection */
.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:9px}
.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:10px;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:12px;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:8px;font-weight:500}

/* Lists / tables */
.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:10px}.list-main small{display:block;margin-top:3px;color:var(--muted);font-size:8px}
.list-value{margin-left:auto;color:var(--faint);font-size:9px;white-space:nowrap}
.badge{padding:7px 9px;border:1px solid var(--line);border-radius:999px;font-size:9px;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:10px;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}

/* Accounts */
.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:13px}.account-card p{margin:6px 0;color:var(--muted);font-size:9px}
.account-card .button-row{margin-top:12px}

/* Download */
.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:11px}.download-meta{margin:8px 0;color:var(--muted);font-size:9px}
.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)}}

/* File drop */
.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:22px;box-shadow:0 14px 30px rgba(107,92,255,.26)
}
.dropzone strong{font-size:14px}.dropzone p{margin:7px 0;color:var(--muted);font-size:9px;line-height:1.6}

/* Diagnostics */
.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:12px}.issue-card p{margin:6px 0 0;color:var(--muted);font-size:9px}
.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:10px;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:12px}.direct-capability-sample p{margin:0;color:var(--muted);font-size:9px;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:9px;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:8px;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:10px/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}

/* Modals */
.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:17px}
.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:9px;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:10px}
.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:11px;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:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-info small{display:block;margin-top:4px;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Toast */
.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:10px;transition:.25s ease
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Login */
.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:56px;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:28px;letter-spacing:-.04em}.login-card>p{color:var(--muted);font-size:11px;line-height:1.7}
.login-error{min-height:18px;color:var(--red);font-size:9px}

/* Footer / reveal */
.footer{display:flex;justify-content:space-between;padding:28px 4px 0;color:var(--faint);font-size:9px}
.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}}

/* Responsive */
@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:42px}
  .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:44px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}



/* =========================================================
   MorePlay Final Hybrid
   Light = Scheme B (crisp SaaS)
   Dark  = Scheme A (premium glass)
   ========================================================= */

/* ---------- LIGHT : crisp / clean / sharp ---------- */
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);
}

/* ---------- DARK : premium glass / depth ---------- */
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);
}

/* ---------- BODY / ATMOSPHERE ---------- */
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}

/* ---------- LIGHT SURFACES ---------- */
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);
}

/* ---------- DARK SURFACES ---------- */
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%);
}

/* ---------- RADII ---------- */
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}

/* ---------- COMMON CONTROL SURFACES ---------- */
.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));
}

/* ---------- NAV ACTIVE ---------- */
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);
}

/* ---------- HOVER ---------- */
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);
}

/* ---------- SPOTLIGHT ---------- */
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%
    );
}

/* ---------- BUTTONS ---------- */
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)}

/* ---------- SWITCH ---------- */
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);
}

/* ---------- FIELDS / LISTS ---------- */
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);
}

/* ---------- SITE SELECT ---------- */
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:11px;
}
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);
}

/* ---------- GLOW / HERO EFFECTS ---------- */
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);
}

/* ---------- TYPOGRAPHY ---------- */
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:21px}
html[data-theme="light"] .metric strong{font-size:27px}

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);
}


/* ---- MorePlay logo system ---- */
.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));
}


/* ---- Home: source settings / site health swap ---- */
.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:8px;
  white-space:nowrap;
}
.source-summary strong{
  display:block;
  margin-top:5px;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.source-arrow{
  position:absolute;
  right:18px;
  bottom:14px;
  z-index:2;
  color:var(--faint);
  font-size:20px;
  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}
}


/* ---- Overview: requested visual elements only ---- */
.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:8px;
}

.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:11px;
  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:10px;
}

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

.feed-row time{
  color:var(--faint);
  font-size:9px;
  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}


/* =========================================================
   Dynamic activity / log source icons
   ========================================================= */
.section-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  transition:.22s ease;
}
.section-link:hover{
  color:var(--text);
  transform:translateX(2px);
}
.section-link span{font-size:14px;line-height:1}

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

.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:7px;
  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)}

/* Full logs page */
.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:9px;
  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:10px;
}
.log-entry-main p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:9px;
  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:7px;
}
.log-entry time{
  align-self:start;
  padding-top:4px;
  color:var(--faint);
  font-size:9px;
  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;
  }
}


/* =========================================================
   Dashboard realtime module cards + STRM timeline
   ========================================================= */
.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:15px;
}
.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:17px;
  letter-spacing:-.03em;
}

/* STRM card stays large. Chart uses time-sorted realtime data. */
.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:8px;
}
.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:9px;
}
.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:7px;
  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:9px;
}
.strm-tooltip-total{
  margin-top:4px;
  color:var(--muted);
  font-size:8px;
}
.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:7px;
}
.strm-tooltip-grid b{
  display:block;
  margin-top:3px;
  color:var(--text);
  font-size:10px;
}
@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;
  }
}


/* =========================================================
   MorePlay 2.7 prototype: multi cat sources + multi TVBox
   ========================================================= */
.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:8px;
  font-weight:800;
  margin-bottom:4px;
}
.multi-source-title-copy strong{
  display:block;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.multi-source-title-copy small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:8px;
}

.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:9px;
  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:9px;
  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:8px;
}
.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:9px;
}
.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:9px;
}

.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:9px;
  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:8px;
  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;
  }
}


/* =========================================================
   MorePlay custom select + refined STRM chart
   ========================================================= */

/* Native select stays in DOM for forms/business logic, but is visually hidden. */
.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:11px;
  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:10px;
  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:10px;
  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 chart is now a compact glass analytics panel inside the existing large card. */
.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:8px;
}
.strm-chart-title>strong{
  color:var(--text);
  font-size:10px;
}
.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:6px;
  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 site policy: effective pool / enabled / blocked / search
   ========================================================= */
.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:22px;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:11px;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:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.t4-policy-item-copy small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:8px;
}
.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:7px;
}
.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:8px;
}
.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:9px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.t4-search-choice small{
  color:var(--faint);
  font-size:7px;
}
.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:10px;
  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:9px;
}

@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 tab restructure: overview / search / policy / links
   ========================================================= */
.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:9px;
  line-height:1.55;
}


/* =========================================================
   T4 policy action buttons — clearer and more polished
   ========================================================= */
.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:9px;
  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:12px;
  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 readability refresh — search + site policy layout
   ========================================================= */
.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:15px;
  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:9px;
}
.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:12px;
  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:8px;
  line-height:1.6;
}
.t4-policy-origin{
  margin-top:10px;
  padding:5px 9px;
  font-size:7px;
  color:color-mix(in srgb,var(--faint) 88%,white 12%);
}
.t4-policy-item .badge{
  min-width:52px;
  justify-content:center;
  font-size:8px;
  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:9px;
}
.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:15px;
  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:9px;
}
.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:11px;
  font-weight:800;
  letter-spacing:-.01em;
}
.t4-search-choice small{
  color:color-mix(in srgb,var(--muted) 84%,white 16%);
  font-size:8px;
  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:11px;
}
.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:10px;
  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 compact policy cards
   ========================================================= */
.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:12px;
  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:8px;
}
.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:8px;
}
.t4-policy-meta-row .t4-policy-origin{
  margin-top:0;
  padding:4px 7px;
  font-size:7px;
}
.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:9px;
}
.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 polish fixes — centered status + light theme selected cards
   ========================================================= */
.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:8px;
  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;
  }
}


/* =========================================================
   Polished center toast + site modal + sites page layout
   ========================================================= */
.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:28px;letter-spacing:-.04em}
.modal-body{padding:18px 24px 24px}
.modal-body>p{font-size:13px;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:15px}
.site-info strong{font-size:15px}
.site-info small{font-size:12px;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:11px;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:12px;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:13px;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:12px;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:11px;line-height:1.5}
.overview-mini strong{display:block;margin-top:8px;font-size:30px;line-height:1;letter-spacing:-.04em}
.overview-mini small{display:block;margin-top:8px;color:var(--faint);font-size:11px}
.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:13px}
.input-helper-card p{margin:6px 0 0;color:var(--muted);font-size:11px;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:22px}
  .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:12px}
  .manage-overview,.input-helper-grid{grid-template-columns:1fr}
}



/* =========================================================
   v16 usability polish for site pages / modal / source forms
   ========================================================= */
.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:13px;
  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:10px;
  font-weight:700;
}
.source-proxy-editor{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
}
.source-proxy-editor input{
  height:40px;
  font-size:11px;
}
.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:9px;
}

@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;
  }
}


/* =========================================================
   v17 input / proxy / toast polish
   ========================================================= */

/* 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:10px;
  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:11px;
  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;
}

/* Make form controls visually explicit instead of looking like raw browser inputs. */
.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:10px;
  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:11px;
  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;
}

/* Custom select should look like the same input control. */
.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:11px;
}
.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 is a clean centered message box, without icon and with centered text. */
.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%);
}

/* Cat source title spacing. */
.multi-source-title-copy strong{
  margin-top:1px;
}


/* =========================================================
   v18 brand + footer + source alignment polish
   ========================================================= */
.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:9px;
  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:8px;
  font-weight:750;
  color:inherit;
  letter-spacing:.01em;
}
.source-count-badge strong{
  display:block;
  margin-top:3px;
  font-size:11px;
  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));
}

/* Improve imported-source header alignment on light theme. */
.multi-source-head{
  align-items:flex-start;
}
.multi-source-title-copy small{
  line-height:1.45;
}

/* Upload panel and trust row alignment */
.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%;
}

/* Selected option should not show the trailing check icon. */
.mf-select-option{
  justify-content:flex-start;
}
.mf-select-option.selected::after{
  display:none;
  content:none;
}

/* Make select menu text more consistent with the system look. */
.mf-select-option{
  font-size:10px;
  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;
}


/* =========================================================
   v19 MorePlay data-binding + staged global-site save
   ========================================================= */
.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);
}

/* Unified site graph */
.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 V23 layout
   ========================================================= */
.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 V24 overview + explicit unsaved state
   ========================================================= */
.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:9px;
}
.fw-overview-item strong{
  display:block;
  margin:9px 0 7px;
  font-size:22px;
  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}
}


/* =========================================================
   v25 theme switch animation
   ========================================================= */
: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)}
  }
}


/* =========================================================
   v26 cinematic theme transition
   ========================================================= */
.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}
  }
}

/* =========================================================
   v26 Emby structured management
   ========================================================= */
.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}
}


/* =========================================================
   v28 Emby device scrolling + account editing
   ========================================================= */
#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;
}


/* =========================================================
   v29 Emby accounts + address polish
   ========================================================= */
.emby-account-head{
  align-items:center;
}
.emby-add-account{
  min-width:112px;
  justify-content:center;
}
.emby-add-account span{
  font-size:16px;
  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:9px}
.emby-account-stat strong{display:block;margin-top:8px;font-size:24px;line-height:1;color:var(--text)}
.emby-account-stat small{display:block;margin-top:8px;color:var(--faint);font-size:8px}

.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:16px;
  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:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emby-account-identity p{margin:5px 0 0;color:var(--muted);font-size:9px}
.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:8px;
  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:8px}
.emby-account-card-meta strong{display:block;margin-top:5px;color:var(--text);font-size:10px}
.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:8px;font-weight:850;letter-spacing:.14em}
.emby-address-copy h3{margin:4px 0 0;font-size:17px}
.emby-address-copy p{margin:5px 0 0;color:var(--muted);font-size:9px}
.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:8px}
.emby-address-url code{display:block;margin-top:6px;color:var(--text);font-size:11px;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:8px}
.emby-address-fact strong{display:block;margin-top:6px;font-size:13px;color:var(--text)}
.emby-address-fact small{display:block;margin-top:5px;font-size:8px;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:9px;font-weight:850}
.emby-client-list strong{display:block;font-size:10px}
.emby-client-list small{display:block;margin-top:4px;color:var(--muted);font-size:8px}
.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}
}


/* =========================================================
   v31 STRM subscription manager
   ========================================================= */
.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:16px;
  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:12px;
}
.strm-subscription-title small{
  color:var(--muted);
  font-size:9px;
  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:9px;
}
.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:11px;
}
.strm-episode-head small{
  color:var(--muted);
  font-size:9px;
}
.button-row.compact{
  margin:0;
  gap:7px;
}
.button-row.compact .btn{
  min-height:30px;
  padding:0 10px;
  font-size:9px;
}
.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:9px;
  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}
}


/* v32 search limit state */
.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;
}


/* =========================================================
   v33 STRM full workflow polish
   ========================================================= */
.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);
}

/* library tree */
.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:11px}
.strm-library-item-head small{font-size:9px;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}

/* download sub tabs */
.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:9px;
  word-break:break-all;
}

/* manual import */
.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:30px;
  font-weight:900;
}
.strm-manual-poster img{width:100%;height:100%;object-fit:cover}
.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:13px}
.strm-manual-result-title small{font-size:9px;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:9px;
}
.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}
}


/* =========================================================
   v34 STRM match + delayed route chooser
   ========================================================= */
.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:9px;
}
.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);
}


/* =========================================================
   v35 STRM settings / route / dropdown fixes
   ========================================================= */

/* Manual-search select menus must be able to escape the panel. */
.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;
}

/* Dynamic route select uses the same MorePlay component as every other select. */
.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;
}

/* Keep poster ratio stable when route controls expand vertically. */
.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;
}

/* MorePlay custom select inside manual route panel */
.strm-manual-route-panel .field{
  overflow:visible;
}
.strm-manual-route-panel .field:has(.mf-select.open){
  z-index:220;
}

/* Slightly clearer save state */
#strmBaseSaveState{
  transition:.18s ease;
}


/* =========================================================
   v36 TMDB options / route select / centered chevrons
   ========================================================= */

/* Any select enhanced by MorePlay is visually replaced everywhere,
   not only when it happens to be inside .field. */
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;
}

/* Dynamic subscription/manual route selects always inherit the same
   component dimensions as the rest of MorePlay. */
.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);
}

/* Font glyphs such as "⌄" sit differently on Windows/macOS.
   Draw the chevrons ourselves so they remain optically centered. */
.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);
}

/* The long TMDB mode labels need a little more room in the menu. */
#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;
}


/* =========================================================
   v37 STRM metadata dropdown clipping fix
   ========================================================= */

/* Generic .panel uses overflow:hidden for card polish.
   TMDB/subscription settings contain floating custom selects,
   so those two cards must allow their menus to escape. */
.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;
}

/* Raise the card that currently owns an open dropdown over its sibling
   and over the subscription list below it. */
.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;
}

/* The following subscription list should stay below floating menus. */
.tab-panel[data-panel-name="meta"] > .strm-subscriptions-panel{
  position:relative;
  z-index:1;
}

/* Keep the long language list usable without letting it grow off-screen. */
#strmTmdbLanguage + .mf-select .mf-select-menu{
  max-height:min(300px,42vh);
  overscroll-behavior:contain;
}


/* =========================================================
   v38 custom TMDB language
   ========================================================= */
.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:9px;
  line-height:1.55;
}
#strmCustomLanguageInput{
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}


/* =========================================================
   v39 STRM local library three-level hierarchy
   Level 1: subscription / site
   Level 2: category
   Level 3: media resource
   ========================================================= */
.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:12px;
}
.strm-source-copy small{
  color:var(--muted);
  font-size:9px;
}
.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;
}

/* Level 2 should look lighter than source group. */
.strm-library-source-body > .strm-library-category{
  background:var(--panel-soft);
  border-radius:13px;
}

/* Level 3 resource rows. */
.strm-library-item-status{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:9px;
}
.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;
  }
}


/* =========================================================
   V39 Mobile Responsive Enhancement
   Desktop appearance remains unchanged.
   Target widths: 360 / 390 / 430 / 768px.
   ========================================================= */

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

@media(max-width:1150px){
  /* The desktop nav is hidden at this breakpoint in V39.
     Provide a real navigation replacement instead of removing access. */
  .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:13px;
  }
  .mobile-nav-brand small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:9px;
  }
  .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:12px;
    font-weight:780;
    transition:.18s ease;
  }
  .mobile-nav-links a::after{
    content:'›';
    color:var(--faint);
    font-size:18px;
  }
  .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:9px;
    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:13px;
  }
  .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;
  }

  /* Secondary tabs stay reachable without wrapping the page. */
  .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: same design, less vertical cost. */
  .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(32px,10.2vw,42px) !important;
    line-height:1.01;
  }
  .hero-copy>p{
    margin-top:13px;
    font-size:11px;
    line-height:1.65;
  }
  .hero-chips{
    gap:6px;
    margin-top:16px;
  }
  .chip{
    padding:7px 9px;
    border-radius:10px;
    font-size:8.5px;
  }
  .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:20px;
  }
  .live-orb{
    width:76px;
    height:76px;
  }
  .live-orb-wrap{
    padding:12px 0 7px;
  }
  .live-title strong{
    font-size:14px;
  }

  /* Overview metrics are much easier to scan as 2x2 on a phone. */
  .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:24px;
  }
  .metric span{font-size:9px}
  .metric p{font-size:8px;line-height:1.45}

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

  /* Cards / panels become tighter but retain the V39 look. */
  .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:15px}
  .module-summary span{font-size:7.5px}
  .panel{
    border-radius:19px;
  }
  .panel-head{
    padding:15px 14px 11px;
    gap:8px;
  }
  .panel-body{
    padding:0 14px 14px;
  }
  .panel-head h3{font-size:14px}
  .panel-head p{font-size:9px;line-height:1.45}

  /* Do not turn every action into a huge full-width button. */
  .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 / code fields stay usable on narrow screens. */
  .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;
  }

  /* Lists avoid overflow from long labels. */
  .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;
  }

  /* Tables are horizontally scrollable instead of breaking the page. */
  .panel-body:has(> .table),
  .panel-body:has(.table){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table{
    min-width:620px;
  }

  /* Modal fit for dynamic browser chrome on iOS/Android. */
  .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:18px !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 stays above the iPhone home indicator. */
  .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:9px;
  }
  .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 site cards */
  .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 is still present but unobtrusive. */
  .footer{
    padding:22px 3px 0;
    gap:5px;
    font-size:8px;
  }
}

@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(30px,10.8vw,38px) !important;
  }
  .hero-tag{
    padding:6px 9px;
    font-size:8.5px;
  }
  .hero-side{
    padding:13px;
  }
  .metrics{
    gap:5px;
  }
  .metric{
    min-height:96px;
    padding:12px;
    border-radius:15px;
  }
  .metric strong{
    font-size:21px;
  }
  .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:10px;
  }
  .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:8.5px;
  }
  .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:12px}
  .top-actions .icon-btn{width:32px;height:32px;flex-basis:32px}
  .hero h1,.hero.compact h1{font-size:29px !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}
}


/* =========================================================
   V39 Mobile R2 - realtime activity + finite logs paging
   ========================================================= */

/* Home recent activity is a fixed latest-N snapshot.
   It never becomes its own vertical scrolling area. */
.activity-feed-panel{
  overflow:hidden;
}
#recentActivityList{
  overflow:visible !important;
  max-height:none !important;
}
#recentActivityList .feed-row{
  flex-shrink:0;
}

/* Logs filters + finite page size. */
.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:8px;
}
.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:9px;
}
.logs-pagination .btn:disabled{
  opacity:.38;
  cursor:not-allowed;
}

/* One page is finite; no endless DOM growth. */
#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;
  }
}


/* =========================================================
   V39 Mobile R3 - shared MorePlay motion language
   ========================================================= */

/* Section entrance ------------------------------------------------ */
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;
  }
}

/* Stagger important card groups after the container enters. */
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;
  }
}

/* Dynamically rendered rows --------------------------------------- */
.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;
  }
}

/* Tabs ------------------------------------------------------------ */
.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}
}

/* Panels / rows / controls --------------------------------------- */
.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);
}

/* More obvious but still restrained feedback on pointer devices. */
@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 feedback ------------------------------------------------- */
.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)}
}

/* Custom select --------------------------------------------------- */
.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}
}

/* Native <details> based sections -------------------------------- */
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 inner content gets a second-stage entrance. */
.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}
}

/* Mobile drawer link stagger ------------------------------------- */
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 page ------------------------------------------------------ */
.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}
}

/* The existing global reduced-motion block remains authoritative.
   These explicit rules also keep the new motion layer safe if CSS order changes. */
@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;
  }
}


/* =========================================================
   V39 Mobile R4 — unified number input + select motion
   ========================================================= */

/* Number input ---------------------------------------------------- */
/* Hide browser-native steppers so Chromium / Firefox / Safari do not
   render different controls inside the same MorePlay field. */
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;
}

/* Select animation ------------------------------------------------ */
.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;
  }
}


/* =========================================================
   V39 Mobile R5 — pronounced dropdown motion
   ========================================================= */

/* Trigger receives a visible focus/open response. */
.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));
}

/* The menu now visibly unfolds from the trigger instead of merely fading in. */
.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);
}

/* A short glow sweep makes the opening action perceptible on dark panels. */
.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;
}

/* Individual options visibly cascade downward. */
.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}

/* Selected option/check visibly settles into place. */
.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;
}

/* Option hover has a tiny slide to reinforce that it is interactive. */
@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);
  }
}

/* On smaller screens use the same reveal but trim stagger duration slightly. */
@media(max-width:760px){
  .mf-select.open .mf-select-option:nth-child(n){
    animation-duration:.30s;
  }
}

/* Preserve accessibility preference. */
@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;
  }
}


/* =========================================================
   V39 Mobile R6 — switch alignment, select clipping, site avatars
   ========================================================= */

/* Switch knob alignment: keep the white dot perfectly centered inside the track. */
.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)}

/* Avoid select dropdown clipping inside panel/card based forms. */
.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 now acts like an auto generated cover from source name. */
.site-avatar{
  text-transform:uppercase;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
}
.site-avatar.site-avatar-text-2{
  font-size:12px;
}
.site-avatar.site-avatar-text-1{
  font-size:15px;
}


/* =========================================================
   V39 Mobile R7 — generated site covers
   ========================================================= */
.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:12px !important;
  font-weight:900;
  letter-spacing:.08em;
  text-indent:.08em;
}
.site-avatar.site-avatar-text-1{
  font-size:16px !important;
  font-weight:900;
}

/* Available sources use cool/healthy treatment. */
.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);
}

/* Abnormal sources stay name-derived, but are constrained to warm warning hues. */
.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:11px !important}
  .site-avatar.site-avatar-text-1{font-size:15px !important}
}


/* =========================================================
   V39 Mobile R8 — TVBox source site accordion motion
   ========================================================= */

/* "Manage N sites" becomes a calm accordion control. */
.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);
}

/* The site collection unfolds like a drawer, with restrained motion. */
.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;
}

/* Existing site pills/cards should feel settled rather than springy. */
.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);
  }
}

/* Remove stronger/bouncier inherited dynamic-entry motion inside TVBox site groups. */
.tvbox-sites-list .mp-dynamic-enter,
.tvbox-sites .mp-dynamic-enter{
  animation:none !important;
}

/* Slight visual separation when expanded; no dramatic shadow jumps. */
.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);
}

/* Mobile keeps exactly the same rhythm. */
@media(max-width:760px){
  .tvbox-sites-list.open,
  .tvbox-sites.open{
    max-height:1100px;
  }
}

/* Accessibility: only a simple fade when reduced motion is requested. */
@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}
}


/* =========================================================
   V39 Mobile R9 — obvious site management + local state motion
   ========================================================= */

/* Make the site manager look unmistakably clickable. */
.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:10px;
  line-height:1.2;
}

.tvbox-sites-manage-copy small{
  color:var(--muted);
  font-size:8px;
  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:8px;
  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);
}

/* Keep the site panel transition restrained and independent. */
.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;
}

/* Site enable/disable no longer refreshes the whole card.
   Only the clicked chip changes state with a short wipe/highlight. */
.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;
  }
}

/* Disable old per-chip stagger/bounce in this area. */
.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;
  }
}


/* =========================================================
   V39 Mobile R12 — global motion modes
   ========================================================= */
.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:15px;letter-spacing:.01em}
.motion-mode-copy small{display:block;margin-top:5px;color:var(--muted);font-size:11px;font-weight:750}
.motion-mode-copy em{display:block;margin-top:12px;color:var(--faint);font-size:10px;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:12px;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:8px;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:10px;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)}

/* Balanced: keep useful interaction feedback, remove continuous and GPU-heavier motion. */
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;
  }
}

/* Performance: all motion off globally, while keeping every control functional. */
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}
}

/* =========================================================
   R12.2 — performance mode custom-select fix
   Keep MorePlay custom selects; only remove motion.
   Full-effect CSS initializes options at opacity:0 for cascade animation.
   When animations are disabled we must explicitly expose them.
   ========================================================= */
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;
}



/* =========================================================
   R12.3 — three-tier motion policy
   full        : every intended effect on
   balanced    : lightweight feedback, heavy/continuous effects reduced
   performance : no animation/transition runtime effects
   ========================================================= */

/* Theme changes are painted once under a compositor overlay. Prevent dozens
   of panels/cards from independently animating CSS-variable color changes. */
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}
}

/* ------------------------------
   GENERAL / BALANCED
   Keep useful micro feedback. Remove effects that continuously repaint large
   areas or animate many rows at once.
   ------------------------------ */
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;
}
/* Tiny status motion is cheap and still communicates activity. */
html[data-motion="balanced"] .status-pill i{animation-duration:2.8s !important}
html[data-motion="balanced"] .wave i{animation-duration:2.0s !important}

/* No cursor-following spotlight in balanced mode. */
html[data-motion="balanced"] .card::before,
html[data-motion="balanced"] .service-card::before,
html[data-motion="balanced"] .action-card::before{
  display:none !important;
}

/* One short section fade/slide; no blur and no child cascade. */
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;
}

/* Controls stay responsive but lose spring/cascade/glow-heavy embellishments. */
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;
}

/* Balanced custom select: same MorePlay UI, simple one-layer reveal only. */
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}
}

/* Reduce hover travel/shadow changes, but keep a small interactive cue. */
@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;
  }
}

/* TVBox/site management: keep only localized state feedback, no sweep/cascade. */
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}

/* Theme feedback in balanced is one overlay only; no ripple/pulse. */
html[data-motion="balanced"] .theme-switch-ripple{display:none !important}

/* ------------------------------
   FULL
   Explicitly restore the intended decorative/opening effects where older
   local quiet-mode rules would otherwise suppress them.
   ------------------------------ */
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;
}

/* ------------------------------
   PERFORMANCE
   CSS already kills animation/transition globally. These rules also remove
   static hover/decorative motion cues so the mode is genuinely effect-free.
   ------------------------------ */
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;
  }
}


/* =========================================================
   R12.4 — site enable / block local state transitions
   Balanced: short local feedback. Full: glow + sweep + rebound.
   Performance: JS does not schedule these effects at all.
   ========================================================= */
.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}
}


/* =========================================================
   R12.5 — search-site selection local feedback
   Performance: no FX. Balanced: short pulse/check feedback.
   Full: rebound + local accent glow + one lightweight sweep.
   ========================================================= */
.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}
}


/* =========================================================
   V39 Mobile R12.6 — click-to-reveal inputs / selects motion tiers
   Applies to inline proxy editors and custom select menus.
   ========================================================= */
.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:hidden;
}
.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}
}


/* =========================================================
   V39 Mobile R12.8 — source/input state + STRM library motion
   ========================================================= */

/* ---------- 猫源 / 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;
  }
}


/* =========================================================
   V39 Mobile R12.9 — STRM subscription/library synced local disclosure
   Subscription cards and concrete media items now share one local animation system.
   No whole-list entrance animation is used for these interactions.
   ========================================================= */

/* The old subscription-only animation would fight the shared JS accordion. */
.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;
  }
}


/* =========================================================
   V39 Mobile R12.10 — STRM dropdown visibility + modal tiers + spotlight fix
   ========================================================= */

/* 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;
  }
}


/* =========================================================
   V39 Mobile R12.11 — opaque STRM route menu + episode selection FX
   ========================================================= */

/* 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;
  }
}


/* =========================================================
   V39 Mobile R12.12 — route menu hard stacking + changelog accordion
   ========================================================= */

/* 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:15px;
  letter-spacing:-.015em;
}
.changelog-release-main small{
  color:var(--muted);
  font-size:10px;
}
.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:11px;
  font-weight:750;
  line-height:1.6;
}
.changelog-release-detail ul{
  margin:9px 0 0;
  padding-left:18px;
  color:var(--muted);
  font-size:10px;
  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;
  }
}


/* =========================================================
   V39 Mobile R12.13 — STRM route FX + service fact refinements
   ========================================================= */

/* Dashboard: five Emby facts keep a balanced 3 + 2 rhythm. */
.module-summary.five{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Route controls are local reveal surfaces, never a page-level animation. */
.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;
  }
}


/* =========================================================
   V39 Mobile R12.14 — logs filter tiers + top mainnav switching tiers
   ========================================================= */
.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;
  }
}


/* =========================================================
   V39 Mobile R12.15 — logs page-size select fix + top-page transition tiers
   ========================================================= */
.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;
  }
}


/* =========================================================
   V39 Mobile R12.16 — faster page transitions + logs select fix + logs view swap tiers
   ========================================================= */
/* 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;
  }
}


/* =========================================================
   V39 Mobile R12.18 — login redesign with repository-auth semantics
   ========================================================= */
.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:58px;
  line-height:.98;
  letter-spacing:-.06em;
}
.login-copy-block p{
  max-width:560px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:12px;
  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:12px;
}
.login-capability-card small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  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:10px;
  font-weight:760;
}
.login-card-head-v2 h2{
  margin:18px 0 0;
  font-size:32px;
  letter-spacing:-.045em;
}
.login-card-head-v2 p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:11px;
  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:9px;
  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:12px;
  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:10px;
  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:9px;
  line-height:1.6;
}
.login-primary-btn{
  width:100%;
  min-height:50px;
  border-radius:16px;
  font-size:11px;
  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:42px}
  .login-copy-block p{font-size:11px}
  .login-capability-grid{grid-template-columns:1fr}
  .login-card-v2{padding:26px 20px}
  .login-card-head-v2 h2{font-size:28px}
  .login-password-shell-v2{grid-template-columns:1fr}
  .login-visibility-btn-v2{width:100%}
}

/* The existing motion tiers remain authoritative for login entrance motion. */
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;
}


/* =========================================================
   V39 Mobile R12.20 — stable log page-size dropdown + row-level live motion
   ========================================================= */
/* Keep the toolbar geometry identical whether the custom select is open or closed. */
.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:118px !important;
  min-width:118px !important;
  flex:0 0 118px !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;
}

/* Remove the old whole-list transition. Logs can poll or stream indefinitely,
   so visual feedback belongs to individual changed rows only. */
.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;
  }
}


/* =========================================================
   V39 Mobile R12.21 — log page-size dropdown stacking fix
   ========================================================= */
/* The menu itself already has a large z-index, but it lives inside the toolbar.
   Raise the whole toolbar stacking context while the page-size select is open,
   otherwise later log rows can still paint above the menu. */
.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;
}


/* =========================================================
   V39 Mobile R12.22 — typography readability refinement
   ========================================================= */
/* Slightly stronger neutral contrast without changing the visual hierarchy. */
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;
}

/* Small interface copy was visually too thin, especially on high-DPI Windows displays. */
.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;
}

/* Keep primary labels crisp without making the interface look bold. */
.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 page readability: retain compact density but increase tonal separation. */
.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;
}

/* Avoid persistent fractional rasterization after animated interactions. */
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);
}

/* On light mode, faint helper text needs a little more contrast against white cards. */
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;
  }
}


/* =========================================================
   V39 Mobile R12.23 — stronger text clarity + TVBox state animation timing fix
   ========================================================= */
/* Slightly stronger contrast than R12.22, especially for 9–11px helper text. */
html[data-theme="light"]{
  --muted:#454e5c;
  --faint:#687382;
}
html[data-theme="dark"]{
  --muted:#c7ceda;
  --faint:#9da7b7;
}

/* Resting UI should not stay on a GPU layer; that can make Windows/Chromium text look soft. */
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;
}

/* Small copy gets one more readability step without increasing layout density. */
.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;
}

/* Keep tiny state/source chips legible against translucent surfaces. */
.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%);
}

/* Full mode: opening cascade only exists during the actual expand action.
   Previously `.show` kept the entry animation permanently eligible, so after
   a site state animation finished the chip could jump again. */
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;
}

/* State feedback starts immediately and ends cleanly; no second movement afterwards. */
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;
  }
}


/* =========================================================
   V39 Mobile R12.24 — TVBox smooth collapse + no post-state jump
   ========================================================= */
/* The old fixed 720/1200px max-height made short site rows appear to pause
   before they actually started collapsing. JS now supplies the real height. */
.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;
  }
}

/* Closing is a single continuous container motion. */
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;
}

/* A hovered chip used to regain translateY(-1px) only after the state
   animation class was removed, creating the late one-frame 'jump'.
   Keep hover feedback visual, but never move the chip. */
@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);
  }
}

/* State animation finishes at its resting geometry; removing the class must
   not trigger a secondary transition. */
.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;
  }
}


/* =========================================================
   V39 Mobile R12.25 — logout action
   ========================================================= */
.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}
}


/* =========================================================
   V39 Mobile R12.26 — STRM overview card redesign
   ========================================================= */
.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:19px;
  letter-spacing:-.035em;
}
.strm-card-header p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
}
.strm-card-kicker{
  display:block;
  color:var(--accent);
  font-size:8px;
  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:8px;
  font-weight:700;
}
.strm-primary-stat>strong{
  margin-top:7px;
  color:var(--text);
  font-size:32px;
  line-height:1;
  letter-spacing:-.055em;
}
.strm-primary-stat>strong small{
  margin-left:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:0;
}
.strm-primary-stat>p{
  margin:7px 0 0;
  color:var(--faint);
  font-size:8px;
}
.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:16px;
  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:20px;
  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}
}


/* =========================================================
   V39 Mobile R12.27 — tighten STRM card lower whitespace
   ========================================================= */
.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;
  }
}


/* =========================================================
   V39 Mobile R12.29 — slightly taller STRM trend chart
   ========================================================= */
.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;
  }
}


/* =========================================================
   V39 Mobile R12.30 — typography clarity pass 3
   ========================================================= */
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;
}

/* Avoid overly thin rasterization on compact Chinese UI labels. */
.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;
}

/* Raise the smallest meaningful UI copy by one step without changing layout geometry. */
.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:9px !important;
  font-weight:600 !important;
  line-height:1.5;
}

/* Frequently scanned compact status/meta text gets a little more physical size. */
.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:9.5px;
  font-weight:600;
  line-height:1.55;
}

/* Keep card descriptions and secondary headings visually separated from faint metadata. */
.card p,
.panel p,
.service-card p,
.section-head p,
.input-helper-card p{
  color:var(--muted);
  font-weight:600;
}

/* Numbers are easier to scan when their strokes are slightly firmer. */
.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:9px !important;
  }
}


/* =========================================================
   V39 Mobile R12.31 — light-theme frosted module surfaces
   ========================================================= */
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;
}


/* =========================================================
   V39 Mobile R12.32 — fine tune STRM arrow and switch knob centering
   ========================================================= */
.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:18px;
}
@media(max-width:760px){
  .strm-card-arrow{
    right:12px;
    bottom:18px;
  }
}


/* =========================================================
   V39 Mobile R12.33 — dark switch centering + STRM arrow alignment
   ========================================================= */
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:22px;
}
@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:20px;
  }
}


/* =========================================================
   V39 Mobile R12.34 — unify STRM arrow baseline with other cards
   ========================================================= */
.strm-card-arrow{
  right:18px;
  bottom:14px;
  font-size:20px;
  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:20px;
  }
}


/* =========================================================
   V39 Mobile R12.35 — global light/dark theme polish pass
   ========================================================= */

/* Theme tokens --------------------------------------------------- */
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);
}

/* Page atmosphere ------------------------------------------------ */
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);
}

/* Primary surfaces ----------------------------------------------- */
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;
}

/* Inner tiles / controls ----------------------------------------- */
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;
}

/* Inputs / selects ------------------------------------------------ */
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;
}

/* Navigation ------------------------------------------------------ */
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;
}

/* Buttons / chips / badges --------------------------------------- */
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;
}

/* Hover depth ----------------------------------------------------- */
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;
}

/* Typography / separators ---------------------------------------- */
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);
}

/* Status dots and arrows ----------------------------------------- */
.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 chart polish ---------------------------------------------- */
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;
}

/* Scrollbars ------------------------------------------------------ */
html[data-theme="light"] *{
  scrollbar-color:rgba(112,126,151,.34) transparent;
}
html[data-theme="dark"] *{
  scrollbar-color:rgba(146,157,180,.25) transparent;
}

/* Keep performance mode visually identical, only motion differs. */
html[data-motion="performance"] .card,
html[data-motion="performance"] .panel,
html[data-motion="performance"] .metric,
html[data-motion="performance"] .service-card{
  transition:none !important;
}

/* =========================================================
   R12.37 — custom select focus-frame fix
   Keep the existing dropdown visuals/motion, but suppress the
   square browser/container focus frame when the select is opened.
   ========================================================= */
.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;
}

/* =========================================================
   V39 Mobile R12.39 — smoother disclosure chevron rotation
   Keep all existing full-motion effects; only synchronize the
   small disclosure arrow with the panel expansion/collapse.
   ========================================================= */
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;
}

/* Subscription rows use a 330 ms disclosure animation. */
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);
}

/* Library category rows use a 360 ms disclosure animation. */
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);
}

/* =========================================================
   V39 Mobile R12.40 — disclosure arrow timing + focus-frame fix
   Keep all existing effects. On collapse the arrow now starts
   immediately instead of waiting for the body animation to finish.
   ========================================================= */

/* Pointer focus must not produce the browser's square focus rectangle.
   Keyboard focus remains visible as a subtle rounded inset ring. */
.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);
}

/* Full-effects mode: the chevron finishes a little before the body.
   The body durations are subscription 330 ms / group 320 ms / category 360 ms. */
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;
}

/* During collapse the section intentionally keeps .open until its measured
   height animation is finished. Override only the arrow direction so it
   starts returning immediately instead of trailing after the panel closes. */
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;
}

/* Keep GPU compositing for only the tiny chevrons during their transition. */
.strm-subscription-chevron::before,
.strm-source-chevron::before,
.strm-tree-chevron::before{
  backface-visibility:hidden;
  transform-origin:50% 50%;
}

/* =========================================================
   V39 Mobile R12.41 — dropdown-matched disclosure motion + clipped glow
   Reuse the custom select chevron timing while keeping every existing effect.
   Purple disclosure feedback is rendered inside the rounded card only.
   ========================================================= */

/* Match the proven MorePlay custom-select arrow motion:
   .mf-select-trigger::after uses 300 ms + the same spring curve. */
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;
}

/* Open direction mirrors the custom select: rotate + a very small spring scale. */
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));
}

/* Collapse starts immediately because JS marks data-strm-disclosure-fx=close
   before the measured-height animation starts. 300 ms finishes before/with
   every disclosure body (320–360 ms), so there is no trailing rotation. */
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;
}

/* Ensure every disclosure highlight is painted inside the same rounded shape.
   This keeps the original sweep/highlight but prevents a square flash. */
.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);
}

/* The old full-effect shell pulse used an external purple shadow. Preserve
   the purple feedback, but turn it into an inset glow so it cannot escape
   the subscription/media selection card's rounded boundary. */
@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);
  }
}

/* Balanced mode gets the same containment rule without changing its timing. */
@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}
}

/* Do not let browser focus painting add a second rectangular flash on mouse click. */
.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;
}

/* =========================================================
   V39 Mobile R12.42 — dropdown-synced disclosure + hard glow clipping
   ========================================================= */

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;
}

/* =========================================================
   V39 Mobile R12.43 — category-only slower purple sweep
   Scope: subscription card + library source/category levels only.
   Concrete media items and every other interaction keep R12.42 timing.
   ========================================================= */
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;
}


/* =========================================================
   V39 Mobile R12.44 — tiered category sweep + jelly disclosure
   Scope only: STRM subscription category + library source/category.
   Full = slower purple sweep + soft multi-step jelly settle.
   Balanced = lighter/shorter feedback. Performance = no motion.
   ========================================================= */

/* Full effects: let the purple highlight travel visibly instead of flashing. */
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;
}

/* Balanced keeps the same language with a shorter, softer sweep. */
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;
}

/* High-performance mode: these category interactions are strictly instant. */
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;
}

/* =========================================================
   V39 Mobile R12.45 — slower full-effect light sweeps only
   Scope:
   1) STRM subscription + library source/category purple sweep.
   2) Site policy/filter cards in full-effect mode.
   Balanced/performance tiers and all interaction logic stay unchanged.
   ========================================================= */

/* Subscription/library category sweep: let the purple band travel more calmly. */
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;
}

/* Site filtering/policy cards: slow only the full-effect glow/sweep language.
   The state change remains responsive; the light now glides instead of flashing. */
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;
}


/* =========================================================
   V39 Mobile R12.46 — clipped site-filter glow + refined full jelly
   Scope:
   1) Full-effects site policy cards: every glow/sweep is painted inside
      the 16px rounded card; no external shadow can escape the boundary.
   2) Full-effects STRM subscription + library source/category only:
      softer multi-stage jelly settle. Balanced/performance stay unchanged.
   ========================================================= */

/* Site filter cards: hard paint containment. Own-element outer box-shadows are
   not clipped by overflow:hidden, so full mode uses inset glow only. */
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);
  }
}

/* Full-only category head jelly: one strong soft rebound followed by two
   decaying settles. Concrete media rows are deliberately excluded. */
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   V39 Mobile R12.47 — cleaner primary buttons + zero-loss perf\n   Visual effects stay intact. Performance work only reduces idle layers and\n   duplicate hot-path calculations; it does not lower any motion tier.\n   ========================================================= */\n\n/* Primary actions: remove the dark/dirty-looking edge shadow. Keep depth with\n   a translucent top highlight and a low-opacity hue-matched glow only. */\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/* Closed custom selects do not need a permanently promoted compositor layer.\n   The exact same full animation is promoted again as soon as the menu opens. */\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/* Released section-reveal layers can return to the normal layer tree after\n   their entrance animation. No visual state or keyframe is changed. */\nhtml.mp-motion-ready .mp-auto-reveal.mp-in-view{will-change:auto}\n
/* =========================================================
   V39 Mobile R12.48 — crisp primary actions + optically centered policy icon
   Scope:
   1) Primary buttons in light/dark themes: no directional black/white outer
      shadow. Depth comes from the gradient and a subtle theme-colored inner
      edge so the label stays visually clean.
   2) Primary labels stay on the normal text raster path during hover; avoid
      whole-button filter/translate compositing that can soften small CJK text.
   3) The red "block" glyph is drawn geometrically so it is truly centered.
   ========================================================= */

.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;
}

/* Keep the label itself crisp. The former generic hover translate and dark
   brightness filter could trigger a newly rasterized text layer on Chromium. */
.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;
}

/* Light theme: no dark drop shadow on the lower/right edge. */
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;
}

/* Dark theme: remove the pale left/top halo as well. Use only a cool accent
   inner edge; there is no white or black directional outer shadow. */
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;
}

/* Site enable/block action icon: the Unicode ⊘ glyph is baseline-biased in
   several Windows fonts. Hide that glyph visually and draw an exact centered
   circle + slash instead, without changing the DOM or action semantics. */
.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%;
}

/* =========================================================
   V39 Mobile R12.49 — intact first-row border + clean beveled primaries
   Scope:
   1) Site enable/block lists: keep the first row inside the scroll paint box
      while preserving hover feedback.
   2) Primary buttons: restore depth using hue-matched internal bevels only;
      no black drop edge in light mode and no white halo in dark mode.
   ========================================================= */

/* The first policy row sits flush against an overflow:auto scrollport. Moving
   it upward by 1px clips its top border. Keep only that first row in place and
   use an inset lift cue instead; every later row retains the existing hover. */
.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;
}

/* Primary actions: all dimensional cues are painted inside the rounded edge.
   This avoids opposite-theme fringes while keeping a clear tactile bevel. */
.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;
}

/* =========================================================
   V39 Mobile R12.50 — geometric check + richer clean primaries
   Scope:
   1) Motion-mode selected check uses a CSS-drawn glyph so the visible mark
      is optically centered instead of inheriting a font baseline.
   2) Primary actions gain depth from hue-matched layered gradients and
      internal bevels only. No black/white directional outer fringe.
   3) Primary-label rasterization stays static and slightly more legible.
   ========================================================= */

/* Selected motion-mode check: the character glyph had a font-dependent
   baseline. Draw the tick geometrically inside the 22px circle instead. */
.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;
}

/* Primary buttons: stronger dimensionality without opposite-theme halos.
   Depth comes entirely from the gradient surface and inset bevels. */
.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:11.4px;
  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;
}

/* =========================================================
   V39 Mobile R12.51 — primary hover sheen + centered performance glyph
   Scope:
   1) Primary actions get a crisp hover animation without moving/rasterizing
      the label layer. The surface gradient shifts and a clipped sheen passes
      through the button; performance mode remains motion-free.
   2) Light-theme primary colors are softened so the action fits the bright
      canvas without looking neon or detached from the surrounding controls.
   3) The three equal performance bars are geometrically centered vertically.
   ========================================================= */

/* Keep the text on a stable raster path; animate only paint layers. */
.btn.primary{
  position:relative;
  isolation:isolate;
  contain:paint;
  font-size:11.8px;
  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;
}

/* Light mode: slightly calmer, cleaner blue/cyan surface. It still reads as
   the primary CTA, but no longer jumps out of the pale glass UI. */
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;
}

/* Dark mode keeps the richer surface, with the same paint-only hover cue. */
html[data-theme="dark"] .btn.primary:hover{
  background-position:0 0,72% 55% !important;
}

/* Balanced keeps the same feedback but trims the sweep intensity/duration. */
html[data-motion="balanced"] .btn.primary::after{
  opacity:0;
  transition-duration:.28s,.12s;
}
html[data-motion="balanced"] .btn.primary:hover::after{
  opacity:.55;
}

/* Performance remains genuinely effect-free. */
html[data-motion="performance"] .btn.primary::after{
  display:none !important;
}

/* Performance icon: all three bars are equal-height indicators, so bottom
   alignment makes the symbol look visibly low. Center that icon only; the
   balanced/full icons intentionally retain their varying bottom baseline. */
.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;
}


/* =========================================================
   R12.55 STRM subscription search modal
   ========================================================= */
.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:9px}
.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:9px;
  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}
}


/* R12.55: expose backend download diagnostics without changing the existing task card structure. */
.download-detail-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  margin:9px 0 2px;
  color:var(--muted);
  font-size:9px;
  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:9px;
  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:9px}
.strm-manual-result-description{
  margin:0;
  color:var(--muted);
  font-size:9px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}


/* R12.55.1: surface the backend subscription error without changing card hierarchy. */
.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:9px;
  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: 10px; font-weight: 500; line-height: 1.6; }