*{box-sizing:border-box}
html{background:#050505}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#050505;color:#fff;-webkit-font-smoothing:antialiased}
.app-shell{
    max-width:560px;
    margin:0 auto;
    min-height:100vh;
    padding:24px 18px 110px;

    background:
        radial-gradient(circle at top, rgba(255,204,51,.16), transparent 36%),
        linear-gradient(180deg, rgba(8,8,8,.72), rgba(2,2,2,.88));

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

    border-left:1px solid rgba(255,204,51,.14);
    border-right:1px solid rgba(255,204,51,.14);
}
.app-header{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    margin-bottom:18px;

    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;

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

    box-shadow:0 14px 30px rgba(0,0,0,.25);
}
.logo-wrap{text-decoration:none}
.app-logo{width:58px;height:58px;object-fit:contain;background:#000;border-radius:16px;padding:6px;border:1px solid rgba(255,204,51,.45);box-shadow:0 8px 24px rgba(0,0,0,.55)}
.app-header h1{margin:0;font-size:24px;color:#ffcc33;letter-spacing:.2px}
.app-header p{margin:3px 0 0;font-size:12px;color:#ccc}
.welcome-card,.hero-panel,.notice-card{background:linear-gradient(135deg,#171717,#060606);border:1px solid rgba(255,204,51,.35);border-radius:22px;padding:20px;margin-bottom:18px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.hero-panel.gold{background:radial-gradient(circle at top right,rgba(255,204,51,.22),transparent 35%),linear-gradient(135deg,#1b1300,#060606)}
.hero-panel h2,.welcome-card h2{margin:0;font-size:27px;line-height:1.1}
.hero-panel p{color:#d5d5d5;line-height:1.45}
.small-label{color:#d4af37;text-transform:uppercase;font-size:11px;letter-spacing:1.2px;margin:0 0 7px;font-weight:bold}
.muted{color:#aaa;font-size:13px}.small{font-size:12px!important}
.member-badge,.pill{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:999px;background:rgba(255,204,51,.1);border:1px solid rgba(255,204,51,.25);color:#ffdd66;font-size:12px;font-weight:bold}
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.quick-actions a{background:#111;color:#ffcc33;text-decoration:none;border:1px solid rgba(255,204,51,.25);border-radius:16px;padding:13px 8px;text-align:center;font-size:13px;font-weight:bold}
.section-title{margin:20px 0 12px}.section-title h2{margin:0;color:#fff;font-size:20px}.section-title p{margin:4px 0 0;color:#aaa;font-size:13px}
.grid{display:grid;grid-template-columns:1fr;gap:14px}

 /* =========================
   ULTRA PREMIUM ENERGY CARDS
========================= */

.app-card{

    text-decoration:none;
    color:#fff;

    display:block;

    position:relative;

    overflow:hidden;

    border-radius:30px;

    padding:34px 28px;

    min-height:250px;

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

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    box-shadow:
        0 22px 55px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.04);
}

/* GLOW OVERLAY */

.app-card:after{

    content:"";

    position:absolute;

    top:-90px;
    right:-90px;

    width:220px;
    height:220px;

    border-radius:50%;

    filter:blur(45px);

    opacity:.55;
}

/* TOP ENERGY LINE */

.app-card:before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    opacity:.95;
}

 /* Risk - Red */
.app-card:nth-child(1){
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 34%),
        linear-gradient(135deg, #ff1f1f 0%, #a00000 45%, #220000 100%) !important;
    border:1px solid rgba(255,80,80,.75) !important;
}

/* Training - Blue */
.app-card:nth-child(2){
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, #00c6ff 0%, #0066ff 45%, #001b44 100%) !important;
    border:1px solid rgba(0,198,255,.85) !important;
}

/* Events - Orange */
.app-card:nth-child(3){
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, #ffb000 0%, #ff5a00 45%, #3a1200 100%) !important;
    border:1px solid rgba(255,176,0,.85) !important;
}

/* Featured - Green */
.app-card.featured{
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, #22c55e 0%, #15803d 45%, #052e16 100%) !important;
    border:1px solid rgba(34,197,94,.85) !important;
}
/* =========================
   FEATURED / INVESTOR
========================= */

.app-card.featured{

    background:
        radial-gradient(circle at top right,
            rgba(40,167,69,.34),
            transparent 35%),

        linear-gradient(
            145deg,
            rgba(0,70,35,.96),
            rgba(0,0,0,.98)
        );

    border:1px solid rgba(40,167,69,.34);
}

.app-card.featured:before{

    background:
        linear-gradient(
            90deg,
            #28a745,
            #ffffff,
            #28a745
        );
}

.app-card.featured:after{
    background:rgba(40,167,69,.32);
}

/* =========================
   HOVER EFFECTS
========================= */

.app-card:hover{

    transform:
        translateY(-8px)
        scale(1.01);

    box-shadow:
        0 35px 75px rgba(0,0,0,.65),
        0 0 40px rgba(255,255,255,.08);
}

/* =========================
   ICONS
========================= */

.app-card span{

    display:flex;

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

    width:74px;
    height:74px;

    border-radius:22px;

    font-size:34px;

    margin-bottom:20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.03)
        );

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

    box-shadow:
        0 14px 35px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter:blur(12px);
}

/* =========================
   TITLES
========================= */

.app-card h3{

    margin:0 0 18px 0;

    font-size:30px;

    line-height:1.15;

    font-weight:900;

    letter-spacing:-.6px;

    color:#fff;

    text-shadow:
        0 2px 10px rgba(0,0,0,.35);
}

/* =========================
   BODY
========================= */

.app-card p{

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

    line-height:1.8;

    font-size:16px;

    margin:0;
}
.bottom-nav{
    position:fixed;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:100%;
    max-width:560px;
    background:rgba(0,0,0,.96);
    border-top:1px solid rgba(255,204,51,.35);
    display:grid;
    grid-template-columns:repeat(5,1fr);
    z-index:99;
    backdrop-filter:blur(12px);
}

.bottom-nav a{
    color:#ffcc33;
    text-decoration:none;
    text-align:center;
    padding:14px 4px 16px;
    font-size:12px;
    font-weight:bold;
    display:block;
}

@media (min-width:700px){
    .app-shell{
        border-left:1px solid rgba(255,204,51,.15);
        border-right:1px solid rgba(255,204,51,.15);
    }
}
.training-form{
    margin:0;
    padding:0;
    width:100%;
}

.training-button.app-card{
    width:100%;
    min-height:220px;
    text-align:left;
    appearance:none;
    -webkit-appearance:none;
    border:none;
    cursor:pointer;
    font-family:Arial,Helvetica,sans-serif;
}

.training-button.app-card h3{
    text-align:left;
}

.training-button.app-card p{
    text-align:left;
}
.training-button:focus{
    outline:2px solid rgba(255,204,51,.45);
    outline-offset:2px;
}

.training-menu .training-button.app-card{
    min-height:220px;
}
/* =========================
   DASHBOARD CLEANUP / SPACING
========================= */

.app-shell{
    padding:24px 18px 110px;
}

.app-header{
    padding:18px 0 24px;
}

.welcome-card,
.program-card,
.hero-panel,
.notice-card{
    margin-bottom:24px;
    padding:24px;
}

.program-card{
    background:
        radial-gradient(circle at top right,rgba(255,204,51,.18),transparent 38%),
        linear-gradient(145deg,#141414,#050505);
}

.expiry-grid{
    gap:14px;
}

.expiry-box{
    padding:18px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.04),rgba(0,0,0,.96));
    border-color:rgba(255,204,51,.25);
}

.quick-actions{
    gap:12px;
    margin:24px 0 28px;
}

.quick-actions a{
    padding:15px 10px;
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(255,204,51,.12),rgba(0,0,0,.96));
    box-shadow:0 10px 22px rgba(0,0,0,.35);
}

.section-title{
    margin:30px 0 18px;
}

.section-title h2{
    font-size:24px;
    color:#ffcc33;
}

.section-title p{
    font-size:14px;
    color:rgba(255,255,255,.75);
}

.grid{
    gap:22px;
}

.app-card{
    padding:32px 26px;
    min-height:240px;
    border-radius:26px;
}

.app-card h3{
    margin-top:22px;
    margin-bottom:18px;
}

.app-card h3{
    color:#ffffff !important;
}
.app-card p{
    max-width:95%;
}

.bottom-nav{
    padding-top:4px;
}
/* =========================
   EVENTS ACTION BUTTONS
========================= */

.event-actions{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:22px;
}

.event-btn{

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

    gap:10px;

    width:100%;

    min-height:64px;

    padding:16px 20px;

    border-radius:18px;

    text-decoration:none;

    font-weight:700;

    font-size:.92rem;

    letter-spacing:.15px;

    transition:all .25s ease;

    box-shadow:0 12px 26px rgba(0,0,0,.22);

    white-space:nowrap;

    overflow:hidden;

    color:#fff;
}

.event-btn:hover{
    transform:translateY(-2px);
}

/* ICON ONLY */

.event-btn .icon{

    width:38px;
    height:38px;

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

    border-radius:12px;

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

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

    font-size:1rem;

    flex:0 0 auto;
}

/* TEXT */

.event-btn .label{

    display:block;

    line-height:1.1;

    text-align:center;
}

/* PRIMARY */

.event-btn.primary{

    background:
        linear-gradient(
            135deg,
            #ff2e2e,
            #ff9900
        );
}

/* SECONDARY */

.event-btn.secondary{

    background:
        linear-gradient(
            135deg,
            #111827,
            #1f2937
        );

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

@media(max-width:480px){

    .event-btn{
        font-size:.88rem;
        min-height:60px;
        padding:14px 16px;
    }

    .event-btn .icon{
        width:34px;
        height:34px;
        font-size:.95rem;
    }

}
/* =========================
   FORCE FIX EVENT BUTTONS
========================= */

.event-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;

    min-height:62px !important;

    padding:14px 18px !important;

    font-size:.92rem !important;
    font-weight:700 !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-decoration:none !important;
}

.event-btn .icon{

    width:36px !important;
    height:36px !important;

    min-width:36px !important;

    border-radius:10px !important;

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

    background:rgba(255,255,255,.08) !important;

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

    box-shadow:none !important;

    flex:0 0 auto !important;

    font-size:1rem !important;

    padding:0 !important;

    margin:0 !important;
}

.event-btn .label{

    display:block !important;

    background:none !important;

    border:none !important;

    box-shadow:none !important;

    padding:0 !important;

    margin:0 !important;

    width:auto !important;
    height:auto !important;

    line-height:1.1 !important;

    white-space:nowrap !important;

    font-size:.92rem !important;

    font-weight:700 !important;
}
/* =========================
   PORTFOLIO HIGHLIGHTS
========================= */

.portfolio-highlights{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin:26px 0 10px 0;
}

.highlight-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            rgba(17,24,39,.92),
            rgba(0,0,0,.94)
        );

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

    box-shadow:
        0 14px 30px rgba(0,0,0,.22);
}

.highlight-icon{

    width:52px;
    height:52px;

    border-radius:16px;

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

    font-size:1.3rem;

    background:
        linear-gradient(
            135deg,
            rgba(255,215,0,.20),
            rgba(255,153,0,.10)
        );

    border:1px solid rgba(255,215,0,.12);

    flex:0 0 auto;
}

.highlight-text{

    display:flex;

    flex-direction:column;
}

.highlight-text strong{

    color:#fff;

    font-size:1rem;

    font-weight:800;

    line-height:1.1;
}

.highlight-text span{

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

    margin-top:5px;

    font-size:.86rem;
}
.app-header{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    background:#000;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.logo-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.app-logo{
    width:58px;
    height:58px;
    border-radius:14px;
    object-fit:cover;
    box-shadow:0 4px 14px rgba(0,0,0,0.35);
}

.app-title-wrap h1{
    margin:0;
    color:#fff;
    font-size:22px;
    font-weight:700;
    letter-spacing:.02em;
}

.app-title-wrap p{
    margin:2px 0 0 0;
    color:#bbb;
    font-size:13px;
}
.security-wrap{
    border:1px solid rgba(255,215,0,.35);
    border-radius:22px;
    padding:22px;
    margin-bottom:20px;
    background:rgba(255,255,255,.03);
}

.security-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

#securityToggleIcon{
    font-size:28px;
    font-weight:bold;
    color:#ffd700;
}
/* =========================
   TRANSPARENT LOGIN CARD
========================= */

.login-card{

    background:
        linear-gradient(
            135deg,
            rgba(179,0,0,.82),
            rgba(255,46,46,.78)
        );

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

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

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 35px rgba(255,46,46,.18);
}

/* =========================
   GLASS EXPERIENCE CARD
========================= */

.experience-card{

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

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

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

    box-shadow:
        0 14px 30px rgba(0,0,0,.28);
}
/* FORCE VIBRANT APP CARD COLORS */

.app-card.card-risk{
    background:linear-gradient(135deg,#ff2e2e 0%,#b30000 50%,#280000 100%) !important;
    border:2px solid #ff4d4d !important;
}

.app-card.card-training{
    background:linear-gradient(135deg,#00c6ff 0%,#005bea 50%,#001b44 100%) !important;
    border:2px solid #00c6ff !important;
}

.app-card.card-event{
    background:linear-gradient(135deg,#ffcc00 0%,#ff6600 50%,#3a1200 100%) !important;
    border:2px solid #ff9900 !important;
}

.app-card.card-investor{
    background:linear-gradient(135deg,#22c55e 0%,#15803d 50%,#052e16 100%) !important;
    border:2px solid #22c55e !important;
}

.app-card h3{
    color:#fff !important;
}

.app-card p{
    color:#fff !important;
}