:root {
      --bg:          #0f1117;
      --surface:     #171c27;
      --surface2:    #1e2435;
      --border:      #2a3040;
      --blue:        #3b82f6;
      --blue-soft:   rgba(59,130,246,.12);
      --gold:        #d4a84b;
      --gold-soft:   rgba(212,168,75,.12);
      --green:       #22c55e;
      --green-soft:  rgba(34,197,94,.10);
      --red:         #f87171;
      --red-soft:    rgba(239,68,68,.10);
      --purple:      #a78bfa;
      --purple-soft: rgba(167,139,250,.12);
      --text:        #e2e8f0;
      --muted:       #64748b;
      --muted2:      #94a3b8;
      --radius:      10px;
      --radius-sm:   6px;
      --font-display: 'Lora', Georgia, serif;
      --font-body:    'Inter', system-ui, sans-serif;
      --title:       #ffffff;
    }

    body.light-theme {
      --bg:          #f4f6f8;
      --surface:     #ffffff;
      --surface2:    #f8fafc;
      --border:      #e2e8f0;
      --text:        #334155;
      --title:       #0f172a;
      --muted:       #94a3b8;
      --muted2:      #64748b;
    }
    
    body.light-theme .search-input input { color: var(--text); }
    body.light-theme .empty-state i { color: var(--muted); }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; touch-action: manipulation; }

    /* Blindagem contra o zoom automático do Safari no iOS: qualquer input/select/textarea
       com fonte abaixo de 16px faz o iPhone dar zoom ao tocar nele, e se o campo some da
       tela (ex: um modal fechando) antes do teclado soltar o foco, esse zoom trava e a
       página inteira fica encolhida num canto, com o resto em branco. 16px é o limite que
       o Safari usa pra decidir se precisa dar zoom — por isso o !important aqui, pra valer
       mesmo com uma classe mais específica definindo uma fonte menor depois no arquivo.
       Só vale pra telas de celular (max-width: 768px); no desktop o zoom automático nem
       existe, então o design original (fontes menores) continua igual lá. */
    @media (max-width: 768px) {
      input, select, textarea { font-size: 16px !important; }
    }
    body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.65; min-height: 100vh; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; }
    a { color: var(--blue); text-decoration: none; cursor: pointer; transition: .2s; }
    a:hover { text-decoration: underline; }
    button { cursor: pointer; font-family: var(--font-body); }
    
    .container { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
    @media (max-width: 680px) { .container { padding: 0 20px; } }
    /* padding-top/bottom em vez do shorthand "padding: 40px 0" — o shorthand zera
       padding-left/right, e como .section é sempre usado junto com .container
       (ex: <main class="container section">), isso anulava o respiro lateral do
       .container e colava o conteúdo nas bordas da tela (Simulados, Execução de
       Simulado, Lista de Julgados, Admin — qualquer tela que usa esse combo). */
    .section { padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border); transition: border-color 0.3s ease; }
    .section:last-child { border-bottom: none; }
    hr.divider { border: none; border-top: 1px solid var(--border); margin: 0; transition: border-color 0.3s ease; }

    #page-loader { position: fixed; inset: 0; background: var(--bg); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.3s ease; opacity: 0; pointer-events: none; }
    #page-loader.active { opacity: 1; pointer-events: all; }
    .spinner { width: 40px; height: 40px; border: 3px solid var(--surface2); border-top-color: var(--blue); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .skeleton-text { width: 120px; height: 12px; background: var(--surface2); border-radius: 4px; animation: pulse 1.5s infinite; }
    @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

    /* ESTILOS DO PAINEL ADMINISTRATIVO */

    /* Abas de navegação do admin (Usuários & Contas / Julgados) */
    .admin-tabs-nav { display: flex; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; margin-bottom: 28px; flex-wrap: wrap; }
    .admin-tab-btn { flex: 1; min-width: 180px; display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: none; padding: 12px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--muted2); transition: .2s; cursor: pointer; }
    .admin-tab-btn i { font-size: 17px; }
    .admin-tab-btn:hover { color: var(--title); }
    .admin-tab-btn.active { background: var(--surface); color: var(--title); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
    .admin-tab-badge { background: var(--gold); color: #1a1a1a; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
    .admin-tab-content { display: none; }
    .admin-tab-content.active { display: block; }

    .admin-panel { display: grid; grid-template-columns: 1fr; gap: 32px; }
    @media (min-width: 960px) { .admin-panel { grid-template-columns: 420px 1fr; align-items: start; } }
    .admin-form-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
    @media (min-width: 960px) { .admin-panel .admin-form-card { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; } }
    .admin-form-card h3 { font-family: var(--font-display); font-size: 18px; margin-bottom: 18px; color: var(--title); }
    .admin-form-card .form-group { margin-bottom: 16px; }
    .admin-form-card label { display: block; font-size: 13px; font-weight: 600; color: var(--title); margin-bottom: 6px; }
    .admin-form-card input, .admin-form-card select, .admin-form-card textarea {
      width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface);
      border: 1px solid var(--border); color: var(--title); font-size: 14px; outline: none; font-family: var(--font-body);
      transition: .2s;
    }
    .admin-form-card input:focus, .admin-form-card select:focus, .admin-form-card textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
    .admin-form-card textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
    .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (max-width: 480px) { .form-row-2 { grid-template-columns: 1fr; } }
    .btn-primary-admin { background: var(--blue); color: #fff; border: none; padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; transition: .2s; }
    .btn-primary-admin:hover { opacity: .88; }
    .btn-primary-admin:disabled { opacity: .6; cursor: not-allowed; }
    .btn-secondary-admin { background: var(--surface); border: 1px solid var(--border); color: var(--title); padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; transition: .2s; }
    .btn-secondary-admin:hover { border-color: var(--muted2); }
    .admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
    .admin-list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 8px; transition: border-color .2s; }
    .admin-list-item:hover { border-color: var(--blue); }
    .admin-list-item .info .t { font-weight: 600; color: var(--title); font-size: 14px; }
    .admin-list-item .info .m { color: var(--muted2); font-size: 12px; margin-top: 2px; }
    .admin-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .icon-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--muted2); transition: .2s; }
    .icon-btn:hover { color: var(--title); border-color: var(--blue); }
    .aluno-item { flex-wrap: wrap; }
    .aluno-item .info { min-width: 200px; }
    .aluno-plano-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
    .aluno-plano-badge.premium { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(212,168,75,.3); }
    .aluno-plano-badge.free { background: var(--surface); color: var(--muted2); border: 1px solid var(--border); }
    .aluno-plano-badge.admin-role { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(59,130,246,.3); }
    .aluno-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .aluno-actions select, .aluno-actions input[type="date"], .aluno-actions input[type="tel"] { padding: 6px 10px; font-size: 12.5px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--title); width: auto; }
    .aluno-whatsapp-btn { display: inline-flex; align-items: center; gap: 5px; background: #25D366; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 12.5px; text-decoration: none; transition: .2s; }
    .aluno-whatsapp-btn:hover { opacity: .88; }
    .aluno-salvar-btn { background: var(--blue); color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 12.5px; transition: .2s; }
    .aluno-salvar-btn:hover { opacity: .88; }
    .aluno-salvar-btn:disabled { opacity: .6; cursor: not-allowed; }
    .aluno-resetar-senha-btn { background: transparent; color: var(--muted2); border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 12.5px; transition: .2s; }
    .aluno-resetar-senha-btn:hover { border-color: var(--red); color: var(--red); }
    .aluno-resetar-senha-btn:disabled { opacity: .6; cursor: not-allowed; }
    .aluno-salvo-ok { color: var(--green); font-size: 12px; font-weight: 600; }
    .icon-btn.danger:hover { color: var(--red); border-color: var(--red); }
    .filter-select { padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--title); font-size: 13px; font-weight: 500; outline: none; }

    /* ESTILOS DO LOGIN ADAPTADOS */
    .login-wrapper { position: fixed; inset: 0; z-index: 999999; background: var(--bg); display: flex; justify-content: center; align-items: center; overflow-y: auto; padding: 20px; transition: background-color 0.3s ease; }
    .login-wrapper::before { content: ""; position: absolute; width: 600px; height: 600px; background: var(--blue-soft); border-radius: 50%; filter: blur(150px); top: -200px; right: -150px; pointer-events: none; }
    .login-wrapper::after { content: ""; position: absolute; width: 500px; height: 500px; background: var(--green-soft); border-radius: 50%; filter: blur(150px); bottom: -180px; left: -150px; pointer-events: none; }
    
    .login { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 36px 40px; position: relative; z-index: 2; box-shadow: 0 20px 60px rgba(0,0,0,.15); transition: background-color 0.3s ease, border-color 0.3s ease; }
    @media (max-width: 400px) { .login { padding: 28px 22px; } }
    
    .login .logo { font-family: var(--font-display); font-size: 38px; color: var(--title); text-align: center; margin-bottom: 8px; font-weight: 700; }
    .login .logo span { color: var(--blue); }
    .login .sub { text-align: center; color: var(--muted2); margin-bottom: 24px; font-size: 14px; }
    

    
    .login label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--title); font-weight: 600; }
    .login input[type="email"], .login input[type="password"], .login input[type="text"], .login input[type="tel"] { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface2); border: 1px solid var(--border); color: var(--title); font-size: 14px; margin-bottom: 16px; transition: .2s; outline: none; }
    .login input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
    
    .checkbox-group { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
    .checkbox-group input { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; margin: 0; }
    .checkbox-group label { margin: 0; font-size: 13px; color: var(--muted2); font-weight: 500; cursor: pointer; }
    
    .login .primary-btn { width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm); background: var(--green); color: white; font-size: 15px; font-weight: 600; transition: .2s; cursor: pointer; }
    .login .primary-btn:hover { background: #16a34a; }
    
    .links-center { text-align: center; margin-top: 16px; }
    .links-center a { color: var(--muted2); font-size: 13px; text-decoration: none; }
    .links-center a:hover { color: var(--title); text-decoration: underline; }
    
    .switch-view { text-align: center; margin-top: 24px; font-size: 14px; color: var(--muted2); }
    .switch-view a { color: var(--green); font-weight: 600; text-decoration: none; cursor: pointer; }
    .switch-view a:hover { text-decoration: underline; }
    
    .login .copy { margin-top: 32px; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.6; }

    nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; transition: background-color 0.3s ease, border-color 0.3s ease; }
    .nav-inner { max-width: 1220px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 60px; position: relative; }
    .nav-brand { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--title); cursor: pointer; }
    .nav-brand span { color: var(--blue); }
    .nav-links { display: flex; gap: 20px; list-style: none; align-items: center; margin-right: 20px;}
    .nav-links a { font-size: 13px; color: var(--muted2); font-weight: 500; }
    .nav-links a:hover { color: var(--title); text-decoration: none; }
    
    .nav-actions { display: flex; align-items: center; gap: 16px; }
    .streak-badge { display: flex; align-items: center; gap: 6px; background: var(--gold-soft); border: 1px solid rgba(212,168,75,.3); padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--gold); cursor: pointer; transition: .2s; }
    .streak-badge i { font-size: 16px; }
    .streak-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212,168,75,.15); }
    .theme-btn { background: transparent; border: none; color: var(--muted2); font-size: 20px; display: flex; align-items: center; transition: color 0.2s; }
    .theme-btn:hover { color: var(--title); }

    .cronometro-wrap { position: relative; display: flex; align-items: center; }
    .cronometro-btn { position: relative; }
    .cronometro-btn.rodando i { color: var(--green); }
    .cronometro-btn.rodando::after {
      content: ''; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px;
      border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--bg);
    }
    .cronometro-btn.pausado i { color: var(--gold); }
    .cronometro-btn.pausado::after {
      content: ''; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px;
      border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--bg);
    }

    .cronometro-popover {
      position: absolute; top: 40px; right: -8px; background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--radius-sm); padding: 16px 20px; display: flex; flex-direction: column;
      align-items: center; gap: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 200; min-width: 190px;
    }
    .cronometro-popover-tempo { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--title); font-variant-numeric: tabular-nums; }
    .cronometro-popover-label { font-size: 11px; color: var(--muted2); text-transform: uppercase; letter-spacing: .05em; margin-top: -4px; margin-bottom: 4px; }
    .cronometro-popover-pausado { font-size: 11.5px; color: var(--gold); font-variant-numeric: tabular-nums; margin-bottom: 4px; display: flex; gap: 5px; }
    .cronometro-popover-acoes { display: flex; gap: 8px; width: 100%; }
    .cronometro-popover-pausar, .cronometro-popover-parar { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .15s; border: 1px solid transparent; white-space: nowrap; }
    .cronometro-popover-pausar { background: var(--gold-soft); color: var(--gold); border-color: rgba(212,168,75,.3); }
    .cronometro-popover-pausar:hover { background: var(--gold); color: #fff; }
    .cronometro-popover-parar { background: var(--red-soft); color: var(--red); border-color: rgba(248,113,113,.3); }
    .cronometro-popover-parar:hover { background: var(--red); color: #fff; }
    .nav-hamburger { display: none; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; width: 34px; height: 34px; align-items: center; justify-content: center; color: var(--title); font-size: 18px; cursor: pointer; }
    @media (max-width: 680px) {
      .nav-links {
        display: none;
        position: absolute; top: 60px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0; margin: 0;
        background: var(--surface); border-bottom: 1px solid var(--border);
        padding: 4px 20px; z-index: 200;
        box-shadow: 0 12px 24px rgba(0,0,0,.12);
      }
      .nav-links.aberto { display: flex; }
      .nav-links li { width: 100%; }
      .nav-links li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
      .nav-links li:last-child a { border-bottom: none; }
      .nav-hamburger { display: flex; }
      .nav-actions { gap: 10px; }
      .streak-badge span { display: none; }
    }

    header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 48px 0 36px; text-align: center; transition: background-color 0.3s ease, border-color 0.3s ease; }
    .logo-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--blue-soft); border: 1px solid rgba(59,130,246,.3); border-radius: 999px; padding: 6px 16px; font-size: 12px; font-weight: 600; color: var(--blue); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
    .logo-badge i { font-size: 16px; }
    header h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 700; color: var(--title); line-height: 1.2; margin-bottom: 24px; }
    header h1 em { color: var(--blue); font-style: normal; }

    .analytics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 0 auto 24px; text-align: left; }
    @media (max-width: 640px) { .analytics-grid { grid-template-columns: 1fr; } }
    .stat-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; transition: .2s; }
    .stat-card:hover { border-color: var(--blue); }
    .stat-card .lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted2); display: flex; align-items: center; gap: 6px; }
    .stat-card .val { font-size: 24px; font-weight: 700; color: var(--title); font-family: var(--font-display); transition: 0.3s; }
    .stat-card .subtext { font-size: 12px; color: var(--green); display: flex; align-items: center; gap: 4px; font-weight: 500; }
    
    .callout { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--radius); padding: 16px 18px; font-size: 14px; line-height: 1.6; margin-bottom: 0; text-align: left; }
    .callout .icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
    .callout.blue   { background: var(--blue-soft); border: 1px solid rgba(59,130,246,.25); color: var(--text); }
    .callout.blue .icon { color: var(--blue); }
    .callout.gray   { background: var(--surface2); border: 1px solid var(--border); }
    .callout.gray .icon { color: var(--text); }
    .callout.green  { background: var(--green-soft); border: 1px solid rgba(34,197,94,.25); }
    .callout.green .icon { color: var(--green); }
    .callout.purple { background: var(--purple-soft); border: 1px solid rgba(167,139,250,.25); }
    .callout.purple .icon { color: var(--purple); }
    .callout.gold   { background: var(--gold-soft); border: 1px solid rgba(212,168,75,.3); }
    .callout.gold .icon { color: var(--gold); }
    .callout strong { font-weight: 600; color: var(--title); }
    .callout .label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); margin-bottom: 4px; }

    .stats-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .stat-pill { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--muted2); transition: background-color 0.3s ease; }
    .stat-pill strong { color: var(--text); font-weight: 600; }
    /* Painel "Acervo Atual" — cada matéria com sua cor de identidade (mesma paleta do resto
       do site), em tom suave (fundo "soft" + borda a 30% de opacidade) pra dar vida sem
       gritar. Como usa as variáveis de cor do próprio site (não cores fixas por tema), o
       contraste se mantém elegante tanto no escuro quanto se a pessoa mudar pro tema claro. */
    .stat-pill.stat-pill-total { background: var(--blue-soft); border-color: rgba(59,130,246,.3); color: var(--blue); }
    .stat-pill.stat-pill-total strong { color: var(--blue); }
    .stat-pill.subj-red    { background: var(--red-soft);    border-color: rgba(239,68,68,.3);  color: var(--red); }
    .stat-pill.subj-red strong    { color: var(--red); }
    .stat-pill.subj-green  { background: var(--green-soft);  border-color: rgba(34,197,94,.3);  color: var(--green); }
    .stat-pill.subj-green strong  { color: var(--green); }
    .stat-pill.subj-yellow { background: var(--gold-soft);   border-color: rgba(212,168,75,.3); color: var(--gold); }
    .stat-pill.subj-yellow strong { color: var(--gold); }
    .stat-pill.subj-blue   { background: var(--blue-soft);   border-color: rgba(59,130,246,.3); color: var(--blue); }
    .stat-pill.subj-blue strong   { color: var(--blue); }
    .stat-pill.subj-purple { background: var(--purple-soft); border-color: rgba(167,139,250,.3); color: var(--purple); }
    .stat-pill.subj-purple strong { color: var(--purple); }

    /* Bloco colapsável (boas-vindas / acervo atual) — some recolhido pra quem já
       visitou a Home antes, deixando um resumo clicável no lugar. Reduz a fricção
       vertical de quem abre o app todo dia e já sabe o que é o DatavenIA. */
    .home-colapsavel-resumo { display: none; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 16px; font-size: 13px; color: var(--muted2); cursor: pointer; transition: border-color .2s, color .2s; }
    .home-colapsavel-resumo:hover { border-color: var(--blue); color: var(--text); }
    .home-colapsavel-resumo i:first-child { font-size: 16px; color: var(--blue); flex-shrink: 0; }
    .home-colapsavel-resumo .ver-mais { margin-left: auto; color: var(--blue); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
    .home-colapsavel.colapsado .home-colapsavel-cheio { display: none; }
    .home-colapsavel.colapsado .home-colapsavel-resumo { display: flex; }
    .home-colapsavel-cheio > .callout { margin-bottom: 0; }
    .home-colapsavel-recolher { background: none; border: none; color: var(--muted2); font-size: 11.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 0; }
    .home-colapsavel-recolher:hover { color: var(--blue); }

    .section-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--title); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
    
    .julgado-card { background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 20px 22px; transition: background-color 0.3s ease; cursor: pointer; }
    .julgado-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; }
    .tag-tribunal { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(59,130,246,.3); }
    .tag-materia  { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(212,168,75,.3); }
    .tag-data     { background: var(--surface); color: var(--muted2); border: 1px solid var(--border); }
    .tag-fire     { background: var(--red-soft); color: var(--red); border: 1px solid rgba(239,68,68,.25); }
    .tag-new      { background: var(--green-soft); color: var(--green); border: 1px solid rgba(34,197,94,.25); animation: tagNewPulse 2.4s ease-in-out infinite; }
    @keyframes tagNewPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.38); }
      50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
    }
    .julgado-body { font-size: 14px; color: var(--muted2); line-height: 1.75; margin-bottom: 14px; }
    .julgado-body strong { color: var(--text); font-weight: 600; }
    .read-more { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--blue); }

    /* ALTERAÇÕES LEGISLATIVAS — tabela didática por categoria. Verde = novidade,
       dourado = atenção/muito importante, vermelho = revogação/negativa, azul = alteração
       padrão. Só usa as CSS vars de cor — funciona igual em tema claro e escuro. */
    .tag-revogado { background: var(--red-soft); color: var(--red); border: 1px solid rgba(239,68,68,.3); }

    .leg-table { display: flex; flex-direction: column; gap: 10px; width: 100%; }
    .leg-table-head { display: grid; grid-template-columns: 1.05fr 1.4fr 1.65fr 1.35fr; gap: 0; padding: 0 18px; }
    .leg-table-head > div { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-bottom: 6px; }

    .leg-row { display: grid; grid-template-columns: 1.05fr 1.4fr 1.65fr 1.35fr; background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: var(--radius); overflow: hidden; transition: background-color .3s ease, border-color .3s ease; }
    .leg-row > div { padding: 14px 18px; font-size: 13px; line-height: 1.65; color: var(--muted2); }
    .leg-row > div:not(:last-child) { border-right: 1px solid var(--border); }

    .leg-row--novo     { border-left-color: var(--green); }
    .leg-row--novo     > div:first-child { background: var(--green-soft); }
    .leg-row--atencao  { border-left-color: var(--gold); }
    .leg-row--atencao  > div:first-child { background: var(--gold-soft); }
    .leg-row--revogado { border-left-color: var(--red); }
    .leg-row--revogado > div:first-child { background: var(--red-soft); }
    .leg-row--padrao   > div:first-child { background: var(--blue-soft); }

    .leg-disp-diploma { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
    .leg-disp-artigo  { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--title); line-height: 1.3; }
    .leg-disp-nome    { font-size: 12px; color: var(--muted2); margin-top: 2px; margin-bottom: 8px; }
    .leg-disp-tipo    { font-size: 11px; color: var(--muted); margin-top: 8px; font-style: italic; }

    .leg-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; margin-top: 2px; }
    .leg-badge--novo     { background: var(--green-soft); color: var(--green); border: 1px solid rgba(34,197,94,.35); }
    .leg-badge--atencao  { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(212,168,75,.4); }
    .leg-badge--revogado { background: var(--red-soft); color: var(--red); border: 1px solid rgba(239,68,68,.35); }

    .leg-row > div[data-label] strong { color: var(--text); }

    /* Destaque antes (vermelho) / depois (verde) — deixa visualmente óbvio
       o que valia antes da lei nova e o que passa a valer agora. Só o QUADRO
       (fundo) fica colorido; o texto usa a cor padrão do tema (clara/escura),
       igual ao resto do site — mais legível que texto colorido. */
    .leg-row > div.leg-cell-antes  { color: var(--text); background: var(--red-soft); }
    .leg-row > div.leg-cell-depois { color: var(--text); background: var(--green-soft); }

    /* Cabeçalho da tela de itens: título/subtítulo à esquerda, botão de PDF à direita */
    .leg-itens-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
    .leg-pdf-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(212,168,75,.35); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: .2s; white-space: nowrap; flex-shrink: 0; }
    .leg-pdf-btn:hover { background: var(--gold); color: #1a1a1a; }

    @media (max-width: 900px) {
      .leg-table-head { display: none; }
      .leg-row { grid-template-columns: 1fr; }
      .leg-row > div:not(:last-child) { border-right: none; border-bottom: 1px solid var(--border); }
      .leg-row > div[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 5px; }
    }
    
    /* ===================================================
       LANDING PÚBLICA (visitante, sem login) + FREEMIUM
       =================================================== */
    #landing-section { background: var(--bg); min-height: 100vh; }
    .landing-nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
    .landing-nav .nav-inner { max-width: 1220px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; justify-content: flex-start; height: 60px; }
    .landing-nav .nav-brand { margin-right: 4px; }
    .landing-nav-links { display: flex; gap: 26px; list-style: none; align-items: center; flex: 1; }
    .landing-nav-links a { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted2); white-space: nowrap; }
    .landing-nav-links a:hover { color: var(--title); text-decoration: none; }
    .landing-nav-links a i { font-size: 15px; }
    .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--title); padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; transition: .2s; white-space: nowrap; }
    .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

    /* Menu hambúrguer da navbar pública (visitante sem login), mesmo padrão
       do menu interno do app: em telas estreitas os links (Início, DataJuris,
       Curso de IA, Materiais) somem da barra e passam a viver num dropdown
       aberto pelo hambúrguer — sem isso a aba "Materiais" ficava invisível
       pra quem entra pelo celular sem conta. O botão de login continua
       sempre visível na barra (não depende do menu abrir). */
    #landing-nav-hamburger { display: none; }
    @media (max-width: 760px) {
      .landing-nav .nav-inner { justify-content: space-between; flex-wrap: wrap; }
      .landing-nav-links {
        display: none;
        position: absolute; top: 60px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0; margin: 0;
        background: var(--surface); border-bottom: 1px solid var(--border);
        padding: 4px 20px; z-index: 200;
        box-shadow: 0 12px 24px rgba(0,0,0,.12);
      }
      .landing-nav-links.aberto { display: flex; }
      .landing-nav-links li { width: 100%; }
      .landing-nav-links li a { display: flex; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
      .landing-nav-links li:last-child a { border-bottom: none; }
      #landing-nav-hamburger { display: flex; }
      .btn-ghost { padding: 8px 12px; font-size: 12.5px; }
    }
    .landing-hero { text-align: center; padding: 64px 20px 40px; }
    .landing-hero .logo-badge { margin-bottom: 18px; }
    .landing-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700; color: var(--title); line-height: 1.25; max-width: 720px; margin: 0 auto 18px; }
    .landing-hero h1 em { color: var(--blue); font-style: normal; }
    .landing-hero p.sub { max-width: 560px; margin: 0 auto 28px; color: var(--muted2); font-size: 15.5px; line-height: 1.7; }
    .landing-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }

    .blocos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1220px; margin: 0 auto; align-items: stretch; }
    .blocos-grid .julgado-card { display: flex; flex-direction: column; height: 100%; }
    .blocos-grid .bloco-destaque { border-width: 1px; box-shadow: 0 0 0 1px rgba(59,130,246,.25); }
    @media (max-width: 900px) { .blocos-grid { grid-template-columns: 1fr; max-width: 640px; } }
    .btn-hero-primary { background: var(--blue); color: #fff; border: none; padding: 14px 26px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; transition: .2s; }
    .btn-hero-primary:hover { opacity: .9; }
    .btn-gold { background: var(--gold); color: #1a1400; border: none; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; transition: .2s; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
    .btn-gold:hover { opacity: .9; }
    .btn-hero-secondary { background: var(--surface2); border: 1px solid var(--border); color: var(--title); padding: 14px 26px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; transition: .2s; }
    .btn-hero-secondary:hover { border-color: var(--blue); color: var(--blue); }

    .free-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--green-soft); color: var(--green); border: 1px solid rgba(34,197,94,.3); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }

    .locked-card { position: relative; overflow: hidden; cursor: pointer; }
    .locked-card .locked-fake-text { filter: blur(5px); user-select: none; pointer-events: none; }
    .locked-card .lock-overlay {
      position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; background: linear-gradient(180deg, rgba(15,17,23,0) 0%, var(--surface2) 65%);
      color: var(--title); font-weight: 700; font-size: 13.5px; text-align: center; padding: 16px;
    }
    body.light-theme .locked-card .lock-overlay { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--surface2) 65%); }
    .locked-card .lock-overlay i { font-size: 24px; color: var(--gold); }
    .locked-card .lock-overlay span.hint { font-weight: 500; font-size: 12px; color: var(--muted2); }

    .landing-footer { text-align: center; padding: 32px 20px; color: var(--muted); font-size: 12px; }

    /* Painel de assinatura / paywall */
    .paywall-wrap { max-width: 560px; margin: 0 auto; text-align: center; padding: 20px 0 40px; }
    .paywall-wrap .icon-circle { width: 60px; height: 60px; border-radius: 50%; background: var(--gold-soft); border: 1px solid rgba(212,168,75,.3); color: var(--gold); font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
    .paywall-wrap h2 { font-family: var(--font-display); font-size: 1.6rem; color: var(--title); margin-bottom: 10px; }
    .paywall-wrap p.desc { color: var(--muted2); font-size: 14.5px; margin-bottom: 26px; }
    .paywall-benefits { text-align: left; display: flex; flex-direction: column; gap: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 26px; }
    .paywall-benefits .item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
    .paywall-benefits .item i { color: var(--green); font-size: 18px; flex-shrink: 0; }
    .btn-assinar { display: inline-block; background: var(--green); color: #fff; border: none; padding: 16px 32px; border-radius: var(--radius-sm); font-weight: 700; font-size: 16px; transition: .2s; }
    .btn-assinar:hover { background: #16a34a; text-decoration: none; }
    .planos-checkout { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn-assinar-outline { background: var(--surface); color: var(--green); border: 2px solid var(--green); padding: 14px 30px; }
    .btn-assinar-outline:hover { background: var(--green-soft); color: var(--green); }
    @media (max-width: 480px) { .planos-checkout { flex-direction: column; } .planos-checkout .btn-assinar { width: 100%; } }
    @media (max-width: 480px) {
      #checkout-section .container { padding: 0 22px; }
      .paywall-wrap { padding: 24px 0 32px; }
      .paywall-wrap h2 { font-size: 1.4rem; }
      .paywall-benefits { padding: 18px 16px; gap: 14px; }
      .planos-checkout { gap: 12px; }
      .btn-assinar { padding: 15px 18px; font-size: 15px; }
      .btn-assinar-outline { padding: 13px 18px; }
    }

    .auth-tabs { display: flex; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 22px; }
    .auth-tabs button { flex: 1; background: transparent; border: none; padding: 10px; border-radius: 6px; font-weight: 600; font-size: 13.5px; color: var(--muted2); transition: .2s; }
    .auth-tabs button.active { background: var(--surface); color: var(--title); box-shadow: 0 1px 3px rgba(0,0,0,.15); }

    .schedule-row.hoje { border-color: var(--green); border-width: 2px; background: rgba(34,197,94,.08); box-shadow: 0 4px 16px rgba(34,197,94,.15); }
    .schedule-row.hoje .day-badge { color: var(--green); }
    .hoje-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--green); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }

    .gps-home-card { max-width: 900px; margin: 0 auto 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; text-align: left; }

    /* Banner compacto de "Revisões Pendentes" na Home — só avisa e leva pra aba dedicada,
       sem duplicar a lista inteira (isso fica só em Revisões). */
    .revisoes-banner-card { padding: 18px 20px; border-left: 3px solid var(--blue); cursor: pointer; transition: .18s; }
    .revisoes-banner-card:hover { border-color: var(--blue); background: var(--surface2); }
    .revisoes-banner-row { display: flex; align-items: center; gap: 14px; }
    .revisoes-banner-icone { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 19px; display: flex; align-items: center; justify-content: center; }
    .revisoes-banner-texto { flex: 1; min-width: 0; }
    .revisoes-banner-titulo { font-size: 14.5px; font-weight: 700; color: var(--title); }
    .revisoes-banner-sub { font-size: 12.5px; color: var(--muted2); margin-top: 2px; }
    .revisoes-banner-btn { flex-shrink: 0; }
    @media (max-width: 560px) {
      .revisoes-banner-row { flex-wrap: wrap; }
      .revisoes-banner-btn { width: 100%; justify-content: center; margin-top: 4px; }
    }
    .gps-saudacao { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--title); margin-bottom: 16px; }
    .gps-semana-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
    .gps-semana-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); }
    .gps-semana-pct { font-size: 13px; font-weight: 700; color: var(--blue); }
    .gps-progress-bg { margin-bottom: 22px; }
    .gps-hoje-header { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); margin-bottom: 6px; }
    .gps-hoje-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14.5px; color: var(--text); transition: .15s; }
    .gps-hoje-item:last-child { border-bottom: none; }
    .gps-hoje-item:hover { color: var(--blue); }
    .gps-hoje-item .gps-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; }
    .gps-hoje-item.concluido .gps-check { background: var(--green); color: #fff; }
    .gps-hoje-item.pendente .gps-check { border: 2px solid var(--border); }
    .gps-hoje-item.concluido .gps-titulo { color: var(--muted2); text-decoration: line-through; text-decoration-color: var(--border); }
    .gps-hoje-item .gps-materia-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
    /* Título dentro de uma linha flex (Home, fila da meta, Revisões): sem isso, um título
       comprido não encolhe (comportamento padrão de item flex) e estoura pra fora da tela
       em vez de cortar com "...", empurrando a página inteira no mobile. */
    .gps-titulo { flex: 1 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Revisão espaçada: ação rápida (Lembrei/Não lembrei) direto na lista da Home.
       Redesenhado em coluna: título fica sozinho numa linha só com o ícone (2 itens
       flex, encolhe e corta com "..." de forma confiável). Antes ele dividia espaço
       na mesma linha com a tag de matéria + tag "atrasada" (4 itens flex com wrap) —
       nesse arranjo o motor de flex, ao quebrar linha, podia deixar de encolher o
       título corretamente e o texto vazava pra fora da tela em telas estreitas. */
    .gps-hoje-item.revisao-item { display: flex; flex-direction: column; align-items: stretch; gap: 10px; cursor: default; padding: 14px 0; }
    .revisao-item-topo { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; }
    .revisao-item-topo .gps-titulo { flex: 1 1 auto; min-width: 0; max-width: 100%; }
    .revisao-item-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 32px; }
    .revisao-item-acoes { display: flex; gap: 8px; justify-content: flex-end; width: 100%; }
    .revisao-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 6px; border: 1px solid transparent; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s; white-space: nowrap; }
    .revisao-btn-nao { background: var(--red-soft); color: var(--red); border-color: rgba(239,68,68,.25); }
    .revisao-btn-nao:hover { background: var(--red); color: #fff; border-color: var(--red); }
    .revisao-btn-sim { background: var(--green-soft); color: var(--green); border-color: rgba(34,197,94,.25); }
    .revisao-btn-sim:hover { background: var(--green); color: #fff; border-color: var(--green); }
    .revisao-item.atrasada .gps-check { background: var(--red-soft); color: var(--red); border: none; }
    .revisao-atrasada-tag { flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--red); background: var(--red-soft); padding: 2px 7px; border-radius: 4px; }
    .gps-hoje-vazio { font-size: 13.5px; color: var(--muted2); padding: 6px 0; }
    .gps-hoje-vazio-cta { background: transparent; border: none; color: var(--blue); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
    .gps-hoje-vazio-cta:hover { text-decoration: underline; }
    .gps-hoje-decisao { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; }
    .gps-hoje-decisao-texto { font-size: 13px; color: var(--text); margin: 0 0 10px; }
    .gps-hoje-decisao-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
    .gps-hoje-decisao-btn { flex: 1; min-width: 140px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--blue); border: 1px solid var(--blue); color: #fff; border-radius: var(--radius-sm); padding: 9px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .15s; }
    .gps-hoje-decisao-btn:hover { opacity: .9; }
    .gps-hoje-decisao-btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
    .gps-hoje-decisao-btn.ghost:hover { border-color: var(--blue); color: var(--blue); }
    .gps-progress-caption { font-size: 11.5px; color: var(--muted); margin: -14px 0 22px; }

    .meta-diaria-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .meta-diaria-texto { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--title); }
    .meta-diaria-texto i { color: var(--gold); }
    .meta-diaria-editar { background: var(--surface2); border: 1px solid var(--border); color: var(--muted2); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s; flex-shrink: 0; }
    .meta-diaria-editar:hover { color: var(--blue); border-color: var(--blue); }

    .btn-surpresa-vermelho { background: var(--red); color: #fff; border: none; padding: 13px 30px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; letter-spacing: .02em; cursor: pointer; box-shadow: 0 2px 12px rgba(239,68,68,.35); transition: .15s; }
    .btn-surpresa-vermelho:hover { opacity: .9; transform: translateY(-1px); }
    .surpresa-mensagem-box { margin-top: 16px; padding: 22px 24px; background: var(--surface2); border: 1px solid rgba(239,68,68,.3); border-radius: var(--radius); font-family: var(--font-display); font-size: 16.5px; line-height: 1.6; color: var(--title); text-align: center; }
    .gps-secao-titulo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--title); margin-bottom: 18px; }
    .gps-secao-titulo i { color: var(--blue); }
    .gps-secao-titulo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
    .gps-secao-titulo-row .gps-secao-titulo { margin-bottom: 0; }
    .ver-estatisticas-btn { display: flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: 12.5px; font-weight: 700; padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: .15s; white-space: nowrap; }
    .ver-estatisticas-btn:hover { border-color: var(--blue); color: var(--blue); }
    .ver-estatisticas-btn i { color: var(--purple); }

    .trilha-caminho { display: flex; flex-direction: column; }
    .trilha-etapa { display: flex; align-items: flex-start; gap: 14px; position: relative; padding-bottom: 26px; cursor: pointer; }
    .trilha-etapa:last-child { padding-bottom: 0; }
    .trilha-etapa::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border); }
    .trilha-etapa:last-child::before { display: none; }
    .trilha-etapa.concluida::before { background: var(--green); }
    .trilha-marcador { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; z-index: 1; }
    .trilha-etapa.concluida .trilha-marcador { background: var(--green); color: #fff; }
    .trilha-etapa.atual .trilha-marcador { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px rgba(59,130,246,.2); }
    .trilha-etapa.pendente .trilha-marcador { background: var(--surface2); border: 2px solid var(--border); color: var(--muted2); }
    .trilha-texto { padding-top: 4px; }
    .trilha-nome { font-size: 14.5px; font-weight: 700; color: var(--title); }
    .trilha-etapa.pendente .trilha-nome { color: var(--muted2); }
    .trilha-etapa.atual .trilha-nome { color: var(--blue); }
    .trilha-sub { font-size: 12px; color: var(--muted2); margin-top: 2px; }

    /* Fase 2: selos/conquistas no topo da trilha */
    .trilha-conquistas { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 18px; }
    .trilha-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 20px; background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
    .trilha-badge i { font-size: 17px; }
    .trilha-badge.ok { background: var(--green-soft); color: var(--green); border-color: transparent; }
    .trilha-badge.alerta { background: var(--red-soft); color: var(--red); border-color: transparent; }
    .trilha-badge:first-child { background: var(--gold-soft); color: var(--gold); border-color: transparent; }

    /* Aba dedicada de Revisões: grupos "Atrasadas" / "Para hoje" */
    .revisoes-tela-grupo { margin-bottom: 22px; }
    .revisoes-tela-grupo:last-child { margin-bottom: 0; }
    .revisoes-tela-grupo-titulo { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted2); margin-bottom: 10px; }

    /* Resumo do ciclo de revisão (tela de Estatísticas) */
    .revisao-resumo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .revisao-resumo-item { text-align: center; background: var(--surface2); border-radius: var(--radius-sm); padding: 14px 8px; }
    .revisao-resumo-val { font-size: 24px; font-weight: 800; font-family: var(--font-display); }
    .revisao-resumo-lbl { font-size: 11.5px; color: var(--muted2); margin-top: 2px; }
    @media (max-width: 480px) { .revisao-resumo-grid { grid-template-columns: 1fr; } }

    /* Fase 2: pontinhos de progresso por tema dentro de cada matéria */
    .trilha-temas-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
    .trilha-tema-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface2); border: 1.5px solid var(--border); }
    .trilha-tema-dot.cheio { background: var(--green); border-color: var(--green); }
    .trilha-tema-dot.meio { background: var(--blue); border-color: var(--blue); opacity: .6; }

    /* Fase 2: comemoração ao concluir uma matéria (100%) */
    @keyframes trilhaComemorarPulso {
      0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
      35%  { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(34,197,94,0); }
      100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    }
    .trilha-etapa.trilha-comemorar .trilha-marcador { animation: trilhaComemorarPulso 1.6s ease-out; }
    .trilha-etapa.trilha-comemorar .trilha-nome { color: var(--green); transition: color .3s; }

    .dominio-lista { display: flex; flex-direction: column; gap: 16px; }
    .dominio-item .dominio-cabecalho { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--title); margin-bottom: 6px; }
    .dominio-item .dominio-pct { color: var(--muted2); font-weight: 700; }

    /* "O que você leu hoje" */
    .leitura-hoje-total { font-size: 12.5px; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 3px 10px; border-radius: 20px; }
    .leitura-hoje-grafico { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
    .leitura-hoje-lista { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--border); padding-top: 16px; }
    .leitura-hoje-grupo-titulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted2); margin-bottom: 8px; }
    .leitura-hoje-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; border-bottom: 1px solid var(--border); }
    .leitura-hoje-item:last-child { border-bottom: none; }
    .leitura-hoje-item:hover .leitura-hoje-item-titulo { color: var(--blue); }
    .leitura-hoje-item-titulo { flex: 1; font-size: 13.5px; color: var(--text); }
    .leitura-hoje-item-hora { font-size: 12px; color: var(--muted); white-space: nowrap; }

    /* ===================================================
       SIMULADOS
       =================================================== */
    #simulado-progress-wrap { position: sticky; top: 60px; z-index: 90; background: var(--surface); border-bottom: 1px solid var(--border); }
    .simulado-card { display: none; }
    .simulado-card.active { display: block; }
    .simulado-afirmacao { font-family: var(--font-display); font-size: 15.5px; line-height: 1.75; color: var(--text); border-left: 3px solid var(--border); padding-left: 16px; margin: 6px 0 20px; }
    .simulado-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
    .simulado-btn { flex: 1; min-width: 130px; font-size: 14px; font-weight: 700; padding: 12px 18px; border-radius: var(--radius-sm); border: 2px solid; background: transparent; cursor: pointer; transition: .18s; text-align: center; }
    .simulado-btn:active { transform: scale(.98); }
    .simulado-btn:disabled { opacity: .55; cursor: default; }
    .simulado-btn-certo { border-color: var(--green); color: var(--green); }
    .simulado-btn-certo:hover:not(:disabled), .simulado-btn-certo.selecionado { background: var(--green); color: #fff; }
    .simulado-btn-errado { border-color: var(--red); color: var(--red); }
    .simulado-btn-errado:hover:not(:disabled), .simulado-btn-errado.selecionado { background: var(--red); color: #fff; }

    .simulado-feedback { display: none; margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.6; }
    .simulado-feedback.mostrar { display: block; }
    .simulado-feedback.acerto { background: var(--green-soft); border: 1px solid rgba(34,197,94,.25); }
    .simulado-feedback.erro { background: var(--red-soft); border: 1px solid rgba(239,68,68,.25); }
    .simulado-feedback-veredito { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
    .simulado-feedback.acerto .simulado-feedback-veredito { color: var(--green); }
    .simulado-feedback.erro .simulado-feedback-veredito { color: var(--red); }
    .simulado-feedback-tese { color: var(--text); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
    .simulado-feedback-destaque { color: var(--text); background: rgba(0,0,0,.04); border-left: 3px solid var(--gold); border-radius: 4px; padding: 10px 12px; margin-top: 10px; font-size: 13px; line-height: 1.6; }
    .simulado-feedback-destaque strong { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); margin-bottom: 4px; }
    .simulado-feedback-fonte { font-size: 11.5px; color: var(--muted2); margin-top: 8px; }
    .link-ver-julgado-simulado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--blue); margin-top: 10px; cursor: pointer; }
    .link-ver-julgado-simulado:hover { text-decoration: underline; }

    .simulado-modo-escolha { margin: 4px auto 22px; max-width: 440px; }
    .simulado-modo-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted2); margin-bottom: 10px; }
    .simulado-modo-opcoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .simulado-modo-btn { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: transparent; color: var(--muted2); cursor: pointer; transition: .18s; }
    .simulado-modo-btn:hover { border-color: var(--gold); color: var(--text); }
    .simulado-modo-btn.selecionado { border-color: var(--gold); background: var(--gold); color: #fff; }

    .btn-nav-simulado { width: 100%; margin-top: 18px; background: var(--blue); color: #fff; border: none; padding: 13px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; }
    .btn-nav-simulado:hover { opacity: .9; }

    .score-circle-datavenia { width: 120px; height: 120px; border-radius: 50%; background: var(--surface2); border: 3px solid var(--blue); color: var(--title); font-family: var(--font-display); font-size: 2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto; }

    .gab-item-dv { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
    .gab-item-dv .gab-head-dv { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .gab-status-dv { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
    .gab-status-dv.acerto { background: var(--green-soft); color: var(--green); }
    .gab-status-dv.erro { background: var(--red-soft); color: var(--red); }
    .gab-status-dv.skip { background: var(--surface); color: var(--muted2); border: 1px solid var(--border); }
    .gab-body-dv { padding: 14px 16px 16px; }

    /* margin-bottom (em vez de depender só do "gap" do container flex pai) garante o
       espaçamento entre os cards mesmo se o gap não for aplicado por algum motivo. */
    .simulado-item-lista { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; cursor: pointer; transition: .18s; margin-bottom: 14px; }
    .simulado-item-lista:last-child { margin-bottom: 0; }
    .simulado-item-lista:hover { border-color: var(--blue); }
    .simulado-item-lista .titulo { font-weight: 700; font-size: 15px; color: var(--title); margin-bottom: 4px; }
    .simulado-item-lista .descricao { font-size: 12.5px; color: var(--muted2); max-width: 480px; }
    .simulado-item-lista .melhor-resultado { font-size: 12px; font-weight: 700; color: var(--green); white-space: nowrap; }
    .simulado-hist-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
    .simulado-hist-badge.curado { background: rgba(59,130,246,.12); color: var(--blue); }
    .simulado-hist-badge.personalizado { background: rgba(234,179,8,.14); color: var(--gold); }

    .materias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
    .materia-card { background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; transition: .15s; cursor: pointer; text-decoration: none; }
    .materia-card:hover { border-color: var(--blue); background: var(--blue-soft); }
    .materia-card .info { display: flex; align-items: center; gap: 14px; }
    .materia-card .icon-box { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); color: var(--blue); font-size: 20px; transition: background-color 0.3s ease; }
    .materia-card .name  { font-weight: 600; font-size: 14px; color: var(--text); }
    /* Identidade por matéria no Acervo completo — mesma paleta usada no Cronograma Semanal
       e em "Meu Plano" (subj-red/green/yellow/blue/purple), aplicada aqui à borda esquerda,
       ao ícone e ao hover de cada card, pra cada matéria ter uma cor própria em vez de todas
       ficarem no mesmo azul neutro. */
    .materia-card.subj-red     { border-left-color: rgba(239,68,68,.5); }
    .materia-card.subj-red     .icon-box { color: var(--red); background: var(--red-soft); border-color: rgba(239,68,68,.3); }
    .materia-card.subj-red:hover     { border-color: var(--red); background: var(--red-soft); }
    .materia-card.subj-green   { border-left-color: rgba(34,197,94,.5); }
    .materia-card.subj-green   .icon-box { color: var(--green); background: var(--green-soft); border-color: rgba(34,197,94,.3); }
    .materia-card.subj-green:hover   { border-color: var(--green); background: var(--green-soft); }
    .materia-card.subj-yellow  { border-left-color: rgba(212,168,75,.5); }
    .materia-card.subj-yellow  .icon-box { color: var(--gold); background: var(--gold-soft); border-color: rgba(212,168,75,.3); }
    .materia-card.subj-yellow:hover  { border-color: var(--gold); background: var(--gold-soft); }
    .materia-card.subj-blue    { border-left-color: rgba(59,130,246,.5); }
    .materia-card.subj-blue    .icon-box { color: var(--blue); background: var(--blue-soft); border-color: rgba(59,130,246,.3); }
    .materia-card.subj-blue:hover    { border-color: var(--blue); background: var(--blue-soft); }
    .materia-card.subj-purple  { border-left-color: rgba(167,139,250,.5); }
    .materia-card.subj-purple  .icon-box { color: var(--purple); background: var(--purple-soft); border-color: rgba(167,139,250,.3); }
    .materia-card.subj-purple:hover  { border-color: var(--purple); background: var(--purple-soft); }

    .ver-todas-materias-cta { margin-top: 14px; display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px; cursor: pointer; text-decoration: none; transition: .15s; }
    .ver-todas-materias-cta:hover { border-color: var(--blue); background: var(--blue-soft); }
    .ver-todas-materias-cta i:first-child { color: var(--blue); font-size: 18px; }
    .ver-todas-materias-cta span { flex: 1; font-weight: 600; font-size: 14px; color: var(--text); }
    .ver-todas-materias-cta .arrow { color: var(--muted2); }
    .materia-card .count { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .materia-card .arrow { color: var(--muted); font-size: 18px; }

    /* Blocos de Incidências de Prova: separa Lei Seca de Jurisprudência, e dentro de cada
       bloco agrupa por fonte (ex: CF/88, Lei 9.784/99, STF, STJ) com um título próprio. */
    .incidencia-bloco { margin-bottom: 30px; }
    .incidencia-bloco:last-child { margin-bottom: 0; }
    .incidencia-bloco-titulo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--title); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
    .incidencia-bloco-titulo.tipo-lei-seca i { color: var(--gold); }
    .incidencia-bloco-titulo.tipo-juris i { color: var(--blue); }
    .incidencia-fonte-grupo { margin-bottom: 18px; }
    .incidencia-fonte-grupo:last-child { margin-bottom: 0; }
    .incidencia-fonte-titulo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 10px; }

    /* <details> por fonte: some com o marcador padrão e usa um caret que gira ao abrir */
    .incidencia-fonte-titulo { cursor: pointer; list-style: none; user-select: none; }
    .incidencia-fonte-titulo::-webkit-details-marker { display: none; }
    .incidencia-fonte-titulo .caret { transition: transform .15s ease; font-size: 13px; }
    details[open] > .incidencia-fonte-titulo .caret { transform: rotate(90deg); }
    .incidencia-fonte-count { color: var(--muted2); font-weight: 500; text-transform: none; letter-spacing: normal; }

    /* Selos de recorrência ("caiu em N provas") e destaque de item mais cobrado do grupo */
    .tag-recorrencia { background: rgba(212,168,75,.14); color: var(--gold); border: 1px solid rgba(212,168,75,.35); }
    .tag-destaque { background: rgba(212,168,75,.22); color: var(--gold); border: 1px solid rgba(212,168,75,.5); }
    .julgado-card.destaque { background: linear-gradient(180deg, rgba(212,168,75,.06), transparent 60%), var(--surface2); }

    /* Filtro multi-seleção (carreira / banca): botão que abre um painel de checkboxes */
    .ms-filter { position: relative; }
    .ms-filter-btn { display: inline-flex; align-items: center; gap: 8px; }
    .ms-filter-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 230px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
    .ms-filter-panel label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
    .ms-filter-panel label:hover { background: var(--surface); }
    .ms-filter-panel input[type="checkbox"] { accent-color: var(--blue); width: 15px; height: 15px; cursor: pointer; }

    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
    @media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
    /* Carrossel horizontal de 7 dias — cada dia é um cartão, com o dia atual em
       destaque. Substitui a antiga lista vertical "tabelada", dando mais sensação
       de linha do tempo/progresso semanal (estilo carrossel, não lista de dados). */
    .schedule-list { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; padding: 4px 4px 12px; scroll-snap-type: x proximity; scroll-padding-left: 4px; -webkit-overflow-scrolling: touch; }
    .schedule-list::-webkit-scrollbar { height: 6px; }
    .schedule-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
    .schedule-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 16px; transition: border-color .2s, transform .2s; flex: 0 0 160px; min-width: 160px; scroll-snap-align: start; }
    .schedule-row:hover { border-color: var(--blue); transform: translateY(-2px); }
    .day-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted2); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
    .subjects { display: flex; flex-direction: column; gap: 8px; }
    .subject-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; transition: all .2s; cursor: pointer; line-height: 1.3; }
    .subject-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
    .subj-red i { color: var(--red); }
    .subject-item.subj-red:hover { border-color: var(--red); background: var(--red-soft); color: var(--title); }
    .subj-green i { color: var(--green); }
    .subject-item.subj-green:hover { border-color: var(--green); background: rgba(34,197,94,.05); color: var(--title); }
    .subj-yellow i { color: var(--gold); }
    .subject-item.subj-yellow:hover { border-color: var(--gold); background: rgba(212,168,75,.05); color: var(--title); }
    .subj-blue i { color: var(--blue); }
    .subject-item.subj-blue:hover { border-color: var(--blue); background: rgba(59,130,246,.05); color: var(--title); }
    .subj-purple i { color: var(--purple); }
    .subject-item.subj-purple:hover { border-color: var(--purple); background: rgba(167,139,250,.05); color: var(--title); }

    .tags-list { display: flex; flex-direction: column; gap: 12px; }
    .tag-item { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; }
    .tag-item .icon-badge { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-size: 16px; flex-shrink: 0; }
    .bg-fire { background: var(--red-soft); color: var(--red); border: 1px solid rgba(239,68,68,.25); }
    .bg-light { background: var(--green-soft); color: var(--green); border: 1px solid rgba(34,197,94,.25); }
    .bg-note { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(59,130,246,.3); }
    .bg-sync { background: var(--purple-soft); color: var(--purple); border: 1px solid rgba(167,139,250,.25); }
    .tag-item p { color: var(--muted2); line-height: 1.5; margin-top: 4px; }
    .tag-item strong { color: var(--text); }

    .especial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 560px) { .especial-grid { grid-template-columns: 1fr; } }

    .vitrine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
    @media (max-width: 860px) { .vitrine-grid { grid-template-columns: 1fr; } }
    .vitrine-card { margin: 0; }

    .bloco-datajuris { padding: 28px 26px; }
    .bloco-bullets { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
    .bloco-bullets li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted2); }
    .bloco-bullets li i { color: var(--green); font-size: 15px; flex-shrink: 0; }

    .ia-formatos-row { display: flex; flex-wrap: wrap; gap: 12px; }
    .ia-formato-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; color: var(--title); }
    .ia-formato-pill i { color: var(--blue); font-size: 16px; }

    .ia-prompt-categoria { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
    .ia-prompt-categoria h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--title); margin-bottom: 12px; }
    .ia-prompt-categoria h3 i { color: var(--blue); font-size: 17px; }
    .ia-prompt-categoria ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
    .ia-prompt-categoria li { font-size: 13px; color: var(--muted2); padding-left: 16px; position: relative; }
    .ia-prompt-categoria li::before { content: '—'; position: absolute; left: 0; color: var(--blue); }
    .especial-card { background: var(--purple-soft); border: 1px solid rgba(167,139,250,.25); border-radius: var(--radius); padding: 20px; transition: background-color 0.3s ease; }
    .especial-card h4 { font-size: 14px; font-weight: 700; color: var(--title); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
    .especial-card h4 i { font-size: 18px; color: var(--purple); }
    .especial-card p { font-size: 13px; color: var(--muted2); line-height: 1.6; }
    
    .whatsapp-cta { background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%); border: 1px solid rgba(34,197,94,.25); border-radius: var(--radius); padding: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .whatsapp-cta .text h3 { font-size: 15px; font-weight: 700; color: var(--title); margin-bottom: 4px; }
    .whatsapp-cta .text p { font-size: 13px; color: var(--muted2); }
    .wpp-btn { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #000; font-weight: 700; font-size: 13px; padding: 10px 20px; border-radius: var(--radius-sm); margin-left: auto; }
    .wpp-btn:hover { opacity: .9; text-decoration: none; color: #000; }
    .wpp-btn.sup-btn { background: var(--blue); color: #fff; }
    .wpp-btn.sup-btn:hover { color: #fff; }
    


    .dica-bar { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; color: var(--muted2); display: flex; align-items: center; gap: 10px; transition: background-color 0.3s ease; }
    .dica-bar kbd { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-size: 11px; font-family: monospace; color: var(--text); }
    
    footer { background: var(--surface); border-top: 1px solid var(--border); padding: 32px 0; text-align: center; font-size: 13px; color: var(--muted); margin-top: 40px; transition: background-color 0.3s ease; }
    footer strong { color: var(--muted2); }

    /* TELAS INTERNAS */
    .page-header { padding: 36px 0 24px; border-bottom: 1px solid var(--border); background: var(--surface); transition: background-color 0.3s ease; }
    .back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted2); margin-bottom: 16px; cursor:pointer;}
    .back-btn:hover { color: var(--title); text-decoration: none; }
    .subject-title-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; }
    .subject-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--title); display: flex; align-items: center; gap: 12px; }
    
    .progress-container { width: 240px; }
    .progress-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted2); margin-bottom: 6px; font-weight: 600; }
    .progress-bar-bg { width: 100%; height: 8px; background: var(--surface2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
    .progress-bar-fill { height: 100%; background: var(--blue); width: 0%; border-radius: 999px; transition: width 0.4s ease; }

    .toolbar { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
    .search-input { flex-grow: 1; position: relative; min-width: 260px; }
    .search-input i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted2); font-size: 18px; }
    .search-input input { width: 100%; padding: 11px 12px 11px 40px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--title); font-size: 14px; outline: none; transition: 0.3s ease; }
    .filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted2); font-size: 13px; font-weight: 600; transition: .2s; cursor:pointer;}
    .filter-btn:hover, .filter-btn.active { background: var(--surface); color: var(--title); border-color: var(--muted); }
    .filter-select { appearance: none; outline:none; background: var(--surface2); color: var(--muted2); border: 1px solid var(--border); padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }

    .empty-state { text-align: center; padding: 60px 20px; background: var(--surface2); border: 1px dashed var(--border); border-radius: var(--radius); margin-top: 20px; transition: background-color 0.3s ease; }
    .empty-state i { font-size: 40px; color: var(--muted); margin-bottom: 12px; }
    .empty-state p { color: var(--muted2); font-size: 14px; }

    .case-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; gap: 16px; align-items: flex-start; transition: .2s; margin-bottom: 12px; }
    .case-item-highlight { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-soft); }
    .case-item:hover { border-color: var(--blue); background: var(--surface2); }
    .case-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; padding-top: 2px; }
    .case-checkbox { appearance: none; width: 20px; height: 20px; border: 2px solid var(--muted); border-radius: 4px; background: transparent; cursor: pointer; position: relative; transition: .2s; }
    .case-checkbox:checked { background: var(--green); border-color: var(--green); }
    .case-checkbox:checked::after { content: '✔'; position: absolute; color: #fff; font-size: 11px; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 900; }
    .star-btn { background: none; border: none; color: var(--muted); font-size: 20px; transition: .2s; cursor:pointer;}
    .star-btn:hover, .star-btn.active { color: var(--gold); }
    .case-content { flex-grow: 1; cursor: pointer; }
    .case-content h3 { color: var(--title); }

    /* Fundo da tela de leitura: invertido em relação ao padrão antigo — o topo/título
       fica com o tom cinza-azulado (--bg) e o conteúdo (segunda metade, corpo do texto)
       fica no branco/superfície (--surface), aplicado no wrapper da tela inteira e
       sobrescrito só no header. */
    #tela-leitura-dinamica, #tela-leitura-sumula { background: var(--surface); transition: background-color 0.3s ease; }
    .read-header { background: var(--bg); border-bottom: 1px solid var(--border); padding: 40px 0; transition: background-color 0.3s ease; }
    .read-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--title); line-height: 1.3; margin-top: 14px; }
    .read-layout { display: block; margin-top: 32px; }
    /* Novo padrão de leitura: texto justificado (não mais alinhado só à esquerda) e
       quebras de linha (\n\n) do conteúdo preservadas, pra teses e comentários com
       vários pontos numerados não ficarem "embolados" num bloco só. */
    /* Cor de destaque (accent) por matéria, usada no Destaque da leitura.
       Segue a mesma paleta já usada no Cronograma Semanal (subj-red, subj-green etc.),
       pra criar uma "assinatura visual" consistente por matéria em todo o app. */
    #tela-leitura-dinamica.materia-penal,
    #tela-leitura-dinamica.materia-proc_penal,
    #preview-publica-section.materia-penal,
    #preview-publica-section.materia-proc_penal      { --accent: var(--red);    --accent-soft: var(--red-soft); }
    #tela-leitura-dinamica.materia-constitucional,
    #preview-publica-section.materia-constitucional  { --accent: var(--green);  --accent-soft: var(--green-soft); }
    #tela-leitura-dinamica.materia-administrativo,
    #preview-publica-section.materia-administrativo  { --accent: var(--gold);   --accent-soft: var(--gold-soft); }
    #tela-leitura-dinamica.materia-civil,
    #tela-leitura-dinamica.materia-proc_civil,
    #preview-publica-section.materia-civil,
    #preview-publica-section.materia-proc_civil      { --accent: var(--blue);   --accent-soft: var(--blue-soft); }

    #destaque-lbl i, #destaque-lbl { color: var(--accent, var(--blue)); }

    .official-text { font-size: 15.5px; line-height: 1.8; color: var(--text); text-align: justify; }
    .official-text p, .official-text .highlight-quote, .official-text .example-box, .official-text .bullet-points li { text-align: justify; }
    #leitura-tese, #leitura-explicacao, #leitura-exemplo,
    #leitura-sumula-enunciado, #leitura-sumula-explicacao, #leitura-sumula-exemplo,
    #preview-julgado-tese, #preview-julgado-explicacao, #preview-julgado-exemplo { white-space: pre-line; }
    
    .section-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted2); margin-top: 32px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
    .section-lbl i { font-size: 16px; color: var(--blue); }
    .highlight-quote { background: var(--accent-soft, var(--blue-soft)); border-left: 3px solid var(--accent, var(--blue)); padding: 18px 20px; font-style: italic; color: var(--text); margin: 16px 0; border-radius: 0 var(--radius) var(--radius) 0; font-weight: 500; font-size: 15px; }

    /* "O que decidiu" em blocos rotulados (Contexto / Entendimento do tribunal /
       Fundamento / Decisão em destaque) — texto continua justificado, só ganha
       uma borda lateral + rótulo pra separar visualmente cada parte do raciocínio. */
    .explicacao-corrida { text-align: justify; white-space: pre-line; }
    .explicacao-bloco { margin-bottom: 18px; }
    .explicacao-bloco-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
    .explicacao-bloco-texto { text-align: justify; padding-left: 12px; border-left: 2px solid var(--border); margin: 0; }
    .explicacao-decisao-box { background: var(--green-soft); border: 1px solid rgba(34,197,94,.35); border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 4px; }
    .explicacao-decisao-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--green); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
    .explicacao-decisao-texto { text-align: justify; margin: 0; }
    
    .example-box { background: var(--surface2); border: 1px solid var(--border); padding: 18px 20px; border-radius: var(--radius); margin: 16px 0; font-size: 14.5px; }

    /* Caixa de transcrição do artigo de lei central de uma súmula ou julgado — visual
       diferente da example-box pra sinalizar "isto é texto legal literal", não explicação. */
    .artigo-box { background: var(--surface2); border-left: 3px solid var(--gold); padding: 16px 20px; border-radius: var(--radius); margin: 16px 0; }
    .artigo-box-ref { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--gold); margin-bottom: 8px; }
    .artigo-box-texto { font-size: 14px; line-height: 1.75; color: var(--muted2); white-space: pre-line; font-family: var(--font-display); }
    .example-box strong { color: var(--gold); }

    .bullet-points { list-style: none; padding-left: 0; margin-bottom: 24px; }
    .bullet-points li { position: relative; padding-left: 24px; margin-bottom: 12px; }
    .bullet-points li::before { content: '•'; position: absolute; left: 0; color: var(--blue); font-weight: bold; font-size: 18px; top: -2px; }
    .bullet-points strong { color: var(--title); }

    /* Pontos-chave dentro do julgado: caixa de destaque própria, com o roxo como cor
       fixa de identidade — não muda com a matéria (isso já é papel do Destaque) e
       não repete o dourado do Exemplo Prático/ações, então cada bloco fica reconhecível
       à primeira vista. */
    .bullet-points.pontos-chave-box {
      background: var(--purple-soft); border: 1px solid rgba(167,139,250,.3);
      border-radius: var(--radius); padding: 18px 20px 6px; margin: 16px 0 24px;
    }
    .bullet-points.pontos-chave-box li::before { color: var(--purple); }

    /* ============================================================
       PONTOS-CHAVE DE PROVA — identidade visual dos resumos
       Mesma família do "official-text" dos julgados, mas com o verde
       como cor de identidade (a mesma do card "Pontos-chave de prova"
       em Materiais) e caixas próprias para destaque, atenção e exemplo.
       ============================================================ */
    .resumo-conteudo { font-size: 15.5px; line-height: 1.8; color: var(--text); }

    /* Coluna de leitura centralizada — como em sites de estudo, o texto não
       ocupa a largura inteira da tela, fica numa faixa central confortável,
       com um "cartão" de fundo separando a leitura do resto da página. */
    .resumo-leitura-wrap { max-width: 780px; margin: 0 auto; }
    .resumo-leitura-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 40px 48px;
    }
    @media (max-width: 680px) { .resumo-leitura-card { padding: 26px 22px; } }

    .resumo-secao {
      font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--title);
      display: flex; align-items: center; gap: 9px;
      margin: 30px 0 14px; padding-top: 22px; border-top: 1px dashed var(--border);
    }
    .resumo-secao.primeira { margin-top: 0; padding-top: 0; border-top: none; }
    .resumo-secao i { color: var(--green); font-size: 16px; flex-shrink: 0; }

    .resumo-paragrafo { text-align: justify; margin-bottom: 16px; }
    .resumo-paragrafo:last-child { margin-bottom: 0; }

    .resumo-destaque {
      background: var(--green-soft); border-left: 3px solid var(--green);
      padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0;
      margin: 18px 0; font-weight: 500; font-size: 15px; color: var(--text);
    }
    .resumo-destaque strong { color: var(--title); }

    .resumo-atencao {
      display: flex; gap: 12px; align-items: flex-start;
      background: var(--gold-soft); border: 1px solid rgba(212,168,75,.3);
      padding: 16px 20px; border-radius: var(--radius); margin: 18px 0; font-size: 14.5px;
    }
    .resumo-atencao i { color: var(--gold); font-size: 19px; margin-top: 1px; flex-shrink: 0; }
    .resumo-atencao strong { color: var(--title); }

    .resumo-exemplo {
      display: flex; gap: 12px; align-items: flex-start;
      background: var(--surface2); border: 1px solid var(--border);
      padding: 16px 20px; border-radius: var(--radius); margin: 18px 0; font-size: 14.5px;
    }
    .resumo-exemplo i { color: var(--green); font-size: 18px; margin-top: 1px; flex-shrink: 0; }
    .resumo-exemplo strong { color: var(--title); }

    .resumo-pontos-titulo {
      font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
      color: var(--muted2); margin-top: 32px; margin-bottom: 14px;
      display: flex; align-items: center; gap: 8px;
      padding-top: 22px; border-top: 1px dashed var(--border);
    }
    .resumo-pontos-titulo i { color: var(--green); font-size: 16px; }
    .resumo-bullet-points li::before { color: var(--green); }

    /* Listas de tópicos dentro do resumo — "I —", "(a)", "1.", "1)" ou um
       rótulo curto tipo "Exceção 1:" viram um cartãozinho com a marca
       original preservada, em vez de ficarem escondidos no meio do texto. */
    .resumo-lista { margin: 10px 0 20px; display: flex; flex-direction: column; gap: 10px; }
    .resumo-lista-item { display: flex; gap: 12px; align-items: flex-start; }
    .resumo-lista-marca {
      flex-shrink: 0; white-space: nowrap; min-width: 24px; text-align: center;
      padding: 2px 8px; border-radius: 6px; background: var(--green-soft); color: var(--green);
      font-size: 12.5px; font-weight: 700;
    }
    .resumo-lista-item > div:last-child { flex: 1; padding-top: 2px; text-align: justify; }
    .resumo-lista-item strong { color: var(--title); }

    /* ============================================================
       2ª FASE E PROVA ORAL — perguntas de simulação de arguição oral
       ao final do resumo, no mesmo espírito dos pontos-chave: cada
       card traz a pergunta, um botão de dica (opcional, unifilar) e
       um botão "ver resposta" que revela o gabarito comentado.
       ============================================================ */
    .resumo-oral-titulo {
      font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
      color: var(--muted2); margin-top: 32px; margin-bottom: 14px;
      display: flex; align-items: center; gap: 8px;
      padding-top: 22px; border-top: 1px dashed var(--border);
    }
    .resumo-oral-titulo i { color: var(--blue); font-size: 16px; }
    .resumo-oral-lista { display: flex; flex-direction: column; gap: 14px; }
    .resumo-oral-card {
      background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 20px 22px;
    }
    .resumo-oral-numero {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%; background: var(--blue-soft); color: var(--blue);
      font-size: 12px; font-weight: 700; margin-right: 8px; flex-shrink: 0;
    }
    .resumo-oral-pergunta { font-size: 15px; font-weight: 600; color: var(--title); line-height: 1.55; display: flex; }
    .resumo-oral-pergunta-texto { flex: 1; }
    .resumo-oral-acoes { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
    .resumo-oral-btn {
      display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius-sm);
      border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px;
      font-weight: 600; cursor: pointer; transition: .2s;
    }
    .resumo-oral-btn:hover { background: var(--surface2); }
    .resumo-oral-btn.dica-btn:hover { border-color: var(--gold); color: var(--gold); }
    .resumo-oral-btn.resposta-btn { background: var(--blue-soft); color: var(--blue); border-color: rgba(59,130,246,.3); }
    .resumo-oral-btn.resposta-btn:hover { background: var(--blue); color: #fff; }
    .resumo-oral-btn.aberto { opacity: .55; pointer-events: none; }
    .resumo-oral-dica, .resumo-oral-resposta {
      display: none; margin-top: 12px; padding: 14px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      font-size: 14px; line-height: 1.65;
    }
    .resumo-oral-dica.aberta, .resumo-oral-resposta.aberta { display: flex; gap: 10px; align-items: flex-start; }
    .resumo-oral-dica { background: var(--gold-soft); border-left: 3px solid var(--gold); color: var(--text); }
    .resumo-oral-dica i { color: var(--gold); font-size: 16px; margin-top: 1px; flex-shrink: 0; }
    .resumo-oral-resposta { background: var(--green-soft); border-left: 3px solid var(--green); color: var(--text); }
    .resumo-oral-resposta i { color: var(--green); font-size: 16px; margin-top: 1px; flex-shrink: 0; }
    .resumo-oral-resposta strong, .resumo-oral-dica strong { color: var(--title); }

    /* ============================================================
       Versão "impressão/imagem" dos blocos de resumo — mesma família
       visual do .pdf-card dos julgados (paleta clara fixa, não depende
       das variáveis do tema escuro), usada só dentro de #pdf-print-area.
       ============================================================ */
    .pdf-resumo-secao { font-family: var(--font-display, Georgia, serif); font-size: 14.5px; font-weight: 700; color: #14532d; margin: 14px 0 6px; }
    .pdf-resumo-secao.primeira { margin-top: 0; }
    .pdf-resumo-paragrafo { font-size: 12.5px; line-height: 1.6; color: #334155; margin: 0 0 8px; text-align: justify; }
    .pdf-resumo-destaque { background: #f0fdf4; border-left: 3px solid #16a34a; padding: 8px 12px; border-radius: 0 6px 6px 0; margin: 8px 0; font-size: 12.5px; color: #14532d; font-weight: 500; }
    .pdf-resumo-atencao { background: #fdf8ee; border: 1px solid #eadfc4; padding: 8px 12px; border-radius: 6px; margin: 8px 0; font-size: 12.5px; color: #7c5a12; }
    .pdf-resumo-exemplo { background: #eef2ff; padding: 8px 12px; border-radius: 6px; margin: 8px 0; font-size: 12.5px; color: #334155; }
    .pdf-resumo-lista { margin: 6px 0 10px; display: flex; flex-direction: column; gap: 6px; }
    .pdf-resumo-lista-item { display: flex; gap: 8px; font-size: 12.5px; color: #334155; }
    .pdf-resumo-lista-marca { flex-shrink: 0; font-weight: 700; color: #16a34a; }
    .pdf-card .resumo-conteudo, .pdf-card .pdf-resumo-secao, .pdf-card .pdf-resumo-paragrafo { white-space: normal; }
    .pdf-card strong { font-weight: 700; }

    .action-bar { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px dashed var(--border); }

    /* Ação principal: ocupa a largura toda, cor cheia, é o próximo passo óbvio.
       Sempre no azul padrão DatavenIA — não muda com a cor da matéria (--accent),
       pra manter uma identidade de marca fixa no botão de ação mais importante. */
    .action-btn-primary-full {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
      background: var(--blue); color: #fff; border: none;
      padding: 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px;
      cursor: pointer; transition: .2s; box-shadow: 0 2px 10px rgba(0,0,0,.15);
    }
    .action-btn-primary-full:hover { filter: brightness(1.08); transform: translateY(-1px); }

    /* Ações secundárias: discretas (ghost), menores, em linha. */
    .action-bar-secondary { display: flex; gap: 8px; flex-wrap: wrap; }
    .action-btn-secondary {
      flex: 1; min-width: 100px; display: flex; align-items: center; justify-content: center; gap: 6px;
      background: transparent; border: 1px solid var(--border); padding: 10px 8px; border-radius: var(--radius-sm);
      color: var(--muted2); font-weight: 600; font-size: 12.5px; transition: .2s; cursor: pointer;
    }
    .action-btn-secondary:hover { background: var(--surface2); border-color: var(--muted2); color: var(--title); }
    .action-btn-secondary:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
    #btn-revisar-atual.active { background: rgba(212,168,75,.12); color: var(--gold); border-color: rgba(212,168,75,.35); }

    /* "Marcar como Lido": dourado por padrão, pra se diferenciar das outras ações
       secundárias (Anterior fica cinza neutro, Revisar Depois só vira dourado quando
       ativo). Como é a ação de progresso mais usada na tela, merece destaque fixo. */
    #btn-marcar-lido { background: var(--gold-soft); color: var(--gold); border-color: rgba(212,168,75,.35); }
    #btn-marcar-lido:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

    /* Botões de admin (gerar PDF/imagem) seguem o estilo antigo, mais neutro. */
    .action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); padding: 14px; border-radius: var(--radius-sm); color: var(--title); font-weight: 600; font-size: 14px; transition: .2s; cursor:pointer;}
    .action-btn:hover { background: var(--surface); border-color: var(--blue); }

    /* Card "Continuar de onde parei" — CTA logo no topo da Home */
    .continuar-btn { width: 100%; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: var(--radius); padding: 16px 18px; text-align: left; cursor: pointer; transition: .18s; }
    .continuar-btn:hover { border-color: var(--blue); background: var(--surface2); }
    .continuar-icone { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 17px; }
    .continuar-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .continuar-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); }
    .continuar-titulo { font-size: 14.5px; font-weight: 600; color: var(--title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .continuar-seta { color: var(--muted2); flex-shrink: 0; font-size: 18px; }
    .continuar-vazio { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: var(--radius); padding: 16px 18px; }
    .continuar-vazio i { font-size: 26px; color: var(--green); flex-shrink: 0; }
    .continuar-vazio-titulo { font-size: 14.5px; font-weight: 700; color: var(--title); }
    .continuar-vazio-sub { font-size: 12.5px; color: var(--muted2); margin-top: 2px; }

    /* Modal do calendário de ofensiva (abre pelo badge 🔥 da nav) */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .modal-calendario-box { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; }
    .modal-calendario-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
    .modal-calendario-titulo { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--title); }
    .modal-calendario-titulo i { color: var(--gold); }
    .modal-calendario-streak { font-size: 13px; color: var(--muted2); margin-bottom: 18px; }
    .calendario-mes-label { font-size: 13px; font-weight: 700; color: var(--muted2); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 12px; }
    .calendario-semana-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; font-weight: 700; color: var(--muted2); margin-bottom: 6px; }
    .calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .calendario-dia { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 12px; color: var(--muted2); background: var(--surface2); }
    .calendario-dia.vazio { background: transparent; }

    /* Assistente "Minha Meta de Leitura" */
    .modal-plano-box { max-width: 420px; max-height: 88vh; overflow-y: auto; }
    .plano-intro-texto { font-size: 13.5px; color: var(--text); line-height: 1.6; margin: 0 0 12px; }
    .plano-intro-texto strong { color: var(--title); }
    .plano-presets-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
    .plano-preset-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 6px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; transition: .15s; }
    .plano-preset-btn:hover { border-color: var(--blue); }
    .plano-preset-btn.selecionado { background: var(--blue); border-color: var(--blue); color: #fff; }
    .plano-input-texto { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; color: var(--title); font-family: inherit; }
    .plano-sugestao-ritmo { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--blue-soft); border: 1px solid rgba(59,130,246,.25); font-size: 12.5px; color: var(--text); }
    .plano-materias-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
    .plano-materia-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; transition: .15s; text-align: center; }
    .plano-materia-chip:hover { border-color: var(--blue); }
    .plano-materia-chip.selecionado { background: var(--blue); border-color: var(--blue); color: #fff; }
    .plano-chip-misturado { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .plano-chip-misturado.selecionado { background: var(--purple); border-color: var(--purple); color: #fff; }

    .plano-carreira-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .plano-carreira-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 10px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; transition: .15s; display: flex; align-items: center; gap: 8px; text-align: left; }
    .plano-carreira-chip i { font-size: 16px; color: var(--muted2); flex-shrink: 0; transition: .15s; }
    .plano-carreira-chip:hover { border-color: var(--blue); }
    .plano-carreira-chip.selecionado { background: var(--blue); border-color: var(--blue); color: #fff; }
    .plano-carreira-chip.selecionado i { color: #fff; }
    .plano-semana-carreira-badge { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--blue); background: var(--blue-soft); border: 1px solid rgba(59,130,246,.3); border-radius: 999px; padding: 5px 10px; width: fit-content; }
    .plano-semana-carreira-badge i { font-size: 13px; }
    @media (max-width: 480px) { .plano-carreira-grid { grid-template-columns: 1fr; } }

    /* "Sua carreira" (tela Meu Plano) como accordion: uma vez escolhida a carreira, a grade
       de opções recolhe e dá lugar a esse cabeçalho compacto — clicar nele reabre a grade
       pra permitir trocar. Ver alternarCarreiraSemanalExpandida() em app.js. */
    .plano-carreira-compacto { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; cursor: pointer; transition: .15s; }
    .plano-carreira-compacto:hover { border-color: var(--blue); }
    .plano-carreira-compacto span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
    .plano-carreira-compacto span i { color: var(--blue); font-size: 16px; }
    .plano-carreira-compacto strong { color: var(--blue); font-weight: 700; }
    .plano-carreira-compacto > i.ph-bold { color: var(--muted2); font-size: 13px; }

    .meta-diaria-carreira-badge { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--blue); background: var(--blue-soft); border: 1px solid rgba(59,130,246,.3); border-radius: 999px; padding: 5px 10px; width: fit-content; margin: 10px 0 2px; cursor: pointer; transition: .15s; }
    .meta-diaria-carreira-badge:hover { background: rgba(59,130,246,.22); }
    .meta-diaria-carreira-badge i { font-size: 13px; }

    /* Meu Plano — grade semanal (Seg-Sáb) da tela /tela-meu-plano */
    /* A raiz do bug anterior (nome de matéria "Administrativo"/"Constitucional" cortando
       ou hifenizando no meio) era deixar a coluna encolher até caber 7 por linha em
       QUALQUER largura de tela — em telas menores isso espremia a coluna a ponto de a
       palavra não caber nem sozinha numa linha. Corrigido invertendo a lógica: cada coluna
       tem uma largura MÍNIMA legível (minmax(162px, 1fr) — cabe até "Administrativo"/
       "Constitucional" inteiros numa linha) e, se a soma das 7 colunas não couber no card,
       quem cede é o scroll horizontal (overflow-x: auto, já existente, agora com a barra
       de rolagem no estilo escuro do site), não o texto. Em telas bem largas as colunas
       ainda esticam igualmente (1fr). */
    /* align-items: start é o ponto-chave aqui — sem isso, o comportamento padrão do grid
       (stretch) faz TODAS as colunas da linha esticarem pra igualar a mais alta (ex.: Terça
       com 15 julgados), então mesmo depois de esvaziar Sexta o card dela continua "inchado"
       só pra bater com a vizinha maior. Com start, cada coluna fica com a altura do seu
       próprio conteúdo — proporcional ao que ela realmente tem. */
    .plano-semanal-grid { display: grid; grid-template-columns: repeat(7, minmax(162px, 1fr)); align-items: start; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    @media (max-width: 980px) { .plano-semanal-grid { grid-template-columns: repeat(4, minmax(162px, 1fr)); } }
    @media (max-width: 560px) { .plano-semanal-grid { grid-template-columns: repeat(2, minmax(162px, 1fr)); } }
    /* Barra de rolagem própria do site (dark), em vez do scrollbar branco padrão do
       navegador — a mesma receita usada em .schedule-list, só que também com a trilha
       (track) estilizada pra não deixar nenhum trecho branco aparecendo. */
    .plano-semanal-grid::-webkit-scrollbar { height: 7px; }
    .plano-semanal-grid::-webkit-scrollbar-track { background: var(--surface); border-radius: 999px; }
    .plano-semanal-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
    .plano-semanal-grid::-webkit-scrollbar-thumb:hover { background: var(--muted); }
    .plano-dia-col { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 10px; display: flex; flex-direction: column; gap: 9px; min-height: 150px; min-width: 0; }
    /* Cabeçalho do dia (nome + nota opcional + total) isolado do resto por uma linha sutil —
       o nome do dia é o elemento de maior destaque da coluna; "N julgados" é auxiliar. */
    .plano-dia-header { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
    .plano-dia-titulo { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: .2px; color: var(--title); text-align: center; }
    /* Selo "Opcional" (dia de Simulado, hoje só o Domingo) — usa a mesma cor roxa do
       Simulado no Cronograma Semanal (subj-purple) em vez do cinza neutro genérico, pra ter
       identidade em vez de parecer uma caixa solta destoando das outras colunas. Texto curto
       e numa linha só (o detalhe completo fica no title, via tooltip) evita o selo quebrar em
       duas linhas e ficar "inchado" em relação ao resto do card. */
    .plano-dia-nota { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; color: var(--purple); text-align: center; background: var(--purple-soft); border: 1px solid rgba(167,139,250,.3); border-radius: 999px; padding: 3px 9px; margin-top: 2px; width: fit-content; }
    .plano-dia-total { font-size: 10px; font-weight: 500; color: var(--muted); text-align: center; }
    .plano-dia-itens { display: flex; flex-direction: column; gap: 7px; flex: 1; }
    /* Card da matéria: hierarquia nome (principal) / qtd (secundária), sem bordas fortes
       pra não parecer um botão — só o traço colorido à esquerda identifica a matéria. */
    .plano-dia-item { position: relative; background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-left-style: solid; border-radius: 0 7px 7px 0; padding: 8px 22px 8px 10px; min-width: 0; max-width: 100%; transition: background .15s; }
    /* Sem hyphens/word-break forçado: a coluna tem uma largura mínima legível o bastante
       (ver .plano-semanal-grid acima, 162px) pra qualquer nome de matéria — inclusive a
       palavra mais longa ("Administrativo"/"Constitucional") sozinha numa linha — caber sem
       precisar quebrar no meio. word-break/hyphens ficam travados em "não quebrar palavra":
       o nome só quebra de linha nos espaços, como uma frase normal ("Direito" / "Constitucional"),
       nunca dividindo uma palavra ao meio nem inserindo hífen. */
    .plano-dia-item-nome { font-weight: 700; font-size: 11.5px; color: var(--text); line-height: 1.3; overflow-wrap: normal; word-break: normal; hyphens: none; }
    .plano-dia-item-qtd { font-size: 10px; font-weight: 500; color: var(--muted); margin-top: 1px; }
    /* O "x" de remover fica praticamente invisível por padrão e só aparece ao passar o mouse
       sobre o card — ação secundária, não deve competir com o nome da matéria. Em telas
       touch (sem hover), mantemos uma leve visibilidade pra continuar descobrível. */
    .plano-dia-item-remover { position: absolute; top: 6px; right: 6px; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 10px; line-height: 1; width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s, background .15s, color .15s; }
    @media (hover: hover) {
      .plano-dia-item-remover { opacity: 0; }
      .plano-dia-item:hover .plano-dia-item-remover { opacity: 1; transform: scale(1); }
    }
    @media (hover: none) { .plano-dia-item-remover { opacity: .4; } }
    .plano-dia-item-remover:focus-visible { opacity: 1; transform: scale(1); }
    .plano-dia-item-remover:hover { background: var(--red-soft); color: var(--red); }
    .plano-dia-add-btn { border: 1px dashed var(--border); background: transparent; color: var(--muted2); border-radius: 7px; padding: 8px; font-size: 10.5px; font-weight: 600; cursor: pointer; opacity: .85; transition: .15s; }
    .plano-dia-add-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); opacity: 1; }
    .plano-dia-vazio { font-size: 10.5px; color: var(--muted); text-align: center; padding: 8px 0; }

    /* Meu Plano — "Começar com um modelo": cards de template clicáveis */
    .plano-templates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    @media (max-width: 700px) { .plano-templates-grid { grid-template-columns: 1fr; } }
    .plano-template-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; text-align: left; cursor: pointer; transition: .15s; }
    .plano-template-card:hover { border-color: var(--blue); background: var(--surface); }
    .plano-template-nome { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: var(--title); margin-bottom: 6px; }
    .plano-template-nome i { color: var(--purple); }
    .plano-template-desc { font-size: 12px; color: var(--muted2); line-height: 1.4; }

    /* Meu Plano — fase "Progresso desta semana": grade de pílulas com % cumprido por dia */
    .plano-progresso-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
    @media (max-width: 980px) { .plano-progresso-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 560px) { .plano-progresso-grid { grid-template-columns: repeat(2, 1fr); } }
    .plano-progresso-dia { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; }
    .plano-progresso-dia.completo { border-color: var(--green); background: var(--green-soft); }
    .plano-progresso-dia-titulo { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--title); margin-bottom: 6px; }
    .plano-progresso-dia-frac { font-size: 11px; color: var(--muted2); margin-bottom: 8px; }
    .plano-progresso-dia.completo .plano-progresso-dia-frac { color: var(--green); font-weight: 700; }
    .plano-progresso-vazio { font-size: 12.5px; color: var(--muted2); text-align: center; padding: 10px 0; }

    /* Meu Plano — "Meta por matéria": uma linha por matéria com barra de domínio + prazo */
    .meta-materia-lista { display: flex; flex-direction: column; gap: 16px; }
    .meta-materia-item { border-bottom: 1px solid var(--border); padding-bottom: 14px; }
    .meta-materia-item:last-child { border-bottom: none; padding-bottom: 0; }
    .meta-materia-cabecalho { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--title); margin-bottom: 6px; }
    .meta-materia-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
    .meta-materia-pct { color: var(--muted2); font-weight: 700; }
    .meta-materia-linha-prazo { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
    .meta-materia-linha-prazo input[type="date"] { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; font-size: 12.5px; color: var(--title); font-family: inherit; }
    .meta-materia-info { font-size: 12px; color: var(--muted2); }
    .meta-materia-info strong { color: var(--text); }
    .meta-materia-info.atrasado { color: var(--red); }
    .meta-materia-remover-prazo { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; }
    .meta-materia-remover-prazo:hover { color: var(--red); }

    /* Replanejamento automático — banner de pendências + selo de repescagem na grade */
    .plano-banner-replan { display: flex; align-items: flex-start; gap: 14px; background: var(--red-soft); border: 1px solid rgba(239,68,68,.3); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 4px; }
    .plano-banner-replan-icone { color: var(--red); font-size: 22px; flex-shrink: 0; margin-top: 2px; }
    .plano-banner-replan-texto { flex: 1; min-width: 200px; }
    .plano-banner-replan-titulo { font-weight: 700; font-size: 13.5px; color: var(--title); margin-bottom: 4px; }
    .plano-banner-replan-detalhe { font-size: 12px; color: var(--muted2); line-height: 1.5; }
    /* Lista de pendências por dia — antes ficava tudo numa frase só separada por "•" (as
       "bolinhas" antes de cada dia); agora cada dia vira sua própria linha, sem marcador
       nenhum, só a indentação natural da lista pra separar visualmente um dia do outro. */
    .plano-banner-replan-lista { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
    .plano-banner-replan-item { font-size: 12px; color: var(--muted2); line-height: 1.5; }
    .plano-banner-replan-item strong { color: var(--text); }
    .plano-banner-replan-acoes { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
    .plano-banner-replan-btn { border-radius: var(--radius-sm); padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
    .plano-banner-replan-btn.primario { background: var(--red); border-color: var(--red); color: #fff; }
    .plano-banner-replan-btn:hover { opacity: .85; }
    @media (max-width: 640px) { .plano-banner-replan { flex-direction: column; } .plano-banner-replan-acoes { flex-direction: row; } }

    .plano-dia-item-ajuste { position: relative; }
    .plano-dia-ajuste-tag { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; background: rgba(0,0,0,.15); padding: 1px 5px; border-radius: 4px; vertical-align: middle; margin-left: 3px; }

    /* Meu Plano — Gráfico de leitura (substituiu o Calendário do mês) */
    .plano-grafico-periodo-btn { border: 1px solid var(--border); background: var(--surface2); color: var(--muted2); font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: .15s; }
    .plano-grafico-periodo-btn:hover { border-color: var(--blue); color: var(--title); }
    .plano-grafico-periodo-btn.ativo { background: var(--blue); border-color: var(--blue); color: #fff; }
    .plano-grafico-resumo { font-size: 12.5px; font-weight: 700; color: var(--title); margin-bottom: 12px; }
    .plano-grafico-leitura-grid { display: flex; align-items: flex-end; gap: 5px; height: 160px; }
    .plano-grafico-coluna { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
    .plano-grafico-valor { font-size: 10.5px; font-weight: 700; color: var(--muted2); margin-bottom: 3px; }
    .plano-grafico-coluna.hoje .plano-grafico-valor { color: var(--blue); }
    .plano-grafico-barra-bg { width: 100%; max-width: 26px; flex: 1; display: flex; align-items: flex-end; background: var(--surface2); border-radius: 4px 4px 2px 2px; overflow: hidden; }
    .plano-grafico-barra { width: 100%; background: var(--blue); border-radius: 4px 4px 0 0; min-height: 2px; transition: height .3s; }
    .plano-grafico-coluna.hoje .plano-grafico-barra { background: var(--green); }
    .plano-grafico-rotulo { font-size: 9.5px; color: var(--muted2); text-align: center; margin-top: 6px; line-height: 1.3; white-space: nowrap; }
    .plano-grafico-coluna.hoje .plano-grafico-rotulo { color: var(--blue); font-weight: 700; }
    @media (max-width: 640px) { .plano-grafico-leitura-grid { gap: 2px; } .plano-grafico-rotulo { font-size: 8.5px; } }

    /* Card na Home: CTA pra montar a meta (antes de configurar) e fila do plano (depois) */
    .plano-cta-card { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 18px 20px; cursor: pointer; transition: .18s; text-align: left; width: 100%; }
    .plano-cta-card:hover { border-color: var(--gold); background: var(--surface2); }
    .plano-cta-card i.plano-cta-icone { font-size: 26px; color: var(--gold); flex-shrink: 0; }
    .plano-cta-titulo { font-size: 14.5px; font-weight: 700; color: var(--title); }
    .plano-cta-sub { font-size: 12.5px; color: var(--muted2); margin-top: 2px; }

    .plano-fila-card { max-width: 900px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; text-align: left; }
    .plano-fila-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
    .plano-fila-titulo { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--title); }
    .plano-fila-titulo i { color: var(--gold); }
    .plano-fila-ajustar { background: transparent; border: none; color: var(--muted2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
    .plano-fila-ajustar:hover { color: var(--blue); }
    .plano-fila-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
    .plano-fila-remover { background: transparent; border: none; color: var(--muted2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
    .plano-fila-remover:hover { color: var(--red); }
    .plano-fila-sub { font-size: 12px; color: var(--muted2); margin-bottom: 12px; }

    /* Modal de busca global (ícone de lupa na nav) */
    .modal-busca-box { max-width: 560px; max-height: 82vh; display: flex; flex-direction: column; }
    .busca-global-resultados { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .busca-resultado-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-radius: var(--radius-sm); cursor: pointer; border-bottom: 1px solid var(--border); transition: .15s; }
    .busca-resultado-item:last-child { border-bottom: none; }
    .busca-resultado-item:hover { background: var(--surface2); }
    .busca-resultado-titulo { font-size: 14px; font-weight: 600; color: var(--title); }
    .busca-resultado-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted2); }
    .calendario-dia.estudou { background: var(--green); color: #fff; font-size: 13px; }
    .cal-dia-conteudo { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; }
    .cal-dia-tempo { font-size: 8px; font-weight: 700; opacity: .92; }
    .calendario-dia.hoje:not(.estudou) { border: 2px solid var(--blue); color: var(--blue); font-weight: 700; }

    .quiz-box { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-top: 16px; position: relative; overflow: hidden; transition: .3s; }
    .quiz-box:hover { border-color: var(--blue); }
    .quiz-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--muted); transition: .3s; }
    .quiz-box.revelado.errado::before { background: var(--red); }
    .quiz-box.revelado.certo::before { background: var(--green); }
    
    .quiz-question { font-size: 15px; font-weight: 500; color: var(--title); line-height: 1.6; }
    .quiz-hint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--blue); margin-top: 16px; font-weight: 600; }
    .quiz-box.revelado .quiz-hint { display: none; }

    .quiz-responder { display: flex; gap: 10px; margin-top: 16px; }
    .quiz-box.revelado .quiz-responder { display: none; }
    .quiz-responder .feedback-btn { padding: 8px 20px; font-size: 13px; cursor: pointer; }
    
    .quiz-answer-area { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); animation: fadeIn 0.4s ease; }
    .quiz-box.revelado .quiz-answer-area { display: block; }

    .quiz-resultado-usuario { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
    .quiz-resultado-usuario.certo { color: var(--green); }
    .quiz-resultado-usuario.errado { color: var(--red); }
    
    .quiz-answer-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 4px; margin-bottom: 8px; }
    .badge-certo { background: var(--green-soft); color: var(--green); border: 1px solid rgba(34,197,94,.25); }
    .badge-errado { background: var(--red-soft); color: var(--red); border: 1px solid rgba(239,68,68,.25); }
    .quiz-answer-text { font-size: 14px; color: var(--muted2); line-height: 1.6; }

    .feedback-btn { padding: 6px 16px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; transition: .2s; cursor:pointer;}
    .feedback-btn:hover { background: var(--surface2); }
    .feedback-btn.btn-sim:hover { border-color: var(--green); color: var(--green); }
    .feedback-btn.btn-nao:hover { border-color: var(--red); color: var(--red); }
    .feedback-btn.selected-sim { background: var(--green-soft); border-color: var(--green); color: var(--green); }
    .feedback-btn.selected-nao { background: var(--red-soft); border-color: var(--red); color: var(--red); }

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

    /* Botão "Anterior" desabilitado (primeiro julgado da matéria) */
    .action-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

    /* Toast simples (avisa quando a matéria foi 100% concluída, por ex.) */
    .toast-dv {
      position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
      background: var(--surface2); border: 1px solid var(--border); color: var(--title);
      padding: 12px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
      box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 9999; opacity: 0; pointer-events: none;
      transition: opacity .25s ease, transform .25s ease; max-width: 90vw; text-align: center;
    }
    .toast-dv.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ============================================================
       Gerar PDF / Imagem do julgado (botões só aparecem na conta admin)
       ============================================================ */
    #btn-gerar-pdf-julgado, #btn-gerar-imagem-julgado { border-color: var(--gold); color: var(--gold); }
    #btn-gerar-pdf-julgado:hover, #btn-gerar-imagem-julgado:hover { background: var(--gold-soft); }

    /* Fica sempre escondida na tela normal; só existe pra virar o PDF/imagem */
    #pdf-print-area { display: none; }

    /* Estado usado só na hora de tirar a "foto" (html2canvas) pra gerar a imagem:
       precisa estar desenhada de verdade (display:none não renderiza), então
       jogamos ela pra fora da área visível em vez de escondida de fato. */
    #pdf-print-area.gerando-imagem {
      display: block;
      position: fixed;
      top: 0;
      left: -99999px;
      background: #fff;
    }

    /* Estilo do "cartão" do julgado — usado tanto na impressão/PDF quanto na
       imagem gerada (html2canvas), por isso fica fora do @media print. */
    .pdf-card {
      width: 720px;
      box-sizing: border-box;
      padding: 24px;
      background: #fff;
      font-family: var(--font-body, 'Inter', sans-serif);
      color: #1a1a1a;
      font-size: 13px;
      line-height: 1.5;
    }
    .pdf-header {
      display: flex; justify-content: space-between; align-items: center;
      border-bottom: 2px solid #0f172a; padding-bottom: 8px; margin-bottom: 14px;
    }
    .pdf-brand { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 17px; color: #0f172a; }
    .pdf-tags { display: flex; gap: 6px; }
    .pdf-tag { font-size: 10px; font-weight: 600; padding: 3px 9px; border: 1px solid #cbd5e1; border-radius: 20px; color: #334155; }
    .pdf-titulo { font-family: var(--font-display, Georgia, serif); font-size: 19px; line-height: 1.3; margin: 0 0 12px; color: #0f172a; }
    .pdf-section { margin-bottom: 10px; page-break-inside: avoid; }
    .pdf-lbl { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin-bottom: 4px; }
    .pdf-card blockquote { margin: 0; padding: 7px 12px; border-left: 3px solid #d4a84b; background: #fdf8ee; font-style: italic; white-space: pre-line; }
    /* white-space: pre-line preserva as quebras de linha (\n) que já existem no
       texto de origem, sem afetar o restante do fluxo do texto (mantém o wrap
       normal). Sem isso o navegador colapsa todas as quebras e o texto vira um
       bloco só, muito carregado — por isso aplicamos em todo o conteúdo textual
       do cartão (tese, explicação, exemplo, pontos-chave e quiz). */
    .pdf-card p,
    .pdf-exemplo span,
    .pdf-card li,
    .pdf-quiz-pergunta,
    .pdf-quiz-exp { white-space: pre-line; }
    .pdf-card p { margin: 0; }
    .pdf-card strong { font-weight: 700; }
    .pdf-exemplo { background: #eef2ff; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; font-size: 12.5px; page-break-inside: avoid; }
    .pdf-card ul { margin: 0; padding-left: 18px; }
    .pdf-card li { margin-bottom: 3px; }
    .pdf-quiz { border-top: 1px dashed #cbd5e1; padding-top: 10px; page-break-inside: avoid; }
    .pdf-quiz-pergunta { font-style: italic; margin-bottom: 5px; }
    .pdf-quiz-gabarito { display: inline-block; font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: 4px; margin-bottom: 5px; }
    .pdf-quiz-gabarito.certo { background: #dcfce7; color: #15803d; }
    .pdf-quiz-gabarito.errado { background: #fee2e2; color: #b91c1c; }
    .pdf-quiz-exp { color: #475569; font-size: 12.5px; }
    .pdf-footer { text-align: center; font-size: 10px; color: #94a3b8; margin-top: 12px; }

    /* Versão "limpa" do cartão, usada só na geração da imagem (PNG) — sem o
       cabeçalho com a marca DatavenIA/tags e sem o rodapé "datavenia.com.br",
       pra ficar pronta pra postar sem dado nenhum do site. O PDF continua
       usando o .pdf-card normal, com cabeçalho e rodapé. */
    .pdf-card.imagem-limpa .pdf-header,
    .pdf-card.imagem-limpa .pdf-footer { display: none; }
    .pdf-card.imagem-limpa .pdf-titulo { margin-top: 2px; }

    /* ============================================================
       PDF das Alterações Legislativas — mesma família visual do
       .pdf-card (paleta clara fixa, independente do tema escuro).
       ============================================================ */
    .pdf-leg-subtitulo { font-size: 11.5px; color: #64748b; margin: -6px 0 14px; }
    .pdf-leg-item { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed #cbd5e1; page-break-inside: avoid; }
    .pdf-leg-item:last-child { border-bottom: none; margin-bottom: 0; }
    .pdf-leg-disp { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 13.5px; color: #0f172a; margin-bottom: 8px; }
    .pdf-leg-diploma { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin-bottom: 2px; }
    .pdf-leg-badge { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; margin-left: 4px; }
    .pdf-leg-badge--novo { background: #dcfce7; color: #15803d; }
    .pdf-leg-badge--atencao { background: #fdf3dc; color: #92650c; }
    .pdf-leg-badge--revogado { background: #fee2e2; color: #b91c1c; }
    .pdf-leg-cols { display: flex; gap: 10px; margin-bottom: 8px; }
    .pdf-leg-col { flex: 1; padding: 8px 10px; border-radius: 6px; font-size: 11px; line-height: 1.5; }
    .pdf-leg-col p { white-space: pre-line; }
    .pdf-leg-col--antes  { background: #fef2f2; border-left: 3px solid #ef4444; color: #1e293b; }
    .pdf-leg-col--depois { background: #f0fdf4; border-left: 3px solid #22c55e; color: #1e293b; }
    .pdf-leg-col-lbl { display: block; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .75; margin-bottom: 3px; }
    .pdf-leg-impacto { font-size: 11px; color: #334155; background: #f8fafc; padding: 8px 10px; border-radius: 6px; }
    .pdf-leg-impacto p { white-space: pre-line; }
    .pdf-leg-footer { margin-top: 16px; }

    @media print {
      /* Esconde TUDO que não for a área do PDF, sem mexer no HTML/CSS de tela */
      body.modo-impressao-julgado > *:not(#pdf-print-area) { display: none !important; }

      body.modo-impressao-julgado #pdf-print-area {
        display: block !important;
      }

      @page { size: A4; margin: 14mm; }

      /* Garante que fundos coloridos (quadrinhos antes/depois, badges) saiam
         impressos — sem isso, boa parte dos navegadores some com toda cor de
         fundo ao imprimir/gerar PDF, deixando só o texto. */
      * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }

      .pdf-card { width: auto; padding: 0; font-size: 11px; }
      .pdf-titulo { font-size: 16px; }

      /* Rodapé "datavenia.app.br" repetido em toda página impressa (Chrome
         mantém elementos position:fixed visíveis em cada página do PDF). */
      .pdf-leg-card .pdf-leg-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: 0;
      }
      .pdf-leg-card { padding-bottom: 24px; }
    }

    /* ============================================================
       ÁREA DO ALUNO — navegação lateral + Home profissional
       Camada exclusivamente visual: os IDs e fluxos originais permanecem.
       ============================================================ */
    #app-container {
      --app-sidebar-width: 248px;
      --app-topbar-height: 68px;
    }

    #app-container > .app-sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 160;
      width: var(--app-sidebar-width);
      height: 100vh;
      border: 0;
      border-right: 1px solid rgba(255,255,255,.07);
      background: #17191d;
      color: #f8fafc;
      box-shadow: 14px 0 34px rgba(15,23,42,.08);
    }
    #app-container > .app-sidebar .nav-inner {
      width: 100%;
      max-width: none;
      height: 100%;
      padding: 24px 14px 16px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
    }
    #app-container > .app-sidebar .nav-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 56px;
      padding: 0 8px 20px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      color: #fff;
    }
    #app-container > .app-sidebar .nav-brand:hover { text-decoration: none; }
    .nav-brand-monogram {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 50%;
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      background: rgba(255,255,255,.04);
    }
    .nav-brand-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    .nav-brand-copy strong { color: #fff; font-size: 14px; letter-spacing: .035em; }
    .nav-brand-copy small { margin-top: 3px; color: #d4a84b; font-size: 8.5px; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }

    #app-container > .app-sidebar .nav-links {
      position: static;
      width: 100%;
      margin: 18px 0 0;
      padding: 0;
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 5px;
      overflow-y: auto;
      list-style: none;
    }
    #app-container > .app-sidebar .nav-links li { width: 100%; }
    #app-container > .app-sidebar .nav-links a {
      width: 100%;
      min-height: 45px;
      padding: 11px 13px;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #aeb4bf;
      font-size: 13px;
      font-weight: 500;
      transition: color .18s, background .18s, border-color .18s;
    }
    #app-container > .app-sidebar .nav-links a i { width: 18px; color: #7e8794; font-size: 17px; text-align: center; transition: color .18s; }
    #app-container > .app-sidebar .nav-links a:hover {
      color: #fff;
      background: rgba(255,255,255,.055);
      border-color: rgba(255,255,255,.05);
      text-decoration: none;
    }
    #app-container > .app-sidebar .nav-links a:hover i { color: #d4a84b; }

    .sidebar-account {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 8px 0;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .sidebar-avatar {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #d99116;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .03em;
    }
    .sidebar-account-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
    .sidebar-account-copy strong { overflow: hidden; color: #f8fafc; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar-account-copy small { margin-top: 2px; color: #8d96a4; font-size: 9.5px; }
    .sidebar-logout { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #747e8c; font-size: 16px; }
    .sidebar-logout:hover { background: rgba(248,113,113,.1); color: #f87171; }

    #app-container > .app-topbar {
      position: fixed;
      z-index: 140;
      top: 0;
      right: 0;
      left: var(--app-sidebar-width);
      height: var(--app-topbar-height);
      padding: 0 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 2px 12px rgba(15,23,42,.03);
      backdrop-filter: blur(10px);
    }
    .app-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
    #app-topbar-title { color: var(--title); font-size: 13px; font-weight: 700; }
    #app-container > .app-topbar .nav-actions { gap: 10px; }
    #app-container > .app-topbar .theme-btn {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      font-size: 18px;
    }
    #app-container > .app-topbar .theme-btn:hover { background: var(--surface2); }
    #app-container > .app-topbar .app-topbar-logout { display: none; }
    .app-sidebar-backdrop { display: none; }

    #app-container > .tela-sistema {
      width: auto;
      min-height: 100vh;
      margin-left: var(--app-sidebar-width);
      padding-top: var(--app-topbar-height);
    }
    #app-container > footer { margin-left: var(--app-sidebar-width); }

    /* Dashboard */
    .student-dashboard {
      min-height: calc(100vh - var(--app-topbar-height));
      padding: 42px 36px 64px;
      background: var(--bg);
    }
    .student-dashboard-container { width: 100%; max-width: 1120px; margin: 0 auto; }
    .student-dashboard-heading {
      margin-bottom: 26px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
    }
    .student-dashboard-eyebrow {
      display: block;
      margin-bottom: 8px;
      color: #c98a22;
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .student-dashboard-heading .gps-saudacao {
      margin: 0;
      color: var(--title);
      font-family: var(--font-body);
      font-size: clamp(1.75rem, 3vw, 2.45rem);
      font-weight: 750;
      line-height: 1.15;
      letter-spacing: -.045em;
    }
    .student-dashboard-heading p { margin-top: 7px; color: var(--muted2); font-size: 13px; }
    .student-edit-plan { min-height: 42px; padding: 10px 17px; border-radius: 8px; background: #e99015; white-space: nowrap; box-shadow: 0 6px 16px rgba(233,144,21,.16); }
    .student-edit-plan:hover { background: #d98310; opacity: 1; }

    .student-welcome { margin-bottom: 18px; }
    .student-welcome .home-colapsavel-resumo { border-radius: 8px; background: var(--surface); }
    .student-welcome .home-colapsavel-cheio > .callout { border-radius: 8px; }

    .student-study-hero {
      position: relative;
      min-height: 220px;
      margin: 0 0 24px;
      padding: 34px 190px 30px 34px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 13px;
      background: linear-gradient(115deg, #222421 0%, #252622 68%, #1b1d1c 100%);
      color: #fff;
      box-shadow: 0 18px 40px rgba(15,23,42,.09);
    }
    .student-study-hero::after {
      content: '';
      position: absolute;
      width: 245px;
      height: 245px;
      right: -65px;
      top: -70px;
      border: 28px solid rgba(233,144,21,.08);
      border-radius: 50%;
    }
    .student-study-hero-copy { position: relative; z-index: 2; max-width: 690px; }
    .student-study-status {
      display: inline-flex;
      align-items: center;
      margin-bottom: 15px;
      padding: 4px 9px;
      border: 1px solid rgba(233,144,21,.45);
      border-radius: 999px;
      color: #f0a536;
      font-size: 8.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .student-study-hero h2 { margin: 0 0 7px; color: #fff; font-family: var(--font-body); font-size: 22px; font-weight: 600; }
    .student-study-hero p { margin: 0 0 22px; color: #aeb4bc; font-size: 12px; }
    .student-meta-row { max-width: 560px; margin-bottom: 9px; }
    .student-study-hero .meta-diaria-texto { color: #e6e8eb; font-size: 12px; }
    .student-study-hero .meta-diaria-texto i { color: #e99015; }
    .student-study-hero .meta-diaria-editar { color: #abb1ba; }
    .student-meta-progress { max-width: 560px; height: 6px; margin: 0; background: rgba(255,255,255,.12); }
    .student-meta-progress .progress-bar-fill { background: #e99015; }
    .student-study-hero-icon {
      position: absolute;
      z-index: 1;
      right: 55px;
      top: 50%;
      width: 92px;
      height: 92px;
      display: grid;
      place-items: center;
      transform: translateY(-50%);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 50%;
      background: rgba(255,255,255,.035);
      color: rgba(233,144,21,.9);
      font-size: 38px;
    }

    .student-primary-grid,
    .student-secondary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
    .student-home-card,
    .student-dashboard .gps-home-card {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 23px 24px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--surface);
      box-shadow: 0 8px 24px rgba(15,23,42,.035);
      text-align: left;
    }
    .student-card-heading {
      min-height: 48px;
      margin-bottom: 13px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }
    .student-card-heading > div:first-child { min-width: 0; }
    .student-card-heading > div:first-child > span {
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 8.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .09em;
    }
    .student-card-heading h2 { color: var(--title); font-family: var(--font-body); font-size: 16px; font-weight: 650; line-height: 1.35; }
    .student-card-heading > i { color: #d18b1c; font-size: 19px; }
    .home-expand-heading { align-items: center; }
    .home-expand-toggle {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 8px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--blue);
      font-size: 10.5px;
      font-weight: 700;
    }
    .home-expand-toggle:hover { background: var(--blue-soft); }
    .home-expand-toggle i { font-size: 12px; }

    .student-home-card .plano-fila-card,
    .student-home-card .plano-cta-card {
      max-width: none;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .student-home-card .plano-fila-header-row { margin-bottom: 6px; padding-top: 3px; }
    .student-home-card .plano-fila-titulo { display: none; }
    .student-home-card .plano-fila-sub { margin-bottom: 8px; font-size: 10.5px; }
    .student-home-card .plano-fila-header-actions { margin-left: auto; }
    .student-home-card .plano-fila-ajustar,
    .student-home-card .plano-fila-remover { font-size: 10px; }
    .student-home-card .gps-hoje-item,
    .student-today-card .gps-hoje-item {
      min-height: 47px;
      padding: 10px 0;
      gap: 10px;
      font-size: 12px;
    }
    .student-home-card .gps-hoje-item .gps-check,
    .student-today-card .gps-hoje-item .gps-check { width: 18px; height: 18px; font-size: 9px; }
    .student-home-card .gps-hoje-item .gps-materia-tag,
    .student-today-card .gps-hoje-item .gps-materia-tag { max-width: 118px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

    .home-expand-panel.compacto #plano-leitura-card .gps-hoje-item:nth-child(n+4),
    .home-expand-panel.compacto #gps-hoje-lista .gps-hoje-item:nth-child(n+4) { display: none; }
    .home-expand-panel.compacto .home-expand-hidden { display: none; }
    .home-expand-panel.expandido .home-expand-hidden { display: block; }

    .student-today-card { margin-bottom: 20px; }
    .student-today-heading-actions { display: flex; align-items: center; gap: 8px; }
    .student-today-progress { height: 5px; margin: 0 0 13px; }
    .student-today-card .gps-hoje-decisao { margin: 0 0 12px; }

    .student-summary-strip {
      margin-bottom: 20px;
      padding: 15px 18px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
    }
    .student-summary-strip > div { min-width: 0; padding: 1px 14px; border-right: 1px solid var(--border); }
    .student-summary-strip > div:first-child { padding-left: 0; }
    .student-summary-strip span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
    .student-summary-strip strong { display: block; margin-top: 4px; overflow: hidden; color: var(--title); font-family: var(--font-display); font-size: 18px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
    .student-summary-strip button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; background: transparent; color: var(--blue); font-size: 10.5px; font-weight: 700; white-space: nowrap; }

    .student-dashboard .revisoes-banner-card { margin-bottom: 20px; border-left: 3px solid var(--blue); }
    .student-secondary-grid .gps-secao-titulo { font-size: 13px; }
    .student-secondary-grid .ver-estatisticas-btn { font-size: 10px; }
    .student-acervo { margin: 0 0 20px; }
    .student-acervo .home-colapsavel-resumo { border-radius: 9px; background: var(--surface); }
    .student-acervo .home-colapsavel-cheio { padding-top: 10px; }
    .student-acervo .stats-grid { margin-top: 0; }
    .student-callout { margin: 0 0 20px; }
    .student-today-message { margin: 0 0 20px; }
    .student-more-card { margin-bottom: 0; }
    .student-more-card .home-expand-hidden { padding-top: 7px; }
    .student-quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
    .student-quick-links .ver-todas-materias-cta { margin: 0; }
    .student-resource-section { padding-top: 20px; border-top: 1px solid var(--border); }
    .student-resource-section + .student-resource-section { margin-top: 24px; }
    .student-resource-section .section-title { margin-bottom: 15px; font-size: 15px; }
    .student-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .student-resource-block { min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface2); }
    .student-resource-block .section-title { margin-bottom: 12px; font-size: 13px; }
    .student-resource-block .whatsapp-cta { padding: 12px; }

    @media (max-width: 1080px) {
      #app-container { --app-sidebar-width: 224px; }
      .student-dashboard { padding-right: 24px; padding-left: 24px; }
      .student-resource-grid { grid-template-columns: 1fr; }
      .student-resource-block { padding: 18px; }
    }

    @media (max-width: 900px) {
      #app-container > .app-sidebar {
        width: min(82vw, 284px);
        transform: translateX(-105%);
        transition: transform .24s ease;
        box-shadow: 24px 0 60px rgba(0,0,0,.24);
      }
      #app-container > .app-sidebar.aberto { transform: translateX(0); }
      #app-container > .app-sidebar .nav-links { display: flex !important; position: static !important; }
      .app-sidebar-backdrop {
        position: fixed;
        z-index: 150;
        inset: 0;
        display: block;
        visibility: hidden;
        background: rgba(15,23,42,.48);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s, visibility .2s;
      }
      .app-sidebar-backdrop.aberto { visibility: visible; opacity: 1; pointer-events: auto; }
      #app-container > .app-topbar { left: 0; padding: 0 20px; }
      #app-container > .app-topbar .nav-hamburger { display: inline-flex; }
      #app-container > .app-topbar .app-topbar-logout { display: grid; }
      #app-container > .tela-sistema { margin-left: 0; }
      #app-container > footer { margin-left: 0; }
      .student-primary-grid,
      .student-secondary-grid { grid-template-columns: 1fr; }
      .student-summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .student-summary-strip button { grid-column: 1 / -1; justify-content: center; border-top: 1px solid var(--border); padding-top: 12px; }
    }

    @media (max-width: 680px) {
      #app-container { --app-topbar-height: 60px; }
      #app-container > .app-topbar { padding: 0 14px; }
      #app-container > .app-topbar .nav-actions { gap: 2px; }
      #app-container > .app-topbar .theme-btn { width: 34px; height: 34px; }
      #app-container > .app-topbar .streak-badge { padding: 5px 8px; font-size: 10.5px; }
      #app-container > .app-topbar .app-topbar-logout { display: none; }
      #app-topbar-title { font-size: 12px; }
      .student-dashboard { padding: 25px 16px 48px; }
      .student-dashboard-heading { margin-bottom: 20px; align-items: flex-start; }
      .student-dashboard-heading .gps-saudacao { font-size: 1.72rem; }
      .student-dashboard-heading p { font-size: 11.5px; }
      .student-edit-plan { padding: 9px 11px; font-size: 0; }
      .student-edit-plan i { margin: 0; font-size: 17px; }
      .student-study-hero { min-height: 0; padding: 26px 22px; border-radius: 11px; }
      .student-study-hero h2 { font-size: 19px; }
      .student-study-hero p { max-width: 90%; font-size: 11.5px; }
      .student-study-hero-icon { display: none; }
      .student-primary-grid,
      .student-secondary-grid { gap: 14px; margin-bottom: 14px; }
      .student-home-card,
      .student-dashboard .gps-home-card { padding: 19px 17px; border-radius: 10px; }
      .student-card-heading { min-height: 42px; margin-bottom: 10px; }
      .student-card-heading h2 { font-size: 15px; }
      .student-home-card .gps-hoje-item,
      .student-today-card .gps-hoje-item { align-items: flex-start; min-height: 52px; padding: 11px 0; font-size: 11.5px; }
      .student-home-card .gps-hoje-item .gps-materia-tag,
      .student-today-card .gps-hoje-item .gps-materia-tag { display: none; }
      .student-today-card { margin-bottom: 14px; }
      .student-summary-strip { margin-bottom: 14px; padding: 14px; grid-template-columns: 1fr 1fr; }
      .student-summary-strip > div { min-height: 47px; padding: 0 10px; }
      .student-summary-strip > div:nth-child(2) { border-right: 0; }
      .student-summary-strip > div:nth-child(3) { grid-column: 1 / -1; padding: 10px 0 0; border-top: 1px solid var(--border); border-right: 0; }
      .student-summary-strip button { margin-top: 0; }
      .student-dashboard .revisoes-banner-card { margin-bottom: 14px; }
      .student-today-message { margin-bottom: 14px; }
      .student-quick-links { grid-template-columns: 1fr; }
      .student-resource-block { padding: 14px; }
      .home-expand-toggle span { display: none; }
      .home-expand-toggle { width: 30px; height: 30px; justify-content: center; padding: 0; }
    }

    @media (max-width: 430px) {
      #app-container > .app-topbar .cronometro-wrap { display: none; }
      #app-container > .app-topbar .streak-badge #streak-text { display: none; }
      #app-container > .app-topbar .streak-badge { width: 34px; height: 34px; justify-content: center; border: 0; border-radius: 50%; background: transparent; }
      .student-dashboard-heading { gap: 10px; }
      .student-dashboard-eyebrow { font-size: 8px; }
      .student-dashboard-heading .gps-saudacao { font-size: 1.5rem; }
      .student-study-hero { padding: 23px 18px; }
      .student-study-hero p { max-width: 100%; }
      .student-summary-strip strong { font-size: 16px; }
      .gps-hoje-decisao-botoes { flex-direction: column; }
      .gps-hoje-decisao-btn { min-width: 0; }
    }