:root{
  --bg:#0b0b10;
  --panel:#101018;
  --border:#222738;
  --text:#eaeaf0;
  --muted:#9aa3b2;
  --meta:#7e889a;
  --link:#7aa7ff;
  --title:#ff7a18;
  --pill:#1a1f2e;
}

body.theme-light{
  --bg:#f5f6fa;
  --panel:#ffffff;
  --border:#d7dbe6;
  --text:#12131a;
  --muted:#4a5568;
  --meta:#6b7280;
  --link:#1d4ed8;
  --title:#cc4f00;
  --pill:#eef0f6;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:16px;
  line-height:1.35;
}

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

.header-inner{
  max-width:900px;
  margin:0 auto;
  padding:20px;
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  font-weight:800;
  letter-spacing:0.5px;
  font-size:28px;
  color:var(--text);
}

.brand-dot{
  color: var(--title);
}

.brand-accent{
  color:#cc0000;
}

.tagline{
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.2px;
}

.theme-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
}

.theme-icon{ font-size:16px; }
.theme-label{ font-size:14px; color:var(--muted); }

.wrap{
  max-width:900px;
  margin:0 auto;
  padding:0 20px 40px;
}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 16px 14px;
  margin:14px 0;
}

.meta{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--meta);
  font-size:13px;
}
/* Add spacing between meta (timestamp) and complaint text */
.card .meta {
  margin-bottom: 8px;
}

.pill{
  display:inline-block;
  background:var(--pill);
  border:1px solid var(--border);
  padding:2px 8px;
  border-radius:999px;
}

.title{
  color:var(--title);
  font-weight:800;
  margin:8px 0 10px;
  font-size:20px;
  line-height:1.2;
}

.summary{
  white-space:pre-wrap;
  margin:0;
}

.source{
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
}

.actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.share-primary{
  white-space: nowrap;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.source-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}

.source-row .actions{
  margin-top:0;
}

button.pill{
  cursor: pointer;
  font-family: inherit;
}
button.pill{
  appearance: none;
  -webkit-appearance: none;
  background: var(--pill);
  border: 1px solid var(--border);
  padding: 2px 8px;        /* EXACT same as .pill */
  line-height: normal;
  cursor: pointer;
  font-family: inherit;
}

button.pill:hover{
  filter: brightness(1.1);
}

.brand{
  text-decoration: none;
}

.brand:hover{
  text-decoration: none;
}

/* Header right-side actions */
.header-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Make + New same size as theme button, and bright red */
.new-btn{
  padding: 10px 14px;          /* keep size */
  border-radius: 10px;
  font-weight: 800;
  border: 1px solid #cc0000;
  background: #cc0000;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* NEW label styling */
  text-transform: uppercase;
  font-size: 15px;             /* slightly bigger text only */
  letter-spacing: 0.6px;

  /* subtle pulse */
  animation: newPulse 2.4s ease-in-out infinite;
}

.new-btn:hover{
  filter: brightness(1.06);
  animation-play-state: paused; /* stops pulsing on hover (feels nicer) */
}

.new-btn:active{
  transform: translateY(1px);
}

@keyframes newPulse{
  0%, 100% { box-shadow: 0 0 0 rgba(204,0,0,0); }
  50%      { box-shadow: 0 0 0 6px rgba(204,0,0,0.12); }
}

/* small hint under textarea */
.modal-hint {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.75;
}

/* Card bottom row for likes + actions */
.card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}

.likes .like-btn{
  display:flex;
  align-items:center;
  gap:8px;
}

.likes .like-btn i{
  font-size:14px;
}

/* Modal */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:50;
}

.modal-overlay.open{
  display:flex;
}

.modal{
  width:min(720px, 100%);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.modal-title{
  color:var(--title);
  font-weight:800;
  font-size:18px;
}

.modal-textarea{
  width:100%;
  min-height:220px;
  resize:vertical;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  padding:12px;
  font-family:inherit;
  font-size:15px;
  line-height:1.35;
  outline:none;
}

.modal-textarea:focus{
  border-color: color-mix(in srgb, var(--title) 55%, var(--border));
}

.modal-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  flex-wrap:wrap;
}

.counter{
  color:var(--muted);
  font-size:13px;
}

.modal-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.modal-msg{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
}

/* Small tweak: make pills slightly more tappable */
button.pill{
  padding:4px 10px;
}

/* FORCE + New button styling */
#newBtn{
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  border: 1px solid #cc0000 !important;
  background: #cc0000 !important;
  color: #fff !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-transform: uppercase !important;
  font-size: 15px !important;
  letter-spacing: 0.6px !important;

  animation: newPulse 2.4s ease-in-out infinite !important;
}

#newBtn:hover{
  filter: brightness(1.06);
  animation-play-state: paused !important;
}

.admin-input{
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  font-family: inherit;
  min-width: 240px;
}

.admin-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th,
.admin-table td{
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  white-space: nowrap;
}

.admin-table td:nth-child(2){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 620px;
}

.admin-del{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cc0000;
  background: #cc0000;
  color: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 800;
  line-height: 1;
}

.admin-del:hover{
  filter: brightness(1.06);
}
.admin-del:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* Admin soft-delete / restore */
tr.is-deleted td{
  opacity: 0.55;
}

.admin-restore{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #16a34a;
  background: #16a34a;
  color: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 800;
  line-height: 1;
}

.admin-restore:hover{
  filter: brightness(1.06);
}

.admin-restore:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* ✅ Admin search + toggle controls */
.admin-controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin: 12px 0 12px;
}

.admin-search{
  min-width: 320px;
  flex: 1 1 320px;
}

.admin-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--muted);
  font-size: 13px;
  user-select: none;
}

.admin-toggle input{
  transform: translateY(1px);
}

/* ✅ Public feed sort control */
.feed-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin: 8px 0 10px;
}

.feed-controls-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.sort-label{
  color: var(--muted);
  font-size: 13px;
}

.sort-select{
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

/* FIX: modal textarea protruding outside its container */
.modal,
.modal * {
  box-sizing: border-box;
}

.modal-textarea {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Admin page only: slightly wider container */
.admin-page .wrap,
.admin-page .header-inner {
  max-width: 1000px;
}