:root{
  --navy:#14112B; --purple:#4B2E83; --violet:#8A6FC9; --lavender:#C9B8F0; --mist:#F2EFF8;
  --n1:#F7F6FB; --n2:#E9E6F2; --n3:#CFC9DE; --n4:#9C93B3; --n5:#6B6285; --n6:#453D5E;
  --ok:#2F9E68; --warn:#C98A1B; --err:#C43D4B;
  --font-h:'Space Grotesk',sans-serif; --font-b:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none !important;}
body{font-family:var(--font-b);color:var(--navy);background:var(--n1);line-height:1.6;}
.wrap{max-width:920px;margin:0 auto;padding:0 24px;}
h1,h2,h3{font-family:var(--font-h);font-weight:700;}
button{font-family:var(--font-h);cursor:pointer;}
input,select{font-family:var(--font-b);}

/* TOPBAR */
.topbar{background:var(--navy);padding:16px 0;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.brand{font-family:var(--font-h);font-weight:700;color:white;font-size:16px;}
.tabs{display:flex;gap:8px;}
.tab-btn{background:transparent;border:0.5px solid rgba(255,255,255,0.25);color:var(--n3);font-size:13px;font-weight:500;padding:8px 16px;border-radius:8px;transition:all .15s;}
.tab-btn.active{background:var(--violet);color:white;border-color:var(--violet);}
.tab-btn:not(.active):hover{border-color:rgba(255,255,255,0.5);color:white;}

.tab-panel{display:none;padding:40px 0 60px;}
.tab-panel.active{display:block;}

.intro{max-width:620px;margin-bottom:28px;}
.eyebrow{font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--purple);text-transform:uppercase;margin-bottom:10px;}
.intro h1{font-size:26px;margin-bottom:10px;}
.intro p{color:var(--n6);font-size:14px;}

/* FORMS */
.audit-form{display:flex;gap:10px;max-width:560px;margin-bottom:8px;}
.audit-form input{flex:1;height:44px;border:0.5px solid var(--n3);border-radius:8px;padding:0 14px;font-size:14px;background:white;}
.audit-form input:focus{outline:2px solid var(--violet);outline-offset:1px;}
.audit-form button, .compare-form button, .opportunity-form button{height:44px;background:var(--purple);color:white;border:none;border-radius:8px;padding:0 20px;font-weight:700;font-size:13px;}
.audit-form button:hover, .compare-form button:hover, .opportunity-form button:hover{background:#3d2569;}
.audit-form button:disabled{opacity:0.6;cursor:not-allowed;}

.form-error{background:#FBF1F2;border:0.5px solid #F0D3D6;color:#7A3540;font-size:13px;padding:10px 14px;border-radius:8px;max-width:560px;margin-bottom:16px;}

.loading{display:flex;align-items:center;gap:10px;color:var(--n5);font-size:13px;padding:20px 0;}
.spinner{width:16px;height:16px;border:2px solid var(--n3);border-top-color:var(--purple);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* SCORE */
.score-card{display:flex;align-items:center;gap:24px;background:var(--navy);border-radius:14px;padding:26px 28px;margin:24px 0 32px;flex-wrap:wrap;}
.score-num{font-family:var(--font-h);font-size:56px;font-weight:700;color:white;line-height:1;}
.score-num small{font-size:20px;color:var(--n4);font-weight:500;}
.score-meta{flex:1;min-width:220px;}
.score-badge{display:inline-block;font-family:var(--font-h);font-weight:700;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:6px;}
.score-badge.bom{background:rgba(47,158,104,0.2);color:#5FCB93;}
.score-badge.atencao{background:rgba(201,138,27,0.2);color:#E8B85C;}
.score-badge.critico{background:rgba(196,61,75,0.2);color:#F0A3AC;}
.score-meta p{color:var(--n3);font-size:12.5px;}

h2{font-size:18px;margin:28px 0 6px;}
.muted{color:var(--n5);font-size:13px;margin-bottom:14px;}

/* CHECKS GRID */
.checks-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;}
.check-card{flex:1 1 260px;background:white;border:0.5px solid var(--n2);border-radius:10px;padding:14px 16px;}
.check-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.check-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.check-dot.ok{background:var(--ok);} .check-dot.alerta{background:var(--warn);} .check-dot.problema{background:var(--err);} .check-dot.indisponivel{background:var(--n4);}
.check-label{font-family:var(--font-h);font-weight:700;font-size:13px;}
.check-detail{font-size:12.5px;color:var(--n6);}
.check-tags{margin-top:8px;display:flex;gap:6px;}
.check-tag{font-size:10px;background:var(--mist);color:var(--purple);padding:2px 8px;border-radius:10px;font-family:var(--font-h);font-weight:700;}

/* COMPARISON */
.comparison-rows{display:flex;flex-direction:column;gap:8px;}
.comp-row{display:flex;align-items:center;gap:12px;background:white;border:0.5px solid var(--n2);border-radius:8px;padding:10px 14px;font-size:12.5px;}
.comp-row .comp-item{flex:0 0 160px;font-weight:600;}
.comp-row .comp-old, .comp-row .comp-new{flex:1;color:var(--n6);}
.comp-badge{font-family:var(--font-h);font-weight:700;font-size:10px;padding:3px 10px;border-radius:12px;text-transform:uppercase;flex:0 0 auto;}
.comp-badge.melhorou{background:#E4F3EC;color:var(--ok);}
.comp-badge.piorou{background:#FBF1F2;color:var(--err);}
.comp-badge.sem_mudanca{background:var(--n2);color:var(--n5);}
.comp-badge.nao_comparavel{background:var(--mist);color:var(--violet);}

/* OPPORTUNITY */
.opportunity-form-block{margin-top:36px;padding-top:28px;border-top:0.5px solid var(--n2);}
.opportunity-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px;}
.opportunity-form label{display:flex;flex-direction:column;font-size:11px;color:var(--n5);font-weight:600;gap:4px;}
.opportunity-form select{height:40px;border:0.5px solid var(--n3);border-radius:8px;padding:0 10px;font-size:13px;background:white;min-width:160px;}
.opportunity-form button{height:40px;}

.opp-grid{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
.opp-row{display:flex;gap:12px;align-items:flex-start;background:white;border:0.5px solid var(--n2);border-radius:10px;padding:12px 16px;}
.opp-matrix{flex:0 0 90px;display:flex;flex-direction:column;gap:4px;align-items:center;}
.opp-pill{font-family:var(--font-h);font-weight:700;font-size:9.5px;padding:2px 8px;border-radius:8px;text-transform:uppercase;}
.opp-pill.impacto-alto{background:#FBF1F2;color:var(--err);}
.opp-pill.impacto-medio{background:#FBF0DC;color:var(--warn);}
.opp-pill.impacto-baixo{background:var(--n2);color:var(--n5);}
.opp-pill.esforco{background:var(--mist);color:var(--purple);}
.opp-body{flex:1;}
.opp-title{font-family:var(--font-h);font-weight:700;font-size:13.5px;margin-bottom:3px;}
.opp-why{font-size:12px;color:var(--n6);}
.opp-source{display:inline-block;margin-top:6px;font-size:9.5px;font-family:var(--font-h);font-weight:700;padding:2px 8px;border-radius:8px;text-transform:uppercase;}
.opp-source.tecnico_verificado{background:#E4F3EC;color:var(--ok);}
.opp-source.estrategico{background:var(--lavender);color:var(--purple);}

/* COMPARE TAB */
.compare-form{display:flex;flex-direction:column;gap:12px;max-width:420px;margin-bottom:8px;}
.compare-form label{display:flex;flex-direction:column;font-size:12px;color:var(--n5);font-weight:600;gap:4px;}
.compare-form input{height:40px;border:0.5px solid var(--n3);border-radius:8px;padding:0 12px;font-size:14px;background:white;}
.compare-form button{margin-top:6px;align-self:flex-start;padding:0 24px;}

.compare-results{margin-top:32px;display:flex;flex-direction:column;gap:24px;}
.compare-site{background:white;border:0.5px solid var(--n2);border-radius:12px;padding:18px 20px;}
.compare-site.is-main{border:2px solid var(--violet);}
.compare-site-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.compare-site-head h3{font-size:14px;}
.compare-score{font-family:var(--font-h);font-weight:700;font-size:20px;color:var(--purple);}
.compare-checks{display:flex;flex-wrap:wrap;gap:6px;}
.compare-chip{font-size:11px;padding:4px 10px;border-radius:10px;display:flex;align-items:center;gap:5px;}
.compare-chip .check-dot{width:7px;height:7px;}

.page-footer{padding:28px 0 40px;text-align:center;font-size:11px;color:var(--n4);border-top:0.5px solid var(--n2);margin-top:40px;}

@media(max-width:640px){
  .score-card{flex-direction:column;align-items:flex-start;}
  .audit-form{flex-direction:column;}
}