:root{
    --bg1:#0f2027;
    --bg2:#203a43;
    --bg3:#2c5364;
    --glass:rgba(255,255,255,.08);
    --text:#fff;
    --muted:#cfd8dc;
    --grad1:#ff8a00;
    --grad2:#e52e71;
  }
  *{
    box-sizing:border-box
  }
  body{
    margin:0;
    font-family:"Poppins",system-ui,Segoe UI,Roboto,Arial,sans-serif;
    background:rgb(14, 14, 84);
    color:var(--text);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  header{
    padding:2rem 1rem;
    text-align:center;
  }
  h1{
    margin:.2rem 0 0;
    font-size:clamp(1.6rem,3.5vw,2.6rem);
    background:linear-gradient(90deg,var(--grad1),var(--grad2));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  }
  header p{
    margin:.3rem 0 0;color:var(--muted);
  }
  main{
    width:min(940px,92%);
    background:var(--glass);
    backdrop-filter:blur(12px);
    border-radius:18px;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    padding:1.5rem 1.25rem 2rem;
    margin:1rem 0 3rem;
    animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
      from {
        opacity:0; 
        transform:translateY(-20px);
    }
      to {
        opacity:1; 
        transform:translateY(0);
    }
    }
  .grid{
    display:grid;
    gap:1rem;
    grid-template-columns:1fr;
}

  @media (min-width:720px){
    .grid{
      grid-template-columns:1fr 1fr;
    }}
  label{
    font-weight:600;
    margin:.4rem 0 .3rem;
    display:block;
  }
  select,input[type=file],button{
    width:100%;
    padding:.85rem;
    border:none;
    border-radius:12px;
    font-size:1rem;
  }
  select,input[type=file]{
    background:#1d1f24;
    color:#e8eaed;
  }
  button{
    background:linear-gradient(90deg,var(--grad1),var(--grad2));
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
    box-shadow:0 8px 16px rgba(0,0,0,.35);
  }
  button:hover{transform:translateY(-1px);opacity:.95}
  .actions{display:flex;gap:.75rem;flex-wrap:wrap}
  .error{color:#ff5252;font-weight:700;text-align:center;margin-top:.5rem}
  /* AI loader */
  .ai-panel{
    display:none;margin-top:1rem;border-radius:14px;padding:1rem;background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.08)
  }
  .scan-steps{display:flex;flex-direction:column;gap:.4rem;margin:.6rem 0}
  .step{display:flex;align-items:center;gap:.6rem;color:#c8e6ff}
  .dot{width:10px;height:10px;border-radius:50%;background:#607d8b;position:relative;overflow:hidden}
  .dot.active{background:linear-gradient(90deg,var(--grad1),var(--grad2));box-shadow:0 0 12px rgba(229,46,113,.8)}
  .thinking{font-style:italic;color:#b0bec5;animation:blink 1s infinite}
  .new_resume{
    display:flex;
    gap:1rem;
    justify-content:center;
    margin-bottom:3rem;
    animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
      from {
        opacity:0; 
        transform:translateY(-20px);
    }
      to {
        opacity:1; 
        transform:translateY(0);
    }
    }
  @keyframes blink{50%{opacity:.35}}
  .progress-wrap{margin-top:.6rem}
  .bar{height:10px;border-radius:999px;background:#1f2933;overflow:hidden}
  .bar>span{display:block;height:100%;width:0%;
    background:linear-gradient(90deg,var(--grad1),var(--grad2));
    transition:width .25s ease}
  .result{display:none;margin-top:1.4rem}
  .score-circle{
    width:160px;height:160px;border-radius:50%;
    background:conic-gradient(var(--grad1) 0deg,#424242 0deg 360deg);
    display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:800;margin:1rem auto
  }
  .score-caption{ text-align:center;color:#cfd8dc;margin-top:-.6rem}
  .cards{display:grid;gap:.9rem;grid-template-columns:1fr}
  @media (min-width:860px){.cards{grid-template-columns:1fr 1fr}}
  .card{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
    border-radius:16px;padding:1rem
  }
  .card h3{margin:.2rem 0 .6rem;font-size:1.05rem}
  .pill{display:inline-block;padding:.35rem .6rem;border-radius:999px;background:rgba(255,255,255,.09);margin:.2rem .25rem .2rem 0;font-size:.9rem}
  ul{margin:.2rem 0 0;padding:0;list-style:none}
  li{margin:.35rem 0;background:rgba(255,255,255,.08);padding:.6rem .7rem;border-radius:10px}
  .muted{
    color:#90a4ae;
  }

  footer{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  color: white;
  font-family: 'Segoe UI', sans-serif;
}