/* Template 2 — Bootstrap-based, 白底黑字 (light) theme.
   Layered on top of vendor/bootstrap.min.css; only the bits Bootstrap doesn't
   give us out of the box (brand theming, bottom nav, payment options, chat,
   player overlay) live here. */

:root {
  --t2-accent: #1677ff;
  --t2-accent-soft: #e9f1ff;
  --t2-ink: #1a1a1a;
  --t2-muted: #8a8f99;
  --t2-line: #ececf0;
  --t2-bg: #ffffff;
  --t2-surface: #f6f7f9;
}

html, body { background: var(--t2-bg); }
body {
  color: var(--t2-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
#app { max-width: 980px; margin: 0 auto; min-height: 100vh; }

a { color: var(--t2-accent); text-decoration: none; }
.text-accent { color: var(--t2-accent) !important; }
.bg-accent { background: var(--t2-accent) !important; color: #fff !important; }
.text-muted-2 { color: var(--t2-muted) !important; }

/* Buttons: a monochrome-friendly primary that still reads as "the action". */
.btn-accent { background: var(--t2-accent); border-color: var(--t2-accent); color: #fff; }
.btn-accent:hover { filter: brightness(.94); color: #fff; }
.btn-accent:disabled { opacity: .55; }

/* App top bar (home) + simple page header */
.t2-topbar {
  position: sticky; top: 0; z-index: 1020; background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--t2-line);
}
.t2-brand { font-weight: 700; font-size: 1.15rem; color: var(--t2-ink); }
.t2-pagehead {
  position: sticky; top: 0; z-index: 1020; background: #fff;
  border-bottom: 1px solid var(--t2-line); height: 52px;
}

/* Category filter chips (level 2/3 within the active level-1 category) */
.t2-chips { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem 0; }
.t2-chips::-webkit-scrollbar { display: none; }
.t2-chips { scrollbar-width: none; }
.t2-chip {
  flex: 0 0 auto; border: 1px solid var(--t2-line); background: #fff; color: #555;
  border-radius: 999px; padding: .28rem .9rem; font-size: .85rem; white-space: nowrap; cursor: pointer;
}
.t2-chip.active { background: var(--t2-accent); border-color: var(--t2-accent); color: #fff; }
.t2-chip.sub.active { background: #111; border-color: #111; }

/* Video cards */
.t2-card { border: 1px solid var(--t2-line); border-radius: 12px; overflow: hidden; background: #fff; height: 100%; }
.t2-thumb { position: relative; aspect-ratio: 16/9; background: var(--t2-surface); overflow: hidden; }
.t2-thumb img { width: 100%; height: 100%; object-fit: cover; }
.t2-thumb .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #c7ccd4; }
.t2-badge { position: absolute; top: 6px; left: 6px; font-size: .68rem; padding: .1rem .4rem; border-radius: 6px; color: #fff; }
.t2-badge.free { background: #16a34a; }
.t2-badge.vip { background: #f59e0b; }
.t2-card-title { font-size: .86rem; line-height: 1.3; color: var(--t2-ink); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.t2-card-meta { font-size: .72rem; color: var(--t2-muted); }

/* Bottom navigation — horizontally scrollable: 首页 + 其余一级分类 + 充值 + 用户中心 */
.t2-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: #fff; border-top: 1px solid var(--t2-line);
  display: flex; align-items: stretch; overflow-x: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.t2-bottom-nav::-webkit-scrollbar { display: none; }
.t2-bottom-nav { scrollbar-width: none; }
.t2-navitem {
  flex: 1 0 auto; min-width: 64px; height: 56px; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--t2-muted); font-size: .68rem; cursor: pointer; padding: 0 .35rem;
}
.t2-navitem svg { width: 22px; height: 22px; }
.t2-navitem.active { color: var(--t2-accent); }
.t2-navitem .lbl { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2-has-bottomnav { padding-bottom: 64px; }

/* Auth pages */
.t2-auth-wrap { max-width: 380px; margin: 0 auto; }
.t2-tab-switch { display: flex; background: var(--t2-surface); border-radius: 10px; padding: 4px; }
.t2-tab-switch button { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: .45rem; font-size: .9rem; color: #666; }
.t2-tab-switch button.active { background: var(--t2-accent); color: #fff; }
.t2-qr-drop { border: 2px dashed var(--t2-line); border-radius: 12px; padding: 2rem 1rem; text-align: center; cursor: pointer; color: var(--t2-muted); }
.t2-qr-drop:hover { border-color: var(--t2-accent); }

/* Payment option buttons with brand images */
.t2-pay-opt {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  border: 1px solid var(--t2-line); background: #fff; border-radius: 10px; padding: .55rem .7rem; cursor: pointer;
  font-size: .85rem; color: #333;
}
.t2-pay-opt.active { border-color: var(--t2-accent); box-shadow: 0 0 0 1px var(--t2-accent) inset; }
.t2-pay-opt img { width: 24px; height: 24px; flex: 0 0 24px; }
.t2-pay-opt .wallet { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #16a34a; }

/* VIP plan cards */
.t2-plan { flex: 0 0 auto; width: 110px; border: 2px solid var(--t2-line); border-radius: 12px; padding: .7rem; text-align: center; cursor: pointer; background: #fff; position: relative; }
.t2-plan.active { border-color: var(--t2-accent); background: var(--t2-accent-soft); }
.t2-plan .price { font-size: 1.25rem; font-weight: 700; }

/* User center */
.t2-profile { background: linear-gradient(135deg, var(--t2-accent), #5b9bff); color: #fff; border-radius: 0 0 18px 18px; }
.t2-avatar { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; }
.t2-stat { background: rgba(255,255,255,.16); border-radius: 12px; padding: .6rem; text-align: center; }
.t2-stat .v { font-weight: 700; font-size: 1.05rem; }
.t2-stat .l { font-size: .7rem; opacity: .9; }
.t2-stat[role="button"] { cursor: pointer; transition: background .15s; }
.t2-stat[role="button"]:active { background: rgba(255,255,255,.3); }

/* Floating back-to-top button (waterfall mode) — half-transparent, bottom-right
   above the bottom nav. */
.t2-back-top {
  position: fixed; right: 16px; bottom: 80px; z-index: 1035;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25); backdrop-filter: blur(4px); cursor: pointer;
  transition: background .15s, opacity .15s;
}
.t2-back-top:hover { background: rgba(0,0,0,.55); }
.t2-back-top:active { background: rgba(0,0,0,.65); }

/* Promotion banner inside the user-center profile header */
.t2-promo-banner {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px; padding: .55rem .8rem; font-size: .82rem; line-height: 1.5;
}
.t2-promo-banner b { color: #ffe08a; }
.t2-grid-fn { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }

/* 后台分类「同列显示数量」(img_cols) on the home video grid — mobile only,
   matching row-cols-sm-3's own breakpoint (Bootstrap's row-cols-N sets
   width via a plain class selector, so an attribute selector of equal-or-
   higher specificity here overrides it regardless of stylesheet order). */
@media (max-width: 575.98px) {
  .row[data-cols="1"] > * { width: 100%; }
  .row[data-cols="2"] > * { width: 50%; }
  .row[data-cols="3"] > * { width: 33.33333%; }
  .row[data-cols="4"] > * { width: 25%; }
  .row[data-cols="5"] > * { width: 20%; }
  .row[data-cols="6"] > * { width: 16.66667%; }
}
.t2-fn {
  background: #fff; border: 1px solid var(--t2-line); border-radius: 12px; padding: .8rem .3rem;
  display: flex; flex-direction: column; align-items: center; gap: .4rem; cursor: pointer; color: #444; font-size: .74rem;
}
.t2-fn:hover { border-color: var(--t2-accent); color: var(--t2-accent); }
.t2-fn .ico { width: 26px; height: 26px; color: var(--t2-accent); }

/* Chat (customer service) */
.t2-chat-area { background: var(--t2-surface); }
.t2-bubble { max-width: 75%; border-radius: 14px; padding: .5rem .75rem; font-size: .88rem; word-break: break-word; }
.t2-bubble.me { background: var(--t2-accent); color: #fff; border-bottom-right-radius: 4px; }
.t2-bubble.cs { background: #fff; border: 1px solid var(--t2-line); color: #222; border-bottom-left-radius: 4px; }
.t2-cs-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: #fff; flex: 0 0 32px; }

/* Player */
.t2-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.t2-player video { position: absolute; inset: 0; width: 100%; height: 100%; }
.t2-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }

/* Notice popup body */
.t2-notice-body img { max-width: 100%; border-radius: 8px; }
.t2-scroll-x { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem; }
.t2-scroll-x::-webkit-scrollbar { display: none; }
.t2-scroll-x { scrollbar-width: none; }

/* Credits (积分) recharge — big single input + quick-amount chips */
.t2-credits-card { background: linear-gradient(135deg, #f7f9ff, #eef3ff); border-radius: 14px; }
.t2-credits-input {
  display: flex; align-items: center; background: #fff;
  border: 1px solid var(--t2-line); border-radius: 12px; padding: .5rem .9rem;
}
.t2-credits-input input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 1.5rem; font-weight: 700; color: var(--t2-ink); -moz-appearance: textfield;
}
.t2-credits-input input::-webkit-outer-spin-button,
.t2-credits-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.t2-credits-input input::placeholder { font-size: .95rem; font-weight: 400; color: var(--t2-muted); }
.t2-credits-input .unit { margin-left: .5rem; font-size: .9rem; color: var(--t2-muted); }
.t2-credit-quick { display: flex; gap: .6rem; margin-top: .9rem; }
.t2-credit-chip {
  flex: 1; border: 1px solid var(--t2-line); background: #fff; color: #444;
  border-radius: 10px; padding: .5rem 0; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.t2-credit-chip:hover { border-color: var(--t2-accent); color: var(--t2-accent); }
.t2-credit-chip.active { background: var(--t2-accent); border-color: var(--t2-accent); color: #fff; }

/* VIP exclusive benefits — decorative background image */
.t2-vip-benefits {
  position: relative; overflow: hidden; color: #fdf6e8;
  background: #2a2140 url('/t2/assets/vip-bg.svg') center / cover no-repeat;
}
.t2-vip-benefits .card-body { position: relative; z-index: 1; }
.t2-vip-benefits h6 { color: #ffe1a3; }
.t2-vip-benefits .col { color: #fdf6e8 !important; }
.t2-vip-crown { font-size: 1.1rem; line-height: 1; }
.t2-vip-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
  background: rgba(255, 211, 107, .22); color: #ffd36b; font-size: .7rem; font-weight: 700;
}