*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden;color:#f5f7fa;background:radial-gradient(circle at 65% -10%,rgba(247,185,40,.12),transparent 32%),#05070a;font-family:Inter,sans-serif}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent 90%)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;padding:32px 20px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.09);background:rgba(6,9,13,.88);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;margin:0 12px 58px;color:#f5f7fa;font:700 20px 'Space Grotesk',sans-serif;letter-spacing:2px}.brand span{display:grid;place-items:center;width:30px;height:30px;color:#111;background:#f7b928;clip-path:polygon(0 0,100% 0,72% 100%,50% 65%,28% 100%)}.sidebar-label{margin:0 12px 12px;color:#515c6b;font:10px 'IBM Plex Mono',monospace;letter-spacing:1.4px;text-transform:uppercase}.sidebar nav{display:grid;gap:7px}.nav-item{display:flex;align-items:center;gap:13px;padding:13px 12px;border:1px solid transparent;border-radius:8px;color:#8995a5;font-size:12px;transition:.2s}.nav-item b{color:#515c6b;font:10px 'IBM Plex Mono',monospace}.nav-item:hover,.nav-item.active{color:#f7b928;background:rgba(247,185,40,.07);border-color:rgba(247,185,40,.22)}.nav-item.active b{color:#f7b928}.logout{margin-top:auto;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:8px;color:#8995a5;background:rgba(255,255,255,.025);text-align:left;transition:.2s}.logout:hover{color:#ff6972;border-color:rgba(255,91,101,.3)}.main{max-width:1500px;margin-left:248px;padding:38px 52px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px}.eyebrow{color:#f7b928;font:10px 'IBM Plex Mono',monospace;letter-spacing:1.5px;text-transform:uppercase}.topbar h1{margin:10px 0 5px;font:700 38px 'Space Grotesk',sans-serif;letter-spacing:-1px}.topbar p{margin:0;color:#7d8999;font-size:13px}.user-chip{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.025);font-size:12px}.status-dot{width:7px;height:7px;border-radius:50%;background:#20d9a0;box-shadow:0 0 10px #20d9a0}.panel{padding:28px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.02)}.section-title{margin:0 0 18px;color:#f5f7fa;font:600 18px Inter,sans-serif}.section-desc{margin:0 0 20px;color:#7d8999;font-size:12px}.profile-grid{display:grid;gap:24px;margin-bottom:24px}.account-panel{grid-column:1}.overview-panel{grid-column:1}@media(min-width:900px){.profile-grid{grid-template-columns:1.2fr 1fr}.account-panel{grid-row:1}.overview-panel{grid-row:1}}.info-group{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}.info-group:last-child{border:0}.info-group label{display:block;color:#7d8999;font:10px 'IBM Plex Mono',monospace;letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px}.info-group p{margin:0;color:#f5f7fa;font-size:13px}.monospace{font-family:'IBM Plex Mono',monospace}.metric{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06)}.metric:last-child{border:0}.metric-label{color:#7d8999;font:10px 'IBM Plex Mono',monospace;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px}.metric-value{color:#f7b928;font:700 20px Inter,sans-serif}.security-panel{margin-bottom:24px}.form-group{margin-bottom:18px}.form-group label{display:block;color:#f5f7fa;font-size:13px;font-weight:500;margin-bottom:8px}.password-input-wrap{position:relative}.password-input-wrap input{width:100%;height:42px;padding:0 40px 0 12px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.035);color:#f5f7fa;font:12px Inter,sans-serif;outline:0}.password-input-wrap input:focus{border-color:#f7b928;box-shadow:0 0 0 3px rgba(247,185,40,.08)}.show-password{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;padding:0;border:0;background:0;color:#7d8999;font-size:14px;opacity:.6;transition:.2s}.show-password:hover{opacity:1}.password-strength{margin-top:8px}.strength-bar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}.strength-fill{display:block;height:100%;width:0;border-radius:2px;background:#9ca9c7;transition:.3s}.strength-text{display:block;margin-top:6px;color:#7d8999;font-size:11px}.password-strength.weak .strength-fill{width:20%;background:#ff6972}.password-strength.fair .strength-fill{width:40%;background:#f7b928}.password-strength.good .strength-fill{width:60%;background:#f7b928}.password-strength.strong .strength-fill{width:100%;background:#20d9a0}.password-strength.strong .strength-text{color:#20d9a0}.error-message{color:#ff6972;font:12px Inter,sans-serif;margin-top:12px;min-height:16px}.status-message{color:#20d9a0;font:12px Inter,sans-serif;margin-top:12px;min-height:16px}.btn-primary{width:100%;height:42px;padding:0;border:0;border-radius:8px;background:linear-gradient(135deg,#ffcf59,#f7b928);color:#111;font:600 12px Inter,sans-serif;letter-spacing:.5px;cursor:pointer;transition:.2s}.btn-primary:hover{opacity:.9}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-danger{height:42px;padding:0 16px;border:1px solid rgba(255,91,101,.25);border-radius:8px;background:rgba(255,91,101,.1);color:#ff6972;font:600 12px Inter,sans-serif;letter-spacing:.5px;cursor:pointer;transition:.2s}.btn-danger:hover{background:rgba(255,91,101,.15);border-color:rgba(255,91,101,.4)}.session-panel{margin-bottom:24px}footer{display:flex;justify-content:space-between;padding:25px 0;color:#515c6b;font:10px 'IBM Plex Mono',monospace;border-top:1px solid rgba(255,255,255,.09)}@media(max-width:1050px){.sidebar{width:205px}.main{margin-left:205px;padding:30px}.topbar h1{font-size:31px}}@media(max-width:700px){.sidebar{position:static;width:auto;height:auto;padding:18px}.brand{margin:0 0 22px}.sidebar-label{display:none}.sidebar nav{display:flex;overflow-x:auto;gap:5px}.nav-item{flex:0 0 auto;padding:10px;font-size:0}.nav-item b{display:none}.logout{position:absolute;right:18px;top:18px;margin:0;padding:9px}.main{margin:0;padding:25px 18px}.topbar{margin-bottom:23px}.topbar h1{font-size:31px}.user-chip{font-size:0}.profile-grid{grid-template-columns:1fr}.password-input-wrap input,.btn-primary,.btn-danger{font-size:11px;height:38px}}

/* =========================================================
   PROFILE — ACCOUNT OVERVIEW
   ========================================================= */

.account-overview {
    width: 100%;
    overflow: hidden;
}

.card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.card-heading h2 {
    margin: 5px 0 0;
    color: #f4f6f8;
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.eyebrow {
    display: block;
    color: #8b96a5;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

/* =========================================================
   ACCOUNT STATUS
   ========================================================= */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(35, 211, 145, 0.18);
    border-radius: 7px;
    color: #b8c4cf;
    background: rgba(35, 211, 145, 0.035);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #25d39a;
    box-shadow: 0 0 8px rgba(37, 211, 154, 0.8);
}

/* =========================================================
   ACCOUNT GRID
   ========================================================= */

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    width: 100%;
}

/* =========================================================
   INDIVIDUAL ACCOUNT ITEM
   ========================================================= */

.account-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 78px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.account-item:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.account-label {
    display: block;
    margin-bottom: 8px;
    color: #687484;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.account-item strong {
    display: block;
    min-height: 20px;
    overflow: hidden;
    color: #e7ebef;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-item .gold-value {
    color: #ffc83d;
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(255, 200, 61, 0.12);
}

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

@media (max-width: 700px) {
    .account-grid {
        grid-template-columns: 1fr;
    }

    .account-item:nth-last-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .account-item:last-child {
        border-bottom: 0;
    }

    .card-heading {
        align-items: flex-start;
    }
}