/* HBTOP50 UNIFIED PORTAL DESIGN SYSTEM
 * Consolidated component architecture for public, account and admin pages.
 * Consistent headers, toolbars, filters, actions, data density and interaction states.
 */
:root {
    --bg: #080809;
    --bg-pattern: #0d090a;
    --panel: #171112;
    --panel-2: #211617;
    --panel-3: #2c1b1d;
    --panel-soft: #120d0e;
    --header-top: #2d080a;
    --header-bottom: #120607;
    --nav-top: #3a0b0d;
    --nav-bottom: #190607;
    --text: #d1c7c8;
    --text-strong: #fff4f4;
    --muted: #9f8b8d;
    --faint: #745f61;
    --line: #3a2022;
    --line-light: #543033;
    --accent: #d52b32;
    --accent-strong: #ff5960;
    --accent-dark: #8f171c;
    --gold: #d4b55d;
    --green: #6ebf73;
    --red: #e04449;
    --orange: #d2a45d;
    --blue: #c83b40;
    --purple: #a65a74;
    --page-width: 1680px;
    --radius: 3px;
    --shadow: 0 1px 3px rgba(0,0,0,.45);
    --font-ui: Verdana, Tahoma, Arial, sans-serif;
    --font-mono: Consolas, "Courier New", monospace;
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 10px;
    --space-5: 14px;
    --text-xs: 9px;
    --text-sm: 10px;
    --text-md: 12px;
    --text-lg: 15px;
    --text-xl: 22px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.10);
    --shadow-raised: 0 1px 2px rgba(0,0,0,.38), 0 8px 22px rgba(0,0,0,.16);
}
* { box-sizing: border-box; }
html { min-height: 100%; overflow-y: scroll; color-scheme: dark; background: var(--bg); }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1.55;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px),
        linear-gradient(180deg, var(--bg-pattern), var(--bg));
}
a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--text-strong); text-decoration: underline; }
img { max-width: 100%; height: auto; border: 0; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
strong { color: var(--text-strong); }
p, ul, ol, dl { margin-top: 0; }
p { margin-bottom: 10px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
h1, h2, h3, h4 { margin: 0 0 8px; color: var(--text-strong); font-family: Arial, Verdana, sans-serif; line-height: 1.2; }

h2 { font-size: 17px; }
h3 { font-size: 14px; }
h4 { font-size: 12px; }
.container { width: var(--page-width); max-width: calc(100% - 32px); margin: 0 auto; }
.muted, .field-help, .metric-note { color: var(--muted); }
.small-link, .text-link, .compact { font-size: 10px; }
.inline-form { display: inline; margin: 0; }
.light { font-weight: 400; }

/* 2010 portal chrome */
.site-topbar { min-height: 27px; color: #a58d8f; background: #080d12; border-bottom: 1px solid #351a1c; }
.site-topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 27px; font-size: 10px; }
.site-topbar-links { display: flex; gap: 14px; }
.site-topbar a { color: inherit; }
.site-header { background: linear-gradient(var(--header-top), var(--header-bottom)); border-bottom: 1px solid #080203; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.site-header-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-brand { display: inline-flex; flex-direction: column; color: #fff; text-decoration: none; text-shadow: 0 1px 2px #000; }
.site-brand:hover { color: #fff; text-decoration: none; }
.site-brand-logo { display: block; width: 250px; max-width: 100%; height: auto; }
.site-brand small { margin-top: 6px; color: #bca4a6; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.site-header-actions { display: flex; align-items: center; gap: 8px; }
.account-link, .register-link {
    display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 10px;
    color: #f0d9db; background: linear-gradient(#3a1416, #220a0c); border: 1px solid #64272b; border-radius: 2px; box-shadow: inset 0 1px rgba(255,255,255,.08); cursor: pointer;
}
.account-link:hover { color: #fff; text-decoration: none; background: linear-gradient(#4b191c, #2c0c0f); }
.register-link { color: #1e2630; background: linear-gradient(#f0d37f, #cba74e); border-color: #9d7b2e; font-weight: bold; }
.register-link:hover { color: #111; background: linear-gradient(#f7dc8d, #d9b759); text-decoration: none; }
.primary-nav { background: linear-gradient(var(--nav-top), var(--nav-bottom)); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid #080203; }
.primary-nav-inner { display: flex; min-height: 38px; }
.primary-nav a { display: flex; align-items: center; padding: 0 18px; color: #e0c8ca; font-size: 11px; font-weight: bold; text-shadow: 0 1px #000; border-left: 1px solid rgba(255,255,255,.06); border-right: 1px solid rgba(0,0,0,.18); }
.primary-nav a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.06); }
.primary-nav a.active { color: #fff; background: linear-gradient(#300b0e, #160507); box-shadow: inset 0 3px var(--gold); }

/* Main 3-column portal layout */
.site-main { padding: 14px 0 30px; }
.site-layout { display: grid; grid-template-columns: 205px minmax(0,1fr) 245px; gap: 10px; align-items: start; }
.site-layout-wide { grid-template-columns: minmax(0,1fr); }
.main-content { min-width: 0; }
.left-menubar, .right-menubar { display: grid; align-content: start; }
.sidebar-panel { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.sidebar-heading {
    display: flex; align-items: center; justify-content: space-between; margin: 0;
    color: #f5e4e5; font-size: 10px; font-weight: bold; text-transform: uppercase;
    background: linear-gradient(#3b1518, #220b0d); border-bottom: 1px solid #100506; text-shadow: 0 1px #000;
}
.sidebar-nav { display: block; }
.sidebar-nav a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; color: var(--text); border-bottom: 1px solid var(--line); background: var(--panel); }
.sidebar-nav a:last-child { border-bottom: 0; }
.sidebar-nav a:hover { color: var(--text-strong); text-decoration: none; background: var(--panel-2); }
.sidebar-nav a.active { color: var(--text-strong); font-weight: bold; background: var(--panel-3); border-left: 3px solid var(--gold); }
.sidebar-nav b { color: var(--faint); }
.sidebar-user { border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.sidebar-user strong, .sidebar-user small { display: block; }
.sidebar-user small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.sidebar-logout { padding: 8px; border-top: 1px solid var(--line); }
.sidebar-logout button, .admin-logout { width: 100%; padding: 6px 8px; color: var(--text); background: linear-gradient(var(--panel-2), var(--panel)); border: 1px solid var(--line-light); border-radius: 2px; cursor: pointer; }
.sidebar-logout button:hover, .admin-logout:hover { color: var(--text-strong); border-color: var(--red); }
.sidebar-ads { padding: 7px; }
.sidebar-ads a { display: block; margin-bottom: 7px; text-align: center; }
.sidebar-ads a:last-child { margin-bottom: 0; }
.sidebar-ads img, .sidebar-ad img { display: block; margin: auto; border: 1px solid var(--line); }

/* Right column */
.network-pulse-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.network-pulse-grid div { text-align: center; background: var(--panel-soft); border-right: 1px solid var(--line); }
.network-pulse-grid div:last-child { border-right: 0; }
.network-pulse-grid strong { display: block; color: var(--text-strong); font: bold 15px Arial, sans-serif; }
.network-pulse-grid span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); }
.live-server-list a, .activity-feed-list a { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 8px; color: var(--text); border-bottom: 1px solid var(--line); }
.live-server-list a:last-child, .activity-feed-list a:last-child { border-bottom: 0; }
.live-server-list a:hover, .activity-feed-list a:hover { color: var(--text-strong); text-decoration: none; background: var(--panel-2); }
.live-server-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-feed-list a { align-items: flex-start; justify-content: flex-start; }
.activity-icon { width: 19px; flex: 0 0 19px; color: var(--gold); text-align: center; }
.activity-feed-list a > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.activity-feed-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.latest-review { border-bottom: 1px solid var(--line); }
.latest-review:last-child { border-bottom: 0; }
.latest-review-topline, .latest-review-footer { display: flex; justify-content: space-between; gap: 6px; }
.latest-review-title { font-weight: bold; }
.review-score { color: var(--gold); font-size: 10px; }
.latest-review p { margin: 5px 0; color: var(--muted); font-size: 10px; }
.latest-review-footer { color: var(--faint); font-size: 9px; }
.sidebar-empty { margin: 0; padding: 10px; color: var(--muted); }
.ad-panel > .sidebar-ad { display: block; padding: 7px; }

/* Admin classic control panel */
.admin-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); align-items: start; }
.admin-sidebar { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.admin-sidebar nav a { padding: 8px 10px; color: var(--text); border-bottom: 1px solid var(--line); }
.admin-sidebar nav a:hover { color: var(--text-strong); text-decoration: none; background: var(--panel-2); }
.admin-sidebar nav a.active { color: var(--text-strong); font-weight: bold; background: var(--panel-3); border-left: 3px solid var(--gold); padding-left: 7px; }
.admin-sidebar form { padding: 8px; }
.admin-content { min-width: 0; }
.admin-maintenance-strip { margin-top: 10px; padding: 8px 10px; color: #fff2c5; background: #59471e; border: 1px solid #8b7134; }
/* Shared content boxes */
.panel, .account-panel-card, .nav-card, .verification-card, .login-card, .register-card, .site-form-card, .narrow-card,
.management-page, .security-check-section, .notification-center, .compare-page,
.ranking-section, .featured-section, .category-landing-hero, .discovery-hero, .account-page-hero, .account-dashboard-hero,
.account-profile-hero, .site-form-hero, .content-hero, .compact-content-hero, .vote-content-hero, .ranking-archive-hero,
.profile-login-required, .user-profile-card, .user-profile-details-card, .user-review-history-card, .maintenance-card,
.admin-site-main-card, .danger-zone-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel, .account-panel-card, .nav-card, .verification-card, .narrow-card,
.management-page, .security-check-section, .notification-center, .compare-page, .ranking-section,
.user-profile-card, .user-profile-details-card, .user-review-history-card, .admin-site-main-card, .danger-zone-card { padding: 12px; }
.content-hero, .compact-content-hero, .account-page-hero, .account-dashboard-hero, .account-profile-hero, .site-form-hero,
.discovery-hero, .category-landing-hero, .vote-content-hero, .ranking-archive-hero { margin-bottom: 10px; padding: 14px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-top: 3px solid var(--accent-dark); }

.section-heading, .clean-heading, .admin-panel-heading, .form-section-title { margin: 16px 0 9px; padding: 6px 8px; color: var(--text-strong); font-size: 12px; font-weight: bold; background: linear-gradient(var(--panel-3), var(--panel-2)); border: 1px solid var(--line); }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.content-notice, .warning-notice, .submission-guidance, .admin-login-callout, .login-notes, .settings-rule-box, .lifecycle-settings-box,
.owner-lifecycle-warning, .owner-lifecycle-warning-upcoming, .review-owner-reply-note { margin: 9px 0; padding: 8px 9px; color: var(--muted); background: var(--panel-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.warning-notice, .owner-lifecycle-warning, .owner-lifecycle-warning-upcoming { border-left-color: var(--orange); }
.empty-state, .account-empty-state, .ranking-empty, .server-empty-reviews { padding: 22px 12px; color: var(--muted); text-align: center; background: var(--panel-soft); border: 1px dashed var(--line-light); }

/* Buttons */
.btn, .btn-secondary, .btn-danger, .btn-sm, .form-actions button, .register-submit,
.review-helpful-button, .review-inline-action, .review-state-form button, .verification-actions button, .owner-reply-form button,
.admin-review-actions button, .admin-save-actions button, .admin-tool-form button, .notification-actions button, .compare-action,
.compare-clear, .pagination a, .pagination span, .filter-tabs a, .ranking-period-tabs a, .archive-pill, .schedule-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 29px; padding: 5px 9px; color: var(--text-strong); font-size: 10px; font-weight: bold; cursor: pointer;
    background: linear-gradient(var(--panel-3), var(--panel-2)); border: 1px solid var(--line-light); border-radius: 2px; box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.btn:hover, .btn-secondary:hover, .btn-sm:hover, .pagination a:hover, .filter-tabs a:hover, .ranking-period-tabs a:hover, .archive-pill:hover, .compare-action:hover, .compare-clear:hover { color: #fff; text-decoration: none; background: linear-gradient(#72191f, #431014); border-color: #9c3037; }
.btn:not(.btn-secondary):not(.btn-danger), .register-submit { color: #fff; background: linear-gradient(#d83a42, #a91f26); border-color: #ed5960 #72151a #72151a #ed5960; text-shadow: 0 1px #4e090d; }
.btn-secondary { color: var(--accent-strong); }
.btn-danger { color: #ffdede; background: linear-gradient(#7e4545, #5c3131); border-color: #a45a5a #452323 #452323 #a45a5a; }
.form-actions, .form-actions-spaced, .admin-save-actions, .verification-actions, .notification-actions,
.admin-filter-actions, .owner-site-actions, .login-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.form-actions-spaced { justify-content: space-between; }
.link-button { padding: 0; color: var(--accent-strong); cursor: pointer; background: none; border: 0; }

/* Forms */
.clean-form, .settings-form, .site-editor-form, .account-profile-form, .review-form, .vote-confirm-form, .gallery-upload-form,
.update-form, .owner-reply-form, .admin-tool-form, .anomaly-review-form, .login-form-panel,
.register-panel-inner { display: grid; gap: 10px; }
.form-grid, .two-columns, .admin-two-column, .server-overview-grid, .account-profile-summary, .verification-methods { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.three-columns { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.four-columns { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.five-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
label { color: var(--text); font-size: 10px; font-weight: bold; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="search"], select, textarea { width: 100%; color: var(--text); background: var(--panel-soft); border: 1px solid var(--line-light); outline: none; }
textarea { min-height: 90px; resize: vertical; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-dark); }
.field-help { margin-top: 3px; font-size: 9px; }
.error-list, .form-errors { margin: 0 0 10px; padding: 8px 10px 8px 26px; color: #ffd1d1; background: #4a2525; border: 1px solid #7a4040; }
.setting-toggle, .settings-check-row, .filter-check, .taxonomy-status-check { display: flex; align-items: center; gap: 6px; }

/* Feedback / announcements / ads */
.ad-slot { margin: 10px auto; text-align: center; }
.ad-slot img { display: block; max-height: 90px; margin: auto; border: 1px solid var(--line); }
.announcement-stack { display: grid; gap: 6px; margin-top: 10px; }
.announcement { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.announcement-body { flex: 1; display: grid; gap: 2px; }
.announcement-body span { color: var(--muted); }
.announcement-dismiss { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 16px; }
.flash { margin: 0 0 10px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.flash.success, .success { border-left-color: var(--green); }
.flash.error, .error { border-left-color: var(--red); }

/* Status / badges */
.badge, .badge, .badge, .listing-badge, .reviewer-signal, .type-chip, .account-status-badge, .verification-badge, .schedule-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 18px; padding: 2px 5px; color: var(--muted); font-size: 8px; font-weight: bold; text-transform: uppercase; background: var(--panel-2); border: 1px solid var(--line); border-radius: 2px; }
.status-online, .verified, .success-stat { color: #9ad59e; border-color: #477a4b; background: #203625; }
.status-offline, .danger-stat, .unverified { color: #e39b9b; border-color: #7d4545; background: #3c2323; }
.status-unknown, .warning-stat { color: #e0bf7a; border-color: #7b6638; background: #3b3320; }
/* Tables / admin data */
.table-scroll { background: var(--panel); border: 1px solid var(--line); }
.admin-table, .admin-server-table, .taxonomy-table, .anomaly-table, table { width: 100%; border-collapse: collapse; }
th { padding: 7px 8px; color: #ead9da; font-size: 9px; font-weight: bold; text-align: left; text-transform: uppercase; background: linear-gradient(#3b1518, #220b0d); border: 1px solid #331719; }
td { padding: 7px 8px; vertical-align: top; border: 1px solid var(--line); }
tbody tr:nth-child(even) td { background: var(--panel-soft); }
tbody tr:hover td { background: var(--panel-2); }
.admin-module-grid, .admin-stat-grid, .security-stat-grid, .audit-summary-grid, .analytics-summary-grid, .account-dashboard-grid,
.account-dashboard-stats, .flat-stat-grid, .category-landing-stats, .security-check-list, .admin-server-state-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.nav-card, .metric-card, .check-card, .security-check { padding: 10px; background: var(--panel-soft); border: 1px solid var(--line); }
.nav-card strong, .metric-card strong, .security-check strong { display: block; font: bold 17px Arial, sans-serif; }
.admin-detail-list, .detail-list, .account-detail-list { display: grid; grid-template-columns: 150px minmax(0,1fr); margin: 0; border-top: 1px solid var(--line); }
.admin-detail-list dt, .detail-list dt, .account-detail-list dt { padding: 6px 7px; color: var(--muted); font-size: 9px; font-weight: bold; background: var(--panel-2); border: 1px solid var(--line); border-top: 0; }
.admin-detail-list dd, .detail-list dd, .account-detail-list dd { margin: 0; padding: 6px 7px; border: 1px solid var(--line); border-top: 0; border-left: 0; }
.audit-details, .audit-json, .code-block, .code-textarea { font-family: var(--font-mono); font-size: 10px; }
.audit-json, .code-block { overflow: auto; padding: 8px; color: #e6bfc2; background: #0c0809; border: 1px solid var(--line); }
.admin-settings-tabs, .filter-tabs, .ranking-period-tabs, .archive-methods, .archive-months { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 9px; }
.admin-site-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 10px; }
.admin-site-tools { display: grid; gap: 8px; align-content: start; }
.admin-preview { padding: 8px; background: var(--panel-soft); border: 1px solid var(--line); }
.admin-review-item, .admin-report-row, .claim-review-row { margin-bottom: 8px; padding: 10px; background: var(--panel); border: 1px solid var(--line); }
.admin-review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.admin-review-text { padding: 8px 0; }
.admin-review-v2-details, .review-moderation-signals, .admin-review-report-row, .review-edit-history-row { margin-top: 7px; padding: 7px 8px; background: var(--panel-soft); border: 1px solid var(--line); }
.admin-stale-note { color: var(--orange); }
.operation-status, .admin-state, .security-check-state, .risk-score { font-weight: bold; }

/* Rankings / discovery */
.discovery-search { display: flex; gap: 6px; margin-top: 8px; }
.discovery-search-main { flex: 1; min-width: 0; }
.discovery-filters, .admin-filter-form, .admin-server-filters { margin-bottom: 9px; }
.discovery-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin: 9px 0; }
.ranking-toolbar, .archive-toolbar { margin-bottom: 7px; }
.ranking-list { overflow: hidden; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rank-row { display: grid; grid-template-columns: 52px minmax(0,1fr) 98px; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }

.rank-position { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; border-right: 1px solid var(--line); }
.rank-no { color: var(--gold); font: bold 20px Arial, sans-serif; }
.rank-medal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-height: 38px;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .24));
}
.rank-medal-1 { font-size: 45px; }
.rank-movement { font-size: 9px; font-weight: bold; }
.rank-up { color: var(--green); }
.rank-down { color: var(--red); }
.rank-same { color: var(--faint); }
.rank-main { min-width: 0; }
.rank-title-row { display: flex; flex-wrap: wrap; align-items: center; }
.rank-title-row h2 { margin: 0; }
.rank-meta-line { margin: 4px 0; color: var(--muted); }
.server-description { margin: 6px 0; color: var(--text); }
.rank-stats { display: grid; align-content: center; text-align: center; border-left: 1px solid var(--line); }
.rank-stats > div { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.rank-stats > div:last-child { border-bottom: 0; }
.rank-primary-score, .rank-secondary-score { display: block; color: var(--accent-strong); font: bold 15px Arial, sans-serif; }
.players-online { color: var(--green); }
.trending-strip { display: flex; align-items: center; gap: 9px; margin: 8px 0; padding: 7px 8px; overflow-x: auto; background: var(--panel-soft); border: 1px solid var(--line); }
.trending-links { display: flex; gap: 10px; white-space: nowrap; }
.featured-flat-list { overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.featured-flat-row { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 10px; padding: 9px; border-bottom: 1px solid var(--line); }
.featured-flat-row:last-child { border-bottom: 0; }
.featured-label { color: var(--gold); font-size: 8px; font-weight: bold; text-transform: uppercase; }
.featured-flat-banner img { border: 1px solid var(--line); }
.compare-dock {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 80;
    display: none;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    width: min(780px, calc(100vw - 32px));
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
    border: 1px solid var(--line-light);
    border-top: 2px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .42);
    transform: translate(-50%, 14px);
    opacity: 0;
    pointer-events: none;
}
.compare-dock[hidden] { display: none !important; }
.compare-dock.is-visible {
    display: grid;
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
    animation: compareDockIn .18s ease-out;
}
.compare-dock-main { min-width: 0; display: grid; gap: 6px; }
.compare-dock-heading { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.compare-dock-heading .eyebrow { margin: 0; }
.compare-dock-heading strong { color: var(--text); font-size: 11px; }
.compare-selection-list { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.compare-selection-chip {
    display: inline-flex;
    align-items: center;
    max-width: 210px;
    min-height: 24px;
    padding: 3px 8px;
    overflow: hidden;
    color: var(--text);
    font-size: 9px;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.compare-dock-hint { color: var(--muted); font-size: 9px; }
.compare-dock-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.compare-action.disabled { opacity: .48; cursor: not-allowed; pointer-events: none; }
body.compare-dock-active { padding-bottom: 84px; }
@keyframes compareDockIn {
    from { transform: translate(-50%, 12px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}
@media (max-width: 640px) {
    .compare-dock {
        bottom: 8px;
        grid-template-columns: 1fr;
        gap: 10px;
        width: calc(100vw - 16px);
        padding: 10px;
    }
    .compare-dock-heading { justify-content: space-between; }
    .compare-selection-chip { max-width: 145px; }
    .compare-dock-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .compare-dock-actions .compare-action { text-align: center; }
    body.compare-dock-active { padding-bottom: 144px; }
}
@media (prefers-reduced-motion: reduce) {
    .compare-dock.is-visible { animation: none; }
}
.ranking-reset-countdown { margin-top: 9px; padding: 9px 10px; text-align: center; background: #22313f; border: 1px solid #40566a; }
.ranking-reset-countdown strong { color: var(--gold); }
/* Compare / archives */
.compare-grid { display: grid; min-width: 720px; grid-template-columns: 160px repeat(3, minmax(190px,1fr)); }
.compare-grid > div { padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compare-label-cell { color: var(--muted); font-size: 9px; font-weight: bold; background: var(--panel-2); }
.archive-ranking-list { overflow: hidden; border: 1px solid var(--line); }
.archive-ranking-row { display: grid; grid-template-columns: 50px minmax(0,1fr) 90px; gap: 8px; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.archive-ranking-row:last-child { border-bottom: 0; }
.archive-rank-value { text-align: right; font-weight: bold; }

/* Server profile */
.server-profile { display: grid; gap: 10px; }
.list-row, .activity-item { background: var(--panel-soft); border: 1px solid var(--line); }
.rank-history-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin-bottom: 7px; }

.server-profile-header {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: start;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
}
.server-profile-heading { min-width: 0; }
.server-profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.server-metrics, .server-community-metrics, .server-health-metrics { grid-template-columns: repeat(5, minmax(0,1fr)); }
.content-list { display: grid; gap: 6px; }
.data-chart { position: relative; min-height: 140px; padding: 9px; background: var(--panel-soft); border: 1px solid var(--line); }
.chart-labels { display: flex; justify-content: space-between; color: var(--faint); font-size: 8px; }
.empty-state-compact { margin: 0; }
.report-section { border-top: 3px solid var(--orange); }
.server-review-section { border-top: 3px solid var(--gold); }
.admin-page-hero { border-left-color: var(--gold); }

/* Gallery */
.server-gallery-grid, .public-gallery-grid, .owner-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.server-gallery-item, .owner-gallery-grid > article { overflow: hidden; background: var(--panel-soft); border: 1px solid var(--line); }
.server-gallery-item:hover, .owner-gallery-grid > article:hover { border-color: var(--accent-dark); }
.server-gallery-item img, .owner-gallery-grid img, .public-gallery-grid img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.gallery-item-meta { display: flex; justify-content: space-between; gap: 6px; padding: 6px; color: var(--muted); font-size: 9px; }

/* Reviews */
.review-list { display: grid; gap: 7px; }
.review { padding: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.review:hover { border-color: var(--line-light); }
.review-quality-row, .review-meta, .review-rating-summary, .review-sort-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.review-stars { color: var(--gold); letter-spacing: .03em; }
.review-author-home { font-weight: bold; }
.review-author { font-weight: bold; font-size: 12px; }
.review-existing-state { margin: 8px 0; padding: 8px; background: var(--panel-soft); border: 1px solid var(--line); }
.owner-review-reply, .account-review-reply { margin-top: 7px; padding: 8px 9px; background: var(--panel-soft); border-left: 3px solid var(--accent); }
.owner-response-signal { color: var(--green); }
.reviewer-signal { color: var(--blue); }

/* Account / owner */
.account-hero-main, .account-profile-summary, .owner-site-main { display: flex; align-items: center; gap: 9px; }
.account-owner-actions, .owner-site-actions { margin-left: auto; }
.account-owner-site-card, .owner-site-card { padding: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.account-owner-site-card:hover, .owner-site-card:hover { border-color: var(--line-light); }
.account-public-details { color: var(--muted); }
.account-votes-panel { padding: 10px; background: var(--panel-soft); border: 1px solid var(--line); }
.notification-list { display: grid; gap: 5px; }
.notification-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; padding: 8px 9px; background: var(--panel-soft); border: 1px solid var(--line); }
.notification-type { color: var(--gold); font-size: 8px; font-weight: bold; text-transform: uppercase; }
.analytics-growth-table, .analytics-source-list { overflow: hidden; border: 1px solid var(--line); }
.analytics-growth-head, .analytics-growth-row, .analytics-source-row { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.analytics-growth-head { color: var(--text-strong); font-size: 9px; font-weight: bold; background: var(--panel-2); }
.analytics-source-row { grid-template-columns: minmax(0,1fr) auto; }

/* Vote */
.vote-button-section, .vote-confirm-section, .vote-cooldown-panel { padding: 11px; background: var(--panel); border: 1px solid var(--line); }
.vote-variant-list { display: grid; gap: 6px; }
.vote-variant-row { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 10px; padding: 8px; background: var(--panel-soft); border: 1px solid var(--line); }
.vote-variant-preview { display: grid; place-items: center; min-height: 68px; background: #080d11; border: 1px solid var(--line); }
.code-field-group, .compact-code-field { display: grid; gap: 4px; }
.code-field-heading { display: flex; justify-content: space-between; gap: 6px; }
.code-textarea { min-height: 78px; }
.vote-server-banner { margin-bottom: 8px; }
.vote-cooldown-panel { text-align: center; border-color: #7b6638; }
.inline-vote-message, .error-vote-message { padding: 7px 8px; background: var(--panel-soft); border: 1px solid var(--line); }
.vote-honeypot { position: absolute !important; left: -9999px !important; }
.vote-chart-bars { display: flex; align-items: end; gap: 2px; height: 95px; }
.vote-chart-day { flex: 1; min-width: 3px; }
.vote-chart-day > span { display: block; margin-top: 4px; min-height: 11px; color: var(--faint); font-size: 7px; text-align: center; }
.vote-chart-bars > i, .vote-chart-legend i { display: inline-block; width: 5px; min-height: 2px; background: var(--blue); }
.vote-chart-bars .visit-bar, .vote-chart-legend .visit-bar { background: var(--purple); }
.vote-chart-bars .accepted-bar, .vote-chart-legend .accepted-bar { background: var(--green); }
.vote-chart-legend { justify-content: flex-start; gap: 10px; margin-top: 6px; }
.vote-chart-legend span { display: inline-flex; align-items: center; gap: 4px; }

/* Auth / registration / maintenance */
.login-card, .register-card { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(300px,1.2fr); overflow: hidden; }
.login-intro, .register-hero { padding: 20px; background: linear-gradient(135deg, var(--panel-3), var(--panel-2)); border-right: 1px solid var(--line); }
.login-form-panel, .register-section { padding: 20px; }
.login-form-heading { margin-bottom: 10px; }
.login-note-icon, .register-role-icon { color: var(--gold); font-size: 20px; }
.register-choice-note { color: var(--muted); }
.register-toggle { display: flex; width: 100%; justify-content: space-between; padding: 8px; color: var(--text); background: var(--panel-soft); border: 1px solid var(--line); cursor: pointer; }
.register-toggle:hover { background: var(--panel-2); }
.register-accordion { display: grid; gap: 6px; }
.register-caret { color: var(--gold); }
.maintenance-page-shell { display: grid; min-height: 60vh; place-items: center; }
.maintenance-card { width: min(580px,100%); padding: 26px; text-align: center; }
.maintenance-emblem { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 14px; color: var(--gold); font-size: 18px; background: var(--panel-2); border: 1px solid var(--line-light); }
.maintenance-contact { margin-top: 14px; }

/* Submission / verification / taxonomy */
.submission-flow { display: grid; grid-template-columns: repeat(4,1fr); margin: 9px 0; overflow: hidden; border: 1px solid var(--line); }
.submission-flow > * { padding: 7px; text-align: center; background: var(--panel-2); border-right: 1px solid var(--line); }
.submission-flow > *:last-child { border-right: 0; }
.verification-method { padding: 9px; background: var(--panel-soft); border: 1px solid var(--line); }
.verification-status-row, .verification-last-check { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.banner-mode-options { display: grid; gap: 6px; }
.banner-mode-option { padding: 7px; background: var(--panel-soft); border: 1px solid var(--line); }
.banner-current-preview { padding: 8px; background: #080d11; border: 1px solid var(--line); }
.taxonomy-edit-grid { display: grid; grid-template-columns: minmax(130px,1fr) minmax(130px,1fr) 75px 75px; gap: 5px; }
.taxonomy-seo-details { margin-top: 6px; }
.taxonomy-delete-note { color: var(--muted); font-size: 9px; }

/* Security center */
.security-check-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
.security-check { position: relative; padding-left: 13px; }
.security-check::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--line); }
.security-check[data-state="ok"]::before { background: var(--green); }
.security-check[data-state="warn"]::before { background: var(--orange); }
.security-check[data-state="danger"]::before { background: var(--red); }

/* Footer */
.site-footer { color: #8596a4; background: #080d12; border-top: 1px solid #263946; }
.site-footer-inner { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0 22px; font-size: 10px; }
.site-footer a { color: inherit; }

/* Responsive */
@media (max-width: 1100px) {
    .site-layout { grid-template-columns: 190px minmax(0,1fr); }
}
@media (max-width: 820px) {
    .site-header-inner { min-height: 74px; }
    .primary-nav-inner { overflow-x: auto; }
    .primary-nav a { flex: 0 0 auto; }
    .site-layout, .admin-layout { grid-template-columns: 1fr; }
    .left-menubar { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-sidebar nav { display: flex; overflow-x: auto; }
    .admin-sidebar nav a { flex: 0 0 auto; border-bottom: 0; border-right: 1px solid var(--line); }
    .admin-sidebar form, .admin-sidebar > .sidebar-heading { display: none; }
    .login-card, .register-card { grid-template-columns: 1fr; }
    .login-intro, .register-hero { border-right: 0; border-bottom: 1px solid var(--line); }
    .security-check-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .container { max-width: calc(100% - 12px); }
    .site-topbar-inner { justify-content: center; }
    .site-topbar-links { display: none; }
    .site-header-inner { min-height: 66px; }
    .site-brand-logo { width: 220px; }
    .site-brand small { display: none; }
    .site-header-actions .account-link { display: none; }
    .primary-nav a { padding: 0 12px; }

    .left-menubar { grid-template-columns: 1fr; }
    .form-grid, .two-columns, .admin-two-column, .server-overview-grid, .account-profile-summary, .verification-methods,
    .three-columns, .four-columns, .five-stat-grid, .admin-module-grid, .admin-stat-grid, .security-stat-grid, .audit-summary-grid,
    .analytics-summary-grid, .account-dashboard-grid, .account-dashboard-stats, .flat-stat-grid, .category-landing-stats,
    .admin-server-state-grid, .server-metrics, .server-community-metrics, .server-health-metrics, .profile-community-stats,
    .server-gallery-grid, .public-gallery-grid, .owner-gallery-grid { grid-template-columns: 1fr; }

    
    .featured-flat-row, .vote-variant-row, .server-profile-header { grid-template-columns: 1fr; }
    .discovery-filters, .admin-filter-form, .admin-server-filters { grid-template-columns: 1fr 1fr; }
    .taxonomy-edit-grid, .submission-flow { grid-template-columns: 1fr; }
    .site-footer-inner { flex-direction: column; gap: 5px; }
}

/* ========================================================================== 
   SHARED PAGE COMPONENT SYSTEM
   Page-specific PHP keeps semantic hooks only where behavior/layout differs.
   Common presentation comes from the reusable primitives below.
   ========================================================================== */

/* Vertical rhythm */
.main-content > * + *,
.admin-content > * + * { margin-top: 10px; }

/* Unified surfaces */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Unified page hero */
.page-hero {
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--gold);
}

/* Unified headings */
.panel-heading,
.section-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin: 0 0 10px;
    padding: 0 0 7px;
    color: var(--text-strong);
    font: 700 13px/1.25 Arial, Verdana, sans-serif;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
}
.section-heading-row,
.compare-page-head,
.admin-review-heading,
.verification-status-row,
.live-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Unified grids */
.stat-grid { display: grid; gap: 8px; }
.stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }

.stat-grid > *,
.metric-card,
.check-card,
.security-check {
    padding: 10px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
}
.metric-card strong,
.security-check strong { display: block; font: 700 17px/1.2 Arial, sans-serif; }

/* Unified definition/detail list */
.detail-list {
    display: grid;
    grid-template-columns: 150px minmax(0,1fr);
    margin: 0;
    border-top: 1px solid var(--line);
}
.detail-list dt {
    padding: 6px 7px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-top: 0;
}
.detail-list dd {
    margin: 0;
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-top: 0;
    border-left: 0;
}

/* Unified empty state */
.empty-state {
    padding: 22px 12px;
    color: var(--muted);
    text-align: center;
    background: var(--panel-soft);
    border: 1px dashed var(--line-light);
}

/* Unified tables */
.table-scroll { overflow-x: auto; border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { white-space: nowrap; }

/* Shared compact content */
.eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}
.field-help,
.compact-copy,
.register-summary,
.discovery-hero-copy,
.category-landing-copy,
.profile-description { color: var(--muted); }

/* Common account/profile blocks */
.account-hero-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font: 700 22px/1 Arial, sans-serif;
    background: var(--panel-soft);
    border: 1px solid var(--line-light);
    border-radius: var(--radius);
}
.account-profile-panel { margin-top: 9px; }

/* Admin component density */
.admin-sidebar { position: sticky; top: 10px; overflow: hidden; }
.admin-server-filters,
.admin-filter-form,
.admin-tool-form,
.status-bulk-actions {
    padding: 9px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
}
.admin-server-title-cell,
.taxonomy-main-cell { min-width: 180px; }

/* Small utility normalization */
.banner { display: block; width: 100%; max-width: var(--server-banner-max-width, 468px); overflow: hidden; border: 1px solid var(--line); background: var(--panel-soft); }
.review-meta,
.activity-meta,
.vote-variant-meta { color: var(--muted); font-size: 10px; }
.activity-title,
.featured-title,
.archive-server-title,
.preview-name { color: var(--text-strong); font-weight: 700; }
.empty-state-compact { padding: 14px; }
.inline-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.following-row, .update-row, .admin-report-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.following-main, .admin-report-main { min-width: 0; flex: 1; }
.following-rankmark { flex: 0 0 auto; min-width: 34px; color: var(--gold); font-weight: bold; text-align: center; }
.admin-report-moderation { min-width: 220px; }
.right-menubar .sidebar-panel { overflow: hidden; border-radius: var(--radius); }
.site-main { min-height: calc(100vh - 210px); }

@media (max-width: 820px) {
    .admin-sidebar { position: static; }
    .section-heading-row,
        .compare-page-head,
    .verification-status-row { align-items: flex-start; flex-direction: column; }
    .admin-report-moderation { min-width: 0; width: 100%; }
}

@media (max-width: 620px) {
    .page-hero,
    .panel { padding: 11px; }
    .stat-grid-4,
    .stat-grid-5,
    .form-grid-2,
    .form-grid-3,
    .form-grid-4 { grid-template-columns: 1fr; }
    .detail-list { grid-template-columns: 1fr; }
    .detail-list dd { border-left: 1px solid var(--line); }
    .account-hero-avatar { width: 44px; height: 44px; flex-basis: 44px; font-size: 18px; }
}

/* Unified visual architecture */
.page-hero {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line); border-top: 3px solid var(--accent-dark); border-radius: var(--radius); box-shadow: var(--shadow);
}
.page-hero > :first-child { min-width: 0; }
.page-hero h1 { margin-bottom: 5px; }
.page-hero p:last-child { margin-bottom: 0; }
.page-hero .action-group { flex: 0 0 auto; justify-content: flex-end; }
.page-hero-compact { padding-top: 11px; padding-bottom: 11px; }

.action-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.action-group > select, .action-group > input { width: auto; min-width: 130px; }
.action-group > .muted { align-self: center; }

.toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    margin: 0 0 9px; padding: 7px 8px; background: var(--panel-soft); border: 1px solid var(--line);
}
.toolbar > :only-child { width: 100%; }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-toolbar > :first-child { min-width: 0; }

.filter-bar {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end;
    margin: 0 0 10px; padding: 9px; background: var(--panel-soft); border: 1px solid var(--line);
}
.filter-bar label { display: grid; gap: 4px; align-content: end; }
.filter-bar .action-group { align-self: end; min-height: 32px; }
.filter-bar .filter-check { display: flex; min-height: 32px; align-items: center; padding: 0 7px; background: var(--panel); border: 1px solid var(--line); }
.discovery-search > .filter-bar { flex: 1 1 100%; margin-bottom: 0; }

.data-panel { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); box-shadow: none; }
.data-panel table { margin: 0; }
.data-panel th { height: 30px; padding: 6px 8px; white-space: nowrap; }
.data-panel td { padding: 7px 8px; }
.data-panel tbody tr { transition: background-color .12s ease; }
.data-panel tbody tr:hover td { background: var(--panel-2); }
.data-panel .btn, .data-panel .btn-sm { min-height: 25px; padding: 3px 7px; }

.panel, .account-panel-card, .nav-card { margin-bottom: 10px; }
.panel > .panel-heading:first-child { margin-top: 0; }
.panel-heading { min-height: 34px; }
.content-list { border: 1px solid var(--line); background: var(--panel); }
.content-list > .list-row { margin: 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
.content-list > .list-row:last-child { border-bottom: 0; }

.btn, .btn-sm, button, input, select, textarea { transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, color .12s ease; }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn[disabled], button[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; }

.admin-content > .page-hero:first-child, .main-content > .page-hero:first-child { margin-top: 0; }
.admin-content > .panel:first-child:not(.page-hero) > .panel-heading:first-child { margin-top: 0; }

@media (max-width: 820px) {
    .page-hero { align-items: flex-start; flex-direction: column; }
    .page-hero .action-group { width: 100%; justify-content: flex-start; }
    .panel-toolbar { align-items: flex-start; flex-direction: column; }
    .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .toolbar { align-items: stretch; flex-direction: column; }
    .filter-bar { grid-template-columns: 1fr; }
    .filter-bar .action-group { width: 100%; }
    .filter-bar .action-group > * { flex: 1 1 auto; }
    .action-group > select, .action-group > input { width: 100%; min-width: 0; }
    .data-panel th, .data-panel td { padding-left: 6px; padding-right: 6px; }
}

/* Information density and component hierarchy */
.panel { margin-bottom: var(--space-4); padding: 12px; }
.page-hero { margin-bottom: var(--space-4); }
.stat-grid > .panel { margin-bottom: 0; }
.metric-card,
.stat-grid > .metric-card {
    min-width: 0; padding: 10px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
.metric-card b, .metric-card strong,
.stat-grid > * > b:first-child, .stat-grid > * > strong:first-child {
    display: block; margin-bottom: 3px; color: var(--text-strong); font: 700 17px/1.15 Arial, sans-serif;
}
.metric-card span, .stat-grid > * > span:last-child { color: var(--muted); font-size: var(--text-xs); }
.nav-card {
    display: block; min-width: 0; padding: 11px; color: var(--text); background: var(--panel-soft);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.nav-card:hover { color: var(--text-strong); text-decoration: none; background: var(--panel-2); border-color: var(--line-light); }
.nav-card strong { display: block; margin-bottom: 4px; font: 700 14px/1.2 Arial, sans-serif; }
.nav-card span { color: var(--muted); font-size: var(--text-sm); }
.btn-secondary, .btn.btn-secondary, .btn.light {
    color: var(--accent-strong); background: linear-gradient(var(--panel-3), var(--panel-2)); border-color: var(--line-light); text-shadow: none;
}
.btn-secondary:hover, .btn.btn-secondary:hover, .btn.light:hover {
    color: #fff; background: linear-gradient(#72191f, #431014); border-color: #9c3037;
}
.btn-danger, .btn.btn-danger {
    color: #ffdede; background: linear-gradient(#7e4545, #5c3131); border-color: #a45a5a #452323 #452323 #a45a5a; text-shadow: none;
}
.btn-danger:hover, .btn.btn-danger:hover { color: #fff; background: linear-gradient(#925050, #693838); border-color: #b56a6a; }
.btn-sm { min-height: 25px !important; padding: 3px 7px !important; font-size: 9px !important; }
.badge {
    display: inline-flex; align-items: center; gap: 4px; min-height: 18px; padding: 2px 5px; color: var(--muted);
    font-size: 8px; font-weight: 700; line-height: 1.2; text-transform: uppercase; background: var(--panel-2); border: 1px solid var(--line); border-radius: 2px;
}
.rank-row, .list-row, .activity-item, .claim-review-row { transition: background-color .12s ease, border-color .12s ease; }
.list-row, .activity-item { padding: 9px 10px; }
.content-list > .list-row:hover, .activity-item:hover { background: var(--panel-2); }
.rank-main { padding: 10px 12px; }

.rank-meta-line { font-size: var(--text-xs); }
.data-panel th { font-size: var(--text-xs); }
.data-panel td { font-size: var(--text-sm); }
.data-panel .action-group { gap: 4px; }
@media (max-width: 620px) {
    .metric-card, .nav-card { padding: 9px; }
    .rank-row { grid-template-columns: 44px minmax(0,1fr); }
    .rank-stats { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 0; }
    .rank-stats > div { border-bottom: 0; border-right: 1px solid var(--line); }
    .rank-stats > div:last-child { border-right: 0; }
}

/* Final visual polish */
body { letter-spacing: .002em; }
h1 { font-size: 23px; letter-spacing: -.02em; }
h2 { letter-spacing: -.01em; }
.eyebrow { letter-spacing: .08em; }
.muted, .field-help, .metric-note { line-height: 1.45; }

/* More deliberate surfaces without changing the classic portal footprint. */
.panel, .sidebar-panel, .admin-sidebar, .ranking-list, .page-hero, .server-profile-header { box-shadow: var(--shadow-soft); }
.page-hero, .server-profile-header { overflow: hidden; position: relative; }
.page-hero::after, .server-profile-header::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.17), transparent);
}
.page-hero h1, .server-profile-header h1 { font-size: 24px; }
.page-hero p { max-width: 720px; color: var(--muted); }
.panel-heading {
    margin: 0 0 10px; padding: 7px 9px; border-color: var(--line); border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
}
.panel-heading h2, .panel-heading h3 { margin-bottom: 2px; }
.section-heading:not(.panel-heading) { border-radius: var(--radius-sm); }

/* Ranking: clearer scan path and more premium top positions. */
.ranking-list { border-radius: var(--radius-md); }
.rank-row { min-height: 104px; position: relative; background: var(--panel); }
.rank-row:hover { background: linear-gradient(90deg, var(--panel-2), var(--panel-soft)); }
.rank-position { background: linear-gradient(180deg, var(--panel-2), var(--panel-soft)); }
.rank-no { font-size: 21px; letter-spacing: -.04em; }
.rank-row-top-1 .rank-position { box-shadow: inset 3px 0 var(--gold); }
.rank-row-top-2 .rank-position { box-shadow: inset 3px 0 #a9b4bd; }
.rank-row-top-3 .rank-position { box-shadow: inset 3px 0 #a8794e; }
.rank-row-top .rank-no { text-shadow: 0 1px rgba(0,0,0,.35); }
.rank-title-row { gap: 7px; }
.rank-title-row h2 { font-size: 16px; line-height: 1.25; }
.rank-title-row h2 a { color: var(--text-strong); }
.rank-title-row h2 a:hover { color: var(--accent-strong); text-decoration: none; }
.server-description { max-width: 760px; line-height: 1.55; }
.rank-meta-line { display: flex; flex-wrap: wrap; gap: 4px 9px; line-height: 1.5; }
.rank-stats { background: linear-gradient(180deg, var(--panel-soft), rgba(0,0,0,.04)); }
.rank-stats > div { min-height: 48px; display: grid; place-content: center; }
.rank-primary-score, .rank-secondary-score { font-size: 16px; }
.featured-flat-row { align-items: center; transition: background-color .12s ease; }
.featured-flat-row:hover { background: var(--panel-soft); }
.featured-flat-banner img { display: block; width: 100%; }
.trending-strip { border-radius: var(--radius-sm); }

/* Server profile: identity first, data second. */
.server-profile-header { padding: 16px; border-top-color: var(--gold); box-shadow: var(--shadow-raised); }
.server-profile-heading > .eyebrow { margin-bottom: 6px; }
.server-profile-heading h1 { margin-bottom: 7px; }
.server-profile-actions { align-self: start; max-width: 320px; }
.server-metrics, .server-community-metrics, .server-health-metrics { gap: 7px; }
.server-metrics > *, .server-community-metrics > *, .server-health-metrics > * {
    padding: 10px 8px; min-width: 0; text-align: center; background: var(--panel-soft);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.server-metrics > * b, .server-community-metrics > *b, .server-health-metrics > * b { display: block; margin-bottom: 3px; color: var(--text-strong); font: 700 16px/1.15 Arial,sans-serif; }
.data-chart, .rank-history-chart { border-radius: var(--radius-sm); }
.data-chart svg polyline, .rank-history-chart svg polyline { stroke: var(--accent-strong); stroke-width: 2; }
.server-gallery-item { border-radius: var(--radius-sm); transition: border-color .12s ease, transform .12s ease; }
.server-gallery-item:hover { transform: translateY(-1px); }
.review-rating-summary { min-width: 115px; padding: 8px 10px; text-align: right; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.review-rating-summary > span { display: block; }
.review-rating-summary .review-score { color: var(--gold); font-size: 15px; font-weight: 700; }
.review-form, .owner-reply-form { padding: 10px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* Sidebars: denser directory feel with cleaner hierarchy. */
.left-menubar, .right-menubar { gap: 9px; }
.sidebar-panel { overflow: hidden; border-radius: var(--radius-md); }
.sidebar-heading { min-height: 31px; padding: 7px 9px; letter-spacing: .055em; }
.sidebar-nav a { min-height: 31px; align-items: center; padding-top: 6px; padding-bottom: 6px; }
.sidebar-nav a:hover { padding-left: 11px; }
.sidebar-nav a.active { padding-left: 7px; }
.sidebar-user { padding: 9px; }
.network-pulse-grid div { padding: 11px 4px 9px; }
.network-pulse-grid strong { font-size: 16px; }
.live-server-list a, .activity-feed-list a { min-height: 34px; }
.latest-review { padding: 9px; }
.latest-review-title { color: var(--text-strong); }

/* Forms: stronger labels, calmer fields, predictable feedback. */
.clean-form label, .settings-form label, .site-editor-form label, .account-profile-form label,
.review-form label, .login-form-panel label, .register-panel-inner label { display: grid; gap: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"],
input[type="date"], input[type="datetime-local"], input[type="search"], select, textarea {
    min-height: 34px; padding: 7px 8px; border-radius: var(--radius-sm); box-shadow: inset 0 1px 1px rgba(0,0,0,.12);
}
textarea { line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--line-light); }
input:focus, select:focus, textarea:focus { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(108,168,207,.12); }
::placeholder { color: var(--faint); opacity: 1; }
.filter-bar, .toolbar { border-radius: var(--radius-sm); }

/* Feedback states: recognizable at a glance in both themes. */
.flash, .content-notice, .warning-notice, .submission-guidance, .review-existing-state,
.error-list, .form-errors, .empty-state { border-radius: var(--radius-sm); }
.flash { position: relative; padding: 9px 11px 9px 13px; box-shadow: var(--shadow-soft); }
.flash.success { background: var(--panel); }
.flash.error { background: var(--panel); }
.empty-state { min-height: 82px; display: grid; place-content: center; line-height: 1.55; }
.empty-state-compact { min-height: 0; }
.error-list, .form-errors { line-height: 1.55; }

/* Admin: same product, slightly denser control surface. */
.admin-layout { gap: 12px; }
.admin-sidebar { border-radius: var(--radius-md); }
.admin-sidebar nav a { min-height: 33px; display: flex; align-items: center; }
.admin-content .data-panel { border-radius: var(--radius-sm); }
.admin-content .panel-toolbar { min-height: 34px; }
.admin-review-item, .admin-report-row, .claim-review-row { border-radius: var(--radius-sm); box-shadow: none; }

/* Better three-column behavior before switching to single-column mobile. */
@media (max-width: 1180px) {
    :root { --page-width: 1120px; }
    .site-layout { grid-template-columns: 190px minmax(0,1fr) 225px; }
}
@media (max-width: 980px) {
    .site-layout { grid-template-columns: 180px minmax(0,1fr); }
    .right-menubar { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .right-menubar > .sidebar-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .right-menubar { grid-template-columns: 1fr; }
    .server-profile-actions { max-width: none; width: 100%; justify-content: flex-start; }
    .server-metrics, .server-community-metrics, .server-health-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
    h1, .page-hero h1, .server-profile-header h1 { font-size: 20px; }
    .site-main { padding-top: 10px; }
    .rank-row { min-height: 0; }
    .rank-main { padding: 10px; }
    .rank-stats > div { min-height: 42px; }
    .server-profile-header { padding: 12px; }
    .server-metrics, .server-health-metrics { grid-template-columns: 1fr 1fr; }
    .server-gallery-grid, .public-gallery-grid, .owner-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .review-rating-summary { width: 100%; text-align: left; }
}
@media (max-width: 420px) {
    .server-gallery-grid, .public-gallery-grid, .owner-gallery-grid { grid-template-columns: 1fr; }
    .server-metrics, .server-health-metrics { grid-template-columns: 1fr; }
}

/* Phase 10: page-level UX refinement */
.dashboard-section { display: grid; gap: 8px; }
.dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 2px 0 8px;
    padding: 0 2px;
}
.dashboard-section-heading h2 { margin: 1px 0 0; font-size: 17px; }
.dashboard-section-heading > .muted { max-width: 520px; text-align: right; }
.dashboard-content-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: 10px; }

.ranking-toolbar-copy { min-width: 0; }
.ranking-result-summary { margin: 4px 0 0; color: var(--muted); font-size: var(--text-xs); }
.rank-view-button { width: 100%; justify-content: center; margin-top: 2px; }

.admin-attention-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius-sm);
}
.admin-attention-strip strong { display: block; margin-top: 2px; font-size: 16px; }
.admin-primary-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.admin-secondary-modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.admin-dashboard-metrics { margin-bottom: 2px; }
.dashboard-metrics-heading { margin-top: 2px; }

.server-profile-trustline {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin-top: 7px;
    color: var(--muted);
    font-size: var(--text-xs);
}
.server-profile-trustline span + span { position: relative; }
.server-profile-trustline span + span::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--muted);
}
.server-quick-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px;
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    scrollbar-width: thin;
}
.server-quick-nav a {
    flex: 0 0 auto;
    padding: 6px 9px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.server-quick-nav a:hover,
.server-quick-nav a:focus-visible { color: var(--text); background: var(--panel-2); }
.profile-anchor-section { scroll-margin-top: 12px; }

@media (max-width: 980px) {
    .admin-primary-modules, .admin-secondary-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .dashboard-section-heading,
    .admin-attention-strip { align-items: flex-start; flex-direction: column; }
    .dashboard-section-heading > .muted { text-align: left; }
    .admin-attention-strip .action-group { width: 100%; }
    .admin-primary-modules, .admin-secondary-modules { grid-template-columns: 1fr; }
    .rank-view-button { width: auto; }
    .server-profile-trustline span + span::before { display: none; }
}

.rank-view-button { grid-column: 1 / -1; }

/* Phase 11: role-aware navigation and owner workspace */
.account-identity {
    min-width: 132px;
    justify-content: flex-start;
}
.account-identity-copy {
    display: grid;
    line-height: 1.15;
}
.account-identity-copy strong {
    color: inherit;
    font-size: 10px;
    font-weight: 700;
}
.account-identity-copy small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .045em;
}
.header-notification-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 9px;
    color: #cdb9bb;
    background: rgba(5, 13, 20, .28);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: var(--radius-sm);
    font-size: 9px;
    font-weight: 700;
}
.header-notification-link > span:first-child {
    color: var(--faint);
    font-size: 7px;
}
.header-notification-link:hover,
.header-notification-link.has-unread {
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .07);
}
.header-notification-link.has-unread > span:first-child {
    color: var(--gold);
    text-shadow: 0 0 8px rgba(222, 183, 78, .6);
}
.header-notification-link b,
.nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    color: #19130a;
    background: var(--gold);
    border-radius: 999px;
    font-size: 8px;
    line-height: 1;
}
.account-nav {
    background: var(--panel);
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid var(--line);
}
.account-nav-inner {
    display: flex;
    align-items: stretch;
    min-height: 34px;
    overflow-x: auto;
}
.account-nav-label {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 12px 0 2px;
    color: var(--faint);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.account-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 12px;
    color: var(--muted);
    border-left: 1px solid rgba(255, 255, 255, .035);
    font-size: 9px;
    font-weight: 700;
}
.account-nav a:hover {
    color: var(--text-strong);
    text-decoration: none;
    background: var(--panel-2);
}
.account-nav a.active {
    color: var(--text-strong);
    background: var(--panel-3);
    box-shadow: inset 0 -2px var(--gold);
}

.owner-workspace-summary {
    margin-bottom: 10px;
}
.owner-server-heading {
    margin-top: 3px;
}
.account-owner-site-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr);
    gap: 14px;
    align-items: start;
}
.account-owner-site-card .owner-site-main {
    min-width: 0;
}
.account-owner-actions {
    display: grid;
    gap: 9px;
    align-content: start;
    margin-left: 0;
    padding-left: 13px;
    border-left: 1px solid var(--line);
}
.owner-site-statusline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-height: 24px;
}
.owner-primary-actions {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}
.owner-primary-actions .btn:first-child {
    flex: 1 1 auto;
}
.owner-tool-group {
    display: grid;
    gap: 6px;
}
.owner-tool-label {
    color: var(--faint);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.owner-tool-actions {
    gap: 5px;
}
.owner-tool-actions .btn {
    min-height: 26px;
}

@media (max-width: 980px) {
    .account-owner-site-card {
        grid-template-columns: 1fr;
    }
    .account-owner-actions {
        padding: 10px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (max-width: 720px) {
    .header-notification-link > span:nth-child(2),
    .account-identity-copy small {
        display: none;
    }
    .header-notification-link {
        padding: 0 7px;
    }
    .account-identity {
        min-width: 0;
    }
    .account-nav-label {
        display: none;
    }
    .account-nav-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .account-nav a {
        padding: 0 10px;
    }
    .owner-workspace-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .header-notification-link {
        min-width: 30px;
        justify-content: center;
    }
    .header-notification-link > span:nth-child(2) {
        display: none;
    }
    .header-notification-link b {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
    }
    .owner-workspace-summary {
        grid-template-columns: 1fr 1fr;
    }
    .owner-primary-actions .btn {
        flex: 1 1 100%;
    }
}

.account-owner-site-card .owner-site-main {
    display: block;
}
.account-owner-site-card .owner-site-main > h2 {
    margin: 3px 0 6px;
}
.account-owner-site-card .verification-badge {
    display: inline-flex;
    margin-bottom: 7px;
}
.account-owner-site-card .compact-facts {
    margin-top: 2px;
}

.account-nav-logout {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    margin-left: auto;
}
.account-nav-logout button {
    padding: 0 11px;
    color: var(--faint);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--line);
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}
.account-nav-logout button:hover {
    color: var(--text-strong);
    background: var(--panel-2);
}

@media (max-width: 720px) {
    .account-nav-logout {
        margin-left: 0;
    }
}

/* Phase 12: final shell, discovery and navigation UX */
.site-topbar-context {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.site-topbar-context strong {
    color: #e5d4d5;
    font-size: 9px;
    letter-spacing: .08em;
}
.site-topbar-context > span {
    color: #a68d90;
}
.site-header-inner {
    min-height: 82px;
}
.site-brand-logo {
    width: 250px;
}
.site-brand small {
    margin-top: 5px;
}
.primary-nav-inner {
    min-height: 36px;
}
.primary-nav a {
    position: relative;
    min-height: 36px;
    padding-inline: 15px;
}
.primary-nav a.active {
    box-shadow: inset 0 -2px var(--gold);
}

.discovery-hero {
    gap: 18px;
    padding: 16px;
}
.discovery-hero-copy {
    flex: 0 1 330px;
}
.discovery-hero-copy h1 {
    max-width: 360px;
    margin-bottom: 7px;
}
.discovery-search {
    display: grid;
    grid-template-columns: 1fr;
    flex: 1 1 520px;
    gap: 7px;
    margin-top: 0;
}
.discovery-search-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}
.discovery-search-main input {
    min-height: 39px;
    padding-inline: 11px;
    font-size: 12px;
}
.discovery-search-main button {
    min-width: 92px;
    min-height: 39px;
    padding-inline: 14px;
    color: #17130b;
    background: linear-gradient(#f0d37f, #cba74e);
    border: 1px solid #9d7b2e;
    border-radius: var(--radius-sm);
    font-weight: 800;
    cursor: pointer;
}
.discovery-search-main button:hover {
    background: linear-gradient(#f7dc8d, #d9b759);
}
.discovery-filter-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 1px;
}
.discovery-filter-heading span {
    color: var(--text-strong);
    font-size: var(--text-xs);
    font-weight: 800;
}
.discovery-filter-heading small {
    color: var(--faint);
    font-size: 8px;
}
.discovery-filters.filter-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto auto;
    gap: 6px;
    padding: 7px;
}
.discovery-filters .filter-check {
    white-space: nowrap;
}
.discovery-filters .clear-filters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 8px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.discovery-filters .clear-filters:hover {
    color: var(--text-strong);
    text-decoration: none;
    background: var(--panel-2);
}

.category-browser {
    padding: 10px;
}
.category-browser-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.category-browser-heading .eyebrow {
    margin-bottom: 2px;
}
.category-browser-heading > a {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
}
.category-browser-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}
.category-browser-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-height: 31px;
    padding: 6px 8px;
    color: var(--text);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 700;
}
.category-browser-links a:hover,
.category-browser-links a.active {
    color: var(--text-strong);
    text-decoration: none;
    background: var(--panel-2);
    border-color: var(--line-light);
}
.category-browser-links a.active {
    box-shadow: inset 2px 0 var(--gold);
}
.category-browser-links b {
    color: var(--faint);
}

.pagination-window {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}
.pagination-window a,
.pagination-window span {
    margin: 0;
}
.pagination-window .pagination-edge {
    min-width: 76px;
}
.pagination-window .pagination-edge.disabled {
    opacity: .38;
    pointer-events: none;
}
.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 29px;
    color: var(--faint);
}

.ranking-reset-countdown {
    display: grid;
    gap: 3px;
    border-radius: var(--radius-sm);
}
.ranking-reset-countdown small {
    color: #aab8c3;
}
.site-footer {
    margin-top: 6px;
}
.site-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(130px, .65fr) minmax(130px, .65fr);
    gap: 28px;
    padding: 24px 0 26px;
}
.site-footer-brand strong,
.site-footer-nav > strong {
    display: block;
    margin-bottom: 7px;
    color: #eadcdd;
    font-size: 10px;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.site-footer-brand p {
    max-width: 520px;
    margin-bottom: 7px;
    color: #b19b9d;
    line-height: 1.55;
}
.site-footer-brand small {
    color: #8f7779;
    font-size: 8px;
}
.site-footer-nav {
    display: grid;
    align-content: start;
    gap: 6px;
}
.site-footer-nav a {
    width: fit-content;
    color: #b19b9d;
    font-size: 9px;
}
.site-footer-nav a:hover {
    color: #fff;
    text-decoration: none;
}
/* Restore right-side widgets as an under-content grid at the Phase 8 breakpoint. */
@media (max-width: 980px) {
    .right-menubar {
        display: grid;
    }
    .discovery-hero {
        flex-direction: column;
    }
    .discovery-hero-copy {
        flex-basis: auto;
    }
    .discovery-search {
        width: 100%;
    }
    .discovery-filters.filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .category-browser-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .site-topbar-context > span,
    .site-topbar-links a:not(:first-child) {
        display: none;
    }
    .site-topbar-inner {
        justify-content: space-between;
    }
    .site-header-inner {
        min-height: 68px;
    }
    .site-brand-logo {
        width: 220px;
    }
    .category-browser-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .site-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .site-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .discovery-search-main {
        grid-template-columns: 1fr;
    }
    .discovery-search-main button {
        width: 100%;
    }
    .discovery-filter-heading small {
        display: none;
    }
    .discovery-filters.filter-bar,
    .category-browser-links {
        grid-template-columns: 1fr;
    }
    .category-browser-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .pagination-window .pagination-edge {
        min-width: 0;
    }
    .site-footer-grid {
        grid-template-columns: 1fr;
    }
    .site-footer-brand {
        grid-column: auto;
    }
}

/* Phase 13: Home / ranking visual redesign
   Restrained leaderboard styling: clearer hierarchy without podium gimmicks or neon effects. */

/* Discovery header: compact, useful, and visually subordinate to the actual leaderboard. */
.discovery-hero {
    align-items: stretch;
    padding: 15px 16px;
    background:
        linear-gradient(110deg, rgba(205, 169, 80, .055), transparent 38%),
        linear-gradient(180deg, var(--panel-2), var(--panel));
}
.discovery-hero-copy {
    display: flex;
    flex: 0 0 300px;
    flex-direction: column;
    justify-content: center;
    padding-right: 6px;
}
.discovery-hero-copy h1,
.discovery-hero-copy h2 {
    max-width: 360px;
    margin: 1px 0 6px;
    color: var(--text-strong);
    font-size: 22px;
    line-height: 1.16;
    letter-spacing: -.025em;
}
.discovery-hero-category .discovery-hero-copy h2 {
    font-size: 18px;
}
.discovery-search {
    padding: 10px;
    background: rgba(0, 0, 0, .07);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}
.discovery-search-main input {
    background: var(--panel);
}
.discovery-filter-heading {
    padding-inline: 1px;
}
.discovery-filters.filter-bar {
    padding: 0;
    background: transparent;
    border: 0;
}

/* Category directory: useful navigation, not a second hero. */
.category-browser {
    padding: 11px 12px;
    border-top: 0;
}
.category-browser-heading {
    margin-bottom: 9px;
}
.category-browser-heading strong {
    font-size: 13px;
}
.category-browser-links {
    gap: 6px;
}
.category-browser-links a {
    min-height: 34px;
    padding: 7px 9px;
    background: var(--panel);
}
.category-browser-links a:hover {
    transform: translateY(-1px);
}

/* Promotional listings remain visibly separate from organic ranking. */
.compact-featured-section {
    padding: 0;
    overflow: hidden;
}
.compact-featured-section > .panel-heading {
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}
.featured-flat-list {
    border: 0;
}
.featured-flat-row {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    gap: 14px;
    padding: 11px 12px;
}
.featured-flat-copy {
    min-width: 0;
}
.featured-title {
    display: block;
    width: fit-content;
    margin: 3px 0 4px;
    font-size: 14px;
}
.featured-flat-copy p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}
.featured-flat-banner {
    justify-self: end;
    width: 100%;
    max-width: 260px;
}
.featured-flat-banner img {
    max-height: 72px;
    object-fit: contain;
}

/* Secondary discovery content is deliberately quiet so ranking remains the page focus. */
.trending-strip {
    min-height: 38px;
    padding: 7px 10px;
    background: var(--panel);
}
.trending-strip > strong {
    flex: 0 0 auto;
    color: var(--text-strong);
    font-size: 9px;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.trending-links a {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}
.trending-links a:hover {
    color: var(--text-strong);
    text-decoration: none;
}
.trending-links a span {
    margin-left: 2px;
    color: var(--green);
    font-size: 8px;
}
.discovery-quick-grid > div {
    min-width: 0;
    padding: 9px 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.discovery-quick-grid > div > .eyebrow {
    margin-bottom: 5px;
}
.discovery-quick-grid > div > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    color: var(--text);
    border-top: 1px solid var(--line);
}
.discovery-quick-grid > div > a:first-of-type {
    border-top: 0;
}
.discovery-quick-grid > div > a:hover {
    color: var(--text-strong);
    text-decoration: none;
}
.discovery-quick-grid > div > a strong {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.discovery-quick-grid > div > a small {
    flex: 0 0 auto;
    color: var(--faint);
    font-size: 8px;
}

/* Ranking shell: leaderboard first, chrome second. */
.ranking-section {
    padding: 0;
    overflow: hidden;
    border-color: var(--line-light);
    box-shadow: var(--shadow-raised);
}
.ranking-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 12px 13px;
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
    border-bottom: 1px solid var(--line-light);
}
.ranking-toolbar-copy h2 {
    margin: 1px 0 0;
    color: var(--text-strong);
    font-size: 17px;
    line-height: 1.2;
}
.ranking-result-summary {
    margin-top: 3px;
}
.ranking-period-tabs {
    flex: 0 0 auto;
    margin: 0;
    padding: 3px;
    background: rgba(0, 0, 0, .12);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.ranking-period-tabs a {
    min-height: 27px;
    padding: 5px 9px;
    border-color: transparent;
    background: transparent;
}
.ranking-period-tabs a.active {
    color: var(--text-strong);
    background: var(--panel);
    border-color: var(--line-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}

.ranking-list {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.rank-row {
    grid-template-columns: 66px minmax(0, 1fr) 126px;
    min-height: 118px;
    background: var(--panel);
    border-bottom-color: var(--line-light);
}
.rank-row:hover {
    z-index: 1;
    background: linear-gradient(90deg, var(--panel-2), var(--panel));
    box-shadow: inset 0 0 0 1px var(--line-light);
}
.rank-row-top {
    background:
        linear-gradient(90deg, rgba(205, 169, 80, .045), transparent 36%),
        var(--panel);
}
.rank-row-top-1 {
    background:
        linear-gradient(90deg, rgba(218, 183, 91, .085), transparent 42%),
        var(--panel);
}
.rank-position {
    gap: 4px;
    padding: 10px 5px;
    background: var(--panel-soft);
}
.rank-position-label {
    color: var(--faint);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.rank-no {
    color: var(--text-strong);
    font-size: 23px;
    line-height: 1;
}
.rank-row-top-1 .rank-no {
    color: var(--gold);
    font-size: 42px;
}
.rank-row-top-2 .rank-no {
    color: #d1c4c5;
    font-size: 42px;
}
.rank-row-top-3 .rank-no {
    color: #ba8b60;
    font-size: 42px;
}
.rank-movement {
    min-height: 12px;
}
.compare-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
    color: var(--faint);
    font-size: 7px;
    cursor: pointer;
}
.compare-pick input {
    width: 11px;
    height: 11px;
    margin: 0;
}
.compare-pick:hover {
    color: var(--text);
}

.rank-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 11px 13px;
}
.rank-banner-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 8px;
}
.rank-banner {
    width: auto;
    max-width: min(100%, var(--server-banner-max-width, 468px));
    max-height: var(--server-banner-max-height, 60px);
    object-fit: contain;
}
.rank-title-row {
    gap: 6px 8px;
}
.rank-title-row h2 {
    font-size: 16px;
    letter-spacing: -.012em;
}
.rank-inline-badges {
    gap: 3px;
}
.rank-meta-line {
    gap: 3px 8px;
    margin: 5px 0 3px;
    color: var(--muted);
    font-size: 11px;
    font-family: "Segoe UI";
}
.rank-meta-line > span:not(.badge) {
    position: relative;
}
.rank-meta-line > span:not(.badge) + span:not(.badge)::before {
    content: "·";
    margin-right: 8px;
    color: var(--faint);
}
.server-description {
    display: -webkit-box;
    overflow: hidden;
    max-width: 740px;
    margin: 4px 0 5px;
    font-size: 14px;
    font-family: "Segoe UI";
    color: var(--text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.45;
}

.rank-stats {
    align-content: stretch;
    grid-template-rows: 1fr 1fr auto;
    background: var(--panel-soft);
}
.rank-stats > div {
    min-height: 0;
    padding: 9px 7px;
}
.rank-primary-score,
.rank-secondary-score {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rank-primary-score span,
.rank-secondary-score span {
    color: var(--faint);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.25;
    text-transform: uppercase;
}
.rank-primary-score b,
.rank-secondary-score b {
    margin-top: 2px;
    color: var(--text-strong);
    font-size: 17px;
    line-height: 1.05;
}
.rank-primary-score b {
    color: var(--gold);
    font-size: 19px;
}
.rank-view-button {
    grid-column: auto;
    width: auto;
    margin: 7px;
    justify-content: center;
    white-space: nowrap;
}
.rank-row-top-1 .rank-view-button {
    border-color: rgba(205, 169, 80, .55);
}

.ranking-section > .pagination-window {
    margin: 0;
    padding: 11px 12px;
    background: var(--panel-2);
    border-top: 1px solid var(--line);
}
.ranking-empty {
    border: 0;
}

/* The reset notice is footer information, not another attention-grabbing card. */
.ranking-reset-countdown {
    gap: 2px;
    margin-top: 8px;
    padding: 9px 12px;
    background: var(--panel-soft);
    border-color: var(--line);
    text-align: left;
}
.ranking-reset-countdown strong {
    color: var(--text-strong);
    font-size: 9px;
}
.ranking-reset-countdown small,
@media (max-width: 980px) {
    .discovery-hero-copy {
        flex-basis: auto;
        padding-right: 0;
    }
    .ranking-toolbar {
        align-items: flex-start;
    }
    .rank-row {
        grid-template-columns: 58px minmax(0, 1fr) 116px;
    }
}

@media (max-width: 720px) {
    .featured-flat-row {
        grid-template-columns: 1fr;
    }
    .featured-flat-banner {
        justify-self: start;
        max-width: var(--server-banner-max-width, 468px);
    }
    .ranking-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }
    .ranking-period-tabs {
        width: fit-content;
        max-width: 100%;
    }
    .rank-row {
        grid-template-columns: 50px minmax(0, 1fr);
    }
    .rank-stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        grid-template-rows: auto;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .rank-stats > div {
        min-height: 48px;
        border-right: 1px solid var(--line);
        border-bottom: 0;
    }
    .rank-view-button {
        align-self: center;
        margin: 7px;
    }
}

@media (max-width: 520px) {
    .discovery-hero {
        padding: 11px;
    }
    .discovery-search {
        padding: 8px;
    }
    .discovery-hero-copy h1,
    .discovery-hero-copy h2 {
        font-size: 19px;
    }
    .discovery-quick-grid {
        grid-template-columns: 1fr;
    }
    .ranking-toolbar {
        padding: 10px;
    }
    .ranking-period-tabs {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }
    .ranking-period-tabs a {
        justify-content: center;
        padding-inline: 5px;
        text-align: center;
    }
    .rank-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }
    .rank-position {
        padding-inline: 3px;
    }
    .rank-position-label,
    .compare-pick span {
        display: none;
    }
    .rank-no {
        font-size: 19px;
    }
    .rank-row-top-1 .rank-no,
    .rank-row-top-2 .rank-no,
    .rank-row-top-3 .rank-no {
        font-size: 21px;
    }
    .rank-main {
        padding: 9px 10px;
    }
    .rank-title-row h2 {
        font-size: 14px;
    }
    .server-description {
        -webkit-line-clamp: 3;
    }
    .rank-stats {
        grid-template-columns: 1fr 1fr;
    }
    .rank-view-button {
        grid-column: 1 / -1;
        width: auto;
        margin: 0 7px 7px;
    }
}

/* Server details: aligned profile layout */
.server-profile {
    gap: 12px;
}

.server-profile-header {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
    gap: 18px;
    align-items: center;
    padding: 18px;
}

.server-profile-heading {
    display: grid;
    align-content: start;
    gap: 0;
}

.server-profile-heading h1 {
    margin: 0;
    font-size: 25px;
    line-height: 1.15;
}

.server-detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.server-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: center;
    width: 100%;
    max-width: none;
    gap: 7px;
}

.server-profile-actions form {
    display: block;
    margin: 0;
}

.server-profile-actions .btn,
.server-profile-actions form .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding-inline: 9px;
    text-align: center;
    white-space: nowrap;
}

.server-quick-nav {
    justify-content: flex-start;
    min-height: 38px;
    padding: 4px;
}

.server-quick-nav a {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
}

.server-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    padding: 8px 10px;
    overflow: hidden;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.server-banner .profile-banner {
    display: block;
    width: auto;
    max-width: min(100%, var(--server-banner-max-width, 468px));
    height: auto;
    max-height: var(--server-banner-max-height, 60px);
    object-fit: contain;
}

.server-metrics,
.server-health-metrics,
.server-community-metrics {
    display: grid;
    align-items: stretch;
    gap: 7px;
}

.server-metrics > *,
.server-health-metrics > *,
.server-community-metrics > * {
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    min-height: 72px;
    padding: 10px 8px;
    text-align: center;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.server-metrics .metric-label,
.server-community-metrics .metric-label {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.25;
}

.server-metrics .metric-value,
.server-community-metrics .metric-value {
    display: block;
    color: var(--text-strong);
    font-size: 16px;
    line-height: 1.2;
}

.server-health-metrics > span {
    gap: 4px;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.25;
}

.server-health-metrics > span > b {
    margin: 0;
    color: var(--text-strong);
    font-size: 16px;
    line-height: 1.2;
}

.server-profile > .panel,
.server-review-section,
.report-section {
    margin: 0;
}

.server-profile .panel {
    overflow: hidden;
}

.server-profile .panel-heading,
.server-review-section > .section-heading {
    margin-bottom: 10px;
}

.server-section-heading,
.server-profile .panel-heading.section-heading-row {
    align-items: center;
}

.server-overview-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(245px, .85fr);
    gap: 16px;
    align-items: start;
}

.server-overview-grid > div:first-child {
    min-width: 0;
}

.profile-description {
    margin-top: 0;
    line-height: 1.65;
}

.server-overview-grid .detail-list {
    grid-template-columns: 118px minmax(0, 1fr);
    align-self: start;
    width: 100%;
}

.server-overview-grid .detail-list dt,
.server-overview-grid .detail-list dd {
    min-width: 0;
    padding: 7px 8px;
}

.server-overview-grid .detail-list dd {
    overflow-wrap: anywhere;
}

.server-health-section .data-chart,
.rank-history-section .rank-history-chart {
    margin-top: 9px;
}

.rank-history-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 9px;
}

.rank-history-summary > span {
    display: grid;
    align-content: center;
    min-height: 58px;
    padding: 8px;
    color: var(--muted);
    text-align: center;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.rank-history-summary > span > b {
    display: block;
    margin-bottom: 3px;
    color: var(--text-strong);
    font-size: 15px;
}

.server-gallery-grid {
    gap: 9px;
}

.server-gallery-item {
    display: block;
}

.server-updates-section .content-list article {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px 10px;
}

.server-updates-section .content-list time {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

.server-updates-section .content-list h3 {
    margin: 0 0 3px;
}

.server-updates-section .content-list p {
    margin: 0;
}

.server-community-summary {
    border-top: 2px solid var(--line-light);
}

.server-review-section {
    display: grid;
    gap: 10px;
}

.server-review-section > .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.review-rating-summary {
    min-width: 126px;
    margin: 0;
}

.review-sort-bar {
    justify-content: flex-end;
    margin: 0;
    padding: 7px 8px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.review-sort-bar label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.review-sort-bar select {
    min-width: 150px;
}

.review {
    margin: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.review-meta {
    align-items: flex-start;
}

.report-section {
    margin-top: 12px;
}

.report-section > details > summary {
    cursor: pointer;
    font-weight: 700;
}

@media (max-width: 820px) {
    .server-profile-header {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .server-profile-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-overview-grid {
        grid-template-columns: 1fr;
    }

    .server-overview-grid .detail-list {
        grid-template-columns: 130px minmax(0, 1fr);
    }

    .server-metrics,
    .server-community-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .server-health-metrics,
    .rank-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .server-profile-header {
        padding: 13px;
    }

    .server-profile-heading h1 {
        font-size: 21px;
    }

    .server-profile-actions {
        grid-template-columns: 1fr 1fr;
    }

    .server-quick-nav {
        margin-inline: 0;
    }

    .server-metrics,
    .server-community-metrics,
    .server-health-metrics,
    .rank-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-overview-grid .detail-list {
        grid-template-columns: 108px minmax(0, 1fr);
    }

    .server-updates-section .content-list article {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .server-review-section > .section-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .review-rating-summary {
        width: 100%;
        min-width: 0;
        text-align: left;
    }
}

@media (max-width: 390px) {
    .server-profile-actions {
        grid-template-columns: 1fr;
    }

    .server-metrics,
    .server-community-metrics,
    .server-health-metrics,
    .rank-history-summary {
        grid-template-columns: 1fr;
    }

    .server-overview-grid .detail-list {
        grid-template-columns: 1fr;
    }

    .server-overview-grid .detail-list dd {
        border-left: 1px solid var(--line);
    }
}

/* Phase 15: Account dashboard visual redesign */
.account-dashboard-profile-hero {
    align-items: center;
    padding: 18px;
}
.account-dashboard-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 13px;
}
.account-dashboard-identity .account-hero-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    font-size: 23px;
    border-radius: 50%;
}
.account-dashboard-identity-copy { min-width: 0; }
.account-dashboard-identity-copy h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
}
.account-dashboard-identity-copy > p {
    max-width: 570px;
    margin: 5px 0 0;
    color: var(--muted);
}
.account-dashboard-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 12px;
    margin-top: 9px;
    color: var(--muted);
    font-size: var(--text-xs);
}
.account-dashboard-meta > span:not(:first-child) { position: relative; }
.account-dashboard-meta > span:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--muted);
}
.account-dashboard-hero-actions {
    flex: 0 0 auto;
    align-self: center;
}

.account-dashboard-overview { margin-top: 12px; }
.account-dashboard-section-heading {
    align-items: flex-end;
    margin-bottom: 8px;
}
.account-dashboard-section-heading h2 { margin: 1px 0 0; }
.account-dashboard-section-heading > p {
    max-width: 500px;
    margin: 0;
    text-align: right;
}
.account-dashboard-stats { gap: 7px; }
.account-metric-card {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px;
    border-top: 2px solid var(--line-light);
}
.account-metric-card .account-metric-label {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.account-metric-card b {
    color: var(--text-strong);
    font-size: 20px;
    line-height: 1;
}
.account-metric-card small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

.account-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(250px, .78fr) minmax(0, 1.45fr);
    align-items: start;
    gap: 12px;
    margin-top: 12px;
}
.account-dashboard-sidebar,
.account-dashboard-main {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
}
.account-dashboard-layout .panel { margin-bottom: 0; }
.account-panel-heading {
    justify-content: space-between;
    align-items: flex-start;
    min-height: 0;
}
.account-panel-heading > div { min-width: 0; }
.account-panel-heading h2 {
    margin: 0;
    font-size: 15px;
}
.account-panel-heading p {
    margin: 3px 0 0;
    font-size: var(--text-xs);
}

.account-profile-snapshot { padding: 13px; }
.account-profile-facts {
    display: grid;
    margin: 0;
}
.account-profile-facts > div {
    display: grid;
    grid-template-columns: minmax(82px, .72fr) minmax(0, 1.25fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}
.account-profile-facts > div:last-child { border-bottom: 0; }
.account-profile-facts dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}
.account-profile-facts dd {
    min-width: 0;
    margin: 0;
    color: var(--text);
    text-align: right;
    overflow-wrap: anywhere;
}
.account-profile-bio {
    margin-top: 9px;
    padding: 10px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.account-profile-bio p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.account-vote-history-panel { padding: 13px; }
.account-vote-list { display: grid; }
.account-vote-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}
.account-vote-row:last-child { border-bottom: 0; }
.account-vote-server { min-width: 0; }
.account-vote-server a,
.account-vote-server strong {
    display: block;
    color: var(--text-strong);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-vote-server span,
.account-vote-row time {
    color: var(--muted);
    font-size: 9px;
}
.account-vote-row time {
    white-space: nowrap;
    text-align: right;
}

.account-review-history-panel { padding: 13px; }
.account-review-list {
    display: grid;
    gap: 8px;
}
.account-review-card {
    padding: 11px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.account-review-card:hover { border-color: var(--line-light); }
.account-review-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.account-review-server { min-width: 0; }
.account-review-server > a,
.account-review-server > strong {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 700;
}
.account-review-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}
.account-review-rating {
    color: var(--gold);
    font-weight: 700;
}
.account-review-copy {
    margin: 9px 0 0;
    color: var(--text);
    line-height: 1.5;
}
.account-review-reply {
    margin-top: 10px;
    padding: 9px 10px;
    border-left-width: 2px;
}
.account-review-reply-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.account-review-reply-head strong { color: var(--text-strong); }
.account-review-reply-head span {
    color: var(--muted);
    font-size: 9px;
    white-space: nowrap;
}
.account-review-reply p {
    margin: 5px 0 0;
    color: var(--muted);
}
.account-dashboard-empty {
    display: grid;
    justify-items: start;
    gap: 5px;
    padding: 16px;
    text-align: left;
}
.account-dashboard-empty strong { color: var(--text-strong); }
.account-dashboard-empty .btn { margin-top: 3px; }

@media (max-width: 980px) {
    .account-dashboard-layout {
        grid-template-columns: minmax(230px, .82fr) minmax(0, 1.2fr);
    }
    .account-dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .account-dashboard-profile-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    .account-dashboard-hero-actions { width: 100%; }
    .account-dashboard-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
    .account-dashboard-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .account-dashboard-section-heading > p { text-align: left; }
    .account-dashboard-layout { grid-template-columns: 1fr; }
    .account-dashboard-main { order: 1; }
    .account-dashboard-sidebar { order: 2; }
}

@media (max-width: 560px) {
    .account-dashboard-profile-hero { padding: 13px; }
    .account-dashboard-identity { align-items: flex-start; }
    .account-dashboard-identity .account-hero-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 18px;
    }
    .account-dashboard-identity-copy h1 { font-size: 19px; }
    .account-dashboard-meta > span::before { display: none; }
    .account-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-metric-card:last-child { grid-column: 1 / -1; }
    .account-review-card-head,
    .account-review-reply-head { align-items: flex-start; flex-direction: column; }
    .account-profile-facts > div { grid-template-columns: 1fr; gap: 3px; }
    .account-profile-facts dd { text-align: left; }
}

@media (max-width: 380px) {
    .account-dashboard-stats { grid-template-columns: 1fr; }
    .account-metric-card:last-child { grid-column: auto; }
    .account-dashboard-hero-actions { flex-direction: column; }
    .account-dashboard-hero-actions .btn { width: 100%; }
    .account-vote-row { grid-template-columns: 1fr; gap: 3px; }
    .account-vote-row time { text-align: left; }
}

/* ============================================================
   PHASE 16 — ACCOUNT WORKSPACE / AUTH / SERVER FORM REDESIGN
   ============================================================ */

/* Shared account workspace rhythm */
.account-settings-hero,
.following-hero,
.profile-editor-hero,
.site-editor-hero {
    margin-bottom: 12px;
    padding: 16px 18px;
}
.account-settings-hero h1,
.following-hero h1,
.profile-editor-hero h1,
.site-editor-hero h1 {
    margin: 2px 0 5px;
    font-size: 22px;
}
.account-settings-hero p,
.following-hero p,
.profile-editor-hero p,
.site-editor-hero p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
}

/* Notification preferences */
.account-settings-layout {
    display: grid;
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.75fr);
    align-items: start;
    gap: 12px;
}
.account-settings-summary,
.account-settings-panel {
    margin: 0;
}
.account-settings-summary {
    padding: 16px;
}
.account-settings-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    color: var(--text-strong);
    font: 700 17px/1 Arial, sans-serif;
    background: var(--panel-3);
    border: 1px solid var(--line-light);
    border-radius: var(--radius-md);
}
.account-settings-summary h2 {
    margin-bottom: 6px;
    font-size: 16px;
}
.account-settings-summary > p {
    color: var(--muted);
    line-height: 1.55;
}
.account-settings-facts,
.profile-editor-facts {
    margin: 14px 0 0;
    border-top: 1px solid var(--line);
}
.account-settings-facts > div,
.profile-editor-facts > div {
    display: grid;
    grid-template-columns: minmax(78px, .75fr) minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}
.account-settings-facts dt,
.profile-editor-facts dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}
.account-settings-facts dd,
.profile-editor-facts dd {
    min-width: 0;
    margin: 0;
    color: var(--text-strong);
    text-align: right;
    overflow-wrap: anywhere;
}
.account-settings-panel {
    padding: 16px;
}
.account-settings-heading {
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.notification-setting-group {
    display: grid;
}
.notification-setting-row {
    position: relative;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center !important;
    gap: 12px !important;
    min-height: 68px;
    margin: 0 !important;
    padding: 12px 2px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}
.notification-setting-row:last-child { border-bottom: 0; }
.notification-setting-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.notification-setting-control {
    position: relative;
    width: 34px;
    height: 18px;
    background: var(--panel-soft);
    border: 1px solid var(--line-light);
    border-radius: 20px;
    transition: .15s ease;
}
.notification-setting-control::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--muted);
    border-radius: 50%;
    transition: .15s ease;
}
.notification-setting-row input:checked + .notification-setting-control {
    background: var(--accent-dark);
    border-color: var(--accent);
}
.notification-setting-row input:checked + .notification-setting-control::after {
    left: 18px;
    background: var(--text-strong);
}
.notification-setting-row input:focus-visible + .notification-setting-control {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.notification-setting-copy {
    display: grid;
    gap: 3px;
}
.notification-setting-copy strong {
    font-size: 12px;
}
.notification-setting-copy small {
    color: var(--muted);
    line-height: 1.45;
}
.account-settings-actions,
.profile-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

/* Following */
.following-hero {
    align-items: center;
}
.following-hero-summary {
    display: grid;
    justify-items: end;
    min-width: 120px;
}
.following-hero-summary strong {
    color: var(--text-strong);
    font: 700 24px/1 Arial, sans-serif;
}
.following-hero-summary span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}
.following-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
}
.following-toolbar > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.following-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.following-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 13px;
}
.following-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.following-card-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    color: inherit;
}
.following-card-identity:hover { text-decoration: none; }
.following-card-identity > span:last-child {
    display: grid;
    min-width: 0;
}
.following-card-identity strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.following-card-identity small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}
.following-card-avatar,
.following-card-banner {
    flex: 0 0 48px;
    width: 48px;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}
.following-card-avatar {
    display: grid;
    place-items: center;
    color: var(--text-strong);
    font: 700 16px/1 Arial, sans-serif;
}
.following-card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.following-card-description {
    min-height: 38px;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}
.following-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    padding-top: 9px;
    color: var(--muted);
    font-size: 9px;
    border-top: 1px solid var(--line);
}
.following-card-meta b { color: var(--text); }
.following-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.following-card-actions form { margin: 0; }
.following-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 34px 18px;
    text-align: center;
}
.following-empty-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--text-strong);
    font-size: 20px;
    background: var(--panel-3);
    border: 1px solid var(--line-light);
    border-radius: 50%;
}

/* Profile editor */
.profile-editor-hero {
    align-items: center;
}
.profile-editor-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}
.profile-form-errors {
    margin-bottom: 12px;
}
.profile-form-errors > strong {
    display: block;
    margin-bottom: 5px;
}
.profile-form-errors ul {
    margin: 0;
    padding-left: 18px;
}
.profile-editor-layout {
    display: grid;
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.75fr);
    align-items: start;
    gap: 12px;
}
.profile-editor-sidebar,
.profile-editor-panel {
    margin: 0;
    padding: 16px;
}
.profile-editor-sidebar {
    text-align: center;
}
.profile-editor-avatar-large {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 10px;
    color: var(--text-strong);
    font: 700 23px/1 Arial, sans-serif;
    background: var(--panel-3);
    border: 1px solid var(--line-light);
    border-radius: 50%;
}
.profile-editor-sidebar h2 {
    margin-bottom: 5px;
    font-size: 16px;
}
.profile-editor-sidebar > p {
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.55;
    text-align: left;
}
.profile-editor-facts { text-align: left; }
.profile-editor-heading {
    margin-bottom: 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--line);
}
.profile-editor-form {
    display: grid;
    gap: 12px;
}
.profile-editor-form label {
    display: grid;
    gap: 5px;
    margin: 0;
}
.profile-editor-form label > span {
    color: var(--text-strong);
    font-size: 10px;
    font-weight: 700;
}
.profile-editor-form textarea { resize: vertical; }
.profile-editor-form input[readonly] {
    color: var(--muted);
    background: var(--panel-soft);
}

/* Login / authentication */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
    width: min(880px, 100%);
    margin: 18px auto 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised);
}
.auth-shell > .panel {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.auth-intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 390px;
    padding: 28px;
    background: linear-gradient(145deg, var(--panel-2), var(--panel));
    border-right: 1px solid var(--line) !important;
}
.auth-intro h1 {
    margin: 3px 0 8px;
    font-size: 28px;
}
.auth-intro > div:first-child > p {
    max-width: 460px;
    color: var(--muted);
    line-height: 1.65;
}
.auth-benefits {
    display: grid;
    gap: 8px;
    margin: 22px 0;
}
.auth-benefits > div {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0,0,0,.08);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.auth-benefit-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--accent-strong);
    font-weight: 700;
    background: var(--panel-soft);
    border: 1px solid var(--line-light);
    border-radius: 50%;
}
.auth-benefits > div > span:last-child {
    display: grid;
    gap: 2px;
}
.auth-benefits small {
    color: var(--muted);
    line-height: 1.45;
}
.auth-intro-footer {
    display: flex;
    gap: 6px;
    color: var(--muted);
    font-size: 10px;
}
.auth-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    background: var(--panel-soft);
}
.auth-form-heading {
    margin-bottom: 18px;
}
.auth-form-heading h2 {
    margin: 3px 0 5px;
    font-size: 20px;
}
.auth-form-heading p {
    margin: 0;
    color: var(--muted);
}
.auth-form {
    display: grid;
    gap: 12px;
}
.auth-form label {
    display: grid;
    gap: 5px;
}
.auth-form label > span {
    color: var(--text-strong);
    font-size: 10px;
    font-weight: 700;
}
.auth-form input {
    min-height: 38px;
}
.auth-submit {
    width: 100%;
    min-height: 38px;
    margin-top: 3px;
    justify-content: center;
}
.auth-register-mobile { display: none; }
.auth-admin-link {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 13px;
    color: var(--muted);
    font-size: 9px;
    border-top: 1px solid var(--line);
}

/* Server create / edit workspace */
.site-editor-layout {
    display: grid;
    grid-template-columns: minmax(235px, .68fr) minmax(0, 1.9fr);
    align-items: start;
    gap: 12px;
}
.site-editor-sidebar,
.site-editor-main {
    margin: 0;
}
.site-editor-sidebar {
    position: sticky;
    top: 12px;
    padding: 16px;
}
.site-editor-sidebar h2 {
    margin: 4px 0 7px;
    font-size: 16px;
}
.site-editor-sidebar > p {
    color: var(--muted);
    line-height: 1.55;
}
.site-editor-checklist {
    display: grid;
    margin-top: 14px;
    border-top: 1px solid var(--line);
}
.site-editor-checklist > div {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.site-editor-checklist b {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--text-strong);
    background: var(--panel-3);
    border: 1px solid var(--line-light);
    border-radius: 50%;
    font-size: 9px;
}
.site-editor-checklist span {
    display: grid;
    gap: 2px;
}
.site-editor-checklist small {
    color: var(--muted);
    line-height: 1.4;
}
.site-editor-tip {
    display: grid;
    gap: 3px;
    margin-top: 14px;
    padding: 10px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.site-editor-tip span {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}
.site-editor-main {
    padding: 0 16px 16px;
    overflow: hidden;
}
.site-editor-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 -16px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
}
.site-editor-progress span {
    padding: 10px 8px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    border-right: 1px solid var(--line);
}
.site-editor-progress span:last-child { border-right: 0; }
.site-editor-progress span.active {
    color: var(--text-strong);
    background: var(--panel-2);
    box-shadow: inset 0 -2px var(--gold);
}
.site-editor-main .error-list {
    margin: 0 0 14px;
}
.site-editor-form {
    display: grid;
    gap: 12px;
}
.site-editor-form > label,
.site-editor-form .form-grid > label {
    display: grid;
    gap: 5px;
    margin: 0;
}
.site-editor-form .form-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 8px 0 0;
    padding: 13px 0 9px;
    font-size: 14px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
}
.site-editor-form .form-section-title:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.site-editor-form .form-section-title > span {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 22px;
    color: var(--accent-strong);
    font-size: 9px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.site-editor-form input,
.site-editor-form select,
.site-editor-form textarea {
    width: 100%;
}
.site-editor-form textarea { resize: vertical; }
.site-editor-main .banner-form-box {
    margin: 0;
    padding: 13px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.site-editor-main .banner-form-box h3 {
    margin-bottom: 4px;
}
.site-editor-main .banner-mode-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 9px 0 11px;
}
.site-editor-main .banner-mode-option,
.site-editor-main .check-card {
    margin: 0;
}
.site-editor-main .check-card {
    min-height: 38px;
    padding: 8px 9px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.site-editor-main .check-card:hover {
    border-color: var(--line-light);
}
.site-editor-main .form-actions-spaced {
    margin-top: 7px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .account-settings-layout,
    .profile-editor-layout,
    .site-editor-layout {
        grid-template-columns: 1fr;
    }
    .site-editor-sidebar {
        position: static;
    }
    .site-editor-checklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
    }
    .auth-shell {
        grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    }
    .following-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .account-settings-hero,
    .following-hero,
    .profile-editor-hero,
    .site-editor-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
    }
    .following-hero-summary {
        justify-items: start;
        min-width: 0;
    }
    .following-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .following-toolbar > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }
    .profile-editor-identity {
        align-items: flex-start;
    }
    .auth-shell {
        grid-template-columns: 1fr;
        margin-top: 10px;
    }
    .auth-intro {
        min-height: 0;
        padding: 20px;
        border-right: 0 !important;
        border-bottom: 1px solid var(--line) !important;
    }
    .auth-intro h1 { font-size: 23px; }
    .auth-benefits { margin: 16px 0; }
    .auth-form-panel { padding: 20px; }
    .site-editor-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .site-editor-progress span:nth-child(2) { border-right: 0; }
    .site-editor-progress span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 480px) {
    .account-settings-summary,
    .account-settings-panel,
    .profile-editor-sidebar,
    .profile-editor-panel {
        padding: 13px;
    }
    .notification-setting-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px !important;
    }
    .account-settings-actions,
    .profile-editor-actions,
    .following-card-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .account-settings-actions .btn,
    .profile-editor-actions .btn,
    .following-card-actions .btn,
    .following-card-actions form,
    .following-card-actions form button {
        width: 100%;
        justify-content: center;
    }
    .following-card-top {
        align-items: flex-start;
    }
    .following-card-description { min-height: 0; }
    .profile-editor-identity .account-hero-avatar { display: none; }
    .profile-editor-facts > div,
    .account-settings-facts > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .profile-editor-facts dd,
    .account-settings-facts dd { text-align: left; }
    .auth-intro { display: none; }
    .auth-shell { border-radius: var(--radius-sm); }
    .auth-form-panel { padding: 17px; }
    .auth-register-mobile {
        display: grid;
        gap: 7px;
        margin-top: 14px;
        padding-top: 14px;
        color: var(--muted);
        text-align: center;
        border-top: 1px solid var(--line);
    }
    .site-editor-checklist { grid-template-columns: 1fr; }
    .site-editor-main { padding: 0 13px 13px; }
    .site-editor-progress { margin-right: -13px; margin-left: -13px; }
}

/* ============================================================
   PHASE 17 — CONSISTENT 3-COLUMN ACCOUNT / AUTH FORM LAYOUT
   Keep the standard portal shell on account/auth pages while
   removing nested layouts that made the center column too narrow.
   ============================================================ */

/* Never let center-column forms shrink below their own content width. */
.center-content-column,
.center-content-column > *,
.account-settings-layout,
.profile-editor-layout,
.site-editor-layout,
.auth-shell,
.following-grid {
    min-width: 0;
}

/* These pages now use the same outer 3-column shell as rankings/server pages. */
.account-settings-hero,
.following-hero,
.profile-editor-hero,
.site-editor-hero,
.auth-shell {
    width: 100%;
    max-width: none;
}

/* Notification preferences: summary becomes a compact context strip above the form. */
.account-settings-layout {
    grid-template-columns: 1fr;
    gap: 10px;
}
.account-settings-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0 12px;
    align-items: start;
    padding: 13px 14px;
}
.account-settings-summary .account-settings-icon {
    grid-row: 1 / span 2;
    margin: 0;
}
.account-settings-summary h2 {
    margin: 0 0 4px;
}
.account-settings-summary > p {
    margin: 0;
}
.account-settings-facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 12px;
}
.account-settings-facts > div {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 7px 10px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    border-right: 1px solid var(--line);
}
.account-settings-facts > div:last-child { border-right: 0; }
.account-settings-facts dd { text-align: left; }
.account-settings-panel { padding: 14px; }
.notification-setting-row { min-height: 62px; }

/* Following: one readable card per row inside the center column. */
.following-grid {
    grid-template-columns: 1fr;
}
.following-card {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    padding: 12px 13px;
}
.following-card-top,
.following-card-description,
.following-card-meta {
    grid-column: 1;
}
.following-card-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    flex-direction: column;
    min-width: 105px;
}
.following-card-actions .btn,
.following-card-actions form,
.following-card-actions form button {
    width: 100%;
}
.following-card-description { min-height: 0; }

/* Profile: identity summary above a full-width editor instead of beside it. */
.profile-editor-layout {
    grid-template-columns: 1fr;
    gap: 10px;
}
.profile-editor-sidebar {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 12px;
    padding: 13px 14px;
    text-align: left;
}
.profile-editor-avatar-large {
    grid-row: 1 / span 2;
    margin: 0;
}
.profile-editor-sidebar h2 {
    margin: 0;
}
.profile-editor-sidebar > .badge {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}
.profile-editor-sidebar > p {
    grid-column: 2 / -1;
    margin: 0;
}
.profile-editor-facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 10px;
}
.profile-editor-facts > div {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 7px 10px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    border-right: 1px solid var(--line);
}
.profile-editor-facts > div:last-child { border-right: 0; }
.profile-editor-facts dd { text-align: left; }
.profile-editor-panel { padding: 14px; }
.profile-editor-form .form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Login: keep normal site sidebars; use a stacked auth card so inputs stay wide. */
.auth-shell {
    grid-template-columns: 1fr;
    margin: 0 0 10px;
    overflow: visible;
}
.auth-intro {
    min-height: 0;
    padding: 16px 18px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
}
.auth-intro h1 {
    font-size: 22px;
}
.auth-intro > div:first-child > p {
    max-width: none;
}
.auth-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}
.auth-intro-footer {
    justify-content: flex-start;
}
.auth-form-panel {
    padding: 18px;
}
.auth-form-heading {
    margin-bottom: 13px;
}
.auth-form {
    width: 100%;
    max-width: none;
}
.auth-form input,
.auth-submit {
    width: 100%;
}

/* Server submission/edit: guide becomes a horizontal overview above a full-width form. */
.site-editor-layout {
    grid-template-columns: 1fr;
    gap: 10px;
}
.site-editor-sidebar {
    position: static;
    padding: 13px 14px;
}
.site-editor-sidebar h2 {
    margin-bottom: 4px;
}
.site-editor-sidebar > p {
    margin-bottom: 10px;
}
.site-editor-checklist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 10px;
    border: 1px solid var(--line);
}
.site-editor-checklist > div {
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 9px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
}
.site-editor-checklist > div:last-child { border-right: 0; }
.site-editor-tip {
    margin-top: 9px;
}
.site-editor-main {
    padding: 0 14px 14px;
}
.site-editor-progress {
    margin-right: -14px;
    margin-left: -14px;
}
.site-editor-form .form-grid-4,
.site-editor-form .four-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-editor-form .form-grid-3,
.site-editor-form .three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-editor-form input,
.site-editor-form select,
.site-editor-form textarea,
.profile-editor-form input,
.profile-editor-form select,
.profile-editor-form textarea,
.notification-preferences-form input,
.notification-preferences-form select,
.notification-preferences-form textarea {
    min-width: 0;
    max-width: 100%;
}

/* The right sidebar moves below before the center column becomes cramped. */
@media (max-width: 1080px) {
    .site-layout {
        grid-template-columns: 190px minmax(0, 1fr);
    }
    .right-menubar {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .right-menubar > .sidebar-panel:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .site-editor-checklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .site-editor-checklist > div:nth-child(2) { border-right: 0; }
    .site-editor-checklist > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 820px) {
    .right-menubar { grid-template-columns: 1fr; }
    .account-settings-facts,
    .profile-editor-facts {
        grid-template-columns: 1fr;
    }
    .account-settings-facts > div,
    .profile-editor-facts > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .account-settings-facts > div:last-child,
    .profile-editor-facts > div:last-child { border-bottom: 0; }
}

@media (max-width: 680px) {
    .following-card {
        grid-template-columns: 1fr;
    }
    .following-card-actions {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
        flex-direction: row;
        min-width: 0;
    }
    .profile-editor-sidebar {
        grid-template-columns: 52px minmax(0, 1fr);
    }
    .profile-editor-avatar-large {
        width: 52px;
        height: 52px;
        font-size: 19px;
    }
    .profile-editor-sidebar > .badge {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }
    .profile-editor-sidebar > p {
        grid-column: 1 / -1;
        margin-top: 7px;
    }
    .auth-benefits {
        grid-template-columns: 1fr;
    }
    .site-editor-form .form-grid-3,
    .site-editor-form .three-columns,
    .site-editor-form .form-grid-4,
    .site-editor-form .four-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .account-settings-summary {
        grid-template-columns: 1fr;
    }
    .account-settings-summary .account-settings-icon {
        grid-row: auto;
        margin-bottom: 8px;
    }
    .account-settings-facts { grid-column: 1; }
    .profile-editor-form .form-grid-2 {
        grid-template-columns: 1fr;
    }
    .site-editor-checklist {
        grid-template-columns: 1fr;
    }
    .site-editor-checklist > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .site-editor-checklist > div:last-child { border-bottom: 0; }
}

/* ========================================================================== 
   PHASE 18 — FLUID FULL-WIDTH PORTAL LAYOUT
   The complete public/account shell now uses the viewport more effectively.
   Sidebars remain useful portal rails, while the center workspace receives
   substantially more room for rankings, forms, profiles and data views.
   ========================================================================== */

:root {
    --page-width: 1680px;
    --portal-left-rail: 220px;
    --portal-right-rail: 280px;
    --portal-gap: 16px;
}

.container {
    width: min(var(--page-width), calc(100% - 32px));
    max-width: none;
}

.site-main {
    padding: 18px 0 34px;
}

.site-layout {
    grid-template-columns: var(--portal-left-rail) minmax(0, 1fr) var(--portal-right-rail);
    gap: var(--portal-gap);
}

.site-layout-wide {
    grid-template-columns: minmax(0, 1fr);
}

.left-menubar,
.right-menubar {
    gap: 12px;
}

.main-content {
    width: 100%;
    min-width: 0;
}

/* Give full-width pages a more deliberate vertical rhythm. */
.main-content > * + * {
    margin-top: 12px;
}

.main-content > .page-hero + *,
.main-content > .flash + * {
    margin-top: 12px;
}

/* Header/footer chrome tracks the same wide canvas as page content. */
.site-topbar-inner,
.site-header-inner,
.primary-nav-inner,
.account-nav-inner,
.site-footer-grid {
    width: min(var(--page-width), calc(100% - 32px));
}

/* Home / ranking: use the extra horizontal room instead of stretching empty chrome. */
.discovery-hero {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 18px;
}

.discovery-hero-copy {
    width: auto;
    max-width: 360px;
    padding-right: 0;
}

.discovery-search {
    min-width: 0;
}

.discovery-filters.filter-bar {
    grid-template-columns: repeat(4, minmax(130px, 1fr)) auto auto auto;
}

.category-browser-links {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.discovery-quick-grid {
    gap: 10px;
}

.featured-flat-row {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    gap: 18px;
    padding: 13px 14px;
}

.featured-flat-copy p {
    max-width: 900px;
}

.featured-flat-banner {
    max-width: 340px;
}

.ranking-toolbar {
    padding: 14px 16px;
}

.rank-row {
    grid-template-columns: 78px minmax(0, 1fr) 176px;
    min-height: 126px;
}

.rank-position {
    padding: 12px 7px;
}

.rank-main {
    padding: 13px 16px;
}

.rank-title-row h2 {
    font-size: 17px;
}

.server-description {
    max-width: 980px;
}

.rank-stats > div {
    padding: 11px 10px;
}

.rank-primary-score b {
    font-size: 22px;
}

.rank-secondary-score b {
    font-size: 18px;
}

.rank-view-button {
    min-height: 32px;
    margin: 9px;
}

/* General pages: let common two/three-column content breathe on wide screens. */
.form-grid-2,
.two-columns,
.admin-two-column,
.server-overview-grid,
.account-dashboard-grid {
    gap: 14px;
}

.form-grid-3,
.three-columns,
.form-grid-4,
.four-columns {
    gap: 12px;
}

.panel,
.page-hero,
.data-panel {
    max-width: 100%;
}

/* Large desktop: the right rail stays visible and the ranking center remains wide. */
@media (min-width: 1500px) {
    :root {
        --portal-left-rail: 230px;
        --portal-right-rail: 300px;
        --portal-gap: 18px;
    }

    .rank-row {
        grid-template-columns: 82px minmax(0, 1fr) 188px;
    }

    .category-browser-links {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Medium desktop: move only the right rail below before the content gets cramped. */
@media (max-width: 1320px) {
    :root {
        --page-width: 1288px;
        --portal-left-rail: 205px;
        --portal-gap: 14px;
    }

    .container,
    .site-topbar-inner,
    .site-header-inner,
    .primary-nav-inner,
    .account-nav-inner,
    .site-footer-grid {
        width: min(var(--page-width), calc(100% - 28px));
    }

    .site-layout {
        grid-template-columns: var(--portal-left-rail) minmax(0, 1fr);
    }

    .right-menubar {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .right-menubar > .sidebar-panel:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .category-browser-links {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rank-row {
        grid-template-columns: 70px minmax(0, 1fr) 150px;
    }
}

/* Tablet: content becomes the first priority; portal rails move below it. */
@media (max-width: 960px) {
    :root {
        --page-width: 100%;
    }

    .container,
    .site-topbar-inner,
    .site-header-inner,
    .primary-nav-inner,
    .account-nav-inner,
    .site-footer-grid {
        width: calc(100% - 24px);
    }

    .site-layout {
        display: grid;
        grid-template-columns: 1fr;
    }

    .main-content {
        grid-row: 1;
    }

    .left-menubar {
        grid-row: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .right-menubar {
        grid-row: 3;
        grid-column: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discovery-hero {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .discovery-hero-copy {
        max-width: 680px;
    }

    .discovery-filters.filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-browser-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rank-row {
        grid-template-columns: 64px minmax(0, 1fr) 140px;
    }
}

@media (max-width: 720px) {
    .container,
    .site-topbar-inner,
    .site-header-inner,
    .primary-nav-inner,
    .account-nav-inner,
    .site-footer-grid {
        width: calc(100% - 16px);
    }

    .left-menubar,
    .right-menubar {
        grid-template-columns: 1fr;
    }

    .category-browser-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rank-row {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .rank-stats {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .container,
    .site-topbar-inner,
    .site-header-inner,
    .primary-nav-inner,
    .account-nav-inner,
    .site-footer-grid {
        width: calc(100% - 12px);
    }

    .site-main {
        padding-top: 10px;
    }

    .category-browser-links,
    .discovery-filters.filter-bar {
        grid-template-columns: 1fr;
    }

    .featured-flat-row {
        grid-template-columns: 1fr;
    }
}

/* Phase 19: discovery form overflow and zoom-safe alignment */
.site-layout > *,
.main-content,
.page-hero,
.discovery-hero,
.discovery-search,
.discovery-search-main,
.discovery-filters,
.discovery-filter-selects,
.discovery-filter-actions {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.discovery-search {
    width: 100%;
    overflow: hidden;
}

.discovery-search-main {
    width: 100%;
}

.discovery-search-main input,
.discovery-search-main button,
.discovery-filter-selects select {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.discovery-filters.filter-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    width: 100%;
}

.discovery-filter-selects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.discovery-filter-selects select {
    width: 100%;
}

.discovery-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.discovery-filter-actions .filter-check,
.discovery-filter-actions .clear-filters {
    flex: 0 0 auto;
}

@media (max-width: 1440px) {
    .discovery-hero {
        grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    }

    .discovery-filter-selects {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .discovery-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .discovery-hero-copy {
        max-width: 720px;
    }
}

@media (max-width: 620px) {
    .discovery-search-main {
        grid-template-columns: 1fr;
    }

    .discovery-search-main button {
        width: 100%;
    }

    .discovery-filter-selects {
        grid-template-columns: 1fr;
    }

    .discovery-filter-heading small {
        display: none;
    }
}

/* ==========================================================================\n   Phase 20 - Registration role slider\n   ========================================================================== */
.register-workspace {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.register-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px 22px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(93, 143, 176, .08), transparent 48%),
        var(--panel);
}

.register-page-header h1 {
    margin: 4px 0 7px;
    font-size: clamp(25px, 2.15vw, 34px);
    line-height: 1.08;
}

.register-page-header p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.register-signin-note {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.register-signin-note a {
    font-weight: 700;
}

.register-errors {
    margin: 18px 28px 0;
    padding: 13px 15px;
    border: 1px solid var(--danger-border, #8f4141);
    border-radius: var(--radius-sm);
    background: var(--danger-soft, rgba(155, 57, 57, .12));
}

.register-errors > strong {
    display: block;
    margin-bottom: 6px;
}

.register-errors .error-list {
    margin: 0;
}

.register-role-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 20px 28px 0;
    padding: 4px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

.register-role-tab {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 15px;
    border: 0;
    background: transparent;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
    transition: color .18s ease;
}

.register-role-tab:hover,
.register-role-tab.is-active {
    color: var(--text);
}

.register-role-tab:focus-visible {
    outline: 2px solid var(--focus, var(--gold));
    outline-offset: -2px;
    border-radius: calc(var(--radius-sm) - 2px);
}

.register-role-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--panel);
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.register-role-tab-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.register-role-tab-copy strong {
    font-size: 14px;
}

.register-role-tab-copy small {
    overflow: hidden;
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .72;
}

.register-role-indicator {
    position: absolute;
    z-index: 1;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border: 1px solid var(--line-strong, var(--line));
    border-radius: calc(var(--radius-sm) - 2px);
    background: var(--panel);
    box-shadow: var(--shadow-xs, 0 2px 8px rgba(0, 0, 0, .12));
    transform: translateX(0);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}

.register-workspace[data-register-role="owner"] .register-role-indicator {
    transform: translateX(100%);
}

.register-slider-viewport {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.register-slider-track {
    display: flex;
    width: 200%;
    transform: translateX(0);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.register-workspace[data-register-role="owner"] .register-slider-track {
    transform: translateX(-50%);
}

.register-slide {
    display: grid;
    grid-template-columns: minmax(250px, .82fr) minmax(0, 1.58fr);
    width: 50%;
    min-width: 0;
    padding: 28px;
    gap: 0;
}

.register-role-intro,
.register-form-panel {
    min-width: 0;
}

.register-role-intro {
    display: flex;
    flex-direction: column;
    padding: 25px 26px;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background:
        linear-gradient(145deg, rgba(203, 167, 78, .07), transparent 46%),
        var(--panel-soft);
}

.register-role-intro h2 {
    margin: 5px 0 9px;
    font-size: clamp(21px, 1.65vw, 27px);
}

.register-role-intro > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

.register-benefit-list {
    display: grid;
    gap: 11px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
}

.register-benefit-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    color: var(--text-soft, var(--text));
    line-height: 1.42;
}

.register-benefit-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(203, 167, 78, .32);
    border-radius: 50%;
    background: rgba(203, 167, 78, .08);
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
}

.register-role-footnote {
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.register-role-footnote strong {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.register-role-footnote span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.register-form-panel {
    padding: 25px 28px;
    border: 1px solid var(--line);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--panel);
}

.register-form-heading {
    margin-bottom: 19px;
}

.register-step-label {
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.register-form-heading h2 {
    margin: 4px 0 5px;
    font-size: 20px;
}

.register-form-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.register-form {
    display: grid;
    gap: 14px;
}

.register-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.register-field > span {
    font-size: 11px;
    font-weight: 700;
}

.register-field input {
    width: 100%;
    min-width: 0;
}

.register-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.register-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 5px;
}

.register-form-footer p {
    max-width: 470px;
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

.register-submit {
    flex: 0 0 auto;
    min-width: 190px;
}

@media (max-width: 1180px) {
    .register-slide {
        grid-template-columns: minmax(220px, .72fr) minmax(0, 1.45fr);
    }

    .register-role-intro,
    .register-form-panel {
        padding: 22px;
    }
}

@media (max-width: 860px) {
    .register-page-header {
        align-items: flex-start;
    }

    .register-slide {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px;
    }

    .register-role-intro {
        border-right: 1px solid var(--line);
        border-radius: var(--radius-sm);
    }

    .register-role-footnote {
        margin-top: 0;
    }

    .register-form-panel {
        border-radius: var(--radius-sm);
    }
}

@media (max-width: 620px) {
    .register-page-header {
        display: grid;
        gap: 14px;
        padding: 20px;
    }

    .register-signin-note {
        justify-self: start;
    }

    .register-errors {
        margin: 15px 18px 0;
    }

    .register-role-switch {
        margin: 16px 18px 0;
    }

    .register-role-tab {
        gap: 7px;
        padding: 10px;
    }

    .register-role-number {
        display: none;
    }

    .register-role-tab-copy strong {
        font-size: 12px;
    }

    .register-role-tab-copy small {
        font-size: 9px;
    }

    .register-slide {
        padding: 18px;
    }

    .register-role-intro,
    .register-form-panel {
        padding: 19px;
    }

    .register-password-grid {
        grid-template-columns: 1fr;
    }

    .register-form-footer {
        display: grid;
    }

    .register-submit {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .register-role-indicator,
    .register-slider-track {
        transition: none;
    }
}

/* ==========================================================================
   Phase 21 - Login / login-required workspace
   ========================================================================== */
.login-workspace {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.login-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px 22px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(93, 143, 176, .08), transparent 48%),
        var(--panel);
}

.login-page-header h1 {
    margin: 4px 0 7px;
    font-size: clamp(25px, 2.15vw, 34px);
    line-height: 1.08;
}

.login-page-header p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.login-header-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.login-header-action a {
    font-weight: 700;
}

.login-header-action-muted {
    background: transparent;
}

.login-access-grid {
    display: grid;
    grid-template-columns: minmax(260px, .82fr) minmax(360px, 1.45fr);
    gap: 0;
    min-width: 0;
    padding: 28px;
}

.login-context-panel,
.login-form-card {
    min-width: 0;
}

.login-context-panel {
    display: flex;
    flex-direction: column;
    padding: 25px 26px;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background:
        linear-gradient(145deg, rgba(203, 167, 78, .065), transparent 48%),
        var(--panel-soft);
}

.login-context-panel h2 {
    margin: 5px 0 9px;
    font-size: clamp(21px, 1.65vw, 27px);
}

.login-context-panel > div:first-child > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

.login-context-list {
    display: grid;
    gap: 10px;
    margin: 22px 0;
}

.login-context-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .045);
}

.login-context-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(203, 167, 78, .3);
    border-radius: 50%;
    background: rgba(203, 167, 78, .075);
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}

.login-context-item > div {
    display: grid;
    gap: 3px;
}

.login-context-item strong {
    color: var(--text-strong);
    font-size: 12px;
}

.login-context-item span:last-child {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.login-context-note {
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.login-context-note strong {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.login-context-note span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.login-form-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px 28px;
    border: 1px solid var(--line);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--panel);
}

.login-form-heading-v2 {
    margin-bottom: 20px;
}

.login-step-label {
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.login-form-heading-v2 h2 {
    margin: 4px 0 5px;
    font-size: 21px;
}

.login-form-heading-v2 p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.login-form-v2 {
    display: grid;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.login-field-v2 {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.login-field-v2 > span {
    color: var(--text-strong);
    font-size: 11px;
    font-weight: 700;
}

.login-field-v2 input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
}

.login-submit-v2 {
    width: 100%;
    min-height: 40px;
    margin-top: 3px;
    justify-content: center;
}

.login-secondary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 19px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.login-secondary-actions > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.login-secondary-actions span {
    color: var(--muted);
    font-size: 10px;
}

.login-secondary-actions a {
    width: fit-content;
    max-width: 100%;
    font-size: 11px;
    font-weight: 700;
}

.login-workspace-required .login-page-header {
    background:
        linear-gradient(90deg, rgba(203, 167, 78, .07), transparent 48%),
        var(--panel);
}

.login-required-context {
    background:
        linear-gradient(145deg, rgba(93, 143, 176, .07), transparent 48%),
        var(--panel-soft);
}

@media (max-width: 1100px) {
    .login-access-grid {
        grid-template-columns: minmax(230px, .72fr) minmax(0, 1.35fr);
    }
}

@media (max-width: 860px) {
    .login-page-header {
        align-items: flex-start;
    }

    .login-access-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px;
    }

    .login-context-panel {
        border-right: 1px solid var(--line);
        border-radius: var(--radius-sm);
    }

    .login-context-note {
        margin-top: 0;
    }

    .login-form-card {
        border-radius: var(--radius-sm);
    }
}

@media (max-width: 620px) {
    .login-page-header {
        display: grid;
        gap: 14px;
        padding: 20px;
    }

    .login-header-action {
        justify-self: start;
        white-space: normal;
    }

    .login-access-grid {
        padding: 18px;
    }

    .login-context-panel,
    .login-form-card {
        padding: 19px;
    }

    .login-secondary-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .login-context-list {
        margin: 17px 0;
    }

    .login-context-item {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 9px;
    }

    .login-context-mark {
        width: 30px;
        height: 30px;
        font-size: 9px;
    }
}

/* ========================================================================== 
   PHASE 22 — NOTIFICATIONS / PUBLIC MEMBER PROFILE + TEXT FIELD CONSISTENCY
   ========================================================================== */

/* Native text inputs without an explicit type still receive the same field UI.
   Explicit type="text" is preferred, but this protects legacy forms. */
input:not([type]) {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 7px 8px;
    color: var(--text);
    background: var(--panel-soft);
    border: 1px solid var(--line-light);
    border-radius: var(--radius-sm);
    outline: none;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.12);
}
input:not([type]):hover { border-color: var(--line-light); }
input:not([type]):focus {
    background: var(--panel);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(108,168,207,.12);
}

/* Account notifications */
.notifications-hero {
    align-items: center;
    margin-bottom: 10px;
    padding: 17px 18px;
}
.notifications-hero h1 {
    margin: 2px 0 5px;
    font-size: 23px;
}
.notifications-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
}
.notifications-hero-actions form { margin: 0; }
.notifications-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 10px;
}
.notification-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 12px 13px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}
.notification-summary-card span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.notification-summary-card strong {
    color: var(--text-strong);
    font: 700 20px/1 Arial, sans-serif;
}
.notification-summary-unread {
    border-top: 2px solid var(--accent);
}
.notification-summary-unread strong { color: var(--accent-strong); }
.notifications-workspace {
    padding: 0;
    overflow: hidden;
}
.notifications-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border-bottom: 1px solid var(--line);
}
.notifications-heading h2 {
    margin: 2px 0 3px;
    font-size: 16px;
}
.notifications-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}
.notifications-feed { display: grid; }
.notification-card {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 15px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.notification-card:last-child { border-bottom: 0; }
.notification-card:hover { background: var(--panel-soft); }
.notification-card.is-unread {
    background: linear-gradient(90deg, rgba(93,143,176,.09), transparent 42%), var(--panel);
}
.notification-card.is-unread::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--accent);
}
.notification-card-marker {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--accent-strong);
    font: 800 11px/1 Arial, sans-serif;
    background: var(--panel-3);
    border: 1px solid var(--line-light);
    border-radius: 50%;
}
.notification-card.is-unread .notification-card-marker {
    color: #fff;
    background: var(--accent-dark);
    border-color: var(--accent);
}
.notification-card-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.notification-card-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.notification-card-meta time {
    color: var(--faint);
    font-size: 9px;
}
.notification-card h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 12px;
    line-height: 1.35;
}
.notification-card p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}
.notification-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}
.notification-card-actions form { margin: 0; }
.notification-read-state {
    min-width: 44px;
    color: var(--faint);
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}
.notifications-empty-state {
    min-height: 210px;
    gap: 7px;
    border: 0;
}
.notifications-empty-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0 auto 4px;
    color: var(--green);
    font-size: 17px;
    background: var(--panel-3);
    border: 1px solid var(--line-light);
    border-radius: 50%;
}
.notifications-empty-state h3,
.notifications-empty-state p { margin: 0; }
.notifications-empty-state .btn { margin: 6px auto 0; }

/* Public member profile */
.member-profile-hero {
    align-items: center;
    margin-bottom: 10px;
    padding: 18px;
}
.member-profile-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.member-profile-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    color: #fff;
    font: 800 21px/1 Arial, sans-serif;
    background: linear-gradient(145deg, var(--accent-dark), #243d51);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.member-profile-heading { min-width: 0; }
.member-profile-heading h1 {
    margin: 2px 0 5px;
    font-size: 24px;
    overflow-wrap: anywhere;
}
.member-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    color: var(--muted);
    font-size: 10px;
}
.member-profile-meta span + span {
    position: relative;
}
.member-profile-meta span + span::before {
    content: "•";
    position: absolute;
    left: -9px;
    color: var(--faint);
}
.member-profile-hero-side {
    display: grid;
    justify-items: end;
    min-width: 135px;
    padding-left: 16px;
    border-left: 1px solid var(--line);
}
.member-profile-hero-side strong {
    color: var(--text-strong);
    font: 800 25px/1 Arial, sans-serif;
}
.member-profile-hero-side span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.member-profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px;
    margin-bottom: 10px;
}
.member-profile-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 56px;
    padding: 11px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}
.member-profile-stat span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.member-profile-stat strong {
    color: var(--text-strong);
    font: 800 18px/1 Arial, sans-serif;
}
.member-profile-overview,
.member-profile-reviews {
    margin-bottom: 10px;
    padding: 0;
    overflow: hidden;
}
.member-profile-section-heading {
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border-bottom: 1px solid var(--line);
}
.member-profile-section-heading h2 {
    margin: 2px 0 0;
    font-size: 15px;
}
.member-profile-section-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 10px;
}
.member-profile-overview-grid {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.55fr);
    gap: 0;
}
.member-profile-facts {
    min-width: 0;
    padding: 5px 14px;
    background: var(--panel-soft);
    border-right: 1px solid var(--line);
}
.member-profile-fact {
    display: grid;
    grid-template-columns: minmax(105px, .7fr) minmax(0, 1.3fr);
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.member-profile-fact:last-child { border-bottom: 0; }
.member-profile-fact > span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.member-profile-fact strong {
    min-width: 0;
    color: var(--text-strong);
    font-size: 10px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.member-profile-facts-empty {
    padding: 16px 0;
    color: var(--muted);
    font-size: 10px;
}
.member-profile-about {
    min-width: 0;
    padding: 14px 16px;
}
.member-profile-about-label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.member-profile-about p {
    margin: 0;
    color: var(--text);
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.member-review-list { display: grid; }
.member-review-card {
    display: grid;
    gap: 10px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--line);
}
.member-review-card:last-child { border-bottom: 0; }
.member-review-card:hover { background: var(--panel-soft); }
.member-review-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.member-review-card-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.member-review-server {
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 800;
}
.member-review-card time {
    color: var(--faint);
    font-size: 9px;
}
.member-review-body {
    margin: 0;
    color: var(--text);
    font-size: 10px;
    line-height: 1.6;
}
.member-review-reply {
    margin-top: 2px;
    padding: 10px 11px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-dark);
    border-radius: var(--radius-sm);
}
.member-review-reply-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 8px;
    margin-bottom: 5px;
}
.member-review-reply-head strong { color: var(--text-strong); }
.member-review-reply-head span {
    color: var(--accent-strong);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}
.member-review-reply-head time { margin-left: auto; }
.member-review-reply p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}
.member-profile-empty-reviews {
    min-height: 150px;
    border: 0;
}

@media (max-width: 900px) {
    .member-profile-overview-grid {
        grid-template-columns: 1fr;
    }
    .member-profile-facts {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 720px) {
    .notifications-hero {
        align-items: flex-start;
    }
    .notifications-summary {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .notification-card {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .notification-card-actions {
        grid-column: 2;
        justify-content: flex-start;
    }
    .member-profile-hero {
        align-items: flex-start;
    }
    .member-profile-hero-side {
        justify-items: start;
        width: 100%;
        padding: 10px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (max-width: 520px) {
    .notifications-summary {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .notification-summary-card {
        min-height: 48px;
    }
    .notification-card {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    .notification-card-marker { display: none; }
    .notification-card-actions { grid-column: 1; }
    .notification-card-actions .btn,
    .notification-card-actions form,
    .notification-card-actions form .btn {
        width: 100%;
    }
    .notification-card-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
    .member-profile-identity {
        align-items: flex-start;
    }
    .member-profile-avatar {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 17px;
    }
    .member-profile-meta {
        display: grid;
        gap: 3px;
    }
    .member-profile-meta span + span::before { display: none; }
    .member-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .member-profile-stat {
        display: grid;
        gap: 5px;
    }
    .member-profile-fact {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .member-review-card-head {
        display: grid;
    }
    .member-review-card-head .review-stars { justify-self: start; }
    .member-review-reply-head time {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 360px) {
    .member-profile-stats { grid-template-columns: 1fr; }
}

/* Phase 24 — Owner server editor, updates and gallery */
.site-editor-slider {
    overflow: hidden;
    padding: 0;
}

.site-editor-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
}

.site-editor-tab {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 1px 10px;
    align-items: center;
    min-height: 74px;
    padding: 14px 18px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
}

.site-editor-tab:last-of-type { border-right: 0; }
.site-editor-tab > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    color: var(--gold);
}
.site-editor-tab strong { color: var(--text); font-size: 14px; }
.site-editor-tab small { font-size: 11px; color: var(--text-muted); }
.site-editor-tab:hover,
.site-editor-tab.is-active { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.site-editor-tab.is-active strong { color: var(--gold); }
.site-editor-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 33.333333%;
    height: 3px;
    background: var(--gold);
    transform: translateX(calc(var(--site-editor-step, 0) * 100%));
    transition: transform 220ms ease;
}
.site-editor-slider[data-site-editor-step="0"] { --site-editor-step: 0; }
.site-editor-slider[data-site-editor-step="1"] { --site-editor-step: 1; }
.site-editor-slider[data-site-editor-step="2"] { --site-editor-step: 2; }
.site-editor-errors { margin: 16px 18px 0; }
.site-editor-form { padding: 0; }
.site-editor-slider-viewport { overflow: hidden; width: 100%; }
.site-editor-slider-track {
    display: flex;
    width: 300%;
    transform: translateX(0);
    transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.site-editor-slide {
    flex: 0 0 33.333333%;
    min-width: 0;
    padding: 24px;
}
.site-editor-slide-heading {
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.site-editor-slide-heading h2 { margin: 3px 0 5px; font-size: clamp(22px, 2vw, 30px); }
.site-editor-slide-heading p { margin: 0; color: var(--text-muted); max-width: 720px; }
.site-editor-banner-box,
.site-editor-detail-card,
.site-editor-status-card {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--panel-soft);
}
.site-editor-detail-card,
.site-editor-status-card { display: grid; gap: 18px; }
.site-editor-slide-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.site-editor-slide-actions .action-group { margin-left: auto; }

.owner-tool-hero strong { color: var(--text); }
.owner-tool-grid {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.5fr);
    gap: 16px;
    align-items: start;
}
.owner-compose-panel,
.owner-history-panel,
.owner-gallery-workspace { padding: 20px; }
.panel-heading-block { margin-bottom: 18px; }
.panel-heading-block h2 { margin: 3px 0 5px; }
.panel-heading-block p { margin: 0; color: var(--text-muted); }
.owner-compose-panel { position: sticky; top: 16px; }
.owner-update-timeline { display: grid; gap: 12px; }
.owner-update-card {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
}
.owner-update-marker {
    width: 10px;
    height: 10px;
    margin-top: 19px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 10%, transparent);
}
.owner-update-body {
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-soft);
}
.owner-update-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.owner-update-header h3 { margin: 0 0 3px; font-size: 15px; }
.owner-update-header time { color: var(--text-muted); font-size: 11px; }
.owner-update-body > p { margin: 12px 0 0; line-height: 1.65; }

.owner-gallery-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}
.owner-gallery-header h2 { margin: 3px 0 5px; }
.owner-gallery-header p { margin: 0; color: var(--text-muted); }
.owner-gallery-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--panel-strong);
    border: 1px solid var(--line);
}
.owner-gallery-meter span { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.owner-gallery-upload { margin-bottom: 20px; }
.owner-upload-dropzone {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--panel-soft);
}
.owner-upload-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: var(--gold);
    font-size: 24px;
}
.owner-upload-dropzone > div:nth-child(2) { display: grid; gap: 2px; margin-right: auto; }
.owner-upload-dropzone span { color: var(--text-muted); font-size: 11px; }
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.owner-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.owner-gallery-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--panel-soft);
}
.owner-gallery-image { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #07090b; }
.owner-gallery-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; }
.owner-gallery-image span {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 8px;
    border-radius: 5px;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: 10px;
    opacity: 0;
    transform: translateY(3px);
    transition: 160ms ease;
}
.owner-gallery-image:hover img { transform: scale(1.025); }
.owner-gallery-image:hover span { opacity: 1; transform: translateY(0); }
.owner-gallery-card-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
}
.owner-gallery-card-footer > div { display: grid; gap: 1px; }
.owner-gallery-card-footer small { color: var(--text-muted); }
.owner-gallery-empty { grid-column: 1 / -1; }

@media (max-width: 1100px) {
    .owner-tool-grid { grid-template-columns: 1fr; }
    .owner-compose-panel { position: static; }
    .owner-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .site-editor-tab { min-height: 62px; padding: 10px; grid-template-columns: auto 1fr; }
    .site-editor-tab small { display: none; }
    .site-editor-slide { padding: 17px 14px; }
    .site-editor-slide-actions { align-items: stretch; }
    .site-editor-slide-actions .action-group { width: 100%; }
    .site-editor-slide-actions .action-group > * { flex: 1; }
    .owner-gallery-header { grid-template-columns: 1fr; }
    .owner-upload-dropzone { align-items: stretch; flex-direction: column; }
    .owner-upload-dropzone > div:nth-child(2) { margin-right: 0; }
    .owner-gallery-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .site-editor-tab { display: flex; justify-content: center; min-width: 0; }
    .site-editor-tab > span { width: 30px; height: 30px; }
    .site-editor-tab strong { font-size: 12px; }
    .site-editor-tab small { display: none; }
    .owner-update-header { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .site-editor-slider-track,
    .site-editor-indicator,
    .owner-gallery-image img,
    .owner-gallery-image span { transition: none !important; }
}

/* Phase 25 — Analytics, vote tools slider and canonical action buttons */
.btn,
a.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}
.btn-sm,
a.btn-sm,
button.btn-sm {
    min-height: 28px !important;
    padding: 5px 8px !important;
    font-size: 9px !important;
}
.action-group > .btn,
.form-actions > .btn,
.site-editor-slide-actions .btn { align-self: center; }

/* Owner analytics */
.analytics-hero .action-group,
.vote-tools-hero .action-group { justify-content: flex-end; }
.analytics-overview { padding: 20px; }
.analytics-overview-heading,
.analytics-card-heading,
.vote-performance-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.analytics-overview-heading h2,
.analytics-card-heading h2,
.vote-performance-title h3 { margin: 3px 0 4px; }
.analytics-overview-heading p,
.analytics-card-heading p { margin: 0; color: var(--text-muted); }
.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.analytics-kpi {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-soft);
}
.analytics-kpi-primary {
    border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
    background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 8%, var(--panel-soft)), var(--panel-soft));
}
.analytics-kpi > span { color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.analytics-kpi > strong { color: var(--text-strong); font-size: clamp(24px, 2.1vw, 34px); line-height: 1; }
.analytics-kpi-primary > strong { color: var(--gold); }
.analytics-kpi > small { color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.analytics-data-note { margin: 14px 0 0; }
.analytics-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    gap: 16px;
    align-items: start;
}
.analytics-card { min-width: 0; padding: 20px; }
.analytics-source-stack { display: grid; gap: 8px; }
.analytics-source-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}
.analytics-source-rank {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--gold);
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    font-weight: 800;
}
.analytics-source-item > div { display: grid; gap: 2px; min-width: 0; }
.analytics-source-item > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-source-item small { color: var(--text-muted); font-size: 9px; font-weight: 400; }
.analytics-source-item > b { color: var(--text-strong); font-size: 13px; }
.analytics-engagement-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.analytics-engagement-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}
.analytics-engagement-list span { color: var(--text-muted); font-size: 10px; }
.analytics-engagement-list strong { color: var(--text-strong); font-size: 14px; white-space: nowrap; }
.analytics-growth-panel { padding: 20px; }
.analytics-growth-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.analytics-growth-summary span { padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-soft); color: var(--text-muted); font-size: 9px; }
.analytics-growth-summary b { color: var(--text-strong); }
.analytics-growth-scroll { overflow-x: auto; }
.analytics-growth-table-v2 { width: 100%; min-width: 670px; border-collapse: collapse; }
.analytics-growth-table-v2 th,
.analytics-growth-table-v2 td { padding: 9px 11px; text-align: right; border-bottom: 1px solid var(--line); }
.analytics-growth-table-v2 th:first-child,
.analytics-growth-table-v2 td:first-child { text-align: left; }
.analytics-growth-table-v2 th { color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; background: var(--panel-2); }
.analytics-growth-table-v2 tbody tr:hover { background: var(--panel-soft); }
.analytics-positive { color: #76bd87; }

/* Vote tools slider */
.vote-tools-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.vote-tools-warning > div { display: grid; gap: 2px; }
.vote-tools-warning span { color: var(--text-muted); }
.vote-tools-slider { overflow: hidden; padding: 0; }
.vote-tools-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
}
.vote-tools-tab {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 1px 10px;
    align-items: center;
    min-height: 74px;
    padding: 14px 18px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
}
.vote-tools-tab:last-of-type { border-right: 0; }
.vote-tools-tab > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
}
.vote-tools-tab strong { color: var(--text); font-size: 14px; }
.vote-tools-tab small { color: var(--text-muted); font-size: 11px; }
.vote-tools-tab:hover,
.vote-tools-tab.is-active { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.vote-tools-tab.is-active strong { color: var(--gold); }
.vote-tools-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 33.333333%;
    height: 3px;
    background: var(--gold);
    transform: translateX(calc(var(--vote-tools-step, 0) * 100%));
    transition: transform 220ms ease;
}
.vote-tools-slider[data-vote-tools-step="0"] { --vote-tools-step: 0; }
.vote-tools-slider[data-vote-tools-step="1"] { --vote-tools-step: 1; }
.vote-tools-slider[data-vote-tools-step="2"] { --vote-tools-step: 2; }
.vote-tools-viewport { width: 100%; overflow: hidden; }
.vote-tools-track {
    display: flex;
    width: 300%;
    transform: translateX(0);
    transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.vote-tools-slide { flex: 0 0 33.333333%; min-width: 0; padding: 24px; }
.vote-tools-slide-heading { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.vote-tools-slide-heading h2 { margin: 3px 0 5px; font-size: clamp(22px, 2vw, 30px); }
.vote-tools-slide-heading p { max-width: 760px; margin: 0; color: var(--text-muted); }
.vote-tools-slide-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.vote-button-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vote-button-choice-card {
    display: grid;
    grid-template-rows: auto minmax(90px, 1fr) auto;
    gap: 11px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-soft);
}
.vote-button-choice-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.vote-button-choice-head strong { color: var(--text-strong); font-size: 13px; }
.vote-button-choice-head span { color: var(--text-muted); font-size: 9px; }
.vote-button-choice-preview {
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: auto;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #080d11;
}
.vote-button-choice-card > .btn { justify-self: end; }
.vote-install-callout {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(380px, 1.2fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--gold) 6%, var(--panel-soft));
}
.vote-install-callout > div:first-child { display: grid; gap: 3px; }
.vote-install-callout span { color: var(--text-muted); font-size: 10px; }
.vote-install-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.vote-install-code-list { display: grid; gap: 12px; }
.vote-install-code-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-soft);
}
.vote-install-code-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.vote-install-code-head > div { display: grid; gap: 2px; }
.vote-install-code-head span { color: var(--text-muted); font-size: 9px; }
.vote-install-code-head img { max-width: min(468px, 58%); height: auto; }
.vote-install-code-card textarea { min-height: 82px; font-family: Consolas, Monaco, monospace; font-size: 10px; }
.vote-install-code-card .action-group { justify-content: flex-end; }
.vote-performance-today,
.vote-performance-thirty {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-soft);
}
.vote-performance-thirty { margin-top: 14px; }
.vote-performance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.vote-performance-grid article {
    display: grid;
    gap: 5px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
}
.vote-performance-grid span { color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.vote-performance-grid strong { color: var(--text-strong); font-size: 21px; }
.vote-performance-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.vote-performance-summary span { padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--text-muted); font-size: 9px; }
.vote-performance-summary b { color: var(--text-strong); }

@media (max-width: 1180px) {
    .analytics-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-dashboard-grid { grid-template-columns: 1fr; }
    .vote-install-callout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .analytics-hero .action-group,
    .vote-tools-hero .action-group { justify-content: flex-start; }
    .vote-button-choice-grid { grid-template-columns: 1fr; }
    .vote-performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vote-tools-tab { min-height: 62px; padding: 10px; grid-template-columns: auto 1fr; }
    .vote-tools-tab small { display: none; }
    .vote-tools-slide { padding: 18px 14px; }
}
@media (max-width: 620px) {
    .analytics-kpi-grid,
    .analytics-engagement-list { grid-template-columns: 1fr; }
    .analytics-overview-heading,
    .analytics-card-heading,
    .vote-performance-title,
    .vote-tools-warning { display: grid; }
    .analytics-growth-summary,
    .vote-performance-summary { justify-content: flex-start; }
    .vote-tools-tab { display: flex; justify-content: center; min-width: 0; }
    .vote-tools-tab > span { width: 30px; height: 30px; }
    .vote-tools-tab strong { font-size: 11px; }
    .vote-install-url { grid-template-columns: 1fr; }
    .vote-install-code-head { display: grid; }
    .vote-install-code-head img { max-width: 100%; }
    .vote-tools-slide-actions { align-items: stretch; }
    .vote-tools-slide-actions > .btn { flex: 1; }
}
@media (max-width: 420px) {
    .vote-tools-tab > span { display: none; }
    .vote-performance-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .vote-tools-track,
    .vote-tools-indicator { transition: none !important; }
}


/* Phase 26 — ownership verification slider and header utility alignment */
.site-header-actions > .header-notification-link,
.site-header-actions > .account-link,
.site-header-actions > .register-link {
    box-sizing: border-box;
    height: 34px;
    min-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}
.site-header-actions > .header-notification-link {
    padding-left: 10px;
    padding-right: 10px;
    color: #f0d9db;
    background: linear-gradient(#3a1416, #220a0c);
    border-color: #64272b;
    border-radius: 2px;
    box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.site-header-actions > .header-notification-link:hover,
.site-header-actions > .header-notification-link.has-unread {
    color: #fff;
    background: linear-gradient(#4b191c, #2c0c0f);
}
.site-header-actions > .account-identity { min-height: 34px; }

.verify-tools-slider { overflow: hidden; padding: 0; }
.verify-tools-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
}
.verify-tools-tab {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 1px 10px;
    align-items: center;
    min-height: 74px;
    padding: 14px 18px;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    text-align: left;
    cursor: pointer;
}
.verify-tools-tab:last-of-type { border-right: 0; }
.verify-tools-tab > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--gold);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}
.verify-tools-tab strong { color: var(--text); font-size: 14px; }
.verify-tools-tab small { color: var(--text-muted); font-size: 11px; }
.verify-tools-tab:hover,
.verify-tools-tab.is-active { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.verify-tools-tab.is-active strong { color: var(--gold); }
.verify-tools-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 33.333333%;
    height: 3px;
    background: var(--gold);
    transform: translateX(calc(var(--verify-tools-step, 0) * 100%));
    transition: transform 220ms ease;
}
.verify-tools-slider[data-verify-tools-step="0"] { --verify-tools-step: 0; }
.verify-tools-slider[data-verify-tools-step="1"] { --verify-tools-step: 1; }
.verify-tools-slider[data-verify-tools-step="2"] { --verify-tools-step: 2; }
.verify-tools-viewport { width: 100%; overflow: hidden; }
.verify-tools-track {
    display: flex;
    width: 300%;
    transform: translateX(0);
    transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.verify-tools-slide {
    flex: 0 0 33.333333%;
    min-width: 0;
    padding: 24px;
}
.verify-tools-slide-heading {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.verify-tools-slide-heading h2 { margin: 3px 0 5px; font-size: clamp(22px, 2vw, 30px); }
.verify-tools-slide-heading p { max-width: 780px; margin: 0; color: var(--text-muted); }
.verify-status-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius-md);
    background: var(--panel-soft);
}
.verify-status-card.is-verified { border-left-color: var(--green); }
.verify-status-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--orange);
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
}
.verify-status-card.is-verified .verify-status-icon { color: var(--green); }
.verify-status-card strong { display: block; margin: 2px 0 3px; color: var(--text-strong); font-size: 18px; }
.verify-status-card p { margin: 0; color: var(--text-muted); }
.verify-status-card small { display: block; margin-top: 5px; color: var(--faint); }
.verify-method-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.verify-method-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 16px;
    color: var(--text);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
}
.verify-method-choice:hover,
.verify-method-choice:focus-visible { background: var(--panel-2); border-color: var(--line-strong); }
.verify-method-choice > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.verify-method-choice strong { color: var(--text-strong); font-size: 13px; }
.verify-method-choice small { color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.verify-method-choice > b { color: var(--gold); font-size: 18px; }
.verify-method-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--gold);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}
.verify-instruction-list { display: grid; gap: 10px; }
.verify-instruction-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}
.verify-instruction-row > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--gold);
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-weight: 800;
}
.verify-instruction-row strong { color: var(--text-strong); }
.verify-instruction-row p { margin: 3px 0 10px; color: var(--text-muted); }
.verify-instruction-row .code-block {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}
.verify-tools-slide-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.verify-tools-slide-actions form { margin: 0; }

@media (max-width: 760px) {
    .verify-tools-tab {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        justify-items: center;
        min-height: 68px;
        padding: 10px 6px;
        text-align: center;
    }
    .verify-tools-tab > span { grid-row: auto; width: 28px; height: 28px; font-size: 10px; }
    .verify-tools-tab small { display: none; }
    .verify-tools-tab strong { font-size: 11px; }
    .verify-method-choice-grid { grid-template-columns: 1fr; }
    .verify-tools-slide { padding: 18px; }
    .verify-tools-slide-actions { align-items: stretch; flex-direction: column; }
    .verify-tools-slide-actions > .action-group { width: 100%; }
    .verify-tools-slide-actions > .action-group form,
    .verify-tools-slide-actions > .action-group .btn,
    .verify-tools-slide-actions > .btn { width: 100%; }
}

@media (max-width: 480px) {
    .verify-status-card { grid-template-columns: 1fr; }
    .verify-instruction-row { grid-template-columns: 1fr; }
    .verify-method-choice { grid-template-columns: auto minmax(0, 1fr); }
    .verify-method-choice > b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .verify-tools-track,
    .verify-tools-indicator { transition: none; }
}

/* Phase 28: RMS-style detailed review rating form */
.rms-rating-form {
    display: grid;
    gap: 18px;
}

.rms-rating-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border-color, rgba(120, 140, 160, 0.28));
    border-radius: 12px;
}

.rms-rating-intro > div:first-child {
    display: grid;
    gap: 3px;
}

.rms-live-overall {
    display: grid;
    gap: 2px;
    min-width: 108px;
    text-align: right;
}

.rms-live-overall span {
    font-size: 12px;
    opacity: 0.72;
}

.rms-live-overall strong {
    font-size: 18px;
    white-space: nowrap;
}

.rms-rating-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.rms-rating-group {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border-color, rgba(120, 140, 160, 0.28));
    border-radius: 12px;
}

.rms-rating-group legend {
    padding: 0 7px;
    font-weight: 700;
}

.rms-rating-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: center;
    gap: 12px;
    margin-top: 9px;
}

.rms-rating-row select {
    width: 100%;
}

.rms-rating-form-compact .rms-rating-groups {
    grid-template-columns: 1fr;
}

@media (max-width: 760px) {
    .rms-rating-groups {
        grid-template-columns: 1fr;
    }

    .rms-rating-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .rms-live-overall {
        min-width: 0;
        text-align: left;
    }
}


/* Phase 29: RMS public rating summary and detailed review display */
.rms-summary-overall {
    min-width: 150px;
    display: grid;
    justify-items: end;
    gap: 2px;
}
.rms-summary-overall .review-score { font-size: 28px; font-weight: 800; line-height: 1; }
.rms-summary-overall > strong { font-size: 13px; }
.rms-public-summary {
    margin: 18px 0 22px;
    padding: 18px;
    border: 1px solid var(--border-color, rgba(120,140,160,.28));
    border-radius: 14px;
    background: var(--panel-soft, rgba(100,120,140,.045));
}
.rms-public-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.rms-public-summary-head h3 { margin: 3px 0 4px; }
.rms-public-summary-head p { margin: 0; opacity: .72; }
.rms-public-score { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px; text-align: right; }
.rms-public-score strong { font-size: 42px; line-height: .95; }
.rms-public-score > span { font-weight: 800; opacity: .7; }
.rms-public-score small { grid-column: 1 / -1; opacity: .72; white-space: nowrap; }
.rms-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 22px; }
.rms-summary-group { min-width: 0; padding: 13px 14px; border: 1px solid var(--border-color, rgba(120,140,160,.22)); border-radius: 11px; }
.rms-summary-group-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 9px; }
.rms-summary-group-title > span { font-size: 12px; font-weight: 800; opacity: .72; }
.rms-summary-row { display: grid; grid-template-columns: minmax(92px, .85fr) minmax(80px, 1.25fr) 42px; align-items: center; gap: 9px; min-height: 27px; font-size: 13px; }
.rms-summary-row > b { text-align: right; font-size: 12px; }
.rms-summary-meter { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(120,140,160,.18); }
.rms-summary-meter > i { display: block; height: 100%; border-radius: inherit; background: currentColor; opacity: .68; }
.rms-legacy-summary-note { margin: 16px 0 20px; padding: 11px 13px; border: 1px dashed var(--border-color, rgba(120,140,160,.3)); border-radius: 10px; font-size: 13px; opacity: .78; }
.rms-review-overall { display: inline-flex; align-items: baseline; gap: 2px; padding: 6px 9px; border: 1px solid var(--border-color, rgba(120,140,160,.25)); border-radius: 9px; white-space: nowrap; }
.rms-review-overall strong { font-size: 18px; }
.rms-review-overall small { font-size: 11px; opacity: .7; }
.rms-review-category-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.rms-review-category-strip > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(120,140,160,.1); font-size: 12px; }
.rms-review-category-strip > span b { font-weight: 700; opacity: .75; }
.rms-review-category-strip.compact { margin-top: 8px; }
.rms-review-details { margin: 10px 0 4px; border-top: 1px solid var(--border-color, rgba(120,140,160,.2)); padding-top: 9px; }
.rms-review-details > summary { cursor: pointer; font-size: 12px; font-weight: 800; }
.rms-review-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 11px; }
.rms-review-detail-group { min-width: 0; padding: 10px 11px; border-radius: 9px; background: rgba(120,140,160,.06); }
.rms-review-detail-group > strong { display: block; margin-bottom: 6px; font-size: 12px; }
.rms-review-detail-row { display: grid; grid-template-columns: minmax(80px,1fr) minmax(65px,1fr) 38px; align-items: center; gap: 7px; min-height: 24px; font-size: 11px; }
.rms-review-detail-row > b { text-align: right; }
.rms-legacy-rating-badge { display: inline-block; margin: 7px 0; padding: 4px 7px; border-radius: 7px; background: rgba(120,140,160,.09); font-size: 11px; opacity: .72; }
@media (max-width: 760px) {
    .rms-public-summary-head { flex-direction: column; }
    .rms-public-score { text-align: left; }
    .rms-summary-grid, .rms-review-detail-grid { grid-template-columns: 1fr; }
    .rms-summary-row { grid-template-columns: minmax(88px,.9fr) minmax(70px,1fr) 38px; }
}

/* RMS ratings Phase 4: admin moderation summaries */
.rms-admin-category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}
.rms-admin-category-grid span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid var(--border-color, rgba(127, 127, 127, .25));
    border-radius: 6px;
    font-size: .78rem;
    line-height: 1.2;
}
.rms-admin-category-grid b {
    font-weight: 700;
}

/* Server Details: compact RMS ratings/reviews layout */
.server-review-section .section-heading {
    align-items: center;
    gap: 12px;
}

.server-review-section .rms-summary-overall {
    min-width: 118px;
    gap: 1px;
}

.server-review-section .rms-summary-overall .review-score {
    font-size: 22px;
}

.server-review-section .rms-summary-overall > strong {
    font-size: 11px;
}

.server-review-section .rms-summary-overall .muted {
    font-size: 11px;
}

.server-review-section .rms-public-summary {
    margin: 10px 0 14px;
    padding: 11px 12px;
    border-radius: 9px;
}

.server-review-section .rms-public-summary-head {
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.server-review-section .rms-public-summary-head .eyebrow {
    font-size: 10px;
}

.server-review-section .rms-public-summary-head h3 {
    margin: 1px 0 2px;
    font-size: 15px;
}

.server-review-section .rms-public-summary-head p {
    font-size: 11px;
}

.server-review-section .rms-public-score {
    gap: 2px;
}

.server-review-section .rms-public-score strong {
    font-size: 30px;
}

.server-review-section .rms-public-score > span,
.server-review-section .rms-public-score small {
    font-size: 10px;
}

.server-review-section .rms-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 16px;
}

.server-review-section .rms-summary-group {
    padding: 7px 8px;
    border-radius: 7px;
}

.server-review-section .rms-summary-group-title {
    gap: 8px;
    margin-bottom: 4px;
}

.server-review-section .rms-summary-group-title > strong {
    font-size: 11px;
}

.server-review-section .rms-summary-group-title > span {
    font-size: 10px;
}

.server-review-section .rms-summary-row {
    grid-template-columns: minmax(80px, .9fr) minmax(75px, 1.35fr) 34px;
    gap: 6px;
    min-height: 20px;
    font-size: 11px;
}

.server-review-section .rms-summary-row > b {
    font-size: 10px;
}

.server-review-section .rms-summary-meter {
    height: 5px;
}

/* Compact review submission/edit category controls on Server Details only. */
.server-review-section .rms-rating-form {
    padding: 10px 0 0;
}

.server-review-section .rms-rating-intro {
    gap: 10px;
    margin-bottom: 8px;
}

.server-review-section .rms-rating-intro > div:first-child > strong {
    font-size: 12px;
}

.server-review-section .rms-rating-intro .muted {
    font-size: 10px;
}

.server-review-section .rms-live-overall {
    min-width: 90px;
}

.server-review-section .rms-live-overall span {
    font-size: 10px;
}

.server-review-section .rms-live-overall strong {
    font-size: 14px;
}

.server-review-section .rms-rating-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
}

.server-review-section .rms-rating-group {
    padding: 7px 9px 8px;
    border-radius: 7px;
}

.server-review-section .rms-rating-group legend {
    padding: 0 4px;
    font-size: 11px;
}

.server-review-section .rms-rating-row {
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 7px;
    margin-top: 4px;
    font-size: 11px;
}

.server-review-section .rms-rating-row select {
    min-height: 27px;
    padding: 3px 22px 3px 6px;
    font-size: 11px;
}

.server-review-section .review-form > label,
.server-review-section .rms-rating-form > label {
    font-size: 11px;
}

.server-review-section .review-form textarea,
.server-review-section .rms-rating-form textarea {
    margin-top: 4px;
}

/* Individual reviews: keep category information present without dominating the review. */
.server-review-section .review {
    padding-top: 12px;
    padding-bottom: 12px;
}

.server-review-section .rms-review-overall {
    padding: 4px 7px;
    border-radius: 7px;
}

.server-review-section .rms-review-overall strong {
    font-size: 15px;
}

.server-review-section .rms-review-overall small {
    font-size: 9px;
}

.server-review-section .rms-review-category-strip {
    gap: 4px;
    margin: 6px 0;
}

.server-review-section .rms-review-category-strip > span {
    gap: 4px;
    padding: 3px 6px;
    font-size: 10px;
}

.server-review-section .rms-review-details {
    margin: 6px 0 2px;
    padding-top: 6px;
}

.server-review-section .rms-review-details > summary {
    font-size: 10px;
}

.server-review-section .rms-review-detail-grid {
    gap: 7px;
    margin-top: 7px;
}

.server-review-section .rms-review-detail-group {
    padding: 6px 7px;
    border-radius: 6px;
}

.server-review-section .rms-review-detail-group > strong {
    margin-bottom: 3px;
    font-size: 10px;
}

.server-review-section .rms-review-detail-row {
    grid-template-columns: minmax(72px, 1fr) minmax(55px, 1fr) 33px;
    gap: 5px;
    min-height: 18px;
    font-size: 9px;
}

.server-review-section .rms-review-detail-row > b {
    font-size: 9px;
}

@media (min-width: 1080px) {
    .server-review-section .rms-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .server-review-section .rms-rating-groups {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .server-review-section .rms-public-summary-head {
        align-items: flex-start;
    }

    .server-review-section .rms-summary-grid,
    .server-review-section .rms-rating-groups,
    .server-review-section .rms-review-detail-grid {
        grid-template-columns: 1fr;
    }

    .server-review-section .rms-summary-row {
        grid-template-columns: minmax(80px, .9fr) minmax(65px, 1fr) 34px;
    }
}


/* Server Details: unified layout and border system (Phase 30) */
.server-profile,
.server-review-section {
    --server-detail-border: var(--line);
    --server-detail-surface: var(--panel);
    --server-detail-soft: var(--panel-soft);
}

/* Match the same hero language used by the rest of the site. */
.server-profile .server-profile-header.page-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
    gap: 18px;
    align-items: center;
    padding: 16px;
    background: var(--server-detail-surface);
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.server-profile .server-profile-header.page-hero::before {
    width: 3px;
    background: var(--gold);
}

.server-profile .server-profile-header.page-hero::after {
    display: none;
}

.server-profile-heading h1 {
    font-size: 24px;
}

.server-detail-badges {
    margin-top: 1px;
}

.server-profile-trustline {
    margin-top: 8px;
}

/* Keep the section navigator flat and consistent with normal site toolbars. */
.server-quick-nav {
    min-height: 36px;
    padding: 3px;
    gap: 2px;
    background: var(--server-detail-surface);
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius);
    box-shadow: none;
}

.server-quick-nav a {
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.server-quick-nav a:hover,
.server-quick-nav a:focus-visible {
    background: var(--server-detail-soft);
    border-color: var(--server-detail-border);
}

.server-banner {
    min-height: 72px;
    padding: 7px 10px;
    background: var(--server-detail-surface);
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius);
    box-shadow: none;
}

/* The metric rows are one coherent strip instead of several detached mini-cards. */
.server-metrics,
.server-health-metrics,
.server-community-metrics {
    gap: 0;
    overflow: hidden;
    background: var(--server-detail-surface);
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius);
}

.server-metrics > *,
.server-health-metrics > *,
.server-community-metrics > * {
    min-height: 66px;
    padding: 9px 8px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--server-detail-border);
    border-radius: 0;
}

.server-metrics > *:last-child,
.server-health-metrics > *:last-child,
.server-community-metrics > *:last-child {
    border-right: 0;
}

/* Every primary section now uses exactly the same solid panel treatment. */
.server-profile > .panel,
.server-review-section,
.server-profile .server-community-summary,
.server-profile .report-section {
    background: var(--server-detail-surface);
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.server-review-section,
.server-profile .server-community-summary,
.server-profile .report-section {
    border-top-width: 1px;
    border-top-color: var(--server-detail-border);
}

.server-profile .panel-heading,
.server-review-section > .section-heading {
    min-height: 34px;
    margin: 0 0 10px;
    padding: 7px 9px;
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius-sm);
}

.server-review-section > .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

/* Overview metadata uses the same solid cell borders as other data views. */
.server-overview-grid .detail-list {
    overflow: hidden;
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius-sm);
}

.server-overview-grid .detail-list dt,
.server-overview-grid .detail-list dd {
    border-color: var(--server-detail-border);
}

.server-overview-grid .detail-list dt:first-of-type,
.server-overview-grid .detail-list dd:first-of-type {
    border-top: 0;
}

/* Empty/legacy states should not introduce a second dashed visual language. */
.server-profile .empty-state,
.server-review-section .empty-state,
.server-review-section .rms-legacy-summary-note {
    background: var(--server-detail-soft);
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius-sm);
}

/* Health/rank charts and content rows follow the same surface hierarchy. */
.server-health-section .data-chart,
.rank-history-section .rank-history-chart,
.rank-history-summary > span,
.server-updates-section .content-list article,
.server-gallery-item {
    background: var(--server-detail-soft);
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.rank-history-summary {
    gap: 6px;
}

.server-updates-section .content-list {
    gap: 6px;
}

/* RMS block: keep it compact, but visually part of the same panel system. */
.server-review-section .rms-public-summary {
    background: var(--server-detail-soft);
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.server-review-section .rms-summary-group,
.server-review-section .rms-review-overall,
.server-review-section .rms-rating-group,
.server-review-section .review-rating-summary,
.server-review-section .review-sort-bar,
.server-review-section .review,
.server-review-section .review-form,
.server-review-section .owner-reply-form {
    border-color: var(--server-detail-border);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.server-review-section .rms-summary-group {
    background: var(--server-detail-surface);
}

.server-review-section .rms-review-detail-group,
.server-review-section .rms-review-category-strip > span,
.server-review-section .rms-legacy-rating-badge {
    background: var(--server-detail-soft);
    border-radius: var(--radius-sm);
}

.server-review-section .review-list {
    gap: 6px;
}

.server-review-section .review:hover {
    border-color: var(--line-light);
}

.server-review-section .rms-review-details {
    border-top-color: var(--server-detail-border);
}

@media (max-width: 820px) {
    .server-profile .server-profile-header.page-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .server-metrics,
    .server-community-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-health-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-metrics > *,
    .server-health-metrics > *,
    .server-community-metrics > * {
        border-right: 1px solid var(--server-detail-border);
        border-bottom: 1px solid var(--server-detail-border);
    }

    .server-metrics > *:nth-child(2n),
    .server-health-metrics > *:nth-child(2n),
    .server-community-metrics > *:nth-child(2n) {
        border-right: 0;
    }

    .server-metrics > *:nth-last-child(-n + 2),
    .server-health-metrics > *:nth-last-child(-n + 2),
    .server-community-metrics > *:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .server-metrics > *:last-child,
    .server-community-metrics > *:last-child {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 0;
    }
}

@media (max-width: 560px) {
    .server-profile .server-profile-header.page-hero {
        padding: 13px;
    }

    .server-profile-actions {
        grid-template-columns: 1fr 1fr;
    }

    .server-review-section > .section-heading {
        grid-template-columns: 1fr;
    }

    .server-review-section .review-rating-summary {
        width: 100%;
        text-align: left;
    }

    .server-metrics,
    .server-health-metrics,
    .server-community-metrics {
        grid-template-columns: 1fr;
    }

    .server-metrics > *,
    .server-health-metrics > *,
    .server-community-metrics > *,
    .server-metrics > *:nth-child(2n),
    .server-health-metrics > *:nth-child(2n),
    .server-community-metrics > *:nth-child(2n),
    .server-metrics > *:nth-last-child(-n + 2),
    .server-health-metrics > *:nth-last-child(-n + 2),
    .server-community-metrics > *:nth-last-child(-n + 2) {
        grid-column: auto;
        border-right: 0;
        border-bottom: 1px solid var(--server-detail-border);
    }

    .server-metrics > *:last-child,
    .server-health-metrics > *:last-child,
    .server-community-metrics > *:last-child {
        border-bottom: 0;
    }
}

/* Phase 31: Server Details review composer — make the pre-review state match the completed-review page. */
.server-review-section .review-composer {
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
    background: var(--server-detail-surface);
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius-sm);
}

.server-review-section .review-composer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    background: var(--server-detail-soft);
    border-bottom: 1px solid var(--server-detail-border);
}

.server-review-section .review-composer-head h3 {
    margin: 1px 0 2px;
    font-size: 14px;
    line-height: 1.25;
}

.server-review-section .review-composer-head p {
    margin: 0;
    font-size: 10px;
}

.server-review-section .review-composer-score {
    min-width: 84px;
    padding-left: 12px;
    border-left: 1px solid var(--server-detail-border);
    text-align: right;
}

.server-review-section .review-composer-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    background: var(--server-detail-surface);
}

.server-review-section .review-composer-group {
    min-width: 0;
    margin: 0;
    padding: 10px 12px 11px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--server-detail-border);
    border-bottom: 1px solid var(--server-detail-border);
    border-radius: 0;
}

.server-review-section .review-composer-group:nth-child(3n) {
    border-right: 0;
}

.server-review-section .review-composer-group legend {
    float: left;
    width: 100%;
    margin: 0 0 5px;
    padding: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.server-review-section .review-composer-group legend + * {
    clear: both;
}

.server-review-section .review-composer-group-gameplay {
    grid-column: span 2;
    border-bottom: 0;
}

.server-review-section .review-composer-group-monetization {
    border-right: 0;
    border-bottom: 0;
}

.server-review-section .review-composer .rms-rating-row {
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
    min-height: 29px;
    margin: 0;
    padding: 3px 0;
    border-top: 1px solid color-mix(in srgb, var(--server-detail-border) 58%, transparent);
}

.server-review-section .review-composer .rms-rating-row:first-of-type {
    border-top: 0;
}

.server-review-section .review-composer .rms-rating-row span {
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.server-review-section .review-composer .rms-rating-row select {
    width: 52px;
    min-height: 25px;
    padding: 2px 18px 2px 6px;
    font-size: 11px;
    text-align: center;
}

.server-review-section .review-composer-write {
    padding: 11px 14px 12px;
    border-top: 1px solid var(--server-detail-border);
}

.server-review-section .review-composer-write label {
    display: grid;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
}

.server-review-section .review-composer-write textarea {
    min-height: 82px;
    margin: 0;
    resize: vertical;
}

.server-review-section .review-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    background: var(--server-detail-soft);
    border-top: 1px solid var(--server-detail-border);
}

.server-review-section .review-composer-actions .muted {
    font-size: 10px;
}

.server-review-section .review-composer-actions .btn {
    min-width: 118px;
}

@media (max-width: 900px) {
    .server-review-section .review-composer-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-review-section .review-composer-group,
    .server-review-section .review-composer-group:nth-child(3n) {
        border-right: 1px solid var(--server-detail-border);
        border-bottom: 1px solid var(--server-detail-border);
    }

    .server-review-section .review-composer-group:nth-child(2n) {
        border-right: 0;
    }

    .server-review-section .review-composer-group-gameplay {
        grid-column: span 1;
    }

    .server-review-section .review-composer-group-monetization {
        border-bottom: 0;
    }
}

@media (max-width: 620px) {
    .server-review-section .review-composer-head {
        align-items: flex-start;
    }

    .server-review-section .review-composer-score {
        min-width: 76px;
    }

    .server-review-section .review-composer-groups {
        grid-template-columns: 1fr;
    }

    .server-review-section .review-composer-group,
    .server-review-section .review-composer-group:nth-child(2n),
    .server-review-section .review-composer-group:nth-child(3n) {
        grid-column: auto;
        border-right: 0;
        border-bottom: 1px solid var(--server-detail-border);
    }

    .server-review-section .review-composer-group-monetization {
        border-bottom: 0;
    }

    .server-review-section .review-composer-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .server-review-section .review-composer-actions .btn {
        width: 100%;
    }
}

/* Phase 32: Keep the detailed rating form hidden until the player explicitly opens it. */
.server-review-section .review-compose-toggle {
    margin-top: 10px;
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius-sm);
    background: var(--server-detail-surface);
    overflow: hidden;
}

.server-review-section .review-compose-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: var(--server-detail-soft);
}

.server-review-section .review-compose-trigger::-webkit-details-marker {
    display: none;
}

.server-review-section .review-compose-trigger::marker {
    display: none;
    content: '';
}

.server-review-section .review-compose-trigger > span:first-child {
    display: grid;
    gap: 2px;
}

.server-review-section .review-compose-trigger strong {
    font-size: 12px;
    line-height: 1.25;
}

.server-review-section .review-compose-trigger small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.server-review-section .review-compose-trigger-icon {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius-sm);
    background: var(--server-detail-surface);
}

.server-review-section .review-compose-trigger-icon::before,
.server-review-section .review-compose-trigger-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform .16s ease, opacity .16s ease;
}

.server-review-section .review-compose-trigger-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.server-review-section .review-compose-toggle[open] .review-compose-trigger-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}

.server-review-section .review-compose-toggle[open] .review-compose-trigger {
    border-bottom: 1px solid var(--server-detail-border);
}

.server-review-section .review-compose-toggle .review-composer {
    margin-top: 0;
    border: 0;
    border-radius: 0;
}

.server-review-section .review-compose-toggle .review-composer-head {
    border-top: 0;
}

/* ============================================================
   Phase 33 - Server Details single-border hierarchy
   Keep the panel itself as the only outer frame. Child headings
   use a separator line, while empty/content states stay borderless.
   ============================================================ */
.server-profile .panel > .panel-heading:first-child,
.server-profile .rank-history-section > .panel-heading:first-child,
.server-profile .server-updates-section > .panel-heading:first-child,
.server-profile .server-gallery-section > .panel-heading:first-child,
.server-profile .server-health-section > .panel-heading:first-child,
.server-profile .server-community-summary > .panel-heading:first-child {
    margin: -12px -12px 10px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--server-detail-border);
    border-radius: 0;
}

/* Empty states sit inside the existing panel frame; a second box is unnecessary. */
.server-profile .empty-state,
.server-profile .empty-state-compact {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Updates already live inside a bordered panel, so remove the nested list frame. */
.server-profile .server-updates-section .content-list {
    border: 0;
    background: transparent;
}

/* When update rows exist, use simple row separators instead of boxed rows. */
.server-profile .server-updates-section .content-list article {
    border: 0;
    border-bottom: 1px solid var(--server-detail-border);
    border-radius: 0;
}

.server-profile .server-updates-section .content-list article:last-child {
    border-bottom: 0;
}

/* ============================================================
   Phase 34 - Server Details general redesign
   One cohesive server dashboard for every review/rating state.
   ============================================================ */
.server-profile {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr);
    gap: 12px;
    align-items: start;
}

.server-profile > .server-profile-header,
.server-profile > .server-quick-nav,
.server-profile > .server-banner,
.server-profile > .server-metrics,
.server-profile > .server-health-section,
.server-profile > .server-gallery-section {
    grid-column: 1 / -1;
}

.server-profile > .server-overview-section {
    grid-column: 1;
    grid-row: auto;
}

.server-profile > .server-community-summary {
    grid-column: 2;
    align-self: stretch;
}

.server-profile > .rank-history-section {
    grid-column: 1;
}

.server-profile > .server-updates-section {
    grid-column: 2;
}

/* Hero: cleaner directory-profile header, not a giant standalone card. */
.server-profile .server-profile-header.page-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    min-height: 112px;
    padding: 18px 20px;
    box-shadow: none;
}

.server-profile .server-profile-header.page-hero::before {
    top: 16px;
    bottom: 16px;
    height: auto;
}

.server-profile-heading {
    min-width: 0;
}

.server-profile-heading h1 {
    margin: 3px 0 6px;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.1;
}

.server-profile-trustline {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 9px;
    color: var(--muted);
    font-size: 11px;
}

.server-profile-trustline span {
    position: relative;
}

.server-profile-trustline span + span::before {
    content: '·';
    position: absolute;
    left: -9px;
    color: var(--line-light);
}

.server-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 6px;
    width: min(100%, 300px);
}

.server-profile-actions .btn,
.server-profile-actions form,
.server-profile-actions form .btn {
    width: 100%;
}

/* Compact sticky-ish local navigation language. */
.server-quick-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 6px;
    min-height: 38px;
}

.server-quick-nav a {
    position: relative;
    min-height: 28px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
}

/* Banner should read as media, not another card inside a card. */
.server-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    padding: 8px;
    overflow: hidden;
}

.server-banner .profile-banner {
    display: block;
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
}

/* Primary KPI strip. */
.server-metrics {
    min-height: 70px;
}

.server-metrics > div,
.server-community-metrics > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.server-metrics .metric-label,
.server-community-metrics .metric-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.server-metrics .metric-value,
.server-community-metrics .metric-value {
    font-size: 15px;
    line-height: 1.1;
}

/* Shared section chrome: one outer border and one simple title separator. */
.server-profile > .panel,
.server-review-section {
    margin: 0;
    padding: 12px;
    box-shadow: none;
}

.server-profile .panel > .panel-heading:first-child,
.server-profile .rank-history-section > .panel-heading:first-child,
.server-profile .server-updates-section > .panel-heading:first-child,
.server-profile .server-gallery-section > .panel-heading:first-child,
.server-profile .server-health-section > .panel-heading:first-child,
.server-profile .server-community-summary > .panel-heading:first-child {
    min-height: 43px;
    margin: -12px -12px 12px;
    padding: 9px 12px 8px;
    background: var(--server-detail-soft);
}

.server-profile .panel-heading h2,
.server-review-section .section-heading h2 {
    margin: 1px 0 0;
    font-size: 15px;
    line-height: 1.2;
}

.server-profile .panel-heading .eyebrow,
.server-review-section .section-heading .eyebrow {
    font-size: 8px;
}

/* Overview is the main content card. */
.server-overview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 235px);
    gap: 18px;
    align-items: start;
}

.server-overview-grid .profile-description {
    margin: 0;
    line-height: 1.65;
}

.server-overview-grid .detail-list {
    margin: 0;
    border: 0;
    border-left: 1px solid var(--server-detail-border);
    border-radius: 0;
}

.server-overview-grid .detail-list > div {
    padding-left: 13px;
}

/* Community summary uses the same independent metric-card spacing as server metrics. */
.server-community-summary {
    height: 100%;
}

.server-community-summary .server-community-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.server-community-summary .server-community-metrics > .metric-card {
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    min-height: 72px;
    padding: 10px 8px;
    text-align: center;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.server-community-summary .server-community-metrics .metric-label {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.25;
}

.server-community-summary .server-community-metrics .metric-value {
    display: block;
    margin: 0;
    color: var(--text-strong);
    font-size: 16px;
    line-height: 1.2;
}

@media (max-width: 820px) {
    .server-community-summary .server-community-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-community-summary .server-community-metrics > .metric-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .server-community-summary .server-community-metrics {
        grid-template-columns: 1fr;
    }

    .server-community-summary .server-community-metrics > .metric-card:last-child {
        grid-column: auto;
    }
}

/* Health becomes a clear horizontal data section. */
.server-health-metrics {
    margin-bottom: 10px;
}

.server-health-section .data-chart {
    margin-top: 0;
    padding: 9px 10px;
    border: 0;
    border-top: 1px solid var(--server-detail-border);
    border-radius: 0;
    background: transparent;
}

/* Ranking + Updates form an activity row with identical density. */
.rank-history-section,
.server-updates-section {
    min-height: 100%;
}

.rank-history-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 8px;
    border: 1px solid var(--server-detail-border);
}

.rank-history-summary > span {
    padding: 8px;
    border: 0;
    border-right: 1px solid var(--server-detail-border);
    border-radius: 0;
    background: transparent;
}

.rank-history-summary > span:last-child {
    border-right: 0;
}

.rank-history-chart {
    border: 0 !important;
    border-top: 1px solid var(--server-detail-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.server-updates-section .content-list {
    margin: 0;
}

.server-updates-section .content-list article {
    padding: 9px 2px;
    background: transparent;
}

.server-profile .empty-state,
.server-profile .empty-state-compact {
    margin: 0;
    padding: 18px 12px;
    background: transparent;
    color: var(--muted);
    text-align: center;
}

/* Reviews: same frame whether there are ratings, legacy ratings, or none. */
.server-review-section {
    margin-top: 12px;
}

.server-review-section > .section-heading {
    margin: -12px -12px 12px;
    padding: 10px 12px;
    min-height: 58px;
    background: var(--server-detail-soft);
    border: 0;
    border-bottom: 1px solid var(--server-detail-border);
    border-radius: 0;
}

.server-review-section .review-rating-summary {
    min-width: 180px;
    padding: 0 0 0 14px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--server-detail-border);
    border-radius: 0;
}

.server-review-section .review-rating-summary .review-score {
    font-size: 19px;
    line-height: 1;
}

.server-review-section .rms-public-summary {
    margin: 0 0 10px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--server-detail-border);
    background: transparent;
}

.server-review-section .rms-public-summary-head {
    padding: 10px 12px;
    background: var(--server-detail-soft);
    border-bottom: 1px solid var(--server-detail-border);
}

.server-review-section .rms-summary-grid {
    gap: 0;
    padding: 0;
}

.server-review-section .rms-summary-group {
    padding: 9px 10px;
    border: 0;
    border-right: 1px solid var(--server-detail-border);
    border-bottom: 1px solid var(--server-detail-border);
    border-radius: 0;
    background: transparent;
}

.server-review-section .rms-summary-group:nth-child(3n) {
    border-right: 0;
}

.server-review-section .rms-legacy-summary-note,
.server-review-section .review-existing-state,
.server-review-section .review-access-state,
.server-review-section .review-compose-toggle {
    margin: 0 0 10px;
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius-sm);
    background: var(--server-detail-soft);
}

.server-review-section .rms-legacy-summary-note {
    padding: 10px 12px;
}

.server-review-section .review-existing-state,
.server-review-section .review-access-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
}

.server-review-section .review-existing-state > span,
.server-review-section .review-access-state > div {
    min-width: 0;
}

.server-review-section .review-access-state > div {
    display: grid;
    gap: 2px;
}

.server-review-section .review-access-state strong {
    font-size: 11px;
}

.server-review-section .review-access-state span {
    color: var(--muted);
    font-size: 10px;
}

.server-review-section .review-access-state-muted {
    opacity: .88;
}

.server-review-section .review-compose-toggle {
    overflow: hidden;
}

.server-review-section .review-compose-trigger {
    min-height: 46px;
    padding: 9px 12px;
    background: transparent;
}

.server-review-section .review-compose-trigger:hover {
    background: var(--panel-2);
}

.server-review-section .review-sort-bar {
    min-height: 38px;
    margin: 8px 0;
    padding: 10px 10px;
    background: var(--server-detail-soft);
    border: 1px solid var(--server-detail-border);
    border-radius: var(--radius-sm);
}

.server-review-section .review-list {
    gap: 8px;
}

.server-review-section .review {
    padding: 11px 12px;
    background: var(--server-detail-surface);
    border: 1px solid var(--server-detail-border);
}

.server-review-section .review:hover {
    background: var(--server-detail-soft);
}

/* Gallery shares the same flat content treatment. */
.server-gallery-grid {
    gap: 8px;
}

.server-gallery-item {
    overflow: hidden;
    border: 1px solid var(--server-detail-border);
}

@media (max-width: 980px) {
    .server-profile {
        grid-template-columns: 1fr;
    }

    .server-profile > .server-profile-header,
    .server-profile > .server-quick-nav,
    .server-profile > .server-banner,
    .server-profile > .server-metrics,
    .server-profile > .server-overview-section,
    .server-profile > .server-health-section,
    .server-profile > .rank-history-section,
    .server-profile > .server-gallery-section,
    .server-profile > .server-updates-section,
    .server-profile > .server-community-summary {
        grid-column: 1;
    }

    .server-community-summary .server-community-metrics {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .server-community-summary .server-community-metrics > div,
    .server-community-summary .server-community-metrics > div:nth-child(2n),
    .server-community-summary .server-community-metrics > div:nth-last-child(-n + 2),
    .server-community-summary .server-community-metrics > div:last-child {
        grid-column: auto;
        border-right: 1px solid var(--server-detail-border);
        border-bottom: 0;
    }

    .server-community-summary .server-community-metrics > div:last-child {
        border-right: 0;
    }
}

@media (max-width: 760px) {
    .server-profile .server-profile-header.page-hero {
        grid-template-columns: 1fr;
    }

    .server-profile-actions {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-overview-grid {
        grid-template-columns: 1fr;
    }

    .server-overview-grid .detail-list {
        border-left: 0;
        border-top: 1px solid var(--server-detail-border);
        padding-top: 8px;
    }

    .server-overview-grid .detail-list > div {
        padding-left: 0;
    }

    .server-community-summary .server-community-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-community-summary .server-community-metrics > div,
    .server-community-summary .server-community-metrics > div:nth-child(2n),
    .server-community-summary .server-community-metrics > div:nth-last-child(-n + 2),
    .server-community-summary .server-community-metrics > div:last-child {
        border-right: 1px solid var(--server-detail-border);
        border-bottom: 1px solid var(--server-detail-border);
    }

    .server-community-summary .server-community-metrics > div:nth-child(2n) {
        border-right: 0;
    }

    .server-community-summary .server-community-metrics > div:last-child {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 0;
    }

    .server-review-section > .section-heading {
        grid-template-columns: 1fr;
    }

    .server-review-section .review-rating-summary {
        min-width: 0;
        width: 100%;
        padding: 8px 0 0;
        border-left: 0;
        border-top: 1px solid var(--server-detail-border);
        text-align: left;
    }

    .rank-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rank-history-summary > span:nth-child(2) {
        border-right: 0;
    }

    .rank-history-summary > span:nth-child(-n + 2) {
        border-bottom: 1px solid var(--server-detail-border);
    }
}

@media (max-width: 520px) {
    .server-profile {
        gap: 9px;
    }

    .server-profile .server-profile-header.page-hero {
        min-height: 0;
        padding: 14px;
    }

    .server-profile-actions {
        grid-template-columns: 1fr;
    }

    .server-profile-trustline span + span::before {
        display: none;
    }

    .server-profile-trustline {
        gap: 4px 10px;
    }

    .server-review-section .review-existing-state,
    .server-review-section .review-access-state {
        align-items: stretch;
        flex-direction: column;
    }

    .server-review-section .review-access-state .btn {
        width: 100%;
    }
}

/* ========================================================================== 
   Server Details — shared site layout reset
   Uses the same page-hero / panel / panel-heading / metric-card language as
   rankings and account pages. This block intentionally wins over legacy
   Server Details phases above without introducing a second visual system.
   ========================================================================== */
.server-profile {
    display: block;
}

.server-profile > * {
    margin-bottom: var(--space-4);
}

.server-profile > *:last-child {
    margin-bottom: 0;
}

.server-profile .server-profile-header.page-hero {
    display: flex;
    grid-template-columns: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 0;
    padding: 14px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent-dark);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.server-profile .server-profile-header.page-hero::before {
    display: block;
    width: 3px;
    background: var(--gold);
}

.server-profile .server-profile-header.page-hero::after {
    display: none;
}

.server-profile-heading {
    min-width: 0;
}

.server-profile-heading h1 {
    margin: 0 0 5px;
    font-size: 22px;
    line-height: 1.15;
}

.server-detail-badges,
.server-profile-trustline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
}

.server-detail-badges {
    margin-top: 7px;
}

.server-profile-trustline {
    margin-top: 8px;
    color: var(--muted);
    font-size: var(--text-xs);
}

.server-profile-trustline span + span::before {
    display: none;
}

.server-profile-actions.action-group {
    display: flex;
    grid-template-columns: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: none;
}

.server-profile-actions.action-group form,
.server-profile-actions.action-group .btn,
.server-profile-actions.action-group form .btn {
    width: auto;
    min-width: 0;
}

.server-quick-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 0;
    padding: 7px 8px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

.server-quick-nav a {
    min-height: 0;
    padding: 4px 7px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

.server-quick-nav a:hover,
.server-quick-nav a:focus-visible {
    color: var(--text-strong);
    background: var(--panel-2);
    border: 0;
}

.server-banner {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.server-banner .profile-banner {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.server-metrics,
.server-health-metrics,
.server-community-metrics {
    gap: 7px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.server-metrics > .metric-card,
.server-health-metrics > .metric-card,
.server-community-metrics > .metric-card,
.server-community-summary .server-community-metrics > .metric-card {
    display: block;
    min-height: 76px;
    padding: 10px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-top: 2px solid var(--line-light);
    border-radius: var(--radius);
}

.server-metrics .metric-label,
.server-health-metrics .metric-label,
.server-community-metrics .metric-label {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.server-metrics .metric-value,
.server-health-metrics .metric-value,
.server-community-metrics .metric-value,
.server-health-metrics .metric-card > b {
    display: block;
    margin: 0;
    color: var(--text-strong);
    font-size: 18px;
    line-height: 1.15;
}

.server-profile > .panel,
.server-profile .server-community-summary,
.server-profile .server-review-section,
.server-profile .report-section {
    margin-bottom: var(--space-4);
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.server-profile .panel-heading,
.server-profile .server-review-section > .panel-heading {
    display: flex;
    min-height: 34px;
    margin: 0 0 10px;
    padding: 0 0 7px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.server-profile .panel-heading h2,
.server-profile .panel-heading h3 {
    margin: 0;
    font-size: 15px;
}

.server-profile .panel-heading .eyebrow {
    margin-bottom: 2px;
}

.server-overview-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, .7fr);
    gap: 14px;
    padding: 0;
    background: transparent;
    border: 0;
}

.server-overview-grid .profile-description {
    margin: 0;
    line-height: 1.65;
}

.server-overview-grid .detail-list {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.server-overview-grid .detail-list > div {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    padding: 0;
    border-bottom: 1px solid var(--line);
}

.server-overview-grid .detail-list > div:first-child {
    border-top: 1px solid var(--line);
}

.server-overview-grid .detail-list dt,
.server-overview-grid .detail-list dd {
    margin: 0;
    padding: 7px 8px;
    border: 0;
}

.server-overview-grid .detail-list dt {
    color: var(--muted);
    background: var(--panel-2);
    font-size: 9px;
    font-weight: 700;
}

.server-overview-grid .detail-list dd {
    background: var(--panel);
    border-left: 1px solid var(--line);
}

.server-community-summary .server-community-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.server-community-summary .server-community-metrics > .metric-card,
.server-community-summary .server-community-metrics > .metric-card:nth-child(2n),
.server-community-summary .server-community-metrics > .metric-card:nth-last-child(-n + 2),
.server-community-summary .server-community-metrics > .metric-card:last-child {
    grid-column: auto;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.server-review-section > .panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.server-review-section .review-rating-summary {
    min-width: 150px;
    padding: 0;
    border: 0;
    text-align: right;
}

.server-review-section .rms-public-summary,
.server-review-section .review,
.server-review-section .review-form,
.server-review-section .review-sort-bar,
.server-review-section .review-existing-state,
.server-review-section .review-access-state,
.server-review-section .rms-legacy-summary-note {
    box-shadow: none;
    border-radius: var(--radius);
}

.server-profile .empty-state,
.server-review-section .empty-state,
.server-review-section .empty-state-compact {
    background: var(--panel-soft);
    border: 1px dashed var(--line-light);
    border-radius: 0;
}

.server-profile .content-list {
    gap: 0;
    background: var(--panel);
    border: 1px solid var(--line);
}

.server-profile .server-updates-section .content-list article {
    margin: 0;
    padding: 9px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.server-profile .server-updates-section .content-list article:last-child {
    border-bottom: 0;
}

.server-profile .report-section {
    margin-bottom: 0;
}

@media (max-width: 820px) {
    .server-profile .server-profile-header.page-hero {
        flex-direction: column;
    }

    .server-profile-actions.action-group {
        width: 100%;
        justify-content: flex-start;
    }

    .server-overview-grid {
        grid-template-columns: 1fr;
    }

    .server-community-summary .server-community-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .server-review-section > .panel-heading {
        flex-direction: column;
    }

    .server-review-section .review-rating-summary {
        width: 100%;
        min-width: 0;
        text-align: left;
    }
}

@media (max-width: 620px) {
    .server-profile-actions.action-group,
    .server-profile-actions.action-group form,
    .server-profile-actions.action-group .btn,
    .server-profile-actions.action-group form .btn {
        width: 100%;
    }

    .server-community-summary .server-community-metrics {
        grid-template-columns: 1fr;
    }

    .server-overview-grid .detail-list > div {
        grid-template-columns: 1fr;
    }

    .server-overview-grid .detail-list dd {
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

/* ==========================================================================\n   Home / Ranking - separated server cards\n   Keeps the existing ranking data and behavior, but removes the table-row\n   appearance by giving every server its own bordered block and breathing room.\n   ========================================================================== */
.ranking-cards-section {
    padding-bottom: 14px;
}

.ranking-cards-section .ranking-list {
    display: grid;
    gap: 18px;
    padding: 8px 18px 18px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ranking-cards-section .rank-row {
    overflow: hidden;
    min-height: 126px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease, background-color .12s ease;
}

.ranking-cards-section .rank-row:hover {
    z-index: auto;
    background: var(--panel);
    border-color: var(--line-light);
    box-shadow: var(--shadow-raised);
    transform: translateY(-1px);
}

.ranking-cards-section .rank-position {
    margin: 14px 0 14px 14px;
    padding: 10px 7px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.ranking-cards-section .rank-row-top-1 .rank-position,
.ranking-cards-section .rank-row-top-2 .rank-position,
.ranking-cards-section .rank-row-top-3 .rank-position {
    box-shadow: none;
}

.ranking-cards-section .rank-row-top-1 {
    border-color: rgba(205, 169, 80, .52);
}

.ranking-cards-section .rank-row-top-2 {
    border-color: rgba(169, 180, 189, .42);
}

.ranking-cards-section .rank-row-top-3 {
    border-color: rgba(168, 121, 78, .42);
}

.ranking-cards-section .rank-main {
    padding: 18px 18px;
}

.ranking-cards-section .rank-stats {
    align-self: stretch;
    margin: 14px 14px 14px 0;
    overflow: hidden;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.ranking-cards-section .rank-stats > div {
    border-bottom-color: var(--line);
}

.ranking-cards-section .rank-view-button {
    margin: 8px;
}

.ranking-cards-section .ranking-empty {
    border: 1px dashed var(--line-light);
    border-radius: var(--radius-sm);
}

.ranking-cards-section > .pagination-window {
    margin: 0 18px;
    padding: 14px 0 0;
    background: transparent;
    border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
    .ranking-cards-section .ranking-list {
        gap: 10px;
        padding: 0 10px 10px;
    }

    .ranking-cards-section .rank-position {
        margin: 8px 0 8px 8px;
    }

    .ranking-cards-section .rank-main {
        padding: 11px 12px;
    }

    .ranking-cards-section .rank-stats {
        margin: 0 8px 8px;
        border-top: 1px solid var(--line);
        border-left: 1px solid var(--line);
    }

    .ranking-cards-section > .pagination-window {
        margin: 0 10px;
    }
}

@media (max-width: 520px) {
    .ranking-cards-section {
        padding-bottom: 10px;
    }

    .ranking-cards-section .ranking-list {
        gap: 8px;
        padding: 0 8px 8px;
    }

    .ranking-cards-section .rank-position {
        margin: 7px 0 7px 7px;
    }

    .ranking-cards-section .rank-main {
        padding: 10px;
    }

    .ranking-cards-section .rank-stats {
        margin: 0 7px 7px;
    }

    .ranking-cards-section > .pagination-window {
        margin: 0 8px;
    }
}

.left-menubar .sidebar-panel,
.right-menubar .sidebar-panel {
    border-radius: var(--radius-md);
}

.left-menubar .sidebar-heading,
.right-menubar .sidebar-heading {
    min-height: 31px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}


.categories-panel {
    position: relative;
    overflow: visible !important;
}

.categories-panel .sidebar-heading {
    position: relative;
    z-index: 1;
    padding-right: 56px;
}

.categories-guard {
    position: absolute;
    top: -26px;
    right: 34px;
    z-index: 3;
    display: block;
    width: 32px;
    height: 71px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.overall-stat-panel {
    position: relative;
    overflow: visible !important;
}

.overall-stat-panel .sidebar-heading {
    position: relative;
    z-index: 1;
    justify-content: space-between;
}

.overall-stat-devlin {
    position: absolute;
    top: -28px;
    right: 36px;
    z-index: 3;
    display: block;
    width: 42px;
    height: 66px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.overall-stat-list {
    display: grid;
    gap: 0;
}

.overall-stat-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 39px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
}

.overall-stat-row:last-child {
    border-bottom: 0;
}

.overall-stat-row .overall-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: left;
    width: 40px;
    height: 40px;
    font-size: 15px;
    line-height: 1;
}

.overall-stat-row .overall-stat-label {
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 100;
    line-height: 1.15;
    white-space: nowrap;
}

.overall-stat-row strong {
    min-width: 24px;
    color: var(--text-strong);
    font: bold 16px/1 Arial, sans-serif;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.overall-stat-row:hover {
    background: rgba(255, 255, 255, 0.035);
}


/* Final spacing refinement for Home / Ranking cards */
@media (max-width: 860px) {
    .ranking-cards-section .ranking-list {
        gap: 14px;
        padding: 8px 14px 14px;
    }

    .ranking-cards-section .rank-position {
        margin: 12px 0 0 12px;
    }

    .ranking-cards-section .rank-main {
        padding: 14px 14px 16px;
    }

    .ranking-cards-section .rank-stats {
        margin: 0 12px 12px;
    }

    .ranking-cards-section > .pagination-window {
        margin: 0 14px;
    }
}

.latest-reviews-panel {
    position: relative;
    overflow: visible !important;
}

.latest-reviews-panel .sidebar-heading {
    position: relative;
    z-index: 1;
    padding-right: 66px;
}

.latest-reviews-frost {
    position: absolute;
    top: -28px;
    right: 24px;
    z-index: 3;
    display: block;
    width: 62px;
    height: 77px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1040px) {
    .categories-guard {
        top: -22px;
        right: 6px;
    }

    .overall-stat-devlin {
        top: -24px;
        left: 6px;
    }

    .latest-reviews-frost {
        top: -24px;
        right: 6px;
    }
}

.activity-feed-panel {
    position: relative;
    overflow: visible !important;
}

.activity-feed-panel .sidebar-heading {
    position: relative;
    z-index: 1;
    padding-right: 68px;
}

.community-activity-william {
    position: absolute;
    top: -12px;
    right: 38px;
    z-index: 3;
    display: block;
    width: 24px;
    height: 63px;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1040px) {
    .community-activity-william {
        top: -10px;
        right: 6px;
    }
}

/* Server Details: review header alignment + report popup */
.server-review-section > .panel-heading.server-section-heading {
    display: flex;
    min-height: 34px;
    margin: 0 0 10px;
    padding: 0 0 7px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.server-review-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.server-review-intro {
    min-width: 0;
}

.server-review-intro > p {
    margin: 0;
}

.server-review-intro > p + p {
    margin-top: 4px;
}

.server-review-section .server-review-overview .review-rating-summary {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 0;
    border: 0;
    text-align: right;
}

.server-report-dialog {
    width: min(540px, calc(100vw - 28px));
    max-width: 540px;
    padding: 0;
    color: var(--text);
    background: transparent;
    border: 0;
}

.server-report-dialog::backdrop {
    background: rgba(0, 0, 0, .58);
}

.server-report-dialog-card {
    padding: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.server-report-dialog-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: -2px 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}

.server-report-dialog-heading h2 {
    margin: 2px 0 0;
    font-size: 16px;
}

.server-report-dialog-close {
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--muted);
    font: 700 20px/28px Arial, sans-serif;
    text-align: center;
    cursor: pointer;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.server-report-dialog-close:hover,
.server-report-dialog-close:focus-visible {
    color: var(--text-strong);
    background: var(--panel-soft);
}

.server-report-dialog .report-form {
    margin-top: 12px;
}

.server-report-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

@media (max-width: 640px) {
    .server-review-overview {
        align-items: flex-start;
        flex-direction: column;
    }

    .server-review-section .server-review-overview .review-rating-summary {
        width: 100%;
        text-align: left;
    }
}

/* ============================================================
   Server Details - Header action layout
   Keep Visit Website / Discord / Report on the same row.
   ============================================================ */
.server-profile .server-profile-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    width: 100%;
    max-width: none;
}

.server-profile .server-profile-follow-action,
.server-profile .server-profile-claim-action {
    min-width: 0;
}

.server-profile .server-profile-follow-action form {
    display: block;
    margin: 0;
}

.server-profile .server-profile-link-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
}

.server-profile .server-profile-actions .btn,
.server-profile .server-profile-follow-action .btn,
.server-profile .server-profile-link-actions .btn,
.server-profile .server-profile-claim-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding-inline: 9px;
    text-align: center;
    white-space: nowrap;
}

/* If Discord is not configured, keep the two remaining actions balanced. */
.server-profile .server-profile-link-actions > .btn:first-child:nth-last-child(2),
.server-profile .server-profile-link-actions > .btn:first-child:nth-last-child(2) ~ .btn {
    grid-column: auto;
}

.server-profile .server-profile-link-actions:has(> .btn:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 560px) {
    .server-profile .server-profile-link-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .server-profile .server-profile-link-actions .btn {
        padding-inline: 6px;
        font-size: 9px;
    }
}

@media (max-width: 390px) {
    .server-profile .server-profile-link-actions {
        grid-template-columns: 1fr;
    }

    .server-profile .server-profile-link-actions .btn {
        font-size: inherit;
    }
}

/* ============================================================
   Server Details - Header actions compact alignment
   Follow on its own row; Visit Website / Discord / Report inline.
   ============================================================ */
.server-profile .server-profile-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    width: auto;
    min-width: max-content;
    max-width: none;
}

.server-profile .server-profile-follow-action {
    display: flex;
    justify-content: flex-end;
    width: auto;
    min-width: 0;
}

.server-profile .server-profile-follow-action form {
    display: block;
    width: auto;
    margin: 0;
}

.server-profile .server-profile-follow-action .btn {
    width: auto;
    min-width: 110px;
}

.server-profile .server-profile-link-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    min-width: 0;
}

.server-profile .server-profile-link-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 110px;
    min-height: 34px;
    padding: 6px 14px;
    text-align: center;
    white-space: nowrap;
}

.server-profile .server-profile-claim-action {
    width: auto;
    min-width: 110px;
    text-align: center;
}

@media (max-width: 760px) {
    .server-profile .server-profile-actions {
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .server-profile .server-profile-follow-action {
        justify-content: stretch;
        width: 100%;
    }

    .server-profile .server-profile-follow-action form,
    .server-profile .server-profile-follow-action .btn {
        width: 100%;
    }

    .server-profile .server-profile-link-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .server-profile .server-profile-link-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .server-profile .server-profile-claim-action {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .server-profile .server-profile-link-actions {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Server Details - Clean Detailed Rating Summary
   Compact, low-noise presentation inside Reviews.
   ============================================================ */
.server-review-section .rms-public-summary {
    margin: 12px 0 16px;
    padding: 0;
    overflow: hidden;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.server-review-section .rms-public-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 12px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
}

.server-review-section .rms-public-summary-title {
    min-width: 0;
}

.server-review-section .rms-public-summary-title h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.server-review-section .rms-public-summary-title p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    opacity: 1;
}

.server-review-section .rms-public-score {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    justify-content: end;
    gap: 2px;
    flex: 0 0 auto;
    min-width: 118px;
    padding: 0;
    text-align: right;
}

.server-review-section .rms-public-score strong {
    color: var(--gold);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
}

.server-review-section .rms-public-score > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    opacity: 1;
}

.server-review-section .rms-public-score small {
    grid-column: 1 / -1;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 1;
}

.server-review-section .rms-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
}

.server-review-section .rms-summary-group {
    min-width: 0;
    padding: 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.server-review-section .rms-summary-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 7px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--line);
}

.server-review-section .rms-summary-group-title > strong {
    color: var(--text-strong);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.server-review-section .rms-summary-group-title > span {
    flex: 0 0 auto;
    padding: 2px 5px;
    color: var(--text-strong);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    opacity: 1;
}

.server-review-section .rms-summary-row {
    display: grid;
    grid-template-columns: minmax(92px, .9fr) minmax(90px, 1.2fr) 36px;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    padding: 2px 0;
    color: var(--text);
    font-size: 11px;
    line-height: 1.2;
}

.server-review-section .rms-summary-row > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-review-section .rms-summary-row > b {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}

.server-review-section .rms-summary-meter {
    height: 5px;
    overflow: hidden;
    background: var(--line);
    border-radius: 999px;
}

.server-review-section .rms-summary-meter > i {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
    opacity: .82;
}

@media (max-width: 760px) {
    .server-review-section .rms-public-summary-head {
        align-items: flex-start;
        flex-direction: row;
        padding: 11px 12px;
    }

    .server-review-section .rms-summary-grid {
        grid-template-columns: 1fr;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .server-review-section .rms-public-summary-head {
        flex-direction: column;
        gap: 8px;
    }

    .server-review-section .rms-public-score {
        justify-content: start;
        min-width: 0;
        text-align: left;
    }

    .server-review-section .rms-summary-row {
        grid-template-columns: minmax(84px, .9fr) minmax(70px, 1fr) 34px;
        gap: 6px;
    }
}

/* ============================================================
   RMS rating tones + cleaner individual review cards
   Color is used as an accent only; review surfaces stay neutral.
   ============================================================ */
.server-review-section {
    --rating-poor: #b84d4d;
    --rating-low: #c77a32;
    --rating-average: #b99a35;
    --rating-good: #4f8b67;
    --rating-excellent: #318878;
}

.server-review-section .rating-tone-poor { --rating-tone: var(--rating-poor); }
.server-review-section .rating-tone-low { --rating-tone: var(--rating-low); }
.server-review-section .rating-tone-average { --rating-tone: var(--rating-average); }
.server-review-section .rating-tone-good { --rating-tone: var(--rating-good); }
.server-review-section .rating-tone-excellent { --rating-tone: var(--rating-excellent); }

/* Detailed Rating Summary: percentage controls the fill + value accent. */
.server-review-section .rms-summary-row .rms-summary-meter > i,
.server-review-section .rms-review-detail-row .rms-summary-meter > i {
    background: var(--rating-tone, var(--accent));
    opacity: .94;
}

.server-review-section .rms-summary-row > b,
.server-review-section .rms-review-detail-row > b {
    color: var(--rating-tone, var(--muted));
}

/* Individual review shell. */
.server-review-section .review-list {
    display: grid;
    gap: 10px;
}

.server-review-section .review-list > .review {
    position: relative;
    margin: 0;
    padding: 12px 13px;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}

.server-review-section .review-list > .review::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--line-light);
}

.server-review-section .review-list > .review .review-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--line);
}

.server-review-section .review-list > .review .review-meta > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    min-width: 0;
}

.server-review-section .review-list > .review .review-author {
    color: var(--text-strong);
    font-weight: 800;
}

.server-review-section .review-list > .review > p {
    margin: 0;
    padding: 1px 1px 2px;
    color: var(--text);
    font-size: 12px;
    line-height: 1.55;
}

/* Compact overall score badge. */
.server-review-section .rms-review-overall {
    display: grid;
    grid-template-columns: auto;
    justify-items: end;
    gap: 0;
    flex: 0 0 auto;
    min-width: 82px;
    padding: 6px 8px;
    color: var(--text-strong);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-top: 2px solid var(--rating-tone, var(--line-light));
    border-radius: var(--radius-sm);
    line-height: 1;
    white-space: nowrap;
}

.server-review-section .rms-review-overall-label {
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.server-review-section .rms-review-overall-score {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.server-review-section .rms-review-overall strong {
    color: var(--rating-tone, var(--text-strong));
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
}

.server-review-section .rms-review-overall small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    opacity: 1;
}

.server-review-section .rms-review-overall em {
    margin-top: 3px;
    color: var(--rating-tone, var(--muted));
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

/* Category averages: compact numeric badges, no extra progress bars. */
.server-review-section .rms-review-category-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0 4px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.server-review-section .rms-review-category-strip > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 7px;
    color: var(--text);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-left: 2px solid var(--rating-tone, var(--line-light));
    border-radius: var(--radius-sm);
    font-size: 10px;
    line-height: 1.15;
}

.server-review-section .rms-review-category-strip > span b {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    opacity: 1;
}

.server-review-section .rms-review-category-strip > span strong {
    color: var(--rating-tone, var(--text-strong));
    font-size: 11px;
    font-weight: 800;
}

.server-review-section .rms-review-category-strip > span small {
    color: var(--muted);
    font-size: 8px;
}

.server-review-section .rms-review-details {
    margin: 8px 0 2px;
    padding: 0;
    border-top: 0;
}

.server-review-section .rms-review-details > summary {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 7px;
    color: var(--muted);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

.server-review-section .rms-review-detail-grid {
    gap: 7px;
    margin-top: 7px;
}

.server-review-section .rms-review-detail-group {
    padding: 8px 9px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.server-review-section .rms-review-detail-group > strong {
    margin-bottom: 5px;
    padding-bottom: 5px;
    color: var(--text-strong);
    border-bottom: 1px solid var(--line);
    font-size: 10px;
}

.server-review-section .rms-review-detail-row {
    grid-template-columns: minmax(82px, .9fr) minmax(70px, 1.1fr) 38px;
    gap: 6px;
    min-height: 22px;
    font-size: 10px;
}

.server-review-section .review-quality-row {
    margin-top: 9px;
    padding-top: 8px;
font-size: 10px;
    border-top: 1px solid var(--line);
}

@media (max-width: 620px) {
    .server-review-section .review-list > .review {
        padding: 10px;
    }

    .server-review-section .review-list > .review .review-meta {
        align-items: stretch;
        flex-direction: column;
    }

    .server-review-section .rms-review-overall {
        justify-items: start;
        width: 100%;
        min-width: 0;
    }

    .server-review-section .rms-review-detail-row {
        grid-template-columns: minmax(78px, .9fr) minmax(60px, 1fr) 36px;
    }
}


/* Single dark/red theme: simple centered footer. */
.site-footer {
    color: #8f7d7f;
    background: #080506;
    border-top: 1px solid var(--line);
}
.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 0;
    text-align: center;
}
.site-footer-inner small {
    color: inherit;
    font-size: 10px;
}

/* ========================================================================== 
   Public Rules / Review Guidelines
   ========================================================================== */
.policy-workspace,
.guidelines-workspace {
    min-width: 0;
}

.policy-workspace {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.policy-page-header {
    align-items: center;
}

.policy-notice {
    display: grid;
    gap: 4px;
    margin: 18px 28px 0;
    padding: 14px 16px;
    border: 1px solid rgba(210, 48, 55, .28);
    border-left: 3px solid var(--accent, #c92c35);
    border-radius: var(--radius-sm);
    background: rgba(145, 18, 28, .08);
}

.policy-notice strong {
    color: var(--text);
    font-size: 12px;
}

.policy-notice span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.policy-slide {
    align-items: stretch;
}

.policy-role-intro {
    align-self: stretch;
}

.policy-content-panel {
    display: block;
}

.policy-section-heading {
    margin-bottom: 18px;
}

.policy-section-heading h2 {
    margin: 4px 0 6px;
    font-size: 21px;
}

.policy-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.policy-rule-list {
    display: grid;
    gap: 9px;
}

.policy-rule-list article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

.policy-rule-list article > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(207, 55, 62, .32);
    border-radius: 50%;
    background: rgba(160, 24, 32, .11);
    color: var(--accent, #d33a42);
    font-size: 10px;
    letter-spacing: .04em;
}

.policy-rule-list h3 {
    margin: 0 0 4px;
    font-size: 13px;
}

.policy-rule-list p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.58;
}

.policy-enforcement-box {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(207, 55, 62, .34);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(135deg, rgba(145, 18, 28, .10), transparent 60%),
        var(--panel-soft);
}

.policy-enforcement-box h3 {
    margin: 0 0 6px;
    font-size: 14px;
}

.policy-enforcement-box p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.register-rules-consent {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
    cursor: pointer;
}

.register-rules-consent input {
    width: 15px;
    height: 15px;
    margin: 1px 0 0;
    accent-color: var(--accent, #c92c35);
}

.register-rules-consent span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.48;
}

.register-rules-consent a {
    color: var(--accent-bright, #ef5359);
    font-weight: 700;
}

.guidelines-workspace {
    display: grid;
    gap: 16px;
}

.guidelines-workspace > .register-page-header,
.guideline-hero,
.guideline-section,
.guideline-final-box {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.guideline-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 22px;
    align-items: center;
    padding: 24px 26px;
}

.guideline-hero h2 {
    margin: 5px 0 7px;
    font-size: 22px;
}

.guideline-hero p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.guideline-score-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

.guideline-score-scale span {
    display: grid;
    gap: 3px;
    justify-items: center;
    padding: 12px 6px;
    border-right: 1px solid var(--line);
}

.guideline-score-scale span:last-child {
    border-right: 0;
}

.guideline-score-scale b {
    color: var(--text);
    font-size: 13px;
}

.guideline-score-scale small {
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}

.guideline-section {
    padding: 24px 26px;
}

.guideline-section-head {
    margin-bottom: 17px;
}

.guideline-section-head h2 {
    margin: 4px 0 5px;
    font-size: 20px;
}

.guideline-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.rating-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.rating-guide-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

.rating-guide-card-wide {
    grid-column: 1 / -1;
}

.rating-guide-card-head {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 7px;
}

.rating-guide-card-head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid rgba(207, 55, 62, .32);
    border-radius: 50%;
    color: var(--accent-bright, #ef5359);
    font-size: 9px;
    font-weight: 800;
}

.rating-guide-card h3 {
    margin: 0;
    font-size: 15px;
}

.rating-guide-card > p {
    margin: 0 0 13px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.rating-guide-card dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.rating-guide-card dl > div {
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.rating-guide-card dt {
    margin-bottom: 3px;
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
}

.rating-guide-card dd {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.55;
}

.guideline-do-dont-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.guideline-list-card {
    padding: 17px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

.guideline-list-card h3 {
    margin: 0 0 10px;
    font-size: 14px;
}

.guideline-list-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.guideline-list-card-warning {
    border-color: rgba(207, 55, 62, .28);
}

.guideline-example-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.guideline-example-grid article {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

.guideline-example-grid strong {
    display: block;
    margin-bottom: 5px;
    color: var(--accent-bright, #ef5359);
    font-size: 13px;
}

.guideline-example-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

.guideline-final-box {
    margin-top: 0;
    padding: 20px 22px;
}

.guideline-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 980px) {
    .guideline-hero,
    .rating-guide-grid,
    .guideline-do-dont-grid {
        grid-template-columns: 1fr;
    }

    .rating-guide-card-wide {
        grid-column: auto;
    }

    .guideline-example-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .policy-notice {
        margin: 14px 18px 0;
    }

    .policy-rule-list article {
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 12px;
    }

    .policy-rule-list article > b {
        width: 27px;
        height: 27px;
    }

    .guideline-hero,
    .guideline-section,
    .guideline-final-box {
        padding: 18px;
    }

    .guideline-score-scale {
        grid-template-columns: 1fr;
    }

    .guideline-score-scale span {
        grid-template-columns: 60px 1fr;
        justify-items: start;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        text-align: left;
    }

    .guideline-score-scale span:last-child {
        border-bottom: 0;
    }

    .guideline-example-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
 * ADMIN PORTAL — unified administrator shell
 * Dedicated chrome, navigation, login and page-level consistency.
 * ================================================================ */
body.admin-portal {
    background:
        radial-gradient(circle at 18% -20%, rgba(213,43,50,.10), transparent 34%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0, rgba(255,255,255,.010) 1px, transparent 1px, transparent 3px),
        #090708;
}

.admin-site-header {
    position: relative;
    z-index: 10;
    min-height: 72px;
    background: linear-gradient(180deg, #22090b 0%, #100708 100%);
    border-bottom: 1px solid #4c2024;
    box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.admin-site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(213,43,50,.75), rgba(212,181,93,.35), transparent);
    pointer-events: none;
}
.admin-site-header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.admin-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-strong);
    text-decoration: none;
}
.admin-brand:hover { color: var(--text-strong); text-decoration: none; }
.admin-brand img {
    width: auto;
    height: 42px;
    max-width: 190px;
    object-fit: contain;
}
.admin-brand span { min-width: 0; display: grid; gap: 2px; }
.admin-brand strong { font: 700 15px/1.15 Arial, sans-serif; letter-spacing: .01em; }
.admin-brand small { color: var(--muted); font-size: 9px; }
.admin-header-actions { display: flex; align-items: center; gap: 10px; }
.admin-view-site {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--line-light);
    border-radius: var(--radius-sm);
}
.admin-view-site:hover { color: var(--text-strong); text-decoration: none; border-color: var(--accent); background: rgba(213,43,50,.08); }
.admin-header-identity {
    min-width: 145px;
    display: grid;
    gap: 1px;
    padding-left: 11px;
    border-left: 1px solid var(--line);
}
.admin-header-identity strong { font-size: 10px; }
.admin-header-identity small { color: var(--muted); font-size: 9px; }
.admin-header-identity-guest strong { color: var(--gold); }

.admin-site-main { padding-top: 14px; padding-bottom: 24px; }
.admin-site-main > .flash { margin-bottom: 10px; }

/* Main shell */
.admin-portal .admin-layout {
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.admin-portal .admin-sidebar {
    top: 14px;
    background: #130e0f;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised);
}
.admin-sidebar-head {
    padding: 12px 12px 11px;
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
    border-bottom: 1px solid var(--line);
}
.admin-sidebar-head .eyebrow { margin-bottom: 2px; }
.admin-sidebar-head strong { display: block; font: 700 14px/1.2 Arial, sans-serif; }
.admin-sidebar-nav { display: block; padding: 6px 0; }
.admin-sidebar .admin-sidebar-nav .admin-nav-group {
    display: block;
    padding: 10px 12px 4px;
    color: #806e70;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
}
.admin-sidebar .admin-sidebar-nav a {
    position: relative;
    min-height: 31px;
    display: flex;
    align-items: center;
    padding: 6px 12px 6px 15px;
    color: #c8bbbc;
    font-size: 10px;
    border: 0;
    border-left: 2px solid transparent;
}
.admin-sidebar .admin-sidebar-nav a:hover {
    color: var(--text-strong);
    text-decoration: none;
    background: #1c1314;
}
.admin-sidebar .admin-sidebar-nav a.active {
    color: #fff7f7;
    font-weight: 700;
    background: linear-gradient(90deg, rgba(213,43,50,.18), rgba(213,43,50,.04));
    border-left-color: var(--accent);
    padding-left: 15px;
}
.admin-sidebar .admin-sidebar-nav a.active::after {
    content: "";
    position: absolute;
    right: 10px;
    width: 5px;
    height: 5px;
    background: var(--accent-strong);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255,89,96,.45);
}
.admin-sidebar-footer { padding: 8px; border-top: 1px solid var(--line); background: #100b0c; }
.admin-sidebar-footer form { padding: 0; }
.admin-sidebar-footer .admin-logout { min-height: 31px; }

/* Every admin content page follows one spacing / heading language. */
.admin-content { min-width: 0; }
.admin-content > * + * { margin-top: 12px; }
.admin-content > .page-hero,
.admin-content > .content-hero,
.admin-content > .page-hero-compact {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #241718 0%, #171112 70%);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}
.admin-content > .page-hero::before,
.admin-content > .content-hero::before { opacity: .45; }
.admin-content > .page-hero h1,
.admin-content > .content-hero h1,
.admin-content > .page-hero-compact h1 {
    margin: 0 0 4px;
    font-size: 21px;
}
.admin-content > .page-hero p,
.admin-content > .content-hero p,
.admin-content > .page-hero-compact p { max-width: 760px; margin: 0; color: var(--muted); }
.admin-content > .page-hero .form-actions,
.admin-content > .content-hero .form-actions { justify-content: flex-end; }

.admin-content > .panel,
.admin-content .panel {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}
.admin-content .panel > h2:first-child,
.admin-content .panel > h3:first-child {
    margin: -1px -1px 11px;
    padding: 9px 11px;
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.admin-content .panel-heading,
.admin-content .section-heading,
.admin-content .admin-panel-heading,
.admin-content .panel-toolbar {
    margin: -1px -1px 10px;
    padding: 9px 11px;
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.admin-content .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-content .section-heading h2,
.admin-content .panel-heading h2,
.admin-content .panel-toolbar h2 { margin: 0; }

.admin-content .filter-bar,
.admin-content .admin-server-filters,
.admin-content .admin-filter-form,
.admin-content .admin-tool-form {
    padding: 10px;
    background: #120d0e;
    border-color: #3d2426;
    border-radius: var(--radius-sm);
}
.admin-content .filter-bar label { margin-bottom: 0; }
.admin-content .data-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.admin-content .data-panel .data-table { margin: 0; }
.admin-content .data-table thead th {
    background: #211617;
    border-bottom-color: #4b2a2d;
}
.admin-content .data-table tbody tr:hover { background: rgba(213,43,50,.035); }

.admin-content .metric-card,
.admin-content .nav-card,
.admin-content .check-card,
.admin-content .security-check {
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}
.admin-content .metric-card b,
.admin-content .metric-card strong { color: var(--text-strong); }
.admin-content .admin-state,
.admin-content .vote-decision,
.admin-content .operation-status { white-space: nowrap; }

/* Dashboard module hierarchy */
.admin-portal .admin-attention-strip { border-radius: var(--radius-md); background: #151010; }
.admin-portal .nav-card {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px;
    background: linear-gradient(145deg, #181112, #120d0e);
}
.admin-portal .nav-card:hover {
    transform: translateY(-1px);
    border-color: #5f3336;
    background: linear-gradient(145deg, #211617, #151011);
}
.admin-portal .admin-dashboard-metrics .metric-card { min-height: 68px; }

/* Dedicated administrator sign-in */
.admin-login-layout { display: block; }
.admin-login-content { width: 100%; }
.admin-login-shell {
    width: min(900px, 100%);
    min-height: 510px;
    margin: 26px auto 36px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    overflow: hidden;
    background: #100b0c;
    border: 1px solid #452326;
    border-radius: 6px;
    box-shadow: 0 18px 50px rgba(0,0,0,.38);
}
.admin-login-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(213,43,50,.16), transparent 38%),
        linear-gradient(145deg, #231315, #120c0d 68%);
    border-right: 1px solid var(--line);
}
.admin-login-intro::after {
    content: "HBTOP50";
    position: absolute;
    right: -18px;
    bottom: -24px;
    color: rgba(255,255,255,.018);
    font: 900 72px/1 Arial, sans-serif;
    letter-spacing: -.05em;
    pointer-events: none;
}
.admin-login-intro h1 { max-width: 470px; margin: 0 0 12px; font-size: 29px; line-height: 1.08; }
.admin-login-intro > p { max-width: 500px; margin-bottom: 22px; color: #ad999b; }
.admin-login-points { display: grid; gap: 7px; }
.admin-login-points span {
    position: relative;
    padding-left: 16px;
    color: #c7b9ba;
    font-size: 10px;
}
.admin-login-points span::before {
    content: "";
    position: absolute;
    left: 1px;
    top: .55em;
    width: 5px;
    height: 5px;
    background: var(--accent);
    transform: rotate(45deg);
}
.admin-login-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px;
    background: #151011;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.admin-login-card-head { margin-bottom: 17px; }
.admin-login-card-head h2 { margin-bottom: 5px; font-size: 20px; }
.admin-login-card-head p { margin: 0; }
.admin-login-form { display: grid; gap: 12px; }
.admin-login-form label { margin: 0; }
.admin-login-form input { min-height: 38px; }
.admin-login-submit { width: 100%; min-height: 38px; margin-top: 2px; justify-content: center; }
.admin-login-footnote {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding-top: 13px;
    color: var(--muted);
    font-size: 9px;
    border-top: 1px solid var(--line);
}
.admin-login-footnote > span:first-child { color: var(--green); font-size: 7px; }

/* First admin setup inherits the same dedicated portal context. */
.admin-portal .admin-login-content > .narrow-card {
    width: min(540px, 100%);
    margin: 28px auto 40px;
    padding: 22px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised);
}

@media (max-width: 980px) {
    .admin-portal .admin-layout { grid-template-columns: 190px minmax(0,1fr); }
    .admin-login-shell { grid-template-columns: 1fr 360px; }
    .admin-login-intro { padding: 30px; }
}

@media (max-width: 820px) {
    .admin-site-header-inner { min-height: 64px; }
    .admin-site-header { min-height: 64px; }
    .admin-brand img { height: 35px; }
    .admin-brand small, .admin-header-identity { display: none; }
    .admin-portal .admin-layout { grid-template-columns: 1fr; }
    .admin-portal .admin-sidebar { position: static; }
    .admin-sidebar-head { display: none; }
    .admin-sidebar-nav {
        display: flex;
        gap: 0;
        overflow-x: auto;
        padding: 0;
        border-bottom: 1px solid var(--line);
    }
    .admin-sidebar .admin-sidebar-nav .admin-nav-group { display: none; }
    .admin-sidebar .admin-sidebar-nav a {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 7px 10px;
        border-left: 0;
        border-right: 1px solid var(--line);
    }
    .admin-sidebar .admin-sidebar-nav a.active { padding-left: 10px; border-bottom: 2px solid var(--accent); }
    .admin-sidebar .admin-sidebar-nav a.active::after { display: none; }
    .admin-sidebar-footer { display: none; }
    .admin-login-shell { grid-template-columns: 1fr; min-height: 0; }
    .admin-login-intro { padding: 28px; border-right: 0; border-bottom: 1px solid var(--line); }
    .admin-login-intro h1 { font-size: 24px; }
    .admin-login-card { padding: 28px; }
}

@media (max-width: 620px) {
    .admin-site-header-inner { gap: 10px; }
    .admin-brand span { display: none; }
    .admin-view-site { font-size: 9px; padding-inline: 8px; }
    .admin-site-main { padding-top: 10px; }
    .admin-content > .page-hero,
    .admin-content > .content-hero,
    .admin-content > .page-hero-compact { align-items: flex-start; flex-direction: column; min-height: 0; padding: 12px; }
    .admin-content > .page-hero .action-group,
    .admin-content > .content-hero .action-group { justify-content: flex-start; width: 100%; }
    .admin-login-shell { margin: 12px auto 24px; }
    .admin-login-intro, .admin-login-card { padding: 20px; }
    .admin-login-intro h1 { font-size: 21px; }
    .admin-login-points { grid-template-columns: 1fr; }
}

/* Phase 32: per-server VIP Membership */
.rank-row-vip {
    background: linear-gradient(100deg, rgba(82, 61, 18, .46), rgba(35, 27, 14, .94) 48%, rgba(25, 20, 15, .98));
    border-top: 1px solid rgba(214, 166, 55, .48);
    border-bottom-color: rgba(214, 166, 55, .34);
    box-shadow: inset 3px 0 rgba(235, 188, 72, .95), inset 0 0 32px rgba(186, 128, 24, .08);
}
.rank-row-vip:hover { background: linear-gradient(100deg, rgba(99, 74, 21, .55), rgba(43, 32, 15, .96) 52%, rgba(29, 22, 15, .99)); }
.rank-row-vip .rank-title-row h2 a { color: #f1ca67; text-shadow: 0 1px 0 #000, 0 0 12px rgba(218, 166, 47, .18); }
.rank-row-vip .rank-title-row h2 a:hover { color: #ffe6a2; }
.badge-vip { color: #ffe5a0 !important; border-color: rgba(231, 183, 64, .55) !important; background: rgba(122, 83, 14, .34) !important; }
.vip-tool-link { border-color: rgba(214, 166, 55, .5) !important; color: #e9c76d !important; }
.server-vip-badge { display: inline-flex; margin-top: 5px; }
.vip-status-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px; }
.vip-status-card.is-active { border-color: rgba(214,166,55,.5); background: linear-gradient(110deg,rgba(94,68,18,.33),var(--panel)); }
.vip-status-mark { flex:0 0 auto; font-weight:800; letter-spacing:.08em; padding:12px 16px; border:1px solid var(--line); background:var(--panel-2); }
.vip-status-card.is-active .vip-status-mark { color:#f2cf76; border-color:rgba(214,166,55,.52); background:rgba(102,71,13,.28); }
.vip-benefit-grid,.vip-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:12px 0; }
.vip-benefit-grid .panel { margin:0; padding:16px; }
.vip-benefit-grid strong { display:block; margin-bottom:6px; color:var(--text-strong); }
.vip-plan-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.vip-plan-card { border:1px solid var(--line); background:var(--panel-2); padding:16px; display:flex; flex-direction:column; gap:7px; }
.vip-plan-card > span { color:var(--muted); font-size:12px; }
.vip-plan-card > strong { font-size:18px; color:var(--text-strong); }
.vip-plan-card > b { color:#e7c56d; font-size:16px; margin-bottom:6px; }
.vip-plan-card form,.vip-plan-card .btn { width:100%; }
.vip-plans-panel { margin-top:12px; }
@media (max-width:900px) { .vip-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.vip-benefit-grid{grid-template-columns:1fr;} }
@media (max-width:560px) { .vip-plan-grid{grid-template-columns:1fr;}.vip-status-card{align-items:flex-start;flex-direction:column;} }
.admin-grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.admin-form { display:grid; gap:10px; }
.admin-form label { display:grid; gap:5px; }
.admin-summary-list { margin:0; display:grid; gap:8px; }
.admin-summary-list > div { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); }
.admin-summary-list > div:last-child { border-bottom:0; }
.admin-summary-list dt { color:var(--muted); }
.admin-summary-list dd { margin:0; font-weight:700; }
@media (max-width:800px) { .admin-grid-two{grid-template-columns:1fr;} }