:root {
  --fanart-ink: #151515;
  --fanart-paper: #f4f4f1;
  --fanart-panel: #ffffff;
  --fanart-muted: #6c6c68;
  --fanart-accent: #b7d400;
  --fanart-alert: #d64d3c;
}

body.fanart-page {
  display: block;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--fanart-paper);
  color: var(--fanart-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "Noto Sans JP", sans-serif;
}

.fanart-page #wbaTopbar { width: 100%; }
.fanart-page .hidden { display: none !important; }
.fanart-shell { width: 100%; max-width: 1560px; margin: 0 auto; padding: 28px 24px 64px; }
.fanart-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; border-bottom: 3px solid var(--fanart-ink); padding-bottom: 14px; }
.fanart-heading h1 { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 950; letter-spacing: 0; }
.fanart-count { display: block; margin-top: 5px; color: var(--fanart-muted); font-size: 12px; font-weight: 750; }
.fanart-heading-actions, .fanart-form-actions, .fanart-load-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.fanart-button, .fanart-icon-button {
  border: 2px solid var(--fanart-ink);
  background: var(--fanart-accent);
  color: var(--fanart-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--fanart-ink);
}
.fanart-button { min-height: 38px; padding: 7px 14px; }
.fanart-button.secondary { background: var(--fanart-panel); }
.fanart-button:hover, .fanart-icon-button:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--fanart-ink); }
.fanart-button:disabled { opacity: .5; cursor: wait; transform: none; }
.fanart-icon-button { width: 38px; height: 38px; padding: 0; font-size: 24px; line-height: 1; background: var(--fanart-panel); }

.fanart-toolbar { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 18px; }
.fanart-search-field { flex: 1; max-width: 440px; display: grid; gap: 5px; color: var(--fanart-muted); font-size: 11px; font-weight: 850; }
.fanart-sort { display: flex; margin-left: auto; border: 2px solid var(--fanart-ink); background: var(--fanart-panel); }
.fanart-sort button { min-width: 64px; min-height: 34px; border: 0; border-left: 1px solid var(--fanart-ink); background: transparent; color: var(--fanart-ink); padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.fanart-sort button:first-child { border-left: 0; }
.fanart-sort button.active { background: var(--fanart-accent); }
.fanart-sort button:focus-visible { outline: 2px solid var(--fanart-ink); outline-offset: -4px; }
.fanart-search-field input, .fanart-field input[type="text"], .fanart-field input[type="search"], .fanart-field input[type="file"], .fanart-field textarea {
  box-sizing: border-box;
  width: 100%;
  border: 2px solid var(--fanart-ink);
  border-radius: 0;
  background: var(--fanart-panel);
  color: var(--fanart-ink);
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
}

.fanart-masonry { position: relative; width: 100%; }
.fanart-card { position: absolute; top: 0; left: 0; display: block; border: 0; background: #deded9; color: #fff; overflow: hidden; cursor: pointer; text-decoration: none; }
.fanart-card img { display: block; width: 100%; height: 100%; object-fit: cover; background: #deded9; }
.fanart-private-placeholder { width: 100%; height: 100%; }
.fanart-card-tall-preview img { object-position: center top; }
.fanart-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 52px 14px 13px; box-sizing: border-box; background: linear-gradient(to bottom, transparent 48%, rgba(0,0,0,.88)); pointer-events: none; }
.fanart-card-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.3; font-weight: 900; letter-spacing: 0; }
.fanart-card-author { margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #deded8; font-size: 11px; font-weight: 750; }
.fanart-card-stats { position: absolute; z-index: 2; top: 8px; right: 8px; display: flex; gap: 8px; padding: 4px 6px; background: rgba(0,0,0,.72); color: #fff; font-size: 10px; font-weight: 800; pointer-events: none; }
.fanart-card-stat { display: inline-flex; align-items: center; gap: 4px; }
.fanart-status { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border: 2px solid var(--fanart-ink); background: var(--fanart-panel); color: var(--fanart-ink); font-size: 10px; font-weight: 900; }
.fanart-status.approved { background: var(--fanart-accent); }
.fanart-status.rejected, .fanart-status.removed { background: #ff8b79; }

.fanart-empty { padding: 80px 20px; border-top: 1px solid #c9c9c4; color: var(--fanart-muted); text-align: center; font-size: 14px; font-weight: 800; }
.fanart-load-row { padding-top: 24px; justify-content: center; }

.fanart-detail { max-width: 1180px; margin: 0 auto; }
.fanart-detail-back { margin-bottom: 14px; }
.fanart-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.fanart-detail-image-wrap { position: relative; min-width: 0; background: #dfdfda; text-align: center; }
.fanart-detail-image { display: block; max-width: 100%; width: auto; max-height: calc(100vh - 130px); margin: 0 auto; object-fit: contain; }
.fanart-detail-meta { border-top: 3px solid var(--fanart-ink); padding-top: 16px; }
.fanart-detail-meta h1 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; letter-spacing: 0; overflow-wrap: anywhere; }
.fanart-author-row { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 850; }
.fanart-author-row img { width: 34px; height: 34px; object-fit: cover; border: 2px solid var(--fanart-ink); }
.fanart-detail-stats { display: flex; align-items: center; gap: 14px; margin-top: 14px; color: var(--fanart-muted); font-size: 12px; font-weight: 850; }
.fanart-like-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; border: 2px solid var(--fanart-ink); background: var(--fanart-panel); color: var(--fanart-ink); padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.fanart-like-button.active { background: #ff9aa4; }
.fanart-like-button:disabled { opacity: .55; cursor: default; }
.fanart-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.fanart-tag { display: inline-block; padding: 5px 8px; background: var(--fanart-accent); border: 2px solid var(--fanart-ink); font-size: 11px; font-weight: 900; }
.fanart-description { margin: 18px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
.fanart-detail-time, .fanart-note { color: var(--fanart-muted); font-size: 11px; line-height: 1.5; }
.fanart-original-link { display: inline-block; margin-top: 12px; color: var(--fanart-ink); font-size: 12px; font-weight: 900; }
.fanart-detail .comments-section { margin-top: 30px; border-top: 3px solid var(--fanart-ink); padding-top: 18px; }

.fanart-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); }
.fanart-modal-panel { width: min(600px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; box-sizing: border-box; border: 3px solid var(--fanart-ink); background: var(--fanart-paper); padding: 20px; box-shadow: 7px 7px 0 rgba(255,255,255,.6); }
.fanart-modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.fanart-modal-header h2 { margin: 0; font-size: 19px; letter-spacing: 0; }
.fanart-field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 12px; font-weight: 900; }
.fanart-field small { color: var(--fanart-muted); font-weight: 650; }
.fanart-field textarea { resize: vertical; min-height: 90px; }
.fanart-tag-picker { position: relative; border: 2px solid var(--fanart-ink); background: var(--fanart-panel); }
.fanart-tag-picker:focus-within { outline: 2px solid var(--fanart-accent); outline-offset: 2px; }
.fanart-tag-picker .fanart-selected-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 0; }
.fanart-selected-tag { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; padding: 4px 5px 4px 8px; border: 1px solid var(--fanart-ink); background: var(--fanart-accent); font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.fanart-selected-tag button { width: 20px; height: 20px; flex: 0 0 auto; border: 0; background: transparent; color: var(--fanart-ink); padding: 0; font: inherit; font-size: 18px; font-weight: 900; line-height: 18px; cursor: pointer; }
.fanart-tag-picker #fanartTagInput { border: 0; outline: 0; }
.fanart-tag-results { position: absolute; z-index: 20; top: calc(100% + 2px); right: -2px; left: -2px; max-height: 240px; overflow-y: auto; border: 2px solid var(--fanart-ink); background: var(--fanart-panel); box-shadow: 3px 3px 0 var(--fanart-ink); }
.fanart-tag-result { display: block; width: 100%; min-height: 38px; border: 0; border-bottom: 1px solid #d4d4cf; background: var(--fanart-panel); color: var(--fanart-ink); padding: 8px 10px; text-align: left; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.fanart-tag-result:last-child { border-bottom: 0; }
.fanart-tag-result:hover, .fanart-tag-result.active { background: var(--fanart-accent); }
.fanart-tag-no-results { padding: 12px 10px; color: var(--fanart-muted); font-size: 12px; font-weight: 700; }
.fanart-declaration { display: flex; align-items: flex-start; gap: 8px; margin: 17px 0; font-size: 12px; line-height: 1.5; font-weight: 750; }
.fanart-declaration input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--fanart-accent); }
.fanart-upload-preview { max-height: 230px; margin: 0 0 14px; overflow: hidden; background: #deded9; text-align: center; }
.fanart-upload-preview img { max-width: 100%; max-height: 230px; display: inline-block; }
.fanart-progress { height: 8px; margin: 12px 0; border: 2px solid var(--fanart-ink); background: #fff; }
.fanart-progress span { display: block; width: 0; height: 100%; background: var(--fanart-accent); transition: width .1s linear; }
.fanart-form-message { min-height: 18px; color: var(--fanart-alert); font-size: 12px; font-weight: 800; }

@media (max-width: 900px) { .fanart-detail-layout { grid-template-columns: 1fr; } .fanart-detail-meta { max-width: 700px; } }
@media (max-width: 620px) {
  .fanart-shell { padding: 18px 10px 50px; }
  .fanart-heading { align-items: flex-start; }
  .fanart-heading h1 { font-size: 22px; }
  .fanart-heading-actions { flex-direction: column; align-items: stretch; }
  .fanart-button { min-height: 36px; padding: 6px 10px; }
  .fanart-toolbar { flex-wrap: wrap; }
  .fanart-search-field { flex-basis: calc(100% - 46px); }
  .fanart-sort { width: 100%; margin-left: 0; }
  .fanart-sort button { flex: 1; }
  .fanart-card-overlay { padding: 38px 9px 9px; }
  .fanart-card-title { font-size: 12px; }
  .fanart-detail-image { max-height: none; }
  .fanart-modal { padding: 8px; }
  .fanart-modal-panel { max-height: calc(100vh - 16px); padding: 15px; box-shadow: none; }
}