/**
 * OMBoxOS page patterns extracted from QQ-language program pages.
 *
 * Purpose:
 * - Keep the polished page/content visual language reusable.
 * - Load after ombox-framework.css and before module CSS.
 * - Module CSS remains the final override for page-specific details.
 */

/* Page header */
.page-header,
.om-page-header {
    margin-bottom: 32px;
}

.ombox-save-feedback,
.ombox-page-content .alert[role="status"],
.ombox-page-content [aria-live="polite"].alert,
.ombox-page-content [class*="feedback"].alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, .5rem);
    width: 100%;
    margin: var(--space-3, .75rem) 0 0;
    padding: var(--space-2, .5rem) var(--space-3, .75rem);
    border: var(--border-width-thin, 1px) solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 8px);
    font-size: var(--widget-small-font-size, .875rem);
    line-height: var(--widget-small-line-height, 1.5);
}

.ombox-save-feedback:empty,
.ombox-save-feedback[hidden],
.ombox-page-content [class*="feedback"].alert:empty,
.ombox-page-content [class*="feedback"].alert[hidden] {
    display: none;
}

.ombox-save-feedback.ombox-alert-info,
.ombox-page-content .alert.alert-info[role="status"],
.ombox-page-content [aria-live="polite"].alert.alert-info,
.ombox-page-content [class*="feedback"].alert.alert-info {
    background: var(--color-info-light, rgba(23, 162, 184, .1));
    color: var(--color-info, #17a2b8);
    border-color: var(--color-info, #17a2b8);
}

.ombox-save-feedback.ombox-alert-success,
.ombox-page-content .alert.alert-success[role="status"],
.ombox-page-content [aria-live="polite"].alert.alert-success,
.ombox-page-content [class*="feedback"].alert.alert-success {
    background: var(--color-success-light, rgba(0, 162, 86, .1));
    color: var(--color-success, #00a256);
    border-color: var(--color-success, #00a256);
}

.ombox-save-feedback.ombox-alert-warning,
.ombox-page-content .alert.alert-warning[role="status"],
.ombox-page-content [aria-live="polite"].alert.alert-warning,
.ombox-page-content [class*="feedback"].alert.alert-warning {
    background: var(--color-warning-light, rgba(255, 165, 0, .1));
    color: var(--color-warning, #ffa500);
    border-color: var(--color-warning, #ffa500);
}

.ombox-save-feedback.ombox-alert-danger,
.ombox-page-content .alert.alert-danger[role="status"],
.ombox-page-content [aria-live="polite"].alert.alert-danger,
.ombox-page-content [class*="feedback"].alert.alert-danger {
    background: var(--color-danger-light, rgba(255, 0, 0, .1));
    color: var(--color-danger, #f00);
    border-color: var(--color-danger, #f00);
}

.page-title,
.om-page-title {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
}

.page-subtitle,
.om-page-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.om-page-header-row,
.settings-page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* Content containers */
.om-page,
.settings-page {
    max-width: 1120px;
    margin: 0 auto;
}

.om-section,
.settings-section {
    display: grid;
    gap: 20px;
}

.om-panel,
.settings-panel,
.dashboard-stat-panel,
.store-table-panel {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.om-panel,
.settings-panel {
    padding: 22px;
}

.om-panel-header,
.settings-panel-header,
.dashboard-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.om-panel-header h2,
.settings-panel-header h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.om-panel-header p,
.settings-panel-header p,
.dashboard-panel-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* Stats */
.stats-grid,
.om-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card,
.om-stat-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon,
.om-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.stat-icon-primary,
.om-stat-icon-primary {
    background: rgba(102, 126, 234, 0.1);
    color: var(--primary-color);
}

.stat-icon-success,
.om-stat-icon-success {
    background: rgba(72, 187, 120, 0.1);
    color: var(--success-color);
}

.stat-icon-info,
.om-stat-icon-info {
    background: rgba(66, 153, 225, 0.1);
    color: var(--info-color);
}

.stat-icon-warning,
.om-stat-icon-warning {
    background: rgba(237, 137, 54, 0.1);
    color: var(--warning-color);
}

.stat-content,
.om-stat-content {
    min-width: 0;
}

.stat-value,
.om-stat-value {
    font-size: 24px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-label,
.om-stat-label {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Section headings */
.section-heading,
.om-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.section-title,
.om-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.section-heading span,
.om-section-heading span {
    color: var(--text-secondary);
    font-size: 13px;
}

.section-divider,
.om-section-divider {
    height: 1px;
    margin: 0 0 24px;
    background: var(--border-color);
}

/* Entry cards */
.action-grid,
.settings-card-grid,
.om-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.settings-card-grid,
.om-entry-grid-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.action-card,
.settings-entry-card,
.settings-link-item,
.om-entry-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.action-card:hover,
.settings-entry-card:hover,
.settings-link-item:hover,
.om-entry-card:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.action-card {
    padding: 20px;
    text-align: center;
}

.settings-entry-card,
.om-entry-card {
    min-height: 168px;
    padding: 20px;
    display: grid;
    grid-template-columns: 44px 1fr 18px;
    align-items: flex-start;
    gap: 14px;
}

.settings-link-item,
.om-link-item {
    min-height: 86px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 44px 1fr 14px;
    align-items: center;
    gap: 16px;
}

.action-icon,
.settings-entry-icon,
.settings-link-icon,
.om-entry-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eef2ff;
    color: var(--primary-color);
    font-size: 18px;
}

.action-title,
.settings-entry-body h2,
.settings-link-item-main h2,
.om-entry-title {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
}

.settings-entry-body p,
.settings-link-item-main p,
.om-entry-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* Toolbar and filters */
.browse-toolbar,
.om-filter-toolbar {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
}

.program-main-layout > .program-navbar-content-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    padding: 0 0;
}

.program-main-layout > .program-navbar-content-toolbar.navbar {
    position: static !important;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    background: transparent;
    border: 0;
    z-index: auto;
}

.program-main-layout > .program-navbar-content-toolbar .customer-toolbar-left,
.program-main-layout > .program-navbar-content-toolbar .customer-toolbar-right {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-wrap: wrap;
    gap: 10px;
}

.program-main-layout > .program-navbar-content-toolbar .customer-toolbar-right {
    justify-content: flex-end;
}

.program-main-layout > .program-navbar-content-toolbar .btn {
    min-height: 34px;
    padding: .32rem .75rem;
}

.program-main-layout > .program-navbar-content-toolbar .customer-title h1 {
    margin: 0 0 4px;
    font-size: 1.5rem;
}

.program-main-layout > .program-navbar-content-toolbar .customer-title .text-muted {
    font-size: .875rem;
}

.program-main-layout > .program-main-content .customer-panel {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
}

.program-main-layout > .program-main-content .table td,
.program-main-layout > .program-main-content .table th {
    vertical-align: middle;
}

body.eye-protection .program-main-layout > .program-main-content .customer-panel {
    background: #faf8f3;
    border-color: #d9cbb8;
    color: #4a3c28;
}

.browse-search,
.om-filter-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px 130px auto auto;
    gap: 10px;
    align-items: center;
}

/* Tables */
.settings-table-wrap,
.om-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.store-table-panel,
.om-table-panel {
    overflow: hidden;
}

.store-table,
.settings-user-table,
.om-data-table {
    width: 100%;
    border-collapse: collapse;
}

/*
 * Default list/table surfaces stay white in the normal theme.
 * State styles (active, selected, warning, danger, striped, etc.) and
 * later-loaded Widget/module assets remain free to provide semantic colors.
 */
body:not(.eye-protection) .list-group {
    --bs-list-group-bg: var(--color-white, #fff);
    --bs-list-group-action-hover-bg: #f8fafc;
}

body:not(.eye-protection) .table {
    --bs-table-bg: var(--color-white, #fff);
    --bs-table-hover-bg: #f8fafc;
}

body:not(.eye-protection) .card > .card-header.bg-light {
    background-color: var(--color-white, #fff) !important;
}

.store-table thead th,
.settings-user-table th,
.om-data-table th {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--color-white, #fff);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.store-table tbody td,
.settings-user-table td,
.om-data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    color: var(--text-primary);
    vertical-align: middle;
}

.store-table tbody tr:last-child td,
.settings-user-table tr:last-child td,
.om-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.store-table tbody tr:hover,
.settings-user-table tbody tr:hover,
.om-data-table tbody tr:hover {
    background: #f8fafc;
}

.clickable-row,
.om-clickable-row {
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.clickable-row:hover,
.clickable-row:focus,
.om-clickable-row:hover,
.om-clickable-row:focus {
    background: #f8fafc;
    box-shadow: inset 3px 0 0 var(--primary-color);
    transform: translateY(-1px);
    outline: none;
}

.table-subtext,
.om-table-subtext {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-weight: 400;
    overflow-wrap: anywhere;
}

/* Forms and buttons */
.settings-form,
.om-form {
    display: grid;
    gap: 16px;
}

.settings-form-grid,
.settings-grid-two,
.om-form-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-field,
.om-field {
    display: grid;
    gap: 8px;
    margin: 0;
}

.settings-field span,
.om-field span {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.settings-field input,
.settings-field select,
.om-field input,
.om-field select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--text-primary);
    font-size: 14px;
}

.settings-actions,
.om-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.settings-btn,
.om-btn {
    min-height: var(--widget-control-min-height, 38px);
    padding: 0 var(--widget-control-padding-x, 12px);
    border: 1px solid var(--border-color);
    border-radius: var(--widget-control-radius, var(--radius-md, 8px));
    background: #fff;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-btn:hover,
.om-btn:hover {
    background: var(--bg-gray);
}

.settings-btn-primary,
.om-btn-primary {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

.settings-btn-danger,
.om-btn-danger {
    border-color: var(--danger-color);
    background: var(--danger-color);
    color: #fff;
}

/* ===== Dynamic behavior empty page ===== */
.ombox-dynamic-empty-page {
    display: grid;
    min-height: min(520px, calc(100vh - 160px));
    align-items: center;
    padding: 24px;
}

.ombox-dynamic-empty-panel {
    display: grid;
    gap: 10px;
    justify-items: center;
    max-width: 520px;
    margin: 0 auto;
    padding: 36px 28px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    background: var(--bg-white, #fff);
    color: var(--text-primary, #202733);
    text-align: center;
}

.ombox-dynamic-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eef7ff;
    color: #0087f7;
    font-size: 18px;
}

.ombox-dynamic-empty-panel h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.ombox-dynamic-empty-panel p {
    margin: 0;
    color: var(--text-secondary, #64748b);
    font-size: 14px;
    line-height: 1.5;
}

body.eye-protection .ombox-dynamic-empty-panel {
    background: var(--bg-card, #fbfefb);
    border-color: var(--border-color, #cfe3d2);
    color: var(--text-primary, #24422f);
}

body.eye-protection .ombox-dynamic-empty-icon {
    background: var(--bg-gray, #edf7ee);
    color: var(--primary-color, #4f9d69);
}

body.eye-protection .ombox-dynamic-empty-panel p {
    color: var(--text-secondary, #52695a);
}

/* Mobile / H5 responsive behavior */
@media (max-width: 992px) {
    .settings-card-grid,
    .om-entry-grid-wide,
    .settings-form-grid,
    .settings-grid-two,
    .om-form-grid-two {
        grid-template-columns: 1fr;
    }

    .browse-search,
    .om-filter-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .page-title,
    .om-page-title {
        font-size: 24px;
    }

    .om-panel,
    .settings-panel {
        padding: 18px;
    }

    .om-panel-header,
    .settings-panel-header,
    .om-page-header-row,
    .settings-page-header-row {
        flex-direction: column;
    }

    .settings-actions,
    .om-actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .settings-btn,
    .om-btn {
        width: 100%;
    }

    .ombox-dynamic-empty-page {
        min-height: calc(100vh - 140px);
        padding: 18px 12px calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .ombox-dynamic-empty-panel {
        width: 100%;
        padding: 28px 20px;
        border-radius: 8px;
    }
}

/* ===== Program dynamic browse content gutter ===== */
@media (min-width: 768px) {
    body.program-shell-layout.ombox-dynamic-page
    > .container
    > .content.ombox-page-content:has(.ombox-dynamic-browse-shell) {
        padding: var(--space-4, 16px);
    }
}

/* ===== Dynamic page sidebar shell ===== */
body.ombox-dynamic-page .ombox-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-primary, #2d3748);
    top: 0;
    z-index: var(--z-sidebar);
    transition: width .3s ease, transform .3s ease;
}
body.ombox-dynamic-page .sidebar-header {
    height: var(--navbar-height, 56px);
    min-height: var(--navbar-height, 56px);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
body.ombox-dynamic-page .sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    height: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 4px 6px;
    color: var(--text-primary, #2d3748);
    background: transparent;
    border: 0;
    border-radius: 7px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}
body.ombox-dynamic-page .sidebar-brand:hover {
    background: rgba(0, 135, 247, .08);
    color: #0087f7;
}
body.ombox-dynamic-page .sidebar-brand-logo {
    display: block;
    width: var(--sidebar-logo-width, 184px);
    max-width: 150px;
    height: var(--sidebar-logo-height, 36px);
    flex-shrink: 0;
    object-fit: contain;
}
body.ombox-dynamic-page .sidebar-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.ombox-dynamic-page .ombox-sidebar .brand-text {
    color: var(--text-primary, #2d3748);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}
body.ombox-dynamic-page .sidebar-collapsed-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 135, 247, .08);
    color: #4a5568;
    cursor: pointer;
}
body.ombox-dynamic-page .sidebar-collapsed-toggle:hover {
    background: rgba(0, 135, 247, .14);
    color: #0087f7;
}
body.ombox-dynamic-page .sidebar-collapsed-toggle .sidebar-toggle-mark {
    width: 16px;
    height: 11px;
}
body.ombox-dynamic-page .sidebar-footer {
    background: #ffffff;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
body.ombox-dynamic-page .ombox-sidebar .system-status {
    color: var(--text-secondary, #718096);
}
@media (min-width: 769px) {
    body.ombox-dynamic-page nav.navbar #sidebarOpenBtn {
        display: none !important;
    }
}
body.ombox-dynamic-page .ombox-sidebar.collapsed {
    width: var(--sidebar-collapsed-width, 64px);
    transform: none;
}
body.ombox-dynamic-page .content.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed-width, 64px) !important;
}
body.ombox-dynamic-page.sidebar-collapsed .footer-container {
    margin-left: var(--sidebar-collapsed-width, 64px);
}
body.ombox-dynamic-page .ombox-sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 12px 8px;
}
body.ombox-dynamic-page .ombox-sidebar.collapsed .sidebar-brand,
body.ombox-dynamic-page .ombox-sidebar.collapsed .sidebar-brand-copy,
body.ombox-dynamic-page .ombox-sidebar.collapsed .status-text {
    display: none !important;
}
body.ombox-dynamic-page .ombox-sidebar.collapsed .sidebar-collapsed-toggle {
    display: inline-flex;
}

/* ==================== Login Page - 极简风格 ==================== */
.ombox-login-body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    background: #F5F5F5;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.ombox-auth-surface-body {
    min-height: 100vh;
    min-height: 100dvh;
    overscroll-behavior-x: none;
    touch-action: manipulation;
}

.ombox-auth-surface-body *,
.ombox-auth-surface-body *::before,
.ombox-auth-surface-body *::after {
    box-sizing: border-box;
}

.login-page {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F5F5;
    padding: calc(20px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
    overflow-x: clip;
}

.login-container {
    width: 100%;
    max-width: 400px;
    min-width: 0;
}

.login-card {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    padding: 48px 40px;
}

/* Logo 和标题 */
.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo {
    width: 120px;
    height: auto;
    object-fit: contain;
    margin-bottom: 20px;
}

.login-title {
    font-size: 24px;
    font-weight: 600;
    color: #4B5563;
    margin: 0;
}

/* 错误提示 */
.login-error,
.login-feedback {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-error,
.login-feedback--danger {
    border: 1px solid #FCA5A5;
    background: #FEF2F2;
    color: #DC2626;
}

.login-feedback--success {
    border: 1px solid #86D5A5;
    background: #ECFDF3;
    color: #166534;
}

.login-feedback--info {
    border: 1px solid #93C5FD;
    background: #EFF6FF;
    color: #1D4ED8;
}

.login-error i {
    flex-shrink: 0;
}

/* 表单 */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.field-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    color: #1F2937;
    background: #FFFFFF;
    transition: all 0.2s;
    outline: none;
}

.field-input::placeholder {
    color: #9CA3AF;
}

.field-input:focus {
    border-color: #0087F7;
    box-shadow: 0 0 0 3px rgba(0, 135, 247, 0.1);
}

.auth-register-form {
    gap: 18px;
    --widget-control-min-height: 44px;
    --form-control-height: 44px;
}

.auth-register-form .ombox-field-input.form-field {
    gap: 8px;
}

.auth-register-form .ombox-field-input .form-control,
.auth-register-form .ombox-field-input .admin-system-form-control {
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    color: #1F2937;
    font-size: 14px;
}

.auth-register-form .ombox-field-input .form-control:focus,
.auth-register-form .ombox-field-input .admin-system-form-control:focus {
    border-color: #0087F7;
    box-shadow: 0 0 0 3px rgba(0, 135, 247, 0.1);
}

.auth-register-form .ombox-field-input-adorned {
    height: 44px;
    min-height: 44px;
    align-items: stretch;
}

.auth-register-form .ombox-field-input-adorned > .form-control,
.auth-register-form .ombox-field-input-adorned > .admin-system-form-control {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.auth-register-form .ombox-field-input-adorned > .form-control,
.auth-register-form .ombox-field-input-adorned > .admin-system-form-control,
.auth-register-form .ombox-field-input-adorned > .ombox-field-input-action {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
}

.auth-register-form .ombox-field-input-adorned > .form-control:focus,
.auth-register-form .ombox-field-input-adorned > .admin-system-form-control:focus {
    position: relative;
    z-index: 2;
    box-shadow: inset 0 0 0 1px #0087F7;
}

.auth-register-form .ombox-field-input-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 96px;
    margin-left: -1px;
    padding: 0 12px;
    border: 1px solid #0087F7;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-sizing: border-box;
    line-height: 1;
    white-space: nowrap;
}

/* 验证码 */
.captcha-wrapper {
    display: flex;
    gap: 12px;
}

.captcha-input {
    flex: 1;
}

.captcha-image {
    width: 120px;
    height: 44px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.captcha-image:hover {
    border-color: #9CA3AF;
}

.captcha-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 记住我 和 忘记密码 */
.form-field-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -8px;
}

.login-form-links {
    justify-content: flex-end;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #0087F7;
}

.checkbox-text {
    font-size: 14px;
    color: #6B7280;
    user-select: none;
}

.link-text {
    font-size: 14px;
    color: #0087F7;
    text-decoration: none;
    transition: color 0.2s;
}

.link-text:hover {
    color: #006AC7;
}

/* 登录按钮 */
.btn-login {
    width: 100%;
    height: 44px;
    background: #0087F7;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}

.btn-login:hover {
    background: #006AC7;
}

.btn-login:active {
    transform: scale(0.98);
}

.btn-login:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
}

/* 分割线 */
.login-divider {
    display: flex;
    align-items: center;
    margin: 32px 0 24px;
    color: #9CA3AF;
    font-size: 13px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}

.login-divider span {
    padding: 0 16px;
    white-space: nowrap;
}

/* 其他登录方式 */
.login-methods {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.method-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #6B7280;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.method-btn-wechat { color: #07c160; }
.method-btn-qq { color: #12b7f5; }
.method-btn-alipay { color: #1677ff; }

.method-btn-wechat:not(:disabled):hover { color: #059b4d; }
.method-btn-qq:not(:disabled):hover { color: #0d91c4; }
.method-btn-alipay:not(:disabled):hover { color: #0f5fcc; }

.method-btn:not(:disabled):hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
    color: #374151;
}

.method-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* 移动端适配 */
@media (max-width: 767px) {
    .ombox-auth-surface-body {
        position: relative;
    }

    .login-page {
        align-items: flex-start;
        padding: calc(18px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
    }

    .login-card {
        width: 100%;
        padding: 32px 24px;
    }

    .login-logo {
        width: 100px;
    }

    .login-title {
        font-size: 22px;
    }

    .captcha-wrapper {
        gap: 8px;
    }

    .captcha-image {
        width: 100px;
    }

    .form-field-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .login-divider {
        margin: 28px 0 20px;
    }

    .method-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .field-input,
    .auth-register-form .ombox-field-input .form-control,
    .auth-register-form .ombox-field-input .admin-system-form-control,
    .btn-login {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .login-card {
        padding: 28px 18px;
    }

    .auth-register-form .ombox-field-input-action {
        min-width: 86px;
        padding: 0 8px;
        font-size: 13px;
    }
}

body.is-keyboard-open.ombox-auth-surface-body .login-page {
    align-items: flex-start;
    min-height: var(--ombox-visual-viewport-height, 100dvh);
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* 护眼模式 */
body.eye-protection .login-page {
    background: #F5F1E8;
}

body.eye-protection .login-card {
    background: #FFFEF9;
    box-shadow: 0 2px 16px rgba(139, 115, 85, 0.08);
}

body.eye-protection .login-title {
    color: #4A3C28;
}

body.eye-protection .login-feedback--success,
body.eye-protection .login-feedback--info {
    border-color: #C9BBA8;
    background: #EBE5D8;
    color: #5D4B37;
}

body.eye-protection .field-label {
    color: #4A3C28;
}

body.eye-protection .field-input {
    background: #F5F1E8;
    border-color: #D9CBB8;
    color: #4A3C28;
}

body.eye-protection .auth-register-form .ombox-field-input .form-control,
body.eye-protection .auth-register-form .ombox-field-input .admin-system-form-control {
    background: #F5F1E8;
    border-color: #D9CBB8;
    color: #4A3C28;
}

body.eye-protection .field-input:focus {
    background: #FFFFFF;
    border-color: #8B7355;
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

body.eye-protection .auth-register-form .ombox-field-input .form-control:focus,
body.eye-protection .auth-register-form .ombox-field-input .admin-system-form-control:focus {
    background: #FFFFFF;
    border-color: #8B7355;
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

body.eye-protection .captcha-image {
    border-color: #D9CBB8;
}

body.eye-protection .btn-login {
    background: #8B7355;
}

body.eye-protection .btn-login:hover {
    background: #6F5A43;
}

body.eye-protection .link-text {
    color: #8B7355;
}

body.eye-protection .link-text:hover {
    color: #6F5A43;
}

body.eye-protection .login-divider::before,
body.eye-protection .login-divider::after {
    background: #D9CBB8;
}

body.eye-protection .method-btn {
    background: #F5F1E8;
    border-color: #D9CBB8;
}

body.eye-protection .method-btn:not(:disabled):hover {
    background: #EBE5D8;
}

body.eye-protection .auth-register-form .ombox-field-input-action {
    border-color: #8B7355;
    color: #8B7355;
}

body.device-tv.ombox-auth-surface-body .login-container,
body.shell-variant-tv.ombox-auth-surface-body .login-container {
    max-width: 520px;
}

body.device-tv.ombox-auth-surface-body .login-card,
body.shell-variant-tv.ombox-auth-surface-body .login-card {
    padding: 56px 48px;
}

body.device-tv.ombox-auth-surface-body .login-title,
body.shell-variant-tv.ombox-auth-surface-body .login-title {
    font-size: 32px;
}

body.device-tv.ombox-auth-surface-body :is(.field-input, .btn-login),
body.shell-variant-tv.ombox-auth-surface-body :is(.field-input, .btn-login) {
    min-height: 56px;
    font-size: 20px;
}

body.device-tv.ombox-auth-surface-body :is(.field-label, .link-text, .login-feedback, .login-error),
body.shell-variant-tv.ombox-auth-surface-body :is(.field-label, .link-text, .login-feedback, .login-error) {
    font-size: 18px;
}

/* Generic admin page rhythm belongs to the page content, never to the Shell body. */
:where(.admin-widget-page:not(body), body.admin-widget-page > .container > .admin-content) {
    display: grid;
    gap: var(--space-5);
    align-content: start;
}

.admin-widget-page .ombox-page-header,
.admin-widget-page .ombox-stat-grid,
.admin-widget-page .ombox-card-grid,
.admin-widget-page .ombox-panel,
.admin-widget-page .ombox-alert {
    width: 100%;
    max-width: none;
}

.admin-widget-page .ombox-page-header {
    margin-bottom: 0;
}

.admin-index-template-page {
    display: grid;
    gap: var(--space-5);
}

.admin-index-template-page .ombox-panel-body {
    min-width: 0;
}

.admin-index-search-panel .ombox-panel-body {
    padding-top: var(--space-3);
}

.admin-index-list-panel .ombox-panel-body {
    padding: 0;
}

.admin-index-list-panel .ombox-table-wrap {
    margin-bottom: 0;
    border: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.admin-index-data-table th,
.admin-index-data-table td {
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.admin-index-data-table td {
    padding-top: .72rem;
    padding-bottom: .72rem;
}

.admin-table-cell-strong {
    color: var(--color-text-primary) !important;
    font-weight: 700;
}

.admin-table-cell-code {
    color: var(--color-text-primary) !important;
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);
    font-size: .82rem !important;
}

.admin-table-cell-muted {
    max-width: 320px;
    overflow: hidden;
    color: var(--color-text-muted) !important;
    text-overflow: ellipsis;
}

.admin-index-notes-panel .ombox-list {
    margin-bottom: 0;
}

.admin-browse-template-page {
    display: grid;
    gap: var(--space-4);
}

.admin-browse-home-btn span {
    display: none;
}

.admin-browse-main-grid {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.admin-browse-sidebar {
    min-width: 0;
}

.admin-browse-sidebar .ombox-panel {
    position: sticky;
    top: 72px;
}

.admin-browse-filter-panel .ombox-panel-body {
    padding-top: var(--space-3);
}

.admin-browse-filter-panel .ombox-search-form {
    display: grid;
    gap: var(--space-3);
}

.admin-browse-filter-panel .ombox-filter-field {
    display: grid;
    gap: .35rem;
}

.admin-browse-filter-panel .ombox-filter-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.admin-browse-filter-panel .ombox-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-1);
}

.admin-browse-filter-panel .ombox-filter-actions .btn {
    flex: 1 1 96px;
    justify-content: center;
}

.admin-browse-list-panel .ombox-panel-header {
    min-height: 64px;
}

.admin-browse-list-panel .ombox-panel-body {
    padding: 0;
}

.admin-browse-list-panel .ombox-table-wrap {
    margin-bottom: 0;
    overflow: auto;
    border: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.admin-browse-compact-page {
    --admin-browse-content-gap: 12px;
    --admin-browse-content-x: 8px;
    --admin-browse-content-bottom: 12px;
    gap: 0;
    margin: calc(var(--space-5) * -1);
    overflow: hidden;
    grid-template-rows: var(--navbar-height, 56px) minmax(0, 1fr);
    align-content: start;
}

.admin-browse-compact-page.admin-global-index-browse-page {
    align-self: start;
    grid-template-rows: var(--navbar-height, 56px) auto;
    min-height: auto;
    overflow: visible;
}

.admin-browse-compact-page > .navbar {
    align-self: start;
    margin: 0;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    overflow: hidden;
}

.admin-browse-compact-page .admin-browse-main {
    align-self: start;
    min-width: 0;
    height: calc(100vh - var(--navbar-height, 56px) - var(--admin-browse-content-gap) - var(--admin-browse-content-bottom));
    min-height: 0;
    margin: var(--admin-browse-content-gap) var(--admin-browse-content-x) var(--admin-browse-content-bottom);
    overflow: hidden;
}

.admin-browse-compact-page.admin-global-index-browse-page .admin-browse-main {
    height: auto;
    overflow: visible;
}

.admin-browse-compact-page .admin-browse-home-btn span {
    display: inline;
}

.admin-browse-compact-page .admin-browse-view-controls {
    width: 100%;
}

.admin-browse-compact-page .admin-browse-list-panel .ombox-panel-header {
    min-height: auto;
    padding-top: var(--space-4);
    padding-bottom: var(--space-3);
}

.admin-browse-compact-page .admin-browse-list-panel .ombox-panel-header h2 {
    font-size: 1rem;
    line-height: 1.35;
}

.admin-browse-compact-page .admin-browse-list-panel .ombox-panel-header p {
    font-size: var(--font-size-sm);
}

.admin-browse-filter-row th {
    padding: .42rem .5rem;
    background: var(--color-white);
    background-clip: padding-box;
    border-bottom: var(--border-width-thin) solid var(--color-border);
}

.admin-browse-filter-row .form-control {
    min-width: 108px;
    height: var(--form-control-sm-height, 38px);
    min-height: var(--form-control-sm-height, 38px);
    padding: .25rem .45rem;
    font-size: var(--form-control-sm-font-size, 13px);
}

.admin-browse-sort-link {
    color: var(--color-text-primary);
    text-decoration: none;
}

.admin-browse-sort-link:hover {
    color: var(--color-primary);
}

.admin-browse-empty-cell {
    padding: var(--space-5) !important;
    color: var(--color-text-muted);
    text-align: center;
}

.admin-browse-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border-top: var(--border-width-thin) solid var(--color-border);
}

.admin-browse-pagination span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.admin-browse-flat-panel {
    width: 100%;
    overflow: hidden;
    background: var(--color-white);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: 6px;
}

.admin-browse-flat-panel .ombox-panel-body {
    padding: 0;
}

.admin-browse-compact-page .btn,
.admin-browse-compact-page .form-control,
.admin-browse-compact-page .form-select,
.admin-browse-compact-page .ombox-table-wrap,
.admin-browse-compact-page .ombox-badge {
    border-radius: 4px;
}

.admin-browse-compact-page .btn {
    padding-inline: .72rem;
}

.admin-browse-compact-page .admin-browse-table-wrap {
    border: 0;
    border-radius: 0;
}

.admin-browse-compact-page .admin-browse-sort-link,
.admin-browse-compact-page .admin-browse-sort-link:visited,
.admin-browse-compact-page .admin-browse-sort-link:hover,
.admin-browse-compact-page .admin-browse-sort-link:focus {
    text-decoration: none;
}

.admin-browse-compact-page .admin-browse-filter-row .form-control {
    border-radius: 4px;
}

.admin-browse-compact-page .admin-browse-pagination {
    justify-content: flex-end;
    padding: 0;
    background: transparent;
}

.admin-browse-compact-page .admin-browse-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    gap: .75rem;
    padding: .5rem .75rem;
    background: var(--color-white);
    border-top: var(--border-width-thin) solid var(--color-border);
}

.admin-browse-compact-page .admin-browse-footer .admin-browse-batch-bar,
.admin-browse-compact-page .admin-browse-footer .admin-browse-pagination {
    min-width: 0;
    border: 0;
}

.admin-browse-compact-page .admin-browse-footer .admin-browse-batch-bar {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 0;
}

.admin-browse-compact-page .admin-browse-footer .admin-browse-pagination {
    flex: 0 0 auto;
}

.admin-browse-compact-page .admin-browse-footer .admin-browse-batch-bar small {
    display: none;
}

.admin-browse-page-summary {
    margin-right: auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.admin-browse-page-link {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.admin-browse-page-link:hover {
    color: var(--color-primary-hover, var(--color-primary));
    text-decoration: none;
}

.admin-browse-page-link.is-disabled {
    color: var(--color-text-muted);
    pointer-events: none;
    opacity: .55;
}

.admin-browse-page-current {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

body.eye-protection .admin-browse-filter-row th,
body.eye-protection .admin-browse-pagination {
    background: #faf8f3 !important;
    border-color: #d9cbb8;
}

body.eye-protection .admin-browse-flat-panel {
    background: #faf8f3;
    border-color: #d9cbb8;
}

body.eye-protection .admin-index-list-panel .ombox-table-wrap {
    background: #faf8f3;
}

/* Standard workspace content shell shared by admin and generated pages. */
.admin-navbar-content-page {
    overflow: hidden;
    align-content: start;
}

.admin-navbar-content-page > .navbar {
    align-self: start;
    height: var(--navbar-height, 56px);
    min-height: var(--navbar-height, 56px);
    margin: 0;
    flex-wrap: nowrap;
}

.admin-navbar-content-page > .ombox-page-toolbar {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border-bottom: var(--border-width-thin, 1px) solid var(--color-border, #dee2e6);
    box-shadow: none;
}

.admin-navbar-content-page > .navbar .ombox-toolbar-left,
.admin-navbar-content-page > .navbar .ombox-toolbar-right,
.admin-navbar-content-page > .ombox-page-toolbar .ombox-toolbar-left,
.admin-navbar-content-page > .ombox-page-toolbar .ombox-toolbar-right {
    display: flex;
    align-items: center;
    width: auto;
    min-height: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 10px;
}

.admin-navbar-content-page > .navbar .ombox-toolbar-right,
.admin-navbar-content-page > .ombox-page-toolbar .ombox-toolbar-right {
    flex: 0 1 auto;
    justify-content: flex-end;
}

.admin-navbar-content-page > .ombox-page-toolbar .btn {
    min-height: 32px;
    padding: .34rem .72rem;
    font-size: var(--font-size-sm, 13px);
    white-space: nowrap;
}

.admin-navbar-content-page > .ombox-page-toolbar .admin-navbar-content-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.admin-navbar-content-page > .ombox-page-toolbar .admin-navbar-content-title strong {
    color: var(--color-text-primary, #172033);
    font-size: 16px;
    line-height: 1.2;
}

.admin-navbar-content-page > .ombox-page-toolbar .admin-navbar-content-title small {
    color: var(--color-text-secondary, #64748b);
    font-size: 12px;
    line-height: 1.2;
}

.admin-navbar-content-page .admin-navbar-content-main {
    align-self: start;
    height: calc(100vh - var(--navbar-height, 56px));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--admin-browse-content-gap, 12px) var(--admin-browse-content-x, 8px) var(--admin-browse-content-bottom, 12px);
}

.admin-main-layout {
    grid-template-rows: var(--navbar-height, 56px) auto;
}

.admin-main-layout > .ombox-page-toolbar {
    padding: 0 var(--admin-browse-content-x, 8px);
    gap: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom-color: rgba(148, 163, 184, .22);
}

.admin-main-layout > .admin-navbar-content-main {
    background: linear-gradient(180deg, #f9fbff 0%, #f2f5fb 100%);
    padding: var(--admin-browse-content-x, 8px);
    border-radius: 10px 10px 0 0;
    margin-top: 0;
    border-top: 1px solid rgba(148, 163, 184, .16);
}

.admin-main-layout > .ombox-page-toolbar .btn + .btn,
.admin-main-layout > .ombox-page-toolbar .btn-group + .btn-group,
.admin-main-layout > .ombox-page-toolbar .btn + .btn-group,
.admin-main-layout > .ombox-page-toolbar .btn-group + .btn {
    margin-left: .35rem;
}

.admin-navbar-content-page .admin-navbar-content-slot {
    min-width: 0;
}

.ombox-page-toolbar[data-menu-count="0"] {
    display: none !important;
}

.ombox-page-toolbar.is-menu-empty,
.ombox-page-toolbar[hidden] {
    display: none !important;
}

.admin-navbar-content-page.has-empty-page-toolbar {
    grid-template-rows: 0 auto !important;
}

.admin-navbar-content-page.has-empty-page-toolbar > .admin-navbar-content-main {
    grid-row: 1 / -1;
    height: 100vh;
    margin-top: 0 !important;
    border-top-width: 0;
}

.admin-content.has-empty-page-toolbar > .ombox-page-content {
    height: 100vh;
    margin-top: 0 !important;
    border-top-width: 0;
}

.admin-navbar-content-page:has(> .ombox-page-toolbar[data-menu-count="0"]) {
    grid-template-rows: 0 auto !important;
}

.admin-navbar-content-page > .ombox-page-toolbar[data-menu-count="0"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.admin-navbar-content-page > .ombox-page-toolbar[data-menu-count="0"] + .admin-navbar-content-main {
    grid-row: 1 / -1;
    height: 100vh;
    margin-top: 0 !important;
    border-top-width: 0;
}

.admin-navbar-content-page:has(> .ombox-page-toolbar[data-menu-count="0"]) > .admin-navbar-content-main {
    height: 100vh;
    margin-top: 0 !important;
    border-top-width: 0;
}

.admin-navbar-content-page:has(> .ombox-page-toolbar:not(:has(a[href], button, input:not([type="hidden"]), select, textarea, .btn, [role="button"], [data-toolbar-action]))) {
    grid-template-rows: 0 auto !important;
}

.admin-navbar-content-page > .ombox-page-toolbar:not(:has(a[href], button, input:not([type="hidden"]), select, textarea, .btn, [role="button"], [data-toolbar-action])) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.admin-navbar-content-page:has(> .ombox-page-toolbar:not(:has(a[href], button, input:not([type="hidden"]), select, textarea, .btn, [role="button"], [data-toolbar-action]))) > .admin-navbar-content-main {
    height: 100vh;
    margin-top: 0 !important;
    border-top-width: 0;
}

body.ombox-shell .admin-content:has(> .ombox-page-toolbar) {
    gap: 0;
    padding: 0;
}

.admin-content > .ombox-page-toolbar {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto;
    width: 100%;
    min-height: var(--navbar-height, 56px);
    margin: 0;
    padding: 0 var(--admin-browse-content-x, 8px);
    overflow: hidden;
    gap: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: var(--border-width-thin, 1px) solid rgba(148, 163, 184, .22);
    box-shadow: none;
}

.admin-content > .ombox-page-toolbar .ombox-toolbar-left,
.admin-content > .ombox-page-toolbar .ombox-toolbar-right {
    display: flex;
    align-items: center;
    width: auto;
    min-height: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 10px;
}

.admin-content > .ombox-page-toolbar .ombox-toolbar-right {
    flex: 0 1 auto;
    justify-content: flex-end;
}

.admin-content > .ombox-page-toolbar .btn {
    min-height: 32px;
    padding: .34rem .72rem;
    font-size: var(--font-size-sm, 13px);
    white-space: nowrap;
}

.admin-content > .ombox-page-content {
    align-self: start;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    padding: var(--admin-browse-content-x, 8px);
    background: linear-gradient(180deg, #f9fbff 0%, #f2f5fb 100%);
    border-top: 1px solid rgba(148, 163, 184, .16);
    border-radius: 10px 10px 0 0;
}

.admin-content .ombox-page-content-slot {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
}

/*
 * Admin page operations remain in normal document flow, then stay visible at
 * the top of whichever content container owns vertical scrolling.
 */
body.admin-page .admin-page-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    min-width: 0;
    margin: 0 0 var(--space-4, 16px);
    padding: var(--space-4, 16px);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 10);
    isolation: isolate;
    background: var(--color-white, #fff);
    border: var(--border-width-thin, 1px) solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}

body.admin-page .admin-page-head-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.admin-page .admin-page-head-main > * {
    min-width: 0;
}

body.admin-page .admin-page-head h1 {
    margin: 0;
    max-width: 100%;
    color: var(--color-text, #202733);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

body.admin-page .admin-page-head p {
    margin: .25rem 0 0;
    max-width: 100%;
    color: var(--color-text-muted, #64748b);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

body.admin-page .admin-page-head-entity {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-muted, #64748b);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

body.admin-page .admin-page-head-actions {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2, 8px);
}

body.admin-page .admin-page-head-actions > *,
body.admin-page .admin-page-head-actions form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

body.admin-page .admin-page-head-actions .btn,
body.admin-page .admin-page-head-actions .ombox-dropdown > button {
    min-height: var(--widget-control-min-height, 38px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 4px);
    border-radius: var(--widget-control-radius, var(--radius-md, 8px));
    white-space: nowrap;
    box-sizing: border-box;
}

body.admin-page .admin-page-head-actions .ombox-dropdown {
    display: inline-flex;
}

body.admin-page.eye-protection .admin-page-head,
body.admin-page.eye-protection-sepia .admin-page-head {
    background: #faf8f3;
    border-color: #d9cbb8;
    box-shadow: 0 6px 16px rgba(74, 60, 40, .1);
}

body.admin-page.eye-protection .admin-page-head h1,
body.admin-page.eye-protection-sepia .admin-page-head h1 {
    color: #4a3c28;
}

body.admin-page.eye-protection .admin-page-head p,
body.admin-page.eye-protection-sepia .admin-page-head p,
body.admin-page.eye-protection .admin-page-head-entity,
body.admin-page.eye-protection-sepia .admin-page-head-entity {
    color: #6b5d4f;
}

@media (max-width: 1180px) {
    body.admin-page .admin-page-head {
        flex-direction: column;
    }

    body.admin-page .admin-page-head-actions {
        justify-content: flex-start;
    }
}

.admin-content > .ombox-page-toolbar[data-menu-count="0"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.admin-content > .ombox-page-toolbar[data-menu-count="0"] + .ombox-page-content {
    height: 100vh;
    margin-top: 0 !important;
    border-top-width: 0;
}

.admin-content:has(> .ombox-page-toolbar[data-menu-count="0"]) > .ombox-page-content {
    height: 100vh;
    margin-top: 0 !important;
    border-top-width: 0;
}

.admin-content > .ombox-page-toolbar:not(:has(a[href], button, input:not([type="hidden"]), select, textarea, .btn, [role="button"], [data-toolbar-action])) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.admin-content:has(> .ombox-page-toolbar:not(:has(a[href], button, input:not([type="hidden"]), select, textarea, .btn, [role="button"], [data-toolbar-action]))) > .ombox-page-content {
    height: 100vh;
    margin-top: 0 !important;
    border-top-width: 0;
}

body.admin-page .admin-browse-main {
    display: grid;
    gap: var(--admin-browse-content-gap, 12px);
    align-content: start;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: visible;
    padding: var(--admin-browse-content-gap, 12px) var(--admin-browse-content-x, 8px) var(--admin-browse-content-bottom, 12px);
    padding-bottom: calc(var(--admin-browse-content-bottom, 12px) + var(--footer-height, 48px));
}

body.admin-page .admin-browse-main > .ombox-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    background: var(--color-white);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
}

body.admin-page .admin-browse-main > .ombox-table-wrap .admin-browse-data-table {
    margin-bottom: 0;
}

body.eye-protection .admin-content > .ombox-page-toolbar {
    background: linear-gradient(180deg, #faf8f3 0%, #f5f1e8 100%);
    border-bottom-color: #d9cbb8;
}

body.eye-protection .admin-content > .ombox-page-content {
    background: linear-gradient(180deg, #faf8f3 0%, #f5f1e8 100%);
}

body.eye-protection .admin-browse-main > .ombox-table-wrap {
    background: #faf8f3;
    border-color: #d9cbb8;
}

.admin-global-index-panel {
    display: grid;
    gap: .75rem;
    margin-bottom: .75rem;
    padding: .75rem;
    background: var(--color-white);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: 6px;
}

.admin-global-index-filter-row,
.admin-global-index-summary-row,
.admin-global-index-panel-footer,
.admin-global-index-panel-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    min-width: 0;
}

.admin-global-index-filter-row {
    align-items: flex-end;
    padding-bottom: var(--space-3, 12px);
    border-bottom: var(--border-width-thin, 1px) solid var(--color-border, #e5e7eb);
}

.admin-global-index-filter-row > .flex-grow-1,
.admin-global-index-filter-row > [data-flex-grow] {
    flex: 1 1 260px;
    min-width: 220px;
}

.admin-global-index-summary-row {
    padding-bottom: var(--space-2, 8px);
    color: var(--color-text-muted);
    border-bottom: var(--border-width-thin, 1px) solid var(--color-border, #e5e7eb);
    font-size: var(--font-size-sm, 13px);
}

.admin-global-index-panel-heading,
.admin-global-index-panel-footer {
    justify-content: space-between;
    padding-top: var(--space-3, 12px);
    border-top: var(--border-width-thin, 1px) solid var(--color-border, #e5e7eb);
}

.admin-global-index-panel-heading h2 {
    margin: 0 0 .25rem;
    color: var(--color-text, #202733);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.admin-global-index-panel-heading p {
    margin: 0;
    color: var(--color-text-muted, #64748b);
    font-size: 13px;
    line-height: 1.45;
}

.admin-global-index-metric-grid,
.admin-global-index-detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-2, 8px);
    margin: 0;
}

.admin-global-index-metric-item,
.admin-global-index-detail-item {
    min-width: 0;
    padding: var(--space-3, 12px);
    background: var(--color-bg-subtle, #f8fafc);
    border: var(--border-width-thin, 1px) solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-sm, 6px);
}

.admin-global-index-metric-label,
.admin-global-index-detail-item dt {
    display: block;
    margin: 0 0 var(--space-1, 4px);
    color: var(--color-text-muted, #64748b);
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
}

.admin-global-index-metric-value,
.admin-global-index-detail-item dd {
    min-width: 0;
    margin: 0;
    color: var(--color-text, #202733);
    font-size: var(--font-size-md, 14px);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-global-index-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: .5rem;
    align-items: stretch;
}

.admin-entity-index-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
}

.admin-entity-order-actions {
    min-height: var(--widget-control-min-height, 38px);
    margin-bottom: 1rem;
}

.admin-global-index-input-wrap {
    position: relative;
    min-width: 0;
}

.admin-global-index-input-wrap .form-control,
.admin-global-index-input-wrap .admin-system-form-control {
    min-height: var(--widget-control-min-height, 38px);
    height: var(--widget-control-min-height, 38px);
    border-radius: var(--widget-control-radius, var(--radius-md, 8px));
    padding-right: 1.75rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-global-index-input-wrap .form-control:focus,
.admin-global-index-input-wrap .form-control:focus-visible,
.admin-global-index-input-wrap .admin-system-form-control:focus,
.admin-global-index-input-wrap .admin-system-form-control:focus-visible {
    outline: none;
    border-color: var(--color-primary, #0087f7);
    box-shadow: var(--shadow-focus, none);
}

.admin-global-index-row .btn {
    min-height: var(--widget-control-min-height, 38px);
    height: var(--widget-control-min-height, 38px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-4);
    gap: var(--space-1);
    border-radius: var(--widget-control-radius, var(--radius-md, 8px));
    box-sizing: border-box;
}

.admin-global-index-row .btn:focus-visible {
    outline: none;
    border-color: var(--color-primary, #0087f7);
    box-shadow: var(--shadow-focus, none);
}

.admin-entity-index-row .btn {
    min-height: var(--widget-control-min-height, 38px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-global-index-clear {
    position: absolute;
    top: 50%;
    right: .36rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    font-size: .85rem;
    line-height: 1;
    border-radius: 999px;
    box-sizing: border-box;
    transform: translateY(-50%);
}

.admin-global-index-clear:hover,
.admin-global-index-clear:focus-visible {
    color: var(--color-text-primary);
    background: var(--color-surface, #f8fafc);
}

@media (max-width: 768px) {
    .admin-global-index-row .btn {
        width: 100%;
    }

    .admin-global-index-clear {
        right: .5rem;
    }
}

.admin-global-index-list {
    display: grid;
    gap: .9rem;
}

.admin-global-index-section {
    min-width: 0;
}

.admin-global-index-row-link {
    cursor: pointer;
}

.admin-global-index-row-link:focus {
    outline: var(--focus-ring-outline, 1px solid rgba(11, 116, 222, 0.36));
    outline-offset: -1px;
    box-shadow: none;
}

.admin-global-index-row-link a,
.admin-global-index-row-link button {
    cursor: pointer;
}

.admin-entity-primary-link,
.admin-entity-primary-link:visited {
    color: var(--primary-color, var(--color-primary, #4f9d69));
}

.admin-entity-primary-link:hover,
.admin-entity-primary-link:focus {
    color: var(--primary-hover, var(--color-primary-dark, #2f855a));
}

.admin-entity-id-code {
    color: var(--text-muted, #697586);
    font-size: 12px;
    font-weight: 500;
}

.admin-entity-col-move,
.admin-entity-move-cell {
    width: 92px;
    min-width: 92px;
    text-align: center;
}

.admin-entity-sort-value {
    font-variant-numeric: tabular-nums;
}

.admin-global-index-empty {
    padding: 1rem;
    color: var(--color-text-secondary);
    text-align: center;
    background: var(--color-white);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: 6px;
}

.admin-global-index-browse-page.is-index-empty .admin-global-index-list::after {
    content: '没有匹配的数据';
    display: block;
    padding: 1rem;
    color: var(--color-text-secondary);
    text-align: center;
}

body.eye-protection .admin-global-index-panel,
body.eye-protection .admin-global-index-empty,
body.eye-protection .admin-global-index-metric-item,
body.eye-protection .admin-global-index-detail-item {
    background: #faf8f3;
    border-color: #d9cbb8;
}

body.eye-protection .admin-global-index-filter-row,
body.eye-protection .admin-global-index-summary-row,
body.eye-protection .admin-global-index-panel-footer {
    border-color: #d9cbb8;
}

body.eye-protection .admin-entity-primary-link,
body.eye-protection .admin-entity-primary-link:visited {
    color: #8a5a2b;
}

.admin-navbar-content-scrollable-page {
    overflow: visible;
}

.admin-navbar-content-scrollable-page .admin-navbar-content-main {
    height: auto;
    min-height: auto;
    overflow: visible;
}

body.eye-protection .admin-navbar-content-page > .ombox-page-toolbar {
    background: transparent;
    border-color: #d9cbb8;
}

body.eye-protection .admin-navbar-content-page > .ombox-page-toolbar .admin-navbar-content-title strong {
    color: #4a3c28;
}

body.eye-protection .admin-navbar-content-page > .ombox-page-toolbar .admin-navbar-content-title small {
    color: #6b5d4f;
}

body.eye-protection .admin-navbar-content-page .admin-navbar-content-main {
    background: #f5f1e8;
}

body.eye-protection .admin-main-layout > .ombox-page-toolbar {
    background: linear-gradient(180deg, #faf8f3 0%, #f5f1e8 100%);
    border-bottom-color: #d9cbb8;
}

body.eye-protection .admin-main-layout > .admin-navbar-content-main {
    background: linear-gradient(180deg, #faf8f3 0%, #f5f1e8 100%);
}

@media (max-width: 768px) {
    body.ombox-dynamic-page .ombox-sidebar {
        width: var(--sidebar-width, 240px);
    }
    body.ombox-dynamic-page .ombox-sidebar.collapsed {
        transform: translateX(-100%);
        width: var(--sidebar-width, 240px);
    }
    body.ombox-dynamic-page .content.sidebar-collapsed {
        margin-left: 0 !important;
    }
    body.ombox-dynamic-page .footer-container {
        margin-left: 0;
        padding: 0 12px;
        gap: 10px;
    }
    body.ombox-dynamic-page .ombox-page-footer {
        position: static;
    }
    body.ombox-dynamic-page .footer-right {
        gap: 10px;
        flex-shrink: 0;
    }

    .ombox-login-brand {
        position: static;
        justify-self: start;
        width: min(440px, 100%);
        margin-bottom: 18px;
    }

    .ombox-login-shell {
        align-content: center;
        place-items: stretch;
    }

    .admin-index-list-panel .ombox-panel-header {
        align-items: flex-start;
    }

    .admin-index-data-table th,
    .admin-index-data-table td {
        font-size: .8rem;
    }

    .admin-browse-main-grid {
        grid-template-columns: 1fr;
    }

    .admin-browse-sidebar .ombox-panel {
        position: static;
    }

    .admin-browse-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .admin-browse-compact-page .admin-browse-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-global-index-row {
        grid-template-columns: 1fr;
    }

    .admin-entity-index-row {
        justify-content: stretch;
    }

    .admin-entity-index-row .btn {
        width: 100%;
    }

    .admin-browse-page-summary {
        width: 100%;
        margin-right: 0;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .admin-main-layout {
        grid-template-rows: auto auto;
    }

    .admin-navbar-content-page > .navbar,
    .admin-navbar-content-page > .ombox-page-toolbar {
        height: auto;
        min-height: var(--navbar-height, 56px);
        padding: 8px 0;
        overflow: visible;
        flex-wrap: wrap;
    }

    .admin-navbar-content-page > .navbar .ombox-toolbar-left,
    .admin-navbar-content-page > .navbar .ombox-toolbar-right,
    .admin-navbar-content-page > .ombox-page-toolbar .ombox-toolbar-left,
    .admin-navbar-content-page > .ombox-page-toolbar .ombox-toolbar-right {
        width: 100%;
        min-height: auto;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .admin-navbar-content-page > .navbar .btn,
    .admin-navbar-content-page > .ombox-page-toolbar .btn {
        flex: 0 0 auto;
        min-height: 30px;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .admin-navbar-content-page .admin-navbar-content-main {
        height: calc(100vh - var(--navbar-height, 56px));
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}