/* ============================================================
   Instagram 控制台 · 高端玻璃拟态 v3（柔和版）
   深空底色 + 极淡青/紫光晕 + 毛玻璃卡片 + 克制的微光
   ============================================================ */

:root,
[data-bs-theme="dark"] {
  --ig-primary: #38bdf8;
  --ig-primary-2: #0ea5e9;
  --ig-primary-deep: #0369a1;
  --ig-violet: #8b5cf6;
  --ig-bg-0: #070b14;
  --ig-bg-1: #0a1020;
  --ig-bg-2: #0d1526;
  --ig-card: rgba(13, 19, 36, .55);
  --ig-card-solid: rgba(10, 15, 30, .92);
  --ig-card-border: rgba(148, 163, 184, .13);
  --ig-text: #dbe4f2;
  --ig-muted: #8b9cb8;
  --ig-success: #34d399;
  --ig-danger: #f87171;
  --ig-warning: #fbbf24;

  /* Bootstrap / AdminLTE 变量 */
  --bs-body-bg: var(--ig-bg-1);
  --bs-body-color: var(--ig-text);
  --bs-border-color: var(--ig-card-border);
  --bs-emphasis-color: #edf2fb;
  --bs-secondary-color: var(--ig-muted);
  --bs-tertiary-bg: rgba(9, 14, 27, .94);
  --bs-tertiary-color: var(--ig-muted);
  --bs-primary: var(--ig-primary-2);
  --bs-primary-rgb: 14, 165, 233;
  --bs-link-color: #7dd3fc;
  --bs-link-hover-color: #bae6fd;
  --lte-sidebar-bg: rgba(6, 10, 20, .7);
  --lte-sidebar-color: #bccadd;
  --lte-sidebar-hover-bg: rgba(255, 255, 255, .05);
  --lte-sidebar-active-bg: rgba(56, 189, 248, .12);
  --lte-sidebar-active-color: #ffffff;
  --lte-header-bg: rgba(6, 10, 20, .6);
  --lte-header-color: var(--ig-text);
}

/* ---------- 全局背景：深空 + 极淡光晕 ---------- */
body,
body.layout-fixed,
.app-wrapper,
.content-wrapper {
  background:
    radial-gradient(1100px 750px at 4% -14%, rgba(14, 165, 233, .07), transparent 60%),
    radial-gradient(950px 700px at 106% 112%, rgba(124, 58, 237, .06), transparent 60%),
    linear-gradient(165deg, var(--ig-bg-0) 0%, var(--ig-bg-1) 55%, var(--ig-bg-2) 100%) !important;
  background-attachment: fixed !important;
  color: var(--ig-text);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .01em;
}

.app-main,
.app-content {
  background: transparent !important;
}

::selection {
  background: rgba(56, 189, 248, .22);
  color: #eaf3ff;
}

/* ---------- 侧边栏：磨砂玻璃 ---------- */
.app-sidebar,
.sidebar-wrapper {
  background: linear-gradient(180deg, rgba(7, 11, 22, .8) 0%, rgba(4, 7, 15, .86) 100%) !important;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border-right: 1px solid rgba(148, 163, 184, .1) !important;
}

.app-sidebar .nav-link,
.sidebar-wrapper .nav-link {
  color: #bccadd !important;
  border-radius: 10px;
  margin: 1px 8px;
  transition: background .18s ease, color .18s ease;
}

.app-sidebar .nav-link:hover,
.sidebar-wrapper .nav-link:hover {
  background: rgba(255, 255, 255, .05) !important;
  color: #eef3fb !important;
}

.app-sidebar .nav-link.active,
.sidebar-wrapper .nav-link.active {
  background: rgba(56, 189, 248, .12) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, .8);
}

.app-sidebar .nav-header,
.sidebar-wrapper .nav-header {
  color: #56658280 !important;
  color: #5a6a86 !important;
  letter-spacing: .1em;
  font-size: 11px;
}

.app-sidebar .brand-link,
.sidebar-wrapper .brand-link {
  background: transparent !important;
  border-bottom: 1px solid rgba(148, 163, 184, .09) !important;
}

.app-sidebar .brand-link,
.sidebar-wrapper .brand-link,
.brand-text {
  background-image: linear-gradient(90deg, #7dd3fc, #38bdf8 60%, #a5b4fc) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 650;
}

/* ---------- 顶栏：磨砂吸顶 ---------- */
.app-header {
  background: rgba(6, 10, 20, .6) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid rgba(148, 163, 184, .1) !important;
  color: var(--ig-text) !important;
}

.app-header .nav-link,
.app-header a {
  color: #bccadd !important;
}

/* ---------- 卡片：毛玻璃（柔和描边） ---------- */
.card,
.small-box,
.callout,
.accordion-item {
  background:
    linear-gradient(var(--ig-card), var(--ig-card)) padding-box,
    linear-gradient(140deg, rgba(148, 163, 184, .2), rgba(148, 163, 184, .05) 45%, rgba(148, 163, 184, .14)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 6px 26px rgba(2, 5, 12, .35), inset 0 1px 0 rgba(255, 255, 255, .035);
  color: var(--ig-text);
  transition: box-shadow .22s ease;
}

.card:hover {
  box-shadow: 0 10px 32px rgba(2, 5, 12, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.card-header,
.card-footer {
  background: rgba(255, 255, 255, .02) !important;
  border-color: rgba(148, 163, 184, .1) !important;
  color: var(--ig-text);
}

.card-header:first-child {
  border-radius: 14px 14px 0 0;
}

.card-title {
  color: #edf2fb !important;
  font-weight: 600;
}

.card-subtitle,
.text-muted,
.form-text {
  color: var(--ig-muted) !important;
}

/* ---------- 表格 ---------- */
.table,
table.data-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ig-text);
  --bs-table-border-color: var(--ig-card-border);
  --bs-table-striped-bg: rgba(255, 255, 255, .018);
  --bs-table-striped-color: var(--ig-text);
  --bs-table-hover-bg: rgba(56, 189, 248, .05);
  --bs-table-hover-color: #f0f5fd;
  color: var(--ig-text) !important;
  border-color: var(--ig-card-border) !important;
  margin-bottom: 0;
}

.table > thead th,
table.data-table thead th {
  background: rgba(148, 163, 184, .06) !important;
  color: #93a9c8 !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
  white-space: nowrap;
}

.table > tbody > tr > td {
  border-bottom: 1px solid rgba(148, 163, 184, .06) !important;
  vertical-align: middle;
}

.table-responsive,
.table-container {
  border: 1px solid var(--ig-card-border) !important;
  border-radius: 12px;
  background: rgba(4, 7, 15, .28);
}

.table thead th.sticky-top,
.table thead.sticky-top th,
.ig-table > thead > tr > th {
  background: var(--bs-tertiary-bg) !important;
  backdrop-filter: blur(8px);
  z-index: 3;
}

/* ---------- 按钮（克制微光） ---------- */
.btn {
  border-radius: 10px;
  border-color: var(--ig-card-border);
  color: var(--ig-text);
  transition: all .16s ease;
}

.btn:not(.btn-link):not([class*="btn-outline"]) {
  background: rgba(255, 255, 255, .05);
}

.btn:not(.btn-link):not([class*="btn-outline"]):hover {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  border: none !important;
  color: #f0f9ff !important;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(2, 132, 199, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important;
  color: #f0fdf6 !important;
  font-weight: 600;
}

.btn-success:hover {
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: none !important;
  color: #fff5f5 !important;
  font-weight: 600;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #f87171, #ef4444) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: none !important;
  color: #fffbeb !important;
  font-weight: 600;
}

.btn-outline-secondary,
.btn-outline-light {
  color: #bccadd !important;
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(255, 255, 255, .02);
}

.btn-outline-secondary:hover,
.btn-outline-light:hover {
  background: rgba(56, 189, 248, .1) !important;
  border-color: rgba(56, 189, 248, .32) !important;
  color: #eef3fb !important;
}

.btn:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(56, 189, 248, .4);
  outline-offset: 2px;
}

/* ---------- 表单控件 ---------- */
.form-control,
.form-select,
.input-group-text,
textarea.form-control {
  background: rgba(4, 7, 15, .45) !important;
  border: 1px solid rgba(148, 163, 184, .15) !important;
  color: var(--ig-text) !important;
  border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.form-control:focus,
.form-select:focus {
  background: rgba(4, 7, 15, .6) !important;
  border-color: rgba(56, 189, 248, .65) !important;
  box-shadow: 0 0 0 .18rem rgba(56, 189, 248, .13) !important;
  color: #fff !important;
}

.form-control::placeholder {
  color: #5a6a86;
}

.form-select option {
  background: #0a1020;
  color: var(--ig-text);
}

.form-check-input {
  background-color: rgba(4, 7, 15, .55);
  border-color: rgba(148, 163, 184, .26);
}

.form-check-input:checked {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
  border-color: var(--ig-primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 .18rem rgba(56, 189, 248, .14);
}

label,
.form-label {
  color: #b3c1da;
}

/* ---------- 徽章：柔和胶囊 ---------- */
.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .32em .68em;
}

.badge.text-bg-success,
.badge.bg-success {
  background: rgba(52, 211, 153, .11) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(52, 211, 153, .26);
}

.badge.text-bg-danger,
.badge.bg-danger {
  background: rgba(248, 113, 113, .11) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(248, 113, 113, .26);
}

.badge.text-bg-warning,
.badge.bg-warning {
  background: rgba(251, 191, 36, .1) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(251, 191, 36, .26);
}

.badge.text-bg-primary,
.badge.text-bg-info,
.badge.bg-primary,
.badge.bg-info {
  background: rgba(56, 189, 248, .1) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(56, 189, 248, .28);
}

.badge.text-bg-secondary,
.badge.bg-secondary {
  background: rgba(148, 163, 184, .1) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, .22);
}

/* ---------- 下拉 / 弹窗 / 提示 ---------- */
.dropdown-menu,
.modal-content,
.popover,
.toast,
.offcanvas {
  background: rgba(10, 15, 30, .92) !important;
  border: 1px solid rgba(148, 163, 184, .15) !important;
  color: var(--ig-text) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(2, 5, 12, .5);
}

.dropdown-item {
  color: var(--ig-text);
  transition: background .14s ease;
}

.dropdown-item:hover {
  background: rgba(56, 189, 248, .1);
  color: #eef3fb;
}

.modal-header,
.modal-footer {
  border-color: rgba(148, 163, 184, .12) !important;
}

/* ---------- 统计卡 / 信息框 / 进度条 ---------- */
.info-box {
  background:
    linear-gradient(rgba(13, 19, 36, .55), rgba(13, 19, 36, .55)) padding-box,
    linear-gradient(140deg, rgba(148, 163, 184, .16), rgba(148, 163, 184, .04)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 13px;
  backdrop-filter: blur(12px);
  box-shadow: 0 5px 22px rgba(2, 5, 12, .32);
}

.progress {
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

/* ---------- 其它 ---------- */
.breadcrumb,
.page-link {
  color: var(--ig-muted);
}

.page-link {
  background: rgba(4, 7, 15, .45);
  border-color: rgba(148, 163, 184, .13);
  transition: all .14s ease;
}

.page-item.active .page-link {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  border-color: transparent !important;
  color: #f0f9ff !important;
  font-weight: 600;
}

.nav-tabs .nav-link {
  color: #b3c1da;
  border-color: rgba(148, 163, 184, .13);
  transition: all .14s ease;
}

.nav-tabs .nav-link.active {
  background: var(--ig-card);
  color: #eef3fb;
  border-color: rgba(56, 189, 248, .26) rgba(56, 189, 248, .26) transparent;
}

.nav-pills .nav-link {
  color: #b3c1da;
  transition: all .14s ease;
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #f0f9ff !important;
  font-weight: 600;
}

.list-group-item {
  background: transparent;
  border-color: rgba(148, 163, 184, .1);
  color: var(--ig-text);
}

.alert {
  background: rgba(10, 15, 30, .78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(148, 163, 184, .13);
  border-left-width: 3px;
  color: var(--ig-text);
  border-radius: 11px;
}

.alert-success { border-left-color: var(--ig-success); }
.alert-danger { border-left-color: var(--ig-danger); }
.alert-warning { border-left-color: var(--ig-warning); }
.alert-info { border-left-color: var(--ig-primary); }

hr {
  border-color: rgba(148, 163, 184, .12);
  opacity: 1;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: rgba(4, 7, 15, .45);
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .22);
  border-radius: 8px;
  border: 2px solid rgba(4, 7, 15, .45);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, .36);
}

/* ---------- 代码块 ---------- */
pre,
code,
kbd {
  color: #7dd3fc !important;
  background: rgba(4, 7, 15, .6) !important;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, .1);
}