:root {
  /* Wet asphalt / near-black base */
  --bg: #08040a;
  --header: #060306;
  --panel: #0b060b;
  --row-alt: rgba(255,255,255,0.008);
  --row-hover: rgba(178,44,80,0.055);
  --recessed: #060307;

  /* Hairline structure — barely there */
  --border: rgba(255,255,255,0.045);
  --border-soft: rgba(255,255,255,0.065);
  --border-accent: rgba(200,80,116,0.20);
  --border-accent-hover: rgba(226,96,138,0.52);

  /* Sodium-lamp warm greys */
  --text: #cfc2cb;
  --text-soft: #8d7d8a;
  --text-dim: #6e6270;
  --muted: #574b58;

  /* Single accent family: deep neon rose bleeding through rain */
  --rose: #b8496e;
  --rose-rgb: 184,73,110;
  --rose-lit: #e0709b;
  --rose-deep: #8e3253;
  --rose-deep-rgb: 142,50,83;

  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

#sentinel { height: 1px; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 8% -10%, rgba(var(--rose-deep-rgb),0.085), transparent 72%),
    radial-gradient(950px 460px at 94% -6%, rgba(var(--rose-rgb),0.055), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,0.012), transparent 320px);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans); font-size: 13.5px;
}
html:not(.cw-ack) body { overflow: hidden; }
html.cw-ack .cw-overlay { display: none; }

/* ---------- Content warning ---------- */
.cw-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(4,2,5,.88);
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  opacity: 1; transition: opacity .5s ease;
}
.cw-overlay.cw-dismissed { opacity: 0; pointer-events: none; }
.cw-card {
  max-width: 520px; width: 100%; text-align: center; padding: 38px 32px;
  background: var(--panel);
  border: 1px solid var(--border-accent); border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.85), 0 0 44px rgba(var(--rose-deep-rgb),.10);
  transition: transform .5s ease, opacity .5s ease;
}
.cw-overlay.cw-dismissed .cw-card { transform: translateY(12px); opacity: 0; }
.cw-title {
  font-family: var(--font-mono); font-size: 1.22rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; margin: 0 0 16px; color: var(--rose);
  text-shadow: 0 0 22px rgba(var(--rose-rgb),.22);
}
.cw-message {
  color: var(--text-soft); line-height: 1.72; margin: 0 0 26px; font-size: 12.5px; text-align: left;
}
.cw-enter {
  padding: 11px 40px; font-size: 11.5px; font-weight: 600; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .09em; color: var(--rose);
  border: 1px solid var(--border-accent); border-radius: 4px; cursor: pointer;
  background: rgba(var(--rose-rgb),.035);
  transition: all .25s ease;
}
.cw-enter:hover {
  border-color: var(--border-accent-hover); color: var(--rose-lit);
  background: rgba(var(--rose-rgb),.085);
  box-shadow: 0 0 22px rgba(var(--rose-rgb),.20);
}

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(6,3,6,0.975);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
}
.header-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
h1 {
  margin: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: #ddd0d9;
}
.index-badge {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .13em;
  color: var(--rose); background: rgba(var(--rose-rgb), .05);
  padding: 3px 8px; border-radius: 2px; border: 1px solid var(--border-accent);
  text-shadow: 0 0 12px rgba(var(--rose-rgb),.35);
}
.count-label {
  color: var(--muted); font-weight: 500; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}

.controls-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 13px; }

.searchfilter {
  position: relative; display: flex; align-items: stretch;
  flex: 1 1 clamp(200px, 60vw, 540px);
  background: var(--recessed); border: 1px solid var(--border-soft); border-radius: 4px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.searchfilter:focus-within {
  border-color: var(--border-accent-hover);
  box-shadow: 0 0 0 3px rgba(var(--rose-rgb),.055), 0 0 18px rgba(var(--rose-rgb),.10);
}
#search {
  flex: 1; min-width: 0; border: none; background: transparent;
  padding: 9px 12px; color: var(--text); font-family: var(--font-mono); font-size: 11.5px;
}
#search::placeholder { color: var(--muted); }
#search:focus { outline: none; }
#browse-tags-toggle {
  flex: 0 0 auto; background: transparent; border: none; border-left: 1px solid var(--border);
  color: var(--muted); padding: 9px 14px; cursor: pointer; font-size: 10.5px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .08em; border-radius: 0 3px 3px 0; transition: all .25s ease;
}
#browse-tags-toggle:hover { color: var(--rose-lit); background: rgba(var(--rose-rgb),.05); }
#browse-tags-toggle .label-compact { display: none; }
@media (max-width: 540px) {
  #browse-tags-toggle .label-full { display: none; }
  #browse-tags-toggle .label-compact { display: inline; font-size: 13px; }
}

.suggestions {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; background: #0a060a;
  border: 1px solid var(--border-soft); border-radius: 4px; max-height: 240px; overflow-y: auto; z-index: 40;
  box-shadow: 0 18px 40px rgba(0,0,0,.9); font-family: var(--font-mono);
}
.suggestions .item { padding: 8px 12px; cursor: pointer; font-size: 11.5px; color: var(--text-dim); }
.suggestions .item:hover, .suggestions .item.active {
  background: rgba(var(--rose-rgb),.07); color: var(--rose-lit);
}
.hidden { display: none !important; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 11px; }
.chips:empty { display: none; margin-top: 0; }
.chip {
  padding: 4px 11px; border-radius: 999px; background: rgba(var(--rose-rgb),.07);
  border: 1px solid var(--border-accent-hover); color: var(--rose-lit);
  font-family: var(--font-mono); font-size: 10.5px; cursor: pointer; user-select: none;
  box-shadow: 0 0 14px rgba(var(--rose-rgb),.12);
  transition: all .2s ease;
}
.chip:hover { background: rgba(var(--rose-rgb),.14); box-shadow: 0 0 20px rgba(var(--rose-rgb),.26); }
.chip.removable::after { content: " ×"; opacity: .7; }

#sort-select {
  flex: 0 0 auto; margin-left: auto;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--recessed) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23574b58' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center;
  background-size: 10px 6px;
  border: 1px solid var(--border-soft); border-radius: 4px; color: var(--text-dim);
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  padding: 8px 32px 8px 12px; cursor: pointer; transition: all .25s ease;
}
#sort-select:hover, #sort-select:focus {
  outline: none; border-color: var(--border-accent); color: var(--rose);
}

.browse-panel {
  margin-top: 12px; max-height: 300px; overflow-y: auto; background: var(--recessed);
  border: 1px solid var(--border); border-radius: 4px; padding: 14px; font-family: var(--font-mono);
  column-width: 170px; column-gap: 20px;
}
.browse-panel .letter-group { break-inside: avoid; margin-bottom: 13px; }
.browse-panel .letter-group h3 {
  margin: 0 0 5px; font-size: 10px; color: var(--rose-deep); letter-spacing: .12em;
}
.browse-panel .tag-link { display: block; font-size: 11.5px; color: var(--text-dim); cursor: pointer; padding: 2px 0; }
.browse-panel .tag-link:hover { color: var(--rose-lit); text-shadow: 0 0 10px rgba(var(--rose-rgb),.4); }

/* ---------- Index table ---------- */
main { padding: 22px 24px 60px; max-width: 1400px; margin: 0 auto; }

.index-container {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.6);
}

.index-head {
  display: grid; grid-template-columns: 130px 1fr 230px; gap: 18px;
  padding: 10px 18px; background: rgba(0,0,0,.35); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; text-transform: uppercase;
  color: var(--muted); letter-spacing: .14em;
}

.index-list { display: flex; flex-direction: column; }

.index-row {
  display: grid; grid-template-columns: 130px 1fr 230px; gap: 18px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  align-items: start; position: relative;
  box-shadow: inset 2px 0 0 transparent;
  transition: background .22s ease, box-shadow .22s ease;
}
.index-row:last-child { border-bottom: none; }
.index-row:nth-child(even) { background: var(--row-alt); }
.index-row:hover {
  background: var(--row-hover);
  box-shadow: inset 2px 0 0 rgba(var(--rose-rgb),.45);
}

/* Date column */
.row-date-col { display: flex; flex-direction: column; gap: 9px; }
.row-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); letter-spacing: .04em; }
.history-link {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--muted);
  text-decoration: none; width: fit-content; transition: color .22s ease, text-shadow .22s ease;
}
.history-link:hover { color: var(--rose-lit); text-shadow: 0 0 12px rgba(var(--rose-rgb),.55); }

/* Main column */
.row-main-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.row-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.42; }
.row-title a, .row-title span {
  color: #d5c8d1; text-decoration: none; word-break: break-word;
  transition: color .22s ease, text-shadow .22s ease;
}
.row-title a:hover { color: var(--rose-lit); text-shadow: 0 0 16px rgba(var(--rose-rgb),.5); }
.row-desc {
  margin: 0; color: var(--text-dim); font-size: 11px; line-height: 1.6; opacity: .72;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.tag-pill {
  font-family: var(--font-mono); font-size: 10px; line-height: 1; letter-spacing: .03em;
  color: var(--muted); background: rgba(255,255,255,.014);
  border: 1px solid rgba(255,255,255,.05); border-radius: 999px;
  padding: 5px 11px; cursor: pointer; white-space: nowrap; user-select: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tag-pill:hover {
  color: #ffd7e6; background: rgba(var(--rose-rgb),.16);
  border-color: rgba(255,110,160,.75); transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(var(--rose-rgb),.55), 0 0 5px rgba(255,110,160,.6);
  text-shadow: 0 0 10px rgba(255,140,180,.85);
}

/* Links column — near-invisible until hovered */
.row-links-col { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.btn-action {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .11em; text-decoration: none; padding: 9px 12px; border-radius: 3px;
  cursor: pointer; white-space: nowrap;
  background: rgba(255,255,255,.012);
  border: 1px solid var(--border-accent);
  transition: all .25s ease;
}
.btn-page { color: var(--rose); }
.btn-page:hover {
  color: var(--rose-lit); background: rgba(var(--rose-rgb),.075);
  border-color: var(--border-accent-hover);
  box-shadow: 0 0 20px rgba(var(--rose-rgb),.22);
  text-shadow: 0 0 10px rgba(var(--rose-rgb),.5);
}
.btn-dl { color: var(--rose-deep); border-color: rgba(var(--rose-deep-rgb),.28); }
.btn-dl:hover {
  color: var(--rose); background: rgba(var(--rose-deep-rgb),.09);
  border-color: rgba(var(--rose-rgb),.45);
  box-shadow: 0 0 18px rgba(var(--rose-deep-rgb),.28);
  text-shadow: 0 0 10px rgba(var(--rose-rgb),.4);
}

@media (max-width: 820px) {
  main { padding: 16px 14px 50px; }
  .index-head { display: none; }
  .index-row { grid-template-columns: 1fr; gap: 12px; padding: 16px 14px; }
  .row-date-col { flex-direction: row; align-items: center; gap: 14px; }
  .row-links-col { flex-direction: column; }
}

.empty {
  padding: 64px 20px; text-align: center; color: var(--muted);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

.site-footer {
  border-top: 1px solid var(--border); padding: 34px 26px; color: #4c4250;
  font-family: var(--font-mono); font-size: 9.5px; line-height: 1.85; text-align: justify;
  max-width: 1100px; margin: 0 auto;
}