/* Pagination */
    .pagination { display: flex; justify-content: center; padding: 12px 0; }

    /* Faza 13: pulse animation pt badge "DECONECTAT" */
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
    }

    /* ============ Faza 14: UI Redesign ============ */

    /* Brand colors - aliniate cu robotii de pe site */
    :root {
      --c-dashboard: #020617;   /* slate-950 - BOS (Orchestrator) - aproape negru */
      --c-media:     #A855F7;   /* mov - Carlos (Creativ AI) */
      --c-comanda:   #6366F1;   /* mov-albastru/indigo - Klark (Client Comms) */
      --c-postari:   #EC4899;   /* roz - Mira (Marketing & Brand OS) */
      --c-mk:        #06B6D4;   /* cyan - Dexter (Research & Intel) */
      --c-leads:     #F87171;   /* roșu - Hunter (Outbound Research) */
      --c-chat:      #10B981;   /* verde - Nora (Lead Nurture) */
    }

    /* Faza 14.8: Background cu glow colorat intens per tab */
    body {
      position: relative;
      background: #0A0A0C;
      overflow-x: hidden;
    }
    /* Layer 1: gradient cu glow colorat care se schimba per tab */
    body::before {
      content: ''; position: fixed; inset: 0; z-index: 0;
      background:
        radial-gradient(ellipse 800px 600px at 50% 0%, var(--app-glow) 0%, transparent 70%),
        radial-gradient(ellipse 600px 800px at 50% 100%, var(--app-glow) 0%, transparent 70%),
        linear-gradient(135deg, #0A0A0C 0%, #121216 50%, #0A0A0C 100%);
      background-size: 100% 100%, 100% 100%, 200% 200%;
      animation: bgShift 30s ease-in-out infinite;
      transition: --app-glow 0.6s ease;
    }
    /* Layer 2: grid auriu + electricitate - totul pe canvas */
    #electric-canvas {
      position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4;
      transition: opacity 0.6s ease;
    }
    body[data-app-color="dashboard"] #electric-canvas {
      opacity: 1;
    }
    @keyframes bgShift {
      0%, 100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }
    @keyframes iconsFloat {
      0%   { transform: translate(0, 0) rotate(0deg); }
      33%  { transform: translate(20px, -30px) rotate(2deg); }
      66%  { transform: translate(-15px, 15px) rotate(-1deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }

    /* Culoare fundal per tab - aliniate cu culorile card-urilor si robotilor */
    body[data-app-color="dashboard"] { --app-glow: rgba(2,6,23,0.55); }
    body[data-app-color="media"]     { --app-glow: rgba(168,85,247,0.30); }
    body[data-app-color="comanda"]   { --app-glow: rgba(99,102,241,0.30); }
    body[data-app-color="postari"]   { --app-glow: rgba(236,72,153,0.30); }
    body[data-app-color="mk"]        { --app-glow: rgba(6,182,212,0.30); }
    body[data-app-color="leads"]     { --app-glow: rgba(248,113,113,0.30); }
    body[data-app-color="chat"]      { --app-glow: rgba(16,185,129,0.30); }

    /* Header: logo BM MARE centrat, FARA linie de sub el */
    header.app-header {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 32px 0 24px 0; margin-bottom: 28px;
      text-align: center; position: relative;
    }
    header.app-header img.logo-bm {
      width: auto; height: 80px;
      transition: transform 0.3s ease;
    }
    header.app-header img.logo-bm:hover { transform: scale(1.05); }
    /* Faza 14.8: logo Vise langa user - fara glow vizibil, container curat */
    .user-logo-wrap {
      display: flex; align-items: center; justify-content: center;
      padding: 0;
    }
    #user-logo {
      height: 52px; max-width: 180px; object-fit: contain;
    }

    /* Grid de tab-uri: 2x4 carduri cu glass effect PUTERNIC si glow colorat */
    .tab-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
      margin-bottom: 28px;
    }
    @media (min-width: 640px) { .tab-grid { grid-template-columns: repeat(4, 1fr); } }
    .tab-card {
      position: relative;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 12px;
      padding: 28px 14px 22px 14px;
      min-height: 130px;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 20px;
      cursor: pointer;
      transition: transform .25s cubic-bezier(.4,0,.2,1), border-color .25s ease, background .25s ease, box-shadow .3s ease;
      overflow: hidden;
    }
    .tab-card::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 0%, var(--tab-color, transparent) 0%, transparent 70%);
      opacity: .22; transition: opacity .3s ease;
    }
    .tab-card::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--tab-color, transparent), transparent);
      opacity: .85;
    }
    .tab-card:hover {
      transform: translateY(-4px) scale(1.02);
      background: rgba(255,255,255,0.07);
      border-color: var(--tab-color, var(--border-hover));
      box-shadow: 0 12px 40px -8px var(--tab-color, transparent), 0 0 0 1px var(--tab-color, transparent) inset;
    }
    .tab-card:hover::before { opacity: .4; }
    .tab-card .tab-icon {
      font-size: 44px; line-height: 1;
      filter: drop-shadow(0 0 16px var(--tab-color, transparent));
      transition: transform .3s cubic-bezier(.4,0,.2,1);
    }
    .tab-card:hover .tab-icon { transform: scale(1.15) rotate(-3deg); }
    .tab-card .tab-label {
      font-size: 13px; font-weight: 700; color: var(--text);
      text-align: center; letter-spacing: .4px; text-transform: uppercase;
    }
    .tab-card .tab-sublabel {
      font-size: 10px; color: var(--muted); text-align: center; margin-top: 2px;
      letter-spacing: .3px;
    }

    /* Culori specifice per card */
    .tab-card.tc-dashboard { --tab-color: var(--c-dashboard); }
    .tab-card.tc-media     { --tab-color: var(--c-media); }
    .tab-card.tc-comanda   { --tab-color: var(--c-comanda); }
    .tab-card.tc-postari   { --tab-color: var(--c-postari); }
    .tab-card.tc-mk        { --tab-color: var(--c-mk); }
    .tab-card.tc-leads     { --tab-color: var(--c-leads); }
    .tab-card.tc-chat      { --tab-color: var(--c-chat); }
    .tab-card.tc-admin     { --tab-color: #94a3b8; }

    /* Breadcrumb: buton MARE colorat per culoarea tab-ului, glow puternic */
    .tab-breadcrumb {
      display: none;
      align-items: center; gap: 12px;
      padding: 14px 18px;
      margin-bottom: 20px;
      background: rgba(255,255,255,0.02);
      backdrop-filter: blur(16px) saturate(120%);
      -webkit-backdrop-filter: blur(16px) saturate(120%);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 14px;
      font-size: 14px;
    }
    .tab-breadcrumb.visible { display: flex; }
    .tab-breadcrumb button#bc-back {
      background: var(--bc-color, var(--c-dashboard));
      color: #fff;
      border: 0;
      padding: 10px 18px; border-radius: 10px;
      font-size: 13px; font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 20px -4px var(--bc-color, var(--c-dashboard));
      transition: transform .2s ease, box-shadow .2s ease;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .tab-breadcrumb button#bc-back:hover {
      transform: translateX(-2px);
      box-shadow: 0 6px 24px -4px var(--bc-color, var(--c-dashboard));
    }
    .tab-breadcrumb .bc-label { color: var(--muted); font-size: 13px; }
    .tab-breadcrumb .bc-current { color: var(--text); font-weight: 700; font-size: 15px; }
    .tab-breadcrumb .bc-current .bc-icon { margin-right: 6px; }

    /* Culori breadcrumb per tab */
    body[data-app-color="dashboard"] { --bc-color: var(--c-dashboard); }
    body[data-app-color="media"]     { --bc-color: var(--c-media); }
    body[data-app-color="comanda"]   { --bc-color: var(--c-comanda); }
    body[data-app-color="postari"]   { --bc-color: var(--c-postari); }
    body[data-app-color="mk"]        { --bc-color: var(--c-mk); }
    body[data-app-color="leads"]     { --bc-color: var(--c-leads); }
    body[data-app-color="chat"]      { --bc-color: var(--c-chat); }

    /* Ascundem tab-urile vechi (orizontale) */
    .tabs { display: none !important; }

    /* Thinking animation (3 buline care pulse, pentru chat AI loading) */
    .thinking-dots {
      display: inline-flex; align-items: center; gap: 5px; padding: 12px 16px;
      background: rgba(234,179,8,0.08);
      border: 1px solid rgba(234,179,8,0.3);
      border-radius: 14px;
    }
    .thinking-dots .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--c-chat);
      animation: thinkingPulse 1.4s ease-in-out infinite;
      box-shadow: 0 0 10px var(--c-chat);
    }
    .thinking-dots .dot:nth-child(2) { animation-delay: .2s; }
    .thinking-dots .dot:nth-child(3) { animation-delay: .4s; }
    @keyframes thinkingPulse {
      0%, 60%, 100% { transform: scale(0.6); opacity: .3; }
      30%           { transform: scale(1.0); opacity: 1; }
    }

    /* Card styling: glass effect FOARTE TRANSPARENT */
    .card {
      background: rgba(255,255,255,0.015);
      backdrop-filter: blur(16px) saturate(120%);
      -webkit-backdrop-filter: blur(16px) saturate(120%);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 16px;
      box-shadow:
        0 2px 12px -8px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.03);
    }

    /* Faza 14.15: robot specific per tab - mai in dreapta si putin mai jos */
    /* FIX 2026-07-18: right:8px il lipea de marginea ferestrei
       (Ali: "prea in dreapta"). Mutat mai spre interior. */
    .bg-robot {
      position: absolute; top: 70%; right: 32px;
      transform: translateY(-50%);
      z-index: 2; pointer-events: none;
      width: 100px; height: 100px;
      opacity: 1;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      filter: drop-shadow(0 0 14px var(--robot-color, transparent));
      transition: background-image 0.6s ease;
      animation: robotFloat 6s ease-in-out infinite;
    }
    @keyframes robotFloat {
      0%, 100% { transform: translateY(-50%) rotate(0deg); }
      50%      { transform: translateY(-54%) rotate(3deg); }
    }
    body[data-app-color="dashboard"] { --robot-color: rgba(2,6,23,0.85); }
    body[data-app-color="media"]     { --robot-color: rgba(168,85,247,0.6); }
    body[data-app-color="comanda"]   { --robot-color: rgba(59,130,246,0.6); }
    body[data-app-color="postari"]   { --robot-color: rgba(236,72,153,0.6); }
    body[data-app-color="mk"]        { --robot-color: rgba(59,130,246,0.6); }
    body[data-app-color="leads"]     { --robot-color: rgba(248,113,113,0.6); }
    body[data-app-color="chat"]      { --robot-color: rgba(16,185,129,0.6); }
/* Faza 14.22: Lead detail view */
    .lead-field-group { margin-bottom: 16px; }
    .lead-field-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
    .lead-field { display: flex; flex-direction: column; min-width: 120px; }
    .lead-field .label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; opacity: .5; margin-bottom: 2px; }
    .lead-field .value { font-size: 13px; font-weight: 500; }
    .lead-field .value a { color: var(--accent); text-decoration: none; }
    .lead-field .value a:hover { text-decoration: underline; }
    .lead-stage-badge { font-size: 11px; padding: 3px 10px; border-radius: 6px; font-weight: 600; display: inline-block; }
    .stage-Capture { background: rgba(239,68,68,.15); color: #ef4444; }
    .stage-Nurture { background: rgba(245,158,11,.15); color: #f59e0b; }
    .stage-Qualified { background: rgba(16,185,129,.15); color: #10b981; }
    .stage-Propunere { background: rgba(99,102,241,.15); color: #6366f1; }
    .stage-Contract { background: rgba(168,85,247,.15); color: #a855f7; }

    /* Lead messages / chat */
    .lead-msg-section { margin-top: 20px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 16px; }
    .lead-msg-section h4 { font-size: 14px; margin: 0 0 12px 0; display: flex; align-items: center; gap: 8px; }
    .lead-msg-list { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.15); }
    .lead-msg { padding: 10px 14px; border-radius: 12px; max-width: 85%; font-size: 13px; line-height: 1.5; }
    .lead-msg.in { align-self: flex-start; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.15); }
    .lead-msg.out { align-self: flex-end; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.15); }
    .lead-msg.note { align-self: center; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.1); font-style: italic; max-width: 95%; }
    .lead-msg .msg-meta { font-size: 10px; opacity: .5; margin-top: 4px; text-align: right; }
    .lead-msg .msg-author { font-size: 10px; font-weight: 600; margin-bottom: 2px; opacity: .6; }
    .lead-msg-input-row { display: flex; gap: 8px; }
    .lead-msg-input-row input { flex: 1; }
    .lead-msg-input-row select { width: 80px; }
    .lead-msg-empty { text-align: center; color: var(--muted); padding: 24px; font-size: 13px; }
    .lead-msg-refresh { font-size: 11px; padding: 4px 12px; cursor: pointer; }

    /* ============ App 2.0 P1: Decizii + Rapoarte ============ */
    :root { --c-decizii: #EAB308; --c-rapoarte: #14B8A6; --c-hercules: #7C3AED; }
    .tab-card.tc-decizii  { --tab-color: var(--c-decizii); }
    .tab-card.tc-rapoarte { --tab-color: var(--c-rapoarte); }
    .tab-card.tc-hercules { --tab-color: var(--c-hercules); }
    .tab-card.tc-idei     { --tab-color: var(--c-idei); }
    body[data-app-color="decizii"]  { --app-glow: rgba(234,179,8,0.30); --bc-color: var(--c-decizii); --robot-color: rgba(234,179,8,0.6); }
    body[data-app-color="rapoarte"] { --app-glow: rgba(20,184,166,0.30); --bc-color: var(--c-rapoarte); --robot-color: rgba(20,184,166,0.6); }
    body[data-app-color="hercules"] { --app-glow: rgba(124,58,237,0.30); --bc-color: var(--c-hercules); --robot-color: rgba(124,58,237,0.6); }

    /* Hercules */
    .brain-profile-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 13px; }
    .brain-profile-grid .k { color: var(--muted); white-space: nowrap; }
    .brain-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .brain-tag { background: rgba(124,58,237,.15); color: #b794f6; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
    .brain-note-item { background: #0a0a0a; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
    .brain-note-item .meta { color: var(--muted); font-size: 11px; margin-bottom: 4px; }

    /* Onboarding wizard */