#resume-tool * { box-sizing:border-box; font-size:16px; line-height:1.8; }
#resume-tool { max-width:820px; margin:30px auto; padding:0 12px; }

#resume-tool .card{
  background:#fff; padding:26px; border-radius:18px;
  box-shadow:0 6px 25px rgba(0,0,0,.1);
}

#resume-tool h2{
  font-size:22px; margin:0 0 18px; text-align:center; color:#333;
}

#resume-tool .section{ margin:14px 0 18px; }
#resume-tool .label{ font-weight:700; margin-bottom:10px; color:#111; }

#resume-tool .row{ display:flex; gap:12px; }
#resume-tool select{
  flex:1; padding:12px 10px; border:1px solid #ccc; border-radius:8px;
  background:#fff;
}

#resume-tool .patterns{ display:flex; gap:10px; flex-wrap:wrap; }
#resume-tool .pattern-btn{
  padding:10px 12px; border:1px solid #cbd5e1; border-radius:999px;
  background:#f8fafc; cursor:pointer; font-weight:700;
}
#resume-tool .pattern-btn.active{
  background:#0066cc; color:#fff; border-color:#0066cc;
}

#resume-tool .btn{
  width:100%; padding:16px; border:none; border-radius:10px;
  background:#0f172a; color:#fff; font-weight:800; cursor:pointer;
}
#resume-tool .btn:hover{ filter:brightness(0.95); }

#resume-tool .result{
  display:none; margin-top:18px; padding:14px; border-radius:12px;
  background:#f8fafc; border-left:6px solid #0f172a;
}

#resume-tool .tbl{ width:100%; border-collapse:collapse; }
#resume-tool th, #resume-tool td{
  padding:10px 10px; border-bottom:1px solid #e2e8f0; vertical-align:top;
}
#resume-tool th{ width:35%; text-align:left; color:#111; }
#resume-tool td{ color:#222; }

#resume-tool .era-tag{
  display:inline-block; margin-left:8px; padding:2px 8px;
  border-radius:999px; background:#e0f2fe; color:#0369a1;
  font-weight:700; font-size:13px;
}

#resume-tool .note{ margin-top:10px; color:#475569; font-size:13px; }

@media (max-width:520px){
  #resume-tool .row{ flex-direction:column; }
  #resume-tool th{ width:42%; }
}