@import 'tailwindcss';
@import './buttons.css';

@custom-variant dark (&:where(.dark, .dark *));

@source '../views/platform/**/*.blade.php';
@source '../views/layouts/platform.blade.php';
@source '../views/components/platform/**/*.blade.php';
@source '../views/components/ui/**/*.blade.php';

:root {
    --page-bg: #f6f8fc;
    --surface-bg: #ffffff;
    --surface-border: #d6dce8;
    --surface-border-hover: #b9c3d6;
    --surface-shadow: 0 10px 28px rgba(17, 24, 39, 0.055);
    --surface-shadow-hover: 0 14px 36px rgba(17, 24, 39, 0.09);

    --text-main: #111827;
    --text-body: #374151;
    --text-muted: #6b7280;

    --input-bg: #ffffff;
    --input-border: #d6dce8;

    --sidebar-active-bg: #e8eeff;
    --sidebar-active-icon-bg: #dde6ff;
    --sidebar-active-icon-color: #4f46e5;
    --sidebar-hover-bg: #eef2ff;
    --sidebar-text: #4b5563;

    --accent: #5b5cff;
    --accent-soft: #eef0ff;

    --sidebar-width: 290px;

    --search-shadow: 0 6px 18px rgba(17, 24, 39, 0.045);
    --dropdown-apps-shadow: 0 18px 50px rgba(17, 24, 39, 0.13);

    --platform-bg: var(--page-bg);
    --platform-text: var(--text-main);
    --platform-text-muted: var(--text-muted);
    --platform-nav-active: var(--sidebar-active-bg);
    --platform-nav-active-text: var(--text-main);
    --platform-icon-hover: var(--sidebar-hover-bg);
    --platform-nav-hover: var(--sidebar-hover-bg);
    --platform-dropdown-bg: var(--surface-bg);
    --platform-dropdown-border: var(--surface-border);
    --platform-search-bg: var(--input-bg);
    --platform-search-focus: var(--input-bg);
    --platform-shadow: var(--surface-shadow);
    --platform-overlay: rgba(15, 23, 42, 0.35);
    --platform-footer: #6b7280;

    --profile-panel-bg: #ffffff;
    --profile-panel-border: #e5e7eb;
    --profile-row-hover: #f3f4f6;
    --profile-row-icon: #5f6368;
}

.dark {
    --page-bg: #0f1115;
    --surface-bg: #1a1d21;
    --surface-border: rgba(255, 255, 255, 0.1);
    --surface-border-hover: rgba(139, 124, 255, 0.4);
    --surface-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --surface-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.4);
    --text-main: #f8fafc;
    --text-body: #d1d5db;
    --text-muted: #a1a1aa;
    --input-bg: #1a1d21;
    --input-border: rgba(255, 255, 255, 0.12);

    --sidebar-active-bg: #2a3140;
    --sidebar-active-icon-bg: transparent;
    --sidebar-active-icon-color: inherit;
    --sidebar-hover-bg: #22262b;
    --sidebar-text: #d1d5db;

    --accent: #a8c7fa;
    --accent-soft: #2a3140;

    --search-shadow: none;
    --dropdown-apps-shadow: var(--surface-shadow);

    --platform-bg: var(--page-bg);
    --platform-text: var(--text-main);
    --platform-text-muted: var(--text-muted);
    --platform-nav-active: #2a3140;
    --platform-nav-active-text: #a8c7fa;
    --platform-icon-hover: #25282d;
    --platform-nav-hover: #22262b;
    --platform-dropdown-bg: var(--surface-bg);
    --platform-dropdown-border: var(--surface-border);
    --platform-search-bg: var(--input-bg);
    --platform-search-focus: var(--input-bg);
    --platform-shadow: var(--surface-shadow);
    --platform-overlay: rgba(0, 0, 0, 0.55);
    --platform-footer: #a1a1aa;

    --profile-panel-bg: #1e2124;
    --profile-panel-border: rgba(255, 255, 255, 0.08);
    --profile-row-hover: rgba(255, 255, 255, 0.05);
    --profile-row-icon: #bdc1c6;
}

@layer base {
    body.platform-body {
        background: var(--page-bg);
        color: var(--text-main);
        transition: background-color 0.3s ease, color 0.3s ease;
    }
}

@layer components {
    .platform-shell {
        background: var(--page-bg);
        color: var(--text-main);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .platform-sidebar {
        width: var(--sidebar-width);
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
        background: var(--page-bg);
    }

    .platform-sidebar-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-right: 0.25rem;
    }

    .platform-sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .platform-account-brand {
        display: block;
        margin-top: 15px;
        margin-bottom: 20px;
        padding: 1.375rem 0.25rem 2rem;
        text-decoration: none;
        color: inherit;
    }

    .platform-account-brand__title {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.3rem;
        font-family: 'Roboto', 'Inter', ui-sans-serif, system-ui, sans-serif;
        line-height: 1.1;
    }

    .platform-account-brand__lead {
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: -0.03em;
        color: var(--text-main);
    }

    .platform-account-brand__tail {
        font-size: 1.5rem;
        font-weight: 400;
        letter-spacing: -0.02em;
        color: var(--text-muted);
    }

    .platform-nav-item {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        max-width: 100%;
        padding: 0.625rem 0.75rem;
        border-radius: 9999px;
        color: var(--sidebar-text);
        text-decoration: none;
        transform-origin: left center;
        will-change: transform;
        transition:
            background-color 0.2s ease-out,
            color 0.2s ease-out,
            transform 0.2s ease-out;
    }

    .platform-nav-item:hover {
        background: var(--item-bg);
        color: var(--text-main);
        transform: scale(1.03);
    }

    .platform-nav-item--active {
        background: var(--item-bg);
        color: var(--text-main);
    }

    .platform-nav-item--active:hover {
        background: var(--item-bg);
        color: var(--text-main);
    }

    .platform-nav-label {
        white-space: nowrap;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25rem;
    }

    .platform-nav-icon {
        display: flex;
        height: 2.5rem;
        width: 2.5rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background: var(--item-bg);
        border: 1px solid transparent;
        color: var(--item-color);
        transition:
            background-color 0.2s ease-out,
            color 0.2s ease-out;
    }

    .platform-nav-item:hover .platform-nav-icon {
        background: var(--item-bg);
        color: var(--item-color);
    }

    .platform-nav-item--active .platform-nav-icon {
        background: var(--item-color);
        border-color: transparent;
        color: #ffffff;
    }

    .platform-nav-item--active:hover .platform-nav-icon {
        background: var(--item-color);
        color: #ffffff;
    }

    .dark .platform-nav-icon {
        background: var(--item-bg);
        color: var(--item-color);
    }

    .dark .platform-nav-item:hover .platform-nav-icon {
        background: var(--item-bg);
        color: var(--item-color);
    }

    .dark .platform-nav-item--active .platform-nav-icon {
        background: var(--item-color);
        color: #ffffff;
    }

    .dark .platform-nav-item--active:hover .platform-nav-icon {
        background: var(--item-color);
        color: #ffffff;
    }

    .platform-icon-btn {
        display: flex;
        height: 2.75rem;
        width: 2.75rem;
        min-height: 2.75rem;
        min-width: 2.75rem;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        color: var(--text-muted);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .platform-icon-btn:hover {
        background: var(--sidebar-hover-bg);
        color: var(--text-main);
    }

    .platform-icon-btn--active {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .dark .platform-icon-btn--active {
        background: var(--platform-nav-active);
        color: var(--platform-nav-active-text);
    }

    .platform-search {
        width: 100%;
        border-radius: 9999px;
        border: 1px solid var(--input-border);
        background: var(--input-bg);
        padding: 0.75rem 1rem 0.75rem 2.75rem;
        font-size: 0.875rem;
        color: var(--text-main);
        outline: none;
        box-shadow: var(--search-shadow);
        transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .platform-search::placeholder {
        color: var(--text-muted);
    }

    .platform-search:focus {
        background: var(--input-bg);
        border-color: var(--surface-border-hover);
        box-shadow: var(--surface-shadow);
    }

    .platform-dropdown {
        background: var(--surface-bg);
        border: 1px solid var(--surface-border);
        box-shadow: var(--platform-shadow);
        color: var(--text-main);
        transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .platform-dropdown--apps {
        box-shadow: var(--dropdown-apps-shadow);
    }

    .platform-card {
        background: var(--surface-bg);
        border: 1px solid var(--surface-border);
        border-radius: 22px;
        color: var(--text-main);
        box-shadow: var(--surface-shadow);
        transition:
            background-color 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease,
            transform 0.3s ease,
            color 0.3s ease;
    }

    .platform-card--interactive:hover {
        border-color: var(--surface-border-hover);
        box-shadow: var(--surface-shadow-hover);
        transform: translateY(-2px);
    }

    .platform-card--dashed {
        border-style: dashed;
    }

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

    .platform-text-body {
        color: var(--text-body);
    }

    .platform-badge {
        border-radius: 9999px;
        padding: 0.25rem 0.625rem;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: var(--accent-soft);
        color: var(--accent);
    }

    .dark .platform-badge {
        background: var(--platform-nav-active);
        color: var(--platform-nav-active-text);
    }

    .platform-app-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--icon-color) 30%, white) 0%,
            color-mix(in srgb, var(--icon-color) 18%, white) 100%
        );
        border: 1px solid color-mix(in srgb, var(--icon-color) 34%, #d6dce8);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--icon-color) 12%, transparent);
    }

    .dark .platform-app-icon {
        background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--icon-color) 28%, var(--page-bg)) 0%,
            color-mix(in srgb, var(--icon-color) 16%, var(--page-bg)) 100%
        );
        border-color: color-mix(in srgb, var(--icon-color) 26%, transparent);
        box-shadow: none;
    }

    .platform-btn-primary,
    .platform-btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .platform-link-accent {
        color: var(--accent);
        transition: opacity 0.3s ease;
    }

    .dark .platform-link-accent {
        color: var(--platform-nav-active-text);
    }

    .platform-link-accent:hover {
        opacity: 0.85;
    }

    .platform-divider > * + * {
        border-top: 1px solid var(--surface-border);
    }

    .platform-app-grid-item {
        display: flex;
        min-height: 5.625rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 1rem;
        padding: 0.75rem 0.5rem;
        text-align: center;
        color: var(--text-main);
        transition: background-color 0.3s ease;
    }

    .platform-app-grid-item:hover {
        background: var(--sidebar-hover-bg);
    }

    .platform-app-grid-item--static {
        cursor: default;
    }

    .platform-app-grid-item--static:hover {
        background: transparent;
    }

    .platform-access-badge {
        display: inline-flex;
        width: 2.625rem;
        height: 2.625rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
        border: 1px solid var(--access-badge-border);
        background: var(--access-badge-bg);
        color: var(--access-badge-fg);
        cursor: default;
        user-select: none;
        --access-badge-bg: color-mix(in srgb, #64748b 10%, transparent);
        --access-badge-border: color-mix(in srgb, #64748b 22%, transparent);
        --access-badge-fg: #64748b;
    }

    .platform-access-badge svg {
        display: block;
        width: 24px;
        height: 24px;
        max-width: 24px;
        max-height: 24px;
        flex-shrink: 0;
    }

    .platform-access-badge--closed {
        --access-badge-bg: color-mix(in srgb, #64748b 12%, transparent);
        --access-badge-border: color-mix(in srgb, #64748b 24%, transparent);
        --access-badge-fg: #64748b;
    }

    .platform-access-badge--mobile {
        --access-badge-bg: color-mix(in srgb, #0f766e 12%, transparent);
        --access-badge-border: color-mix(in srgb, #0f766e 24%, transparent);
        --access-badge-fg: #0f766e;
    }

    .platform-access-badge--web {
        --access-badge-bg: color-mix(in srgb, #4f46e5 12%, transparent);
        --access-badge-border: color-mix(in srgb, #4f46e5 24%, transparent);
        --access-badge-fg: #4f46e5;
    }

    .platform-access-badge--web-mobile {
        --access-badge-bg: color-mix(in srgb, #0ea5e9 12%, transparent);
        --access-badge-border: color-mix(in srgb, #0ea5e9 24%, transparent);
        --access-badge-fg: #0284c7;
    }

    .dark .platform-access-badge--closed {
        --access-badge-bg: color-mix(in srgb, #94a3b8 14%, transparent);
        --access-badge-border: color-mix(in srgb, #94a3b8 28%, transparent);
        --access-badge-fg: #94a3b8;
    }

    .dark .platform-access-badge--mobile {
        --access-badge-bg: color-mix(in srgb, #2dd4bf 14%, transparent);
        --access-badge-border: color-mix(in srgb, #2dd4bf 28%, transparent);
        --access-badge-fg: #5eead4;
    }

    .dark .platform-access-badge--web {
        --access-badge-bg: color-mix(in srgb, #818cf8 14%, transparent);
        --access-badge-border: color-mix(in srgb, #818cf8 28%, transparent);
        --access-badge-fg: #a5b4fc;
    }

    .dark .platform-access-badge--web-mobile {
        --access-badge-bg: color-mix(in srgb, #38bdf8 14%, transparent);
        --access-badge-border: color-mix(in srgb, #38bdf8 28%, transparent);
        --access-badge-fg: #7dd3fc;
    }

    .platform-app-card-footer {
        margin-top: auto;
        padding-top: 1.25rem;
    }

    .platform-btn-primary--card {
        display: inline-flex;
        height: 2rem;
        flex-shrink: 0;
        align-items: center;
        gap: 0.375rem;
        padding: 0 0.875rem;
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1;
        box-shadow: 0 1px 4px color-mix(in srgb, var(--btn-primary-bg) 22%, transparent);
    }

    .platform-btn-primary--card > svg {
        display: block;
        width: 16px;
        height: 16px;
        max-width: 16px;
        max-height: 16px;
        flex-shrink: 0;
    }

    .platform-btn-primary--card:hover:not(:disabled):not([aria-disabled='true']) {
        box-shadow: 0 2px 8px color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
        transform: none;
    }

    .platform-btn-primary--card:active:not(:disabled):not([aria-disabled='true']) {
        transform: scale(0.98);
    }

    .platform-profile-menu-item {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 0.75rem;
        border-radius: 0.75rem;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
        color: var(--text-main);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .platform-profile-menu-item:hover {
        background: var(--sidebar-hover-bg);
    }

    .platform-profile-menu-item--danger {
        color: #ef4444;
    }

    .dark .platform-profile-menu-item--danger {
        color: #f87171;
    }

    .platform-avatar {
        display: flex;
        height: 2.5rem;
        width: 2.5rem;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 9999px;
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        font-size: 0.875rem;
        font-weight: 600;
        color: #ffffff;
    }

    .platform-avatar--image {
        background: var(--surface-bg);
    }

    .platform-avatar__image {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .profile-panel {
        width: min(22rem, calc(100vw - 2rem));
        overflow: hidden;
        border-radius: 28px;
        border: 1px solid var(--surface-border);
        background: var(--surface-bg);
        box-shadow: var(--dropdown-apps-shadow);
        color: var(--text-main);
    }

    .profile-panel__header {
        position: relative;
        padding: 0.75rem 3.25rem 0.5rem 1rem;
        text-align: center;
    }

    .profile-panel__email {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.8125rem;
        color: var(--text-muted);
    }

    .profile-panel__close {
        position: absolute;
        top: 0.5rem;
        right: 0.625rem;
        display: flex;
        height: 2.25rem;
        width: 2.25rem;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 9999px;
        background: color-mix(in srgb, var(--text-muted) 14%, transparent);
        padding: 0;
        color: var(--text-muted);
        cursor: pointer;
        transition:
            background-color 150ms ease,
            color 150ms ease,
            transform 150ms ease;
    }

    .profile-panel__close:hover {
        background: color-mix(in srgb, var(--text-muted) 22%, transparent);
        color: var(--text-main);
        transform: scale(1.04);
    }

    .profile-panel__close-icon {
        height: 1.125rem;
        width: 1.125rem;
        stroke-width: 2.75;
    }

    .profile-panel__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem 1.25rem 1.25rem;
        text-align: center;
    }

    .profile-panel__avatar-link {
        position: relative;
        display: inline-flex;
        margin-bottom: 1rem;
        text-decoration: none;
    }

    .profile-panel__avatar {
        display: flex;
        height: 5.5rem;
        width: 5.5rem;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 9999px;
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        font-size: 2rem;
        font-weight: 600;
        color: #ffffff;
    }

    .profile-panel__avatar--image {
        background: var(--surface-bg);
    }

    .profile-panel__avatar-image {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .profile-panel__avatar-edit {
        position: absolute;
        right: 0.125rem;
        bottom: 0.125rem;
        display: flex;
        height: 2rem;
        width: 2rem;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        border: 2px solid var(--surface-bg);
        background: var(--profile-panel-bg);
        color: var(--text-main);
        box-shadow: 0 2px 8px color-mix(in srgb, #000 18%, transparent);
    }

    .profile-panel__greeting {
        margin-bottom: 1.25rem;
        font-size: 1.375rem;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: -0.01em;
        color: var(--text-main);
    }

    .profile-panel__manage {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        border: 1px solid var(--surface-border);
        padding: 0.6875rem 1.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--accent);
        text-decoration: none;
        transition:
            background-color 150ms ease,
            border-color 150ms ease,
            color 150ms ease;
    }

    .dark .profile-panel__manage {
        color: #a8c7fa;
    }

    .profile-panel__manage:hover {
        border-color: var(--surface-border-hover);
        background: color-mix(in srgb, var(--accent) 8%, transparent);
    }

    .profile-panel__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        border-top: 1px solid var(--surface-border);
        padding: 0.75rem 1rem;
    }

    .profile-panel__languages {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .profile-panel__lang {
        border: 1px solid transparent;
        border-radius: 9999px;
        background: transparent;
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-muted);
        cursor: pointer;
        transition:
            background-color 150ms ease,
            border-color 150ms ease,
            color 150ms ease;
    }

    .profile-panel__lang:hover {
        color: var(--text-main);
        background: var(--profile-row-hover);
    }

    .profile-panel__lang--active {
        border-color: var(--surface-border);
        color: var(--text-main);
        background: var(--profile-row-hover);
    }

    .profile-panel__logout {
        border: none;
        background: transparent;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: #ef4444;
        cursor: pointer;
        transition: opacity 150ms ease;
    }

    .dark .profile-panel__logout {
        color: #f87171;
    }

    .profile-panel__logout:hover {
        opacity: 0.85;
    }

    .platform-footer-link {
        font-size: 0.75rem;
        color: var(--text-muted);
        text-decoration: none;
    }

    .platform-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        padding: 0.375rem 0.875rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--text-muted);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .platform-chip:hover {
        background: var(--sidebar-hover-bg);
        color: var(--text-main);
    }

    .platform-chip--active {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .dark .platform-chip--active {
        background: var(--platform-nav-active);
        color: var(--platform-nav-active-text);
    }

    .profile-settings {
        width: 100%;
        max-width: 42rem;
        margin: 0 auto;
        padding-bottom: 2rem;
    }

    .profile-settings__title {
        margin-bottom: 1.75rem;
        font-size: 1.75rem;
        font-weight: 400;
        letter-spacing: -0.02em;
        color: var(--text-main);
    }

    .profile-settings__panel {
        overflow: hidden;
        border: 1px solid var(--profile-panel-border);
        border-radius: 28px;
        background: var(--profile-panel-bg);
    }

    .profile-settings-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        color: inherit;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .profile-settings-row--bordered {
        border-bottom: 1px solid var(--profile-panel-border);
    }

    .profile-settings-row:hover {
        background: var(--profile-row-hover);
    }

    .profile-settings-row__icon {
        display: flex;
        height: 2.5rem;
        width: 2.5rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        color: var(--profile-row-icon);
    }

    .profile-settings-row__content {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        gap: 0.125rem;
    }

    .profile-settings-row__label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-main);
    }

    .profile-settings-row__value {
        font-size: 0.8125rem;
        line-height: 1.4;
        color: var(--text-muted);
    }

    .profile-settings-row__avatar {
        display: flex;
        height: 3rem;
        width: 3rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        font-size: 1.125rem;
        font-weight: 600;
        color: #ffffff;
    }

    .profile-settings-row__chevron {
        flex-shrink: 0;
        color: var(--text-muted);
    }

    .profile-settings-row__trailing {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 0.5rem;
    }

    .profile-settings-row__status-icon {
        height: 1.25rem;
        width: 1.25rem;
    }

    .profile-settings-row__email-alert {
        display: flex;
        border: 0;
        padding: 0;
        background: transparent;
        color: #ef4444;
        cursor: pointer;
        transition: transform 0.15s ease;
    }

    .profile-settings-row__email-alert:hover {
        transform: scale(1.05);
    }

    .profile-settings-row__verified {
        display: flex;
        color: #22c55e;
    }

    .profile-settings__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.75rem;
    }

    .profile-settings__action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        border: 1px solid var(--profile-panel-border);
        background: var(--profile-panel-bg);
        padding: 0.625rem 1.125rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--accent);
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .profile-settings__action-btn:hover {
        background: var(--profile-row-hover);
    }

    .profile-settings-row__avatar-img {
        height: 3rem;
        width: 3rem;
        flex-shrink: 0;
        border-radius: 9999px;
        object-fit: cover;
    }

    .account-edit {
        width: 100%;
        max-width: 42rem;
        margin: 0 auto;
        padding-bottom: 2rem;
    }

    .account-edit__header {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .account-edit__back {
        display: flex;
        height: 2.5rem;
        width: 2.5rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        color: var(--text-main);
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .account-edit__back:hover {
        background: var(--profile-row-hover);
    }

    .account-edit__title {
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--text-main);
    }

    .account-edit__description {
        margin-top: 0.375rem;
        font-size: 0.875rem;
        line-height: 1.5;
        color: var(--text-muted);
    }

    .account-edit__alert {
        margin-bottom: 1rem;
        border-radius: 16px;
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .account-edit__alert--error {
        border: 1px solid color-mix(in srgb, #ef4444 40%, var(--surface-border));
        background: color-mix(in srgb, #ef4444 8%, var(--surface-bg));
        color: var(--text-main);
    }

    .account-edit__alert--success {
        border: 1px solid color-mix(in srgb, #22c55e 35%, var(--surface-border));
        background: color-mix(in srgb, #22c55e 8%, var(--surface-bg));
        color: var(--text-main);
    }

    .account-form-card {
        margin-bottom: 1.25rem;
        border: 1px solid var(--profile-panel-border);
        border-radius: 28px;
        background: var(--profile-panel-bg);
        padding: 1.25rem;
    }

    .account-form-grid {
        display: grid;
        gap: 1rem;
    }

    .location-select-group {
        display: contents;
    }

    .location-select {
        position: relative;
    }

    .location-select__control {
        display: flex;
        width: 100%;
        min-height: 2.75rem;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid var(--surface-border);
        border-radius: 14px;
        background: var(--surface-bg);
        padding: 0.625rem 0.875rem;
        text-align: left;
        color: var(--text-main);
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .location-select__control:hover:not(:disabled) {
        border-color: var(--surface-border-hover);
    }

    .location-select__control:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .location-select__control:focus-visible {
        outline: none;
        border-color: color-mix(in srgb, var(--accent) 55%, var(--surface-border));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .location-select__value {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    .location-select__value--placeholder {
        color: var(--text-muted);
    }

    .location-select__chevron {
        height: 1rem;
        width: 1rem;
        flex-shrink: 0;
        color: var(--text-muted);
    }

    .location-select__spinner {
        height: 1rem;
        width: 1rem;
        flex-shrink: 0;
        border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
        border-top-color: var(--accent);
        border-radius: 9999px;
        animation: location-select-spin 0.65s linear infinite;
    }

    @keyframes location-select-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .location-select__menu {
        position: absolute;
        z-index: 40;
        top: calc(100% + 0.375rem);
        left: 0;
        right: 0;
        overflow: hidden;
        border: 1px solid var(--surface-border);
        border-radius: 14px;
        background: var(--profile-panel-bg);
        box-shadow: var(--dropdown-apps-shadow);
    }

    .location-select__overlay {
        display: none;
    }

    .location-select__search {
        width: 100%;
        border: none;
        border-bottom: 1px solid var(--surface-border);
        background: transparent;
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
        color: var(--text-main);
        outline: none;
    }

    .location-select__list {
        max-height: 13rem;
        overflow-y: auto;
        padding: 0.375rem;
    }

    .location-select__option {
        display: block;
        width: 100%;
        min-height: 2.75rem;
        border: none;
        border-radius: 10px;
        background: transparent;
        padding: 0.625rem 0.75rem;
        text-align: left;
        font-size: 0.8125rem;
        color: var(--text-main);
        cursor: pointer;
        overflow-wrap: anywhere;
        transition: background-color 150ms ease;
    }

    .location-select__option:hover {
        background: var(--profile-row-hover);
    }

    .location-select__empty {
        padding: 0.625rem;
        font-size: 0.8125rem;
        color: var(--text-muted);
        text-align: center;
    }

    .account-form-grid--phone {
        grid-template-columns: 7rem 1fr;
    }

    .account-phone-row {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        column-gap: 0.75rem;
        row-gap: 0.375rem;
        align-items: center;
    }

    .account-phone-row__label {
        display: block;
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1.35;
        color: var(--text-main);
    }

    .account-phone-row__label--country {
        grid-column: 1;
        grid-row: 1;
    }

    .account-phone-row__label--phone {
        grid-column: 2;
        grid-row: 1;
    }

    .account-phone-row__input--country {
        grid-column: 1;
        grid-row: 2;
    }

    .account-phone-row__input--phone {
        grid-column: 2;
        grid-row: 2;
    }

    .account-phone-row__error--country {
        grid-column: 1;
        grid-row: 3;
    }

    .account-phone-row__error--phone {
        grid-column: 2;
        grid-row: 3;
    }

    @media (max-width: 640px) {
        .account-phone-row {
            grid-template-columns: 1fr;
        }

        .account-phone-row__label--country,
        .account-phone-row__label--phone,
        .account-phone-row__input--country,
        .account-phone-row__input--phone,
        .account-phone-row__error--country,
        .account-phone-row__error--phone {
            grid-column: 1;
        }

        .account-phone-row__label--country {
            grid-row: 1;
        }

        .account-phone-row__input--country {
            grid-row: 2;
        }

        .account-phone-row__error--country {
            grid-row: 3;
        }

        .account-phone-row__label--phone {
            grid-row: 4;
        }

        .account-phone-row__input--phone {
            grid-row: 5;
        }

        .account-phone-row__error--phone {
            grid-row: 6;
        }
    }

    .account-form-grid--birthday {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (max-width: 640px) {
        .account-form-grid--birthday {
            grid-template-columns: 1fr;
        }
    }

    .account-field__label {
        display: block;
        margin-bottom: 0.375rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--text-main);
    }

    .account-field__input {
        width: 100%;
        min-height: 2.75rem;
        border: 1px solid var(--surface-border);
        border-radius: 14px;
        background: var(--surface-bg);
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
        color: var(--text-main);
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .account-field__input:focus {
        border-color: color-mix(in srgb, var(--accent) 55%, var(--surface-border));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .account-field__static {
        font-size: 0.875rem;
        color: var(--text-muted);
    }

    .account-field__static--emphasis {
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--text-main);
    }

    .email-verify-callout {
        display: flex;
        gap: 0.875rem;
        margin-top: 1rem;
        padding: 1rem;
        border: 1px solid var(--profile-panel-border);
        border-radius: 16px;
        background: color-mix(in srgb, var(--accent) 6%, var(--profile-panel-bg));
    }

    .email-verify-callout__icon {
        height: 1.25rem;
        width: 1.25rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
        color: var(--accent);
    }

    .email-verify-callout__text {
        margin: 0;
        font-size: 0.8125rem;
        line-height: 1.55;
        color: var(--text-muted);
    }

    .account-field__help {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        line-height: 1.5;
        color: var(--text-muted);
    }

    .account-field__error {
        margin-top: 0.25rem;
        font-size: 0.75rem;
        color: #ef4444;
    }

    .account-field + .account-field {
        margin-top: 1rem;
    }

    .account-radio-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .account-radio {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.875rem;
        color: var(--text-main);
        cursor: pointer;
    }

    .account-form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-top: 0.5rem;
    }

    .account-photo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
    }

    .account-photo__preview {
        display: flex;
        height: 6rem;
        width: 6rem;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 9999px;
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    }

    .account-photo__image {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .account-photo__initial {
        font-size: 1.75rem;
        font-weight: 600;
        color: #fff;
    }

    .account-password-rules {
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .account-address-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .account-address-card__title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-main);
    }

    .account-address-card__delete {
        display: flex;
        height: 2rem;
        width: 2rem;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 9999px;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
    }

    .account-add-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px dashed var(--surface-border);
        border-radius: 20px;
        background: transparent;
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--accent);
        cursor: pointer;
    }

    .account-toast {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        z-index: 60;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        border-radius: 16px;
        border: 1px solid var(--surface-border);
        background: var(--profile-panel-bg);
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        color: var(--text-main);
        box-shadow: 0 10px 30px color-mix(in srgb, #000 12%, transparent);
    }

    .email-verification-banner {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.875rem;
        border-radius: 16px;
        border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--surface-border));
        background: color-mix(in srgb, #f59e0b 12%, var(--surface-bg));
        padding: 0.875rem 1rem;
    }

    .dark .email-verification-banner {
        border-color: color-mix(in srgb, #fbbf24 30%, var(--surface-border));
        background: color-mix(in srgb, #f59e0b 14%, var(--surface-bg));
    }

    @media (min-width: 640px) {
        .email-verification-banner {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.25rem;
        }
    }

    .email-verification-banner__content {
        display: flex;
        min-width: 0;
        flex: 1;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .email-verification-banner__icon {
        margin-top: 0.125rem;
        color: #d97706;
    }

    .dark .email-verification-banner__icon {
        color: #fbbf24;
    }

    .email-verification-banner__text {
        min-width: 0;
        flex: 1;
        overflow-wrap: anywhere;
        font-size: 0.8125rem;
        line-height: 1.5;
        color: var(--text-main);
    }

    .email-verification-banner__action {
        display: inline-flex;
        width: 100%;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
    }

    @media (min-width: 640px) {
        .email-verification-banner__action {
            width: auto;
            justify-content: flex-end;
        }
    }

    .password-strength {
        border-radius: 16px;
        border: 1px solid var(--surface-border);
        background: color-mix(in srgb, var(--surface-bg) 92%, transparent);
        padding: 0.875rem 1rem;
        opacity: 0.5;
        transition:
            opacity 220ms ease,
            border-color 220ms ease,
            box-shadow 220ms ease,
            background-color 220ms ease;
    }

    .password-strength--focused {
        opacity: 1;
        border-color: color-mix(in srgb, var(--accent) 70%, var(--surface-border));
        background: color-mix(in srgb, var(--surface-bg) 98%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
    }

    .password-strength__title {
        margin-bottom: 0.625rem;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--text-muted);
    }

    .password-strength__list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .password-strength__item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 13px;
        color: var(--text-muted);
        transition: color 200ms ease;
    }

    .password-strength__item--met {
        color: #16a34a;
    }

    .dark .password-strength__item--met {
        color: #4ade80;
    }

    .password-strength__icon {
        display: flex;
        height: 1rem;
        width: 1rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
    }

    .password-strength__icon-check {
        height: 1rem;
        width: 1rem;
    }

    .password-strength__icon-pending {
        height: 0.875rem;
        width: 0.875rem;
        opacity: 0.35;
    }

    .password-confirmation-match__ok {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 13px;
        font-weight: 500;
        color: #16a34a;
    }

    .dark .password-confirmation-match__ok {
        color: #4ade80;
    }

    .password-confirmation-match__mismatch {
        font-size: 13px;
        color: var(--text-muted);
    }

    .platform-overlay {
        background: var(--platform-overlay);
    }

    body.platform-scroll-lock,
    body.billing-modal-lock {
        overflow: hidden;
        touch-action: none;
        overscroll-behavior: none;
    }

    .billing-page {
        width: 100%;
        min-width: 0;
        --billing-success: #16a34a;
        --billing-success-text: #15803d;
        --billing-warning: #d97706;
        --billing-warning-text: #b45309;
        --billing-danger: #dc2626;
    }

    .dark .billing-page,
    html.night .billing-page {
        --billing-success-text: #4ade80;
        --billing-warning-text: #fbbf24;
        --billing-danger: #f87171;
    }

    .billing-summary,
    .billing-main,
    .billing-footer-grid {
        display: grid;
        width: 100%;
        gap: 1rem;
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
    }

    .billing-transaction { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.65rem; }
    .billing-method-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem; }
    .billing-method-row > .platform-badge { grid-column: 2; justify-self: start; }
    .billing-method-row > .platform-icon-btn { grid-column: 3; grid-row: 1; }
    .billing-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; }
    .billing-history-page-btn.platform-btn-secondary { width: auto; }
    .billing-status--refunded { background: var(--accent-soft); color: var(--accent); }
    .billing-page button:disabled { opacity: 0.5; cursor: not-allowed; }
    .billing-page a:focus-visible, .billing-page button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .billing-page .platform-btn-primary:active, .billing-page .platform-btn-secondary:active { transform: translateY(1px); }
    @media (min-width: 768px) {
        .billing-main, .billing-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 639px) {
        .billing-transaction { grid-template-columns: minmax(0, 1fr) auto; }
        .billing-transaction > span { display: none; }
        .billing-row__title { overflow-wrap: anywhere; }
    }

    .billing-summary > *,
    .billing-main > *,
    .billing-footer-grid > * {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    @media (min-width: 768px) {
        .billing-summary {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

        .billing-summary__wallet {
            grid-column: 1 / -1;
        }
    }

    @media (min-width: 1280px) {
        .billing-summary {
            grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.78fr) minmax(0, 0.78fr);
        }

        .billing-summary__wallet {
            grid-column: auto;
        }

        .billing-main {
            grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
            gap: 1.5rem;
        }

        .billing-footer-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 1.5rem;
        }
    }

    .billing-toolbar-btn {
        justify-content: center;
        width: auto;
        min-height: 2.75rem;
        white-space: nowrap;
    }

    @media (max-width: 639px) {
        .billing-toolbar-btn {
            flex: 1 1 0;
        }
    }

    .billing-modal__footer .platform-btn-primary,
    .billing-modal__footer .platform-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    @media (min-width: 640px) {
        .billing-modal__footer .platform-btn-primary,
        .billing-modal__footer .platform-btn-secondary {
            width: auto;
        }
    }

    .billing-compact-btn.platform-btn-secondary {
        width: auto;
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
    }

    .billing-wallet {
        background: color-mix(in srgb, var(--accent) 7%, var(--surface-bg));
    }

    .dark .billing-wallet,
    html.night .billing-wallet {
        background: color-mix(in srgb, var(--accent) 9%, var(--surface-bg));
        border-color: color-mix(in srgb, var(--accent) 22%, var(--surface-border));
    }

    .billing-amount {
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.03em;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .billing-wallet .billing-amount { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
    .billing-transaction > div:last-child { min-width: 0; max-width: 11rem; }
    .billing-history-row > div:last-child { min-width: 0; max-width: 11rem; }
    .billing-transaction .billing-amount { white-space: normal; }
    .billing-summary .billing-wallet > div { flex-wrap: wrap; }

    .billing-empty-value {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        line-height: 1.3;
        letter-spacing: -0.02em;
        font-size: clamp(1rem, 1.6vw + 0.7rem, 1.5rem);
    }

    .billing-amount--in {
        color: var(--billing-success-text);
    }

    .billing-amount--out {
        color: var(--text-body);
    }

    .billing-status {
        display: inline-flex;
        align-items: center;
        border-radius: 9999px;
        border: 1px solid transparent;
        padding: 0.2rem 0.55rem;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.2;
        white-space: nowrap;
    }

    .billing-status--active {
        background: color-mix(in srgb, var(--billing-success) 14%, var(--surface-bg));
        border-color: color-mix(in srgb, var(--billing-success) 24%, var(--surface-border));
        color: var(--billing-success-text);
    }

    .billing-status--trial {
        background: var(--accent-soft);
        border-color: color-mix(in srgb, var(--accent) 28%, var(--surface-border));
        color: var(--accent);
    }

    .billing-status--pending {
        background: color-mix(in srgb, var(--billing-warning) 14%, var(--surface-bg));
        border-color: color-mix(in srgb, var(--billing-warning) 28%, var(--surface-border));
        color: var(--billing-warning-text);
    }

    .billing-status--cancelled {
        background: color-mix(in srgb, var(--billing-danger) 8%, var(--surface-bg));
        border-color: color-mix(in srgb, var(--billing-danger) 20%, var(--surface-border));
        color: color-mix(in srgb, var(--billing-danger) 70%, var(--text-muted));
    }

    .billing-row {
        min-width: 0;
        border: 1px solid var(--surface-border);
        border-radius: 16px;
        background: var(--surface-bg);
    }

    .dark .billing-row,
    html.night .billing-row {
        background: color-mix(in srgb, var(--page-bg) 40%, var(--surface-bg));
    }

    .billing-row__title {
        min-width: 0;
        overflow-wrap: break-word;
    }

    .billing-menu {
        position: absolute;
        right: 0;
        top: calc(100% + 0.35rem);
        z-index: 20;
        min-width: 11.5rem;
        overflow: hidden;
        border: 1px solid var(--surface-border);
        border-radius: 14px;
        background: var(--surface-bg);
        box-shadow: var(--surface-shadow-hover);
        padding: 0.35rem;
    }

    .billing-menu button {
        display: flex;
        width: 100%;
        align-items: center;
        border-radius: 10px;
        padding: 0.55rem 0.7rem;
        text-align: left;
        font-size: 0.8125rem;
        color: var(--text-main);
    }

    .billing-menu button:hover,
    .billing-menu button:focus-visible {
        background: var(--sidebar-hover-bg);
        outline: none;
    }

    .billing-toggle {
        position: relative;
        display: inline-flex;
        height: 1.375rem;
        width: 2.5rem;
        flex-shrink: 0;
        align-items: center;
        border-radius: 9999px;
        border: 1px solid transparent;
        background: color-mix(in srgb, var(--text-muted) 28%, var(--surface-bg));
        padding: 0.125rem;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .billing-toggle[aria-disabled='true'] {
        cursor: default;
    }

    .billing-toggle[aria-checked='true'] {
        background: var(--accent);
    }

    .billing-toggle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
    }

    .billing-toggle__thumb {
        height: 1rem;
        width: 1rem;
        border-radius: 9999px;
        background: #fff;
        transform: translateX(0);
        transition: transform 0.2s ease;
    }

    .billing-toggle[aria-checked='true'] .billing-toggle__thumb {
        transform: translateX(1.05rem);
    }

    .billing-card-brand {
        display: inline-flex;
        height: 2.25rem;
        width: 3.25rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid var(--surface-border);
        background: var(--surface-bg);
        font-size: 0.625rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1;
        color: var(--text-main);
    }

    .billing-card-brand--visa {
        color: #1a365d;
        background: color-mix(in srgb, #1a365d 8%, var(--surface-bg));
    }

    .dark .billing-card-brand--visa,
    html.night .billing-card-brand--visa {
        color: #93c5fd;
    }

    .billing-card-brand--mastercard {
        color: #9a3412;
        background: color-mix(in srgb, #ea580c 10%, var(--surface-bg));
    }

    .dark .billing-card-brand--mastercard,
    html.night .billing-card-brand--mastercard {
        color: #fdba74;
    }

    .billing-choice {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 0.75rem;
        border: 1px solid var(--surface-border);
        border-radius: 14px;
        background: var(--surface-bg);
        padding: 0.75rem 0.875rem;
        text-align: left;
        color: var(--text-main);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .billing-choice:hover,
    .billing-choice:focus-visible {
        border-color: var(--surface-border-hover);
        outline: none;
    }

    .billing-choice.is-active {
        border-color: color-mix(in srgb, var(--accent) 55%, var(--surface-border));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
        background: color-mix(in srgb, var(--accent) 6%, var(--surface-bg));
    }

    .billing-preset {
        min-height: 2.75rem;
        border: 1px solid var(--surface-border);
        border-radius: 14px;
        background: var(--surface-bg);
        padding: 0.625rem 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-main);
        transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .billing-preset:hover,
    .billing-preset:focus-visible {
        border-color: var(--surface-border-hover);
        outline: none;
    }

    .billing-preset.is-active {
        border-color: color-mix(in srgb, var(--accent) 55%, var(--surface-border));
        background: color-mix(in srgb, var(--accent) 8%, var(--surface-bg));
        color: var(--text-main);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    }

    .billing-amount-field {
        position: relative;
    }

    .billing-amount-field__symbol {
        pointer-events: none;
        position: absolute;
        top: 50%;
        left: 0.875rem;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-weight: 600;
    }

    .billing-amount-field input {
        padding-left: 2rem;
    }

    .billing-modal {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .billing-modal__panel {
        display: flex;
        width: min(32rem, 100%);
        max-height: min(90vh, 44rem);
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--surface-border);
        border-radius: 22px;
        background: var(--surface-bg);
        box-shadow: var(--surface-shadow-hover);
        color: var(--text-main);
    }

    .dark .billing-modal__panel,
    html.night .billing-modal__panel {
        border-color: color-mix(in srgb, #fff 14%, var(--surface-border));
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    }

    .billing-modal__body {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1.25rem 1.25rem 0;
    }

    .billing-modal__footer {
        display: flex;
        flex-direction: column-reverse;
        gap: 0.5rem;
        border-top: 1px solid var(--surface-border);
        background: color-mix(in srgb, var(--page-bg) 70%, var(--surface-bg));
        padding: 1rem 1.25rem 1.25rem;
    }

    @media (min-width: 640px) {
        .billing-modal__footer {
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
        }
    }

    .billing-skeleton {
        border-radius: 10px;
        background: color-mix(in srgb, var(--text-muted) 16%, var(--surface-bg));
        animation: billing-pulse 1.4s ease-in-out infinite;
    }

    .dark .billing-skeleton,
    html.night .billing-skeleton {
        background: color-mix(in srgb, #fff 8%, var(--surface-bg));
    }

    .billing-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 1rem 0.5rem;
        text-align: center;
    }

    .billing-empty .platform-btn-secondary {
        width: auto;
        min-height: 2.75rem;
        justify-content: center;
        padding: 0.625rem 1rem;
        border: 1px solid var(--surface-border);
        background: var(--accent-soft);
        color: var(--accent);
    }

    .billing-empty .platform-btn-secondary:hover {
        border-color: var(--accent);
    }

    .billing-empty__icon {
        display: flex;
        height: 2.5rem;
        width: 2.5rem;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.35rem;
        border-radius: 12px;
        background: var(--accent-soft);
        color: var(--accent);
    }

    .billing-error {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        border: 1px solid color-mix(in srgb, var(--billing-danger) 28%, var(--surface-border));
        border-radius: 16px;
        background: color-mix(in srgb, var(--billing-danger) 8%, var(--surface-bg));
        padding: 0.875rem 1rem;
        color: var(--text-main);
    }

    @media (min-width: 640px) {
        .billing-error {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
    }

    .platform-icon-btn:focus-visible,
    .platform-link-accent:focus-visible,
    .billing-choice:focus-visible,
    .billing-preset:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
    }

    @keyframes billing-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.55; }
    }

    @media (max-width: 639px) {
        .billing-modal { align-items: flex-end; padding: 0; }
        .billing-modal__panel {
            width: 100%;
            max-height: 90dvh;
            border-radius: 22px 22px 0 0;
            padding-bottom: env(safe-area-inset-bottom);
        }
    }

    .platform-app {
        min-width: 0;
        overflow-x: clip;
    }

    .platform-header {
        background: var(--page-bg);
    }

    .platform-main,
    .platform-aside {
        background: var(--page-bg);
    }

    .platform-sidebar-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.625rem 1rem;
    }

    .profile-panel--sheet {
        width: auto;
        max-height: min(88vh, 640px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .profile-settings-row__value {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .profile-settings-row__content {
        min-width: 0;
    }

    @media (min-width: 640px) {
        .profile-panel--sheet {
            width: min(22rem, calc(100vw - 2rem));
            max-height: none;
            border-radius: 28px;
            padding-bottom: 0;
        }
    }

    @media (max-width: 1024px) {
        .platform-nav-item {
            width: 100%;
            max-width: 100%;
        }
    }

    @media (max-width: 640px) {
        .platform-icon-btn,
        .platform-avatar,
        .profile-settings-row__email-alert {
            min-height: 2.75rem;
            min-width: 2.75rem;
        }

        .platform-nav-item {
            min-height: 2.75rem;
            padding-inline: 0.875rem;
        }

        .account-form-actions {
            flex-direction: column-reverse;
            align-items: stretch;
            gap: 0.625rem;
        }

        .account-form-actions .btn {
            width: 100%;
            min-height: 2.75rem;
            justify-content: center;
        }

        .account-edit__title {
            font-size: 1.375rem;
            line-height: 1.3;
        }

        .account-edit__back {
            height: 2.75rem;
            width: 2.75rem;
        }

        .account-edit__description {
            font-size: 0.8125rem;
        }

        .profile-settings-row {
            gap: 0.75rem;
            padding: 0.875rem 1rem;
        }

        .profile-settings__title {
            font-size: 1.375rem;
        }

        .profile-settings__panel {
            border-radius: 20px;
        }

        .platform-card {
            border-radius: 18px;
        }

        .account-form-card {
            border-radius: 20px;
            padding: 1rem;
        }

        .location-select__menu {
            position: fixed;
            z-index: 70;
            top: auto;
            right: 1rem;
            bottom: max(1rem, env(safe-area-inset-bottom));
            left: 1rem;
            max-height: min(70vh, 28rem);
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }

        .location-select__overlay {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 60;
            background: var(--platform-overlay);
        }

        .account-edit {
            padding-bottom: 5rem;
        }

        .account-form-actions {
            position: sticky;
            bottom: 0;
            z-index: 30;
            margin-top: 1.25rem;
            margin-inline: -0.25rem;
            padding: 0.75rem 0.25rem;
            padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
            background: color-mix(in srgb, var(--page-bg) 92%, transparent);
            backdrop-filter: blur(8px);
            border-top: 1px solid var(--surface-border);
        }

        .profile-settings__action-btn {
            width: 100%;
            min-height: 2.75rem;
        }

        .account-address-card__delete {
            height: 2.75rem;
            width: 2.75rem;
        }

        .account-address-card__title {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .location-select__list {
            max-height: min(50vh, 20rem);
        }

        .account-toast {
            left: 1rem;
            right: 1rem;
            width: auto;
        }

        .email-verification-banner {
            flex-direction: column;
            align-items: stretch;
        }

        .email-verification-banner__action {
            width: 100%;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .platform-account-brand__lead,
        .platform-account-brand__tail {
            font-size: 1.25rem;
        }

        .platform-sidebar {
            width: min(100vw, var(--sidebar-width));
        }
    }
}