:root {
    --bot-gold: #f5b93f;
    --bot-gold-strong: #d99a1b;
    --bot-green: #22c55e;
    --bot-green-deep: #128342;
    --bot-blue: #3b82f6;
    --bot-red: #ef4444;
    --bot-bg: #050505;
    --bot-surface: #111111;
    --bot-surface-2: #18181b;
    --bot-surface-3: #27272a;
    --bot-text: #ffffff;
    --bot-muted: #a1a1aa;
    --bot-border: rgba(255, 255, 255, 0.1);
    --bot-card-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
    --text-theme-primary: var(--bot-text);
    --text-theme-secondary: var(--bot-muted);
    --text-info: var(--bot-gold);
    --accent: var(--bot-gold);
}

[data-theme="white"] {
    --bot-bg: #eef2f7;
    --bot-surface: #ffffff;
    --bot-surface-2: #f7f9fc;
    --bot-surface-3: #e7edf5;
    --bot-text: #111827;
    --bot-muted: #667085;
    --bot-border: rgba(17, 24, 39, 0.1);
    --bot-card-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
    --text-theme-primary: var(--bot-text);
    --text-theme-secondary: var(--bot-muted);
}

body {
    background:
        radial-gradient(circle at 12% 0%, rgba(245, 185, 63, 0.16), transparent 32rem),
        radial-gradient(circle at 88% 6%, rgba(34, 197, 94, 0.12), transparent 28rem),
        var(--bot-bg);
}

body,
.ai-template-main {
    font-family: 'Inter', sans-serif;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.ai-template-main {
    min-height: 100vh;
    padding: 0;
}

.text-theme-primary {
    color: var(--text-theme-primary) !important;
}

.text-theme-secondary {
    color: var(--text-theme-secondary) !important;
}

.text-bot-gold {
    color: var(--bot-gold) !important;
}

.text-bot-green {
    color: var(--bot-green) !important;
}

.bg-bot-gold {
    background: var(--bot-gold) !important;
}

.ai-page {
    color: var(--bot-text);
}

.ai-mobile-shell {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
    background: var(--bot-bg);
    color: var(--bot-text);
    position: relative;
    overflow-x: hidden;
}

.ai-wide-shell {
    width: min(100%, 1120px);
    margin: 0 auto;
}

.ai-landing-shell {
    width: min(100%, 1080px);
    margin: 0 auto;
    padding: 0 1rem;
}

.ai-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--bot-surface) 92%, transparent), color-mix(in srgb, var(--bot-surface-2) 96%, transparent));
    border: 1px solid var(--bot-border);
    border-radius: 24px;
    box-shadow: var(--bot-card-shadow);
}

.ai-card-flat {
    background: var(--bot-surface);
    border: 1px solid var(--bot-border);
    border-radius: 22px;
}

.ai-glow-card {
    background:
        linear-gradient(135deg, rgba(245, 185, 63, 0.18), rgba(34, 197, 94, 0.08)),
        var(--bot-surface);
    border: 1px solid color-mix(in srgb, var(--bot-gold) 35%, transparent);
    border-radius: 24px;
    box-shadow: 0 22px 70px rgba(245, 185, 63, 0.12);
}

.ai-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--bot-gold) 32%, transparent);
    background: color-mix(in srgb, var(--bot-gold) 12%, transparent);
    color: var(--bot-gold);
    border-radius: 999px;
    padding: 0.38rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ai-logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--bot-border);
    box-shadow: 0 12px 28px rgba(245, 185, 63, 0.18);
}

.ai-logo-sm {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    object-fit: cover;
    border: 1px solid var(--bot-border);
}

.ai-icon-button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid var(--bot-border);
    background: var(--bot-surface);
    color: var(--bot-text);
    text-decoration: none;
}

.ai-btn {
    border: 0;
    border-radius: 16px;
    padding: 0.95rem 1.15rem;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    line-height: 1;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ai-btn:active {
    transform: translateY(1px) scale(0.99);
}

.ai-btn-primary {
    background: linear-gradient(135deg, var(--bot-gold), var(--bot-gold-strong));
    color: #111111;
    box-shadow: 0 15px 35px rgba(245, 185, 63, 0.22);
}

.ai-btn-green {
    background: linear-gradient(135deg, var(--bot-green), var(--bot-green-deep));
    color: #ffffff;
    box-shadow: 0 15px 35px rgba(34, 197, 94, 0.18);
}

.ai-btn-ghost {
    background: color-mix(in srgb, var(--bot-surface) 88%, transparent);
    border: 1px solid var(--bot-border);
    color: var(--bot-text);
}

.ai-btn-link {
    background: transparent;
    color: var(--bot-gold);
    border: 0;
    padding: 0;
    font-weight: 800;
    text-decoration: none;
}

.ai-auth-body {
    background:
        radial-gradient(circle at 80% 10%, rgba(245, 185, 63, 0.14), transparent 24rem),
        radial-gradient(circle at 15% 75%, rgba(34, 197, 94, 0.12), transparent 26rem),
        #050505 !important;
}

.ai-auth-screen {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    color: #ffffff;
}

.ai-auth-main {
    min-height: 100vh;
    padding: 0;
}

.ai-auth-shell {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    background: #050505;
}

.ai-auth-hero {
    position: relative;
    overflow: hidden;
    padding: 1.25rem 1.25rem 2.2rem;
    background: linear-gradient(180deg, #111111, #050505);
}

.ai-auth-hero::after {
    content: "";
    position: absolute;
    right: -5rem;
    top: 5rem;
    width: 14rem;
    height: 14rem;
    background: radial-gradient(circle, rgba(245, 185, 63, 0.24), transparent 65%);
    pointer-events: none;
}

.ai-auth-hero h1 {
    font-size: clamp(2rem, 9vw, 3.15rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.ai-auth-card {
    margin: -1.15rem 0.75rem 1.5rem;
    padding: 1.15rem;
    background: rgba(18, 18, 18, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    position: relative;
    z-index: 2;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

.ai-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.45rem;
}

.ai-field {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    min-height: 52px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 0 0.95rem;
    color: #ffffff;
}

.ai-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 0.92rem;
}

.ai-field input::placeholder {
    color: rgba(255, 255, 255, 0.42) !important;
}

.ai-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
}

.ai-auth-divider::before,
.ai-auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
}

.ai-security-note {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem;
    border-radius: 18px;
    background: rgba(245, 185, 63, 0.08);
    border: 1px solid rgba(245, 185, 63, 0.14);
}

.ai-landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 1rem;
}

.ai-landing-hero {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    padding: clamp(1.35rem, 5vw, 4rem);
    background:
        radial-gradient(circle at 88% 22%, rgba(245, 185, 63, 0.24), transparent 21rem),
        linear-gradient(135deg, var(--bot-surface), color-mix(in srgb, var(--bot-surface-2) 88%, #000));
    border: 1px solid var(--bot-border);
    min-height: 520px;
}

.ai-landing-hero h1 {
    max-width: 660px;
    font-size: clamp(2.5rem, 7vw, 5.8rem);
    font-weight: 950;
    line-height: 0.92;
    letter-spacing: -0.075em;
}

.ai-landing-hero p {
    max-width: 500px;
    color: var(--bot-muted);
}

.ai-hero-robot {
    position: absolute;
    right: clamp(-2rem, 4vw, 3rem);
    bottom: -1.25rem;
    width: min(48%, 360px);
    opacity: 0.9;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.34));
}

.ai-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

.ai-feature-tile {
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid var(--bot-border);
    background: var(--bot-surface);
}

.ai-step-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.ai-step {
    padding: 1rem;
    border-radius: 20px;
    background: var(--bot-surface-2);
    border: 1px solid var(--bot-border);
}

.ai-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.35rem;
}

.ai-welcome-card {
    margin: 0.8rem 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.ai-welcome-card h2 {
    font-weight: 900;
    letter-spacing: -0.04em;
}

.ai-balance-card {
    margin: 0 1rem 1rem;
    padding: 1.2rem;
    border-radius: 26px;
    color: #ffffff;
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.22), transparent 7rem),
        linear-gradient(135deg, #2066f5, #1945b7);
    box-shadow: 0 22px 55px rgba(32, 102, 245, 0.24);
    position: relative;
    overflow: hidden;
}

.ai-balance-card h1 {
    font-size: 2.15rem;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.ai-action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
}

.ai-action-grid a {
    min-height: 62px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.ai-market-card,
.ai-stat-grid,
.ai-invest-card {
    margin-left: 1rem;
    margin-right: 1rem;
}

.ai-market-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.82rem 0;
    border-bottom: 1px solid var(--bot-border);
    cursor: pointer;
}

.ai-market-row:last-child {
    border-bottom: 0;
}

.ai-asset-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 185, 63, 0.14);
    color: var(--bot-gold);
    flex: 0 0 auto;
}

.ai-change-badge {
    min-width: 64px;
    display: inline-flex;
    justify-content: center;
    border-radius: 999px;
    padding: 0.35rem 0.55rem;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
}

.ai-change-badge.up {
    background: var(--bot-green);
}

.ai-change-badge.down {
    background: var(--bot-red);
}

.ai-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.ai-stat-card {
    padding: 0.85rem 0.55rem;
    text-align: center;
    border-radius: 18px;
    background: var(--bot-surface);
    border: 1px solid var(--bot-border);
}

.ai-stat-card strong {
    display: block;
    font-size: 0.76rem;
    color: var(--bot-text);
}

.ai-stat-card span {
    font-size: 0.62rem;
    color: var(--bot-muted);
}

.ai-invest-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem;
    margin-bottom: 1.2rem;
}

.ai-bottom-safe-space {
    height: 6rem;
}

.ai-main-bottom-nav {
    position: fixed;
    z-index: 1040;
    right: 0;
    bottom: 0;
    left: 50%;
    width: min(100%, 430px);
    padding: 0 10px calc(10px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    pointer-events: none;
}

.ai-main-bottom-nav__panel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--bot-border) 82%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--bot-surface) 94%, transparent);
    box-shadow:
        0 18px 44px rgba(15, 23, 42, .18),
        0 4px 14px rgba(15, 23, 42, .08),
        inset 0 1px 0 rgba(255, 255, 255, .6);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    pointer-events: auto;
}

.ai-main-bottom-nav__item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 62px;
    padding: 5px 2px 4px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 17px;
    color: var(--bot-muted);
    font-size: 9.5px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.01em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ai-main-bottom-nav__icon {
    display: grid;
    width: 38px;
    height: 34px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 13px;
    background: color-mix(in srgb, var(--bot-surface-3) 72%, transparent);
    color: inherit;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ai-main-bottom-nav__icon i {
    font-size: 20px;
    line-height: 1;
}

.ai-main-bottom-nav__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ai-main-bottom-nav__item:hover {
    color: var(--bot-text);
    background: color-mix(in srgb, var(--bot-surface-3) 48%, transparent);
}

.ai-main-bottom-nav__item:hover .ai-main-bottom-nav__icon {
    transform: translateY(-1px);
}

.ai-main-bottom-nav__item:active { transform: scale(.96); }

.ai-main-bottom-nav__item:focus-visible {
    outline: 2px solid var(--bot-green);
    outline-offset: 2px;
}

.ai-main-bottom-nav__item.is-active {
    background: color-mix(in srgb, var(--bot-green) 11%, var(--bot-surface));
    color: var(--bot-green);
    font-weight: 850;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bot-green) 15%, transparent);
}

.ai-main-bottom-nav__item.is-active .ai-main-bottom-nav__icon {
    border-color: color-mix(in srgb, var(--bot-green) 74%, #fff);
    background: linear-gradient(145deg, color-mix(in srgb, var(--bot-green) 84%, #fff), var(--bot-green));
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--bot-green) 26%, transparent);
    transform: translateY(-1px);
}

[data-theme="dark"] .ai-main-bottom-nav__panel {
    border-color: rgba(255, 255, 255, .1);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, .5),
        0 4px 16px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

[data-theme="dark"] .ai-main-bottom-nav__item.is-active {
    background: color-mix(in srgb, var(--bot-gold) 12%, var(--bot-surface));
    color: var(--bot-gold);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bot-gold) 18%, transparent);
}

[data-theme="dark"] .ai-main-bottom-nav__item.is-active .ai-main-bottom-nav__icon {
    border-color: color-mix(in srgb, var(--bot-gold) 78%, #fff);
    background: linear-gradient(145deg, #ffd976, var(--bot-gold-strong));
    color: #211706;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--bot-gold) 28%, transparent);
}

@media (max-width: 360px) {
    .ai-main-bottom-nav {
        padding-right: 6px;
        padding-left: 6px;
    }

    .ai-main-bottom-nav__panel {
        gap: 2px;
        padding: 6px 4px;
        border-radius: 21px;
    }

    .ai-main-bottom-nav__item {
        min-height: 58px;
        font-size: 8.75px;
    }

    .ai-main-bottom-nav__icon {
        width: 34px;
        height: 32px;
    }

    .ai-main-bottom-nav__icon i {
        font-size: 18px;
    }

    .ai-main-bottom-nav__label-prefix {
        display: none;
    }
}

.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar { display: none; }

.ai-user-body .ai-template-main {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f8fafc;
    color: #111827;
    box-shadow: 0 0 70px rgba(15, 23, 42, 0.14);
}

.dark .ai-user-body .ai-template-main {
    background: #050505;
    color: #fff;
}

.ai-user-page {
    min-height: 100vh;
    padding: 0 16px 104px;
    color: #111827;
}

.dark .ai-user-page { color: #fff; }

.ai-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 0 14px;
}

.ai-page-header > div { min-width: 0; flex: 1; }
.ai-page-header h1 { margin: 0; font-size: 22px; line-height: 1.05; font-weight: 900; letter-spacing: -0.035em; }
.ai-page-header p { margin: 4px 0 0; font-size: 12px; color: #9ca3af; }
.ai-back { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #16a34a; background: #dcfce7; text-decoration: none; flex: 0 0 auto; }
.dark .ai-back { color: var(--bot-gold); background: rgba(245,179,24,.12); }

.ai-panel {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.dark .ai-panel { border-color: #27272a; background: #111; box-shadow: none; }

.ai-field-new { width: 100%; min-height: 52px; border-radius: 15px; border: 1px solid #e5e7eb; background: #fff; padding: 0 14px; color: #111827; outline: none; }
textarea.ai-field-new { padding-top: 12px; }
.ai-field-new:focus { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.12); }
.dark .ai-field-new { border-color: #3f3f46; background: #09090b; color: white; }

.ai-submit { width: 100%; min-height: 54px; border: 0; border-radius: 16px; background: #16a34a; color: #fff; font-weight: 850; box-shadow: 0 14px 32px rgba(22,163,74,.2); }
.ai-submit:disabled { opacity: .45; box-shadow: none; }
.dark .ai-submit { background: var(--bot-gold); color: #111; }

.ai-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 800; }
.ai-pill-green { color: #15803d; background: #dcfce7; }
.ai-pill-red { color: #dc2626; background: #fee2e2; }
.ai-pill-gold { color: #a16207; background: #fef3c7; }

.ai-empty { text-align: center; padding: 36px 18px; color: #9ca3af; }
.ai-empty i { display: block; font-size: 34px; color: #22c55e; margin-bottom: 10px; }

@media (min-width: 800px) {
    .ai-user-body { padding: 24px 0 0 !important; }
    .ai-user-body .ai-template-main { border-radius: 34px 34px 0 0; overflow: hidden; }
}

.ai-auth-alert {
    border-radius: 16px;
    border: 0;
    font-size: 0.86rem;
}

.ai-auth-theme-switch {
    position: fixed;
    z-index: 1200;
    bottom: 16px;
    right: max(16px, calc((100vw - 430px) / 2 + 16px));
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--bot-border);
    border-radius: 50%;
    background: var(--bot-surface);
    color: var(--bot-gold);
    box-shadow: var(--bot-card-shadow);
}

[data-theme="white"] .ai-auth-surface .bg-zinc-900 {
    border-color: #e5e7eb !important;
    background: #f9fafb !important;
}

[data-theme="white"] .ai-auth-surface input,
[data-theme="white"] .ai-auth-surface select,
[data-theme="white"] .ai-auth-surface textarea {
    color: #111827 !important;
}


@media (max-width: 640px) {
    .ai-landing-shell {
        padding: 0 0.75rem;
    }

    .ai-landing-hero {
        min-height: 580px;
        padding: 1.2rem;
    }

    .ai-landing-hero h1 {
        font-size: 3.15rem;
    }

    .ai-hero-robot {
        width: 58%;
        right: -2.8rem;
        bottom: 0.8rem;
    }

    .ai-feature-grid,
    .ai-step-row {
        grid-template-columns: 1fr;
    }

    .ai-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@supports not (color: color-mix(in srgb, white, black)) {
    .ai-card,
    .ai-card-flat,
    .ai-feature-tile,
    .ai-step,
    .ai-stat-card {
        background: var(--bot-surface);
    }
}

/* Legacy component compatibility for secondary user routes */
.ai-page { min-height: 100vh; padding: 18px 16px 108px; background: var(--bot-surface-2); color: var(--bot-text); }
.ai-eyebrow { margin: 0 0 3px; color: #7b827f; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ai-page .ai-page-header { justify-content: space-between; margin-bottom: 18px; padding: 0; }
.ai-page .ai-page-header h1, .ai-section-heading h2 { margin: 0; color: #101512; font-family: Inter, sans-serif; font-weight: 800; letter-spacing: -.045em; }
.ai-page .ai-page-header h1 { font-size: 27px; }
.ai-section-heading h2 { font-size: 20px; }
.ai-header-action { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--bot-border); border-radius: 50%; background: var(--bot-surface); color: var(--bot-text); box-shadow: var(--bot-card-shadow); text-decoration: none; }
.ai-alert { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; font-size: 12px; font-weight: 700; }
.ai-alert-danger { background: #ffe8e7; color: #b52b28; }
.ai-alert-warning { background: #fff2cf; color: #815d00; }
.ai-alert-info { background: #e7f5ee; color: #236049; }
.ai-bot-hero { position: relative; min-height: 208px; margin-bottom: 14px; padding: 23px 148px 22px 20px; overflow: hidden; border-radius: 27px; background: #17201b; box-shadow: 0 18px 35px rgba(15,28,21,.17); }
.ai-bot-hero-copy { position: relative; z-index: 2; }
.ai-bot-hero h2 { margin: 17px 0 8px; color: #fff; font-size: 27px; font-weight: 800; letter-spacing: -.05em; line-height: 1.02; }
.ai-bot-hero p { margin: 0; color: #acb6b0; font-size: 11px; line-height: 1.5; }
.ai-bot-hero img { position: absolute; right: -32px; bottom: -30px; width: 215px; height: 215px; object-fit: contain; filter: drop-shadow(0 20px 25px rgba(0,0,0,.35)); }
.ai-status-dot { display: inline-flex; align-items: center; gap: 6px; color: #c9d1cc; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ai-status-dot i { width: 7px; height: 7px; border-radius: 50%; background: #bfff59; box-shadow: 0 0 12px #bfff59; }
.ai-stats-strip { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 24px; padding: 14px 4px; border: 1px solid rgba(20,44,31,.08); border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(24,48,35,.06); }
.ai-stats-strip div { text-align: center; border-right: 1px solid #e8eeea; }
.ai-stats-strip div:last-child { border: 0; }
.ai-stats-strip strong { display: block; color: #171c19; font-size: 13px; }
.ai-stats-strip span { display: block; margin-top: 2px; color: #8a918d; font-size: 9px; }
.ai-section-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 2px 13px; }
.ai-section-heading a { color: #3e6d55; font-size: 11px; font-weight: 700; text-decoration: none; }
.ai-bot-list { display: grid; gap: 12px; }
.ai-bot-card { display: flex; gap: 13px; padding: 14px; border: 1px solid rgba(19,35,27,.07); border-radius: 22px; background: #fff; box-shadow: 0 12px 30px rgba(20,45,31,.065); }
.ai-bot-icon { display: grid; flex: 0 0 48px; height: 48px; place-items: center; border-radius: 16px; font-size: 18px; }
.ai-bot-card.lime .ai-bot-icon { background: #e6ffc1; color: #4a7019; }
.ai-bot-card.violet .ai-bot-icon { background: #eee9ff; color: #6b51c5; }
.ai-bot-card.blue .ai-bot-icon { background: #e1f4ff; color: #2873a0; }
.ai-bot-main { min-width: 0; flex: 1; }
.ai-bot-title-row { display: flex; justify-content: space-between; gap: 10px; }
.ai-bot-title-row h3 { margin: 0; color: #151a17; font-size: 14px; font-weight: 800; }
.ai-bot-title-row span { color: #8a918d; font-size: 9px; }
.ai-bot-title-row > strong { color: #3c6f25; font-size: 14px; }
.ai-bot-meta { display: flex; gap: 12px; margin: 10px 0; color: #747d77; font-size: 9px; }
.ai-bot-start { width: 100%; padding: 9px; border: 0; border-radius: 11px; background: #17201b; color: #fff; font-size: 10px; font-weight: 800; }
.ai-sheet-backdrop[hidden] { display: none; }
.ai-sheet-backdrop { position: fixed; z-index: 1100; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(8,13,10,.54); backdrop-filter: blur(8px); }
.ai-bottom-sheet { position: relative; width: min(100%,430px); max-height: 92vh; padding: 14px 20px 24px; overflow-y: auto; border-radius: 28px 28px 20px 20px; background: #f8faf8; box-shadow: 0 -20px 60px rgba(0,0,0,.22); }
.ai-sheet-handle { width: 44px; height: 4px; margin: 0 auto 17px; border-radius: 4px; background: #d1d8d3; }
.ai-sheet-close { position: absolute; top: 18px; right: 17px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #e9eeeb; color: #253029; }
.ai-bottom-sheet h2 { margin: 2px 0 15px; color: #111713; font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.ai-yield-banner { display: flex; justify-content: space-between; margin-bottom: 18px; padding: 13px 15px; border-radius: 15px; background: #e7ffc4; color: #385d1d; font-size: 12px; font-weight: 700; }
.ai-yield-banner strong { font-size: 16px; }
.ai-form-group { margin-bottom: 15px; }
.ai-label-row { display: flex; justify-content: space-between; margin-bottom: 7px; color: #3d4741; font-size: 11px; font-weight: 700; }
.ai-label-row span, .ai-form-group small { color: #858f89; font-weight: 500; }
.ai-field, .ai-money-input { width: 100%; border: 1px solid #dde5df; border-radius: 14px; background: #fff; }
.ai-field { padding: 13px 14px; outline: 0; }
.ai-money-input { display: flex; align-items: center; padding-left: 14px; }
.ai-money-input span { font-weight: 800; }
.ai-money-input input { width: 100%; padding: 13px 14px 13px 7px; border: 0; outline: 0; background: transparent; font-size: 17px; font-weight: 800; }
.ai-money-input.is-invalid { border-color: #d44545; }
.ai-return-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 20px 0 16px; padding: 15px; border-radius: 16px; background: #edf2ef; color: #67716b; font-size: 11px; }
.ai-return-card strong { color: #142019; }
.ai-primary-button { width: 100%; padding: 14px; border: 0; border-radius: 14px; background: #17201b; color: #fff; font-size: 12px; font-weight: 800; }
.ai-primary-button:disabled { opacity: .45; }
.ai-modal-open { overflow: hidden; }
.ai-empty-state { padding: 34px 24px; border: 1px dashed #cfd9d2; border-radius: 22px; text-align: center; }
.ai-empty-state i { color: #6c7d72; font-size: 26px; }
.ai-empty-state h3 { margin: 10px 0 4px; color: #172019; font-size: 15px; }
.ai-empty-state p { margin: 0; color: #7a847e; font-size: 11px; }

/* Settings */
.ai-profile-card { display: flex; align-items: center; gap: 14px; padding: 17px; border-radius: 24px; background: #17201b; color: #fff; box-shadow: 0 16px 36px rgba(15,30,21,.16); }
.ai-profile-avatar { display: grid; flex: 0 0 58px; height: 58px; place-items: center; border-radius: 19px; background: linear-gradient(145deg,#d9ff99,#8bcf50); color: #234116; font-size: 22px; font-weight: 900; }
.ai-profile-copy { min-width: 0; flex: 1; }
.ai-profile-name-row { display: flex; align-items: center; gap: 8px; }
.ai-profile-name-row h2 { margin: 0; overflow: hidden; color: #fff; font-size: 17px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ai-profile-copy p, .ai-profile-copy small { display: block; margin: 3px 0 0; overflow: hidden; color: #aeb8b2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ai-verify { padding: 3px 7px; border-radius: 20px; background: rgba(255,255,255,.1); color: #cad2cd; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.ai-verify.verified { background: rgba(190,255,91,.15); color: #caff7b; }
.ai-credit-card { margin: 12px 0 24px; padding: 14px 16px; border: 1px solid #e3e9e5; border-radius: 18px; background: #fff; }
.ai-credit-card > div:first-child { display: flex; justify-content: space-between; color: #748078; font-size: 10px; }
.ai-credit-card strong { color: #213028; }
.ai-score-track { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 6px; background: #e7ece9; }
.ai-score-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7fc04b,#c6f781); }
.ai-settings-section { margin: 0 0 22px; }
.ai-settings-section > h2 { margin: 0 3px 9px; color: #757e79; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ai-settings-list { overflow: hidden; border: 1px solid #e5ebe7; border-radius: 21px; background: #fff; }
.ai-settings-list a { display: grid; grid-template-columns: 39px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 66px; padding: 9px 14px; border-bottom: 1px solid #edf1ee; color: #1b221e; text-decoration: none; }
.ai-settings-list a:last-child { border: 0; }
.ai-settings-list a > span:nth-child(2) { min-width: 0; }
.ai-settings-list strong, .ai-settings-list small { display: block; }
.ai-settings-list strong { font-size: 12px; }
.ai-settings-list small { margin-top: 2px; color: #909792; font-size: 9px; }
.ai-settings-list a > i { color: #b2b9b4; font-size: 9px; }
.ai-menu-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; }
.ai-menu-icon.green { background: #e5f8eb; color: #328353; }
.ai-menu-icon.violet { background: #eee9ff; color: #7457cf; }
.ai-menu-icon.lime { background: #edffd5; color: #5d8529; }
.ai-menu-icon.blue { background: #e5f4ff; color: #367ca9; }
.ai-menu-icon.coral { background: #ffebea; color: #c05a54; }
.ai-menu-icon.amber { background: #fff3d7; color: #a57922; }
.ai-logout-button { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; padding: 14px; border: 1px solid #f0cdcd; border-radius: 15px; color: #bd4040; font-size: 11px; font-weight: 800; text-decoration: none; }

/* Markets */
.ai-search-box { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #e0e7e2; border-radius: 16px; background: #fff; color: #919b95; }
.ai-search-box input { width: 100%; padding: 13px 0; border: 0; outline: 0; background: transparent; color: #172019; font-size: 12px; }
.ai-filter-tabs { display: flex; gap: 6px; margin: 13px 0 17px; overflow-x: auto; }
.ai-filter-tabs button { padding: 8px 13px; border: 0; border-radius: 20px; background: transparent; color: #818a84; font-size: 10px; font-weight: 700; white-space: nowrap; }
.ai-filter-tabs button.is-active { background: #17201b; color: #fff; }
.ai-market-labels { display: grid; grid-template-columns: 1.5fr .9fr .7fr; padding: 0 12px 7px; color: #a0a8a3; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-market-labels span:nth-child(n+2) { text-align: right; }
.ai-market-list { overflow: hidden; border: 1px solid #e5ebe7; border-radius: 22px; background: #fff; }
.ai-market-row { display: grid; grid-template-columns: 1.5fr .9fr .7fr; align-items: center; min-height: 69px; padding: 10px 12px; border-bottom: 1px solid #edf1ee; color: #172019; text-decoration: none; }
.ai-market-row:last-child { border: 0; }
.ai-market-row[hidden] { display: none; }
.ai-market-asset { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ai-market-asset img { width: 34px; height: 34px; border-radius: 50%; background: #eef2ef; }
.ai-market-asset > span { min-width: 0; }
.ai-market-asset strong, .ai-market-asset small, .ai-market-price strong, .ai-market-price small { display: block; }
.ai-market-asset strong { font-size: 12px; }
.ai-market-asset small { max-width: 90px; overflow: hidden; color: #929a95; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ai-market-price { text-align: right; }
.ai-market-price strong { font-size: 11px; }
.ai-market-price small { color: #a0a7a2; font-size: 7px; }
.ai-market-change { justify-self: end; min-width: 55px; padding: 6px 7px; border-radius: 9px; text-align: center; font-size: 9px; font-weight: 800; }
.ai-market-change.up { background: #e5f7e9; color: #318047; }
.ai-market-change.down { background: #ffe8e7; color: #bc4b47; }

/* Portfolio */
.ai-balance-card { padding: 21px 18px 17px; border-radius: 27px; background: #17201b; color: #fff; box-shadow: 0 18px 38px rgba(15,29,21,.17); }
.ai-balance-top { display: flex; align-items: center; justify-content: space-between; color: #aab4ae; font-size: 10px; }
.ai-balance-top select { padding: 6px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; outline: 0; background: rgba(255,255,255,.07); color: #fff; font-size: 9px; font-weight: 800; }
.ai-balance-top option { color: #111; }
.ai-balance-value { display: flex; align-items: baseline; gap: 7px; margin-top: 10px; }
.ai-balance-value strong { font-size: 31px; letter-spacing: -.06em; }
.ai-balance-value span { color: #aeb7b2; font-size: 11px; font-weight: 700; }
.ai-balance-card > p { margin: 2px 0 18px; color: #849088; font-size: 9px; }
.ai-portfolio-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.ai-portfolio-actions a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 5px; border-radius: 13px; background: rgba(255,255,255,.08); color: #fff; font-size: 9px; font-weight: 700; text-decoration: none; }
.ai-portfolio-actions a:first-child { background: #c6f77e; color: #273d17; }
.ai-wallet-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 12px 0; }
.ai-wallet-summary article { padding: 14px; border: 1px solid #e3e9e5; border-radius: 18px; background: #fff; }
.ai-wallet-summary span, .ai-wallet-summary small { display: block; color: #919a94; font-size: 8px; }
.ai-wallet-summary strong { display: block; margin: 4px 0 2px; color: #1c251f; font-size: 11px; }
.ai-transfer-card { margin-bottom: 23px; border: 1px solid #e1e8e3; border-radius: 18px; background: #fff; }
.ai-transfer-card summary { display: flex; align-items: center; justify-content: space-between; padding: 14px; color: #35423a; font-size: 10px; font-weight: 800; cursor: pointer; list-style: none; }
.ai-transfer-card summary::-webkit-details-marker, .ai-asset-transfer summary::-webkit-details-marker { display: none; }
.ai-transfer-card summary span { display: flex; align-items: center; gap: 7px; }
.ai-transfer-card form { padding: 0 14px 14px; }
.ai-transfer-card label { display: block; margin-bottom: 10px; color: #6f7973; font-size: 9px; font-weight: 700; }
.ai-transfer-card .ai-field { display: block; margin-top: 5px; padding: 10px; font-size: 10px; }
.ai-transfer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-transfer-card .ai-primary-button { padding: 11px; }
.ai-assets-heading { margin-top: 4px; }
.ai-asset-list { display: grid; gap: 10px; }
.ai-asset-card { padding: 14px; border: 1px solid #e4eae6; border-radius: 21px; background: #fff; }
.ai-asset-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.ai-asset-row > img { width: 38px; height: 38px; border-radius: 50%; }
.ai-asset-name strong, .ai-asset-name small, .ai-asset-value strong, .ai-asset-value small { display: block; }
.ai-asset-name strong, .ai-asset-value strong { color: #19211c; font-size: 12px; }
.ai-asset-name small, .ai-asset-value small { color: #929a95; font-size: 8px; }
.ai-asset-value { text-align: right; }
.ai-asset-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #edf1ee; color: #8d9690; font-size: 8px; }
.ai-asset-breakdown strong { display: block; margin-top: 2px; color: #465149; font-size: 9px; }
.ai-asset-transfer { margin-top: 8px; }
.ai-asset-transfer summary { display: flex; justify-content: flex-end; align-items: center; gap: 5px; color: #47715a; font-size: 8px; font-weight: 800; cursor: pointer; list-style: none; }
.ai-asset-transfer form { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 8px; }
.ai-asset-transfer .ai-field { padding: 9px; font-size: 9px; }
.ai-asset-transfer button { border: 0; border-radius: 11px; background: #17201b; color: #fff; font-size: 9px; font-weight: 800; }
.ai-pending-list { overflow: hidden; border: 1px solid #e4eae6; border-radius: 20px; background: #fff; }
.ai-pending-list a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #edf1ee; color: #202923; text-decoration: none; }
.ai-pending-list a:last-child { border: 0; }
.ai-pending-list > a > span:first-child { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; }
.ai-pending-list .out { background: #ffe9e8; color: #bd514b; }
.ai-pending-list .in { background: #e5f7e9; color: #38804c; }
.ai-pending-list strong, .ai-pending-list small { display: block; font-size: 9px; }
.ai-pending-list small { margin-top: 2px; color: #929a95; font-size: 8px; }

/* Legacy withdrawal component compatibility */
.ai-withdraw-page { min-height: 100vh; padding: 18px 16px 112px; background: #080b09; color: #fff; }
.ai-withdraw-header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; margin-bottom: 22px; }
.ai-withdraw-header h1 { margin: 0; font-size: 16px; font-weight: 800; text-align: center; }
.ai-withdraw-header a { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #202721; border-radius: 50%; background: #111612; color: #fff; text-decoration: none; }
.ai-withdraw-alert { margin-bottom: 12px; padding: 11px 13px; border: 1px solid #5d4c1b; border-radius: 13px; background: #261f0c; color: #e4c66d; font-size: 9px; }
.ai-withdraw-alert.error { border-color: #642d2b; background: #291211; color: #ef8c87; }
.ai-withdraw-balance { margin-bottom: 25px; padding: 20px; border: 1px solid #202721; border-radius: 23px; background: radial-gradient(circle at 90% 10%,rgba(190,255,91,.14),transparent 40%),#121713; }
.ai-withdraw-balance span { display: block; margin-bottom: 6px; color: #879088; font-size: 9px; }
.ai-withdraw-balance strong { font-size: 28px; letter-spacing: -.05em; }
.ai-withdraw-balance small { color: #859088; font-size: 10px; }
.ai-withdraw-form { display: grid; gap: 2px; }
.ai-withdraw-step { position: relative; display: grid; grid-template-columns: 31px 1fr; gap: 11px; padding-bottom: 25px; }
.ai-withdraw-step:not(.final)::after { content: ''; position: absolute; top: 33px; bottom: 0; left: 15px; width: 1px; background: #293129; }
.ai-step-number { position: relative; z-index: 1; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #334033; border-radius: 50%; background: #151b16; color: #c8ff75; font-size: 9px; font-weight: 800; }
.ai-step-content > p { margin: 0 0 2px; color: #727c74; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.ai-step-content > h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.ai-withdraw-wallets { display: grid; gap: 8px; }
.ai-withdraw-wallet { position: relative; display: grid; grid-template-columns: 33px minmax(0,1fr) 18px; align-items: center; gap: 9px; padding: 11px; border: 1px solid #252d26; border-radius: 15px; background: #111512; cursor: pointer; }
.ai-withdraw-wallet:has(input:checked) { border-color: #8eba50; background: #151d12; }
.ai-withdraw-wallet input { position: absolute; opacity: 0; }
.ai-withdraw-wallet img { width: 32px; height: 32px; border-radius: 50%; }
.ai-withdraw-wallet span { min-width: 0; }
.ai-withdraw-wallet strong, .ai-withdraw-wallet small, .ai-withdraw-wallet code { display: block; }
.ai-withdraw-wallet strong { font-size: 9px; }
.ai-withdraw-wallet small { margin: 2px 0; color: #808a82; font-size: 7px; }
.ai-withdraw-wallet code { overflow: hidden; color: #5e6861; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.ai-withdraw-wallet > i { color: #313932; }
.ai-withdraw-wallet:has(input:checked) > i { color: #bdff5e; }
.ai-add-wallet-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; color: #a9d86e; font-size: 8px; font-weight: 700; text-decoration: none; }
.ai-withdraw-amount { display: flex; align-items: center; border: 1px solid #29322a; border-radius: 16px; background: #111512; }
.ai-withdraw-amount > span { padding-left: 13px; color: #8b958d; font-weight: 800; }
.ai-withdraw-amount input { width: 100%; padding: 13px 8px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 17px; font-weight: 800; }
.ai-withdraw-amount button { margin-right: 7px; padding: 6px 8px; border: 0; border-radius: 8px; background: #283421; color: #c9ff7b; font-size: 7px; font-weight: 900; }
.ai-withdraw-estimate { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 9px; color: #6f7971; font-size: 7px; }
.ai-withdraw-estimate span:last-child { grid-column: 1/-1; }
.ai-withdraw-estimate strong { color: #acb5ae; }
.ai-password-field { display: flex; border: 1px solid #29322a; border-radius: 15px; background: #111512; }
.ai-password-field input { width: 100%; padding: 13px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 10px; }
.ai-password-field button { width: 43px; border: 0; background: transparent; color: #768078; }
.ai-withdraw-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 15px; border: 0; border-radius: 15px; background: #c4f57b; color: #1e3013; font-size: 10px; font-weight: 900; }
.ai-withdraw-empty { padding: 36px 23px; border: 1px solid #252d26; border-radius: 23px; background: #111512; text-align: center; }
.ai-withdraw-empty > i { color: #baf66d; font-size: 25px; }
.ai-withdraw-empty h2 { margin: 12px 0 6px; font-size: 16px; }
.ai-withdraw-empty p { margin: 0 0 17px; color: #7c867e; font-size: 9px; }
.ai-withdraw-empty a { display: inline-block; padding: 10px 15px; border-radius: 11px; background: #c4f57b; color: #213415; font-size: 9px; font-weight: 800; text-decoration: none; }

/* Trading */
.ai-trade-header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; margin-bottom: 13px; }
.ai-trade-header > div { text-align: center; }
.ai-trade-header h1 { margin: 0; color: var(--bot-text); font-size: 17px; font-weight: 900; letter-spacing: -.035em; }
.ai-trade-header small { font-size: 9px; font-weight: 700; }
.ai-trade-stats, .ai-trade-order-panel { border-color: var(--bot-border) !important; background: var(--bot-surface) !important; color: var(--bot-text) !important; box-shadow: var(--bot-card-shadow); }
.ai-trade-stats { border-radius: 18px; }
.ai-trade-stats small { color: #929a95 !important; font-size: 8px; }
.ai-trade-stats span { font-size: 10px; }
.ai-chart-card { border-color: var(--bot-border) !important; border-radius: 22px !important; background: var(--bot-surface) !important; }
.ai-trade-order-panel { border-radius: 21px !important; }
.ai-trade-order-panel .text-theme-secondary { color: #818b84 !important; }
.ai-trade-order-panel .text-theme-primary { color: var(--bot-text) !important; }
.ai-trade-page .trade-duration-card { border: 1px solid var(--bot-border) !important; border-radius: 13px !important; background: var(--bot-surface-2) !important; color: var(--bot-text) !important; box-shadow: none; }
.ai-trade-page .trade-duration-card.is-selected { border-color: var(--bot-green) !important; background: color-mix(in srgb, var(--bot-green) 10%, var(--bot-surface)) !important; box-shadow: none; }
.ai-trade-page .trade-duration-card .text-theme-secondary { color: #879188 !important; font-size: 8px; }
.ai-trade-page .trade-duration-card .text-info { color: #4d7435 !important; font-size: 9px; }
.ai-trade-actions .btn { border-radius: 15px !important; font-size: 11px; box-shadow: none !important; }
.ai-trade-actions .btn-success { background: #5aa63d !important; }
.ai-trade-actions .btn-danger { background: #d75c54 !important; }
.ai-trade-page .modal-content-centered { border: 1px solid var(--bot-border); border-radius: 25px; background: var(--bot-surface); color: var(--bot-text); }
.ai-trade-page .modal-content-centered .text-theme-primary { color: var(--bot-text) !important; }
.ai-trade-page .modal-content-centered .text-theme-secondary { color: #7d8780 !important; }
.ai-trade-page .modal-content-centered .glass-input { border-color: var(--bot-border); background: var(--bot-surface-2); color: var(--bot-text); }
.ai-history-page { background: var(--bot-surface-2); }
.ai-history-page .glass-card { border-color: var(--bot-border); background: var(--bot-surface); color: var(--bot-text); box-shadow: var(--bot-card-shadow); }
.ai-history-page .text-theme-primary { color: var(--bot-text) !important; }
.ai-history-page .text-theme-secondary { color: #858f88 !important; }
.ai-history-page .nav-pills .nav-link.active { background: #17201b !important; color: #fff !important; box-shadow: none; }

/* Shared compatibility skin for remaining functional account screens */
.ai-user-body .ai-template-main { --text-primary: var(--bot-text); --text-secondary: var(--bot-muted); --glass-bg: var(--bot-surface); --glass-border: var(--bot-border); --card-bg: var(--bot-surface); background: var(--bot-surface-2); color: var(--bot-text); }
.ai-user-body .ai-template-main > .container { min-height: 100vh; padding: 18px 16px 108px !important; }
.ai-user-body .ai-template-main > .glass-card,
.ai-user-body .ai-template-main > .admin-table,
.ai-user-body .ai-template-main > .d-flex { margin-right: 16px; margin-left: 16px; }
.ai-user-body .container .glass-card,
.ai-user-body .ai-template-main > .glass-card { border-color: var(--bot-border); background: var(--bot-surface); color: var(--bot-text); box-shadow: var(--bot-card-shadow); }
.ai-user-body .container .text-theme-primary,
.ai-user-body .ai-template-main > .glass-card .text-theme-primary { color: var(--bot-text) !important; }
.ai-user-body .container .text-theme-secondary,
.ai-user-body .ai-template-main > .glass-card .text-theme-secondary { color: #7e8981 !important; }
.ai-user-body .container .liquid-btn,
.ai-user-body .container .btn-info { border-color: #17201b; background: #17201b; color: #fff; }
.ai-user-body .container .glass-input,
.ai-user-body .container .form-control,
.ai-user-body .container .form-select { border-color: var(--bot-border); background: var(--bot-surface); color: var(--bot-text); }

/* Application-wide UI correction layer */
:root {
    --ui-control-height: 42px;
    --ui-control-radius: 12px;
    --ui-control-bg: var(--bot-surface);
    --ui-control-border: var(--bot-border);
    --ui-control-text: var(--bot-text);
    --ui-control-placeholder: var(--bot-muted);
    color-scheme: dark;
}

[data-theme="white"] {
    color-scheme: light;
}

.ai-template-main,
.ai-auth-main {
    color: var(--bot-text);
}

.ai-template-main :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([class~="bg-transparent"]), select, textarea),
.ai-auth-main :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([class~="bg-transparent"]), select, textarea) {
    min-height: var(--ui-control-height);
    border: 1px solid var(--ui-control-border);
    border-radius: var(--ui-control-radius);
    background-color: var(--ui-control-bg);
    color: var(--ui-control-text);
    font-size: 0.875rem;
    line-height: 1.35;
    padding: 0.625rem 0.8rem;
    outline: none;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ai-template-main textarea,
.ai-auth-main textarea {
    min-height: 84px;
    resize: vertical;
}

.ai-template-main :where(input, select, textarea):focus,
.ai-auth-main :where(input, select, textarea):focus {
    border-color: var(--bot-green) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bot-green) 18%, transparent) !important;
}

.ai-template-main :where(input, textarea)::placeholder,
.ai-auth-main :where(input, textarea)::placeholder {
    color: var(--ui-control-placeholder) !important;
    opacity: .72;
}

.ai-template-main input[type="file"],
.ai-auth-main input[type="file"] {
    padding: .35rem;
}

.ai-template-main input[type="file"]::file-selector-button,
.ai-auth-main input[type="file"]::file-selector-button {
    min-height: 32px;
    margin-right: .65rem;
    border: 0;
    border-radius: 9px;
    padding: .4rem .7rem;
    background: var(--bot-surface-3);
    color: var(--bot-text);
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
}

.ai-template-main :where(.btn, button[type="submit"], input[type="submit"], .ai-primary-button, .liquid-btn),
.ai-auth-main :where(.btn, button[type="submit"], input[type="submit"], .ai-primary-button, .liquid-btn) {
    min-height: 40px;
    border-radius: 11px !important;
    padding: .58rem .9rem !important;
    font-size: .825rem;
    line-height: 1.2;
    box-shadow: none;
    transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}

.ai-template-main a[class*="py-4"][class*="rounded"],
.ai-auth-main a[class*="py-4"][class*="rounded"],
.ai-auth-surface button[type="button"]:not(.ai-password-toggle) {
    min-height: 40px;
    padding-top: .62rem !important;
    padding-bottom: .62rem !important;
}

.ai-template-main :where(button, a, input, select, textarea):focus-visible,
.ai-auth-main :where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--bot-green) 30%, transparent);
    outline-offset: 2px;
}

.ai-template-main :where(.btn, button[type="submit"], .ai-primary-button):active,
.ai-auth-main :where(.btn, button[type="submit"], .ai-primary-button):active {
    transform: translateY(1px);
}

.ai-template-main :where(button, input, select, textarea):disabled,
.ai-auth-main :where(button, input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: .55;
}

.form-control-sm,
.form-select-sm,
.btn-sm {
    min-height: 34px !important;
    border-radius: 9px !important;
    font-size: .75rem !important;
    padding: .4rem .65rem !important;
}

.form-control-lg,
.form-select-lg,
.btn-lg {
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: .9rem !important;
    padding: .65rem .85rem !important;
}

/* Home market movement is simulated around database-managed baselines. */
.ai-market-pulse {
    position: relative;
    overflow: hidden;
}

.ai-market-pulse::after {
    position: absolute;
    top: -42px;
    right: -34px;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .08);
    content: "";
    pointer-events: none;
}

.ai-market-live-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 19px;
    padding: .2rem .42rem;
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 999px;
    background: rgba(34, 197, 94, .08);
    color: var(--bot-green);
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
}

.ai-market-live-badge > span {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 999px;
    background: currentColor;
    animation: ai-market-live-pulse 1.8s ease-out infinite;
}

.ai-market-average {
    color: var(--bot-green);
    font-variant-numeric: tabular-nums;
    transition: color .24s ease, transform .24s ease;
}

.ai-market-average.is-down { color: var(--bot-red); }
.ai-market-average.is-up { color: var(--bot-green); }

.ai-market-sync {
    margin-top: .08rem;
    color: var(--bot-muted);
    font-size: .48rem;
    line-height: 1.2;
}

.ai-market-pulse__bars {
    position: relative;
    z-index: 1;
    display: flex;
    height: 42px;
    align-items: flex-end;
    gap: 4px;
}

.ai-market-pulse__bars > span {
    display: block;
    width: 8px;
    min-height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #4ade80, var(--bot-green));
    box-shadow: 0 5px 12px rgba(34, 197, 94, .15);
    transition: height .62s cubic-bezier(.2,.8,.2,1), background .25s ease;
}

.ai-market-pulse__bars > span:nth-child(2),
.ai-market-pulse__bars > span:nth-child(4) { opacity: .55; }
.ai-market-pulse__bars > span:nth-child(1),
.ai-market-pulse__bars > span:nth-child(5) { opacity: .78; }
.ai-market-pulse__bars > span.is-down { background: linear-gradient(180deg, #fb7185, var(--bot-red)); }

.dashboard-market-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.dashboard-market-row::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: transparent;
    content: "";
    opacity: 0;
    pointer-events: none;
}

.dashboard-market-row .price-display {
    color: var(--bot-text);
    font-variant-numeric: tabular-nums;
    transition: color .2s ease, transform .2s ease;
}

.dashboard-market-row .ai-market-change {
    display: inline-flex;
    min-width: 62px;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .28rem .45rem;
    border-radius: 999px;
    font-size: .58rem;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    line-height: 1;
    transition: color .2s ease, background .2s ease;
}

.dashboard-market-row .ai-market-change.is-up {
    background: rgba(34, 197, 94, .11);
    color: #16a34a;
}

.dashboard-market-row .ai-market-change.is-down {
    background: rgba(239, 68, 68, .11);
    color: #ef4444;
}

.dashboard-market-row.is-tick-up {
    border-color: rgba(34, 197, 94, .30) !important;
    animation: ai-market-row-up .76s ease-out;
}

.dashboard-market-row.is-tick-down {
    border-color: rgba(239, 68, 68, .28) !important;
    animation: ai-market-row-down .76s ease-out;
}

.dashboard-market-row.is-tick-up .price-display {
    color: var(--bot-green);
    transform: translateY(-1px);
}

.dashboard-market-row.is-tick-down .price-display {
    color: var(--bot-red);
    transform: translateY(1px);
}

[data-theme="dark"] .ai-market-live-badge {
    border-color: rgba(245, 185, 63, .2);
    background: rgba(245, 185, 63, .08);
    color: var(--bot-gold);
}

[data-theme="dark"] .ai-market-pulse__bars > span:not(.is-down) {
    background: linear-gradient(180deg, #fcd56e, var(--bot-gold));
    box-shadow: 0 5px 14px rgba(245, 185, 63, .12);
}

@keyframes ai-market-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .36); }
    68%, 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

@keyframes ai-market-row-up {
    0% { box-shadow: inset 0 0 0 rgba(34, 197, 94, 0); }
    32% { box-shadow: inset 0 0 30px rgba(34, 197, 94, .11); }
    100% { box-shadow: inset 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes ai-market-row-down {
    0% { box-shadow: inset 0 0 0 rgba(239, 68, 68, 0); }
    32% { box-shadow: inset 0 0 30px rgba(239, 68, 68, .10); }
    100% { box-shadow: inset 0 0 0 rgba(239, 68, 68, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ai-market-live-badge > span,
    .dashboard-market-row.is-tick-up,
    .dashboard-market-row.is-tick-down {
        animation: none;
    }

    .ai-market-pulse__bars > span,
    .dashboard-market-row,
    .dashboard-market-row .price-display {
        transition: none;
    }
}

/* Bot portfolio showcase shared by the catalog and running-bot pages. */
.ai-bot-showcase {
    position: relative;
    isolation: isolate;
    min-height: 226px;
    overflow: hidden;
    padding: 1.35rem;
    border: 1px solid var(--bot-border);
    border-color: color-mix(in srgb, var(--bot-green) 24%, var(--bot-border));
    border-radius: 26px;
    background-color: var(--bot-surface);
    background:
        radial-gradient(circle at 87% 34%, rgba(34, 197, 94, .24), transparent 8.4rem),
        linear-gradient(145deg, color-mix(in srgb, var(--bot-green) 9%, var(--bot-surface)) 0%, var(--bot-surface) 76%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.ai-bot-showcase::before,
.ai-bot-showcase::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.ai-bot-showcase::before {
    top: -36px;
    right: -28px;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(34, 197, 94, .22);
    border-radius: 999px;
    box-shadow: 0 0 0 24px rgba(34, 197, 94, .05), 0 0 0 52px rgba(34, 197, 94, .025);
}

.ai-bot-showcase::after {
    right: 9%;
    bottom: -48px;
    width: 118px;
    height: 82px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .18);
    filter: blur(30px);
}

.ai-bot-showcase__copy {
    position: relative;
    z-index: 2;
    width: 61%;
}

.ai-bot-showcase__kicker {
    display: flex;
    align-items: center;
    gap: .42rem;
    margin: 0 0 .6rem;
    color: var(--bot-green);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ai-bot-showcase__kicker span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .32);
    animation: ai-bot-status-pulse 2.2s ease-out infinite;
}

.ai-bot-showcase__title {
    margin: 0;
    color: var(--bot-text);
    font-size: clamp(1.55rem, 7vw, 1.9rem);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1.04;
}

.ai-bot-showcase__title span {
    display: block;
    color: var(--bot-green);
}

.ai-bot-showcase__description {
    max-width: 18rem;
    margin: .65rem 0 0;
    color: var(--bot-muted);
    font-size: .7rem;
    line-height: 1.48;
}

.ai-bot-showcase__pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .72rem;
}

.ai-bot-showcase__pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 24px;
    padding: .28rem .48rem;
    border: 1px solid color-mix(in srgb, var(--bot-green) 18%, var(--bot-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bot-surface) 87%, transparent);
    color: var(--bot-muted);
    font-size: .57rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.ai-bot-showcase__pill i {
    color: var(--bot-green);
    font-size: .56rem;
}

.ai-bot-showcase__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 37px;
    margin-top: .78rem;
    padding: .58rem .82rem;
    border-radius: 11px;
    background: var(--bot-green);
    box-shadow: 0 9px 20px rgba(34, 197, 94, .21);
    color: #fff !important;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ai-bot-showcase__cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(34, 197, 94, .28);
}

.ai-bot-showcase__cta:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--bot-green) 34%, transparent);
    outline-offset: 3px;
}

.ai-bot-showcase__art {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: -7%;
    display: grid;
    width: 57%;
    height: 88%;
    place-items: center;
    transform: translateY(-50%);
    pointer-events: none;
}

.ai-bot-showcase__art::before {
    position: absolute;
    width: 116px;
    height: 116px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, .86), rgba(34, 197, 94, .10) 54%, transparent 72%);
    content: "";
    filter: blur(1px);
}

.ai-bot-showcase__art img {
    position: relative;
    display: block;
    width: 220px;
    max-width: 126%;
    height: auto;
    filter: drop-shadow(0 18px 16px rgba(15, 23, 42, .17));
    transform: translateX(-2%) scale(1.16);
    transform-origin: center;
    animation: ai-bot-art-float 5.4s ease-in-out infinite;
}

.ai-bot-stat-card {
    display: flex;
    min-width: 0;
    min-height: 86px;
    align-items: center;
    justify-content: center;
    padding: .55rem .3rem;
    border: 1px solid var(--bot-border);
    border-radius: 17px;
    background: var(--bot-surface);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
    text-align: center;
    flex-direction: column;
}

.ai-bot-stat-card__icon {
    display: grid;
    width: 29px;
    height: 29px;
    margin-bottom: .34rem;
    place-items: center;
    border-radius: 9px;
    font-size: .68rem;
}

.ai-bot-stat-card__icon.is-green { background: rgba(34, 197, 94, .11); color: var(--bot-green); }
.ai-bot-stat-card__icon.is-blue { background: rgba(59, 130, 246, .11); color: #3b82f6; }
.ai-bot-stat-card__icon.is-purple { background: rgba(168, 85, 247, .11); color: #a855f7; }
.ai-bot-stat-card__icon.is-orange { background: rgba(249, 115, 22, .11); color: #f97316; }

.ai-bot-stat-card strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--bot-text);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-bot-stat-card small {
    display: block;
    margin-top: .16rem;
    color: var(--bot-muted);
    font-size: .52rem;
    line-height: 1.15;
}

[data-theme="dark"] .ai-bot-showcase {
    background:
        radial-gradient(circle at 87% 34%, rgba(34, 197, 94, .17), transparent 8.4rem),
        linear-gradient(145deg, rgba(14, 40, 25, .92), var(--bot-surface) 78%);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .26);
}

[data-theme="dark"] .ai-bot-showcase__art::before {
    background: radial-gradient(circle, rgba(34, 197, 94, .18), rgba(34, 197, 94, .07) 52%, transparent 72%);
}

[data-theme="dark"] .ai-bot-showcase__art img {
    filter: drop-shadow(0 20px 18px rgba(0, 0, 0, .42));
}

@keyframes ai-bot-art-float {
    0%, 100% { transform: translateX(-2%) translateY(0) scale(1.16); }
    50% { transform: translateX(-2%) translateY(-7px) scale(1.18); }
}

@keyframes ai-bot-status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .34); }
    65%, 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

@media (max-width: 360px) {
    .ai-bot-showcase {
        min-height: 220px;
        padding: 1.1rem;
    }

    .ai-bot-showcase__copy { width: 64%; }
    .ai-bot-showcase__title { font-size: 1.42rem; }
    .ai-bot-showcase__description { font-size: .65rem; }
    .ai-bot-showcase__art { right: -10%; width: 58%; }
    .ai-bot-showcase__pill { font-size: .52rem; }
    .ai-bot-stat-card { min-height: 82px; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-bot-showcase__kicker span,
    .ai-bot-showcase__art img {
        animation: none;
    }
}

/* Bootstrap's important utility rules otherwise override Tailwind dark variants. */
[data-theme="dark"] .ai-template-main :where(.text-gray-900, .text-gray-800, .text-gray-700, .text-dark, .text-black) {
    color: #f4f4f5 !important;
}

[data-theme="dark"] .ai-template-main :where(.text-gray-600, .text-gray-500, .text-muted) {
    color: #a1a1aa !important;
}

[data-theme="dark"] .ai-template-main :where(.bg-white) {
    background-color: var(--bot-surface) !important;
}

[data-theme="dark"] .ai-template-main :where(.bg-gray-50, .bg-gray-100):not([class*="dark:bg-"]) {
    background-color: var(--bot-surface-2) !important;
}

[data-theme="dark"] .ai-template-main > :where(.bg-white, .bg-gray-50, .bg-gray-100) {
    background-color: var(--bot-bg) !important;
}

[data-theme="dark"] .ai-template-main :where(.border-gray-100, .border-gray-200, .border-gray-300) {
    border-color: var(--bot-border) !important;
}

[data-theme="dark"] .ai-template-main :where(.card, .modal-content, .dropdown-menu, dialog) {
    border-color: var(--bot-border);
    background-color: var(--bot-surface);
    color: var(--bot-text);
}

[data-theme="dark"] .ai-template-main :where(.dropdown-item, .list-group-item) {
    color: var(--bot-text);
}

[data-theme="dark"] .ai-template-main :where(.dropdown-item, .list-group-item):hover {
    background: var(--bot-surface-3);
}

/* Login follows the active theme from edge to edge. */
.ai-template-auth-body,
.ai-login-page,
.ai-login-shell {
    background: var(--bot-bg) !important;
}

.ai-login-hero {
    background:
        radial-gradient(circle at 92% 8%, rgba(34,197,94,.18), transparent 13rem),
        linear-gradient(180deg, var(--bot-surface), var(--bot-surface-2));
    color: var(--bot-text);
}

.ai-login-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(142px, 42%);
    align-items: center;
    gap: .65rem;
    min-height: 138px;
}

.ai-login-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-bottom: .25rem;
}

.ai-login-copy h2 {
    line-height: 1.08;
}

.ai-login-visual-wrap {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 138px;
    place-items: center;
    pointer-events: none;
}

.ai-login-hero-visual {
    display: block;
    width: 100%;
    height: 132px;
    object-fit: contain;
    object-position: center;
    user-select: none;
}

.ai-login-visual-light {
    filter: drop-shadow(0 16px 18px rgba(15, 23, 42, .16));
}

.ai-login-visual-dark {
    display: none;
    width: 138px;
    border-radius: 18px;
    filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .36));
}

[data-theme="dark"] .ai-login-visual-light {
    display: none;
}

[data-theme="dark"] .ai-login-visual-dark {
    display: block;
}

@media (max-width: 360px) {
    .ai-login-intro {
        grid-template-columns: minmax(0, 1fr) 118px;
        gap: .35rem;
    }

    .ai-login-copy h2 {
        font-size: 1.65rem;
    }

    .ai-login-hero-visual {
        height: 116px;
    }

    .ai-login-visual-dark {
        width: 112px;
    }
}

.ai-login-card {
    border: 1px solid var(--bot-border);
    background: var(--bot-surface);
    box-shadow: var(--bot-card-shadow);
}

.ai-login-muted {
    color: var(--bot-muted) !important;
}

.ai-login-control {
    min-height: 44px;
    border: 1px solid var(--bot-border);
    border-radius: 12px;
    background: var(--bot-surface-2);
    padding: 0 .8rem;
    color: var(--bot-text);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ai-login-control:focus-within {
    border-color: var(--bot-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bot-green) 18%, transparent);
}

.ai-login-control input {
    min-height: 42px;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--bot-text) !important;
    box-shadow: none !important;
}

.ai-password-toggle {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--bot-muted);
}

.ai-login-submit {
    min-height: 42px !important;
    border: 0;
    background: linear-gradient(135deg, var(--bot-green), #16a34a);
    color: #fff;
}

[data-theme="dark"] .ai-login-submit {
    background: linear-gradient(135deg, var(--bot-gold), var(--bot-gold-strong));
    color: #17120a;
}

.ai-login-security {
    border: 1px solid var(--bot-border);
    background: var(--bot-surface-2);
}

.ai-form-alert {
    border: 1px solid transparent;
    border-radius: 11px;
    padding: .7rem .8rem;
    font-size: .8rem;
}

.ai-form-alert.is-error {
    border-color: rgba(239,68,68,.25);
    background: rgba(239,68,68,.09);
    color: #dc2626;
}

.ai-form-alert.is-success {
    border-color: rgba(34,197,94,.25);
    background: rgba(34,197,94,.09);
    color: #15803d;
}

[data-theme="dark"] .ai-form-alert.is-error { color: #fca5a5; }
[data-theme="dark"] .ai-form-alert.is-success { color: #86efac; }

/* Durable visual fallback for inaccessible local or remote images. */
.ai-image-placeholder {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.22), transparent 36%),
        linear-gradient(135deg, color-mix(in srgb, var(--bot-green) 24%, var(--bot-surface)), var(--bot-surface-3));
    color: var(--bot-text);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-align: center;
}

.ai-avatar-image,
.ai-bot-thumbnail {
    display: block;
    object-fit: cover;
}

.ai-upload-panel {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
    padding: .8rem;
    border: 1px dashed var(--bot-border);
    border-radius: 14px;
    background: var(--bot-surface-2);
}

.ai-upload-preview {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(34,197,94,.22), var(--bot-surface-3));
    color: var(--bot-text);
    font-size: 1.05rem;
    font-weight: 900;
}

.ai-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}