/* TSmanhwa Unified Slate — shared presentation layer for public, member and staff pages. */
:root:has(body.ts-unified-theme) {
  color-scheme: dark;
}

body.ts-unified-theme {
  --ts-canvas: #1f2937;
  --ts-deep: #151e2b;
  --ts-surface: #263244;
  --ts-raised: #2d3b4f;
  --ts-text: #f8fafc;
  --ts-muted: #aab5c4;
  --ts-cyan: #32d6df;
  --ts-pink: #ff4d8d;
  --ts-line: rgba(255, 255, 255, 0.08);
  --ts-line-strong: rgba(255, 255, 255, 0.13);
  --ts-soft: rgba(255, 255, 255, 0.045);
  --ts-soft-hover: rgba(255, 255, 255, 0.075);
  --ts-shadow: 0 12px 30px rgba(4, 9, 18, 0.22);
  --ts-radius-panel: 20px;
  --ts-radius-card: 16px;
  --ts-radius-control: 14px;
  --ts-radius-row: 12px;
  --ts-radius-pill: 999px;
  --ts-speed-fast: 150ms;
  --ts-speed-base: 200ms;
  min-height: 100vh;
  color: var(--ts-text);
  font-family: "Kanit", sans-serif;
  background:
    radial-gradient(circle at 82% -10%, rgba(50, 214, 223, 0.08), transparent 30rem),
    radial-gradient(circle at 6% 34%, rgba(255, 77, 141, 0.055), transparent 32rem),
    linear-gradient(145deg, var(--ts-canvas), var(--ts-deep) 72%) !important;
  background-color: var(--ts-canvas) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body.ts-unified-theme,
body.ts-unified-theme :where(button, input, select, textarea) {
  font-family: "Kanit", sans-serif;
}

.ts-unified-theme :where(.page-wrap, main, .container, .community-shell, .profile-shell, .admin-main, .upload-studio) {
  position: relative;
}

body.ts-unified-theme .page-wrap {
  background: linear-gradient(180deg, rgba(8, 15, 27, 0.08), rgba(8, 15, 27, 0.24)) !important;
}

.ts-unified-theme :where(.topbar, .navbar, .community-topbar, .admin-header, #reader-header, #bottom-nav) {
  color: var(--ts-text);
  border-color: var(--ts-line) !important;
  background: rgba(31, 41, 55, 0.94) !important;
  box-shadow: 0 8px 24px rgba(4, 9, 18, 0.18);
}

@supports (backdrop-filter: blur(10px)) {
  .ts-unified-theme :where(.topbar, .navbar, .community-topbar, .admin-header, #reader-header, dialog, .modal-content) {
    background: rgba(31, 41, 55, 0.86) !important;
    backdrop-filter: blur(10px) saturate(115%);
  }
}

.ts-unified-theme :where(
  .panel, .card, .modal-content, dialog, .community-card, .profile-card,
  .index-section, .latest-releases-panel, .all-series-masthead, .all-series-catalog,
  .series-hero, .series-release-spotlight, .series-content-panel, .series-weekly-ranking, .series-translator-card,
  .reader-settings-panel, .reader-chapter-strip, .reader-end-box, .reader-comments-card, .chapter-rating-box,
  .community-feed-hero, .community-published-post, .community-aside-card, .creator-story-identity,
  .profile-identity, .profile-workspace, .profile-activity-panel, .public-profile-card, .public-profile-panel, .public-profile-hero,
  .premium-panel, .topup-hero, .balance-card, .login-hero, .login-card, .login-panel, .links-hero, .links-note-box,
  .admin-sidebar, .admin-panel, .form-section, .upload-section, .upload-panel, .bulk-panel, .translator-money-card
) {
  color: var(--ts-text);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius-panel) !important;
  background: linear-gradient(145deg, rgba(45, 59, 79, 0.72), rgba(38, 50, 68, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), var(--ts-shadow);
}

.ts-unified-theme :where(
  .index-catalog-card, .chapter-card, .release-card, .community-post-card, .community-feed-card,
  .profile-tool-card, .profile-metric-card, .public-post-card, .public-work-card, .profile-row,
  .premium-plan, .coin-pack, .link-card, .noti-item, .stat-card, .kpi-card, .quick-card,
  .series-card, .chapter-row, .translator-row, .member-row, .ledger-row, .announcement-card,
  .drop-zone, .upload-card, .preview-card
) {
  color: var(--ts-text);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius-card) !important;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  transition: background-color var(--ts-speed-base) ease, border-color var(--ts-speed-base) ease, transform var(--ts-speed-base) ease, box-shadow var(--ts-speed-base) ease;
}

.ts-unified-theme :where(.table-wrap, .data-table-wrap, .admin-table-wrap, .bulk-table-wrap) {
  overflow: auto;
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius-card);
  background: rgba(21, 30, 43, 0.36);
}

.ts-unified-theme :where(table) {
  color: var(--ts-text);
  border-collapse: separate;
  border-spacing: 0;
}

.ts-unified-theme :where(th) {
  color: var(--ts-muted);
  background: rgba(21, 30, 43, 0.78);
  border-color: var(--ts-line);
}

.ts-unified-theme :where(td) {
  color: var(--ts-text);
  border-color: var(--ts-line);
}

.ts-unified-theme :where(tbody tr) {
  transition: background-color var(--ts-speed-fast) ease;
}

.ts-unified-theme :where(h1, h2, h3, h4, strong, .title, .card-title) {
  color: var(--ts-text);
}

.ts-unified-theme :where(p, small, .subtitle, .muted, .meta, .panel-sub, .helper, .hint, .empty) {
  color: var(--ts-muted);
}

.ts-unified-theme :where(a) {
  text-underline-offset: 0.18em;
}

.ts-unified-theme :where(button, .button, .btn, [role="button"], input, select, textarea) {
  border-radius: var(--ts-radius-control) !important;
  border-color: var(--ts-line-strong);
  touch-action: manipulation;
  transition: color var(--ts-speed-fast) ease, background-color var(--ts-speed-fast) ease, border-color var(--ts-speed-fast) ease, opacity var(--ts-speed-fast) ease, transform var(--ts-speed-fast) ease;
}

.ts-unified-theme :where(input, select, textarea) {
  color: var(--ts-text);
  background: rgba(21, 30, 43, 0.72);
  border: 1px solid var(--ts-line-strong);
}

.ts-unified-theme :where(input, textarea)::placeholder {
  color: rgba(170, 181, 196, 0.7);
}

.ts-unified-theme :where(input, select, textarea):focus {
  border-color: rgba(50, 214, 223, 0.62);
  box-shadow: 0 0 0 3px rgba(50, 214, 223, 0.12);
  outline: none;
}

.ts-unified-theme :where(button, .button, .btn, [role="button"]):disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.ts-unified-theme :where(.primary, .btn-primary, [data-primary-action], .premium-buy-button, .community-button--primary) {
  color: #07141d;
  border-color: transparent;
  background: linear-gradient(135deg, var(--ts-cyan), #76e5cf);
  box-shadow: 0 8px 22px rgba(50, 214, 223, 0.16);
}

.ts-unified-theme :where(.danger, .btn-danger, [data-status="error"], [aria-invalid="true"]) {
  border-color: rgba(255, 77, 141, 0.34);
  color: #ffb1ca;
}

.ts-unified-theme :where(.active, [aria-current="page"], [aria-selected="true"]) {
  border-color: rgba(50, 214, 223, 0.42);
}

.ts-unified-theme :where(.badge, .chip, .pill, .status-badge, .coin-pill, .genre-tag, .admin-btn) {
  border-radius: var(--ts-radius-pill) !important;
}

/* Win over legacy page-level !important radii without changing DOM hooks. */
body.ts-unified-theme.ts-unified-theme :where(button, .button, .btn, [role="button"], input, select, textarea) {
  border-radius: var(--ts-radius-control) !important;
}

body.ts-unified-theme.ts-unified-theme :where(.badge, .chip, .pill, .status-badge, .coin-pill, .genre-tag, .admin-btn) {
  border-radius: var(--ts-radius-pill) !important;
}

body.ts-unified-theme.ts-unified-theme :where(.panel, .card, .modal-content, dialog, .community-card, .profile-card, .admin-panel, .form-section, .upload-section, .upload-panel, .bulk-panel) {
  border-radius: var(--ts-radius-panel) !important;
}

body.ts-unified-theme.ts-unified-theme :where(.index-catalog-card, .chapter-card, .release-card, .community-post-card, .community-feed-card, .profile-tool-card, .profile-metric-card, .public-post-card, .public-work-card, .profile-row, .premium-plan, .coin-pack, .link-card, .noti-item, .stat-card, .kpi-card, .quick-card, .series-card, .chapter-row, .translator-row, .member-row, .ledger-row, .announcement-card, .drop-zone, .upload-card, .preview-card) {
  border-radius: var(--ts-radius-card) !important;
}

.ts-unified-theme :where(.badge-free, .status-success, [data-status="success"]) { color: #71e6b7; }
.ts-unified-theme :where(.badge-premium, .coin-pill, [data-status="coin"]) { color: #ffd071; }
.ts-unified-theme :where(.status-error, [aria-invalid="true"], [data-status="error"]) { color: #ff9fbd; }

.ts-unified-theme :where(.admin-layout) {
  background: transparent;
}

.ts-unified-theme :where(.admin-sidebar, .sidebar) {
  border-radius: 0 var(--ts-radius-panel) var(--ts-radius-panel) 0;
}

.ts-unified-theme :where(.sidebar-item, .navbar-links a, .community-nav a) {
  border-radius: var(--ts-radius-control);
}

.ts-unified-theme :where(.sidebar-item.active, .navbar-links a.active, .community-nav a.active) {
  color: var(--ts-text);
  background: rgba(50, 214, 223, 0.1);
  box-shadow: inset 3px 0 var(--ts-cyan);
}

.ts-unified-theme :where(dialog, .modal, .modal-content, .drawer, .sheet) {
  border-radius: var(--ts-radius-panel);
  overscroll-behavior: contain;
}

.ts-unified-theme :where(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 5rem;
  text-wrap: balance;
}

.ts-unified-theme :where(.site-announcements__viewport, .site-announcements__slide) {
  border-radius: var(--ts-radius-panel);
  border-color: var(--ts-line);
  box-shadow: var(--ts-shadow);
}

/* Index: legacy member-home selectors are intentionally specific, so the
   shared layer needs an equally explicit bridge instead of relying on :where(). */
body.ts-unified-theme[data-page-slug="index"] {
  --member-panel: rgba(38, 50, 68, 0.82);
  --member-card: rgba(31, 43, 59, 0.9);
  --member-line: rgba(255, 255, 255, 0.11);
  --member-muted: var(--ts-muted);
  background:
    radial-gradient(circle at 82% 2%, rgba(50, 214, 223, 0.13), transparent 34rem),
    radial-gradient(circle at 5% 38%, rgba(255, 77, 141, 0.09), transparent 36rem),
    linear-gradient(145deg, #1f2937 0%, #151e2b 74%, #1f1828 120%) !important;
  background-color: var(--ts-canvas) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body.ts-unified-theme[data-page-slug="index"] .page-wrap {
  background: linear-gradient(180deg, rgba(8, 15, 27, 0.08), rgba(8, 15, 27, 0.24)) !important;
}

body.ts-unified-theme[data-page-slug="index"] .topbar {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(135deg, rgba(38, 50, 68, 0.92), rgba(21, 30, 43, 0.9)) !important;
  box-shadow: 0 14px 36px rgba(4, 9, 18, 0.24), inset 0 -1px rgba(50, 214, 223, 0.08);
}

body.ts-unified-theme[data-page-slug="index"] .member-block {
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: var(--ts-radius-panel);
  background: linear-gradient(145deg, rgba(45, 59, 79, 0.76), rgba(21, 30, 43, 0.92));
  box-shadow: 0 18px 42px rgba(4, 9, 18, 0.24), inset 0 1px rgba(255, 255, 255, 0.04);
}

body.ts-unified-theme[data-page-slug="index"] .member-catalog-head input,
body.ts-unified-theme[data-page-slug="index"] .index-catalog-head input {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(21, 30, 43, 0.82);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

body.ts-unified-theme[data-page-slug="index"] .member-catalog-card {
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--ts-radius-card);
  background: linear-gradient(150deg, rgba(45, 59, 79, 0.7), rgba(21, 30, 43, 0.96));
  box-shadow: 0 12px 28px rgba(4, 9, 18, 0.22), inset 0 1px rgba(255, 255, 255, 0.035);
  transition: border-color var(--ts-speed-base) ease, box-shadow var(--ts-speed-base) ease, transform var(--ts-speed-base) ease;
}

body.ts-unified-theme[data-page-slug="index"] .member-catalog-cover {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: var(--ts-radius-card) 0 0 var(--ts-radius-card);
  box-shadow: none;
}

body.ts-unified-theme[data-page-slug="index"] .member-catalog-body {
  padding: 6px 8px;
}

body.ts-unified-theme[data-page-slug="index"] .member-chapter-row {
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: var(--ts-radius-row);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
}

body.ts-unified-theme[data-page-slug="index"] .member-chapter-row:first-child {
  border-color: rgba(255, 77, 141, 0.46);
  background: linear-gradient(90deg, rgba(255, 77, 141, 0.11), rgba(50, 214, 223, 0.045));
}

body.ts-unified-theme[data-page-slug="index"] .member-load-more {
  border-color: rgba(50, 214, 223, 0.26);
  color: var(--ts-text);
  background: linear-gradient(135deg, rgba(50, 214, 223, 0.12), rgba(255, 77, 141, 0.1));
  box-shadow: 0 10px 24px rgba(4, 9, 18, 0.18);
}

/* Keep dense role workspaces inside the viewport while their tables scroll locally. */
.ts-unified-theme :where(.admin-layout, .admin-main, .layout-grid, .panel, .admin-panel, .table-wrap) {
  min-width: 0;
  max-width: 100%;
}

.ts-unified-theme :where(.layout-grid > *) {
  min-width: 0;
  max-width: 100%;
}

body.ts-unified-theme :where(.admin-layout) {
  width: min(calc(100% - 32px), 1580px);
}

body.ts-unified-theme :where(.admin-main) {
  flex: 1 1 0;
  width: auto !important;
}

.ts-unified-theme :where(.table-wrap) {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.ts-unified-theme :where(.site-announcements__slide)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.08) 48%, transparent 66%);
  opacity: 0.42;
}

.ts-unified-theme .reader-page-image {
  filter: none !important;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.ts-unified-theme :where(.reader-canvas, #reader-content) {
  background: #080d14;
}

.ts-unified-theme [data-ts-reveal] {
  opacity: 1;
  transform: none;
}

.ts-motion-ready .ts-unified-theme [data-ts-reveal]:not(.is-ts-visible) {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

.ts-motion-ready .ts-unified-theme [data-ts-reveal].is-ts-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--ts-speed-base) ease, transform var(--ts-speed-base) ease;
}

body.ts-unified-theme :focus-visible {
  outline: 3px solid var(--ts-cyan);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .ts-unified-theme :where(.index-catalog-card, .chapter-card, .release-card, .community-post-card, .community-feed-card, .profile-tool-card, .premium-plan, .coin-pack, .link-card, .noti-item, .stat-card, .kpi-card, .quick-card):is(:hover, :focus-within) {
    border-color: rgba(50, 214, 223, 0.24);
    background: rgba(255, 255, 255, 0.065);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 12px 26px rgba(4, 9, 18, 0.2);
    transform: translateY(-2px);
  }

  .ts-unified-theme :where(button, .button, .btn, [role="button"]):not(:disabled):hover {
    border-color: rgba(50, 214, 223, 0.34);
    background-color: var(--ts-soft-hover);
  }

  body.ts-unified-theme[data-page-slug="index"] .member-catalog-card:is(:hover, :focus-within) {
    border-color: rgba(50, 214, 223, 0.38);
    box-shadow: 0 18px 36px rgba(4, 9, 18, 0.26), 0 0 0 1px rgba(50, 214, 223, 0.08);
    transform: translateY(-2px);
  }
}

@media (max-width: 780px) {
  body.ts-unified-theme {
    background: linear-gradient(160deg, var(--ts-canvas), var(--ts-deep) 70%);
  }

  .ts-unified-theme :where(.topbar, .navbar, .community-topbar, .admin-header, #reader-header, dialog, .modal-content) {
    backdrop-filter: none;
  }

  .ts-unified-theme :where(.topbar, .navbar, .community-topbar, #reader-header) {
    padding-top: max(var(--safe-top, 0px), env(safe-area-inset-top));
  }

  .ts-unified-theme #bottom-nav {
    padding-bottom: max(var(--safe-bottom, 0px), env(safe-area-inset-bottom));
  }

  .ts-unified-theme :where(.admin-sidebar, .sidebar) {
    border-radius: 0;
  }

  body.ts-unified-theme :where(.admin-layout, .admin-main) {
    width: 100% !important;
  }

  .ts-unified-theme :where(.panel, .card, .chapter-card, .community-card, .profile-card, .premium-plan, .coin-pack, .noti-item, .admin-panel) {
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 8px 18px rgba(4, 9, 18, 0.16);
  }

  .ts-page-not-found :where(.emoji, .num) {
    animation: none !important;
    transform: none !important;
  }

  body.ts-unified-theme[data-page-slug="index"] .topbar {
    border-radius: 0 0 16px 16px;
  }

  body.ts-unified-theme[data-page-slug="index"] .member-block {
    border-radius: 18px;
  }

  body.ts-unified-theme[data-page-slug="index"] .member-catalog-cover {
    width: 100%;
    margin: 0;
    border-radius: 12px 0 0 12px;
  }

  body.ts-unified-theme[data-page-slug="index"] .member-catalog-body {
    padding: 7px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts-unified-theme *,
  .ts-unified-theme *::before,
  .ts-unified-theme *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ts-motion-ready .ts-unified-theme [data-ts-reveal] {
    opacity: 1;
    transform: none;
  }
}