:root {
    --app-font-family: Arial, "Helvetica Neue", "Segoe UI", 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.005em;
    --app-title-main-size: clamp(2rem, 1.35rem + 1.6vw, 2.8rem);
    --app-title-main-weight: 700;
    --app-title-main-letter-spacing: 0.016em;
    --app-title-main-line-height: 1.12;
    --app-copy-color: #1f2430;
    --app-copy-intro-size: 1.05rem;
    --app-copy-intro-letter-spacing: 0.006em;
    --app-copy-intro-line-height: 1.45;
    --app-copy-card-size: 1rem;
    --app-copy-card-letter-spacing: 0.004em;
    --app-copy-card-line-height: 1.45;
    --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(35, 64, 143, 0.12);
    --app-account-chip-text: #1a3278;
    --app-account-badge-success-bg: rgba(0, 174, 239, 0.22);
    --app-account-badge-success-text: #0a2445;
    --app-account-badge-neutral-bg: rgba(188, 189, 192, 0.34);
    --app-account-badge-neutral-text: #1f2530;
    --app-account-row-border: #d5dce8;
    --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: 6.7rem;
    --app-auth-userpass-column-gap: 0.4rem;
    --app-auth-userpass-input-height: 1.95rem;
    --app-auth-userpass-input-padding-y: 0.24rem;
    --app-auth-userpass-input-padding-x: 0.62rem;
    --app-bg: #f3f5f9;
    --app-text: #1d2229;
    --app-muted: #586171;
    --app-surface: #ffffff;
    --app-surface-soft: #f8f9fc;
    --app-border: #cfd6e3;
    --app-primary: #23408f;
    --app-primary-hover: #1a3277;
    --app-primary-contrast: #ffffff;
    --app-link: #23408f;
    --app-link-hover: #000000;
    --app-nav-bg: linear-gradient(90deg, #23408f 0%, #1d377d 100%);
    --app-nav-border: rgba(255, 255, 255, 0.34);
    --app-nav-text: #ffffff;
    --app-card-radius: 0.46rem;
    --app-button-radius: 0.3rem;
    --app-input-radius: 0.25rem;
    --app-shadow-card: 0 10px 24px rgba(20, 34, 80, 0.12);
    --app-shadow-card-hover: 0 14px 30px rgba(20, 34, 80, 0.18);
    --app-shadow-button: none;
    --app-focus-ring: #00aeef;
    --app-language-trigger-bg: #000000;
    --app-language-trigger-border: rgba(255, 255, 255, 0.45);
    --app-language-menu-bg: #000000;
    --app-language-menu-border: rgba(255, 255, 255, 0.28);
    --app-language-option-text: #ffffff;
    --app-language-option-hover-bg: #00aeef;
    --app-language-option-active-bg: #23408f;
    --app-language-check: #ffffff;
    --app-shell-bg:
        radial-gradient(circle at 14% -8%, rgba(0, 174, 239, 0.14) 0%, rgba(0, 174, 239, 0) 45%),
        linear-gradient(180deg, #f8fafd 0%, #eef2f8 100%);
}

.app-shell {
    letter-spacing: 0.005em;
    line-height: 1.42;
    background-color: #eef2f8;
    background-image:
        radial-gradient(circle at 14% -8%, rgba(0, 174, 239, 0.14) 0%, rgba(0, 174, 239, 0) 45%),
        linear-gradient(180deg, #f8fafd 0%, #eef2f8 100%);
}

.app-nav {
    box-shadow: 0 8px 20px rgba(18, 31, 73, 0.24);
}

#logo {
    width: auto;
    height: 2.2rem;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.08));
}

.brand-wordmark {
    display: none;
}

.app-shell .theme-title-main {
    color: #23408f;
    text-transform: uppercase;
    letter-spacing: 0.022em;
}

.app-shell .card.bg-gray-800 {
    background: var(--app-surface) !important;
    border: 1px solid #cfd6e3;
    box-shadow: var(--app-shadow-card);
}

.app-shell .card.bg-gray-800:hover {
    border-color: #23408f;
    box-shadow: var(--app-shadow-card-hover);
}

.app-shell .card-title {
    color: #23408f;
    letter-spacing: 0.012em;
    text-transform: uppercase;
}

.app-shell .btn {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.app-shell .btn.bg-cyan-700,
.app-shell .btn.bg-cyan-700:focus {
    border-color: #23408f;
    color: #ffffff !important;
    background: #23408f !important;
}

.app-shell .btn.bg-cyan-700:hover,
.app-shell .btn.bg-cyan-700:active {
    border-color: #00aeef;
    color: #000000 !important;
    background: #00aeef !important;
}

.app-shell .btn.bg-cyan-700:focus-visible {
    outline: 2px solid #00aeef !important;
    outline-offset: 2px;
}

.app-shell .input.input-bordered {
    background: #ffffff !important;
    color: #1d2229 !important;
    border-color: #67686a !important;
}

.app-shell .input.input-bordered:focus-visible {
    border-color: #23408f !important;
    box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.24);
}

.app-shell .input::placeholder {
    color: #67686a;
}

.app-shell a.text-cyan-500 {
    color: #23408f !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.app-shell a.text-cyan-500:hover {
    color: #000000 !important;
}

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

.language-selector-trigger {
    font-weight: 700;
}

.language-selector-trigger:hover {
    color: #000000;
    border-color: #00aeef;
    background: #00aeef;
}

.language-selector-menu {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.language-selector-option.is-inactive:hover {
    color: #000000;
}

.app-shell .password-ux {
    border-color: #c8cfdd;
    background: #f5f8fd;
}

.app-shell .password-ux-meter-track {
    background: #cfd6e3;
}

.app-shell .password-ux-status.is-ok {
    color: #23408f;
}

.app-shell .password-ux-status.is-fail {
    color: #b42318;
}

.app-shell .password-ux-rules li.is-ok {
    color: #1a3277;
}

.app-shell .password-ux-rules li.is-fail {
    color: #b42318;
}

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

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