/* CoucouCV UI theme aligned with provided v2 mockups */
:root {
  --blue: #2B3590;
  --blue-mid: #3840A8;
  --blue-light: #5060C0;
  --blue-ghost: #E8EAFF;
  --blue-pale: #F2F3FF;
  --mint: #00D0A0;
  --mint-bg: rgba(0, 208, 160, 0.12);
  --yellow: #FFD166;
  --red: #FF6B8A;
  --text: #0C0E50;
  --text-mid: #3A3D7A;
  --text-soft: #7C80B8;
  --bg: #F3F4FF;
  --border: #E0E2F5;
  --panel: #FFFFFF;
  --brand: #2B3590;
  --brand-deep: #3840A8;
}

html {
  cursor: auto !important;
}

body {
  font-family: 'Nunito Sans', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

.cursor {
  display: none !important;
}

a,
button,
[role='button'],
input,
select,
textarea,
.nav-item,
.upload-zone,
.area-slot,
.doc-card,
.role-clear {
  cursor: pointer !important;
}

.ticker {
  background: var(--blue) !important;
  border-bottom: 1px solid var(--blue-light) !important;
  box-shadow: none !important;
  min-height: 34px !important;
}

.ticker-track {
  color: rgba(255, 255, 255, 0.84) !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.t-item::before {
  content: '◆' !important;
  color: var(--mint) !important;
}

header {
  max-width: 1140px !important;
}

.logo,
.sb-logo,
.page-title,
.section-h2,
.section-title,
.pref-section-title,
.launch-title,
.roles-panel-title,
.fit-card-score,
.countdown-value,
.c-title,
.ec-greet {
  font-family: 'Raleway', sans-serif !important;
}

.logo {
  color: var(--blue) !important;
  letter-spacing: 0.06em !important;
}

.header-tag {
  color: var(--text-soft) !important;
  border-color: var(--border) !important;
  background: var(--panel) !important;
}

.hero-copy,
.hero-fit,
.fit-list,
.problem,
.hiw,
.email-sec,
.form-card,
.auth-card,
.card,
.section-shell {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
}

.eyebrow,
.section-eyebrow,
.fit-card-label,
.section-title,
.section-head .section-title,
.sec-title {
  color: var(--blue) !important;
}

h1,
.hero-h1 {
  color: var(--text) !important;
}

.hero-h1 em {
  color: var(--blue) !important;
}

.hero-sub,
.hero-p,
.section-p,
.ec-p {
  color: var(--text-mid) !important;
}

.hero-note,
.hero-geo,
.submit-note,
.f-note {
  color: var(--text-soft) !important;
}

.btn-main,
.btn-signup,
.btn-hero,
.btn-run,
.btn-save,
.save-btn,
.upload-btn,
.copy-btn,
.launch-btn,
.f-submit,
.ec-cta {
  font-family: 'Raleway', sans-serif !important;
  background: var(--blue) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.btn-main:hover,
.btn-signup:hover,
.btn-hero:hover,
.btn-run:hover,
.btn-save:hover,
.save-btn:hover,
.upload-btn:hover,
.copy-btn:hover,
.launch-btn:hover,
.f-submit:hover,
.ec-cta:hover {
  background: var(--blue-mid) !important;
  transform: translateY(-1px);
}

.btn-ghost,
.btn-login,
.btn-discard,
.clear-area-btn,
.role-clear,
.role-x {
  font-family: 'Nunito Sans', sans-serif !important;
  background: transparent !important;
  color: var(--blue) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 999px !important;
}

.btn-ghost:hover,
.btn-login:hover,
.btn-discard:hover,
.clear-area-btn:hover,
.role-clear:hover,
.role-x:hover {
  background: var(--blue-pale) !important;
  border-color: var(--blue-light) !important;
}

.shell,
.layout {
  grid-template-columns: 232px 1fr !important;
}

.sidebar {
  background: var(--blue) !important;
  border-right: 0 !important;
  width: 232px !important;
  padding: 1.3rem 1rem !important;
}

.sidebar .logo,
.sidebar .sb-logo {
  color: #FFFFFF !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

.sidebar .logo span {
  color: rgba(255, 255, 255, 0.75) !important;
}

.user-badge,
.client-chip {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
}

.user-dot,
.c-dot {
  background: var(--mint) !important;
}

.user-name,
.c-name {
  color: #FFFFFF !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.02em !important;
}

.user-tier,
.c-status {
  color: #9FF3DF !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.03em !important;
}

.nav-label {
  font-family: 'Raleway', sans-serif !important;
  color: rgba(255, 255, 255, 0.56) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.12em !important;
}

.nav-item {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em !important;
  border-radius: 10px !important;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #FFFFFF !important;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.nav-item.active::before {
  background: var(--mint) !important;
}

.sidebar-footer p,
.sb-footer-text {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Nunito Sans', sans-serif !important;
}

.sidebar-footer span,
.sb-footer a {
  color: var(--mint) !important;
}

.main {
  background: transparent !important;
  padding: 2rem 2.25rem !important;
}

.topbar,
.page-header {
  border-bottom: 2px solid var(--blue-ghost) !important;
  padding-bottom: 1.25rem !important;
}

.page-title {
  color: var(--blue) !important;
  font-size: 2.2rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}

.page-subtitle,
.page-sub {
  color: var(--text-soft) !important;
  font-size: 0.94rem !important;
  letter-spacing: 0 !important;
}

.page-sub-dot {
  color: var(--blue-light) !important;
}

.warning-banner,
.info-banner,
.banner {
  background: linear-gradient(135deg, var(--blue-ghost), #DDE1FF) !important;
  border: 1px solid rgba(75, 82, 232, 0.28) !important;
  border-left: 3px solid var(--blue) !important;
  border-radius: 12px !important;
}

.warning-text,
.info-text,
.banner-text {
  color: var(--text-mid) !important;
  font-size: 0.92rem !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}

.sec-title,
.section-title,
.pref-section-title {
  color: var(--blue) !important;
  font-size: 1.28rem !important;
  letter-spacing: 0.04em !important;
}

.sec-tag,
.section-badge,
.pref-badge,
.field-label,
.role-label,
.algo-label,
.ro-label {
  color: var(--text-soft) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

.area-slot,
.countdown-box,
.form-card,
.roles-card,
.readonly-card,
.api-group,
.doc-card,
.launch-panel,
.roles-panel,
.output-card,
.profile-card,
.notif-card,
.danger-card,
.danger-section,
.field,
.form-cell,
.ro-cell {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
}

.custom-select,
.role-select,
.field-input,
.api-input,
.field input,
.field select,
.field textarea,
input,
select,
textarea {
  background: var(--blue-pale) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em !important;
  padding: 0.65rem 0.85rem !important;
}

.custom-select:focus,
.role-select:focus,
.field-input:focus,
.api-input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(43, 53, 144, 0.08) !important;
}

.role-tag {
  background: var(--blue) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  border: 0 !important;
}

.role-tag.senior {
  background: var(--mint) !important;
  color: var(--text) !important;
}

.roles-link {
  color: var(--blue) !important;
  border-bottom-color: var(--blue-ghost) !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
}

.save-bar {
  background: rgba(255, 255, 255, 0.97) !important;
  border-top: 1px solid var(--border) !important;
}

.save-bar-text,
.save-hint,
.api-note,
.roles-empty,
.field-hint,
.output-empty {
  color: var(--text-soft) !important;
}

.status-chip.success {
  background: var(--mint-bg) !important;
  color: #006E52 !important;
}

.status-chip.failed {
  background: rgba(255, 107, 138, 0.14) !important;
  color: var(--red) !important;
}

@media (max-width: 1100px) {
  .shell,
  .layout {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }

  .main {
    padding: 1.35rem 1.1rem !important;
  }
}