/* ==========================================================================
   白璃电竞陪练系统 · 后台（PC）样式
   与 base.css 共用设计令牌；类名前缀 ad-
   玻璃拟态主题层在文件末尾（第「玻璃拟态主题层」段）
   ========================================================================== */

body.ad {
  background: transparent;
  min-height: 100vh;
  font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   布局
   -------------------------------------------------------------------------- */

.ad-layout {
  display: flex;
  min-height: 100vh;
}

.ad-side {
  width: 216px;
  flex-shrink: 0;
  background: var(--card-solid);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 100;
}

.ad-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
}
.ad-brand__logo {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.ad-brand__logo img { width: 100%; height: 100%; object-fit: cover; }
.ad-brand__name { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; }
.ad-brand__sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }

.ad-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.ad-nav__group { font-size: 11px; color: var(--text-3); padding: 14px 10px 6px; font-weight: 500; letter-spacing: .3px; }
.ad-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 11px;
  border-radius: 10px;
  color: var(--text-1);
  font-size: 13.5px;
  cursor: pointer;
  transition: background .14s, color .14s;
  margin-bottom: 2px;
  user-select: none;
}
.ad-nav__item i { font-style: normal; font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.ad-nav__item:hover { background: rgba(255, 255, 255, .06); }
.ad-nav__item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ad-nav__item .badge {
  margin-left: auto;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: var(--on-brand);
  font-size: 10.5px;
  line-height: 18px;
  text-align: center;
  font-weight: 600;
}

.ad-side__foot { padding: 12px; border-top: 1px solid var(--line); }
.ad-side__user { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px; cursor: pointer; }
.ad-side__user:hover { background: rgba(255, 255, 255, .06); }
.ad-side__user .info { flex: 1; min-width: 0; }
.ad-side__user .name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-side__user .role { font-size: 11px; color: var(--text-3); }

.ad-main {
  flex: 1;
  margin-left: 216px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ad-top {
  height: 60px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 90;
}
.ad-top__title { font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.ad-top__desc { font-size: 12px; color: var(--text-3); }
.ad-top__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.ad-body { padding: 20px 24px 40px; flex: 1; }

.ad-page { display: none; }
.ad-page.active { display: block; animation: adFade .22s ease; }
@keyframes adFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   卡片
   -------------------------------------------------------------------------- */

.ad-card {
  background: var(--card-solid);
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-bottom: 16px;
  overflow: hidden;
}
.ad-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.ad-card__head h3 { font-size: 14.5px; font-weight: 600; }
.ad-card__head .sub { font-size: 12px; color: var(--text-3); }
.ad-card__head .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ad-card__body { padding: 18px; }
.ad-card__body--flush { padding: 0; }

/* --------------------------------------------------------------------------
   统计卡
   -------------------------------------------------------------------------- */

.ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ad-stat {
  background: var(--card-solid);
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.ad-stat__label { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.ad-stat__num { font-size: 25px; font-weight: 600; letter-spacing: -.7px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ad-stat__num small { font-size: 13px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.ad-stat__foot { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
/* 品牌渐变卡：文字必须跟 --on-brand 走，深色主题下自动变白 */
.ad-stat--brand { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: var(--on-brand); }
.ad-stat--brand .ad-stat__label, .ad-stat--brand .ad-stat__foot { color: var(--on-brand); opacity: .78; }
.ad-stat--brand .ad-stat__num { color: var(--on-brand); }
.ad-stat--brand .ad-stat__num small { color: var(--on-brand); opacity: .7; }

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */

.ad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-2);
  color: var(--text-1);
  transition: all .14s;
  white-space: nowrap;
  user-select: none;
}
.ad-btn:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .12); }
.ad-btn:active { transform: scale(.98); }
.ad-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ad-btn--primary:hover { background: #D4A03A; border-color: #D4A03A; color: var(--on-brand); }
.ad-btn--danger { background: rgba(255, 255, 255, .06); border-color: rgba(240, 68, 56, .3); color: var(--red); }
.ad-btn--danger:hover { background: var(--red-soft); }
.ad-btn--ghost { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.ad-btn--ghost:hover { background: var(--brand-a22); }
.ad-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.ad-btn--lg { height: 42px; padding: 0 20px; font-size: 14px; border-radius: 11px; }
.ad-btn--block { display: flex; width: 100%; }
.ad-btn[disabled], .ad-btn.is-disabled { opacity: .5; pointer-events: none; }

.ad-btn-link { color: var(--brand); font-size: 13px; cursor: pointer; }
.ad-btn-link:hover { text-decoration: underline; }
.ad-btn-link.danger { color: var(--red); }

/* --------------------------------------------------------------------------
   表单
   -------------------------------------------------------------------------- */

.ad-field { margin-bottom: 16px; }
.ad-field__label { display: block; font-size: 13px; color: var(--text-1); font-weight: 500; margin-bottom: 7px; }
.ad-field__label .req { color: var(--red); }
.ad-field__hint { font-size: 11.5px; color: var(--text-3); margin-top: 6px; line-height: 1.6; }

.ad-input, .ad-textarea, .ad-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--card-solid);
  font-size: 13.5px;
  transition: border-color .14s, box-shadow .14s;
}
.ad-textarea { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.ad-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath fill='%239BA1B4' d='M1.4 1.4 6 6l4.6-4.6L12 2.8 6 8.8 0 2.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.ad-input:focus, .ad-textarea:focus, .ad-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-a14);
  outline: none;
}
.ad-input::placeholder, .ad-textarea::placeholder { color: var(--text-3); }

.ad-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.ad-form-grid .full { grid-column: 1 / -1; }

.ad-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-1); cursor: pointer; user-select: none; }
.ad-check input { width: 15px; height: 15px; accent-color: var(--brand); }

.ad-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-radio {
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--card-solid);
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
  transition: all .14s;
}
.ad-radio.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 500; }

/* --------------------------------------------------------------------------
   工具条
   -------------------------------------------------------------------------- */

.ad-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ad-toolbar .grow { flex: 1; }
.ad-search {
  position: relative;
  width: 240px;
}
.ad-search input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 32px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--card-solid);
  font-size: 13px;
}
.ad-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-a14); outline: none; }
.ad-search::before {
  content: '🔍';
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: .55;
}

.ad-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.ad-tab {
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .14s;
  white-space: nowrap;
}
.ad-tab:hover { color: var(--text); }
.ad-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

/* --------------------------------------------------------------------------
   表格
   -------------------------------------------------------------------------- */

.ad-table-wrap { overflow-x: auto; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ad-table th {
  text-align: left;
  padding: 11px 14px;
  font-weight: 500;
  color: var(--text-3);
  font-size: 12px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ad-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.ad-table tbody tr:hover { background: rgba(255, 255, 255, .05); }
.ad-table tbody tr:last-child td { border-bottom: 0; }
.ad-table .num { font-variant-numeric: tabular-nums; }
.ad-table .nowrap { white-space: nowrap; }
.ad-table .actions { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.ad-table .mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; color: var(--text-2); }

.ad-thumb {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ad-thumb--lg { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }

.ad-user-cell { display: flex; align-items: center; gap: 9px; }
.ad-user-cell .name { font-weight: 500; }
.ad-user-cell .sub { font-size: 11.5px; color: var(--text-3); }

/* --------------------------------------------------------------------------
   标签 / 状态
   -------------------------------------------------------------------------- */

.ad-tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11.5px;
  background: rgba(255, 255, 255, .07);
  color: var(--text-2);
  white-space: nowrap;
}
.ad-tag--green { background: var(--green-soft); color: #4FD1A5; }
.ad-tag--orange { background: var(--orange-soft); color: #E8A33D; }
.ad-tag--red { background: var(--red-soft); color: var(--red); }
.ad-tag--blue { background: var(--blue-soft); color: var(--blue); }
.ad-tag--brand { background: var(--brand-soft); color: var(--brand); }

.ad-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); margin-right: 5px; }
.ad-dot.on { background: var(--green); }

/* --------------------------------------------------------------------------
   分页
   -------------------------------------------------------------------------- */

.ad-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.ad-pager .info { margin-right: auto; color: var(--text-3); font-size: 12.5px; }
.ad-pager button {
  min-width: 30px; height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .06);
  font-size: 12.5px;
  color: var(--text-1);
}
.ad-pager button:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }
.ad-pager button.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ad-pager button[disabled] { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   空态 / 加载
   -------------------------------------------------------------------------- */

.ad-empty { padding: 60px 20px; text-align: center; color: var(--text-3); }
.ad-empty__icon { font-size: 40px; margin-bottom: 10px; opacity: .75; }
.ad-empty__text { font-size: 13px; }

.ad-loading { padding: 50px; text-align: center; color: var(--text-3); font-size: 13px; }
.ad-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--line-2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: adSpin .7s linear infinite;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
}
@keyframes adSpin { to { transform: rotate(360deg); } }

.ad-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
  animation: adSkeleton 1.3s ease infinite;
  border-radius: 6px;
  height: 14px;
}
@keyframes adSkeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --------------------------------------------------------------------------
   弹窗 / 抽屉
   -------------------------------------------------------------------------- */

.ad-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.ad-mask.show { opacity: 1; pointer-events: auto; }

.ad-modal {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -48%) scale(.97);
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: 88vh;
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: 16px;
  z-index: 901;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.ad-modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.ad-modal--wide { width: 760px; }
.ad-modal--sm { width: 400px; }

.ad-modal__head {
  display: flex;
  align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ad-modal__head h3 { font-size: 15.5px; font-weight: 600; }
.ad-modal__head .sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.ad-modal__close {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  font-size: 16px;
}
.ad-modal__close:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.ad-modal__body { padding: 20px; overflow-y: auto; flex: 1; }
.ad-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: rgba(255, 255, 255, .03);
  border-radius: 0 0 16px 16px;
}

.ad-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 560px;
  max-width: 92vw;
  background: var(--card-solid);
  border-left: 1px solid var(--line);
  z-index: 901;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.3,.72,.3,1);
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 50px rgba(0, 0, 0, .5);
}
.ad-drawer.show { transform: none; }

/* --------------------------------------------------------------------------
   提示
   -------------------------------------------------------------------------- */

.ad-toast {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translate(-50%, -16px);
  z-index: 9999;
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(28, 32, 56, .88);
  color: #FFFFFF;
  font-size: 13.5px;
  opacity: 0;
  transition: all .22s;
  pointer-events: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  max-width: 70vw;
}
.ad-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ad-toast--success { background: #0E9F5E; color: #0F1014; }
.ad-toast--error { background: #E13B30; color: #0F1014; }

.ad-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12.5px;
  line-height: 1.65;
  margin-bottom: 16px;
}
.ad-alert--warn { background: var(--orange-soft); color: #E8A33D; }
.ad-alert--info { background: var(--blue-soft); color: #1A6FC4; }
.ad-alert strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   工具类
   -------------------------------------------------------------------------- */

.ad-flex { display: flex; align-items: center; }
.ad-flex-b { display: flex; align-items: center; justify-content: space-between; }
.ad-gap-6 { gap: 6px; } .ad-gap-10 { gap: 10px; } .ad-gap-14 { gap: 14px; }
.ad-mt-10 { margin-top: 10px; } .ad-mt-16 { margin-top: 16px; } .ad-mt-20 { margin-top: 20px; }
.ad-mb-10 { margin-bottom: 10px; } .ad-mb-16 { margin-bottom: 16px; }
.ad-muted { color: var(--text-3); }
.ad-muted-2 { color: var(--text-2); }
.ad-strong { font-weight: 600; }
.ad-fz-12 { font-size: 12px; } .ad-fz-13 { font-size: 13px; }
.ad-fz-16 { font-size: 16px; } .ad-fz-20 { font-size: 20px; } .ad-fz-24 { font-size: 24px; }
.ad-red { color: var(--red); }
.ad-green { color: var(--green); }
.ad-brand { color: var(--brand); }
.ad-tc { text-align: center; } .ad-tr { text-align: right; }
.ad-hidden { display: none !important; }
.ad-nowrap { white-space: nowrap; }
.ad-mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.ad-copy { cursor: pointer; border-bottom: 1px dashed var(--line-2); }
.ad-copy:hover { color: var(--brand); border-bottom-color: var(--brand); }

.ad-split { height: 1px; background: var(--line); margin: 16px 0; }

/* 简易柱状图 */
.ad-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 10px 0; }
.ad-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.ad-chart__bar {
  width: 100%;
  max-width: 34px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  min-height: 3px;
  transition: height .4s;
}
.ad-chart__label { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.ad-chart__val { font-size: 10.5px; color: var(--text-2); font-weight: 500; }

/* 登录页 */
.ad-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 80% at 50% 0%, var(--brand-a08), transparent 70%),
              linear-gradient(160deg, #FFFFFF 0%, #F2F6FF 55%, #F5F8FF 100%);
  padding: 24px;
}
.ad-login__box {
  width: 100%;
  max-width: 400px;
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 32px 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.ad-login__logo {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
  overflow: hidden;
}
.ad-login__logo img { width: 100%; height: 100%; object-fit: cover; }
.ad-login__title { font-size: 21px; font-weight: 600; letter-spacing: -.3px; }
.ad-login__sub { font-size: 13px; color: var(--text-3); margin-top: 5px; margin-bottom: 26px; }
.ad-login__tip { margin-top: 18px; font-size: 11.5px; color: var(--text-3); line-height: 1.7; text-align: center; }

@media (max-width: 900px) {
  .ad-side { width: 62px; }
  .ad-side .ad-nav__item span, .ad-side .ad-brand__name, .ad-side .ad-brand__sub,
  .ad-side .ad-nav__group, .ad-side .ad-side__user .info { display: none; }
  .ad-side .ad-nav__item { justify-content: center; padding: 0; }
  .ad-main { margin-left: 62px; }
}

/* ==========================================================================
   玻璃拟态主题层
   —— 侧边栏 / 卡片 / 按钮 / 表单 / 弹层统一改成半透明磨砂
   —— 靠层叠顺序覆盖上面的基础样式；想换回实心风格，删掉这一整段即可
   ========================================================================== */

/* ---------------- 1. 侧边栏 & 顶栏 ---------------- */

.ad-side {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--line);
  box-shadow: none;
}

.ad-brand { border-bottom: 1px solid var(--line); }

.ad-nav__item:hover { background: rgba(255, 255, 255, .06); }
.ad-nav__item.active {
  background: var(--brand-soft);
  border: 1px solid var(--brand-a14);
  color: var(--brand);
}
.ad-side__user:hover { background: rgba(255, 255, 255, .06); }
.ad-side__foot { border-top: 1px solid var(--line); }

.ad-top {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

/* ---------------- 2. 卡片 & 统计 ---------------- */

.ad-card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: none;
}
.ad-card__head { border-bottom: 1px solid var(--line); }
.ad-card__body { background: transparent; }

.ad-stat {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: none;
}
.ad-stat--brand {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  color: var(--on-brand);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}

/* ---------------- 3. 按钮：半透明磨砂 ---------------- */

.ad-btn {
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  box-shadow: none;
  transition: background .16s, border-color .16s, box-shadow .16s, transform .12s;
}
.ad-btn:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--line-2);
}

.ad-btn--primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 1px solid transparent;
  color: var(--on-brand);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.ad-btn--primary:hover {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  color: var(--on-brand);
}

.ad-btn--ghost {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand);
}
.ad-btn--ghost:hover { background: var(--brand-a22); border-color: transparent; }

.ad-btn--danger {
  background: rgba(240, 68, 56, .11);
  border-color: rgba(240, 68, 56, .2);
  color: var(--red);
}
.ad-btn--danger:hover { background: rgba(240, 68, 56, .17); border-color: rgba(240, 68, 56, .28); }

/* ---------------- 4. 表单 ---------------- */

.ad-input, .ad-textarea, .ad-select {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: none;
}
.ad-input:focus, .ad-textarea:focus, .ad-select:focus {
  background: rgba(255, 255, 255, .10);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-a14);
}
.ad-select option { background: var(--card-solid); color: var(--text); }

.ad-search input {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ad-search input:focus { background: rgba(255, 255, 255, .82); border-color: var(--brand); }

.ad-radio {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ad-radio.active {
  background: var(--brand-soft);
  border-color: var(--brand-a45);
  color: var(--brand);
  box-shadow: none;
}

.ad-tabs { border-bottom: 1px solid var(--line); }

/* ---------------- 5. 表格 ---------------- */

.ad-table th {
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--line-2);
}
.ad-table td { border-bottom: 1px solid var(--line); }
.ad-table tbody tr:hover { background: rgba(255, 255, 255, .05); }

.ad-user-cell .name { color: var(--text); }
.ad-thumb { background: rgba(255, 255, 255, .07); border: 1px solid var(--line); }

.ad-pager { border-top: 1px solid var(--line); }
.ad-pager button {
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ad-pager button:hover:not([disabled]) { background: rgba(255, 255, 255, .12); border-color: var(--brand-a35); }
.ad-pager button.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  color: var(--on-brand);
}

/* ---------------- 6. 标签 ---------------- */

.ad-tag {
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.ad-tag--green { background: rgba(18, 183, 106, .16); border-color: rgba(18, 183, 106, .22); color: #4FD1A5; }
.ad-tag--orange { background: rgba(247, 144, 9, .18); border-color: rgba(247, 144, 9, .24); color: #E8A33D; }
.ad-tag--red { background: rgba(240, 68, 56, .14); border-color: rgba(240, 68, 56, .2); color: #F08A80; }
.ad-tag--blue { background: rgba(46, 144, 250, .16); border-color: rgba(46, 144, 250, .22); color: #1A6FC4; }
.ad-tag--brand { background: var(--brand-soft); border-color: var(--brand-a22); color: var(--brand); }

/* ---------------- 7. 弹层 ---------------- */

.ad-mask {
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

.ad-modal {
  background: var(--card-solid);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
}
.ad-modal__head { border-bottom: 1px solid var(--line); }
.ad-modal__foot { background: rgba(255, 255, 255, .03); border-top: 1px solid var(--line); }
.ad-modal__close:hover { background: rgba(255, 255, 255, .08); }

.ad-drawer {
  background: var(--card-solid);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .6);
}

.ad-toast {
  background: rgba(28, 32, 56, .88);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid transparent;
}

/* ---------------- 8. 提示与其它 ---------------- */

.ad-alert {
  background: var(--brand-soft);
  border: 1px solid var(--brand-a22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--brand);
}
.ad-alert--warn { background: var(--orange-soft); border-color: rgba(247, 144, 9, .2); color: #E8A33D; }
.ad-alert--info { background: var(--blue-soft); border-color: rgba(46, 144, 250, .18); color: #1A6FC4; }

.ad-empty, .ad-loading { color: var(--text-3); }

.ad-chart__bar { box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }

.ad-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
}

.ad-login__box {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.ad-login { background: radial-gradient(120% 80% at 50% 0%, var(--brand-a08), transparent 70%); }

.ad-split { background: var(--line); }

/* ---------------- 9. 不支持毛玻璃时的兜底 ---------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ad-side, .ad-top, .ad-card, .ad-stat, .ad-modal, .ad-drawer, .ad-login__box {
    background: var(--card-solid);
  }
  .ad-btn { background: var(--card-solid); }
  .ad-btn--primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--on-brand); }
  .ad-input, .ad-textarea, .ad-select, .ad-search input { background: var(--card-solid); }
}

/* ==========================================================================
   10. 侧边栏可折叠（一级菜单点开 / 收起，二级缩进）
   --------------------------------------------------------------------------
   老板的原话：「东西太多了」「这种类型的吧，二级分类」——
   指的就是侧栏。三个后台的侧栏现在都是**平铺**的：
   超管 21 项、站长 28 项，加上分组标题，1024x768 的屏一屏根本放不下，
   得一直滚才能找到自己要的那一页。

   这一层把每个分组标题变成可点的一级菜单，组内项目收进 .ad-nav__sec：
     · 一级右边一个箭头（▾ 展开 / ▸ 收起）
     · 二级缩进 + 前面一个小圆点
     · 折叠状态存 localStorage（刷新后还在）
     · 当前页所在那一组**永远展开**（刷新进来不会「找不到自己在哪」）

   ⚠️ 纯样式 + 一层折叠开关：菜单项的 data-nav / data-route / data-badge / id
      一个都没动，点击后的跳转逻辑也没动。
   ⚠️ 箭头用绝对定位，**不改 .ad-nav__group 的 display** ——
      两个后台在自己页面的 @media(≤768) 里都写了
      `.ad-side .ad-nav__group { display: block }`（把 ≤900px 的图标条恢复成完整菜单），
      那条规则比这里的单类选择器权重高；我要是动了 display 就会被它覆盖掉，
      箭头和文字会散开。用绝对定位就绕开了这个坑。
   ========================================================================== */

.ad-nav__group {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-right: 26px;
  transition: color .14s;
}
.ad-nav__group:hover { color: var(--text-2); }

/* ▾ / ▸：靠旋转 90° 做，不用换字符（换字符要 JS，旋转纯 CSS） */
.ad-nav__group::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -8px;
  font-size: 10px;
  line-height: 16px;
  opacity: .65;
  transition: transform .18s;
}
.ad-nav__group.is-collapsed::after { transform: rotate(-90deg); }

/* 组内的项目容器：收起时整块不显示 */
.ad-nav__sec.is-collapsed { display: none; }

/*
 * ⚠️ 769～900px 这一段 admin.css 把侧栏压成 62px 图标条，
 *    同时 `.ad-side .ad-nav__group` 被 display:none 藏掉了 ——
 *    那一档下如果还让分组收起，用户就**既看不见组标题、也看不见组里的项**，
 *    整个菜单等于空的、还没法展开。
 *    所以这一段强制全部展开（权重相同、写在后面，靠顺序赢）。
 */
@media (min-width: 769px) and (max-width: 900px) {
  .ad-nav__sec.is-collapsed { display: block; }
  .ad-nav__group { cursor: default; }
  .ad-nav__group::after { display: none; }
}

/*
 * 二级菜单：缩进 + 前面一个小圆点（老板说的「缩进，前面有个小圆点或竖线」）
 *
 * ⚠️ 这里的选择器必须写到 `.ad-layout .ad-side .ad-nav__sec .ad-nav__item`（4 个类）。
 *    为什么：两个后台在自己页面的 @media(≤768) 里都写了一条
 *      admin：「.ad-layout .ad-side .ad-nav__item { padding: 0 11px }」(3 个类)
 *      super：「.ad-side .ad-nav__item          { padding: 0 11px }」(2 个类)
 *    而 admin.css 是先加载的、页面自己那段 <style> 在后 —— 同权重时后者赢。
 *    只写 (2 个类) 或 (3 个类) 都会被那条 padding 覆盖掉：手机上缩进没了、
 *    左边那个小圆点却还在原位（left:17px）→ 正好压在图标上（实测出来的）。
 *    所以压到 4 个类，稳稳压过两边。
 */
.ad-layout .ad-side .ad-nav__sec .ad-nav__item {
  position: relative;
  padding-left: 30px;
}
.ad-layout .ad-side .ad-nav__sec .ad-nav__item::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
}
.ad-layout .ad-side .ad-nav__sec .ad-nav__item.active::before { opacity: .85; }
/* 二级项的图标窄一点，缩进后不至于把文字挤出去 */
.ad-layout .ad-side .ad-nav__sec .ad-nav__item i { width: 16px; font-size: 15px; }

/*
 * ⚠️ 769～900px 这一档侧栏只有 62px 宽（admin.css 上面那段把它压成图标条），
 *    再留 30px 缩进会把图标挤出去 —— 这一档退回居中、圆点也不显示。
 *    权重和上面一样，靠写在后面赢。
 */
@media (min-width: 769px) and (max-width: 900px) {
  .ad-layout .ad-side .ad-nav__sec .ad-nav__item { padding-left: 0; }
  .ad-layout .ad-side .ad-nav__sec .ad-nav__item::before { display: none; }
}

/* ==========================================================================
   11. 补上两个「用了但从没定义过」的状态标签
   --------------------------------------------------------------------------
   「正常 / 已停用」用的是 ad-tag--ok / ad-tag--warn，全项目 CSS 里
   这两个类**一个都没定义** → 两种状态长得一模一样（都是同一个灰底灰字），
   停用的分站和正常的分站分不出来。纯新增，不动任何现有选择器。
   ========================================================================== */

.ad-tag--ok { background: rgba(18, 183, 106, .16); border: 1px solid rgba(18, 183, 106, .22); color: #12A66A; }
.ad-tag--warn { background: rgba(247, 144, 9, .18); border: 1px solid rgba(247, 144, 9, .24); color: #C97A06; }

/* ==========================================================================
   12. 前台模板页（/super/#/h5tpl）的紧凑版式
   --------------------------------------------------------------------------
   老板发的截图圈的就是这一页，说「东西太多了」。这一页当样板：
     · 同一件事只说一遍（常驻说明文字 337 字 → 64 字）
     · 下拉不再「括号套括号」被截断（当前默认值移到卡片右上角说一次）
     · 每个模板的说明收进「?」（默认不占高度，悬停才出现）
     · 表格 5 列 → 4 列（「状态」并进「当前前台」）
     · 行内 3 个文字按钮 → 1 个主按钮 + 2 个图标按钮（还是一次点击，不写 JS 菜单）
     · 手机上跟别的页一样转成「一行一张卡」（pg-tbl-card + data-label）
   ========================================================================== */

/* ① 卡片内那行说明：一句说完 */
.h5tpl-note {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ② 平台默认：竖着堆 → 一行 */
.h5tpl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.h5tpl-row .h5tpl-row__label {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
}
.h5tpl-row .h5tpl-sel {
  width: auto;
  min-width: 190px;
  max-width: 240px;
  flex: 0 0 auto;
}

/*
 * ③「?」的浮层要能露出来，这一张卡必须同时具备三件事：
 *    ① overflow: visible —— .ad-card 全局是 overflow: hidden（裁圆角），
 *       浮层是 absolute 且在卡片内，实测只露得出顶上 11px，底下全被卡片下边缘切掉。
 *       只放开这一张卡：它里面只有一行字 + 一个下拉，没有需要裁圆角的东西；
 *       下面那张带表格的卡保持 overflow: hidden 不动。
 *    ②③ position: relative + z-index —— 玻璃主题给 .ad-card 上了 backdrop-filter，
 *       而 backdrop-filter 会新建层叠上下文 → 两张卡各是一个独立层叠上下文，
 *       浮层的 z-index:30 只在**自己这张卡里**有效、逃不出去；两张卡级别都是 auto(0)，
 *       后面的卡片按 DOM 顺序盖住前面的，浮层又整块被下面那张表卡遮住。
 *       把这张卡抬到 z-index:5 就解决。5 是安全的：顶栏 90 / 侧栏 100 / 弹层 900+ 都比它高。
 */
.h5tpl-defcard { overflow: visible; position: relative; z-index: 5; }

.h5tpl-help-wrap { position: relative; display: inline-flex; }
.h5tpl-help {
  width: 19px; height: 19px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.h5tpl-help:hover, .h5tpl-help:focus {
  color: var(--brand);
  border-color: var(--brand-a35);
  outline: none;
}
.h5tpl-tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 380px;
  max-width: calc(100vw - 56px);
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--card-solid);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-l);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
  font-weight: 400;
  text-align: left;
}
/* hover 和 focus 都认 —— 手机上点一下也能弹出来（不用 hover） */
.h5tpl-help:hover + .h5tpl-tip,
.h5tpl-help:focus + .h5tpl-tip { display: block; }
.h5tpl-tip b { color: var(--text-1); font-weight: 600; }

/*
 * ④ 表格列宽。不给宽度的话四列会平均分，中间空一大片（「挤」的反面：散）。
 *    ⚠️ 操作列**不能用 width:1% 收缩到内容宽** —— 试过：auto 布局下它算成 ~60px，
 *       而 .pg-actions 是 flex-wrap: wrap，三个按钮被挤成竖着三行，
 *       行高从 65px 涨到 127px（越改越长）。所以给够一行放下的固定宽，并明确不许换行。
 */
.h5tpl-table th:nth-child(1), .h5tpl-table td:nth-child(1) { width: 24%; }
.h5tpl-table th:nth-child(3), .h5tpl-table td:nth-child(3) { width: 232px; }
.h5tpl-table th:nth-child(4), .h5tpl-table td:nth-child(4) { width: 158px; }
.h5tpl-table .pg-actions { flex-wrap: nowrap; }

.h5tpl-cell { min-width: 0; }
.h5tpl-cur {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.h5tpl-cur > span:first-child { color: var(--text-1); }

/* ⑤ 操作列：1 个主按钮 + 2 个图标按钮 */
.h5tpl-ico {
  width: 28px;
  padding: 0;
  font-size: 13px;
  color: var(--text-2);
}
.h5tpl-ico:hover { color: var(--brand); border-color: var(--brand-a35); }

/* ⑥ 手机（断点和 super/index.html 的 pg-tbl-card 一致） */
@media (max-width: 768px) {
  /* 卡片模式里 td 是 flex：内容右对齐、和列名同一行 */
  .h5tpl-cur { flex-direction: column; align-items: flex-end; gap: 4px; }
  .h5tpl-cell { flex: 1 1 auto; text-align: right; }
  /* 下拉框铺满剩下的宽度（省得 190px 固定宽把卡片顶出去） */
  .h5tpl-table .h5tpl-sel { width: 100%; min-width: 0; max-width: none; flex: 1 1 auto; }
  /*
   * 「?」的浮层：窄屏改成「以整行为定位基准、左右都贴边」。
   * ⚠️ 试过直接 right:0（对齐「?」右边缘）：实测 左=-194，跑到屏幕外面 ——
   *    因为「?」本身在行的左边（跟在「平台默认」标签后面），它的右边缘只有 x≈108，
   *    往左展开 302px 就出屏了。把定位上下文从 .h5tpl-help-wrap 提到 .h5tpl-row、
   *    左右都设 0，浮层正好铺满一行，任何宽度都不溢出。
   */
  .h5tpl-help-wrap { position: static; }
  .h5tpl-row { position: relative; }
  .h5tpl-tip { left: 0; right: 0; width: auto; max-width: none; }
  .h5tpl-ico { width: 30px; height: 30px; }
}

/* ==========================================================================
   13. 前台模板白名单（老板 2026-10-17）
   --------------------------------------------------------------------------
   老板：「这个前台模板 我可以给分站去选 可以用什么模板，勾选后他们在后台
          就可以自己更换了」。两处用到这一块样式：
     · 超管「编辑分站 → 允许使用的前台模板」那排复选框 + 全选 / 清空
     · 站长「分站设置 → 前台模板」那张卡（下拉 + 保存，卡片本身用通用 .ad-card）
   ⚠️ 全新增，不动上面任何一个选择器。
   ========================================================================== */

/* 复选框列表：白底方框，一行放不下自动换行（模板多的将来也不会挤成一列） */
.pg-h5tpl-chk {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--card-solid);
}
.pg-h5tpl-chk .pg-h5tpl-one {
  height: 24px;
  white-space: nowrap;
}
/* 全选 / 清空两个小按钮 */
.pg-h5tpl-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* 站长那张卡里的下拉框：跟别的字段一样铺满一行（只有 1 个选项时也不会缩成缝） */
.pg-h5tpl-sel {
  width: 100%;
  max-width: 420px;
}