/* 升学堂 SCRM - 设计系统 v1.0 */
:root{
  --ink:#0f172a; --ink2:#334155; --muted:#64748b; --muted2:#94a3b8;
  --line:#e5e9f0; --line2:#eef2f7;
  --bg:#f5f7fa; --card:#fff;
  --primary:#0d9488; --primary-d:#0f766e; --primary-l:#14b8a6;
  --primary-50:#f0fdfa; --primary-100:#ccfbf1;
  --amber:#f59e0b; --amber-50:#fffbeb;
  --red:#ef4444; --red-50:#fef2f2;
  --green:#10b981; --green-50:#ecfdf5;
  --blue:#3b82f6; --blue-50:#eff6ff;
  --violet:#8b5cf6; --violet-50:#f5f3ff;
  --orange:#f97316;
  --r:12px; --r-sm:8px; --r-xs:6px;
  --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --sh-md:0 4px 12px rgba(16,24,40,.06),0 2px 4px rgba(16,24,40,.04);
  --sh-lg:0 12px 32px rgba(16,24,40,.10),0 4px 8px rgba(16,24,40,.04);
  --sidebar-w:236px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit}
input,select,textarea{font-family:inherit;font-size:14px}
img{max-width:100%;display:block}

/* ============ 布局 ============ */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:#0b2b27;
  color:#cbd5cf; position:fixed; inset:0 auto 0 0; z-index:60;
  display:flex; flex-direction:column; transition:transform .22s ease;
}
.sidebar__brand{
  padding:20px 20px 16px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebar__logo{
  width:34px;height:34px;border-radius:9px;flex:0 0 34px;
  background:linear-gradient(135deg,#14b8a6,#0d9488);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;
  box-shadow:0 2px 8px rgba(20,184,166,.35);
}
.sidebar__name{font-size:15px;font-weight:600;color:#fff;letter-spacing:.2px;line-height:1.2}
.sidebar__sub{font-size:11px;color:#7f9b95;margin-top:2px}
.nav{flex:1;overflow-y:auto;padding:12px 10px}
.nav__group{font-size:11px;color:#5f7d77;letter-spacing:.08em;padding:14px 12px 6px;font-weight:600}
.nav__item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  color:#b9cdc8;font-size:13.5px;margin-bottom:2px;transition:.15s;position:relative;
}
.nav__item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav__item.on{background:rgba(20,184,166,.16);color:#fff;font-weight:500}
.nav__item.on::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:0 3px 3px 0;background:var(--primary-l);
}
.nav__icon{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.nav__item.on .nav__icon{opacity:1}
.nav__badge{
  margin-left:auto;background:var(--orange);color:#fff;font-size:11px;
  padding:0 6px;border-radius:9px;line-height:17px;height:17px;font-weight:600;
}
.sidebar__foot{padding:12px;border-top:1px solid rgba(255,255,255,.07)}
.sidebar__user{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px}
.sidebar__user:hover{background:rgba(255,255,255,.06)}
.avatar{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:grid;place-items:center;
  background:linear-gradient(135deg,#14b8a6,#0f766e);color:#fff;font-size:12px;font-weight:600;
}
.sidebar__uinfo{min-width:0;flex:1}
.sidebar__uname{font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar__urole{font-size:11px;color:#7f9b95}

.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}
.topbar{
  height:58px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:14px;padding:0 22px;position:sticky;top:0;z-index:40;
}
.topbar__title{font-size:16px;font-weight:600;letter-spacing:-.2px}
.topbar__spacer{flex:1}
.content{padding:22px;flex:1;max-width:1600px;width:100%}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 14px;border-radius:var(--r-sm);font-size:13.5px;
  font-weight:500;transition:.15s;white-space:nowrap;border:1px solid transparent;
}
.btn svg{width:15px;height:15px}
.btn--primary{background:var(--primary);color:#fff;box-shadow:0 1px 2px rgba(13,148,136,.25)}
.btn--primary:hover{background:var(--primary-d)}
.btn--ghost{background:#fff;color:var(--ink2);border-color:var(--line)}
.btn--ghost:hover{background:#f8fafc;border-color:#cbd5e1}
.btn--soft{background:var(--primary-50);color:var(--primary-d);border-color:var(--primary-100)}
.btn--soft:hover{background:var(--primary-100)}
.btn--danger{background:#fff;color:var(--red);border-color:#fecaca}
.btn--danger:hover{background:var(--red-50)}
.btn--sm{height:29px;padding:0 10px;font-size:12.5px;border-radius:var(--r-xs)}
.btn--sm svg{width:13px;height:13px}
.btn--lg{height:42px;padding:0 20px;font-size:15px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--block{width:100%}

/* ============ 卡片 ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card__head{padding:15px 18px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px}
.card__title{font-size:14.5px;font-weight:600}
.card__sub{font-size:12.5px;color:var(--muted);font-weight:400}
.card__body{padding:18px}
.card__body--flush{padding:0}

/* ============ 统计卡 ============ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh);position:relative;overflow:hidden;
}
.stat__label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.stat__value{font-size:26px;font-weight:650;letter-spacing:-.5px;margin-top:6px;line-height:1.2}
.stat__value small{font-size:13px;font-weight:500;color:var(--muted);margin-left:4px}
.stat__foot{font-size:12px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:5px}
.stat__icon{
  position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;background:var(--primary-50);color:var(--primary);
}
.stat__icon svg{width:17px;height:17px}
.up{color:var(--green)}.down{color:var(--red)}

/* ============ 表格 ============ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{
  text-align:left;padding:10px 14px;font-size:12px;font-weight:600;color:var(--muted);
  background:#fafbfc;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
.table td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.table tbody tr:hover{background:#fafcfc}
.table tbody tr:last-child td{border-bottom:none}
.table .num{font-variant-numeric:tabular-nums;text-align:right}
.table .nowrap{white-space:nowrap}
.table__empty{padding:44px 20px;text-align:center;color:var(--muted2)}
.cell-name{display:flex;align-items:center;gap:9px;min-width:110px}
.cell-name .nm{font-weight:500;color:var(--ink)}
.cell-name .sub{font-size:11.5px;color:var(--muted2)}

/* ============ 徽章 ============ */
.badge{
  display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 8px;
  border-radius:5px;font-size:11.5px;font-weight:500;white-space:nowrap;
}
.badge--gray{background:#f1f5f9;color:#475569}
.badge--green{background:var(--green-50);color:#047857}
.badge--red{background:var(--red-50);color:#b91c1c}
.badge--amber{background:var(--amber-50);color:#b45309}
.badge--blue{background:var(--blue-50);color:#1d4ed8}
.badge--violet{background:var(--violet-50);color:#6d28d9}
.badge--teal{background:var(--primary-50);color:var(--primary-d)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}

/* 阶段条 */
.stage-pill{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  border-radius:11px;font-size:11.5px;font-weight:500;
  background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);
}
.stage-pill .dot{background:var(--c)}

/* ============ 表单 ============ */
.form-grid{display:grid;gap:14px}
.form-grid--2{grid-template-columns:1fr 1fr}
.form-grid--3{grid-template-columns:repeat(3,1fr)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--full{grid-column:1/-1}
.label{font-size:12.5px;font-weight:500;color:var(--ink2)}
.label .req{color:var(--red);margin-left:2px}
.input,.select,.textarea{
  width:100%;height:37px;padding:0 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);transition:.15s;
}
.textarea{height:auto;padding:9px 11px;resize:vertical;min-height:76px;line-height:1.6}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,148,136,.10);
}
.input::placeholder,.textarea::placeholder{color:var(--muted2)}
.input--sm,.select--sm{height:31px;font-size:12.5px}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.hint{font-size:11.5px;color:var(--muted2)}
.check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2);cursor:pointer}
.check input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer}

/* 筛选条 */
.filters{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.filters .input,.filters .select{height:33px;font-size:13px;min-width:0}
.filters .search{min-width:200px;flex:1;max-width:300px}

/* ============ 分页 ============ */
.pager{display:flex;align-items:center;gap:6px;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line2);flex-wrap:wrap}
.pager__info{font-size:12.5px;color:var(--muted)}
.pager__nav{display:flex;gap:4px}
.pager__btn{
  min-width:30px;height:29px;padding:0 8px;border-radius:var(--r-xs);
  display:grid;place-items:center;font-size:12.5px;color:var(--ink2);border:1px solid var(--line);background:#fff;
}
.pager__btn:hover{background:#f8fafc}
.pager__btn.on{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ============ 空状态 ============ */
.empty{text-align:center;padding:52px 24px;color:var(--muted2)}
.empty__icon{
  width:52px;height:52px;border-radius:14px;background:#f1f5f9;
  display:grid;place-items:center;margin:0 auto 14px;color:#cbd5e1;
}
.empty__icon svg{width:24px;height:24px}
.empty__title{font-size:14px;color:var(--ink2);font-weight:500;margin-bottom:4px}
.empty__desc{font-size:12.5px}

/* ============ 时间轴 ============ */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line2)}
.tl-item{position:relative;padding-bottom:20px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-21px;top:5px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--primary);box-shadow:0 0 0 2px #fff;
}
.tl-item--sys::before{border-color:var(--muted2)}
.tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.tl-type{font-size:12px;font-weight:600;color:var(--ink)}
.tl-time{font-size:11.5px;color:var(--muted2);margin-left:auto}
.tl-body{font-size:13px;color:var(--ink2);white-space:pre-wrap;word-break:break-word}
.tl-meta{font-size:11.5px;color:var(--muted);margin-top:5px;display:flex;gap:10px;flex-wrap:wrap}

/* ============ 抽屉 / 弹层 ============ */
.modal-mask{
  position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px);
  z-index:100;display:none;align-items:flex-start;justify-content:center;
  padding:40px 16px;overflow-y:auto;
}
.modal-mask.on{display:flex}
.modal{
  background:#fff;border-radius:14px;width:100%;max-width:560px;
  box-shadow:var(--sh-lg);animation:pop .18s ease;margin:auto 0;
}
.modal--wide{max-width:760px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.modal__head{padding:17px 20px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px}
.modal__title{font-size:15px;font-weight:600}
.modal__close{margin-left:auto;color:var(--muted);width:28px;height:28px;border-radius:6px;display:grid;place-items:center}
.modal__close:hover{background:#f1f5f9}
.modal__body{padding:20px;max-height:calc(100vh - 220px);overflow-y:auto}
.modal__foot{padding:14px 20px;border-top:1px solid var(--line2);display:flex;gap:9px;justify-content:flex-end;background:#fafbfc;border-radius:0 0 14px 14px}

/* ============ Toast ============ */
.toast-wrap{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{
  background:#0f172a;color:#fff;padding:10px 18px;border-radius:9px;font-size:13px;
  box-shadow:var(--sh-lg);display:flex;align-items:center;gap:8px;animation:drop .22s ease;
}
.toast--ok{background:#065f46}
.toast--err{background:#991b1b}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ============ 进度条 ============ */
.bar{height:7px;border-radius:4px;background:#eef2f7;overflow:hidden}
.bar__fill{height:100%;border-radius:4px;background:var(--primary);transition:width .3s}

/* ============ 登录页 ============ */
.auth{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 600px at 15% 10%,#e6fffb 0%,transparent 55%),
             radial-gradient(900px 500px at 85% 90%,#eef2ff 0%,transparent 55%),#f7fafc;
}
.auth__card{width:100%;max-width:390px;background:#fff;border-radius:16px;box-shadow:var(--sh-lg);padding:34px 32px;border:1px solid var(--line)}
.auth__logo{
  width:46px;height:46px;border-radius:12px;margin:0 auto 16px;
  background:linear-gradient(135deg,#14b8a6,#0d9488);display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:20px;box-shadow:0 6px 16px rgba(20,184,166,.35);
}
.auth__title{font-size:19px;font-weight:650;text-align:center;letter-spacing:-.3px}
.auth__sub{font-size:12.5px;color:var(--muted);text-align:center;margin-top:5px;margin-bottom:24px}
.auth .field{margin-bottom:14px}
.auth__err{background:var(--red-50);color:#b91c1c;font-size:12.5px;padding:9px 12px;border-radius:8px;margin-bottom:14px}

/* ============ 工具类 ============ */
.row{display:flex;align-items:center;gap:10px}
.row--between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.grow{flex:1;min-width:0}
.mt0{margin-top:0}.mt1{margin-top:6px}.mt2{margin-top:12px}.mt3{margin-top:18px}.mt4{margin-top:24px}
.mb1{margin-bottom:6px}.mb2{margin-bottom:12px}.mb3{margin-bottom:18px}
.tc{text-align:center}.tr{text-align:right}
.muted{color:var(--muted)}.muted2{color:var(--muted2)}
.small{font-size:12px}.tiny{font-size:11.5px}
.bold{font-weight:600}
.nowrap{white-space:nowrap}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.divider{height:1px;background:var(--line2);margin:14px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hide{display:none!important}

/* 移动端顶栏按钮 */
.menu-toggle{display:none;width:34px;height:34px;border-radius:8px;place-items:center;color:var(--ink2)}
.menu-toggle:hover{background:#f1f5f9}

/* 侧边遮罩 */
.sidebar-mask{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:55}
.sidebar-mask.on{display:block}

/* ============ 响应式 ============ */
@media (max-width:1100px){
  .form-grid--3{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--sh-lg)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .menu-toggle{display:grid}
  .content{padding:16px}
  .topbar{padding:0 14px;height:54px}
  .form-grid--2,.form-grid--3{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:13px 14px}
  .stat__value{font-size:22px}
  .stat__icon{display:none}
  .modal-mask{padding:16px 10px}
  .modal{max-width:100%}
  .filters .search{max-width:none;width:100%}
}
@media (max-width:480px){
  .stats{grid-template-columns:1fr 1fr}
  .content{padding:12px}
  .card__body{padding:14px}
  .table th,.table td{padding:9px 10px}
}
@media print{
  .sidebar,.topbar,.no-print{display:none!important}
  .main{margin-left:0}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ddd}
}