/* visual refresh only: no URLs, APIs, forms, or backend data are changed */
:root {
    --ui-bg: #f4f7fb;
    --ui-panel: #ffffff;
    --ui-ink: #101323;
    --ui-muted: #687083;
    --ui-line: #e5e9f2;
    --ui-dark: #2563eb;
    --ui-hot: #ff2f7d;
    --ui-violet: #7c5cff;
    --ui-cyan: #00c8e8;
    --ui-lime: #58dd68;
    --ui-shadow: 0 16px 42px rgba(17, 21, 37, .08);
    --ui-radius: 10px;
}

html, body {
    color: var(--ui-ink);
    background: radial-gradient(circle at 18% 8%, rgba(255, 47, 125, .12), transparent 28%),
                radial-gradient(circle at 86% 4%, rgba(0, 200, 232, .16), transparent 30%),
                var(--ui-bg) !important;
    letter-spacing: 0;
}

body::before, body::after, .bg-orb { display: none !important; }

body:not(.logged-in) {
    background: linear-gradient(135deg, rgba(17, 21, 37, .96), rgba(31, 37, 60, .94) 48%, rgba(124, 92, 255, .82)) !important;
}

.card, .auth-card, .stat-card, .quick-item, .mat-card, .table-wrap, .edit-container, .data-table {
    background: var(--ui-panel) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card:hover, .stat-card:hover, .quick-item:hover, .mat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 92, 255, .28) !important;
    box-shadow: 0 18px 46px rgba(17, 21, 37, .12) !important;
}

.btn, .btn-primary, button[type="submit"], input[type="submit"] {
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--ui-hot), var(--ui-violet)) !important;
    box-shadow: 0 12px 28px rgba(255, 47, 125, .22) !important;
}

.btn-outline {
    color: var(--ui-ink) !important;
    background: #fff !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: none !important;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="url"], input[type="tel"], select, textarea, .form-input {
    color: var(--ui-ink) !important;
    background: #fff !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}

input:focus, select:focus, textarea:focus, .form-input:focus {
    border-color: var(--ui-violet) !important;
    box-shadow: 0 0 0 4px rgba(124, 92, 255, .14) !important;
}

label, .form-label, .page-header h2, .mat-card .mat-title, .history-item .his-title,
.announcement-card .ann-title, .stat-card .stat-value, .info-value {
    color: var(--ui-ink) !important;
    text-shadow: none !important;
}

.text-muted, .mat-card .mat-desc, .mat-card .mat-time, .history-item .his-meta,
.announcement-card .ann-content, .info-label, .stat-card .stat-label, .empty-state p {
    color: var(--ui-muted) !important;
}

.badge {
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.badge-success { color: #0c5b20 !important; background: rgba(88, 221, 104, .22) !important; }
.badge-danger { color: #9f1239 !important; background: rgba(255, 47, 125, .16) !important; }
.badge-warning { color: #7c4a03 !important; background: rgba(255, 194, 71, .24) !important; }
.badge-info, .badge-secondary { color: #053744 !important; background: rgba(0, 200, 232, .18) !important; }
.msg-info { color: #075985 !important; background: #e0f2fe !important; border: 1px solid #bae6fd !important; }

.auth-wrapper {
    min-height: 100vh !important;
    padding: 28px 18px;
    background: transparent !important;
}

.auth-container { max-width: 480px; }
.auth-brand { color: #fff !important; text-shadow: none !important; }
.auth-brand-icon {
    border-radius: var(--ui-radius) !important;
    background: linear-gradient(135deg, var(--ui-hot), var(--ui-violet), var(--ui-cyan)) !important;
    border: 0 !important;
    box-shadow: 0 16px 36px rgba(255, 47, 125, .25) !important;
}

.site-logo-box {
    overflow: hidden !important;
    padding: 0 !important;
    background: #fff !important;
}

.site-logo-box img,
.site-logo-img,
.admin-site-logo,
.login-site-logo {
    display: block !important;
    object-fit: cover !important;
}

.site-logo-box img {
    width: 100% !important;
    height: 100% !important;
}

.site-logo-img,
.admin-site-logo {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
}

.login-site-logo {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    margin: 0 auto !important;
}
.auth-tabs {
    padding: 4px !important;
    background: #f1f4f9 !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
}
.auth-tab {
    color: var(--ui-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.auth-tab.active {
    color: #fff !important;
    background: var(--ui-dark) !important;
}
.auth-footer { color: rgba(255, 255, 255, .78) !important; }

.navbar {
    height: 64px !important;
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    box-shadow: 0 12px 30px rgba(17, 21, 37, .05) !important;
}
.navbar-brand, .navbar-links a, .navbar-user, .theme-toggle-nav {
    color: var(--ui-ink) !important;
    text-shadow: none !important;
}
.navbar-brand i { -webkit-text-fill-color: var(--ui-hot) !important; color: var(--ui-hot) !important; }
.navbar-links a { border-radius: var(--ui-radius) !important; background: transparent !important; }
.navbar-links a.active, .navbar-links a:hover {
    color: #fff !important;
    background: var(--ui-dark) !important;
}
.navbar-user, .theme-toggle-nav {
    background: #f3f5fa !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: none !important;
}
.main-content { max-width: 1220px !important; }

.hero-section {
    color: #fff !important;
    text-align: left !important;
    border: 0 !important;
    background: linear-gradient(135deg, rgba(255, 47, 125, .92), rgba(124, 92, 255, .85) 52%, rgba(0, 200, 232, .70)) !important;
    box-shadow: var(--ui-shadow) !important;
}
.hero-section h1, .hero-section p { color: #fff !important; text-shadow: none !important; }
.hero-actions { justify-content: flex-start !important; }

.stat-cards { gap: 14px !important; }
.stat-card { text-align: left !important; }
.stat-card .stat-icon { margin: 0 0 14px !important; border-radius: var(--ui-radius) !important; }
.quick-item { align-items: flex-start !important; color: var(--ui-ink) !important; }
.quick-item i { -webkit-text-fill-color: var(--ui-hot) !important; color: var(--ui-hot) !important; }

.material-grid { gap: 16px !important; }
.mat-card { overflow: hidden; }
.mat-thumb {
    height: 150px !important;
    border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
    margin: -1.6rem -1.6rem 16px !important;
    background: linear-gradient(135deg, rgba(255, 47, 125, .82), rgba(124, 92, 255, .78), rgba(0, 200, 232, .68)) !important;
}
.mat-card .mat-footer { border-top-color: var(--ui-line) !important; }

.mobile-tab {
    background: rgba(255, 255, 255, .96) !important;
    border-top: 1px solid var(--ui-line) !important;
    box-shadow: 0 -12px 32px rgba(17, 21, 37, .08) !important;
}
.mobile-tab a { color: var(--ui-muted) !important; }
.mobile-tab a.active, .mobile-tab a:hover { color: var(--ui-hot) !important; }
.mobile-tab a.active::before { background: var(--ui-hot) !important; box-shadow: none !important; }

.admin-layout { background: var(--ui-bg) !important; }
.admin-sidebar {
    background: #fff !important;
    border-right: 1px solid var(--ui-line) !important;
    box-shadow: 10px 0 28px rgba(17, 21, 37, .04) !important;
    backdrop-filter: none !important;
}
.admin-sidebar .sidebar-logo { color: var(--ui-ink) !important; border-bottom-color: var(--ui-line) !important; }
.admin-sidebar .sidebar-logo i { color: var(--ui-hot) !important; }
.admin-sidebar .nav-section-title { color: #98a0b2 !important; }
.admin-sidebar .nav-item {
    color: #515a70 !important;
    border-radius: var(--ui-radius) !important;
}
.admin-sidebar .nav-item:hover {
    color: var(--ui-ink) !important;
    background: #f3f5fa !important;
    box-shadow: none !important;
}
.admin-sidebar .nav-item.active {
    color: #fff !important;
    background: var(--ui-dark) !important;
    box-shadow: 0 14px 30px rgba(17, 21, 37, .16) !important;
}
.admin-topbar {
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    box-shadow: 0 10px 28px rgba(17, 21, 37, .04) !important;
}
.admin-main { background: var(--ui-bg) !important; }
.admin-topbar .admin-info, .admin-topbar .theme-toggle {
    background: #f3f5fa !important;
    border: 1px solid var(--ui-line) !important;
    color: var(--ui-ink) !important;
}

.dash-grid { gap: 14px !important; }
.dash-stat { align-items: center !important; }
.dash-stat .stat-icon {
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}
.dash-stat .stat-number, .dash-stat .stat-label { color: var(--ui-ink) !important; }
.dash-stat .stat-label { color: var(--ui-muted) !important; }

.table-wrap {
    overflow: auto;
    padding: 0 !important;
}
.table-wrap table, .data-table { min-width: 760px; border-collapse: collapse !important; }
.table-wrap th, .data-table thead th {
    color: var(--ui-muted) !important;
    background: #fafbfe !important;
    border-bottom: 1px solid var(--ui-line) !important;
}
.table-wrap td, .data-table tbody td {
    color: var(--ui-ink) !important;
    border-bottom: 1px solid var(--ui-line) !important;
}
.table-wrap tr:nth-child(even) td, .data-table tbody tr:nth-child(even) td { background: #fff !important; }
.table-wrap tr:hover td, .data-table tbody tr:hover td { background: #f8faff !important; }
.action-links a, .action-links button, .table-wrap .action-links a {
    border-radius: 8px !important;
    background: #eef2f8 !important;
    color: #2f3749 !important;
    padding: 7px 10px !important;
}
.edit-container .section-title, .section-title {
    color: var(--ui-ink) !important;
    border-left-color: var(--ui-hot) !important;
}

.login-card {
    background: #fff !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}
.theme-toggle-login {
    background: #fff !important;
    border: 1px solid var(--ui-line) !important;
    color: var(--ui-ink) !important;
}

[data-theme="dark"] {
    --ui-bg: #0f1220;
    --ui-panel: #171b2c;
    --ui-ink: #f3f6ff;
    --ui-muted: #a8b1c6;
    --ui-line: rgba(255, 255, 255, .10);
    --ui-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .card, [data-theme="dark"] .auth-card, [data-theme="dark"] .stat-card,
[data-theme="dark"] .quick-item, [data-theme="dark"] .mat-card, [data-theme="dark"] .table-wrap,
[data-theme="dark"] .edit-container, [data-theme="dark"] .admin-sidebar,
[data-theme="dark"] .admin-topbar, [data-theme="dark"] .login-card {
    background: var(--ui-panel) !important;
    border-color: var(--ui-line) !important;
}

[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .form-input,
[data-theme="dark"] .navbar, [data-theme="dark"] .mobile-tab,
[data-theme="dark"] .navbar-user, [data-theme="dark"] .theme-toggle-nav,
[data-theme="dark"] .admin-topbar .admin-info, [data-theme="dark"] .admin-topbar .theme-toggle {
    background: #ffffff !important;
    color: var(--ui-ink) !important;
    border-color: var(--ui-line) !important;
}

[data-theme="dark"] .table-wrap th, [data-theme="dark"] .data-table thead th,
[data-theme="dark"] .table-wrap tr:nth-child(even) td,
[data-theme="dark"] .data-table tbody tr:nth-child(even) td {
    background: #14192a !important;
}

[data-theme="dark"] .table-wrap tr:hover td, [data-theme="dark"] .data-table tbody tr:hover td {
    background: #1d2338 !important;
}

@media (max-width: 768px) {
    .navbar { height: 58px !important; padding: 0 14px !important; }
    .main-content { margin-top: 72px !important; padding: 0 14px 92px !important; }
    .hero-section { padding: 24px 18px !important; }
    .hero-actions { gap: 10px !important; }
    .hero-actions .btn { padding: 11px 16px !important; }
    .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .mobile-tab { padding-bottom: env(safe-area-inset-bottom); }
    .mobile-tab a { color: var(--ui-muted) !important; font-size: .72em !important; }
    .admin-main { padding: 16px !important; }
    .page-header { align-items: flex-start !important; flex-wrap: wrap !important; }
}

@media (max-width: 480px) {
    .auth-wrapper { padding: 18px 12px; }
    .auth-brand h1 { font-size: 1.55em !important; }
    .auth-card { padding: 20px 16px !important; }
    .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .stat-cards { gap: 10px !important; }
    .stat-card { padding: 16px 12px !important; }
    .mat-thumb { height: 136px !important; }
    .table-wrap { font-size: .86em !important; }
}

/* fixed readable mode: hide theme switches and keep one clear light scheme */
.theme-toggle, .theme-toggle-nav, .theme-toggle-login { display: none !important; }

html, body, [data-theme="dark"], [data-theme="light"] {
    --ui-bg: #f4f7fb;
    --ui-panel: #ffffff;
    --ui-ink: #101323;
    --ui-muted: #5f687a;
    --ui-line: #dfe5ef;
    --ui-shadow: 0 14px 36px rgba(17, 21, 37, .08);
    --text-color: var(--ui-ink);
    --text-secondary: #2f3749;
    --text-muted: var(--ui-muted);
    --card-bg: #ffffff;
    --card-border: var(--ui-line);
    --input-bg: #ffffff;
    --input-border: var(--ui-line);
    --nav-bg: rgba(255, 255, 255, .94);
    --sidebar-bg: #ffffff;
}

body.logged-in,
[data-theme="dark"] body.logged-in,
[data-theme="light"] body.logged-in {
    color: var(--ui-ink) !important;
    background: var(--ui-bg) !important;
}

body:not(.logged-in),
[data-theme="dark"] body:not(.logged-in),
[data-theme="light"] body:not(.logged-in) {
    color: var(--ui-ink) !important;
    background: linear-gradient(135deg, #f8fbff, #eef3fb 48%, #f5f0ff) !important;
}

.auth-brand, .auth-brand h1, .auth-brand p, .auth-footer {
    color: var(--ui-ink) !important;
}

.auth-brand-icon {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ui-hot), var(--ui-violet)) !important;
}

.hero-section {
    background: linear-gradient(135deg, #191d2f, #3d315f 52%, #135e72) !important;
}

.btn, .btn-primary, button[type="submit"], input[type="submit"] {
    color: #fff !important;
    text-shadow: none !important;
}

.btn-outline, .hero-actions .btn.btn-outline {
    color: var(--ui-ink) !important;
    background: #fff !important;
    border: 1px solid var(--ui-line) !important;
}

.navbar, .mobile-tab, .admin-topbar, .admin-sidebar {
    background: rgba(255, 255, 255, .96) !important;
    color: var(--ui-ink) !important;
}

.navbar a, .navbar span, .admin-topbar, .admin-sidebar .nav-item,
.mobile-tab a, table, th, td, small, p {
    text-shadow: none !important;
}

/* high readability palette: no black UI blocks */
:root, html, body, [data-theme="dark"], [data-theme="light"] {
    --ui-bg: #f6f9ff;
    --ui-panel: #ffffff;
    --ui-ink: #122033;
    --ui-muted: #506078;
    --ui-line: #d7e1ef;
    --ui-dark: #2563eb;
    --ui-hot: #e73572;
    --ui-violet: #4f7cff;
    --ui-cyan: #07a7c4;
    --ui-lime: #18a957;
    --ui-shadow: 0 12px 30px rgba(37, 99, 235, .09);
    --primary-color: #2563eb;
    --secondary-color: #07a7c4;
    --success-color: #18a957;
    --danger-color: #e11d48;
    --warning-color: #d97706;
    --info-color: #2563eb;
}

body.logged-in,
[data-theme="dark"] body.logged-in,
[data-theme="light"] body.logged-in {
    background: linear-gradient(180deg, #f8fbff 0%, #f2f6fd 100%) !important;
}

body:not(.logged-in),
[data-theme="dark"] body:not(.logged-in),
[data-theme="light"] body:not(.logged-in) {
    background: radial-gradient(circle at 18% 12%, rgba(37, 99, 235, .12), transparent 30%),
                radial-gradient(circle at 84% 20%, rgba(7, 167, 196, .14), transparent 32%),
                linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
}

.auth-card, .login-card {
    border-top: 4px solid #2563eb !important;
}

.auth-brand, .auth-brand h1, .auth-brand p, .auth-footer {
    color: var(--ui-ink) !important;
}

.auth-brand-icon {
    background: linear-gradient(135deg, #2563eb, #07a7c4) !important;
    box-shadow: 0 14px 32px rgba(37, 99, 235, .18) !important;
}

.auth-tabs {
    background: #eaf1fb !important;
}

.auth-tab {
    color: #506078 !important;
}

.auth-tab.active,
.navbar-links a.active,
.navbar-links a:hover,
.admin-sidebar .nav-item.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #07a7c4) !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .20) !important;
}

.btn, .btn-primary, button[type="submit"], input[type="submit"] {
    background: linear-gradient(135deg, #2563eb, #07a7c4) !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .20) !important;
}

.btn:hover, .btn-primary:hover, button[type="submit"]:hover {
    background: linear-gradient(135deg, #1d4ed8, #0891b2) !important;
}

.btn-outline,
.hero-actions .btn.btn-outline {
    color: #1d4ed8 !important;
    background: #ffffff !important;
    border: 1px solid #aac4ef !important;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="url"], input[type="tel"], select, textarea, .form-input {
    color: #122033 !important;
    background: #ffffff !important;
    border: 1px solid #cbd8ea !important;
}

input::placeholder, textarea::placeholder {
    color: #7a8799 !important;
}

input:focus, select:focus, textarea:focus, .form-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .14) !important;
}

.input-icon-wrap i,
.page-header h2 i,
.quick-item i,
.admin-sidebar .nav-item i,
.admin-topbar .hamburger,
.login-card .login-icon i {
    color: #2563eb !important;
    -webkit-text-fill-color: currentColor !important;
}

.hero-section {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #07a7c4 58%, #18a957) !important;
}

.hero-section h1, .hero-section p {
    color: #ffffff !important;
}

.navbar, .mobile-tab, .admin-topbar, .admin-sidebar {
    background: rgba(255, 255, 255, .97) !important;
}

.navbar-brand i,
.mobile-tab a.active,
.mobile-tab a:hover {
    color: #2563eb !important;
    -webkit-text-fill-color: currentColor !important;
}

.card, .auth-card, .stat-card, .quick-item, .mat-card, .table-wrap,
.edit-container, .data-table, .login-card {
    border-color: #d7e1ef !important;
}

.badge-success { color: #0f6b37 !important; background: #dcfce7 !important; }
.badge-danger { color: #9f1239 !important; background: #ffe4ec !important; }
.badge-warning { color: #8a4b05 !important; background: #fff3d6 !important; }
.badge-info, .badge-secondary { color: #075985 !important; background: #e0f2fe !important; }

.table-wrap th, .data-table thead th {
    color: #506078 !important;
    background: #f1f6fd !important;
}

.table-wrap td, .data-table tbody td {
    color: #122033 !important;
}

.action-links a, .action-links button, .table-wrap .action-links a {
    color: #1d4ed8 !important;
    background: #eaf1fb !important;
}

/* admin dashboard layout polish */
.admin-topbar .admin-avatar {
    display: none !important;
}

.admin-topbar .admin-info {
    gap: 0 !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    color: #122033 !important;
    background: #ffffff !important;
    border: 1px solid #d7e1ef !important;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .08) !important;
}

.admin-topbar .admin-info::before {
    content: "管理员";
    margin-right: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #eaf1fb;
    font-size: 12px;
    font-weight: 800;
}

.admin-topbar .admin-info span {
    color: #122033 !important;
    font-weight: 800 !important;
}

.admin-main {
    max-width: none !important;
}

.admin-main > .hero-section {
    width: 100% !important;
    max-width: none !important;
    min-height: 210px !important;
    margin: 0 0 30px !important;
    padding: 34px 44px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 28px !important;
    text-align: left !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #2563eb 0%, #07a7c4 52%, #18a957 100%) !important;
    box-shadow: 0 18px 42px rgba(37, 99, 235, .16) !important;
    overflow: hidden !important;
}

.admin-main > .hero-section::before,
.admin-main > .hero-section::after {
    display: block !important;
    pointer-events: none !important;
}

.admin-main > .hero-section::before {
    width: 360px !important;
    height: 360px !important;
    top: -160px !important;
    right: -80px !important;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%) !important;
}

.admin-main > .hero-section::after {
    width: 280px !important;
    height: 280px !important;
    left: auto !important;
    right: 18% !important;
    bottom: -160px !important;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%) !important;
}

.admin-main > .hero-section h1 {
    margin: 0 0 12px !important;
    font-size: clamp(30px, 2.8vw, 44px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
}

.admin-main > .hero-section p {
    max-width: 720px !important;
    margin: 0 !important;
    font-size: 17px !important;
    color: rgba(255, 255, 255, .92) !important;
}

.admin-main > .hero-section .hero-actions {
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    min-width: 320px !important;
    margin: 0 !important;
}

.admin-main > .hero-section .btn {
    min-width: 132px !important;
    padding: 13px 22px !important;
}

.admin-main > .hero-section .btn-outline {
    color: #1d4ed8 !important;
    background: #ffffff !important;
    border-color: rgba(255,255,255,.78) !important;
}

.admin-main .page-header {
    margin-top: 8px !important;
    border-bottom-color: #d7e1ef !important;
}

.admin-main .page-header > .form-actions {
    margin-top: 0 !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
}

.admin-main .page-header > .form-actions .btn {
    width: auto !important;
    min-width: 154px !important;
}

.admin-main .dash-grid {
    width: 100% !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
}

.dash-stat .stat-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 22px !important;
}

.dash-stat .stat-icon i {
    color: #fff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #fff !important;
}

.quick-grid .quick-item {
    justify-content: flex-start !important;
    gap: 14px !important;
    min-height: 96px !important;
}

.quick-grid .quick-item i {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    color: #fff !important;
    background-color: #2563eb !important;
    background-image: linear-gradient(135deg, #2563eb, #07a7c4) !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .18) !important;
    -webkit-text-fill-color: #fff !important;
}

.quick-grid .quick-item > i.fas,
.quick-grid .quick-item > i.fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.quick-grid .quick-item > i.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.dash-stat .stat-icon,
.stat-card .stat-icon {
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

.admin-main .dash-stat {
    min-height: 132px !important;
    padding: 20px !important;
    justify-content: flex-start !important;
}

.admin-main .dash-stat .stat-number {
    font-size: 30px !important;
}

@media (max-width: 1280px) {
    .admin-main .dash-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .admin-main > .hero-section {
        grid-template-columns: 1fr !important;
        padding: 28px 22px !important;
    }
    .admin-main > .hero-section .hero-actions {
        justify-content: flex-start !important;
        min-width: 0 !important;
    }
    .admin-main .dash-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    .admin-main > .hero-section {
        min-height: auto !important;
        padding: 24px 18px !important;
    }
    .admin-main > .hero-section h1 {
        font-size: 26px !important;
    }
    .admin-main .dash-grid {
        grid-template-columns: 1fr !important;
    }
    .admin-topbar .admin-info::before {
        display: none !important;
    }
}

/* final responsive form/card normalization */
*, *::before, *::after {
    box-sizing: border-box !important;
}

.admin-topbar .admin-info::before {
    content: "Admin" !important;
}

:root {
    --control-height: 52px;
    --control-radius: 12px;
    --control-x: 16px;
}

.form-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 18px 22px !important;
    align-items: end !important;
}

.form-row > .form-group,
.form-group {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
}

.form-row > .form-group:first-of-type {
    min-width: min(100%, 300px) !important;
}

.form-stack {
    width: 100% !important;
    display: grid !important;
    gap: 18px !important;
}

.form-group label,
.admin-main label,
#app label {
    min-height: 22px !important;
    margin: 0 0 8px !important;
    color: #122033 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="url"], input[type="tel"], input[type="file"], select, textarea, .form-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--control-height) !important;
    margin: 0 0 14px !important;
    padding: 0 var(--control-x) !important;
    border-radius: var(--control-radius) !important;
    line-height: 1.35 !important;
}

input:not([type]):focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .14) !important;
}

input[type="file"] {
    display: flex !important;
    align-items: center !important;
    padding: 12px var(--control-x) !important;
}

textarea, textarea.form-input {
    min-height: 118px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.btn, .btn-primary, button, input[type="submit"], .form-actions a {
    min-height: var(--control-height) !important;
    padding: 0 22px !important;
    border-radius: var(--control-radius) !important;
    white-space: nowrap !important;
}

.form-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
}

.form-actions .btn,
.form-row .btn,
.form-row button[type="submit"] {
    width: 100% !important;
}

.admin-main .card:not(.dash-stat):not(.mat-card) {
    padding: clamp(20px, 2.2vw, 30px) !important;
}

.admin-main .card > form,
.admin-main form.card,
#app .card form,
#app form.card {
    width: 100% !important;
}

.admin-main .card > .form-row {
    grid-template-columns: minmax(280px, 1.4fr) minmax(180px, .85fr) minmax(180px, .85fr) minmax(180px, .85fr) !important;
}

.admin-main .card > .form-row .form-group:last-child {
    align-self: end !important;
}

.admin-main .card > .form-row .form-group:last-child .btn,
.admin-main .card > .form-row .form-group:last-child button {
    margin-bottom: 14px !important;
}

.info-grid,
.quick-grid,
.stat-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
}

.material-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

.info-item,
.quick-item,
.stat-card,
.mat-card,
.dash-stat {
    min-height: 128px !important;
}

.table-wrap {
    width: 100% !important;
    max-width: 100% !important;
}

.admin-main,
.main-content {
    width: 100% !important;
}

@media (min-width: 1200px) {
    .admin-main {
        padding: 30px 34px !important;
    }
    .main-content {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

@media (max-width: 1024px) {
    .form-row,
    .admin-main .card > .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .admin-main {
        padding: 22px !important;
    }
    .material-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    :root {
        --control-height: 50px;
        --control-x: 14px;
    }
    .form-row,
    .admin-main .card > .form-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .form-row .btn,
    .form-row button[type="submit"],
    .form-actions .btn,
    .form-actions button {
        width: 100% !important;
    }
    .admin-main .card:not(.dash-stat):not(.mat-card) {
        padding: 18px !important;
    }
    .admin-main .page-header > .form-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    .admin-main .page-header > .form-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
    }
    .material-grid {
        grid-template-columns: 1fr !important;
    }
    .info-item,
    .quick-item,
    .stat-card,
    .mat-card,
    .dash-stat {
        min-height: auto !important;
    }
}