/* Shared presentation layer for the public workbench. */
:root {
  --green: #17664d;
  --lime: #d9ed9b;
  --muted: #74817e;
  --line: #dde4e1;
  --amber: #a96b23;
  --ink: #202e2b;
  --surface: #ffffff;
  --canvas: #f3f6f5;
  --accent-soft: #edf5ef;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
html { scroll-padding-top: 28px; }
body { background: var(--canvas); color: var(--ink); font-size: 14px; line-height: 1.6; }
body, button, input, select, textarea, h1, h2, h3, p, a, span { letter-spacing: 0; }
button, input, select, textarea { font-family: inherit; }
::selection { background: #d9ed9b; color: #1d3026; }
button:disabled { cursor: not-allowed; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid #16846a; outline-offset: 4px; }
input[type="checkbox"], progress { accent-color: var(--green); }

/* The navigation remains visually quiet while the selected destination leads. */
.sidebar { width: 224px; padding: 28px 18px 20px; background: #15251f; border-right: 1px solid #2d3d35; }
.brand { gap: 12px; color: #f5f8ef; font-size: 23px; line-height: 1.35; }
.brand-mark { width: 42px; height: 44px; border: 1px solid #849c6d; border-radius: 4px; color: #ddeda8; transform: none; font-size: 32px; background: #ffffff04; }
.brand-sub { font-size: 10px; color: #a6b6a8; margin-top: 4px; }
.side-caption { margin: 24px 0 20px; padding-left: 0; border: 0; font-size: 10px; color: #8a9d8f; }
.sidebar nav { position: relative; isolation: isolate; gap: 5px; flex-shrink: 0; }
.nav-item { position: relative; z-index: 1; min-height: 45px; padding: 12px; gap: 12px; border-radius: 5px; font-size: 13px; color: #a6b5ac; background: transparent; }
.nav-icon { width: 20px; display: flex; align-items: center; justify-content: center; color: #91a795; }
.nav-icon svg { width: 20px; height: 20px; }
.nav-item:hover { color: #eef4e7; background: #ffffff08; }
.nav-item.active { color: #223522; background: var(--lime); box-shadow: none; }
.nav-item.active .nav-icon { color: #3a5731; }
.nav-item.active::before { display: none; }
.nav-index { font: 10px "Consolas", monospace; color: #819385; opacity: .75; }
.nav-item.active .nav-index { color: #587044; }
.sidebar-bottom { padding-top: 26px; border-top: 1px solid #ffffff0c; margin-top: auto; }
.online { color: #b8cdb1; font-size: 10px; }
.online i { background: #c5df89; width: 5px; height: 5px; }
.sidebar-bottom p { font-size: 11px; color: #7e9585; margin: 12px 0 0; }
.app-shell { margin-left: 224px; }
.topbar { height: 64px; padding: 0 36px; background: #ffffffd9; color: #53625e; border-bottom: 1px solid var(--line); }
.topbar .muted { color: #8c9894; }
.topbar #breadcrumb { color: #253e34; font-weight: 600; }
.topbar .slash { color: #bfc9c5; margin: 0 13px; }
.phase-label { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 0; background: none; color: #7b8882; padding: 0; font-size: 11px; }
.phase-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #79a58a; }
main { max-width: 1540px; padding: 30px 36px 0; }

/* Compact section headings leave space for the working surface. */
.page :is(.hero, .archive-hero) { min-height: 0; padding: 0 0 24px; margin: 0 0 24px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); gap: 24px; overflow: visible; }
.page .archive-hero::after { display: none; }
.page :is(.hero, .archive-hero) h1 { font-size: 30px; font-weight: 700; line-height: 1.4; color: #22392f; margin: 7px 0 8px; }
.page :is(.hero, .archive-hero) p { font-size: 13px; color: #74817b; line-height: 1.8; margin: 0; max-width: 680px; }
.eyebrow, .page :is(.hero, .archive-hero) .eyebrow { font: 10px/1.6 "Segoe UI", "Microsoft YaHei", sans-serif; color: #81928a; }
.hero-stamp { padding: 0 0 0 20px; margin: 0; border: 0; border-left: 1px solid var(--line); color: #839689; transform: none; gap: 20px; }
.hero-stamp > span:first-child { font-size: 10px; line-height: 1.85; }
.hero-stamp .stamp-cross { font-size: 32px; color: #a7b79b; }
.hero-tag { color: #8c9c90; font-size: 11px; }
.archive-emblem { min-width: 110px; font-size: 42px; color: #91a987; padding-left: 24px; border-left: 1px solid var(--line); }
.archive-emblem small { font-size: 9px; color: #8b9d8f; margin-top: 6px; line-height: 1.6; }
.archive-hero-links { gap: 18px; margin-top: 13px; font-size: 11px; }
.archive-hero-links a, .archive-hero-links span { color: #678575; }
.archive-hero-links a:hover { color: #17664d; }

.free-access-notice { background: #eaf3ee; border: 1px solid #d1e2d8; border-left: 3px solid #46876a; padding: 13px 16px; margin: 0 0 26px; border-radius: 4px; gap: 12px; }
.free-access-icon { flex-basis: 32px; height: 34px; border: 0; background: #d9eadf; color: #387450; border-radius: 4px; }
.free-access-icon svg { width: 21px; height: 21px; }
.free-access-copy strong { color: #325840; font-size: 13px; }
.free-access-copy p { color: #6c8274; font-size: 11px; margin-top: 2px; }
.free-access-badge { color: #53705e; background: #ffffff70; border-color: #cddfd3; border-radius: 3px; font-size: 10px; }
.home-passwords { padding: 0 0 23px; margin: 0 0 26px; background: transparent; border: 0; border-bottom: 1px solid var(--line); overflow: visible; }
.home-passwords::before { display: none; }
.home-password-heading { margin-bottom: 14px; }
.home-password-heading .eyebrow { font-size: 9px; color: #87978a; }
.home-password-heading h2 { font-size: 20px; color: #293f34; margin-top: 3px; gap: 12px; }
.home-password-heading h2 > span { color: #819082; font-size: 11px; border-color: #d8e0d8; }
.home-password-actions { font-size: 10px; gap: 18px; }
.home-password-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.home-password-card { border: 1px solid #dce4dd; border-radius: 5px; background: #fff; padding: 13px 12px; }
.home-password-map { gap: 6px; }
.home-password-map strong { font-size: 12px; color: #43574a; }
.home-password-number { font-size: 9px; color: #a0ada3; }
.home-password-map > span:last-child { display: none; }
.home-password-bottom { margin-top: 14px; gap: 6px; }
.home-password-code { font-size: 23px; line-height: 31px; gap: 3px; color: #274e3d; }
.home-password-code > span { width: 21px; background: #edf3ed; border: 0; border-radius: 2px; color: #31523c; }
.home-password-copy { color: #94a498; font-size: 8px; }
.home-password-copy svg { width: 14px; height: 14px; }
.home-password-foot { margin-top: 11px; color: #93a095; font-size: 10px; }

/* Shared controls, tabs and dialogs. */
.panel, .plan-card, .real-card, .market-quote, .build-card, .archive-card { border-color: var(--line); border-radius: 6px; background-color: var(--surface); box-shadow: 0 2px 4px #1b382605; }
.panel-heading { margin-bottom: 20px; padding-bottom: 17px; border-color: #e5ebe7; gap: 10px; }
.panel-heading h2 { color: #344a3f; font-size: 16px; }
.step-number { background: #edf3ef; color: #6c8a70; border-radius: 3px; padding: 5px 7px; font-size: 10px; }
.field { color: #5c6e64; font-size: 12px; gap: 8px; }
.field :is(input, select, textarea), .archive-toolbar :is(input, select), .music-catalog-filters :is(input, select), .music-score-toolbar select { background: #fcfdfc; border: 1px solid #d9e2dc; border-radius: 4px; color: #354b3f; font-size: 13px; min-height: 40px; }
.field :is(input, select, textarea):focus { border-color: #68a78a; outline: 3px solid #2387630c; }
.field input[type="number"] { font-size: 17px; font-variant-numeric: tabular-nums; }
.field-hint { font-size: 11px; color: #8a978f; line-height: 1.7; }
.primary { min-height: 42px; background: #246447; border: 1px solid #246447; border-radius: 4px; color: #f3f7ec; font-size: 13px; padding: 10px 17px; box-shadow: 0 2px 3px #1b38260a; }
.primary:hover { background: #1a5039; border-color: #1a5039; }
.secondary { min-height: 40px; background: #fff; border-color: #d5dfd8; color: #4c6b54; border-radius: 4px; font-size: 12px; }
.secondary:hover { background: #f0f6ee; border-color: #a2b99f; }
.text-button { color: #587e5d; font-size: 12px; }
.text-button:hover { color: #1d5e3a; }
.segmented { background: #e9eeeb; border-radius: 5px; padding: 4px; gap: 4px; }
.segmented button { font-size: 12px; color: #7c8c80; padding: 8px 13px; border-radius: 3px; }
.segmented button.active { background: #fff; color: #32533c; box-shadow: 0 1px 4px #1a3e2910; }
:is(.archive-tabs, .music-studio-tabs, .gun-browse-tabs, .gun-ranking-tabs) { position: relative; isolation: isolate; border-bottom-color: #d9e3dc; }
.archive-tabs { scrollbar-width: none; }
.archive-tabs::-webkit-scrollbar { display: none; }
:is(.archive-tab, .music-studio-tabs button, .gun-browse-tabs button) { font-size: 13px; min-height: 46px; padding: 12px 17px; background-image: none; color: #7d8a81; }
:is(.archive-tab, .music-studio-tabs button, .gun-browse-tabs button).active { background: transparent; color: #2f583d; border-bottom-color: #5a8151; font-weight: 700; }
.archive-tab:hover, .music-studio-tabs button:hover { background: #e9f1e780; }
.plan-tabs button { border-radius: 4px; min-height: 40px; font-size: 12px; }
.plan-tabs button.active { background: #e7f0df; color: #476332; border-color: #cbdcc0; }
.result-heading h2 { font-size: 21px; color: #314b3b; }
.empty-state { background: #f8faf9; border-color: #dce5de; border-radius: 5px; }
.empty-state p { color: #7a8b7e; }
dialog { border: 1px solid #dce6df; border-radius: 8px; box-shadow: 0 24px 100px #102b2433; color: var(--ink); background: #fff; }
dialog::backdrop { background: #12231acc; backdrop-filter: blur(5px); }
.dialog-heading { border-color: #e4ebe6; margin-bottom: 20px; }
.dialog-heading h2 { font-size: 21px; color: #314e3b; }
.icon-button { border-radius: 4px; color: #7a9080; background: #f0f5f0; }
.icon-button:hover { background: #e3eddf; color: #345735; }
#toast { border-radius: 6px; box-shadow: 0 8px 32px #142a2029; background: #223e30; color: #eff6e9; padding: 12px 20px; font-size: 12px; }

/* Equipment, manufacture and market keep numeric information easy to compare. */
.real-banner { border-radius: 5px; background: #213a2b; border-color: #2f5038; padding: 16px 20px; }
.real-banner h2 { font-size: 19px; }
.real-banner p { color: #bdcdbf; }
.intel-brief { border-radius: 5px; padding: 25px 28px; min-height: 0; }
.intel-brief h2 { font-size: 24px; margin: 9px 0; }
.intel-section-tabs { border-bottom-color: var(--line); }
.intel-section-tabs > button.active { background: #eaf1e5; }
.loadout-tabs { gap: 10px; border: 0; }
.loadout-tabs button { border: 1px solid #dde5d9; border-radius: 5px; background: #fff; padding: 15px 18px; }
.loadout-tabs button[aria-selected="true"] { background: #e9f1de; border-color: #9bb97e; box-shadow: inset 3px 0 #739453; }
.live-signal { background: #eaf0e9; border-color: #d9e3d6; border-radius: 4px; }
.map-rule-note, .rule-summary, .recipe-summary { background: #f0f5ed; border-color: #dce7d6; border-radius: 4px; color: #6b8260; }
.knife-band-label { background: #fbfcfa; border-radius: 3px; }
.loadout-waiting { background: #f8faf7 !important; }
.kit-piece { background: #f7f9f5; border-color: #e1e8dc; border-radius: 4px; }
.kit-piece h3 { font-size: 13px; color: #4a6040; }
.kit-piece .kit-image { height: 104px; }
.kit-weapon .kit-image { height: 116px; }
.real-card-head b { color: #315c41; }
.profit-stat { border-radius: 5px; background: #fff; border-color: #dde6dd; }
.profit-stat.main { background: #254b36; border-color: #254b36; }
.profit-stat strong { font-variant-numeric: tabular-nums; }
.market-item { border-radius: 4px; border-color: #e2e8e1; }
.market-item.active { background: #eaf2e3; border-color: #afc599; }
.market-item-price, .market-range-stats strong { color: #33776c; }
.market-quote { padding: 22px; }
.market-chart-wrap { background: #fbfdfb; }
.market-pagination, .market-evidence, .calculation-note { color: #7e8d80; }

/* The gun library is an image-led catalogue with a compact ranking rail. */
#page-community .hero { padding-bottom: 20px; margin-bottom: 20px; }
#page-community .hero h1 { font-size: 28px; }
.community-intro { background: transparent; border: 0; padding: 0 0 12px; margin: 0; }
.gun-browse-panel { border-radius: 5px; border: 1px solid #dbe4dc; background: #f9fbf8; padding: 0 18px 14px; }
.gun-browse-options { gap: 6px; padding-top: 13px; }
.gun-filter-chip { min-height: 34px; padding: 6px 11px; border-radius: 3px; background: transparent; font-size: 12px; color: #7d8a78; }
.gun-filter-chip.active, .gun-filter-chip[aria-pressed="true"] { background: #dfeacb; color: #3d592d; }
.community-filters { margin-top: 12px; padding: 16px; background: #fff; border-color: #dce5dd; border-radius: 5px; gap: 12px; }
.gun-content-layout { gap: 22px; }
.gun-result-heading { margin: 23px 0 14px; }
.gun-result-heading h2 { color: #334d39; }
.gun-table-head { background: #e5ece4; color: #5e765b; font-size: 11px; min-height: 38px; }
.gun-overview-row { background: #fff; min-height: 126px; padding: 15px 17px; border-color: #e4eae2; }
.gun-overview-row:nth-child(odd) { background: #f8faf6; }
.gun-overview-row:hover, .gun-scheme-row:hover { background: #f0f6ea; }
.gun-weapon-cell { gap: 9px; }
.gun-weapon-cell strong { font-size: 14px; color: #364c37; }
.gun-row-picture { background: #edf2e8; border-color: #e4ebdd; border-radius: 4px; }
.gun-weapon-cell .gun-row-picture { height: 76px; }
.gun-row-picture img { padding: 6px 12px; }
.gun-coverage-cell > strong { color: #526f3e; }
.gun-scheme-row { background: #fff; border-color: #e3e9df; padding: 20px 17px; }
.gun-scheme-main h3 { color: #354f35; font-size: 16px; }
.gun-scheme-price strong { color: #3e7861; font-variant-numeric: tabular-nums; }
.gun-scheme-price > span { color: #97a18e; }
.gun-featured-intro { font-size: 12px; color: #73836b; line-height: 1.8; }
.gun-ranking { border-color: #d8e2d5; background: #f9fbf6; border-radius: 5px; top: 24px; }
.gun-ranking-heading { padding: 22px 18px 14px; }
.gun-ranking-heading h2 { font-size: 18px; color: #395435; }
.gun-ranking-heading > span { font-size: 26px; color: #b2c382; }
.gun-ranking-item { padding: 16px 2px; border-color: #e4eadb; }
.gun-rank-image { background: #edf3e4; border-radius: 3px; }
.gun-rank-copy strong { font-size: 12px; color: #4d6442; }
.gun-rank-number.rank-1 { color: #b0833e; }
.gun-rank-number { color: #a0ac92; font-style: normal; }
.gun-streamer-badge { border-radius: 3px; }

/* Content images, material cards and event walkthroughs share one rhythm. */
.archive-grid { gap: 18px; }
.archive-card { border-radius: 5px; overflow: hidden; background: #fff; }
.archive-picture { background: #edf2e9; height: 165px; }
.archive-picture img { height: 130px; }
.archive-card-body { padding: 17px; }
.archive-card h3 { font-size: 15px; }
.archive-card-body > p { color: #85927e; font-size: 12px; }
.archive-card-foot { border-color: #e6ece1; font-size: 10px; }
.archive-kind { border-radius: 2px; background: #e3ebd3ed; color: #7c8e65; }
.archive-toolbar { margin-bottom: 22px; }
.archive-source { color: #82917d; font-size: 12px; }
.archive-backup { border-color: #dce6d9; }
.asset-launcher { background: #edf3e9; border: 1px solid #d7e4ce; border-radius: 4px; padding: 18px 22px; margin-bottom: 22px; }
.asset-launcher-icon { background: #e0ecd3; border-color: #d0dfbd; border-radius: 4px; }
.asset-launcher-copy h2 { font-size: 18px; color: #3a5735; }
.asset-launcher-copy p { color: #7a8d6e; font-size: 12px; }
.asset-launcher-preview > * { border-radius: 3px; }
#page-tools .asset-launcher { padding: 15px 20px; gap: 15px; }
#page-tools .asset-launcher-icon { width: 42px; height: 44px; }
#page-tools .asset-launcher-icon svg { width: 25px; height: 25px; }
#page-tools .asset-launcher-copy > span { display: none; }
#page-tools .asset-launcher-copy h2 { margin: 0 0 3px; font-size: 16px; }
#page-tools .asset-launcher-preview { display: none; }
#page-tools .asset-launcher-end { gap: 6px; }
.event-card, .intel-card { border-radius: 5px; border-color: #dbe5d8; }
.event-detail-steps, .event-steps { gap: 22px; }
.card-overview { gap: 18px; }
.card-progress-panel { background: #244633; border-color: #244633; border-radius: 5px; }
.card-metric { background: #fff; border-color: #dce5d9; border-radius: 5px; }

/* Music has a clear selection area and a separate performance surface. */
.music-layout { gap: 24px; align-items: start; }
.music-console, .music-library { padding: 24px; }
.music-studio-tabs { margin-bottom: 24px; }
.music-studio-tabs button { padding-left: 12px; padding-right: 12px; }
.music-studio-heading { font-size: 23px; line-height: 1.5; color: #344e38; margin-top: 8px; }
.music-popular-list { margin-top: 22px; gap: 0; }
.music-popular-card { padding: 19px 0; border-color: #e3e9df; grid-template-columns: 30px minmax(0, 1fr) auto; }
.popular-number { font-size: 15px; color: #a3af93; }
.music-popular-card:first-child .popular-number { color: #af8849; }
.music-popular-card h3 { font-size: 16px; color: #395035; }
.popular-actions { gap: 8px; }
.popular-actions a { color: #8c9a7d; }
.popular-actions button { color: #476c3c; }
.music-catalog-filters { gap: 8px; }
.music-catalog-filters :is(input, select) { font-size: 11px; background: #fafcf8; }
.music-score-cards { gap: 10px; scrollbar-width: thin; scrollbar-color: #bdccaa transparent; }
.music-score-card { border-radius: 4px; background: #f7f9f3; border-color: #dee7d3; padding: 13px; }
.music-score-card.active { background: #e9f1dc; border-color: #b5c993; box-shadow: inset 3px 0 #74934a; }
.music-score-card strong { color: #526b3e; font-size: 13px; }
.music-score-card small { color: #97a485; }
.music-score-notes { gap: 7px; padding: 4px 0; }
.music-score-notes span { border-radius: 4px; background: #f5f8f0; border-color: #dce7cf; min-width: 44px; padding: 10px; }
.music-score-notes .current { background: #ddebba; border-color: #9eb76c; outline: 0; }
.music-practice-status { background: #edf3e5; border-radius: 4px; color: #7e9167; }
.music-keyboard { gap: 5px; }
.music-keyboard button { background: #fcfdf9; border-color: #d6e0c8; border-bottom-color: #b5c79a; border-radius: 0 0 5px 5px; }
.music-keyboard button.playing { background: #d2e8a2; }
.transcribe-drop { background: #f1f6ec; border-color: #b4c99d; border-radius: 5px; min-height: 100px; }
.transcribe-drop:focus-within { outline: 2px solid #5c925e; outline-offset: 3px; }
.music-conversion-note { color: #94a083; font-size: 11px; }
.wheel-main-mode { border-radius: 4px; }
.wheel-result-heading { border-color: #e1e8d9; }
.wheel-stage, .random-form { border-radius: 5px; }
.random-brief { border-bottom: 1px solid #dce5d5; background: transparent; padding: 0 0 20px; }
.dice-face { border-radius: 8px; background: #f7fbf1; border-color: #bbcda1; }
.fingerprint-board { border-color: #314b39; background: #1b3024; }
footer { border-color: #dce4df; color: #95a199; font-size: 11px; margin-top: 36px; padding: 24px 0; }

/* Supporting copy stays legible against the light working surface. */
.page :is(.hero, .archive-hero) p,
.field-hint, .gun-featured-intro, .archive-card-body > p,
.music-score-card small, .music-conversion-note,
.asset-launcher-copy p, .home-password-foot { color: #687b70; }

/* GSAP owns movement only after it is available; CSS remains the fallback. */
.nav-active-indicator, .motion-tab-indicator { display: none; position: absolute; pointer-events: none; left: 0; top: 0; }
.gsap-ready .nav-active-indicator { display: block; z-index: 0; background: var(--lime); border-radius: 5px; }
.gsap-ready .sidebar nav .nav-item.active, .gsap-ready .sidebar nav .nav-item.active:hover { background: transparent; }
.gsap-ready :is(.page.active, .tool-view.active, #music-mode-popular, #music-mode-convert, #music-mode-keyboard) { animation: none; }
.gsap-ready .motion-tab-indicator { display: block; height: 2px; top: auto; bottom: 0; background: #729457; transform-origin: left center; }
.gsap-ready :is(.archive-tab, .music-studio-tabs button, .gun-browse-tabs button, .gun-ranking-tabs button).active { border-bottom-color: transparent; }
.gsap-ready .gun-ranking-tabs button { background-image: none; }
.gsap-ready .gun-browse-tabs button.active::after { display: none; }
.gsap-ready :is(.nav-label, .nav-icon, .home-password-card, .archive-card, .build-card, .music-score-card, .music-popular-card h3, .gun-weapon-cell strong, .gun-scheme-main h3) { transition-property: color, background-color, border-color, box-shadow; }
.gsap-ready .sidebar nav :is(.nav-item:hover, .nav-item.active) :is(.nav-label, .nav-icon),
.gsap-ready :is(.home-password-card, .music-score-card, .archive-card, .build-card):hover { transform: none; }
.gsap-ready :is(.archive-card:hover h3, .build-card:hover h3, .music-popular-card:hover h3, .gun-overview-row:hover .gun-weapon-cell strong, .gun-scheme-row:hover h3) { transform: none; }

@media (min-width: 1381px) {
  .gun-content-main .gun-table-head, .gun-content-main .gun-overview-row { grid-template-columns: minmax(170px, .95fr) minmax(105px, .55fr) minmax(165px, 1fr) 94px; gap: 16px; }
  .gun-content-main .gun-featured-cell { display: flex; flex-direction: column; gap: 6px; }
  .gun-content-main .gun-table-head > span:nth-child(3) { display: block; }
  .gun-content-main .gun-row-picture { height: 94px; }
  .gun-content-main .gun-row-picture img { padding: 4px; }
}

@media (min-width: 1101px) and (max-width: 1380px) {
  .sidebar { width: 208px; padding-left: 16px; padding-right: 16px; }
  .app-shell { margin-left: 208px; }
  main { padding: 28px; }
  .topbar { padding: 0 28px; }
  .home-password-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-password-card { padding: 12px 16px; }
  .home-password-code > span { width: 24px; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .sidebar { width: 76px; padding: 22px 12px; }
  .brand { display: block; }
  .brand-mark { width: 40px; height: 42px; }
  .sidebar nav { width: 100%; margin-top: 28px; gap: 8px; }
  .nav-item { min-width: 50px; min-height: 46px; padding: 12px; justify-content: center; }
  .brand > span:last-child, .side-caption, .nav-label, .nav-index, .sidebar-bottom { display: none; }
  .app-shell { margin-left: 76px; }
  .topbar { height: 60px; padding: 0 24px; }
  main { padding: 25px 24px 0; }
  .home-password-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .music-layout { grid-template-columns: 1fr; }
  .gun-ranking { position: static; }
}
@media (max-width: 820px) {
  html { scroll-padding-top: 130px; }
  .sidebar { position: sticky; width: 100%; padding: 14px 20px 8px; gap: 12px; border: 0; border-bottom: 1px solid #304334; box-shadow: 0 3px 14px #0d24130a; }
  .brand { font-size: 18px; gap: 10px; }
  .brand-mark { width: 30px; height: 32px; font-size: 25px; }
  .brand-sub { font-size: 9px; margin-top: 2px; }
  .side-caption { display: block; font-size: 10px; margin: 0; color: #8fa28f; }
  .sidebar nav { display: flex; flex-direction: row; width: 100%; margin: 0; gap: 4px; padding: 0 0 4px; overflow-x: auto; }
  .nav-item { min-height: 38px; padding: 9px 12px; gap: 6px; border-radius: 4px; font-size: 12px; }
  .nav-label { display: inline; }
  .nav-icon, .nav-index, .sidebar-bottom { display: none; }
  .app-shell { margin-left: 0; }
  .topbar { height: 45px; padding: 0 20px; font-size: 11px; }
  .phase-label { display: none; }
  main { padding: 22px 20px 0; }
  .page :is(.hero, .archive-hero) { padding-bottom: 20px; margin-bottom: 20px; }
  .page :is(.hero, .archive-hero) h1 { font-size: 27px; }
  .hero-stamp, .hero-tag, .archive-emblem { display: none; }
  .home-password-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-password-heading h2 { font-size: 20px; }
  .home-password-card { padding: 13px; }
  .home-password-code > span { width: 22px; }
  .music-layout { grid-template-columns: 1fr; }
  .music-console, .music-library { padding: 22px; }
  .gun-ranking { position: static; }
  .gun-ranking-heading { padding: 16px 17px 10px; }
  .gun-ranking-heading .eyebrow { display: none; }
  .gun-ranking-heading h2 { font-size: 16px; }
  .gun-ranking-heading > span { font-size: 21px; }
  .gun-ranking ol { display: flex; gap: 16px; padding: 10px 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #bdcbb0 transparent; }
  .gun-ranking ol > li { flex: 0 0 240px; min-width: 0; scroll-snap-align: start; }
  .gun-ranking-item { min-height: 68px; padding: 10px 0; border-bottom: 0; }
  .gun-ranking-foot { padding: 10px 16px; font-size: 10px; }
  .gun-content-main .gun-overview-row { grid-template-columns: minmax(0, 1fr) 110px; }
  .asset-launcher { padding: 16px 18px; }
  #page-tools .asset-launcher { flex-wrap: nowrap; padding: 14px 15px; gap: 12px; }
  #page-tools .asset-launcher-copy p { font-size: 11px; line-height: 1.7; }
  #page-tools .asset-launcher-end { width: auto; flex-shrink: 0; padding: 0; border: 0; flex-direction: column; align-items: flex-end; }
  #page-tools .asset-launcher-end small { display: none; }
  footer { margin-top: 28px; }
}
@media (max-width: 540px) {
  .sidebar { padding: 12px 16px 6px; gap: 10px; }
  .brand { font-size: 17px; }
  .side-caption { font-size: 9px; }
  .nav-item { min-height: 38px; padding: 9px 11px; font-size: 12px; }
  .topbar { height: 42px; padding: 0 17px; }
  main { padding: 20px 16px 0; }
  .page :is(.hero, .archive-hero) h1, #page-community .hero h1 { font-size: 25px; }
  .page :is(.hero, .archive-hero) p { font-size: 12px; line-height: 1.9; }
  .free-access-notice { padding: 12px; gap: 10px; margin-bottom: 22px; }
  .free-access-copy strong { font-size: 12px; }
  .free-access-copy p { font-size: 10px; line-height: 1.8; }
  .home-password-heading { gap: 9px; align-items: center; }
  .home-password-heading h2 { font-size: 19px; gap: 8px; }
  .home-password-heading h2 > span { font-size: 10px; padding-left: 8px; }
  .home-password-heading .eyebrow { font-size: 9px; }
  .home-password-actions { gap: 6px; font-size: 9px; padding: 0; }
  .home-password-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-password-card { padding: 11px 12px; }
  .home-password-map strong { font-size: 12px; }
  .home-password-bottom { margin-top: 10px; }
  .home-password-code { font-size: 22px; line-height: 29px; gap: 3px; }
  .home-password-code > span { width: 22px; }
  .home-password-foot { font-size: 9px; gap: 4px; }
  .panel { padding: 20px; }
  .field { font-size: 12px; }
  .field :is(input, select, textarea) { font-size: 16px; min-height: 42px; }
  .field input[type="number"] { font-size: 19px; }
  .primary, .secondary { min-height: 42px; }
  .gun-browse-panel { padding: 0 12px 12px; }
  .gun-browse-tabs button { font-size: 12px; padding-left: 0; padding-right: 0; }
  .community-filters { padding: 13px; gap: 10px; }
  .gun-content-main .gun-overview-row { grid-template-columns: minmax(0, 1fr) 112px; padding: 14px; }
  .gun-row-picture, .gun-weapon-cell .gun-row-picture { height: 78px; }
  .gun-scheme-row { padding: 15px; }
  .gun-weapon-cell strong { font-size: 13px; }
  .archive-grid { gap: 12px; }
  .archive-card-body { padding: 13px; }
  .archive-card h3 { font-size: 14px; }
  .archive-picture { height: 135px; }
  .archive-picture img { height: 110px; }
  .archive-tab { padding: 11px 13px; font-size: 12px; }
  .music-console, .music-library { padding: 19px; }
  .music-studio-tabs button { padding: 11px; font-size: 12px; }
  .music-studio-heading { font-size: 21px; }
  #page-tools .asset-launcher-icon { width: 36px; height: 40px; }
  #page-tools .asset-launcher-copy h2 { font-size: 14px; }
  #page-tools .asset-launcher-end b { font-size: 10px; }
  .music-popular-card { padding: 17px 0; grid-template-columns: 23px minmax(0, 1fr) auto; gap: 7px; }
  .music-popular-card h3 { font-size: 15px; }
  .popular-actions :is(a, button) { font-size: 10px; }
  .music-catalog-filters :is(input, select) { min-height: 39px; }
  dialog { padding: 21px; max-width: calc(100% - 28px); }
  #toast { max-width: calc(100vw - 32px); }
  footer { font-size: 10px; gap: 12px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-active-indicator, .motion-tab-indicator { display: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}