/* Authentication surface: canonical pre-launch owner. */
/* ============================================================
   GLOBAL BACKGROUND GRADIENT
   ============================================================ */
html, body {
  background: linear-gradient(135deg, #141426, #1219c2);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* ==========================================================
   LinkIt Auth v1.0
========================================================== */

.gl-auth-shell,
.auth-page {

    --primary:#FED254;

    --bg:#f4f7fb;

    --card:#ffffff;

    --text:#111827;

    --muted:#6b7280;

    --border:#e5e7eb;

    --danger:#dc2626;

    --success:#16a34a;

    --radius:22px;

    --shadow:
        0 20px 50px rgba(15,23,42,.08);

}


.header-user-avatar {
    width: 34px;
    height: 34px;
    background: #fed254;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

/* ==========================================================
   Page
========================================================== */

.auth-page{

    width:100%;

    max-width:520px;

    margin:70px auto;

    padding:0 20px;

}

/* ==========================================================
   Header
========================================================== */

.auth-header{

    text-align:center;

    margin-bottom:34px;

}

.auth-title{

    margin:0;

    font-size:34px;

    font-weight:800;

    color:#fff;

}

.auth-subtitle{

    margin-top:12px;

    color:rgba(255,255,255,.75);

    line-height:1.6;

}

/* ==========================================================
   Card
========================================================== */

/* .auth-card{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:34px;

}*/


.auth-card {
    padding: 34px;
}

/* ==========================================================
   Groups
========================================================== */

.auth-group{

    margin-bottom:20px;

}

.auth-group label{

    display:block;

    margin-bottom:8px;

    color:var(--text);

    font-size:14px;

    font-weight:600;

}

/* ==========================================================
   Inputs
========================================================== */

.auth-input{

    width:100%;

    height:54px;

    border:1px solid var(--border);

    border-radius:14px;

    padding:0 16px;

    font-size:15px;

    color:black;

    background:#fff;

    transition:.25s;

    outline:none;

}

.auth-input::placeholder{

    color:#9ca3af;

}

.auth-input:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(254,210,84,.18);

}

/* ==========================================================
   Button
========================================================== */


/* ==========================================================
   Alert
========================================================== */

.auth-alert{

    margin-bottom:24px;

    padding:14px 18px;

    border-radius:14px;

    font-size:14px;

}

.auth-alert-error{

    color:#991b1b;

    background:#fef2f2;

    border:1px solid #fecaca;

}

/* ==========================================================
   Verify
========================================================== */

.verify-hint{

    margin-top:18px;

    text-align:center;

    font-size:14px;

    color:var(--muted);

}

/* ==========================================================
   Terms
========================================================== */

.terms-text{

    margin-top:20px;

    text-align:center;

    line-height:1.7;

    font-size:13px;

    color:var(--muted);

}

.terms-text a{

    color: #ffffff;

    text-decoration:none;

    font-weight:600;

}

.terms-text a:hover{

    color:var(--primary);

}

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

.auth-footer{

    margin-top:22px;

    display:flex;

    justify-content:center;

    gap:6px;

    flex-wrap:wrap;

    font-size:14px;

}

.auth-footer span{

    color:var(--muted);

}

.auth-footer a{

    color:#fed254;

    font-weight:700;

    text-decoration:none;

}

.auth-footer a:hover{

    color:var(--primary);

}

/* Password */

.password-wrapper{

    position:relative;

}

.password-wrapper .auth-input{

    padding-right:52px;

}

.password-toggle{

    position:absolute;

    top:50%;

    right:16px;

    transform:translateY(-50%);

    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    background:none;

    cursor:pointer;

    color:#9ca3af;

    padding:0;

}

.password-toggle:hover{

    color:#111827;

}

.password-toggle i{

    font-size:18px;

    line-height:1;

}


html[dir="rtl"] .password-wrapper .auth-input{

    padding-left:52px;
    padding-right:16px;

}

html[dir="rtl"] .password-toggle{

    left:16px;
    right:auto;

}


/* ==========================================
   Resend Button
========================================== */

.auth-resend{

    margin-top:16px;

}


/* ==========================================================
   Responsive
========================================================== */




/* Semantic authentication components. */
.gl-auth-page { min-height: 100vh; margin: 0; background: #f8f9fa; color: #212529; }
.gl-auth-shell { width: min(100% - 2rem, 500px); margin: 0 auto; padding: 3rem 0; }
.gl-auth-card { display: block; padding: 2rem; }
.gl-auth-center { text-align: center; }
.gl-auth-end { text-align: end; }
.gl-auth-heading { margin-bottom: 1rem; }
.gl-auth-muted { color: rgba(255,255,255,.7); }
.gl-auth-label { display: block; margin-bottom: .5rem; font-weight: 600; }
.gl-auth-input { display: block; width: 100%; min-height: 44px; padding: .625rem .75rem; border: 1px solid #ced4da; border-radius: .375rem; color: #212529; background: #fff; }
.gl-auth-page .gl-auth-muted { color: #6b7280; }
.gl-auth-page .gl-auth-input::placeholder,
.gl-auth-page .login-card .gl-auth-input::placeholder { color: #6b7280 !important; opacity: 1 !important; }
.gl-public-shell .gl-auth-muted { color: #6b7280; }
.gl-public-shell .login-card .gl-auth-input::placeholder { color: #6b7280 !important; opacity: 1 !important; }
.gl-public-shell .auth-page .auth-title { color: #172033; }
.gl-public-shell .auth-page .auth-subtitle { color: #64748b; }
.gl-auth-input:focus { border-color: #8852c9; outline: 0; box-shadow: 0 0 0 .2rem rgba(136,82,201,.2); }
.gl-auth-input-group { display: flex; width: 100%; }
.gl-auth-input-group .gl-auth-input { flex: 1 1 auto; min-width: 0; border-radius: .375rem 0 0 .375rem; }
.gl-auth-input-addon { display: inline-flex; align-items: center; padding: 0 .75rem; border: 1px solid #ced4da; border-left: 0; border-radius: 0 .375rem .375rem 0; cursor: pointer; }
.gl-auth-alert { padding: .5rem .75rem; margin-bottom: 1rem; border-radius: .375rem; }
.gl-auth-alert-danger { color: #842029; background: #f8d7da; }
.gl-auth-alert-success { color: #0f5132; background: #d1e7dd; }
.gl-auth-loading-indicator { display:inline-block; width:1em; height:1em; border:.15em solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:gl-auth-spin .7s linear infinite; }
@keyframes gl-auth-spin { to { transform:rotate(360deg); } }
.gl-auth-check { display: flex; align-items: center; gap: .5rem; }
.gl-auth-check-input { width: 1rem; height: 1rem; }
.gl-auth-check-label { color: #6c757d; }
.gl-auth-link { color: var(--primary-color); font-weight: 600; text-decoration: underline; }
.gl-auth-small { font-size: .875rem; }
.gl-auth-footer-link { color: #fff; font-weight: 600; text-decoration: underline; }
.gl-auth-compact { padding-top: .5rem; padding-bottom: .5rem; }
.gl-mb-0 { margin-bottom: 0; }.gl-mb-2 { margin-bottom: .5rem; }.gl-mb-3 { margin-bottom: 1rem; }.gl-mt-3 { margin-top: 1rem; }
.gl-auth-bold { font-weight: 700; }
/* Authentication: both legacy class families share one visual language. */
body.gl-public-shell .gl-auth-shell,
body.gl-public-shell .auth-page {
  box-sizing:border-box;
  width:min(calc(100% - 32px),560px);
  max-width:560px !important;
  margin:0 auto;
  padding:clamp(54px,7vw,88px) 0 clamp(72px,9vw,118px);
  color:var(--cel-ink);
}
body.gl-public-shell .auth-page { margin-inline:auto; }
body.gl-public-shell .gl-auth-heading,
body.gl-public-shell .auth-header { margin:0 0 28px; text-align:center; }
body.gl-public-shell .login-card-heading { margin-bottom:30px; }
body.gl-public-shell .gl-auth-heading::before,
body.gl-public-shell .auth-header::before {
  content:"—  WELCOME";
  display:block;
  margin-bottom:13px;
  color:var(--primary-color);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
[dir="rtl"] body.gl-public-shell .gl-auth-heading::before,
[dir="rtl"] body.gl-public-shell .auth-header::before { content:"مرحباً  —"; }
body.gl-public-shell .auth-header.auth-header-register::before { content:none; }
body.gl-public-shell .gl-auth-heading h3,
body.gl-public-shell h4.gl-auth-heading,
body.gl-public-shell .auth-title {
  margin:0;
  color:var(--cel-ink) !important;
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.08;
  font-weight:600;
  letter-spacing:-.035em;
}
body.gl-public-shell h4.gl-auth-heading { font-size:clamp(1.75rem,4vw,2.35rem); }
body.gl-public-shell .gl-auth-heading p,
body.gl-public-shell .auth-subtitle { margin:12px 0 0; color:var(--cel-muted) !important; line-height:1.6; }
body.gl-public-shell .gl-auth-card,
body.gl-public-shell .auth-card,
body.gl-public-shell .verify-card {
  box-sizing:border-box;
  width:100%;
  max-width:560px;
  padding:34px;
  color:var(--cel-ink);
  box-shadow:var(--gl-surface-shadow);
  backdrop-filter:none;
}
body.gl-public-shell .gl-auth-label,
body.gl-public-shell .auth-group label { margin:0 0 9px; color:var(--cel-ink); font-size:.86rem; font-weight:650; }
body.gl-public-shell .gl-auth-input,
body.gl-public-shell .auth-input {
  box-sizing:border-box;
  width:100%;
  min-height:54px;
  height:54px;
  padding:0 18px;
  border:0 !important;
  border-radius:16px !important;
  outline:0;
  background:var(--cel-sunk) !important;
  color:var(--cel-ink) !important;
  box-shadow:var(--cel-well) !important;
  transition:box-shadow .28s var(--cel-ease),transform .28s var(--cel-ease);
}
body.gl-public-shell .gl-auth-input:focus,
body.gl-public-shell .auth-input:focus { box-shadow:var(--cel-well),0 0 0 3px color-mix(in srgb,var(--primary-color) 48%,transparent) !important; transform:translateY(-1px); }
body.gl-public-shell .gl-auth-input::placeholder,
body.gl-public-shell .auth-input::placeholder { color:#738198 !important; opacity:1; }
body.gl-public-shell .password-toggle { color:var(--cel-muted); }
body.gl-public-shell .gl-auth-check { display:flex; align-items:center; gap:10px; color:var(--cel-muted); }
body.gl-public-shell .gl-auth-check-input { width:18px; height:18px; accent-color:var(--primary-color); }
body.gl-public-shell .auth-quick-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:25px 0 18px;
  color:#8390a5;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
body.gl-public-shell .auth-quick-divider::before,
body.gl-public-shell .auth-quick-divider::after {
  content:"";
  flex:1 1 auto;
  height:1px;
  background:color-mix(in srgb,var(--cel-muted) 24%,transparent);
}
body.gl-public-shell .google-connect-button i { color:#4285f4; font-size:1.05rem; }
body.gl-public-shell .gl-auth-link,
body.gl-public-shell .gl-auth-footer-link,
body.gl-public-shell .auth-footer a,
body.gl-public-shell .terms-text a { color:var(--primary-color); text-decoration:none; font-weight:700; }
html[data-public-theme="dark"] body.gl-public-shell .gl-auth-heading::before,
html[data-public-theme="dark"] body.gl-public-shell .auth-header::before,
html[data-public-theme="dark"] body.gl-public-shell .gl-auth-link,
html[data-public-theme="dark"] body.gl-public-shell .gl-auth-footer-link,
html[data-public-theme="dark"] body.gl-public-shell .auth-footer a,
html[data-public-theme="dark"] body.gl-public-shell .terms-text a { color:var(--cel-ink); }
body.gl-public-shell .auth-footer span,
body.gl-public-shell .verify-hint,
body.gl-public-shell .terms-text { color:var(--cel-muted); }
body.gl-public-shell .gl-auth-alert,
body.gl-public-shell .auth-alert { border:0; box-shadow:var(--cel-clay-sm); }
body.gl-public-shell .verify-page { box-sizing:border-box; min-height:auto; width:min(calc(100% - 32px),560px); margin:0 auto; padding:clamp(54px,7vw,88px) 0 clamp(72px,9vw,118px); }
body.gl-public-shell .verify-icon { margin-inline:auto; background:var(--cel-sunk); color:var(--primary-color); box-shadow:var(--cel-well); }
body.gl-public-shell .verify-title { color:var(--cel-ink); }
body.gl-public-shell .verify-text { color:var(--cel-muted); }

body.gl-public-shell .pricing-page { background:transparent; color:var(--cel-ink); }