/*!
 * Tabler 主题补充样式
 * 1) 单一品牌配色（覆盖 Tabler --tblr-primary）
 * 2) 跨页面自定义组件类（panel-card / overview-stat-card / notice-card 等）的 Tabler 化样式
 */

/* ============ 1. 单一品牌配色 ============ */
:root,
[data-bs-theme="light"] {
  --app-font-sans: "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --tblr-font-sans-serif: var(--app-font-sans);
  --tblr-body-font-family: var(--app-font-sans);
  --tblr-primary: #1266f1;
  --tblr-primary-rgb: 18, 102, 241;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: #1266f1;
  --tblr-link-hover-color: #0b55d9;
  --app-primary: #1266f1;
  --app-primary-rgb: 18, 102, 241;
  --app-primary-hover: #0b55d9;
  --app-primary-deep: #084abf;
  --app-primary-accent: #2f80ff;
  /* 兼容垫片：模板里残留的 Bootstrap/vuexy 变量映射到品牌色，
     使 var(--bs-primary-rgb) 等旧写法在 Tabler 下仍生效 */
  --bs-primary: #1266f1;
  --bs-primary-rgb: 18, 102, 241;
  --bs-border-color: var(--tblr-border-color);
  --tblr-body-bg: #f8fafc;
  --tblr-body-bg-rgb: 248, 250, 252;
  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-secondary: #f8fafc;
  --tblr-bg-surface-tertiary: #f1f5f9;
  --bs-body-bg: #f8fafc;
  --bs-body-bg-rgb: 248, 250, 252;
  --app-bg: #f8fafc;
  --app-ink: #172033;
  --app-muted: #667085;
  --app-card-radius: .875rem;
  --app-control-radius: .625rem;
  --app-control-height: 2.625rem;
  --app-card-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 8px 24px rgba(15, 23, 42, .045);
  --app-card-shadow-hover: 0 2px 4px rgba(15, 23, 42, .04), 0 12px 30px rgba(15, 23, 42, .07);
  --app-soft-border: rgba(15, 23, 42, .10);
  --app-strong-border: rgba(15, 23, 42, .16);
  --app-soft-surface: #ffffff;
  --app-focus-ring: 0 0 0 .2rem rgba(var(--app-primary-rgb), .16);
  --app-transition: 160ms ease;
  --app-shell-width: min(calc(100% - 3rem), 1440px);
}
[data-bs-theme="dark"] {
  --app-font-sans: "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --tblr-font-sans-serif: var(--app-font-sans);
  --tblr-body-font-family: var(--app-font-sans);
  --tblr-primary: #60a5fa;
  --tblr-primary-rgb: 96, 165, 250;
  --app-primary: #60a5fa;
  --app-primary-rgb: 96, 165, 250;
  --app-primary-hover: #1266f1;
  --app-primary-deep: #0b55d9;
  --app-primary-accent: #93c5fd;
  --bs-primary: #60a5fa;
  --bs-primary-rgb: 96, 165, 250;
  --bs-border-color: var(--tblr-border-color);
  --tblr-body-bg: #0b1220;
  --tblr-body-bg-rgb: 11, 18, 32;
  --tblr-bg-surface: #111827;
  --tblr-bg-surface-secondary: #162033;
  --tblr-bg-surface-tertiary: #1e293b;
  --bs-body-bg: #0b1220;
  --bs-body-bg-rgb: 11, 18, 32;
  --app-bg: #0b1220;
  --app-ink: #edf2fb;
  --app-muted: #a6b1c2;
  --app-card-radius: .875rem;
  --app-control-radius: .625rem;
  --app-control-height: 2.625rem;
  --app-card-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 10px 28px rgba(0, 0, 0, .16);
  --app-card-shadow-hover: 0 2px 4px rgba(0, 0, 0, .24), 0 14px 34px rgba(0, 0, 0, .22);
  --app-soft-border: rgba(148, 163, 184, .16);
  --app-strong-border: rgba(148, 163, 184, .24);
  --app-soft-surface: #111827;
  --app-focus-ring: 0 0 0 .2rem rgba(var(--app-primary-rgb), .22);
  --app-transition: 160ms ease;
}

html,
body,
button,
input,
select,
textarea,
.swal2-popup {
  font-family: var(--app-font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--app-ink);
  font-size: .9375rem;
  line-height: 1.55;
}

p,
.form-hint {
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.card-title {
  text-wrap: balance;
}

/* 主按钮保持品牌辨识度，但不使用渐变或悬浮位移。 */
.btn-primary {
  --tblr-btn-bg: var(--tblr-primary);
  --tblr-btn-border-color: var(--tblr-primary);
  --tblr-btn-hover-bg: var(--app-primary-hover);
  --tblr-btn-hover-border-color: var(--app-primary-hover);
  --tblr-btn-active-bg: var(--app-primary-deep);
  --tblr-btn-active-border-color: var(--app-primary-deep);
  background: var(--app-primary);
  border-color: var(--app-primary);
  box-shadow: 0 1px 2px rgba(var(--app-primary-rgb), .18);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  box-shadow: 0 4px 12px rgba(var(--app-primary-rgb), .16);
}
.btn-primary:active,
.btn-primary.active {
  background: var(--app-primary-deep);
  border-color: var(--app-primary-deep);
  box-shadow: none;
}

/* ============ 2. 跨页面自定义组件兜底样式 ============ */
/* 多数页面卡片直接用 Tabler .card；以下为业务模板里残留的自定义类提供 Tabler 观感兜底 */
.panel-card,
.metric-card,
.overview-stat-card,
.notice-card {
  background: var(--tblr-bg-surface);
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-shadow-card, 0 1px 2px 0 rgba(0,0,0,.05));
}

/* 概览统计卡片网格（用户中心首页） */
.overview-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.overview-stat-card .card-body {
  padding: 1.25rem;
}
.overview-stat-card-membership {
  background: linear-gradient(120deg, rgba(var(--tblr-primary-rgb), .12), rgba(var(--tblr-primary-rgb), .02));
}

/* 公告卡片头部 */
.announcement-card-header,
.member-notice-card .announcement-card-header {
  display: flex;
  align-items: center;
  padding: .85rem 1.25rem;
  background: linear-gradient(120deg, rgba(var(--tblr-primary-rgb), .92), rgba(var(--tblr-primary-rgb), .68));
  border-top-left-radius: var(--tblr-border-radius);
  border-top-right-radius: var(--tblr-border-radius);
}

/* 订阅锁定卡片 */
.sub-lock-card {
  text-align: center;
  padding: 1.5rem;
  border: 1px dashed var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
}

/* 复制按钮指针 */
.copy-text { cursor: pointer; }

/* 业务图标字体在 Tabler 中垂直对齐 */
[class^="cool-"], [class*=" cool-"] { vertical-align: -.125em; }

/* Vuexy 残留工具类兼容：让 avatar 图标方块、label badge 在 Tabler 下不再空白 */
.icon-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.icon-xs { font-size: .75rem; }
.icon-sm { font-size: .875rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.5rem; }
.avatar-initial {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bg-label-primary { color: var(--tblr-primary); background-color: rgba(var(--tblr-primary-rgb), .12) !important; }
.bg-label-secondary { color: var(--tblr-secondary); background-color: rgba(var(--tblr-secondary-rgb), .12) !important; }
.bg-label-success { color: var(--tblr-success); background-color: rgba(var(--tblr-success-rgb), .12) !important; }
.bg-label-info { color: var(--tblr-info); background-color: rgba(var(--tblr-info-rgb), .12) !important; }
.bg-label-warning { color: var(--tblr-warning); background-color: rgba(var(--tblr-warning-rgb), .14) !important; }
.bg-label-danger { color: var(--tblr-danger); background-color: rgba(var(--tblr-danger-rgb), .12) !important; }
.bg-label-dark { color: var(--tblr-dark); background-color: rgba(var(--tblr-dark-rgb), .12) !important; }
.btn-label-primary,
.btn-label-secondary,
.btn-label-success,
.btn-label-info,
.btn-label-warning,
.btn-label-danger {
  border-color: transparent;
  box-shadow: none;
}
.btn-label-primary { color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .12); }
.btn-label-secondary { color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary); border-color: var(--tblr-border-color); }
.btn-label-success { color: var(--tblr-success); background: rgba(var(--tblr-success-rgb), .12); }
.btn-label-info { color: var(--tblr-info); background: rgba(var(--tblr-info-rgb), .12); }
.btn-label-warning { color: var(--tblr-warning); background: rgba(var(--tblr-warning-rgb), .14); }
.btn-label-danger { color: var(--tblr-danger); background: rgba(var(--tblr-danger-rgb), .12); }
.btn-label-primary:hover,
.btn-label-primary:focus { color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .18); border-color: rgba(var(--tblr-primary-rgb), .22); }
.btn-label-secondary:hover,
.btn-label-secondary:focus { color: var(--tblr-secondary); background: var(--tblr-bg-surface-tertiary); border-color: var(--tblr-border-color); }
.btn-label-success:hover,
.btn-label-success:focus { color: var(--tblr-success); background: rgba(var(--tblr-success-rgb), .18); border-color: rgba(var(--tblr-success-rgb), .22); }
.btn-label-info:hover,
.btn-label-info:focus { color: var(--tblr-info); background: rgba(var(--tblr-info-rgb), .18); border-color: rgba(var(--tblr-info-rgb), .22); }
.btn-label-warning:hover,
.btn-label-warning:focus { color: var(--tblr-warning); background: rgba(var(--tblr-warning-rgb), .20); border-color: rgba(var(--tblr-warning-rgb), .24); }
.btn-label-danger:hover,
.btn-label-danger:focus { color: var(--tblr-danger); background: rgba(var(--tblr-danger-rgb), .18); border-color: rgba(var(--tblr-danger-rgb), .22); }
.me-1_5 { margin-right: .375rem !important; }

/* ============ 3. 节点页 / 通用品牌渐变 hero 卡片 ============ */
.node-guide-hero,
.brand-gradient-hero {
  border: 0;
  color: #fff;
  background: linear-gradient(120deg, var(--app-primary-accent) 0%, var(--app-primary) 45%, var(--app-primary-deep) 100%);
}
.node-guide-hero .text-white,
.node-guide-hero h1, .node-guide-hero h2, .node-guide-hero h3,
.node-guide-hero h4, .node-guide-hero h5 { color: #fff !important; }
.text-white-75 { color: rgba(255, 255, 255, .78) !important; }

/* 节点卡片悬停 */
.node-card-content { transition: box-shadow var(--app-transition), border-color var(--app-transition); }
.card.cursor-pointer:hover .node-card-content,
.node-card:hover {
  box-shadow: 0 .5rem 1rem rgba(var(--tblr-primary-rgb), .15);
}
.node-card-title { font-weight: 600; }

/* 文本截断辅助 */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ 4. 用户端 SaaS 工作台基础样式 ============ */
[data-bs-theme="light"] body {
  background: var(--app-bg);
}

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .page {
  background: var(--app-bg);
}

.app-sidebar.navbar-vertical {
  --app-sidebar-primary: #2563eb;
  --app-sidebar-primary-rgb: 37, 99, 235;
  --app-sidebar-fg: #64748b;
  --app-sidebar-heading: #94a3b8;
  --app-sidebar-ink: #0f172a;
  width: 15rem;
  min-width: 15rem;
  max-width: 15rem;
  background: #ffffff;
  border-right: 1px solid rgba(148, 163, 184, .18);
  box-shadow: none;
  backdrop-filter: none;
}
.app-sidebar > .container-fluid {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
}
.min-width-0 {
  min-width: 0;
}
.app-sidebar .navbar-brand {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.app-sidebar-brand {
  min-height: 4rem;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.app-sidebar-brand > a {
  min-width: 0;
  gap: .7rem;
  padding-right: 1rem;
  padding-left: 1rem;
}
.app-sidebar-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.app-sidebar-brand-text {
  min-width: 0;
  color: var(--app-sidebar-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-sidebar-brand-subtitle {
  color: var(--app-sidebar-heading);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.2;
}
.app-sidebar .navbar-brand-image {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: .85rem;
  background:
    radial-gradient(circle at 26% 18%, rgba(96, 165, 250, .22), transparent 1.15rem),
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(239, 246, 255, .94));
  box-shadow: 0 10px 22px rgba(37, 99, 235, .14);
}
.app-sidebar-brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: .6rem;
  object-fit: contain;
  transform: scale(1.2);
  filter: none;
}
.app-sidebar-panel {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: .75rem 0 1rem;
  overflow: hidden;
}
.app-sidebar-nav {
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 .75rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .32) transparent;
}
.app-sidebar-nav::-webkit-scrollbar {
  width: .3rem;
}
.app-sidebar-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, .30);
}
.app-sidebar-section {
  margin-top: .75rem;
}
.app-sidebar-section:first-child {
  margin-top: 0;
}
.app-sidebar .navbar-nav .nav-link-title.text-uppercase {
  display: block;
  margin: 0 0 .45rem;
  padding-right: .2rem !important;
  padding-left: .2rem !important;
  color: var(--app-sidebar-heading);
  font-size: .6875rem;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: .04em;
  opacity: 1 !important;
}
.app-sidebar .navbar-nav .nav-link {
  min-height: 2.5rem;
  position: relative;
  margin: .125rem 0;
  padding: .62rem .75rem;
  color: var(--app-sidebar-fg);
  border: 1px solid transparent;
  border-radius: .75rem;
  font-size: .875rem;
  font-weight: 500;
  transition: background-color var(--app-transition), color var(--app-transition), border-color var(--app-transition), box-shadow var(--app-transition);
}
.app-sidebar .navbar-nav .nav-link:hover {
  color: var(--app-sidebar-primary);
  background: rgba(37, 99, 235, .06);
}
.app-sidebar-nav .navbar-nav > .nav-item:not(.app-sidebar-section) > .nav-link {
  width: 100%;
}
.app-sidebar.navbar-vertical .nav-item.active > .nav-link,
.app-sidebar .navbar-nav .nav-item.active > .nav-link {
  color: var(--app-sidebar-primary) !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, .12), rgba(59, 130, 246, .06)) !important;
  border-color: rgba(37, 99, 235, .16);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .08) !important;
  font-weight: 600;
}
.app-sidebar.navbar-vertical .navbar-nav .nav-item.active {
  position: relative;
}
.app-sidebar.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: .3rem;
  width: 3px;
  height: 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--app-sidebar-primary);
  transform: translateY(-50%);
}
.app-sidebar .nav-link-icon {
  width: 1.75rem;
  color: inherit;
  opacity: 1;
}
.app-sidebar .nav-link-icon .ti {
  font-size: 1.1rem;
  stroke-width: 2;
}
.app-sidebar .nav-link-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-sidebar-actions {
  flex: 0 0 auto;
  margin: .85rem .9rem 0;
  padding-top: .85rem;
  border-top: 1px solid rgba(97, 111, 139, .1);
}
.app-sidebar-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}
.app-sidebar-action {
  min-width: 0;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(97, 111, 139, .1);
  border-radius: .9rem;
  color: #526071;
  background: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color var(--app-transition), background-color var(--app-transition), border-color var(--app-transition);
}
.app-sidebar-action:hover {
  color: var(--app-primary);
  border-color: rgba(var(--app-primary-rgb), .18);
  background: rgba(var(--app-primary-rgb), .08);
}
.page-wrapper,
.page-body {
  background: var(--app-bg);
}
.page-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.page-wrapper {
  position: relative;
  z-index: auto;
}
.page-wrapper > .page-body > .container-xl,
.page-wrapper > .page-body > .container-xxl,
.page-wrapper > .page-body > .container-fluid {
  width: var(--app-shell-width);
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
}
.container-fluid.container-p-y,
.container-xxl.container-p-y,
.container-xl.container-p-y {
  width: 100%;
  max-width: none;
}
.page-wrapper > .page-body > .container-xl,
.page-wrapper > .page-body > .container-xxl,
.page-wrapper > .page-body > .container-fluid {
  padding-right: 0;
  padding-left: 0;
}
.container-fluid.container-p-y,
.container-xxl.container-p-y,
.container-xl.container-p-y {
  padding-top: 1.5rem !important;
  padding-bottom: 2rem !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.row.g-6 {
  --tblr-gutter-x: 1.25rem;
  --tblr-gutter-y: 1.25rem;
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}
.table-responsive {
  max-width: 100%;
  border-radius: var(--app-card-radius);
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, .34) transparent;
}
.table-responsive > .table {
  width: 100%;
  min-width: 42rem;
}
.table-responsive > .table.table-sm,
.table-responsive > .node-info-table {
  min-width: 0;
}
.card .table {
  margin-bottom: 0;
}
.navbar.d-print-none {
  position: relative;
  z-index: 1080;
  min-height: 3.25rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  box-shadow: none;
}
.navbar.d-print-none .dropdown-menu {
  z-index: 1090;
}
.navbar.d-print-none > .container-fluid {
  width: var(--app-shell-width);
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
  gap: 1rem;
  min-height: 3.25rem;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.page-wrapper > .footer {
  margin-top: 2rem;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid var(--app-soft-border);
  background: transparent;
}
.page-wrapper > .footer > .container-xl,
.page-wrapper > .footer > .container-xxl,
.page-wrapper > .footer > .container-fluid {
  width: var(--app-shell-width);
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}
.page-wrapper > .footer .text-secondary {
  color: var(--app-muted) !important;
  font-size: .8125rem;
}
.app-topbar-heading {
  gap: .9rem;
  min-width: 0;
}
.app-topbar-title {
  color: var(--app-ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
.app-topbar-actions {
  gap: .28rem;
  padding: 0;
  margin-left: auto;
}
.app-topbar-actions > .nav-item,
.app-topbar-actions > .app-topbar-quick {
  margin-right: 0 !important;
}
.app-topbar-quick {
  gap: .45rem;
}
.app-topbar-quick .nav-link,
.app-topbar-icon,
.app-user-menu {
  min-width: 2.15rem;
  min-height: 2.15rem;
  align-items: center;
  justify-content: center;
  padding: .38rem !important;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #62718a;
  transition: background-color var(--app-transition), color var(--app-transition), border-color var(--app-transition);
}
.app-topbar-icon {
  position: relative;
}
.app-checkin-icon {
  border: 1px solid rgba(97, 111, 139, .12);
  background: rgba(255, 255, 255, .58);
  color: var(--app-primary);
}
.app-checkin-icon.is-checked,
.app-checkin-icon:disabled {
  color: #8a97aa;
  cursor: default;
  opacity: .72;
}
.app-topbar-quick .nav-link:hover,
.app-topbar-icon:hover,
.app-user-menu:hover,
.app-topbar-quick .nav-link:focus,
.app-topbar-icon:focus,
.app-user-menu:focus {
  background: rgba(var(--app-primary-rgb), .1);
  color: var(--app-primary);
}
.app-checkin-icon.is-checked:hover,
.app-checkin-icon:disabled:hover,
.app-checkin-icon.is-checked:focus,
.app-checkin-icon:disabled:focus {
  background: rgba(255, 255, 255, .58);
  color: #8a97aa;
}
.app-user-menu {
  width: auto;
  gap: .45rem;
  min-height: 2.35rem;
  padding-right: .7rem !important;
  padding-left: .28rem !important;
  border: 1px solid rgba(97, 111, 139, .12);
  background: rgba(255, 255, 255, .58);
}
.app-user-menu .avatar {
  box-shadow: 0 0 0 2px rgba(var(--app-primary-rgb), .1);
}
.app-user-menu > div {
  min-width: 0;
  max-width: 11rem;
}
.app-user-menu > div > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-topbar-actions .btn-sm {
  min-height: 2.15rem;
  border-radius: var(--app-control-radius);
  padding-right: .76rem;
  padding-left: .76rem;
  font-size: .78rem;
  box-shadow: 0 1px 2px rgba(var(--app-primary-rgb), .12);
}
.app-topbar-icon .badge-notification {
  position: absolute;
  top: .18rem;
  right: .2rem;
  width: .48rem;
  height: .48rem;
  min-width: 0;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 999px;
  transform: none;
}

.card,
.modal-content,
.dropdown-menu,
.swal2-popup {
  border-color: var(--app-soft-border) !important;
  border-radius: var(--app-card-radius) !important;
}
.dropdown-menu {
  padding: .4rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
}
.dropdown-item {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  border-radius: .5rem;
  transition: color var(--app-transition), background-color var(--app-transition);
}
.app-language-menu {
  min-width: 10.5rem;
  padding: .35rem;
}
.app-language-menu .dropdown-item {
  display: flex;
  align-items: center;
  min-height: 2.15rem;
  padding: .46rem .72rem;
  border-radius: .62rem;
  font-weight: 600;
  line-height: 1.25;
}
.app-language-menu .dropdown-item + .dropdown-item {
  margin-top: .12rem;
}
.app-language-menu .dropdown-item.active,
.app-language-menu .dropdown-item:active {
  background: rgba(var(--app-primary-rgb), .12);
  color: var(--app-primary);
}
.card,
.panel-card,
.metric-card,
.overview-stat-card,
.notice-card {
  border: 1px solid var(--app-soft-border);
  border-radius: var(--app-card-radius);
  box-shadow: var(--app-card-shadow);
  background: var(--app-soft-surface);
  backdrop-filter: none;
}
.card {
  transition: box-shadow var(--app-transition), border-color var(--app-transition);
}
.card.cursor-pointer:hover,
.overview-stat-card:hover,
.panel-card:hover {
  border-color: var(--app-strong-border);
  box-shadow: var(--app-card-shadow-hover);
}
.card-header {
  border-top-left-radius: var(--app-card-radius) !important;
  border-top-right-radius: var(--app-card-radius) !important;
  background: transparent;
  border-color: var(--app-soft-border) !important;
  padding: 1rem 1.25rem;
}
.card-title,
.card-header h5,
.card-header h3 {
  color: var(--app-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.btn {
  min-height: 2.5rem;
  padding: .5rem .9rem;
  border-radius: var(--app-control-radius);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  transition: color var(--app-transition), background-color var(--app-transition), border-color var(--app-transition), box-shadow var(--app-transition);
}
.btn-sm {
  min-height: 2.125rem;
  padding: .38rem .7rem;
  border-radius: .5rem;
  font-size: .8125rem;
}
.form-control,
.form-select,
.input-group-text {
  min-height: var(--app-control-height);
  border-radius: var(--app-control-radius);
  border-color: var(--app-soft-border);
  background-color: var(--tblr-bg-surface);
  transition: border-color var(--app-transition), box-shadow var(--app-transition), background-color var(--app-transition);
}
.input-group > .form-control:first-child,
.input-group > .form-select:first-child {
  border-top-left-radius: var(--app-control-radius);
  border-bottom-left-radius: var(--app-control-radius);
}
.input-group > .btn:last-child,
.input-group > .input-group-text:last-child {
  border-top-right-radius: var(--app-control-radius);
  border-bottom-right-radius: var(--app-control-radius);
}
.input-group-text[role="button"] {
  cursor: pointer;
  transition: color var(--app-transition), background-color var(--app-transition), border-color var(--app-transition);
}
.input-group-text[role="button"]:hover {
  color: var(--app-primary);
  background: var(--tblr-bg-surface-tertiary);
}

.page-body .page-header {
  margin-bottom: 1.5rem !important;
}
.content-header-left {
  min-width: 0;
}
.content-header-left h2,
.content-header-left h4,
.page-header .page-title {
  margin: 0;
  color: var(--app-ink);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.breadcrumb {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: .25rem;
  margin-top: .35rem;
  color: var(--app-muted);
  font-size: .8125rem;
}
.breadcrumb-item,
.breadcrumb-item a {
  min-width: 0;
  overflow-wrap: anywhere;
}
.card-body {
  padding: 1.25rem;
}
.card-footer {
  padding: 1rem 1.25rem;
  border-color: var(--app-soft-border);
  background: var(--tblr-bg-surface-secondary);
}
.form-label {
  margin-bottom: .45rem;
  color: var(--app-ink);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
}
.form-hint {
  color: var(--app-muted);
  font-size: .8125rem;
}
.form-control::placeholder,
.form-select::placeholder {
  color: #98a2b3;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgba(var(--app-primary-rgb), .55);
  box-shadow: var(--app-focus-ring);
}
.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled {
  color: var(--app-muted);
  border-color: var(--app-soft-border);
  background: var(--tblr-bg-surface-tertiary);
  cursor: not-allowed;
  opacity: .72;
}
.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: .56;
}
.btn.is-loading,
.btn[aria-busy="true"] {
  cursor: wait;
}
.btn .ti-loader-2 {
  animation: app-spin .8s linear infinite;
}
@keyframes app-spin {
  to { transform: rotate(360deg); }
}
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.form-check-input:focus-visible,
.input-group-text[role="button"]:focus-visible,
a:not(.btn):focus-visible {
  outline: 2px solid rgba(var(--app-primary-rgb), .72);
  outline-offset: 2px;
  box-shadow: var(--app-focus-ring);
}
.alert {
  border-radius: .75rem;
  border-color: var(--app-soft-border);
}
.list-group-item {
  padding: .875rem 1rem;
}

.referral-hero {
  border: 0;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--app-card-shadow);
}
.referral-hero .card-body {
  min-height: clamp(124px, 9vw, 154px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(1.25rem, 2vw, 2.25rem);
  text-align: left !important;
}
.referral-hero p,
.referral-hero .text-secondary {
  color: #64748b !important;
}
.referral-hero h1,
.referral-hero h2,
.referral-hero h3 {
  color: #172033 !important;
}
.dashboard-hero-content {
  position: relative;
  z-index: 2;
  width: min(62%, 720px);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .65rem;
}
.dashboard-hero-title {
  font-size: clamp(1.75rem, 2vw, 2.55rem);
  line-height: 1.15;
  font-weight: 800;
}
.dashboard-hero-title span {
  color: var(--app-primary);
}
.dashboard-hero-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1.1rem;
}
.dashboard-hero-visual {
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(280px, 34%, 520px);
  min-width: 280px;
  pointer-events: none;
}
.dashboard-hero-device {
  position: absolute;
  top: 19%;
  right: 12%;
  width: clamp(150px, 11vw, 220px);
  height: clamp(104px, 7.5vw, 150px);
  border-radius: 1.4rem;
  background: linear-gradient(145deg, #5da2ff 0%, #1e67f2 100%);
  box-shadow: 0 24px 42px rgba(var(--app-primary-rgb), .28);
  transform: rotate(8deg);
}
.dashboard-hero-device::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 28px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}
.dashboard-hero-device::after {
  content: "";
  position: absolute;
  left: 70px;
  top: 33px;
  width: 70px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 26px 0 rgba(255, 255, 255, .48);
}
.dashboard-hero-crown,
.dashboard-hero-gem {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 1rem;
  background: linear-gradient(145deg, #77d7ff 0%, #3887ff 100%);
  box-shadow: 0 18px 32px rgba(var(--app-primary-rgb), .2);
}
.dashboard-hero-crown {
  right: 9%;
  top: 48%;
  width: clamp(46px, 3.8vw, 66px);
  height: clamp(46px, 3.8vw, 66px);
  font-size: 1.55rem;
}
.dashboard-hero-gem {
  right: 29%;
  top: 12%;
  width: clamp(24px, 1.8vw, 34px);
  height: clamp(24px, 1.8vw, 34px);
  opacity: .65;
}
.dashboard-hero-orb {
  position: absolute;
  right: 3%;
  bottom: 13%;
  width: clamp(24px, 2vw, 36px);
  height: clamp(24px, 2vw, 36px);
  border-radius: 50%;
  background: rgba(var(--app-primary-rgb), .12);
}
.overview-cards-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.overview-stat-card .card-body {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.overview-stat-icon,
.announcement-item-icon,
.client-os-icon {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.announcement-card {
  overflow: hidden;
}
.announcement-card-header,
.member-notice-card .announcement-card-header {
  justify-content: space-between;
  padding: 1rem 1.25rem;
  color: #1e293b;
  background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), .08), rgba(6, 182, 212, .08));
  border-bottom: 1px solid var(--app-soft-border);
}
.announcement-card-header h5 {
  color: #1e293b !important;
}
.announcement-card-header h5 i {
  color: var(--tblr-primary);
}
.announcement-list {
  padding: .75rem;
  background: var(--tblr-bg-surface);
}
.announcement-list-item {
  margin-bottom: .65rem;
  padding: .9rem;
  border: 1px solid rgba(98,105,118,.08);
  border-radius: 1rem;
  background: var(--tblr-bg-surface);
}
.announcement-list-item:last-child {
  margin-bottom: 0;
}
.announcement-item-title {
  font-size: .95rem;
  font-weight: 700;
}
.announcement-item-desc {
  color: #64748b;
  line-height: 1.65;
}

.client-download-accordion .accordion-item {
  border-color: rgba(98,105,118,.09);
  background: transparent;
}
.client-download-accordion .accordion-button {
  min-height: 42px;
  border-radius: .8rem !important;
  margin: .35rem .75rem;
  width: calc(100% - 1.5rem);
}
.client-download-item {
  margin-bottom: .35rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(98,105,118,.08);
  border-radius: .85rem;
  background: rgba(248,250,252,.72);
}
.client-download-actions .btn {
  min-width: 4.25rem;
  min-height: 2rem;
  padding: .25rem .7rem;
}

.subscription-url-box {
  padding: 1rem;
  border: 1px solid rgba(var(--app-primary-rgb), .12);
  border-radius: .75rem;
  background: var(--tblr-bg-surface-secondary);
}
.subscription-url-mask {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #64748b;
  background: rgba(255,255,255,.72);
}
.sub-grid {
  gap: .65rem;
}
.sub-pill {
  border: 1px solid rgba(97, 111, 139, .11) !important;
  color: #26364f !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .055);
}
.sub-pill i {
  color: var(--app-primary);
}
.sub-pill:hover,
.sub-pill:focus {
  color: var(--app-primary) !important;
  background: rgba(239, 246, 255, .92) !important;
  border-color: rgba(var(--app-primary-rgb), .18) !important;
}

.table,
.list-group-item,
.accordion-item {
  --tblr-list-group-bg: transparent;
  border-color: var(--app-soft-border);
}
.table thead th {
  color: #64748b;
  background: rgba(248, 250, 252, .82);
}
.table > :not(caption) > * > * {
  padding: .8rem 1rem;
  vertical-align: middle;
  border-color: var(--app-soft-border);
}
.table-sm > :not(caption) > * > * {
  padding: .5rem .7rem;
}
.table thead th {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
  white-space: nowrap;
}
.table tbody td,
.table tbody th {
  overflow-wrap: anywhere;
  word-break: normal;
}
.table-hover > tbody > tr {
  transition: background-color var(--app-transition);
}
.badge {
  min-height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
}
code,
pre,
.font-monospace,
.subscription-url-mask,
.node-link-code,
.config-pre {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre,
.config-pre {
  overflow: auto;
  white-space: pre-wrap;
}
:where(.card-body, .modal-body, .list-group-item, .table-responsive) a:not(.btn):not(.nav-link) {
  overflow-wrap: anywhere;
}
.modal-content {
  overflow: hidden;
  background: #ffffff !important;
  border: 1px solid var(--app-strong-border) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
}
.modal-header,
.modal-footer,
.modal-body {
  background: #ffffff;
}
.modal-header,
.modal-footer {
  border-color: var(--app-soft-border);
}

.index-placard-modal {
  --index-placard-glow: rgba(var(--app-primary-rgb), .28);
}
.index-placard-modal::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 12%, rgba(var(--app-primary-rgb), .20), transparent 24rem),
    rgba(10, 18, 32, .42);
  backdrop-filter: blur(8px);
}
.index-placard-modal .modal-dialog {
  position: relative;
  z-index: 1;
}
.index-placard-dialog {
  max-width: min(92vw, 720px);
}
.index-placard-shell {
  position: relative;
  display: flex;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--app-strong-border) !important;
  background:
    radial-gradient(circle at 88% -8%, rgba(var(--app-primary-rgb), .16), transparent 15rem),
    linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(248, 251, 255, .97) 100%) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
}
.index-placard-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: .8rem;
  background-color: rgba(255, 255, 255, .78);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
  opacity: .72;
}
.index-placard-close:hover,
.index-placard-close:focus {
  opacity: 1;
}
.index-placard-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.45rem 4.2rem 1rem 1.45rem;
}
.index-placard-icon {
  width: 3.4rem;
  height: 3.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: .75rem;
  color: #fff;
  background: linear-gradient(135deg, var(--app-primary-accent), var(--app-primary));
  box-shadow: 0 16px 34px var(--index-placard-glow);
}
.index-placard-icon i {
  font-size: 1.65rem;
}
.index-placard-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.index-placard-eyebrow {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding: .2rem .62rem;
  color: var(--app-primary);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 999px;
  background: rgba(var(--app-primary-rgb), .11);
}
.index-placard-subtitle {
  color: var(--app-muted);
  font-size: .9rem;
  line-height: 1.45;
}
.index-placard-body {
  min-height: 0;
  padding: .25rem 1.45rem 1.15rem;
  overflow-y: auto;
}
.index-placard-content {
  padding: 1.25rem 1.35rem;
  border: 1px solid rgba(var(--app-primary-rgb), .12);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .72);
}
.index-placard-content h4 {
  margin: 0 0 .8rem;
  color: var(--app-ink);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}
.index-placard-content p {
  margin: 0 0 .7rem;
  color: #526174;
  font-size: .95rem;
  line-height: 1.7;
}
.index-placard-route {
  display: grid;
  gap: .25rem;
  margin: .95rem 0 1rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--app-primary);
  border-radius: .25rem .8rem .8rem .25rem;
  background: rgba(var(--app-primary-rgb), .07);
}
.index-placard-route span {
  color: var(--app-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.index-placard-route strong {
  color: var(--app-ink);
  font-size: 1rem;
  line-height: 1.45;
}
.index-placard-route small {
  color: #66758a;
  font-size: .85rem;
  line-height: 1.55;
}
.index-placard-note {
  padding-top: .85rem;
  border-top: 1px solid rgba(97, 111, 139, .14);
}
.index-placard-note h5 {
  margin: 0 0 .55rem;
  color: var(--app-ink);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
}
.index-placard-note ul {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding-left: 1.15rem;
}
.index-placard-note li {
  padding-left: .1rem;
  color: #526174;
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.5;
}
.index-placard-note li::marker {
  color: var(--app-primary);
}
.index-placard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.45rem 1.45rem;
  border-top: 1px solid rgba(97, 111, 139, .10);
}
.index-placard-hint {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--app-muted);
  font-size: .9rem;
  line-height: 1.45;
}
.index-placard-hint i {
  color: var(--app-primary);
  font-size: 1.05rem;
}
.index-placard-action {
  min-width: 7.5rem;
  flex: 0 0 auto;
}

.tabler-empty-state {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  color: #64748b;
}
.tabler-empty-state-icon,
.tabler-hero-icon {
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  color: var(--app-primary);
  background: linear-gradient(145deg, rgba(var(--app-primary-rgb), .12), rgba(14, 165, 233, .08));
  box-shadow: inset 0 0 0 1px rgba(var(--app-primary-rgb), .12);
}
.tabler-empty-state-icon {
  margin-bottom: 1rem;
}
.tabler-empty-state-icon i,
.tabler-hero-icon i {
  font-size: 2.4rem;
}
.tabler-hero-icon {
  margin-left: auto;
}
.faq-header {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--app-primary-rgb), .12);
  border-radius: var(--app-card-radius) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--app-primary-rgb), .12), transparent 16rem),
    radial-gradient(circle at 86% 6%, rgba(14, 165, 233, .12), transparent 14rem),
    linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
  box-shadow: var(--app-card-shadow);
}
.modal {
  z-index: 1220 !important;
}
.modal-backdrop {
  z-index: 1210 !important;
  pointer-events: auto !important;
  background: rgba(15, 23, 42, .44) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal-backdrop.show {
  opacity: 1 !important;
}
.swal2-container {
  z-index: 1300 !important;
  background: transparent !important;
}
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background: transparent !important;
}
.swal2-popup {
  color: var(--app-ink) !important;
  background: rgba(255, 255, 255, .98) !important;
  border: 1px solid var(--app-soft-border) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .18) !important;
}
body .swal2-container .swal2-popup .swal2-title {
  color: var(--app-ink);
}
body .swal2-container .swal2-popup .swal2-input-label {
  color: #28364a;
  font-weight: 600;
}
body .swal2-container .swal2-modal.swal2-popup .swal2-input,
body .swal2-container .swal2-modal.swal2-popup .swal2-file,
body .swal2-container .swal2-modal.swal2-popup .swal2-textarea {
  width: min(100%, 22rem);
  min-height: 3rem;
  margin: .8rem auto 0;
  padding: .65rem .9rem;
  color: #18243a;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(97, 111, 139, .22);
  border-radius: .9rem;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
}
body .swal2-container .swal2-modal.swal2-popup .swal2-input::placeholder,
body .swal2-container .swal2-modal.swal2-popup .swal2-file::placeholder,
body .swal2-container .swal2-modal.swal2-popup .swal2-textarea::placeholder {
  color: #9aa7ba;
}
body .swal2-container .swal2-modal.swal2-popup .swal2-input:focus,
body .swal2-container .swal2-modal.swal2-popup .swal2-file:focus,
body .swal2-container .swal2-modal.swal2-popup .swal2-textarea:focus {
  border-color: rgba(var(--app-primary-rgb), .58);
  box-shadow: 0 0 0 .18rem rgba(var(--app-primary-rgb), .14);
}
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-line-tip,
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-line-long,
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-line-tip,
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-line-long {
  display: block;
  position: absolute;
  z-index: 3;
  height: .3125em;
  border-radius: .125em;
  background-color: var(--tblr-success, #2fb344);
}
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-line-tip {
  top: 2.875em;
  left: .8125em;
  width: 1.5625em;
  transform: rotate(45deg);
}
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-line-long {
  top: 2.375em;
  right: .5em;
  width: 2.9375em;
  transform: rotate(-45deg);
}
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-line-tip {
  top: 1.125em;
  left: .1875em;
  width: .75em;
  transform: rotate(45deg);
}
body .swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-line-long {
  top: .9375em;
  right: .1875em;
  width: 1.375em;
  transform: rotate(-45deg);
}

[data-bs-theme="dark"] .app-sidebar.navbar-vertical,
[data-bs-theme="dark"] .app-sidebar .navbar-collapse,
[data-bs-theme="dark"] .app-sidebar .navbar-toggler,
[data-bs-theme="dark"] .app-sidebar-action,
[data-bs-theme="dark"] .navbar.d-print-none,
[data-bs-theme="dark"] .sub-pill,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background: rgba(24, 33, 48, .78) !important;
}
[data-bs-theme="dark"] .app-topbar-actions {
  background: transparent;
  box-shadow: none;
}
[data-bs-theme="dark"] .navbar.d-print-none {
  background: rgba(17, 24, 39, .96) !important;
  border-bottom-color: rgba(148, 163, 184, .1);
  box-shadow: none;
}
[data-bs-theme="dark"] .app-topbar-quick .nav-link,
[data-bs-theme="dark"] .app-topbar-icon,
[data-bs-theme="dark"] .app-user-menu {
  color: #aeb9cc;
}
[data-bs-theme="dark"] .app-checkin-icon {
  border-color: rgba(148, 163, 184, .14);
  background: rgba(15, 23, 42, .36);
  color: var(--app-primary);
}
[data-bs-theme="dark"] .app-checkin-icon.is-checked,
[data-bs-theme="dark"] .app-checkin-icon:disabled {
  color: #7f8da3;
}
[data-bs-theme="dark"] .app-user-menu {
  border-color: rgba(148, 163, 184, .14);
  background: rgba(15, 23, 42, .36);
}
[data-bs-theme="dark"] .app-topbar-icon .badge-notification {
  border-color: rgba(24, 33, 48, .96);
}
[data-bs-theme="dark"] .dropdown-menu {
  color: var(--app-ink);
  background: rgba(24, 33, 48, .98) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  box-shadow: 0 18px 42px rgba(2, 6, 23, .42);
}
[data-bs-theme="dark"] .dropdown-item {
  color: #dbe5f4;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  color: #f8fbff;
  background: rgba(var(--app-primary-rgb), .14);
}
[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
  color: var(--app-primary);
  background: rgba(var(--app-primary-rgb), .18);
}
[data-bs-theme="dark"] .app-language-menu {
  background: rgba(17, 25, 39, .98) !important;
  border-color: rgba(148, 163, 184, .24) !important;
  box-shadow: 0 18px 44px rgba(2, 6, 23, .46);
}
[data-bs-theme="dark"] .app-language-menu .dropdown-item {
  color: #e7eefb;
}
[data-bs-theme="dark"] .app-language-menu .dropdown-item:hover,
[data-bs-theme="dark"] .app-language-menu .dropdown-item:focus {
  color: #ffffff;
  background: rgba(96, 165, 250, .13);
}
[data-bs-theme="dark"] .app-language-menu .dropdown-item.active,
[data-bs-theme="dark"] .app-language-menu .dropdown-item:active {
  color: #9cc8ff;
  background: rgba(96, 165, 250, .16);
}
[data-bs-theme="dark"] .app-topbar-quick .nav-link:hover,
[data-bs-theme="dark"] .app-topbar-icon:hover,
[data-bs-theme="dark"] .app-user-menu:hover,
[data-bs-theme="dark"] .app-topbar-quick .nav-link:focus,
[data-bs-theme="dark"] .app-topbar-icon:focus,
[data-bs-theme="dark"] .app-user-menu:focus {
  background: rgba(var(--app-primary-rgb), .14);
  color: var(--app-primary);
}
[data-bs-theme="dark"] .app-checkin-icon.is-checked:hover,
[data-bs-theme="dark"] .app-checkin-icon:disabled:hover,
[data-bs-theme="dark"] .app-checkin-icon.is-checked:focus,
[data-bs-theme="dark"] .app-checkin-icon:disabled:focus {
  background: rgba(15, 23, 42, .36);
  color: #7f8da3;
}

[data-bs-theme="dark"] .app-sidebar.navbar-vertical {
  --app-sidebar-fg: #b8c2d4;
  --app-sidebar-heading: #64748b;
  --app-sidebar-ink: #edf2fb;
  background: rgba(15, 23, 42, .96) !important;
  border-right-color: rgba(148, 163, 184, .14);
}
[data-bs-theme="dark"] .app-sidebar-brand {
  border-color: rgba(148, 163, 184, .12);
}
[data-bs-theme="dark"] .app-sidebar .navbar-brand-image {
  filter: none;
  border-color: rgba(96, 165, 250, .22);
  background:
    radial-gradient(circle at 24% 18%, rgba(96, 165, 250, .22), transparent 1.2rem),
    linear-gradient(145deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .82));
  box-shadow:
    0 10px 22px rgba(2, 6, 23, .34),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
[data-bs-theme="dark"] .app-sidebar-brand-logo {
  filter: saturate(1.08) contrast(1.04);
}
[data-bs-theme="dark"] .app-sidebar-brand-text {
  color: var(--app-ink);
}
[data-bs-theme="dark"] .app-sidebar .navbar-nav .nav-link {
  color: #b8c2d4;
}
[data-bs-theme="dark"] .app-sidebar .navbar-nav .nav-link:hover {
  color: var(--app-primary);
  background: rgba(var(--app-primary-rgb), .12);
}
[data-bs-theme="dark"] .app-sidebar-action {
  color: #b8c2d4;
  border-color: rgba(148, 163, 184, .14);
}

[data-bs-theme="dark"] .app-topbar-title,
[data-bs-theme="dark"] .page-title,
[data-bs-theme="dark"] .text-heading {
  color: var(--app-ink) !important;
}

[data-bs-theme="dark"] .card-footer {
  background: rgba(15, 23, 42, .34);
  border-color: var(--app-soft-border);
}

[data-bs-theme="dark"] .table-responsive {
  background: transparent;
}

[data-bs-theme="dark"] .table {
  --tblr-table-bg: transparent;
  --tblr-table-color: var(--app-ink);
  --tblr-table-border-color: var(--app-soft-border);
  --tblr-table-hover-bg: rgba(var(--app-primary-rgb), .06);
  color: var(--app-ink);
  border-color: var(--app-soft-border);
}

[data-bs-theme="dark"] .table thead th {
  color: #b7c3d4;
  background: rgba(30, 41, 59, .86);
  border-color: rgba(148, 163, 184, .16);
}

[data-bs-theme="dark"] .table tbody td,
[data-bs-theme="dark"] .table tbody th {
  border-color: rgba(148, 163, 184, .12);
}

[data-bs-theme="dark"] .pagination,
[data-bs-theme="dark"] .pagination ul {
  margin-bottom: 0;
}

[data-bs-theme="dark"] .page-link,
[data-bs-theme="dark"] .pagination a,
[data-bs-theme="dark"] .pagination span {
  color: #b7c3d4;
  background: rgba(24, 33, 48, .82);
  border-color: rgba(148, 163, 184, .16);
}

[data-bs-theme="dark"] .page-link:hover,
[data-bs-theme="dark"] .pagination a:hover {
  color: var(--app-primary);
  background: rgba(var(--app-primary-rgb), .12);
  border-color: rgba(var(--app-primary-rgb), .28);
}

[data-bs-theme="dark"] .page-item.active .page-link,
[data-bs-theme="dark"] .pagination .active a,
[data-bs-theme="dark"] .pagination .active span {
  color: #08111f;
  background: var(--app-primary);
  border-color: var(--app-primary);
}

[data-bs-theme="dark"] .page-item.disabled .page-link,
[data-bs-theme="dark"] .pagination .disabled a,
[data-bs-theme="dark"] .pagination .disabled span {
  color: #64748b;
  background: rgba(15, 23, 42, .46);
  border-color: rgba(148, 163, 184, .10);
}

[data-bs-theme="dark"] .nav-tabs {
  border-color: var(--app-soft-border);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--app-muted);
  border-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .nav-tabs .nav-link:focus {
  color: var(--app-primary);
  border-color: rgba(var(--app-primary-rgb), .18);
  background: rgba(var(--app-primary-rgb), .08);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--app-primary);
  background: rgba(var(--app-primary-rgb), .12);
  border-color: rgba(var(--app-primary-rgb), .24);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  color: var(--app-ink);
  border-color: rgba(148, 163, 184, .22);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: #7f8da3;
}

[data-bs-theme="dark"] .custom-option-content,
[data-bs-theme="dark"] .custom-option .form-check-label {
  color: var(--app-ink);
  background: rgba(24, 33, 48, .78);
  border-color: var(--app-soft-border);
}

[data-bs-theme="dark"] .custom-option-content:hover,
[data-bs-theme="dark"] .custom-option .form-check-label:hover {
  border-color: rgba(var(--app-primary-rgb), .32);
  background: rgba(var(--app-primary-rgb), .10);
}

[data-bs-theme="dark"] .custom-option .form-check-input:checked ~ .custom-option-content,
[data-bs-theme="dark"] .custom-option .form-check-input:checked + .custom-option-content,
[data-bs-theme="dark"] .custom-option:has(.form-check-input:checked) .custom-option-content {
  border-color: rgba(var(--app-primary-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--app-primary-rgb), .16), rgba(24, 33, 48, .82));
}

[data-bs-theme="dark"] .bg-label-primary {
  color: var(--app-primary) !important;
  background-color: rgba(var(--app-primary-rgb), .16) !important;
}

[data-bs-theme="dark"] .bg-label-secondary {
  color: #cbd5e1 !important;
  background-color: rgba(148, 163, 184, .14) !important;
}

[data-bs-theme="dark"] .referral-hero {
  background:
    radial-gradient(circle at 82% 12%, rgba(var(--app-primary-rgb), .18), transparent 14rem),
    linear-gradient(135deg, #182234 0%, #17213a 50%, #111827 100%);
}
[data-bs-theme="dark"] .referral-hero h1,
[data-bs-theme="dark"] .referral-hero h2,
[data-bs-theme="dark"] .referral-hero h3 {
  color: #edf2fb !important;
}
[data-bs-theme="dark"] .referral-hero p,
[data-bs-theme="dark"] .referral-hero .text-secondary {
  color: #9aa7ba !important;
}
[data-bs-theme="dark"] .announcement-list,
[data-bs-theme="dark"] .announcement-list-item,
[data-bs-theme="dark"] .client-download-item,
[data-bs-theme="dark"] .subscription-url-mask {
  background: rgba(24, 33, 48, .72);
}
[data-bs-theme="dark"] .shop-payment-grid .shop-pay-card {
  color: var(--app-ink);
  background: rgba(24, 33, 48, .82);
  border-color: var(--app-soft-border);
}
[data-bs-theme="dark"] .shop-payment-grid .shop-pay-card:hover,
[data-bs-theme="dark"] .shop-payment-grid .shop-pay-card.is-active {
  border-color: rgba(var(--app-primary-rgb), .42);
  background: linear-gradient(180deg, rgba(var(--app-primary-rgb), .18) 0%, rgba(24, 33, 48, .86) 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}
[data-bs-theme="dark"] .shop-highlight-badge.is-on {
  color: #86efac;
  background: rgba(34, 197, 94, .16);
}
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .swal2-popup {
  background: rgba(24, 33, 48, .98) !important;
}
[data-bs-theme="dark"] .modal-content {
  border-color: rgba(148, 163, 184, .24) !important;
  box-shadow: 0 26px 72px rgba(2, 6, 23, .5);
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  background: #111827;
  border-color: rgba(148, 163, 184, .2);
}
[data-bs-theme="dark"] .modal-body {
  background: #182130;
}
[data-bs-theme="dark"] .modal-backdrop {
  background: rgba(2, 6, 23, .62) !important;
}
[data-bs-theme="dark"] .index-placard-modal::before {
  background:
    radial-gradient(circle at 50% 12%, rgba(var(--app-primary-rgb), .22), transparent 24rem),
    rgba(3, 7, 18, .66);
}
[data-bs-theme="dark"] .index-placard-shell {
  border-color: rgba(var(--app-primary-rgb), .24) !important;
  background:
    radial-gradient(circle at 88% -8%, rgba(var(--app-primary-rgb), .18), transparent 15rem),
    linear-gradient(180deg, rgba(24, 33, 48, .98) 0%, rgba(15, 23, 42, .98) 100%) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .46);
}
[data-bs-theme="dark"] .index-placard-close {
  background-color: rgba(30, 41, 59, .78);
  filter: invert(1) grayscale(100%) brightness(1.6);
}
[data-bs-theme="dark"] .index-placard-content {
  border-color: rgba(var(--app-primary-rgb), .20);
  background: rgba(15, 23, 42, .56);
}
[data-bs-theme="dark"] .index-placard-content h4 {
  color: #edf2fb;
}
[data-bs-theme="dark"] .index-placard-content p,
[data-bs-theme="dark"] .index-placard-route small,
[data-bs-theme="dark"] .index-placard-note li,
[data-bs-theme="dark"] .index-placard-subtitle,
[data-bs-theme="dark"] .index-placard-hint {
  color: #a7b4c8;
}
[data-bs-theme="dark"] .index-placard-route {
  background: rgba(var(--app-primary-rgb), .12);
}
[data-bs-theme="dark"] .index-placard-route strong,
[data-bs-theme="dark"] .index-placard-note h5 {
  color: #edf2fb;
}
[data-bs-theme="dark"] body .swal2-container .swal2-popup .swal2-input-label {
  color: #dbeafe;
}
[data-bs-theme="dark"] body .swal2-container .swal2-modal.swal2-popup .swal2-input,
[data-bs-theme="dark"] body .swal2-container .swal2-modal.swal2-popup .swal2-file,
[data-bs-theme="dark"] body .swal2-container .swal2-modal.swal2-popup .swal2-textarea {
  color: #edf2fb;
  background: rgba(15, 23, 42, .88);
  border-color: rgba(148, 163, 184, .28);
}
[data-bs-theme="dark"] body .swal2-container .swal2-modal.swal2-popup .swal2-input::placeholder,
[data-bs-theme="dark"] body .swal2-container .swal2-modal.swal2-popup .swal2-file::placeholder,
[data-bs-theme="dark"] body .swal2-container .swal2-modal.swal2-popup .swal2-textarea::placeholder {
  color: #94a3b8;
}

.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  --tblr-primary: #2563eb;
  --tblr-primary-rgb: 37, 99, 235;
  --tblr-link-color: #2563eb;
  --tblr-link-hover-color: #1d4ed8;
  --app-primary: #2563eb;
  --app-primary-rgb: 37, 99, 235;
  --app-primary-hover: #1d4ed8;
  --app-primary-deep: #1e40af;
  --app-primary-accent: #2563eb;
  color: #111827;
  background: #f8fafc;
}
body.auth-page.swal2-height-auto {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh;
  min-height: 100dvh;
}
body.auth-page.swal2-shown .page.page-center {
  min-height: 100vh;
  min-height: 100dvh;
}
.auth-page .container-tight {
  max-width: 460px;
}
.auth-page .auth-container-login {
  max-width: 420px;
}
.auth-page .auth-container-register {
  max-width: 456px;
}
.auth-brand-wrap {
  margin-bottom: 1.35rem;
}
.auth-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--app-primary);
  box-shadow: 0 8px 20px rgba(var(--app-primary-rgb), .18);
}
.auth-page .card-md {
  border: 1px solid #e5e7eb;
  border-radius: .875rem !important;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06);
}
.auth-page .card-body {
  padding: 2.25rem;
}
.auth-lang-switch {
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0 auto 1rem;
  padding: .25rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.auth-lang-item {
  min-width: 4rem;
  min-height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .85rem;
  border-radius: 999px;
  color: #374151;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.auth-lang-item:hover {
  color: var(--tblr-primary);
  text-decoration: none;
}
.auth-lang-item.active,
.auth-lang-item.is-active {
  color: #fff;
  background: var(--app-primary);
  box-shadow: 0 8px 18px rgba(var(--app-primary-rgb), .18);
}
.auth-page .h2 {
  color: #1f2937;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
}
.auth-subtitle {
  color: #6b7280;
  font-size: .93rem;
}
.auth-page .btn-primary {
  --tblr-btn-bg: var(--app-primary);
  --tblr-btn-border-color: var(--app-primary);
  --tblr-btn-hover-bg: var(--app-primary-hover);
  --tblr-btn-hover-border-color: var(--app-primary-hover);
  --tblr-btn-active-bg: var(--app-primary-deep);
  --tblr-btn-active-border-color: var(--app-primary-deep);
  min-height: 2.75rem;
  background: var(--app-primary);
  border-color: var(--app-primary);
  box-shadow: 0 1px 2px rgba(var(--app-primary-rgb), .16);
  font-weight: 600;
}
.auth-page .btn-primary:hover,
.auth-page .btn-primary:focus {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  box-shadow: var(--app-focus-ring);
}
.auth-page .form-check-label,
.auth-page .form-label {
  color: #1f2937;
  font-size: .875rem;
  font-weight: 600;
}
.auth-page .form-control,
.auth-page .form-select,
.auth-page .input-group-text {
  min-height: 2.5rem;
  border-color: #e5e7eb;
  border-radius: .75rem;
  background-color: #ffffff;
  color: #111827;
  box-shadow: none;
}
.auth-page .form-control::placeholder {
  color: #9ca3af;
}
.auth-page .form-control:focus,
.auth-page .form-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .12);
}
.auth-page .input-group > .form-control:first-child,
.auth-page .input-group > .form-select:first-child {
  border-top-left-radius: .75rem;
  border-bottom-left-radius: .75rem;
}
.auth-page .input-group > .form-control:last-child,
.auth-page .input-group > .form-select:last-child {
  border-top-right-radius: .75rem;
  border-bottom-right-radius: .75rem;
}
.auth-page .input-group > .btn:last-child,
.auth-page .input-group > .input-group-text:last-child {
  border-top-right-radius: .75rem;
  border-bottom-right-radius: .75rem;
}
.auth-page .form-check {
  min-height: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 0;
}
.auth-page .form-check-input {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  border-color: #d1d5db;
}
.auth-page .form-check-input:checked {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}
.auth-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.auth-forgot-link,
.auth-switch-link a,
.auth-terms-check a {
  color: var(--app-primary);
  font-weight: 600;
  text-decoration: none;
}
.auth-forgot-link:hover,
.auth-switch-link a:hover,
.auth-terms-check a:hover {
  color: var(--app-primary-hover);
  text-decoration: underline;
}
.auth-page .input-group .form-control,
.auth-page .input-group .form-select {
  min-width: 0;
}
.auth-page .input-group-text {
  color: #6b7280;
}
.auth-page .input-group-text .ti {
  font-size: 1.05rem;
}
.auth-email-group #email_domain {
  min-width: 150px;
  max-width: 190px;
}
.auth-code-group > .btn {
  min-width: 7.5rem;
}
.auth-email-hint {
  margin-top: .45rem;
  color: #6b7280;
  font-size: .8125rem;
}
.auth-form-compact .auth-field {
  margin-bottom: .9rem;
}
.auth-terms-check {
  align-items: center;
}
.auth-terms-check .form-check-label {
  line-height: 1.45;
}
.auth-terms-check a {
  margin-left: .2rem;
  white-space: nowrap;
}
.auth-method-panel {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-top: 1.35rem;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: #9ca3af;
  font-size: .8125rem;
  line-height: 1.2;
  text-align: center;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: #e5e7eb;
}
.auth-divider span {
  flex: 0 0 auto;
}
.auth-method-button {
  min-height: 2.85rem;
  justify-content: center;
  border-color: #e5e7eb;
  border-radius: .75rem;
  color: #4b5563;
  font-weight: 600;
  background: #ffffff;
  box-shadow: none;
  transition: color var(--app-transition), background-color var(--app-transition), border-color var(--app-transition), box-shadow var(--app-transition);
}
.auth-method-button:hover,
.auth-method-button:focus {
  --tblr-btn-hover-color: var(--app-primary);
  --tblr-btn-hover-bg: rgba(var(--app-primary-rgb), .08);
  --tblr-btn-hover-border-color: rgba(var(--app-primary-rgb), .35);
  color: var(--app-primary);
  border-color: rgba(var(--app-primary-rgb), .35);
  background: rgba(var(--app-primary-rgb), .08);
  box-shadow: 0 8px 18px rgba(var(--app-primary-rgb), .08);
  text-decoration: none;
}
.auth-method-button .ti {
  font-size: 1.15rem;
}
.auth-switch-link {
  font-size: .9rem;
}
.auth-footer {
  color: #6b7280;
  font-size: .78rem;
  line-height: 1.7;
}
.auth-footer-signature {
  color: #9ca3af;
  font-size: .72rem;
}
.auth-footer-link {
  color: #9ca3af;
  text-decoration: none;
}
[data-bs-theme="dark"] .auth-method-button {
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, .18);
  background: rgba(24, 33, 48, .78);
}
[data-bs-theme="dark"] .auth-method-button:hover,
[data-bs-theme="dark"] .auth-method-button:focus {
  --tblr-btn-hover-color: var(--app-primary);
  --tblr-btn-hover-bg: rgba(var(--app-primary-rgb), .14);
  --tblr-btn-hover-border-color: rgba(var(--app-primary-rgb), .36);
  color: var(--app-primary);
  border-color: rgba(var(--app-primary-rgb), .36);
  background: rgba(var(--app-primary-rgb), .14);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
}

body.sidebar-drawer-open {
  overflow: hidden;
}
.app-sidebar-backdrop {
  display: none;
}

@media (max-width: 1399.98px) {
  :root,
  [data-bs-theme="light"],
  [data-bs-theme="dark"] {
    --app-shell-width: min(calc(100% - 2.5rem), 1280px);
  }
}

@media (max-width: 1200px) {
  .app-sidebar.navbar-vertical {
    width: 14rem;
    min-width: 14rem;
    max-width: 14rem;
  }
  .overview-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-hero-content {
    width: min(70%, 680px);
  }
}
@media (max-width: 991.98px) {
  .page {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .app-sidebar.navbar-vertical {
    position: sticky;
    top: 0;
    z-index: 1125;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--app-soft-border);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
  }
  .app-sidebar > .container-fluid {
    height: auto;
    min-height: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-content: initial;
    gap: .75rem;
    padding: .5rem .85rem;
  }
  .app-sidebar .navbar-toggler {
    grid-column: 1;
    justify-self: start;
    position: relative;
    z-index: 1130;
    width: 2.65rem;
    height: 2.65rem;
    margin: 0;
    padding: 0;
    border-radius: .95rem;
    border-color: rgba(97, 111, 139, .14);
    background: rgba(255, 255, 255, .86);
  }
  .app-sidebar .navbar-brand {
    grid-column: 2;
    justify-self: center;
    width: auto;
    padding-top: .35rem;
    padding-bottom: .35rem;
    margin: 0;
    border-bottom: 0;
  }
  .app-sidebar .navbar-brand > a {
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
  .app-sidebar-brand-text {
    font-size: 1rem !important;
  }
  .app-sidebar .navbar-nav.flex-row.d-lg-none {
    grid-column: 3;
    justify-self: end;
    margin: 0;
  }
  .app-sidebar-panel,
  .app-sidebar .navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1120;
    width: min(86vw, 17.5rem);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 4.75rem .85rem 1rem;
    border-top: 0;
    border-right: 1px solid var(--app-soft-border);
    background: #ffffff;
    box-shadow: 24px 0 60px rgba(15, 23, 42, .18);
    backdrop-filter: none;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .22s ease;
    display: block !important;
    visibility: visible !important;
  }
  [data-bs-theme="dark"] .app-sidebar-panel,
  [data-bs-theme="dark"] .app-sidebar .navbar-collapse {
    background: #111827 !important;
    border-right-color: rgba(148, 163, 184, .22);
    box-shadow: 24px 0 64px rgba(2, 6, 23, .46);
  }
  .app-sidebar-panel.show,
  .app-sidebar-panel.collapsing,
  .app-sidebar .navbar-collapse.show,
  .app-sidebar .navbar-collapse.collapsing {
    max-height: none;
    overflow-y: auto;
  }
  .app-sidebar-panel.show,
  .app-sidebar .navbar-collapse.show {
    transform: translateX(0);
  }
  .app-sidebar-panel.collapsing,
  .app-sidebar .navbar-collapse.collapsing {
    height: 100vh !important;
    height: 100dvh !important;
    transition: transform .22s ease;
  }
  .app-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1115;
    display: block;
    background: rgba(15, 23, 42, .44);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    backdrop-filter: none;
  }
  body.sidebar-drawer-open .app-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .app-sidebar-nav {
    max-height: none;
    padding: 0;
    overflow: visible;
  }
  .app-sidebar .navbar-nav {
    gap: .2rem;
  }
  .app-sidebar .navbar-nav .nav-link-title.text-uppercase {
    margin-top: .8rem !important;
    padding-left: .75rem !important;
  }
  .app-sidebar .navbar-nav .nav-link {
    margin: .12rem 0;
    padding: .75rem .85rem;
    border-radius: 1rem;
  }
  .app-sidebar .navbar-nav .nav-link-icon {
    width: 1.8rem;
    opacity: .9;
  }
  .app-sidebar-actions {
    margin: .85rem 0 0;
  }
}
@media (max-width: 768px) {
  :root,
  [data-bs-theme="light"],
  [data-bs-theme="dark"] {
    --app-shell-width: calc(100% - 1.5rem);
  }
  .page {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .navbar.d-print-none > .container-fluid {
    min-height: 3.1rem;
    gap: .55rem;
    align-items: center;
  }
  .navbar.d-print-none .app-topbar-heading {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  .app-topbar-title {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .navbar.d-print-none .navbar-nav {
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: .18rem;
    min-width: 0;
  }
  .app-topbar-actions {
    padding: 0;
    border-radius: 999px;
  }
  .overview-cards-grid {
    grid-template-columns: 1fr;
  }
  .referral-hero .card-body {
    min-height: 124px;
    padding: 1.15rem;
  }
  .dashboard-hero-title {
    font-size: clamp(1.55rem, 7.4vw, 1.95rem);
  }
  .dashboard-hero-main {
    gap: .5rem .75rem;
  }
  .dashboard-hero-visual {
    display: none;
  }
  .dashboard-hero-content {
    width: 100%;
    gap: .55rem;
  }
  .dashboard-hero-main {
    align-items: flex-start;
    gap: .55rem;
  }
  .app-topbar-icon,
  .app-user-menu {
    min-width: 2rem;
    min-height: 2rem;
    padding: .34rem !important;
    border-radius: 999px;
  }
  .row.g-4,
  .row.g-6 {
    --tblr-gutter-x: .85rem;
    --tblr-gutter-y: .85rem;
    --bs-gutter-x: .85rem;
    --bs-gutter-y: .85rem;
  }
  .card-header {
    padding: .9rem 1rem;
  }
  .card-body {
    padding: 1rem;
  }
  .card-footer {
    padding: .9rem 1rem;
  }
  .card-header .nav-align-top {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card-header .nav-align-top > .nav {
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap;
  }
  .card-header .nav-align-top .nav-link {
    white-space: nowrap;
  }
  .client-download-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .client-download-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .index-placard-dialog {
    max-width: calc(100vw - 1.5rem);
    margin-right: auto;
    margin-left: auto;
  }
  .index-placard-head {
    align-items: flex-start;
    padding: 1.25rem 3.7rem .85rem 1rem;
  }
  .index-placard-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
  }
  .index-placard-body {
    padding: .15rem 1rem 1rem;
  }
  .index-placard-content {
    padding: 1rem;
  }
  .index-placard-content h4 {
    margin-bottom: .65rem;
    font-size: 1.2rem;
  }
  .index-placard-content p {
    font-size: .9rem;
    line-height: 1.62;
  }
  .index-placard-route {
    margin: .8rem 0;
    padding: .7rem .8rem;
  }
  .index-placard-route strong {
    font-size: .9rem;
  }
  .index-placard-route small,
  .index-placard-note li {
    font-size: .82rem;
  }
  .index-placard-footer {
    flex-direction: column;
    align-items: stretch;
    padding: .95rem 1rem 1.1rem;
  }
  .index-placard-hint {
    align-items: flex-start;
  }
  .index-placard-action {
    width: 100%;
  }
  .auth-page .container-tight {
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .auth-page .card-md {
    border-radius: .875rem !important;
  }
  .auth-page .card-body {
    padding: 1.5rem;
  }
  .auth-lang-switch {
    margin-bottom: .85rem;
  }
  .auth-lang-item {
    min-width: 3.65rem;
  }
  .auth-page .navbar-brand {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .5rem;
  }
  .auth-page .navbar-brand .fw-bold {
    font-size: 1.5rem !important;
  }
  .auth-page .form-footer .btn,
  .auth-page .input-group > .btn {
    min-height: 2.65rem;
  }
  .auth-form-row {
    align-items: center;
  }
  .auth-email-group #email_domain {
    min-width: 132px;
    max-width: 156px;
  }
  .auth-code-group > .btn {
    min-width: 6.7rem;
    padding-left: .75rem;
    padding-right: .75rem;
  }
}
@media (max-width: 575.98px) {
  :root,
  [data-bs-theme="light"],
  [data-bs-theme="dark"] {
    --app-shell-width: calc(100% - 1rem);
  }
  .navbar.d-print-none {
    min-height: 3.1rem;
  }
  .app-topbar-title {
    font-size: .95rem;
  }
  .app-topbar-icon,
  .app-user-menu {
    min-width: 2rem;
    min-height: 2rem;
  }
  .content-header-left h2,
  .content-header-left h4,
  .page-header .page-title {
    font-size: 1.2rem;
  }
  .modal-dialog {
    margin: .5rem;
  }
  .modal-footer {
    gap: .5rem;
  }
  .auth-form-row {
    align-items: flex-start;
    flex-direction: column;
    gap: .5rem;
  }
}

@media (max-width: 430px) {
  :root,
  [data-bs-theme="light"],
  [data-bs-theme="dark"] {
    --app-shell-width: calc(100% - .75rem);
  }
  .navbar.d-print-none > .container-fluid {
    gap: .35rem;
  }
  .app-topbar-actions {
    gap: .08rem;
  }
  .app-topbar-title {
    font-size: .9rem;
  }
  .card-header {
    flex-wrap: wrap;
    gap: .65rem;
  }
  .modal-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .modal-footer > .btn,
  .modal-footer > button,
  .modal-footer > a {
    width: 100%;
    margin: 0;
  }
  .auth-page .container-tight {
    padding-right: .75rem;
    padding-left: .75rem;
  }
  .auth-page .card-body {
    padding: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============ 会员福利页 ============ */
.benefits-card-icon {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  color: #0f5eff;
  border: 1px solid #c8d9ff;
  background: #edf4ff;
}
.benefits-card-badge {
  display: inline-flex;
  min-height: 1.45rem;
  align-items: center;
  border-radius: 999px;
  padding: .18rem .55rem;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.benefits-card-badge-available {
  color: #ffffff;
  background: #198754;
  box-shadow: none;
}
.benefits-card-badge-locked {
  color: #1f2937;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
}
.benefits-card {
  position: relative;
  color: #172033;
  border: 1px solid #d6e1f4;
  background: #ffffff;
  box-shadow: var(--app-card-shadow);
  overflow: hidden;
}
.benefits-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
  background: #1d6df2;
}
[data-bs-theme="dark"] .benefits-card {
  background: rgba(24, 33, 48, .98);
  border-color: rgba(110, 168, 254, .34);
  color: #e5ecf7;
}
.benefits-card .card-body {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 1.35rem 1.35rem 1.25rem 1.5rem;
}
.benefits-card-locked {
  border-style: dashed;
}
.benefits-card-locked .benefits-card-icon {
  color: #64748b;
  border-color: #d8dee8;
  background: #f5f7fb;
}
.benefits-card-header {
  padding-bottom: 1rem;
  border-bottom: 1px solid #e1e8f4;
}
.benefits-card-title {
  color: #111827;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.25;
}
.benefits-card-desc {
  color: #344256;
  line-height: 1.55;
}
.benefits-card-meta {
  display: grid;
  gap: .65rem;
  margin: 1rem 0 1.1rem;
}
.benefits-meta-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .62rem 0;
  color: #253246;
  border: 0;
  border-bottom: 1px solid var(--app-soft-border);
  border-radius: 0;
  background: transparent;
  line-height: 1.55;
}
.benefits-meta-item:last-child {
  border-bottom: 0;
}
.benefits-meta-icon {
  width: 1.45rem;
  flex: 0 0 1.45rem;
  color: #0f5eff;
}
.benefits-lock-notice {
  display: flex;
  align-items: flex-start;
  padding: .8rem .95rem;
  color: var(--tblr-secondary);
  border: 1px solid var(--tblr-border-color);
  border-radius: .75rem;
  background: var(--tblr-bg-surface-secondary);
}
.benefits-card-action {
  min-height: 2.65rem;
  justify-content: center;
  font-weight: 700;
}
[data-bs-theme="dark"] .benefits-card-icon {
  color: #8bb7ff;
  border-color: rgba(110, 168, 254, .34);
  background: rgba(37, 99, 235, .16);
}
[data-bs-theme="dark"] .benefits-card-header {
  border-bottom-color: rgba(148, 163, 184, .2);
}
[data-bs-theme="dark"] .benefits-card-title {
  color: #f8fafc;
}
[data-bs-theme="dark"] .benefits-card-desc,
[data-bs-theme="dark"] .benefits-meta-item {
  color: #d5deea;
}
[data-bs-theme="dark"] .benefits-meta-item {
  border-color: rgba(148, 163, 184, .18);
  background: transparent;
}
[data-bs-theme="dark"] .benefits-card-badge-locked {
  color: #d5deea;
  border-color: rgba(148, 163, 184, .28);
  background: rgba(148, 163, 184, .14);
}
@media (max-width: 768px) {
  .benefits-card-header {
    flex-direction: column;
  }
}