/* ============================================================
   Bringázol¿ — admin felület
   ============================================================ */

:root {
  --bg:        #0b0b0c;
  --bg-2:      #121214;
  --ink:       #f2efe9;
  --ink-dim:   #8d8a85;
  --accent:    #ff5c1a;
  --line:      rgba(242,239,233,.14);
  --line-soft: rgba(242,239,233,.07);
  --danger:    #ff5c5c;

  --display: 'Anton', Impact, sans-serif;
  --body:    'Archivo', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --pad: clamp(18px, 4vw, 56px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 3rem);
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.05;
}
h2 {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}

.quiet {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .06em; color: var(--ink-dim);
  transition: color .3s;
}
.quiet:hover { color: var(--accent); }

.msg {
  font-family: var(--mono); font-size: .7rem;
  color: var(--ink-dim); min-height: 1.2em;
}
.msg.err { color: #ff7a5c; }
.msg.ok  { color: #6fd08c; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
  transition: background .3s, transform .3s var(--ease), opacity .3s;
}
.btn:hover { background: #ff7038; transform: translateY(-2px); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.ghost {
  background: none; color: var(--ink-dim);
  border: 1px solid var(--line);
}
.btn.ghost:hover { background: none; color: var(--ink); border-color: var(--ink-dim); }

/* ============ BELÉPÉS ============ */
.gate { min-height: 100vh; display: grid; place-items: center; padding: var(--pad); }
.gate[hidden] { display: none; }
.gate-box {
  width: min(100%, 380px);
  background: var(--bg-2); border: 1px solid var(--line);
  padding: clamp(26px, 5vw, 38px);
  display: flex; flex-direction: column; gap: 14px;
}
.gate-mark {
  font-family: var(--display); font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: .01em;
}
.gate-mark i, .bar-mark i { color: var(--accent); font-style: normal; }
.gate-box h1 { font-size: 1.5rem; }
.gate-box p { font-size: .86rem; color: var(--ink-dim); }
.gate-box input, .gate-box .btn { width: 100%; }
.gate-box .quiet { text-align: center; margin-top: 4px; }

input[type="password"] {
  padding: 13px 14px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); font: inherit; font-size: .95rem;
}
input[type="password"]:focus { outline: none; border-color: var(--accent); }

/* ============ VÁZ ============ */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--pad);
  background: rgba(11,11,12,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.bar-mark { font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; }
.bar-actions { display: flex; gap: 18px; align-items: center; }

.wrap { padding: clamp(30px, 6vh, 64px) var(--pad) 100px; max-width: 1100px; margin: 0 auto; }
.lead { margin-top: 12px; color: var(--ink-dim); max-width: 60ch; font-size: .95rem; }

.panel {
  margin-top: clamp(30px, 5vh, 52px);
  padding-top: clamp(22px, 3vh, 32px);
  border-top: 1px solid var(--line-soft);
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.count { font-family: var(--mono); font-size: .7rem; color: var(--ink-dim); }
.panel-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.panel-actions[hidden] { display: none; }

/* ============ FELTÖLTÉS ============ */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  margin-top: 18px; padding: clamp(28px, 6vw, 52px) 20px;
  border: 1px dashed var(--line); background: var(--bg-2);
  cursor: pointer;
  transition: border-color .3s, background .3s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: #17171a; }
.drop-title { font-family: var(--mono); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.drop-sub { font-size: .8rem; color: var(--ink-dim); }

.queue {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px; margin-top: 16px;
}
.queue:empty { display: none; }
.queue figure { position: relative; background: var(--bg-2); }
.queue img { width: 100%; aspect-ratio: 1; object-fit: cover; opacity: .8; }
.queue .x {
  position: absolute; top: 5px; right: 5px;
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  border-radius: 50%; background: rgba(11,11,12,.8);
  border: 1px solid var(--line); font-size: 1rem;
}
.queue .x:hover { border-color: var(--danger); color: var(--danger); }
/* A kép rövid leírása — ezt mondja fel a képernyőolvasó, és ezt
   indexeli a Google, ezért itt kérjük el, nem utólag. */
.queue .alt {
  width: 100%; padding: 7px 8px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-top: none;
  font: inherit; font-size: .72rem;
}
.queue .alt:focus { outline: none; border-color: var(--accent); }

/* A hosszabb leírás — ezt olvassa az ügyfél, amikor a weboldalon
   rákattint a képre. Nem kötelező kitölteni. */
.queue .leiras {
  display: block; width: 100%; padding: 7px 8px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-top: none;
  font: inherit; font-size: .72rem; line-height: 1.45;
  resize: vertical;
}
.queue .leiras:focus { outline: none; border-color: var(--accent); }
.queue .leiras::placeholder { color: var(--ink-dim); }

/* ============ AKTUALITÁS ============
   Egy mező, alatta ugyanaz a doboz, ami a weboldalon megjelenik —
   a nagy betűn rögtön látszik, ha túl hosszúra sikerült a szöveg. */
.flash-input {
  display: block; width: 100%; margin-top: 18px;
  padding: 13px 14px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line);
  font: inherit; font-size: .95rem; line-height: 1.5;
  resize: vertical;
}
.flash-input:focus { outline: none; border-color: var(--accent); }
.flash-input::placeholder { color: var(--ink-dim); }

.flash-preview {
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 92, 26, .38);
  border-left: 3px solid var(--accent);
  background: linear-gradient(118deg, rgba(255, 92, 26, .16), rgba(255, 92, 26, .04));
}
.flash-preview[hidden] { display: none; }
.flash-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.flash-tag::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.flash-text {
  margin-top: 12px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.04; text-transform: uppercase; letter-spacing: .005em;
  overflow-wrap: break-word;
}

/* Kulcs megjegyzése — kis, halk sor a belépődobozban */
.remember {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--ink-dim); cursor: pointer;
}
.remember input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* ============ KÉSZLET RÁCS ============ */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin-top: 16px;
}
.card { position: relative; background: var(--bg-2); overflow: hidden; }
.card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.card .del {
  position: absolute; inset: auto 0 0 0;
  padding: 10px; text-align: center;
  background: rgba(11,11,12,.82);
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
  transition: background .25s, color .25s;
}
.card .del:hover { background: var(--danger); color: #fff; }
.card.busy { opacity: .4; pointer-events: none; }

@media (max-width: 480px) {
  .grid  { grid-template-columns: repeat(2, 1fr); }
  .queue { grid-template-columns: repeat(2, 1fr); }
  .panel-actions .btn { flex: 1; }
}