/* 绿果TV 设计基础 —— 与 TV 版同一套配色：
 * 浅色 iOS 分组灰 #F2F2F7 + 叶绿 #2DB35A；深色近黑 #0D1110 + 青柠 #C6ED92。 */
:root{
  --bg:#f2f2f7;--surface:#fff;--surface-2:#f2f3f5;--surface-3:#e7e8ec;
  --fill:rgba(60,60,67,.08);--fill-2:rgba(60,60,67,.05);--fill-3:rgba(60,60,67,.14);--sep:rgba(60,60,67,.14);
  --text:#1c1c1e;--text-2:#55555a;--text-3:#8a8a8e;--text-4:#b0b0b5;
  --primary:#2db35a;--primary-ink:#fff;--primary-text:#1c9a47;--primary-soft:rgba(45,179,90,.14);--primary-glow:rgba(45,179,90,.34);
  --gold:#b07a14;--danger:#e5484d;--skeleton:#e3e3e8;--skeleton-hi:#fbfbfd;
  /* 材质 */
  --glass:rgba(255,255,255,.66);--glass-strong:rgba(255,255,255,.86);--glass-line:rgba(255,255,255,.75);--glass-edge:rgba(0,0,0,.06);
  --side-bg:rgba(250,250,253,.62);
  --ring:inset 0 0 0 .5px rgba(0,0,0,.08);
  --shadow-1:0 1px 2px rgba(16,24,40,.05),0 6px 20px rgba(16,24,40,.06);
  --shadow-2:0 12px 32px rgba(16,24,40,.14),0 2px 8px rgba(16,24,40,.06);
  --shadow-3:0 30px 80px rgba(16,24,40,.26),0 4px 14px rgba(16,24,40,.08);
  --ambient-1:rgba(45,179,90,.16);--ambient-2:rgba(90,160,255,.12);
  --ease:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --font:system-ui,-apple-system,"SF Pro Text","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0d1110;--surface:#1a1f1d;--surface-2:#242b28;--surface-3:#2f3833;
  --fill:rgba(255,255,255,.12);--fill-2:rgba(255,255,255,.07);--fill-3:rgba(255,255,255,.2);--sep:rgba(255,255,255,.12);
  --text:#f5f7f6;--text-2:#bfc8c4;--text-3:#8a938f;--text-4:#6e756f;
  --primary:#c6ed92;--primary-ink:#14200b;--primary-text:#c6ed92;--primary-soft:rgba(198,237,146,.15);--primary-glow:rgba(198,237,146,.28);
  --gold:#e8b65a;--skeleton:#1f2624;--skeleton-hi:#3a4642;
  --glass:rgba(32,38,35,.62);--glass-strong:rgba(32,38,35,.88);--glass-line:rgba(255,255,255,.1);--glass-edge:rgba(255,255,255,.08);
  --side-bg:rgba(24,29,27,.58);
  --ring:inset 0 0 0 .5px rgba(255,255,255,.1);
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.28);
  --shadow-2:0 12px 32px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
  --shadow-3:0 30px 80px rgba(0,0,0,.7),0 4px 14px rgba(0,0,0,.4);
  --ambient-1:rgba(198,237,146,.09);--ambient-2:rgba(110,168,255,.07);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;text-align:inherit}
button:disabled{cursor:default;opacity:.4}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus{outline:0}
:focus-visible{outline:2.5px solid var(--primary);outline-offset:2px;border-radius:12px}
::selection{background:var(--primary-soft)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--fill-3);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-4);background-clip:content-box;border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon.fill{fill:currentColor;stroke:none}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* iOS 连续圆角（支持的浏览器自动启用） */
@supports (corner-shape:squircle){
  .sq,.poster,.panel,.glass,.btn,.chip,.card .poster,.hero,.tile .pv,.menu,#peek,.slist{corner-shape:squircle}
}

/* ---------- 骨架屏：同步流光（所有骨架共用一个时间轴） ---------- */
.skel{position:relative;overflow:hidden;background:var(--skeleton);border-radius:12px}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--skeleton-hi) 42%,var(--skeleton-hi) 52%,transparent 74%);background-size:300vw 100%;background-attachment:fixed;animation:shimmer 1.6s linear infinite}
.skel{animation:breathe 2.4s var(--ease-io) infinite}
@keyframes shimmer{from{background-position:-150vw 0}to{background-position:150vw 0}}
@keyframes breathe{50%{filter:brightness(1.035)}}
.skel.t{height:14px;border-radius:7px}
.skel.t.s{width:55%}.skel.t.m{width:78%}

/* ---------- 图片：懒加载 + 模糊缩略图渐进清晰 ---------- */
.im{position:absolute;inset:0;display:block;overflow:hidden;background:var(--skeleton)}
.im .lq{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(14px) saturate(1.2);opacity:0;transition:opacity .35s var(--ease)}
.im .lq.on{opacity:1}
.im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s var(--ease),transform 1s var(--ease)}
.im img.on{opacity:1;transform:none}
.im.fail::after{content:"";position:absolute;inset:0;background:var(--skeleton)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 20px;border-radius:999px;background:var(--surface);color:var(--text);font-weight:600;font-size:15px;white-space:nowrap;box-shadow:var(--shadow-1),var(--ring);transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease),background .2s,filter .2s}
.btn .icon{font-size:18px}
.btn.primary{background:var(--primary);color:var(--primary-ink);box-shadow:0 6px 18px var(--primary-glow)}
.btn.ghost{background:var(--fill);box-shadow:none}
.btn.glass{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
.btn.lg{height:48px;padding:0 28px;font-size:16px}
.btn.round{width:48px;padding:0}
@media (hover:hover){.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}.btn.ghost:hover{background:var(--fill-3)}.btn.glass:hover{background:rgba(255,255,255,.28)}}
.btn:active{transform:scale(.95);transition-duration:.1s}

/* ---------- 提示条 ---------- */
#toast{position:fixed;left:50%;top:18px;z-index:9999;transform:translate(-50%,-160%);padding:10px 20px;border-radius:999px;background:var(--glass-strong);color:var(--text);font-weight:600;font-size:14.5px;box-shadow:var(--shadow-2),var(--ring);backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);transition:transform .55s var(--ease-spring);max-width:min(90vw,520px);text-align:center;pointer-events:none}
#toast.on{transform:translate(-50%,0)}

/* ---------- 登录：从账号按钮旁弹出的小卡片，不遮全屏 ---------- */
.login{position:fixed;inset:0;z-index:500}
.login .panel{position:absolute;right:var(--gut,40px);top:calc(var(--nav,68px) - 6px);width:320px;padding:26px 24px 20px;border-radius:28px;background:var(--glass-strong);box-shadow:var(--shadow-3),inset 0 0 0 .5px var(--glass-edge),inset 0 1px 0 var(--glass-line);backdrop-filter:blur(44px) saturate(1.9);-webkit-backdrop-filter:blur(44px) saturate(1.9);text-align:center;transform-origin:top right;animation:popL .55s var(--ease-spring) both}
@keyframes popL{from{opacity:0;transform:translateY(-8px) scale(.92)}}
.login.out .panel{animation:popOut .24s var(--ease) both}
@keyframes popOut{to{opacity:0;transform:translateY(-6px) scale(.95)}}
.login .lclose{position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--fill);color:var(--text-2);display:grid;place-items:center;font-size:14px;transition:background .2s,transform .3s var(--ease-spring)}
.login .lclose:hover{background:var(--fill-3);transform:rotate(90deg)}
.login .logo{width:48px;height:48px;margin:0 auto 8px;border-radius:13px;filter:drop-shadow(0 10px 18px var(--primary-glow))}
.login h1{font-size:18px;letter-spacing:.3px}
.login p{color:var(--text-3);margin-top:4px;font-size:13px;line-height:1.5}
.login .qr{position:relative;width:196px;height:196px;margin:18px auto 12px;border-radius:22px;background:#fff;padding:12px;box-shadow:var(--shadow-1)}
.login .qr img{width:100%;height:100%;image-rendering:pixelated}
.login .qr .veil{position:absolute;inset:0;border-radius:22px;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#222;font-weight:600;text-align:center;opacity:0;pointer-events:none;transition:opacity .35s}
.login .qr .veil.on{opacity:1;pointer-events:auto}
.login .hint{min-height:22px;font-weight:600}
.login .hint.ok{color:var(--primary-text)}
.login .count{font-size:12.5px;color:var(--text-3);margin-top:4px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}