@charset "utf-8";

:root { --brand-gradient: linear-gradient(135deg,#38bdf8 0%,#a855f7 55%,#e040fb 100%); --brand-gradient-soft: linear-gradient(135deg,rgba(56,189,248,.08),rgba(168,85,247,.08) 55%,rgba(224,64,251,.08)); --brand-accent: #8b5cf6; --brand-accent-hover: #7c3aed; --brand-soft: #f5f3ff; --brand-ring: rgba(139,92,246,.18); --sb-bg: #14161e; --sb-bg-raised: #1c1f2b; --sb-border: #262a36; --sb-text: #7a8094; --sb-text-hover: #d2d5e6; --sb-text-active: #e0dcfc; --sb-icon: #5a5f72; --bg: #fafafb; --bg-subtle: #f5f5f7; --card: #fff; --card-hover: #fcfcfd; --overlay: rgba(10,11,18,.55); --border: #ececf0; --border-strong: #d5d7de; --border-subtle: #f3f3f5; --fg: #0e1117; --fg-2: #4a5162; --fg-3: #8a90a0; --fg-4: #b4b9c5; --fg-inverse: #fff; --success: #0d9f6e; --success-bg: #ecfdf4; --success-bd: #a7f3c9; --success-tx: #046c4e; --danger: #e5484d; --danger-bg: #fef3f3; --danger-bd: #fbcdcd; --danger-tx: #b42318; --warning: #d97706; --warning-bg: #fff8eb; --warning-bd: #fde1a6; --warning-tx: #92400e; --info: #0284c7; --info-bg: #f0f9ff; --info-bd: #bae0fd; --info-tx: #0369a1; --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-card: 12px; --r-modal: 16px; --r-pill: 999px; --sh-xs: 0 1px 2px rgba(16,24,40,.04); --sh-sm: 0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04); --sh-md: 0 4px 8px -2px rgba(16,24,40,.06),0 2px 4px -2px rgba(16,24,40,.04); --sh-lg: 0 12px 24px -6px rgba(16,24,40,.08),0 4px 8px -2px rgba(16,24,40,.04); --sh-dropdown: 0 8px 20px -4px rgba(16,24,40,.1),0 2px 4px -1px rgba(16,24,40,.06); --sh-modal: 0 24px 60px -12px rgba(10,11,18,.2),0 8px 16px -4px rgba(10,11,18,.08); --ring-focus: 0 0 0 4px var(--brand-ring); --sb-w: 256px; --nav-h: 56px; --dur-fast: .12s; --dur-base: .18s; --dur-slow: .28s; --ease: cubic-bezier(.4,0,.2,1); }

* { box-sizing: border-box; }

html, body { margin: 0px; padding: 0px; }

body { font-family: Inter, "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; line-height: 1.55; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.mono { font-family: "JetBrains Mono", "SF Mono", monospace; }

.container-fluid { display: flex; min-height: 100vh; padding: 0px; }

#menu { width: var(--sb-w); min-width: var(--sb-w); background: var(--sb-bg); color: var(--sb-text); position: sticky; top: 0px; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; border-right: 1px solid var(--sb-border); z-index: 50; transition: transform var(--dur-base) var(--ease); }

#sidebar-fusion-wrapper { display: contents; }

#menu::-webkit-scrollbar { width: 6px; }

#menu::-webkit-scrollbar-thumb { background: rgb(28, 31, 43); border-radius: 3px; }

#brandWrapper { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--sb-border); margin-bottom: 12px; }

#brandWrapper::before { content: ""; display: block; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; background: var(--brand-gradient); margin-bottom: 8px; box-shadow: rgba(168, 85, 247, 0.3) 0px 4px 14px; }

#brandWrapper.has-brand-logo::before { display: none; }

.sidebar-brand-logo { display: block; width: 24px; height: 24px; object-fit: contain; margin-bottom: 8px; }

#site_title { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-icon); }

.brandName { font-size: 17px; font-weight: 700; color: rgb(228, 230, 240); letter-spacing: -0.01em; }

ul.menu { list-style: none; padding: 4px 10px; margin: 0px; flex: 1 1 0%; }

ul.menu > li { position: relative; margin-bottom: 1px; }

ul.menu > li > a { display: flex; align-items: center; gap: 11px; padding: 8px 12px 8px 8px; font-size: 13px; font-weight: 500; color: var(--sb-text); border-radius: 7px; transition: background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); cursor: pointer; outline: none; position: relative; }

ul.menu > li > a .fa, ul.menu > li > a i { width: 16px; font-size: 14px; color: var(--sb-icon); transition: color var(--dur-fast) var(--ease); text-align: center; }

ul.menu > li > a:hover { background: rgba(255, 255, 255, 0.04); color: var(--sb-text-hover); }

ul.menu > li > a:hover .fa { color: rgb(162, 157, 216); }

ul.menu > li.active > a, ul.menu > li > a.active { background: rgba(255, 255, 255, 0.08); color: rgb(245, 247, 251); font-weight: 600; }

ul.menu > li.active > a::after, ul.menu > li > a.active::after { content: ""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 3px; height: 24px; background: var(--brand-gradient); border-radius: 0px 3px 3px 0px; }

ul.menu > li.active > a .fa, ul.menu > li > a.active .fa { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: transparent; }

.menu-group-label { padding: 14px 14px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sb-icon); }

ul.menu ul { list-style: none; padding: 4px 0px 6px 44px; margin: 0px; position: relative; }

ul.menu ul::before { content: ""; position: absolute; left: 24px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(transparent 0%, rgba(168, 85, 247, 0.22) 12%, rgba(168, 85, 247, 0.22) 88%, transparent 100%); }

ul.menu ul li a { display: block; padding: 7px 12px; font-size: 12.5px; color: var(--sb-text); border-radius: 6px; transition: background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); position: relative; outline: none; }

#menu ul.menu > li > a:focus-visible, #menu ul.menu ul li a:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }

.sidebar.sidebar-fusion #menu > div ul > li > a { text-align: left !important; padding-left: 8px !important; }

.sidebar.sidebar-fusion #menu > div > ul > li > ul > li a { text-align: left !important; }

ul.menu ul li a:hover { color: var(--sb-text-hover); background: rgba(255, 255, 255, 0.04); }

ul.menu ul li.active a, ul.menu ul li a.active { color: rgb(232, 234, 242); font-weight: 500; background: rgba(255, 255, 255, 0.06); }

ul.menu ul li.active a::before, ul.menu ul li a.active::before { content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 0 2px var(--sb-bg,#0a0b12); }

.sidebar-footer { padding: 12px 14px; border-top: 1px solid var(--sb-border); display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--sb-text); }

.sidebar-footer .sb-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, rgb(56, 189, 248), rgb(168, 85, 247)); display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); font-weight: 600; font-size: 11px; flex-shrink: 0; }

.sidebar-footer .sb-status { width: 6px; height: 6px; border-radius: 50%; background: var(--success); margin-left: auto; box-shadow: rgba(13, 159, 110, 0.18) 0px 0px 0px 3px; }

#content { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; }

.navbar.main { height: var(--nav-h); background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0px 24px; position: sticky; top: 0px; z-index: 40; gap: 12px; }

.user-action-btn-navbar { display: none; }

.btn-navbar { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--card); border-radius: var(--r-sm); color: var(--fg-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }

.nav-title { font-size: 14px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }

.nav-title .nav-sub { margin-left: 8px; font-weight: 400; color: var(--fg-3); font-size: 12px; }

.notifications { list-style: none; margin: 0px 0px 0px auto; padding: 0px; display: flex; align-items: center; gap: 4px; }

.navbar.main > .notifications + .notifications { margin-left: 0px; }

.notifications > li { position: relative; }

.notifications > li > a, .notifications > li > button { display: flex; align-items: center; gap: 8px; padding: 6px 10px; height: 34px; border-radius: var(--r-sm); color: var(--fg-2); font-size: 12.5px; font-weight: 500; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; transition: background var(--dur-fast) var(--ease); }

.notifications > li > a:hover, .notifications > li > button:hover { background: var(--bg-subtle); color: var(--fg); }

.nav-bell { position: relative; }

.nav-bell .bell-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--danger); border: 2px solid var(--card); border-radius: 50%; }

.nav-user { display: flex; align-items: center; gap: 10px; height: 34px; padding: 4px 10px 4px 4px !important; }

.nav-user .avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, rgb(56, 189, 248), rgb(168, 85, 247)); color: rgb(255, 255, 255); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

.nav-divider { width: 1px; height: 20px; background: var(--border); margin: 0px 4px; }

.layout-app { padding: 28px; flex: 1 1 0%; max-width: 100%; }

.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }

.page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: var(--fg); margin: 0px 0px 4px; line-height: 1.2; }

.page-sub { font-size: 13px; color: var(--fg-3); margin: 0px; }

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

.widget, .panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-xs); transition: box-shadow var(--dur-base) var(--ease); }

.widget.row { margin-left: 0px; margin-right: 0px; }

.widget:hover { box-shadow: var(--sh-sm); }

.widget-header, .panel-heading { padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; gap: 12px; background: 0px 0px; }

.widget-title, .panel-title { font-size: 13px; font-weight: 600; color: var(--fg); margin: 0px; letter-spacing: -0.005em; }

.widget-sub { font-size: 12px; color: var(--fg-3); font-weight: 400; margin-top: 2px; }

.widget-body, .panel-body { padding: 20px; }

.widget-body.tight { padding: 0px; }

.summary-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px 20px; position: relative; transition: border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease); overflow: hidden; box-shadow: var(--sh-xs); }

.summary-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); }

.summary-card .sc-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; gap: 6px; }

.summary-card .sc-label .sc-icon { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-3); }

.summary-card .sc-value { font-size: 28px; font-weight: 700; color: var(--fg); letter-spacing: -0.03em; margin: 10px 0px 2px; line-height: 1.1; font-variant-numeric: tabular-nums; }

.summary-card .sc-value .sc-unit { font-size: 13px; font-weight: 500; color: var(--fg-3); margin-left: 4px; letter-spacing: 0px; }

.summary-card .sc-trend { font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--r-pill); margin-right: 6px; }

.summary-card .sc-trend.up { color: var(--success-tx); background: var(--success-bg); }

.summary-card .sc-trend.down { color: var(--danger-tx); background: var(--danger-bg); }

.summary-card .sc-meta { font-size: 11.5px; color: var(--fg-3); }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0px 14px; font-size: 13px; font-weight: 500; font-family: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: all var(--dur-fast) var(--ease); white-space: nowrap; box-shadow: var(--sh-xs); }

.btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); }

.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.btn .fa { font-size: 12px; }

.btn-sm { height: 30px; padding: 0px 10px; font-size: 12px; }

.btn-xs { height: 24px; padding: 0px 8px; font-size: 11.5px; }

.btn-lg { height: 44px; padding: 0px 18px; font-size: 14px; }

.btn-block { width: 100%; }

.btn-primary { background: var(--brand-gradient); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: rgba(139, 92, 246, 0.2) 0px 1px 2px, rgba(255, 255, 255, 0.12) 0px 1px 0px inset; position: relative; }

.btn-primary:hover, .btn-primary:focus { filter: brightness(1.05); transform: translateY(-1px); background: var(--brand-gradient) !important; box-shadow: rgba(139, 92, 246, 0.35) 0px 4px 14px, rgba(255, 255, 255, 0.15) 0px 1px 0px inset !important; }

.btn-primary:active { filter: brightness(0.96); transform: translateY(0px); background: var(--brand-gradient) !important; box-shadow: rgba(139, 92, 246, 0.2) 0px 1px 2px, rgba(255, 255, 255, 0.12) 0px 1px 0px inset !important; }

.btn-success { background: var(--success); color: rgb(255, 255, 255); border-color: transparent; }

.btn-success:hover { background: rgb(11, 140, 96); }

.btn-danger { background: var(--danger); color: rgb(255, 255, 255); border-color: transparent; }

.btn-danger:hover { background: rgb(214, 58, 63); }

.btn-warning { background: var(--warning); color: rgb(255, 255, 255); border-color: transparent; }

.btn-info { background: var(--info); color: rgb(255, 255, 255); border-color: transparent; }

.btn-stroke { background: var(--card); color: var(--brand-accent); border-color: rgb(214, 201, 245); }

.btn-stroke:hover { background: var(--brand-soft); border-color: var(--brand-accent); }

.btn-ghost { background: 0px 0px; border-color: transparent; box-shadow: none; color: var(--fg-2); }

.btn-ghost:hover { background: var(--bg-subtle); color: var(--fg); }

.btn-icon { width: 34px; padding: 0px; }

.btn-icon.btn-sm { width: 30px; }

.label, .badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 500; line-height: 1; background: var(--bg-subtle); color: var(--fg-2); border: 1px solid transparent; white-space: nowrap; }

.label::before, .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentcolor; opacity: 0.85; flex-shrink: 0; }

.label.nodot::before, .badge.nodot::before { display: none; }

.label.history-tag::before { display: none; }

.label-primary, .badge-primary { background: var(--brand-soft); color: var(--brand-accent-hover); }

.label-success, .badge-success { background: var(--success-bg); color: var(--success-tx); }

.label-danger, .badge-danger { background: var(--danger-bg); color: var(--danger-tx); }

.label-warning, .badge-warning { background: var(--warning-bg); color: var(--warning-tx); }

.label-info, .badge-info { background: var(--info-bg); color: var(--info-tx); }

.label-default, .badge-default { background: var(--bg-subtle); color: var(--fg-2); }

.label-default[style*="background-color"], .badge-default[style*="background-color"] { color: rgb(255, 255, 255); }

.badge-count { height: 16px; min-width: 16px; padding: 0px 4px; border-radius: 8px; background: var(--danger); color: rgb(255, 255, 255); font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

.badge-count::before { display: none; }

.form-control, select.form-control, input[type="text"].form-control { display: block; width: 100%; height: 38px; padding: 0px 12px; font-size: 14px; font-family: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); transition: border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease); box-shadow: var(--sh-xs); }

.form-control::placeholder { color: var(--fg-4); }

.form-control:hover { border-color: var(--border-strong); }

.form-control:focus, .form-control:focus-visible { outline: none !important; border-color: var(--brand-accent) !important; box-shadow: var(--ring-focus) !important; }

textarea.form-control { height: auto; padding: 10px 12px; min-height: 84px; resize: vertical; }

select.form-control { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%238a90a0' stroke-width='1.5' d='M3 5l3 3 3-3'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; padding-right: 32px !important; }

select.form-control:hover, select.form-control:focus, select.form-control:focus-visible, select.form-control:active { background-image: none !important; }

select.form-control.cd-hidden { display: none !important; }

.cd-wrap { position: relative; width: 100%; }

.cd-trigger { display: flex; align-items: center; width: 100%; height: 38px; padding: 0px 32px 0px 12px; font-size: 14px; font-family: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--sh-xs); cursor: pointer; transition: border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease); user-select: none; position: relative; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cd-trigger:hover { border-color: var(--border-strong); }

.cd-trigger.cd-open { border-color: var(--brand-accent); box-shadow: var(--ring-focus); }

.cd-trigger::after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 0px; height: 0px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--fg-3); transition: transform var(--dur-fast) var(--ease); }

.cd-trigger.cd-open::after { transform: translateY(-50%) rotate(180deg); }

.cd-panel { display: none; position: absolute; top: calc(100% + 4px); min-width: max-content; left: 0px; right: 0px; z-index: 1060; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 24px; padding: 4px 0px; max-height: 240px; overflow-y: auto; }

.cd-panel.cd-open { display: block; }

.cd-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px; color: var(--fg); cursor: pointer; transition: background var(--dur-fast) var(--ease); }

.cd-item:hover { background: var(--bg-subtle); }

.cd-item.cd-selected { background: rgba(139, 92, 246, 0.08); color: var(--brand-accent); font-weight: 500; }

.cd-item .cd-check { width: 16px; flex-shrink: 0; font-size: 14px; }

.cd-item.cd-selected .cd-check::before { content: "✓"; }

.kv-drp-dropdown { min-width: fit-content; }

.kv-drp-dropdown .range-value, .kv-drp-dropdown .form-control { font-size: 13px !important; letter-spacing: -0.01em; }

.btn-group .multiselect.dropdown-toggle, .btn-group .multiselect.dropdown-toggle:hover, .btn-group .multiselect.dropdown-toggle:focus, .btn-group .multiselect.dropdown-toggle:active { height: 38px !important; padding: 0px 32px 0px 12px !important; font-size: 14px !important; font-family: inherit !important; color: var(--fg) !important; background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; box-shadow: var(--sh-xs) !important; line-height: 36px !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

.btn-group .multiselect.dropdown-toggle:hover { border-color: var(--border-strong) !important; }

.btn-group .multiselect.dropdown-toggle:focus { border-color: var(--brand-accent) !important; box-shadow: var(--ring-focus) !important; }

.btn-group .multiselect.dropdown-toggle .caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border-top-color: var(--fg-3); }

.btn-group { position: relative; }

.multiselect-container.dropdown-menu { border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 24px !important; padding: 4px 0px !important; background: var(--card) !important; min-width: fit-content !important; width: auto !important; left: 0px !important; right: auto !important; }

.multiselect-container > li > a { padding: 7px 14px !important; font-size: 13px !important; color: var(--fg) !important; }

.multiselect-container > li > a:hover, .multiselect-container > li.active > a { background: var(--bg-subtle) !important; color: var(--fg) !important; }

.multiselect-container > li > a > label { padding: 0px !important; font-size: 13px !important; font-weight: 400 !important; color: inherit !important; }

.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { height: 38px !important; padding: 0px 12px !important; font-size: 14px !important; color: var(--fg) !important; background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; box-shadow: var(--sh-xs) !important; line-height: 36px !important; }

.select2-container--default .select2-selection--single:hover, .select2-container--default .select2-selection--multiple:hover { border-color: var(--border-strong) !important; }

.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px !important; padding-left: 0px !important; color: var(--fg) !important; }

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; right: 8px !important; }

.select2-container--default .select2-selection--multiple .select2-selection__rendered { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 36px; padding: 0px !important; line-height: 1.4 !important; }

.select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 0px !important; background: var(--bg-subtle) !important; border: 1px solid var(--border) !important; border-radius: var(--r-xs,4px) !important; font-size: 12px !important; color: var(--fg-2) !important; }

.select2-container--default.select2-container--focus .select2-selection, .select2-container--default.select2-container--open .select2-selection { border-color: var(--brand-accent) !important; box-shadow: var(--ring-focus) !important; }

.select2-dropdown { border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 24px !important; background: var(--card) !important; }

.select2-results__option { padding: 7px 14px !important; font-size: 13px !important; color: var(--fg) !important; }

.select2-results__option--highlighted { background: var(--bg-subtle) !important; color: var(--fg) !important; }

.select2-results__option[aria-selected="true"] { background: rgba(139, 92, 246, 0.08) !important; color: var(--brand-accent) !important; }

.select2-search--dropdown .select2-search__field { border: 1px solid var(--border) !important; border-radius: var(--r-xs) !important; padding: 6px 8px !important; font-size: 13px !important; }

.select2-search--dropdown .select2-search__field:focus { border-color: var(--brand-accent) !important; outline: none !important; }

h4:has(> select.btn-warning) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

h4 > select.btn-warning { width: auto !important; display: inline-block !important; }

.form-group { margin-bottom: 16px; }

.widget.search .form-group { margin-bottom: 8px; }

.widget.search .form-group > label, .widget.search .control-label { white-space: nowrap; }

.widget.search .row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0px; }

.widget.search .row > [class*="col-md"] { float: none; width: auto; flex: 0 0 auto; min-width: 120px; max-width: 200px; }

.widget.search .row > .col-md-12, .widget.search .row > .col-xs-12.col-md-12 { flex: 1 1 100%; width: 100%; max-width: none; min-width: 0px; }

.form-group label, .control-label { display: block; font-size: 12px; font-weight: 500; color: var(--fg-2); margin-bottom: 6px; }

.form-group .help-block, .form-group .hint-block { font-size: 11.5px; color: var(--fg-3); margin-top: 4px; }

.form-group.has-error .form-control { border-color: var(--danger); box-shadow: rgba(229, 72, 77, 0.12) 0px 0px 0px 4px; }

.form-group.has-error .help-block { color: var(--danger-tx); }

.form-group.required > label::after, label.required::after { content: "*"; color: var(--danger); margin-left: 3px; }

.input-group { position: relative; display: flex; align-items: center; }

.input-group .input-prefix { position: absolute; left: 12px; color: var(--fg-3); font-size: 12px; pointer-events: none; z-index: 1; }

.input-group .form-control.has-prefix { padding-left: 32px; }

.search-field { position: relative; }

.search-field .form-control { padding-left: 34px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><circle cx='6' cy='6' r='4.5' fill='none' stroke='%238a90a0' stroke-width='1.4'/><path d='M9.5 9.5l2.5 2.5' stroke='%238a90a0' stroke-width='1.4' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: 12px center; }

.cb { appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--card); cursor: pointer; position: relative; transition: all var(--dur-fast) var(--ease); flex-shrink: 0; vertical-align: middle; }

.cb:hover { border-color: var(--brand-accent); }

.cb:checked { background: var(--brand-gradient); border-color: transparent; }

.cb:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border-style: solid; border-color: rgb(255, 255, 255); border-image: none; border-width: 0px 1.5px 1.5px 0px; transform: rotate(45deg); }

.cb:indeterminate { background: var(--brand-gradient); border-color: transparent; }

.cb:indeterminate::after { content: ""; position: absolute; left: 3px; top: 6.5px; width: 8px; height: 1.5px; background: rgb(255, 255, 255); border-radius: 1px; }

.switch { appearance: none; width: 34px; height: 20px; background: var(--border-strong); border-radius: 10px; position: relative; cursor: pointer; transition: background var(--dur-fast) var(--ease); flex-shrink: 0; }

.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: rgb(255, 255, 255); border-radius: 50%; transition: transform var(--dur-fast) var(--ease); box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px; }

.switch:checked { background: var(--brand-accent); }

.switch:checked::after { transform: translateX(14px); }

.segmented { display: inline-flex; background: var(--bg-subtle); border-radius: var(--r-sm); padding: 3px; gap: 2px; border: 1px solid var(--border); }

.segmented button { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: 0px 0px; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--fg-2); padding: 5px 12px; border-radius: 4px; cursor: pointer; transition: all var(--dur-fast) var(--ease); }

.segmented button:hover { color: var(--fg); }

.segmented button.active { background: var(--card); color: var(--fg); box-shadow: var(--sh-xs); }

.table-wrap { overflow-x: auto; border-radius: var(--r-card); }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }

.table thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding: 10px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: var(--nav-h); background: var(--card); z-index: 5; }

.table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--fg); vertical-align: middle; height: 52px; }

.table tbody tr:last-child td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.table tbody tr { transition: background var(--dur-fast) var(--ease); }

.table tbody tr:hover { background: var(--brand-soft) !important; }

.table-striped tbody tr:hover { background: rgb(239, 234, 255) !important; }

.table tbody tr.selected { background: var(--brand-soft); }

.cell-id { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg-2); }

.cell-name { font-weight: 500; color: var(--fg); }

.cell-sub { color: var(--fg-3); font-size: 12px; }

.cell-amount { font-family: "JetBrains Mono", monospace; font-weight: 500; text-align: right; }

.cell-right { text-align: right; }

.table .checkbox-col { width: 32px; padding-right: 0px; }

.table .action-col { width: 48px; text-align: right; }

.user-cell { display: flex; align-items: center; gap: 10px; }

.user-cell .avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.user-cell .user-meta { line-height: 1.3; min-width: 0px; }

.user-cell .user-name { font-weight: 500; color: var(--fg); font-size: 13px; }

.user-cell .user-email { font-size: 11.5px; color: var(--fg-3); }

.table-toolbar { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.table-toolbar .search-field { flex: 1 1 0%; max-width: 320px; min-width: 200px; }

.toolbar-count { font-size: 12px; color: var(--fg-3); }

.bulk-bar { display: none; padding: 10px 16px; background: var(--brand-soft); border-bottom: 1px solid rgb(224, 215, 251); align-items: center; gap: 10px; font-size: 12.5px; color: var(--brand-accent-hover); font-weight: 500; }

.bulk-bar.on { display: flex; }

.pagination { display: flex; gap: 3px; list-style: none; padding: 0px; margin: 0px; align-items: center; }

.pagination li a, .pagination li span { min-width: 32px; height: 32px; padding: 0px 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; color: var(--fg-2); background: var(--card); cursor: pointer; transition: all var(--dur-fast) var(--ease); box-shadow: var(--sh-xs); }

.pagination li a:hover { background: var(--bg-subtle); color: var(--fg); border-color: var(--border-strong); }

.pagination li.active a, .pagination li.active span { background: var(--brand-gradient); color: rgb(255, 255, 255); border-color: transparent; }

.pagination li.disabled a { opacity: 0.4; cursor: not-allowed; }

.pagination li.ellipsis span { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: 0px 0px; box-shadow: none; }

.pager-wrap { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border-subtle); }

.pager-summary { font-size: 12px; color: var(--fg-3); }

.breadcrumb { padding: 0px; margin: 0px 0px 14px; list-style: none; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-3); background: 0px 0px; }

.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }

.breadcrumb li + li::before { content: "/"; color: var(--fg-4); }

.breadcrumb li a:hover { color: var(--fg-2); }

.breadcrumb li.active { color: var(--fg); }

.nav-tabs { list-style: none; padding: 0px; margin: 0px; display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }

.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tabs li { margin-bottom: -1px; }

.nav-tabs li a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--fg-3); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color var(--dur-fast) var(--ease); }

.nav-tabs li a:hover { color: var(--fg); }

.nav-tabs li a:focus, .nav-tabs li a:focus-visible, .nav.nav-pills > li > a:focus, .nav.nav-pills > li > a:focus-visible { outline: none !important; box-shadow: none !important; }

.nav-tabs li.active a, .nav-tabs li a.active { color: var(--fg); border-bottom-color: var(--brand-accent); font-weight: 600; }

.nav-tabs li .tab-count { font-size: 11px; padding: 1px 6px; background: var(--bg-subtle); border-radius: var(--r-pill); color: var(--fg-3); font-weight: 500; }

.nav-tabs li.active .tab-count { background: var(--brand-soft); color: var(--brand-accent-hover); }

.modal-backdrop-demo { position: absolute; inset: 0px; background: var(--overlay); backdrop-filter: blur(2px); border-radius: inherit; }

.modal-content { background: var(--card); border-radius: var(--r-modal); box-shadow: var(--sh-modal); overflow: hidden; border: 1px solid var(--border); }

.modal-header { padding: 20px 24px 12px; display: flex; align-items: flex-start; gap: 12px; }

.modal-header .modal-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.modal-header .modal-icon.danger { background: var(--danger-bg); color: var(--danger); }

.modal-header .modal-icon.warning { background: var(--warning-bg); color: var(--warning); }

.modal-header .modal-icon.info { background: var(--info-bg); color: var(--info); }

.modal-header .modal-icon.brand { background: var(--brand-soft); color: var(--brand-accent); }

.modal-title { font-size: 15px; font-weight: 600; color: var(--fg); margin: 0px 0px 4px; letter-spacing: -0.01em; flex: 1 1 0%; min-width: 0px; display: flex; align-items: flex-start; gap: 8px; }

.modal-title h4, .modal-title .title { flex: 1 1 0%; min-width: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.modal-desc { font-size: 12.5px; color: var(--fg-2); line-height: 1.55; }

.modal-close { margin-left: auto; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--fg-3); cursor: pointer; display: flex; align-items: center; justify-content: center; }

.modal-close:hover { background: var(--bg-subtle); color: var(--fg); }

.modal-header .close { order: 999; margin-left: auto; flex-shrink: 0; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--fg-3); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 1; text-shadow: none; }

.modal-header .close:hover { background: var(--bg-subtle); color: var(--fg); }

.modal-body { padding: 8px 24px 20px; font-size: 13px; color: var(--fg-2); overflow-x: hidden; }

.modal-body .row { margin-left: 0px; margin-right: 0px; }

.modal-content .innerAll .row { margin-left: 0px; margin-right: 0px; }

.modal-content .innerAll { overflow-x: hidden; max-height: 83vh; overflow-y: auto !important; }

.modal-footer { padding: 14px 24px; background: var(--bg-subtle); display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); }

#commonModal.modal { overflow-y: auto !important; padding-right: 0px !important; }

#commonModal .modal-dialog { margin: 30px auto !important; }

#commonModal .modal-content.autoModal, #commonModal .modal-body { overflow: visible !important; }

#commonModal iframe.iframe-modal.autoModal, iframe.iframe-modal.autoModal { width: 100% !important; min-height: 200px !important; max-height: calc(-80px + 100vh) !important; overflow: auto !important; }

.dropdown-menu { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-dropdown); padding: 4px; min-width: 200px; }

.dropdown-menu > li > a, .dropdown-menu .dd-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 12.5px; color: var(--fg); border-radius: var(--r-xs); cursor: pointer; }

.dropdown-menu > li > a:hover, .dropdown-menu .dd-item:hover { background: var(--bg-subtle); }

.dropdown-menu > li > a .fa, .dropdown-menu .dd-item .fa { color: var(--fg-3); width: 14px; font-size: 12px; }

.dropdown-menu .dd-divider { height: 1px; background: var(--border); margin: 4px 0px; }

.dropdown-menu .dd-label { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 600; color: var(--fg-3); letter-spacing: 0.08em; text-transform: uppercase; }

.dropdown-menu .dd-item.danger { color: var(--danger-tx); }

.dropdown-menu .dd-item.danger .fa { color: var(--danger); }

.dropdown-menu .dd-item.danger:hover { background: var(--danger-bg); }

.dropdown-anchor { position: relative; }

.dropdown-anchor .dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0px; z-index: 30; }

.alert { padding: 12px 14px; border-radius: var(--r-md); font-size: 12.5px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid transparent; }

.alert .fa, .alert > .alert-icon { flex-shrink: 0; margin-top: 1px; }

.alert-title { font-weight: 600; color: var(--fg); font-size: 13px; margin-bottom: 2px; }

.alert-body { color: var(--fg-2); }

.alert-success { background: var(--success-bg); border-color: var(--success-bd); color: var(--success-tx); }

.alert-success .alert-title { color: var(--success-tx); }

.alert-danger { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-tx); }

.alert-danger .alert-title { color: var(--danger-tx); }

.alert-warning { background: var(--warning-bg); border-color: var(--warning-bd); color: var(--warning-tx); }

.alert-warning .alert-title { color: var(--warning-tx); }

.alert-info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-tx); }

.alert-info .alert-title { color: var(--info-tx); }

.empty-state { text-align: center; padding: 56px 24px; }

.empty-state .empty-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; border: 1px solid rgb(233, 222, 250); }

.empty-state h3 { font-size: 15px; font-weight: 600; color: var(--fg); margin: 0px 0px 6px; letter-spacing: -0.01em; }

.empty-state p { font-size: 13px; color: var(--fg-3); margin: 0px auto 18px; max-width: 360px; line-height: 1.55; }

.chart-wrap { height: 240px; position: relative; padding: 8px 4px 0px; }

.chart-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--fg-2); margin-bottom: 6px; }

.chart-legend .lg-dot { width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; display: inline-block; vertical-align: middle; }

.progress-bar-ui { height: 6px; background: var(--border-subtle); border-radius: var(--r-pill); overflow: hidden; }

.progress-bar-ui .fill { height: 100%; background: var(--brand-gradient); border-radius: var(--r-pill); }

.notif-panel { width: 320px; padding: 4px; }

.notif-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; }

.notif-row:hover { background: var(--bg-subtle); }

.notif-row .nr-label { display: flex; align-items: center; gap: 10px; }

.notif-row .nr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); }

.notif-row .nr-name { font-size: 12.5px; font-weight: 500; }

.notif-row .nr-count { font-size: 11px; font-weight: 600; background: var(--bg-subtle); padding: 1px 8px; border-radius: var(--r-pill); color: var(--fg-2); font-variant-numeric: tabular-nums; }

.notif-row .nr-count.hot { background: var(--danger-bg); color: var(--danger-tx); }

.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; height: 30px; border-radius: var(--r-pill); background: var(--bg-subtle); border: 1px dashed var(--border-strong); font-size: 12px; color: var(--fg-2); cursor: pointer; }

.filter-chip.on { background: var(--brand-soft); border: 1px solid rgb(214, 201, 245); color: var(--brand-accent-hover); font-weight: 500; }

.filter-chip .chip-value { color: var(--fg); font-weight: 500; }

.filter-chip.on .chip-value { color: var(--brand-accent-hover); }

.filter-chip .chip-x { margin-left: 2px; opacity: 0.6; font-size: 10px; }

@media (max-width: 1200px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1199px) {
  #menu { position: fixed; transform: translateX(-100%); top: 0px; bottom: 0px; left: 0px; height: 100dvh; box-shadow: var(--sh-lg); overscroll-behavior: contain; }
  body.sidebar-open #menu { transform: translateX(0px); }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open #content { touch-action: none; }
  body.sidebar-open::after { content: ""; position: fixed; inset: 0px; background: var(--overlay); backdrop-filter: blur(2px); z-index: 45; }
  .user-action-btn-navbar { display: block; }
  .layout-app { padding: 20px; }
  .navbar.main { padding: 0px 16px; }
}

@media (max-width: 767px) {
  .navbar.main { height: 52px; padding: 0px 12px; }
  .layout-app { padding: 14px; }
  .page-title { font-size: 20px; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .summary-card { padding: 14px; }
  .summary-card .sc-value { font-size: 22px; }
  .form-control, .btn { font-size: 14px; }
  .table { font-size: 12.5px; }
  .table thead th { padding: 8px 12px; }
  .table tbody td { padding: 10px 12px; height: 48px; }
  .widget-body { padding: 14px; }
  .widget-header { padding: 14px; }
  .nav-title { display: none; }
  .nav-user .user-name-txt { display: none; }
  .page-actions .btn .btn-label { display: none; }
}

@media (max-width: 480px) {
  .summary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1199px) {
  #menu.hidden-xs { display: flex !important; }
}

#brandWrapper .brandName { color: rgb(228, 230, 240); font-weight: 700; font-size: 17px; display: block; letter-spacing: -0.01em; }

body .history-wrapper.innerAll { padding: 8px 12px 0px; background: 0px 0px; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-top: 1px solid var(--border); width: auto !important; }

body .history-wrapper span { scrollbar-width: none; overflow: auto hidden !important; }

body .history-wrapper span:hover { scrollbar-width: thin; }

body .history-wrapper span::-webkit-scrollbar { height: 0px; }

body .history-wrapper span:hover::-webkit-scrollbar { height: 4px; }

body .history-wrapper span::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

body .history-container-operate .label { height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; padding: 0px 10px; margin-right: 4px; border: 1px solid var(--border); background: var(--card); color: var(--fg-2); transition: background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); line-height: 1; }

body .history-container .label { height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px 6px 0px 0px; font-size: 12px; font-weight: 500; padding: 0px 14px; margin-right: 2px; margin-bottom: -1px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; position: relative; z-index: 1; background: var(--bg-subtle); color: var(--fg-3); transition: background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),z-index 0s; line-height: 1; }

body .history-container .history-tag a { color: inherit; }

body .history-container .history-tag:hover { background: rgba(139, 92, 246, 0.1); color: var(--fg-2); }

body .history-container .history-tag.active, body .history-container .label.history-tag.active { background: var(--card); border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-top: 2px solid var(--brand-accent); color: var(--fg); z-index: 2; font-weight: 600; }

body .history-container .history-tag.active a, body .history-container .label.history-tag.active a, body .history-container .label.history-tag.active .history-tag-link { color: var(--fg); font-weight: 600; }

body .history-container-operate .label { width: 32px; padding: 0px; }

body .history-container-operate .history-tag-back { color: var(--fg-2); background: var(--card); }

body .history-container-operate .history-tag-back:hover { background: var(--bg-subtle); }

body .history-container-operate .history-tag-refresh { color: var(--brand-accent); background: var(--card); border-color: rgb(214, 201, 245); }

body .history-container-operate .history-tag-refresh:hover { background: var(--brand-soft); }

body .history-container-operate .history-tag-remove-all { color: var(--danger); background: var(--card); border-color: var(--danger-bd); }

body .history-container-operate .history-tag-remove-all:hover { background: var(--danger-bg); }

body .history-container-operate a { color: inherit; padding: 0px; }

.history-tag-remove { margin-left: 6px; opacity: 0.55; transition: opacity var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); font-size: 10px; }

.history-tag-remove:hover { opacity: 1; color: var(--danger); }

h1.btn-primary, h2.btn-primary, h3.btn-primary, h4.btn-primary, h5.btn-primary, h6.btn-primary { display: inline-block; padding: 6px 14px; font-size: 14px; font-weight: 600; line-height: 1.4; color: rgb(255, 255, 255); background: var(--brand-gradient); border-radius: var(--r-sm); letter-spacing: 0.02em; margin: 0px 0px 16px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; height: auto; box-shadow: rgba(139, 92, 246, 0.18) 0px 2px 8px; text-shadow: none; }

h1.btn-primary.text-uppercase, h2.btn-primary.text-uppercase, h3.btn-primary.text-uppercase, h4.btn-primary.text-uppercase, h5.btn-primary.text-uppercase, h6.btn-primary.text-uppercase { letter-spacing: 0.06em; font-size: 13px; }

@media (min-width: 992px) {
  .layout-app form > .row:has(> [class~="col-md-1"], > [class~="col-md-2"]), .layout-app form .panel-body > .row:has(> [class~="col-md-1"], > [class~="col-md-2"]), .layout-app form .widget-body > .row:has(> [class~="col-md-1"], > [class~="col-md-2"]) { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
  .layout-app form > .row:has(> [class~="col-md-1"], > [class~="col-md-2"]) > [class~="col-md-1"], .layout-app form > .row:has(> [class~="col-md-1"], > [class~="col-md-2"]) > [class~="col-md-2"], .layout-app form .panel-body > .row:has(> [class~="col-md-1"], > [class~="col-md-2"]) > [class~="col-md-1"], .layout-app form .panel-body > .row:has(> [class~="col-md-1"], > [class~="col-md-2"]) > [class~="col-md-2"], .layout-app form .widget-body > .row:has(> [class~="col-md-1"], > [class~="col-md-2"]) > [class~="col-md-1"], .layout-app form .widget-body > .row:has(> [class~="col-md-1"], > [class~="col-md-2"]) > [class~="col-md-2"] { width: auto; float: none; min-width: 160px; flex: 1 1 160px; max-width: 240px; padding-left: 8px; padding-right: 8px; margin-bottom: 8px; }
}

.navbar.main .notifications .label, .navbar.main .notifications .badge { vertical-align: middle; line-height: 1; height: 20px; padding: 0px 8px; font-size: 11px; }

.navbar.main .notifications .label-danger { background: var(--danger-bg); color: var(--danger-tx); }

.navbar.main .notifications a > .fa, .navbar.main .notifications a > i { vertical-align: middle; line-height: 1; }

.col-separator .table thead th { top: 0px; }

#iframeContent iframe { height: calc(100vh - var(--nav-h) - 56px); display: block; }

select.form-control.btn-primary, select.form-control.btn-success, select.form-control.btn-danger, select.form-control.btn-info, select.form-control.btn-warning { background-color: var(--card); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%238a90a0' stroke-width='1.5' d='M3 5l3 3 3-3'/></svg>"); color: var(--fg); border: 1px solid var(--border); box-shadow: var(--sh-xs); text-shadow: none; }

select option { color: var(--fg); background-color: var(--card); }

.imageBlock { display: block; text-align: center; }

.imageLink { display: block; }

.imageContent { max-width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: var(--bg-subtle); border-radius: var(--r-sm); border: 1px solid var(--border); }

.layout-app { padding-top: 16px; }

@media (max-width: 1199px) {
  .layout-app { padding-top: 12px; }
}

@media (max-width: 767px) {
  .layout-app { padding-top: 8px; }
}

.btn-success { background: var(--brand-gradient-soft); color: var(--brand-accent-hover); border: 1px solid rgba(139, 92, 246, 0.3); box-shadow: var(--sh-xs); }

.btn-success:hover { background: var(--brand-gradient); color: rgb(255, 255, 255); border-color: transparent; }

.btn-success:active { background: var(--brand-gradient); color: rgb(255, 255, 255); filter: brightness(0.96); }

.btn-danger { background: var(--danger-bg); color: var(--danger-tx); border: 1px solid var(--danger-bd); box-shadow: var(--sh-xs); }

.btn-danger:hover { background: rgb(252, 224, 224); border-color: rgb(243, 163, 163); }

.btn-danger:active { background: rgb(248, 202, 202); }

.btn-info { background: var(--info-bg); color: var(--info-tx); border: 1px solid var(--info-bd); box-shadow: var(--sh-xs); }

.btn-info:hover { background: rgb(214, 239, 255); border-color: rgb(126, 195, 237); }

.btn-info:active { background: rgb(184, 225, 250); }

.btn-warning { background: var(--warning-bg); color: var(--warning-tx); border: 1px solid var(--warning-bd); box-shadow: var(--sh-xs); }

.btn-warning:hover { background: rgb(253, 233, 185); border-color: rgb(233, 176, 74); }

h1.btn-primary, h2.btn-primary, h3.btn-primary, h4.btn-primary, h5.btn-primary, h6.btn-primary { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--brand-accent-hover); background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-image: none; border: 1px solid rgb(214, 201, 245); border-radius: var(--r-pill); letter-spacing: 0.04em; margin: 0px 0px 14px; box-shadow: none; text-shadow: none; height: auto; line-height: 1.4; }

h1.btn-primary.text-uppercase, h2.btn-primary.text-uppercase, h3.btn-primary.text-uppercase, h4.btn-primary.text-uppercase, h5.btn-primary.text-uppercase, h6.btn-primary.text-uppercase { letter-spacing: 0.08em; font-size: 11px; }

.bootstrap-switch { cursor: pointer; vertical-align: middle; position: relative !important; display: inline-block !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; border-radius: var(--r-pill) !important; height: 20px !important; width: 36px !important; min-width: 36px !important; background: var(--border-strong) !important; transition: background var(--dur-fast) var(--ease) !important; overflow: hidden !important; }

.bootstrap-switch.bootstrap-switch-on, .bootstrap-switch.bootstrap-switch-animate.bootstrap-switch-on { background: var(--brand-accent) !important; }

.bootstrap-switch.bootstrap-switch-disabled, .bootstrap-switch.bootstrap-switch-readonly { opacity: 0.55; cursor: not-allowed; }

.bootstrap-switch-container { display: flex !important; height: 100% !important; border-radius: var(--r-pill) !important; top: 0px !important; }

.bootstrap-switch-handle-on, .bootstrap-switch-handle-off, .bootstrap-switch-label { display: inline-block !important; font-size: 0px !important; color: transparent !important; width: 36px !important; height: 100% !important; padding: 0px !important; margin: 0px !important; flex-shrink: 0 !important; }

.bootstrap-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: rgb(255, 255, 255); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 2px; transition: transform var(--dur-fast) var(--ease); pointer-events: none; z-index: 2; }

.bootstrap-switch.bootstrap-switch-on::after { transform: translateX(16px); }

.nav.nav-pills, ul.nav.nav-pills.nav-justified { display: flex; flex-wrap: wrap; gap: 2px; padding: 0px; list-style: none; border-bottom: 1px solid var(--border); margin: 0px 0px 20px; }

.nav.nav-pills > li { margin: 0px 0px -1px; flex: 0 0 auto; }

.nav.nav-pills.nav-justified > li { flex: 1 0 auto; width: auto; text-align: center; }

.nav.nav-pills > li > a { display: block; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; transition: color var(--dur-fast) var(--ease),border-bottom-color var(--dur-fast) var(--ease); white-space: nowrap; padding: 11px 16px !important; background: none 0px 0px !important; color: var(--fg-3) !important; border-width: medium medium 2px !important; border-style: none none solid !important; border-color: currentcolor currentcolor transparent !important; border-image: none !important; border-radius: 0px !important; }

.nav.nav-pills > li > a:hover, .nav.nav-pills > li > a:focus { color: var(--fg) !important; background: 0px 0px !important; border-bottom-color: var(--border-strong) !important; }

.nav.nav-pills > li.active > a, .nav.nav-pills > li.active > a:hover, .nav.nav-pills > li.active > a:focus { font-weight: 600; color: var(--fg) !important; background: 0px 0px !important; border-bottom-color: var(--brand-accent) !important; }

@media (max-width: 1199px) {
  .nav.nav-pills, ul.nav.nav-pills.nav-justified { flex-wrap: nowrap; overflow-x: auto; }
  .nav.nav-pills.nav-justified > li { flex: 0 0 auto; }
}

.table.kv-table > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border-subtle); }

.table.kv-table > tbody > tr:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.table.kv-table > tbody > tr > td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; height: auto; min-height: 52px; display: flex; align-items: center; justify-content: center; }

.table.kv-table > tbody > tr > td:first-child { flex: 0 0 9em; }

.table.kv-table > tbody > tr > td:nth-child(2) { flex: 1 1 14em; min-width: 0px; overflow-wrap: anywhere; }

.table.kv-table > tbody > tr > td:nth-child(n+3) { flex: 0 0 auto; }

@media (min-width: 768px) {
  select.form-control[name="brand_id"], select.form-control.btn-warning, select.form-control.btn-success, select.form-control.btn-primary { min-width: 240px; }
}

.swal2-popup { border-radius: 16px !important; font-family: inherit !important; padding: 24px !important; }

.swal2-title { color: var(--fg) !important; font-weight: 600 !important; font-size: 18px !important; letter-spacing: -0.01em !important; }

.swal2-html-container, .swal2-content { color: var(--fg-2) !important; font-size: 14px !important; }

.swal2-actions { gap: 8px !important; margin-top: 20px !important; }

.swal2-confirm.swal2-styled { background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color:  !important; background-image: var(--brand-gradient) !important; color: rgb(255, 255, 255) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; border-radius: 8px !important; padding: 8px 18px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: rgba(139, 92, 246, 0.2) 0px 1px 2px, rgba(255, 255, 255, 0.12) 0px 1px 0px inset !important; }

.swal2-confirm.swal2-styled:hover, .swal2-confirm.swal2-styled:focus { filter: brightness(1.05); box-shadow: rgba(139, 92, 246, 0.35) 0px 4px 14px, rgba(255, 255, 255, 0.15) 0px 1px 0px inset !important; }

.swal2-cancel.swal2-styled { background: none rgb(255, 255, 255) !important; color: var(--fg-2) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 8px 18px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; }

.swal2-cancel.swal2-styled:hover { background: var(--bg-subtle) !important; border-color: var(--border-strong) !important; }

.swal2-deny.swal2-styled { background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color:  !important; background-image: none !important; color: rgb(255, 255, 255) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; border-radius: 8px !important; padding: 8px 18px !important; font-size: 13px !important; font-weight: 500 !important; }

td > .empty, .grid-view .empty { text-align: center; padding: 40px 24px; font-size: 14px; font-weight: 500; color: var(--fg-2); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }

td > .empty::before, .grid-view .empty::before { content: "📭"; display: block; font-size: 40px; line-height: 1; margin-bottom: 12px; opacity: 0.5; filter: grayscale(0.3); }

.page-header h1:not(.page-title), .page-header h2, .page-header h3, .page-header > .section-title { font-size: 18px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; margin: 0px; line-height: 1.3; }

.widget, .panel { box-shadow: rgba(16, 24, 40, 0.08) 0px 1px 3px, rgba(16, 24, 40, 0.04) 0px 4px 12px; }

.widget:hover, .panel:hover { box-shadow: rgba(16, 24, 40, 0.08) 0px 4px 16px, rgba(16, 24, 40, 0.04) 0px 8px 24px; }

.history-tag-remove-all, .history-tag-remove-all .fa, .history-tag-remove-all i, .history-tag-remove, .history-tag-remove .fa, .history-tag-remove i { transition: color var(--dur-fast) var(--ease); color: var(--fg-3) !important; }

.history-tag-remove-all:hover, .history-tag-remove-all:hover .fa, .history-tag-remove-all:hover i, .history-tag-remove:hover, .history-tag-remove:hover .fa, .history-tag-remove:hover i { color: var(--danger) !important; }

.multiselect .dropdown-toggle, .select2-container .select2-selection, .select2-selection__rendered { text-align: left !important; }

.multiselect .multiselect-selected-text, .select2-selection--single .select2-selection__rendered, .bootstrap-select .filter-option { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

.select2-container--krajee-bs3 .select2-selection--multiple { height: auto !important; }

.select2-container--krajee-bs3 .select2-selection--multiple .select2-selection__rendered { display: block !important; overflow: hidden !important; white-space: normal !important; text-overflow: clip !important; }

.notif-panel { padding: 0px; }

.notif-row { padding: 11px 14px; }

.notif-row + .notif-row { border-top: 1px solid var(--border-subtle); }

.notif-row .nr-name { font-weight: 600; font-size: 13px; }

.notif-row .nr-count { font-size: 11.5px; }

.pagination li > a, .pagination li > span { border-radius: var(--r-sm) !important; }

body .history-wrapper.innerAll { height: 56px; min-height: 56px; box-sizing: border-box; }

.table thead th { background: var(--bg-subtle) !important; }

.table tbody tr:hover td, .table-striped tbody tr:hover td { background: 0px 0px; }

#menu .menu > li > a::before { font-family: FontAwesome, "Font Awesome 5 Free"; font-weight: 900; width: 16px; font-size: 14px; color: var(--sb-icon); text-align: center; flex-shrink: 0; transition: color var(--dur-fast) var(--ease); display: inline-block; line-height: 1; }

#menu .menu > li > a:hover::before { color: rgb(162, 157, 216); }

#menu .menu > li.active > a::before, #menu .menu > li > a.active::before { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

#menu .menu > li > a[href="/home/index"]::before { content: ""; }

#menu .menu > li > a[href="#brand"]::before { content: ""; }

#menu .menu > li > a[href="#member"]::before { content: ""; }

#menu .menu > li > a[href="#memberlevel"]::before { content: ""; }

#menu .menu > li > a[href="/vip/index"]::before { content: ""; }

#menu .menu > li > a[href="#memberPoint"]::before { content: ""; }

#menu .menu > li > a[href="#game"]::before { content: ""; }

#menu .menu > li > a[href="#bonus"]::before { content: ""; }

#menu .menu > li > a[href="#event"]::before { content: ""; }

#menu .menu > li > a[href="#mall"]::before { content: ""; }

#menu .menu > li > a[href="#rebate"]::before { content: ""; }

#menu .menu > li > a[href="#bet"]::before { content: ""; }

#menu .menu > li > a[href="#report"]::before { content: ""; }

#menu .menu > li > a[href="#check"]::before { content: ""; }

#menu .menu > li > a[href="#news"]::before { content: ""; }

#menu .menu > li > a[href="#system"]::before { content: ""; }

#menu .menu > li > a[href="#admin"]::before { content: ""; }

#menu .menu > li > a[href="#coupon_manage"]::before { content: ""; }

.notifications .dropdown-menu a.lang-active { font-weight: 600; position: relative; background: var(--brand-soft) !important; color: var(--brand-accent-hover) !important; }

.notifications .dropdown-menu a.lang-active::after { content: " ✓"; margin-left: 6px; color: var(--brand-accent); font-weight: 700; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-accent); cursor: pointer; }

.form-group:has(input[required], select[required], textarea[required]) > label::after, .form-group:has(input[aria-required="true"], select[aria-required="true"]) > label::after, .form-group:has(input.required, select.required, textarea.required) > label::after { content: " *"; color: var(--danger); font-weight: 700; margin-left: 2px; }

.table tbody td.cell-amount, .table tbody td.cell-id, .table tbody td.text-right, .table tbody td[class*="amount"], .table tbody td[class*="number"], .table tbody td[class*="count"], .table tbody td[class*="time"], .table tbody td[class*="date"], .table tbody td[class*="rate"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.summary, .pager-summary, .grid-view .summary { font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

.summary b, .summary strong, .pager-summary b, .pager-summary strong, .grid-view .summary b, .grid-view .summary strong { color: var(--fg); font-weight: 600; }

button.btn-primary, input.btn-primary[type="submit"], input.btn-primary[type="button"], a.btn-primary { height: 38px; padding: 0px 14px; font-size: 13px; }

button.btn-primary.btn-sm, input.btn-primary.btn-sm[type="submit"], input.btn-primary.btn-sm[type="button"], a.btn-primary.btn-sm { height: 30px; padding: 0px 10px; font-size: 12px; }

@keyframes saas-shimmer { 
  0% { background-position: -200% 0px; }
  100% { background-position: 200% 0px; }
}

.is-loading { position: relative; pointer-events: none; background-size: 200% 100%; animation: 1.4s ease-in-out 0s infinite normal none running saas-shimmer; background-image: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.08) 50%, transparent 100%) !important; }

.is-loading > * { opacity: 0.6; transition: opacity var(--dur-fast) var(--ease); }

.notif-footer { display: block; text-align: center; padding: 10px 12px; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--brand-accent); border-top: 1px solid var(--border-subtle); text-decoration: none; border-radius: 0px 0px 6px 6px; cursor: pointer; transition: background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); }

.notif-footer:hover, .notif-footer:focus { background: var(--bg-subtle); color: var(--brand-accent-hover); text-decoration: none; }

.saas-back-to-top { position: fixed; bottom: 24px; right: 24px; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-gradient); color: rgb(255, 255, 255); display: none; align-items: center; justify-content: center; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: rgba(139, 92, 246, 0.35) 0px 4px 14px, rgba(255, 255, 255, 0.15) 0px 1px 0px inset; z-index: 50; transition: transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease); font-size: 18px; font-weight: 700; font-family: inherit; line-height: 1; padding: 0px; }

.saas-back-to-top::before { content: "↑"; }

.saas-back-to-top:hover { transform: translateY(-2px); box-shadow: rgba(139, 92, 246, 0.45) 0px 6px 20px, rgba(255, 255, 255, 0.15) 0px 1px 0px inset; }

.saas-back-to-top:active { transform: translateY(0px); }

body.show-back-to-top .saas-back-to-top { display: flex; }

@media (max-width: 767px) {
  .saas-back-to-top { bottom: 16px; right: 16px; width: 36px; height: 36px; font-size: 16px; }
}

.btn-excel, button.btn-excel, a.btn-excel, .btn.btn-excel { background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-image: var(--brand-gradient-soft) !important; background-color: transparent !important; color: var(--brand-accent-hover) !important; border: 1px solid rgba(139, 92, 246, 0.3) !important; box-shadow: var(--sh-xs) !important; }

.btn-excel:hover, button.btn-excel:hover, a.btn-excel:hover, .btn.btn-excel:hover { background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color:  !important; background-image: var(--brand-gradient) !important; color: rgb(255, 255, 255) !important; border-color: transparent !important; }

.btn-excel:active, button.btn-excel:active, a.btn-excel:active, .btn.btn-excel:active { filter: brightness(0.96); background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color:  !important; background-image: var(--brand-gradient) !important; color: rgb(255, 255, 255) !important; }

#menu ul.menu li.active > a > span, #menu ul.menu li > a.active > span { word-break: break-word; line-height: 1.35; white-space: normal !important; text-overflow: clip !important; overflow: visible !important; }

body.saas-login-body { margin: 0px; background: linear-gradient(135deg, rgb(56, 189, 248) 0%, rgb(168, 85, 247) 55%, rgb(224, 64, 251) 100%) fixed; min-height: 100vh; font-family: Inter, "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif; }

body.saas-login-body::before { content: ""; position: fixed; inset: 0px; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 50%); pointer-events: none; z-index: 0; }

.saas-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; z-index: 1; }

.saas-login-card { width: 100%; max-width: 400px; background: rgb(255, 255, 255); border-radius: 20px; padding: 40px 32px 32px; box-shadow: rgba(20, 22, 30, 0.25) 0px 24px 64px, rgba(20, 22, 30, 0.08) 0px 4px 12px, rgba(255, 255, 255, 0.6) 0px 1px 0px inset; }

.saas-login-brand { text-align: center; margin-bottom: 32px; }

.saas-login-logo-wrap { width: 64px; height: 64px; margin: 0px auto 20px; background: linear-gradient(135deg, rgb(56, 189, 248) 0%, rgb(168, 85, 247) 55%, rgb(224, 64, 251) 100%); border-radius: 16px; padding: 6px; display: flex; align-items: center; justify-content: center; box-shadow: rgba(168, 85, 247, 0.45) 0px 12px 28px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset; }

.saas-login-logo-img { max-width: 100%; max-height: 100%; background: rgb(255, 255, 255); border-radius: 12px; object-fit: contain; padding: 4px; }

.saas-login-title { font-size: 22px; font-weight: 700; color: var(--fg); letter-spacing: -0.015em; margin: 0px; line-height: 1.3; }

.saas-login-form .form-group { margin-bottom: 18px; }

.saas-login-form .form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--fg-2); margin-bottom: 6px; letter-spacing: 0.01em; }

.saas-login-submit { margin-top: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }

@media (max-width: 480px) {
  .saas-login-card { padding: 32px 22px 24px; border-radius: 16px; }
  .saas-login-logo-wrap { width: 56px; height: 56px; }
  .saas-login-title { font-size: 20px; }
}

@media (max-width: 1199px) {
  .table-responsive { overflow-x: auto; }
  .table-responsive > table > thead > tr > th:first-child, .table-responsive > table > tbody > tr > td:first-child { position: sticky; left: 0px; z-index: 2; background: var(--card); }
  .table-responsive > table > thead > tr > th:first-child { z-index: 6; }
  .table-responsive > table > tbody > tr:hover > td:first-child { background: var(--brand-soft); }
  .table-responsive > table > thead > tr > th:first-child, .table-responsive > table > tbody > tr > td:first-child { box-shadow: 1px 0 0 var(--border-subtle); }
  .table-responsive.no-sticky-col > table > thead > tr > th:first-child, .table-responsive.no-sticky-col > table > tbody > tr > td:first-child { position: static; z-index: auto; box-shadow: none; background: 0px 0px; }
  .table-responsive.no-sticky-col > table > tbody > tr:hover > td:first-child { background: 0px 0px; }
}