:root {
  --canvas: #f7f6f3;
  --paper: #fffefa;
  --ink: #20201e;
  --muted: #88857d;
  --soft: #aaa69d;
  --line: #e8e5de;
  --line-strong: #d8d4cb;
  --red: #2f80ed;
  --red-dark: #1767d2;
  --red-soft: #eef5ff;
  --yellow: #f4bd37;
  --green: #4c9971;
  --shadow: 0 20px 50px rgba(41, 33, 22, 0.11);
  --radius: 10px;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

img {
  user-select: none;
  -webkit-user-drag: none;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 92% 0%, rgba(246, 193, 116, 0.12), transparent 26rem),
    var(--canvas);
}

button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(219, 75, 53, 0.24); outline-offset: 2px; }

.app-shell { min-height: 100vh; }

.topbar {
  height: 76px;
  padding: 0 42px;
  border-bottom: 1px solid rgba(215, 211, 201, 0.8);
  background: rgba(255, 254, 250, 0.9);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  gap: 42px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  color: var(--ink);
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  min-width: 170px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  overflow: hidden;
  background: transparent;
  font: 700 20px/1 "DM Sans", sans-serif;
}
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }

.brand strong { display: block; font-size: 16px; line-height: 1.1; letter-spacing: 0.02em; }
.brand small { display: block; margin-top: 4px; color: var(--soft); font: 500 8px/1 "DM Mono", monospace; letter-spacing: 0.12em; }

.main-nav { min-width: 0; display: flex; align-items: center; gap: 28px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.main-nav::-webkit-scrollbar { display: none; }
.nav-link {
  flex: none;
  border: 0;
  padding: 6px 0;
  color: #77736b;
  background: transparent;
  font-size: 13px;
  white-space: nowrap;
  position: relative;
}
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -25px;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  transform: translateX(-50%);
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.icon-button, .view-button {
  width: 34px;
  height: 34px;
  color: #6c6860;
  border: 1px solid transparent;
  background: transparent;
  display: grid;
  place-items: center;
  border-radius: 8px;
  position: relative;
}
.icon-button:hover, .view-button:hover { background: #f0eee9; }
.icon-button svg, .view-button svg { width: 17px; height: 17px; stroke-width: 1.8; }

.submit-button, .secondary-button, .load-more-button {
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  min-height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.submit-button:hover, .secondary-button:hover, .load-more-button:hover { border-color: var(--ink); transform: translateY(-1px); }
.submit-button svg { width: 15px; height: 15px; }

.account-button {
  border: 0;
  padding: 2px 0 2px 8px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-align: left;
}
.account-button > svg { width: 15px; color: var(--soft); }
.account-button[data-account-mode="anonymous"] .account-copy small { color: #7f8a9a; }
.account-button[data-account-mode="account"] .account-copy small { color: var(--red); }
.avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #817b70;
  font-size: 13px;
}
.account-copy strong { display: block; font-size: 12px; font-weight: 600; }
.account-copy small { display: block; color: var(--red); font: 500 10px "DM Mono", monospace; margin-top: 2px; }

main { max-width: 1480px; padding: 56px 42px 80px; margin: 0 auto; }
.workspace-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.eyebrow { margin: 0 0 13px; color: var(--red); font: 500 10px "DM Mono", monospace; letter-spacing: 0.14em; }
h1 { margin: 0; font-size: clamp(34px, 4vw, 58px); letter-spacing: -0.04em; line-height: 1.08; font-weight: 700; }
h1 em { color: var(--red); font-style: normal; }
.heading-description { margin: 17px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.head-stats { display: flex; gap: 42px; flex: none; padding-bottom: 4px; }
.head-stats div { display: flex; flex-direction: column; gap: 6px; }
.head-stats strong { font: 500 19px "DM Mono", monospace; letter-spacing: -0.06em; }
.head-stats span { color: var(--soft); font-size: 11px; }

.search-row { display: flex; gap: 10px; margin-top: 42px; }
.search-box {
  flex: 1;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 15px;
  background: var(--paper);
  color: var(--muted);
}
.search-box svg { width: 18px; height: 18px; }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--ink); }
.search-box input::placeholder { color: #aaa69e; }
kbd { color: #aaa69e; border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; font: 10px "DM Mono", monospace; }
.filter-button {
  min-width: 94px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #615e58;
  font-size: 12px;
}
.filter-button svg { width: 16px; height: 16px; }
.filter-count { display: grid; place-items: center; width: 18px; height: 18px; color: #fff; background: var(--red); border-radius: 50%; font: 10px "DM Mono", monospace; }

.content-layout { margin-top: 37px; display: block; }
.sidebar { min-width: 0; }
.side-label { color: #a19d94; font: 500 10px "DM Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.side-section { padding-bottom: 26px; }
.side-section-border { border-top: 1px solid var(--line); padding-top: 25px; }
.filter-list, .check-list { display: flex; flex-direction: column; gap: 4px; }
.side-filter {
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: #6c6861;
  text-align: left;
  font-size: 12px;
}
.side-filter:hover, .side-filter.is-active { color: var(--ink); background: #ebe9e2; }
.side-filter.is-active { font-weight: 600; }
.side-filter strong { font: 10px "DM Mono", monospace; color: #aaa69d; }
.filter-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font: 600 12px "DM Mono", monospace; }
.filter-icon svg { width: 14px; height: 14px; stroke-width: 1.7; }
.all-icon { background: #e7e5df; color: #57534c; }.ppt-icon { background: #f8ded7; color: #cb5039; }.ui-icon { background: #e2ece5; color: #4b8e6b; }.portfolio-icon { background: #e8e3ee; color: #755c94; }.three-icon { background: #eee5d4; color: #aa813b; }.font-icon { background: #e1e8ec; color: #567a8a; }
.check-list label { min-height: 27px; display: flex; align-items: center; gap: 9px; color: #77736a; font-size: 12px; cursor: pointer; }
.check-list input { position: absolute; opacity: 0; pointer-events: none; }
.custom-check { width: 14px; height: 14px; border: 1px solid #c8c3ba; border-radius: 3px; background: var(--paper); position: relative; }
.check-list input:checked + .custom-check { border-color: var(--red); background: var(--red); }
.check-list input:checked + .custom-check::after { content: ""; position: absolute; width: 6px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); top: 3px; left: 3px; }
.creator-card { width: 100%; margin-top: 7px; padding: 14px 12px; border: 1px solid #ead7c3; border-radius: 8px; background: #fff5e8; display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; gap: 8px; align-items: center; color: #765d42; text-align: left; }
.creator-card:hover { border-color: #d5ad83; }
.creator-card-mark { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: #f4c988; color: #fff; }
.creator-card-mark svg { width: 15px; }.creator-card strong { display: block; font-size: 11px; }.creator-card small { display: block; margin-top: 3px; color: #aa8b68; font-size: 9px; }.creator-card > svg { width: 14px; }

.toolbar { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.result-count { color: var(--soft); font-size: 11px; }.result-count strong { color: var(--ink); font: 500 13px "DM Mono", monospace; }
.view-controls { display: flex; align-items: center; gap: 7px; }
.segmented-control { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 3px; background: #f1efea; }
.sort-tab { border: 0; border-radius: 4px; padding: 5px 10px; color: #969189; background: transparent; font-size: 11px; }
.sort-tab:hover, .sort-tab.is-active { color: var(--ink); background: var(--paper); box-shadow: 0 1px 3px rgba(30, 24, 17, 0.07); }
.view-button { width: 30px; height: 30px; color: #aaa69d; }.view-button.is-active { color: var(--ink); background: #e9e7e1; }

.resource-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
.resource-grid.is-list { display: flex; flex-direction: column; gap: 12px; }
.resource-card { min-width: 0; position: relative; }
.cover {
  aspect-ratio: 1.26 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: #eae8e2;
  position: relative;
  border: 1px solid rgba(32, 32, 30, 0.04);
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease; }
.resource-card:hover .cover img { transform: scale(1.025); }
.card-overlay { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-end; padding: 12px; background: linear-gradient(180deg, transparent 45%, rgba(22, 21, 19, 0.42)); opacity: 0; transition: opacity 180ms ease; }
.resource-card:hover .card-overlay { opacity: 1; }
.download-button { border: 0; border-radius: 5px; min-height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; color: #fff; background: var(--red); font-size: 11px; box-shadow: 0 4px 14px rgba(117, 26, 14, 0.25); }
.download-button:hover { background: var(--red-dark); }
.download-button svg { width: 14px; height: 14px; }
.card-badge { position: absolute; top: 10px; left: 10px; border-radius: 4px; padding: 4px 6px; background: rgba(255,255,255,.92); color: #6e665c; font: 500 9px "DM Mono", monospace; letter-spacing: .04em; }
.card-badge.paid { color: #1f6fcf; background: #eef5ff; }.card-badge.free { color: #397f59; background: #e4f2e9; }
.card-info { padding: 12px 1px 0; }.card-title { margin: 0; font-size: 13px; line-height: 1.55; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; cursor: pointer; }.card-title:hover { color: var(--red); }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; color: var(--soft); font-size: 10px; }.card-meta-left { display: flex; gap: 8px; align-items: center; }.card-meta-left span + span::before { content: "·"; margin-right: 8px; color: #c7c3bb; }.price { color: var(--red); font: 500 10px "DM Mono", monospace; white-space: nowrap; }
.card-detail-link { margin-top: 10px; padding: 0; border: 0; display: inline-flex; align-items: center; gap: 4px; color: #8f8b83; background: transparent; font-size: 10px; }.card-detail-link:hover { color: var(--red); }.card-detail-link svg { width: 12px; height: 12px; }

.resource-grid.is-list .resource-card { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.resource-grid.is-list .cover { aspect-ratio: 1.32 / 1; }.resource-grid.is-list .card-overlay { display: none; }.resource-grid.is-list .card-info { padding: 0; }.resource-grid.is-list .card-title { -webkit-line-clamp: 1; font-size: 14px; }.resource-grid.is-list .card-meta { justify-content: flex-start; }.resource-grid.is-list .download-button { opacity: 1; }

.load-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 42px; color: #aaa69d; font-size: 10px; }.load-more-button { background: transparent; min-height: 40px; padding: 0 18px; }.load-more-button svg { width: 14px; }.load-more-button.is-loading { opacity: .6; pointer-events: none; }
.empty-state { text-align: center; padding: 92px 20px 70px; }.empty-icon { margin: 0 auto 18px; color: var(--soft); }.empty-icon svg { width: 32px; height: 32px; }.empty-state h2 { margin: 0; font-size: 18px; }.empty-state p { margin: 10px 0 18px; color: var(--muted); font-size: 12px; }

.detail-page { padding: 16px 0 70px; }.detail-breadcrumb { display: flex; align-items: center; gap: 13px; color: var(--soft); font-size: 11px; }.back-button { border: 0; padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; color: #6d6961; background: transparent; font-size: 11px; }.back-button:hover { color: var(--ink); }.back-button svg { width: 15px; }.detail-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr); gap: 52px; margin-top: 27px; align-items: start; }.detail-gallery { min-width: 0; }.detail-cover-shell { min-height: 640px; overflow: hidden; border: 1px solid #e3e0d9; border-radius: 10px; position: relative; background: #e9e7e2; }.detail-cover-image { width: 100%; height: auto; max-height: 930px; display: block; object-fit: cover; }.cover-watermark { position: absolute; right: 15px; bottom: 14px; padding: 6px 8px; border-radius: 4px; color: rgba(255,255,255,.78); background: rgba(30, 31, 33, .43); font: 10px "DM Mono", monospace; }.preview-note { display: flex; align-items: center; gap: 7px; margin-top: 11px; color: var(--soft); font-size: 10px; }.preview-note svg { width: 14px; }.detail-sidebar { position: sticky; top: 104px; min-width: 0; padding-top: 3px; }.detail-sidebar h1 { margin: 13px 0 17px; font-size: clamp(25px, 2.3vw, 38px); line-height: 1.3; letter-spacing: -.04em; }.detail-tag-row { display: flex; flex-wrap: wrap; gap: 7px; }.detail-description { margin: 19px 0 0; color: var(--muted); font-size: 12px; line-height: 1.85; }.detail-divider { height: 1px; margin: 24px 0 20px; background: var(--line); }.detail-actions-page { margin-top: 0; }.detail-download-button { flex: 1; min-height: 53px; font-size: 14px; background: #2b7fff; box-shadow: 0 7px 18px rgba(43,127,255,.18); }.detail-download-button:hover { background: #1767d2; }.detail-download-button strong { margin-left: 5px; font: 500 12px "DM Mono", monospace; }.detail-info-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 20px; padding: 6px; border-radius: 8px; background: #f8f8f7; }.detail-info-card div { min-height: 66px; padding: 11px 13px; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: #fff; }.detail-info-card span { color: var(--soft); font-size: 10px; }.detail-info-card strong { font-size: 12px; font-weight: 600; }.detail-info-card .detail-price { color: #2076e4; font: 500 14px "DM Mono", monospace; }.detail-share-row { display: flex; align-items: center; gap: 8px; margin-top: 19px; color: var(--muted); font-size: 10px; }.detail-share-row span { margin-right: auto; }.detail-share-row button, .detail-legal-row button { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #77736b; background: #f1f1ef; }.detail-share-row button:hover, .detail-legal-row button:hover { color: var(--ink); background: #e7e6e2; }.detail-share-row svg { width: 14px; }.detail-legal-row { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; padding-top: 17px; border-top: 1px solid var(--line); }.detail-legal-row button { width: auto; height: auto; border-radius: 0; background: transparent; display: inline-flex; gap: 5px; color: #96928a; font-size: 10px; }.detail-legal-row button:hover { background: transparent; color: var(--ink); }.detail-legal-row svg { width: 14px; }.related-section { margin-top: 72px; }.related-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.related-heading h2 { margin: 8px 0 0; font-size: 22px; }.related-heading > button { border: 0; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); background: transparent; font-size: 11px; }.related-heading > button:hover { color: var(--ink); }.related-heading > button svg { width: 14px; }.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 21px; }

.mobile-nav { display: none; }
.modal-layer[hidden] { display: none; }.modal-layer { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; }.modal-backdrop { position: absolute; inset: 0; background: rgba(29, 27, 24, .42); backdrop-filter: blur(3px); }.modal { width: min(580px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; position: relative; border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); animation: modal-in 180ms ease-out; }.modal.wide { width: min(880px, 100%); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes spin { to { transform: rotate(360deg); } }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(239, 237, 231, .85); color: #625e57; }.modal-close svg { width: 17px; }
.auth-modal { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); min-height: 640px; }
.auth-visual { display: grid; place-items: center; padding: 0; overflow: hidden; border-right: 1px solid var(--line); background: #E9E9E9; }
.auth-visual > img { width: min(79%, 312px); height: auto; display: block; object-fit: contain; }
.auth-panel { padding: 54px 34px 30px; display: grid; align-content: start; gap: 40px; }
.auth-panel-head { display: grid; gap: 12px; justify-items: start; }
.auth-panel-logo { width: 23px; height: 23px; display: block; object-fit: contain; }
.auth-panel-title { margin: 0; color: var(--ink); font-size: 22px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.auth-form { display: grid; gap: 14px; }
.auth-sheet { display: grid; gap: 14px; }
.auth-sheet[hidden] { display: none; }
.auth-footer { width: 100%; margin-top: 2px; display: flex; justify-content: space-between; gap: 18px; }
.auth-footer button { border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.auth-footer button:hover { color: #000; }
.auth-inline-actions {
  margin-top: -4px;
  display: flex;
  justify-content: flex-end;
}
.auth-inline-actions button {
  border: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
}
.auth-inline-actions button:hover {
  color: #000;
}
.auth-help-text {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.password-modal h2 {
  margin: 10px 0 0;
  font-size: 22px;
}
.password-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.password-form .primary-button {
  width: 100%;
}
.account-dashboard .account-menu { grid-template-columns: repeat(2, 1fr); }
.account-dashboard .account-menu button:last-child { color: #d15b64; }
.account-dashboard .account-menu button:last-child svg { color: #d15b64; }
.detail-modal { display: grid; grid-template-columns: 1fr 1fr; }.detail-preview { min-height: 500px; background: #e7e2d9; display: flex; align-items: center; justify-content: center; overflow: hidden; }.detail-preview img { width: 100%; height: 100%; object-fit: cover; }.detail-copy { padding: 40px 34px 30px; }.modal-eyebrow { color: var(--red); font: 500 10px "DM Mono", monospace; letter-spacing: .12em; }.detail-copy h2 { margin: 13px 0 10px; padding-right: 20px; font-size: 22px; line-height: 1.4; }.modal-description { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 19px 0 24px; }.tag { padding: 5px 7px; border-radius: 4px; background: #f0eee9; color: #777269; font-size: 10px; }.detail-meta { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 17px 0; gap: 17px 14px; }.detail-meta div { display: flex; flex-direction: column; gap: 5px; }.detail-meta span { color: var(--soft); font-size: 10px; }.detail-meta strong { font: 500 12px "DM Mono", monospace; }.detail-actions { display: flex; align-items: center; gap: 9px; margin-top: 24px; }.primary-button { min-height: 42px; padding: 0 18px; border: 0; border-radius: 6px; display: inline-flex; justify-content: center; align-items: center; gap: 7px; color: #fff; background: var(--red); font-size: 12px; font-weight: 600; }.primary-button:hover { background: var(--red-dark); }.primary-button svg { width: 16px; }.bookmark-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 6px; color: #7f7b72; background: var(--paper); }.bookmark-button.is-saved { color: var(--red); border-color: #e7aaa0; background: var(--red-soft); }.bookmark-button svg { width: 17px; }
.purchase-modal { padding: 36px 34px 32px; }.purchase-modal h2, .vip-modal h2, .submit-modal h2, .account-modal h2 { margin: 0; font-size: 22px; }.purchase-subtitle { margin: 8px 0 23px; color: var(--muted); font-size: 12px; }.purchase-summary { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; gap: 12px; align-items: center; background: #fbfaf7; }.purchase-summary img { width: 58px; height: 46px; object-fit: cover; border-radius: 5px; }.purchase-summary strong { display: block; font-size: 12px; line-height: 1.5; }.purchase-summary small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }.balance-strip { margin-top: 20px; padding: 12px 14px; border-radius: 7px; display: flex; justify-content: space-between; align-items: center; color: #6a5939; background: #fff3da; font-size: 11px; }.balance-strip strong { color: #9e711b; font: 500 13px "DM Mono", monospace; }.payment-label { display: block; margin: 22px 0 10px; color: var(--soft); font: 500 10px "DM Mono", monospace; letter-spacing: .1em; }.payment-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.payment-option { padding: 11px 9px; border: 1px solid var(--line); border-radius: 6px; color: #77736b; background: var(--paper); text-align: center; font-size: 11px; }.payment-option.is-active { border-color: var(--red); color: var(--red); background: var(--red-soft); }.payment-option small { display: block; margin-top: 4px; color: var(--soft); font-size: 9px; }.purchase-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 26px; }.purchase-total { color: var(--muted); font-size: 11px; }.purchase-total strong { color: var(--red); font: 500 17px "DM Mono", monospace; }.purchase-footer .primary-button { flex: 1; }
.filter-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.filter-choice { min-height: 39px; border: 1px solid var(--line); border-radius: 6px; color: #77736b; background: var(--paper); font-size: 11px; }.filter-choice.is-active { border-color: var(--red); color: var(--red); background: var(--red-soft); }

.modal.payment-shell { width: min(576px, 100%); background: transparent; border: 0; box-shadow: none; }.payment-modal { width: 100%; overflow: hidden; background: #fff; }.payment-header { min-height: 70px; padding: 0 23px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #eef4ff, #fff); border-bottom: 1px solid #f1f1f1; }.wechat-brand { display: flex; align-items: center; gap: 9px; color: #222; font-size: 15px; }.wechat-mark { width: 26px; height: 26px; display: grid; place-items: center; color: #1aad19; }.wechat-mark svg { width: 25px; height: 25px; fill: currentColor; stroke: #fff; }.payment-close { border: 0; background: transparent; color: #aaa; }.payment-close svg { width: 19px; }.payment-body { padding: 25px 26px 25px; text-align: center; }.payment-body h2 { margin: 10px 0 5px; font-size: 20px; }.payment-product { margin: 0 auto; max-width: 300px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.qr-frame { width: 234px; height: 234px; margin: 19px auto 15px; padding: 9px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; box-shadow: 0 9px 25px rgba(45, 53, 70, .08); }.qr-frame img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }.payment-amount { color: #161616; font: 500 25px "DM Mono", monospace; }.payment-hint { margin: 9px 0 15px; color: #777; font-size: 11px; }.payment-order { display: flex; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid #f0f0f0; color: #aaa; font: 9px "DM Mono", monospace; }.payment-countdown { color: #de8c43; }.payment-success-button { width: 100%; min-height: 43px; margin-top: 20px; display: inline-flex; justify-content: center; align-items: center; gap: 7px; border: 0; border-radius: 6px; color: #fff; background: #2b7fff; font-size: 12px; }.payment-success-button:hover { background: #1767d2; }.payment-success-button svg { width: 16px; }.payment-demo-note { margin: 15px 5px 0; color: #aaa; font-size: 9px; line-height: 1.6; }.download-success { padding: 42px 34px 34px; text-align: center; }.success-icon { width: 48px; height: 48px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #32b36c; }.success-icon svg { width: 27px; }.download-success h2 { margin: 10px 0 8px; font-size: 21px; }.download-success > p { margin: 0; color: var(--muted); font-size: 11px; }.success-file { margin: 23px 0 18px; padding: 13px 14px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 7px; color: #6d6961; background: #fbfaf7; font-size: 11px; text-align: left; }.success-file svg { width: 18px; color: var(--red); }.success-file strong { margin-left: auto; color: #42a06d; font-size: 10px; }.baidu-link-box { margin: 0 0 17px; padding: 12px; border: 1px solid #dfe8f7; border-radius: 8px; background: #f6f9fe; text-align: left; }.baidu-link-box label { display: block; margin-bottom: 7px; color: #6b7280; font-size: 10px; }.baidu-link-row { display: flex; gap: 7px; }.baidu-link-row input { flex: 1; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid #d9e0ea; border-radius: 5px; color: #4b5563; background: #fff; font: 10px "DM Mono", monospace; }.copy-link-button { min-width: 60px; height: 34px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 5px; color: #fff; background: #2b7fff; font-size: 10px; }.copy-link-button:hover { background: #1767d2; }.copy-link-button svg { width: 13px; }.baidu-link-box small { display: block; margin-top: 7px; color: #8a94a4; font-size: 9px; line-height: 1.5; }.download-success .primary-button { width: 100%; background: #2b7fff; }.download-success small { display: block; margin-top: 13px; color: var(--soft); font-size: 9px; }

.vip-modal { padding: 36px 34px 34px; }.vip-intro { margin: 9px 0 22px; color: var(--muted); font-size: 12px; }.vip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.vip-plan { border: 1px solid var(--line); border-radius: 8px; padding: 15px 12px; background: #fbfaf7; }.vip-plan.featured { border-color: #dfb85a; background: #fff8e9; }.vip-plan h3 { margin: 0; font-size: 13px; }.vip-plan .vip-price { margin: 15px 0 3px; color: var(--ink); font: 500 24px "DM Mono", monospace; }.vip-plan .vip-price small { color: var(--muted); font: 10px "Noto Sans SC", sans-serif; }.vip-plan p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; min-height: 34px; }.vip-plan ul { padding: 13px 0 0; margin: 13px 0 0; border-top: 1px solid var(--line); list-style: none; color: #7b766b; font-size: 10px; line-height: 2; }.vip-plan li::before { content: "✓"; margin-right: 5px; color: var(--green); }.plan-button { width: 100%; margin-top: 14px; min-height: 33px; border: 1px solid var(--line-strong); border-radius: 5px; color: #6a665e; background: var(--paper); font-size: 10px; }.featured .plan-button { border-color: #c28f2c; color: #76570d; background: #f8d77d; }
.vip-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 23px; padding-top: 20px; border-top: 1px solid var(--line); }.benefit { display: flex; gap: 8px; color: var(--muted); font-size: 10px; line-height: 1.55; }.benefit svg { width: 15px; flex: none; color: var(--red); }

.submit-modal { padding: 36px 34px 32px; }.submit-intro { margin: 9px 0 21px; color: var(--muted); font-size: 12px; line-height: 1.7; }.earnings-banner { padding: 13px 14px; border-radius: 7px; display: flex; gap: 10px; align-items: center; color: #50735e; background: #e9f3ec; font-size: 11px; }.earnings-banner svg { width: 17px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }.field { display: flex; flex-direction: column; gap: 7px; }.field.full { grid-column: 1 / -1; }.field label { color: #79756d; font-size: 10px; }.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 5px; padding: 10px 11px; color: var(--ink); background: var(--paper); outline: 0; font-size: 12px; }.field textarea { resize: vertical; min-height: 74px; }.upload-drop { min-height: 108px; border: 1px dashed #c9c2b6; border-radius: 7px; display: grid; place-items: center; text-align: center; color: var(--muted); background: #fbfaf7; cursor: pointer; }.upload-drop:hover { border-color: var(--red); color: var(--red); }.upload-drop svg { width: 21px; margin-bottom: 5px; }.upload-drop strong { display: block; font-size: 11px; }.upload-drop small { display: block; margin-top: 4px; font-size: 9px; }.submit-footer { display: flex; justify-content: flex-end; margin-top: 22px; }.submit-footer .primary-button { min-width: 150px; }

.account-modal { padding: 36px 34px 30px; }.account-header { display: flex; align-items: center; gap: 13px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }.account-avatar-large { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #817b70; font-size: 19px; }.account-header strong { display: block; font-size: 15px; }.account-header small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }.account-balance { margin-left: auto; text-align: right; }.account-balance span { display: block; color: var(--soft); font-size: 10px; }.account-balance strong { display: block; margin-top: 4px; color: var(--red); font: 500 17px "DM Mono", monospace; }.account-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 19px; }.account-menu button { min-height: 64px; border: 1px solid var(--line); border-radius: 7px; color: #6e6961; background: #fbfaf7; display: flex; align-items: center; gap: 9px; padding: 0 13px; text-align: left; font-size: 11px; }.account-menu button:hover { color: var(--ink); border-color: var(--line-strong); }.account-menu svg { width: 17px; color: var(--red); }.account-note { margin: 19px 0 0; color: var(--soft); font-size: 10px; line-height: 1.7; }
.order-history-modal h2 { margin: 10px 0 0; font-size: 22px; }
.order-history-modal > .account-note { margin-top: 8px; }
.order-history-list { display: grid; gap: 9px; margin-top: 21px; }
.order-history-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfd; }
.order-history-copy { min-width: 0; }
.order-history-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.order-history-copy small { display: block; margin-top: 6px; color: var(--soft); font: 10px "DM Mono", monospace; }
.order-history-side { display: grid; flex: none; justify-items: end; gap: 5px; }
.order-history-side > strong { color: var(--red); font: 500 12px "DM Mono", monospace; }
.order-history-side .status-pill { min-width: 50px; padding: 4px 7px; border-radius: 999px; color: #2d996d; background: #eaf8f1; font-size: 10px; text-align: center; }
.order-history-side .status-pill.is-pending { color: #a8781f; background: #fff4dc; }
.history-delivery-button { border: 0; padding: 0; color: var(--red); background: transparent; font-size: 10px; }
.history-delivery-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.order-history-empty { padding: 32px 15px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--soft); text-align: center; font-size: 12px; }

.toast { position: fixed; z-index: 80; left: 50%; bottom: 26px; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; border-radius: 6px; padding: 10px 15px; color: #fff; background: #262522; box-shadow: 0 8px 25px rgba(0,0,0,.18); font-size: 12px; transition: opacity 180ms ease, transform 180ms ease; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.site-footer {
  margin-top: 56px;
  padding: 18px 42px 34px;
  color: var(--soft);
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
}
.site-footer p { margin: 0; }
body.modal-open { overflow: hidden; }

@media (max-width: 1120px) {
  .topbar { padding: 0 24px; gap: 25px; }.main-nav { gap: 19px; }.content-layout { gap: 28px; }.resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.head-stats { gap: 22px; }.detail-layout { gap: 32px; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }.detail-cover-shell { min-height: 520px; }
}

@media (max-width: 820px) {
  body { padding-bottom: 65px; }.topbar { height: 64px; padding: 0 17px; }.brand { min-width: auto; }.brand small, .main-nav, .submit-button, .account-copy, .account-button > svg { display: none; }.topbar-actions { gap: 3px; }.account-button { padding: 2px; }.workspace-head { display: block; }.head-stats { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.head-stats div { padding: 11px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,254,250,.65); }.head-stats strong { font-size: 14px; }.head-stats span { font-size: 9px; }.search-row { margin-top: 28px; }.search-box { min-height: 44px; }.search-box kbd { display: none; }main { padding: 32px 17px 44px; }.content-layout { display: block; margin-top: 25px; }.sidebar { display: none; }.toolbar { display: block; }.view-controls { margin-top: 13px; justify-content: space-between; }.segmented-control { flex: 1; }.sort-tab { flex: 1; padding-left: 5px; padding-right: 5px; }.resource-grid { margin-top: 17px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 11px; }.card-info { padding-top: 9px; }.card-title { font-size: 11px; }.card-meta { font-size: 9px; }.price { font-size: 9px; }.mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 25; height: 62px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: rgba(255,254,250,.94); backdrop-filter: blur(14px); }.mobile-nav button { border: 0; background: transparent; color: var(--soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 9px; }.mobile-nav button svg { width: 17px; height: 17px; }.mobile-nav button.is-active { color: var(--red); }.detail-page { padding-top: 0; }.detail-breadcrumb { margin-bottom: 14px; }.detail-layout { display: block; margin-top: 0; }.detail-cover-shell { min-height: 0; max-height: 60vh; }.detail-sidebar { position: static; margin-top: 24px; }.detail-sidebar h1 { font-size: 26px; }.detail-info-card { margin-top: 18px; }.related-section { margin-top: 45px; }.related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }.preview-note { line-height: 1.5; }.payment-modal { width: 100%; }.payment-body { padding-left: 20px; padding-right: 20px; }.qr-frame { width: 220px; height: 220px; }.payment-order { flex-direction: column; align-items: center; gap: 5px; }.detail-modal { display: block; }.detail-preview { min-height: 270px; max-height: 50vh; }.detail-copy { padding: 26px 22px 22px; }.detail-copy h2 { font-size: 19px; }.modal { max-height: calc(100vh - 24px); }.modal-layer { padding: 12px; }.purchase-modal, .vip-modal, .submit-modal, .account-modal { padding: 30px 20px 22px; }.vip-grid { grid-template-columns: 1fr 1fr; }.vip-benefits { grid-template-columns: 1fr; }.form-grid { grid-template-columns: 1fr; }.field.full { grid-column: auto; }.resource-grid.is-list .resource-card { grid-template-columns: 90px minmax(0, 1fr); }.resource-grid.is-list .resource-card > .download-button { display: none; }.resource-grid.is-list .card-title { white-space: normal; font-size: 11px; }.resource-grid.is-list .card-meta { display: block; }.resource-grid.is-list .card-meta .price { display: block; margin-top: 6px; }
  .auth-modal { grid-template-columns: 1fr; min-height: 0; }
  .auth-visual { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-visual > img { width: min(62vw, 228px); }
  .auth-panel { padding: 26px 20px 22px; gap: 30px; }
}

@media (max-width: 400px) {
  .workspace-head h1 { font-size: 26px; line-height: 1.3; }
  .workspace-head .heading-description { font-size: 14px; line-height: 1.7; }
  .head-stats strong { font-size: 12px; }.head-stats span { font-size: 8px; }.resource-grid { gap: 20px 9px; }.card-meta-left span:nth-child(2) { display: none; }.payment-body h2 { font-size: 18px; }.qr-frame { width: 205px; height: 205px; }.detail-sidebar h1 { font-size: 23px; }.detail-actions-page .bookmark-button { flex: none; }
}

/* DSPARK AI visual system */
:root {
  --canvas: #07111f;
  --paper: #0d1b2c;
  --ink: #eef7ff;
  --muted: #9aafc8;
  --soft: #66809e;
  --line: #1c334d;
  --line-strong: #2b4868;
  --red: #63e6ff;
  --red-dark: #4c83ff;
  --red-soft: #102a43;
  --yellow: #f7c96a;
  --green: #72e7c0;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.35);
}

body {
  color: var(--ink);
  background-color: var(--canvas);
  background-image:
    linear-gradient(rgba(86, 147, 198, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 147, 198, 0.055) 1px, transparent 1px);
  background-size: 36px 36px;
}

button:focus-visible, input:focus-visible { outline-color: rgba(99, 230, 255, 0.45); }
.topbar {
  border-bottom-color: rgba(61, 95, 129, 0.55);
  background: rgba(7, 17, 31, 0.88);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
}
.brand { min-width: 190px; color: var(--ink); }
.brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(99, 230, 255, 0.14);
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand strong { letter-spacing: 0.08em; }
.brand small { color: #6e94b7; letter-spacing: 0.16em; }
.main-nav { gap: 29px; }
.nav-link { color: #7f9ab5; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after { bottom: -24px; width: 22px; height: 2px; border-radius: 0; background: var(--red); box-shadow: 0 0 12px rgba(99, 230, 255, 0.8); }
.icon-button, .view-button { color: #94b0c9; }
.icon-button:hover, .view-button:hover { background: #12283f; }
.account-button { color: var(--ink); }
.account-button > svg { color: #6e94b7; }
.avatar { color: #07111f; background: linear-gradient(135deg, #63e6ff, #4c83ff); box-shadow: 0 0 0 3px rgba(99, 230, 255, 0.12); }
.account-copy small { color: var(--red); }

main { max-width: 1540px; padding-top: 68px; }
.eyebrow { color: var(--red); }
h1 { color: var(--ink); }
h1 em { color: var(--red); text-shadow: 0 0 24px rgba(99, 230, 255, 0.26); }
.heading-description { color: var(--muted); }
.search-row { margin-top: 38px; }
.search-box { border-color: var(--line-strong); background: rgba(13, 27, 44, 0.9); box-shadow: inset 0 0 0 1px rgba(99, 230, 255, 0.03); }
.search-box:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(99, 230, 255, 0.08); }
.search-box input { color: var(--ink); }
.search-box input::placeholder { color: #66809e; }
kbd { color: #7697b6; border-color: var(--line-strong); background: #0a1727; }
.content-layout { margin-top: 32px; }
.toolbar { border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.result-count { color: var(--soft); }
.result-count strong { color: var(--ink); }
.segmented-control { border-color: var(--line); background: #0a1727; }
.sort-tab { color: #718ca8; }
.sort-tab:hover, .sort-tab.is-active { color: var(--ink); background: #15304a; box-shadow: inset 0 0 0 1px rgba(99, 230, 255, 0.1); }
.view-button.is-active { color: var(--red); background: #122b45; }
.resource-grid { gap: 27px 19px; }
.resource-card { padding: 8px; border: 1px solid rgba(40, 69, 97, 0.9); border-radius: 10px; background: rgba(10, 23, 39, 0.76); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.resource-card:hover { border-color: rgba(99, 230, 255, 0.45); transform: translateY(-3px); box-shadow: 0 18px 35px rgba(0, 0, 0, 0.24), 0 0 24px rgba(76, 131, 255, 0.08); }
.cover { border-radius: 7px; }
.card-overlay { border-radius: 7px; }
.card-badge { top: 10px; left: 10px; color: #b5d4ee; background: rgba(7, 17, 31, 0.84); border: 1px solid rgba(117, 178, 226, 0.2); }
.card-badge.paid { color: var(--red); background: rgba(7, 35, 52, 0.9); border-color: rgba(99, 230, 255, 0.28); }
.card-badge.free { color: var(--green); background: rgba(10, 45, 42, 0.9); border-color: rgba(114, 231, 192, 0.25); }
.card-info { padding: 13px 4px 5px; }
.card-title { color: var(--ink); }
.card-title:hover { color: var(--red); }
.card-meta { color: var(--soft); }
.price { color: var(--red); }
.card-detail-link { color: #7b9bb8; }
.load-more { color: #66809e; }
.load-more-button { border-color: var(--line-strong); color: #a8c1d8; background: #0d1b2c; }
.load-more-button:hover { border-color: var(--red); color: var(--ink); }
.empty-state h2 { color: var(--ink); }
.empty-state p { color: var(--muted); }
.secondary-button { color: var(--ink); border-color: var(--line-strong); background: #0d1b2c; }
.secondary-button:hover { border-color: var(--red); }

.detail-page { color: var(--ink); }
.detail-breadcrumb { color: var(--soft); }
.back-button { color: #9cb6cc; }
.back-button:hover { color: var(--red); }
.detail-cover-shell { border-color: var(--line-strong); background: #0b1828; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.cover-watermark { color: #a9c5db; background: rgba(5, 18, 31, 0.72); border: 1px solid rgba(99, 230, 255, 0.16); }
.preview-note { color: var(--soft); }
.detail-sidebar h1 { color: var(--ink); }
.detail-description { color: var(--muted); }
.detail-divider { background: var(--line); }
.detail-info-card { background: #07111f; border: 1px solid var(--line); }
.detail-info-card div { background: #0d1b2c; }
.detail-info-card span { color: var(--soft); }
.detail-info-card strong { color: var(--ink); }
.detail-info-card .detail-price { color: var(--red); }
.detail-share-row { color: var(--muted); }
.detail-share-row button, .detail-legal-row button { color: #88a6c0; background: #12283f; }
.detail-share-row button:hover { color: var(--red); background: #183b5b; }
.detail-legal-row { border-top-color: var(--line); }
.detail-legal-row button { background: transparent; }
.related-heading h2 { color: var(--ink); }

.modal-backdrop { background: rgba(1, 8, 17, 0.72); }
.modal { border: 1px solid var(--line-strong); background: #0d1b2c; }
.modal-close { color: #9eb6ca; background: #12283f; }
.modal-close:hover { color: var(--red); background: #183b5b; }
.payment-modal { border: 1px solid var(--line-strong); background: #0d1b2c; }
.payment-header { background: linear-gradient(135deg, #112b46, #0d1b2c); border-bottom-color: var(--line); }
.wechat-brand { color: var(--ink); }
.payment-close { color: #8ba8c0; }
.payment-body h2 { color: var(--ink); }
.payment-product, .payment-hint { color: var(--muted); }
.payment-order { border-top-color: var(--line); color: #7e9bb5; }
.download-success h2 { color: var(--ink); }
.download-success > p { color: var(--muted); }
.success-file { border-color: var(--line); background: #0a1727; color: #9fb6ca; }
.baidu-link-box { border-color: #254764; background: #0a1b2e; }
.baidu-link-box label, .baidu-link-box small { color: #7898b4; }
.baidu-link-row input { border-color: var(--line-strong); color: #c7d8e8; background: #07111f; }
.download-success small { color: var(--soft); }
.account-modal, .submit-modal, .purchase-modal { color: var(--ink); }
.account-header { border-bottom-color: var(--line); }
.account-header small, .account-note { color: var(--muted); }
.account-menu button { border-color: var(--line); color: #9bb4ca; background: #0a1727; }
.account-menu button:hover { color: var(--ink); border-color: var(--red); background: #102a43; }
.account-menu svg { color: var(--red); }

.mobile-nav { grid-template-columns: repeat(3, 1fr); border-top-color: var(--line); background: rgba(7, 17, 31, 0.94); }
.mobile-nav button { color: #7692ad; }
.mobile-nav button.is-active { color: var(--red); }

@media (max-width: 820px) {
  .topbar { background: rgba(7, 17, 31, 0.94); }
  .brand-mark { width: 34px; height: 34px; }
  .brand-mark img { width: 30px; height: 30px; }
  main { padding-top: 35px; }
  .workspace-head { margin-bottom: 0; }
  .resource-card { padding: 6px; }
  .card-info { padding-left: 3px; padding-right: 3px; }
}

/* DSPARK minimal white visual system */
:root {
  --canvas: #fbfcfe;
  --paper: #ffffff;
  --ink: #172033;
  --muted: #697487;
  --soft: #9aa5b5;
  --line: #e8edf3;
  --line-strong: #d7e0ea;
  --red: #2478f0;
  --red-dark: #1260d3;
  --red-soft: #eef5ff;
  --green: #32a879;
  --shadow: 0 18px 48px rgba(23, 32, 51, 0.08);
}

body {
  color: var(--ink);
  background: #fbfcfe;
  background-image: none;
}

.topbar {
  border-bottom-color: #edf0f4;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 22px rgba(23, 32, 51, 0.035);
}
.brand { color: var(--ink); }
.brand-mark {
  border-color: #dce9f7;
  background: transparent;
  box-shadow: none;
}
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand strong { color: #172033; }
.brand small { color: #9aa5b5; }
.nav-link { color: #6f7b8d; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after { background: var(--red); box-shadow: none; }
.icon-button, .view-button { color: #728096; }
.icon-button:hover, .view-button:hover { background: #f4f7fb; }
.account-button { color: var(--ink); }
.account-button > svg { color: #9aa5b5; }
.avatar { color: #fff; background: linear-gradient(135deg, #65b7ff, #2478f0); box-shadow: none; }
.account-copy small { color: var(--red); }

main { padding-top: 58px; }
.workspace-head {
  align-items: flex-start;
  gap: 24px;
}
.heading-copy {
  max-width: 980px;
}
.eyebrow { color: var(--red); }
.workspace-head h1 {
  color: var(--ink);
  font-size: clamp(30px, 2.8vw, 46px);
  line-height: 1.22;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.workspace-head h1 em {
  color: inherit;
  font-style: normal;
  text-shadow: none;
}
.workspace-head .heading-description {
  margin-top: 18px;
  max-width: 900px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}
.search-box {
  border-color: var(--line-strong);
  background: var(--paper);
  box-shadow: none;
}
.search-box:focus-within { border-color: #8db9f5; box-shadow: 0 0 0 3px rgba(36, 120, 240, 0.09); }
.search-box input { color: var(--ink); }
.search-box input::placeholder { color: #a7b0bd; }
kbd { color: #8e9aaa; border-color: var(--line); background: #fafbfd; }
.content-layout { margin-top: 32px; }
.toolbar { border-bottom-color: var(--line); }
.segmented-control { border-color: var(--line); background: #f6f8fb; }
.sort-tab { color: #8b96a6; }
.sort-tab:hover, .sort-tab.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 4px rgba(23, 32, 51, 0.08); }
.view-button.is-active { color: var(--red); background: #edf4ff; }
.resource-grid { gap: 27px 19px; }
.resource-card {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.035);
}
.resource-card:hover {
  border-color: #b9d4f6;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(23, 32, 51, 0.09);
}
.cover { cursor: pointer; }
.cover:focus-visible { outline: 3px solid rgba(36, 120, 240, 0.25); outline-offset: -3px; }
.card-overlay { border-radius: 8px; }
.card-badge { color: #67758a; background: rgba(255, 255, 255, 0.94); border-color: #e3eaf2; }
.card-badge.paid { color: #2478f0; background: #eef5ff; border-color: #d5e7ff; }
.card-badge.free { color: #258c65; background: #e9f8f1; border-color: #d3f0e3; }
.card-info { padding: 13px 13px 15px; }
.card-title { color: var(--ink); }
.card-title:hover { color: var(--red); }
.card-meta { color: #8d98a7; }
.price { color: var(--red); }
.load-more { color: #9aa5b5; }
.load-more-button { border-color: var(--line-strong); color: #637187; background: #fff; }
.load-more-button:hover { border-color: var(--red); color: var(--red); }
.empty-state h2 { color: var(--ink); }
.empty-state p { color: var(--muted); }
.secondary-button { color: var(--ink); border-color: var(--line-strong); background: #fff; }
.secondary-button:hover { border-color: var(--red); }

.detail-page { color: var(--ink); }
.detail-breadcrumb { color: #9aa5b5; }
.back-button { color: #68768a; }
.back-button:hover { color: var(--red); }
.detail-cover-shell { border-color: var(--line); background: #f4f7fa; box-shadow: 0 16px 36px rgba(23, 32, 51, 0.06); }
.cover-watermark { color: rgba(255, 255, 255, 0.92); background: rgba(23, 32, 51, 0.55); border: 0; }
.preview-note { color: #9aa5b5; }
.detail-sidebar h1 { color: var(--ink); }
.detail-description { color: var(--muted); }
.detail-divider { background: var(--line); }
.detail-info-card { background: #f7f9fc; border-color: var(--line); }
.detail-info-card div { background: #fff; }
.detail-info-card span { color: #9aa5b5; }
.detail-info-card strong { color: var(--ink); }
.detail-info-card .detail-price { color: var(--red); }
.detail-share-row { color: var(--muted); }
.detail-share-row button, .detail-legal-row button { color: #768398; background: #f2f5f8; }
.detail-share-row button:hover { color: var(--red); background: #eaf3ff; }
.detail-legal-row { border-top-color: var(--line); }
.detail-legal-row button { background: transparent; }
.related-heading h2 { color: var(--ink); }

.modal-backdrop { background: rgba(23, 32, 51, 0.32); }
.modal { border-color: var(--line); background: #fff; }
.modal-close { color: #7f8a9a; background: #f3f6f9; }
.modal-close:hover { color: var(--red); background: #eaf3ff; }
.payment-modal { border-color: var(--line); background: #fff; }
.payment-header { background: linear-gradient(135deg, #f5f9ff, #fff); border-bottom-color: var(--line); }
.wechat-brand { color: var(--ink); }
.payment-close { color: #8b97a8; }
.payment-body h2 { color: var(--ink); }
.payment-product, .payment-hint { color: var(--muted); }
.payment-order { border-top-color: var(--line); color: #8b97a8; }
.download-success h2 { color: var(--ink); }
.download-success > p { color: var(--muted); }
.success-file { border-color: var(--line); background: #fafbfd; color: #647287; }
.baidu-link-box { border-color: #dbe8f8; background: #f5f9ff; }
.baidu-link-box label, .baidu-link-box small { color: #7a8aa0; }
.baidu-link-row input { border-color: var(--line-strong); color: #5f6d80; background: #fff; }
.download-success small { color: #9aa5b5; }
.account-header { border-bottom-color: var(--line); }
.account-header small, .account-note { color: var(--muted); }
.account-menu button { border-color: var(--line); color: #68768a; background: #fafbfd; }
.account-menu button:hover { color: var(--ink); border-color: #b9d4f6; background: #f5f9ff; }
.account-menu svg { color: var(--red); }

.mobile-nav { border-top-color: var(--line); background: rgba(255, 255, 255, 0.96); }
.mobile-nav button { color: #8995a6; }
.mobile-nav button.is-active { color: var(--red); }

.site-footer {
  margin-top: 42px;
  padding: 16px 17px 24px;
  font-size: 10px;
}

@media (max-width: 820px) {
  .topbar { background: rgba(255, 255, 255, 0.97); }
}

/* MVP data/API additions */
.loading-state {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: #fff;
  font-size: 13px;
}

.loading-state.error {
  color: #b9424c;
  background: #fff7f8;
  border-color: #f1c5ca;
}

.detail-image-stack {
  display: grid;
  gap: 18px;
}

.detail-image-stack .detail-cover-shell {
  min-height: auto;
}

.detail-image-stack .detail-cover-image {
  max-height: none;
}

.baidu-link-box .extract-label {
  margin-top: 11px;
}

#baiduExtractCode {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: #5f6d80;
  background: #fff;
  font: 10px "DM Mono", monospace;
}

@media (max-width: 820px) {
  .detail-image-stack { gap: 12px; }
}

/* Final frontend surface adjustments */
:root {
  --canvas: #ffffff;
  --paper: #ffffff;
  --red: #000000;
  --red-dark: #222222;
  --red-soft: #f4f4f4;
}

body {
  background: #ffffff;
  background-image: none;
}

.topbar {
  height: 64px;
  background: #ffffff;
  backdrop-filter: none;
}

.brand-mark {
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nav-link.is-active::after {
  bottom: -19px;
}

.workspace-head {
  justify-content: center;
  text-align: center;
}

.heading-copy {
  margin: 0 auto;
}

.workspace-head .heading-description {
  margin-left: auto;
  margin-right: auto;
}

.content-layout {
  margin-top: 74px;
}

.resource-grid {
  margin-top: 0;
}

.mobile-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .content-layout {
    margin-top: 46px;
  }

  .resource-grid {
    margin-top: 0;
  }
}

/* Final typography, button, avatar, and resource-card adjustments */
.brand strong {
  font-family: "Songti SC", "STSong", "SimSun", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.avatar,
.account-avatar-large {
  color: #fff;
  background: #000;
}

.card-badge,
.card-meta {
  display: none;
}

.card-info {
  padding-top: 12px;
  padding-bottom: 15px;
}

.primary-button,
.download-button,
.copy-link-button,
.payment-success-button,
.submit-button,
.secondary-button,
.load-more-button,
.filter-button,
.bookmark-button,
.bookmark-button.is-saved,
.account-menu button,
.plan-button,
.featured .plan-button,
.detail-share-row button,
.detail-legal-row button,
.history-delivery-button {
  color: #fff;
  border-color: #000;
  background: #000;
}

.primary-button:hover,
.download-button:hover,
.copy-link-button:hover,
.payment-success-button:hover,
.submit-button:hover,
.secondary-button:hover,
.load-more-button:hover,
.filter-button:hover,
.bookmark-button:hover,
.bookmark-button.is-saved:hover,
.account-menu button:hover,
.plan-button:hover,
.featured .plan-button:hover,
.detail-share-row button:hover,
.detail-legal-row button:hover,
.history-delivery-button:hover {
  color: #fff;
  border-color: #222;
  background: #222;
}

.filter-choice,
.sort-tab {
  color: #111;
  border-color: #000;
}

.filter-choice.is-active,
.sort-tab.is-active {
  color: #fff;
  border-color: #000;
  background: #000;
  box-shadow: none;
}

.view-button.is-active {
  color: #fff;
  background: #000;
}

.account-menu button:last-child,
.account-menu button:last-child svg {
  color: #fff;
}

.download-success .primary-button,
.detail-download-button,
.copy-link-button,
.payment-success-button,
.bookmark-button.is-saved,
.filter-choice.is-active,
.plan-button,
.featured .plan-button,
.detail-share-row button,
.detail-legal-row button,
.history-delivery-button {
  color: #fff;
  border-color: #000;
  background: #000;
  box-shadow: none;
}

.download-success .primary-button:hover,
.detail-download-button:hover,
.copy-link-button:hover,
.payment-success-button:hover,
.bookmark-button.is-saved:hover,
.filter-choice.is-active:hover,
.plan-button:hover,
.featured .plan-button:hover,
.detail-share-row button:hover,
.detail-legal-row button:hover,
.history-delivery-button:hover {
  color: #fff;
  border-color: #222;
  background: #222;
}

.payment-waiting {
  width: 100%;
  min-height: 43px;
  margin-top: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #111;
  background: #f6f7f9;
  font-size: 12px;
}

.payment-waiting svg {
  width: 16px;
  animation: spin 1s linear infinite;
}

.primary-button svg,
.download-button svg,
.copy-link-button svg,
.payment-success-button svg,
.submit-button svg,
.secondary-button svg,
.load-more-button svg,
.filter-button svg,
.bookmark-button svg,
.account-menu button svg,
.plan-button svg {
  color: currentColor;
}

.bookmark-button,
.bookmark-button.is-saved {
  color: #111;
  border-color: var(--line-strong);
  background: #fff;
  box-shadow: none;
}

.bookmark-button:hover,
.bookmark-button.is-saved:hover {
  color: #000;
  border-color: #cbd5e1;
  background: #f6f7f9;
}

.detail-share-row button {
  color: #111;
  border: 0;
  background: #f4f5f7;
}

.detail-share-row button:hover {
  color: #000;
  background: #e9edf2;
}

.detail-legal-row button,
.detail-legal-row button:hover {
  color: #111;
  border: 0;
  background: transparent;
}

.detail-legal-row button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Customer service floating widget */
.customer-service-float {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 36;
  transform: translateY(-50%);
}

.service-trigger {
  width: 62px;
  min-height: 84px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  padding: 12px 0 10px;
  display: grid;
  place-items: center;
  gap: 6px;
  color: #161616;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.service-trigger svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

.service-popover {
  position: absolute;
  right: 58px;
  top: 50%;
  width: 244px;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.customer-service-float:hover .service-popover,
.customer-service-float:focus-within .service-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}

.service-popover h2,
.service-popover h3 {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  font-weight: 400;
}

.service-popover h2 {
  font-size: 14px;
}

.service-popover h3 {
  margin-top: 24px;
  font-size: 14px;
}

.service-qr-card {
  width: 150px;
  height: 150px;
  margin: 20px auto 12px;
  padding: 8px;
  border-radius: 7px;
  background: #fff;
}

.service-qr-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.service-popover p {
  margin: 0;
  color: #b0b6c0;
  font-size: 11px;
  line-height: 1.7;
}

.service-popover a {
  display: inline-block;
  margin-top: 16px;
  color: #ff3434;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}

.service-popover a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 820px) {
  .customer-service-float {
    right: 12px;
    top: auto;
    bottom: 78px;
    transform: none;
  }

  .service-trigger {
    width: 50px;
    min-height: 50px;
    border-right: 1px solid var(--line);
    border-radius: 50%;
    padding: 0;
  }

  .service-trigger span {
    display: none;
  }

  .service-trigger svg {
    width: 22px;
    height: 22px;
  }

  .service-popover {
    right: 0;
    top: auto;
    bottom: 60px;
    width: min(244px, calc(100vw - 32px));
    transform: translateY(8px);
  }

  .customer-service-float:hover .service-popover,
  .customer-service-float:focus-within .service-popover {
    transform: translateY(0);
  }
}