*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#14161a; --panel:#1b1e24; --panel2:#22262d; --line:#2c3138;
  --tx:#e6e8eb; --mut:#8b919b; --acc:#ff6a00; --acc2:#ff8c3a;
}
html,body{background:var(--bg);color:var(--tx)}
body{
  font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC","Heiti TC",sans-serif;
  font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 14px}

/* ---------- header ---------- */
.top{background:#0f1115;border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:18px;height:56px}
.logo{font-size:21px;font-weight:800;color:var(--acc);white-space:nowrap;letter-spacing:.5px}
.logo span{color:var(--tx);font-weight:600;font-size:15px;margin-left:2px}
.nav{display:flex;gap:16px;font-size:14.5px;color:#c3c8cf;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;padding:4px 2px;border-bottom:2px solid transparent}
.nav a.on{color:var(--acc);border-bottom-color:var(--acc)}
.search{margin-left:auto;display:flex;align-items:center;background:var(--panel2);
  border:1px solid var(--line);border-radius:3px;height:32px;overflow:hidden}
.search input{background:none;border:0;outline:none;color:var(--tx);padding:0 10px;width:170px;font-size:13.5px}
.search input::placeholder{color:#6d7480}
.search button{background:var(--acc);border:0;color:#fff;height:100%;padding:0 13px;cursor:pointer;font-size:13.5px;font-family:inherit}
.crumb{font-size:13px;color:var(--mut);padding:9px 0}
.crumb a:hover{color:var(--acc)}
.crumb i{font-style:normal;margin:0 6px;color:#4a505a}

/* ---------- title block ---------- */
.head{padding:4px 0 14px}
h1{font-size:23px;font-weight:700;line-height:1.35}
h1 em{font-style:normal;color:var(--acc)}
.alt{font-size:13px;color:var(--mut);margin-top:5px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.tag{font-size:11.5px;padding:2px 7px;border-radius:2px;background:var(--panel2);
  border:1px solid var(--line);color:#b6bcc4}
.tag.hot{background:#3a1b06;border-color:#7a3a0d;color:var(--acc2)}
.tag.sub{background:#0d2c1c;border-color:#1c5636;color:#4fd18b}
.meta{margin-top:9px;font-size:12.5px;color:var(--mut);display:flex;flex-wrap:wrap;gap:16px}

/* ---------- player ---------- */
.stage{display:grid;grid-template-columns:1fr 232px;gap:14px;align-items:start}
.screen{position:relative;background:#000;border:1px solid var(--line);border-radius:3px;
  aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;justify-content:center}
.layer{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;text-align:center;padding:20px}
.layer.show{display:flex}
.playbtn{width:66px;height:66px;border-radius:50%;background:rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:.18s}
.playbtn:hover{background:var(--acc);border-color:var(--acc);transform:scale(1.06)}
.playbtn::after{content:"";border-left:19px solid #fff;border-top:12px solid transparent;
  border-bottom:12px solid transparent;margin-left:5px}
.idle-hint{font-size:13px;color:#9aa1ab}
.spin{width:42px;height:42px;border:3px solid rgba(255,255,255,.14);
  border-top-color:var(--acc);border-radius:50%;animation:sp .85s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.load-tx{font-size:13.5px;color:#c9ced5}
.load-sub{font-size:11.5px;color:#727984;font-variant-numeric:tabular-nums}
.bar{width:min(260px,70%);height:3px;background:#2a2e35;border-radius:2px;overflow:hidden}
.bar > i{display:block;height:100%;width:0;background:var(--acc);transition:width .45s ease}
.err-ico{width:46px;height:46px;border-radius:50%;border:2px solid #d0454a;
  color:#d0454a;font-size:27px;font-weight:700;display:flex;align-items:center;justify-content:center}
.err-tx{font-size:16.5px;font-weight:600;color:#e8e8e8}
.err-sub{font-size:12.5px;color:#8b919b;line-height:1.75}
.err-sub b{color:var(--acc2);font-weight:600}
.err-code{font-size:11px;color:#5c626c;font-family:Consolas,Menlo,monospace}
.retry{background:none;border:1px solid #454b55;color:#c9ced5;padding:6px 18px;
  border-radius:3px;cursor:pointer;font-size:13px;font-family:inherit}
.retry:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- source list ---------- */
.side{background:var(--panel);border:1px solid var(--line);border-radius:3px}
.side-h{font-size:13.5px;font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between}
.side-h span{font-size:11.5px;color:var(--mut);font-weight:400}
.srcs{padding:8px}
.src{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:3px;
  cursor:pointer;font-size:13.5px;color:#c3c8cf;border:1px solid transparent;margin-bottom:5px}
.src:last-child{margin-bottom:0}
.src:hover{background:var(--panel2)}
.src.on{background:#301603;border-color:#7a3a0d;color:var(--acc2);font-weight:600}
.dot{width:6px;height:6px;border-radius:50%;background:#4c525c;flex:none}
.src.on .dot{background:var(--acc);box-shadow:0 0 0 3px rgba(255,106,0,.18)}
.src small{margin-left:auto;font-size:11px;color:#6d7480;font-weight:400}
.src.on small{color:#a86634}
.side-f{font-size:11.5px;color:#6d7480;padding:9px 12px;border-top:1px solid var(--line);line-height:1.7}
.notice{margin-top:12px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--acc);border-radius:3px;padding:10px 13px;font-size:12.5px;color:#9aa1ab}

/* ---------- info table ---------- */
.sec{margin-top:24px}
.sec-h{font-size:15px;font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--line);
  margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sec-h::before{content:"";width:3px;height:14px;background:var(--acc);border-radius:1px}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 26px;font-size:13.5px}
.info div{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid #21252b}
.info dt{color:var(--mut);flex:none;min-width:5em}
.info dd{color:#ccd1d8}

/* ---------- grid list ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:11px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:13px;transition:.16s;display:block}
.card:hover{border-color:var(--acc);background:var(--panel2);transform:translateY(-2px)}
.card .yr{font-size:11.5px;color:var(--acc2);font-weight:600}
.card .tt{font-size:14.5px;font-weight:600;margin:5px 0 3px;line-height:1.4}
.card .en{font-size:11px;color:#6d7480;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .go{font-size:11.5px;color:var(--mut);margin-top:8px;padding-top:7px;border-top:1px solid #262a31}
.card:hover .go{color:var(--acc)}

/* ---------- facet links（詳細頁 → 類型/地區/年份頁）---------- */
.facets{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px;
  padding-top:12px;border-top:1px solid #21252b;font-size:12.5px}
.facets span{color:var(--mut)}
.facets a{padding:4px 10px;background:var(--panel2);border:1px solid var(--line);
  border-radius:2px;color:#b6bcc4;transition:.14s}
.facets a:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- browse chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;font-size:13.5px;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;color:#c3c8cf;transition:.14s}
.chips a:hover{border-color:var(--acc);color:var(--acc);background:var(--panel2)}
.chips a small{font-size:11px;color:#6d7480}
.chips a:hover small{color:var(--acc2)}

/* ---------- prose ---------- */
.prose{font-size:13.5px;color:#a4aab3;line-height:1.95}
.prose p{margin-bottom:11px}
.prose p:last-child{margin-bottom:0}
.prose b{color:#ccd1d8;font-weight:600}

/* ---------- section down ---------- */
.down{margin:40px 0 46px;padding:44px 20px;background:var(--panel);border:1px solid var(--line);
  border-radius:3px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.down-ico{width:52px;height:52px;border-radius:50%;border:2px solid #d0454a;color:#d0454a;
  font-size:30px;font-weight:700;display:flex;align-items:center;justify-content:center}
.down-tx{font-size:18px;font-weight:600}
.down-sub{font-size:13px;color:var(--mut);line-height:1.9}
.down-sub a{color:var(--acc2);border-bottom:1px solid #7a3a0d}
.down-sub a:hover{color:var(--acc)}
.down-code{font-size:11px;color:#5c626c;font-family:Consolas,Menlo,monospace;margin-top:2px}

/* ---------- rank list ---------- */
.rank{list-style:none;counter-reset:r}
.rank li{counter-increment:r;border-bottom:1px solid #21252b}
.rank a{display:flex;align-items:center;gap:14px;padding:12px 8px;transition:.14s}
.rank a:hover{background:var(--panel2)}
.rank a::before{content:counter(r);flex:none;width:26px;text-align:center;font-size:15px;
  font-weight:700;color:#5c626c;font-variant-numeric:tabular-nums}
.rank li:nth-child(1) a::before{color:#ff6a00}
.rank li:nth-child(2) a::before{color:#e0913c}
.rank li:nth-child(3) a::before{color:#b08a5a}
.rank .rk-tt{font-size:14.5px;font-weight:600}
.rank .rk-en{font-size:11.5px;color:#6d7480;margin-top:2px}
.rank .rk-meta{margin-left:auto;font-size:11.5px;color:var(--mut);text-align:right;flex:none}
.rank .rk-meta b{color:var(--acc2);font-weight:600;display:block;font-size:12.5px}
@media(max-width:600px){ .rank .rk-en{display:none} }

.foot{margin-top:26px;border-top:1px solid var(--line);padding:16px 0 30px;
  font-size:12px;color:#666c76;text-align:center;line-height:1.9}
.foot a:hover{color:var(--acc)}

@media(max-width:860px){
  .stage{grid-template-columns:1fr}
  /* nav 唔可以 display:none —— 手機係主要流量，隱藏會令 nav_click 訊號同排行榜入口一齊消失。
     改成真站慣用做法：第二行橫向捲動。 */
  .topbar{height:auto;flex-wrap:wrap;padding:9px 0;gap:10px 14px}
  .logo{order:1;font-size:19px}
  .search{order:2;margin-left:auto}
  .nav{order:3;flex-basis:100%;width:100%;gap:17px;
    -webkit-overflow-scrolling:touch;font-size:14px}
  /* 加高觸控範圍：nav_click 係研究訊號，撳唔中就收唔到數 */
  .nav a{padding:8px 0}
  h1{font-size:19px}
  .search input{width:120px}
  .srcs{display:flex;gap:7px;padding:8px}
  .src{flex:1;margin-bottom:0;justify-content:center;background:var(--panel2)}
  .src small{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
}

/* ==========================================================
   版面變體（body class）—— 手機優先
   ========================================================== */

/* ---------- LIST：橫向列，手機最好撳 ---------- */
.lay-list .grid{display:block}
.lay-list .card{display:flex;align-items:center;gap:12px;padding:12px 13px;
  margin-bottom:8px;transform:none!important;min-height:64px}
.lay-list .card:hover{transform:none}
.lay-list .card .yr{order:0;flex:none;min-width:44px;font-size:13px;
  font-variant-numeric:tabular-nums;opacity:.9}
.lay-list .card .tt{order:1;margin:0;flex:1;font-size:15px}
.lay-list .card .en{display:none}
.lay-list .card .go{order:2;margin:0;padding:0;border:0;flex:none;font-size:18px;line-height:1;
  color:var(--mut);white-space:nowrap}
.lay-list .card .go::after{content:"›"}
.lay-list .card .go{font-size:0}
.lay-list .card .go::after{font-size:20px}

/* ---------- COMPACT：密集，一屏睇到最多 ---------- */
.lay-compact .grid{display:block;border-top:1px solid var(--line)}
.lay-compact .card{display:flex;align-items:center;gap:11px;padding:11px 4px;
  margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:none;transform:none!important;min-height:52px}
.lay-compact .card:hover{background:var(--panel2);transform:none}
.lay-compact .card .yr{flex:none;min-width:40px;font-size:12px;font-variant-numeric:tabular-nums}
.lay-compact .card .tt{margin:0;flex:1;font-size:14.5px;font-weight:500}
.lay-compact .card .en{display:none}
.lay-compact .card .go{display:none}

/* ---------- MAGAZINE：首項放大做主打 ---------- */
.lay-magazine .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lay-magazine .card:first-child{grid-column:1/-1;padding:22px 18px}
.lay-magazine .card:first-child .tt{font-size:22px;line-height:1.3}
.lay-magazine .card:first-child .yr{font-size:13px}
.lay-magazine .card:first-child .en{font-size:12.5px;-webkit-line-clamp:3}
.lay-magazine .card .tt{font-size:15px}

/* ---------- MINIMAL：大字，無框 ---------- */
.lay-minimal .grid{display:block}
.lay-minimal .card{background:none;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:16px 2px;margin:0;transform:none!important}
.lay-minimal .card:hover{background:none;transform:none}
.lay-minimal .card .tt{font-size:19px;font-weight:700;margin:3px 0 4px;letter-spacing:-.2px}
.lay-minimal .card .yr{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.lay-minimal .card .en{font-size:12px;-webkit-line-clamp:1}
.lay-minimal .card .go{border:0;padding:6px 0 0}
.lay-minimal .sec-h{font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- 淺色配色微調 ---------- */
.scheme-light .top{background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.scheme-light .screen{background:#0d0d0d}
.scheme-light .card{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.scheme-light .card:hover{box-shadow:0 3px 10px rgba(0,0,0,.09)}
.scheme-light .info div{border-bottom-color:var(--line)}
.scheme-light .rank li{border-bottom-color:var(--line)}
.scheme-light .err-code,.scheme-light .down-code{color:#9aa0aa}

/* ==========================================================
   手機底部導覽（.nav-bottom）
   ========================================================== */
.tabbar{display:none}
@media(max-width:860px){
  .nav-bottom .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--panel);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .nav-bottom .tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:54px;font-size:11.5px;color:var(--mut);text-decoration:none}
  .nav-bottom .tabbar a.on{color:var(--acc)}
  .nav-bottom .tabbar a i{font-style:normal;font-size:17px;line-height:1}
  /* 騰出底欄空間，唔好遮住內容 */
  .nav-bottom .foot{padding-bottom:78px}
  /* 有底欄就唔使頂部橫向 nav */
  .nav-bottom .nav{display:none}
  .nav-bottom .topbar{height:52px;flex-wrap:nowrap;padding:0}
  .nav-bottom .search{margin-left:auto}
}

/* ==========================================================
   手機通用優化（所有版面）
   ========================================================== */
@media(max-width:860px){
  /* 觸控目標最少 44px */
  .card{min-height:44px}
  .src{min-height:44px}
  .retry{min-height:44px;padding:10px 22px}
  .search button{min-width:52px}
  .facets a{padding:8px 12px}
  .chips a{padding:9px 14px}
  .rank a{padding:14px 8px}
  /* 播放器貼邊，手機睇大啲 */
  .stage > div:first-child{margin:0 -14px}
  .screen{border-left:0;border-right:0;border-radius:0}
  .notice{margin-left:0;margin-right:0}
}
/* ---------- language switcher（分段式切換掣）---------- */
.langbar{background:var(--panel);border-bottom:1px solid var(--line)}
.langbar .wrap{display:flex;align-items:center;gap:8px;padding-top:8px;padding-bottom:8px}
.langbar .wrap::before{
  content:"";flex:none;width:15px;height:15px;opacity:.55;
  background-color:currentColor;color:var(--mut);
  -webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20'/%3E%3C/svg%3E");
}
/* 分段掣本體：一個外框包住兩個選項，一眼睇得出係可以㩒嘅控制項 */
.langbar .seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;background:var(--bg)}
.langbar .seg a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 14px;font-size:13px;line-height:1;
  color:var(--mut);white-space:nowrap;transition:.14s;
  border-right:1px solid var(--line)}
.langbar .seg a:last-child{border-right:0}
.langbar .seg a:hover{color:var(--tx);background:var(--panel2)}
.langbar .seg a.on{background:var(--acc);color:#fff;font-weight:600}
.langbar .seg a.on:hover{background:var(--acc)}

@media(max-width:860px){
  .langbar .wrap{padding-top:7px;padding-bottom:7px}
  .langbar .seg a{min-height:40px;padding:0 18px;font-size:13.5px}  /* 觸控目標 */
}