Spaces:

ParaaAi
/

beeROOT

Running

Carlexxx
Remove PDF binário
d88c58a 7 days ago
32.1 kB
/* Para.AI BeeROOT — estilos da interface */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&family=JetBrains+Mono:wght@300;400;500&display=swap');
  :root{
    --bg:#0b0d14;--bg1:#10131c;--bg2:#161a26;--bg3:#1c2133;--bg4:#252840;
    --gold:#c9a84c;--gold-lt:#e8cf82;--gold-dim:#7a6030;
    --gold-glow:rgba(201,168,76,.11);--gold-bd:rgba(201,168,76,.2);
    --tx:#dde1ed;--tx2:#8890aa;--tx3:#424660;
    --bd:rgba(255,255,255,.06);--bd2:rgba(255,255,255,.1);
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'DM Sans',system-ui,sans-serif;
    --mono:'JetBrains Mono',monospace;
    
    --ok:#6ee89f;--ok-bg:rgba(51,181,104,.14);--ok-bd:rgba(51,181,104,.35);
    --err:#f27272;--err-bg:rgba(217,58,58,.14);--err-bd:rgba(217,58,58,.4);
  }
  html{-webkit-font-smoothing:antialiased}
  
  body {
    background: radial-gradient(120% 55% at 50% -8%, rgba(201,168,76,.07) 0%, transparent 60%),
                radial-gradient(90% 40% at 8% 100%, rgba(77,142,240,.035) 0%, transparent 55%),
                var(--bg) !important;
  } 
  .para-topbar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 4px 18px;margin-bottom:4px;border-bottom:1px solid var(--bd);
  }
  .para-brand-name{font-family:var(--serif);font-weight:400;letter-spacing:.03em;color:var(--gold-lt);line-height:1.1}
  .para-brand-name b{color:var(--gold);font-weight:500}
  .para-brand-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--tx3);text-transform:uppercase;margin-top:4px}
  .para-btn-reiniciar{
    display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
    padding:8px 16px;border-radius:10px;font-family:var(--mono);
    font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400;
    background:var(--gold-glow);border:1px solid var(--gold-bd);color:var(--gold-lt);
    cursor:pointer;transition:all .18s;
  }
  .para-btn-reiniciar:hover{background:rgba(201,168,76,.2);border-color:var(--gold)}
  
  #btn-submit{
    background:var(--gold-glow) !important;border:1px solid var(--gold-bd) !important;
    color:var(--gold-lt) !important;
  }
  #btn-submit:hover{background:rgba(201,168,76,.2) !important}

  
  .lx-hl { border-radius: 3px; padding: 1px 2px; color: #111; cursor: pointer; }
  .lx-hl.lx-pulse {
    outline: 2px solid #ff4444;
    animation: lxPulse 1.4s ease-in-out;
  }
  @keyframes lxPulse {
    0%   { outline-color: #ff4444; }
    50%  { outline-color: #ff0000; }
    100% { outline-color: #ff4444; }
  }

  

  
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  details > summary::marker { content: ""; display: none; }
  details > summary::before {
    content: '+';
    display: inline-block;
    width: 1em;
    flex-shrink: 0;
    margin-right: 6px;
    font-family: var(--mono);
    font-weight: 700;
    text-align: center;
    color: var(--tx2);
  }
  details[open] > summary::before { content: '−'; color: var(--gold-lt); }

  
  html, body { height: 100%; margin: 0; overscroll-behavior: none; }
  
  body.app-shell {
    display: flex; flex-direction: column; padding: 0 !important;
    position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; overflow: hidden;
  }
  .app-topbar {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding: 12px 14px 10px; border-bottom: 1px solid var(--bd); flex-shrink: 0;
    position: relative; z-index: 210;
  }
  .app-topbar { padding: 16px 14px 14px; }
  .app-topbar .para-brand-name { font-size: 1.42rem; gap: 10px; }
  .app-topbar .brand-icon { width: 32px; height: 32px; }
  .app-topbar-left { display:flex; align-items:center; gap:10px; }
  .app-topbar-right { display:flex; align-items:center; gap:8px; }
  .app-icon-btn {
    width: 32px; height: 32px; border-radius: 9px; display:flex; align-items:center; justify-content:center;
    background: var(--bg2); border: 1px solid var(--bd); color: var(--tx2); cursor:pointer; font-size:.9rem;
    flex-shrink: 0;
  }
  .app-icon-btn:hover { color: var(--gold-lt); border-color: var(--gold-bd); }

  
  .hb-btn {
    width: 38px; height: 38px; border-radius: 10px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:4px; background: var(--bg2);
    border: 1px solid var(--bd); cursor:pointer; flex-shrink:0; transition: all .18s;
  }
  .hb-btn span { width: 18px; height: 2px; background: var(--tx2); border-radius: 1px; transition: all .25s; }
  .hb-btn:hover span, .hb-btn.open span { background: var(--gold-lt); }
  .hb-btn.open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  .hb-btn.open span:nth-child(2) { opacity: 0; }
  .hb-btn.open span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

  .nav-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 190;
  }
  .nav-overlay.open { opacity: 1; pointer-events: auto; }

  
  .nav-dropdown {
    position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 320px;
    background: var(--bg1); border-right: 1px solid var(--bd2); border-radius: 0 var(--r-lg, 14px) var(--r-lg, 14px) 0;
    box-shadow: 0 20px 50px rgba(0,0,0,.5); padding: 0 8px 8px; z-index: 220;
    display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-100%); pointer-events: none;
    transition: transform .28s cubic-bezier(.16,1,.3,1);
  }
  .nav-dropdown.dragging { transition: none; }
  .nav-dropdown.open { transform: translateX(0); pointer-events: auto; }
  .nav-dropdown .nav-item-sub { margin-top: auto; padding-top: 10px; }
  
  .nav-dropdown-head {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding: 14px 6px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--bd); flex-shrink:0;
  }
  .nav-dropdown-head .para-brand-name {
      display: flex;
      align-items: center;
      gap: 4px; 
      white-space: nowrap; 
  }
  .nav-close-btn {
    width: 30px; height: 30px; border-radius: 9px; display:flex; align-items:center; justify-content:center;
    background: var(--bg2); border: 1px solid var(--bd); color: var(--tx2); cursor:pointer; flex-shrink:0;
  }
  .nav-close-btn:hover { color: var(--gold-lt); border-color: var(--gold-bd); }
  
  .edge-swipe-zone { position: fixed; top: 0; left: 0; bottom: 0; width: 18px; z-index: 185; }
  .nav-item {
    display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 9px;
    color: var(--tx); font-size: .8rem; cursor:pointer; background:none; border:none;
    width: 100%; text-align:left; font-family: var(--sans);
  }
  .nav-item:hover { background: var(--gold-glow); color: var(--gold-lt); }
  .nav-item.active { color: var(--gold-lt); background: var(--gold-glow2); }
  .nav-item .nav-item-icon { width: 18px; text-align:center; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .nav-sep { height: 1px; background: var(--bd); margin: 6px 4px; }
  .nav-item-sub { font-size: .64rem; color: var(--tx3); padding: 2px 12px 6px; }

  
  .flow-map { display:flex; flex-direction:column; gap:1px; margin-bottom:6px; }
  .flow-item {
    display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px;
    background:none; border:none; color: var(--tx2); font-family: var(--sans); font-size:.8rem;
    cursor:pointer; width:100%; text-align:left; transition: all .16s;
  }
  .flow-item:not(:disabled):hover { color: var(--gold-lt); background: var(--gold-glow); }
  .flow-dot {
    width:9px; height:9px; border-radius:50%; background: var(--bg3); border:1.5px solid var(--tx3);
    flex-shrink:0; transition: all .2s;
  }
  .flow-item.done .flow-dot { background: var(--gold-dim); border-color: var(--gold-dim); }
  .flow-item.current { color: var(--gold-lt); background: var(--gold-glow); font-weight:600; }
  .flow-item.current .flow-dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
  .flow-item.pulse .flow-dot { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-glow); }
  .flow-item:disabled { opacity:.4; cursor:not-allowed; }
  .flow-label { flex:1; }

  
  .bg-green-700,.bg-green-600,.bg-indigo-700,.bg-indigo-600,.bg-purple-700,.bg-purple-600,
  .bg-blue-700,.bg-blue-600,.bg-blue-500 {
    background: var(--gold-glow) !important; border-color: var(--gold-bd) !important; color: var(--gold-lt) !important;
  }
  .hover\:bg-green-600:hover,.hover\:bg-indigo-600:hover,.hover\:bg-purple-600:hover,
  .hover\:bg-blue-700:hover,.hover\:bg-gray-600:hover {
    background: rgba(201,168,76,.2) !important;
  }

  
  .card-gold, .card-hero {
    background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%);
    border: 1px solid var(--gold-bd); border-radius: var(--r-md, 16px); padding: 16px;
    box-shadow: 0 10px 34px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.03) inset, 0 0 0 1px rgba(201,168,76,.05) inset;
  }
  .card-dim,
  #cards-resumo > details, details.bg-gray-900.rounded-lg,
  .bg-gray-800.rounded-lg {
    background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%);
    border: 1px solid var(--bd2); border-radius: var(--r-md, 14px);
    box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.02) inset;
  }
  .card-dim { padding: 12px; }
  
  .bg-gray-800.rounded-lg { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.24); }
  
  .card-inset { background: var(--bg3); border: 1px solid var(--bd2); border-radius: 10px; padding: 10px; }
  
  .card-danger {
    background: var(--err-bg); border: 1px solid var(--err-bd); border-radius: var(--r-md, 14px);
    padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.3);
  }
  .card-danger-title { color: var(--err); font-size: .82rem; font-weight: 600; display:flex; align-items:center; gap:6px; }
  .card-danger-body { color: var(--err); font-size: .72rem; opacity: .88; }
  
  .badge-ok, .badge-err {
    display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px;
    font-family: var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.02em;
  }
  .badge-ok  { background: var(--ok-bg);  border: 1px solid var(--ok-bd);  color: var(--ok); }
  .badge-err { background: var(--err-bg); border: 1px solid var(--err-bd); color: var(--err); }

  
  .screen-title {
    font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--gold-lt);
    letter-spacing: .01em; margin-bottom: 4px;
  }
  .screen-subtitle{ font-size:.76rem; color:var(--tx3); margin-bottom:14px; }
  .card-light { background: #f4f1ea; color: #1c1c1c; border-radius: var(--r-md, 14px); padding: 12px; }
  .btn-gold, .btn-neutral {
    display:flex; align-items:center; justify-content:center; padding: 9px 14px; border-radius: 10px;
    font-size: .78rem; font-weight: 600; cursor:pointer; text-align:center; font-family: var(--sans);
    border: 1px solid transparent; transition: all .18s;
  }
  .btn-gold { background: var(--gold-glow); border-color: var(--gold-bd); color: var(--gold-lt); }
  .btn-gold:hover { background: rgba(201,168,76,.2); }
  .btn-neutral { background: var(--bg2); border-color: var(--bd2); color: var(--tx); }
  .btn-neutral:hover { border-color: var(--gold-bd); color: var(--gold-lt); }

  .app-screens { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; }
  .app-screen { display: none; padding: 14px 14px 28px; }
  
  .app-screen.active { display: block; animation: screenIn .22s cubic-bezier(.16,1,.3,1); }
  @keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  
  .reveal { opacity: 1; transform: none; }
  .reveal.revealed { opacity: 1; transform: none; }

  
  .lp-section { padding: 30px 2px; border-top: 1px solid var(--bd); }
  .lp-section:first-child { border-top: none; }
  .lp-kicker {
    font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 8px; display:flex; align-items:center; gap:6px;
  }
  .lp-kicker::before { content:""; width:14px; height:1px; background: var(--gold-dim); display:inline-block; }
  .lp-h2 {
    font-family: var(--serif); font-weight: 500; font-size: 1.24rem; color: var(--gold-lt);
    letter-spacing: .01em; margin-bottom: 6px; line-height: 1.25;
  }
  .lp-lead { font-size: .8rem; color: var(--tx2); line-height: 1.6; margin-bottom: 16px; }
  .lp-banner {
    background: linear-gradient(135deg, rgba(201,168,76,.16), rgba(201,168,76,.03) 70%), var(--bg1);
    border: 1px solid var(--gold-bd); border-radius: 14px; padding: 14px 16px;
    display:flex; align-items:center; gap:12px; margin-bottom: 6px;
    box-shadow: 0 10px 26px rgba(0,0,0,.32);
  }
  .lp-banner-num {
    font-family: var(--serif); font-size: 1.7rem; color: var(--gold-lt); font-weight: 500; flex-shrink:0; line-height:1;
  }
  .lp-banner-txt { font-size: .72rem; color: var(--tx2); line-height: 1.45; }
  .lp-banner-txt b { color: var(--gold-lt); }
  .lp-grid { display:flex; flex-direction:column; gap:10px; }
  .lp-card {
    background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%);
    border: 1px solid var(--bd2); border-radius: 14px; padding: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,.3);
  }
  .lp-card-title { font-size: .82rem; font-weight: 600; color: var(--tx); margin-bottom: 4px; display:flex; align-items:center; gap:8px; }
  .lp-card-title .lp-num { color: var(--gold-lt); font-family: var(--serif); font-size: 1.05rem; }
  .lp-card-txt { font-size: .74rem; color: var(--tx2); line-height: 1.55; }
  .lp-stats { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .lp-stat {
    background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%);
    border: 1px solid var(--gold-bd); border-radius: 14px; padding: 14px 10px; text-align:center;
    box-shadow: 0 8px 22px rgba(0,0,0,.3);
  }
  .lp-stat-num { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-lt); font-weight: 500; line-height:1.1; }
  .lp-stat-label { font-size: .64rem; color: var(--tx3); margin-top: 4px; line-height: 1.35; }
  .lp-table { width:100%; border-collapse: collapse; font-size: .68rem; }
  .lp-table th, .lp-table td { text-align:left; padding: 8px 6px; border-bottom: 1px solid var(--bd); vertical-align: top; }
  .lp-table th { color: var(--tx3); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: .58rem; }
  .lp-table td { color: var(--tx2); line-height: 1.4; }
  .lp-table tr.lp-row-win td { color: var(--gold-lt); }
  .lp-table tr.lp-row-fail td { color: #b5766e; }
  .lp-badge {
    display:inline-flex; align-items:center; font-family: var(--mono); font-size: .6rem;
    padding: 2px 8px; border-radius: 999px; background: var(--gold-glow); border: 1px solid var(--gold-bd);
    color: var(--gold-lt); font-weight: 500;
  }
  .lp-audience { display:flex; flex-direction:column; gap:12px; }
  .lp-aud-card {
    background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%);
    border: 1px solid var(--bd2); border-radius: 16px; padding: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,.3);
  }
  .lp-aud-title { font-size: .88rem; font-weight: 600; color: var(--gold-lt); margin-bottom: 4px; }
  .lp-aud-txt { font-size: .74rem; color: var(--tx2); line-height: 1.55; margin-bottom: 12px; }
  .lp-faq details {
    border-bottom: 1px solid var(--bd); padding: 10px 0;
  }
  .lp-faq summary { font-size: .8rem; font-weight: 500; color: var(--tx); }
  .lp-faq p { font-size: .74rem; color: var(--tx2); line-height: 1.55; margin-top: 8px; padding-left: 1.5em; }
  .lp-final { text-align:center; padding: 34px 4px 10px; }
  .lp-final-note { font-size: .66rem; color: var(--tx3); margin-top: 10px; }

  
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .home-hero { padding: 10vh 4px 6px; text-align: center; overflow: hidden; }
  .home-logo { font-family: var(--serif); font-size: 2.1rem; color: var(--gold-lt); letter-spacing: .02em; }
  .home-logo b { color: var(--gold); font-weight: 500; }
  .home-slogan { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--tx2); margin-top: 6px; }
  .home-desc { font-size: .78rem; color: var(--tx3); line-height: 1.5; margin: 14px auto 0; max-width: 320px; }
  .home-actions { margin-top: 34px; display: flex; flex-direction: column; gap: 10px; }
  .home-btn {
    display:flex; align-items:center; justify-content:center; gap:8px; padding: 13px 16px;
    border-radius: 12px; font-size: .82rem; font-weight: 500; cursor:pointer; transition: all .18s;
    font-family: var(--sans);
  }
  .home-btn-primary { background: var(--gold-glow); border: 1px solid var(--gold-bd); color: var(--gold-lt); }
  .home-btn-primary:hover { background: rgba(201,168,76,.2); }
  .home-btn-secondary { background: var(--bg2); border: 1px solid var(--bd2); color: var(--tx); }
  .home-btn-secondary:hover { border-color: var(--gold-bd); color: var(--gold-lt); }

  
  .para-brand-name {
      display: flex;
      align-items: center;
      gap: 6px; 
      white-space: nowrap; 
      font-size: 1.15rem; 
  }
  
  .brand-logo-home { width: 190px; max-width: 62vw; height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 6px 18px rgba(201,168,76,.18)); }
  .brand-icon {
      width: 22px;
      height: 22px;
      flex-shrink: 0; 
      border-radius: 6px;
      object-fit: contain;
      
  }  
  
  .section-glow { position: relative; }
  .section-glow::before {
    content: ""; position: absolute; top: -6%; right: -18%; width: 75%; height: 46%;
    pointer-events: none; z-index: 0;
  }
  .section-glow > * { position: relative; z-index: 1; }
  .about-banner {
    display: block; width: 100%; max-width: 300px; margin: 4px auto 18px; border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
  }

  
  .app-stepper {
    display:flex; align-items:center; gap:8px; border-top: 1px solid var(--bd); background: var(--bg1);
    flex-shrink: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }
  .stepper-arrow {
    width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background: var(--bg2); border: 1px solid var(--bd2); color: var(--tx); cursor:pointer; flex-shrink:0;
    transition: all .18s;
  }
  .stepper-arrow:hover:not(:disabled) { border-color: var(--gold-bd); color: var(--gold-lt); background: var(--gold-glow); }
  .stepper-arrow:disabled { opacity:.3; cursor:not-allowed; }
  .stepper-mid { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
  .stepper-label {
    font-family: var(--sans); font-size:.78rem; font-weight:600; color: var(--gold-lt); letter-spacing:.03em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; text-transform:uppercase;
  }
  .stepper-dots { display:flex; align-items:center; gap:5px; }
  .stepper-dot { width:6px; height:6px; border-radius:50%; background: var(--bg3); border:1px solid var(--tx3); transition: all .2s; }
  .stepper-dot.done { background: var(--gold-dim); border-color: var(--gold-dim); }
  .stepper-dot.current { background: var(--gold); border-color: var(--gold); width:16px; border-radius:3px; }

  
  .ring-wrap { position:relative; width:132px; height:132px; margin:2px auto 0; }
  .ring-wrap svg { display:block; }
  .ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
  .ring-pct { font-family: var(--serif); font-size:1.7rem; color: var(--gold-lt); font-weight:500; line-height:1; }
  .ring-counter { font-family: var(--mono); font-size:.65rem; color: var(--tx2); margin-top:2px; }

  
  .page-subnav {
    display:flex; gap:18px; padding: 0 14px; border-bottom: 1px solid var(--bd);
    flex-shrink:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .page-subnav::-webkit-scrollbar { display:none; }
  .page-subnav.hidden { display:none; }
  .page-subnav-tab {
    position:relative; flex-shrink:0; padding: 11px 2px 10px; margin-bottom:-1px;
    background:none; border:none; cursor:pointer; white-space:nowrap;
    font-family: var(--sans); font-size:.8rem; font-weight:500; color: var(--tx2);
    border-bottom: 2px solid transparent; transition: color .18s, border-color .18s;
  }
  .page-subnav-tab:hover { color: var(--tx); }
  .page-subnav-tab.active { color: var(--gold-lt); border-bottom-color: var(--gold); }

  
  .submit-card { display:flex; flex-direction:column; }
  .submit-textarea { min-height:34vh; resize:vertical; }
  .doc-file-chip {
    display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:9px;
    background:var(--gold-glow); border:1px solid var(--gold-bd); color:var(--gold-lt); font-size:.72rem;
  }
  .doc-file-chip-x { margin-left:auto; background:none; border:none; color:var(--tx2); cursor:pointer; font-size:.75rem; }
  .doc-file-chip-x:hover { color:var(--gold-lt); }

  
  .action-bar { display:flex; gap:8px; align-items:stretch; }
  .action-btn {
    flex: 1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:11px 6px; border-radius:12px; background:var(--bg3); border:1px solid var(--bd2);
    color:var(--tx2); cursor:pointer; transition:all .18s; text-align:center; font-family:var(--sans);
  }
  .action-btn:hover:not(:disabled) { border-color:var(--gold-bd); color:var(--gold-lt); background:var(--bg4); }
  .action-btn:disabled { opacity:.4; cursor:not-allowed; }
  .action-btn-icon { font-size:1.05rem; line-height:1; }
  .action-btn-icon svg { display:block; }
  .action-btn-label { font-size:.6rem; font-weight:600; line-height:1.15; }
  
  .action-btn-primary { flex: 1.7; background:var(--gold-glow); border-color:var(--gold-bd); color:var(--gold-lt); }
  .action-btn-primary:hover:not(:disabled) { background:rgba(201,168,76,.22); }

  
  .adv-overlay { z-index: 230; }
  .adv-modal {
    position:fixed; left:50%; top:50%; width:calc(100% - 32px); max-width:400px; max-height:82vh;
    transform:translate(-50%,-50%) scale(.96); background:var(--bg1); border:1px solid var(--bd2);
    border-radius:var(--r-lg,14px); box-shadow:0 20px 60px rgba(0,0,0,.55); padding:14px; z-index:231;
    opacity:0; pointer-events:none; overflow-y:auto; transition: opacity .18s, transform .18s;
  }
  .adv-modal.open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
  .adv-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .adv-modal-close {
    width:26px; height:26px; border-radius:8px; background:var(--bg2); border:1px solid var(--bd);
    color:var(--tx2); cursor:pointer; flex-shrink:0;
  }
  .adv-modal-close:hover { color:var(--gold-lt); border-color:var(--gold-bd); }

  
  .prog-hero { position: relative; overflow: hidden; }
  .prog-done-flash {
    position: absolute; inset: 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap: 10px; background: var(--bg2); color: var(--gold-lt); font-family: var(--serif); font-size: 1.15rem;
    opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 5;
  }
  .prog-done-flash.show { opacity: 1; animation: progDoneScale .5s cubic-bezier(.16,1,.3,1); }
  .prog-done-flash svg { color: var(--gold); animation: progDonePop .5s cubic-bezier(.16,1,.3,1); }
  @keyframes progDoneScale { from { transform: scale(.92); } to { transform: scale(1); } }
  @keyframes progDonePop { 0% { transform: scale(.4); opacity:0; } 60% { transform: scale(1.15); opacity:1; } 100% { transform: scale(1); } }

  
  .task-row-parallel { border-radius:6px; padding:1px 4px; margin:0 -4px; animation: taskParallelPulse 1s ease-in-out infinite; }
  @keyframes taskParallelPulse {
    0%, 100% { background: rgba(77,142,240,.06); }
    50%      { background: rgba(77,142,240,.30); }
  }
  
  .task-row-current { position:relative; overflow:hidden; border-radius:6px; padding:1px 4px; margin:0 -4px; }
  .task-row-current::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    animation: taskShimmer 1.3s linear infinite;
  }
  @keyframes taskShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

  
  .conf-texto-wrap { position: relative; }
  .legend-highlights {
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .legend-chip { display:inline-flex; align-items:center; padding:3px 8px; border-radius:6px; cursor:pointer; color:#1c1c1c; font-size:.72rem; }
    
    
    #panel-submit.app-screen.active {
        display: flex;
        padding-bottom: 1rem;
        gap: 1.25rem;
        flex-direction: column;
        height: 100%;            
    }
    
    
    #panel-submit .card-hero {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;           
    }
    
    
    #panel-submit .submit-card {
        gap: 0.75rem;            
    }
    
    
    #panel-submit .submit-textarea {
        flex: 1;
        min-height: 0;           
        height: auto;            
        resize: vertical;        
    }
    
    
    #panel-submit .action-bar {
        margin-top: auto;        
    }
    
    
    #panel-progress.app-screen.active {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-bottom: 1;        
    }
    
    
    #panel-progress .card-hero {
        flex: 0 0 auto;          
    }
    
    
    #panel-progress .card-dim {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;           
        margin-top: 0.75rem;     
    }
    
    
    #prog-tasks {
        flex: 1;
        overflow-y: auto;        
        max-height: none;        
    }
    
    
    
    #panel-result.app-screen.active {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-bottom: 1;
    }
    
    
    #panel-result .card-hero, 
    #panel-result .card-dim,
    #panel-result > div:not(.flex):not(.card-hero) {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    
    
    #panel-result .bg-gray-800.rounded-lg {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    
    
    #texto-final-corpo {
        flex: 1;
        min-height: 0;
        max-height: none;         
        overflow-y: auto;         
    }
    
    
    #panel-result .flex.gap-2:last-of-type {
        margin-top: auto;         
        padding-top: 0.75rem;
    }
    
    
    #panel-result .flex.gap-2:not(:last-of-type) {
        margin-top: auto;         
        padding-top: 0.75rem;
    }
    
    
    #panel-conf-texto.app-screen.active,
    #panel-conf-blocos.app-screen.active {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-bottom: 1;
    }
    
    #panel-conf-texto .conf-texto-wrap {
        flex: 1; min-height: 0; display: flex; flex-direction: column;
    }
    #panel-conf-texto .action-bar { flex-shrink: 0; }

    
    #text-window {
        flex: 1;
        min-height: 0;
        max-height: none;       
        overflow-y: auto;       
    }
    

    
    #panel-conf-blocos #cards-resumo {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding-right: 2px;         
}
    #cards-resumo.space-y-2 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0 !important;   
}

    

    

    #cards-resumo > details[open],
    details.bg-gray-900.rounded-lg[open] {
        border-color: var(--gold-bd);
        box-shadow: 0 10px 28px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.02) inset, 0 0 0 1px rgba(201,168,76,.05) inset;
    }

    
    #cards-resumo details details,
    details.bg-gray-950.rounded {
        background: var(--bg3);
        border: none;
        border-radius: 10px;
        margin: 0 2px 6px 0;        
    }
    #cards-resumo details details:nth-of-type(even),
    details.bg-gray-950.rounded:nth-of-type(even) {
        background: var(--bg4);
    }

    
    #cards-resumo .bg-gray-800.rounded-lg {
        background: var(--bg3);
        border: none;
        box-shadow: none;
        padding: 14px !important;
    }
    #cards-resumo .bg-gray-800.rounded-lg:nth-of-type(even) {
        background: var(--bg4);
    }
    /* Ritmo vertical único entre todos os blocos internos do card
       (rótulo, valor, síntese, legenda) — substitui margens avulsas
       (mt-1/mt-2/mb-1) por um único espaçamento consistente. */
    #cards-resumo .bg-gray-800.rounded-lg > * {
        margin: 0 !important;
    }
    #cards-resumo .bg-gray-800.rounded-lg > * + * {
        margin-top: 10px !important;
    }
    #cards-resumo .bg-gray-800.rounded-lg > .mb-1 {
        padding-bottom: 8px;
        border-bottom: 1px solid var(--bd);
    }
    #cards-resumo .bg-gray-800.rounded-lg > .text-gray-200 {
        line-height: 1.5;
    }

    
    #selo-in42 > div:first-child { box-shadow: 0 8px 20px rgba(0,0,0,.3); }

    #cards-resumo > details > summary > span:first-child {
        font-family: var(--serif);
        font-size: .98rem;
        letter-spacing: .01em;
        color: var(--gold-lt);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    #cards-resumo > details > summary > span:last-child {
        flex-shrink: 0;
        max-width: 42%;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--bg3);
        color: var(--tx2) !important;
        font-family: var(--mono);
        font-size: .64rem !important;
        letter-spacing: .02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #cards-resumo > details[open] > summary > span:last-child {
        background: var(--gold-glow);
        color: var(--gold-lt) !important;
    }

    
    #cards-resumo > details > div {
        border-top: 1px solid var(--bd);
        padding: 8px 8px 10px !important;
    }
    #cards-resumo > details > div > * + * {
        margin-top: 8px;
    }

    
    #cards-resumo details details > summary {
        font-family: var(--sans) !important;
        font-size: .72rem !important;
        color: var(--tx2) !important;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    #cards-resumo details details > summary > span:last-child {
        background: transparent !important;
        color: var(--tx3) !important;
        font-size: .64rem !important;
        max-width: none;
        padding: 0;
    }
    #cards-resumo details details > div {
        border-left: 2px solid var(--bd2);
        margin-left: 8px;
    }
    
    #cards-resumo details details .text-gray-300 {
        padding: 5px 0;
        font-size: .78rem;
        line-height: 1.45;
    }

    
    #cards-resumo > details > div > .text-xs:not(details) {
        display: grid;
        grid-template-columns: minmax(84px, 34%) 1fr;
        gap: 6px 14px;
        padding: 8px 10px;
        border-radius: 6px;
        font-size: .78rem !important;
    }
    #cards-resumo > details > div > .text-xs:not(details):nth-of-type(even) {
        background: var(--bg3);
    }
    #cards-resumo .text-xs .text-gray-500 {
        text-transform: uppercase;
        letter-spacing: .04em;
        font-size: .64rem;
        color: var(--tx3) !important;
        align-self: start;
        padding-top: 1px;
    }
    #cards-resumo .text-xs .text-gray-200 {
        word-break: break-word;
    }
    
    

    
    #selo-in42:not(:empty) { margin-bottom: 2px; }
    #bloco-inconsistencias:not(:empty) { margin-bottom: 2px; }