.ct-login-page {
    background: #f5f6f8;
    color: #202124;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    min-height: 100vh;
}

.ct-login-page *, .ct-login-page *::before, .ct-login-page *::after { box-sizing: border-box; }
.ct-login-page a { text-decoration: none; }
.ct-login-skip { background: #202124; border-radius: 0 0 8px 0; color: #fff; left: 0; padding: 10px 14px; position: fixed; top: -60px; z-index: 10000; }
.ct-login-skip:focus { top: 0; }

.ct-login {
    --ct-orange: #ff6b00;
    --ct-orange-dark: #d95700;
    --ct-orange-soft: #fff2e8;
    --ct-ink: #202124;
    --ct-text: #4b5563;
    --ct-muted: #6b7280;
    --ct-soft: #f5f6f8;
    --ct-border: #e5e7eb;
    background: linear-gradient(135deg, #fff 0%, #fffaf6 48%, #f5f6f8 100%);
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

.ct-login__glow { border-radius: 50%; pointer-events: none; position: absolute; }
.ct-login__glow--one { background: rgba(255, 107, 0, .08); height: 520px; right: -180px; top: -180px; width: 520px; }
.ct-login__glow--two { background: rgba(255, 190, 143, .12); bottom: -180px; height: 380px; left: -140px; width: 380px; }

.ct-login-nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1220px;
    min-height: 82px;
    padding: 14px 24px;
    position: relative;
    z-index: 5;
}

.ct-login-brand { align-items: center; color: var(--ct-ink); display: flex; font-size: 1rem; font-weight: 800; gap: 11px; }
.ct-login-brand:hover { color: var(--ct-orange-dark); }
.ct-login-brand img { border-radius: 50%; height: 48px; object-fit: cover; width: 48px; }
.ct-login-nav__links { align-items: center; display: flex; gap: 26px; }
.ct-login-nav__links > a { color: var(--ct-text); font-size: .9rem; font-weight: 650; }
.ct-login-nav__links > a:hover { color: var(--ct-orange-dark); }
.ct-login-nav__links .ct-login-nav__cta { background: var(--ct-orange); border-radius: 999px; color: #fff; padding: 11px 18px; }
.ct-login-nav__links .ct-login-nav__cta:hover { background: var(--ct-orange-dark); color: #fff; }

.ct-login-language details { margin: 0 !important; position: relative; }
.ct-login-language summary { color: var(--ct-text) !important; cursor: pointer; font-size: .88rem !important; font-weight: 650 !important; list-style: none; }
.ct-login-language summary::-webkit-details-marker { display: none; }
.ct-login-language summary::after { content: "▾"; margin-left: 7px; }
.ct-login-language ul { border: 1px solid var(--ct-border); border-radius: 14px !important; box-shadow: 0 18px 40px rgba(32,33,36,.12) !important; position: absolute; right: 0; top: 32px; }
.ct-login-language li a { color: var(--ct-text); cursor: pointer; font-size: .86rem; padding: 8px 10px; }
.ct-login-language li a:hover { background: var(--ct-orange-soft); color: var(--ct-orange-dark); }

.ct-login-main {
    align-items: center;
    display: grid;
    gap: clamp(48px, 8vw, 110px);
    grid-template-columns: minmax(0, 1fr) minmax(390px, 470px);
    margin: 0 auto;
    max-width: 1180px;
    min-height: calc(100vh - 82px);
    padding: 54px 24px 82px;
    position: relative;
    z-index: 2;
}

.ct-login-hero { max-width: 640px; }
.ct-login-kicker { align-items: center; color: var(--ct-orange-dark); display: inline-flex; font-size: .75rem; font-weight: 800; gap: 8px; letter-spacing: .1em; text-transform: uppercase; }
.ct-login-hero h1 { color: var(--ct-ink); font-size: clamp(3rem, 5.5vw, 5rem); font-weight: 850; letter-spacing: -.055em; line-height: 1.01; margin: 22px 0 22px; }
.ct-login-hero > p { color: var(--ct-text); font-size: 1.16rem; line-height: 1.72; margin: 0; max-width: 570px; }
.ct-login-benefits { display: grid; gap: 13px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 30px 0 34px; padding: 0; }
.ct-login-benefits li { align-items: center; color: var(--ct-text); display: flex; font-size: .92rem; font-weight: 650; gap: 9px; }
.ct-login-benefits i { color: var(--ct-orange); }

.ct-login-preview { background: rgba(255,255,255,.9); border: 1px solid var(--ct-border); border-radius: 20px; box-shadow: 0 20px 50px rgba(32,33,36,.09); max-width: 610px; padding: 22px; }
.ct-login-preview__head { align-items: center; display: grid; gap: 12px; grid-template-columns: auto 1fr auto; }
.ct-login-preview__head > span:first-child { align-items: center; background: var(--ct-orange-soft); border-radius: 12px; color: var(--ct-orange); display: flex; height: 42px; justify-content: center; width: 42px; }
.ct-login-preview__head div { display: flex; flex-direction: column; }
.ct-login-preview__head small { color: var(--ct-muted); font-size: .68rem; }
.ct-login-preview__head strong { color: var(--ct-ink); font-size: .9rem; }
.ct-login-preview__status { background: #ecfdf3; border-radius: 999px; color: #23864a; font-size: .65rem; font-weight: 750; padding: 7px 10px; }
.ct-login-preview__grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 18px; }
.ct-login-preview__grid > div { background: var(--ct-soft); border-radius: 13px; display: flex; flex-direction: column; min-width: 0; padding: 14px; }
.ct-login-preview__grid small { color: var(--ct-muted); font-size: .62rem; }
.ct-login-preview__grid strong { color: var(--ct-ink); font-size: .84rem; margin: 5px 0; }
.ct-login-preview__grid span { color: var(--ct-text); font-size: .62rem; line-height: 1.35; }

.ct-login-panel { width: 100%; }
.ct-login-card { background: #fff; border: 1px solid var(--ct-border); border-radius: 24px; box-shadow: 0 24px 70px rgba(32,33,36,.13); padding: clamp(28px, 4vw, 42px); }
.ct-login-card__logo { display: none; margin: 0 auto 18px; }
.ct-login-card__logo img { height: 54px; max-width: 110px; object-fit: contain; width: auto; }
.ct-login-card__heading { margin-bottom: 28px; text-align: center; }
.ct-login-card__heading h2 { color: var(--ct-ink); font-size: 1.8rem; font-weight: 800; letter-spacing: -.025em; margin: 0 0 8px; }
.ct-login-card__heading p { color: var(--ct-muted); font-size: .94rem; margin: 0; }
.ct-login-form { display: flex; flex-direction: column; gap: 18px; }
.ct-login-field { display: flex; flex-direction: column; gap: 8px; }
.ct-login-field label, .ct-login-label-row label { color: var(--ct-ink); font-size: .86rem; font-weight: 750; margin: 0; }
.ct-login-label-row { align-items: center; display: flex; justify-content: space-between; }
.ct-login-label-row a { color: var(--ct-orange-dark); font-size: .78rem; font-weight: 650; }
.ct-login-label-row a:hover { color: var(--ct-orange); text-decoration: underline; }
.ct-login-input-wrap { align-items: center; background: #fff; border: 1px solid #d8dce2; border-radius: 13px; display: flex; min-height: 52px; padding: 0 15px; transition: .18s ease; }
.ct-login-input-wrap:focus-within { border-color: var(--ct-orange); box-shadow: 0 0 0 4px rgba(255,107,0,.1); }
.ct-login-input-wrap i { color: #9ca3af; flex: 0 0 20px; }
.ct-login-input { background: transparent; border: 0; color: var(--ct-ink); font-size: .95rem; height: 50px; min-width: 0; outline: 0; padding: 0 4px 0 8px; width: 100%; }
.ct-login-input::placeholder { color: #9ca3af; }
.ct-login-field--error .ct-login-input-wrap { border-color: #dc2626; }
.ct-login-error { color: #b91c1c; font-size: .75rem; font-weight: 600; }
.ct-login-remember { align-items: center; color: var(--ct-text); cursor: pointer; display: inline-flex; font-size: .84rem; font-weight: 600; gap: 9px; margin: -2px 0 0; }
.ct-login-remember input { accent-color: var(--ct-orange); height: 17px; margin: 0; width: 17px; }
.ct-login-btn { align-items: center; background: var(--ct-orange); border: 0; border-radius: 999px; box-shadow: 0 10px 24px rgba(255,107,0,.22); color: #fff; display: flex; font-size: .98rem; font-weight: 750; gap: 10px; justify-content: center; min-height: 52px; transition: .18s ease; width: 100%; }
.ct-login-btn:hover, .ct-login-btn:focus { background: var(--ct-orange-dark); color: #fff; transform: translateY(-1px); }
.ct-login-btn:focus-visible, .ct-login-input:focus-visible, .ct-login a:focus-visible, .ct-login summary:focus-visible { outline: 3px solid rgba(255,107,0,.3); outline-offset: 3px; }

.ct-login-divider { align-items: center; color: #9ca3af; display: flex; font-size: .72rem; gap: 12px; margin: 24px 0 18px; text-align: center; }
.ct-login-divider::before, .ct-login-divider::after { background: var(--ct-border); content: ""; flex: 1; height: 1px; }
.ct-login-secondary { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.ct-login-secondary a { align-items: center; border: 1px solid var(--ct-border); border-radius: 999px; color: var(--ct-text); display: flex; font-size: .84rem; font-weight: 700; justify-content: center; min-height: 44px; padding: 0 12px; text-align: center; }
.ct-login-secondary a:hover { background: var(--ct-orange-soft); border-color: #ffd0ad; color: var(--ct-orange-dark); }
.ct-login-signup { color: var(--ct-muted); font-size: .8rem; margin: 22px 0 0; text-align: center; }
.ct-login-signup a { color: var(--ct-orange-dark); font-weight: 750; }
.ct-login-signup a:hover { text-decoration: underline; }

.ct-login-demo { background: #fff; border: 1px solid var(--ct-border); border-radius: 20px; margin: 0 auto 60px; max-width: 1180px; padding: 28px; position: relative; z-index: 2; }
.ct-login-demo h2 { color: var(--ct-ink); font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; }
.ct-login-demo p { color: var(--ct-text); margin: 0 0 18px; }
.ct-login-demo > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-login-demo a { background: var(--ct-soft); border-radius: 999px; color: var(--ct-text); font-size: .78rem; padding: 8px 12px; text-transform: capitalize; }
.ct-login-demo a:hover { background: var(--ct-orange-soft); color: var(--ct-orange-dark); }

@media (max-width: 1050px) {
    .ct-login-main { gap: 46px; grid-template-columns: minmax(0,1fr) minmax(360px,430px); }
    .ct-login-hero h1 { font-size: clamp(2.8rem, 5vw, 4rem); }
    .ct-login-nav__links { gap: 18px; }
}

@media (max-width: 900px) {
    .ct-login-nav { max-width: 720px; }
    .ct-login-nav__links > a:not(.ct-login-nav__cta) { display: none; }
    .ct-login-main { grid-template-columns: 1fr; max-width: 720px; padding-top: 36px; }
    .ct-login-panel { margin: 0 auto; max-width: 520px; order: -1; }
    .ct-login-card__logo { display: block; text-align: center; }
    .ct-login-hero { margin: 0 auto; max-width: 620px; text-align: center; }
    .ct-login-hero > p { margin-left: auto; margin-right: auto; }
    .ct-login-benefits { text-align: left; }
    .ct-login-preview { text-align: left; }
}

@media (max-width: 600px) {
    .ct-login-nav { min-height: 70px; padding: 11px 18px; }
    .ct-login-brand span, .ct-login-nav__cta { display: none !important; }
    .ct-login-brand img { height: 44px; width: 44px; }
    .ct-login-main { gap: 58px; min-height: calc(100vh - 70px); padding: 24px 18px 64px; }
    .ct-login-card { border-radius: 20px; padding: 28px 22px; }
    .ct-login-card__heading h2 { font-size: 1.55rem; }
    .ct-login-secondary { grid-template-columns: 1fr; }
    .ct-login-hero h1 { font-size: 2.7rem; }
    .ct-login-benefits { grid-template-columns: 1fr; margin-left: auto; margin-right: auto; max-width: 340px; }
    .ct-login-preview { display: none; }
    .ct-login__glow--one { right: -300px; }
    .ct-login-demo { border-radius: 0; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-login *, .ct-login *::before, .ct-login *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}