/* =========================================================
   NEXUS ULTRA — Premium Minecraft Network UI
   Futuristic / Glass / Neon / Clean
   ========================================================= */

:root {
    --nx-bg: #05070b;
    --nx-bg2: #080d15;
    --nx-card: rgba(13, 18, 28, .72);
    --nx-card-solid: #0d131e;
    --nx-border: rgba(120, 180, 255, .13);
    --nx-blue: #1687ff;
    --nx-cyan: #4cc9ff;
    --nx-purple: #7667ff;
    --nx-white: #f7faff;
    --nx-text: #c6d1df;
    --nx-muted: #718096;
    --nx-radius: 18px;
}

/* ---------- GLOBAL ---------- */

html {
    background: var(--nx-bg) !important;
    scroll-behavior: smooth;
}

body {
    margin: 0 !important;
    background:
        radial-gradient(900px 500px at 10% -10%, rgba(22,135,255,.16), transparent 65%),
        radial-gradient(700px 450px at 95% 10%, rgba(118,103,255,.11), transparent 65%),
        radial-gradient(700px 500px at 50% 100%, rgba(76,201,255,.055), transparent 70%),
        linear-gradient(135deg, #05070b 0%, #080c13 48%, #05070b 100%) !important;
    color: var(--nx-white) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Arial, sans-serif !important;
    min-height: 100vh;
}

/* subtle futuristic grid */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
    z-index: 0;
}

/* ---------- TOP NAV ---------- */

nav,
.navbar,
header {
    position: relative !important;
    z-index: 20;
    background: rgba(5, 8, 13, .70) !important;
    border-bottom: 1px solid rgba(120,180,255,.10) !important;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 10px 40px rgba(0,0,0,.20) !important;
}

nav a,
.navbar a {
    color: #9eacbd !important;
    font-weight: 650 !important;
    transition: all .2s ease !important;
}

nav a:hover,
.navbar a:hover {
    color: #fff !important;
    text-shadow: 0 0 18px rgba(76,201,255,.55);
}

/* ---------- CONTENT ---------- */

main,
.container,
.content,
.page-content {
    position: relative;
    z-index: 1;
    color: var(--nx-text) !important;
}

/* ---------- HEADINGS ---------- */

h1, h2, h3, h4, h5, h6 {
    color: var(--nx-white) !important;
    font-weight: 850 !important;
    letter-spacing: -.035em !important;
}

h1 {
    font-size: clamp(30px, 4vw, 48px) !important;
    line-height: 1.05 !important;
}

h2 {
    font-size: clamp(23px, 3vw, 34px) !important;
}

h1::after,
h2::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    margin-top: 12px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--nx-blue), var(--nx-cyan), var(--nx-purple));
    box-shadow:
        0 0 12px rgba(22,135,255,.7),
        0 0 30px rgba(76,201,255,.25);
}

/* ---------- GLASS CARDS ---------- */

.card,
.panel,
.box,
section,
[class*="card"],
[class*="panel"] {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(19,27,40,.82), rgba(8,12,19,.78)) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
    box-shadow:
        0 18px 55px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease !important;
}

.card::before,
.panel::before,
.box::before,
section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(76,201,255,.45),
        transparent
    );
    opacity: .55;
}

.card:hover,
.panel:hover,
.box:hover {
    transform: translateY(-3px);
    border-color: rgba(76,201,255,.25) !important;
    box-shadow:
        0 24px 65px rgba(0,0,0,.38),
        0 0 35px rgba(22,135,255,.055) !important;
}

/* ---------- TEXT ---------- */

p {
    color: var(--nx-text) !important;
    line-height: 1.7;
}

small,
.text-muted,
.muted {
    color: var(--nx-muted) !important;
}

strong,
b {
    color: #fff !important;
}

/* ---------- LINKS ---------- */

a {
    color: #61b8ff !important;
    text-decoration: none !important;
    transition: .2s ease !important;
}

a:hover {
    color: #b5e2ff !important;
}

/* ---------- BUTTONS ---------- */

button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    position: relative;
    overflow: hidden;
    min-height: 42px;
    padding: 0 18px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 11px !important;
    background:
        linear-gradient(135deg, #0878ed 0%, #159cff 55%, #42b9ff 100%) !important;
    color: #fff !important;
    font-weight: 750 !important;
    letter-spacing: -.01em;
    box-shadow:
        0 8px 24px rgba(22,135,255,.22),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

button::after,
.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.20),
        transparent
    );
    transition: left .55s ease;
}

button:hover,
.btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.08);
    box-shadow:
        0 12px 32px rgba(22,135,255,.34),
        0 0 24px rgba(76,201,255,.12) !important;
}

button:hover::after,
.btn:hover::after {
    left: 150%;
}

button:active,
.btn:active {
    transform: translateY(0) scale(.98) !important;
}

/* ---------- FILE UPLOAD ---------- */

input[type="file"] {
    width: 100%;
    padding: 10px !important;
    color: #8999ab !important;
    background: rgba(7,11,18,.72) !important;
    border: 1px dashed rgba(76,201,255,.20) !important;
    border-radius: 13px !important;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 11px 20px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #0878ed, #32aaff);
    color: #fff;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 7px 20px rgba(22,135,255,.22);
    transition: .2s ease;
}

input[type="file"]::file-selector-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* ---------- INPUTS ---------- */

input:not([type="file"]),
textarea,
select {
    box-sizing: border-box;
    background: rgba(5,10,17,.78) !important;
    color: #f3f8ff !important;
    border: 1px solid rgba(120,180,255,.13) !important;
    border-radius: 11px !important;
    padding: 11px 13px !important;
    outline: none !important;
    transition: .22s ease !important;
}

input:not([type="file"])::placeholder,
textarea::placeholder {
    color: #5f6e80 !important;
}

input:not([type="file"]):focus,
textarea:focus,
select:focus {
    border-color: rgba(76,201,255,.55) !important;
    box-shadow:
        0 0 0 3px rgba(22,135,255,.10),
        0 0 25px rgba(22,135,255,.08) !important;
}

/* ---------- BADGES ---------- */

.badge,
.tag,
.label,
[class*="badge"] {
    border-radius: 999px !important;
    padding: 5px 10px !important;
    background: linear-gradient(
        135deg,
        rgba(22,135,255,.13),
        rgba(76,201,255,.06)
    ) !important;
    border: 1px solid rgba(76,201,255,.17) !important;
    color: #72c1ff !important;
    font-weight: 700 !important;
}

/* ---------- TABLES ---------- */

table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 7px !important;
}

thead th {
    padding: 12px !important;
    background: rgba(5,9,15,.80) !important;
    color: #71849a !important;
    border: 0 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .10em;
}

tbody tr {
    background: rgba(14,21,32,.70) !important;
    transition: .18s ease;
}

tbody tr:hover {
    background: rgba(22,135,255,.075) !important;
    transform: translateX(2px);
}

td {
    border-color: rgba(120,180,255,.07) !important;
}

/* ---------- ALERTS ---------- */

.alert,
.notice,
.info {
    border-radius: 13px !important;
    background: rgba(22,135,255,.07) !important;
    border: 1px solid rgba(76,201,255,.15) !important;
    color: #bfe6ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

/* ---------- SPECIAL NEXUS BRANDING ---------- */

.logo-text,
.site-name,
.server-name {
    color: #fff !important;
    font-weight: 950 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    text-shadow:
        0 0 15px rgba(22,135,255,.45),
        0 0 35px rgba(76,201,255,.18);
}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #04070b;
}

::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: linear-gradient(#163451, #0d5a91);
    border: 2px solid #04070b;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#1d70ad, #1687ff);
}

/* ---------- SELECTION ---------- */

::selection {
    background: rgba(22,135,255,.35);
    color: #fff;
}

/* ---------- MOBILE ---------- */

@media (max-width: 700px) {
    .card,
    .panel,
    .box,
    section {
        border-radius: 14px !important;
    }

    h1 {
        font-size: 30px !important;
    }

    button,
    .btn {
        width: auto;
        min-height: 44px;
    }
}