*{box-sizing:border-box}
:root{
  --canvas:#f7f3ed;
  --card:#fff;
  --ink:#111318;
  --muted:#68707a;
  --line:#dedbd5;
  --dark:#0b0e13;
  --dark2:#12161d;
  --red:#73070B;
  --red2:#3b0407;
  --soft:#f3eee7;
  --green:#16834a;
  --amber:#8a6500;
}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}

/* Top bar */
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  gap:22px;
  padding:0 18px 0 0;
  background:#050608;
  border-bottom:2px solid var(--red);
  color:#fff;
}
.brand{
  height:62px;
  display:flex;
  align-items:center;
  color:#fff;
  text-decoration:none;
  font-size:24px;
  font-weight:900;
}
.brand span{
  height:62px;
  display:flex;
  align-items:center;
  padding:0 13px;
  margin-right:9px;
  background:linear-gradient(135deg,#9b0c15 0%,var(--red) 55%,#310306 100%);
}
.brand strong{font-size:24px}
.portal-title{
  color:#e31a27;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
}
.topbar-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}
.topbar-actions a,
.topbar-actions button{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid #363c46;
  background:#11151b;
  color:#fff;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
}
.topbar-actions a:hover,
.topbar-actions button:hover{border-color:#a70d17}

/* Shell */
.moderator-shell{
  display:grid;
  grid-template-columns:215px minmax(0,1fr);
  min-height:calc(100vh - 64px);
  background:var(--dark);
}
.moderator-sidebar{
  padding:27px 13px;
  background:#0d1015;
  color:#fff;
  border-right:1px solid #20252d;
}
.sidebar-brand{
  padding:0 7px 20px;
}
.sidebar-brand span{
  display:block;
  color:#e31a27;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.sidebar-brand strong{
  display:block;
  margin-top:5px;
  font-size:22px;
}
.sidebar-nav{
  display:grid;
  gap:5px;
}
.nav-item{
  width:100%;
  min-height:46px;
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:0 10px;
  border:1px solid transparent;
  border-left:3px solid transparent;
  background:transparent;
  color:#bbc3ce;
  text-align:left;
  font-size:11px;
  font-weight:900;
}
.nav-item:hover{
  background:#141820;
  color:#fff;
}
.nav-item.active{
  background:#171b22;
  border-color:#343a44;
  border-left-color:#d31622;
  color:#fff;
}
.nav-icon{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid #5a0a10;
  background:#18090c;
  color:#e31a27;
  font-size:11px;
  font-weight:900;
}
.badge{
  min-width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border:1px solid #c5131e;
  background:var(--red);
  color:#fff;
  font-size:9px;
  font-weight:900;
}
.sidebar-note{
  margin:28px 5px 0;
  padding:17px 5px 0;
  border-top:1px solid #282e36;
}
.sidebar-note strong,
.sidebar-note span{display:block}
.sidebar-note strong{
  color:#d8dce2;
  font-size:10px;
}
.sidebar-note span{
  margin-top:6px;
  color:#7f8996;
  font-size:9px;
  line-height:1.5;
}

.moderator-workspace{
  min-width:0;
  background:var(--canvas);
  min-height:calc(100vh - 64px);
}
.moderator-page{
  width:100%;
  margin:0;
  padding:20px 22px 52px 18px;
}

/* Access strip */
.access-strip{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:10px 14px;
  margin-bottom:14px;
  background:#fff;
  border:1px solid var(--line);
  border-left:3px solid var(--red);
}
.access-strip div{
  min-width:150px;
  padding-right:16px;
  border-right:1px solid #e5e1db;
}
.access-strip span,
.access-strip strong{display:block}
.access-strip span{
  color:var(--red);
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
}
.access-strip strong{
  margin-top:3px;
  font-size:12px;
}
.access-strip p{
  margin:0;
  color:#626a74;
  font-size:11px;
}

/* Hero */
.hero{
  min-height:132px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 145px;
  align-items:center;
  overflow:hidden;
  margin-bottom:9px;
  padding:22px 26px;
  color:#fff;
  background:
    radial-gradient(circle at 86% 45%,rgba(150,15,25,.40),transparent 24%),
    linear-gradient(110deg,#0a0d12 0%,#10151c 60%,#36070b 100%);
  border:1px solid #242a32;
  border-left:4px solid #b20d18;
}
.hero span,
.section-head span,
.panel-heading span{
  color:#e11b28;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}
.hero h1{
  margin:6px 0 5px;
  font-size:34px;
  line-height:1;
}
.hero p{
  max-width:720px;
  margin:0;
  color:#b7c0cb;
  font-size:12px;
}
.hero-mark{
  justify-self:end;
  width:80px;
  height:80px;
  display:grid;
  place-items:center;
  border:1px solid #6e1118;
  color:#e51a27;
  font-size:48px;
  font-weight:900;
  background:#12080b80;
}

/* Stats */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(130px,1fr));
  gap:9px;
  margin-bottom:10px;
}
.stats-grid article,
.resolved-summary article{
  padding:13px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--red);
}
.stats-grid span,
.resolved-summary span{
  display:block;
  color:#737a84;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.stats-grid strong,
.resolved-summary strong{
  display:block;
  margin-top:6px;
  color:#111318;
  font-size:24px;
}

/* Sections */
.section-head{
  min-height:112px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:14px;
  padding:20px 22px;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--red);
}
.section-head h1{
  margin:5px 0 4px;
  font-size:29px;
}
.section-head p{
  margin:0;
  color:#666e78;
  font-size:12px;
}
.section-head>button{
  min-height:36px;
  padding:0 13px;
  border:1px solid #343944;
  background:#11151b;
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.section-head>button:hover{border-color:var(--red)}

.panel{
  background:#fff;
  border:1px solid var(--line);
}
.panel-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:50px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
}
.panel-heading h2{
  margin:4px 0 0;
  font-size:18px;
}

/* Inputs */
.report-toolbar,
.resolved-toolbar{
  display:grid;
  grid-template-columns:minmax(250px,1fr) 205px;
  gap:8px;
  padding:10px 12px;
  background:#f9f7f3;
  border-bottom:1px solid var(--line);
}
.content-tools{
  display:grid;
  grid-template-columns:150px 170px minmax(260px,1fr) auto;
  gap:8px;
  padding:12px 14px;
  background:#f9f7f3;
  border-bottom:1px solid var(--line);
}
.report-toolbar input,
.report-toolbar select,
.resolved-toolbar input,
.resolved-toolbar select,
.content-tools input,
.content-tools select,
.wide-search{
  min-height:40px;
  padding:0 11px;
  border:1px solid #343a44;
  background:#0d1015;
  color:#fff;
  outline:none;
  font-size:11px;
}
.content-tools button{
  min-height:40px;
  padding:0 13px;
  border:1px solid #343a44;
  background:#11151b;
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.report-toolbar input:focus,
.report-toolbar select:focus,
.resolved-toolbar input:focus,
.resolved-toolbar select:focus,
.content-tools input:focus,
.content-tools select:focus,
.wide-search:focus{border-color:#a80e17}
.wide-search{
  width:calc(100% - 28px);
  margin:14px;
}

/* Report cards */
.report-list,
.account-list,
.content-list{padding:0 12px 10px}
.report-row{
  min-height:84px;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(210px,.8fr) 96px;
  gap:14px;
  align-items:center;
  padding:12px 8px 12px 12px;
  border-left:3px solid #8f0b13;
  border-bottom:1px solid #e3dfd8;
}
.report-row:last-child{border-bottom:0}
.report-main strong,
.report-meta strong{
  display:block;
  color:#111318;
  font-size:13px;
}
.report-main span,
.report-meta span{
  display:block;
  margin-top:4px;
  color:#626a74;
  font-size:10px;
}
.report-main small,
.report-meta small{
  display:block;
  margin-top:4px;
  color:#858c95;
  font-size:9px;
}
.report-status{
  display:inline-flex!important;
  width:max-content;
  padding:3px 7px;
  border:1px solid #c9cbd0;
  font-size:8px!important;
  font-weight:900;
  text-transform:uppercase;
}
.report-status.open{color:#a30e17;border-color:#b91720}
.report-status.resolved{color:var(--green);border-color:#66a97e}
.report-status.dismissed{color:var(--amber);border-color:#b39a5b}
.report-review{
  min-height:36px;
  padding:0 12px;
  background:linear-gradient(110deg,#8f0b13 0%,#5b070c 62%,#260205 100%);
  color:#fff;
  border:1px solid #b1121c;
  font-size:10px;
  font-weight:900;
}
.report-review:hover{
  background:linear-gradient(110deg,#aa101b 0%,#73070B 62%,#350307 100%);
  border-color:#d31a26;
}
.report-review:disabled{opacity:.45;cursor:not-allowed}

/* Accounts */
.user{
  min-height:72px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid #e3dfd8;
}
.user:last-child{border-bottom:0}
.user strong{font-size:13px}
.user span,
.user small{
  display:block;
  margin-top:3px;
  color:#676f79;
  font-size:10px;
}
.actions{
  display:flex;
  gap:8px;
}
.actions button{
  min-height:34px;
  padding:0 11px;
  border:1px solid #343a44;
  background:#11151b;
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.actions .danger{
  background:var(--red);
  border-color:var(--red);
}
.moderator-permission-note{
  margin:0 0 16px;
  padding:12px 14px;
  border-left:3px solid var(--red);
  background:#fff0f2;
  color:#2a2022;
  font-size:12px;
}
.protected-account,
.account-state.verified{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:0 9px;
  border:1px solid #d4d7dc;
  font-size:10px;
  font-weight:900;
}
.account-state.verified{color:var(--green)}
.protected-account{color:#6d727b}

/* Content */
.mod-content-row{
  min-height:70px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid #e3dfd8;
}
.mod-content-row:last-child{border-bottom:0}
.mod-content-row strong,
.mod-content-row span,
.mod-content-row small{display:block}
.mod-content-row strong{font-size:13px}
.mod-content-row span{
  margin-top:4px;
  color:#666e78;
  font-size:10px;
}
.mod-content-row small{
  margin-top:5px;
  color:#a14b52;
  font-size:9px;
}
.mod-content-row button{
  min-height:34px;
  padding:0 12px;
  border:1px solid #343a44;
  background:#11151b;
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.mod-content-row button:hover{
  background:var(--red);
  border-color:var(--red);
}

/* Resolved */
.resolved-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(150px,190px));
  gap:9px;
  margin-bottom:14px;
}
.resolved-list{padding:0 14px 14px}
.resolved-card{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid #e3dfd8;
}
.resolved-card:last-child{border-bottom:0}
.resolved-main{
  display:flex;
  gap:12px;
  min-width:0;
}
.resolved-type{
  color:var(--red);
  font-size:9px;
  font-weight:900;
  min-width:58px;
}
.resolved-main h3{
  margin:0 0 5px;
  font-size:13px;
}
.resolved-main p{
  margin:0;
  color:#626a74;
  font-size:10px;
}
.resolved-meta{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  white-space:nowrap;
}
.resolved-status{
  text-transform:uppercase;
  font-weight:900;
}
.resolved-status.resolved{color:var(--green)}
.resolved-status.dismissed{color:var(--amber)}
.resolved-meta button{
  min-height:32px;
  padding:0 10px;
  border:1px solid #343a44;
  background:#11151b;
  color:#fff;
  font-size:9px;
  font-weight:900;
}

/* Modal */
#modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:22px;
  background:#000b;
}
.modal-card{
  position:relative;
  width:min(700px,94vw);
  max-height:88vh;
  overflow:auto;
  padding:22px;
  background:#fff;
  color:#111318;
  border:1px solid #bbb;
  border-top:4px solid var(--red);
  box-shadow:0 22px 60px #0007;
}
.modal-close{
  position:absolute;
  right:10px;
  top:9px;
  width:32px;
  height:32px;
  border:1px solid #ced1d5;
  background:#f5f4f1;
  color:#111318;
  font-size:20px;
}
#modalBody h2{
  margin:0 40px 5px 0;
  font-size:23px;
}
#modalBody>p{
  color:#656d77;
  font-size:11px;
}
.report-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:14px 0;
}
.report-detail-grid article{
  min-height:62px;
  padding:10px;
  background:#f7f5f1;
  border:1px solid #dcd8d1;
}
.report-detail-grid span,
.report-detail-grid strong{display:block}
.report-detail-grid span{
  color:#7a818a;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
}
.report-detail-grid strong{
  margin-top:5px;
  color:#111318;
  font-size:11px;
}
.report-note,
textarea{
  width:100%;
  min-height:88px;
  margin-top:10px;
  padding:10px;
  border:1px solid #c9ccd0;
  background:#fff;
  color:#111318;
  resize:vertical;
}
.report-resolution{
  margin:11px 0;
  padding:11px;
  border-left:3px solid var(--green);
  background:#f0f8f3;
  color:#354b3e;
  font-size:11px;
}
.report-resolution strong{
  display:block;
  margin-bottom:4px;
  color:var(--green);
}
.modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px;
}
.modal-actions button{
  min-height:36px;
  padding:0 12px;
  border:1px solid #343a44;
  background:#fff;
  color:#111318;
  font-size:10px;
  font-weight:900;
}
.modal-actions button:hover{
  background:#11151b;
  color:#fff;
}
.modal-actions .danger{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}

.empty{
  margin:14px 0 0;
  padding:18px;
  border:1px dashed #c9c6c0;
  background:#fbfaf7;
  color:#747b84;
  font-size:11px;
}

/* Responsive */
@media(max-width:1000px){
  .moderator-shell{grid-template-columns:190px minmax(0,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .report-row{grid-template-columns:minmax(0,1fr) 190px}
  .report-review{grid-column:2}
}
@media(max-width:760px){
  .topbar{
    height:auto;
    min-height:64px;
    flex-wrap:wrap;
    padding:8px;
  }
  .brand,.brand span{height:46px}
  .portal-title{font-size:10px}
  .topbar-actions{
    width:100%;
    margin-left:0;
  }
  .topbar-actions a,
  .topbar-actions button{flex:1}

  .moderator-shell{display:block}
  .moderator-sidebar{padding:10px}
  .sidebar-brand,.sidebar-note{display:none}
  .sidebar-nav{
    display:grid;
    grid-template-columns:repeat(2,1fr);
  }
  .nav-item{margin:0}
  .moderator-page{padding:12px 12px 36px}
  .access-strip{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
  .access-strip div{
    border-right:0;
    padding-right:0;
  }
  .hero{
    min-height:118px;
    grid-template-columns:1fr;
    padding:20px;
  }
  .hero h1{font-size:28px}
  .hero-mark{display:none}
  .report-toolbar,
  .resolved-toolbar,
  .content-tools{grid-template-columns:1fr}
  .report-row,
  .user,
  .mod-content-row{grid-template-columns:1fr}
  .report-review{grid-column:auto;width:100%}
  .resolved-card{flex-direction:column}
  .resolved-meta{flex-wrap:wrap}
  .report-detail-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .sidebar-nav{grid-template-columns:1fr}
}