

/* ── 玻璃：面板 / 弹层 ── */
#gx-island #gi-sheet,#gx-island #gi-alert{
  background:radial-gradient(130% 60% at 18% 0%,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(24,36,72,0.86) 0%,rgba(9,15,33,0.93) 100%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.9)!important;backdrop-filter:blur(28px) saturate(1.9)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px rgba(201,168,106,.16),0 24px 60px -18px rgba(2,8,24,.72),0 6px 18px -6px rgba(2,8,24,.45)!important}
/* ── 玻璃：胶囊（morph 层要和胶囊同一身衣服，否则展开收起那一下会闪色） ── */
#gx-island .gi-cap,#gx-island .w443-morph{
  background:radial-gradient(130% 60% at 18% 0%,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(24,36,72,0.86) 0%,rgba(9,15,33,0.93) 100%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.9)!important;backdrop-filter:blur(24px) saturate(1.9)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05),
    0 14px 34px -12px rgba(2,8,24,.6),0 3px 10px -4px rgba(2,8,24,.35)!important;
  transition:box-shadow .45s ease}
#gx-island[data-w481-playing="1"] .gi-cap{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(201,168,106,.42),
    0 14px 34px -12px rgba(2,8,24,.6),0 0 22px -6px rgba(201,168,106,.45)!important}

/* ── 字色：变透之后必须一起提亮（自检里有算式） ── */
#gx-island .gi-rk{color:rgb(192,203,224)!important}
#gx-island #gi-k{color:rgb(234,205,146)!important}

/* ── 气泡：分段容器 ── */
#gx-island .gi-seg,#gx-island #gx-tts-rates{
  background:rgba(255,255,255,0.06)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.18)!important;border-radius:15px!important}
#gx-island #gi-voice button,#gx-island #gx-tts-rates button,#gx-island #gi-modes button{
  color:rgb(214,222,236);border-radius:11px!important;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,box-shadow .25s ease!important}
/* 未选中项的男女小字：底变透后按新底重算的门槛（见文件头） */
#gx-island #gi-voice button.w443-v[aria-checked="false"]>small{color:rgb(238,242,248)!important;opacity:0.82!important}
/* ── 气泡：选中态金泡（渐变只往亮走，最暗点＝原金） ── */
#gx-island #gi-voice button[aria-checked="true"],#gx-island #gx-tts-rates button.act,#gx-island #gi-modes button.act{
  background:linear-gradient(180deg,rgb(223,195,137) 0%,rgb(201,168,106) 55%,rgb(201,168,106) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(120,90,40,.25),
    0 6px 16px -6px rgba(201,168,106,.7)!important}
/* 按下：弹一下 */
#gx-island #gi-voice button:active,#gx-island #gx-tts-rates button:active,#gx-island #gi-modes button:active,
#gx-island .gi-foot a:active,#gx-island #gi-card:active,#gx-island #gi-close:active,
#gx-island #gi-prev:active,#gx-island #gi-next:active,#gx-island #gi-stop:active{transform:scale(.93)!important;transition-duration:.08s!important}

/* ── 气泡：播放键是一颗带高光的金珠 ── */
#gx-island #gi-play,#gx-island #gi-pp{
  background:radial-gradient(circle at 34% 26%,#fbe9bf 0%,#e2c48a 30%,#c9a86a 62%,#b0904f 100%)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 4px rgba(90,64,24,.3),
    0 6px 16px -6px rgba(201,168,106,.75)!important;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease!important}
#gx-island #gi-play:active,#gx-island #gi-pp:active{transform:scale(.9)!important;transition-duration:.08s!important}
#gx-island[data-w481-playing="1"] #gi-pp{animation:w482Breathe 2.8s ease-in-out infinite}
@keyframes w482Breathe{
  0%,100%{box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 4px rgba(90,64,24,.3),0 0 0 0 rgba(201,168,106,.0),0 6px 16px -6px rgba(201,168,106,.75)}
  50%{box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 4px rgba(90,64,24,.3),0 0 0 9px rgba(201,168,106,.13),0 8px 22px -6px rgba(201,168,106,.85)}}

/* ── 气泡：关闭键、明信片键 ── */
#gx-island #gi-close{background:rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 6px -2px rgba(0,0,0,.35)!important;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1)!important}
#gx-island #gi-card{background:linear-gradient(180deg,rgba(201,168,106,.24),rgba(201,168,106,.12))!important;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.32),inset 0 0 0 1px rgba(201,168,106,.5),0 6px 16px -8px rgba(201,168,106,.6)!important;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1)!important}

/* ── 可访问性：要求少透明 → 直接给实底；不支持毛玻璃 → 提高不透明度 ── */
@media (prefers-reduced-transparency:reduce){
  #gx-island #gi-sheet,#gx-island #gi-alert,#gx-island .gi-cap,#gx-island .w443-morph{
    background:rgb(12,20,42)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #gx-island #gi-sheet,#gx-island #gi-alert,#gx-island .gi-cap,#gx-island .w443-morph{
    background:linear-gradient(180deg,rgba(24,36,72,.97),rgba(9,15,33,.98))!important}}
@media (prefers-reduced-motion:reduce){
  #gx-island[data-w481-playing="1"] #gi-pp{animation:none}
  #gx-island *{transition-duration:0s!important}}

/* ── ① 胶囊播放键外圈进度环 ── */
#gi-play{position:relative}
#gi-play .w481-ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);
  transform:rotate(-90deg);pointer-events:none;overflow:visible}
#gi-play .w481-ring circle{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke}
#gi-play .w481-ring-bg{stroke:rgba(255,255,255,.12)}
#gi-play .w481-ring-fg{stroke:#f0d49a;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
#gx-island[data-w481-has="0"] #gi-play .w481-ring{opacity:0}
#gx-island[data-w481-has="1"] #gi-play .w481-ring{opacity:1;transition:opacity .3s ease}

/* ── ② 面板进度条 ── */
#w481-seek{display:flex;align-items:center;gap:6px;margin:4px 2px 10px;user-select:none;-webkit-user-select:none}
#w481-seek .w481-t{font:600 11.5px/1 -apple-system,"PingFang SC",sans-serif;font-variant-numeric:tabular-nums;
  color:rgb(192,203,224);min-width:34px;text-align:center}
#w481-seek .w481-cur{color:#f0d49a}
#w481-seek .w481-skip{flex:0 0 auto;position:relative;width:44px;height:44px;border:0;border-radius:50%;
  background:transparent;color:rgb(222,229,242);display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .2s}
#w481-seek .w481-skip svg{width:22px;height:22px}
#w481-seek .w481-skip[data-d="15"] svg{transform:scaleX(-1)}
#w481-seek .w481-skip i{position:absolute;font:700 8px/1 -apple-system,sans-serif;font-style:normal;top:52%;left:50%;
  transform:translate(-50%,-50%);letter-spacing:-.02em}
#w481-seek .w481-skip:active{transform:scale(.88);background:rgba(255,255,255,.08)}
#w481-seek .w481-track{position:relative;flex:1 1 auto;height:44px;cursor:pointer;touch-action:none;outline:none}
#w481-seek .w481-rail{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;
  background:rgba(255,255,255,.14);overflow:hidden;transition:height .18s ease,margin-top .18s ease}
#w481-seek .w481-buf{position:absolute;left:0;top:0;bottom:0;width:var(--b,0%);background:rgba(255,255,255,.14)}
#w481-seek .w481-fill{position:absolute;left:0;top:0;bottom:0;width:var(--f,0%);
  background:linear-gradient(90deg,#c9a86a,#f0d49a)}
#w481-seek .w481-knob{position:absolute;top:50%;left:var(--f,0%);width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7e3,#f0d49a 55%,#c9a86a);
  box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 3px rgba(240,212,154,.18);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
#w481-seek .w481-tip{position:absolute;bottom:40px;left:var(--f,0%);transform:translateX(-50%) scale(.8);opacity:0;
  padding:5px 9px;border-radius:10px;background:rgba(240,212,154,.96);color:#0b1630;
  font:700 12px/1 -apple-system,sans-serif;font-variant-numeric:tabular-nums;pointer-events:none;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.45);transition:opacity .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}
#w481-seek[data-drag="1"] .w481-rail{height:8px;margin-top:-4px}
#w481-seek[data-drag="1"] .w481-knob{transform:scale(1.45)}
#w481-seek[data-drag="1"] .w481-tip{opacity:1;transform:translateX(-50%) scale(1)}
#w481-seek[data-drag="1"] .w481-fill,#w481-seek[data-drag="1"] .w481-knob,#w481-seek[data-drag="1"] .w481-tip{transition:none}
#w481-seek .w481-track:focus-visible .w481-knob{box-shadow:0 0 0 3px rgba(240,212,154,.75)}
#w481-seek[data-off="1"]{opacity:.42}
#w481-seek[data-off="1"] .w481-track,#w481-seek[data-off="1"] .w481-skip{pointer-events:none}
#w481-seek[data-off="1"] .w481-knob{opacity:0}

/* ── ④ 下拉收起时的跟手 ── */
#gi-sheet[data-w481-pull="1"]{transition:none!important}
#gi-sheet.w481-snap{transition:translate .42s cubic-bezier(.34,1.4,.64,1)!important}
#gi-title.w481-snap{transition:translate .38s cubic-bezier(.34,1.56,.64,1)}

/* ── ⑦ 面板展开时藏起浮窗章节盘（线上实测它压在面板上） ── */
#w451-dial{transition:opacity .2s ease}
html[data-w481-sheet="1"] #w451-dial{opacity:0!important;pointer-events:none!important}

@media (prefers-reduced-motion:reduce){
  #w481-seek *,#gi-play .w481-ring-fg{transition:none!important}
  #gi-sheet.w481-snap,#gi-title.w481-snap{transition:none!important}
}
