* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f6fb;
    color: #172033;
}
a { color: inherit; text-decoration: none; }
.shell { min-height: 100vh; display: flex; }
.sidebar {
    width: 230px;
    background: #101933;
    color: #fff;
    padding: 22px 16px;
    flex-shrink: 0;
}
.brand {
    font-weight: 800;
    color: #8b7cff;
    font-size: 24px;
    margin-bottom: 24px;
}
.sidebar nav { display: grid; gap: 6px; }
.sidebar a {
    padding: 11px 12px;
    border-radius: 8px;
    color: #d8def2;
}
.sidebar a:hover { background: rgba(255,255,255,.08); color: #fff; }
.main { flex: 1; padding: 22px; min-width: 0; }
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
h1 { margin: 0; font-size: 26px; }
h2 { margin: 22px 0 12px; font-size: 18px; }
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.stat, .card {
    background: #fff;
    border: 1px solid #e4e9f5;
    border-radius: 8px;
    padding: 16px;
}
.stat span { display: block; color: #6b7590; font-size: 13px; }
.stat strong { display: block; font-size: 24px; margin-top: 8px; color: #5b52eb; }
.table-wrap {
    background: #fff;
    border: 1px solid #e4e9f5;
    border-radius: 8px;
    overflow: auto;
}
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid #eef2f8; vertical-align: top; }
th { font-size: 12px; color: #667089; text-transform: uppercase; background: #fafbff; }
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 700;
}
.badge-completed, .badge-active, .badge-approved { background: #e7f8ee; color: #139447; }
.badge-pending { background: #fff4df; color: #a56800; }
.badge-expired, .badge-cancelled, .badge-rejected, .badge-locked { background: #ffe8e8; color: #c62828; }
.form {
    max-width: 520px;
    background: #fff;
    border: 1px solid #e4e9f5;
    border-radius: 8px;
    padding: 18px;
}
label { display: block; margin-top: 12px; color: #4f5a73; font-size: 13px; }
input, select, textarea {
    width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    border: 1px solid #d9e0ee;
    border-radius: 8px;
    font-size: 14px;
}
textarea { min-height: 100px; }
button, .btn {
    display: inline-block;
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    background: #5b52eb;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.btn-muted { background: #edf1fb; color: #22304f; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.error { color: #c62828; margin: 10px 0; }
.success { color: #139447; margin: 10px 0; }
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-page .form { width: 100%; }
@media (max-width: 800px) {
    .shell { display: block; }
    .sidebar { width: 100%; }
    .sidebar nav { grid-template-columns: repeat(2, 1fr); }
}

body {
    background:
        radial-gradient(circle at 80% 0%, rgba(99, 255, 59, .10), transparent 32%),
        radial-gradient(circle at 10% 10%, rgba(0, 195, 255, .10), transparent 26%),
        #050b09;
    color: #dcefe8;
}

.shell {
    background:
        linear-gradient(120deg, rgba(19, 255, 108, .05), transparent 34%),
        linear-gradient(180deg, #07110f 0%, #030806 100%);
}

.sidebar {
    background: linear-gradient(180deg, #030706 0%, #071711 100%);
    border-right: 1px solid rgba(91, 255, 104, .22);
    box-shadow: 12px 0 34px rgba(0, 0, 0, .28);
}

.brand {
    color: #7cff37;
    text-shadow: 0 0 18px rgba(124, 255, 55, .32);
}

.sidebar a {
    color: #a9c9be;
}

.sidebar a:hover {
    background: rgba(91, 255, 104, .10);
    color: #eaffea;
}

.main {
    background:
        linear-gradient(rgba(91, 255, 104, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 255, 104, .035) 1px, transparent 1px);
    background-size: 34px 34px;
}

.topbar {
    color: #f2fff8;
}

.topbar span {
    color: #8bf15e;
}

h1, h2 {
    color: #f2fff8;
}

.stat, .card, .table-wrap, .chart-panel {
    background: rgba(7, 20, 16, .92);
    border: 1px solid rgba(95, 255, 112, .22);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.stat span {
    color: #8aa79d;
}

.stat strong {
    color: #7cff37;
    text-shadow: 0 0 16px rgba(124, 255, 55, .25);
}

th {
    background: #091a14;
    color: #8bf15e;
}

td {
    color: #dcefe8;
    border-bottom-color: rgba(133, 255, 145, .12);
}

.badge {
    background: rgba(43, 145, 255, .18);
    color: #7fc4ff;
}

.badge-completed, .badge-active, .badge-approved {
    background: rgba(46, 255, 114, .16);
    color: #7cff83;
}

.badge-pending {
    background: rgba(255, 199, 84, .16);
    color: #ffd479;
}

.badge-expired, .badge-cancelled, .badge-rejected, .badge-locked {
    background: rgba(255, 84, 84, .16);
    color: #ff8c8c;
}

input, select, textarea {
    background: rgba(3, 9, 7, .96);
    border-color: rgba(124, 255, 55, .24);
    color: #f2fff8;
}

button, .btn {
    background: linear-gradient(135deg, #1d7dff, #35d65d);
    color: #04100a;
}

.btn-muted {
    background: rgba(112, 255, 112, .12);
    color: #c8ffd0;
}

.login-page {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .18)),
        url('/assets/xu-mining-login-bg.png') center center / cover no-repeat;
}

.login-page .form {
    background: rgba(4, 14, 11, .82);
    border: 1px solid rgba(124, 255, 55, .30);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .46), inset 0 0 34px rgba(79, 255, 75, .05);
    backdrop-filter: blur(6px);
}

.login-page .form h1 {
    color: #7cff37;
    text-shadow: 0 0 20px rgba(124, 255, 55, .35);
}

label {
    color: #b9d9ce;
}

.chart-panel {
    border-radius: 8px;
    margin-top: 18px;
    padding: 18px;
}

.chart-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.chart-head h2 {
    margin: 0;
}

.chart-head p {
    margin: 7px 0 0;
    color: #8aa79d;
}

.chart-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: #cde9dd;
    font-size: 13px;
}

.chart-legend span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.chart-legend i {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
}

.legend-main { background: #2f9bff; }
.legend-v1 { background: #58e24f; }

.bar-chart {
    display: grid;
    grid-template-columns: repeat(15, minmax(38px, 1fr));
    gap: 10px;
    min-height: 260px;
    padding: 14px 4px 0;
    overflow-x: auto;
}

.chart-day {
    min-width: 38px;
    display: grid;
    grid-template-rows: 200px 28px;
    gap: 8px;
}

.bar-pair {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    border-bottom: 1px solid rgba(124, 255, 55, .22);
}

.bar {
    width: 15px;
    min-height: 4px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #eaffea;
    font-size: 10px;
    line-height: 1;
    padding-top: 4px;
}

.bar span {
    transform: translateY(-16px);
    color: #bcebd0;
}

.bar-main {
    background: linear-gradient(180deg, #62d2ff, #1d65ff);
    box-shadow: 0 0 18px rgba(47, 155, 255, .32);
}

.bar-v1 {
    background: linear-gradient(180deg, #a7ff59, #2fcf49);
    box-shadow: 0 0 18px rgba(88, 226, 79, .32);
}

.chart-label {
    color: #8aa79d;
    font-size: 11px;
    text-align: center;
}

@media (max-width: 800px) {
    .chart-head { display: block; }
    .chart-legend { margin-top: 12px; }
    .bar-chart { grid-template-columns: repeat(15, 42px); }
}