.vg-panel { padding: var(--s5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.vg-wordmark { display: inline-flex; align-items: center; gap: var(--s3); color: inherit; text-decoration: none; }
.vg-wordmark img { flex: none; width: clamp(2.5rem, 5vw, 3rem); height: auto; }
.vg-wordmark strong { display: block; font: 700 1.25rem/1.2 var(--serif); letter-spacing: .045em; }
.vg-wordmark small { display: block; }
.vg-wordmark--dark { background: var(--forest); color: var(--on-dark); }
.vg-swatches { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
.vg-swatch { display: grid; gap: var(--s1); min-height: 6rem; align-content: end; padding: var(--s3); background: var(--swatch); color: var(--swatch-text, var(--text)); border: 1px solid var(--border); border-radius: var(--radius); }
.vg-type-row { display: grid; gap: var(--s2); padding-block: var(--s3); border-bottom: 1px solid var(--border); }
.vg-button, .vg-nav-item { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; border: 1px solid transparent; border-radius: var(--radius); padding: var(--s2) var(--s4); text-decoration: none; color: var(--text-secondary); background: transparent; font-weight: 600; transition: background-color var(--ease), color var(--ease), border-color var(--ease), transform var(--ease); }
.vg-button--primary { background: var(--forest); color: var(--on-dark); }
.vg-button--secondary { background: var(--bg-secondary); }
.vg-button--outline { border-color: var(--control-border); }
.vg-button--sm { font-size: .875rem; padding-inline: var(--s3); }
.vg-button--lg { min-height: 52px; padding-inline: var(--s6); }
.vg-button--icon { width: 44px; padding: 0; }
.vg-button:hover:not(:disabled), .vg-nav-item:hover { background: var(--bg-secondary); }
.vg-button--primary:hover:not(:disabled) { background: var(--hover); }
.vg-button:not(:disabled):active, .vg-nav-item:active { transform: translateY(1px); }
.vg-button:disabled { cursor: default; color: var(--muted); background: var(--bg-secondary); border-color: var(--border); }
.vg-spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vg-spin .8s linear infinite; }
@keyframes vg-spin { to { transform: rotate(360deg); } }
.vg-cover { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius); background: var(--forest); color: var(--on-dark); }
.vg-cover svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.vg-cover img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
/* Covers with artwork wait on a light neutral tone instead of a dark block while the image loads. */
.vg-cover:has(> img) { background: var(--bg-secondary); }
.vg-cover--copper { background: var(--accent); }
.vg-cover--sand { background: var(--sand); color: var(--text-secondary); }
.vg-cover--missing { background: var(--bg-secondary); color: var(--muted); border: 1px dashed var(--control-border); }
.vg-card { display: grid; align-items: start; gap: var(--s4); transition: border-color var(--ease); }
.vg-card:hover { border-color: var(--control-border); }
.vg-card--standard { max-width: 17rem; }
.vg-card--compact { grid-template-columns: 3.5rem minmax(0,1fr); align-items: center; }
.vg-card--horizontal { grid-template-columns: minmax(4.5rem, 25%) minmax(0,1fr); align-items: center; }
.vg-card--featured { grid-template-columns: minmax(5rem, 34%) minmax(0,1fr); align-items: center; }
.vg-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vg-card-meta { display: grid; gap: var(--s2); min-width: 0; }
.vg-card-labels:empty { display: none; }
.vg-card-tags { list-style: none; margin: 0; padding: 0; gap: var(--s1) var(--s2); }
.vg-card-tags li { min-width: 0; max-width: 100%; }
.vg-card-tags a { min-height: 1.75rem; align-items: center; max-width: 100%; overflow-wrap: anywhere; }
.vg-card-tags a:hover { text-decoration: underline; }
.vg-card-tags-more { background: transparent; color: var(--muted); }

/* Unified novel card: whole card opens the novel, tags stay clickable on top. */
.vg-card { position: relative; }
.vg-card .vg-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.vg-card :is(.vg-card-tags a, .vg-home-chapter, .vg-card-cover-link) { position: relative; z-index: 1; }
.vg-card .vg-card-cover-link { position: absolute; }
.vg-card-genre { color: var(--accent); }
.vg-card-labels { gap: var(--s1) var(--s2); align-items: center; }
.vg-card-count { color: var(--muted); }
.vg-card-tags .vg-badge, .vg-novel-tags .vg-badge {
  background: transparent; color: var(--text-secondary); border: 1px solid var(--border);
  border-radius: 1rem; padding: .125rem .625rem; text-decoration: none;
}
.vg-card-tags a.vg-badge:hover, .vg-novel-tags a.vg-badge:hover { background: var(--bg-secondary); text-decoration: none; }
.vg-card-tags .vg-card-tags-more { border-style: dashed; }
.vg-badge--status { font-weight: 700; color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.vg-badge--status[data-status=completed] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.vg-badge--status[data-status=paused] { color: var(--muted); background: var(--bg-secondary); }
.vg-badge--status[data-status=upcoming] { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--control-border); }
@media (max-width: 47.999rem) {
  /* Chip rows and tab rows stay on one line and scroll sideways on phones. */
  .vg :is(.vg-library-suggestions, .vg-ranking-tabs, .vg-personal-tabs) {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4);
  }
  .vg :is(.vg-library-suggestions, .vg-ranking-tabs, .vg-personal-tabs)::-webkit-scrollbar { display: none; }
  .vg :is(.vg-library-suggestions, .vg-ranking-tabs, .vg-personal-tabs) > * { flex: none; white-space: nowrap; }
}
.vg-muted { color: var(--muted); }
.vg-label { display: grid; gap: var(--s2); font-weight: 600; }
.vg-label :where(input:not([type=range]),select,textarea) { width: 100%; min-height: 44px; min-width: 0; padding: var(--s2) var(--s3); border: 1px solid var(--control-border); border-radius: var(--radius); color: var(--text); background: var(--elevated); }
.vg-label textarea { resize: vertical; }
.vg-label [aria-invalid=true] { border-color: var(--error); }
.vg-error { color: var(--error); }
.vg-options { padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); margin: 0; min-width: 0; }
.vg-option { display: inline-flex; align-items: center; min-height: 44px; gap: var(--s2); padding-inline: var(--s2); }
.vg input { accent-color: var(--forest); }
.vg-disclosure summary { min-height: 44px; padding-block: var(--s2); font-weight: 600; }
.vg-disclosure[open] summary { color: var(--accent); }
.vg-nav-item[aria-current], .vg-button[aria-selected=true], .vg-button[aria-selected=true]:hover:not(:disabled) { background: var(--forest); color: var(--on-dark); }
.vg-crumbs { list-style: none; padding: 0; margin: 0; }
.vg-dialog { width: min(23rem, 100%); max-width: 100%; max-height: 100%; height: 100%; margin: 0 0 0 auto; padding: var(--s6); background: var(--surface); color: var(--text); border: 0; }
.vg-dialog::backdrop { background: rgb(23 29 27 / .65); }
.vg-badge { display: inline-flex; width: fit-content; padding: var(--s1) var(--s2); border-radius: .25rem; background: var(--bg-secondary); color: var(--accent); }
.vg-badge--status { color: var(--success); }
.vg-badge--warning { color: var(--warning); }
.vg-progress { display: block; width: 100%; accent-color: var(--accent); }
.vg-alert { border-inline-start: .25rem solid var(--success); padding: var(--s3) var(--s4); background: var(--bg-secondary); color: var(--success); }
.vg-skeleton { display: grid; gap: var(--s3); }
.vg-skeleton span { display: block; height: .875rem; border-radius: var(--s1); background: var(--bg-secondary); animation: vg-pulse 1.35s ease-in-out 3 alternate; }
.vg-skeleton span:last-child { width: 62%; }
@keyframes vg-pulse { to { opacity: .45; } }
.vg-empty { border-style: dashed; }
.vg-foot :focus-visible, .vg-wordmark--dark :focus-visible { outline-color: var(--sand); }
.vg-button[aria-current=page] { border-color: var(--forest); box-shadow: inset 0 -3px var(--forest); }