/* ================================================
   Vined CryptoHub — Glassmorphism UI 2026
   ================================================ */
:root {
    --sidebar-w: 280px;
    --sidebar-mini: 72px;
    --bg: #050507;
    --accent: #00aaff;
    --accent-glow: rgba(0,170,255,.4);
    --purple: #bd00ff;
    --purple-glow: rgba(189,0,255,.4);
    --green: #00ff88;
    --red: #ff0044;
    --yellow: #ffbb00;
    --glass: rgba(255,255,255,.05);
    --glass-h: rgba(255,255,255,.08);
    --glass-b: rgba(255,255,255,.1);
    --text: #ffffff;
    --text-dim: #94a3b8;
    --radius: 20px;
    --radius-sm: 12px;
    --shadow: 0 25px 50px -12px rgba(0,0,0,.6);
    --tr: all .35s cubic-bezier(.4,0,.2,1);
}

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

body {
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 20% 80%,rgba(120,119,198,.12) 0%,transparent 50%),
        radial-gradient(ellipse at 80% 20%,rgba(255,119,198,.10) 0%,transparent 50%),
        radial-gradient(ellipse at 50% 50%,rgba(0,170,255,.06) 0%,transparent 70%);
    background-attachment: fixed;
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
    min-height: 100vh;
}

/* ── Orbs ── */
.bg-orb {
    position: fixed; border-radius: 50%;
    filter: blur(80px); pointer-events: none; z-index: 0;
    animation: float 8s ease-in-out infinite;
}
.orb-1{width:400px;height:400px;background:radial-gradient(circle,rgba(0,170,255,.15) 0%,transparent 70%);top:-10%;left:-5%;animation-delay:0s}
.orb-2{width:350px;height:350px;background:radial-gradient(circle,rgba(189,0,255,.12) 0%,transparent 70%);top:40%;right:-5%;animation-delay:3s}
.orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(0,255,136,.08) 0%,transparent 70%);bottom:10%;left:30%;animation-delay:6s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}

/* ── Layout ── */
.app-container{position:relative;z-index:1;min-height:100vh}

/* ================================================
   SIDEBAR
   ================================================ */
.sidebar {
    position: fixed; top: 0; left: 0;
    width: var(--sidebar-mini);
    height: 100vh;
    background: rgba(8,10,20,.93);
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    border-right: 1px solid var(--glass-b);
    z-index: 1000;
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: width .35s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
}
.sidebar.expanded {
    width: var(--sidebar-w);
    box-shadow: 8px 0 40px rgba(0,0,0,.5);
}

/* Header */
.sidebar-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--glass-b);
}
.logo-wrapper {
    display: flex; align-items: center; gap: 12px;
    padding: 1.25rem 18px;
    text-decoration: none; color: var(--text);
    overflow: hidden;
}
.logo-icon {
    width: 36px; height: 36px; min-width: 36px;
    background: linear-gradient(135deg,var(--accent),var(--purple));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.15rem;
    box-shadow: 0 0 20px var(--accent-glow);
    flex-shrink: 0;
}
.logo-text {
    font-weight: 800; font-size: 1.1rem;
    opacity: 0; transform: translateX(-10px);
    transition: opacity .25s ease .05s, transform .25s ease .05s;
    overflow: hidden;
}
.sidebar.expanded .logo-text{opacity:1;transform:translateX(0)}
.logo-text .accent{background:linear-gradient(45deg,var(--accent),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Lang switch (below logo) */
.lang-row {
    display: flex; align-items: center; gap: 6px;
    padding: 0.6rem 12px;
    border-bottom: 1px solid var(--glass-b);
    overflow: hidden;
    min-height: 44px;
}
.sidebar:not(.expanded) .lang-row { justify-content: center; padding: 0.6rem 0; }

.lang-btn {
    padding: .35rem .65rem;
    background: var(--glass);
    border: 1px solid var(--glass-b);
    border-radius: 8px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: .75rem; font-weight: 700;
    font-family: inherit;
    transition: var(--tr);
    min-width: 34px; text-align: center;
}
.lang-btn.active,.lang-btn:hover{background:var(--accent);color:#000;border-color:var(--accent)}
.sidebar:not(.expanded) .lang-btn:not(.active){display:none}
.sidebar:not(.expanded) .lang-btn.active{min-width:42px;font-size:.7rem}

/* Nav */
.sidebar-nav {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: .75rem 0; scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar{display:none}

.sidebar .nav-item {
    display: flex; align-items: center; gap: 14px;
    padding: .85rem 18px;
    color: var(--text-dim); text-decoration: none;
    transition: var(--tr);
    border-left: 3px solid transparent;
    overflow: hidden;
    position: relative;
}
.sidebar .nav-item i {
    font-size: 1rem; width: 20px; min-width: 20px;
    text-align: center; flex-shrink: 0;
}
.nav-text {
    opacity: 0; transform: translateX(-8px);
    transition: opacity .2s ease .08s, transform .2s ease .08s;
    overflow: hidden; white-space: nowrap; font-weight: 500;
}
.sidebar.expanded .nav-text{opacity:1;transform:translateX(0)}
.sidebar .nav-item:hover,.sidebar .nav-item.active{color:var(--text);background:var(--glass-h);border-left-color:var(--accent)}
.sidebar .nav-item.active{color:var(--accent)}

/* Footer */
.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--glass-b);
    overflow: hidden;
}
.bot-btn {
    display: flex; align-items: center; gap: 12px;
    padding: .85rem 18px;
    color: var(--text-dim); text-decoration: none;
    transition: var(--tr);
    border-left: 3px solid transparent;
    overflow: hidden;
}
.bot-btn:hover{color:#29a7e8;background:var(--glass);border-left-color:#29a7e8}
.bot-btn i{font-size:1.1rem;min-width:20px;text-align:center;flex-shrink:0}
.bot-text {
    opacity: 0; transform: translateX(-8px);
    transition: opacity .2s ease .08s, transform .2s ease .08s;
    white-space: nowrap; overflow: hidden; font-weight: 500;
}
.sidebar.expanded .bot-text{opacity:1;transform:translateX(0)}

/* ── Main content ── */
.main-content {
    margin-left: var(--sidebar-mini);
    padding: 2rem 3% 7rem;
    width: calc(100% - var(--sidebar-mini));
    min-width: 0;
}

/* ================================================
   SHARED COMPONENTS
   ================================================ */

/* Glass card */
.glass-card {
    background: var(--glass);
    border: 1px solid var(--glass-b);
    border-radius: var(--radius);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 1.5rem;
    transition: border-color .25s, box-shadow .25s;
}
.glass-card:hover { border-color: rgba(255,255,255,.14); }
.glass-card.glow { border-color: rgba(0,170,255,.25); box-shadow: 0 0 30px rgba(0,170,255,.08); }

/* Buttons */
.btn,.cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: .85rem 2rem;
    font-weight: 700; font-family: inherit;
    text-decoration: none; border-radius: var(--radius-sm);
    transition: var(--tr); font-size: .95rem;
    cursor: pointer; border: none; white-space: nowrap;
}
.btn-primary,.cta-btn.primary {
    background: linear-gradient(135deg,var(--accent),var(--purple));
    color: #fff; box-shadow: 0 10px 30px var(--accent-glow);
}
.btn-primary:hover,.cta-btn.primary:hover{transform:translateY(-3px);box-shadow:0 15px 35px var(--accent-glow)}
.btn-secondary,.cta-btn.secondary {
    background: var(--glass); border: 1px solid var(--glass-b);
    color: var(--text); backdrop-filter: blur(10px);
}
.btn-secondary:hover,.cta-btn.secondary:hover{border-color:var(--accent);background:rgba(0,170,255,.1);transform:translateY(-2px)}
.btn-ghost{background:transparent;border:1px solid var(--glass-b);color:var(--text-dim)}
.btn-ghost:hover{color:var(--text);border-color:rgba(255,255,255,.25)}
.btn-sm{padding:.5rem 1.1rem;font-size:.82rem;border-radius:8px}
.btn-tg{background:linear-gradient(135deg,#229ED9,#0088cc);color:#fff;box-shadow:0 8px 20px rgba(34,158,217,.35)}
.btn-tg:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(34,158,217,.5)}

/* Filter buttons */
.filter-btn {
    padding: .55rem 1.3rem;
    background: var(--glass); border: 1px solid var(--glass-b);
    border-radius: 50px; color: var(--text-dim);
    cursor: pointer; font-family: inherit;
    font-weight: 600; font-size: .88rem; transition: var(--tr);
}
.filter-btn:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.filter-btn.active{background:linear-gradient(135deg,var(--accent),var(--purple));color:#000;border-color:transparent;box-shadow:0 5px 15px var(--accent-glow)}

/* Section */
.section-header {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem; flex-wrap: wrap;
}
.section-title {
    font-size: 1.55rem; font-weight: 700;
    display: flex; align-items: center; gap: 10px;
}
.status-time{font-size:.82rem;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.section-actions{margin-left:auto;display:flex;gap:.5rem;align-items:center}

/* Page header */
.page-header { padding: 2rem 0 2rem; }
.page-header h1 {
    font-size: clamp(1.65rem, 4vw, 2.2rem); font-weight: 800; margin-bottom: .4rem;
    background: linear-gradient(120deg, #fff 40%, var(--accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-header p { color: var(--text-dim); font-size: .95rem; }

/* Forms */
.form-group{margin-bottom:1.25rem}
.form-label {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--text-dim); margin-bottom: .5rem;
    text-transform: uppercase; letter-spacing: .05em;
}
.form-input,.form-select {
    width: 100%;
    background: var(--glass); border: 1px solid var(--glass-b);
    border-radius: var(--radius-sm);
    padding: .8rem 1rem; color: var(--text);
    font-family: inherit; font-size: .95rem;
    transition: var(--tr); outline: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.form-input:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,170,255,.15)}
.form-input::placeholder{color:var(--text-dim)}
.form-select{cursor:pointer;appearance:none}
.form-select option{background:#0d1117}

/* Search */
.search-wrapper{position:relative;flex:1;max-width:380px}
.search-wrapper i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:.9rem;pointer-events:none}
.search-input {
    width: 100%;
    background: var(--glass); border: 1px solid var(--glass-b);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem .75rem 2.75rem;
    color: var(--text); font-family: inherit; font-size: .95rem;
    transition: var(--tr); outline: none;
    backdrop-filter: blur(10px);
}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,170,255,.15)}
.search-input::placeholder{color:var(--text-dim)}

/* Badges */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: .22rem .65rem; border-radius: 20px;
    font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}
.badge-online{background:rgba(0,255,136,.15);color:var(--green)}
.badge-offline{background:rgba(255,0,68,.15);color:var(--red)}
.badge-slow{background:rgba(255,187,0,.15);color:var(--yellow)}
.badge-unknown{background:rgba(148,163,184,.1);color:var(--text-dim)}

/* Neon dot */
.ndot{width:7px;height:7px;border-radius:50%;display:inline-block;animation:pulse-dot 2s infinite;flex-shrink:0}
.ndot-g{background:var(--green);box-shadow:0 0 6px var(--green)}
.ndot-r{background:var(--red);box-shadow:0 0 6px var(--red)}
.ndot-y{background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
@keyframes pulse-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}

/* Table */
.data-table{width:100%;border-collapse:collapse;font-size:.9rem}
.data-table th{text-align:left;padding:.9rem 1.2rem;color:var(--text-dim);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--glass-b)}
.data-table td{padding:.9rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.data-table tr:hover td{background:var(--glass)}
.data-table tr:last-child td{border-bottom:none}

/* Gradient text */
.gradient-text{background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Loading */
.spinner{width:36px;height:36px;border:3px solid rgba(0,170,255,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:2rem auto}
@keyframes spin{to{transform:rotate(360deg)}}

.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-dim)}
.empty-state i{font-size:2.5rem;margin-bottom:1rem;opacity:.25;display:block}

/* Skeleton */
.skeleton-card{
    background:linear-gradient(90deg,var(--glass) 25%,rgba(255,255,255,.08) 50%,var(--glass) 75%);
    background-size:200% 100%;
    border:1px solid rgba(255,255,255,.04);
    border-radius:var(--radius);
    animation:shimmer 1.5s infinite linear;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ================================================
   HERO
   ================================================ */
.hero-section {
    text-align: center; padding: 4.5rem 1rem 5.5rem; position: relative;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: .5rem 1.4rem;
    background: rgba(0,170,255,.1); border: 1px solid rgba(0,170,255,.3);
    border-radius: 50px; color: var(--accent);
    font-size: .82rem; font-weight: 700; margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}
.hero-badge::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%;animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.hero-title {
    font-size: clamp(2.4rem,7vw,4.8rem);
    font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem;
    background: linear-gradient(135deg,#fff 0%,var(--accent) 50%,var(--purple) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: -.02em;
}
.hero-subtitle {
    font-size: 1.1rem; color: var(--text-dim);
    max-width: 560px; margin: 0 auto 3rem; line-height: 1.75;
}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ================================================
   STATUS SECTION (Home widget)
   ================================================ */
.status-section{margin-bottom:3rem}
.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.2rem}

.status-card {
    background: var(--glass); border: 1px solid var(--glass-b);
    border-radius: var(--radius); padding: 1.4rem;
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    transition: var(--tr); position: relative; overflow: hidden;
    cursor: pointer;
}
.status-card::after {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    opacity: 0; transition: opacity .3s;
}
.status-card.online::after{background:linear-gradient(90deg,var(--green),var(--accent));opacity:1}
.status-card.offline::after{background:linear-gradient(90deg,var(--red),#ff6688);opacity:1}
.status-card.slow::after{background:linear-gradient(90deg,var(--yellow),#ffdd44);opacity:1}
.status-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.18);box-shadow:var(--shadow)}

.status-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.exchange-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem; flex-shrink: 0;
    overflow: hidden;
}
.exchange-avatar-logo {
    padding: 6px;
    box-sizing: border-box;
}
.exchange-avatar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 2px;
}
.status-card-name{font-weight:700;font-size:.95rem;margin-bottom:.3rem}
.status-card-meta{font-size:.78rem;color:var(--text-dim);display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace}
.ping-val{color:var(--green)}
.ping-val.slow{color:var(--yellow)}
.down-timer-text{color:var(--red);font-size:.75rem;font-family:'JetBrains Mono',monospace;margin-top:.2rem}
.spark{display:block;margin-top:.4rem;opacity:.85}
.report-row{display:flex;align-items:center;gap:.4rem;margin-top:.4rem}
.report-btn{background:none;border:none;cursor:pointer;font-size:.68rem;color:var(--text-dim);padding:.2rem .4rem;border-radius:6px;transition:color .2s,background .2s;line-height:1;font-family:inherit}
.report-btn:hover{color:var(--yellow);background:rgba(255,187,0,.08)}
.report-count{font-size:.68rem;font-family:'JetBrains Mono',monospace;color:var(--yellow);background:rgba(255,187,0,.12);border-radius:10px;padding:.1rem .35rem;font-weight:700}
.uptime-bar-wrap{display:flex;align-items:center;gap:6px;margin-top:.35rem}
.uptime-bar-track{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.uptime-bar-fill{height:100%;border-radius:2px;transition:width .6s ease}
.uptime-pct{font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:600;white-space:nowrap;min-width:38px;text-align:right}

/* ================================================
   PREMIUM
   ================================================ */
.premium-section{margin-bottom:3rem}
.premium-card {
    background: linear-gradient(135deg,rgba(189,0,255,.12) 0%,rgba(0,170,255,.12) 100%);
    border: 1px solid rgba(189,0,255,.25);
    border-radius: 24px; padding: 1.5rem 2rem;
    display: flex; align-items: center; gap: 2rem;
    position: relative; overflow: hidden;
}
.premium-card::before{content:'';position:absolute;top:-50%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(189,0,255,.15) 0%,transparent 60%);pointer-events:none}
.premium-badge-label{position:absolute;top:1.1rem;right:1.5rem;background:var(--purple);color:#fff;padding:.3rem 1rem;border-radius:50px;font-weight:700;font-size:.75rem;box-shadow:0 5px 15px var(--purple-glow)}
.premium-price{font-family:'JetBrains Mono',monospace;font-size:2.2rem;font-weight:800;background:linear-gradient(45deg,var(--purple),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;white-space:nowrap}
.premium-price span{font-size:.95rem;opacity:.7}
.premium-content{flex:1}
.premium-content h3{font-size:1.15rem;font-weight:700;margin-bottom:.65rem}
.premium-features{list-style:none;margin-bottom:1rem}
.premium-features li{display:flex;align-items:center;gap:8px;padding:.3rem 0;color:var(--text-dim);font-size:.85rem}
.premium-features li i{color:var(--green);font-size:.8rem}
.cta-btn.premium-cta{background:var(--purple);color:#fff;box-shadow:0 10px 25px var(--purple-glow)}
.cta-btn.premium-cta:hover{transform:translateY(-3px);box-shadow:0 15px 30px var(--purple-glow)}

/* ================================================
   FEATURES
   ================================================ */
.features-section{margin-bottom:3rem}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem}
.feature-card {
    background: var(--glass); border: 1px solid var(--glass-b);
    border-radius: var(--radius); padding: 2rem;
    backdrop-filter: blur(15px); transition: var(--tr); text-align: center;
}
.feature-card:hover{transform:translateY(-7px);border-color:var(--accent);box-shadow:0 20px 40px rgba(0,170,255,.15)}
.feature-icon-wrap {
    width: 75px; height: 75px;
    background: rgba(0,170,255,.1); border: 1px solid rgba(0,170,255,.2);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem; font-size: 1.8rem; color: var(--accent);
    transition: var(--tr);
}
.feature-card:hover .feature-icon-wrap{background:rgba(0,170,255,.15);box-shadow:0 0 28px rgba(0,170,255,.3)}
.feature-card h3{font-size:1.15rem;font-weight:700;margin-bottom:.65rem}
.feature-card p{color:var(--text-dim);font-size:.88rem;line-height:1.65}

/* ================================================
   STATUS PAGE (full)
   ================================================ */
.status-controls {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem; flex-wrap: wrap;
}
.filter-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ================================================
   PORTFOLIO
   ================================================ */
.portfolio-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card {
    background: var(--glass); border: 1px solid var(--glass-b);
    border-radius: var(--radius-sm); padding: 1.2rem;
    backdrop-filter: blur(15px); transition: border-color .2s, box-shadow .2s;
}
.stat-card:hover { border-color: rgba(255,255,255,.16); box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.stat-label{font-size:.73rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem;font-weight:600}
.stat-value{font-size:1.55rem;font-weight:800;font-family:'JetBrains Mono',monospace;letter-spacing:-.02em}
.stat-value.pos{color:var(--green);text-shadow:0 0 20px rgba(0,255,136,.3)}
.stat-value.neg{color:var(--red);text-shadow:0 0 20px rgba(255,0,68,.2)}
.stat-sub{font-size:.78rem;color:var(--text-dim);margin-top:.2rem}

.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.chart-wrapper{display:flex;align-items:center;justify-content:center;padding:1rem;height:260px;position:relative}
.chart-empty{position:absolute;text-align:center;color:var(--text-dim);font-size:.9rem}

.asset-row{display:flex;align-items:center;gap:.75rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.asset-row:last-child{border-bottom:none}
.asset-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex-shrink:0}
.asset-name{font-weight:700;font-size:.92rem}
.asset-amount{font-size:.8rem;color:var(--text-dim)}
.asset-value{margin-left:auto;text-align:right}
.asset-price{font-weight:700;font-size:.9rem;font-family:'JetBrains Mono',monospace}
.asset-pnl{font-size:.75rem}
.asset-pnl.pos{color:var(--green)}
.asset-pnl.neg{color:var(--red)}
.asset-del{background:none;border:none;color:rgba(255,0,68,.4);cursor:pointer;font-size:.9rem;padding:.25rem;transition:var(--tr);margin-left:.5rem}
.asset-del:hover{color:var(--red)}

/* ================================================
   LEARN
   ================================================ */
.learn-filters{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:2rem}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.4rem}

.article-card {
    background: var(--glass); border: 1px solid var(--glass-b);
    border-radius: var(--radius); overflow: hidden;
    backdrop-filter: blur(15px); transition: var(--tr);
    cursor: pointer; display: flex; flex-direction: column;
}
.article-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.18);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.article-banner {
    height: 130px; display: flex; align-items: center; justify-content: center;
    font-size: 3.2rem; position: relative; overflow: hidden;
}
.article-body{padding:1.4rem;flex:1;display:flex;flex-direction:column}
.article-tag{display:inline-block;padding:.18rem .65rem;border-radius:50px;font-size:.68rem;font-weight:700;margin-bottom:.65rem;text-transform:uppercase;letter-spacing:.05em}
.tag-basics{background:rgba(0,170,255,.15);color:var(--accent)}
.tag-trading{background:rgba(0,255,136,.15);color:var(--green)}
.tag-security{background:rgba(255,0,68,.15);color:var(--red)}
.tag-defi{background:rgba(189,0,255,.15);color:var(--purple)}
.tag-taxes{background:rgba(255,187,0,.15);color:var(--yellow)}
.article-title{font-size:1rem;font-weight:700;margin-bottom:.6rem;line-height:1.4}
.article-excerpt{font-size:.85rem;color:var(--text-dim);line-height:1.65;flex:1;margin-bottom:.75rem}
.article-meta{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:var(--text-dim);padding-top:.75rem;border-top:1px solid var(--glass-b)}

/* Modal */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.82); backdrop-filter: blur(10px);
    z-index: 2000; display: flex; align-items: flex-start;
    justify-content: center; padding: 2rem; overflow-y: auto;
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal-box {
    background: #0b0e1a; border: 1px solid var(--glass-b);
    border-radius: var(--radius); width: 100%; max-width: 820px;
    padding: 2.5rem; transform: translateY(24px);
    transition: transform .3s ease; position: relative; margin: auto;
}
.modal-overlay.active .modal-box{transform:translateY(0)}
.modal-close {
    position: absolute; top: 1.25rem; right: 1.25rem;
    width: 34px; height: 34px;
    background: var(--glass); border: 1px solid var(--glass-b);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-dim); font-size: 1rem;
    transition: var(--tr);
}
.modal-close:hover{color:var(--text);background:var(--glass-h)}
.modal-tag{margin-bottom:.75rem}
.modal-title{font-size:1.7rem;font-weight:800;margin-bottom:.4rem;line-height:1.25}
.modal-meta-line{color:var(--text-dim);font-size:.85rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--glass-b)}
.modal-body{line-height:1.85;color:rgba(255,255,255,.85)}
.modal-body h3{font-size:1.1rem;font-weight:700;margin:1.5rem 0 .65rem;color:var(--text)}
.modal-body p{margin-bottom:.9rem}
.modal-body ul{padding-left:1.5rem;margin-bottom:.9rem}
.modal-body li{margin-bottom:.4rem}
.modal-body .highlight{background:rgba(0,170,255,.07);border-left:3px solid var(--accent);padding:.9rem 1.25rem;border-radius:0 8px 8px 0;margin:1.25rem 0;color:var(--text-dim);font-size:.9rem}
.modal-body strong{color:var(--text)}

/* ================================================
   SCAM CHECKER
   ================================================ */
.scam-wrap{max-width:680px;margin:0 auto}
.scam-analyzing{display:none;text-align:center;padding:2rem}
.scam-analyzing p{color:var(--text-dim);margin-top:1rem}

.verdict-card{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--radius);padding:2rem;text-align:center;backdrop-filter:blur(15px);display:none}
.verdict-card.visible{display:block}
.verdict-icon{font-size:3.5rem;margin-bottom:.75rem}
.verdict-title{font-size:1.4rem;font-weight:800;margin-bottom:.4rem}
.verdict-desc{color:var(--text-dim);font-size:.9rem;margin-bottom:1.5rem}
.verdict-card.safe{border-color:rgba(0,255,136,.3)}
.verdict-card.safe .verdict-title{color:var(--green)}
.verdict-card.warning{border-color:rgba(255,187,0,.3)}
.verdict-card.warning .verdict-title{color:var(--yellow)}
.verdict-card.danger{border-color:rgba(255,0,68,.3)}
.verdict-card.danger .verdict-title{color:var(--red)}

.scores-row{display:flex;gap:1.5rem;justify-content:center;margin:1.5rem 0;flex-wrap:wrap}
.score-item{text-align:center}
.score-label{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.4rem}
.score-val{font-size:1.1rem;font-weight:800;font-family:'JetBrains Mono',monospace}
.score-bar{width:60px;height:5px;background:var(--glass-b);border-radius:3px;margin:.3rem auto 0;overflow:hidden}
.score-fill{height:100%;border-radius:3px;transition:width 1s ease}

.disclaimer-box{background:rgba(255,187,0,.05);border:1px solid rgba(255,187,0,.2);border-radius:var(--radius-sm);padding:1.1rem 1.4rem;margin-top:2rem;font-size:.82rem;color:var(--text-dim);line-height:1.65}
.disclaimer-box strong{color:var(--yellow)}

/* ================================================
   AIRDROPS
   ================================================ */
.coming-banner{text-align:center;padding:3.5rem 2rem}
.coming-icon{font-size:4.5rem;margin-bottom:1.25rem;display:block;animation:float 3s ease-in-out infinite}
.coming-banner h2{font-size:1.9rem;font-weight:800;margin-bottom:.75rem}
.coming-banner p{color:var(--text-dim);max-width:480px;margin:0 auto 2rem;line-height:1.7}

.airdrop-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--glass-b);background:var(--glass);backdrop-filter:blur(15px);margin-bottom:2rem}

.exchanges-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:.85rem}
.exc-ref-card {
    background: var(--glass); border: 1px solid var(--glass-b);
    border-radius: var(--radius-sm); padding: 1.1rem;
    text-align: center; text-decoration: none; color: var(--text);
    transition: var(--tr); display: flex; flex-direction: column;
    align-items: center; gap: .6rem; cursor: pointer; position: relative; overflow: hidden;
}
.exc-ref-card::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity .25s; background:linear-gradient(135deg,rgba(0,170,255,.06),rgba(189,0,255,.04)); }
.exc-ref-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,170,255,.18); }
.exc-ref-card:hover::before { opacity:1; }
.exc-ref-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;border:2px solid rgba(255,255,255,.1)}
.exc-ref-card .exchange-avatar{border:2px solid rgba(255,255,255,.1);flex-shrink:0}
.exc-ref-name{font-weight:700;font-size:.9rem}
.exc-ref-sub{font-size:.72rem;color:var(--text-dim)}
.exc-ref-card .ref-bonus{font-size:.72rem;color:var(--green);font-weight:700;display:flex;align-items:center;gap:.25rem}

/* ================================================
   MOBILE FULLSCREEN MENU
   ================================================ */
.mobile-overlay {
    position: fixed; inset: 0;
    background: rgba(5,5,7,.97); backdrop-filter: blur(20px);
    z-index: 1500; display: flex; flex-direction: column;
    padding: 0; transform: translateY(100%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
}
.mobile-overlay.active{transform:translateY(0)}
.mob-overlay-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--glass-b);
}
.mob-overlay-header .logo-wrapper{text-decoration:none;color:var(--text)}
.mob-close{background:none;border:none;color:var(--text-dim);font-size:1.4rem;cursor:pointer;padding:.5rem;transition:var(--tr)}
.mob-close:hover{color:var(--text)}
.mob-menu-body{padding:1rem 1rem 2rem;flex:1}
.mob-menu-item {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1rem; color: var(--text); text-decoration: none;
    border-radius: var(--radius-sm); transition: var(--tr);
    margin-bottom: .5rem; border: 1px solid transparent;
}
.mob-menu-item:hover,.mob-menu-item.active{background:var(--glass);border-color:var(--glass-b)}
.mob-menu-icon{width:46px;height:46px;border-radius:12px;background:var(--glass);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.mob-menu-info h4{font-weight:700;font-size:.95rem;margin-bottom:.2rem}
.mob-menu-info p{font-size:.8rem;color:var(--text-dim)}
.mob-lang-section{padding:1rem;border-top:1px solid var(--glass-b);display:flex;align-items:center;gap:.75rem}
.mob-lang-label{font-size:.85rem;color:var(--text-dim);font-weight:500}
.mob-lang-btns{display:flex;gap:.5rem}

/* ================================================
   MOBILE BOTTOM NAV
   ================================================ */
.mobile-bottom-nav {
    display: none; position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(5,5,7,.97); backdrop-filter: blur(30px);
    border-top: 1px solid var(--glass-b);
    padding: .4rem 0 env(safe-area-inset-bottom, .4rem);
    z-index: 1001; justify-content: space-around; align-items: center;
}
.mob-btn {
    display: flex; flex-direction: column; align-items: center; gap: .18rem;
    padding: .45rem .75rem; color: var(--text-dim);
    text-decoration: none; font-size: .6rem; font-weight: 600;
    transition: var(--tr); cursor: pointer;
    background: none; border: none; font-family: inherit;
    text-transform: uppercase; letter-spacing: .04em;
}
.mob-btn i{font-size:1.15rem}
.mob-btn.active,.mob-btn:hover{color:var(--accent)}
.mob-btn.active i{filter:drop-shadow(0 0 6px var(--accent))}

/* ================================================
   RESPONSIVE
   ================================================ */
@media(max-width:1100px){
    .sidebar{transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s}
    .sidebar.mobile-open{transform:translateX(0);width:var(--sidebar-w) !important}
    .main-content{margin-left:0 !important;padding:1.5rem 1.5rem 6.5rem}
    .hero-section{padding:3rem 0 4rem}
    .premium-card{flex-direction:column;text-align:center;padding:1.5rem 1.25rem;gap:1rem}
    .mobile-bottom-nav{display:flex}
    .portfolio-grid{grid-template-columns:1fr}
    .articles-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
    .main-content{padding:1rem 1rem 6.5rem}
    .hero-title{font-size:2.1rem}
    .hero-actions{flex-direction:column}
    .hero-actions .cta-btn{width:100%;justify-content:center}
    .status-grid{grid-template-columns:1fr 1fr}
    .portfolio-stats{grid-template-columns:1fr 1fr}
    .modal-box{padding:1.5rem}
    .modal-overlay{padding:.5rem}
    .status-controls{flex-direction:column;align-items:stretch}
    .search-wrapper{max-width:100%}
    .section-header{flex-direction:column;align-items:flex-start;gap:.75rem}
    .section-actions{margin-left:0}
}
@media(max-width:480px){
    .status-grid{grid-template-columns:1fr}
    .portfolio-stats{grid-template-columns:1fr}
    .premium-price{font-size:2.2rem}
    .features-grid{grid-template-columns:1fr}
    .exchanges-ref-grid{grid-template-columns:1fr 1fr}
}

/* ── Offline Banner ── */
#offline-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1rem;
    background: rgba(255,0,68,.9);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .01em;
    transform: translateY(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#offline-banner.visible {
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Whale Alert ── */
.whale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}
.whale-card {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .85rem 1rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, background .2s, transform .15s;
    cursor: pointer;
}
.whale-card:hover {
    border-color: rgba(59,130,246,.4);
    background: rgba(59,130,246,.06);
    transform: translateY(-1px);
}
.whale-card-top {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.whale-chain-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(247,147,26,.12);
    border-radius: 50%;
    padding: 4px;
}
.whale-amount {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.whale-btc {
    font-family: 'JetBrains Mono', monospace;
    font-size: .95rem;
    font-weight: 700;
    color: #f7931a;
}
.whale-usd {
    font-size: .75rem;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
}
.whale-time {
    font-size: .72rem;
    color: var(--text-dim);
    white-space: nowrap;
    flex-shrink: 0;
}
.whale-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.whale-txid {
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    color: var(--text-dim);
    opacity: .7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.whale-block {
    font-size: .7rem;
    color: var(--text-dim);
    opacity: .5;
    flex-shrink: 0;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .bg-orb { display: none; }
}