/* Прозір · гейтвей — токени 1-в-1 з макета Claude Design. */

:root {
  --bg: #100e0e;
  --surface: #171414;
  --text: #f0ebe8;
  --divider: rgba(240, 235, 232, .12);
  --input-border: rgba(240, 235, 232, .16);
  --dim: rgba(240, 235, 232, .5);
  --dimmer: rgba(240, 235, 232, .35);
  --accent: #d9a84a;
  --accent-hi: #eec471;
  --brand: #a8752e;

  --font-body: Manrope, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
:root { color-scheme: dark; }

body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding: 20px; box-sizing: border-box;
}

[hidden] { display: none !important; }

/* Лого й напис — велике, по центру, на фоні сторінки (поза рамкою
   вікна авторизації). stroke-width у SVG навмисно НЕ зменшено проти
   маленької версії — це той самий "3"/"3.2" у тих самих одиницях
   viewBox, тож при збільшенні розміру товщина лінії росте разом з
   іконкою пропорційно й колір лишається таким же насиченим, а не
   "вицвітає" через занадто тонку відносну товщину лінії. */
#login {
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.brand-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.brand-eye-big { width: 104px; height: 104px; color: var(--brand); }
.brand-word-big {
  font-family: var(--font-mono); font-weight: 700; font-size: 42px;
  letter-spacing: -.01em; color: var(--brand); display: flex; align-items: baseline;
}

.card {
  width: 360px; max-width: 100%; background: var(--surface); border: 1px solid var(--divider);
  border-radius: 4px; padding: 32px 28px 28px;
  display: flex; flex-direction: column; gap: 22px;
}

.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-eye { width: 30px; height: 30px; flex: none; color: var(--brand); }
.brand-lockup.small .brand-eye { width: 22px; height: 22px; }
.brand-word {
  font-family: var(--font-mono); font-weight: 700; font-size: 21px;
  letter-spacing: -.01em; color: var(--brand); display: flex; align-items: baseline;
}
.brand-lockup.small .brand-word { font-size: 17px; }
.cursor {
  display: inline-block; width: .5em; height: .82em; background: var(--brand);
  margin-left: .1em; transform: translateY(.06em); animation: prozir-blink 1.1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; opacity: .7; } }
@keyframes prozir-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12px; color: var(--dim); }
.field input {
  height: 38px; background: var(--bg); border: 1px solid var(--input-border);
  border-radius: 3px; padding: 0 11px; font-family: var(--font-mono); font-size: 13px;
  color: var(--text); outline: none;
}
.field input:focus { border-color: var(--accent); }

.btn {
  height: 40px; background: var(--accent); color: var(--bg); border: none;
  border-radius: 3px; font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .12s;
}
.btn:hover { background: var(--accent-hi); }
.btn:disabled { opacity: .5; cursor: default; }

.error {
  font-size: 12.5px; color: #e0736d; min-height: 1em;
}

/* ── Вибір розділу ── */

.chooser { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.chooser .who { font-size: 13px; color: var(--dimmer); }
.chooser .cards { display: flex; gap: 20px; }

.section-card {
  width: 220px; height: 220px; background: var(--surface); border: 1px solid var(--divider);
  border-radius: 4px; padding: 22px; display: flex; flex-direction: column;
  justify-content: space-between; cursor: pointer; text-decoration: none; color: inherit;
  transition: background .12s, border-color .12s;
}
.section-card svg { flex: none; }
.section-card .title { font-size: 19px; font-weight: 600; }
.section-card .subtitle { font-size: 12px; color: var(--dim); margin-top: 6px; }

.section-card.tenders { border-color: rgba(217, 168, 74, .35); }
.section-card.tenders .title { color: var(--accent); }
.section-card.tenders:hover { background: #1d1917; border-color: var(--accent); }

.section-card.declarations { border-color: rgba(224, 69, 63, .35); }
.section-card.declarations .title { color: #e0453f; }
.section-card.declarations:hover { background: #1d1616; border-color: #e0453f; }

.section-card.disabled {
  opacity: .4; cursor: not-allowed; pointer-events: none;
}
.section-card.disabled .subtitle { color: rgba(240, 235, 232, .6); }

/* ── Мобільні екрани ── */
@media (max-width: 480px) {
  .chooser .cards { flex-direction: column; width: 100%; align-items: center; }
  .section-card { width: 100%; max-width: 260px; }
}