/* =========================================================
   ALBUKHR TESTNET — INVESTOR DASHBOARD
   File: css/testnet-investor.css

   Based on:
   ALBUKHR Mainnet Investor Dashboard V4 design language

   Scope:
   - Testnet Investor page only
   - Premium ALBUKHR green/white UI
   - Testnet read-only interface
   - Mobile-first
   - Project logo support
   - No Mainnet transaction actions
   - Dock Navigation intentionally NOT styled here
========================================================= */


/* =========================================================
   BASE
========================================================= */

:root{
    --albukhr-green:#0f7a3d;
    --albukhr-green-dark:#06692f;
    --albukhr-green-mid:#0d8c43;
    --albukhr-green-light:#18a558;
    --albukhr-green-soft:#eef8f2;

    --testnet-green:#0f7a3d;

    --page-bg:#f4f7f6;
    --surface:#ffffff;
    --surface-soft:#f8fbf9;

    --text:#111;
    --text-dark:#17231d;
    --text-muted:#666;
    --text-light:#888;

    --border:#e5ebe8;
    --border-soft:#edf1ef;

    --success:#159447;
    --success-bg:#eef8ee;

    --warning:#9a7200;
    --warning-bg:#fff8df;
    --warning-border:#f0df9f;

    --locked:#69736e;
    --locked-bg:#f4f6f5;
    --locked-border:#dfe5e2;

    --danger:#a33d3d;
    --danger-bg:#fff1f1;
    --danger-border:#edcccc;

    --shadow-sm:
        0 8px 22px rgba(0,0,0,.05);

    --shadow-md:
        0 12px 30px rgba(0,0,0,.07);

    --shadow-green:
        0 18px 45px rgba(15,122,61,.28);

    --radius-card:22px;
    --radius-large:24px;
}

/* =========================================================
   ALBUKHR TESTNET INVESTOR HEADER
   Matches Testnet index.html header UI
========================================================= */

.testnet-header{
    position:sticky;
    top:0;
    z-index:1000;

    width:100%;
    min-height:60px;

    padding:0 16px;

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

    gap:12px;

    background:#0f7a3d;
    color:#ffffff;

    box-shadow:
        0 3px 14px rgba(0,0,0,.10);
}


/* =========================================================
   HEADER BRAND
========================================================= */

.header-brand{
    min-width:0;

    display:flex;
    align-items:center;

    gap:9px;
}


.brand{
    display:inline-flex;
    align-items:center;

    min-width:0;

    color:#ffffff;

    text-decoration:none;

    font-size:17px;
    font-weight:800;

    line-height:1;

    letter-spacing:.5px;

    white-space:nowrap;

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


/* =========================================================
   HEADER ACTIONS
========================================================= */

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

    gap:9px;

    min-width:0;
}


/* =========================================================
   TESTNET BADGE
========================================================= */

.network-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:28px;

    padding:5px 10px;

    border:
        1px solid
        rgba(240,173,0,.72);

    border-radius:999px;

    background:
        rgba(240,173,0,.16);

    color:#ffffff;

    text-decoration:none;

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

    line-height:1;

    letter-spacing:.7px;

    white-space:nowrap;

    cursor:pointer;

    transition:
        transform .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}


.network-badge:hover{
    background:
        rgba(240,173,0,.22);

    border-color:
        rgba(240,173,0,.9);
}


.network-badge:active{
    transform:scale(.97);
}


.network-badge:focus-visible{
    outline:
        2px solid
        rgba(255,255,255,.95);

    outline-offset:3px;
}


/* =========================================================
   TEST ENVIRONMENT STATUS
========================================================= */

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

    gap:6px;

    color:#ffffff;

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

    line-height:1;

    letter-spacing:.5px;

    white-space:nowrap;
}


.status-dot{
    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:#f0ad00;

    box-shadow:
        0 0 0 3px
        rgba(240,173,0,.16);
}


/* =========================================================
   SMALL DEVICES
========================================================= */

@media (max-width:430px){

    .testnet-header{
        min-height:60px;

        padding:
            0
            16px;
    }


    .header-status{
        display:none;
    }


    .network-badge{
        min-height:25px;

        padding:
            4px
            9px;

        font-size:9px;
    }


    .brand{
        font-size:17px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width:360px){

    .testnet-header{
        padding:
            0
            13px;
    }


    .network-badge{
        padding:
            4px
            8px;

        font-size:8px;
    }


    .brand{
        font-size:16px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .network-badge{
        transition:none;
    }

}

html{
    min-height:100%;
    background:var(--page-bg);
}


body{
    margin:0;

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

    background:var(--page-bg);
    color:var(--text);

    padding-bottom:120px;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}


*{
    box-sizing:border-box;
}


button,
a,
input,
select,
textarea{
    font:inherit;
    -webkit-tap-highlight-color:transparent;
}


img{
    max-width:100%;
}


a{
    color:inherit;
}


/* =========================================================
   TESTNET PAGE CONTAINER
========================================================= */

.investor-shell{
    width:100%;
    max-width:500px;

    margin:0 auto;

    padding:
        0
        0
        24px;
}


.investor-page{
    width:100%;
}


.investor-shell,
.summary-card,
.investment-card,
.investor-hero,
.testnet-notice,
.locked-panel{
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


/* =========================================================
   TESTNET HERO
========================================================= */

.investor-hero{
    position:relative;

    overflow:hidden;

    display:flex;

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

    gap:12px;

    margin:16px;

    padding:20px;

    min-height:180px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            #06692f 0%,
            #0d8c43 45%,
            #13a74d 100%
        );

    color:#fff;

    box-shadow:var(--shadow-green);
}


.investor-hero::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-160px;
    top:-150px;

    border-radius:50%;

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

    pointer-events:none;
}


.investor-hero::after{
    content:"";

    position:absolute;

    right:-100px;
    bottom:-80px;

    width:520px;
    height:320px;

    border-radius:50%;

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

    box-shadow:
        0 0 0 40px rgba(255,255,255,.03),
        0 0 0 80px rgba(255,255,255,.02),
        0 0 0 120px rgba(255,255,255,.02);

    pointer-events:none;
}


.hero-copy{
    position:relative;

    z-index:2;

    flex:1;

    min-width:0;
}


.hero-greeting{
    display:flex;

    align-items:center;

    gap:6px;

    color:#fff;

    font-size:13px;

    font-weight:500;

    opacity:.95;
}


.hero-wave{
    display:inline-flex;

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

    width:18px;
    height:18px;

    color:rgba(255,255,255,.9);
}


#heroUserName{
    margin:4px 0 0;

    color:#fff;

    font-size:15px;

    font-weight:800;

    line-height:1.15;

    word-break:break-word;
}


.hero-label{
    margin:10px 0 0;

    color:#fff;

    font-size:12px;

    opacity:.85;
}


.hero-balance-row{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:8px;
}


#heroPortfolio{
    margin:0;

    color:#fff;

    font-size:30px;

    font-weight:900;

    letter-spacing:.5px;

    line-height:1.1;
}


/* =========================================================
   LOCKED PILL
========================================================= */

.locked-pill{
    display:inline-flex;

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

    min-height:26px;

    padding:6px 10px;

    border-radius:999px;

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

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

    color:#fff;

    font-size:9px;

    font-weight:800;

    letter-spacing:.07em;
}


.locked-pill::before{
    content:"";

    width:6px;
    height:6px;

    margin-right:5px;

    border-radius:50%;

    background:#ffd84c;
}


/* =========================================================
   HERO NOTE
========================================================= */

.hero-note{
    position:relative;

    z-index:2;

    margin:12px 0 0;

    max-width:370px;

    color:rgba(255,255,255,.82);

    font-size:11px;

    line-height:1.5;
}


/* =========================================================
   WALLET ADDRESS
========================================================= */

#walletAddress{
    position:relative;

    z-index:2;

    display:block;

    margin-top:9px;

    max-width:100%;

    color:rgba(255,255,255,.72);

    font-size:9px;

    line-height:1.4;

    word-break:break-all;
}


.wallet-address{
    color:rgba(255,255,255,.72);

    font-size:9px;

    word-break:break-all;
}


/* =========================================================
   HERO MARK
========================================================= */

.hero-mark{
    position:relative;

    z-index:2;

    width:86px;

    flex:0 0 86px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    color:#fff;
}


.pi-mark{
    width:72px;
    height:72px;

    display:flex;

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

    border-radius:50%;

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

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

    box-shadow:
        0 16px 28px rgba(0,0,0,.18);

    color:#fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:44px;

    font-weight:700;

    line-height:1;
}


.hero-mark > span{
    color:rgba(255,255,255,.88);

    font-size:9px;

    font-weight:800;

    letter-spacing:.12em;
}


/* =========================================================
   TESTNET NOTICE
========================================================= */

.testnet-notice{
    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:16px;

    padding:15px;

    background:
        linear-gradient(
            135deg,
            #fffdf4,
            #fff8df
        );

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

    border-radius:18px;

    box-shadow:
        0 6px 18px rgba(0,0,0,.035);
}


.notice-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:flex;

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

    border-radius:12px;

    background:#ffd84c;

    color:#725500;

    font-size:17px;

    font-weight:900;
}


.testnet-notice strong{
    display:block;

    margin-bottom:3px;

    color:#5d4c00;

    font-size:13px;

    font-weight:800;
}


.testnet-notice p{
    margin:0;

    color:#786d47;

    font-size:11px;

    line-height:1.55;
}


/* =========================================================
   SUMMARY GRID
========================================================= */

.summary-grid{
    display:grid;

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

    gap:10px;

    margin:16px;
}


.summary-card{
    position:relative;

    min-height:118px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:14px;

    overflow:hidden;

    background:#fff;

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

    border-radius:22px;

    box-shadow:var(--shadow-sm);
}


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

    box-shadow:
        0 12px 28px rgba(0,0,0,.08);
}


.summary-card:active{
    transform:scale(.98);
}


.summary-card::after{
    content:"";

    position:absolute;

    width:70px;
    height:70px;

    right:-28px;
    bottom:-30px;

    border-radius:50%;

    background:
        rgba(15,122,61,.045);

    pointer-events:none;
}


/* =========================================================
   SUMMARY ICON
========================================================= */

.summary-icon{
    width:46px;
    height:46px;

    display:flex;

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

    margin-bottom:10px;

    border-radius:14px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #0f7a3d
        );

    font-size:16px;

    font-weight:900;
}


.summary-card:nth-child(2) .summary-icon{
    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        );
}


.summary-card:nth-child(3) .summary-icon{
    background:
        linear-gradient(
            135deg,
            #9333ea,
            #7c3aed
        );
}


.summary-card:nth-child(4) .summary-icon{
    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #ea580c
        );
}


/* =========================================================
   SUMMARY TEXT
========================================================= */

.summary-title{
    margin-bottom:7px;

    color:#666;

    font-size:13px;

    font-weight:500;
}


.summary-card strong{
    margin-bottom:5px;

    color:#111;

    font-size:17px;

    font-weight:800;

    line-height:1.1;
}


.summary-card small{
    display:block;

    color:#159447;

    font-size:11px;

    font-weight:600;

    line-height:1.3;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.quick-actions{
    display:grid;

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

    gap:10px;

    margin:22px 16px 24px;
}


.action-item{
    min-width:0;

    display:flex;

    flex-direction:column;

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

    color:#333;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform .25s ease;
}


.action-item:hover{
    transform:translateY(-2px);
}


.action-item:active{
    transform:scale(.95);
}


.action-icon{
    width:56px;
    height:56px;

    display:flex;

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

    margin-bottom:8px;

    border-radius:18px;

    background:#fff;

    color:#0f7a3d;

    box-shadow:
        0 8px 20px rgba(0,0,0,.08);

    font-size:18px;

    font-weight:800;
}


.action-item > span:last-child{
    color:#333;

    font-size:11px;

    font-weight:600;

    line-height:1.3;

    text-align:center;
}


/* =========================================================
   LOCKED QUICK ACTION
========================================================= */

.locked-action{
    cursor:not-allowed;

    opacity:.62;
}


.locked-action .action-icon{
    color:#78827d;

    background:#f2f4f3;
}


.locked-action > span:last-child{
    color:#78827d;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.section-head{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin:24px 16px 10px;
}


.section-head h2{
    margin:0;

    color:#111;

    font-size:20px;

    font-weight:800;

    line-height:1.2;
}


.section-head p{
    margin:4px 0 0;

    color:#777;

    font-size:11px;

    line-height:1.4;
}


.section-status{
    display:inline-flex;

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

    flex:0 0 auto;

    padding:6px 9px;

    border-radius:999px;

    background:#eef8ee;

    border:
        1px solid #d4ecd9;

    color:#218c4d;

    font-size:9px;

    font-weight:800;

    letter-spacing:.06em;
}


/* =========================================================
   INVESTMENTS LIST
========================================================= */

.investments-list,
.investment-list{
    display:grid;

    gap:10px;

    margin:0 16px;

    width:auto;
}


/* =========================================================
   INVESTMENT CARD
========================================================= */

.investment-card{
    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:15px;

    background:#fff;

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

    border-radius:22px;

    box-shadow:var(--shadow-sm);
}


.investment-card:hover{
    box-shadow:var(--shadow-md);

    border-color:#d8e6df;
}


.investment-main{
    min-width:0;

    display:flex;

    align-items:center;

    gap:12px;

    flex:1;
}


/* =========================================================
   PROJECT LOGO
========================================================= */

.investment-logo{
    width:56px;
    height:56px;

    flex:0 0 56px;

    display:grid;

    place-items:center;

    overflow:hidden;

    border-radius:18px;

    background:
        #f1f5f3;

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


.investment-logo[hidden]{
    display:none !important;
}


.investment-logo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    background:#f1f5f3;
}


/* =========================================================
   INVESTMENT INFO
========================================================= */

.investment-info{
    min-width:0;

    flex:1;
}


.investment-info h3{
    margin:0 0 4px;

    color:#111;

    font-size:15px;

    font-weight:800;

    line-height:1.25;

    overflow:hidden;

    text-overflow:ellipsis;
}


.investment-meta{
    margin:0;

    color:#777;

    font-size:11px;

    line-height:1.45;
}


/* =========================================================
   INVESTMENT VALUES
========================================================= */

.investment-values{
    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:14px;

    flex:0 0 auto;
}


.investment-values div{
    text-align:right;
}


.investment-values span{
    display:block;

    margin-bottom:2px;

    color:#888;

    font-size:10px;

    line-height:1.25;
}


.investment-values strong{
    display:block;

    color:#222;

    font-size:12px;

    font-weight:800;

    line-height:1.3;
}


.investment-values .reward{
    color:#138847;
}


/* =========================================================
   INVESTMENT STATUS
========================================================= */

.investment-status{
    display:inline-flex !important;

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

    min-height:24px;

    padding:5px 9px;

    border-radius:999px;

    background:#eef8ee;

    border:
        1px solid #d5ecdb;

    color:#218c4d !important;

    font-size:9px !important;

    font-weight:800 !important;

    letter-spacing:.04em;

    white-space:nowrap;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state{
    margin:10px 16px 0;

    padding:24px 18px;

    text-align:center;

    background:#fff;

    border:
        1px dashed #dce5e1;

    border-radius:22px;

    color:#666;

    box-shadow:none;
}


.empty-state[hidden]{
    display:none !important;
}


.empty-mark{
    width:52px;
    height:52px;

    display:flex;

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

    margin:0 auto 12px;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            #eef8f2,
            #e4f3ea
        );

    color:#0f7a3d;

    font-size:27px;

    font-weight:400;
}


.empty-state h3{
    margin:0 0 7px;

    color:#222;

    font-size:16px;

    font-weight:800;
}


.empty-state p{
    max-width:400px;

    margin:0 auto;

    color:#777;

    font-size:12px;

    line-height:1.6;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.primary-btn{
    display:inline-flex;

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

    min-height:44px;

    margin-top:14px;

    padding:11px 18px;

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #0f7a3d,
            #18a558
        );

    color:#fff;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    box-shadow:
        0 8px 18px rgba(15,122,61,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.primary-btn:hover{
    transform:translateY(-1px);

    box-shadow:
        0 10px 22px rgba(15,122,61,.24);
}


.primary-btn:active{
    transform:scale(.97);
}


/* =========================================================
   LOCKED PANELS
========================================================= */

.locked-panel{
    position:relative;

    margin:16px;

    padding:17px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f7f9f8
        );

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

    border-radius:22px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.035);

    overflow:hidden;
}


.locked-panel::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:4px;
    height:100%;

    background:#cbd4cf;

    border-radius:4px 0 0 4px;
}


.panel-title{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:7px;
}


.panel-title h2{
    margin:0;

    color:#222;

    font-size:17px;

    font-weight:800;

    line-height:1.25;
}


.panel-title > span{
    display:inline-flex;

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

    padding:5px 8px;

    border-radius:999px;

    background:#f0f3f1;

    border:
        1px solid #e1e6e3;

    color:#737d78;

    font-size:9px;

    font-weight:800;

    letter-spacing:.05em;
}


.locked-panel p{
    margin:0;

    color:#777;

    font-size:11px;

    line-height:1.6;
}


/* =========================================================
   ERROR STATE
========================================================= */

.error-state{
    margin:10px 16px 0;

    padding:18px;

    background:var(--danger-bg);

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

    border-radius:18px;

    color:var(--danger);
}


.error-state p{
    margin:0;

    font-size:12px;

    line-height:1.55;
}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible{
    outline:
        3px solid
        rgba(51,193,125,.35);

    outline-offset:3px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .investor-hero{
        margin:16px;

        padding:18px;

        min-height:180px;
    }


    #heroPortfolio{
        font-size:28px;
    }


    .hero-mark{
        width:82px;

        flex-basis:82px;
    }


    .pi-mark{
        width:68px;
        height:68px;

        font-size:41px;
    }


    .summary-grid{
        gap:8px;

        margin:
            14px;
    }


    .summary-card{
        min-height:108px;

        padding:12px;
    }


    .summary-icon{
        width:40px;
        height:40px;

        margin-bottom:8px;
    }


    .summary-title{
        font-size:12px;
    }


    .summary-card strong{
        font-size:15px;
    }


    .summary-card small{
        font-size:10px;
    }


    .quick-actions{
        gap:8px;

        margin:
            20px 14px 22px;
    }


    .action-icon{
        width:52px;
        height:52px;

        border-radius:16px;
    }


    .action-item > span:last-child{
        font-size:10px;
    }


    .section-head{
        margin:
            22px 14px 10px;
    }


    .investments-list,
    .investment-list{
        margin:
            0 14px;
    }


    .investment-card{
        align-items:flex-start;

        flex-direction:column;

        gap:12px;

        padding:14px;
    }


    .investment-main{
        width:100%;
    }


    .investment-values{
        width:100%;

        justify-content:flex-start;

        padding-top:10px;

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


    .investment-values div{
        text-align:left;
    }


    .investment-status{
        margin-left:auto;
    }


    .empty-state,
    .locked-panel{
        margin-left:14px;
        margin-right:14px;
    }


    .testnet-notice{
        margin-left:14px;
        margin-right:14px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width:430px){

    .investor-hero{
        margin:
            12px;

        padding:
            16px;

        border-radius:21px;
    }


    .hero-mark{
        width:70px;

        flex-basis:70px;
    }


    .pi-mark{
        width:60px;
        height:60px;

        font-size:36px;
    }


    .hero-mark > span{
        font-size:8px;
    }


    #heroUserName{
        font-size:15px;
    }


    #heroPortfolio{
        font-size:25px;
    }


    .hero-note{
        font-size:10px;
    }


    #walletAddress{
        font-size:8px;
    }


    .testnet-notice{
        margin:
            12px;

        padding:
            13px;
    }


    .notice-icon{
        width:34px;
        height:34px;

        flex-basis:34px;

        border-radius:11px;
    }


    .testnet-notice strong{
        font-size:12px;
    }


    .testnet-notice p{
        font-size:10px;
    }


    .summary-grid{
        margin:
            12px;
    }


    .summary-card{
        padding:
            11px;

        border-radius:19px;
    }


    .summary-icon{
        width:38px;
        height:38px;

        border-radius:12px;

        font-size:14px;
    }


    .summary-title{
        font-size:11px;
    }


    .summary-card strong{
        font-size:14px;
    }


    .quick-actions{
        margin:
            20px 12px 22px;

        gap:6px;
    }


    .action-icon{
        width:48px;
        height:48px;

        border-radius:15px;
    }


    .action-item > span:last-child{
        font-size:9px;
    }


    .section-head{
        margin:
            20px 12px 9px;
    }


    .section-head h2{
        font-size:18px;
    }


    .section-head p{
        font-size:10px;
    }


    .investments-list,
    .investment-list{
        margin:
            0 12px;
    }


    .investment-card{
        padding:
            13px;

        border-radius:19px;
    }


    .investment-logo{
        width:50px;
        height:50px;

        flex-basis:50px;

        border-radius:16px;
    }


    .investment-info h3{
        font-size:14px;
    }


    .investment-meta{
        font-size:10px;
    }


    .investment-values{
        gap:11px;
    }


    .investment-values strong{
        font-size:11px;
    }


    .investment-status{
        font-size:8px !important;

        padding:
            4px 7px;
    }


    .empty-state,
    .locked-panel{
        margin-left:12px;
        margin-right:12px;

        border-radius:19px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media(max-width:360px){

    .investor-hero{
        margin:10px;

        padding:14px;
    }


    .hero-mark{
        width:62px;

        flex-basis:62px;
    }


    .pi-mark{
        width:54px;
        height:54px;

        font-size:32px;
    }


    #heroPortfolio{
        font-size:23px;
    }


    .summary-grid{
        margin-left:10px;
        margin-right:10px;
    }


    .summary-card{
        min-height:103px;

        padding:10px;
    }


    .summary-icon{
        width:35px;
        height:35px;

        margin-bottom:7px;
    }


    .summary-title{
        font-size:10px;
    }


    .summary-card strong{
        font-size:13px;
    }


    .quick-actions{
        margin-left:10px;
        margin-right:10px;
    }


    .action-icon{
        width:44px;
        height:44px;

        border-radius:13px;
    }


    .section-head{
        margin-left:10px;
        margin-right:10px;
    }


    .investments-list,
    .investment-list{
        margin-left:10px;
        margin-right:10px;
    }


    .empty-state,
    .locked-panel,
    .testnet-notice{
        margin-left:10px;
        margin-right:10px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

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

        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;
    }

   }