:root {
    --app-font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
    --app-font-body: var(--app-font-family);
    --app-font-heading: var(--app-font-family);
    --app-font-ui: var(--app-font-family);
    --app-font-mono: "Consolas", "SFMono-Regular", "Liberation Mono", "Courier New", monospace;
    --app-heading-letter-spacing: 0.01em;
    --app-title-main-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.4rem);
    --app-title-main-weight: 700;
    --app-title-main-letter-spacing: 0.015em;
    --app-title-main-line-height: 1.12;
    --app-copy-color: #cfdae5;
    --app-copy-intro-size: 1.05rem;
    --app-copy-intro-letter-spacing: 0.01em;
    --app-copy-intro-line-height: 1.4;
    --app-copy-card-size: 1rem;
    --app-copy-card-letter-spacing: 0.01em;
    --app-copy-card-line-height: 1.4;
    --app-account-max-width: 72rem;
    --app-account-gap: 1rem;
    --app-account-sidebar-min: 17rem;
    --app-account-sidebar-max: 22rem;
    --app-account-panel-padding: 1.15rem;
    --app-account-muted-size: 0.84rem;
    --app-account-chip-bg: rgba(34, 211, 238, 0.18);
    --app-account-chip-text: #dff8ff;
    --app-account-badge-success-bg: rgba(14, 165, 171, 0.26);
    --app-account-badge-success-text: #dff8ff;
    --app-account-badge-neutral-bg: rgba(148, 163, 184, 0.2);
    --app-account-badge-neutral-text: #dbe7f3;
    --app-account-row-border: #2a4653;
    --app-token-max-width: 48rem;
    --app-token-gap: 0.9rem;
    --app-token-card-padding: 1.15rem;
    --app-token-icon-size: 2rem;
    --app-auth-userpass-label-width: 6rem;
    --app-auth-userpass-column-gap: 0.35rem;
    --app-auth-userpass-input-height: 1.85rem;
    --app-auth-userpass-input-padding-y: 0.2rem;
    --app-auth-userpass-input-padding-x: 0.55rem;
    --app-bg: #040b10;
    --app-text: #f2f7fc;
    --app-muted: #aabccc;
    --app-surface: #101c24;
    --app-surface-soft: #152733;
    --app-border: #29404a;
    --app-primary: #0f7683;
    --app-primary-hover: #0c6671;
    --app-primary-contrast: #ffffff;
    --app-link: #5fd2e0;
    --app-link-hover: #93e8f2;
    --app-nav-bg: linear-gradient(180deg, rgba(30, 77, 80, 0.95) 0%, rgba(12, 30, 36, 0.75) 82%, rgba(12, 30, 36, 0) 100%);
    --app-nav-border: rgba(34, 211, 238, 0.24);
    --app-nav-text: #ffffff;
    --app-card-radius: 0.85rem;
    --app-button-radius: 0.6rem;
    --app-input-radius: 0.5rem;
    --app-shadow-card: 0 10px 22px rgba(0, 0, 0, 0.38);
    --app-shadow-card-hover: 0 14px 28px rgba(0, 0, 0, 0.45);
    --app-shadow-button: none;
    --app-focus-ring: #67d6e3;
    --app-language-trigger-bg: rgba(8, 18, 24, 0.92);
    --app-language-trigger-border: rgba(95, 210, 224, 0.34);
    --app-language-menu-bg: rgba(8, 18, 24, 0.96);
    --app-language-menu-border: rgba(95, 210, 224, 0.34);
    --app-language-option-text: #e8f1fb;
    --app-language-option-hover-bg: rgba(95, 210, 224, 0.13);
    --app-language-option-active-bg: rgba(95, 210, 224, 0.2);
    --app-language-check: #78e6f2;
    --app-shell-bg:
        linear-gradient(180deg, rgba(3, 10, 14, 0.46) 0%, rgba(3, 10, 14, 0.68) 100%),
        url("/images/pegasi_bg.jpg") center center / cover no-repeat fixed;
}

.app-shell {
    letter-spacing: 0.01em;
    line-height: 1.38;
    background-color: #030a0e;
    background-image:
        linear-gradient(180deg, rgba(3, 10, 14, 0.46) 0%, rgba(3, 10, 14, 0.68) 100%),
        url("/images/pegasi_bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.app-nav {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

#logo {
    height: 2.25rem;
    width: auto;
}

.brand-wordmark {
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: none;
    font-weight: 700;
}

.app-shell .card.bg-gray-800 {
    background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-surface-soft) 100%) !important;
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-card);
}

.app-shell .card.bg-gray-800:hover {
    box-shadow: var(--app-shadow-card-hover);
}

.app-shell .btn {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.015em;
}

.app-shell .btn.bg-cyan-700,
.app-shell .btn.bg-cyan-700:focus {
    border-width: 1px;
}

.app-shell .btn.bg-cyan-700:hover,
.app-shell .btn.bg-cyan-700:active {
    text-decoration: none;
}

.app-shell .input.input-bordered {
    background: rgba(6, 15, 21, 0.92) !important;
    color: var(--app-text) !important;
    border-color: #30505d !important;
}

.app-shell .input::placeholder {
    color: #90a6b8;
}

.app-shell .bg-gray-900 {
    background: rgba(6, 14, 20, 0.72) !important;
}

.app-shell a.text-cyan-500 {
    color: var(--app-link) !important;
}

.app-shell a.text-cyan-500:hover {
    color: var(--app-link-hover) !important;
}

.language-selector-trigger,
.language-selector-menu,
.language-selector-option {
    border-radius: 0.5rem;
}

@media (max-width: 768px) {
    #logo {
        height: 1.95rem;
    }

    .brand-wordmark {
        font-size: 0.9rem;
    }

    .app-shell {
        background-attachment: scroll;
    }
}