html, body{
    max-width:100%;
    overflow-x:hidden;
}

body{
    margin:0;
    font-family:
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at top,
            #123423,
            var(--cc-bg-1, #04150d)
        );

    color:#fff;

    display:flex;
}

/* api.js's showDemoBanner() appends a <footer> (the disclosure/
   whitepaper-link line) as body's LAST child on every page - on a
   >900px viewport body is a row flex container (.sidebar + .main),
   and with no flex-wrap that footer became a THIRD flex column
   competing for horizontal space right alongside them: real content
   (the disclosure text) gave it a genuine intrinsic width, so it
   claimed several hundred px of the row and squeezed .main down to a
   sliver - collapsing .wallet-greeting/.network-live (both have
   overflow-wrap:anywhere) to single-character-wide lines, wrapping
   every letter onto its own line. flex-wrap here plus flex-basis:100%
   on the footer forces it onto its own full-width line below
   sidebar+main instead of fighting them for row space - inert on the
   <=900px column layout below (flex-wrap only affects cross-axis
   overflow there, and body's height is already auto/unconstrained),
   so this is scoped by media query anyway to avoid any doubt. */
@media (min-width:901px){
    body{
        flex-wrap:wrap;
    }

    body > footer{
        flex-basis:100%;
        width:100%;
    }
}

.sidebar{
    /* Explicitly reset - style.css (loaded before this file on every
       page, including this one) defines its own .sidebar with
       position:fixed. Equal-specificity cascade rules only let this
       file win on properties it actually sets, so without these two
       lines the fixed positioning leaks straight through and takes
       the sidebar out of this file's flex layout entirely - no
       amount of width/flex-direction changes below can fix that.

       height is the same kind of leak, just easier to miss: style.css
       also sets an explicit height:100vh (not min-height), which is a
       separate property from this rule's min-height:100vh below and
       is never touched by it - so it kept capping the box at exactly
       one viewport tall no matter how many sidebar buttons this page
       actually has. With overflow otherwise left at its default
       (visible), everything past that cap painted straight over the
       main content next to it instead of growing the box or
       scrolling - the overlap that was breaking clicks on lower
       sidebar buttons and whatever main-content sat behind them. */
    position:static;
    height:auto;

    width:260px;

    min-height:100vh;

    background:
        rgba(
            10,
            15,
            30,
            .95
        );

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    padding:20px;

    box-sizing:border-box;
}

.sidebar button{
    width:100%;

    margin-bottom:10px;

    padding:12px;

    border:none;

    border-radius:12px;

    background:
        rgba(
            255,
            255,
            255,
            .05
        );

    color:white;

    cursor:pointer;

    transition:.3s;
}

.sidebar button:hover{
    transform:
        scale(1.03);

    box-shadow:
        0 0 20px
        rgba(
            0,
            255,
            255,
            .4
        );
}

/* Earning-services disclosure (Moderation, Validator Dashboard) -
   styled to read as one more sidebar item when collapsed, with its
   two buttons appearing indented underneath once opened. */
.sidebar-collapsible{
    margin-bottom:10px;
}

.sidebar-collapsible summary{
    width:100%;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,.05);
    color:white;
    cursor:pointer;
    list-style:none;
    box-sizing:border-box;
}

.sidebar-collapsible summary::-webkit-details-marker{
    display:none;
}

.sidebar-collapsible summary::after{
    content:"▾";
    float:right;
    opacity:.6;
}

.sidebar-collapsible[open] summary::after{
    content:"▴";
}

.sidebar-collapsible summary:hover{
    box-shadow:0 0 20px rgba(0,255,255,.4);
}

.sidebar-collapsible button{
    width:calc(100% - 14px);
    margin-left:14px;
    margin-top:8px;
}

.main{
    /* Same leak as .sidebar above - style.css's .main sets a
       permanent margin-left:300px meant for its fixed-sidebar layout,
       which this file's flexbox layout doesn't need and never
       overrides otherwise. */
    margin-left:0;

    flex:1;

    min-width:0;

    /* Explicit width, not just flex:1 - below the 900px breakpoint,
       body switches to flex-direction:column (see the @media block),
       which makes width a cross-axis/stretch property instead of a
       flex-grow/shrink one. align-items:normal (stretch) still lets a
       block child grow past the container when its own descendants
       contain non-wrapping content (e.g. .asset-row's balance/price
       spans) - width:100% pins it to the actual available width
       regardless of that content, which is what makes the shrinking
       ellipsis/wrap rules on children (like .asset-address) actually
       activate instead of silently pushing content off-screen. */
    width:100%;

    padding:30px;

    box-sizing:border-box;
}

.main p, .main pre{
    overflow-wrap:anywhere;
}

.hero-card{
    background:
        rgba(
            255,
            255,
            255,
            .05
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius:20px;

    padding:25px;

    margin-bottom:30px;

    backdrop-filter:
        blur(20px);
}

.grid{
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                320px,
                1fr
            )
        );

    gap:20px;

    margin-bottom:20px;
}

.card{
    background:
        rgba(
            255,
            255,
            255,
            .05
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius:20px;

    padding:20px;

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 0 30px
        rgba(
            0,
            255,
            255,
            .08
        );

    transition:.3s;
}

.card:hover{
    transform:
        translateY(-8px);

    box-shadow:
        0 0 40px
        rgba(
            0,
            255,
            255,
            .25
        );
}

.card button{
    margin-top:10px;

    margin-right:10px;

    padding:10px 18px;

    border:none;

    border-radius:10px;

    background:
        var(--cc-accent-gold, #c9a227);

    color:white;

    cursor:pointer;

    transition:.3s;
}

.card button:hover{
    transform:
        scale(1.05);
}

/* --- Wallet hero: the self-custody wallet's own balance/address/
   actions, front and center - the first thing this dashboard shows,
   ahead of any network/admin stats. --- */
.wallet-hero{
    background:
        linear-gradient(
            160deg,
            rgba(0,255,149,.10),
            rgba(255,255,255,.04)
        );

    border:
        1px solid
        rgba(0,255,149,.25);

    border-radius:24px;

    padding:28px;

    margin-bottom:20px;

    backdrop-filter:
        blur(20px);
}

.wallet-hero-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
}

.wallet-greeting{
    font-size:15px;
    opacity:.85;
    margin:0 0 4px;
}

.wallet-address-chip{
    display:flex;
    align-items:center;
    gap:8px;
    max-width:220px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-family:monospace;
    font-size:12px;
    cursor:pointer;
    transition:.2s;
}

.wallet-address-chip:hover{
    background:rgba(255,255,255,.12);
}

.wallet-address-chip span:first-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.wallet-address-chip-icon{
    flex-shrink:0;
    opacity:.8;
}

.wallet-balance-block{
    margin:26px 0 22px;
}

.wallet-balance-label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
    opacity:.6;
}

.wallet-balance-amount{
    font-size:44px;
    font-weight:700;
    line-height:1.2;
    margin-top:2px;
    background:
        linear-gradient(
            90deg,
            #00ff95,
            var(--cc-accent-gold-soft, #e0c674)
        );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.wallet-custody-note{
    opacity:.55;
    font-size:11px;
    margin-top:8px;
    max-width:520px;
}

.quick-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.quick-actions button{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:76px;
    padding:12px 10px;
    border:none;
    border-radius:16px;
    background:rgba(255,255,255,.07);
    color:#fff;
    cursor:pointer;
    font-size:12px;
    transition:.2s;
}

.quick-actions button:hover{
    background:rgba(0,255,149,.18);
    transform:translateY(-2px);
}

.quick-actions .qa-icon{
    font-size:18px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

/* --- Asset list: one row per token, wallet-app style (icon badge +
   symbol/name on the left, balance/price stacked on the right),
   instead of a dense paragraph-per-token layout. --- */
.asset-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:14px 4px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.asset-row:last-of-type{
    border-bottom:none;
}

.asset-row-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.asset-icon{
    flex:0 0 auto;
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.asset-icon svg{
    display:block;
}

.asset-info{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.asset-symbol{
    font-weight:800;
    font-size:16px;
    letter-spacing:0.2px;
}

.asset-name{
    font-size:12px;
    opacity:.6;
}

.asset-address{
    font-family:monospace;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:220px;
}

.asset-values{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:3px;
}

.asset-balance{
    font-weight:700;
    font-size:15px;
    white-space:nowrap;
}

.asset-price{
    font-size:12px;
    opacity:.6;
    white-space:nowrap;
}

.network-live{
    color:
        #00ff99;

    animation:
        pulse 2s infinite;
}

@keyframes pulse{
    0%{
        opacity:.4;
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:.4;
    }
}

pre{
    white-space:
        pre-wrap;

    word-break:
        break-word;

    color:
        var(--cc-accent-gold-soft, #e0c674);

    font-size:
        12px;
}

/* Placed last on purpose - CSS rules of equal specificity are
   resolved by source order, so a media query positioned earlier than
   the base .sidebar/.main rules above would lose to them even when it
   matches. Keeping all responsive overrides here, after everything
   else, is what actually makes them win on narrow screens. */
@media (max-width: 900px){
    body{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        min-height:0;
        /* Without this, the ~20-button nav list renders first in the
           stacked column and pushes the wallet hero (balance,
           Send/Receive/Stake/Swap/Faucet) an entire nav-menu's height
           down the page - order alone (not touching position, which
           is what caused the earlier fixed-sidebar click-overlap bug
           this file already documents above) puts it back after the
           wallet content without reintroducing that. */
        order:2;
    }

    .main{
        order:1;
    }
}

@keyframes panelFloatIn{
    from{
        opacity:0;
        transform: translateY(22px);
    }
    to{
        opacity:1;
        transform: translateY(0);
    }
}

/* Mobile off-canvas drawer + 5-tab bottom bar - js/mobile-nav.js
   toggles body.mobile-nav on/off at the same 900px breakpoint used
   above, and body.mobile-drawer-open while the drawer is slid out.
   Replaces the old dot/swipe carousel: instead of a sequence of
   swipeable panels, .mobile-page wrappers are shown one at a time by
   an explicit tab-bar click, reusing the same panelFloatIn transition.
   js/outernet.js's field IDs (#balance, #blocks, etc.) are untouched,
   so they keep populating regardless of which .mobile-page is shown. */

.mobile-topbar{
    display:none;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    position:sticky;
    top:0;
    z-index:800;
    background:rgba(10,15,30,.95);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

body.mobile-nav .mobile-topbar{
    display:flex;
}

.hamburger-btn{
    background:none;
    border:none;
    color:inherit;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    padding:4px 8px;
}

.mobile-topbar-brand{
    font-weight:600;
}

.drawer-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:900;
}

body.mobile-nav.mobile-drawer-open .drawer-backdrop{
    display:block;
}

body.mobile-nav .sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:80vw;
    max-width:320px;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .25s ease;
    overflow-y:auto;
    box-shadow:4px 0 24px rgba(0,0,0,.35);
}

body.mobile-nav.mobile-drawer-open .sidebar{
    transform:translateX(0);
}

body.mobile-nav .sidebar-item-hide-mobile{
    display:none;
}

.mobile-tabbar{
    display:none;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:700;
    justify-content:space-around;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:rgba(10,15,30,.95);
    backdrop-filter:blur(20px);
    border-top:1px solid rgba(255,255,255,.08);
}

body.mobile-nav .mobile-tabbar{
    display:flex;
}

.tabbar-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    background:none;
    border:none;
    color:inherit;
    opacity:.6;
    font-size:10px;
    padding:4px 2px;
    cursor:pointer;
}

.tabbar-btn.active{
    opacity:1;
    color:var(--cc-accent-gold, #c9a227);
}

.tabbar-icon{
    font-size:20px;
}

.engage-form-row{
    display:flex;
    gap:10px;
    margin-bottom:15px;
    flex-wrap:wrap;
}

.engage-form-row input,
.engage-form-row select{
    flex:1;
    min-width:140px;
    padding:10px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.05);
    color:inherit;
    box-sizing:border-box;
}

.explorer-empty{
    opacity:0.6;
    padding:10px 0;
}

.modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    align-items:center;
    justify-content:center;
    z-index:10000;
}

.modal-box{
    background:var(--cc-bg-2, #082616);
    color:#fff;
    border-radius:16px;
    padding:20px;
    width:min(500px, 90vw);
    max-height:80vh;
    display:flex;
    flex-direction:column;
}

.chat-messages{
    flex:1;
    overflow-y:auto;
    max-height:300px;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    padding:10px;
    margin:10px 0;
    font-size:13px;
}

.chat-message{
    margin-bottom:8px;
}

.chat-message .sender{
    opacity:0.6;
    font-size:11px;
}

.kyc-field{
    margin-bottom:10px;
}

.kyc-field label{
    display:block;
    font-size:12px;
    opacity:0.7;
    margin-bottom:4px;
}

.kyc-field input[type="text"], .kyc-field input[type="date"]{
    width:100%;
    padding:10px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.05);
    color:inherit;
    box-sizing:border-box;
}

body.mobile-nav .main{
    padding-bottom:76px;
}

/* Engage and Settings are net-new mobile-only tabs (their content
   didn't exist inline on the desktop dashboard before this) - hidden
   unconditionally so desktop, which never gets body.mobile-nav,
   doesn't grow new sections. Home/Transactions/Activity wrap content
   that already rendered inline on desktop, so they get no such
   override and keep flowing normally there. */
.mobile-page[data-tab="engage"],
.mobile-page[data-tab="settings"]{
    display:none;
}

body.mobile-nav .mobile-page{
    display:none;
}

body.mobile-nav .mobile-page.mobile-page-active{
    display:block;
    animation: panelFloatIn .35s ease both;
}

/* --- Light theme, scoped to body.outernet-light (outernet.html only -
   deliberately NOT applied to every page that links this stylesheet,
   since wallet.html/assets.html/profile.html/network.html reuse these
   same .card/.wallet-hero/.asset-* classes against the site's default
   dark body and shouldn't change just because this file changed).
   Same visual language as css/pool-light.css (the other deliberately
   light corner of the site) - #f7f8fb background, white cards, same
   border/shadow/radius values - so a user going Marketplace -> P2P
   wording pass -> here doesn't feel like two different apps stitched
   together. Only overrides what actually needs to flip for light-on-
   white readability (backgrounds, borders, text color/opacity); the
   sizing/layout rules above are untouched and still apply. */

body.outernet-light{
    background:#eef8f1;
    color:#111827;
}

/* Mainnet-only override, layered after the rule above so it wins the
   cascade for mainnet specifically (same class, later selector, equal
   specificity) - flattens the mint tint to plain white so mainnet
   reads more mature/"real" than testnet's mild color. Testnet is
   completely unaffected (no outernet-mainnet class there). Applied via
   a small per-page script right after network-config.js loads (see
   outernet.html/wallet.html/assets.html/asset.html) rather than a CSS
   media query, since the light-vs-dark theme and the mainnet-vs-
   testnet network are two independent axes that only JS can tell
   apart. */
body.outernet-light.outernet-mainnet{
    background:#ffffff;
}

body.outernet-light .sidebar{
    background:#ffffff;
    border-right:1px solid #e5e7eb;
}

body.outernet-light .sidebar button,
body.outernet-light .sidebar-collapsible summary{
    background:#f3f4f6;
    color:#111827;
}

body.outernet-light .sidebar button:hover,
body.outernet-light .sidebar-collapsible summary:hover{
    box-shadow:none;
    background:#e5e7eb;
    transform:none;
}

body.outernet-light .brand h1,
body.outernet-light .brand p{
    color:#111827;
}

body.outernet-light .hero-card,
body.outernet-light .card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    backdrop-filter:none;
}

/* .dash-nav-tile (theme.css) is deliberately dark-theme-only by
   default - translucent white-on-white otherwise, invisible on a
   light page. This is the light-theme variant, currently only reached
   by explorer.html (the only dash-nav-grid page using
   body.outernet-light) - alternating blue/green tile borders, per the
   explicit "white background, blue and green outlined boxes" request. */
body.outernet-light .dash-nav-tile{
    background:#ffffff;
    border:1px solid #e5e7eb;
    color:#111827;
}
body.outernet-light .dash-nav-tile:hover{
    background:#f9fafb;
}
body.outernet-light .dash-nav-tile:nth-of-type(odd){
    border-color:#1d4ed8;
}
body.outernet-light .dash-nav-tile:nth-of-type(even){
    border-color:#059669;
}
body.outernet-light .dash-nav-tile p{
    opacity:0.6;
}

body.outernet-light .card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(16,24,40,.08);
}

body.outernet-light .card h2,
body.outernet-light .card h3{
    color:#111827;
}

body.outernet-light .wallet-hero{
    background:linear-gradient(160deg,#eff6ff,#ffffff);
    border:1px solid #bfdbfe;
    backdrop-filter:none;
}

body.outernet-light .wallet-greeting{
    color:#111827;
    opacity:.85;
}

body.outernet-light .wallet-address-chip{
    border:1px solid #d1d5db;
    background:#f9fafb;
    color:#111827;
}

body.outernet-light .wallet-address-chip:hover{
    background:#f3f4f6;
}

body.outernet-light .wallet-balance-amount{
    background:linear-gradient(90deg,#1d4ed8,#059669);
    -webkit-background-clip:text;
    background-clip:text;
}

body.outernet-light .wallet-custody-note{
    color:#6b7280;
    opacity:1;
}

body.outernet-light .quick-actions button{
    background:#f3f4f6;
    color:#111827;
}

body.outernet-light .quick-actions button:hover{
    background:#dbeafe;
}

body.outernet-light .quick-actions .qa-icon{
    background:#ffffff;
    border:1px solid #e5e7eb;
}

body.outernet-light .asset-row{
    border-bottom:1px solid #f0f1f4;
}

body.outernet-light .asset-name,
body.outernet-light .asset-price{
    color:#6b7280;
    opacity:1;
}

body.outernet-light pre{
    color:#0f766e;
}

body.outernet-light .mobile-topbar,
body.outernet-light .mobile-tabbar{
    background:#ffffff;
    border-color:#e5e7eb;
}

body.outernet-light .tabbar-btn.active{
    color:var(--cc-accent-gold, #c9a227);
}

body.outernet-light .modal-box{
    background:#ffffff;
    color:#111827;
}

body.outernet-light .engage-form-row input,
body.outernet-light .engage-form-row select,
body.outernet-light .kyc-field input[type="text"],
body.outernet-light .kyc-field input[type="date"]{
    border:1px solid #e5e7eb;
    background:#f9fafb;
    color:#111827;
}

/* .copy-icon is defined in css/style.css with a white-on-dark look
   (color:white) - invisible against this light background, so it
   needs its own override here rather than relying on the shared rule. */
body.outernet-light .copy-icon{
    background:rgba(0,0,0,0.05);
    border:1px solid rgba(0,0,0,0.12);
    color:#111827;
}
body.outernet-light .copy-icon:hover{
    background:rgba(0,0,0,0.1);
}

/* --- Lending marketplace (borrow.html/lend.html) ------------------- */

.stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:14px;
    margin-bottom:20px;
}

.stat-tile{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:14px 16px;
}

.stat-tile-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    opacity:.6;
}

.stat-tile-value{
    font-size:22px;
    font-weight:700;
    margin-top:4px;
}

.badge-pill{
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.health-healthy{ background:rgba(0,255,149,.15); color:var(--cc-accent-1, #0f9d58); }
.health-safe{ background:rgba(201,162,39,.15); color:var(--cc-accent-gold, #c9a227); }
.health-warning{ background:rgba(255,176,32,.18); color:#ffb020; }
.health-liquidation{ background:rgba(255,90,90,.18); color:#ff5a5a; }
.health-unknown{ background:rgba(255,255,255,.08); color:#999; }

.risk-verylow{ background:rgba(0,255,149,.15); color:var(--cc-accent-1, #0f9d58); }
.risk-low{ background:rgba(224,198,116,.15); color:var(--cc-accent-gold-soft, #e0c674); }
.risk-medium{ background:rgba(255,176,32,.18); color:#ffb020; }
.risk-high{ background:rgba(255,140,60,.18); color:#ff8c3c; }
.risk-veryhigh{ background:rgba(255,90,90,.18); color:#ff5a5a; }

.lend-table-wrap{
    overflow-x:auto;
}

.lend-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.lend-table th{
    text-align:left;
    padding:8px 10px;
    opacity:.65;
    font-weight:600;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.4px;
    cursor:pointer;
    white-space:nowrap;
}

.lend-table th:hover{
    opacity:1;
}

.lend-table td{
    padding:10px;
    border-top:1px solid rgba(255,255,255,.08);
    white-space:nowrap;
}

.lend-table tr.no-rows td{
    opacity:.5;
    white-space:normal;
}

.bp-score{
    font-size:44px;
    font-weight:700;
    line-height:1.1;
    background:linear-gradient(90deg,var(--cc-accent-1, #0f9d58),var(--cc-accent-gold-soft, #e0c674));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.bp-factor-row{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    padding:4px 0;
    opacity:.85;
}

.bp-factor-row.future{
    opacity:.4;
}

.loan-timeline{
    display:flex;
    align-items:center;
    gap:4px;
    margin:10px 0;
    font-size:11px;
}

.timeline-step{
    flex:1;
    text-align:center;
    padding:6px 4px;
    border-radius:8px;
    background:rgba(255,255,255,.05);
    opacity:.5;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.timeline-step.done{
    background:rgba(0,255,149,.15);
    color:var(--cc-accent-1, #0f9d58);
    opacity:1;
}

.timeline-step.active{
    background:rgba(201,162,39,.2);
    color:var(--cc-accent-gold, #c9a227);
    opacity:1;
    font-weight:700;
}

.timeline-step.danger{
    background:rgba(255,90,90,.2);
    color:#ff5a5a;
    opacity:1;
    font-weight:700;
}

body.outernet-light .stat-tile{
    background:#ffffff;
    border:1px solid #e5e7eb;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
}

body.outernet-light .stat-tile-value{
    color:#111827;
}

body.outernet-light .bp-score{
    background:linear-gradient(90deg,#1d4ed8,#059669);
    -webkit-background-clip:text;
    background-clip:text;
}

body.outernet-light .lend-table th{
    color:#6b7280;
    opacity:1;
}

body.outernet-light .lend-table td{
    border-top:1px solid #f0f1f4;
    color:#111827;
}

body.outernet-light .timeline-step{
    background:#f3f4f6;
    color:#6b7280;
}