/* ============================================================
   EYNY 影音 — Netflix 風（暗黑）
   mobile-first；≥900px 放大卡片與 hero
   ============================================================ */
:root{
  --bg:#08090b; --bg2:#0e1013; --card:#15181d; --card2:#1c2027;
  --fg:#f2f4f7; --dim:#9aa3ad; --line:#232830;
  --brand:#e50914; --brand2:#ff3b30; --ok:#46d369;
  --r:10px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.5 "Inter","Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",Roboto,sans-serif;
  overflow-x:hidden;
}
.hidden{display:none !important}
.dim{color:var(--dim)}
.grow{flex:1}
a{color:inherit;text-decoration:none}
img{display:block}

/* ── 頂列 ── */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:12px 14px;background:linear-gradient(180deg,rgba(8,9,11,.96),rgba(8,9,11,.72) 70%,transparent);
  transition:background .25s;backdrop-filter:blur(6px);
}
#topbar.solid{background:rgba(8,9,11,.97);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:5px;cursor:pointer;flex:none}
.logo{font:900 21px/1 Impact,"Arial Black",sans-serif;color:var(--brand);letter-spacing:.5px}
.logo-sub{font-size:12px;color:var(--dim);font-weight:600}
#nav{display:none;gap:16px;font-size:14px;min-width:0}
#nav a{color:var(--dim);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
#nav a.on,#nav a:hover{color:var(--fg);border-bottom-color:var(--brand)}
.right{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
#searchform{display:flex;min-width:0}
#q{
  width:150px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--fg);
  border-radius:999px;padding:8px 13px;font:inherit;font-size:13px;min-width:0;
}
#q:focus{outline:none;border-color:#4b5563;width:190px;background:rgba(0,0,0,.6)}
.acct{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:#1b1e23;color:#9aa3ad;                 /* 素色灰，不用鮮紅 */
  border:1px solid #2b2f36;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
}
.acct:hover{background:#23272e;color:#e6e8eb;border-color:#3a3f47}
.acct:active{background:#171a1e}
.acct svg{display:block}
.acct img{width:100%;height:100%;object-fit:cover}

/* ── Hero ── */
main{padding-bottom:60px}
.hero{
  position:relative;min-height:56vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center 20%;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.35) 0%,rgba(8,9,11,.75) 55%,var(--bg) 100%),
             linear-gradient(90deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.35) 60%,transparent 100%);
}
.hero-in{position:relative;z-index:2;padding:0 16px 22px;max-width:680px}
.hero h1{margin:0 0 8px;font-size:26px;line-height:1.25;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.hero-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:#d5dae0;flex-wrap:wrap}
.hero-meta .pill{padding:2px 8px;border:1px solid rgba(255,255,255,.25);border-radius:4px;font-size:12px}
.hero-btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:7px;border:0;border-radius:6px;padding:10px 18px;
  font:inherit;font-weight:700;font-size:14px;cursor:pointer;background:#e9ecef;color:#0b0c0e;
}
.btn.play{background:#e9ecef}
.btn.ghost{background:rgba(109,116,126,.5);color:#fff;font-weight:600}
.btn:active{transform:scale(.98)}

/* ── 列 ── */
.rows{padding:0 0 10px;margin-top:-40px;position:relative;z-index:3}
.row{margin:22px 0}
.row-head{display:flex;align-items:baseline;gap:10px;padding:0 16px 8px}
.row-head h2{margin:0;font-size:16px;font-weight:700}
.row-head .more-link{font-size:12px;color:var(--dim);margin-left:auto;white-space:nowrap}
.scroller{
  display:flex;gap:8px;overflow-x:auto;padding:4px 16px 10px;scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.scroller::-webkit-scrollbar{display:none}
.card{
  flex:0 0 42%;max-width:190px;scroll-snap-align:start;cursor:pointer;position:relative;
}
.card .thumbwrap{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);
  aspect-ratio:16/9;transition:transform .18s ease,box-shadow .18s;
}
.card:hover .thumbwrap{transform:scale(1.05);box-shadow:0 10px 30px rgba(0,0,0,.6);z-index:2}
.card img{width:100%;height:100%;object-fit:cover}
.card .dur{
  position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.78);border-radius:4px;
  padding:2px 6px;font-size:11px;font-weight:700;letter-spacing:.3px;
}
.card .ct{font-size:12.5px;color:#cfd6dd;margin-top:7px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .badge{position:absolute;left:6px;top:6px;background:rgba(229,9,20,.92);border-radius:4px;padding:2px 6px;font-size:10.5px;font-weight:700}

/* ── 格狀／搜尋結果 ── */
#grid-view{padding:90px 16px 0}
#grid-view h2{font-size:19px;margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 10px}
.more{text-align:center;padding:22px 0}
.more button{background:var(--card2);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:11px 26px;font:inherit;cursor:pointer}

/* ── 觀看頁 ── */
.watch{position:fixed;inset:0;z-index:60;background:rgba(4,5,6,.97);overflow:auto}
.watch-inner{max-width:1100px;margin:0 auto;padding:14px}
.watch .close{
  position:fixed;right:14px;top:12px;z-index:2;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:#1a1e24;color:#fff;font-size:17px;cursor:pointer;
}
#player{width:100%;max-height:74vh;background:#000;border-radius:10px;display:block}
.watch-meta{padding:16px 2px}
.watch-meta h1{font-size:19px;margin:0 0 10px;line-height:1.35}
.watch-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.qsel{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:13px}
.qsel select{background:#12161b;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 8px}
.tags a{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;color:#c9d1d9}
#w-desc{font-size:13.5px;line-height:1.7;max-width:80ch;white-space:pre-wrap}

/* ── 其他 ── */
.skeleton{background:linear-gradient(100deg,#101317 30%,#171b21 50%,#101317 70%);background-size:200% 100%;animation:sk 1.3s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:#1c2027;border:1px solid var(--line);border-radius:10px;padding:11px 18px;font-size:13.5px;
}
.empty{color:var(--dim);font-size:14px;padding:22px 16px}

@media (min-width:640px){
  .card{flex:0 0 27%}
  .hero{min-height:64vh}
  .hero h1{font-size:34px}
  #q{width:200px}
}
@media (min-width:900px){
  #nav{display:flex}
  .hero{min-height:72vh;background-position:center 25%}
  .hero-in{padding:0 46px 40px;max-width:760px}
  .hero h1{font-size:44px}
  .rows{margin-top:-70px}
  .row-head{padding:0 46px 10px}
  .scroller{padding:4px 46px 12px;gap:10px}
  .card{flex:0 0 190px}
  .card .ct{font-size:13px}
  #grid-view{padding:100px 46px 0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px 12px}
  .watch-inner{padding:22px}
}

/* ── 手機：獨立底部導覽列（不能放在 #topbar 內，backdrop-filter 會讓 fixed 的定位基準變成 topbar） ── */
.mnav{display:none}
@media (max-width:899px){
  #nav{display:none}
  .mnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(10,11,13,.98); border-top:1px solid var(--line);
    padding:7px 4px calc(7px + env(safe-area-inset-bottom,0px));
    backdrop-filter:blur(10px);
  }
  .mnav a{flex:1; text-align:center; font-size:12.5px; padding:7px 2px; border-radius:8px; color:var(--dim)}
  .mnav a.on{color:#fff; background:rgba(229,9,20,.18)}
  body{padding-bottom:66px}
  .rows{margin-top:-26px}
  .hero{min-height:52vh}
  .hero-in{padding:0 14px 18px}
}

/* ══════════ 分類 / 專輯 / 上傳 / admin（2026-10-06 追加） ══════════ */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.catcard{
  background:linear-gradient(135deg,#1b1f26,#12161b);border:1px solid var(--line);border-radius:12px;
  padding:18px 14px;cursor:pointer;font-weight:700;font-size:15px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;transition:.15s;
}
.catcard:hover{border-color:#4b5563;transform:translateY(-2px)}
.catcard .n{color:var(--dim);font-size:12px;font-weight:500;white-space:nowrap}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.panel-row{display:flex;gap:8px;flex-wrap:wrap}
.panel-row input, .panel-row select{flex:1;min-width:140px}
.panel input,.panel select,.panel textarea{
  background:#0f1216;border:1px solid var(--line);color:var(--fg);border-radius:9px;padding:10px 12px;font:inherit;font-size:14px;
}
.hint{color:var(--dim);font-size:12.5px;line-height:1.6}
.warn{background:#2a1a12;border:1px solid #5c351f;color:#ffb37a;border-radius:9px;padding:10px 12px;font-size:13px}
.plist{display:flex;flex-direction:column;gap:10px}
.plrow{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px}
.plrow .grow{min-width:0}
.plrow .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plrow button.danger{background:transparent;border:1px solid #5c2b2b;color:#f28b82}
.btn.small{padding:7px 13px;font-size:13px}
.plbox{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:12px}
.plbox select{background:#0f1216;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:160px}
table.checks{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:14px}
table.checks td{padding:9px 6px;border-bottom:1px solid var(--line2)}
table.checks td:first-child{color:var(--dim);white-space:nowrap}
table.checks td.ok{color:var(--ok)}
table.checks td.bad{color:var(--err)}
#w-fav.on{background:#e50914;border-color:#e50914;color:#fff}
#cats-view, #pl-view, #up-view, #admin-view{padding:92px 16px 40px}
#cats-view h2,#pl-view h2,#up-view h2,#admin-view h2{font-size:20px;margin:0 0 14px}
@media (min-width:900px){
  #cats-view, #pl-view, #up-view, #admin-view{padding:100px 46px 40px}
  .cats{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

/* 分類：可展開子分類 */
.catwrap{margin:0}
.subs{display:flex;flex-wrap:wrap;gap:8px;padding:10px 4px 14px}
.subs.hidden{display:none}
.subchip{
  background:#141922;border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font-size:13.5px;color:#cfd6dd;
}
.subchip:hover{border-color:#4b5563;color:#fff}
/* 展開的點擊區域＝整張卡：
   1) 內層（數量、箭頭）純裝飾，pointer-events:none 讓事件一定落在卡片本身
   2) 提高最小高度，手機改成單欄全寬，手指不必瞄準小小的箭頭
   3) 箭頭放大，讓「這裡可以點」看得出來 */
.catcard *{pointer-events:none}
.catcard{min-height:56px}
.catcard .chev{font-size:16px;color:#9aa4af;line-height:1}
@media (max-width:600px){
  .cats{grid-template-columns:1fr}
  .catcard{min-height:64px;padding:20px 16px;font-size:16px}
  .catcard .n{font-size:12.5px}
}

/* 上傳表單欄位 */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12.5px;color:var(--dim)}
.field input[type=file]{padding:8px;background:#0f1216;border:1px dashed var(--line);border-radius:9px;color:var(--fg)}
.steps{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.step{font-size:13px;padding:8px 11px;border-radius:9px;background:#12161b;border:1px solid var(--line)}
.step.ok{border-color:#1f3d2a;color:#c8f0d3}
.step.bad{border-color:#5c2b2b;color:#f3c0bb}

/* Admin */
.admintabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.admintabs button{background:#171b21;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13.5px}
.admintabs button.on{background:#e50914;border-color:#e50914;color:#fff;font-weight:700}
.admintabs button.ghost{margin-left:auto;border-color:#3a3f47}
.editform{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line2);width:100%}
.editform input,.editform select{background:#0f1216;border:1px solid var(--line);color:var(--fg);border-radius:9px;padding:9px 11px;font:inherit;font-size:13.5px}
.plrow{flex-wrap:wrap}
button.acct{font:inherit;font-weight:700;font-size:12px;cursor:pointer}