.topic-shell { max-width:var(--layout-public); padding-block:var(--space-xl); }
.topic-heading,.topic-actions,.topic-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-md); }
.topic-heading { justify-content:space-between; margin-bottom:var(--space-lg); }
.topic-heading h1,.topic-heading h2,.topic-card h3 { margin:0; }
.topic-feed,.topic-comments { margin-block:var(--space-xl); }
.topic-card,.topic-editor,.topic-comment { background:var(--bg-card); border:var(--border-width) solid var(--border); border-radius:var(--radius-lg); padding:var(--space-lg); margin-block:var(--space-md); }
.topic-card { display:flex; gap:var(--space-lg); align-items:flex-start; }
.topic-card-copy { min-width:0; flex:1; }
.topic-card p { margin-bottom:0; }
.topic-cover { width:8rem; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-md); }
.topic-meta { color:var(--text-secondary); font-size:var(--fs-sm); margin-block:var(--space-xs) var(--space-md); }
.topic-excerpt,.topic-prose,.topic-comment-content { overflow-wrap:anywhere; }
.topic-comment-content { white-space:pre-wrap; }
.topic-prose { font-size:var(--fs-md); line-height:var(--lh-base); padding:var(--space-lg); max-width:75ch; }
.topic-prose img { max-width:100%; height:auto; border-radius:var(--radius-md); }
.topic-prose pre { overflow:auto; padding:var(--space-md); background:var(--bg-input); border-radius:var(--radius-md); }
.topic-editor label,.topic-comments form label { display:grid; gap:var(--space-xs); margin-block:var(--space-md); }
.topic-editor fieldset { min-width:0; border:0; margin-block:var(--space-lg); padding:0; }
.topic-editor input[type=file] { max-width:100%; }
.topic-editor label,.topic-fields > * { min-width:0; }
.topic-editor legend { font-size:var(--fs-lg); }
.topic-fields { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.topic-toolbar { padding-block:var(--space-sm); gap:var(--space-xs); }
.topic-toolbar button,.topic-actions button:not(.btn),.topic-file-button,.topic-image-edit button,.topic-lightbox button { background:var(--bg-input); border:var(--border-width) solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); padding:var(--space-xs) var(--space-sm); }
.topic-toolbar [aria-pressed=true],.topic-actions [aria-pressed=true] { border-color:var(--accent); background:var(--accent-light); }
.topic-file-button { position:relative; overflow:hidden; }
.topic-file-button input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.topic-file-button:focus-within { outline:var(--ring-width) solid var(--ring-color); }
.topic-error { color:var(--danger); }
.topic-image-edit { display:flex; gap:var(--space-sm); align-items:center; flex-wrap:wrap; padding-block:var(--space-sm); }
.topic-image-edit img { width:5rem; height:4rem; object-fit:cover; border-radius:var(--radius-sm); }
.topic-image-edit label { flex:1; min-width:8rem; }
.topic-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(8rem,1fr)); gap:var(--space-md); margin-block:var(--space-lg); }
.topic-gallery.is-gallery { grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); }
.topic-gallery figure { margin:0; }
.topic-gallery button { display:block; width:100%; background:none; border:0; padding:0; }
.topic-gallery img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-lg); }
.topic-gallery figcaption { padding:var(--space-sm); color:var(--text-secondary); }
.topic-lightbox { width:min(90vw,72rem); max-height:90dvh; padding:var(--space-lg); border:var(--border-width) solid var(--border); border-radius:var(--radius-lg); background:var(--bg-card); color:var(--text-primary); }
.topic-lightbox::backdrop { background:var(--overlay-backdrop); }
.topic-lightbox img { display:block; max-width:100%; max-height:65dvh; margin:auto; object-fit:contain; }
.topic-lightbox nav { display:flex; justify-content:center; align-items:center; gap:var(--space-lg); }
.topic-manage { margin-top:var(--space-2xl); }
.topic-empty { padding:var(--space-lg); color:var(--text-secondary); }
.topic-associations { margin-bottom:var(--space-lg); }
@media(max-width:768px) { .topic-fields { grid-template-columns:1fr; }.topic-card { flex-direction:column; }.topic-cover { width:100%; }.topic-card>a { width:100%; } }
.home-tabs { margin:var(--space-lg) 0; padding-bottom:var(--space-md); border-bottom:var(--border-width) solid var(--border-light); }
.home-tabs [aria-current=page] { color:var(--text-primary); font-weight:600; text-decoration:none; }
.home-community-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-2xl); }
.home-topics-main,.home-community-aside { min-width:0; }
.home-community-aside { padding-top:var(--space-xl); }
.home-community-aside .home-panel-shell { margin-bottom:var(--space-xl); }
.home-community-aside .home-panel-shell-header { gap:var(--space-sm); flex-wrap:wrap; }
.home-community-aside .home-panel-shell-title { font-size:var(--fs-sm); }
.community-declarations { display:grid; gap:var(--space-md); margin-block:var(--space-xl); min-width:0; }
.community-declarations legend { font-size:var(--fs-lg); font-weight:600; }
.community-declarations > label { margin:0; }
.topic-editor .community-check,.community-check { display:block; line-height:var(--lh-base); }
.community-check input { margin-right:var(--space-xs); vertical-align:middle; width:var(--space-md); height:var(--space-md); }
.topic-editor .community-check a { display:inline; }
.community-account-notice { padding:var(--space-md) var(--space-lg); margin:var(--space-lg); border:var(--border-width) solid var(--border-light); border-radius:var(--radius-md); background:var(--bg-card); }
@media(min-width:1024px) { .home-community-layout { grid-template-columns:minmax(0,2fr) minmax(18rem,1fr); } }
.topic-card h3 { font-size:var(--fs-xl); line-height:var(--lh-base); }
.topic-card h3 a { color:var(--text-primary); text-decoration:none; }
.topic-card h3 a:hover { color:var(--accent); text-decoration:underline; }
.home-topics-main .topic-feed { margin-top:0; }
.home-community-aside { padding-top:0; }
.home-community-aside .home-reward-summary { margin-bottom:var(--space-xl); }
.home-community-aside .home-reward-summary > strong { margin-left:0; }
/* 2026-09-14: rooms used to live in the narrow aside, stacked one per row, which left the wide
   column empty whenever the topic feed was short. They now span the page above the split. */
.home-rooms-panel { margin-bottom:var(--space-2xl); }
.home-room-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-md); }
@media(min-width:768px) { .home-room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1280px) { .home-room-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.home-room-pager { display:flex; align-items:center; justify-content:center; gap:var(--space-md); margin-top:var(--space-lg); }
.home-room-pager-status { color:var(--text-secondary); font-size:var(--fs-sm); }
.home-quick-actions { display:grid; gap:var(--space-sm); }
.home-shell .home-panel-shell .home-panel-shell-header { min-height:var(--space-2xl); }
.home-shell .home-panel-shell .home-panel-shell-title { font-size:var(--fs-lg); font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-primary); gap:var(--space-xs); }
/* The sticky sidebar and the 100%-height inline shell were built for a side column; stacked in
   the aside they let the online list escape its panel and run into the footer. The part that
   actually broke it was the body's flex:1 1 0 + min-height:0: inside an auto-height column that
   resolves the body to zero height, so the expanded list painted past the panel's end. */
.home-community-aside .home-panel-shell-inline { height:auto; }
.home-community-aside .home-panel-shell-inline .home-panel-shell-body { flex:0 0 auto; min-height:auto; }
.home-community-aside .online-users-sidebar { position:static; }
.home-panel-shell-count { color:var(--text-secondary); font-weight:400; font-variant-numeric:tabular-nums; }
.home-community-aside .home-reward-summary { gap:var(--space-md); }

/* Apps menu: top-level rows, folder headers and nested rows used four different left insets and no
   icon column, so labels started wherever each glyph ended. One inset, one icon width, one right
   gutter (the pin button's 2rem) for everything.
   2026-09-16: folders and apps also looked identical (same colour, size and weight), so a folder
   read as something that opens a page. Folders are now section headers - small caps label, muted
   colour, tinted folder tile, a divider above - and their open contents hang off a guide line.
   Apps stay primary text with an accent icon. The toggle shows its "Apps" label on desktop. */
.nav-pin-menu .nav-pin-menu-row,.nav-pin-menu .nav-menu-folder { padding:0; }
.nav-pin-menu .nav-menu-folder-items { padding:0 0 var(--space-xs); }
.nav-pin-menu .dropdown-item .bi,.nav-pin-menu .nav-menu-folder-summary > .bi { display:inline-block; width:1.25rem; flex-shrink:0; text-align:center; }
.nav-pin-menu .dropdown-item { color:var(--text-primary); }
.nav-pin-menu .dropdown-item > .bi,.nav-pin-menu .software-live-link .bi { color:var(--accent); }
.nav-pin-menu .nav-menu-folder { margin-top:var(--space-2xs); border-top:var(--border-width) solid var(--border-light); padding-top:var(--space-2xs); }
.nav-pin-menu .nav-menu-folder details { border:0; background:transparent; }
.nav-pin-menu .nav-menu-folder details[open] { box-shadow:none; background:transparent; }
.nav-pin-menu .nav-menu-folder-summary { gap:var(--space-xs); padding:var(--space-xs) 0 var(--space-xs) var(--space-sm); color:var(--text-muted); font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.nav-pin-menu .nav-menu-folder-summary > .bi { width:1.5rem; height:1.5rem; margin-right:0 !important; display:inline-grid; place-items:center; border-radius:var(--radius-sm); background:var(--bg-hover); color:var(--text-secondary); font-size:.8rem; }
.nav-pin-menu .nav-menu-folder-summary:hover,.nav-pin-menu .nav-menu-folder-summary:focus-visible { color:var(--text-primary); background:transparent; }
.nav-pin-menu .nav-menu-folder details[open] > .nav-menu-folder-summary { color:var(--text-secondary); }
.nav-pin-menu .nav-menu-folder details[open] > .nav-menu-folder-summary > .bi { background:var(--accent-light); color:var(--accent); }
.nav-pin-menu .nav-menu-folder-summary::after { flex:0 0 2rem; text-align:center; letter-spacing:0; }
.nav-pin-menu .nav-menu-folder-items { margin-left:calc(var(--space-sm) + .75rem); border-left:var(--border-width) solid var(--border-light); }
.nav-pin-menu .nav-menu-folder-items .dropdown-item { padding-left:var(--space-md); }
.nav-pin-menu-spacer { flex:0 0 2rem; }
.nav-pin-menu .software-live-link > span:first-child { display:inline-flex; align-items:center; flex:1 1 auto; flex-wrap:nowrap; gap:var(--space-2xs); white-space:nowrap; overflow:hidden; }
.nav-pin-menu .nav-menu-folder details[open] > .nav-menu-folder-summary::after { transform:rotate(180deg); }
.nav-pin-menu .software-live-link .badge.text-bg-dark { display:none; }
.nav-pin-menu .software-live-link .badge { flex:0 0 auto; margin-left:var(--space-2xs) !important; padding:.1em .5em; color:var(--text-muted) !important; background:transparent !important; border:var(--border-width) solid var(--border-light); border-radius:var(--radius-pill); font-size:.68rem; font-weight:500; letter-spacing:0; }
@media (min-width: 992px) {
    .navbar .nav-apps-toggle { display:inline-flex; align-items:center; gap:var(--space-xs); }
    .navbar .nav-apps-toggle .nav-label { display:inline; font-weight:600; }
}

/* Statistics: one title, one section heading, then plain sentence-case rows. The old panel stacked
   an uppercase eyebrow, an uppercase sparkline label and three sub-14px sizes under the heading. */
.stats-page-header { margin-bottom:var(--space-xl); }
.stats-page-header h1 { font-size:var(--fs-3xl); font-weight:700; line-height:var(--lh-tight); margin:0 0 var(--space-xs); }
.stats-page-header .home-summary-stats { margin:0; }
[data-shell="modern"] .home-hero-panel { gap:var(--space-sm); }
[data-shell="modern"] .home-hero-panel-row { font-size:var(--fs-sm); color:var(--text-secondary); padding-block:var(--space-sm); }
[data-shell="modern"] .home-hero-panel-row strong { font-size:var(--fs-lg); font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.sparkline-header { font-size:var(--fs-sm); line-height:var(--lh-base); }
.sparkline-label,.home-hero-achievements-summary { font-size:var(--fs-sm); font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-secondary); }
.home-hero-achievements-count { font-size:var(--fs-xs); border-color:var(--border); color:var(--text-primary); }
.sparkline-hint,.home-hero-panel-footnote { font-size:var(--fs-sm); color:var(--text-muted); margin:0; }

/* Feedback inbox: the page had no way to file a report and its filters sat as inline labels. */
.feedback-inbox-header { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-md); margin-bottom:var(--space-lg); }
.feedback-inbox-header h1 { margin:0 0 var(--space-xs); }
.feedback-inbox-notice { padding:var(--space-md) var(--space-lg); border:var(--border-width) solid var(--border-light); border-radius:var(--radius-md); background:var(--bg-card); color:var(--text-secondary); }
.feedback-inbox-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-md); margin-bottom:var(--space-lg); }
.feedback-inbox-filters > div { flex:1 1 12rem; min-width:0; }
.feedback-inbox-result:empty { display:none; }
.feedback-inbox-empty { padding:var(--space-xl) var(--space-lg); border:var(--border-width) dashed var(--border-light); border-radius:var(--radius-md); color:var(--text-secondary); text-align:center; }
.feedback-setup { padding:var(--space-md) var(--space-lg); border:var(--border-width) solid var(--border-light); border-radius:var(--radius-md); background:var(--bg-card); }
.feedback-setup > summary { font-weight:600; cursor:pointer; }

/* 2026-09-15 polish pass.
   Navbar: the primary links sat flush against the brand lockup. */
[data-shell="modern"] .navbar-brand { margin-right: var(--space-lg); }
[data-shell="modern"] .navbar-primary-nav { gap: var(--space-xs); }
[data-shell="modern"] .navbar-primary-nav .nav-link { padding-inline: var(--space-sm); }

/* Topic feed: "All topics" was a bare link that read as a caption; it is now a button. */
.topic-show-all { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.topic-heading .topic-actions { margin-left: auto; }

/* Rooms hub: filters and search share one toolbar under the page header. */
.room-browser-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.room-filter-tabs { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--bg-input); border: var(--border-width) solid var(--border-light); border-radius: var(--radius-md); max-width: 100%; overflow-x: auto; }
.room-filter-tabs a { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.room-filter-tabs a:hover { color: var(--text-primary); background: var(--bg-hover); }
.room-filter-tabs a.is-active { color: var(--text-on-action); background: var(--accent); }
.room-search { position: relative; display: block; flex: 0 1 18rem; min-width: 12rem; margin: 0; }
.room-search .bi { position: absolute; left: var(--space-sm); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.room-search .room-search-input { width: 100%; padding-left: calc(var(--space-sm) + 1.5rem); }
@media (max-width: 600px) { .room-search { flex: 1 1 100%; } }

/* Games: Lufulus Online is the product, Wavemaster is its companion, the rest is a compact row. */
.game-featured { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 992px) { .game-featured { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.game-feature:only-child { grid-column: 1 / -1; }
.game-feature { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bg-card); border: var(--border-width) solid var(--border-light); border-radius: var(--radius-lg); }
.game-feature--primary { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-light)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), var(--shadow-sm); }
.game-feature-art { display: block; width: 100%; height: 180px; object-fit: cover; object-position: right center; }
.game-feature--primary .game-feature-art { height: 260px; }
.game-feature-body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); flex: 1; }
.game-feature-kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.game-feature--secondary .game-feature-kicker { color: var(--text-muted); }
.game-feature-lockup { display: block; width: min(100%, 22rem); color: var(--text-primary); }
.game-feature--secondary .game-feature-lockup { width: min(100%, 16rem); }
.game-feature-desc { margin: 0; color: var(--text-secondary); font-size: var(--fs-md); max-width: 60ch; }
.game-feature--primary .game-feature-desc { font-size: var(--fs-lg); }
.game-feature .game-showcase-meta { margin: 0; }
.game-feature-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-sm); }
.game-more-title { display: flex; align-items: center; gap: var(--space-xs); margin: var(--space-xl) 0 var(--space-md); font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); }
/* Secondary games: the same frame as the room cards (2026-09-16). */
.game-tile { display: flex; flex-direction: column; gap: var(--space-md); height: 100%; padding: var(--space-md) var(--space-lg); background: var(--bg-card); border: var(--border-width) solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.game-tile:hover, .game-tile:focus-within { border-color: var(--border); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.game-tile-head { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.game-tile-icon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; border-radius: var(--radius-md); background: var(--game-tile-bg, var(--accent)); color: #fff; font-size: 1.1rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.game-tile-heading { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.game-tile-name { margin: 0; overflow: hidden; color: var(--text-primary); font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-tight); white-space: nowrap; text-overflow: ellipsis; }
.game-tile-kind { color: var(--text-muted); font-size: var(--fs-xs); }
.game-tile-desc { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-base); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: calc(2 * var(--fs-sm) * var(--lh-base)); }
.game-tile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); color: var(--text-muted); font-size: var(--fs-xs); }
.game-tile-meta > span { display: inline-flex; align-items: center; gap: .3em; }
.game-tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-md); border-top: var(--border-width) solid var(--border-light); }
@media (prefers-reduced-motion: reduce) { .game-tile, .game-tile:hover, .game-tile:focus-within { transition: none; transform: none; } }

/* Chrome text is not content: labels, buttons, menus, tabs, badges and table heads no longer
   highlight on a stray drag. Inputs, messages and page copy are untouched. */
[data-shell="modern"] :is(label, .form-label, .form-check-label, .form-text, .btn, .nav-link, .navbar, .dropdown-menu, .dropdown-item,
    .badge, .card-header, summary, [role="tab"], [role="menu"], [role="menuitem"], .member-menu, .app-page-chip, .app-page-kicker,
    .room-filter-tabs, .settings-tabs, .create-room-tabs, .tooltip, .popover-header, th, .member-info,
    .home-panel-shell-header, .empty-state, .modal-header, .workspace-mode-bar, .topic-actions) { user-select: none; -webkit-user-select: none; }
[data-shell="modern"] :is(input, textarea, select, [contenteditable="true"], code, pre) { user-select: text; -webkit-user-select: text; }

/* Settings: one measured column, consistent card spacing, and a header that is a header. */
.settings-header { margin-bottom: var(--space-lg); }
.settings-header h1 { margin: 0 0 var(--space-2xs); font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-tight); }
.settings-header p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); }
.settings-header p a { color: var(--accent); }
[data-shell="modern"] .settings-container { max-width: 56rem; }
[data-shell="modern"] .settings-tabs { gap: var(--space-2xs); margin-bottom: var(--space-lg); padding: var(--space-2xs); background: var(--bg-input); border: var(--border-width) solid var(--border-light); border-radius: var(--radius-md); }
[data-shell="modern"] .settings-tabs .nav-link { padding: var(--space-xs) var(--space-sm); white-space: nowrap; }
/* Always one row. Seven tabs used to wrap onto a second line inside the 56rem column; when
   they still do not fit (tablet, phone) the strip scrolls sideways instead of stacking. */
[data-shell="modern"] .settings-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
[data-shell="modern"] .settings-tabs .nav-item { flex: 0 0 auto; }
/* Section cards flow down two columns on desktop. A row grid left a hole under a short card
   whenever its neighbour was tall (Theme beside Display); a lone card (Profile) keeps the full width. */
[data-shell="modern"] .settings-container { background: transparent; }
[data-shell="modern"] .settings-container .tab-pane.active { display: block; columns: 1; column-gap: var(--space-lg); }
@media (min-width: 992px) { [data-shell="modern"] .settings-container .tab-pane.active:not(:has(> .settings-section:only-child)) { columns: 2 22rem; } }
[data-shell="modern"] .settings-container .settings-section { margin: 0 0 var(--space-lg); padding: var(--space-lg); break-inside: avoid; }
[data-shell="modern"] .settings-container .settings-section-wide { column-span: all; }
[data-shell="modern"] .settings-section h6 { margin-bottom: var(--space-md); font-size: var(--fs-sm); }
[data-shell="modern"] .settings-section .mb-3 { margin-bottom: var(--space-md) !important; }
[data-shell="modern"] .settings-section .form-control, [data-shell="modern"] .settings-section .form-select,
[data-shell="modern"] .settings-section .alert, [data-shell="modern"] .settings-section small.text-muted.d-block { max-width: 34rem; }
[data-shell="modern"] .settings-section .form-label { margin-bottom: var(--space-2xs); font-weight: 600; color: var(--text-secondary); font-size: var(--fs-sm); }
[data-shell="modern"] .settings-section .text-muted.d-block { line-height: var(--lh-base); }
[data-shell="modern"] .settings-toggle { padding: var(--space-md) 0; gap: var(--space-md); }
[data-shell="modern"] .settings-toggle:first-child { padding-top: 0; }
[data-shell="modern"] .settings-toggle > div:first-child { flex: 1 1 14rem; min-width: 0; }
[data-shell="modern"] .settings-toggle > :last-child:not(:first-child) { flex: 0 0 auto; margin-left: auto; }
[data-shell="modern"] .settings-toggle .form-switch { margin: 0; padding-left: 2.5em; min-height: 1.5rem; }
[data-shell="modern"] .settings-toggle small { display: block; margin-top: var(--space-2xs); color: var(--text-muted); }

/* Statistics (Views/Home/Statistics.cshtml, 2026-09-15). The page used to sit in a bare
   .home-shell with no shell padding, a text-only header and a borderless panel; it now shares
   the app page shell, leads with three summary tiles and cards the weekly activity panel. */
.stats-page { padding-block: var(--space-lg) var(--space-2xl); }
.stats-page-nav { margin-bottom: var(--space-md); }
.stats-page-nav a { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.stats-page-nav a:hover, .stats-page-nav a:focus-visible { color: var(--accent); }
[data-shell="modern"] .stats-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); padding: var(--space-lg); }
.stats-page-header .app-page-header-content { flex: 1 1 18rem; min-width: 0; }
.stats-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; flex: 0 1 26rem; }
.stats-tile { min-width: 0; padding: var(--space-sm) var(--space-md); background: var(--bg-input); border: var(--border-width) solid var(--border-light); border-radius: var(--radius-md); }
.stats-tile dt { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; }
.stats-tile dd { margin: 0; color: var(--text-primary); font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
[data-shell="modern"] .stats-panel { gap: 0; margin-bottom: var(--space-2xl); background: var(--bg-card); border: var(--border-width) solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; }
.stats-panel .home-panel-shell-header { padding: var(--space-md) var(--space-lg); border-bottom: var(--border-width) solid var(--border-light); }
.stats-panel.is-collapsed .home-panel-shell-header { border-bottom: 0; }
.stats-panel .home-panel-shell-title { font-size: var(--fs-md); letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.stats-panel .home-panel-shell-summary { margin: 0 var(--space-lg) var(--space-lg); }
[data-shell="modern"] .stats-panel .home-hero-panel { padding: var(--space-sm) var(--space-lg) var(--space-lg); border: 0; border-radius: 0; }
.stats-panel .home-hero-panel-row:last-of-type { border-bottom: 0; }
@media (max-width: 768px) { .stats-summary { flex-basis: 100%; } .stats-tile dd { font-size: var(--fs-xl); } }
@media (max-width: 480px) { .stats-summary { gap: var(--space-xs); } .stats-tile { padding: var(--space-xs) var(--space-sm); } .stats-tile dd { font-size: var(--fs-lg); } .stats-panel .home-panel-shell-header, .stats-panel .home-panel-shell-summary, [data-shell="modern"] .stats-panel .home-hero-panel { padding-inline: var(--space-md); } }

/* Topics index: the back link and pager are controls, and the empty feed is a card with room to breathe. */
.topic-back { display:inline-flex; align-items:center; gap:var(--space-xs); color:var(--text-secondary); font-size:var(--fs-sm); font-weight:600; text-decoration:none; }
.topic-back:hover, .topic-back:focus-visible { color:var(--accent); }
.topic-pager { display:flex; align-items:center; justify-content:center; gap:var(--space-md); margin-top:var(--space-xl); }
.topic-pager-status { color:var(--text-secondary); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
.topic-empty { margin:0; padding:var(--space-xl) var(--space-lg); text-align:center; background:var(--bg-card); border:var(--border-width) dashed var(--border); border-radius:var(--radius-lg); }