.hfs-prepub-diagnostic{
    /* moved from :root — scoped to the component so it can't collide with the host */
    --purple-deep:#4B2FA6;
    --purple:#6C4FD9;
    --purple-mid:#7B5EE0;
    --slate:#8A94AB;
    --slate-dark:#5B6478;
    --row-a:#E7E9F1;
    --row-b:#DDE0EA;
    --highlight:#EDE7FB;
    --ink:#22242E;
    --muted:#5B6478;
    --card-bg:#F5F6F8;
    --white:#FFFFFF;

    /* moved from body — the font/color the component needs, applied to its own root */
    font-family:'Poppins', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    color:var(--ink);

    width:100%;
    max-width:900px;
    margin:0 auto;
   
    border-radius:18px;
    
    
  }
  /* box-sizing scoped to the component instead of a global * selector */
  .hfs-prepub-diagnostic, .hfs-prepub-diagnostic *{ box-sizing:border-box; }

  .hfs-prepub-diagnostic h1{
    color:var(--purple-deep);
    font-size:1.5rem;
    margin:0 0 12px;
    font-weight:800;
    letter-spacing:-0.01em;
  }
  .hfs-prepub-diagnostic hr.top{
    border:none;
    border-top:1.5px solid #C7CAD4;
    margin:0 0 16px;
  }
  .hfs-prepub-diagnostic .subtitle{
    font-size:0.95rem;
    margin:0 0 16px;
    line-height:1.5;
  }
  .hfs-prepub-diagnostic .subtitle b{ font-weight:800; }

  .hfs-prepub-diagnostic .legend{
    display:grid;
    grid-template-columns:1.1fr repeat(5,1fr);
    background:var(--slate);
    border-radius:8px;
    overflow:hidden;
    margin-bottom:2px;
  }
  .hfs-prepub-diagnostic .legend .cap{
    display:flex;
    align-items:center;
    color:#fff;
    font-weight:700;
    font-size:0.85rem;
    padding:10px 14px;
  }
  .hfs-prepub-diagnostic .legend .stage{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:0.82rem;
    padding:8px 10px;
    border-left:1px solid rgba(255,255,255,0.18);
    line-height:1.2;
  }
  .hfs-prepub-diagnostic .legend .num{
    flex:none;
    width:22px;height:22px;
    border-radius:50%;
    background:#fff;
    color:var(--slate-dark);
    font-weight:800;
    font-size:0.78rem;
    display:flex;align-items:center;justify-content:center;
  }

  .hfs-prepub-diagnostic table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin-top:2px;
    font-size:0.88rem;
  }
  .hfs-prepub-diagnostic thead th{
    background:var(--purple);
    color:#fff;
    text-align:left;
    font-size:0.85rem;
    padding:10px 14px;
    font-weight:700;
  }
  .hfs-prepub-diagnostic thead th:nth-child(2),
  .hfs-prepub-diagnostic thead th:nth-child(4),
  .hfs-prepub-diagnostic thead th:nth-child(5){ text-align:center; }

  .hfs-prepub-diagnostic tbody td{
    padding:9px 14px;
    vertical-align:middle;
  }
  .hfs-prepub-diagnostic tbody tr:nth-child(odd){ background:var(--row-a); }
  .hfs-prepub-diagnostic tbody tr:nth-child(even){ background:var(--row-b); }
  .hfs-prepub-diagnostic td.wf{ font-weight:700; }
  .hfs-prepub-diagnostic td.weight{ text-align:center; font-weight:800; color:var(--purple); }
  .hfs-prepub-diagnostic td.why{ color:var(--muted); }
  .hfs-prepub-diagnostic td.score, .hfs-prepub-diagnostic td.points{ text-align:center; }

  .hfs-prepub-diagnostic select.score-input{
    width:64px;
    padding:6px 4px;
    border-radius:5px;
    border:1px solid #B9BECB;
    background:#fff;
    font-size:0.88rem;
    font-weight:700;
    color:var(--ink);
    text-align:center;
  }
  .hfs-prepub-diagnostic select.score-input:focus{
    outline:2px solid var(--purple-mid);
    outline-offset:1px;
  }
  .hfs-prepub-diagnostic td.points span{
    font-weight:800;
    color:var(--slate-dark);
  }

  .hfs-prepub-diagnostic tr.total-row{ background:var(--highlight) !important; }
  .hfs-prepub-diagnostic tr.total-row td{ font-weight:800; padding:11px 14px; }
  .hfs-prepub-diagnostic tr.total-row td.why{ color:var(--ink); font-weight:600; }
  .hfs-prepub-diagnostic tr.total-row td.score{ color:var(--purple-deep); }

  .hfs-prepub-diagnostic .result{
    margin-top:2px;
  }
  .hfs-prepub-diagnostic .result-head{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--purple);
    border-radius:0;
  }
  .hfs-prepub-diagnostic .result-head div{
    color:#fff;
    font-weight:800;
    font-size:0.9rem;
    padding:10px 14px;
    text-align:center;
  }
  .hfs-prepub-diagnostic .result-body{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .hfs-prepub-diagnostic .result-body .cell{
    background:#D9DCE7;
    padding:20px 14px 16px;
    text-align:center;
    border-right:2px solid #EDEFF3;
  }
  .hfs-prepub-diagnostic .result-body .cell:last-child{ border-right:none; }
  .hfs-prepub-diagnostic .index-value{
    font-size:2.1rem;
    font-weight:800;
    color:var(--purple-deep);
    line-height:1;
  }
  .hfs-prepub-diagnostic .index-hint{
    font-size:0.75rem;
    color:var(--muted);
    margin-top:4px;
  }
  .hfs-prepub-diagnostic .band-name{
    font-size:1.15rem;
    font-weight:800;
    color:var(--ink);
  }
  .hfs-prepub-diagnostic .band-desc{
    font-size:0.78rem;
    color:var(--muted);
    margin-top:4px;
  }
  .hfs-prepub-diagnostic .gauge-wrap{
    grid-column:1 / -1;
    background:#D9DCE7;
    padding:0 20px 18px;
  }
  .hfs-prepub-diagnostic .gauge-track{
    height:10px;
    border-radius:6px;
    background:#C3C7D4;
    overflow:hidden;
  }
  .hfs-prepub-diagnostic .gauge-fill{
    height:100%;
    width:0%;
    border-radius:6px;
    background:linear-gradient(90deg,#8A94AB,var(--purple));
    transition:width 0.35s ease;
  }
  .hfs-prepub-diagnostic .gauge-labels{
    display:flex;
    justify-content:space-between;
    font-size:0.68rem;
    color:var(--muted);
    margin-top:4px;
  }

  .hfs-prepub-diagnostic .footer-row{
    display:flex;
    justify-content:flex-end;
    margin-top:18px;
  }
  .hfs-prepub-diagnostic button#reset{
    background:var(--slate);
    color:#fff;
    border:none;
    font-weight:800;
    font-size:0.85rem;
    padding:10px 20px;
    border-radius:6px;
    cursor:pointer;
  }
  .hfs-prepub-diagnostic button#reset:hover{ background:var(--slate-dark); }

  .hfs-prepub-diagnostic .source{
    margin-top:16px;
    font-size:0.75rem;
    color:var(--muted);
  }

  @media (max-width:640px){
    .hfs-prepub-diagnostic{ padding:20px 16px 26px; }
    .hfs-prepub-diagnostic .legend{ grid-template-columns:1fr; }
    .hfs-prepub-diagnostic .legend .cap{ padding:8px 12px; }
    .hfs-prepub-diagnostic table, .hfs-prepub-diagnostic thead, .hfs-prepub-diagnostic tbody, .hfs-prepub-diagnostic th, .hfs-prepub-diagnostic td, .hfs-prepub-diagnostic tr{ display:block; }
    .hfs-prepub-diagnostic thead{ display:none; }
    .hfs-prepub-diagnostic tbody tr{ padding:10px 12px; border-radius:8px; margin-bottom:6px; }
    .hfs-prepub-diagnostic tbody td{ display:flex; justify-content:space-between; align-items:center; padding:4px 2px; }
    .hfs-prepub-diagnostic td.wf::before{ content:""; }
    .hfs-prepub-diagnostic td.weight::before{ content:"Weight"; font-weight:600; color:var(--muted); }
    .hfs-prepub-diagnostic td.why::before{ content:"Why"; font-weight:600; color:var(--muted); }
    .hfs-prepub-diagnostic td.score::before{ content:"Your score"; font-weight:600; color:var(--muted); }
    .hfs-prepub-diagnostic td.points::before{ content:"Index points"; font-weight:600; color:var(--muted); }
    .hfs-prepub-diagnostic .result-head, .hfs-prepub-diagnostic .result-body{ grid-template-columns:1fr; }
  }