/* =========================================================
   Japórzko HardRP — Full Dark / Discord-inspired
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&family=Orbitron:wght@700;900&display=swap');

:root {
  --bg:         #0b0b0f;
  --bg-sidebar: #0e0e14;
  --bg-card:    #111118;
  --bg-card2:   #16161f;
  --bg-input:   #0d0d14;
  --bg-hover:   #1a1a25;
  --bg-msg:     #13131c;

  --border:     #1e1e2e;
  --border-b:   #252535;

  --text:       #e2e2f0;
  --text-muted: #5c5c7a;
  --text-dim:   #2e2e45;

  --cyan:    #00d9f5;
  --green:   #23ff8f;
  --pink:    #ff2d78;
  --yellow:  #f5c400;
  --purple:  #9b59f5;
  --orange:  #ff6b35;

  --glow-c: 0 0 12px rgba(0,217,245,.5);
  --glow-g: 0 0 12px rgba(35,255,143,.5);
  --glow-p: 0 0 12px rgba(255,45,120,.5);
  --glow-y: 0 0 12px rgba(245,196,0,.5);

  --font-h:  'Orbitron', monospace;
  --font-ui: 'Rajdhani', sans-serif;
  --font-m:  'Share Tech Mono', monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:15px;line-height:1.5}

/* scanline */
.scanline{pointer-events:none;position:fixed;inset:0;z-index:9999;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,217,245,.008) 3px,rgba(0,217,245,.008) 4px)}

/* ── LAYOUT ── */
.app-layout{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{
  width:220px;flex-shrink:0;
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto
}

.sidebar-logo{
  padding:16px 14px 12px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px
}

.logo-img-wrap{
  width:42px;height:42px;flex-shrink:0;
  border:1px solid var(--cyan);
  box-shadow:var(--glow-c);
  overflow:hidden;display:flex;align-items:center;justify-content:center
}
.logo-img-wrap img{width:100%;height:100%;object-fit:cover}
.logo-img-wrap .logo-ph{
  font-family:var(--font-h);font-size:9px;color:var(--cyan);
  text-align:center;line-height:1.2;padding:4px
}

.sidebar-brand .s-name{
  font-family:var(--font-h);font-size:11px;font-weight:900;
  color:var(--cyan);text-shadow:var(--glow-c);
  letter-spacing:.08em;text-transform:uppercase;line-height:1.1
}
.sidebar-brand .s-tag{
  font-family:var(--font-m);font-size:9px;color:var(--text-muted);
  letter-spacing:.18em;text-transform:uppercase
}

.sidebar-section{
  padding:10px 8px 4px;
  font-family:var(--font-m);font-size:9px;
  letter-spacing:.2em;color:var(--text-dim);
  text-transform:uppercase
}

.sidebar-nav{display:flex;flex-direction:column;gap:1px;padding:4px 6px}

.sidebar-nav a{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;
  font-family:var(--font-ui);font-size:13px;font-weight:500;
  color:var(--text-muted);text-decoration:none;
  border-radius:4px;
  transition:all .15s
}
.sidebar-nav a:hover{background:var(--bg-hover);color:var(--text)}
.sidebar-nav a.active{background:rgba(0,217,245,.08);color:var(--cyan)}
.sidebar-nav a .nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.sidebar-nav a.nav-admin-link{color:var(--yellow)}
.sidebar-nav a.nav-admin-link:hover{background:rgba(245,196,0,.06)}
.sidebar-nav a.nav-new{color:var(--green)}
.sidebar-nav a.nav-new:hover{background:rgba(35,255,143,.06)}

.sidebar-user{
  margin-top:auto;
  padding:12px 14px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px
}
.sidebar-avatar{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border-b)
}
.sidebar-username{
  font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.sidebar-logout{
  margin-left:auto;font-size:11px;color:var(--text-dim);
  text-decoration:none;
  transition:color .15s
}
.sidebar-logout:hover{color:var(--pink)}

/* MAIN */
.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:48px;background:var(--bg-sidebar);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:12px;
  position:sticky;top:0;z-index:50
}
.topbar-title{
  font-family:var(--font-h);font-size:12px;font-weight:700;
  color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase
}
.topbar-sep{color:var(--text-dim);margin:0 4px}
.topbar-page{color:var(--text);font-family:var(--font-h);font-size:12px;font-weight:700}

.page-body{flex:1;padding:28px 32px;max-width:1000px;width:100%}

/* ── PAGE HEADERS ── */
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.ph-title{
  font-family:var(--font-h);font-size:18px;font-weight:900;
  color:var(--text);letter-spacing:.06em;text-transform:uppercase
}
.ph-sub{
  font-family:var(--font-m);font-size:10px;letter-spacing:.2em;
  color:var(--text-muted);text-transform:uppercase;margin-top:3px
}

/* ── CARD ── */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:4px;
  margin-bottom:16px;
  overflow:hidden
}
.card-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 16px;
  background:var(--bg-card2);
  border-bottom:1px solid var(--border)
}
.card-top-label{
  font-family:var(--font-m);font-size:10px;letter-spacing:.18em;
  color:var(--cyan);text-shadow:var(--glow-c);text-transform:uppercase
}
.card-top-id{font-family:var(--font-m);font-size:10px;color:var(--text-dim)}
.card-body{padding:20px 18px}

/* ── DISCORD-STYLE REPORT POST ── */
.report-post{
  background:var(--bg-msg);
  border:1px solid var(--border);
  border-radius:4px;
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color .15s
}
.report-post:hover{border-color:var(--border-b)}

/* left accent bar */
.report-post.type-scientist{border-left:3px solid var(--cyan)}
.report-post.type-guard    {border-left:3px solid var(--yellow)}

.rp-header{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px 8px;
  cursor:pointer;
  user-select:none
}
.rp-avatar{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border-b);flex-shrink:0
}
.rp-avatar-ph{
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-card2);border:1px solid var(--border-b);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-size:12px;color:var(--text-muted);
  flex-shrink:0
}
.rp-meta{flex:1;min-width:0}
.rp-row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rp-author{font-weight:700;font-size:14px;color:var(--text)}
.rp-type-badge{
  font-family:var(--font-m);font-size:9px;letter-spacing:.14em;
  padding:2px 7px;border:1px solid;border-radius:2px;
  text-transform:uppercase
}
.rp-type-badge.sc{color:var(--cyan);border-color:var(--cyan)}
.rp-type-badge.gd{color:var(--yellow);border-color:var(--yellow)}
.rp-time{font-family:var(--font-m);font-size:10px;color:var(--text-muted)}

/* admin preview row */
.rp-preview{
  font-family:var(--font-m);font-size:11px;color:var(--text-muted);
  margin-top:2px;letter-spacing:.06em
}
.rp-preview span{color:var(--text);margin-left:4px}

.rp-status-pill{margin-left:auto;flex-shrink:0}

.rp-chevron{
  font-size:11px;color:var(--text-dim);
  transition:transform .2s;flex-shrink:0;margin-left:4px
}
.report-post.open .rp-chevron{transform:rotate(90deg)}

/* expandable body */
.rp-body{
  display:none;
  padding:0 16px 14px;
  border-top:1px solid var(--border)
}
.report-post.open .rp-body{display:block}

.rp-fields{display:grid;gap:0}
.rp-field{
  display:grid;grid-template-columns:160px 1fr;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--border)
}
.rp-field:last-child{border-bottom:none}
.rf-label{
  font-family:var(--font-m);font-size:10px;letter-spacing:.12em;
  color:var(--text-muted);text-transform:uppercase;padding-top:1px
}
.rf-value{font-family:var(--font-ui);font-size:14px;color:var(--text)}
.rf-value a{color:var(--cyan);text-decoration:underline;word-break:break-all}
.rf-value code{
  font-family:var(--font-m);font-size:12px;
  background:var(--bg-card2);padding:2px 6px;
  border:1px solid var(--border-b);border-radius:2px;
  color:var(--green)
}

.rp-actions{
  display:flex;gap:8px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--border);flex-wrap:wrap
}

/* ── STATUS BADGES ── */
.sbadge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-m);font-size:9px;letter-spacing:.12em;
  padding:3px 9px;border:1px solid;border-radius:2px;
  text-transform:uppercase;white-space:nowrap
}
.sbadge.pending {color:var(--yellow);border-color:var(--yellow);background:rgba(245,196,0,.06)}
.sbadge.approved{color:var(--green); border-color:var(--green); background:rgba(35,255,143,.06)}
.sbadge.rejected{color:var(--pink);  border-color:var(--pink);  background:rgba(255,45,120,.06)}

/* ── STATS ── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:20px}
.stat{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:4px;padding:14px 16px;position:relative;overflow:hidden
}
.stat::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px
}
.stat.st-total::after  {background:var(--cyan)}
.stat.st-pend::after   {background:var(--yellow)}
.stat.st-ok::after     {background:var(--green)}
.stat.st-rej::after    {background:var(--pink)}
.stat-lbl{
  font-family:var(--font-m);font-size:9px;letter-spacing:.18em;
  color:var(--text-muted);text-transform:uppercase;margin-bottom:6px
}
.stat-val{
  font-family:var(--font-h);font-size:28px;font-weight:900;line-height:1
}
.stat.st-total .stat-val{color:var(--cyan);text-shadow:var(--glow-c)}
.stat.st-pend  .stat-val{color:var(--yellow);text-shadow:var(--glow-y)}
.stat.st-ok    .stat-val{color:var(--green);text-shadow:var(--glow-g)}
.stat.st-rej   .stat-val{color:var(--pink);text-shadow:var(--glow-p)}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-m);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;
  padding:7px 16px;border:1px solid;border-radius:2px;
  text-decoration:none;background:transparent;transition:all .15s
}
.btn-c{color:var(--cyan);border-color:var(--cyan)}
.btn-c:hover{background:rgba(0,217,245,.07);box-shadow:var(--glow-c)}
.btn-g{color:var(--green);border-color:var(--green)}
.btn-g:hover{background:rgba(35,255,143,.06);box-shadow:var(--glow-g)}
.btn-p{color:var(--pink);border-color:var(--pink)}
.btn-p:hover{background:rgba(255,45,120,.07);box-shadow:var(--glow-p)}
.btn-y{color:var(--yellow);border-color:var(--yellow)}
.btn-y:hover{background:rgba(245,196,0,.06);box-shadow:var(--glow-y)}
.btn-ghost{color:var(--text-muted);border-color:var(--border-b)}
.btn-ghost:hover{color:var(--text);border-color:#333}
.btn-sm{padding:4px 10px;font-size:9px}
.btn-discord{
  background:#5865F2;color:#fff !important;border-color:#7289da;
  font-family:var(--font-m);font-size:11px;letter-spacing:.12em;
  padding:12px 24px;display:inline-flex;align-items:center;gap:10px;
  justify-content:center;width:100%;border-radius:3px;text-decoration:none;
  transition:all .2s
}
.btn-discord:hover{background:#4752c4;box-shadow:0 0 20px rgba(88,101,242,.5)}

/* ── ALERTS ── */
.alert{
  font-family:var(--font-m);font-size:11px;letter-spacing:.08em;
  padding:10px 16px;margin-bottom:16px;
  border-left:3px solid;border-radius:0 2px 2px 0;
  background:var(--bg-card)
}
.alert-err{color:var(--pink);border-color:var(--pink)}
.alert-ok {color:var(--green);border-color:var(--green)}
.alert-inf{color:var(--cyan);border-color:var(--cyan)}

/* ── FORMS ── */
.fg{margin-bottom:14px}
.fg label{
  display:block;font-family:var(--font-m);font-size:9px;
  letter-spacing:.18em;color:var(--text-muted);
  text-transform:uppercase;margin-bottom:5px
}
.fg label .req{color:var(--pink)}
input[type=text],input[type=url],input[type=number],select,textarea{
  width:100%;background:var(--bg-input);color:var(--text);
  font-family:var(--font-m);font-size:13px;
  border:1px solid var(--border-b);padding:9px 12px;
  outline:none;border-radius:2px;
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none
}
input:focus,select:focus,textarea:focus{
  border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,217,245,.1)
}
textarea{resize:vertical;min-height:80px}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%235c5c7a'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:32px;cursor:pointer
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-sep{border:none;border-top:1px solid var(--border);margin:18px 0}
.form-sect{
  font-family:var(--font-m);font-size:9px;letter-spacing:.22em;
  color:var(--text-muted);text-transform:uppercase;
  margin-bottom:12px;padding-bottom:7px;
  border-bottom:1px solid var(--border-b)
}
/* file input */
input[type=file]{
  background:var(--bg-input);color:var(--text-muted);
  font-family:var(--font-m);font-size:11px;
  border:1px dashed var(--border-b);padding:10px 12px;
  width:100%;border-radius:2px;cursor:pointer
}
input[type=file]:hover{border-color:var(--cyan)}

/* proof tabs */
.ptabs{display:flex;gap:0;margin-bottom:10px;border-bottom:1px solid var(--border-b)}
.ptab{
  font-family:var(--font-m);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 14px;cursor:pointer;
  color:var(--text-muted);border:1px solid transparent;
  border-bottom:none;margin-bottom:-1px;
  transition:all .15s;user-select:none
}
.ptab.active{color:var(--cyan);border-color:var(--border-b);border-bottom-color:var(--bg-card);background:var(--bg-card)}
.ppanel{display:none}
.ppanel.active{display:block}

/* ── USER / PROFILE ── */
.user-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.uav{width:52px;height:52px;border-radius:50%;border:1px solid var(--cyan);box-shadow:var(--glow-c)}
.uname{font-family:var(--font-h);font-size:15px;font-weight:700;margin-bottom:2px}
.umeta{font-family:var(--font-m);font-size:10px;color:var(--text-muted);letter-spacing:.08em}
.admin-badge{
  display:inline-block;font-family:var(--font-m);font-size:8px;letter-spacing:.18em;
  background:rgba(245,196,0,.08);color:var(--yellow);
  border:1px solid var(--yellow);padding:2px 7px;vertical-align:middle;margin-left:7px
}
.no-steam{
  background:rgba(255,45,120,.05);border:1px solid var(--pink);
  color:var(--pink);padding:10px 14px;margin-bottom:14px;
  font-family:var(--font-m);font-size:11px
}

/* char grid */
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:12px}
.char-card{
  background:var(--bg-card2);border:1px solid var(--border);
  border-radius:4px;padding:14px;
  border-top:2px solid var(--border-b);
  transition:border-color .15s
}
.char-card:hover{border-top-color:var(--cyan)}
.cc-name{font-family:var(--font-h);font-size:12px;font-weight:700;margin-bottom:3px;letter-spacing:.04em}
.cc-rank{font-family:var(--font-m);font-size:10px;color:var(--text-muted);margin-bottom:8px}
.cc-badge{
  font-family:var(--font-m);font-size:9px;letter-spacing:.14em;
  padding:2px 7px;border:1px solid;border-radius:2px;text-transform:uppercase
}
.cc-badge.sc{color:var(--cyan);border-color:var(--cyan)}
.cc-badge.gd{color:var(--yellow);border-color:var(--yellow)}
.cc-badge.cd{color:var(--orange);border-color:var(--orange)}
.char-dead{opacity:.3;filter:grayscale(.8)}
.char-dead .cc-name{text-decoration:line-through}

/* ── LOGIN PAGE ── */
.login-full{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);
  background-image:radial-gradient(ellipse 50% 40% at 50% 55%, rgba(0,217,245,.04) 0%, transparent 70%)
}
.login-header{
  height:56px;background:var(--bg-sidebar);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:12px
}
.login-center{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px}
.login-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:4px;padding:44px;max-width:400px;width:100%;
  text-align:center;position:relative
}
.login-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent)
}
.lc-title{
  font-family:var(--font-h);font-size:20px;font-weight:900;
  color:var(--cyan);text-shadow:var(--glow-c);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px
}
.lc-sub{
  font-family:var(--font-m);font-size:10px;letter-spacing:.16em;
  color:var(--text-muted);text-transform:uppercase;margin-bottom:32px
}
.lc-warn{
  margin-top:18px;font-family:var(--font-m);font-size:9px;
  letter-spacing:.07em;color:var(--text-dim);line-height:1.6;text-transform:uppercase
}
.lc-warn strong{color:var(--yellow)}

/* ── FOOTER ── */
.site-footer{
  background:var(--bg-sidebar);border-top:1px solid var(--border);
  padding:12px 24px
}
.footer-in{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-m);font-size:9px;letter-spacing:.16em;
  color:var(--text-dim);text-transform:uppercase
}
.fstamp{color:var(--cyan);border:1px solid var(--cyan);padding:2px 7px;font-size:8px;opacity:.5}

/* ── UTILS ── */
.flex{display:flex}.gap-2{gap:8px}.items-center{align-items:center}
.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.text-m{color:var(--text-muted)}.text-c{color:var(--cyan)}.text-g{color:var(--green)}
.text-p{color:var(--pink)}.text-y{color:var(--yellow)}
.mono{font-family:var(--font-m)}
.w-full{width:100%}
.no-reports{
  padding:40px;text-align:center;
  font-family:var(--font-m);font-size:11px;
  color:var(--text-muted);letter-spacing:.12em
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .sidebar{display:none}
  .page-body{padding:20px 16px}
  .form-row{grid-template-columns:1fr}
  .rp-field{grid-template-columns:1fr;gap:2px}
  .stats-row{grid-template-columns:1fr 1fr}
}