/*
 * CW-Rev CRM — Design System
 * Identidade Visual: Cardápio Web
 * Paleta: Purple (#7c3aed), Deep Purple (#4c1d95), Orange accents (#f59e0b)
 * Background: Soft gradient lavender
 */

/* =============================================
   Google Fonts
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =============================================
   CSS Variables / Design Tokens
   ============================================= */
:root {
  /* Primary colors inspired by Cardápio Web */
  --cw-purple-50: #f5f3ff;
  --cw-purple-100: #ede9fe;
  --cw-purple-200: #ddd6fe;
  --cw-purple-300: #c4b5fd;
  --cw-purple-400: #a78bfa;
  --cw-purple-500: #8b5cf6;
  --cw-purple-600: #7c3aed;
  --cw-purple-700: #6d28d9;
  --cw-purple-800: #5b21b6;
  --cw-purple-900: #4c1d95;

  /* Accent */
  --cw-orange: #f59e0b;
  --cw-orange-light: #fbbf24;
  --cw-red: #ef4444;
  --cw-green: #10b981;
  --cw-blue: #3b82f6;

  /* Neutrals */
  --cw-gray-50: #f9fafb;
  --cw-gray-100: #f3f4f6;
  --cw-gray-200: #e5e7eb;
  --cw-gray-300: #d1d5db;
  --cw-gray-400: #9ca3af;
  --cw-gray-500: #6b7280;
  --cw-gray-600: #4b5563;
  --cw-gray-700: #374151;
  --cw-gray-800: #1f2937;
  --cw-gray-900: #111827;

  /* Backgrounds */
  --cw-bg-primary: #f8f6ff;
  --cw-bg-card: #ffffff;
  --cw-bg-sidebar: #ffffff;
  --cw-bg-header: #ffffff;

  /* Shadows */
  --cw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --cw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --cw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --cw-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

  /* Border radius */
  --cw-radius-sm: 6px;
  --cw-radius-md: 10px;
  --cw-radius-lg: 16px;
  --cw-radius-xl: 24px;
  --cw-radius-full: 9999px;

  /* Transitions */
  --cw-transition: all 0.2s ease;
  --cw-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Sidebar */
  --sidebar-width: 250px;
  --sidebar-collapsed: 70px;
  --header-height: 60px;
}

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

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--cw-gray-800);
  background: var(--cw-bg-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--cw-purple-600);
  text-decoration: none;
  transition: var(--cw-transition);
}

a:hover {
  color: var(--cw-purple-800);
}

/* =============================================
   AUTH LAYOUT — Login / Register
   ============================================= */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 30%, #ddd6fe 60%, #c4b5fd 100%);
  position: relative;
  overflow: hidden;
}

.auth-page::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 70%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
  animation: authGlow 8s ease-in-out infinite alternate;
}

.auth-page::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 50%;
  height: 150%;
  background: radial-gradient(ellipse, rgba(245, 158, 11, 0.06) 0%, transparent 60%);
  animation: authGlow 10s ease-in-out infinite alternate-reverse;
}

@keyframes authGlow {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -15px) scale(1.05); }
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: var(--cw-radius-xl);
  box-shadow: var(--cw-shadow-xl), 0 0 60px rgba(124, 58, 237, 0.08);
  padding: 48px 40px;
  animation: cardSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.auth-logo img {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.15));
}

.auth-title {
  text-align: center;
  margin-bottom: 8px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cw-gray-900);
  letter-spacing: -0.02em;
}

.auth-subtitle {
  text-align: center;
  margin-bottom: 32px;
  font-size: 0.93rem;
  color: var(--cw-gray-500);
  font-weight: 400;
}

/* Form elements */
.auth-form .field {
  margin-bottom: 20px;
}

.auth-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cw-gray-700);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  background: var(--cw-gray-50);
  transition: var(--cw-transition);
  outline: none;
}

.password-input-wrap {
  position: relative;
}
.password-input-wrap input {
  padding-right: 46px !important;
  width: 100%;
}
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cw-gray-400);
  display: flex;
  align-items: center;
  padding: 4px;
  transition: color .15s;
}
.password-toggle:hover { color: var(--cw-gray-700); }

.auth-form input:focus {
  border-color: var(--cw-purple-400);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

.auth-form input::placeholder {
  color: var(--cw-gray-400);
}

.auth-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 0.85rem;
}

.auth-remember label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  color: var(--cw-gray-600);
  margin-bottom: 0;
}

.auth-remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cw-purple-600);
  cursor: pointer;
}

.auth-remember a {
  font-size: 0.85rem;
  color: var(--cw-purple-600);
  font-weight: 500;
}

.auth-remember a:hover {
  color: var(--cw-purple-800);
  text-decoration: underline;
}

/* Submit button */
.btn-auth-submit {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--cw-purple-600) 0%, var(--cw-purple-700) 100%);
  color: #fff;
  border: none;
  border-radius: var(--cw-radius-md);
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--cw-transition);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}

.btn-auth-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s;
}

.btn-auth-submit:hover {
  background: linear-gradient(135deg, var(--cw-purple-700) 0%, var(--cw-purple-800) 100%);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
}

.btn-auth-submit:hover::before {
  left: 100%;
}

.btn-auth-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

/* OAuth / Divider */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 28px 0;
  gap: 16px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cw-gray-200);
}

.auth-divider span {
  font-size: 0.82rem;
  color: var(--cw-gray-400);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-google {
  width: 100%;
  padding: 12px 24px;
  background: #fff;
  color: var(--cw-gray-700);
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--cw-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.btn-google:hover {
  border-color: var(--cw-gray-300);
  background: var(--cw-gray-50);
  box-shadow: var(--cw-shadow-md);
  transform: translateY(-1px);
}

.btn-google:active {
  transform: translateY(0);
}

.btn-google svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-footer {
  text-align: center;
  margin-top: 28px;
  font-size: 0.88rem;
  color: var(--cw-gray-500);
}

.auth-footer a {
  color: var(--cw-purple-600);
  font-weight: 600;
}

.auth-footer a:hover {
  color: var(--cw-purple-800);
  text-decoration: underline;
}

/* Flash messages */
.auth-flash {
  padding: 12px 16px;
  border-radius: var(--cw-radius-md);
  margin-bottom: 20px;
  font-size: 0.88rem;
  font-weight: 500;
  animation: flashFade 0.4s ease;
}

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

.auth-flash.notice {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.auth-flash.alert {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* =============================================
   APP LAYOUT — Sidebar + Header + Content
   ============================================= */
.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--cw-bg-primary);
}

/* ═══════════════════════════════════════
   SIDEBAR — Light Elegant Theme
═══════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-width);
  background: #fff;
  border-right: 1px solid #e9eaf0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: var(--cw-transition-slow);
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.06);
}

/* ── Logo ── */
.sidebar-logo {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f0f0f5;
  min-height: 72px;
  background: #faf8ff;
}
.sidebar-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* ── User card ── */
.sidebar-user {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #f0f0f5;
  background: #faf8ff;
}
.sidebar-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 2px #ede9fe, 0 2px 8px rgba(124, 58, 237, 0.18);
}
.sidebar-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: var(--cw-radius-full);
}
.sidebar-user-avatar:hover .sidebar-avatar-overlay { opacity: 1; }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--cw-radius-sm);
  color: #fff;
  margin-top: 4px;
}

/* ── Nav scroll area ── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px 8px;
  scrollbar-width: thin;
  scrollbar-color: #e5e7eb transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 2px;
}

/* ── Nav Groups (collapsible) ── */
.nav-group { margin-bottom: 4px; }

.nav-group-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px 5px;
  background: none;
  border: none;
  cursor: pointer;
  gap: 6px;
  border-radius: 7px;
  transition: background 0.15s;
}
.nav-group-trigger:hover {
  background: #f5f3ff;
}
.nav-group-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #a8a8b8;
  flex: 1;
  text-align: left;
  transition: color 0.15s;
}
.nav-group-trigger:hover .nav-group-label {
  color: #7c3aed;
}
.nav-chevron {
  color: #c4c4d4;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.15s;
}
.nav-group-trigger:hover .nav-chevron {
  color: #7c3aed;
}
.nav-group.collapsed .nav-chevron {
  transform: rotate(-90deg);
}

/* Collapse animation */
.nav-group-body {
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  transition:
    max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
}
.nav-group.collapsed .nav-group-body {
  max-height: 0;
  opacity: 0;
}

/* ── Nav Items ── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 14px;
  border-radius: 9px;
  color: #4b5563;
  font-size: 0.92rem;
  font-weight: 500;
  transition: all 0.15s ease;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  text-decoration: none;
  position: relative;
}
.nav-item:hover {
  background: #f5f3ff;
  color: #6d28d9;
  border-left-color: #c4b5fd;
}
.nav-item.active {
  background: #ede9fe;
  color: #6d28d9;
  font-weight: 700;
  border-left-color: #7c3aed;
}
.nav-item.active::after { display: none; }

.nav-item-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #9ca3af;
  transition: color 0.15s;
}
.nav-item:hover .nav-item-icon { color: #7c3aed; }
.nav-item.active .nav-item-icon { color: #7c3aed; }

.nav-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Badge ── */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #7c3aed;
  color: #fff;
  font-size: 0.63rem;
  font-weight: 700;
  border-radius: 9px;
  flex-shrink: 0;
}
.nav-badge.ct-badge-pulse {
  animation: navPulse 2s ease-in-out infinite;
}
@keyframes navPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.3); }
  50%       { box-shadow: 0 0 0 5px rgba(124, 58, 237, 0); }
}

/* ── ct-nav-highlight (pending contract) ── */
.ct-nav-highlight {
  background: #fffbeb !important;
  border-left-color: #f59e0b !important;
  color: #92400e !important;
}
.ct-nav-highlight:hover {
  background: #fef3c7 !important;
}

/* ── Footer ── */
.sidebar-footer {
  padding: 10px;
  border-top: 1px solid #f0f0f5;
}
.sidebar-footer a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 9px;
  color: #9ca3af;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.sidebar-footer a:hover {
  background: #fef2f2;
  color: #ef4444;
  border-left-color: #ef4444;
}

/* =============================================
   Welcome Splash — login animation
   100% CSS-driven. No JavaScript needed.
   ============================================= */
.ws-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Auto-dismiss: fades out at ~6s, then becomes non-interactive */
.ws-overlay-autodismiss {
  animation: wsOverlayOut 0.9s ease forwards;
  animation-delay: 6s;
}
.ws-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 65% at 50% 45%, #1c0945 0%, #080210 65%);
}
.ws-bg::before,
.ws-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.ws-bg::before {
  width: 520px; height: 520px;
  top: -100px; left: -120px;
  background: rgba(109, 40, 217, 0.2);
}
.ws-bg::after {
  width: 400px; height: 400px;
  bottom: -80px; right: -100px;
  background: rgba(139, 92, 246, 0.14);
}
.ws-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* Hero: the container that spins+shrinks */
.ws-hero {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
/* Auto-start spin animation via CSS class */
.ws-hero-animate {
  animation: wsHeroSpin 2.3s linear forwards;
}

/* Logo fills the hero */
.ws-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
}
/* CSS-driven logo fade-out at 2.4s */
.ws-logo-fade {
  animation: wsLogoOut 0.4s ease forwards;
  animation-delay: 2.4s;
}

/* User avatar: hidden initially, fades in at 2.4s */
.ws-user-avatar {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #6d28d9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3.8rem;
  font-weight: 800;
  overflow: hidden;
  border: 3px solid rgba(167, 139, 250, 0.7);
  opacity: 0;
}
/* CSS-driven avatar fade-in at 2.4s */
.ws-avatar-fade {
  animation: wsAvatarIn 0.4s ease forwards;
  animation-delay: 2.4s;
}
.ws-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Greeting */
.ws-greeting {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  text-align: center;
  min-height: 3rem;
  text-shadow:
    0 2px 30px rgba(167, 139, 250, 0.65),
    0 0 70px rgba(139, 92, 246, 0.35);
  opacity: 0;
}
/* CSS-driven greeting fade-in at 2.9s */
.ws-greeting-fade {
  animation: wsGreetIn 0.35s ease forwards;
  animation-delay: 2.9s;
}

/* Typewriter cursor */
.ws-cur {
  color: #a78bfa;
  font-weight: 200;
  animation: wsBlink 0.6s step-end infinite;
}
@keyframes wsBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Keyframes ── */

/* Logo fade-out */
@keyframes wsLogoOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
/* Avatar fade-in */
@keyframes wsAvatarIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Greeting fade-in */
@keyframes wsGreetIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/*
  Hero animation phases (linear so keyframe % = time %):
  0–20%  : pop in with slight bounce   (0–0.46s of 2.3s)
  20–32% : hold at full size            (0.46–0.74s)
  32–70% : spin fast + shrink quickly   (0.74–1.61s = 0.87s)
  70–100%: decelerate to final size     (1.61–2.3s  = 0.69s)
  Final:   scale(0.28) ≈ 50px, rotate(360deg)
*/
@keyframes wsHeroSpin {
  0%   { transform: scale(0)    rotate(0deg);   }
  9%   { transform: scale(1.1)  rotate(0deg);   }
  16%  { transform: scale(0.96) rotate(0deg);   }
  20%  { transform: scale(1)    rotate(0deg);   }
  32%  { transform: scale(1)    rotate(0deg);   }
  70%  { transform: scale(0.38) rotate(290deg); }
  88%  { transform: scale(0.30) rotate(345deg); }
  100% { transform: scale(0.28) rotate(360deg); }
}

/* Overlay fade-out + pointer-events removal */
@keyframes wsOverlayOut {
  0%   { opacity: 1; pointer-events: auto; }
  100% { opacity: 0; pointer-events: none; visibility: hidden; }
}

/* Main content area */
.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Top header */
.top-header {
  height: var(--header-height);
  background: var(--cw-bg-header);
  border-bottom: 1px solid var(--cw-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--cw-shadow-sm);
}

.top-header-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-header-actions .header-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--cw-radius-full);
  background: var(--cw-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--cw-transition);
  color: var(--cw-gray-600);
  font-size: 1.1rem;
  border: none;
}

.top-header-actions .header-icon:hover {
  background: var(--cw-purple-100);
  color: var(--cw-purple-600);
}

/* Page content */
.page-content {
  flex: 1;
  padding: 28px;
}

/* =============================================
   Dashboard Cards
   ============================================= */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.dash-card {
  background: var(--cw-bg-card);
  border-radius: 4px;
  padding: 24px;
  box-shadow: none;
  border: 1px solid #e2e8f0;
  transition: var(--cw-transition);
}

.dash-card:hover {
  box-shadow: none;
  transform: none;
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dash-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cw-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--cw-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.dash-card-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--cw-gray-900);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dash-card-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--cw-radius-sm);
}

.dash-card-change.positive {
  color: #059669;
  background: #ecfdf5;
}

.dash-card-change.negative {
  color: #dc2626;
  background: #fef2f2;
}

/* =============================================
   User Profile Dropdown
   ============================================= */
.profile-dropdown {
  position: relative;
}

.profile-dropdown-trigger {
  width: 38px;
  height: 38px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-400), var(--cw-purple-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--cw-transition);
  overflow: hidden;
}

.profile-dropdown-trigger:hover {
  border-color: var(--cw-purple-300);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.profile-dropdown-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: #fff;
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-shadow-xl);
  border: 1px solid var(--cw-gray-200);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition: var(--cw-transition-slow);
  z-index: 200;
}

.profile-dropdown.open .profile-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.profile-dropdown-header {
  padding: 12px;
  border-bottom: 1px solid var(--cw-gray-100);
  margin-bottom: 4px;
}

.profile-dropdown-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cw-gray-900);
}

.profile-dropdown-email {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  margin-top: 2px;
}

.profile-dropdown-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: var(--cw-radius-sm);
  color: #fff;
  margin-top: 6px;
}

.profile-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--cw-radius-sm);
  color: var(--cw-gray-700);
  font-size: 0.88rem;
  font-weight: 500;
  transition: var(--cw-transition);
}

.profile-dropdown-menu a:hover {
  background: var(--cw-gray-50);
  color: var(--cw-gray-900);
}

.profile-dropdown-menu a.danger {
  color: var(--cw-red);
}

.profile-dropdown-menu a.danger:hover {
  background: #fef2f2;
}

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

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

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

  .auth-card {
    margin: 16px;
    padding: 32px 24px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--cw-radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--cw-transition);
  border: 2px solid transparent;
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cw-purple-600), var(--cw-purple-700));
  color: #fff;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--cw-purple-700), var(--cw-purple-800));
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  transform: translateY(-1px);
  color: #fff;
}

.btn-outline {
  background: #fff;
  color: var(--cw-gray-700);
  border-color: var(--cw-gray-300);
}

.btn-outline:hover {
  border-color: var(--cw-purple-400);
  color: var(--cw-purple-700);
  background: var(--cw-purple-50);
}

.btn-sm {
  padding: 7px 14px;
  font-size: 0.82rem;
}

/* =============================================
   TABLE TOOLBAR
   ============================================= */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.search-form { display: flex; }

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  padding: 8px 14px;
  transition: var(--cw-transition);
  min-width: 280px;
  color: var(--cw-gray-400);
}

.search-input-wrapper:focus-within {
  border-color: var(--cw-purple-400);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}

.search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  width: 100%;
}

.search-input::placeholder { color: var(--cw-gray-400); }

/* =============================================
   DATA TABLE
   ============================================= */
.table-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.table-responsive { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  padding: 14px 16px;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cw-gray-500);
  background: var(--cw-gray-50);
  border-bottom: 2px solid var(--cw-gray-200);
  white-space: nowrap;
}

.data-table tbody tr {
  transition: var(--cw-transition);
  border-bottom: 1px solid var(--cw-gray-100);
}

.data-table tbody tr:hover {
  background: var(--cw-purple-50);
}

.data-table tbody tr:last-child { border-bottom: none; }

.data-table tbody td {
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--cw-gray-700);
  white-space: nowrap;
}

.text-center { text-align: center !important; }
.text-muted { color: var(--cw-gray-500) !important; }

.cell-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--cw-gray-800);
}

.cell-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--cw-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.rep-avatar-clickable {
  position: relative;
  cursor: pointer;
  transition: filter .15s;
}
.rep-avatar-clickable:hover { filter: brightness(0.75); }
.rep-avatar-cam-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
  background: rgba(0,0,0,0.35);
  border-radius: 50%;
}
.rep-avatar-clickable:hover .rep-avatar-cam-overlay { opacity: 1; }

/* Representatives compact table */
.reps-compact-table th:nth-child(1) { width: 30%; }
.reps-compact-table th:nth-child(2) { width: 16%; }
.reps-compact-table th:nth-child(3) { width: 16%; }
.reps-compact-table th:nth-child(4) { width: 13%; }
.reps-compact-table th:nth-child(5) { width: 25%; }

.rep-name-stack,
.rep-loc-stack { display: flex; flex-direction: column; gap: 2px; }
.rep-name-main { font-size: 0.84rem; color: var(--cw-gray-800); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.rep-name-sub  { font-size: 0.74rem; color: var(--cw-gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.rep-sub-text  { font-size: 0.78rem; color: var(--cw-gray-400); }
.rep-badge-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--cw-radius-full);
  font-size: 0.78rem;
  font-weight: 700;
}

.badge-green { background: #ecfdf5; color: #059669; }
.badge-red { background: #fef2f2; color: #dc2626; }
.badge-blue { background: #dbeafe; color: #2563eb; }

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--cw-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-active   { background: #ecfdf5; color: #059669; }
.status-inactive { background: var(--cw-gray-100); color: var(--cw-gray-500); }
.rep-internal-badge { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* Internal flag toggle in rep form */
.rep-internal-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rep-internal-toggle:hover { border-color: #f59e0b; background: #fffbeb; }
.rep-internal-check { width: 18px; height: 18px; accent-color: #f59e0b; flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.rep-internal-info { display: flex; flex-direction: column; gap: 3px; }
.rep-internal-title { font-size: 0.88rem; font-weight: 700; color: #374151; }
.rep-internal-hint  { font-size: 0.76rem; color: #9ca3af; line-height: 1.4; }

/* Action buttons */
.action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--cw-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cw-gray-500);
  transition: var(--cw-transition);
  border: 1px solid transparent;
}

.action-btn:hover { background: var(--cw-gray-100); }
.action-view:hover { color: var(--cw-purple-600); background: var(--cw-purple-50); }
.action-edit:hover { color: #f59e0b; background: #fef3c7; }
.action-deactivate:hover { color: #ef4444; background: #fef2f2; }
.action-edit-zone:hover  { color: #7c3aed; background: var(--cw-purple-50); }
.action-activate:hover { color: #10b981; background: #ecfdf5; }

/* Empty state */
.empty-state {
  padding: 48px 24px !important;
  text-align: center;
}

.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--cw-gray-400);
}

.empty-state-content svg { width: 40px; height: 40px; opacity: 0.5; }
.empty-state-content p { font-size: 0.95rem; }

.empty-state-sm {
  text-align: center;
  padding: 24px;
  color: var(--cw-gray-400);
  font-size: 0.88rem;
}

/* =============================================
   REPRESENTATIVE PROFILE
   ============================================= */
.back-link {
  color: var(--cw-gray-400);
  display: inline-flex;
  margin-right: 8px;
  transition: var(--cw-transition);
}
.back-link:hover { color: var(--cw-purple-600); }

.rep-header-card {
  background: #fff;
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.rep-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rep-header-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--cw-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.rep-header-details h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cw-gray-900);
  margin-bottom: 4px;
}

.rep-header-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--cw-gray-500);
}

.rep-header-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rep-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Rep Tabs Navigation */
.rep-tabs-nav {
  display: flex;
  gap: 4px;
  background: var(--cw-gray-100);
  border-radius: var(--cw-radius-lg);
  padding: 4px;
  margin-bottom: 24px;
  overflow-x: auto;
}

.rep-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--cw-gray-500);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--cw-radius-md);
  cursor: pointer;
  transition: var(--cw-transition);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.rep-tab-btn:hover {
  color: var(--cw-gray-700);
  background: rgba(255, 255, 255, 0.5);
}

.rep-tab-btn.active {
  background: #fff;
  color: var(--cw-purple-600);
  box-shadow: var(--cw-shadow-sm);
}

.rep-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--cw-radius-full);
  background: var(--cw-gray-200);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--cw-gray-600);
}

.rep-tab-btn.active .rep-tab-count {
  background: var(--cw-purple-100);
  color: var(--cw-purple-600);
}

/* Tab Content */
.rep-tab-content {
  display: none;
}

.rep-tab-content.active {
  display: block;
  animation: tabFadeIn 0.25s ease;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Specifications Grid */
.rep-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.rep-spec-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--cw-gray-50);
  border: 1px solid var(--cw-gray-100);
  border-radius: var(--cw-radius-md);
  transition: var(--cw-transition);
}

.rep-spec-item:hover {
  border-color: var(--cw-purple-200);
  box-shadow: var(--cw-shadow-sm);
}

.rep-spec-full {
  grid-column: 1 / -1;
}

.rep-spec-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ede9fe;
  border-radius: var(--cw-radius-md);
}

.rep-spec-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cw-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.rep-spec-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cw-gray-800);
  line-height: 1.5;
}

.rep-spec-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Agreement Cards */
.rep-agreements-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rep-agreement-card {
  background: var(--cw-gray-50);
  border: 1px solid var(--cw-gray-100);
  border-radius: var(--cw-radius-lg);
  padding: 20px;
  transition: var(--cw-transition);
}

.rep-agreement-card:hover {
  border-color: var(--cw-purple-200);
  box-shadow: var(--cw-shadow-sm);
}

.rep-agreement-card.expired,
.rep-agreement-card.failed {
  border-left: 3px solid #ef4444;
  opacity: 0.75;
}

.rep-agreement-card.completed {
  border-left: 3px solid #7c3aed;
}

.rep-agreement-card.active {
  border-left: 3px solid #10b981;
}

.rep-agr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rep-agr-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #ede9fe;
  color: #7c3aed;
  border-radius: var(--cw-radius-full);
  font-size: 0.72rem;
  font-weight: 700;
}

.rep-agr-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--cw-radius-full);
  font-size: 0.72rem;
  font-weight: 700;
}

.rep-agr-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin: 0 0 6px;
}

.rep-agr-desc {
  font-size: 0.85rem;
  color: var(--cw-gray-500);
  margin: 0 0 14px;
  line-height: 1.5;
}

.rep-agr-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.rep-agr-metric {
  display: flex;
  flex-direction: column;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--cw-gray-100);
  border-radius: var(--cw-radius-md);
  min-width: 100px;
}

.rep-agr-metric-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--cw-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.rep-agr-metric-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}

.rep-agr-progress {
  margin-bottom: 12px;
}

.rep-agr-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--cw-gray-500);
  margin-bottom: 6px;
}

.rep-agr-progress-bar {
  height: 8px;
  background: var(--cw-gray-200);
  border-radius: var(--cw-radius-full);
  overflow: hidden;
}

.rep-agr-progress-fill {
  height: 100%;
  border-radius: var(--cw-radius-full);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 4px;
}

.rep-agr-notes {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  padding: 8px 12px;
  background: #fffbeb;
  border-radius: var(--cw-radius-sm);
  margin-bottom: 12px;
}

.rep-agr-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--cw-gray-100);
}

/* Two column layout */
.rep-columns {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
}

.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =============================================
   COMMENT FORM & TIMELINE
   ============================================= */
.comment-form-body { margin-bottom: 12px; }

.comment-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  background: var(--cw-gray-50);
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: var(--cw-transition);
}

.comment-textarea:focus {
  border-color: var(--cw-purple-400);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}

.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comment-type-select {
  display: flex;
  gap: 8px;
}

.radio-pill {
  cursor: pointer;
}

.radio-pill input[type="radio"] {
  display: none;
}

.radio-pill span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--cw-radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cw-gray-500);
  background: var(--cw-gray-100);
  transition: var(--cw-transition);
  border: 2px solid transparent;
}

.radio-pill input:checked + span {
  background: var(--cw-purple-50);
  color: var(--cw-purple-700);
  border-color: var(--cw-purple-300);
}

/* Comments list */
.comments-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--cw-radius-md);
  background: var(--cw-gray-50);
  border: 1px solid var(--cw-gray-100);
  transition: var(--cw-transition);
}

.comment-item:hover { border-color: var(--cw-gray-200); }

.comment-item.observation {
  background: #fefce8;
  border-color: #fef08a;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-400), var(--cw-purple-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.comment-content { flex: 1; min-width: 0; }

.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.comment-header strong {
  font-size: 0.88rem;
  color: var(--cw-gray-800);
}

.comment-type-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--cw-radius-sm);
}

.comment-type-label.comment {
  background: #dbeafe;
  color: #2563eb;
}

.comment-type-label.observation {
  background: #fef08a;
  color: #a16207;
}

.comment-time {
  font-size: 0.78rem;
  color: var(--cw-gray-400);
}

.comment-body {
  font-size: 0.88rem;
  color: var(--cw-gray-700);
  line-height: 1.6;
}

.comment-body p { margin-bottom: 4px; }
.comment-body p:last-child { margin-bottom: 0; }

/* =============================================
   ACTIVITY TIMELINE
   ============================================= */
.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.activity-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--cw-gray-200);
}

.activity-item {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  position: relative;
}

.activity-dot {
  width: 16px;
  height: 16px;
  border-radius: var(--cw-radius-full);
  flex-shrink: 0;
  margin-top: 2px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--cw-gray-200);
  z-index: 1;
}

.activity-content { flex: 1; min-width: 0; }

.activity-desc {
  font-size: 0.85rem;
  color: var(--cw-gray-700);
  line-height: 1.4;
}

.activity-meta {
  font-size: 0.78rem;
  color: var(--cw-gray-400);
  margin-top: 2px;
}

.rep-notes {
  font-size: 0.88rem;
  color: var(--cw-gray-600);
  line-height: 1.6;
}

/* =============================================
   FORMS
   ============================================= */
.form-card {
  background: #fff;
  border-radius: var(--cw-radius-lg);
  padding: 32px;
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  max-width: 720px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

.form-col-2 { grid-column: span 2; }
.form-col-full { grid-column: 1 / -1; }

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cw-gray-700);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  background: var(--cw-gray-50);
  outline: none;
  transition: var(--cw-transition);
}

.form-input:focus {
  border-color: var(--cw-purple-400);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cw-gray-100);
}

/* =============================================
   RESPONSIVE (additional)
   ============================================= */
@media (max-width: 1024px) {
  .rep-columns {
    grid-template-columns: 1fr;
  }

  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input-wrapper { min-width: auto; }
}

/* =============================================
   NAV BADGES
   ============================================= */
.nav-badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--cw-radius-full);
  min-width: 20px;
  text-align: center;
  line-height: 1.4;
}

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--cw-gray-600);
  padding: 4px 8px;
}

.top-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =============================================
   MAP PAGE — Full Layout with Sidebar
   ============================================= */
.map-full-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  height: calc(100vh - 100px);
  gap: 0;
  margin: -20px;
  margin-top: -10px;
}

.map-area {
  position: relative;
  display: flex;
  flex-direction: column;
}

.map-filters-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--cw-gray-100);
  flex-wrap: wrap;
  z-index: 5;
}

.map-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--cw-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cw-gray-600);
  background: var(--cw-gray-50);
  cursor: pointer;
  transition: var(--cw-transition);
  user-select: none;
}
.map-filter-chip:hover { background: var(--cw-gray-100); }
.map-filter-chip input { display: none; }
.map-filter-chip:has(input:not(:checked)) { opacity: 0.4; text-decoration: line-through; }

.filter-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.map-filter-phone-legend {
  border: 1.5px solid var(--cw-gray-200);
  gap: 6px;
}
.map-filter-phone-legend svg { display: block; }

.map-container-full {
  flex: 1;
  width: 100%;
  min-height: 300px;
  z-index: 1;
}

/* Leaflet pin icons */
.custom-pin { background: transparent !important; border: none !important; }
.map-pin-icon {
  background: transparent !important;
  border: none !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  transition: transform 0.15s ease;
}
.map-pin-icon:hover { transform: scale(1.2); }


/* ===== MAP SIDEBAR ===== */
.map-sidebar {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--cw-gray-100);
  overflow: hidden;
}

.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--cw-gray-100);
  flex-shrink: 0;
}

.sidebar-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cw-gray-500);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--cw-transition);
}
.sidebar-tab:hover { color: var(--cw-gray-700); background: var(--cw-gray-50); }
.sidebar-tab.active { color: var(--cw-purple-600); border-bottom-color: var(--cw-purple-600); }

.sidebar-panel { display: none; flex: 1; overflow-y: auto; }
.sidebar-panel.active { display: flex; flex-direction: column; }

.sidebar-detail-content { flex: 1; overflow-y: auto; }
.sidebar-leads-list { flex: 1; overflow-y: auto; }

.sidebar-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--cw-gray-400);
  text-align: center;
}
.sidebar-empty-icon { font-size: 2rem; margin-bottom: 12px; opacity: 0.4; }

/* Sidebar — Detail sections */
.sb-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cw-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sb-header h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.sb-status-badge {
  font-size: 0.68rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--cw-radius-full);
}

.sb-contacts {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--cw-gray-100);
}
.sb-contact-item {
  font-size: 0.82rem;
  color: var(--cw-gray-600);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--cw-transition);
}
a.sb-contact-item:hover { color: var(--cw-purple-600); }
.sb-whatsapp { color: #25d366; font-weight: 600; }
.sb-whatsapp:hover { color: #128c7e !important; }
.sb-last-visit { color: var(--cw-gray-400); font-size: 0.78rem; }

.sb-opp-card {
  margin: 12px 20px;
  padding: 10px 14px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sb-opp-label { font-size: 0.78rem; color: var(--cw-gray-500); }
.sb-opp-stage { font-size: 0.82rem; font-weight: 700; }

.btn-create-opp {
  display: block;
  width: calc(100% - 40px);
  margin: 12px 20px;
  text-align: center;
  font-size: 0.9rem;
  padding: 12px;
  border-radius: var(--cw-radius-md);
  font-weight: 700;
  animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(124,58,237,0.3); }
  50% { box-shadow: 0 0 16px rgba(124,58,237,0.5); }
}

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
}
.btn-success:hover { background: linear-gradient(135deg, #059669, #047857); }

.sb-section {
  padding: 12px 20px;
  border-top: 1px solid var(--cw-gray-100);
}
.sb-section h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cw-gray-700);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sb-general-notes {
  font-size: 0.85rem;
  color: var(--cw-gray-600);
  line-height: 1.5;
  margin: 0;
}

.sb-actions {
  padding: 12px 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--cw-gray-100);
}
.sb-action-btn { flex: 1; }
.sb-status-select { flex: 1; font-size: 0.82rem; padding: 6px 10px; }

.sb-visit-form {
  padding: 12px 20px;
  background: #f0fdf4;
  border-top: 1px solid #bbf7d0;
}
.sb-visit-form.hidden { display: none; }
.sb-visit-btns { display: flex; gap: 8px; margin-top: 8px; }

.sb-add-obs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-add-obs textarea { font-size: 0.82rem; resize: vertical; }

/* Timeline */
.sb-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sb-timeline-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cw-gray-50);
}
.sb-timeline-item:last-child { border-bottom: none; }
.sb-tl-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.sb-tl-content { flex: 1; }
.sb-tl-header { display: flex; justify-content: space-between; margin-bottom: 2px; }
.sb-tl-type { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sb-tl-date { font-size: 0.68rem; color: var(--cw-gray-400); }
.sb-tl-text { font-size: 0.82rem; color: var(--cw-gray-700); margin: 0; line-height: 1.4; }
.sb-tl-user { font-size: 0.68rem; color: var(--cw-gray-400); }

/* Leads list in sidebar */
.sb-lead-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--cw-gray-50);
  cursor: pointer;
  transition: var(--cw-transition);
}
.sb-lead-item:hover { background: var(--cw-gray-50); }
.sb-lead-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sb-lead-info { flex: 1; }
.sb-lead-info strong { font-size: 0.85rem; display: block; }
.sb-lead-info span { font-size: 0.75rem; display: block; }

/* Lead address */
.sb-lead-addr { color: var(--cw-gray-500); font-size: 0.72rem !important; }
.sb-no-addr-tag { color: #ef4444 !important; font-weight: 600; }
.sb-lead-no-addr { background: #fef2f2; border-left: 3px solid #fecaca; }
.sb-lead-no-addr:hover { background: #fee2e2; }

/* Leads list header */
.sb-leads-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cw-gray-100);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
.sb-leads-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cw-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sb-sort-btn { font-size: 0.68rem !important; padding: 3px 8px !important; }
.sb-leads-alert {
  padding: 8px 16px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.75rem;
  font-weight: 600;
  border-bottom: 1px solid #fde68a;
}

/* ===== ENRICHMENT PROGRESS ===== */
.enrich-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  border: none;
  border-radius: var(--cw-radius-full);
  cursor: pointer;
  transition: var(--cw-transition);
  white-space: nowrap;
}
.enrich-btn:hover { background: linear-gradient(135deg, #6d28d9, #5b21b6); transform: scale(1.03); }
.enrich-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.enrich-btn .spinner {
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: none;
}
.enrich-btn.loading .spinner { display: inline-block; }

@keyframes spin { to { transform: rotate(360deg); } }

.enrich-progress {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-md);
  font-size: 0.75rem;
  display: none;
}
.enrich-progress.active { display: block; }
.enrich-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--cw-gray-200);
  border-radius: 3px;
  margin: 6px 0;
  overflow: hidden;
}
.enrich-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}
.enrich-log {
  font-size: 0.72rem;
  color: var(--cw-gray-500);
  margin-top: 4px;
  max-height: 120px;
  overflow-y: auto;
}
.enrich-log div { padding: 1px 0; }
.elog-row { padding: 2px 0; line-height: 1.4; }
.elog-indent { padding-left: 14px; color: var(--cw-gray-400); }
.elog-src { font-weight: 600; }
.enrich-done {
  color: #059669;
  font-weight: 700;
  font-size: 0.78rem;
}
.enrich-date {
  display: block;
  font-size: 0.65rem;
  color: var(--cw-gray-400);
  margin-top: 2px;
}
.enrich-src-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.enrich-src-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}
/* Sources bar in enrichment panel */
.enrich-sources-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.esrc {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}
.esrc.osm  { background: #d1fae5; color: #059669; }
.esrc.here { background: #ccfbf1; color: #0f766e; }
.esrc.goo  { background: #dbeafe; color: #1d4ed8; }

/* ===== Location popup in zones admin map ===== */
.loc-popup { font-size: 0.82rem; min-width: 180px; max-width: 260px; }
.loc-popup-name { font-weight: 700; font-size: 0.9rem; color: var(--cw-gray-900); margin-bottom: 4px; }
.loc-popup-cat  { font-size: 0.72rem; color: var(--cw-gray-500); margin-bottom: 5px; text-transform: capitalize; }
.loc-popup-row  { display: block; color: var(--cw-gray-700); margin-bottom: 3px; word-break: break-word; }
.loc-popup-link { color: var(--cw-purple-600); text-decoration: none; }
.loc-popup-link:hover { text-decoration: underline; }
.loc-popup-src  {
  display: inline-block;
  margin-top: 7px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

/* Pulse animation for user location */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
  70% { box-shadow: 0 0 0 12px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

/* ===== MAP LOADING OVERLAY ===== */
.map-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
  transition: opacity 0.5s ease;
  pointer-events: auto;
}
.map-loading-overlay.map-loading-done {
  opacity: 0;
  pointer-events: none;
}
.map-loading-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}
.map-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #ede9fe;
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: mapSpinAnim 0.8s linear infinite;
}
@keyframes mapSpinAnim {
  to { transform: rotate(360deg); }
}
.map-loading-msg {
  font-size: 0.88rem;
  color: var(--cw-gray-600);
  font-weight: 500;
  text-align: center;
}
.map-loading-bar-wrap {
  width: 160px;
  height: 5px;
  background: #ede9fe;
  border-radius: 99px;
  overflow: hidden;
}
.map-loading-bar {
  height: 100%;
  background: #7c3aed;
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ===== ZONE PICKER OVERLAY ===== */
.zone-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 10, 30, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}
.zone-picker-overlay.zone-picker-hidden {
  opacity: 0;
  pointer-events: none;
}
.zone-picker-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 320px;
  max-width: 420px;
  text-align: center;
}
.zone-picker-icon { font-size: 2.5rem; line-height: 1; }
.zone-picker-title { font-size: 1.35rem; font-weight: 700; color: var(--cw-gray-900); margin: 0; }
.zone-picker-subtitle { font-size: 0.9rem; color: var(--cw-gray-500); margin: -4px 0 4px; }
.zone-picker-select { width: 100%; font-size: 0.95rem; }
.zone-picker-btn { width: 100%; padding: 10px; font-size: 1rem; }
.zone-picker-empty { color: var(--cw-gray-500); font-size: 0.9rem; }

/* ===== MAP ZONE SELECT (top bar) ===== */
.map-zone-select {
  font-size: 0.82rem;
  padding: 4px 8px;
  border: 1.5px solid #7c3aed;
  border-radius: 8px;
  color: #7c3aed;
  font-weight: 600;
  background: #faf5ff;
  cursor: pointer;
  height: 30px;
  min-width: 140px;
  max-width: 200px;
}
.map-zone-select:focus { outline: none; box-shadow: 0 0 0 2px #ede9fe; }
.map-zone-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #7c3aed;
  background: #faf5ff;
  border: 1.5px solid #ede9fe;
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ===== DELETE ACTION BUTTON ===== */
.action-btn.action-delete {
  color: #dc2626;
  background: transparent;
  border: none;
  cursor: pointer;
}
.action-btn.action-delete:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* =============================================
   KANBAN BOARD
   ============================================= */
.kanban-toolbar {
  margin-bottom: 20px;
}

.kanban-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.kanban-stat {
  background: #fff;
  padding: 12px 16px;
  border-radius: var(--cw-radius-md);
  box-shadow: var(--cw-shadow-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}

.kanban-stat-value { font-size: 1.3rem; font-weight: 800; color: var(--cw-gray-900); }
.kanban-stat-label { font-size: 0.78rem; color: var(--cw-gray-500); font-weight: 600; }

.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 20px;
  min-height: calc(100vh - 260px);
}

.kanban-column {
  min-width: 260px;
  max-width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kanban-column-header {
  background: #fff;
  padding: 14px 16px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: none;
}

.kanban-column-title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cw-gray-700); }
.kanban-column-count {
  background: var(--cw-gray-100); color: var(--cw-gray-600);
  font-size: 0.75rem; font-weight: 700;
  padding: 2px 8px; border-radius: var(--cw-radius-full);
}

.kanban-column-body {
  flex: 1;
  background: var(--cw-gray-50);
  border-radius: 0 0 var(--cw-radius-md) var(--cw-radius-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100px;
  transition: background 0.2s;
}

.kanban-column-body.drag-over {
  background: var(--cw-purple-50);
  outline: 2px dashed var(--cw-purple-300);
}

.kanban-card {
  background: #fff;
  border-radius: 4px;
  padding: 14px;
  box-shadow: none;
  border: 1px solid #e2e8f0;
  cursor: grab;
  transition: var(--cw-transition);
}
.kanban-card:hover { box-shadow: none; transform: none; border-color: #c7d2e0; }
.kanban-card.dragging { opacity: 0.5; transform: rotate(2deg); }

.kanban-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.kanban-card-header strong { font-size: 0.88rem; color: var(--cw-gray-800); }
.kanban-card-value { font-size: 0.78rem; font-weight: 700; color: var(--cw-green); white-space: nowrap; }

.kanban-card-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.75rem; color: var(--cw-gray-500); margin-bottom: 6px; }
.kanban-card-meta span { display: flex; align-items: center; gap: 3px; }

.kanban-card-tasks { margin-bottom: 6px; }
.kanban-task-badge { font-size: 0.75rem; color: var(--cw-gray-500); display: flex; align-items: center; gap: 4px; }

.kanban-card-actions { display: flex; justify-content: flex-end; }
.kanban-empty { text-align: center; padding: 20px; color: var(--cw-gray-400); font-size: 0.82rem; }

/* =============================================
   TASKS PAGE
   ============================================= */
.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.tasks-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.tasks-counters { display: flex; gap: 8px; }

.task-list-page, .task-list-detail {
  display: flex;
  flex-direction: column;
}

.task-row, .task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cw-gray-100);
  transition: var(--cw-transition);
}
.task-row:hover, .task-item:hover { background: var(--cw-gray-50); }
.task-row:last-child, .task-item:last-child { border-bottom: none; }
.task-row.completed .task-title, .task-item.completed .task-title { text-decoration: line-through; color: var(--cw-gray-400); }
.task-row.overdue, .task-item.overdue { background: #fef2f2; }

.task-check { padding-top: 2px; }
.task-toggle { color: var(--cw-gray-400); transition: var(--cw-transition); }
.task-toggle:hover { color: var(--cw-green); }
.task-item.completed .task-toggle { color: var(--cw-green); }

.task-circle {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--cw-gray-300);
  transition: var(--cw-transition);
}
.task-circle:hover { border-color: var(--cw-green); background: rgba(16,185,129,0.1); }

.task-content { flex: 1; min-width: 0; }
.task-title { font-size: 0.9rem; font-weight: 600; color: var(--cw-gray-800); margin-bottom: 4px; }
.task-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.78rem; color: var(--cw-gray-500); }
.task-meta span { display: flex; align-items: center; gap: 3px; }
.task-type-badge { font-weight: 600; display: flex; align-items: center; gap: 3px; }
.text-danger { color: #ef4444 !important; font-weight: 600; }
.task-priority { flex-shrink: 0; }
.priority-badge {
  font-size: 0.72rem; font-weight: 700; padding: 3px 10px;
  border-radius: var(--cw-radius-full); text-transform: uppercase; letter-spacing: 0.04em;
}

/* =============================================
   ADMIN ZONES PAGE
   ============================================= */
.zones-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  height: calc(100vh - 160px);
}

.zones-sidebar { overflow-y: auto; }

.zones-map {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  box-shadow: var(--cw-shadow-md);
  border: 1px solid var(--cw-gray-200);
}

.zone-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cw-gray-100);
}
.zone-item:last-child { border-bottom: none; }
.zone-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.zone-info { flex: 1; }
.zone-info strong { font-size: 0.88rem; display: block; }
.zone-info span { font-size: 0.78rem; display: block; }

.zone-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.import-form { margin-bottom: 0; }
.import-row { display: flex; align-items: center; gap: 12px; }

/* =============================================
   RESPONSIVE — Mobile fixes
   ============================================= */
@media (max-width: 768px) {
  .sidebar-toggle { display: block; }

  .sidebar {
    transform: translateX(-100%);
    position: fixed;
    z-index: 200;
  }
  .sidebar.open { transform: translateX(0); }

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

  .map-container { height: calc(100vh - 200px); }

  .kanban-board { min-height: auto; }
  .kanban-column { min-width: 240px; }

  .zones-layout { grid-template-columns: 1fr; height: auto; }
  .zones-map { min-height: 350px; }

  .leads-panel { width: 100%; border-radius: 0; }

  .task-meta { flex-direction: column; gap: 4px; }
}

/* =============================================
   OPP TABS — Kanban / Tarefas toggle
   ============================================= */
.opp-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--cw-gray-100);
  border-radius: var(--cw-radius-full);
  padding: 4px;
  width: fit-content;
}

.opp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: none;
  background: transparent;
  border-radius: var(--cw-radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cw-gray-500);
  cursor: pointer;
  transition: var(--cw-transition);
}
.opp-tab:hover { color: var(--cw-gray-700); }
.opp-tab.active {
  background: #fff;
  color: var(--cw-purple-600);
  box-shadow: var(--cw-shadow-sm);
}

.tab-badge {
  background: #f59e0b;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--cw-radius-full);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* =============================================
   KANBAN CARD — inline tasks
   ============================================= */
.kanban-card { cursor: pointer; }
.kanban-card:active { transform: scale(0.98); }

.kanban-card-task {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.78rem;
  color: var(--cw-gray-600);
  border-top: 1px solid var(--cw-gray-50);
}
.kanban-card-task:first-child { border-top: 1px solid var(--cw-gray-100); margin-top: 6px; padding-top: 8px; }
.kanban-card-task.done .kc-task-title { text-decoration: line-through; color: var(--cw-gray-400); }
.kanban-card-task.done .kc-task-toggle { color: var(--cw-green); }

.kc-task-toggle { color: var(--cw-gray-400); flex-shrink: 0; transition: var(--cw-transition); }
.kc-task-toggle:hover { color: var(--cw-green); }

.kc-task-circle {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--cw-gray-300);
  transition: var(--cw-transition);
  flex-shrink: 0;
}
.kc-task-circle:hover { border-color: var(--cw-green); background: rgba(16,185,129,0.1); }

.kc-task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-task-type { color: var(--cw-gray-400); flex-shrink: 0; }

.kanban-card-more { font-size: 0.72rem; color: var(--cw-gray-400); padding: 4px 0 2px 20px; }

/* =============================================
   WEEKLY TASKS VIEW
   ============================================= */
.tasks-week-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 20px;
  min-height: calc(100vh - 230px);
}

.tasks-day-column {
  min-width: 180px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tasks-day-header {
  background: #fff;
  padding: 12px 14px;
  border-radius: var(--cw-radius-md) var(--cw-radius-md) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 3px solid var(--cw-purple-400);
  box-shadow: var(--cw-shadow-sm);
}

.tasks-day-name { font-size: 0.82rem; font-weight: 700; color: var(--cw-gray-700); text-transform: uppercase; letter-spacing: 0.04em; }
.tasks-day-count {
  background: var(--cw-gray-100); color: var(--cw-gray-600);
  font-size: 0.72rem; font-weight: 700;
  padding: 2px 7px; border-radius: var(--cw-radius-full);
}

.tasks-day-body {
  flex: 1;
  background: var(--cw-gray-50);
  border-radius: 0 0 var(--cw-radius-md) var(--cw-radius-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

.task-day-card {
  background: #fff;
  border-radius: var(--cw-radius-md);
  padding: 10px 12px;
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  cursor: pointer;
  transition: var(--cw-transition);
  font-size: 0.82rem;
}
.task-day-card:hover { box-shadow: var(--cw-shadow-md); transform: translateY(-1px); }
.task-day-card.overdue { border-left: 3px solid #ef4444; }

.task-day-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.task-day-info { flex: 1; }
.task-day-info strong { font-size: 0.82rem; display: block; margin-bottom: 2px; }
.task-day-info span { font-size: 0.72rem; color: var(--cw-gray-500); display: flex; align-items: center; gap: 3px; }

.task-day-opp { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 0.72rem; color: var(--cw-gray-500); }
.task-day-opp span { display: flex; align-items: center; gap: 3px; }

.task-day-time { font-size: 0.72rem; color: var(--cw-gray-500); margin-top: 4px; }

.priority-badge-sm {
  font-size: 0.62rem; font-weight: 700;
  padding: 1px 6px; border-radius: var(--cw-radius-full);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.tasks-col-no-task .tasks-day-header { border-top-color: #ef4444; }

/* =============================================
   MODAL — Opportunity Detail
   ============================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal-content {
  background: #fff;
  border-radius: var(--cw-radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--cw-gray-100);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1.2rem;
  color: var(--cw-gray-500);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--cw-transition);
}
.modal-close:hover { background: var(--cw-gray-200); color: var(--cw-gray-800); }

.modal-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-md);
  margin-bottom: 16px;
}
.modal-header-card h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }

.modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cw-gray-100);
}

.modal-notes {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--cw-radius-md);
  padding: 12px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.modal-tasks-title {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.modal-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.modal-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--cw-radius-md);
  transition: var(--cw-transition);
}
.modal-task:hover { background: var(--cw-gray-50); }
.modal-task.done { opacity: 0.5; }
.modal-task.done .modal-task-title { text-decoration: line-through; }
.modal-task.overdue { background: #fef2f2; }

.modal-task-info { flex: 1; display: flex; flex-direction: column; }
.modal-task-title { font-size: 0.85rem; font-weight: 600; }
.modal-task-meta { font-size: 0.72rem; color: var(--cw-gray-500); }

.modal-add-task {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--cw-gray-100);
}

/* =============================================
   CRM / KANBAN — Card Footer (WhatsApp + Pending)
   ============================================= */
.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cw-gray-100);
}
.kanban-card-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kanban-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  transition: var(--cw-transition);
  text-decoration: none;
  flex-shrink: 0;
}
.kanban-whatsapp-btn:hover {
  background: #128c7e;
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}

.kanban-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  color: var(--cw-gray-400);
  font-weight: 600;
}

.kanban-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #f59e0b;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: var(--cw-radius-full);
  letter-spacing: 0.02em;
}
.kanban-pending-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  animation: pendingPulse 1.5s ease-in-out infinite;
}
@keyframes pendingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* =============================================
   CRM MODAL — Enhanced sections
   ============================================= */
.modal-content-lg {
  max-width: 640px;
}

.modal-section-title {
  font-size: 0.9rem;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cw-gray-100);
}

/* WhatsApp button in modal header */
.modal-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  transition: var(--cw-transition);
  text-decoration: none;
  flex-shrink: 0;
}
.modal-whatsapp-btn:hover {
  background: #128c7e;
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}

/* Comment form in modal */
.modal-comment-form {
  margin-bottom: 12px;
}

/* Comments list in modal */
.modal-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.modal-comment-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-md);
  transition: var(--cw-transition);
}
.modal-comment-item:hover { background: var(--cw-gray-100); }
.modal-comment-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cw-purple-600), var(--cw-purple-700));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-comment-content { flex: 1; min-width: 0; }
.modal-comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.modal-comment-header strong { font-size: 0.82rem; color: var(--cw-gray-800); }
.modal-comment-header span { font-size: 0.68rem; color: var(--cw-gray-400); }
.modal-comment-content p { font-size: 0.82rem; color: var(--cw-gray-600); margin: 0; line-height: 1.4; }

/* Timeline in modal */
.modal-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 260px;
  overflow-y: auto;
  border-left: 2px solid var(--cw-gray-100);
  margin-left: 8px;
  padding-left: 0;
}
.modal-timeline-item {
  display: flex;
  gap: 10px;
  padding: 8px 0 8px 16px;
  position: relative;
}
.modal-timeline-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  position: absolute;
  left: -6px;
  box-shadow: 0 0 0 3px #fff;
}
.modal-timeline-content {
  flex: 1;
  padding-left: 8px;
}
.modal-timeline-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.modal-timeline-icon { font-size: 0.82rem; }
.modal-timeline-desc { font-size: 0.82rem; font-weight: 600; color: var(--cw-gray-700); }
.modal-timeline-meta {
  display: flex;
  gap: 10px;
  font-size: 0.68rem;
  color: var(--cw-gray-400);
}

/* Convert section */
.modal-convert-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cw-gray-100);
  text-align: center;
}
.btn-convert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: var(--cw-radius-full);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--cw-transition);
}
.btn-convert:hover { background: linear-gradient(135deg, #059669, #047857); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5,150,105,0.3); }
.modal-converted-badge {
  display: inline-block;
  padding: 8px 20px;
  background: #d1fae5;
  color: #065f46;
  border-radius: var(--cw-radius-full);
  font-size: 0.85rem;
  font-weight: 700;
}

/* =============================================
   CRM SHOW PAGE — Comments & Timeline
   ============================================= */
.show-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #25d366;
  color: #fff !important;
  padding: 3px 10px;
  border-radius: var(--cw-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--cw-transition);
}
.show-whatsapp-btn:hover { background: #128c7e; transform: scale(1.03); }
.show-whatsapp-btn svg { fill: #fff; }

/* Comments on show page */
.show-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.show-comment-item {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-md);
  transition: var(--cw-transition);
}
.show-comment-item:hover { background: var(--cw-gray-100); }
.show-comment-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cw-purple-600), var(--cw-purple-700));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.show-comment-content { flex: 1; }
.show-comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.show-comment-header strong { font-size: 0.85rem; color: var(--cw-gray-800); }
.show-comment-header span { font-size: 0.72rem; color: var(--cw-gray-400); }
.show-comment-content p { font-size: 0.85rem; color: var(--cw-gray-600); margin: 0; line-height: 1.5; }

/* Timeline on show page */
.show-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid var(--cw-gray-100);
  margin-left: 8px;
}
.show-timeline-item {
  display: flex;
  gap: 12px;
  padding: 10px 0 10px 18px;
  position: relative;
}
.show-timeline-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  position: absolute;
  left: -6px;
  top: 14px;
  box-shadow: 0 0 0 3px #fff;
}
.show-timeline-content { flex: 1; }
.show-timeline-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.show-timeline-icon { font-size: 0.85rem; }
.show-timeline-desc { font-size: 0.85rem; font-weight: 600; color: var(--cw-gray-700); }
.show-timeline-meta {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--cw-gray-400);
}

/* =============================================
   CRM TASKS — Deadline-based Kanban columns
   ============================================= */
.tasks-deadline-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 20px;
  min-height: calc(100vh - 230px);
}
.tasks-deadline-col {
  min-width: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tasks-deadline-header {
  background: #fff;
  padding: 12px 14px;
  border-radius: var(--cw-radius-md) var(--cw-radius-md) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--cw-shadow-sm);
}
.tasks-deadline-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cw-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tasks-deadline-count {
  background: var(--cw-gray-100);
  color: var(--cw-gray-600);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--cw-radius-full);
}
.tasks-deadline-body {
  flex: 1;
  background: var(--cw-gray-50);
  border-radius: 0 0 var(--cw-radius-md) var(--cw-radius-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}
.tasks-deadline-col.col-overdue .tasks-deadline-header { border-top: 3px solid #ef4444; }
.tasks-deadline-col.col-overdue .tasks-deadline-name { color: #ef4444; }
.tasks-deadline-col.col-today .tasks-deadline-header { border-top: 3px solid #f59e0b; }
.tasks-deadline-col.col-week .tasks-deadline-header { border-top: 3px solid #3b82f6; }
.tasks-deadline-col.col-next-week .tasks-deadline-header { border-top: 3px solid #8b5cf6; }
.tasks-deadline-col.col-later .tasks-deadline-header { border-top: 3px solid #6b7280; }
.tasks-deadline-col.col-no-tasks .tasks-deadline-header { border-top: 3px solid #ef4444; }

/* Task card within deadline board */
.task-deadline-card {
  background: #fff;
  border-radius: var(--cw-radius-md);
  padding: 10px 12px;
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  cursor: pointer;
  transition: var(--cw-transition);
  font-size: 0.82rem;
}
.task-deadline-card:hover { box-shadow: var(--cw-shadow-md); transform: translateY(-1px); }
.task-deadline-card.overdue { border-left: 3px solid #ef4444; background: #fef2f2; }
.task-deadline-card.today { border-left: 3px solid #f59e0b; }

.task-deadline-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.task-deadline-info { flex: 1; }
.task-deadline-info strong { font-size: 0.82rem; display: block; margin-bottom: 2px; color: var(--cw-gray-800); }
.task-deadline-info span { font-size: 0.72rem; color: var(--cw-gray-500); display: flex; align-items: center; gap: 3px; }

.task-deadline-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--cw-gray-500);
}
.task-deadline-footer span { display: flex; align-items: center; gap: 3px; }
.task-deadline-time {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--cw-radius-full);
}
.task-deadline-time.urgent { background: #fef2f2; color: #ef4444; }
.task-deadline-time.warning { background: #fef3c7; color: #d97706; }
.task-deadline-time.normal { background: var(--cw-gray-100); color: var(--cw-gray-500); }

/* No-task opportunity cards in deadline board */
.task-no-activity-card {
  background: #fff;
  border-radius: var(--cw-radius-md);
  padding: 10px 12px;
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  border-left: 3px solid #ef4444;
  cursor: pointer;
  transition: var(--cw-transition);
  font-size: 0.82rem;
}
.task-no-activity-card:hover { box-shadow: var(--cw-shadow-md); transform: translateY(-1px); }

/* =============================================
   RESPONSIVE — Mobile for new components
   ============================================= */
@media (max-width: 768px) {
  .opp-tabs { width: 100%; }
  .opp-tab { flex: 1; justify-content: center; }

  .tasks-week-board { min-height: auto; }
  .tasks-day-column { min-width: 160px; }

  .modal-content { max-width: 100%; padding: 20px; }

  .kanban-stat { min-width: 110px; }

  .map-full-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 1fr;
    height: auto;
    margin: -12px;
  }
  .map-sidebar { border-left: none; border-top: 1px solid var(--cw-gray-100); }
  .map-filter-chip span { display: none; }
}

/* =============================================
   ONBOARDING & ROLEPLAY — Design System
   ============================================= */

/* === Page Header === */
.onb-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}

.onb-page-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cw-gray-900);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.onb-page-subtitle {
  font-size: 0.92rem;
  color: var(--cw-gray-500);
  margin-top: 4px;
}

/* === Buttons === */
.btn-cw-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--cw-purple-600), var(--cw-purple-700));
  color: #fff;
  border: none;
  border-radius: var(--cw-radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--cw-transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-cw-primary:hover {
  background: linear-gradient(135deg, var(--cw-purple-700), var(--cw-purple-800));
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
  transform: translateY(-1px);
  color: #fff;
}

.btn-cw-primary.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
}

.btn-cw-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #fff;
  color: var(--cw-purple-600);
  border: 2px solid var(--cw-purple-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--cw-transition);
  text-decoration: none;
}

.btn-cw-secondary:hover {
  background: var(--cw-purple-50);
  border-color: var(--cw-purple-400);
  color: var(--cw-purple-700);
}

.btn-cw-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  color: var(--cw-purple-600);
  border: 1px dashed var(--cw-purple-300);
  border-radius: var(--cw-radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--cw-transition);
}

.btn-cw-ghost:hover {
  background: var(--cw-purple-50);
  border-color: var(--cw-purple-400);
}

.btn-cw-ghost-sm {
  font-size: 0.82rem;
  color: var(--cw-purple-600);
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: none;
}

.btn-cw-ghost-sm:hover { color: var(--cw-purple-800); text-decoration: underline; }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--cw-gray-500);
  font-weight: 500;
  margin-bottom: 8px;
  text-decoration: none;
}

.btn-back:hover { color: var(--cw-purple-600); }

.btn-icon-sm {
  width: 32px;
  height: 32px;
  border-radius: var(--cw-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cw-gray-100);
  color: var(--cw-gray-600);
  border: none;
  cursor: pointer;
  transition: var(--cw-transition);
  text-decoration: none;
}

.btn-icon-sm:hover { background: var(--cw-purple-100); color: var(--cw-purple-600); }

.btn-danger-sm {
  padding: 6px 14px;
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: var(--cw-radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--cw-transition);
}

.btn-danger-sm:hover { background: #fee2e2; border-color: #f87171; }

.btn-danger-xs {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: var(--cw-radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--cw-transition);
  flex-shrink: 0;
}

.btn-danger-xs:hover { background: #fee2e2; }

/* Loading Button */
.btn-with-loading {
  position: relative;
}

.btn-with-loading .btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
}

.btn-with-loading.loading .btn-text { visibility: hidden; }
.btn-with-loading.loading .btn-spinner { display: inline-block; position: absolute; }

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* === Templates Grid === */
.onb-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.onb-template-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  cursor: pointer;
  transition: var(--cw-transition);
  animation: fadeSlideUp 0.4s ease;
}

.onb-template-card:hover {
  box-shadow: var(--cw-shadow-lg);
  border-color: var(--cw-purple-200);
  transform: translateY(-3px);
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.onb-template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.onb-template-status {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--cw-radius-full);
}

.onb-template-status.active { background: #d1fae5; color: #059669; }
.onb-template-status.inactive { background: #fee2e2; color: #dc2626; }

.onb-template-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin-bottom: 6px;
}

.onb-template-desc {
  font-size: 0.88rem;
  color: var(--cw-gray-500);
  line-height: 1.5;
  margin-bottom: 16px;
}

.onb-template-stats {
  display: flex;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--cw-gray-100);
}

.onb-template-stat { text-align: center; }

.onb-template-stat .stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cw-purple-600);
  display: block;
}

.onb-template-stat .stat-label {
  font-size: 0.75rem;
  color: var(--cw-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* === Empty State === */
.onb-empty-state {
  text-align: center;
  padding: 60px 24px;
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  border: 2px dashed var(--cw-gray-200);
}

.onb-empty-icon { font-size: 3rem; margin-bottom: 16px; }
.onb-empty-state h3 { font-size: 1.2rem; font-weight: 700; color: var(--cw-gray-700); margin-bottom: 8px; }
.onb-empty-state p { font-size: 0.92rem; color: var(--cw-gray-500); margin-bottom: 20px; }

/* === Template Show: Sections === */
.onb-enroll-section {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
}

.onb-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin-bottom: 12px;
}

.onb-enroll-form .onb-enroll-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.onb-select, .onb-input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  background: var(--cw-gray-50);
  transition: var(--cw-transition);
  outline: none;
}

.onb-select:focus, .onb-input:focus, .onb-textarea:focus {
  border-color: var(--cw-purple-400);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

.onb-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  background: var(--cw-gray-50);
  transition: var(--cw-transition);
  outline: none;
  resize: vertical;
}

.onb-input-sm { padding: 8px 12px; font-size: 0.85rem; }

.onb-sections-list { display: flex; flex-direction: column; gap: 16px; }

.onb-section-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  overflow: hidden;
  animation: fadeSlideUp 0.4s ease;
}

.onb-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--cw-purple-50), rgba(124, 58, 237, 0.03));
}

.onb-section-number {
  width: 44px;
  height: 44px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-500), var(--cw-purple-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  flex-shrink: 0;
}

.onb-section-info { flex: 1; min-width: 0; }

.onb-section-period {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cw-purple-600);
  margin-bottom: 2px;
}

.onb-section-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}

.onb-section-desc {
  font-size: 0.85rem;
  color: var(--cw-gray-500);
  margin-top: 4px;
  line-height: 1.5;
}

.onb-section-badge span {
  display: inline-block;
  padding: 4px 12px;
  background: var(--cw-purple-100);
  color: var(--cw-purple-700);
  border-radius: var(--cw-radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.onb-items-list { padding: 8px 24px 16px; }

.onb-item-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cw-gray-50);
}

.onb-item-row:last-child { border-bottom: none; }

.onb-item-check-placeholder {
  color: var(--cw-gray-300);
  font-size: 1.1rem;
  margin-top: 2px;
}

.onb-item-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cw-gray-700);
}

.onb-item-action {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  margin-top: 2px;
}

.onb-item-link {
  font-size: 0.82rem;
  color: var(--cw-purple-600);
  font-weight: 600;
  margin-top: 4px;
  display: inline-block;
}

/* === Form Styles === */
.onb-template-form { display: flex; flex-direction: column; gap: 20px; }

.onb-form-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
}

.onb-form-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cw-gray-100);
}

.onb-form-group { margin-bottom: 12px; }

.onb-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cw-gray-600);
  margin-bottom: 4px;
}

.onb-form-hint {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  margin-bottom: 16px;
}

.onb-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cw-gray-700);
  cursor: pointer;
}

.onb-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--cw-purple-600);
}

.onb-form-row {
  display: flex;
  gap: 16px;
}

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }

.onb-form-actions-row {
  display: flex;
  justify-content: center;
}

.onb-form-submit {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.onb-section-form { animation: fadeSlideUp 0.3s ease; }

.onb-section-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.onb-items-form-container {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cw-gray-100);
}

.onb-items-form-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cw-gray-700);
  margin-bottom: 12px;
}

.onb-item-form-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
  padding: 8px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-sm);
  animation: fadeSlideUp 0.2s ease;
}

/* === Dashboard KPI Cards === */
.onb-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.onb-kpi-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  transition: var(--cw-transition);
  animation: fadeSlideUp 0.4s ease;
}

.onb-kpi-card:hover {
  box-shadow: var(--cw-shadow-md);
  transform: translateY(-2px);
}

.onb-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--cw-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.onb-kpi-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--cw-gray-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.onb-kpi-label {
  font-size: 0.78rem;
  color: var(--cw-gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* === Dashboard Grid === */
.onb-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

.onb-dash-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  overflow: hidden;
  animation: fadeSlideUp 0.4s ease;
}

.onb-dash-card-wide {
  grid-column: 1 / -1;
}

.onb-dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 12px;
}

.onb-dash-card-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}

/* === Table === */
.onb-table-wrapper {
  overflow-x: auto;
  padding: 0 24px 16px;
}

.onb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.onb-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cw-gray-500);
  border-bottom: 2px solid var(--cw-gray-100);
}

.onb-table td {
  padding: 12px;
  border-bottom: 1px solid var(--cw-gray-50);
  color: var(--cw-gray-700);
}

.onb-table-row-clickable {
  cursor: pointer;
  transition: var(--cw-transition);
}

.onb-table-row-clickable:hover {
  background: var(--cw-purple-50);
}

.onb-rep-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onb-rep-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-400), var(--cw-purple-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.text-muted { color: var(--cw-gray-500); }
.text-center { text-align: center; }

/* === Progress Bars === */
.onb-progress-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onb-progress-bar-mini {
  width: 100px;
  height: 6px;
  background: var(--cw-gray-100);
  border-radius: var(--cw-radius-full);
  overflow: hidden;
}

.onb-progress-bar-mini .onb-progress-fill {
  height: 100%;
  border-radius: var(--cw-radius-full);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.onb-progress-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cw-gray-700);
  min-width: 36px;
}

.onb-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--cw-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
}

/* === Onboarding Progress Card === */
.onb-progress-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  animation: fadeSlideUp 0.4s ease;
}

.onb-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.onb-progress-title h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}

.onb-progress-fraction {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  font-weight: 500;
}

.onb-progress-percentage {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.onb-progress-bar {
  width: 100%;
  height: 12px;
  background: var(--cw-gray-100);
  border-radius: var(--cw-radius-full);
  overflow: hidden;
}

.onb-progress-fill {
  height: 100%;
  border-radius: var(--cw-radius-full);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.onb-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.onb-progress-complete {
  text-align: center;
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: #059669;
  animation: fadeSlideUp 0.4s ease;
}

/* === Recent Activity === */
.onb-recent-activity {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
}

.onb-recent-list { display: flex; flex-direction: column; gap: 8px; }

.onb-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--cw-radius-sm);
  transition: var(--cw-transition);
}

.onb-recent-item:hover { background: var(--cw-gray-50); }

.onb-recent-check { font-size: 1rem; }

.onb-recent-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cw-gray-700);
}

.onb-recent-meta {
  font-size: 0.78rem;
  color: var(--cw-gray-500);
}

/* === Onboarding Definition Card === */
.onb-definition-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, var(--cw-purple-50), rgba(124, 58, 237, 0.04));
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--cw-purple-200);
}

.onb-definition-icon { font-size: 2rem; }

.onb-definition-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-purple-700);
  margin-bottom: 4px;
}

.onb-definition-text {
  font-size: 0.88rem;
  color: var(--cw-gray-600);
  line-height: 1.6;
}

/* === Checklist Sections === */
.onb-checklist-sections { display: flex; flex-direction: column; gap: 16px; }

.onb-checklist-section {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  overflow: hidden;
  animation: fadeSlideUp 0.4s ease;
}

.onb-checklist-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
  transition: var(--cw-transition);
  user-select: none;
}

.onb-checklist-section-header:hover {
  background: var(--cw-gray-50);
}

.onb-checklist-section-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.onb-section-step {
  width: 36px;
  height: 36px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-500), var(--cw-purple-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  flex-shrink: 0;
}

.onb-section-period-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cw-purple-600);
}

.onb-section-title-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}

.onb-checklist-section-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.onb-section-progress-mini {
  display: flex;
  align-items: center;
  gap: 8px;
}

.onb-section-fraction {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cw-gray-600);
}

.onb-chevron {
  font-size: 0.75rem;
  color: var(--cw-gray-400);
  transition: transform 0.3s ease;
}

.onb-checklist-section.collapsed .onb-chevron {
  transform: rotate(-90deg);
}

.onb-section-description {
  padding: 0 24px 12px;
  font-size: 0.85rem;
  color: var(--cw-gray-500);
  line-height: 1.5;
  border-bottom: 1px solid var(--cw-gray-50);
}

.onb-checklist-items {
  padding: 4px 24px 12px;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.onb-checklist-section.collapsed .onb-checklist-items,
.onb-checklist-section.collapsed .onb-section-description {
  display: none;
}

/* === Check Item === */
.onb-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--cw-gray-50);
  border-radius: var(--cw-radius-sm);
  transition: var(--cw-transition);
  position: relative;
}

.onb-check-item:last-child { border-bottom: none; }

.onb-check-item:hover { background: var(--cw-gray-50); }

.onb-check-item.completed { opacity: 0.7; }
.onb-check-item.completed .onb-check-title { text-decoration: line-through; color: var(--cw-gray-400); }

.onb-check-form { display: inline; }

.onb-check-btn {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  margin-top: 2px;
}

.onb-check-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--cw-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--cw-transition);
  flex-shrink: 0;
}

.onb-check-item.completed .onb-check-box {
  background: var(--cw-green);
  border-color: var(--cw-green);
  color: #fff;
}

.onb-check-btn:hover .onb-check-box {
  border-color: var(--cw-purple-400);
  background: var(--cw-purple-50);
}

.onb-check-content { flex: 1; min-width: 0; }

.onb-check-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cw-gray-700);
}

.onb-check-action {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  margin-top: 2px;
}

.onb-check-link {
  font-size: 0.82rem;
  color: var(--cw-purple-600);
  font-weight: 600;
  margin-top: 4px;
  display: inline-block;
}

.onb-check-date {
  font-size: 0.75rem;
  color: var(--cw-gray-400);
  margin-top: 4px;
  font-style: italic;
}

/* Check Loading */
.onb-check-loading-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--cw-gray-200);
  border-top-color: var(--cw-purple-500);
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
  position: absolute;
  right: 12px;
  top: 14px;
}

.onb-check-item.loading .onb-check-loading-spinner { display: block; }
.onb-check-item.loading .onb-check-box { opacity: 0.3; }

/* === Roleplay Metrics (Dashboard sidebar) === */
.onb-roleplay-metrics { padding: 0 24px 20px; }

.onb-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--cw-gray-50);
}

.onb-metric-label {
  font-size: 0.88rem;
  color: var(--cw-gray-600);
}

.onb-metric-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--cw-gray-900);
}

.onb-metric-divider {
  height: 1px;
  background: var(--cw-gray-100);
  margin: 12px 0;
}

.onb-metric-subtitle {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cw-gray-700);
  margin-bottom: 8px;
}

.onb-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.onb-badge-label { font-size: 0.88rem; color: var(--cw-gray-600); }
.onb-badge-count { font-size: 0.92rem; font-weight: 800; color: var(--cw-gray-800); }

/* === Ranking List === */
.onb-ranking-list { padding: 0 24px 16px; }

.onb-ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--cw-gray-50);
  border-radius: var(--cw-radius-sm);
  cursor: pointer;
  transition: var(--cw-transition);
}

.onb-ranking-item:hover { background: var(--cw-gray-50); }

.onb-ranking-position {
  width: 32px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--cw-gray-600);
}

.onb-ranking-rep { flex: 1; min-width: 0; }

.onb-rep-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cw-gray-700);
}

.onb-rep-badge-inline {
  font-size: 0.78rem;
  font-weight: 600;
}

.onb-ranking-score {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cw-purple-600);
}

.onb-score-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--cw-radius-full);
  font-weight: 800;
  font-size: 0.9rem;
}

/* === Alerts === */
.onb-alerts-card { border-top: 3px solid var(--cw-orange); }

.onb-alerts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 24px 20px;
}

.onb-alert-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.onb-alert-item {
  padding: 10px 12px;
  border-radius: var(--cw-radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: var(--cw-transition);
}

.onb-alert-item.danger {
  background: #fef2f2;
  border-left: 3px solid #ef4444;
}

.onb-alert-item.warning {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
}

.onb-alert-item:hover { transform: translateX(3px); }

.onb-alert-rep {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cw-gray-700);
}

.onb-alert-detail {
  font-size: 0.78rem;
  color: var(--cw-gray-500);
  margin-top: 2px;
}

.onb-alert-empty {
  font-size: 0.88rem;
  color: var(--cw-gray-500);
  padding: 12px 0;
}

/* === Roleplay Overview Card === */
.rp-overview-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 32px;
  margin-bottom: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-md);
  animation: fadeSlideUp 0.5s ease;
  flex-wrap: wrap;
}

.rp-score-circle {
  width: 100px;
  height: 100px;
  border-radius: var(--cw-radius-full);
  border: 4px solid var(--score-color, var(--cw-purple-600));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.03), rgba(124, 58, 237, 0.08));
}

.rp-score-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--score-color, var(--cw-purple-600));
}

.rp-score-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cw-gray-500);
  margin-top: 2px;
}

.rp-badge-display {
  padding: 16px 24px;
  border-radius: var(--cw-radius-lg);
  border: 2px solid;
  text-align: center;
}

.rp-badge-emoji { font-size: 2rem; display: block; margin-bottom: 4px; }

.rp-badge-title {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rp-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-meta-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--cw-gray-50);
}

.rp-meta-label {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  font-weight: 500;
}

.rp-meta-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cw-gray-700);
}

/* === Roleplay Criteria Grid === */
.rp-criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.rp-criteria-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 20px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  animation: fadeSlideUp 0.4s ease;
}

.rp-criteria-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rp-criteria-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}

.rp-criteria-score {
  font-size: 1.5rem;
  font-weight: 800;
}

.rp-criteria-desc {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  margin-bottom: 12px;
  line-height: 1.4;
}

.rp-score-bar {
  height: 8px;
  background: var(--cw-gray-100);
  border-radius: var(--cw-radius-full);
  overflow: hidden;
  margin-bottom: 8px;
}

.rp-score-bar-fill {
  height: 100%;
  border-radius: var(--cw-radius-full);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.rp-criteria-notes {
  font-size: 0.82rem;
  color: var(--cw-gray-600);
  padding: 10px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-sm);
  line-height: 1.5;
}

.rp-criteria-form-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--cw-gray-50);
}

.rp-criteria-form-header h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cw-gray-700);
  margin-bottom: 4px;
}

/* === Roleplay Feedback Card === */
.rp-feedback-card {
  background: linear-gradient(135deg, var(--cw-purple-50), rgba(124, 58, 237, 0.04));
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  border: 1px solid var(--cw-purple-200);
  margin-bottom: 24px;
}

.rp-feedback-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cw-purple-700);
  margin-bottom: 8px;
}

.rp-feedback-card p {
  font-size: 0.92rem;
  color: var(--cw-gray-700);
  line-height: 1.6;
}

/* === Rep Roleplay Hero === */
.rp-hero-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-xl);
  padding: 32px;
  margin-bottom: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-lg);
  animation: fadeSlideUp 0.5s ease;
  flex-wrap: wrap;
}

.rp-hero-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.rp-hero-badge {
  padding: 20px 28px;
  border-radius: var(--cw-radius-lg);
  border: 2px solid;
  text-align: center;
}

.rp-hero-emoji { font-size: 2.5rem; display: block; margin-bottom: 4px; }

.rp-hero-badge-label {
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rp-hero-score-display { text-align: center; }

.rp-hero-score {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}

.rp-hero-score-label {
  font-size: 0.78rem;
  color: var(--cw-gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rp-hero-right { flex: 1; min-width: 180px; }

.rp-hero-date-highlight {
  padding: 16px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-md);
  text-align: center;
}

.rp-hero-date-label {
  font-size: 0.75rem;
  color: var(--cw-gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rp-hero-date-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cw-gray-800);
  margin: 4px 0;
}

.rp-hero-date-full {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
}

.rp-hero-alert {
  margin-top: 12px;
  padding: 8px 12px;
  background: #fef2f2;
  color: #ef4444;
  border-radius: var(--cw-radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  animation: pulseAlert 2s ease-in-out infinite;
}

@keyframes pulseAlert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.rp-hero-stats {
  display: flex;
  gap: 24px;
}

.rp-hero-stat { text-align: center; }

.rp-hero-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cw-purple-600);
}

.rp-hero-stat-label {
  font-size: 0.72rem;
  color: var(--cw-gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === Score Items (Rep view) === */
.rp-last-scores {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
}

.rp-scores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.rp-score-item {
  padding: 12px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-md);
}

.rp-score-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rp-score-item-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cw-gray-700);
}

.rp-score-item-value {
  font-size: 1.3rem;
  font-weight: 800;
}

/* === Timeline === */
.rp-history {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
}

.rp-timeline { display: flex; flex-direction: column; gap: 4px; }

.rp-timeline-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 12px;
  border-radius: var(--cw-radius-md);
  cursor: pointer;
  transition: var(--cw-transition);
  position: relative;
}

.rp-timeline-item:hover {
  background: var(--cw-gray-50);
}

.rp-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--cw-radius-full);
  flex-shrink: 0;
}

.rp-timeline-content { flex: 1; min-width: 0; }

.rp-timeline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.rp-timeline-date {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cw-gray-700);
}

.rp-timeline-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--cw-radius-full);
  font-size: 0.78rem;
  font-weight: 700;
}

.rp-timeline-evaluator {
  font-size: 0.78rem;
  color: var(--cw-gray-500);
}

.rp-timeline-feedback {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  font-style: italic;
  margin-top: 4px;
}

.rp-timeline-arrow {
  color: var(--cw-gray-300);
  font-size: 1rem;
}

/* === Dashboard Widgets === */
.onb-dash-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.onb-widget-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  cursor: pointer;
  transition: var(--cw-transition);
  animation: fadeSlideUp 0.4s ease;
}

.onb-widget-card:hover {
  box-shadow: var(--cw-shadow-lg);
  border-color: var(--cw-purple-200);
  transform: translateY(-3px);
}

.onb-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.onb-widget-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}

.onb-widget-link {
  font-size: 0.82rem;
  color: var(--cw-purple-600);
  font-weight: 600;
}

.onb-widget-progress { margin-bottom: 16px; }

.onb-widget-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.onb-widget-pct {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cw-gray-700);
}

.onb-widget-fraction {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
}

.onb-widget-recent { margin-top: 12px; }

.onb-widget-recent-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cw-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.onb-widget-recent-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.82rem;
  color: var(--cw-gray-600);
}

.onb-widget-recent-item .text-muted { margin-left: auto; }

/* Roleplay Widget */
.rp-widget-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.rp-widget-score { text-align: center; }

.rp-widget-score-value {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.rp-widget-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--cw-radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 6px;
}

.rp-widget-date { flex: 1; }

.rp-widget-date-label {
  font-size: 0.75rem;
  color: var(--cw-gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rp-widget-date-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin: 4px 0;
}

.rp-widget-alert {
  margin-top: 8px;
  padding: 6px 10px;
  background: #fef2f2;
  color: #ef4444;
  border-radius: var(--cw-radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
}

.rp-widget-empty {
  text-align: center;
  padding: 20px;
  color: var(--cw-gray-500);
}

/* Nav badge */
.nav-badge {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--cw-red);
  color: #fff;
  border-radius: var(--cw-radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}

/* === Responsive === */
@media (max-width: 768px) {
  .onb-page-header { flex-direction: column; }
  .onb-kpi-grid { grid-template-columns: 1fr 1fr; }
  .onb-dashboard-grid { grid-template-columns: 1fr; }
  .onb-alerts-grid { grid-template-columns: 1fr; }
  .rp-overview-card { flex-direction: column; text-align: center; }
  .rp-hero-card { flex-direction: column; text-align: center; }
  .rp-hero-left { flex-direction: column; }
  .rp-criteria-grid { grid-template-columns: 1fr; }
  .onb-form-row { flex-direction: column; }
  .onb-dash-widgets { grid-template-columns: 1fr; }
  .onb-templates-grid { grid-template-columns: 1fr; }
}

/* === Global Loading Helper === */
.loading-overlay {
  position: relative;
}

.loading-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 10;
}

/* =============================================
   CALCULADORA DE COMISSÃO
   ============================================= */
.calc-page {
  animation: cardSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.calc-main-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

/* === Sections === */
.calc-section {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 28px;
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  margin-bottom: 20px;
  transition: var(--cw-transition);
}

.calc-section:hover {
  box-shadow: var(--cw-shadow-md);
}

.calc-section-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.calc-section-number {
  width: 36px;
  height: 36px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-500), var(--cw-purple-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}

.calc-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cw-gray-900);
  margin-bottom: 2px;
}

.calc-section-subtitle {
  font-size: 0.85rem;
  color: var(--cw-gray-500);
}

/* === Plan Cards === */
.calc-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.calc-plan-card {
  position: relative;
  background: var(--cw-gray-50);
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-lg);
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.calc-plan-card:hover {
  border-color: var(--cw-purple-300);
  background: var(--cw-purple-50);
  transform: translateY(-2px);
  box-shadow: var(--cw-shadow-md);
}

.calc-plan-card.selected {
  border-color: var(--cw-purple-500);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.02));
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), var(--cw-shadow-md);
}

.calc-plan-card.selected::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  background: var(--cw-purple-600);
  color: #fff;
  border-radius: var(--cw-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.calc-plan-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.calc-plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--cw-orange), #d97706);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: var(--cw-radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.calc-plan-icon {
  font-size: 2.2rem;
  margin-bottom: 4px;
}

.calc-plan-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}

.calc-plan-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cw-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calc-plan-price {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cw-purple-700);
  margin-top: 4px;
}

.calc-plan-price span {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--cw-gray-400);
}

/* === Addon Cards === */
.calc-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.calc-addon-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cw-gray-50);
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  cursor: pointer;
  transition: var(--cw-transition);
  position: relative;
}

.calc-addon-card:hover {
  border-color: var(--cw-purple-300);
  background: #fff;
}

.calc-addon-card:has(input:checked) {
  border-color: var(--cw-green);
  background: #ecfdf5;
}

.calc-addon-check {
  width: 20px;
  height: 20px;
  accent-color: var(--cw-green);
  flex-shrink: 0;
  cursor: pointer;
}

.calc-addon-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.calc-addon-icon {
  font-size: 1.3rem;
}

.calc-addon-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cw-gray-800);
}

.calc-addon-price {
  font-size: 0.78rem;
  color: var(--cw-gray-500);
  font-weight: 500;
}

.calc-addon-tooltip {
  position: relative;
}

.calc-tooltip-trigger {
  cursor: help;
  font-size: 0.9rem;
}

.calc-tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  right: -8px;
  background: var(--cw-gray-900);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--cw-radius-md);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: var(--cw-transition);
  z-index: 20;
  pointer-events: none;
}

.calc-tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 16px;
  border: 6px solid transparent;
  border-top-color: var(--cw-gray-900);
}

.calc-addon-tooltip:hover .calc-tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.calc-ticket-summary {
  margin-top: 20px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--cw-purple-50), rgba(124, 58, 237, 0.06));
  border-radius: var(--cw-radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--cw-gray-600);
}

.calc-ticket-summary strong {
  font-size: 1.3rem;
  color: var(--cw-purple-700);
  font-weight: 800;
}

/* === Plan Value Section (clients form) === */
.pm-value-section {
  border-top: 1px solid var(--cw-purple-100);
  padding-top: 18px;
}

.pm-value-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: end;
}

@media (max-width: 560px) {
  .pm-value-row {
    grid-template-columns: 1fr;
  }
}

.pm-plan-type-wrap,
.pm-contract-value-wrap {
  margin-bottom: 0;
}

.pm-currency-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pm-currency-prefix {
  position: absolute;
  left: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cw-gray-500);
  pointer-events: none;
  z-index: 1;
}

.pm-contract-input {
  padding-left: 36px !important;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cw-purple-700);
}

.pm-monthly-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.pm-monthly-info-label {
  font-size: 0.85rem;
  color: #065f46;
}

.pm-monthly-info-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: #059669;
}

.pm-monthly-info-unit {
  font-size: 0.8rem;
  color: #6b7280;
}

/* === Commission Checks === */
.calc-commission-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.calc-commission-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--cw-gray-50);
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  cursor: pointer;
  transition: var(--cw-transition);
}

.calc-commission-item:hover {
  border-color: var(--cw-purple-300);
}

.calc-commission-item:has(input:checked) {
  border-color: var(--cw-green);
  background: #ecfdf5;
}

.calc-commission-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--cw-green);
  cursor: pointer;
}

.calc-commission-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calc-commission-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cw-gray-700);
}

.calc-commission-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--cw-green);
  background: #d1fae5;
  padding: 2px 10px;
  border-radius: var(--cw-radius-full);
}

.calc-commission-total-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border-radius: var(--cw-radius-md);
  border: 1px solid #fbbf24;
}

.calc-commission-total-row label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cw-gray-700);
}

.calc-commission-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.calc-commission-input {
  width: 72px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cw-purple-700);
  background: #fff;
  border: 2px solid var(--cw-purple-300);
  border-radius: var(--cw-radius-md);
  padding: 6px 8px;
}

.calc-commission-input:focus {
  outline: none;
  border-color: var(--cw-purple-500);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.calc-commission-edit-hint {
  font-size: 0.78rem;
  color: var(--cw-gray-400);
  font-weight: 500;
}

/* === Param Fields === */
.calc-params-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.calc-param-field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cw-gray-700);
  margin-bottom: 8px;
}

.calc-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cw-gray-50);
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  padding: 10px 14px;
  transition: var(--cw-transition);
}

.calc-input-wrapper:focus-within {
  border-color: var(--cw-purple-400);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.calc-input-icon {
  font-size: 1.1rem;
}

.calc-input-number {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cw-gray-900);
  font-family: 'Inter', sans-serif;
  width: 100%;
  outline: none;
}

.calc-input-number::-webkit-inner-spin-button {
  opacity: 1;
}

.calc-input-suffix {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cw-gray-400);
  flex-shrink: 0;
}

.calc-param-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--cw-gray-400);
  margin-top: 6px;
  font-weight: 500;
}

.calc-param-hint.recommended {
  color: var(--cw-orange);
  font-weight: 600;
}

/* === Generate Button === */
.calc-generate-btn {
  width: 100%;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--cw-purple-600), var(--cw-purple-800));
  color: #fff;
  border: none;
  border-radius: var(--cw-radius-md);
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.calc-generate-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s;
}

.calc-generate-btn:hover {
  background: linear-gradient(135deg, var(--cw-purple-700), var(--cw-purple-900));
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.35);
  transform: translateY(-2px);
}

.calc-generate-btn:hover::before {
  left: 100%;
}

.calc-generate-btn:active {
  transform: translateY(0);
}

.calc-generate-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.calc-btn-icon {
  font-size: 1.3rem;
}

.calc-btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.calc-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: calcSpin 0.8s linear infinite;
}

@keyframes calcSpin {
  to { transform: rotate(360deg); }
}

/* === Results Area === */
.calc-results-area {
  margin-top: 4px;
}

.calc-fade-in {
  animation: calcFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes calcFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Totalizers */
.calc-totalizers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.calc-totalizer-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--cw-shadow-md), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: var(--cw-transition);
}

.calc-totalizer-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cw-shadow-lg);
}

.calc-totalizer-card.year1 {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0.02));
  border-color: var(--cw-purple-200);
}

.calc-totalizer-card.year2 {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
  border-color: #fbbf24;
}

.calc-totalizer-card.monthly {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
  border-color: #6ee7b7;
}

.calc-totalizer-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.calc-totalizer-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cw-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.calc-totalizer-value {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.calc-totalizer-card.year1 .calc-totalizer-value {
  color: var(--cw-purple-700);
}

.calc-totalizer-card.year2 .calc-totalizer-value {
  color: #d97706;
}

.calc-totalizer-card.monthly .calc-totalizer-value {
  color: #059669;
}

/* Chart */
.calc-chart-container {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  margin-bottom: 20px;
}

.calc-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.calc-chart-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}

.calc-chart-wrapper {
  position: relative;
  height: 380px;
}

/* Detail Table */
.calc-detail-section {
  margin-bottom: 20px;
}

.calc-detail-toggle {
  width: 100%;
  padding: 14px 20px;
  background: var(--cw-bg-card);
  border: 1px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cw-gray-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--cw-transition);
  font-family: 'Inter', sans-serif;
}

.calc-detail-toggle:hover {
  background: var(--cw-purple-50);
  border-color: var(--cw-purple-300);
  color: var(--cw-purple-700);
}

.calc-toggle-arrow {
  font-size: 0.75rem;
  transition: var(--cw-transition);
}

.calc-detail-table-wrapper {
  margin-top: 12px;
  border-radius: var(--cw-radius-md);
  overflow: hidden;
  border: 1px solid var(--cw-gray-200);
}

.calc-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.calc-detail-table th {
  background: var(--cw-gray-50);
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--cw-gray-600);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--cw-gray-200);
}

.calc-detail-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--cw-gray-100);
  color: var(--cw-gray-700);
}

.calc-detail-table tr:hover {
  background: var(--cw-purple-50);
}

.calc-detail-table tr.calc-table-highlight {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.06), transparent);
  border-left: 3px solid var(--cw-purple-500);
}

.calc-detail-table tr.calc-table-highlight-final {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent);
  border-left: 3px solid var(--cw-orange);
}

.calc-td-churn {
  color: var(--cw-red);
  font-weight: 600;
}

.calc-td-commission {
  color: var(--cw-green);
}

/* Save Section */
.calc-save-section {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 20px 24px;
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  transition: all 0.4s ease;
}

.calc-save-section.calc-save-success {
  border-color: var(--cw-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.calc-save-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.calc-save-icon {
  font-size: 1.5rem;
}

.calc-save-input {
  flex: 1;
  padding: 10px 16px;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.92rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  transition: var(--cw-transition);
  outline: none;
}

.calc-save-input:focus {
  border-color: var(--cw-purple-400);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.calc-save-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--cw-green), #059669);
  color: #fff;
  border: none;
  border-radius: var(--cw-radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--cw-transition);
  white-space: nowrap;
}

.calc-save-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transform: translateY(-1px);
}

/* === Snapshots Sidebar === */
.calc-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 28px);
}

.calc-sidebar-header {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg) var(--cw-radius-lg) 0 0;
  padding: 20px 20px 16px;
  border: 1px solid var(--cw-gray-100);
  border-bottom: none;
}

.calc-sidebar-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}

.calc-snapshots-list {
  background: var(--cw-bg-card);
  border-radius: 0 0 var(--cw-radius-lg) var(--cw-radius-lg);
  border: 1px solid var(--cw-gray-100);
  border-top: none;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.calc-snapshot-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cw-gray-100);
  transition: var(--cw-transition);
}

.calc-snapshot-item:last-child {
  border-bottom: none;
}

.calc-snapshot-item:hover {
  background: var(--cw-purple-50);
}

.calc-snapshot-item.active {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.06), transparent);
  border-left: 3px solid var(--cw-purple-500);
}

.calc-snapshot-info {
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.calc-snapshot-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cw-gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calc-snapshot-date {
  font-size: 0.75rem;
  color: var(--cw-gray-400);
  margin-top: 2px;
}

.calc-snapshot-summary {
  font-size: 0.78rem;
  color: var(--cw-gray-500);
  margin-top: 4px;
}

.calc-snapshot-summary strong {
  color: var(--cw-purple-700);
}

.calc-snapshot-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: var(--cw-transition);
}

.calc-snapshot-item:hover .calc-snapshot-actions {
  opacity: 1;
}

.calc-snapshot-pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--cw-radius-sm);
  background: linear-gradient(135deg, #1e40af, #2563eb);
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  transition: var(--cw-transition);
}

.calc-snapshot-pdf:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
}

.calc-snapshot-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  border-radius: var(--cw-radius-sm);
  transition: var(--cw-transition);
}

.calc-snapshot-delete:hover {
  background: #fef2f2;
}

.calc-snapshots-empty {
  padding: 32px 20px;
  text-align: center;
}

.calc-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.calc-snapshots-empty p {
  font-size: 0.88rem;
  color: var(--cw-gray-500);
  margin-bottom: 4px;
}

.calc-empty-hint {
  font-size: 0.78rem !important;
  color: var(--cw-gray-400) !important;
}

/* === Responsive === */
@media (max-width: 1100px) {
  .calc-main-grid {
    grid-template-columns: 1fr;
  }

  .calc-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .calc-plans-grid {
    grid-template-columns: 1fr;
  }

  .calc-totalizers {
    grid-template-columns: 1fr;
  }

  .calc-params-grid {
    grid-template-columns: 1fr;
  }

  .calc-addons-grid {
    grid-template-columns: 1fr;
  }

  .calc-save-inner {
    flex-direction: column;
  }

  .calc-commission-total-row {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

/* ===========================================================
   CONTRACTS — Gestão de Contratos
   =========================================================== */

/* === Page Header === */
.ct-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.ct-page-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cw-gray-900);
  letter-spacing: -0.02em;
}

.ct-page-subtitle {
  font-size: 0.9rem;
  color: var(--cw-gray-500);
  margin-top: 4px;
}

.ct-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ct-breadcrumb {
  margin-bottom: 8px;
}

.ct-breadcrumb a {
  font-size: 0.85rem;
  color: var(--cw-purple-600);
  font-weight: 600;
  text-decoration: none;
  transition: var(--cw-transition);
}

.ct-breadcrumb a:hover {
  color: var(--cw-purple-800);
}

/* === Filters === */
.ct-filters {
  margin-bottom: 24px;
}

.ct-filter-form {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ct-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ct-filter-group label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cw-gray-500);
}

.ct-filter-group select {
  padding: 8px 14px;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.88rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-700);
  background: var(--cw-bg-card);
  outline: none;
  transition: var(--cw-transition);
  cursor: pointer;
  min-width: 200px;
}

.ct-filter-group select:focus {
  border-color: var(--cw-purple-400);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

/* === Section === */
.ct-section {
  margin-bottom: 28px;
}

.ct-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-section-title.ct-urgent {
  color: #dc2626;
}

.ct-section-subtitle {
  font-size: 0.88rem;
  color: var(--cw-gray-500);
  margin-top: -10px;
  margin-bottom: 16px;
}

.ct-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  background: var(--cw-purple-100);
  color: var(--cw-purple-700);
  border-radius: var(--cw-radius-full);
  font-size: 0.78rem;
  font-weight: 700;
}

.ct-badge-danger {
  background: #fef2f2;
  color: #dc2626;
  animation: ctPulse 2s infinite;
}

/* === General Docs Grid === */
.ct-general-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.ct-general-doc-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 20px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  transition: var(--cw-transition);
  animation: fadeSlideUp 0.4s ease;
}

.ct-general-doc-card:hover {
  box-shadow: var(--cw-shadow-md);
  transform: translateY(-2px);
}

.ct-general-doc-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin: 10px 0 8px;
}

.ct-doc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--cw-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.ct-doc-type-badge-sm {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: var(--cw-radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}

.ct-doc-meta {
  display: flex;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--cw-gray-500);
  margin-bottom: 12px;
}

.ct-acceptance-bar {
  width: 100%;
  height: 6px;
  background: var(--cw-gray-100);
  border-radius: var(--cw-radius-full);
  overflow: hidden;
  margin-bottom: 6px;
}

.ct-acceptance-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: var(--cw-radius-full);
  transition: width 0.5s ease;
}

.ct-acceptance-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
}

.ct-acceptance-text .ct-accepted {
  color: #059669;
}

.ct-acceptance-text .ct-pending {
  color: #f59e0b;
}

/* === Contract Cards Grid === */
.ct-contracts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.ct-contract-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 20px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  cursor: pointer;
  transition: var(--cw-transition);
  animation: fadeSlideUp 0.4s ease;
}

.ct-contract-card:hover {
  box-shadow: var(--cw-shadow-md);
  transform: translateY(-3px);
  border-color: var(--cw-purple-200);
}

.ct-contract-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ct-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--cw-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.ct-status-badge-lg {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--cw-radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: relative;
}

.ct-status-dropdown {
  position: relative;
}

.ct-status-dropdown:hover .ct-status-options {
  display: block;
}

.ct-status-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-md);
  box-shadow: var(--cw-shadow-lg);
  border: 1px solid var(--cw-gray-100);
  z-index: 20;
  min-width: 200px;
  overflow: hidden;
}

.ct-status-options a {
  display: block;
  padding: 10px 16px;
  font-size: 0.88rem;
  color: var(--cw-gray-700);
  text-decoration: none;
  transition: var(--cw-transition);
}

.ct-status-options a:hover {
  background: var(--cw-purple-50);
  color: var(--cw-purple-700);
}

.ct-contract-rep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ct-rep-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-400), var(--cw-purple-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ct-rep-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin: 0;
}

.ct-rep-location {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  margin: 0;
}

.ct-contract-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cw-gray-600);
  margin-bottom: 14px;
}

.ct-contract-stats {
  display: flex;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--cw-gray-100);
}

.ct-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ct-stat-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--cw-gray-900);
}

.ct-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cw-gray-500);
}

.ct-pending-value {
  color: #dc2626 !important;
}

/* === Empty State === */
.ct-empty-state {
  text-align: center;
  padding: 60px 24px;
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  border: 2px dashed var(--cw-gray-200);
}

.ct-empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.ct-empty-state h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cw-gray-700);
  margin-bottom: 6px;
}

.ct-empty-state p {
  font-size: 0.88rem;
  color: var(--cw-gray-500);
  margin-bottom: 16px;
}

/* === Rep Detail Card (admin show) === */
.ct-rep-detail-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, var(--cw-purple-50), rgba(124, 58, 237, 0.04));
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--cw-purple-200);
  animation: fadeSlideUp 0.4s ease;
}

.ct-rep-detail-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-500), var(--cw-purple-800));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  flex-shrink: 0;
}

.ct-rep-detail-info {
  flex: 1;
  min-width: 0;
}

.ct-rep-detail-info h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cw-gray-900);
  margin: 0 0 4px;
}

.ct-rep-detail-info p {
  font-size: 0.85rem;
  color: var(--cw-gray-500);
  margin: 0 0 2px;
}

.ct-rep-detail-stats {
  display: flex;
  gap: 24px;
}

/* === Timeline (Admin) === */
.ct-timeline {
  position: relative;
  padding-left: 20px;
}

.ct-timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cw-gray-200);
}

.ct-timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  animation: fadeSlideUp 0.4s ease;
}

.ct-timeline-dot {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: var(--cw-radius-full);
  background: var(--cw-bg-card);
  border: 2px solid var(--cw-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-left: -20px;
}

.ct-timeline-item.ct-accepted .ct-timeline-dot {
  border-color: #10b981;
  background: #ecfdf5;
}

.ct-timeline-item.ct-pending .ct-timeline-dot {
  border-color: #f59e0b;
  background: #fffbeb;
}

.ct-timeline-content {
  flex: 1;
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 18px 20px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
}

.ct-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.ct-doc-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ct-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: var(--cw-radius-full);
  font-size: 0.72rem;
  font-weight: 600;
}

.ct-scope-general {
  background: #fef3c7;
  color: #92400e;
}

.ct-scope-individual {
  background: #ede9fe;
  color: #6d28d9;
}

.ct-timeline-date {
  font-size: 0.78rem;
  color: var(--cw-gray-400);
  white-space: nowrap;
}

.ct-timeline-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin: 4px 0;
}

.ct-timeline-preview {
  font-size: 0.85rem;
  color: var(--cw-gray-500);
  line-height: 1.5;
  margin-bottom: 10px;
}

.ct-signature-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: #ecfdf5;
  border-radius: var(--cw-radius-md);
  font-size: 0.8rem;
  color: #065f46;
  font-weight: 500;
}

.ct-hash {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
  color: var(--cw-gray-500);
}

.ct-pending-notice {
  padding: 10px 14px;
  background: #fffbeb;
  border-radius: var(--cw-radius-md);
  font-size: 0.85rem;
  color: #92400e;
  font-weight: 600;
}

/* === Pending Section (Rep) === */
.ct-pending-section {
  background: linear-gradient(135deg, #fef2f2, #fff7ed);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  border: 1px solid #fecaca;
  animation: fadeSlideUp 0.4s ease;
}

.ct-pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.ct-pending-card {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--cw-radius-lg);
  transition: var(--cw-transition);
}

.ct-pending-card:hover {
  transform: translateY(-3px);
}

.ct-pending-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(245, 158, 11, 0.05));
  border-radius: var(--cw-radius-lg);
  border: 2px solid #f59e0b;
  animation: ctGlow 2s ease-in-out infinite;
}

.ct-pending-card-content {
  position: relative;
  z-index: 1;
  background: var(--cw-bg-card);
  border-radius: calc(var(--cw-radius-lg) - 2px);
  padding: 20px;
  margin: 2px;
}

.ct-pending-card-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin: 10px 0 6px;
}

.ct-pending-preview {
  font-size: 0.85rem;
  color: var(--cw-gray-500);
  line-height: 1.5;
  margin-bottom: 10px;
}

.ct-pending-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--cw-gray-500);
}

.ct-action-cta {
  color: var(--cw-purple-600);
  font-weight: 700;
}

@keyframes ctGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.15); }
  50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.35); }
}

/* === Rep Timeline === */
.ct-rep-timeline {
  position: relative;
  padding-left: 40px;
}

.ct-rep-timeline-item {
  position: relative;
  margin-bottom: 20px;
  animation: fadeSlideUp 0.4s ease;
}

.ct-rep-timeline-line {
  position: absolute;
  left: -28px;
  top: 28px;
  bottom: -20px;
  width: 2px;
  background: var(--cw-gray-200);
}

.ct-rep-timeline-item:last-child .ct-rep-timeline-line {
  display: none;
}

.ct-rep-timeline-dot {
  position: absolute;
  left: -40px;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--cw-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  z-index: 2;
}

.ct-dot-accepted {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cw-radius-full);
  background: #ecfdf5;
  border: 2px solid #10b981;
}

.ct-dot-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cw-radius-full);
  background: #fffbeb;
  border: 2px solid #f59e0b;
  animation: ctPulse 2s infinite;
}

.ct-rep-timeline-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 18px 20px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  transition: var(--cw-transition);
}

.ct-rep-timeline-card:hover {
  box-shadow: var(--cw-shadow-md);
}

.ct-rep-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.ct-rep-timeline-date {
  font-size: 0.78rem;
  color: var(--cw-gray-400);
}

.ct-rep-timeline-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin: 4px 0 10px;
}

.ct-acceptance-stamp {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-radius: var(--cw-radius-md);
  border: 1px solid #a7f3d0;
}

.ct-stamp-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.ct-stamp-info strong {
  display: block;
  font-size: 0.88rem;
  color: #065f46;
  margin-bottom: 2px;
}

.ct-stamp-info span {
  display: block;
  font-size: 0.78rem;
  color: #047857;
}

.ct-hash-mini {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  color: var(--cw-gray-500);
}

.ct-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--cw-purple-500), var(--cw-purple-700));
  color: #fff;
  border-radius: var(--cw-radius-md);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--cw-transition);
}

.ct-review-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* === Document Viewer === */
.ct-document-viewer {
  margin-bottom: 28px;
}

.ct-document-paper {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-gray-200);
  box-shadow: var(--cw-shadow-md);
  overflow: hidden;
  animation: fadeSlideUp 0.4s ease;
}

.ct-document-content {
  padding: 40px 48px;
  font-size: 0.95rem;
  color: var(--cw-gray-700);
  line-height: 1.8;
}

.ct-document-content p {
  margin-bottom: 14px;
}

.ct-document-content h1, .ct-document-content h2, .ct-document-content h3 {
  color: var(--cw-gray-900);
  margin-top: 24px;
  margin-bottom: 12px;
}

/* === Signature Box (Rep) === */
.ct-signature-box {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  border: 2px solid var(--cw-purple-200);
  box-shadow: var(--cw-shadow-md);
  overflow: hidden;
  animation: fadeSlideUp 0.5s ease;
}

.ct-signature-header {
  background: linear-gradient(135deg, var(--cw-purple-50), rgba(124, 58, 237, 0.06));
  padding: 20px 24px;
  border-bottom: 1px solid var(--cw-purple-100);
}

.ct-signature-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cw-purple-800);
  margin: 0 0 4px;
}

.ct-signature-header p {
  font-size: 0.88rem;
  color: var(--cw-gray-600);
  margin: 0;
}

.ct-signature-body {
  padding: 24px;
}

.ct-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--cw-gray-700);
  font-weight: 500;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-md);
  border: 2px solid var(--cw-gray-200);
  transition: var(--cw-transition);
}

.ct-checkbox-label:hover {
  border-color: var(--cw-purple-300);
  background: var(--cw-purple-50);
}

.ct-checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--cw-purple-600);
  flex-shrink: 0;
}

.ct-signature-info-preview {
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: var(--cw-radius-md);
  margin-bottom: 20px;
  border: 1px solid var(--cw-gray-100);
}

.ct-signature-info-preview p {
  font-size: 0.85rem;
  color: var(--cw-gray-600);
  margin: 0 0 6px;
}

.ct-signature-info-preview ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ct-signature-info-preview li {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  padding: 3px 0;
}

.ct-sign-btn {
  width: 100%;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--cw-radius-md);
  transition: all 0.3s ease;
  opacity: 0.5;
  cursor: not-allowed;
}

.ct-sign-btn.ct-sign-ready {
  opacity: 1;
  cursor: pointer;
  animation: ctSignPulse 1.5s infinite;
}

@keyframes ctSignPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
}

/* === Signature Done === */
.ct-signature-done {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-radius: var(--cw-radius-lg);
  padding: 28px;
  border: 2px solid #a7f3d0;
  animation: fadeSlideUp 0.5s ease;
}

.ct-signature-done-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.ct-signature-done-info h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #065f46;
  margin: 0 0 14px;
}

.ct-signature-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.ct-sig-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ct-sig-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #047857;
}

.ct-sig-value {
  font-size: 0.88rem;
  color: #065f46;
  font-weight: 500;
}

.ct-hash-full {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  word-break: break-all;
}

/* === Forms === */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ct-form-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  border: 1px solid var(--cw-gray-100);
  box-shadow: var(--cw-shadow-sm);
  animation: fadeSlideUp 0.4s ease;
}

.ct-form-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cw-gray-100);
}

.ct-form-group {
  margin-bottom: 16px;
}

.ct-form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cw-gray-600);
  margin-bottom: 6px;
}

.ct-form-input, .ct-form-select {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  background: var(--cw-gray-50);
  transition: var(--cw-transition);
  outline: none;
  box-sizing: border-box;
}

.ct-form-input:focus, .ct-form-select:focus, .ct-form-textarea:focus {
  border-color: var(--cw-purple-400);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

.ct-form-textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  background: var(--cw-gray-50);
  transition: var(--cw-transition);
  outline: none;
  resize: vertical;
  line-height: 1.6;
  box-sizing: border-box;
}

.ct-content-editor {
  font-family: 'Inter', sans-serif;
  min-height: 300px;
}

.ct-form-hint {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  margin-top: 4px;
}

.ct-form-hint.ct-warning {
  color: #d97706;
}

.ct-form-row {
  display: flex;
  gap: 16px;
}

.ct-form-half {
  flex: 1;
}

.ct-form-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--cw-radius-md);
  padding: 16px;
  margin-bottom: 8px;
}

.ct-form-errors h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #dc2626;
  margin: 0 0 8px;
}

.ct-form-errors ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.ct-form-errors li {
  font-size: 0.85rem;
  color: #991b1b;
}

.ct-form-info-box {
  padding: 16px 20px;
  background: #eff6ff;
  border-radius: var(--cw-radius-md);
  border: 1px solid #bfdbfe;
  font-size: 0.88rem;
  color: #1e40af;
}

.ct-form-info-box.ct-info-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.ct-form-info-box strong {
  display: block;
  margin-bottom: 6px;
}

.ct-form-info-box ul {
  list-style: disc;
  padding-left: 20px;
  margin: 4px 0 0;
}

.ct-form-info-box li {
  margin-bottom: 2px;
}

.ct-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.ct-affected-reps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ct-affected-rep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-full);
  font-size: 0.85rem;
  color: var(--cw-gray-700);
  font-weight: 500;
}

.ct-rep-mini-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-400), var(--cw-purple-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.btn-cw-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}

.btn-cw-danger:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

/* === Sidebar Nav Highlight (pulse) === */
.ct-nav-highlight {
  background: rgba(245, 158, 11, 0.08) !important;
  border-left: 3px solid #f59e0b !important;
}

.ct-badge-pulse {
  background: #dc2626 !important;
  animation: ctPulse 1.5s ease-in-out infinite !important;
}

@keyframes ctPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}

/* === Responsive === */
@media (max-width: 768px) {
  .ct-page-header {
    flex-direction: column;
  }

  .ct-filter-form {
    flex-direction: column;
  }

  .ct-filter-group select {
    min-width: 100%;
  }

  .ct-contracts-grid,
  .ct-general-docs-grid,
  .ct-pending-grid {
    grid-template-columns: 1fr;
  }

  .ct-rep-detail-card {
    flex-direction: column;
    text-align: center;
  }

  .ct-rep-detail-stats {
    justify-content: center;
  }

  .ct-document-content {
    padding: 24px 18px;
  }

  .ct-signature-details {
    grid-template-columns: 1fr;
  }

  .ct-form-row {
    flex-direction: column;
  }

  .ct-form-actions {
    flex-direction: column;
  }

  .ct-timeline {
    padding-left: 16px;
  }

  .ct-rep-timeline {
    padding-left: 36px;
  }
}

/* === PDF Buttons === */
.ct-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #1e40af, #1d4ed8);
  color: #fff;
  border-radius: var(--cw-radius-md);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--cw-transition);
  white-space: nowrap;
}

.ct-pdf-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(30, 64, 175, 0.25);
  color: #fff;
}

.ct-pdf-btn-lg {
  padding: 10px 20px;
  font-size: 0.88rem;
}

.ct-card-pdf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: rgba(30, 64, 175, 0.08);
  color: #1e40af;
  border-radius: var(--cw-radius-md);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--cw-transition);
  margin-top: 8px;
}

.ct-card-pdf:hover {
  background: #1e40af;
  color: #fff;
}

.ct-timeline-pdf-row {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.ct-timeline-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =============================================
   CLIENTS — Table, Filters, Chart, Cards
   ============================================= */

/* === Chart Card === */
.clients-chart-card {
  margin-bottom: 0;
}

.clients-chart-header {
  margin-bottom: 16px;
}

.clients-chart-wrapper {
  position: relative;
  height: 260px;
}

/* === Chart + City Ranking Row === */
.clients-chart-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: stretch;
}

.clients-chart-row .clients-chart-card {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}

/* === City / State Ranking Cards === */
.clients-city-ranking-card {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.clients-city-ranking-header {
  margin-bottom: 14px;
}

.clients-city-ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clients-city-ranking-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f9fafb;
  transition: background 0.15s;
}

.clients-city-ranking-item:hover {
  background: #f3f4f6;
}

.clients-city-ranking-item.top-1 {
  background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
}

.city-rank-pos {
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.city-trophy {
  font-size: 20px;
  line-height: 1;
}

.city-rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
}

.city-rank-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.city-rank-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-1 .city-rank-name {
  color: #92400e;
}

.city-rank-state {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
  text-transform: uppercase;
}

.city-rank-count {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-shrink: 0;
}

.city-count-badge {
  font-size: 16px;
  font-weight: 700;
  color: #7c3aed;
}

.top-1 .city-count-badge {
  color: #d97706;
}

.city-count-label {
  font-size: 10px;
  color: #9ca3af;
}

.clients-city-empty {
  text-align: center;
  color: #9ca3af;
  padding: 24px 0;
  font-size: 13px;
}

.clients-city-ranking-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  text-align: center;
}

.clients-city-all-link {
  font-size: 12px;
  color: #7c3aed;
  text-decoration: none;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.clients-city-all-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* === Modal Overlay === */
.clients-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.clients-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.clients-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.clients-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.clients-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #9ca3af;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.clients-modal-close:hover {
  color: #374151;
  background: #f3f4f6;
}

.clients-modal-body {
  overflow-y: auto;
  padding: 0 24px 24px;
}

/* === Modal Cities Table === */
.clients-cities-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 13px;
}

.clients-cities-table thead th {
  text-align: left;
  padding: 8px 10px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #f3f4f6;
  position: sticky;
  top: 0;
  background: #fff;
}

.clients-cities-table thead th:last-child,
.clients-cities-table td:last-child {
  text-align: right;
}

.clients-cities-table tbody tr {
  border-bottom: 1px solid #f9fafb;
  transition: background 0.1s;
}

.clients-cities-table tbody tr:hover {
  background: #f9fafb;
}

.clients-cities-table tbody tr.modal-top-row {
  background: #fef9c3;
}

.clients-cities-table tbody tr.modal-top-row:hover {
  background: #fef3c7;
}

.clients-cities-table td {
  padding: 10px 10px;
  color: #374151;
}

.modal-rank-cell {
  width: 36px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
  text-align: center !important;
}

.modal-top-row .modal-rank-cell {
  color: #d97706;
}

.modal-uf-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.modal-count-cell {
  font-weight: 700;
  color: #7c3aed;
}

.modal-top-row .modal-count-cell {
  color: #d97706;
}

/* === Toolbar === */
.clients-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.clients-filters {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1;
}

.clients-toolbar-actions {
  flex-shrink: 0;
}

/* === Filter Pills === */
.clients-filter-pills {
  display: flex;
  gap: 4px;
  background: var(--cw-gray-100);
  padding: 3px;
  border-radius: var(--cw-radius-md);
}

.clients-pill {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cw-gray-500);
  transition: var(--cw-transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.clients-pill:hover {
  color: var(--cw-purple-700);
  background: rgba(124, 58, 237, 0.06);
}

.clients-pill.active {
  background: #fff;
  color: var(--cw-purple-700);
  box-shadow: var(--cw-shadow-sm);
}

.pill-count {
  background: var(--cw-gray-200);
  color: var(--cw-gray-600);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--cw-radius-full);
}

.clients-pill.active .pill-count {
  background: var(--cw-purple-100);
  color: var(--cw-purple-700);
}

/* === Search + Rep Filter === */
.clients-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clients-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--cw-gray-50);
  border: 1.5px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  transition: var(--cw-transition);
}

.clients-search-input-wrap:focus-within {
  border-color: var(--cw-purple-400);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

.clients-search-input-wrap svg {
  color: var(--cw-gray-400);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.clients-search-input {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  outline: none;
  width: 220px;
  box-shadow: none !important;
}

.clients-search-input::placeholder {
  color: var(--cw-gray-400);
}

.clients-rep-select {
  min-width: 180px;
  font-size: 0.85rem !important;
  padding: 8px 12px !important;
}

/* === Table === */
.clients-table-wrap {
  overflow-x: auto;
  border-radius: var(--cw-radius-md);
}

.clients-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.clients-table thead th {
  background: var(--cw-gray-50);
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cw-gray-500);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--cw-gray-200);
}

.clients-table thead th:first-child {
  border-radius: var(--cw-radius-md) 0 0 0;
}

.clients-table thead th:last-child {
  border-radius: 0 var(--cw-radius-md) 0 0;
}

.clients-row {
  cursor: pointer;
  transition: var(--cw-transition);
}

.clients-row:hover {
  background: var(--cw-purple-50);
}

.clients-row td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--cw-gray-100);
  font-size: 0.88rem;
  vertical-align: middle;
}

/* === Name Cell === */
.clients-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clients-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--cw-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.clients-name {
  font-weight: 600;
  color: var(--cw-gray-800);
  white-space: nowrap;
}

.clients-origin-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--cw-purple-600);
  background: var(--cw-purple-50);
  padding: 1px 8px;
  border-radius: var(--cw-radius-full);
  margin-top: 2px;
}

/* === Contact Cell === */
.clients-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  color: var(--cw-gray-600);
}

/* === Rep Badge === */
.clients-rep-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cw-gray-700);
  background: var(--cw-gray-100);
  padding: 4px 10px;
  border-radius: var(--cw-radius-full);
  white-space: nowrap;
}

.clients-rep-badge svg {
  width: 13px;
  height: 13px;
}

/* === Value === */
.clients-value {
  font-weight: 700;
  color: var(--cw-green);
  white-space: nowrap;
}

/* === Date === */
.clients-date {
  font-size: 0.82rem;
  color: var(--cw-gray-600);
  white-space: nowrap;
}

/* === Status Badge === */
.clients-status-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--cw-radius-full);
  white-space: nowrap;
}

/* === Action Buttons === */
.clients-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.clients-action-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--cw-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cw-gray-500);
  transition: var(--cw-transition);
}

.clients-action-btn:hover {
  background: var(--cw-purple-50);
  color: var(--cw-purple-600);
}

.clients-action-btn.danger:hover {
  background: #fef2f2;
  color: var(--cw-red);
}

.clients-action-btn.success:hover {
  background: #ecfdf5;
  color: var(--cw-green);
}

.clients-action-btn svg {
  width: 16px;
  height: 16px;
}

/* button_to generates a form + button — reset styles */
.clients-actions form {
  display: inline;
  margin: 0;
  padding: 0;
}

.clients-actions button.clients-action-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* === Empty State === */
.clients-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--cw-gray-500);
}

.clients-empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.clients-empty h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cw-gray-700);
  margin-bottom: 6px;
}

.clients-empty p {
  font-size: 0.88rem;
}

/* === Client Detail Page === */
.client-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.client-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.client-detail-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cw-gray-400);
}

.client-detail-value {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--cw-gray-800);
}

/* === Client Opportunity Link === */
.client-opp-link {
  padding: 12px;
  background: var(--cw-gray-50);
  border-radius: var(--cw-radius-md);
  border: 1px solid var(--cw-gray-200);
}

.client-opp-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.client-opp-info strong {
  font-size: 0.92rem;
  color: var(--cw-gray-800);
}

/* =============================================
   OPPORTUNITY MODAL — Convert Button
   ============================================= */
.modal-convert-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--cw-gray-200);
}

.btn-convert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  border: none;
  border-radius: var(--cw-radius-md);
  font-size: 0.88rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--cw-transition);
  width: 100%;
  justify-content: center;
}

.btn-convert:hover {
  background: linear-gradient(135deg, #047857, #059669);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.btn-convert:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.btn-convert svg {
  flex-shrink: 0;
}

.modal-converted-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  border-radius: var(--cw-radius-md);
  font-size: 0.82rem;
  font-weight: 600;
  width: 100%;
  justify-content: center;
}

/* =============================================
   CLIENTS — Responsive
   ============================================= */
@media (max-width: 768px) {
  .clients-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .clients-filters {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .clients-filter-actions {
    flex-direction: column;
    width: 100%;
  }

  .clients-search-input {
    width: 100%;
  }

  .clients-search-input-wrap {
    width: 100%;
  }

  .clients-rep-select {
    width: 100%;
  }

  .clients-table-wrap {
    margin: 0 -24px;
    padding: 0 24px;
  }

  .client-detail-grid {
    grid-template-columns: 1fr;
  }

  .clients-chart-row {
    flex-direction: column;
  }

  .clients-city-ranking-card {
    width: 100%;
  }
}

/* =============================================
   ADMIN DASHBOARD — Premium Analytics
   ============================================= */

/* === KPI Row === */
.adm-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.adm-kpi-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 20px;
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: var(--cw-transition);
  position: relative;
  overflow: hidden;
}

.adm-kpi-card:hover {
  box-shadow: var(--cw-shadow-md);
  transform: translateY(-2px);
}

.adm-kpi-card.adm-kpi-highlight {
  background: linear-gradient(135deg, #7c3aed, #6d28d9, #5b21b6);
  border: none;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.adm-kpi-card.adm-kpi-highlight::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 100%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.adm-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--cw-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.adm-kpi-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.adm-kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cw-gray-400);
  margin-bottom: 2px;
}

.adm-kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cw-gray-900);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.adm-kpi-sub {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--cw-radius-full);
  margin-top: 4px;
  width: fit-content;
}

.adm-kpi-sub.positive {
  background: #ecfdf5;
  color: #059669;
}

.adm-kpi-sub.negative {
  background: #fef2f2;
  color: #dc2626;
}

/* === Card base === */
.adm-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  padding: 24px;
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  transition: var(--cw-transition-slow);
  position: relative;
}

.adm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.adm-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-card-title svg {
  width: 18px;
  height: 18px;
}

.adm-card-actions {
  display: flex;
  gap: 6px;
}

.adm-maximize-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--cw-radius-md);
  border: 1px solid var(--cw-gray-200);
  background: var(--cw-gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cw-gray-500);
  transition: var(--cw-transition);
}

.adm-maximize-btn:hover {
  background: var(--cw-purple-50);
  color: var(--cw-purple-600);
  border-color: var(--cw-purple-200);
}

/* === Rankings Row (Mês + Global) === */
.adm-rankings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}

/* === Charts Row === */
.adm-charts-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
}

.adm-chart-wrap {
  position: relative;
  height: 320px;
}

.adm-chart-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cw-gray-100);
  flex-wrap: wrap;
}

.adm-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cw-gray-500);
}

.adm-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--cw-radius-full);
  display: inline-block;
}

/* === Top Reps Ranking === */
.adm-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adm-rank-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--cw-radius-md);
  background: var(--cw-gray-50);
  border: 1px solid var(--cw-gray-100);
  transition: var(--cw-transition);
}

.adm-rank-item:first-child {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: #fde68a;
}

.adm-rank-item:hover {
  box-shadow: var(--cw-shadow-sm);
  transform: translateX(4px);
}

.adm-rank-pos {
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.adm-rank-medal {
  font-size: 1.4rem;
}

.adm-rank-number {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--cw-gray-400);
}

.adm-rank-info {
  flex: 1;
  min-width: 0;
}

.adm-rank-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-rank-stats {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  margin-bottom: 6px;
}

.adm-rank-clients {
  font-weight: 600;
  color: var(--cw-purple-600);
}

.adm-rank-revenue {
  font-weight: 700;
  color: var(--cw-green);
}

.adm-rank-bar-wrap {
  height: 6px;
  background: var(--cw-gray-200);
  border-radius: var(--cw-radius-full);
  overflow: hidden;
}

.adm-rank-bar {
  height: 100%;
  border-radius: var(--cw-radius-full);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 4px;
}

.adm-rank-tm {
  text-align: right;
  flex-shrink: 0;
  min-width: 70px;
}

.adm-rank-tm-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cw-gray-400);
}

.adm-rank-tm-value {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--cw-gray-700);
}

/* === Training Ranking Avatar === */
.tr-rank-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-400), var(--cw-purple-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

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

.tr-rank-xp-badge {
  flex-shrink: 0;
  min-width: 48px;
  text-align: center;
}

.tr-rank-xp-badge span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, #ede9fe, #f3e8ff);
  color: var(--cw-purple-600);
  font-size: 0.75rem;
  font-weight: 700;
}

/* === Metrics Grid === */
.adm-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.adm-metric-box {
  background: var(--cw-gray-50);
  border: 1px solid var(--cw-gray-100);
  border-radius: var(--cw-radius-md);
  padding: 20px;
  text-align: center;
  transition: var(--cw-transition);
}

.adm-metric-box:hover {
  background: var(--cw-purple-50);
  border-color: var(--cw-purple-200);
  transform: translateY(-2px);
}

.adm-metric-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.adm-metric-data {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}

.adm-metric-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--cw-gray-900);
  letter-spacing: -0.02em;
}

.adm-metric-unit {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cw-gray-400);
}

.adm-metric-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cw-gray-500);
  line-height: 1.3;
}

/* === Insights === */
.adm-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.adm-insight-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--cw-radius-md);
  background: var(--cw-gray-50);
  border: 1px solid var(--cw-gray-100);
  transition: var(--cw-transition);
}

.adm-insight-card:hover {
  box-shadow: var(--cw-shadow-sm);
  transform: translateY(-1px);
}

.adm-insight-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--cw-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.adm-insight-content {
  flex: 1;
  min-width: 0;
}

.adm-insight-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin-bottom: 4px;
}

.adm-insight-text {
  font-size: 0.82rem;
  color: var(--cw-gray-600);
  line-height: 1.5;
}

.adm-empty-sm {
  text-align: center;
  padding: 32px;
  color: var(--cw-gray-400);
  font-size: 0.88rem;
}

/* === Maximize / Fullscreen Overlay === */
.adm-maximized {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto;
  animation: admMaxIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.adm-maximized .adm-chart-wrap {
  height: calc(100vh - 200px);
}

.adm-maximized .adm-ranking-list {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.adm-maximized .adm-metrics-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin: 0 auto;
}

.adm-maximized .adm-insights-grid {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.adm-maximized .adm-maximize-btn svg {
  transform: rotate(180deg);
}

@keyframes admMaxIn {
  from {
    opacity: 0.7;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

body.adm-has-maximized {
  overflow: hidden;
}

/* ── Churn Analysis Row ── */
.adm-churn-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.adm-churn-card { padding-bottom: 6px; }

/* Rate pill */
.adm-churn-rate-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}
.adm-churn-pill-good     { background: #d1fae5; color: #065f46; }
.adm-churn-pill-warning  { background: #fef3c7; color: #92400e; }
.adm-churn-pill-critical { background: #fee2e2; color: #991b1b; }
.adm-churn-pill-empty    { background: #f3f4f6; color: #6b7280; }

/* Donut chart area */
.adm-donut-wrap { height: 200px; padding: 12px 16px 4px; }

/* Legend */
.adm-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 20px 14px;
  max-height: 120px;
  overflow-y: auto;
}
.adm-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  color: #374151;
}
.adm-donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.adm-donut-legend-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-donut-legend-pct  { font-weight: 700; color: #6b7280; font-size: 0.72rem; }

/* Insight card */
.adm-churn-insight { display: flex; flex-direction: column; }

.adm-churn-insight-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #f3f4f6;
}
.adm-churn-insight-good     { background: #f0fdf4; }
.adm-churn-insight-warning  { background: #fffbeb; }
.adm-churn-insight-critical { background: #fef2f2; }
.adm-churn-insight-empty    { background: #f9fafb; }

.adm-churn-insight-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.adm-churn-insight-good     .adm-churn-insight-icon { background: #d1fae5; color: #059669; }
.adm-churn-insight-warning  .adm-churn-insight-icon { background: #fef3c7; color: #d97706; }
.adm-churn-insight-critical .adm-churn-insight-icon { background: #fee2e2; color: #ef4444; }
.adm-churn-insight-empty    .adm-churn-insight-icon { background: #e5e7eb; color: #9ca3af; }

.adm-churn-insight-label  { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #9ca3af; }
.adm-churn-insight-target { font-size: 0.8rem; font-weight: 600; color: #374151; margin-top: 2px; }

.adm-churn-insight-body { padding: 16px 20px 12px; flex: 1; }
.adm-churn-insight-headline {
  font-size: 0.88rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 8px;
  line-height: 1.35;
}
.adm-churn-insight-text {
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.55;
  margin: 0;
}

/* Top reasons mini list */
.adm-churn-top-reasons { padding: 0 20px 12px; }
.adm-churn-top-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #9ca3af; margin-bottom: 8px; }
.adm-churn-top-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.76rem;
}
.adm-churn-top-name { width: 140px; flex-shrink: 0; color: #374151; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-churn-top-bar-wrap { flex: 1; height: 5px; background: #f3f4f6; border-radius: 3px; overflow: hidden; }
.adm-churn-top-bar { height: 100%; background: #7c3aed; border-radius: 3px; transition: width .4s ease; }
.adm-churn-top-pct { font-size: 0.72rem; font-weight: 700; color: #6b7280; width: 32px; text-align: right; flex-shrink: 0; }

/* Churn gauge */
.adm-churn-gauge { padding: 12px 20px 18px; }
.adm-churn-gauge-track {
  position: relative;
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: visible;
}
.adm-churn-gauge-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s ease;
  max-width: 100%;
}
.adm-churn-fill-good     { background: #10b981; }
.adm-churn-fill-warning  { background: #f59e0b; }
.adm-churn-fill-critical { background: #ef4444; }
.adm-churn-fill-empty    { background: #d1d5db; }

.adm-churn-gauge-target {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  background: #374151;
  border-radius: 1px;
  transform: translateX(-50%);
}
.adm-churn-gauge-target::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #374151;
  border-radius: 50%;
}
.adm-churn-gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #9ca3af;
  margin-top: 6px;
}
.adm-churn-gauge-meta-label { font-weight: 700; color: #374151; }

/* === Responsive === */
@media (max-width: 1400px) {
  .adm-kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1100px) {
  .adm-charts-row {
    grid-template-columns: 1fr;
  }
  .adm-rankings-row {
    grid-template-columns: 1fr;
  }
  .adm-churn-row {
    grid-template-columns: 1fr;
  }

  .adm-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .adm-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .adm-metrics-grid {
    grid-template-columns: 1fr;
  }

  .adm-insights-grid {
    grid-template-columns: 1fr;
  }

  .adm-chart-wrap {
    height: 250px;
  }
}

/* =============================================
   ADMIN DASHBOARD — KPI Strip (unified)
   ============================================= */
.adm-kpi-strip {
  display: flex;
  align-items: center;
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-shadow-sm);
  border: 1px solid var(--cw-gray-100);
  padding: 16px 8px;
  margin-bottom: 20px;
  gap: 0;
  overflow-x: auto;
}

.adm-kpi-slot {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  min-width: 0;
}

.adm-kpi-slot-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--cw-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.adm-kpi-slot-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.adm-kpi-slot-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cw-gray-900);
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.adm-kpi-slot-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cw-gray-400);
}

.adm-kpi-slot-sub {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--cw-radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.adm-kpi-slot-sub.positive {
  background: #ecfdf5;
  color: #059669;
}

.adm-kpi-slot-sub.negative {
  background: #fef2f2;
  color: #dc2626;
}

.adm-kpi-divider {
  width: 1px;
  height: 40px;
  background: var(--cw-gray-200);
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  .adm-kpi-strip {
    flex-wrap: wrap;
    gap: 8px;
  }
  .adm-kpi-divider {
    display: none;
  }
  .adm-kpi-slot {
    min-width: 140px;
  }
}

@media (max-width: 768px) {
  .adm-kpi-slot {
    min-width: 120px;
  }
}

/* =============================================
   PROFILE — Change Password Page
   ============================================= */
.profile-password-page {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.profile-password-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-shadow-md);
  border: 1px solid var(--cw-gray-100);
  max-width: 480px;
  width: 100%;
  padding: 36px;
}

.profile-password-header {
  text-align: center;
  margin-bottom: 28px;
}

.profile-password-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.profile-password-header h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cw-gray-900);
  margin-bottom: 4px;
}

.profile-password-header p {
  font-size: 0.88rem;
  color: var(--cw-gray-500);
}

.profile-alert {
  padding: 10px 14px;
  border-radius: var(--cw-radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.profile-alert.danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.profile-password-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--cw-gray-50);
  border: 1.5px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  transition: var(--cw-transition);
}

.profile-input-wrap:focus-within {
  border-color: var(--cw-purple-400);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

.profile-input-wrap svg {
  color: var(--cw-gray-400);
  flex-shrink: 0;
}

.profile-input-wrap .form-input {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  flex: 1;
  font-size: 0.92rem;
}

.profile-password-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.profile-password-info {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cw-gray-100);
  font-size: 0.82rem;
  color: var(--cw-gray-500);
}

.profile-password-info p {
  margin-bottom: 4px;
}

/* =============================================
   HEADER XP BAR
   ============================================= */
.header-xp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: var(--cw-radius-full);
  text-decoration: none;
  transition: var(--cw-transition);
  cursor: pointer;
}

.header-xp-bar:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(139, 92, 246, 0.1));
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.header-xp-level {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--cw-purple-700);
  background: var(--cw-purple-100);
  padding: 2px 8px;
  border-radius: var(--cw-radius-full);
  white-space: nowrap;
}

.header-xp-track {
  width: 60px;
  height: 6px;
  background: var(--cw-gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.header-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cw-purple-500), var(--cw-purple-400), #a78bfa);
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.header-xp-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: xpShimmer 2s ease-in-out infinite;
}

@keyframes xpShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.header-xp-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cw-gray-500);
  white-space: nowrap;
}

/* =============================================
   TREINAMENTOS — PAGE
   ============================================= */
.tr-page { max-width: 1400px; margin: 0 auto; overflow-x: hidden; }
.tr-show-page { overflow-x: hidden; }

/* ===== HERO ===== */
.tr-hero {
  background: linear-gradient(135deg, #1e1146 0%, #2d1b69 25%, #4c1d95 50%, #6d28d9 75%, #7c3aed 100%);
  border-radius: var(--cw-radius-xl);
  padding: 40px 44px 28px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.tr-hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.tr-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
  background: #fff;
}

.tr-shape-1 {
  width: 300px; height: 300px;
  top: -100px; right: -50px;
  animation: shapeFloat 8s ease-in-out infinite alternate;
}

.tr-shape-2 {
  width: 200px; height: 200px;
  bottom: -80px; left: 20%;
  animation: shapeFloat 10s ease-in-out infinite alternate-reverse;
  background: var(--cw-orange);
  opacity: 0.06;
}

.tr-shape-3 {
  width: 150px; height: 150px;
  top: 30%; right: 30%;
  animation: shapeFloat 6s ease-in-out infinite alternate;
  opacity: 0.04;
}

@keyframes shapeFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -15px) scale(1.1); }
}

.tr-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}

.tr-hero-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cw-orange);
  background: rgba(245, 158, 11, 0.15);
  padding: 4px 14px;
  border-radius: var(--cw-radius-full);
  margin-bottom: 8px;
  letter-spacing: 0.03em;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.tr-hero-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  line-height: 1.1;
}

.tr-hero-subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  max-width: 400px;
}

.tr-hero-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Stat Cards */
.tr-stat-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--cw-radius-lg);
  padding: 16px 20px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tr-stat-card .tr-stat-icon {
  font-size: 1.4rem;
}

.tr-stat-card .tr-stat-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tr-stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.tr-stat-total {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}

.tr-stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tr-stat-xp { min-width: 180px; }

.tr-xp-mini-bar {
  height: 5px;
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.tr-xp-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 3px;
  transition: width 1s ease;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.tr-stat-sublabel {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
}

/* Hero Progress */
.tr-hero-progress {
  position: relative;
  z-index: 1;
}

.tr-hero-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.tr-hero-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
  border-radius: 3px;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.tr-hero-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: xpShimmer 3s ease-in-out infinite;
}

.tr-hero-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}

/* ===== ADMIN BAR ===== */
.tr-admin-bar { display: flex; gap: 12px; margin-bottom: 24px; }

/* ===== BUTTONS ===== */
.tr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--cw-radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--cw-transition);
  border: none;
  text-decoration: none;
}

.tr-btn-primary {
  background: linear-gradient(135deg, var(--cw-purple-600), var(--cw-purple-700));
  color: #fff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.tr-btn-primary:hover {
  background: linear-gradient(135deg, var(--cw-purple-700), var(--cw-purple-800));
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
  color: #fff;
}

.tr-btn-lg { padding: 14px 28px; font-size: 1rem; border-radius: var(--cw-radius-lg); }

.tr-btn-outline {
  background: #fff;
  color: var(--cw-purple-600);
  border: 2px solid var(--cw-purple-200);
}

.tr-btn-outline:hover {
  background: var(--cw-purple-50);
  border-color: var(--cw-purple-400);
  transform: translateY(-1px);
}

.tr-btn-ghost { background: transparent; color: var(--cw-gray-500); }
.tr-btn-ghost:hover { background: var(--cw-gray-100); color: var(--cw-gray-700); }
.tr-btn-sm { padding: 8px 16px; font-size: 0.82rem; }

/* ===== CATEGORY SECTIONS ===== */
.tr-category-section {
  margin-bottom: 36px;
}

.tr-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 0 4px;
}

.tr-category-info {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.tr-category-icon {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cw-purple-50);
  border-radius: var(--cw-radius-lg);
  flex-shrink: 0;
}

.tr-category-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--cw-gray-800);
  letter-spacing: -0.02em;
}

.tr-category-desc {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
  margin-top: 2px;
  max-width: 500px;
}

.tr-category-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.tr-category-progress-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cw-purple-600);
}

.tr-category-progress-bar {
  width: 80px;
  height: 6px;
  background: var(--cw-gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.tr-category-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cw-purple-500), var(--cw-purple-400));
  border-radius: 3px;
  transition: width 0.8s ease;
}

/* Cards Horizontal Scroll */
.tr-cards-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.tr-cards-scroll::-webkit-scrollbar { height: 4px; }
.tr-cards-scroll::-webkit-scrollbar-track { background: transparent; }
.tr-cards-scroll::-webkit-scrollbar-thumb { background: var(--cw-gray-300); border-radius: 4px; }

.tr-card-wrapper {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

/* Cards */
.tr-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-gray-100);
  overflow: hidden;
  transition: var(--cw-transition-slow);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.tr-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(124, 58, 237, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
  border-color: var(--cw-purple-200);
}

.tr-card:hover .tr-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tr-card:hover .tr-card-thumb img { transform: scale(1.08); }

.tr-card-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background: var(--cw-gray-100);
}

.tr-card-thumb img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tr-card-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 52px; height: 52px;
  background: rgba(124, 58, 237, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--cw-transition-slow);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

.tr-card-play svg { width: 22px; height: 22px; color: #fff; margin-left: 3px; }

/* Thumbnail Icons for PDF/Link */
.tr-card-thumb-icon {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tr-card-thumb-icon svg { opacity: 0.6; }

.tr-card-thumb-icon span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}

.tr-thumb-pdf {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 50%, #fca5a5 100%);
  color: #dc2626;
}

.tr-thumb-pdf svg { stroke: #dc2626; }

.tr-thumb-link {
  background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 50%, #93c5fd 100%);
  color: #2563eb;
}

.tr-thumb-link svg { stroke: #2563eb; }

.tr-thumb-error {
  background: var(--cw-gray-200) !important;
}

.tr-thumb-error img { display: none; }

/* Card Badges */
.tr-card-badge {
  position: absolute;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--cw-radius-full);
  backdrop-filter: blur(8px);
  z-index: 2;
}

.tr-badge-done {
  top: 10px; left: 10px;
  background: rgba(16, 185, 129, 0.9);
  color: #fff;
}

.tr-badge-xp {
  top: 10px; right: 10px;
  background: rgba(245, 158, 11, 0.9);
  color: #fff;
  font-weight: 800;
}

.tr-card-number {
  position: absolute;
  bottom: 10px; left: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  z-index: 2;
}

.tr-card-body {
  padding: 14px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tr-card-type-tag {
  margin-bottom: 6px;
}

.tr-card-type-tag span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cw-purple-600);
  background: var(--cw-purple-50);
  padding: 2px 8px;
  border-radius: var(--cw-radius-full);
}

.tr-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin-bottom: 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tr-card-desc {
  font-size: 0.78rem;
  color: var(--cw-gray-500);
  line-height: 1.5;
  margin-bottom: 10px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tr-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--cw-gray-100);
  margin-top: auto;
}

.tr-card-rating { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--cw-gray-500); }
.tr-stars-mini span { color: var(--cw-gray-300); font-size: 0.82rem; }
.tr-stars-mini span.filled { color: #f59e0b; }
.tr-no-rating { font-size: 0.72rem; color: var(--cw-gray-400); font-style: italic; }
.tr-card-views { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--cw-gray-400); }

.tr-card-admin-actions {
  position: absolute;
  bottom: 14px; right: 14px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: var(--cw-transition);
  z-index: 5;
}

.tr-card:hover .tr-card-admin-actions { opacity: 1; }

.tr-card-edit, .tr-card-delete {
  width: 30px; height: 30px;
  border-radius: var(--cw-radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--cw-transition);
  border: 1px solid;
}

.tr-card-edit {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.15);
}

.tr-card-edit:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.35);
  transform: scale(1.1);
}

.tr-card-delete {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.15);
}

.tr-card-delete:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.35);
  transform: scale(1.1);
}


/* ===== BOTTOM GRID ===== */
.tr-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}

.tr-activity-card {
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-gray-100);
  padding: 24px;
}

.tr-section-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.tr-activity-list { display: flex; flex-direction: column; gap: 12px; }

.tr-activity-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: var(--cw-radius-md);
  transition: var(--cw-transition);
  text-decoration: none;
  color: inherit;
}

.tr-activity-item:hover { background: var(--cw-gray-50); }

.tr-activity-avatar {
  width: 36px; height: 36px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-400), var(--cw-purple-600));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.72rem; font-weight: 700;
  flex-shrink: 0; overflow: hidden;
}

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

.tr-activity-content { flex: 1; min-width: 0; }

.tr-activity-header {
  display: flex; flex-wrap: wrap; gap: 4px;
  font-size: 0.82rem; margin-bottom: 2px;
}

.tr-activity-header strong { color: var(--cw-gray-800); }
.tr-activity-header span { color: var(--cw-gray-400); font-size: 0.78rem; }

.tr-activity-text {
  font-size: 0.82rem;
  color: var(--cw-gray-600);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tr-activity-time { font-size: 0.7rem; color: var(--cw-gray-400); }

.tr-activity-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--cw-gray-400);
}

.tr-activity-empty span { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.tr-activity-empty p { font-size: 0.85rem; line-height: 1.5; }

/* Top Rated */
.tr-top-list { display: flex; flex-direction: column; gap: 4px; }

.tr-top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--cw-radius-md);
  transition: var(--cw-transition);
  text-decoration: none;
  color: inherit;
}

.tr-top-item:hover { background: var(--cw-gray-50); }

.tr-top-rank {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cw-purple-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
  color: var(--cw-purple-600);
  flex-shrink: 0;
}

.tr-top-item:nth-child(1) .tr-top-rank { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.tr-top-item:nth-child(2) .tr-top-rank { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: #fff; }
.tr-top-item:nth-child(3) .tr-top-rank { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; }

.tr-top-thumb {
  width: 56px; height: 32px;
  border-radius: var(--cw-radius-sm);
  overflow: hidden; flex-shrink: 0;
  background: var(--cw-gray-200);
}

.tr-top-thumb img { width: 100%; height: 100%; object-fit: cover; }

.tr-top-thumb-icon {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}

.tr-top-info { flex: 1; min-width: 0; }

.tr-top-title {
  font-size: 0.82rem; font-weight: 600;
  color: var(--cw-gray-800);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tr-top-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--cw-gray-500);
  margin-top: 2px;
}

.tr-top-meta .tr-stars-mini span { font-size: 0.72rem; }

.tr-top-done {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700;
  flex-shrink: 0;
}

/* ===== MODALS ===== */
.tr-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center; justify-content: center;
  padding: 20px;
}

.tr-modal-overlay.active { display: flex; animation: trFadeIn 0.2s ease; }

@keyframes trFadeIn { from { opacity: 0; } to { opacity: 1; } }

.tr-modal {
  background: #fff;
  border-radius: var(--cw-radius-xl);
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  animation: trModalSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tr-modal-sm { max-width: 440px; }

@keyframes trModalSlide {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.tr-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 0; }
.tr-modal-header h2 { font-size: 1.2rem; font-weight: 700; color: var(--cw-gray-800); }

.tr-modal-close {
  width: 36px; height: 36px;
  border-radius: var(--cw-radius-full);
  background: var(--cw-gray-100);
  border: none; font-size: 1.4rem;
  color: var(--cw-gray-500);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--cw-transition);
}

.tr-modal-close:hover { background: var(--cw-gray-200); color: var(--cw-gray-700); }
.tr-modal-body { padding: 24px 28px; }
.tr-modal-footer { padding: 16px 28px 24px; display: flex; justify-content: flex-end; gap: 12px; }

/* Content Type Selector */
.tr-content-type-selector {
  display: flex; gap: 10px;
}

.tr-type-option {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px; border-radius: var(--cw-radius-md);
  border: 2px solid var(--cw-gray-200); cursor: pointer;
  transition: var(--cw-transition); text-align: center;
  font-size: 0.82rem; font-weight: 600; color: var(--cw-gray-600);
}

.tr-type-option input { display: none; }
.tr-type-option .tr-type-icon { font-size: 1.4rem; }

.tr-type-option:hover { border-color: var(--cw-purple-300); background: var(--cw-purple-50); }

.tr-type-option.active {
  border-color: var(--cw-purple-500);
  background: var(--cw-purple-50);
  color: var(--cw-purple-700);
}

/* Form */
.tr-form-group { margin-bottom: 18px; }
.tr-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--cw-gray-700); margin-bottom: 6px; }

.tr-input {
  width: 100%; padding: 10px 14px;
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-md);
  font-size: 0.9rem; font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800);
  background: var(--cw-gray-50);
  transition: var(--cw-transition); outline: none;
}

.tr-input:focus { border-color: var(--cw-purple-400); background: #fff; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08); }
.tr-textarea { resize: vertical; min-height: 60px; }

.tr-preview { margin-top: 12px; border-radius: var(--cw-radius-md); overflow: hidden; border: 1px solid var(--cw-gray-200); }
.tr-preview img { width: 100%; height: auto; display: block; }

/* =============================================
   TREINAMENTOS — SHOW PAGE
   ============================================= */
.tr-show-page { max-width: 1400px; margin: 0 auto; }

.tr-show-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }

.tr-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600;
  color: var(--cw-gray-600); text-decoration: none;
  padding: 8px 16px; border-radius: var(--cw-radius-full);
  background: var(--cw-bg-card); border: 1px solid var(--cw-gray-200);
  transition: var(--cw-transition);
}

.tr-back-link:hover { background: var(--cw-purple-50); border-color: var(--cw-purple-200); color: var(--cw-purple-600); transform: translateX(-3px); }

.tr-show-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--cw-gray-400); }
.tr-show-breadcrumb span { background: var(--cw-purple-50); color: var(--cw-purple-600); padding: 3px 10px; border-radius: var(--cw-radius-full); font-weight: 500; font-size: 0.78rem; }
.tr-breadcrumb-sep { background: none !important; color: var(--cw-gray-300) !important; padding: 0 !important; }
.tr-breadcrumb-current { background: var(--cw-gray-100) !important; color: var(--cw-gray-600) !important; }

.tr-show-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }

/* Player */
.tr-player-wrapper { margin-bottom: 24px; }

.tr-player {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: var(--cw-radius-xl); overflow: hidden;
  background: #000; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.tr-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* External Content Card */
.tr-external-card {
  display: flex;
  align-items: center;
  gap: 40px;
  background: var(--cw-bg-card);
  border-radius: var(--cw-radius-xl);
  padding: 48px;
  border: 1px solid var(--cw-gray-100);
  margin-bottom: 24px;
  box-shadow: var(--cw-shadow-md);
  position: relative;
  overflow: hidden;
}

.tr-external-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.05), transparent 70%);
  pointer-events: none;
}

.tr-external-icon-area {
  flex-shrink: 0;
}

.tr-external-bigicon {
  width: 160px; height: 160px;
  border-radius: var(--cw-radius-xl);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  position: relative;
}

.tr-ext-pdf {
  background: linear-gradient(135deg, #fef2f2, #fecaca);
  border: 2px solid #fca5a5;
  color: #dc2626;
}

.tr-ext-pdf svg { stroke: #dc2626; opacity: 0.7; }

.tr-ext-link {
  background: linear-gradient(135deg, #eff6ff, #bfdbfe);
  border: 2px solid #93c5fd;
  color: #2563eb;
}

.tr-ext-link svg { stroke: #2563eb; opacity: 0.7; }

.tr-ext-file-type {
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.tr-external-info { flex: 1; }

.tr-external-info h2 {
  font-size: 1.4rem; font-weight: 800;
  color: var(--cw-gray-800);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.tr-external-info p {
  font-size: 0.92rem; color: var(--cw-gray-600);
  line-height: 1.6; margin-bottom: 20px;
}

/* Show Info */
.tr-show-info {
  background: var(--cw-bg-card); border-radius: var(--cw-radius-lg);
  padding: 24px; border: 1px solid var(--cw-gray-100); margin-bottom: 20px;
}

.tr-show-info-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }

.tr-show-category {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--cw-purple-600); background: var(--cw-purple-50);
  padding: 4px 12px; border-radius: var(--cw-radius-full); margin-bottom: 8px;
}

.tr-show-title { font-size: 1.5rem; font-weight: 800; color: var(--cw-gray-900); letter-spacing: -0.02em; line-height: 1.3; }

.tr-xp-earned-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 700;
  color: #059669; background: #ecfdf5;
  padding: 6px 16px; border-radius: var(--cw-radius-full);
  border: 1px solid #a7f3d0;
  animation: xpEarned 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

@keyframes xpEarned { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }

.tr-show-description { color: var(--cw-gray-600); font-size: 0.9rem; line-height: 1.7; margin-bottom: 16px; }
.tr-show-description p { margin-bottom: 8px; }

.tr-show-meta { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--cw-gray-100); }
.tr-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--cw-gray-500); }

/* Rating */
.tr-rating-section {
  background: var(--cw-bg-card); border-radius: var(--cw-radius-lg);
  padding: 24px; border: 1px solid var(--cw-gray-100); margin-bottom: 20px;
}

.tr-section-title { font-size: 1.1rem; font-weight: 700; color: var(--cw-gray-800); margin-bottom: 16px; }
.tr-rating-stars { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }

.tr-star-btn {
  background: none; border: none;
  font-size: 2rem; color: var(--cw-gray-300);
  cursor: pointer; transition: var(--cw-transition);
  padding: 0 2px; line-height: 1;
}

.tr-star-btn:hover { transform: scale(1.2); }
.tr-star-btn.active { color: #f59e0b; text-shadow: 0 0 12px rgba(245, 158, 11, 0.4); }

.tr-rating-label { font-size: 0.85rem; color: var(--cw-gray-500); margin-left: 12px; }
.tr-rating-avg { font-size: 0.85rem; color: var(--cw-gray-500); padding-top: 8px; }

/* Comments */
.tr-comments-section {
  background: var(--cw-bg-card); border-radius: var(--cw-radius-lg);
  padding: 24px; border: 1px solid var(--cw-gray-100);
}

.tr-comment-form { display: flex; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--cw-gray-100); }

.tr-comment-avatar {
  width: 40px; height: 40px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-400), var(--cw-purple-600));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.78rem; font-weight: 700;
  flex-shrink: 0; overflow: hidden;
}

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

.tr-comment-input-wrapper { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

.tr-comment-input {
  width: 100%; padding: 10px 14px;
  border: 2px solid var(--cw-gray-200); border-radius: var(--cw-radius-md);
  font-size: 0.88rem; font-family: 'Inter', sans-serif;
  color: var(--cw-gray-800); background: var(--cw-gray-50);
  transition: var(--cw-transition); outline: none; resize: vertical;
}

.tr-comment-input:focus { border-color: var(--cw-purple-400); background: #fff; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08); }

.tr-comment-list { display: flex; flex-direction: column; gap: 16px; }
.tr-comment { display: flex; gap: 12px; }
.tr-comment-new { animation: trCommentIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes trCommentIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.tr-comment-content { flex: 1; }
.tr-comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tr-comment-header strong { font-size: 0.88rem; color: var(--cw-gray-800); }
.tr-comment-time { font-size: 0.75rem; color: var(--cw-gray-400); }
.tr-comment-body { font-size: 0.88rem; color: var(--cw-gray-600); line-height: 1.5; }
.tr-comments-empty { text-align: center; padding: 32px 16px; color: var(--cw-gray-400); font-size: 0.9rem; }

/* Sidebar */
.tr-show-sidebar { position: sticky; top: calc(var(--header-height) + 20px); }
.tr-sidebar-xp { margin-bottom: 20px; }

.tr-xp-card {
  background: linear-gradient(135deg, var(--cw-purple-600), var(--cw-purple-700));
  border: none; border-radius: var(--cw-radius-lg); padding: 16px 24px;
}

.tr-xp-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.tr-xp-level-badge {
  font-size: 0.75rem; font-weight: 800; color: #fff;
  background: rgba(255,255,255,0.2); padding: 3px 12px;
  border-radius: var(--cw-radius-full); text-transform: uppercase; letter-spacing: 0.05em;
}

.tr-xp-total { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.tr-xp-bar-wrapper { display: flex; align-items: center; gap: 10px; }
.tr-xp-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.15); border-radius: 4px; overflow: hidden; }

.tr-xp-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #f97316);
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.tr-xp-bar-label { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.7); white-space: nowrap; }

.tr-sidebar-section {
  background: var(--cw-bg-card); border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-gray-100); padding: 20px;
}

.tr-sidebar-title { font-size: 0.95rem; font-weight: 700; color: var(--cw-gray-800); margin-bottom: 16px; }
.tr-sidebar-list { display: flex; flex-direction: column; gap: 10px; }

.tr-sidebar-video {
  display: flex; gap: 12px; text-decoration: none;
  padding: 6px; border-radius: var(--cw-radius-md);
  transition: var(--cw-transition);
}

.tr-sidebar-video:hover { background: var(--cw-gray-50); }

.tr-sidebar-thumb {
  width: 100px; height: 56px;
  border-radius: var(--cw-radius-sm); overflow: hidden;
  flex-shrink: 0; position: relative; background: var(--cw-gray-200);
}

.tr-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; }

.tr-sidebar-thumb-icon {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: linear-gradient(135deg, var(--cw-gray-100), var(--cw-gray-200));
}

.tr-sidebar-watched {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(16, 185, 129, 0.9); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.tr-sidebar-video-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.tr-sidebar-video-title {
  font-size: 0.78rem; font-weight: 600; color: var(--cw-gray-800); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.tr-sidebar-video-meta { font-size: 0.7rem; font-weight: 600; color: var(--cw-orange); }

/* ===== RESPONSIVE — TABLET (1024px) ===== */
@media (max-width: 1024px) {
  .tr-show-layout { grid-template-columns: 1fr; }
  .tr-show-sidebar { position: static; }
  .tr-hero-content { flex-direction: column; align-items: flex-start; }
  .tr-bottom-grid { grid-template-columns: 1fr; }
  .tr-external-card { flex-direction: column; gap: 24px; padding: 32px; text-align: center; }
  .tr-sidebar-xp .tr-xp-card { background: linear-gradient(135deg, #4c1d95, #7c3aed); }
}

/* ===== RESPONSIVE — MOBILE LANDSCAPE (768px) ===== */
@media (max-width: 768px) {
  /* Hero */
  .tr-page { padding: 0; }
  .tr-hero { padding: 20px 16px 16px; margin-bottom: 20px; border-radius: var(--cw-radius-lg); }
  .tr-hero-title { font-size: 1.3rem; }
  .tr-hero-subtitle { font-size: 0.88rem; max-width: 100%; }
  .tr-hero-badge { font-size: 0.72rem; padding: 4px 10px; }
  .tr-hero-stats { flex-direction: column; width: 100%; gap: 10px; }
  .tr-stat-card { min-width: unset; flex-direction: row; padding: 12px 16px; gap: 12px; }
  .tr-stat-card.tr-stat-xp { flex-direction: column; }
  .tr-hero-progress { margin-top: 14px; }
  .tr-hero-progress-labels { font-size: 0.72rem; }

  /* Next Up */
  .tr-next-up { margin-bottom: 20px; }
  .tr-next-up-card { flex-direction: column; gap: 14px; padding: 14px 16px; }
  .tr-next-up-right { width: 100%; }
  .tr-next-up-btn { width: 100%; justify-content: center; padding: 10px 18px; font-size: 0.85rem; }
  .tr-next-up-icon { width: 44px; height: 44px; }
  .tr-next-up-title { font-size: 0.92rem; white-space: normal; }

  /* Admin bar */
  .tr-admin-bar { flex-direction: column; gap: 8px; }
  .tr-admin-bar .tr-btn { width: 100%; justify-content: center; }

  /* Category Sections */
  .tr-category-section { margin-bottom: 24px; }
  .tr-category-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 4px; }
  .tr-category-info { gap: 10px; }
  .tr-category-icon { font-size: 1.4rem; }
  .tr-category-title { font-size: 1.05rem; }
  .tr-category-desc { font-size: 0.78rem; }
  .tr-category-stats { width: 100%; }

  /* Cards Scroll */
  .tr-cards-scroll { padding: 0 4px 12px; gap: 14px; }
  .tr-card-wrapper { flex: 0 0 240px; }
  .tr-card-body { padding: 12px 14px 14px; }
  .tr-card-title { font-size: 0.92rem; }
  .tr-card-desc { font-size: 0.78rem; margin-bottom: 8px; }
  .tr-card-admin-actions { opacity: 1; }

  /* Action Bar (show page) */
  .tr-action-bar { flex-direction: column; gap: 10px; }
  .tr-checkbox-complete { padding: 14px 16px; gap: 12px; }
  .tr-checkbox-box { width: 28px; height: 28px; }
  .tr-checkbox-main { font-size: 0.92rem; }
  .tr-btn-next { padding: 12px 18px; }
  .tr-btn-next-title { font-size: 0.82rem; }

  /* Show page */
  .tr-show-nav { flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .tr-back-link { padding: 6px 14px; font-size: 0.82rem; }
  .tr-show-breadcrumb { font-size: 0.78rem; }
  .tr-show-title { font-size: 1.2rem; }
  .tr-show-info { padding: 16px; }
  .tr-show-info-top { flex-direction: column; }
  .tr-show-meta { flex-direction: column; gap: 6px; }
  .tr-show-description { font-size: 0.88rem; }

  /* Player */
  .tr-player-wrapper { margin-bottom: 16px; border-radius: var(--cw-radius-md); }

  /* External content */
  .tr-external-card { padding: 24px 16px; }
  .tr-external-bigicon { width: 100px; height: 100px; }
  .tr-external-bigicon svg { width: 44px; height: 44px; }
  .tr-external-info h2 { font-size: 1.1rem; }

  /* Rating */
  .tr-rating-section { padding: 16px; }
  .tr-star-btn { font-size: 1.6rem; padding: 4px 6px; }

  /* Comments */
  .tr-comments-section { padding: 16px; }
  .tr-comment-form { flex-direction: column; gap: 10px; }
  .tr-comment-avatar { align-self: flex-start; }
  .tr-comment-input-wrapper { width: 100%; }

  /* Bottom grid */
  .tr-bottom-grid { grid-template-columns: 1fr; gap: 16px; }
  .tr-activity-card { padding: 16px; }
  .tr-section-heading { font-size: 1rem; }

  /* Sidebar */
  .tr-sidebar-xp { margin-bottom: 20px; }
  .tr-sidebar-list { gap: 10px; }

  /* Modal */
  .tr-modal { max-width: 100%; margin: 10px; border-radius: var(--cw-radius-lg); }
  .tr-modal-header { padding: 18px 20px 0; }
  .tr-modal-header h2 { font-size: 1.05rem; }
  .tr-modal-body { padding: 18px 20px; }
  .tr-modal-footer { padding: 12px 20px 18px; }
  .tr-content-type-selector { gap: 6px; }
  .tr-type-option { padding: 8px 12px; font-size: 0.78rem; }

  /* Header XP */
  .header-xp-bar { display: none; }
}

/* ===== RESPONSIVE — MOBILE PORTRAIT (480px) ===== */
@media (max-width: 480px) {
  /* Hero */
  .tr-hero { padding: 16px 14px 14px; margin: 0 -4px 16px; border-radius: var(--cw-radius-md); }
  .tr-hero-title { font-size: 1.15rem; letter-spacing: -0.01em; }
  .tr-hero-subtitle { font-size: 0.82rem; }
  .tr-hero-stats { gap: 8px; }
  .tr-stat-card { padding: 10px 14px; }
  .tr-stat-value { font-size: 1.3rem; }
  .tr-stat-label { font-size: 0.68rem; }
  .tr-stat-sublabel { font-size: 0.65rem; }
  .tr-xp-mini-bar { height: 4px; }

  /* Next Up */
  .tr-next-up-card { padding: 12px 14px; }
  .tr-next-up-icon { width: 40px; height: 40px; }
  .tr-next-up-icon svg { width: 20px; height: 20px; }
  .tr-next-up-label { font-size: 0.65rem; }
  .tr-next-up-title { font-size: 0.85rem; }
  .tr-next-up-meta { font-size: 0.72rem; }

  /* Category */
  .tr-category-icon { font-size: 1.2rem; }
  .tr-category-title { font-size: 0.95rem; }
  .tr-category-progress-label { font-size: 0.72rem; }

  /* Cards */
  .tr-cards-scroll { gap: 12px; scroll-padding-left: 4px; }
  .tr-card-wrapper { flex: 0 0 220px; }
  .tr-card-body { padding: 10px 12px 12px; }
  .tr-card-title { font-size: 0.85rem; -webkit-line-clamp: 2; }
  .tr-card-desc { font-size: 0.75rem; display: none; }
  .tr-card-footer { padding-top: 8px; }
  .tr-card-rating { font-size: 0.72rem; }
  .tr-card-views { font-size: 0.72rem; }
  .tr-card-number { width: 22px; height: 22px; font-size: 0.68rem; }
  .tr-card-badge { font-size: 0.6rem; padding: 2px 8px; }
  .tr-card-type-tag { margin-bottom: 4px; }
  .tr-card-type-tag span { font-size: 0.68rem; padding: 2px 8px; }

  /* Action bar */
  .tr-checkbox-complete { padding: 12px 14px; gap: 10px; }
  .tr-checkbox-box { width: 26px; height: 26px; border-radius: 6px; }
  .tr-checkbox-icon { width: 14px; height: 14px; }
  .tr-checkbox-main { font-size: 0.88rem; }
  .tr-checkbox-sub { font-size: 0.72rem; }
  .tr-btn-next { padding: 12px 16px; gap: 8px; }
  .tr-btn-next-label { font-size: 0.62rem; }
  .tr-btn-next-title { font-size: 0.78rem; }

  /* Show page */
  .tr-show-nav { gap: 6px; margin-bottom: 12px; }
  .tr-back-link { padding: 5px 12px; font-size: 0.78rem; }
  .tr-show-breadcrumb { font-size: 0.72rem; }
  .tr-breadcrumb-sep { margin: 0 4px; }
  .tr-show-title { font-size: 1.05rem; line-height: 1.3; }
  .tr-show-category { font-size: 0.72rem; }
  .tr-show-info { padding: 14px 12px; }
  .tr-show-meta { gap: 4px; }
  .tr-meta-item { font-size: 0.75rem; }
  .tr-show-description p { font-size: 0.85rem; }

  /* External content */
  .tr-external-card { padding: 20px 14px; gap: 16px; }
  .tr-external-bigicon { width: 80px; height: 80px; }
  .tr-external-bigicon svg { width: 36px; height: 36px; }
  .tr-ext-file-type { font-size: 0.6rem; }
  .tr-external-info h2 { font-size: 1rem; }
  .tr-external-info p { font-size: 0.82rem; }
  .tr-btn-lg { padding: 12px 20px; font-size: 0.88rem; }

  /* Rating */
  .tr-rating-section { padding: 14px 12px; }
  .tr-section-title { font-size: 0.95rem; }
  .tr-star-btn { font-size: 1.5rem; padding: 2px 4px; }
  .tr-rating-label { font-size: 0.75rem; }
  .tr-rating-avg { font-size: 0.78rem; }

  /* Comments */
  .tr-comments-section { padding: 14px 12px; }
  .tr-comment { gap: 10px; }
  .tr-comment-avatar { width: 32px; height: 32px; min-width: 32px; }
  .tr-comment-avatar span { font-size: 0.65rem; }
  .tr-comment-header strong { font-size: 0.82rem; }
  .tr-comment-time { font-size: 0.68rem; }
  .tr-comment-body { font-size: 0.82rem; }
  .tr-comment-input { font-size: 0.85rem; }

  /* Sidebar */
  .tr-xp-card { padding: 14px 16px; }
  .tr-xp-level-badge { font-size: 0.68rem; }
  .tr-xp-total { font-size: 0.78rem; }
  .tr-sidebar-title { font-size: 0.92rem; }
  .tr-sidebar-video { gap: 10px; }
  .tr-sidebar-thumb { width: 60px; min-width: 60px; height: 40px; }
  .tr-sidebar-video-title { font-size: 0.78rem; }
  .tr-sidebar-video-meta { font-size: 0.65rem; }

  /* Bottom grid */
  .tr-activity-card { padding: 14px 12px; }
  .tr-section-heading { font-size: 0.95rem; margin-bottom: 12px; }
  .tr-activity-item { gap: 10px; padding: 10px 0; }
  .tr-activity-avatar { width: 32px; height: 32px; min-width: 32px; }
  .tr-activity-avatar span { font-size: 0.65rem; }
  .tr-activity-header { font-size: 0.78rem; }
  .tr-activity-text { font-size: 0.78rem; }
  .tr-activity-time { font-size: 0.65rem; }

  .tr-top-item { gap: 8px; padding: 8px 0; }
  .tr-top-rank { width: 22px; height: 22px; font-size: 0.68rem; }
  .tr-top-thumb { width: 44px; height: 30px; min-width: 44px; }
  .tr-top-title { font-size: 0.78rem; }
  .tr-top-meta { font-size: 0.72rem; }

  /* Modal */
  .tr-modal-overlay { padding: 8px; }
  .tr-modal { max-width: 100%; margin: 0; border-radius: var(--cw-radius-md); }
  .tr-modal-header { padding: 14px 16px 0; }
  .tr-modal-header h2 { font-size: 0.95rem; }
  .tr-modal-body { padding: 14px 16px; }
  .tr-modal-footer { padding: 10px 16px 14px; }
  .tr-form-group { margin-bottom: 12px; }
  .tr-label { font-size: 0.78rem; }
  .tr-input { padding: 8px 12px; font-size: 0.85rem; }
  .tr-content-type-selector { flex-direction: column; gap: 6px; }
  .tr-type-option { padding: 10px; flex: 1; }
  .tr-btn { padding: 8px 16px; font-size: 0.82rem; }

  /* XP Toast */
  .tr-xp-toast { top: 60px; right: 12px; padding: 10px 20px; font-size: 0.95rem; }

  /* Admin actions always visible on mobile */
  .tr-card-admin-actions { opacity: 1; }
}

/* =============================================
   NEXT UP CARD (Hotmart style)
   ============================================= */
.tr-next-up {
  margin-bottom: 28px;
  overflow: hidden;
}

.tr-next-up-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(139, 92, 246, 0.03));
  border: 2px solid rgba(124, 58, 237, 0.12);
  border-radius: var(--cw-radius-lg);
  text-decoration: none;
  transition: var(--cw-transition);
  color: inherit;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.tr-next-up-card:hover {
  border-color: rgba(124, 58, 237, 0.3);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(139, 92, 246, 0.06));
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.12);
  transform: translateY(-2px);
}

.tr-next-up-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.tr-next-up-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(135deg, var(--cw-purple-500), var(--cw-purple-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  animation: nextPulse 2s ease-in-out infinite;
}

@keyframes nextPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); }
  50% { box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5); }
}

.tr-next-up-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tr-next-up-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cw-purple-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tr-next-up-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tr-next-up-meta {
  font-size: 0.78rem;
  color: var(--cw-gray-500);
}

.tr-next-up-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--cw-purple-600), var(--cw-purple-700));
  color: #fff;
  border-radius: var(--cw-radius-full);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
  transition: var(--cw-transition);
}

.tr-next-up-card:hover .tr-next-up-btn {
  background: linear-gradient(135deg, var(--cw-purple-700), var(--cw-purple-800));
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

/* In-progress badge */
.tr-badge-progress {
  top: 10px;
  left: 10px;
  background: rgba(245, 158, 11, 0.9);
  color: #fff;
}

/* =============================================
   ACTION BAR (Complete + Next)
   ============================================= */
.tr-action-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

/* Marcar como Concluído — Checkbox Style */
.tr-complete-row {
  flex: 1;
}

.tr-checkbox-complete {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--cw-bg-card);
  border: 2px solid var(--cw-gray-200);
  border-radius: var(--cw-radius-lg);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.tr-checkbox-complete:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.04);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1);
}

.tr-checkbox-complete.loading {
  opacity: 0.6;
  pointer-events: none;
}

.tr-checkbox-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2.5px solid var(--cw-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
}

.tr-checkbox-icon {
  width: 18px;
  height: 18px;
  stroke: transparent;
  transition: all 0.3s ease;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

.tr-checkbox-complete:hover .tr-checkbox-box {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}

/* Checked state */
.tr-checkbox-complete.checked {
  border-color: #10b981;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  cursor: default;
}

.tr-checkbox-complete.checked .tr-checkbox-box {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #059669;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  animation: checkboxPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tr-checkbox-complete.checked .tr-checkbox-icon {
  stroke: #fff;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s ease 0.1s, stroke 0s;
}

.tr-checkbox-complete.checked .tr-checkbox-main {
  color: #059669;
}

.tr-checkbox-complete.checked .tr-checkbox-sub {
  color: #10b981;
  font-weight: 700;
}

@keyframes checkboxPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.2); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.tr-checkbox-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tr-checkbox-main {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-700);
  transition: color 0.3s ease;
}

.tr-checkbox-sub {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--cw-gray-400);
  transition: color 0.3s ease;
}

/* XP Toast Notification */
.tr-xp-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  border-radius: var(--cw-radius-full);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
  z-index: 9999;
  animation: toastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1), toastOut 0.4s ease 2s forwards;
  pointer-events: none;
}

@keyframes toastIn {
  0% { transform: translateX(120px) scale(0.8); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes toastOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-20px); opacity: 0; }
}

/* Completed Badge Large */

.tr-completed-badge-lg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 2px solid #a7f3d0;
  border-radius: var(--cw-radius-lg);
  color: #059669;
  font-size: 1rem;
  font-weight: 700;
  flex: 1;
}

.tr-completed-animate {
  animation: completePop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes completePop {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

/* Next Button (Show page) */
.tr-btn-next {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--cw-purple-600), var(--cw-purple-700));
  border-radius: var(--cw-radius-lg);
  text-decoration: none;
  color: #fff;
  transition: var(--cw-transition);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}

.tr-btn-next:hover {
  background: linear-gradient(135deg, var(--cw-purple-700), var(--cw-purple-800));
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
  transform: translateY(-2px);
  color: #fff;
}

.tr-btn-next-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.tr-btn-next-label {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tr-btn-next-title {
  font-size: 0.88rem;
  font-weight: 700;
}

/* =============================================
   Landing Pages — Admin Area
   ============================================= */

.lp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.lp-header h1 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.3rem; font-weight: 700; margin: 0;
}

.lp-filter-bar {
  margin-bottom: 18px; padding: 12px 16px;
  background: var(--cw-white); border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-border);
}

.lp-stats-bar {
  display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.lp-stat {
  display: flex; align-items: center; gap: 12px;
  background: var(--cw-white); padding: 14px 20px;
  border-radius: var(--cw-radius-lg); border: 1px solid var(--cw-border);
  flex: 1; min-width: 140px;
}
.lp-stat-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.lp-stat-value {
  display: block; font-size: 1.4rem; font-weight: 800; color: var(--cw-darker);
}
.lp-stat-label {
  display: block; font-size: 0.72rem; color: var(--cw-gray-400); text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 500;
}

.lp-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.lp-card {
  background: var(--cw-white); border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-border); overflow: hidden;
  transition: all 0.3s;
}
.lp-card:hover {
  border-color: var(--cw-purple-light);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.08);
}
.lp-card-preview {
  height: 140px; padding: 20px; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.lp-card-preview::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.lp-card-preview-content { position: relative; z-index: 1; }
.lp-card-preview-title {
  color: #fff; font-weight: 700; font-size: 1rem; display: block;
}
.lp-card-preview-subtitle {
  color: rgba(255,255,255,0.75); font-size: 0.78rem; display: block;
}
.lp-card-status {
  position: absolute; top: 12px; right: 12px; z-index: 1;
}
.lp-status-badge {
  color: #fff; font-size: 0.72rem; font-weight: 600;
  padding: 4px 12px; border-radius: 100px;
}

.lp-card-body { padding: 16px 20px; }

.lp-card-slug {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--cw-gray-400); margin-bottom: 10px;
}
.lp-card-slug code {
  background: var(--cw-purple-bg); padding: 3px 8px; border-radius: 6px;
  font-size: 0.78rem; color: var(--cw-purple);
}
.lp-copy-btn {
  background: none; border: none; cursor: pointer; color: var(--cw-gray-400);
  padding: 2px; transition: color 0.2s;
}
.lp-copy-btn:hover { color: var(--cw-purple); }

.lp-card-metrics {
  display: flex; gap: 16px; margin: 12px 0 14px;
  padding: 10px 0; border-top: 1px solid var(--cw-border);
  border-bottom: 1px solid var(--cw-border);
}
.lp-metric { text-align: center; flex: 1; }
.lp-metric-value { display: block; font-size: 1.1rem; font-weight: 700; color: var(--cw-darker); }
.lp-metric-label { display: block; font-size: 0.68rem; color: var(--cw-gray-400); }

.lp-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}

.btn-outline {
  background: transparent; border: 1px solid var(--cw-border); color: var(--cw-darker);
  padding: 6px 14px; border-radius: var(--cw-radius-full); font-size: 0.78rem;
  font-weight: 500; cursor: pointer; transition: all 0.2s; display: inline-flex;
  align-items: center; gap: 4px; text-decoration: none;
}
.btn-outline:hover { border-color: var(--cw-purple); color: var(--cw-purple); }

.btn-success-outline {
  background: transparent; border: 1px solid #10b981; color: #10b981;
  padding: 6px 14px; border-radius: var(--cw-radius-full); font-size: 0.78rem;
  font-weight: 500; cursor: pointer; transition: all 0.2s; display: inline-flex;
  align-items: center; gap: 4px; text-decoration: none;
}
.btn-success-outline:hover { background: #10b981; color: #fff; }

.btn-warning-outline {
  background: transparent; border: 1px solid #f59e0b; color: #f59e0b;
  padding: 6px 14px; border-radius: var(--cw-radius-full); font-size: 0.78rem;
  font-weight: 500; cursor: pointer; transition: all 0.2s; display: inline-flex;
  align-items: center; gap: 4px; text-decoration: none;
}
.btn-warning-outline:hover { background: #f59e0b; color: #fff; }

.btn-danger-outline {
  background: transparent; border: 1px solid #ef4444; color: #ef4444;
  padding: 6px 14px; border-radius: var(--cw-radius-full); font-size: 0.78rem;
  font-weight: 500; cursor: pointer; transition: all 0.2s; display: inline-flex;
  align-items: center; gap: 4px; text-decoration: none;
}
.btn-danger-outline:hover { background: #ef4444; color: #fff; }

/* ===== Empty State ===== */
.lp-empty-state {
  text-align: center; padding: 60px 20px;
  background: var(--cw-white); border-radius: var(--cw-radius-lg);
  border: 2px dashed var(--cw-border);
}
.lp-empty-icon { font-size: 3rem; margin-bottom: 16px; }
.lp-empty-state h3 { font-size: 1.2rem; margin-bottom: 8px; }
.lp-empty-state p {
  color: var(--cw-gray-400); font-size: 0.9rem; margin-bottom: 20px;
}

/* ===== Builder Layout ===== */
.lp-builder-grid {
  display: grid; grid-template-columns: 1fr 400px; gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) {
  .lp-builder-grid { grid-template-columns: 1fr; }
}
.lp-builder-config {
  background: var(--cw-white); border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-border); padding: 24px; overflow-y: auto;
  max-height: calc(100vh - 140px);
}
.lp-builder-section {
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--cw-border);
}
.lp-builder-section:last-child { border-bottom: none; margin-bottom: 0; }
.lp-builder-section h3 {
  font-size: 0.95rem; font-weight: 700; margin-bottom: 14px;
}

.lp-feature-row, .lp-benefit-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}

/* ===== Builder Preview ===== */
.lp-builder-preview {
  position: sticky; top: 20px;
  background: var(--cw-white); border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-border); overflow: hidden;
}
.lp-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--cw-border);
  background: var(--cw-purple-bg);
}
.lp-preview-url {
  font-size: 0.72rem; font-family: monospace;
  color: var(--cw-purple); background: var(--cw-white);
  padding: 3px 8px; border-radius: 6px;
}
.lp-preview-frame {
  background: #0f0d1a; min-height: 500px;
  overflow-y: auto; max-height: calc(100vh - 200px);
}

/* Preview mini-components */
.lp-pv-hero {
  padding: 30px 20px; text-align: center; position: relative;
}
.lp-pv-hero-img {
  max-width: 60%; max-height: 120px; border-radius: 8px;
  margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.lp-pv-hero h2 {
  color: #fff; font-size: 1rem; font-weight: 800; margin-bottom: 4px;
}
.lp-pv-hero p {
  color: rgba(255,255,255,0.7); font-size: 0.72rem; margin-bottom: 14px;
}
.lp-pv-form-mini { padding: 12px; }
.lp-pv-input {
  background: rgba(255,255,255,0.08); height: 20px;
  border-radius: 6px; margin-bottom: 6px;
}
.lp-pv-input.short { width: 60%; }
.lp-pv-btn {
  background: linear-gradient(135deg, var(--cw-purple), #ff5a5f);
  color: #fff; text-align: center; padding: 8px;
  border-radius: 8px; font-size: 0.72rem; font-weight: 600;
  margin-top: 6px;
}
.lp-pv-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 16px 12px;
}
.lp-pv-feat {
  text-align: center; padding: 10px 6px;
  background: rgba(255,255,255,0.04); border-radius: 8px;
}
.lp-pv-feat-icon { display: block; font-size: 1.2rem; margin-bottom: 4px; }
.lp-pv-feat strong { color: #fff; font-size: 0.65rem; }
.lp-pv-benefits { padding: 12px; }
.lp-pv-benefit {
  color: rgba(255,255,255,0.8); font-size: 0.68rem;
  padding: 6px 8px; margin-bottom: 4px;
  background: rgba(255,255,255,0.03); border-radius: 6px;
}

/* ===== Image Editor ===== */
.lp-img-editor {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; background: var(--cw-purple-bg);
  border-radius: var(--cw-radius-lg); margin-bottom: 14px;
  border: 1px solid var(--cw-border);
}
.lp-img-preview-wrap {
  width: 120px; height: 80px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  background: #f0ecff; border: 1px solid var(--cw-border);
}
.lp-img-preview {
  width: 100%; height: 100%; object-fit: cover;
}
.lp-img-info { flex: 1; min-width: 0; }

/* ===== CRM Indicators ===== */
.crm-kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 24px;
}
.crm-kpi-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px; background: var(--cw-card-bg);
  border-radius: 4px; border: 1px solid #e2e8f0;
}
.crm-kpi-icon {
  width: 40px; height: 40px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.crm-kpi-data { display: flex; flex-direction: column; }
.crm-kpi-value {
  font-size: 1.3rem; font-weight: 800; color: #1e1b4b;
  line-height: 1.2;
}
.crm-kpi-value small { font-size: 0.7rem; font-weight: 500; color: #6b7280; }
.crm-kpi-label {
  font-size: 0.72rem; color: #6b7280; font-weight: 500;
  margin-top: 2px;
}
.crm-charts-row {
  display: flex; gap: 20px; flex-wrap: wrap;
}
.crm-chart-card {
  background: var(--cw-card-bg); border: 1px solid #e2e8f0;
  border-radius: 4px; padding: 24px;
}
.crm-chart-title {
  font-size: 0.92rem; font-weight: 700; color: #1e1b4b;
  margin-bottom: 20px;
}
/* Funnel */
.crm-funnel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.crm-funnel-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  justify-content: center;
}
.crm-funnel-bar {
  width: var(--funnel-width); background: var(--funnel-color);
  border-radius: 6px; padding: 10px 0; text-align: center;
  min-height: 36px; display: flex; align-items: center; justify-content: center;
  transition: width 0.5s ease;
}
.crm-funnel-count { color: #fff; font-weight: 800; font-size: 0.88rem; }
.crm-funnel-label { font-size: 0.75rem; color: #374151; font-weight: 600; min-width:110px; }
/* Bar chart */
.crm-bar-chart { }
.crm-chart-bars {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 10px 0; border-bottom: 1px solid var(--cw-border);
  min-height: 170px;
}
.crm-chart-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
}
.crm-chart-bar-group { display: flex; gap: 3px; align-items: flex-end; }
.crm-chart-bar {
  width: 16px; border-radius: 4px 4px 0 0; min-height: 2px;
  position: relative; transition: height 0.4s ease;
}
.crm-chart-bar.leads { background: #8b5cf6; }
.crm-chart-bar.clients { background: #10b981; }
.crm-chart-bar span {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 0.6rem; font-weight: 700; color: #4b5563; white-space: nowrap;
}
.crm-chart-label {
  font-size: 0.6rem; color: #6b7280; margin-top: 6px;
  font-weight: 500; text-align: center;
}
.crm-chart-legend {
  display: flex; gap: 18px; justify-content: center; margin-top: 14px;
}
.crm-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: #374151; font-weight: 500;
}
.crm-legend-dot { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 900px) {
  .crm-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .crm-charts-row { flex-direction: column; }
}
@media (max-width: 600px) {
  .crm-kpi-grid { grid-template-columns: 1fr; }
}

/* ── CEP auto-fill ── */
.cep-loading {
  border-color: var(--cw-purple-400) !important;
  background-color: var(--cw-purple-50) !important;
}
.cep-error {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: #ef4444;
}

/* ══════════════════════════════════════════════════════════════
   CALCULADORA DE PROPOSTA
══════════════════════════════════════════════════════════════ */

/* Page wrapper */
.pc-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 40px;
}

/* ── Topbar ── */
.pc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 18px 24px;
  background: linear-gradient(135deg, var(--cw-purple-700), var(--cw-purple-500));
  border-radius: 16px;
  color: #fff;
}
.pc-topbar-info {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pc-topbar-badge {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.pc-topbar-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 2px;
  color: #fff;
}
.pc-topbar-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
}
.pc-present-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 10px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.pc-present-btn:hover { background: rgba(255,255,255,0.25); }

/* ── Main grid ── */
.pc-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Config panel (left) ── */
.pc-config {
  background: #fff;
  border: 1px solid var(--cw-gray-200);
  border-radius: 16px;
  overflow: hidden;
}
.pc-config-section {
  padding: 20px;
  border-bottom: 1px solid var(--cw-gray-100);
}
.pc-config-section:last-child { border-bottom: none; }
.pc-config-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.pc-config-label strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cw-gray-800);
}
.pc-config-label span {
  font-size: 0.77rem;
  color: var(--cw-gray-400);
}
.pc-step-num {
  min-width: 24px;
  height: 24px;
  background: var(--cw-purple-600);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 1px;
}

/* Plan cards */
.pc-plans-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-plan-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--cw-gray-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  background: var(--cw-gray-50);
}
.pc-plan-card input[type=radio] { display: none; }
.pc-plan-card:hover {
  border-color: var(--cw-purple-300);
  background: var(--cw-purple-50);
}
.pc-plan-card.selected {
  border-color: var(--cw-purple-500);
  background: linear-gradient(135deg, rgba(124,58,237,0.07), rgba(124,58,237,0.02));
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.pc-plan-card.selected::after {
  content: '✓';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: var(--cw-purple-600);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.pc-plan-icon { font-size: 1.3rem; }
.pc-plan-name { font-weight: 700; font-size: 0.88rem; color: var(--cw-gray-800); }
.pc-plan-sub  { font-size: 0.72rem; color: var(--cw-gray-400); margin-top: 1px; }
.pc-plan-price {
  margin-left: auto;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--cw-purple-700);
  white-space: nowrap;
  padding-right: 28px;
}
.pc-plan-price span { font-size: 0.72rem; font-weight: 500; color: var(--cw-gray-400); }
.pc-plan-star {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #f59e0b;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.pc-plan-featured { margin-top: 8px; }

/* Addon items */
.pc-addons-list { display: flex; flex-direction: column; gap: 6px; }
.pc-addon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--cw-gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--cw-gray-50);
}
.pc-addon-item:has(input:checked) {
  border-color: var(--cw-purple-400);
  background: rgba(124,58,237,0.04);
}
.pc-addon-item input[type=checkbox] { accent-color: var(--cw-purple-600); width: 16px; height: 16px; }
.pc-addon-icon { font-size: 1.1rem; }
.pc-addon-name  { font-size: 0.84rem; font-weight: 600; color: var(--cw-gray-800); }
.pc-addon-price { font-size: 0.75rem; color: var(--cw-purple-600); font-weight: 600; }

/* Context fields */
.pc-context-section { background: linear-gradient(135deg, #fafafa, #f5f3ff); }
.pc-context-fields { display: flex; flex-direction: column; gap: 10px; }
.pc-context-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cw-gray-600);
  margin-bottom: 4px;
}
.pc-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--cw-gray-300);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}
.pc-input-wrap span { font-size: 0.82rem; color: var(--cw-gray-400); font-weight: 600; }
.pc-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 9px 0;
  font-size: 0.88rem;
  background: transparent;
  color: var(--cw-gray-800);
}
.pc-input-wrap:focus-within { border-color: var(--cw-purple-400); box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }

/* ── Canvas (right) ── */
.pc-canvas {
  background: #fff;
  border: 1px solid var(--cw-gray-200);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Hero */
.pc-hero {
  padding: 36px 32px 28px;
  text-align: center;
  background: linear-gradient(135deg, var(--cw-purple-700) 0%, #4f46e5 100%);
  color: #fff;
}
.pc-hero-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.pc-hero-value {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.pc-hero-sub {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.65);
}

/* Daily strip */
.pc-daily-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 28px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-bottom: 1px solid #a7f3d0;
}
.pc-daily-left { min-width: 160px; }
.pc-daily-label {
  font-size: 0.75rem;
  color: #065f46;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.pc-daily-value {
  font-size: 2rem;
  font-weight: 900;
  color: #059669;
  line-height: 1;
}
.pc-daily-right { flex: 1; }
.pc-coffee-row {
  font-size: 1rem;
  color: #064e3b;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-coffee-subrow {
  font-size: 0.85rem;
  color: #047857;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-cmp-icon {
  flex-shrink: 0;
  opacity: 0.75;
}

/* Annual strip */
.pc-annual-strip {
  padding: 14px 28px;
  background: var(--cw-gray-50);
  border-bottom: 1px solid var(--cw-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.pc-annual-inner { display: flex; align-items: center; gap: 10px; }
.pc-annual-label { font-size: 0.82rem; color: var(--cw-gray-500); font-weight: 500; }
.pc-annual-value { font-size: 1.15rem; font-weight: 800; color: var(--cw-gray-800); }
.pc-annual-sub { font-size: 0.75rem; color: var(--cw-gray-400); }

/* Modules section */
.pc-modules-section {
  padding: 16px 28px;
  border-bottom: 1px solid var(--cw-gray-100);
}
.pc-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cw-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.pc-module-list { display: flex; flex-wrap: wrap; gap: 7px; }
.pc-module-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: linear-gradient(135deg, var(--cw-purple-50), rgba(124,58,237,0.06));
  border: 1px solid var(--cw-purple-200);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cw-purple-700);
}

/* Insight cards */
.pc-insight-card {
  margin: 0 20px 12px;
  padding: 16px 20px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.pc-insight-card:first-of-type { margin-top: 12px; }
.pc-insight-percent {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
}
.pc-insight-breakeven {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a;
}
.pc-insight-loss {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 1px solid #fecaca;
}
.pc-insight-icon { font-size: 1.5rem; line-height: 1; margin-top: 2px; }
.pc-insight-body { flex: 1; }
.pc-insight-title { font-size: 0.85rem; font-weight: 600; color: var(--cw-gray-700); margin-bottom: 4px; }
.pc-insight-big {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.1;
  margin: 4px 0;
}
.pc-loss-value { color: #b91c1c; }
.pc-gain-value { color: #065f46; }
.pc-insight-breakeven .pc-insight-big { color: #92400e; }
.pc-insight-desc { font-size: 0.78rem; color: var(--cw-gray-500); line-height: 1.4; }
.pc-insight-hint {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #78350f;
  font-style: italic;
}
.pc-insight-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 10px 0;
}
.pc-roi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 14px;
  background: #fff;
  border: 1.5px solid #86efac;
  border-radius: 20px;
  font-size: 0.82rem;
  color: #166534;
}
.pc-roi-badge strong { color: #16a34a; font-size: 1rem; }

/* Triggers grid */
.pc-triggers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--cw-gray-100);
}
.pc-trigger-card {
  padding: 14px 16px;
  background: var(--cw-gray-50);
  border: 1px solid var(--cw-gray-200);
  border-radius: 10px;
}
.pc-trigger-icon { font-size: 1.3rem; margin-bottom: 6px; }
.pc-trigger-title { font-size: 0.82rem; font-weight: 700; color: var(--cw-gray-800); margin-bottom: 3px; }
.pc-trigger-desc { font-size: 0.75rem; color: var(--cw-gray-500); line-height: 1.4; }

/* CTA */
.pc-cta {
  margin: 12px 20px 20px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  border-radius: 14px;
  color: #fff;
  text-align: center;
}
.pc-cta-headline {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
}
.pc-cta-highlight { color: #fbbf24; }
.pc-cta-sub {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}
.pc-cta-urgency {
  display: inline-block;
  padding: 7px 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

/* ── Presentation mode ── */
.pc-presentation-mode .pc-grid {
  grid-template-columns: 1fr;
}
.pc-presentation-mode #pcConfig {
  display: none;
}
.pc-presentation-mode .pc-canvas {
  max-width: 760px;
  margin: 0 auto;
}
.pc-presentation-mode .pc-hero-value { font-size: 5rem; }
.pc-presentation-mode .pc-daily-value { font-size: 2.8rem; }
.pc-presentation-mode .pc-insight-big { font-size: 2.4rem; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .pc-grid { grid-template-columns: 1fr; }
  .pc-topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pc-triggers-grid { grid-template-columns: 1fr; }
  .pc-hero-value { font-size: 2.6rem; }
  .pc-daily-strip { flex-direction: column; gap: 8px; }
}

/* ── Period switch ── */
.pc-period-section { background: #faf5ff; }
.pc-period-section .pc-config-label { margin-bottom: 12px; }
.pc-period-switch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #ede9fe;
  border-radius: 8px;
  padding: 3px;
}
.pc-period-btn {
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 7px 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #7c3aed;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.pc-period-btn:hover { background: rgba(124,58,237,0.12); }
.pc-period-btn.active {
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 1px 4px rgba(124,58,237,0.35);
}

/* ── Investment hero block ── */
.pc-inv-wrap {
  padding: 6px 0 2px;
}
.pc-inv-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cw-gray-400);
  margin-bottom: 4px;
}
.pc-inv-hero {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.pc-inv-price {
  font-size: 2rem;
  font-weight: 800;
  color: #7c3aed;
  line-height: 1;
}
.pc-inv-per {
  font-size: 0.82rem;
  color: var(--cw-gray-400);
  font-weight: 500;
}
.pc-inv-period-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 6px;
}
.pc-inv-times {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--cw-gray-400);
  letter-spacing: .02em;
}
.pc-inv-total-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cw-gray-700);
}

/* presentation mode */
.pc-presentation-mode .pc-inv-price { font-size: 4rem; }
.pc-presentation-mode .pc-inv-total-val { font-size: 1.6rem; }

/* WhatsApp share bar — only visible in presentation mode */
.pc-share-bar {
  display: none;
  padding: 16px 24px 20px;
}
.pc-presentation-mode .pc-share-bar { display: block; }

.pc-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
  letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.pc-whatsapp-btn:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}
.pc-whatsapp-btn:active { transform: translateY(0); }

/* ── Totem addon with quantity (shared between both calculators) ── */
.calc-addon-totem {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: var(--cw-gray-50);
  border: 1.5px solid var(--cw-gray-200);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .15s;
}
.calc-addon-totem:has(input:checked),
.pc-addon-totem-wrap:has(input:checked) {
  border-color: var(--cw-purple-400);
  background: rgba(124,58,237,0.04);
}
.calc-addon-totem-label,
.pc-addon-totem-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 10px 12px;
  cursor: pointer;
}
.pc-addon-totem-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--cw-gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cw-gray-50);
  transition: all .15s;
}
.pc-addon-totem-wrap .pc-addon-totem-label {
  flex: 1;
  padding: 10px 12px;
  cursor: pointer;
}
.calc-totem-qty-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-left: 1px solid var(--cw-gray-200);
  background: #fff;
  flex-shrink: 0;
}
.calc-totem-qty-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cw-gray-400);
  white-space: nowrap;
}
.calc-totem-qty-input {
  width: 52px;
  border: 1px solid var(--cw-gray-200);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  text-align: center;
  outline: none;
  background: #fff;
}
.calc-totem-qty-input:focus { border-color: var(--cw-purple-400); }

/* Implementation fee field */
.pc-impl-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--cw-gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  max-width: 180px;
}
.pc-impl-wrap:focus-within { border-color: var(--cw-purple-400); box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }
.pc-impl-prefix {
  padding: 8px 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cw-gray-400);
  background: var(--cw-gray-50);
  border-right: 1px solid var(--cw-gray-200);
}
.pc-impl-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  background: transparent;
}

/* Impl fee display in canvas */
.pc-impl-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pc-impl-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #111827;
}
.pc-impl-note {
  font-size: 0.78rem;
  color: var(--cw-gray-400);
}
.pc-impl-free {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  color: #059669;
  font-weight: 600;
}
.pc-impl-free svg { color: #059669; flex-shrink: 0; }
.pc-impl-free-mode { background: #f0fdf4 !important; border-left: 3px solid #10b981; }

/* Validity field */
.pc-validity-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pc-validity-input {
  width: 72px;
  border: 1.5px solid var(--cw-gray-200);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cw-gray-800);
  text-align: center;
  outline: none;
  background: #fff;
}
.pc-validity-input:focus { border-color: var(--cw-purple-400); box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }
.pc-validity-unit {
  font-size: 0.82rem;
  color: var(--cw-gray-500);
}

/* ── Proposal canvas clean format ── */
.pc-proposal-canvas {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pc-proposal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 18px;
  border-bottom: 2px solid #111827;
}
.pc-proposal-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cw-purple-600);
  margin-bottom: 4px;
}
.pc-proposal-company {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
}
.pc-proposal-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--cw-gray-400);
  white-space: nowrap;
  padding-top: 2px;
}
.pc-proposal-section {
  padding: 18px 24px;
  border-bottom: 1px solid var(--cw-gray-100);
}
.pc-proposal-section:last-child { border-bottom: none; }
.pc-proposal-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cw-gray-400);
  margin-bottom: 12px;
}
.pc-line-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--cw-gray-100);
}
.pc-line-item:last-child { border-bottom: none; }
.pc-line-name { color: #374151; }
.pc-line-value { font-weight: 600; color: #111827; }
.pc-line-empty { font-size: 0.82rem; color: var(--cw-gray-400); padding: 8px 0; }
.pc-proposal-divider { height: 1px; background: #111827; margin: 10px 0 8px; }
.pc-proposal-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
}
.pc-proposal-total-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cw-purple-700);
}
.pc-conditions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pc-conditions-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: #374151;
}
.pc-conditions-list li svg { color: #10b981; flex-shrink: 0; }
.pc-annual-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.pc-annual-detail-label {
  font-size: 0.84rem;
  color: var(--cw-gray-500);
}
.pc-annual-detail-label strong { color: #374151; }
.pc-annual-detail-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
}
.pc-proposal-validity {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  font-size: 0.8rem;
  color: var(--cw-gray-500);
  background: var(--cw-gray-50);
  border-top: 1px solid var(--cw-gray-100);
}
.pc-proposal-validity strong { color: #374151; }
.pc-proposal-validity svg { color: var(--cw-gray-400); flex-shrink: 0; }

/* presentation mode adjustments */
.pc-presentation-mode .pc-proposal-total-value { font-size: 2.4rem; }
.pc-presentation-mode .pc-annual-detail-value   { font-size: 1.6rem; }


/* ============================================================
   CLIENTS — View Switch, Kanban, Stats  (cv- prefix)
   ============================================================ */

/* ── Header ── */
.cv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.cv-header-left { display: flex; align-items: center; gap: 10px; }
.cv-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-title { font-size: 1.35rem; font-weight: 700; color: var(--cw-gray-900); margin: 0; }
.cv-total-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  background: var(--cw-purple-100);
  color: var(--cw-purple-700);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ── View toggle ── */
.cv-view-toggle {
  display: flex;
  background: var(--cw-gray-100);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.cv-vbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cw-gray-500);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.cv-vbtn:hover { background: rgba(255,255,255,0.7); color: var(--cw-gray-700); }
.cv-vbtn.active {
  background: #fff;
  color: var(--cw-purple-700);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  font-weight: 600;
}

/* ── Status pills bar ── */
.cv-status-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cv-spill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--cw-gray-200);
  background: #fff;
  font-size: 0.82rem;
  color: var(--cw-gray-600);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}
.cv-spill:hover { border-color: var(--cw-purple-300); color: var(--cw-purple-700); }
.cv-spill.active {
  background: var(--cw-purple-50);
  border-color: var(--cw-purple-300);
  color: var(--cw-purple-700);
  font-weight: 600;
}
.cv-spill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cv-spill-n {
  background: var(--cw-gray-100);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cw-gray-600);
}
.cv-spill.active .cv-spill-n { background: var(--cw-purple-100); color: var(--cw-purple-700); }

/* ── Status badge (shared) ── */
.cv-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Kanban board ── */
.cv-kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 400px;
}
@media (max-width: 900px) {
  .cv-kanban-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cv-kanban-board { grid-template-columns: 1fr; }
}

.kanban-column {
  background: var(--cw-gray-50);
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.18s;
  min-height: 200px;
}
.kanban-column--over {
  background: var(--cw-purple-50);
  border-color: var(--cw-purple-300);
  box-shadow: 0 0 0 2px var(--cw-purple-200);
}
.kanban-column--forbidden {
  background: #fff5f5;
  border-color: #fca5a5;
}

.kanban-col__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  background: #fff;
  border-bottom: 1px solid var(--cw-gray-100);
}
.kanban-col__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kanban-col__title { font-size: 0.85rem; font-weight: 700; color: var(--cw-gray-800); }
.kanban-col__count {
  background: var(--cw-gray-100);
  color: var(--cw-gray-600);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

.kanban-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

.kanban-card {
  background: #fff;
  border: 1px solid var(--cw-gray-200);
  border-radius: 10px;
  padding: 12px 13px;
  cursor: grab;
  transition: box-shadow 0.15s, opacity 0.15s, transform 0.15s;
  user-select: none;
}
.kanban-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.10); transform: translateY(-1px); }
.kanban-card--dragging { opacity: 0.45; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.kanban-card__name { font-size: 0.88rem; font-weight: 700; color: var(--cw-gray-900); margin-bottom: 2px; }
.kanban-card__company { font-size: 0.76rem; color: var(--cw-gray-400); margin-bottom: 6px; }
.kanban-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.kanban-card__status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.kanban-card__actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cw-gray-100);
}
.kanban-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--cw-gray-100);
  color: var(--cw-gray-500);
  text-decoration: none;
  transition: all 0.15s;
  font-size: 0.8rem;
}
.kanban-action-btn:hover { background: var(--cw-purple-100); color: var(--cw-purple-700); }

.cv-kanban-hint {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--cw-gray-400);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Toast notification ── */
.kanban-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1f2937;
  color: #fff;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  white-space: nowrap;
}
.kanban-toast--notice { background: #065f46; }
.kanban-toast--alert  { background: #991b1b; }
.kanban-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════════════════════
   CHURN REASON MODAL
══════════════════════════════════════════════════════════════════ */
.churn-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.churn-dialog {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.churn-dialog-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.churn-dialog-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fef2f2;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.churn-dialog-title {
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 3px;
}

.churn-dialog-client {
  font-size: 0.82rem;
  color: #6b7280;
  margin: 0;
  font-weight: 500;
}

.churn-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
}
.churn-close-btn:hover { color: #374151; background: #f3f4f6; }

.churn-dialog-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.churn-field { display: flex; flex-direction: column; gap: 6px; }

.churn-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #374151;
}

.churn-required { color: #ef4444; }

.churn-select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #111827;
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
  appearance: auto;
}
.churn-select:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }
.churn-select--error { border-color: #ef4444 !important; }

.churn-select-error {
  font-size: 0.76rem;
  color: #ef4444;
  font-weight: 500;
}

.churn-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #374151;
  resize: vertical;
  min-height: 80px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
  box-sizing: border-box;
}
.churn-textarea:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }

.churn-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid #f3f4f6;
}

.churn-btn-secondary {
  padding: 9px 18px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.churn-btn-secondary:hover { background: #f9fafb; border-color: #d1d5db; }

.churn-btn-danger {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.churn-btn-danger:hover { background: #dc2626; }

@media (max-width: 520px) {
  .churn-dialog { border-radius: 10px; }
  .churn-dialog-footer { flex-direction: column-reverse; }
  .churn-btn-secondary, .churn-btn-danger { width: 100%; justify-content: center; }
}

/* ── Stats grid ── */
.cv-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) { .cv-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .cv-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.cv-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 16px;
  box-shadow: none;
}
.cv-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
}
.cv-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--cw-gray-900); line-height: 1.1; }
.cv-stat-label { font-size: 0.78rem; color: var(--cw-gray-500); font-weight: 500; }
.cv-stat-pct   { font-size: 0.8rem; font-weight: 700; margin-left: auto; white-space: nowrap; }

/* =============================================
   ADMIN DASHBOARD — Flat/Light redesign
   KPI Grid (replaces strip)
   ============================================= */

/* Override card shadow/border for flat look */
.adm-card {
  box-shadow: none !important;
  border: 1px solid var(--cw-gray-100) !important;
}

.adm-card:hover {
  box-shadow: none !important;
}

.adm-maximize-btn {
  box-shadow: none !important;
}

/* KPI tile grid */
.adm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.adm-kpi-tile {
  background: var(--cw-bg-card);
  border: 1px solid var(--cw-gray-100);
  border-radius: var(--cw-radius-lg);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}

.adm-kpi-tile:hover {
  border-color: var(--cw-gray-200);
}

.adm-kpi-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--cw-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.adm-kpi-tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adm-kpi-tile-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--cw-gray-900);
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
}

.adm-kpi-tile-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cw-gray-400);
  margin-top: 2px;
}

.adm-kpi-tile-sub {
  font-size: 0.68rem;
  font-weight: 600;
  margin-top: 4px;
  color: var(--cw-gray-400);
}

.adm-kpi-tile-sub.positive { color: #059669; }
.adm-kpi-tile-sub.negative { color: #dc2626; }

@media (max-width: 1400px) {
  .adm-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .adm-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .adm-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* ── Client Stores: form section ───────────────────────────────── */
.stores-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.stores-counter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--cw-purple-50), rgba(124,58,237,.08));
  border: 1px solid var(--cw-purple-200);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cw-purple-700);
}

.stores-counter-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--cw-purple-600);
  min-width: 24px;
  text-align: center;
}

.store-row {
  background: var(--cw-gray-50);
  border: 1px solid var(--cw-gray-200);
  border-radius: 10px;
  padding: 14px 16px 10px;
  margin-bottom: 10px;
  transition: border-color .15s;
}

.store-row:focus-within {
  border-color: var(--cw-purple-400);
}

.store-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.store-row-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cw-purple-600);
}

.store-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: #ef4444;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s;
}
.store-remove-btn:hover { background: #fee2e2; }

.stores-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 18px;
  border: 2px dashed var(--cw-purple-300);
  border-radius: 8px;
  background: transparent;
  color: var(--cw-purple-600);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.stores-add-btn:hover {
  background: var(--cw-purple-50);
  border-color: var(--cw-purple-500);
}

/* ── Client Stores: table badge ─────────────────────────────────── */
.clients-stores-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #059669;
  background: #d1fae5;
  border-radius: 12px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Client Stores: kanban badge ────────────────────────────────── */
.kanban-stores-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: #059669;
  background: #d1fae5;
  border-radius: 8px;
  padding: 2px 8px;
  margin-bottom: 6px;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD FLAT REDESIGN
   ══════════════════════════════════════════════════════════════════ */

/* Flat wrapper: override shadows + radii on all adm-* cards */
.adm-flat .adm-kpi-tile,
.adm-flat .adm-card,
.adm-flat .adm-card2 {
  box-shadow: none !important;
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
}

.adm-flat .adm-kpi-tile-icon {
  border-radius: 4px !important;
}

/* Flat KPI icon (square, not round) */
.adm-kpi-icon2 {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Card title v2 */
.adm-card-title2 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #374151;
  margin: 0;
}

.adm-card-subtitle {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 3px;
}

/* Chart legend v2 */
.adm-chart-legend2 {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 20px 12px;
}

.adm-legend2-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #6b7280;
  font-weight: 500;
}

.adm-legend2-bar {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.adm-legend2-line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
  display: inline-block;
}

.adm-legend2-dash {
  width: 16px;
  height: 2px;
  border-radius: 1px;
  display: inline-block;
  background: repeating-linear-gradient(90deg, currentColor 0, currentColor 4px, transparent 4px, transparent 7px);
}

/* Section header above agenda */
.adm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.adm-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #374151;
}

.adm-section-sub {
  font-size: 0.72rem;
  color: #9ca3af;
}

/* Agenda wrap card */
.adm-agenda-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 16px 20px 18px;
  margin-bottom: 16px;
}

/* Agenda strip: 6 cells */
.adm-agenda-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.adm-agenda-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px 10px;
  border-right: 1px solid #e2e8f0;
  text-align: center;
  border-top: 3px solid transparent;
}

.adm-agenda-cell:last-child { border-right: none; }

.adm-agenda-num {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.adm-agenda-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
}

.adm-agenda-overdue   { border-top-color: #ef4444; color: #ef4444; }
.adm-agenda-today     { border-top-color: #f59e0b; color: #f59e0b; }
.adm-agenda-week      { border-top-color: #3b82f6; color: #3b82f6; }
.adm-agenda-nextweek  { border-top-color: #8b5cf6; color: #8b5cf6; }
.adm-agenda-later     { border-top-color: #6b7280; color: #6b7280; }
.adm-agenda-nodate    { border-top-color: #d1d5db; color: #9ca3af; }

.adm-agenda-cell svg { opacity: 0.8; }

/* Agenda ranking row */
.adm-agenda-ranks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* Card v2 (flat, for agenda ranking) */
.adm-card2 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.adm-card2-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #374151;
}

/* Rank table */
.adm-rank-table {
  width: 100%;
  border-collapse: collapse;
}

.adm-rank-table thead tr { background: #f8fafc; }

.adm-rank-table th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9ca3af;
  padding: 8px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.adm-rank-table td {
  padding: 10px 16px;
  font-size: 0.82rem;
  border-bottom: 1px solid #f8fafc;
  color: #374151;
}

.adm-rank-table tbody tr:last-child td { border-bottom: none; }

.adm-rank-pos-cell { width: 36px; }

.adm-rank-pos-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 800;
  background: #f1f5f9;
  color: #6b7280;
}

.adm-rank-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 800;
}

.adm-rank-count.blue { background: #eff6ff; color: #2563eb; }
.adm-rank-count.red  { background: #fef2f2; color: #dc2626; }

.adm-table-empty {
  text-align: center;
  color: #9ca3af;
  font-size: 0.8rem;
  padding: 20px 16px !important;
}

/* Rep ranking item v2 */
.adm-rank-item2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #f8fafc;
}

.adm-rank-item2:last-child { border-bottom: none; }

.adm-rank2-pos { flex-shrink: 0; }

.adm-rank2-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 800;
}

.adm-rank2-avatar {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6b7280;
  flex-shrink: 0;
  overflow: hidden;
}

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

.adm-rank2-info { flex: 1; min-width: 0; }

.adm-rank2-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-rank2-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #6b7280;
  margin-top: 2px;
  flex-wrap: wrap;
}

.adm-rank2-sep { color: #d1d5db; }

.adm-rank2-bar-wrap {
  height: 3px;
  background: #f1f5f9;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.adm-rank2-churn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.67rem;
  color: #d1d5db;
  margin-top: 3px;
  letter-spacing: .01em;
}
.adm-rank2-churn-sep { color: #e5e7eb; }
.adm-rank2-churn-pct { color: #d1d5db; }

.adm-rank2-bar {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}

.adm-rank2-tm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.adm-rank2-tm-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9ca3af;
}

.adm-rank2-tm-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
}

.adm-rank2-pct-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 26px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #374151;
  flex-shrink: 0;
}

/* Insight card v2 */
.adm-insight-card2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
}

.adm-insight-icon2 {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.adm-insight-title2 {
  font-size: 0.78rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.adm-insight-text2 {
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.4;
}

/* Metric box v2 */
.adm-metric-box2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  border-right: 1px solid #f1f5f9;
  text-align: center;
}

.adm-metric-box2:last-child { border-right: none; }

.adm-metric-icon2 {
  color: #9ca3af;
}

.adm-metric2-data {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.adm-metric2-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

.adm-metric2-unit {
  font-size: 0.72rem;
  color: #9ca3af;
  font-weight: 600;
}

.adm-metric2-label {
  font-size: 0.72rem;
  color: #6b7280;
  font-weight: 500;
}

@media (max-width: 900px) {
  .adm-agenda-strip { grid-template-columns: repeat(3, 1fr); }
  .adm-agenda-ranks { grid-template-columns: 1fr; }
  .adm-rankings-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .adm-agenda-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR — Suggest-box widget
   ══════════════════════════════════════════════════════════════════ */
.sidebar-suggest-box {
  margin: 10px 10px 4px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  padding: 14px 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ssb-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ssb-text {
  font-size: 0.79rem;
  color: #4c1d95;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

.ssb-btn {
  display: block;
  text-align: center;
  background: #7c3aed;
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background .15s;
  letter-spacing: .02em;
}
.ssb-btn:hover { background: #6d28d9; }

.ssb-row {
  display: flex;
  gap: 6px;
}

.ssb-link {
  flex: 1;
  display: block;
  text-align: center;
  background: #fff;
  color: #7c3aed !important;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 7px 8px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background .15s;
  letter-spacing: .02em;
  border: 1px solid #c4b5fd;
}
.ssb-link:hover { background: #f5f3ff; }

.ssb-btn-sm {
  flex: 1;
  display: block;
  text-align: center;
  background: #7c3aed;
  color: #fff !important;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 7px 8px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background .15s;
  letter-spacing: .02em;
}
.ssb-btn-sm:hover { background: #6d28d9; }

/* ══════════════════════════════════════════════════════════════════
   SUGGESTIONS BOARD
   ══════════════════════════════════════════════════════════════════ */
.sug-page { max-width: 860px; margin: 0 auto; }

/* Hero Banner */
.sug-hero {
  background: linear-gradient(135deg, #5c2d82 0%, #8758A0 55%, #b07fd0 100%);
  border-radius: 12px;
  padding: 44px 40px 40px;
  text-align: center;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.sug-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.sug-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.92);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,0.2);
}
.sug-hero-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.sug-hero-subtitle {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
  max-width: 540px;
  margin: 0 auto 28px;
  line-height: 1.65;
}
.sug-hero-stats {
  display: inline-flex;
  align-items: stretch;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  margin-bottom: 28px;
  overflow: hidden;
}
.sug-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 28px;
}
.sug-hero-stat + .sug-hero-stat {
  border-left: 1px solid rgba(255,255,255,0.18);
}
.sug-hero-stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.sug-hero-stat-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.68);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 5px;
}
.sug-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #8758A0;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 11px 26px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, transform .15s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.sug-hero-cta:hover { background: #faf5ff; transform: translateY(-1px); }

/* Header */
.sug-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sug-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 4px;
}

.sug-subtitle {
  font-size: 0.82rem;
  color: #6b7280;
  margin: 0;
}

/* Filters */
.sug-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sug-status-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sug-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #6b7280;
  background: #fff;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}

.sug-pill:hover { background: #f8fafc; color: #374151; }
.sug-pill.active { background: #111827; color: #fff; border-color: #111827; }

.sug-sort-btns {
  display: flex;
  gap: 4px;
}

.sug-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #6b7280;
  background: #fff;
  text-decoration: none;
  transition: all .15s;
}

.sug-sort-btn:hover { background: #f8fafc; }
.sug-sort-btn.active { background: #8758A0; color: #fff; border-color: #8758A0; }

/* Card list */
.sug-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.sug-card {
  border-bottom: 1px solid #f1f5f9;
}

.sug-card:last-child { border-bottom: none; }

.sug-card-main {
  display: flex;
  gap: 0;
  padding: 18px 20px;
  align-items: flex-start;
}

/* Vote button */
.sug-vote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  color: #9ca3af;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
  margin-right: 16px;
  min-width: 46px;
}

.sug-vote-btn:hover { border-color: #8758A0; color: #8758A0; }
.sug-vote-btn.voted { border-color: #8758A0; color: #8758A0; background: #faf5ff; }
.sug-vote-btn.voted svg { fill: #8758A0; }
.sug-vote-count { font-size: 0.9rem; font-weight: 800; line-height: 1; }

/* Card content */
.sug-card-content { flex: 1; min-width: 0; }

.sug-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.sug-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  flex: 1;
  line-height: 1.3;
}

.sug-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.sug-card-desc {
  font-size: 0.82rem;
  color: #6b7280;
  margin: 0 0 8px;
  line-height: 1.5;
}

.sug-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: #9ca3af;
  margin-bottom: 10px;
}

.sug-card-meta span { display: flex; align-items: center; gap: 4px; }

.sug-meta-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #6b7280;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color .15s;
}

.sug-meta-action:hover { color: #374151; }
.sug-meta-action.danger:hover { color: #ef4444; }

/* Post author row (footer do card, acima do toggle de comentários) */
.sug-post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 8px;
  margin-top: 6px;
  border-top: 1px solid #f1f5f9;
}

.sug-post-author .sug-comment-header {
  flex: 1;
  min-width: 0;
}

/* Comment toggle */
.sug-comment-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color .15s;
}

.sug-comment-toggle:hover { color: #8758A0; }

/* Comments section */
.sug-comments-section {
  display: none;
  border-top: 1px solid #f1f5f9;
  padding: 16px 20px 16px 74px;
  background: #fafafa;
  flex-direction: column;
  gap: 12px;
}

.sug-comments-section.open { display: flex; }

.sug-comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.sug-comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sug-comment-avatar {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #6b7280;
  flex-shrink: 0;
  overflow: hidden;
}

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

.sug-comment-body { flex: 1; }

.sug-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.sug-comment-author { font-size: 0.78rem; font-weight: 700; color: #374151; }
.sug-comment-time   { font-size: 0.7rem;  color: #9ca3af; }

/* ── Ranking badges nos comentários de sugestões ── */
/* ── Gamification reward badges ───────────────────────────────── */
.sug-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 20px;
  border: 1.5px solid transparent;
  vertical-align: middle;
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  height: 26px;
  padding: 0 10px 0 0;
}

.srb-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.42);
  border-right: 1.5px solid rgba(255,255,255,0.35);
  margin-right: 7px;
  line-height: 1;
}

.srb-label {
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Monthly medals ── */
.sug-medal-1 {
  background: linear-gradient(135deg, #fffacd 0%, #fde68a 30%, #fbbf24 70%, #f59e0b 100%);
  color: #78350f;
  border-color: #f59e0b;
  box-shadow: 0 1px 7px rgba(245,158,11,.45), inset 0 1px 0 rgba(255,255,255,.55);
}
.sug-medal-2 {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 45%, #cbd5e1 100%);
  color: #1e293b;
  border-color: #94a3b8;
  box-shadow: 0 1px 5px rgba(100,116,139,.3), inset 0 1px 0 rgba(255,255,255,.8);
}
.sug-medal-3 {
  background: linear-gradient(135deg, #fef3c7 0%, #fb923c 45%, #b45309 100%);
  color: #fff;
  border-color: #c2550e;
  box-shadow: 0 1px 6px rgba(194,85,14,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.sug-medal-4,
.sug-medal-5 {
  background: linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 45%, #a78bfa 100%);
  color: #4c1d95;
  border-color: #7c3aed;
  box-shadow: 0 1px 5px rgba(124,58,237,.2);
}

/* ── All-time trophies ── */
.sug-trophy-1 {
  background: linear-gradient(135deg, #fef9c3 0%, #fcd34d 35%, #f59e0b 70%, #d97706 100%);
  color: #451a03;
  border-color: #d97706;
  box-shadow: 0 1px 9px rgba(217,119,6,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.sug-trophy-2 {
  background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 50%, #94a3b8 100%);
  color: #0f172a;
  border-color: #64748b;
  box-shadow: 0 1px 5px rgba(100,116,139,.25), inset 0 1px 0 rgba(255,255,255,.6);
}
.sug-trophy-3 {
  background: linear-gradient(135deg, #fed7aa 0%, #f97316 50%, #9a3412 100%);
  color: #fff;
  border-color: #9a3412;
  box-shadow: 0 1px 6px rgba(154,52,18,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.sug-trophy-4,
.sug-trophy-5 {
  background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 50%, #3b82f6 100%);
  color: #1e3a8a;
  border-color: #2563eb;
  box-shadow: 0 1px 5px rgba(37,99,235,.2);
}

.sug-comment-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: #d1d5db;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  transition: color .15s;
  margin-left: auto;
}

.sug-comment-delete:hover { color: #ef4444; }

.sug-comment-text {
  font-size: 0.8rem;
  color: #374151;
  margin: 0;
  line-height: 1.5;
}

/* Comment form */
.sug-comment-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sug-my-avatar { flex-shrink: 0; }

.sug-comment-input-wrap {
  display: flex;
  flex: 1;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s;
}

.sug-comment-input-wrap:focus-within { border-color: #8758A0; }

.sug-comment-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: #374151;
  background: transparent;
}

.sug-comment-submit {
  padding: 8px 12px;
  background: #8758A0;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
}

.sug-comment-submit:hover { background: #7048890; }
.sug-comment-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Empty state */
.sug-empty {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #9ca3af;
}

.sug-empty svg { margin-bottom: 12px; }
.sug-empty h3 { font-size: 1rem; font-weight: 700; color: #374151; margin: 0 0 6px; }
.sug-empty p  { font-size: 0.82rem; margin: 0 0 16px; }

/* Form page */
.sug-form-page { max-width: 640px; margin: 0 auto; }

.sug-form-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 28px 32px;
}

.sug-form-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}

.sug-form-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 4px;
}

.sug-form-subtitle {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0;
}

.sug-form-hint {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 4px;
}

/* Duplicate detection panel */
.sug-dup-panel {
  margin-top: 8px;
  border: 1px solid #e5d5f0;
  border-radius: 4px;
  background: #fdf8ff;
  overflow: hidden;
}

.sug-dup-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #8758A0;
  background: #f5ecff;
  border-bottom: 1px solid #e5d5f0;
}

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

.sug-dup-item {
  padding: 10px 14px;
  border-bottom: 1px solid #f3e8ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.sug-dup-item:last-child { border-bottom: none; }

.sug-dup-item-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }

.sug-dup-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.sug-dup-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}

.sug-dup-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sug-dup-votes {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #9ca3af;
}

.sug-dup-join {
  font-size: 0.74rem;
  font-weight: 700;
  color: #8758A0;
  text-decoration: none;
}

.sug-dup-join:hover { text-decoration: underline; }

.sug-dup-footer {
  padding: 8px 14px;
  background: #f5ecff;
  border-top: 1px solid #e5d5f0;
  text-align: right;
}

.sug-dup-dismiss {
  background: none;
  border: none;
  font-size: 0.74rem;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  transition: color .15s;
}

.sug-dup-dismiss:hover { color: #374151; }

/* ══════════════════════════════════════════════════════════════════
   SUGGESTIONS — Mobile Responsive
══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Prevent horizontal overflow on the whole page */
  .sug-page { overflow-x: hidden; }

  /* ── Hero ── */
  .sug-hero {
    padding: 28px 18px 24px;
    border-radius: 8px;
    margin-bottom: 16px;
  }
  .sug-hero-title { font-size: 1.55rem; }
  .sug-hero-subtitle {
    font-size: 0.82rem;
    margin-bottom: 20px;
  }
  /* Stats: stretch full width, wrap if needed */
  .sug-hero-stats {
    display: flex;
    width: 100%;
  }
  .sug-hero-stat {
    flex: 1;
    padding: 12px 8px;
  }
  .sug-hero-stat-num { font-size: 1.4rem; }

  /* ── Card main area ── */
  .sug-card-main { padding: 14px 12px; }
  .sug-vote-btn {
    padding: 6px 9px;
    margin-right: 10px;
    min-width: 36px;
  }

  /* ── Card title row ── */
  .sug-card-title { font-size: 0.9rem; }

  /* ── Comments section ──
     Remove the 74px left indent (designed for desktop vote-col alignment).
     On mobile use symmetric padding. */
  .sug-comments-section {
    padding: 14px 12px;
  }

  /* ── Comment header: allow wrapping so long names + badges + time fit ── */
  .sug-comment-header {
    flex-wrap: wrap;
    gap: 3px 6px;
  }

  /* Time: pushed to the right of its flex row */
  .sug-comment-time { margin-left: auto; }

  /* ── Reward badges — icon-only on mobile ──
     Hide the text label; show only the emoji circle.
     The `title` attribute still shows the full label on press-and-hold. */
  .srb-label { display: none; }

  .sug-rank-badge {
    padding: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    justify-content: center;
    margin-left: 2px;
  }

  .srb-icon {
    width: 26px;
    height: 26px;
    margin-right: 0;
    border-right: none;
    font-size: 13px;
  }

  /* ── Comment form ── */
  .sug-comment-form { gap: 6px; }
  .sug-comment-input { padding: 8px 10px; font-size: 0.78rem; }

  /* ── Filters ── */
  .sug-filters { gap: 8px; }
  .sug-sort-btns { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .sug-hero { padding: 22px 14px 20px; }
  .sug-hero-title { font-size: 1.3rem; }
  .sug-hero-stat-num { font-size: 1.2rem; }
  .sug-hero-stat { padding: 10px 6px; }

  .sug-card-main { padding: 12px 10px; }
  .sug-vote-btn {
    padding: 5px 7px;
    margin-right: 8px;
    min-width: 32px;
  }

  /* Comment form avatar: slightly smaller on very small screens */
  .sug-my-avatar { width: 26px; height: 26px; }
}