@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#0a0a0a;color:#e5e5e5;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .1s}
a:hover{color:#fff}
img{display:block;image-rendering:pixelated;image-rendering:crisp-edges}

.page{max-width:980px;margin:0 auto;padding:64px 24px 40px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:36px}
.brand{display:flex;align-items:center;gap:18px}
.brand-logo{width:64px;height:64px;border-radius:12px;background:#dc2626;display:grid;place-items:center;font-size:30px;color:#fff;font-weight:700;user-select:none}
.brand-text h1{font-size:24px;font-weight:700;letter-spacing:-0.5px}
.brand-text p{color:#737373;font-size:13px;margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:18px}
.topbar-right a{color:#a3a3a3;font-size:13px}
.topbar-right a:hover{color:#fff}

.card{background:#161616;border:1px solid #262626;border-left:4px solid #dc2626;border-radius:6px;padding:18px 22px;margin-bottom:24px}
.card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.card-header .avatar{width:22px;height:22px;border-radius:50%;background:#dc2626;display:grid;place-items:center;font-size:11px;color:#fff}
.card-header .name{font-weight:700;color:#fff}
.card-header .badge{background:#5865f2;color:#fff;font-size:10px;font-weight:700;padding:2px 5px;border-radius:3px;letter-spacing:.5px}
.card-header .badge.green{background:#16a34a}
.card-body{color:#d4d4d4;white-space:pre-wrap}
.card-body .prompt{color:#737373}

.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.actions .spacer{flex:1}
.btn{display:inline-block;padding:10px 18px;font-family:inherit;font-size:13px;border:none;cursor:pointer;border-radius:5px;transition:background .1s;color:#fff;text-align:center}
.btn-red{background:#dc2626}.btn-red:hover{background:#ef4444}
.btn-gray{background:#262626}.btn-gray:hover{background:#3a3a3a}
.btn-blurple{background:#5865f2}.btn-blurple:hover{background:#6975f5}
.btn-ghost{background:transparent;border:1px solid #262626;color:#a3a3a3}.btn-ghost:hover{border-color:#3a3a3a;color:#fff}

.footer-links{font-size:12px;color:#525252;display:flex;gap:14px;margin-top:18px}
.footer-links a:hover{color:#a3a3a3}

/* form */
.form{max-width:380px;margin:50px auto}
.form h2{font-size:18px;margin-bottom:18px}
.form label{display:block;font-size:12px;color:#737373;margin:12px 0 6px}
.form input{width:100%;background:#0f0f0f;border:1px solid #262626;color:#fff;padding:10px 12px;font-family:inherit;font-size:13px;border-radius:4px}
.form input:focus{outline:none;border-color:#dc2626}
.form .btn{width:100%;margin-top:18px}
.form .alt{color:#737373;font-size:12px;margin-top:14px;text-align:center}
.form .alt a{color:#a3a3a3}
.form .error{color:#ef4444;font-size:12px;margin-top:12px}

/* stats grid (index) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.stat{background:#0f0f0f;border:1px solid #262626;border-radius:6px;padding:14px 16px}
.stat .label{font-size:11px;color:#737373;text-transform:uppercase;letter-spacing:.5px}
.stat .value{font-size:22px;font-weight:700;color:#fff;margin-top:4px}
.stat .value .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16a34a;margin-right:6px;vertical-align:middle;box-shadow:0 0 8px #16a34a}

/* character picker (register) */
.char-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.char-card{background:#0f0f0f;border:1px solid #262626;border-radius:6px;padding:12px 0;cursor:pointer;text-align:center;transition:all .12s}
.char-card:hover{border-color:#404040;background:#161616}
.char-card.selected{border-color:#dc2626;background:#1a0e0e;box-shadow:inset 0 0 0 1px #dc2626}
.char-card img{margin:0 auto;height:100px;width:auto}
.char-card .tag{font-size:10px;color:#737373;text-transform:uppercase;letter-spacing:.5px;margin-top:6px}
.char-card.selected .tag{color:#fca5a5}
.char-preview{display:flex;align-items:center;gap:14px;background:#0f0f0f;border:1px solid #262626;border-radius:6px;padding:12px;margin-top:12px}
.char-preview img{height:90px}
.char-preview .meta{font-size:12px;color:#a3a3a3}
.char-preview .meta .label{color:#737373}

/* dashboard layout */
.dash{display:grid;grid-template-columns:240px 1fr;gap:20px}
.dash-avatar{background:#161616;border:1px solid #262626;border-radius:6px;padding:24px 16px;text-align:center}
.dash-avatar img{height:160px;margin:0 auto 12px}
.dash-avatar .name{font-weight:700;color:#fff;font-size:16px}
.dash-avatar .motto{color:#737373;font-size:12px;margin-top:4px;font-style:italic;word-break:break-word}
.dash-meta{display:flex;flex-direction:column;gap:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:13px}
.kv dt{color:#737373}
.kv dd{color:#fff}
.currency{display:flex;gap:10px;flex-wrap:wrap}
.coin{flex:1;min-width:120px;background:#0f0f0f;border:1px solid #262626;border-radius:6px;padding:14px 16px}
.coin .label{font-size:11px;color:#737373;text-transform:uppercase;letter-spacing:.5px}
.coin .value{font-size:20px;font-weight:700;color:#fff;margin-top:4px}
.coin.credits .value{color:#fbbf24}
.coin.duckets .value{color:#60a5fa}
.coin.diamonds .value{color:#a78bfa}

/* recent users (index) */
.recent{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.recent .face{flex:0 0 auto;width:60px;text-align:center}
.recent .face img{height:60px;margin:0 auto}
.recent .face .n{font-size:11px;color:#a3a3a3;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:700px){
  .stats{grid-template-columns:1fr 1fr}
  .char-grid{grid-template-columns:repeat(2,1fr)}
  .dash{grid-template-columns:1fr}
}

/* nav tabs */
.nav{display:flex;gap:22px;align-items:center;border-bottom:1px solid #262626;padding-bottom:14px;margin-bottom:24px;font-size:13px}
.nav a{color:#737373;position:relative;padding-bottom:10px;margin-bottom:-14px;border-bottom:2px solid transparent}
.nav a:hover{color:#fff}
.nav a.active{color:#fff;border-bottom-color:#dc2626}
.nav .nav-spacer{flex:1}

/* news */
.news-list{display:grid;gap:14px}
.news-item{background:#161616;border:1px solid #262626;border-left:4px solid #dc2626;border-radius:6px;padding:18px 22px}
.news-item h3{font-size:16px;margin-bottom:6px;color:#fff}
.news-item .meta{font-size:11px;color:#737373;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.news-item .excerpt{color:#d4d4d4;line-height:1.7;white-space:pre-wrap}
.news-single .body{white-space:pre-wrap;color:#d4d4d4;line-height:1.8;margin-top:14px}
.news-image{width:100%;max-height:240px;object-fit:cover;border-radius:6px;margin-bottom:12px;border:1px solid #262626}

/* staff */
.staff-group{margin-bottom:22px}
.staff-group h3{font-size:13px;color:#a3a3a3;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.staff-card{background:#0f0f0f;border:1px solid #262626;border-radius:6px;padding:14px 10px;text-align:center;transition:border-color .12s}
.staff-card:hover{border-color:#dc2626}
.staff-card img{height:90px;margin:0 auto}
.staff-card .n{font-weight:700;color:#fff;font-size:13px;margin-top:6px}
.staff-card .r{font-size:10px;color:#737373;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.staff-card.online{border-color:#16a34a33}
.staff-card .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#16a34a;margin-right:4px;vertical-align:middle;box-shadow:0 0 6px #16a34a}

/* admin table */
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th,.admin-table td{padding:10px 12px;border-bottom:1px solid #262626;text-align:left}
.admin-table th{color:#737373;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.admin-table tr:hover td{background:#0f0f0f}
.admin-table .row-actions a{margin-right:10px;font-size:12px;color:#a3a3a3}
.admin-table .row-actions a:hover{color:#fff}
.admin-form textarea{width:100%;background:#0f0f0f;border:1px solid #262626;color:#fff;padding:10px 12px;font-family:inherit;font-size:13px;border-radius:4px;min-height:200px;resize:vertical}
.admin-form textarea:focus{outline:none;border-color:#dc2626}