:root{
  --pozadi:#0c0a12; --panel:#17141f; --box:#221d2e; --box-hover:#2c2539;
  --fial:#8b5cf6; --fial-tmava:#6d35e0; --text:#e6e3ee; --text-slaby:#9b94ad;
  --ram:#332c45; --zelena:#34d399; --oranzova:#fbbf24; --cervena:#f87171;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--pozadi);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.6;}
a{color:inherit;text-decoration:none;}

.stred{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px;}
.karta-login{background:var(--panel);border:1px solid var(--ram);border-radius:12px;
  padding:32px;width:100%;max-width:360px;box-shadow:0 12px 40px rgba(0,0,0,.6);}
.karta-login h1{margin:0 0 24px;font-size:22px;color:var(--fial);}
.karta-login label{display:block;font-size:13px;color:var(--text-slaby);margin:14px 0 6px;}
.karta-login input{width:100%;padding:11px 12px;background:#0f0d16;color:var(--text);
  border:1px solid var(--ram);border-radius:8px;font-size:15px;}
.karta-login input:focus{outline:none;border-color:var(--fial);}
.karta-login button{width:100%;margin-top:24px;padding:12px;background:var(--fial);
  color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;}
.karta-login button:hover{background:var(--fial-tmava);}
.chyba{background:rgba(248,113,113,.12);border:1px solid var(--cervena);
  color:var(--cervena);padding:10px 12px;border-radius:8px;font-size:14px;}

.hlavicka{display:flex;justify-content:space-between;align-items:center;
  padding:18px 28px;background:var(--panel);border-bottom:1px solid var(--ram);}
.znacka{font-size:19px;font-weight:700;letter-spacing:.5px;}
.znacka span{color:var(--fial);}
.uziv{font-size:13px;color:var(--text-slaby);}
.uziv a{color:var(--fial);}

.mrizka{display:grid;gap:18px;padding:28px;max-width:1100px;margin:0 auto;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.box{background:var(--box);border:1px solid var(--ram);border-radius:12px;padding:20px 22px;
  transition:background .15s,border-color .15s,transform .15s;display:block;}
.box:hover{background:var(--box-hover);border-color:var(--fial);transform:translateY(-2px);}
.box-hlava{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.box h2{margin:0;font-size:17px;color:var(--fial);}
.box p{margin:8px 0 0;font-size:14px;color:var(--text-slaby);}
.stav{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.stav-bezi{background:var(--zelena);}
.stav-vyvoj{background:var(--oranzova);}
.stav-mimo{background:var(--cervena);}

.pata{text-align:center;color:var(--text-slaby);font-size:12px;padding:24px;}
@media (max-width:600px){.mrizka{padding:16px;}.hlavicka{padding:14px 16px;}}