:root{
  --navy:#17324d;--blue:#285a86;--cream:#f6f3ec;--white:#fff;--ink:#17212b;
  --muted:#66717c;--line:#dfe4e8;--safe:#e7f5ec;--warn:#fff4d8;--danger:#fde8e8;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--cream);color:var(--ink);padding-bottom:82px}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:var(--navy);color:white;box-shadow:0 2px 8px #0002}
.brand{font-size:21px;font-weight:800;letter-spacing:.2px}
.tagline{font-size:12px;opacity:.82;margin-top:2px}
main{max-width:720px;margin:auto;padding:18px}
.screen{display:none}.screen.active{display:block}
.hero{padding:24px 5px 12px;text-align:center}
.shield{width:78px;height:78px;border-radius:24px;background:var(--navy);color:white;margin:0 auto 18px;display:grid;place-items:center;font-size:40px;font-weight:900;box-shadow:0 10px 25px #17324d35}
h1{font-size:28px;line-height:1.12;margin:0 0 10px}h2{font-size:19px;margin:0 0 14px}
p{line-height:1.5;color:var(--muted)}
.primary{border:0;border-radius:13px;background:var(--blue);color:white;font-weight:750;font-size:16px;padding:14px 20px;box-shadow:0 5px 12px #285a8625}
.full{width:100%}.ghost{background:white;color:var(--navy);border:0;border-radius:10px;padding:9px 12px;font-weight:700}.hidden{display:none!important}
.card{background:white;border:1px solid var(--line);border-radius:18px;padding:18px;margin:16px 0;box-shadow:0 5px 15px #0000000b}
.feature{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #edf0f2}.feature:last-child{border-bottom:0}.feature span{font-size:24px}.feature strong,.feature small{display:block}.feature small{margin-top:3px;color:var(--muted)}
.notice{font-size:12px;line-height:1.45;color:var(--muted);padding:8px 8px 20px;text-align:center}
.section-head{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px}.section-head h1{font-size:24px}.section-head p{margin:2px 0}
.back{border:0;background:white;border-radius:11px;width:42px;height:42px;font-size:30px;line-height:1;color:var(--navy);box-shadow:0 2px 8px #0001}
.check{display:flex;align-items:flex-start;gap:12px;background:white;border:1px solid var(--line);border-radius:16px;padding:15px;margin:10px 0}
.check input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--blue)}
.check strong,.check small{display:block}.check small{color:var(--muted);line-height:1.35;margin-top:5px}
.result{border-radius:18px;padding:18px;margin:16px 0}.result h2{margin-bottom:7px}.result p{margin:6px 0;color:inherit}.low{background:var(--safe)}.medium{background:var(--warn)}.high{background:var(--danger)}
.form-card input,.form-card select{width:100%;font:inherit;padding:13px;border:1px solid #cfd6dc;border-radius:11px;margin:6px 0;background:white}
.app-item{background:white;border:1px solid var(--line);border-radius:15px;padding:14px;margin:10px 0}.app-item .row{display:flex;justify-content:space-between;gap:10px}.app-item small{color:var(--muted)}.delete{border:0;background:transparent;font-size:18px}
ol{padding-left:22px}li{margin:10px 0;line-height:1.4}
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:10;background:white;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:7px 5px calc(7px + env(safe-area-inset-bottom))}
.bottomnav button{border:0;background:transparent;color:#6e7881;font-size:11px;font-weight:700;min-width:68px;padding:4px}.bottomnav span{display:block;font-size:22px;margin-bottom:2px}.bottomnav .nav-active{color:var(--blue)}
@media(min-width:700px){body{padding-bottom:95px}.bottomnav{max-width:720px;left:50%;transform:translateX(-50%);border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.app-item button:not(.delete){
  border:0;
  background:var(--blue);
  color:white;
  font-weight:700;
  padding:8px 14px;
  border-radius:10px;
  margin-right:6px;
}
#resources a.primary.full{
  display:block;
  width:100%;
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  text-align:center;
  line-height:1.25;
  padding:14px 12px;
}
/* Resume Keyword Helper */
#resume .form-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}

#resume .form-card label{
  display:block;
  font-size:18px;
  font-weight:700;
  margin-top:6px;
}

#resume .form-card textarea{
  display:block;
  width:100%;
  min-height:160px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  font:inherit;
  font-size:16px;
  line-height:1.4;
  resize:vertical;
}

#resume #compareResume{
  margin-top:8px;
}
/* Why This Result formatting */
.why-risky {
  margin-top: 22px;
}

.why-risky h3 {
  font-size: 1.35rem;
  margin-bottom: 14px;
}

.why-risky ul {
  margin: 0;
  padding-left: 18px;
}

.why-risky li {
  margin-bottom: 16px;
  font-size: 1rem;
  line-height: 1.45;
}

.why-risky li strong {
  font-size: 1.05rem;
}
#home a.primary {
  display: inline-block;
  text-decoration: none;
  margin: 6px 8px 6px 0;
  text-align: center;
}
#home form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

#home form label {
  display: block;
  font-weight: 700;
}

#home form input,
#home form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}

#home form textarea {
  min-height: 120px;
  resize: vertical;
}
#feedbackStatus {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #e8f5ec;
  border: 1px solid #b8ddc3;
  font-weight: 700;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

#feedbackStatus::before {
  content: "✓ ";
}
#home form button {
  align-self: flex-start;
  margin-top: 6px;
}
.tracker-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 16px;
}

.tracker-summary div {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
}

.tracker-summary strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 6px;
}

.tracker-summary span {
  font-size: 0.85rem;
  font-weight: 700;
}

@media (max-width: 500px) {
  .tracker-summary {
    gap: 6px;
  }

  .tracker-summary div {
    padding: 12px 4px;
  }

  .tracker-summary span {
    font-size: 0.75rem;
  }
}
.followup-due {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff3cd;
  border: 1px solid #ffe69c;
  font-size: 0.82em;
  font-weight: 700;
}

.followup-overdue {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f8d7da;
  border: 1px solid #f1aeb5;
  font-size: 0.82em;
  font-weight: 700;
}
@media (max-width: 500px) {
  .bottomnav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .bottomnav button {
    min-width: 0;
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 10px;
  }
}