/* ============================================================
   导航站 · 后台样式
   骨架规范：Ant Design（紧凑 / 24 栅格 / 8px 节奏）
   令牌体系：TDesign（同一套主色，功能面小圆角）
   ============================================================ */

:root{
  --brand-1:#F2F3FF; --brand-2:#D9E1FF; --brand-3:#B5C7FF; --brand-4:#8EABFF;
  --brand-5:#618DFF; --brand-6:#366EF4; --brand-7:#0052D9; --brand-8:#003CAB;
  --brand-9:#002A7C; --brand-10:#001A57;

  --brand:var(--brand-7);
  --brand-hover:var(--brand-6);
  --brand-press:var(--brand-8);

  --t1:rgba(0,0,0,.88);
  --t2:rgba(0,0,0,.60);
  --t3:rgba(0,0,0,.40);
  --t4:rgba(0,0,0,.26);

  --bg:#F5F7FA;
  --surface:#ffffff;
  --line:#E7E9EB;
  --line-2:#D9DCE0;

  --success:#0F6E56; --success-bg:#E1F5EE;
  --warning:#854F0B; --warning-bg:#FAEEDA;
  --danger:#A32D2D;  --danger-bg:#FCEBEB;

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(0,0,0,.04);
  --sh-2:0 2px 8px rgba(0,0,0,.06);
  --sh-3:0 8px 24px rgba(0,0,0,.10);

  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.18s;

  --side-w:232px;
  --top-h:64px;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--t1);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",
              "Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  font-size:14px;
  line-height:1.5715;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img{ display:block; max-width:100%; }
h1,h2,h3,p{ margin:0; }

::selection{ background:var(--brand-2); }

:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }

/* ---------------------------------------------------------- 整体骨架 */

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

.side{
  flex:none;
  width:var(--side-w);
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; bottom:0; left:0;
  z-index:30;
}

.side-brand{
  display:flex;
  align-items:center;
  gap:10px;
  height:var(--top-h);
  padding:0 20px;
  border-bottom:1px solid var(--line);
  flex:none;
}

.side-mark{
  width:30px; height:30px;
  border-radius:9px;
  display:grid; place-items:center;
  background:var(--brand);
  color:#fff;
  font-size:14px;
  font-weight:500;
  overflow:hidden;
  flex:none;
}

.side-mark img{ width:100%; height:100%; object-fit:cover; }

.side-name{
  font-size:14.5px;
  font-weight:500;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.side-nav{ flex:1; padding:12px 12px; overflow-y:auto; }

.side-group{
  padding:14px 10px 6px;
  font-size:11.5px;
  color:var(--t4);
  letter-spacing:.02em;
}

.side-item{
  display:flex;
  align-items:center;
  gap:10px;
  height:38px;
  padding:0 12px;
  margin-bottom:2px;
  border-radius:var(--r-sm);
  font-size:13.5px;
  color:var(--t2);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.side-item svg{ flex:none; opacity:.85; }

.side-item:hover{ background:rgba(0,0,0,.035); color:var(--t1); }

.side-item.is-active{
  background:var(--brand-1);
  color:var(--brand);
  font-weight:500;
}

.side-item.is-active svg{ opacity:1; }

.side-foot{
  flex:none;
  padding:12px;
  border-top:1px solid var(--line);
}

.side-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--r-sm);
}

.side-avatar{
  width:30px; height:30px;
  flex:none;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand-1);
  color:var(--brand);
  font-size:13px;
  font-weight:500;
}

.side-user-name{ font-size:13px; font-weight:500; }
.side-user-role{ font-size:11.5px; color:var(--t3); line-height:1.4; }

/* ---------------------------------------------------------- 主区域 */

.admin-body{
  flex:1;
  min-width:0;
  margin-left:var(--side-w);
  display:flex;
  flex-direction:column;
}

.topbar{
  height:var(--top-h);
  flex:none;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 24px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(1.8);
  -webkit-backdrop-filter:blur(14px) saturate(1.8);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
}

.topbar-title{ font-size:16px; font-weight:500; letter-spacing:-.01em; }
.topbar-sub{ font-size:12.5px; color:var(--t3); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }

.admin-main{
  flex:1;
  padding:24px;
  max-width:1280px;
  width:100%;
}

/* ---------------------------------------------------------- 通用元件 */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}

.card + .card{ margin-top:16px; }

.card-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}

.card-title{ font-size:14.5px; font-weight:500; }
.card-desc{ font-size:12.5px; color:var(--t3); margin-top:2px; }
.card-head-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.card-body{ padding:20px; }
.card-body-flush{ padding:0; }

/* 按钮 */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:34px;
  padding:0 15px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--t1);
  font-size:13.5px;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:all var(--dur) var(--ease);
}

.btn:hover{ border-color:var(--brand-3); color:var(--brand); }
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

.btn-primary:hover{ background:var(--brand-hover); border-color:var(--brand-hover); color:#fff; }
.btn-primary:active{ background:var(--brand-press); border-color:var(--brand-press); }

.btn-danger{ color:var(--danger); border-color:#F0C4C4; }
.btn-danger:hover{ background:var(--danger-bg); border-color:#E9A9A9; color:var(--danger); }

.btn-ghost{ border-color:transparent; background:transparent; color:var(--t2); }
.btn-ghost:hover{ background:rgba(0,0,0,.04); color:var(--t1); border-color:transparent; }

.btn-sm{ height:28px; padding:0 10px; font-size:12.5px; border-radius:var(--r-xs); }

.btn-icon{
  width:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}

.btn[disabled]{ opacity:.5; pointer-events:none; }

/* 徽标 */
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:1px 8px;
  border-radius:var(--r-pill);
  font-size:12px;
  line-height:1.7;
  white-space:nowrap;
}

.badge-success{ background:var(--success-bg); color:var(--success); }
.badge-muted{ background:rgba(0,0,0,.05); color:var(--t2); }
.badge-brand{ background:var(--brand-1); color:var(--brand); }
.badge-warning{ background:var(--warning-bg); color:var(--warning); }

/* 提示条 */
.alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 14px;
  margin-bottom:16px;
  border-radius:var(--r-md);
  border:1px solid;
  font-size:13.5px;
}

.alert-success{ background:var(--success-bg); border-color:#9FE1CB; color:var(--success); }
.alert-danger{ background:var(--danger-bg); border-color:#F7C1C1; color:var(--danger); }
.alert-warning{ background:var(--warning-bg); border-color:#FAC775; color:var(--warning); }
.alert-info{ background:var(--brand-1); border-color:var(--brand-2); color:var(--brand-7); }
.alert ul{ margin:4px 0 0; padding-left:18px; }

/* 统计卡 */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:16px;
}

.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px 18px;
}

.stat-label{ font-size:12.5px; color:var(--t3); }
.stat-value{ font-size:26px; font-weight:500; line-height:1.3; margin-top:6px; letter-spacing:-.02em; }
.stat-foot{ font-size:12px; color:var(--t3); margin-top:4px; }

/* 表格 */
.table-wrap{ overflow-x:auto; }

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

.table th{
  text-align:left;
  font-weight:500;
  color:var(--t2);
  font-size:12.5px;
  padding:11px 16px;
  background:#FAFBFC;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

.table td{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}

.table tbody tr{ transition:background var(--dur) var(--ease); }
.table tbody tr:hover{ background:#FAFBFC; }
.table tbody tr:last-child td{ border-bottom:0; }

.table .col-actions{ text-align:right; white-space:nowrap; }
.table .col-tight{ width:1%; white-space:nowrap; }

.cell-main{ display:flex; align-items:center; gap:11px; min-width:0; }

.cell-ico{
  width:36px; height:36px;
  flex:none;
  border-radius:10px;
  display:grid; place-items:center;
  overflow:hidden;
  font-size:14px;
  font-weight:500;
}

.cell-ico img{ width:100%; height:100%; object-fit:cover; }

.cell-name{
  font-weight:500;
  font-size:13.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cell-sub{
  font-size:12px;
  color:var(--t3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:360px;
}

.row-actions{ display:inline-flex; align-items:center; gap:4px; }

/* 分页 */
.pagination{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 20px;
  border-top:1px solid var(--line);
  font-size:13px;
}

.page-info{ color:var(--t3); margin-right:auto; }
.page-links{ display:flex; align-items:center; gap:4px; }

.page-links a,
.page-links span{
  min-width:30px;
  height:30px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-xs);
  border:1px solid var(--line-2);
  background:var(--surface);
  color:var(--t2);
  font-size:13px;
}

.page-links a:hover{ border-color:var(--brand-3); color:var(--brand); }
.page-links .is-current{ background:var(--brand-1); border-color:var(--brand-2); color:var(--brand); font-weight:500; }
.page-links .is-disabled{ opacity:.45; }

/* 工具条 */
.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.toolbar-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }

.search-box{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 12px;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-width:220px;
}

.search-box:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,82,217,.10); }
.search-box svg{ flex:none; color:var(--t3); }

.search-box input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-size:13.5px;
  font-family:inherit;
  color:var(--t1);
}

.search-box input::placeholder{ color:var(--t4); }

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

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 20px;
}

.field-full{ grid-column:1 / -1; }

.field{ display:flex; flex-direction:column; gap:7px; }

.label{
  font-size:13px;
  color:var(--t1);
  font-weight:500;
}

.label .req{ color:var(--danger); margin-left:2px; }

.input,
.select,
.textarea{
  width:100%;
  height:36px;
  padding:0 12px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  background:var(--surface);
  font-size:13.5px;
  font-family:inherit;
  color:var(--t1);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.textarea{
  height:auto;
  min-height:80px;
  padding:9px 12px;
  line-height:1.6;
  resize:vertical;
}

.input:focus,
.select:focus,
.textarea:focus{
  outline:0;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,82,217,.10);
}

.input::placeholder,
.textarea::placeholder{ color:var(--t4); }

.select{
  appearance:none;
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:14px;
}

.hint{ font-size:12px; color:var(--t3); line-height:1.6; }

.input-group{ display:flex; align-items:center; gap:0; }
.input-group .input{ border-radius:var(--r-sm) 0 0 var(--r-sm); }
.input-group .input-suffix{
  height:36px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border:1px solid var(--line-2);
  border-left:0;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:#FAFBFC;
  color:var(--t2);
  font-size:13.5px;
  white-space:nowrap;
}

/* 单选卡片（跳转方式切换） */
.radio-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.radio-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 14px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:all var(--dur) var(--ease);
}

.radio-card:hover{ border-color:var(--brand-3); }

.radio-card input{ position:absolute; opacity:0; pointer-events:none; }

.radio-dot{
  flex:none;
  width:16px; height:16px;
  margin-top:2px;
  border:1.5px solid var(--line-2);
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:all var(--dur) var(--ease);
}

.radio-dot::after{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:transparent;
  transition:background var(--dur) var(--ease);
}

.radio-card input:checked ~ .radio-dot{ border-color:var(--brand); }
.radio-card input:checked ~ .radio-dot::after{ background:var(--brand); }

.radio-card:has(input:checked){
  border-color:var(--brand);
  background:var(--brand-1);
  box-shadow:0 0 0 3px rgba(0,82,217,.07);
}

.radio-title{ font-size:13.5px; font-weight:500; }
.radio-desc{ font-size:12px; color:var(--t3); margin-top:2px; line-height:1.55; }

/* 上传框 */
.upload{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px dashed var(--line-2);
  border-radius:var(--r-md);
  background:#FAFBFC;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.upload:hover{ border-color:var(--brand-3); background:var(--brand-1); }

.upload-preview{
  flex:none;
  width:54px; height:54px;
  border-radius:12px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  font-size:18px;
  font-weight:500;
  color:var(--t3);
}

.upload-preview img{ width:100%; height:100%; object-fit:cover; }

.upload-body{ flex:1; min-width:0; }

.upload input[type=file]{
  display:block;
  width:100%;
  font-size:13px;
  color:var(--t2);
}

.upload input[type=file]::file-selector-button{
  height:30px;
  padding:0 12px;
  margin-right:10px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  background:#fff;
  color:var(--t1);
  font-size:13px;
  font-family:inherit;
  cursor:pointer;
  transition:all var(--dur) var(--ease);
}

.upload input[type=file]::file-selector-button:hover{
  border-color:var(--brand-3);
  color:var(--brand);
}

/* 开关 */
.switch{
  display:inline-flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  font-size:13.5px;
  color:var(--t1);
}

.switch input{ position:absolute; opacity:0; pointer-events:none; }

.switch-track{
  position:relative;
  width:38px; height:22px;
  flex:none;
  border-radius:var(--r-pill);
  background:#C9CDD4;
  transition:background var(--dur) var(--ease);
}

.switch-track::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform var(--dur) var(--ease);
}

.switch input:checked ~ .switch-track{ background:var(--brand); }
.switch input:checked ~ .switch-track::after{ transform:translateX(16px); }

/* 表单底部操作条 */
.form-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 20px;
  border-top:1px solid var(--line);
  background:#FAFBFC;
}

.form-actions .spacer{ margin-left:auto; }

/* ---------------------------------------------------------- 空状态 */

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

.empty-ico{
  width:56px; height:56px;
  margin:0 auto 16px;
  display:grid; place-items:center;
  border-radius:18px;
  background:var(--bg);
  color:var(--t3);
}

.empty-title{ font-size:14.5px; font-weight:500; margin-bottom:6px; }
.empty-desc{ font-size:13px; color:var(--t3); margin-bottom:18px; }

/* ---------------------------------------------------------- 登录页 */

.auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}

.auth::before{
  content:"";
  position:absolute;
  top:-180px; left:50%;
  width:820px; height:560px;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,82,217,.07) 0%,rgba(0,82,217,0) 72%);
  pointer-events:none;
}

.auth-card{
  position:relative;
  width:100%;
  max-width:400px;
  padding:36px 32px 32px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--sh-3);
}

.auth-mark{
  width:46px; height:46px;
  margin:0 auto 18px;
  border-radius:14px;
  display:grid; place-items:center;
  background:var(--brand);
  color:#fff;
  font-size:20px;
  font-weight:500;
}

.auth-title{
  font-size:20px;
  font-weight:500;
  text-align:center;
  letter-spacing:-.015em;
}

.auth-sub{
  font-size:13px;
  color:var(--t3);
  text-align:center;
  margin-top:8px;
}

.auth-form{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }

.auth-form .input{ height:42px; font-size:14px; border-radius:var(--r-md); }

.auth-form .btn{ height:42px; font-size:14.5px; border-radius:var(--r-md); margin-top:4px; }

.auth-foot{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:12.5px;
  color:var(--t3);
}

.auth-foot a{ color:var(--brand); }

.auth-note{
  margin-top:16px;
  padding:11px 13px;
  border-radius:var(--r-md);
  background:var(--warning-bg);
  border:1px solid #FAC775;
  color:var(--warning);
  font-size:12.5px;
  line-height:1.7;
}

/* ---------------------------------------------------------- 响应式 */

@media (max-width:900px){
  .side{
    width:64px;
  }
  .side-name,
  .side-group,
  .side-item span,
  .side-user-name,
  .side-user-role{ display:none; }
  .side-item{ justify-content:center; padding:0; }
  .side-brand{ justify-content:center; padding:0; }
  .side-user{ justify-content:center; }
  .admin-body{ margin-left:64px; }
  .form-grid{ grid-template-columns:1fr; }
  .admin-main{ padding:16px; }
}

@media (max-width:600px){
  .radio-cards{ grid-template-columns:1fr; }
  .topbar{ padding:0 16px; }
  .stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}