/* Base */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.45;
  background: #f6f7f9;
  color: #0f172a;
}

/* Layout container you can use on pages */
.container { max-width: 1100px; margin: 0 auto; padding: 28px 40px; }

/* Buttons */
button { font: inherit; }
.actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:8px 0 12px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px;
  padding:10px 14px; border-radius:10px; border:1px solid #d0d7de;
  text-decoration:none; font-weight:600; line-height:1; cursor:pointer;
  background:#fff; color:#0f172a;
  transition: box-shadow .15s ease, transform .02s ease;
}
.btn:hover { box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 2px 8px rgba(16,24,40,.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #1f6feb; outline-offset:2px; }
.btn-primary { background:#1f6feb; color:#fff; border-color:#1f6feb; }
.btn-secondary { background:#fff; color:#1f6feb; border-color:#1f6feb; }

/* Result boxes / cards */
.result-box,
.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  background-color: #fff;
  margin-bottom: 16px;
}
.results-container { display: flex; flex-direction: column; gap: 20px; }
.muted { color:#6b7280; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* Sticky brand bar (full-width header) */
.brandbar{
  position: sticky;     /* sticks to top on scroll */
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

/* Logo scales nicely from mobile to desktop */
.brand-logo{
  max-width: 400px;
  width: clamp(160px, 24vw, 400px);
  height: auto;
  display: block;
}

/* Action buttons on the right */
.brand-actions{
  display: flex;
  gap: 10px;
  margin-left: auto; /* push to right */
}
.brand-actions button{
  padding: 10px 16px;
  font-size: 16px;
  border-radius: 10px;
}
.brand-actions .active {
  box-shadow: inset 0 0 0 2px rgba(31,111,235,.25);
}

/* Tables (shared) */
table { width:100%; border-collapse:collapse; background:#fff; border-radius: 12px; overflow: hidden; }
thead { background:#f8fafc; position: sticky; top: 0; z-index: 1; }
th, td { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* Code chip */
code { background:#f3f4f6; padding:2px 6px; border-radius:6px; }

/* Responsive tweaks */
@media (max-width: 720px) {
  .container { padding: 22px; }
  .brand-actions { gap: 8px; }
  .brand-actions button { padding: 9px 12px; font-size: 15px; }
  .btn { padding:9px 12px; }
}

/* more neutral, rigid selects */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:#fff;
  border:1px solid var(--line);
  padding: 12px 40px 12px 14px;
  border-radius:10px;
  font-size:16px;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%2364748b' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px 20px;
}
select:focus { outline: 2px solid rgba(124,58,237,.35); }


/* Make brand bar "buttons" blue */
.brandbar .brand-actions .btn.btn-primary {
  background-color: #0a57d0;
  color: #fff;
  border: 1px solid #0a57d0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
}
.brandbar .brand-actions .btn.btn-primary:hover {
  background-color: #084bb5;
  text-decoration: none;
}

/* Primary “blue” buttons */

.btn.btn-primary,
button.btn.btn-primary {
  background-color: #0a57d0;
  color: #fff;
  border: 1px solid #0a57d0;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  appearance: none;            /* reset native button look */
  -webkit-appearance: none;    /* for Safari */
}
button.btn.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: #084bb5;
}