/* Zephiria is intentionally a light-only appearance layered over the client UI. */

.appearance-menu {
    grid-template-columns: repeat(3, 40px);
}

.zephiria-toggle {
    border-color: rgba(139, 117, 205, 0.6);
    color: #8f7ad2;
    background: radial-gradient(circle at 32% 24%, #fff8fd 0 18%, #eadfff 58%, #cabbed 100%);
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, 0.92),
        inset 0 -3px 5px rgba(118, 91, 174, 0.2),
        0 4px 9px rgba(83, 61, 132, 0.16);
}

.zephiria-toggle:hover,
.zephiria-toggle:focus-visible,
.zephiria-toggle[aria-pressed="true"] {
    border-color: #8f7ad2;
    color: #765ebd;
    transform: translateY(-1px) scale(1.04);
}

.zephiria-toggle[aria-pressed="true"] {
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.96),
        inset 0 -4px 7px rgba(118, 91, 174, 0.28),
        0 0 0 3px rgba(255, 222, 235, 0.8),
        0 6px 13px rgba(83, 61, 132, 0.2);
}

.zephiria-toggle svg {
    filter: drop-shadow(0 2px 1px rgba(78, 50, 127, 0.24));
}

.brand-zephiria {
    display: none;
}

html[data-appearance="zephiria"] {
    color-scheme: light;
    --primary: #d483a4;
    --primary-strong: #9b496c;
    --bg-body: #c6b5e7;
    --bg-image: url('/static/assets/bg/zephiria-bg.webp?v=20260903');
    --bg-panel: #fff3f3;
    --bg-modal: #fff4f2;
    --bg-modal-card: #fff6f4;
    --bg-soft: #fff7f5;
    --bg-field: #fff8f6;
    --inner-border: rgba(134, 69, 98, 0.18);
    --inner-border-strong: rgba(134, 69, 98, 0.36);
    --border: rgba(119, 56, 86, 0.2);
    --border-strong: rgba(119, 56, 86, 0.48);
    --text-main: #69263f;
    --text-muted: #8b5870;
    --danger: #ad3752;
    --danger-border: rgba(173, 55, 82, 0.42);
    --success: #408c6b;
    --btn-accent: #eba9c0;
    --btn-accent-text: #61243c;
    --shadow:
        0 22px 54px rgba(93, 61, 121, 0.22),
        0 7px 16px rgba(151, 91, 119, 0.13),
        inset 0 4px 5px rgba(255, 255, 255, 0.9),
        inset 0 -6px 12px rgba(181, 116, 143, 0.12);
    --user-menu-bg: #fff3f3;
    --user-menu-border: rgba(119, 56, 86, 0.2);
    --user-menu-button-border: rgba(119, 56, 86, 0.26);
    --user-menu-button-hover: #9b496c;
    --config-label: #8b5870;
    --zeph-fleece: url('/static/assets/bg/zephiria-fleece.webp?v=20260903-soft-fleece');
    --zeph-surface-shadow:
        0 9px 18px rgba(111, 72, 125, 0.14),
        inset 0 3px 4px rgba(255, 255, 255, 0.9),
        inset 0 -5px 9px rgba(183, 119, 145, 0.13);
    --zeph-control-shadow:
        0 6px 12px rgba(111, 72, 125, 0.13),
        inset 0 3px 3px rgba(255, 255, 255, 0.94),
        inset 0 -4px 7px rgba(183, 119, 145, 0.15);
}

html[data-appearance="zephiria"] body {
    color: var(--text-main);
    background-color: var(--bg-body) !important;
    background-image: var(--bg-image);
    background-position: center center;
    background-size: cover;
}

html[data-appearance="zephiria"] body::before {
    background-color: var(--bg-body);
    background-image: var(--bg-image);
    background-position: center center;
    background-size: cover;
}

html[data-appearance="zephiria"] ::selection {
    color: #61243c;
    background: #f0b7ca;
}

html[data-appearance="zephiria"] :focus-visible {
    outline: 3px solid rgba(126, 102, 194, 0.72) !important;
    outline-offset: 3px;
}

html[data-appearance="zephiria"] .brand-classic {
    display: none;
}

html[data-appearance="zephiria"] .brand-zephiria {
    display: block;
}

html[data-appearance="zephiria"] .top-brand {
    top: 18px;
    font-size: 0;
    text-shadow: none;
}

html[data-appearance="zephiria"] .brand-zephiria {
    width: clamp(540px, 47vw, 680px);
    height: auto;
    user-select: none;
    filter:
        drop-shadow(0 2px 1px rgba(255, 255, 255, 0.32))
        drop-shadow(0 7px 5px rgba(91, 47, 75, 0.2));
}

html[data-appearance="zephiria"] .panel,
html[data-appearance="zephiria"] .account-modal,
html[data-appearance="zephiria"] .login-info-modal,
html[data-appearance="zephiria"] .device-create-dialog,
html[data-appearance="zephiria"] .onboarding-wizard {
    border-color: rgba(255, 255, 255, 0.78);
    background-color: #fff1f2;
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(244, 195, 211, 0.18)),
        var(--zeph-fleece);
    background-size: 100% 100%, 420px 420px;
    background-blend-mode: soft-light, multiply;
    box-shadow: var(--shadow);
}

html[data-appearance="zephiria"] .panel,
html[data-appearance="zephiria"] .account-modal,
html[data-appearance="zephiria"] .onboarding-wizard {
    border-radius: 30px;
}

html[data-appearance="zephiria"] .user-menu,
html[data-appearance="zephiria"] .appearance-menu,
html[data-appearance="zephiria"] .login-appearance-panel {
    border: 1px solid rgba(255, 255, 255, 0.82);
    background-color: #fff1f2;
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(241, 190, 209, 0.18)),
        var(--zeph-fleece);
    background-size: 100% 100%, 260px 260px;
    background-blend-mode: soft-light, multiply;
    box-shadow:
        0 10px 25px rgba(91, 61, 118, 0.18),
        inset 0 3px 4px rgba(255, 255, 255, 0.92),
        inset 0 -4px 8px rgba(180, 117, 145, 0.14);
    backdrop-filter: blur(18px);
}

html[data-appearance="zephiria"] .user-name,
html[data-appearance="zephiria"] .user-name-btn {
    color: var(--text-main);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-appearance="zephiria"] .icon-btn:not(.zephiria-toggle) {
    border-color: rgba(119, 56, 86, 0.24);
    color: var(--text-main);
    background: rgba(255, 249, 247, 0.42);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.9),
        inset 0 -3px 5px rgba(177, 113, 141, 0.12);
}

html[data-appearance="zephiria"] .zephiria-toggle {
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(211, 190, 241, 0.22)),
        var(--zeph-fleece);
    background-size: 100% 100%, 180px 180px;
    background-blend-mode: soft-light, multiply;
}

html[data-appearance="zephiria"][data-theme="light"] :where(
    .actions-block,
    .account-link-card,
    .country-config,
    .dns-picker-selected,
    .dns-picker-list,
    .settings-menu-card,
    .profile-summary-card,
    .referral-stat-card,
    .referral-copy-panel,
    .session-card,
    .auth-method-row,
    .auth-key-code,
    .instruction-card,
    .instruction-alert,
    .instruction-endpoint,
    .proxy-mode-btn,
    .proxy-domains-open,
    .proxy-preset-btn,
    .proxy-domain-chip,
    .dns-library-btn,
    .dns-choice-popover,
    .dns-risk-copy,
    .tariff-state,
    .scheduled-plan,
    .tariff-option,
    .trial-option,
    .atlas-platform-btn,
    .atlas-download-content,
    .atlas-version-row,
    .support-empty,
    .support-ticket-card,
    .support-faq-placeholder,
    .support-helper,
    .support-faq-topic,
    .support-faq-tickets,
    .support-faq-detail,
    .support-attachment-draft,
    .support-attach-card,
    .support-thread,
    .how-it-works-list details,
    .login-lead,
    .login-info-modal-body p,
    .login-info-list li,
    .region-auth-main-message,
    .modal-message,
    .tariff-detail-list div,
    .tariff-help-body p,
    .onboarding-card,
    .onboarding-connection-card,
    .onboarding-current-plan,
    .onboarding-note,
    .onboarding-alert,
    .onboarding-preset,
    .onboarding-domains,
    .onboarding-payment-box,
    .onboarding-summary,
    .onboarding-summary-row
) {
    border-color: rgba(130, 66, 96, 0.2);
    background-color: #fff6f4;
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(244, 196, 211, 0.16)),
        var(--zeph-fleece);
    background-size: 100% 100%, 320px 320px;
    background-blend-mode: soft-light, multiply;
    box-shadow: var(--zeph-surface-shadow);
}

html[data-appearance="zephiria"][data-theme="light"] :where(
    .ghost-btn,
    .ghost-link,
    .money-btn,
    .plan-btn,
    .copy-btn,
    .payment-provider-btn,
    .login-info-btn,
    .login-info-close,
    .login-alt-btn,
    .login-method-btn,
    .login-help-link,
    .region-auth-close,
    .region-auth-create,
    .account-create-limit-close-btn,
    .account-create-limit-support-btn,
    .telegram-inline-btn,
    .country-btn,
    .device-option,
    .device-create-toggle,
    .device-settings-btn,
    .device-create-close,
    .device-create-cancel,
    .device-save-btn,
    .device-limit-btn,
    .device-custom-limit button,
    .atlas-download-btn,
    .atlas-setup-video,
    .atlas-version-download-icon,
    .instruction-profile-download,
    .session-terminate-btn,
    .support-action-btn,
    .support-submit-btn,
    .support-send-btn,
    .support-close-btn,
    .support-helper button,
    .support-helper a,
    .onboarding-close,
    .onboarding-actions button,
    .onboarding-dns-open,
    .onboarding-atlas-download
) {
    border-color: rgba(130, 66, 96, 0.22);
    color: var(--text-main);
    background-color: #fff6f4;
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(242, 187, 207, 0.18)),
        var(--zeph-fleece);
    background-size: 100% 100%, 250px 250px;
    background-blend-mode: soft-light, multiply;
    box-shadow: var(--zeph-control-shadow);
}

html[data-appearance="zephiria"][data-theme="light"] :where(
    .actions-block,
    .account-link-card,
    .dns-picker-selected,
    .settings-menu-card,
    .profile-summary-card,
    .payment-provider-btn,
    .proxy-mode-btn,
    .proxy-domains-open,
    .proxy-preset-btn,
    .dns-library-btn,
    .instruction-card,
    .tariff-option,
    .trial-option,
    .atlas-platform-btn,
    .country-btn,
    .device-option,
    .ghost-btn,
    .money-btn,
    .plan-btn
):hover:not(:disabled) {
    border-color: rgba(119, 56, 86, 0.5);
    transform: translateY(-2px);
    box-shadow:
        0 11px 21px rgba(102, 63, 119, 0.2),
        inset 0 4px 4px rgba(255, 255, 255, 0.96),
        inset 0 -5px 9px rgba(180, 111, 141, 0.18);
}

html[data-appearance="zephiria"][data-theme="light"] :where(
    .settings-menu-card.active,
    .payment-provider-btn.active,
    .proxy-mode-btn.current,
    .proxy-preset-btn.active,
    .proxy-neural-card.active .proxy-neural-toggle,
    .dns-library-btn.active,
    .atlas-platform-btn.active,
    .onboarding-card.selected,
    .onboarding-preset.selected
) {
    border-color: rgba(142, 66, 101, 0.56);
    color: var(--text-main);
    background-color: #f7cad8;
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(217, 126, 161, 0.24)),
        var(--zeph-fleece);
    background-size: 100% 100%, 270px 270px;
    background-blend-mode: soft-light, multiply;
    box-shadow:
        0 8px 18px rgba(111, 63, 108, 0.18),
        inset 0 3px 4px rgba(255, 255, 255, 0.9),
        inset 0 -5px 8px rgba(155, 73, 108, 0.18);
}

html[data-appearance="zephiria"][data-theme="light"] :where(
    input,
    select,
    textarea,
    .config-line,
    .created-account-key-panel,
    .dns-logs-table,
    .dns-logs-empty,
    .support-message-field textarea
) {
    border-color: rgba(130, 66, 96, 0.24);
    color: var(--text-main);
    background: rgba(255, 250, 248, 0.9);
    box-shadow:
        inset 0 3px 7px rgba(155, 91, 119, 0.1),
        0 2px 0 rgba(255, 255, 255, 0.72);
}

html[data-appearance="zephiria"][data-theme="light"] :where(input, textarea)::placeholder {
    color: rgba(105, 38, 63, 0.54);
}

html[data-appearance="zephiria"] .modal-primary,
html[data-appearance="zephiria"] .atlas-download-btn,
html[data-appearance="zephiria"] .login-main-btn,
html[data-appearance="zephiria"] .account-create-trigger,
html[data-appearance="zephiria"] .support-submit-btn,
html[data-appearance="zephiria"] .support-send-btn,
html[data-appearance="zephiria"] .onboarding-actions-end button:last-child {
    border-color: rgba(132, 57, 90, 0.46) !important;
    color: #64233e !important;
    background-color: #efb1c6 !important;
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(203, 100, 140, 0.2)),
        var(--zeph-fleece) !important;
    background-size: 100% 100%, 230px 230px !important;
    background-blend-mode: soft-light, multiply !important;
    box-shadow:
        0 8px 16px rgba(113, 61, 106, 0.2),
        inset 0 3px 4px rgba(255, 255, 255, 0.9),
        inset 0 -5px 8px rgba(151, 62, 99, 0.2);
}

html[data-appearance="zephiria"] .tariff-option {
    box-shadow:
        inset 0 5px 0 var(--tariff-accent, var(--primary)),
        var(--zeph-surface-shadow);
}

html[data-appearance="zephiria"] .status-pill,
html[data-appearance="zephiria"] .country-latency,
html[data-appearance="zephiria"] .country-status-badge,
html[data-appearance="zephiria"] .country-ipv6-badge,
html[data-appearance="zephiria"] .support-ticket-status,
html[data-appearance="zephiria"] .session-current-badge {
    border-color: rgba(130, 66, 96, 0.22);
    color: var(--text-main);
    background: rgba(255, 246, 244, 0.82);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.86);
}

html[data-appearance="zephiria"] .status-pill.active,
html[data-appearance="zephiria"] .session-current-badge,
html[data-appearance="zephiria"] .support-ticket-status.answered {
    color: #285c49;
    background: #d9f0e5;
}

html[data-appearance="zephiria"] .account-modal-backdrop,
html[data-appearance="zephiria"] .onboarding-backdrop,
html[data-appearance="zephiria"] .login-info-backdrop,
html[data-appearance="zephiria"] .login-methods-backdrop,
html[data-appearance="zephiria"] .device-create-backdrop {
    background: rgba(77, 48, 96, 0.48);
    backdrop-filter: blur(12px) saturate(0.9);
}

html[data-appearance="zephiria"] .account-modal-backdrop:has(.tariff-confirm-modal:not(.hidden))::before,
html[data-appearance="zephiria"] .account-modal-backdrop:has(.tariff-detail-modal:not(.hidden))::before,
html[data-appearance="zephiria"] .account-modal-backdrop:has(.tariff-help-modal:not(.hidden))::before,
html[data-appearance="zephiria"] .account-modal-backdrop:has(.referral-prompt-modal:not(.hidden))::before {
    background: rgba(76, 44, 91, 0.5);
}

html[data-appearance="zephiria"] .admin-message,
html[data-appearance="zephiria"] .page-error,
html[data-appearance="zephiria"] .support-reply-notice,
html[data-appearance="zephiria"] .auth-notice {
    border-color: rgba(255, 255, 255, 0.72);
    color: var(--text-main);
    background-color: #fff1f2;
    background-image: var(--zeph-fleece);
    background-size: 300px 300px;
    background-blend-mode: multiply;
    box-shadow: var(--zeph-surface-shadow);
}

html[data-appearance="zephiria"] .onboarding-wizard {
    --onboarding-accent: #a65075;
    --onboarding-bg: #fff1f2;
    --onboarding-border: rgba(130, 66, 96, 0.22);
    --onboarding-disabled-bg: #eadfe2;
    --onboarding-disabled-fg: #8c7680;
    --onboarding-fg: #69263f;
    --onboarding-strong: #69263f;
    --onboarding-surface: #fff6f4;
    --onboarding-track: #ecd4dd;
}

html[data-appearance="zephiria"] .onboarding-progress span.active {
    background: linear-gradient(90deg, #b985dc, #e99fba);
}

html[data-appearance="zephiria"] .dns-log-head {
    color: var(--text-main);
    background: rgba(247, 224, 231, 0.96);
}

html[data-appearance="zephiria"] .support-message.user {
    background: rgba(245, 202, 217, 0.55);
}

html[data-appearance="zephiria"] .support-message.admin {
    background: rgba(220, 207, 244, 0.56);
}

html[data-appearance="zephiria"] .country-lock-tooltip,
html[data-appearance="zephiria"] .country-ipv6-tooltip,
html[data-appearance="zephiria"] .copy-tooltip {
    border-color: rgba(255, 255, 255, 0.72);
    color: #fff9fb;
    background: rgba(91, 39, 65, 0.94);
    box-shadow: 0 8px 22px rgba(76, 44, 91, 0.24);
}

html[data-appearance="zephiria"] .danger,
html[data-appearance="zephiria"] .auth-danger-zone,
html[data-appearance="zephiria"] .dns-logs-warning,
html[data-appearance="zephiria"] .config-rotation-warning {
    border-color: var(--danger-border);
    background-color: rgba(255, 230, 234, 0.9);
}

html[data-appearance="zephiria"] * {
    scrollbar-color: rgba(156, 86, 118, 0.62) rgba(255, 245, 245, 0.42);
}

@media (max-width: 768px) {
    .appearance-menu {
        grid-template-columns: repeat(3, 36px);
    }

    html[data-appearance="zephiria"] .account-card:has(.appearance-menu:not(.hidden)) {
        padding-top: 140px !important;
    }

    html[data-appearance="zephiria"] body {
        background-color: var(--bg-body) !important;
        background-image: none !important;
    }

    html[data-appearance="zephiria"] body::before {
        background-color: var(--bg-body);
        background-image: var(--bg-image);
        background-position: center center;
        background-size: cover;
    }

    html[data-appearance="zephiria"] .top-brand {
        top: 10px;
    }

    html[data-appearance="zephiria"] .brand-zephiria {
        width: min(78vw, 340px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-appearance="zephiria"] *,
    html[data-appearance="zephiria"] *::before,
    html[data-appearance="zephiria"] *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}