:root {
      color-scheme: light;
      --bg: oklch(0.965 0.010 95);
      --panel: oklch(0.988 0.006 95);
      --panel-2: oklch(0.940 0.012 100);
      --line: oklch(0.805 0.014 100);
      --text: oklch(0.245 0.025 125);
      --muted: oklch(0.430 0.020 125);
      --brand: oklch(0.365 0.060 128);
      --danger: oklch(0.525 0.095 35);
      font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    }
    * { box-sizing: border-box; }
    body { background: var(--bg); color: var(--text); margin: 0; }
    a { color: var(--brand); text-decoration: none; }
    button, input { font: inherit; }
    .wrap { background: var(--panel); display: grid; grid-template-columns: minmax(420px, 0.96fr) minmax(440px, 1.04fr); min-height: 100vh; }
    .card, .grid { display: contents; }
    .register-promo { background:
      radial-gradient(circle at 18% 22%, oklch(0.705 0.095 82 / 0.30), transparent 32%),
      radial-gradient(circle at 78% 70%, oklch(0.365 0.060 128 / 0.34), transparent 34%),
      linear-gradient(135deg, oklch(0.310 0.045 128), oklch(0.205 0.025 125));
      color: oklch(0.982 0.006 95); display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 54px clamp(34px, 6vw, 76px); }
    .register-promo .brand { margin-bottom: 42px; }
    .register-promo .brand-mark { background: oklch(0.985 0.006 95); color: var(--brand); padding: 5px; }
    .register-promo p, .register-promo .boundary span { color: oklch(0.900 0.010 95); }
    .register-promo .boundary div { background: oklch(0.985 0.006 95 / 0.08); border-color: oklch(0.985 0.006 95 / 0.20); }
    .register-promo a { color: oklch(0.885 0.060 82); }
    .register-panel { align-items: center; display: flex; justify-content: center; padding: 42px clamp(24px, 5vw, 72px); }
    .register-form-card { display: grid; gap: 18px; max-width: 460px; width: 100%; }
    .brand { align-items: center; display: flex; gap: 10px; margin-bottom: 20px; }
    .brand-mark { background: var(--brand); border-radius: 10px; color: oklch(0.985 0.006 95); display: grid; height: 38px; place-items: center; width: 38px; }
    .brand-mark img { height: 100%; object-fit: contain; width: 100%; }
    h1 { font-size: clamp(30px, 2.5vw, 34px); letter-spacing: 0; line-height: 1.18; margin: 0 0 10px; text-wrap: balance; }
    h1 span { display: block; white-space: nowrap; }
    p { color: var(--muted); line-height: 1.7; margin: 0; }
    form { display: grid; gap: 12px; }
    label { color: var(--muted); display: grid; font-size: 12px; font-weight: 700; gap: 6px; }
    input { background: oklch(0.992 0.004 95); border: 1px solid var(--line); border-radius: 10px; color: var(--text); min-height: 38px; padding: 8px 10px; width: 100%; }
    button { background: var(--brand); border: 0; border-radius: 10px; color: oklch(0.985 0.006 95); cursor: pointer; font-weight: 800; min-height: 40px; white-space: nowrap; }
    button:disabled { cursor: not-allowed; opacity: 0.48; }
    input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid oklch(0.705 0.095 82); outline-offset: 3px; }
    .button-link { align-items: center; border-radius: 10px; display: inline-flex; font-weight: 800; justify-content: center; min-height: 42px; padding: 0 16px; text-align: center; }
    .button-link.primary { background: var(--brand); color: oklch(0.985 0.006 95); }
    .button-link.secondary { background: var(--panel); border: 1px solid var(--line); color: var(--brand); }
    .registration-unavailable { display: grid; gap: 16px; }
    .registration-unavailable h2 { font-size: 28px; letter-spacing: 0; line-height: 1.25; margin: 0; }
    .state-kicker { color: var(--brand); font-size: 12px; font-weight: 800; }
    .registration-actions { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
    .hidden { display: none !important; }
    .boundary { display: grid; gap: 10px; margin-top: 18px; }
    .boundary div { background: oklch(0.955 0.014 100); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
    .boundary strong { display: block; margin-bottom: 4px; }
    .boundary span { color: var(--muted); font-size: 12px; }
    .message { color: var(--danger); font-size: 13px; min-height: 18px; }
    @media (max-width: 900px) { .wrap, .grid { grid-template-columns: 1fr; } .register-promo { min-height: auto; padding: 30px 24px; } .register-promo .brand { margin-bottom: 26px; } .register-panel { padding: 30px 18px; } }
    @media (max-width: 420px) { .registration-actions { grid-template-columns: 1fr; } }