/* v2 2015 */

:root{
  --bg0:#07090c;
  --bg1:#0d1117;
  --panel:#111a24;
  --panel2:#0e1620;

  --line:#253344;
  --line2:#1b2735;

  --text:#d7e2f0;
  --muted:#9fb0c6;

  --link:#6fb3ff;
  --link2:#9ad0ff;

  --red:#ff4b57;
  --gray:#8aa0b8;

  --shadow: 0 10px 0 rgba(0,0,0,.25);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 12px;
  background:
    /* subtle scanlines */
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      rgba(255,255,255,.015) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    ),
    /* grain */
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.06), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.05), transparent 40%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 70%);
}

a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link2); text-decoration:underline; }

.mono{
  font-family: "Courier New", Courier, monospace;
}

.dim{ color: rgba(215,226,240,.65); }

.wrap{
  width: min(1040px, calc(100% - 18px));
  margin: 12px auto 24px;
}

/* Header */
.masthead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding: 10px 12px;
  background: linear-gradient(#182433, #0f1722);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.site{
  font-weight: bold;
  letter-spacing: .02em;
}
.site-name{
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.site-domain{
  color: rgba(215,226,240,.8);
}
.site-sep{ color: rgba(215,226,240,.5); padding: 0 6px; }

.sub{
  margin-top: 4px;
  color: rgba(215,226,240,.65);
}

.mast-right{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.badge{
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 2px; /* older vibe */
}
.badge-red{
  border-color: rgba(255,75,87,.45);
  background: rgba(255,75,87,.12);
  color: #ffd7da;
}
.badge-gray{
  border-color: rgba(138,160,184,.35);
  background: rgba(138,160,184,.10);
  color: rgba(215,226,240,.85);
}

/* Nav bar */
.nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 10px;
  margin-top: 8px;
  background: linear-gradient(#121c28, #0c121a);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.nav a{
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.nav a:hover{
  background: rgba(111,179,255,.10);
  border-color: rgba(111,179,255,.20);
}
.nav .right{ margin-left:auto; }

/* Notice bar */
.noticebar{
  margin-top: 8px;
  padding: 7px 10px;
  background: #0a111a;
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
  color: rgba(215,226,240,.78);
}
.noticebar .sep{
  color: rgba(215,226,240,.35);
  padding: 0 6px;
}

/* Layout */
.content{
  display:grid;
  grid-template-columns: 1fr 290px;
  gap: 10px;
  margin-top: 10px;
}

/* Panels */
.panel, .sidebox{
  border: 1px solid var(--line);
  background: linear-gradient(#101a26, #0b1018);
  box-shadow: var(--shadow);
}

.panel-title, .side-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 6px 10px;
  background: linear-gradient(#1a2a3d, #101b29);
  border-bottom: 1px solid var(--line);
  font-weight: bold;
}

.title-right{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-weight: normal;
}

.panel-body{
  padding: 10px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.04), transparent 35%),
    linear-gradient(#0e1620, #0b1018);
}

/* Post header */
.post-head{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 8px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
}

.avatar{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  font-weight:bold;
  background: linear-gradient(#2a3d55, #152433);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
}

.who{ display:flex; gap:8px; align-items:baseline; }
.user{
  font-weight:bold;
  padding: 1px 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.user.admin{
  border-color: rgba(255,75,87,.35);
  background: rgba(255,75,87,.10);
  color: #ffd7da;
}

.post{
  margin-top: 10px;
  padding: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}

.post p{ margin: 0 0 10px; }

.sigbox{
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,.12);
}
.sigline{ margin-bottom: 4px; }
.sig{ color: rgba(215,226,240,.75); }

/* Divider */
.hr{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 10px 0;
}

/* Stats */
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.stat{
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.k{ color: rgba(215,226,240,.65); margin-bottom: 4px; }
.v{ font-size: 14px; }

/* Sidebar */
.sidebar{ display:flex; flex-direction:column; gap:10px; }
.side-body{ padding: 10px; background: rgba(0,0,0,.12); }

.field{ margin-bottom: 8px; }
.field label{
  display:block;
  margin-bottom: 4px;
  color: rgba(215,226,240,.7);
}

.fake-input{
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(215,226,240,.75);
}

.buttons{ display:flex; gap:8px; margin-top: 8px; }
.btn{
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-weight:bold;
}
.btn.disabled{ opacity: .55; }
.btn.ghost{
  background: rgba(111,179,255,.07);
  border-color: rgba(111,179,255,.18);
}

.list{
  margin:0;
  padding-left: 16px;
}
.list li{ margin: 6px 0; }

.shout{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 8px;
  line-height: 1.45;
}
.shout div{ margin: 4px 0; }

/* Footer */
.footer{
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: linear-gradient(#111a24, #0b1018);
  box-shadow: var(--shadow);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 900px){
  .content{ grid-template-columns: 1fr; }
  .nav .right{ margin-left: 0; }
  .stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .stats{ grid-template-columns: 1fr; }
}