:root {
    --font-family-base: "Segoe UI", Inter, Arial, sans-serif;

    --color-primary: #7c5cfa;
    --color-primary-rgb: 124, 92, 250;
    --color-secondary: #f5a524;
    --color-secondary-rgb: 245, 165, 36;
    --color-bg: #0f111a;
    --color-surface: #171b2b;
    --color-surface-alt: #1e2436;
    --color-text: #f7f8fc;
    --color-text-rgb: 247, 248, 252;
    --color-text-muted: #a9b1c6;
    --color-border: #2a3145;
    --color-success: #38c793;
    --color-warning: #f5a524;
    --color-error: #ff6b6b;
    --color-info: #5bc0eb;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;

    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.875rem;

    --line-height-tight: 1.25;
    --line-height-normal: 1.6;

    --elevation-1: 0 10px 30px rgba(0, 0, 0, 0.18);
    --elevation-2: 0 16px 40px rgba(0, 0, 0, 0.26);
    --elevation-3: 0 20px 56px rgba(0, 0, 0, 0.32);
}

html, body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

a {
    color: var(--color-primary);
}

*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.ts-text-muted {
    color: var(--color-text-muted);
}

.ts-text-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ts-surface-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)), var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
}

.ts-surface-panel--alt {
    background: var(--color-surface-alt);
}

.ts-preview-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ts-section-header {
    margin-bottom: var(--space-5);
}

.ts-section-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ts-toolbar {
    padding: var(--space-4);
}

.ts-stat-card {
    padding: var(--space-5);
}

.ts-stat-card__icon {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: rgba(124, 92, 250, 0.12);
    border: 1px solid rgba(124, 92, 250, 0.22);
}

.ts-state-block {
    padding: var(--space-6);
    text-align: center;
}

.ts-chip-label {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ts-auth-shell {
    padding-top: var(--space-6);
    padding-bottom: var(--space-8);
}

.ts-auth-landing {
    display: grid;
    gap: var(--space-5);
    width: 100%;
    max-width: 76rem;
    margin: 0 auto;
    justify-content: center;
    justify-items: center;
}

.ts-auth-card,
.ts-auth-context {
    padding: var(--space-6);
    width: 100%;
}

.ts-auth-card {
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    justify-content: center;
}

.ts-auth-context {
    max-width: 40rem;
}

.ts-auth-card__header,
.ts-auth-context__header,
.ts-auth-link-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ts-auth-card__header {
    gap: var(--space-3);
}

.ts-auth-brand,
.ts-auth-card__title,
.ts-auth-context__title {
    line-height: var(--line-height-tight);
}

.ts-auth-alert-stack,
.ts-auth-form,
.ts-auth-form__stack,
.ts-auth-context,
.ts-auth-context__hero,
.ts-auth-context__actions,
.ts-auth-context__highlights {
    display: grid;
}

.ts-auth-alert-stack,
.ts-auth-form__stack,
.ts-auth-context,
.ts-auth-context__hero,
.ts-auth-context__actions,
.ts-auth-context__highlights {
    gap: var(--space-4);
}

.ts-auth-form {
    gap: var(--space-5);
}

.ts-auth-form__submit {
    margin-top: var(--space-1);
}

.ts-auth-card__footer {
    margin-top: 0;
}

.ts-auth-context {
    position: relative;
    overflow: hidden;
    align-content: start;
    background:
        radial-gradient(circle at top right, rgba(var(--color-primary-rgb), 0.24), transparent 42%),
        radial-gradient(circle at bottom left, rgba(var(--color-secondary-rgb), 0.14), transparent 34%),
        linear-gradient(180deg, rgba(var(--color-text-rgb), 0.03), rgba(var(--color-text-rgb), 0)),
        var(--color-surface);
}

.ts-auth-context > * {
    position: relative;
}

.ts-auth-context__eyebrow {
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.ts-auth-context__title,
.ts-auth-context__description {
    max-width: 34rem;
}

.ts-auth-section-label,
.ts-auth-highlight__eyebrow,
.ts-account-card__eyebrow,
.ts-action-card__eyebrow,
.ts-metric-card__label,
.ts-metric-pill__label,
.ts-keyvalue-label,
.ts-info-label,
.ts-portal-broadcast__title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ts-auth-section-label,
.ts-account-card__eyebrow,
.ts-action-card__eyebrow,
.ts-metric-card__label,
.ts-metric-pill__label,
.ts-keyvalue-label,
.ts-info-label {
    text-transform: uppercase;
}

.ts-auth-section-label {
    color: rgba(var(--color-text-rgb), 0.72);
}

.ts-auth-highlight__eyebrow {
    color: var(--color-primary);
}

.ts-auth-highlights,
.ts-auth-link-list,
.ts-portal-stack,
.ts-inline-chip-list,
.ts-info-grid,
.ts-metric-grid,
.ts-quick-action-grid,
.ts-compact-link-grid,
.ts-compact-metric-grid,
.ts-detail-grid,
.ts-dialog-grid,
.ts-dialog-stack,
.ts-keyvalue-list,
.ts-activity-list,
.ts-code-grid,
.ts-portal-broadcast__links {
    display: grid;
    gap: var(--space-3);
}

.ts-inline-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ts-auth-highlight,
.ts-auth-link-card,
.ts-action-card,
.ts-metric-card,
.ts-dashboard-account-row,
.ts-portal-broadcast__link,
.ts-activity-item {
    border: 1px solid rgba(var(--color-text-rgb), 0.1);
    border-radius: var(--radius-md);
    background: rgba(var(--color-text-rgb), 0.04);
}

.ts-auth-highlight,
.ts-auth-link-card {
    padding: var(--space-4);
}

.ts-auth-highlight {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    min-height: 100%;
}

.ts-auth-highlight__title,
.ts-auth-link-card__title {
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: var(--line-height-tight);
}

.ts-auth-link-card {
    display: grid;
    gap: var(--space-4);
}

.ts-auth-link-card--discord {
    background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.12), rgba(var(--color-primary-rgb), 0.04));
}

.ts-auth-link-card--download {
    background: linear-gradient(180deg, rgba(var(--color-secondary-rgb), 0.12), rgba(var(--color-secondary-rgb), 0.04));
}

.ts-portal-appbar {
    background: rgba(15, 17, 26, 0.88) !important;
    border-bottom: 1px solid rgba(var(--color-text-rgb), 0.08);
    backdrop-filter: blur(18px);
}

.ts-portal-shell {
    padding-top: var(--space-6);
    padding-bottom: var(--space-8);
}

.ts-page-hero,
.ts-portal-panel,
.ts-account-card,
.ts-dialog-section,
.ts-action-card,
.ts-portal-broadcast {
    padding: var(--space-5);
}

.ts-page-hero {
    padding: var(--space-4);
    position: relative;
    overflow: hidden;
    display: grid;
    gap: var(--space-4);
    background:
        radial-gradient(circle at top right, rgba(var(--color-primary-rgb), 0.22), transparent 40%),
        radial-gradient(circle at bottom left, rgba(var(--color-secondary-rgb), 0.12), transparent 34%),
        linear-gradient(180deg, rgba(var(--color-text-rgb), 0.04), rgba(var(--color-text-rgb), 0)),
        var(--color-surface);
}

.ts-page-hero > * {
    position: relative;
}

.ts-portal-panel,
.ts-account-card,
.ts-dialog-section,
.ts-action-card {
    display: grid;
    gap: var(--space-4);
}

.ts-info-grid {
    gap: 0;
}

.ts-info-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.ts-info-row,
.ts-keyvalue-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(var(--color-text-rgb), 0.08);
}

.ts-info-row:first-child,
.ts-keyvalue-row:first-child {
    padding-top: 0;
}

.ts-info-row:last-child,
.ts-keyvalue-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.ts-info-value,
.ts-keyvalue-value {
    text-align: right;
    font-weight: 600;
    line-height: var(--line-height-tight);
}

.ts-info-grid--single .ts-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.ts-info-grid--single .ts-info-value {
    max-width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ts-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ts-metric-card,
.ts-metric-pill {
    padding: var(--space-3);
}

.ts-metric-card__value,
.ts-metric-pill__value,
.ts-account-card__title,
.ts-portal-broadcast__title {
    font-weight: 700;
    line-height: var(--line-height-tight);
}

.ts-metric-card__value,
.ts-metric-pill__value {
    font-size: var(--font-size-lg);
}

.ts-portal-home-redirect {
    padding: var(--space-6);
    display: grid;
    gap: var(--space-3);
    justify-items: center;
    text-align: center;
}

.ts-compact-metric-grid {
    gap: var(--space-3);
}

.ts-compact-metric-card,
.ts-compact-link-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid rgba(var(--color-text-rgb), 0.1);
    border-radius: var(--radius-md);
    background: rgba(var(--color-text-rgb), 0.04);
}

.ts-compact-metric-card__value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

.ts-activity-item__meta,
.ts-account-card__header,
.ts-portal-broadcast__body,
.ts-portal-broadcast__compact {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ts-compact-link-card {
    align-content: start;
}

.ts-portal-table {
    display: grid;
    gap: var(--space-2);
}

.ts-portal-table__header,
.ts-portal-table__row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.9fr) minmax(9rem, 1.5fr) minmax(4rem, 0.6fr) minmax(5rem, 0.8fr) minmax(10rem, 1.35fr) minmax(7.5rem, 1.1fr);
    gap: var(--space-3);
    align-items: center;
}

.ts-portal-table__header {
    padding: 0 var(--space-3) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ts-portal-table__row {
    padding: var(--space-3);
    border: 1px solid rgba(var(--color-text-rgb), 0.1);
    border-radius: var(--radius-md);
    background: rgba(var(--color-text-rgb), 0.04);
}

.ts-portal-table__cell {
    min-width: 0;
}

.ts-portal-table__cell--actions {
    justify-self: end;
}

.ts-account-table-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
}

.ts-action-card {
    align-content: start;
}

.ts-account-card {
    height: 100%;
    background:
        linear-gradient(180deg, rgba(var(--color-text-rgb), 0.04), rgba(var(--color-text-rgb), 0)),
        var(--color-surface);
}

.ts-account-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ts-dialog-title {
    display: grid;
    gap: var(--space-1);
}

.ts-dialog-stack {
    padding-top: var(--space-2);
}

.ts-dialog-section {
    background: rgba(var(--color-text-rgb), 0.03);
}

.ts-activity-item {
    padding: var(--space-4);
}

.ts-code-grid {
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}

.ts-code-item {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--color-secondary-rgb), 0.18);
    background: rgba(var(--color-secondary-rgb), 0.08);
    text-align: center;
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--font-size-md);
    font-weight: 700;
}

.ts-portal-broadcast {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.ts-portal-broadcast__intro,
.ts-portal-broadcast__meta {
    display: grid;
    gap: var(--space-2);
}

.ts-portal-broadcast__compact {
    align-items: center;
}

.ts-portal-broadcast__intro--compact {
    gap: var(--space-1);
}

.ts-portal-broadcast__quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ts-portal-broadcast__link {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    display: grid;
}

.ts-portal-broadcast__link--discord {
    background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.12), rgba(var(--color-primary-rgb), 0.04));
}

.ts-portal-broadcast__link--download {
    background: linear-gradient(180deg, rgba(var(--color-secondary-rgb), 0.12), rgba(var(--color-secondary-rgb), 0.04));
}

@media (min-width: 768px) {
    .ts-auth-card,
    .ts-auth-context {
        padding: var(--space-7);
    }

    .ts-auth-link-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ts-auth-link-card {
        align-content: space-between;
    }

    .ts-info-grid,
    .ts-quick-action-grid,
    .ts-compact-link-grid,
    .ts-compact-metric-grid,
    .ts-detail-grid,
    .ts-dialog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-5);
    }

    .ts-info-grid--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .ts-metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ts-compact-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .ts-auth-landing {
        grid-template-columns: minmax(0, 30rem) minmax(0, 40rem);
        gap: var(--space-4);
        align-items: start;
    }

    .ts-auth-card {
        justify-self: end;
    }

    .ts-auth-context {
        justify-self: start;
    }

    .ts-portal-broadcast__body {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
        align-items: center;
    }

    .ts-portal-broadcast__compact {
        flex-wrap: nowrap;
    }

    .ts-portal-broadcast__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ts-page-hero,
    .ts-portal-panel,
    .ts-account-card,
    .ts-dialog-section,
    .ts-action-card,
    .ts-portal-broadcast {
        padding: var(--space-4);
    }

    .ts-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ts-info-value,
    .ts-keyvalue-value {
        max-width: 60%;
    }

    .ts-portal-table__header {
        display: none;
    }

    .ts-portal-table__row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .ts-portal-table__cell {
        display: grid;
        gap: var(--space-1);
    }

    .ts-portal-table__cell::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .ts-portal-table__cell--actions {
        justify-self: stretch;
    }

    .ts-account-table-actions {
        justify-content: flex-start;
    }
}