/*
    @file paginas/AstionAutores/css/pages/dashboard.css
    @versao_deploy 2026-09-17-e-o-designer-ve-o-livro
    🎨 17/09: o card do DESIGN REMOTO (`.book-badge.remoto`, `.book-card.design-remoto`).
    📝 16/09 (tarde): o MODAL de criação (`#ed-modal-criar`); saiu o formulário de baixo.
    🧪 16/09: o selo «Beta instável» do card do Infantil (`.ed-selo-beta`).
    ⚠️ Trocar a data acima ao editar — o painel `</>` lê este marcador do disco,
       e o `?v=` deste arquivo no `dashboard.html` muda JUNTO.

    🔴 Este arquivo NÃO tinha marcador até 03/09/2026, e por isso os consertos
       de CSS eram invisíveis ao painel: ele não sabia dizer qual folha estava
       no ar. Os dois consertos visuais dos cards de «Criar Livro» — o «Em
       Breve» ilegível e o card quadrado alto demais — vivem aqui, e nenhum dos
       dois deixa rastro em HTML ou JS.
    🔑🔑 ***Arquivo sem marcador não aparece como atrasado: aparece como
       inexistente*** — e o painel verde por omissão é pior que o vermelho.
*/
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    /* =====================================================
       SISTEMA DE 10 TEMAS (mesmos do base_literario)
       ===================================================== */
    [data-theme="light"] {
      --primary: #6366f1; --primary-hover: #4f46e5; --primary-light: #818cf8;
      --secondary: #8b5cf6; --accent: #f59e0b;
      --bg-body: #f8f9fc; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #f0f1f5;
      --text: #1f2937; --text-muted: #6b7280; --text-dim: #9ca3af;
      --border: #e5e7eb;
      --gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
    }
    [data-theme="sky"] {
      --primary: #0ea5e9; --primary-hover: #0284c7; --primary-light: #38bdf8;
      --secondary: #06b6d4; --accent: #14b8a6;
      --bg-body: #f0f9ff; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #e0f2fe;
      --text: #0c4a6e; --text-muted: #0369a1; --text-dim: #7dd3fc;
      --border: #bae6fd;
      --gradient: linear-gradient(135deg, #0ea5e9, #06b6d4);
    }
    [data-theme="mint"] {
      --primary: #10b981; --primary-hover: #059669; --primary-light: #34d399;
      --secondary: #22c55e; --accent: #84cc16;
      --bg-body: #f0fdf4; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #dcfce7;
      --text: #14532d; --text-muted: #166534; --text-dim: #86efac;
      --border: #bbf7d0;
      --gradient: linear-gradient(135deg, #10b981, #22c55e);
    }
    [data-theme="peach"] {
      --primary: #f97316; --primary-hover: #ea580c; --primary-light: #fb923c;
      --secondary: #ef4444; --accent: #eab308;
      --bg-body: #fff7ed; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #ffedd5;
      --text: #7c2d12; --text-muted: #c2410c; --text-dim: #fdba74;
      --border: #fed7aa;
      --gradient: linear-gradient(135deg, #f97316, #ef4444);
    }
    [data-theme="blossom"] {
      --primary: #ec4899; --primary-hover: #db2777; --primary-light: #f472b6;
      --secondary: #a855f7; --accent: #f43f5e;
      --bg-body: #fdf2f8; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #fce7f3;
      --text: #831843; --text-muted: #be185d; --text-dim: #f9a8d4;
      --border: #fbcfe8;
      --gradient: linear-gradient(135deg, #ec4899, #a855f7);
    }
    [data-theme="midnight"] {
      --primary: #6366f1; --primary-hover: #4f46e5; --primary-light: #818cf8;
      --secondary: #8b5cf6; --accent: #f59e0b;
      --bg-body: #0f0f1a; --bg-sidebar: #13131f; --bg-card: #1a1a2e; --bg-hover: #252540;
      --text: #f1f1f1; --text-muted: #9ca3af; --text-dim: #6b7280;
      --border: #2e2e4d;
      --gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
    }
    [data-theme="ocean"] {
      --primary: #0ea5e9; --primary-hover: #0284c7; --primary-light: #38bdf8;
      --secondary: #06b6d4; --accent: #14b8a6;
      --bg-body: #0c1929; --bg-sidebar: #0f2137; --bg-card: #132f4c; --bg-hover: #1a4165;
      --text: #e6f4ff; --text-muted: #94c4e8; --text-dim: #5a9bcf;
      --border: #1e4976;
      --gradient: linear-gradient(135deg, #0ea5e9, #06b6d4);
    }
    [data-theme="forest"] {
      --primary: #22c55e; --primary-hover: #16a34a; --primary-light: #4ade80;
      --secondary: #10b981; --accent: #84cc16;
      --bg-body: #0f1a14; --bg-sidebar: #142118; --bg-card: #1a2f22; --bg-hover: #254033;
      --text: #e8f5e9; --text-muted: #a5d6a7; --text-dim: #66bb6a;
      --border: #2d5a3d;
      --gradient: linear-gradient(135deg, #22c55e, #10b981);
    }
    [data-theme="sunset"] {
      --primary: #f97316; --primary-hover: #ea580c; --primary-light: #fb923c;
      --secondary: #ef4444; --accent: #eab308;
      --bg-body: #1a1310; --bg-sidebar: #211915; --bg-card: #2f211a; --bg-hover: #402d22;
      --text: #fff5eb; --text-muted: #e0c4a8; --text-dim: #b8956c;
      --border: #5a3d2b;
      --gradient: linear-gradient(135deg, #f97316, #ef4444);
    }
    [data-theme="rose"] {
      --primary: #ec4899; --primary-hover: #db2777; --primary-light: #f472b6;
      --secondary: #a855f7; --accent: #f43f5e;
      --bg-body: #1a0f14; --bg-sidebar: #21131a; --bg-card: #2f1a24; --bg-hover: #402333;
      --text: #fdf2f8; --text-muted: #f9a8d4; --text-dim: #ec4899;
      --border: #5a2d43;
      --gradient: linear-gradient(135deg, #ec4899, #a855f7);
    }
    [data-theme="sand"] {
      --primary: #ca8a04; --primary-hover: #a16207; --primary-light: #fbbf24;
      --secondary: #d97706; --accent: #b45309;
      --bg-body: #fefce8; --bg-sidebar: #fffbeb; --bg-card: #ffffff; --bg-hover: #fef9c3;
      --text: #713f12; --text-muted: #92400e; --text-dim: #fbbf24;
      --border: #fde68a;
      --gradient: linear-gradient(135deg, #ca8a04, #d97706);
    }
    [data-theme="lavender"] {
      --primary: #7c3aed; --primary-hover: #6d28d9; --primary-light: #a78bfa;
      --secondary: #8b5cf6; --accent: #c084fc;
      --bg-body: #f5f3ff; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #ede9fe;
      --text: #4c1d95; --text-muted: #6d28d9; --text-dim: #a78bfa;
      --border: #ddd6fe;
      --gradient: linear-gradient(135deg, #7c3aed, #c084fc);
    }
    [data-theme="aqua"] {
      --primary: #0d9488; --primary-hover: #0f766e; --primary-light: #2dd4bf;
      --secondary: #06b6d4; --accent: #14b8a6;
      --bg-body: #f0fdfa; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #ccfbf1;
      --text: #134e4a; --text-muted: #0f766e; --text-dim: #5eead4;
      --border: #99f6e4;
      --gradient: linear-gradient(135deg, #0d9488, #06b6d4);
    }
    [data-theme="carbon"] {
      --primary: #e2e8f0; --primary-hover: #cbd5e1; --primary-light: #f1f5f9;
      --secondary: #94a3b8; --accent: #60a5fa;
      --bg-body: #0a0a0f; --bg-sidebar: #111118; --bg-card: #18181f; --bg-hover: #22222c;
      --text: #e2e8f0; --text-muted: #94a3b8; --text-dim: #64748b;
      --border: #2a2a35;
      --gradient: linear-gradient(135deg, #334155, #475569);
    }
    [data-theme="aurora"] {
      --primary: #34d399; --primary-hover: #10b981; --primary-light: #6ee7b7;
      --secondary: #22d3ee; --accent: #a78bfa;
      --bg-body: #030d1a; --bg-sidebar: #051525; --bg-card: #0a1e33; --bg-hover: #0f2c48;
      --text: #e0fff8; --text-muted: #7eddd5; --text-dim: #4fb6aa;
      --border: #0e3a4a;
      --gradient: linear-gradient(135deg, #34d399, #22d3ee);
    }
    [data-theme="burgundy"] {
      --primary: #f59e0b; --primary-hover: #d97706; --primary-light: #fcd34d;
      --secondary: #e11d48; --accent: #fb7185;
      --bg-body: #12060a; --bg-sidebar: #1c0c12; --bg-card: #26101a; --bg-hover: #35172a;
      --text: #fef2f2; --text-muted: #fca5a5; --text-dim: #f87171;
      --border: #4c1029;
      --gradient: linear-gradient(135deg, #f59e0b, #e11d48);
    }

    :root { --col1-width: 260px; --col3-width: 300px; --navbar-height: 56px; }

    /* iOS: força height correto em Safari (antes de html,body) */
    html { min-height: -webkit-fill-available; }

    html, body {
      height: 100%;
      min-height: -webkit-fill-available; /* iOS Safari */
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-body); color: var(--text); overflow: hidden;
      -webkit-text-size-adjust: 100%; /* evita zoom de fonte no iOS */
    }

    /* iOS: remove highlight cinza no tap e delay de 300ms */
    button, a, input, select, textarea, [role="button"] {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    /* =====================================================
       LAYOUT 3 COLUNAS
       ===================================================== */
    .container { display: flex; height: 100vh; height: 100dvh; width: 100%; /* 100dvh: exclui barra do browser no iOS */ }

    .col-menu {
      width: var(--col1-width); min-width: var(--col1-width);
      background: var(--bg-sidebar); border-right: 1px solid var(--border);
      display: flex; flex-direction: column; overflow: hidden;
    }
    .col-content {
      flex: 1; background: var(--bg-body);
      overflow-y: auto; overflow-x: hidden;
      -webkit-overflow-scrolling: touch; /* inércia de scroll no iOS */
    }
    .col-aside {
      width: var(--col3-width); min-width: var(--col3-width);
      background: var(--bg-sidebar); border-left: 1px solid var(--border);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--primary); }

    /* =====================================================
       COLUNA 1 - MENU LATERAL
       ===================================================== */
    .menu-logo {
      padding: 16px 20px; display: flex; align-items: center; gap: 10px;
      border-bottom: 1px solid var(--border);
    }
    .menu-logo-icon { width: 36px; height: 36px; border-radius: 6px; object-fit: contain; }
    .menu-logo-text {
      font-size: 1.1rem; font-weight: 700;
      background: var(--gradient); -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; background-clip: text;
    }
    .menu-user {
      padding: 14px 20px; display: flex; align-items: center; gap: 12px;
      border-bottom: 1px solid var(--border);
    }
    .menu-user-avatar {
      width: 38px; height: 38px; border-radius: 50%; background: var(--bg-card);
      display: flex; align-items: center; justify-content: center; font-size: 16px;
      overflow: hidden; flex-shrink: 0;
    }
    .menu-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .menu-user-info { flex: 1; min-width: 0; }
    .menu-user-name { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .menu-user-role { font-size: 0.72rem; color: var(--primary-light); }
    .menu-nav { flex: 1; overflow-y: auto; padding: 10px 0; }
    .menu-label {
      display: block; padding: 12px 20px 4px; font-size: 0.7rem; font-weight: 600;
      color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em;
    }
    .menu-item {
      display: flex; align-items: center; gap: 12px; padding: 11px 20px;
      color: var(--text-muted); cursor: pointer; transition: all 0.2s;
      border-left: 3px solid transparent; font-size: 0.88rem; text-decoration: none;
    }
    .menu-item:hover { background: var(--bg-hover); color: var(--text); }
    .menu-item.active {
      background: rgba(99, 102, 241, 0.1); color: var(--primary-light);
      border-left-color: var(--primary);
    }
    .menu-item i { font-size: 1.2rem; width: 22px; }
    .menu-badge {
      margin-left: auto; padding: 2px 8px; border-radius: 10px;
      font-size: 0.7rem; font-weight: 600; background: var(--bg-hover); color: var(--primary-light);
    }

    /* =====================================================
       COLUNA 2 - CONTEÚDO PRINCIPAL
       ===================================================== */
    .content-tabs {
      display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--border);
      overflow-x: auto; overflow-y: hidden; background: var(--bg-body);
      scrollbar-width: none; position: sticky; top: 0; z-index: 10;
    }
    .content-tabs::-webkit-scrollbar { display: none; }
    .content-tab {
      padding: 12px 16px; background: none; border: none; color: var(--text-muted);
      cursor: pointer; font-size: 0.88rem; border-bottom: 2px solid transparent;
      margin-bottom: -1px; white-space: nowrap; transition: all 0.2s;
      display: flex; align-items: center; gap: 6px;
    }
    .content-tab:hover { color: var(--text); }
    .content-tab.active { color: var(--primary-light); border-bottom-color: var(--primary); }
    .content-tab i { font-size: 1.1rem; }

    /* Tab dinâmica (oculta por padrão, aparece ao ver perfil de analista) */
    .content-tab.dynamic-tab {
      border-bottom-color: var(--accent); color: var(--accent);
    }
    .content-tab.dynamic-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    .dynamic-tab-close {
      font-size: 0.95rem !important; margin-left: 2px; opacity: 0.6;
      transition: opacity 0.15s;
    }
    .dynamic-tab-close:hover { opacity: 1; }
    .content-section { padding: 20px 24px; display: none; }
    .content-section.active { display: block; }

    /* Welcome banner */
    .welcome-banner {
      background: var(--gradient); border-radius: 16px; padding: 24px;
      margin-bottom: 20px; position: relative; overflow: hidden; color: #fff;
    }
    .welcome-banner::before {
      content: ''; position: absolute; top: -50%; right: -20%;
      width: 300px; height: 300px; background: rgba(255,255,255,0.1); border-radius: 50%;
    }
    .welcome-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
    .welcome-text { font-size: 0.9rem; opacity: 0.9; }

    /* Stats grid */
    .stats-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 14px; margin-bottom: 20px;
    }
    .stat-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px; text-align: center; transition: all 0.2s;
    }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
    .stat-icon { font-size: 1.5rem; margin-bottom: 6px; }
    .stat-value { font-size: 1.4rem; font-weight: 700; color: var(--text); }
    .stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

    /* Quick actions */
    .quick-actions {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 12px; margin-bottom: 20px;
    }
    .quick-action {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      padding: 16px; background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; cursor: pointer; transition: all 0.2s;
      text-decoration: none; color: var(--text-muted);
    }
    .quick-action:hover {
      border-color: var(--primary); color: var(--primary-light);
      transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99,102,241,0.1);
    }
    .quick-action i { font-size: 1.5rem; }
    .quick-action span { font-size: 0.8rem; font-weight: 500; text-align: center; }

    .section-header {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
    }
    .section-title {
      font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 8px;
    }
    .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }

    /* Activity card */
    .activity-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px;
    }
    .activity-card-title {
      font-size: 0.95rem; font-weight: 600; margin-bottom: 14px;
      display: flex; align-items: center; gap: 8px;
    }
    .activity-item {
      display: flex; align-items: center; gap: 12px; padding: 10px;
      border-radius: 8px; transition: background 0.2s;
    }
    .activity-item:hover { background: var(--bg-hover); }
    .activity-icon {
      width: 36px; height: 36px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; background: var(--bg-hover); color: var(--primary-light); flex-shrink: 0;
    }
    .activity-info { flex: 1; }
    .activity-text { font-size: 0.85rem; color: var(--text); }
    .activity-time { font-size: 0.75rem; color: var(--text-dim); }

    /* Book grid */
    .books-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px;
    }
    #section-meus-livros .books-grid {
      grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
      gap: 16px;
      align-items: start;
    }
    @media (max-width: 1280px) {
      #section-meus-livros .books-grid {
        grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
      }
    }
    @media (max-width: 980px) {
      #section-meus-livros .books-grid {
        grid-template-columns: 1fr;
      }
    }

    /* =====================================================
       COLUNA 3 - ASIDE
       ===================================================== */
    .aside-section { padding: 14px; border-bottom: 1px solid var(--border); }
    .aside-title {
      font-size: 0.95rem; font-weight: 600; margin-bottom: 12px;
      display: flex; align-items: center; gap: 8px;
    }
    .aside-tip {
      background: var(--bg-hover); border-radius: 10px; padding: 12px;
      margin-bottom: 8px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5;
    }
    .aside-tip i { color: var(--primary-light); margin-right: 4px; }

    /* =====================================================
       NAVBAR MOBILE
       ===================================================== */
    .navbar-mobile {
      display: none; position: fixed; top: 0; left: 0; right: 0;
      /* notch iOS: safe-area-inset-top garante conteúdo abaixo do notch/Dynamic Island */
      height: calc(var(--navbar-height) + env(safe-area-inset-top, 0px));
      background: var(--bg-sidebar);
      border-bottom: 1px solid var(--border); z-index: 100;
      padding: env(safe-area-inset-top, 0px) 16px 0;
      align-items: center; justify-content: space-between;
    }
    .navbar-btn {
      width: 40px; height: 40px; background: none; border: none;
      color: var(--text); font-size: 1.4rem; cursor: pointer;
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
    }
    .navbar-btn:hover { background: var(--bg-hover); }
    .navbar-logo { display: flex; align-items: center; gap: 8px; }
    .navbar-logo-icon { height: 28px; width: auto; object-fit: contain; }
    .navbar-logo-text {
      font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700;
      background: var(--gradient); -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .menu-overlay {
      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5); z-index: 90;
    }
    .menu-overlay.active { display: block; }

    /* =====================================================
       RESPONSIVE
       ===================================================== */
    @media (max-width: 1100px) {
      .navbar-mobile { display: flex; }
      /* padding-top inclui notch para não cobrir conteúdo atrás do navbar */
      .container { padding-top: calc(var(--navbar-height) + env(safe-area-inset-top, 0px)); }
      .col-menu {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
        transform: translateX(-100%); transition: transform 0.3s ease;
      }
      .col-menu.open { transform: translateX(0); }
      .col-aside {
        /* top abaixo da navbar (inclui notch) */
        position: fixed; top: calc(var(--navbar-height) + env(safe-area-inset-top, 0px)); right: 0; bottom: 0; z-index: 95;
        transform: translateX(100%); transition: transform 0.3s ease;
        padding-bottom: calc(150px + env(safe-area-inset-bottom, 34px));
      }
      .col-aside.open { transform: translateX(0); }
      .content-tabs { display: none; }
      /* Margem inferior — home indicator iOS */
      .content-section { padding-bottom: calc(150px + env(safe-area-inset-bottom, 34px)); }
      .col-content { padding-bottom: calc(150px + env(safe-area-inset-bottom, 34px)); }
      .col-menu .menu-nav { -webkit-overflow-scrolling: touch; padding-bottom: calc(150px + env(safe-area-inset-bottom, 34px)); }
    }
    @media (max-width: 768px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .content-grid { grid-template-columns: 1fr; }
      .quick-actions { grid-template-columns: repeat(2, 1fr); }
      .books-grid { grid-template-columns: 1fr; }
      .book-card {
        display: flex;
        flex-direction: column;
        padding: 0;
        max-width: 100%;
        margin: 0;
        overflow: hidden;
        align-items: stretch;
      }
      .book-cover {
        width: 100%;
        height: 220px;
        transform: none;
        border-radius: 12px 12px 0 0;
        box-shadow: none;
      }
      .book-info {
        padding: 14px;
        gap: 10px;
        border-radius: 0 0 12px 12px;
        border-top: 1px solid var(--border);
      }
      .book-topline { flex-direction: column; }
      .book-badges { justify-content: flex-start; }
      .book-stats-grid { grid-template-columns: repeat(2, 1fr); }
      .book-actions { flex-direction: column; }
      #section-meus-livros .books-grid {
        grid-template-columns: 1fr;
      }
    }

    /* =====================================================
       CRIAR LIVRO - Feature Cards
       ===================================================== */
    .feature-btn {
      display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
      border-radius: 12px; border: none; cursor: pointer; font-size: 0.88rem;
      font-weight: 600; transition: all 0.2s; text-decoration: none;
    }
    .feature-btn.primary { background: var(--gradient); color: #fff; }
    .feature-btn.primary:hover { opacity: 0.9; transform: translateY(-1px); }
    .feature-btn.outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
    .feature-btn.outline:hover { background: var(--primary); color: #fff; }

    /* Editor selection cards */
    .editor-choice-intro {
      text-align: center; margin-bottom: 22px;
    }
    .editor-choice-intro i { font-size: 1.8rem; color: var(--primary); margin-bottom: 6px; display: block; }
    .editor-choice-intro h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
    .editor-choice-intro p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

    .editores-grid {
      display: grid; grid-template-columns: 1fr 1.35fr; gap: 18px;
      align-items: start; margin-bottom: 24px;
    }
    @media (max-width: 1100px) { .editores-grid { grid-template-columns: 1fr; } }

    /* ==========================================================================
       OS QUATRO CAMINHOS — cards QUADRADOS  (02/09/2026)
       --------------------------------------------------------------------------
       Antes eram DOIS cards de altura desigual (`1fr 1.35fr` acima), cada um com
       o detalhe inteiro inline. Card do tamanho do seu conteúdo faz comparar
       CONTEÚDO; card do mesmo tamanho faz comparar ESCOLHA — que é o que esta
       tela pede. O detalhe todo mudou para os modais, mais abaixo.

       As classes antigas (`.editor-hbadge`, `.efg`, `.efl`, `.eftags`,
       `.editor-tool*`, `.editor-ideal`, `.editor-em-breve*`, `.editor-card-desc`)
       CONTINUAM em uso — agora dentro dos modais. Não mexer nelas.
       ========================================================================== */
    /* 🆕 13/09: SEIS caminhos (+ Quadrinhos e Novela), e a grade virou 3 × 2.
       Seis em QUATRO colunas deixava dois órfãos numa linha de baixo pela
       metade — e o olho lê a linha incompleta como «os que sobraram».
       🔑 *O número de colunas tem de dividir o número de cards* — 3 → 2 → 1
          divide seis em todas as larguras, sem órfão em nenhuma. */
    .editores-grid.ed-seis {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    /* O corte em 2 vem antes do de 1 coluna porque card estreito demais corta o
       título; melhor duas colunas maiores que três apertadas. */
    @media (max-width: 1200px) { .editores-grid.ed-seis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 560px)  { .editores-grid.ed-seis { grid-template-columns: 1fr; } }

    .ed-card {
      background: var(--bg-card); border: 2px solid var(--border); border-radius: 16px;
      padding: 16px 16px 14px;
      display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
      /* RETANGULAR, não quadrado. O `aspect-ratio: 1` deixava um vão vazio no
         meio do card do tamanho do próprio conteúdo — quadrado só faz sentido
         quando há o que colocar dentro, e aqui são três linhas.
         Sem `aspect-ratio`: a altura vem do conteúdo, e o `min-height` só
         garante que os quatro fiquem iguais entre si. */
      min-height: 150px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .ed-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10); transform: translateY(-2px); }

    .ed-card-topo   { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .ed-card-icone  {
      width: 44px; height: 44px; border-radius: 12px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.35rem; flex-shrink: 0;
    }
    .ed-card-titulo {
      margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.25;
    }
    .ed-card-linha  {
      margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.35;
    }

    .ed-card-acoes  { display: flex; align-items: center; gap: 8px; }

    .ed-usar {
      flex: 1; min-width: 0;
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      padding: 10px 12px; border: 0; border-radius: 10px;
      font-size: 0.84rem; font-weight: 600; font-family: inherit;
      cursor: pointer; text-decoration: none; color: #fff;
      transition: filter .2s ease;
      /* O rótulo pode ser longo em alemão/russo e não pode empurrar o `ⓘ` para
         fora do card. */
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ed-usar:hover { filter: brightness(1.08); }
    /* 🔴 OBRIGATÓRIO: `display:inline-flex` VENCE o atributo `hidden`, e o botão
       de dev nasce com `hidden`. Sem esta linha ele apareceria para todo mundo —
       e o «Em breve» deixaria de significar o que diz.
       🔑 *Regra de display anula `hidden` em silêncio: quem estiliza um elemento
          que nasce escondido tem de devolver o `display:none`.* */
    .ed-usar[hidden], .ed-info[hidden] { display: none; }

    .ed-info {
      width: 38px; height: 38px; flex-shrink: 0;
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--bg-hover); color: var(--text-muted);
      font-size: 1.05rem; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: color .2s ease, border-color .2s ease;
    }
    .ed-info:hover { color: var(--primary); border-color: var(--primary); }

    /* --- as quatro cores. Uma família por caminho, para o olho achar de longe -- */
    .ed-card.imp { border-color: #c7d2fe; } .ed-card.imp:hover { border-color: #818cf8; }
    .ed-card.en  { border-color: #a7f3d0; } .ed-card.en:hover  { border-color: #34d399; }
    .ed-card.ea  { border-color: #ddd6fe; } .ed-card.ea:hover  { border-color: #a78bfa; }
    .ed-card.ei  { border-color: #fed7aa; } .ed-card.ei:hover  { border-color: #fb923c; }
    /* 🆕 13/09 — Quadrinhos em ROSA (o «POW» da HQ) e Novela em AZUL-CÉU. O
       azul fica longe do índigo do Importar e o rosa longe do laranja do
       Infantil: seis famílias só se acham de longe se nenhuma for vizinha. */
    .ed-card.eq  { border-color: #fbcfe8; } .ed-card.eq:hover  { border-color: #f472b6; }
    .ed-card.nv  { border-color: #bae6fd; } .ed-card.nv:hover  { border-color: #38bdf8; }

    .ed-card.imp .ed-card-icone { background: #eef2ff; color: #4f46e5; }
    .ed-card.en  .ed-card-icone { background: #ecfdf5; color: #059669; }
    .ed-card.ea  .ed-card-icone { background: #f5f3ff; color: #7c3aed; }
    .ed-card.ei  .ed-card-icone { background: #fff7ed; color: #ea580c; }

    /* 🧪 16/09 — o selo de BETA no card. Pílula de BORDA, não de fundo: o texto
       fica em laranja-escuro (#9a3412 sobre #fff7ed ≈ 7:1), legível no modo
       claro e no escuro, e não se confunde com o botão laranja cheio embaixo.
       Mora no CANTO, na altura do ícone: numa linha própria o card crescia e
       ficava mais alto que o vizinho da grade. */
    .ed-card.ei { position: relative; }
    .ed-selo-beta {
      position: absolute; top: 27px; right: 16px;
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 9px; border-radius: 999px;
      border: 1px solid #fb923c; background: #fff7ed; color: #9a3412;
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2px; line-height: 1.5;
      white-space: nowrap;
    }
    .ed-card.eq  .ed-card-icone { background: #fdf2f8; color: #db2777; }
    .ed-card.nv  .ed-card-icone { background: #f0f9ff; color: #0284c7; }

    .ed-usar.imp { background: #4f46e5; }
    .ed-usar.en  { background: #059669; }
    .ed-usar.ea  { background: #7c3aed; }
    .ed-usar.ei  { background: #ea580c; }
    .ed-usar.eq  { background: #db2777; }
    .ed-usar.nv  { background: #0284c7; }

    /* 🔴 O «Em breve» VEM DEPOIS das cores de família, e a ordem é o conserto.
       Antes ele estava ANTES: `.ed-usar.breve` e `.ed-usar.ea` têm a MESMA
       especificidade (0,2,0), então a última no arquivo ganhava — o fundo virava
       violeta/laranja e a cor do texto continuava `--text-muted`, cinza-escuro.
       Resultado na tela: «Em breve» ilegível, sumido dentro do próprio botão.
       🔑 *Entre regras de igual especificidade, quem decide é a ORDEM — e ordem
          não se lê no seletor, só na posição.* Por isso este bloco fica aqui, e
          não junto dos outros estados do botão. */
    .ed-usar.breve {
      background: var(--bg-hover); color: var(--text-muted);
      border: 1px dashed var(--border); cursor: pointer; font-weight: 600;
    }
    .ed-usar.breve:hover { filter: none; border-color: var(--text-dim); color: var(--text); }
    /* A cor de família fica na BORDA, que não disputa legibilidade com o texto. */
    .ed-usar.ea.breve:hover { border-color: #a78bfa; color: #6d28d9; }
    .ed-usar.ei.breve:hover { border-color: #fb923c; color: #c2410c; }
    .ed-usar.eq.breve:hover { border-color: #f472b6; color: #be185d; }
    .ed-usar.nv.breve:hover { border-color: #38bdf8; color: #0369a1; }

    /* ==========================================================================
       OS MODAIS DE INFORMAÇÃO
       --------------------------------------------------------------------------
       🔴 O `display:none` daqui é o que impede o conteúdo de despencar inline
       abaixo dos cards. Os modais moram no HTML (e não são escritos por JS) para
       que o texto leve `data-i18n` e os gates o enxerguem — mas HTML que existe
       é HTML que desenha, até o CSS dizer o contrário.
       ========================================================================== */
    .ed-modal {
      display: none;
      position: fixed; inset: 0; z-index: 2400;
      background: rgba(0,0,0,0.55);
      align-items: center; justify-content: center; padding: 16px;
    }
    .ed-modal.aberto { display: flex; }

    .ed-modal-caixa {
      /* 📱 16/09: era `96vw`, e o `.ed-modal` tem 16px de respiro dos dois lados —
         num celular de 400px a caixa (384) não cabia nos 368 que sobram e saía pela
         DIREITA. `100%` é do espaço que o pai já descontou. */
      width: min(760px, 100%); max-height: 88vh;
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
      display: flex; flex-direction: column; overflow: hidden;
    }
    .ed-modal-topo {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .ed-modal-topo h3 {
      margin: 0; flex: 1; min-width: 0;
      font-size: 1rem; font-weight: 700; color: var(--text);
    }
    .ed-modal-icone {
      width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
    }
    .ed-modal-icone.imp { background: #eef2ff; color: #4f46e5; }
    .ed-modal-icone.en  { background: #ecfdf5; color: #059669; }
    .ed-modal-icone.ea  { background: #f5f3ff; color: #7c3aed; }
    .ed-modal-icone.ei  { background: #fff7ed; color: #ea580c; }
    .ed-modal-icone.eq  { background: #fdf2f8; color: #db2777; }
    .ed-modal-icone.nv  { background: #f0f9ff; color: #0284c7; }

    .ed-modal-fechar {
      width: 34px; height: 34px; flex-shrink: 0;
      border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text-muted);
      cursor: pointer; font-size: 1.05rem;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .ed-modal-fechar:hover { color: var(--text); }

    .ed-modal-corpo  { padding: 16px; overflow-y: auto; flex: 1; }
    .ed-modal-desc   { margin: 0; font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; }
    .ed-modal-rodape {
      padding: 14px 16px; border-top: 1px solid var(--border); flex-shrink: 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    /* No rodapé o botão não divide linha com um `ⓘ`, então pode ocupar tudo. */
    .ed-modal-rodape .ed-usar { flex: none; width: 100%; }

    /* O badge de faixa etária/público solta do centro dentro do modal. */
    .ed-modal-corpo .editor-hbadge { margin-bottom: 10px; }
    .ed-card.ei .editor-hbadge, .editor-hbadge.ei { background: #fff7ed; color: #9a3412; }
    .editor-ideal.ei i { color: #ea580c; }

    /* O `.editor-em-breve` original é violeta CRAVADO (nasceu só para o Editor
       Avançado). Dentro do modal do Infantil ele sairia fora da paleta laranja —
       então a variante troca as quatro cores, e só ali.
       🔑 Reaproveitar componente de um caso só custa uma variante por caso novo;
          é mais barato que duplicá-lo, e é o que mantém as duas telas iguais. */
    #ed-modal-infantil .editor-em-breve {
      background: linear-gradient(135deg, rgba(234,88,12,0.07), rgba(194,65,12,0.03));
      border-color: #fed7aa;
    }
    #ed-modal-infantil .editor-em-breve-badge { background: linear-gradient(135deg,#ea580c,#c2410c); }
    #ed-modal-infantil .editor-em-breve-texto span { color: #9a3412; }
    /* 🧪 16/09 — o aviso de beta tem título (`strong`), que o original pinta de
       violeta: sem esta linha sairia fora da paleta laranja. */
    #ed-modal-infantil .editor-em-breve-texto strong { color: #7c2d12; }

    /* 🆕 13/09 — a mesma variante, para as duas famílias novas. Sem ela os dois
       modais sairiam com o «Em Breve» violeta do Avançado, e o verde dos ✓
       (`.efl li i`, que é do Normal) — as regras de cima são do ELEMENTO, não
       do editor, e cobram de quem passa a morar na mesma casa. */
    .editor-hbadge.eq { background: #fdf2f8; color: #9d174d; }
    .editor-hbadge.nv { background: #f0f9ff; color: #075985; }
    .editor-ideal.eq i { color: #db2777; }
    .editor-ideal.nv i { color: #0284c7; }
    #ed-modal-quadrinhos .efg-title i, #ed-modal-quadrinhos .efl li i { color: #db2777; }
    #ed-modal-novela     .efg-title i, #ed-modal-novela     .efl li i { color: #0284c7; }
    #ed-modal-quadrinhos .editor-em-breve {
      background: linear-gradient(135deg, rgba(219,39,119,0.07), rgba(190,24,93,0.03));
      border-color: #fbcfe8;
    }
    #ed-modal-quadrinhos .editor-em-breve-badge { background: linear-gradient(135deg,#db2777,#be185d); }
    #ed-modal-quadrinhos .editor-em-breve-texto span { color: #9d174d; }
    #ed-modal-novela .editor-em-breve {
      background: linear-gradient(135deg, rgba(2,132,199,0.07), rgba(3,105,161,0.03));
      border-color: #bae6fd;
    }
    #ed-modal-novela .editor-em-breve-badge { background: linear-gradient(135deg,#0284c7,#0369a1); }
    #ed-modal-novela .editor-em-breve-texto span { color: #075985; }

    .editor-card {
      background: var(--bg-card); border: 2px solid var(--border); border-radius: 16px;
      overflow: hidden; transition: all 0.3s ease;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05); display: flex; flex-direction: column;
    }
    .editor-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.1); transform: translateY(-3px); }
    .editor-card.en { border-color: #d1fae5; }
    .editor-card.en:hover { border-color: #6ee7b7; }
    .editor-card.ea { border-color: #ddd6fe; }
    .editor-card.ea:hover { border-color: #a78bfa; }

    .editor-card-header {
      padding: 20px 20px 16px; text-align: center; position: relative;
    }
    .editor-card.en .editor-card-header { background: linear-gradient(135deg, #ecfdf5, #f0fdf4); border-bottom: 1px solid #d1fae5; }
    .editor-card.ea .editor-card-header { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-bottom: 1px solid #ddd6fe; }

    .editor-hbadge {
      display: inline-block; padding: 3px 12px; border-radius: 20px;
      font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
    }
    .editor-hbadge.en { background: #d1fae5; color: #065f46; }
    .editor-hbadge.ea { background: #ede9fe; color: #5b21b6; }

    .editor-card-icon {
      width: 50px; height: 50px; border-radius: 13px; display: flex;
      align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 1.4rem;
    }
    .editor-card.en .editor-card-icon { background: linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow:0 4px 14px rgba(16,185,129,0.35); }
    .editor-card.ea .editor-card-icon { background: linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; box-shadow:0 4px 14px rgba(124,58,237,0.35); }

    .editor-card-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; }
    .editor-card.en .editor-card-title { color: #065f46; }
    .editor-card.ea .editor-card-title { color: #4c1d95; }
    .editor-card-desc { font-size: 0.84rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

    .editor-card-body {
      padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 12px;
    }

    .efg { border-bottom: 1px solid var(--border); padding-bottom: 10px; }
    .efg:last-child { border-bottom: none; padding-bottom: 0; }
    .efg-title {
      font-size: 0.78rem; font-weight: 700; color: var(--text); margin-bottom: 7px;
      display: flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.3px;
    }
    .efg-title i { color: #10b981; font-size: 0.8rem; }

    .efl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
    .efl li { display: flex; align-items: flex-start; gap: 6px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
    .efl li i { color: #10b981; font-size: 0.8rem; flex-shrink: 0; margin-top: 2px; }

    .eftags { display: flex; flex-wrap: wrap; gap: 5px; }
    .eftag {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 3px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 500;
      background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border);
    }
    .eftag.av { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
    .eftag.av i { font-size: 0.7rem; }
    .eftag.cf { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }

    .editor-tool {
      background: var(--bg-hover); border: 1px solid var(--border);
      border-radius: 10px; padding: 11px 13px;
    }
    .editor-tool-header { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
    .editor-tool-icon {
      width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
      background: linear-gradient(135deg,#7c3aed,#6d28d9); color: #fff;
      display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
    }
    .editor-tool-title { font-size: 0.84rem; font-weight: 700; color: var(--text); line-height: 1.2; }
    .editor-tool-sub { font-size: 0.73rem; color: var(--text-dim); margin-top: 2px; }
    .editor-tool-mini { display: flex; flex-direction: column; gap: 4px; }
    .editor-tool-mini span { display: flex; align-items: flex-start; gap: 6px; font-size: 0.79rem; color: var(--text-muted); line-height: 1.35; }
    .editor-tool-mini span i { color: #7c3aed; font-size: 0.79rem; flex-shrink: 0; margin-top: 2px; }

    .editor-card-footer {
      padding: 14px 18px 18px; border-top: 1px solid var(--border); background: var(--bg-hover);
    }
    .editor-ideal {
      font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px;
      display: flex; align-items: center; gap: 5px;
    }
    .editor-ideal.en i { color: #10b981; }
    .editor-ideal.ea i { color: #7c3aed; }

    .btn-criar-editor {
      width: 100%; padding: 12px 18px; border: none; border-radius: 10px;
      font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.3s;
      display: flex; align-items: center; justify-content: center; gap: 7px;
    }
    .btn-criar-editor.en {
      background: linear-gradient(135deg,#10b981,#059669); color: #fff;
      box-shadow: 0 4px 12px rgba(16,185,129,0.3);
    }
    .btn-criar-editor.en:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,185,129,0.45); }

    .editor-em-breve {
      display: flex; align-items: flex-start; gap: 11px;
      background: linear-gradient(135deg, rgba(124,58,237,0.07), rgba(109,40,217,0.03));
      border: 2px dashed #c4b5fd; border-radius: 11px; padding: 13px 15px;
    }
    .editor-em-breve-badge {
      display: inline-flex; align-items: center; gap: 5px;
      background: linear-gradient(135deg,#7c3aed,#6d28d9); color: #fff;
      font-size: 0.72rem; font-weight: 700; padding: 5px 11px;
      border-radius: 20px; white-space: nowrap; letter-spacing: 0.3px; flex-shrink: 0;
    }
    .editor-em-breve-texto { display: flex; flex-direction: column; gap: 3px; }
    .editor-em-breve-texto strong { font-size: 0.83rem; color: #4c1d95; line-height: 1.3; }
    .editor-em-breve-texto span { font-size: 0.76rem; color: #7c6da0; line-height: 1.4; }

    /* 📝 16/09 — saíram `.editor-choice-sep`, `.criar-livro-form`, `.form-row` e
       `.form-actions`: eram do formulário de baixo, que virou o MODAL de criação. */
    .form-group { flex: 1; min-width: 200px; }
    .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
    .form-input {
      width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
      background: var(--bg-body); color: var(--text); font-size: 0.88rem;
      transition: border-color 0.2s; outline: none;
    }
    .form-input:focus { border-color: var(--primary); }

    /* ── 📝 O MODAL DE CRIAÇÃO (16/09) ─────────────────────────────────────────
       Mais estreito que o de detalhes: são dois campos, não uma vitrine. */
    .ed-modal-caixa.ed-criar-caixa { width: min(520px, 100%); }
    #ed-modal-criar .ed-modal-corpo { display: flex; flex-direction: column; gap: 14px; }
    #ed-modal-criar .form-group { min-width: 0; }
    #ed-modal-criar h3 { display: flex; flex-direction: column; gap: 2px; }
    .criar-editor { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
    .criar-dica { margin: 6px 0 0; font-size: 0.74rem; color: var(--text-dim); }
    .criar-erro {
      margin: 0; padding: 8px 12px; border-radius: 8px;
      background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.35);
      color: #b91c1c; font-size: 0.82rem; font-weight: 600;
    }
    /* 🔴 O `.editor-em-breve` é `display:flex`, e display VENCE o `hidden` (a mesma
       lição do `.ed-usar[hidden]`): sem esta linha o aviso de beta apareceria no
       Editor Normal. */
    #ed-modal-criar [hidden] { display: none; }
    /* O aviso de beta aqui dentro tem a paleta LARANJA do Infantil, como no modal
       de detalhes (as regras de lá são por `#ed-modal-infantil`). */
    #ed-modal-criar .editor-beta {
      background: linear-gradient(135deg, rgba(234,88,12,0.07), rgba(194,65,12,0.03));
      border-color: #fed7aa;
    }
    #ed-modal-criar .editor-beta .editor-em-breve-badge { background: linear-gradient(135deg,#ea580c,#c2410c); }
    #ed-modal-criar .editor-beta .editor-em-breve-texto strong { color: #7c2d12; }
    #ed-modal-criar .editor-beta .editor-em-breve-texto span { color: #9a3412; }

    /* =====================================================
       BOOK CARDS MELHORADOS
       ===================================================== */
    .book-card {
      --book-cover-w: 132px;
      --book-cover-h: 198px;
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
      overflow: visible; transition: all 0.22s; cursor: pointer;
      display: grid; grid-template-columns: var(--book-cover-w) minmax(0, 1fr);
      min-height: var(--book-cover-h);
      align-items: center;
      padding: 10px 12px 10px 0;
    }
    .book-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); border-color: var(--primary); }
    .book-cover {
      width: var(--book-cover-w);
      height: var(--book-cover-h);
      background: var(--bg-hover);
      overflow: hidden;
      position: relative;
      border-radius: 12px;
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
      transform: translateX(-8px);
      z-index: 2;
    }
    .book-cover img { width: 100%; height: 100%; object-fit: cover; }
    .book-cover-canvas { width: 100%; height: 100%; position: relative; }
    .book-cover-fallback {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      z-index: 1;
    }
    .book-cover-canvas canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%; display: block; object-fit: cover;
      background: var(--bg-hover);
      z-index: 2;
      transition: opacity 0.2s ease;
    }
    .book-info {
      padding: 14px 14px 12px; display: flex; flex-direction: column; flex: 1;
      min-width: 0; gap: 10px;
      align-self: stretch;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-hover));
    }
    .book-topline {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    }
    .book-head { min-width: 0; }
    .book-title {
      font-size: 1rem; font-weight: 700; color: var(--text);
      line-height: 1.25; margin-bottom: 4px;
    }
    .book-subtitle {
      font-size: 0.8rem; color: var(--text-muted); line-height: 1.35; margin-bottom: 4px;
    }
    .book-volume {
      font-size: 0.74rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px;
    }
    .book-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .book-badge {
      display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
      border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3px;
      border: 1px solid var(--border); background: var(--bg-hover); color: var(--text-muted);
      text-transform: uppercase; white-space: nowrap;
    }
    .book-badge.avancado { background: rgba(99,102,241,0.12); color: var(--primary); border-color: rgba(99,102,241,0.22); }
    .book-badge.simples { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.22); }
    /* 🧒 O terceiro editor, em 10/09: sem esta linha o crachá do livro infantil
       cai no `.book-badge` cru (cinzento), que é a cor de «sem tipo» — e um
       crachá neutro num card onde os outros dois têm cor lê-se como defeito.
       🔑 *Uma classe nova sem regra não desaparece: aparece sem identidade.* */
    .book-badge.infantil { background: rgba(16,185,129,0.12); color: #10b981; border-color: rgba(16,185,129,0.22); }
    /* 🎨 17/09 — o livro de OUTRA pessoa que eu edito como designer. O card
       ganha a borda tracejada: à primeira vista, «isto não é meu». */
    .book-badge.remoto { background: rgba(236,72,153,0.12); color: #ec4899; border-color: rgba(236,72,153,0.25); }
    .book-card.design-remoto { border-style: dashed; border-color: rgba(236,72,153,0.45); }
    .book-remoto-nota { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
    .book-author {
      display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted);
    }
    .book-main-meta {
      display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    }
    .book-price {
      font-size: 1.05rem; font-weight: 700; color: var(--primary-light);
    }
    .book-price.free { color: #22c55e; }
    .book-rating, .book-sales {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 0.76rem; color: var(--text-dim);
      padding: 4px 8px; border-radius: 999px; background: var(--bg-hover);
      border: 1px solid var(--border);
    }
    .book-rating { color: var(--accent); }
    .book-stats-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    }
    .book-stat {
      padding: 9px 10px; border-radius: 10px; background: var(--bg-hover);
      border: 1px solid var(--border); min-width: 0;
    }
    .book-stat-label {
      font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); margin-bottom: 3px;
    }
    .book-stat-value {
      font-size: 0.8rem; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .book-status {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 10px; border-radius: 20px; font-size: 0.68rem;
      font-weight: 600; text-transform: uppercase;
    }
    .book-status.publicado { background: rgba(34,197,94,0.15); color: #22c55e; }
    .book-status.rascunho { background: rgba(245,158,11,0.15); color: #f59e0b; }
    .book-status.andamento { background: rgba(59,130,246,0.15); color: #3b82f6; }
    .book-status.finalizado { background: rgba(139,92,246,0.15); color: #8b5cf6; }
    /* =====================================================
       🌍 SELETOR DE IDIOMA DO CARD (edições traduzidas)
       -----------------------------------------------------
       `margin-top:auto` mudou de dono: era da `.book-actions`, que empurrava
       os botões para o rodapé do card. Agora é DESTA linha, que passou a ser
       a primeira do bloco de baixo — deixar o auto nos dois faria o card
       distribuir o espaço entre eles e separar o seletor dos botões que ele
       comanda. ⚠️ A `.book-actions` guarda a sua própria regra para o card
       SEM seletor, que é a maioria.
       ===================================================== */
    .book-lang-row {
      display: flex; align-items: center; gap: 6px;
      margin-top: auto; padding-top: 6px;
      color: var(--text-muted);
    }
    .book-lang-row i { font-size: 0.9rem; opacity: 0.75; flex-shrink: 0; }
    .book-lang {
      flex: 1; min-width: 0; padding: 7px 8px;
      border-radius: 10px; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text-muted);
      font-size: 0.76rem; font-family: inherit; cursor: pointer;
    }
    .book-lang:hover { border-color: var(--primary); color: var(--primary); }
    .book-lang:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

    /* Botão de leitura desligado enquanto a edição escolhida não é o original.
       🔑 O cursor é `not-allowed` e não `default`: ele responde «não dá», que é
       diferente de «não é clicável» — e a diferença é o que faz a pessoa
       procurar o `title` em vez de achar que a tela travou. */
    .book-btn.is-off {
      opacity: 0.45; cursor: not-allowed; pointer-events: auto;
    }
    .book-btn.is-off:hover { border-color: var(--border); color: var(--text-muted); }

    .book-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
    /* Com o seletor presente, quem empurra para o rodapé é a linha dele. */
    .book-lang-row + .book-actions { margin-top: 8px; }
    .book-btn {
      flex: 1; min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text-muted); font-size: 0.76rem;
      cursor: pointer; transition: all 0.2s; text-align: center; text-decoration: none;
      display: flex; align-items: center; justify-content: center; gap: 4px;
    }
    .book-btn:hover { border-color: var(--primary); color: var(--primary); }
    .book-btn.primary {
      background: var(--gradient); color: #fff; border-color: transparent;
    }
    .book-btn.primary:hover { color: #fff; filter: brightness(1.05); }
    .book-btn.danger {
      color: #ef4444; border-color: rgba(239,68,68,0.32);
      background: rgba(239,68,68,0.08);
    }
    .book-btn.danger:hover {
      color: #fff; border-color: #ef4444; background: #ef4444;
    }

    /* Layout vertical do card em mobile (override após base) */
    @media (max-width: 768px) {
      .book-card {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        padding: 16px 12px 0 !important;
        min-height: unset !important;
        overflow: visible !important;
        align-items: center;
      }
      .book-cover {
        width: 140px !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
        transform: none !important;
        border-radius: 10px !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28) !important;
        flex-shrink: 0;
      }
      .book-info {
        width: 100% !important;
        padding: 14px 12px !important;
        gap: 10px !important;
        border-radius: 0 0 12px 12px !important;
        border-top: 1px solid var(--border) !important;
        align-self: stretch;
        margin-top: 12px;
      }
      .book-topline { flex-direction: column; }
      .book-badges { justify-content: flex-start; }
      .book-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .book-actions { flex-direction: column; }
    }

    .delete-critical-overlay {
      position: fixed; inset: 0; z-index: 1200;
      background: rgba(0, 0, 0, 0.5);
      display: flex; align-items: center; justify-content: center;
      padding: 18px;
    }
    .delete-critical-modal {
      width: min(500px, 100%);
      background: #ffffff;
      border: 0;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      color: #374151;
    }
    .delete-critical-head {
      padding: 22px 24px 0;
      background: transparent;
      border-bottom: 0;
      display: flex; align-items: center; gap: 10px;
      color: #dc2626;
      font-weight: 700;
      font-size: 1.3rem;
    }
    .delete-critical-body {
      padding: 12px 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: #374151;
      font-size: 0.95rem;
      line-height: 1.5;
    }
    .delete-critical-book {
      color: #111827;
      font-weight: 700;
    }
    .delete-critical-book-meta {
      display: grid;
      grid-template-columns: 84px 1fr;
      gap: 6px 10px;
      font-size: 0.92rem;
      color: #374151;
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 10px;
    }
    .delete-critical-book-meta b {
      color: #111827;
      font-weight: 700;
    }
    .delete-critical-warning {
      color: #dc2626;
      font-size: 0.9rem;
      margin-bottom: 2px;
      padding: 10px;
      background: #fef2f2;
      border-radius: 8px;
    }
    .delete-critical-note {
      color: #6b7280;
      font-size: 0.95rem;
      margin-bottom: 2px;
    }
    .delete-critical-code-sent {
      background: #fef3c7;
      border: 1px solid #f59e0b;
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 2px;
      color: #92400e;
      font-size: 0.9rem;
    }
    .delete-critical-label {
      display: block;
      font-weight: 600;
      margin-bottom: 2px;
      color: #374151;
    }
    .delete-critical-input {
      width: 100%;
      border: 2px solid #d1d5db;
      border-radius: 8px;
      background: #ffffff;
      color: #111827;
      padding: 12px;
      outline: none;
      font-size: 18px;
      text-align: center;
      letter-spacing: 5px;
      box-sizing: border-box;
    }
    .delete-critical-input:focus {
      border-color: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
    }
    .delete-critical-stage-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 2px;
    }
    .delete-critical-actions {
      padding: 0 24px 24px;
      border-top: 0;
      display: flex;
      gap: 10px;
      justify-content: flex-start;
      background: transparent;
    }
    .delete-critical-btn {
      width: 100%;
      border: 0;
      border-radius: 8px;
      padding: 11px 16px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      background: #f3f4f6;
      color: #6b7280;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .delete-critical-btn:hover { transform: translateY(-1px); }
    .delete-critical-btn.primary {
      background: linear-gradient(135deg, #9333ea, #7c3aed);
      color: #ffffff;
      box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25);
    }
    .delete-critical-btn.primary.danger {
      background: #dc2626;
      box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
    }
    .delete-critical-btn.primary[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* =====================================================
       PROCURAR ANALISTAS
       ===================================================== */
    .search-bar-container { margin-bottom: 20px; }
    .search-bar-row { display: flex; gap: 12px; flex-wrap: wrap; }
    .search-input-wrapper { position: relative; flex: 1; min-width: 200px; }
    .search-input-wrapper i {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      color: var(--text-dim); font-size: 1rem;
    }
    .search-input {
      width: 100%; padding: 10px 16px 10px 40px;
      border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card);
      color: var(--text); font-size: 0.88rem; outline: none; transition: border-color 0.2s;
    }
    .search-input:focus { border-color: var(--primary); }
    .analyst-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
    }
    .analyst-sections { display: flex; flex-direction: column; gap: 16px; }
    .analyst-group {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
      padding: 14px;
    }
    .analyst-group-header {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      margin-bottom: 12px; flex-wrap: wrap;
    }
    .analyst-group-title {
      font-size: 0.92rem; font-weight: 700; color: var(--text);
      display: inline-flex; align-items: center; gap: 8px;
    }
    .analyst-group-title i { color: var(--primary); }
    .analyst-group-count {
      font-size: 0.72rem; color: var(--text-dim); background: var(--bg-hover);
      border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
    }
    .analyst-card {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
      padding: 20px; transition: all 0.25s; display: flex; flex-direction: column; height: 100%;
    }
    .analyst-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); border-color: var(--primary); }
    .analyst-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
    .analyst-avatar {
      width: 48px; height: 48px; border-radius: 50%; background: var(--bg-hover);
      display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
      color: var(--primary-light); overflow: hidden; flex-shrink: 0;
    }
    .analyst-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .analyst-name { font-size: 0.95rem; font-weight: 600; color: var(--text); }
    .analyst-club { font-size: 0.78rem; color: var(--text-muted); }
    .analyst-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .analyst-spec-tag {
      padding: 3px 10px; border-radius: 20px; font-size: 0.7rem;
      background: var(--bg-hover); color: var(--primary-light); font-weight: 500;
    }
    .analyst-stats {
      display: flex; gap: 16px; margin-bottom: 14px; padding: 10px 0;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      margin-top: auto;
    }
    .analyst-stat { text-align: center; flex: 1; }
    .analyst-stat-value { font-size: 1rem; font-weight: 700; color: var(--text); }
    .analyst-stat-label { font-size: 0.68rem; color: var(--text-dim); }
    .analyst-btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      padding: 10px; border-radius: 10px; border: none; cursor: pointer;
      font-size: 0.82rem; font-weight: 600; background: var(--gradient);
      color: #fff; transition: all 0.2s; margin-top: 12px; text-decoration: none;
    }
    .analyst-btn:hover { opacity: 0.9; transform: translateY(-1px); }
    .analyst-btn.following {
      background: transparent; border: 1px solid #22c55e; color: #22c55e;
    }
    .analyst-btn.following:hover {
      background: rgba(34,197,94,0.08);
    }
    .analyst-disponivel {
      display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem;
      color: #22c55e; font-weight: 500;
    }
    .analyst-disponivel.indisponivel { color: var(--text-dim); }
    .analyst-verificado { color: #3b82f6; font-size: 0.9rem; }

    .analyst-modal-overlay {
      position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.55);
      display: flex; align-items: center; justify-content: center; padding: 16px;
    }
    .analyst-modal {
      width: min(840px, 96vw); max-height: 90vh; overflow-y: auto;
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    }
    .analyst-modal-header {
      position: sticky; top: 0; z-index: 2; background: var(--bg-card);
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; border-bottom: 1px solid var(--border);
    }
    .analyst-modal-title { margin: 0; font-size: 0.96rem; color: var(--text); }
    .analyst-modal-close {
      width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text-muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .analyst-modal-body { padding: 16px; }
    .analyst-modal-perfil { display: grid; grid-template-columns: 72px 1fr; gap: 12px; margin-bottom: 12px; }
    .analyst-modal-avatar {
      width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
      border: 2px solid var(--border); background: var(--bg-hover);
      display: flex; align-items: center; justify-content: center;
      color: var(--primary-light); font-size: 1.5rem;
    }
    .analyst-modal-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .analyst-modal-sub { color: var(--text-muted); font-size: 0.8rem; margin-top: 3px; }
    .analyst-modal-bio {
      margin-top: 8px; padding: 10px; border: 1px solid var(--border);
      border-radius: 10px; background: var(--bg-hover); color: var(--text-muted);
      font-size: 0.84rem; line-height: 1.45;
    }
    .analyst-modal-pacotes-title { font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 12px 0 10px; }
    .analyst-modal-pacotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
    .analyst-modal-pacote {
      border: 1px solid var(--border); border-radius: 12px; padding: 10px;
      background: var(--bg-hover);
    }
    .analyst-modal-pacote-tipo { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
    .analyst-modal-pacote-nome { font-size: 0.83rem; font-weight: 600; color: var(--text); margin-bottom: 7px; }
    .analyst-modal-pacote-meta { font-size: 0.76rem; color: var(--text-muted); }

    /* Tab oculta: perfil e pacotes do analista */
    .analyst-detail-wrap { display: flex; flex-direction: column; gap: 16px; }
    .analyst-detail-head {
      display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    }
    .analyst-detail-profile {
      background: var(--gradient);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 14px; padding: 24px; color: #fff;
      display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px;
      width: 100%; box-sizing: border-box; margin-bottom: 18px;
    }
    .analyst-detail-profile-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .analyst-detail-profile-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
    }
    .analyst-detail-profile-meta {
      min-width: 0;
      flex: 1;
    }
    .analyst-detail-avatar {
      width: 250px; height: 250px; border-radius: 16px; border: 3px solid rgba(255,255,255,0.35);
      overflow: hidden; background: rgba(255,255,255,0.12);
      display: flex; align-items: center; justify-content: center; font-size: 4rem;
      align-self: start;
    }
    .analyst-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .analyst-detail-name { margin: 0; font-size: 1.15rem; color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
    .analyst-detail-sub { font-size: 0.82rem; color: rgba(255,255,255,0.82); margin-top: 3px; }
    .analyst-detail-disponivel {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 0.78rem; font-weight: 600; color: #4ade80; margin-top: 4px;
    }
    .analyst-detail-disponivel.indisponivel { color: rgba(255,255,255,0.4); }

    /* Stats bar de avaliação */
    .analyst-stats-bar {
      display: flex; align-items: center; gap: 0;
      margin-top: 12px; background: rgba(0,0,0,0.25);
      border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
      overflow: hidden; width: fit-content;
    }
    .analyst-stats-bar-item {
      padding: 10px 18px; display: flex; flex-direction: column; align-items: center; gap: 3px;
    }
    .analyst-stats-bar-divider { width: 1px; background: rgba(255,255,255,0.12); align-self: stretch; }
    .analyst-stats-bar-value { display: flex; align-items: center; gap: 5px; }
    .analyst-stats-bar-num { font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1; }
    .analyst-stats-bar-label { font-size: 0.68rem; color: rgba(255,255,255,0.65); text-align: center; }
    .analyst-stars { display: inline-flex; gap: 2px; color: rgba(255,255,255,0.9); font-size: 1.1rem; }
    .analyst-detail-bio {
      margin-top: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.88);
      background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.14);
      border-radius: 10px; padding: 10px;
    }
    .analyst-bundles-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 255px));
      gap: 14px; align-items: stretch; justify-content: center;
    }
    .analyst-bundle-card {
      background: var(--bg-card); border-radius: 14px; overflow: hidden;
      border: 2px solid transparent; display: flex; flex-direction: column;
    }
    .analyst-bundle-card.bronze { border-color: #CD7F32; }
    .analyst-bundle-card.prata { border-color: #C0C0C0; }
    .analyst-bundle-card.ouro { border-color: #FFD700; }
    .analyst-bundle-card.platina { border-color: #E5E4E2; }
    .analyst-bundle-header { padding: 14px; text-align: center; }
    .analyst-bundle-card.bronze .analyst-bundle-header { background: linear-gradient(135deg, #CD7F32, #8B4513); }
    .analyst-bundle-card.prata .analyst-bundle-header { background: linear-gradient(135deg, #C0C0C0, #808080); }
    .analyst-bundle-card.ouro .analyst-bundle-header { background: linear-gradient(135deg, #FFD700, #DAA520); }
    .analyst-bundle-card.platina .analyst-bundle-header { background: linear-gradient(135deg, #E5E4E2, #B0AEB0); }
    .analyst-bundle-tipo { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1.3px; color: rgba(0,0,0,0.62); }
    .analyst-bundle-nome { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin: 4px 0; }
    .analyst-bundle-valor { font-size: 1.4rem; font-weight: 800; color: #1a1a2e; }
    .analyst-bundle-valor small { font-size: 0.74rem; font-weight: 500; }
    .analyst-bundle-body { padding: 12px; display: flex; flex-direction: column; flex: 1; }
    .analyst-bundle-desc { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }
    .analyst-obrigatorios {
      background: rgba(0,0,0,0.18); border: 1px solid var(--border); border-radius: 10px;
      padding: 10px; margin-bottom: 10px;
    }
    .analyst-obrigatorios-title { font-size: 0.68rem; color: #4caf50; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
    .analyst-ob-item { display: flex; gap: 7px; align-items: center; font-size: 0.72rem; color: var(--text-muted); padding: 5px 0; }
    .analyst-ob-item i { color: #4caf50; }
    .analyst-bundle-itens { list-style: none; padding: 0; margin: 0; }
    .analyst-bundle-itens li {
      font-size: 0.72rem; color: var(--text-muted); padding: 5px 0;
      display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .analyst-bundle-itens li:last-child { border-bottom: none; }
    .analyst-bundle-itens i { color: #22c55e; }
    .analyst-bundle-prazo { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.76rem; color: var(--text-dim); }

    .analyst-detail-layout {
      position: relative;
      min-height: 220px;
    }
    .analyst-detail-main {
      min-width: 0;
      transition: filter 0.24s ease;
    }
    .analyst-detail-layout.chat-open .analyst-detail-main {
      filter: saturate(0.97);
    }
    .analyst-detail-layout.chat-open .analyst-detail-profile-top {
      padding-right: min(390px, 36vw);
      transition: padding-right 0.24s ease;
    }
    .analyst-detail-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
      align-items: flex-start;
      flex-shrink: 0;
      max-width: 260px;
    }
    .analyst-chat-panel {
      position: absolute;
      top: 0;
      right: 0;
      width: min(360px, calc(100vw - 84px));
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 18px;
      min-height: 380px;
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
      opacity: 0;
      transform: translate3d(28px, 0, 0) scale(0.985);
      transform-origin: top right;
      pointer-events: none;
      overflow: hidden;
      z-index: 4;
      transition: opacity 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
    }
    .analyst-detail-layout.chat-open .analyst-chat-panel {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      pointer-events: auto;
    }
    .analyst-chat-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 14px 14px 12px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(99,102,241,0.08), transparent);
    }
    .analyst-chat-title {
      font-size: 0.84rem;
      font-weight: 700;
      color: var(--text);
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .analyst-chat-tools { display: inline-flex; align-items: center; gap: 6px; }
    .analyst-mini-btn {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text-muted);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 700;
    }
    .analyst-mini-btn:hover { border-color: var(--primary); color: var(--primary); }
    .analyst-chat-body {
      padding: 12px 14px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .analyst-chat-note {
      font-size: 0.78rem;
      color: var(--text-muted);
      line-height: 1.5;
      background: linear-gradient(180deg, rgba(99,102,241,0.05), var(--bg-hover));
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 11px 12px;
    }
    .analyst-chat-actions { display: flex; flex-wrap: wrap; gap: 8px; }

    /* Bundle footer / botão contratar */
    .analyst-bundle-footer {
      padding: 10px 14px 14px;
      border-top: 1px solid var(--border);
    }
    .analyst-btn-contratar {
      width: 100%; padding: 10px 14px; border-radius: 10px; border: none;
      background: var(--primary); color: #fff; font-size: 0.83rem; font-weight: 700;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      gap: 7px; transition: filter 0.18s;
    }
    .analyst-btn-contratar:hover:not(:disabled) { filter: brightness(1.12); }
    .analyst-btn-contratar:disabled { opacity: 0.45; cursor: not-allowed; filter: none; background: var(--bg-hover); color: var(--text-dim); }

    /* Seções extras do perfil analista */
    .analyst-perfil-section { margin-top: 14px; }
    .analyst-perfil-section-title {
      display: flex; align-items: center; gap: 6px;
      font-size: 0.73rem; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
    }
    .analyst-tags-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .analyst-tag-idioma { background: rgba(99,102,241,0.1); color: var(--primary); }
    .analyst-formacao-list {
      list-style: none; display: flex; flex-direction: column; gap: 5px;
    }
    .analyst-formacao-list li {
      display: flex; align-items: center; gap: 7px;
      font-size: 0.8rem; color: var(--text);
    }
    .analyst-formacao-list li i { color: var(--primary-light); flex-shrink: 0; }
    .analyst-social-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .analyst-social-link {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
      background: var(--bg-hover); color: var(--text-muted); text-decoration: none;
      border: 1px solid var(--border); transition: all 0.18s;
    }
    .analyst-social-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

    /* ── Sobrescreve variáveis de tema dentro da tarja gradiente ──
       A tarja sempre tem fundo colorido (var --gradient), então o texto
       deve ser branco independente do tema selecionado.              */
    .analyst-detail-profile .analyst-perfil-section-title {
      color: rgba(255, 255, 255, 0.75);
    }
    .analyst-detail-profile .analyst-formacao-list li {
      color: rgba(255, 255, 255, 0.9);
    }
    .analyst-detail-profile .analyst-formacao-list li i {
      color: rgba(255, 255, 255, 0.85);
    }
    .analyst-detail-profile .analyst-tag-idioma {
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .analyst-detail-profile .analyst-social-link {
      background: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.9);
      border-color: rgba(255, 255, 255, 0.3);
    }
    .analyst-detail-profile .analyst-social-link:hover {
      background: rgba(255, 255, 255, 0.3);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.55);
    }
    .analyst-detail-profile .analyst-spec-tag {
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Botão de chat no perfil */
    .analyst-btn-chat {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(99,102,241,0.22);
      background: rgba(99,102,241,0.06); color: var(--primary); font-size: 0.83rem;
      font-weight: 700; cursor: pointer; white-space: nowrap; transition: all 0.18s;
    }
    .analyst-btn-ghost {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.08); color: #fff; font-size: 0.83rem;
      font-weight: 700; cursor: pointer; white-space: nowrap; transition: all 0.18s;
    }
    .analyst-btn-ghost:hover {
      background: rgba(255,255,255,0.16);
      border-color: rgba(255,255,255,0.32);
    }
    .analyst-btn-chat:hover, .analyst-btn-chat.chat-ativo {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
      box-shadow: 0 12px 24px rgba(99,102,241,0.22);
    }

    /* Área de input do chat inline */
    .analyst-chat-input-area {
      display: flex; gap: 8px; padding: 12px 14px 14px;
      border-top: 1px solid var(--border); background: linear-gradient(180deg, transparent, rgba(99,102,241,0.04));
    }
    .analyst-chat-input-area input {
      flex: 1; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text); font-size: 0.83rem; outline: none;
    }
    .analyst-chat-input-area input:focus { border-color: var(--primary); }
    .analyst-chat-send-btn {
      width: 40px; height: 40px; border-radius: 12px; border: none;
      background: var(--primary); color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
      flex-shrink: 0; transition: filter 0.18s;
    }
    .analyst-chat-send-btn:hover { filter: brightness(1.12); }
    .analyst-chat-msgs { display: flex; flex-direction: column; gap: 6px; }
    .analyst-chat-msg {
      padding: 7px 10px; border-radius: 8px; font-size: 0.8rem;
      line-height: 1.4; max-width: 88%; word-break: break-word;
    }
    .analyst-chat-msg.enviado {
      background: var(--primary); color: #fff;
      align-self: flex-end; border-bottom-right-radius: 3px;
    }
    .analyst-chat-msg.recebido {
      background: var(--bg-hover); color: var(--text);
      align-self: flex-start; border-bottom-left-radius: 3px;
    }
    .analyst-chat-msg .msg-hora { font-size: 0.68rem; opacity: 0.7; display: block; margin-top: 3px; }

    /* Overlay checkout (seleção de livro) */
    .analyst-checkout-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.55);
      z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 20px;
    }
    .analyst-checkout-box {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
      padding: 28px; width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 16px;
    }
    .analyst-checkout-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; }
    .analyst-checkout-box select, .analyst-checkout-box textarea {
      width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text); font-size: 0.85rem; outline: none; box-sizing: border-box;
    }
    .analyst-checkout-box select:focus, .analyst-checkout-box textarea:focus { border-color: var(--primary); }
    .analyst-checkout-box textarea { resize: vertical; min-height: 80px; }
    .analyst-checkout-row { display: flex; gap: 10px; }
    .analyst-checkout-cancel-btn {
      flex: 1; padding: 10px; border-radius: 9px; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text-muted); font-size: 0.83rem; cursor: pointer;
    }
    .analyst-checkout-confirm-btn {
      flex: 2; padding: 10px; border-radius: 9px; border: none;
      background: var(--primary); color: #fff; font-size: 0.83rem; font-weight: 700;
      cursor: pointer; transition: filter 0.18s;
    }
    .analyst-checkout-confirm-btn:hover { filter: brightness(1.12); }
    .analyst-checkout-confirm-btn:disabled { opacity: 0.6; cursor: default; }

    /* =====================================================
       LIVROS EM ANÁLISE
       ===================================================== */
    .analise-filtros {
      display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
    }
    .analise-filtro-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text-muted); font-size: 0.78rem;
      /* line-height 1 não cabe CJK: coreano/japonês/chinês desenham glifos mais
         altos que o latino e o texto vazava 2px para fora do botão (apareceu na
         conferência ko de 07/08/2026, nos 5 filtros de uma vez). 1.3 dá a folga
         e não muda nada visível em alfabeto latino. */
      font-weight: 500; cursor: pointer; transition: all 0.2s; line-height: 1.3;
    }
    .analise-filtro-btn:hover { border-color: var(--primary); color: var(--primary); }
    .analise-filtro-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
    .analise-filtro-count {
      padding: 1px 7px; border-radius: 10px; font-size: 0.68rem; font-weight: 700;
      background: rgba(255,255,255,0.18);
    }
    .analise-filtro-btn:not(.active) .analise-filtro-count {
      background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
    }
    .analysis-list { display: flex; flex-direction: column; gap: 12px; }
    .analysis-item {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
      padding: 18px; transition: all 0.2s; display: flex; align-items: center; gap: 16px;
    }
    .analysis-item:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
    .analysis-cover {
      width: 50px; height: 70px; border-radius: 8px; overflow: hidden;
      background: var(--bg-hover); flex-shrink: 0;
    }
    .analysis-cover img { width: 100%; height: 100%; object-fit: cover; }
    .analysis-info { flex: 1; min-width: 0; }
    .analysis-title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
    .analysis-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }
    .status-pill {
      display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px;
      border-radius: 20px; font-size: 0.72rem; font-weight: 600;
    }
    .status-pill.aguardando { background: rgba(245,158,11,0.15); color: #f59e0b; }
    .status-pill.andamento { background: rgba(59,130,246,0.15); color: #3b82f6; }
    .status-pill.concluido { background: rgba(34,197,94,0.15); color: #22c55e; }
    .status-pill.recusado { background: rgba(239,68,68,0.15); color: #ef4444; }
    .status-pill.cancelado { background: rgba(156,163,175,0.15); color: #9ca3af; }
    .analysis-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .analysis-btn {
      padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text-muted); font-size: 0.78rem;
      cursor: pointer; transition: all 0.2s; text-decoration: none;
      display: flex; align-items: center; gap: 4px;
    }
    .analysis-btn:hover { border-color: var(--primary); color: var(--primary); }

    /* Ação que só aparece quando a vez é do autor (confirmar a entrega e soltar
       o pagamento). Verde e cheio para não competir com o "Detalhes" cinza ao
       lado: é a única coisa que ele precisa fazer naquela linha. */
    .analysis-btn.destaque {
      background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 600;
    }
    .analysis-btn.destaque:hover {
      background: #15803d; border-color: #15803d; color: #fff;
    }
    /* A ação de dinheiro não pode ser a que quebra primeiro no celular: em tela
       estreita a linha vira coluna e os dois botões ocupam a largura toda. */
    @media (max-width: 640px) {
      .analysis-actions { flex-direction: column; width: 100%; }
      .analysis-actions .analysis-btn { justify-content: center; }
    }

    /* =====================================================
       MODAL DETALHES DA CONTRATAÇÃO
       ===================================================== */
    .contratacao-detalhe-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.58);
      z-index: 9995; display: flex; align-items: flex-start; justify-content: center;
      padding: 24px 16px; overflow-y: auto;
    }
    .contratacao-detalhe-box {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px;
      width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 0;
      overflow: hidden; margin: auto;
    }
    .contratacao-detalhe-loading { padding: 60px 0; }
    .contratacao-detalhe-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 22px 16px; border-bottom: 1px solid var(--border);
      position: sticky; top: 0; background: var(--bg-card); z-index: 2;
    }
    .contratacao-detalhe-title-row { display: flex; align-items: center; gap: 10px; }
    .contratacao-detalhe-close {
      width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text-muted); font-size: 1.1rem;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.18s; flex-shrink: 0;
    }
    .contratacao-detalhe-close:hover { border-color: var(--primary); color: var(--primary); }

    /* Livro + Analista */
    .contratacao-detalhe-top {
      display: flex; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border);
    }
    .contratacao-detalhe-cover {
      width: 64px; height: 90px; border-radius: 10px; overflow: hidden;
      background: var(--bg-hover); flex-shrink: 0;
    }
    .contratacao-detalhe-cover img { width: 100%; height: 100%; object-fit: cover; }
    .contratacao-detalhe-cover-placeholder {
      width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; color: var(--text-dim);
    }
    .contratacao-detalhe-book-info { flex: 1; min-width: 0; }
    .contratacao-detalhe-livro { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
    .contratacao-detalhe-subtitulo { font-size: 0.82rem; font-style: italic; color: var(--text-muted); margin-bottom: 3px; }
    .contratacao-detalhe-volume { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--primary-light); background: rgba(var(--primary-rgb,99,102,241),0.1); padding: 2px 9px; border-radius: 10px; margin-bottom: 8px; }
    .contratacao-detalhe-volume i { font-size: 0.78rem; }
    .contratacao-detalhe-sinopse { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.45; }
    .contratacao-detalhe-analista { display: flex; align-items: center; gap: 8px; }
    .contratacao-detalhe-avatar {
      width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
      background: var(--bg-hover); flex-shrink: 0; border: 2px solid var(--border);
    }
    .contratacao-detalhe-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .contratacao-detalhe-avatar-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--text-dim); }
    .contratacao-detalhe-analista-nome { font-size: 0.83rem; font-weight: 600; color: var(--text); }
    .contratacao-detalhe-analista-label { font-size: 0.7rem; color: var(--text-muted); }

    /* Seções internas */
    .contratacao-detalhe-section { padding: 16px 22px; border-bottom: 1px solid var(--border); }
    .contratacao-detalhe-section-title {
      font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
      letter-spacing: 0.05em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
    }
    .contratacao-bundle-nome { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
    .contratacao-bundle-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.45; }
    .contratacao-bundle-itens { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .contratacao-bundle-item {
      display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
      background: rgba(var(--primary-rgb, 99,102,241),0.08); border: 1px solid rgba(var(--primary-rgb, 99,102,241),0.18);
      border-radius: 20px; font-size: 0.73rem; color: var(--text); font-weight: 500;
    }
    .contratacao-bundle-item i { color: var(--primary); font-size: 0.78rem; }
    .contratacao-bundle-meta { display: flex; flex-direction: column; gap: 4px; }
    .contratacao-info-row { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); }
    .contratacao-info-row i { color: var(--primary); }
    .contratacao-valor { color: var(--primary-light); font-size: 0.9rem; }

    /* Timeline */
    .contratacao-timeline { display: flex; flex-direction: column; gap: 8px; }
    .contratacao-timeline-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
    .contratacao-timeline-item i { color: var(--primary); font-size: 0.9rem; flex-shrink: 0; }
    .contratacao-timeline-item.concluido i { color: #22c55e; }

    /* Mensagem do autor */
    .contratacao-mensagem-autor {
      display: flex; gap: 10px; align-items: flex-start;
      background: var(--bg-hover); border-radius: 10px; padding: 12px; font-size: 0.8rem; color: var(--text-muted);
    }
    .contratacao-mensagem-autor i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }

    /* Ações */
    .contratacao-detalhe-actions { padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; }
    .contratacao-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .contratacao-btn {
      display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px;
      border-radius: 10px; border: 1px solid var(--border); font-size: 0.83rem;
      font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none;
    }
    .contratacao-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); flex: 1; justify-content: center; }
    .contratacao-btn.primary:hover { filter: brightness(1.1); }
    .contratacao-btn.secondary { background: var(--bg-hover); color: var(--text-muted); flex: 1; justify-content: center; }
    .contratacao-btn.secondary:hover { border-color: var(--primary); color: var(--primary); }
    .contratacao-btn.warning { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.3); flex: 1; justify-content: center; }
    .contratacao-btn.warning:hover { background: rgba(245,158,11,0.22); }
    .contratacao-btn.danger { background: rgba(239,68,68,0.1); color: #ef4444; border-color: rgba(239,68,68,0.25); justify-content: center; }
    .contratacao-btn.danger:hover { background: rgba(239,68,68,0.2); }
    .contratacao-btn:disabled { opacity: 0.55; cursor: default; pointer-events: none; }

    /* Avisos */
    .contratacao-aviso {
      display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px;
      border-radius: 10px; font-size: 0.8rem; line-height: 1.5;
    }
    .contratacao-aviso i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
    .contratacao-aviso.info { background: rgba(59,130,246,0.1); color: #3b82f6; }
    .contratacao-aviso.success { background: rgba(34,197,94,0.1); color: #16a34a; }
    .contratacao-aviso.warning { background: rgba(245,158,11,0.1); color: #b45309; }
    .contratacao-aviso.danger { background: rgba(239,68,68,0.1); color: #dc2626; }
    .contratacao-aviso.muted { background: var(--bg-hover); color: var(--text-muted); }

    /* Área de feedback (revisão/cancelamento) */
    #contratacao-feedback-area { padding: 0 22px 16px; display: flex; flex-direction: column; gap: 10px; }
    .contratacao-textarea {
      width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
      background: var(--bg-hover); color: var(--text); font-size: 0.85rem; outline: none;
      resize: vertical; box-sizing: border-box; font-family: inherit;
    }
    .contratacao-textarea:focus { border-color: var(--primary); }

    /* Toast */
    .contratacao-toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
      z-index: 10000; padding: 12px 22px; border-radius: 12px; font-size: 0.85rem;
      font-weight: 500; opacity: 0; transition: all 0.3s; pointer-events: none; white-space: nowrap;
      box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    }
    .contratacao-toast.contratacao-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* Tab badge */
    .tab-badge {
      padding: 1px 7px; border-radius: 10px; font-size: 0.68rem; font-weight: 600;
      background: var(--primary); color: #fff; margin-left: 4px;
    }

    /* Empty state & Loading */
    .empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
    .empty-state i { font-size: 3rem; display: block; margin-bottom: 12px; color: var(--primary); opacity: 0.5; }
    .empty-state p { font-size: 0.9rem; margin-bottom: 8px; }
    .loading-spinner { display: flex; justify-content: center; padding: 40px; }
    .loading-spinner::after {
      content: ''; width: 32px; height: 32px; border: 3px solid var(--border);
      border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Responsive extras */
    @media (max-width: 768px) {
      .feature-cards { grid-template-columns: 1fr; }
      .analyst-grid { grid-template-columns: 1fr; }
      .analyst-modal-perfil { grid-template-columns: 1fr; }
      .analyst-detail-profile { grid-template-columns: 1fr; }
      .analyst-detail-avatar { width: 120px; height: 120px; border-radius: 50%; font-size: 2.5rem; margin: 0 auto; }
      .analyst-detail-profile-top {
        flex-direction: column;
        align-items: stretch;
      }
      .analyst-detail-layout.chat-open .analyst-detail-profile-top {
        padding-right: 0;
      }
      .analyst-detail-actions {
        justify-content: flex-end;
        max-width: none;
      }
      .analyst-chat-panel {
        position: static;
        width: 100%;
        margin-top: 14px;
        min-height: 0;
        transform: translateY(-6px);
        box-shadow: none;
      }
      .analyst-detail-layout.chat-open .analyst-chat-panel {
        transform: translateY(0);
      }
      .analysis-item { flex-direction: column; align-items: flex-start; }
      .analysis-actions { width: 100%; }
    }