:root{
  --primary:#003087; --primary-light:#1e4a8c; --secondary:#0066cc;
  --accent:#e6f2ff; --success:#28a745; --background:#f8f9fa;
  --card-bg:#fff; --text-primary:#212529; --text-secondary:#6c757d;
  --border:#dee2e6; --shadow:0 2px 4px rgba(0,48,135,.1); --shadow-lg:0 4px 8px rgba(0,48,135,.15);
  --radius:12px; --pad:1rem; --max:1200px;
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:Segoe UI,Arial,sans-serif;background:var(--background);color:var(--text-primary);line-height:1.6}
.container{max-width:var(--max);margin:0 auto;padding:2rem 1rem}
.grid-two{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem}
@media (max-width:768px){.grid-two{grid-template-columns:1fr}}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}
.full{grid-column:1/-1}
.page-title{font-size:1.5rem;margin:0 0 .5rem;color:var(--primary)}
.card-title{font-size:1.25rem;color:var(--primary);margin:.25rem 0 1rem}
.card-subtitle{font-size:1rem;color:var(--text-primary);margin:.25rem 0 .75rem}
.pill-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.pill{display:inline-block;padding:.5rem .75rem;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--primary);background:#fff}
.pill:hover{background:var(--accent)}
.btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:.6rem 1rem;cursor:pointer}
.btn:hover{background:var(--primary-light)}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.input-group{margin:.75rem 0}
label{display:block;margin-bottom:.25rem;font-weight:600}
input{width:100%;padding:.6rem .75rem;border:2px solid var(--border);border-radius:8px;background:#fafafa}
input:focus{outline:none;border-color:var(--secondary);background:#fff;box-shadow:0 0 0 3px rgba(0,102,204,.1)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:600px){.row{grid-template-columns:1fr}}
.muted{color:var(--text-secondary);font-size:.95rem}
.notice{background:#fff3cd;border:1px solid #ffeaa7;color:#856404;border-radius:8px;padding:.75rem;margin:.75rem 0}
.header{background:linear-gradient(135deg,var(--secondary),#004499);color:#fff}
.header-inner{max-width:var(--max);margin:0 auto;padding:1rem;display:flex;justify-content:space-between;align-items:center}
.brand{color:#fff;text-decoration:none;font-weight:700}
.nav{display:flex;gap:1rem}
.nav a{color:#fff;text-decoration:none}
.footer{background:var(--primary);color:#fff;margin-top:2rem}
.footer-inner{max-width:var(--max);margin:0 auto;padding:1.25rem}
.ad{border:2px dashed var(--border);border-radius:8px;padding:1rem;text-align:center;color:var(--text-secondary);background:linear-gradient(135deg,#f8f9fa,#e9ecef)}

.result-card{border:2px solid var(--secondary);background:linear-gradient(135deg,var(--accent),#fff)}
.result-value{font-size:2.25rem;font-weight:800;color:var(--primary);margin:.25rem 0 .75rem}
.result-label{color:var(--text-secondary);font-weight:600;margin-bottom:.5rem}
.kv{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--border)}
.kv:last-child{border-bottom:0}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}

/* Slim attention banner */
.banner {
  background: linear-gradient(135deg, #ff9800, #f57c00); /* warm orange */
  color: #fff;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1100; /* above header */
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.banner a {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
}