/* ============================================================
   KWSM — Admin login page (production, framework-free)
   Drop-in stylesheet. Scoped under .kwsm-login so it touches
   nothing else in app.css. Relies only on core :root tokens
   that already exist in app.css (--p, --b, --border-base,
   --radius-lg, --shadow-focus); brand gradients are written
   literally to avoid any missing-token dependency.
   Inherits the app's system-ui font for parity with production.
   ============================================================ */

.kwsm-login {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: linear-gradient(180deg, #070a0f, #0b0f14);
  color: #e7eef7;
  overflow: auto;
}
.kwsm-login *, .kwsm-login *::before, .kwsm-login *::after { box-sizing: border-box; }
.kwsm-login ::selection { background: rgba(39,170,225,.28); }

/* ---------------- Brand panel (inline-start = right in RTL) -------- */
.kwsm-login-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #2a1140 0%, #4a1d63 38%, #123a5a 100%);
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kwsm-login-brand::before {
  content: "";
  position: absolute;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(39,170,225,.45), transparent 65%);
  top: -120px; inset-inline-start: -80px; filter: blur(14px);
  animation: kwsm-drift1 13s ease-in-out infinite alternate;
}
.kwsm-login-brand::after {
  content: "";
  position: absolute;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(106,44,134,.55), transparent 65%);
  bottom: -120px; inset-inline-end: -60px; filter: blur(14px);
  animation: kwsm-drift2 16s ease-in-out infinite alternate;
}
.kwsm-login-brandtop {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 13px;
}
.kwsm-login-mark {
  width: 54px; height: 54px; flex: 0 0 54px;
  border-radius: 14px;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  padding: 7px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.kwsm-login-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kwsm-login-wordmark { display: flex; flex-direction: column; line-height: 1.12; }
.kwsm-login-wordmark strong { font-size: 22px; font-weight: 900; letter-spacing: .04em; }
.kwsm-login-wordmark span { font-size: 12px; color: rgba(231,238,247,.72); font-weight: 500; }

.kwsm-login-brandmid { position: relative; z-index: 2; max-width: 400px; }
.kwsm-login-brandmid h2 {
  font-size: 34px; font-weight: 900; line-height: 1.25;
  letter-spacing: -.01em; margin: 0 0 16px; text-wrap: balance;
}
.kwsm-login-brandmid p {
  font-size: 15px; color: rgba(231,238,247,.78); line-height: 1.7; margin: 0;
}

.kwsm-login-features {
  position: relative; z-index: 2;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
}
.kwsm-login-features li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: rgba(231,238,247,.9);
}
.kwsm-login-features .ic {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; color: #cfe9fb;
  backdrop-filter: blur(4px);
}

/* ---------------- Form panel -------------------------------------- */
.kwsm-login-formwrap {
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
}
.kwsm-login-form { width: 100%; max-width: 380px; }

.kwsm-login-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--b, #27AAE1); margin: 0;
}
.kwsm-login-h1 {
  font-size: 30px; font-weight: 900; letter-spacing: -.02em;
  line-height: 1.1; margin: 10px 0 8px;
}
.kwsm-login-sub { font-size: 15px; color: #9fb0c3; line-height: 1.6; margin: 0 0 26px; }

.kwsm-login-field { display: block; margin-bottom: 16px; }
.kwsm-login-field > label {
  display: block; font-size: 13px; font-weight: 700; color: #e7eef7; margin-bottom: 8px;
}
.kwsm-login-input-wrap { position: relative; display: flex; align-items: center; }
.kwsm-login-input-wrap input {
  width: 100%;
  padding: 13px 44px 13px 14px;        /* room for trailing icon (inline-end) */
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border-base, rgba(255,255,255,.10));
  background: #0b1220;
  color: #e7eef7;
  font: inherit; font-size: 15px;
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.kwsm-login-input-wrap input::placeholder { color: rgba(159,176,195,.6); }
.kwsm-login-input-wrap input:hover { border-color: rgba(255,255,255,.16); }
.kwsm-login-input-wrap input:focus {
  border-color: rgba(39,170,225,.55);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(39,170,225,.20));
}
.kwsm-login-field.has-toggle .kwsm-login-input-wrap input { padding-inline-start: 46px; }

.kwsm-login-iicon {
  position: absolute; inset-inline-end: 14px;
  display: flex; color: #9fb0c3; opacity: .8; pointer-events: none;
}
.kwsm-login-input-wrap input:focus ~ .kwsm-login-iicon { color: var(--b, #27AAE1); opacity: 1; }

.kwsm-login-toggle {
  position: absolute; inset-inline-start: 8px;
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 10px; color: #9fb0c3; cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.kwsm-login-toggle:hover { color: #e7eef7; background: rgba(255,255,255,.05); }
.kwsm-login-toggle .icon-off { display: none; }
.kwsm-login-toggle.is-shown .icon-on { display: none; }
.kwsm-login-toggle.is-shown .icon-off { display: flex; }

.kwsm-login-field.invalid .kwsm-login-input-wrap input {
  border-color: rgba(255,107,107,.6); background: rgba(255,107,107,.05);
}
.kwsm-login-field.invalid .kwsm-login-input-wrap { animation: kwsm-shake .35s ease; }
.kwsm-login-err {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #ffd1d1; margin-top: 7px;
}

/* options row */
.kwsm-login-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 22px;
}
.kwsm-login-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.kwsm-login-check input { position: absolute; opacity: 0; pointer-events: none; }
.kwsm-login-check .box {
  width: 19px; height: 19px; flex: 0 0 19px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.16); background: #0b1220;
  display: flex; align-items: center; justify-content: center;
  transition: all .14s ease;
}
.kwsm-login-check .box svg { opacity: 0; transform: scale(.5); transition: all .14s ease; }
.kwsm-login-check input:checked + .box {
  background: linear-gradient(135deg, var(--p, #6A2C86), var(--b, #27AAE1)); border-color: transparent;
}
.kwsm-login-check input:checked + .box svg { opacity: 1; transform: scale(1); }
.kwsm-login-check input:focus-visible + .box { box-shadow: var(--shadow-focus, 0 0 0 3px rgba(39,170,225,.20)); }
.kwsm-login-check .txt { font-size: 13px; color: #9fb0c3; }
.kwsm-login-link {
  font-size: 13px; font-weight: 700; color: var(--b, #27AAE1);
  text-decoration: none; transition: color .14s ease;
}
.kwsm-login-link:hover { color: #5cc5f0; }

/* primary button */
.kwsm-login-btn {
  position: relative; width: 100%; min-height: 50px;
  border: none; border-radius: var(--radius-lg, 12px);
  background: linear-gradient(90deg, var(--p, #6A2C86), var(--b, #27AAE1));
  color: #fff; font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 8px 22px rgba(39,170,225,.22);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.kwsm-login-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-120%);
}
.kwsm-login-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(39,170,225,.34); }
.kwsm-login-btn:hover::after { animation: kwsm-sheen .7s ease; }
.kwsm-login-btn:active { transform: translateY(0); }
.kwsm-login-btn .arrow { display: inline-flex; transition: transform .14s ease; }
.kwsm-login-btn:hover .arrow { transform: translateX(-4px); }

/* security badge */
.kwsm-login-secwrap { display: flex; justify-content: center; margin-top: 22px; }
.kwsm-login-secbadge {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(39,170,225,.08); border: 1px solid rgba(39,170,225,.30);
  color: #bfe9fb; font-size: 13px; font-weight: 500;
}
.kwsm-login-secbadge svg { color: var(--b, #27AAE1); }
.kwsm-login-secbadge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2ecc71;
  animation: kwsm-pulse 2.4s infinite;
}

/* server-side error alert */
.kwsm-login-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(255,107,107,.14); border: 1px solid rgba(255,107,107,.35);
  color: #ffd1d1; font-size: 13px;
}
.kwsm-login-alert svg { flex: 0 0 auto; margin-top: 1px; }

/* entrance: resting state visible, gentle rise enhancement only */
.kwsm-login-form > *, .kwsm-login form > * { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .kwsm-login form > * { animation: kwsm-rise .5s ease backwards; }
  .kwsm-login form > *:nth-child(1) { animation-delay: .05s; }
  .kwsm-login form > *:nth-child(2) { animation-delay: .12s; }
  .kwsm-login form > *:nth-child(3) { animation-delay: .19s; }
  .kwsm-login form > *:nth-child(4) { animation-delay: .26s; }
  .kwsm-login form > *:nth-child(5) { animation-delay: .33s; }
  .kwsm-login form > *:nth-child(6) { animation-delay: .40s; }
}

@keyframes kwsm-sheen { to { transform: translateX(120%); } }
@keyframes kwsm-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes kwsm-pulse { 0%{box-shadow:0 0 0 0 rgba(46,204,113,.5)} 70%{box-shadow:0 0 0 6px rgba(46,204,113,0)} 100%{box-shadow:0 0 0 0 rgba(46,204,113,0)} }
@keyframes kwsm-drift1 { from { transform: translate(0,0); } to { transform: translate(40px,30px); } }
@keyframes kwsm-drift2 { from { transform: translate(0,0); } to { transform: translate(-36px,-28px); } }
@keyframes kwsm-rise { from { transform: translateY(7px); } to { transform: translateY(0); } }

/* ---------------- Responsive collapse ----------------------------- */
@media (max-width: 900px) {
  .kwsm-login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .kwsm-login-brand { padding: 28px 24px; gap: 18px; }
  .kwsm-login-brandmid h2 { font-size: 24px; margin-bottom: 10px; }
  .kwsm-login-features { display: none; }
  .kwsm-login-formwrap { padding: 36px 24px 48px; align-items: flex-start; }
}
@media (max-width: 480px) {
  .kwsm-login-brandmid p { display: none; }
  .kwsm-login-formwrap { padding: 28px 18px 40px; }
  .kwsm-login-h1 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .kwsm-login *, .kwsm-login *::before, .kwsm-login *::after { animation: none !important; }
}

/* ---------------- UI-LOGIN-02 visual centering refinements --------
   RTL flow is preserved at the page level; only visual title/feature
   groups whose own group should sit centered within their section
   are realigned. Form labels/inputs/rows keep their RTL layout. */

/* Form-panel title block (eyebrow / heading / subhead) */
.kwsm-login .kwsm-login-eyebrow,
.kwsm-login .kwsm-login-h1,
.kwsm-login .kwsm-login-sub { text-align: center; }

/* Brand-panel header: logo + wordmark cluster */
.kwsm-login .kwsm-login-brandtop { justify-content: center; }

/* Brand-panel intro block: center the bounded text block in the panel */
.kwsm-login .kwsm-login-brandmid { text-align: center; margin-inline: auto; }

/* Brand-panel feature list: center each row's icon+text cluster */
.kwsm-login .kwsm-login-features li { justify-content: center; }