/* 🌸 Onimai Auth — Sakura-Dark Design-Tokens (single source of truth).
   Wird von onicenter genutzt; kann von groupler/ai 1:1 eingebunden werden. */
:root {
  --oni-bg:        #0c0812;
  --oni-bg2:       #160d24;
  --oni-pink:      #ff8fcf;
  --oni-pink-2:    #ff5fa8;
  --oni-violet:    #c08bff;
  --oni-violet-2:  #8a5cff;
  --oni-text:      #f3e9fb;
  --oni-muted:     #b6a6cc;
  --oni-card:      rgba(26, 17, 38, 0.72);
  --oni-card-bd:   rgba(255, 143, 207, 0.22);
  --oni-input-bg:  rgba(14, 9, 20, 0.65);
  --oni-input-bd:  rgba(192, 139, 255, 0.28);
  --oni-danger:    #ff6b8a;
  --oni-ok:        #69e6a6;
  --oni-radius:    20px;
  --oni-glow:      0 0 0 1px rgba(255,143,207,.25), 0 18px 60px rgba(138, 92, 255, .25);
  --oni-font:      'Poppins', 'Segoe UI', Roboto, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--oni-font); color: var(--oni-text);
  background: var(--oni-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: hidden; position: relative;
}
/* Aurora-Gradient-Hintergrund */
.oni-aurora { position: fixed; inset: -20% -10% auto -10%; height: 90vh; z-index: 0; filter: blur(70px); opacity: .55; pointer-events: none; }
.oni-aurora::before, .oni-aurora::after {
  content: ''; position: absolute; border-radius: 50%;
}
.oni-aurora::before { width: 46vw; height: 46vw; left: 8%; top: 4%;
  background: radial-gradient(circle at 30% 30%, var(--oni-pink), transparent 60%); animation: oni-float 16s ease-in-out infinite; }
.oni-aurora::after { width: 42vw; height: 42vw; right: 6%; top: 10%;
  background: radial-gradient(circle at 60% 40%, var(--oni-violet-2), transparent 60%); animation: oni-float 19s ease-in-out infinite reverse; }
@keyframes oni-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2%, 4%) scale(1.08); } }

/* Sakura-Petals */
.oni-petals { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.oni-petal { position: absolute; top: -8%; width: 14px; height: 14px; background: linear-gradient(135deg, var(--oni-pink), var(--oni-violet));
  border-radius: 80% 0 80% 0; opacity: .5; animation: oni-fall linear infinite; }
@keyframes oni-fall { 0% { transform: translateY(-10vh) rotate(0); opacity:0; } 10%{opacity:.6;} 100% { transform: translateY(110vh) rotate(540deg); opacity:.1; } }

/* Glass-Card */
.oni-card {
  position: relative; z-index: 2; width: 100%; max-width: 420px;
  background: var(--oni-card); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--oni-card-bd); border-radius: var(--oni-radius);
  box-shadow: var(--oni-glow); padding: 34px 30px;
}
.oni-brand { text-align: center; font-weight: 800; font-size: 26px; letter-spacing: .3px;
  background: linear-gradient(90deg, var(--oni-pink), var(--oni-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.oni-title { text-align: center; font-size: 19px; font-weight: 700; margin: 14px 0 4px; color: #ffe2f4; }
.oni-sub { text-align: center; font-size: 13px; color: var(--oni-muted); margin: 0 0 22px; line-height: 1.5; }

.oni-field { margin-bottom: 14px; }
.oni-field label { display: block; font-size: 12px; color: var(--oni-muted); margin: 0 0 6px 4px; }
.oni-input {
  width: 100%; padding: 13px 14px; font-size: 14px; color: var(--oni-text);
  background: var(--oni-input-bg); border: 1px solid var(--oni-input-bd);
  border-radius: 13px; outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.oni-input:focus { border-color: var(--oni-pink); box-shadow: 0 0 0 3px rgba(255,143,207,.18); }
.oni-input::placeholder { color: #7a6c92; }

.oni-btn {
  width: 100%; padding: 13px 16px; margin-top: 6px; font-size: 15px; font-weight: 700; cursor: pointer;
  color: #1a0d16; border: none; border-radius: 13px; font-family: inherit;
  background: linear-gradient(135deg, var(--oni-pink), var(--oni-violet));
  box-shadow: 0 8px 26px rgba(255,95,168,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: transform .12s, box-shadow .15s, opacity .15s;
}
.oni-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(138,92,255,.45); }
.oni-btn:active { transform: translateY(0); }
.oni-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.oni-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 13px; }
.oni-link { color: var(--oni-pink); text-decoration: none; font-weight: 600; }
.oni-link:hover { text-decoration: underline; }
.oni-foot { text-align: center; margin-top: 18px; font-size: 12px; color: var(--oni-muted); }

.oni-msg { display: none; margin: 0 0 14px; padding: 11px 13px; border-radius: 11px; font-size: 13px; line-height: 1.45; }
.oni-msg.show { display: block; }
.oni-msg.err { background: rgba(255,107,138,.12); border: 1px solid rgba(255,107,138,.35); color: #ffb3c2; }
.oni-msg.ok  { background: rgba(105,230,166,.12); border: 1px solid rgba(105,230,166,.32); color: #bff5d8; }

/* 6-Felder Code-Eingabe */
.oni-code { display: flex; gap: 9px; justify-content: center; margin: 8px 0 16px; }
.oni-code input {
  width: 48px; height: 58px; text-align: center; font-size: 24px; font-weight: 800; color: #fff;
  background: var(--oni-input-bg); border: 1px solid var(--oni-input-bd); border-radius: 13px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.oni-code input:focus { border-color: var(--oni-pink); box-shadow: 0 0 0 3px rgba(255,143,207,.18); }
.oni-resend { text-align: center; font-size: 13px; color: var(--oni-muted); margin-top: 4px; }
.oni-resend button { background: none; border: none; color: var(--oni-pink); font-weight: 700; cursor: pointer; font-size: 13px; font-family: inherit; padding: 0; }
.oni-resend button[disabled] { color: #6f6280; cursor: not-allowed; }
@media (max-width: 420px) { .oni-code input { width: 42px; height: 52px; font-size: 21px; } .oni-card { padding: 28px 20px; } }