:root{
  --bg:#eff4fb;
  --bg-deep:#e4edf8;
  --surface:rgba(255,255,255,.90);
  --surface2:rgba(243,248,255,.86);
  --border:#d7e2f0;
  --text:#0f172a;
  --muted:#5b6b81;
  --accent:#2563eb;
  --accent2:#3b82f6;
  --danger:#dc2626;
  --amber:#d97706;
  --success:#059669;
  --shadow:0 18px 40px rgba(15,23,42,.08);
  --shadow-soft:0 8px 22px rgba(49,95,186,.08);
  --banner-bg: rgba(232, 244, 252, 0.92);
  --banner-border: #c9e3f5;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(49,95,186,.10), transparent 30%),
    radial-gradient(circle at top right, rgba(125,159,217,.12), transparent 26%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.5;
  text-rendering: optimizeLegibility;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1120px; margin:0 auto; padding:24px}
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(8px);
  background: linear-gradient(180deg, rgba(243,248,255,.94) 0%, rgba(235,243,252,.88) 100%);
  border-bottom:1px solid rgba(177,203,233,.85);
  min-height: 72px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.topbar .container{
  min-height: 72px;
  padding: 0 24px;
  display: flex;
  align-items: center;
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; width:100%}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg, #eaf6ff, #dcefff);
  border:1px solid #c6e2f8;
  color:#1e3a8a;
  box-shadow:var(--shadow-soft);
  font-weight:700;
}
.brand-name{font-weight:700; letter-spacing:-.02em; text-shadow:0 1px 0 rgba(255,255,255,.65)}
.brand-tag{font-size:12px; color:var(--muted)}

.nav a{margin-left:14px; color:var(--text); opacity:.85}
.nav a:hover{opacity:1}

.topbar-accent{
  display:block;
  height:2px;
  margin:0 24px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(49,95,186,.14), rgba(49,95,186,.38), rgba(49,95,186,.12));
}

.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:start; margin-top:18px}
.hero h1{font-size:40px; line-height:1.08; margin:10px 0 12px; letter-spacing:-.03em; text-shadow:0 1px 0 rgba(255,255,255,.65)}
.lead{color:var(--muted); font-size:16px; line-height:1.65}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(243,248,255,.86) 100%);
  border:1px solid rgba(184,205,235,.72);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.82);
}

.form{display:flex; flex-direction:column; gap:12px}
label{font-size:13px; color:var(--muted)}
input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,250,255,.92) 100%);
  border:1px solid rgba(184,205,235,.82);
  color:var(--text);
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus{
  border-color:#9bbcff;
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}

input[type="checkbox"],
input[type="radio"]{
  width:auto;
  padding:0;
  margin:2px 0 0 0;
  accent-color:var(--accent);
}

.diag-check,
.check-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  line-height:1.3;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  min-height:40px;
  line-height:1.2;
  font-size:14px;
  font-family:inherit;
  border-radius:12px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  font-weight:600;
  cursor:pointer;
  transition:all .16s ease;
  text-decoration:none;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn-primary,
.btn.primary{
  background:linear-gradient(180deg, #4673ca 0%, var(--accent) 100%);
  border-color:#1d4ed8;
  color:#fff;
  box-shadow: 0 6px 16px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover,
.btn.primary:hover{
  background:linear-gradient(180deg, #3a68c2 0%, #1d4ed8 100%);
  border-color:#1e40af;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(29,78,216,.28), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-secondary,
.btn.secondary,
.btn-outline-secondary,
.btn.btn-outline-secondary{
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-color:var(--border);
  color:var(--text);
}
.btn-secondary:hover,
.btn.secondary:hover,
.btn-outline-secondary:hover,
.btn.btn-outline-secondary:hover{border-color:#b6c6df}

.btn-danger,
.btn.danger{
  background: linear-gradient(180deg, #d95345 0%, var(--danger) 100%);
  border-color:#a73025;
  color:#fff;
}

.btn-danger:hover,
.btn.danger:hover{
  background:linear-gradient(180deg, #cb483b 0%, #b91c1c 100%);
  border-color:#8f2b20;
  transform: translateY(-1px);
}

.btn-lg,
.btn.btn-lg{
  min-height:40px;
  padding:10px 14px;
  font-size:14px;
}

.btn:hover {
  border-color: #b5c8e6;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.85);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15,23,42,.08), inset 0 1px 2px rgba(15,23,42,.08);
}

.cta-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.bullets{margin-top:14px}
.bullet{
  padding:10px 12px;
  color:var(--text);
  border:1px solid rgba(184,205,235,.72);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(243,248,255,.86) 100%);
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}
.muted{color:var(--muted)}
.divider{height:1px; background:var(--border); margin:14px 0}

.grid-two{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.kv{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0}

.footer{padding-top:6px; padding-bottom:26px; opacity:.85}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid-two{grid-template-columns:1fr}
  .hero h1{font-size:33px}

  .topbar { min-height: 64px; }
  .container { padding: 16px; }
  .topbar .container { min-height: 64px; padding: 0 14px; }
  .brand { align-items: flex-start; }
  .topbar-inner { gap: 10px; }
  .brand-tag { font-size: 11px; max-width: 100%; }

  .nav {
    width: 100%;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .nav a { margin-left: 0; }
}

.pagegrid { display:grid; grid-template-columns:220px 1fr; gap:12px; }
.sidenav { display:flex; flex-direction:column; gap:8px; }
.subtabbtn {
  text-align:left;
  padding:10px;
  border:1px solid rgba(184,205,235,.72);
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(243,248,255,.84) 100%);
  cursor:pointer;
  border-radius:10px;
  box-shadow:0 6px 14px rgba(15,23,42,.04);
}
.subtabbtn.active {
  border-color:#94b2e8;
  background:linear-gradient(180deg, rgba(237,243,255,.96) 0%, rgba(224,236,255,.88) 100%);
  color:#1e3a8a;
  font-weight:700;
}
.content { min-height:300px; }
.table { display:grid; gap:8px; }
.thead, .trow { display:grid; grid-template-columns:60px 1.2fr 1.5fr 90px 120px; gap:10px; align-items:center; }
.thead { font-weight:700; padding:8px; border-bottom:1px solid var(--border); }
.trow { padding:10px; border:1px solid #e8edf5; border-radius:10px; background:#fff; }
.trow { background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(243,248,255,.84) 100%); box-shadow:0 6px 14px rgba(15,23,42,.04); }
.red { color:#b00020; font-weight:600; }