/* Tabler 1.6.0 integration for the ERP admin website only.
 * Native dialogs, hidden/disabled state, request handlers and CSRF stay intact.
 * Self-hosted stylesheet; no Bootstrap JS, CDN, fonts or model calls required.
 */
html[data-admin-theme="tabler"] {
  --ink: #182433; --muted: #667382; --line: #e6eaf0;
  --paper: #f6f8fb; --green: #2b7d51; --nav: #fff;
  --yellow: #206bc4; --yellow-hover: #185aa8; --radius: 12px;
  --tblr-primary: #206bc4; --tblr-body-bg: #f6f8fb;
  --tblr-body-font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  color-scheme: light;
}
body { font-family: var(--tblr-body-font-family); background: var(--paper); color: var(--ink); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #206bc480; outline-offset: 3px; }
.button { min-height: 38px; padding: 9px 16px; gap: 8px; border-radius: 7px; font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px #18243306; }
.button.primary { background: var(--tblr-primary); border-color: #206bc4; color: #fff; }
.button.primary:hover:not(:disabled) { background: #185aa8; border-color: #185aa8; }
.button.secondary { background: #fff; color: #354354; border-color: #dce1e7; }
.button.secondary:hover:not(:disabled), .button.quiet:hover { background: #f1f5f9; }
.button.quiet { color: #596878; box-shadow: none; }
.button.danger { color: #fff; background: #c13737; border-color: #c13737; }
.button.small { min-height: 32px; font-size: 12px; padding: 6px 11px; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea { border: 1px solid #dce1e7; border-radius: 7px; color: #182433; background: #fff; box-shadow: 0 1px 2px #18243304; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #80aee6; box-shadow: 0 0 0 3px #206bc414; }
input::placeholder, textarea::placeholder { color: #98a2af; }
label { color: #354354; font-size: 13px; font-weight: 600; }
input[type="checkbox"] { width: auto; min-height: 0; accent-color: #206bc4; }
.eyebrow { color: #82909f; font-size: 10px; letter-spacing: 1.8px; }
.brand { color: #182433; gap: 11px; }
.brand b { color: #206bc4; font-weight: 700; }
.brand small { color: #7d8997; opacity: 1; letter-spacing: 1px; font-size: 11px; }
.brand-mark { color: #fff; background: #206bc4; border-radius: 10px; box-shadow: 0 4px 10px #206bc41a; }
.sidebar { width: 248px; padding: 28px 18px 22px; border-right: 1px solid var(--line); color: #354354; background: #fff; }
.sidebar .brand { font-size: 19px; padding: 0 12px; margin-bottom: 36px; }
.sidebar .brand-mark { width: 40px; height: 40px; flex-shrink: 0; }
.sidebar nav { display: block; }
.nav-label { color: #98a2af; letter-spacing: 1px; font-size: 10px; margin: 0 14px 9px; }
.nav-section { margin-top: 25px; }
.nav-item { min-height: 43px; padding: 11px 14px; margin: 4px 0; color: #596878; gap: 12px; border-radius: 7px; font-weight: 500; }
.nav-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.nav-item.active { background: #e9f2fc; color: #206bc4; font-weight: 650; }
.nav-item:not(.active):hover { background: #f5f7fa; color: #182433; }
.nav-item small { color: #7d8997; border: 0; background: #f1f4f8; padding: 1px 5px; font-size: 9px; }
.nav-item.active small { background: #dceafc; color: #206bc4; }
.sidebar-note { margin-top: auto; padding: 20px 14px 0; color: #82909f; font-size: 11px; }
.sidebar-note strong { color: #596878; font-weight: 600; }
.sidebar-note p { margin-top: 8px; }
.sidebar-note .version { padding-top: 14px; color: #98a2af; font-size: 10px; }
.topbar { height: 72px; padding: 0 32px; border-color: var(--line); }
.breadcrumbs { color: #82909f; font-size: 12px; }
.breadcrumbs strong { color: #354354; font-weight: 500; }
.topbar-actions { gap: 16px; }
.environment { border: 1px solid #dcebdd; background: #f1f8f2; color: #2b7d51; border-radius: 6px; }
.admin-name { display: inline-flex; align-items: center; gap: 8px; color: #354354; }
.admin-name::before { content: "管"; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e9f2fc; color: #206bc4; font-size: 11px; font-weight: 500; }
.content { padding: 30px 32px 18px; max-width: 1600px; }
.page-heading { margin-bottom: 24px; }
.page-heading h1 { font-size: 27px; font-weight: 650; letter-spacing: -.6px; }
.page-heading .eyebrow { margin-bottom: 6px; }
.page-heading p { font-size: 12px; color: #82909f; margin-top: 8px; }
.stats-grid { gap: 16px; margin-bottom: 22px; }
.stat-card { display: block; position: relative; min-height: 150px; padding: 22px 21px; border-color: var(--line); box-shadow: 0 2px 4px #18243303; }
.stat-card > span:not(.stat-icon) { font-size: 12px; color: #667382; }
.stat-card strong { font-size: 32px; font-weight: 650; letter-spacing: -.7px; margin: 7px 0 9px; }
.stat-card small { color: #82909f; font-size: 10px; }
.stat-icon { position: absolute; right: 18px; top: 19px; width: 32px; height: 32px; display: grid; place-items: center; background: #e9f2fc; color: #206bc4; border-radius: 8px; font-size: 18px; }
.stat-icon.stat-positive { color: #2b7d51; background: #eaf6ee; }
.stat-icon.stat-neutral { color: #82909f; background: #f0f3f7; }
.stat-icon.stat-purple { color: #7952b3; background: #f2edfa; }
.notice { background: #f0f6fe; border: 1px solid #d9e8fa; color: #47709a; border-radius: 8px; font-size: 12px; line-height: 1.8; margin-bottom: 22px; }
.notice-symbol { color: #206bc4; border-color: #80aee6; }
.panel { border-color: var(--line); border-radius: 12px; box-shadow: 0 2px 4px #18243303; }
.panel-heading { padding: 22px 22px 18px; }
.panel-heading h2 { font-size: 15px; font-weight: 650; }
.panel-heading > div { flex-wrap: wrap; gap: 10px; }
.panel-heading .muted { color: #82909f; font-size: 11px; }
.filters { padding: 0 22px 20px; }
.filters input, .filters select { min-height: 38px; }
.search-field { max-width: 360px; }
th { padding: 12px 22px; background: #f8fafc; color: #7d8997; border-color: var(--line); font-size: 11px; font-weight: 600; }
td { padding: 18px 22px; border-color: #eef1f5; color: #354354; }
tbody tr:hover { background: #f9fbfe; }
td small { color: #98a2af; }
.avatar { width: 34px; height: 34px; background: #edf2f8; color: #667382; border-radius: 50%; box-shadow: none; }
.avatar.admin { background: #e9f2fc; color: #206bc4; }
.badge { font-size: 10px; font-weight: 500; letter-spacing: 0; padding: 5px 8px; border-radius: 5px; border: 0; }
.badge.enabled { background: #eaf6ee; color: #2b7d51; }
.badge.disabled { background: #f1f3f6; color: #667382; }
.badge.admin { background: #e9f2fc; color: #206bc4; }
.badge.user { background: #f1f4f8; color: #667382; }
.badge.pending { background: #fff4de; color: #9c6a10; }
.text-button { color: #206bc4; font-weight: 500; }
.text-button.stop { color: #b84949; }
.wallet-link { color: #206bc4; }
.table-footer { border-color: var(--line); padding: 16px 22px; color: #82909f; }
.empty-state { color: #82909f; padding: 55px 24px; }
.empty-state h3 { color: #596878; font-size: 15px; }
.empty-state > span { color: #bcc5d0; }
.workspace-footer { color: #98a2af; font-size: 10px; padding-top: 24px; }
.pricing-services article { background: #f8fafc; border-color: var(--line); border-radius: 9px; position: relative; padding: 20px; }
.pricing-services h3 { color: #206bc4; font-size: 14px; font-weight: 600; }
.pricing-services .fine-print { color: #82909f; }
.pricing-services label { font-size: 12px; }
.pricing-actions { border-top: 1px solid var(--line); padding-top: 20px; }
.pricing-summary, #pricing-publish-readiness { color: #596878; }
.pricing-history { margin-top: 22px; }
.membership-note { background: #f0f6fe; color: #47709a; border-radius: 7px; padding: 10px 12px; }
.wallet-stats article { background: #f8fafc; border-color: var(--line); }
.wallet-stats article:last-child { background: #e9f2fc; border-color: #d9e8fa; }
.wallet-stats article:last-child strong { color: #206bc4; }
.wallet-stats strong { font-size: 28px; letter-spacing: -.5px; }
.wallet-heading { padding-left: 0; padding-right: 0; }
.billing-flow article { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.billing-flow article > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #206bc4; background: #e9f2fc; }
.billing-flow h3, .billing-notes h3 { font-size: 14px; font-weight: 600; }
.billing-flow p, .billing-notes p { color: #82909f; font-size: 12px; }
.security-panel { max-width: 600px; padding: 28px; }
.security-panel h2 { font-size: 17px; }
.form-error, .inline-error { background: #fdf0f0; color: #b84949; border: 1px solid #f2dcdc; }
dialog { margin: auto; inset: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: #182433; padding: 28px; box-shadow: 0 24px 80px #1824332b; max-height: 90dvh; overflow: auto; }
dialog:not([open]) { display: none; }
dialog::backdrop { background: #18243380; backdrop-filter: blur(2px); }
.dialog-heading h2 { font-size: 21px; font-weight: 650; }
.dialog-heading .eyebrow { font-size: 9px; }
.icon-button { color: #82909f; border-radius: 6px; }
.icon-button:hover { color: #182433; background: #f1f4f8; }
.dialog-actions { padding-top: 18px; border-top: 1px solid var(--line); margin-top: 24px; }
.dialog-actions .button { min-height: 38px; }
.toast { background: #182433; color: #fff; border-radius: 8px; box-shadow: 0 6px 24px #18243324; }
/* The existing app toggles hidden, not Bootstrap's .show class. */
.toast:not([hidden]) { display: block; opacity: 1; width: auto; }
.preview-banner { background: #fff4de; color: #9c6a10; border-color: #f3e2ba; font-size: 11px; padding: 7px 16px; }
.login-layout { grid-template-columns: 1fr 1fr; }
.login-intro { background: #f0f6fe; color: #182433; padding: 48px 64px; }
.login-intro::after { border-color: #206bc41a; box-shadow: 0 0 0 65px #206bc405, 0 0 0 130px #206bc403; }
.intro-copy .eyebrow { color: #206bc4; }
.intro-copy h1 { font-size: clamp(30px,3.1vw,44px); font-weight: 650; }
.intro-copy p { color: #667382; font-size: 14px; }
.intro-chips span { background: #ffffff80; border-color: #cdddF2; color: #47709a; border-radius: 7px; font-size: 11px; }
.intro-footer { color: #667382; }
.login-card-wrap { background: #fff; }
.login-card { max-width: 390px; }
.login-card h2 { font-size: 27px; font-weight: 650; }
.login-card form { margin-top: 28px; }
.login-card .button { min-height: 44px; }
.login-note { color: #98a2af; }
.demo-hint { background: #fff4de; color: #9c6a10; }
body > .notice { border-radius: 0; margin-bottom: 0; justify-content: center; font-size: 11px; padding: 7px 16px; }
@media (min-width: 1450px) { .content { padding: 36px 42px 20px; } .topbar { padding: 0 42px; } .sidebar { width: 260px; } }
@media (max-width: 1100px) { .sidebar { width: 222px; padding: 25px 14px; } .content { padding: 26px 24px; } .topbar { padding: 0 24px; } .stats-grid { gap: 12px; } .stat-card { padding: 18px 16px; } .stat-icon { right: 12px; top: 15px; width: 26px; height: 26px; font-size: 15px; } .stat-card small { font-size: 10px; } }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-card { min-height: 137px; } .topbar-actions { gap: 8px; } .environment { display: none; } }
@media (max-width: 760px) {
  .sidebar { width: 100%; padding: 18px 20px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .brand { margin-bottom: 18px; padding: 0; }
  .sidebar nav { display: flex; gap: 6px; overflow-x: auto; }
  .nav-item { width: auto; flex-shrink: 0; padding: 10px 12px; font-size: 12px; min-height: 38px; }
  .nav-item svg { width: 17px; height: 17px; } .nav-label, .nav-item small, .sidebar-note { display: none; }
  .topbar { height: 62px; padding: 0 18px; } .admin-name::before { display: none; }
  .content { padding: 24px 18px 18px; } .page-heading { flex-wrap: wrap; gap: 14px; } .page-heading h1 { font-size: 25px; }
  .stats-grid { gap: 10px; } .stat-card strong { font-size: 29px; } .stat-card small { font-size: 10px; }
  .panel-heading { padding: 18px 16px; flex-wrap: wrap; } .filters { padding: 0 16px 18px; } .table-footer { padding: 14px 16px; }
  dialog { padding: 22px; max-width: calc(100vw - 24px); } .wide-dialog { padding: 18px; }
  .wallet-heading > div { gap: 6px; } .wallet-stats { gap: 8px; } .wallet-stats strong { font-size: 23px; }
  .dialog-actions { flex-wrap: wrap; } .pricing-form { padding: 0 16px 20px; }
  .login-layout { grid-template-columns: 1fr; } .login-intro { padding: 26px; } .intro-copy { padding: 32px 0 12px; }
  .intro-copy h1 { font-size: 30px; } .login-card-wrap { padding: 32px 24px; }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }