/* Skindicate's visual design is a direct port of modArtist's own
   dark UI system (~/Projects/modartist/public/css/app.css) -- same
   tokens, same component shapes -- adapted to Skindicate's own
   vocabulary (skins, not modists; plain users, no personas/avatars)
   rather than modArtist's exact class names. Chat (below) has no
   modArtist equivalent to port from at all -- ModArtist's own chat
   module was removed outright at one point (MaqSys commit 273d6fb) --
   so its styling is original, not ported. */

/* ── Reset & Base ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0d0d0f;
  --surface:     #161618;
  --surface-up:  #1e1e22;
  --border:      #2a2a2f;
  --border-hi:   #3a3a42;
  --text:        #e8e8ec;
  --text-2:      #8a8a96;
  --text-3:      #55555e;
  --accent:      #e8671a;
  --accent-h:    #f07830;
  --accent-dim:  #7a3810;
  --green:       #4caf7a;
  --green-dim:   #1a3a28;
  --red:         #e05050;
  --red-dim:     #5a1a1a;
  --radius:      6px;
  --radius-lg:   12px;
  --font:        system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:        "Cascadia Code", "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

html { font-size: 18px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

h1, h2, h3 { line-height: 1.25; font-weight: 700; }

img { max-width: 100%; display: block; }

/* ── Layout ───────────────────────────────────────────────────────────── */

.site-header {
  background: rgba(22, 22, 24, 0.84);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(232, 103, 26, 0.04);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav {
  max-width: 1444px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.logo {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}
.logo:hover { color: var(--accent); text-decoration: none; }
.logo strong { color: var(--accent); font-weight: 700; }
.logo:hover strong { color: var(--text); }

/* Brand-name accent -- wraps the literal word "Skindicate" wherever it
   appears as plain prose (footer, auth headings, the homepage sidebar
   heading), matching .logo strong's own treatment of it in the nav.
   Not used where the surrounding element is already accent-colored
   itself (e.g. inside a .btn-primary), since accent-on-accent would
   disappear. */
.brand { color: var(--accent); }

.nav-link {
  font-size: 0.9rem;
  color: var(--text-2);
  text-decoration: none;
}
.nav-link:hover { color: var(--text); text-decoration: none; }

.nav-search { flex: 1 1 auto; max-width: 320px; }
.nav-search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0.4rem 0.75rem;
}
.nav-search-input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 700px) {
  .nav-search { display: none; }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-user-link {
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
}
.nav-user-link:hover { color: var(--text); text-decoration: none; }

.main {
  flex: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.825rem;
  color: var(--text-3);
}
.site-footer a { color: var(--text-3); }
.site-footer a:hover { color: var(--text-2); }
.site-footer .footer-credit { display: inline-block; margin-top: 0.35rem; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-hi);
}
.btn-ghost:hover { background: var(--surface-up); color: var(--text); border-color: var(--border-hi); }

.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn-danger:hover { background: var(--red-dim); color: var(--red); }
.btn-danger:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn-danger:disabled:hover { background: transparent; color: var(--red); }

.btn-link {
  background: none;
  border: none;
  color: var(--text-2);
  padding: 0;
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn-link:hover { color: var(--text); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

/* ── Forms ────────────────────────────────────────────────────────────── */

.form-page { max-width: 560px; }

/* Admin listing pages (accounts, claims, role changes, ingest runs,
 * skin reports) -- unstyled on purpose: they were all wrongly reusing
 * .form-page above (a 560px cap meant for actual forms like login/
 * signup), which squeezed every admin table down to a fraction of
 * .main's own 1400px width every other page on the site gets. No rules
 * needed here yet -- .main already provides the real width/padding;
 * this class exists so all five admin pages have one shared hook if
 * they ever need admin-specific styling later. */
.admin-page { }

.form-group { margin-bottom: 1.1rem; }

.form-label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  background: var(--surface-up);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.55rem 0.75rem;
  transition: border-color 0.15s;
  appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-input::placeholder { color: var(--text-3); }
.form-input[type="file"] {
  padding: 0.45rem 0.75rem;
  color: var(--text-2);
  cursor: pointer;
}
.form-select { cursor: pointer; }
.form-select option { background: var(--surface-up); }
.form-textarea { resize: vertical; min-height: 5rem; }

.form-checkbox-group { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; }
.form-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
}
.form-checkbox-label input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

.form-hint {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-3);
}

.flash {
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}
.flash-notice {
  background: var(--green-dim);
  border: 1px solid var(--green);
  color: var(--green);
}
.flash-alert {
  background: var(--red-dim);
  border: 1px solid var(--red);
  color: var(--red);
}

.form-errors {
  background: var(--red-dim);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.form-error {
  color: var(--red);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.alert {
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.alert-error {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid var(--red);
}

/* ── Auth (login/signup) ──────────────────────────────────────────────── */

.auth-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem 1rem;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 3rem;
  width: 100%;
  max-width: 460px;
}

.auth-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.auth-glyph {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.auth-sub {
  color: var(--text-2);
  font-size: 0.875rem;
}

.auth-form .form-group { margin-bottom: 1rem; }

.auth-footer-link {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-2);
}
.auth-footer-link a { color: var(--accent); }

/* ── Page header ──────────────────────────────────────────────────────── */

.page-header { margin-bottom: 1.75rem; }
.page-header h1 { font-size: 1.5rem; }
.page-header-back {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: var(--text-3);
}
.page-header-back:hover { color: var(--accent); }

/* ── Watchers/watching list ───────────────────────────────────────────── */

.user-list { display: flex; flex-direction: column; gap: 0.5rem; }
.user-list-item {
  padding: 0.75rem 1rem;
  background: var(--surface-up);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  transition: border-color 0.15s;
}
.user-list-item:hover { border-color: var(--border-hi); text-decoration: none; }

/* ── Homepage featured-skin carousel ─────────────────────────────────────
   Thumbnail left, info + why-featured right, one slide per currently-
   featured skin (SkinsController.featured_section_html, at most
   Skin.featured_cap()) -- not part of the grid. Each .featured-skin is
   a slide; only the .is-active one is display:grid, the rest
   display:none, toggled by the featured-carousel JS controller
   (public/js/app.js) exactly like the screenshot carousel's own
   thumb-swap, just swapping a whole card instead of one <img>. */
.featured-carousel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
}
.featured-skin {
  display: none;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
}
.featured-skin.is-active { display: grid; }
@media (max-width: 700px) {
  .featured-skin { grid-template-columns: 1fr; }
}
.featured-skin-thumb {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surface-up);
}
.featured-skin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-skin-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.featured-skin-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.5rem 1.25rem 0;
}
@media (max-width: 700px) {
  .featured-skin-info { padding: 0 1.25rem 1.25rem; }
}
.featured-skin-badge {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.featured-skin-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.featured-skin-title:hover { color: var(--accent); }
.featured-skin-author { color: var(--text-2); font-size: 0.875rem; }
.featured-skin-description { color: var(--text-2); }
.featured-skin-reason {
  margin-top: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface-up);
  border-radius: var(--radius);
  font-size: 0.875rem;
}
.featured-skin-by { display: block; margin-top: 0.4rem; color: var(--text-2); font-size: 0.8rem; }

.featured-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 2;
}
.featured-carousel:hover .featured-carousel-btn { opacity: 1; }
.featured-carousel-btn:hover { background: rgba(0,0,0,0.8); }
.featured-carousel-prev { left: 0.5rem; }
.featured-carousel-next { right: 0.5rem; }

.featured-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.featured-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--border-hi);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.featured-carousel-dot:hover { background: var(--text-3); }
.featured-carousel-dot.is-active { background: var(--accent); transform: scale(1.25); }

/* ── Two-column page layout + sidebar card ───────────────────────────────
   Direct structural port of modArtist's own `.page-layout`/`.page-sidebar`/
   `.sidebar-info-card` pattern (browse, profile, admin all use this
   shape there) -- own class names kept where Skindicate already had an
   equivalent, these are new. */

.page-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .page-layout { grid-template-columns: 1fr; }
}

.page-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.sidebar-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}

.sidebar-heading { font-size: 1.15rem; font-weight: 700; }

.sidebar-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.85rem 0;
}

.sidebar-stats { font-size: 0.875rem; color: var(--text-2); margin-bottom: 0.6rem; }
.sidebar-stats strong { color: var(--text); }

.sidebar-description {
  color: var(--text-2);
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 0.5rem;
}

.sidebar-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.85rem; }
.sidebar-note { color: var(--text-3); font-size: 0.8rem; line-height: 1.6; }

/* ── Profile stat pills ──────────────────────────────────────────────── */

.profile-stat-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }

.profile-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: var(--surface-up);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
  color: var(--text-2);
}
.profile-stat-pill strong { font-size: 1rem; color: var(--text); }
/* Two of the three stat pills (watching/watchers) are real links to a
   list page; the third (skins) is a plain <span> -- reset the anchor's
   own default styling so both render identically. */
a.profile-stat-pill { text-decoration: none; transition: border-color 0.15s; }
a.profile-stat-pill:hover { border-color: var(--border-hi); text-decoration: none; }

.empty-state {
  color: var(--text-3);
  font-size: 0.9rem;
  padding: 2rem 0;
}

/* ── Skins grid/card ──────────────────────────────────────────────────── */

/* Direct port of ModArtist's own .modist-grid column-count scheme:
   CSS container queries against the content column's own width, not
   viewport media queries -- the difference matters. A viewport
   breakpoint (this used to be a plain auto-fill/minmax grid, no
   breakpoint at all) changes column count at one fixed window width
   regardless of whether a sidebar is currently eating into that
   width, so cards jump abruptly right at the breakpoint the moment
   .page-layout's own sidebar appears/disappears. A container query
   measures the grid's actual rendered container width directly, so
   it already accounts for the sidebar and reflows smoothly instead of
   snapping. Thresholds (700/1300/1650px) are ModArtist's own, tuned
   against real container widths (a laptop window, a ~1920px display,
   an ultrawide) rather than viewport width -- ported as-is since
   they're already calibrated to the same .page-layout/sidebar shape
   this app's own pages use. */
.browse-page, .profile-page {
  container-type: inline-size;
  container-name: card-grid;
}

.skins-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@container card-grid (max-width: 520px) {
  .skins-grid { grid-template-columns: 1fr; }
}
@container card-grid (min-width: 700px) {
  .skins-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container card-grid (min-width: 1300px) {
  .skins-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container card-grid (min-width: 1650px) {
  .skins-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.skin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.skin-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
}

.skin-card-preview {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surface-up);
}
.skin-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}
.skin-card:hover .skin-card-preview img { transform: scale(1.04); }

.skin-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.skin-card-meta {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.skin-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  line-height: 1.35;
}
.skin-card-title:hover { color: var(--accent); text-decoration: none; }

.skin-card-platforms { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.skin-card-platform {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
}
.skin-card-platform:not(:last-child)::after { content: "\00b7"; margin-left: 0.3rem; color: var(--text-3); }

.skin-card-author {
  font-size: 0.75rem;
  color: var(--text-3);
  text-decoration: none;
}
.skin-card-author:hover { color: var(--text-2); text-decoration: none; }

/* ── Tags ─────────────────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  background: var(--surface-up);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--text-2);
  font-family: var(--mono);
  text-decoration: none;
  transition: color 0.12s, border-color 0.12s;
}
.tag:hover { color: var(--accent); border-color: var(--accent-dim); text-decoration: none; }

/* ── Skin detail ──────────────────────────────────────────────────────── */

.skin-show {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .skin-show { grid-template-columns: 1fr; }
}

/* Box styling (border/bg/radius/aspect-ratio) lives on the actual
   visual element (> img, > .skin-preview-placeholder, or
   .carousel-stage below), not on this wrapper itself -- a carousel
   needs the wrapper to stay unconstrained so its own thumbnail strip
   can expand below the fixed-aspect-ratio stage. */
.skin-preview-area > img,
.skin-preview-area > .skin-preview-placeholder {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
  width: 100%;
  display: block;
}
.skin-preview-area img {
  object-fit: contain;
}
.skin-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Screenshot carousel ──────────────────────────────────────────────── */

.carousel { display: flex; flex-direction: column; gap: 0.5rem; }

.carousel-stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
}

.carousel-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 2;
}
.carousel-stage:hover .carousel-btn { opacity: 1; }
.carousel-btn:hover { background: rgba(0,0,0,0.8); }
.carousel-prev { left: 0.5rem; }
.carousel-next { right: 0.5rem; }

.carousel-counter {
  position: absolute;
  bottom: 0.5rem;
  right: 0.625rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.45);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.carousel-strip {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.1rem 0;
}
.carousel-strip::-webkit-scrollbar { display: none; }

.carousel-thumb {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--surface-up);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s;
}
.carousel-thumb:hover { border-color: var(--border-hi); }
.carousel-thumb.is-active { border-color: var(--accent); }
.carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.skin-title { font-size: 1.5rem; margin-bottom: 0.4rem; }
.skin-platform-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.75rem; }
.skin-platform-badge {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
}

.skin-description {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.skin-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }

.skin-download-link {
  display: inline-block;
  margin-bottom: 1rem;
}

.skin-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.825rem;
  color: var(--text-3);
  margin-bottom: 0.75rem;
}

.skin-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }

.btn-favorited {
  background: var(--accent-dim);
  color: var(--accent-h);
  border-color: var(--accent-dim);
}
.btn-favorited:hover { background: var(--accent-dim); color: var(--accent-h); }

.btn-disabled { opacity: 0.5; cursor: default; pointer-events: none; }

.skin-author-card {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.skin-author-card a { font-weight: 600; font-size: 0.9rem; }

/* ── Profile page ─────────────────────────────────────────────────────── */

.profile-page { width: 100%; }

.profile-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.profile-handle { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.5rem; }

.profile-stats {
  display: flex;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 0.75rem;
}
.profile-stats strong { color: var(--text); }

.profile-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ── Comments ─────────────────────────────────────────────────────────── */

.skin-comments {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  max-width: 780px;
}

.comments-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--text-2);
}

.comment {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.comment:last-of-type { border-bottom: none; }

.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
}
.comment-author {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.comment-author:hover { color: var(--accent); text-decoration: none; }

.comment-text {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0;
}

.comment-delete-form { margin: 0; }
.comment-delete {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.comment-delete:hover { color: var(--red); }

.comment-form { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.comment-form-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }

.comments-sign-in {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-3);
  text-align: center;
}

/* ── Comments: threading ──────────────────────────────────────────────
   (modArtist's own app.css has no rules at all for these classes,
   despite its .erb using them -- confirmed by grep -- so these are new,
   built from the same design tokens as everything else here, not
   ported values.) */

.comment-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.comment-replies {
  margin-top: 0.75rem;
  margin-left: 1.5rem;
  padding-left: 0.875rem;
  border-left: 2px solid var(--border);
}
.comment-reply { border-bottom: none; padding: 0.75rem 0; }
.comment-reply:not(:last-child) { border-bottom: 1px solid var(--border); }

.comment-reply-wrap { margin-top: 0.5rem; }
.reply-form { margin-top: 0.75rem; margin-left: 1.5rem; }
.reply-form .comment-input { min-height: 3.5rem; }

/* ── Comments: discussion moderation (lock/cooldown/report/edit) ────────
   ModArtist's own app.css has no rules at all for these classes either
   -- same story as the threading section above. */

.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.comments-header .comments-title { margin-bottom: 0; }

.discussion-mod-controls { display: flex; align-items: center; gap: 0.6rem; }
.discussion-status { font-size: 0.8125rem; color: var(--text-3); }

.admin-mod-controls { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.discussion-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}
.discussion-notice-icon { font-size: 1rem; line-height: 1.4; }
.discussion-notice-reason { color: var(--text-3); font-weight: 400; }
.discussion-locked { background: var(--red-dim); color: var(--text); border: 1px solid var(--red); }
.discussion-cooldown { background: var(--surface-up); color: var(--text-2); border: 1px solid var(--border-hi); }

.comment-action-btn {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.comment-action-btn:hover { color: var(--accent); }

.comment-edited {
  font-size: 0.75rem;
  color: var(--text-3);
  font-style: italic;
}

.comment-edit-wrap { margin-top: 0.5rem; }
.edit-form { margin-top: 0.5rem; margin-left: 0; }
.edit-form .comment-input { min-height: 3.5rem; }

/* ── Delete modal ─────────────────────────────────────────────────────── */

.delete-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  padding: 0;
  max-width: 440px;
  width: calc(100% - 2rem);
}

.delete-modal::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}

.delete-modal-inner {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.delete-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--red);
}

.delete-modal-body {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.55;
}

.delete-modal-body strong { color: var(--text); font-family: var(--mono); }

.delete-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

/* ── Reason modal (feature/hide "why", same shape as .delete-modal) ─────── */

.reason-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  padding: 0;
  max-width: 440px;
  width: calc(100% - 2rem);
}

.reason-modal::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}

.reason-modal-inner {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.reason-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.reason-modal-textarea { width: 100%; }

.reason-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

/* ── Admin ────────────────────────────────────────────────────────────── */

.admin-nav {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}
.admin-nav-link {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-lg);
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 600;
}
.admin-nav-link:hover { background: var(--surface-up); }
.admin-nav-link.active { background: var(--surface-up); color: var(--text); }

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.admin-users-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  color: var(--text-2);
  font-weight: 600;
  border-bottom: 1px solid var(--border-hi);
}
.admin-users-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.admin-self-note { color: var(--text-3); font-size: 0.8rem; }

/* ── Browse: filter bar + pagination ──────────────────────────────────
   Ported from ModArtist's own .filter-bar/.filter-cat-pill/.sort-tab/
   .tag-chip (application.css) -- own tokens (no --accent-text/
   --accent-text-shadow custom properties in Skindicate's palette,
   plain #fff instead, matching .btn-primary's own existing choice),
   same shapes: pills for a single-select filter (platform here,
   category there), text tabs for sort (not a <select>), removable
   chips summarizing what's currently active. Deliberately not ported:
   the collapsible toggle/sentinel (JS-driven show/hide) and the date-
   range picker -- Skindicate has no per-page filter-count problem
   large enough to need collapsing, and no date-range browse feature
   at all yet. */

.filter-bar {
  display: flex;
  flex-direction: column;
  background: var(--surface-up);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}

.filter-top-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.875rem;
  border-top: 1px solid var(--border);
}

.filter-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.filter-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--border-hi);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.filter-cat-pill:hover { color: var(--text); border-color: var(--accent-dim); text-decoration: none; }
.filter-cat-pill--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.filter-controls-row {
  padding: 0.75rem 0.875rem;
}

.filter-controls-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.filter-input {
  flex: 1 1 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0.45rem 0.75rem;
}
.filter-input:focus { outline: none; border-color: var(--accent); }

.sort-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sort-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
}
.sort-tab:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.sort-tab.active { color: var(--accent); font-weight: 600; background: var(--surface); }

.filter-actions { display: flex; gap: 0.5rem; margin-left: auto; }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 0.875rem 0.75rem;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
}
.tag-chip-clear {
  color: var(--text-3);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}
.tag-chip-clear:hover { color: var(--red); text-decoration: none; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.pagination-info { font-size: 0.875rem; color: var(--text-2); }

/* ── Chat ─────────────────────────────────────────────────────────────── */

.chat-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 10rem);
  max-width: 60rem;
  margin: 0 auto;
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-line { padding: 0.1rem 0; }
.chat-compose { margin-top: 0.75rem; }
.chat-input {
  width: 100%;
  background: var(--surface-up);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.875rem;
  padding: 0.6rem 0.8rem;
}
.chat-input:focus { outline: none; border-color: var(--border-hi); }