/* Generated by scripts/build_official_styles.py; edit the source stylesheets. */

/* Source: style.css */
/* Mature B2B Workbench Theme */

:root {
    /* Color Palette - Premium Light */
    --primary-color: #2457a6;
    --primary-hover: #1c478b;
    --secondary-color: #64748b;
    --success-color: #14805e;
    --warning-color: #b7791f;
    --danger-color: #c24141;

    /* Backgrounds */
    --bg-body: #f5f7fa;
    --bg-surface: #ffffff;
    --bg-sidebar: #ffffff;

    /* Text */
    --text-main: #172033;
    --text-secondary: #526074;
    --text-light: #8a95a6;

    /* Borders */
    --border-color: #dce3ec;
    --border-glow: rgba(36, 87, 166, 0.18);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 24px rgba(23, 32, 51, 0.07);
    --shadow-lg: 0 24px 60px rgba(23, 32, 51, 0.12);
    --shadow-glow: 0 0 0 3px var(--border-glow);

    /* Workbench Design Tokens */
    --wb-bg: #f5f7fa;
    --wb-panel: #ffffff;
    --wb-panel-soft: #f9fbfd;
    --wb-ink: #172033;
    --wb-muted: #526074;
    --wb-faint: #8a95a6;
    --wb-line: #dce3ec;
    --wb-line-strong: #c9d4e2;
    --wb-brand: #2457a6;
    --wb-brand-soft: #eaf1fb;
    --wb-green: #14805e;
    --wb-green-soft: #e8f6f0;
    --wb-amber: #b7791f;
    --wb-amber-soft: #fff6df;
    --wb-red: #c24141;
    --wb-red-soft: #fdecec;
    --wb-radius-sm: 8px;
    --wb-radius-md: 12px;
    --wb-radius-lg: 16px;
    --wb-radius-xl: 20px;
    --wb-shadow: 0 18px 44px rgba(23, 32, 51, 0.08);
    --wb-shadow-soft: 0 10px 28px rgba(23, 32, 51, 0.06);

    /* Spacing */
    --header-height: 64px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 84px;

    /* Internal application typography */
    --internal-ui-font-size-base: 17px;
    --internal-ui-font-size-control: 15px;
    --internal-ui-font-size-compact: 14px;
    --internal-ui-font-size-caption: 12px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI Variable", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    background-color: var(--bg-body);

    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --- Layout --- */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Public Layout (No Sidebar) */
body.public-mode .sidebar {
    display: none;
}

body.public-mode .main-content {
    margin-left: 0;
    width: 100%;
}

body.public-mode .top-nav {
    left: 0;
    width: 100%;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid var(--border-color);
    position: fixed;
    height: 100vh;
    padding: 1.25rem 1.5rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
    transition: all 0.3s ease;
}

body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
    padding: 1.5rem 0.75rem;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.25rem;
    min-height: 44px;
}

.logo-public {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.brand-logo-full {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

body.sidebar-collapsed .logo {
    justify-content: center;
    margin-bottom: 2rem;
}

body.sidebar-collapsed .brand-logo-full {
    width: 48px;
}

.nav-menu {
    list-style: none;
    padding-bottom: 1rem;
}

.nav-item {
    margin-bottom: 0.35rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-link span {
    white-space: nowrap;
}

body.sidebar-collapsed .nav-link {
    justify-content: center;
    gap: 0;
    padding: 0.8rem 0.75rem;
}

body.sidebar-collapsed .nav-link span {
    display: none;
}

.nav-link:hover {
    background: #f1f5f9;

}

.nav-link.active {
    background: #e0e7ff;
    color: var(--primary-color);
}

.nav-link i {
    width: 20px;
    text-align: center;
}

body.sidebar-collapsed .nav-link i {
    width: auto;
    font-size: 1.1rem;
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 2rem;
    padding-top: calc(var(--header-height) + 2rem);
    transition: margin 0.3s ease;
}

body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* Top Nav */
.top-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--sidebar-width);
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 2rem;
    z-index: 40;
    transition: left 0.3s ease;
}

body.sidebar-collapsed .top-nav {
    left: var(--sidebar-collapsed-width);
}

.page-title {
    font-size: 1.125rem;
    font-weight: 600;

}

#desktopSidebarToggle {
    margin-right: 12px;
    padding: 0.5rem 0.7rem;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 auto;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 0.875rem;
    gap: 8px;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 1px 2px 0 rgba(36, 87, 166, 0.24);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(36, 87, 166, 0.28);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    background: var(--wb-brand-soft);
    color: var(--primary-color);
}

.btn-text {
    background: transparent;
    color: var(--text-secondary);
}

.btn-text:hover {
    background: rgba(82, 96, 116, 0.08);
}

.btn-sm {
    min-height: 34px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.68;
    transform: none;
}

/* Cards & Surface */
.card {
    background: var(--bg-surface);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 1.5rem;
}


.card:hover {
    box-shadow: var(--shadow-glow);
    border-color: rgba(36, 87, 166, 0.28);
}

.workbench-panel.card:hover {
    box-shadow: var(--wb-shadow-soft);
    border-color: var(--wb-line);
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Workbench */
.workbench-page {
    display: grid;
    gap: 16px;
}

.workbench-panel {
    border: 1px solid var(--wb-line);
    border-radius: var(--wb-radius-xl);
    background: var(--wb-panel);
    box-shadow: var(--wb-shadow-soft);
}

.workbench-panel-head h3 {
    margin: 0;
    color: var(--wb-ink);
}

.workbench-eyebrow {
    margin: 0 0 7px;
    color: var(--wb-brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.state-chip {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--wb-line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--wb-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.state-chip.is-current {
    border-color: rgba(36, 87, 166, 0.24);
    background: var(--wb-brand-soft);
    color: var(--wb-brand);
}

.workbench-plan-empty {
    background:
        linear-gradient(135deg, rgba(36, 87, 166, 0.08), transparent 52%),
        #ffffff;
}

.workbench-grid {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    height: auto;
    min-height: 0;
    overflow: visible;
}

#page-workbench .workbench-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    height: calc(100vh - var(--header-height) - 4rem);
    min-height: 520px;
    overflow: hidden;
}

#page-workbench[data-workbench-view="input"] .workbench-results,
#page-workbench[data-workbench-view="results"] .workbench-profile-panel {
    display: none;
}

#page-workbench .workbench-profile-panel,
#page-workbench .workbench-results {
    height: 100%;
}

#page-workbench .result-col {
    height: 100%;
}

#page-workbench #resultsTiered {
    overflow-y: auto;
}

#page-profile .workbench-grid {
    align-items: stretch;
    height: calc(100vh - var(--header-height) - 4rem);
    min-height: 520px;
    overflow: hidden;
}

#page-profile .input-panel {
    display: grid;
    gap: 30px;
    align-content: start;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

#page-profile .results-container {
    display: flex;
    min-height: 0;
    height: 100% !important;
    overflow: hidden !important;
}

#page-profile .results-container > .card {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#page-profile .profile-report-card-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
}

#page-profile .profile-report-card-header .card-title {
    margin: 0;
}

#page-profile .profile-report-filter-bar {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
}

#page-profile .profile-report-search-control {
    position: relative;
    display: block;
    min-width: 0;
}

#page-profile .profile-report-search-control > i {
    position: absolute;
    top: 50%;
    left: 11px;
    z-index: 1;
    color: var(--text-light);
    transform: translateY(-50%);
    pointer-events: none;
}

#page-profile .profile-report-search-control .form-control {
    height: 34px;
    padding: 5px 10px 5px 34px;
}

#page-profile .profile-report-date-controls {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#page-profile .profile-report-date-input {
    width: 116px;
    height: 34px;
    padding: 5px 7px;
}

#page-profile .profile-report-date-separator {
    color: var(--text-light);
}

#page-profile .profile-report-filter-button {
    min-width: 76px;
    height: 34px;
    justify-content: center;
}

@media (max-width: 1180px) {
    #page-profile .profile-report-filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    #page-profile .profile-report-date-controls {
        justify-content: flex-start;
    }
}

#page-profile #reports-list {
    flex: 1;
    min-height: 0;
    max-height: none !important;
    overflow: hidden;
}

#page-profile .profile-report-list {
    display: grid;
    align-content: start;
    gap: 8px;
    padding-right: 0;
}

#page-profile .profile-report-item {
    margin-bottom: 0;
    padding: 12px 14px;
    border-radius: 8px;
}

#page-profile .profile-report-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

#page-profile .profile-report-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#page-profile .profile-report-date {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

#page-profile .profile-report-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

#page-profile .profile-report-actions .btn {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 12px;
}

#page-profile .profile-report-pagination {
    min-height: 44px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--wb-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

#page-profile .profile-report-page-info {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

#page-profile .profile-report-page-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#page-profile .profile-report-page-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

#page-profile .profile-report-page-input {
    width: 58px;
    height: 32px;
    border: 1px solid var(--wb-line);
    border-radius: 8px;
    padding: 0 8px;
    color: #0f172a;
    font-size: 12px;
}

#page-profile .profile-report-page-actions .btn {
    min-height: 32px;
    padding-inline: 10px;
}

.workbench-profile-panel,
.workbench-results {
    height: 100%;
    min-height: 0;
}

.workbench-profile-panel {
    padding: 18px;
    overflow-y: auto;
    margin-bottom: 0;
}

.workbench-profile-panel::-webkit-scrollbar,
#resultsTiered::-webkit-scrollbar {
    width: 7px;
}

.workbench-profile-panel::-webkit-scrollbar-thumb,
#resultsTiered::-webkit-scrollbar-thumb {
    background: #ccd6e3;
    border-radius: 999px;
}

.workbench-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.workbench-panel-head {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--wb-line);
}

.workbench-mode-toolbar {
    align-items: center;
    justify-content: stretch;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.workbench-toolbar-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    gap: 16px;
}

.workbench-toolbar-controls .workbench-degree-segment,
.workbench-toolbar-controls .workbench-mode-segment {
    justify-self: center;
}

.workbench-mode-toolbar .workbench-segment {
    gap: 8px;
    padding: 5px;
    border-radius: 12px;
}

.workbench-mode-toolbar .workbench-segment .btn {
    min-height: 40px;
    padding-inline: 18px;
    border-radius: 8px;
    font-size: 14px;
}

.workbench-mode-toolbar .workbench-degree-segment .btn {
    min-width: 78px;
}

.workbench-mode-toolbar .workbench-mode-segment .btn {
    min-width: 92px;
}

.workbench-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.workbench-results-back-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.match-school-list-back {
    border: 1px solid var(--wb-green);
    background: var(--wb-green-soft);
    color: var(--wb-green);
    box-shadow: 0 1px 2px rgba(20, 128, 94, 0.12);
}

.match-school-list-back:hover {
    background: var(--wb-green);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(20, 128, 94, 0.2);
}

.match-school-list-back[hidden] {
    display: none;
}

.workbench-segment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--wb-line);
    border-radius: 999px;
    background: var(--wb-panel-soft);
}

.workbench-segment.is-full {
    width: 100%;
}

.workbench-segment.is-full .btn {
    flex: 1;
}

.workbench-segment .btn {
    min-height: 32px;
    border-radius: 999px;
    box-shadow: none;
}

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

#mode-std-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "options background"
        "language background"
        "actions actions";
    gap: 14px;
    align-items: start;
}

#mode-std-options {
    grid-area: options;
}

#fields-undergrad,
#fields-postgrad {
    grid-area: background;
}

.workbench-language-section {
    grid-area: language;
}

#mode-std-fields > .workbench-submit-block {
    grid-area: actions;
    grid-column: 1 / -1;
}

.workbench-profile-form .form-group {
    margin-bottom: 0;
}

.workbench-major-selector {
    position: relative;
    display: grid;
    gap: 8px;
}

.workbench-major-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    text-align: left;
    color: var(--wb-ink);
    cursor: pointer;
}

.workbench-major-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workbench-major-trigger i {
    flex-shrink: 0;
    color: var(--wb-muted);
    font-size: 18px;
    transition: transform 0.18s ease;
}

.workbench-major-selector.is-open .workbench-major-trigger {
    border-color: var(--wb-brand);
    box-shadow: 0 0 0 3px rgba(36, 87, 166, 0.12);
}

.workbench-major-selector.is-open .workbench-major-trigger i {
    transform: rotate(180deg);
}

.workbench-major-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    width: min(720px, calc(100vw - 72px));
    height: min(520px, calc(100vh - 330px));
    min-height: min(360px, calc(100vh - 330px));
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 1px solid var(--wb-line);
    border-radius: 12px;
    background: var(--wb-panel);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
}

.workbench-major-menu[hidden] {
    display: none;
}

.workbench-major-mobile-titlebar {
    display: none;
}

.workbench-major-menu-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--wb-line);
}

.workbench-major-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.workbench-major-search-wrap > i {
    position: absolute;
    left: 12px;
    color: var(--wb-muted);
}

.workbench-major-search {
    width: 100%;
    padding-left: 36px;
}

.workbench-major-all-option {
    margin: 0;
    border: 1px solid rgba(36, 87, 166, 0.22);
    background: var(--wb-brand-soft);
    color: var(--wb-brand);
    font-weight: 700;
    white-space: nowrap;
}

.workbench-major-browser {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    min-height: 0;
    max-height: none;
}

.workbench-major-groups {
    overflow-y: auto;
    padding: 8px;
    border-right: 1px solid var(--wb-line);
    background: #f8fafc;
}

.workbench-major-group {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--wb-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.workbench-major-group span {
    min-width: 0;
}

.workbench-major-group small {
    color: #94a3b8;
    font-size: 10px;
}

.workbench-major-group:hover,
.workbench-major-group.is-active {
    border-left-color: var(--wb-brand);
    background: var(--wb-brand-soft);
    color: var(--wb-brand);
}

.workbench-major-options {
    display: grid;
    align-content: start;
    gap: 12px;
    overflow-y: auto;
    padding: 12px;
}

.workbench-major-option-group {
    display: grid;
    gap: 7px;
}

.workbench-major-option-group + .workbench-major-option-group {
    padding-top: 10px;
    border-top: 1px solid var(--wb-line);
}

.workbench-major-option-group-title {
    position: sticky;
    z-index: 1;
    top: 0;
    padding-bottom: 7px;
    background: var(--wb-panel);
    color: var(--wb-muted);
    font-size: 12px;
    font-weight: 800;
}

.workbench-major-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.workbench-major-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 8px;
    color: var(--wb-ink);
    font-size: 13px;
    line-height: 1.35;
    cursor: pointer;
}

.workbench-major-option:hover {
    background: var(--wb-panel-soft);
}

.workbench-major-option input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--wb-brand);
}

.workbench-major-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    max-height: 68px;
    overflow-y: auto;
}

.workbench-major-chips[hidden] {
    display: none;
}

.workbench-major-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 5px 4px 9px;
    border: 1px solid rgba(36, 87, 166, 0.22);
    border-radius: 999px;
    background: var(--wb-brand-soft);
    color: var(--wb-brand);
    font-size: 12px;
    font-weight: 700;
}

.workbench-major-chip.is-legacy {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}

.workbench-major-chip-remove {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.workbench-major-chip-remove:hover,
.workbench-major-chip-remove:focus-visible {
    background: rgba(36, 87, 166, 0.12);
    outline: none;
}

.workbench-major-empty {
    margin: 12px;
    color: var(--wb-muted);
    font-size: 12px;
}

.workbench-major-menu-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--wb-line);
    background: #ffffff;
}

.workbench-major-selection-summary {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--wb-ink);
    font-size: 12px;
}

.workbench-major-clear {
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--wb-brand);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.workbench-major-clear:disabled {
    color: #94a3b8;
    cursor: default;
}

.workbench-major-confirm {
    min-width: 88px;
    justify-content: center;
}

.workbench-major-selector + .form-hint {
    display: block;
    margin-top: 7px;
    color: var(--wb-muted);
    font-size: 11px;
    line-height: 1.5;
}

.workbench-form-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--wb-line);
    border-radius: var(--wb-radius-lg);
    background: var(--wb-panel-soft);
}

.workbench-section-title {
    color: var(--wb-ink);
    font-size: 13px;
    font-weight: 800;
}

.workbench-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.workbench-tier-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.workbench-tier-option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.workbench-tier-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.workbench-tier-option span {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 4px;
    border: 1px solid var(--wb-line);
    border-radius: 8px;
    background: #fff;
    color: var(--wb-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.workbench-tier-option:hover span {
    border-color: var(--wb-brand);
    color: var(--wb-brand);
}

.workbench-tier-option input:checked + span {
    border-color: var(--wb-brand);
    background: var(--wb-brand);
    color: #fff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18);
}

.workbench-tier-option input:focus-visible + span {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 2px;
}

.workbench-score-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
}

.workbench-score-or {
    display: flex;
    min-width: 20px;
    height: 40px;
    align-items: center;
    justify-content: center;
    align-self: end;
    color: var(--wb-muted);
    font-size: 13px;
    font-weight: 700;
}

.workbench-language-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.workbench-toefl-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(84px, 0.65fr);
    gap: 6px;
}

.conditional-fields,
#fields-postgrad,
#mode-smart-fields {
    display: none;
}

.workbench-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--wb-muted);
    font-size: 13px;
    cursor: pointer;
}

.workbench-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--wb-brand);
}

.workbench-submit-block,
.workbench-smart-panel {
    border-top: 1px solid var(--wb-line);
    padding-top: 14px;
}

.workbench-submit-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.workbench-submit-block p,
.workbench-note-row,
.workbench-form-footer {
    color: var(--wb-muted);
    font-size: 12px;
    line-height: 1.6;
}

.workbench-main-action,
.login-submit {
    width: 100%;
}

#page-workbench #btnMatchStandard {
    grid-column: 2;
    justify-self: center;
    width: auto;
    min-width: 190px;
    padding-inline: 22px;
}

.workbench-smart-panel {
    gap: 12px;
}

.workbench-ai-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.workbench-smart-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.workbench-smart-action-row .workbench-ai-actions {
    grid-column: 2;
    width: min(100%, 390px);
}

.workbench-submit-block .workbench-reset-action,
.workbench-smart-action-row .workbench-reset-action {
    grid-column: 1;
    justify-self: start;
    padding: 0;
    min-height: auto;
}

.workbench-note-row {
    display: grid;
    gap: 6px;
}

.workbench-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.workbench-form-footer .btn {
    padding: 0;
    min-height: auto;
}

.action-bar {
    display: grid;
    gap: 8px;
}

.workbench-results {
    padding: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workbench-results-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.match-shortlist-toggle {
    display: none;
}

.match-shortlist-toggle-count {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}

.workbench-results-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 14px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.workbench-results-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.workbench-secondary-filter {
    flex-shrink: 0;
    margin: 14px 0 12px;
}

.workbench-secondary-filter .form-control {
    min-height: 44px;
    border-radius: 12px;
    background: #ffffff;
}

.results-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.workbench-results-section {
    display: block;
    flex: 1;
    min-height: 0;
}

.result-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    min-height: 0;
}

#resultsTiered {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px;
}

.result-column-title {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--wb-line);
    border-radius: var(--wb-radius-md);
    background: var(--wb-panel-soft);
    color: var(--wb-ink);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 12px;
}

/* Forms */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    transition: all 0.2s;
    background: #fff;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(36, 87, 166, 0.14);
}

/* Tables */
.table-container {
    overflow-x: auto;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
}

.custom-table th {
    text-align: left;
    padding: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    background: rgba(36, 87, 166, 0.07);
}

.custom-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);

}

.custom-table tr:hover td {
    background: rgba(36, 87, 166, 0.08);
}

.project-admin-table {
    table-layout: fixed;
}

.project-admin-table th,
.project-admin-table td {
    padding: 0.8rem 1rem;
    vertical-align: middle;
}

.project-admin-table th:nth-child(1),
.project-admin-table td:nth-child(1) {
    width: 180px;
}

.project-admin-table th:nth-child(2),
.project-admin-table td:nth-child(2) {
    width: 92px;
    white-space: nowrap;
}

.project-admin-table th:nth-child(4),
.project-admin-table td:nth-child(4) {
    width: 96px;
    white-space: nowrap;
}

.project-admin-table th:nth-child(5),
.project-admin-table td:nth-child(5) {
    width: 96px;
    white-space: nowrap;
}

.project-admin-table th:nth-child(6),
.project-admin-table td:nth-child(6) {
    width: 148px;
}

.project-admin-table td:last-child {
    white-space: nowrap;
}

.project-admin-cell {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-admin-school,
.project-admin-name {
    color: var(--text-main);
}

.project-admin-school {
    font-weight: 600;
}

.project-admin-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.project-admin-actions .btn {
    padding: 0.35rem 0.55rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.project-admin-table td:last-child .btn {
    padding: 0.35rem 0.55rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.project-admin-table td:last-child .btn + .btn {
    margin-left: 0.25rem;
}

.project-admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    border-top: 1px solid var(--border-color);
}

.project-admin-pagination-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 720px) {
    .project-admin-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Tags */
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    word-break: keep-all;
    flex-shrink: 0;
}

.tag-primary {
    background: #e0e7ff;
    color: var(--primary-color);
}

.tag-success {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-color);
}

.tag-warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-color);
}

.tag-outline,
.tag-light {
    border: 1px solid var(--wb-line);
    background: #ffffff;
    color: var(--wb-muted);
}

.tag-light {
    background: var(--wb-panel-soft);
}

/* Result Items */
.result-item {
    background: #ffffff;
    padding: 16px;
    border: 1px solid var(--wb-line);
    border-radius: 14px;
    margin-bottom: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
    position: relative;
    overflow: hidden;
}

.result-item:hover {
    border-color: var(--primary-color);
    box-shadow: var(--wb-shadow-soft);
    transform: translateY(-1px);
}

.match-card-pro {
    padding-right: 16px;
}

.match-card-pro .tag {
    min-height: 22px;
}

.match-card-actions {
    margin-top: 12px;
}

.match-school-list {
    display: grid;
    gap: 12px;
}

.match-school-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.match-school-card {
    border: 1px solid var(--wb-line);
    border-radius: 14px;
    background: #ffffff;
    padding: 14px;
    box-shadow: 0 8px 20px rgba(23, 32, 51, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.match-school-card:hover {
    border-color: rgba(36, 87, 166, 0.32);
    box-shadow: var(--wb-shadow-soft);
}

.match-school-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.match-school-logo {
    flex: 0 0 52px;
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: #ffffff;
}

.match-school-logo img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.match-school-logo.is-compact-mark img {
    transform: scale(2.6);
    transform-origin: center;
}

.match-school-logo.is-placeholder {
    background: var(--wb-brand-soft);
    color: var(--wb-brand);
    font-size: 18px;
    font-weight: 900;
}

.match-school-title-block {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 8px;
}

.match-school-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.match-school-title-row h4 {
    margin: 0;
    color: var(--wb-ink);
    font-size: 1rem;
    line-height: 1.35;
}

.match-school-summary-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
    color: var(--wb-muted);
    font-size: 12px;
    line-height: 1.45;
}

.match-school-summary-row span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.match-school-summary-faculty {
    max-width: min(100%, 520px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-school-summary-faculty i {
    flex: 0 0 auto;
}

.match-school-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}

.match-school-programs {
    display: grid;
    gap: 12px;
}

.match-school-detail-view {
    min-width: 0;
    border: 1px solid rgba(36, 87, 166, 0.26);
    border-radius: 14px;
    background: #f8fbff;
    padding: 14px;
    box-shadow: 0 8px 20px rgba(23, 32, 51, 0.04);
}

.match-school-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    color: var(--wb-ink);
}

.match-school-detail-head h3 {
    margin: 0;
    font-size: 1.2rem;
}

.match-school-faculty-list {
    display: grid;
    gap: 10px;
}

.match-school-faculty-group {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    background: #f8fafc;
    padding: 10px;
    display: grid;
    gap: 10px;
}

.match-school-faculty-group.missing-faculty {
    border-style: dashed;
    background: #ffffff;
}

.match-school-faculty-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
}

.match-school-faculty-title {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wb-ink);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.match-school-faculty-title i {
    color: var(--wb-brand);
    flex: 0 0 auto;
}

.match-school-faculty-title span {
    overflow-wrap: anywhere;
}

.match-school-faculty-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--wb-muted);
    font-size: 11px;
    font-weight: 700;
}

.match-school-faculty-meta span {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: #ffffff;
    padding: 3px 7px;
    line-height: 1.2;
}

.match-school-program-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.match-school-program-option {
    position: relative;
    max-width: min(100%, 260px);
    flex: 1 1 180px;
    display: flex;
}

.match-school-program-chip {
    appearance: none;
    border: 1px solid var(--wb-line);
    background: var(--wb-panel-soft);
    color: var(--wb-ink);
    border-radius: 8px;
    padding: 8px 40px 8px 10px;
    min-height: 40px;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.match-school-program-option.active .match-school-program-chip,
.match-school-program-chip:hover {
    border-color: rgba(36, 87, 166, 0.4);
    background: #ffffff;
}

.match-school-program-option.active .match-school-program-chip {
    border-color: var(--wb-brand);
    background: var(--wb-brand-soft);
    box-shadow: 0 0 0 2px rgba(36, 87, 166, 0.14) inset;
}

.match-school-program-option.selected .match-school-program-chip {
    border-color: rgba(20, 128, 94, 0.55);
}

.match-school-program-info-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--wb-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.match-school-program-info-btn:hover {
    border-color: rgba(36, 87, 166, 0.42);
    background: #ffffff;
    color: var(--wb-brand);
}

.match-school-program-option.selected .match-school-program-info-btn {
    border-color: rgba(20, 128, 94, 0.42);
    background: rgba(240, 253, 244, 0.96);
    color: var(--success-color);
}

.match-school-program-chip > .match-school-program-name {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.match-school-program-status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    justify-self: end;
    max-width: 112px;
    overflow: hidden;
}

.match-school-program-status .tag {
    white-space: nowrap;
    max-width: 100%;
}

.match-school-program-reasons {
    grid-column: 1 / -1;
    display: grid;
    gap: 3px;
    padding-top: 2px;
    color: #9f1239;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.match-school-program-reasons > span {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
}

.match-school-program-reasons i {
    flex: 0 0 auto;
    margin-top: 1px;
}

.match-major-fit-badge {
    font-size: 10px;
    gap: 4px;
}

.match-school-program-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.match-school-program-tags em {
    font-style: normal;
    color: var(--wb-muted);
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 6px;
    padding: 2px 5px;
    font-size: 10px;
    line-height: 1.2;
}

.match-school-expand-programs {
    justify-self: start;
    border: 0;
    background: transparent;
    color: var(--wb-brand);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

.match-school-project-detail {
    border: 1px solid rgba(36, 87, 166, 0.16);
    border-radius: 12px;
    background: #f8fbff;
    padding: 13px;
}

.match-program-floating-panel {
    position: fixed;
    inset: 0;
    z-index: 1044;
    display: none;
    pointer-events: none;
}

.match-program-floating-panel.show {
    display: block;
}

.match-program-floating-window {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    transform: translate(-50%, -50%);
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(36, 87, 166, 0.18);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.match-program-floating-body {
    overflow-y: auto;
    padding: 14px;
}

.match-program-floating-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 14px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.match-program-floating-footer .btn {
    min-width: 96px;
    justify-content: center;
}

.match-program-floating-body .match-school-project-detail {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.match-school-project-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.match-school-project-title-block {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.match-school-project-primary-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.match-school-project-detail-action {
    min-width: 124px;
    min-height: 40px;
    padding-inline: 16px;
    justify-content: center;
}

.match-school-project-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.match-school-project-name {
    color: var(--wb-ink);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.match-school-project-faculty {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2457a6;
    background: #eef5ff;
    border: 1px solid rgba(36, 87, 166, 0.18);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.match-school-project-fit {
    margin-top: 10px;
    color: var(--wb-muted);
    font-size: 13px;
    line-height: 1.7;
}

.match-source-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: #ffffff;
}

.match-source-strip span,
.match-source-strip a {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.match-source-strip i {
    flex: 0 0 auto;
    color: var(--wb-brand);
    font-size: 14px;
}

.match-source-strip b {
    flex: 0 0 auto;
    color: var(--wb-muted);
    font-size: 11px;
    font-weight: 900;
}

.match-source-strip span span,
.match-source-strip a span {
    display: inline;
    color: var(--wb-ink);
    font-weight: 800;
}

.match-source-strip a:hover span {
    color: var(--wb-brand);
}

.match-decision-reasons {
    margin: 10px 0;
    display: grid;
    gap: 8px;
}

.match-decision-reasons.compact {
    margin: 10px 0 0;
}

.match-decision-reason-group {
    border: 1px solid rgba(234, 179, 8, 0.36);
    border-radius: 8px;
    background: #fffbeb;
    padding: 10px 12px;
}

.match-decision-reason-group.hard {
    border-color: rgba(239, 68, 68, 0.28);
    background: #fff5f5;
}

.match-decision-reason-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #92400e;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.match-decision-reason-group.hard .match-decision-reason-title {
    color: #b91c1c;
}

.match-decision-reason-group ul {
    margin: 6px 0 0;
    padding-left: 18px;
    color: #78350f;
    font-size: 12px;
    line-height: 1.65;
}

.match-decision-reason-group.hard ul {
    color: #991b1b;
}

.match-school-project-meta {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--wb-muted);
    font-size: 12px;
    line-height: 1.6;
}

.empty-state {
    min-height: 260px;
    padding: 32px 24px;
    border: 1px dashed var(--wb-line-strong);
    border-radius: var(--wb-radius-lg);
    background:
        linear-gradient(135deg, rgba(36, 87, 166, 0.04), transparent 60%),
        var(--wb-panel-soft);
    color: var(--wb-muted);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
}

.empty-state i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--wb-brand-soft);
    color: var(--wb-brand);
    font-size: 1.25rem;
}

.empty-state strong {
    color: var(--wb-ink);
    font-size: 1rem;
}

.empty-state span {
    max-width: 34rem;
    font-size: 13px;
    line-height: 1.7;
}

/* Match Score */
.match-score {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary-color);
    color: white;
    padding: 4px 10px;
    border-bottom-left-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.match-score.high {
    background: var(--success-color);
}

.match-score.med {
    background: var(--warning-color);
}

.match-score.low {
    background: var(--danger-color);
}

/* Scrollable Reports List */
#reports-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

#reports-list::-webkit-scrollbar {
    width: 6px;
}

#reports-list::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

/* Login Page */
.login-container {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background:
        radial-gradient(circle at 12% 18%, rgba(36, 87, 166, 0.08), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f6f8fb 48%, #eef3f8 100%);
    backdrop-filter: blur(8px);
}

.login-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(46vh, 420px);
    background:
        linear-gradient(to bottom, rgba(246, 248, 251, 0), rgba(246, 248, 251, 0.28) 42%, rgba(246, 248, 251, 0.72)),
        url("/static/brand/login-school-crest-layer.png") center bottom / cover no-repeat;
    opacity: 0.42;
    pointer-events: none;
    z-index: 0;
}

.login-layout {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    gap: clamp(48px, 8vw, 96px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.login-card {
    position: relative;
    background: #ffffff;
    padding: 42px;
    border: 1px solid #e4eaf2;
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(23, 32, 51, 0.10);
    width: 100%;
    text-align: left;
    justify-self: end;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
    backdrop-filter: blur(10px);
}

.login-showcase {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
    color: var(--wb-ink);
}

.login-brand-row {
    display: flex;
    align-items: center;
    gap: 22px;
}

.login-brand-logo {
    width: 188px;
    max-width: 44%;
    height: auto;
    object-fit: contain;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(203, 213, 225, 0.75);
    box-shadow: 0 22px 48px rgba(23, 32, 51, 0.08);
}

.login-product-name,
.login-product-sub {
    display: block;
}

.login-product-name {
    color: #0f172a;
    font-size: clamp(2.05rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0;
}

.login-product-sub {
    margin-top: 16px;
    color: #475569;
    font-size: 18px;
    line-height: 1.7;
}

.login-showcase-badge {
    display: none;
}

.login-showcase .hero-title {
    display: none;
}

.login-showcase .hero-subtitle {
    display: none;
}

.login-showcase-points {
    display: none;
}

.login-showcase-point {
    display: none;
}

.login-showcase-point strong {
    display: none;
}

.login-showcase-point span {
    display: none;
}

.login-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 1px solid #d9e2ec;
    border-radius: 999px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
}

.login-card-head {
    margin-bottom: 30px;
}

.login-eyebrow {
    margin: 0 0 6px;
    color: var(--wb-brand);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-card-head h2 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: 0;
}

.login-card-head p {
    margin: 8px 0 0;
    color: var(--wb-muted);
}

.login-form {
    display: grid;
    gap: 18px;
}

.input-with-leading-icon {
    position: relative;
}

.input-with-leading-icon i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wb-faint);
    pointer-events: none;
}

.input-with-leading-icon .form-control {
    min-height: 56px;
    padding-left: 40px;
    border-radius: 14px;
    background: #ffffff;
}

.input-with-leading-icon.has-trailing-action .form-control {
    padding-right: 48px;
}

.password-visibility-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--wb-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
    background: rgba(36, 87, 166, 0.08);
    color: var(--wb-brand);
}

.password-visibility-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(36, 87, 166, 0.18);
}

.input-with-leading-icon .password-visibility-toggle i {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    font-size: 18px;
    pointer-events: none;
}

.login-trust-device {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: #334155;
    cursor: pointer;
    user-select: none;
}

.login-trust-device input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--wb-brand);
}

.login-trust-device strong,
.login-trust-device small {
    display: block;
    letter-spacing: 0;
}

.login-trust-device strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.login-trust-device small {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.login-error {
    min-height: 18px;
    color: var(--wb-red);
    font-size: 13px;
    line-height: 1.5;
}

.wechat-login-panel {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #e2e8f0;
}

.wechat-login-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.wechat-login-box {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.wechat-qr-box {
    width: min(260px, 100%);
    min-height: 260px;
    display: grid;
    place-items: center;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}

.wechat-qr-box iframe {
    width: 100%;
    min-height: 260px;
    border: 0;
}

.wechat-profile-qr-box {
    width: 100%;
    min-height: 260px;
    margin: 12px 0;
}

.wechat-auth-status {
    min-height: 18px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.wechat-auth-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
}

.wechat-fallback-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: var(--wb-brand);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.login-helper-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.login-helper-card strong {
    color: #111827;
    font-weight: 700;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: var(--bg-surface);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.app-report-title-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.42);
}

.app-report-title-modal {
    width: min(520px, calc(100vw - 32px));
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.app-report-title-head,
.app-report-title-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.app-report-title-foot {
    justify-content: flex-end;
    border-top: 1px solid #e2e8f0;
    border-bottom: 0;
}

.app-report-title-heading {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.app-report-title-body {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.app-report-title-label {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.app-report-title-input {
    width: 100%;
    min-height: 42px;
}

.app-report-title-help {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

/* Landing / Public */
.public-nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-left: 56px;
    min-width: 0;
}

.public-nav-links a {
    position: relative;
    color: #172033;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

.public-nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -22px;
    height: 3px;
    background: #7f1738;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.public-nav-links a:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.system-product-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 16px;
}

.system-product-links a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid rgba(203, 213, 225, 0.86);
    border-radius: 6px;
    background: #ffffff;
    color: #526074;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.system-product-links a:hover {
    border-color: rgba(127, 23, 56, 0.34);
    color: #7f1738;
    background: rgba(127, 23, 56, 0.04);
}

.support-org-top-banner {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    min-width: 0;
    max-width: 360px;
}

.support-org-top-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #4338ca;
    color: #fff;
    font-size: 11px;
    flex: 0 0 auto;
}

.support-org-top-banner-label {
    min-width: 0;
    overflow: hidden;
    color: #475569;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-org-top-banner-action {
    min-height: auto;
    padding: 4px 6px;
    flex: 0 0 auto;
}

.support-org-top-banner-exit {
    color: #4338ca;
    font-weight: 700;
}

body.public-mode {
    background: #ffffff;
    color: #172033;
}

body.public-mode .top-nav {
    height: 72px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 0 rgba(127, 23, 56, 0.08);
}

body.public-mode .brand-logo-full {
    width: 138px;
    height: 54px;
    object-fit: contain;
}

body.public-mode .main-content {
    padding: 0;
    padding-top: 72px;
    background: #ffffff;
}

body.public-mode .page-view {
    display: none !important;
}

body.public-mode #publicAuth {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

body.public-mode #publicNavLinks {
    display: flex;
}

body:not(.public-mode) #publicHome,
body:not(.public-mode) #publicNavLinks {
    display: none !important;
}

.public-system-btn,
.public-login-btn {
    min-height: 42px;
    padding: 0.65rem 1.1rem;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.public-system-btn {
    background: #7f1738;
    border-color: #7f1738;
    color: #ffffff;
}

.public-system-btn:hover {
    background: #69112d;
    border-color: #69112d;
}

.public-login-btn {
    color: #7f1738;
    border-color: rgba(127, 23, 56, 0.38);
}

.login-submit {
    background: #7f1738;
    border-color: #7f1738;
}

.login-submit:hover {
    background: #69112d;
    border-color: #69112d;
}

.official-home {
    background: #ffffff;
    color: #172033;
    overflow: hidden;
}

.official-home a {
    color: inherit;
}

.official-home .btn,
body.public-mode .top-nav .btn {
    text-decoration: none;
}

.official-home .btn-primary,
body.public-mode .top-nav .btn-primary {
    color: #ffffff;
}

.official-hero {
    position: relative;
    min-height: calc(100vh - 72px);
    padding: 48px 48px 30px;
    display: flex;
    align-items: stretch;
    background:
        linear-gradient(180deg, rgba(255,255,255,0) 62%, #ffffff 100%),
        url("/static/brand/login-school-crest-layer.png") center bottom / cover no-repeat,
        #ffffff;
}

.official-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.9) 44%, rgba(255,255,255,0.68) 100%);
    pointer-events: none;
}

.official-hero-content {
    position: relative;
    z-index: 1;
    width: min(1480px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(620px, 1.1fr);
    gap: 54px;
    align-items: center;
}

.official-hero-copy {
    min-width: 0;
    padding-bottom: 42px;
}

.official-hero-title {
    margin: 0;
    color: #7f1738;
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
    font-size: 64px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0;
}

.official-hero-subtitle {
    margin: 22px 0 0;
    max-width: 760px;
    color: #293449;
    font-size: 21px;
    line-height: 1.85;
    font-weight: 500;
}

.official-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 44px;
}

.official-primary-action,
.official-secondary-action {
    min-height: 58px;
    min-width: 210px;
    border-radius: 6px;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
}

.official-primary-action {
    background: #7f1738;
    border-color: #7f1738;
}

.official-primary-action:hover {
    background: #69112d;
    border-color: #69112d;
}

.official-secondary-action {
    color: #7f1738;
    border-color: rgba(127, 23, 56, 0.4);
    background: rgba(255, 255, 255, 0.82);
}

.official-proof-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-top: 44px;
}

.official-proof-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
}

.official-proof-item i,
.official-flow-step i,
.official-capability-strip i {
    color: #7f1738;
    font-size: 25px;
    line-height: 1;
}

.official-proof-item strong,
.official-proof-item span {
    display: block;
}

.official-proof-item strong {
    color: #7f1738;
    font-size: 15px;
    line-height: 1.35;
}

.official-proof-item span {
    margin-top: 4px;
    color: #526074;
    font-size: 13px;
    line-height: 1.55;
}

.official-product-preview {
    min-width: 0;
}

.official-system-entry {
    display: flex;
    align-items: center;
}

.official-entry-panel {
    width: 100%;
    padding: 34px;
    border: 1px solid rgba(127, 23, 56, 0.13);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 32px 72px rgba(23, 32, 51, 0.14);
}

.official-entry-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.official-entry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #7f1738;
    color: #ffffff;
    font-size: 25px;
}

.official-entry-head strong,
.official-entry-head span {
    display: block;
}

.official-entry-head strong {
    color: #172033;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 900;
}

.official-entry-head span {
    margin-top: 8px;
    color: #526074;
    font-size: 14px;
    line-height: 1.7;
}

.official-entry-action {
    width: 100%;
    min-height: 54px;
    margin-top: 26px;
    justify-content: center;
    border-radius: 6px;
    background: #7f1738;
    border-color: #7f1738;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 900;
}

.official-entry-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 26px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 8px;
    overflow: hidden;
}

.official-entry-stats div {
    min-height: 104px;
    padding: 20px 18px;
    border-right: 1px solid rgba(203, 213, 225, 0.82);
    background: #fbfcfd;
}

.official-entry-stats div:last-child {
    border-right: 0;
}

.official-entry-stats strong,
.official-entry-stats span {
    display: block;
}

.official-entry-stats strong {
    color: #7f1738;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 900;
}

.official-entry-stats span {
    margin-top: 8px;
    color: #526074;
    font-size: 13px;
    font-weight: 800;
}

.official-entry-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.official-entry-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(127, 23, 56, 0.24);
    border-radius: 6px;
    color: #7f1738 !important;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.official-entry-panel p {
    margin: 20px 0 0;
    color: #526074;
    font-size: 13px;
    line-height: 1.75;
}

.official-preview-shell {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    min-height: 510px;
    border: 1px solid rgba(127, 23, 56, 0.13);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 32px 72px rgba(23, 32, 51, 0.14);
    overflow: hidden;
}

.official-preview-sidebar {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px 14px;
    color: #d7dee9;
    background: linear-gradient(180deg, #1b2a3d 0%, #0f1d2f 100%);
}

.official-preview-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.official-preview-brand img {
    width: 24px;
    height: 24px;
}

.official-preview-sidebar span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.official-preview-sidebar span.active {
    background: #7f1738;
    color: #ffffff;
}

.official-preview-main {
    min-width: 0;
    padding: 20px;
    background: #f8fafc;
}

.official-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    color: #172033;
}

.official-preview-top strong {
    font-size: 17px;
}

.official-preview-top span {
    color: #64748b;
    font-size: 13px;
}

.official-preview-grid {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 14px;
}

.official-student-card,
.official-result-card,
.official-preview-bottom span,
.official-flow-step,
.official-case-grid article {
    border: 1px solid rgba(203, 213, 225, 0.82);
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(23, 32, 51, 0.06);
}

.official-student-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

.official-mini-label,
.official-result-card span,
.official-case-grid span {
    color: #7f1738;
    font-size: 12px;
    font-weight: 900;
}

.official-student-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.official-student-card dl div {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
}

.official-student-card dt,
.official-student-card dd {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
}

.official-student-card dt {
    color: #64748b;
}

.official-student-card dd {
    color: #172033;
    font-weight: 800;
}

.official-result-list {
    display: grid;
    gap: 12px;
}

.official-result-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 102px;
    padding: 16px 18px;
    border-left-width: 4px;
}

.official-result-card.rush {
    border-left-color: #7f1738;
}

.official-result-card.match {
    border-left-color: #9f7d35;
}

.official-result-card.stable {
    border-left-color: #6d8f82;
}

.official-result-card strong,
.official-result-card em {
    display: block;
}

.official-result-card strong {
    margin-top: 6px;
    color: #172033;
    font-size: 18px;
    line-height: 1.25;
}

.official-result-card em {
    margin-top: 6px;
    color: #14805e;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
}

.official-preview-bottom {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.official-preview-bottom span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.official-preview-bottom i {
    color: #7f1738;
    font-size: 18px;
}

.official-capability-strip {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    max-width: 1380px;
    margin: -2px auto 0;
    padding: 22px 28px;
    border-top: 1px solid rgba(127, 23, 56, 0.12);
    border-bottom: 1px solid rgba(127, 23, 56, 0.12);
    background: rgba(255, 255, 255, 0.96);
}

.official-capability-strip div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 12px;
    padding: 0 18px;
    border-right: 1px solid rgba(127, 23, 56, 0.12);
}

.official-capability-strip div:last-child {
    border-right: 0;
}

.official-capability-strip strong,
.official-capability-strip span {
    display: block;
    min-width: 0;
}

.official-capability-strip strong {
    color: #172033;
    font-size: 14px;
    line-height: 1.35;
}

.official-capability-strip span {
    grid-column: 2;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    margin-top: 3px;
}

.official-section {
    max-width: 1380px;
    margin: 0 auto;
    padding: 54px 48px;
    scroll-margin-top: 86px;
}

.official-section-heading {
    max-width: 720px;
    margin: 0 auto 30px;
    text-align: center;
}

.official-section h2,
.official-section-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0;
}

.official-section p,
.official-section-heading p {
    margin: 12px 0 0;
    color: #526074;
    font-size: 16px;
    line-height: 1.75;
}

.official-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
}

.official-flow-step {
    position: relative;
    min-height: 156px;
    padding: 22px;
    text-align: left;
}

.official-flow-step strong,
.official-flow-step span {
    display: block;
}

.official-flow-step strong {
    margin-top: 18px;
    color: #172033;
    font-size: 16px;
}

.official-flow-step span {
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.official-data-section {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
    gap: 48px;
    align-items: center;
    border-top: 1px solid rgba(127, 23, 56, 0.1);
}

.official-data-copy h2 {
    max-width: 460px;
}

.official-data-copy .btn {
    margin-top: 24px;
    color: #7f1738;
    border-color: rgba(127, 23, 56, 0.38);
}

.official-data-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.official-data-metrics div {
    min-height: 138px;
    padding: 24px 20px;
    border-left: 1px solid rgba(127, 23, 56, 0.14);
}

.official-data-metrics strong {
    display: block;
    color: #7f1738;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 900;
}

.official-data-metrics span {
    display: block;
    margin-top: 10px;
    color: #526074;
    font-size: 14px;
    line-height: 1.55;
}

.official-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.official-case-grid article {
    min-height: 150px;
    padding: 24px;
}

.official-case-grid strong {
    display: block;
    margin-top: 12px;
    color: #172033;
    font-size: 18px;
    line-height: 1.55;
}

.official-case-grid em {
    display: block;
    margin-top: 18px;
    color: #7f1738;
    font-size: 28px;
    font-style: normal;
    font-weight: 900;
}

.official-library-section {
    border-top: 1px solid rgba(127, 23, 56, 0.1);
}

.official-library-panel {
    border: 1px solid rgba(203, 213, 225, 0.84);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(23, 32, 51, 0.07);
    overflow: hidden;
}

.official-library-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
    background: #fbfcfd;
}

.official-library-summary span {
    min-height: 84px;
    padding: 20px 24px;
    color: #526074;
    font-size: 14px;
    font-weight: 800;
    border-right: 1px solid rgba(203, 213, 225, 0.72);
}

.official-library-summary span:last-child {
    border-right: 0;
}

.official-library-summary strong {
    display: block;
    color: #7f1738;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 900;
}

.official-library-tabs {
    display: flex;
    gap: 10px;
    padding: 18px 24px 0;
}

.official-library-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(127, 23, 56, 0.22);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #ffffff;
    color: #526074;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.official-library-tabs button.active {
    background: #7f1738;
    border-color: #7f1738;
    color: #ffffff;
}

.official-library-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 190px 190px;
    gap: 14px;
    padding: 18px 24px;
    border-top: 1px solid rgba(127, 23, 56, 0.12);
    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
    background: #ffffff;
}

.official-library-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 6px;
    background: #ffffff;
    color: #7f1738;
}

.official-library-search input,
.official-library-toolbar select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    font-size: 14px;
    font-weight: 700;
}

.official-library-toolbar select {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
}

.official-library-status {
    padding: 16px 24px 0;
    color: #526074;
    font-size: 14px;
    line-height: 1.6;
}

.official-library-status strong {
    color: #7f1738;
}

.official-program-breadcrumb {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(203, 213, 225, 0.86);
    border-radius: 8px;
    background: #fbfcfd;
}

.official-program-breadcrumb button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(127, 23, 56, 0.28);
    border-radius: 6px;
    background: #ffffff;
    color: #7f1738;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.official-program-breadcrumb div {
    min-width: 0;
    text-align: right;
}

.official-program-breadcrumb span,
.official-program-breadcrumb strong,
.official-program-breadcrumb em {
    display: block;
}

.official-program-breadcrumb span {
    color: #7f1738;
    font-size: 12px;
    font-weight: 900;
}

.official-program-breadcrumb strong {
    margin-top: 3px;
    color: #172033;
    font-size: 18px;
    line-height: 1.35;
}

.official-program-breadcrumb em {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.official-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 18px 24px 24px;
}

.official-library-card {
    display: flex;
    min-width: 0;
    min-height: 310px;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid rgba(203, 213, 225, 0.86);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(23, 32, 51, 0.05);
}

.official-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.official-card-topline span,
.official-card-topline em,
.official-card-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.official-card-topline span {
    color: #7f1738;
}

.official-card-topline em {
    padding: 0 9px;
    background: rgba(127, 23, 56, 0.08);
    color: #7f1738;
    font-style: normal;
    white-space: nowrap;
}

.official-library-card strong {
    color: #172033;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 900;
}

.official-library-card p {
    margin: 0;
    color: #526074;
    font-size: 13px;
    line-height: 1.7;
}

.official-card-en {
    min-height: 22px;
    color: #7a8597 !important;
}

.official-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.official-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 999px;
    color: #526074;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.official-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.official-card-tags span {
    padding: 0 9px;
    background: #f4f7fb;
    color: #526074;
}

.official-card-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.official-card-list li {
    position: relative;
    padding-left: 14px;
    color: #526074;
    font-size: 13px;
    line-height: 1.5;
}

.official-card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7f1738;
}

.official-card-foot {
    display: grid;
    gap: 12px;
    margin-top: auto;
}

.official-card-foot > span {
    display: -webkit-box;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.official-card-foot i {
    margin-right: 5px;
    color: #7f1738;
}

.official-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content;
    min-height: 36px;
    margin-top: auto;
    padding: 0 12px;
    border: 1px solid rgba(127, 23, 56, 0.32);
    border-radius: 6px;
    background: #ffffff;
    color: #7f1738 !important;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.official-card-link:hover {
    border-color: #7f1738;
    background: rgba(127, 23, 56, 0.06);
}

.official-outcome.success {
    color: #0f7a4c;
}

.official-outcome.failed {
    color: #a33a28;
}

.official-library-empty,
.official-library-loading {
    grid-column: 1 / -1;
    min-height: 180px;
    justify-content: center;
}

.official-library-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 24px 24px;
}

.official-pagination-nav,
.official-pagination-pages,
.official-pagination-jump {
    display: flex;
    align-items: center;
    gap: 8px;
}

.official-library-pagination button,
.official-pagination-jump input {
    min-height: 36px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 6px;
    background: #ffffff;
    color: #172033;
    font-size: 13px;
    font-weight: 900;
}

.official-library-pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 38px;
    padding: 0 11px;
    cursor: pointer;
}

.official-library-pagination button.active {
    border-color: #7f1738;
    background: #7f1738;
    color: #ffffff;
}

.official-library-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.official-pagination-gap {
    min-width: 18px;
    color: #64748b;
    text-align: center;
}

.official-pagination-jump {
    color: #526074;
    font-size: 13px;
    font-weight: 800;
}

.official-pagination-jump input {
    width: 72px;
    padding: 0 8px;
    text-align: center;
}

.official-pagination-jump button {
    border-color: rgba(127, 23, 56, 0.32);
    color: #7f1738;
}

.official-community-section {
    border-top: 1px solid rgba(127, 23, 56, 0.1);
}

.official-community-panel {
    border: 1px solid rgba(203, 213, 225, 0.84);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(23, 32, 51, 0.07);
    overflow: hidden;
}

.official-community-head {
    min-height: 88px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
    background: #fbfcfd;
}

.official-community-head strong,
.official-community-head span {
    display: block;
}

.official-community-head strong {
    color: #172033;
    font-size: 18px;
}

.official-community-head span {
    margin-top: 5px;
    color: #64748b;
    font-size: 13px;
}

.official-community-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.official-community-card {
    min-height: 220px;
    padding: 18px;
    border: 1px solid rgba(203, 213, 225, 0.84);
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.official-community-card > span {
    color: #7f1738;
    font-size: 12px;
    font-weight: 900;
}

.official-community-card strong {
    color: #172033;
    font-size: 18px;
    line-height: 1.45;
}

.official-community-card p {
    margin: 0;
    color: #526074;
    font-size: 14px;
    line-height: 1.65;
}

.official-community-meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #8a95a6;
    font-size: 12px;
}

.official-community-meta i {
    color: #7f1738;
}

.public-nav-links a.active {
    color: #7f1738;
}

.public-community-main {
    background: #ffffff;
}

body.public-community-page .app-container {
    display: block;
    width: 100%;
}

body.public-community-page .main-content {
    width: 100%;
    max-width: none;
}

.community-public-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 28px;
    align-items: stretch;
    padding: 72px 48px 34px;
    border-bottom: 1px solid rgba(127, 23, 56, 0.1);
}

.community-public-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.community-public-kicker {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(127, 23, 56, 0.18);
    border-radius: 999px;
    background: rgba(127, 23, 56, 0.06);
    color: #7f1738;
    font-size: 12px;
    font-weight: 900;
}

.community-public-hero h1 {
    margin: 0;
    color: #7f1738;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.community-public-hero p {
    max-width: 760px;
    margin: 0;
    color: #526074;
    font-size: 18px;
    line-height: 1.75;
}

.community-public-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.community-public-principles {
    display: grid;
    gap: 14px;
    align-self: center;
}

.community-public-principles > div,
.community-public-stats > div,
.community-public-side,
.community-public-card {
    border: 1px solid rgba(203, 213, 225, 0.84);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(23, 32, 51, 0.06);
}

.community-public-principles > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 18px;
}

.community-public-principles i {
    grid-row: span 2;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(127, 23, 56, 0.08);
    color: #7f1738;
    font-size: 20px;
}

.community-public-principles strong {
    color: #172033;
    font-size: 16px;
}

.community-public-principles span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.community-public-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 22px 48px 0;
}

.community-public-stats > div {
    min-height: 94px;
    padding: 18px;
}

.community-public-stats strong,
.community-public-stats span {
    display: block;
}

.community-public-stats strong {
    color: #7f1738;
    font-size: 28px;
    line-height: 1.15;
}

.community-public-stats span {
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.community-public-section {
    padding: 42px 48px 56px;
}

.community-public-heading,
.community-public-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.community-public-heading {
    margin-bottom: 18px;
}

.community-public-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: 0;
}

.community-public-heading p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.community-public-toolbar {
    margin-bottom: 18px;
}

.community-public-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.community-public-tabs button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 6px;
    background: #ffffff;
    color: #526074;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.community-public-tabs button.active {
    border-color: #7f1738;
    background: #7f1738;
    color: #ffffff;
}

.community-public-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 360px);
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 6px;
    background: #ffffff;
    color: #7f1738;
}

.community-public-search input {
    width: 100%;
    border: 0;
    outline: none;
    color: #172033;
    font-size: 14px;
}

.community-public-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.community-public-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.community-public-card {
    min-height: 246px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.community-public-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.community-public-card-top span,
.community-public-card > span {
    color: #7f1738;
    font-size: 12px;
    font-weight: 900;
}

.community-public-card-top em {
    color: #8a95a6;
    font-size: 12px;
    font-style: normal;
}

.community-public-card strong {
    color: #172033;
    font-size: 19px;
    line-height: 1.45;
}

.community-public-card p {
    margin: 0;
    color: #526074;
    font-size: 14px;
    line-height: 1.65;
}

.community-public-tags,
.community-public-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.community-public-tags span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #f4f7fb;
    color: #526074;
    font-size: 12px;
}

.community-public-card-meta {
    margin-top: auto;
    color: #8a95a6;
    font-size: 12px;
}

.community-public-card-meta i {
    color: #7f1738;
}

.community-public-empty {
    grid-column: 1 / -1;
    justify-content: center;
}

.community-public-side {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 12px;
    padding: 18px;
}

.community-public-side strong {
    color: #172033;
    font-size: 18px;
}

.community-public-side p {
    margin: 0;
    color: #526074;
    font-size: 14px;
    line-height: 1.65;
}

.community-public-note {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(203, 213, 225, 0.8);
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.community-public-note i {
    color: #7f1738;
    font-size: 16px;
    line-height: 1.4;
}

.community-product-nav {
    border-bottom: 1px solid rgba(127, 23, 56, 0.12);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
}

.community-product-links {
    gap: 30px;
}

.community-product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
    gap: 42px;
    align-items: center;
    min-height: calc(100vh - 72px);
    padding: 84px 56px 72px;
    border-bottom: 1px solid rgba(127, 23, 56, 0.1);
    background:
        linear-gradient(90deg, rgba(127, 23, 56, 0.06), rgba(255, 255, 255, 0) 34%),
        #ffffff;
}

.community-product-hero-copy {
    max-width: 760px;
}

.community-product-hero h1 {
    margin: 0;
    color: #7f1738;
    font-size: clamp(56px, 8vw, 108px);
    line-height: 0.98;
    letter-spacing: 0;
}

.community-product-hero p {
    max-width: 690px;
    margin: 22px 0 0;
    color: #334155;
    font-size: 22px;
    line-height: 1.72;
}

.community-product-live {
    display: grid;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(23, 32, 51, 0.1);
}

.community-live-head {
    display: grid;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(203, 213, 225, 0.78);
}

.community-live-head span {
    color: #7f1738;
    font-size: 13px;
    font-weight: 900;
}

.community-live-head strong {
    color: #172033;
    font-size: 26px;
    line-height: 1.35;
}

.community-live-thread {
    display: grid;
    gap: 12px;
}

.community-live-thread > div {
    padding: 15px;
    border-radius: 8px;
    background: #f8fafc;
}

.community-live-thread b {
    display: block;
    color: #7f1738;
    font-size: 13px;
    margin-bottom: 6px;
}

.community-live-thread p {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.65;
}

.community-product-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid rgba(127, 23, 56, 0.1);
}

.community-product-stats > div {
    min-height: 118px;
    padding: 28px 56px;
    border-right: 1px solid rgba(127, 23, 56, 0.1);
    background: #ffffff;
}

.community-product-stats > div:last-child {
    border-right: 0;
}

.community-product-stats strong,
.community-product-stats span {
    display: block;
}

.community-product-stats strong {
    color: #7f1738;
    font-size: 34px;
    line-height: 1.1;
}

.community-product-stats span {
    margin-top: 8px;
    color: #526074;
    font-size: 13px;
    font-weight: 900;
}

.community-product-section {
    padding: 52px 56px 64px;
}

.community-product-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 20px;
}

.community-product-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 38px;
    line-height: 1.18;
    letter-spacing: 0;
}

.community-product-heading p {
    margin: 8px 0 0;
    color: #526074;
    font-size: 15px;
}

.community-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

.community-product-side {
    position: sticky;
    top: 90px;
    display: grid;
    gap: 14px;
}

.community-ask-card,
.community-topic-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(23, 32, 51, 0.07);
}

.community-ask-card strong,
.community-topic-card strong {
    color: #172033;
    font-size: 18px;
}

.community-ask-card input {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(203, 213, 225, 0.92);
    border-radius: 6px;
    color: #172033;
    font-size: 14px;
    outline: none;
}

.community-ask-card input:focus {
    border-color: rgba(127, 23, 56, 0.42);
    box-shadow: 0 0 0 3px rgba(127, 23, 56, 0.08);
}

.community-topic-card a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.community-topic-card a:hover {
    background: rgba(127, 23, 56, 0.07);
    color: #7f1738;
}

.community-product-footer {
    border-top-color: rgba(127, 23, 56, 0.14);
}

body.community-feed-page {
    min-height: 100vh;
    background: #f4f6f8;
    color: #172033;
}

.community-feed-page .app-container {
    display: block;
}

.community-app-shell {
    min-height: 100vh;
}

.community-app-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 180px auto minmax(260px, 560px) auto;
    gap: 18px;
    align-items: center;
    height: 64px;
    padding: 0 28px;
    border-bottom: 1px solid rgba(203, 213, 225, 0.88);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
}

.community-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #7f1738;
    font-size: 18px;
    font-weight: 900;
    text-decoration: none;
}

.community-brand img {
    width: 54px;
    height: auto;
}

.community-app-nav,
.community-product-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.community-app-nav a,
.community-product-links a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    color: #526074;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.community-app-nav a:hover,
.community-app-nav a.active,
.community-product-links a:hover,
.community-product-links a.active {
    background: rgba(127, 23, 56, 0.08);
    color: #7f1738;
}

.community-top-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(203, 213, 225, 0.92);
    border-radius: 999px;
    background: #f8fafc;
    color: #7f1738;
}

.community-top-search input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #172033;
    font-size: 14px;
}

.community-post-btn {
    justify-self: end;
}

.community-feed-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 320px;
    gap: 18px;
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 18px 24px 48px;
}

.community-left-rail,
.community-right-rail {
    position: sticky;
    top: 82px;
    align-self: start;
    display: grid;
    gap: 14px;
}

.community-feed-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.community-left-card,
.community-section-nav,
.community-composer,
.community-feed-tabs,
.community-feed-status,
.community-feed-post,
.community-market-card,
.community-rank-card {
    border: 1px solid rgba(203, 213, 225, 0.88);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(23, 32, 51, 0.04);
}

.community-left-card {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.community-left-card strong,
.community-rank-title strong,
.community-market-head span {
    color: #172033;
    font-size: 16px;
    font-weight: 900;
}

.community-left-card span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.community-left-card a {
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.community-left-card a:not(.btn) {
    display: flex;
    min-height: 32px;
    align-items: center;
}

.community-left-card a:hover {
    color: #7f1738;
}

.community-section-nav {
    display: grid;
    padding: 8px;
}

.community-section-nav button {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    font-size: 14px;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.community-section-nav button:hover,
.community-section-nav button.active {
    background: rgba(127, 23, 56, 0.08);
    color: #7f1738;
}

.community-composer {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
}

.community-composer img {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    object-fit: cover;
}

.community-composer input {
    height: 42px;
    padding: 0 13px;
    border: 1px solid rgba(203, 213, 225, 0.92);
    border-radius: 999px;
    background: #f8fafc;
    color: #172033;
    font-size: 14px;
    outline: none;
}

.community-composer input:focus {
    border-color: rgba(127, 23, 56, 0.42);
    box-shadow: 0 0 0 3px rgba(127, 23, 56, 0.08);
}

.community-feed-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
}

.community-feed-tabs button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.community-feed-tabs button:hover,
.community-feed-tabs button.active {
    background: rgba(127, 23, 56, 0.08);
    color: #7f1738;
}

.community-feed-status {
    padding: 10px 14px;
    color: #64748b;
    font-size: 13px;
}

.community-feed-list {
    display: grid;
    gap: 12px;
}

.community-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 2px;
}

.community-pagination[hidden] {
    display: none;
}

.community-pagination button {
    display: inline-flex;
    min-width: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 6px;
    background: #ffffff;
    color: #526074;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.community-pagination button:hover:not(:disabled),
.community-pagination button.active {
    border-color: #7f1738;
    background: #7f1738;
    color: #ffffff;
}

.community-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.community-pagination-gap {
    min-width: 24px;
    text-align: center;
    color: #8a95a6;
    font-weight: 900;
}

.community-feed-post {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    overflow: hidden;
}

.community-empty-post .community-post-main {
    grid-column: 1 / -1;
    min-height: 240px;
    align-content: center;
    justify-items: start;
}

.community-empty-post .official-card-link {
    justify-self: start;
}

.community-feed-post:hover {
    border-color: rgba(127, 23, 56, 0.22);
}

.community-vote-column {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 3px;
    padding: 12px 0;
    background: #f8fafc;
}

.community-vote-column button {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    cursor: pointer;
}

.community-vote-column button:hover {
    background: rgba(127, 23, 56, 0.08);
    color: #7f1738;
}

.community-vote-column strong {
    color: #172033;
    font-size: 12px;
    line-height: 1.3;
}

.community-post-main {
    display: grid;
    gap: 9px;
    padding: 14px 16px 16px;
}

.community-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    color: #8a95a6;
    font-size: 12px;
}

.community-post-community {
    color: #7f1738;
    font-weight: 900;
}

.community-post-main h2 {
    margin: 0;
    color: #172033;
    font-size: 20px;
    line-height: 1.36;
    letter-spacing: 0;
}

.community-post-main p {
    margin: 0;
    color: #526074;
    font-size: 14px;
    line-height: 1.65;
}

.community-feed-tags,
.community-post-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.community-feed-tags span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef2f7;
    color: #526074;
    font-size: 12px;
    font-weight: 800;
}

.community-post-actions {
    margin-top: 4px;
}

.community-post-actions a,
.community-empty-post .official-card-link {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-radius: 6px;
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.community-post-actions a:hover,
.community-empty-post .official-card-link:hover {
    background: rgba(127, 23, 56, 0.07);
    color: #7f1738;
}

.community-market-card,
.community-rank-card {
    padding: 16px;
}

.community-market-card {
    display: grid;
    gap: 14px;
}

.community-market-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.community-market-head strong {
    color: #7f1738;
    font-size: 34px;
    line-height: 1;
}

.community-market-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.community-market-grid div {
    min-height: 58px;
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
}

.community-market-grid b,
.community-market-grid span {
    display: block;
}

.community-market-grid b {
    color: #172033;
    font-size: 20px;
}

.community-market-grid span {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.community-rank-card {
    display: grid;
    gap: 12px;
}

.community-rank-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.community-rank-title span {
    color: #8a95a6;
    font-size: 12px;
    font-weight: 900;
}

.community-hot-list,
.community-topic-list {
    display: grid;
    gap: 8px;
}

.community-hot-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: start;
    padding: 9px 0;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    text-decoration: none;
}

.community-hot-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.community-hot-item span {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(127, 23, 56, 0.09);
    color: #7f1738;
    font-size: 12px;
    font-weight: 900;
}

.community-hot-item strong {
    overflow: hidden;
    color: #172033;
    font-size: 13px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.community-hot-item em {
    grid-column: 2;
    color: #8a95a6;
    font-size: 12px;
    font-style: normal;
}

.community-topic-list a {
    display: flex;
    min-height: 34px;
    align-items: center;
    padding: 0 10px;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.community-topic-list a:hover {
    background: rgba(127, 23, 56, 0.08);
    color: #7f1738;
}

.official-footer {
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) repeat(3, minmax(160px, 1fr));
    gap: 42px;
    padding: 42px 48px;
    border-top: 1px solid rgba(127, 23, 56, 0.12);
    background: #fbfcfd;
}

.official-footer img {
    width: 148px;
    max-width: 100%;
    height: auto;
}

.official-footer p {
    margin: 14px 0 0;
    color: #526074;
    font-size: 14px;
    line-height: 1.8;
}

.official-footer strong,
.official-footer a,
.official-footer span {
    display: block;
}

.official-footer strong {
    margin-bottom: 12px;
    color: #172033;
    font-size: 15px;
}

.official-footer a,
.official-footer span {
    margin-top: 8px;
    color: #526074;
    font-size: 13px;
    line-height: 1.55;
    text-decoration: none;
}

.official-footer a:hover {
    color: #7f1738;
}

.official-footer::after {
    content: "© 2026 毓华留学选校系统 版权所有";
    grid-column: 1 / -1;
    margin: 10px -48px -42px;
    padding: 20px 48px;
    background: linear-gradient(90deg, #6a122e 0%, #8a1c3e 52%, #63122c 100%);
    color: #ffffff;
    font-size: 13px;
    text-align: center;
}

.hero-section {
    text-align: center;
    padding: 4rem 1rem;
    margin-bottom: 2rem;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* QS Ranking & Selection */
.result-item {
    position: relative;
    padding-right: 90px;
}

/* Space for badge/button */
.qs-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #f59e0b;
    color: white;
    padding: 4px 12px;
    border-bottom-left-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-select {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.btn-select:hover {
    background: #eef2ff;
    transform: translateY(-2px);
}

.btn-select.selected {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.result-item.selected {
    border: 2px solid var(--primary-color);
    background: rgba(36, 87, 166, 0.08);
}

.selection-bar {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    z-index: 999;
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Secondary Filter */
.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    pointer-events: none;
}

.input-with-icon input {
    padding-left: 36px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
}

.input-with-icon input:focus {
    border-color: var(--primary-color);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(36, 87, 166, 0.14);
}

/* Consultant Selection Mode */
.selected-card {
    border: 2px solid var(--success-color) !important;
    background-color: rgba(16, 185, 129, 0.1) !important;
    /* light green */
}

.selection-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    /* Beside score? Score is top right. */
    right: 80px;
    /* offset from score */
    z-index: 5;
    cursor: pointer;
    transition: transform 0.2s;
}

button.selection-indicator {
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
}

.selection-indicator:hover {
    transform: scale(1.1);
}

.result-item {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.workbench-result-col .result-item {
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.workbench-result-col .result-item:hover {
    border-color: rgba(36, 87, 166, 0.36);
    box-shadow: 0 14px 28px rgba(36, 87, 166, 0.12);
    transform: translateY(-2px);
}

.selected-card {
    border-color: var(--primary-color) !important;
    background: rgba(36, 87, 166, 0.08) !important;
    box-shadow: 0 0 0 2px var(--primary-color) inset !important;
}

.workbench-results .result-item {
    padding: 16px;
    padding-right: 16px;
    border-color: var(--wb-line);
    box-shadow: 0 8px 20px rgba(23, 32, 51, 0.04);
}

.workbench-results .result-item:hover {
    border-color: rgba(36, 87, 166, 0.36);
    box-shadow: var(--wb-shadow-soft);
}

.workbench-results .selected-card {
    border-color: var(--wb-brand) !important;
    background: #f2f7ff !important;
    box-shadow: 0 0 0 2px rgba(36, 87, 166, 0.18) inset !important;
}

.workbench-results .selection-indicator {
    top: 14px;
    right: 14px;
}

/* --- Toast Notifications (Premium) --- */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    /* Allow clicks through container */
}

.toast-message {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-left: 4px solid var(--primary-color);
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 450px;
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
    font-size: 0.95rem;

    border: 1px solid rgba(226, 232, 240, 0.8);
}

.toast-message.success {
    border-left-color: var(--success-color);
}

.toast-message.error {
    border-left-color: var(--danger-color);
}

.toast-message.warning {
    border-left-color: var(--warning-color);
}

.toast-message.info {
    border-left-color: var(--primary-color);
}

.toast-icon {
    font-size: 1.25rem;
}

.toast-message.success .toast-icon {
    color: var(--success-color);
}

.toast-message.error .toast-icon {
    color: var(--danger-color);
}

.toast-message.warning .toast-icon {
    color: var(--warning-color);
}

.toast-message.info .toast-icon {
    color: var(--primary-color);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}


/* --- Mobile Responsive (Pillar 4) --- */

#mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-main);
    margin-right: 15px;
}

@media (max-width: 1024px) {
    .match-school-row {
        grid-template-columns: minmax(0, 1fr);
    }
    #mode-std-fields {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "options"
            "background"
            "language"
            "actions";
    }
    #mode-std-fields > .workbench-submit-block {
        grid-column: auto;
    }
    .workbench-grid {
        grid-template-columns: 1fr !important;
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    .workbench-profile-panel,
    .workbench-results {
        height: auto;
        max-height: none;
    }
    #page-workbench .workbench-grid {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    #page-workbench .workbench-profile-panel,
    #page-workbench .workbench-results {
        height: auto;
        max-height: none;
    }
    #page-workbench .result-col {
        height: auto;
    }
    #resultsTiered {
        max-height: 62vh;
    }
    #page-workbench #resultsTiered {
        overflow-y: auto;
    }
    .match-school-program-option {
        flex-basis: 210px;
    }
    #adminDashboardGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .results-section {
        grid-template-columns: 1fr !important;
    }
    .results-section > .result-col {
        max-height: min(56vh, 460px);
        min-height: 320px;
    }
    #resultsOfficial,
    #resultsInternal {
        flex: 1 1 auto;
        max-height: none;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}

@media (max-width: 1024px) {
    :root {
        --sidebar-width: 280px;
    }
    .workbench-language-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .workbench-submit-block,
    .workbench-smart-action-row {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
    }
    .workbench-smart-action-row .workbench-ai-actions {
        grid-column: 2;
        width: 100%;
    }
    #page-workbench #btnMatchStandard {
        grid-column: 2;
        width: 100%;
        min-width: 0;
    }
    .app-container {
        overflow-x: hidden;
    }
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0 !important;
        padding: 1rem !important;
        padding-top: calc(var(--header-height) + 1rem) !important;
    }
    .top-nav {
        left: 0 !important;
        padding: 0 1rem;
    }

    body:not(.public-mode) #mobile-menu-btn {
        display: inline-block;
    }

    #desktopSidebarToggle {
        display: none !important;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .custom-table {
        min-width: 700px;
    }

    #adminDashboardGrid {
        grid-template-columns: 1fr !important;
    }
    .filter-bar {
        flex-direction: column;
        align-items: stretch !important;
    }
    .filter-bar input, .filter-bar select {
        width: 100% !important;
    }

    .card {
        padding: 1rem;
    }

    .login-container {
        padding: 24px;
    }

    .login-layout {
        width: min(520px, 100%);
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .login-showcase {
        order: 1;
        min-height: auto;
        padding: 0 8px;
        align-items: center;
        text-align: center;
    }

    .login-brand-row {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 14px;
    }

    .login-brand-logo {
        width: 120px;
        max-width: none;
        border-radius: 18px;
    }

    .login-product-name {
        font-size: 1.65rem;
    }

    .login-product-sub {
        margin-top: 8px;
        font-size: 14px;
    }

    .login-showcase-points {
        display: none;
    }

    .login-card {
        order: 2;
        justify-self: stretch;
        min-height: auto;
        padding: 2rem 1.5rem;
        border-radius: 24px;
    }

    .workbench-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .workbench-two-col,
    .workbench-ai-actions {
        grid-template-columns: 1fr;
    }

    .workbench-major-menu {
        position: fixed;
        z-index: 10000;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        box-shadow: none;
    }

    .workbench-major-mobile-titlebar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 52px;
        align-items: center;
        min-height: 58px;
        padding: 6px 12px;
        border-bottom: 1px solid var(--wb-line);
        background: #fff;
        text-align: center;
    }

    .workbench-major-mobile-titlebar strong {
        color: var(--wb-ink);
        font-size: 18px;
    }

    .workbench-major-mobile-back {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--wb-brand);
        font-size: 26px;
    }

    .workbench-major-browser {
        grid-template-columns: minmax(96px, 32%) minmax(0, 68%);
        min-height: 0;
    }

    .workbench-major-option-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .workbench-major-menu-head {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px 12px;
    }

    .workbench-major-search {
        padding-left: 46px;
    }

    .workbench-major-all-option {
        display: none;
    }

    .workbench-major-groups {
        padding: 8px 6px;
    }

    .workbench-major-group {
        min-height: 48px;
        padding: 8px;
        font-size: 13px;
    }

    .workbench-major-options {
        padding: 10px;
    }

    .workbench-major-option {
        min-height: 48px;
        padding: 10px 8px;
        border-bottom: 1px solid var(--wb-line);
        border-radius: 0;
    }

    .workbench-major-menu-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .match-school-card-head,
    .match-school-project-detail-head {
        align-items: stretch;
        flex-direction: column;
    }

    .match-source-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .match-school-toggle,
    .match-school-project-detail-head .btn {
        width: 100%;
        justify-content: center;
    }

    .match-school-project-primary-actions {
        width: 100%;
        flex-direction: row;
    }

    .match-school-project-primary-actions .btn {
        flex: 1;
    }

    .match-school-program-option {
        max-width: none;
        flex-basis: 100%;
    }

    .hero-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 520px) {
    .workbench-profile-panel,
    .workbench-results {
        border-radius: 14px;
        padding: 14px;
    }

    .workbench-segment {
        width: 100%;
    }

    .workbench-segment .btn {
        flex: 1;
    }

    .workbench-toolbar-controls {
        gap: 8px;
    }

    .workbench-mode-toolbar .workbench-segment {
        gap: 4px;
        padding: 4px;
    }

    .workbench-mode-toolbar .workbench-segment .btn {
        min-width: 0;
        padding-inline: 8px;
    }

    .match-school-card {
        padding: 12px;
        border-radius: 12px;
    }

    .match-school-summary-row {
        gap: 6px 10px;
    }

    .match-school-faculty-head {
        display: grid;
        justify-content: stretch;
    }

    .match-school-program-list {
        gap: 7px;
    }

    .match-school-program-chip {
        min-height: 44px;
        padding: 8px;
        padding-right: 38px;
    }

    .match-school-project-detail {
        padding: 11px;
    }

    .match-source-strip {
        grid-template-columns: 1fr;
    }

    .match-program-floating-window {
        left: 12px;
        right: 12px;
        top: auto;
        bottom: 12px;
        width: auto;
        max-height: min(78vh, 640px);
    }

    .match-school-project-badges .tag {
        white-space: normal;
        line-height: 1.25;
    }

    .login-showcase {
        display: flex;
    }

    .login-layout {
        width: 100%;
        gap: 18px;
    }

    .login-container {
        padding: 16px;
    }

    .login-brand-logo {
        width: 96px;
        padding: 9px 10px;
    }

    .login-product-name {
        font-size: 1.35rem;
    }

    .login-product-sub {
        font-size: 13px;
    }

    .login-card {
        padding: 1.6rem 1.15rem;
        border-radius: 20px;
    }

    .login-card-head h2 {
        font-size: 1.65rem;
    }
}

@media (max-width: 1180px) {
    body.public-mode #publicNavLinks {
        display: none;
    }

    .official-hero {
        min-height: auto;
        padding: 42px 28px 26px;
    }

    .official-hero-content,
    .official-data-section {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .official-hero-title {
        font-size: 52px;
    }

    .official-product-preview {
        max-width: 900px;
    }

    .official-system-entry {
        width: 100%;
    }

    .official-capability-strip,
    .official-flow,
    .official-data-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .official-library-toolbar {
        grid-template-columns: minmax(0, 1fr) 180px 180px;
    }

    .official-capability-strip div {
        border-right: 0;
        border-bottom: 1px solid rgba(127, 23, 56, 0.12);
        padding: 16px 18px;
    }

    .official-capability-strip div:nth-last-child(-n+2) {
        border-bottom: 0;
    }
}

@media (max-width: 1024px) {
    .public-nav-links {
        display: none;
    }

    .community-public-hero,
    .community-public-layout {
        grid-template-columns: 1fr;
    }

    .community-public-hero,
    .community-public-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .community-public-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-left: 18px;
        padding-right: 18px;
    }

    .community-public-grid {
        grid-template-columns: 1fr;
    }

    .community-public-side {
        position: static;
    }

    .community-public-heading .btn,
    .community-public-actions .btn,
    .community-public-side .btn {
        width: 100%;
    }

    .community-public-search {
        width: 100%;
    }

    .system-product-links {
        display: none;
    }

    .community-product-hero,
    .community-product-layout {
        grid-template-columns: 1fr;
    }

    .community-product-hero {
        min-height: auto;
        padding: 54px 18px 36px;
    }

    .community-product-hero h1 {
        font-size: 52px;
    }

    .community-product-hero p {
        font-size: 17px;
    }

    .community-product-live {
        padding: 16px;
    }

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

    .community-product-stats > div {
        min-height: 92px;
        padding: 18px;
        border-bottom: 1px solid rgba(127, 23, 56, 0.1);
    }

    .community-product-section {
        padding: 34px 18px 42px;
    }

    .community-product-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .community-product-side {
        position: static;
    }

    .community-feed-page .app-container {
        overflow-x: hidden;
    }

    .community-app-topbar {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        height: auto;
        min-height: 64px;
        padding: 10px 12px;
    }

    .community-brand span,
    .community-app-nav {
        display: none;
    }

    .community-brand img {
        width: 48px;
    }

    .community-top-search {
        height: 38px;
    }

    .community-post-btn {
        min-height: 38px;
        padding: 0 10px;
    }

    .community-feed-shell {
        display: block;
        width: 100%;
        padding: 12px 10px 36px;
    }

    .community-left-rail,
    .community-right-rail {
        position: static;
    }

    .community-left-rail {
        margin-bottom: 12px;
    }

    .community-user-card,
    .community-left-card:not(.community-user-card),
    .community-right-rail {
        display: none;
    }

    .community-section-nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 8px;
        margin-bottom: 12px;
    }

    .community-section-nav button {
        flex: 0 0 auto;
        min-height: 34px;
        white-space: nowrap;
    }

    .community-composer {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .community-composer .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .community-feed-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .community-feed-tabs button {
        flex: 0 0 auto;
    }

    .community-feed-post {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .community-vote-column {
        padding-top: 10px;
    }

    .community-post-main {
        padding: 12px 12px 14px;
    }

    .community-post-main h2 {
        font-size: 17px;
    }

    body.public-mode .main-content {
        padding: 0 !important;
        padding-top: 72px !important;
    }

    body.public-mode .top-nav {
        min-width: 0;
        gap: 10px;
        padding: 0 14px;
    }

    body.public-mode .brand-logo-full {
        width: 126px;
    }

    body.public-mode #publicAuth {
        gap: 8px;
        margin-left: auto;
    }

    .public-system-btn,
    .public-login-btn {
        min-height: 38px;
        padding: 0.52rem 0.68rem;
        font-size: 12px;
    }

    .public-login-btn {
        display: none;
    }

    .official-hero {
        padding: 34px 18px 22px;
    }

    .official-hero-content {
        gap: 26px;
    }

    .official-hero-copy {
        padding-bottom: 10px;
    }

    .official-hero-title {
        font-size: 40px;
        line-height: 1.16;
    }

    .official-hero-subtitle {
        font-size: 17px;
        line-height: 1.75;
    }

    .official-hero-actions {
        margin-top: 28px;
    }

    .official-primary-action,
    .official-secondary-action {
        width: 100%;
        min-width: 0;
        min-height: 50px;
    }

    .official-proof-row,
    .official-entry-stats,
    .official-entry-links,
    .official-preview-grid,
    .official-preview-bottom,
    .official-capability-strip,
    .official-flow,
    .official-data-metrics,
    .official-library-summary,
    .official-library-toolbar,
    .official-library-grid,
    .official-community-grid,
    .official-case-grid,
    .official-footer {
        grid-template-columns: 1fr;
    }

    .official-community-head {
        align-items: stretch;
        flex-direction: column;
    }

    .official-community-head .btn {
        width: 100%;
    }

    .official-preview-shell {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .official-preview-sidebar {
        display: none;
    }

    .official-preview-main {
        padding: 14px;
    }

    .official-entry-panel {
        padding: 22px;
    }

    .official-entry-head {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .official-entry-icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

    .official-entry-head strong {
        font-size: 20px;
    }

    .official-entry-stats div {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(203, 213, 225, 0.82);
    }

    .official-entry-stats div:last-child {
        border-bottom: 0;
    }

    .official-result-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .official-result-card .btn,
    .official-student-card .btn {
        width: 100%;
        justify-content: center;
    }

    .official-capability-strip {
        margin-top: 0;
        padding: 8px 18px;
    }

    .official-capability-strip div,
    .official-capability-strip div:nth-last-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid rgba(127, 23, 56, 0.12);
        padding: 16px 0;
    }

    .official-capability-strip div:last-child {
        border-bottom: 0;
    }

    .official-section {
        padding: 42px 18px;
    }

    .official-section h2,
    .official-section-heading h2 {
        font-size: 26px;
    }

    .official-data-section {
        gap: 22px;
    }

    .official-data-metrics div {
        min-height: 0;
        padding: 20px 0;
        border-left: 0;
        border-top: 1px solid rgba(127, 23, 56, 0.12);
    }

    .official-library-summary span {
        min-height: 0;
        padding: 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(203, 213, 225, 0.72);
    }

    .official-library-summary span:last-child {
        border-bottom: 0;
    }

    .official-library-tabs {
        overflow-x: auto;
        padding: 14px 14px 0;
    }

    .official-library-tabs button {
        flex: 0 0 auto;
    }

    .official-library-toolbar,
    .official-library-grid {
        padding-left: 14px;
        padding-right: 14px;
    }

    .official-library-card {
        min-height: 0;
        padding: 18px;
    }

    .official-program-breadcrumb {
        align-items: flex-start;
        flex-direction: column;
    }

    .official-program-breadcrumb div {
        text-align: left;
    }

    .official-card-link {
        width: 100%;
    }

    .official-library-pagination {
        align-items: stretch;
        flex-direction: column;
        padding: 0 14px 22px;
    }

    .official-pagination-nav {
        justify-content: space-between;
        width: 100%;
    }

    .official-pagination-pages {
        justify-content: center;
        flex: 1;
        min-width: 0;
    }

    .official-pagination-pages button:nth-of-type(n+4):not(.active) {
        display: none;
    }

    .official-pagination-jump {
        justify-content: space-between;
        width: 100%;
    }

    .official-pagination-jump input {
        flex: 1;
        width: auto;
    }

    .official-footer {
        padding: 34px 18px;
    }

    .official-footer::after {
        margin: 0 -18px -34px;
        padding: 18px;
    }
}

/* Backdrop for mobile sidebar */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 45;
    display: none;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.show {
    display: block;
}

#resultsTiered.is-stale {
    position: relative;
    opacity: 0.62;
    pointer-events: none;
}

#resultsTiered.is-stale::before {
    position: sticky;
    top: 8px;
    z-index: 4;
    display: block;
    width: fit-content;
    margin: 8px auto;
    padding: 7px 12px;
    border: 1px solid #f59e0b;
    border-radius: 999px;
    background: #fffbeb;
    color: #92400e;
    content: "画像已变化，当前结果不可保存，请重新匹配";
    font-size: 12px;
    font-weight: 800;
    pointer-events: auto;
}

.match-shortlist-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 15px;
    border: 1px solid var(--wb-line);
    border-radius: var(--wb-radius-lg);
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 42%);
    box-shadow: 0 12px 28px rgba(23, 32, 51, 0.07);
    overflow: hidden;
}

.match-shortlist-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

.match-shortlist-eyebrow {
    margin-bottom: 3px;
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.match-shortlist-title {
    color: var(--wb-ink);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
}

.match-shortlist-title span {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    min-height: 24px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 12px;
}

.match-shortlist-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.match-shortlist-clear {
    color: var(--text-secondary);
}

.match-shortlist-close {
    display: none;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
}

.match-shortlist-note {
    flex-shrink: 0;
    margin: 8px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wb-line);
    color: var(--text-light);
    font-size: 12px;
    line-height: 1.5;
}

.match-shortlist-items {
    display: grid;
    align-content: start;
    gap: 9px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
}

.match-shortlist-item {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px 44px 12px 12px;
    border: 1px solid #d9e3f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(23, 32, 51, 0.04);
}

.match-shortlist-item-school {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.match-shortlist-item-name {
    color: var(--wb-ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.match-shortlist-item-faculty {
    color: var(--text-light);
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.match-shortlist-remove {
    position: absolute;
    top: 9px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.match-shortlist-remove span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.match-shortlist-remove:hover,
.match-shortlist-remove:focus-visible {
    background: #fff1f2;
    color: #be123c;
    outline: none;
}

.match-shortlist-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 230px;
    padding: 24px 14px;
    border: 1px dashed #cbd8e8;
    border-radius: 14px;
    background: rgba(248, 251, 255, 0.72);
    color: var(--text-light);
    text-align: center;
}

.match-shortlist-empty i {
    color: #9eb4d0;
    font-size: 28px;
}

.match-shortlist-empty strong {
    color: var(--wb-ink);
    font-size: 13px;
}

.match-shortlist-empty span {
    max-width: 220px;
    font-size: 12px;
    line-height: 1.6;
}

.match-shortlist-backdrop {
    display: none;
}

.match-plan-save-modal {
    width: min(620px, calc(100vw - 32px));
}

.match-plan-save-body {
    display: grid;
    gap: 14px;
}

.match-plan-save-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.match-plan-save-summary > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.match-plan-save-summary dt {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.match-plan-save-summary dd {
    margin: 0;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.match-plan-save-warning {
    display: flex;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
    line-height: 1.6;
}

.match-results-pager {
    display: flex;
    justify-content: center;
    padding: 16px 8px 4px;
}

@media (max-width: 1024px) {
    .workbench-results-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .match-shortlist-toggle {
        display: inline-flex;
    }

    .match-shortlist-panel {
        position: fixed;
        top: calc(var(--header-height) + 12px);
        right: 12px;
        bottom: 12px;
        z-index: 72;
        width: min(360px, calc(100vw - 24px));
        min-height: 0;
        transform: translateX(calc(100% + 28px));
        opacity: 0;
        pointer-events: none;
        transition: transform 0.2s ease, opacity 0.2s ease;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
    }

    .match-shortlist-close {
        display: inline-grid;
        place-items: center;
    }

    #page-workbench.is-shortlist-drawer-open .match-shortlist-panel {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    #page-workbench.is-shortlist-drawer-open .match-shortlist-backdrop {
        position: fixed;
        inset: 0;
        z-index: 71;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, 0.26);
        cursor: default;
    }
}

@media (max-width: 760px) {
    .match-plan-save-summary {
        grid-template-columns: 1fr;
    }

    .workbench-results-toolbar {
        align-items: flex-start;
    }

    .workbench-results-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}
.user-admin-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Internal application readability uplift.
 * Public website and community typography remain independently controlled. */
body:not(.public-mode):not(.public-community-page) {
    font-size: var(--internal-ui-font-size-base);
}

body:not(.public-mode):not(.public-community-page) .form-control,
body:not(.public-mode):not(.public-community-page) .btn {
    font-size: var(--internal-ui-font-size-control);
}

body:not(.public-mode):not(.public-community-page) .btn-sm,
body:not(.public-mode):not(.public-community-page) .workbench-section-title {
    font-size: var(--internal-ui-font-size-compact);
}

body:not(.public-mode):not(.public-community-page) .form-label {
    font-size: var(--internal-ui-font-size-control);
}

body:not(.public-mode):not(.public-community-page) .form-hint,
body:not(.public-mode):not(.public-community-page) .workbench-eyebrow {
    font-size: var(--internal-ui-font-size-caption);
}

/* Browser workspaces: let narrow and short viewports scroll naturally. */
@media (max-width: 1024px) {
    .main-content,
    .workbench-grid > * {
        min-width: 0;
    }

    .top-nav {
        gap: 8px;
    }

    #mobile-menu-btn {
        flex: 0 0 44px;
        min-height: 44px;
        margin-right: 0;
    }

    .page-title,
    #userName {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-title {
        flex: 1;
        font-size: 16px;
    }

    .user-profile {
        min-width: 0;
        max-width: 55%;
        gap: 6px;
    }

    #userInfo {
        min-width: 0;
        gap: 6px !important;
    }

    #userRole {
        display: none;
    }

    #userInfo .btn {
        flex-shrink: 0;
        min-height: 44px;
        padding-inline: 8px;
    }

    .sidebar {
        width: min(280px, 85vw);
        height: 100dvh;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        overscroll-behavior-y: contain;
    }

    body.mobile-sidebar-open {
        overflow: hidden;
    }

    .sidebar-overlay {
        height: 100dvh;
    }

    .login-container {
        min-height: 0;
        overflow-y: auto;
        align-items: flex-start;
        align-items: safe center;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    input.form-control,
    select.form-control,
    textarea.form-control {
        font-size: 16px !important;
    }

    .form-control,
    .nav-link {
        min-height: 44px;
    }

    #page-profile .workbench-grid,
    #page-reports .workbench-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        min-height: 0;
        overflow: visible;
    }

    #page-profile .input-panel,
    #page-profile .results-container,
    #page-profile .results-container > .card,
    #page-profile #reports-list {
        height: auto !important;
        overflow: visible !important;
    }

    #page-reports .workbench-grid > .card {
        height: auto !important;
        min-height: 240px;
    }

    #consultationFolderList {
        max-height: 40vh;
        max-height: 40dvh;
    }

    .modal {
        padding: 12px;
    }

    .modal-content {
        width: 100%;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .modal-header,
    .modal-footer {
        padding: 12px;
        flex-shrink: 0;
        gap: 8px;
        flex-wrap: wrap;
    }

    .modal-body {
        padding: 12px;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .modal-footer .btn {
        min-height: 44px;
    }

    .project-drawer {
        width: 100%;
        max-width: 100vw;
        height: 100dvh;
    }
}

/* Source: official-lead.css */
.official-lead-section {
    padding: 64px 0;
}

.official-lead-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
    gap: 32px;
    padding: 32px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(106, 24, 48, 0.06), #fff 46%);
    box-shadow: var(--shadow-md, 0 12px 32px rgba(15, 23, 42, 0.08));
}

.official-lead-copy {
    align-self: center;
}

.official-lead-copy h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
}

.official-lead-copy p {
    margin: 0;
    color: var(--text-secondary, #64748b);
    line-height: 1.8;
}

.official-lead-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
}

.official-lead-form .form-group {
    margin: 0;
}

.official-lead-form .is-full {
    grid-column: 1 / -1;
}

.official-lead-consent {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    line-height: 1.55;
}

.official-lead-consent input {
    margin-top: 3px;
}

.official-lead-submit {
    grid-column: 1 / -1;
    min-height: 48px;
}

.official-lead-status {
    grid-column: 1 / -1;
    min-height: 22px;
    margin: 0;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
}

.official-lead-status.is-success {
    color: #047857;
}

.official-lead-status.is-error {
    color: #b91c1c;
}

.official-lead-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    .official-lead-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .official-lead-section {
        padding: 40px 0;
    }

    .official-lead-shell {
        padding: 20px;
        border-radius: 18px;
    }

    .official-lead-form {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .official-lead-form .is-full,
    .official-lead-consent,
    .official-lead-submit,
    .official-lead-status {
        grid-column: 1;
    }
}

/* Source: official-theme.css */
/* The marketing page owns these styles; the consultant workbench is unaffected. */
body.official-v2 {
    --official-wine: #801638;
    --official-ink: #142137;
    --official-muted: #526078;
    --official-line: #e6e9ee;
    color: var(--official-ink);
    background: #fff;
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}
body.official-v2 *, body.official-v2 *::before, body.official-v2 *::after { box-sizing: border-box; }
body.official-v2 .app-container { display: block; min-height: 100vh; overflow: visible; }
body.official-v2 .main-content { margin: 0; padding: 0; padding-top: 0 !important; width: 100%; max-width: none; }
body.official-v2 .official-home { overflow: clip; background: #fff; }
body.official-v2 a { text-decoration: none; }
body.official-v2 img { max-width: 100%; }
body.official-v2 [hidden] { display: none !important; }
body.official-v2 .top-nav {
    position: sticky; top: 0; z-index: 50; display: flex; width: 100%; height: 88px;
    padding: 10px max(5vw, calc((100vw - 1280px) / 2)); gap: 36px;
    background: #fff; border-bottom: 1px solid var(--official-line); box-shadow: none;
}
body.official-v2 .official-brand { display: flex; align-items: center; flex-shrink: 0; gap: 20px; color: var(--official-wine); }
body.official-v2 .official-brand img { width: 72px; height: 58px; object-fit: contain; }
body.official-v2 .official-brand span { border-left: 1px solid #d7c6cc; padding-left: 20px; font-size: 19px; font-weight: 750; white-space: nowrap; }
body.official-v2 #publicNavLinks { display: flex; align-items: center; gap: 28px; margin-right: auto; }
body.official-v2 #publicNavLinks a { color: var(--official-ink); font-size: 14px; font-weight: 650; white-space: nowrap; padding: 10px 0; }
body.official-v2 #publicNavLinks a:hover { color: var(--official-wine); }
body.official-v2 #publicAuth { display: flex; margin-left: auto; }
body.official-v2 .btn { min-height: 46px; padding: 12px 24px; border-radius: 5px; font-size: 14px; font-weight: 650; gap: 10px; box-shadow: none; white-space: nowrap; }
body.official-v2 .btn-primary { background: var(--official-wine); border-color: var(--official-wine); color: #fff; }
body.official-v2 .btn-primary:hover { background: #64102b; border-color: #64102b; }
body.official-v2 .btn-outline { color: var(--official-wine); border-color: #d8c6cc; background: #fff; }
body.official-v2 .official-menu-toggle { display: none; }
body.official-v2 .official-hero { margin: 0; padding: 0; min-height: 0; border-radius: 0; background: #f8f9fb; isolation: isolate; scroll-margin-top: 88px; }
body.official-v2 .official-hero::before, body.official-v2 .official-hero::after { display: none; }
body.official-v2 .official-hero-content { display: grid; grid-template-columns: 0.9fr 1.1fr; max-width: 1280px; min-height: 680px; margin: auto; padding: 60px 0; gap: 54px; align-items: center; }
body.official-v2 .official-hero-copy { min-width: 0; padding: 0; }
body.official-v2 .official-kicker { color: #394963; margin: 0 0 22px; font-size: 16px; }
body.official-v2 h1 { font-size: clamp(38px, 4.3vw, 64px); line-height: 1.27; letter-spacing: -2px; color: var(--official-wine); font-weight: 800; margin: 0 0 24px; }
body.official-v2 .official-hero-subtitle { font-size: 20px; line-height: 1.8; margin: 0; max-width: 540px; color: var(--official-ink); }
body.official-v2 .official-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 32px 0 0; }
body.official-v2 .official-hero-actions .btn { padding: 16px 28px; font-size: 16px; }
body.official-v2 .official-text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--official-wine); font-size: 15px; font-weight: 650; }
body.official-v2 .official-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
body.official-v2 .official-proof-row { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 56px 0 0; padding: 0; border: 0; }
body.official-v2 .official-proof-row li { display: flex; gap: 10px; flex: 1; min-width: 126px; align-items: flex-start; }
body.official-v2 .official-proof-row i { font-size: 25px; color: var(--official-wine); line-height: 1.2; }
body.official-v2 .official-proof-row strong, body.official-v2 .official-proof-row span { display: block; font-size: 13px; line-height: 1.6; }
body.official-v2 .official-proof-row span { color: var(--official-muted); }
body.official-v2 figure { margin: 0; }
body.official-v2 .official-workbench-figure { min-width: 0; scroll-margin-top: 110px; }
body.official-v2 .official-workbench-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--official-line); border-radius: 9px; box-shadow: 0 18px 42px #1b2a4317; }
body.official-v2 figcaption { margin-top: 14px; color: var(--official-muted); font-size: 12px; text-align: center; }
body.official-v2 .official-section { max-width: 1280px; padding: 64px 0; margin: auto; scroll-margin-top: 105px; }
body.official-v2 .official-section h2 { color: var(--official-ink); font-size: 28px; font-weight: 750; line-height: 1.45; margin: 0 0 16px; }
body.official-v2 .official-flow-section { padding: 48px 0 56px; }
body.official-v2 .official-flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 32px 0 0; list-style: none; }
body.official-v2 .official-flow-steps li { display: flex; align-items: flex-start; gap: 18px; }
body.official-v2 .official-flow-steps li > i { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; background: #faf1f4; color: var(--official-wine); font-size: 27px; }
body.official-v2 .official-flow-steps h3 { margin: 6px 0 12px; font-size: 17px; }
body.official-v2 .official-flow-steps p { margin: 0; color: var(--official-muted); font-size: 14px; line-height: 1.8; }
body.official-v2 .official-report-section { background: #f8f9fb; scroll-margin-top: 90px; }
body.official-v2 .official-report-layout { max-width: 1280px; margin: auto; display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 54px; padding: 48px 0; }
body.official-v2 .official-report-copy h2 { margin: 0 0 22px; font-size: 46px; letter-spacing: -1.5px; line-height: 1.3; }
body.official-v2 .official-report-copy > p:not(.official-kicker) { max-width: 460px; color: var(--official-muted); margin: 0 0 28px; font-size: 16px; line-height: 1.9; }
body.official-v2 .official-report-figure img { width: 100%; height: auto; display: block; }
body.official-v2 .official-resources > p { color: var(--official-muted); margin: 0 0 28px; }
body.official-v2 .official-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
body.official-v2 .official-resource-grid > a { display: flex; gap: 24px; padding: 28px; border: 1px solid var(--official-line); border-radius: 6px; color: var(--official-ink); transition: border-color .15s; }
body.official-v2 .official-resource-grid > a:hover { border-color: var(--official-wine); }
body.official-v2 .official-resource-grid > a > i { color: var(--official-wine); font-size: 30px; }
body.official-v2 .official-resource-grid h3 { font-size: 18px; margin: 3px 0 14px; }
body.official-v2 .official-resource-grid p { color: var(--official-muted); font-size: 14px; margin: 0 0 20px; }
body.official-v2 .official-resource-grid span { color: var(--official-wine); font-size: 13px; font-weight: 650; }
body.official-v2 .official-library-section { border-top: 1px solid var(--official-line); padding-top: 48px; }
body.official-v2 .official-section-heading { max-width: 780px; margin: 0 0 28px; text-align: left; }
body.official-v2 .official-section-heading p { color: var(--official-muted); font-size: 15px; line-height: 1.8; }
body.official-v2 .official-library-panel, body.official-v2 .official-community-panel { background: #fff; border: 1px solid var(--official-line); border-radius: 8px; box-shadow: none; padding: 24px; }
body.official-v2 .official-library-grid { gap: 18px; }
body.official-v2 .official-library-card, body.official-v2 .official-community-card { background: #fafbfc; border: 1px solid var(--official-line); box-shadow: none; border-radius: 6px; }
body.official-v2 .official-library-tabs button { min-height: 44px; }
body.official-v2 .official-library-summary { margin-bottom: 22px; }
body.official-v2 .official-community-section { border-top: 1px solid var(--official-line); }
body.official-v2 .official-community-head { gap: 20px; }
body.official-v2 .official-bottom-cta { background: var(--official-wine); color: white; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 48px max(5vw, calc((100vw - 1280px) / 2)); }
body.official-v2 .official-bottom-cta h2 { color: #fff; font-size: 30px; line-height: 1.5; margin: 0 0 10px; }
body.official-v2 .official-bottom-cta p { margin: 0; color: #f0dae2; font-size: 15px; }
body.official-v2 .official-bottom-cta .btn { color: var(--official-wine); background: #fff; border: 1px solid #fff; padding: 17px 30px; font-size: 16px; }
body.official-v2 .official-footer { max-width: 1280px; margin: auto; padding: 36px 0; display: flex; align-items: center; justify-content: space-between; gap: 28px; background: white; border: 0; }
body.official-v2 .official-footer::after { display: none; }
body.official-v2 .official-footer .official-brand span { display: inline; color: var(--official-wine); }
body.official-v2 .official-footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
body.official-v2 .official-footer-links a { color: var(--official-muted); font-size: 13px; }
body.official-v2 .official-footer p { font-size: 12px; color: var(--official-muted); margin: 0; }
body.official-v2 .official-footer small { display: block; margin-top: 6px; font-size: 11px; }
body.official-v2 .official-report-dialog { border: 1px solid var(--official-line); border-radius: 12px; padding: 24px; width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); color: var(--official-ink); }
body.official-v2 .official-report-dialog::backdrop { background: #14213799; }
body.official-v2 .official-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
body.official-v2 .official-dialog-heading h2 { font-size: 22px; margin: 0; }
body.official-v2 .official-report-dialog > p { font-size: 14px; color: var(--official-muted); }
body.official-v2 .official-report-dialog img { width: 100%; height: auto; }
body.official-v2 .official-skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; background: #fff; padding: 12px; color: var(--official-wine); }
body.official-v2 .official-skip-link:focus { top: 12px; }
body.official-v2 :focus-visible { outline: 3px solid #a3385e; outline-offset: 4px; }
@media (max-width: 1390px) {
    body.official-v2 .official-hero-content, body.official-v2 .official-section, body.official-v2 .official-report-layout, body.official-v2 .official-footer { margin-left: 5vw; margin-right: 5vw; }
}
@media (max-width: 1050px) {
    body.official-v2 .top-nav { gap: 20px; }
    body.official-v2 #publicNavLinks { gap: 18px; }
    body.official-v2 .official-brand { gap: 12px; }
    body.official-v2 .official-brand span { padding-left: 12px; font-size: 16px; }
    body.official-v2 .official-hero-content, body.official-v2 .official-report-layout { gap: 30px; }
    body.official-v2 .official-hero-content { min-height: 600px; }
    body.official-v2 .official-proof-row { gap: 14px; margin-top: 34px; }
    body.official-v2 .official-proof-row li { min-width: 112px; }
    body.official-v2 .official-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.official-v2 .official-footer { flex-wrap: wrap; }
}
@media (max-width: 760px) {
    body.official-v2 .top-nav { height: 72px; padding: 8px 5vw; gap: 12px; }
    body.official-v2 .official-brand img { width: 53px; height: 46px; }
    body.official-v2 .official-brand span { font-size: 14px; }
    body.official-v2 .official-menu-toggle { display: inline-flex; order: 3; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--official-line); background: #fff; color: var(--official-ink); border-radius: 4px; font-size: 22px; flex-shrink: 0; }
    body.official-v2 #publicAuth .btn { min-height: 42px; padding: 9px 12px; font-size: 12px; }
    body.official-v2 #publicAuth .btn i { display: none; }
    body.official-v2 #publicNavLinks { display: none; position: absolute; left: 0; top: 72px; width: 100%; padding: 12px 5vw 20px; margin: 0; background: white; border-bottom: 1px solid var(--official-line); box-shadow: 0 10px 20px #1421370d; }
    body.official-v2 #publicNavLinks.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
    body.official-v2 #publicNavLinks a { padding: 10px 0; }
    body.official-v2 .official-hero-content { grid-template-columns: 1fr; padding: 40px 0; gap: 36px; }
    body.official-v2 h1 { font-size: clamp(34px, 7.8vw, 52px); letter-spacing: -1px; }
    body.official-v2 .official-kicker { font-size: 14px; margin-bottom: 18px; }
    body.official-v2 .official-hero-subtitle { font-size: 16px; }
    body.official-v2 .official-hero-actions { gap: 20px; margin-top: 26px; }
    body.official-v2 .official-hero-actions .btn { font-size: 14px; padding: 13px 20px; }
    body.official-v2 .official-text-link { font-size: 14px; }
    body.official-v2 .official-proof-row { gap: 12px; }
    body.official-v2 .official-proof-row li { min-width: 0; gap: 7px; }
    body.official-v2 .official-proof-row strong, body.official-v2 .official-proof-row span { font-size: 11px; }
    body.official-v2 .official-proof-row i { font-size: 21px; }
    body.official-v2 .official-section { padding-top: 38px; padding-bottom: 38px; scroll-margin-top: 85px; }
    body.official-v2 .official-section h2 { font-size: 23px; }
    body.official-v2 .official-flow-steps { gap: 26px 18px; }
    body.official-v2 .official-flow-steps li { flex-direction: column; gap: 10px; }
    body.official-v2 .official-flow-steps h3 { margin: 0 0 7px; font-size: 16px; }
    body.official-v2 .official-flow-steps p { font-size: 13px; }
    body.official-v2 .official-report-layout { grid-template-columns: 1fr; padding: 38px 0; gap: 28px; }
    body.official-v2 .official-report-copy h2 { font-size: 34px; }
    body.official-v2 .official-report-copy > p:not(.official-kicker) { font-size: 15px; }
    body.official-v2 .official-resource-grid { grid-template-columns: 1fr; gap: 12px; }
    body.official-v2 .official-resource-grid > a { padding: 22px; }
    body.official-v2 .official-resource-grid h3 { margin: 0 0 7px; }
    body.official-v2 .official-resource-grid p { margin-bottom: 10px; }
    body.official-v2 .official-library-panel, body.official-v2 .official-community-panel { padding: 16px; }
    body.official-v2 .official-library-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    body.official-v2 .official-library-search { grid-column: 1 / -1; min-width: 0; }
    body.official-v2 .official-library-toolbar select { min-width: 0; width: 100%; }
    body.official-v2 .official-library-summary { flex-wrap: wrap; gap: 8px 16px; }
    body.official-v2 .official-library-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
    body.official-v2 .official-library-tabs button { padding: 8px 12px; font-size: 13px; }
    body.official-v2 .official-community-head { flex-direction: column; align-items: flex-start; }
    body.official-v2 .official-bottom-cta { flex-direction: column; align-items: flex-start; padding: 34px 5vw; gap: 24px; }
    body.official-v2 .official-bottom-cta h2 { font-size: 24px; }
    body.official-v2 .official-footer { align-items: flex-start; flex-direction: column; padding: 28px 0; gap: 20px; }
    body.official-v2 .official-report-dialog { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body.official-v2 *, body.official-v2 *::before, body.official-v2 *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Source: mobile.css */
/* Shared phone presentation. Screen-only rules preserve report printing. */
@media screen and (max-width: 1024px) {
    :root {
        --primary-color: #007aff;
        --primary-hover: #0062cc;
        --bg-body: #f2f2f7;
        --bg-surface: #ffffff;
        --text-main: #1c1c1e;
        --text-secondary: #636366;
        --border-color: #e5e5ea;
        --wb-bg: #f2f2f7;
        --wb-panel: #ffffff;
        --wb-panel-soft: #f8f8fa;
        --wb-ink: #1c1c1e;
        --wb-muted: #636366;
        --wb-line: #e5e5ea;
        --wb-brand: #007aff;
        --wb-brand-soft: #eef5ff;
        --header-height: calc(64px + env(safe-area-inset-top, 0px));
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f2f2f7;
        color: #1c1c1e;
        -webkit-text-size-adjust: 100%;
        line-height: 1.55;
    }

    [hidden] {
        display: none !important;
    }

    .main-content {
        width: 100%;
        min-width: 0;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }

    .top-nav {
        padding-top: env(safe-area-inset-top);
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        background: rgba(250, 250, 252, 0.96);
        border-bottom-color: #e5e5ea;
    }

    .page-view,
    .page-view .card,
    .page-view .table-container,
    .modal-body,
    .report-content,
    .report-product {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .card,
    .workbench-panel,
    .workbench-plan-bar,
    .crm-customer-panel {
        border-radius: 18px;
        border-color: #e5e5ea;
        box-shadow: 0 2px 10px rgba(28, 28, 30, 0.035);
    }

    .card-header,
    .filter-bar,
    .workbench-results-toolbar,
    .workbench-plan-actions,
    .crm-customer-panel-head,
    .crm-section-head,
    .crm-form-actions,
    .profile-report-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .page-view .card-header {
        align-items: flex-start;
    }

    .btn {
        border-radius: 12px;
        min-width: 44px;
        box-shadow: none;
        white-space: normal;
    }

    button,
    .btn,
    .nav-link,
    .report-button,
    .community-section-nav button,
    .community-feed-tabs button,
    .project-detail-tabs button {
        min-height: 44px !important;
        min-width: 44px;
        touch-action: manipulation;
    }

    .btn:hover,
    .btn-primary:hover {
        transform: none;
    }

    .btn:active {
        opacity: 0.78;
    }

    .crm-customer-search .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    .form-control {
        min-width: 0;
        max-width: 100%;
        font-size: 16px !important;
    }

    .form-control,
    .community-top-search {
        min-height: 44px;
        border-radius: 12px;
    }

    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
        align-content: center;
    }

    .nav-link {
        border-radius: 12px;
    }

    .nav-link.active {
        background: #eef5ff;
        color: #0062cc;
    }

    .sidebar {
        padding-top: max(16px, env(safe-area-inset-top));
        background: #fafafc;
    }

    .sidebar-overlay {
        background: rgba(28, 28, 30, 0.32);
    }

    .mobile-stack,
    .grid-2,
    #aiPackagePlatformPanel,
    #aiPackageOrgPanel,
    #aiAllocationGroupForm,
    #aiTemplateForm,
    #aiUserAllocationForm,
    #orgMemberInviteComposer,
    .project-detail-metrics,
    .project-detail-compare,
    .project-detail-evidence-grid,
    .case-detail-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mobile-stack > *,
    .grid-2 > *,
    .crm-customer-shell > *,
    .community-main-grid > *,
    .advisor-crm-queues > * {
        min-width: 0;
    }

    .table-container,
    .overview-table-wrap,
    .compare-table-wrap,
    .report-product-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-container .btn {
        white-space: nowrap;
    }

    .custom-table th,
    .custom-table td {
        overflow-wrap: normal;
        word-break: normal;
    }

    #userTable {
        min-width: 1040px;
    }

    #userTable th:nth-child(2),
    #userTable td:nth-child(2) {
        min-width: 160px;
    }

    .toast-container {
        top: auto;
        bottom: max(16px, env(safe-area-inset-bottom));
        left: 16px;
        right: 16px;
    }

    .toast-message {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 12px 16px;
        border-radius: 16px;
        pointer-events: none;
    }

    body.has-support-org-context {
        --header-height: calc(112px + env(safe-area-inset-top, 0px));
    }

    .has-support-org-context .top-nav {
        flex-wrap: wrap;
        align-content: center;
        row-gap: 0;
    }

    .has-support-org-context .support-org-top-banner {
        order: 4;
        flex: 1 0 100%;
        min-height: 44px;
        max-width: none;
        margin-left: 0;
    }

    #page-workbench #resultsTiered,
    #page-workbench .results-section > .result-col,
    #page-workbench #resultsOfficial,
    #page-workbench #resultsInternal {
        max-height: none;
        height: auto;
        overflow-y: visible;
    }

    #page-profile .profile-report-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .project-detail-hero,
    .project-detail-actions,
    .drawer-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .drawer-header {
        padding: 16px;
        padding-top: max(16px, env(safe-area-inset-top));
    }

    .drawer-content {
        min-height: 0;
        padding: 16px;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .project-drawer {
        width: 100%;
        max-width: 100vw;
        height: 100dvh;
    }

    .modal-content,
    .login-card {
        border-radius: 22px;
    }

    .modal-header h3 {
        flex: 1;
        min-width: 0;
    }

    .modal-header > button {
        min-width: 44px;
        flex-shrink: 0;
    }

    .modal-body .mobile-stack {
        gap: 12px;
    }

    .modal-content > form {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
    }

    .modal-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .login-container {
        background: #f2f2f7;
    }

    .login-container::before {
        display: none;
    }

    .login-showcase {
        padding: 0;
    }

    .login-brand-row {
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }

    .login-brand-logo {
        width: 64px;
        border-radius: 14px;
    }

    .login-product-name {
        font-size: 22px;
    }

    .login-product-name br {
        display: none;
    }

    .login-product-sub {
        font-size: 12px;
        margin-top: 4px;
    }

    .login-card {
        padding: 24px 20px;
        box-shadow: 0 4px 24px rgba(28, 28, 30, 0.04);
    }

    .login-card-head h2 {
        font-size: 24px;
    }

    .official-hero-title,
    .community-product-hero h1 {
        font-size: clamp(28px, 8vw, 38px);
        letter-spacing: -0.025em;
    }

    .official-entry-panel,
    .official-library-card,
    .community-feed-post,
    .community-composer,
    .community-post-dialog {
        border-radius: 18px;
        border-color: #e5e5ea;
    }

    .community-feed-page {
        background: #f2f2f7;
    }

    .community-feed-post {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .community-app-topbar {
        padding-top: max(10px, env(safe-area-inset-top));
        background: rgba(250, 250, 252, 0.96);
    }

    .community-top-search input {
        width: 100%;
    }

    .community-feed-shell,
    .community-post-main,
    .community-composer > * {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .community-section-nav,
    .community-feed-tabs {
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: 12px;
    }

    .client-report-app {
        padding: 12px 12px max(28px, env(safe-area-inset-bottom));
    }

    .report-content {
        padding: 18px;
        border-radius: 20px;
    }

    .report-product {
        padding: 18px;
        border-radius: 20px;
        border-color: #e5e5ea;
    }

    .report-content .report-actions,
    .client-report-feedback-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .report-product-course-grid,
    .program-grid,
    .project-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .client-report-title {
        font-size: 28px;
        letter-spacing: -0.02em;
    }

    .report-button {
        border-radius: 12px;
    }
}

@media screen and (max-width: 1024px) and (max-height: 480px) {
    .login-showcase {
        display: none;
    }

    .login-layout {
        gap: 0;
    }
}