:root {
      --bg: #050505;
      --bg2: #0f0f0f;
      --white: #f5f0ea;
      --cream: #e8dfd0;
      --accent: #c8a97e;
      --accent2: #ff4d2e;
      --dim: #666;
      --border: rgba(255,255,255,0.07);
      --err: #ff4d2e;
      --font-display: 'Cormorant Garamond', serif;
      --font-ui: 'Syne', sans-serif;
      --font-mono: 'DM Mono', monospace;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--font-ui);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    body::before {
      content: '';
      position: fixed; inset: 0;
      background: radial-gradient(ellipse at 60% 40%, rgba(200,169,126,0.06) 0%, transparent 60%);
      pointer-events: none;
    }

    .auth-wrap {
      width: 100%;
      max-width: 440px;
      position: relative;
      z-index: 1;
    }

    .auth-logo {
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 6px;
      color: var(--white);
      text-decoration: none;
      display: block;
      margin-bottom: 48px;
    }
    .auth-logo span { color: var(--accent); }

    .auth-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      padding: 48px;
    }

    .auth-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 40px;
      border-bottom: 1px solid var(--border);
    }
    .auth-tab {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--dim);
      background: none;
      border: none;
      padding: 12px 0;
      margin-right: 32px;
      cursor: pointer;
      position: relative;
      transition: color 0.2s;
    }
    .auth-tab::after {
      content: '';
      position: absolute;
      bottom: -1px; left: 0; right: 0;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0);
      transition: transform 0.3s;
    }
    .auth-tab.active { color: var(--white); }
    .auth-tab.active::after { transform: scaleX(1); }

    .auth-form { display: none; }
    .auth-form.active { display: block; }

    .auth-heading {
      font-family: var(--font-display);
      font-size: 38px;
      font-weight: 300;
      color: var(--white);
      margin-bottom: 8px;
      line-height: 1.1;
    }
    .auth-sub {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--dim);
      letter-spacing: 1px;
      margin-bottom: 32px;
    }

    .field { margin-bottom: 20px; }
    .field label {
      display: block;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 8px;
    }
    .field input {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      color: var(--white);
      padding: 13px 16px;
      font-family: var(--font-ui);
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s;
    }
    .field input:focus { border-color: var(--accent); }
    .field input.invalid { border-color: var(--err); }
    .field-err {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--err);
      margin-top: 5px;
      display: block;
    }

    .btn-auth {
      width: 100%;
      background: var(--accent);
      color: #000;
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      border: none;
      padding: 16px;
      cursor: pointer;
      margin-top: 8px;
      position: relative;
      overflow: hidden;
      transition: opacity 0.2s;
    }
    .btn-auth:hover { opacity: 0.88; }
    .btn-auth:disabled { opacity: 0.4; cursor: not-allowed; }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 24px 0;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--dim);
      letter-spacing: 2px;
    }
    .auth-divider::before, .auth-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }

    .btn-google {
      width: 100%;
      background: transparent;
      color: var(--white);
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      border: 1px solid var(--border);
      padding: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: border-color 0.2s, color 0.2s;
    }
    .btn-google:hover { border-color: var(--accent); color: var(--accent); }
    .btn-google svg { width: 16px; height: 16px; flex-shrink: 0; }

    .global-msg {
      padding: 12px 16px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 1px;
      margin-bottom: 20px;
      display: none;
    }
    .global-msg.error { background: rgba(255,77,46,0.1); border: 1px solid rgba(255,77,46,0.3); color: var(--err); }
    .global-msg.success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #4ade80; }

    .reset-link {
      display: block;
      text-align: right;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--dim);
      text-decoration: none;
      margin-top: -12px;
      margin-bottom: 20px;
      letter-spacing: 1px;
      cursor: pointer;
      transition: color 0.2s;
    }
    .reset-link:hover { color: var(--accent); }