/* =========================================================
   DESIGN TOKENS —AI
   Background : Void #030712 / Deep #050816 / Panel #0A1124
   Accent     : Electric Blue #3B82F6, Neon Cyan #22D3EE,
                Royal Blue #2563EB
   Text       : Ivory #E9EEFC, Muted #7C8AA8
   Display    : 'Space Grotesk'   Body: 'Inter'   Mono: 'IBM Plex Mono'

   Signature element: the background is a live "similarity graph" —
   drifting nodes that draw a connecting line and pulse brighter the
   closer they pass to one another, a literal picture of what the
   product does (detecting proximity between titles/ideas).
   ========================================================= */

:root {
    --void: #030712;
    --deep: #050816;
    --panel: #0A1124;
    --panel-glass: rgba(12, 20, 42, 0.52);
    --panel-glass-soft: rgba(12, 20, 42, 0.32);
    --line: rgba(148, 172, 214, 0.14);

    --electric: #3B82F6;
    --cyan: #22D3EE;
    --royal: #2563EB;
    --violet: #8B5CF6;

    --ivory: #E9EEFC;
    --muted: #8B96B8;
    --muted-dim: #5A6484;

    --danger: #F87171;
    --danger-bg: rgba(248, 113, 113, 0.1);
    --danger-border: rgba(248, 113, 113, 0.32);

    --radius-lg: 26px;
    --radius-md: 16px;
    --radius-pill: 999px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* BAGO (Item #5 - Team Sign-Up Visibility):
   Ilang browsers (lalo na sa Windows/Chrome) ay gumagamit ng sarili
   nilang default (light/white) na paint para sa native <select>
   dropdown popup, kahit may custom "option { background; color }"
   styling na naka-set sa CSS. Kapag nangyari yun, yung mga puting/
   maputlang text (ivory) namin ay nagiging invisible dahil naka-light
   text sa light/white background. Ang "color-scheme: dark" ay
   nagsasabi sa browser na gamitin ang dark-mode palette bilang base
   para sa lahat ng native form controls (kasama ang select dropdown,
   scrollbar) para laging readable/tama ang contrast, saan mang
   browser ito buksan. Ito ang direktang fix sa "Team Sign-Up
   Visibility" (Phase 2, Item #5) kung saan hindi nakikita ng mga
   miyembro ang pangalan ng team dahil "white on white" sa member
   selection dropdown. */
:root {
    color-scheme: dark;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--void);
    color: var(--ivory);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection {
    background: rgba(34, 211, 238, 0.28);
    color: #fff;
}

/* =========================================================
   SCENE — animated mesh + graph canvas + light beams
   ========================================================= */

.scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(70% 55% at 18% 12%, rgba(37, 99, 235, 0.22) 0%, transparent 60%),
        radial-gradient(60% 50% at 85% 78%, rgba(34, 211, 238, 0.14) 0%, transparent 62%),
        radial-gradient(120% 90% at 50% 100%, #0A1124 0%, var(--deep) 45%, var(--void) 100%);
}

.scene::before {
    /* fine noise texture, kept extremely subtle */
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scene::after {
    /* faint circuit-board trace pattern for the futuristic AI feel */
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%2322D3EE' stroke-width='1'%3E%3Cpath d='M10 20H70V60H140V20H210'/%3E%3Cpath d='M10 90H50V130H120V170H210'/%3E%3Cpath d='M30 0V15'/%3E%3Cpath d='M190 20V0'/%3E%3Cpath d='M50 130V220'/%3E%3Cpath d='M160 170H220'/%3E%3C/g%3E%3Cg fill='%2222D3EE'%3E%3Ccircle cx='70' cy='60' r='2.4'/%3E%3Ccircle cx='140' cy='20' r='2.4'/%3E%3Ccircle cx='50' cy='130' r='2.4'/%3E%3Ccircle cx='120' cy='170' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 220px 220px;
    mask-image: radial-gradient(120% 100% at 50% 30%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 0%, transparent 75%);
}

.beam {
    position: absolute;
    width: 2px;
    height: 46vh;
    background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.5), transparent);
    filter: blur(1px);
    opacity: 0.55;
    animation: beam-drift 9s ease-in-out infinite;
}

.beam.b1 { top: -10%; left: 14%; animation-delay: 0s; }
.beam.b2 { top: -14%; left: 62%; height: 54vh; animation-delay: 2.4s; background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.4), transparent); }
.beam.b3 { top: -8%; left: 88%; animation-delay: 4.6s; }

@keyframes beam-drift {
    0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.35; }
    50% { transform: translateY(6vh) scaleY(1.08); opacity: 0.65; }
}

#graphCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .beam { animation: none; }
}

/* =========================================================
   LAYOUT SHELL
   ========================================================= */

.shell {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 56px 48px;
}

@media (max-width: 1200px) {
    .shell {
        gap: 56px;
        max-width: 1180px;
    }
}

@media (max-width: 1080px) {
    .shell {
        gap: 44px;
    }
}

@media (max-width: 940px) {
    .shell {
        flex-direction: column;
        justify-content: flex-start;
        gap: 40px;
        padding: 40px 20px 56px;
    }
}

/* =========================================================
   PROMO PANEL — left brand / marketing side
   (visual only, no auth logic lives here)
   ========================================================= */

.promo-panel {
    position: relative;
    flex: 1 1 560px;
    max-width: 620px;
    animation: card-in 0.7s var(--ease) both;
}

.promo-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.promo-logo {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.08), 0 0 24px -6px rgba(34, 211, 238, 0.55);
    overflow: hidden;
}

.promo-logo::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, 0.22);
    animation: mark-pulse 2.6s ease-in-out infinite;
    pointer-events: none;
}

.promo-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.promo-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.promo-brand-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.01em;
}

.promo-brand-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-dim);
}

.promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 26px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(139, 92, 246, 0.35);
    background: linear-gradient(120deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.12));
    color: var(--cyan);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.promo-badge i {
    color: var(--violet);
    font-size: 13px;
}

.promo-headline {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 54px;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 22px;
    color: var(--ivory);
}

.promo-headline span {
    background: linear-gradient(120deg, var(--cyan), var(--electric));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.promo-text {
    max-width: 500px;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 42px;
}

.promo-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}

.feature-card {
    padding: 24px 22px 26px;
    border-radius: var(--radius-md);
    background: var(--panel-glass-soft);
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    transition: transform 0.2s var(--ease), border-color 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 211, 238, 0.35);
}

.feature-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    margin-bottom: 16px;
    background: linear-gradient(140deg, rgba(59, 130, 246, 0.24), rgba(139, 92, 246, 0.18));
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--cyan);
    font-size: 18px;
}

.feature-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 16.5px;
    margin-bottom: 7px;
    color: var(--ivory);
}

.feature-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}

.promo-quote {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-dim);
}

@media (max-width: 1200px) {
    .promo-headline {
        font-size: 46px;
    }
}

@media (max-width: 940px) {
    .promo-panel {
        max-width: 620px;
        text-align: center;
    }

    .promo-brand,
    .promo-badge {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .promo-text {
        margin-left: auto;
        margin-right: auto;
    }

    .promo-quote {
        display: none;
    }
}

@media (max-width: 620px) {
    .promo-headline {
        font-size: 36px;
    }

    .promo-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .feature-card {
        padding: 16px 16px 18px;
    }

    .feature-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }

    .feature-title {
        font-size: 15px;
    }

    .feature-desc {
        font-size: 12.5px;
    }
}

@media (max-width: 420px) {
    .promo-headline {
        font-size: 30px;
    }

    .promo-text {
        font-size: 14px;
    }
}

/* =========================================================
   CARD — polygon glass panel
   ========================================================= */

.card-wrap {
    position: relative;
    flex: 0 1 520px;
    width: 100%;
    max-width: 520px;
    animation: card-in 0.7s var(--ease) both, card-float 7s ease-in-out 0.7s infinite;
}

@media (max-width: 1200px) {
    .card-wrap {
        flex-basis: 480px;
        max-width: 480px;
    }
}

@media (max-width: 940px) {
    .card-wrap {
        flex: 1 1 auto;
        max-width: 540px;
    }
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.card-glow {
    position: absolute;
    inset: -1px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.65), rgba(34, 211, 238, 0.15) 40%, rgba(37, 99, 235, 0.55));
    filter: blur(0px);
    opacity: 0.9;
    z-index: 0;
}

.card {
    position: relative;
    z-index: 1;
    margin: 1.5px;
    padding: 44px 44px 36px;
    background: var(--panel-glass);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    border-radius: 30px;
    border: 1px solid rgba(34, 211, 238, 0.16);
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 80px -20px rgba(59, 130, 246, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.card::before {
    /* cursor-follow sheen */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, 0.12), transparent 60%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.card:hover::before {
    opacity: 1;
}

/* =========================================================
   BACK TO LANDING
   ========================================================= */

.back-to-landing {
    position: fixed;
    top: 28px;
    left: 32px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--panel-glass-soft);
    backdrop-filter: blur(6px);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.back-to-landing i {
    font-size: 11px;
    transition: transform 0.2s var(--ease);
}

.back-to-landing:hover {
    color: var(--ivory);
    border-color: rgba(34, 211, 238, 0.35);
    transform: translateX(-2px);
}

.back-to-landing:hover i {
    transform: translateX(-2px);
}

@media (max-width: 480px) {
    .back-to-landing {
        top: 16px;
        left: 16px;
        font-size: 12px;
        padding: 7px 12px;
    }
}

/* =========================================================
   SIGN IN / SIGN UP TABS
   ========================================================= */

.auth-tabs {
    position: relative;
    display: flex;
    background: rgba(255, 255, 255, 0.025);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 5px;
    margin-bottom: 26px;
}

.auth-tab {
    position: relative;
    z-index: 2;
    flex: 1;
    border: none;
    background: none;
    padding: 12px 0;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-radius: 10px;
    transition: color 0.25s ease;
}

.auth-tab.active {
    color: var(--void);
}

.auth-tab-indicator {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cyan), var(--electric));
    transition: transform 0.4s var(--ease);
}

/* =========================================================
   SLIDING SIGN IN / SIGN UP PANELS
   ========================================================= */

.auth-viewport {
    overflow: hidden;
    transition: height 0.4s var(--ease);
}

.auth-track {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.45s var(--ease);
}

.auth-panel {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-panel#signupPanel {
    padding-left: 4px;
    padding-right: 0;
}

/* =========================================================
   CARD SIZE

   Sign In and Sign Up intentionally share the exact same
   width AND height (the height is computed in JS as the
   taller of the two panels — see setHeight()), so switching
   tabs never resizes the card. The shorter panel's content
   is simply centered vertically within that fixed space via
   .auth-panel above.
   ========================================================= */

.card-wrap.wide {
    max-width: 520px;
}

.card-wrap {
    transition: max-width 0.45s var(--ease);
}

/* =========================================================
   SIGN-UP FORM GRID
   ========================================================= */

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 12px;
}

.field-grid .field.span-2 {
    grid-column: 1 / -1;
}

.field.field-select label {
    position: static;
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-dim);
    margin-bottom: 6px;
    padding: 0;
    background: none;
}

.field-select .field-box select {
    /* BAGO (Item #5): explicit na "color-scheme: dark" din sa element
       mismo (hindi lang sa :root), dahil ilang browsers ay tumitingin
       muna sa element bago sa inherited root value pagdating sa
       pag-render ng native dropdown popup. Kasama ng background/color
       sa .option rule sa baba, ito ang sumisiguro na readable pa rin
       ang team name list kahit anong browser/OS ang ginamit. */
    color-scheme: dark;
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: var(--ivory);
    appearance: none;
}

.field-select .field-box select option {
    background-color: var(--panel);
    color: var(--ivory);
}

@media (max-width: 560px) {
    .field-grid {
        grid-template-columns: 1fr;
    }
    .field-grid .field.span-2 {
        grid-column: auto;
    }
}

/* =========================================================
   HEADER
   ========================================================= */

.brand-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 22px;
}

.brand-mark {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, rgba(59, 130, 246, 0.22), rgba(34, 211, 238, 0.08));
    border: 1px solid rgba(59, 130, 246, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--cyan);
    font-size: 19px;
    box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.07), 0 10px 34px -10px rgba(59, 130, 246, 0.55);
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, 0.22);
    animation: mark-pulse 2.6s ease-in-out infinite;
}

@keyframes mark-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.12); opacity: 0; }
}

.brand-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 4px;
}

.brand-name .dot { color: var(--cyan); }

/* Descriptive tagline is already conveyed by the headline below,
   so it's kept in the markup (for SEO / a11y / future reuse) but
   visually hidden in the compact card context. */
.brand-tag {
    display: none;
}

h1.headline {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 27px;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    text-align: center;
}

h1.headline .accent {
    background: linear-gradient(120deg, var(--cyan), var(--electric));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sub {
    font-size: 14.5px;
    color: var(--muted);
    margin-bottom: 28px;
    line-height: 1.5;
    text-align: center;
}

/* =========================================================
   ROLE SELECTION
   ========================================================= */

.role-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-dim);
    margin-bottom: 12px;
    display: block;
    text-align: center;
}

.role-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 30px;
}

.role-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 17px 8px 15px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--muted);
    cursor: pointer;
    transition: transform 0.2s var(--ease), border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.role-btn i {
    font-size: 18px;
}

.role-btn span {
    font-size: 12.5px;
    font-weight: 500;
}

.role-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.4);
    color: var(--ivory);
}

.role-btn.active {
    color: #fff;
    background: linear-gradient(160deg, rgba(59, 130, 246, 0.38), rgba(34, 211, 238, 0.14));
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 10px 24px -8px rgba(34, 211, 238, 0.5);
}

.role-btn.active i {
    color: #fff;
}

.role-btn.active::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 7px;
    right: 9px;
    font-size: 9px;
    color: var(--cyan);
}

.role-btn:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* =========================================================
   ALERT
   ========================================================= */

.alert {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    font-size: 13.5px;
    padding: 13px 16px;
    border-radius: 12px;
    margin-bottom: 24px;
}

/* =========================================================
   FORM FIELDS — floating label pills
   ========================================================= */

.field {
    position: relative;
    margin-bottom: 22px;
}

.field-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 17px 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.field-box i {
    color: var(--muted-dim);
    font-size: 15px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.field-box input {
    border: none;
    outline: none;
    background: transparent;

    width: 100%;
    min-width: 0;
    flex: 1 1 auto;

    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;

    color: var(--ivory);

    /* Keep the entered email readable */
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;

    padding: 2px 0;
    margin: 0;

    /* Better text rendering */
    letter-spacing: 0.01em;
}

.field-box input::placeholder {
    color: transparent;
}

.field label {
    position: absolute;
    left: 50px;
    top: 18px;
    font-size: 15.5px;
    color: var(--muted);
    pointer-events: none;
    transition: transform 0.18s var(--ease), font-size 0.18s var(--ease), color 0.18s ease, top 0.18s ease;
    background: transparent;
}

.field-box:focus-within {
    border-color: var(--cyan);
    background: rgba(34, 211, 238, 0.03);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.1);
}

.field-box:focus-within + label,
.field.filled label,
.field input:not(:placeholder-shown) ~ label,
.field-box:has(input:not(:placeholder-shown)) + label {
    top: -9px;
    left: 17px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--cyan);
    background: linear-gradient(180deg, transparent 45%, var(--void) 45%);
    padding: 0 6px;
}

.toggle-password {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted-dim);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.toggle-password:hover {
    color: var(--cyan);
}

/* =========================================================
   ROW — remember / forgot
   ========================================================= */

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    font-size: 13.5px;
}

.remember {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

.remember input {
    accent-color: var(--cyan);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.forgot {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.forgot:hover {
    color: var(--cyan);
}

.field-hint {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
  line-height: 1.4;
}

/* =========================================================
   CLOUDFLARE TURNSTILE
   Reserve its standard widget height up front so the card
   doesn't visibly grow/shift once the widget finishes
   mounting (paired with the ResizeObserver height-sync in
   the page script, which keeps the card correct either way).
   ========================================================= */

.cf-turnstile {
    min-height: 65px;
}

/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.submit-btn {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(120deg, #EAF3FF 0%, var(--electric) 55%, var(--royal) 130%);
    color: #04070F;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 16px;
    border: none;
    border-radius: 14px;
    padding: 17px 22px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s var(--ease), box-shadow 0.18s ease;
}

.submit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}

.submit-btn:hover::before {
    left: 130%;
}

.submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(59, 130, 246, 0.55);
}

.submit-btn:active {
    transform: translateY(0);
}

.submit-btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transform: scale(0);
    animation: ripple-out 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes ripple-out {
    to { transform: scale(1); opacity: 0; }
}

.submit-btn:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

/* =========================================================
   DIVIDER + GOOGLE
   ========================================================= */

.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 18px;
    color: var(--muted-dim);
    font-size: 11.5px;
    letter-spacing: 0.04em;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line);
    color: var(--ivory);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 14px;
    padding: 13px 20px;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.google-btn:hover {
    border-color: rgba(148, 172, 214, 0.4);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}

.google-btn svg {
    width: 16px;
    height: 16px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.login-footer {
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.foot {
    text-align: center;
    margin-top: 26px;
    font-size: 13px;
    color: var(--muted);
}

.foot a {
    color: var(--cyan);
    text-decoration: none;
    font-weight: 500;
}

.foot a:hover {
    text-decoration: underline;
}

.back {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
    font-size: 12.5px;
    color: var(--muted-dim);
    text-decoration: none;
    transition: color 0.15s ease;
}

.back:hover {
    color: var(--ivory);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .card {
        padding: 44px 38px 36px;
    }
}

@media (max-width: 640px) {
    .card {
        padding: 38px 28px 30px;
    }

    .role-btn span {
        font-size: 11px;
    }

    h1.headline {
        font-size: 24px;
    }

    .field-box {
        padding: 16px 18px;
    }

    .submit-btn {
        padding: 16px 20px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-wrap {
        animation: card-in 0.5s var(--ease) both;
    }
}

/* =========================================================
   BACK TO HOME
   Always visible outside the login card
========================================================= */

.back-to-landing {
    position: fixed;

    top: 24px;
    left: 28px;

    z-index: 9999;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 16px;

    color: #cbd5e1;
    text-decoration: none;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;

    background: rgba(8, 24, 48, 0.72);

    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 10px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.back-to-landing i {
    font-size: 13px;
}

.back-to-landing:hover {
    color: #ffffff;

    background: rgba(14, 45, 82, 0.88);

    border-color: rgba(34, 211, 238, 0.55);

    transform: translateX(-2px);
}


/* ==========================================================
   AI-CRIMS LOGIN — PROFESSIONAL / ACADEMIC VISUAL OVERRIDE
   Visual-only. Authentication markup, JS, routes and form logic
   are untouched.
========================================================== */

/* Remove the "gaming HUD" feeling while keeping the dark-blue
   identity and enough visual life. */
:root{
  --void:#071127;
  --deep:#091735;
  --panel:#101d3a;
  --panel-glass:rgba(16,29,58,.82);
  --panel-glass-soft:rgba(19,35,67,.62);
  --line:rgba(170,193,232,.16);
  --electric:#5d8df5;
  --cyan:#42c8d5;
  --royal:#426fd6;
  --violet:#7565cf;
  --ivory:#f1f5ff;
  --muted:#aebbd4;
  --muted-dim:#7787a7;
}

body{
  background:
    radial-gradient(720px 600px at 12% 18%,rgba(74,118,225,.17),transparent 65%),
    radial-gradient(650px 560px at 88% 80%,rgba(62,189,202,.10),transparent 65%),
    linear-gradient(135deg,#06102a,#091735 55%,#071229);
}

/* Quiet the circuit-board / neon-beam background. */
.scene::after{
  opacity:.045;
}

.beam{
  opacity:.12;
}

.shell{
  gap:72px;
  padding:46px 48px;
}

/* Left panel: polished institutional introduction. */
.promo-panel{
  max-width:600px;
}

.promo-brand{
  margin-bottom:34px;
}

.promo-logo{
  width:54px;
  height:54px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(156,183,230,.22);
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}

.promo-logo::after{
  display:none;
}

.promo-brand-name{
  font-family:'Inter',sans-serif;
  font-size:22px;
  font-weight:800;
}

.promo-brand-sub{
  font-family:'Inter',sans-serif;
  font-size:10px;
  letter-spacing:.07em;
  color:#8090ae;
}

.promo-badge{
  padding:9px 14px;
  margin-bottom:22px;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(147,174,220,.18);
  color:#b9d1ff;
  font-family:'Inter',sans-serif;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:none;
}

.promo-badge i{
  color:#7c9df2;
}

.promo-headline{
  font-family:'Inter',sans-serif;
  font-size:clamp(40px,4.3vw,58px);
  letter-spacing:-.045em;
  line-height:1.05;
  margin-bottom:18px;
}

.promo-headline span{
  background:linear-gradient(110deg,#75a2ff,#59cbd4);
  -webkit-background-clip:text;
  background-clip:text;
}

.promo-text{
  color:#aebbd4;
  max-width:520px;
  font-size:15.5px;
  line-height:1.75;
  margin-bottom:30px;
}

.promo-features{
  gap:12px;
  margin-bottom:26px;
}

.feature-card{
  padding:18px 18px 19px;
  border-radius:15px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(164,188,226,.13);
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  backdrop-filter:blur(12px);
}

.feature-card:hover{
  transform:translateY(-3px);
  border-color:rgba(118,161,232,.30);
}

.feature-icon{
  width:40px;
  height:40px;
  margin-bottom:12px;
  border-radius:11px;
  background:rgba(88,128,213,.12);
  border:1px solid rgba(118,157,222,.18);
  color:#8cb2ff;
}

.feature-title{
  font-family:'Inter',sans-serif;
  font-size:15px;
}

.feature-desc{
  color:#8797b5;
  font-size:12.5px;
}

.promo-quote{
  font-family:'Inter',sans-serif;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:none;
  color:#7182a3;
}

/* Login card: clean glass, no futuristic polygon/HUD treatment. */
.card-wrap{
  max-width:500px;
  animation:card-in .65s var(--ease) both;
}

.card-glow{
  display:none;
}

.card{
  border-radius:24px!important;
  background:rgba(14,27,54,.91)!important;
  border:1px solid rgba(174,197,235,.17)!important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.28),
    0 8px 24px rgba(20,48,103,.10)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

/* Tone down the branded header inside the card. */
.brand-row{
  margin-bottom:26px!important;
}

.brand-mark{
  border-radius:13px!important;
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(163,188,229,.18)!important;
  box-shadow:none!important;
}

.brand-mark::after{
  display:none!important;
}

.brand-tag{
  font-family:'Inter',sans-serif!important;
  font-size:9px!important;
  letter-spacing:.045em!important;
  color:#8292b0!important;
}

/* Tabs become conventional application navigation. */
.auth-tabs{
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(164,188,226,.10)!important;
  border-radius:11px!important;
  padding:4px!important;
}

.auth-tab{
  border-radius:8px!important;
  font-family:'Inter',sans-serif!important;
  color:#8d9dbb!important;
}

.auth-tab.active{
  color:#edf3ff!important;
  background:rgba(91,128,210,.16)!important;
}

.auth-tab-indicator{
  display:none!important;
}

/* Inputs/buttons should read as a school/research system, not a game. */
.card input,
.card select{
  border-radius:11px!important;
  background:rgba(3,12,30,.38)!important;
  border-color:rgba(164,188,226,.15)!important;
  color:#eef4ff!important;
}

.card input:focus,
.card select:focus{
  border-color:rgba(100,145,230,.55)!important;
  box-shadow:0 0 0 3px rgba(91,141,229,.10)!important;
}

.card button[type="submit"],
.card .btn-primary{
  border-radius:11px!important;
  background:linear-gradient(135deg,#527fe1,#6070cf)!important;
  box-shadow:0 10px 24px rgba(65,94,181,.20)!important;
}

.card button[type="submit"]:hover,
.card .btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(65,94,181,.26)!important;
}

.login-footer .back-to-home{
  color:#8a99b5!important;
}

.login-footer .back-to-home:hover{
  color:#b8c9e9!important;
}

/* Mobile: keep the same calmer visual language. */
@media (max-width:940px){
  .shell{
    gap:30px;
    padding:34px 20px 48px;
  }
}

@media (max-width:620px){
  .promo-brand{margin-bottom:25px;}
  .promo-features{gap:10px;}
  .feature-card{padding:15px;}
  .card{border-radius:20px!important;}
}

/* ==========================================================
   LOGIN — PREMIUM ACADEMIC / PRODUCT UI
   Keeps the existing authentication markup and functionality,
   but removes the remaining gaming/HUD feeling.
========================================================== */

:root{
  --login-bg:#070a20;
  --login-panel:#101735;
  --login-panel-2:#0c1230;
  --login-blue:#5d89f5;
  --login-violet:#8d6be8;
  --login-cyan:#55d6e4;
  --login-text:#edf2ff;
  --login-muted:#9ba8c5;
}

body{
  background:
    radial-gradient(650px 520px at 14% 12%,rgba(80,126,239,.16),transparent 70%),
    radial-gradient(650px 520px at 86% 78%,rgba(133,91,232,.14),transparent 70%),
    linear-gradient(135deg,#070a20 0%,#0a1030 52%,#070a20 100%)!important;
}

.scene{
  background:
    radial-gradient(520px 420px at 78% 30%,rgba(90,119,235,.10),transparent 72%),
    linear-gradient(145deg,#070a20,#0a1030 55%,#070a20)!important;
}

.scene::after{opacity:.025!important;}
.beam{opacity:.06!important;}

.shell{
  max-width:1320px!important;
  gap:84px!important;
  padding:50px 42px!important;
}

/* Left side reads like a calm product introduction. */
.promo-panel{max-width:570px!important;}

.promo-logo{
  width:52px!important;
  height:52px!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(151,171,230,.18)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.18)!important;
}

.promo-logo::after{display:none!important;}

.promo-brand-name{
  font-family:'Inter',sans-serif!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
}

.promo-brand-sub{
  font-family:'Inter',sans-serif!important;
  letter-spacing:.055em!important;
}

.promo-badge{
  border-radius:999px!important;
  background:rgba(91,124,224,.09)!important;
  border:1px solid rgba(126,151,231,.18)!important;
  color:#b7c7ef!important;
  text-transform:none!important;
  letter-spacing:.01em!important;
}

.promo-headline{
  font-family:'Inter',sans-serif!important;
  font-size:clamp(42px,4.4vw,62px)!important;
  line-height:1.02!important;
  letter-spacing:-.055em!important;
}

.promo-headline span{
  background:linear-gradient(110deg,#78a5ff,#9a77eb,#5ed3df)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

.promo-text{
  color:#aab6d3!important;
  line-height:1.78!important;
}

.promo-features{
  gap:12px!important;
}

.feature-card{
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(21,29,70,.76),rgba(11,17,47,.66))!important;
  border:1px solid rgba(151,171,230,.12)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.13)!important;
}

.feature-card:hover{
  border-color:rgba(118,151,239,.28)!important;
  box-shadow:0 22px 50px rgba(37,54,135,.16)!important;
}

.feature-icon{
  background:linear-gradient(145deg,rgba(83,128,239,.17),rgba(137,93,238,.15))!important;
  border-color:rgba(119,151,237,.18)!important;
  color:#91afff!important;
}

.promo-quote{color:#7282a4!important;}

/* Main login card becomes the visual anchor, without gamer styling. */
.card-wrap{max-width:470px!important;}
.card-glow{display:none!important;}

.card{
  border-radius:28px!important;
  padding:36px!important;
  background:linear-gradient(145deg,rgba(18,26,61,.96),rgba(11,17,45,.96))!important;
  border:1px solid rgba(159,179,236,.15)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(22px)!important;
}

.brand-row{margin-bottom:28px!important;}

.brand-mark{
  width:46px!important;
  height:46px!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(153,174,231,.16)!important;
  box-shadow:none!important;
}

.brand-mark::after{display:none!important;}
.brand-tag{color:#7888a9!important;letter-spacing:.04em!important;}

.auth-tabs{
  border-radius:13px!important;
  background:rgba(5,10,29,.42)!important;
  border:1px solid rgba(150,170,230,.10)!important;
  padding:4px!important;
}

.auth-tab{
  border-radius:9px!important;
  font-family:'Inter',sans-serif!important;
  color:#8796b6!important;
}

.auth-tab.active{
  color:#edf2ff!important;
  background:linear-gradient(135deg,rgba(83,125,224,.20),rgba(132,97,224,.16))!important;
}

.auth-tab-indicator{display:none!important;}

.card input,
.card select,
.card textarea{
  border-radius:12px!important;
  background:rgba(5,10,29,.48)!important;
  border:1px solid rgba(149,169,226,.13)!important;
}

.card input:focus,
.card select:focus,
.card textarea:focus{
  border-color:rgba(108,146,234,.55)!important;
  box-shadow:0 0 0 3px rgba(91,129,226,.09)!important;
}

.card button[type="submit"],
.card .btn-primary,
.submit-btn{
  min-height:46px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#557fe6,#8067df)!important;
  border:1px solid rgba(177,191,248,.18)!important;
  box-shadow:0 14px 30px rgba(67,83,170,.20)!important;
}

.card button[type="submit"]:hover,
.card .btn-primary:hover,
.submit-btn:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 18px 35px rgba(67,83,170,.27)!important;
}

.login-footer .back-to-home{color:#8391ad!important;}
.login-footer .back-to-home:hover{color:#a9bcdf!important;}

@media(max-width:940px){
  .shell{gap:34px!important;padding:36px 20px 48px!important;}
}

@media(max-width:620px){
  .card{padding:26px 20px!important;border-radius:22px!important;}
  .promo-headline{font-size:42px!important;}
}

/* Living ambient layer — decorative only, behind the existing login UI. */
.scene .ai-life-canvas { z-index: 1; opacity: .58; }
.scene .ai-life-aura { z-index: 1; }
.shell { z-index: 3; }
.scene::before, .scene::after { z-index: 0; }
#graphCanvas { z-index: 2; opacity: .78; }

/* ==========================================================
   AI-CRIMS LOGIN FINAL POLISH
========================================================== */
.login-page, body{
  overflow-x:hidden;
}
.shell{
  min-height:100svh !important;
  padding:92px 32px 34px !important;
  align-items:center !important;
}
.card-wrap{
  width:min(100%,520px) !important;
  max-width:520px !important;
}
.card{
  padding:34px 36px 28px !important;
  border-radius:24px !important;
}
.brand-row{
  margin-bottom:20px !important;
}
.auth-tabs{
  margin-bottom:24px !important;
}
.form-row{
  margin-bottom:20px !important;
}
.field-box{
  padding:13px 16px !important;
}
.submit-btn{
  padding:15px 20px !important;
}
.login-footer{
  margin-top:16px !important;
}
@media (max-width:940px){
  .shell{
    padding:78px 20px 28px !important;
  }
}
@media (max-width:640px){
  .shell{
    padding:70px 14px 22px !important;
  }
  .card{
    padding:28px 22px 22px !important;
  }
}
/* =========================================================
   AI-CRIMS LOGIN — LANDING-MATCHED GLOW DESIGN
   VISUAL ONLY — DO NOT CHANGE FORM / ROUTES / FUNCTIONALITY
   ========================================================= */

/* ---------- PAGE BACKGROUND ---------- */

body {
    background:
        radial-gradient(circle at 15% 20%, rgba(48, 122, 255, .18), transparent 30%),
        radial-gradient(circle at 85% 25%, rgba(124, 82, 255, .16), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(0, 200, 255, .10), transparent 35%),
        #061127 !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(115deg, transparent 0 48%, rgba(90, 150, 255, .035) 49%, transparent 50%),
        linear-gradient(65deg, transparent 0 48%, rgba(90, 150, 255, .025) 49%, transparent 50%);
    background-size: 180px 180px;
    opacity: .8;
}

/* ---------- MAIN LOGIN AREA ---------- */

.login-page,
.login-container,
.auth-page,
.auth-container {
    position: relative;
    z-index: 1;
}

/* ---------- SOFT AMBIENT GLOW ---------- */

.login-page::before,
.auth-page::before {
    content: "";
    position: fixed;
    width: 520px;
    height: 520px;
    left: -180px;
    top: 18%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(45, 132, 255, .16),
        rgba(45, 132, 255, .05) 40%,
        transparent 70%
    );
    filter: blur(25px);
    pointer-events: none;
}

.login-page::after,
.auth-page::after {
    content: "";
    position: fixed;
    width: 480px;
    height: 480px;
    right: -160px;
    bottom: 5%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(139, 92, 246, .15),
        rgba(34, 211, 238, .05) 42%,
        transparent 70%
    );
    filter: blur(30px);
    pointer-events: none;
}

/* =========================================================
   LOGIN CARD
   ========================================================= */

.login-card,
.auth-card,
.login-form-container,
.login-box {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(18, 31, 67, .94),
            rgba(9, 19, 45, .96)
        ) !important;

    border: 1px solid rgba(92, 151, 255, .30) !important;

    border-radius: 26px !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .38),
        0 0 45px rgba(55, 125, 255, .10),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Top glowing line */

.login-card::before,
.auth-card::before,
.login-form-container::before,
.login-box::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #39cfff,
        #596cff,
        #b36cff,
        transparent
    );

    box-shadow:
        0 0 12px rgba(54, 198, 255, .65),
        0 0 28px rgba(104, 92, 255, .35);
}

/* Soft internal light */

.login-card::after,
.auth-card::after,
.login-form-container::after,
.login-box::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -130px;
    top: -130px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(95, 105, 255, .16),
        transparent 70%
    );

    pointer-events: none;
}

/* =========================================================
   LOGO
   ========================================================= */

.login-card img,
.auth-card img,
.login-box img {
    filter:
        drop-shadow(0 0 8px rgba(46, 190, 255, .45))
        drop-shadow(0 0 22px rgba(75, 105, 255, .25));
}

/* =========================================================
   HEADINGS
   ========================================================= */

.login-card h1,
.login-card h2,
.auth-card h1,
.auth-card h2,
.login-box h1,
.login-box h2 {
    color: #f5f8ff !important;
    letter-spacing: -.025em;
}

.login-card h1 span,
.login-card h2 span,
.auth-card h1 span,
.auth-card h2 span {
    background: linear-gradient(
        90deg,
        #55cfff,
        #668cff 48%,
        #c477ff
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================================
   SIGN IN / SIGN UP TABS
   ========================================================= */

.login-tabs,
.auth-tabs,
.login-toggle {
    background: rgba(3, 12, 31, .72) !important;
    border: 1px solid rgba(100, 150, 255, .16) !important;
    border-radius: 13px !important;
    padding: 3px !important;
}

.login-tabs .active,
.auth-tabs .active,
.login-toggle .active {
    background:
        linear-gradient(
            100deg,
            #287cff,
            #765cff,
            #b764ef
        ) !important;

    color: #fff !important;

    box-shadow:
        0 0 16px rgba(75, 112, 255, .32),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* =========================================================
   INPUTS
   ========================================================= */

.login-card input,
.auth-card input,
.login-box input {
    background: rgba(12, 27, 57, .82) !important;

    border: 1px solid rgba(109, 153, 226, .25) !important;

    color: #f4f7ff !important;

    border-radius: 11px !important;

    box-shadow:
        inset 0 1px 8px rgba(0,0,0,.15) !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease !important;
}

.login-card input:focus,
.auth-card input:focus,
.login-box input:focus {
    outline: none !important;

    background: rgba(14, 34, 70, .95) !important;

    border-color: #4daeff !important;

    box-shadow:
        0 0 0 3px rgba(55, 157, 255, .10),
        0 0 20px rgba(55, 157, 255, .16),
        inset 0 0 10px rgba(55, 157, 255, .04) !important;
}

.login-card input::placeholder,
.auth-card input::placeholder,
.login-box input::placeholder {
    color: #7283a8 !important;
}

/* =========================================================
   LABELS
   ========================================================= */

.login-card label,
.auth-card label,
.login-box label {
    color: #8eace0 !important;
}

/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.login-card button[type="submit"],
.auth-card button[type="submit"],
.login-box button[type="submit"] {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            100deg,
            #318bff 0%,
            #596fff 48%,
            #b85fe9 100%
        ) !important;

    border: 0 !important;
    border-radius: 11px !important;

    color: #fff !important;

    box-shadow:
        0 10px 28px rgba(58, 111, 255, .28),
        0 0 24px rgba(75, 114, 255, .14) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease !important;
}

.login-card button[type="submit"]::before,
.auth-card button[type="submit"]::before,
.login-box button[type="submit"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.24),
        transparent
    );

    transform: skewX(-20deg);
    transition: left .55s ease;
}

.login-card button[type="submit"]:hover,
.auth-card button[type="submit"]:hover,
.login-box button[type="submit"]:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 35px rgba(58, 111, 255, .38),
        0 0 32px rgba(99, 102, 241, .22) !important;

    filter: brightness(1.06);
}

.login-card button[type="submit"]:hover::before,
.auth-card button[type="submit"]:hover::before,
.login-box button[type="submit"]:hover::before {
    left: 140%;
}

/* =========================================================
   LINKS
   ========================================================= */

.login-card a,
.auth-card a,
.login-box a {
    color: #65c8ff;
    transition: color .2s ease, text-shadow .2s ease;
}

.login-card a:hover,
.auth-card a:hover,
.login-box a:hover {
    color: #9bdfff;
    text-shadow: 0 0 12px rgba(78, 202, 255, .35);
}

/* =========================================================
   CHECKBOX
   ========================================================= */

.login-card input[type="checkbox"],
.auth-card input[type="checkbox"],
.login-box input[type="checkbox"] {
    accent-color: #4d8cff;
}

/* =========================================================
   DIVIDERS
   ========================================================= */

.login-card hr,
.auth-card hr,
.login-box hr {
    border: 0 !important;
    border-top: 1px solid rgba(111, 151, 220, .16) !important;
}

/* =========================================================
   SMALL TEXT
   ========================================================= */

.login-card p,
.auth-card p,
.login-box p {
    color: #8798bb;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .login-card,
    .auth-card,
    .login-form-container,
    .login-box {
        border-radius: 22px !important;
    }
}

@media (max-width: 600px) {

    body {
        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(62, 123, 250, .18),
                transparent 45%
            ),
            #061127 !important;
    }

    .login-card,
    .auth-card,
    .login-form-container,
    .login-box {
        border-radius: 20px !important;
        box-shadow:
            0 20px 50px rgba(0,0,0,.35),
            0 0 30px rgba(70,120,255,.10) !important;
    }
}