:root{
  /* Core palette & sizing */
  --bar-h:22px;
  --bg:#f6f7fb;           /* softer canvas */
  --fg:#0e1116;           /* higher contrast foreground */
  --muted:#7a8391;

  --card:#ffffff;
  --shadow:0 10px 30px rgba(2, 8, 20, .06), 0 2px 8px rgba(2, 8, 20, .03);
  --radius:16px;

  --ok:#1db954;           /* fresh green */
  --warn:#ffb020;         /* amber */
  --bad:#ff4d4f;          /* coral red */
  --accent:#0b57d0;       /* brand blue */

  --ring:#e8ebf0;

  --btn-bg:#111827;
  --btn-fg:#fff;
  --btn-bg-2:#eef1f6;
  --btn-fg-2:#0e1116;

  --focus:#84b9ff;
  --container-max:980px;   /* unified content width */
}

*{box-sizing:border-box}

/* Typography & layout */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  margin: 2.5rem auto;
  max-width: var(--container-max);
  color: var(--fg);
  background: radial-gradient(1200px 800px at 20% -10%, #eaf1ff 0%, transparent 40%),
              radial-gradient(900px 700px at 120% 10%, #ffeef0 0%, transparent 45%),
              var(--bg);
  padding: 0 1rem;
  line-height: 1.55;
}

/* Unified container alignment */
.content,
.grid,
#eml-howto,
.attr-card,
footer.legal-small{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: 100%;
}
.content,
.grid,
#eml-howto,
.attr-card{
  padding-left: 0;
  padding-right: 0;
}

/* Brand / header row */
.brand{
  display:flex; align-items:center; gap:18px; margin-bottom:1.2rem;
}
h1{margin:0; font-size:clamp(1.6rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing:-.01em}
.sub{color:var(--muted); font-size:clamp(.9rem,.85rem + .2vw,1rem); margin-top:.25rem}

/* Cards & grid */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.25rem 1.25rem 1.15rem;
  border:1px solid rgba(2,8,20,.04);
  backdrop-filter:saturate(140%) blur(4px);
  transition: box-shadow .25s ease, transform .2s ease;
}
.card:hover{ box-shadow: 0 14px 34px rgba(2,8,20,.09), 0 4px 10px rgba(2,8,20,.04); }
.grid{ display:grid; gap:1.1rem; }

/* Rows & labels */
.row{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.label{min-width:170px; text-align:right; font-variant-numeric:tabular-nums; color:#1f2937}

/* Buttons */
.btn{
  padding:.9rem 1.1rem;
  border:none; border-radius:14px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:700; cursor:pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease, background .25s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.btn:active{ transform: translateY(0); box-shadow: 0 2px 0 rgba(0,0,0,.05); }
.btn.secondary{
  background:var(--btn-bg-2); color:var(--btn-fg-2);
  border:1px solid rgba(2,8,20,.08);
}
.btn:disabled{opacity:.6; cursor:not-allowed}

/* Focus visibility */
:where(a, button, [role="button"], input, summary, label).focus-visible,
:where(a, button, [role="button"], input, summary, label):focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Progress meter */
.meter{
  position:relative; width:100%; height:var(--bar-h);
  background: linear-gradient(180deg, #eef2f7 0%, #e8edf5 100%);
  border-radius:999px; overflow:hidden;
  box-shadow: inset 0 1px 3px rgba(2,8,20,.06);
}
.fill{
  position:absolute; top:0; left:0; height:100%; width:0%;
  background: linear-gradient(90deg, #9ae6b4 0%, #1db954 100%);
  transition: width .45s cubic-bezier(.22,.61,.36,1), background .25s ease;
  will-change: width;
}

/* Gauge badge */
.brand .badge{ width:84px; height:84px; flex:0 0 auto }
.ring-bg{ fill:none; stroke:var(--ring); stroke-width:12 }
.ring{
  fill:none; stroke:var(--ok); stroke-width:12;
  transform:rotate(-90deg); transform-origin:50% 50%;
  stroke-linecap:round;
  transition: stroke .25s ease, stroke-dashoffset .35s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.06));
}
.pct{ font-size:18px; font-weight:800; text-anchor:middle; dominant-baseline:middle; fill:var(--fg) }
.badge-label{ font-size:9px; letter-spacing:.8px; fill:var(--muted); text-transform:uppercase; text-anchor:middle }

/* Status colors */
.status{ font-weight:800 }
.status.safe{ color:var(--ok) }
.status.caution{ color:var(--warn) }
.status.danger{ color:var(--bad) }

/* Dropzone */
.drop{
  border:2px dashed #cfd7e6;
  border-radius:14px;
  padding:1.25rem;
  background:#fff;
  text-align:center;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.drop:hover{ box-shadow: 0 6px 20px rgba(2,8,20,.06); }
.drop.drag{
  background:#f2f8ff;
  border-color:#90caf9;
  box-shadow:0 8px 28px rgba(2,8,20,.08);
}

/* Legal bits & notes */
.legal-small{ color:#6b7280; font-size:.86rem; margin-top:.65rem }
.note{ color:#4b5563; font-size:.92rem; margin-top:.55rem }
.error{ color:#b00020; font-size:.98rem; margin-top:.55rem; font-weight:600 }
.copy-ok{ color:var(--ok); font-size:.9rem; margin-left:.4rem }

/* Steps */
.steps{ display:grid; grid-template-columns:1fr; gap:.8rem; margin:.6rem 0 1rem }
.step-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#eef3ff; color:#0b57d0; font-weight:800;
  padding:.35rem .7rem; border-radius:999px; font-size:.85rem;
  letter-spacing:.3px; text-transform:uppercase;
  box-shadow: inset 0 0 0 1px rgba(11,87,208,.14);
}
.step-tag .num{
  width:22px; height:22px; display:inline-grid; place-items:center;
  background:#0b57d0; color:#fff; border-radius:50%; font-size:.8rem;
}
.card h2{ display:flex; align-items:center; gap:.6rem; margin:0 0 .6rem }
.help{ color:#5b6472; font-size:.97rem }

/* Explanation box */
.hint{ font-size:.92rem; color:#4a5568; margin-top:.55rem }
.explain{
  font-size:1rem; margin-top:.7rem; padding:.8rem 1rem;
  border-left:4px solid #dde5f2; background:#f7f9fc; border-radius:10px;
}

/* Upload controls layout */
.upload-actions{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:.7rem
}

/* Logo banner image */
.site-logo{ display:block; max-width:100%; height:80px; width:auto; margin:0 auto; object-fit:contain }

/* How-to details */
#eml-howto details{
  border:1px solid #e6ebf2; border-radius:12px; padding:.7rem .9rem; background:#fff; margin:.6rem 0;
  transition: box-shadow .2s ease, border-color .2s ease;
}
#eml-howto details[open]{ box-shadow:0 2px 10px rgba(2,8,20,.05); border-color:#d9e3f2 }
#eml-howto details summary{ cursor:pointer; font-weight:700; color:#243044 }

/* Footer alignment */
footer.legal-small{ color:#6b7280 }

/* Utility */
.logo { flex: 0 0 auto; }
@media (max-width: 520px){
  .logo { width: 48px; height: 48px; }
}

/* Accessibility helper */
.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip: rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Responsive tweaks */
@media (min-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .brand{ align-items:flex-start; gap:12px }
  .brand .badge{ width:68px; height:68px }
  .label{ min-width:auto; text-align:left }
}

/* Dark mode (automatic) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14;
    --fg:#e9eef5;
    --muted:#97a3b0;
    --card:#0e141b;
    --ring:#1c2430;
    --btn-bg:#1f2937;
    --btn-fg:#e9eef5;
    --btn-bg-2:#141a22;
    --btn-fg-2:#e9eef5;
    --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  }
  body{
    background:
      radial-gradient(1200px 800px at 20% -10%, rgba(24,63,155,.25) 0%, transparent 40%),
      radial-gradient(900px 700px at 120% 10%, rgba(155,24,54,.20) 0%, transparent 45%),
      var(--bg);
  }
  .meter{ background: linear-gradient(180deg, #1b2430 0%, #151c26 100%) }
  .fill{ background: linear-gradient(90deg, #36d399 0%, #22c55e 100%) }
  .drop{ background:#0e141b; border-color:#223044 }
  .drop.drag{ background:#0f1a2a; border-color:#3b82f6 }
  .explain{ background:#0f1620; border-left-color:#1f2a38 }
  .help{ color:#b6c2d0 }
  .note{ color:#a9b3bf }
  .error{ color:#ff6b6f }
  .legal-small, footer.legal-small{ color:#96a2b1 }
  .ring-bg{ stroke: #1c2634 }
  .pct{ fill:var(--fg) }
  .card{ border-color:#141b24 }
  .btn.secondary{ border-color:#1f2a38 }
}

/* Header title styling */
.brand h1 {
  background: linear-gradient(90deg, #0b57d0, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* Responsive logo */
.site-logo {
  display:block;
  width:100%;
  height:auto;
  max-height:none;
}