*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}a{color:#0066cc;text-decoration:none}.container{max-width:1200px;margin:0;padding:20px}@media(max-width:768px){.container{padding:16px}}

:root{
    --surface-body:#f7f7f8;
    --surface-panel:#ffffff;
    --surface-muted:#f4f5f7;
    --surface-header:#ffffff;
    --surface-footer:#f9f7f2;
    --surface-card:#ffffff;
    --border-default:#e5e5e5;
    --text-color:#1f1f1f;
    --text-muted:#555555;
}

html.dark-mode{
    --surface-body:#101113;
    --surface-panel:#16171a;
    --surface-muted:#1e1f23;
    --surface-header:#151619;
    --surface-footer:#151619;
    --surface-card:#1b1c20;
    --border-default:#2b2c31;
    --text-color:#f2f3f5;
    --text-muted:#9da0aa;
}

body{
    background:var(--surface-body);
    color:var(--text-color);
}
.site-header{border-bottom:1px solid var(--border-default);background:var(--surface-header)}.site-header .container{display:flex;gap:16px;align-items:center;justify-content:space-between}.brand{font-weight:600;color:var(--text-color)}.site-footer{border-top:1px solid var(--border-default);background:var(--surface-footer);margin-top:40px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.card{border:1px solid var(--border-default);border-radius:0;padding:12px;background:var(--surface-card)}.card-title{font-weight:600;margin-bottom:8px;color:var(--text-color)}.card-price{color:var(--text-color);margin-bottom:8px}.btn{display:inline-block;background:#111;color:#fff;padding:8px 12px;border-radius:0}

/* 强制移动端也使用设定字体，并优化渲染 */
html{
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body,input,button,select,textarea{
  font-family:inherit !important;
}

/* Theme Switch */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}
.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 0;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 0;
}
input:checked + .slider {
  background-color: var(--theme-primary, #2196F3);
}
input:checked + .slider:before {
  transform: translateX(22px);
}

/* Dark Mode Overrides */
html.dark-mode body {
    background-color: var(--surface-body);
    color: var(--text-color);
}
html.dark-mode .site-header {
    background-color: var(--surface-header);
    border-bottom-color: var(--border-default);
}
html.dark-mode .brand a {
    color: var(--text-color) !important;
}
html.dark-mode .menu-toggle {
    color: var(--text-color);
}
html.dark-mode .menu-toggle:hover {
    background-color: var(--surface-muted);
}
html.dark-mode .site-footer {
    background: var(--surface-footer);
    border-top-color: var(--border-default);
}
html.dark-mode .footer-links a {
    color: var(--text-muted);
}
html.dark-mode .footer-links a:hover {
    color: var(--theme-primary, #66b3ff);
}
html.dark-mode .footer-divider {
    color: var(--text-muted);
}
html.dark-mode .footer-copyright {
    color: var(--text-muted);
}
html.dark-mode .card {
    background-color: var(--surface-card);
    border-color: var(--border-default);
}
html.dark-mode .card-price {
    color: var(--text-color);
}
html.dark-mode .drawer-menu {
    background-color: var(--surface-panel);
    box-shadow: -2px 0 8px rgba(0,0,0,0.5);
}
html.dark-mode .drawer-header {
    border-bottom-color: var(--border-default);
}
html.dark-mode .drawer-header h3 {
    color: var(--text-color);
}
html.dark-mode .close-btn {
    color: var(--text-muted);
}
html.dark-mode .close-btn:hover {
    color: var(--text-color);
}
html.dark-mode .drawer-nav a {
    color: var(--text-color);
    border-bottom-color: var(--border-default);
}
html.dark-mode .drawer-nav a:hover {
    background-color: var(--surface-muted);
}
html.dark-mode .drawer-settings {
    border-top-color: var(--border-default);
}
html.dark-mode .setting-group h4 {
    color: var(--text-muted);
}
html.dark-mode .option-btn {
    background-color: var(--surface-muted);
    color: var(--text-color);
    border-color: var(--border-default);
}
html.dark-mode .option-btn:hover {
    background-color: var(--surface-panel);
}
html.dark-mode .setting-group > div[style*="background: #f8f9fa"] {
    background-color: var(--surface-muted) !important;
    border-color: var(--border-default) !important;
}
html.dark-mode .setting-group span {
    color: var(--text-color) !important;
}
/* Index/Catalog specific dark mode */
html.dark-mode .search-input {
    background-color: var(--surface-panel);
    border-color: var(--border-default);
    color: var(--text-color);
}
html.dark-mode .masonry-content {
    background-color: var(--surface-panel);
}
html.dark-mode .masonry-title {
    color: var(--text-color);
}
html.dark-mode .masonry-meta {
    color: var(--text-muted);
}
html.dark-mode .masonry-context-menu {
    background-color: var(--surface-panel) !important;
    border-color: var(--border-default) !important;
    color: var(--text-color);
}
html.dark-mode .masonry-context-menu-item:hover {
    background-color: var(--surface-muted) !important;
}
html.dark-mode #end-of-list {
    color: var(--text-muted) !important;
}
html.dark-mode .product-card {
    background-color: var(--surface-card);
    border-color: var(--border-default);
}
html.dark-mode .product-title {
    color: var(--text-color);
}
html.dark-mode .product-meta {
    color: var(--text-muted);
}
html.dark-mode .tag-filter {
    background-color: var(--surface-muted);
    color: var(--text-color);
    border-color: var(--border-default);
}
html.dark-mode .tag-filter:hover, html.dark-mode .tag-filter.active {
    background-color: var(--theme-primary, #0066cc);
    color: #fff;
}
html.dark-mode .filter-select {
    background-color: var(--surface-panel);
    color: var(--text-color);
    border-color: var(--border-default);
}
html.dark-mode .product-context-menu {
    background-color: var(--surface-panel) !important;
    border-color: var(--border-default) !important;
    color: var(--text-color);
}
html.dark-mode .product-context-menu-item:hover {
    background-color: var(--surface-muted) !important;
}
/* Work page dark mode */
html.dark-mode .product-info-section {
    background-color: var(--surface-panel);
}
html.dark-mode .product-description {
    color: var(--text-color);
}
html.dark-mode .meta-item {
    background-color: var(--surface-muted);
    color: var(--text-color);
}
html.dark-mode .meta-item strong {
    color: var(--text-muted);
}
html.dark-mode .license-card {
    background-color: var(--surface-muted);
    border-color: var(--border-default);
}
html.dark-mode .license-card:hover {
    border-color: var(--theme-primary, #0066cc);
}
html.dark-mode .license-name {
    color: var(--text-color);
}
html.dark-mode .license-desc {
    color: var(--text-muted);
}
html.dark-mode .bundle-info-section {
    background-color: var(--surface-panel);
    border-color: var(--border-default);
}
html.dark-mode .bundle-title {
    color: var(--text-color);
}
html.dark-mode .bundle-description {
    color: var(--text-color);
}
html.dark-mode .bundle-product-tag {
    background-color: var(--surface-muted);
    border-color: var(--border-default);
    color: var(--text-color);
}
html.dark-mode .bundle-requirement {
    background-color: var(--surface-muted);
    color: var(--text-color);
}
html.dark-mode .purchase-header {
    color: var(--text-color);
}
html.dark-mode .purchase-price-currency {
    color: var(--text-muted) !important;
}
html.dark-mode .back-link {
    color: var(--text-muted);
}
html.dark-mode .back-link:hover {
    color: var(--theme-primary, #0066cc);
}