.language-switcher { display:flex; align-items:center; gap:4px; padding:3px; border:1px solid color-mix(in srgb, var(--line, #59616e) 70%, transparent); border-radius:999px; background:color-mix(in srgb, var(--surface, #1b1f27) 82%, transparent); }
.language-button { min-height:44px; padding:0 11px; border:0; border-radius:999px; color:var(--muted, #b9c1ce); background:transparent; font:inherit; font-size:.78rem; font-weight:800; letter-spacing:.01em; cursor:pointer; }
.language-button[aria-pressed="true"] { color:#171717; background:var(--gold, #d9ba82); }
.language-button:focus-visible { outline:2px solid var(--accent, #8ba7ff); outline-offset:2px; }
.systems-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 20px; }
.system-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.system-card { display:flex; flex-direction:column; gap:12px; min-height:220px; padding:22px; border:1px solid color-mix(in srgb,var(--gold,#d9ba82) 38%,var(--line,#59616e)); border-radius:16px; background:linear-gradient(150deg,color-mix(in srgb,var(--surface,#1b1f27) 95%,#000),var(--surface,#1b1f27)); box-shadow:0 12px 32px #0003; color:inherit; text-decoration:none; }
.system-card:hover { border-color:var(--gold,#d9ba82); transform:translateY(-2px); }
.system-card h2,.system-detail-head h1 { margin:0; color:var(--gold,#d9ba82); font-family:Georgia,"Times New Roman",serif; }
.system-card p { margin:0; color:var(--muted,#b9c1ce); line-height:1.6; }
.system-status { align-self:flex-start; padding:4px 9px; border:1px solid color-mix(in srgb,var(--gold,#d9ba82) 55%,transparent); border-radius:999px; color:var(--gold,#d9ba82); font-size:.75rem; font-weight:800; }
.system-meta { margin-top:auto; color:var(--muted,#b9c1ce); font-size:.82rem; }
.system-detail { max-width:880px; }
.system-detail-head { padding-bottom:22px; border-bottom:1px solid var(--line,#59616e); }
.system-detail-head p,.system-sections p { color:var(--muted,#b9c1ce); line-height:1.7; }
.system-sections { display:grid; gap:16px; margin-top:22px; }
.system-sections > * { padding:18px; border:1px solid var(--line,#59616e); border-radius:12px; background:color-mix(in srgb,var(--surface,#1b1f27) 92%,transparent); }
.system-back { display:inline-flex; min-height:44px; align-items:center; margin-bottom:20px; color:var(--gold,#d9ba82); }
.system-empty { padding:36px; border:1px dashed var(--line,#59616e); border-radius:14px; color:var(--muted,#b9c1ce); text-align:center; }
html[lang="en"] body.art-hub .hero-brand { max-width:calc(100vw - 32px); font-family:Georgia,"Times New Roman",serif; font-size:clamp(62px,7vw,82px); letter-spacing:.015em; }
.language-switcher { background:color-mix(in srgb, var(--paper, #1b1f27) 82%, transparent); }
.system-card { background:linear-gradient(150deg,color-mix(in srgb,var(--paper,#1b1f27) 95%,#000),var(--paper,#1b1f27)); }
.system-card strong { color:var(--ink,#f4f4f5); font-size:1rem; }
.system-card small,.system-card em { color:var(--muted,#b9c1ce); font-size:.84rem; font-style:normal; }
.system-card strong,.system-card small { display:block; }
.system-card small { margin-top:3px; line-height:1.45; }
.system-card em { display:inline-block; margin:3px 0 0; }
.system-card span { min-width:0; overflow-wrap:anywhere; }
html[lang="zh-CN"] { word-break:normal; }
.system-detail, .system-detail article, .system-sections > * { min-width:0; overflow-wrap:anywhere; }
.system-sections { grid-template-columns:minmax(0,1fr); }
.system-sections > * { background:color-mix(in srgb,var(--paper-2,#242830) 92%,transparent); }
.system-detail h2 { margin:0 0 8px; color:var(--gold,#d9ba82); font-family:Georgia,"Times New Roman",serif; font-size:1.15rem; }
.system-detail ul { margin:10px 0 0; padding-left:1.2rem; color:var(--muted,#b9c1ce); }
.system-detail li { margin:6px 0; }
@media (max-width:760px) { .site-header,.header-main { height:auto; } #main-nav { top:100%; } }
@media (max-width:520px) { .header-actions { flex-basis:100%; justify-content:space-between; } }
@media (min-width:761px) and (max-width:940px) { #main-nav { gap:0; } #main-nav a { padding-inline:5px; font-size:12px; } .language-button { padding-inline:7px; font-size:.72rem; } .header-main { gap:10px; } }
@media (max-width: 520px) { .header-actions { margin-left:auto; } .local-badge { display:none; } }
@media (max-width: 760px) { .header-main { flex-wrap:wrap; min-height:auto; padding-block:8px; } #main-nav { order:3; width:100%; flex-wrap:wrap; justify-content:center; } .header-actions { flex-wrap:wrap; justify-content:flex-end; } .systems-toolbar { align-items:stretch; flex-direction:column; } .systems-toolbar .tool-search { width:100%; } }
@media (max-width: 360px) { .brand { gap:0; font-size:17px; } body.art-hub .brand-mark, .brand small { display:none; } .header-main { gap:4px; } .header-actions { gap:0; } .language-switcher { gap:0; padding:2px; } .language-button { min-height:44px; min-width:44px; padding-inline:5px; font-size:12px; } html[lang="en"] body.art-hub .hero-brand { font-size:44px; letter-spacing:.01em; } }