body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0a0a0f;
      padding: 20px;
      overflow-x: hidden;
    }

    .auth-wrapper {
      width: 100%;
      max-width: 440px;
    }

    /* ── Brand ── */
    .auth-brand {
      text-align: center;
      margin-bottom: 36px;
    }
    .auth-brand .brand-mark {
      display: inline-block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 2.2rem;
      color: #8b7cf7;
      margin-bottom: 10px;
      animation: brandFloat 4s ease-in-out infinite;
    }
    @keyframes brandFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }
    .auth-brand h1 {
      font-family: 'Noto Serif SC', serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: #d4d4e8;
      letter-spacing: .04em;
      margin-bottom: 4px;
    }
    .auth-brand p {
      font-family: 'JetBrains Mono', monospace;
      font-size: .6rem;
      color: #7e7ea8;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin: 0;
    }

    /* ── Tab Switch ── */
    .auth-tabs {
      display: flex;
      border: 1px solid #1e1e38;
      margin-bottom: -1px;
      position: relative;
      z-index: 1;
    }
    .auth-tab {
      flex: 1;
      padding: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: .72rem;
      letter-spacing: .08em;
      text-align: center;
      cursor: pointer;
      border: none;
      background: #080810;
      color: #5a5a80;
      transition: all .2s ease;
      text-transform: uppercase;
    }
    .auth-tab:first-child { border-right: 1px solid #1e1e38; }
    .auth-tab.active {
      background: #0d0d1a;
      color: #d4d4e8;
    }
    .auth-tab:hover:not(.active) {
      color: #8e8eb8;
      background: #0b0b16;
    }

    /* ── Frame ── */
    .auth-frame {
      background: #0d0d1a;
      border: 1px solid #1e1e38;
      padding: 36px 32px;
      position: relative;
    }

    /* ── Message ── */
    .auth-msg {
      padding: 10px 14px;
      font-size: .76rem;
      margin-bottom: 20px;
      display: none;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: .02em;
      line-height: 1.4;
    }
    .auth-msg.error {
      display: block;
      background: rgba(248,113,113,.1);
      border: 1px solid rgba(248,113,113,.3);
      color: #f87171;
    }
    .auth-msg.success {
      display: block;
      background: rgba(74,222,128,.1);
      border: 1px solid rgba(74,222,128,.3);
      color: #4ade80;
    }

    /* ── Form ── */
    .auth-form-group {
      margin-bottom: 18px;
    }
    .auth-form-group label {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: .65rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #8e8eb8;
      margin-bottom: 8px;
    }
    .auth-form-group label .required {
      color: #f87171;
      margin-left: 2px;
    }
    .auth-form-group input {
      width: 100%;
      padding: 12px 14px;
      font-family: 'Inter', 'PingFang SC', sans-serif;
      font-size: .85rem;
      background: #080810;
      color: #d0d0e0;
      border: 1px solid #1e1e38;
      transition: border-color .15s ease;
      box-sizing: border-box;
    }
    .auth-form-group input:focus {
      outline: none;
      border-color: #8b7cf7;
    }
    .auth-form-group input::placeholder {
      color: #5a5a80;
    }

    /* ── Button ── */
    .auth-btn {
      width: 100%;
      padding: 13px;
      font-family: 'Inter', 'PingFang SC', sans-serif;
      font-size: .88rem;
      font-weight: 600;
      letter-spacing: .04em;
      background: #8b7cf7;
      color: #fff;
      border: none;
      cursor: pointer;
      transition: all .15s ease;
      margin-top: 6px;
    }
    .auth-btn:hover {
      background: #9d8fff;
      transform: translateY(-1px);
    }
    .auth-btn:active {
      transform: scale(.98);
    }

    /* ── Footer Link ── */
    .auth-switch-hint {
      text-align: center;
      margin-top: 22px;
      font-size: .76rem;
      color: #5a5a80;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: .04em;
    }
    .auth-switch-hint a {
      color: #8b7cf7;
      cursor: pointer;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color .15s ease;
    }
    .auth-switch-hint a:hover {
      border-bottom-color: #8b7cf7;
    }

    /* ── Demo Hint ── */
    .auth-hint {
      text-align: center;
      font-size: .7rem;
      color: #7e7ea8;
      margin: 12px 0 0;
      opacity: .8;
    }

    /* ── Back Link ── */
    .auth-back {
      text-align: center;
      margin-top: 28px;
      font-family: 'JetBrains Mono', monospace;
      font-size: .62rem;
      color: #5a5a80;
      letter-spacing: .06em;
    }
    .auth-back a {
      color: #7e7ea8;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: all .15s ease;
    }
    .auth-back a:hover {
      color: #d4d4e8;
      border-bottom-color: #7e7ea8;
    }

    /* ── Breath Dot ── */
    .breath-dot {
      display: inline-block;
      width: 4px; height: 4px;
      background: #8b7cf7;
      border-radius: 50%;
      animation: breathPulse 2.5s ease-in-out infinite;
      vertical-align: middle;
      margin: 0 6px;
    }
    @keyframes breathPulse {
      0%,100%{opacity:.2;box-shadow:0 0 0 0 rgba(139,124,247,.4)}
      50%{opacity:1;box-shadow:0 0 8px 3px rgba(139,124,247,.25)}
    }

    /* ── Responsive ── */
    @media (max-width: 480px) {
      .auth-frame { padding: 24px 20px; }
      .auth-brand h1 { font-size: 1.2rem; }
      .auth-brand .brand-mark { font-size: 1.8rem; }
      .auth-tab { padding: 12px; font-size: .68rem; }
      .auth-form-group input { padding: 10px 12px; font-size: .8rem; }
      .auth-btn { padding: 11px; font-size: .8rem; }
      .auth-wrapper { max-width: 100%; }
    }