/* ═══════════════════════════════════════════════════════
   WOLLMILCHSAU — Login / Register
   Industrial Swiss Minimalism
   ═══════════════════════════════════════════════════════ */

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

:root {
  --white: #FFFFFF;
  --off-white: #F2F2F2;
  --light-grey: #E8E8E8;
  --mid-grey: #CCCCCC;
  --dark-grey: #999999;
  --charcoal: #555555;
  --near-black: #222222;
  --black: #111111;
  --pure-black: #000000;
  --accent: #FF4500;
  --font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', Courier, monospace;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--off-white);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: var(--white);
}

.hidden { display: none !important; }

/* Container */
.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card */
.login-card {
  width: 380px;
  background: var(--white);
  border: 1px solid var(--black);
}

/* Header */
.login-header {
  padding: 32px 32px 20px;
  border-bottom: 1px solid var(--black);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.brand-mark {
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
}

.brand-name {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--pure-black);
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--dark-grey);
}

/* Tabs */
.login-tabs {
  display: flex;
  border-bottom: 1px solid var(--black);
}

.login-tab {
  flex: 1;
  padding: 10px 16px;
  background: var(--off-white);
  border: none;
  border-right: 1px solid var(--black);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--dark-grey);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-tab:last-child {
  border-right: none;
}

.login-tab:hover {
  background: var(--light-grey);
  color: var(--black);
}

.login-tab.active {
  background: var(--white);
  color: var(--black);
}

.login-tab.active .tab-idx {
  color: var(--accent);
}

.tab-idx {
  font-size: 8px;
  color: var(--mid-grey);
  font-weight: 400;
}

/* Form */
.login-form {
  padding: 24px 32px 28px;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--dark-grey);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.form-input {
  width: 100%;
  background: var(--off-white);
  border: 1px solid var(--black);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.form-input::placeholder {
  color: var(--mid-grey);
  letter-spacing: 0.5px;
}

.form-input:focus {
  border-color: var(--accent);
  background: var(--white);
}

.form-error {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--accent);
  padding: 8px 0;
  margin-bottom: 4px;
}

.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--black);
  border: none;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}

.form-submit:hover {
  background: var(--accent);
}

.form-submit:active {
  transform: scale(0.99);
}

/* Footer */
.login-footer {
  padding: 12px 32px;
  border-top: 1px solid var(--light-grey);
  display: flex;
  justify-content: center;
  gap: 8px;
}

.footer-coord {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--mid-grey);
  letter-spacing: 0.5px;
}

.footer-sep {
  font-size: 8px;
  color: var(--light-grey);
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mid-grey); }

/* ═══ NIGHT MODE ═══ */
@media (prefers-color-scheme: dark) {
  :root {
    --white: #1A1A1A;
    --off-white: #141414;
    --light-grey: #2A2A2A;
    --mid-grey: #444444;
    --dark-grey: #777777;
    --charcoal: #AAAAAA;
    --near-black: #E0E0E0;
    --black: #E8E8E8;
    --pure-black: #F2F2F2;
  }
}