@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --ki-bg: #171717;
    --ki-surface: #1e1e1e;
    --ki-surface-soft: rgba(255, 255, 255, 0.03);
    --ki-surface-soft-2: rgba(255, 255, 255, 0.04);
    --ki-border: rgba(255, 255, 255, 0.08);
    --ki-border-soft: rgba(255, 255, 255, 0.06);
    --ki-text: #ffffff;
    --ki-text-soft: rgba(255, 255, 255, 0.70);
    --ki-text-muted: rgba(255, 255, 255, 0.48);
    --ki-text-faint: rgba(255, 255, 255, 0.30);
    --ki-primary: #2CA0FF;
    --ki-primary-soft: rgba(44, 160, 255, 0.08);
    --ki-success: #34d399;
    --ki-danger: #f87171;
    --ki-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
    --ki-radius: 20px;
    --ki-radius-sm: 14px;
    --ki-max: 1280px;
}

html, body {
    background: var(--ki-bg);
    color: var(--ki-text);
    font-family: 'Inter', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.ki-page,
.ki-auth-page {
    min-height: 100vh;
    background: var(--ki-bg);
    color: var(--ki-text);
}

.ki-container {
    width: min(var(--ki-max), calc(100% - 2rem));
    margin-inline: auto;
}

.ki-topbar,
.ki-subbar {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--ki-border-soft);
    background: rgba(23, 23, 23, 0.82);
    backdrop-filter: blur(12px);
}

.ki-topbar__inner,
.ki-subbar__inner {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ki-topbar__actions,
.ki-hero__actions,
.ki-stack-gap-sm {
    display: flex;
    gap: .85rem;
    flex-wrap: wrap;
}

.ki-nav-links {
    display: flex;
    gap: 2rem;
}

.ki-nav-links a,
.ki-back-link {
    color: var(--ki-text-muted);
    font-size: .95rem;
    transition: color .2s ease;
}

.ki-nav-links a:hover,
.ki-back-link:hover,
.ki-link:hover {
    color: var(--ki-text);
}

.ki-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    max-width: 100%;
}

.ki-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.ki-brand__text {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ki-header-link { display: inline-flex; align-items: center; }

.ki-btn {
    /* box-sizing: border-box e' necessario perche' .ki-btn--full imposta width:100% - senza,
       il padding orizzontale (1.2rem per lato) e il bordo si sommano a quel 100%, facendo
       "uscire" il bottone dalla card che lo contiene (es. bottoni nella verify-email). */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: .85rem 1.2rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    transition: all .2s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.ki-btn--large { padding: 1rem 1.4rem; }
.ki-btn--full { width: 100%; }

.ki-btn--primary {
    background: var(--ki-primary);
    color: #fff;
    box-shadow: 0 16px 30px rgba(44, 160, 255, 0.22);
}

.ki-btn--primary:hover { background: #2497f5; }

.ki-btn--ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--ki-text-soft);
}

.ki-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Usati dalla dashboard utente (UserHomeCore.razor): pulsanti secondari/piccoli sulle righe
   applicazione ("Scollega") e pulsante distruttivo nella zona pericolosa (elimina account). */
.ki-btn--secondary {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--ki-border);
    color: var(--ki-text-soft);
}

.ki-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.ki-btn--small {
    padding: .55rem .9rem;
    font-size: .82rem;
}

.ki-btn--danger {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
    color: var(--ki-danger);
}

.ki-btn--danger:hover {
    background: rgba(248, 113, 113, 0.2);
}

/* Variante "soft" non distruttiva (stessa struttura di .ki-btn--danger ma in blu), usata per
   azioni secondarie di rilievo come "Modifica account" nella dashboard utente. */
.ki-btn--info {
    background: rgba(44, 160, 255, 0.12);
    border-color: rgba(44, 160, 255, 0.35);
    color: var(--ki-primary);
}

.ki-btn--info:hover {
    background: rgba(44, 160, 255, 0.2);
}

.ki-hero {
    position: relative;
    overflow: hidden;
    padding: 6rem 0 5rem;
}

.ki-hero__glow,
.ki-center-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ki-hero__glow::before,
.ki-center-glow::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 90vw);
    height: 460px;
    border-radius: 999px;
    background: rgba(44, 160, 255, 0.06);
    filter: blur(70px);
}

.ki-hero__glow::before { top: -180px; }
.ki-center-glow::before { top: 18%; }

.ki-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 4rem;
    align-items: center;
}

.ki-chip,
.ki-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.ki-chip {
    margin-bottom: 1.2rem;
    border-radius: 999px;
    padding: .6rem .9rem;
    border: 1px solid rgba(44, 160, 255, 0.20);
    background: rgba(44, 160, 255, 0.07);
    color: var(--ki-primary);
    font-weight: 700;
}

.ki-chip__dot,
.ki-status-live span {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--ki-primary);
    display: inline-block;
}

.ki-title-xl {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.ki-title-xl span,
.ki-link,
.ki-icon-box {
    color: var(--ki-primary);
}

.ki-copy-lg {
    max-width: 40rem;
    margin-top: 1.4rem;
    color: var(--ki-text-muted);
    font-size: 1rem;
    line-height: 1.8;
}

.ki-card,
.ki-status-card,
.ki-feature-card,
.ki-panel-card,
.ki-cta-card,
.ki-note-card {
    border: 1px solid var(--ki-border);
    background: var(--ki-surface);
    border-radius: var(--ki-radius);
    box-shadow: var(--ki-shadow);
}

.ki-status-card {
    padding: 1.6rem;
}

.ki-status-card__head,
.ki-meta-row,
.ki-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ki-status-live {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--ki-success);
    font-size: .82rem;
    font-weight: 600;
}

.ki-status-list {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.ki-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .95rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--ki-border-soft);
    background: rgba(255, 255, 255, 0.025);
}

.ki-status-row span { color: var(--ki-text-soft); }
.ki-status-row strong { color: var(--ki-success); font-size: .82rem; }

/* Modificatore per righe di conferma distruttiva (es. "Scollega applicazione",
   "Elimina account" nella dashboard utente) sopra la stessa .ki-status-row. */
.ki-status-row--danger {
    background: rgba(248, 113, 113, 0.06);
    border-color: rgba(248, 113, 113, 0.3);
}

/* Tab della pagina Account Settings (Impostazioni utente / Applications / Billing). */
.ki-tabs {
    display: flex;
    gap: .5rem;
    border-bottom: 1px solid var(--ki-border-soft);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.ki-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .85rem 1rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ki-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease;
}

.ki-tab:hover {
    color: var(--ki-text-soft);
}

.ki-tab--active {
    color: var(--ki-primary);
    border-bottom-color: var(--ki-primary);
}

/* Pagine legali (Privacy/Commercial/Third-Party policy): spaziatura tra le sezioni dentro
   la stessa .ki-card, i cui <h2>/<p> non hanno margini dedicati altrove nel file. */
.ki-legal-content h2 {
    margin: 1.75rem 0 .5rem;
    font-size: 1.1rem;
}

.ki-legal-content h2:first-of-type {
    margin-top: 0;
}

/* Cookie Policy: tabella elenco cookie dentro .ki-legal-content. Il wrapper scrolla in
   orizzontale invece di far uscire la tabella dalla card quando le colonne (es. Finalita')
   non ci stanno in larghezza, specie su viewport stretti. */
.ki-cookie-table-wrap {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
}

.ki-cookie-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: .88rem;
}

.ki-cookie-table th,
.ki-cookie-table td {
    text-align: left;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--ki-border-soft);
    vertical-align: top;
}

.ki-cookie-table th {
    color: var(--ki-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

/* Cookie banner: barra fissa in fondo alla viewport (prima non aveva alcuno stile di base,
   solo la regola flex-wrap nel media query sotto, quindi finiva in fondo al flusso normale
   della pagina invece che overlay). */
.ki-cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: calc(100% - 2.5rem);
    max-width: 720px;
    padding: 1.1rem 1.4rem;
    background: var(--ki-surface);
    border: 1px solid var(--ki-border);
    border-radius: var(--ki-radius-sm);
    box-shadow: var(--ki-shadow);
}

.ki-cookie-banner__content {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .88rem;
    color: var(--ki-text-soft);
}

.ki-cookie-banner__content strong {
    color: var(--ki-text);
    font-size: .95rem;
}

.ki-cookie-banner__content .ki-link {
    align-self: flex-start;
    font-size: .82rem;
    text-decoration: underline;
}

.ki-cookie-banner .ki-btn {
    flex-shrink: 0;
}

/* Dashboard utente (UserHomeCore.razor): titolo/sottotitolo di sezione dentro una .ki-card, e
   messaggio per liste vuote (es. nessuna applicazione collegata ancora). */
.ki-panel-title {
    margin: 0 0 .35rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ki-panel-subtitle {
    margin: 0 0 1.1rem;
    color: var(--ki-text-muted);
    font-size: .88rem;
    line-height: 1.6;
}

.ki-empty-note {
    color: var(--ki-text-muted);
    font-size: .9rem;
    padding: .95rem 1rem;
    border-radius: 14px;
    border: 1px dashed var(--ki-border-soft);
}

.ki-status-card__footer {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ki-border-soft);
}

.ki-meta-row {
    color: var(--ki-text-faint);
    font-size: .78rem;
}

.ki-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
    margin-top: .9rem;
}

.ki-mini-stats div {
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: .85rem .45rem;
}

.ki-mini-stats strong {
    display: block;
    font-size: .98rem;
}

.ki-mini-stats span {
    display: block;
    margin-top: .2rem;
    color: var(--ki-text-faint);
    font-size: .72rem;
}

.ki-band {
    border-top: 1px solid var(--ki-border-soft);
    border-bottom: 1px solid var(--ki-border-soft);
    background: rgba(255, 255, 255, 0.015);
}

.ki-section,
.ki-band {
    padding: 4rem 0;
}

.ki-section--compact { padding-top: 1rem; padding-bottom: 5rem; }

.ki-section-heading {
    max-width: 40rem;
    margin-bottom: 1.75rem;
}

.ki-section-heading h2,
.ki-cta-card h2,
.ki-auth-intro h1,
.ki-auth-card h1 {
    margin: .5rem 0 0;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.ki-section-heading p,
.ki-feature-card p,
.ki-panel-card p,
.ki-cta-card p,
.ki-auth-intro p,
.ki-auth-card p,
.ki-note-card p,
.ki-foot-copy {
    color: var(--ki-text-muted);
    line-height: 1.7;
}

.ki-feature-grid {
    display: grid;
    gap: 1.1rem;
}

.ki-feature-grid--three { grid-template-columns: repeat(3, 1fr); }
.ki-feature-grid--two { grid-template-columns: repeat(2, 1fr); }

.ki-feature-card,
.ki-panel-card,
.ki-note-card {
    padding: 1.4rem;
}

.ki-feature-card h3,
.ki-panel-card h3 {
    margin: .7rem 0 .5rem;
    font-size: 1.05rem;
}

.ki-icon-box {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(44, 160, 255, 0.08);
    border: 1px solid rgba(44, 160, 255, 0.22);
    font-size: 1.25rem;
}

.ki-cta-card {
    padding: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.ki-cta-card--centered {
    justify-content: center;
    text-align: center;
}

.ki-cta-card--centered > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ki-auth-main {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding: 3rem 1rem;
}

.ki-auth-wrap {
    position: relative;
    width: min(100%, 520px);
}

.ki-auth-intro {
    text-align: center;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.ki-logo-img {
    height: 2rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.ki-brand--compact .ki-logo-img {
    height: 3.5rem;
    width: auto;
    max-width: 100%;
}

.ki-auth-intro .ki-logo-img {
    height: 4rem;
    width: auto;
    max-width: 100%;
}

.ki-icon-panel,
.ki-success-icon {
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 auto 1rem;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(44, 160, 255, 0.08);
    border: 1px solid rgba(44, 160, 255, 0.22);
    font-size: 1.4rem;
    color: var(--ki-primary);
}

.ki-auth-card {
    padding: 1.75rem;
}

.ki-auth-card--success {
    text-align: center;
}

.ki-register-success-action {
    margin-top: 1rem;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    padding-inline: 1rem;
    margin-inline: auto;
}

@media (max-width: 480px) {
    .ki-register-success-action {
        width: 100%;
    }
}

.ki-auth-card--success p span { color: var(--ki-text-soft); font-weight: 600; }

.ki-field {
    display: grid;
    gap: .45rem;
    margin-bottom: 1rem;
}

.ki-field label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ki-text-faint);
    text-transform: uppercase;
    letter-spacing: .14em;
}

.ki-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.ki-input-wrap {
    position: relative;
}

.ki-input,
input.ki-input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ki-text);
    padding: .95rem 1rem;
    outline: none;
    font: inherit;
    box-sizing: border-box;
}

/* NOTA: qui in precedenza c'era una regola che nascondeva l'icona del calendario
   (::-webkit-calendar-picker-indicator) per toglierla dall'ordine di tabulazione. E' stata
   rimossa: nascondere/disabilitare l'icona costringe a digitare la data a mano nei
   sottocampi (giorno/mese/anno), e i problemi di digitazione della data segnalati di
   recente (campo che si svuota, tasto anno che manda in errore) sono comparsi proprio da
   quando quella regola era attiva. Meglio un'icona del calendario pienamente funzionante
   (e quindi di nuovo raggiungibile con Tab) che una registrazione che non si completa: se
   vuoi ancora togliere quel singolo stop di tabulazione in futuro serve un date-picker
   personalizzato via JS, non e' ottenibile in modo affidabile solo con CSS. */

.ki-input::placeholder { color: rgba(255, 255, 255, .22); }
.ki-input:focus { border-color: rgba(44, 160, 255, .55); background: rgba(44, 160, 255, .03); }
.ki-input--with-action { padding-right: 4.25rem; }

.ki-input-action {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--ki-text-faint);
    cursor: pointer;
    font-weight: 600;
}

.ki-input-action:hover { color: var(--ki-text-soft); }

.ki-error {
    color: var(--ki-danger);
    font-size: .82rem;
}

.ki-error-box {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.30);
    border-radius: var(--ki-radius-sm);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* Riepilogo unico degli errori di validazione, mostrato in fondo al form (prima del
   pulsante di submit) invece che sotto ogni singolo campo, per non far "saltare" il layout
   a ogni errore/campo compilato. Vedi KiValidationSummary.razor. */
.ki-error-summary {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.30);
    border-radius: var(--ki-radius-sm);
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
}

.ki-error-summary ul {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.ki-error-summary li {
    color: var(--ki-danger);
    font-size: .85rem;
    line-height: 1.5;
}

.ki-error-summary li + li { margin-top: .25rem; }

/* Il campo/i campi coinvolti restano comunque bordati di rosso: Blazor applica in automatico
   la classe "invalid" (o "modified invalid") agli InputText/InputDate/ecc. non validi
   tramite EditContext.FieldCssClassProvider, qui basta stilizzarla. */
.ki-input.invalid,
.ki-select.invalid {
    border-color: var(--ki-danger);
    background: rgba(248, 113, 113, 0.04);
}

.ki-error-message {
    color: #f87171;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
}

.ki-user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    border-left: 1px solid var(--ki-border-soft);
}

.ki-user-name {
    font-size: 0.95rem;
    color: var(--ki-text-soft);
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ki-user-menu {
        flex-direction: column;
        align-items: flex-end;
        border-left: none;
        gap: 0.5rem;
        padding: 0;
    }

    .ki-user-name {
        display: none;
    }
}

.ki-form-row { margin-bottom: 1rem; }
.ki-form-row--start { justify-content: flex-start; }

.ki-link {
    font-weight: 600;
    transition: color .2s ease;
}

.ki-foot-copy {
    text-align: center;
    margin-top: 1.1rem;
}

.ki-strength {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    margin-top: .6rem;
}

.ki-strength__bars {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .45rem;
}

.ki-strength__bar {
    height: .38rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.ki-strength__bar.is-active { background: var(--ki-primary); }

.ki-strength__bar--danger.is-active { background: var(--ki-danger); }
.ki-strength__bar--warning.is-active { background: #f59e0b; }
.ki-strength__bar--success.is-active { background: var(--ki-success); }

.ki-strength__label {
    color: var(--ki-text-faint);
    font-size: .8rem;
    white-space: nowrap;
}

.ki-strength--danger .ki-strength__label { color: var(--ki-danger); font-weight: 600; }
.ki-strength--warning .ki-strength__label { color: #f59e0b; font-weight: 600; }
.ki-strength--success .ki-strength__label { color: var(--ki-success); font-weight: 600; }

.ki-subbar__actions {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
}

.ki-language-picker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.ki-language-picker__label {
    color: var(--ki-text-faint);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ki-language-picker__select {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--ki-text);
    padding: .7rem .9rem;
    padding-right: 2.5rem;
    font: inherit;
    font-size: .95rem;
    box-sizing: border-box;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.ki-language-picker__select:focus {
    outline: none;
    border-color: rgba(44, 160, 255, .55);
}

.ki-language-picker .ki-select-wrapper {
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
}

.ki-language-picker .ki-select-wrapper:focus-within {
    border-color: rgba(44, 160, 255, .55);
    background: rgba(44, 160, 255, .03);
}

.ki-language-picker .ki-select-arrow {
    width: 1rem;
    height: 1rem;
    right: 0.7rem;
}

.ki-spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(23, 23, 23, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
}

.ki-spinner {
    position: relative;
    width: 3rem;
    height: 3rem;
}

.ki-spinner__ring {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(44, 160, 255, 0.1);
    border-top-color: var(--ki-primary);
    border-radius: 50%;
    animation: ki-spinner-spin 1.2s linear infinite;
}

.ki-spinner__ring:nth-child(1) { animation-delay: -0.45s; }
.ki-spinner__ring:nth-child(2) { animation-delay: -0.3s; }
.ki-spinner__ring:nth-child(3) { animation-delay: -0.15s; }

@keyframes ki-spinner-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ki-spinner__text {
    margin-top: 2rem;
    color: var(--ki-text-soft);
    font-size: 1rem;
    font-weight: 500;
}

@media (max-width: 960px) {
    .ki-nav-links { display: none; }
    .ki-hero__grid,
    .ki-feature-grid--three,
    .ki-feature-grid--two,
    .ki-cta-card {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .ki-grid-2,
    .ki-mini-stats {
        grid-template-columns: 1fr;
    }

    .ki-topbar__actions .ki-btn--ghost { display: none; }

    .ki-title-xl {
        font-size: 2.3rem;
    }

    .ki-auth-card,
    .ki-status-card,
    .ki-feature-card,
    .ki-panel-card,
    .ki-cta-card {
        padding: 1.2rem;
    }

    .ki-topbar__inner,
    .ki-subbar__inner,
    .ki-topbar__actions,
    .ki-subbar__actions,
    .ki-cookie-banner {
        flex-wrap: wrap;
    }

    .ki-language-picker {
        width: 100%;
        justify-content: space-between;
    }

    .ki-language-picker__select {
        flex: 1;
    }

    .ki-brand--compact .ki-logo-img {
        height: 2.5rem;
        width: auto;
        max-width: 100%;
    }

    .ki-auth-intro .ki-logo-img {
        height: 2.8rem;
        width: auto;
        max-width: 100%;
    }
}

.ki-select-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.ki-select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ki-text);
    padding: .95rem 1rem;
    padding-right: 2.5rem;
    outline: none;
    font: inherit;
    font-size: .95rem;
    box-sizing: border-box;
    appearance: none;
    cursor: pointer;
}

.ki-select option {
    background: var(--ki-surface);
    color: var(--ki-text);
    padding: 0.5rem;
}

.ki-select option:checked {
    background: var(--ki-primary);
    color: #fff;
}

.ki-select::placeholder {
    color: rgba(255, 255, 255, .22);
}

.ki-select:focus {
    border-color: rgba(44, 160, 255, .55);
    background: rgba(44, 160, 255, .03);
}

.ki-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ki-select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    color: var(--ki-text-muted);
    pointer-events: none;
}

.ki-select:focus ~ .ki-select-arrow {
    color: var(--ki-primary);
}

/* Email Verification Styles */
.ki-auth-card--error {
    border-color: rgba(248, 113, 113, 0.2);
    background: rgba(248, 113, 113, 0.03);
}

.ki-error-icon {
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 auto 1rem;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.3);
    font-size: 1.5rem;
    color: var(--ki-danger);
    font-weight: bold;
}

.ki-error-message {
    text-align: center;
    color: var(--ki-text-soft);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.ki-verification-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ki-verification-message {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
}

.ki-verification-message--success {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: var(--ki-success);
}

.ki-verification-message--error {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--ki-danger);
}

.ki-mini-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(44, 160, 255, 0.1);
    border-top-color: var(--ki-primary);
    border-radius: 50%;
    animation: ki-spinner-spin 0.8s linear infinite;
    margin: 0 auto;
}