/* =========================================================
   赢赛思拓 · YSST Education · 智慧排课管理系统
   Design System / Layout / Components
   ========================================================= */
:root{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --panel-2:#fafbfe;
  --line:#e7ebf4;
  --line-2:#eef1f8;
  --text:#151d33;
  --text-2:#3d4863;
  --sub:#6c7895;
  --sub-2:#98a2b8;
  --primary:#2b59ff;
  --primary-d:#1e45d6;
  --primary-soft:#edf1ff;
  --primary-soft-2:#f5f8ff;
  --green:#12a150;
  --green-soft:#e8f8ef;
  --amber:#d97706;
  --amber-soft:#fdf4e3;
  --red:#e11d48;
  --red-soft:#fdeef1;
  --purple:#7c3aed;
  --purple-soft:#f3efff;
  --teal:#0d9488;
  --teal-soft:#e6f7f5;
  --radius:16px;
  --radius-sm:10px;
  --shadow-xs:0 1px 2px rgba(17,26,54,.05);
  --shadow-sm:0 1px 2px rgba(17,26,54,.04), 0 6px 18px rgba(17,26,54,.05);
  --shadow-md:0 12px 36px rgba(17,26,54,.10);
  --sidebar-w:250px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text); background:var(--bg);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
input,select,textarea{font-family:inherit;font-size:13.5px;color:var(--text)}
svg{display:block;width:18px;height:18px;flex:none}
.hidden{display:none !important}
.muted{color:var(--sub)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#d3dae8;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#b9c3d8;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- 登录 ---------------- */
.login-wrap{
  min-height:100%; display:flex; align-items:center; justify-content:center; padding:28px;
  background:
    radial-gradient(900px 520px at 12% 8%, #e7edff 0%, rgba(231,237,255,0) 60%),
    radial-gradient(760px 520px at 92% 92%, #e6f7f5 0%, rgba(230,247,245,0) 62%),
    #f6f8fd;
}
.login-card{
  width:100%; max-width:940px; display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--panel); border-radius:24px; overflow:hidden;
  box-shadow:0 24px 70px rgba(21,32,66,.13), 0 2px 6px rgba(21,32,66,.05);
  border:1px solid rgba(255,255,255,.9);
}
.login-brand{
  position:relative; padding:46px 42px; color:#fff;
  background:linear-gradient(155deg,#1b3fd0 0%, #2b59ff 46%, #4b7bff 100%);
  display:flex; flex-direction:column;
}
.login-brand::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 300px at 100% 0%, rgba(255,255,255,.22), transparent 68%),
    radial-gradient(360px 260px at 0% 100%, rgba(13,148,136,.35), transparent 70%);
}
.login-brand h1{font-size:27px; font-weight:700; letter-spacing:.5px; margin-top:22px; position:relative}
.brand-sub{margin-top:6px; font-size:13.5px; color:rgba(255,255,255,.82); letter-spacing:3px; position:relative}
.brand-list{list-style:none; padding:0; margin:34px 0 0; display:flex; flex-direction:column; gap:12px; position:relative; font-size:13px; color:rgba(255,255,255,.9)}
.brand-list li{padding-left:18px; position:relative}
.brand-list li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.85)}
.brand-foot{margin-top:auto; display:flex; justify-content:space-between; font-size:11.5px; color:rgba(255,255,255,.6); letter-spacing:.6px; position:relative; padding-top:36px}
.brand-mark{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  font-weight:700; font-size:19px; color:#fff; letter-spacing:0;
  background:linear-gradient(140deg,#2b59ff,#5b86ff); box-shadow:0 6px 16px rgba(43,89,255,.32);
  position:relative; flex:none;
}
.brand-mark.lg{width:56px;height:56px;border-radius:17px;font-size:25px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.login-form{padding:46px 46px 38px; display:flex; flex-direction:column}
.login-head h2{font-size:22px; font-weight:700}
.login-head p{margin-top:6px; font-size:13px}
#loginForm{margin-top:26px}
.field{display:block; margin-bottom:16px}
.field>span{display:block; font-size:12.5px; font-weight:600; color:var(--text-2); margin-bottom:7px}
.field>input, .field>select, .field>textarea, .field .input{
  width:100%; height:42px; padding:0 13px; border:1px solid var(--line); border-radius:11px;
  background:#fbfcfe; outline:none; transition:.18s;
}
.field>textarea{height:auto; padding:10px 13px; resize:vertical; line-height:1.6}
.field>input:focus, .field>select:focus, .field>textarea:focus, .field .input:focus{
  border-color:var(--primary); background:#fff; box-shadow:0 0 0 3.5px rgba(43,89,255,.12);
}
.field>input::placeholder, .field .input::placeholder{color:#b3bbcd}
.login-err{min-height:20px; font-size:12.5px; color:var(--red); margin:-4px 0 10px}
.demo-accounts{margin-top:auto; padding-top:26px; border-top:1px dashed var(--line); }
.demo-title{font-size:12px; color:var(--sub); display:flex; align-items:center; gap:7px; margin-bottom:12px}
.demo-title i{width:5px;height:5px;border-radius:50%;background:var(--primary);display:inline-block}
.demo-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.demo-item{
  display:flex; flex-direction:column; gap:1px; padding:8px 11px; border:1px solid var(--line);
  border-radius:10px; background:#fbfcfe; cursor:pointer; transition:.16s; text-align:left;
}
.demo-item:hover{border-color:#c3d0ff; background:var(--primary-soft-2); transform:translateY(-1px)}
.demo-item b{font-size:12.5px; font-weight:600; color:var(--text)}
.demo-item span{font-size:11px; color:var(--sub-2)}

/* ---------------- 布局 ---------------- */
.app{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex:none; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:60;
}
.side-brand{display:flex; align-items:center; gap:11px; padding:20px 20px 16px}
.side-brand-txt{display:flex; flex-direction:column; line-height:1.3}
.side-brand-txt strong{font-size:14.5px; font-weight:700; letter-spacing:.3px}
.side-brand-txt span{font-size:11px; color:var(--sub-2); letter-spacing:.5px}
.nav{flex:1; overflow-y:auto; padding:6px 12px 18px}
.nav-group{margin-top:14px}
.nav-group:first-child{margin-top:2px}
.nav-group-title{font-size:10.5px; font-weight:600; color:var(--sub-2); letter-spacing:1.4px; padding:0 10px 7px; text-transform:uppercase}
.nav-item{
  display:flex; align-items:center; gap:10px; height:39px; padding:0 11px; border-radius:10px;
  color:var(--text-2); font-size:13.3px; cursor:pointer; transition:.15s; position:relative; margin-bottom:2px;
  border:none; background:none; width:100%; text-align:left;
}
.nav-item svg{width:17px;height:17px;flex:none;color:var(--sub);transition:.15s}
.nav-item:hover{background:#f5f7fd; color:var(--text)}
.nav-item:hover svg{color:var(--text-2)}
.nav-item.active{background:var(--primary-soft); color:var(--primary); font-weight:600}
.nav-item.active svg{color:var(--primary)}
.nav-item .nav-badge{margin-left:auto; font-size:10.5px; background:#eef1f8; color:var(--sub); border-radius:6px; padding:1px 6px; font-weight:600}
.nav-item.active .nav-badge{background:#fff;color:var(--primary)}
.side-user{border-top:1px solid var(--line); padding:12px; display:flex; align-items:center; gap:10px}
.side-user .avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;flex:none}
.side-user .su-txt{min-width:0; flex:1}
.side-user .su-txt b{display:block; font-size:12.8px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-user .su-txt span{font-size:11px; color:var(--sub-2)}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  height:66px; flex:none; background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:0 24px;
  position:sticky; top:0; z-index:50;
}
.page-head{min-width:0}
.page-head h2{font-size:16.5px; font-weight:700; letter-spacing:.2px; white-space:nowrap}
.page-head p{font-size:11.5px; color:var(--sub-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:12px; position:relative}
.search-box{
  display:flex; align-items:center; gap:8px; height:37px; width:290px; padding:0 10px;
  border:1px solid var(--line); border-radius:11px; background:#fbfcfe; transition:.16s;
}
.search-box:focus-within{border-color:var(--primary); background:#fff; box-shadow:0 0 0 3.5px rgba(43,89,255,.10); width:330px}
.search-box svg{width:15px;height:15px;color:var(--sub-2);flex:none}
.search-box input{border:none;background:none;outline:none;flex:1;min-width:0;font-size:12.8px}
.search-box kbd{font-size:10px; color:var(--sub-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; background:#fff; font-family:var(--font)}
.user-chip{display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:11px; border:1px solid var(--line); cursor:pointer; background:#fff; transition:.16s}
.user-chip:hover{border-color:#c9d4f2; box-shadow:var(--shadow-xs)}
.user-chip .avatar{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.user-chip .uc-txt{display:flex;flex-direction:column;line-height:1.25}
.user-chip .uc-txt b{font-size:12.3px;font-weight:600}
.user-chip .uc-txt span{font-size:10.5px;color:var(--sub-2)}
.view{padding:22px 24px 40px; flex:1; min-width:0}
.quick-tt{display:flex; align-items:center; gap:6px; padding:3px; background:#f1f4fb; border-radius:10px}
.quick-tt .btn{height:27px; padding:0 10px; font-size:12px; border:none; background:transparent; box-shadow:none; color:var(--sub); font-weight:600}
.quick-tt .btn:hover{background:#fff; color:var(--primary); box-shadow:var(--shadow-xs)}
@media (max-width:1320px){ .quick-tt{display:none!important} }
.sidebar-mask{position:fixed;inset:0;background:rgba(16,26,54,.35);z-index:55;display:none}
.only-mobile{display:none!important}

/* ---------------- 通用组件 ---------------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-xs)}
.card+.card{margin-top:16px}
.card-head{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line-2); flex-wrap:wrap}
.card-head h3{font-size:14px; font-weight:700}
.card-head .sub{font-size:11.8px; color:var(--sub-2)}
.card-head .right{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.card-body{padding:18px 20px}
.card-body.tight{padding:0}
.page-intro{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.page-intro h1{font-size:21px; font-weight:700; letter-spacing:.2px}
.page-intro p{font-size:12.5px; color:var(--sub)}
.page-intro .right{margin-left:auto; display:flex; gap:9px; flex-wrap:wrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px;
  border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--text-2);
  font-size:12.8px; font-weight:600; cursor:pointer; transition:.15s; white-space:nowrap;
}
.btn svg{width:15px;height:15px}
.btn:hover{background:#f8faff; border-color:#cfd9f2; color:var(--text)}
.btn:active{transform:translateY(.5px)}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 3px 10px rgba(43,89,255,.22)}
.btn-primary:hover{background:var(--primary-d); border-color:var(--primary-d); color:#fff; box-shadow:0 6px 16px rgba(43,89,255,.28)}
.btn-soft{background:var(--primary-soft); border-color:transparent; color:var(--primary)}
.btn-soft:hover{background:#e2e9ff; border-color:transparent; color:var(--primary-d)}
.btn-danger{background:#fff; border-color:#f4cdd6; color:var(--red)}
.btn-danger:hover{background:var(--red-soft); border-color:#efb9c6; color:var(--red)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--sub)}
.btn-ghost:hover{background:#f2f5fc; color:var(--text)}
.row-conflict{background:#fff5f5 !important}
.row-conflict:hover{background:#ffecec !important}
.wd-item.is-conflict{border-left-color:var(--red,#e5484d); box-shadow:inset 0 0 0 1px #f5c6c6}
.class-card.sel{border-color:var(--primary); box-shadow:0 0 0 2px rgba(43,89,255,.14)}
.btn-sm{height:30px; padding:0 10px; font-size:12px; border-radius:8px}
.btn-sm svg{width:13px;height:13px}
.btn-lg{height:44px; font-size:14px; border-radius:12px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.icon-btn{
  width:32px;height:32px;border-radius:9px;border:1px solid transparent;background:transparent;
  display:grid;place-items:center;color:var(--sub);cursor:pointer;transition:.15s;
}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{background:#f2f5fc;color:var(--text)}
.icon-btn.danger:hover{background:var(--red-soft);color:var(--red)}

.input{
  height:36px; padding:0 11px; border:1px solid var(--line); border-radius:10px; background:#fbfcfe;
  outline:none; transition:.15s; font-size:12.8px; color:var(--text);
}
.input:focus{border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(43,89,255,.10)}
select.input{appearance:none; padding-right:28px; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; background-size:14px}
textarea.input{height:auto;padding:9px 11px;line-height:1.6;resize:vertical}
.toolbar{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.toolbar .spacer{flex:1}
.seg{display:inline-flex; padding:3px; background:#f1f4fb; border-radius:10px; gap:2px}
.seg button{border:none;background:none;height:29px;padding:0 13px;border-radius:8px;font-size:12.4px;font-weight:600;color:var(--sub);cursor:pointer;transition:.15s}
.seg button.active{background:#fff;color:var(--primary);box-shadow:var(--shadow-xs)}

.badge{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.1px}
.badge.gray{background:#f1f4fb;color:var(--sub)}
.badge.blue{background:var(--primary-soft);color:var(--primary)}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.amber{background:var(--amber-soft);color:var(--amber)}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.purple{background:var(--purple-soft);color:var(--purple)}
.badge.teal{background:var(--teal-soft);color:var(--teal)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}

/* 表格 */
.table-wrap{overflow:auto; border-radius:0 0 var(--radius) var(--radius)}
table.table{width:100%; border-collapse:separate; border-spacing:0; font-size:12.9px}
table.table th{
  position:sticky; top:0; z-index:2; text-align:left; font-size:11.2px; font-weight:600; color:var(--sub);
  letter-spacing:.5px; background:var(--panel-2); padding:11px 14px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.table td{padding:11px 14px; border-bottom:1px solid var(--line-2); color:var(--text-2); vertical-align:middle}
table.table tbody tr:hover td{background:#fafbff}
table.table tbody tr:last-child td{border-bottom:none}
table.table td.nowrap, table.table th.nowrap{white-space:nowrap}
table.table .cell-strong{color:var(--text); font-weight:600}
table.table .cell-sub{font-size:11.3px; color:var(--sub-2); margin-top:1px}
.t-actions{display:flex; gap:2px; justify-content:flex-end}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:52px 20px;color:var(--sub-2);font-size:12.8px}
.empty svg{width:38px;height:38px;color:#d7dde9}
.empty b{color:var(--sub);font-size:13.5px;font-weight:600}

.pager{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line-2);font-size:12.3px;color:var(--sub)}
.pager .right{margin-left:auto;display:flex;gap:5px}
.pager button{min-width:29px;height:29px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--text-2);cursor:pointer;font-size:12.3px}
.pager button.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.pager button[disabled]{opacity:.45;cursor:not-allowed}

/* 统计卡 */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-xs); position:relative; overflow:hidden}
.stat .st-top{display:flex; align-items:center; gap:9px; margin-bottom:12px}
.stat .st-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center}
.stat .st-ico svg{width:16px;height:16px}
.stat .st-label{font-size:12px; color:var(--sub); font-weight:500}
.stat .st-val{font-size:26px; font-weight:700; letter-spacing:-.5px; line-height:1.1}
.stat .st-val small{font-size:12px; font-weight:600; color:var(--sub-2); margin-left:3px; letter-spacing:0}
.stat .st-foot{margin-top:7px; font-size:11.5px; color:var(--sub-2); display:flex; align-items:center; gap:5px}
.stat .st-trend{font-weight:600}
.up{color:var(--green)} .down{color:var(--red)}

/* 课表 */
.cal-shell{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.cal-toolbar{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line-2); flex-wrap:wrap}
.cal-range{font-size:13.5px; font-weight:700; min-width:150px}
.cal-nav{display:flex; gap:3px}
.cal-head{display:grid; border-bottom:1px solid var(--line); background:var(--panel-2); position:sticky; top:0; z-index:4}
.cal-corner{border-right:1px solid var(--line-2)}
.cal-dayhead{
  padding:9px 6px; text-align:center; border-left:1px solid var(--line-2); font-size:12px; font-weight:600; color:var(--text-2);
}
.cal-dayhead span{display:block; font-size:10.5px; color:var(--sub-2); font-weight:500; margin-top:1px}
.cal-dayhead.today{background:var(--primary-soft)}
.cal-dayhead.today b, .cal-dayhead.today span{color:var(--primary)}
.cal-dayhead.today b{font-weight:700}
.cal-body{display:grid; position:relative; overflow-y:auto; max-height:calc(100vh - 250px)}
.cal-gutter{position:relative; border-right:1px solid var(--line-2); background:var(--panel-2)}
.cal-hourtag{position:absolute; right:7px; font-size:10.5px; color:var(--sub-2); transform:translateY(-50%); font-variant-numeric:tabular-nums}
.cal-col{position:relative; border-left:1px solid var(--line-2); transition:background .15s}
.cal-col:hover{background:#fcfdff}
.cal-col.today-col{background:#fbfcff}
.cal-line{position:absolute; left:0; right:0; border-top:1px dashed var(--line-2)}
.cal-line.half{border-top-style:dotted; opacity:.6}
.cal-ev{
  position:absolute; left:3px; right:3px; border-radius:9px; padding:5px 7px; overflow:hidden;
  font-size:11px; line-height:1.32; cursor:pointer; border-left:3px solid var(--ev,#2b59ff);
  background:var(--evbg,#edf1ff); color:var(--text); transition:.14s; box-shadow:0 1px 2px rgba(17,26,54,.05);
}
.cal-ev:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(17,26,54,.13); z-index:6}
.cal-ev b{display:block; font-size:11.3px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-ev .ev-time{font-size:10px; color:var(--text-2); font-variant-numeric:tabular-nums; opacity:.8}
.cal-ev .ev-meta{font-size:10px; color:var(--text-2); opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-ev.mini{padding:3px 6px}
.cal-ev.mini .ev-time, .cal-ev.mini .ev-meta{display:none}

.cal-month{display:grid; grid-template-columns:repeat(7,1fr); background:var(--line-2); gap:1px}
.cal-month .mhead{background:var(--panel-2); padding:8px; text-align:center; font-size:11.5px; font-weight:600; color:var(--sub)}
.mcell{background:#fff; min-height:112px; padding:6px; display:flex; flex-direction:column; gap:3px}
.mcell.out{background:#fbfcfe}
.mcell .mdate{font-size:11.5px; font-weight:600; color:var(--text-2); width:22px; height:22px; display:grid; place-items:center; border-radius:7px}
.mcell.today .mdate{background:var(--primary); color:#fff}
.mchip{
  font-size:10.4px; padding:2px 5px; border-radius:5px; border-left:2.5px solid var(--ev,#2b59ff);
  background:var(--evbg,#f2f5fd); color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
}
.mchip:hover{background:#e9eeff}
.mmore{font-size:10.2px; color:var(--sub-2); padding-left:4px; cursor:pointer}
.mmore:hover{color:var(--primary)}
.mhead-row{display:flex; align-items:center; justify-content:space-between; gap:4px; margin-bottom:3px}
.mcount{font-size:9.8px; font-weight:600; color:var(--primary); background:var(--primary-soft); border-radius:20px; padding:1px 6px; white-space:nowrap}

/* 周视图 · 清单模式：每天一列，课程纵向排列，全部可见 */
.wk-list{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:var(--line-2); gap:1px}
.wd-col{background:#fff; display:flex; flex-direction:column; min-width:0}
.wd-col.today{background:#fbfcff}
.wd-head{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 9px; background:var(--panel-2); border-bottom:1px solid var(--line-2); cursor:pointer}
.wd-head:hover{background:#eef2fd}
.wd-col.today .wd-head{background:var(--primary-soft)}
.wd-date b{font-size:12px; font-weight:700; color:var(--text); display:block; line-height:1.3}
.wd-date span{font-size:10.3px; color:var(--sub-2)}
.wd-col.today .wd-date b{color:var(--primary)}
.wd-count{font-size:11.5px; font-weight:700; color:var(--primary); background:#fff; border:1px solid var(--line); border-radius:20px; padding:1px 7px; white-space:nowrap}
.wd-count em{font-style:normal; font-size:10px; font-weight:600; margin-left:1px}
.wd-sum{font-size:10px; color:var(--sub-2); padding:5px 9px 0; background:inherit}
.wd-col.today .wd-sum{background:#fbfcff}
.wd-body{display:flex; flex-direction:column; gap:6px; padding:7px 8px 10px; flex:1}
.wd-item{display:flex; flex-direction:column; gap:2.5px; padding:8px 9px; border-radius:9px; background:var(--evbg,#f2f5fd); border-left:3px solid var(--ev,#2b59ff); cursor:pointer; transition:.14s}
.wd-item:hover{box-shadow:0 4px 12px rgba(17,26,54,.13); transform:translateY(-1px)}
.wd-top{display:flex; align-items:center; justify-content:space-between; gap:6px}
.wd-range{font-size:12.4px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:2px; white-space:nowrap}
.wd-range i{font-style:normal; color:var(--sub-2); font-weight:500}
.wd-hours{font-size:10px; font-weight:600; color:var(--text-2); background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:20px; padding:0 7px; line-height:17px; white-space:nowrap}
.wd-cls-row{display:flex; align-items:center; gap:6px; min-width:0}
.wd-cls{font-size:12.4px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wd-cls-row .badge{flex:none}
.wd-meta{font-size:10.4px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wd-empty{font-size:11px; color:var(--sub-2); text-align:center; padding:16px 0}
.wd-add{margin-top:auto; border:1px dashed var(--line); background:#fff; color:var(--sub); border-radius:8px; height:27px; font-size:11px; cursor:pointer; font-family:inherit}
.wd-add:hover{border-color:var(--primary); color:var(--primary); background:#f7f9ff}
.cal-range-n{font-style:normal; font-size:11px; font-weight:500; color:var(--sub-2); margin-left:8px}
.cal-ev.tight .ev-meta{display:none}
.cal-ev.tight b{font-size:10.6px}

/* 登录后的空态/提示条 */
.notice{display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-radius:11px; font-size:12.4px; line-height:1.55}
.notice svg{width:15px;height:15px;flex:none;margin-top:1px}
.notice.info{background:var(--primary-soft-2); border:1px solid #dde6ff; color:#2c3f74}
.notice.warn{background:var(--amber-soft); border:1px solid #f7e2bd; color:#7c4a06}
.notice.danger{background:var(--red-soft); border:1px solid #f8d3dc; color:#9f1239}

/* 表单网格 */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.form-grid .full{grid-column:1 / -1}
.fg-note{font-size:11.4px; color:var(--sub-2); margin-top:5px}
.time-row{display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:center}
.time-row .sep{color:var(--sub-2); font-size:12px}
.chip-select{display:flex; flex-wrap:wrap; gap:7px}
.chip-opt{
  padding:6px 12px; border-radius:9px; border:1px solid var(--line); background:#fbfcfe; font-size:12.2px;
  cursor:pointer; transition:.15s; user-select:none;
}
.chip-opt:hover{border-color:#c9d4f2}
.chip-opt.on{border-color:var(--primary); background:var(--primary-soft); color:var(--primary); font-weight:600}

/* 弹窗 */
.modal-mask{
  position:fixed; inset:0; background:rgba(16,26,54,.38); backdrop-filter:blur(3px); z-index:200;
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 20px 40px; overflow-y:auto;
  animation:fade .16s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal{
  background:#fff; border-radius:18px; width:100%; max-width:620px; box-shadow:0 30px 80px rgba(16,26,54,.28);
  animation:pop .18s cubic-bezier(.2,.8,.3,1); overflow:hidden; display:flex; flex-direction:column;
}
.modal.wide{max-width:860px}
.modal.xwide{max-width:1040px}
.modal-head{display:flex; align-items:flex-start; gap:12px; padding:18px 22px 14px; border-bottom:1px solid var(--line-2)}
.modal-head h3{font-size:15.5px; font-weight:700}
.modal-head p{font-size:11.8px; color:var(--sub-2); margin-top:2px}
.modal-head .icon-btn{margin-left:auto; margin-top:-4px}
.modal-body{padding:20px 22px; overflow-y:auto; max-height:calc(100vh - 260px)}
.modal-foot{display:flex; gap:9px; justify-content:flex-end; padding:14px 22px; border-top:1px solid var(--line-2); background:var(--panel-2)}
.modal-foot .left{margin-right:auto}

/* toast */
.toast-root{position:fixed; right:22px; bottom:22px; z-index:400; display:flex; flex-direction:column; gap:9px; align-items:flex-end}
.toast{
  display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:11px; background:#151d33; color:#fff;
  font-size:12.8px; box-shadow:0 12px 34px rgba(16,26,54,.26); animation:pop .18s ease; max-width:380px;
}
.toast svg{width:15px;height:15px;flex:none}
.toast.ok svg{color:#4ade80}
.toast.err svg{color:#fb7185}
.toast.warn svg{color:#fbbf24}
.toast .close{margin-left:6px;opacity:.5;cursor:pointer}

/* 搜索结果 */
.search-panel{
  position:absolute; top:58px; right:24px; width:480px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-md); z-index:120; padding:8px; max-height:70vh; overflow-y:auto;
}
.sp-group{font-size:10.5px; color:var(--sub-2); font-weight:600; letter-spacing:1px; padding:8px 10px 4px}
.sp-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer; transition:.12s}
.sp-item:hover{background:var(--primary-soft-2)}
.sp-item .sp-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}
.sp-item .sp-ico svg{width:14px;height:14px}
.sp-item .sp-txt{min-width:0;flex:1}
.sp-item .sp-txt b{display:block;font-size:12.6px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-item .sp-txt span{font-size:11px;color:var(--sub-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sp-empty{padding:26px;text-align:center;color:var(--sub-2);font-size:12.5px}

/* 班级卡片 */
.class-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:14px}
.class-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; transition:.16s; cursor:pointer; position:relative; overflow:hidden}
.class-card:hover{border-color:#c6d3f7; box-shadow:0 10px 26px rgba(17,26,54,.08); transform:translateY(-2px)}
.class-card .cc-top{display:flex; align-items:flex-start; gap:10px; margin-bottom:12px}
.class-card .cc-name{font-size:14px; font-weight:700; line-height:1.35}
.class-card .cc-code{font-size:10.8px; color:var(--sub-2); margin-top:2px; letter-spacing:.4px}
.class-card .cc-meta{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; font-size:11.6px; color:var(--sub); margin-bottom:12px}
.class-card .cc-meta b{display:block; color:var(--text-2); font-weight:600; font-size:12.3px; margin-top:1px}
.class-card .cc-foot{display:flex; align-items:center; gap:8px; padding-top:11px; border-top:1px solid var(--line-2)}
.class-card .cc-foot .right{margin-left:auto; display:flex; gap:4px}
.progress{height:5px; border-radius:4px; background:#eef1f8; overflow:hidden; flex:1}
.progress i{display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#2b59ff,#5b86ff)}

/* 权限矩阵 */
.perm-table td, .perm-table th{text-align:center}
.perm-table td:first-child, .perm-table th:first-child{text-align:left}
.switch{position:relative; display:inline-block; width:36px; height:20px; flex:none}
.switch input{opacity:0; width:0; height:0}
.switch span{position:absolute; inset:0; background:#d9e0ee; border-radius:20px; transition:.18s; cursor:pointer}
.switch span::after{content:""; position:absolute; width:16px; height:16px; left:2px; top:2px; background:#fff; border-radius:50%; transition:.18s; box-shadow:0 1px 3px rgba(16,26,54,.2)}
.switch input:checked + span{background:var(--primary)}
.switch input:checked + span::after{transform:translateX(16px)}
.switch input:disabled + span{opacity:.45; cursor:not-allowed}

/* 详情列表 */
.dl{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:12.8px}
.dl dt{color:var(--sub-2); white-space:nowrap}
.dl dd{margin:0; color:var(--text-2); font-weight:500}
.divider{height:1px; background:var(--line-2); margin:16px 0}
.avatar{display:grid;place-items:center;border-radius:10px;color:#fff;font-weight:700;flex:none}
.avatar.sm{width:26px;height:26px;font-size:11px;border-radius:8px}
.avatar.md{width:34px;height:34px;font-size:12.5px;border-radius:10px}
.avatar.lg{width:46px;height:46px;font-size:16px;border-radius:13px}
.ul-clean{list-style:none;padding:0;margin:0}

/* 时间表/日程列表 */
.day-list{display:flex; flex-direction:column}
.day-row{display:flex; gap:13px; padding:11px 0; border-bottom:1px dashed var(--line-2)}
.day-row:last-child{border-bottom:none}
.day-time{width:88px; flex:none; font-size:12px; font-variant-numeric:tabular-nums; color:var(--text-2); font-weight:600}
.day-time span{display:block; font-size:10.5px; color:var(--sub-2); font-weight:400}
.day-main{flex:1; min-width:0}
.day-main b{font-size:12.9px; font-weight:600; display:block}
.day-main span{font-size:11.4px; color:var(--sub-2)}
.day-bar{width:3px;border-radius:3px;flex:none}

/* 迷你柱状图 */
.bars{display:flex; align-items:flex-end; gap:9px; height:120px; padding:0 3px}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end}
.bar-col .bar{width:100%; max-width:34px; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#5b86ff,#2b59ff); min-height:3px; transition:.2s}
.bar-col:hover .bar{filter:brightness(1.06)}
.bar-col small{font-size:10.5px; color:var(--sub-2)}

/* 班型人数：可输入区间并微调 */
.cap-row{display:flex; align-items:center; gap:7px}
.cap-row .input{flex:1; min-width:0; text-align:center}
.cap-row .btn{height:34px; min-width:38px; padding:0 10px; font-size:16px; line-height:1; font-weight:600; flex:none}

/* 员工姓名可点击进入档案 */
/* 课表卡片中可点击的班级名称 */
.wd-cls[data-cls-link]{cursor:pointer;transition:.15s;border-bottom:1px dashed transparent}
.wd-cls[data-cls-link]:hover{color:var(--primary);border-bottom-color:currentColor}

.link-name{background:none; border:none; padding:0; font:inherit; font-size:13px; font-weight:700; color:var(--primary); cursor:pointer; text-align:left; border-bottom:1px solid transparent; transition:.15s}
.link-name:hover{color:#1e46d6; border-bottom-color:currentColor}

/* 员工档案页 */
.profile-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.profile-dl{gap:11px 20px; font-size:12.9px}
.profile-dl dd{word-break:break-all}

/* 学员页：科目类别筛选（小尺寸分类按钮） */
.prog-filter{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.pf-chip{display:inline-flex; align-items:center; gap:6px; height:29px; padding:0 11px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--text-2); font-size:11.8px; font-weight:600; cursor:pointer; transition:.15s}
.pf-chip i{width:7px; height:7px; border-radius:50%; background:var(--pc,var(--primary)); flex:none}
.pf-chip b{font-size:10.6px; font-weight:700; color:var(--sub-2); background:#f1f4fb; border-radius:5px; padding:1px 5px}
.pf-chip:hover{border-color:#c6d3f7}
.pf-chip.on{background:var(--primary-soft); border-color:#c3d2fb; color:var(--primary)}
.pf-chip.on b{background:#fff; color:var(--primary)}

/* 详情页：班级 / 学员 整页信息 */
.det-info{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.det-info .dl{font-size:12.9px}
/* 课表中班级名旁的「本班课程表」链接 */
.cls-tt-link{font-size:10.8px; font-weight:600; color:var(--primary); cursor:pointer; white-space:nowrap; text-decoration:none; opacity:.85; transition:.15s}
.cls-tt-link:hover{opacity:1; text-decoration:underline}
/* 搜索结果页内联搜索框 */
.search-inline{display:flex; align-items:center; gap:8px}
.search-inline .input{height:36px}

/* 响应式 */
@media (max-width:1180px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .det-info{grid-template-columns:1fr 1fr}
  .search-box{width:210px}
  .search-box:focus-within{width:240px}
  .wk-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .det-info{grid-template-columns:1fr}
}
@media (max-width:900px){
  .wk-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .only-mobile{display:grid!important}
  .only-desk{display:none!important}
  .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 40px rgba(16,26,54,.16)}
  .sidebar.open{transform:none}
  .sidebar.open + .main ~ .sidebar-mask, .sidebar-mask.show{display:block}
  .page-head p{display:none}
  .topbar{padding:0 14px; gap:10px}
  .view{padding:16px 14px 32px}
  .login-card{grid-template-columns:1fr; max-width:460px}
  .login-brand{display:none}
  .login-form{padding:34px 28px 28px}
}
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr; gap:10px}
  .stat{padding:13px}
  .stat .st-val{font-size:21px}
  .search-box{display:none}
  .page-head h2{font-size:15px}
  .form-grid{grid-template-columns:1fr}
  .profile-grid{grid-template-columns:1fr}
  .search-panel{width:calc(100vw - 28px); right:14px}
  .cal-body{max-height:none}
  .modal-mask{padding:0; align-items:flex-end}
  .modal{max-width:100%; border-radius:18px 18px 0 0; max-height:92vh}
  .modal-body{max-height:70vh}
}
