:root{--bg:#0f1115;--bg2:#171a21;--bg3:#20242e;--line:#2a2f3a;--fg:#e8eaf0;--fg2:#9aa1b0;--brand:#ff5a3c;--radius:10px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
.container{max-width:1280px;margin:0 auto;padding:0 16px}
main.container{padding-bottom:48px}

/* 頁首 */
.site-header{position:sticky;top:0;z-index:20;background:rgba(15,17,21,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:16px;min-height:54px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.logo{font-size:20px;font-weight:800;color:var(--brand);white-space:nowrap}
.logo span{font-size:11px;font-weight:500;color:var(--fg2);margin-left:6px}
.mainnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{padding:6px 11px;border-radius:999px;color:var(--fg2);white-space:nowrap}
.mainnav a.is-active,.mainnav a:hover{color:var(--fg);background:var(--bg3)}
.searchbar{display:flex;background:var(--bg3);border-radius:999px;overflow:hidden}
.searchbar input{width:190px;background:none;border:0;outline:0;color:var(--fg);padding:7px 14px;font:inherit}
.searchbar button{padding:0 14px;color:var(--fg2);white-space:nowrap;flex:none}
@media(max-width:720px){
  .site-header__inner{gap:8px}
  .mainnav{order:3;flex-basis:100%}
  .searchbar{flex:1}.searchbar input{width:100%;min-width:0}
}

/* 區塊與卡片 */
.page-head{padding:20px 0 6px}.page-head h1{font-size:22px}
.section,.block{margin-top:26px}
.section__head,.block__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.section__title,.block__title{font-size:18px;font-weight:700;white-space:nowrap}
.section__tabs{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;color:var(--fg2);font-size:13px;white-space:nowrap;flex:1;min-width:0}
.section__tabs a:hover,.section__more:hover{color:var(--brand)}
.section__more{margin-left:auto;color:var(--fg2);font-size:13px;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:18px 12px}
@media(max-width:520px){.grid{grid-template-columns:repeat(3,1fr);gap:14px 8px}}
.grid--row{display:flex;overflow-x:auto;gap:12px;scrollbar-width:thin;padding-bottom:6px}
.grid--row>*{flex:0 0 132px}
@media(max-width:520px){.grid--row>*{flex-basis:108px}}
.poster{display:block;min-width:0}
.poster__thumb{position:relative;display:block;aspect-ratio:5/7;border-radius:var(--radius);overflow:hidden;background:var(--bg3)}
.poster__thumb img{width:100%;height:100%;object-fit:cover}
.poster__status{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 5px;font-size:12px;text-align:right;background:linear-gradient(transparent,rgba(0,0,0,.8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poster__rank{position:absolute;left:0;top:0;min-width:24px;padding:1px 6px;background:var(--brand);font-weight:700;font-size:13px;text-align:center;border-bottom-right-radius:8px}
.poster__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25)}
.poster__bar i{display:block;height:100%;background:var(--brand)}
.poster__title{margin-top:7px;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poster__meta{font-size:12px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poster:hover .poster__title{color:var(--brand)}
.empty{color:var(--fg2);padding:28px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips a{padding:4px 12px;border-radius:999px;background:var(--bg3);font-size:13px}

/* 篩選、分頁 */
.filter{margin-top:14px;background:var(--bg2);border-radius:var(--radius);padding:6px 12px}
.filter__row{display:flex;gap:10px;padding:6px 0;align-items:baseline}
.filter__row+.filter__row{border-top:1px solid var(--line)}
.filter__label{color:var(--fg2);font-size:13px;white-space:nowrap}
.filter__opts{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.filter__opts a{padding:2px 10px;border-radius:999px;font-size:13px}
.filter__opts a.is-active{background:var(--brand);color:#fff}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:30px}
.pager a,.pager span{min-width:38px;padding:7px 12px;text-align:center;border-radius:8px;background:var(--bg2)}
.pager .active{background:var(--brand)}

/* 按鈕、提示 */
.btn{display:inline-block;padding:10px 20px;border-radius:999px;background:var(--brand);color:#fff;font-weight:600}
.btn--ghost{background:var(--bg3);color:var(--fg);font-weight:500}
.btn[disabled]{opacity:.5}
.notice{background:var(--bg2);border-radius:var(--radius);padding:14px;margin:8px 0 20px;font-size:14px;color:var(--fg2)}
.notice p{margin-bottom:10px}.notice strong,.notice b{color:var(--fg)}
.notice__state{margin-left:10px;font-size:13px}

/* 詳細頁 */
.crumb{padding:14px 0;color:var(--fg2);font-size:13px}.crumb .sep{margin:0 6px}
.detail{display:flex;gap:18px}
.detail__poster{flex:0 0 180px}
.detail__title{font-size:24px;line-height:1.3}
.detail__meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin-top:10px;font-size:14px}
.detail__meta .full{grid-column:1/-1}
.detail__meta .k{color:var(--fg2)}
.detail__actions{margin-top:16px}
.desc{color:#c8ccd6;font-size:14px}
@media(max-width:600px){.detail__poster{flex-basis:108px}.detail__title{font-size:19px}.detail__meta{grid-template-columns:1fr;font-size:13px}}
.route-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}
.route-tabs button{flex:none;padding:6px 14px;border-radius:999px;background:var(--bg2);white-space:nowrap;font-size:14px}
.route-tabs button.is-active{background:var(--brand);color:#fff}
.route-tabs small{margin-left:6px;opacity:.6;font-size:11px}
.route-tabs--col{flex-direction:column;overflow:visible}
.route-tabs--col button{text-align:left;border-radius:8px}
.hd{margin-left:5px;padding:0 4px;border-radius:3px;background:#f5b301;color:#000;font-size:10px;font-style:normal;font-weight:700}
.eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.eps[hidden]{display:none}
.ep{display:block;padding:9px 4px;border-radius:8px;background:var(--bg2);text-align:center;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.ep.is-seen{color:var(--fg2)}
.ep.is-seen::after{content:"";position:absolute;right:6px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--fg2)}
.ep.is-active,.ep.is-last{background:var(--brand);color:#fff}
.ep.is-active::after,.ep.is-last::after{display:none}
.hist{position:relative}
.hist__del{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.65);font-size:12px}

/* 播放頁 */
.play-head{margin-top:14px}
.play-title{font-size:18px}.play-title span{color:var(--fg2);font-weight:400;margin-left:6px}
.play-tip{margin-top:4px;color:var(--fg2);font-size:12px}
@media(max-width:720px){.page-play main.container{padding-left:0;padding-right:0}.page-play main>*:not(.gp){margin-left:14px;margin-right:14px}}

/* ---------- 播放器 ---------- */
.gp{position:relative;margin-top:12px;aspect-ratio:16/9;max-height:78vh;width:100%;background:#000;overflow:hidden;outline:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color:#fff;border-radius:var(--radius)}
@media(max-width:720px){.gp{margin-top:0;border-radius:0}}
.gp.is-full{aspect-ratio:auto;max-height:none;height:100%;border-radius:0;margin:0}
.gp video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.gp svg{width:100%;height:100%;fill:currentColor;display:block}
.gp__dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.gp__gesture{position:absolute;inset:0;touch-action:pan-y}
.gp.is-full .gp__gesture{touch-action:none}

.gp__ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;opacity:0;transition:opacity .18s;background:linear-gradient(rgba(0,0,0,.6),transparent 26%,transparent 68%,rgba(0,0,0,.72))}
.gp.is-ui .gp__ui{opacity:1}
.gp.is-ui .gp__ui button,.gp.is-ui .gp__bar{pointer-events:auto}
.gp__top,.gp__row{display:flex;align-items:center;gap:6px}
.gp__top{padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top))}
.gp__title{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:4px}
.gp__back{display:none}.gp.is-full .gp__back{display:block}
.gp__btn{width:40px;height:40px;padding:8px;border-radius:50%;flex:none}
.gp__btn:active,.gp__txt:active{background:rgba(255,255,255,.18)}
.gp__mid{display:flex;align-items:center;justify-content:center;gap:9%}
.gp__btn--l{width:48px;height:48px;padding:9px}
.gp__btn--xl{width:66px;height:66px;padding:13px;background:rgba(0,0,0,.4)}
.gp.is-loading .gp__btn--xl,.gp.is-error .gp__mid,.gp.is-sheet .gp__mid{visibility:hidden}
.gp__bottom{padding:0 12px 6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
.gp.is-full .gp__bottom,.gp.is-full .gp__top{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.gp__time{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gp__sp{flex:1}
.gp__txt{padding:7px 9px;border-radius:8px;font-size:14px;white-space:nowrap}
.gp__bar{padding:12px 0;cursor:pointer;touch-action:none}
.gp__track{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.28)}
.gp__buf,.gp__fill{position:absolute;left:0;top:0;height:100%;border-radius:2px}
.gp__buf{background:rgba(255,255,255,.42)}
.gp__fill{background:var(--brand)}
.gp__knob{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--brand);transition:transform .12s}
.gp.is-scrub .gp__knob{transform:scale(1.5)}
.gp.is-scrub .gp__track{height:6px}

/* 點兩下的波紋 */
.gp__ripple{position:absolute;top:0;bottom:0;width:38%;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;background:rgba(255,255,255,.16)}
.gp__ripple--l{left:0;border-radius:0 50% 50% 0/0 100% 100% 0}
.gp__ripple--r{right:0;border-radius:50% 0 0 50%/100% 0 0 100%}
.gp__ripple b{font-size:17px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.gp__ripple.is-on{animation:gp-ripple .75s ease-out forwards}
@keyframes gp-ripple{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}}

.gp__hint{position:absolute;left:50%;top:16%;transform:translateX(-50%);padding:7px 16px;border-radius:999px;background:rgba(0,0,0,.72);font-size:15px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;font-variant-numeric:tabular-nums}
.gp__hint.is-on{opacity:1}
.gp__spinner{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:gp-spin .8s linear infinite;pointer-events:none;display:none}
.gp.is-loading:not(.is-error):not(.is-casting) .gp__spinner{display:block}
@keyframes gp-spin{to{transform:rotate(360deg)}}

.gp__msg,.gp__cast{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 20px 70px;text-align:center;pointer-events:none}
.gp__msg{background:rgba(0,0,0,.8)}
.gp.is-error .gp__msg,.gp.is-casting .gp__cast{display:flex}
.gp__msg button,.gp__cast button{pointer-events:auto;padding:8px 20px;border-radius:999px;background:rgba(255,255,255,.16);font-size:14px}
.gp__cast{background:#0b0d12}
.gp__cast-ico{width:54px;height:54px;color:var(--brand)}
.gp__cast-name{font-size:16px;font-weight:600}
.gp__cast-state{color:#aab;font-size:13px;min-height:1.5em}
.gp.is-casting .gp__mid{position:absolute;left:0;right:0;bottom:64px}
.gp.is-casting .gp__btn--xl{width:52px;height:52px;padding:10px}
.gp.is-casting video{visibility:hidden}

/* 面板 */
.gp__sheet{position:absolute;top:0;right:0;bottom:0;width:min(360px,86%);background:rgba(18,20,26,.97);display:flex;flex-direction:column;z-index:3}
.gp__sheet[hidden]{display:none}
.gp__sheet-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.gp__sheet-head button{width:32px;height:32px}
.gp__sheet-body{flex:1;overflow-y:auto;padding:10px 14px 18px;overscroll-behavior:contain}
.gp__sheet-body h4{margin:12px 0 7px;font-size:12px;font-weight:500;color:var(--fg2)}
.gp__sheet-body .eps{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
.gp__sheet-body .ep{background:var(--bg3)}
.gp__sheet-body .ep.is-active{background:var(--brand)}
.gp__opts{display:flex;flex-wrap:wrap;gap:7px}
.gp__opts button{padding:6px 13px;border-radius:999px;background:var(--bg3);font-size:13px}
.gp__opts button.is-active{background:var(--brand)}
.gp__note{color:var(--fg2);font-size:14px;padding:8px 0}
.gp__devs{display:flex;flex-direction:column;gap:8px}
.gp__devs button{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;background:var(--bg3);text-align:left}
.gp__devs svg{width:26px;height:26px;flex:none}
.gp__devs small{display:block;color:var(--fg2);font-size:12px}
.gp__link{margin-top:14px;color:var(--brand);font-size:14px}

/* 線路測速 */
.route-tabs button.is-bad{opacity:.42}
.route-tabs--col button{display:flex;flex-direction:column;gap:2px}
.route-tabs--col em{font-style:normal;font-size:12px;opacity:.75}
.gp__probe{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.gp__probe .gp__link{margin-top:0}
.gp__probe .gp__link[disabled]{opacity:.6}
.gp__probe span{font-size:12px;color:var(--fg2)}

/* 登入頁（雲端版） */
.login{max-width:340px;margin:18vh auto 0;text-align:center}
.login h1{font-size:22px;color:var(--brand);margin-bottom:22px}
.login form{display:flex;flex-direction:column;gap:12px}
.login input[type=password]{padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font:inherit;outline:0;text-align:center}
.login input[type=password]:focus{border-color:var(--brand)}
.login__err{margin-top:14px;color:#ff8a75;font-size:14px}
.login pre{background:var(--bg2);padding:12px;border-radius:8px;overflow-x:auto;font-size:13px}