/* ============================================================
   CMA – Campera Media Atlas
   Design System – aligned with campera.media
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── CSS VARIABLES ──────────────────────────────────────────── */
:root {
  /* Campera Brand Colors */
  --bg:             #0A0A0A;
  --bg-l:           #111111;
  --bg-card:        #141414;
  --bg-card-hover:  #1c1c1c;
  --bg-elevated:    #1e1e1e;
  --bg-input:       #0d0d0d;

  --accent:         #D00000;
  --accent-hover:   #b30000;
  --accent-dim:     rgba(208, 0, 0, 0.10);
  --accent-border:  rgba(208, 0, 0, 0.35);

  /* Backward compat aliases */
  --gold:           #D00000;
  --gold-light:     #ff2020;
  --gold-dim:       rgba(208, 0, 0, 0.10);
  --gold-border:    rgba(208, 0, 0, 0.35);
  --bg-void:        #0A0A0A;
  --bg-deep:        #0d0d0d;

  --fg:             #FFFFFF;
  --text-primary:   #F0F0F0;
  --text-secondary: rgba(255,255,255,0.55);
  --text-muted:     rgba(255,255,255,0.30);
  --text-dim:       rgba(255,255,255,0.15);

  --border:         rgba(255,255,255,0.08);
  --border-active:  rgba(208, 0, 0, 0.40);

  --danger:         #ff4757;
  --success:        #10B981;
  --warning:        #f59e0b;
  --line:           rgba(255,255,255,0.07);
  --line-d:         rgba(255,255,255,0.04);

  /* Layout */
  --sidebar-width:  280px;
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      14px;
  --radius-xl:      20px;
  --radius-pill:    100px;

  /* Typography */
  --font-serif:     'Instrument Serif', Georgia, serif;
  --font-ui:        'Instrument Serif', Georgia, serif;
  --font-body:      'Inter', system-ui, sans-serif;

  /* Easing */
  --ease:           cubic-bezier(.22,1,.36,1);
  --ease2:          cubic-bezier(.16,1,.3,1);
}

/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  overflow: hidden;
}
input, select, textarea, button { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(208,0,0,0.2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(208,0,0,0.4); }

/* ─── APP LAYOUT ─────────────────────────────────────────────── */
#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ─── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-l);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Sidebar Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--line);
}

.logo-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
}

.logo-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-main {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.logo-sub {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
}

/* Search in Sidebar */
.sidebar-search { padding: 14px 14px 6px; }

.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 10px;
  width: 14px; height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

#search-input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
#search-input::placeholder { color: var(--text-muted); }
#search-input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}

.nav-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  padding: 12px 10px 6px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  color: var(--text-secondary);
  font-size: 13px;
  position: relative;
  user-select: none;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: var(--fg); }
.nav-item.active {
  background: var(--accent-dim);
  color: var(--fg);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-item.active .nav-icon { color: var(--accent); }

.nav-icon { flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-label { flex: 1; }
/* Direct SVG inside nav-item (no .nav-icon wrapper) — same size as .nav-icon svg */
.nav-item > svg { width: 15px; height: 15px; flex-shrink: 0; }

.nav-count {
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.nav-item.active .nav-count {
  background: var(--accent);
  color: #fff;
}

/* ─── Talents & Ressources nav-group (collapsible CRM submenu) ──────────── */
.nav-item-group {
  display: flex;
  flex-direction: column;
}
.nav-item-group .nav-item-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  color: var(--text-secondary);
  font-size: 13px;
  position: relative;
  user-select: none;
}
.nav-item-group .nav-item-header:hover {
  background: rgba(255,255,255,0.04);
  color: var(--fg);
}
.nav-item-group .nav-item-header.open {
  color: var(--fg);
}
.nav-item-group .nav-item-header .nav-label { flex: 1; }
.nav-item-group .nav-item-header .nav-icon { flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center; }
.nav-item-group .nav-item-header .nav-icon svg { width: 15px; height: 15px; }
.nav-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
  opacity: 0.5;
}
.nav-item-group .nav-item-header.open .nav-chevron {
  transform: rotate(90deg);
  opacity: 1;
}
.nav-subitems {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.nav-subitems.open {
  max-height: 800px;
}
.nav-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 34px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  color: var(--text-muted);
  font-size: 12px;
  position: relative;
  user-select: none;
}
.nav-subitem:hover { background: rgba(255,255,255,0.04); color: var(--fg); }
.nav-subitem.active {
  background: var(--accent-dim);
  color: var(--fg);
}
.nav-subitem.active::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-subitem .sub-icon { flex-shrink: 0; font-size: 12px; width: 16px; text-align: center; }
.nav-subitem .sub-label { flex: 1; }
.nav-subitem .sub-count {
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}
.nav-subitem.active .sub-count {
  background: var(--accent);
  color: #fff;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
}

.btn-sidebar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-sidebar svg { width: 14px; height: 14px; }
.btn-sidebar:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--fg);
}

/* ─── MAIN CONTENT ───────────────────────────────────────────── */
.main-content {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#view-container {
  flex: 1;
  min-height: 0;
}

/* ─── LIST VIEW ──────────────────────────────────────────────── */
.list-view { height: 100%; display: flex; flex-direction: column; }

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.list-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.list-title h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.result-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.list-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-select {
  padding: 8px 14px;
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s;
  font-family: var(--font-body);
}
.control-select:focus { outline: none; border-color: var(--accent-border); }
.control-select:hover { border-color: rgba(255,255,255,0.15); color: var(--fg); }

/* ─── PRIMARY BUTTON ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s;
  white-space: nowrap;
  font-family: var(--font-body);
}
.btn-primary svg { width: 14px; height: 14px; }
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(208,0,0,0.35);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.btn-secondary svg { width: 14px; height: 14px; }
.btn-secondary:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--fg);
  background: rgba(255,255,255,0.04);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: transparent;
  border: 1px solid rgba(255,71,87,0.3);
  border-radius: var(--radius-pill);
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.btn-danger svg { width: 14px; height: 14px; }
.btn-danger:hover { background: rgba(255,71,87,0.08); border-color: var(--danger); }

/* ─── CONTACT GRID ───────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  padding: 0;
  background: var(--line);
}

.contact-card {
  background: var(--bg);
  padding: 22px 24px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.contact-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s var(--ease);
}
.contact-card:hover { background: var(--bg-card); }
.contact-card:hover::after { transform: scaleY(1); }

.card-avatar {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.avatar-initials {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.02em;
}

.status-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.card-body { flex: 1; min-width: 0; }

.card-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.card-fullname {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-stagename {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.04);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.cat-chip svg { width: 11px; height: 11px; flex-shrink: 0; }

.cat-chip-more {
  background: rgba(208,0,0,0.1);
  border-color: rgba(208,0,0,0.2);
  color: var(--accent);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.meta-item {
  font-size: 11px;
  color: var(--text-muted);
}

.gema-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(208,0,0,0.12);
  border: 1px solid rgba(208,0,0,0.25);
  color: var(--accent);
}

.card-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-contact svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ─── EMPTY STATE ────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  text-align: center;
  gap: 16px;
  height: 100%;
}

.empty-icon {
  font-size: 48px;
  color: var(--accent);
  opacity: 0.4;
}

.empty-state h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--fg);
}

.empty-state p {
  color: var(--text-secondary);
  max-width: 320px;
  line-height: 1.7;
  font-size: 14px;
}

/* ─── DETAIL VIEW ────────────────────────────────────────────── */
.detail-view { padding: 32px; max-width: 900px; margin: 0 auto; }

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.detail-actions { display: flex; gap: 10px; }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.btn-back svg { width: 14px; height: 14px; }
.btn-back:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--fg);
}

.detail-card {
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px 32px 28px;
  border-bottom: 1px solid var(--line);
}

.detail-avatar {
  width: 72px; height: 72px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 24px;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.detail-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 72px; height: 72px;
}
.detail-avatar-wrap .detail-avatar { width: 100%; height: 100%; }

.detail-avatar-img,
.card-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.avatar-camera-btn {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
.avatar-camera-btn svg { width: 22px; height: 22px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.detail-avatar-wrap:hover .avatar-camera-btn {
  opacity: 1;
  background: rgba(0,0,0,0.45);
}

.avatar-delete-btn {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #ff6b6b;
  border: none;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}
.detail-avatar-wrap:hover .avatar-delete-btn { opacity: 1; }

.card-avatar { overflow: hidden; }

.detail-title h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 6px;
}

.detail-stagename {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 12px;
}

.detail-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.cat-chip-lg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
}
.cat-chip-lg svg { width: 12px; height: 12px; flex-shrink: 0; }

.status-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 24px 32px;
}

.detail-section {
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid var(--line);
}
.detail-section:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.detail-section:nth-last-child(-n+2) { border-bottom: none; }

.detail-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}

.detail-row-label {
  color: rgba(255, 255, 255, 0.72);
  flex-shrink: 0;
  min-width: 130px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.detail-row-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.8;
  color: var(--text-secondary);
}

.detail-row-value { color: rgba(255, 255, 255, 0.92); font-weight: 500; }

.detail-link {
  color: var(--accent);
  transition: opacity 0.2s;
}
.detail-link:hover { opacity: 0.75; }

.detail-notes {
  padding: 24px 32px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.detail-notes p {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.8;
}

.detail-timestamps {
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.source-badge svg {
  width: 11px;
  height: 11px;
  opacity: 0.6;
}

/* ─── FORM VIEW ──────────────────────────────────────────────── */
.form-view { padding: 32px; max-width: 740px; margin: 0 auto; }

.form-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.form-header h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.contact-form { display: flex; flex-direction: column; gap: 1px; }

.form-section {
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 12px;
}

.form-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.form-group:last-child { margin-bottom: 0; }

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

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13.5px;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.form-group textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Status Pill Buttons */
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}
.radio-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Selected state via :has() */
.radio-label:has(input:checked) {
  border-color: var(--status-color, var(--accent));
  background: color-mix(in srgb, var(--status-color, var(--accent)) 15%, transparent);
  color: rgba(255,255,255,0.95);
}
.radio-label:hover:not(:has(input:checked)) {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.8);
}

/* Category Checkboxes */
.category-checkboxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cat-checkbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.cat-checkbox input { display: none; }

.cat-icon-ring {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  color: rgba(255,255,255,0.35);
}
.cat-icon-ring svg { width: 26px; height: 26px; flex-shrink: 0; }

.cat-checkbox-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.35;
  max-width: 80px;
}

.cat-checkbox:hover .cat-icon-ring {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
}
.cat-checkbox.checked .cat-icon-ring {
  border-color: var(--accent);
  background: rgba(208,0,0,0.1);
  color: var(--fg);
}
.cat-checkbox.checked .cat-checkbox-label {
  color: var(--fg);
}

/* Language Checkboxes */
.language-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lang-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.lang-checkbox input { display: none; }
.lang-checkbox:hover { border-color: rgba(255,255,255,0.15); color: var(--fg); }
.lang-checkbox.checked {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  color: var(--fg);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}

.btn-save { padding: 10px 28px; font-size: 14px; }

/* ─── LOADING SCREEN ─────────────────────────────────────────── */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--bg);
  transition: opacity 0.6s var(--ease);
}
.loading-screen.hide { opacity: 0; pointer-events: none; }

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loader-logo {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}

.loader-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.loader-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--fg);
  letter-spacing: 0.08em;
}

.loader-bar {
  width: 120px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
  margin-top: 8px;
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  animation: loadBar 1.5s var(--ease2) forwards;
}
@keyframes loadBar { from { width: 0; } to { width: 100%; } }

/* ─── LOGIN SCREEN ───────────────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.5s;
}
.login-overlay.fade-out { opacity: 0; pointer-events: none; }

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 48px 44px;
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 2;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}

.login-logo-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
}

.login-logo-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.login-logo-text { display: flex; flex-direction: column; gap: 3px; }

.login-logo-main {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--fg);
  letter-spacing: 0.03em;
}

.login-logo-sub {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}

.login-divider {
  height: 1px;
  background: var(--line);
  margin-bottom: 28px;
}

.login-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.6;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.login-field { display: flex; flex-direction: column; gap: 6px; }

.login-field label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.login-field-icon {
  position: absolute;
  left: 14px;
  width: 15px; height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

.login-input-wrapper input {
  width: 100%;
  padding: 13px 44px 13px 42px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input-wrapper input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.login-input-wrapper input::placeholder { color: var(--text-muted); }

.toggle-pw {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  transition: color 0.2s;
}
.toggle-pw svg { width: 16px; height: 16px; }
.toggle-pw:hover { color: var(--fg); }

.login-error {
  font-size: 12px;
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}
.btn-login svg { width: 16px; height: 16px; }
.btn-login:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(208,0,0,0.4);
}
.btn-login:active { transform: translateY(0); }

.login-forgot {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 14px;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.login-forgot:hover { color: var(--fg); }

.login-hint {
  margin-top: 20px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.7;
}
.login-hint code {
  font-family: 'Courier New', monospace;
  background: rgba(208,0,0,0.1);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.login-bg-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(208,0,0,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* ─── TOAST NOTIFICATIONS ────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50000;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.35s var(--ease);
  max-width: 300px;
  backdrop-filter: blur(12px);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.1); }
.toast-error { border-color: rgba(208,0,0,0.3); background: rgba(208,0,0,0.1); }

/* ─── ERROR SCREEN ───────────────────────────────────────────── */
.error-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 16px;
  text-align: center;
}
.error-icon { font-size: 48px; color: var(--danger); }
.error-screen h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--fg);
}
.error-screen p { color: var(--text-secondary); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE – PWA MOBILE OPTIMIERUNG
   Breakpoints: 768px (tablet), 480px (mobile)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── MOBILE HEADER (nur auf ≤768px) ─────────────────────────────── */
.mobile-header {
  display: none;
}

/* ─── SIDEBAR CLOSE BUTTON (nur Mobile) ──────────────────────────── */
.sidebar-close {
  display: none;
}

/* ─── SIDEBAR BACKDROP ────────────────────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  transition: opacity 0.3s;
}
.sidebar-backdrop.show {
  opacity: 1;
}

/* ─── TABLET: 768px ──────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Layout: Stack statt Side-by-Side */
  #app {
    flex-direction: column;
    overflow: auto;
  }

  body {
    overflow: auto;
  }

  /* Mobile Header einblenden */
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    background: var(--bg-l);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 200;
    flex-shrink: 0;
  }

  .mobile-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
  }

  /* Hamburger Button */
  .hamburger {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .hamburger:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
  .hamburger svg { width: 20px; height: 20px; }

  /* Mobile Brand */
  .mobile-header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--fg);
  }
  .mobile-header-brand img { width: 22px; height: 22px; object-fit: contain; }

  /* Mobile Add Button */
  .btn-mobile-add {
    background: var(--accent);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    color: #fff;
    flex-shrink: 0;
  }
  .btn-mobile-add:hover { background: var(--accent-hover); transform: scale(1.05); }
  .btn-mobile-add:active { transform: scale(0.95); }
  .btn-mobile-add svg { width: 18px; height: 18px; }

  /* Sidebar: Slide-in Drawer */
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 300px;
    max-width: 85vw;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,0.6);
  }

  /* Backdrop einblenden */
  .sidebar-backdrop {
    display: block;
    pointer-events: none;
  }
  .sidebar-backdrop.show {
    pointer-events: all;
  }

  /* Close-Button in Sidebar */
  .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 1;
  }
  .sidebar-close:hover { background: rgba(255,255,255,0.1); color: var(--fg); }
  .sidebar-close svg { width: 14px; height: 14px; }

  /* Sidebar Logo: etwas Abstand für Close-Button */
  .sidebar-logo { padding-right: 52px; }

  /* Main: volle Breite */
  .main-content {
    width: 100%;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #view-container {
    height: auto;
    overflow-y: visible;
  }

  /* List Header: kompakter */
  .list-header {
    padding: 20px 16px 14px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .list-title h1 { font-size: 1.4rem; }

  .list-controls {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Desktop Add Button in List verstecken (haben den Mobile-Button) */
  .list-controls .btn-primary#btn-add {
    display: none;
  }

  /* Contact Grid: 1 Spalte */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Contact Card: Touch-optimiert */
  .contact-card {
    padding: 16px;
    min-height: 72px;
  }
  .contact-card:active { background: var(--bg-card-hover); }

  /* Detail View */
  .detail-view {
    padding: 16px;
    max-width: 100%;
  }

  .detail-hero {
    flex-direction: column;
    gap: 16px;
    padding: 20px 20px 16px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
    padding: 16px 20px;
  }
  .detail-section { padding: 16px 0; }
  .detail-section:nth-child(even) {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .detail-section:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .detail-section:last-child { border-bottom: none; }

  .detail-notes { padding: 16px 20px; }
  .detail-timestamps { padding: 12px 20px; }

  .detail-actions { flex-wrap: wrap; gap: 8px; }

  /* Form View */
  .form-view {
    padding: 16px;
    max-width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Form inputs: größere Touch-Targets */
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px 14px;
    font-size: 16px; /* verhindert iOS zoom */
  }

  /* Kategorie-Grid: 3 Spalten auf Tablet */
  .category-checkboxes {
    grid-template-columns: repeat(3, 1fr);
  }
  .cat-icon-ring { width: 62px; height: 62px; }
  .cat-icon-ring svg { width: 22px; height: 22px; }

  /* Sprach-Checkboxes: wrapping */
  .language-checkboxes { gap: 6px; }
  .lang-checkbox { font-size: 11px; padding: 5px 10px; }

  /* Form Actions: full width buttons */
  .form-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .form-actions .btn-primary,
  .form-actions .btn-secondary,
  .form-actions .btn-danger {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 14px;
  }

  /* Detail Header: Stack */
  .detail-header {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }

  /* Back + Actions: Touch-größen */
  .btn-back, .btn-secondary, .btn-danger {
    min-height: 44px;
  }

  /* Toasts: unten zentriert */
  #toast-container {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: 16px;
    left: 16px;
    align-items: center;
  }
  .toast { max-width: 100%; text-align: center; }

  /* Control-Selects */
  .control-select {
    font-size: 13px;
    padding: 8px 12px;
  }

  /* Login Card: volle Breite */
  .login-card {
    max-width: 100%;
    border-radius: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 28px;
  }
}

/* ─── MOBILE: 480px ──────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Kategorie-Grid: 2 Spalten auf kleinen Phones */
  .category-checkboxes {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .cat-icon-ring { width: 56px; height: 56px; }
  .cat-icon-ring svg { width: 20px; height: 20px; }
  .cat-checkbox-label { font-size: 9px; max-width: 70px; }

  /* Contact Card: kompakter */
  .contact-card { padding: 14px 12px; gap: 12px; }
  .card-avatar { width: 42px; height: 42px; }
  .avatar-initials { font-size: 14px; }
  .card-fullname { font-size: 13px; }

  /* List Header */
  .list-header { padding: 14px 12px 10px; }
  .list-title h1 { font-size: 1.25rem; }

  /* Detail */
  .detail-view { padding: 12px; }
  .detail-hero { padding: 16px; }
  .detail-avatar { width: 56px; height: 56px; font-size: 20px; }
  .detail-title h2 { font-size: 1.4rem; }

  /* Form */
  .form-view { padding: 12px; }
  .form-section { padding: 16px; }

  /* Selects */
  .control-select { display: none; }
  .list-controls { justify-content: flex-end; }

  /* Toast */
  #toast-container { right: 8px; left: 8px; }
}

/* ─── SAFE AREA (iPhone Notch / Dynamic Island) ───────────────────── */
@supports (padding: max(0px)) {
  .mobile-header {
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
  }
  .sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #toast-container {
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .main-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ─── TOUCH: Kein Hover-Flash auf Mobile ─────────────────────────── */
@media (hover: none) {
  .contact-card:hover { background: var(--bg); }
  .nav-item:hover { background: transparent; }
  .btn-primary:hover { transform: none; box-shadow: none; }
  .btn-login:hover { transform: none; box-shadow: none; }
}


/* ─── MOBILE SCROLL-CONTEXT KORREKTUR ─────────────────────────────── */
@media (max-width: 768px) {
  /* App füllt genau den Viewport – kein doppeltes Scrollen */
  html, body {
    height: 100%;
    overflow: hidden;
  }
  #app {
    height: 100%;
    overflow: hidden;
    flex-direction: column;
  }
  .mobile-header {
    flex-shrink: 0;
    position: relative; /* Kein sticky nötig – bleibt durch Flex-Layout oben */
  }
  .main-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  #view-container {
    height: auto;
    min-height: 100%;
    overflow-y: visible;
  }
}

/* ─── BRUTE-FORCE LOCKOUT UI ─────────────────────────────────────── */
.login-error {
  font-size: 12px;
  color: var(--danger);
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.5;
}

#login-password:disabled,
#btn-login:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN: USERNAME FELD + ICON
   ═══════════════════════════════════════════════════════════════════ */

.login-input-wrapper {
  position: relative;
}

.login-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Username input: Icon-Offset */
#login-username {
  padding-left: 40px;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR: USER BAR
   ═══════════════════════════════════════════════════════════════════ */

.sidebar-io {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.sidebar-io .btn-sidebar {
  flex: 1;
}

.user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 0.2s;
}

.user-bar-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff6b6b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.user-bar-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-bar-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-bar-role {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-bar-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-icon {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}
.btn-icon svg { width: 14px; height: 14px; }
.btn-icon:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border);
  color: var(--fg);
}
.btn-icon-danger:hover {
  background: rgba(208,0,0,0.12);
  border-color: rgba(208,0,0,0.3);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS VIEW
   ═══════════════════════════════════════════════════════════════════ */

.settings-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px 40px;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.settings-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.settings-header h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--fg);
  margin: 0;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
}

.settings-tab {
  background: none;
  border: none;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.settings-tab.active {
  background: var(--accent);
  color: #fff;
}
.settings-tab:hover:not(.active) {
  color: var(--fg);
  background: rgba(255,255,255,0.06);
}

.settings-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(208,0,0,0.08);
  border: 1px solid rgba(208,0,0,0.25);
  border-radius: var(--radius);
  color: #ff6b6b;
  font-size: 13px;
  margin-bottom: 24px;
  line-height: 1.5;
}
.settings-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.settings-body { display: flex; flex-direction: column; gap: 20px; }

.settings-panel { display: none; flex-direction: column; gap: 16px; }
.settings-panel.active { display: flex; }

.settings-card {
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}
.settings-card-header > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent);
}

.settings-user-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff6b6b);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-username {
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
}

.settings-user-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.settings-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 18px 24px 0;
  margin: 0;
}

.settings-form {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-feedback {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
}
.settings-feedback.error {
  background: rgba(208,0,0,0.1);
  border: 1px solid rgba(208,0,0,0.25);
  color: #ff6b6b;
}
.settings-feedback.success {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
  color: #4ade80;
}

.label-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.btn-save {
  align-self: flex-start;
  padding: 10px 22px;
}

/* ─── USER LIST ──────────────────────────────────────────────────── */

.user-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}

.user-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.user-list-item:last-child { border-bottom: none; }

.user-list-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b9cf6, #4ecdc4);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-list-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-list-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-list-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.user-self-tag {
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.btn-sm {
  padding: 6px 10px;
  font-size: 12px;
  gap: 5px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-sm svg { width: 13px; height: 13px; }

/* ─── WARNING COLOR ──────────────────────────────────────────────── */
:root { --warning: #f59e0b; }

/* ─── RESPONSIVE: SETTINGS ──────────────────────────────────────── */
@media (max-width: 768px) {
  .settings-view {
    padding: 16px;
  }
  .settings-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .settings-card-header { padding: 16px; }
  .settings-form { padding: 12px 16px 20px; }
  .settings-card-title { padding: 14px 16px 0; }
  .user-list { padding: 8px 16px; }
  .settings-tabs { width: 100%; }
  .settings-tab { flex: 1; text-align: center; }
  .btn-save { width: 100%; justify-content: center; }
}


/* ─── USER BAR FIX: overflow + flex-width ────────────────────────── */
.sidebar-footer {
  overflow: hidden;          /* kein overflow rechts */
  min-width: 0;
}

.user-bar {
  width: 100%;
  box-sizing: border-box;    /* padding zählt zur Breite */
  min-width: 0;
  padding: 8px 10px;         /* etwas kompakter */
}

.user-bar-info {
  flex: 1;
  min-width: 0;              /* erlaubt text-overflow */
  overflow: hidden;
}

.user-bar-text {
  min-width: 0;
  overflow: hidden;
}

.user-bar-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

.user-bar-role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.user-bar-actions {
  flex-shrink: 0;            /* Icons schrumpfen nie */
  display: flex;
  gap: 2px;
}

.user-avatar-sm {
  flex-shrink: 0;            /* Avatar schrumpft nie */
}

/* Export/Import nebeneinander, exakt auf Sidebar-Breite */
.sidebar-io {
  display: flex;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

/* ─── SIDEBAR FOOTER: NEUE STRUKTUR ─────────────────────────────── */

/* User-Info-Zeile (oben) */
.user-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px 10px 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  min-width: 0;
}

/* 4 gleich große Buttons in einer Reihe */
.sidebar-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5px;
  width: 100%;
}

/* Alle Sidebar-Buttons gleiche Größe */
.btn-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  font-size: 10px;
  min-height: 54px;
  box-sizing: border-box;
}

.btn-sidebar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-sidebar-label {
  font-size: 9px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Logout-Button: rötlich */
.btn-sidebar-logout {
  color: #e05555;
}
.btn-sidebar-logout:hover {
  background: rgba(208,0,0,0.12);
  border-color: rgba(208,0,0,0.25);
  color: #ff6b6b;
}

/* Sidebar-IO-Klasse nicht mehr nötig */
.sidebar-io { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   DEMO / AUDIO PLAYER
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DOC / PDF SECTION ─────────────────────────────────────────────────── */
.doc-section {
  border-top: 1px solid var(--line);
  padding: 20px 32px;
}
.doc-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.doc-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  flex: 1;
}
.doc-section-title svg { width: 14px; height: 14px; }
.doc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--accent);
  color: #000;
  font-size: 10px;
  font-weight: 700;
}
.doc-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.doc-upload-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.doc-upload-btn svg { width: 13px; height: 13px; }

.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  transition: background 0.2s;
}
.doc-item:hover { background: rgba(255,255,255,0.07); }
.doc-item-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); opacity: 0.8; }
.doc-item-meta { flex: 1; min-width: 0; }
.doc-item-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-item-size { font-size: 11px; color: var(--text-muted); }
.doc-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.doc-btn svg { width: 14px; height: 14px; }
.doc-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
.doc-btn-view:hover { color: var(--accent); }
.doc-btn-delete:hover { background: rgba(255,107,107,0.15); color: #ff6b6b; }

/* ─── DEMO SECTION ──────────────────────────────────────────────────────── */
.demo-section {
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  margin-top: 8px;
}

.demo-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.demo-section-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}
.demo-section-title svg { width: 15px; height: 15px; }

.demo-count {
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 50px;
  letter-spacing: 0;
}

.demo-upload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.demo-upload-btn svg { width: 14px; height: 14px; }
.demo-upload-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Drop Zone */
.demo-drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  transition: all 0.2s;
  min-height: 60px;
}
.demo-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(208,0,0,0.06);
}

.demo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px;
  color: var(--text-muted);
  font-size: 12px;
}
.demo-empty svg { width: 28px; height: 28px; opacity: 0.4; }

/* Demo List */
.demo-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.demo-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 6px;
  transition: border-color 0.2s;
}
.demo-item:hover { border-color: rgba(255,255,255,0.15); }

.demo-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  gap: 10px;
}

.demo-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.demo-icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

.demo-item-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.demo-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-size {
  font-size: 10px;
  color: var(--text-muted);
}

.demo-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.demo-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s;
}
.demo-btn svg { width: 14px; height: 14px; }
.demo-btn:hover { background: rgba(255,255,255,0.08); color: var(--fg); border-color: var(--border); }
.demo-btn-delete:hover { background: rgba(208,0,0,0.12); color: #ff6b6b; border-color: rgba(208,0,0,0.2); }
.demo-btn-copy:hover  { background: rgba(91,156,246,0.12); color: #5b9cf6; border-color: rgba(91,156,246,0.2); }
.demo-btn-download:hover { background: rgba(34,197,94,0.1); color: #4ade80; border-color: rgba(34,197,94,0.2); }

/* HTML5 Audio Player – styled */
.demo-player {
  width: 100%;
  height: 36px;
  display: block;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--line);
  accent-color: var(--accent);
}
.demo-player::-webkit-media-controls-panel {
  background: rgba(0,0,0,0.3);
}

/* Upload Progress */
.demo-upload-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(208,0,0,0.06);
  border: 1px solid rgba(208,0,0,0.15);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-secondary);
}

.demo-progress-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.demo-progress-bar {
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
}

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .demo-item-header { flex-wrap: wrap; }
  .demo-player { height: 40px; }
}

/* ─── DEMO MULTI-SELECT ─────────────────────────────────────────── */

/* Auswählen-Button im Header */
.demo-select-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.demo-select-toggle svg { width: 12px; height: 12px; }
.demo-select-toggle:hover { color: var(--fg); border-color: rgba(255,255,255,0.2); }
.demo-select-toggle.active { color: var(--accent); border-color: var(--accent); background: rgba(208,0,0,0.08); }

/* Checkbox – standardmäßig ausgeblendet */
.demo-checkbox-wrap {
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
}
.demo-checkbox { display: none; }
.demo-checkbox-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: transparent;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.demo-checkbox:checked + .demo-checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}
.demo-checkbox:checked + .demo-checkbox-box::after {
  content: '';
  width: 10px; height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  display: block;
}

/* Select-Mode: Checkboxen anzeigen, normale Actions ausblenden */
.demo-select-mode .demo-checkbox-wrap { display: flex; }
.demo-select-mode .demo-item-actions  { opacity: 0; pointer-events: none; }
.demo-select-mode .demo-item          { cursor: pointer; }
.demo-select-mode .demo-item:hover    { border-color: var(--accent); }
.demo-select-mode .demo-item.selected { background: rgba(208,0,0,0.06); border-color: rgba(208,0,0,0.3); }

/* Aktionsleiste (Select Bar) */
.demo-select-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(208,0,0,0.06);
  border: 1px solid rgba(208,0,0,0.2);
  border-radius: var(--radius);
  animation: slideDown 0.15s ease;
}
.demo-select-mode + .demo-select-bar,
.demo-select-mode .demo-select-bar,
.demo-section.demo-select-mode > .demo-select-bar { display: flex; }

/* Fix: Bar ist Geschwister-Element der section */
#demo-section-*:has(.demo-select-mode) .demo-select-bar { display: flex; }

.demo-select-bar-left,
.demo-select-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.demo-select-count {
  font-size: 12px;
  color: var(--text-secondary);
}

.demo-select-action {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s;
}
.demo-select-action:hover:not(:disabled) { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.demo-select-action:disabled { opacity: 0.35; cursor: not-allowed; }

.demo-select-action-delete {
  background: rgba(208,0,0,0.08);
  border-color: rgba(208,0,0,0.25);
  color: #ff6b6b;
}
.demo-select-action-delete:hover:not(:disabled) { background: rgba(208,0,0,0.18); border-color: rgba(208,0,0,0.4); }

.demo-select-action-cancel { color: var(--text-secondary); }
.demo-select-action-cancel:hover { color: var(--fg); }

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

/* ─── Kunden-Freigabe Toggle ──────────────────────────────────────────────── */
.btn-client-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.btn-client-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-client-toggle:hover {
  border-color: rgba(255,215,0,0.4);
  background: rgba(255,215,0,0.08);
  color: rgba(255,255,255,0.85);
}
.btn-client-toggle.active {
  border-color: #4ade80;
  background: rgba(74,222,128,0.12);
  color: #4ade80;
}

/* ─── CALENDAR LAYOUT WITH SIDEBAR ─────────────────────────────────────────── */
.calendar-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .calendar-layout { grid-template-columns: 1fr; }
}

.calendar-sidebar {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 200px;
}

.cal-sidebar-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 12px;
  color: rgba(255,255,255,0.3);
  text-align: center;
}
.cal-sidebar-hint svg { width: 32px; height: 32px; opacity: 0.4; }
.cal-sidebar-day { padding: 16px; }
.cal-sidebar-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.cal-sidebar-section {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 12px 0 8px;
}

.cal-sidebar-event {
  background: rgba(99,102,241,0.08);
  border-left: 3px solid var(--event-color, #6366f1);
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.cal-sidebar-event-title { font-size: 13px; font-weight: 600; color: #fff; }
.cal-sidebar-event-time  { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.cal-sidebar-event-loc   { font-size: 11px; color: rgba(255,255,255,0.4); display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.cal-sidebar-event-loc svg { width: 10px; height: 10px; flex-shrink: 0; }
.cal-sidebar-event-actions { display: flex; gap: 8px; margin-top: 6px; }
.cal-sidebar-event-actions button {
  font-size: 11px;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: rgba(255,255,255,0.6);
  padding: 2px 8px;
  cursor: pointer;
  transition: all .15s;
}
.cal-sidebar-event-actions button:hover { border-color: var(--accent); color: var(--accent); }

.cal-sidebar-task {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cal-task-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.cal-task-check input[type=checkbox] { cursor: pointer; accent-color: var(--accent); }

/* Calendar Event Chips */
.cal-event-chip {
  background: var(--event-color, #6366f1);
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
  transition: opacity .15s;
}
.cal-event-chip:hover { opacity: 1; }

.cal-week-event {
  background: var(--event-color, #6366f1);
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: opacity .15s;
}
.cal-week-event:hover { opacity: 0.85; }
.cal-chip-icon { width: 10px; height: 10px; flex-shrink: 0; }

/* Calendar selected cell */
.cal-cell.cal-selected { background: rgba(99,102,241,0.12); border-color: var(--accent) !important; }

/* ─── ACTIVITY EDIT BUTTON ──────────────────────────────────────────────────── */
.timeline-actions { display: flex; gap: 4px; flex-shrink: 0; }
.timeline-edit, .timeline-del {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.timeline-edit:hover { color: var(--accent); border-color: var(--accent); }
.timeline-del:hover  { color: #ef4444;     border-color: #ef4444; }
.timeline-edit svg, .timeline-del svg { width: 14px; height: 14px; }

.ap-actions { display: flex; gap: 4px; }
.ap-edit, .ap-del {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: rgba(255,255,255,0.3); cursor: pointer;
  transition: color .15s;
}
.ap-edit:hover { color: var(--accent); }
.ap-del:hover  { color: #ef4444; }
.ap-edit svg, .ap-del svg { width: 12px; height: 12px; }

/* ─── EVENT FORM STYLES ─────────────────────────────────────────────────────── */
.event-type-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.event-type-option { display: none; }
.event-type-option + span {
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  color: rgba(255,255,255,0.6);
}
.event-type-option:checked + span {
  background: var(--ev-type-color, #6366f1);
  border-color: transparent;
  color: #fff;
}
label.event-type-option { display: flex; align-items: center; cursor: pointer; }

/* Color picker */
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch { display: none; }
.color-swatch + span {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: block;
  transition: transform .15s, border-color .15s;
}
.color-swatch:checked + span { border-color: #fff; transform: scale(1.2); }
label.color-swatch { display: flex; align-items: center; cursor: pointer; }

/* ─── FIRMEN CONTACTS SECTION ───────────────────────────────────────────────── */
.company-contacts-section { margin-top: 24px; }
.section-header-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.section-header-row h3 { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7); }
.count-badge {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
}
.company-contacts-list { display: flex; flex-direction: column; gap: 6px; }
.company-contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.company-contact-row:hover { background: rgba(255,255,255,0.06); border-color: var(--accent); }
.co-contact-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
  overflow: hidden; flex-shrink: 0;
}
.co-contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.co-contact-info { flex: 1; min-width: 0; }
.co-contact-name { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.co-contact-email { display: block; font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.status-active   { background: #22c55e; }
.status-dot.status-inactive { background: #f59e0b; }
.status-dot.status-blacklist{ background: #ef4444; }
.company-industry-label { display: inline-block; font-size: 12px; color: rgba(255,255,255,0.45); margin-left: 8px; }

/* ─── REPORTS ───────────────────────────────────────────────────────────────── */
.reports-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.report-kpi {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  border-left: 3px solid var(--kpi-color, var(--accent));
}
.report-kpi-value { font-size: 22px; font-weight: 800; color: var(--kpi-color, #fff); line-height: 1; margin-bottom: 4px; }
.report-kpi-label { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 500; }

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.report-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
}
.report-card-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Bar chart */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-chart-row { display: flex; align-items: center; gap: 10px; }
.bar-chart-label {
  font-size: 12px; color: rgba(255,255,255,0.6);
  width: 100px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-chart-bar-wrap { flex: 1; display: flex; align-items: center; gap: 8px; }
.bar-chart-bar { height: 18px; border-radius: 4px; min-width: 2px; transition: width .4s ease; }
.bar-chart-val { font-size: 12px; color: rgba(255,255,255,0.5); flex-shrink: 0; }

/* Line / column chart */
.line-chart { overflow: hidden; }
.line-chart-bars {
  display: flex; align-items: flex-end; gap: 4px; height: 120px;
}
.line-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.line-chart-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.line-chart-bar {
  width: 100%; background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height .4s ease;
  opacity: 0.85;
}
.line-chart-label { font-size: 10px; color: rgba(255,255,255,0.4); }

/* Donut chart */
.donut-chart-wrap { display: flex; align-items: center; gap: 24px; }
.donut-chart { width: 150px; height: 150px; flex-shrink: 0; }
.donut-center-num  { font-size: 22px; font-weight: 800; fill: #fff; }
.donut-center-label{ font-size: 10px; fill: rgba(255,255,255,0.4); }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.7); }
.donut-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-count{ margin-left: auto; font-size: 13px; font-weight: 700; color: #fff; }


/* ─── SPRINT A: GLOBAL SEARCH OVERLAY ──────────────────────────── */
.search-wrapper { position: relative; }
.search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px; padding: 1px 5px; font-size: 11px; color: var(--text-muted);
  pointer-events: none; font-family: var(--font-body);
}
#search-input:focus ~ .search-kbd { display: none; }
.global-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  z-index: 9999;
  overflow: hidden;
  max-height: 440px;
  overflow-y: auto;
}
.gsearch-loading, .gsearch-empty {
  padding: 16px 16px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.gsearch-group-label {
  padding: 8px 16px 4px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.gsearch-group-label:first-child { border-top: none; }
.gsearch-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s;
}
.gsearch-item:hover { background: rgba(255,255,255,0.05); }
.gsearch-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--accent);
  flex-shrink: 0;
}
.gsearch-icon { font-size: 16px; flex-shrink: 0; width: 28px; text-align: center; }
.gsearch-name { font-size: 13px; font-weight: 500; flex: 1; }
.gsearch-badge {
  font-size: 10px; padding: 2px 7px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ─── NOTIFICATIONS ────────────────────────────────────────────── */
.btn-notif { position: relative !important; }
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  width: 17px; height: 17px;
  background: var(--danger);
  border-radius: 50%;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  border: 2px solid var(--bg-l);
  pointer-events: none;
}
.notif-panel {
  position: fixed;
  bottom: 80px; left: 16px;
  width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: 10000;
  overflow: hidden;
}
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
}
.notif-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 18px; line-height: 1;
  padding: 0 4px;
}
.notif-close:hover { color: var(--fg); }
.notif-panel-body { max-height: 300px; overflow-y: auto; }
.notif-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--text-muted); }
.notif-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.notif-item:last-child { border-bottom: none; }
.notif-label { font-size: 13px; }
.notif-date { font-size: 11px; color: var(--text-muted); }
.notif-overdue_task .notif-label { color: var(--danger); }
.notif-due_today .notif-label { color: var(--warning); }
.notif-birthday .notif-label { color: #a78bfa; }
.notif-upcoming_event .notif-label { color: var(--success); }

/* ─── BATCH TOOLBAR ────────────────────────────────────────────── */
.batch-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(208,0,0,0.08);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.batch-toolbar span { font-size: 13px; font-weight: 600; color: var(--accent); flex: 1; }
.contact-card.batch-selected {
  border-color: var(--accent) !important;
  background: rgba(208,0,0,0.05) !important;
}
.batch-cb-wrap {
  position: absolute; top: 10px; left: 10px;
  z-index: 2;
}
.batch-cb-wrap input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent);
}
.contact-card { position: relative; }

/* ─── STAR PICKER ──────────────────────────────────────────────── */
.star-picker {
  display: flex; gap: 4px;
  margin-top: 4px;
}
.star-label {
  cursor: pointer;
  display: flex;
}
.star-label input { display: none; }
.star-svg {
  width: 22px; height: 22px;
  color: var(--warning);
  transition: fill .15s, transform .15s;
}
.star-label:hover .star-svg { transform: scale(1.2); }
.star-svg.filled { fill: var(--warning); }

/* ─── DETAIL RATING ────────────────────────────────────────────── */
.detail-rating { display: flex; gap: 2px; margin-top: 4px; }

/* ─── TAG CHIPS ────────────────────────────────────────────────── */
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-chip {
  padding: 3px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--text-secondary);
}

/* ─── COMPANY LINK ─────────────────────────────────────────────── */
.detail-company-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .15s;
}
.detail-company-link:hover { color: var(--fg); }

/* ─── VCARD BUTTON STYLE ───────────────────────────────────────── */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.05); color: var(--fg); }

/* ─── CARD RATING ──────────────────────────────────────────────── */
.card-rating { display: flex; gap: 1px; margin-bottom: 4px; }

/* ─── PRINT / PDF EXPORT ────────────────────────────────────────────────────── */
@media print {
  /* Hide all navigation and controls */
  .sidebar, .mobile-header, .sidebar-backdrop,
  .detail-actions, .btn-back, .btn-add, .btn-mobile-add,
  .global-search-dropdown, .notif-panel, .batch-toolbar,
  .list-controls, .nav-controls,
  .contact-tabs .tab-btn,
  .upload-zone, .btn-upload-photo, .card-actions,
  #btn-print-contact { display: none !important; }

  /* Full width detail view */
  .main-content { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .detail-view { width: 100% !important; max-width: 100% !important; padding: 20px !important; box-shadow: none !important; }
  .app { display: block !important; }

  /* Print-friendly colors */
  body { background: white !important; color: #111 !important; }
  .detail-view, .detail-header { background: white !important; border: none !important; }
  .detail-hero { background: #f5f5f5 !important; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
  .detail-photo { border: 2px solid #ddd !important; box-shadow: none !important; }

  /* Show ALL tab content when printing */
  .tab-panel { display: block !important; page-break-inside: avoid; margin-bottom: 16px; }
  .tab-panel-label { font-weight: 700; font-size: 11pt; border-bottom: 1px solid #ccc; padding-bottom: 4px; margin-bottom: 8px; color: #222; }

  /* Typography */
  .detail-name { font-size: 22pt !important; color: #111 !important; }
  .detail-stage { font-size: 14pt !important; }
  .chip, .tag-chip { background: #eee !important; color: #333 !important; border: 1px solid #ccc !important; }
  .star-filled { color: #f59e0b !important; }

  /* Page breaks */
  .detail-section { page-break-inside: avoid; }

  /* Footer with URL */
  @page { margin: 1.5cm; }
}

/* ─── DOCUMENT TYPE BADGE & SELECTOR ────────────────────────────────────────── */
.doc-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-type-select {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  min-width: 110px;
}
.doc-type-select:hover { border-color: rgba(255,255,255,0.2); }
.doc-type-select option { background: #1a1a2e; color: #e0e0e0; }

/* ─── ACTIVITIES FILTER BAR ─────────────────────────────────────────────────── */
.activities-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.activities-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.activities-search-wrap svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.activities-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.activities-search-input:focus {
  border-color: rgba(99,102,241,0.5);
  background: rgba(255,255,255,0.08);
}
.activities-search-input::placeholder { color: var(--text-muted); }

/* ─── ENTITY PICKER AUTOCOMPLETE ──────────────────────────────────────────── */
.picker-group {
  position: relative;
}
.picker-input {
  width: 100%;
}
.picker-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  opacity: 0.7;
}
.entity-picker-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--surface-2, #1e2030);
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  list-style: none;
  margin: 0;
  padding: 4px;
  z-index: 9999;
  max-height: 240px;
  overflow-y: auto;
}
.ep-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
}
.ep-item:hover, .ep-item.active {
  background: rgba(99,102,241,0.15);
}
.ep-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}
.ep-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ─── KALENDER-ERINNERUNGS-ALERTS ─────────────────────────────────────────── */
.cal-reminder-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 4px;
}
.cal-reminder-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  animation: fadeInUp 0.3s ease;
}
.cal-reminder-chip--danger {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
}
.cal-reminder-chip--warn {
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
  color: #fbbf24;
}
.cal-reminder-chip--info {
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.3);
  color: #a5b4fc;
}
.cal-reminder-chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ─── CLIENT PORTAL / VIEWER-MODUS ────────────────────────────────────────── */
.viewer-portal {
  min-height: 100vh;
  background: var(--bg-primary, #0d0f1a);
  color: var(--text-primary, #e2e8f0);
  font-family: var(--font-sans, 'Inter', sans-serif);
}
.viewer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  background: var(--surface-1, #141624);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 100;
}
.viewer-logo {
  font-weight: 800;
  font-size: 18px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}
.viewer-subtitle {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  margin-left: auto;
}
.viewer-body {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.viewer-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 24px 0 12px;
}
.viewer-talent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.viewer-talent-card {
  background: var(--surface-1, #141624);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.viewer-talent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.viewer-talent-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(99,102,241,0.15);
  border: 2px solid rgba(99,102,241,0.3);
}
.viewer-talent-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
}
.viewer-talent-cat {
  font-size: 12px;
  color: var(--text-muted);
}
.viewer-talent-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.viewer-tag {
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  color: #a5b4fc;
}
.viewer-contact-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.viewer-contact-row a {
  color: #a5b4fc;
  text-decoration: none;
}
.viewer-contact-row a:hover { text-decoration: underline; }

/* ─── VIEWER LOGIN ──────────────────────────────────────────────────────────── */
.viewer-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary, #0d0f1a);
}
.viewer-login-box {
  background: var(--surface-1, #141624);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 40px;
  width: 360px;
  text-align: center;
}
.viewer-login-title {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.viewer-login-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUBSPOT FEATURES – CMA Extension Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── AI ASSISTANT ──────────────────────────────────────────────────────────── */

.ai-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, var(--accent));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(99,102,241,0.4), 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.ai-fab:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(99,102,241,0.5); }
.ai-fab.active { background: linear-gradient(135deg, var(--accent), #6366f1); }
.ai-fab-icon { font-size: 22px; color: #fff; }

.ai-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  background: var(--bg-l);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  box-shadow: -12px 0 48px rgba(0,0,0,0.4);
}
.ai-sidebar.open { transform: translateX(0); }

.ai-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-card);
}
.ai-sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.ai-icon { color: #6366f1; font-size: 18px; }
.ai-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #6366f1, var(--accent));
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}
.ai-sidebar-actions { display: flex; gap: 6px; }
.ai-clear-btn, .ai-close-btn {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.ai-clear-btn:hover, .ai-close-btn:hover { background: rgba(255,255,255,0.1); color: var(--fg); }

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  gap: 10px;
}
.ai-welcome-icon { font-size: 36px; color: #6366f1; }
.ai-welcome h3 { font-size: 15px; font-weight: 600; color: var(--fg); }
.ai-welcome p  { font-size: 12px; color: var(--text-secondary); }
.ai-suggestions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }
.ai-suggestion {
  padding: 10px 14px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.ai-suggestion:hover { background: rgba(99,102,241,0.15); color: var(--fg); }

.ai-message { display: flex; }
.ai-message--user { justify-content: flex-end; }
.ai-message--assistant { justify-content: flex-start; }

.ai-message-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.ai-message--user .ai-message-bubble {
  background: linear-gradient(135deg, #6366f1, var(--accent));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-message--assistant .ai-message-bubble {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.ai-msg-icon { color: #6366f1; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.ai-message-text strong { font-weight: 600; }
.ai-message-text code {
  background: rgba(255,255,255,0.1);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
}

.ai-typing-dots { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.ai-typing-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6366f1;
  animation: aiTyping 1.2s infinite;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTyping {
  0%, 60%, 100% { opacity: 0.2; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.3); }
}

.ai-input-area {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.ai-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  transition: border-color 0.2s;
}
.ai-input-wrap:focus-within { border-color: rgba(99,102,241,0.4); }
.ai-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  resize: none;
  outline: none;
  min-height: 20px;
  max-height: 120px;
  line-height: 1.5;
  font-family: var(--font-body);
}
.ai-input::placeholder { color: var(--text-muted); }
.ai-send-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, var(--accent));
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.ai-send-btn:hover { opacity: 0.85; }
.ai-footer-note { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 6px; }

/* ── LEAD SCORING ──────────────────────────────────────────────────────────── */

.lead-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
}
.lead-score-badge svg { flex-shrink: 0; }
.score-hot  { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.score-warm { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.score-cold { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.25); }

.scoring-filter-row { display: flex; gap: 8px; padding: 0 32px 20px; flex-wrap: wrap; }

.scoring-list {
  padding: 0 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.score-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.score-row:hover { background: var(--bg-card-hover); border-color: rgba(255,255,255,0.12); }
.score-avatar {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.score-info { flex: 1; min-width: 0; }
.score-name { font-weight: 600; font-size: 13px; color: var(--fg); }
.score-breakdown { font-size: 11px; color: var(--text-muted); display: flex; gap: 10px; margin-top: 3px; }
.score-bar-wrap { width: 120px; height: 6px; background: var(--border); border-radius: 3px; flex-shrink: 0; }
.score-bar { height: 100%; border-radius: 3px; transition: width 0.6s var(--ease); }
.score-value { font-size: 18px; font-weight: 700; width: 36px; text-align: right; }
.score-tier {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 100px;
  width: 52px;
  text-align: center;
}
.score-tier--hot  { background: rgba(239,68,68,0.15); color: #ef4444; }
.score-tier--warm { background: rgba(245,158,11,0.15); color: #f59e0b; }
.score-tier--cold { background: rgba(99,102,241,0.12); color: #818cf8; }

/* ── REPORTS & ANALYTICS ───────────────────────────────────────────────────── */

.report-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 32px 28px;
}
.report-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.report-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--kpi-color, #6366f1);
}
.report-kpi-icon { color: var(--kpi-color, #6366f1); }
.report-kpi-icon svg { width: 20px; height: 20px; }
.report-kpi-value { font-size: 24px; font-weight: 700; color: var(--fg); }
.report-kpi-label { font-size: 12px; color: var(--text-secondary); }

.report-section {
  margin: 0 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.report-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.report-section-title svg { width: 16px; height: 16px; }

/* Forecast Chart */
.forecast-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 24px 20px 16px;
  min-height: 180px;
}
.forecast-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.forecast-bars { width: 100%; display: flex; gap: 4px; align-items: flex-end; height: 120px; }
.forecast-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.6s var(--ease);
}
.forecast-bar--pipe { background: #6366f1; opacity: 0.6; }
.forecast-bar--won  { background: #22c55e; }
.forecast-label { font-size: 11px; color: var(--text-muted); }
.forecast-count { font-size: 10px; color: var(--text-dim); }
.forecast-legend {
  display: flex;
  gap: 20px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  align-items: center;
}
.forecast-legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.forecast-winrate { margin-left: auto; color: var(--text-secondary); }
.forecast-winrate strong { color: var(--fg); }

/* Heatmap */
.heatmap-container { padding: 20px; overflow-x: auto; }
.heatmap-grid { display: flex; gap: 3px; }
.heatmap-week { display: flex; flex-direction: column; gap: 3px; }
.heatmap-cell {
  width: 11px; height: 11px;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.heatmap-cell:hover { outline: 1px solid var(--fg); }
.heatmap-cell--0 { background: var(--bg-elevated); }
.heatmap-cell--1 { background: #1e3a5f; }
.heatmap-cell--2 { background: #1d4ed8; }
.heatmap-cell--3 { background: #2563eb; }
.heatmap-cell--4 { background: #60a5fa; }
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Reports Grid */
.reports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 32px 32px;
}
.report-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.report-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 16px;
}
.report-card h3 svg { width: 16px; height: 16px; }
.report-list { display: flex; flex-direction: column; gap: 10px; }
.report-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.report-rank {
  width: 20px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}
.report-name { flex: 1; color: var(--fg); }
.report-count { color: var(--text-secondary); font-size: 12px; }

.report-stage-list { display: flex; flex-direction: column; gap: 8px; }
.report-stage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.report-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.report-stage-name { flex: 1; color: var(--text-secondary); text-transform: capitalize; }
.report-stage-count { color: var(--text-muted); font-size: 11px; }
.report-stage-value { color: var(--fg); font-weight: 600; }

/* ── EMAIL TEMPLATES ───────────────────────────────────────────────────────── */

.template-group { padding: 0 32px 24px; }
.template-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.template-list { display: flex; flex-direction: column; gap: 10px; }
.template-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: border-color 0.2s;
}
.template-card:hover { border-color: rgba(255,255,255,0.15); }
.template-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.template-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.template-actions { display: flex; gap: 8px; }
.template-subject { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.template-preview {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.template-footer { }
.template-placeholders {
  font-size: 10px;
  color: var(--text-dim);
  background: var(--bg-elevated);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: monospace;
}
.template-picker { margin-bottom: 16px; }
.template-picker label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; display: block; }
.template-picker select { width: 100%; }

/* ── WORKFLOWS ─────────────────────────────────────────────────────────────── */

.workflow-list { padding: 0 32px 32px; display: flex; flex-direction: column; gap: 12px; }
.workflow-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s;
}
.workflow-card:hover { border-color: rgba(255,255,255,0.15); }
.workflow-card--inactive { opacity: 0.55; }

.workflow-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.workflow-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.workflow-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.workflow-trigger-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(99,102,241,0.12);
  color: #818cf8;
  border: 1px solid rgba(99,102,241,0.2);
}
.workflow-controls { display: flex; align-items: center; gap: 8px; }
.workflow-status { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; }
.status-active  { background: rgba(34,197,94,0.12); color: #22c55e; }
.status-inactive{ background: rgba(255,255,255,0.06); color: var(--text-muted); }

.workflow-card-body { padding: 14px 20px; }
.workflow-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}
.workflow-when, .workflow-then {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  white-space: nowrap;
}
.workflow-last-run {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
}

/* ── MODAL ─────────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s var(--ease);
  overflow: hidden;
}
.modal--large { max-width: 720px; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-header h2 svg { width: 18px; height: 18px; }
.modal-close {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.modal-close:hover { background: rgba(255,255,255,0.1); color: var(--fg); }
.modal-body { padding: 24px; overflow-y: auto; }

/* ── SPINNER ───────────────────────────────────────────────────────────────── */

.spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: var(--text-muted);
  font-size: 13px;
}
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── GENERAL HELPERS ───────────────────────────────────────────────────────── */

.reports-loading { padding: 32px; }
.empty-state-sm {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* form-hint */
.form-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
  font-family: monospace;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .report-kpi-row { grid-template-columns: 1fr 1fr; }
  .reports-grid { grid-template-columns: 1fr; }
  .ai-sidebar { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   INACTIVITY TIMER – Warning Banner & Logout Screen
   ════════════════════════════════════════════════════════════════════════════ */

#inactivity-warning {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  min-width: 360px;
  max-width: 520px;
  background: rgba(15, 20, 35, 0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 16px;
  box-shadow:
    0 -4px 40px rgba(245, 158, 11, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.6);
  transition: bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  opacity: 0;
}

#inactivity-warning.inactivity-warning--visible {
  bottom: 24px;
  opacity: 1;
}

#inactivity-warning.inactivity-warning--urgent {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow:
    0 -4px 40px rgba(239, 68, 68, 0.25),
    0 8px 32px rgba(0, 0, 0, 0.6);
  animation: inactivity-pulse 1s ease-in-out infinite;
}

@keyframes inactivity-pulse {
  0%, 100% { box-shadow: 0 -4px 40px rgba(239, 68, 68, 0.2), 0 8px 32px rgba(0,0,0,0.6); }
  50%       { box-shadow: 0 -4px 40px rgba(239, 68, 68, 0.5), 0 8px 32px rgba(0,0,0,0.6); }
}

.inactivity-warning-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.inactivity-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
}

#inactivity-warning.inactivity-warning--urgent .inactivity-icon {
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.8));
}

.inactivity-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inactivity-text strong {
  color: #f8fafc;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.inactivity-text span {
  color: rgba(148, 163, 184, 0.9);
  font-size: 0.75rem;
}

#inactivity-countdown {
  color: #f59e0b;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.95rem;
}

#inactivity-warning.inactivity-warning--urgent #inactivity-countdown {
  color: #ef4444;
}

.inactivity-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.inactivity-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
}

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

/* Logout-Screen */
#inactivity-logout-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(7, 10, 22, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#inactivity-logout-screen.inactivity-logout--visible {
  opacity: 1;
}

.inactivity-logout-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px;
  background: rgba(15, 20, 40, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  animation: inactivity-logout-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes inactivity-logout-in {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

.inactivity-logout-icon {
  font-size: 3.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.4));
}

.inactivity-logout-inner h2 {
  color: #f8fafc;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.inactivity-logout-inner p {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.9rem;
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

.inactivity-logout-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-top: 8px;
}

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

/* ─── EMAIL COMPOSE MODAL ─────────────────────────────────────────────────── */

.btn-email-compose {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 2px 12px rgba(225,29,72,.35);
}
.btn-email-compose svg { width: 15px; height: 15px; }
.btn-email-compose:hover {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  box-shadow: 0 4px 20px rgba(225,29,72,.5);
  transform: translateY(-1px);
}

.email-compose-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .15s ease;
}

.email-compose-panel {
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: slideUp .2s ease;
  overflow: hidden;
}

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

.email-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.email-compose-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.email-compose-title svg { width: 18px; height: 18px; color: #e11d48; }

.email-compose-close {
  width: 32px; height: 32px;
  border: none;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  color: rgba(255,255,255,.6);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  line-height: 1;
}
.email-compose-close:hover { background: rgba(225,29,72,.2); color: #e11d48; }

.email-compose-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.email-compose-body::-webkit-scrollbar { width: 4px; }
.email-compose-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.compose-field { display: flex; flex-direction: column; gap: 6px; }

.compose-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compose-hint {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,.3);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

.compose-input,
.compose-select,
.compose-textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.compose-input:focus,
.compose-select:focus,
.compose-textarea:focus { border-color: #e11d48; background: rgba(255,255,255,.07); }

.compose-input[readonly] {
  color: rgba(255,255,255,.5);
  cursor: default;
}

.compose-select option { background: #1a1a2e; }

.compose-textarea {
  resize: vertical;
  min-height: 180px;
  line-height: 1.6;
}

.compose-preview-wrap {
  border: 1px solid rgba(225,29,72,.3);
  border-radius: 8px;
  padding: 16px;
  background: rgba(225,29,72,.05);
}
.compose-preview {
  color: rgba(255,255,255,.8);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.compose-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
}

.compose-meta-from,
.compose-meta-track {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}
.compose-meta-from svg,
.compose-meta-track svg { width: 13px; height: 13px; flex-shrink: 0; }
.compose-meta-track { color: #22c55e; }

.email-compose-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.btn-primary-red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 2px 12px rgba(225,29,72,.35);
}
.btn-primary-red svg { width: 15px; height: 15px; }
.btn-primary-red:hover:not(:disabled) {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  box-shadow: 0 4px 20px rgba(225,29,72,.5);
  transform: translateY(-1px);
}
.btn-primary-red:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.spin { animation: spin .8s linear infinite; }

/* ─── NAV GROUP (collapsible) ─────────────────────────────────────────────── */

.nav-group { display: flex; flex-direction: column; }

.nav-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s, color .15s;
  user-select: none;
}
.nav-group-header svg:first-child { width: 16px; height: 16px; flex-shrink: 0; }
.nav-group-header:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); }
.nav-group.open .nav-group-header { color: #fff; }

.nav-group-arrow {
  width: 14px !important;
  height: 14px !important;
  margin-left: auto;
  transition: transform .2s;
  flex-shrink: 0;
}
.nav-group.open .nav-group-arrow { transform: rotate(180deg); }

.nav-group-items {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
  margin-bottom: 4px;
}
.nav-group-items.open { display: flex; }

.nav-sub-item {
  padding: 7px 12px !important;
  font-size: 12px !important;
  gap: 8px !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,.55) !important;
}
.nav-sub-item svg { width: 14px !important; height: 14px !important; }
.nav-sub-item:hover { color: rgba(255,255,255,.9) !important; }
.nav-sub-item.active, [data-nav].active.nav-sub-item { color: #fff !important; }

/* ─── EMAIL HUB – 3-PANEL LAYOUT ─────────────────────────────────────────── */

.emailhub-layout {
  display: grid;
  grid-template-columns: 200px 300px 1fr;
  height: calc(100vh - 60px);
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: #111117;
}

/* Sidebar (Ordner) */
.emailhub-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.07);
  background: #0d0d14;
  padding: 16px 12px;
  gap: 4px;
}

.emailhub-sidebar-top { flex: 1; display: flex; flex-direction: column; gap: 12px; }

.emailhub-folder-list { display: flex; flex-direction: column; gap: 2px; }

.eh-folder {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: all .15s;
}
.eh-folder svg { width: 15px; height: 15px; flex-shrink: 0; }
.eh-folder:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.eh-folder.active { background: rgba(225,29,72,.15); color: #f43f5e; font-weight: 600; }

.emailhub-account {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: rgba(255,255,255,.25);
  padding: 8px 6px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.emailhub-account svg { width: 13px; height: 13px; flex-shrink: 0; }

/* E-Mail Liste */
.emailhub-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}

.eh-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

.eh-refresh-btn {
  width: 28px; height: 28px;
  background: none;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}
.eh-refresh-btn svg { width: 13px; height: 13px; }
.eh-refresh-btn:hover { background: rgba(255,255,255,.07); color: #fff; }

#eh-email-list { flex: 1; overflow-y: auto; }
#eh-email-list::-webkit-scrollbar { width: 3px; }
#eh-email-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }

/* E-Mail Reihe */
.eh-email-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.eh-email-row:hover { background: rgba(255,255,255,.04); }
.eh-email-row.selected { background: rgba(225,29,72,.1); border-left: 2px solid #e11d48; padding-left: 14px; }
.eh-email-row.unread .eh-row-from { font-weight: 700; color: #fff; }
.eh-email-row.unread .eh-row-subject { color: rgba(255,255,255,.8); }

.eh-row-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e11d48, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

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

.eh-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.eh-row-from {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.eh-row-date {
  font-size: 11px;
  color: rgba(255,255,255,.3);
  flex-shrink: 0;
}

.eh-row-subject {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eh-unread-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #e11d48;
  flex-shrink: 0;
}

/* Reader */
.emailhub-reader {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #111117;
}

.eh-reader-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255,255,255,.2);
}
.eh-reader-empty svg { width: 64px; height: 64px; }
.eh-reader-empty p { font-size: 14px; }

.eh-reader-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.eh-reader-subject {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.eh-reader-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.eh-reader-from {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eh-reader-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #e11d48);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.eh-reader-name { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); }
.eh-reader-addr { font-size: 12px; color: rgba(255,255,255,.35); }
.eh-reader-date { font-size: 12px; color: rgba(255,255,255,.35); }

.eh-reader-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eh-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.eh-action-btn svg { width: 13px; height: 13px; }
.eh-action-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.eh-action-btn.danger:hover { background: rgba(225,29,72,.15); color: #f43f5e; border-color: rgba(225,29,72,.3); }

.eh-reader-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.eh-reader-body::-webkit-scrollbar { width: 4px; }
.eh-reader-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }

.eh-body-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
  display: block;
}

.eh-body-text {
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
  white-space: pre-wrap;
  font-family: inherit;
}

/* States */
.eh-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: rgba(255,255,255,.3);
}
.eh-loading svg { color: #e11d48; }

.eh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: rgba(255,255,255,.25);
  text-align: center;
}
.eh-empty svg { width: 40px; height: 40px; }
.eh-empty p { font-size: 13px; }

.eh-error {
  padding: 24px;
  color: rgba(255,255,255,.6);
}
.eh-error h4 { color: #f43f5e; margin: 0 0 8px; font-size: 15px; }
.eh-error p  { font-size: 13px; color: rgba(255,255,255,.45); margin: 0 0 16px; }

.eh-imap-setup {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}
.eh-imap-setup strong { font-size: 13px; color: rgba(255,255,255,.7); }
.eh-imap-setup ol { margin: 8px 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.eh-imap-setup li { font-size: 12px; color: rgba(255,255,255,.45); }
.eh-imap-setup a { color: #e11d48; text-decoration: none; }
.eh-imap-setup a:hover { text-decoration: underline; }

/* Gesendet View */
.email-hub-view { display: flex; flex-direction: column; gap: 0; height: 100%; }
.email-sent-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.email-sent-list::-webkit-scrollbar { width: 4px; }
.email-sent-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }

.email-sent-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .12s;
}
.email-sent-item:hover { background: rgba(255,255,255,.03); }

.email-sent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.email-sent-to {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.8);
}
.email-sent-to strong { color: #fff; }
.email-sent-addr { font-size: 12px; color: rgba(255,255,255,.35); }

.email-sent-subject { font-size: 13px; color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.email-sent-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.email-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.25);
}
.email-stat svg { width: 13px; height: 13px; }
.email-stat.active { color: #22c55e; }

.email-sent-status { font-size: 11px; font-weight: 600; }
.email-sent-date { font-size: 12px; color: rgba(255,255,255,.3); white-space: nowrap; }

/* Inbox IMAP Setup Notice */
.email-inbox-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 60px 40px;
  max-width: 480px;
  margin: 0 auto;
}
.inbox-icon svg {
  width: 64px; height: 64px;
  color: rgba(225,29,72,.4);
}
.email-inbox-notice h3 { font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
.email-inbox-notice p { font-size: 14px; color: rgba(255,255,255,.45); line-height: 1.6; margin: 0; }
.inbox-steps { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
.inbox-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Responsive: bei schmalen Screens Email Hub collapsed */
@media (max-width: 900px) {
  .emailhub-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .emailhub-sidebar { display: none; }
  .emailhub-reader { display: none; }
  .emailhub-layout.detail-open .emailhub-list { display: none; }
  .emailhub-layout.detail-open .emailhub-reader { display: flex; }
}


/* ─── LEAD FINDER ──────────────────────────────────────────────────────────── */

.lf-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}

.lf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
  flex-shrink: 0;
}

.lf-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lf-title svg { width: 22px; height: 22px; color: #e11d48; }
.lf-title h2  { font-size: 20px; font-weight: 800; color: #fff; margin: 0; }
.lf-subtitle  { font-size: 13px; color: rgba(255,255,255,.4); }

.lf-history-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.lf-history-btn svg { width: 14px; height: 14px; }
.lf-history-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Tabs */
.lf-tabs {
  display: flex;
  gap: 4px;
  padding: 16px 24px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.lf-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,.45);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  bottom: -1px;
}
.lf-tab svg { width: 14px; height: 14px; }
.lf-tab:hover { color: rgba(255,255,255,.8); }
.lf-tab.active { color: #e11d48; border-bottom-color: #e11d48; font-weight: 700; }

.lf-tab-pro {
  font-size: 9px;
  font-weight: 800;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: .5px;
}

/* Panels */
.lf-panels { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.lf-panels::-webkit-scrollbar { width: 4px; }
.lf-panels::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }

.lf-panel { display: none; flex-direction: column; gap: 16px; }
.lf-panel.active { display: flex; }

/* Form Card */
.lf-form-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lf-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lf-form-row-check { grid-template-columns: 1fr; }

.lf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lf-field label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: .3px; text-transform: uppercase; }
.lf-field input[type="text"],
.lf-field input[type="password"] {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 14px;
  transition: border .15s;
  outline: none;
  font-family: inherit;
}
.lf-field input:focus { border-color: #e11d48; background: rgba(225,29,72,.05); }
.lf-field input::placeholder { color: rgba(255,255,255,.25); }

.lf-field-sm { }

.lf-form-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.3);
}
.lf-form-info svg { width: 13px; height: 13px; flex-shrink: 0; color: #f59e0b; }

.lf-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  cursor: pointer;
}
.lf-toggle-label input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: #e11d48;
  cursor: pointer;
}

.lf-btn-search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #e11d48, #be123c);
  border: none;
  border-radius: 9px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  align-self: flex-start;
  min-width: 200px;
}
.lf-btn-search svg { width: 15px; height: 15px; }
.lf-btn-search:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(225,29,72,.35); }
.lf-btn-search:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Hunter specific */
.lf-hunter-api-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.lf-hunter-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 8px;
  color: #f59e0b;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
.lf-hunter-link svg { width: 12px; height: 12px; }
.lf-hunter-link:hover { background: rgba(245,158,11,.2); }

/* Results */
.lf-results { display: flex; flex-direction: column; gap: 12px; }

.lf-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
}
.lf-meta-bar strong { color: rgba(255,255,255,.8); }
.lf-meta-bar code { background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 4px; font-size: 11px; }

.lf-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lf-results-count { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.8); }

.lf-results-actions { display: flex; gap: 8px; }

.lf-btn-sm {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(225,29,72,.15);
  border: 1px solid rgba(225,29,72,.25);
  border-radius: 7px;
  color: #f43f5e;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.lf-btn-sm svg { width: 12px; height: 12px; }
.lf-btn-sm:hover { background: rgba(225,29,72,.25); }
.lf-btn-sm.secondary {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
}
.lf-btn-sm.secondary:hover { background: rgba(255,255,255,.09); color: #fff; }

/* Email List */
.lf-email-list {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  overflow: hidden;
}

.lf-email-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .12s;
}
.lf-email-row:last-child { border-bottom: none; }
.lf-email-row:hover { background: rgba(255,255,255,.03); }
.lf-email-row.imported { opacity: .6; }

.lf-email-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e11d48, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.lf-email-info { flex: 1; min-width: 0; }
.lf-email-addr { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.lf-email-addr a { color: #60a5fa; text-decoration: none; font-weight: 600; }
.lf-email-addr a:hover { text-decoration: underline; }
.lf-email-name { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 2px; }

.lf-verified {
  font-size: 11px;
  font-weight: 800;
  color: #22c55e;
  background: rgba(34,197,94,.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.lf-email-badges { display: flex; align-items: center; gap: 6px; }

.lf-confidence {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}
.lf-confidence.high { background: rgba(34,197,94,.15); color: #22c55e; }
.lf-confidence.mid  { background: rgba(245,158,11,.15); color: #f59e0b; }
.lf-confidence.low  { background: rgba(239,68,68,.12);  color: #f87171; }

.lf-source-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: .3px;
}
.lf-source-badge.crawler { background: rgba(99,102,241,.15); color: #818cf8; }
.lf-source-badge.guesser { background: rgba(20,184,166,.15); color: #2dd4bf; }
.lf-source-badge.hunter  { background: rgba(245,158,11,.15); color: #f59e0b; }

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

.lf-btn-import {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 6px;
  color: #22c55e;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.lf-btn-import svg { width: 12px; height: 12px; }
.lf-btn-import:hover { background: rgba(34,197,94,.22); }
.lf-btn-import:disabled { opacity: .5; cursor: not-allowed; }

.lf-btn-email {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  transition: all .15s;
}
.lf-btn-email svg { width: 13px; height: 13px; }
.lf-btn-email:hover { background: rgba(255,255,255,.1); color: #fff; }

.lf-imported-badge {
  font-size: 12px;
  color: #22c55e;
  font-weight: 600;
}

/* States */
.lf-empty, .lf-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  text-align: center;
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 10px;
  color: rgba(255,255,255,.3);
}
.lf-empty svg { width: 40px; height: 40px; }
.lf-empty p, .lf-error p { font-size: 14px; color: rgba(255,255,255,.5); margin: 0; }
.lf-empty span { font-size: 12px; color: rgba(255,255,255,.25); }
.lf-error svg { color: #f43f5e; width: 40px; height: 40px; }

/* History Sidebar */
.lf-history-panel {
  position: fixed;
  top: 0; right: 0;
  width: 280px;
  height: 100vh;
  background: #0d0d14;
  border-left: 1px solid rgba(255,255,255,.08);
  z-index: 200;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,.5);
}
.lf-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.lf-history-header button {
  background: none; border: none; color: rgba(255,255,255,.4);
  cursor: pointer; font-size: 16px; padding: 2px 6px;
}
.lf-history-list { flex: 1; overflow-y: auto; padding: 8px; }
.lf-history-item {
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.lf-history-item:hover { background: rgba(255,255,255,.05); }
.lf-history-domain { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); }
.lf-history-meta   { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 2px; }
.lf-history-empty  { padding: 40px 20px; text-align: center; color: rgba(255,255,255,.3); font-size: 13px; }


/* ─── CONTACT TIMELINE (HubSpot Style) ─────────────────────────────────────── */

.ctl-section {
  margin-top: 24px;
  padding: 0 4px;
}

.ctl-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.7);
  letter-spacing: .3px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ctl-header svg { width: 16px; height: 16px; color: #e11d48; }

/* Loading / Empty / Error */
.ctl-loading, .ctl-empty, .ctl-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  color: rgba(255,255,255,.3);
  font-size: 13px;
  border: 1px dashed rgba(255,255,255,.07);
  border-radius: 10px;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.ctl-loading svg { animation: spin 1s linear infinite; }
.ctl-error { color: #f87171; }

/* Timeline List */
.ctl-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Vertical line */
.ctl-list::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
}

/* Individual Event */
.ctl-event {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  position: relative;
}
.ctl-event:last-child { padding-bottom: 0; }

/* Event Dot */
.ctl-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  opacity: .9;
  box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 0 0 4px rgba(255,255,255,.05);
}

/* Event Body */
.ctl-body {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  transition: background .12s;
  margin-top: 4px;
}
.ctl-event:hover .ctl-body { background: rgba(255,255,255,.05); }

.ctl-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.ctl-label { font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.ctl-date  { font-size: 11px; color: rgba(255,255,255,.3); flex-shrink: 0; }

.ctl-text {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 2px;
}

/* @mention highlight */
.ctl-mention {
  color: #60a5fa;
  font-weight: 700;
  background: rgba(96,165,250,.1);
  padding: 0 4px;
  border-radius: 3px;
}

/* Badges */
.ctl-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ctl-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
}
.ctl-badge.open   { background: rgba(34,197,94,.12);  color: #22c55e; }
.ctl-badge.click  { background: rgba(59,130,246,.12); color: #60a5fa; }
.ctl-badge.stage  { background: rgba(168,85,247,.12); color: #c084fc; }
.ctl-badge.prob   { background: rgba(245,158,11,.12); color: #f59e0b; }
.ctl-badge.due    { background: rgba(239,68,68,.1);   color: #f87171; }

/* Type-specific dot glow */
.ctl-event--created .ctl-dot  { box-shadow: 0 0 12px rgba(225,29,72,.4), 0 0 0 3px rgba(0,0,0,.4); }
.ctl-event--deal .ctl-dot     { box-shadow: 0 0 10px rgba(34,197,94,.3), 0 0 0 3px rgba(0,0,0,.4); }
.ctl-event--email_sent .ctl-dot { box-shadow: 0 0 10px rgba(59,130,246,.3), 0 0 0 3px rgba(0,0,0,.4); }


/* ─── BUG FIXES – SVG Icon Sizing ────────────────────────────────────────── */
/* Verhindert riesige SVG-Icons in Headings und View-Titles */
.view-title svg,
.view-header h1 svg,
.view-header h2 svg,
.module-title svg,
h1 > svg, h2 > svg, h3 > svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  vertical-align: middle;
}

.eh-reader-empty svg {
  width: 48px !important;
  height: 48px !important;
  opacity: .15;
}
.eh-empty svg {
  width: 36px !important;
  height: 36px !important;
  opacity: .2;
}

/* ─── TEMPLATE USE MODAL ──────────────────────────────────────────────────── */

.template-card {
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.template-card:hover {
  border-color: rgba(225,29,72,.5) !important;
  background: rgba(225,29,72,.04) !important;
  transform: translateY(-1px);
}
.template-use-hint {
  font-size: 11px;
  color: #e11d48;
  opacity: .7;
  font-weight: 600;
}

.btn-use {
  background: linear-gradient(135deg, #e11d48, #be123c) !important;
  color: #fff !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.btn-use:hover { opacity: .85; }

/* Template-Use Modal sections */
.tpl-use-section { margin-bottom: 18px; }

.tpl-contact-results {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  margin-top: 6px;
  background: var(--bg-elevated);
}

.tpl-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .1s;
}
.tpl-contact-item:last-child { border-bottom: none; }
.tpl-contact-item:hover { background: rgba(255,255,255,.06); }

.tpl-contact-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e11d48, #7c3aed);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}

.tpl-contact-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tpl-contact-info strong { font-size: 13px; font-weight: 700; }
.tpl-contact-info span  { font-size: 11px; color: rgba(255,255,255,.4); }

.tpl-selected-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(34,197,94,.06);
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 8px;
  margin-top: 6px;
}
.tpl-clear-btn {
  margin-left: auto; background: none; border: none;
  color: rgba(255,255,255,.4); cursor: pointer; font-size: 14px;
  padding: 4px 8px; border-radius: 4px;
}
.tpl-clear-btn:hover { background: rgba(255,255,255,.06); color: #fff; }

.tpl-no-results {
  padding: 12px; text-align: center;
  font-size: 12px; color: rgba(255,255,255,.3);
}

.tpl-preview-box {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.tpl-preview-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; margin-bottom: 4px; }
.tpl-preview-subject { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }

.tpl-use-actions {
  display: flex; gap: 10px;
  padding-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEQUENCES MODULE – Hunter.io Style
   ═══════════════════════════════════════════════════════════════════════════ */

.seq-layout {
  display: flex;
  height: 100%;
  min-height: calc(100vh - 60px);
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.seq-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: rgba(255,255,255,.04);
  border-right: 1px solid rgba(255,255,255,.07);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.seq-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.35);
  padding: 0 8px;
  margin-bottom: 10px;
}

.seq-nav { display: flex; flex-direction: column; gap: 2px; }

.seq-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  position: relative;
}
.seq-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.seq-nav-item:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); }
.seq-nav-item.active { background: rgba(139,92,246,.18); color: #a78bfa; }

.seq-badge {
  margin-left: auto;
  background: #7c3aed;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.seq-nav-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 10px 8px;
}

/* ── Main Content ─────────────────────────────────────────────────────────── */
.seq-main {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
  min-width: 0;
}

.seq-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.seq-page-header h2 { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.seq-page-subtitle { font-size: 13px; color: rgba(255,255,255,.45); margin: 0; }

.seq-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #7c3aed;
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.seq-btn-primary svg { width: 14px; height: 14px; }
.seq-btn-primary:hover { background: #6d28d9; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.seq-table { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; }
.seq-table-head {
  display: grid;
  grid-template-columns: 2fr .8fr .6fr .8fr .8fr .7fr .7fr auto;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,.04);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.seq-table-row {
  display: grid;
  grid-template-columns: 2fr .8fr .6fr .8fr .8fr .7fr .7fr auto;
  gap: 8px;
  padding: 12px 16px;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  transition: background .12s;
}
.seq-table-row:last-child { border-bottom: none; }
.seq-table-row:hover { background: rgba(255,255,255,.04); }
.seq-name { font-weight: 600; color: #fff; }
.seq-rate { font-weight: 600; color: #a78bfa; }
.seq-row-actions { display: flex; gap: 6px; }

.seq-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.seq-status-badge.active   { background: rgba(34,197,94,.15); color: #22c55e; }
.seq-status-badge.draft    { background: rgba(156,163,175,.15); color: #9ca3af; }
.seq-status-badge.paused   { background: rgba(245,158,11,.15); color: #f59e0b; }
.seq-status-badge.archived { background: rgba(107,114,128,.12); color: #6b7280; }

/* ── Empty State ──────────────────────────────────────────────────────────── */
.seq-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
  gap: 12px;
}
.seq-empty-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.seq-empty-icon svg { width: 28px; height: 28px; color: rgba(255,255,255,.35); }
.seq-empty-state h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0; }
.seq-empty-state p  { font-size: 14px; color: rgba(255,255,255,.45); margin: 0; max-width: 380px; line-height: 1.6; }

/* ── Detail View ──────────────────────────────────────────────────────────── */
.seq-detail { display: flex; flex-direction: column; gap: 24px; }

.seq-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.seq-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.45); background: none; border: none;
  font-size: 13px; cursor: pointer; padding: 6px 10px; border-radius: 6px;
  transition: all .15s;
}
.seq-back-btn:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); }
.seq-back-btn svg { width: 14px; height: 14px; }
.seq-detail-title { display: flex; align-items: center; gap: 10px; flex: 1; }
.seq-detail-title h2 { font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
.seq-detail-actions { display: flex; gap: 8px; }

/* ── Stats Bar ────────────────────────────────────────────────────────────── */
.seq-stats-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.seq-stat {
  padding: 16px;
  background: rgba(255,255,255,.03);
  text-align: center;
}
.seq-stat-val { font-size: 22px; font-weight: 700; color: #fff; }
.seq-stat-label { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 2px; }

/* ── Steps Timeline ───────────────────────────────────────────────────────── */
.seq-steps-section, .seq-contacts-section {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
.seq-steps-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.seq-steps-header h3 { font-size: 14px; font-weight: 700; color: #fff; margin: 0; }

.seq-steps-timeline { padding: 20px; display: flex; flex-direction: column; gap: 0; }

.seq-step-card {
  display: flex;
  gap: 16px;
  position: relative;
}

.seq-step-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
}
.seq-step-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(139,92,246,.25);
  border: 2px solid #7c3aed;
  color: #a78bfa;
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.seq-step-line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  background: rgba(139,92,246,.2);
  margin: 4px 0;
}

.seq-step-body {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.seq-step-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.seq-step-delay {
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(139,92,246,.12);
  padding: 2px 8px;
  border-radius: 20px;
}
.seq-step-reply-badge {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.06);
  padding: 2px 8px;
  border-radius: 20px;
}
.seq-step-subject { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.seq-step-preview { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.5; margin-bottom: 10px; white-space: pre-wrap; }
.seq-step-actions { display: flex; gap: 8px; }

.seq-no-steps {
  padding: 32px; text-align: center; color: rgba(255,255,255,.35); font-size: 13px;
}

/* ── Contacts Table in detail ─────────────────────────────────────────────── */
.seq-contacts-table { }
.seq-contacts-head {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr .8fr .6fr 1fr;
  gap: 8px;
  padding: 10px 20px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.3);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.seq-contact-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr .8fr .6fr 1fr;
  gap: 8px;
  padding: 11px 20px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.04);
  align-items: center;
}
.seq-contact-row:last-child { border-bottom: none; }
.seq-contact-email { color: #a78bfa; font-weight: 500; }
.seq-contact-status { font-size: 11px; font-weight: 600; }
.seq-no-contacts { padding: 32px; text-align: center; color: rgba(255,255,255,.35); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ── Settings ─────────────────────────────────────────────────────────────── */
.seq-settings { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.seq-settings-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color .15s;
}
.seq-settings-card:hover { border-color: rgba(139,92,246,.3); }
.seq-settings-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(139,92,246,.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.seq-settings-icon svg { width: 16px; height: 16px; color: #a78bfa; }
.seq-settings-body { flex: 1; }
.seq-settings-body h4 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.seq-settings-body p  { font-size: 12px; color: rgba(255,255,255,.45); margin: 0 0 10px; }
.seq-settings-input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  padding: 8px 12px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.seq-day-picker { display: flex; gap: 6px; margin-bottom: 10px; }
.seq-day-btn { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.seq-day-btn input { display: none; }
.seq-day-btn span {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5);
  transition: all .15s;
}
.seq-day-btn input:checked + span { background: #7c3aed; color: #fff; }
.seq-time-row { display: flex; gap: 12px; }
.seq-time-row > div { display: flex; flex-direction: column; gap: 4px; }
.seq-time-row label { font-size: 11px; color: rgba(255,255,255,.4); }
.seq-time-row input, .seq-time-row select {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; padding: 6px 10px; color: #fff; font-size: 12px;
}

/* ── Templates Grid ───────────────────────────────────────────────────────── */
.seq-template-cats {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.seq-cat-btn {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent; color: rgba(255,255,255,.5);
  cursor: pointer; transition: all .15s;
}
.seq-cat-btn.active, .seq-cat-btn:hover {
  background: rgba(139,92,246,.2);
  border-color: #7c3aed;
  color: #a78bfa;
}
.seq-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.seq-template-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 16px;
  transition: border-color .15s;
  display: flex; flex-direction: column; gap: 8px;
}
.seq-template-card:hover { border-color: rgba(139,92,246,.3); }
.seq-template-subject { font-size: 13px; font-weight: 700; color: #fff; }
.seq-template-preview { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.5; flex: 1; }
.seq-template-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.seq-template-tags span {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  background: rgba(139,92,246,.12); color: #a78bfa;
  padding: 2px 8px; border-radius: 20px;
}
.seq-template-actions { padding-top: 4px; }

/* ── Reporting Summary ────────────────────────────────────────────────────── */
.seq-reporting-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.seq-stat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 18px 16px;
  text-align: center;
}
.seq-stat-card-val { font-size: 24px; font-weight: 700; color: #fff; }
.seq-stat-card-label { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 4px; }

/* ── Queue Info ───────────────────────────────────────────────────────────── */
.seq-queue-info {
  display: flex; align-items: center; gap: 10px;
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px; color: rgba(255,255,255,.7);
  margin-bottom: 20px;
}
.seq-queue-info svg { width: 16px; height: 16px; color: #a78bfa; flex-shrink: 0; }

/* ── Unsubscriptions tabs ─────────────────────────────────────────────────── */
.seq-tabs-mini { display: flex; gap: 4px; margin-bottom: 20px; }
.seq-tab-mini {
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.1); background: transparent;
  color: rgba(255,255,255,.5); cursor: pointer; transition: all .15s;
}
.seq-tab-mini.active { background: rgba(139,92,246,.2); border-color: #7c3aed; color: #a78bfa; }

/* ── Placeholder hint ─────────────────────────────────────────────────────── */
.seq-placeholder-hint {
  font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 6px;
}
.seq-placeholder-hint code {
  background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 4px;
  font-family: monospace; color: #a78bfa;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CSV BULK IMPORT / EXPORT
   ═══════════════════════════════════════════════════════════════════════════ */

.csv-drop-zone {
  border: 2px dashed rgba(139,92,246,.35);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  background: rgba(139,92,246,.04);
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.csv-drop-zone.drag-over {
  border-color: #7c3aed;
  background: rgba(139,92,246,.1);
}
.csv-drop-zone input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}
.csv-drop-icon { font-size: 32px; margin-bottom: 8px; }
.csv-drop-text { font-size: 14px; color: rgba(255,255,255,.7); font-weight: 600; }
.csv-drop-hint { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 4px; }

.csv-preview-table {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  margin-top: 16px;
}
.csv-preview-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.csv-preview-table th {
  background: rgba(255,255,255,.06);
  padding: 8px 12px;
  text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.csv-preview-table td {
  padding: 8px 12px;
  color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.csv-preview-table tr:last-child td { border-bottom: none; }

.csv-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.csv-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(34,197,94,.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.25);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.csv-export-btn:hover { background: rgba(34,197,94,.2); }
.csv-export-btn svg { width: 13px; height: 13px; }

.csv-import-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(59,130,246,.12);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,.25);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.csv-import-btn:hover { background: rgba(59,130,246,.2); }

.csv-progress {
  width: 100%; background: rgba(255,255,255,.08);
  border-radius: 4px; height: 6px; overflow: hidden; margin-top: 10px;
}
.csv-progress-bar {
  height: 100%; background: linear-gradient(90deg,#7c3aed,#a78bfa);
  border-radius: 4px; transition: width .3s;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SIGNALS MODULE – Company Monitoring
   ═══════════════════════════════════════════════════════════════════════════ */

.signals-layout { padding:24px; max-width:1200px; margin:0 auto; }

.signals-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; gap:16px; flex-wrap:wrap;
}
.signals-header-left { display:flex; align-items:center; gap:16px; }
.signals-icon-wrap {
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg,#f59e0b22,#f59e0b44);
  display:flex; align-items:center; justify-content:center;
}
.signals-icon-wrap svg { width:22px; height:22px; color:#f59e0b; }
.signals-icon-wrap svg path { stroke:#f59e0b; }
.signals-header h2 { margin:0; font-size:22px; font-weight:700; }
.signals-subtitle { font-size:12px; opacity:.5; margin-top:2px; }
.signals-header-actions { display:flex; gap:10px; }

.sig-btn-primary, .sig-btn-secondary {
  display:flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:8px; border:none;
  font-size:13px; font-weight:500; cursor:pointer; transition:all .2s;
}
.sig-btn-primary {
  background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff;
}
.sig-btn-primary:hover { transform:translateY(-1px); filter:brightness(1.1); }
.sig-btn-secondary {
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.1);
}
.sig-btn-secondary:hover { background:rgba(255,255,255,.12); }
.sig-btn-primary svg, .sig-btn-secondary svg { width:14px; height:14px; }

.signals-stats-strip {
  display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;
}
.sig-stat-chip {
  padding:6px 14px; border-radius:20px; font-size:12px; font-weight:500;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:6px;
}
.sig-stat-chip.active { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.3); color:#22c55e; }
.sig-stat-chip.events { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.3); }
.sig-stat-chip.events.has-events { background:rgba(245,158,11,.2); border-color:#f59e0b; color:#f59e0b; animation:pulse-border 2s infinite; }
@keyframes pulse-border { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)} 50%{box-shadow:0 0 0 4px rgba(245,158,11,0)} }

.signals-type-filter { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.sig-type-btn {
  padding:7px 14px; border-radius:20px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.6);
  font-size:12px; cursor:pointer; transition:all .2s;
}
.sig-type-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.sig-type-btn.active { background:rgba(245,158,11,.15); border-color:#f59e0b; color:#f59e0b; }

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

.signal-card {
  background:rgba(255,255,255,.05); border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden; transition:all .25s;
}
.signal-card:hover { transform:translateY(-2px); border-color:rgba(245,158,11,.3); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.signal-card.paused { opacity:.6; }

.signal-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.05);
}
.signal-type-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:12px; font-size:11px; font-weight:600;
}
.signal-card-menu { display:flex; align-items:center; gap:8px; }
.signal-unseen-badge {
  background:#f59e0b; color:#fff; border-radius:10px;
  padding:2px 8px; font-size:11px; font-weight:700;
  animation:bounce-in .3s ease;
}
@keyframes bounce-in { 0%{transform:scale(0)} 70%{transform:scale(1.1)} 100%{transform:scale(1)} }
.signal-status-dot {
  width:8px; height:8px; border-radius:50%;
}
.signal-status-dot.active { background:#22c55e; box-shadow:0 0 6px #22c55e; }
.signal-status-dot.paused { background:#888; }

.signal-card-body { padding:14px 16px; cursor:pointer; }
.signal-company-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.signal-favicon { width:24px; height:24px; border-radius:4px; object-fit:contain; }
.signal-name { font-weight:600; font-size:14px; }
.signal-domain { font-size:11px; opacity:.5; }
.signal-keywords { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.signal-kw {
  background:rgba(255,255,255,.08); border-radius:10px;
  padding:2px 8px; font-size:11px; opacity:.8;
}
.signal-card-stats { display:flex; gap:12px; font-size:11px; opacity:.5; }
.sig-cs { display:flex; align-items:center; gap:4px; }
.sig-cs svg { width:11px; height:11px; }

.signal-card-actions {
  display:flex; gap:6px; padding:10px 16px;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.1);
}
.btn-danger-sm { color:#ef4444 !important; }
.btn-danger-sm:hover { background:rgba(239,68,68,.15) !important; }

.signals-empty {
  grid-column:1/-1; text-align:center; padding:60px 20px;
  opacity:.6;
}
.signals-empty-icon {
  width:64px; height:64px; margin:0 auto 16px;
  border-radius:50%; background:rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center;
}
.signals-empty-icon svg { width:28px; height:28px; }
.signals-empty h3 { margin:0 0 8px; font-size:18px; }
.signals-empty p { margin:0 0 20px; font-size:14px; }

/* Signal Detail Events */
.sig-events-list { display:flex; flex-direction:column; gap:10px; max-height:400px; overflow-y:auto; }
.sig-event-item {
  display:flex; align-items:flex-start; gap:10px; padding:12px;
  border-radius:10px; background:rgba(255,255,255,.05);
  border-left:3px solid transparent; transition:all .2s;
}
.sig-event-item.unseen { border-left-color:#f59e0b; background:rgba(245,158,11,.05); }
.sig-event-type-icon { font-size:20px; flex-shrink:0; }
.sig-event-body { flex:1; min-width:0; }
.sig-event-title { font-weight:600; font-size:13px; margin-bottom:3px; }
.sig-event-desc { font-size:12px; opacity:.6; margin-bottom:4px; }
.sig-event-link { font-size:11px; color:#f59e0b; text-decoration:none; }
.sig-event-link:hover { text-decoration:underline; }
.sig-event-time { font-size:11px; opacity:.4; margin-top:4px; }
.sig-event-actions { flex-shrink:0; }
.sig-events-empty { text-align:center; padding:40px 20px; opacity:.5; font-size:14px; }

/* Signal Create Modal */
.sig-type-picker { display:flex; flex-direction:column; gap:8px; }
.sig-type-option {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:10px; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.1); transition:all .2s;
}
.sig-type-option:hover { background:rgba(255,255,255,.05); }
.sig-type-option.selected { border-color:#f59e0b; background:rgba(245,158,11,.08); }
.sig-type-icon { font-size:22px; }
.sig-type-name { font-weight:600; font-size:13px; }
.sig-type-desc { font-size:11px; opacity:.5; margin-top:1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EMAIL VERIFIER
   ═══════════════════════════════════════════════════════════════════════════ */

.lf-verifier-hero {
  display:flex; align-items:center; gap:16px; padding:20px;
  background:linear-gradient(135deg,rgba(34,197,94,.05),rgba(34,197,94,.12));
  border:1px solid rgba(34,197,94,.2); border-radius:14px; margin-bottom:20px;
  flex-wrap:wrap;
}
.lf-verifier-icon-wrap {
  width:48px; height:48px; flex-shrink:0; border-radius:12px;
  background:rgba(34,197,94,.15); display:flex; align-items:center; justify-content:center;
}
.lf-verifier-icon-wrap svg { width:22px; height:22px; color:#22c55e; }
.lf-verifier-icon-wrap svg path, .lf-verifier-icon-wrap svg polyline { stroke:#22c55e; }
.lf-verifier-hero h3 { margin:0 0 3px; font-size:16px; font-weight:700; }
.lf-verifier-hero p { margin:0; font-size:12px; opacity:.6; }
.lf-verifier-badges { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }

/* Verifier Badges */
.ver-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600;
}
.ver-badge.valid,    .ver-badge.valid.accept_all.valid    { background:rgba(34,197,94,.15); color:#22c55e; }
.ver-badge.accept-all, .ver-badge.accept_all              { background:rgba(245,158,11,.15); color:#f59e0b; }
.ver-badge.invalid                                        { background:rgba(239,68,68,.15); color:#ef4444; }

/* Single Verifier Result Card */
.ver-result-card {
  margin-top:16px; padding:24px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  animation:slide-up .3s ease;
}
@keyframes slide-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.ver-result-card.ver-valid   { border-color:rgba(34,197,94,.3); background:rgba(34,197,94,.04); }
.ver-result-card.ver-accept  { border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.04); }
.ver-result-card.ver-invalid { border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.04); }

.ver-result-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ver-status-big { font-size:22px; font-weight:700; }
.ver-confidence-ring { position:relative; }
.ver-conf-num {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.ver-email-display {
  font-family:monospace; font-size:16px; font-weight:600;
  margin-bottom:8px; word-break:break-all;
}
.ver-reason { font-size:12px; opacity:.6; margin-bottom:16px; }
.ver-checks-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px; }
.ver-check {
  padding:8px 12px; border-radius:8px; font-size:12px; font-weight:500;
  background:rgba(255,255,255,.05);
}
.ver-check.ok   { background:rgba(34,197,94,.1); color:#22c55e; }
.ver-check.fail { background:rgba(239,68,68,.1); color:#ef4444; }
.ver-check.warn { background:rgba(245,158,11,.1); color:#f59e0b; }
.ver-mx { font-size:11px; opacity:.5; margin-bottom:14px; font-family:monospace; }
.ver-result-actions { display:flex; gap:8px; }

/* Bulk Verifier Summary */
.ver-bulk-summary {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px;
}
.ver-sum-item {
  text-align:center; padding:16px; border-radius:12px;
  background:rgba(255,255,255,.05); font-size:24px; font-weight:700;
}
.ver-sum-item span { display:block; font-size:11px; font-weight:400; opacity:.6; margin-top:4px; }
.ver-sum-item.valid   { background:rgba(34,197,94,.1);  color:#22c55e; }
.ver-sum-item.accept-all { background:rgba(245,158,11,.1); color:#f59e0b; }
.ver-sum-item.invalid { background:rgba(239,68,68,.1);  color:#ef4444; }
.ver-sum-item.total   { background:rgba(255,255,255,.06); color:#fff; }

.ver-bulk-actions { display:flex; gap:10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DISCOVER – Company Browser
   ═══════════════════════════════════════════════════════════════════════════ */

.discover-results-header {
  padding:12px 0; font-size:13px; opacity:.6; margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.discover-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.discover-card {
  background:rgba(255,255,255,.05); border-radius:14px;
  border:1px solid rgba(255,255,255,.08); overflow:hidden; transition:all .25s;
}
.discover-card:hover { transform:translateY(-2px); border-color:rgba(124,58,237,.4); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.discover-card-header { display:flex; align-items:center; gap:12px; padding:14px 16px 10px; }
.discover-logo { width:36px; height:36px; border-radius:8px; object-fit:contain; background:rgba(255,255,255,.05); }
.discover-name { font-weight:600; font-size:14px; margin-bottom:2px; }
.discover-domain { font-size:11px; color:#7c3aed; opacity:.8; text-decoration:none; }
.discover-domain:hover { opacity:1; text-decoration:underline; }
.discover-meta { display:flex; flex-wrap:wrap; gap:5px; padding:0 16px 10px; }
.discover-badge {
  padding:3px 8px; border-radius:10px; font-size:11px;
  background:rgba(255,255,255,.08); opacity:.8;
}
.discover-badge.emails-found { background:rgba(34,197,94,.15); color:#22c55e; opacity:1; }
.discover-actions { display:flex; gap:6px; padding:10px 16px 14px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   GOOGLE SHEETS / GENERAL EXPORT BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.csv-export-btn, .sheets-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.8);
  font-size:12px; cursor:pointer; transition:all .2s; font-weight:500;
}
.csv-export-btn:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
.csv-export-btn svg { width:13px; height:13px; }


/* Global: SVGs ohne explizite Größe in Info-/Form-Karten nie größer als 20px */
.lf-proxies-info svg,
.lf-form-info svg,
.lf-discovery-hero-icon > svg { flex-shrink: 0; }

.lf-proxies-info { display: flex; align-items: flex-start; gap: 12px; }
.lf-proxies-info svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }