/* ============================================
   INVESTMENT PLATFORM - CRYPTRON UI IDENTICAL
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;
}

*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
    -ms-overflow-style: none; scrollbar-width: none;
}
*::-webkit-scrollbar { display: none; }

:root {
    --accent:      #ffffff;
    --white:       #f0f0f0;
    --text-muted:  #666666;
    --border:      rgba(255,255,255,0.1);
    --card-bg:     rgba(255,255,255,0.03);
    --dark-bg:     #0a0a0a;
    --green:       #00ff88;
    --red:         #ff4757;
    --gold:        #ffc107;
    --blue:        #2196f3;
    --black:       #000000;
}

html, body {
    background: #0a0a0a;
    color: var(--white);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 70% 50% at 20% 25%, rgba(255,255,255,0.05) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 80% 75%, rgba(255,255,255,0.03) 0%, transparent 50%),
        #0a0a0a;
}

input, select, textarea, button, label {
    pointer-events: auto !important;
    user-select: auto !important;
    font-family: var(--font-display);
}
a { text-decoration: none; color: inherit; }

/* ---- HEADER ---- */
.header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}
.nav-container {
    max-width: 1300px; margin: 0 auto;
    padding: 0 40px;
    height: 64px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 32px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Logo */
.header-logo {
    display: flex; align-items: center;
    flex-shrink: 0;
}
.header-logo img {
    height: 34px; width: auto;
    display: block;
    transition: opacity 0.2s;
}
.header-logo:hover img { opacity: 0.75; }

/* Center nav */
.header-nav {
    display: flex; align-items: center; gap: 2px;
    flex: 1; justify-content: center;
}
.hnav-item {
    padding: 6px 16px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-muted);
    transition: color 0.2s;
    position: relative;
    white-space: nowrap;
}
.hnav-item::after {
    content: '';
    position: absolute; bottom: -2px; left: 50%; right: 50%;
    height: 1px; background: var(--accent);
    transition: left 0.25s, right 0.25s;
}
.hnav-item:hover { color: var(--white); }
.hnav-item.active { color: var(--white); }
.hnav-item.active::after { left: 16px; right: 16px; }
.hnav-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.1); margin: 0 8px; }
.hnav-admin { position: relative; }
.hnav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 14px; height: 14px; padding: 0 3px;
    background: var(--red); color: #fff;
    font-size: 8px; border-radius: 7px;
    position: absolute; top: -4px; right: 4px;
}

/* Right side */
.header-right {
    display: flex; align-items: center; gap: 16px;
    flex-shrink: 0;
}
.header-user {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted);
}
.header-logout {
    display: flex; align-items: center;
    color: rgba(255,255,255,0.3);
    padding: 6px;
    transition: color 0.2s;
}
.header-logout:hover { color: var(--red); }

/* Sidebar nav items (mobile) */
.nav-item {
    display:flex; align-items:center; gap:10px;
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    cursor: pointer; transition: all 0.3s;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    position: relative;
}
.nav-item:hover { color: var(--white); background: rgba(255,255,255,0.05); }
.nav-item.active { color: var(--white); background: rgba(255,255,255,0.08); }
.nav-item.active::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
    background: var(--white);
}
.nav-item.logout { color: var(--red); }
.nav-item.logout:hover { background: rgba(255,71,87,0.08); }

.nav-divider { height:1px; background:rgba(255,255,255,0.06); margin: 8px 0; }
.nav-label {
    font-size:9px; letter-spacing:1.5px;
    color:rgba(255,255,255,0.2); text-transform:uppercase;
    padding: 4px 8px;
}
.nav-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:16px; height:16px; padding:0 4px;
    background: var(--red); color: #fff;
    font-size:9px; border-radius: 8px;
}

/* ---- LAYOUT ---- */
.layout { display:flex; min-height:100vh; padding-top:0; position:relative; z-index:1; }
.main {
    flex:1; max-width:1020px; margin:0 auto;
    padding: 40px 20px 120px; width:100%;
    position:relative; z-index:1;
}

/* ---- PAGE HEADER ---- */
.page-header { margin-bottom:40px; text-align:center; }
.page-header h1 {
    font-size:38px; text-transform:uppercase;
    line-height:1.1; color:var(--white);
}
.page-header p {
    font-family: var(--font-body); font-size:12px;
    color:var(--text-muted); text-transform:uppercase; margin-top:6px;
}
.flex-between { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* ---- CARD ---- */
.card {
    background: var(--card-bg); backdrop-filter:blur(5px);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    padding: 28px; margin-bottom:20px;
    position:relative; overflow:hidden; transition:background 0.3s;
}
.card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    opacity:0; transition:opacity 0.3s;
}
.card:hover { background:rgba(255,255,255,0.03); }
.card:hover::before { opacity:0.6; }

.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; }
.card-title { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--accent); }

/* ---- STATS GRID ---- */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }

.stat-card {
    background:var(--card-bg); backdrop-filter:blur(5px);
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    padding:22px 20px; display:flex; align-items:center; gap:16px;
    position:relative; overflow:hidden; transition:background 0.3s;
}
.stat-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    opacity:0; transition:opacity 0.3s;
}
.stat-card:hover { background:rgba(255,255,255,0.03); }
.stat-card:hover::before { opacity:1; }

.stat-icon {
    width:52px; height:52px;
    background:rgba(255,255,255,0.12);
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:var(--accent); flex-shrink:0;
}
.stat-icon.green { background:rgba(0,255,136,0.1); color:var(--green); }
.stat-icon.gold  { background:rgba(255,193,7,0.1);  color:var(--gold); }
.stat-icon.blue  { background:rgba(33,150,243,0.1); color:var(--blue); }

.stat-content { flex:1; }
.stat-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:6px; }
.stat-value { font-size:26px; color:var(--white); line-height:1; }

/* ---- GRID 2 ---- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.mb-24 { margin-bottom:24px; }
.mb-28 { margin-bottom:28px; }

/* ---- FORMS ---- */
.form-grid { display:flex; flex-direction:column; gap:0; }
.form-group {
    position:relative; padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
}
.form-group:last-of-type { border-bottom:none; }
.form-label {
    display:block; font-size:10px; text-transform:uppercase;
    letter-spacing:1px; color:rgba(255,255,255,0.4); margin-bottom:10px;
}
.form-control {
    width:100%; padding:14px;
    background:rgba(0,0,0,0.4); backdrop-filter:blur(10px);
    border:none; color:var(--white);
    font-family: var(--font-display); font-size:13px;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
    transition:all 0.3s; outline:none; text-transform:none;
}
.form-control:focus { background:rgba(255,255,255,0.08); box-shadow:inset 0 0 20px rgba(255,255,255,0.15); }
.form-control option { background:#1a1a1a; }
.form-help {
    display:block; margin-top:8px;
    font-family: var(--font-body); font-size:11px;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px;
}

/* ---- BUTTONS ---- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 24px;
    font-family: var(--font-display); font-size:12px;
    text-transform:uppercase; letter-spacing:0.5px;
    cursor:pointer; border:none;
    transition:all 0.4s cubic-bezier(0.23,1,0.32,1);
    position:relative; overflow:hidden;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
    text-decoration:none;
}
.btn-primary { background:rgba(255,255,255,0.12); color:var(--accent); }
.btn-primary::before {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:var(--accent); transition:left 0.4s cubic-bezier(0.23,1,0.32,1); z-index:-1;
}
.btn-primary:hover::before { left:0; }
.btn-primary:hover { color:var(--black); transform:translateY(-2px); }

.btn-secondary { background:rgba(255,255,255,0.04); color:var(--text-muted); }
.btn-secondary:hover { background:rgba(255,255,255,0.08); color:var(--white); transform:translateY(-1px); }

.btn-success { background:rgba(0,255,136,0.1); color:var(--green); }
.btn-success:hover { background:rgba(0,255,136,0.2); transform:translateY(-1px); }

.btn-danger { background:rgba(255,71,87,0.1); color:var(--red); }
.btn-danger:hover { background:rgba(255,71,87,0.2); transform:translateY(-1px); }

.btn-full { width:100%; }
.btn-sm {
    padding:8px 16px; font-size:11px;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.btn:disabled { opacity:0.3; cursor:not-allowed; transform:none !important; }

/* ---- ALERTS ---- */
.alert {
    display:flex; align-items:center; gap:10px;
    padding:14px 18px; margin-bottom:20px;
    font-size:12px; text-transform:uppercase; letter-spacing:0.5px;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.alert-success { background:rgba(0,255,136,0.08); color:var(--green); }
.alert-error   { background:rgba(255,71,87,0.08); color:var(--red); }

/* ---- BADGES ---- */
.badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px; font-size:10px; text-transform:uppercase; letter-spacing:0.5px;
    clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.badge-approved { background:rgba(0,255,136,0.1);  color:var(--green); }
.badge-pending  { background:rgba(33,150,243,0.1);  color:var(--blue); }
.badge-rejected { background:rgba(255,71,87,0.1);   color:var(--red); }
.badge-sent     { background:rgba(255,255,255,0.1);  color:var(--accent); }
.badge-waiting  { background:rgba(255,193,7,0.1);   color:var(--gold); }
.badge-confirming { background:rgba(33,150,243,0.1); color:var(--blue); }
.badge-finished { background:rgba(0,255,136,0.1);   color:var(--green); }
.badge-failed   { background:rgba(255,71,87,0.1);   color:var(--red); }
.badge-expired  { background:rgba(153,153,153,0.1); color:var(--text-muted); }

.level-badge {
    display:inline-flex; align-items:center;
    padding:5px 12px; background:rgba(255,255,255,0.12); color:var(--accent);
    font-size:11px; text-transform:uppercase; letter-spacing:1px;
    clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}

/* ---- TABLE ---- */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th {
    font-size:10px; text-transform:uppercase; letter-spacing:1px;
    color:var(--text-muted); padding:0 16px 16px; text-align:left;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
td {
    padding:16px; color:var(--white);
    border-bottom:1px solid rgba(255,255,255,0.04);
    vertical-align:middle;
}
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,0.02); }

.font-mono { font-family: var(--font-mono); }
.text-muted { color:var(--text-muted); }
.text-green { color:var(--green); }

.crypto-badge {
    display:inline-flex; align-items:center;
    padding:4px 10px; background:rgba(255,255,255,0.08); color:var(--accent);
    font-size:11px; text-transform:uppercase;
    clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.wallet-addr { font-family: var(--font-mono); font-size:12px; color:var(--text-muted); }

/* ---- PROGRESS ---- */
.progress-wrap { margin-top:16px; }
.progress-info { display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); text-transform:uppercase; margin-bottom:8px; }
.progress-bar { width:100%; height:4px; background:rgba(255,255,255,0.06); }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),#cccccc); transition:width 1s cubic-bezier(0.23,1,0.32,1); }

/* ---- EMPTY STATE ---- */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); display:none; }
.empty-state svg { opacity:0.2; margin-bottom:16px; }
.empty-state p { font-family: var(--font-body); font-size:13px; text-transform:uppercase; }

/* ---- DIVIDER ---- */
.divider { border:none; border-top:1px solid rgba(255,255,255,0.06); margin:24px 0; }

/* ---- COPY BTN ---- */
.copy-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; background:rgba(255,255,255,0.08); color:var(--text-muted);
    border:none; cursor:pointer; font-size:11px; text-transform:uppercase;
    font-family: var(--font-display);
    clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
    transition:all 0.3s;
}
.copy-btn:hover { background:rgba(255,255,255,0.15); color:var(--accent); }
.copy-btn.copied { color:var(--green); background:rgba(0,255,136,0.1); }

/* ---- AUTH PAGES ---- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; position:relative; z-index:1; }
.auth-card {
    width:100%; max-width:420px;
    background:rgba(255,255,255,0.02); backdrop-filter:blur(30px);
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
    padding:36px 32px; position:relative; overflow:hidden;
}
.auth-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0.6;
}
.auth-logo { text-align:center; margin-bottom:40px; }
.auth-logo img { height:44px; width:auto; margin-bottom:12px; display:block; margin-left:auto; margin-right:auto; }
.logo-big { font-size:28px; text-transform:uppercase; color:var(--white); letter-spacing:2px; }
.logo-big em, .logo-big span { color:var(--accent); font-style:normal; }
.auth-logo p { font-family: var(--font-body); font-size:12px; color:var(--text-muted); text-transform:uppercase; margin-top:6px; }
.auth-footer { text-align:center; margin-top:24px; font-family: var(--font-body); font-size:12px; color:var(--text-muted); text-transform:uppercase; }
.auth-footer a { color:var(--accent); }

/* ---- PASSCODE ---- */
.passcode-wrap { display:flex; gap:10px; margin-bottom:8px; }
.passcode-digit {
    flex:1; aspect-ratio:1; max-width:64px; text-align:center; font-size:20px;
    background:rgba(0,0,0,0.4); color:var(--accent); border:none; outline:none;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
    transition:all 0.3s;
}
.passcode-digit:focus { background:rgba(255,255,255,0.1); box-shadow:inset 0 0 15px rgba(255,255,255,0.2); }

/* ---- MODALS ---- */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(10px);
    z-index:10002; display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal-overlay.active { display:flex; }
.modal {
    background:#0a0a0a;
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
    padding:36px; width:100%; max-width:460px;
    position:relative; max-height:90vh; overflow-y:auto;
    animation:modalIn 0.4s cubic-bezier(0.23,1,0.32,1);
}
.modal::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0.5;
}
@keyframes modalIn { from{opacity:0;transform:translateY(30px) scale(0.96);} to{opacity:1;transform:none;} }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.modal-title { font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--accent); }
.modal-close { background:none; border:none; color:var(--text-muted); font-size:18px; cursor:pointer; transition:color 0.2s; font-family: var(--font-display); }
.modal-close:hover { color:var(--white); }

/* ---- TOPBAR (mobile) ---- */
.topbar {
    display:none; position:fixed; top:0; left:0; right:0; z-index:9998;
    padding:0 20px; height:60px; align-items:center; justify-content:space-between;
    background:rgba(10,10,10,0.95); backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.topbar-title { font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--white); }
.topbar-right { display:flex; align-items:center; gap:12px; }
.hamburger { background:none; border:none; color:var(--white); cursor:pointer; padding:4px; display:flex; align-items:center; transition:color 0.2s; }
.hamburger:hover { color:var(--accent); }
.user-pill { display:flex; align-items:center; gap:8px; padding:6px 14px; background:rgba(255,255,255,0.1); color:var(--accent); font-size:11px; text-transform:uppercase; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); }
.user-avatar { width:22px; height:22px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--accent); }

/* ---- SIDEBAR (mobile) ---- */
#sidebarOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(2px); z-index:299; }
.sidebar {
    position:fixed; top:0; left:-320px; width:280px; height:100vh;
    z-index:300; background:#050505;
    border-right:1px solid rgba(255,255,255,0.1);
    padding:80px 20px 40px;
    display:flex; flex-direction:column;
    transition:left 0.35s cubic-bezier(0.23,1,0.32,1); overflow-y:auto;
}
.sidebar.open { left:0; }
.sidebar-logo { display:flex; align-items:center; gap:10px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.1); }
.sidebar-logo img { height:32px; }
.logo-text { font-size:16px; text-transform:uppercase; letter-spacing:2px; }
.logo-icon { width:36px; height:36px; background:var(--accent); display:flex; align-items:center; justify-content:center; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); }
.sidebar-nav { flex:1; display:flex; flex-direction:column; gap:4px; }
.sidebar-footer { margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,0.08); }

/* ---- BOTTOM NAV (mobile) ---- */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:9999; background:rgba(10,10,10,0.95); backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,0.1); }
.bottom-nav-inner { display:flex; align-items:stretch; max-width:600px; margin:0 auto; }
.bottom-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px 4px; color:var(--text-muted); font-size:9px; text-transform:uppercase; letter-spacing:0.5px; transition:all 0.3s; position:relative; cursor:pointer; }
.bottom-nav-item.active { color:var(--accent); }
.bottom-nav-item.active::before { content:''; position:absolute; top:0; left:20%; right:20%; height:2px; background:var(--accent); }
.bottom-nav-item:hover { color:var(--accent); }
.bnav-badge { position:absolute; top:6px; right:10px; background:var(--accent); color:var(--black); font-size:8px; min-width:14px; height:14px; display:flex; align-items:center; justify-content:center; padding:0 3px; clip-path:polygon(0 0,calc(100% - 3px) 0,100% 3px,100% 100%,3px 100%,0 calc(100% - 3px)); }

/* ---- LEVEL TIER GRID ---- */
.level-tier-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }

/* ---- CHAT WIDGET ---- */
.chat-fab-wrap { position:fixed; bottom:90px; right:24px; z-index:1000; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.chat-fab {
    width:52px; height:52px; background:rgba(255,255,255,0.12); color:var(--accent);
    border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
    transition:all 0.3s; position:relative;
}
.chat-fab:hover { background:rgba(255,255,255,0.2); transform:translateY(-2px); }
.chat-unread-dot { position:absolute; top:6px; right:6px; width:8px; height:8px; background:var(--accent); border-radius:50%; display:none; }
.chat-unread-dot.visible { display:block; }

.chat-window {
    position:fixed; bottom:90px; right:24px;
    width:360px; max-height:520px;
    background:#0a0a0a; border:1px solid rgba(255,255,255,0.12);
    clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px));
    display:none; flex-direction:column; z-index:1001; overflow:hidden;
    animation:modalIn 0.3s ease;
}
.chat-window.open { display:flex; }

.chat-header { display:flex; align-items:center; gap:12px; padding:16px 18px; background:rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.1); flex-shrink:0; }
.chat-header-info { flex:1; }
.chat-header-info h4 { font-size:12px; text-transform:uppercase; color:var(--white); }
.chat-header-info span { font-family: var(--font-body); font-size:11px; color:var(--text-muted); text-transform:uppercase; }
.chat-header-actions { display:flex; gap:6px; }
.chat-action-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; transition:color 0.2s; }
.chat-action-btn:hover { color:var(--white); }

.chat-status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; background:var(--text-muted); }
.chat-status-dot.waiting { background:var(--gold); animation:pulse 1.5s infinite; }
.chat-status-dot.active  { background:var(--green); }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.chat-start { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 24px; gap:16px; text-align:center; }
.chat-start-icon { color:var(--accent); opacity:0.4; }
.chat-start h4 { font-size:14px; text-transform:uppercase; }
.chat-start p { font-family: var(--font-body); font-size:12px; color:var(--text-muted); text-transform:uppercase; }

.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.chat-msg { display:flex; gap:8px; align-items:flex-end; }
.chat-msg.own { flex-direction:row-reverse; }
.chat-msg-avatar { width:28px; height:28px; background:rgba(255,255,255,0.15); color:var(--accent); font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px)); }
.chat-msg.own .chat-msg-avatar { background:rgba(0,255,136,0.1); color:var(--green); }
.chat-bubble { max-width:220px; padding:10px 14px; font-family: var(--font-body); font-size:12px; text-transform:uppercase; line-height:1.5; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); background:rgba(255,255,255,0.04); color:var(--white); }
.chat-msg.own .chat-bubble { background:rgba(255,255,255,0.1); }
.chat-msg-time { font-family: var(--font-body); font-size:9px; color:var(--text-muted); text-transform:uppercase; }
.chat-system-msg { text-align:center; font-family: var(--font-body); font-size:10px; color:var(--text-muted); text-transform:uppercase; padding:4px 0; }

.chat-typing { padding:8px 16px; display:none; }
.chat-typing.visible { display:block; }
.typing-dots { display:flex; gap:4px; }
.typing-dots span { width:6px; height:6px; background:var(--accent); opacity:0.4; animation:typingDot 1.2s infinite; }
.typing-dots span:nth-child(2){animation-delay:0.2s;} .typing-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes typingDot { 0%,100%{opacity:0.2;transform:translateY(0);} 50%{opacity:1;transform:translateY(-3px);} }

.chat-input-area { display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid rgba(255,255,255,0.08); flex-shrink:0; }
.chat-input { flex:1; background:rgba(0,0,0,0.3); border:none; color:var(--white); font-family: var(--font-body); font-size:12px; padding:10px 12px; resize:none; outline:none; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); text-transform:uppercase; }
.chat-send-btn { width:36px; height:36px; background:rgba(255,255,255,0.12); color:var(--accent); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); transition:all 0.3s; flex-shrink:0; }
.chat-send-btn:hover { background:rgba(255,255,255,0.25); }
.chat-closed-banner { text-align:center; padding:10px; background:rgba(255,71,87,0.06); font-family: var(--font-body); font-size:11px; color:var(--text-muted); text-transform:uppercase; border-top:1px solid rgba(255,71,87,0.1); }
.chat-closed-banner a { color:var(--accent); }

/* ---- ADMIN CHAT ---- */
.agent-chat-panel { display:grid; grid-template-columns:280px 1fr; height:calc(100vh - 200px); min-height:500px; background:var(--card-bg); clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px)); overflow:hidden; }
.chat-sessions-list { border-right:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; overflow:hidden; }
.chat-sessions-header { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.08); font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.chat-sessions-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text-muted); font-family: var(--font-body); font-size:12px; text-transform:uppercase; gap:8px; }
.chat-session-item { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.04); cursor:pointer; transition:background 0.2s; }
.chat-session-item:hover, .chat-session-item.active { background:rgba(255,255,255,0.06); }
.session-email { font-size:12px; color:var(--white); text-transform:uppercase; margin-bottom:4px; }
.session-preview { font-family: var(--font-body); font-size:11px; color:var(--text-muted); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.session-meta { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.session-status { font-size:10px; text-transform:uppercase; }
.session-status.waiting{color:var(--gold);} .session-status.active{color:var(--green);} .session-status.closed{color:var(--text-muted);}
.session-unread { background:var(--accent); color:var(--black); font-size:9px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 4px; clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px)); }
.agent-chat-main { display:flex; flex-direction:column; overflow:hidden; }
.agent-chat-no-session { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); font-family: var(--font-body); font-size:13px; text-transform:uppercase; gap:16px; }
.agent-chat-no-session svg { opacity:0.15; color:var(--accent); }

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .level-tier-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    .header{display:none;}
    .topbar{display:flex;}
    .layout{padding-top:60px;}
    .main{padding:20px 16px 100px;}
    .bottom-nav{display:block;}
    .stats-grid{grid-template-columns:1fr 1fr; gap:12px;}
    .grid-2{grid-template-columns:1fr;}
    .level-tier-grid{grid-template-columns:repeat(2,1fr);}
    .card{padding:20px;}
    .stat-card{padding:16px;}
    .stat-value{font-size:20px;}
    .page-header h1{font-size:24px;}
    .chat-window{width:calc(100vw - 32px); bottom:80px; right:16px;}
    .agent-chat-panel{grid-template-columns:1fr; height:auto;}
    .auth-card{padding:24px 20px; max-width:360px;}
    .auth-wrap{padding:16px 12px;}
    .passcode-digit{max-width:52px;}
    .modal{padding:24px 20px;}
}
@media(max-width:480px){
    .stats-grid{grid-template-columns:1fr;}
    .btn{font-size:11px; padding:12px 18px;}
}

/* ── Font assignments ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.page-header h1,
.stat-value,
.card-title,
.modal-title,
.logo-big,
.btn,
.nav-item,
.hnav-item,
.badge,
.level-badge,
.form-label,
.alert,
.auth-logo .logo-big {
    font-family: var(--font-display);
}

.form-help,
.auth-logo p,
.auth-footer,
.page-header p,
.stat-label,
.text-muted,
.empty-state p,
.chat-bubble,
.chat-input,
.wallet-tx-date,
.session-preview {
    font-family: var(--font-body);
}

.form-control,
.stat-value,
.wallet-addr,
.font-mono,
td.font-mono,
.balance-amount,
.copy-btn {
    font-family: var(--font-mono);
}

/* ── Profile Grid ───────────────────────────────────────────────────── */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}
.profile-current {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-family: var(--font-body);
}
.profile-current strong {
    color: var(--white);
    font-family: var(--font-mono);
}

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


/* ── Chat override ── */
/* ── Chat closed banner fix ── */
.chat-closed-banner { display: none; }
.chat-closed-banner.show { display: block; }

/* ── Chat header inner icon fix ── */
.chat-header > div:first-child {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Ensure chat elements are clickable ── */
.chat-fab, .chat-window, .chat-window * {
    pointer-events: auto !important;
}

/* ── Chat header avatar ── */
.chat-header-avatar {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--white);
}

/* ── Chat start button spacing ── */
.chat-start input.form-control {
    margin-bottom: 10px;
    clip-path: none;
    border-radius: 6px;
}
.chat-start .btn {
    clip-path: none;
    border-radius: 6px;
}

/* ── Admin modal form improvements ───────────────────────────────── */
.modal .form-control {
    clip-path: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(0,0,0,0.3) !important;
    padding: 12px 0 !important;
}
.modal .form-control:focus {
    border-bottom-color: var(--white) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.modal select.form-control {
    padding: 12px 0 !important;
    appearance: auto !important;
}
.modal .btn-primary {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 14px !important;
    letter-spacing: 2px !important;
}
.modal .form-group {
    border-bottom: none !important;
    padding: 8px 0 !important;
}

/* ── Promo Banner ─────────────────────────────────────────────────── */
.promo-banner {
    margin-bottom: 28px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    overflow: hidden;
    position: relative;
}
.promo-banner::before {
    content: '';
    position: absolute; top:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--white), transparent);
    opacity: 0.3;
}
.promo-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    gap: 24px;
}
.promo-text { flex: 1; }
.promo-tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 3px 10px;
    margin-bottom: 10px;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.promo-text h2 {
    font-size: 22px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
    margin-bottom: 6px;
    line-height: 1.2;
}
.promo-highlight { color: var(--white); text-decoration: underline; }
.promo-text p {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
}
.promo-btn { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 600px) {
    .promo-banner-inner { flex-direction: column; align-items: flex-start; }
    .promo-btn { width: 100%; }
    .promo-text h2 { font-size: 17px; }
}

/* ── Header Sign Out Button ───────────────────────────────────────── */
.header-signout-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    background: rgba(255,71,87,0.08);
    color: var(--red);
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    transition: all 0.2s;
}
.header-signout-btn:hover {
    background: rgba(255,71,87,0.18);
}

/* ── Topbar Sign Out ──────────────────────────────────────────────── */
.topbar-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    color: var(--red);
    background: rgba(255,71,87,0.08);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    transition: background 0.2s;
}
.topbar-signout:hover { background: rgba(255,71,87,0.18); }

/* ── Topbar responsive fix ────────────────────────────────────────── */
.topbar {
    display: none;
    position: fixed; top:0; left:0; right:0; z-index:9998;
    height: 56px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 768px) {
    .topbar { display: flex; }
    .header { display: none; }
    .layout { padding-top: 56px; }
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL border-radius: 0 + clip-path everywhere
   ══════════════════════════════════════════════════════════════════ */
*,
input, select, textarea, button,
.card, .stat-card, .modal, .auth-card,
.badge, .level-badge, .nav-badge, .bnav-badge,
.form-control, .btn, .alert,
.chat-window, .chat-bubble, .chat-fab,
.promo-banner, .progress-bar,
.header-signout-btn, .topbar-signout,
.copy-btn, .filter-btn,
img, .logo-svg, .logo-icon,
.passcode-digit {
    border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   NOTIFICATION SYSTEM
   ══════════════════════════════════════════════════════════════════ */
#notif-container {
    position: fixed;
    top: 72px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    width: 320px;
}
@media(max-width:768px) {
    #notif-container {
        top: 64px;
        right: 8px;
        left: 8px;
        width: auto;
    }
}
.notif {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #111;
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 3px solid var(--white);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    pointer-events: auto;
    animation: notifIn 0.3s cubic-bezier(0.23,1,0.32,1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}
.notif::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--white);
    animation: notifTimer 4s linear forwards;
    transform-origin: left;
}
@keyframes notifIn {
    from { opacity:0; transform: translateX(20px); }
    to   { opacity:1; transform: translateX(0); }
}
@keyframes notifTimer {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
.notif.notif-success { border-left-color: var(--green); }
.notif.notif-success::after { background: var(--green); }
.notif.notif-error   { border-left-color: var(--red); }
.notif.notif-error::after   { background: var(--red); }
.notif.notif-warning { border-left-color: var(--gold); }
.notif.notif-warning::after { background: var(--gold); }
.notif.notif-info    { border-left-color: var(--blue); }
.notif.notif-info::after    { background: var(--blue); }

.notif-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    clip-path: polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.notif-success .notif-icon { background: rgba(0,255,136,0.1); color: var(--green); }
.notif-error   .notif-icon { background: rgba(255,71,87,0.1);  color: var(--red); }
.notif-warning .notif-icon { background: rgba(255,193,7,0.1);  color: var(--gold); }
.notif-info    .notif-icon { background: rgba(33,150,243,0.1); color: var(--blue); }

.notif-body { flex:1; min-width:0; }
.notif-title {
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--white);
    margin-bottom: 2px;
}
.notif-msg {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.notif-close {
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    padding: 2px; font-size: 14px;
    line-height: 1; flex-shrink: 0;
    transition: color 0.2s;
}
.notif-close:hover { color: var(--white); }
.notif-out {
    animation: notifOut 0.25s ease forwards;
}
@keyframes notifOut {
    to { opacity:0; transform: translateX(30px); max-height:0; padding:0; margin:0; border-width:0; }
}

/* ── Chat FAB visible fix ─────────────────────────────────────────── */
.chat-fab {
    position: fixed !important;
    bottom: 90px !important;
    right: 24px !important;
    z-index: 9500 !important;
    pointer-events: auto !important;
    display: flex !important;
}
@media(max-width:768px) {
    .chat-fab { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS & TRANSITIONS — AEARN MINIMAL DARK
   ══════════════════════════════════════════════════════════════════ */

/* ── Page enter ──────────────────────────────────────────────────── */
.page-content {
    animation: pageEnter 0.5s cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes pageEnter {
    from { opacity:0; transform: translateY(18px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ── Staggered children ──────────────────────────────────────────── */
.stats-grid > .stat-card:nth-child(1) { animation: fadeUp 0.5s 0.05s both; }
.stats-grid > .stat-card:nth-child(2) { animation: fadeUp 0.5s 0.12s both; }
.stats-grid > .stat-card:nth-child(3) { animation: fadeUp 0.5s 0.19s both; }
.stats-grid > .stat-card:nth-child(4) { animation: fadeUp 0.5s 0.26s both; }

.grid-2 > .card:nth-child(1) { animation: fadeUp 0.5s 0.2s both; }
.grid-2 > .card:nth-child(2) { animation: fadeUp 0.5s 0.3s both; }

.profile-grid > .card:nth-child(1) { animation: fadeUp 0.5s 0.1s both; }
.profile-grid > .card:nth-child(2) { animation: fadeUp 0.5s 0.2s both; }
.profile-grid > .card:nth-child(3) { animation: fadeUp 0.5s 0.3s both; }

.page-header { animation: fadeUp 0.45s 0.0s both; }
.promo-banner { animation: fadeUp 0.5s 0.05s both; }

@keyframes fadeUp {
    from { opacity:0; transform: translateY(24px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ── Card hover — lift + glow line ──────────────────────────────── */
.card, .stat-card {
    transition: background 0.3s, transform 0.3s cubic-bezier(0.23,1,0.32,1);
    will-change: transform;
}
.card:hover    { transform: translateY(-3px); }
.stat-card:hover { transform: translateY(-2px); }

/* ── Button press ────────────────────────────────────────────────── */
.btn {
    transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
    will-change: transform;
}
.btn:active { transform: scale(0.96) translateY(1px) !important; }

/* ── Nav item underline slide ────────────────────────────────────── */
.hnav-item {
    transition: color 0.2s;
    position: relative;
}
.hnav-item::after {
    transition: left 0.3s cubic-bezier(0.23,1,0.32,1),
                right 0.3s cubic-bezier(0.23,1,0.32,1),
                opacity 0.2s;
}

/* ── Sidebar nav items ───────────────────────────────────────────── */
.nav-item {
    transition: background 0.25s, color 0.25s, padding-left 0.25s;
}
.nav-item:hover { padding-left: 20px; }
.nav-item.active { padding-left: 20px; }

/* ── Form inputs focus ───────────────────────────────────────────── */
.form-control {
    transition: background 0.3s, box-shadow 0.3s;
}

/* ── Progress bar fill ───────────────────────────────────────────── */
.progress-fill {
    transition: width 1.2s cubic-bezier(0.23,1,0.32,1);
}

/* ── Badge pop-in ────────────────────────────────────────────────── */
.badge, .level-badge {
    animation: badgePop 0.4s 0.4s both;
}
@keyframes badgePop {
    from { opacity:0; transform: scale(0.7); }
    to   { opacity:1; transform: scale(1); }
}

/* ── Table rows ──────────────────────────────────────────────────── */
tbody tr {
    transition: background 0.2s;
}

/* ── Chat window slide-up ────────────────────────────────────────── */
@keyframes chatSlideIn {
    from { opacity:0; transform: translateY(20px) scale(0.97); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
.chat-window.open {
    animation: chatSlideIn 0.3s cubic-bezier(0.23,1,0.32,1) both;
}

/* ── Chat FAB pulse when unread ──────────────────────────────────── */
.chat-unread-dot.show {
    animation: dotPulse 1.5s infinite;
}
@keyframes dotPulse {
    0%,100% { transform: scale(1); opacity:1; }
    50%      { transform: scale(1.4); opacity:0.7; }
}

/* ── Modal enter ─────────────────────────────────────────────────── */
@keyframes modalIn {
    from { opacity:0; transform: translateY(24px) scale(0.97); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

/* ── Notification entrance ───────────────────────────────────────── */
@keyframes notifIn {
    from { opacity:0; transform: translateX(28px); }
    to   { opacity:1; transform: translateX(0); }
}

/* ── Stat value counter shimmer ──────────────────────────────────── */
.stat-value {
    transition: color 0.4s;
}

/* ── Logo hover ──────────────────────────────────────────────────── */
.header-logo img {
    transition: opacity 0.2s, transform 0.3s cubic-bezier(0.23,1,0.32,1);
}
.header-logo:hover img {
    opacity: 0.75;
    transform: scale(1.04);
}

/* ── Sign out button ─────────────────────────────────────────────── */
.header-signout-btn, .topbar-signout {
    transition: background 0.25s, color 0.25s;
}

/* ── Bottom nav active dot animate ──────────────────────────────── */
.bottom-nav-item.active::before {
    animation: navLine 0.3s cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes navLine {
    from { left: 50%; right: 50%; opacity:0; }
    to   { left: 20%; right: 20%; opacity:1; }
}

/* ── Auth card appear ────────────────────────────────────────────── */
.auth-card {
    animation: authEnter 0.6s cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes authEnter {
    from { opacity:0; transform: translateY(32px) scale(0.98); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

/* ── Header enter ────────────────────────────────────────────────── */
.header {
    animation: headerDrop 0.5s cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes headerDrop {
    from { opacity:0; transform: translateY(-16px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ── Topbar enter (mobile) ───────────────────────────────────────── */
.topbar {
    animation: headerDrop 0.5s cubic-bezier(0.23,1,0.32,1) both;
}

/* ── Promo banner shimmer line ───────────────────────────────────── */
.promo-banner::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
    0%   { left: -100%; }
    100% { left: 200%; }
}

/* ── Level tier cards hover ──────────────────────────────────────── */
.level-tier-grid > div {
    transition: border-color 0.3s, transform 0.3s cubic-bezier(0.23,1,0.32,1), background 0.3s;
}
.level-tier-grid > div:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.05) !important;
}

/* ── Earnings timer pulse ────────────────────────────────────────── */
#earnTimer {
    animation: timerFade 1s ease-in-out infinite alternate;
}
@keyframes timerFade {
    from { opacity: 0.7; }
    to   { opacity: 1; }
}

/* ── Smooth page transitions via links ───────────────────────────── */
a {
    transition: color 0.2s, opacity 0.2s;
}

/* Disable animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   TRANSITIONS & ANIMATIONS — AEARN
   ══════════════════════════════════════════════════════════════════ */

/* ── Page enter / leave ──────────────────────────────────────────── */
body {
    transition: opacity 0.28s cubic-bezier(0.23,1,0.32,1);
}
body.page-leaving {
    opacity: 0 !important;
    transform: none;
}
.page-content {
    animation: pageEnter 0.55s cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes pageEnter {
    from { opacity:0; transform: translateY(20px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ── Reveal on scroll ────────────────────────────────────────────── */
.will-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s cubic-bezier(0.23,1,0.32,1),
                transform 0.55s cubic-bezier(0.23,1,0.32,1);
}
.will-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Card glow on mouse ──────────────────────────────────────────── */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(160px circle at var(--mx,50%) var(--my,50%),
        rgba(255,255,255,0.04), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 0;
}
.card:hover::before { opacity: 1; }

/* ── Stat card hover ─────────────────────────────────────────────── */
.stat-card {
    transition: transform 0.35s cubic-bezier(0.23,1,0.32,1),
                background 0.3s;
}
.stat-card:hover { transform: translateY(-3px); }

/* ── Blink cursor ────────────────────────────────────────────────── */
@keyframes blink {
    0%,100% { opacity:1; }
    50%      { opacity:0; }
}

/* ── Header entrance ─────────────────────────────────────────────── */
.header {
    animation: headerDrop 0.55s cubic-bezier(0.23,1,0.32,1) both;
}
.topbar {
    animation: headerDrop 0.55s cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes headerDrop {
    from { opacity:0; transform: translateY(-14px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ── Auth card ───────────────────────────────────────────────────── */
.auth-card {
    animation: authEnter 0.65s cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes authEnter {
    from { opacity:0; transform: translateY(36px) scale(0.98); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

/* ── Promo banner shimmer ────────────────────────────────────────── */
.promo-banner { overflow: hidden; position: relative; }
.promo-banner::after {
    content: '';
    position: absolute;
    top: 0; left: -200%; width: 80%; height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.025),
        transparent);
    animation: shimmer 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shimmer {
    0%   { left: -200%; }
    100% { left: 250%; }
}

/* ── Page-header h1 ──────────────────────────────────────────────── */
.page-header h1 {
    animation: none; /* typing.js handles it */
}
.page-header {
    animation: fadeUp 0.5s cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes fadeUp {
    from { opacity:0; transform: translateY(18px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ── Button interactions ─────────────────────────────────────────── */
.btn {
    transition: background 0.3s cubic-bezier(0.23,1,0.32,1),
                transform  0.3s cubic-bezier(0.23,1,0.32,1),
                box-shadow 0.3s,
                color      0.2s !important;
    will-change: transform;
}
.btn:active { transform: scale(0.96) !important; }

/* ── Nav items ───────────────────────────────────────────────────── */
.nav-item {
    transition: background 0.25s, color 0.2s, padding-left 0.3s cubic-bezier(0.23,1,0.32,1);
}
.nav-item:hover  { padding-left: 22px !important; }
.nav-item.active { padding-left: 22px !important; }

/* ── Form controls ───────────────────────────────────────────────── */
.form-control {
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.form-control:focus {
    animation: inputPop 0.2s cubic-bezier(0.23,1,0.32,1);
}
@keyframes inputPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.01); }
    100% { transform: scale(1); }
}

/* ── Bottom nav active line ──────────────────────────────────────── */
.bottom-nav-item::after {
    transition: left 0.35s cubic-bezier(0.23,1,0.32,1),
                right 0.35s cubic-bezier(0.23,1,0.32,1),
                opacity 0.25s;
}

/* ── Notification ────────────────────────────────────────────────── */
@keyframes notifIn {
    from { opacity:0; transform: translateX(32px); }
    to   { opacity:1; transform: translateX(0); }
}
@keyframes notifOut {
    to { opacity:0; transform: translateX(32px) scale(0.95); max-height:0; padding:0; margin:0; }
}

/* ── Chat FAB ────────────────────────────────────────────────────── */
.chat-fab {
    transition: transform 0.3s cubic-bezier(0.23,1,0.32,1),
                opacity 0.2s !important;
}
.chat-fab:hover { transform: translateY(-4px) !important; }

/* ── Earnings timer pulse ────────────────────────────────────────── */
#earnTimer svg {
    animation: rotate 4s linear infinite;
    transform-origin: center;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Logo hover ──────────────────────────────────────────────────── */
.header-logo img {
    transition: opacity 0.2s, transform 0.35s cubic-bezier(0.23,1,0.32,1);
}
.header-logo:hover img {
    opacity: 0.7;
    transform: scale(1.06);
}

/* ── Table rows ──────────────────────────────────────────────────── */
tbody tr {
    transition: background 0.2s;
}

/* ── Sign out button ─────────────────────────────────────────────── */
.header-signout-btn {
    transition: background 0.25s, color 0.2s, transform 0.2s;
}
.header-signout-btn:hover { transform: translateX(2px); }

/* ── Progress bar animated fill ─────────────────────────────────── */
.progress-fill {
    transition: width 1.4s cubic-bezier(0.23,1,0.32,1) !important;
}

/* ── Sidebar slide ───────────────────────────────────────────────── */
.sidebar {
    transition: left 0.38s cubic-bezier(0.23,1,0.32,1) !important;
}

/* ── Reduce motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Site-wide page corners ─────────────────────────────────────── */
.site-corner {
    position: fixed !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    width: 34px !important; height: 34px !important;
    display: block !important;
}
.site-corner-tl { top: 18px !important; left: 18px !important;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    border-left: 1px solid rgba(255,255,255,0.2) !important; }
.site-corner-tr { top: 18px !important; right: 18px !important;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    border-right: 1px solid rgba(255,255,255,0.2) !important; }
.site-corner-bl { bottom: 18px !important; left: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    border-left: 1px solid rgba(255,255,255,0.2) !important; }
.site-corner-br { bottom: 18px !important; right: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    border-right: 1px solid rgba(255,255,255,0.2) !important; }

/* ══════════════════════════════════════════════════════════════════
   NOTIFICATION SYSTEM — ALL WHITE
   ══════════════════════════════════════════════════════════════════ */

#notif-container {
    position: fixed;
    top: 76px; right: 20px;
    z-index: 99999;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none; width: 300px;
}
@media(max-width:768px) {
    #notif-container { top: 64px; right: 8px; left: 8px; width: auto; }
}

.notif {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: rgba(10,10,10,0.97);
    backdrop-filter: blur(20px);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    border: 1px solid rgba(255,255,255,0.12);
    border-left: 3px solid rgba(255,255,255,0.8);
    pointer-events: auto;
    position: relative; overflow: hidden;
    animation: notifSlideIn 0.35s cubic-bezier(0.23,1,0.32,1);
}

/* Timer bar — white for all */
.notif::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: rgba(255,255,255,0.3);
    animation: notifTimer 4s linear forwards;
    transform-origin: left;
}
@keyframes notifTimer {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.notif-icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    clip-path: polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
    background: rgba(255,255,255,0.1);
    color: #ffffff;
}

.notif-body { flex: 1; min-width: 0; }
.notif-title {
    font-family: var(--font-display);
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: #ffffff; margin-bottom: 3px;
}
.notif-msg {
    font-family: var(--font-body);
    font-size: 11px; color: rgba(255,255,255,0.55);
    text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.5;
}

.notif-close {
    background: none; border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer; padding: 2px 4px;
    font-size: 16px; line-height: 1;
    flex-shrink: 0; transition: color 0.2s;
    font-family: var(--font-display);
}
.notif-close:hover { color: #ffffff; }

@keyframes notifSlideIn {
    from { opacity:0; transform: translateX(24px) scale(0.97); }
    to   { opacity:1; transform: translateX(0) scale(1); }
}
.notif-out {
    animation: notifSlideOut 0.22s ease forwards !important;
}
@keyframes notifSlideOut {
    to { opacity:0; transform: translateX(28px); max-height:0; padding:0; margin:0; border-width:0; }
}

/* ══

/* ══════════════════════════════════════════════════════════════════
   CHAT FAB & WINDOW — CLEAN FINAL
   ══════════════════════════════════════════════════════════════════ */

.chat-fab {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    width: 52px !important;
    height: 52px !important;
    background: rgba(255,255,255,0.12) !important;
    color: var(--white) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9500 !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
    transition: background 0.25s, transform 0.25s !important;
    pointer-events: auto !important;
}
.chat-fab:hover {
    background: rgba(255,255,255,0.22) !important;
    transform: translateY(-3px) !important;
}
.chat-fab svg { pointer-events: none !important; }

.chat-window {
    position: fixed !important;
    bottom: 92px !important;   /* FAB height(52) + gap(12) + bottom(28) */
    right: 28px !important;
    width: 340px !important;
    max-height: calc(100vh - 120px) !important;
    height: 480px !important;
    background: #0f0f0f !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)) !important;
    display: none !important;
    flex-direction: column !important;
    z-index: 9499 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    animation: none !important;
}
.chat-window.open {
    display: flex !important;
    animation: chatSlideUp 0.3s cubic-bezier(0.23,1,0.32,1) both !important;
}
@keyframes chatSlideUp {
    from { opacity:0; transform: translateY(20px) scale(0.97); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Mobile — window goes above bottom nav */
@media (max-width: 768px) {
    .chat-fab {
        bottom: 72px !important;   /* above bottom-nav (60px) + gap */
        right: 16px !important;
    }
    .chat-window {
        bottom: 136px !important;  /* FAB(52) + gap(12) + bottom(72) */
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        height: 420px !important;
        max-height: calc(100vh - 150px) !important;
    }
}

/* ── VIP Banner ──────────────────────────────────────────────────── */
.promo-vip {
    background: rgba(255,193,7,0.03) !important;
    border-color: rgba(255,193,7,0.12) !important;
}
.promo-vip::before {
    background: linear-gradient(90deg, transparent, rgba(255,193,7,0.25), transparent) !important;
}
.promo-vip::after {
    background: linear-gradient(90deg, transparent, rgba(255,193,7,0.06), transparent) !important;
}

/* ── Spin animation for loading states ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Referral Banner ───────────────────────────────────────────── */
.promo-referral {
    background: rgba(34,211,165,0.02) !important;
    border-color: rgba(34,211,165,0.12) !important;
}
.promo-referral::before {
    background: linear-gradient(90deg, transparent, rgba(34,211,165,0.2), transparent) !important;
}
.promo-referral::after {
    background: linear-gradient(90deg, transparent, rgba(34,211,165,0.05), transparent) !important;
}
.promo-highlight-green {
    color: var(--green);
    text-decoration: underline;
}

/* Referral unlock button hover */
.promo-referral .promo-btn:hover {
    background: rgba(34,211,165,0.25) !important;
    border-color: rgba(34,211,165,0.6) !important;
    color: #fff !important;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}