/* =========================================================
   ROVEN — ASSETS PAGE
   Exact path: public_html/assets.css

   This stylesheet belongs ONLY to:
   public_html/assets.html
   ========================================================= */


/* =========================================================
   1. PAGE VARIABLES
   ========================================================= */

.roven-assets-page {
    --assets-gold: #F0B90B;
    --assets-gold-hover: #DFAE00;
    --assets-gold-soft: #FFF8DB;

    --assets-white: #FFFFFF;
    --assets-bg: #FFFFFF;
    --assets-soft: #F7F8FA;
    --assets-muted-bg: #F2F4F7;

    --assets-text: #181A20;
    --assets-secondary: #667085;
    --assets-muted: #98A2B3;

    --assets-border: #E4E7EC;
    --assets-border-strong: #D0D5DD;

    --assets-success: #0ECB81;
    --assets-success-soft: #ECFDF3;

    --assets-danger: #F6465D;
    --assets-danger-soft: #FFF1F3;

    --assets-content-width: 1080px;

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

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

    --assets-bottom-nav-height: 72px;

    margin: 0;

    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;

    overflow-x: hidden;

    padding-bottom:
        calc(
            var(--assets-bottom-nav-height)
            + 14px
            + var(--assets-safe-bottom)
        );

    background:
        var(--assets-bg);

    color:
        var(--assets-text);

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

    line-height: 1.5;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


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

.roven-assets-page *,
.roven-assets-page *::before,
.roven-assets-page *::after {
    box-sizing:
        border-box;
}


.roven-assets-page a {
    color:
        inherit;

    text-decoration:
        none;

    -webkit-tap-highlight-color:
        transparent;
}


.roven-assets-page button,
.roven-assets-page input {
    font:
        inherit;
}


.roven-assets-page button {
    padding:
        0;

    border:
        0;

    appearance:
        none;

    -webkit-appearance:
        none;

    background:
        transparent;

    color:
        inherit;

    -webkit-tap-highlight-color:
        transparent;
}


.roven-assets-page img,
.roven-assets-page svg {
    display:
        block;

    max-width:
        100%;
}


.roven-assets-page [hidden] {
    display:
        none !important;
}


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

.roven-assets-page .skip-link {
    position:
        fixed;

    top:
        10px;

    left:
        10px;

    z-index:
        9999;

    transform:
        translateY(-180%);

    padding:
        9px
        12px;

    border-radius:
        8px;

    background:
        var(--assets-text);

    color:
        #FFFFFF;

    font-size:
        12px;

    font-weight:
        600;
}


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


/* =========================================================
   4. HEADER
   ========================================================= */

.roven-assets-header {
    position:
        sticky;

    top:
        0;

    z-index:
        100;

    width:
        100%;

    border-bottom:
        1px solid
        rgba(228, 231, 236, 0.78);

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

    backdrop-filter:
        blur(16px);

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


.roven-assets-header__inner {
    width:
        min(
            var(--assets-content-width),
            calc(100% - 32px)
        );

    min-height:
        calc(
            64px
            + var(--assets-safe-top)
        );

    margin-inline:
        auto;

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;
}


/* =========================================================
   5. HEADER LOGO
   ========================================================= */

.roven-assets-logo {
    display:
        inline-flex;

    align-items:
        center;

    min-width:
        0;
}


.roven-assets-logo img {
    display:
        block !important;

    width:
        auto !important;

    height:
        30px !important;

    max-width:
        160px !important;

    max-height:
        30px !important;

    object-fit:
        contain !important;
}


/* =========================================================
   6. HISTORY LINK
   Critical SVG size lock
   ========================================================= */

.roven-assets-history-link {
    flex:
        0 0 auto;

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        6px
        8px;

    border-radius:
        8px;

    color:
        var(--assets-secondary);

    font-size:
        11px;

    font-weight:
        500;

    transition:
        background 150ms ease,
        color 150ms ease;
}


.roven-assets-history-link:hover {
    background:
        var(--assets-soft);

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


.roven-assets-history-link svg {
    display:
        block !important;

    width:
        20px !important;

    height:
        20px !important;

    min-width:
        20px !important;

    min-height:
        20px !important;

    max-width:
        20px !important;

    max-height:
        20px !important;

    flex:
        0 0 20px !important;

    overflow:
        visible;
}


/* =========================================================
   7. MAIN
   ========================================================= */

.roven-assets-main {
    width:
        100%;

    min-width:
        0;
}


.roven-assets-container {
    width:
        min(
            var(--assets-content-width),
            calc(100% - 36px)
        );

    margin-inline:
        auto;

    min-width:
        0;
}


/* =========================================================
   8. ASSET NAVIGATION TABS
   ========================================================= */

.roven-assets-tabs {
    display:
        flex;

    align-items:
        center;

    gap:
        24px;

    min-height:
        49px;

    overflow-x:
        auto;

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

    scrollbar-width:
        none;
}


.roven-assets-tabs::-webkit-scrollbar {
    display:
        none;
}


.roven-assets-tab {
    position:
        relative;

    flex:
        0 0 auto;

    min-height:
        49px;

    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--assets-secondary);

    font-size:
        12px;

    font-weight:
        500;

    white-space:
        nowrap;
}


.roven-assets-tab.is-active,
.roven-assets-tab[aria-current="page"] {
    color:
        var(--assets-text);

    font-weight:
        600;
}


.roven-assets-tab.is-active::after,
.roven-assets-tab[aria-current="page"]::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -1px;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--assets-gold);
}


/* =========================================================
   9. PAGE ALERT
   ========================================================= */

.roven-assets-alert {
    margin-top:
        14px;

    padding:
        10px
        12px;

    border:
        1px solid
        #FECACA;

    border-left:
        3px solid
        var(--assets-danger);

    border-radius:
        8px;

    background:
        var(--assets-danger-soft);

    color:
        #B42318;

    font-size:
        10.5px;

    line-height:
        1.55;
}


/* =========================================================
   10. PORTFOLIO SUMMARY
   ========================================================= */

.roven-assets-summary {
    padding:
        27px
        0
        23px;
}


.roven-assets-summary__top {
    min-width:
        0;
}


.roven-assets-summary__label-row {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.roven-assets-summary__label {
    color:
        var(--assets-secondary);

    font-size:
        11px;

    font-weight:
        500;
}


/* =========================================================
   11. BALANCE VISIBILITY
   ========================================================= */

.roven-assets-balance-toggle {
    width:
        32px;

    height:
        32px;

    display:
        inline-grid;

    place-items:
        center;

    flex:
        0 0 32px;

    border-radius:
        8px;

    color:
        var(--assets-secondary);

    cursor:
        pointer;
}


.roven-assets-balance-toggle:hover {
    background:
        var(--assets-soft);
}


.roven-assets-balance-toggle svg,
.roven-assets-eye-show,
.roven-assets-eye-hide {
    display:
        block !important;

    width:
        19px !important;

    height:
        19px !important;

    min-width:
        19px !important;

    min-height:
        19px !important;

    max-width:
        19px !important;

    max-height:
        19px !important;
}


/* =========================================================
   12. TOTAL VALUE
   ========================================================= */

.roven-assets-total {
    display:
        flex;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        10px;
}


.roven-assets-total__value {
    min-width:
        0;

    color:
        var(--assets-text);

    font-size:
        clamp(
            34px,
            9vw,
            49px
        );

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        -1.15px;

    font-variant-numeric:
        tabular-nums;
}


.roven-assets-total__currency {
    color:
        var(--assets-secondary);

    font-size:
        12px;

    font-weight:
        500;
}


.roven-assets-estimated {
    margin-top:
        11px;

    color:
        var(--assets-secondary);

    font-size:
        12px;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   13. TODAY PNL
   ========================================================= */

.roven-assets-pnl {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        15px;

    font-size:
        12px;
}


.roven-assets-pnl__label {
    color:
        var(--assets-text);

    font-weight:
        500;
}


.roven-assets-pnl__values {
    display:
        inline-flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;
}


.roven-assets-pnl__amount,
.roven-assets-pnl__percent {
    color:
        var(--assets-secondary);

    font-variant-numeric:
        tabular-nums;
}


.roven-assets-pnl__amount.is-positive,
.roven-assets-pnl__percent.is-positive {
    color:
        var(--assets-success);
}


.roven-assets-pnl__amount.is-negative,
.roven-assets-pnl__percent.is-negative {
    color:
        var(--assets-danger);
}


/* =========================================================
   14. PRIMARY ACTIONS
   ========================================================= */

.roven-assets-actions {
    display:
        grid;

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

    gap:
        5px;

    padding:
        8px
        0
        22px;

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


.roven-assets-action {
    min-width:
        0;

    min-height:
        67px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        7px
        2px;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--assets-text);

    cursor:
        pointer;

    transition:
        background 150ms ease;
}


.roven-assets-action:hover {
    background:
        var(--assets-soft);
}


.roven-assets-action__icon {
    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    color:
        #806400;
}


.roven-assets-action__icon svg {
    display:
        block !important;

    width:
        21px !important;

    height:
        21px !important;

    min-width:
        21px !important;

    min-height:
        21px !important;

    max-width:
        21px !important;

    max-height:
        21px !important;
}


.roven-assets-action__label {
    max-width:
        100%;

    overflow:
        hidden;

    color:
        var(--assets-text);

    font-size:
        9px;

    line-height:
        1.2;

    font-weight:
        500;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* =========================================================
   15. SHARED ASSET SECTIONS
   ========================================================= */

.roven-assets-section {
    padding:
        23px
        0;

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


.roven-assets-section__head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        14px;
}


.roven-assets-section__head--list {
    align-items:
        center;
}


.roven-assets-section__title {
    margin:
        0;

    color:
        var(--assets-text);

    font-size:
        17px;

    line-height:
        1.25;

    font-weight:
        600;

    letter-spacing:
        -0.15px;
}


.roven-assets-section__description {
    max-width:
        620px;

    margin:
        5px
        0
        0;

    color:
        var(--assets-secondary);

    font-size:
        10px;

    line-height:
        1.55;
}


/* =========================================================
   16. ALLOCATION BAR
   ========================================================= */

.roven-assets-allocation-bar {
    width:
        100%;

    height:
        7px;

    display:
        flex;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        var(--assets-muted-bg);
}


.roven-assets-allocation-bar__available {
    display:
        block;

    height:
        100%;

    background:
        var(--assets-gold);

    transition:
        width 250ms ease;
}


.roven-assets-allocation-bar__locked {
    display:
        block;

    height:
        100%;

    background:
        var(--assets-secondary);

    transition:
        width 250ms ease;
}


.roven-assets-allocation-bar__futures {
    display:
        block;

    height:
        100%;

    background:
        var(--assets-success);

    transition:
        width 250ms ease;
}


/* =========================================================
   17. ALLOCATION ROWS
   ========================================================= */

.roven-assets-allocation-list {
    margin-top:
        14px;

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


.roven-assets-allocation-row {
    min-height:
        51px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        9px
        0;

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


.roven-assets-allocation-row:last-child {
    border-bottom:
        0;
}


.roven-assets-allocation-row__name {
    min-width:
        0;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--assets-secondary);

    font-size:
        11px;
}


.roven-assets-allocation-dot {
    width:
        8px;

    height:
        8px;

    flex:
        0 0 8px;

    border-radius:
        50%;
}


.roven-assets-allocation-dot--available {
    background:
        var(--assets-gold);
}


.roven-assets-allocation-dot--locked {
    background:
        var(--assets-secondary);
}


.roven-assets-allocation-dot--futures {
    background:
        var(--assets-success);
}


.roven-assets-allocation-row__value {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;

    text-align:
        right;
}


.roven-assets-allocation-row__value strong {
    color:
        var(--assets-text);

    font-size:
        11px;

    font-weight:
        600;

    font-variant-numeric:
        tabular-nums;
}


.roven-assets-allocation-row__value span {
    min-width:
        40px;

    color:
        var(--assets-secondary);

    font-size:
        9px;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   18. SEARCH BUTTON
   ========================================================= */

.roven-assets-search-toggle {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    color:
        var(--assets-secondary);

    cursor:
        pointer;
}


.roven-assets-search-toggle:hover {
    background:
        var(--assets-soft);
}


.roven-assets-search-toggle svg {
    display:
        block !important;

    width:
        20px !important;

    height:
        20px !important;

    min-width:
        20px !important;

    min-height:
        20px !important;

    max-width:
        20px !important;

    max-height:
        20px !important;
}


/* =========================================================
   19. SEARCH / FILTER TOOLBAR
   ========================================================= */

.roven-assets-toolbar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-bottom:
        12px;
}


.roven-assets-search {
    position:
        relative;

    flex:
        1 1 220px;

    min-width:
        0;
}


.roven-assets-search__icon {
    position:
        absolute;

    left:
        11px;

    top:
        50%;

    width:
        18px !important;

    height:
        18px !important;

    transform:
        translateY(-50%);

    color:
        var(--assets-muted);

    pointer-events:
        none;
}


.roven-assets-search__input {
    width:
        100%;

    min-height:
        42px;

    padding:
        9px
        11px
        9px
        38px;

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

    border-radius:
        8px;

    outline:
        none;

    background:
        var(--assets-soft);

    color:
        var(--assets-text);

    font-size:
        11px;

    transition:
        border-color 150ms ease,
        background 150ms ease;
}


.roven-assets-search__input::placeholder {
    color:
        var(--assets-muted);
}


.roven-assets-search__input:focus {
    border-color:
        var(--assets-gold);

    background:
        var(--assets-white);

    box-shadow:
        0
        0
        0
        3px
        rgba(240, 185, 11, 0.09);
}


/* =========================================================
   20. HIDE ZERO BALANCES
   ========================================================= */

.roven-assets-zero-toggle {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    flex:
        0 0 auto;

    cursor:
        pointer;

    user-select:
        none;
}


.roven-assets-zero-toggle input {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;
}


.roven-assets-zero-toggle__control {
    width:
        17px;

    height:
        17px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--assets-border-strong);

    border-radius:
        5px;

    background:
        var(--assets-white);
}


.roven-assets-zero-toggle input:checked +
.roven-assets-zero-toggle__control {
    border-color:
        var(--assets-gold);

    background:
        var(--assets-gold);
}


.roven-assets-zero-toggle input:checked +
.roven-assets-zero-toggle__control::after {
    content:
        "";

    width:
        8px;

    height:
        4px;

    border-left:
        1.5px solid
        var(--assets-text);

    border-bottom:
        1.5px solid
        var(--assets-text);

    transform:
        rotate(-45deg)
        translateY(-1px);
}


.roven-assets-zero-toggle__label {
    color:
        var(--assets-secondary);

    font-size:
        10px;

    white-space:
        nowrap;
}


/* =========================================================
   21. LOADING STATE
   ========================================================= */

.roven-assets-loading {
    padding:
        7px
        0
        17px;
}


.roven-assets-loading-row {
    min-height:
        61px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

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


.roven-assets-loading-circle {
    width:
        36px;

    height:
        36px;

    flex:
        0 0 36px;

    border-radius:
        50%;

    background:
        var(--assets-muted-bg);

    animation:
        rovenAssetsSkeletonPulse
        1.15s
        ease
        infinite;
}


.roven-assets-loading-lines {
    flex:
        1;

    display:
        grid;

    gap:
        7px;
}


.roven-assets-loading-lines span {
    display:
        block;

    height:
        8px;

    border-radius:
        999px;

    background:
        var(--assets-muted-bg);

    animation:
        rovenAssetsSkeletonPulse
        1.15s
        ease
        infinite;
}


.roven-assets-loading-lines span:first-child {
    width:
        43%;
}


.roven-assets-loading-lines span:last-child {
    width:
        27%;
}


.roven-assets-loading__text {
    display:
        block;

    margin-top:
        12px;

    color:
        var(--assets-muted);

    font-size:
        10px;
}


/* =========================================================
   22. ERROR / EMPTY STATES
   ========================================================= */

.roven-assets-state {
    padding:
        28px
        12px;

    text-align:
        center;
}


.roven-assets-state__icon {
    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    margin:
        0
        auto
        10px;

    border-radius:
        50%;

    background:
        var(--assets-soft);

    color:
        var(--assets-secondary);
}


.roven-assets-state__icon--error {
    background:
        var(--assets-danger-soft);

    color:
        var(--assets-danger);
}


.roven-assets-state__icon svg {
    display:
        block !important;

    width:
        22px !important;

    height:
        22px !important;

    max-width:
        22px !important;

    max-height:
        22px !important;
}


.roven-assets-state strong {
    display:
        block;

    color:
        var(--assets-text);

    font-size:
        12px;

    font-weight:
        600;
}


.roven-assets-state span:not(.roven-assets-state__icon) {
    display:
        block;

    max-width:
        420px;

    margin:
        4px
        auto
        0;

    color:
        var(--assets-secondary);

    font-size:
        10px;

    line-height:
        1.55;
}


.roven-assets-state__button {
    min-height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        12px;

    padding:
        7px
        12px;

    border:
        1px solid
        var(--assets-border-strong);

    border-radius:
        7px;

    background:
        var(--assets-white);

    color:
        var(--assets-text);

    font-size:
        10px;

    font-weight:
        600;

    cursor:
        pointer;
}


.roven-assets-state__button--primary {
    border-color:
        var(--assets-gold);

    background:
        var(--assets-gold);
}


/* =========================================================
   23. MOBILE ASSET LIST
   ========================================================= */

.roven-assets-mobile-list {
    border-top:
        1px solid
        var(--assets-border);
}


.roven-assets-mobile-row,
.roven-assets-mobile-item {
    min-height:
        69px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        12px;

    padding:
        10px
        0;

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


.roven-assets-mobile-row__main,
.roven-assets-mobile-item__main,
.roven-assets-asset-main {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.roven-assets-mobile-row__icon,
.roven-assets-mobile-item__icon,
.roven-assets-asset-icon {
    width:
        37px;

    height:
        37px;

    flex:
        0 0 37px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--assets-soft);

    color:
        var(--assets-text);

    font-size:
        9px;

    font-weight:
        600;
}


.roven-assets-mobile-row__symbol,
.roven-assets-mobile-item__symbol,
.roven-assets-asset-symbol {
    display:
        block;

    color:
        var(--assets-text);

    font-size:
        12px;

    font-weight:
        600;
}


.roven-assets-mobile-row__name,
.roven-assets-mobile-item__name,
.roven-assets-asset-name {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--assets-secondary);

    font-size:
        9px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.roven-assets-mobile-row__value,
.roven-assets-mobile-item__value,
.roven-assets-asset-value {
    min-width:
        0;

    text-align:
        right;
}


.roven-assets-mobile-row__value strong,
.roven-assets-mobile-item__value strong,
.roven-assets-asset-value strong {
    display:
        block;

    color:
        var(--assets-text);

    font-size:
        11px;

    font-weight:
        600;

    font-variant-numeric:
        tabular-nums;
}


.roven-assets-mobile-row__value span,
.roven-assets-mobile-item__value span,
.roven-assets-asset-value span {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--assets-secondary);

    font-size:
        9px;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   24. DESKTOP ASSETS TABLE
   ========================================================= */

.roven-assets-table-wrap {
    width:
        100%;

    overflow-x:
        auto;
}


.roven-assets-table {
    width:
        100%;

    min-width:
        720px;

    border-collapse:
        collapse;
}


.roven-assets-table thead {
    background:
        transparent;
}


.roven-assets-table th {
    padding:
        10px
        8px;

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

    color:
        var(--assets-secondary);

    font-size:
        9px;

    font-weight:
        500;

    text-align:
        right;

    white-space:
        nowrap;
}


.roven-assets-table th:first-child {
    text-align:
        left;
}


.roven-assets-table td {
    padding:
        12px
        8px;

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

    color:
        var(--assets-text);

    font-size:
        10px;

    text-align:
        right;

    font-variant-numeric:
        tabular-nums;
}


.roven-assets-table td:first-child {
    text-align:
        left;
}


/* =========================================================
   25. PAGE NOTE
   ========================================================= */

.roven-assets-note {
    display:
        grid;

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

    gap:
        9px;

    padding:
        18px
        0
        24px;

    color:
        var(--assets-secondary);
}


.roven-assets-note__icon {
    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        7px;

    background:
        var(--assets-soft);

    color:
        #806400;
}


.roven-assets-note__icon svg {
    display:
        block !important;

    width:
        18px !important;

    height:
        18px !important;

    max-width:
        18px !important;

    max-height:
        18px !important;
}


.roven-assets-note p {
    margin:
        0;

    color:
        var(--assets-secondary);

    font-size:
        9px;

    line-height:
        1.6;
}


/* =========================================================
   26. BOTTOM NAVIGATION
   ========================================================= */

.roven-assets-page .roven-bottom-nav {
    position:
        fixed;

    left:
        50%;

    bottom:
        0;

    z-index:
        200;

    width:
        min(
            100%,
            var(--assets-content-width)
        );

    min-height:
        calc(
            var(--assets-bottom-nav-height)
            + var(--assets-safe-bottom)
        );

    transform:
        translateX(-50%);

    display:
        grid;

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

    padding:
        6px
        5px
        max(
            6px,
            var(--assets-safe-bottom)
        );

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

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

    backdrop-filter:
        blur(18px);

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


.roven-assets-page .roven-bottom-nav__item {
    position:
        relative;

    min-width:
        0;

    min-height:
        55px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

    padding:
        4px
        2px;

    border-radius:
        9px;

    color:
        #737A86;

    font-size:
        9px;

    line-height:
        1.1;

    font-weight:
        500;

    text-align:
        center;
}


.roven-assets-page
.roven-bottom-nav__item.is-active {
    color:
        var(--assets-text);
}


.roven-assets-page
.roven-bottom-nav__item.is-active::before {
    content:
        "";

    position:
        absolute;

    top:
        2px;

    left:
        50%;

    width:
        18px;

    height:
        2px;

    transform:
        translateX(-50%);

    border-radius:
        999px;

    background:
        var(--assets-gold);
}


.roven-assets-page .roven-bottom-nav__icon {
    width:
        25px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;
}


.roven-assets-page
.roven-bottom-nav__icon svg {
    display:
        block !important;

    width:
        21px !important;

    height:
        21px !important;

    min-width:
        21px !important;

    min-height:
        21px !important;

    max-width:
        21px !important;

    max-height:
        21px !important;
}


.roven-assets-page .roven-bottom-nav__label {
    max-width:
        100%;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* =========================================================
   27. SENSITIVE VALUE DISPLAY
   ========================================================= */

.roven-assets-page
[data-sensitive-balance] {
    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   28. FOCUS STATES
   ========================================================= */

.roven-assets-page
button:focus-visible,
.roven-assets-page
a:focus-visible,
.roven-assets-page
input:focus-visible {
    outline:
        2px solid
        var(--assets-gold);

    outline-offset:
        2px;
}


/* =========================================================
   29. SMALL MOBILE
   ========================================================= */

@media (max-width: 379px) {

    .roven-assets-header__inner {
        width:
            calc(
                100% - 24px
            );
    }


    .roven-assets-container {
        width:
            calc(
                100% - 28px
            );
    }


    .roven-assets-logo img {
        height:
            28px !important;

        max-height:
            28px !important;
    }


    .roven-assets-history-link {
        width:
            38px;

        height:
            38px;

        min-height:
            38px;

        padding:
            0;
    }


    .roven-assets-history-link span {
        display:
            none;
    }


    .roven-assets-total__value {
        font-size:
            33px;
    }


    .roven-assets-actions {
        gap:
            2px;
    }


    .roven-assets-action__label {
        font-size:
            8px;
    }


    .roven-assets-toolbar {
        align-items:
            flex-start;
    }


    .roven-assets-zero-toggle__label {
        font-size:
            9px;
    }


    .roven-assets-page
    .roven-bottom-nav__item {
        font-size:
            8px;
    }

}


/* =========================================================
   30. TABLET
   ========================================================= */

@media (min-width: 640px) {

    .roven-assets-header__inner {
        width:
            min(
                var(--assets-content-width),
                calc(100% - 52px)
            );
    }


    .roven-assets-container {
        width:
            min(
                var(--assets-content-width),
                calc(100% - 60px)
            );
    }


    .roven-assets-summary {
        padding-top:
            32px;

        padding-bottom:
            28px;
    }


    .roven-assets-total__value {
        font-size:
            48px;
    }


    .roven-assets-action__label {
        font-size:
            10px;
    }


    .roven-assets-section {
        padding-top:
            27px;

        padding-bottom:
            27px;
    }


    .roven-assets-section__title {
        font-size:
            18px;
    }

}


/* =========================================================
   31. MOBILE / DESKTOP LIST SWITCHING
   ========================================================= */

@media (max-width: 959px) {

    .roven-assets-table-wrap {
        display:
            none !important;
    }


    .roven-assets-mobile-list:not([hidden]) {
        display:
            block !important;
    }

}


@media (min-width: 960px) {

    .roven-assets-mobile-list {
        display:
            none !important;
    }


    .roven-assets-table-wrap:not([hidden]) {
        display:
            block !important;
    }


    .roven-assets-header__inner,
    .roven-assets-container {
        width:
            min(
                var(--assets-content-width),
                calc(100% - 80px)
            );
    }


    .roven-assets-summary {
        padding-top:
            37px;
    }


    .roven-assets-actions {
        max-width:
            460px;

        grid-template-columns:
            repeat(
                4,
                100px
            );

        justify-content:
            start;

        gap:
            10px;
    }


    .roven-assets-action {
        min-height:
            73px;
    }

}


/* =========================================================
   32. REDUCED MOTION
   ========================================================= */

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

    .roven-assets-page *,
    .roven-assets-page *::before,
    .roven-assets-page *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}


/* =========================================================
   33. ANIMATION
   ========================================================= */

@keyframes rovenAssetsSkeletonPulse {

    0%,
    100% {
        opacity:
            0.45;
    }

    50% {
        opacity:
            1;
    }

}