:root{
  --navy:#1b2559;
  --navy-2:#293578;
  --accent:#fdb813;
  --accent-dark:#e2a30f;
  --green:#1b8a4c;
  --red:#c62828;
  --amber:#b8860b;
  --gray:#8a94a3;
  --bg:#f4f6fa;
  --card:#ffffff;
  --border:#e1e6ee;
  --text:#1b2432;
  --text-dim:#5b6472;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
}

header.app-header{
  background:linear-gradient(90deg, var(--navy), var(--navy-2));
  color:#fff;
  padding:.75rem 1.25rem;
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
header.app-header img.logo{ height:36px; }
header.app-header .title{ font-weight:bold; font-size:1.1rem; }
header.app-header nav{ display:flex; gap:1rem; margin-left:1rem; flex-wrap:wrap; }
header.app-header nav a{
  color:#c9d6f0;
  text-decoration:none;
  font-size:.9rem;
  padding:.25rem .5rem;
  border-radius:4px;
}
header.app-header nav a:hover, header.app-header nav a.active{
  background:rgba(255,255,255,.12);
  color:#fff;
}
header.app-header .spacer{ flex:1; }
header.app-header .whoami{ font-size:.85rem; color:#c9d6f0; }

main{ max-width:1100px; margin:1.5rem auto; padding:0 1rem; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1.25rem;
  margin-bottom:1.25rem;
}

h1{ font-size:1.4rem; color:var(--navy); }
h2{ font-size:1.1rem; color:var(--navy); }

table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th, td{ text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--border); }
th{ color:var(--text-dim); font-weight:bold; background:#f9fafc; }
tr:hover td{ background:#f9fafc; }

.badge{
  display:inline-block;
  padding:.15rem .5rem;
  border-radius:12px;
  font-size:.75rem;
  font-weight:bold;
}
.badge.sat, .badge.good{ background:#e5f4ea; color:var(--green); }
.badge.unsat, .badge.risk{ background:#fbe9e7; color:var(--red); }
.badge.ne{ background:#f0f1f3; color:var(--gray); }

label{ display:block; font-size:.85rem; color:var(--text-dim); margin:.5rem 0 .2rem; }
input, select, textarea{
  width:100%;
  padding:.5rem;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:.95rem;
  font-family:inherit;
}
textarea{ min-height:70px; }

button, .btn{
  background:var(--accent);
  border:1px solid var(--accent);
  color:var(--text);
  font-weight:bold;
  padding:.55rem 1.1rem;
  border-radius:6px;
  cursor:pointer;
  font-size:.95rem;
}
button:hover, .btn:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
button.secondary{ background:#fff; border-color:var(--border); }
button.secondary:hover{ background:#f4f6fa; }

.checklist-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.75rem;
  align-items:center;
  padding:.6rem 0;
  border-bottom:1px solid var(--border);
}
.score-picker{ display:flex; gap:.3rem; }
.score-picker button{
  padding:.3rem .6rem;
  font-size:.8rem;
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
}
.score-picker button.selected{ background:var(--navy); border-color:var(--navy); color:#fff; }

.error-banner{
  background:#fbe9e7;
  color:var(--red);
  border:1px solid #f3c6c1;
  border-radius:6px;
  padding:.6rem .9rem;
  margin-bottom:1rem;
  font-size:.9rem;
}

.empty-state{ color:var(--text-dim); font-size:.9rem; padding:1rem 0; }