/* ============================================================
   Design System — 校园管理 App 统一设计体系
   现代 / 简洁 / 精致。PC 与移动端共用同一套 Token 与组件。
   ============================================================ */

:root{
  /* 品牌色 */
  --brand-blue:#2f6fed;
  --brand-blue-deep:#2055c4;
  --brand-blue-soft:#eef4ff;
  --brand-blue-border:#d6e4ff;
  --brand-green:#18a06b;
  --brand-green-soft:#e9f8f1;
  --brand-green-border:#c4ecd9;
  --brand-red:#e05252;
  --brand-red-soft:#fdeeee;
  --brand-red-border:#f7d0d0;
  --brand-amber:#d98b1f;
  --brand-amber-soft:#fdf4e3;
  --brand-amber-border:#f4e0b8;
  --brand-purple:#7a63d1;
  --brand-purple-soft:#f2effc;
  --brand-purple-border:#ded6f6;

  /* 中性色 */
  --bg:#f5f6f7;
  --card:#ffffff;
  --surface-2:#f8f9fa;
  --ink:#1a1a1a;
  --ink-2:#4a4a4a;
  --muted:#8a8a8a;
  --line:#ececec;
  --line-strong:#dcdcdc;

  /* 排版（微信/小程序风格字体栈） */
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Helvetica Neue","Microsoft YaHei","Segoe UI",sans-serif;
  --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:19px; --fs-2xl:24px;

  /* 间距 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;

  /* 圆角 */
  --radius:12px; --radius-sm:9px; --radius-lg:16px; --radius-pill:999px;

  /* 阴影 */
  --shadow-sm:0 1px 2px rgba(0,0,0,.03);
  --shadow:0 1px 3px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.04);
  --shadow-lg:0 8px 24px rgba(0,0,0,.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-width:0;overflow-x:hidden}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
img,svg{max-width:100%;display:block}
input,button,select,textarea{font:inherit;color:inherit}

/* ---------- 布局 ---------- */
.container{max-width:1120px;margin:0 auto;width:100%;padding:20px 20px 104px}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);margin-bottom:14px;overflow:hidden;
}
.card-pad{padding:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}

/* ---------- 标题 ---------- */
.page-title{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em}
.page-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:4px}
.section-title{font-size:var(--fs-md);font-weight:700}
.section-sub{color:var(--muted);font-size:var(--fs-xs);margin-top:2px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:0 14px;border-radius:var(--radius-sm);
  font-size:var(--fs-sm);font-weight:700;border:1px solid var(--line-strong);
  background:var(--card);color:var(--ink);transition:.16s;white-space:nowrap;cursor:pointer;
}
.btn:hover{background:var(--surface-2);border-color:#c8d2df}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.btn-primary:hover{background:var(--brand-blue-deep);border-color:var(--brand-blue-deep)}
.btn-danger{background:var(--brand-red-soft);border-color:var(--brand-red-border);color:var(--brand-red)}
.btn-success{background:var(--brand-green-soft);border-color:var(--brand-green-border);color:var(--brand-green)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-block{width:100%}

/* ---------- 输入 ---------- */
.input-control{
  width:100%;min-height:38px;padding:0 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);font-size:var(--fs-sm);background:var(--card);color:var(--ink);transition:.16s;
}
.input-control:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-soft);outline:none}
textarea.input-control{min-height:auto;padding:10px 12px;resize:vertical;line-height:1.5}
select.input-control{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}

/* ---------- 标签 / 徽章 ---------- */
.badge,.chip{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap;background:var(--surface-2);color:var(--ink-2);
}
.badge-blue,.chip.info{background:var(--brand-blue-soft);color:var(--brand-blue)}
.badge-green,.chip.positive{background:var(--brand-green-soft);color:var(--brand-green)}
.badge-red,.chip.negative{background:var(--brand-red-soft);color:var(--brand-red)}
.badge-amber,.chip.warning{background:var(--brand-amber-soft);color:var(--brand-amber)}

/* ---------- 进度条 ---------- */
.progress{
  height:10px;border-radius:var(--radius-pill);background:#edf1f6;overflow:hidden;
}
.progress > span{display:block;height:100%;border-radius:inherit;background:var(--brand-blue);transition:width .4s ease}
.progress.green > span{background:var(--brand-green)}
.progress.amber > span{background:var(--brand-amber)}
.progress.red > span{background:var(--brand-red)}
.progress-label{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-xs);color:var(--muted);margin-bottom:6px}
.progress-label b{color:var(--ink);font-weight:800}

/* ---------- 头像 ---------- */
.avatar{
  width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;
  background:var(--brand-blue-soft);color:var(--brand-blue);font-weight:800;flex:0 0 auto;
}
.avatar-lg{width:56px;height:56px;border-radius:16px;font-size:var(--fs-lg)}

/* ---------- 表格 ---------- */
.table-wrap{overflow:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-sm);text-align:left;vertical-align:middle;white-space:nowrap}
.data-table th{background:var(--surface-2);color:var(--muted);font-weight:700;font-size:var(--fs-xs)}
.data-table tr:last-child td{border-bottom:0}
.data-table .num{font-variant-numeric:tabular-nums;font-weight:800}

/* ---------- 空状态 ---------- */
.empty-state{text-align:center;padding:34px 16px;color:var(--muted)}
.empty-state b{display:block;color:var(--ink-2);font-size:var(--fs-md);margin-bottom:4px}
.empty-state span{font-size:var(--fs-xs)}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(27,36,52,.5)}
.modal.hidden{display:none}
.modal-box{width:min(440px,100%);background:var(--card);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-lg);max-height:88vh;overflow:auto}

/* ---------- 提示条 ---------- */
.flash{padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:var(--fs-sm);font-weight:600;display:flex;gap:8px;align-items:center}
.flash.success{background:var(--brand-green-soft);color:var(--brand-green);border:1px solid var(--brand-green-border)}
.flash.error{background:var(--brand-red-soft);color:var(--brand-red);border:1px solid var(--brand-red-border)}

/* ---------- 响应式 ---------- */
@media(max-width:900px){.container{padding:16px 14px 104px}}
@media(max-width:600px){
  .container{padding:12px 12px 96px}
  .btn{min-height:40px}
  .input-control{min-height:42px}
  .card-pad{padding:14px}
  .page-title{font-size:var(--fs-lg)}
  /* 防止 iOS 聚焦时自动放大 */
  input,select,textarea{font-size:16px!important}
  .data-table th,.data-table td{padding:9px 11px}
  .card{margin-bottom:12px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ============================================================
   平面化收口：去除玻璃拟态、渐变与装饰性特效（消除 AI 感）
   统一为实底卡片 + 细边框 + 轻阴影
   ============================================================ */
.glass-surface,.glass-subcard{
  background:#fff!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow-sm)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.glass-btn{
  background:#fff!important;
  border:1px solid var(--line-strong)!important;
  color:var(--ink-2)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.glass-btn.primary{background:var(--brand-blue)!important;border-color:var(--brand-blue)!important;color:#fff!important}
.glass-btn.secondary{background:var(--surface-2)!important}
.identity-strip{background:#fff!important;border-left:4px solid var(--role-accent,var(--brand-blue))}
.wb-hero::after,.wb-action-card::after,.wb-role-badge::after{display:none!important}
.wb-action-icon{background:var(--brand-blue-soft)!important;border:1px solid var(--brand-blue-border)!important}
.wb-avatar{background:var(--brand-blue-soft)!important;border:1px solid var(--brand-blue-border)!important}
.notification-toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.topbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ============================================================
   微信/小程序风格：清晰的分隔、纯色顶栏/底部标签栏
   ============================================================ */
.topbar{background:#fff!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
.mobile-bottom-nav{
  background:#fff!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.mobile-bottom-nav a{color:#8a8a8a!important}
.mobile-bottom-nav a.active{background:transparent!important;color:var(--brand-blue)!important}
.mobile-bottom-nav .ui-icon{width:20px!important;height:20px!important}
/* 卡片之间更清晰的分隔 */
.card{margin-bottom:12px}
.panel,.data-panel{margin-bottom:12px}