[data-ek-theme="dark"] {
  color-scheme: dark;
  --ek-color-background: #0b0f19;
  --ek-color-surface: #121826;
  --ek-color-surface-muted: #171f2f;
  --ek-color-border: #263143;
  --ek-color-border-strong: #37445a;
  --ek-color-text-primary: #f8fafc;
  --ek-color-text-secondary: #a7b0c0;
  --ek-color-text-disabled: #6b7280;
  --ek-color-primary-subtle: #2a1b0c;
  --ek-color-text-rgb: 248, 250, 252;
}

.ek-auth-page { min-height: 100vh; margin: 0; overflow-x: hidden; font-family: var(--ek-font-family-sans); }
.ek-auth-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.75fr) minmax(29rem, 0.95fr); }
.ek-auth-skip { position: fixed; z-index: var(--ek-z-toast); inset: var(--ek-space-2) auto auto var(--ek-space-2); padding: var(--ek-space-2) var(--ek-space-4); border-radius: var(--ek-radius-sm); background: var(--ek-color-surface); color: var(--ek-color-text-primary); transform: translateY(-150%); }
.ek-auth-skip:focus { transform: translateY(0); }
.ek-auth-sidebar { position: sticky; inset-block-start: 0; display: flex; height: 100vh; overflow: hidden; flex-direction: column; padding: clamp(2rem, 4vw, 4.5rem); background: linear-gradient(145deg, #111827, #1f2937 52%, #3a230d); color: white; }
.ek-auth-sidebar::before { position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / 9%) 1px, transparent 1px); background-size: 28px 28px; content: ""; mask-image: linear-gradient(#000, transparent); }
.ek-auth-sidebar__glow { position: absolute; width: 34rem; height: 34rem; inset: 20% auto auto 30%; border-radius: 50%; background: rgb(var(--ek-color-primary-rgb) / 28%); filter: blur(100px); animation: ek-auth-glow 8s ease-in-out infinite alternate; }
.ek-auth-brand { position: relative; display: inline-flex; width: max-content; align-items: center; color: white; font-size: var(--ek-font-size-24); font-weight: var(--ek-font-weight-bold); text-decoration: none; }
.ek-auth-brand:hover { color: white; }
.ek-auth-brand span { color: var(--ek-color-primary-light); }
.ek-auth-sidebar__content { position: relative; max-width: 48rem; margin: auto; }
.ek-auth-eyebrow { display: inline-flex; align-items: center; gap: var(--ek-space-2); color: var(--ek-color-primary-light); font-size: var(--ek-font-size-12); font-weight: var(--ek-font-weight-semibold); letter-spacing: .08em; text-transform: uppercase; }
.ek-auth-sidebar__content > h2 { max-width: 43rem; margin-block: var(--ek-space-5) var(--ek-space-4); font-size: clamp(2.25rem, 4vw, 4rem); font-weight: var(--ek-font-weight-bold); letter-spacing: -.05em; line-height: 1.08; }
.ek-auth-sidebar__content > p { max-width: 39rem; color: rgb(255 255 255 / 68%); font-size: var(--ek-font-size-18); line-height: var(--ek-line-height-relaxed); }
.ek-auth-dashboard { width: min(100%, 42rem); margin-block-start: clamp(2rem, 5vh, 4rem); overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--ek-radius-lg); background: rgb(255 255 255 / 9%); box-shadow: 0 34px 70px -30px #000; backdrop-filter: blur(16px); transform: perspective(900px) rotateX(2deg) rotateY(3deg); animation: ek-auth-float 6s ease-in-out infinite; }
.ek-auth-dashboard__bar { display: flex; height: 2.8rem; align-items: center; gap: var(--ek-space-4); padding-inline: var(--ek-space-4); border-bottom: 1px solid rgb(255 255 255 / 12%); }
.ek-auth-dashboard__bar span { color: var(--ek-color-primary-light); font-weight: var(--ek-font-weight-bold); }
.ek-auth-dashboard__bar i { width: 35%; height: .55rem; margin-inline: auto; border-radius: var(--ek-radius-pill); background: rgb(255 255 255 / 12%); }
.ek-auth-dashboard__bar b { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgb(255 255 255 / 18%); }
.ek-auth-dashboard__body { display: grid; min-height: 16rem; grid-template-columns: 3.5rem 1fr; }
.ek-auth-dashboard__body aside { display: grid; align-content: start; gap: var(--ek-space-4); padding: var(--ek-space-4); border-inline-end: 1px solid rgb(255 255 255 / 10%); }
.ek-auth-dashboard__body aside i { width: 1.1rem; height: 1.1rem; border-radius: var(--ek-radius-sm); background: rgb(255 255 255 / 12%); }
.ek-auth-dashboard__body aside i:first-child { background: var(--ek-color-primary); }
.ek-auth-dashboard__body > div { padding: var(--ek-space-5); }
.ek-auth-dashboard__body small { font-weight: var(--ek-font-weight-semibold); }
.ek-auth-dashboard__body section { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ek-space-3); margin-block: var(--ek-space-4); }
.ek-auth-dashboard__body section i { height: 4rem; border-radius: var(--ek-radius-md); background: rgb(255 255 255 / 10%); }
.ek-auth-dashboard__body strong { display: inline-block; width: 58%; height: 5rem; margin-inline-end: var(--ek-space-3); border-radius: var(--ek-radius-md); background: rgb(255 255 255 / 7%); }
.ek-auth-float { position: absolute; display: flex; align-items: center; gap: var(--ek-space-3); padding: var(--ek-space-3) var(--ek-space-4); border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--ek-radius-md); background: rgb(17 24 39 / 80%); box-shadow: var(--ek-shadow-lg); backdrop-filter: blur(14px); animation: ek-auth-float 5s ease-in-out infinite reverse; }
.ek-auth-float i { color: var(--ek-color-primary-light); font-size: var(--ek-font-size-20); }
.ek-auth-float span { display: grid; }
.ek-auth-float b { font-size: var(--ek-font-size-12); }
.ek-auth-float small { color: rgb(255 255 255 / 58%); font-size: .625rem; }
.ek-auth-float--secure { inset: 48% -2rem auto auto; }
.ek-auth-float--ready { inset: auto auto 4% -2rem; }
.ek-auth-sidebar__proof { position: relative; display: flex; flex-wrap: wrap; gap: var(--ek-space-6); margin: 0; padding: 0; color: rgb(255 255 255 / 62%); font-size: var(--ek-font-size-12); list-style: none; }
.ek-auth-sidebar__proof i { margin-inline-end: var(--ek-space-2); color: var(--ek-color-primary-light); }

.ek-auth-main { display: flex; min-height: 100vh; flex-direction: column; background: var(--ek-color-background); }
.ek-auth-header { display: flex; min-height: 4.5rem; align-items: center; justify-content: flex-end; padding-inline: clamp(1.5rem, 4vw, 3.5rem); }
.ek-auth-brand--mobile { display: none; color: var(--ek-color-text-primary); }
.ek-auth-brand--mobile:hover { color: var(--ek-color-text-primary); }
.ek-auth-theme { display: inline-flex; min-height: 2.5rem; align-items: center; gap: var(--ek-space-2); padding-inline: var(--ek-space-3); border: 1px solid var(--ek-color-border); border-radius: var(--ek-radius-pill); background: var(--ek-color-surface); color: var(--ek-color-text-secondary); font-size: var(--ek-font-size-12); transition: border-color var(--ek-transition-fast), color var(--ek-transition-fast); }
.ek-auth-theme:hover, .ek-auth-theme:focus-visible { border-color: var(--ek-color-primary); color: var(--ek-color-primary); }
.ek-auth-main__content { display: grid; flex: 1; place-items: center; padding: var(--ek-space-5) clamp(1.5rem, 4vw, 4rem); }
.ek-auth-card { width: min(100%, 30rem); padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--ek-color-border); border-radius: var(--ek-radius-xl); background: rgb(255 255 255 / 86%); box-shadow: 0 24px 70px -38px rgb(17 24 39 / 38%); backdrop-filter: blur(20px); animation: ek-auth-enter .45s ease both; }
[data-ek-theme="dark"] .ek-auth-card { background: rgb(18 24 38 / 88%); }
.ek-auth-card--wide { width: min(100%, 38rem); }
.ek-auth-card__heading { margin-block-end: var(--ek-space-6); text-align: center; }
.ek-auth-card__icon { display: inline-grid; width: 3rem; height: 3rem; margin-block-end: var(--ek-space-4); place-items: center; border-radius: var(--ek-radius-md); background: var(--ek-color-primary-subtle); color: var(--ek-color-primary); font-size: var(--ek-font-size-20); }
.ek-auth-card__icon--danger { background: var(--ek-color-danger-subtle); color: var(--ek-color-danger); }
.ek-auth-card__heading h1 { margin-block-end: var(--ek-space-2); color: var(--ek-color-text-primary); font-size: clamp(var(--ek-font-size-24), 3vw, var(--ek-font-size-30)); font-weight: var(--ek-font-weight-bold); letter-spacing: -.035em; }
.ek-auth-card__heading p { margin: 0 auto; color: var(--ek-color-text-secondary); font-size: var(--ek-font-size-14); }
.ek-auth-form { display: grid; gap: var(--ek-space-5); }
.ek-auth-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ek-space-4); }
.ek-auth-field { min-width: 0; }
.ek-auth-field--full { grid-column: 1 / -1; }
.ek-auth-field > label, .ek-auth-label-row label { margin-block-end: var(--ek-space-2); color: var(--ek-color-text-primary); font-size: var(--ek-font-size-12); font-weight: var(--ek-font-weight-semibold); }
.ek-auth-label-row { display: flex; align-items: center; justify-content: space-between; }
.ek-auth-label-row a { color: var(--ek-color-primary-hover); font-size: var(--ek-font-size-12); text-decoration: none; }
.ek-auth-input { position: relative; display: flex; align-items: center; }
.ek-auth-input > i { position: absolute; inset-inline-start: var(--ek-space-3); z-index: 1; color: var(--ek-color-text-disabled); pointer-events: none; }
.ek-auth-input input, .ek-auth-input select, .ek-auth-input textarea { width: 100%; min-height: 3rem; padding: .7rem 2.75rem; border: 1px solid var(--ek-color-border-strong); border-radius: var(--ek-radius-md); background: var(--ek-color-surface); color: var(--ek-color-text-primary); font-size: var(--ek-font-size-14); outline: none; transition: border-color var(--ek-transition-fast), box-shadow var(--ek-transition-fast), transform var(--ek-transition-fast); }
.ek-auth-input select { appearance: auto; }
.ek-auth-input input::placeholder { color: var(--ek-color-text-disabled); }
.ek-auth-input input:focus, .ek-auth-input select:focus { border-color: var(--ek-color-primary); box-shadow: 0 0 0 var(--ek-focus-ring-width) var(--ek-focus-ring-color); }
.ek-auth-input button { position: absolute; inset-inline-end: var(--ek-space-2); display: inline-grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 0; border-radius: var(--ek-radius-sm); background: transparent; color: var(--ek-color-text-secondary); }
.ek-auth-input button:hover { background: var(--ek-color-surface-muted); color: var(--ek-color-primary); }
.ek-auth-field.has-error .ek-auth-input input, .ek-auth-field.has-error .ek-auth-input select { border-color: var(--ek-color-danger); animation: ek-auth-shake .3s ease; }
.ek-field-error { min-height: 1rem; margin-block-start: var(--ek-space-1); color: var(--ek-color-danger); font-size: var(--ek-font-size-12); }
.ek-field-help { display: block; margin-block-start: var(--ek-space-1); color: var(--ek-color-text-secondary); font-size: .65rem; }
.ek-field-help ul { margin: var(--ek-space-2) 0 0; padding-inline-start: var(--ek-space-5); }
.ek-caps-warning { margin-block-start: var(--ek-space-2); color: var(--ek-color-warning); font-size: var(--ek-font-size-12); }
.ek-auth-check { display: flex; align-items: flex-start; gap: var(--ek-space-2); color: var(--ek-color-text-secondary); font-size: var(--ek-font-size-12); cursor: pointer; }
.ek-auth-check input { width: 1rem; height: 1rem; margin-block-start: .1rem; accent-color: var(--ek-color-primary); }
.ek-auth-check a { color: var(--ek-color-primary-hover); }
.ek-auth-submit { position: relative; display: inline-flex; width: 100%; min-height: 3.15rem; align-items: center; justify-content: center; gap: var(--ek-space-2); overflow: hidden; border: 1px solid var(--ek-color-primary); border-radius: var(--ek-radius-md); background: var(--ek-color-primary); color: white; font-size: var(--ek-font-size-14); font-weight: var(--ek-font-weight-semibold); text-decoration: none; box-shadow: 0 10px 24px rgb(var(--ek-color-primary-rgb) / 22%); transition: background-color var(--ek-transition-fast), transform var(--ek-transition-fast), box-shadow var(--ek-transition-fast); }
.ek-auth-submit:hover, .ek-auth-submit:focus-visible { background: var(--ek-color-primary-hover); color: white; transform: translateY(-1px); box-shadow: 0 14px 28px rgb(var(--ek-color-primary-rgb) / 28%); }
.ek-auth-submit:disabled { cursor: wait; opacity: .72; transform: none; }
.ek-button-spinner { display: none; width: 1rem; height: 1rem; border: 2px solid rgb(255 255 255 / 45%); border-top-color: white; border-radius: 50%; animation: ek-auth-spin .7s linear infinite; }
.ek-auth-submit.is-loading .ek-button-spinner { display: inline-block; }
.ek-auth-submit.is-loading > i { display: none; }
.ek-auth-switch { margin-block-start: var(--ek-space-6); color: var(--ek-color-text-secondary); font-size: var(--ek-font-size-12); text-align: center; }
.ek-auth-switch a { color: var(--ek-color-primary-hover); font-weight: var(--ek-font-weight-semibold); text-decoration: none; }
.ek-social-auth { margin-block-start: var(--ek-space-6); }
.ek-social-auth__divider { display: flex; align-items: center; gap: var(--ek-space-3); color: var(--ek-color-text-disabled); font-size: .65rem; }
.ek-social-auth__divider::before, .ek-social-auth__divider::after { height: 1px; flex: 1; background: var(--ek-color-border); content: ""; }
.ek-social-auth__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ek-space-2); margin-block-start: var(--ek-space-4); }
.ek-social-auth__button { display: flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: var(--ek-space-2); border: 1px solid var(--ek-color-border); border-radius: var(--ek-radius-md); background: var(--ek-color-surface); color: var(--ek-color-text-primary); font-size: var(--ek-font-size-12); font-weight: var(--ek-font-weight-medium); text-decoration: none; transition: border-color var(--ek-transition-fast), transform var(--ek-transition-fast); }
.ek-social-auth__button:hover, .ek-social-auth__button:focus-visible { border-color: var(--ek-color-primary); color: var(--ek-color-primary-hover); transform: translateY(-1px); }
.ek-security-note, .ek-auth-info { display: flex; gap: var(--ek-space-3); margin-block-start: var(--ek-space-6); padding: var(--ek-space-3); border-radius: var(--ek-radius-md); background: var(--ek-color-surface-muted); color: var(--ek-color-text-secondary); }
.ek-security-note i, .ek-auth-info i { flex: 0 0 auto; color: var(--ek-color-success); }
.ek-security-note p, .ek-auth-info span { margin: 0; font-size: .65rem; line-height: var(--ek-line-height-relaxed); }
.ek-security-note strong { color: var(--ek-color-text-primary); }
.ek-auth-alert { display: flex; gap: var(--ek-space-3); margin-block-end: var(--ek-space-5); padding: var(--ek-space-3); border: 1px solid rgb(var(--ek-color-danger-rgb) / 25%); border-radius: var(--ek-radius-md); background: var(--ek-color-danger-subtle); color: var(--ek-color-danger); font-size: var(--ek-font-size-12); animation: ek-auth-shake .3s ease; }
.ek-auth-alert p { margin: 0; }
.ek-password-strength { margin-block-start: var(--ek-space-3); padding: var(--ek-space-3); border-radius: var(--ek-radius-md); background: var(--ek-color-surface-muted); }
.ek-password-strength__header { display: flex; justify-content: space-between; color: var(--ek-color-text-secondary); font-size: .65rem; }
.ek-password-strength__header strong { color: var(--ek-color-text-primary); }
.ek-password-strength__track { height: .3rem; margin-block: var(--ek-space-2) var(--ek-space-3); overflow: hidden; border-radius: var(--ek-radius-pill); background: var(--ek-color-border); }
.ek-password-strength__track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ek-color-danger); transition: width var(--ek-transition-base), background-color var(--ek-transition-base); }
.ek-password-strength ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ek-space-1); margin: 0; padding: 0; color: var(--ek-color-text-secondary); font-size: .6rem; list-style: none; }
.ek-password-strength li.is-valid { color: var(--ek-color-success); }
.ek-password-strength li i { margin-inline-end: var(--ek-space-1); }
.ek-auth-card--message { text-align: center; }
.ek-success-orbit { display: inline-grid; width: 5rem; height: 5rem; margin-block-end: var(--ek-space-6); place-items: center; border-radius: 50%; background: var(--ek-color-success-subtle); color: var(--ek-color-success); font-size: var(--ek-font-size-36); animation: ek-auth-success .6s ease both; }
.ek-auth-footer { display: flex; min-height: 4rem; align-items: center; justify-content: center; gap: var(--ek-space-4); padding: var(--ek-space-3); color: var(--ek-color-text-disabled); font-size: .65rem; }
.ek-auth-footer a { color: var(--ek-color-text-secondary); text-decoration: none; }
.ek-auth-toast { position: fixed; z-index: var(--ek-z-toast); inset: auto var(--ek-space-5) var(--ek-space-5) auto; padding: var(--ek-space-3) var(--ek-space-4); border-radius: var(--ek-radius-md); background: var(--ek-color-text-primary); color: var(--ek-color-surface); box-shadow: var(--ek-shadow-lg); font-size: var(--ek-font-size-12); }
.ek-auth-page :focus-visible { outline: var(--ek-focus-ring-width) solid var(--ek-focus-ring-color); outline-offset: 2px; }

@keyframes ek-auth-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ek-auth-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ek-auth-glow { to { transform: translate(4rem, 2rem) scale(1.08); } }
@keyframes ek-auth-spin { to { transform: rotate(360deg); } }
@keyframes ek-auth-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes ek-auth-success { 0% { opacity: 0; transform: scale(.7) rotate(-12deg); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }

@media (max-width: 1199.98px) { .ek-auth-layout { grid-template-columns: minmax(0, 1.45fr) minmax(27rem, 1fr); } .ek-auth-sidebar { padding: var(--ek-space-8); } .ek-auth-float { display: none; } }
@media (max-width: 991.98px) { .ek-auth-layout { grid-template-columns: minmax(0, 1.15fr) minmax(25rem, 1fr); } .ek-auth-sidebar__content > h2 { font-size: var(--ek-font-size-36); } .ek-auth-dashboard { margin-block-start: var(--ek-space-8); } }
@media (max-width: 767.98px) { .ek-auth-layout { display: block; } .ek-auth-sidebar { display: none; } .ek-auth-brand--mobile { display: inline-flex; } .ek-auth-header { justify-content: space-between; } .ek-auth-main__content { padding-block: var(--ek-space-6); } .ek-auth-card { box-shadow: var(--ek-shadow-md); } }
@media (max-width: 575.98px) { .ek-auth-header { padding-inline: var(--ek-space-4); } .ek-auth-main__content { display: block; padding: var(--ek-space-3); } .ek-auth-card { padding: var(--ek-space-5); border-radius: var(--ek-radius-lg); } .ek-auth-form__grid { grid-template-columns: 1fr; } .ek-auth-field--full { grid-column: auto; } .ek-password-strength ul { grid-template-columns: 1fr; } .ek-auth-footer { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .ek-auth-dashboard, .ek-auth-float, .ek-auth-sidebar__glow, .ek-auth-card, .ek-success-orbit { animation: none; } }
@media (forced-colors: active) { .ek-auth-sidebar { border-inline-end: 1px solid CanvasText; } .ek-auth-submit { border: 2px solid ButtonText; } }