:root {
    --bg: radial-gradient(circle at top, #0f172a 0%, #0b1020 45%, #000 100%);
    --accent: #00f6ff;
    --accent2: #ff4dff;
    --card-bg: rgba(10, 12, 22, 0.5);
    --glass: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.08);
    --radius: 16px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(140deg, #060712 0%, #151633 46%, #0d6b75 89%);
    background-attachment: fixed;
    font-family: "Poppins", sans-serif;
    color: #fff;
}

/* NAV */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(3, 4, 12, 0.35);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 0 14px rgba(0, 246, 255, 0.6);
}
.brand-link {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    text-decoration: none;
    color: #fff;
}
.brand-title {
    font-weight: 600;
}
.brand-sub {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.6);
}
.nav-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.nav-link {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 0.9rem;
}
.nav-link:hover {
    color: #fff;
}
.nav-btn {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
}
.nav-btn.primary {
    background: linear-gradient(120deg, #00f6ff, #ff4dff);
    color: #020617;
    border: none;
}
.nav-btn.danger {
    background: rgba(255,77,123,0.12);
    border: 1px solid rgba(255,77,123,0.4);
    color: #fff;
}
.nav-btn.ghost {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
}

/* HERO (home page) */
.hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    padding: 3rem 1.5rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.hero-title {
    font-size: clamp(2.5rem, 5vw, 3.4rem);
    line-height: 1.05;
    text-shadow: 0 0 18px rgba(0, 246, 255, 0.25);
}
.hero-sub {
    max-width: 40rem;
    color: rgba(255,255,255,0.7);
}
.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.cta-btn {
    background: linear-gradient(120deg, #00f6ff, #ff4dff);
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    text-decoration: none;
    color: #020617;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 246, 255, 0.35);
}
.cta-secondary {
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.hero-art {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.hero-card {
    background: rgba(7, 12, 24, 0.5);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 14px;
    padding: 1.2rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.hero-card .badge {
    display: inline-block;
    background: rgba(255, 77, 255, 0.18);
    border: 1px solid rgba(255,77,255,0.44);
    padding: 2px 12px;
    border-radius: 999px;
    font-size: 0.6rem;
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
}

/* GENERIC GLASS CARD */
.glass {
    background: rgba(9,12,21,0.6);
    border: 1px solid rgba(173,232,255,0.05);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    padding: 1.25rem 1.15rem;
    box-shadow: 0 5px 22px rgba(0,0,0,0.35);
}

/* GRID SECTION */
.grid {
    max-width: 1100px;
    margin: 1.5rem auto 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    padding: 0 1.5rem;
}
.card-lg {
    grid-column: span 2;
}

/* FOOTER */
footer {
    text-align: center;
    padding: 2rem 1rem 3rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.8rem;
}

/* ---------------------- */
/* YOUR PART (admin/me)   */
/* ---------------------- */
.admin-wrapper {
    max-width: 1100px;
    margin: 2rem auto 3rem;
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 1.5rem;
    padding: 0 1.5rem;
}
.admin-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.live-box {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
}
.live-row {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.03);
    padding: 0.35rem 0.6rem;
    border-radius: 10px;
    display: flex;
    gap: 0.6rem;
    align-items: center;
}
.infraction-list {
    max-height: 520px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.inf-row {
    display: grid;
    grid-template-columns: auto 0.6fr 1fr auto;
    gap: 0.5rem;
    background: rgba(0,0,0,0.16);
    border-radius: 10px;
    padding: 0.4rem 0.5rem;
    align-items: center;
}
.tag {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 600;
    background: rgba(255,255,255,0.12);
}
.tag.warn { background: rgba(255,193,7,0.25); }
.tag.mute { background: rgba(0,188,212,0.25); }
.tag.kick { background: rgba(255,87,34,0.35); }
.tag.ban  { background: rgba(244,67,54,0.35); }
.inf-delete {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
}
.issue-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.issue-form input,
.issue-form select {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    color: #fff;
}
.muted { color: rgba(255,255,255,0.55); }
.flex-between {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.me-wrapper {
    max-width: 1100px;
    margin: 2rem auto 3rem;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.5rem;
    padding: 0 1.5rem;
}
.me-main, .me-side {
    min-height: 180px;
}
.me-monster {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.me-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid rgba(0,246,255,0.6);
    box-shadow: 0 0 14px rgba(0,246,255,0.25);
}
.bar-group {
    margin-top: 1rem;
}
.bar {
    background: rgba(0,0,0,0.3);
    border-radius: 999px;
    height: 10px;
    margin-bottom: 0.4rem;
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    border-radius: 999px;
}
.bar-fill.health {
    background: linear-gradient(90deg, #00ff99, #00b894);
}
.bar-fill.hunger {
    background: linear-gradient(90deg, #ffb347, #ffcc33);
}
.bar-fill.xp {
    background: linear-gradient(90deg, #66ffff, #ff4dff);
}

/* RESPONSIVE */
@media (max-width: 960px) {
    .admin-wrapper, .me-wrapper, .hero {
        grid-template-columns: 1fr;
    }
    .top-nav {
        flex-wrap: wrap;
    }
}
/* Chat look (global helper if you prefer) */
.chat-box{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1rem;max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem}
.msg{display:flex;gap:.7rem;align-items:flex-start}
.msg .avatar{width:38px;height:38px;border-radius:999px;object-fit:cover;border:1px solid rgba(255,255,255,.1)}
.msg .bubble{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:.55rem .75rem;border-radius:12px;max-width:720px}
.msg .meta{font-size:.8rem;opacity:.75;margin-bottom:.25rem}

.tickets-shell {
    max-width: 1150px;
    margin: 2.5rem auto 3.5rem;
    padding: 0 1.5rem;
}
.tickets-grid {
    display: grid;
    grid-template-columns: 0.55fr 1.45fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.tickets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ticket-row {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}
.ticket-row:hover {
    background: rgba(0,0,0,0.4);
}
.ticket-title {
    font-weight: 600;
}
.ticket-meta {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.badge {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
}
.badge.success {
    background: rgba(0,255,170,0.16);
}
.badge.danger {
    background: rgba(255,111,111,0.16);
}
@media (max-width: 960px) {
    .tickets-grid {
        grid-template-columns: 1fr;
    }
}
.page-shell {
    max-width: 1100px;
    margin: 2.5rem auto 3.5rem;
    padding: 0 1.25rem;
}
.page-title {
    font-size: 1.55rem;
    font-weight: 700;
    margin-bottom: .4rem;
}
.tickets-grid {
    display: grid;
    grid-template-columns: 0.55fr 1.45fr;
    gap: 1.25rem;
    margin-top: 1.2rem;
}
.tickets-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.ticket-row {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.03);
    border-radius: 16px;
    padding: .75rem 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.ticket-row:hover {
    background: rgba(0,0,0,.4);
}
.ticket-title {
    font-weight: 600;
}
.ticket-sub {
    font-size: .7rem;
    opacity: .65;
    margin-top: .15rem;
}
.ticket-meta {
    display: flex;
    gap: .45rem;
    align-items: center;
}
.badge {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 600;
}
.badge.success { background: rgba(0,255,170,.16); }
.badge.danger  { background: rgba(255,111,111,.16); }

.tickets-panel.card {
    min-height: 200px;
}
.mt { margin-top: 1.25rem; }

@media (max-width: 980px) {
    .tickets-grid { grid-template-columns: 1fr; }
}
.tickets-shell { }
.tickets-layout {
    display: grid;
    grid-template-columns: 0.45fr 1.55fr;
    gap: 1.25rem;
    margin-top: 1.2rem;
}
.tickets-left {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.ticket-pill {
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.02);
    border-radius: 16px;
    padding: .6rem .85rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    cursor: pointer;
    text-align: left;
}
.ticket-pill:hover {
    background: rgba(0,0,0,.42);
}
.ticket-pill-title { font-weight: 600; }
.ticket-pill-meta { font-size: .7rem; opacity: .65; }
.ticket-pill-right {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-direction: column;
}
.tickets-detail {
    min-height: 320px;
}
.ticket-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
.ticket-actions {
    display: flex;
    gap: .5rem;
}
.ticket-chat {
    background: rgba(0,0,0,.14);
    border-radius: 12px;
    padding: .6rem .5rem;
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.ticket-msg {
    background: rgba(0,0,0,.18);
    border-radius: 10px;
    padding: .45rem .5rem .5rem;
}
.ticket-msg-head {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.ticket-avatar {
    width: 34px; height: 34px; border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.16);
}
.ticket-msg-name { font-weight: 600; }
.ticket-msg-time { font-size: .6rem; opacity: .55; }
.ticket-msg-body { margin-top: .35rem; white-space: pre-wrap; }
.ticket-reply {
    margin-top: 1rem;
}
.ticket-reply textarea {
    width: 100%;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: .5rem .6rem;
    color: #fff;
}
.ticket-reply-tools {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-top: .4rem;
}
.emoji-row { display: flex; gap: .25rem; }
.emoji-btn {
    background: rgba(0,0,0,.25);
    border: none;
    border-radius: 6px;
    padding: 2px 6px;
    cursor: pointer;
}
.btn-ghost {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;
    padding: 4px 10px;
    color: #fff;
    cursor: pointer;
}
.btn-danger {
    background: rgba(244,67,54,.2);
    border: 1px solid rgba(244,67,54,.45);
    border-radius: 8px;
    padding: 4px 10px;
    color: #fff;
    cursor: pointer;
}
@media (max-width: 980px) {
    .tickets-layout { grid-template-columns: 1fr; }
    .ticket-head { flex-direction: column; align-items: flex-start; }
    .ticket-actions { flex-wrap: wrap; }
}
/* =========================
   TICKETS PAGE (scoped)
   ========================= */
.tickets-shell {
    max-width: 1150px;
    margin: 2.5rem auto 3.5rem;
    padding: 0 1.5rem;
}

.tickets-shell h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.tickets-sub {
    color: rgba(255,255,255,0.8);
    font-size: .8rem;
}

.tickets-layout {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: 0.38fr 1.62fr;
    gap: 1.25rem;
}

/* LEFT COLUMN (LIST) */
.tickets-left {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.ticket-pill {
    background: rgba(6,6,8,0.4);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 16px;
    padding: .6rem .8rem;
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: .15s ease-out;
}

.ticket-pill:hover {
    background: rgba(8,10,16,0.75);
    border-color: rgba(0,246,255,0.4);
}

.ticket-pill.active {
    background: radial-gradient(circle at top, rgba(10,12,25,1) 0%, rgba(1,119,126,0.4) 80%);
    border-color: rgba(255,77,255,0.55);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.ticket-pill-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ticket-title {
    font-weight: 600;
    color: #fff;
    font-size: .83rem;
    line-height: 1.1;
}

.ticket-meta-line {
    font-size: .67rem;
    color: rgba(255,255,255,0.6);
}

.ticket-pill-right {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    align-items: flex-end;
}

.ticket-date {
    font-size: .63rem;
    color: rgba(255,255,255,0.55);
}

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .63rem;
    font-weight: 600;
}

.badge.success {
    background: rgba(0,180,130,.18);
    color: #eafff9;
}

.badge.danger {
    background: rgba(244,67,54,.25);
    color: #ffe5e3;
}

/* RIGHT COLUMN (DETAIL) */
.tickets-detail {
    background: rgba(8,9,15,0.4);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 18px;
    min-height: 320px;
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ticket-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
}

.ticket-head-left {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.ticket-head-title {
    font-weight: 650;
    font-size: 1rem;
}

.ticket-head-sub {
    font-size: .7rem;
    color: rgba(255,255,255,0.65);
}

.ticket-actions {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.btn-surface {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    color: #fff;
    font-size: .68rem;
    padding: 4px 10px 5px;
    cursor: pointer;
}

.btn-danger {
    background: rgba(244,67,54,.18);
    border: 1px solid rgba(244,67,54,.4);
    color: #fff;
}

.ticket-chat {
    background: rgba(0,0,0,0.15);
    border-radius: 14px;
    padding: .55rem .5rem;
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.ticket-msg {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
}

.ticket-avatar {
    width: 35px;
    height: 35px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.05);
}

.ticket-bubble {
    background: rgba(10,13,25,0.45);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 12px;
    padding: .4rem .55rem .45rem;
    max-width: 95%;
}

.ticket-bubble-head {
    display: flex;
    gap: .4rem;
    align-items: baseline;
}

.ticket-name {
    font-weight: 600;
    font-size: .73rem;
}

.ticket-time {
    font-size: .6rem;
    color: rgba(255,255,255,0.55);
}

.ticket-text {
    margin-top: .3rem;
    font-size: .72rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.ticket-file {
    margin-top: .3rem;
    font-size: .67rem;
    color: #c7ecff;
}

/* REPLY BAR */
.ticket-reply {
    margin-top: .35rem;
}

.ticket-reply textarea {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: .45rem .5rem;
    color: #fff;
    font-size: .72rem;
}

.ticket-reply-tools {
    display: flex;
    gap: .45rem;
    align-items: center;
    margin-top: .35rem;
}

.emoji-row {
    display: flex;
    gap: .25rem;
}

.emoji-btn {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 6px;
    font-size: .7rem;
    padding: 2px 6px;
    cursor: pointer;
}

@media (max-width: 960px) {
    .tickets-layout {
        grid-template-columns: 1fr;
    }
    .tickets-left {
        flex-direction: row;
        overflow-x: auto;
        gap: .5rem;
    }
    .ticket-pill {
        min-width: 230px;
    }
    .ticket-head {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ===============================
   SCRAPLINGS TICKETS — HIGH CONTRAST
   =============================== */
.tickets-shell {
    max-width: 1180px;
    margin: 2.5rem auto 3.5rem;
    padding: 0 1.5rem;
}

.tickets-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.15rem;
}

.tickets-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #fff;
}

.tickets-sub {
    font-size: .8rem;
    color: #ffffff;
}

.tickets-tabs {
    display: inline-flex;
    background: rgba(4,6,12,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    overflow: hidden;
}
.tickets-tab {
    padding: .42rem 1rem .45rem;
    font-size: .75rem;
    color: #e8f9ff;
    background: transparent;
    border: none;
    cursor: pointer;
}
.tickets-tab.active {
    background: linear-gradient(120deg, #00f6ff, #ff4dff);
    color: #020617;
    font-weight: 600;
}

.tickets-layout {
    display: grid;
    grid-template-columns: 0.4fr 1.6fr;
    gap: 1.2rem;
    min-height: 380px;
}

/* LEFT LIST */
.ticket-list-col {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.ticket-list-heading {
    font-size: .7rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .25rem;
}
.ticket-pill {
    background: #0b0f19;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: .7rem .85rem .6rem;
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    cursor: pointer;
    transition: .05s ease-out;
    color: #fff;
}
.ticket-pill:hover {
    border-color: rgba(0,246,255,0.35);
    background: #0f1420;
}
.ticket-pill.active {
    border-color: rgba(255,77,255,0.6);
    background: radial-gradient(circle, rgba(255,77,255,0.12) 0%, #101628 55%);
    box-shadow: 0 5px 18px rgba(0,0,0,0.35);
}
.ticket-pill-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ticket-pill-title {
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
}
.ticket-pill-meta {
    font-size: .73rem;
    color: #f6f6f6;  /* <— no more grey */
}
.ticket-pill-right {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: flex-end;
}
.ticket-date {
    font-size: .68rem;
    color: #e0f9ff;
}
.ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: 3px 12px 4px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 600;
}
.ticket-badge.open {
    background: rgba(0,214,144,0.22);
    color: #ffffff;
}
.ticket-badge.closed {
    background: rgba(255,105,140,0.25);
    color: #ffffff;
}

/* RIGHT PANEL */
.ticket-panel {
    background: #0a0d14;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 1rem 1rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 330px;
}
.ticket-panel-empty {
    color: #ffffff;
    opacity: .6;
    font-size: .78rem;
}
.ticket-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .7rem;
}
.ticket-head-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}
.ticket-head-sub {
    font-size: .72rem;
    color: #fff;
}
.ticket-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.btn-chip {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9px;
    font-size: .68rem;
    color: #fff;
    padding: 3px 9px 4px;
    cursor: pointer;
}
.btn-chip.danger {
    background: rgba(244,67,54,0.2);
    border: 1px solid rgba(244,67,54,0.7);
}

/* chat */
.ticket-chat {
    background: rgba(1,4,8,0.35);
    border-radius: 14px;
    padding: .6rem .55rem .35rem;
    max-height: 310px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.ticket-msg {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
}
.ticket-avatar {
    width: 35px;
    height: 35px;
    border-radius: 999px;
    background: #1f2937;
    object-fit: cover;
}
.ticket-bubble {
    background: rgba(11,15,23,0.85);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: .35rem .6rem .5rem;
    max-width: 96%;
}
.ticket-msg-head {
    display: flex;
    gap: .45rem;
    align-items: baseline;
}
.ticket-name {
    font-weight: 600;
    font-size: .73rem;
    color: #fff;
}
.ticket-time {
    font-size: .6rem;
    color: rgba(244,244,244,0.6);
}
.ticket-text {
    margin-top: .25rem;
    font-size: .73rem;
    line-height: 1.35;
    color: #fff;
}

/* reply */
.ticket-reply textarea {
    width: 100%;
    background: rgba(0,0,0,0.38);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: .45rem .5rem;
    color: #fff;
    font-size: .7rem;
}
.ticket-reply-footer {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin-top: .4rem;
}
.emoji-strip {
    display: flex;
    gap: .25rem;
}
.emoji-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    font-size: .78rem;
    cursor: pointer;
    color: #fff;
}
.upload-btn {
    background: rgba(0,246,255,0.13);
    border: 1px solid rgba(0,246,255,0.3);
    border-radius: 6px;
    font-size: .66rem;
    padding: 2px 7px 3px;
    cursor: pointer;
    color: #fff;
}
.send-btn {
    margin-left: auto;
    background: linear-gradient(120deg, #00f6ff, #ff4dff);
    border: none;
    border-radius: 999px;
    color: #020617;
    font-weight: 600;
    font-size: .7rem;
    padding: 4px 10px 5px;
    cursor: pointer;
}

@media (max-width: 980px) {
    .tickets-layout {
        grid-template-columns: 1fr;
    }
    .ticket-chat {
        max-height: 250px;
    }
}

.ticket-avatar-fallback {
    width: 35px;
    height: 35px;
    border-radius: 999px;
    background: linear-gradient(130deg, #00f6ff, #ff4dff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.7rem;
    color: #020617;
}
.hidden { display: none !important; }


.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
    font-size: 0.9rem;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.leaderboard-table th {
    text-align: left;
    background: rgba(255,255,255,0.05);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
}

.leaderboard-table tr:hover {
    background: rgba(255,255,255,0.06);
}

.lb-player {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lb-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 6px rgba(0,246,255,0.3);
}

.user-select {
    width: 100%;
    background: rgba(0,0,0,.3);
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    padding: .45rem;
}