/* ============================================================
   liquid-glass.css — 管理后台液态玻璃主题覆盖层 v1（2026-08-16）
   视觉语言：风暴背景 + 半透明白玻璃 + 白色文字体系
   与 admin.css 叠加使用（本文件后加载，同特异性覆盖）
   ============================================================ */

/* —— 舞台背景：风暴图 + 暗角（全站统一）—— */
body {
  background-color:#04121b !important;
  background-image:url('../assets/storm-background.jpg') !important;
  background-size:cover !important;
  background-position:center 25% !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  color:#fff !important;
  font-family:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif !important;
}
/* 暗角叠加层 */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(105deg, rgba(4,16,24,.22) 0%, rgba(4,16,24,.13) 40%, rgba(4,16,24,.04) 78%, transparent 100%),
    linear-gradient(180deg, rgba(4,16,24,.08) 0%, transparent 22%),
    linear-gradient(0deg, rgba(4,16,24,.05), rgba(4,16,24,.05));
}
.wrapper{ position:relative; z-index:1; background:transparent !important; }
.content-wrapper{ background:transparent !important; }
#main-content{ position:relative; z-index:1; background:transparent !important; }

/* —— 侧栏玻璃 —— */
.sidebar{
  background:linear-gradient(180deg,
    rgba(255,255,255,.125) 0%,
    rgba(255,255,255,.135) 13%,
    rgba(255,255,255,.098) 34%,
    rgba(255,255,255,.092) 100%) !important;
  backdrop-filter:blur(18px) saturate(115%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(115%) !important;
  border-right:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  overflow-y:auto;
}
.sidebar::-webkit-scrollbar{ width:4px }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:2px }
.brand{
  color:#fff !important; font-weight:700; letter-spacing:.3px;
  font-size:15px; padding:16px 20px 12px;
}
.brand i{ color:#fff !important; }
.menu{ padding:4px 10px 16px; }
.nav-item{
  color:rgba(255,255,255,.78) !important;
  border-radius:12px !important;
  padding:10px 12px !important;
  margin-bottom:2px;
  transition:background .2s,color .2s,transform .15s;
  font-weight:500;
}
.nav-item i{ color:rgba(255,255,255,.85) !important; }
.nav-item .arrow{ color:rgba(255,255,255,.55) !important; }
.nav-item:hover{ background:rgba(255,255,255,.14) !important; color:#fff !important; transform:translateX(2px); }
.nav-item.active{
  background:rgba(255,255,255,.22) !important;
  color:#fff !important;
  box-shadow:inset 3px 0 0 #fff;
}
.nav-item.has-sub.open{ background:rgba(255,255,255,.12) !important; }
.sub-menu{ border-left:1px solid rgba(255,255,255,.18); margin-left:26px; }
.sub-item{
  color:rgba(255,255,255,.72) !important;
  border-radius:9px !important;
  padding:7px 10px !important;
  font-size:13px;
  transition:background .2s,color .2s;
}
.sub-item:hover{ background:rgba(255,255,255,.12) !important; color:#fff !important; }
.sub-item.active{ background:rgba(255,255,255,.18) !important; color:#fff !important; font-weight:600; }

/* —— 顶栏玻璃 —— */
.topbar{
  background:rgba(255,255,255,.09) !important;
  backdrop-filter:blur(16px) saturate(115%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(115%) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
}
.topbar-brand{ color:#fff !important; }
.topbar-brand .accent{ color:rgba(255,255,255,.75) !important; }
.breadcrumb{ color:rgba(255,255,255,.9) !important; font-weight:500; }
.breadcrumb::before{ color:rgba(255,255,255,.5) !important; }
.hamburger{ color:#fff !important; }

/* —— 通用文字 —— */
.page-header h1{ color:#fff !important; }
.page-header p{ color:rgba(255,255,255,.72) !important; }
.card h3{ color:#fff !important; }
.card h3 span{ color:rgba(255,255,255,.55) !important; }
label, .form-label{ color:rgba(255,255,255,.85) !important; }
.empty-state h3{ color:rgba(255,255,255,.8) !important; }
.empty-state p{ color:rgba(255,255,255,.55) !important; }

/* —— 卡片玻璃 —— */
.card{
  background:linear-gradient(180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.258) 24%,
    rgba(255,255,255,.252) 78%,
    rgba(255,255,255,.232) 100%) !important;
  backdrop-filter:blur(24px) saturate(118%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(118%) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:18px !important;
  box-shadow:none !important;
  color:#fff !important;
}
.card-row{ gap:14px; }
.stat-card{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px !important;
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
}
.stat-card i{ color:rgba(255,255,255,.85) !important; }
.stat-card-value{ color:#fff !important; }
.stat-card-label{ color:rgba(255,255,255,.68) !important; }

/* —— 表格玻璃 —— */
.table-wrap{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:16px !important;
  overflow:hidden;
}
.table-wrap table{ background:transparent !important; color:#fff !important; }
.table-wrap thead th{
  background:rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.92) !important;
  font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
}
.table-wrap td{
  color:rgba(255,255,255,.85) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}
.table-wrap tr:hover td{ background:rgba(255,255,255,.08) !important; }

/* —— 按钮玻璃 —— */
.btn{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius:10px !important;
  backdrop-filter:blur(12px) saturate(115%);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  transition:background .2s,transform .15s;
}
.btn:hover{ background:rgba(255,255,255,.24) !important; transform:translateY(-1px); }
.btn-primary{ background:rgba(255,255,255,.85) !important; color:#0a1a22 !important; border:none !important; font-weight:600; }
.btn-primary:hover{ background:#fff !important; }
.btn-ghost{ background:transparent !important; border:1px solid rgba(255,255,255,.22) !important; }
.btn-danger{ background:rgba(220,53,69,.55) !important; border:none !important; }
.btn-danger:hover{ background:rgba(220,53,69,.75) !important; }
.btn i{ color:currentColor !important; }

/* —— 表单玻璃 —— */
.form-input, .form-textarea, input[type="text"], input[type="number"], input[type="search"], select, textarea{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  color:#fff !important;
  border-radius:10px !important;
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
}
.form-input::placeholder, input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.45) !important; }
.form-input:focus, input:focus, select:focus, textarea:focus{ border-color:rgba(255,255,255,.6) !important; outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.12); }
select option{ background:#0d1b26; color:#fff; }

/* —— Badge —— */
.badge{ background:rgba(255,255,255,.16) !important; color:#fff !important; border:1px solid rgba(255,255,255,.16); }
.badge-success{ background:rgba(40,167,69,.45) !important; color:#fff !important; }
.badge-danger{ background:rgba(220,53,69,.50) !important; color:#fff !important; }
.badge-warning{ background:rgba(255,193,7,.42) !important; color:#1a1410 !important; }
.badge-secondary{ background:rgba(255,255,255,.16) !important; color:rgba(255,255,255,.85) !important; }
.badge-primary{ background:rgba(79,124,246,.55) !important; color:#fff !important; }
.badge-light{ background:rgba(255,255,255,.75) !important; color:#0a1a22 !important; }

/* —— 弹窗玻璃 —— */
.modal-overlay{ background:rgba(4,12,18,.55) !important; backdrop-filter:blur(4px); }
.modal{
  background:linear-gradient(180deg, rgba(16,32,44,.92) 0%, rgba(10,24,34,.94) 100%) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:18px !important;
  box-shadow:0 24px 70px rgba(0,0,0,.5) !important;
  color:#fff !important;
}
.modal-header{ border-bottom:1px solid rgba(255,255,255,.12) !important; }
.modal-header h2{ color:#fff !important; }
.modal-body{ color:rgba(255,255,255,.85) !important; }
.modal-footer{ border-top:1px solid rgba(255,255,255,.12) !important; }

/* —— 面包屑/加载 —— */
.loading{ color:rgba(255,255,255,.7) !important; }
.spinner{ border-color:rgba(255,255,255,.18) !important; border-top-color:#fff !important; }
.skeleton, .skeleton-block{ background:rgba(255,255,255,.12) !important; }
.page-loading{ background:transparent !important; }
.error-banner{
  background:rgba(220,53,69,.35) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius:14px;
}
.filter-bar{
  background:rgba(255,255,255,.09) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px;
}
.pagination button, .pagination a{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:8px !important;
}
.pagination .current{ background:rgba(255,255,255,.85) !important; color:#0a1a22 !important; }

/* —— 热点卡片玻璃 —— */
.hot-card{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:16px !important;
  backdrop-filter:blur(16px) saturate(115%);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
}
.hot-card-title{ color:#fff !important; }
.hot-card-desc{ color:rgba(255,255,255,.72) !important; }
.hot-card-meta{ color:rgba(255,255,255,.6) !important; }
.hot-card-badge{ background:rgba(255,255,255,.2) !important; color:#fff !important; }
.hot-card-icon{ color:rgba(255,255,255,.85) !important; }

/* —— 输入框/搜索（顶栏全局搜索）—— */
#global-search{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
  border-radius:10px !important;
}
#global-search::placeholder{ color:rgba(255,255,255,.45) !important; }
#global-search-results{
  background:rgba(10,24,34,.95) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:12px !important;
  color:#fff !important;
}
#global-search-results a{ color:#fff !important; }
#global-search-results a:hover{ background:rgba(255,255,255,.1) !important; }

/* —— 滚动条 —— */
::-webkit-scrollbar{ width:8px; height:8px }
::-webkit-scrollbar-track{ background:rgba(255,255,255,.05) }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:4px }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.35) }

/* —— PIN 弹层玻璃 —— */
#pin-overlay{ background:rgba(4,12,18,.5) !important; backdrop-filter:blur(6px); }
#pin-overlay > div{ background:linear-gradient(180deg, rgba(16,32,44,.95), rgba(10,24,34,.97)) !important; border:1px solid rgba(255,255,255,.18) !important; color:#fff !important; }
#pin-overlay h2{ color:#fff !important; }
#pin-overlay p{ color:rgba(255,255,255,.7) !important; }
#pin-username, #pin-password{ background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.25) !important; color:#fff !important; }
#pin-username:focus, #pin-password:focus{ border-color:rgba(255,255,255,.6) !important; outline:none; }
#pin-reset a{ color:rgba(255,255,255,.6) !important; }

/* —— 移动端：侧栏抽屉玻璃 —— */
@media (max-width:768px){
  .sidebar{ background:linear-gradient(180deg, rgba(10,24,34,.96), rgba(6,16,24,.98)) !important; }
  .sidebar-mask{ background:rgba(4,12,18,.5) !important; backdrop-filter:blur(3px); }
}