:root,
:root[data-scheme="dark"] {
    color-scheme: dark;
    --md-sys-color-primary: #adc6ff;
    --md-sys-color-on-primary: #112f60;
    --md-sys-color-primary-container: #2b4678;
    --md-sys-color-on-primary-container: #d8e2ff;
    --md-sys-color-inverse-primary: #445e91;
    --md-sys-color-secondary: #bfc6dc;
    --md-sys-color-on-secondary: #293041;
    --md-sys-color-secondary-container: #3f4759;
    --md-sys-color-on-secondary-container: #dbe2f9;
    --md-sys-color-tertiary: #debcdf;
    --md-sys-color-on-tertiary: #402843;
    --md-sys-color-tertiary-container: #583e5b;
    --md-sys-color-on-tertiary-container: #fcd7fb;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-background: #111318;
    --md-sys-color-on-background: #e2e2e9;
    --md-sys-color-surface: #111318;
    --md-sys-color-on-surface: #e2e2e9;
    --md-sys-color-surface-variant: #44474f;
    --md-sys-color-on-surface-variant: #c4c6d0;
    --md-sys-color-surface-dim: #111318;
    --md-sys-color-surface-bright: #37393e;
    --md-sys-color-surface-container-lowest: #0c0e13;
    --md-sys-color-surface-container-low: #1a1b20;
    --md-sys-color-surface-container: #1e1f25;
    --md-sys-color-surface-container-high: #282a2f;
    --md-sys-color-surface-container-highest: #33353a;
    --md-sys-color-inverse-surface: #e2e2e9;
    --md-sys-color-inverse-on-surface: #2f3036;
    --md-sys-color-outline: #8e9099;
    --md-sys-color-outline-variant: #44474f;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-surface-tint: #adc6ff;
    --md-sys-color-primary-fixed: #d8e2ff;
    --md-sys-color-primary-fixed-dim: #adc6ff;
    --md-sys-color-on-primary-fixed: #001a42;
    --md-sys-color-on-primary-fixed-variant: #2b4678;
    --md-sys-color-secondary-fixed: #dbe2f9;
    --md-sys-color-secondary-fixed-dim: #bfc6dc;
    --md-sys-color-on-secondary-fixed: #141b2c;
    --md-sys-color-on-secondary-fixed-variant: #3f4759;
    --md-sys-color-tertiary-fixed: #fcd7fb;
    --md-sys-color-tertiary-fixed-dim: #debcdf;
    --md-sys-color-on-tertiary-fixed: #29132d;
    --md-sys-color-on-tertiary-fixed-variant: #583e5b;
    --md-sys-color-success: #76daa1;
    --md-sys-color-on-success: #003920;
    --md-sys-color-success-container: #005231;
    --md-sys-color-on-success-container: #92f7bc;
    --md-sys-color-warning: #ffb77f;
    --md-sys-color-on-warning: #4e2600;
    --md-sys-color-warning-container: #6e3900;
    --md-sys-color-on-warning-container: #ffdcc3;
}

:root[data-scheme="light"] {
    color-scheme: light;
    --md-sys-color-primary: #445e91;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d8e2ff;
    --md-sys-color-on-primary-container: #2b4678;
    --md-sys-color-inverse-primary: #adc6ff;
    --md-sys-color-secondary: #575e71;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #dbe2f9;
    --md-sys-color-on-secondary-container: #3f4759;
    --md-sys-color-tertiary: #715573;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #fcd7fb;
    --md-sys-color-on-tertiary-container: #583e5b;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #93000a;
    --md-sys-color-background: #f9f9ff;
    --md-sys-color-on-background: #1a1b20;
    --md-sys-color-surface: #f9f9ff;
    --md-sys-color-on-surface: #1a1b20;
    --md-sys-color-surface-variant: #e1e2ec;
    --md-sys-color-on-surface-variant: #44474f;
    --md-sys-color-surface-dim: #d9d9e0;
    --md-sys-color-surface-bright: #f9f9ff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f3f3fa;
    --md-sys-color-surface-container: #eeedf4;
    --md-sys-color-surface-container-high: #e8e7ef;
    --md-sys-color-surface-container-highest: #e2e2e9;
    --md-sys-color-inverse-surface: #2f3036;
    --md-sys-color-inverse-on-surface: #f0f0f7;
    --md-sys-color-outline: #75777f;
    --md-sys-color-outline-variant: #c4c6d0;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-surface-tint: #445e91;
    --md-sys-color-primary-fixed: #d8e2ff;
    --md-sys-color-primary-fixed-dim: #adc6ff;
    --md-sys-color-on-primary-fixed: #001a42;
    --md-sys-color-on-primary-fixed-variant: #2b4678;
    --md-sys-color-secondary-fixed: #dbe2f9;
    --md-sys-color-secondary-fixed-dim: #bfc6dc;
    --md-sys-color-on-secondary-fixed: #141b2c;
    --md-sys-color-on-secondary-fixed-variant: #3f4759;
    --md-sys-color-tertiary-fixed: #fcd7fb;
    --md-sys-color-tertiary-fixed-dim: #debcdf;
    --md-sys-color-on-tertiary-fixed: #29132d;
    --md-sys-color-on-tertiary-fixed-variant: #583e5b;
    --md-sys-color-success: #006d43;
    --md-sys-color-on-success: #ffffff;
    --md-sys-color-success-container: #92f7bc;
    --md-sys-color-on-success-container: #002111;
    --md-sys-color-warning: #914c00;
    --md-sys-color-on-warning: #ffffff;
    --md-sys-color-warning-container: #ffdcc3;
    --md-sys-color-on-warning-container: #2f1500;
}

:root {
    --md-ref-typeface-brand: "Google Sans", "Roboto Flex", "Roboto", "Noto Sans Arabic", system-ui, sans-serif;
    --md-ref-typeface-plain: "Roboto Flex", "Roboto", "Noto Sans Arabic", system-ui, sans-serif;
    --md-sys-typescale-font-brand: var(--md-ref-typeface-brand);
    --md-sys-typescale-font-plain: var(--md-ref-typeface-plain);

    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-large-weight: 400;
    --md-sys-typescale-display-medium-size: 45px;
    --md-sys-typescale-display-medium-line-height: 52px;
    --md-sys-typescale-display-medium-weight: 400;
    --md-sys-typescale-display-small-size: 36px;
    --md-sys-typescale-display-small-line-height: 44px;
    --md-sys-typescale-display-small-weight: 400;
    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-large-line-height: 40px;
    --md-sys-typescale-headline-large-weight: 400;
    --md-sys-typescale-headline-medium-size: 28px;
    --md-sys-typescale-headline-medium-line-height: 36px;
    --md-sys-typescale-headline-medium-weight: 400;
    --md-sys-typescale-headline-small-size: 24px;
    --md-sys-typescale-headline-small-line-height: 32px;
    --md-sys-typescale-headline-small-weight: 400;
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-large-line-height: 28px;
    --md-sys-typescale-title-large-weight: 400;
    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-medium-weight: 500;
    --md-sys-typescale-title-small-size: 14px;
    --md-sys-typescale-title-small-line-height: 20px;
    --md-sys-typescale-title-small-weight: 500;
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-large-weight: 400;
    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-medium-weight: 400;
    --md-sys-typescale-body-small-size: 12px;
    --md-sys-typescale-body-small-line-height: 16px;
    --md-sys-typescale-body-small-weight: 400;
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-large-weight: 500;
    --md-sys-typescale-label-medium-size: 12px;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-medium-weight: 500;
    --md-sys-typescale-label-small-size: 11px;
    --md-sys-typescale-label-small-line-height: 16px;
    --md-sys-typescale-label-small-weight: 500;

    --nova-shape-scale: 1;
    --md-sys-shape-corner-none: 0px;
    --md-sys-shape-corner-extra-small: calc(4px * var(--nova-shape-scale));
    --md-sys-shape-corner-small: calc(8px * var(--nova-shape-scale));
    --md-sys-shape-corner-medium: calc(12px * var(--nova-shape-scale));
    --md-sys-shape-corner-large: calc(16px * var(--nova-shape-scale));
    --md-sys-shape-corner-large-increased: calc(20px * var(--nova-shape-scale));
    --md-sys-shape-corner-extra-large: calc(28px * var(--nova-shape-scale));
    --md-sys-shape-corner-full: 9999px;

    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0 1px 2px 0 rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);
    --md-sys-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15);
    --md-sys-elevation-level3: 0 1px 3px 0 rgb(0 0 0 / .3), 0 4px 8px 3px rgb(0 0 0 / .15);
    --md-sys-elevation-level4: 0 2px 3px 0 rgb(0 0 0 / .3), 0 6px 10px 4px rgb(0 0 0 / .15);
    --md-sys-elevation-level5: 0 4px 4px 0 rgb(0 0 0 / .3), 0 8px 12px 6px rgb(0 0 0 / .15);

    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-duration-short: 150ms;
    --md-sys-motion-duration-medium: 300ms;
    --md-sys-motion-duration-long: 500ms;

    --md-sys-state-hover: 0.08;
    --md-sys-state-focus: 0.10;
    --md-sys-state-pressed: 0.10;
    --md-sys-state-dragged: 0.16;

    --bg-main: var(--md-sys-color-surface);
    --bg-card: var(--md-sys-color-surface-container-low);
    --bg-input: var(--md-sys-color-surface-container-highest);
    --accent-primary: var(--md-sys-color-primary);
    --accent-hover: var(--md-sys-color-primary);
    --accent-secondary: var(--md-sys-color-tertiary);
    --text-main: var(--md-sys-color-on-surface);
    --text-dim: var(--md-sys-color-on-surface-variant);
    --text-muted: var(--md-sys-color-on-surface-variant);
    --border-color: var(--md-sys-color-outline-variant);
    --radius-lg: var(--md-sys-shape-corner-large);
    --radius-md: var(--md-sys-shape-corner-medium);
    --font-main: var(--md-sys-typescale-font-plain);
    --shadow: var(--md-sys-elevation-level1);
    --shadow-soft: var(--md-sys-elevation-level1);
    --shadow-strong: var(--md-sys-elevation-level2);
    --danger-color: var(--md-sys-color-error);
    --warning-color: var(--md-sys-color-warning);
    --success-color: var(--md-sys-color-success);
    --transition-fast: var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
    --transition-normal: var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--md-sys-color-surface);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-font-plain);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--md-sys-typescale-font-brand);
    color: var(--md-sys-color-on-surface);
    font-weight: 400;
}

h1 {
    font-size: var(--md-sys-typescale-headline-large-size);
    line-height: var(--md-sys-typescale-headline-large-line-height);
}

h2 {
    font-size: var(--md-sys-typescale-headline-small-size);
    line-height: var(--md-sys-typescale-headline-small-line-height);
}

h3 {
    font-size: var(--md-sys-typescale-title-large-size);
    line-height: var(--md-sys-typescale-title-large-line-height);
}

h4 {
    font-size: var(--md-sys-typescale-title-medium-size);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    font-weight: 500;
}

p {
    margin: 0;
}

a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
}

::selection {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--md-sys-color-secondary);
    outline-offset: 2px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.material-symbols-rounded,
.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    flex-shrink: 0;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    user-select: none;
}

.fa-2x { font-size: 2.25em; }
.fa-spin,
.fa-pulse { animation: md-spin 1s linear infinite; }

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

.fa-times::before { content: "close"; }
.fa-arrow-left::before { content: "arrow_back"; }
.fa-at::before { content: "alternate_email"; }
.fa-bell::before { content: "notifications"; }
.fa-camera::before { content: "photo_camera"; }
.fa-check::before { content: "check"; }
.fa-check-circle::before { content: "check_circle"; }
.fa-chevron-down::before { content: "expand_more"; }
.fa-chevron-right::before { content: "chevron_right"; }
.fa-code::before { content: "code"; }
.fa-cog::before { content: "settings"; }
.fa-comment::before { content: "chat_bubble"; }
.fa-comment-dots::before { content: "sms"; }
.fa-comments::before { content: "forum"; }
.fa-copy::before { content: "content_copy"; }
.fa-crown::before { content: "workspace_premium"; }
.fa-download::before { content: "download"; }
.fa-edit::before,
.fa-pen::before,
.fa-pencil-alt::before { content: "edit"; }
.fa-envelope::before { content: "mail"; }
.fa-exclamation-triangle::before { content: "warning"; }
.fa-file-alt::before { content: "description"; }
.fa-file-export::before { content: "ios_share"; }
.fa-file-import::before { content: "file_open"; }
.fa-font::before { content: "text_fields"; }
.fa-home::before { content: "home"; }
.fa-inbox::before { content: "inbox"; }
.fa-info-circle::before { content: "info"; }
.fa-laptop::before { content: "laptop"; }
.fa-link::before { content: "link"; }
.fa-list::before { content: "list"; }
.fa-lock::before { content: "lock"; }
.fa-lock-open::before { content: "lock_open"; }
.fa-message::before { content: "chat"; }
.fa-microphone::before { content: "mic"; }
.fa-mobile-alt::before { content: "smartphone"; }
.fa-music::before { content: "music_note"; }
.fa-palette::before { content: "palette"; }
.fa-paperclip::before { content: "attach_file"; }
.fa-paper-plane::before { content: "send"; }
.fa-paste::before { content: "content_paste"; }
.fa-phone-volume::before { content: "phone_in_talk"; }
.fa-plus::before { content: "add"; }
.fa-plus-circle::before { content: "add_circle"; }
.fa-question-circle::before { content: "help"; }
.fa-qr-code::before { content: "qr_code_2"; }
.fa-reply::before { content: "reply"; }
.fa-save::before { content: "save"; }
.fa-search::before { content: "search"; }
.fa-sign-in-alt::before { content: "login"; }
.fa-sign-out-alt::before { content: "logout"; }
.fa-sliders-h::before { content: "tune"; }
.fa-spinner::before { content: "progress_activity"; }
.fa-stop::before { content: "stop"; }
.fa-store::before { content: "storefront"; }
.fa-trash::before { content: "delete"; }
.fa-undo::before { content: "undo"; }
.fa-upload::before { content: "upload"; }
.fa-user::before { content: "person"; }
.fa-user-check::before { content: "how_to_reg"; }
.fa-user-friends::before { content: "group"; }
.fa-user-minus::before { content: "person_remove"; }
.fa-user-plus::before { content: "person_add"; }
.fa-users::before { content: "groups"; }
.fa-users-cog::before { content: "manage_accounts"; }
.fa-user-shield::before { content: "shield_person"; }
.fa-user-times::before { content: "person_off"; }
.fa-android::before { content: "android"; }
.fa-apple::before { content: "phone_iphone"; }
.fa-linux::before { content: "terminal"; }
.fa-windows::before { content: "desktop_windows"; }
.fa-eye::before { content: "visibility"; }
.fa-eye-slash::before { content: "visibility_off"; }
.fa-rocket::before { content: "rocket_launch"; }
.fa-shield-alt::before { content: "shield"; }
.fa-bolt::before { content: "bolt"; }
.fa-heart::before { content: "favorite"; }
.fa-star::before { content: "star"; }
.fa-globe::before { content: "public"; }
.fa-image::before { content: "image"; }
.fa-video::before { content: "videocam"; }
.fa-key::before { content: "key"; }
.fa-clock::before { content: "schedule"; }
.fa-arrow-right::before { content: "arrow_forward"; }
.fa-sun::before { content: "light_mode"; }
.fa-moon::before { content: "dark_mode"; }

.md-ripple-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.md-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: 0.12;
    transform: scale(0);
    animation: md-ripple 450ms var(--md-sys-motion-easing-standard) forwards;
    z-index: 0;
}

.md-ripple.out {
    animation: md-ripple 450ms var(--md-sys-motion-easing-standard) forwards, md-ripple-out 300ms linear 150ms forwards;
}

@keyframes md-ripple {
    to { transform: scale(1); }
}

@keyframes md-ripple-out {
    to { opacity: 0; }
}

.btn,
.primary-btn,
.btn-primary,
.submit-btn,
.danger-btn,
.btn-danger,
.btn-outline,
.btn-secondary,
.btn-danger-outline,
.btn-text,
.btn-req-accept,
.btn-sidebar-action,
.send-code-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    min-width: 48px;
    padding: 0 24px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    font-family: var(--md-sys-typescale-font-plain);
    font-size: var(--md-sys-typescale-label-large-size);
    line-height: var(--md-sys-typescale-label-large-line-height);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: 0.1px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), border-radius var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.btn::after,
.primary-btn::after,
.btn-primary::after,
.submit-btn::after,
.danger-btn::after,
.btn-danger::after,
.btn-outline::after,
.btn-secondary::after,
.btn-danger-outline::after,
.btn-text::after,
.btn-req-accept::after,
.btn-sidebar-action::after,
.send-code-btn::after,
.icon-btn::after,
.form-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short) linear;
}

.btn:hover::after,
.primary-btn:hover::after,
.btn-primary:hover::after,
.submit-btn:hover::after,
.danger-btn:hover::after,
.btn-danger:hover::after,
.btn-outline:hover::after,
.btn-secondary:hover::after,
.btn-danger-outline:hover::after,
.btn-text:hover::after,
.btn-req-accept:hover::after,
.btn-sidebar-action:hover::after,
.send-code-btn:hover::after,
.icon-btn:hover::after,
.form-button:hover::after {
    opacity: var(--md-sys-state-hover);
}

.btn:active::after,
.primary-btn:active::after,
.btn-primary:active::after,
.submit-btn:active::after,
.danger-btn:active::after,
.btn-danger:active::after,
.btn-outline:active::after,
.btn-secondary:active::after,
.btn-danger-outline:active::after,
.btn-text:active::after,
.icon-btn:active::after,
.form-button:active::after {
    opacity: var(--md-sys-state-pressed);
}

.btn:active,
.primary-btn:active,
.btn-primary:active,
.submit-btn:active,
.btn-outline:active,
.btn-secondary:active {
    border-radius: var(--md-sys-shape-corner-small);
}

.btn i,
.primary-btn i,
.btn-primary i,
.submit-btn i,
.danger-btn i,
.btn-danger i,
.btn-outline i,
.btn-secondary i,
.btn-danger-outline i,
.btn-text i,
.btn-sidebar-action i {
    font-size: 18px;
    margin-inline-start: -8px;
}

.btn,
.primary-btn,
.btn-primary,
.submit-btn,
.send-code-btn {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.primary-btn:hover,
.btn-primary:hover,
.submit-btn:hover {
    box-shadow: var(--md-sys-elevation-level1);
}

.btn-secondary,
.btn-req-accept,
.btn-sidebar-action.secondary {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.btn-sidebar-action.primary {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.btn-outline {
    background: transparent;
    color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}

.btn-text {
    background: transparent;
    color: var(--md-sys-color-primary);
    padding: 0 12px;
}

.danger-btn,
.btn-danger {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
}

.btn-danger-outline {
    background: transparent;
    color: var(--md-sys-color-error);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}

.btn-sm {
    height: 32px;
    padding: 0 16px;
    font-size: var(--md-sys-typescale-label-large-size);
}

.btn-sm i {
    font-size: 18px;
}

.btn-icon-only {
    width: 40px;
    min-width: 40px;
    padding: 0;
}

.btn-icon-only i {
    margin: 0;
}

button:disabled,
.btn:disabled,
.primary-btn:disabled,
.btn-primary:disabled,
.submit-btn:disabled,
.danger-btn:disabled,
.btn-outline:disabled,
.btn-secondary:disabled {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

.btn-outline:disabled {
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

.icon-btn,
.close-modal-btn,
.md-header-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.icon-btn i,
.close-modal-btn i,
.md-header-icon-btn i {
    font-size: 24px;
}

.close-modal-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short) linear;
}

.close-modal-btn:hover::after {
    opacity: var(--md-sys-state-hover);
}

.md-tonal-icon-btn {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md-tonal-icon-btn--primary {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.md-tonal-icon-btn--error {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.md-tonal-icon-btn--warning {
    background: var(--md-sys-color-warning-container);
    color: var(--md-sys-color-on-warning-container);
}

.md-tonal-icon-btn--neutral {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface-variant);
}

.fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 56px;
    height: 56px;
    padding: 0 16px;
    border: none;
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: var(--md-sys-elevation-level3);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.fab:hover {
    box-shadow: var(--md-sys-elevation-level4);
}

.fab i {
    font-size: 24px;
}

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    width: 100%;
    min-height: 56px;
    padding: 16px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    padding-inline: 24px;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-font-plain);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
    outline: none;
    caret-color: var(--md-sys-color-primary);
    transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.input:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover {
    box-shadow: inset 0 0 0 1px var(--md-sys-color-on-surface);
}

.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}

.input.error,
input.error,
textarea.error {
    box-shadow: inset 0 0 0 2px var(--md-sys-color-error);
    caret-color: var(--md-sys-color-error);
}

.input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 1;
}

textarea,
textarea.input {
    resize: vertical;
    min-height: 96px;
    border-radius: var(--md-sys-shape-corner-large-increased);
    padding-inline: 20px;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 48px;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--md-sys-color-on-surface-variant) 50%), linear-gradient(135deg, var(--md-sys-color-on-surface-variant) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

select option {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

input[type="checkbox"]:not(.switch input):not(.toggle-switch input) {
    accent-color: var(--md-sys-color-primary);
    width: 18px;
    height: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label,
.themes-import-label {
    font-size: var(--md-sys-typescale-body-small-size);
    line-height: var(--md-sys-typescale-body-small-line-height);
    color: var(--md-sys-color-on-surface-variant);
    padding: 0 16px;
}

.field-message {
    min-height: 16px;
    padding: 0 16px;
    font-size: var(--md-sys-typescale-body-small-size);
    line-height: var(--md-sys-typescale-body-small-line-height);
    color: var(--md-sys-color-on-surface-variant);
}

.field-message.error {
    color: var(--md-sys-color-error);
}

.field-message.success {
    color: var(--md-sys-color-success);
}

.muted {
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
}

.card {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 16px;
    border: none;
}

.switch,
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
}

.switch input,
.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.switch .slider,
.toggle-switch .toggle-slider {
    position: absolute;
    inset: 0;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-highest);
    box-shadow: inset 0 0 0 2px var(--md-sys-color-outline);
    transition: background-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

.switch .slider::before,
.toggle-switch .toggle-slider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--md-sys-color-outline);
    transform: translateY(-50%);
    transition: all var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
}

.switch input:checked + .slider,
.toggle-switch input:checked + .toggle-slider {
    background: var(--md-sys-color-primary);
    box-shadow: none;
}

.switch input:checked + .slider::before,
.toggle-switch input:checked + .toggle-slider::before {
    left: 24px;
    width: 24px;
    height: 24px;
    background: var(--md-sys-color-on-primary);
}

.switch input:active + .slider::before,
.toggle-switch input:active + .toggle-slider::before {
    width: 28px;
    height: 28px;
    left: 2px;
}

.switch input:checked:active + .slider::before,
.toggle-switch input:checked:active + .toggle-slider::before {
    left: 22px;
}

.switch input:focus-visible + .slider,
.toggle-switch input:focus-visible + .toggle-slider {
    outline: 3px solid var(--md-sys-color-secondary);
    outline-offset: 2px;
}

.switch input:disabled + .slider {
    opacity: 0.38;
}

.badge-count,
.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    font-size: var(--md-sys-typescale-label-small-size);
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-family: var(--md-sys-typescale-font-plain);
}

.status-alert,
.warning-box,
.info-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 12px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
}

.status-alert.success {
    background: var(--md-sys-color-success-container);
    color: var(--md-sys-color-on-success-container);
}

.status-alert.error {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.warning-box {
    background: var(--md-sys-color-warning-container);
    color: var(--md-sys-color-on-warning-container);
}

.toast,
.copy-toast,
.md-snackbar {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translate(-50%, 16px);
    min-height: 48px;
    max-width: min(560px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--md-sys-shape-corner-extra-small);
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    box-shadow: var(--md-sys-elevation-level3);
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    opacity: 0;
    pointer-events: none;
    z-index: 20000;
    transition: opacity var(--md-sys-motion-duration-short) linear, transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized-decelerate);
}

.toast.show,
.copy-toast.copy-toast-visible,
.md-snackbar.show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.md-snackbar .md-snackbar-action {
    margin-inline-start: auto;
    border: none;
    background: none;
    color: var(--md-sys-color-inverse-primary);
    font-weight: 500;
    font-size: var(--md-sys-typescale-label-large-size);
    cursor: pointer;
    padding: 0 4px;
}

.md-top-app-bar,
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 64px;
    padding: 0 16px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    transition: background-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

nav.scrolled,
.md-top-app-bar.scrolled {
    background: var(--md-sys-color-surface-container);
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: pre;
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-font-brand);
    font-size: var(--md-sys-typescale-title-large-size);
    line-height: var(--md-sys-typescale-title-large-line-height);
    text-decoration: none;
}

.nav-logo:hover {
    text-decoration: none;
}

.nav-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-inline-end: 10px;
    border-radius: 12px;
    background: var(--md-sys-color-primary);
    transition: border-radius var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
}

.nav-logo-mark::before {
    content: "";
    width: 22px;
    height: 22px;
    background: var(--md-sys-color-on-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6.6 4.4 10.1 11 11-6.6.9-10.1 4.4-11 11-.9-6.6-4.4-10.1-11-11 6.6-.9 10.1-4.4 11-11z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6.6 4.4 10.1 11 11-6.6.9-10.1 4.4-11 11-.9-6.6-4.4-10.1-11-11 6.6-.9 10.1-4.4 11-11z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-logo:hover .nav-logo-mark {
    border-radius: 50%;
}

.nav-logo-word {
    direction: ltr;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.3px;
}

.nav-logo-word b {
    font-weight: 500;
    color: var(--md-sys-color-primary);
}

.nav-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.md-segmented {
    display: inline-flex;
    width: 100%;
    border-radius: var(--md-sys-shape-corner-full);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
    overflow: hidden;
}

.md-segmented button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-segmented button + button {
    box-shadow: inset 1px 0 0 var(--md-sys-color-outline);
}

.md-segmented button i {
    font-size: 18px;
}

.md-segmented button:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.md-segmented button.selected {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: var(--md-sys-shape-corner-small);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-chip:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
}

.md-chip.selected {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    box-shadow: none;
}

.md-chip i {
    font-size: 18px;
    margin-inline-start: -8px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}

:root[dir="rtl"] .btn i,
:root[dir="rtl"] .primary-btn i,
:root[dir="rtl"] .btn-primary i,
:root[dir="rtl"] .submit-btn i,
:root[dir="rtl"] .danger-btn i,
:root[dir="rtl"] .btn-danger i,
:root[dir="rtl"] .btn-outline i,
:root[dir="rtl"] .btn-secondary i,
:root[dir="rtl"] .btn-danger-outline i,
:root[dir="rtl"] .btn-text i {
    margin-left: 0;
    margin-right: -8px;
}