/* =========================================================
   ALPHA DASHBOARD
   File: public_html/dashboard.css

   Final minimal redesign
   - No balance card
   - No Alpha logo block
   - Flat MEXC-inspired balance layout
   - Compact slider
   - Fixed full-width bottom navigation
   - Alpha golden primary action
   ========================================================= */


/* =========================================================
   1. TOKENS
   ========================================================= */

:root {
    --alpha-yellow: #F0B90B;
    --alpha-yellow-hover: #DFAE00;
    --alpha-yellow-soft: #FFF8DB;

    --alpha-bg: #FFFFFF;
    --alpha-soft-bg: #F7F8FA;
    --alpha-soft-bg-2: #FAFAFA;

    --alpha-text: #181A20;
    --alpha-muted: #707A8A;
    --alpha-light-muted: #9AA1AC;

    --alpha-border: #EAECEF;
    --alpha-border-strong: #D8DCE1;

    --alpha-success: #0ECB81;
    --alpha-danger: #F6465D;

    --safe-top:
        env(safe-area-inset-top, 0px);

    --safe-bottom:
        env(safe-area-inset-bottom, 0px);

    --header-height: 62px;
    --bottom-nav-height: 76px;

    --content-width: 980px;

    --transition: 160ms ease;
}


/* =========================================================
   2. RESET
   ========================================================= */

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

html {
    width: 100%;
    min-width: 320px;
    min-height: 100%;

    overflow-x: hidden;

    background: #FFFFFF;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    background: #FFFFFF;
    color: var(--alpha-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.dashboard-page {
    padding-bottom:
        calc(
            var(--bottom-nav-height)
            + var(--safe-bottom)
            + 18px
        );
}

body.panel-open {
    overflow: hidden;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button {
    margin: 0;
    border: 0;
}

button:not(:disabled),
a {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
p {
    margin: 0;
}

[hidden] {
    display: none !important;
}

::selection {
    background: rgba(240, 185, 11, 0.22);
    color: var(--alpha-text);
}


/* =========================================================
   3. ACCESSIBILITY
   ========================================================= */

.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

.skip-link {
    position: fixed;

    top: 10px;
    left: 10px;

    z-index: 9999;

    padding: 9px 12px;

    border-radius: 8px;

    background: var(--alpha-text);
    color: #FFFFFF;

    font-size: 12px;
    font-weight: 600;

    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(240, 185, 11, 0.25);
    outline-offset: 2px;
}


/* =========================================================
   4. CONTAINER
   ========================================================= */

.dashboard-container {
    width: min(
        calc(100% - 28px),
        var(--content-width)
    );

    margin-inline: auto;
}


/* =========================================================
   5. ALERT
   ========================================================= */

.dashboard-alert {
    position: fixed;

    top:
        calc(
            var(--safe-top)
            + var(--header-height)
            + 8px
        );

    left: 50%;

    z-index: 1800;

    width: min(
        calc(100% - 28px),
        420px
    );

    padding:
        10px
        12px;

    border:
        1px
        solid
        var(--alpha-border);

    border-radius: 9px;

    background: #FFFFFF;
    color: var(--alpha-text);

    box-shadow:
        0 10px 26px
        rgba(24, 26, 32, 0.10);

    font-size: 11px;
    font-weight: 600;

    text-align: center;

    transform: translateX(-50%);
}

.dashboard-alert.is-success {
    color:
        var(--alpha-success);
}

.dashboard-alert.is-error {
    color:
        var(--alpha-danger);
}


/* =========================================================
   6. HEADER
   ========================================================= */

.dashboard-header {
    position: sticky;
    top: 0;

    z-index: 700;

    width: 100%;

    padding-top:
        var(--safe-top);

    border-bottom:
        1px
        solid
        var(--alpha-border);

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dashboard-header__inner {
    min-height:
        var(--header-height);

    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 9px;
}


/* =========================================================
   7. PROFILE BUTTON
   ========================================================= */

.header-profile-button,
.account-button {
    position: relative;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    background: transparent;

    color:
        var(--alpha-text);
}

.header-profile-button:hover,
.account-button:hover {
    background:
        var(--alpha-soft-bg);
}

.account-button__avatar {
    width: 22px;
    height: 22px;
}

.account-button__avatar svg {
    width: 100%;
    height: 100%;
}

.account-button__status {
    position: absolute;

    right: 3px;
    bottom: 3px;

    width: 8px;
    height: 8px;

    border:
        2px
        solid
        #FFFFFF;

    border-radius: 50%;

    background:
        var(--alpha-success);
}


/* =========================================================
   8. HEADER SEARCH
   ========================================================= */

.header-search {
    min-width: 0;
    min-height: 40px;

    display: grid;

    grid-template-columns:
        18px
        minmax(0, 1fr)
        28px;

    align-items: center;

    gap: 7px;

    padding:
        0
        4px
        0
        11px;

    border: 0;

    border-radius: 999px;

    background:
        #F4F5F6;
}

.header-search:focus-within {
    background:
        #F7F8FA;
}

.header-search__icon {
    width: 17px;
    height: 17px;

    color:
        var(--alpha-muted);
}

.header-search__icon svg {
    width: 100%;
    height: 100%;
}

.header-search__input {
    width: 100%;
    height: 38px;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color:
        var(--alpha-text);

    font-size: 11px;
    font-weight: 500;
}

.header-search__input::placeholder {
    color:
        var(--alpha-light-muted);
}

.header-search__clear {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    background: transparent;

    color:
        var(--alpha-muted);
}

.header-search__clear svg {
    width: 15px;
    height: 15px;
}


/* =========================================================
   9. HEADER ACTIONS
   ========================================================= */

.header-actions {
    display: flex;
    align-items: center;

    gap: 1px;
}

.header-action {
    position: relative;

    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    background: transparent;

    color:
        var(--alpha-text);
}

.header-action:hover {
    background:
        var(--alpha-soft-bg);
}

.header-action svg {
    width: 20px;
    height: 20px;
}

.header-action--whatsapp {
    color:
        #128C7E;
}

.notification-badge {
    position: absolute;

    top: 0;
    right: -1px;

    min-width: 15px;
    height: 15px;

    display: grid;
    place-items: center;

    padding:
        0
        3px;

    border:
        2px
        solid
        #FFFFFF;

    border-radius: 999px;

    background:
        var(--alpha-yellow);

    color:
        var(--alpha-text);

    font-size: 7px;
    line-height: 1;
    font-weight: 700;
}


/* =========================================================
   10. MAIN
   ========================================================= */

.dashboard-main {
    width: 100%;

    padding:
        19px
        0
        24px;
}

.dashboard-main
> .dashboard-container {
    display: flex;
    flex-direction: column;
}


/* =========================================================
   11. BALANCE SECTION
   NO CARD STYLING
   ========================================================= */

.balance-section {
    width: 100%;

    padding:
        3px
        0
        20px;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}


/* =========================================================
   12. BALANCE LABEL
   ========================================================= */

.balance-label-row {
    display: flex;
    align-items: center;

    gap: 3px;
}

.balance-label {
    color:
        var(--alpha-muted);

    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
}

.visibility-button {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    background: transparent;

    color:
        var(--alpha-muted);
}

.visibility-button:hover {
    background:
        var(--alpha-soft-bg);
}

.visibility-button span {
    width: 17px;
    height: 17px;
}

.visibility-button svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   13. BALANCE DISPLAY
   ========================================================= */

.balance-display {
    width: 100%;

    margin-top: 8px;
}

.balance-display__primary {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 7px;
}

.balance-display__amount {
    min-width: 0;

    overflow-wrap: anywhere;

    color:
        var(--alpha-text);

    font-size:
        clamp(
            38px,
            12vw,
            54px
        );

    line-height: 1;

    font-weight: 650;

    letter-spacing: -1.8px;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   14. BALANCE CURRENCY SELECT
   ========================================================= */

.balance-currency-select {
    min-width: 68px;
    min-height: 30px;

    padding:
        0
        20px
        0
        0;

    border: 0;

    border-radius: 0;

    outline: 0;

    background:
        transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M7 9l5 5 5-5' fill='none' stroke='%23181A20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat
        right 1px
        center;

    color:
        var(--alpha-text);

    font-size: 12px;
    line-height: 1;
    font-weight: 650;

    appearance: none;
    -webkit-appearance: none;
}

.balance-display__converted {
    margin-top: 7px;

    color:
        var(--alpha-muted);

    font-size: 11px;
    line-height: 1.35;
    font-weight: 400;
}

.balance-change {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 5px;
}

.balance-change__label {
    color:
        var(--alpha-muted);

    font-size: 10px;
    font-weight: 400;
}

.balance-change__value {
    color:
        var(--alpha-muted);

    font-size: 10px;
    font-weight: 600;
}

.balance-change__value.is-positive,
.balance-change__value--positive {
    color:
        var(--alpha-success);
}

.balance-change__value.is-negative,
.balance-change__value--negative {
    color:
        var(--alpha-danger);
}

.balance-change__value.is-neutral,
.balance-change__value--neutral {
    color:
        var(--alpha-muted);
}


/* =========================================================
   15. BALANCE HIDDEN
   ========================================================= */

.balance-section.is-balance-hidden
.balance-display__amount,
.balance-section.is-balance-hidden
.balance-display__converted,
.balance-section.is-balance-hidden
.balance-change__value,
body.balance-hidden [data-private-value] {
    user-select: none;
}


/* =========================================================
   16. PRIMARY BUTTONS
   Deposit + Alpha Golden Trade
   ========================================================= */

.balance-primary-actions {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 9px;

    margin-top: 17px;
}

.balance-primary-button {
    min-width: 0;
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        14px;

    border-radius: 999px;

    font-size: 12px;
    line-height: 1;
    font-weight: 600;

    transition:
        background var(--transition),
        opacity var(--transition),
        transform var(--transition);
}

.balance-primary-button:active {
    transform:
        scale(0.985);
}

.balance-primary-button--deposit {
    background:
        #F1F2F4;

    color:
        var(--alpha-text);
}

.balance-primary-button--deposit:hover {
    background:
        #EBECEF;
}

/* Alpha natural brand color */
.balance-primary-button--trade {
    background:
        var(--alpha-yellow);

    color:
        var(--alpha-text);
}

.balance-primary-button--trade:hover {
    background:
        var(--alpha-yellow-hover);

    opacity: 1;
}


/* =========================================================
   17. QUICK ACTIONS
   ========================================================= */

.quick-actions-section {
    width: 100%;

    padding:
        12px
        0
        16px;
}

.quick-actions-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 6px;
}

.quick-action {
    min-width: 0;
    min-height: 72px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    gap: 7px;

    padding:
        5px
        2px;

    border: 0;
    border-radius: 0;

    background: transparent;

    color:
        var(--alpha-text);

    text-align: center;
}

.quick-action:active {
    opacity: 0.65;
}

.quick-action__icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border:
        1px
        solid
        var(--alpha-border);

    border-radius: 12px;

    background:
        #FFFFFF;

    color:
        var(--alpha-text);
}

.quick-action__icon svg {
    width: 18px;
    height: 18px;
}

.quick-action__label {
    width: 100%;

    overflow: hidden;

    color:
        var(--alpha-text);

    font-size: 8.5px;
    line-height: 1.2;
    font-weight: 500;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-action--whatsapp
.quick-action__icon {
    color:
        #128C7E;
}


/* =========================================================
   18. SLIDER
   ========================================================= */

.dashboard-slider {
    width: 100%;

    margin-top: 2px;

    padding:
        0
        0
        16px;

    overflow: hidden;
}

.dashboard-slider__track {
    width: 100%;

    display: flex;

    overflow-x: auto;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.dashboard-slider__track::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   19. SLIDE
   ========================================================= */

.dashboard-slide {
    min-width: 100%;

    min-height: 92px;

    flex: 0 0 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        15px
        16px;

    scroll-snap-align: start;

    border:
        1px
        solid
        var(--alpha-border);

    border-radius: 14px;

    background:
        #FAFAFA;

    color:
        var(--alpha-text);
}

.dashboard-slide + .dashboard-slide {
    margin-left: 8px;
}

.dashboard-slide__content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.dashboard-slide__eyebrow {
    color:
        var(--alpha-muted);

    font-size: 8px;
    line-height: 1.2;
    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

.dashboard-slide__content strong {
    overflow: hidden;

    color:
        var(--alpha-text);

    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-slide__content > span:last-child {
    overflow: hidden;

    color:
        var(--alpha-muted);

    font-size: 9px;
    line-height: 1.35;
    font-weight: 400;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-slide__arrow {
    width: 28px;
    height: 28px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        #FFFFFF;

    color:
        var(--alpha-muted);
}

.dashboard-slide__arrow svg {
    width: 15px;
    height: 15px;
}


/* =========================================================
   20. SLIDER DOTS
   ========================================================= */

.dashboard-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    margin-top: 8px;
}

.dashboard-slider__dot {
    width: 5px;
    height: 5px;

    padding: 0;

    border-radius: 999px;

    background:
        #DFE2E6;

    transition:
        width var(--transition),
        background var(--transition);
}

.dashboard-slider__dot.is-active,
.dashboard-slider__dot[aria-current="true"] {
    width: 14px;

    background:
        var(--alpha-yellow);
}


/* =========================================================
   21. SECTION HEADING
   ========================================================= */

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;
}

.section-heading__eyebrow {
    display: block;

    color:
        var(--alpha-light-muted);

    font-size: 8px;
    line-height: 1.2;
    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.section-heading h2 {
    margin-top: 2px;

    color:
        var(--alpha-text);

    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
}


/* =========================================================
   22. MARKET SECTION
   ========================================================= */

.market-section {
    width: 100%;

    padding:
        15px
        0
        0;

    border-top:
        1px
        solid
        var(--alpha-border);
}


/* =========================================================
   23. MARKET REFRESH
   ========================================================= */

.market-refresh-button {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    background: transparent;

    color:
        var(--alpha-muted);
}

.market-refresh-button:hover {
    background:
        var(--alpha-soft-bg);
}

.market-refresh-button svg {
    width: 17px;
    height: 17px;
}

.market-refresh-button.is-loading svg,
.market-refresh-button[aria-busy="true"] svg {
    animation:
        market-refresh-spin
        0.8s
        linear
        infinite;
}

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


/* =========================================================
   24. MARKET TABS
   ========================================================= */

.market-tabs {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 18px;

    overflow-x: auto;

    border-bottom:
        1px
        solid
        var(--alpha-border);

    scrollbar-width: none;
}

.market-tabs::-webkit-scrollbar {
    display: none;
}

.market-tab {
    position: relative;

    min-height: 37px;

    flex: 0 0 auto;

    padding:
        0
        1px;

    border: 0;

    background: transparent;

    color:
        var(--alpha-muted);

    font-size: 9px;
    line-height: 1;
    font-weight: 500;

    white-space: nowrap;
}

.market-tab.is-active,
.market-tab[aria-selected="true"] {
    color:
        var(--alpha-text);

    font-weight: 600;
}

.market-tab.is-active::after,
.market-tab[aria-selected="true"]::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 2px;

    border-radius:
        999px
        999px
        0
        0;

    background:
        var(--alpha-yellow);
}


/* =========================================================
   25. MARKET TABLE
   ========================================================= */

.market-table {
    width: 100%;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
}

.market-table__header {
    min-height: 34px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(82px, auto)
        minmax(54px, auto);

    align-items: center;

    gap: 8px;

    border-bottom:
        1px
        solid
        var(--alpha-border);

    color:
        var(--alpha-light-muted);

    font-size: 8px;
    font-weight: 500;
}

.market-table__header span:nth-child(2),
.market-table__header span:nth-child(3) {
    text-align: right;
}

.market-list {
    width: 100%;
}


/* =========================================================
   26. MARKET ROW
   ========================================================= */

.market-row {
    width: 100%;

    min-height: 62px;

    display: grid;

    grid-template-columns:
        18px
        32px
        minmax(0, 1fr)
        minmax(80px, auto)
        minmax(50px, auto);

    align-items: center;

    gap: 7px;

    padding:
        8px
        0;

    border-bottom:
        1px
        solid
        var(--alpha-border);

    background: transparent;
}

.market-row:active {
    opacity: 0.7;
}

.favorite-button {
    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    background: transparent;

    color:
        var(--alpha-light-muted);
}

.favorite-button svg {
    width: 14px;
    height: 14px;
}

.favorite-button.is-active,
.favorite-button[aria-pressed="true"] {
    color:
        var(--alpha-yellow);
}

.favorite-button.is-active path,
.favorite-button[aria-pressed="true"] path {
    fill:
        currentColor;
}

.market-row__coin {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        var(--alpha-yellow-soft);

    color:
        #806000;

    font-size: 8px;
    font-weight: 700;
}

.market-row__coin img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.market-row__asset {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 1px;
}

.market-row__symbol {
    overflow: hidden;

    color:
        var(--alpha-text);

    font-size: 10px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-row__name {
    overflow: hidden;

    color:
        var(--alpha-muted);

    font-size: 7px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-row__price {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    text-align: right;
}

.market-row__last-price {
    max-width: 120px;

    overflow: hidden;

    color:
        var(--alpha-text);

    font-size: 9px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}

.market-row__converted-price {
    max-width: 120px;

    overflow: hidden;

    color:
        var(--alpha-light-muted);

    font-size: 7px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-row__change {
    color:
        var(--alpha-muted);

    font-size: 8px;
    font-weight: 600;

    text-align: right;

    white-space: nowrap;
}

.market-row__change.is-positive,
.market-row__change--positive {
    color:
        var(--alpha-success);
}

.market-row__change.is-negative,
.market-row__change--negative {
    color:
        var(--alpha-danger);
}


/* =========================================================
   27. MARKET LOADING
   ========================================================= */

.market-loading {
    width: 100%;
}

.market-skeleton {
    min-height: 62px;

    display: grid;

    grid-template-columns:
        32px
        minmax(0, 1fr)
        68px
        42px;

    align-items: center;

    gap: 8px;

    padding:
        8px
        0;

    border-bottom:
        1px
        solid
        var(--alpha-border);
}

.market-skeleton span {
    display: block;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #F0F1F3 25%,
            #F7F8FA 50%,
            #F0F1F3 75%
        );

    background-size:
        200% 100%;

    animation:
        market-skeleton-shimmer
        1.2s
        linear
        infinite;
}

.market-skeleton__coin {
    width: 32px;
    height: 32px;

    border-radius: 50% !important;
}

.market-skeleton__name {
    width: 55%;
    height: 8px;
}

.market-skeleton__price {
    width: 64px;
    height: 8px;

    justify-self: end;
}

.market-skeleton__change {
    width: 40px;
    height: 8px;

    justify-self: end;
}

@keyframes market-skeleton-shimmer {
    to {
        background-position:
            -200% 0;
    }
}


/* =========================================================
   28. EMPTY MARKET
   ========================================================= */

.empty-market-state {
    min-height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        20px
        15px;

    border-bottom:
        1px
        solid
        var(--alpha-border);

    text-align: center;
}

.empty-market-state strong {
    color:
        var(--alpha-text);

    font-size: 10px;
    font-weight: 600;
}

.empty-market-state span {
    margin-top: 2px;

    color:
        var(--alpha-muted);

    font-size: 8px;
}


/* =========================================================
   29. VIEW MARKETS
   ========================================================= */

.view-markets-link {
    min-height: 38px;

    display: inline-flex;
    align-items: center;

    gap: 3px;

    margin-top: 6px;

    color:
        var(--alpha-muted);

    font-size: 9px;
    font-weight: 500;
}

.view-markets-link svg {
    width: 14px;
    height: 14px;
}


/* =========================================================
   30. SIDE PANELS
   ========================================================= */

.side-panel {
    position: fixed;

    inset: 0;

    z-index: 1100;

    visibility: hidden;
    pointer-events: none;
}

.side-panel.is-open,
.side-panel[aria-hidden="false"] {
    visibility: visible;
    pointer-events: auto;
}

.side-panel__backdrop {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    background:
        rgba(
            24,
            26,
            32,
            0.42
        );

    opacity: 0;

    transition:
        opacity 220ms ease;
}

.side-panel.is-open
.side-panel__backdrop,
.side-panel[aria-hidden="false"]
.side-panel__backdrop {
    opacity: 1;
}

.side-panel__content {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: min(
        88%,
        380px
    );

    overflow-y: auto;

    padding:
        calc(
            16px
            + var(--safe-top)
        )
        16px
        calc(
            20px
            + var(--safe-bottom)
        );

    background: #FFFFFF;

    box-shadow:
        18px
        0
        50px
        rgba(24, 26, 32, 0.14);

    transform:
        translateX(-104%);

    transition:
        transform 240ms ease;
}

.side-panel--right
.side-panel__content {
    right: 0;
    left: auto;

    transform:
        translateX(104%);
}

.side-panel.is-open
.side-panel__content,
.side-panel[aria-hidden="false"]
.side-panel__content {
    transform:
        translateX(0);
}


/* =========================================================
   31. PANEL HEADER
   ========================================================= */

.side-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    padding-bottom: 14px;

    border-bottom:
        1px
        solid
        var(--alpha-border);
}

.side-panel__eyebrow {
    display: block;

    color:
        var(--alpha-light-muted);

    font-size: 8px;
    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

.side-panel__header h2 {
    margin-top: 2px;

    color:
        var(--alpha-text);

    font-size: 17px;
    font-weight: 600;
}

.side-panel__close {
    width: 33px;
    height: 33px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    background:
        var(--alpha-soft-bg);

    color:
        var(--alpha-muted);
}

.side-panel__close svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   32. ACCOUNT SUMMARY
   ========================================================= */

.account-summary {
    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 9px;

    margin-top: 14px;

    padding-bottom: 14px;

    border-bottom:
        1px
        solid
        var(--alpha-border);
}

.account-summary__avatar {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    overflow: hidden;
}

.account-summary__avatar svg {
    width: 100%;
    height: 100%;
}

.account-summary__details {
    min-width: 0;
}

.account-summary__details strong {
    display: block;

    overflow: hidden;

    color:
        var(--alpha-text);

    font-size: 11px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-summary__details span {
    display: block;

    overflow: hidden;

    margin-top: 1px;

    color:
        var(--alpha-muted);

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-summary__status {
    color:
        var(--alpha-success);

    font-size: 8px;
    font-weight: 600;
}


/* =========================================================
   33. ACCOUNT NAV
   ========================================================= */

.account-navigation {
    display: grid;

    margin-top: 5px;
}

.account-navigation__item {
    min-height: 47px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        7px
        0;

    border-bottom:
        1px
        solid
        var(--alpha-border);

    background: transparent;

    color:
        var(--alpha-text);

    font-size: 10px;
    font-weight: 500;
}

.account-navigation__item > span:last-child {
    color:
        var(--alpha-light-muted);

    font-size: 17px;
}

.logout-button {
    width: 100%;
    min-height: 40px;

    margin-top: 16px;

    border:
        1px
        solid
        rgba(246, 70, 93, 0.22);

    border-radius: 8px;

    background: transparent;

    color:
        var(--alpha-danger);

    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   34. NOTIFICATIONS
   ========================================================= */

.notification-list {
    margin-top: 8px;
}

.notification-empty {
    min-height: 220px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 20px;

    text-align: center;
}

.notification-empty strong {
    color:
        var(--alpha-text);

    font-size: 10px;
    font-weight: 600;
}

.notification-empty span {
    max-width: 220px;

    margin-top: 3px;

    color:
        var(--alpha-muted);

    font-size: 8px;
}


/* =========================================================
   35. BOTTOM NAVIGATION
   FULL WIDTH
   NOT FLOATING
   ========================================================= */

.bottom-navigation {
    position: fixed;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 800;

    width: 100%;

    padding-bottom:
        var(--safe-bottom);

    border-top:
        1px
        solid
        var(--alpha-border);

    border-radius: 0;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    box-shadow:
        0 -5px 20px
        rgba(24, 26, 32, 0.04);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transform: none;
}

.bottom-navigation__inner {
    width: min(
        100%,
        var(--content-width)
    );

    min-height:
        var(--bottom-nav-height);

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    align-items: center;

    margin-inline: auto;
}

.bottom-navigation__item {
    position: relative;

    min-width: 0;
    min-height: 68px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    padding:
        5px
        2px;

    border-radius: 0;

    background: transparent;

    color:
        var(--alpha-muted);

    font-size: 9px;
    line-height: 1.15;
    font-weight: 550;

    text-align: center;
}

.bottom-navigation__item::before {
    content: none;
}

.bottom-navigation__item.is-active,
.bottom-navigation__item[aria-current="page"] {
    color:
        var(--alpha-text);

    font-weight: 650;
}

.bottom-navigation__item.is-active::before,
.bottom-navigation__item[aria-current="page"]::before {
    content: "";

    position: absolute;

    top: 2px;
    left: 50%;

    width: 28px;
    height: 3px;

    border-radius: 999px;

    background:
        var(--alpha-yellow);

    transform:
        translateX(-50%);
}

.bottom-navigation__icon {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;
}

.bottom-navigation__icon svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   36. LOADING
   ========================================================= */

.dashboard-loading {
    position: fixed;

    inset: 0;

    z-index: 2500;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 9px;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    color:
        var(--alpha-muted);

    font-size: 10px;
}

.dashboard-loading__spinner {
    width: 22px;
    height: 22px;

    border:
        2px
        solid
        var(--alpha-border);

    border-top-color:
        var(--alpha-yellow);

    border-radius: 50%;

    animation:
        dashboard-loading-spin
        0.8s
        linear
        infinite;
}

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


/* =========================================================
   37. NOSCRIPT
   ========================================================= */

.noscript-message {
    position: fixed;

    right: 12px;
    left: 12px;

    bottom:
        calc(
            var(--bottom-nav-height)
            + var(--safe-bottom)
            + 12px
        );

    z-index: 2600;

    padding:
        11px;

    border:
        1px
        solid
        rgba(246, 70, 93, 0.25);

    border-radius: 8px;

    background:
        #FFF0F2;

    color:
        var(--alpha-danger);

    font-size: 10px;
    font-weight: 600;

    text-align: center;
}


/* =========================================================
   38. SMALL MOBILE
   ========================================================= */

@media (max-width: 379px) {

    :root {
        --header-height: 58px;
        --bottom-nav-height: 72px;
    }

    .dashboard-container {
        width: min(
            calc(100% - 22px),
            var(--content-width)
        );
    }

    .dashboard-header__inner {
        grid-template-columns:
            35px
            minmax(0, 1fr)
            auto;

        gap: 6px;
    }

    .header-profile-button,
    .account-button {
        width: 35px;
        height: 35px;
    }

    .header-actions {
        gap: 0;
    }

    .header-action {
        width: 32px;
        height: 32px;
    }

    .header-action svg {
        width: 18px;
        height: 18px;
    }

    .header-search {
        min-height: 38px;
    }

    .header-search__input {
        height: 36px;

        font-size: 10px;
    }

    .dashboard-main {
        padding-top: 16px;
    }

    .balance-display__amount {
        font-size:
            clamp(
                34px,
                12vw,
                44px
            );
    }

    .balance-primary-button {
        min-height: 40px;

        font-size: 11px;
    }

    .quick-actions-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        row-gap: 7px;
    }

    .quick-action {
        min-height: 67px;
    }

    .quick-action__icon {
        width: 38px;
        height: 38px;
    }

    .quick-action__label {
        font-size: 8px;
    }

    .dashboard-slide {
        min-height: 86px;

        padding:
            13px
            14px;
    }

    .market-row {
        grid-template-columns:
            16px
            30px
            minmax(0, 1fr)
            minmax(66px, auto)
            minmax(44px, auto);

        gap: 5px;
    }

    .market-row__coin {
        width: 30px;
        height: 30px;
    }

    .market-row__symbol {
        font-size: 9px;
    }

    .market-row__name {
        font-size: 6.5px;
    }

    .market-row__last-price {
        max-width: 82px;

        font-size: 8px;
    }

    .market-row__change {
        font-size: 7.5px;
    }

    .bottom-navigation__item {
        font-size: 8px;
    }

    .bottom-navigation__icon {
        width: 21px;
        height: 21px;
    }
}


/* =========================================================
   39. MEDIUM MOBILE
   ========================================================= */

@media (min-width: 380px) and (max-width: 599px) {

    .quick-actions-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        row-gap: 8px;
    }
}


/* =========================================================
   40. TABLET
   ========================================================= */

@media (min-width: 600px) {

    :root {
        --header-height: 64px;
    }

    .dashboard-container {
        width: min(
            calc(100% - 40px),
            var(--content-width)
        );
    }

    .dashboard-main
    > .dashboard-container {
        max-width: 720px;
    }

    .dashboard-main {
        padding-top: 25px;
    }

    .quick-actions-grid {
        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );
    }

    .quick-action__icon {
        width: 42px;
        height: 42px;
    }

    .quick-action__label {
        font-size: 9px;
    }

    .dashboard-slide {
        min-height: 100px;
    }

    .market-row {
        min-height: 66px;
    }

    .bottom-navigation__item {
        font-size: 10px;
    }
}


/* =========================================================
   41. DESKTOP
   ========================================================= */

@media (min-width: 900px) {

    :root {
        --header-height: 68px;
    }

    .dashboard-main {
        padding-top: 30px;
    }

    .dashboard-main
    > .dashboard-container {
        max-width: 740px;
    }

    .balance-display__amount {
        font-size: 54px;
    }

    .quick-actions-section {
        padding-top: 16px;
    }

    .dashboard-slide {
        min-height: 104px;
    }

    .bottom-navigation {
        right: 0;
        bottom: 0;
        left: 0;

        max-width: none;

        border-radius: 0;

        transform: none;
    }
}


/* =========================================================
   42. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}


/* =========================================================
   43. PRINT
   ========================================================= */

@media print {

    .dashboard-header,
    .bottom-navigation,
    .quick-actions-section,
    .dashboard-slider,
    .side-panel,
    .dashboard-alert,
    .dashboard-loading,
    .market-refresh-button,
    .market-tabs,
    .balance-primary-actions {
        display: none !important;
    }

    body.dashboard-page {
        padding-bottom: 0;
    }

    .dashboard-main {
        padding: 0;
    }

    .dashboard-container {
        width: 100%;
        max-width: none;
    }
}