/* ── body loaded state ── */
:root {
  --shields-style: plastic;
  --shields-color: ff00ff;
}

body { opacity: 0; transition: opacity .3s; }
body.loaded { opacity: 1; }

/* ── navigation bar ── */
.top-nav {
  text-align: center;
  background: #000033;
  border: 2px ridge #ff00ff;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 16px;
}
.top-nav a { color: #ffcc00; text-decoration: underline; }
.top-nav a:hover { color: #ff6600; }
.top-nav-sep { color: #555; margin: 0 6px; }
@media (max-width: 640px) {
  .top-nav { font-size: 14px; padding: 6px; }
  .top-nav a { display: inline-block; padding: 8px; min-height: 44px; }
}

/* ── loading spinner ── */
#loading { text-align: center; padding: 40px 20px; color: #aaffaa; }
.loading-dot { animation: dot-pulse 1.2s ease-in-out infinite; display: inline-block; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* ── error screen ── */
#error { text-align: center; padding: 50px 20px; }
#error h1 { font-size: 48px; color: #ff0000; text-shadow: 0 0 12px #f00; margin-bottom: 10px; }
#error p  { color: #aaffaa; font-size: 16px; margin-bottom: 16px; }
.btn-retro {
  display: inline-block;
  padding: 8px 24px;
  border: 3px ridge #ff6600;
  background: #000033;
  color: #ffcc00;
  text-decoration: none;
  font-size: 16px;
}

/* ── repo grid ── */
#repo-list { margin: 10px; }
#repo-list h1 { font-size: 32px; margin-bottom: 6px; text-shadow: none; letter-spacing: normal; }
.subtitle { color: #aaffaa; font-size: 14px; margin-bottom: 20px; }
.center { text-align: center; }

.repo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.repo-card {
  background: #000033;
  border: 3px ridge #ff6600;
  padding: 12px 14px;
  transition: border-color 0.2s;
}
.repo-card:hover { border-color: #ff00ff; }

.repo-card.filtered-out { display: none; }

.repo-card .repo-name {
  font-size: 17px;
  font-weight: bold;
  color: #ffcc00;
  margin-bottom: 6px;
}
.repo-card .repo-name a { color: #ffcc00; text-decoration: underline; }
.repo-card .repo-name a:hover { color: #ff6600; }

.repo-card .repo-desc {
  font-size: 13px;
  color: #aaffaa;
  margin-bottom: 8px;
  line-height: 1.4;
}

.repo-card .repo-meta {
  font-size: 12px;
  color: #88aaff;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.repo-card .repo-lang {
  display: inline-block;
  background: #001122;
  border: 1px ridge #66aaff;
  padding: 1px 6px;
  font-size: 11px;
  color: #66aaff;
}

.repo-card .repo-stars { color: #ffdd44; }

/* ── filter bar ── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
#repo-search {
  width: 100%;
  max-width: 320px;
  padding: 8px 14px;
  font-size: 14px;
  font-family: 'Courier New', monospace;
  background: #000033;
  border: 2px ridge #ff6600;
  color: #33ff33;
  outline: none;
  box-sizing: border-box;
}
#repo-search::placeholder { color: #88aaff; }
#repo-search:focus { border-color: #ff00ff; }
#filter-lang, #filter-sort {
  padding: 8px 10px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  background: #000033;
  border: 2px ridge #ff6600;
  color: #33ff33;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}
#filter-lang:focus, #filter-sort:focus { border-color: #ff00ff; }
#filter-lang option, #filter-sort option { background: #000033; color: #33ff33; }
#repo-count { text-align: center; font-size: 13px; color: #88aaff; margin: 10px 0 0; }
#repo-count.hidden { display: none; }

/* ── info / status messages ── */
.empty-state {
  text-align: center;
  color: #aaffaa;
  padding: 30px 0;
}

.blocked-message {
  color: #aaffaa;
  text-align: center;
  padding: 30px 0;
}
.blocked-message a { color: #ffcc00; }

.not-found-message {
  color: #aaffaa;
  font-style: italic;
  text-align: center;
  padding: 30px 0;
}
.not-found-message a.not-found-link { color: #ffcc00; }

/* ── repo view ── */
#repo-view { margin: 10px; }

.repo-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px ridge #ff6600;
}

.repo-header .repo-breadcrumb {
  font-size: 13px;
  color: #88aaff;
  margin-bottom: 6px;
}
.repo-header .repo-breadcrumb a { color: #88aaff; }
.repo-header .repo-breadcrumb a:hover { color: #ffcc00; }

.repo-header .repo-title {
  font-size: 26px;
  font-weight: bold;
  color: #ffcc00;
  text-shadow: 2px 2px 0 #ff00ff;
  margin: 0;
}
.repo-header .repo-title a.repo-title-link { text-decoration: none; color: #ffcc00; }
.repo-header .repo-title a.repo-title-link:hover { color: #ffcc00; }

.repo-header .repo-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn {
  display: inline-block;
  padding: 6px 18px;
  border: 2px ridge #ff6600;
  background: #000033;
  color: #ffcc00;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover { border-color: #ff00ff; }
.btn-primary { border-color: #33ff33; color: #33ff33; }
.btn-secondary { border-color: #66aaff; color: #66aaff; }

/* ── heading anchors ── */
.heading-anchor {
  text-decoration: none;
  color: #888;
  opacity: 0;
  transition: opacity .1s;
  margin-right: 4px;
}
h1:hover .heading-anchor, h2:hover .heading-anchor, h3:hover .heading-anchor,
h4:hover .heading-anchor, h5:hover .heading-anchor, h6:hover .heading-anchor { opacity: 1; }

/* ── code blocks with copy button ── */
.code-block { position: relative; }
.copy-btn {
  position: absolute; top: 4px; right: 4px; z-index: 10;
  background: #222; color: #0f0; border: 1px solid #555;
  border-radius: 4px; cursor: pointer; font-size: 12px; padding: 2px 6px;
  line-height: 1; opacity: 0; transition: opacity .15s;
}
pre:hover .copy-btn,
.code-block:hover .copy-btn { opacity: 1; }

/* ── releases ── */
.release-section {
  margin: 14px 0;
  background: #000033;
  border: 2px ridge #00ffaa;
  padding: 10px 14px;
}
.release-section h3 { font-size: 15px; color: #00ffaa; margin-bottom: 6px; text-transform: uppercase; text-shadow: 0 0 8px #0fa; }
.release-section h3 a { color: inherit; text-decoration: none; }
.release-section h3 a:hover { text-decoration: underline; }
.release-section .release-empty { color: #556; font-size: 12px; font-style: italic; }

.release-item {
  padding: 6px 0;
  border-bottom: 1px dashed #335;
}
.release-item:last-child { border-bottom: none; }

.release-item .release-tag { color: #ffcc00; font-weight: bold; font-family: monospace; }
.release-item .release-name { color: #fff; font-size: 13px; }
.release-item .release-date { color: #88aaff; font-size: 11px; }
.release-item .release-assets { margin-top: 3px; }
.release-item .release-asset-link {
  display: inline-block;
  padding: 1px 6px;
  border: 1px ridge #888;
  background: #111;
  font-size: 11px;
  color: #ccc;
  margin: 1px 3px 1px 0;
  font-family: monospace;
  text-decoration: none;
}
.release-item .release-asset-link:hover { border-color: #ffcc00; }

/* ── markdown content ── */
#markdown-content {
  background: #000522;
  border: 2px ridge #66aaff;
  padding: 20px;
  margin-top: 8px;
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

#markdown-content h1, #markdown-content h2, #markdown-content h3, #markdown-content h4, #markdown-content h5, #markdown-content h6 { text-align: left; }
#markdown-content h1 {
  font-size: 26px;
  font-weight: bold;
  border-bottom: 1px dashed #446;
  padding-bottom: 6px;
  margin-top: 0;
  color: #ffcc00;
  text-shadow: none;
}
#markdown-content h2 { font-size: 20px; font-weight: bold; border-bottom: 1px dashed #335; padding-bottom: 4px; margin: 20px 0 10px; color: #ffcc00; text-shadow: none; }
#markdown-content h3 { font-size: 17px; font-weight: bold; margin: 16px 0 8px; color: #66aaff; text-shadow: none; }
#markdown-content h4 { font-size: 15px; font-weight: bold; margin: 12px 0 6px; color: #66aaff; }
#markdown-content p { margin: 8px 0; line-height: 1.6; color: #cce; }
#markdown-content ul, #markdown-content ol { padding-left: 22px; margin: 8px 0; }
#markdown-content li { margin-bottom: 3px; color: #cce; }
#markdown-content blockquote {
  border-left: 3px solid #66aaff;
  padding: 6px 12px;
  margin: 8px 0;
  color: #aaffaa;
  background: #000011;
}
#markdown-content pre {
  background: #000011;
  border: 1px ridge #66aaff;
  padding: 12px;
  overflow-x: auto;
  font-size: 13px;
}
#markdown-content pre code {
  font-family: 'Courier New', Consolas, monospace;
  color: #0f0;
}
#markdown-content :not(pre) > code {
  background: #111;
  padding: 1px 5px;
  border: 1px ridge #555;
  font-size: 13px;
  font-family: monospace;
  color: #0f0;
}
#markdown-content img { max-width: 100%; border: 1px ridge #555; margin: 8px 0; }
#markdown-content table { border-collapse: collapse; margin: 8px 0; }
#markdown-content th, #markdown-content td {
  border: 1px ridge #555;
  padding: 4px 10px;
}
#markdown-content th { background: #001122; }
#markdown-content hr { border: none; border-top: 1px dashed #446; margin: 16px 0; }
#markdown-content a { color: #ffcc00; }
#markdown-content a:hover { color: #ff6600; }

.repo-footer {
  text-align: center;
  margin-top: 14px;
}
.repo-footer a { color: #88aaff; }
.repo-footer a:hover { color: #ffcc00; }

#markdown-content pre.raw-txt {
  background: #001100;
  border: 2px ridge #33ff33;
  color: #33ff33;
  font-family: 'Courier New', 'Terminal', monospace;
  font-size: 14px;
  line-height: 1.3;
  padding: 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-shadow: 0 0 4px #33ff3366;
}

#markdown-content img[src*="shields.io"] {
  display: inline-block;
  border: 2px ridge #ff6600;
  margin: 4px;
  vertical-align: middle;
  background: #000033;
  padding: 2px;
  box-shadow: 0 0 6px #ff660066, 0 0 12px #ff00ff44;
}

.hidden { display: none !important; }

/* ── mobile ── */
@media (max-width: 640px) {
  #repo-list { margin: 4px; }
  #repo-list h1 { font-size: 22px; }
  .subtitle { font-size: 12px; }
  .repo-grid { grid-template-columns: 1fr; gap: 10px; }
  .repo-card { padding: 10px; }
  .repo-card .repo-name { font-size: 15px; }
  .repo-card .repo-desc { font-size: 12px; }
  .repo-card .repo-meta { font-size: 11px; }
  #repo-view { margin: 4px; }
  .repo-header .repo-title { font-size: 20px; }
  .repo-header .repo-breadcrumb { font-size: 12px; }
  .btn { padding: 10px 14px; font-size: 13px; min-height: 44px; }
  #markdown-content { padding: 12px; }
  #markdown-content h1 { font-size: 20px; }
  #markdown-content h2 { font-size: 17px; }
  #markdown-content h3 { font-size: 15px; }
  #markdown-content pre { font-size: 12px; padding: 10px; }
  #markdown-content table { font-size: 13px; display: block; overflow-x: auto; white-space: nowrap; }
  .release-section { padding: 8px 10px; }
  .release-item .release-asset-link { padding: 4px 8px; font-size: 12px; min-height: 44px; }
}

@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: #ff6600 #000022; }
}