:root{
  --bg:#0b1020;--panel:#0f1730;--txt:#eef2ff;--muted:#a8b3cf;--blue:#2a6df7;--red:#ff3b30
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;}

/* ------ Header / Logo ------ */
.topbar{position:sticky;top:0;background:#0b1020cc;border-bottom:1px solid #ffffff1a;backdrop-filter:blur(6px)}
.wrap{max-width:1100px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:700;font-size:20px}
.logo svg{width:30px;height:30px}
.logo .blue{color:var(--blue)}

/* ------ Main / Card ------ */
.main{padding:56px 16px}
.card{
  background:var(--panel);border:1px solid #ffffff1a;border-radius:16px;
  padding:28px;max-width:720px;margin:0 auto;text-align:center
}
h1{margin:0 0 6px;font-size:28px}
.sub{color:var(--muted);margin:0 0 18px}
input[type=file]{
  display:block;margin:14px auto;padding:12px;background:#0a1328;
  border:1.5px dashed #ffffff2b;border-radius:12px;color:#cfd8ff;width:100%
}
.btn{background:var(--blue);border:none;color:#fff;font-weight:700;padding:12px 16px;border-radius:10px;cursor:pointer}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.status{margin-top:10px;color:#cfe}
.result{margin-top:14px}
.badge{display:inline-block;margin-left:10px;padding:4px 8px;border-radius:999px;background:#ffffff14;color:#fff;font-size:12px}

/* ------ Footer + Links + Stats ------ */
.footer{border-top:1px solid #ffffff1a}
.footer .wrap{gap:12px;flex-wrap:wrap}
.footer .left,.footer .mid,.footer .right{display:flex;align-items:center;gap:10px}
.footer a{color:#fff;text-decoration:none;opacity:.9}
.footer a:hover{opacity:1}
.sep{opacity:.35}
.glow.red{color:var(--red);text-shadow:0 0 8px rgba(255,59,48,.6)}

/* ======== Responsive Layout ======== */

/* 📱 Mobile (<= 480px) */
@media (max-width:480px){
  .logo{font-size:18px}
  .logo svg{width:26px;height:26px}
  .main{padding:32px 12px}
  .card{padding:20px;max-width:100%}
  h1{font-size:22px}
  .sub{font-size:14px}
  input[type=file]{padding:14px}
  .btn{width:100%;padding:14px 16px}
  .footer .wrap{flex-direction:column;align-items:center;text-align:center}
  .footer .left{order:1}
  .footer .mid{order:2;gap:16px}
  .footer .right{order:3;gap:16px}
}

/* 📲 Kleine Tablets (481–768px) */
@media (min-width:481px) and (max-width:768px){
  .main{padding:44px 14px}
  .card{max-width:640px}
  .footer .wrap{flex-wrap:wrap;justify-content:center}
  .footer .mid{gap:16px}
}

/* 💻 Desktop (>= 769px): Footer als 3-Spalten-Leiste */
@media (min-width:769px){
  .footer .wrap{
    display:grid;
    grid-template-columns: 1fr auto 1fr; /* links | mitte | rechts */
    align-items:center;
  }
  .footer .left{justify-self:start}
  .footer .mid{justify-self:center;gap:18px}
  .footer .right{justify-self:end;gap:18px}
}

/* Nutzer mit reduzierter Bewegung */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
}

/* Kleinere Feinschliffe */
.download{display:inline-block;margin-top:8px}

/* ===== Mobile tidy for stats row ===== */
@media (max-width:480px){
  /* Footer als Grid: Mitte (Links) -> Copyright -> Stats */
  .footer .wrap{
    display:grid;
    grid-template-areas:
      "mid"
      "left"
      "right";
    row-gap:8px;
    justify-items:center;
  }
  .footer .mid{ grid-area: mid; gap:14px; }
  .footer .left{ grid-area: left; font-size:12px; }
  .footer .right{
    grid-area: right;
    font-size:12px;            /* kleiner */
    gap:10px;                  /* enger */
    white-space:nowrap;        /* alles in einer Zeile */
    align-items:center;
    justify-content:center;
  }
  .footer .right .glow.red{ text-shadow:0 0 6px rgba(255,59,48,.5); }
}