/* ===== CSL Auth / Login ===== */

:root {
     --csl-auth-bg-1: #efe7ff;
     --csl-auth-bg-2: #d7ecff;
     --csl-auth-bg-3: #c3e5f1;

     --csl-auth-surface: rgba(255, 255, 255, 0.18);
     --csl-auth-surface-strong: rgba(255, 255, 255, 0.22);
     --csl-auth-border: rgba(255, 255, 255, 0.22);
     --csl-auth-input-bg: rgba(255, 255, 255, 0.34);
     --csl-auth-input-border: rgba(154, 176, 212, 0.34);

     --csl-auth-text: #17324d;
     --csl-auth-text-soft: #5e748d;
     --csl-auth-heading: #163256;
     --csl-auth-primary: #5b63ff;
     --csl-auth-primary-dark: #4650f2;

     --csl-auth-shadow-card:
          0 28px 70px rgba(33, 45, 70, 0.16),
          0 12px 28px rgba(33, 45, 70, 0.10),
          inset 0 1px 0 rgba(255, 255, 255, 0.20);

     --csl-auth-shadow-btn: 0 14px 28px rgba(91, 99, 255, 0.22);

     --csl-auth-radius-xl: 28px;
     --csl-auth-radius-lg: 22px;
     --csl-auth-radius-md: 16px;
     --csl-auth-radius-sm: 14px;
}

/* ===== Page-level cleanup ===== */

html,
body {
     min-height: 100%;
     background: linear-gradient(120deg, var(--csl-auth-bg-1) 0%, var(--csl-auth-bg-2) 55%, var(--csl-auth-bg-3) 100%) !important;
     color: var(--csl-auth-text);
}

body,
#page,
.site,
.site-content,
.content-area,
.site-main,
main,
article,
.page,
.post,
.entry,
.hentry,
.entry-content,
.entry-content-wrap,
.page-content,
.wp-site-blocks,
.is-layout-constrained,
.is-layout-flow,
.wp-block-post-content {
     background: transparent !important;
}

.content-area,
.site-main,
.entry-content,
.page-content,
.wp-site-blocks,
.is-layout-constrained,
.wp-block-post-content,
article,
.page,
.post,
.entry,
.hentry {
     box-shadow: none !important;
     border: 0 !important;
}

.site-main,
.entry-content,
.page-content,
.wp-block-post-content {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
}

/* ===== Full background only ===== */

.csl-auth {
     position: relative;
     min-height: 100vh;
     padding: 48px 18px;
     overflow: hidden;
     font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
     background:
          radial-gradient(circle at top left, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0) 30%),
          radial-gradient(circle at top right, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 24%),
          linear-gradient(120deg, var(--csl-auth-bg-1) 0%, var(--csl-auth-bg-2) 55%, var(--csl-auth-bg-3) 100%);
}

.csl-auth::before,
.csl-auth::after {
     content: "";
     position: absolute;
     border-radius: 999px;
     pointer-events: none;
     filter: blur(18px);
     opacity: 0.42;
}

.csl-auth::before {
     top: 60px;
     left: -50px;
     width: 220px;
     height: 220px;
     background: rgba(255, 255, 255, 0.52);
}

.csl-auth::after {
     right: -70px;
     bottom: 80px;
     width: 280px;
     height: 280px;
     background: rgba(214, 237, 255, 0.56);
}

.csl-auth--bg {
     background:
          radial-gradient(circle at top left, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0) 28%),
          radial-gradient(circle at top right, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 24%),
          linear-gradient(120deg, var(--csl-auth-bg-1) 0%, var(--csl-auth-bg-2) 55%, var(--csl-auth-bg-3) 100%);
}

/* kill extra wrapper box */
.csl-auth__wrap {
     position: relative;
     z-index: 1;
     max-width: 1220px;
     margin: 0 auto;
     padding: 0;
     border: 0;
     border-radius: 0;
     background: transparent;
     box-shadow: none;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
}

.csl-auth__grid {
     display: grid;
     grid-template-columns: 1fr;
     justify-items: center;
     align-items: center;
     min-height: calc(100vh - 96px);
}

/* ===== Login card only ===== */

.csl-auth__card {
     width: 100%;
     max-width: 500px;
     min-height: 560px;
     padding: 34px 32px 28px;
     border-radius: var(--csl-auth-radius-xl);
     border: 1px solid var(--csl-auth-border);
     background: linear-gradient(180deg, var(--csl-auth-surface-strong) 0%, var(--csl-auth-surface) 100%);
     box-shadow: var(--csl-auth-shadow-card);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     display: flex;
     flex-direction: column;
}

.csl-auth__card form {
     flex: 1;
     display: flex;
     flex-direction: column;
}

/* ===== Brand ===== */

.csl-auth__brand {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 14px;
}

.csl-auth__logo {
     width: 40px;
     height: 40px;
     border-radius: 12px;
     background: linear-gradient(180deg, var(--csl-auth-primary) 0%, var(--csl-auth-primary-dark) 100%);
     display: grid;
     place-items: center;
     color: #fff;
     font-size: 16px;
     font-weight: 800;
     letter-spacing: 0.3px;
     box-shadow: 0 14px 28px rgba(91, 99, 255, 0.20);
}

.csl-auth__title {
     margin: 0;
     font-size: 24px;
     line-height: 1.2;
     font-weight: 800;
     color: var(--csl-auth-heading);
}

.csl-auth__headline {
     margin: 8px 0 10px;
     font-size: 32px;
     font-weight: 900;
     line-height: 1.15;
     letter-spacing: -0.02em;
     color: var(--csl-auth-heading);
}

.csl-auth__subtitle {
     margin: 0 0 28px;
     color: var(--csl-auth-text-soft);
     font-size: 16px;
     line-height: 1.65;
}

/* ===== Alerts ===== */

.csl-auth__alert {
     border-radius: 14px;
     padding: 12px 14px;
     border: 1px solid transparent;
     margin: 0 0 16px;
     font-size: 14px;
     line-height: 1.5;
     font-weight: 700;
     background: rgba(255, 241, 242, 0.86);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
}

.csl-auth__alert--error {
     border-color: #fecdd3;
     color: #b42318;
}

/* ===== Fields ===== */

.csl-auth__field {
     margin-bottom: 18px;
}

.csl-auth__field label {
     display: block;
     font-weight: 800;
     font-size: 15px;
     color: var(--csl-auth-heading);
     margin-bottom: 9px;
     line-height: 1.35;
}

.csl-auth__field input[type="text"],
.csl-auth__field input[type="password"],
.csl-auth__field input[type="number"] {
     width: 100%;
     height: 52px;
     border-radius: var(--csl-auth-radius-sm);
     border: 1px solid var(--csl-auth-input-border);
     padding: 0 15px;
     background: var(--csl-auth-input-bg);
     color: var(--csl-auth-text);
     font-size: 16px;
     line-height: 1.4;
     outline: none;
     box-sizing: border-box;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.csl-auth__field input::placeholder {
     color: #7f93ad;
}

.csl-auth__field input:focus {
     border-color: rgba(91, 99, 255, 0.50);
     background: rgba(255, 255, 255, 0.44);
     box-shadow: 0 0 0 4px rgba(91, 99, 255, 0.12);
}

/* ===== Actions ===== */

.csl-auth__actions {
     margin-top: auto;
     display: flex;
     justify-content: center;
     padding-top: 16px;
}

.csl-auth__btn {
     min-width: 140px;
     height: 50px;
     padding: 0 26px;
     border-radius: 14px;
     border: 1px solid rgba(91, 99, 255, 0.18);
     background: linear-gradient(180deg, var(--csl-auth-primary) 0%, var(--csl-auth-primary-dark) 100%);
     color: #fff;
     font-size: 18px;
     font-weight: 800;
     letter-spacing: 0.2px;
     cursor: pointer;
     box-shadow: var(--csl-auth-shadow-btn);
     transition: transform 80ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.csl-auth__btn:hover {
     box-shadow: 0 18px 34px rgba(91, 99, 255, 0.28);
     filter: brightness(1.02);
}

.csl-auth__btn:active {
     transform: translateY(1px);
     box-shadow: 0 10px 22px rgba(91, 99, 255, 0.20);
}

.csl-auth__btn:focus-visible {
     outline: none;
     box-shadow:
          0 0 0 4px rgba(91, 99, 255, 0.18),
          0 14px 28px rgba(91, 99, 255, 0.22);
}

/* ===== Footer ===== */

.csl-auth__footer {
     margin-top: 24px;
     font-size: 13px;
     line-height: 1.6;
     color: var(--csl-auth-text-soft);
     text-align: center;
}

/* ===== Remove spinner arrows ===== */

.csl-auth__field input[type="number"]::-webkit-outer-spin-button,
.csl-auth__field input[type="number"]::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
}

.csl-auth__field input[type="number"] {
     -moz-appearance: textfield;
     appearance: textfield;
}

/* ===== Mobile ===== */

@media (max-width: 767px) {
     .csl-auth {
          padding: 16px 12px 24px;
     }

     .csl-auth__grid {
          min-height: auto;
     }

     .csl-auth__card {
          min-height: auto;
          padding: 24px 18px 22px;
          border-radius: 20px;
     }

     .csl-auth__headline {
          font-size: 26px;
     }

     .csl-auth__subtitle {
          font-size: 15px;
          margin-bottom: 22px;
     }

     .csl-auth__field input[type="text"],
     .csl-auth__field input[type="password"],
     .csl-auth__field input[type="number"] {
          height: 48px;
          font-size: 15px;
     }

     .csl-auth__btn {
          width: 100%;
          min-width: 0;
          font-size: 17px;
     }
}