/* shadcn-like tokens; works with Tailwind CDN */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84.2% 60.2%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --radius: 0.5rem;
}
.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
}
* { border-color: hsl(var(--border)); }
body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
.bg-background { background: hsl(var(--background)); }
.bg-card { background: hsl(var(--card)); }
.bg-muted { background: hsl(var(--muted)); }
.bg-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.bg-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.bg-accent { background: hsl(var(--accent)); }
.text-muted { color: hsl(var(--muted-foreground)); }
.text-foreground { color: hsl(var(--foreground)); }
.border { border: 1px solid hsl(var(--border)); }
.rounded-lg { border-radius: var(--radius); }
.rounded-md { border-radius: calc(var(--radius) - 2px); }
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1.25rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  border-radius: calc(var(--radius) - 2px); font-size: .875rem; font-weight: 500;
  height: 2.25rem; padding: 0 .875rem; border: 1px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-outline { background: transparent; border-color: hsl(var(--input)); color: hsl(var(--foreground)); }
.btn-outline:hover, .btn-ghost:hover { background: hsl(var(--accent)); }
.btn-ghost { background: transparent; }
.btn.active, .seg .btn.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.seg { display: flex; flex-wrap: wrap; gap: .375rem; }
.input, .select {
  height: 2.25rem; width: 100%; border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--input)); background: transparent; padding: 0 .75rem;
  font-size: .875rem; color: hsl(var(--foreground));
}
.input:focus, .select:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data th, table.data td { border-bottom: 1px solid hsl(var(--border)); padding: .55rem .65rem; text-align: left; vertical-align: top; }
table.data th { color: hsl(var(--muted-foreground)); font-weight: 500; background: hsl(var(--muted)); position: sticky; top: 0; z-index: 1; }
table.data tr:hover td { background: hsl(var(--accent) / 0.5); }
.badge {
  display: inline-flex; align-items: center; border-radius: 9999px; padding: .1rem .5rem;
  font-size: .75rem; border: 1px solid hsl(var(--border)); white-space: nowrap;
}
.badge-grad { border-color: hsl(142 70% 40%); color: hsl(142 70% 35%); }
.dark .badge-grad { color: hsl(142 70% 55%); }
.badge-opt { border-color: hsl(217 90% 50%); color: hsl(217 90% 45%); }
.dark .badge-opt { color: hsl(217 90% 70%); }
.nav-link { color: hsl(var(--muted-foreground)); text-decoration: none; font-size: .875rem; padding: .35rem .55rem; border-radius: calc(var(--radius) - 2px); }
.nav-link:hover, .nav-link[aria-current="page"] { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.site-header { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background) / 0.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 40; }
.site-header .inner { max-width: 72rem; margin: 0 auto; padding: .75rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; justify-content: space-between; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .15rem; }
.site-main { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.muted { color: hsl(var(--muted-foreground)); }
.prose p { margin: .6rem 0; line-height: 1.7; }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.img-grid img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid hsl(var(--border)); }
.field-empty { color: hsl(var(--muted-foreground)); font-style: italic; }
a.item-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a.item-link:hover { opacity: .8; }
.overflow-x { overflow-x: auto; }

/* === heiyan extras: theme-dd + rarity + mobile + ads === */
.theme-dd { position: relative; flex-shrink: 0; }
.theme-dd-trigger { width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; padding: 0; }
.theme-dd-trigger .theme-icon { display: inline-flex; }
.theme-dd-menu {
  position: absolute; right: 0; top: calc(100% + .35rem);
  min-width: 9.5rem; padding: .25rem;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: 0 8px 24px hsl(0 0% 0% / .12);
  z-index: 50;
}
.theme-dd-item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: .875rem; padding: .65rem .6rem; min-height: 44px; border-radius: calc(var(--radius) - 2px);
  text-align: left;
}
.theme-dd-item:hover { background: hsl(var(--accent)); }
.theme-dd-item.active { background: hsl(var(--accent)); font-weight: 600; }
.theme-dd-ico { display: inline-flex; opacity: .85; }

.rarity-badge {
  display: inline-flex; align-items: center;
  border-radius: 9999px; padding: .12rem .55rem;
  font-size: .75rem; font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; white-space: nowrap;
}
.rarity-shanggu { background: hsl(0 85% 94%); color: hsl(0 72% 38%); border-color: hsl(0 70% 80%); }
.dark .rarity-shanggu { background: hsl(0 55% 18%); color: hsl(0 90% 72%); border-color: hsl(0 45% 32%); }
.rarity-shenhua { background: hsl(28 95% 92%); color: hsl(24 90% 36%); border-color: hsl(28 80% 75%); }
.dark .rarity-shenhua { background: hsl(24 55% 18%); color: hsl(28 95% 68%); border-color: hsl(24 45% 32%); }
.rarity-chuanshuo { background: hsl(48 95% 88%); color: hsl(40 90% 28%); border-color: hsl(45 80% 70%); }
.dark .rarity-chuanshuo { background: hsl(42 50% 18%); color: hsl(48 95% 68%); border-color: hsl(42 40% 32%); }
.rarity-shishi { background: hsl(270 70% 94%); color: hsl(270 65% 38%); border-color: hsl(270 55% 80%); }
.dark .rarity-shishi { background: hsl(270 40% 20%); color: hsl(270 85% 78%); border-color: hsl(270 35% 36%); }
.rarity-xiyou { background: hsl(210 90% 93%); color: hsl(215 80% 36%); border-color: hsl(210 70% 78%); }
.dark .rarity-xiyou { background: hsl(215 45% 18%); color: hsl(210 90% 72%); border-color: hsl(215 40% 34%); }
.rarity-xishao { background: hsl(142 60% 92%); color: hsl(142 70% 28%); border-color: hsl(142 45% 72%); }
.dark .rarity-xishao { background: hsl(142 35% 16%); color: hsl(142 70% 68%); border-color: hsl(142 30% 30%); }
.rarity-unknown { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }

/* header / mobile nav */
.brand-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.nav-toggle { display: none; width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; padding: 0; }
.site-header .inner { max-width: 72rem; margin: 0 auto; padding: .75rem 1rem; display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; justify-content: space-between; }
.site-nav { display: flex; flex-wrap: wrap; gap: .15rem; }
.site-nav .nav-link { min-height: 36px; display: inline-flex; align-items: center; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .brand-tag { display: none !important; }
  .site-header .inner { flex-wrap: wrap; }
  .site-header .site-nav {
    display: none; width: 100%; order: 3;
    flex-direction: column; gap: .25rem;
    padding: .5rem 0 .25rem; border-top: 1px solid hsl(var(--border));
  }
  .site-header .site-nav.open { display: flex; }
  .site-nav .nav-link { min-height: 44px; padding: .65rem .75rem; width: 100%; }
  .img-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
  .img-grid { grid-template-columns: 1fr !important; }
}

/* footer */
.site-footer { border-top: 1px solid hsl(var(--border)); margin-top: 2rem; }
.site-footer-inner { max-width: 72rem; margin: 0 auto; padding: 1.75rem 1rem 2.5rem; }
.site-footer-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1.4fr 1fr 1fr;
  font-size: .875rem; color: hsl(var(--muted-foreground));
}
@media (max-width: 720px) {
  .site-footer-grid { grid-template-columns: 1fr; }
}

/* ads placeholders */
.ad-slot {
  display: none;
  margin: 1rem 0 1.25rem; min-height: 90px;
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.45);
}
.ad-slot-inner {
  min-height: 90px; display: flex; align-items: center; justify-content: center;
  pointer-events: none; user-select: none;
}
.ad-slot-label {
  font-size: .75rem; color: hsl(var(--muted-foreground));
  letter-spacing: .08em; text-transform: none; opacity: .7;
}
.ad-slot[data-ad-ready="1"] { display: block; border-style: solid; background: transparent; }
.ad-slot[data-ad-ready="1"] .ad-slot-label { display: none; }
.ad-slot[data-ad-ready="1"] .ad-slot-inner { pointer-events: auto; }

.copy-chip {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: .15rem .55rem; border-radius: 9999px; cursor: pointer;
  border: 1px solid hsl(var(--border)); background: hsl(var(--secondary));
  color: hsl(var(--foreground)); font-size: .875rem;
}
.copy-chip:hover { background: hsl(var(--accent)); }

/* gear mobile cards — desktop table / mobile cards */
.gear-panel.card, #table.gear-panel {
  /* keep card chrome on desktop; mobile resets below */
}
.gear-table-view { display: block; }
.gear-cards-view { display: none; }
.gear-card-group { margin-bottom: 1rem; }
.gear-card-slot {
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  color: hsl(var(--muted-foreground)); margin: 0 0 .5rem; text-transform: none;
}
.gear-card-list { display: flex; flex-direction: column; gap: .65rem; }
.gear-card {
  width: 100%; box-sizing: border-box;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: .9rem 1rem;
}
.gear-card-top {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .5rem .75rem;
}
.gear-card-name { font-weight: 600; font-size: 1rem; word-break: break-word; }
.gear-card-badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.gear-card-meta {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  margin-top: .35rem; font-size: .8rem; color: hsl(var(--muted-foreground));
}
.gear-card-dl { margin: .65rem 0 0; display: grid; gap: .45rem; }
.gear-card-dl > div { display: grid; gap: .1rem; }
.gear-card-dl dt {
  font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  color: hsl(var(--muted-foreground));
}
.gear-card-dl dd { margin: 0; font-size: .875rem; line-height: 1.45; word-break: break-word; }
@media (max-width: 767px) {
  .gear-table-view { display: none !important; }
  .gear-cards-view { display: block !important; }
  #table.gear-panel.card, #table.gear-panel {
    background: transparent; border: 0; padding: 0; overflow: visible;
  }
  .search-gear-panel { background: transparent; border: 0; padding: 0; }
  /* avoid page-level horizontal scroll from legacy tables */
  #quick-table .overflow-x, #sets .overflow-x {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .gear-table-view { display: block !important; }
  .gear-cards-view { display: none !important; }
}

/* static item index (server-rendered links) */
.item-index { display: grid; gap: .9rem; }
.item-index-slot { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; align-items: start; }
.item-index-slot > dt { font-size: .8rem; font-weight: 600; color: hsl(var(--muted-foreground)); padding-top: .3rem; }
.item-index-slot > dd { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.item-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .25rem; min-height: 32px;
  border: 1px solid hsl(var(--border)); border-radius: 9999px; font-size: .85rem; text-decoration: none; color: inherit; }
.item-chip:hover { background: hsl(var(--accent)); }
.item-chip img { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; }
@media (max-width: 560px) { .item-index-slot { grid-template-columns: 1fr; gap: .3rem; } .item-index-slot > dt { padding-top: 0; } }
.notfound-hero { text-align: center; padding: 2.5rem 1rem; }

/* gear / item icons */
.gear-icon, .skill-icon, .item-title-icon {
  object-fit: contain; border-radius: 6px;
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
  flex-shrink: 0;
}
.gear-icon { width: 36px; height: 36px; }
.skill-icon { width: 28px; height: 28px; vertical-align: middle; }
.item-title-icon { width: 56px; height: 56px; }
.gear-name-cell { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.gear-name-cell .item-link { word-break: break-word; }
.gear-skill-cell { display: flex; align-items: flex-start; gap: .4rem; }
.gear-skill-cell .skill-icon { margin-top: .1rem; }
.gear-card-top-left { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; flex: 1; }
.gear-icon-ph {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 6px;
  border: 1px dashed hsl(var(--border)); background: hsl(var(--muted) / 0.35);
}
.item-hero { display: flex; align-items: flex-start; gap: .85rem; }
.item-hero-text { min-width: 0; flex: 1; }
.skill-block-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.skill-block-head .skill-icon { width: 40px; height: 40px; }
.items-name-cell { display: flex; align-items: center; gap: .45rem; }
th.col-icon, td.col-icon { width: 44px; text-align: center; padding-left: .4rem; padding-right: .4rem; }
td.col-icon .gear-icon { display: inline-block; }

body.nav-open { overflow: hidden; }