/* ============================================================
   ELFIK'S POOL — MODERN UI V2
   ============================================================ */

:root {
    --elfik-bg: #050816;
    --elfik-bg-2: #080d1d;
    --elfik-card: rgba(13, 20, 38, .78);
    --elfik-card-strong: rgba(15, 23, 42, .94);
    --elfik-border: rgba(148, 163, 184, .12);

    --elfik-cyan: #22d3ee;
    --elfik-blue: #3b82f6;
    --elfik-violet: #8b5cf6;

    --elfik-green: #10b981;
    --elfik-yellow: #f59e0b;
    --elfik-red: #ef4444;

    --elfik-text: #f8fafc;
    --elfik-muted: #94a3b8;
    --elfik-dim: #64748b;

    --elfik-gradient:
        linear-gradient(135deg,#22d3ee 0%,#3b82f6 48%,#8b5cf6 100%);

    --elfik-shadow:
        0 20px 60px rgba(0,0,0,.35);
}

/* GLOBAL */

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 10% 10%, rgba(34,211,238,.07), transparent 30%),
        radial-gradient(circle at 90% 15%, rgba(139,92,246,.08), transparent 32%),
        radial-gradient(circle at 50% 90%, rgba(59,130,246,.06), transparent 35%),
        var(--elfik-bg) !important;

    color: var(--elfik-text) !important;
}

body::before {
    display: none !important;
}

/* HEADER */

.header {
    background: rgba(5,8,22,.82) !important;
    border-bottom: 1px solid rgba(34,211,238,.12) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.22) !important;
}

.header-content {
    max-width: 1600px !important;
    padding: .75rem 1.5rem !important;
}

/* LOGO */

.logo {
    position: relative;
    font-size: 1.35rem !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: white !important;
    letter-spacing: -.03em;
}

.logo::before {
    content: "";
    width: 175px;
    height: 44px;
    display: inline-block;
    flex: 0 0 175px;
    margin-right: .35rem;
    background: url("/static/elfik-logo.svg") center/contain no-repeat;
}

.logo i {
    display: none !important;
}

/* NAV */

.nav-item {
    border: 1px solid transparent;
    transition: all .22s ease !important;
}

.nav-item:hover {
    background: rgba(59,130,246,.10) !important;
    border-color: rgba(59,130,246,.18);
    transform: translateY(-1px) !important;
}

.nav-item.active {
    color: #fff !important;
    background:
        linear-gradient(135deg,
        rgba(34,211,238,.12),
        rgba(139,92,246,.12)) !important;

    border-color: rgba(34,211,238,.22);
    box-shadow: inset 0 0 20px rgba(34,211,238,.04);
}

.nav-item.active i {
    color: var(--elfik-cyan);
}

/* MAIN */

main {
    max-width: 1500px !important;
    padding: 2.5rem 1.5rem 4rem !important;
}

/* HERO */

.hero {
    background:
        radial-gradient(circle at 85% 25%, rgba(34,211,238,.15), transparent 25%),
        radial-gradient(circle at 75% 80%, rgba(139,92,246,.14), transparent 30%),
        linear-gradient(135deg, rgba(15,23,42,.96), rgba(8,13,29,.92)) !important;

    border: 1px solid rgba(34,211,238,.14) !important;
    box-shadow: var(--elfik-shadow) !important;
    border-radius: 26px !important;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.025) 50%,
        transparent 100%);
}

.hero-text h1 {
    background: var(--elfik-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-size: clamp(2rem,4vw,3.5rem) !important;
    letter-spacing: -.045em;
}

/* STAT GRID */

.stats-grid {
    gap: 1rem !important;
}

/* DIGIBYTE CARD */

.stat-card {
    background:
        linear-gradient(145deg,
        rgba(15,23,42,.96),
        rgba(8,13,29,.92)) !important;

    border: 1px solid var(--elfik-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 45px rgba(0,0,0,.24) !important;
    transition: transform .25s ease, border-color .25s ease,
                box-shadow .25s ease !important;
}

.stat-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(34,211,238,.28) !important;
    box-shadow:
        0 20px 55px rgba(0,0,0,.34),
        0 0 35px rgba(34,211,238,.06) !important;
}

.stat-card::before {
    height: 2px !important;
    background: var(--elfik-gradient) !important;
}

/* TITLES */

.stat-title {
    font-size: .95rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--elfik-muted) !important;
}

.stat-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    background:
        linear-gradient(135deg,
        rgba(34,211,238,.13),
        rgba(59,130,246,.12)) !important;
    border: 1px solid rgba(34,211,238,.12);
}

/* VALUES */

.stat-value {
    font-size: 1.15rem !important;
    color: #fff !important;
}

.stat-item {
    border-bottom-color: rgba(148,163,184,.08) !important;
}

/* LIVE VALUES */

#statsGlobalHashrate,
#statsHashratedigibyte {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    background: var(--elfik-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DIGIBYTE IDENTIFICATION */

#statsHashratedigibyte::before {
    content: "DGB ";
    font-size: .65em;
    color: var(--elfik-cyan);
    -webkit-text-fill-color: var(--elfik-cyan);
}

/* STATUS DOT */

#statsGlobalMiners,
#statsGlobalWorkers,
#statsMinersdigibyte,
#statsWorkersdigibyte {
    font-weight: 750 !important;
}

/* ACTIVITY CARD */

.elfik-activity {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.elfik-activity-card {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(145deg,
        rgba(13,20,38,.96),
        rgba(7,12,26,.95));

    border: 1px solid var(--elfik-border);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--elfik-shadow);
}

.elfik-activity-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--elfik-gradient);
}

.elfik-activity-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.elfik-activity-title strong {
    font-size: 1rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.elfik-online {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--elfik-green);
    font-size: .75rem;
    font-weight: 700;
}

.elfik-online::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--elfik-green);
    box-shadow: 0 0 12px rgba(16,185,129,.7);
}

.elfik-activity-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: .75rem;
}

.elfik-activity-item {
    padding: .9rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px;
}

.elfik-activity-label {
    color: var(--elfik-dim);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.elfik-activity-value {
    margin-top: .3rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 750;
}

/* HASHRATE VISUAL */

.elfik-hash-chart {
    height: 110px;
    display: flex;
    align-items: end;
    gap: 5px;
    margin-top: 1.25rem;
    padding-top: 10px;
}

.elfik-hash-bar {
    flex: 1;
    min-width: 3px;
    height: var(--h);
    border-radius: 4px 4px 1px 1px;
    background: var(--elfik-gradient);
    opacity: .72;
    animation: elfikBar 3s ease-in-out infinite alternate;
}

.elfik-hash-bar:nth-child(3n) {
    opacity: .48;
}

@keyframes elfikBar {
    from { filter: brightness(.85); }
    to   { filter: brightness(1.25); }
}

/* TICKER */

.ticker-container {
    background: rgba(8,13,29,.82) !important;
    border: 1px solid var(--elfik-border) !important;
    border-radius: 16px !important;
}

/* FOOTER */

.footer {
    background: rgba(4,7,17,.92) !important;
    border-top: 1px solid rgba(34,211,238,.10) !important;
}

.footer-content {
    max-width: 1500px !important;
}

.footer-links a {
    transition: all .2s ease;
}

.footer-links a:hover {
    color: var(--elfik-cyan) !important;
    transform: translateY(-1px);
}

/* GETTING STARTED */

.start-card {
    background:
        linear-gradient(145deg,
        rgba(15,23,42,.96),
        rgba(8,13,29,.92)) !important;

    border: 1px solid var(--elfik-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--elfik-shadow) !important;
    transition: .25s ease !important;
}

.start-card:hover {
    border-color: rgba(34,211,238,.3) !important;
    transform: translateY(-4px) !important;
}

.card-number {
    background: var(--elfik-gradient) !important;
}

.mrr-section {
    display: none !important;
}

.quick-start {
    display: none !important;
}

/* POOL SELECTION */

.pool-selection {
    background:
        linear-gradient(145deg,
        rgba(13,20,38,.96),
        rgba(7,12,26,.96)) !important;

    border: 1px solid var(--elfik-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--elfik-shadow) !important;
}

.pool-item,
.poolOption {
    transition: all .22s ease !important;
}

.pool-item:hover,
.poolOption:hover {
    transform: translateY(-3px);
}

/* MODAL */

.modal-overlay {
    background: rgba(2,5,14,.82) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.modal-content {
    background:
        radial-gradient(circle at 90% 10%, rgba(34,211,238,.10), transparent 30%),
        linear-gradient(145deg,#0f172a,#080d1d) !important;

    border: 1px solid rgba(34,211,238,.2) !important;
    border-radius: 24px !important;
    box-shadow:
        0 35px 100px rgba(0,0,0,.65),
        0 0 60px rgba(34,211,238,.06) !important;
}

.modal-close {
    border-radius: 10px !important;
    transition: .2s ease !important;
}

.modal-close:hover {
    transform: rotate(90deg) !important;
    background: rgba(239,68,68,.15) !important;
    color: #ff6b6b !important;
}

/* MOBILE */

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

@media (max-width: 768px) {

    body {
        padding-top: 60px !important;
    }

    main {
        padding: 1.2rem .75rem 3rem !important;
    }

    .header-content {
        padding: .6rem .75rem !important;
    }

    .logo {
        font-size: 1.15rem !important;
    }

    .logo::before {
        width: 30px;
        height: 30px;
    }

    .hero {
        padding: 1.5rem 1rem !important;
        border-radius: 20px !important;
    }

    .hero-content {
        grid-template-columns: 1fr !important;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .elfik-activity-grid {
        grid-template-columns: 1fr 1fr;
    }

    .modal-content {
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }
}

@media (max-width: 450px) {
    .elfik-activity-grid {
        grid-template-columns: 1fr;
    }
}