/* ===== Rakushka Auth Design ===== */

@media (scripting: enabled) {
  body { opacity: 0; background: #07070d; }
  body.rk-auth-body { opacity: 1; transition: opacity 0.15s ease; }
}

.rk-auth-body {
  margin: 0;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #f4f3ff;
  background: #07070d;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 880px) { .rk-auth-body { overflow-y: auto; } }

.rk-bg-stage {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(800px 600px at 12% 12%, rgba(139,108,255,.22), transparent 60%),
    radial-gradient(700px 600px at 88% 86%, rgba(255,122,168,.16), transparent 60%),
    radial-gradient(900px 700px at 70% 20%, rgba(106,139,255,.10), transparent 60%),
    linear-gradient(180deg, #0a0a14 0%, #06060c 100%);
}
.rk-bg-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 3px 3px;
}

.rk-auth-page {
  display: grid;
  grid-template-columns: minmax(380px,1fr) minmax(440px,1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
@media (max-width: 880px) {
  .rk-auth-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
  }
}

.rk-brand-panel {
  position: relative; overflow: hidden;
  padding: 56px 64px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, rgba(139,108,255,.20), rgba(255,122,168,.14));
  border-right: 1px solid rgba(255,255,255,.07);
}
.rk-brand-panel::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(500px 400px at 20% 30%, rgba(139,108,255,.25), transparent 60%),
    radial-gradient(420px 360px at 80% 80%, rgba(255,122,168,.20), transparent 60%);
}
@media (max-width: 880px) { .rk-brand-panel { padding: 24px 22px 28px; min-height: 0; } }
@media (max-width: 600px) { .rk-brand-panel { padding: 20px 18px 22px; } }

.rk-brand-shell {
  position: absolute; right: -80px; top: 50%;
  width: 540px; height: 540px;
  z-index: 0; opacity: .55;
  filter: drop-shadow(0 12px 28px rgba(255,90,141,.18)) drop-shadow(0 0 18px rgba(139,108,255,.18));
}
.rk-brand-shell img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 880px) { .rk-brand-shell { width: 140px; height: 140px; right: -20px; top: auto; bottom: -10px; opacity: 0.4; } }
@media (max-width: 600px) { .rk-brand-shell { display: none; } }

.rk-brand-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.rk-brand-logo { width: 40px; height: 40px; }
.rk-brand-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(255,90,141,.45)); }
.rk-brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.01em; background: linear-gradient(180deg,#fff,#c9c7e3); -webkit-background-clip: text; background-clip: text; color: transparent; }

.rk-brand-body { position: relative; z-index: 1; max-width: 420px; }
.rk-brand-headline { font-size: clamp(34px,4vw,50px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; margin: 0 0 18px; color: #fff; }
.rk-brand-headline em { font-style: normal; background: linear-gradient(120deg,#ff9ec3 0%,#b69eff 50%,#6a8bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rk-brand-sub { font-size: 15px; line-height: 1.55; color: #c9c7e3; margin: 0 0 24px; max-width: 360px; }
.rk-brand-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); color: #c9c7e3; font-size: 13px; font-weight: 500; }
.rk-dot { width: 6px; height: 6px; border-radius: 50%; background: #2ed47a; box-shadow: 0 0 0 3px rgba(46,212,122,.18); flex-shrink: 0; }
.rk-brand-footer { position: relative; z-index: 1; font-size: 13px; color: #8e8bb1; }

.rk-form-panel { display: flex; align-items: center; justify-content: center; padding: 48px 56px; overflow-y: auto; }
@media (max-width: 880px) {
  .rk-form-panel {
    padding: 24px 20px;
    padding-left: max(20px, env(safe-area-inset-left, 0));
    padding-right: max(20px, env(safe-area-inset-right, 0));
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0));
    align-items: flex-start;
  }
}
.rk-form-wrap { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 22px; }

.rk-form-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; color: #fff; margin: 0 0 6px; }
.rk-form-head p { font-size: 15px; color: #8e8bb1; margin: 0; }

.rk-tabs { display: inline-flex; padding: 4px; gap: 2px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; align-self: flex-start; }
.rk-tab { padding: 8px 18px; border: none; background: transparent; color: #8e8bb1; font: inherit; font-size: 14px; font-weight: 600; border-radius: 9px; cursor: pointer; transition: .15s; text-decoration: none; display: inline-block; }
.rk-tab:hover { color: #c9c7e3; }
.rk-tab-active { color: #fff !important; background: linear-gradient(135deg,rgba(139,108,255,.55),rgba(255,122,168,.45)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(139,108,255,.25); cursor: default; }

.rk-field { display: flex; flex-direction: column; gap: 6px; }
.rk-field + .rk-field { margin-top: 12px; }
.rk-field-label { font-size: 12px; font-weight: 600; color: #8e8bb1; letter-spacing: .04em; text-transform: uppercase; }
.rk-input-wrap { position: relative; display: flex; align-items: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; transition: .15s; }
.rk-input-wrap:focus-within { border-color: rgba(139,108,255,.5); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(139,108,255,.12); }
.rk-input { flex: 1; background: transparent; border: none; outline: none; padding: 12px 14px; font: inherit; font-size: 14px; color: #fff; }
.rk-input::placeholder { color: #5a5878; }
.rk-input-suffix { padding: 0 14px; font-size: 12px; font-weight: 600; color: #8b6cff; cursor: pointer; user-select: none; white-space: nowrap; }
.rk-input-suffix:hover { color: #ff9ec3; }

.rk-form-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.rk-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13px; color: #c9c7e3; }
.rk-check input[type="checkbox"] { display: none; }
.rk-check-box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); display: grid; place-items: center; transition: .12s; flex-shrink: 0; }
.rk-check input[type="checkbox"]:checked + .rk-check-box { background: linear-gradient(135deg,#8b6cff,#ff7aa8); border-color: transparent; }
.rk-check-box svg { opacity: 0; transition: opacity .12s; }
.rk-check input[type="checkbox"]:checked + .rk-check-box svg { opacity: 1; }

.rk-link { font-size: 13px; font-weight: 500; color: #8b6cff; text-decoration: none; transition: .12s; }
.rk-link:hover { color: #ff9ec3; }

.rk-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 8px; border: none; border-radius: 14px; background: linear-gradient(135deg,#9b7dff,#ff7aa8); color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: .15s; box-shadow: 0 10px 28px rgba(139,108,255,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.rk-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(139,108,255,.55); }

.rk-divider { display: flex; align-items: center; gap: 12px; color: #5a5878; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.rk-divider::before, .rk-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07); }

.rk-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.rk-soc { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; color: #f4f3ff; font: inherit; font-size: 14px; font-weight: 500; cursor: not-allowed; opacity: .55; }
.rk-soc-ico { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.rk-g { background: linear-gradient(135deg,#ea4335,#4285f4); }
.rk-d { background: #5865f2; }

.rk-form-foot { text-align: center; font-size: 14px; color: #8e8bb1; padding-top: 14px; }

.rk-state { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; border: 1px solid; }
.rk-state-icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.rk-state-error { background: rgba(255,90,90,.10); border-color: rgba(255,90,90,.35); color: #ffb3b3; }
.rk-state-error .rk-state-icon { background: rgba(255,90,90,.3); color: #fff; }
.rk-state-error ul { margin: 0; padding: 0; list-style: none; }
.rk-state-error ul li + li { margin-top: 4px; }

/* ===== Mobile fixes: prevent iOS zoom on focus, compact brand text ===== */
@media (max-width: 880px) {
  .rk-input,
  .rk-form-panel input[type="text"],
  .rk-form-panel input[type="email"],
  .rk-form-panel input[type="password"],
  .rk-form-panel input[type="search"],
  .rk-form-panel input[type="tel"],
  .rk-form-panel input[type="number"],
  .rk-form-panel input[type="url"] {
    font-size: 16px;
  }
  .rk-brand-headline { font-size: clamp(26px, 6vw, 36px); margin-bottom: 12px; }
  .rk-brand-sub { font-size: 14px; margin-bottom: 16px; }
  .rk-brand-body { max-width: 100%; }
  .rk-brand-footer { display: none; }
  .rk-form-wrap { max-width: 100%; gap: 18px; }
  .rk-form-head h1 { font-size: 24px; }
  .rk-form-head p { font-size: 14px; }
  .rk-submit { height: 50px; }
}