/* ============================================================================
   Kizuna Logic — Authentication experience (auth.css)
   Premium SaaS sign-in: split layout · glassmorphism · animated gradients.
   Scoped under .kz-auth so it never collides with the app stylesheet.
   ========================================================================== */

.kz-auth{
  /* ---- Brand palette (CSS variables for theming) ---- */
  --kz-primary:#4F46E5;      /* indigo  */
  --kz-secondary:#2563EB;    /* blue    */
  --kz-accent:#06B6D4;       /* cyan    */
  --kz-bg:#F8FAFC;           /* light surface */
  --kz-ink:#0F172A;          /* slate-900 text */
  --kz-muted:#64748B;        /* slate-500 */
  --kz-card:rgba(255,255,255,.72);
  --kz-card-brd:rgba(255,255,255,.65);
  --kz-field:#ffffff;
  --kz-field-brd:#e2e8f0;
  --kz-shadow:0 30px 60px -20px rgba(15,23,42,.28), 0 8px 24px -12px rgba(79,70,229,.18);
  --kz-glass-brd:rgba(255,255,255,.5);

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color:var(--kz-ink);
  height:100vh; height:100dvh;   /* exactly one viewport — no page scroll */
  position:relative;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---- Dark mode (driven by the app's html[data-theme]) ---- */
html[data-theme="dark"] .kz-auth{
  --kz-bg:#0F172A;
  --kz-ink:#E5EAF2;
  --kz-muted:#94A3B8;
  --kz-card:rgba(20,28,44,.62);
  --kz-card-brd:rgba(148,163,184,.16);
  --kz-field:#0d1626;
  --kz-field-brd:#27324a;
  --kz-shadow:0 34px 70px -22px rgba(0,0,0,.7), 0 8px 28px -14px rgba(79,70,229,.45);
  --kz-glass-brd:rgba(148,163,184,.18);
}

/* ---- Animated mesh-gradient background ---- */
.kz-auth__bg{ position:fixed; inset:0; z-index:0; background:var(--kz-bg); overflow:hidden; }
.kz-auth__bg::before,
.kz-auth__bg::after{
  content:""; position:absolute; width:60vw; height:60vw; max-width:820px; max-height:820px;
  border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform;
}
.kz-auth__bg::before{
  top:-18%; left:-10%;
  background:radial-gradient(circle at 30% 30%, var(--kz-primary), transparent 62%);
  animation:kz-drift1 22s ease-in-out infinite alternate;
}
.kz-auth__bg::after{
  bottom:-22%; right:-12%;
  background:radial-gradient(circle at 60% 60%, var(--kz-accent), transparent 60%);
  animation:kz-drift2 26s ease-in-out infinite alternate;
}
.kz-auth__bg .blob{
  position:absolute; top:34%; left:46%; width:42vw; height:42vw; max-width:560px; max-height:560px;
  border-radius:50%; filter:blur(80px); opacity:.4;
  background:radial-gradient(circle, var(--kz-secondary), transparent 60%);
  animation:kz-drift3 30s ease-in-out infinite alternate;
}
html[data-theme="dark"] .kz-auth__bg::before{ opacity:.4; }
html[data-theme="dark"] .kz-auth__bg::after{ opacity:.38; }

/* ---- Layout grid ---- */
.kz-auth__grid{
  position:relative; z-index:1; height:100%;
  display:grid; grid-template-columns:1.05fr .95fr;
}
@media (max-width:980px){ .kz-auth__grid{ grid-template-columns:1fr; } }

/* ---- Theme toggle (top-right) ---- */
.kz-theme-toggle{
  position:fixed; top:20px; right:22px; z-index:5;
  width:42px; height:42px; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  color:var(--kz-ink); background:var(--kz-card); border:1px solid var(--kz-glass-brd);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .15s ease, box-shadow .15s ease;
}
.kz-theme-toggle:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(79,70,229,.5); }

/* ============================ LEFT: brand ============================ */
.kz-brand{
  position:relative; height:100%; overflow:hidden;
  padding:clamp(26px,4.2vh,52px) clamp(34px,4vw,60px);
  display:flex; flex-direction:column;
  animation:kz-fade-up .7s ease both;
}
.kz-brand .kz-logo{ flex:0 0 auto; }
/* middle block flexes to fill the space between logo (top) and features (bottom) */
.kz-mid{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(10px,2.2vh,22px); padding:clamp(8px,2vh,18px) 0; }
@media (max-width:980px){ .kz-brand{ display:none; } }

.kz-logo{ display:flex; align-items:center; gap:13px; font-weight:800; font-size:1.4rem; letter-spacing:-.02em; }
.kz-logo img{ width:46px; height:46px; border-radius:13px; box-shadow:0 10px 26px -10px rgba(79,70,229,.6); }
.kz-logo .lite{ font-weight:500; color:var(--kz-muted); }

.kz-hero h1{
  font-size:clamp(1.7rem, 2.6vw + .4vh, 2.65rem); font-weight:800; line-height:1.1; letter-spacing:-.03em; margin:0 0 12px;
}
.kz-hero h1 .grad{
  background:linear-gradient(100deg, var(--kz-primary), var(--kz-secondary) 45%, var(--kz-accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  background-size:200% auto; animation:kz-gradient 6s linear infinite;
}
.kz-hero p{ font-size:1.05rem; color:var(--kz-muted); line-height:1.6; max-width:460px; margin:0; }

/* feature cards — compact 3-across row, pinned to the bottom */
.kz-feats{ flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:540px; }
.kz-feat{
  display:flex; flex-direction:column; gap:9px; padding:14px 15px; border-radius:16px;
  background:var(--kz-card); border:1px solid var(--kz-glass-brd);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 30px -22px rgba(15,23,42,.4);
  animation:kz-fade-up .7s ease both;
}
.kz-feat:nth-child(1){ animation-delay:.05s; }
.kz-feat:nth-child(2){ animation-delay:.14s; }
.kz-feat:nth-child(3){ animation-delay:.23s; }
.kz-feat:hover{ transform:translateY(-3px); transition:transform .18s ease; }
.kz-feat .ic{
  flex:0 0 38px; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.05rem;
  background:linear-gradient(135deg, var(--kz-primary), var(--kz-accent));
  box-shadow:0 8px 18px -8px rgba(79,70,229,.7);
}
.kz-feat .t{ font-weight:700; font-size:.86rem; line-height:1.25; letter-spacing:-.01em; }
.kz-feat .s{ font-size:.76rem; color:var(--kz-muted); line-height:1.35; }
@media (max-height:680px){ .kz-feat .s{ display:none; } }

/* floating illustration — scales to fit the middle block, never causes scroll */
.kz-illus{ position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; }
.kz-illus svg{ width:auto; max-width:100%; height:100%; max-height:38vh; display:block; overflow:visible; }
@media (max-height:620px){ .kz-illus{ display:none; } }
.kz-float{ animation:kz-float 7s ease-in-out infinite; transform-origin:center; }
.kz-float.d1{ animation-delay:-1.6s; } .kz-float.d2{ animation-delay:-3.2s; } .kz-float.d3{ animation-delay:-4.6s; }
.kz-dash{ animation:kz-rise 6s ease-in-out infinite; }
.kz-spark{ animation:kz-pulse 3.4s ease-in-out infinite; }
.kz-draw{ stroke-dasharray:6 8; animation:kz-dash 2.4s linear infinite; }

/* ============================ RIGHT: form ============================ */
.kz-panel{ height:100%; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:32px 26px; }
.kz-card{
  width:100%; max-width:430px; padding:clamp(26px,3.4vh,38px) clamp(26px,3vw,38px);
  border-radius:24px;
  background:var(--kz-card); border:1px solid var(--kz-card-brd);
  backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:var(--kz-shadow);
  animation:kz-fade-up .6s ease both .08s;
}
/* centered variant — for register / forgot / reset (single column on the gradient) */
.kz-authc{ position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:34px 20px; overflow-y:auto; }
.kz-authc .kz-card{ animation:kz-fade-up .6s ease both; }
.kz-authc.wide .kz-card{ max-width:480px; }
.kz-card__brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.18rem; letter-spacing:-.01em; margin-bottom:16px; }
.kz-card__brand img{ width:40px; height:40px; border-radius:11px; box-shadow:0 8px 20px -10px rgba(79,70,229,.6); }
.kz-card__brand .lite{ font-weight:500; color:var(--kz-muted); }
.kz-card .kz-cta{ margin-top:16px; }
/* Bootstrap form controls inside the glass card pick up the app stylesheet; just space them */
.kz-card .form-label{ font-weight:600; font-size:.85rem; margin-bottom:6px; }
.kz-card .btn-kz{ height:50px; border-radius:14px; font-weight:700; }

.kz-card__logo{ display:none; }
@media (max-width:980px){ .kz-card__logo{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.2rem; margin-bottom:18px; }
  .kz-card__logo img{ width:40px; height:40px; border-radius:11px; } }

.kz-card h2{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; }
.kz-card .sub{ color:var(--kz-muted); font-size:.95rem; margin:0 0 26px; }

/* Document Master portal — small identity chip above the heading */
.kz-doc-chip{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  padding:6px 13px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.01em;
  color:var(--kz-primary);
  background:linear-gradient(120deg, rgba(79,70,229,.12), rgba(6,182,212,.12));
  border:1px solid rgba(79,70,229,.22);
}
.kz-doc-chip .bi{ font-size:.92rem; }
@media (max-width:980px){ .kz-doc-chip{ display:none; } }  /* the mobile logo already says it */
html[data-theme="dark"] .kz-doc-chip{
  color:#C7D2FE; background:linear-gradient(120deg, rgba(79,70,229,.22), rgba(6,182,212,.16));
  border-color:rgba(148,163,184,.24);
}

.kz-field{ margin-bottom:18px; }
.kz-field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:7px; color:var(--kz-ink); }
.kz-input-wrap{ position:relative; }
.kz-input-wrap > .bi{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--kz-muted); font-size:1.05rem; pointer-events:none; }
.kz-input{
  width:100%; height:56px; border-radius:14px; padding:0 16px 0 46px;
  font-size:.98rem; color:var(--kz-ink);
  background:var(--kz-field); border:1.5px solid var(--kz-field-brd);
  transition:border-color .15s ease, box-shadow .2s ease, background .2s ease;
  outline:none;
}
.kz-input::placeholder{ color:var(--kz-muted); opacity:.7; }
.kz-input:focus{
  border-color:var(--kz-primary);
  box-shadow:0 0 0 4px rgba(79,70,229,.16), 0 8px 20px -12px rgba(79,70,229,.5);
}
.kz-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border:none; background:transparent; cursor:pointer;
  color:var(--kz-muted); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.kz-eye:hover{ color:var(--kz-primary); background:rgba(79,70,229,.08); }

.kz-row{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 22px; font-size:.86rem; }
.kz-check{ display:flex; align-items:center; gap:8px; color:var(--kz-muted); cursor:pointer; user-select:none; }
.kz-check input{ width:17px; height:17px; accent-color:var(--kz-primary); cursor:pointer; }
.kz-link{ color:var(--kz-secondary); font-weight:600; text-decoration:none; }
.kz-link:hover{ text-decoration:underline; }

.kz-btn{
  position:relative; width:100%; height:54px; border:none; border-radius:14px; cursor:pointer;
  font-size:1rem; font-weight:700; color:#fff; letter-spacing:.01em;
  background:linear-gradient(120deg, var(--kz-primary), var(--kz-secondary) 55%, var(--kz-accent));
  background-size:180% auto;
  box-shadow:0 14px 30px -12px rgba(79,70,229,.65);
  transition:transform .14s ease, box-shadow .2s ease, background-position .4s ease;
  display:flex; align-items:center; justify-content:center; gap:9px; overflow:hidden;
}
.kz-btn:hover{ transform:translateY(-2px); background-position:right center; box-shadow:0 18px 38px -12px rgba(79,70,229,.75); }
.kz-btn:active{ transform:translateY(0); }
.kz-btn:focus-visible{ outline:3px solid rgba(6,182,212,.5); outline-offset:2px; }

.kz-divider{ display:flex; align-items:center; gap:12px; color:var(--kz-muted); font-size:.8rem; margin:22px 0 18px; }
.kz-divider::before, .kz-divider::after{ content:""; flex:1; height:1px; background:var(--kz-field-brd); }

.kz-cta{ text-align:center; font-size:.92rem; color:var(--kz-muted); }
.kz-cta a{ color:var(--kz-primary); font-weight:700; text-decoration:none; }
.kz-cta a:hover{ text-decoration:underline; }
.kz-fineprint{ text-align:center; font-size:.76rem; color:var(--kz-muted); margin-top:20px; }

/* ============================ keyframes ============================ */
@keyframes kz-fade-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes kz-gradient{ to{ background-position:200% center; } }
@keyframes kz-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes kz-rise{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes kz-pulse{ 0%,100%{ opacity:.4; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.12); } }
@keyframes kz-dash{ to{ stroke-dashoffset:-28; } }
@keyframes kz-drift1{ to{ transform:translate(60px,40px) scale(1.1); } }
@keyframes kz-drift2{ to{ transform:translate(-50px,-30px) scale(1.12); } }
@keyframes kz-drift3{ to{ transform:translate(40px,-50px) scale(1.08); } }

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .kz-auth *{ animation:none !important; transition:none !important; }
}