/* My Crypto Trail - Milestone 1 Design System */
/* Synced 1:1 with Figma "My Crypto trail 2026 updated" (file 9OuHUh1FjtbDXtZC2NIpoH) */

:root {
    /* Color Palette — Figma variables */
    --color-base-bg: #010009;                      /* outer frame base */
    --color-primary-bg: rgba(1, 0, 9, 0.6);        /* outer frame fill */
    --color-panel-bg: rgba(1, 0, 9, 0.15);         /* Register Form panel fill */
    --color-panel-border: #6872FF;                 /* Register Form panel border */
    --geek-blue-0: #F0F5FF;                        /* Geek Blue/0 */
    --geek-blue-6: #2F54EB;                        /* Geek Blue/6 (checkbox, links) */
    --geek-blue-7: #1D39C4;                        /* Geek Blue/7 (primary button) */
    --color-input-bg: rgba(29, 57, 196, 0.15);     /* Geek Blue (Primary Opacity)/15% */
    --color-input-border: rgba(255, 255, 255, 0.1);
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #95ACCB;               /* Neutrals/3 */
    --color-link: #85A5FF;
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;

    /* Typography — Figma text styles */
    --font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-alt: 'Space Grotesk', var(--font-family);

    /* Heading/H1 (auth titles) */
    --font-size-auth-title: 40px;
    --line-height-auth-title: 1.2;
    --tracking-auth-title: 0.4px;

    /* Heading/H4/Regular (auth subtitle) */
    --font-size-auth-subtitle: 18px;
    --line-height-auth-subtitle: 24px;
    --tracking-auth-subtitle: 0.18px;

    /* Body/Body1 */
    --font-size-body: 16px;
    --line-height-body: 20px;
    --tracking-body: 0.16px;

    /* Body/Body2 */
    --font-size-small: 14px;
    --line-height-small: 18px;
    --tracking-small: 0.14px;

    /* Button (large CTA) */
    --font-size-button: 20px;
    --line-height-button: 26px;
    --tracking-button: 0.2px;

    /* Spacing — Figma variables */
    --space-6sm: 6px;
    --space-5sm: 8px;   /* 5sm */
    --space-2sm: 16px;  /* 2sm */
    --space-md: 24px;   /* md */
    --space-lg: 32px;   /* lg */
    --space-2xl: 48px;  /* 2xl */

    /* Radius — Figma variables */
    --radius-input: 10px;
    --radius-button: 12px;
    --radius-panel: 16px;
    --radius-3xl: 24px;
    --radius-checkbox: 4px;

    /* Shadows — Figma Button/Shadow */
    --shadow-button: 0 0 12px rgba(29, 57, 196, 0.2);
    --shadow-button-figma: 0 0 24px rgba(29, 57, 196, 0.2);

    /* Layout */
    --sidebar-width-expanded: 240px;
    --sidebar-width-collapsed: 64px;
}

/* Reset & Base Styles */
.milestone1-body {
    font-family: var(--font-family);
    background-color: var(--color-base-bg);
    color: var(--color-text-primary);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ============ Auth Layout (Figma: Login / Registration & Onboarding) ============ */
/* Outer frame: blur(20) bg rgba(1,0,9,.6) p-24 gap-48 radius-24 */
.milestone1-auth-layout {
    display: flex;
    gap: var(--space-2xl);
    align-items: stretch;
    min-height: 100vh;
    padding: var(--space-md);
    box-sizing: border-box;
    background: var(--color-primary-bg);
    backdrop-filter: blur(20px);
}

/* Form panel (Figma "Register Form"): blur(29) bg rgba(1,0,9,.15) border .5 #6872FF radius 16 px-48 */
.milestone1-auth-left {
    flex: 1 0 0;
    min-width: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-lg) var(--space-2xl) var(--space-2sm);
    background: var(--color-panel-bg);
    border: 0.5px solid var(--color-panel-border);
    border-radius: var(--radius-panel);
    backdrop-filter: blur(29px);
}

/* Glow lights (Figma "Light" ellipses) */
.milestone1-auth-left::before {
    content: '';
    position: absolute;
    width: 322px;
    height: 322px;
    left: 472px;
    top: -122px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 84, 235, 0.55) 0%, rgba(47, 84, 235, 0) 70%);
    filter: blur(68px);
    pointer-events: none;
}

.milestone1-auth-left::after {
    content: '';
    position: absolute;
    width: 522px;
    height: 522px;
    left: -196px;
    top: 665px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 84, 235, 0.45) 0%, rgba(47, 84, 235, 0) 70%);
    filter: blur(88px);
    pointer-events: none;
}

/* Image panel (Figma "Column Left") */
.milestone1-auth-right {
    flex: 1 0 0;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-md);
}

.milestone1-auth-hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.milestone1-auth-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(22.6deg, rgba(0, 0, 0, 0.76) 22.28%, rgba(0, 0, 0, 0) 44.23%);
    pointer-events: none;
}

/* Hero bottom text (Figma "Text") */
.milestone1-hero-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 34px;
    width: calc(100% - 96px);
    max-width: 624px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    z-index: 1;
}

.milestone1-hero-heading {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 36px;
    line-height: 30px;
    letter-spacing: 0.36px;
    color: var(--geek-blue-0);
    margin: 0 0 var(--space-2sm) 0;
}

.milestone1-hero-body {
    font-family: var(--font-family-alt);
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.3px;
    color: var(--color-text-primary);
    margin: 0;
}

/* Carousel dots (Figma "Divider" group) */
.milestone1-hero-dots {
    display: flex;
    gap: var(--space-5sm);
    align-items: center;
}

.milestone1-hero-dot {
    height: 6px;
    width: 8px;
    border-radius: 40px;
    background: var(--geek-blue-0);
    opacity: 0.2;
}

.milestone1-hero-dot.active {
    width: 32px;
    opacity: 1;
}

/* Gradient progress bar variant (Login screen) */
.milestone1-hero-bar {
    width: 230px;
    height: 6px;
    border-radius: 40px;
}

/* ============ Auth Form ============ */
.milestone1-auth-card {
    width: 100%;
    max-width: 576px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Heading block: title 40 Bold + subtitle 18 Regular, centered */
.milestone1-auth-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-2sm);
    align-items: center;
    text-align: center;
}

.milestone1-auth-title {
    font-size: var(--font-size-auth-title);
    line-height: var(--line-height-auth-title);
    letter-spacing: var(--tracking-auth-title);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.milestone1-auth-title-left {
    text-align: left;
    align-self: flex-start;
}

.milestone1-auth-subtitle {
    font-size: var(--font-size-auth-subtitle);
    line-height: var(--line-height-auth-subtitle);
    letter-spacing: var(--tracking-auth-subtitle);
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0;
}

.milestone1-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
}

.milestone1-auth-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-2sm);
    width: 100%;
}

.milestone1-field-row {
    display: flex;
    gap: var(--space-2sm);
    width: 100%;
}

.milestone1-field-row > .milestone1-form-group {
    flex: 1 0 0;
    min-width: 0;
}

/* Form Components */
.milestone1-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

.milestone1-form-label {
    display: block;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: var(--tracking-body);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.milestone1-form-input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 12px;
    background: var(--color-input-bg);
    border: 0.5px solid var(--color-input-border);
    border-radius: var(--radius-input);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: var(--tracking-body);
    transition: all 0.2s ease;
}

.milestone1-form-input::placeholder {
    color: var(--color-text-secondary);
}

.milestone1-form-input:focus {
    outline: none;
    border-color: var(--geek-blue-6);
    box-shadow: 0 0 0 1px rgba(47, 84, 235, 0.35);
}

.milestone1-form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.milestone1-form-input-error {
    border-color: var(--color-danger);
}

.milestone1-form-error {
    font-size: var(--font-size-small);
    color: var(--color-danger);
    margin-top: 4px;
}

.milestone1-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
    transition: color 0.2s ease;
}

.milestone1-back-btn:hover {
    color: var(--color-text-primary);
}

.milestone1-form-success {
    font-size: var(--font-size-small);
    color: var(--color-success);
    background: rgba(34, 197, 94, 0.1);
    border: 0.5px solid var(--color-success);
    border-radius: var(--radius-input);
    padding: var(--space-2sm);
}

/* Checkbox — Figma: 16px, #2F54EB, radius 4 */
.milestone1-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2sm);
    cursor: pointer;
}

.milestone1-checkbox-input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 0.5px solid var(--color-input-border);
    border-radius: var(--radius-checkbox);
    background: var(--color-input-bg);
    margin: 0;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.milestone1-checkbox-input:checked {
    background: var(--geek-blue-6);
    border-color: var(--geek-blue-6);
}

.milestone1-checkbox-input:checked::after {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.milestone1-checkbox-label {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: var(--tracking-body);
    font-weight: 700;
    color: var(--color-text-secondary);
}

.milestone1-checkbox-label a,
.milestone1-checkbox-label .milestone1-auth-link {
    color: var(--geek-blue-6);
}

/* ============ Buttons ============ */
.milestone1-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--radius-button);
    font-family: var(--font-family);
    font-size: var(--font-size-button);
    line-height: var(--line-height-button);
    letter-spacing: var(--tracking-button);
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: var(--space-5sm);
}

.milestone1-btn-primary {
    background: var(--geek-blue-7);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-button);
}

.milestone1-btn-primary:hover {
    background: var(--geek-blue-6);
    box-shadow: var(--shadow-button-figma);
}

.milestone1-btn-primary:active {
    background: var(--geek-blue-7);
}

.milestone1-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Smaller CTA (2FA Continue) */
.milestone1-btn-sm {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: var(--tracking-body);
}

.milestone1-btn-secondary {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    border: 0.5px solid var(--color-input-border);
}

.milestone1-btn-secondary:hover {
    background: rgba(29, 57, 196, 0.25);
}

.milestone1-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Social Login Button — Figma: input-style bg, py-14, Barlow Bold 16 */
.milestone1-social-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 24px;
    background: var(--color-input-bg);
    border: 0.5px solid var(--color-input-border);
    border-radius: var(--radius-button);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: var(--tracking-body);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.milestone1-social-btn:hover {
    background: rgba(29, 57, 196, 0.25);
}

.milestone1-social-icon {
    width: 16px;
    height: 16px;
}

/* Auth footer links — Barlow SemiBold 14 */
.milestone1-auth-footer {
    text-align: center;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    letter-spacing: var(--tracking-small);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.milestone1-auth-link {
    color: var(--color-link);
    text-decoration: none;
}

.milestone1-auth-link:hover {
    text-decoration: underline;
}

.milestone1-or-divider {
    text-align: center;
    width: 100%;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    letter-spacing: var(--tracking-small);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.milestone1-auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2sm);
    align-items: center;
    width: 100%;
}

.milestone1-auth-actions .milestone1-btn,
.milestone1-auth-actions .milestone1-social-btn {
    width: 100%;
}

/* ============ 2FA ============ */
.milestone1-option-card {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: var(--space-2sm);
    align-items: center;
    padding: 14px 24px;
    background: var(--color-input-bg);
    border: 0.5px solid var(--color-input-border);
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    color: var(--color-text-primary);
}

.milestone1-option-card:hover,
.milestone1-option-card.selected {
    border-color: var(--geek-blue-6);
}

.milestone1-option-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.milestone1-option-title {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0.33px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5sm) 0;
}

.milestone1-option-subtitle {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: var(--tracking-body);
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0;
}

/* OTP Input */
.milestone1-otp-container {
    display: flex;
    gap: var(--space-2sm);
    width: 100%;
}

.milestone1-otp-input {
    flex: 1 0 0;
    min-width: 0;
    height: 58px;
    box-sizing: border-box;
    background: var(--color-input-bg);
    border: 0.5px solid var(--color-input-border);
    border-radius: var(--radius-button);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.milestone1-otp-input:focus {
    outline: none;
    border-color: var(--geek-blue-6);
    box-shadow: 0 0 0 1px rgba(47, 84, 235, 0.35);
}

/* ============ Legacy aliases (kept for non-auth pages) ============ */
.milestone1-page-title {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.milestone1-section-title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.milestone1-card-title {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.milestone1-body-text {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: 400;
    color: var(--color-text-secondary);
}

.milestone1-small-text {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--color-text-secondary);
}

.milestone1-card {
    background: var(--color-input-bg);
    border: 0.5px solid var(--color-input-border);
    border-radius: var(--radius-panel);
    padding: var(--space-md);
}

.milestone1-card-elevated {
    background: var(--color-input-bg);
    border: 0.5px solid var(--color-panel-border);
    border-radius: var(--radius-3xl);
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
    .milestone1-auth-layout {
        flex-direction: column;
    }

    .milestone1-auth-right {
        display: none;
    }

    .milestone1-auth-left {
        padding: var(--space-lg) var(--space-md);
    }
}

@media (max-width: 768px) {
    .milestone1-auth-title {
        font-size: 32px;
    }

    .milestone1-field-row {
        flex-direction: column;
    }
}

/* Utility Classes */
.milestone1-text-center { text-align: center; }

.milestone1-mt-1 { margin-top: var(--space-5sm); }
.milestone1-mt-2 { margin-top: var(--space-2sm); }
.milestone1-mt-3 { margin-top: var(--space-md); }
.milestone1-mt-4 { margin-top: var(--space-lg); }

.milestone1-mb-1 { margin-bottom: var(--space-5sm); }
.milestone1-mb-2 { margin-bottom: var(--space-2sm); }
.milestone1-mb-3 { margin-bottom: var(--space-md); }
.milestone1-mb-4 { margin-bottom: var(--space-lg); }

.milestone1-w-100 { width: 100%; }
.milestone1-d-flex { display: flex; }
.milestone1-align-center { align-items: center; }
.milestone1-justify-center { justify-content: center; }
.milestone1-justify-between { justify-content: space-between; }

/* ============ Dashboard ============ */

/* Sidebar section labels & badge */
.sidebar-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #657997;
    padding: 16px 8px 6px;
    display: block;
    text-transform: uppercase;
}

.nav-icon-wrap {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
}

.sidebar-badge {
    background: rgba(29,57,196,0.2);
    color: #85A5FF;
    border: 0.5px solid rgba(255,255,255,0.05);
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    padding: 3px 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Sidebar wallets block */
.sidebar-wallets-block {
    margin-bottom: 16px;
}

.sidebar-wallets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sidebar-wallet-add {
    background: rgba(29,57,196,0.3);
    border: none;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sidebar-wallet-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.sidebar-wallet-emoji {
    font-size: 13px;
    flex-shrink: 0;
}

.sidebar-wallet-name {
    font-size: 12px;
    color: #95ACCB;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-wallet-bar {
    width: 32px;
    height: 6px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.sidebar-wallet-pct {
    font-size: 11px;
    color: #657997;
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}

.sidebar-wallet-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.sidebar-wallet-list {
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.sidebar-wallet-list::-webkit-scrollbar {
    width: 3px;
}

.sidebar-wallet-list::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-wallet-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

/* Directions card */
.directions-card {
    background: rgba(3,8,82,0.1);
    border: 1px solid #6872ff;
    border-radius: 28px;
    padding: 24px 16px 16px;
    text-align: center;
}

.directions-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.directions-body {
    font-size: 12px;
    color: #95ACCB;
    margin-bottom: 12px;
}

/* Dashboard top row */
.db-top-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}

.db-hero-card {
    flex: 0 0 55%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
    min-height: 480px;
}

.db-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.db-stats-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Wraps the 3 stat boxes in one card */
.db-stat-card {
    background: rgba(29,57,196,0.1);
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 16px;
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.db-stats-row {
    display: flex;
    gap: 12px;
}

.db-stat-box {
    background: rgba(29,57,196,0.1);
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 12px 16px;
    flex: 1;
}

.db-stat-health-box {
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 12px 16px;
}

.db-stat-health-box .db-stat-value {
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: auto;
    min-height: auto;
    display: inline;
    font-size: 18px;
}

.db-stat-label {
    font-size: 14px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.14px;
}

.db-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.18px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 8px;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.db-stat-health {
    color: #13C2C2;
}

/* Task card */
.db-task-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 16px 0 0;
    flex: 1;
}

.db-task-card-header {
    margin-bottom: 12px;
}

.db-task-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.db-task-subtitle {
    font-size: 12px;
    color: #95ACCB;
    margin: 0;
}

.db-task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.db-task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(29,57,196,0.5);
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 8px 12px;
    min-height: 48px;
    backdrop-filter: blur(16px);
}

.db-task-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.db-icon-exodus  { background: #6872FF; }
.db-icon-coinbase { background: #0052FF; }
.db-icon-ledger  { background: #1D1D1B; border: 1px solid rgba(255,255,255,0.2); }

.db-task-text {
    flex: 1;
    font-size: 12px;
    color: #fff;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-task-badge {
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    padding: 3px 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.db-badge-start {
    background: #FA541C;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.db-badge-completed {
    background: #13C2C2;
    color: #fff;
}

.db-task-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.db-task-close:hover { opacity: 1; }

/* Vault section */
.db-vault-section {
    background: rgba(29,57,196,0.1);
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.db-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.db-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.db-section-subtitle {
    font-size: 13px;
    color: #95ACCB;
    margin: 0;
}

.db-create-btn {
    font-size: 14px;
    font-weight: 700;
    height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(29,57,196,0.2);
}

/* Vault grid */
.db-vault-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.db-vault-card {
    background: rgba(29,57,196,0.2);
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 16px;
    backdrop-filter: blur(16px);
}

.db-vault-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.db-vault-count {
    font-size: 10px;
    font-weight: 700;
    color: #85A5FF;
    letter-spacing: 0.5px;
    background: rgba(29,57,196,0.2);
    padding: 3px 8px;
    border-radius: 6px;
}

.db-vault-menu {
    background: none;
    border: none;
    color: #95ACCB;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.db-vault-menu:hover { color: #fff; }

.db-vault-name {
    font-size: 14px;
    font-weight: 700;
    color: #F0F5FF;
    margin: 10px 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-vault-divider {
    height: 0;
    border-top: 0.5px solid rgba(255,255,255,0.12);
    margin-bottom: 10px;
}

.db-wallet-group {
    margin-bottom: 8px;
}

.db-wallet-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #e3e3e3;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.db-wallet-type-emoji {
    font-size: 14px;
    line-height: 1;
}

.db-wallet-name-item {
    font-size: 13px;
    color: #e3e3e3;
    padding: 4px 0 4px 20px;
    border-left: 1.5px solid rgba(255,255,255,0.15);
    margin-left: 8px;
    margin-bottom: 2px;
}

/* Dashboard Modal */
.db-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(1,0,9,0.8);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-modal {
    background: #0d1035;
    border: 0.5px solid rgba(104,114,255,0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    padding: 28px;
    box-shadow: 0 0 40px rgba(29,57,196,0.3);
}

.db-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.db-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.db-modal-close {
    background: none;
    border: none;
    color: #95ACCB;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.db-modal-close:hover { color: #fff; }

.db-modal-body { margin-bottom: 24px; }

.db-modal-footer {}

.db-color-swatches {
    display: flex;
    gap: 10px;
}

.db-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.db-swatch:hover { transform: scale(1.1); }

.db-swatch-active {
    border-color: #fff;
    transform: scale(1.1);
}

/* Dashboard responsive */
@media (max-width: 960px) {
    .db-vault-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .db-top-row { flex-direction: column; }
    .db-hero-card { flex: none; height: 220px; min-height: 0; }
}

@media (max-width: 768px) {
    .db-vault-grid { grid-template-columns: 1fr; }
    .db-stats-row { flex-direction: column; }
}

/* ============ My Trails ============ */
.mt-shell {
    min-height: calc(100vh - 120px);
    padding: 16px;
    border: .5px solid rgba(255,255,255,.1);
    border-radius: 20px;
    background: rgba(29,57,196,.1);
    color: #fff;
}

.mt-heading { padding: 0 0 16px; }
.mt-heading h2 { margin: 0 0 8px; font-size: 18px; line-height: 24px; font-weight: 700; }
.mt-heading p { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; }

.mt-toolbar,
.mt-filters,
.mt-actions,
.mt-card-top,
.mt-card-bottom,
.mt-detail-meta,
.mt-detail-actions,
.mt-media-actions {
    display: flex;
    align-items: center;
}

.mt-toolbar { justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.mt-filters, .mt-actions { gap: 16px; }

.mt-filter,
.mt-btn {
    min-height: 40px;
    border: .5px solid rgba(255,255,255,.1);
    border-radius: 12px;
    color: #fff;
    background: rgba(29,57,196,.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font: 700 14px/16px 'Barlow', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}

.mt-filter span { width: 10px; height: 10px; border: 3px solid var(--filter-color); border-radius: 50%; }
.mt-filter.active { background: color-mix(in srgb, var(--filter-color) 80%, transparent); border-color: #fff; }
.mt-filter.active span { border-color: #fff; }
.mt-btn:hover, .mt-filter:hover { color: #fff; border-color: rgba(255,255,255,.5); transform: translateY(-1px); }
.mt-btn-primary { min-height: 48px; background: #1d39c4; box-shadow: 0 0 12px rgba(29,57,196,.2); }
.mt-btn-muted { min-height: 48px; padding-inline: 24px; }
.mt-btn-action { min-height: 32px; padding: 8px 16px; border-radius: 10px; background: rgba(29,57,196,.5); }

.mt-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mt-card,
.mt-detail-header,
.mt-question-tab,
.mt-question-panel {
    border: .5px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(29,57,196,.2);
    backdrop-filter: blur(16px);
}

.mt-card {
    min-height: 136px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #e3e3e3;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}

.mt-card:hover { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(29,57,196,.32); transform: translateY(-2px); }
.mt-card-top, .mt-card-bottom { justify-content: space-between; gap: 8px; }
.mt-card-top strong, .mt-detail-header strong { font: 900 14px/18px 'Lato', sans-serif; }
.mt-emoji { margin-right: 8px; font: 400 16px/20px 'Lato', sans-serif; }
.mt-card-detail { min-height: 39px; margin-left: 8px; padding: 10px 8px; border-left: 2px solid rgba(104,114,255,.65); font: 400 14px/18px 'Lato', sans-serif; }

.mt-type {
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(29,57,196,.35);
    color: #1890ff;
    font: 700 10px/14px 'Barlow', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
}
.mt-type-hot-wallet { color: #fa541c; background: rgba(250,84,28,.2); }
.mt-type-exchange { color: #13c2c2; background: rgba(19,194,194,.2); }

.mt-status { display: inline-flex; align-items: center; gap: 6px; color: #13c2c2; font: 400 12px/16px 'Barlow', sans-serif; white-space: nowrap; }
.mt-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mt-status-good { color: #d4b106; }
.mt-status-needs-update { color: #fa541c; }

.mt-empty { grid-column: 1 / -1; padding: 64px 24px; text-align: center; border: 1px dashed rgba(255,255,255,.18); border-radius: 16px; }
.mt-empty > span { font-size: 32px; color: #85a5ff; }
.mt-empty h3 { margin: 12px 0 4px; font-size: 18px; }
.mt-empty p { color: #95accb; }
.mt-empty .mt-btn { margin-top: 16px; }

.mt-detail-shell { padding: 16px; }
.mt-back { margin: 0 16px 16px; }
.mt-detail-header { min-height: 88px; padding: 24px 16px; justify-content: space-between; gap: 16px; }
.mt-detail-meta { gap: 12px; margin-top: 8px; color: #e3e3e3; font: 400 14px/18px 'Lato', sans-serif; }
.mt-detail-actions { gap: 16px; margin-top: 16px; }

.mt-question-layout { margin-top: 16px; display: grid; grid-template-columns: 1fr; gap: 16px; }
.mt-question-nav { display: none; }
.mt-question-tab, .mt-question-panel-title { color: #e3e3e3; }
.mt-question-tab {
    min-height: 64px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font: 900 14px/18px 'Lato', sans-serif;
}
.mt-question-tab.active { background: rgba(29,57,196,.4); border-color: #fff; }
.mt-question-label { display: flex; align-items: center; gap: 16px; }
.mt-question-label i { width: 20px; height: 17px; border: 1.5px solid #fff; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 'Barlow', sans-serif; }
.mt-question-panels { display: flex; flex-direction: column; gap: 16px; }
.mt-question-panel { overflow: hidden; }
.mt-question-panel-title { width: 100%; min-height: 64px; padding: 20px 24px; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; font: 900 14px/18px 'Lato', sans-serif; text-align: left; }
.mt-question-content { display: none; padding: 0 20px 20px; }
.mt-question-panel.active .mt-question-content { display: block; }
.mt-question-panel.active .mt-chevron { transform: rotate(180deg); }
.mt-media-actions { gap: 16px; }
.mt-media-actions .mt-btn { flex: 1; min-height: 48px; }
.mt-media-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mt-media-card { min-height: 104px; padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-decoration: none; text-align: center; }
.mt-media-card:hover { color: #fff; border-color: rgba(255,255,255,.45); }
.mt-media-card strong { font: 700 14px/16px 'Barlow', sans-serif; word-break: break-word; }
.mt-media-add { border-style: dashed; }

@media (min-width: 1100px) {
    .mt-question-layout.split-view { grid-template-columns: 327px minmax(0, 1fr); align-items: start; }
    .mt-question-layout.split-view .mt-question-nav { display: flex; flex-direction: column; gap: 16px; }
    .mt-question-layout.split-view .mt-question-panels { display: block; }
    .mt-question-layout.split-view .mt-question-panel { display: none; }
    .mt-question-layout.split-view .mt-question-panel.active { display: block; }
    .mt-question-layout.split-view .mt-question-panel-title .mt-chevron { display: none; }
}

@media (max-width: 1180px) {
    .mt-toolbar { align-items: flex-start; }
    .mt-filters { flex-wrap: wrap; }
    .mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .mt-shell { padding: 12px; }
    .mt-toolbar, .mt-detail-header { flex-direction: column; align-items: stretch; }
    .mt-actions, .mt-detail-actions { justify-content: stretch; }
    .mt-actions .mt-btn, .mt-detail-actions .mt-btn { flex: 1; }
    .mt-grid, .mt-media-grid { grid-template-columns: 1fr; }
    .mt-filters { gap: 8px; }
    .mt-filter { flex: 1 1 calc(50% - 8px); padding-inline: 10px; }
    .mt-detail-meta { flex-wrap: wrap; }
    .mt-media-actions { flex-direction: column; align-items: stretch; }
}