:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --primary: 262 83% 58%;
  --primary-foreground: 210 40% 98%;
  --accent: 210 40% 96.1%;
  --border: 214.3 31.8% 91.4%;
  --destructive: 0 84.2% 60.2%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 7%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --primary: 263 70% 58%;
  --primary-foreground: 210 40% 98%;
  --accent: 217.2 32.6% 17.5%;
  --border: 217.2 32.6% 17.5%;
  --destructive: 0 62.8% 30.6%;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }

/* The card link sits under the tag links. Images must not intercept its tap. */
.resource-card-media > img,
.resource-card-media > .resource-card-placeholder { pointer-events: none; }

.image-fallback {
  display: flex;
  min-height: 42px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: inherit;
  background: hsl(var(--muted) / 0.65);
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-align: center;
  padding: 8px;
}

/* Desktop uses a plain two-column flex layout for reliable browser support. */
.detail-layout { display: flex; flex-direction: column; gap: 1rem; }
.detail-main, .detail-resource, .detail-comments, .detail-download { min-width: 0; }

@media (min-width: 769px) {
  .detail-layout { flex-direction: row; align-items: flex-start; }
  .detail-main { flex: 1 1 0%; }
  .detail-resource { margin-bottom: 1rem; }
  .detail-download { flex: 0 0 20rem; width: 20rem; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.4); }

/* Theme toggle icons */
.dark .sun-icon { display: none; }
.dark .moon-icon { display: block !important; }

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prose */
.prose { max-width: none; }
.prose p { margin-bottom: 0.75em; }
.prose, .prose code, .prose pre, main code, main li { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 639px) {
  #comment-form button[type="submit"] { width: 100%; }
  .mobile-search-open main { padding-top: 7.5rem !important; }
  header [class*="backdrop-blur"] { background-color: hsl(var(--background) / 0.96); }
  .image-fallback { min-height: 72px; }
  .detail-download .sticky { position: static; }
}

@media (max-width: 430px) {
  .resource-card-media { min-height: 116px; }
}

/* Backdrop blur support */
@supports (backdrop-filter: blur(1px)) {
  .backdrop-blur-md { backdrop-filter: blur(12px); }
  .backdrop-blur-xl { backdrop-filter: blur(24px); }
  .backdrop-blur-sm { backdrop-filter: blur(8px); }
}