:root {
  --color-900: #f4f4f5;
  --color-600: #a1a1aa;
  --color-500: #71717a;
  --accent: #c4b5fd;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
}
body {
  background: #09090f;
  color: var(--color-900);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 波浪背景：nova-landing 复刻原始文件 wave.html 原样移植 */
#wave-stage { position:fixed; inset:0; z-index:0; pointer-events:none; transform:scaleY(-1); }
#wave-stage canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
#wave-scan {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0.4) 0 1px, transparent 1px 3px);
}
#wave-bottomMask {
  position:fixed; left:0; right:0; bottom:0; height:28%; z-index:0;
  background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 35%, transparent 100%);
  pointer-events:none;
}
body::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:conic-gradient(rgba(255,255,255,.03) 90deg, transparent 90deg 180deg,
    rgba(255,255,255,.03) 180deg 270deg, transparent 270deg) 0 0/2px 2px;
}
.models-wrap {
  padding: 5rem 0 4rem;
  position: relative;
  z-index: 1;
  flex: 1;
}
.models-wrap .container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.models-wrap .models-hero { margin-bottom: 2.5rem; }
.models-wrap .hero-badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--accent);
  border: 1px solid rgba(196,181,253,.35);
  border-radius: 999px;
  padding: 8px 20px;
  margin-bottom: 1.5rem;
}
.models-wrap .site-logo {
  width: 46px;
  height: 46px;
  vertical-align: -9px;
  margin-right: .6rem;
}
.models-wrap .models-title {
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 400;
  color: var(--color-900);
  margin: 0 0 1rem;
  line-height: 1.2;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.models-wrap .title-accent {
  background: linear-gradient(135deg, #c4b5fd 0%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.models-wrap .models-sub {
  color: var(--color-600);
  line-height: 1.8;
  margin: 0;
  font-size: 0.95rem;
}
.models-wrap .models-sub a,
.site-footer a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(196,181,253,.5);
}
.models-wrap .search-box { margin-bottom: 2rem; position: relative; z-index: 2; }
.models-wrap #model-search {
  width: 100%;
  font-size: 1.1rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(196,181,253,.3);
  background: rgba(10,10,20,.55);
  color: var(--color-900);
  outline: none;
  backdrop-filter: blur(8px);
  transition: border-color .2s, box-shadow .2s;
}
.models-wrap #model-search::placeholder { color: var(--color-500); }
.models-wrap #model-search:focus {
  border-color: rgba(196,181,253,.7);
  box-shadow: 0 0 0 3px rgba(196,181,253,.15);
}
.models-wrap .search-meta {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-500);
  letter-spacing: 1px;
}
.models-wrap .results {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  z-index: 2;
}
.models-wrap .md-empty-sug {
  font: inherit;
  font-size: .82rem;
  color: #8ab4f8;
  background: rgba(138,180,248,.08);
  border: 1px solid rgba(138,180,248,.35);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  cursor: pointer;
}
.models-wrap .md-empty-sug:hover { background: rgba(138,180,248,.16); }
.models-wrap .md-empty {
  color: var(--color-500);
  text-align: center;
  padding: 3rem 0;
  font-size: 0.95rem;
  letter-spacing: 1px;
}
.models-wrap .md-card {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 1.5rem;
  background: rgba(10,10,20,.55);
  backdrop-filter: blur(8px);
}
.models-wrap .md-card-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}
.models-wrap .md-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  padding: 4px;
  flex-shrink: 0;
}
.models-wrap .md-card-title {
  margin: 0;
  font-size: 1.3rem;
  color: var(--color-900);
  font-weight: 600;
}
.models-wrap .md-desc {
  color: var(--color-600);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}
.models-wrap .md-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 640px) {
  .models-wrap .md-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .models-wrap { padding: 3rem 0 3rem; }
  .models-wrap .container { padding: 0 1rem; }
  .models-wrap .md-card { padding: 1.1rem; }
  .models-wrap .md-stat-value { font-size: .92rem; }
  .models-wrap .md-prov-row { flex-wrap: wrap; row-gap: .3rem; }
  .models-wrap .md-prov-name { min-width: 0; flex: 1; }
  .models-wrap .md-prov-id { flex: 1 1 100%; min-width: 0; order: 3; }
  .models-wrap .md-prov-price { flex: 1 1 100%; order: 4; font-size: .78rem; }
  .models-wrap .md-tl-pill > span { max-width: 180px; }
  .models-wrap .md-card-title { font-size: 1.15rem; }
  .site-footer .container { padding: 0 1rem; }
}
.models-wrap .md-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.models-wrap .md-stat-label {
  font-size: 0.72rem;
  color: var(--color-500);
  letter-spacing: 1px;
}
.models-wrap .md-stat-value {
  font-size: 1.02rem;
  color: var(--color-900);
  font-weight: 600;
  word-break: break-all;
}
.models-wrap .md-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.models-wrap .md-badge {
  font-size: 0.75rem;
  color: var(--accent);
  border: 1px solid rgba(196,181,253,.35);
  border-radius: 999px;
  padding: 3px 12px;
  letter-spacing: 1px;
}
.models-wrap .md-badge-danger {
  color: #ff8585;
  border-color: rgba(255,100,100,.5);
  background: rgba(255,70,70,.10);
}
.models-wrap .md-badge-warn {
  color: #ffd479;
  border-color: rgba(255,200,90,.45);
  background: rgba(255,180,60,.08);
}
.models-wrap .md-cache {
  font-size: .72rem;
  color: #9aa0a6;
  margin-left: .35rem;
  white-space: nowrap;
}
.models-wrap .md-doc-link {
  color: #8ab4f8;
  margin-left: .35rem;
  display: inline-flex;
  vertical-align: -1px;
}
.models-wrap .md-doc-link:hover {
  color: #c9dcff;
}
.models-wrap .md-tabs {
  display: flex;
  gap: .5rem;
  margin: 1rem 0 1.1rem;
}
.models-wrap .md-tab {
  font-size: .82rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: transparent;
  color: #b6bac2;
  cursor: pointer;
}
.models-wrap .md-tab-active {
  background: rgba(196,181,253,.14);
  border-color: rgba(196,181,253,.5);
  color: #e6dcff;
}
.models-wrap .md-labs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  overflow: hidden;
  margin-bottom: .5rem;
}
.models-wrap .md-labs.md-collapsed {
  max-height: var(--lab-clamp, 34px);
}
.models-wrap .md-labs-toggle {
  display: block;
  margin: 0 0 1rem auto;
  font: inherit;
  font-size: .75rem;
  color: #8ab4f8;
  background: none;
  border: none;
  cursor: pointer;
  padding: .1rem .2rem;
}
.models-wrap .md-lab-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  font: inherit;
  font-size: .78rem;
  color: #b6bac2;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .32rem .8rem .32rem .42rem;
  cursor: pointer;
  white-space: nowrap;
}
.models-wrap .md-lab-chip img {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}
.models-wrap .md-lab-chip:hover { border-color: rgba(196,181,253,.45); color: #e8e8e8; }
.models-wrap .md-lab-chip.md-lab-active {
  background: rgba(196,181,253,.14);
  border-color: rgba(196,181,253,.55);
  color: #ece5ff;
}
.models-wrap .md-lab-head {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  border: 1px solid rgba(196,181,253,.3);
  background: rgba(196,181,253,.05);
  border-radius: 14px;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
}
.models-wrap .md-lab-head .md-card-icon { width: 38px; height: 38px; }
.models-wrap .md-lab-name { font-size: 1rem; font-weight: 600; color: #f0ecff; }
.models-wrap .md-lab-desc { font-size: .8rem; color: #9aa0a6; margin-top: 3px; line-height: 1.5; }
.models-wrap .md-lab-clear {
  margin-left: auto;
  flex-shrink: 0;
  font: inherit;
  font-size: .75rem;
  color: #8ab4f8;
  background: none;
  border: none;
  cursor: pointer;
  padding: .2rem .4rem;
}
.models-wrap .md-tl-head {
  font-size: .85rem;
  color: #9aa0a6;
  margin: .4rem 0 1.2rem;
}
.models-wrap .md-tl-head b { color: #e6dcff; }
.models-wrap .md-tl-day {
  position: relative;
  padding-left: 22px;
  margin-bottom: 1.5rem;
}
.models-wrap .md-tl-day::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: -6px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.09);
}
.models-wrap .md-tl-day:last-child::before { bottom: 10px; }
.models-wrap .md-tl-date {
  position: relative;
  font-size: .82rem;
  font-weight: 600;
  color: #d8d2ec;
  margin: 0 0 .65rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.models-wrap .md-tl-date i {
  position: absolute;
  left: -22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #14141f;
  border: 2px solid #8ab4f8;
}
.models-wrap .md-tl-date span {
  font-size: .7rem;
  font-weight: 400;
  color: #8ab4f8;
}
.models-wrap .md-tl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.models-wrap .md-tl-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .85rem .3rem .38rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: #e8e8e8;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.models-wrap .md-tl-pill:hover {
  border-color: rgba(196,181,253,.55);
  background: rgba(196,181,253,.08);
}
.models-wrap .md-tl-pill .md-card-icon {
  width: 20px;
  height: 20px;
  padding: 2px;
}
.models-wrap .md-tl-pill > span {
  white-space: nowrap;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.models-wrap .md-badge-sm {
  font-size: .65rem;
  padding: 1px 8px;
  letter-spacing: 0;
  vertical-align: 2px;
}
.models-wrap .md-prov-list {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.models-wrap .md-prov-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.82rem;
}
.models-wrap .md-prov-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  padding: 2px;
  flex-shrink: 0;
}
.models-wrap .md-prov-name {
  color: var(--color-900);
  font-weight: 600;
  min-width: 6rem;
}
.models-wrap .md-prov-id {
  color: var(--color-500);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.75rem;
  flex: 1;
  min-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.models-wrap .md-prov-price { color: var(--color-600); white-space: nowrap; }
.models-wrap .md-prov-price em {
  font-style: normal;
  color: var(--color-500);
  font-size: 0.72rem;
}
.models-wrap .md-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  position: relative;
  z-index: 2;
}
.models-wrap .md-page-btn {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(196,181,253,.3);
  background: rgba(10,10,20,.55);
  color: var(--color-900);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.models-wrap .md-page-btn:hover:not(:disabled) {
  border-color: rgba(196,181,253,.7);
  background: rgba(196,181,253,.12);
}
.models-wrap .md-page-btn:disabled { opacity: 0.35; cursor: default; }
.models-wrap .md-page-active {
  background: rgba(196,181,253,.2);
  border-color: rgba(196,181,253,.7);
  color: var(--accent);
  font-weight: 600;
}
.models-wrap .md-page-info {
  font-size: 0.78rem;
  color: var(--color-500);
  letter-spacing: 1px;
  margin-left: 0.5rem;
}
.site-footer {
  position: relative;
  z-index: 1;
  padding: 2rem 0 2.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-500);
}
.site-footer .container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.5rem;
  line-height: 1.9;
}
