/* ============================================================
   CinemaCore Design System
   True AMOLED black + neon green · DM Sans · Cinematic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Colors */
  --cc-bg:            #000000;
  --cc-surface:       #0a0a0a;
  --cc-surface-2:     #111111;
  --cc-surface-3:     #181818;
  --cc-elevated:      #1e1e1e;
  --cc-border:        #252525;
  --cc-border-subtle: #181818;

  /* Accent — Neon Green */
  --cc-accent:        #00e676;
  --cc-accent-dim:    #00c853;
  --cc-accent-muted:  rgba(0, 230, 118, 0.12);
  --cc-accent-glow:   0 0 24px rgba(0, 230, 118, 0.25);

  /* Text */
  --cc-text:          #f0f0f0;
  --cc-text-secondary: #a0a0a0;
  --cc-text-muted:    #5c5c5c;

  /* States */
  --cc-error:         #ff4d4d;
  --cc-warning:       #ffb300;
  --cc-success:       #00e676;
  --cc-info:          #2979ff;

  /* Spacing */
  --cc-space-1:       4px;
  --cc-space-2:       8px;
  --cc-space-3:       12px;
  --cc-space-4:       16px;
  --cc-space-5:       20px;
  --cc-space-6:       24px;
  --cc-space-8:       32px;
  --cc-space-10:      40px;
  --cc-space-12:      48px;
  --cc-space-16:      64px;

  /* Layout */
  --cc-sidebar-w:     240px;
  --cc-navbar-h:      64px;
  --cc-content-max:   1600px;

  /* Radius */
  --cc-radius-sm:     6px;
  --cc-radius-md:     10px;
  --cc-radius-lg:     16px;
  --cc-radius-xl:     24px;
  --cc-radius-pill:   9999px;

  /* Shadows */
  --cc-shadow-sm:     0 1px 4px rgba(0,0,0,0.5);
  --cc-shadow-md:     0 4px 20px rgba(0,0,0,0.7);
  --cc-shadow-lg:     0 8px 40px rgba(0,0,0,0.9);

  /* Transitions */
  --cc-ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cc-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --cc-dur-fast:      120ms;
  --cc-dur-base:      220ms;
  --cc-dur-slow:      400ms;

  /* Typography */
  --cc-font:          'DM Sans', system-ui, -apple-system, sans-serif;
  --cc-font-mono:     'JetBrains Mono', 'Fira Code', monospace;
  --cc-text-xs:       0.75rem;
  --cc-text-sm:       0.875rem;
  --cc-text-base:     1rem;
  --cc-text-lg:       1.125rem;
  --cc-text-xl:       1.25rem;
  --cc-text-2xl:      1.5rem;
  --cc-text-3xl:      1.875rem;
  --cc-text-4xl:      2.25rem;
  --cc-text-5xl:      3rem;
}

/* Light mode overrides */
[data-theme="light"] {
  --cc-bg:            #f8f8f8;
  --cc-surface:       #ffffff;
  --cc-surface-2:     #f2f2f2;
  --cc-surface-3:     #ebebeb;
  --cc-elevated:      #e8e8e8;
  --cc-border:        #dddddd;
  --cc-border-subtle: #eeeeee;
  --cc-text:          #0f0f0f;
  --cc-text-secondary:#4a4a4a;
  --cc-text-muted:    #9a9a9a;
  --cc-shadow-sm:     0 1px 4px rgba(0,0,0,0.08);
  --cc-shadow-md:     0 4px 20px rgba(0,0,0,0.12);
  --cc-shadow-lg:     0 8px 40px rgba(0,0,0,0.18);
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--cc-font);
  font-size: var(--cc-text-base);
  line-height: 1.6;
  background-color: var(--cc-bg);
  color: var(--cc-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cc-bg); }
::-webkit-scrollbar-thumb { background: var(--cc-border); border-radius: var(--cc-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--cc-text-muted); }

/* ── Layout ─────────────────────────────────────────────── */
.cc-app {
  display: flex;
  min-height: 100vh;
}

.cc-sidebar {
  width: var(--cc-sidebar-w);
  min-height: 100vh;
  background: var(--cc-surface);
  border-right: 1px solid var(--cc-border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform var(--cc-dur-base) var(--cc-ease);
}

.cc-main {
  flex: 1;
  margin-left: var(--cc-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cc-navbar {
  height: var(--cc-navbar-h);
  background: var(--cc-bg);
  border-bottom: 1px solid var(--cc-border-subtle);
  display: flex;
  align-items: center;
  padding: 0 var(--cc-space-6);
  gap: var(--cc-space-4);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(0,0,0,0.85);
}

.cc-content {
  flex: 1;
  padding: var(--cc-space-6);
  max-width: var(--cc-content-max);
  width: 100%;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.cc-logo {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-5) var(--cc-space-6);
  text-decoration: none;
  border-bottom: 1px solid var(--cc-border-subtle);
}

.cc-logo-text {
  font-size: var(--cc-text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cc-text);
}

.cc-logo-accent {
  color: var(--cc-accent);
}

.cc-logo-dot {
  width: 8px;
  height: 8px;
  background: var(--cc-accent);
  border-radius: 50%;
  box-shadow: var(--cc-accent-glow);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

.cc-nav {
  flex: 1;
  padding: var(--cc-space-4) var(--cc-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-1);
  overflow-y: auto;
}

.cc-nav-section {
  margin-top: var(--cc-space-5);
  margin-bottom: var(--cc-space-2);
}

.cc-nav-label {
  font-size: var(--cc-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cc-text-muted);
  padding: 0 var(--cc-space-3);
}

.cc-nav-item {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-2) var(--cc-space-3);
  border-radius: var(--cc-radius-md);
  text-decoration: none;
  color: var(--cc-text-secondary);
  font-size: var(--cc-text-sm);
  font-weight: 500;
  transition:
    background var(--cc-dur-fast) var(--cc-ease),
    color var(--cc-dur-fast) var(--cc-ease),
    transform var(--cc-dur-fast) var(--cc-ease-spring);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.cc-nav-item:hover {
  background: var(--cc-surface-3);
  color: var(--cc-text);
  transform: translateX(2px);
}

.cc-nav-item.active {
  background: var(--cc-accent-muted);
  color: var(--cc-accent);
}

.cc-nav-item .nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.cc-nav-item.active .nav-icon {
  opacity: 1;
}

.cc-nav-badge {
  margin-left: auto;
  background: var(--cc-accent);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--cc-radius-pill);
  line-height: 1.4;
}

/* ── Navbar ──────────────────────────────────────────────── */
.cc-search-bar {
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  padding: var(--cc-space-2) var(--cc-space-4);
  transition: border-color var(--cc-dur-fast) var(--cc-ease),
              box-shadow var(--cc-dur-fast) var(--cc-ease);
}

.cc-search-bar:focus-within {
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 3px var(--cc-accent-muted);
}

.cc-search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--cc-text);
  font-family: var(--cc-font);
  font-size: var(--cc-text-sm);
}

.cc-search-bar input::placeholder {
  color: var(--cc-text-muted);
}

.cc-navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  margin-left: auto;
}

/* ── Buttons ─────────────────────────────────────────────── */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  padding: var(--cc-space-2) var(--cc-space-5);
  border-radius: var(--cc-radius-md);
  font-family: var(--cc-font);
  font-size: var(--cc-text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition:
    background var(--cc-dur-fast) var(--cc-ease),
    transform var(--cc-dur-fast) var(--cc-ease-spring),
    box-shadow var(--cc-dur-fast) var(--cc-ease);
  white-space: nowrap;
  line-height: 1;
  min-height: 40px;
}

.cc-btn:active {
  transform: scale(0.97);
}

.cc-btn-primary {
  background: var(--cc-accent);
  color: #000;
}

.cc-btn-primary:hover {
  background: var(--cc-accent-dim);
  box-shadow: var(--cc-accent-glow);
}

.cc-btn-secondary {
  background: var(--cc-surface-3);
  color: var(--cc-text);
  border: 1px solid var(--cc-border);
}

.cc-btn-secondary:hover {
  background: var(--cc-elevated);
  border-color: var(--cc-text-muted);
}

.cc-btn-ghost {
  background: transparent;
  color: var(--cc-text-secondary);
}

.cc-btn-ghost:hover {
  background: var(--cc-surface-2);
  color: var(--cc-text);
}

.cc-btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--cc-radius-md);
}

.cc-btn-lg {
  padding: var(--cc-space-3) var(--cc-space-8);
  font-size: var(--cc-text-base);
  min-height: 48px;
  border-radius: var(--cc-radius-lg);
}

/* ── Cards ───────────────────────────────────────────────── */
.cc-card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border-subtle);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  transition: transform var(--cc-dur-base) var(--cc-ease),
              box-shadow var(--cc-dur-base) var(--cc-ease),
              border-color var(--cc-dur-base) var(--cc-ease);
}

.cc-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--cc-shadow-lg);
  border-color: var(--cc-border);
}

/* ── Media Poster Card ───────────────────────────────────── */
.cc-poster-card {
  position: relative;
  cursor: pointer;
  border-radius: var(--cc-radius-md);
  overflow: hidden;
  background: var(--cc-surface-2);
  aspect-ratio: 2/3;
  transition: transform var(--cc-dur-base) var(--cc-ease-spring),
              box-shadow var(--cc-dur-base) var(--cc-ease);
}

.cc-poster-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), var(--cc-accent-glow);
  z-index: 2;
}

.cc-poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--cc-dur-slow) var(--cc-ease);
}

.cc-poster-card:hover img {
  transform: scale(1.05);
}

.cc-poster-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.4) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--cc-dur-base) var(--cc-ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--cc-space-3);
}

.cc-poster-card:hover .cc-poster-overlay {
  opacity: 1;
}

.cc-poster-title {
  font-size: var(--cc-text-sm);
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  margin-bottom: var(--cc-space-1);
}

.cc-poster-meta {
  font-size: var(--cc-text-xs);
  color: rgba(255,255,255,0.7);
}

.cc-poster-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 48px;
  height: 48px;
  background: var(--cc-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--cc-dur-fast) var(--cc-ease),
              transform var(--cc-dur-fast) var(--cc-ease-spring);
}

.cc-poster-card:hover .cc-poster-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Progress bar on poster */
.cc-poster-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.2);
}

.cc-poster-progress-fill {
  height: 100%;
  background: var(--cc-accent);
  transition: width 0.3s var(--cc-ease);
}

/* ── Template-compatible aliases ─────────────────────────── */
.cc-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--cc-dur-slow) var(--cc-ease);
}

.cc-poster-card:hover .cc-poster-img {
  transform: scale(1.05);
}

.cc-poster-skeleton {
  background: linear-gradient(
    90deg,
    var(--cc-surface-2) 25%,
    var(--cc-surface-3) 50%,
    var(--cc-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--cc-radius-md);
  aspect-ratio: 2/3;
}

.cc-skeleton-text {
  display: block;
  height: 1rem;
  background: var(--cc-surface-3);
  border-radius: var(--cc-radius-sm);
  margin-top: var(--cc-space-3);
  animation: shimmer 1.5s infinite;
}

.cc-poster-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--cc-space-3);
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-1);
}

.cc-poster-info .cc-poster-title {
  font-size: var(--cc-text-sm);
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.cc-poster-year {
  font-size: var(--cc-text-xs);
  color: rgba(255,255,255,0.6);
}

.cc-progress-bar-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.2);
}

.cc-progress-bar {
  height: 100%;
  background: var(--cc-accent);
  transition: width 0.3s var(--cc-ease);
}

/* ── Home page layout ────────────────────────────────────── */
.cc-page-home {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-10);
  position: relative;
}

.cc-media-container {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-10);
}

.cc-hero-placeholder {
  position: relative;
  width: 100%;
  height: min(560px, 60vw);
  border-radius: var(--cc-radius-xl);
  overflow: hidden;
  background: var(--cc-surface-2);
  display: flex;
  align-items: flex-end;
  padding: var(--cc-space-10) var(--cc-space-12);
  max-width: 560px;
}

.cc-hero-placeholder .cc-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.cc-hero-placeholder .cc-hero-title {
  font-size: clamp(var(--cc-text-2xl), 4vw, var(--cc-text-4xl));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--cc-space-4);
}

.cc-hero-placeholder .cc-hero-overview {
  font-size: var(--cc-text-sm);
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}

/* ── Media Row (Netflix-style) ───────────────────────────── */
.cc-media-row {
  margin-bottom: var(--cc-space-10);
}

.cc-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cc-space-4);
  padding: 0 var(--cc-space-1);
}

.cc-row-title {
  font-size: var(--cc-text-lg);
  font-weight: 700;
  color: var(--cc-text);
  letter-spacing: -0.01em;
}

.cc-row-see-all {
  font-size: var(--cc-text-sm);
  color: var(--cc-accent);
  text-decoration: none;
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--cc-dur-fast) var(--cc-ease);
}

.cc-media-row:hover .cc-row-see-all {
  opacity: 1;
}

.cc-row-scroll {
  display: flex;
  gap: var(--cc-space-3);
  overflow-x: auto;
  padding-bottom: var(--cc-space-3);
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.cc-row-scroll::-webkit-scrollbar { display: none; }

.cc-row-scroll .cc-poster-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .cc-row-scroll .cc-poster-card { flex: 0 0 180px; }
}

@media (min-width: 1200px) {
  .cc-row-scroll .cc-poster-card { flex: 0 0 200px; }
}

/* ── Hero Banner ─────────────────────────────────────────── */
.cc-hero {
  position: relative;
  width: 100%;
  height: min(560px, 60vw);
  border-radius: var(--cc-radius-xl);
  overflow: hidden;
  margin-bottom: var(--cc-space-10);
  background: var(--cc-surface-2);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.cc-hero-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.6) 50%,
    transparent 100%
  ),
  linear-gradient(
    to top,
    rgba(0,0,0,0.7) 0%,
    transparent 50%
  );
}

.cc-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--cc-space-10) var(--cc-space-12);
  max-width: 560px;
}

.cc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  background: var(--cc-accent-muted);
  border: 1px solid rgba(0, 230, 118, 0.3);
  color: var(--cc-accent);
  font-size: var(--cc-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--cc-space-1) var(--cc-space-3);
  border-radius: var(--cc-radius-pill);
  margin-bottom: var(--cc-space-4);
}

.cc-hero-title {
  font-size: clamp(var(--cc-text-2xl), 4vw, var(--cc-text-4xl));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--cc-space-4);
}

.cc-hero-overview {
  font-size: var(--cc-text-sm);
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: var(--cc-space-6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cc-hero-actions {
  display: flex;
  gap: var(--cc-space-3);
}

/* ── Hero Carousel Wrapper ──────────────────────── */
.cc-hero-carousel-wrap {
  position: relative;
  width: 100%;
  height: min(560px, 60vw);
  border-radius: var(--cc-radius-xl);
  overflow: hidden;
  margin-bottom: var(--cc-space-10);
}

.cc-hero-carousel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.cc-hero-carousel.cc-hero-active {
  opacity: 1;
  pointer-events: auto;
}
.cc-hero-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.cc-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background var(--cc-dur-fast) var(--cc-ease),
              transform var(--cc-dur-fast) var(--cc-ease);
  padding: 0;
  outline: none;
}
.cc-hero-dot:hover {
  background: rgba(255,255,255,0.6);
}
.cc-hero-dot.cc-hero-dot-active {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  transform: scale(1.3);
}

/* ── Forms ───────────────────────────────────────────────── */
.cc-field {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
}

.cc-label {
  font-size: var(--cc-text-sm);
  font-weight: 600;
  color: var(--cc-text-secondary);
}

.cc-input {
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  padding: var(--cc-space-3) var(--cc-space-4);
  color: var(--cc-text);
  font-family: var(--cc-font);
  font-size: var(--cc-text-base);
  outline: none;
  transition: border-color var(--cc-dur-fast) var(--cc-ease),
              box-shadow var(--cc-dur-fast) var(--cc-ease);
  width: 100%;
}

.cc-input:focus {
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 3px var(--cc-accent-muted);
}

.cc-input::placeholder {
  color: var(--cc-text-muted);
}

.cc-input.error {
  border-color: var(--cc-error);
}

.cc-form-error {
  font-size: var(--cc-text-sm);
  color: var(--cc-error);
}

/* ── Auth Pages ──────────────────────────────────────────── */
.cc-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-bg);
  padding: var(--cc-space-6);
  position: relative;
  overflow: hidden;
}

.cc-auth-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 50%, rgba(0,230,118,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 20%, rgba(0,230,118,0.03) 0%, transparent 60%);
}

.cc-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-xl);
  padding: var(--cc-space-10) var(--cc-space-8);
  position: relative;
  z-index: 1;
  box-shadow: var(--cc-shadow-lg);
}

.cc-auth-logo {
  text-align: center;
  margin-bottom: var(--cc-space-8);
}

.cc-auth-logo-text {
  font-size: var(--cc-text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cc-text);
}

.cc-auth-logo-text span {
  color: var(--cc-accent);
}

.cc-auth-title {
  font-size: var(--cc-text-xl);
  font-weight: 700;
  color: var(--cc-text);
  margin-bottom: var(--cc-space-1);
}

.cc-auth-subtitle {
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
  margin-bottom: var(--cc-space-8);
}

.cc-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-5);
}

/* ── Setup Wizard ────────────────────────────────────────── */
.cc-setup-steps {
  display: flex;
  gap: var(--cc-space-2);
  margin-bottom: var(--cc-space-8);
}

.cc-setup-step {
  flex: 1;
  height: 4px;
  background: var(--cc-border);
  border-radius: var(--cc-radius-pill);
  overflow: hidden;
}

.cc-setup-step.done {
  background: var(--cc-accent);
}

.cc-setup-step.active {
  background: linear-gradient(to right, var(--cc-accent), var(--cc-surface-3));
}

/* ── Admin Dashboard ─────────────────────────────────────── */
.cc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--cc-space-4);
  margin-bottom: var(--cc-space-8);
}

.cc-stat-card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border-subtle);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  transition: border-color var(--cc-dur-fast) var(--cc-ease);
}

.cc-stat-card:hover {
  border-color: var(--cc-accent);
}

.cc-stat-label {
  font-size: var(--cc-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cc-text-muted);
}

.cc-stat-value {
  font-size: var(--cc-text-3xl);
  font-weight: 800;
  color: var(--cc-text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.cc-stat-change {
  font-size: var(--cc-text-xs);
  color: var(--cc-success);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Alert / Toast ───────────────────────────────────────── */
.cc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--cc-space-3);
  padding: var(--cc-space-4) var(--cc-space-5);
  border-radius: var(--cc-radius-md);
  font-size: var(--cc-text-sm);
  font-weight: 500;
  border: 1px solid transparent;
}

.cc-alert-error {
  background: rgba(255,77,77,0.1);
  border-color: rgba(255,77,77,0.3);
  color: #ff4d4d;
}

.cc-alert-success {
  background: var(--cc-accent-muted);
  border-color: rgba(0,230,118,0.3);
  color: var(--cc-accent);
}

.cc-alert-info {
  background: rgba(41,121,255,0.1);
  border-color: rgba(41,121,255,0.3);
  color: #2979ff;
}

/* ── Toast notifications ─────────────────────────────────── */
#cc-toasts {
  position: fixed;
  bottom: var(--cc-space-6);
  right: var(--cc-space-6);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  pointer-events: none;
}

.cc-toast {
  background: var(--cc-surface-3);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-4) var(--cc-space-5);
  min-width: 280px;
  max-width: 380px;
  box-shadow: var(--cc-shadow-lg);
  pointer-events: all;
  animation: toast-in var(--cc-dur-base) var(--cc-ease-spring);
  font-size: var(--cc-text-sm);
  color: var(--cc-text);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(100%) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── Loading / Skeleton ──────────────────────────────────── */
.cc-skeleton {
  background: linear-gradient(
    90deg,
    var(--cc-surface-2) 25%,
    var(--cc-surface-3) 50%,
    var(--cc-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--cc-radius-md);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Badges ──────────────────────────────────────────────── */
.cc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--cc-radius-pill);
  font-size: var(--cc-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cc-badge-accent    { background: var(--cc-accent-muted); color: var(--cc-accent); }
.cc-badge-muted     { background: var(--cc-surface-3); color: var(--cc-text-muted); }
.cc-badge-error     { background: rgba(255,77,77,0.15); color: var(--cc-error); }

/* ── Typography helpers ──────────────────────────────────── */
.cc-heading-1 { font-size: var(--cc-text-4xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.cc-heading-2 { font-size: var(--cc-text-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.cc-heading-3 { font-size: var(--cc-text-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.cc-heading-4 { font-size: var(--cc-text-xl);  font-weight: 600; line-height: 1.4; }
.cc-text-muted { color: var(--cc-text-muted); }
.cc-text-secondary { color: var(--cc-text-secondary); }
.cc-text-accent { color: var(--cc-accent); }

/* ── Utilities ───────────────────────────────────────────── */
.cc-flex     { display: flex; }
.cc-flex-col { display: flex; flex-direction: column; }
.cc-items-center { align-items: center; }
.cc-justify-between { justify-content: space-between; }
.cc-gap-2    { gap: var(--cc-space-2); }
.cc-gap-4    { gap: var(--cc-space-4); }
.cc-gap-6    { gap: var(--cc-space-6); }
.cc-w-full   { width: 100%; }
.cc-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-only     { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ── HTMX loading states ─────────────────────────────────── */
.htmx-request .cc-btn-primary {
  opacity: 0.7;
  pointer-events: none;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity var(--cc-dur-fast);
}

.htmx-request .htmx-indicator {
  opacity: 1;
}

/* ── Responsive: Mobile ──────────────────────────────────── */
@media (max-width: 768px) {
  .cc-sidebar {
    transform: translateX(-100%);
  }

  .cc-sidebar.open {
    transform: translateX(0);
  }

  .cc-main {
    margin-left: 0;
  }

  .cc-content {
    padding: var(--cc-space-4);
  }

  .cc-hero {
    height: 280px;
    border-radius: var(--cc-radius-lg);
  }

  .cc-hero-content {
    padding: var(--cc-space-5) var(--cc-space-5);
  }

  .cc-hero-title {
    font-size: var(--cc-text-xl);
  }
}

/* ── Video Player ────────────────────────────────────────── */
.cc-player-container {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-player-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cc-player-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  padding: var(--cc-space-6) var(--cc-space-8);
  transform: translateY(100%);
  transition: transform var(--cc-dur-base) var(--cc-ease);
}

.cc-player-container:hover .cc-player-controls,
.cc-player-container.show-controls .cc-player-controls {
  transform: translateY(0);
}

.cc-player-progress {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--cc-radius-pill);
  cursor: pointer;
  margin-bottom: var(--cc-space-4);
  transition: height var(--cc-dur-fast) var(--cc-ease);
}

.cc-player-progress:hover {
  height: 6px;
}

.cc-player-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--cc-accent);
  border-radius: var(--cc-radius-pill);
  pointer-events: none;
}

.cc-player-progress-thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--cc-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--cc-dur-fast) var(--cc-ease-spring);
  box-shadow: var(--cc-accent-glow);
  pointer-events: none;
}

.cc-player-progress:hover .cc-player-progress-thumb {
  transform: translate(-50%, -50%) scale(1);
}

/* ── Divider ─────────────────────────────────────────────── */
.cc-divider {
  height: 1px;
  background: var(--cc-border-subtle);
  margin: var(--cc-space-4) 0;
}

/* ── Focus styles (accessibility) ───────────────────────── */
:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

/* ── Scrollable row fade edges ───────────────────────────── */
.cc-row-wrapper {
  position: relative;
}

.cc-row-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(to left, var(--cc-bg), transparent);
  pointer-events: none;
}

/* ── Item detail page ────────────────────────────────────── */
.cc-item-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  border-radius: var(--cc-radius-xl);
  overflow: hidden;
  margin-bottom: var(--cc-space-8);
}

.cc-item-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
}

.cc-item-info {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--cc-space-6);
  padding: var(--cc-space-8);
  background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
  width: 100%;
}

.cc-item-poster {
  width: 160px;
  flex-shrink: 0;
  border-radius: var(--cc-radius-md);
  overflow: hidden;
  box-shadow: var(--cc-shadow-lg);
}

.cc-item-poster img {
  width: 100%;
  height: auto;
  display: block;
}

.cc-item-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--cc-space-3);
}

/* ── Selects & Dropdowns ─────────────────────────────────── */
.cc-select {
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  padding: var(--cc-space-2) var(--cc-space-4);
  color: var(--cc-text);
  font-family: var(--cc-font);
  font-size: var(--cc-text-sm);
  outline: none;
  cursor: pointer;
  appearance: none;
}

.cc-select:focus {
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 3px var(--cc-accent-muted);
}

/* ── Page transitions ────────────────────────────────────── */
.cc-page-enter {
  animation: page-enter var(--cc-dur-base) var(--cc-ease) forwards;
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sidebar user section ────────────────────────────────── */
.cc-sidebar-user {
  padding: var(--cc-space-4) var(--cc-space-5);
  border-top: 1px solid var(--cc-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  cursor: pointer;
  transition: background var(--cc-dur-fast);
  border-radius: 0;
}

.cc-sidebar-user:hover {
  background: var(--cc-surface-2);
}

.cc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cc-accent-muted);
  border: 2px solid var(--cc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cc-text-sm);
  font-weight: 700;
  color: var(--cc-accent);
  flex-shrink: 0;
  overflow: hidden;
}

.cc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-user-name {
  font-size: var(--cc-text-sm);
  font-weight: 600;
  color: var(--cc-text);
}

.cc-user-role {
  font-size: var(--cc-text-xs);
  color: var(--cc-text-muted);
}

/* ── Active stream indicator ─────────────────────────────── */
.cc-stream-dot {
  width: 6px;
  height: 6px;
  background: var(--cc-accent);
  border-radius: 50%;
  animation: stream-pulse 1s ease-in-out infinite;
}

@keyframes stream-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Auth / Setup Pages (AMOLED True Black + Neon Green) ── */
body.cc-auth-page {
  background: #000000;
  color: #ffffff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cc-space-6);
  position: relative;
  overflow: hidden;
  font-family: var(--cc-font);
}

.cc-auth-bg {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 230, 118, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: 0;
  pointer-events: none;
}

.cc-auth-card {
  position: relative;
  z-index: 10;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--cc-radius-2xl);
  padding: var(--cc-space-8);
  width: 100%;
  max-width: 440px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 230, 118, 0.08);
  animation: auth-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cc-auth-header {
  text-align: center;
  margin-bottom: var(--cc-space-6);
}

.cc-auth-header p {
  color: var(--cc-text-muted);
  font-size: var(--cc-text-sm);
  margin-top: var(--cc-space-2);
}

.cc-logo {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin: 0;
  display: inline-block;
}

.cc-logo-accent {
  color: #00e676;
  text-shadow: 0 0 16px rgba(0, 230, 118, 0.4);
}

.cc-logo-dot {
  color: #00e676;
}

.cc-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4);
}

.cc-auth-footer {
  margin-top: var(--cc-space-6);
  padding-top: var(--cc-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: var(--cc-text-xs);
  color: var(--cc-text-muted);
}

.cc-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
}

.cc-form-group label {
  font-size: var(--cc-text-xs);
  font-weight: 600;
  color: var(--cc-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cc-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--cc-radius-md);
  padding: 12px 16px;
  color: #ffffff;
  font-family: var(--cc-font);
  font-size: var(--cc-text-sm);
  transition: all 0.2s ease;
  outline: none;
}

.cc-input:focus {
  border-color: #00e676;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15);
}

.cc-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
  cursor: pointer;
  user-select: none;
}

.cc-checkbox {
  accent-color: #00e676;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.cc-alert-error {
  background: rgba(255, 77, 77, 0.15);
  border: 1px solid rgba(255, 77, 77, 0.3);
  color: #ff4d4d;
  padding: 12px 16px;
  border-radius: var(--cc-radius-md);
  font-size: var(--cc-text-sm);
  margin-bottom: var(--cc-space-4);
}

/* Setup Wizard Steps */
.cc-setup-steps {
  display: flex;
  justify-content: center;
  gap: var(--cc-space-2);
  margin-bottom: var(--cc-space-6);
}

.cc-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.cc-step-dot.active {
  background: #00e676;
  box-shadow: 0 0 8px #00e676;
  transform: scale(1.3);
}


/* ── Utility: justify-center ─────────────────────────────────── */
.cc-justify-center { justify-content: center; }

/* ── Library page layout ─────────────────────────────────────── */
.cc-page-library { padding: 0; }
.cc-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.cc-library-title-group { display: flex; align-items: center; gap: 0.75rem; }
.cc-library-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── Filter bar ──────────────────────────────────────────────── */
.cc-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.cc-filter-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cc-pill {
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--cc-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.cc-pill:hover { border-color: rgba(0,230,118,0.3); color:#fff; background:rgba(0,230,118,0.06); }
.cc-pill-active, .cc-pill.active { background:rgba(0,230,118,0.15); border-color:var(--cc-accent); color:var(--cc-accent); }
.cc-select-sm { font-size:0.8rem; padding:6px 10px; height:auto; }
.cc-filter-controls { flex-shrink: 0; }

/* ── Media grid ─────────────────────────────────────────────── */
.cc-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
}
@media (min-width: 1280px) { .cc-media-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); } }
@media (max-width: 600px) { .cc-media-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.75rem; } }

/* ── Carousel ────────────────────────────────────────── */
.cc-carousel {
  position: relative;
}
.cc-carousel-track {
  display: flex;
  gap: var(--cc-space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: var(--cc-space-1) 0 var(--cc-space-4);
  scroll-behavior: smooth;
}
.cc-carousel-track::-webkit-scrollbar { display: none; }
.cc-carousel-track .cc-poster-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .cc-carousel-track .cc-poster-card { flex: 0 0 180px; }
}
@media (min-width: 1200px) {
  .cc-carousel-track .cc-poster-card { flex: 0 0 200px; }
}
.cc-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--cc-dur-fast) var(--cc-ease),
              background var(--cc-dur-fast) var(--cc-ease);
  pointer-events: none;
}
.cc-carousel:hover .cc-carousel-arrow,
.cc-carousel:focus-within .cc-carousel-arrow {
  opacity: 1;
  pointer-events: auto;
}
.cc-carousel-arrow:hover {
  background: rgba(0,230,118,0.25);
  border-color: var(--cc-accent);
}
.cc-carousel-arrow--prev {
  left: -12px;
}
.cc-carousel-arrow--next {
  right: -12px;
}
@media (max-width: 768px) {
  .cc-carousel-arrow {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  .cc-carousel-arrow--prev { left: -8px; }
  .cc-carousel-arrow--next { right: -8px; }
}

/* ── Poster rating badge ──────────────────────────────────── */
.cc-poster-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(0,230,118,0.35);
  color: var(--cc-accent);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  backdrop-filter: blur(4px);
}

/* ── Search hero ─────────────────────────────────────────────── */
.cc-page-search { padding: 0; }
.cc-search-hero { text-align: center; margin-bottom: 2.5rem; }
.cc-search-hero-input { position: relative; max-width: 680px; margin: 0 auto 1.25rem; }
.cc-search-tags { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.cc-search-tags a { text-decoration: none; cursor: pointer; }

/* ── Empty state ─────────────────────────────────────────────── */
.cc-empty-state { text-align: center; padding: 3.5rem 2rem; }
.cc-empty-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }

/* ── Admin data table ────────────────────────────────────────── */
.cc-table { width: 100%; border-collapse: collapse; text-align: left; }
.cc-table th { padding: 0.875rem 1.25rem; font-size: var(--cc-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc-text-muted); background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.07); font-weight: 600; }
.cc-table td { padding: 1rem 1.25rem; font-size: 0.875rem; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--cc-text-secondary); vertical-align: middle; }
.cc-table tr:last-child td { border-bottom: none; }
.cc-table tr:hover td { background: rgba(255,255,255,0.02); }
.cc-table-card { padding: 0; overflow: hidden; }

/* ── Page containers ─────────────────────────────────────────── */
.cc-page-admin-libraries, .cc-page-settings, .cc-page-admin-users,
.cc-page-admin-activity, .cc-page-admin-logs, .cc-page-admin-transcoding,
.cc-page-collections, .cc-page-downloads, .cc-page-livetv,
.cc-page-item, .cc-page-watch { padding: 0; }

/* ── Settings layout ─────────────────────────────────────────── */
.cc-settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; }
@media (max-width: 768px) {
  .cc-settings-layout { grid-template-columns: 1fr; }
  .cc-library-header { flex-direction: column; align-items: flex-start; }
  .cc-filter-bar { flex-direction: column; align-items: flex-start; }
}

/* ── Checkbox & form ─────────────────────────────────────────── */
.cc-checkbox-label { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; font-size: var(--cc-text-sm); color: var(--cc-text-secondary); line-height: 1.5; }
.cc-checkbox { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--cc-accent); flex-shrink: 0; margin-top: 2px; }
.cc-form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.cc-form-group label { font-size: var(--cc-text-sm); font-weight: 500; color: var(--cc-text-secondary); }

/* ── Language switcher (navbar) ─────────────────────────────── */
.cc-lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  color: var(--cc-text-secondary);
  font-family: var(--cc-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 7px 26px 7px 30px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--cc-dur-fast) var(--cc-ease);
}
.cc-lang-select:hover, .cc-lang-select:focus { border-color: var(--cc-accent); }
.cc-lang-select option { background: var(--cc-bg); color: var(--cc-text); }

/* ── Search results dropdown ─────────────────────────────────── */
.cc-search-results-panel {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  overflow: hidden;
}
.cc-search-results-list { max-height: 480px; overflow-y: auto; padding: 6px; }
.cc-search-result-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--cc-radius-md);
  text-decoration: none;
  transition: background var(--cc-dur-fast) var(--cc-ease);
}
.cc-search-result-item:hover { background: rgba(255,255,255,0.05); }
.cc-search-result-poster {
  width: 42px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}
.cc-search-result-poster--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-search-result-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cc-search-result-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-search-result-meta { font-size: 0.75rem; color: var(--cc-text-muted); }
.cc-search-results-footer {
  display: block;
  padding: 0.625rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cc-accent);
  text-decoration: none;
  text-align: center;
}
.cc-search-results-footer:hover { background: rgba(0,230,118,0.06); }
.cc-search-results-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--cc-text-muted);
}

/* ── Auth language switcher ──────────────────────────────────── */
.cc-auth-lang {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-top: var(--cc-space-4);
}
.cc-auth-lang-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cc-text-muted);
  text-decoration: none;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-pill);
  padding: 4px 10px;
  transition: all var(--cc-dur-fast) var(--cc-ease);
}
.cc-auth-lang-link:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.cc-auth-lang-link.active {
  color: var(--cc-accent);
  border-color: var(--cc-accent);
  background: rgba(0,230,118,0.08);
}