:root{
  --brand-primary: #0c2340;
  --brand-secondary: #ffc72c;
  --brand-accent: #0077cc;
  --bg: #f7f7f8;
  --surface: #ffffff;
  --text: #1b1f23;
  --muted: #6b7280;
  --border: #e5e7eb;
  --font-sans: "Alegreya Sans", "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
  --font-serif: "Alegreya", Georgia, serif;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --maxw: 1200px;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text); font:16px/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Header */
.topbar{ background:var(--brand-primary); color:#fff; border-bottom:4px solid var(--brand-secondary); }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; }
nav.primary-nav{ display:flex; gap:18px; flex-wrap:wrap; }
nav.primary-nav a{ color:#e5ecf5; font-weight:600; padding:8px 10px; border-radius:10px; }
nav.primary-nav a:hover{ background:rgba(255,255,255,.08); text-decoration:none; }

/* Layout */
main{ padding:30px 0 64px; }
.grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; }
@media (max-width:960px){ .grid{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card .hd{ padding:20px 22px; border-bottom:1px solid var(--border); }
.card .hd h2{ margin:0; font:700 1.25rem/1.3 var(--font-serif); }
.card .bd{ padding:20px 22px; }

/* Form */
.field{ margin-bottom:16px; }
.label{ font-weight:600; margin-bottom:6px; display:block; }
.input{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; outline:none; }
.input:focus{ border-color:var(--brand-accent); box-shadow:0 0 0 4px rgba(0,119,204,.15); }

/* Actions: force Validate button under CeDiD input */
.actions{ display:block; }                 /* stack children */
.actions .btn{ display:inline-block; margin-top:8px; }
.actions .note{ display:inline-block; margin-left:12px; vertical-align:middle; }

/* Buttons */
.btn{ padding:12px 18px; border-radius:999px; background:var(--brand-secondary); border:0; font-weight:700; cursor:pointer; }
.btn:hover{ filter:brightness(.95); }
.btn.alt{ background:#e5e7eb; }

/* Result cards */
.result-card{ margin-top:20px; border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.result-card.valid{ background:#ecfdf5; border-color:#10b981; }
.result-card.neutral{ background:#fef9c3; border-color:#facc15; }

/* Sidebar */
.aside img{ max-width:100%; height:auto; }

/* Footer */
footer{ background:#0f172a; color:#cbd5e1; border-top:4px solid var(--brand-secondary); }
footer .wrap{ padding:22px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* Utilities */
.note{ font-size:.9rem; color:var(--muted); }
.logo-area{ text-align:center; margin:30px 0; }