* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #070b12;
    --panel: #0d131d;
    --panel-light: #111925;
    --border: rgba(255, 255, 255, 0.08);

    --text: #f5f7fa;
    --muted: #8d98a8;

    --primary: #30b64b;
    --primary-dark: #23913a;

    --danger: #ef5350;
    --warning: #f5b942;

    --sidebar-width: 250px;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

.app-shell {
    min-height: 100vh;
}


/* SIDEBAR */

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;

    position: fixed;
    left: 0;
    top: 0;

    background: #090e16;

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

    display: flex;
    flex-direction: column;

    padding: 24px 16px;

    z-index: 100;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 4px 10px 30px;
}

.brand-logo {
    width: 38px;
    height: 38px;

    border-radius: 11px;

    object-fit: cover;
    background: #06100c;
}

.brand-name {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* NAVIGATION */

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 12px 13px;

    border-radius: 10px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 500;

    transition: 0.2s ease;
}

.nav-item:hover {
    background: var(--panel-light);
    color: var(--text);
}

.nav-item.active {
    background: rgba(48, 182, 75, 0.13);
    color: var(--primary);
}

.nav-icon {
    width: 20px;

    text-align: center;

    font-size: 17px;
}

.sidebar-bottom {
    margin-top: auto;

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

    padding-top: 15px;
}


/* MAIN CONTENT */

.main-content {
    margin-left: var(--sidebar-width);

    min-height: 100vh;
}


/* TOPBAR */

.topbar {
    height: 72px;

    display: flex;
    align-items: center;

    padding: 0 30px;

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

    background: rgba(7, 11, 18, 0.92);

    position: sticky;
    top: 0;

    z-index: 50;
}

.topbar{background:linear-gradient(100deg,rgba(7,11,18,.97),rgba(12,27,45,.94));box-shadow:0 8px 24px rgba(0,0,0,.16);backdrop-filter:blur(14px)}
.page-title{position:relative;padding-left:15px;font-family:Georgia,"Times New Roman",serif;font-size:20px;letter-spacing:-.35px}.page-title:before{content:"";position:absolute;left:0;top:50%;width:4px;height:23px;border-radius:3px;background:linear-gradient(#55e1c4,#348dff);transform:translateY(-50%);box-shadow:0 0 16px rgba(85,225,196,.6)}.notification-button{transition:transform .2s ease,border-color .2s ease,background .2s ease}.notification-button:hover{transform:translateY(-3px);border-color:rgba(91,227,194,.65);background:#15263a}.notification-dot{box-shadow:0 0 0 4px rgba(48,182,75,.12);animation:notification-pulse 2s infinite}.user-mini{padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:999px;transition:.2s ease}.user-mini:hover{border-color:rgba(108,217,255,.3);background:rgba(255,255,255,.035)}.user-avatar{background:linear-gradient(145deg,rgba(60,205,125,.26),rgba(32,116,72,.25));box-shadow:inset 0 0 0 1px rgba(104,235,156,.14)}@keyframes notification-pulse{50%{box-shadow:0 0 0 7px rgba(48,182,75,0)}}

.page-title {
    font-size: 18px;
    font-weight: 650;
}

.topbar-right {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 20px;
}

.notification-button {
    width: 38px;
    height: 38px;

    border-radius: 10px;

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

    background: var(--panel);

    color: var(--text);

    cursor: pointer;

    position: relative;
}

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

    background: var(--primary);

    border-radius: 50%;

    position: absolute;

    top: 7px;
    right: 7px;
}

.user-mini {
    display: flex;
    align-items: center;

    gap: 10px;
}

.user-avatar {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: rgba(48, 182, 75, 0.15);

    color: var(--primary);

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

    font-weight: 700;
}

.user-info {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.user-info strong {
    font-size: 13px;
}

.user-info small {
    color: var(--muted);
    font-size: 11px;
}


/* MOBILE MENU */

.menu-button {
    display: none;

    border: 0;

    background: transparent;

    color: white;

    font-size: 22px;

    margin-right: 15px;

    cursor: pointer;
}


/* PAGE CONTENT */

.page-content {
    padding: 30px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .menu-button {
        display: block;
    }

    .page-content {
        padding: 20px;
    }

    .user-info {
        display: none;
    }

}

@media (max-width: 600px) {

    .topbar {
        padding: 0 16px;
    }

    .page-title {
        font-size: 16px;
    }

    .page-content {
        padding: 15px;
    }

}

.app-messages { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.app-message { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-light); font-size: 13px; }
.app-message.success { border-color: rgba(48, 182, 75, .5); color: #9ee8ae; }
.app-message.error { border-color: rgba(239, 83, 80, .5); color: #ffaaa8; }
.app-message.warning { color: #f3d99e; }

.two-factor-page{max-width:760px;margin:auto}.two-factor-kicker{color:#74e7c1;font-size:11px;font-weight:800;letter-spacing:1.3px}.two-factor-page h1{margin:9px 0;font-size:34px}.two-factor-page>p{max-width:630px;color:var(--muted);line-height:1.65}.two-factor-status,.two-factor-card,.two-factor-details,.recovery-codes{margin-top:20px;padding:21px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}.two-factor-status{display:flex;gap:42px}.two-factor-status span,.two-factor-status strong{display:block}.two-factor-status span{color:var(--muted);font-size:11px}.two-factor-status strong{margin-top:7px;font-size:18px}.two-factor-status .enabled{color:#70e694}.two-factor-status .disabled{color:#f5c36b}.two-factor-action,.two-factor-card button,.two-factor-details button{display:inline-block;margin-top:20px;padding:12px 15px;border:0;border-radius:9px;background:#30b64b;color:#fff;font:800 12px inherit;text-decoration:none;cursor:pointer}.totp-secret{margin:18px 0;padding:16px;border:1px dashed #54d2a4;border-radius:11px;background:#091b18;color:#b9ffe2;font:700 18px ui-monospace,monospace;letter-spacing:1.5px;word-break:break-all}.two-factor-note{font-size:12px}.two-factor-card{display:grid;gap:8px;max-width:430px}.two-factor-card label{font-size:12px;font-weight:700}.two-factor-card input,.two-factor-details input{padding:11px;border:1px solid var(--border);border-radius:8px;background:#080f19;color:var(--text);font:inherit}.two-factor-card button{margin-top:8px}.field-error{color:#ff9d9d;font-size:11px}.two-factor-details summary{cursor:pointer;font-weight:800}.two-factor-details p{color:var(--muted);font-size:12px;line-height:1.55}.two-factor-details form{display:grid;gap:8px;max-width:430px}.two-factor-details button{margin-top:0}.two-factor-details.danger{border-color:rgba(235,94,94,.35)}.two-factor-details.danger button{background:#c94e4e}.recovery-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.recovery-codes code{padding:10px;border-radius:7px;background:#080f19;color:#e8fff4;font-size:14px}@media(max-width:600px){.two-factor-page h1{font-size:28px}.two-factor-status{gap:20px;flex-direction:column}.recovery-codes{grid-template-columns:1fr}}
.security-devices-heading{margin:28px 0 10px;font-size:20px}.trusted-devices{display:grid;gap:10px}.trusted-devices article{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.trusted-devices strong,.trusted-devices small{display:block}.trusted-devices small{margin-top:4px;color:var(--muted);font-size:11px}.trusted-devices button{padding:8px 10px;border:1px solid rgba(239,83,80,.45);border-radius:8px;background:transparent;color:#ffaaa8;font-size:11px;font-weight:800;cursor:pointer}.link-button{padding:0;border:0;background:none;color:var(--primary);font:inherit;font-weight:700;cursor:pointer}@media(max-width:600px){.trusted-devices article{align-items:flex-start;flex-direction:column}}

/* Subtle visual energy for member pages without affecting readability. */
.main-content{background:radial-gradient(circle at 92% 8%,rgba(43,142,212,.08),transparent 27%),radial-gradient(circle at 18% 86%,rgba(48,182,75,.06),transparent 25%)}
.balance-card,.dashboard-panel{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.balance-card:hover,.dashboard-panel:hover{transform:translateY(-3px);border-color:rgba(93,205,161,.32);box-shadow:0 14px 28px rgba(0,0,0,.16)}
.action-button.primary{box-shadow:0 8px 20px rgba(48,182,75,.22)}.action-button.primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(48,182,75,.32)}
@media(prefers-reduced-motion:reduce){.balance-card,.dashboard-panel,.action-button.primary{transition:none}}

.support-float{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;align-items:center;gap:8px;padding:7px;border:1px solid rgba(104,185,255,.3);border-radius:999px;background:rgba(8,18,32,.92);box-shadow:0 12px 30px rgba(0,0,0,.35);backdrop-filter:blur(10px)}.support-float a{padding:9px 13px;border-radius:999px;font-size:11px;font-weight:800}.support-float-form{color:#dbeaff}.support-float-telegram{background:#229ed9;color:#fff}.support-float a:hover{transform:translateY(-1px)}.support-page{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(300px,1fr);gap:35px;max-width:920px;padding:12px 0}.support-kicker{color:var(--primary);font-size:11px;font-weight:800;letter-spacing:1.3px}.support-page h1{margin:12px 0;font-size:38px}.support-page>div>p{max-width:400px;line-height:1.65;color:var(--muted)}.telegram-link{display:inline-block;margin-top:22px;padding:12px 15px;border-radius:10px;background:#229ed9;color:#fff;font-size:13px;font-weight:800}.support-form{display:grid;gap:13px;padding:25px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}.support-form p{display:grid;gap:7px}.support-form label{font-size:12px;font-weight:700}.support-form input,.support-form textarea{width:100%;padding:11px;border:1px solid var(--border);border-radius:8px;background:#080f19;color:var(--text);font:inherit}.support-form textarea{resize:vertical}.support-form button{padding:12px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer}@media(max-width:650px){.support-page{grid-template-columns:1fr}.support-float{right:13px;bottom:13px}.support-float a{padding:8px 10px;font-size:10px}}
.install-prompt{position:fixed;top:20px;right:20px;z-index:1000;display:flex;align-items:center;gap:12px;max-width:390px;padding:14px 14px 14px 16px;border:1px solid rgba(99,213,255,.48);border-radius:14px;background:#09192bef;color:#edf8ff;box-shadow:0 16px 42px rgba(0,0,0,.42);backdrop-filter:blur(10px)}.install-prompt[hidden]{display:none}.install-prompt div{display:grid;gap:3px}.install-prompt strong{font-size:14px}.install-prompt span,.install-prompt small{color:#bed3e8;font-size:12px;line-height:1.35}.install-prompt button{border:0;border-radius:8px;background:#50dcae;color:#06271f;font:inherit;font-size:12px;font-weight:800;padding:8px 11px;cursor:pointer}.install-prompt .install-close{padding:3px 6px;background:transparent;color:#d8eafb;font-size:21px;font-weight:400}@media(max-width:550px){.install-prompt{top:12px;right:12px;left:12px;max-width:none}}