/* /otherLinks/mainFiles/css/variables.css */
/*
 * TrendingPunjabi - Canonical CSS Variables
 * Single source of truth for all design tokens
 * v1.0 - March 2026
 */

/* ==========================================
   DARK THEME (Default)
   ========================================== */
:root {
  /* Colors - Primary palette */
  --tp-bg-body: #0d1117;
  --tp-bg-card: #161b22;
  --tp-bg-elevated: #1c2128;
  --tp-bg-input: #0d1117;
  --tp-bg-surface: #12121a;

  /* Text */
  --tp-text-primary: #e6edf3;
  --tp-text-secondary: #8b949e;
  --tp-text-muted: #848d97; /* Fixed: was #6e7681, now meets WCAG AA 4.5:1 */

  /* Accent - Gold */
  --tp-accent: #e8b84a;
  --tp-accent-hover: #d4a53f;
  --tp-accent-soft: rgba(232, 184, 74, 0.15);
  --tp-accent-glow: rgba(232, 184, 74, 0.12);

  /* Semantic */
  --tp-link: #58a6ff;
  --tp-success: #3fb950;
  --tp-danger: #f85149;
  --tp-warning: #d29922;

  /* Borders */
  --tp-border: #30363d;
  --tp-border-light: #21262d;

  /* Shadows */
  --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --tp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --tp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Table */
  --tp-table-header: #161b22;
  --tp-table-row-odd: #0d1117;
  --tp-table-row-even: #161b22;
  --tp-table-hover: rgba(232, 184, 74, 0.08);

  /* Data colors */
  --tp-color-views: #4ecdc4;
  --tp-color-rating: #ffc107;
  --tp-color-likes: #7ee787;
  --tp-color-rank: #e8b84a;
  --tp-color-song: #e8b84a;
  --tp-color-artist: #e6edf3;

  /* Rank medals */
  --tp-gold: linear-gradient(135deg, #fbbf24, #f59e0b);
  --tp-silver: linear-gradient(135deg, #9ca3af, #6b7280);
  --tp-bronze: linear-gradient(135deg, #d97706, #b45309);

  /* Spacing scale */
  --tp-space-xs: 4px;
  --tp-space-sm: 8px;
  --tp-space-md: 16px;
  --tp-space-lg: 24px;
  --tp-space-xl: 32px;
  --tp-space-2xl: 48px;
  --tp-space-3xl: 64px;

  /* Border radius */
  --tp-radius-sm: 6px;
  --tp-radius-md: 10px;
  --tp-radius-lg: 14px;
  --tp-radius-xl: 20px;
  --tp-radius-full: 9999px;

  /* Typography */
  --tp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tp-font-size-xs: 0.7rem;
  --tp-font-size-sm: 0.8rem;
  --tp-font-size-base: 0.9rem;
  --tp-font-size-md: 1rem;
  --tp-font-size-lg: 1.15rem;
  --tp-font-size-xl: 1.4rem;
  --tp-font-size-2xl: 1.8rem;
  --tp-font-size-3xl: 2.2rem;

  /* Transitions */
  --tp-transition-fast: 0.15s ease;
  --tp-transition: 0.2s ease;
  --tp-transition-slow: 0.3s ease;

  /* Navbar */
  --tp-navbar-bg: rgba(10, 10, 15, 0.97);
  --tp-navbar-border: rgba(255, 255, 255, 0.08);
  --tp-dropdown-bg: #12121a;
  --tp-bottom-nav-bg: rgba(10, 10, 15, 0.98);
}

/* ==========================================
   LIGHT THEME
   ========================================== */
[data-theme="light"] {
  --tp-bg-body: #ffffff;
  --tp-bg-card: #f6f8fa;
  --tp-bg-elevated: #ffffff;
  --tp-bg-input: #ffffff;
  --tp-bg-surface: #f6f8fa;

  --tp-text-primary: #1f2328;
  --tp-text-secondary: #656d76;
  --tp-text-muted: #8b949e;

  --tp-accent: #b8860b;
  --tp-accent-hover: #a07608;
  --tp-accent-soft: rgba(184, 134, 11, 0.1);
  --tp-accent-glow: rgba(184, 134, 11, 0.08);

  --tp-link: #0969da;
  --tp-success: #1a7f37;
  --tp-danger: #cf222e;
  --tp-warning: #9a6700;

  --tp-border: #d1d9e0;
  --tp-border-light: #e6eaef;

  --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --tp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --tp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  --tp-table-header: #f6f8fa;
  --tp-table-row-odd: #ffffff;
  --tp-table-row-even: #f8f8f8;
  --tp-table-hover: rgba(184, 134, 11, 0.06);

  --tp-color-views: #0d9488;
  --tp-color-rating: #d97706;
  --tp-color-likes: #16a34a;
  --tp-color-rank: #b8860b;
  --tp-color-song: #996b00;
  --tp-color-artist: #1f2328;

  --tp-navbar-bg: rgba(255, 255, 255, 0.98);
  --tp-navbar-border: #e5e5e5;
  --tp-dropdown-bg: #ffffff;
  --tp-bottom-nav-bg: rgba(255, 255, 255, 0.98);
}

/* ==========================================
   FOCUS INDICATORS (Accessibility)
   ========================================== */
:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* /otherLinks/mainFiles/css/miniAll.css */
@charset "UTF-8";:root {--bs-blue: #0d6efd;--bs-indigo: #6610f2;--bs-purple: #6f42c1;--bs-pink: #d63384;--bs-red: #dc3545;--bs-orange: #fd7e14;--bs-yellow: #ffc107;--bs-green: #198754;--bs-teal: #20c997;--bs-cyan: #0dcaf0;--bs-white: #fff;--bs-gray: #6c757d;--bs-gray-dark: #343a40;--bs-primary: #0d6efd;--bs-secondary: #6c757d;--bs-success: #198754;--bs-info: #0dcaf0;--bs-warning: #ffc107;--bs-danger: #dc3545;--bs-light: #f8f9fa;--bs-dark: #212529;--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) }*, ::after, ::before {box-sizing: border-box }@media (prefers-reduced-motion:no-preference) {:root {scroll-behavior: smooth }}body {margin: 0;font-family: var(--bs-font-sans-serif);font-size: 1rem;font-weight: 400;line-height: 1.5;color: #fffb00;background-color: #fff;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: transparent }.iframerow{display:none;}.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-top: 0;margin-bottom: .5rem;font-weight: 500;line-height: 1.2 }.h1, h1 {font-size: calc(1.375rem + 1.5vw) }@media (min-width:1200px) {.h1, h1 {font-size: 2.5rem }}.h2, h2 {font-size: calc(1.325rem + .9vw) }@media (min-width:1200px) {.h2, h2 {font-size: 2rem }}.h3, h3 {font-size: calc(1.3rem + .6vw) }@media (min-width:1200px) {.h3, h3 {font-size: 1.75rem }}.h4, h4 {font-size: calc(1.275rem + .3vw) }@media (min-width:1200px) {.h4, h4 {font-size: 1.5rem }}.h5, h5 {font-size: 1.25rem }.h6, h6 {font-size: 1rem }p {margin-top: 0;margin-bottom: 1rem }address {margin-bottom: 1rem;font-style: normal;line-height: inherit }ul {padding-left: 2rem }ul {margin-top: 0;margin-bottom: 1rem }ul ul {margin-bottom: 0 }.small, small {font-size: .875em }a {color: #0d6efd;text-decoration: none;}td:hover {color: #0a58ca;}a:hover {color: #0a58ca;}a:not([href]):not([class]), a:not([href]):not([class]):hover {color: inherit;text-decoration: none }code {font-family: var(--bs-font-monospace);font-size: 1em;direction: ltr;unicode-bidi: bidi-override }code {font-size: .875em;color: #d63384;word-wrap: break-word }a>code {color: inherit }img {vertical-align: middle }table {caption-side: bottom;border-collapse: collapse }label {display: inline-block }button {border-radius: 0 }button:focus:not(:focus-visible) {outline: 0 }button, input {margin: 0;font-family: inherit;font-size: inherit;line-height: inherit }button {text-transform: none }[role=button] {cursor: pointer }[list]::-webkit-calendar-picker-indicator {display: none }[type=button], [type=reset], [type=submit], button {-webkit-appearance: button }[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {cursor: pointer }::-moz-focus-inner {padding: 0;border-style: none }::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-year-field {padding: 0 }::-webkit-inner-spin-button {height: auto }[type=search] {outline-offset: -2px;-webkit-appearance: textfield }::-webkit-search-decoration {-webkit-appearance: none }::-webkit-color-swatch-wrapper {padding: 0 }::file-selector-button {font: inherit }::-webkit-file-upload-button {font: inherit;-webkit-appearance: button }[hidden] {display: none !important }.display-1 {font-size: calc(1.625rem + 4.5vw);font-weight: 300;line-height: 1.2 }@media (min-width:1200px) {.display-1 {font-size: 5rem }}.display-2 {font-size: calc(1.575rem + 3.9vw);font-weight: 300;line-height: 1.2 }@media (min-width:1200px) {.display-2 {font-size: 4.5rem }}.display-3 {font-size: calc(1.525rem + 3.3vw);font-weight: 300;line-height: 1.2 }@media (min-width:1200px) {.display-3 {font-size: 4rem }}.display-4 {font-size: calc(1.475rem + 2.7vw);font-weight: 300;line-height: 1.2 }@media (min-width:1200px) {.display-4 {font-size: 3.5rem }}.display-5 {font-size: calc(1.425rem + 2.1vw);font-weight: 300;line-height: 1.2 }@media (min-width:1200px) {.display-5 {font-size: 3rem }}.display-6 {font-size: calc(1.375rem + 1.5vw);font-weight: 300;line-height: 1.2 }@media (min-width:1200px) {.display-6 {font-size: 2.5rem }}.list-unstyled {padding-left: 0;list-style: none }.img-fluid {max-width: 100%;height: auto }.container, .container-fluid, .container-lg, .container-md {width: 100%;padding-right: var(--bs-gutter-x, .75rem);padding-left: var(--bs-gutter-x, .75rem);margin-right: auto;margin-left: auto }@media (min-width:576px) {.container {max-width: 540px }}@media (min-width:768px) {.container, .container-md {max-width: 720px }}@media (min-width:992px) {.container, .container-lg, .container-md {max-width: 960px }}@media (min-width:1200px) {.container, .container-lg, .container-md {max-width: 1140px }}@media (min-width:1400px) {.container, .container-lg, .container-md {max-width: 1320px }}.row {--bs-gutter-x: 1.5rem;--bs-gutter-y: 0;display: flex; justify-content: space-between; flex-wrap: wrap;margin-top: calc(var(--bs-gutter-y) * -1);margin-right: calc(var(--bs-gutter-x)/ -2);margin-left: calc(var(--bs-gutter-x)/ -2) }.row>* {flex-shrink: 0;width: 100%;max-width: 100%;padding-right: calc(var(--bs-gutter-x)/ 2);padding-left: calc(var(--bs-gutter-x)/ 2);margin-top: var(--bs-gutter-y) }.col {flex: 1 0 0% }.row-cols-auto>* {flex: 0 0 auto;width: auto }.row-cols-1>* {flex: 0 0 auto;width: 100% }.row-cols-2>* {flex: 0 0 auto;width: 50% }.row-cols-3>* {flex: 0 0 auto;width: 33.3333333333% }.row-cols-4>* {flex: 0 0 auto;width: 25% }.row-cols-5>* {flex: 0 0 auto;width: 20% }.row-cols-6>* {flex: 0 0 auto;width: 16.6666666667% }.col-auto {flex: 0 0 auto;width: auto }.col-1 {flex: 0 0 auto;width: 8.3333333333% }.col-2 {flex: 0 0 auto;width: 16.6666666667% }.col-3 {flex: 0 0 auto;width: 25% }.col-4 {flex: 0 0 auto;width: 33.3333333333% }.col-5 {flex: 0 0 auto;width: 41.6666666667% }.col-6 {flex: 0 0 auto;width: 50% }.col-7 {flex: 0 0 auto;width: 58.3333333333% }.col-8 {flex: 0 0 auto;width: 66.6666666667% }.col-9 {flex: 0 0 auto;width: 75% }.col-10 {flex: 0 0 auto;width: 83.3333333333% }.col-11 {flex: 0 0 auto;width: 91.6666666667% }.col-12 {flex: 0 0 auto;width: 100% }.g-0 {--bs-gutter-x: 0 }.g-0 {--bs-gutter-y: 0 }.g-1 {--bs-gutter-x: 0.25rem }.g-1 {--bs-gutter-y: 0.25rem }.g-2 {--bs-gutter-x: 0.5rem }.g-2 {--bs-gutter-y: 0.5rem }.g-3 {--bs-gutter-x: 1rem }.g-3 {--bs-gutter-y: 1rem }.g-4 {--bs-gutter-x: 1.5rem }.g-4 {--bs-gutter-y: 1.5rem }.g-5 {--bs-gutter-x: 3rem }.g-5 {--bs-gutter-y: 3rem }@media (min-width:768px) {.col-md {flex: 1 0 0% }.row-cols-md-auto>* {flex: 0 0 auto;width: auto }.row-cols-md-1>* {flex: 0 0 auto;width: 100% }.row-cols-md-2>* {flex: 0 0 auto;width: 50% }.row-cols-md-3>* {flex: 0 0 auto;width: 33.3333333333% }.row-cols-md-4>* {flex: 0 0 auto;width: 25% }.row-cols-md-5>* {flex: 0 0 auto;width: 20% }.row-cols-md-6>* {flex: 0 0 auto;width: 16.6666666667% }.col-md-auto {flex: 0 0 auto;width: auto }.col-md-1 {flex: 0 0 auto;width: 8.3333333333% }.col-md-2 {flex: 0 0 auto;width: 16.6666666667% }.col-md-3 {flex: 0 0 auto;width: 25% }.col-md-4 {flex: 0 0 auto;width: 33.3333333333% }.col-md-5 {flex: 0 0 auto;width: 41.6666666667% }.col-md-6 {flex: 0 0 auto;width: 50% }.col-md-7 {flex: 0 0 auto;width: 58.3333333333% }.col-md-8 {flex: 0 0 auto;width: 66.6666666667% }.col-md-9 {flex: 0 0 auto;width: 75% }.col-md-10 {flex: 0 0 auto;width: 83.3333333333% }.col-md-11 {flex: 0 0 auto;width: 91.6666666667% }.col-md-12 {flex: 0 0 auto;width: 100% }.g-md-0 {--bs-gutter-x: 0 }.g-md-0 {--bs-gutter-y: 0 }.g-md-1 {--bs-gutter-x: 0.25rem }.g-md-1 {--bs-gutter-y: 0.25rem }.g-md-2 {--bs-gutter-x: 0.5rem }.g-md-2 {--bs-gutter-y: 0.5rem }.g-md-3 {--bs-gutter-x: 1rem }.g-md-3 {--bs-gutter-y: 1rem }.g-md-4 {--bs-gutter-x: 1.5rem }.g-md-4 {--bs-gutter-y: 1.5rem }.g-md-5 {--bs-gutter-x: 3rem }.g-md-5 {--bs-gutter-y: 3rem }}@media (min-width:992px) {.col-lg {flex: 1 0 0% }.row-cols-lg-auto>* {flex: 0 0 auto;width: auto }.row-cols-lg-1>* {flex: 0 0 auto;width: 100% }.row-cols-lg-2>* {flex: 0 0 auto;width: 50% }.row-cols-lg-3>* {flex: 0 0 auto;width: 33.3333333333% }.row-cols-lg-4>* {flex: 0 0 auto;width: 25% }.row-cols-lg-5>* {flex: 0 0 auto;width: 20% }.row-cols-lg-6>* {flex: 0 0 auto;width: 16.6666666667% }.col-lg-auto {flex: 0 0 auto;width: auto }.col-lg-1 {flex: 0 0 auto;width: 8.3333333333% }.col-lg-2 {flex: 0 0 auto;width: 16.6666666667% }.col-lg-3 {flex: 0 0 auto;width: 25% }.col-lg-4 {flex: 0 0 auto;width: 33.3333333333% }.col-lg-5 {flex: 0 0 auto;width: 41.6666666667% }.col-lg-6 {flex: 0 0 auto;width: 50% }.col-lg-7 {flex: 0 0 auto;width: 58.3333333333% }.col-lg-8 {flex: 0 0 auto;width: 66.6666666667% }.col-lg-9 {flex: 0 0 auto;width: 75% }.col-lg-10 {flex: 0 0 auto;width: 83.3333333333% }.col-lg-11 {flex: 0 0 auto;width: 91.6666666667% }.col-lg-12 {flex: 0 0 auto;width: 100% }.g-lg-0 {--bs-gutter-x: 0 }.g-lg-0 {--bs-gutter-y: 0 }.g-lg-1 {--bs-gutter-x: 0.25rem }.g-lg-1 {--bs-gutter-y: 0.25rem }.g-lg-2 {--bs-gutter-x: 0.5rem }.g-lg-2 {--bs-gutter-y: 0.5rem }.g-lg-3 {--bs-gutter-x: 1rem }.g-lg-3 {--bs-gutter-y: 1rem }.g-lg-4 {--bs-gutter-x: 1.5rem }.g-lg-4 {--bs-gutter-y: 1.5rem }.g-lg-5 {--bs-gutter-x: 3rem }.g-lg-5 {--bs-gutter-y: 3rem }}.table {--bs-table-bg: transparent;--bs-table-striped-color: #212529;--bs-table-striped-bg: rgba(0, 0, 0, 0.05);--bs-table-active-color: #212529;--bs-table-active-bg: rgba(0, 0, 0, 0.1);--bs-table-hover-color: #212529;--bs-table-hover-bg: rgba(0, 0, 0, 0.075);width: 100%;margin-bottom: 1rem;color: #212529;vertical-align: top;border-color: #dee2e6 }.table>:not(caption)>*>* {padding: .5rem .5rem;background-color: var(--bs-table-bg);border-bottom-width: 1px;box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg) }.table>:not(:last-child)>:last-child>* {border-bottom-color: currentColor }.table-active {--bs-table-accent-bg: var(--bs-table-active-bg);color: var(--bs-table-active-color) }.table-primary {--bs-table-bg: #cfe2ff;--bs-table-striped-bg: #c5d7f2;--bs-table-striped-color: #000;--bs-table-active-bg: #bacbe6;--bs-table-active-color: #000;--bs-table-hover-bg: #bfd1ec;--bs-table-hover-color: #000;color: #000;border-color: #bacbe6 }.table-info {--bs-table-bg: #cff4fc;--bs-table-striped-bg: #c5e8ef;--bs-table-striped-color: #000;--bs-table-active-bg: #badce3;--bs-table-active-color: #000;--bs-table-hover-bg: #bfe2e9;--bs-table-hover-color: #000;color: #000;border-color: #badce3 }.table-dark {--bs-table-bg: #212529;--bs-table-striped-bg: #2c3034;--bs-table-striped-color: #fff;--bs-table-active-bg: #373b3e;--bs-table-active-color: #fff;--bs-table-hover-bg: #323539;--bs-table-hover-color: #fff;color: #fff;border-color: #373b3e }.table-responsive {overflow-x: auto;-webkit-overflow-scrolling: touch }@media (max-width:767.98px) {.table-responsive-md {overflow-x: auto;-webkit-overflow-scrolling: touch }}@media (max-width:991.98px) {.table-responsive-lg {overflow-x: auto;-webkit-overflow-scrolling: touch }}.form-label {margin-bottom: .5rem }.col-form-label {padding-top: calc(.375rem + 1px);padding-bottom: calc(.375rem + 1px);margin-bottom: 0;font-size: inherit;line-height: 1.5 }.col-form-label-lg {padding-top: calc(.5rem + 1px);padding-bottom: calc(.5rem + 1px);font-size: 1.25rem }.form-text {margin-top: .25rem;font-size: .875em;color: #6c757d }.form-control {display: block;width: 100%;padding: .375rem .75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #212529;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: .25rem;transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out }@media (prefers-reduced-motion:reduce) {.form-control {transition: none }}.form-control[type=file] {overflow: hidden }.form-control[type=file]:not(:disabled):not([readonly]) {cursor: pointer }.form-control:focus {color: #212529;background-color: #fff;border-color: #86b7fe;outline: 0;box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) }.form-control::-webkit-date-and-time-value {height: 1.5em }.form-control::-moz-placeholder {color: #6c757d;opacity: 1 }.form-control::placeholder {color: #6c757d;opacity: 1 }.form-control:disabled, .form-control[readonly] {background-color: #e9ecef;opacity: 1 }.form-control::file-selector-button {padding: .375rem .75rem;margin: -.375rem -.75rem;-webkit-margin-end: .75rem;margin-inline-end: .75rem;color: #212529;background-color: #e9ecef;pointer-events: none;border-color: inherit;border-style: solid;border-width: 0;border-inline-end-width: 1px;border-radius: 0;transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out }@media (prefers-reduced-motion:reduce) {.form-control::file-selector-button {transition: none }}.form-control:hover:not(:disabled):not([readonly])::file-selector-button {background-color: #dde0e3 }.form-control::-webkit-file-upload-button {padding: .375rem .75rem;margin: -.375rem -.75rem;-webkit-margin-end: .75rem;margin-inline-end: .75rem;color: #212529;background-color: #e9ecef;pointer-events: none;border-color: inherit;border-style: solid;border-width: 0;border-inline-end-width: 1px;border-radius: 0;-webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out }@media (prefers-reduced-motion:reduce) {.form-control::-webkit-file-upload-button {-webkit-transition: none;transition: none }}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {background-color: #dde0e3 }.form-control-lg {min-height: calc(1.5em + 1rem + 2px);padding: .5rem 1rem;font-size: 1.25rem;border-radius: .3rem }.form-control-lg::file-selector-button {padding: .5rem 1rem;margin: -.5rem -1rem;-webkit-margin-end: 1rem;margin-inline-end: 1rem }.form-control-lg::-webkit-file-upload-button {padding: .5rem 1rem;margin: -.5rem -1rem;-webkit-margin-end: 1rem;margin-inline-end: 1rem }.input-group {position: relative;display: flex;flex-wrap: wrap;align-items: stretch;width: 100% }.input-group>.form-control {position: relative;flex: 1 1 auto;width: 1%;min-width: 0 }.input-group>.form-control:focus {z-index: 3 }.input-group-text {display: flex;align-items: center;padding: .375rem .75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #212529;text-align: center;white-space: nowrap;background-color: #e9ecef;border: 1px solid #ced4da;border-radius: .25rem }.input-group-lg>.form-control, .input-group-lg>.input-group-text {padding: .5rem 1rem;font-size: 1.25rem;border-radius: .3rem }.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {border-top-right-radius: 0;border-bottom-right-radius: 0 }.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {margin-left: -1px;border-top-left-radius: 0;border-bottom-left-radius: 0 }.collapse:not(.show) {display: none }.dropdown {position: relative }.dropdown-toggle {white-space: nowrap }.dropdown-toggle::after {display: inline-block;margin-left: .255em;vertical-align: .255em;content: "";border-top: .3em solid;border-right: .3em solid transparent;border-bottom: 0;border-left: .3em solid transparent }.dropdown-toggle:empty::after {margin-left: 0 }.dropdown-menu {position: absolute;top: 100%;z-index: 1000;display: none;min-width: 10rem;padding: .5rem 0;margin: 0;font-size: 1rem;color: #212529;text-align: left;list-style: none;background-color: #fff;background-clip: padding-box;border: 1px solid rgba(0, 0, 0, .15);border-radius: .25rem }.dropdown-menu[data-bs-popper] {left: 0;margin-top: .125rem }.dropdown-menu-start {--bs-position: start }.dropdown-menu-start[data-bs-popper] {right: auto;left: 0 }.dropdown-menu-end {--bs-position: end }.dropdown-menu-end[data-bs-popper] {right: 0;left: auto }@media (min-width:768px) {.dropdown-menu-md-start {--bs-position: start }.dropdown-menu-md-start[data-bs-popper] {right: auto;left: 0 }.dropdown-menu-md-end {--bs-position: end }.dropdown-menu-md-end[data-bs-popper] {right: 0;left: auto }}@media (min-width:992px) {.dropdown-menu-lg-start {--bs-position: start }.dropdown-menu-lg-start[data-bs-popper] {right: auto;left: 0 }.dropdown-menu-lg-end {--bs-position: end }.dropdown-menu-lg-end[data-bs-popper] {right: 0;left: auto }}.dropdown-item {display: block;width: 100%;padding: .25rem 1rem;clear: both;font-weight: 400;color: #212529;text-align: inherit;text-decoration: none;white-space: nowrap;background-color: transparent;border: 0 }.dropdown-item:focus, .dropdown-item:hover {color: #1e2125;background-color: #e9ecef }.dropdown-item.active, .dropdown-item:active {color: #fff;text-decoration: none;background-color: #0d6efd }.dropdown-item:disabled {color: #adb5bd;pointer-events: none;background-color: transparent }.dropdown-menu.show {display: block }.dropdown-header {display: block;padding: .5rem 1rem;margin-bottom: 0;font-size: .875rem;color: #6c757d;white-space: nowrap }.dropdown-item-text {display: block;padding: .25rem 1rem;color: #212529 }.dropdown-menu-dark {color: #dee2e6;background-color: #343a40;border-color: rgba(0, 0, 0, .15) }.dropdown-menu-dark .dropdown-item {color: #dee2e6 }.dropdown-menu-dark .dropdown-item:focus, .dropdown-menu-dark .dropdown-item:hover {color: #fff;background-color: rgba(255, 255, 255, .15) }.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {color: #fff;background-color: #0d6efd }.dropdown-menu-dark .dropdown-item:disabled {color: #adb5bd }.dropdown-menu-dark .dropdown-item-text {color: #dee2e6 }.dropdown-menu-dark .dropdown-header {color: #adb5bd }.nav {display: flex;flex-wrap: wrap;padding-left: 0;margin-bottom: 0;list-style: none }.nav-link {display: block;padding: .5rem 1rem;text-decoration: none;transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out }@media (prefers-reduced-motion:reduce) {.nav-link {transition: none }}.navbar {position: relative;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;padding-top: .5rem;padding-bottom: .5rem }.navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md {display: flex;flex-wrap: inherit;align-items: center;justify-content: space-between }.navbar-brand {padding-top: .3125rem;padding-bottom: .3125rem;margin-right: 1rem;font-size: 1.25rem;text-decoration: none;white-space: nowrap }.navbar-nav {display: flex;flex-direction: column;padding-left: 0;margin-bottom: 0;list-style: none }.navbar-nav .nav-link {padding-right: 0;padding-left: 0 }.navbar-nav .dropdown-menu {position: static }.navbar-text {padding-top: .5rem;padding-bottom: .5rem }.navbar-collapse {flex-basis: 100%;flex-grow: 1;align-items: center }.navbar-toggler {padding: .25rem .75rem;font-size: 1.25rem;line-height: 1;background-color: transparent;border: 1px solid transparent;border-radius: .25rem;transition: box-shadow .15s ease-in-out }@media (prefers-reduced-motion:reduce) {.navbar-toggler {transition: none }}.navbar-toggler:hover {text-decoration: none }.navbar-toggler:focus {text-decoration: none;outline: 0;box-shadow: 0 0 0 .25rem }.navbar-toggler-icon {display: inline-block;width: 1.5em;height: 1.5em;vertical-align: middle;background-repeat: no-repeat;background-position: center;background-size: 100% }@media (min-width:768px) {.navbar-expand-md {flex-wrap: nowrap;justify-content: flex-start }.navbar-expand-md .navbar-nav {flex-direction: row }.navbar-expand-md .navbar-nav .dropdown-menu {position: absolute }.navbar-expand-md .navbar-nav .nav-link {padding-right: .5rem;padding-left: .5rem }.navbar-expand-md .navbar-collapse {display: flex !important;flex-basis: auto }.navbar-expand-md .navbar-toggler {display: none }}@media (min-width:992px) {.navbar-expand-lg {flex-wrap: nowrap;justify-content: flex-start }.navbar-expand-lg .navbar-nav {flex-direction: row }.navbar-expand-lg .navbar-nav .dropdown-menu {position: absolute }.navbar-expand-lg .navbar-nav .nav-link {padding-right: .5rem;padding-left: .5rem }.navbar-expand-lg .navbar-collapse {display: flex !important;flex-basis: auto }.navbar-expand-lg .navbar-toggler {display: none }}.navbar-expand {flex-wrap: nowrap;justify-content: flex-start }.navbar-expand .navbar-nav {flex-direction: row }.navbar-expand .navbar-nav .dropdown-menu {position: absolute }.navbar-expand .navbar-nav .nav-link {padding-right: .5rem;padding-left: .5rem }.navbar-expand .navbar-collapse {display: flex !important;flex-basis: auto }.navbar-expand .navbar-toggler {display: none }.navbar-dark .navbar-brand {color: #fff }.navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover {color: #fff }.navbar-dark .navbar-nav .nav-link {color: rgba(255, 255, 255, .55) }.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {color: rgba(255, 255, 255, .75) }.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link {color: #fff }.navbar-dark .navbar-toggler {color: rgba(255, 255, 255, .55);border-color: rgba(255, 255, 255, .1) }.navbar-dark .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") }.navbar-dark .navbar-text {color: rgba(255, 255, 255, .55) }.navbar-dark .navbar-text a, .navbar-dark .navbar-text a:focus, .navbar-dark .navbar-text a:hover {color: #fff }.card {position: relative;display: flex;flex-direction: column;min-width: 0;word-wrap: break-word;background-color: #fff;background-clip: border-box;border: 1px solid rgba(0, 0, 0, .125);border-radius: .25rem }.card>.list-group {border-top: inherit;border-bottom: inherit }.card>.list-group:first-child {border-top-width: 0;border-top-left-radius: calc(.25rem - 1px);border-top-right-radius: calc(.25rem - 1px) }.card>.list-group:last-child {border-bottom-width: 0;border-bottom-right-radius: calc(.25rem - 1px);border-bottom-left-radius: calc(.25rem - 1px) }.card>.card-header+.list-group, .card>.list-group+.card-footer {border-top: 0 }.card-body {flex: 1 1 auto;padding: 1rem 1rem }.card-title {margin-bottom: .5rem }.card-text:last-child {margin-bottom: 0 }.card-link:hover {text-decoration: none }.card-link+.card-link {margin-left: 1rem }.card-header {padding: .5rem 1rem;margin-bottom: 0;background-color: rgba(0, 0, 0, .03);border-bottom: 1px solid rgba(0, 0, 0, .125) }.card-header:first-child {border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0 }.card-footer {padding: .5rem 1rem;background-color: rgba(0, 0, 0, .03);border-top: 1px solid rgba(0, 0, 0, .125) }.card-footer:last-child {border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px) }.card-img, .card-img-top {width: 100% }.card-img, .card-img-top {border-top-left-radius: calc(.25rem - 1px);border-top-right-radius: calc(.25rem - 1px) }.card-img {border-bottom-right-radius: calc(.25rem - 1px);border-bottom-left-radius: calc(.25rem - 1px) }.card-group>.card {margin-bottom: .75rem }@media (min-width:576px) {.card-group {display: flex;flex-flow: row wrap }.card-group>.card {flex: 1 0 0%;margin-bottom: 0 }.card-group>.card+.card {margin-left: 0;border-left: 0 }.card-group>.card:not(:last-child) {border-top-right-radius: 0;border-bottom-right-radius: 0 }.card-group>.card:not(:last-child) .card-header, .card-group>.card:not(:last-child) .card-img-top {border-top-right-radius: 0 }.card-group>.card:not(:last-child) .card-footer {border-bottom-right-radius: 0 }.card-group>.card:not(:first-child) {border-top-left-radius: 0;border-bottom-left-radius: 0 }.card-group>.card:not(:first-child) .card-header, .card-group>.card:not(:first-child) .card-img-top {border-top-left-radius: 0 }.card-group>.card:not(:first-child) .card-footer {border-bottom-left-radius: 0 }}.page-link {position: relative;display: block;color: #0d6efd;text-decoration: none;background-color: #fff;border: 1px solid #dee2e6;transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out }@media (prefers-reduced-motion:reduce) {.page-link {transition: none }}.page-link:hover {z-index: 2;color: #0a58ca;background-color: #e9ecef;border-color: #dee2e6 }.page-link:focus {z-index: 3;color: #0a58ca;background-color: #e9ecef;outline: 0;box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) }.page-item:not(:first-child) .page-link {margin-left: -1px }.page-item.active .page-link {z-index: 3;color: #fff;background-color: #0d6efd;border-color: #0d6efd }.page-link {padding: .375rem .75rem }.page-item:first-child .page-link {border-top-left-radius: .25rem;border-bottom-left-radius: .25rem }.page-item:last-child .page-link {border-top-right-radius: .25rem;border-bottom-right-radius: .25rem }@-webkit-keyframes progress-bar-stripes {0% {background-position-x: 1rem }}@keyframes progress-bar-stripes {0% {background-position-x: 1rem }}.list-group {display: flex;flex-direction: column;padding-left: 0;margin-bottom: 0;border-radius: .25rem }.list-group-item-action {width: 100%;color: #495057;text-align: inherit }.list-group-item-action:focus, .list-group-item-action:hover {z-index: 1;color: #495057;text-decoration: none;background-color: #f8f9fa }.list-group-item-action:active {color: #212529;background-color: #e9ecef }.list-group-item {position: relative;display: block;padding: .5rem 1rem;color: #212529;text-decoration: none;background-color: #fff;border: 1px solid rgba(0, 0, 0, .125) }.list-group-item:first-child {border-top-left-radius: inherit;border-top-right-radius: inherit }.list-group-item:last-child {border-bottom-right-radius: inherit;border-bottom-left-radius: inherit }.list-group-item:disabled {color: #6c757d;pointer-events: none;background-color: #fff }.list-group-item.active {z-index: 2;color: #fff;background-color: #0d6efd;border-color: #0d6efd }.list-group-item+.list-group-item {border-top-width: 0 }.list-group-item+.list-group-item.active {margin-top: -1px;border-top-width: 1px }.list-group-item-primary {color: #084298;background-color: #cfe2ff }.list-group-item-primary.list-group-item-action:focus, .list-group-item-primary.list-group-item-action:hover {color: #084298;background-color: #bacbe6 }.list-group-item-primary.list-group-item-action.active {color: #fff;background-color: #084298;border-color: #084298 }.list-group-item-info {color: #055160;background-color: #cff4fc }.list-group-item-info.list-group-item-action:focus, .list-group-item-info.list-group-item-action:hover {color: #055160;background-color: #badce3 }.list-group-item-info.list-group-item-action.active {color: #fff;background-color: #055160;border-color: #055160 }.list-group-item-dark {color: #141619;background-color: #d3d3d4 }.list-group-item-dark.list-group-item-action:focus, .list-group-item-dark.list-group-item-action:hover {color: #141619;background-color: #bebebf }.list-group-item-dark.list-group-item-action.active {color: #fff;background-color: #141619;border-color: #141619 }@-webkit-keyframes spinner-border {to {transform: rotate(360deg) }}@keyframes spinner-border {to {transform: rotate(360deg) }}@-webkit-keyframes spinner-grow {0% {transform: scale(0) }50% {opacity: 1;transform: none }}@keyframes spinner-grow {0% {transform: scale(0) }50% {opacity: 1;transform: none }}.link-primary {color: #0d6efd }.link-primary:focus, .link-primary:hover {color: #0a58ca }.link-info {color: #0dcaf0 }.link-info:focus, .link-info:hover {color: #3dd5f3 }.link-dark {color: #212529 }.link-dark:focus, .link-dark:hover {color: #1a1e21 }.align-top {vertical-align: top !important }.align-text-top {vertical-align: text-top !important }.d-block {display: block !important }.d-table {display: table !important }.d-table-row {display: table-row !important }.d-flex {display: flex !important }.top-0 {top: 0 !important }.top-50 {top: 50% !important }.top-100 {top: 100% !important }.start-0 {left: 0 !important }.start-50 {left: 50% !important }.start-100 {left: 100% !important }.end-0 {right: 0 !important }.end-50 {right: 50% !important }.end-100 {right: 100% !important }.border {border: 1px solid #dee2e6 !important }.border-0 {border: 0 !important }.border-top {border-top: 1px solid #dee2e6 !important }.border-top-0 {border-top: 0 !important }.border-end {border-right: 1px solid #dee2e6 !important }.border-end-0 {border-right: 0 !important }.border-start {border-left: 1px solid #dee2e6 !important }.border-start-0 {border-left: 0 !important }.border-primary {border-color: #0d6efd !important }.border-info {border-color: #0dcaf0 !important }.border-dark {border-color: #212529 !important }.border-1 {border-width: 1px !important }.border-2 {border-width: 2px !important }.border-3 {border-width: 3px !important }.border-4 {border-width: 4px !important }.border-5 {border-width: 5px !important }.h-25 {height: 25% !important }.h-50 {height: 50% !important }.h-75 {height: 75% !important }.h-100 {height: 100% !important }.h-auto {height: auto !important }.flex-row {flex-direction: row !important }.flex-column {flex-direction: column !important }.flex-wrap {flex-wrap: wrap !important }.justify-content-start {justify-content: flex-start !important }.justify-content-end {justify-content: flex-end !important }.justify-content-center {justify-content: center !important }.align-items-start {align-items: flex-start !important }.align-items-end {align-items: flex-end !important }.align-items-center {align-items: center !important }.align-content-start {align-content: flex-start !important }.align-content-end {align-content: flex-end !important }.align-content-center {align-content: center !important }.mt-0 {margin-top: 0 !important }.mt-1 {margin-top: .25rem !important }.mt-2 {margin-top: .5rem !important }.mt-3 {margin-top: 1rem !important }.mt-4 {margin-top: 1.5rem !important }.mt-5 {margin-top: 3rem !important }.mt-auto {margin-top: auto !important }.mb-0 {margin-bottom: 0 !important }.mb-1 {margin-bottom: .25rem !important }.mb-2 {margin-bottom: .5rem !important }.mb-3 {margin-bottom: 1rem !important }.mb-4 {margin-bottom: 1.5rem !important }.mb-5 {margin-bottom: 3rem !important }.mb-auto {margin-bottom: auto !important }.p-0 {padding: 0 !important }.p-1 {padding: .25rem !important }.p-2 {padding: .5rem !important }.p-3 {padding: 1rem !important }.p-4 {padding: 1.5rem !important }.p-5 {padding: 3rem !important }.px-0 {padding-right: 0 !important;padding-left: 0 !important }.px-1 {padding-right: .25rem !important;padding-left: .25rem !important }.px-2 {padding-right: .5rem !important;padding-left: .5rem !important }.px-3 {padding-right: 1rem !important;padding-left: 1rem !important }.px-4 {padding-right: 1.5rem !important;padding-left: 1.5rem !important }.px-5 {padding-right: 3rem !important;padding-left: 3rem !important }.py-0 {padding-top: 0 !important;padding-bottom: 0 !important }.py-1 {padding-top: .25rem !important;padding-bottom: .25rem !important }.py-2 {padding-top: .5rem !important;padding-bottom: .5rem !important }.py-3 {padding-top: 1rem !important;padding-bottom: 1rem !important }.py-4 {padding-top: 1.5rem !important;padding-bottom: 1.5rem !important }.py-5 {padding-top: 3rem !important;padding-bottom: 3rem !important }.text-start {text-align: left !important }.text-end {text-align: right !important }.text-center {text-align: center !important }.text-wrap {white-space: normal !important }.text-primary {color: #0d6efd !important }.text-info {color: #0dcaf0 !important }.text-dark {color: #212529 !important }.text-body {color: #212529 !important }.text-muted {color: #6c757d !important }.bg-primary {background-color: #0d6efd !important }.bg-info {background-color: #0dcaf0 !important }.bg-dark {background-color: #212529 !important }.bg-body {background-color: #fff !important }.rounded {border-radius: .25rem !important }.rounded-0 {border-radius: 0 !important }.rounded-1 {border-radius: .2rem !important }.rounded-2 {border-radius: .25rem !important }.rounded-3 {border-radius: .3rem !important }.rounded-top {border-top-left-radius: .25rem !important;border-top-right-radius: .25rem !important }.rounded-end {border-top-right-radius: .25rem !important;border-bottom-right-radius: .25rem !important }.rounded-start {border-bottom-left-radius: .25rem !important;border-top-left-radius: .25rem !important }@media (min-width:768px) {.d-md-block {display: block !important }.d-md-table {display: table !important }.d-md-table-row {display: table-row !important }.d-md-flex {display: flex !important }.flex-md-row {flex-direction: row !important }.flex-md-column {flex-direction: column !important }.flex-md-wrap {flex-wrap: wrap !important }.justify-content-md-start {justify-content: flex-start !important }.justify-content-md-end {justify-content: flex-end !important }.justify-content-md-center {justify-content: center !important }.align-items-md-start {align-items: flex-start !important }.align-items-md-end {align-items: flex-end !important }.align-items-md-center {align-items: center !important }.align-content-md-start {align-content: flex-start !important }.align-content-md-end {align-content: flex-end !important }.align-content-md-center {align-content: center !important }.mt-md-0 {margin-top: 0 !important }.mt-md-1 {margin-top: .25rem !important }.mt-md-2 {margin-top: .5rem !important }.mt-md-3 {margin-top: 1rem !important }.mt-md-4 {margin-top: 1.5rem !important }.mt-md-5 {margin-top: 3rem !important }.mt-md-auto {margin-top: auto !important }.mb-md-0 {margin-bottom: 0 !important }.mb-md-1 {margin-bottom: .25rem !important }.mb-md-2 {margin-bottom: .5rem !important }.mb-md-3 {margin-bottom: 1rem !important }.mb-md-4 {margin-bottom: 1.5rem !important }.mb-md-5 {margin-bottom: 3rem !important }.mb-md-auto {margin-bottom: auto !important }.p-md-0 {padding: 0 !important }.p-md-1 {padding: .25rem !important }.p-md-2 {padding: .5rem !important }.p-md-3 {padding: 1rem !important }.p-md-4 {padding: 1.5rem !important }.p-md-5 {padding: 3rem !important }.px-md-0 {padding-right: 0 !important;padding-left: 0 !important }.px-md-1 {padding-right: .25rem !important;padding-left: .25rem !important }.px-md-2 {padding-right: .5rem !important;padding-left: .5rem !important }.px-md-3 {padding-right: 1rem !important;padding-left: 1rem !important }.px-md-4 {padding-right: 1.5rem !important;padding-left: 1.5rem !important }.px-md-5 {padding-right: 3rem !important;padding-left: 3rem !important }.py-md-0 {padding-top: 0 !important;padding-bottom: 0 !important }.py-md-1 {padding-top: .25rem !important;padding-bottom: .25rem !important }.py-md-2 {padding-top: .5rem !important;padding-bottom: .5rem !important }.py-md-3 {padding-top: 1rem !important;padding-bottom: 1rem !important }.py-md-4 {padding-top: 1.5rem !important;padding-bottom: 1.5rem !important }.py-md-5 {padding-top: 3rem !important;padding-bottom: 3rem !important }.text-md-start {text-align: left !important }.text-md-end {text-align: right !important }.text-md-center {text-align: center !important }}@media (min-width:992px) {.d-lg-block {display: block !important }.d-lg-table {display: table !important }.d-lg-table-row {display: table-row !important }.d-lg-flex {display: flex !important }.flex-lg-row {flex-direction: row !important }.flex-lg-column {flex-direction: column !important }.flex-lg-wrap {flex-wrap: wrap !important }.justify-content-lg-start {justify-content: flex-start !important }.justify-content-lg-end {justify-content: flex-end !important }.justify-content-lg-center {justify-content: center !important }.align-items-lg-start {align-items: flex-start !important }.align-items-lg-end {align-items: flex-end !important }.align-items-lg-center {align-items: center !important }.align-content-lg-start {align-content: flex-start !important }.align-content-lg-end {align-content: flex-end !important }.align-content-lg-center {align-content: center !important }.mt-lg-0 {margin-top: 0 !important }.mt-lg-1 {margin-top: .25rem !important }.mt-lg-2 {margin-top: .5rem !important }.mt-lg-3 {margin-top: 1rem !important }.mt-lg-4 {margin-top: 1.5rem !important }.mt-lg-5 {margin-top: 3rem !important }.mt-lg-auto {margin-top: auto !important }.mb-lg-0 {margin-bottom: 0 !important }.mb-lg-1 {margin-bottom: .25rem !important }.mb-lg-2 {margin-bottom: .5rem !important }.mb-lg-3 {margin-bottom: 1rem !important }.mb-lg-4 {margin-bottom: 1.5rem !important }.mb-lg-5 {margin-bottom: 3rem !important }.mb-lg-auto {margin-bottom: auto !important }.p-lg-0 {padding: 0 !important }.p-lg-1 {padding: .25rem !important }.p-lg-2 {padding: .5rem !important }.p-lg-3 {padding: 1rem !important }.p-lg-4 {padding: 1.5rem !important }.p-lg-5 {padding: 3rem !important }.px-lg-0 {padding-right: 0 !important;padding-left: 0 !important }.px-lg-1 {padding-right: .25rem !important;padding-left: .25rem !important }.px-lg-2 {padding-right: .5rem !important;padding-left: .5rem !important }.px-lg-3 {padding-right: 1rem !important;padding-left: 1rem !important }.px-lg-4 {padding-right: 1.5rem !important;padding-left: 1.5rem !important }.px-lg-5 {padding-right: 3rem !important;padding-left: 3rem !important }.py-lg-0 {padding-top: 0 !important;padding-bottom: 0 !important }.py-lg-1 {padding-top: .25rem !important;padding-bottom: .25rem !important }.py-lg-2 {padding-top: .5rem !important;padding-bottom: .5rem !important }.py-lg-3 {padding-top: 1rem !important;padding-bottom: 1rem !important }.py-lg-4 {padding-top: 1.5rem !important;padding-bottom: 1.5rem !important }.py-lg-5 {padding-top: 3rem !important;padding-bottom: 3rem !important }.text-lg-start {text-align: left !important }.text-lg-end {text-align: right !important }.text-lg-center {text-align: center !important }}.jumbotron {padding: 2rem 1rem;margin-bottom: 2rem;background-color: #e9ecef;border-radius: .3rem }@media (min-width:576px) {.jumbotron {padding: 4rem 2rem }}.jumbotron-fluid {padding-right: 0;padding-left: 0;border-radius: 0 }label input {background: rgba(34, 25, 11, .671) !important;color: #ffc792;box-shadow: 2px 2px 5px 1px #ff8623;margin-bottom: 5px }@media only screen and (max-width:800px) {h1 {font-size: 190% !important }}@media screen and (min-width:800px) {h1 {font-size: 3.7vw }}@media screen and (min-width:1200px) {h1 {font-size: 3.2vw}}html {background-color: black;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover }body {background: 0 0;font-family: Poppins, sans-serif }h1 {margin-top: 5px;text-align: center;line-height: 1.15;font-weight: 800;letter-spacing: -.02em }h5 {color: #ffdfb5;text-shadow: 0 0 0 #cf0606bd;font-size: 140% }#footer h2, h3, h4 {color: #ffdfb5 !important;text-shadow: 1px 2px 1px #cf060685;text-transform: uppercase;font-size: 120%;font-weight: 700 }p {color: #f3d949;text-shadow: 1px 2px 3px #310f0f;font-size: 105%;font-weight: 700 }.container {padding: 5px;margin: auto }main {padding-bottom: 5px;margin-bottom: 5px;}label {color: #fff;font-weight: 700;font-size: 14px;}#navmain {font-size: 100%;font-weight: 700;background: #000 !important;box-shadow: 0 2px 2px rgba(255, 102, 0, .2) }#logo {height: 40px;margin-top: 0 }.nav-link {color: #ffdfb5 !important;text-shadow: 0px 1px 2px #8b0101, -1px -1px 1px #7c0b0b, 2px 2px 1px #8b0101;font-size: 140%;font-weight: 100 }.dropdown-menu {background-color: #0c0e0f }#dropdown-menu {box-shadow: 0 2px 2px #d64400 }.megasubmenu {padding: 1rem }.inner-column {border-right: 1px #d64400 solid }.dropdown-item {color: #f3d949;font-size: 105%;font-weight: 700;text-align: center }@media all and (min-width:600px) {.megasubmenu {left: 100%;top: 0;min-height: 100%;min-width: 500px }.dropdown-menu>li:hover .megasubmenu {display: block }}@media all and (max-width:600px) {.megasubmenu {left: 100%;top: 0;min-height: 100%;min-width: 500px }.dropdown-menu>li:hover .megasubmenu {display: block }}.jumbotron {background: linear-gradient(to right, rgba(0, 0, 0, .4), rgba(0, 0, 0, .8), rgba(0, 0, 0, .7), rgba(0, 0, 0, .4));box-shadow: 0 4px 3px rgba(255, 102, 0, .2) }.jumbotron p {font-size: 135% }.jumbotron #myButtons {font-size: 90%;width: 50%;height: 50px;max-width: 145px;max-height: 80px;min-width: 50px;min-height: 30px }.card-img-top {opacity: .8;border-radius: 5px;border: #000 1px solid }.card {width: auto;background: #000;box-shadow: 0 3px 1px #d14200c5;border-radius: 5px }#myButtons {width: 35%;height: 25%;font-size: 80%;text-transform: uppercase;letter-spacing: 1.5px;font-weight: 700;color: #000;background-color: #fff;border: none;border-radius: 5px;box-shadow: 0 7px 5px rgba(252, 114, 1, .5);transition: all .3s ease 0s;cursor: pointer;outline: 0;padding: 0;max-width: 100px;max-height: 45px;min-width: 50px;min-height: 30px;margin-bottom: 5px }#myButtons:hover {background-color: #2ee59d;box-shadow: 0 15px 10px rgba(46, 229, 157, .4);text-shadow: 1px 2px 3px #310f0f;color: #fff;transform: translateY(-5px) }#subscribebutton {background: #fff !important;color: #000 !important;font-weight: 700 }#subscribebutton:hover {background-color: #2ee59d !important;box-shadow: 0 15px 10px rgba(46, 229, 157, .4);text-shadow: 1px 2px 3px #310f0f;color: #fff !important;transform: translateY(-7px) }@media (max-width:768px) {.jumbotron h1 {font-size: 2em; -1px -1px 2px #cf0606 }.jumbotron p {font-size: 1em }}@media (min-width:768px) {.jumbotron h1 {font-size: 3em }}@media (min-width:992px) {.jumbotron h1 {font-size: 4em }}@media (min-width:1200px) {.jumbotron h1 {font-size: 6em }}#bottomcards {margin:auto }.border-left {border-left: 1px solid #dee2e6 !important }#footer #myButtons {width: 30% !important;font-size: 80% }#footer {margin-top: 20px;background: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, 1), rgba(0, 0, 0, .9), rgba(0, 0, 0, .3));box-shadow: 0 -4px 3px rgba(255, 102, 0, .2) }#footer a {color: #f0fff0;text-decoration: none }#footer p {color: #f0fff0;font-size: 90% }#footer form {box-shadow: 0 7px 5px rgba(252, 114, 1, .5) }footer {padding-top: 4em }.footer-02 {background: #131719 }.footer-02 .footer-heading {font-size: 19px;color: rgba(255, 255, 255, .9);margin-bottom: 20px }.footer-02 .footer-heading .logo {color: #fff;text-transform: uppercase }.footer-02 a {color: #bba387 }.footer-02 p {color: rgba(255, 255, 255, .3) }.footer-02 .copyright {color: rgba(255, 255, 255, .4);font-size: 14px }.footer-02 .list-unstyled li a {color: rgba(255, 255, 255, .4) }.footer-02 .list-unstyled li a:hover {color: #fff }.footer-02 .list-unstyled a {color: rgba(255, 255, 255, .4) }.footer-02 .list-unstyled a:hover {color: #fff }.footer-02 .subscribe {margin-top: -105px }.footer-02 .subscribe-form {border-radius: 40px;background: #fff;padding: 3px;-webkit-box-shadow: 0 -12px 21px -15px rgba(0, 0, 0, .1);-moz-box-shadow: 0 -12px 21px -15px rgba(0, 0, 0, .1);box-shadow: 0 -12px 21px -15px rgba(0, 0, 0, .1) }.footer-02 .subscribe-form .form-group {position: relative;margin-bottom: 0;border-radius: 0 }.footer-02 .subscribe-form .form-group input {background: 0 0 !important;border: none !important;outline: 0 !important;color: rgba(0, 0, 0, .3) !important;font-size: 16px;height: 56px;border-radius: 0 }.footer-02 .subscribe-form .form-group input::-webkit-input-placeholder {color: rgba(0, 0, 0, .3) !important }.footer-02 .subscribe-form .form-group input::-moz-placeholder {color: rgba(0, 0, 0, .3) !important }.footer-02 .subscribe-form .form-group input:-ms-input-placeholder {color: rgba(0, 0, 0, .3) !important }.footer-02 .subscribe-form .form-group input:-moz-placeholder {color: rgba(0, 0, 0, .3) !important }.footer-02 .subscribe-form .form-group input:focus {outline: 0 !important;-webkit-box-shadow: none;box-shadow: none }.footer-02 .subscribe-form .form-group .submit {color: #fff !important;display: block;width: 150px;height: 56px;font-size: 14px;background: #007bff;border: none;letter-spacing: 1px;text-transform: uppercase;border-radius: 40px }.footer-02 .subscribe-form .form-group .submit:focus, .footer-02 .subscribe-form .form-group .submit:hover {text-decoration: none !important;outline: 0 !important }.footer-02 .partner-wrap {border-top: 1px solid rgba(255, 255, 255, .05);border-bottom: 1px solid rgba(255, 255, 255, .05);padding: 1em 0 }.footer-02 .partner-wrap h3 {font-size: 14px;color: rgba(255, 255, 255, .4) }.footer-02 .partner-wrap .partner-name a {margin-right: 10px;font-size: 13px;text-transform: uppercase;color: rgba(255, 255, 255, .4) }.footer-02 .partner-wrap .partner-name a span {color: #fff }.footer-02 .border-left {border-color: rgba(255, 255, 255, .425) !important }.border-left {border-left: 1px grey }@media (max-width:1199.98px) {.footer-02 .border-left {border: none }}@font-face {font-family: 'Patua One';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/patuaone/v11/ZXuke1cDvLCKLDcimxBI5A.ttf) format('truetype') }@font-face {font-family: Piedra;font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/piedra/v19/ke8kOg8aN0Bn7hTunA.ttf) format('truetype') }@font-face {font-family: Poppins;font-style: normal;font-weight: 200;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLFj_V1s.ttf) format('truetype') }label select {background: rgba(34, 25, 11, 0.671) !important;color: rgb(255, 199, 146);box-shadow: 2px 2px 5px 1px #ff8623;margin-bottom: 5px;}label input {background: rgba(34, 25, 11, 0.671) !important;color: rgb(255, 199, 146);box-shadow: 2px 2px 5px 1px #ff8623;margin-bottom: 5px;}#mytable {margin: auto !important;box-shadow: 0px 3px 3px 2px #ff89039d;font-family: 'Poppins', sans-serif;font-weight: bold;}#mytable th {background: rgb(1, 1, 2);color: #ffffff;text-transform: uppercase;font-size: 21px;box-shadow: 1px -2px 3px 2px #ff03037a;padding: 7px !important;border: none !important;width: auto !important;}#mytable th:hover {background-color: rgb(19, 23, 25);color: #ffffff;box-shadow: 0px 13px 9px rgba(229, 46, 46, 0.4);text-shadow: 1px 2px 3px #310f0f;transform: translate3d(6px, -6px, 0);transition-delay: 0s;transition-duration: 0.5s;transition-property: all;transition-timing-function: line;}#mytable td {box-shadow: 0px -2px 3px rgb(160, 65, 1);line-height: 1.5;vertical-align: middle;padding: 15px 2px 15px 2px !important;}#mytable td:hover {background-color: rgb(0, 0, 0);box-shadow: 0px 9px 9px rgba(255, 164, 60, 0.781);text-shadow: 1px 2px 3px #310f0f;transform: translate3d(4px, -7px, 0);transition-delay: 0s;transition-duration: 0.5s;transition-property: all;transition-timing-function: line;}#mytable tr:nth-child(odd) {background-color: #181515da;}#mytable tr:nth-child(even) {background-color: #000000c0;}#mytable tr:hover {background-color: #221515c7;-webkit-box-shadow: 0 3px 6px 6px #000000;-moz-box-shadow: 0 3px 6px 6px #000000;box-shadow: 0 3px 6px 3px #e79b0c;}#mytable td:first-child {color: #ffe1e8;font-size: 1.4vw;padding: 1px !important;}#mytable td:nth-child(2) {cursor:pointer;}#mytable td:nth-child(3) {color: #fdebeb;font-size: 1.4vw;}#mytable td:nth-child(4) {color: #fcebeb;font-size: 1.50vw;padding-left: 5px !important;padding-right: 5px !important;}#mytable td:nth-child(5) {color: #fcebeb;font-size: 110%;padding-left: 5px !important;padding-right: 5px !important;}#mytable td:nth-child(6) {color: #fcebeb;font-size: 110%;padding-left: 5px !important;padding-right: 5px !important;}td a {text-decoration: none;color: rgba(255, 166, 0, 0.925);text-shadow: 1px 1px 2px rgb(0, 0, 0);}td:hover a {color: rgb(24, 255, 139);font-size: 105%;text-decoration: none;}td:hover a:hover {color: rgb(24, 255, 139);font-size: 110%;text-decoration: none;}@media only screen and (max-width: 800px) {#mytable {width: 99%!important;}#mytable th {font-size: 13px;}#mytable td:first-child {font-size: 13px;}#mytable td:nth-child(2) {font-size: 15px;}#mytable td:nth-child(3) {font-size: 13px;}#mytable td:nth-child(4) {font-size: 14px;}#mytable td:nth-child(5) {display: none;}#mytable th:nth-child(5) {display: none;}#mytable td:nth-child(6) {display: none;}#mytable th:nth-child(6) {display: none;}h1 {font-size: 190% !important;}}@media screen and (min-width: 800px) {h1 {font-size: 3.7vw !important;}}@media screen and (min-width: 1200px) {h1 {font-size: 3.2vw !important;}#mytable th {font-size: 19px;}#mytable td:first-child {font-size: 19px;}#mytable td:nth-child(2) {font-size: 21px;}#mytable td:nth-child(3) {font-size: 19px;}#mytable td:nth-child(4) {font-size: 20px;}}table.dataTable, table.dataTable th, table.dataTable td {box-sizing: content-box;}.dataTables_wrapper::after {visibility: hidden;display: block;content: "";clear: both;height: 0;}.dataTables_wrapper {position: relative;clear: both;*zoom: 1;zoom: 1;}.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {color: rgb(255, 255, 255);margin: 5px;text-shadow: 1px 1px 2x orange;font-weight: bold;}.dataTables_wrapper .dataTables_length {float: left;}.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {color: rgb(255, 255, 255);text-shadow: 1px 1px 2x orange;font-weight: bold;}.dataTables_wrapper .dataTables_length select {border: 1px solid #aaa;border-radius: 3px;padding: 2px;background-color: transparent;max-width: 50px;}.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {color: rgb(255, 255, 255);margin: 5px;text-shadow: 1px 1px 2x orange;font-weight: bold;}.dataTables_wrapper .dataTables_filter {float: right;text-align: right;}table.dataTable {border-collapse: separate;border-spacing: 2;}.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {color: rgb(255, 255, 255);margin: 5px;text-shadow: 1px 1px 2x orange;font-weight: bold;}.dataTables_wrapper .dataTables_info {clear: both;float: left;padding: 0.35em;}.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {color: rgb(255, 255, 255);margin: 5px;text-shadow: 1px 1px 2x orange;font-weight: bold;}.dataTables_wrapper .dataTables_paginate {float: right;text-align: right;padding-top: 0.25em;}.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {cursor: default;color: #666 !important;border: 1px solid transparent;background: transparent;box-shadow: none;}.dataTables_wrapper .dataTables_paginate .paginate_button {box-sizing: border-box;display: inline-block;min-width: 1.5em;padding: 0.5em 1em;margin-left: 2px;text-align: center;text-decoration: none !important;cursor: pointer;*cursor: hand;color: rgb(255, 255, 255) !important;border: 1px solid transparent;border-radius: 2px;color: rgb(255, 199, 146);box-shadow: 2px 2px 5px #ff8623;}.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {color: #333 !important;border: 1px solid #979797;background-color: white;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #dcdcdc));background: -webkit-linear-gradient(top, white 0%, #dcdcdc 100%);background: -moz-linear-gradient(top, white 0%, #dcdcdc 100%);background: -ms-linear-gradient(top, white 0%, #dcdcdc 100%);background: -o-linear-gradient(top, white 0%, #dcdcdc 100%);background: linear-gradient(to bottom, white 0%, #dcdcdc 100%);}.dataTables_wrapper .dataTables_paginate .paginate_button {box-sizing: border-box;display: inline-block;min-width: 1.5em;padding: 0.5em 1em;margin-left: 2px;text-align: center;text-decoration: none !important;cursor: pointer;*cursor: hand;color: rgb(255, 255, 255) !important;border: 1px solid transparent;border-radius: 2px;color: rgb(255, 199, 146);box-shadow: 2px 2px 5px #ff8623;}.dataTables_wrapper .dataTables_filter input {border: 1px solid #aaa;border-radius: 3px;padding: 2px;background-color: transparent;margin-left: 3px;}.dataTables_wrapper .dataTables_length select {border: 1px solid #aaa;border-radius: 3px;padding: 2px;background-color: transparent;max-width: 50px }@media screen and (max-width: 640px) {.dataTables_filter input {max-width: 120px;}.dataTables_paginate {float: none !important;;max-width: 100%;text-align: center;}iframe{max-width:95%;}}.card {max-height: 385px;}.card-img-top {max-height: 236px;}
/* /otherLinks/mainFiles/css/modern-theme.css */
/*
 * TrendingPunjabi Modern Theme v4.0
 * Clean, professional, easy on the eyes
 */

/* ==========================================
   DARK THEME (Default) - Deep blue-gray
   ========================================== */
:root {
  --bg-body: #0d1117;
  --bg-card: #161b22;
  --bg-elevated: #1c2128;
  --bg-input: #0d1117;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #848d97;
  --accent: #e8b84a;
  --accent-hover: #d4a53f;
  --accent-soft: rgba(232,184,74,0.15);
  --link-color: #58a6ff;
  --border-color: #30363d;
  --border-light: #21262d;
  --table-header-bg: #161b22;
  --table-row-odd: #0d1117;
  --table-row-even: #161b22;
  --table-hover: #1c2128;
  --success: #3fb950;
  --shadow: rgba(0,0,0,0.3);
}

/* ==========================================
   LIGHT THEME - Clean white/gray
   ========================================== */
[data-theme="light"] {
  --bg-body: #ffffff;
  --bg-card: #f6f8fa;
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;
  --text-primary: #1f2328;
  --text-secondary: #656d76;
  --text-muted: #8b949e;
  --accent: #b8860b;
  --accent-hover: #a07608;
  --accent-soft: rgba(184,134,11,0.1);
  --link-color: #0969da;
  --border-color: #d1d9e0;
  --border-light: #e6eaef;
  --table-header-bg: #f6f8fa;
  --table-row-odd: #ffffff;
  --table-row-even: #f6f8fa;
  --table-hover: #eef1f4;
  --success: #1a7f37;
  --shadow: rgba(0,0,0,0.08);
}

/* ==========================================
   BASE STYLES
   ========================================== */
html { 
  scroll-behavior: smooth; 
  max-width: 100%;
  overflow-x: hidden;
}

body {
  color: var(--text-primary) !important;
  background: var(--bg-body) !important;
  -webkit-font-smoothing: antialiased !important;
  transition: background 0.2s, color 0.2s !important;
  max-width: 100%;
  overflow-x: hidden;
}

/* Box sizing fix - prevents padding/border from causing overflow */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent common overflow issues */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ==========================================
   HEADINGS - Clean modern styling, no text-shadows
   ========================================== */
h1, .h1 {
  color: var(--accent) !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
}

h2, .h2 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

h3, .h3 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

h4, .h4 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

h5, .h5 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
  font-family: inherit !important;
}

h6, .h6 {
  color: var(--text-secondary) !important;
  text-shadow: none !important;
}

/* Footer headings - gold accent */
#footer h2, #footer h3, #footer h4, #footer h5,
.footer-heading {
  color: var(--accent) !important;
  text-shadow: none !important;
  text-transform: none !important;
}

p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-weight: 400;
  text-shadow: none !important;
}

/* ==========================================
   DATA TABLES - Enhanced styling
   NOTE: Font sizes, margins, padding, and responsive
   column hiding are handled by miniAll.css - DO NOT OVERRIDE
   ========================================== */

/* Table container - subtle glass effect */
#mytable {
  background: var(--bg-card) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  margin: 2px !important;
  max-width: 100%;
}

/* Header styling - cleaner look */
#mytable thead th {
  background: #1a1a1a !important;
  color: var(--accent) !important;
  border: none !important;
  border-bottom: 2px solid var(--accent) !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: none !important;
}

#mytable thead th:hover {
  background: #222 !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: none !important;
}

/* Row styling - better contrast for readability */
#mytable tbody tr:nth-child(odd):not(.iframerow) {
  background: rgba(30, 30, 30, 0.5) !important;
}

#mytable tbody tr:nth-child(even):not(.iframerow) {
  background: rgba(15, 15, 15, 0.5) !important;
}

#mytable tbody tr:hover:not(.iframerow) {
  background: rgba(232, 184, 74, 0.1) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Cell styling - centered text, clean look */
#mytable td {
  color: var(--text-secondary) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-shadow: none !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
  font-weight: 500 !important;
}

#mytable td:hover {
  box-shadow: none !important;
  transform: none !important;
  font-size: inherit !important;
  background: transparent !important;
}

/* Rank column - bold */
#mytable td:first-child {
  color: var(--text-muted) !important;
  font-weight: 600 !important;
}

/* Song Name - gold accent, NOT bold */
#mytable td:nth-child(2) {
  color: var(--accent) !important;
  text-align: center !important;
  font-weight: 400 !important;
}

/* Singer Name - bold */
#mytable td:nth-child(3) {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Views - cyan color, bold */
#mytable td:nth-child(4) {
  color: #4ecdc4 !important;
  font-weight: 600 !important;
}

/* Rating - yellow/gold */
#mytable td:nth-child(5) {
  color: #ffc107 !important;
  font-weight: 600 !important;
}

/* Likes column - green */
#mytable td:nth-child(6) {
  color: #7ee787 !important;
  font-weight: 600 !important;
}

/* Link styling in table - no zoom */
#mytable td a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  font-size: inherit !important;
}

#mytable td a:hover {
  color: var(--accent) !important;
  text-decoration: none !important;
  font-size: inherit !important;
}

#mytable td:hover a,
#mytable td:hover a:hover {
  font-size: inherit !important;
  transform: none !important;
}

/* iframe rows for video */
.iframerow { display: none !important; }
.iframerow.show-video { display: table-row !important; }
.iframerow td { 
  background: var(--bg-body) !important;
  border: none !important;
}

/* ==========================================
   DataTables Controls - Search, Pagination
   ========================================== */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-secondary) !important;
  text-shadow: none !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(232, 184, 74, 0.15) !important;
  outline: none !important;
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all 0.2s !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(232, 184, 74, 0.1) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000 !important;
  font-weight: 600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ==========================================
   BUTTONS
   ========================================== */
#myButtons, .btn-primary, button[id="myButtons"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--accent) !important;
  color: #141018 !important; /* dark text on gold — readable (was #fff, ~1.8:1) */
  border: none !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

#myButtons:hover, .btn-primary:hover {
  background: var(--accent-hover) !important;
}

/* ==========================================
   CARDS
   ========================================== */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}

.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px var(--shadow) !important;
}

.card-img-top {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
}

.card-body {
  padding: 16px !important;
}

.card-title {
  color: var(--text-primary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.card-text, .text-muted {
  color: var(--text-muted) !important;
  font-size: 14px !important;
}

/* ==========================================
   FORMS - Colors only
   ========================================== */
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-color: var(--accent) !important;
}

input::placeholder { color: var(--text-muted) !important; }

/* ==========================================
   FOOTER - Colors only
   ========================================== */
#footer, .footer-02 {
  background: var(--bg-card) !important;
  border-top-color: var(--border-color) !important;
}

#footer h5, #footer .footer-heading {
  color: var(--accent) !important;
}

#footer a {
  color: var(--text-secondary) !important;
}

#footer a:hover {
  color: var(--text-primary) !important;
}

.copyright {
  color: var(--text-muted) !important;
}

/* ==========================================
   NAVBAR THEME SUPPORT
   ========================================== */
[data-theme="light"] #tp-navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #d1d9e0 !important;
}

[data-theme="light"] #tp-navbar .tp-menu-link,
[data-theme="light"] #tp-navbar .tp-dropdown-link {
  color: #656d76 !important;
}

[data-theme="light"] #tp-navbar .tp-menu-link:hover,
[data-theme="light"] #tp-navbar .tp-dropdown-link:hover {
  color: #1f2328 !important;
  background: #f6f8fa !important;
}

[data-theme="light"] #tp-navbar .tp-dropdown {
  background: #ffffff !important;
  border: 1px solid #d1d9e0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

[data-theme="light"] #tp-navbar .tp-search {
  background: #f6f8fa !important;
  border-color: #d1d9e0 !important;
}

[data-theme="light"] #tp-navbar .tp-search input {
  color: #1f2328 !important;
}

[data-theme="light"] #tp-navbar .tp-theme-btn,
[data-theme="light"] #tp-navbar .tp-hamburger {
  background: #f6f8fa !important;
  border-color: #d1d9e0 !important;
}

[data-theme="light"] #tp-navbar .tp-hamburger span {
  background: #1f2328 !important;
}

[data-theme="light"] #tp-mobile-menu {
  background: #ffffff !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-link {
  color: #656d76 !important;
  border-bottom-color: #e6eaef !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-link:hover {
  color: #1f2328 !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-dropdown {
  background: #f6f8fa !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-sub-link {
  color: #656d76 !important;
  border-bottom-color: #e6eaef !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-search form {
  background: #f6f8fa !important;
  border-color: #d1d9e0 !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-search input {
  color: #1f2328 !important;
}

/* ==========================================
   HOMEPAGE SPECIFIC
   ========================================== */
[data-theme="light"] .hp-hero,
[data-theme="light"] .hp-section {
  background: #ffffff !important;
}

[data-theme="light"] .hp-stats,
[data-theme="light"] .hp-badge,
[data-theme="light"] .hp-trend-card,
[data-theme="light"] .hp-artist-card,
[data-theme="light"] .hp-cat-card,
[data-theme="light"] .hp-year {
  background: #f6f8fa !important;
  border-color: #d1d9e0 !important;
}

[data-theme="light"] .hp-stat-num {
  color: #cf6a1c !important;
}

[data-theme="light"] .hp-subtitle,
[data-theme="light"] .hp-stat-label {
  color: #656d76 !important;
}

[data-theme="light"] .hp-section-header h2 {
  color: #1f2328 !important;
}

[data-theme="light"] .hp-section-header p {
  color: #656d76 !important;
}

/* ==========================================
   LIGHT THEME - TABLE OVERRIDES
   ========================================== */
[data-theme="light"] #mytable {
  background: #ffffff !important;
  border-color: #d1d9e0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] #mytable thead th {
  background: #f5f0e6 !important;
  color: #8b6914 !important;
  border-bottom-color: #b8860b !important;
}

[data-theme="light"] #mytable thead th:hover {
  background: #ebe4d4 !important;
}

[data-theme="light"] #mytable tbody tr:nth-child(odd):not(.iframerow) {
  background: #ffffff !important;
}

[data-theme="light"] #mytable tbody tr:nth-child(even):not(.iframerow) {
  background: #f8f8f8 !important;
}

[data-theme="light"] #mytable tbody tr:hover:not(.iframerow) {
  background: #fffbeb !important;
  box-shadow: none !important;
}

/* Light theme cell hover - NO dark background */
[data-theme="light"] #mytable td:hover {
  background: transparent !important;
}

[data-theme="light"] #mytable td {
  color: #444 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  font-weight: 500 !important;
}

/* Rank - bold */
[data-theme="light"] #mytable td:first-child {
  color: #666 !important;
  font-weight: 600 !important;
}

/* Song name - NOT bold */
[data-theme="light"] #mytable td:nth-child(2) {
  color: #996b00 !important;
  font-weight: 400 !important;
}

/* Singer - bold */
[data-theme="light"] #mytable td:nth-child(3) {
  color: #1f2328 !important;
  font-weight: 600 !important;
}

/* Views - teal color, bold */
[data-theme="light"] #mytable td:nth-child(4) {
  color: #0d9488 !important;
  font-weight: 600 !important;
}

/* Rating - orange */
[data-theme="light"] #mytable td:nth-child(5) {
  color: #d97706 !important;
  font-weight: 600 !important;
}

/* Likes - green */
[data-theme="light"] #mytable td:nth-child(6) {
  color: #16a34a !important;
  font-weight: 600 !important;
}

/* Light theme DataTables controls - FIXED visibility */
[data-theme="light"] .dataTables_wrapper .dataTables_filter input,
[data-theme="light"] .dataTables_wrapper .dataTables_length select {
  background: #ffffff !important;
  border: 2px solid #d1d9e0 !important;
  color: #333 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_filter input::placeholder {
  color: #999 !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_filter input:focus,
[data-theme="light"] .dataTables_wrapper .dataTables_length select:focus {
  border-color: #b8860b !important;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1) !important;
  outline: none !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #ffffff !important;
  border: 1px solid #d1d9e0 !important;
  color: #333 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #fff9eb !important;
  border-color: #b8860b !important;
  color: #8b6914 !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #b8860b !important;
  border-color: #b8860b !important;
  color: #ffffff !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_length,
[data-theme="light"] .dataTables_wrapper .dataTables_filter,
[data-theme="light"] .dataTables_wrapper .dataTables_info,
[data-theme="light"] .dataTables_wrapper .dataTables_paginate {
  color: #333 !important;
  text-shadow: none !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_filter label,
[data-theme="light"] .dataTables_wrapper .dataTables_length label {
  color: #333 !important;
  text-shadow: none !important;
}

/* ==========================================
   MOBILE - COLUMN HIDING
   Default: Hide Likes, Show Views & Rating
   ========================================== */
@media (max-width: 768px) {
  /* Hide Likes (column 6) */
  #mytable td:nth-child(6),
  #mytable th:nth-child(6) {
    display: none !important;
  }
  
  /* Keep Views (column 4) and Rating (column 5) visible */
  #mytable td:nth-child(4),
  #mytable th:nth-child(4),
  #mytable td:nth-child(5),
  #mytable th:nth-child(5) {
    display: table-cell !important;
  }
}

/* ==========================================
   UTILITIES
   ========================================== */
.text-center { text-align: center !important; }

/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile, .d-none-mobile { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .hide-desktop, .d-none-desktop { display: none !important; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 6px; border: 3px solid var(--bg-body); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Selection */
::selection { background: var(--accent-soft); color: var(--text-primary); }

/* ==========================================
   SHARE BUTTONS FIX
   Remove ugly boxes around icons
   ========================================== */
.tp-share-btn,
.share-btn,
button.tp-share-btn,
button.share-btn {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.tp-share-btn svg,
.share-btn svg,
.tp-share-btn img,
.share-btn img {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Share button colors - force background */
.tp-share-whatsapp { background-color: #25D366 !important; }
.tp-share-twitter { background-color: #000 !important; }
.tp-share-facebook { background-color: #1877F2 !important; }
.tp-share-telegram { background-color: #0088cc !important; }
.tp-share-copy { 
  background: linear-gradient(135deg, #e8b84a, #d4a53f) !important; 
  color: #000 !important; 
}

/* ==========================================
   GLOBAL TEXT-SHADOW REMOVAL
   Override all text-shadows from miniAll.css
   ========================================== */
*, *::before, *::after {
  text-shadow: none !important;
}

/* DataTables specific - kill all shadows */
.dataTables_wrapper,
.dataTables_wrapper *,
.dataTables_wrapper label,
.dataTables_wrapper input,
.dataTables_wrapper select,
.dataTables_filter,
.dataTables_length,
.dataTables_info,
.dataTables_paginate {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Light theme labels */
[data-theme="light"] label,
[data-theme="light"] .dataTables_wrapper label {
  color: #333 !important;
  text-shadow: none !important;
}

/* Links in table */
td a, td:hover a, td:hover a:hover {
  text-shadow: none !important;
}

/* Nav links */
.nav-link {
  text-shadow: none !important;
}

/* Dropdown items */
.dropdown-item {
  text-shadow: none !important;
}

/* Jumbotron */
.jumbotron h1, .jumbotron p {
  text-shadow: none !important;
}

/* Buttons */
#myButtons, #myButtons:hover, #subscribebutton, #subscribebutton:hover {
  text-shadow: none !important;
}

/* ==========================================
   REDUCED MOTION - Accessibility
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================
   TOUCH / MOBILE POLISH (site-wide)
   ========================================== */

/* Kill ugly blue tap-highlight and cut the 300ms click delay on all clickable elements */
a, button, [role="button"], input[type="button"], input[type="submit"],
.btn, .tag, .movie, .movie-poster, .card, .feat, .poll, .t-song {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* iOS Safari holds :hover after a tap — neutralize "lift" / scale transforms on touch devices
   so tapped cards don't stay elevated until another tap. */
@media (hover: none) {
  a:hover, button:hover, .btn:hover, .card:hover, .feat:hover, .poll:hover,
  .movie:hover, .movie-poster:hover, .tag:hover, .t-song:hover,
  .stat-card:hover, .hero-stat:hover, .quick-action:hover {
    transform: none !important;
  }
}

/* Prevent iOS auto-zoom when focusing text inputs — must be at least 16px */
@media (max-width: 576px) {
  input[type="text"], input[type="email"], input[type="search"],
  input[type="tel"], input[type="url"], input[type="password"],
  input[type="number"], textarea, select {
    font-size: 16px;
  }
}
/* /otherLinks/mainFiles/css/data-tables-modern.css */
/*
 * TrendingPunjabi - Modern Data Tables
 * Card-based mobile layout, thumbnails, rank badges
 * v1.0 - March 2026
 */

/* ==========================================
   TABLE WRAPPER - Modern container
   ========================================== */
.tp-table-wrap {
  background: var(--tp-bg-card, #161b22);
  border-radius: var(--tp-radius-lg, 14px);
  border: 1px solid var(--tp-border, #30363d);
  overflow: hidden;
  box-shadow: var(--tp-shadow-md, 0 4px 12px rgba(0,0,0,0.3));
  margin: var(--tp-space-md, 16px) 0;
}

/* ==========================================
   DATATABLES TOOLBAR - Modern search/controls
   ========================================== */
.tp-table-wrap .dataTables_wrapper {
  padding: 0;
}

.tp-table-wrap .dataTables_length,
.tp-table-wrap .dataTables_filter {
  padding: var(--tp-space-md, 16px) var(--tp-space-lg, 24px);
  margin: 0;
}

.tp-table-wrap .dataTables_filter {
  float: none !important;
  text-align: center !important;
}

.tp-table-wrap .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: var(--tp-space-sm, 8px);
  max-width: 400px;
  margin: 0 auto;
  color: var(--tp-text-secondary, #8b949e) !important;
}

.tp-table-wrap .dataTables_filter input {
  flex: 1;
  background: var(--tp-bg-body, #0d1117) !important;
  border: 2px solid var(--tp-border, #30363d) !important;
  border-radius: var(--tp-radius-full, 9999px) !important;
  color: var(--tp-text-primary, #e6edf3) !important;
  padding: 10px 18px !important;
  font-size: var(--tp-font-size-base, 0.9rem) !important;
  transition: border-color var(--tp-transition, 0.2s ease), box-shadow var(--tp-transition, 0.2s ease) !important;
}

.tp-table-wrap .dataTables_filter input:focus {
  border-color: var(--tp-accent, #e8b84a) !important;
  box-shadow: 0 0 0 3px var(--tp-accent-soft, rgba(232,184,74,0.15)) !important;
  outline: none !important;
}

.tp-table-wrap .dataTables_filter input::placeholder {
  color: var(--tp-text-muted, #848d97) !important;
}

.tp-table-wrap .dataTables_length {
  float: none !important;
  text-align: center !important;
}

.tp-table-wrap .dataTables_length select {
  background: var(--tp-bg-body, #0d1117) !important;
  border: 2px solid var(--tp-border, #30363d) !important;
  border-radius: var(--tp-radius-sm, 6px) !important;
  color: var(--tp-text-primary, #e6edf3) !important;
  padding: 6px 10px !important;
}

/* ==========================================
   TABLE HEADER - Clean & modern
   ========================================== */
.tp-table-wrap #mytable thead th {
  background: var(--tp-table-header, #161b22) !important;
  color: var(--tp-accent, #e8b84a) !important;
  border: none !important;
  border-bottom: 2px solid var(--tp-accent, #e8b84a) !important;
  font-size: var(--tp-font-size-xs, 0.7rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 14px 16px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* ==========================================
   TABLE ROWS - Enhanced styling
   ========================================== */
.tp-table-wrap #mytable tbody tr:not(.iframerow) {
  transition: background var(--tp-transition-fast, 0.15s ease) !important;
}

.tp-table-wrap #mytable tbody tr:nth-child(4n+1):not(.iframerow) {
  background: var(--tp-table-row-odd, #0d1117) !important;
}

.tp-table-wrap #mytable tbody tr:nth-child(4n+3):not(.iframerow) {
  background: var(--tp-table-row-even, #161b22) !important;
}

.tp-table-wrap #mytable tbody tr:hover:not(.iframerow) {
  background: var(--tp-table-hover) !important;
}

/* ==========================================
   TABLE CELLS - Semantic colors
   ========================================== */
.tp-table-wrap #mytable td {
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--tp-border-light, #21262d) !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-size: var(--tp-font-size-base, 0.9rem) !important;
  transition: background var(--tp-transition-fast, 0.15s ease) !important;
}

/* Rank column */
.tp-table-wrap #mytable td:first-child {
  font-weight: 700 !important;
  color: var(--tp-text-muted, #848d97) !important;
  width: 50px !important;
  font-size: var(--tp-font-size-md, 1rem) !important;
}

/* Song name */
.tp-table-wrap #mytable td:nth-child(2) {
  color: var(--tp-color-song, #e8b84a) !important;
  text-align: left !important;
  font-weight: 500 !important;
}

/* Singer */
.tp-table-wrap #mytable td:nth-child(3) {
  color: var(--tp-color-artist, #e6edf3) !important;
  font-weight: 600 !important;
}

/* Views */
.tp-table-wrap #mytable td:nth-child(4) {
  color: var(--tp-color-views, #4ecdc4) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Rating */
.tp-table-wrap #mytable td:nth-child(5) {
  color: var(--tp-color-rating, #ffc107) !important;
  font-weight: 600 !important;
}

/* Likes */
.tp-table-wrap #mytable td:nth-child(6) {
  color: var(--tp-color-likes, #7ee787) !important;
  font-weight: 600 !important;
}

/* Links */
.tp-table-wrap #mytable td a {
  color: inherit !important;
  text-decoration: none !important;
  transition: opacity var(--tp-transition-fast, 0.15s ease) !important;
}

.tp-table-wrap #mytable td a:hover {
  opacity: 0.8 !important;
  text-decoration: underline !important;
}

/* ==========================================
   TOP 3 RANK BADGES
   ========================================== */
.tp-table-wrap #mytable tbody tr:nth-child(1):not(.iframerow) td:first-child,
.tp-table-wrap #mytable tbody tr:nth-child(3):not(.iframerow) td:first-child,
.tp-table-wrap #mytable tbody tr:nth-child(5):not(.iframerow) td:first-child {
  position: relative;
}

/* Gold rank - row 1 (data row, since iframerow follows each) */
.tp-table-wrap #mytable tbody tr:nth-child(1):not(.iframerow) {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.12) 0%, transparent 40%) !important;
}

/* Silver rank - row 3 */
.tp-table-wrap #mytable tbody tr:nth-child(3):not(.iframerow) {
  background: linear-gradient(90deg, rgba(156, 163, 175, 0.1) 0%, transparent 40%) !important;
}

/* Bronze rank - row 5 */
.tp-table-wrap #mytable tbody tr:nth-child(5):not(.iframerow) {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.1) 0%, transparent 40%) !important;
}

/* ==========================================
   THUMBNAIL IN SONG COLUMN
   ========================================== */
.tp-song-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tp-song-thumb {
  width: 56px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tp-bg-elevated, #1c2128);
}

.tp-song-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tp-song-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================
   PAGINATION - Pill style
   ========================================== */
.tp-table-wrap .dataTables_paginate {
  padding: var(--tp-space-md, 16px) var(--tp-space-lg, 24px) !important;
  text-align: center !important;
}

.tp-table-wrap .dataTables_paginate .paginate_button {
  background: var(--tp-bg-elevated, #1c2128) !important;
  border: 1px solid var(--tp-border, #30363d) !important;
  border-radius: var(--tp-radius-sm, 6px) !important;
  color: var(--tp-text-secondary, #8b949e) !important;
  padding: 8px 14px !important;
  margin: 0 3px !important;
  font-size: var(--tp-font-size-sm, 0.8rem) !important;
  font-weight: 600 !important;
  transition: all var(--tp-transition, 0.2s ease) !important;
  cursor: pointer !important;
}

.tp-table-wrap .dataTables_paginate .paginate_button:hover {
  background: var(--tp-accent-soft, rgba(232,184,74,0.15)) !important;
  border-color: var(--tp-accent, #e8b84a) !important;
  color: var(--tp-accent, #e8b84a) !important;
}

.tp-table-wrap .dataTables_paginate .paginate_button.current,
.tp-table-wrap .dataTables_paginate .paginate_button.current:hover {
  background: var(--tp-accent, #e8b84a) !important;
  border-color: var(--tp-accent, #e8b84a) !important;
  color: #000 !important;
}

.tp-table-wrap .dataTables_paginate .paginate_button.disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* Info text */
.tp-table-wrap .dataTables_info {
  padding: 0 var(--tp-space-lg, 24px) var(--tp-space-md, 16px) !important;
  color: var(--tp-text-muted, #848d97) !important;
  font-size: var(--tp-font-size-sm, 0.8rem) !important;
  text-align: center !important;
}

/* Mobile layout is handled by the clean responsive-table rules at the end of this file. */

/* ==========================================
   IFRAME ROW (video embed) - Mobile aware
   ========================================== */
.tp-table-wrap .iframerow {
  display: none !important;
}

.tp-table-wrap .iframerow.show-video {
  display: table-row !important;
}

@media (max-width: 768px) {
  .tp-table-wrap .iframerow.show-video {
    display: block !important;
  }

  .tp-table-wrap .iframerow.show-video td {
    display: block !important;
    padding: var(--tp-space-sm, 8px) !important;
  }
}

/* ==========================================
   LIGHT THEME OVERRIDES
   ========================================== */
[data-theme="light"] .tp-table-wrap {
  box-shadow: var(--tp-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}

[data-theme="light"] .tp-table-wrap #mytable thead th {
  background: #f5f0e6 !important;
  color: #8b6914 !important;
  border-bottom-color: var(--tp-accent, #b8860b) !important;
}

[data-theme="light"] .tp-table-wrap #mytable tbody tr:nth-child(1):not(.iframerow) {
  background: linear-gradient(90deg, rgba(184, 134, 11, 0.08) 0%, transparent 40%) !important;
}

[data-theme="light"] .tp-table-wrap #mytable tbody tr:nth-child(3):not(.iframerow) {
  background: linear-gradient(90deg, rgba(107, 114, 128, 0.08) 0%, transparent 40%) !important;
}

[data-theme="light"] .tp-table-wrap #mytable tbody tr:nth-child(5):not(.iframerow) {
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.08) 0%, transparent 40%) !important;
}

[data-theme="light"] .tp-table-wrap .dataTables_filter input {
  background: #ffffff !important;
  border-color: var(--tp-border, #d1d9e0) !important;
  color: #333 !important;
}

[data-theme="light"] .tp-table-wrap .dataTables_paginate .paginate_button {
  background: #ffffff !important;
  border-color: var(--tp-border, #d1d9e0) !important;
  color: #555 !important;
}

[data-theme="light"] .tp-table-wrap .dataTables_paginate .paginate_button.current {
  background: var(--tp-accent, #b8860b) !important;
  color: #fff !important;
}

[data-theme="light"] .tp-table-wrap #mytable td {
  border-bottom-color: #e0e0e0 !important;
}

@media (max-width: 768px) {
  [data-theme="light"] .tp-table-wrap #mytable tbody tr:nth-child(1):not(.iframerow) {
    border-left-color: #b8860b !important;
  }
  [data-theme="light"] .tp-table-wrap #mytable tbody tr:nth-child(3):not(.iframerow) {
    border-left-color: #6b7280 !important;
  }
  [data-theme="light"] .tp-table-wrap #mytable tbody tr:nth-child(5):not(.iframerow) {
    border-left-color: #b45309 !important;
  }
}

/* ============================================================
   2026 stat tables (DataTables removed) — search bar, true server-rendered rank,
   full view/like numbers, clean columns. Mobile = plain responsive table.
   ============================================================ */
/* Search bar (built by javascript.js and inserted above the table) */
.tp-tsearch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.tp-tsearch-box{display:flex;align-items:center;gap:8px;flex:1 1 220px;max-width:440px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:0 12px;color:var(--tp-text-muted,#8b949e)}
.tp-tsearch-box:focus-within{border-color:var(--tp-accent,#e8b84a)}
.tp-tsearch-box svg{flex:0 0 auto}
.tp-tsearch-box input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--tp-text-primary,#e6edf3);font:600 .92rem/1 inherit;padding:12px 0}
.tp-tsearch-box input::placeholder{color:var(--tp-text-muted,#8b949e);font-weight:500}
.tp-tsearch-box input::-webkit-search-cancel-button{filter:invert(.5)}
.tp-tcount{font-size:.8rem;color:var(--tp-text-muted,#8b949e);font-weight:600;white-space:nowrap}
[data-theme="light"] .tp-tsearch-box{background:#fff;border-color:#d1d9e0;color:#57606a}
[data-theme="light"] .tp-tsearch-box input{color:#1f2328}

/* Columns (desktop): rank tight & centered, song+artist left, numbers right */
.tp-table-wrap #mytable th:nth-child(1),.tp-table-wrap #mytable td.rank-col{text-align:center !important;width:54px !important;font-weight:800;color:var(--tp-text-muted,#8b949e)}
.tp-table-wrap #mytable th:nth-child(2),.tp-table-wrap #mytable td.link{text-align:left !important;width:auto !important}
.tp-table-wrap #mytable th:nth-child(3),.tp-table-wrap #mytable td.artist-col{text-align:left !important;width:18% !important}
.tp-table-wrap #mytable th:nth-child(4),.tp-table-wrap #mytable td.views-col{text-align:right !important;white-space:nowrap !important;width:150px !important}
.tp-table-wrap #mytable th:nth-child(5),.tp-table-wrap #mytable td.rating-col{text-align:center !important;width:76px !important}
.tp-table-wrap #mytable th:nth-child(6),.tp-table-wrap #mytable td.likes-col{text-align:right !important;white-space:nowrap !important;width:112px !important}
.vnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;letter-spacing:-.01em}
.tp-song-cell{min-width:0}
.tp-song-name{flex:1;min-width:0}
.tp-song-name a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-song-sub{display:none;font-size:.8rem;color:var(--tp-text-muted,#8b949e);font-weight:500;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.tp-song-views{display:none;font-size:.78rem;color:var(--tp-accent,#e8b84a);font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}

/* Mobile: clean responsive table — Rank · Song(+artist subtitle) · Views(full).
   Artist/Rating/Likes columns hidden (artist becomes a subtitle under the song). */
@media (max-width:768px){
  .tp-table-wrap{overflow-x:auto !important}
  .tp-table-wrap #mytable{table-layout:fixed !important;width:100% !important;max-width:100% !important;border-collapse:separate !important;border-spacing:0 !important}
  .tp-table-wrap #mytable thead th{padding:8px 5px !important;font-size:.72rem !important;letter-spacing:.3px !important}
  .tp-table-wrap #mytable td{padding:8px 7px !important}
  /* Hide Artist, Views, Rating, Likes columns — Artist + full Views shown under the song. */
  .tp-table-wrap #mytable th:nth-child(3),.tp-table-wrap #mytable td.artist-col,
  .tp-table-wrap #mytable th:nth-child(4),.tp-table-wrap #mytable td.views-col,
  .tp-table-wrap #mytable th:nth-child(5),.tp-table-wrap #mytable td.rating-col,
  .tp-table-wrap #mytable th:nth-child(6),.tp-table-wrap #mytable td.likes-col{display:none !important}
  .tp-table-wrap #mytable th:nth-child(1),.tp-table-wrap #mytable td.rank-col{width:34px !important}
  .tp-table-wrap #mytable th:nth-child(2),.tp-table-wrap #mytable td.link{width:auto !important}
  /* reclaim width for the song title, and let it use two lines instead of being cut off */
  .tp-table-wrap #mytable .tp-song-cell{gap:9px !important}
  .tp-table-wrap #mytable .tp-song-name{white-space:normal !important;overflow:visible !important}
  .tp-table-wrap #mytable .tp-song-name a{display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal !important;overflow:hidden;line-height:1.28}
  .tp-table-wrap #mytable .tp-song-sub{display:block}
  .tp-table-wrap #mytable .tp-song-views{display:block}
  .tp-table-wrap #mytable .tp-song-thumb{width:46px !important;height:35px !important}
  .tp-table-wrap #mytable .tp-song-thumb img{width:100% !important;height:100% !important}
}

/* /otherLinks/mainFiles/css/rankings-shared.css */
/**
 * TrendingPunjabi - Shared Ranking Page Styles
 * Path: /otherLinks/mainFiles/css/rankings-shared.css
 *
 * Used by: punjabi-song-ranking, punjabi-singer-ranking, punjabi-movie-ranking,
 *          poll-rankings/punjabi-actresses, poll-rankings/indian-actresses
 *
 * Each page sets --accent, --accent-light, --accent-glow via a small inline <style>
 */

/* === Base Layout === */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

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

.ranking-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
}

/* === Page Header === */
.page-header {
    text-align: center;
    margin-bottom: 25px;
}

.page-header h1 {
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.page-header p {
    color: var(--text-secondary, #8b949e);
    max-width: 500px;
    margin: 0 auto 12px;
    font-size: 0.9rem;
}

/* === Stats Bar === */
.stats-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.stat-item { text-align: center; }

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted, #6e7681);
    text-transform: uppercase;
}

/* === Category Links === */
.category-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.category-link {
    padding: 9px 18px;
    background: var(--bg-card, #161b22);
    border: 1px solid var(--border, #30363d);
    border-radius: 4px;
    color: #c9d1d9;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: background-color .18s, border-color .18s, color .18s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.category-link:hover,
.category-link:focus-visible {
    background: rgba(232, 184, 74, 0.12);
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}

/* Solid accent + dark ink. The old gradient set white text on a light gold→lavender
   ramp, which measured 1.84:1 — far below the 4.5:1 minimum. This is 10.26:1. */
.category-link.active,
.category-link.active:hover,
.category-link.active:focus-visible {
    background: var(--accent);
    color: #141018;
    border-color: var(--accent);
}

/* === Period Tabs === */
.period-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.period-tab {
    padding: 9px 15px;
    background: var(--bg-card, #161b22);
    border: 1px solid var(--border, #30363d);
    border-radius: 3px;
    /* was --text-muted (#6e7681): too dim to read against the card */
    color: #a9b3bd;
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    line-height: 1.15;
    transition: background-color .18s, border-color .18s, color .18s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.period-tab:hover,
.period-tab:focus-visible {
    background: rgba(232, 184, 74, 0.12);
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}

.period-tab.active,
.period-tab.active:hover,
.period-tab.active:focus-visible {
    background: var(--accent);
    color: #141018;          /* dark ink on gold — was #fff at 1.84:1 */
    border-color: var(--accent);
}

/* === Battle Section === */
.battle-section {
    background: linear-gradient(180deg, rgba(20, 25, 35, 0.95), rgba(15, 18, 28, 0.98));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 20px;
    padding: 20px 15px;
    margin-bottom: 25px;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.battle-title {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted, #6e7681);
    margin-bottom: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.battle-title span {
    color: var(--accent);
    font-weight: 600;
}

/* === Battle Arena === */
.battle-arena {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    transition: opacity 0.3s, transform 0.3s;
}

.battle-arena.transitioning {
    opacity: 0;
    transform: scale(0.96);
}

/* === Contestant Cards === */
.contestant {
    flex: 1;
    max-width: 180px;
    background: linear-gradient(165deg, rgba(35, 40, 55, 0.9), rgba(25, 30, 45, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contestant:hover,
.contestant:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    outline: none;
}

.contestant.winner-glow {
    border-color: var(--accent);
    box-shadow: 0 0 30px var(--accent-glow);
    transform: scale(1.03);
}

/* Song thumbnails (rectangular) */
.contestant-img {
    width: 100px;
    height: 75px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: #1a1f2e;
}

.contestant-placeholder {
    width: 100px;
    height: 75px;
    background: linear-gradient(145deg, #252a3a, #1a1f2e);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 10px;
    border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Singer/actress circular images */
.contestant-img.round,
.ranking-page[data-shape="round"] .contestant-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-width: 3px;
}

.contestant-placeholder.round,
.ranking-page[data-shape="round"] .contestant-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-width: 3px;
    font-size: 2.5rem;
}

/* Portrait images (actresses/movies) */
.contestant-img.portrait,
.ranking-page[data-shape="portrait"] .contestant-img {
    width: 100px;
    height: 140px;
}

.contestant-placeholder.portrait,
.ranking-page[data-shape="portrait"] .contestant-placeholder {
    width: 100px;
    height: 140px;
    font-size: 2.5rem;
}

.contestant-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.4em;
    word-break: break-word;
}

.contestant-artist,
.contestant-year {
    font-size: 0.7rem;
    color: var(--text-muted, #6e7681);
    margin-bottom: 6px;
    height: 1.2em;
    overflow: hidden;
}

.contestant-stats {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.contestant-stats span {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.74rem;
    background: rgba(255, 255, 255, 0.06);
}

.contestant-stats .wins { color: #22c55e; }
.contestant-stats .losses { color: #ef4444; }
.contestant-stats .pts { color: var(--accent); font-weight: 600; }

/* === Vote Button === */
.vote-btn {
    background: var(--accent);
    color: #141018;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s;
    margin-top: auto;
    min-height: 44px;
}

.vote-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px var(--accent-glow);
}

.vote-btn:focus-visible {
    outline: 2px solid #141018;
    outline-offset: 2px;
}

/* === VS Circle === */
.vs-circle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--accent);
    align-self: center;
}

/* === Skip & Feedback === */
.skip-btn {
    display: block;
    margin: 15px auto 0;
    padding: 8px 25px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #b6bec8;
    cursor: pointer;
    font-size: 0.85rem;
    min-height: 44px;
}

.skip-btn:hover,
.skip-btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}

.vote-feedback {
    text-align: center;
    padding: 10px;
    color: #22c55e;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s;
}

.vote-feedback.show { opacity: 1; }

/* === Confetti & Vote Counter === */
.confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.vote-counter {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
    opacity: 0.8;
}

.vote-counter.animate {
    animation: counterPop 0.4s ease;
}

@keyframes counterPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* === Hall of Fame Link === */
.hof-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 12px;
    color: var(--accent);
    text-decoration: none;
    margin-bottom: 25px;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.hof-link:hover,
.hof-link:focus-visible {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    transform: translateY(-2px);
    outline: none;
}

/* === Leaderboard Section === */
.leaderboard-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px 15px;
    margin-bottom: 25px;
}

.leaderboard-header {
    margin-bottom: 15px;
}

.leaderboard-header h2 {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 12px;
}

/* === Search Form === */
.search-form {
    display: flex;
    gap: 8px;
}

.search-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    color: #fff;
    font-size: 0.9rem;
    min-height: 44px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.search-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.search-btn {
    background: var(--accent);
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    color: #141018;          /* was #fff on gold = 1.84:1 — the glyph vanished */
    font-weight: 800;
    min-height: 44px;
    font-weight: 600;
    transition: background 0.2s;
}

.search-btn:hover {
    filter: brightness(1.1);
}

.search-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* === Leaderboard Table === */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-table th,
.leaderboard-table td {
    text-align: left;
    padding: 8px 6px;
    font-size: 0.85rem;
}

.leaderboard-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted, #6e7681);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.leaderboard-table tr:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Rank highlighting */
.rank-cell {
    font-weight: 700;
    color: var(--text-secondary, #8b949e);
    width: 28px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.rank-1 { color: #ffd700; }
.rank-2 { color: #c0c0c0; }
.rank-3 { color: #cd7f32; }

/* Song/Singer/Movie cells */
.song-cell,
.singer-cell,
.movie-cell,
.person-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.song-thumb,
.singer-thumb,
.movie-thumb,
.person-thumb {
    object-fit: cover;
    background: #1a1f2e;
}

.song-thumb { width: 60px; height: 45px; border-radius: 4px; }
.singer-thumb { width: 45px; height: 45px; border-radius: 50%; }
.movie-thumb { width: 40px; height: 56px; border-radius: 4px; }
.person-thumb { width: 45px; height: 45px; border-radius: 50%; }

.song-thumb-placeholder,
.singer-thumb-placeholder,
.movie-thumb-placeholder,
.person-thumb-placeholder {
    background: linear-gradient(145deg, #252a3a, #1a1f2e);
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-thumb-placeholder { width: 60px; height: 45px; border-radius: 4px; font-size: 1.2rem; }
.singer-thumb-placeholder { width: 45px; height: 45px; border-radius: 50%; font-weight: 600; color: var(--text-secondary, #8b949e); font-size: 0.9rem; }
.movie-thumb-placeholder { width: 40px; height: 56px; border-radius: 4px; font-size: 1.2rem; }
.person-thumb-placeholder { width: 45px; height: 45px; border-radius: 50%; font-weight: 600; color: var(--text-secondary, #8b949e); font-size: 0.9rem; }

.song-info h3,
.singer-info h3,
.movie-info h3,
.person-info h3 {
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
    word-break: break-word;
}

.song-info h3 a,
.singer-info h3 a,
.movie-info h3 a,
.person-info h3 a {
    color: #fff;
    text-decoration: none;
}

.song-info h3 a:hover,
.singer-info h3 a:hover,
.movie-info h3 a:hover,
.person-info h3 a:hover {
    color: var(--accent);
}

.song-info .artist,
.movie-info .year {
    font-size: 0.75rem;
    color: var(--text-muted, #6e7681);
}

/* === Points & Elo Badges === */
.points-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    white-space: nowrap;
}

.elo-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    color: var(--text-muted, #6e7681);
    background: rgba(255, 255, 255, 0.05);
}

.elo-col { display: none; }

/* Win/Loss Record */
.record-cell {
    color: var(--text-secondary, #8b949e);
    font-size: 0.75rem;
    white-space: nowrap;
}

.record-cell .w { color: #22c55e; }
.record-cell .l { color: #ef4444; }

/* === Pagination === */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.page-link {
    padding: 8px 12px;
    min-width: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-secondary, #8b949e);
    text-decoration: none;
    font-size: 0.85rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.page-link:hover,
.page-link.active,
.page-link:focus-visible {
    background: var(--accent);
    color: #141018;          /* was #fff on gold = 1.84:1 */
    border-color: var(--accent);
    font-weight: 800;
    outline: none;
}

/* === Stats Cards === */
.stats-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.stats-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 15px;
}

.stats-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.stats-card-header h3 {
    font-size: 0.95rem;
    color: #fff;
    margin: 0;
}

.stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stats-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-list li:last-child { border-bottom: none; }

.item-name {
    font-size: 0.85rem;
    color: #fff;
}

.stat-badge {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}

.stat-badge.green {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

/* === SEO Content === */
.seo-content {
    text-align: left;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 25px 20px;
    margin-top: 30px;
}

.seo-content h2 {
    color: var(--accent);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.seo-content h3 {
    color: #fff;
    font-size: 1.1rem;
    margin: 20px 0 10px;
}

.seo-content p {
    color: var(--text-secondary, #8b949e);
    line-height: 1.7;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.seo-content ul {
    color: var(--text-secondary, #8b949e);
    padding-left: 20px;
    margin-bottom: 15px;
}

.seo-content li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.artist-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.artist-tag {
    padding: 6px 14px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 20px;
    color: var(--accent);
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
}

.artist-tag:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    transform: translateY(-1px);
}

/* === Loading State === */
.battle-section.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* === Touch / Mobile Polish === */
.contestant,
.vote-btn,
.skip-btn,
.category-link,
.period-tab,
.page-link,
.artist-tag {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Disable sticky-hover transforms on touch devices — iOS Safari holds :hover after tap */
@media (hover: none) {
    .contestant:hover,
    .artist-tag:hover,
    .hof-link:hover,
    .vote-btn:hover {
        transform: none;
    }
}

/* Prevent iOS zoom-on-focus for the search input */
@media (max-width: 576px) {
    .search-input {
        font-size: 16px;
    }
}

/* === Desktop Breakpoint === */
@media (min-width: 768px) {
    .elo-col { display: table-cell; }
    .ranking-page { padding: 30px 20px; }
    .page-header h1 { font-size: 2rem; }
    .battle-section { padding: 30px 25px; min-height: 360px; }
    .battle-arena { min-height: 260px; }
    .contestant { max-width: 200px; padding: 20px 15px; }
    .contestant-img { width: 140px; height: 105px; }
    .contestant-placeholder { width: 140px; height: 105px; }
    .contestant-img.round,
    .ranking-page[data-shape="round"] .contestant-img { width: 120px; height: 120px; }
    .contestant-placeholder.round,
    .ranking-page[data-shape="round"] .contestant-placeholder { width: 120px; height: 120px; }
    .contestant-img.portrait,
    .ranking-page[data-shape="portrait"] .contestant-img { width: 120px; height: 168px; }
    .contestant-placeholder.portrait,
    .ranking-page[data-shape="portrait"] .contestant-placeholder { width: 120px; height: 168px; }
    .vs-circle { width: 50px; height: 50px; font-size: 0.8rem; }
    .stats-section { grid-template-columns: repeat(2, 1fr); }
}

/* === Small Screen Adjustments === */
@media (max-width: 500px) {
    .leaderboard-table th:nth-child(5),
    .leaderboard-table td:nth-child(5) { display: none; }
}

/* Leaderboard tables must FIT the phone so the ranking metric (col 3) stays
   visible — never force a min-width wider than the screen (that clipped the metric). */
@media (max-width: 600px) {
    .leaderboard-section { overflow-x: visible; }
    .leaderboard-table { min-width: 0; width: 100%; table-layout: fixed; }
    .leaderboard-table th, .leaderboard-table td { padding: 11px 6px; }
    .leaderboard-table th:first-child, .leaderboard-table td:first-child { width: 34px; }
    .leaderboard-table th:nth-child(3), .leaderboard-table td:nth-child(3) { width: 82px; }
    .song-thumb, .song-thumb-placeholder { width: 46px; height: 35px; }
    .song-cell { gap: 8px; }
    .song-info { min-width: 0; }
    .song-title, .song-name, .song-cell a { white-space: normal; overflow-wrap: anywhere; line-height: 1.22; }
    .song-artist { white-space: normal; overflow-wrap: anywhere; }
    .likes-cell, .likes-value { white-space: normal; }
}

@media (max-width: 360px) {
    .category-links {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .category-links::-webkit-scrollbar { display: none; }
    .category-link { white-space: nowrap; flex-shrink: 0; }
}

/* =============================================
   LIGHT THEME
   ============================================= */
[data-theme="light"] .ranking-page .page-header p,
[data-theme="light"] .ranking-page .stat-label {
    color: #57606a;
}

[data-theme="light"] .category-link {
    background: rgba(0, 0, 0, 0.03);
    border-color: #d1d9e0;
    color: #57606a;
}

[data-theme="light"] .category-link:hover,
[data-theme="light"] .category-link:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

[data-theme="light"] .category-link.active {
    background: var(--accent);
    color: #141018;          /* dark ink on gold, both themes */
    border-color: var(--accent);
}

[data-theme="light"] .period-tab {
    background: rgba(0, 0, 0, 0.02);
    border-color: #d1d9e0;
    color: #57606a;
}

[data-theme="light"] .period-tab:hover,
[data-theme="light"] .period-tab:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

[data-theme="light"] .period-tab.active {
    background: var(--accent);
    color: #141018;
    border-color: var(--accent);
}

[data-theme="light"] .battle-section {
    background: linear-gradient(180deg, #f6f8fa, #eef1f5);
    border-color: #d1d9e0;
}

[data-theme="light"] .contestant {
    background: #fff;
    border-color: #d1d9e0;
}

[data-theme="light"] .contestant:hover,
[data-theme="light"] .contestant:focus-visible {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--accent);
}

[data-theme="light"] .contestant-name {
    color: #1f2328;
}

[data-theme="light"] .contestant-stats span {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .vs-circle {
    background: rgba(0, 0, 0, 0.04);
    border-color: #d1d9e0;
}

[data-theme="light"] .skip-btn {
    border-color: #d1d9e0;
    color: #57606a;
}

[data-theme="light"] .hof-link {
    background: color-mix(in srgb, var(--accent) 6%, white);
    border-color: color-mix(in srgb, var(--accent) 30%, #d1d9e0);
}

[data-theme="light"] .leaderboard-section {
    background: #fff;
    border-color: #d1d9e0;
}

[data-theme="light"] .leaderboard-header h2 {
    color: #1f2328;
}

[data-theme="light"] .search-input {
    background: #fff;
    border-color: #d1d9e0;
    color: #1f2328;
}

[data-theme="light"] .leaderboard-table th {
    color: #57606a;
    border-bottom-color: #d1d9e0;
}

[data-theme="light"] .leaderboard-table td {
    border-bottom-color: #eef1f5;
}

[data-theme="light"] .leaderboard-table tr:hover {
    background: #f6f8fa;
}

[data-theme="light"] .song-info h3 a,
[data-theme="light"] .singer-info h3 a,
[data-theme="light"] .movie-info h3 a,
[data-theme="light"] .person-info h3 a {
    color: #1f2328;
}

[data-theme="light"] .rank-cell {
    color: #57606a;
}

[data-theme="light"] .page-link {
    background: #fff;
    border-color: #d1d9e0;
    color: #57606a;
}

[data-theme="light"] .page-link:hover,
[data-theme="light"] .page-link.active {
    color: #fff;
}

[data-theme="light"] .stats-card {
    background: #fff;
    border-color: #d1d9e0;
}

[data-theme="light"] .stats-card-header h3,
[data-theme="light"] .item-name {
    color: #1f2328;
}

[data-theme="light"] .stats-list li {
    border-bottom-color: #eef1f5;
}

[data-theme="light"] .seo-content {
    background: #fff;
    border-color: #d1d9e0;
}

[data-theme="light"] .seo-content h3 {
    color: #1f2328;
}

[data-theme="light"] .seo-content p,
[data-theme="light"] .seo-content ul {
    color: #57606a;
}

[data-theme="light"] .contestant-placeholder {
    background: linear-gradient(145deg, #eef1f5, #f6f8fa);
}

[data-theme="light"] .song-thumb-placeholder,
[data-theme="light"] .singer-thumb-placeholder,
[data-theme="light"] .movie-thumb-placeholder,
[data-theme="light"] .person-thumb-placeholder {
    background: linear-gradient(145deg, #eef1f5, #f6f8fa);
}

/* =============================================================================
   VOTE-ABOVE-THE-FOLD + MOBILE POLISH (June 2026)
   The period filter was moved out of the top of the page down into the
   leaderboard section (it filters the leaderboard, not the vote), so the vote
   arena now sits near the top with no scroll. These rules style the filter in
   its new home and tighten the phone layout. Appended last so it wins on order.
   ============================================================================= */

/* Period filter in its new home: a compact left-aligned bar above the table */
.leaderboard-section .period-tabs {
    justify-content: flex-start;
    gap: 6px;
    margin: 0 0 14px;
}
.leaderboard-section .period-tab { min-height: 38px; }

/* Confirmed-vote feedback: a small rise so it feels tactile on tap */
.vote-feedback { transition: opacity .25s ease, transform .25s ease; transform: translateY(6px); }
.vote-feedback.show { transform: translateY(0); }

@media (max-width: 600px) {
    /* Trim the header — the biggest above-the-fold cost on a phone */
    .ranking-page .page-header { margin-bottom: 14px; }
    .ranking-page .page-header h1 { font-size: 1.4rem; margin-bottom: 4px; line-height: 1.2; }
    .ranking-page .page-header p { font-size: 0.82rem; margin-bottom: 8px; }
    .stats-bar { gap: 22px; }
    .stat-value { font-size: 1.2rem; }

    /* Compact the poll-to-poll nav so it costs one tight row */
    .category-links { gap: 6px; margin-bottom: 12px; }
    .category-link { padding: 6px 13px; min-height: 44px; font-size: 0.8rem; }

    /* Tighten the battle box so the Vote buttons clear the fold */
    .battle-section { padding: 18px 12px; }

    /* Period filter: a single scrollable row (never wraps to two lines) */
    .leaderboard-section .period-tabs {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .leaderboard-section .period-tabs::-webkit-scrollbar { display: none; }
    .leaderboard-section .period-tab { flex-shrink: 0; white-space: nowrap; min-height: 44px; }

    /* Tighten the secondary content below the vote */
    .hof-link { margin-bottom: 16px; }
    .leaderboard-section, .stats-section { margin-bottom: 16px; }
}

/* Bullet-proof the VS arena on very narrow phones */
@media (max-width: 400px) {
    .battle-arena { gap: 6px; }
    .vs-circle { width: 34px; height: 34px; min-width: 34px; font-size: 0.62rem; }
    .contestant-name { font-size: 0.9rem; }
    .contestant { padding: 12px 8px; }
}

/* ============================================================
   Ranking cards — card-per-item leaderboard (themed via --accent)
   ============================================================ */
.rank-cards{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.rank-card{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.07);transition:border-color .15s ease,transform .1s ease}
.rank-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.rank-card.top3{border-color:var(--accent-glow,rgba(232,184,74,.4));
  box-shadow:inset 0 0 0 1px var(--accent-glow,rgba(232,184,74,.22)),0 8px 26px -14px var(--accent-glow,rgba(232,184,74,.5))}
.rc-rank{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;color:var(--text-muted,#8b949e);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.rc-rank.m1{background:linear-gradient(135deg,#f7cf5c,#c8901f);color:#3a2600;border:0}
.rc-rank.m2{background:linear-gradient(135deg,#e6e9ee,#a7adb5);color:#2a2d33;border:0}
.rc-rank.m3{background:linear-gradient(135deg,#e8ab63,#b06f2e);color:#3a1f00;border:0}
.rc-avatar{flex:0 0 auto;width:60px;height:60px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1)}
.rc-avatar-ph{flex:0 0 auto;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.4rem;color:var(--accent);background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1)}
.rank-card.top3 .rc-avatar,.rank-card.top3 .rc-avatar-ph{border-color:var(--accent)}
.rc-main{flex:1 1 auto;min-width:0;text-align:left}
.rc-name{font-size:.98rem;font-weight:800;letter-spacing:.01em;text-transform:uppercase;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.rc-name a{color:#f4f6f9;text-decoration:none;display:block;padding:6px 0;min-height:32px}
.rc-name a:hover{color:var(--accent)}
.rc-meta{margin-top:3px;font-size:.82rem;color:var(--text-muted,#8b949e)}
.rc-pills{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.rc-pill{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--text-secondary,#c9d1d9);white-space:nowrap}
.rc-pill.accent{background:var(--accent-glow,rgba(232,184,74,.14));border-color:transparent;color:var(--accent)}
.rc-pill .w{color:#3fb950}.rc-pill .l{color:#f85149}
.rc-score{flex:0 0 auto;width:130px;text-align:right;padding-left:10px}
.rc-elo{font-size:1.2rem;font-weight:800;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.rc-elo-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted,#8b949e);margin-top:4px}
.rc-bar{margin-top:8px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.rc-bar>span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#f85149,var(--accent))}
@media(max-width:600px){
  /* Reclaim horizontal space so the name column isn't crushed (was ~57px → names
     truncated). Tighter container padding + a slimmer Elo column let full names
     wrap onto 2 lines instead of being cut off. */
  .leaderboard-section{padding-left:9px;padding-right:9px}
  .rank-card{gap:9px;padding:9px 10px;border-radius:6px}
  .rc-rank{width:34px;height:34px;font-size:.85rem}
  .rc-avatar,.rc-avatar-ph{width:48px;height:48px;font-size:1.15rem}
  .rc-name{font-size:.9rem}
  .rc-meta{font-size:.76rem}
  .rc-score{width:52px;padding-left:5px}
  .rc-elo{font-size:1.05rem}
  .rc-elo-label{font-size:.72rem;letter-spacing:.08em}
}

/* Ranking-card media variants: landscape thumb (songs) + portrait poster (movies) */
.rc-thumb{flex:0 0 auto;width:82px;height:48px;border-radius:10px;object-fit:cover;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.rc-thumb-ph{flex:0 0 auto;width:82px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.rc-poster{flex:0 0 auto;width:46px;height:64px;border-radius:8px;object-fit:cover;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.rc-poster-ph{flex:0 0 auto;width:46px;height:64px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.rank-card.top3 .rc-thumb,.rank-card.top3 .rc-poster{border-color:var(--accent)}
@media(max-width:600px){.rc-thumb,.rc-thumb-ph{width:64px;height:38px}.rc-poster,.rc-poster-ph{width:38px;height:53px}}

/* Ranking rows navigate to the song page (click-to-expand iframe row removed 2026-07-13) */
#mytable tbody tr.song-row[data-href]{cursor:pointer}
#mytable tbody tr.song-row[data-href]:hover{background:rgba(232,184,74,.06)}

/* =====================================================================
   POLL PAGES — 2026-09-05 design layer (owner: "design poll pages better").
   Same idiom as the stats hub and the ranking boards: left masthead, one
   segmented category strip, flat hairline rows, gold numerals for the top
   three, a gold share-of-#1 bar (the red→gold gradient is gone), 6px/8px
   radii, no glow, no lift, no emoji. Scoped to main.ranking-page so the
   extra specificity beats each page's own inline overrides. ============ */
main.ranking-page{ padding: 0 16px 24px; }
/* !important here: tp-foundation.css (.page-header, loads last) and ranking-polish.css
   (.ranking-page > .page-header + a ::before gold rule) both box the header */
main.ranking-page > .page-header{ text-align:left; margin:0 0 14px !important; padding:24px 0 14px !important; background:none !important; border:0 !important; border-bottom:1px solid var(--tp-line,#30363d) !important; border-radius:0 !important; box-shadow:none !important; }
main.ranking-page > .page-header::before, main.ranking-page > .page-header::after{ display:none !important; content:none !important; }
main.ranking-page .page-header h1{
  background:none; -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:currentColor;
  color:var(--tp-text,#e6edf3) !important; font-size:clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem) !important;
  line-height:1.1; letter-spacing:-.02em; margin:0 0 8px; text-align:left;
}
main.ranking-page .page-header > p{ margin:0; max-width:62ch; font-size:.95rem; line-height:1.5; color:var(--tp-text-2,#b6bec8) !important; text-align:left; }
main.ranking-page .category-links, main.ranking-page > nav[aria-label="Poll categories"]{ display:flex; justify-content:flex-start; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
main.ranking-page .category-link{ border-radius:8px; font-size:.76rem; letter-spacing:.05em; min-height:40px; padding:0 14px; }
main.ranking-page .battle-section{ background:var(--tp-surface,#161b22); border:1px solid var(--tp-line,#30363d); border-radius:6px; padding:16px 14px 18px; margin-bottom:16px; }
main.ranking-page .battle-title{ text-align:left; font-size:.7rem; letter-spacing:.12em; color:var(--tp-text-3,#98a2ae); margin:0 0 14px; }
main.ranking-page .contestant{ border-radius:6px; }
main.ranking-page .hof-link{
  justify-content:flex-start; gap:10px; min-height:44px; padding:0 14px; margin-bottom:12px;
  background:transparent; border:1px solid var(--tp-line,#30363d); border-radius:8px;
  color:var(--tp-text-2,#b6bec8); font-weight:700; font-size:.85rem; transition:border-color .15s ease, color .15s ease;
}
main.ranking-page .hof-link:hover, main.ranking-page .hof-link:focus-visible{ transform:none; background:transparent; border-color:var(--tp-gold-line,rgba(232,184,74,.3)); color:var(--tp-gold,#e8b84a); }
main.ranking-page .hof-link span:last-child{ margin-left:auto; color:var(--tp-text-3,#98a2ae); }
main.ranking-page .tp-xlink{ border-radius:6px; margin-bottom:16px; }
main.ranking-page .leaderboard-section{ background:var(--tp-surface,#161b22); border:1px solid var(--tp-line,#30363d); border-radius:6px; padding:16px 14px; margin-bottom:16px; }
main.ranking-page .leaderboard-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
main.ranking-page .leaderboard-header h2{ font-size:1.1rem; margin:0; text-align:left; letter-spacing:-.01em; }
main.ranking-page .search-form{ flex:1 1 240px; max-width:380px; }
main.ranking-page .search-input{ border-radius:8px; background:var(--tp-bg,#0d1117); border-color:var(--tp-line,#30363d); font-size:16px; }
main.ranking-page .search-btn{ border-radius:8px; padding:10px 16px; font-size:.85rem; }
main.ranking-page .period-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
main.ranking-page .period-tabs::-webkit-scrollbar{ display:none; }
main.ranking-page .period-tabs .period-tab{ flex:0 0 auto; border-radius:8px; min-height:40px; }
main.ranking-page .rank-cards{ gap:0; border:1px solid rgba(255,255,255,.07); border-radius:6px; overflow:hidden; margin:4px 0; }
main.ranking-page .rank-card{ background:transparent; border:0; border-top:1px solid rgba(255,255,255,.07); border-radius:0; padding:10px 12px; box-shadow:none; }
main.ranking-page .rank-card:first-child{ border-top:0; }
main.ranking-page .rank-card:hover{ transform:none; background:var(--tp-surface-2,#1c2128); border-color:rgba(255,255,255,.07); }
main.ranking-page .rank-card.top3{ box-shadow:none; border-color:rgba(255,255,255,.07); }
main.ranking-page .rc-rank{ width:30px !important; height:auto !important; border-radius:0 !important; background:none !important; border:0 !important; font-size:1rem; color:var(--tp-text-3,#98a2ae) !important; box-shadow:none !important; }
/* tp-foundation's "no medals" rule paints .m1-.m3 grey with !important — gold numerals need the same weight */
main.ranking-page .rc-rank.m1, main.ranking-page .rc-rank.m2, main.ranking-page .rc-rank.m3{ background:none !important; border:0 !important; color:var(--tp-gold,#e8b84a) !important; font-size:1.15rem !important; }
main.ranking-page .rc-avatar, main.ranking-page .rc-avatar-ph{ border-radius:6px; border-width:1px; border-color:rgba(255,255,255,.1); }
main.ranking-page .rank-card.top3 .rc-avatar, main.ranking-page .rank-card.top3 .rc-avatar-ph{ border-color:var(--tp-gold-line,rgba(232,184,74,.3)); }
main.ranking-page .rc-name{ text-transform:none; letter-spacing:-.005em; font-size:1rem; font-weight:700; }
main.ranking-page .rc-name a{ padding:2px 0; min-height:0; color:var(--tp-text,#e6edf3); }
main.ranking-page .rc-meta{ margin-top:2px; }
main.ranking-page .rc-pills{ margin-top:4px; gap:8px; }
main.ranking-page .rc-pill{ padding:0; background:transparent; border:0; border-radius:0; font-size:.74rem; color:var(--tp-text-3,#98a2ae); }
main.ranking-page .rc-elo{ color:var(--tp-text,#e6edf3); }
main.ranking-page .rank-card.top3 .rc-elo{ color:var(--tp-gold,#e8b84a); }
main.ranking-page .rc-elo-label{ letter-spacing:.1em; }
main.ranking-page .rc-bar{ height:3px; border-radius:2px; background:rgba(255,255,255,.07); }
main.ranking-page .rc-bar > span{ background:var(--tp-gold,#e8b84a); opacity:.7; border-radius:2px; }
main.ranking-page .stats-card{ background:var(--tp-surface,#161b22); border:1px solid var(--tp-line,#30363d); border-radius:6px; }
main.ranking-page .stats-card-header{ margin-bottom:10px; }
main.ranking-page .stats-card-header h3{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tp-text-3,#98a2ae); }
main.ranking-page .seo-content{ border-radius:6px; }
main.ranking-page .pagination .page-link{ border-radius:8px; }
@media (min-width:768px){ main.ranking-page .stats-section{ grid-template-columns:1fr 1fr; } main.ranking-page{ padding:0 20px 32px; } }
@media (max-width:600px){
  main.ranking-page .leaderboard-section{ padding:14px 10px; }
  main.ranking-page .period-tabs{ margin:0 -10px 12px; padding:0 10px 2px; }
  main.ranking-page > .page-header{ padding:18px 0 12px !important; }
}

/* /otherLinks/mainFiles/css/ranking-polish.css */
/*
 * TrendingPunjabi - Ranking Polish (shared premium ranking design system)
 * Path: /otherLinks/mainFiles/css/ranking-polish.css
 * Load LAST, AFTER rankings-shared.css, in header.php with ?v=1
 *
 * RULES OF THIS LAYER:
 *  - Additive / override-only. Renames or deletes nothing.
 *  - Scoped under ranking containers only (never navbar/footer/home).
 *  - Built on --tp-* tokens so [data-theme="light"] flips automatically.
 *  - Re-asserts prefers-reduced-motion + hover:none + print guards (loads last).
 *  - Reserves !important ONLY to beat existing !important rules / page-inline <style>.
 *  - Hardened per adversarial review (medal logic gated to interleaved tables,
 *    robust rank cell, base card borders, print guard).
 */

/* =====================================================================
   0) TOKENS — one medal set, mapped to canonical --tp-* gold
   ===================================================================== */
:root {
  /* Solid medal colors (badges/text) */
  --tp-medal-1: #fbbf24;   /* gold   */
  --tp-medal-2: #c0c0c0;   /* silver */
  --tp-medal-3: #cd7f32;   /* bronze */
  /* Gradient medals reuse existing tokens with safe fallbacks */
  --tp-medal-1-grad: var(--tp-gold,   linear-gradient(135deg,#fbbf24,#f59e0b));
  --tp-medal-2-grad: var(--tp-silver, linear-gradient(135deg,#9ca3af,#6b7280));
  --tp-medal-3-grad: var(--tp-bronze, linear-gradient(135deg,#d97706,#b45309));
  --tp-medal-1-glow: rgba(251,191,36,0.40);
  --tp-medal-2-glow: rgba(192,192,192,0.32);
  --tp-medal-3-glow: rgba(205,127,50,0.34);
  /* Shared hero wash (gold-forward, theme-safe) */
  --tp-hero-wash: linear-gradient(135deg,
      var(--tp-accent-soft, rgba(232,184,74,0.15)) 0%,
      transparent 55%),
      radial-gradient(120% 140% at 85% -20%,
      var(--tp-accent-glow, rgba(232,184,74,0.12)) 0%, transparent 60%);
}

/* PATCH 1: only the bare [data-theme="light"] selector is valid
   (data-theme lives ON :root, so it can never be a descendant of itself). */
[data-theme="light"] {
  --tp-medal-1-glow: rgba(184,134,11,0.22);
  --tp-medal-2-glow: rgba(107,114,128,0.20);
  --tp-medal-3-glow: rgba(180,83,9,0.20);
}

/* NOTE: we deliberately DON'T remap --accent here. A `--accent: var(--accent,…)`
   self-reference is a CSS cyclic reference that resolves to EMPTY, which would
   nuke --accent across the whole subtree (breaking the existing gradient title
   and active category pills that read var(--accent)). Each ranking page already
   sets its own --accent inline; our polish drives gold from --tp-* tokens
   directly, so no remap is needed. */

/* =====================================================================
   1) ENTRANCE / HOVER MOTION primitives (guarded at the end)
   ===================================================================== */
@keyframes tpRankIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tpHeroGlow {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 0.9; }
}

/* =====================================================================
   2) SHARED HERO BAND
   Decorates existing .page-header (flagship/poll/most-viewed),
   plus opt-in .tp-hero, .hub-header, .hof-header, .hero (instaStats).
   ===================================================================== */
.ranking-page > .page-header,
.tp-hero,
.polls-hub .hub-header,
.movies-page .page-header,
.leaderboard-page .leaderboard-header.tp-hero {
  position: relative;
  background: var(--tp-bg-card, #161b22);
  background-image: var(--tp-hero-wash);
  border: 1px solid var(--tp-accent-soft, rgba(232,184,74,0.18));
  border-radius: var(--tp-radius-xl, 20px);
  padding: 26px 20px 22px;
  margin-bottom: 22px;
  overflow: hidden;
}

/* Soft animated top glow line */
.ranking-page > .page-header::before,
.tp-hero::before,
.polls-hub .hub-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--tp-medal-1-grad);
  opacity: 0.7;
  animation: tpHeroGlow 6s ease-in-out infinite;
}

/* NOTE: we intentionally do NOT override the title color/gradient. The existing
   `.page-header h1` already gradient-clips from var(--accent)/var(--accent-light)
   (each page's flavor). Overriding it here regressed the title to flat white when
   combined with the cyclic-var bug above; the hero BAND is the upgrade, the title
   stays as the page designed it. */

/* Eyebrow + inline hero stat chips (optional markup) */
.tp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  margin-bottom: 10px;
  border-radius: var(--tp-radius-full, 9999px);
  background: var(--tp-accent-soft, rgba(232,184,74,0.15));
  border: 1px solid var(--tp-accent-soft, rgba(232,184,74,0.25));
  color: var(--tp-accent, #e8b84a);
  font-size: var(--tp-font-size-xs, 0.7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Upgrade the existing .stats-bar values into chips visually */
.ranking-page .stats-bar,
.movies-page .stats-bar {
  gap: 14px;
}
.ranking-page .stat-value,
.movies-page .stat-value {
  font-variant-numeric: tabular-nums;
}

/* FIX: the absolutely-positioned .vote-counter ("Votes this session: N") sat on
   top of the centered .battle-title ("Who is Better?") on narrow screens. Flow it
   as its own right-aligned line above the matchup so they never collide. The JS
   .animate pulse (transform/opacity) is unaffected by static positioning. */
.ranking-page .battle-section .vote-counter {
  position: static;
  top: auto; right: auto;
  display: block;
  text-align: right;
  margin: 0 2px 6px 0;
}

/* =====================================================================
   3) RANK BADGE PRIMITIVE + leaderboard rank-cell upgrade
   ===================================================================== */
/* Standalone primitive for new markup (podium, instaStats) */
.tp-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--tp-radius-full, 9999px);
  font-weight: 800;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--tp-text-secondary, #8b949e);
  background: var(--tp-bg-elevated, #1c2128);
  border: 1px solid var(--tp-border, #30363d);
  line-height: 1;
}
.tp-rank-badge.rank-1, .tp-rank-badge.is-1 { color:#3a2c00; background: var(--tp-medal-1-grad); border-color: transparent; box-shadow: 0 0 10px var(--tp-medal-1-glow); }
.tp-rank-badge.rank-2, .tp-rank-badge.is-2 { color:#1c2128; background: var(--tp-medal-2-grad); border-color: transparent; box-shadow: 0 0 10px var(--tp-medal-2-glow); }
.tp-rank-badge.rank-3, .tp-rank-badge.is-3 { color:#fff;    background: var(--tp-medal-3-grad); border-color: transparent; box-shadow: 0 0 10px var(--tp-medal-3-glow); }

/* In-place upgrade of the flagship/poll leaderboard rank cell.
   The cell currently renders "#N" text with .rank-cell .rank-1/2/3.
   We turn the inner number into a centered medal chip without markup change.
   PATCH 4: font-size:0 collapses the transparent "#N" so it cannot reflow;
   the ::after restores its own font-size. */
.ranking-page .leaderboard-table .rank-cell {
  width: 44px;
  text-align: center;
  color: var(--tp-text-secondary, #8b949e);
}
.ranking-page .leaderboard-table .rank-cell.rank-1,
.ranking-page .leaderboard-table .rank-cell.rank-2,
.ranking-page .leaderboard-table .rank-cell.rank-3 {
  position: relative;
  font-size: 0;
  color: transparent; /* hide the raw "#N" glyph; medal disc shows the number */
}
.ranking-page .leaderboard-table .rank-cell.rank-1::after,
.ranking-page .leaderboard-table .rank-cell.rank-2::after,
.ranking-page .leaderboard-table .rank-cell.rank-3::after {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: var(--tp-radius-full, 9999px);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; font-variant-numeric: tabular-nums;
}
.ranking-page .leaderboard-table .rank-cell.rank-1::after { content: "1"; color:#3a2c00; background: var(--tp-medal-1-grad); box-shadow: 0 0 10px var(--tp-medal-1-glow); }
.ranking-page .leaderboard-table .rank-cell.rank-2::after { content: "2"; color:#1c2128; background: var(--tp-medal-2-grad); box-shadow: 0 0 10px var(--tp-medal-2-glow); }
.ranking-page .leaderboard-table .rank-cell.rank-3::after { content: "3"; color:#fff;    background: var(--tp-medal-3-grad); box-shadow: 0 0 10px var(--tp-medal-3-glow); }

/* Gold/silver/bronze left accent + tint on top-3 rows */
.ranking-page .leaderboard-table tbody tr:has(.rank-1) { box-shadow: inset 3px 0 0 0 var(--tp-medal-1); background: linear-gradient(90deg, var(--tp-accent-soft, rgba(232,184,74,0.10)) 0%, transparent 45%); }
.ranking-page .leaderboard-table tbody tr:has(.rank-2) { box-shadow: inset 3px 0 0 0 var(--tp-medal-2); }
.ranking-page .leaderboard-table tbody tr:has(.rank-3) { box-shadow: inset 3px 0 0 0 var(--tp-medal-3); }

/* Subtle ring on the #1 row thumbnail */
.ranking-page .leaderboard-table tbody tr:has(.rank-1) .singer-thumb,
.ranking-page .leaderboard-table tbody tr:has(.rank-1) .person-thumb,
.ranking-page .leaderboard-table tbody tr:has(.rank-1) .song-thumb,
.ranking-page .leaderboard-table tbody tr:has(.rank-1) .movie-thumb {
  outline: 2px solid var(--tp-medal-1);
  outline-offset: 1px;
}

/* =====================================================================
   4) OPTIONAL PODIUM (presentational; new markup)
   ===================================================================== */
.tp-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 10px;
  margin: 0 0 22px;
}
.tp-podium-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 10px 14px;
  text-decoration: none;
  background: var(--tp-bg-card, #161b22);
  border: 1px solid var(--tp-border, #30363d);
  border-radius: var(--tp-radius-lg, 14px);
  color: var(--tp-text-primary, #e6edf3);
  transition: transform var(--tp-transition, 0.2s ease), box-shadow var(--tp-transition, 0.2s ease);
}
.tp-podium-slot.is-1 { order: 2; transform: translateY(-10px); border-color: color-mix(in srgb, var(--tp-medal-1) 55%, var(--tp-border)); box-shadow: 0 8px 28px var(--tp-medal-1-glow); }
.tp-podium-slot.is-2 { order: 1; }
.tp-podium-slot.is-3 { order: 3; }
.tp-podium-slot .tp-podium-img,
.tp-podium-slot img {
  width: 64px; height: 64px; border-radius: var(--tp-radius-full, 9999px);
  object-fit: cover; background: var(--tp-bg-elevated, #1c2128);
}
.tp-podium-slot.is-1 .tp-podium-img,
.tp-podium-slot.is-1 img { width: 78px; height: 78px; outline: 3px solid var(--tp-medal-1); outline-offset: 2px; }
.tp-podium-slot.is-2 img { outline: 3px solid var(--tp-medal-2); outline-offset: 2px; }
.tp-podium-slot.is-3 img { outline: 3px solid var(--tp-medal-3); outline-offset: 2px; }
.tp-podium-name { font-size: 0.82rem; font-weight: 700; line-height: 1.25; }
.tp-podium .tp-rank-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }

/* =====================================================================
   5) STAT-CHIP FAMILY — canonical + gentle alignment of existing chips
   ===================================================================== */
.tp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--tp-radius-full, 9999px);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  background: var(--tp-bg-elevated, #1c2128);
  border: 1px solid var(--tp-border, #30363d);
  color: var(--tp-text-secondary, #8b949e);
  white-space: nowrap;
}
.tp-chip--gold   { background: var(--tp-accent-soft, rgba(232,184,74,0.15)); border-color: transparent; color: var(--tp-accent, #e8b84a); }
.tp-chip--views  { color: var(--tp-color-views,  #4ecdc4); }
.tp-chip--rating { color: var(--tp-color-rating, #ffc107); }
.tp-chip--likes  { color: var(--tp-color-likes,  #7ee787); }
.tp-chip--win    { color: var(--tp-success, #3fb950); }
.tp-chip--loss   { color: var(--tp-danger,  #f85149); }

/* Gently align existing chips to one shape/typography (no color hijack) */
.ranking-page .points-badge,
.ranking-page .elo-badge,
.ranking-page .stat-badge,
.movies-page .movie-rating,
.movies-page .fan-pts,
.leaderboard-page .song-rating {
  border-radius: var(--tp-radius-full, 9999px) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.ranking-page .record-cell .w,
.ranking-page .record-cell .l,
.movies-page .movie-fan-rank .w,
.movies-page .movie-fan-rank .l {
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   6) LIST ROWS & CARDS — one surface + one hover idiom
   PATCH 5: base border so the gold hover border always has width/style.
   ===================================================================== */
.leaderboard-page .song-item,
.movies-page .movie-card,
.celeb-list .celeb-item,
.singers-grid .singer-card,
.tl-wrap .tl-item,
.polls-hub .poll-card,
.tl-dir .tl-dir-card {
  border: 1px solid var(--tp-border, #30363d);
  transition: transform var(--tp-transition, 0.2s ease),
              box-shadow var(--tp-transition, 0.2s ease),
              border-color var(--tp-transition, 0.2s ease);
}
.leaderboard-page .song-item:hover,
.movies-page .movie-card:hover,
.celeb-list .celeb-item:hover,
.singers-grid .singer-card:hover,
.tl-wrap .tl-item:hover,
.polls-hub .poll-card:hover,
.tl-dir .tl-dir-card:hover {
  transform: translateY(-3px);
  border-color: var(--tp-accent, #e8b84a);
  box-shadow: 0 10px 26px var(--tp-accent-glow, rgba(232,184,74,0.12));
}

/* Normalize the leaderboard (list) page bare rank numeral to a medal badge.
   leaderboards.php uses .song-rank.gold/.silver/.bronze (text only). */
.leaderboard-page .song-rank.gold,
.leaderboard-page .song-rank.silver,
.leaderboard-page .song-rank.bronze {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--tp-radius-full, 9999px);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.leaderboard-page .song-rank.gold   { color:#3a2c00; background: var(--tp-medal-1-grad); box-shadow: 0 0 10px var(--tp-medal-1-glow); }
.leaderboard-page .song-rank.silver { color:#1c2128; background: var(--tp-medal-2-grad); box-shadow: 0 0 10px var(--tp-medal-2-glow); }
.leaderboard-page .song-rank.bronze { color:#fff;    background: var(--tp-medal-3-grad); box-shadow: 0 0 10px var(--tp-medal-3-glow); }

/* top-lists canonical .num.gold/.silver/.bronze gets a matching left accent */
.tl-wrap .tl-item:has(.num.gold)   { box-shadow: inset 3px 0 0 0 var(--tp-medal-1); }
.tl-wrap .tl-item:has(.num.silver) { box-shadow: inset 3px 0 0 0 var(--tp-medal-2); }
.tl-wrap .tl-item:has(.num.bronze) { box-shadow: inset 3px 0 0 0 var(--tp-medal-3); }

/* instaStats: normalize .singer-rank text to a badge for top-3 */
.singers-grid .singer-card.top-1 .singer-rank,
.singers-grid .singer-card.top-2 .singer-rank,
.singers-grid .singer-card.top-3 .singer-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--tp-radius-full, 9999px);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.singers-grid .singer-card.top-1 .singer-rank { color:#3a2c00; background: var(--tp-medal-1-grad); }
.singers-grid .singer-card.top-2 .singer-rank { color:#1c2128; background: var(--tp-medal-2-grad); }
.singers-grid .singer-card.top-3 .singer-rank { color:#fff;    background: var(--tp-medal-3-grad); }

.celeb-list .rank.rank-1 { background: var(--tp-medal-1-grad) !important; color:#3a2c00 !important; }
.celeb-list .rank.rank-2 { background: var(--tp-medal-2-grad) !important; color:#1c2128 !important; }
.celeb-list .rank.rank-3 { background: var(--tp-medal-3-grad) !important; color:#fff !important; }

/* =====================================================================
   7) HALL OF FAME alignment
   PATCH 6: HOF sub-pages set .stats-item-rank via page-inline <style>, which
   beats external on source order — so force the top-3 medal discs with
   !important (external !important still beats normal inline-<style> rules).
   ===================================================================== */
.hof-page .stats-item-rank { font-variant-numeric: tabular-nums; }
.hof-page .stats-grid .stats-item:nth-child(1) .stats-item-rank,
.hof-page .stats-grid .stats-item:nth-child(2) .stats-item-rank,
.hof-page .stats-grid .stats-item:nth-child(3) .stats-item-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--tp-radius-full, 9999px);
  font-weight: 800;
}
.hof-page .stats-grid .stats-item:nth-child(1) .stats-item-rank { background: var(--tp-medal-1-grad) !important; color:#3a2c00 !important; }
.hof-page .stats-grid .stats-item:nth-child(2) .stats-item-rank { background: var(--tp-medal-2-grad) !important; color:#1c2128 !important; }
.hof-page .stats-grid .stats-item:nth-child(3) .stats-item-rank { background: var(--tp-medal-3-grad) !important; color:#fff !important; }

/* Champion cards / podium get a gold #1 thread */
.hof-page .hof-champion.first,
.hof-page .hof-category-card:first-child {
  border-color: color-mix(in srgb, var(--tp-medal-1) 50%, var(--tp-border, #30363d));
  box-shadow: 0 8px 26px var(--tp-medal-1-glow);
}

/* Light-theme safety for HOF sub-pages that hardcode dark surfaces */
[data-theme="light"] .hof-page .stats-item { background: var(--tp-bg-card, #f6f8fa); }
[data-theme="light"] .hof-page .stats-item-name,
[data-theme="light"] .hof-page .monthly-card-name { color: var(--tp-text-primary, #1f2328); }
[data-theme="light"] .hof-page .calendar-day { color: var(--tp-text-primary, #1f2328); }

/* =====================================================================
   8) DATATABLES (#mytable) — additive premium polish
   PATCH 2+3 (refined): the iframe-interleaved nth-child(1/3/5)=top-3 logic is
   ONLY valid for tableprint.php song tables. Rather than a per-page class, we
   auto-detect interleaving with :has(tr.iframerow) — so 3-column tables that
   have NO iframe rows (e.g. Roadies) are never mis-medaled, with zero markup
   edits. Left medal bar is desktop-only to avoid mobile grid-card clipping.
   ===================================================================== */
.tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(1):not(.iframerow) td:first-child { color: var(--tp-medal-1) !important; font-weight: 800 !important; }
.tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(3):not(.iframerow) td:first-child { color: var(--tp-medal-2) !important; font-weight: 800 !important; }
.tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(5):not(.iframerow) td:first-child { color: var(--tp-medal-3) !important; font-weight: 800 !important; }
@media (min-width: 768px) {
  .tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(1):not(.iframerow) { box-shadow: inset 3px 0 0 0 var(--tp-medal-1); }
  .tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(3):not(.iframerow) { box-shadow: inset 3px 0 0 0 var(--tp-medal-2); }
  .tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(5):not(.iframerow) { box-shadow: inset 3px 0 0 0 var(--tp-medal-3); }
}
/* Tabular nums on numeric columns for clean alignment (safe on any column count) */
.tp-table-wrap #mytable td:first-child,
.tp-table-wrap #mytable td:nth-child(4),
.tp-table-wrap #mytable td:nth-child(5),
.tp-table-wrap #mytable td:nth-child(6) {
  font-variant-numeric: tabular-nums !important;
}

/* =====================================================================
   9) ENTRANCE MOTION (staggered, capped) — applied broadly, guarded below
   ===================================================================== */
.ranking-page .leaderboard-table tbody tr,
.leaderboard-page .song-item,
.movies-page .movie-card,
.celeb-list .celeb-item,
.singers-grid .singer-card,
.tl-wrap .tl-item,
.tl-dir .tl-dir-card,
.polls-hub .poll-card,
.hof-page .stats-item,
.hof-page .hof-category-card,
.hof-page .monthly-card {
  animation: tpRankIn 0.45s ease both;
}
/* Cap stagger to the first rows to avoid long delays on big tables/grids */
.ranking-page .leaderboard-table tbody tr:nth-child(1)  { animation-delay: .02s; }
.ranking-page .leaderboard-table tbody tr:nth-child(2)  { animation-delay: .05s; }
.ranking-page .leaderboard-table tbody tr:nth-child(3)  { animation-delay: .08s; }
.ranking-page .leaderboard-table tbody tr:nth-child(4)  { animation-delay: .11s; }
.ranking-page .leaderboard-table tbody tr:nth-child(5)  { animation-delay: .14s; }
.ranking-page .leaderboard-table tbody tr:nth-child(n+6){ animation-delay: .16s; }

.movies-page .movie-card:nth-child(1),
.celeb-list .celeb-item:nth-child(1),
.singers-grid .singer-card:nth-child(1),
.tl-dir .tl-dir-card:nth-child(1),
.tl-wrap .tl-item:nth-child(1) { animation-delay: .02s; }
.movies-page .movie-card:nth-child(2),
.celeb-list .celeb-item:nth-child(2),
.singers-grid .singer-card:nth-child(2),
.tl-dir .tl-dir-card:nth-child(2),
.tl-wrap .tl-item:nth-child(2) { animation-delay: .05s; }
.movies-page .movie-card:nth-child(3),
.celeb-list .celeb-item:nth-child(3),
.singers-grid .singer-card:nth-child(3),
.tl-dir .tl-dir-card:nth-child(3),
.tl-wrap .tl-item:nth-child(3) { animation-delay: .08s; }
.movies-page .movie-card:nth-child(n+4),
.celeb-list .celeb-item:nth-child(n+4),
.singers-grid .singer-card:nth-child(n+4),
.tl-dir .tl-dir-card:nth-child(n+4),
.tl-wrap .tl-item:nth-child(n+4) { animation-delay: .10s; }

/* =====================================================================
   10) LIGHT-THEME PATCHES for the new hero / surfaces
   ===================================================================== */
[data-theme="light"] .ranking-page > .page-header,
[data-theme="light"] .tp-hero,
[data-theme="light"] .polls-hub .hub-header,
[data-theme="light"] .movies-page .page-header {
  background: var(--tp-bg-card, #f6f8fa);
  background-image: var(--tp-hero-wash);
  border-color: var(--tp-accent-soft, rgba(184,134,11,0.18));
}
[data-theme="light"] .tp-podium-slot,
[data-theme="light"] .tp-chip,
[data-theme="light"] .tp-rank-badge {
  background: var(--tp-bg-card, #f6f8fa);
  border-color: var(--tp-border, #d1d9e0);
}

/* =====================================================================
   11) GUARDS — re-asserted because this file loads LAST
   ===================================================================== */
@media (hover: none) {
  .leaderboard-page .song-item:hover,
  .movies-page .movie-card:hover,
  .celeb-list .celeb-item:hover,
  .singers-grid .singer-card:hover,
  .tl-wrap .tl-item:hover,
  .polls-hub .poll-card:hover,
  .tl-dir .tl-dir-card:hover,
  .tp-podium-slot:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-page > .page-header::before,
  .tp-hero::before,
  .polls-hub .hub-header::before { animation: none !important; }

  .ranking-page .leaderboard-table tbody tr,
  .leaderboard-page .song-item,
  .movies-page .movie-card,
  .celeb-list .celeb-item,
  .singers-grid .singer-card,
  .tl-wrap .tl-item,
  .tl-dir .tl-dir-card,
  .polls-hub .poll-card,
  .hof-page .stats-item,
  .hof-page .hof-category-card,
  .hof-page .monthly-card,
  .tp-podium-slot {
    animation: none !important;
    transition: none !important;
  }
  .tp-podium-slot.is-1 { transform: none; }
  .leaderboard-page .song-item:hover,
  .movies-page .movie-card:hover,
  .celeb-list .celeb-item:hover,
  .singers-grid .singer-card:hover,
  .tl-wrap .tl-item:hover,
  .polls-hub .poll-card:hover,
  .tl-dir .tl-dir-card:hover,
  .tp-podium-slot:hover {
    transform: none !important;
  }
}

/* PATCH 7: print guard so opacity:0 entrance never blanks content */
@media print {
  .ranking-page .leaderboard-table tbody tr,
  .leaderboard-page .song-item,
  .movies-page .movie-card,
  .celeb-list .celeb-item,
  .singers-grid .singer-card,
  .tl-wrap .tl-item,
  .tl-dir .tl-dir-card,
  .polls-hub .poll-card,
  .hof-page .stats-item,
  .hof-page .hof-category-card,
  .hof-page .monthly-card {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* /otherLinks/mainFiles/css/ranking-arcade.css */
/* ranking-arcade.css — one shared "arcade leaderboard" look for every ranking page
   (most-viewed Punjabi/Indian, most-liked, most-commented, yearly).
   MUST load AFTER data-tables-modern.css: it corrects that file's mobile column rules,
   which hid column 6 (Likes) — the very metric the Most-Liked page ranks by. */

/* ── Site-wide PAGE TITLE treatment ─────────────────────────────────────
   Owner liked the song page's title style, so every page's H1 now shares it:
   gold accent, heavy weight, tight leading, slight negative tracking.
   Only the *style* is shared — each page keeps its own responsive SIZE, so the
   compact ranking heroes stay compact and the song/movie titles stay large. */
.hero-section h1,
.page-header h1,
.song-page .song-title,
h1.page-title {
  color: var(--accent, #e8b84a);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.012em;
}
/* the white "highlight" word inside a title (e.g. Most Viewed <span>Punjabi Songs</span>) */
.hero-section h1 span,
.page-header h1 span { color: var(--text-primary, #fff); font-weight: 800; }

/* ── Hero: compact + squared ────────────────────────────────────────── */
.hero-section {
  text-align: center;
  padding: 11px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.hero-section h1 {
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.hero-subtitle { font-size: 0.8rem; margin-bottom: 0; }

/* ── Ranking tabs: squared, bold, uppercase ─────────────────────────── */
.rank-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.rank-tab {
  padding: 9px 15px;
  background: var(--bg-card, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 3px;
  color: var(--text-secondary, #8b949e);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: all 0.15s;
}
.rank-tab:hover {
  border-color: var(--accent, #e8b84a);
  color: var(--accent, #e8b84a);
  background: rgba(232, 184, 74, 0.10);
}
.rank-tab.active {
  background: var(--accent, #e8b84a);
  border-color: var(--accent, #e8b84a);
  color: #141018;            /* dark on gold — never white */
}

/* ── Leaderboard table: squared, bold, tabular figures ──────────────── */
.tp-table-wrap #mytable thead th {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 0 !important;
}
.tp-table-wrap #mytable tbody td {
  border-radius: 0 !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.tp-table-wrap #mytable .rank-col,
.tp-table-wrap #mytable .views-col,
.tp-table-wrap #mytable .metric-col,
.tp-table-wrap #mytable .rating-col {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tp-table-wrap #mytable .rank-col { font-size: 0.95rem; }
.tp-table-wrap #mytable .tp-song-name > a { font-weight: 700; }
.tp-table-wrap #mytable .tp-song-thumb img { border-radius: 3px !important; }

/* Readability: the rank numbers and the artist subtitle were rendering at only ~5:1
   (var(--tp-text-muted) -> #8b949e) at 12–13px, which is what made the tables look washed out. */
.tp-table-wrap #mytable td.rank-col { color: #aab4bf !important; }
.tp-table-wrap .tp-song-sub { color: #a9b3bd !important; font-weight: 600; }

/* whole row navigates to the song page */
.tp-table-wrap #mytable tbody tr.song-row { cursor: pointer; }
.tp-table-wrap #mytable tbody tr.song-row:hover {
  background: rgba(232, 184, 74, 0.07) !important;
  box-shadow: inset 3px 0 0 var(--accent, #e8b84a);
}

/* ── Mobile: always show the metric the page RANKS BY ───────────────── */
@media (max-width: 768px) {
  /* rating is the least useful column on a phone — drop it */
  .tp-table-wrap #mytable th:nth-child(5),
  .tp-table-wrap #mytable td.rating-col { display: none !important; }

  /* Pages ranking by likes/comments mark their wrapper .rank-by-metric:
     show that column (data-tables-modern hides col 6 by default — which is
     exactly what hid Likes on the Most-Liked page) and drop Views, since the
     view count already appears under the song title. */
  .tp-table-wrap.rank-by-metric #mytable th:nth-child(6),
  .tp-table-wrap.rank-by-metric #mytable td.metric-col { display: table-cell !important; }
  .tp-table-wrap.rank-by-metric #mytable th:nth-child(4),
  .tp-table-wrap.rank-by-metric #mytable td.views-col { display: none !important; }

  .rank-tabs { gap: 6px; margin-bottom: 12px; }
  .rank-tab { padding: 8px 10px; font-size: 0.72rem; letter-spacing: 0.03em; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .hero-section { padding: 9px 12px; margin-bottom: 10px; }
  .hero-section h1 { font-size: 1.08rem; }
  .hero-subtitle { font-size: 0.74rem; }
}
@media (max-width: 480px) {
  .hero-section h1 { font-size: 1rem; }
  .rank-tab { padding: 7px 9px; font-size: 0.72rem; letter-spacing: 0.02em; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* light theme */
[data-theme="light"] .rank-tab { background: #f6f8fa; border-color: rgba(27,31,36,.14); color: #57606a; }
[data-theme="light"] .rank-tab:hover { color: #8a6508; border-color: #8a6508; background: rgba(184,134,11,.08); }
[data-theme="light"] .rank-tab.active { background: #e8b84a; border-color: #e8b84a; color: #141018; }

/* ── Song-stats LEADERBOARD pages (most-liked, like-ratio, engagement, views-per-day,
   fastest-100m, leaderboards) — bring them onto the arcade look. Scoped to
   .leaderboard-page so the poll/battle pages that also use .page-header stay untouched. */
.leaderboard-page .page-header {
    padding: 13px 16px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(232,184,74,0.10), rgba(232,184,74,0.015));
    border: 1px solid rgba(232,184,74,0.20);
    border-radius: 5px;
}
.leaderboard-page .page-header h1 {
    font-size: 1.4rem;
    color: var(--accent, #e8b84a);
    -webkit-text-fill-color: var(--accent, #e8b84a); /* cancel the shared gradient-clip so gold shows solid */
    background: none;
    font-weight: 800;
    letter-spacing: -0.012em;
    line-height: 1.18;
    margin-bottom: 3px;
}
.leaderboard-page .page-header p { font-size: 0.84rem; margin: 0 auto; max-width: 620px; }

/* the leaderboard table: squared, tabular figures, readable heads, bold ranked metric (col 3) */
.leaderboard-table { border-collapse: separate; border-spacing: 0; }
.leaderboard-table th {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
    color: var(--text-muted, #98a2ae);
}
.leaderboard-table td { font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.leaderboard-table tbody tr:hover { background: rgba(232,184,74,0.06); }
.leaderboard-table td:nth-child(3) { font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
    .leaderboard-page .page-header { padding: 10px 13px; margin-bottom: 11px; }
    .leaderboard-page .page-header h1 { font-size: 1.12rem; }
    .leaderboard-page .page-header p { font-size: 0.78rem; }
}

/* ── Back-to-top button (global) ─────────────────────────────────────── */
#tp-top {
    position: fixed; right: 16px; bottom: 20px; z-index: 1190;
    width: 42px; height: 42px; border-radius: 6px;
    border: 1px solid var(--border, #30363d); background: var(--bg-card, #161b22);
    color: var(--accent, #e8b84a); font-size: 1.15rem; font-weight: 800; line-height: 1;
    cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity .2s, transform .2s, background .15s, color .15s;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
#tp-top.show { opacity: .94; pointer-events: auto; transform: none; }
#tp-top:hover { background: var(--accent, #e8b84a); color: #141018; border-color: var(--accent, #e8b84a); }
[data-theme="light"] #tp-top { background: #ffffff; border-color: rgba(27,31,36,.16); box-shadow: 0 6px 20px rgba(0,0,0,.14); }
/* clear the mobile bottom-nav */
@media (max-width: 768px) { #tp-top { bottom: 72px; right: 12px; width: 40px; height: 40px; } }

/* ── Freshness "Live · updated Xm ago" chip (trust signal: the data is live) ── */
.tp-fresh { display:inline-flex; align-items:center; gap:5px; margin-left:10px; color:#3fb950; font-weight:600; font-size:.9em; white-space:nowrap; }
.tp-fresh-dot { width:7px; height:7px; border-radius:50%; background:#3fb950; animation:tpPulse 2.2s infinite; }
@keyframes tpPulse { 0%,100%{box-shadow:0 0 0 0 rgba(63,185,80,.5)} 50%{box-shadow:0 0 0 5px rgba(63,185,80,0)} }
[data-theme="light"] .tp-fresh { color:#15803d; }
[data-theme="light"] .tp-fresh-dot { background:#15803d; }
@media (prefers-reduced-motion: reduce){ .tp-fresh-dot{ animation:none; } }

/* =====================================================================
   RANKING PAGES — 2026-09-05 design layer (owner: "ranking pages design
   needs to be improved too … most viewed punjabi songs, most followed
   punjabi singers, all those pages").
   Same language as the redesigned stats hub: a left-aligned masthead,
   flat rows separated by hairlines (no zebra), gold ranks for the top
   three, bigger stills, tabular figures, and a DATA BAR under every row
   showing its share of the #1 entry. One accent, 6px/8px radii, no
   gradients. Loads site-wide from header.php, so every selector is scoped
   to the ranking structures (.hero-section, .rank-tabs, .tp-table-wrap
   #mytable, main.mfl). ===================================================== */

/* ── masthead ─────────────────────────────────────────────────────── */
/* `body .hero-section` (0,1,1) beats tp-foundation's `.hero-section` (0,1,0) !important rules that load after this file */
body .hero-section{
  text-align: left !important;
  padding: 26px 0 14px !important;
  margin: 0 0 14px !important;
  border-radius: 0 !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tp-line, #30363d) !important;
}
body .hero-section h1{
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 8px !important;
  text-align: left !important;
  color: var(--tp-text, #e6edf3) !important;
}
body .hero-section h1 span{ color: var(--tp-gold, #e8b84a) !important; }
body .hero-section .hero-subtitle, body .hero-section p{
  font-size: .95rem !important;
  line-height: 1.5 !important;
  color: var(--tp-text-2, #b6bec8) !important;
  max-width: 62ch;
  margin: 0 !important;
  text-align: left !important;
}
body .hero-section .tp-fresh{ margin-left: 0; margin-top: 8px; font-size: .78rem; }
@media (max-width: 768px){
  .hero-section{ padding: 18px 0 12px !important; margin-bottom: 12px !important; }
  .hero-section h1{ font-size: 1.45rem !important; }
  body .hero-section .hero-subtitle, body .hero-section p{ font-size: .88rem !important; }
}

/* ── ranking tabs: one segmented strip ─────────────────────────────── */
.rank-tabs{ justify-content: flex-start; gap: 6px; margin: 0 0 14px; }
.rank-tab{
  border-radius: var(--tp-r-btn, 8px);
  font-size: .76rem;
  letter-spacing: .05em;
  padding: 10px 14px;
  min-height: 40px;
  display: inline-flex; align-items: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rank-tab:hover{ background: var(--tp-surface-2, #1c2128); }
.rank-tab.active:hover{ background: var(--tp-gold-hi, #f5c563); }

/* ── search + count ─────────────────────────────────────────────────── */
.tp-song-search{ align-items: center; margin-bottom: 8px; }
.tp-song-search-box{ border-radius: var(--tp-r-btn, 8px); background: var(--tp-surface, #161b22); border-color: var(--tp-line, #30363d); min-height: 44px; }
.tp-song-search-btn{ border-radius: var(--tp-r-btn, 8px); }
.tp-song-count{ font-size: .8rem; margin-bottom: 10px; }

/* ── the table: flat rows, hairlines, gold top three ───────────────── */
.tp-table-wrap{ border-radius: var(--tp-r-sm, 6px) !important; border: 1px solid var(--tp-line, #30363d); background: var(--tp-surface, #161b22); }
.tp-table-wrap #mytable thead th{
  background: var(--tp-surface, #161b22) !important;
  color: var(--tp-text-3, #98a2ae) !important;
  border-bottom: 1px solid var(--tp-line, #30363d) !important;
  font-size: .66rem !important; letter-spacing: .1em !important;
  padding: 12px 14px !important;
}
.tp-table-wrap #mytable tbody tr:nth-child(4n+1):not(.iframerow),
.tp-table-wrap #mytable tbody tr:nth-child(4n+3):not(.iframerow){ background: transparent !important; }
.tp-table-wrap #mytable tbody tr.song-row:hover{ background: var(--tp-surface-2, #1c2128) !important; box-shadow: inset 3px 0 0 var(--tp-gold, #e8b84a); }
.tp-table-wrap #mytable td{ padding: 12px 14px !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; }
.tp-table-wrap #mytable tbody tr:last-child td{ border-bottom: 0 !important; }
.tp-table-wrap #mytable td.rank-col{ font-size: .95rem !important; color: var(--tp-text-3, #98a2ae) !important; font-weight: 800; }
.tp-table-wrap #mytable tr.is-top3 td.rank-col{ color: var(--tp-gold, #e8b84a) !important; }
.tp-table-wrap #mytable .tp-song-thumb{ width: 72px; height: 40px; border-radius: 4px; }
.tp-table-wrap #mytable .tp-song-thumb img{ border-radius: 4px !important; }
.tp-table-wrap #mytable .tp-song-name > a{ font-size: .96rem; color: var(--tp-text, #e6edf3) !important; }
.tp-table-wrap #mytable .tp-song-name > a:hover{ color: var(--tp-gold, #e8b84a) !important; }
.tp-table-wrap #mytable td.artist-col{ color: var(--tp-text-2, #b6bec8) !important; font-size: .86rem !important; }
.tp-table-wrap #mytable td.artist-col a{ color: var(--tp-text-2, #b6bec8) !important; }
.tp-table-wrap #mytable td.artist-col a:hover{ color: var(--tp-gold, #e8b84a) !important; }
.tp-table-wrap #mytable td.views-col{ color: var(--tp-text-2, #b6bec8) !important; font-weight: 600 !important; font-size: .9rem !important; }
.tp-table-wrap #mytable td.metric-col{ color: var(--tp-text, #e6edf3) !important; font-size: 1.02rem !important; font-weight: 800 !important; }
.tp-table-wrap #mytable tr.is-top3 td.metric-col{ color: var(--tp-gold, #e8b84a) !important; }
.tp-table-wrap #mytable td.rating-col a{ color: var(--tp-text-3, #98a2ae) !important; font-weight: 600 !important; }
/* the data bar — share of #1, drawn under the song cell */
.tp-song-cell{ flex-wrap: wrap; row-gap: 6px; }
.tp-song-bar{ display: block; flex: 1 0 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.tp-song-bar i{ display: block; height: 100%; width: 0; background: var(--tp-gold, #e8b84a); opacity: .7; border-radius: 2px; }
.tp-table-wrap #mytable .tp-song-views{ color: var(--tp-text, #e6edf3); }
.tp-pager{ margin: 18px 0 8px; }
.tp-pg{ border-radius: var(--tp-r-btn, 8px); min-height: 40px; display: inline-flex; align-items: center; }
@media (max-width: 768px){
  .tp-table-wrap #mytable td{ padding: 10px 8px !important; }
  .tp-table-wrap #mytable .tp-song-thumb{ width: 60px !important; height: 34px !important; }
  .tp-table-wrap #mytable td.rank-col{ width: 36px !important; }
  .tp-table-wrap #mytable td.metric-col{ font-size: .95rem !important; }
  .tp-song-bar{ height: 2px; }
}

/* ── most-followed pages (main.mfl) — same idiom ───────────────────── */
main.mfl .mfl-wrap{ border-radius: var(--tp-r-sm, 6px); }
main.mfl .mfl-table thead th{ background: var(--tp-surface, #161b22); color: var(--tp-text-3, #98a2ae); letter-spacing: .1em; }
main.mfl .mfl-table td{ border-bottom: 1px solid rgba(255,255,255,.07); }
main.mfl .mfl-table tbody tr:hover td{ background: var(--tp-surface-2, #1c2128); }
main.mfl .mfl-rank{ background: none; border: 0; color: var(--tp-text-3, #98a2ae); font-weight: 800; font-size: .95rem; min-width: 0; height: auto; }
main.mfl .mfl-row--top3 .mfl-rank, main.mfl .mfl-row--top .mfl-rank{ background: none; color: var(--tp-gold, #e8b84a); font-size: 1.1rem; }
main.mfl .mfl-ava{ width: 52px; height: 52px; border-radius: 6px; }
main.mfl .mfl-ava img{ border-radius: 6px; }
main.mfl .mfl-name{ font-size: .98rem; font-weight: 700; color: var(--tp-text, #e6edf3); }
main.mfl .mfl-num{ font-size: 1.05rem; color: var(--tp-text, #e6edf3); }
main.mfl .mfl-row--top3 .mfl-num, main.mfl .mfl-row--top .mfl-num{ color: var(--tp-gold, #e8b84a); }
main.mfl .mfl-bar{ display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; margin: 6px 0 0; max-width: 260px; }
main.mfl .mfl-bar i{ display: block; height: 100%; width: 0; background: var(--tp-gold, #e8b84a); opacity: .7; border-radius: 2px; }
main.mfl .mfl-search{ border-radius: var(--tp-r-btn, 8px); min-height: 44px; }
@media (max-width: 480px){
  main.mfl .mfl-ava{ width: 44px; height: 44px; }
  main.mfl .mfl-bar{ height: 2px; max-width: none; }
}

/* /otherLinks/mainFiles/css/tp-foundation.css */
/* ============================================================================
 * tp-foundation.css — v1  (2026-07-25)
 *
 * ONE source of truth for tokens. Loaded LAST, after miniAll / modern-theme /
 * rankings-*, so it wins on source order and almost nothing here needs
 * !important.
 *
 * Why this exists: the site had THREE competing token namespaces —
 *   css/variables.css        --tp-*
 *   css/modern-theme.css     --bg-body / --accent / --text-primary
 *   shared/navBar.php        a third :root opened inside <body>
 * each defining light theme differently (#b8860b vs #8b6914, #fff vs #fffaee).
 * Every value below already existed somewhere in the codebase; this is
 * consolidation, not a new palette.
 *
 * The bridge block at the bottom aliases the two legacy namespaces onto these,
 * so no existing rule has to be rewritten and the three sets can never
 * disagree again.
 * ========================================================================== */

:root{
  /* ── Brand gold. #e8b84a is already hardcoded 13x across pages/. ── */
  --tp-gold:            #e8b84a;
  --tp-gold-hi:         #f5c563;
  --tp-gold-lo:         #d4a53f;
  --tp-gold-soft:       rgba(232,184,74,.15);
  --tp-gold-line:       rgba(232,184,74,.30);
  --tp-on-gold:         #141018;

  /* ── Surfaces. #0a0a0f survives only as chrome (navbar/bottom nav/footer),
        which is what it always looked like. ── */
  --tp-bg:              #0d1117;
  --tp-surface:         #161b22;
  --tp-surface-2:       #1c2128;
  --tp-chrome:          #0a0a0f;

  --tp-text:            #e6edf3;
  --tp-text-2:          #b6bec8;
  --tp-text-3:          #98a2ae;
  --tp-link:            #58a6ff;

  --tp-line:            #30363d;
  --tp-line-soft:       #21262d;

  /* ── Type scale. Every value bounded — no naked vw. ── */
  --tp-h1:   clamp(1.50rem, 1.10rem + 1.70vw, 2.25rem);
  --tp-h2:   clamp(1.25rem, 1.09rem + 0.68vw, 1.60rem);
  --tp-h3:   clamp(1.05rem, 0.99rem + 0.26vw, 1.20rem);
  --tp-body: 1rem;
  --tp-meta: 0.8125rem;
  --tp-micro:0.6875rem;
  --tp-lh:   1.55;
  --tp-lh-tight: 1.25;
  --tp-measure: 68ch;

  /* ── Spacing, 4px base ── */
  --tp-1: 4px;  --tp-2: 8px;  --tp-3: 12px; --tp-4: 16px;
  --tp-5: 24px; --tp-6: 32px; --tp-7: 48px; --tp-8: 64px;

  /* ── Radius: 15 values collapse to 4. 12px is already the plurality. ── */
  --tp-r-sm:   6px;
  --tp-r:      12px;
  --tp-r-btn:  8px;
  --tp-r-pill: 999px;

  --tp-sh:     0 1px 2px rgba(0,0,0,.30);
  --tp-sh-up:  0 8px 24px rgba(0,0,0,.40);

  /* ── Layout shell / fixed-element contract ──
        Four fixed things (navbar, bottom nav, back-to-top, consent) previously
        had no shared offset, which is how the cookie bar ended up covering the
        entire bottom nav. These are the single source for those offsets. */
  --tp-shell:  1320px;
  --tp-gutter: clamp(16px, 3vw, 32px);
  --tp-navh:   60px;
  --tp-botnav: 72px;
  --tp-tap:    44px;

  --tp-t: .18s ease;
}

[data-theme="light"]{
  --tp-gold:      #8b6914;   /* 4.9:1 on #fffaee — the navbar's value wins */
  --tp-gold-hi:   #6e5210;
  --tp-gold-lo:   #6e5210;
  --tp-gold-soft: rgba(139,105,20,.10);
  --tp-gold-line: rgba(139,105,20,.28);
  --tp-on-gold:   #fffaee;

  --tp-bg:        #fffaee;
  --tp-surface:   #ffffff;
  --tp-surface-2: #f5efde;
  --tp-chrome:    #fffaee;

  --tp-text:      #1c1a16;
  --tp-text-2:    #4a4337;
  --tp-text-3:    #6e6354;
  --tp-link:      #0969da;

  --tp-line:      #d6cdb2;
  --tp-line-soft: #e5dec5;

  --tp-sh:        0 1px 2px rgba(0,0,0,.06);
  --tp-sh-up:     0 8px 24px rgba(0,0,0,.12);
}

/* ── Bridge: alias the two legacy namespaces onto the tokens above. Nothing
      existing has to be rewritten, and the three sets can never drift apart. ── */
:root,[data-theme="light"]{
  --bg-body:var(--tp-bg);            --tp-bg-body:var(--tp-bg);
  --bg-card:var(--tp-surface);       --tp-bg-card:var(--tp-surface);
  --bg-elevated:var(--tp-surface-2);
  --text-primary:var(--tp-text);     --tp-text-primary:var(--tp-text);
  --text-secondary:var(--tp-text-2); --text-muted:var(--tp-text-3);
  --accent:var(--tp-gold);           --tp-accent:var(--tp-gold);
  --accent-hover:var(--tp-gold-hi);  --accent-soft:var(--tp-gold-soft);
  --border-color:var(--tp-line);     --border:var(--tp-line);
  --border-light:var(--tp-line-soft);
  --link-color:var(--tp-link);
  --navbar-bg:var(--tp-chrome);
}

/* ============================================================================
 * SPRINT 1 — targeted repairs. Each one is here rather than in the legacy
 * sheet it fixes, because this file loads last and miniAll.css is a 53KB
 * single-line file shared site-wide.
 * ========================================================================== */

/* ── H1 was being set by miniAll.css to `3.2vw !important` / `190% !important`,
      which made EVERY page's own heading size dead CSS and produced a 41px H1
      on a phone and a tiny one on a large monitor. Capped here rather than
      deleting the miniAll rules outright — that is a staged change, and this
      gets the visible benefit with no risk to the 53KB legacy sheet. ── */
h1{ font-size: var(--tp-h1) !important; line-height: var(--tp-lh-tight); }

/* miniAll.css also ships `h1{text-align:center}` as a bare element rule. A parent
   setting text-align:left cannot beat an explicit declaration on the child, so every
   migrated page still had a centred H1 sitting above left-aligned content.
   `inherit` hands the decision back to the container: blocks pinned centre (heroes,
   .tp-cta-section) still centre their H1; migrated page bodies get left. */
h1{ text-align: inherit; }

/* ── Back-to-top sat under the phone bottom-nav and was a 40px target inside
      the notch safe area. One offset token now drives both it and the cookie
      bar, so they can never collide again. ── */
#tp-top{
  bottom: calc(var(--tp-botnav) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  width: var(--tp-tap) !important;
  height: var(--tp-tap) !important;
}
@media (min-width: 992px){
  /* No bottom nav on desktop — sit it back down in the corner. */
  #tp-top{ bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── iOS zooms in on any field under 16px and never zooms back out. ──
      Applies to the public site only; /admin has its own stylesheet. */
@media (max-width: 768px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { font-size: 16px; }
}

/* ============================================================================
 * LIGHT THEME NAVBAR
 *
 * In light mode the page went cream but the header stayed pure black with an
 * orange glow left over from the 2020 skin, and every nav link turned link-blue.
 * It read as a half-loaded page — and it was the first thing every light-mode
 * visitor saw, on every page.
 *
 * Two separate causes, and BOTH halves have to ship together. Shipping only the
 * link colour onto a still-black bar would give near-black text on black:
 *
 *   1. miniAll.css: `#navmain{background:#000!important; box-shadow:...orange}`
 *      (0,1,0,0 + !important) beats `.tp-navbar{background:var(--navbar-bg)}`
 *      (0,1,0), so --navbar-bg never rendered anywhere on the site.
 *      Beaten here with `#navmain.tp-navbar` (0,1,1,0) + !important, loaded last.
 *
 *   2. navBar.php: `[data-theme="light"] a{color:#0969da}` was unscoped and
 *      reached into the header. Confined to main/footer below.
 *
 * modern-theme.css:449-491 already held a full light-navbar treatment, but every
 * one of its 11 rules targets `#tp-navbar` — an id that appears NOWHERE in the
 * markup (the real id is `navmain`), so all 11 have always been dead. Rather
 * than retarget them verbatim (they use a GitHub-white #ffffff/#d1d9e0 palette
 * that would clash with this site's warm cream), the same repairs are expressed
 * here against the real tokens.
 * ========================================================================== */

#navmain.tp-navbar{
  background: var(--tp-chrome) !important;
  box-shadow: none !important;
  font-weight: 400;                 /* was 700, inherited by every dropdown item */
  border-bottom: 1px solid var(--tp-line);
}

/* The logo was pinned to 40px by `#logo` in miniAll, beating the intended 36px. */
.tp-navbar-brand img#logo{ height: 36px; }
@media (max-width: 576px){ .tp-navbar-brand img#logo{ height: 30px; } }

[data-theme="light"]{
  /* Scope the blue link colour to real content so it cannot reach the chrome. */
}
[data-theme="light"] main a,
[data-theme="light"] footer a{ color: var(--tp-link); }

/* Nav links follow the theme's text colour — except the gold "hot" item, which
   is (0,2,0) and would otherwise be flattened by this (0,2,1) rule. */
[data-theme="light"] #navmain a:not(.tp-nav-hot),
[data-theme="light"] #navmain .tp-menu-link:not(.tp-nav-hot),
[data-theme="light"] #navmain .tp-dropdown-link{ color: var(--tp-text); }

[data-theme="light"] #navmain .tp-menu-link:hover,
[data-theme="light"] #navmain .tp-dropdown-link:hover{
  color: var(--tp-text);
  background: var(--tp-surface-2);
}
[data-theme="light"] #navmain .tp-dropdown{
  background: var(--tp-surface);
  border: 1px solid var(--tp-line);
  box-shadow: var(--tp-sh-up);
}
[data-theme="light"] #navmain .tp-search{
  background: var(--tp-surface-2);
  border-color: var(--tp-line);
}
[data-theme="light"] #navmain .tp-search input{ color: var(--tp-text); }
[data-theme="light"] #navmain .tp-theme-btn,
[data-theme="light"] #navmain .tp-hamburger{
  background: var(--tp-surface-2);
  border-color: var(--tp-line);
}
[data-theme="light"] #navmain .tp-hamburger span{ background: var(--tp-text); }

/* ── Dropdown alignment: section headers were centred while their links were
      left-aligned, so every menu looked mis-set. ── */
.tp-dropdown-header{ text-align: left; }
.tp-dropdown-menu li a, .tp-dropdown-menu a{ text-align: left; }
/* …but the Movies "By Year" pills match that selector and must stay centred. */
.tp-inline-years a, .tp-year-grid a{ text-align: center; }

/* ============================================================================
 * THE CENTRING MIGRATION
 *
 * miniAll.css asserted `text-align:center` at THREE levels — body, main AND
 * .container — which is why removing any one of them never changed anything, and
 * why ~50 defensive `text-align:left` rules accumulated across the codebase.
 *
 * Those three declarations are now gone. `.tp-legacy-center` reproduces them
 * exactly, and navBar.php puts it on <main> for every page that has not been
 * migrated yet. So this ships PIXEL-IDENTICAL; templates then opt out one at a
 * time via the $tpLeftAligned list in navBar.php.
 * ========================================================================== */

.tp-legacy-center,
.tp-legacy-center .container{ text-align:center; }

/* ── Centred BY DESIGN. These must stay centred no matter which template they
      appear in, so they are pinned here rather than relying on inheritance. ── */

/* Buttons and chips: inline-flex centres both axes and survives the migration.
   NEVER extend this list to titles — .ch-song / .wk-song / .song-card-title /
   .movie-title all rely on display:block for their text-overflow:ellipsis, and
   inline-flex silently kills it. */
.tp-cta-btn,.tab-btn,.sort-tab,.tp-chip,.year-chip,.ych-tab,.cbz-tab,.poll-btn,
.ch-wk,.all-link,.trending-card-cta,.btn,.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
}

/* Genuinely centred blocks: rank numerals, hero copy, empty states, pagination,
   the vote arena, the consent bar, bottom-nav items, year pills. */
.song-card-title,.song-card-artist,.song-card-views,.movie-title,.news-link,
.hero,.hero-title,.hero-sub,.hero-subtitle,
.tp-cta-section,.tp-cta-section h4,.tp-cta-section p,
.tp-consent,.tp-consent-text,
.tp-row__rank,.singer-rank,.rd-rank,.artist-rank,.celeb-item .rank,
.ch-rank,.wk-rank,
th,.leaderboard-table td.rank-cell,
.contestant,.battle-arena,.vs-badge,
.tp-bottom-item,.tp-year-grid a,.tp-inline-years a,
.empty-state,.pagination,.tp-footer-bottom{
  text-align:center;
}

/* ============================================================================
 * DESKTOP
 *
 * The site was a phone layout with margins: every width cap was tuned for mobile
 * and never revisited. On a 1280 laptop the content column measured 1082px, and
 * between 1200-1399px nothing changed at all because Bootstrap's .container tops
 * out at 1320 (miniAll.css ships the full 540/720/960/1140/1320 ladder).
 *
 * Raising the shared shell to 1440 only affects pages that DON'T set their own
 * cap — /movies (1200), /leaderboards (1000), /charts (960) and /artists (1200)
 * keep theirs, so this cannot silently restyle them. Those are a separate,
 * deliberate decision.
 * ========================================================================== */
@media (min-width: 1400px){
  .container{ max-width: 1440px; }
}

/* The homepage spent ~1320px of a desktop viewport on section padding alone and
   still showed no content above the fold. These are the desktop values only —
   the phone block earlier in this file already sets its own, and it comes later
   in source order for equal specificity, so phone is unaffected. */
@media (min-width: 769px){
  .hero{ padding: 32px 24px 36px; }
  .section{ padding: clamp(40px, 5vw, 64px) 24px; }
}

/* Prose should not run to 94 characters. */
.tp-footer-about-content{ max-width: 66ch; }

/* Ragged last row on the browse grid. */
.br-tile{ align-items: flex-start; }

/* Movie titles reserved no height, so cards jumped by a line depending on title
   length and the grid never lined up. */
.movie-title{ min-height: 2.6em; }

/* Numbers in a leaderboard belong right-aligned and tabular so the digits line
   up column-to-column; the rank stays centred. */
@media (min-width: 769px){
  .leaderboard-table th:nth-child(n+3),
  .leaderboard-table td:nth-child(n+3){ text-align: right; font-variant-numeric: tabular-nums; }
  .leaderboard-table td.rank-cell{ text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFORMITY LAYER — added 2026-07-25.
   The owner's read was "too cartoonish … more uniform, more professional".
   Pages had drifted to eleven corner radii, several type scales and a mix of
   gradient/medal/glow decoration, so no two pages looked related. This collapses
   the visual vocabulary to: two radii, one type scale, flat surfaces, one accent.
   It lives here because tp-foundation.css is linked LAST, so it wins over the
   legacy sheets — but NOT over a page's own inline <style>, which is why a few
   pages were edited directly instead.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 ── HEADINGS. The title stops being the loudest thing on the page, and stops
        being painted gold or clipped out of a gradient. */
:root{ --tp-h1: clamp(1.35rem, 1.15rem + 0.85vw, 1.75rem); }
h1, .h1{
  font-size: var(--tp-h1) !important;      /* !important: beats miniAll's 3.2vw */
  line-height: var(--tp-lh-tight, 1.2);
  color: var(--tp-text) !important;
  -webkit-text-fill-color: currentColor !important;   /* cancels gradient-clip */
  background-image: none !important;
  text-shadow: none !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero-section h1, .page-header h1, .stats-hero h1, .ch-hero h1, .tl-hero h1{
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.40rem) !important;
}

/* 2 ── HEROES: one flat box — title, one line, then the content. */
.hero-section, .page-header, .stats-hero, .ch-hero, .tl-hero-inner{
  border-radius: var(--tp-r-sm) !important;
  padding: 14px 16px 12px !important;
  margin-bottom: 14px;
  background-image: none !important;
  box-shadow: none !important;
}
.hero-subtitle, .hero-sub, .page-header > p, .stats-hero-sub, .ch-sub{
  color: var(--tp-text-2);
  font-size: var(--tp-meta);
  line-height: 1.5;
  /* margin-block, NOT margin: these subtitles have a max-width (500px in
     rankings-shared.css) plus `margin: 0 auto`. A blanket `margin: 0` here —
     this file loads LAST — replaced those auto side margins with 0, pinning the
     box to the left of a ~1090px container while `text-align:center` still
     centred the text inside it. Looked fine on mobile (box fills the width),
     278px off-centre on desktop. Only ever touch the vertical margins here. */
  margin-block: 0;
}

/* 3 ── RADIUS: eleven live values collapse to two — 6px surfaces, 8px controls. */
.stats-hero, .seo-content, .song-card, .movie-card, .artist-card, .rank-card,
.trending-card, .lb-card, .qs-card, .tl-card, .tl-dir-card, .club-card,
.big-stat, .info-section, .video-container, .player-section, .biggest-hit,
.last-updated, .disclaimer, .hero-profile{
  border-radius: var(--tp-r-sm) !important;
}
.tab-btn, .sort-tab, .lang-tab, .rank-tab, .period-tab, .category-link,
.year-btn, .year-chip, .cat-btn, .page-link, .page-btn, .related-link,
.hub-nav a, .tl-chip, .tp-share, .tp-save, .growth-badge, .milestone-badge,
.wk-badge, .tag, .detail-item, .stat-card, .tp-cta-btn, .vote-cta-btn{
  border-radius: var(--tp-r-btn) !important;
}

/* 4 ── DE-CARTOON: no medals, no gradients, no glow, no hover-lift. */
.artist-rank.gold, .artist-rank.silver, .artist-rank.bronze, .song-rank.top-3,
.rc-rank.m1, .rc-rank.m2, .rc-rank.m3{
  background: rgba(127,127,127,.12) !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--tp-text-2) !important;
  border: 1px solid var(--tp-line, rgba(127,127,127,.28)) !important;
  font-variant-numeric: tabular-nums;
}
.rank-card.top3{ box-shadow: none !important; }
.vote-cta-btn, .tl-aff{
  background: var(--tp-gold) !important;
  background-image: none !important;
  color: #000 !important;
  box-shadow: none !important;
  transform: none !important;
}
.movie-card:hover, .song-card:hover, .artist-card:hover, .tl-card:hover,
.trending-card:hover, .rank-card:hover{
  transform: none !important;
  box-shadow: var(--tp-sh) !important;
}

/* 5 ── ONE FILTER/TAB IDIOM: squared, uppercase, solid gold when active. */
.tab-btn, .sort-tab, .lang-tab, .rank-tab, .period-tab, .category-link,
.year-btn, .cat-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 8px 14px;
  font-size: var(--tp-meta) !important;
  font-weight: 700; letter-spacing: .04em;
  background: var(--tp-surface) !important;
  background-image: none !important;
  border: 1px solid var(--tp-line, rgba(127,127,127,.28)) !important;
  color: var(--tp-text-2) !important;
  box-shadow: none !important; transform: none !important;
  text-decoration: none;
}
.tab-btn.active, .sort-tab.active, .lang-tab.active, .rank-tab.active,
.period-tab.active, .category-link.active, .year-btn.active, .cat-btn.active{
  background: var(--tp-gold) !important;
  border-color: var(--tp-gold) !important;
  color: #000 !important;
}

/* 6 ── CONTRAST: a CTA is not a link. The generic light-theme `a` rule was
        repainting the gold button's label link-blue at 2.82:1. */
a.tp-cta-btn, a.vote-cta-btn, .tp-cta-btn, .vote-cta-btn{ color: #000 !important; }
a.tp-cta-btn.tp-cta-btn-secondary{ color: var(--tp-text) !important; }

/* ═══ STICKY RANKING TABS ═══════════════════════════════════════════════════
   The ranking pages list 200 rows (~16,000px). The tab bar follows you down so
   you can switch list without scrolling back to the top. It sits directly under
   the site navbar (sticky, 60px, z-1200) and stays below it in the stack.
   ═══════════════════════════════════════════════════════════════════════════ */
.rank-tabs-sentinel{ height:1px; margin:0; padding:0; }

.rank-tabs{
  position: sticky;
  top: var(--nav-h, 60px);   /* exactly the sticky navbar's height (incl. notch inset) */
  z-index: 1100;             /* under the navbar's 1200, over the table */
  display: flex; gap: 6px;
  padding: 8px 0;
  background: var(--tp-bg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rank-tabs::-webkit-scrollbar{ display:none; }
.rank-tab{ flex: 0 0 auto; white-space: nowrap; }

/* LABELS — three forms, switched by CSS so nothing reflows on scroll.
   desktop        -> .rt-full  ("Punjabi Views")
   desktop stuck  -> .rt-abbr  ("PB Views")
   phone          -> .rt-stat  ("Views"); the row label carries the language        */
.rank-tab .rt-abbr, .rank-tab .rt-stat{ display: none; }
.rank-tabs.is-stuck .rank-tab .rt-full{ display: none; }
.rank-tabs.is-stuck .rank-tab .rt-abbr{ display: inline; }

/* Desktop: the two groups dissolve so all six tabs sit on one row, as before. */
.rt-row{ display: contents; }
.rt-rowlabel{ display: none; }

/* The DOM is grouped by language because the phone rows need it, but the desktop
   order must stay exactly as it was — Views, Views, Likes, Likes, Comments, Comments.
   flex `order` restores it without touching the markup. */
.rt-row:nth-child(1) .rank-tab:nth-of-type(1){ order: 1; }   /* Punjabi Views    */
.rt-row:nth-child(2) .rank-tab:nth-of-type(1){ order: 2; }   /* Indian Views     */
.rt-row:nth-child(1) .rank-tab:nth-of-type(2){ order: 3; }   /* Punjabi Likes    */
.rt-row:nth-child(2) .rank-tab:nth-of-type(2){ order: 4; }   /* Indian Likes     */
.rt-row:nth-child(1) .rank-tab:nth-of-type(3){ order: 5; }   /* Punjabi Comments */
.rt-row:nth-child(2) .rank-tab:nth-of-type(3){ order: 6; }   /* Indian Comments  */

/* Stuck = compact, and separated from the content scrolling underneath it. */
.rank-tabs.is-stuck{
  padding: 5px 0;
  border-bottom: 1px solid var(--tp-line, rgba(127,127,127,.28));
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.rank-tabs.is-stuck .rank-tab{
  min-height: 30px !important;
  padding: 4px 10px !important;
  font-size: var(--tp-micro) !important;
}

/* ── PHONE: two labelled rows. Six tabs wrapped to two rows anyway, so make that
      deliberate — "Punjabi | Views Likes Comments" over "Indian | …". Tab size is
      unchanged; only the label shortens because the row states the language.      */
@media (max-width: 640px){
  .rank-tabs{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    overflow-x: visible;          /* rows fit now — no sideways scrolling needed */
    top: 56px;
  }
  .rt-row{
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .rt-row .rank-tab{ order: 0 !important; }   /* rows own their order on phone */
  .rt-rowlabel{
    display: inline-flex;
    align-items: center;
    flex: 0 0 58px;
    font-size: var(--tp-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tp-text-3);
  }
  .rank-tab{
    flex: 1 1 0;                  /* the three stats share the row evenly */
    min-height: 44px !important;
    padding: 6px 8px !important;
    font-size: var(--tp-micro) !important;
  }
  /* phone always shows the stat-only label, stuck or not */
  .rank-tab .rt-full, .rank-tab .rt-abbr{ display: none !important; }
  .rank-tab .rt-stat{ display: inline !important; }
  .rank-tabs.is-stuck{ padding: 6px 0; }
  .rank-tabs.is-stuck .rank-tab{ min-height: 32px !important; }
}

/* Anchors must not land underneath the two stacked sticky bars. */
:target, #mytable tr[id]{ scroll-margin-top: 108px; }

/* position:sticky dies inside an ancestor with overflow:hidden — make sure the
   wrappers these tabs live in never clip it. */
.ranking-page, .rank-wrap, main, .container{ overflow: visible; }

/* ═══ STICKY PREREQUISITE ═══════════════════════════════════════════════════
   A legacy rule sets `overflow-x: hidden` on <body> to stop sideways scrolling.
   Per spec, when one axis is not `visible` the OTHER axis computes from
   `visible` to `auto` — so body became `overflow: hidden auto`, i.e. its own
   scroll container. Anything `position: sticky` inside then sticks to body's
   scrollport, which never scrolls, so it silently never sticks.

   `overflow-x: clip` clips exactly the same way but does NOT force the other
   axis, so sticky works and horizontal scrolling is still prevented.
   ═══════════════════════════════════════════════════════════════════════════ */
html, body{
  overflow-x: clip;
  overflow-y: visible;
}

/* ═══ SHARED PAGE CONTAINER ═════════════════════════════════════════════════
   The Most-Viewed boards wrapped their content in .page-container (1100px,
   centred, 20px padding) via a page-local style; the Likes/Comments boards had
   no wrapper at all, which is why their tables sat at a different width even
   though both render the identical component. Defined here so every ranking
   page measures the same. Pages that already declare it inline keep winning
   with identical values.
   ═══════════════════════════════════════════════════════════════════════════ */
.page-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}
@media (max-width: 640px){
  .page-container{ padding: 12px 12px 15px; }
}

/* ═══ VOTING POLLS — the photo IS the button ════════════════════════════════
   Was: a smallish photo, a W/L/points row, and a separate "Vote" button, so it
   was not obvious the picture itself was the thing to tap. Now the card is the
   control: bigger portrait, clear pressable affordance, points only.
   ═══════════════════════════════════════════════════════════════════════════ */
.battle-title{ font-size: var(--tp-h3); font-weight: 700; letter-spacing: .01em; }
.battle-title span{ color: var(--tp-text-3); font-weight: 600; }

.contestant{
  cursor: pointer;
  border: 2px solid var(--tp-line, rgba(127,127,127,.3));
  border-radius: var(--tp-r-sm, 6px);
  padding: 10px 10px 12px;
  transition: border-color .12s, background .12s, transform .06s;
  -webkit-tap-highlight-color: transparent;
}
.contestant:hover, .contestant:focus-visible{
  border-color: var(--tp-gold, #e8b84a);
  background: rgba(232,184,74,.06);
  outline: none;
}
.contestant:active{ transform: scale(.985); }

/* bigger portrait — the main thing on the card */
.contestant-img, .contestant-placeholder{
  width: 100% !important;
  max-width: 260px;
  height: auto !important;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--tp-r-sm, 6px);
  display: block;
  margin: 0 auto 10px;
}
.contestant-name{ font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }

/* points only — wins/losses removed from the markup */
.contestant-stats{ display: flex; justify-content: center; }
.contestant-stats .pts{
  font-size: var(--tp-micro);
  font-weight: 700;
  color: var(--tp-text-2);
  background: rgba(127,127,127,.12);
  border: 1px solid var(--tp-line, rgba(127,127,127,.28));
  border-radius: var(--tp-r-btn, 8px);
  padding: 3px 9px;
}

/* an explicit "tap" cue under each portrait, so the interaction is unmistakable */
.contestant::after{
  content: "Tap to vote";
  display: block;
  margin-top: 9px;
  font-size: var(--tp-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tp-gold, #e8b84a);
}
.contestant:hover::after{ color: var(--tp-gold-hi, #f0c96a); }

@media (hover: none){
  .contestant::after{ content: "Tap to vote"; }
}
@media (min-width: 700px){
  .contestant::after{ content: "Click to vote"; }
}

/* The arena was giving each card ~120px on a phone, so the "bigger photo" had
   nowhere to grow. Let the two cards take the full width and shrink the VS badge
   to a divider between them. */
.battle-arena{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  max-width: 720px;
  margin: 0 auto;
}
.vs-circle{
  width: 34px !important; height: 34px !important;
  font-size: var(--tp-micro) !important;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
@media (max-width: 640px){
  .battle-arena{ gap: 4px; }
  .vs-circle{ width: 28px !important; height: 28px !important; }
  .contestant{ padding: 8px 6px 10px; }
  .contestant-img, .contestant-placeholder{ max-width: 100%; }
  .contestant-name{ font-size: .95rem; }
}

/* ═══ VOTING POLLS — DESKTOP ARENA (added 2026-07-27) ════════════════════════
   The whole component was authored for 375px and never given a desktop state.
   What was actually wrong at 1440px:

     .ranking-page              max-width 1200 → a ~1170px content column
     .battle-section            spanned all 1170px, min-height 360px
     .battle-arena              capped at 720px, min-height 260px
     .contestant                capped at 200px (rankings-shared.css @768+)
     .vote-counter              a static, right-aligned block → it landed at the
                                far right of the 1170px panel, orphaned

   So two ~200px cards floated inside a 720px grid inside a 1170px panel: three
   nested widths, none of them agreeing, and ~250px of empty panel down each side.

   The fix sizes the whole thing FROM THE PHOTO outward instead of from the page
   inward. One variable drives the portrait width; the card, the arena and the
   panel are all computed from it, so the panel is always just big enough to hold
   the pair and never opens a dead band.

     card  = photo + 32px   (14px padding + 2px border, both sides; border-box)
     panel = photo*2 + gap*2 + vs + 136px
             (136 = 64 card chrome + 52 panel padding + 2 panel border + 18 slack)

   PHOTO CEILING — 288px is deliberate, not a round number. The source portraits
   are user-supplied and small: sampling the live roster gives 193x261, 204x204,
   225x225, 259x194, 300x168, 351x372, 500x500/500x625, 720x720, 1200x1200. The
   median is ~500px, the worst are ~195-225px. At a 288px box the median source
   still downscales (crisp), and the worst upscale ~1.4x, which reads soft rather
   than degraded. Going to 380-420px would have filled the panel more but would
   have visibly mushed a large part of the roster, so the photos set the cap.

   MOBILE IS UNTOUCHED: every rule below is inside (min-width: 768px). The phone
   layout lives in the (max-width: 640px) block above and in rankings-shared.css;
   641-767px keeps exactly the behaviour it has today.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px){
  :root{
    /* 24vw: 196px @768 → 246px @1024 → 288px (ceiling) from 1200px up */
    --tp-poll-photo: clamp(196px, 24vw, 288px);
    --tp-poll-gap:   clamp(18px, 2.4vw, 40px);
    --tp-poll-vs:    clamp(44px, 4vw, 58px);
  }

  /* The panel is sized to its contents, not to the page column. */
  .battle-section{
    max-width: calc(
      var(--tp-poll-photo) * 2 +
      var(--tp-poll-gap)   * 2 +
      var(--tp-poll-vs) + 136px
    );
    margin-left: auto;
    margin-right: auto;
    padding: 22px 26px 20px;   /* was 30px 25px */
    min-height: 0;             /* was 360px — pure dead space once cards grow */
  }

  .battle-arena{
    max-width: none;           /* was 720px; the panel is the cap now */
    min-height: 0;             /* was 260px */
    gap: var(--tp-poll-gap);
    justify-items: center;     /* centre each card inside its 1fr column */
    align-items: stretch;      /* equal-height cards → the two photos line up */
  }

  /* .vs-circle keeps align-self:center from rankings-shared.css, so the marker
     stays vertically centred even though the cards now stretch. */
  .vs-circle{
    width:  var(--tp-poll-vs) !important;
    height: var(--tp-poll-vs) !important;
    min-width: var(--tp-poll-vs);
    font-size: var(--tp-meta) !important;
  }

  .contestant{
    width: 100%;
    max-width: calc(var(--tp-poll-photo) + 32px);   /* was 200px */
    padding: 14px 14px 16px;
  }
  .contestant-img, .contestant-placeholder{
    max-width: var(--tp-poll-photo);                /* was 260px */
    margin-bottom: 12px;
  }
  .contestant-name{ font-size: 1.1rem; margin-bottom: 8px; }

  /* Card heights are equal now, so pin the vote cue to the bottom of each card
     and the two cues line up instead of floating at different heights. */
  .contestant::after{ margin-top: auto; padding-top: 10px; }

  /* The session counter belongs to the arena, not to the page. With the panel
     capped it now sits just inside the arena's top-right corner, and it is drawn
     as a chip so it reads as a deliberate readout rather than stray text.
     Kept in normal flow (ranking-polish.css already made it static) so the JS
     .animate pulse still works.
     The .ranking-page prefix is REQUIRED: ranking-polish.css sets
     `.ranking-page .battle-section .vote-counter { margin: 0 2px 6px 0 }` at
     (0,3,0). Without the third class our margin-left:auto loses and the chip
     stays glued to the left edge. */
  .ranking-page .battle-section .vote-counter{
    position: static;
    width: fit-content;
    margin: 0 0 10px auto;     /* margin-left:auto → flush to the arena's right */
    padding: 3px 10px;
    background: rgba(127,127,127,.12);
    border: 1px solid var(--tp-line, rgba(127,127,127,.28));
    border-radius: var(--tp-r-btn, 8px);
    font-size: var(--tp-micro);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--tp-gold, #e8b84a);
    opacity: 1;
  }
}

/* ═══ CROSS-SITE LINK BUTTON ════════════════════════════════════════════════
   Secondary action that leaves the site (owner's other property). Deliberately
   quieter than the voting cards: flat dark surface, one gold accent on the
   external-link glyph, 8px control radius, no gradient/glow/lift. Works from
   375px up; min-height keeps the tap target over 44px.
   ═══════════════════════════════════════════════════════════════════════════ */
.tp-xlink{
  position: relative;
  display: flex;
  flex-wrap: nowrap;           /* the glyph must never drop to its own row */
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 11px 16px;
  margin: 0 0 14px;
  background: var(--tp-surface, #161b22);
  border: 1px solid var(--tp-line, #30363d);
  border-radius: var(--tp-r-btn, 8px);
  color: var(--tp-text, #e6edf3);
  text-align: center;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.tp-xlink:hover, .tp-xlink:focus-visible{
  background: var(--tp-surface-2, #1c2128);
  border-color: var(--tp-gold, #e8b84a);
  color: var(--tp-text, #e6edf3);
  text-decoration: none;
  outline: none;
}
/* Title and note sit on one line when there is room and stack when there is not;
   only THIS wraps, so the external-link glyph always stays alongside the text. */
.tp-xlink-body{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 1px 9px;
  min-width: 0;
}
.tp-xlink-title{ font-size: .9rem; font-weight: 700; line-height: 1.4; }
.tp-xlink-note{
  font-size: var(--tp-meta, .8125rem);
  line-height: 1.4;
  color: var(--tp-text-2, #b6bec8);
}
.tp-xlink-ext{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--tp-gold-line, rgba(232,184,74,.30));
  border-radius: var(--tp-r-sm, 6px);
  color: var(--tp-gold, #e8b84a);
}
.tp-xlink-ext svg{ width: 13px; height: 13px; display: block; }
.tp-xlink:hover .tp-xlink-ext,
.tp-xlink:focus-visible .tp-xlink-ext{ border-color: var(--tp-gold, #e8b84a); }
/* announced to screen readers, never painted */
.tp-xlink-sr{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 480px){
  .tp-xlink{ padding: 12px 14px; }
  .tp-xlink-title{ font-size: .875rem; }
}

/* /otherLinks/mainFiles/css/tp-footer.css */
/* ============================================================================
 * tp-footer.css — v1 (2026-07-27)
 *
 * THE ONE stylesheet for everything from the CTA cards down to the copyright
 * line. It replaces three near-identical ~290-line inline <style> blocks that
 * lived in footer.php / footerhome.php / footerInsta.php and had already drifted
 * apart (three different grid definitions, three different phone link paddings,
 * only one of the three ever received the mobile overhaul). Every component fix
 * had to be made three times, and the last one still missed a file.
 *
 * LOAD ORDER — this must come AFTER tp-foundation.css.
 * The rules below used to live in an inline <style> inside <body>, which beat
 * every stylesheet on document order. Moving them into an external sheet drops
 * them down the cascade, so they have to sit last among the sheets or
 * tp-foundation.css starts winning ties it never used to win. Loaded from:
 *   otherLinks/mainFiles/header/header.php       (24 pages)
 *   otherLinks/mainFiles/header/headerhome.php   (/ and /promo)
 *   legal/{about,contact,dmca,privacy-policy,terms}.php  (own <head>, 5 pages)
 *
 * DESIGN NOTES
 * - Column content is CENTRED (owner's explicit ask). Centred ragged lists are
 *   harder to scan than left-aligned ones, so the measure is capped (~220px per
 *   column) and heading + list share one axis: nothing is centred "loosely",
 *   every column is a narrow centred block of the same width.
 * - The grid is FLEX, not grid. `repeat(auto-fit, minmax(200px,1fr))` stretched
 *   a leftover 5th column across a whole row at some widths. Wrapped flex with
 *   `justify-content:center` centres the leftovers instead, at their real width.
 * - Headings outrank links by CASE + TRACKING + COLOUR rather than by size, so
 *   the gold stays quiet: 11px uppercase gold label over 13.6px neutral links.
 * - Dark only. One accent (--tp-gold). Two radii (6px surfaces / 8px controls).
 *   No gradients, no glow, no hover-lift, no emoji. Tokens only, no hex
 *   literals — the four `[data-theme="light"]` overrides that used to close each
 *   inline block are gone because --tp-chrome / --tp-line already flip.
 * ========================================================================== */


/* ============================================================================
 * 1. CTA CARDS
 * Unchanged in substance — this block was unified across all three footers
 * immediately before the extraction, so it is ported as-is and now cannot drift
 * again. It carries the SUPERSET of selectors: footerInsta is the only file that
 * renders .tp-cta-pink, but defining it here keeps one rule for all three.
 * Only two things were added: an explicit 44px control height, and a full-width
 * button on phone (the card already stacks there).
 * ========================================================================== */
.tp-cta-section {
  padding: 30px 20px;
  max-width: 600px;
  margin: 0 auto;
}
/* PRIMARY card: gold-tinted surface, the loud one. Tokens, not literals, so it
   tracks the palette instead of drifting from it. */
.tp-cta-card {
  background: var(--tp-gold-soft, rgba(232, 184, 74, 0.12));
  border: 1px solid var(--tp-gold-line, rgba(232, 184, 74, 0.30));
  border-radius: var(--tp-r-sm, 6px);
  padding: 20px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
/* Every NON-primary card: one neutral site surface + the site border token.
   These used to be three separate foreign palettes stacked down the page —
   Tailwind purple, blue and pink. Only the top card is the primary, so the rest
   carry no colour of their own; the one piece of gold left on them is the
   hairline of their button, where gold means "interactive". */
.tp-cta-card.tp-cta-secondary,
.tp-cta-card.tp-cta-tertiary,
.tp-cta-card.tp-cta-pink {
  background: var(--tp-surface, #161b22);
  border-color: var(--tp-line, #30363d);
}
.tp-cta-content {
  display: flex;
  align-items: center;
  gap: 15px;
}
.tp-cta-icon {
  font-size: 2rem;
}
/* The emoji purge emptied these spans but left their flex gap behind, so every
   card carried ~15px of dead space where the icon used to be. */
.tp-cta-icon:empty,
.tp-cta-btn > span:empty {
  display: none;
}
/* !important because modern-theme.css ships a bare `h4{color:var(--text-primary)
   !important}`. It loads long before this file, and !important cannot be beaten
   by load order — only by a more specific !important. (0,1,1) beats (0,0,1). */
.tp-cta-content h4 {
  margin: 0;
  color: var(--tp-text, #e6edf3) !important;
  font-size: 1.1rem;
}
.tp-cta-content p {
  margin: 4px 0 0;
  color: var(--tp-text-2, #b6bec8);
  font-size: 0.9rem;
}
/* Solid gold = the primary action. The 1px border is transparent-free on
   purpose: it makes every button the same height, since the others have one. */
.tp-cta-btn {
  background: var(--tp-gold, #e8b84a);
  color: #000 !important;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid var(--tp-gold, #e8b84a);
  border-radius: var(--tp-r-btn, 8px);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--tp-t, .18s ease), border-color var(--tp-t, .18s ease);
}
.tp-cta-btn:hover {
  background: var(--tp-gold-lo, #d4a53f);
  border-color: var(--tp-gold-lo, #d4a53f);
  text-decoration: none;
  color: #000 !important;
}
.tp-cta-btn:focus-visible {
  outline: 2px solid var(--tp-gold, #e8b84a);
  outline-offset: 2px;
}
/* Quieter twins: no fill, neutral label, gold only on the hairline. The fallback
   for --tp-text must be the DARK ink: on any page that paints before
   tp-foundation.css lands, the light-theme value would be near-black on a dark
   card. */
.tp-cta-btn.tp-cta-btn-secondary,
.tp-cta-btn.tp-cta-btn-tertiary,
.tp-cta-btn.tp-cta-btn-pink {
  background: transparent;
  border-color: var(--tp-gold-line, rgba(232, 184, 74, 0.30));
  color: var(--tp-text, #e6edf3) !important;
}
.tp-cta-btn.tp-cta-btn-secondary:hover,
.tp-cta-btn.tp-cta-btn-tertiary:hover,
.tp-cta-btn.tp-cta-btn-pink:hover {
  background: var(--tp-surface-2, #1c2128);
  border-color: var(--tp-gold, #e8b84a);
  color: var(--tp-text, #e6edf3) !important;
}


/* ============================================================================
 * 2. SHARE ROW
 * Was five brand-coloured pills (#25D366 / #000 / #1877F2 / #0088cc) plus a
 * gradient-filled copy button, scaling 5% on hover. That is five foreign
 * colours, a gradient and a hover-lift in one strip — the loudest thing on the
 * page sitting directly above a quiet footer. They are now one neutral chip
 * idiom on the site's surface token; the brand is still legible from the glyph
 * itself, which is the part people actually recognise.
 * ========================================================================== */
.tp-share-section {
  text-align: center;
  padding: 28px 20px 8px;
  margin-bottom: 12px;
}
/* !important for the same reason as .tp-cta-content h4 — see the note there. */
.tp-share-section h4 {
  margin: 0 0 14px;
  color: var(--tp-text-3, #98a2ae) !important;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.tp-share-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tp-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--tp-surface, #161b22);
  background-image: none;
  border: 1px solid var(--tp-line, #30363d);
  border-radius: var(--tp-r-btn, 8px);
  color: var(--tp-text-2, #b6bec8);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: color var(--tp-t, .18s ease), border-color var(--tp-t, .18s ease),
              background var(--tp-t, .18s ease);
}
.tp-share-btn svg {
  flex-shrink: 0;
}

/* ── Counter-rules for the legacy !important block ────────────────────────────
 * modern-theme.css is loaded 3rd, long before this file, and still ships the
 * 2024 share-button block VERBATIM:
 *
 *   .tp-share-btn,.share-btn,button.tp-share-btn,button.share-btn{
 *       box-shadow:none!important; border:none!important; outline:none!important }
 *   .tp-share-whatsapp{background-color:#25D366 !important}
 *   .tp-share-twitter {background-color:#000    !important}
 *   .tp-share-facebook{background-color:#1877F2 !important}
 *   .tp-share-telegram{background-color:#0088cc !important}
 *   .tp-share-copy{background:linear-gradient(135deg,#e8b84a,#d4a53f)!important;
 *                  color:#000!important}
 *
 * !important cannot be out-ordered — only out-specified by another !important.
 * Plain declarations here lose to it no matter where this file sits in the
 * cascade, so without this block the "neutral chip" share row above never
 * renders: the five brand colours and the gradient copy button survive, the 1px
 * chip border is stripped by `border:none`, and `outline:none` swallows the
 * :focus-visible ring (a keyboard-accessibility regression, not just a visual
 * one). The old inline <style> had exactly the same problem — it simply agreed
 * with the forced values, so nobody noticed.
 *
 * Scoped through .tp-share-buttons so these score (0,2,0)/(0,3,0) and beat
 * `button.tp-share-btn` (0,1,1) outright rather than merely tying with it.
 * Delete this block only together with that block in modern-theme.css.
 * ========================================================================== */
.tp-share-buttons .tp-share-btn {
  border: 1px solid var(--tp-line, #30363d) !important;
}
.tp-share-buttons .tp-share-whatsapp,
.tp-share-buttons .tp-share-twitter,
.tp-share-buttons .tp-share-facebook,
.tp-share-buttons .tp-share-telegram,
.tp-share-buttons .tp-share-copy {
  background: var(--tp-surface, #161b22) !important;
  background-image: none !important;
  color: var(--tp-text-2, #b6bec8) !important;
}
.tp-share-buttons .tp-share-btn:hover {
  background: var(--tp-surface-2, #1c2128) !important;
  border-color: var(--tp-gold-line, rgba(232, 184, 74, 0.30)) !important;
  color: var(--tp-text, #e6edf3) !important;
  transform: none;
  opacity: 1;
}
.tp-share-buttons .tp-share-btn:focus-visible {
  outline: 2px solid var(--tp-gold, #e8b84a) !important;
  outline-offset: 2px;
}


/* ============================================================================
 * 3. FOOTER SHELL
 * --tp-chrome is the token the palette reserves for chrome — navbar, bottom nav
 * AND footer. The footer was painting --tp-surface, one step LIGHTER than the
 * page body, so it read as another content card instead of the end of the page.
 * On chrome it bookends the layout against the navbar.
 * ========================================================================== */
.tp-footer {
  background: var(--tp-chrome, #0a0a0f);
  border-top: 1px solid var(--tp-line, #30363d);
  padding: 56px 0 28px;
  margin-top: 40px;
}


/* ============================================================================
 * 4. LINK COLUMNS
 *
 * Wrapped flex rather than grid. With `repeat(auto-fit, minmax(200px,1fr))` a
 * leftover column was stretched to fill a whole row, so the 5-column footer
 * showed a single 1100px-wide "column" at some widths. Flex + centre means
 * leftovers keep their real width and sit centred under the row above, which is
 * the only arrangement that looks intentional with centred text.
 *
 * The basis/gap/cap are picked against the real .container ladder that
 * miniAll.css ships (540 / 720 / 960 / 1140 / 1320, and 1440 above 1400px), so
 * the wrap points land where they should instead of near a boundary:
 *
 *   container 1140+ → inner 1110 → 5x160 + 4x24 =  896  fits → 5 columns
 *   container  960  → inner  930 → 5x160 + 4x24 =  896  fits → 5 columns
 *   container  720  → inner  690 → 4x160 + 3x24 =  712  no   → 3 + 2 centred
 *   container  540  → inner  510 → 3x160 + 2x24 =  528  no   → 2 + 2 + 1
 *
 * A 168px basis — the obvious round number — overflows the 960 container by 6px
 * and drops a lone stretched 5th column onto its own row for the whole
 * 992-1199px band, which is exactly the orphan this layout exists to avoid.
 * The 220px cap is also the measure control that makes centring readable, and
 * it is what keeps a 4-column footerInsta from splaying across 1400px.
 * ========================================================================== */
.tp-footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px 24px;
  margin: 0 0 8px;
}
.tp-footer-col {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 220px;
  text-align: center;
}

/* Heading rank comes from case + tracking + colour, not from size — a footer
   label should be the smallest text in the block and still read as a heading.
   Every property is stated because miniAll.css ships bare `h5` element rules.

   The colour MUST carry !important: modern-theme.css ships a bare
   `h5,.h5{color:var(--text-primary)!important}`, which a plain declaration here
   can never beat. Without it these headings render near-white (#e6edf3) instead
   of gold — and since they are deliberately SMALLER than the links (11px vs
   13.6px), colour is the only thing left carrying the rank, so losing it
   inverts the hierarchy rather than merely dulling it. The old inline block had
   the same bug (it asked for var(--accent) and lost), which is why the footer
   headings have never actually been gold. */
.tp-footer-col h5,
.tp-footer-about-content h5 {
  margin: 0 0 14px;
  padding: 0;
  color: var(--tp-gold, #e8b84a) !important;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-align: center;
}
/* A 22px hairline on the same axis as the list below it. This is what makes the
   centring read as deliberate instead of accidental — it gives each column a
   fixed anchor point that a ragged centred list cannot provide on its own. */
.tp-footer-col h5::after,
.tp-footer-about-content h5::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  margin: 8px auto 0;
  background: var(--tp-gold-line, rgba(232, 184, 74, 0.30));
}

/* Second and third sections inside one column. Keyed off the structure rather
   than the .mt-4 class, and !important because .mt-4 is a Bootstrap-style
   utility in the legacy bundle that ships `margin-top: … !important` — the old
   `.tp-footer-col h5.mt-4{margin-top:30px}` could never win against it. */
.tp-footer-col ul + h5 {
  margin-top: 28px !important;
}

.tp-footer-col ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 220px;
}
.tp-footer-col ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* display:block so the padding forms the tap target. Two separate rules used to
   fight over the row rhythm here (`margin-bottom:10px` then `margin-bottom:2px`
   further down the same block); the spacing is now one padding value. */
.tp-footer-col ul li a {
  display: block;
  padding: 7px 4px;
  color: var(--tp-text-2, #b6bec8);
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: color var(--tp-t, .18s ease);
}
.tp-footer-col ul li a:hover {
  color: var(--tp-gold, #e8b84a);
  text-decoration: none;
}
.tp-footer-col ul li a:focus-visible {
  outline: 2px solid var(--tp-gold, #e8b84a);
  outline-offset: 2px;
}


/* ============================================================================
 * 5. ABOUT BAND
 * One hairline above it, none below — the bottom bar brings its own, softer
 * rule, so the two dividers differ in weight and the page ends in steps rather
 * than in a stack of identical lines.
 * ========================================================================== */
.tp-footer-about-section {
  border-top: 1px solid var(--tp-line, #30363d);
  border-bottom: 0;
  padding: 30px 0 0;
  margin: 40px 0 0;
}
.tp-footer-about-content {
  max-width: 66ch;
  margin: 0 auto;
  text-align: center;
}
.tp-footer-about-content p {
  margin: 0;
  color: var(--tp-text-2, #b6bec8);
  font-size: 0.875rem;
  line-height: 1.7;
}


/* ============================================================================
 * 6. BOTTOM BAR
 * Centred stack on every width. `justify-content:space-between` pushed the
 * copyright hard left and the legal links hard right across a 1440px shell, so
 * the last line of a centred footer was the one thing pinned to the corners.
 * ========================================================================== */
.tp-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--tp-line-soft, #21262d);
  text-align: center;
}
.tp-copyright {
  margin: 0;
  color: var(--tp-text-3, #98a2ae);
  font-size: 0.8125rem;
}
.tp-copyright a {
  color: var(--tp-gold, #e8b84a);
  text-decoration: none;
}
.tp-copyright a:hover {
  text-decoration: underline;
}
.tp-footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 20px;
}
/* 44px tall so these clear the tap-target minimum without the row growing:
   the height is absorbed by the flex line, not added as padding below the text. */
.tp-footer-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--tp-text-3, #98a2ae);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color var(--tp-t, .18s ease);
}
.tp-footer-links a:hover {
  color: var(--tp-gold, #e8b84a);
}
/* Hairline separators so four short centred links do not read as one run-on. */
.tp-footer-links a + a::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: var(--tp-line, #30363d);
}
.tp-footer-links a:focus-visible,
.tp-copyright a:focus-visible {
  outline: 2px solid var(--tp-gold, #e8b84a);
  outline-offset: 2px;
}


/* ============================================================================
 * 7. TABLET
 * ========================================================================== */
@media (max-width: 991px) {
  .tp-footer {
    padding: 44px 0 24px;
    margin-top: 32px;
  }
  .tp-footer-about-section {
    padding-top: 26px;
    margin-top: 32px;
  }
}

/* ── The 4-column footer's orphan row ─────────────────────────────────────────
 * MEASURED, not reasoned: between 577px and 991px the 160px basis fits exactly
 * THREE columns per row, so a 4-column footer (footerInsta.php) wraps 3 + 1 and
 * leaves one 220px column alone under a 530-708px row — the exact arrangement
 * this layout exists to avoid. The 5-column footers wrap 3 + 2 there and are
 * fine, so this cannot be fixed by retuning the shared basis: one per-row count
 * cannot suit both 4 and 5 columns (4 wants 2 or 4 per row, 5 wants 3 or 5).
 *
 * So it is keyed off the column COUNT instead: `:first-child:nth-last-child(4)`
 * matches only when the grid holds exactly four columns.
 *
 * max-width MUST move with flex-basis. Flex breaks lines on the hypothetical
 * main size, which is the basis CLAMPED BY max-width — so raising the basis
 * alone does nothing while the 220px cap stands (3x220+48 = 708, and the widest
 * container here is 710 inner: three still fit, by 2px). 236px is the smallest
 * round value that clears it, and it is checked against both containers in this
 * band rather than one:
 *
 *   container 720 → inner 710 → 3x236+48 = 756  no  → 2 + 2
 *                              2x236+24 = 496  fits
 *   container 540 → inner 530 → 3x236+48 = 756  no  → 2 + 2
 *                              2x236+24 = 496  fits
 *
 * The 16px the columns gain over the shared 220px cap is invisible and never
 * appears beside it — a page renders one footer, not two. Above 991px this
 * block lapses and all four columns sit in one row at the normal cap.
 * ── */
@media (min-width: 577px) and (max-width: 991px) {
  .tp-footer-col:first-child:nth-last-child(4),
  .tp-footer-col:first-child:nth-last-child(4) ~ .tp-footer-col {
    flex-basis: 236px;
    max-width: 236px;
  }
}


/* ============================================================================
 * 8. PHONE — 375px is the primary case
 *
 * Five stacked columns of ~56 links is 2,000px+ of footer, and honouring the
 * 44px tap-target minimum on every one of them would make it worse, not better.
 * So on phone the columns become collapsible sections. This was already built
 * and proven on the homepage; it now applies to all three footers, which is
 * half the point of this extraction — footerInsta.php in particular was still
 * shipping 39 links as bare 20px inline anchors down a single column.
 *
 * PROGRESSIVE ENHANCEMENT: nothing is hidden until footer/tp-footer.js adds
 * .tp-foot-acc. Without JS — and for any crawler that does not run it — every
 * link renders as a full 44px row. The links are in the DOM either way, so they
 * stay crawlable and indexable.
 * ========================================================================== */
@media (max-width: 576px) {
  .tp-footer {
    padding: 32px 0 20px;
    margin-top: 28px;
  }
  /* Line the footer's edge up with the page content above it. */
  .tp-footer > .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Full-width rows, not 220px columns floating in the middle of the screen. */
  .tp-footer-grid {
    flex-direction: column;
    gap: 26px;
  }
  .tp-footer-col {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
  .tp-footer-col ul {
    max-width: 20rem;
  }
  .tp-footer-col ul li a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-size: 0.875rem;
  }

  .tp-footer-about-section {
    padding-top: 22px;
    margin-top: 26px;
  }
  .tp-footer-about-content p {
    font-size: 0.8125rem;
  }
  .tp-footer-bottom {
    margin-top: 22px;
    padding-top: 14px;
  }
  .tp-footer-links {
    gap: 0 18px;
  }

  /* CTA: the card already stacks, so the action should span it. */
  .tp-cta-section {
    padding: 22px 16px;
  }
  .tp-cta-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .tp-cta-content {
    flex-direction: column;
    gap: 2px;
  }
  .tp-cta-btn {
    width: 100%;
  }

  /* Share: icon-only chips. 5 x 44px + 4 x 10px gap = 260px, one row at 375. */
  .tp-share-section {
    padding: 22px 16px 4px;
  }
  .tp-share-btn span:last-child {
    display: none;
  }
  .tp-share-btn {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }
}

/* ── Accordion mode: added by footer/tp-footer.js on phone only. ── */
@media (max-width: 576px) {
  .tp-foot-acc .tp-footer-grid {
    gap: 0;
  }

  /* The label + chevron travel together as one centred unit, so the accordion
     keeps the same centre axis as the rest of the footer. The tap target is the
     whole row regardless of where the label sits. */
  .tp-foot-acc .tp-footer-col h5 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin: 0 !important;
    padding: 12px 8px;
    border-bottom: 1px solid var(--tp-line-soft, #21262d);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  /* Counterweight. Centring "label + chevron" as one unit centres the UNIT, not
     the label: the chevron's 7px box plus the 10px gap pushed every heading
     8.5px LEFT of the axis its own links are centred on (measured -8.50px at
     375px on all three footers), so the whole accordion stack sat off-centre
     from the about block, the copyright and the legal links. This mirrors the
     chevron on the other side, so the LABEL lands on the axis while the chevron
     stays adjacent to it rather than banished to the far right. */
  .tp-foot-acc .tp-footer-col h5::before {
    content: "";
    flex: 0 0 7px;
    height: 1px;
  }
  /* The desktop hairline becomes a chevron here — every property it set has to
     be reset, not just the ones being added. */
  .tp-foot-acc .tp-footer-col h5::after {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: -3px 0 0;
    background: none;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .7;
    transition: transform var(--tp-t, .18s ease);
  }
  .tp-foot-acc .tp-footer-col h5[aria-expanded="true"]::after {
    margin: 2px 0 0;
    transform: rotate(-135deg);
  }
  .tp-foot-acc .tp-footer-col h5:focus-visible {
    outline: 2px solid var(--tp-gold, #e8b84a);
    outline-offset: -2px;
  }

  /* Collapsed by default; the heading toggles it. */
  .tp-foot-acc .tp-footer-col h5 + ul {
    display: none;
  }
  .tp-foot-acc .tp-footer-col h5[aria-expanded="true"] + ul {
    display: block;
    padding: 8px 0 14px;
  }
}

/* /assets/css/ui.css */
/* TrendingPunjabi design system.
 * Loaded last by otherLinks/mainFiles/header/header.php (after tp-foundation.css and
 * tp-footer.css), so its tokens re-point every older stylesheet at the same palette.
 * Components use the ui- prefix to stay clear of the Bootstrap classes in miniAll.css.
 * Pages opt into the full-width layout with $ui_page = true before including navBar.php.
 * The site is dark only (the light theme was retired), so there is one palette. */

/* ---------- Font ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  /* optional, not swap: if the preloaded font isn't ready by first paint the page keeps the
     system font for this view instead of re-flowing text mid-load (a layout shift). */
  font-display: optional;
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root,
:root[data-theme] {
  color-scheme: dark;
  --bg: #0b0b0f;
  --surface: #14141a;
  --surface-2: #1b1b23;
  --surface-3: #23232d;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f3f3f6;
  --text-2: #a6a6b5;
  --text-3: #7c7c92;
  --accent: #f5a524;
  --accent-hover: #ffb938;
  --accent-ink: #1b1204;
  --accent-text: #f7b547;
  --accent-soft: rgba(245, 165, 36, 0.14);
  --hot: #ff6a3d;
  --hot-soft: rgba(255, 106, 61, 0.14);
  --up: #34d399;
  --up-soft: rgba(52, 211, 153, 0.14);
  --down: #f87171;
  --down-soft: rgba(248, 113, 113, 0.14);
  --gold: #f5c542;
  --silver: #c3c8d2;
  --bronze: #d6904f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --scrim: rgba(5, 5, 8, 0.72);
  --nav-bg: rgba(11, 11, 15, 0.86);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --container: 1200px;
  --gutter: 16px;
  /* Safe areas: non-zero only with viewport-fit=cover on a notched phone, which is
     exactly the installed app (standalone + black-translucent status bar). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* --nav-h is the header's full height INCLUDING the status-bar inset, so every
     `position: sticky; top: var(--nav-h)` below it clears the notch too. */
  --nav-bar-h: 60px;
  --nav-h: calc(var(--nav-bar-h) + var(--safe-top));
  --tabbar-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* tp-foundation.css tokens, re-pointed at this palette so pages not yet moved onto
     ui- components still match. */
  --tp-gold: #f5a524;
  --tp-gold-hi: #ffb938;
  --tp-gold-lo: #e0921a;
  --tp-gold-soft: rgba(245, 165, 36, 0.14);
  --tp-gold-line: rgba(245, 165, 36, 0.3);
  --tp-on-gold: #1b1204;
  --tp-bg: #0b0b0f;
  --tp-surface: #14141a;
  --tp-surface-2: #1b1b23;
  --tp-chrome: #0b0b0f;
  --tp-text: #f3f3f6;
  --tp-text-2: #b4b4c2;
  --tp-text-3: #8e8ea3;
  --tp-link: #f7b547;
  --tp-line: rgba(255, 255, 255, 0.1);
  --tp-line-soft: rgba(255, 255, 255, 0.06);
  --tp-r-btn: 999px;
  --tp-navh: var(--nav-h);
  --tp-botnav: 64px;

  /* Legacy names from variables.css and modern-theme.css. */
  --tp-bg-body: var(--bg);
  --tp-bg-card: var(--surface);
  --tp-bg-elevated: var(--surface-2);
  --tp-bg-surface: var(--surface);
  --tp-text-primary: var(--text);
  --tp-text-secondary: var(--text-2);
  --tp-text-muted: var(--text-3);
  --tp-accent: var(--accent);
  --tp-accent-hover: var(--accent-hover);
  --tp-accent-soft: var(--accent-soft);
  --bg-body: var(--bg);
  --bg-card: var(--surface);
  --bg-elevated: var(--surface-2);
  --bg-input: var(--surface-2);
  --border: var(--line);
  --border-color: var(--line);
  --border-light: var(--line);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --link-color: var(--accent-text);
  --navbar-bg: var(--bg);
  --table-header-bg: var(--surface-2);
  --table-hover: var(--surface-3);
  --table-row-even: var(--surface);
  --table-row-odd: var(--surface-2);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

/* ---------- Base ---------- */
/* modern-theme.css sets overflow-x: hidden on html and body, which turns body into a scroll
   container and stops the sticky header from sticking. clip hides sideways overflow without that. */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }

body {
  margin: 0;
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.ui-lock { overflow: hidden; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.ui-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

.ui-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Skip link for keyboard and screen-reader users. Clipped to nothing until a keyboard focuses
   it: sliding it up by its own height left it peeking out under a phone's notch (safe-area top). */
.ui-skip {
  position: fixed; top: calc(8px + var(--safe-top)); left: calc(8px + var(--safe-left)); z-index: 1000;
  width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.ui-skip:focus-visible { width: auto; height: auto; margin: 0; padding: 10px 16px; overflow: visible; clip-path: none; }

/* ---------- Layout ---------- */
.ui-shell { width: 100%; }

.ui-container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 max(var(--gutter), var(--safe-right)) 0 max(var(--gutter), var(--safe-left));
  box-sizing: border-box;
}

.ui-container--narrow { max-width: calc(820px + 2 * var(--gutter)); }

.ui-main,
.ui-main * { box-sizing: border-box; }

.ui-main {
  color: var(--text); font-family: var(--font);
  /* tp-foundation.css sizes every h1 with !important from this variable. */
  --tp-h1: clamp(1.6rem, 5vw, 2.5rem);
}
/* miniAll.css gives "label input" a brown background and orange glow with !important. */
.ui-main label input.ui-input, .ui-main label .ui-input { background: var(--surface) !important; color: var(--text); box-shadow: none; margin-bottom: 0; }

.ui-main a { color: inherit; text-decoration: none; }
.ui-main a.ui-link, .ui-main .ui-prose a { color: var(--accent-text); }
.ui-main .ui-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }   /* in running text a link is never colour alone */
.ui-main a.ui-link:hover, .ui-main .ui-prose a:hover { text-decoration: underline; }

.ui-main img { max-width: 100%; }

/* Legacy miniAll.css makes every <p> bold, yellow and 105%; reset at zero specificity so ui- classes still win. */
:where(.ui-main, .ui-footer, .ui-nav, .ui-sheet, .ui-search) p { font-size: 1em; font-weight: 400; color: inherit; margin: 0; }

/* Legacy CSS centres body/main text and forces gold, shadowed headings with !important. */
.ui-main, .ui-nav, .ui-sheet, .ui-search, .ui-footer, .ui-tabbar { text-align: left; }

.ui-main h1, .ui-main h2, .ui-main h3, .ui-main h4, .ui-main h5, .ui-main h6 {
  font-family: var(--font);
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  text-transform: none;
  text-align: inherit;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  background: none !important;
}

.ui-section { padding: 28px 0; }
@media (min-width: 768px) { .ui-section { padding: 40px 0; } }
.ui-section + .ui-section { padding-top: 8px; }
@media (min-width: 768px) { .ui-section + .ui-section { padding-top: 16px; } }

.ui-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ui-section-head h2 { font-size: 1.25rem; font-weight: 700; }
@media (min-width: 768px) { .ui-section-head h2 { font-size: 1.5rem; } }
.ui-section-head p { margin: 4px 0 0; color: var(--text-2); font-size: 0.9rem; }
/* Phones: a long intro takes the full width and its "See all" link drops under it, instead of
   the text being squeezed into a narrow column beside the link. */
@media (max-width: 599px) { .ui-section-head { flex-wrap: wrap; row-gap: 6px; } }

.ui-see-all {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.875rem; font-weight: 600; white-space: nowrap;
  color: var(--accent-text) !important;
}
.ui-see-all:hover { gap: 7px; }

.ui-stack > * + * { margin-top: 16px; }

.ui-grid { display: grid; gap: 12px; }
@media (min-width: 768px) { .ui-grid { gap: 16px; } }
.ui-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.ui-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ui-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ui-grid--posters { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (min-width: 768px) { .ui-grid--posters { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }

.ui-split { display: grid; gap: 16px; }
@media (min-width: 960px) {
  .ui-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .ui-split--aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* Horizontal scroller that bleeds to the screen edge on phones. */
.ui-scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 2px var(--gutter) 6px;
}
.ui-scroller::-webkit-scrollbar { display: none; }
.ui-scroller > * { scroll-snap-align: start; flex: none; }

/* ---------- Page header ---------- */
.ui-page-head { padding: 20px 0 8px; }
@media (min-width: 768px) { .ui-page-head { padding: 36px 0 12px; } }
.ui-page-head h1 { font-size: clamp(1.6rem, 5vw, 2.5rem); font-weight: 800; }
.ui-page-head .ui-lede { margin-top: 8px; }

.ui-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 8px;
}

.ui-lede { color: var(--text-2); font-size: 1rem; max-width: 64ch; margin: 0; }
@media (min-width: 768px) { .ui-lede { font-size: 1.075rem; } }

.ui-muted { color: var(--text-2); }
.ui-faint { color: var(--text-3); }
.ui-num { font-variant-numeric: tabular-nums; }

.ui-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 0.8125rem; color: var(--text-3);
  margin: 0 0 12px; padding: 0; list-style: none;
}
.ui-breadcrumb a { color: var(--text-2) !important; }
.ui-breadcrumb a:hover { color: var(--text) !important; }
.ui-breadcrumb li + li::before { content: "/"; margin-right: 4px; color: var(--text-3); }

/* Phones (most visits): a compact page header, so the list or answer the visitor came for starts in the
   first screen. The intro keeps its full text for readers who tap it; on screen it stops after two lines. */
@media (max-width: 639px) {
  .ui-page-head { padding: 12px 0 4px; }
  .ui-page-head h1 { font-size: 1.5rem; line-height: 1.15; }
  .ui-page-head .ui-breadcrumb { margin-bottom: 6px; font-size: 0.75rem; }
  .ui-page-head .ui-lede { margin-top: 6px; font-size: 0.9rem; line-height: 1.45;
                           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .ui-page-head .ui-lede.is-open { display: block; }
  .ui-page-head .ui-meta { margin-top: 8px; gap: 4px 12px; font-size: 0.8rem; }
  .ui-toolbar { margin: 10px 0; gap: 8px; }
}

/* Inline facts under a title: "1,461 songs · 19,276 votes" */
.ui-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 12px; font-size: 0.875rem; color: var(--text-2);
}
.ui-meta > * { display: inline-flex; align-items: center; gap: 6px; }
.ui-meta strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Answer-first line under a page title: one factual sentence that answers the page's question
   ("As of September 2026, the most followed ... is X with N followers"), then when the data was
   last updated. Printed by tp_answer_html() in /includes/SeoHelper.php. */
.ui-answer {
  margin: 14px 0 0; max-width: 72ch;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface);
  color: var(--text-2); font-size: 0.975rem; line-height: 1.6;
}
.ui-answer strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-answer a {
  color: var(--text) !important; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.ui-answer a:hover { color: var(--accent-text) !important; text-decoration-color: var(--accent); }
.ui-answer-end { margin-top: 28px; }
.ui-answer-end .ui-answer { margin: 0; }
.ui-updated { margin: 8px 0 0; font-size: 0.8125rem; color: var(--text-3); }
.ui-updated time { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Visible FAQ: <div class="ui-card ui-faq"><details><summary>Q</summary><p>A</p></details>…
   Pair it with tp_faq_ld() so the FAQPage JSON-LD repeats exactly what is shown. */
.ui-faq details + details { border-top: 1px solid var(--line); }
.ui-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 16px;
  list-style: none; cursor: pointer; font-weight: 600; color: var(--text);
}
.ui-faq summary::-webkit-details-marker { display: none; }
.ui-faq summary:hover { background: var(--surface-2); }
.ui-faq summary .ui-icon { flex: none; color: var(--text-3); transition: transform 0.2s; }
.ui-faq details[open] summary .ui-icon { transform: rotate(180deg); }
.ui-faq details p { margin: 0; padding: 0 16px 16px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); }

/* ---------- Buttons ---------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: 600 0.9375rem/1 var(--font);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.ui-btn:active { transform: scale(0.98); }
.ui-btn[disabled], .ui-btn.is-disabled { opacity: 0.5; pointer-events: none; }

.ui-btn--primary { background: var(--accent); color: var(--accent-ink) !important; }
.ui-btn--primary:hover { background: var(--accent-hover); }

.ui-btn--secondary { background: var(--surface-2); border-color: var(--line); color: var(--text) !important; }
.ui-btn--secondary:hover { background: var(--surface-3); border-color: var(--line-strong); }

.ui-btn--ghost { background: transparent; color: var(--text-2) !important; }
.ui-btn--ghost:hover { background: var(--surface-2); color: var(--text) !important; }

.ui-btn--sm { min-height: 36px; padding: 0 14px; font-size: 0.875rem; }
.ui-btn--lg { min-height: 52px; padding: 0 24px; font-size: 1rem; }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn--icon { width: 44px; padding: 0; }
.ui-btn--icon.ui-btn--sm { width: 36px; }

.ui-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Tabs & chips ---------- */
/* Segmented tabs: one row that scrolls sideways on narrow screens instead of wrapping. */
.ui-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
  width: max-content;
}
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tabs--full { width: 100%; }
.ui-tabs--full .ui-tab { flex: 1; }

.ui-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border-radius: var(--r-pill);
  border: 0; background: transparent;
  font: 600 0.875rem/1 var(--font);
  color: var(--text-2) !important;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.15s, color 0.15s;
}
.ui-tab:hover { color: var(--text) !important; background: var(--surface-2); }
.ui-tab.is-active, .ui-tab.on, .ui-tab[aria-current="page"], .ui-tab[aria-selected="true"] {
  background: var(--text); color: var(--bg) !important;
}

.ui-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ui-chips::-webkit-scrollbar { display: none; }
.ui-chips--wrap { flex-wrap: wrap; overflow: visible; }

.ui-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  font: 500 0.875rem/1 var(--font);
  color: var(--text-2) !important;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.ui-chip:hover { border-color: var(--line-strong); color: var(--text) !important; }
.ui-chip.is-active, .ui-chip[aria-current="page"] {
  background: var(--accent-soft); border-color: transparent; color: var(--accent-text) !important;
}

/* Toolbar row holding tabs/chips/filters above a list. */
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; }
.ui-toolbar > .ui-spacer { flex: 1; }

/* ---------- Cards ---------- */
.ui-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ui-card--pad { padding: 16px; }
@media (min-width: 768px) { .ui-card--pad { padding: 20px; } }
.ui-card--link { display: block; transition: border-color 0.15s, transform 0.15s, background-color 0.15s; }
.ui-card--link:hover { border-color: var(--line-strong); background: var(--surface-2); }

.ui-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.ui-card__head h2, .ui-card__head h3 { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ui-card__foot { padding: 12px 16px; border-top: 1px solid var(--line); }

/* Tile linking to a section: icon, title, one line of text. */
.ui-tile {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.15s, background-color 0.15s;
}
.ui-tile:hover { border-color: var(--line-strong); background: var(--surface-2); }
.ui-tile__icon {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent-text);
}
.ui-tile__icon .ui-icon { width: 22px; height: 22px; }
.ui-tile__icon--hot { background: var(--hot-soft); color: var(--hot); }
.ui-tile__icon--up { background: var(--up-soft); color: var(--up); }
.ui-tile__title, .ui-tile__text { display: block; }
.ui-tile__title { font-weight: 650; font-size: 0.975rem; color: var(--text); }
.ui-tile__text { font-size: 0.85rem; color: var(--text-2); margin-top: 2px; line-height: 1.4; }

/* ---------- Stats ---------- */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px; }
.ui-stat {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.ui-stat__value { font-size: 1.5rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.15; }
.ui-stat__label { font-size: 0.8125rem; color: var(--text-2); margin-top: 2px; }
@media (min-width: 768px) { .ui-stat__value { font-size: 1.75rem; } }

/* ---------- Badges & trends ---------- */
.ui-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border-radius: var(--r-pill);
  font: 600 0.72rem/1 var(--font);
  letter-spacing: 0.02em;
  background: var(--surface-3); color: var(--text-2);
  white-space: nowrap;
  vertical-align: middle;
}
.ui-badge--accent { background: var(--accent-soft); color: var(--accent-text); }
.ui-badge--hot { background: var(--hot-soft); color: var(--hot); }
.ui-badge--up { background: var(--up-soft); color: var(--up); }
.ui-badge--down { background: var(--down-soft); color: var(--down); }
.ui-badge--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: ui-pulse 1.6s ease-in-out infinite;
}
@keyframes ui-pulse { 50% { opacity: 0.3; } }

.ui-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-trend--up { color: var(--up); }
.ui-trend--down { color: var(--down); }
.ui-trend--flat { color: var(--text-3); }
.ui-trend .ui-icon { width: 14px; height: 14px; }

/* ---------- Ranked lists ---------- */
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-card > .ui-list { padding: 4px 0; }

.ui-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-height: 64px;
  color: var(--text);
  transition: background-color 0.12s;
}
a.ui-row:hover, .ui-row--link:hover { background: var(--surface-2); }
.ui-list > li + li > .ui-row, .ui-list > .ui-row + .ui-row { border-top: 1px solid var(--line); }
.ui-row--no-thumb { grid-template-columns: auto minmax(0, 1fr) auto; }

.ui-rank {
  width: 28px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ui-rank--1 { color: var(--gold); }
.ui-rank--2 { color: var(--silver); }
.ui-rank--3 { color: var(--bronze); }

.ui-thumb {
  width: 64px; height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-3);
  display: block;
}
.ui-thumb--square { width: 44px; height: 44px; border-radius: var(--r-sm); }
.ui-thumb--round { width: 44px; height: 44px; border-radius: 50%; }
.ui-thumb--poster { width: 40px; height: 60px; border-radius: 6px; }
@media (min-width: 768px) { .ui-thumb:not(.ui-thumb--square):not(.ui-thumb--round):not(.ui-thumb--poster) { width: 88px; height: 50px; } }

.ui-row__main { min-width: 0; }
.ui-row__title {
  display: block;
  font-weight: 600; font-size: 0.95rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.ui-row__sub {
  display: block;
  font-size: 0.8125rem; color: var(--text-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-row__stat { text-align: right; white-space: nowrap; }
.ui-row__value { display: block; font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--text); }
.ui-row__label { display: block; font-size: 0.75rem; color: var(--text-3); margin-top: 1px; }

/* ---------- Tables ---------- */
.ui-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ui-table th, .ui-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ui-table th {
  position: sticky; top: 0;
  background: var(--surface-2);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: var(--surface-2); }
.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Media cards ---------- */
.ui-poster { display: block; min-width: 0; }
.ui-poster__img {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.ui-poster__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--ease); }
.ui-poster:hover .ui-poster__img img { transform: scale(1.04); }
.ui-poster__badge { position: absolute; top: 8px; left: 8px; }
.ui-poster__rating {
  position: absolute; right: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.72); color: #fff;
  font-size: 0.75rem; font-weight: 700;
  backdrop-filter: blur(6px);
}
.ui-poster__rating .ui-icon { width: 12px; height: 12px; color: var(--gold); fill: var(--gold); stroke: none; }
.ui-poster__title { margin-top: 8px; font-weight: 600; font-size: 0.9rem; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-poster__sub { font-size: 0.8rem; color: var(--text-3); margin-top: 2px; }

/* Video card: 16:9 thumbnail with title under it. */
.ui-video { display: block; min-width: 0; }
.ui-video__img { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.ui-video__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-video__rank {
  position: absolute; left: 8px; top: 8px;
  min-width: 28px; height: 28px; padding: 0 8px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.72); color: #fff;
  font-size: 0.8rem; font-weight: 700;
}
.ui-video__title { margin-top: 8px; font-weight: 600; font-size: 0.9rem; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-video__sub { font-size: 0.8rem; color: var(--text-2); margin-top: 3px; }

/* Person card: round photo, name, one stat. */
.ui-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 12px; }
.ui-person img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.ui-person__name { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.ui-person__sub { font-size: 0.8rem; color: var(--text-2); }

/* ---------- Forms ---------- */
.ui-input, .ui-select {
  height: 44px; width: 100%;
  padding: 0 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: 400 0.95rem var(--font);
  box-shadow: none; /* miniAll.css gives "label input" an orange shadow */
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ui-input::placeholder { color: var(--text-3); }
.ui-input:focus, .ui-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ui-select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

.ui-search-field { position: relative; }
.ui-search-field .ui-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.ui-search-field .ui-input { padding-left: 42px; }

/* ---------- Misc ---------- */
.ui-empty { padding: 40px 16px; text-align: center; color: var(--text-2); }
.ui-divider { height: 1px; background: var(--line); border: 0; margin: 24px 0; }

.ui-prose { color: var(--text-2); font-size: 0.95rem; line-height: 1.7; }
.ui-prose h2, .ui-prose h3 { color: var(--text); margin: 1.4em 0 0.5em; font-size: 1.15rem; }
.ui-prose p { margin: 0 0 1em; }

.ui-callout {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--accent-soft), transparent 70%), var(--surface);
  border: 1px solid var(--line);
}
.ui-callout__text { flex: 1; min-width: 0; }
.ui-callout__title { font-weight: 700; }
.ui-callout__sub { font-size: 0.875rem; color: var(--text-2); }
@media (max-width: 520px) {
  .ui-callout { flex-wrap: wrap; }
  .ui-callout__text { flex: 1 1 calc(100% - 60px); }
  .ui-callout > .ui-btn { margin-left: 56px; }
}

/* ---------- App promo bar (top of every page on iPhone and iPad, pinned above the nav; navBar.php) ---------- */
/* Hidden in the HTML and shown by navBar.php's inline script before the page paints, so it never shifts the page.
   While it shows, html.tp-appbar-on adds its height to --nav-h, so the nav and every bar that sticks under the nav
   (they all use var(--nav-h)) move down with it. Its own colours (teal to green, white text) in both themes. */
:root { --tp-appbar-h: 76px; }
html.tp-appbar-on { --nav-h: calc(var(--nav-bar-h) + var(--safe-top) + var(--tp-appbar-h)); }
html.tp-appbar-on .ui-nav { top: var(--tp-appbar-h); height: calc(var(--nav-bar-h) + var(--safe-top)); }
.tp-appbar { position: sticky; top: 0; z-index: 101; overflow: hidden; display: flex; align-items: center; gap: 6px; height: var(--tp-appbar-h);
  box-sizing: border-box; padding: 6px 4px 6px 10px; background: linear-gradient(100deg, #0f766e 0%, #0d9488 45%, #16a34a 100%);
  color: #fff; font-size: .9375rem; line-height: 1.25; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.tp-appbar[hidden] { display: none; }
.tp-appbar::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* a slow shine across the bar, twice */
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%); transform: translateX(-100%);
  animation: tp-appbar-shine 2.6s ease-out 1s 2; }
.tp-appbar__link { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 100%; color: #fff; text-decoration: none; }
.tp-appbar__scene { position: relative; flex: none; width: 96px; height: 64px; border-radius: 12px; background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); overflow: hidden; }
.tp-appbar__scene svg { display: block; width: 100%; height: 100%; }
.tp-appbar__ad { position: absolute; z-index: 1; top: 3px; left: 3px; font-size: .5625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.35); border-radius: 3px; padding: 0 3px; line-height: 1.5; }
.tp-appbar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-appbar__hook { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-appbar__desc { font-size: .8125rem; line-height: 1.25; color: rgba(255,255,255,.92); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tp-appbar__desc b { font-weight: 700; color: #fff; }
.tp-appbar__cta { flex: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: #0f766e; background: #fff; border-radius: 999px;
  padding: 9px 14px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.22); animation: tp-appbar-pulse 1.8s ease-out 1.2s 3; }
.tp-appbar__cta .ui-icon { width: 16px; height: 16px; transition: transform .15s; }
.tp-appbar__link:hover .tp-appbar__cta { background: #ecfdf5; }
.tp-appbar__link:hover .tp-appbar__cta .ui-icon { transform: translateX(3px); }
.tp-appbar__x { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 30px; height: 44px; border: 0; border-radius: 8px;
  background: none; color: rgba(255,255,255,.8); cursor: pointer; padding: 0; }
.tp-appbar__x:hover { background: rgba(0,0,0,.15); color: #fff; }
.tp-appbar__x .ui-icon { width: 16px; height: 16px; }
@media (max-width: 520px) { .tp-appbar__more { display: none; } }   /* "the app" in "Get the app" */
@media (max-width: 400px) { .tp-appbar__scene { width: 78px; height: 52px; } .tp-appbar__hook { font-size: 1rem; } .tp-appbar__cta { padding: 8px 12px; }
  .tp-appbar__cta .ui-icon { display: none; } .tp-appbar__link { gap: 8px; } }
/* The scene: the neighbours bob, the parcel goes from one to the other and back, a heart rises when it arrives. */
.tp-appbar svg .tpab-a, .tp-appbar svg .tpab-b, .tp-appbar svg .tpab-box, .tp-appbar svg .tpab-heart, .tp-appbar svg .tpab-spark { transform-box: fill-box; transform-origin: center; }
.tp-appbar svg .tpab-a { animation: tpab-bob 1.6s ease-in-out infinite; }
.tp-appbar svg .tpab-b { animation: tpab-bob 1.6s ease-in-out .8s infinite; }
.tp-appbar svg .tpab-box { animation: tpab-pass 4s ease-in-out infinite; }
.tp-appbar svg .tpab-heart { opacity: 0; animation: tpab-heart 4s ease-out infinite; }
.tp-appbar svg .tpab-spark { animation: tpab-twinkle 2s ease-in-out infinite; }
@keyframes tpab-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes tpab-pass { 0%, 12% { transform: translate(-3px, 0); } 30% { transform: translate(5px, -7px); } 46%, 62% { transform: translate(12px, 0); }
                       80% { transform: translate(5px, -7px); } 100% { transform: translate(-3px, 0); } }
@keyframes tpab-heart { 0%, 44% { opacity: 0; transform: translate(4px, 8px) scale(.4); } 54% { opacity: 1; transform: translate(4px, 2px) scale(1.15); }
                        66% { opacity: 1; transform: translate(4px, -2px) scale(1); } 80%, 100% { opacity: 0; transform: translate(4px, -8px) scale(.9); } }
@keyframes tpab-twinkle { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes tp-appbar-shine { to { transform: translateX(100%); } }
@keyframes tp-appbar-pulse { 0% { box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 0 rgba(255,255,255,.7); }
                             70% { box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 12px rgba(255,255,255,0); }
                             100% { box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .tp-appbar::after, .tp-appbar__cta, .tp-appbar svg * { animation: none !important; } .tp-appbar svg .tpab-heart { opacity: 1; } }

/* ---------- Navigation ---------- */
/* Desktop menus from 993px; below that the phone tab bar and menu sheet take over
   (javascript.js positions the install banner around the tab bar at the same width). */
.ui-nav {
  position: sticky; top: 0; z-index: 100;
  box-sizing: border-box;
  height: var(--nav-h);
  padding-top: var(--safe-top); /* bar sits below the notch / status bar in the installed app */
  background: var(--nav-bg);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font);
}
.ui-nav *, .ui-nav *::before, .ui-nav *::after { box-sizing: border-box; }
.ui-nav a { text-decoration: none; }

.ui-nav__bar {
  height: 100%;
  display: flex; align-items: center; gap: 6px;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 max(var(--gutter), var(--safe-right)) 0 max(var(--gutter), var(--safe-left));
}

.ui-nav__brand { display: flex; align-items: center; flex: none; margin-right: 10px; }
.ui-nav__brand img, .ui-nav__brand #logo { height: 36px; width: auto; display: block; margin: 0; }   /* #logo: beats miniAll.css's 40px */
@media (min-width: 993px) { .ui-nav__brand img, .ui-nav__brand #logo { height: 32px; } }

.ui-nav__menu { display: none; list-style: none; margin: 0; padding: 0; gap: 0; }
.ui-nav__item { position: relative; }

.ui-nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 38px; padding: 0 10px;
  border-radius: var(--r-pill);
  border: 0; background: transparent; cursor: pointer;
  font: 500 0.9rem/1 var(--font);
  color: var(--text-2) !important;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.ui-nav__link:hover, .ui-nav__item.is-open > .ui-nav__link { color: var(--text) !important; background: var(--surface-2); }
.ui-nav__link.is-current { color: var(--text) !important; }
.ui-nav__link .ui-icon--chev { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.2s; }
.ui-nav__item.is-open .ui-icon--chev { transform: rotate(180deg); }
.ui-nav__link--accent { color: var(--accent-text) !important; }

.ui-nav__panel {
  position: absolute; top: calc(100% + 10px); left: -8px;
  min-width: 250px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.ui-nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.ui-nav__item.is-open > .ui-nav__panel { opacity: 1; visibility: visible; transform: none; }
/* The last two menus open leftwards so their panels never run past the right edge. */
.ui-nav__item:nth-last-child(-n+2) > .ui-nav__panel { left: auto; right: -8px; }
.ui-nav__panel--wide { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: 4px 12px; min-width: 540px; }
.ui-nav__panel--wide .ui-nav__group + .ui-nav__group { margin-top: 0; padding-top: 0; border-top: 0; }
/* Songs: charts, records and years side by side, so the panel stays short. */
.ui-nav__panel--3 { grid-template-columns: repeat(3, minmax(200px, 1fr)); min-width: 700px; }
.ui-nav__panel--wide > .ui-nav__span { grid-column: 1 / -1; margin-bottom: 4px; border-bottom: 1px solid var(--line); border-radius: var(--r-sm, 8px) var(--r-sm, 8px) 0 0; }

.ui-nav__group + .ui-nav__group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.ui-nav__label { padding: 8px 10px 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

.ui-nav__panel a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 0.9rem; font-weight: 500; line-height: 1.3;
  color: var(--text) !important;
}
.ui-nav__panel a:hover { background: var(--surface-2); }
.ui-nav__panel a .ui-icon { color: var(--text-3); }
.ui-nav__panel a:hover .ui-icon { color: var(--accent-text); }
.ui-nav__panel a.ui-nav__all { color: var(--accent-text) !important; font-weight: 600; }
.ui-nav__years { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 6px 6px; }
.ui-nav__panel .ui-nav__years a { padding: 5px 10px; font-size: 0.8125rem; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text-2) !important; }
.ui-nav__panel .ui-nav__years a:hover { color: var(--text) !important; border-color: var(--line-strong); }

.ui-nav__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }   /* lets the search field give way before the bar overflows */

.ui-nav__search {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; width: 40px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2) !important;
  font: 400 0.875rem/1 var(--font);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.ui-nav__search .ui-icon { width: 20px; height: 20px; }
.ui-nav__search span, .ui-nav__search kbd { display: none; }
.ui-nav__search:hover { background: var(--surface-2); color: var(--text) !important; }
@media (min-width: 1220px) {
  .ui-nav__search { width: 230px; min-width: 150px; flex-shrink: 1; justify-content: flex-start; padding: 0 12px; border-color: var(--line); background: var(--surface); color: var(--text-3) !important; }
  .ui-nav__search .ui-icon { width: 17px; height: 17px; }
  .ui-nav__search span { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ui-nav__search kbd { display: inline; margin-left: auto; font: 500 0.7rem var(--font); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--text-3); }
  .ui-nav__search:hover { border-color: var(--line-strong); background: var(--surface); }
}

.ui-nav__icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0; background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.ui-nav__icon-btn:hover { background: var(--surface-2); color: var(--text); }
.ui-nav__icon-btn .ui-icon { width: 20px; height: 20px; }

/* Account chip, filled in by the script in navBar.php from /api/me. */
.ui-account-wrap { position: relative; display: inline-flex; flex: none; }
.ui-account {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text) !important;
  font: 700 0.85rem/1 var(--font);
  overflow: hidden;
}
.ui-account img { width: 100%; height: 100%; object-fit: cover; }
.ui-account.in { border-color: var(--accent); }
.ui-account .tp-account-ini { display: grid; place-items: center; width: 100%; height: 100%; color: var(--accent-text); }
.ui-account.out {
  width: auto; height: 36px; padding: 0 14px;
  border-radius: var(--r-pill);
  border-color: var(--line-strong); background: transparent;
  font-size: 0.85rem; font-weight: 600; color: var(--text) !important;
}
.ui-account.out:hover { background: var(--surface-2); }
.ui-account__dot {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; border: 2px solid var(--bg);
  background: var(--hot); color: #fff;
  font: 800 0.62rem/13px var(--font); text-align: center;
  pointer-events: none;
}
.ui-account__dot[hidden] { display: none; }

.ui-nav__menu-btn .ui-icon { width: 22px; height: 22px; }

@media (min-width: 993px) {
  .ui-nav__menu { display: flex; }
  .ui-nav__menu-btn { display: none; }
}
@media (min-width: 993px) and (max-width: 1100px) {
  .ui-nav__link { padding: 0 8px; font-size: 0.85rem; }
  .ui-nav__brand img, .ui-nav__brand #logo { height: 28px; }
}

/* ---------- Search dialog (#searchOverlay) ---------- */
.ui-search {
  position: fixed; inset: 0; z-index: 170;
  display: flex; justify-content: center; align-items: flex-start;
  padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
  background: var(--scrim);
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  font-family: var(--font);
}
@media (min-width: 768px) { .ui-search { padding-top: calc(80px + var(--safe-top)); } }
.ui-search.active { opacity: 1; visibility: visible; }
.ui-search *, .ui-search *::before, .ui-search *::after { box-sizing: border-box; }
.ui-search a { text-decoration: none; }
.ui-search__card {
  width: min(640px, 100%);
  max-height: calc(100vh - 24px - var(--safe-top) - var(--safe-bottom));
  max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-6px);
  transition: transform 0.15s;
}
.ui-search.active .ui-search__card { transform: none; }
.ui-search__form { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--line); }
.ui-search__form > .ui-icon { color: var(--text-3); width: 20px; height: 20px; }
.ui-search__form input {
  flex: 1; min-width: 0; height: 48px;
  border: 0 !important; background: transparent !important; outline: none !important; box-shadow: none !important;
  font: 400 1.05rem var(--font); color: var(--text) !important;
  padding: 0;
}
.ui-search__form input::placeholder { color: var(--text-3); }
.ui-search__form input::-webkit-search-cancel-button { display: none; }
.ui-search__results { overflow-y: auto; padding: 6px; }
.ui-search__results:not(.show) { display: none; }
.ui-search__results .tp-sr-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--text) !important;
}
.ui-search__results .tp-sr-item:hover, .ui-search__results .tp-sr-item.active { background: var(--surface-2); }
.ui-search__results .tp-sr-thumb {
  flex: none; width: 56px; height: 32px; border-radius: 5px; object-fit: cover;
  display: grid; place-items: center; background: var(--surface-3); font-size: 0.9rem;
}
.ui-search__results .tp-sr-thumb.artist { width: 36px; height: 36px; border-radius: 50%; }
.ui-search__results span.tp-sr-thumb { color: var(--text-3); }
.ui-search__results span.tp-sr-thumb .ui-icon { width: 18px; height: 18px; }
.ui-search__results .tp-sr-text { flex: 1; min-width: 0; }
.ui-search__results .tp-sr-label { font-weight: 600; font-size: 0.925rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-search__results .tp-sr-sub { font-size: 0.8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-search__results .tp-sr-badge { flex: none; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.ui-search__results .tp-sr-empty { padding: 14px 10px; font-size: 0.875rem; color: var(--text-2); }
.ui-search__quick { padding: 12px 16px 16px; }
.ui-search__quick p { margin: 0 0 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Phone menu (#mobileMenu) ---------- */
.ui-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: var(--scrim);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.ui-scrim.active { opacity: 1; visibility: visible; }

.ui-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
  max-height: calc(90vh - var(--safe-top)); max-height: calc(90dvh - var(--safe-top));
  display: flex; flex-direction: column;
  padding-left: var(--safe-left); padding-right: var(--safe-right);
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.28s var(--ease), visibility 0.28s;
  font-family: var(--font);
  text-align: left;
}
.ui-sheet.active { transform: none; visibility: visible; }
.ui-sheet *, .ui-sheet *::before, .ui-sheet *::after { box-sizing: border-box; }
.ui-sheet a { text-decoration: none; }
.ui-sheet__head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 16px; }
.ui-sheet__head strong { font-size: 1.05rem; color: var(--text); margin-right: auto; }
.ui-sheet__body { overflow-y: auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.ui-sheet__search { margin: 4px 0 8px; }
.ui-sheet__search .ui-input { height: 46px; }
.ui-sheet__group + .ui-sheet__group { margin-top: 6px; }
/* Section shortcuts: one row of chips that stays at the top while the menu scrolls. */
.ui-sheet__jump { position: sticky; top: 0; z-index: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 6px 16px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ui-sheet__jump::-webkit-scrollbar { display: none; }
.ui-sheet__jump .ui-chip { flex: none; min-height: 34px; font-size: 0.8125rem; }
.ui-sheet__label { scroll-margin-top: 56px; }
.ui-sheet__label { margin: 16px 0 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.ui-sheet__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-sheet__tile {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px;
  min-height: 78px; padding: 11px 12px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid transparent;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.2;
  color: var(--text) !important;
}
.ui-sheet__tile svg { width: 20px; height: 20px; color: var(--accent-text); }
.ui-sheet__tile.is-on { border-color: var(--accent); background: var(--accent-soft); }
.ui-sheet__more { margin-top: 6px; }
.ui-sheet__more summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 42px; padding: 0 4px;
  list-style: none; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; color: var(--text-2);
}
.ui-sheet__more summary::-webkit-details-marker { display: none; }
.ui-sheet__more summary svg { width: 18px; height: 18px; transition: transform 0.2s; }
.ui-sheet__more[open] summary svg { transform: rotate(180deg); }
.ui-sheet__rows { display: grid; gap: 2px; padding: 0 0 8px; }
.ui-sheet__row { display: block; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--text) !important; }
.ui-sheet__row.is-on { color: var(--accent-text) !important; }
.ui-sheet__sub { margin: 10px 0 4px; }
.ui-sheet__sub-h { display: block; margin-bottom: 8px; font-size: 0.78rem; color: var(--text-3); }
.ui-sheet__sub .ui-chip { min-height: 32px; font-size: 0.8125rem; }
@media (min-width: 993px) { .ui-sheet, .ui-scrim { display: none; } }

/* ---------- Phone tab bar ---------- */
.ui-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: repeat(5, 1fr);
  box-sizing: border-box;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: var(--nav-bg);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--line);
  font-family: var(--font);
}
.ui-tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: 500 0.6875rem/1 var(--font);
  color: var(--text-3) !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}
.ui-tabbar__icon {
  display: grid; place-items: center;
  width: 48px; height: 30px; border-radius: var(--r-pill);
  transition: background-color 0.15s;
}
.ui-tabbar__icon .ui-icon { width: 22px; height: 22px; }
.ui-tabbar__item.active { color: var(--text) !important; }
.ui-tabbar__item.active .ui-tabbar__icon { background: var(--surface-3); }
.ui-tabbar__item--accent { color: var(--text-2) !important; }
.ui-tabbar__item--accent .ui-tabbar__icon { background: var(--accent); color: var(--accent-ink); }
.ui-tabbar__item--accent.active .ui-tabbar__icon { background: var(--accent-hover); }
body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
@media (min-width: 993px) {
  .ui-tabbar { display: none; }
  body { padding-bottom: var(--safe-bottom); }
}

/* ---------- Footer ---------- */
/* Before the footer: one card of rows (add a song / suggest a person, then share). Two columns on wide screens. */
.ui-pre-footer { margin-top: 40px; text-align: left; font-family: var(--font); }
.ui-pre-footer * { box-sizing: border-box; }
.ui-pre-footer__row .ui-tile__icon { width: 40px; height: 40px; }
.ui-pre-footer__row .ui-tile__icon .ui-icon { width: 20px; height: 20px; }
.ui-pre-footer__row > .ui-icon { color: var(--text-3); }
.ui-pre-footer__row .ui-row__title { color: var(--text); }
.ui-pre-footer__row .ui-row__sub { white-space: normal; }
.ui-pre-footer__share { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
.ui-pre-footer__share .ui-social { grid-column: 2; }
@media (min-width: 600px) {
  .ui-pre-footer__share { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ui-pre-footer__share .ui-social { grid-column: auto; }
}
@media (min-width: 900px) {
  .ui-pre-footer__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-pre-footer__list > li:nth-child(2) > .ui-row { border-top: 0; }
  .ui-pre-footer__list > li:nth-child(even) { border-left: 1px solid var(--line); }
  .ui-pre-footer__list--odd > li:last-child { grid-column: 1 / -1; }
}

.ui-footer {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font);
  color: var(--text-2);
  text-align: left;
}
.ui-footer *, .ui-footer *::before, .ui-footer *::after { box-sizing: border-box; }
.ui-footer a { color: var(--text-2) !important; text-decoration: none; }
.ui-footer a:hover { color: var(--text) !important; }
.ui-footer__top { display: grid; gap: 28px; padding: 40px 0 24px; }
@media (min-width: 900px) { .ui-footer__top { grid-template-columns: 1.3fr repeat(4, 1fr); padding-top: 44px; } }
.ui-footer__brand img { height: 32px; width: auto; display: block; margin-bottom: 12px; }
.ui-footer__brand p { margin: 0; font-size: 0.875rem; line-height: 1.6; max-width: 36ch; }
.ui-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
@media (min-width: 900px) { .ui-footer__cols { display: contents; } }
.ui-footer h2 {
  margin: 0 0 12px;
  font: 600 0.75rem/1.2 var(--font) !important;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
.ui-footer ul { list-style: none; margin: 0; padding: 0; }
.ui-footer li + li { margin-top: 8px; }
.ui-footer li a { font-size: 0.875rem; }
.ui-footer__links { display: grid; gap: 10px; padding: 20px 0; border-top: 1px solid var(--line); }
.ui-footer__links div { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8125rem; }
.ui-footer__links span { color: var(--text-3); font-weight: 600; margin-right: 2px; }
.ui-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}
.ui-footer__legal { display: flex; flex-wrap: wrap; gap: 16px; }
.ui-social { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-social a, .ui-social button {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-2) !important; cursor: pointer; padding: 0;
}
.ui-social a:hover, .ui-social button:hover { border-color: var(--line-strong); color: var(--text) !important; }

/* ---------- Sign in with Google (includes/GoogleSignIn.php) ----------
   Our own face follows Google's branding (multicolour G, Roboto/system 500 14px,
   dark: #131314 fill / #8e918f stroke / #e3e3e3 text; light: #fff / #747775 / #1f1f1f).
   Google's real button sits invisibly on top (.tp-gsi__real) and takes the click. */
.tp-gsi {
  --gsi-bg: #131314; --gsi-bg-hover: #1e1f20; --gsi-line: #8e918f; --gsi-text: #e3e3e3;
  position: relative; display: block;
  width: 100%; max-width: 360px; height: 44px;
  font-family: Roboto, var(--font, system-ui, -apple-system, "Segoe UI", sans-serif);
}
:root[data-theme="light"] .tp-gsi:not(.tp-gsi--dark), .tp-gsi--light {
  --gsi-bg: #fff; --gsi-bg-hover: #f2f2f2; --gsi-line: #747775; --gsi-text: #1f1f1f;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tp-gsi:not(.tp-gsi--dark) { --gsi-bg: #fff; --gsi-bg-hover: #f2f2f2; --gsi-line: #747775; --gsi-text: #1f1f1f; }
}
.tp-gsi--center { margin-left: auto; margin-right: auto; }
.tp-gsi__face {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; margin: 0; padding: 0 16px 0 12px;
  border: 1px solid var(--gsi-line); border-radius: var(--r-pill, 999px);
  background: var(--gsi-bg); color: var(--gsi-text) !important;
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.25px;
  white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.tp-gsi__g { flex: none; width: 20px; height: 20px; }
.tp-gsi__label { overflow: hidden; text-overflow: ellipsis; }
.tp-gsi:hover .tp-gsi__face { background: var(--gsi-bg-hover); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.tp-gsi:active .tp-gsi__face { background: var(--gsi-bg-hover); }
.tp-gsi:focus-within .tp-gsi__face { outline: 2px solid var(--accent, #f5a524); outline-offset: 2px; }
.tp-gsi.is-waiting .tp-gsi__face { opacity: 0.7; cursor: progress; }
/* Google's own button: invisible, stretched over the face, clickable once rendered. */
.tp-gsi__real {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: var(--r-pill, 999px);
  opacity: 0.0001; pointer-events: none;
}
.tp-gsi.is-ready .tp-gsi__real { pointer-events: auto; }
.tp-gsi__real > div { flex: none; transform: scale(1.25); }

.ui-toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px + var(--safe-bottom)); z-index: 200;
  max-width: calc(100vw - 32px - var(--safe-left) - var(--safe-right));
  transform: translate(-50%, 20px);
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--text); color: var(--bg);
  font: 600 0.875rem var(--font);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.ui-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 993px) { .ui-toast { bottom: calc(24px + var(--safe-bottom)); } }

/* ---------- Save as image (includes/ShareCard.php, assets/js/share-card.js) ---------- */
/* The button, then the sheet with the preview: a bottom sheet on phones, a dialog from 600px. */
.tp-shot-btn .ui-icon { color: var(--accent-text); }
.ui-toolbar > .tp-shot-btn { flex: none; margin-left: auto; }   /* right-aligned, also when it wraps */
@media (max-width: 599px) { .tp-shot-more { display: none; } }   /* phones: "Save", so it fits beside the tabs */
.tp-shot-open { overflow: hidden; }
.tp-shot {
  position: fixed; inset: 0; z-index: 10000;   /* over the consent banner (9999) */
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim);
  font-family: var(--font); text-align: left;
}
.tp-shot[hidden], .tp-shot [hidden] { display: none !important; }
.tp-shot-open .ui-toast { z-index: 10001; }
@media (max-width: 599px) { .tp-shot-open .ui-toast { top: calc(16px + var(--safe-top)); bottom: auto; } }
.tp-shot *, .tp-shot *::before, .tp-shot *::after { box-sizing: border-box; }
.tp-shot__panel {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 460px; max-height: 100%;
  padding: 10px 16px calc(16px + var(--safe-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-lg);
  animation: tp-shot-in 0.24s var(--ease);
}
@keyframes tp-shot-in { from { transform: translateY(24px); opacity: 0; } }
.tp-shot__head { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.tp-shot__head strong { margin-right: auto; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.tp-shot__stage {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  height: min(52vh, 470px); height: min(52dvh, 470px);
  padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg);
}
.tp-shot__stage img { display: block; max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
.tp-shot__stage.is-busy img { visibility: hidden; }
.tp-shot__busy { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 10px; padding: 16px; color: var(--text-2); font-size: 0.875rem; text-align: center; }
.tp-shot__stage.is-busy .tp-shot__busy { display: flex; }
.tp-shot__busy::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: tp-shot-spin 0.8s linear infinite; }
@keyframes tp-shot-spin { to { transform: rotate(360deg); } }
.tp-shot__fmt { align-self: center; flex: none; }
.tp-shot__acts { display: flex; gap: 8px; }
.tp-shot__acts .ui-btn { flex: 1 1 0; min-width: 0; }
.tp-shot__hint { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-3); text-align: center; }
@media (min-width: 600px) {
  .tp-shot { align-items: center; padding: 24px; }
  .tp-shot__panel { max-height: calc(100vh - 48px); border-bottom: 1px solid var(--line-strong); border-radius: var(--r-lg); padding-bottom: 16px; }
  .tp-shot__stage { height: min(62vh, 560px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Page signatures (2026-10-11, the owner: "all pages color and all great unique like we had big boss page eye").
   Small moving marks, one per kind of page, all still for reduced motion:
   .tp-eq       equaliser bars (music: Hot 50, song pages)
   .tp-igring   Instagram-style ring around a person's photo (people pages)
   .tp-live     red "live desk" pill with a blinking dot (news)
   .tp-reel     film-strip edge under a header (movies)
   .tp-spark    twinkling sparkle (new releases)
   .tp-igband   Instagram gradient line under a header (follower lists)
   ========================================================================== */
.tp-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: .9em; margin-left: .35em; vertical-align: baseline; }
.tp-eq i { display: block; width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #ffd166, var(--accent, #f5a524)); transform-origin: bottom; animation: tp-eq 1s ease-in-out infinite; }
.tp-eq i:nth-child(2) { animation-delay: -.4s; } .tp-eq i:nth-child(3) { animation-delay: -.7s; } .tp-eq i:nth-child(4) { animation-delay: -.2s; }
@keyframes tp-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.tp-igring { position: relative; display: inline-grid; place-items: center; padding: 6px; border-radius: 50%; isolation: isolate; flex: none; }
.tp-igring::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); animation: tp-spin 6s linear infinite; }
.tp-igring > * { box-shadow: 0 0 0 3px var(--bg, #0d0d12); }
@keyframes tp-spin { to { transform: rotate(1turn); } }

.tp-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: #e11d48; color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tp-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: tp-blink 1.2s steps(2, start) infinite; }
@keyframes tp-blink { 50% { opacity: .15; } }

.tp-reel { height: 14px; margin: 12px 0 4px; border-radius: 3px; background:
  repeating-linear-gradient(90deg, transparent 0 6px, var(--bg, #0d0d12) 6px 14px) 0 3px / 100% 4px no-repeat,
  repeating-linear-gradient(90deg, transparent 0 6px, var(--bg, #0d0d12) 6px 14px) 0 7px / 100% 4px no-repeat,
  linear-gradient(90deg, #f5a524, #e11d48 50%, #7c3aed); background-size: 28px 4px, 28px 4px, 100% 100%; background-repeat: repeat-x, repeat-x, no-repeat;
  animation: tp-reel 2.4s linear infinite; opacity: .9; }
@keyframes tp-reel { to { background-position: 28px 3px, 28px 7px, 0 0; } }

.tp-spark { display: inline-block; margin-left: .25em; color: #ffd166; animation: tp-twinkle 1.8s ease-in-out infinite; }
@keyframes tp-twinkle { 0%, 100% { transform: scale(.8) rotate(0); opacity: .7; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }

.tp-igband { height: 4px; margin: 12px 0 2px; border-radius: 4px; background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); background-size: 200% 100%; animation: tp-band 6s linear infinite; }
@keyframes tp-band { to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .tp-eq i, .tp-igring::before, .tp-live::before, .tp-reel, .tp-spark, .tp-igband { animation: none; }
}