:root {
  --ui-bg: #f6f7f9;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ffffff;
  --ui-subtle: #f3f5f7;
  --ui-hover: #eef2f6;
  --ui-border: #e5e8ec;
  --ui-border-strong: #d9dee5;
  --ui-text: #111827;
  --ui-text-2: #4b5563;
  --ui-muted: #8a94a3;
  --ui-accent: #2563eb;
  --ui-accent-soft: #eef4ff;
  --ui-success: #16a34a;
  --ui-danger: #dc2626;
  --ui-radius: 8px;
  --ui-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .035);
}

html[data-theme="dark"], body[data-theme="dark"] {
  --ui-bg: #0c0e12;
  --ui-surface: #12151b;
  --ui-surface-raised: #171a21;
  --ui-subtle: #181c23;
  --ui-hover: #20252e;
  --ui-border: #272c35;
  --ui-border-strong: #343b47;
  --ui-text: #f3f4f6;
  --ui-text-2: #c3c8d0;
  --ui-muted: #858d9a;
  --ui-accent: #6ea0ff;
  --ui-accent-soft: #172440;
  --ui-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 12px 30px rgba(0, 0, 0, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html, body, #root { min-height: 100%; }
html { background: var(--ui-bg); }
body, #root, #page-container, #main-container {
  background: var(--ui-bg) !important;
  color: var(--ui-text);
}
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .font-w600, .font-w700 { color: var(--ui-text) !important; letter-spacing: 0; }
a { color: var(--ui-accent); }
* { scrollbar-width: thin; scrollbar-color: #c3cad4 transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3cad4; border-radius: 8px; }

/* The light theme is intentionally white, including the sidebar. */
#sidebar, #sidebar.bg-header-dark, .bg-header-dark {
  background: var(--ui-surface) !important;
  color: var(--ui-text-2) !important;
}
#sidebar {
  border-right: 1px solid var(--ui-border);
  box-shadow: none !important;
}
#sidebar .content-header, #sidebar .bg-white-10 {
  min-height: 64px;
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
#sidebar .content-header a, #sidebar .content-header h1, #sidebar .content-header span {
  color: var(--ui-text) !important;
  font-weight: 650;
}
#sidebar .content-side { padding: 18px 10px 22px; }
.nav-main-heading {
  margin: 22px 12px 7px !important;
  padding: 0 !important;
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 20px;
  letter-spacing: .04em;
}
.nav-main-link {
  min-height: 42px;
  margin: 3px 0 !important;
  padding: 10px 12px !important;
  color: var(--ui-text-2) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-weight: 500;
  transition: background-color .16s ease, color .16s ease;
}
.nav-main-link .nav-main-link-icon, .nav-main-link i { color: var(--ui-muted) !important; transition: color .16s ease; }
.nav-main-link:hover { color: var(--ui-text) !important; background: var(--ui-hover) !important; }
.nav-main-link:hover i { color: var(--ui-text-2) !important; }
.nav-main-link.active {
  color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--ui-accent) !important;
  font-weight: 600;
}
.nav-main-link.active i { color: var(--ui-accent) !important; }
.v2board-copyright { color: var(--ui-muted) !important; opacity: .7; }

#page-header {
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border);
  box-shadow: none !important;
}
#page-header .content-header {
  min-height: 64px;
  padding: 10px 24px;
  background: transparent !important;
  border: 0 !important;
}
.v2board-container-title { color: var(--ui-text) !important; font-size: 15px; font-weight: 650; }
#page-header .btn { min-width: 38px; height: 38px; padding: 8px 11px; }

.content, #main-container > .p-0 { padding: 22px !important; }
.content.content-full { max-width: 1480px; margin: 0 auto; }
.block {
  margin-bottom: 16px;
  background: var(--ui-surface) !important;
  color: var(--ui-text);
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
  overflow: hidden;
}
.block-header, .block-header-default {
  min-height: 56px;
  padding: 14px 18px;
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
.block-title { color: var(--ui-text) !important; font-size: 15px; font-weight: 650; }
.block-content { padding: 18px; color: var(--ui-text-2); }
.block-content-full { padding: 18px; }
.border, .border-top, .border-right, .border-bottom, .border-left { border-color: var(--ui-border) !important; }
.text-muted, .description, small { color: var(--ui-muted) !important; }
.text-primary { color: var(--ui-accent) !important; }

.btn, .ant-btn {
  min-height: 36px;
  border-radius: 6px !important;
  font-weight: 550;
  box-shadow: none !important;
  transition: background-color .16s, border-color .16s, color .16s;
}
.btn:not(.btn-primary), .ant-btn:not(.ant-btn-primary) {
  color: var(--ui-text-2) !important;
  background: var(--ui-surface) !important;
  border-color: var(--ui-border-strong) !important;
}
.btn:not(.btn-primary):hover, .ant-btn:not(.ant-btn-primary):hover {
  color: var(--ui-text) !important;
  background: var(--ui-hover) !important;
}
.btn-primary, .ant-btn-primary {
  color: #fff !important;
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
}
.btn-primary:hover, .ant-btn-primary:hover { filter: brightness(.92); }

/* User dashboard shortcuts become a clean, responsive grid. */
.v2board-shortcuts-item {
  min-height: 94px !important;
  padding: 16px 18px !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  transition: border-color .16s, background-color .16s, transform .16s;
}
.v2board-shortcuts-item:hover {
  background: var(--ui-subtle) !important;
  border-color: var(--ui-border-strong) !important;
  transform: translateY(-1px);
}
.v2board-shortcuts-item i { color: var(--ui-muted) !important; }
.v2board-shortcuts-item:hover i { color: var(--ui-accent) !important; }
.v2board-shortcuts-item .description { font-size: 12px; }

/* Admin home: replace the oversized legacy tiles with compact tools. */
.js-classic-nav { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.js-classic-nav > .block-content { padding: 0 !important; }
.js-classic-nav .row.no-gutters.border {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border: 0 !important;
}
.js-classic-nav .row.no-gutters.border > [class*="col-"] { width: auto !important; max-width: none !important; flex: none !important; }
.js-classic-nav .block {
  min-height: 96px;
  margin: 0 !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
}
.js-classic-nav .block-content-full {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 94px;
  padding: 18px !important;
  text-align: left !important;
}
.js-classic-nav i {
  display: inline-grid !important;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 !important;
  color: var(--ui-accent) !important;
  font-size: 20px !important;
  background: var(--ui-accent-soft);
  border-radius: 7px;
}
.js-classic-nav .text-uppercase { font-size: 13px; letter-spacing: 0; text-transform: none !important; }
.js-classic-nav .block:hover { background: var(--ui-subtle) !important; border-color: var(--ui-border-strong) !important; transform: translateY(-1px); }

/* Keep data dashboards dense; empty charts should not consume the viewport. */
#main-container canvas { max-height: 300px !important; }
#main-container .block:has(canvas) { min-height: 0 !important; }
#main-container .block:has(canvas) .block-content { max-height: 340px; }
#main-container .display-3, #main-container .display-4 { color: var(--ui-text) !important; font-weight: 500; letter-spacing: -.02em; }

/* Ant Design surfaces used throughout user and admin pages. */
.ant-card, .ant-modal-content, .ant-modal-header, .ant-modal-footer,
.ant-dropdown-menu, .ant-popover-inner, .ant-select-dropdown {
  color: var(--ui-text) !important;
  background: var(--ui-surface-raised) !important;
  border-color: var(--ui-border) !important;
}
.ant-card, .ant-modal-content, .ant-dropdown-menu, .ant-popover-inner {
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
}
.ant-card-head, .ant-card-bordered, .ant-modal-header, .ant-modal-footer { border-color: var(--ui-border) !important; }
.ant-card-head-title, .ant-modal-title, .ant-form-item-label > label { color: var(--ui-text) !important; font-weight: 600; }
.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title { color: var(--ui-text-2) !important; }
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover { background: var(--ui-hover) !important; }
.ant-input, .ant-input-affix-wrapper, .ant-select-selection, .ant-input-number, textarea {
  min-height: 38px;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  border-color: var(--ui-border-strong) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.ant-input:focus, .ant-input-affix-wrapper-focused, .ant-select-focused .ant-select-selection {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 14%, transparent) !important;
}
.ant-input::placeholder { color: var(--ui-muted) !important; }
.ant-table, .ant-table-content, .ant-table-body, .ant-table-fixed-left, .ant-table-fixed-right { background: var(--ui-surface) !important; color: var(--ui-text-2); }
.ant-table-thead > tr > th {
  height: 46px;
  padding: 12px 14px !important;
  color: var(--ui-muted) !important;
  background: var(--ui-subtle) !important;
  border-color: var(--ui-border) !important;
  font-size: 12px;
  font-weight: 650;
}
.ant-table-tbody > tr > td { height: 52px; padding: 12px 14px !important; color: var(--ui-text-2); border-color: var(--ui-border) !important; }
.ant-table-tbody > tr:hover > td { background: var(--ui-hover) !important; }
.ant-table-placeholder { color: var(--ui-muted) !important; background: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
.ant-pagination-item, .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  border-radius: 5px !important;
}
.ant-pagination-item a { color: var(--ui-text-2) !important; }
.ant-pagination-item-active { border-color: var(--ui-accent) !important; }
.ant-tabs-bar { border-color: var(--ui-border) !important; }
.ant-tabs-tab { color: var(--ui-muted) !important; }
.ant-tabs-tab-active, .ant-tabs-tab:hover { color: var(--ui-text) !important; }
.ant-tabs-ink-bar { height: 2px !important; background: var(--ui-accent) !important; }
.ant-tag { border-radius: 4px !important; }
.ant-alert { border-radius: 7px !important; }
.ant-empty-description, .ant-form-explain { color: var(--ui-muted) !important; }

/* Purchase cards and authentication screens. */
[class*="plan"], [class*="Plan"] { border-radius: var(--ui-radius); }
.price, .ant-statistic-content { color: var(--ui-text) !important; font-weight: 650; }
.login-container, .register-container, [class*="login"], [class*="Login"] { color: var(--ui-text); }

@media (max-width: 991.98px) {
  .content, #main-container > .p-0 { padding: 14px !important; }
  #page-header .content-header { padding: 9px 14px; }
  .js-classic-nav .row.no-gutters.border { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .content, #main-container > .p-0 { padding: 10px !important; }
  .block { margin-bottom: 10px; }
  .block-header { min-height: 50px; padding: 12px 14px; }
  .block-content, .block-content-full { padding: 14px; }
  .js-classic-nav .row.no-gutters.border { grid-template-columns: 1fr; gap: 8px; }
  .js-classic-nav .block, .js-classic-nav .block-content-full { min-height: 72px; }
  .v2board-shortcuts-item { min-height: 82px !important; }
  .ant-table-wrapper { overflow-x: auto; }
}