:root{
  --bg:#0A0A0A; --text:#FFFFFF; --muted:#B3B3B3;
  --stroke:2px; --radius-pill:999px;

  --accent:#F59E0B;         /* landing tlačítko */
  --android:#3DDC84;        /* download tlačítka */
  --windows:#0078D4;
  --apple:#FFFFFF;
  --tracker:#00BCD4;        /* drone tracker */

  /* Auth layout */
  --auth-card-w: min(520px, calc(100vw - (2 * var(--auth-side-gap))));
  --auth-side-gap: 24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
}

/* stejné písmo/vyhlazování */
.pill, .muted{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* layout */
.wrap{min-height:100%;display:grid;place-items:center;padding:40px 24px}
.stack{text-align:center;max-width:960px}

/* logo + text */
.logo{width:520px;max-width:90vw;height:auto;display:block;margin-inline:auto}
.sp{height:28px}
.muted{color:var(--muted);font-size:18px;letter-spacing:.2px}

/* mřížka tlačítek (download) */
.row{
  display:grid;
  grid-template-columns:repeat(2,160px);
  justify-content:center;   /* grid jako celek na střed */
  align-items:center; 
  gap:16px;
  margin-top:20px; /* mezera mezi textem a tlačítky */
}

.row > *:nth-last-child(1):nth-child(odd) {
  grid-column: 1 / -1;   /* zabere 2 sloupce */
  justify-self: center;  /* a drží se uprostřed */
}

/* ===== Pills (sjednoceno) ===== */
.pill{
  width:160px;
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:14px 22px;                 /* sjednocená výška */
  font-size:17px; line-height:1.2;   /* opticky sedí k ikonám */
  border-radius:var(--radius-pill);
  font-weight:600; letter-spacing:.3px; text-decoration:none; user-select:none; cursor:pointer;
  transition:transform .08s ease,background .2s ease,color .2s ease,border-color .2s ease;
  background:transparent;

  -webkit-appearance: none;
  appearance: none;
  border-style: solid;
  border-image: none;
  background-image: none;
  box-shadow: none;
}
.pill svg{width:22px;height:22px; transform: translateY(1px)} /* jemné srovnání baseline */
.pill:hover{transform:translateY(-1px)}
.pill:active{transform:translateY(0)}


/* Ať odkazy s .pill nemění barvu (visited apod.) */
a.pill, a.pill:link, a.pill:visited, a.pill:hover, a.pill:active{
  text-decoration:none;
  color: inherit !important;
}

/* varianty */
.pill.accent{ color:var(--accent) !important; border-color:var(--accent) !important; }
.pill.accent:hover{background:rgba(245,158,11,.10)}

.pill.android{ color:var(--android) !important; border-color:var(--android) !important; }
.pill.android:hover{background:rgba(61,220,132,.10)}

.pill.windows{ color:var(--windows) !important; border-color:var(--windows) !important; }
.pill.windows:hover{background:rgba(0,120,212,.10)}

.pill.apple{   color:var(--apple) !important;   border-color:var(--apple) !important; }
.pill.apple:hover{background:rgba(255,255,255,.10)}

.pill.tracker{ color:var(--tracker) !important; border-color:var(--tracker) !important; }
.pill.tracker:hover{background:rgba(0,188,212,.10)}

/* status texty */
.status{margin-top:12px;min-height:1.2em;font-size:18px;color:#93C5FD}
.error{color:#FCA5A5}

/* ===== Auth / Registration (sloučeno a odlehčeno) ===== */
.auth-shell{
  min-height: 100vh;
  display: grid;
  place-content: center;   /* vycentruj celý grid uprostřed – vertikálně i horizontálně */
  justify-items: center;            /* svisle na střed jako celek */
  gap:50px;                         /* KONZISTENTNÍ mezera mezi logem a kartou */
  padding:40px var(--auth-side-gap) 80px;
}

.auth-header{
  width: var(--auth-card-w);
  max-width: 100%;
  margin: 0;                        /* žádný proměnlivý odstup – gap to řeší */
  display: grid;
  place-items: center;
}


.auth-card{
  width: var(--auth-card-w);
  max-width: 100%;
  margin: 0 auto;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:20px 20px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.field{ position:relative; margin:14px 0 6px; padding-top:2px; }
.field label{ display:block; font-size:18px; color:var(--text); opacity:.9; margin-bottom:8px; }
.field input{
  width:100%; background:transparent; color:var(--text);
  border:0; outline:0; font-size:20px; padding:6px 40px 10px 0;
  border-bottom:2px solid rgba(255,255,255,.16);
  transition:border-color .2s ease;
}
.field input::placeholder{ color: rgba(255,255,255,.28); }
.field input:focus{ border-bottom-color: rgba(255,255,255,.35); }

.eye{
  position:absolute; right:0; bottom:10px; width:32px; height:32px;
  display:grid; place-items:center; cursor:pointer; border:0; background:transparent; color:var(--muted);
}
.eye svg{ width:22px; height:22px; }
.eye:hover{ color:#d1d5db; }

.actions{ display:grid; place-items:center; margin-top:18px; }

.errors{
  margin-top:12px; padding:12px 14px; border-radius:8px;
  background: rgba(239,83,80,.12); border: 1px solid rgba(239,83,80,.3);
  text-align:center;
}
.errors p{
  margin:8px 0; font-size:15px; color:#FCA5A5; line-height:1.4;
}
.errors p:first-child{ margin-top:0; }
.errors p:last-child{ margin-bottom:0; }

/* ===== Responsivní ===== */
@media (max-width:560px){
  .logo{width:70vw;max-width:420px}
}
@media (max-width:460px){
  .row{grid-template-columns:1fr}
  .pill{width:100%}
  .pill.apple{grid-column:auto}
}
@media (max-width:420px){
  .auth-logo{ width:128px; margin-bottom:6px; }
  .auth-card{ padding:16px 16px; }
  .field label{ font-size:16px; }
  .field input{ font-size:18px; }
}

/* Disabled vzhled musí přebít varianty s !important */
.pill[disabled]{
  color: rgba(255,255,255,.35) !important;
  border-color: rgba(255,255,255,.18) !important;
  cursor: not-allowed;
  transform: none;
  background: transparent !important;
}
.pill[disabled]:hover{
  background: transparent !important;
  transform: none;
}