/* --- Modern Hero --- */
.hero-modern{position:relative; padding:96px 0; background: radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.18), transparent), radial-gradient(1000px 500px at 100% 10%, rgba(16,185,129,.18), transparent);}
.hero-modern .hero-inner{display:flex; align-items:center; justify-content:space-between; gap:48px;}
.hero-modern .hero-copy{max-width:720px}
.hero-modern .pill{display:inline-block; font-size:.8rem; padding:6px 10px; border:1px solid rgba(0,0,0,.08); border-radius:999px; background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); margin-bottom:12px}
.hero-modern h1{font-size: clamp(2rem, 4vw, 3rem); line-height:1.1; margin:0 0 12px}
.hero-modern p{font-size: clamp(1rem, 1.2vw, 1.125rem); color: var(--muted,#6b7280); margin:0 0 20px}
.cta-row{display:flex; gap:12px; align-items:center}
.btn-solid{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; background:#111827; color:#fff; border-radius:10px; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.15)}
.btn-solid:hover{background:#0b1220; color:#fff}
.btn-ghost{display:inline-flex; align-items:center; padding:10px 14px; border:1px solid rgba(0,0,0,.12); border-radius:10px; text-decoration:none; color:#111827}
.btn-ghost:hover{background:rgba(0,0,0,.03)}
.integrations{display:flex; align-items:center; gap:8px; margin-top:14px}
.integrations .label{font-size:.8rem; color:#6b7280; margin-right:4px}
.int-icon{width:28px; height:28px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.hero-art{flex:1; min-height:240px; border-radius:16px; background: linear-gradient(135deg, rgba(17,24,39,.9), rgba(2,6,23,.85)), radial-gradient(circle at 70% 30%, rgba(99,102,241,.25), transparent 40%), radial-gradient(circle at 30% 70%, rgba(16,185,129,.25), transparent 40%); box-shadow: 0 20px 60px rgba(0,0,0,.25)}
@media (max-width: 992px){
  .hero-modern .hero-inner{flex-direction:column}
  .hero-art{width:100%;}
}

/* Dashboard feature icons */
/* dashboard icons: use raw SVGs from /web/images, no colored background */
.feature-icon-circle{width:64px;height:64px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:transparent;box-shadow:none}
.feature-icon-svg{width:48px;height:48px;filter:none!important;display:inline-block;object-fit:contain}
.feature-icon-fallback{font-size:28px;color:var(--text-primary)}
/* Modernized dashboard feature cards */
.dashboard-feature-card{background:var(--surface-elevated);border:1px solid var(--border-light);border-radius:16px;padding:22px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.dashboard-feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.dashboard-feature-title{font-weight:700;margin:6px 0 6px 0;letter-spacing:-.2px}
.dashboard-feature-desc{color:var(--text-secondary);font-size:.95rem;margin:0 0 12px}
.feature-icon-circle.modern{position:relative;z-index:0}
/* drop decorative ring and background so icons appear as plain SVGs */
.feature-icon-circle.modern::after{display:none}
.feature-icon-circle.modern .feature-icon-svg{position:relative;z-index:1;display:block;width:48px;height:48px;object-fit:contain}
@keyframes pulse-ring{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.25);opacity:0}100%{transform:scale(1.35);opacity:0}}
.btn-soft-primary{background:rgba(16,185,129,.1);color:var(--primary);border:1px solid rgba(16,185,129,.25);border-radius:10px;padding:.5rem .9rem;font-weight:600}
.btn-soft-primary:hover{background:rgba(16,185,129,.16);color:var(--primary-hover);border-color:rgba(16,185,129,.35)}
/* Modern CARLA Front-end Styles */
:root {
  --bg: #fff;
  --bg-secondary: #f8fafc;
  --card: #ffffff;
  --glass: #ffffff;
  --glass-border: #e2e8f0;
  --muted: #64748b;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --emerald: #10b981;
  --emerald-hover: #059669;
  --emerald-light: #d1fae5;
  --soft-blue: #64748b;
  --soft-blue-hover: #475569;
  --gradient-primary: linear-gradient(135deg, #10b981, #059669);
  --gradient-secondary: linear-gradient(135deg, #3b82f6, #1d4ed8);
  --font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-emerald: 0 4px 14px 0 rgba(16, 185, 129, 0.15);
  --primary: #10b981;
  --primary-hover: #059669;
  --primary-light: #d1fae5;
  --secondary: #64748b;
  --background: #ffffff;
  --surface: #f8fafc;
  --surface-elevated: #ffffff;
  --text-muted: #94a3b8;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Append modern styles from index2 to enhance buttons and landing visuals */

/* Modern Navbar tweaks */
.modern-navbar {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.navbar-brand.brand-logo { font-weight: 800; color: var(--primary); letter-spacing: -0.02em; }
.brand-text { display: inline-flex; align-items: baseline; gap: 0.12rem; }
.brand-carla { color: #0b1320; font-weight: 800; }
.brand-ai { color: #10b981; font-weight: 800; }
.navbar-nav .nav-link { color: var(--text-secondary); font-weight: 500; border-radius: 6px; }
.navbar-nav .nav-link:hover { color: var(--primary); background-color: var(--primary-light); }

/* Stylish buttons */
.btn-primary-modern {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-primary-modern:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); color: #fff; }
.btn-secondary-modern {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 2px solid var(--border);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  transition: all .2s ease;
}
.btn-secondary-modern:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-1px); }

/* Hero and sections */
.hero-section { padding: 8rem 0 6rem; background: linear-gradient(135deg, var(--surface) 0%, #e2e8f0 100%); position: relative; overflow: hidden; }
.hero-section::before { content: ''; position: absolute; top: -50%; right: -30%; width: 80%; height: 150%; background: radial-gradient(ellipse at center, rgba(16,185,129,.1) 0%, transparent 70%); border-radius: 50%; }
.hero-content { position: relative; z-index: 2; text-align: center; max-width: 800px; margin: 0 auto; }
.hero-badge { display:inline-block; background: var(--primary-light); color: var(--primary); padding:.5rem 1rem; border-radius:50px; font-size:.875rem; font-weight:600; margin-bottom:2rem; border:1px solid rgba(16,185,129,.2); }
.hero-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; color: var(--text-primary); margin-bottom: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; }
.hero-subtitle { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 2.5rem; line-height: 1.6; max-width: 600px; margin-inline: auto; }
.hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.features-section { padding: 6rem 0; background: var(--background); }
.section-header { text-align:center; margin-bottom:4rem; }
.section-title { font-size: 2.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; letter-spacing: -0.025em; }
.section-subtitle { font-size: 1.125rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; line-height: 1.6; }
.features-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap:2rem; margin-top:3rem; }
.feature-card { background: var(--surface-elevated); border:1px solid var(--border-light); border-radius: var(--radius-lg); padding:2rem; transition: all .3s ease; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.feature-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); transform: scaleX(0); transition: transform .3s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--primary); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon { width:48px; height:48px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); border-radius: var(--radius); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; font-size:1.5rem; color:#fff; }
.feature-title { font-size:1.25rem; font-weight:700; color: var(--text-primary); margin-bottom:.75rem; }
.feature-description { color: var(--text-secondary); line-height:1.6; font-size:.95rem; }

.benefits-section { padding:6rem 0; background: var(--surface); }
.benefits-list { list-style:none; display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:1.5rem; margin-top:3rem; }
.benefit-item { display:flex; align-items:flex-start; gap:1rem; padding:1.5rem; background: var(--surface-elevated); border-radius: var(--radius); border:1px solid var(--border-light); transition: all .2s ease; }
.benefit-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.benefit-icon { width:32px; height:32px; background: var(--primary); border-radius: 50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.875rem; flex-shrink:0; }
.benefit-text { color: var(--text-primary); font-weight:500; line-height:1.5; }

.cta-section { padding:6rem 0; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color:#fff; text-align:center; }
.cta-title { font-size:2.5rem; font-weight:700; margin-bottom:1rem; letter-spacing:-0.025em; }
.cta-subtitle { font-size:1.125rem; margin-bottom:2rem; opacity:.9; max-width:500px; margin-inline:auto; }
.btn-cta { background:#fff; color: var(--primary); border:none; font-weight:700; padding:1rem 2rem; border-radius: var(--radius); transition: all .2s ease; text-decoration:none; font-size:1.125rem; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); color: var(--primary); text-decoration: none; }

/* Dashboard helpers */
.dashboard-container { padding-top: 6rem; min-height: 100vh; }
.dashboard-card { background: var(--surface-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); margin-bottom: 2rem; }
.progress-modern { background: var(--border-light); border-radius: 50px; height: 8px; overflow: hidden; margin: 1rem 0; }
.progress-bar-modern { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); height: 100%; border-radius: 50px; transition: width .6s cubic-bezier(.4,0,.2,1); }

@media (max-width: 768px) {
  .hero-section { padding: 6rem 0 4rem; }
  .features-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-cta { flex-direction: column; align-items: center; }
  .btn-primary-modern, .btn-secondary-modern { width: 100%; max-width: 280px; justify-content: center; }
}

/* Ensure progress width via CSS var */
.progress .progress-bar { width: var(--pct, 0%); }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply consistent font to all form controls and text elements */
input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
input[type="search"],
input[type="checkbox"],
input[type="radio"],
textarea,
select,
.form-control,
.form-select,
.form-control-sm,
pre,
.bio-preview,
#modalInfoBio,
#additional_info,
#promotions,
#address,
input.form-control,
textarea.form-control {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Ensure pre elements (like Bio display) also use the correct font */
pre {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Ensure placeholders also use the correct font */
input::placeholder,
textarea::placeholder {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400;
}

/* Apply font to any element with form-control class or similar */
[class*="form-control"],
[class*="form-select"],
[class*="form-input"] {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Modern Navbar */
.modern-navbar {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

.brand-logo {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--emerald) !important;
  text-decoration: none;
  letter-spacing: -0.025em;
}

.modern-navbar .nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

.modern-navbar .nav-link:hover {
  color: var(--emerald) !important;
}

.navbar-text {
  color: var(--text-secondary) !important;
  font-weight: 500;
}

/* Accessibility: Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:var(--spacing-md);top:var(--spacing-md);width:auto;height:auto;background:#000;color:#fff;padding:.5rem .75rem;border-radius:8px;z-index:10000}

/* Hero Section */
.hero-section-professional {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.hero-section-professional::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 150%;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: 500px;
}

.hero-content-left {
  z-index: 2;
  position: relative;
}

.hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.hero-title-professional {
  font-size: 3.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero-subtitle-professional {
  font-size: 1.25rem;
  color: #64748b;
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 90%;
}

.hero-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: #475569;
}

.feature-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.hero-content-right {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: relative;
}

.hero-image-container {
  position: relative;
  width: 380px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  box-shadow: 0 24px 48px rgba(6, 30, 15, 0.06);
  padding: 10px;
}

.hero-illustration {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  filter: drop-shadow(0 28px 50px rgba(16,185,129,0.12));
}

.png-hero {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: block;
}

.floating-element {
  position: absolute;
  font-size: 1.8rem;
  background: #ffffff;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 14px 40px rgba(8, 24, 12, 0.08);
  animation: float 3.2s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.element-1 {
  top: 20%;
  left: -10%;
  animation-delay: 0s;
}

.element-2 {
  top: 60%;
  right: -10%;
  animation-delay: 1s;
}

.element-3 {
  bottom: 20%;
  left: 10%;
  animation-delay: 2s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.hero-section {
  padding: var(--spacing-3xl) 0 var(--spacing-2xl) 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  text-align: center;
}

.hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.hero-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-lg);
  opacity: 0.9;
}

.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Features Section */
.features-section {
  padding: var(--spacing-2xl) 0;
  background: var(--bg);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-lg);
}

.feature-card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

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

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2));
}

.feature-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.feature-description {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Panels and Cards */
.panel {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.panel:hover {
  box-shadow: var(--shadow-md);
}

.card-input {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

/* Forms */
.form-label {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.form-control {
  background: var(--card);
  border: 2px solid var(--glass-border);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  transition: all 0.2s ease;
  width: 100%;
}

.form-control:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: var(--shadow-emerald);
}

.form-control::placeholder {
  color: var(--muted);
}

/* Buttons */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--font-size-base);
  padding: 0.875rem 2rem;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-emerald);
  cursor: pointer;
}

.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  color: white;
  text-decoration: none;
}

.cta-button.secondary {
  background: var(--card);
  color: var(--emerald);
  border: 2px solid var(--emerald);
  box-shadow: var(--shadow-sm);
}

.cta-button.secondary:hover {
  background: var(--emerald);
  color: white;
}

/* Google Login Button */
.google-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: var(--card);
  color: var(--emerald);
  border: 2px solid var(--emerald);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--font-size-base);
  padding: 0.875rem 1.5rem;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.google-login-btn:hover {
  background: var(--emerald);
  color: white;
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.link-underline {
  color: var(--emerald);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.link-underline:hover {
  color: var(--emerald-hover);
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-section-professional {
    padding: 40px 0;
  }
  
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  
  .hero-title-professional {
    font-size: 2.5rem;
  }
  
  .hero-subtitle-professional {
    font-size: 1.125rem;
    max-width: 100%;
  }
  
  .hero-image-container {
    width: 280px;
    height: 280px;
  }
  
  .floating-element {
    font-size: 1.5rem;
    padding: 8px;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }
  
  .hero-icon {
    font-size: 3rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .feature-card {
    padding: var(--spacing-lg);
  }
  
  .container {
    padding: 0 var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: var(--spacing-2xl) 0 var(--spacing-xl) 0;
  }
  
  .hero-title {
    font-size: var(--font-size-2xl);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-base);
  }
  
  .cta-button {
    width: 100%;
    justify-content: center;
  }
}

/* Animation Classes */
.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.header{background:transparent;border-bottom:1px solid var(--glass-border);position:fixed;top:0;width:100%;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(15,23,36,0.85)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) 0}
.logo{font-size:var(--font-size-xl);font-weight:700;color:var(--emerald);text-decoration:none}
.nav-links{display:flex;list-style:none;gap:var(--spacing-xl)}
.nav-link{color:var(--muted);text-decoration:none;font-weight:500;font-size:var(--font-size-sm)}
.nav-link:hover{color:var(--emerald, #10b981)}
.mobile-menu-button{display:none;background:none;border:none;color:var(--muted);font-size:var(--font-size-lg);cursor:pointer}
.carla-hero{
  position:relative;
  padding: 2.5rem 0 2.5rem 0;
  background: var(--bg);
  border-radius: 0;
  margin: 0 auto 0 auto;
  box-shadow: none;
  overflow: visible;
}
.carla-hero-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-2xl);background:var(--bg);box-shadow:none;}
.carla-hero-text{flex:1 1 380px;min-width:300px}
.carla-hero-text h1{font-size:2.1rem;font-weight:700;color:#111;margin-bottom:var(--spacing-sm);line-height:1.1}
.subtitle{font-size:var(--font-size-lg);color:#444;margin-bottom:var(--spacing-xl);font-weight:400}
.hero-buttons{display:flex;gap:var(--spacing-xl);flex-wrap:wrap;margin-top:1.2rem;margin-bottom:0.5rem}
.cta-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);background:var(--gradient-primary);color:#ffffff;text-decoration:none;padding:var(--spacing-md) var(--spacing-xl);border-radius:10px;font-weight:600;font-size:var(--font-size-base);transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow-lg);border:none}
.cta-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);background:var(--emerald);color:#fff;text-decoration:none;padding:1.1rem 2.2rem;border-radius:14px;font-weight:700;font-size:1.15rem;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 4px 16px rgba(16,185,129,0.10);border:none;min-width:180px;justify-content:center}
.cta-button:hover{background:var(--emerald-hover);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,185,129,0.18);}
.cta-button.secondary{background:#fff;color:var(--emerald);border:2px solid var(--emerald);}
.cta-button.secondary:hover{background:var(--emerald);color:#fff}
.carla-hero-art, .gradient-orb, .orb-lg, .orb-sm { display: none !important; }
.panel{position:relative;z-index:2;background:#f7fafc;border:1px solid #e0e7ef;border-radius:18px;color:#222;font-size:var(--font-size-sm);font-weight:500;box-shadow:0 2px 8px rgba(16,185,129,0.04);padding:var(--spacing-md);width:100%}
.panel h3{margin:0 0 .4rem;color:#10b981;font-size:var(--font-size-base)}
.panel p{margin:.25rem 0 0;font-size:var(--font-size-xs);color:#444;}
.about-section{padding:var(--spacing-3xl) 0}
.about-content{max-width:800px;margin:0 auto;text-align:center}
.section-title{font-size:var(--font-size-3xl);font-weight:600;color:#ffffff;margin-bottom:var(--spacing-lg);line-height:1.2}
.section-description{font-size:var(--font-size-lg);color:var(--muted);line-height:1.7;max-width:600px;margin:0 auto}
.features-section{padding:var(--spacing-3xl) 0}
.feature-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:var(--spacing-xl)}
.feature-card{background:var(--card);border:1px solid var(--glass-border);padding:var(--spacing-xl);border-radius:var(--radius);transition:transform .2s ease,box-shadow .2s ease;text-align:center;box-shadow:var(--shadow-sm)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:var(--spacing-xl);border-radius:14px;transition:transform .16s ease,box-shadow .16s ease;text-align:center;box-shadow:0 8px 20px rgba(2,6,23,0.28)}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.45)}
.form-control {
  background: #fff;
  border: 1.5px solid #e0e7ef;
  color: #222;
  padding: .6rem .75rem;
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color .18s;
}
.form-control:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.10);
}
.form-label {
  color: #444;
  font-weight: 600;
  font-size: 1rem;
}

.card-input{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.05);box-shadow:0 8px 30px rgba(2,6,23,0.35)}
.feature-icon{width:64px;height:64px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-md) auto;font-size:var(--font-size-xl)}
.feature-title{font-size:var(--font-size-lg);font-weight:600;color:#ffffff;margin-bottom:var(--spacing-sm)}
.feature-description{color:var(--muted);line-height:1.6;font-size:var(--font-size-sm)}
.footer{background:var(--bg-secondary);color:var(--text-primary);padding:var(--spacing-2xl) 0;border-top:1px solid var(--glass-border)}
.footer-content{display:flex;justify-content:space-between;align-items:center}
.footer-links{display:flex;gap:var(--spacing-xl);list-style:none}
.footer-link{color:var(--muted);text-decoration:none;transition:color .2s ease;position:relative}
.footer-link:hover{color:var(--emerald, #10b981)}
.footer-copy{color:var(--muted);font-size:var(--font-size-sm)}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .mobile-menu-button { display: block; }
  .carla-hero { padding: calc(60px + var(--spacing-xl)) 0 var(--spacing-xl) 0; }
  .carla-hero-text h1 { font-size: var(--font-size-3xl); }
  .carla-hero-inner { gap: var(--spacing-lg); }
  .section-title { font-size: var(--font-size-2xl); }
  .feature-grid { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .footer-content { flex-direction: column; gap: var(--spacing-lg); text-align: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--spacing-sm); }
  .carla-hero { margin: 20px var(--spacing-xs) var(--spacing-lg) var(--spacing-xs); padding: calc(60px + var(--spacing-lg)) 0 var(--spacing-lg) 0; }
  .carla-hero-text h1 { font-size: var(--font-size-2xl); }
  .feature-card { padding: var(--spacing-lg); }
  .hero-buttons { flex-direction: column; width: 100%; }
  .cta-button { width: 100%; justify-content: center; }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp .6s ease-out; }
.text-center { text-align: center; }

/* --------------------------------------------------------------
   Condensed Landing Layout (hero + 3 features + advantages list)
--------------------------------------------------------------- */
.landing-fold{position:relative;padding:4.5rem 0 3.5rem 0;background:linear-gradient(135deg,#f8fafc 0%,#eef2f6 55%,#e2e8f0 100%);}
body.dark-mode .landing-fold{background:linear-gradient(160deg,#0d1622 0%,#0c141f 55%,#0b111a 100%);}/* dark variant */
.landing-layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(2rem,3vw,4rem);min-height:calc(100vh - 150px);} /* make fold fill page minus nav/footer */
.landing-fold .feature-card{background:#fff;border:1px solid #e2e8f0;box-shadow:0 4px 12px rgba(0,0,0,.04);} /* light mode refinement */
body.dark-mode .landing-fold .feature-card{background:linear-gradient(180deg,#1e293b,#162132);border-color:#24324a;box-shadow:0 18px 40px rgba(2,6,23,0.45);} /* keep strong in dark */
.landing-fold .advantages-list li{background:#fff;border:1px solid #e2e8f0;box-shadow:0 2px 6px rgba(0,0,0,.04);} 
body.dark-mode .landing-fold .advantages-list li{background:#162132;border-color:#24324a;}
.landing-main{flex:1 1 520px;min-width:320px;}
.landing-side{flex:0 0 300px;max-width:320px;position:relative;}
.landing-side .side-heading{font-size:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--emerald);margin:0 0 .75rem 0;}
.advantages-list{list-style:none;margin:0;padding:0;}
.advantages-list li{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;background:var(--card);border:1px solid var(--glass-border);border-radius:var(--radius-lg);font-size:.92rem;line-height:1.25;box-shadow:var(--shadow-sm);}
.advantages-list li:not(:last-child){margin-bottom:.55rem;}
.advantages-list li .icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--emerald);color:#fff;font-weight:600;border-radius:50%;font-size:.85rem;box-shadow:0 0 0 3px rgba(16,185,129,.15);}
.features-compact{margin-top:clamp(2rem,3vw,3rem);display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.features-compact .feature-card{padding:1.6rem 1.4rem;}
@media (max-width:880px){
  .landing-side{flex:1 1 100%;max-width:none;order:2;}
  .landing-main{order:1;}
  .advantages-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.65rem;}
  .advantages-list li{margin:0 !important;}
}


/* Extended dark mode full-page enhancements */
body.dark-mode .carla-hero-text h1{color:#f1f5f9}
body.dark-mode .subtitle{color:#94a3b8}
body.dark-mode .cta-button{box-shadow:0 4px 18px rgba(16,185,129,.28)}
body.dark-mode .panel,body.dark-mode .panel-modern{color:#f1f5f9}
body.dark-mode .navbar-text small,body.dark-mode small,body.dark-mode .form-text{color:#94a3b8 !important}
body.dark-mode .alert-warning{background:#3d2f04;color:#f1f5f9;border-color:#705511}
body.dark-mode .alert-info{background:#0f2537;color:#e2e8f0;border-color:#1e3a4e}
body.dark-mode .badge.bg-secondary{background:#334155 !important;color:#e2e8f0}
body.dark-mode .badge.bg-success{background:#047857 !important}
body.dark-mode .modal-header,body.dark-mode .modal-footer{border-color:#2c3b52}
body.dark-mode .btn-outline-secondary{color:#cbd5e1;border-color:#334155}
body.dark-mode .btn-outline-secondary:hover{background:#334155;color:#fff}
body.dark-mode .btn-outline-danger{border-color:#dc2626;color:#fca5a5}
body.dark-mode .btn-outline-danger:hover{background:#dc2626;color:#fff}
body.dark-mode .bio-preview{color:#94a3b8}
body.dark-mode .calendar-status-pill{background:#065f46;color:#d1fae5}
body.dark-mode .calendar-status-pill.local{background:#334155;color:#cbd5e1}
body.dark-mode .footer-brand{color:var(--emerald)}
body.dark-mode .footer-heading{color:#64748b}
body.dark-mode .footer-link{color:#94a3b8}
body.dark-mode .footer-link:hover{color:var(--emerald)}
body.dark-mode .switch-icons{color:#94a3b8}
body.dark-mode .switch-thumb{box-shadow:0 2px 8px rgba(0,0,0,.6)}
/* ---- Spacing & Layout Overrides (added) ---------------------------------- */
/* Keep overrides at bottom so they take precedence without deleting earlier
   authored styles while we iterate on the revamp. */
body.has-fixed-header { padding-top: 72px; }
/* Landing hero: increase top/bottom rhythm so content is not cramped under
   the fixed navbar and improve visual breathing space. */
.carla-hero { padding: 5.5rem 0 4rem 0; }
@media (max-width: 860px){
  .carla-hero { padding: 5rem 0 3rem 0; }
}
@media (max-width: 480px){
  .carla-hero { padding: 4.5rem 0 2.5rem 0; }
}
/* More generous vertical rhythm for sections that follow the hero */
.features-section { padding: 4rem 0 3.5rem 0; }
.about-section { padding: 4rem 0; }
/* Tighten feature grid gap slightly on very wide screens (visual cohesion) */
@media (min-width: 1400px){
  .features-grid { gap: 2.5rem; }
}
/* Hero buttons: add top spacing & consistent gap */
.hero-buttons { margin-top: 2rem; gap: 1.25rem; }
/* Card refinement for authentication views (login, etc.) */
.auth-card { border:1px solid var(--glass-border); border-radius:18px; padding:2.25rem 2rem; background:var(--card); box-shadow:0 6px 24px rgba(0,0,0,.06); }
.auth-card h1,.auth-card h2,.auth-card h5 { font-weight:700; letter-spacing:-.5px; }
.auth-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.auth-google { margin-top:1rem; }
/* Normalize bootstrap btn with our palette when nested inside auth-card */
.auth-card .btn-primary { background:var(--emerald); border-color:var(--emerald); font-weight:600; padding:.65rem 1.25rem; }
.auth-card .btn-primary:hover { background:var(--emerald-hover); border-color:var(--emerald-hover); }
.auth-card .btn-outline-secondary { border-color:var(--emerald); color:var(--emerald); font-weight:600; }
.auth-card .btn-outline-secondary:hover { background:var(--emerald); color:#fff; }

/* Global button styles - All primary buttons use emerald colors */
.btn-primary:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-success):not(.btn-dark):not(.btn-light) {
  background: linear-gradient(135deg, var(--emerald, #10b981), var(--emerald-hover, #059669)) !important;
  border-color: var(--emerald, #10b981) !important;
  color: white !important;
}
.btn-primary:hover:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-success):not(.btn-dark):not(.btn-light) {
  background: linear-gradient(135deg, var(--emerald-hover, #059669), #047857) !important;
  border-color: var(--emerald-hover, #059669) !important;
  color: white !important;
}
.btn-outline-primary {
  border-color: var(--emerald, #10b981) !important;
  color: var(--emerald, #10b981) !important;
}
.btn-outline-primary:hover:not(:disabled) {
  background: var(--emerald, #10b981) !important;
  border-color: var(--emerald, #10b981) !important;
  color: white !important;
}

/* Text primary should be emerald, not blue */
.text-primary {
  color: var(--emerald, #10b981) !important;
}

.text-danger {
  color: #64748b !important;
}

a.text-danger,
a.text-danger:hover {
  color: #64748b !important;
}
/* Form spacing refinement */
.auth-card .mb-3 { margin-bottom:1.15rem !important; }
/* Smoothen transitions for interactive elements */
button, .btn, .cta-button, .form-control { transition: background-color .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
/* Subtle container max-width tightening for large viewports to improve line length */
@media (min-width: 1600px){
  .container { max-width: 1320px; }
}
/* Reduce top margin collapse between successive sections */
.about-section + .about-section { padding-top: 2.5rem; }
/* Footer (future) placeholder spacing hook */
.site-footer { margin-top:4rem; padding:2.5rem 0; }
/* Modern table styling */
.table-modern { --row-hover: #f1f5f9; --row-border: #e2e8f0; width:100%; border-collapse: separate; border-spacing:0 4px; }
.table-modern thead th { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--muted); border:none; padding:.55rem .9rem; background:transparent; }
.table-modern tbody tr { background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.04); transition:background .18s ease, box-shadow .18s ease; }
.table-modern tbody tr:hover { background:var(--row-hover); box-shadow:0 3px 6px rgba(0,0,0,0.06); }
.table-modern tbody td { border-top:1px solid var(--row-border); border-bottom:1px solid var(--row-border); padding:.6rem .9rem; vertical-align:middle; font-size:.875rem; }
.table-modern tbody tr td:first-child { border-left:1px solid var(--row-border); border-top-left-radius:10px; border-bottom-left-radius:10px; }
.table-modern tbody tr td:last-child { border-right:1px solid var(--row-border); border-top-right-radius:10px; border-bottom-right-radius:10px; }
.table-modern .badge { font-size:.65rem; font-weight:600; letter-spacing:.03em; padding:.35rem .55rem; }
.table-toolbar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-bottom:1rem; }
.filter-pill { background:#fff; border:1px solid var(--glass-border); border-radius:999px; padding:.45rem .9rem; font-size:.75rem; font-weight:500; display:inline-flex; gap:.4rem; align-items:center; }
.filter-pill.active { background:var(--emerald-light); border-color:var(--emerald); color:var(--emerald); }
/* Global typography scale adjustments */
.heading-xxl{font-size:clamp(2.4rem,5vw,3.25rem);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.heading-xl{font-size:clamp(1.9rem,4vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.heading-lg{font-size:1.75rem;font-weight:600;letter-spacing:-.015em}
.heading-md{font-size:1.35rem;font-weight:600}
.text-lead{font-size:1.125rem;line-height:1.65;color:var(--text-secondary);}
.max-w-700{max-width:700px}
.gap-xs{gap:.5rem}.gap-sm{gap:.75rem}.gap-md{gap:1rem}.gap-lg{gap:1.5rem}.gap-xl{gap:2rem}

/* Section spacing utilities */
.section{padding:4rem 0}.section-tight{padding:2.5rem 0}.section-compact{padding:1.5rem 0}
.no-top{padding-top:0 !important}.no-bottom{padding-bottom:0 !important}

/* Landing hero refinements */
.landing-subtle-bg{background:linear-gradient(145deg,#f8fafc 0%,#eef2f6 60%,#e2e8f0 100%)}
.hero-image-container.large{width:440px;height:380px}

/* Progress bar modern style */
.progress{background:linear-gradient(90deg,#e2e8f03d,#f1f5f9);border-radius:999px;overflow:hidden;height:10px}
.progress-bar{background:var(--gradient-primary);box-shadow:0 0 0 1px rgba(16,185,129,.4);transition:width .45s cubic-bezier(.4,.0,.2,1)}

/* Profile progress wrapper */
.profile-progress-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}
.profile-progress-pct{font-size:.75rem;font-weight:600;color:var(--emerald);letter-spacing:.05em}
.profile-missing{font-size:.7rem;color:var(--muted)}

/* Account panel modernization */
.panel-modern{background:#fff;border:1px solid var(--glass-border);border-radius:20px;padding:2rem 2rem 2.25rem 2rem;box-shadow:0 10px 32px -8px rgba(15,23,42,.08);position:relative}
.panel-modern h1,.panel-modern h2{font-weight:700;letter-spacing:-.5px}
.panel-divider{height:1px;background:linear-gradient(90deg,transparent,#e2e8f0,transparent);margin:1.5rem 0}

/* Calendar header action bar */
.calendar-action-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding:1rem 1.25rem;border:1px solid var(--glass-border);border-radius:16px;background:linear-gradient(180deg,#ffffff,#f8fafc);box-shadow:0 4px 16px rgba(0,0,0,.04)}
.calendar-status-pill{display:inline-flex;align-items:center;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.4rem .7rem;border-radius:999px;background:var(--emerald-light);color:var(--emerald)}
.calendar-status-pill.local{background:#e2e8f0;color:#475569}

/* Footer component */
.site-footer{background:var(--bg-secondary);border-top:1px solid var(--glass-border);margin-top:5rem;padding:3rem 0}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.footer-brand{font-weight:800;font-size:1.25rem;color:var(--text-primary)}
.footer-heading{font-size:1rem;font-weight:700;letter-spacing:0;color:var(--text-primary);margin-bottom:.75rem}
.footer-link{display:block;font-size:.85rem;padding:.3rem 0;color:var(--text-secondary);text-decoration:none}
.footer-link:hover{color:var(--emerald)}
.footer-bottom{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--glass-border);font-size:.75rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between}

/* Dark mode toggle & theme */
.theme-toggle{background:#fff;border:1px solid var(--glass-border);border-radius:40px;padding:.4rem .9rem;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.theme-toggle:hover{background:#f1f5f9}

/* Theme switch (navbar) */
.theme-switch{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:54px;height:28px;background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:999px;padding:2px;cursor:pointer;overflow:hidden;transition:background .3s,border-color .3s;}
.theme-switch .switch-track{position:absolute;inset:0;pointer-events:none;}
.theme-switch .switch-thumb{position:relative;z-index:2;width:22px;height:22px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.15);transform:translateX(0);transition:transform .35s cubic-bezier(.65,.05,.36,1),background .3s;display:flex;align-items:center;justify-content:center;font-size:.9rem;}
.theme-switch .switch-icons{position:absolute;width:100%;display:flex;justify-content:space-between;padding:0 8px;font-size:.7rem;opacity:.75;font-weight:600;letter-spacing:.5px;}
.theme-switch[aria-pressed="true"] .switch-thumb{transform:translateX(26px);}
body.dark-mode .theme-switch{background:#1e293b;border-color:#2c3b52;}
body.dark-mode .theme-switch .switch-thumb{background:#0f172a;color:#f1f5f9}

/* Dark theme variables */
body.dark-mode{--bg:#0f172a;--bg-secondary:#1e293b;--card:#1e293b;--glass:#1e293b;--glass-border:#2c3b52;--muted:#94a3b8;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--emerald:#10b981;--emerald-hover:#059669;--soft-blue:#3b82f6;--soft-blue-hover:#2563eb;background:var(--bg);color:var(--text-primary);}
body.dark-mode .panel-modern,body.dark-mode .auth-card{background:linear-gradient(180deg,#1e293b,#162132);border-color:#2c3b52}
body.dark-mode .table-modern tbody tr{background:#1e293b}
body.dark-mode .table-modern tbody tr:hover{background:#24324a}
body.dark-mode .footer-link{color:var(--muted)}
body.dark-mode .footer-link:hover{color:var(--emerald)}
body.dark-mode .site-footer{background:#162132}
body.dark-mode .theme-toggle{background:#1e293b;color:var(--text-secondary)}
body.dark-mode .progress{background:linear-gradient(90deg,#24324a,#1e293b)}
body.dark-mode .calendar-action-bar{background:linear-gradient(180deg,#1e293b,#162132);border-color:#2c3b52}
body.dark-mode .feature-card{background:linear-gradient(180deg,#1e293b,#162132);border-color:#24324a}
/* Fill remaining light gaps in dark mode */
body.dark-mode .carla-hero{background:linear-gradient(160deg,#0d1622 0%,#0c141f 55%,#0b111a 100%)}
body.dark-mode main.container{background:transparent}
body.dark-mode .features-section{background:linear-gradient(180deg,#0f172a,#0d1420)}
body.dark-mode .about-section{background:linear-gradient(180deg,#0f172a,#0d1420)}
body.dark-mode .panel{background:linear-gradient(180deg,#1e293b,#162132);border-color:#2c3b52}
body.dark-mode .auth-card{background:linear-gradient(180deg,#1e293b,#162132)}
body.dark-mode .carla-hero-inner{background:transparent}
body.dark-mode .site-footer{background:#0d1522}

/* Smooth theme transition */
body,body *{transition:background-color .4s ease,color .4s ease,border-color .4s ease;}

/* Modern CARLA Front-end Styles */
:root {
  --bg: #fff;
  --bg-secondary: #f8fafc;
  --card: #ffffff;
  --glass: #ffffff;
  --glass-border: #e2e8f0;
  --muted: #64748b;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --emerald: #10b981;
  --emerald-hover: #059669;
  --emerald-light: #d1fae5;
  --soft-blue: #64748b;
  --soft-blue-hover: #475569;
  --gradient-primary: linear-gradient(135deg, #10b981, #059669);
  --gradient-secondary: linear-gradient(135deg, #3b82f6, #1d4ed8);
  --font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-emerald: 0 4px 14px 0 rgba(16, 185, 129, 0.15);
  --primary: #10b981;
  --primary-hover: #059669;
  --primary-light: #d1fae5;
  --secondary: #64748b;
  --background: #ffffff;
  --surface: #f8fafc;
  --surface-elevated: #ffffff;
  --text-muted: #94a3b8;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Modern Navbar */
.modern-navbar {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

.brand-logo {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--emerald) !important;
  text-decoration: none;
  letter-spacing: -0.025em;
}

.modern-navbar .nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

.modern-navbar .nav-link:hover {
  color: var(--emerald) !important;
}

.navbar-text {
  color: var(--text-secondary) !important;
  font-weight: 500;
}

/* Accessibility: Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:var(--spacing-md);top:var(--spacing-md);width:auto;height:auto;background:#000;color:#fff;padding:.5rem .75rem;border-radius:8px;z-index:10000}

/* Hero Section */
.hero-section-professional {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.hero-section-professional::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 150%;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: 500px;
}

.hero-content-left {
  z-index: 2;
  position: relative;
}

.hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.hero-title-professional {
  font-size: 3.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero-subtitle-professional {
  font-size: 1.25rem;
  color: #64748b;
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 90%;
}

.hero-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: #475569;
}

.feature-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.hero-content-right {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: relative;
}

.hero-image-container {
  position: relative;
  width: 380px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  box-shadow: 0 24px 48px rgba(6, 30, 15, 0.06);
  padding: 10px;
}

.hero-illustration {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  filter: drop-shadow(0 28px 50px rgba(16,185,129,0.12));
}

.png-hero {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: block;
}

.floating-element {
  position: absolute;
  font-size: 1.8rem;
  background: #ffffff;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 14px 40px rgba(8, 24, 12, 0.08);
  animation: float 3.2s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.element-1 {
  top: 20%;
  left: -10%;
  animation-delay: 0s;
}

.element-2 {
  top: 60%;
  right: -10%;
  animation-delay: 1s;
}

.element-3 {
  bottom: 20%;
  left: 10%;
  animation-delay: 2s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.hero-section {
  padding: var(--spacing-3xl) 0 var(--spacing-2xl) 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  text-align: center;
}

.hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.hero-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-lg);
  opacity: 0.9;
}

.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Features Section */
.features-section {
  padding: var(--spacing-2xl) 0;
  background: var(--bg);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-lg);
}

.feature-card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

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

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2));
}

.feature-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.feature-description {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Panels and Cards */
.panel {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.panel:hover {
  box-shadow: var(--shadow-md);
}

.card-input {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

/* Forms */
.form-label {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.form-control {
  background: var(--card);
  border: 2px solid var(--glass-border);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  transition: all 0.2s ease;
  width: 100%;
}

.form-control:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: var(--shadow-emerald);
}

.form-control::placeholder {
  color: var(--muted);
}

/* Buttons */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--font-size-base);
  padding: 0.875rem 2rem;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-emerald);
  cursor: pointer;
}

.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  color: white;
  text-decoration: none;
}

.cta-button.secondary {
  background: var(--card);
  color: var(--emerald);
  border: 2px solid var(--emerald);
  box-shadow: var(--shadow-sm);
}

.cta-button.secondary:hover {
  background: var(--emerald);
  color: white;
}

/* Google Login Button */
.google-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: var(--card);
  color: var(--emerald);
  border: 2px solid var(--emerald);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--font-size-base);
  padding: 0.875rem 1.5rem;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.google-login-btn:hover {
  background: var(--emerald);
  color: white;
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.link-underline {
  color: var(--emerald);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.link-underline:hover {
  color: var(--emerald-hover);
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-section-professional {
    padding: 40px 0;
  }
  
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  
  .hero-title-professional {
    font-size: 2.5rem;
  }
  
  .hero-subtitle-professional {
    font-size: 1.125rem;
    max-width: 100%;
  }
  
  .hero-image-container {
    width: 280px;
    height: 280px;
  }
  
  .floating-element {
    font-size: 1.5rem;
    padding: 8px;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }
  
  .hero-icon {
    font-size: 3rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .feature-card {
    padding: var(--spacing-lg);
  }
  
  .container {
    padding: 0 var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: var(--spacing-2xl) 0 var(--spacing-xl) 0;
  }
  
  .hero-title {
    font-size: var(--font-size-2xl);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-base);
  }
  
  .cta-button {
    width: 100%;
    justify-content: center;
  }
}

/* Animation Classes */
.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.header{background:transparent;border-bottom:1px solid var(--glass-border);position:fixed;top:0;width:100%;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(15,23,36,0.85)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) 0}
.logo{font-size:var(--font-size-xl);font-weight:700;color:var(--emerald);text-decoration:none}
.nav-links{display:flex;list-style:none;gap:var(--spacing-xl)}
.nav-link{color:var(--muted);text-decoration:none;font-weight:500;font-size:var(--font-size-sm)}
.nav-link:hover{color:var(--emerald, #10b981)}
.mobile-menu-button{display:none;background:none;border:none;color:var(--muted);font-size:var(--font-size-lg);cursor:pointer}
.carla-hero{
  position:relative;
  padding: 2.5rem 0 2.5rem 0;
  background: var(--bg);
  border-radius: 0;
  margin: 0 auto 0 auto;
  box-shadow: none;
  overflow: visible;
}
.carla-hero-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-2xl);background:var(--bg);box-shadow:none;}
.carla-hero-text{flex:1 1 380px;min-width:300px}
.carla-hero-text h1{font-size:2.1rem;font-weight:700;color:#111;margin-bottom:var(--spacing-sm);line-height:1.1}
.subtitle{font-size:var(--font-size-lg);color:#444;margin-bottom:var(--spacing-xl);font-weight:400}
.hero-buttons{display:flex;gap:var(--spacing-xl);flex-wrap:wrap;margin-top:1.2rem;margin-bottom:0.5rem}
.cta-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);background:var(--gradient-primary);color:#ffffff;text-decoration:none;padding:var(--spacing-md) var(--spacing-xl);border-radius:10px;font-weight:600;font-size:var(--font-size-base);transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow-lg);border:none}
.cta-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);background:var(--emerald);color:#fff;text-decoration:none;padding:1.1rem 2.2rem;border-radius:14px;font-weight:700;font-size:1.15rem;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 4px 16px rgba(16,185,129,0.10);border:none;min-width:180px;justify-content:center}
.cta-button:hover{background:var(--emerald-hover);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,185,129,0.18);}
.cta-button.secondary{background:#fff;color:var(--emerald);border:2px solid var(--emerald);}
.cta-button.secondary:hover{background:var(--emerald);color:#fff}
.carla-hero-art, .gradient-orb, .orb-lg, .orb-sm { display: none !important; }
.panel{position:relative;z-index:2;background:#f7fafc;border:1px solid #e0e7ef;border-radius:18px;color:#222;font-size:var(--font-size-sm);font-weight:500;box-shadow:0 2px 8px rgba(16,185,129,0.04);padding:var(--spacing-md);width:100%}
.panel h3{margin:0 0 .4rem;color:#10b981;font-size:var(--font-size-base)}
.panel p{margin:.25rem 0 0;font-size:var(--font-size-xs);color:#444;}
.about-section{padding:var(--spacing-3xl) 0}
.about-content{max-width:800px;margin:0 auto;text-align:center}
.section-title{font-size:var(--font-size-3xl);font-weight:600;color:#ffffff;margin-bottom:var(--spacing-lg);line-height:1.2}
.section-description{font-size:var(--font-size-lg);color:var(--muted);line-height:1.7;max-width:600px;margin:0 auto}
.features-section{padding:var(--spacing-3xl) 0}
.feature-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:var(--spacing-xl)}
.feature-card{background:var(--card);border:1px solid var(--glass-border);padding:var(--spacing-xl);border-radius:var(--radius);transition:transform .2s ease,box-shadow .2s ease;text-align:center;box-shadow:var(--shadow-sm)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:var(--spacing-xl);border-radius:14px;transition:transform .16s ease,box-shadow .16s ease;text-align:center;box-shadow:0 8px 20px rgba(2,6,23,0.28)}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.45)}
.form-control {
  background: #fff;
  border: 1.5px solid #e0e7ef;
  color: #222;
  padding: .6rem .75rem;
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color .18s;
}
.form-control:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.10);
}
.form-label {
  color: #444;
  font-weight: 600;
  font-size: 1rem;
}

.card-input{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.05);box-shadow:0 8px 30px rgba(2,6,23,0.35)}
.feature-icon{width:64px;height:64px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-md) auto;font-size:var(--font-size-xl)}
.feature-title{font-size:var(--font-size-lg);font-weight:600;color:#ffffff;margin-bottom:var(--spacing-sm)}
.feature-description{color:var(--muted);line-height:1.6;font-size:var(--font-size-sm)}
.footer{background:var(--bg-secondary);color:var(--text-primary);padding:var(--spacing-2xl) 0;border-top:1px solid var(--glass-border)}
.footer-content{display:flex;justify-content:space-between;align-items:center}
.footer-links{display:flex;gap:var(--spacing-xl);list-style:none}
.footer-link{color:var(--muted);text-decoration:none;transition:color .2s ease;position:relative}
.footer-link:hover{color:var(--emerald, #10b981)}
.footer-copy{color:var(--muted);font-size:var(--font-size-sm)}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .mobile-menu-button { display: block; }
  .carla-hero { padding: calc(60px + var(--spacing-xl)) 0 var(--spacing-xl) 0; }
  .carla-hero-text h1 { font-size: var(--font-size-3xl); }
  .carla-hero-inner { gap: var(--spacing-lg); }
  .section-title { font-size: var(--font-size-2xl); }
  .feature-grid { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .footer-content { flex-direction: column; gap: var(--spacing-lg); text-align: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--spacing-sm); }
  .carla-hero { margin: 20px var(--spacing-xs) var(--spacing-lg) var(--spacing-xs); padding: calc(60px + var(--spacing-lg)) 0 var(--spacing-lg) 0; }
  .carla-hero-text h1 { font-size: var(--font-size-2xl); }
  .feature-card { padding: var(--spacing-lg); }
  .hero-buttons { flex-direction: column; width: 100%; }
  .cta-button { width: 100%; justify-content: center; }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp .6s ease-out; }
.text-center { text-align: center; }


/* ============================================
   CSS estratto dai file HTML
   ============================================ */

/* ============================================
   CSS estratto da: base.html
   ============================================ */

    /* Safety overrides to guarantee header/footer and icon sizing while CSS caches clear */
    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    /* Elegant navbar styling */
    .navbar, .navbar .nav-link, .navbar .navbar-brand { font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
    /* Cooler, bolder nav links */
    .navbar .nav-link{
      font-weight:700;
      font-size:.80rem; /* smaller nav text */
      letter-spacing:.01em;
      padding:.45rem .7rem; /* slightly tighter pill */
      border-radius:12px;
      transition: color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease;
      color:#334155;
    }
    /* Brand-green hover/focus accents - use CSS variable */
    .navbar .nav-link:hover{ color:var(--primary, #10b981); background:rgba(16,185,129,.08); transform:translateY(-1px) }
    .navbar .nav-link:focus-visible{ outline:none; box-shadow:0 0 0 .2rem rgba(16,185,129,.25) }
    /* Active/current page pill with emerald tint */
    .navbar .nav-link.active, .navbar .nav-link[aria-current="page"]{ color:#0b1320; background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.30) }
    .navbar .navbar-brand .brand-carla{ font-family:'Poppins','Inter',sans-serif }
    .navbar.modern-navbar{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:1030}
  .navbar .navbar-brand{ font-size:1.20rem; }
    .navbar .navbar-brand .brand-carla{color:#0b1320;font-weight:800; letter-spacing:-.02em }
    .navbar .navbar-brand .brand-ai{color:var(--primary, #10b981);font-weight:800}
    .site-footer{background:#f8fafc;border-top:1px solid #e5e7eb;margin-top:3rem;padding:2rem 0}
    
    /* Notifications Modal Styles */
    .notifications-modal .modal-dialog {
      max-width: 600px;
    }
    .notifications-modal .modal-content {
      border-radius: 16px;
      border: none;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    .notifications-modal .modal-header {
      background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
      border-bottom: 2px solid rgba(16,185,129,0.2);
      border-radius: 16px 16px 0 0;
      padding: 1.5rem;
    }
    .notifications-modal .modal-title {
      color: #10b981;
      font-weight: 700;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .notifications-modal .modal-body {
      padding: 2rem;
      max-height: 70vh;
      overflow-y: auto;
    }
    .notification-item {
      background: #fff;
      border: 1.5px solid #f1f5f9;
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 1rem;
      transition: all 0.3s ease;
    }
    .notification-item:hover {
      border-color: #10b981;
      box-shadow: 0 4px 12px rgba(16,185,129,0.1);
      transform: translateY(-2px);
    }
    .notification-item.unread {
      background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(239,68,68,.03));
      border-left: 4px solid #ef4444;
    }
    .notification-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }
    .notification-icon.danger {
      background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.08));
      color: #dc2626;
    }
    .notification-icon.success {
      background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.08));
      color: #059669;
    }
    .notification-content {
      flex: 1;
    }
    .notification-title {
      font-weight: 700;
      font-size: 1rem;
      color: #0b1320;
      margin-bottom: 0.5rem;
    }
    .notification-message {
      color: #64748b;
      font-size: 0.9rem;
      line-height: 1.6;
      margin-bottom: 1rem;
    }
    .notification-actions {
      display: flex;
      gap: 0.5rem;
    }
    .empty-notifications {
      text-align: center;
      padding: 3rem 2rem;
    }
    .empty-notifications i {
      font-size: 4rem;
      color: #cbd5e1;
      margin-bottom: 1rem;
    }
    .empty-notifications p {
      color: #64748b;
      font-size: 1rem;
      margin: 0;
    }
    .footer-brand{font-weight:800;color:#0b1320}
    .footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
    .footer-heading{font-size:1rem;font-weight:700;margin-bottom:.75rem;color:#0b1320}
  a.footer-link{display:block;font-size:.95rem;color:#334155;text-decoration:none;padding:.25rem 0}
  a.footer-link:hover{color:#10b981;text-decoration:underline}
    .footer-bottom{margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e5e7eb;font-size:.85rem;color:#64748b;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between}
    img.feature-icon-svg{width:48px;height:48px;object-fit:contain;display:inline-block}

    /* Global page loading overlay using the Carla "C" as spinner */
    #page-loader-overlay{position:fixed;inset:0;background:rgba(255,255,255,0.86);-webkit-backdrop-filter:saturate(1.1) blur(1.5px);backdrop-filter:saturate(1.1) blur(1.5px);display:none;align-items:center;justify-content:center;z-index:2000}
    #page-loader-overlay.show{display:flex}
    .carla-spinner{font-family:'Poppins','Inter',sans-serif;font-weight:800;color:#10b981;font-size:56px;line-height:1;letter-spacing:-.02em;filter:drop-shadow(0 4px 14px rgba(16,185,129,.25));animation:carla-rotate 1.1s linear infinite}
    @keyframes carla-rotate{to{transform:rotate(360deg)}}

    /* Elegant select arrow (chevron V) and consistent rounding */
    :root{ --ui-radius: 12px; }
    .form-select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-color:#fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right .75rem center; background-size:14px 14px; padding-right:2rem; border-radius:var(--ui-radius);
    }
    /* Hide legacy Edge/IE default arrow and keep our emerald chevron */
    .form-select::-ms-expand{ display:none; }
    /* High contrast accessibility: fall back to native arrow without breaking layout */
    @media (forced-colors: active){
      .form-select{ background-image:none; padding-right:.75rem; }
    }
    .form-select:focus{ border-color:#10b981; box-shadow:0 0 0 .2rem rgba(16,185,129,.15) }
    .form-control{ border-radius:var(--ui-radius) }
    /* Unified page title styling across all pages */
    .page-title{
      font-family:'Poppins','Inter',sans-serif;
      font-weight:700;
      font-size:1.5rem; /* ~24px */
      line-height:1.2;
      letter-spacing:.01em; /* match nav link spacing */
      color:#334155; /* match unpressed nav link color */
      margin:0 0 .75rem 0; /* consistent bottom space */
    }
  

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



/* ============================================
   CSS estratto da: carla_lead.html
   ============================================ */

  .booking-page {
    background: linear-gradient(180deg, #fbfdfe 0%, #ffffff 100%);
    min-height: 100vh;
    padding: 3rem 0;
  }
  .booking-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem;
  }
  .booking-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  .booking-header h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #0b1320;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
  }
  .booking-header p {
    font-size: 1.1rem;
    color: #64748b;
  }
  .booking-form {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  }
  .form-label {
    font-weight: 600;
    color: #0b1320;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }
  .form-control, .form-select {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: all 0.2s ease;
  }
  .form-control:focus, .form-select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
    outline: none;
  }
  .datetime-picker-wrapper {
    position: relative;
  }
  .datetime-picker-wrapper input[type="datetime-local"] {
    width: 100%;
  }
  .form-hint {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .form-hint i {
    color: #10b981;
  }
  .btn-submit {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 12px;
    padding: 0.875rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 1rem;
  }
  .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16,185,129,0.3);
  }
  .btn-submit:active {
    transform: translateY(0);
  }
  @media (max-width: 768px) {
    .booking-header h1 {
      font-size: 2rem;
    }
    .booking-form {
      padding: 1.5rem;
    }
  }



/* ============================================
   CSS estratto da: contatti.html
   ============================================ */

  .contact-page {
    background: linear-gradient(180deg, #fbfdfe 0%, #ffffff 100%);
    min-height: 100vh;
    padding: 3rem 0;
  }
  .contact-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
  }
  .contact-header {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid rgba(16,185,129,0.2);
  }
  .contact-header h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #0b1320;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
  }
  .contact-header .subtitle {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 1.5rem;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
  }
  .contact-card {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    text-align: center;
  }
  .contact-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: rgba(16,185,129,0.3);
    transform: translateY(-4px);
  }
  .contact-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #10b981;
  }
  .contact-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0b1320;
    margin-bottom: 1rem;
  }
  .contact-card p {
    color: #475569;
    line-height: 1.8;
    margin-bottom: 0.5rem;
  }
  .contact-card a {
    color: #10b981;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  .contact-card a:hover {
    color: #059669;
    text-decoration: underline;
  }
  .contact-info-section {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    margin-bottom: 2rem;
  }
  .contact-info-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #0b1320;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(16,185,129,0.2);
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .contact-info-section h2 i {
    color: #10b981;
    font-size: 1.5rem;
  }
  .contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }
  .info-item {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
    border-radius: 12px;
    border-left: 4px solid #10b981;
  }
  .info-item h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .info-item address {
    font-style: normal;
    color: #475569;
    line-height: 1.8;
    margin: 0;
  }
  .info-item address strong {
    color: #0b1320;
    display: block;
    margin-bottom: 0.5rem;
  }
  .info-item a {
    color: #10b981;
    text-decoration: none;
    font-weight: 600;
  }
  .info-item a:hover {
    color: #059669;
    text-decoration: underline;
  }
  .support-section {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
    border: 2px solid rgba(16,185,129,0.2);
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
  }
  .support-section h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0b1320;
    margin-bottom: 1rem;
  }
  .support-section p {
    color: #475569;
    line-height: 1.8;
    margin-bottom: 1.5rem;
  }
  .support-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
  }
  .support-badge {
    background: #ffffff;
    border: 1.5px solid rgba(16,185,129,0.2);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    color: #0b1320;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .support-badge i {
    color: #10b981;
  }
  @media (max-width: 768px) {
    .contact-header h1 {
      font-size: 2rem;
    }
    .contact-grid {
      grid-template-columns: 1fr;
    }
    .contact-info-grid {
      grid-template-columns: 1fr;
    }
  }



/* ============================================
   CSS estratto da: index_landing.html
   ============================================ */

  /* Hero Section */
  .hero-rect {
    background: linear-gradient(180deg, #fbfdfe, #ffffff);
    padding: 4rem 0 3rem 0;
    width: 100%;
  }
  .hero-rect-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 420px;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 0 2rem;
    box-sizing: border-box;
  }
  .hero-rect-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 520px;
  }
  .hero-rect-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 540px;
    aspect-ratio: 4 / 3;
  }
  .hero-rect-img {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(2,6,23,0.08);
    object-fit: cover;
  }
  .hero-title-carla {
    margin: 0 0 20px;
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0b1320;
    font-size: clamp(3.5rem, 7vw, 5rem);
    line-height: 1.05;
    text-shadow: 0 2px 20px rgba(16,185,129,0.08);
  }
  .hero-subtitle-carla {
    color: #64748b;
    font-size: 1.25rem;
    line-height: 1.75;
    max-width: 70ch;
    margin: 0 0 32px;
    font-weight: 400;
  }
  .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 40px;
  }
  .btn-cta, .btn-cta-alt, .btn-cta-primary {
    height: 52px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 12px;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
  }
  .btn-cta {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 24px rgba(16,185,129,0.25);
  }
  .btn-cta:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(16,185,129,0.35);
    color: #fff;
  }
  .btn-cta-large {
    height: 56px;
    padding: 0 36px;
    font-size: 1.1rem;
  }
  .btn-cta-alt {
    background: #fff;
    color: #0b1320;
    border: 2px solid #e2e8f0;
  }
  .btn-cta-alt:hover {
    background: #f8fafc;
    color: #0b1320;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .btn-cta-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    box-shadow: 0 8px 24px rgba(16,185,129,0.25);
  }
  .btn-cta-primary:hover {
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(16,185,129,0.35);
  }
  .integrations-wrap {
    margin-top: 32px;
  }
  .section-label {
    color: #64748b;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .integrations-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .integration-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-weight: 600;
    font-size: 0.9rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    padding: 8px 14px;
    transition: all 0.2s ease;
  }
  .integration-item:hover {
    border-color: #10b981;
    background: rgba(16,185,129,0.05);
    transform: translateY(-1px);
  }
  .integration-item img {
    width: 18px;
    height: 18px;
    display: block;
  }
  .integration-item i {
    font-size: 1rem;
  }

  /* Features Section */
  .section-main-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: #0b1320;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }
  .section-subtitle {
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 0;
  }
  .modern-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
  }
  .modern-mini-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(2,6,23,0.06);
    padding: 2.5rem;
    border: 1.5px solid #f1f5f9;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
  }
  .modern-mini-card:hover {
    box-shadow: 0 12px 40px rgba(2,6,23,0.12);
    border-color: #10b981;
    transform: translateY(-4px);
  }
  .mini-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
  }
  .icon-circle {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
    border-radius: 16px;
    flex-shrink: 0;
  }
  .icon-circle-emerald {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.08));
  }
  .icon-circle i {
    font-size: 1.5rem;
    color: #10b981;
  }
  .icon-circle img {
    width: 28px;
    height: 28px;
  }
  .mini-card-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: #0b1320;
    letter-spacing: -0.01em;
  }
  .mini-card-text {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex-grow: 1;
  }
  .mini-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mini-card-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 0.95rem;
    margin-bottom: 8px;
  }
  .mini-card-features li:last-child {
    margin-bottom: 0;
  }
  .mini-card-features i {
    font-size: 1rem;
  }

  /* Leads Section */
  .section-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
  }
  .section-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: #0b1320;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
  }
  .section-description {
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
  }
  .leads-features-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .leads-feature-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
  }
  .leads-feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.08));
    border-radius: 12px;
    flex-shrink: 0;
  }
  .leads-feature-icon i {
    font-size: 1.5rem;
    color: #10b981;
  }
  .leads-feature-item h4 {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #0b1320;
    margin-bottom: 4px;
  }
  .leads-feature-item p {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
  }
  .leads-visual-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(2,6,23,0.1);
    border: 1.5px solid #f1f5f9;
    overflow: hidden;
  }
  .leads-visual-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
  }
  .leads-visual-dots {
    display: flex;
    gap: 6px;
  }
  .leads-visual-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
  }
  .leads-visual-dots span:nth-child(1) { background: #ef4444; }
  .leads-visual-dots span:nth-child(2) { background: #f59e0b; }
  .leads-visual-dots span:nth-child(3) { background: #10b981; }
  .leads-visual-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
  }
  .leads-visual-content {
    padding: 2rem;
  }
  .leads-kpi-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .kpi-preview-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
    border-radius: 12px;
    border: 1px solid rgba(16,185,129,0.1);
  }
  .kpi-preview-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10b981;
    border-radius: 10px;
    color: #fff;
    font-size: 1.25rem;
  }
  .kpi-preview-value {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: #0b1320;
    line-height: 1.2;
  }
  .kpi-preview-label {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 2px;
  }
  .leads-graph-preview {
    height: 120px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.03), rgba(16,185,129,0.01));
    border-radius: 12px;
  }
  .graph-preview-line {
    flex: 1;
    background: linear-gradient(180deg, #10b981, rgba(16,185,129,0.3));
    border-radius: 4px 4px 0 0;
    min-height: 20px;
  }
  .graph-preview-line:nth-child(1) { height: 40%; }
  .graph-preview-line:nth-child(2) { height: 70%; }
  .graph-preview-line:nth-child(3) { height: 55%; }

  /* Integrations Grid */
  .integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .integration-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    border: 1.5px solid #f1f5f9;
    transition: all 0.3s ease;
  }
  .integration-card:hover {
    border-color: #10b981;
    box-shadow: 0 8px 24px rgba(16,185,129,0.15);
    transform: translateY(-4px);
  }
  .integration-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
  }
  .integration-icon img {
    width: 40px;
    height: 40px;
  }
  .integration-icon i {
    font-size: 2rem;
  }
  .integration-icon-whatsapp { background: linear-gradient(135deg, rgba(37,211,102,0.15), rgba(37,211,102,0.08)); }
  .integration-icon-calendar { background: linear-gradient(135deg, rgba(66,133,244,0.15), rgba(66,133,244,0.08)); }
  .integration-icon-meta { background: linear-gradient(135deg, rgba(24,119,242,0.15), rgba(24,119,242,0.08)); color: #1877f2; }
  .integration-icon-shopify { background: linear-gradient(135deg, rgba(95,186,125,0.15), rgba(95,186,125,0.08)); color: #5fba7d; }
  .integration-icon-zapier { background: linear-gradient(135deg, rgba(255,165,0,0.15), rgba(255,165,0,0.08)); color: #ff8c42; }
  .integration-icon-webhook { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.08)); color: #10b981; }
  .integration-card h3 {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #0b1320;
    margin-bottom: 8px;
  }
  .integration-card p {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
  }

  /* CTA Section */
  .cta-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: #0b1320;
    margin-bottom: 12px;
  }
  .cta-subtitle {
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }
  .cta-note {
    margin-top: 16px;
    color: #64748b;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* Carousel */
  .footer-carousel-img {
    height: 28vh;
    object-fit: cover;
    border-radius: 12px;
  }

  /* Responsive */
  @media (max-width: 992px) {
    .hero-rect-layout {
      flex-direction: column;
      min-height: 0;
      gap: 2rem;
    }
    .hero-rect-left, .hero-rect-right {
      max-width: 100%;
      width: 100%;
    }
    .hero-rect-left {
      align-items: center;
      text-align: center;
    }
    .hero-title-carla, .hero-subtitle-carla {
      text-align: center;
    }
    .hero-cta {
      justify-content: center;
    }
    .hero-rect-right {
      aspect-ratio: auto;
    }
    .hero-rect-img {
      width: 100%;
      height: auto;
      border-radius: 16px;
    }
    .integrations-row {
      justify-content: center;
    }
    .modern-mini-grid {
      grid-template-columns: 1fr;
    }
    .integrations-grid {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
  }
  @media (max-width: 767px) {
    .hero-rect {
      padding: 3rem 0 2rem 0;
    }
    .btn-cta, .btn-cta-alt {
      height: 48px;
      padding: 0 24px;
      font-size: 1rem;
    }
    .footer-carousel-img {
      height: 20vh;
    }
  }
  


/* ============================================
   CSS estratto da: login.html
   ============================================ */

  /* Green brand styling for login page */
  .btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
  }
  .btn-link {
    color: #10b981;
    font-weight: 500;
    text-decoration: none;
  }
  .btn-link:hover {
    color: #059669;
    text-decoration: underline;
  }
  .form-control:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
  }
  .btn-outline-secondary {
    border-color: #e2e8f0;
    color: #64748b;
  }
  .btn-outline-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0b1320;
  }



/* ============================================
   CSS estratto da: servizi.html
   ============================================ */

    .benefit-item{background:#fff;border:1px solid var(--glass-border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-sm)}
    .benefit-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:#fff}
    .benefit-icon svg{display:block}
    .ico-money{background:#10b981}
    .ico-time{background:#3b82f6}
    .ico-focus{background:#8b5cf6}
    .ico-efficiency{background:#0ea5e9}
    .ico-experience{background:#22c55e}
    .ico-loyalty{background:#a855f7}
    .perche-carla-title {
      font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #142047;
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      line-height: 1.05;
      text-shadow: 0 2px 16px rgba(16,185,129,0.07);
      margin-bottom: 2rem;
    }
  


/* ============================================
   CSS estratto da: termini.html
   ============================================ */

  .legal-page {
    background: linear-gradient(180deg, #fbfdfe 0%, #ffffff 100%);
    min-height: 100vh;
    padding: 3rem 0;
  }
  .legal-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
  }
  .legal-header {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid rgba(16,185,129,0.2);
  }
  .legal-header h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #0b1320;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
  }
  .legal-header .subtitle {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 1.5rem;
  }
  .legal-header .last-updated {
    font-size: 0.9rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .legal-nav {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  }
  .legal-nav h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #0b1320;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .legal-nav h3 i {
    color: #10b981;
  }
  .legal-nav ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
  }
  .legal-nav ol li {
    padding: 0;
  }
  .legal-nav ol li a {
    color: #334155;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    display: block;
    transition: all 0.2s ease;
  }
  .legal-nav ol li a:hover {
    background: rgba(16,185,129,0.08);
    color: #10b981;
    transform: translateX(4px);
  }
  .legal-section {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
  }
  .legal-section:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: rgba(16,185,129,0.3);
  }
  .legal-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #0b1320;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(16,185,129,0.2);
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .legal-section h2 i {
    color: #10b981;
    font-size: 1.5rem;
  }
  .legal-section h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0b1320;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  .legal-section p {
    color: #475569;
    line-height: 1.8;
    margin-bottom: 1.25rem;
    font-size: 1rem;
  }
  .legal-section ul, .legal-section ol {
    color: #475569;
    line-height: 1.8;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
  }
  .legal-section ul li, .legal-section ol li {
    margin-bottom: 0.75rem;
  }
  .legal-section strong {
    color: #0b1320;
    font-weight: 700;
  }
  .legal-section a {
    color: #10b981;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  .legal-section a:hover {
    color: #059669;
    text-decoration: underline;
  }
  .highlight-box {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03));
    border-left: 4px solid #10b981;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  .highlight-box p {
    margin-bottom: 0;
    color: #0b1320;
    font-weight: 500;
  }
  .contact-card {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
    border: 2px solid rgba(16,185,129,0.2);
    border-radius: 16px;
    padding: 2rem;
    margin-top: 2rem;
  }
  .contact-card h3 {
    color: #10b981;
    margin-top: 0;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .contact-card address {
    font-style: normal;
    color: #475569;
    line-height: 1.8;
  }
  .contact-card address strong {
    color: #0b1320;
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
  }
  .contact-card a {
    color: #10b981;
    font-weight: 600;
  }
  @media (max-width: 768px) {
    .legal-header h1 {
      font-size: 2rem;
    }
    .legal-nav ol {
      grid-template-columns: 1fr;
    }
    .legal-section {
      padding: 1.5rem;
    }
    .legal-section h2 {
      font-size: 1.5rem;
    }
  }



/* ============================================
   CSS estratto da: admin\accounts.html
   ============================================ */

  /* Admin Dashboard Header */
  .admin-dashboard-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(16,185,129,0.1);
  }
  .admin-dashboard-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0b1320;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }
  .admin-dashboard-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
  }
  
  /* Expandable user details */
  .expand-icon {
    cursor: pointer;
    transition: transform 0.2s;
    color: var(--emerald, #10b981);
  }
  .expand-icon.expanded {
    transform: rotate(90deg);
  }
  .user-details-row {
    display: none;
    background: #f8f9fa;
  }
  .user-details-row.show {
    display: table-row;
  }
  .module-controls {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
  }
  .bio-preview {
    display: inline-block;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .save-modules-btn {
    transition: all 0.3s ease;
  }
  .save-modules-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  /* User Stats Table */
  .admin-user-stats-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
    margin-bottom: 2rem;
  }
  .admin-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .admin-table-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #0b1320;
    margin: 0;
  }
  .admin-stats-table {
    width: 100%;
    border-collapse: collapse;
  }
  .admin-stats-table thead {
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
  }
  .admin-stats-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
  }
  .admin-stats-table td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
  }
  .admin-stats-table tbody tr:hover {
    background: rgba(16,185,129,0.03);
  }
  .admin-stats-table tbody tr:last-child td {
    border-bottom: none;
  }
  .admin-user-email {
    font-weight: 600;
    color: #0b1320;
  }
  .admin-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .admin-stat-badge-success {
    background: rgba(16,185,129,0.1);
    color: #059669;
  }
  
  /* User Search Section */
  .admin-search-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
    margin-bottom: 2rem;
  }



/* ============================================
   CSS estratto da: admin\admin.html
   ============================================ */

  /* Admin Dashboard Styles */
  .admin-dashboard-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(16,185,129,0.1);
  }
  .admin-dashboard-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0b1320;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }
  .admin-dashboard-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
  }
  
  /* KPI Cards */
  .admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .admin-kpi-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .admin-kpi-card:hover {
    box-shadow: 0 8px 24px rgba(16,185,129,0.15);
    border-color: #10b981;
    transform: translateY(-2px);
  }
  .admin-kpi-card.active {
    border-color: #10b981;
    border-width: 2px;
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03));
  }
  .admin-kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
  }
  .admin-kpi-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .admin-kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
  }
  .admin-kpi-icon-leads {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08));
    color: #3b82f6;
  }
  .admin-kpi-icon-messages {
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(139,92,246,0.08));
    color: #8b5cf6;
  }
  .admin-kpi-icon-appointments {
    background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(168,85,247,0.08));
    color: #a855f7;
  }
  .admin-kpi-icon-growth {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.08));
    color: #f59e0b;
  }
  
  /* Global button styles - Use emerald colors */
  .btn-primary {
    background: linear-gradient(135deg, var(--emerald, #10b981), var(--emerald-hover, #059669)) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(16,185,129,0.25);
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, var(--emerald-hover, #059669), #047857) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16,185,129,0.4);
  }
  .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16,185,129,0.25);
  }
  .btn-outline-primary {
    border: 1.5px solid var(--emerald, #10b981) !important;
    color: var(--emerald, #10b981) !important;
    background: transparent;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(16,185,129,0.15);
  }
  .btn-outline-primary:hover:not(:disabled) {
    background: var(--emerald, #10b981) !important;
    color: white !important;
    border-color: var(--emerald, #10b981) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
  }
  .btn-outline-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* Text primary should be emerald, not blue */
  .text-primary {
    color: var(--emerald, #10b981) !important;
  }
  
  .admin-kpi-value {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0b1320;
    line-height: 1.2;
  }
  .admin-kpi-growth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .admin-kpi-growth-value {
    font-weight: 700;
    font-size: 1.25rem;
  }
  
  /* Single Graph Container - Like user view */
  .admin-graph-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    min-height: 400px;
    position: relative;
    margin-bottom: 2rem;
  }
  .admin-graph-container canvas {
    max-height: 350px !important;
  }
  
  /* Time range selector buttons */
  .time-range-selector {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  
  .time-range-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .time-range-btn:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.05);
  }
  
  .time-range-btn.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
  }
  
  /* User Stats Table */
  .admin-user-stats-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
    margin-bottom: 2rem;
  }
  .admin-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .admin-table-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #0b1320;
    margin: 0;
  }
  .admin-stats-table {
    width: 100%;
    border-collapse: collapse;
  }
  .admin-stats-table thead {
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
  }
  .admin-stats-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
  }
  .admin-stats-table th:nth-child(3),
  .admin-stats-table th:nth-child(4),
  .admin-stats-table th:nth-child(5),
  .admin-stats-table th:nth-child(6) {
    text-align: center;
  }
  .admin-stats-table td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
  }
  .admin-stats-table td:nth-child(3),
  .admin-stats-table td:nth-child(4),
  .admin-stats-table td:nth-child(5),
  .admin-stats-table td:nth-child(6) {
    text-align: center;
  }
  .admin-stats-table tbody tr:hover {
    background: rgba(16,185,129,0.03);
  }
  .admin-stats-table tbody tr:last-child td {
    border-bottom: none;
  }
  .admin-user-email {
    font-weight: 600;
    color: #0b1320;
  }
  .admin-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .admin-stat-badge-success {
    background: rgba(16,185,129,0.1);
    color: #059669;
  }
  .admin-stat-badge-danger {
    background: rgba(239,68,68,0.1);
    color: #dc2626;
  }
  
  /* User Search Section */
  .admin-search-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
    margin-bottom: 2rem;
  }
  
  /* Expandable user details */
.expand-icon {
  cursor: pointer;
  transition: transform 0.2s;
    color: #10b981;
    font-size: 1.2rem;
}
.expand-icon.expanded {
  transform: rotate(90deg);
}
.user-details-row {
  display: none;
  background: #f8f9fa;
}
.user-details-row.show {
  display: table-row;
}
  
  /* User Stats Detail Section */
  .user-stats-detail {
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    margin: 1rem 0;
  }
  .user-stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .user-stats-kpi-card {
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 12px;
    padding: 1rem;
  }
  
  .user-kpi-card-clickable {
    transition: all 0.2s ease;
  }
  
  .user-kpi-card-clickable:hover {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
    transform: translateY(-2px);
  }
  
  .user-kpi-card-clickable.active {
    border-color: #10b981;
    border-width: 2px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
  }
  .user-stats-kpi-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 0.25rem;
  }
  .user-stats-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10b981;
  }
  .user-stats-graph-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    min-height: 350px;
    height: 350px;
    position: relative;
  }
  .user-stats-graph-container canvas {
    max-height: 350px !important;
    height: 350px !important;
  }
  .user-stats-graph-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0b1320;
    margin-bottom: 0.75rem;
  }
  .generate-report-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
  }
  .generate-report-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16,185,129,0.4);
    background: linear-gradient(135deg, #059669, #047857);
  }
  
  /* Report Modal */
  .report-modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }
  .report-modal-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
    border-bottom: 2px solid rgba(16,185,129,0.2);
    border-radius: 16px 16px 0 0;
    padding: 1.5rem;
  }
  .report-modal-title {
    color: #10b981;
    font-weight: 700;
    font-size: 1.5rem;
  }
  .report-form-group {
    margin-bottom: 1.5rem;
  }
  .report-form-label {
    font-weight: 600;
    color: #0b1320;
    margin-bottom: 0.5rem;
    display: block;
  }
  .report-date-input {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    width: 100%;
    transition: all 0.3s ease;
  }
  .report-date-input:focus {
    border-color: #10b981;
    outline: none;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
  }
  .report-comment-textarea {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    width: 100%;
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
    transition: all 0.3s ease;
  }
  .report-comment-textarea:focus {
    border-color: #10b981;
    outline: none;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
  }
  .report-modal-footer {
    border-top: 1px solid #e5e7eb;
    padding: 1.5rem;
    border-radius: 0 0 16px 16px;
  }
  .btn-generate-pdf {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  .btn-generate-pdf:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.module-controls {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.bio-preview {
  display: inline-block;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}
.save-modules-btn {
  transition: all 0.3s ease;
}
.save-modules-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Modal KPI Cards */
.modal-kpi-card {
  transition: all 0.2s ease;
}
.modal-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.2) !important;
}
.modal-kpi-card.active {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03)) !important;
  border-left: 4px solid #10b981 !important;
}
  
  @media (max-width: 768px) {
    .admin-kpi-grid {
      grid-template-columns: 1fr;
    }
    .admin-chart-container {
      height: 350px;
      min-height: 350px;
    }
    .admin-stats-table {
      font-size: 0.85rem;
    }
    .admin-stats-table th,
    .admin-stats-table td {
      padding: 0.75rem 0.5rem;
    }
}



/* ============================================
   CSS estratto da: admin\admin_connections.html
   ============================================ */

  /* Admin Dashboard Header */
  .admin-dashboard-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(16,185,129,0.1);
  }
  .admin-dashboard-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0b1320;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }
  .admin-dashboard-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
  }
  
  /* Connection Cards */
  .admin-connection-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
  }
  .admin-connection-card:hover {
    box-shadow: 0 8px 24px rgba(16,185,129,0.15);
    border-color: #10b981;
  }
  
  /* Table Styles */
  .admin-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .admin-table-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #0b1320;
    margin: 0;
  }
  .admin-stats-table {
    width: 100%;
    border-collapse: collapse;
  }
  .admin-stats-table thead {
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
  }
  .admin-stats-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
  }
  .admin-stats-table td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
  }
  .admin-stats-table tbody tr:hover {
    background: rgba(16,185,129,0.03);
  }
  .admin-stats-table tbody tr:last-child td {
    border-bottom: none;
  }
  
  /* Buttons - Use emerald colors from styles.css */
  .btn-primary {
    background: linear-gradient(135deg, var(--emerald, #10b981), var(--emerald-hover, #059669)) !important;
    border: none !important;
    color: white !important;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(16,185,129,0.25);
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, var(--emerald-hover, #059669), #047857) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16,185,129,0.4);
  }
  .btn-outline-primary {
    border: 1.5px solid var(--emerald, #10b981) !important;
    color: var(--emerald, #10b981) !important;
    background: transparent;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(16,185,129,0.15);
  }
  .btn-outline-primary:hover:not(:disabled) {
    background: var(--emerald, #10b981) !important;
    color: white !important;
    border-color: var(--emerald, #10b981) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
  }
  
  /* Text primary should be emerald */
  .text-primary {
    color: var(--emerald, #10b981) !important;
  }
  .btn-outline-secondary {
    border: 1.5px solid #e5e7eb;
    color: #64748b;
    background: transparent;
  }
  .btn-outline-secondary:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16,185,129,0.05);
  }
  .btn-outline-danger {
    border: 1.5px solid #ef4444;
    color: #ef4444;
    background: transparent;
  }
  .btn-outline-danger:hover {
    background: #ef4444;
    color: white;
  }
  
  /* Actions Dropdown Menu */
  .actions-dropdown-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    transition: all 0.3s ease;
  }
  .actions-dropdown-btn:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16,185,129,0.05);
    transform: translateY(-1px);
  }
  .actions-dropdown-btn:focus {
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
  }
  .dropdown-menu {
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0.5rem;
    margin-top: 0.5rem;
  }
  .dropdown-item {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .dropdown-item:hover {
    background: rgba(16,185,129,0.08);
    color: #10b981;
  }
  .dropdown-item.danger {
    color: #64748b;
  }
  .dropdown-item.danger:hover {
    background: rgba(100,116,139,0.1);
    color: #475569;
  }
  .dropdown-divider {
    margin: 0.5rem 0;
    border-color: #e5e7eb;
  }
  
  /* Badges */
  .badge {
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .bg-success {
    background: rgba(16,185,129,0.1) !important;
    color: #059669 !important;
  }
  .bg-secondary {
    background: rgba(100,116,139,0.1) !important;
    color: #475569 !important;
  }
  
  /* Form Styles */
  .form-label {
    font-weight: 600;
    color: #0b1320;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
  }
  .form-control, .form-select {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.3s ease;
  }
  .form-control:focus, .form-select:focus {
    border-color: #10b981;
    outline: none;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
  }
  .form-text {
    color: #64748b;
    font-size: 0.85rem;
  }
  .form-hint {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
  }
  
  /* Token Card Style (like leads page) */
  .token-card {
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(16,185,129,.10), rgba(16,185,129,.03));
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
  }
  .token-card .section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #0b1320;
    font-weight: 700;
    font-size: 1rem;
  }
  .token-card .section-badge {
    font-size: 0.70rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    color: #065f46;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
  }
  .btn-outline-emerald {
    background: transparent;
    color: #10b981;
    border: 1px solid #10b981;
    border-radius: 12px;
    padding: 0.35rem 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  .btn-outline-emerald:hover {
    background: rgba(16,185,129,0.05);
    color: #059669;
  }
  
  /* Help Section */
  .help-section {
    background: rgba(16,185,129,0.05);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
  }
  .help-section-title {
    font-weight: 600;
    color: #10b981;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .help-steps {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .help-steps li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #334155;
    font-size: 0.85rem;
    line-height: 1.6;
  }
  .help-steps li:before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    left: 0;
    top: 0.5rem;
    background: #10b981;
    color: white;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
  }
  .help-steps {
    counter-reset: step-counter;
  }
  .help-steps code {
    background: rgba(16,185,129,0.1);
    color: #059669;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  }
  
  /* Modal Styles */
  .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }
  .modal-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
    border-bottom: 2px solid rgba(16,185,129,0.2);
    border-radius: 16px 16px 0 0;
    padding: 1.5rem;
  }
  .modal-title {
    color: #10b981;
    font-weight: 700;
  }



/* ============================================
   CSS estratto da: admin\admin_prompts.html
   ============================================ */

  /* Admin Dashboard Header */
  .admin-dashboard-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(16,185,129,0.1);
  }
  .admin-dashboard-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0b1320;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }
  .admin-dashboard-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
  }
  
  /* Prompt Cards */
  .admin-prompt-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
  }
  .admin-prompt-card:hover {
    box-shadow: 0 8px 24px rgba(16,185,129,0.15);
    border-color: #10b981;
  }
  
  /* Form Styles */
  .form-label {
    font-weight: 600;
    color: #0b1320;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
  }
  .form-control, textarea.form-control {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.3s ease;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 0.9rem;
  }
  .form-control:focus, textarea.form-control:focus {
    border-color: #10b981;
    outline: none;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
  }
  
  /* Buttons - Use emerald colors from styles.css */
  .btn-primary {
    background: linear-gradient(135deg, var(--emerald, #10b981), var(--emerald-hover, #059669)) !important;
    border: none !important;
    color: white !important;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(16,185,129,0.25);
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, var(--emerald-hover, #059669), #047857) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16,185,129,0.4);
  }
  
  /* Current Prompt Card */
  .current-prompt-card {
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
    border: 2px solid rgba(16,185,129,0.2);
  }
  .current-prompt-card .card-title {
    color: #10b981;
    font-weight: 700;
  }
  .prompt-preview {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
    color: #334155;
  }
  
  /* Existing Prompts List */
  .prompts-list {
    list-style: none;
    padding: 0;
  }
  .prompts-list details {
    background: #fff;
    border: 1.5px solid #f1f5f9;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
  }
  .prompts-list details:hover {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16,185,129,0.1);
  }
  .prompts-list summary {
    font-weight: 600;
    color: #0b1320;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
  }
  .prompts-list summary:hover {
    background: rgba(16,185,129,0.05);
    color: #10b981;
  }
  .prompts-list summary::-webkit-details-marker {
    color: #10b981;
  }
  .prompts-list .in-use-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem;
  }
  .prompts-list pre {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
    color: #334155;
  }
  
  /* Empty State */
  .empty-state {
    text-align: center;
    padding: 3rem;
    color: #64748b;
  }
  .empty-state i {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
  }



/* ============================================
   CSS estratto da: admin\invitations.html
   ============================================ */

  /* Admin Dashboard Header */
  .admin-dashboard-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(16,185,129,0.1);
  }
  .admin-dashboard-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0b1320;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }
  .admin-dashboard-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
  }
  
  /* Invitation Cards */
  .admin-invitation-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
  }
  .admin-invitation-card:hover {
    box-shadow: 0 8px 24px rgba(16,185,129,0.15);
    border-color: #10b981;
  }
  .admin-invitation-card h2 {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #0b1320;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .admin-invitation-card h2 i {
    color: #10b981;
  }
  
  /* Form Styles */
  .form-label {
    font-weight: 600;
    color: #0b1320;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
  }
  .form-control, .form-select {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.3s ease;
  }
  .form-control:focus, .form-select:focus {
    border-color: #10b981;
    outline: none;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
  }
  .form-text {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 0.25rem;
  }
  
  /* Buttons - Use emerald colors from styles.css */
  .btn-primary {
    background: linear-gradient(135deg, var(--emerald, #10b981), var(--emerald-hover, #059669)) !important;
    border: none !important;
    color: white !important;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(16,185,129,0.25);
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, var(--emerald-hover, #059669), #047857) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16,185,129,0.4);
  }
  .btn-outline-primary {
    border: 1.5px solid var(--emerald, #10b981) !important;
    color: var(--emerald, #10b981) !important;
    background: transparent;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(16,185,129,0.15);
  }
  .btn-outline-primary:hover:not(:disabled) {
    background: var(--emerald, #10b981) !important;
    color: white !important;
    border-color: var(--emerald, #10b981) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
  }
  .btn-outline-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* Table Styles */
  .admin-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .admin-table-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #0b1320;
    margin: 0;
  }
  .admin-stats-table {
    width: 100%;
    border-collapse: collapse;
  }
  .admin-stats-table thead {
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
  }
  .admin-stats-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
  }
  .admin-stats-table td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
  }
  .admin-stats-table tbody tr:hover {
    background: rgba(16,185,129,0.03);
  }
  .admin-stats-table tbody tr:last-child td {
    border-bottom: none;
  }
  
  /* Badges */
  .badge {
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .bg-success {
    background: rgba(16,185,129,0.1) !important;
    color: #059669 !important;
  }
  .bg-warning {
    background: rgba(245,158,11,0.1) !important;
    color: #d97706 !important;
  }
  .bg-secondary {
    background: rgba(100,116,139,0.1) !important;
    color: #475569 !important;
  }
  
  /* Alert Styles */
  .alert-info {
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 12px;
    padding: 1rem;
    color: #1e40af;
  }
  .alert-info code {
    background: rgba(59,130,246,0.1);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.9em;
  }
  
  /* Code/Token Display */
  code {
    background: rgba(16,185,129,0.1);
    color: #059669;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 0.85rem;
  }
  
  /* Pagination */
  .pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2rem;
  }
  .page-item {
    list-style: none;
  }
  .page-link {
    padding: 0.5rem 1rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
  }
  .page-link:hover:not(.disabled) {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16,185,129,0.05);
  }
  .page-item.active .page-link {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: white;
  }
  .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }



/* ============================================
   CSS estratto da: customer\account.html
   ============================================ */

  /* Profile Page Header */
  .admin-dashboard-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(16,185,129,0.1);
  }
  .admin-dashboard-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0b1320;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }
  .admin-dashboard-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
  }
  
  /* Profile Cards */
  .admin-connection-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
  }
  .admin-connection-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: rgba(16,185,129,0.3);
  }
  .admin-connection-card .card-header {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(16,185,129,0.2);
  }
  .admin-connection-card .card-header h5 {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #0b1320;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .admin-connection-card .card-header h5 i {
    color: #10b981;
  }
  .admin-connection-card .card-body {
    padding: 0;
  }
  
  /* Form Controls */
  .form-label {
    font-weight: 600;
    color: #0b1320;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }
  .form-control, .form-select {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: all 0.2s ease;
  }
  .form-control:focus, .form-select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
    outline: none;
  }
  .form-control:disabled {
    background-color: #f8fafc;
    color: #64748b;
  }
  .form-text {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.5rem;
  }
  
  /* Buttons - All Green Brand */
  .btn-primary, .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    color: white;
    transition: all 0.3s ease;
  }
  .btn-primary:hover, .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16,185,129,0.3);
    color: white;
  }
  .btn-primary:active, .btn-success:active {
    transform: translateY(0);
  }
  .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  .btn-light {
    background: rgba(16,185,129,0.08);
    border: 1.5px solid rgba(16,185,129,0.2);
    color: #10b981;
    border-radius: 8px;
    transition: all 0.2s ease;
  }
  .btn-light:hover {
    background: rgba(16,185,129,0.15);
    border-color: #10b981;
    color: #059669;
  }
  
  /* Checkbox Switch Style */
  .checkbox-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(16,185,129,0.03);
    border-radius: 12px;
    border: 1.5px solid rgba(16,185,129,0.2);
    transition: all 0.3s ease;
    margin-top: 1rem;
  }
  .checkbox-switch-wrapper:hover {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.4);
  }
  .checkbox-switch-wrapper input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: #10b981;
    flex-shrink: 0;
  }
  .checkbox-switch-wrapper label {
    font-weight: 600;
    color: #0b1320;
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
  }
  .checkbox-switch-wrapper label i {
    color: #10b981;
    font-size: 1.1rem;
  }
  .checkbox-switch-wrapper input[type="checkbox"]:checked + label {
    color: #059669;
  }
  
  /* Schedule Section */
  .day-schedule {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(16,185,129,0.03);
    border-radius: 8px;
    border: 1px solid rgba(16,185,129,0.1);
  }
  .day-schedule input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #10b981;
  }
  .day-schedule label {
    font-weight: 600;
    color: #0b1320;
    min-width: 100px;
    margin: 0;
    cursor: pointer;
  }
  .day-schedule input[type="time"] {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem;
  }
  .day-schedule input[type="time"]:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
  }
  
  /* Services Table */
  .services-table {
    overflow-x: auto;
  }
  .services-table table {
    width: 100%;
    border-collapse: collapse;
  }
  .services-table thead {
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
  }
  .services-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid rgba(16,185,129,0.2);
  }
  .services-table td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
  }
  .services-table tbody tr:hover {
    background: rgba(16,185,129,0.03);
  }
  .btn-danger {
    background: transparent;
    border: 1.5px solid #64748b;
    color: #64748b;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
  }
  .btn-danger:hover {
    background: #64748b;
    color: white;
    border-color: #64748b;
  }
  
  /* Input Group */
  .input-group {
    display: flex;
    gap: 0.5rem;
  }
  .input-group .form-select {
    flex-shrink: 0;
  }
  .input-group .form-control {
    flex: 1;
  }
  
  /* Textarea */
  textarea.form-control {
    resize: vertical;
    min-height: 100px;
  }
  
  @media (max-width: 768px) {
    .admin-dashboard-title {
      font-size: 1.75rem;
    }
    .admin-connection-card {
      padding: 1.5rem;
    }
    .day-schedule {
      flex-wrap: wrap;
    }
  }



/* ============================================
   CSS estratto da: customer\calendar.html
   ============================================ */

    /* Admin Dashboard Header */
    .admin-dashboard-header {
      background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
      border-radius: 16px;
      padding: 2rem;
      margin-bottom: 2rem;
      border: 1px solid rgba(16,185,129,0.1);
    }
    .admin-dashboard-title {
      font-family: 'Poppins', 'Inter', sans-serif;
      font-weight: 800;
      font-size: 2rem;
      color: #0b1320;
      margin-bottom: 0.5rem;
      letter-spacing: -0.02em;
    }
    .admin-dashboard-subtitle {
      color: #64748b;
      font-size: 1rem;
      margin: 0;
    }
    
    /* Calendar container */
    .calendar-container {
      background: #ffffff;
      border-radius: 16px;
      padding: 2rem;
      border: 1.5px solid #e5e7eb;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }
    
    /* Ensure the calendar has a visible height so the grid renders */
    #calendar { max-width: 100%; margin: 0 auto; min-height: 600px; }
    .fc-event-title { font-weight:600 }
    /* Theme alignment with Carla palette */
    .fc .fc-toolbar-title { color: var(--text-primary); font-weight: 700; }
    .fc .fc-button { background: #fff; color: var(--text-primary); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); }
    .fc .fc-button-primary:not(:disabled):hover { background: var(--emerald); border-color: var(--emerald); color: #fff; }
    .fc .fc-button-primary:disabled { opacity: .6; }
    .fc .fc-daygrid-day.fc-day-today { background: rgba(16,185,129,0.08); }
  /* Selection highlight in emerald, replacing default blue */
  .fc .fc-highlight { background: rgba(16,185,129,0.15); }
  /* Day numbers default to neutral/dark; hover subtly emerald */
  .fc .fc-daygrid-day-number { color:#0f172a; }
  .fc .fc-daygrid-day-number:hover { color:#059669; }
    .fc .fc-event { background: var(--emerald); border-color: var(--emerald); color: #fff; }
    .fc .fc-event .fc-event-time { font-weight: 700; }
    .fc .fc-col-header-cell-cushion { color: var(--text-secondary); font-weight: 600; }
    .fc .fc-scrollgrid, .fc-theme-standard td, .fc-theme-standard th { border-color: var(--glass-border); }
    /* Dark mode tweaks */
    body.dark-mode .fc .fc-button { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--glass-border); }
    body.dark-mode .fc .fc-daygrid-day.fc-day-today { background: rgba(16,185,129,0.18); }
    body.dark-mode .fc .fc-scrollgrid, body.dark-mode .fc-theme-standard td, body.dark-mode .fc-theme-standard th { border-color: #2c3b52; }
    
    /* Emerald info banner - Elegant design */
    .alert-emerald { 
      background: #ffffff !important; 
      border: 2px solid #10b981 !important; 
      border-left: 6px solid #10b981 !important;
      color: #0b1320; 
      border-radius: 16px; 
      padding: 1.5rem 2rem;
      box-shadow: 0 4px 16px rgba(16,185,129,0.15) !important;
      transition: all 0.3s ease;
    }
    .alert-emerald:hover {
      box-shadow: 0 4px 16px rgba(16,185,129,0.12);
      transform: translateY(-1px);
    }
    .alert-emerald strong {
      color: #0b1320;
      font-weight: 700;
      font-size: 1.05rem;
      display: block;
      margin-bottom: 0.75rem;
    }
    .alert-emerald .bi-info-circle {
      color: var(--emerald, #10b981);
      font-size: 1.5rem;
      margin-top: 0.125rem;
    }
    .alert-emerald a { 
      color: var(--emerald, #10b981); 
      font-weight: 600; 
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .alert-emerald a:hover { 
      color: var(--emerald-hover, #059669); 
      text-decoration: underline;
    }
    /* Removed btn-link styles - using btn-outline-secondary instead */
    
    /* Badge styling - Elegant badges */
    .badge {
      padding: 0.5rem 1rem;
      border-radius: 10px;
      font-weight: 600;
      font-size: 0.875rem;
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
      transition: all 0.2s ease;
    }
    .badge.bg-success {
      background: linear-gradient(135deg, #10b981, #059669) !important;
      color: white !important;
    }
    .badge.bg-success:hover {
      box-shadow: 0 4px 8px rgba(16,185,129,0.25);
      transform: translateY(-1px);
    }
    .badge.bg-secondary {
      background: linear-gradient(135deg, #64748b, #475569) !important;
      color: white !important;
    }
    .badge.bg-secondary:hover {
      box-shadow: 0 4px 8px rgba(100,116,139,0.25);
      transform: translateY(-1px);
    }
    .badge i {
      font-size: 0.9rem;
    }
    
    /* Button styling - Elegant Google Calendar button */
    .btn-emerald {
      background: linear-gradient(135deg, #10b981, #059669);
      border: none;
      color: white;
      font-weight: 600;
      border-radius: 12px;
      padding: 0.75rem 1.5rem;
      box-shadow: 0 4px 16px rgba(16,185,129,0.35);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    .btn-emerald:hover {
      background: linear-gradient(135deg, #059669, #047857);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(16,185,129,0.5);
    }
    .btn-emerald:active {
      transform: translateY(0);
      box-shadow: 0 4px 16px rgba(16,185,129,0.35);
    }
    .btn-emerald .bi-google {
      font-size: 1.2rem;
      opacity: 1;
    }
    .btn-outline-emerald {
      border: 1.5px solid #10b981;
      color: #10b981;
      background: transparent;
      font-weight: 600;
      border-radius: 12px;
      padding: 0.5rem 1.25rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px rgba(16,185,129,0.15);
    }
    .btn-outline-emerald:hover {
      background: #10b981;
      color: white;
      border-color: #10b981;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(16,185,129,0.3);
    }
    .btn-outline-emerald:active {
      transform: translateY(0);
      box-shadow: 0 1px 3px rgba(16,185,129,0.15);
    }
    .btn-outline-danger {
      border: 1.5px solid #ef4444;
      color: #ef4444;
      background: transparent;
      font-weight: 600;
      border-radius: 12px;
      padding: 0.5rem 1.25rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px rgba(239,68,68,0.15);
    }
    .btn-outline-danger:hover {
      background: #ef4444;
      color: white;
      border-color: #ef4444;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(239,68,68,0.3);
    }
    .btn-outline-danger:active {
      transform: translateY(0);
      box-shadow: 0 1px 3px rgba(239,68,68,0.15);
    }
    .btn-outline-secondary {
      border: 1.5px solid #64748b;
      color: #64748b;
      background: transparent;
      font-weight: 600;
      border-radius: 12px;
      padding: 0.75rem 1.5rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .btn-outline-secondary:hover {
      background: #64748b;
      color: white;
      border-color: #64748b;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(100,116,139,0.3);
    }
    .btn-outline-secondary:active {
      transform: translateY(0);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    /* Form controls focus */
    .form-control:focus {
      border-color: #10b981;
      box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
    }
    .form-check-input:checked {
      background-color: #10b981;
      border-color: #10b981;
    }
    .form-check-input:focus {
      border-color: rgba(16,185,129,.6);
      box-shadow: 0 0 0 .2rem rgba(16,185,129,.2);
    }
  


/* ============================================
   CSS estratto da: customer\customers.html
   ============================================ */

  /* Ensure services column doesn't break layout */
  .table td:nth-child(6) {
    max-width: 200px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }
  /* Ensure actions column stays compact */
  .table td:nth-child(7) {
    white-space: nowrap;
  }

  /* Customer Modal Styles */
  #addCustomerModal .form-control:focus,
  #addCustomerModal .form-select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
    outline: none;
  }

  #addCustomerModal .modal-content {
    animation: modalFadeIn 0.3s ease-out;
  }

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



/* ============================================
   CSS estratto da: customer\index_auth_user.html
   ============================================ */

  /* Compact modern dashboard - no white space */
  .dashboard-container {
    padding: 1rem 0;
  }
  
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  @media (max-width: 992px) {
    .dashboard-grid {
      grid-template-columns: 1fr;
    }
  }
  
  /* KPI Cards - compact */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .kpi-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  
  .kpi-card:hover {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
    transform: translateY(-2px);
  }
  
  .kpi-card.active {
    border-color: #10b981;
    border-width: 2px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
  }
  
  .kpi-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 0.25rem;
  }
  
  .kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
  }
  
  .kpi-icon {
    width: 32px;
    height: 32px;
    color: #10b981;
  }
  
  /* Graph container */
  .graph-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    min-height: 400px;
    position: relative;
  }
  
  .graph-container canvas {
    max-height: 350px !important;
  }
  
  /* Time range selector buttons */
  .time-range-selector {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  
  .time-range-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .time-range-btn:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.05);
  }
  
  .time-range-btn.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
  }
  
  /* Quick links - elegant aligned cards */
  .quick-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md, 1rem);
    margin-top: var(--spacing-xl, 2rem);
    padding: 0;
  }
  
  @media (max-width: 768px) {
    .quick-links-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .quick-link-card {
    background: var(--surface-elevated, #ffffff);
    border: 1px solid var(--border-light, #f1f5f9);
    border-radius: var(--radius, 12px);
    padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
    text-align: center;
    text-decoration: none;
    color: var(--text-primary, #1e293b);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.75rem);
    min-height: 140px;
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    position: relative;
    overflow: hidden;
  }
  
  /* Ensure icon container is properly aligned */
  .quick-link-card > img,
  .quick-link-card > .leads-logos-grid {
    flex-shrink: 0;
    margin: 0 auto;
  }
  
  /* Ensure title is properly aligned */
  .quick-link-card > .quick-link-title {
    flex-shrink: 0;
    width: 100%;
    text-align: center;
  }
  
  .quick-link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary, #10b981), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .quick-link-card:hover {
    border-color: var(--primary, #10b981);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    transform: translateY(-4px);
    text-decoration: none;
    color: var(--text-primary, #1e293b);
    background: var(--surface-elevated, #ffffff);
  }
  
  .quick-link-card:hover::before {
    opacity: 1;
  }
  
  .quick-link-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
  }
  
  .quick-link-card:hover .quick-link-icon {
    transform: scale(1.1);
  }
  
  /* Leads card with 4 logos in 2x2 grid */
  .leads-logos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 100%;
    max-width: 80px;
    margin: 0 auto;
    min-height: 80px;
    padding: 0.25rem;
    flex-shrink: 0;
    align-self: center;
  }
  
  .leads-logo {
    width: 100%;
    height: 100%;
    min-width: 32px;
    min-height: 32px;
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    padding: 0.25rem;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  }
  
  .quick-link-card:hover .leads-logo {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(16, 185, 129, 0.2));
  }
  
  /* Ensure SVG logos are visible and properly sized */
  .leads-logos-grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .quick-link-title {
    font-family: var(--font-family, 'Inter', system-ui, sans-serif);
    font-weight: 600;
    font-size: var(--font-size-base, 1rem);
    color: var(--text-primary, #1e293b);
    margin: 0;
    padding: 0;
    letter-spacing: -0.01em;
    line-height: 1.4;
    text-align: center;
    width: 100%;
    display: block;
    flex-shrink: 0;
  }
  
  .quick-link-card:hover .quick-link-title {
    color: var(--primary, #10b981);
  }
  
  /* Remove hero section white space */
  .hero-rect {
    display: none;
  }
  
  /* Email verification alert - compact */
  .alert-emerald {
    background: #ecfdf5;
    border: 1px solid #10b981;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
  }



/* ============================================
   CSS estratto da: customer\leads.html
   ============================================ */

  /* Admin Dashboard Header */
  .admin-dashboard-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(16,185,129,0.1);
  }
  .admin-dashboard-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0b1320;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }
  .admin-dashboard-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
  }
  
  /* Connection Cards */
  .admin-connection-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
  }
  .admin-connection-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: rgba(16,185,129,0.3);
  }
  .connection-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(16,185,129,0.2);
  }
  .connection-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #0b1320;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .connection-title i {
    color: #10b981;
  }
  .section-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    color: #065f46;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    margin-left: 0.5rem;
  }
  .badge-success {
    background: rgba(16,185,129,0.1);
    color: #059669;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .badge-secondary {
    background: rgba(100,116,139,0.1);
    color: #64748b;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  
  /* Form Controls */
  .form-label {
    font-weight: 600;
    color: #0b1320;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }
  .form-control, .form-select {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: all 0.2s ease;
  }
  .form-control:focus, .form-select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
    outline: none;
  }
  .form-control:disabled, .form-control[readonly] {
    background-color: #f8fafc;
    color: #64748b;
  }
  .form-text {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.5rem;
  }
  .form-hint {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .form-hint i {
    color: #10b981;
  }
  
  /* Buttons - All Green Brand */
  .btn-primary, .btn-success, .btn-emerald {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    color: white;
    transition: all 0.3s ease;
  }
  .btn-primary:hover, .btn-success:hover, .btn-emerald:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16,185,129,0.3);
    color: white;
  }
  .btn-outline-emerald {
    background: transparent;
    color: #10b981;
    border: 1.5px solid #10b981;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  .btn-outline-emerald:hover {
    background: rgba(16,185,129,0.08);
    color: #059669;
    border-color: #059669;
  }
  .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  .btn-light {
    background: rgba(16,185,129,0.08);
    border: 1.5px solid rgba(16,185,129,0.2);
    color: #10b981;
    border-radius: 8px;
    transition: all 0.2s ease;
  }
  .btn-light:hover {
    background: rgba(16,185,129,0.15);
    border-color: #10b981;
    color: #059669;
  }
  .btn-danger {
    background: transparent;
    border: 1.5px solid #64748b;
    color: #64748b;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
  }
  .btn-danger:hover {
    background: #64748b;
    color: white;
    border-color: #64748b;
  }
  
  /* Input Group */
  .input-group {
    display: flex;
    gap: 0.5rem;
  }
  .input-group .form-select {
    flex-shrink: 0;
  }
  .input-group .form-control {
    flex: 1;
  }
  .compact-input {
    font-size: 0.9rem;
  }
  .action-btn {
    min-width: 96px;
  }
  
  /* Stacked Sections */
  .stacked-sections {
    width: 100%;
  }
  .section-block {
    width: 100%;
  }
  .section-divider {
    border-top: 1px solid #e5e7eb;
    margin: 1rem 0;
  }
  
  /* KPI Cards */
  .admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .admin-kpi-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .admin-kpi-card:hover {
    box-shadow: 0 8px 24px rgba(16,185,129,0.15);
    border-color: #10b981;
    transform: translateY(-2px);
  }
  .admin-kpi-card.active {
    border-color: #10b981;
    background: rgba(16,185,129,0.05);
    box-shadow: 0 8px 24px rgba(16,185,129,0.2);
  }
  .admin-kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
  }
  .admin-kpi-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .admin-kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
  }
  .admin-kpi-icon-leads {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.08));
    color: #10b981;
  }
  .admin-kpi-icon-monthly {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08));
    color: #3b82f6;
  }
  .admin-kpi-icon-growth {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.08));
    color: #f59e0b;
  }
  .admin-kpi-value {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0b1320;
    line-height: 1.2;
  }
  .admin-kpi-growth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .admin-kpi-growth-value {
    font-weight: 700;
    font-size: 1.25rem;
    color: #10b981;
  }
  
  /* Chart Section */
  .admin-chart-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
    margin-bottom: 2rem;
  }
  .admin-chart-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #0b1320;
    margin-bottom: 1.5rem;
  }
  .chart-container {
    position: relative;
    height: 300px;
  }
  
  /* Time range selector buttons */
  .time-range-selector {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  
  .time-range-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .time-range-btn:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.05);
  }
  
  .time-range-btn.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
  }
  
  /* Leads Table */
  .admin-stats-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
  }
  .admin-stats-table thead {
    background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
  }
  .admin-stats-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid rgba(16,185,129,0.2);
  }
  .admin-stats-table td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
  }
  .admin-stats-table tbody tr:hover {
    background: rgba(16,185,129,0.03);
  }
  .admin-stats-table tbody tr:last-child td {
    border-bottom: none;
  }
  .wa-sent img {
    opacity: 1;
  }
  .wa-not-sent img {
    opacity: 0.25;
  }
  
  /* Actions Dropdown */
  .btn-ellipsis {
    border: 1px solid #10b981;
    color: #10b981;
    background: transparent;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    line-height: 1;
    transition: all 0.2s ease;
  }
  .btn-ellipsis:hover {
    background: rgba(16,185,129,0.08);
    color: #059669;
  }
  .dropdown-menu {
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0.5rem;
    margin-top: 0.5rem;
  }
  .dropdown-item {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .dropdown-item:hover {
    background: rgba(16,185,129,0.08);
    color: #10b981;
  }
  .dropdown-item.danger {
    color: #64748b;
  }
  .dropdown-item.danger:hover {
    background: rgba(100,116,139,0.1);
    color: #475569;
  }
  .dropdown-divider {
    margin: 0.5rem 0;
    border-color: #e5e7eb;
  }
  
  /* Modal Styles */
  .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }
  .modal-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
    border-bottom: 2px solid rgba(16,185,129,0.2);
    border-radius: 16px 16px 0 0;
    padding: 1.5rem;
  }
  .modal-title {
    color: #10b981;
    font-weight: 700;
    font-size: 1.25rem;
  }
  .modal-footer {
    border-top: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
  }
  .btn-secondary {
    background: #64748b;
    border: none;
    color: white;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  .btn-secondary:hover {
    background: #475569;
    color: white;
  }
  
  @media (max-width: 768px) {
    .admin-dashboard-title {
      font-size: 1.75rem;
    }
    .admin-kpi-grid {
      grid-template-columns: 1fr;
    }
    .admin-connection-card {
      padding: 1.5rem;
    }
  }



/* ============================================
   CSS estratto da: customer\messages.html
   ============================================ */

  /* Admin Dashboard Header */
  .admin-dashboard-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(16,185,129,0.1);
  }
  .admin-dashboard-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0b1320;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }
  .admin-dashboard-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
  }
  
  /* Two-column layout: conversations + chat. On small screens it collapses to a single column. */
  .messages-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 16px; }
  .convo-list { height: 70vh; overflow: auto; }
  .chat-window { height: 70vh; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; display:flex; flex-direction:column; }

  /* Message list should flow vertically and allow the bubbles to size naturally. */
  .messages { flex:1; overflow:auto; padding: 8px; display:flex; flex-direction:column; gap:8px; }

  /* Bubbles: let them grow to a large fraction of available width, wrap long text and preserve newlines. */
  .msg { margin-bottom: 8px; padding: 8px 12px; border-radius: 12px; box-sizing: border-box; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
  .msg.in { background: #fff; align-self:flex-start; border:1px solid #e5e7eb; }
  .msg.out { background: #dcf8c6; align-self:flex-end; }

  /* Row alignment: left for incoming, right for outgoing. Keep rows full width so bubbles can size correctly. */
  .msg-row { display:flex; width:100%; margin-bottom:8px; }
  .msg-row.in { justify-content:flex-start; }
  .msg-row.out { justify-content:flex-end; }

  /* Inner container controls bubble max width relative to viewport, allowing responsive resizing. */
  .msg-inner { display:flex; flex-direction:column; max-width: 85%; }
  .msg-row.out .msg-inner { align-items: flex-end; }

  .convo-item { 
    padding: 10px; 
    border-bottom:1px solid #f1f5f9; 
    cursor:pointer; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .convo-item.active { background:#f8fafc; }
  .convo-item:hover { background:#f1f5f9; }
  .convo-item-name { flex: 1; }
  .convo-item-menu { 
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
    padding: 6px 8px;
    border-radius: 4px;
    color: var(--primary, #10b981);
    cursor: pointer;
    position: relative;
    font-size: 1.2rem;
    display: inline-block;
    min-width: 24px;
    min-height: 24px;
  }
  .convo-item:hover .convo-item-menu {
    opacity: 1;
  }
  .convo-item-menu:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary, #10b981);
  }
  .convo-item-menu .dropdown-menu {
    min-width: 180px;
  }
  .edit-chat-name-item {
    color: #000000 !important;
    padding: 0.75rem 1rem !important;
  }
  .edit-chat-name-item:hover {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #000000 !important;
  }

  /* Small screens: stack the convo list on top and let bubbles use nearly full width. */
  @media (max-width: 720px) {
    .messages-wrap { grid-template-columns: 1fr; }
    .convo-list { height: 28vh; }
    .chat-window { height: 62vh; }
    .msg-inner { max-width: 100%; }
  }
  /* Brand green switch for "Risposta automatica" */
  .form-switch .form-check-input:checked {
    background-color: #10b981;
    border-color: #10b981;
  }
  .form-check-input:focus {
    border-color: rgba(16,185,129,.6);
    box-shadow: 0 0 0 .2rem rgba(16,185,129,.2);
  }
  
  /* Green brand button */
  .btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
  }

/* ============================================
   Carla Status Toggle - Elegant Design
   ============================================ */

.carla-status-toggle-wrapper {
  display: flex;
  align-items: center;
}

.carla-status-card {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 320px;
}

.carla-status-card.status-active {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(16,185,129,0.02));
  box-shadow: 0 4px 16px rgba(16,185,129,0.15);
}

.carla-status-card.status-resting {
  border-color: #94a3b8;
  background: #ffffff;
}

.carla-status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.carla-status-card.status-active:hover {
  box-shadow: 0 6px 20px rgba(16,185,129,0.25);
}

.carla-status-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.carla-status-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.carla-status-indicator {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  flex-shrink: 0;
}

.carla-status-indicator.indicator-active {
  background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.08));
}

.carla-status-indicator.indicator-resting {
  background: linear-gradient(135deg, rgba(148,163,184,0.15), rgba(148,163,184,0.08));
}

.status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative;
}

.status-dot.dot-active {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.2), 0 0 0 6px rgba(16,185,129,0.1);
  animation: pulse-active 2s ease-in-out infinite;
}

.status-dot.dot-resting {
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148,163,184,0.2), 0 0 0 6px rgba(148,163,184,0.1);
}

@keyframes pulse-active {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(16,185,129,0.2), 0 0 0 6px rgba(16,185,129,0.1);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(16,185,129,0.3), 0 0 0 10px rgba(16,185,129,0.15);
  }
}

.status-label {
  font-weight: 700;
  font-size: 1rem;
  color: #0b1320;
  transition: color 0.3s ease;
  flex: 1;
}

.status-subtitle {
  font-size: 0.85rem;
  color: #64748b;
  transition: color 0.3s ease;
  margin-left: 52px;
}

.carla-status-card.status-active .status-label {
  color: #10b981;
}

.carla-status-card.status-active .status-subtitle {
  color: #059669;
}

.carla-toggle-switch {
  margin: 0;
  padding: 0;
}

.carla-toggle-switch .form-check-input {
  width: 3rem;
  height: 1.5rem;
  cursor: pointer;
  border: 2px solid #94a3b8;
  background-color: #e5e7eb;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.carla-toggle-switch .form-check-input:checked {
  background-color: #10b981;
  border-color: #10b981;
  box-shadow: 0 0 0 0.2rem rgba(16,185,129,0.25);
}

.carla-toggle-switch .form-check-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 0.2rem rgba(16,185,129,0.25);
}

.carla-toggle-switch .form-check-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .carla-status-card {
    min-width: auto;
    padding: 0.875rem 1.25rem;
  }
  
  .carla-status-header {
    flex-wrap: wrap;
  }
  
  .status-subtitle {
    margin-left: 0;
    margin-top: 0.25rem;
  }
  
  .carla-toggle-switch {
    margin-left: auto;
  }
}

/* Collapsible sections for admin accounts */
.collapsible-section {
  transition: all 0.3s ease;
}

.collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  transition: background-color 0.2s ease;
}

.collapsible-header:hover {
  background-color: rgba(16, 185, 129, 0.05);
}

.collapsible-icon {
  transition: transform 0.3s ease;
  color: #10b981;
  font-size: 1.2rem;
}

.collapsible-section.collapsed .collapsible-icon {
  transform: rotate(-90deg);
}

.collapsible-content {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 5000px;
  opacity: 1;
}

.collapsible-section.collapsed .collapsible-content {
  max-height: 0;
  opacity: 0;
  padding: 0 !important;
}

/* Lead appointments table styling */
#lead-appointments-body tr {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#lead-appointments-body tr:hover {
  background-color: rgba(16, 185, 129, 0.05);
}

.appointment-past {
  color: #94a3b8;
  font-style: italic;
}

.appointment-upcoming {
  color: #10b981;
  font-weight: 600;
}

.appointment-urgent {
  color: #ef4444;
  font-weight: 700;
}