:root {
  --kr-navy: #09142d;
  --kr-blue: #01699f;
  --kr-cyan: #01accd;
  --kr-ink: #172033;
  --kr-muted: #5b667a;
  --kr-line: #d8e1ea;
  --kr-surface: #ffffff;
  --kr-soft: #eef6fa;
  --kr-danger: #b42318;
  --kr-success: #087a55;
}

.kr-account-page {
  min-height: calc(100vh - 76px);
  padding: clamp(2.5rem, 7vw, 5rem) 1rem;
  background:
    radial-gradient(circle at 85% 8%, rgba(1, 172, 205, .16), transparent 24rem),
    linear-gradient(145deg, #f7fbfd 0%, #eef5f8 52%, #fff 100%);
  color: var(--kr-ink);
}
.kr-account-shell { width: min(100%, 36rem); margin: 0 auto; }
.kr-account-shell--wide { width: min(100%, 72rem); }
.kr-account-heading { margin-bottom: 1.5rem; text-align: center; }
.kr-account-eyebrow { margin: 0 0 .55rem; color: var(--kr-blue); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.kr-account-heading h1 { margin: 0; color: var(--kr-navy); font-size: clamp(1.9rem, 5vw, 2.65rem); line-height: 1.1; font-weight: 750; }
.kr-account-heading p { margin: .8rem auto 0; max-width: 35rem; color: var(--kr-muted); line-height: 1.65; }
.kr-account-card { overflow: hidden; border: 1px solid var(--kr-line); border-radius: 1rem; background: var(--kr-surface); box-shadow: 0 20px 55px rgba(9, 20, 45, .11); }
.kr-account-card__bar { padding: .85rem 1.5rem; background: var(--kr-navy); color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.kr-account-card__body { padding: clamp(1.25rem, 5vw, 2.25rem); }
.kr-account-banner { margin: 0 0 1.5rem; padding: .9rem 1rem; border-left: 4px solid var(--kr-cyan); border-radius: .25rem; background: var(--kr-soft); color: #304056; font-size: .92rem; line-height: 1.6; }
.kr-account-form { display: grid; gap: 1.15rem; }
.kr-account-form-grid { display: grid; gap: 1.15rem; }
.kr-account-field--wide { grid-column: 1 / -1; }
.kr-account-paths { display: grid; gap: .8rem; margin: 0 0 1.25rem; }
.kr-account-path { padding: 1rem; border: 1px solid var(--kr-line); border-radius: .65rem; background: #f8fafc; }
.kr-account-path h2 { margin: 0; color: var(--kr-navy); font-size: 1rem; font-weight: 800; }
.kr-account-path p { margin: .35rem 0 .7rem; color: var(--kr-muted); font-size: .82rem; line-height: 1.5; }
.kr-account-path div { display: flex; flex-wrap: wrap; gap: .45rem .8rem; }
.kr-account-path a { color: var(--kr-blue); font-size: .82rem; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.kr-account-field label { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .42rem; color: var(--kr-navy); font-size: .9rem; font-weight: 700; }
.kr-account-field input:not([type="checkbox"]), .kr-account-field select, .kr-account-field textarea {
  width: 100%; min-height: 46px; border: 1px solid #aebdca; border-radius: .42rem; padding: .7rem .8rem; background: #fff; color: var(--kr-ink);
}
.kr-account-field input:focus, .kr-account-field select:focus, .kr-account-field textarea:focus, .kr-account-button:focus-visible, .kr-account-link:focus-visible { outline: 3px solid rgba(1,172,205,.38); outline-offset: 2px; border-color: var(--kr-blue); }
.kr-account-help { margin: .4rem 0 0; color: var(--kr-muted); font-size: .8rem; line-height: 1.5; }
.kr-account-error { margin: .4rem 0 0; color: var(--kr-danger); font-size: .85rem; font-weight: 650; }
.kr-account-alert { margin-bottom: 1rem; padding: .85rem 1rem; border-radius: .45rem; background: #fff1f0; color: var(--kr-danger); font-size: .9rem; }
.kr-account-button { display: inline-flex; min-height: 46px; width: 100%; align-items: center; justify-content: center; border: 0; border-radius: .45rem; padding: .75rem 1rem; background: var(--kr-blue); color: #fff; font-weight: 750; text-decoration: none; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.kr-account-button:hover { background: #005781; transform: translateY(-1px); }
.kr-account-button--secondary { border: 1px solid #aebdca; background: #fff; color: var(--kr-navy); }
.kr-account-button--secondary:hover { background: var(--kr-soft); }
.kr-account-actions { display: grid; gap: .7rem; margin-top: 1.25rem; }
.kr-account-links { margin-top: 1.4rem; color: var(--kr-muted); font-size: .9rem; text-align: center; }
.kr-account-link { color: var(--kr-blue); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kr-account-info { display: inline-grid; width: 1.12rem; height: 1.12rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--kr-blue); font-size: .72rem; font-style: normal; font-weight: 900; cursor: help; }
.kr-account-list { margin: 1rem 0 0; padding-left: 1.15rem; color: var(--kr-muted); font-size: .88rem; line-height: 1.65; }
.kr-mfa-qr { display: grid; place-items: center; margin: 0 0 1.25rem; padding: 1rem; border: 1px solid var(--kr-line); border-radius: .6rem; background: #fff; }
.kr-mfa-qr img { display: block; width: min(100%, 14rem); height: auto; }
.kr-mfa-secret { margin: 0 0 1.25rem; padding: .8rem 1rem; border: 1px solid var(--kr-line); border-radius: .45rem; background: #f8fafc; }
.kr-mfa-secret__label { display: block; margin-bottom: .35rem; color: var(--kr-navy); font-size: .8rem; font-weight: 800; }
.kr-mfa-secret code { display: block; overflow-wrap: anywhere; color: var(--kr-ink); font-size: .92rem; letter-spacing: .04em; }
.kr-mfa-secret p { margin: .45rem 0 0; color: var(--kr-muted); font-size: .8rem; line-height: 1.5; }
.kr-password-rules { margin: -.35rem 0 0; padding: .8rem 1rem; border: 1px solid var(--kr-line); border-radius: .45rem; background: #f8fafc; }
.kr-password-rules p { margin: 0 0 .35rem; color: var(--kr-navy); font-size: .8rem; font-weight: 800; }
.kr-password-rules ul { margin: 0; padding-left: 1.1rem; color: var(--kr-muted); font-size: .8rem; line-height: 1.55; }
.kr-password-rules [data-valid="true"] { color: var(--kr-success); font-weight: 700; }
.kr-password-rules [data-valid="false"] { color: var(--kr-danger); }
@media (min-width: 520px) { .kr-account-actions--split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) {
  .kr-account-paths { grid-template-columns: repeat(3, 1fr); }
  .kr-account-paths--compact { grid-template-columns: repeat(2, 1fr); }
  .kr-account-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .kr-account-button { transition: none; } }