/* ============ TRADING ACCOUNTS (hp- prefix) — REDESIGNED ============ */
.hp-sec-accounts{
    background:
        radial-gradient(60% 50% at 50% 0%,rgba(5,150,105,.06),transparent 60%),
        var(--hp-bg-2);
}

.hp-accounts-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

/* ── Card shell ── */
.hp-acct-card{
    position:relative;
    background:#fff;
    border:1px solid #E2E8F0;
    border-radius:20px;
    overflow:hidden;
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 4px 12px rgba(15,23,42,.05),
        0 18px 44px -14px rgba(15,23,42,.12);
    transition:
        transform .4s cubic-bezier(.25,.46,.45,.94),
        border-color .4s,
        box-shadow .4s;
}
.hp-acct-card::after{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    background:linear-gradient(90deg,#059669,#0891B2);
    z-index:3;
    opacity:0;
    transition:opacity .4s;
}
.hp-acct-card:hover{
    transform:translateY(-8px);
    border-color:#6EE7B7;
    box-shadow:
        0 2px 4px rgba(15,23,42,.04),
        0 8px 20px rgba(15,23,42,.06),
        0 36px 72px -18px rgba(5,150,105,.22);
}
.hp-acct-card:hover::after{
    opacity:1;
}

/* ── Header ── */
.hp-acct-head{
    position:relative;
    background:linear-gradient(145deg,#064E3B 0%,#059669 45%,#0891B2 100%);
    color:#fff;
    padding:24px 22px 22px;
    overflow:hidden;
}
/* subtle light bloom top-right */
.hp-acct-head::before{
    content:"";
    position:absolute;
    width:180px;height:180px;
    top:-60px;inset-inline-end:-40px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    pointer-events:none;
}
/* mini-chart wave at bottom */
.hp-acct-head::after{
    content:"";
    position:absolute;
    bottom:-1px;left:0;right:0;
    height:36px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 36'%3E%3Cpath d='M0,30 C40,26 80,24 120,28 S200,16 240,20 S320,8 360,12 L400,10 L400,36 L0,36Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E") no-repeat bottom/100% 100%;
    pointer-events:none;
}

.hp-acct-head-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    position:relative;
    z-index:1;
}
.hp-acct-title{
    font-size:17px;
    font-weight:800;
    margin:0;
    line-height:1.35;
    letter-spacing:-.01em;
}
.hp-acct-badge{
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    padding:4px 12px;
    border-radius:999px;
    color:#A7F3D0;
    white-space:nowrap;
    flex-shrink:0;
    border:1px solid rgba(255,255,255,.12);
}
.hp-acct-strategy{
    font-size:12.5px;
    opacity:.82;
    margin:10px 0 0;
    position:relative;
    z-index:1;
    line-height:1.55;
}
.hp-acct-meta{
    display:flex;
    gap:7px;
    margin-top:14px;
    font-size:11px;
    opacity:.92;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
}
.hp-acct-meta span{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:rgba(255,255,255,.10);
    padding:5px 10px;
    border-radius:8px;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    border:1px solid rgba(255,255,255,.07);
    font-weight:500;
}

/* ── Body ── */
.hp-acct-body{
    padding:22px;
}

/* ── Balance & Return boxes ── */
.hp-acct-bal-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:16px;
}
.hp-acct-bal-box{
    padding:16px 14px;
    border-radius:14px;
    text-align:center;
    position:relative;
    overflow:hidden;
    border:1px solid transparent;
}
.hp-acct-bal-box:first-child{
    background:linear-gradient(145deg,#ECFDF5,#D1FAE5);
    border-color:#A7F3D0;
}
.hp-acct-bal-box--return{
    background:linear-gradient(145deg,#EFF6FF,#DBEAFE);
    border-color:#BFDBFE;
}
.hp-acct-bal-num{
    font-size:1.4em;
    font-weight:800;
    color:#059669;
    direction:ltr;
    position:relative;
    z-index:1;
    letter-spacing:-.02em;
}
.hp-acct-bal-box--return .hp-acct-bal-num{
    color:#2563EB;
}
.hp-acct-bal-num--pos{color:#059669 !important;}
.hp-acct-bal-num--neg{color:#DC2626 !important;}
.hp-acct-bal-label{
    font-size:11px;
    color:#64748B;
    margin-top:5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    position:relative;
    z-index:1;
}

/* ── KPIs — individual cells with dividers ── */
.hp-acct-kpis{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    margin-bottom:16px;
    border-radius:14px;
    overflow:hidden;
    border:1px solid #E8EDF4;
    background:#FAFBFD;
}
.hp-acct-kpi{
    text-align:center;
    padding:15px 8px;
    position:relative;
    transition:background .2s;
}
.hp-acct-kpi:hover{
    background:#F1F5F9;
}
.hp-acct-kpi:not(:last-child)::after{
    content:"";
    position:absolute;
    inset-inline-end:0;
    top:22%;
    bottom:22%;
    width:1px;
    background:#E2E8F0;
}
.hp-acct-kpi b{
    display:block;
    font-size:16px;
    color:#0F172A;
    direction:ltr;
    font-weight:800;
    letter-spacing:-.01em;
}
.hp-acct-kpi small{
    font-size:10px;
    color:#94A3B8;
    display:block;
    margin-top:4px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
}

/* ── Social stats as pills ── */
.hp-acct-social{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    border-top:1px solid #EEF2F8;
    padding-top:14px;
    margin-bottom:16px;
    flex-wrap:wrap;
}
.hp-acct-social span{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:#F8FAFC;
    padding:6px 13px;
    border-radius:9px;
    font-weight:600;
    border:1px solid #EEF2F8;
    font-size:11.5px;
    color:#475569;
    transition:background .2s,border-color .2s;
}
.hp-acct-social span:hover{
    background:#F1F5F9;
    border-color:#E2E8F0;
}

/* ── CTA button — glass overlay ── */
.hp-acct-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(135deg,#059669,#0891B2);
    color:#fff;
    padding:14px 18px;
    border-radius:13px;
    text-decoration:none;
    font-weight:700;
    font-size:14px;
    position:relative;
    overflow:hidden;
    transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s;
}
.hp-acct-link::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 55%);
    pointer-events:none;
}
.hp-acct-link:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 32px -8px rgba(5,150,105,.45);
}

/* ── Responsive ── */
@media (max-width:1024px){
    .hp-accounts-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
    .hp-accounts-grid{grid-template-columns:1fr;}
    .hp-acct-bal-num{font-size:1.2em;}
    .hp-acct-social{justify-content:flex-start;}
}