/* gimymirror 前台 — 現代化視覺(Netflix/YouTube 沉浸風)＋gitube 結構對齊; 手機優先 */
:root{
  --bg:#0F0F0F; --bg-elev:#181818; --surface:#272727; --surface-hover:#3F3F3F;
  --border:#303030; --fg:#FFFFFF; --fg-secondary:#AAAAAA; --fg-tertiary:#717171;
  --accent:#FF0033; --accent-2:#FF5A2B; --link:#3EA6FF; --overlay:rgba(0,0,0,.7);
  --ok:#3ea64f; --bad:#e5534b;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:18px; --space-5:24px; --space-6:32px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:9999px;
  --font-sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --text-xs:11px; --text-sm:12px; --text-base:14px; --text-md:16px; --text-lg:18px; --text-xl:20px; --text-2xl:24px; --text-3xl:32px;
  --header-h:56px; --sidebar-w:240px; --content-max:2200px;
  --t-fast:100ms; --t-base:200ms; --t-slow:320ms; --ease:cubic-bezier(.4,0,.2,1);
  --shadow-1:0 2px 8px rgba(0,0,0,.35);
  --shadow-2:0 8px 28px rgba(0,0,0,.55);
  --grad-accent:linear-gradient(135deg,var(--accent),var(--accent-2));
}
html[data-theme=light]{
  --bg:#FFFFFF; --bg-elev:#F7F7F8; --surface:#F0F0F1; --surface-hover:#E3E3E5;
  --border:#E4E4E6; --fg:#0F0F0F; --fg-secondary:#5A5A60; --fg-tertiary:#94949A;
  --link:#065FD4; --overlay:rgba(0,0,0,.45);
  --shadow-1:0 2px 8px rgba(0,0,0,.08);
  --shadow-2:0 10px 30px rgba(0,0,0,.12);
}
*,::after,::before{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);color:var(--fg);background:var(--bg);line-height:1.4;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:hover{color:var(--link)}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer;border:0;background:0 0;color:inherit;padding:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:600}
input{font-family:inherit}
::selection{background:var(--accent);color:#fff}
*{scrollbar-width:thin;scrollbar-color:var(--surface-hover) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--surface-hover);border-radius:99px}

/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;right:0;height:var(--header-h);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-4);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);z-index:100;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
.header__left{display:flex;align-items:center;gap:var(--space-2);width:100%}
.header__center{flex:1;display:flex;justify-content:center;padding:0 var(--space-3);min-width:0}
.header__actions{display:flex;align-items:center;gap:var(--space-1)}
.icon-btn{width:40px;height:40px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;color:var(--fg);flex:none;transition:background var(--t-fast),transform var(--t-fast)}
.icon-btn:active{transform:scale(.92)}
.icon-btn:hover{background:var(--surface-hover)}
.icon-btn svg{width:22px;height:22px;fill:currentColor}
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:var(--text-lg);letter-spacing:-.5px;white-space:nowrap}
.logo__mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:22px;background:var(--grad-accent);border-radius:7px;color:#fff;font-size:12px;font-weight:700;box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 45%,transparent)}
.search{display:flex;flex:1;max-width:560px;align-items:center;border:1px solid var(--border);border-radius:var(--radius-pill);padding:2px 2px 2px var(--space-4);background:var(--bg-elev);transition:border-color var(--t-base),box-shadow var(--t-base)}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.search__input{flex:1;border:0;background:transparent;color:var(--fg);font-size:var(--text-md);outline:none;min-width:0}
.search__submit{width:36px;height:36px}

/* ---------- sidebar ---------- */
.sidebar__head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-1) var(--space-2) var(--space-3) var(--space-4)}
.sidebar__brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:var(--text-lg);letter-spacing:-.5px}
.sidebar__backdrop{position:fixed;inset:0;background:var(--overlay);opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease);z-index:110;backdrop-filter:blur(2px)}
body.sidebar-open .sidebar__backdrop{opacity:1;pointer-events:auto}
.sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--sidebar-w);background:var(--bg);z-index:120;padding:var(--space-4) var(--space-2);overflow-y:auto;transform:translateX(-100%);transition:transform var(--t-base) var(--ease);box-shadow:var(--shadow-2)}
body.sidebar-open .sidebar{transform:none}
.sidebar__group{padding-bottom:var(--space-3);border-bottom:1px solid var(--border);margin-bottom:var(--space-3)}
.sidebar__label{font-size:var(--text-sm);color:var(--fg-tertiary);padding:var(--space-2) var(--space-4)}
.sidebar__item{display:flex;align-items:center;gap:var(--space-4);padding:10px var(--space-4);border-radius:var(--radius-md);font-size:var(--text-md);transition:background var(--t-fast)}
.sidebar__item:hover{background:var(--surface-hover)}
.sidebar__item.active{background:var(--surface);font-weight:600}
.sidebar__item.active svg{color:var(--accent)}
.sidebar__item svg{width:22px;height:22px;fill:currentColor;flex:none}
.cat-ico{width:22px;text-align:center;font-size:var(--text-sm);color:var(--fg-secondary)}

/* ---------- chips ---------- */
.chips{position:fixed;top:var(--header-h);left:0;right:0;display:flex;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:linear-gradient(var(--bg) 70%,transparent);z-index:90;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:7px 14px;border-radius:var(--radius-pill);background:var(--surface);font-size:var(--text-sm);white-space:nowrap;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.chip:active{transform:scale(.95)}
.chip:hover{background:var(--surface-hover);color:var(--fg)}
.chip.active{background:var(--fg);color:var(--bg);font-weight:600}

/* ---------- layout ---------- */
.main{max-width:var(--content-max);margin:0 auto;padding:calc(var(--header-h) + 52px) var(--space-4) var(--space-6)}
.section{margin-bottom:var(--space-6)}
.section__head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.section__title{font-size:var(--text-xl);letter-spacing:-.3px}
.loading{padding:var(--space-6);text-align:center;color:var(--fg-tertiary)}

/* ---------- skeleton ---------- */
.skeleton{background:linear-gradient(100deg,var(--surface) 40%,var(--surface-hover) 50%,var(--surface) 60%);background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:var(--radius-md)}
@keyframes sk{to{background-position:-200% 0}}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-4) var(--space-3)}
.sk-card{aspect-ratio:2/3}

/* ---------- grid & card ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-5) var(--space-3)}
.card{position:relative;border-radius:var(--radius-md);overflow:visible;animation:cardIn .35s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card__thumb{position:relative;display:block;border-radius:var(--radius-md);overflow:hidden;background:var(--surface);aspect-ratio:2/3;box-shadow:var(--shadow-1)}
.card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.card:hover .card__thumb{box-shadow:var(--shadow-2)}
.card:hover .card__thumb img{transform:scale(1.05)}
.card__badge{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);color:#fff;font-size:var(--text-xs);padding:2px 7px;border-radius:var(--radius-sm)}
.card__fav{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.62);color:#ff5a5a;font-size:13px;line-height:1;padding:3px 7px;border-radius:var(--radius-sm);pointer-events:none}
.card__pend{position:absolute;right:6px;top:6px;background:rgba(180,120,0,.85);backdrop-filter:blur(4px);color:#fff;font-size:var(--text-xs);padding:2px 7px;border-radius:var(--radius-sm);pointer-events:none;letter-spacing:.5px}
.pending-box{margin:var(--space-4) 0;padding:var(--space-5);border-radius:var(--radius-md);background:var(--bg-elev);border:1px dashed color-mix(in srgb,var(--brand) 45%,var(--border));text-align:center}
.pending-box p{margin:0 0 var(--space-4);color:var(--fg-secondary);line-height:1.7}
.pending-box strong{color:var(--fg)}
.pending-ico{font-size:28px;margin-bottom:var(--space-2)}
#btn-deepfetch[disabled]{opacity:.7;pointer-events:none}
.df-progress{margin-top:var(--space-4);text-align:left}
.df-bar{height:6px;border-radius:3px;background:var(--surface);overflow:hidden}
.df-bar i{display:block;height:100%;background:var(--grad-accent);border-radius:3px;transition:width .6s ease}
.df-msg{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--fg-secondary)}
.df-log{margin:var(--space-2) 0 0;padding:0 0 0 var(--space-4);list-style:none;font-size:var(--text-xs);color:var(--fg-tertiary);max-height:110px;overflow:auto}
.df-log li{padding:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes df-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.df-progress:not(.done) .df-msg{animation:df-pulse 1.6s ease-in-out infinite}
.card__body{padding:var(--space-2) 2px 0}
.card__title{font-size:var(--text-base);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__meta{margin:2px 0 0;font-size:var(--text-sm);color:var(--fg-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card:hover .card__title{color:var(--link)}
.card__prog{position:absolute;left:0;right:0;bottom:0;height:3.5px;background:rgba(255,255,255,.25)}
.card__prog i{display:block;height:100%;background:var(--accent)}

/* ---------- continue-watching(橫向大卡) ---------- */
.cw-row{display:flex;gap:var(--space-3);overflow-x:auto;padding-bottom:var(--space-2);scrollbar-width:none;scroll-snap-type:x mandatory}
.cw-row::-webkit-scrollbar{display:none}
.cw-card{flex:0 0 210px;scroll-snap-align:start;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-elev);box-shadow:var(--shadow-1);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base)}
.cw-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.cw-thumb{position:relative;aspect-ratio:16/9;background:#111}
.cw-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:brightness(.9)}
.cw-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.82))}
.cw-cap{position:absolute;left:10px;right:10px;bottom:10px;color:#fff}
.cw-cap .t{font-size:var(--text-base);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.cw-cap .p{font-size:var(--text-xs);opacity:.85;margin-top:2px}
.cw-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.22)}
.cw-bar i{display:block;height:100%;background:var(--grad-accent)}
.cw-play{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:var(--radius-pill);background:rgba(0,0,0,.45);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--t-base)}
.cw-card:hover .cw-play{opacity:1}
.cw-play svg{width:16px;height:16px;fill:#fff}
/* 編輯模式: 平時隱藏刪除元素, 點「編輯」後才出現 */
.section__actions{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}
.btn--danger{color:var(--brand-hover)}
.btn--danger:hover{background:color-mix(in srgb,var(--brand) 18%,var(--surface));color:var(--brand-hover)}
.cw-del{position:absolute;left:6px;top:6px;width:26px;height:26px;border:none;border-radius:50%;background:rgba(0,0,0,.7);color:var(--fg);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:background var(--t-fast),transform var(--t-fast)}
.edit-mode .cw-del{display:flex}
.cw-del:hover{background:var(--brand);transform:scale(1.1)}
.cw-del svg{width:15px;height:15px;fill:currentColor}
.btn.edit-only{display:none}
.edit-mode .btn.edit-only{display:inline-flex}
@keyframes cw-jiggle{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
.edit-mode .cw-card{animation:cw-jiggle .28s ease-in-out infinite}
.edit-mode .cw-play{display:none}

/* ---------- detail ---------- */
.detail-backdrop{position:relative;margin:calc(-1 * var(--space-2)) calc(-1 * var(--space-4)) var(--space-5);padding:var(--space-5) var(--space-4) 0;overflow:hidden}
.detail-backdrop .bd-img{position:absolute;inset:-60px 0 auto 0;background-size:cover;background-position:28% 18%;filter:blur(28px) saturate(1.4) brightness(.55);transform:scale(1.08)}
.detail-backdrop .bd-shade{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent),var(--bg) 92%)}
.detail-hero{position:relative;display:flex;gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-5)}
.detail-cover{flex:none;width:220px}
.detail-cover img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-2)}
.detail-info{flex:1;min-width:280px}
.detail-info h1{font-size:var(--text-3xl);margin-bottom:var(--space-3);letter-spacing:-.5px}
.detail-meta{margin:0 0 var(--space-2);color:var(--fg-secondary);font-size:var(--text-base)}
.detail-meta strong{color:var(--fg);font-weight:600}
.detail-meta a{color:var(--link)}
.detail-tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
.detail-tag{padding:4px 12px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--border);font-size:var(--text-sm);color:var(--fg-secondary)}
.detail-actions{display:flex;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;border-radius:var(--radius-pill);font-size:var(--text-md);font-weight:600;transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--grad-accent);color:#fff;box-shadow:0 4px 18px color-mix(in srgb,var(--accent) 40%,transparent)}
.btn--primary:hover{color:#fff;filter:brightness(1.12)}
.btn--ghost{background:var(--surface)}
.btn--ghost:hover{background:var(--surface-hover);color:var(--fg)}
.desc-block{background:var(--bg-elev);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-5);border:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
.desc-block p{margin:0;color:var(--fg-secondary);white-space:pre-wrap;line-height:1.7}
.playlist-block{margin-bottom:var(--space-4)}
.playlist-block__title{font-size:var(--text-md);margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-2)}
.playlist-block__title::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--grad-accent)}
.episodes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:var(--space-2)}
.episodes-grid a,.episodes-grid button{display:flex;align-items:center;justify-content:center;padding:9px 0;background:var(--surface);border-radius:var(--radius-md);font-size:var(--text-sm);transition:background var(--t-fast),transform var(--t-fast)}
.episodes-grid a:hover{background:var(--surface-hover);color:var(--fg);transform:translateY(-1px)}
.episodes-grid a.active{background:var(--grad-accent);color:#fff;font-weight:700}

/* ---------- watch ---------- */
.watch-layout{display:flex;gap:var(--space-4);flex-wrap:wrap}
.watch-main{flex:1 1 640px;min-width:0}
.watch-side{flex:0 0 320px}
.player-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-2)}
.player-wrap video{width:100%;height:100%;display:block}
.player-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--text-md);background:rgba(0,0,0,.6);text-align:center;padding:var(--space-4)}
.watch-title{font-size:var(--text-xl);margin:var(--space-3) 0 var(--space-2);letter-spacing:-.3px}
.route-chips{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;margin-bottom:var(--space-3);padding-bottom:2px}
.route-chips::-webkit-scrollbar{display:none}
.route-chip{flex:none;padding:7px 14px;border-radius:var(--radius-pill);background:var(--surface);font-size:var(--text-sm);white-space:nowrap;border:1px solid transparent;transition:background var(--t-fast)}
.route-chip:hover{background:var(--surface-hover);color:var(--fg)}
.route-chip.active{background:var(--fg);color:var(--bg);font-weight:600}
.recommend-item{display:flex;gap:var(--space-3);margin-bottom:var(--space-3);border-radius:var(--radius-md);padding:4px;transition:background var(--t-fast)}
.recommend-item:hover{background:var(--surface)}
.recommend-item__thumb{position:relative;flex:none;width:128px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.recommend-item__thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.recommend-item__title{font-size:var(--text-base);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.recommend-item:hover .recommend-item__title{color:var(--link)}
.recommend-item__meta{font-size:var(--text-sm);color:var(--fg-tertiary);margin-top:2px}

/* ---------- pager ---------- */
.pager{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-5)}
.pager button{padding:8px 14px;border-radius:var(--radius-md);background:var(--surface);font-size:var(--text-sm)}
.pager button:hover{background:var(--surface-hover)}
.pager button[disabled]{opacity:.4;cursor:default}

/* ---------- stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)}
.stat-card{background:var(--bg-elev);border:1px solid color-mix(in srgb,var(--border) 55%,transparent);border-radius:var(--radius-lg);padding:var(--space-4)}
.stat-card .k{font-size:var(--text-sm);color:var(--fg-tertiary)}
.stat-card .v{font-size:var(--text-2xl);font-weight:700;margin-top:4px}
table.runs{width:100%;border-collapse:collapse;font-size:var(--text-sm);margin-top:var(--space-4)}
table.runs th,table.runs td{text-align:left;padding:8px;border-bottom:1px solid var(--border)}
table.runs th{color:var(--fg-tertiary);font-weight:500}

/* ---------- footer ---------- */
.footer{text-align:center;color:var(--fg-tertiary);font-size:var(--text-sm);padding:var(--space-5) 0 var(--space-6)}

/* ---------- member: account chip / auth / settings / fav ---------- */
.account-chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--radius-pill);background:var(--surface);font-size:var(--text-sm);font-weight:600;max-width:130px;overflow:hidden;white-space:nowrap;transition:background var(--t-fast)}
.account-chip:hover{background:var(--surface-hover);color:var(--fg)}
.btn--fav{background:var(--surface)}
.btn--fav:hover{background:var(--surface-hover);color:var(--fg)}
.btn--fav.active{background:var(--grad-accent);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent)}
.auth-wrap{display:flex;justify-content:center;padding:var(--space-6) 0}
.auth-panel{width:100%;max-width:420px;background:var(--bg-elev);border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-2)}
.auth-brand{text-align:center;margin-bottom:var(--space-5)}
.auth-brand .logo__mark{width:44px;height:32px;border-radius:10px;font-size:16px;margin:0 auto var(--space-3)}
.auth-panel h2{font-size:var(--text-xl);text-align:center;margin-bottom:var(--space-5)}
.auth-panel label{display:block;margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--fg-secondary);font-weight:500}
.auth-panel input{width:100%;margin-top:6px;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg);color:var(--fg);font-size:var(--text-md);outline:none;transition:border-color var(--t-base),box-shadow var(--t-base)}
.auth-panel input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.auth-panel .btn{width:100%;justify-content:center;margin-top:var(--space-2)}
.auth-msg{min-height:20px;color:var(--bad);font-size:var(--text-sm);margin-bottom:var(--space-2)}
.auth-switch{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--fg-tertiary);text-align:center}
.auth-switch a{color:var(--link)}
.settings-block{max-width:560px;background:var(--bg-elev);border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:var(--radius-lg);padding:0 var(--space-5)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:0}
.seg{display:inline-flex;background:var(--surface);border-radius:var(--radius-md);padding:3px}
.seg button{padding:7px 16px;border-radius:7px;font-size:var(--text-sm)}
.seg button.active{background:var(--fg);color:var(--bg);font-weight:600}
.switch{position:relative;display:inline-block;width:46px;height:26px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--surface-hover);border-radius:999px;transition:var(--t-base)}
.switch .slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:var(--t-base);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.switch input:checked+.slider{background:var(--accent)}
.switch input:checked+.slider::before{transform:translateX(20px)}

/* ---------- responsive: 手機優先 ---------- */
@media (max-width:768px){
  :root{--header-h:52px}
  .main{padding:calc(var(--header-h) + 48px) var(--space-3) var(--space-6)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--space-4) var(--space-2)}
  .card__title{font-size:var(--text-sm)}
  .card__meta{display:none}
  .cw-card{flex-basis:170px}
  .detail-backdrop{margin:calc(-1*var(--space-3)) calc(-1*var(--space-3)) var(--space-4)}
  .detail-cover{width:118px}
  .detail-info{min-width:100%;order:2}
  .detail-info h1{font-size:var(--text-xl)}
  .detail-actions .btn{flex:1;justify-content:center;padding:11px 10px}
  .player-wrap{border-radius:0;margin:0 calc(-1*var(--space-3))}
  .watch-title{font-size:var(--text-md);margin:var(--space-3) 0 var(--space-2)}
  .recommend-item__thumb{width:104px}
  .auth-panel{padding:var(--space-4);box-shadow:none;background:transparent;border:0}
  .logo__txt{display:none}
}
/* 手機搜尋全螢幕模式 */
@media (max-width:860px){
  .header__center{display:none}
  body.search-open .header__center{display:flex;flex:1}
  body.search-open .header__left .logo,
  body.search-open .header__left #btn-menu,
  body.search-open .header__actions{display:none}
}
@media (max-width:1100px){.watch-side{flex:1 1 100%}}
@media (min-width:1201px){
  body.side-open .sidebar{transform:none;box-shadow:var(--shadow-1);top:var(--header-h)}
  body.side-open .sidebar .sidebar__head{display:none}
  body.side-open .main{margin-left:var(--sidebar-w)}
  body.side-open .chips{left:var(--sidebar-w);right:0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}
@media (min-width:1920px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}