/* 源站样式保存在 static/web/css/drama.css；本站补充样式按页面需要写在此处。 */
/* 选集角标只展示服务端定价文案，使用伪元素保持按钮尺寸及集号文本不变。 */
.ep-grid a[data-access-badge] { overflow:hidden; }
.ep-grid a[data-access-badge]::after { content:attr(data-access-badge); position:absolute; top:2px; right:3px; padding:1px 3px; border-radius:3px; background:rgba(0,0,0,.58); font-size:8px; font-weight:700; line-height:10px; pointer-events:none; white-space:nowrap; }
.ep-grid a[data-access-type="vip"]::after { color:#ffd21c; }
.ep-grid a[data-access-type="paid"]::after { color:#f5a623; }
.auth-title { margin:0 0 18px; color:var(--txt); font-size:20px; line-height:1.3; text-align:center; }
.auth-switch { display:block; width:100%; margin-top:2px; padding:4px 0; background:none; border:0; color:var(--muted); font-size:13px; cursor:pointer; }
.auth-switch:hover { color:var(--txt); text-decoration:underline; }
/* 竖向手势交给切集逻辑；选集面板在 feed 外，仍可正常上下滚动。 */
body.feed-mode .feed { touch-action:pan-x pinch-zoom; overscroll-behavior-y:contain; }
.sort-bar a { background:none; border:none; color:var(--muted); font-size:13px; font-weight:600; padding:8px 14px; border-radius:8px; text-decoration:none; }
.sort-bar a:hover { color:#fff; }
.sort-bar a.active { background:var(--grad); color:#fff; }
.drama-account-page { padding-top:28px; padding-bottom:64px; }
.drama-account-tabs { margin-bottom:24px; }
.drama-panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:20px 24px; }
.drama-wallet { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.drama-wallet strong { display:block; margin-top:6px; font-size:25px; color:#fff; }
.drama-wallet small { display:block; margin-top:6px; color:var(--muted); }
.drama-wallet a { color:var(--ai1); font-weight:700; white-space:nowrap; }
.drama-label { color:var(--muted); font-size:13px; }
.drama-pay-section { margin-top:34px; }
.drama-pay-section .sec-head span { color:var(--dim); font-size:12px; }
.drama-option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.drama-option { min-height:90px; text-align:left; padding:16px; border:1px solid var(--line); border-radius:8px; color:var(--txt); background:var(--card); cursor:pointer; }
.drama-option strong,.drama-option b,.drama-option small { display:block; }
.drama-option b { color:var(--gold); margin-top:8px; font-size:21px; }
.drama-option small { color:var(--muted); margin-top:5px; }
.drama-option.active { border-color:var(--brand); background:rgba(255,71,85,.09); }
.drama-channel-list { display:flex; flex-wrap:wrap; gap:10px; }
.drama-channel-list .drama-option { min-height:0; min-width:120px; text-align:center; padding:11px 18px; }
.drama-submit { margin-top:28px; min-width:220px; border:0; cursor:pointer; }
.drama-submit:disabled { opacity:.5; cursor:not-allowed; }
.drama-status { margin-top:14px; color:var(--muted); }
@media(max-width:768px) { .drama-account-page { padding-top:20px; } .drama-option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .drama-wallet { padding:16px; } .drama-submit { width:100%; } }
.drama-profile-identity { display:flex; align-items:center; gap:18px; }
.drama-profile-identity strong { display:block; font-size:20px; color:#fff; }
.drama-profile-identity small { display:block; margin-top:5px; color:var(--muted); }
.drama-profile-identity .btn { margin-left:auto; }
.drama-avatar { width:58px; height:58px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:22px; font-weight:800; }
.drama-profile-wallet { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.drama-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.drama-entry { position:relative; display:block; min-height:84px; padding:16px 35px 16px 18px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.drama-entry strong,.drama-entry small { display:block; }
.drama-entry strong { color:#fff; font-size:16px; }
.drama-entry small { color:var(--muted); margin-top:6px; font-size:12px; }
.drama-entry > span { position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:22px; }
.drama-entry:hover { border-color:var(--line2); }
.drama-follow { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.drama-follow button { border:1px solid var(--line2); background:rgba(255,255,255,.08); color:#fff; border-radius:8px; padding:9px 14px; cursor:pointer; }
.drama-settings-row { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.drama-settings-row input { min-width:0; flex:1; padding:11px 13px; border:1px solid var(--line); border-radius:8px; color:#fff; background:rgba(255,255,255,.05); }
.drama-settings-row strong,.drama-settings-row small { display:block; }
.drama-settings-row small { color:var(--muted); margin-top:5px; }
.drama-table-wrap { overflow-x:auto; }
.drama-table { width:100%; border-collapse:collapse; text-align:left; color:var(--txt); font-size:13px; }
.drama-table th,.drama-table td { padding:13px 9px; border-bottom:1px solid var(--line); }
.drama-table th { color:var(--muted); font-weight:600; white-space:nowrap; }
.drama-load-more { display:block; margin:18px auto 0; }
.cat-bar button { padding:7px 18px; border-radius:20px; background:var(--card); border:1px solid var(--line); color:var(--muted); cursor:pointer; }
.cat-bar button.active { background:var(--grad); color:#fff; border-color:transparent; }
@media(max-width:768px) { .drama-profile-wallet,.drama-entry-grid { grid-template-columns:1fr; } .drama-settings-row { flex-wrap:wrap; } .drama-settings-row input { flex-basis:100%; } .drama-profile-identity { flex-wrap:wrap; } }