:root {
  --rl-radius-sm: 8px;
  --rl-radius-md: 12px;
  --rl-radius-lg: 16px;
  --rl-shadow-sm: 0 1px 2px rgba(15, 10, 30, .05);
  --rl-shadow-md: 0 10px 28px rgba(15, 10, 30, .08);
  --rl-shadow-lg: 0 22px 60px rgba(15, 10, 30, .14);
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  letter-spacing: 0;
}

button,
input,
textarea,
select {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #6C3BFF;
  outline-offset: 3px;
}

button,
a,
.video-card,
.folder-tab,
.price-card,
.feat-card,
.card,
.dash-stat {
  -webkit-tap-highlight-color: transparent;
}

nav {
  min-height: 60px;
}

.btn-primary,
.btn-submit,
.btn-record,
.nav-cta,
.btn-start {
  background: linear-gradient(135deg, #7C3AED, #5B2CFF) !important;
  box-shadow: 0 10px 24px rgba(108, 59, 255, .24);
}

.promo-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: #111827;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 800;
}

.promo-banner.show {
  display: flex;
}

.promo-banner code {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #7DFFCE;
  padding: 3px 8px;
  font-size: 12px;
}

.promo-note {
  margin: 0 0 16px;
  border: 1px solid rgba(108,59,255,.18);
  background: linear-gradient(135deg, rgba(108,59,255,.08), rgba(20,184,166,.08));
  color: #2D1B6B;
  border-radius: var(--rl-radius-md);
  padding: 11px 13px;
  font-size: 13px;
  font-weight: 800;
}

.btn-primary:hover,
.btn-submit:hover,
.btn-record:hover,
.btn-cta:hover,
.nav-cta:hover,
.btn-start:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(108, 59, 255, .32);
}

.card,
.modal,
.modal-box,
.video-card,
.price-card,
.feat-card,
.comments-section,
.analytics-panel,
.library-toolbar,
.dash-stat,
.search-box,
.nav-dropdown,
.card-dropdown {
  border-radius: var(--rl-radius-lg) !important;
}

.card,
.video-card,
.price-card,
.feat-card,
.comments-section,
.library-toolbar,
.dash-stat {
  box-shadow: var(--rl-shadow-sm);
}

.video-card:hover,
.price-card:hover,
.feat-card:hover,
.dash-stat:hover {
  box-shadow: var(--rl-shadow-md);
}

/* Dashboard */
body:has(.dash-hero) {
  background:
    radial-gradient(circle at 12% -10%, rgba(124, 58, 237, .10), transparent 32%),
    linear-gradient(180deg, #F7F6FD 0%, #FFFFFF 72%);
}

body.dark:has(.dash-hero) {
  background:
    radial-gradient(circle at 16% -12%, rgba(124, 58, 237, .18), transparent 30%),
    linear-gradient(180deg, #0C0916 0%, #100C1D 100%) !important;
}

body:not(:has(.app-shell)) .dash-intro {
  border-radius: var(--rl-radius-lg) !important;
  background:
    linear-gradient(135deg, rgba(15, 10, 30, .94), rgba(48, 34, 92, .96) 58%, rgba(13, 105, 98, .92)) !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

body:has(.app-shell) .dash-intro {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.app-shell) .library-toolbar,
body:has(.app-shell) .dash-stat {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:has(.app-shell) .btn-record,
body:has(.app-shell) .side-record {
  background: var(--text) !important;
  box-shadow: none;
}

.library-toolbar {
  gap: 12px !important;
  padding: 14px !important;
}

.quick-filter,
.folder-tab,
.btn-new-folder,
.sort-select,
.view-toggle {
  border-radius: var(--rl-radius-md) !important;
}

body:not(:has(.app-shell)) .video-thumb {
  background: linear-gradient(135deg, #130B27, #322069) !important;
}

/* Watch page */
body:has(.video-wrap),
body:has(#pw-gate-wrap) {
  background:
    radial-gradient(circle at 18% -12%, rgba(124, 58, 237, .32), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(20, 184, 166, .14), transparent 28%),
    #0B0718 !important;
}

body:has(.video-wrap) nav,
body:has(#pw-gate-wrap) nav {
  background: rgba(12, 8, 28, .72) !important;
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}

.video-wrap {
  border-radius: var(--rl-radius-lg) !important;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .52) !important;
}

.comments-section {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .10);
  color: white;
}

.comments-section h3,
.comment-name {
  color: white !important;
}

.comment {
  border-top-color: rgba(255, 255, 255, .08) !important;
}

.comment-text {
  color: rgba(255, 255, 255, .74) !important;
}

.comment-form input,
.comment-form textarea {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: white !important;
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
  color: rgba(255, 255, 255, .38);
}

.pw-card {
  border-radius: var(--rl-radius-lg) !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

/* Auth and profile */
.left,
body:not(.admin-page) .hero {
  background:
    radial-gradient(circle at 20% 0%, rgba(124, 58, 237, .36), transparent 34%),
    #08051A !important;
}

.right-inner,
.profile-header,
main > h1 {
  letter-spacing: 0;
}

@media (max-width: 760px) {
  nav {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .dash-hero {
    grid-template-columns: 1fr !important;
  }

  .video-grid.list .video-card {
    grid-template-columns: 1fr !important;
  }
}

/* ── Branded spinner ─────────────────────────────────────────────────────── */
@keyframes rl-spin { to { transform: rotate(360deg); } }

.rl-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.rl-spinner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(108, 59, 255, .14);
  border-top-color: #6C3BFF;
  animation: rl-spin .85s linear infinite;
}
.rl-spinner svg {
  width: 26px;
  height: 26px;
  color: #6C3BFF;
  position: relative;
  z-index: 1;
}
/* Large — page-load contexts */
.rl-spinner--lg {
  width: 76px;
  height: 76px;
}
.rl-spinner--lg::before { border-width: 3px; }
.rl-spinner--lg svg { width: 34px; height: 34px; }
/* Reverse — on dark backgrounds */
.rl-spinner--rev::before {
  border-color: rgba(255, 255, 255, .1);
  border-top-color: #a78bfa;
}
.rl-spinner--rev svg { color: #c4b5fd; }