@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

/* ══════════════════════════════════════════════════════════════
   AVERI — GLOBAL DESIGN SYSTEM
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Accent colors */
  --red:        #ff3d3d;
  --red-dim:    rgba(255, 59, 59, 0.18);
  --red-glow:   rgba(255,59,59,.35);
  --cyan:       #00d4ff;
  --cyan-dim:   rgba(0,212,255,.15);
  --green:      #00ff88;
  --green-dim:  rgba(0,255,136,.15);
  --yellow:     #ffcc00;
  --yellow-dim: rgba(255,204,0,.15);
  --purple:     #a855f7;
  --orange:     #ff8c00;

  /* Backgrounds */
  --bg:         #070910;
  --bg-panel:   #0b0d13;
  --bg-card:    #0e1018;
  --bg-code:    #050608;
  --bg-overlay: rgba(0,0,0,.88);

  /* Borders */
  --border:     rgba(255,255,255,.055);
  --border-mid: rgba(255,255,255,.1);
  --border-red: rgba(255,59,59,.22);

  /* Text */
  --text-dim:    #4b4d54;
  --text-muted:  #5e6068;
  --text-sub:    #8b8d94;
  --text-base:   #aeb0b7;
  --text-bright: #e5e8eb;

  /* Spacing scale */
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;

  --radius: 2px;
  --tr: .18s ease;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root { color-scheme: dark; }

/* ── BASE ── */
body {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='none' stroke='rgba(255,59,59,0.06)' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-position: 0 0;
  background-attachment: fixed;
  color: var(--text-base);
  font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-size: .825rem;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── SCANLINES ── */
.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.04) 2px,
    rgba(0,0,0,.04) 4px
  );
  pointer-events: none;
  z-index: 1000;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
header {
  background: var(--bg-panel);
  padding: .9rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-red);
  position: sticky;
  top: 0;
  z-index: 500;
}

.logo-link { text-decoration: none; cursor: pointer; }
.logo-container { display: flex; align-items: center; gap: 11px; }

.logo-img {
  height: 34px;
  filter:
    brightness(0)
    invert(36%) sepia(84%) saturate(3195%)
    hue-rotate(338deg) brightness(101%) contrast(106%)
    drop-shadow(0 0 6px rgba(255,59,59,.5));
}

h1, .brand-name {
  color: var(--red);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 7px;
  position: relative;
  display: inline-block;
}

/* Glitch effect */
.glitch { position: relative; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg-panel);
}
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--cyan);
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}
.glitch::after {
  left: -2px;
  text-shadow: -2px 0 var(--red);
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0%   { clip: rect(10px, 9999px, 31px, 0); }
  5%   { clip: rect(70px, 9999px, 85px, 0); }
  10%  { clip: rect(30px, 9999px, 15px, 0); }
  15%  { clip: rect(90px, 9999px, 90px, 0); }
  20%  { clip: rect(40px, 9999px, 12px, 0); }
  25%  { clip: rect(80px, 9999px, 70px, 0); }
  100% { clip: rect(10px, 9999px, 31px, 0); }
}

/* Nav */
nav { display: flex; align-items: center; gap: var(--s4); }
nav ul { list-style: none; display: flex; gap: 20px; }
nav a {
  text-decoration: none;
  color: var(--text-base);
  font-weight: 700;
  transition: color var(--tr);
}
nav a:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ══════════════════════════════════════════════════════════════ */
main {
  padding: 2rem 5%;
  flex: 1;
  display: flex;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   AUTH BOX (login / register)
   ══════════════════════════════════════════════════════════════ */
.auth-box {
  background: var(--bg-panel);
  padding: 2.5rem;
  border: 1px solid var(--border-red);
  width: 100%;
  max-width: 400px;
  margin: auto;
  position: relative;
  animation: systemBoot .5s cubic-bezier(.1,.9,.2,1) forwards;
}

/* Top accent line + corner dot */
.auth-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(255,59,59,.2));
  box-shadow: 0 0 14px rgba(255,59,59,.5);
}
.auth-box::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 14px; height: 14px;
  border-bottom: 2px solid var(--red);
  border-right: 2px solid var(--red);
  opacity: .5;
}

/* ══════════════════════════════════════════════════════════════
   INPUTS (global)
   ══════════════════════════════════════════════════════════════ */
input {
  width: 100%;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--border-mid);
  color: var(--text-bright) !important;
  -webkit-text-fill-color: var(--text-bright) !important;
  padding: 11px 14px;
  margin-bottom: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
  border-radius: var(--radius);
}
input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(255,59,59,.12);
}

/* Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-panel) inset !important;
  background-color: var(--bg-panel) !important;
  -webkit-text-fill-color: var(--text-bright) !important;
  caret-color: var(--red) !important;
  border: 1px solid var(--border-mid) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
input:-webkit-autofill:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 2px rgba(255,59,59,.12) !important;
}
input::selection {
  background: rgba(255,59,59,.4);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* ── PRIMARY BUTTON ── */
.btn-cyber {
  width: 100%;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 12px;
  font-family: inherit;
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: background var(--tr), box-shadow var(--tr);
  border-radius: var(--radius);
}
.btn-cyber:hover {
  background: var(--red);
  color: var(--bg);
  box-shadow: 0 0 18px rgba(255,59,59,.4);
}

/* ── TERMINAL BOX ── */
.terminal-box {
  background: var(--bg-code);
  padding: 1.5rem;
  border: 1px solid rgba(255,59,59,.18);
  font-family: 'JetBrains Mono', monospace;
  font-size: .85rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  margin-bottom: 1.5rem;
}
.prompt  { color: var(--red);        font-weight: 700; }
.command { color: var(--text-bright); }

/* ── FOOTER ── */
footer {
  padding: .9rem 5%;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── INPUT-WRAPPER (password eye) ── */
.input-wrapper { position: relative; width: 100%; margin-bottom: 1rem; }
.input-wrapper input { margin-bottom: 0; padding-right: 44px; }
.eye-icon {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  transition: color var(--tr);
  user-select: none;
}
.eye-icon:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
@keyframes systemBoot {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}
@keyframes typing      { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--red); } }
@keyframes fadeIn      { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes slideUp     { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse-red   {
  0%,100% { box-shadow: 0 0 6px rgba(255,59,59,.3); }
  50%     { box-shadow: 0 0 18px rgba(255,59,59,.6); }
}

.typing {
  overflow: hidden;
  border-right: 2px solid var(--red);
  white-space: nowrap;
  width: 0;
  color: var(--red);
  font-weight: 700;
  font-size: 1.1rem;
  animation: typing 2.5s steps(30, end) forwards, blink-caret .75s step-end infinite;
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE & TABLET RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* žádný horizontální scroll */
  html, body { overflow-x: hidden; max-width: 100%; }

  header {
    padding: .75rem 4%;
    flex-wrap: wrap;
    gap: 10px;
  }
  .brand-name {
    font-size: 1rem;
    letter-spacing: 3px;
  }
  .logo-img { height: 26px; }
  nav {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  nav ul { gap: 10px; }
  main { padding: 1.2rem 4%; overflow-x: hidden; }
  .auth-box {
    padding: 1.6rem 1.2rem;
  }
  footer {
    padding: .75rem 4%;
    text-align: center;
    font-size: .65rem;
  }
  /* globální ochrana před přetečením textu */
  p, span, div, h1, h2, h3, h4 {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  /* tabulky */
  table { display: block; overflow-x: auto; max-width: 100%; }
  /* obrázky */
  img { max-width: 100%; height: auto; }
  /* pre/code bloky — scrollovatelné, ne přetékající */
  pre { overflow-x: auto; max-width: 100%; }
}