@import url("fonts/optimized-v1/fonts.css");
@import url("fonts/stratum2-v1/fonts.css");
/* Monochrome panel: open sections, quiet rules, restrained red interaction. */
:root {
    --page-bg:#111111;
    --card-bg:#111111;
    --surface-bg:#181818;
    --surface-raised:#222222;
    --border-color:#333333;
    --border-strong:#666666;
    --text-color:#f0efed;
    --muted-text:#aaa9a6;
    --subtle-text:#969591;
    --primary:#c62828;
    --primary-hover:#e53935;
    --primary-soft:rgba(198,40,40,.08);
    --success:#c4c3bf;
    --success-soft:rgba(255,255,255,.04);
    --danger:#c62828;
    --danger-soft:rgba(198,40,40,.08);
    --warning:#c4c3bf;
    --shadow:none;
    --overlay:rgba(0,0,0,.7);
    --icon-primary-filter:brightness(0) invert(.78);
    --icon-success-filter:brightness(0) invert(.78);
    --icon-danger-filter:brightness(0) saturate(100%) invert(19%) sepia(78%) saturate(3134%) hue-rotate(349deg) brightness(90%) contrast(106%);
    --icon-warning-filter:brightness(0) invert(.78);
    --action-bg:#ecebe8;
    --action-text:#151515;
    --danger-foreground:#ffffff;
}
:root[data-theme="light"] {
    --page-bg:#fdfdfc;
    --card-bg:#fdfdfc;
    --surface-bg:#f5f5f3;
    --surface-raised:#eeedeb;
    --border-color:#d9d8d5;
    --border-strong:#8d8b87;
    --text-color:#1b1b1a;
    --muted-text:#656460;
    --subtle-text:#74736f;
    --primary:#c62828;
    --primary-hover:#a81f1f;
    --primary-soft:rgba(198,40,40,.06);
    --success:#50504c;
    --success-soft:rgba(0,0,0,.025);
    --danger:#c62828;
    --danger-soft:rgba(198,40,40,.06);
    --warning:#656460;
    --shadow:none;
    --overlay:rgba(0,0,0,.42);
    --icon-primary-filter:brightness(0) invert(.32);
    --icon-success-filter:brightness(0) invert(.32);
    --icon-warning-filter:brightness(0) invert(.32);
    --icon-danger-filter:brightness(0) saturate(100%) invert(19%) sepia(78%) saturate(3134%) hue-rotate(349deg) brightness(90%) contrast(106%);
    --action-bg:#212120;
    --action-text:#ffffff;
    --danger-foreground:#ffffff;
}
body { margin:0; font-family:"Stratum2","Noto Sans SC","Noto Sans",sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
.global-topbar { --topbar-bg:#801d24; background:var(--topbar-bg); color:#fff; margin-bottom:36px; }
:root[data-theme="light"] .global-topbar { --topbar-bg:#c62828; }
.topbar-inner { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:20px; width:100%; max-width:none; box-sizing:border-box; padding:0 24px; margin:0; min-height:68px; }
.topbar-brand { font-size:20px; font-weight:650; margin:0; white-space:nowrap; color:#fff; }
.topbar-brand::before { content:""; display:inline-block; width:6px; height:6px; margin-right:10px; border-radius:50%; background:#fff; vertical-align:3px; }
.global-topbar .header-controls { display:flex; flex-direction:row; align-items:center; flex-wrap:nowrap; width:auto; gap:12px; }
.global-topbar .header-controls label { color:#fff; display:flex; flex-direction:row; align-items:center; gap:8px; font-size:12px; width:auto; }
.global-topbar .header-controls select { background:var(--topbar-bg); border-color:#ffffff55; color:#fff; }
.global-topbar .header-controls select::picker-icon { color:#fff; }
.global-topbar .panel-navigation { display:block; min-width:0; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#ffffff70 transparent; margin:0; border:0; padding:0; }
.navigation-links { display:flex; justify-content:center; align-items:center; gap:clamp(6px,.8vw,16px); flex-wrap:nowrap; width:max-content; min-width:100%; }
.global-topbar .navigation-links a { display:flex; flex-direction:row; flex-shrink:0; justify-content:center; align-items:center; gap:8px; padding:22px 4px; margin:0; color:#ffffffd9; text-align:center; white-space:nowrap; font-size:15px; }
.global-topbar .navigation-links a:hover { color:#fff; background:transparent; }
.global-topbar .navigation-links img { width:20px; height:20px; }
.global-topbar .navigation-links a[aria-current="page"] { color:#fff; border-bottom-color:#fff; }
.global-topbar .panel-navigation img, .global-topbar .account-menu summary img { filter:brightness(0) invert(1); }
.global-topbar .navigation-links a[aria-current="page"] img { filter:brightness(0) invert(1); }
.global-topbar .account-menu { margin-left:0; min-width:0; }
.global-topbar .account-menu summary { white-space:nowrap; padding:10px 0; font-size:15px; }
.global-topbar .account-menu summary span:first-of-type { max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.global-topbar .account-menu-content { color:var(--text-color); }
.global-topbar .account-menu-content a { padding:0; }
.global-topbar .header-controls .theme-toggle { width:38px; height:38px; flex-shrink:0; margin:0; background:transparent; color:#fff; border:1px solid #ffffff55; font-size:20px; padding:3px 8px; }
.global-topbar :focus-visible { outline:2px solid #fff; outline-offset:4px; }
.global-topbar .account-menu-content :focus-visible { outline-color:var(--primary); }
.history-stats { grid-template-columns:1fr; }
.history-compact-stats { flex-direction:column; gap:4px; }
.history-stat-group dl > div { display:flex; justify-content:space-between; gap:24px; padding:8px 0; border-bottom:1px solid var(--border-color); }
.history-stat-group dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.player-analytics { margin:20px 0; }
.player-analytics h3 { margin-top:28px; }
.player-analytics dl { margin:0; }
.player-analytics dl > div { display:flex; justify-content:space-between; gap:24px; padding:9px 0; border-bottom:1px solid var(--border-color); }
.player-analytics dd { margin:0; text-align:right; }
.weapon-table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.weapon-table th, .weapon-table td { padding:10px 8px; border-bottom:1px solid var(--border-color); text-align:right; }
.weapon-table th:first-child, .weapon-table td:first-child { text-align:left; }
.weapon-table-wrap { overflow-x:auto; }
.weapon-damage-bar { display:block; height:3px; background:var(--primary); margin-top:5px; max-width:100%; }
@media(max-width:1500px) {
    .topbar-inner { gap:10px; padding-inline:16px; }
    .global-topbar .navigation-links { gap:6px; }
    .global-topbar .navigation-links a { font-size:14px; gap:6px; padding-inline:3px; }
    .global-topbar .navigation-links img { width:18px; height:18px; }
    .global-topbar .account-menu summary { font-size:14px; }
    .global-topbar .language-control > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}
@media(max-width:900px) {
    .topbar-inner { grid-template-columns:minmax(0,1fr) auto auto; gap:6px 14px; padding:12px 16px 0; }
    .global-topbar .panel-navigation { grid-column:1/-1; grid-row:2; }
    .global-topbar .navigation-links a { padding:14px 5px; }
    .topbar-brand { font-size:16px; }
}
@media(max-width:560px) {
    .topbar-inner { grid-template-columns:minmax(0,1fr) auto auto; gap:6px 8px; }
    .topbar-brand { font-size:14px; overflow:hidden; text-overflow:ellipsis; }
    .global-topbar .header-controls { gap:7px; }
    .global-topbar .header-controls select { min-width:0; max-width:110px; padding:8px; font-size:12px; }
    .global-topbar .account-menu summary { width:28px; justify-content:center; padding:8px 0; font-size:12px; }
    .global-topbar .account-menu summary span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}
.plugin-row { border-bottom:1px solid var(--border-color); padding:16px 0; display:flex; gap:20px; justify-content:space-between; align-items:center; }
.plugin-row p { margin:0; overflow-wrap:anywhere; min-width:0; }
.plugin-actions { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }
#pluginOutput { white-space:pre-wrap; overflow-wrap:anywhere; border-top:1px solid var(--border-color); padding:16px 0; }
#pluginLoad { margin:24px 0; }
.plugin-load-dialog { position:fixed; inset:0; margin:auto; width:min(520px,calc(100vw - 40px)); max-width:calc(100vw - 40px); max-height:calc(100dvh - 40px); overflow:auto; box-sizing:border-box; color:var(--text-color); }
.plugin-load-dialog::backdrop { background:var(--overlay); }
.plugin-load-dialog select { width:100%; min-width:0; }
.plugin-upload-preview { max-height:250px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; border-block:1px solid var(--border-color); padding:12px 0; font-size:12px; }
.plugin-load-dialog input[type="file"] { width:100%; box-sizing:border-box; }
.account-menu { margin-left:auto; position:relative; }
.account-menu summary { display:flex; align-items:center; gap:8px; padding:10px; cursor:pointer; list-style:none; }
.account-menu summary::-webkit-details-marker { display:none; }
.account-menu summary img { width:20px; height:20px; filter:var(--icon-primary-filter); }
.account-menu-content { position:absolute; right:0; z-index:20; min-width:190px; padding:16px; background:var(--page-bg); border:1px solid var(--border-color); display:grid; gap:12px; }
.account-forms { width:100%; max-width:440px; margin:24px auto 40px; }
.account-form { display:grid; gap:16px; max-width:480px; }
.account-form[hidden] { display:none; }
.account-switch { justify-self:center; font-size:13px; color:var(--primary); text-underline-offset:4px; }
.account-switch:hover { text-decoration:underline; }
.account-form label { display:grid; gap:6px; }
.account-form input { width:100%; box-sizing:border-box; border:1px solid var(--border-color); background:var(--page-bg); color:var(--text-color); padding:10px; }
.account-user-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; border-bottom:1px solid var(--border-color); overflow-wrap:anywhere; }
#accountAdmin { margin-top:40px; }
body[data-role="user"] .addon-actions, body[data-role="user"] .addon-rename,
body:not([data-role="admin"]) [data-player-action], body:not([data-role="admin"]) [data-unban] { display:none; }
@media(max-width:720px) { .account-user-row { flex-direction:column; align-items:flex-start; } }
@media(max-width:720px) { .plugin-row { align-items:flex-start; flex-direction:column; } }
button, input, select, textarea { font-family:inherit; }
pre, code, .console-page pre { font-family:"Stratum2 Mono","Noto Sans SC",monospace; }
* { scrollbar-color:var(--border-strong) var(--page-bg); }
::selection { background:var(--primary-soft); color:var(--primary); }
.container { width:calc(100% - 96px); max-width:1520px; }
.page-header { padding:34px 0 26px; border-bottom:1px solid var(--border-color); }
.page-header h1 { margin:0; font-size:25px; letter-spacing:-.8px; font-weight:650; }
.page-header h1::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:13px; background:var(--primary); vertical-align:4px; }
.header-controls { gap:24px; }
h2 { font-size:19px; font-weight:600; letter-spacing:-.35px; }
.card h2::before, .overview-entrances > h2::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--primary); margin-right:10px; vertical-align:3px; }
.console-login { max-width:360px; padding:16px 0 36px; }
h3 { font-weight:600; }
.panel-navigation { margin:0 0 30px; padding:0; gap:24px; background:none; border:0; border-bottom:1px solid var(--border-color); border-radius:0; }
.panel-navigation a { position:relative; padding:18px 0 15px; border-radius:0; font-size:14px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.panel-navigation a:hover { background:none; color:var(--text-color); }
.panel-navigation a[aria-current="page"] { background:none; color:var(--primary); box-shadow:none; border-bottom-color:var(--primary); }
.panel-navigation img { width:18px; height:18px; }
.panel-navigation a[aria-current="page"] img { filter:var(--icon-danger-filter); }
.card, .blacklist-card { background:transparent; border:0; border-top:1px solid var(--border-color); border-radius:0; padding:26px 0; margin:0 0 24px; box-shadow:none; }
.card > h2:first-child { margin-top:0; }
.function-layout > .card:first-child { border-top:0; padding-top:4px; }
.overview-layout, .addon-page-grid, .server-page-grid { gap:44px; }
.overview-entrances { margin:0; }
.function-link { background:none; border:0; border-bottom:1px solid var(--border-color); border-radius:0; box-shadow:none; padding:22px 0; margin:0; }
.function-link:hover { border-color:var(--border-color); }
.function-link:hover h3, .function-link:hover > span { color:var(--primary); }
.function-link > img { width:27px; height:27px; }
.function-link h3 { font-size:16px; margin-bottom:5px; }
.function-link p { font-size:13px; }
.server-state { padding:12px 0 18px; background:none; border-radius:0; border-bottom:1px solid var(--border-color); }
.server-state img { width:29px; height:29px; }
.server-state { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.server-state .connect-server-link { margin-left:auto; flex-shrink:0; }
.server-metrics { gap:0 24px; margin:0 0 20px; }
.server-metrics div { padding:18px 0; gap:7px; border:0; border-bottom:1px solid var(--border-color); border-radius:0; background:none; }
.server-metrics strong { font-size:19px; font-weight:550; letter-spacing:-.25px; }
.server-metrics span { font-size:12px; }
.server-disk-warning { border:0; border-left:2px solid var(--danger); border-radius:0; }
.addon-card, .server-player-row, .log-entry, .upload-queue-item,
.workshop-item, .workshop-job { background:none; border:0; border-bottom:1px solid var(--border-color); border-radius:0; box-shadow:none; margin:0; padding:20px 0; }
.addon-card:last-child, .server-player-row:last-child { border-bottom:0; }
.addon-icon { width:48px; height:48px; }
.addon-info p { color:var(--muted-text); }
.addon-list-header { padding-bottom:14px; border-bottom:1px solid var(--border-color); }
.addon-actions { gap:7px; }
.addon-actions button { min-width:84px; background:none; color:var(--text-color); border:1px solid var(--border-color); }
.player-avatar { border-radius:3px; background:var(--surface-bg); }
.history-stats { gap:0 26px; }
.history-stat-group { padding:17px 0; background:none; border:0; border-top:1px solid var(--border-color); border-radius:0; }
.history-stat-group h3 { font-size:13px; }
.history-stat-group h3 img { width:19px; height:19px; }
.history-stat-group dt { font-size:13px; color:var(--muted-text); }
.history-stat-group dd { font-weight:600; }
.history-player-details summary::after { border-left-color:var(--primary); }
.log-list { gap:0; }
body[data-page="logs"] .log-list { gap:0 30px; }
.log-entry-icon, .log-entry--success .log-entry-icon, .log-entry--enabled .log-entry-icon,
.log-entry--replaced .log-entry-icon, .log-entry--disabled .log-entry-icon,
.log-entry--deleted .log-entry-icon, .log-entry--error .log-entry-icon { background:none; border-radius:0; width:30px; flex-basis:30px; }
.log-type-badge { border:0; padding:0; color:var(--muted-text); }
.log-empty { border:0; border-bottom:1px solid var(--border-color); border-radius:0; }
button { background:var(--action-bg); color:var(--action-text); border:1px solid transparent; border-radius:3px; padding:9px 15px; font-weight:600; font-size:13px; line-height:1.5; }
button:hover:not(:disabled) { background:var(--surface-raised); color:var(--primary); border-color:var(--border-color); }
button:disabled { opacity:.45; }
.secondary-button, .confirm-cancel, .player-profile-link, .connect-server-link { border:1px solid var(--border-color); border-radius:3px; background:transparent; color:var(--text-color); }
.secondary-button:hover:not(:disabled), .confirm-cancel:hover:not(:disabled), .player-profile-link:hover { background:var(--surface-bg); color:var(--primary); }
.confirm-delete, .confirm-replace { background:var(--danger); color:var(--danger-foreground); }
.server-buttons #serverStop { color:var(--danger-foreground); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.addon-rename, .upload-queue-remove, .toast-close, .confirm-close { background:transparent; border:0; }
.addon-rename:hover:not(:disabled) { background:var(--primary-soft); border:0; }
.upload-drop-zone { border:1px dashed var(--border-strong); border-radius:3px; background:transparent; min-height:220px; }
.upload-drop-zone:hover, .upload-drop-zone.drag-over { border-color:var(--primary); background:var(--primary-soft); }
.upload-drop-zone-icon { width:46px; height:46px; }
.upload-drop-zone-link { color:var(--primary); }
.file-progress-track { background:var(--surface-raised); }
.file-progress-fill, .toast-progress { background:var(--primary); }
.upload-controls { justify-content:flex-start; }
.upload-controls button { min-width:120px; }
.search-control input, .console-controls input, .input-popup input,
.workshop-page textarea, .workshop-toolbar select, .server-mode-control select,
.addon-sort-controls select, .language-control select, .theme-control select,
.ban-duration-control select { border-radius:3px; background:var(--page-bg); border-color:var(--border-color); color:var(--text-color); font:inherit; font-size:13px; }
.search-control input, .console-controls input { padding:11px 12px; }
.server-mode-control { padding:9px 0; }
.server-map-control select { min-width:0; }
/* Native keyboard and mobile selection, with a matching monochrome shell. */
select, .workshop-toolbar select, .server-mode-control select,
.addon-sort-controls select, .language-control select, .theme-control select,
.ban-duration-control select {
    appearance:none;
    background-color:var(--page-bg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center;
    color:var(--text-color); border:1px solid var(--border-color);
    border-radius:0; padding:9px 34px 9px 10px; cursor:pointer;
}
select:hover { border-color:var(--primary); }
select:disabled { cursor:not-allowed; opacity:.55; }
select option, select optgroup { background:var(--page-bg); color:var(--text-color); }
@supports (appearance:base-select) {
    select, select::picker(select) { appearance:base-select !important; }
    select { background-image:none; padding-right:10px; }
    select::picker-icon { color:var(--primary); }
    select::picker(select) { border:1px solid var(--border-color); border-radius:0; background:var(--page-bg); color:var(--text-color); font:inherit; }
    select option { padding:8px 12px; }
    select option:hover, select option:checked { background:var(--primary-soft); color:var(--primary); }
}
.console-page pre { border:0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); border-radius:0; background:var(--surface-bg); padding:18px; }
.workshop-browser-layout { gap:30px; }
.workshop-results { gap:26px 20px; }
.workshop-tile { border:0; border-bottom:1px solid var(--border-color); border-radius:0; background:none; padding-bottom:16px; }
.workshop-tile:hover { border-color:var(--border-strong); }
.workshop-tile .workshop-tile-open { background:transparent; border:0; color:var(--text-color); }
.workshop-tile .workshop-tile-open:hover:not(:disabled) { color:var(--primary); }
.workshop-thumbnail { background:var(--surface-bg); border-radius:2px; }
.workshop-tile strong { padding:13px 0 0; font-size:14px; }
.workshop-tile p { padding:0; }
.workshop-tile > button:last-child { margin:auto 0 0; align-self:flex-start; background:transparent; color:var(--primary); border:0; padding:7px 0; }
.workshop-cart { border:0; border-left:1px solid var(--border-color); border-radius:0; background:none; padding:0 0 0 24px; }
.workshop-cart h3 { font-size:16px; }
.workshop-cart .workshop-cart-title { color:var(--text-color); }
.workshop-cart .workshop-cart-title:hover { color:var(--primary); }
.workshop-cart-item > .secondary-button { border:0; }
.workshop-job-heading strong { color:var(--primary); }
.confirm-popup, .workshop-details { background:var(--page-bg); border:1px solid var(--border-strong); border-radius:4px; box-shadow:0 16px 70px rgba(0,0,0,.18); }
.workshop-details::backdrop { background:var(--overlay); }
.toast { background:var(--page-bg); border:1px solid var(--border-color); border-radius:3px; box-shadow:none; }
.replace-file, .zip-conflict-version, .zip-conflict-list, .batch-result-list,
.zip-conflict-summary span, .batch-counts > div { border-radius:0; box-shadow:none; background:transparent; }
.replace-file, .zip-conflict-version { border:0; border-top:1px solid var(--border-color); }
footer { border-top:1px solid var(--border-color); color:var(--muted-text); }
footer a { text-decoration:none; }
footer a:hover { color:var(--primary); text-decoration:underline; }
@media(max-width:1000px) { .overview-layout, .addon-page-grid, .server-page-grid { gap:24px; } }
@media(max-width:850px) { .workshop-cart { border-left:0; border-top:1px solid var(--border-color); padding:20px 0 0; } }
@media(max-width:640px) {
    .container { width:calc(100% - 36px); }
    .page-header { padding:24px 0 20px; gap:18px; }
    .page-header h1 { font-size:22px; }
    .header-controls { width:100%; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .panel-navigation { gap:0 20px; margin-bottom:22px; }
    .panel-navigation a { padding:12px 0; font-size:13px; }
    .panel-navigation img { width:16px; height:16px; }
    .card { padding:22px 0; margin-bottom:12px; }
    .overview-layout { gap:0; }
    .server-metrics { gap:0 16px; }
    .server-metrics strong { font-size:17px; }
    .addon-card { gap:12px; }
    .addon-actions button { min-width:70px; padding:7px 10px; }
    .player-card { flex-wrap:wrap; }
    .history-player-details { min-width:0; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; } }

/* Site-wide navigation follows the homepage; panel pages have their own row. */
.global-topbar { position:sticky; top:0; z-index:50; margin-bottom:0; }
.global-topbar .topbar-brand { text-decoration:none; }
.site-navigation { display:flex; justify-content:center; align-items:center; gap:clamp(16px,2vw,34px); min-width:0; overflow-x:auto; scrollbar-width:thin; }
.site-navigation a { display:flex; flex-shrink:0; align-items:center; justify-content:center; gap:8px; color:#ffffffd9; padding:22px 4px 20px; border-bottom:2px solid transparent; font-size:15px; white-space:nowrap; text-decoration:none; }
.site-navigation a:hover, .site-navigation a[aria-current="page"] { color:#fff; background:transparent; }
.site-navigation a[aria-current="page"] { border-bottom-color:#fff; }
.site-navigation svg { width:20px; height:20px; flex-shrink:0; }
.panel-pagebar { display:block; width:calc(100% - 96px); max-width:1520px; margin:0 auto 30px; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid var(--border-color); }
.panel-pagebar .navigation-links { justify-content:flex-start; gap:24px; }
.panel-pagebar .navigation-links a { display:flex; align-items:center; flex-direction:row; gap:8px; white-space:nowrap; font-size:15px; }
.panel-pagebar .navigation-links a:hover { background:transparent; color:var(--text-color); }
.panel-pagebar .navigation-links img { width:20px; height:20px; }
@media(max-width:900px) {
    .global-topbar .topbar-inner { grid-template-columns:minmax(0,1fr) auto auto; padding:12px 16px 0; }
    .site-navigation { grid-column:1/-1; grid-row:2; gap:30px; }
    .site-navigation a { padding:13px 5px 12px; font-size:14px; }
    .global-topbar .topbar-brand { font-size:18px; }
}
@media(max-width:640px) { .panel-pagebar { width:calc(100% - 32px); } }
@media(max-width:400px) {
    .site-navigation { gap:20px; }
    .site-navigation a { font-size:12px; gap:6px; }
    .site-navigation svg { width:17px; height:17px; }
}