:root{
  --bg:#0b0d10;
  --panel:#111419;
  --panel2:#0f1216;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:rgba(229,231,235,.10);
  --accent:#7f0a13; /* blood red */
  --accent2:#b10f1b; /* hover blood */
  --shadow:none;
  --r:0px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 13px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.35}
a{color:var(--text);text-decoration:none}
a:hover{text-decoration:underline}

.layout{display:flex;min-height:100vh}
.sidebar{
  width:240px;
  background:var(--panel);
  border-right:1px solid var(--border);
  padding:14px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:10px;border:1px solid var(--border);
  background:var(--panel2);
}
.brand img{height:22px;width:auto}
.brandlink{display:block;width:100%;font-weight:900;letter-spacing:.02em}
.brandlink:hover{text-decoration:none}
.menu{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.menu .section{margin-top:10px;color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.02em}
.menu a{padding:8px 10px;border:1px solid transparent}
.menu a:hover{border-color:var(--border);background:#0c0f13}

.main{flex:1;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:12px;
  justify-content:space-between;
  padding:10px 14px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;
}
.topbar-brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--text);
  font-weight:900;
  white-space:nowrap;
}
.topbar-logo{
  height:26px;
  width:26px;
  object-fit:contain;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
}
.topbar-title{display:none}

.stats{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);flex:1}
.stats span{background:var(--panel2);padding:6px 10px;border:1px solid var(--border);border-radius:999px}

.topbar-icons{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;color:var(--text);font-weight:900;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.15)}
.iconbtn:hover{background:rgba(255,255,255,.06)}
.iconbtn .badge{margin-left:6px}

@media (max-width: 900px){
  .topbar-title{display:inline}
  .stats{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
  .stats span{flex:0 0 auto}
}
.badge{
  display:inline-block;padding:2px 8px;
  border:1px solid var(--border);
  background:#0c0f13;
  color:var(--text);
  font-weight:800;font-size:12px;
}

.content{padding:14px;max-width:1100px;width:100%}

.panel{
  border:1px solid var(--border);
  background:var(--panel);
  padding:12px;
}

button,.btn{
  padding:8px 10px;
  min-height:38px;
  border:1px solid rgba(229,231,235,.15);
  background:var(--accent);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
button:hover,.btn:hover{background:var(--accent2)}
.btn.btn-ghost{background:transparent;color:var(--text);border-color:rgba(229,231,235,.15)}
.btn.btn-ghost:hover{background:#0c0f13}
input,select,textarea{
  width:100%;
  padding:9px;
  border:1px solid rgba(229,231,235,.15);
  background:#0c0f13;
  color:var(--text);
  outline:none;
}
textarea{resize:vertical}

.tablewrap{width:100%;overflow-x:auto}
.table{width:100%;min-width:720px;border-collapse:collapse;border:1px solid var(--border);background:var(--panel)}
.table th,.table td{padding:8px;border-bottom:1px solid var(--border);text-align:left}
.table th{color:var(--muted);font-weight:800;background:#0c0f13}
.table tr:last-child td{border-bottom:none}

.alert{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.10);padding:10px;margin:10px 0;color:#fecaca}
.success{border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.10);padding:10px;margin:10px 0;color:#bbf7d0}

.progress{height:10px;background:#0c0f13;border:1px solid var(--border)}
.progress > div{height:100%;background:var(--accent);width:0%}

.cardgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:980px){.cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.cardgrid{grid-template-columns:1fr}}
.carditem{border:1px solid var(--border);background:var(--panel);overflow:hidden}
.carditem img{width:100%;height:140px;object-fit:cover;display:block}
.cardbody{padding:10px}
.row{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.pill{display:inline-block;padding:4px 10px;border:1px solid var(--border);background:#0c0f13;color:var(--text);font-weight:800;font-size:12px}

/* Mobile hamburger */
.hamburger{display:none}
@media (max-width: 900px){
  .hamburger{display:inline-block}
  .layout{display:block}
  .sidebar{
    position:fixed;top:0;left:-320px;width:280px;height:100vh;z-index:50;
    transition:left .2s ease;
  }
  .sidebar.open{left:0}
  .main{margin-left:0}
  .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45}
  .overlay.show{display:block}
  .content{padding:12px}
}

/* Auth pages (login/register/reset/install) */
body.auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:radial-gradient(1200px 600px at 20% 0%, rgba(127,10,19,.35), transparent 60%),
             radial-gradient(900px 500px at 100% 0%, rgba(177,15,27,.25), transparent 55%),
             url('../assets/branding/header.jpg') center/cover no-repeat,
             var(--bg);
}
.auth-card{
  width:100%;
  max-width:420px;
  border:1px solid var(--border);
  background:rgba(17,20,25,.92);
  backdrop-filter: blur(6px);
  padding:16px;
}
.auth-card h2{margin:0 0 10px 0}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
.auth-brand img{height:58px;width:auto;max-width:220px;object-fit:contain}
.auth-title{font-size:18px;font-weight:900;letter-spacing:.02em;text-align:center;margin:6px 0 10px 0}
.auth-sub{color:var(--muted);text-align:center;margin:0 0 12px 0;line-height:1.5}
.auth-links{margin-top:10px;color:var(--muted);text-align:center}
.auth-links a{color:var(--text)}

/* PWA install banner */
.pwa-banner{
  position:fixed;
  left:10px;
  right:10px;
  bottom:90px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border:1px solid var(--border);
  background:rgba(15,20,28,.95);
  backdrop-filter: blur(8px);
  z-index:60;
}
.pwa-banner-msg{color:var(--text);font-weight:800}
.pwa-banner-actions{display:flex;gap:8px;align-items:center}

/* Modal (iOS install help) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:80}
.modal-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:92%;max-width:420px;
  border:1px solid var(--border);
  background:rgba(17,20,25,.96);
  padding:16px;
}

/* Safe-area for iPhone bottom bar */
.bottomnav{padding-bottom:env(safe-area-inset-bottom)}

.page-banner{padding:0;margin-bottom:12px;border:1px solid var(--border);background:var(--panel)}
.page-banner img{width:100%;height:140px;object-fit:cover;display:block}
@media(max-width:900px){.page-banner img{height:110px}}

.page-banner-small img{height:90px}
@media(max-width:900px){.page-banner-small img{height:70px}}

.xpwrap{margin-top:8px}
.xpbar{height:10px;background:#0c0f13;border:1px solid var(--border)}
.xpbar>div{height:100%;background:var(--accent);width:0%}
.xplabel{margin-top:6px;color:var(--muted);font-size:12px}


/* Cooldown widget */
.cdwrap{border:1px solid var(--border);background:#0c0f13;border-radius:12px;padding:12px;margin:10px 0}
.cdtop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cdtime{font-variant-numeric:tabular-nums}
.cdbar{height:10px;background:#080a0d;border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-top:8px}
.cdfill{height:100%;background:var(--accent);width:0%}
.cdmeta{margin-top:8px}

/* inline variant */
.cdinline{display:inline-flex;align-items:center;gap:10px}


/* Crimes grid (3 per rij) */
.crime-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
@media (max-width: 980px){.crime-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 640px){.crime-grid{grid-template-columns:1fr;}}
.crime-grid .panel{margin-bottom:0}

/* Generic grid helper (used across pages) */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width: 980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.grid{grid-template-columns:1fr}}

/* Alias used by some pages */
.table-wrap{width:100%;overflow-x:auto}

/* Message helpers (some pages use .msg/.error) */
.msg{border:1px solid var(--border);background:var(--panel);padding:10px;margin:10px 0}
.msg.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10);color:#bbf7d0}
.msg.err{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10);color:#fecaca}
.error{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.10);padding:10px;margin:10px 0;color:#fecaca}

/* BBCode toolbar (profile editor) */
.bb-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.bb-toolbar button{padding:6px 10px;border-radius:10px}
.bb-hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}


/* Mobile bottom navigation (Asangue-like) */
.bottomnav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#0f141c;
  border-top:1px solid rgba(255,255,255,.08);
  display:none;
  z-index:40;
}
.bottomnav{
  display:flex;
  justify-content:space-around;
}
.bottomnav a{
  flex:1;
  text-align:center;
  padding:10px 6px;
  color:#cfe0f8;
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.bottomnav a span{
  font-size:11px;
  font-weight:600;
  color:#9fb0c7;
}

@media (min-width: 901px){
  .bottomnav{ display:none; }
}

@media (max-width: 900px){
  .bottomnav{ display:flex; }
  .content{ padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}




/* PATCH v5.4 */
.btn{display:inline-flex;align-items:center;gap:6px;margin:4px 6px 4px 0}
.sidebar{overflow-y:auto}
@media (max-width:640px){.layout{grid-template-columns:1fr}}
@media (max-width:640px){.sidebar.open{left:0}}


/* --- Mobile header improvements --- */
.topbar{ padding-top: calc(10px + env(safe-area-inset-top)); }
.backbtn{ display:none; }
@media (max-width: 900px){ .backbtn{ display:inline-flex; } }
@media (max-width: 620px){
  .stat-black{ display:none; }
}
@media (max-width: 480px){
  .stat-respect{ display:none; }
}


/* Hero / page banners (v5.11) */
.hero{position:relative;border:1px solid var(--border);border-radius:16px;overflow:hidden;margin:10px 0 12px;background:var(--panel)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.05);transform:scale(1.02)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.15) 100%)}
.hero-inner{position:relative;display:flex;align-items:flex-end;min-height:140px;padding:16px 16px}
.hero-title{font-size:22px;font-weight:950;letter-spacing:.01em}
.hero-sub{margin-top:4px;color:rgba(255,255,255,.78);max-width:720px}
@media(max-width: 520px){
  .hero-inner{min-height:120px;padding:14px}
  .hero-title{font-size:20px}
}


/* v5.11.4 — Mobile layout hotfix: force single-column grids even when pages use inline grid-template-columns */
@media (max-width: 720px) {
  .grid {
    grid-template-columns: 1fr !important;
  }
  /* Some pages use inline styles without the .grid class */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Extra breathing room between stacked panels */
  .card, .panel, .box {
    margin-bottom: 12px;
  }
}

/* v5.11.8 UI hotfix: avatar preview sizing (settings/profile) */
img.avatar {
  width: 140px;
  height: 140px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  display: block;
}
@media (max-width: 720px) {
  img.avatar {
    width: 120px;
    height: 120px;
  }
}