:root{
  --primary:#00bcd4;
  --primary-dark:#0097a7;
  --accent:#ffca28;
  --text:#f5f5f5;
  --muted:#b0bec5;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(135deg,#050816,#020617);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
.container{
  width:min(1080px, calc(100% - 2rem));
  margin:0 auto;
  padding:1.4rem 0 2.6rem;
}
.card{
  background:rgba(15,23,42,.9);
  border:1px solid rgba(148,163,184,.55);
  border-radius:18px;
  padding:1rem;
  box-shadow:0 18px 40px rgba(15,23,42,.55);
}
.header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:1rem;
}
.brand{
  font-weight:950;
  letter-spacing:.2px;
  font-size:1.15rem;
}
.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:.85rem;
  color:#a7f3d0;
  border:1px solid rgba(45,212,191,.35);
  background:rgba(15,118,110,.20);
  padding:3px 10px;
  border-radius:999px;
}
.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:.6rem 0 1rem;
}
.tab{
  border:1px solid rgba(148,163,184,.55);
  background:rgba(2,6,23,.35);
  color:var(--text);
  padding:.55rem 1.05rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  font-size:.9rem;
}
.tab:hover{background:rgba(34,211,238,.10)}
.tab.active{
  border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
}
.panel{display:none}
.panel.active{display:block}

.grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap:12px;
}

.form{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap:10px;
  padding:12px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(2,6,23,.35);
  border-radius:16px;
}
label{font-size:.85rem;color:var(--muted);font-weight:700}
input, textarea, select{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(51,65,85,.9);
  background:rgba(15,23,42,.9);
  color:var(--text);
  padding:.55rem .65rem;
  font-size:.9rem;
  font-family:inherit;
}
textarea{min-height:90px;resize:vertical}
.row2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width:720px){ .row2{grid-template-columns:minmax(0,1fr);} }
.btn{
  border:none;
  border-radius:999px;
  padding:.62rem 1.1rem;
  cursor:pointer;
  font-size:.92rem;
  font-weight:950;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 12px 24px rgba(0,188,212,.25);
}
.btn.secondary{
  background:transparent;
  border:1px solid rgba(148,163,184,.55);
  box-shadow:none;
}
.btn.secondary:hover{background:rgba(34,211,238,.10)}
.small{font-size:.85rem;color:var(--muted)}
.alert{
  border-radius:14px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(2,6,23,.35);
}
.alert.ok{border-color:rgba(34,197,94,.65); background:rgba(34,197,94,.10)}
.alert.err{border-color:rgba(239,68,68,.65); background:rgba(239,68,68,.10)}

.post{
  padding:12px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(2,6,23,.25);
  border-radius:16px;
}
.post-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.post-title{
  font-weight:950;
  font-size:1rem;
}
.post-meta{font-size:.85rem;color:var(--muted)}
.stars{color:#facc15;font-size:.9rem}
.post-body{margin-top:8px;color:#e5e7eb}
.reply{
  margin-top:10px;
  padding:10px 10px;
  border-radius:14px;
  background:rgba(15,23,42,.7);
  border:1px solid rgba(148,163,184,.25);
}
.reply .who{font-weight:900;font-size:.9rem}
.reply .who.admin{color:#93c5fd}
.reply .meta{font-size:.82rem;color:var(--muted)}
.hr{height:1px;background:rgba(148,163,184,.25);margin:12px 0}
.footer{
  margin-top:14px;
  text-align:center;
  font-size:.82rem;
  color:var(--muted);
}
.hidden-field{display:none !important}
.pager{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.pager a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(2,6,23,.35);
}
.pager a:hover{background:rgba(34,211,238,.10)}