/* ========================================
   EDATABIT — Tech Login (placeholder)
   Korzysta z tokenów i warstw z styles.css
   ======================================== */

.tech-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}

.tech-main {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: var(--sp-md);
  display: flex;
  justify-content: center;
}

/* ── Karta logowania ── */
.tech-card {
  width: min(380px, 100%);
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      170deg,
      oklch(0.14 0.03 260 / 0.7) 0%,
      oklch(0.08 0.02 250 / 0.6) 100%
    );
  backdrop-filter: blur(32px) saturate(1.3);
  border: 1px solid oklch(0.30 0.06 260 / 0.2);
  box-shadow:
    0 24px 80px oklch(0 0 0 / 0.45),
    0 4px 16px oklch(0 0 0 / 0.25),
    inset 0 1px 0 oklch(1 0 0 / 0.06);
}

/* ── Logo sekcja ── */
.tech-card__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.tech-card__icon {
  color: var(--c-accent);
  opacity: 0.7;
}

.tech-card__title {
  text-align: center;
  line-height: 1.2;
}

.tech-card__brand {
  display: block;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--c-text), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tech-card__subtitle {
  display: block;
  font-family: var(--f-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-top: 0.25rem;
}

/* ── Formularz ── */
.tech-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.tech-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tech-field__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.tech-field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.tech-field__icon {
  position: absolute;
  left: 0.75rem;
  color: oklch(0.45 0.04 260);
  pointer-events: none;
}

.tech-field__input {
  width: 100%;
  padding: 0.6rem 0.75rem 0.6rem 2.25rem;
  font-family: var(--f-body);
  font-size: 0.8rem;
  color: var(--c-text-dim);
  background: oklch(0.08 0.02 260 / 0.6);
  border: 1px solid oklch(0.25 0.04 260 / 0.4);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: not-allowed;
  opacity: 0.6;
  transition: border-color 200ms ease;
}

.tech-field__input::placeholder {
  color: oklch(0.35 0.02 260);
}

/* ── Przycisk ── */
.tech-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 1rem;
  margin-top: 0.5rem;
  font-family: var(--f-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: oklch(0.40 0.03 260);
  background: oklch(0.15 0.03 260 / 0.5);
  border: 1px solid oklch(0.25 0.04 260 / 0.3);
  border-radius: var(--radius-sm);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 200ms ease;
}

/* ── Link powrotny ── */
.tech-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--c-text-dim);
  transition: color 200ms ease;
}

.tech-back:hover {
  color: var(--c-accent);
}

/* ── Responsive ── */
@media (max-width: 400px) {
  .tech-card {
    border-radius: var(--radius-md);
  }
}